+
+
+ {#if sidePanelPosition === 'right'}
+ Vite + Svelte
+{#snippet editorTabContent()} +
- (initial);
+
+ return {
+ subscribe,
+ set: (value: EditorSettings) => {
+ localStorage.setItem('editorSettings', JSON.stringify(value));
+ set(value);
+ },
+ update: (updater: (value: EditorSettings) => EditorSettings) => {
+ update((current) => {
+ const newValue = updater(current);
+ localStorage.setItem('editorSettings', JSON.stringify(newValue));
+ return newValue;
+ });
+ },
+ updatePartial: (partial: Partial) => {
+ update((current) => {
+ const newValue = { ...current, ...partial };
+ localStorage.setItem('editorSettings', JSON.stringify(newValue));
+ return newValue;
+ });
+ }
+ };
+}
+
+export const editorSettings = createEditorSettings();
File Browser
+Your project files will be listed here.
+-
+
- src/ +
- ├── App.svelte +
- ├── main.ts +
- └── lib/ +
+
+
+
+
+
+
+
+
diff --git a/src/app.css b/src/app.css
index 61ba367..f180277 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,13 @@
+* {
+ box-sizing: border-box;
+}
+
:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
font-weight: 400;
- color-scheme: light dark;
+ color-scheme: dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
@@ -13,41 +17,33 @@
-moz-osx-font-smoothing: grayscale;
}
+html,
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+#app {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
+
a:hover {
color: #535bf2;
}
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-.card {
- padding: 2em;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
button {
- border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
@@ -57,23 +53,13 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}
+
button:hover {
border-color: #646cff;
}
+
button:focus,
button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+ outline: 2px solid #646cff;
+ outline-offset: 2px;
}
diff --git a/src/lib/Editor.svelte b/src/lib/Editor.svelte
new file mode 100644
index 0000000..3ff73ae
--- /dev/null
+++ b/src/lib/Editor.svelte
@@ -0,0 +1,158 @@
+
+
+
+ {#if sidePanelPosition === 'left'}
+
- - Check out SvelteKit, the official Svelte app framework powered by Vite! -
- -- Click on the Vite and Svelte logos to learn more -
- +This is a popup!
+You can drag it around by the header.
+It stays on top of everything else.
+
+
+
+
+
diff --git a/src/lib/EditorSettings.svelte b/src/lib/EditorSettings.svelte
new file mode 100644
index 0000000..ba04c59
--- /dev/null
+++ b/src/lib/EditorSettings.svelte
@@ -0,0 +1,220 @@
+
+
+
+
+
+
diff --git a/src/lib/EditorWithLogs.svelte b/src/lib/EditorWithLogs.svelte
new file mode 100644
index 0000000..967e3b2
--- /dev/null
+++ b/src/lib/EditorWithLogs.svelte
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/LogPanel.svelte b/src/lib/LogPanel.svelte
new file mode 100644
index 0000000..7ead1ce
--- /dev/null
+++ b/src/lib/LogPanel.svelte
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
new file mode 100644
index 0000000..32405eb
--- /dev/null
+++ b/src/lib/Popup.svelte
@@ -0,0 +1,135 @@
+
+
+{#if visible}
+
+ {#if logs.length === 0}
+
+No output yet...
+ {:else}
+ {#each logs as log, i}
+
+ {i + 1}
+
+
+ {/each}
+ {/if}
+
+
+{/if}
+
+
diff --git a/src/lib/SidePanel.svelte b/src/lib/SidePanel.svelte
new file mode 100644
index 0000000..ee64ea7
--- /dev/null
+++ b/src/lib/SidePanel.svelte
@@ -0,0 +1,214 @@
+
+
+{#if visible}
+
+ {title}
+
+
+
+
+
+
+
+ {#if tabs.length > 0}
+
+{/if}
+
+
diff --git a/src/lib/TopBar.svelte b/src/lib/TopBar.svelte
new file mode 100644
index 0000000..50d8c7a
--- /dev/null
+++ b/src/lib/TopBar.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+
diff --git a/src/lib/stores/editorSettings.ts b/src/lib/stores/editorSettings.ts
new file mode 100644
index 0000000..5ea47de
--- /dev/null
+++ b/src/lib/stores/editorSettings.ts
@@ -0,0 +1,50 @@
+import { writable } from 'svelte/store';
+
+export interface EditorSettings {
+ fontSize: number;
+ fontFamily: string;
+ showLineNumbers: boolean;
+ enableLineWrapping: boolean;
+ tabSize: number;
+ vimMode: boolean;
+}
+
+const defaultSettings: EditorSettings = {
+ fontSize: 14,
+ fontFamily: "'Roboto Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+ showLineNumbers: true,
+ enableLineWrapping: false,
+ tabSize: 2,
+ vimMode: false
+};
+
+function createEditorSettings() {
+ const stored = localStorage.getItem('editorSettings');
+ const initial = stored ? { ...defaultSettings, ...JSON.parse(stored) } : defaultSettings;
+
+ const { subscribe, set, update } = writable
+ {#each tabs as tab}
+
+ {/each}
+
+
+
+ {#each tabs as tab}
+ {#if activeTab === tab.id}
+
+ {:else}
+
+ {@render tab.content()}
+
+ {/if}
+ {/each}
+
+ {@render children?.()}
+
+ {/if}
+