@@ -396,7 +416,7 @@
{/if}
- {#if !isMobile}
+ {#if !isMobile && isPreviewVisible}
- {#if !isCompatibleBrowser}
-
+
+ {#if portal.selectedPort !== null}
+
port {portal.selectedPort}
+ {/if}
+
+ {/if}
+
+
+ {#if !isCompatibleBrowser}
-
+
+
+
Incompatible Browser
+
+ Requires Atomics.waitAsync (Chrome, Edge, Safari
+ 16.4+).
+
-
Incompatible Browser
-
- Requires Atomics.waitAsync (Chrome, Edge, Safari
- 16.4+).
-
-
- {:else}
- {#if portal.portals.length > 0}
-
- {/if}
-
- {#if loaderVisible}
-
-
(loaderVisible = false)}
+ {:else}
+ {#if portal.portals.length > 0}
+ session.saveAll()}
+ onCollapse={isMobile ? undefined : togglePreview}
/>
-
+ {/if}
+
+ {#if loaderVisible}
+
+ (loaderVisible = false)}
+ />
+
+ {/if}
{/if}
- {/if}
+
@@ -570,8 +617,8 @@
/* ── Mobile ────────────────────────────────────────────────────────────── */
/* Keep hidden panes mounted (terminals/iframes need persistent DOM) but
- take them out of layout so the active pane fills the viewport. */
- .mobile-hidden {
+ take them out of layout so the visible panes fill the space. */
+ .pane-hidden {
display: none !important;
}
diff --git a/src/lib/components/ide/ImageViewer.svelte b/src/lib/components/ide/ImageViewer.svelte
new file mode 100644
index 0000000..cce0d9a
--- /dev/null
+++ b/src/lib/components/ide/ImageViewer.svelte
@@ -0,0 +1,169 @@
+
+
+
+
+ {#if failed}
+
+ This image could not be displayed
+
+ {:else}
+
+
+
(failed = true)}
+ class:pixelated={scale > 1}
+ class={natural ? 'm-auto' : 'm-auto max-h-full max-w-full object-contain'}
+ style={natural
+ ? `width: ${Math.round(natural.width * scale)}px; height: ${Math.round(natural.height * scale)}px;`
+ : ''}
+ />
+
+ {/if}
+
+
+ {#if natural}
+ {natural.width} × {natural.height}
+ {/if}
+ {formatBytes(image.bytes)}
+ {#if natural && !failed}
+
+ stepZoom(-1)}
+ disabled={!canZoomOut}
+ title="Zoom out"
+ aria-label="Zoom out"
+ class="zoom-btn"
+ >
+
+ (zoom = null)}
+ title="Fit to window"
+ class="zoom-btn w-11 justify-center tabular-nums"
+ >
+ {Math.round(scale * 100)}%
+
+ stepZoom(1)}
+ disabled={!canZoomIn}
+ title="Zoom in"
+ aria-label="Zoom in"
+ class="zoom-btn"
+ >
+
+
+ {/if}
+
+
+
+
diff --git a/src/lib/components/ide/SettingsMenu.svelte b/src/lib/components/ide/SettingsMenu.svelte
new file mode 100644
index 0000000..ea77c84
--- /dev/null
+++ b/src/lib/components/ide/SettingsMenu.svelte
@@ -0,0 +1,130 @@
+
+
+
+ (open = !open)}
+ aria-expanded={open}
+ class="{baseClass} {open ? activeClass : idleClass}"
+ title="Settings"
+ aria-label="Settings"
+ >
+
+
+ {#if open}
+
+ {/if}
+
+
+
diff --git a/src/lib/components/ide/monaco.ts b/src/lib/components/ide/monaco.ts
index 4f6dd08..4eb4726 100644
--- a/src/lib/components/ide/monaco.ts
+++ b/src/lib/components/ide/monaco.ts
@@ -5,6 +5,31 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { shikiToMonaco, textmateThemeToMonacoTheme } from '@shikijs/monaco';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import type { ThemeRegistrationResolved } from 'shiki';
+import css from '@shikijs/langs/css';
+import docker from '@shikijs/langs/docker';
+import graphql from '@shikijs/langs/graphql';
+import html from '@shikijs/langs/html';
+import ini from '@shikijs/langs/ini';
+import javascript from '@shikijs/langs/javascript';
+import json from '@shikijs/langs/json';
+import less from '@shikijs/langs/less';
+import markdown from '@shikijs/langs/markdown';
+import python from '@shikijs/langs/python';
+import scss from '@shikijs/langs/scss';
+import shellscript from '@shikijs/langs/shellscript';
+import sql from '@shikijs/langs/sql';
+import svelte from '@shikijs/langs/svelte';
+import toml from '@shikijs/langs/toml';
+import typescript from '@shikijs/langs/typescript';
+import vue from '@shikijs/langs/vue';
+import xml from '@shikijs/langs/xml';
+import yaml from '@shikijs/langs/yaml';
+import type { EditorThemeId } from '$lib/config/editor-themes';
+import { THEME_DATA } from './themes/theme-data';
/**
* Monaco bootstrap for the playground editor. This module (and EditorPane, which
@@ -26,61 +51,68 @@ self.MonacoEnvironment = {
for (const defaults of [monacoTs.typescriptDefaults, monacoTs.javascriptDefaults])
defaults.setDiagnosticsOptions({ noSemanticValidation: true, noSyntaxValidation: false });
-monaco.editor.defineTheme('browsercode-dark', {
- base: 'vs-dark',
- inherit: true,
- rules: [],
- colors: {
- 'editor.background': '#09090b',
- 'editor.foreground': '#d9d9d9',
- 'editorCursor.foreground': '#10b981',
- 'editor.selectionBackground': '#10b9812e',
- 'editor.inactiveSelectionBackground': '#10b9811a',
- 'editor.lineHighlightBackground': '#ffffff05',
- 'editorLineNumber.foreground': '#ffffff40',
- 'editorLineNumber.activeForeground': '#ffffff8c',
- 'editorGutter.background': '#09090b',
- 'editorIndentGuide.background1': '#ffffff0a',
- 'editorIndentGuide.activeBackground1': '#ffffff1f',
- 'editorWidget.background': '#111111',
- 'editorWidget.border': '#ffffff14',
- 'scrollbarSlider.background': '#ffffff1f',
- 'scrollbarSlider.hoverBackground': '#ffffff38',
- 'scrollbarSlider.activeBackground': '#ffffff38',
- 'editorOverviewRuler.border': '#00000000'
- }
-});
+// Fallback for a failed install below: Monaco resolves an unknown theme name to vs-light, and
+// silently, so every theme has to exist even without TextMate.
+for (const [id, theme] of Object.entries(THEME_DATA))
+ monaco.editor.defineTheme(
+ id,
+ textmateThemeToMonacoTheme(
+ theme as ThemeRegistrationResolved
+ ) as monaco.editor.IStandaloneThemeData
+ );
-// Svelte and Vue have no Monaco grammar, so they fall back to HTML.
-const LANGUAGE_BY_EXT: Record
= {
- svelte: 'html',
- vue: 'html',
- html: 'html',
- htm: 'html',
- ts: 'typescript',
- tsx: 'typescript',
- mts: 'typescript',
- cts: 'typescript',
- js: 'javascript',
- jsx: 'javascript',
- mjs: 'javascript',
- cjs: 'javascript',
- css: 'css',
- scss: 'scss',
- less: 'less',
- json: 'json',
- md: 'markdown',
- markdown: 'markdown',
- yaml: 'yaml',
- yml: 'yaml',
- xml: 'xml',
- svg: 'xml'
-};
+/* Replaces Monarch with TextMate grammars */
+async function installHighlighting(): Promise {
+ // Not Monaco languages, so shikiToMonaco would skip them and they would fall back to
+ // HTML (.svelte/.vue) or plaintext (.toml). Registering the extensions also lets Monaco
+ // infer them in `modelFor`.
+ monaco.languages.register({ id: 'svelte', extensions: ['.svelte'] });
+ monaco.languages.register({ id: 'vue', extensions: ['.vue'] });
+ monaco.languages.register({ id: 'toml', extensions: ['.toml'] });
-// Maps a file path to a Monaco language id by its extension; unknown types are plaintext.
-export function languageFor(file: string): string {
- const ext = file.slice(file.lastIndexOf('.') + 1).toLowerCase();
- return LANGUAGE_BY_EXT[ext] ?? 'plaintext';
+ const highlighter = await createHighlighterCore({
+ themes: Object.values(THEME_DATA),
+ langs: [
+ css,
+ docker,
+ graphql,
+ html,
+ ini,
+ javascript,
+ json,
+ less,
+ markdown,
+ python,
+ scss,
+ shellscript,
+ sql,
+ svelte,
+ toml,
+ typescript,
+ vue,
+ xml,
+ yaml
+ ],
+ // Covers every grammar loaded here, and keeps the oniguruma wasm out of the bundle.
+ engine: createJavaScriptRegexEngine()
+ });
+
+ // Reads the theme list once, and re-running would wrap `setTheme` twice.
+ shikiToMonaco(highlighter, monaco);
+}
+
+/** Await before creating an editor: `shikiToMonaco` patches `create` and `setTheme`. */
+export const highlightingReady: Promise = installHighlighting().catch((error) => {
+ console.error('Failed to install TextMate highlighting:', error);
+});
+
+/** Global; no editor or model is rebuilt. */
+export function applyTheme(id: EditorThemeId): void {
+ try {
+ monaco.editor.setTheme(id);
+ } catch (error) {
+ console.error(`Failed to apply the ${id} editor theme:`, error);
+ }
}
export { monaco };
diff --git a/src/lib/components/ide/themes/browsercode-dark.ts b/src/lib/components/ide/themes/browsercode-dark.ts
new file mode 100644
index 0000000..8d5b317
--- /dev/null
+++ b/src/lib/components/ide/themes/browsercode-dark.ts
@@ -0,0 +1,93 @@
+import type { ThemeRegistration } from 'shiki';
+
+/**
+ * The house theme, in TextMate form so Shiki loads it alongside the bundled ones. Token colors come
+ * from the `bc-*` palette in `routes/layout.css`.
+ */
+export const browsercodeDark: ThemeRegistration = {
+ name: 'browsercode-dark',
+ type: 'dark',
+ colors: {
+ 'editor.background': '#09090b',
+ 'editor.foreground': '#d9d9d9',
+ 'editorCursor.foreground': '#10b981',
+ 'editor.selectionBackground': '#10b9812e',
+ 'editor.inactiveSelectionBackground': '#10b9811a',
+ 'editor.lineHighlightBackground': '#ffffff05',
+ 'editorLineNumber.foreground': '#ffffff40',
+ 'editorLineNumber.activeForeground': '#ffffff8c',
+ 'editorGutter.background': '#09090b',
+ 'editorIndentGuide.background1': '#ffffff0a',
+ 'editorIndentGuide.activeBackground1': '#ffffff1f',
+ 'editorWidget.background': '#111111',
+ 'editorWidget.border': '#ffffff14',
+ 'scrollbarSlider.background': '#ffffff1f',
+ 'scrollbarSlider.hoverBackground': '#ffffff38',
+ 'scrollbarSlider.activeBackground': '#ffffff38',
+ 'editorOverviewRuler.border': '#00000000'
+ },
+ tokenColors: [
+ {
+ scope: ['comment', 'punctuation.definition.comment'],
+ settings: { foreground: '#5c6473', fontStyle: 'italic' }
+ },
+ {
+ scope: ['string', 'string.quoted', 'string.template'],
+ settings: { foreground: '#b7cdff' }
+ },
+ {
+ scope: ['constant.character.escape', 'string.regexp'],
+ settings: { foreground: '#ffd633' }
+ },
+ {
+ scope: ['constant.numeric', 'constant.language', 'support.constant'],
+ settings: { foreground: '#c73da6' }
+ },
+ {
+ scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'],
+ settings: { foreground: '#4a7dff' }
+ },
+ {
+ scope: ['keyword.operator', 'punctuation', 'meta.brace'],
+ settings: { foreground: '#7d8595' }
+ },
+ {
+ scope: ['entity.name.function', 'support.function', 'meta.function-call'],
+ settings: { foreground: '#ffd633' }
+ },
+ {
+ scope: [
+ 'entity.name.type',
+ 'entity.name.class',
+ 'entity.other.inherited-class',
+ 'support.type',
+ 'support.class'
+ ],
+ settings: { foreground: '#8fb0ff' }
+ },
+ {
+ scope: ['variable', 'variable.other', 'meta.definition.variable'],
+ settings: { foreground: '#d9d9d9' }
+ },
+ {
+ scope: ['variable.parameter', 'meta.object-literal.key', 'support.variable.property'],
+ settings: { foreground: '#a9b4c8' }
+ },
+ {
+ scope: ['entity.name.tag', 'punctuation.definition.tag'],
+ settings: { foreground: '#ff6161' }
+ },
+ {
+ scope: ['entity.other.attribute-name'],
+ settings: { foreground: '#ffd633' }
+ },
+ {
+ scope: ['markup.heading', 'markup.bold'],
+ settings: { foreground: '#b7cdff', fontStyle: 'bold' }
+ },
+ {
+ scope: ['invalid', 'invalid.illegal'],
+ settings: { foreground: '#ff6161' }
+ }
+ ]
+};
diff --git a/src/lib/components/ide/themes/colorblind-safe.ts b/src/lib/components/ide/themes/colorblind-safe.ts
new file mode 100644
index 0000000..086eefd
--- /dev/null
+++ b/src/lib/components/ide/themes/colorblind-safe.ts
@@ -0,0 +1,93 @@
+import type { ThemeRegistration } from 'shiki';
+
+/**
+ * Built on the Okabe–Ito palette, which stays separable under protanopia, deuteranopia and
+ * tritanopia. Every color clears WCAG AA (4.5:1) on this background.
+ */
+export const colorblindSafe: ThemeRegistration = {
+ name: 'colorblind-safe',
+ type: 'dark',
+ colors: {
+ 'editor.background': '#0f1319',
+ 'editor.foreground': '#e6edf3',
+ 'editorCursor.foreground': '#56b4e9',
+ 'editor.selectionBackground': '#56b4e93d',
+ 'editor.inactiveSelectionBackground': '#56b4e921',
+ 'editor.lineHighlightBackground': '#ffffff08',
+ 'editorLineNumber.foreground': '#ffffff4d',
+ 'editorLineNumber.activeForeground': '#ffffff99',
+ 'editorGutter.background': '#0f1319',
+ 'editorIndentGuide.background1': '#ffffff0f',
+ 'editorIndentGuide.activeBackground1': '#ffffff2b',
+ 'editorWidget.background': '#161b22',
+ 'editorWidget.border': '#ffffff1f',
+ 'scrollbarSlider.background': '#ffffff26',
+ 'scrollbarSlider.hoverBackground': '#ffffff40',
+ 'scrollbarSlider.activeBackground': '#ffffff40',
+ 'editorOverviewRuler.border': '#00000000'
+ },
+ tokenColors: [
+ {
+ scope: ['comment', 'punctuation.definition.comment'],
+ settings: { foreground: '#8d96a0', fontStyle: 'italic' }
+ },
+ {
+ scope: ['string', 'string.quoted', 'string.template'],
+ settings: { foreground: '#f0e442' }
+ },
+ {
+ scope: ['constant.character.escape', 'string.regexp'],
+ settings: { foreground: '#f5793a' }
+ },
+ {
+ scope: ['constant.numeric', 'constant.language', 'support.constant'],
+ settings: { foreground: '#e69f00' }
+ },
+ {
+ scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'],
+ settings: { foreground: '#cc79a7' }
+ },
+ {
+ scope: ['keyword.operator', 'punctuation', 'meta.brace'],
+ settings: { foreground: '#7d8895' }
+ },
+ {
+ scope: ['entity.name.function', 'support.function', 'meta.function-call'],
+ settings: { foreground: '#56b4e9' }
+ },
+ {
+ scope: [
+ 'entity.name.type',
+ 'entity.name.class',
+ 'entity.other.inherited-class',
+ 'support.type',
+ 'support.class'
+ ],
+ settings: { foreground: '#9fe6ff' }
+ },
+ {
+ scope: ['variable', 'variable.other', 'meta.definition.variable'],
+ settings: { foreground: '#e6edf3' }
+ },
+ {
+ scope: ['variable.parameter', 'meta.object-literal.key', 'support.variable.property'],
+ settings: { foreground: '#b8c4d0' }
+ },
+ {
+ scope: ['entity.name.tag', 'punctuation.definition.tag'],
+ settings: { foreground: '#cc79a7' }
+ },
+ {
+ scope: ['entity.other.attribute-name'],
+ settings: { foreground: '#56b4e9' }
+ },
+ {
+ scope: ['markup.heading', 'markup.bold'],
+ settings: { foreground: '#e6edf3', fontStyle: 'bold' }
+ },
+ {
+ scope: ['invalid', 'invalid.illegal'],
+ settings: { foreground: '#f5793a', fontStyle: 'underline' }
+ }
+ ]
+};
diff --git a/src/lib/components/ide/themes/theme-data.ts b/src/lib/components/ide/themes/theme-data.ts
new file mode 100644
index 0000000..c47b274
--- /dev/null
+++ b/src/lib/components/ide/themes/theme-data.ts
@@ -0,0 +1,25 @@
+import type { ThemeRegistration } from 'shiki';
+import catppuccinMocha from '@shikijs/themes/catppuccin-mocha';
+import dracula from '@shikijs/themes/dracula';
+import githubDarkDefault from '@shikijs/themes/github-dark-default';
+import nightOwl from '@shikijs/themes/night-owl';
+import oneDarkPro from '@shikijs/themes/one-dark-pro';
+import tokyoNight from '@shikijs/themes/tokyo-night';
+import type { EditorThemeId } from '$lib/config/editor-themes';
+import { browsercodeDark } from './browsercode-dark';
+import { colorblindSafe } from './colorblind-safe';
+
+/**
+ * Colors for every id in `config/editor-themes.ts`, which holds the metadata the menu and store
+ * read. Kept apart from it so this data stays behind the lazy Monaco import.
+ */
+export const THEME_DATA: Record = {
+ 'browsercode-dark': browsercodeDark,
+ 'colorblind-safe': colorblindSafe,
+ dracula,
+ 'tokyo-night': tokyoNight,
+ 'night-owl': nightOwl,
+ 'one-dark-pro': oneDarkPro,
+ 'github-dark-default': githubDarkDefault,
+ 'catppuccin-mocha': catppuccinMocha
+};
diff --git a/src/lib/config/editor-themes.ts b/src/lib/config/editor-themes.ts
new file mode 100644
index 0000000..77f4607
--- /dev/null
+++ b/src/lib/config/editor-themes.ts
@@ -0,0 +1,44 @@
+/**
+ * Editor theme metadata.
+ */
+
+export type EditorThemeVariant = 'dark' | 'light';
+
+export type EditorThemeId =
+ | 'browsercode-dark'
+ | 'colorblind-safe'
+ | 'dracula'
+ | 'tokyo-night'
+ | 'night-owl'
+ | 'one-dark-pro'
+ | 'github-dark-default'
+ | 'catppuccin-mocha';
+
+export type EditorThemeConfig = {
+ id: EditorThemeId;
+ label: string;
+ variant: EditorThemeVariant;
+};
+
+/** Ids are Shiki theme names, which `shikiToMonaco` registers with Monaco verbatim. */
+export const editorThemes: EditorThemeConfig[] = [
+ { id: 'browsercode-dark', label: 'BrowserCode Dark', variant: 'dark' },
+ { id: 'colorblind-safe', label: 'Colorblind Safe', variant: 'dark' },
+ { id: 'dracula', label: 'Dracula', variant: 'dark' },
+ { id: 'tokyo-night', label: 'Tokyo Night', variant: 'dark' },
+ { id: 'night-owl', label: 'Night Owl', variant: 'dark' },
+ { id: 'one-dark-pro', label: 'One Dark Pro', variant: 'dark' },
+ { id: 'github-dark-default', label: 'GitHub Dark', variant: 'dark' },
+ { id: 'catppuccin-mocha', label: 'Catppuccin Mocha', variant: 'dark' }
+];
+
+/** Stands in for any variant with nothing stored, including light until one ships. */
+export const defaultEditorThemeId: EditorThemeId = 'browsercode-dark';
+
+export function editorThemesFor(variant: EditorThemeVariant): EditorThemeConfig[] {
+ return editorThemes.filter((theme) => theme.variant === variant);
+}
+
+export function isEditorThemeId(value: string | null): value is EditorThemeId {
+ return value !== null && editorThemes.some((theme) => theme.id === value);
+}
diff --git a/src/lib/ide/media.ts b/src/lib/ide/media.ts
new file mode 100644
index 0000000..d950591
--- /dev/null
+++ b/src/lib/ide/media.ts
@@ -0,0 +1,57 @@
+/**
+ * Image tabs: pod files have no URL an ` = {
+ png: 'image/png',
+ apng: 'image/apng',
+ jpg: 'image/jpeg',
+ jpeg: 'image/jpeg',
+ jpe: 'image/jpeg',
+ jif: 'image/jpeg',
+ jfif: 'image/jpeg',
+ gif: 'image/gif',
+ webp: 'image/webp',
+ avif: 'image/avif',
+ bmp: 'image/bmp',
+ ico: 'image/x-icon'
+};
+
+const extensionOf = (path: string): string => path.slice(path.lastIndexOf('.') + 1).toLowerCase();
+
+/** True when `path` opens as an image tab rather than in the text editor. */
+export function isImagePath(path: string): boolean {
+ return extensionOf(path) in IMAGE_MIME;
+}
+
+/** Reads an image out of the pod and publishes it as an object URL. */
+export async function loadPodImage(pod: BrowserPod, absPath: string): Promise {
+ const bytes = await readPodBinaryFile(pod, absPath);
+ const blob = new Blob([bytes], { type: IMAGE_MIME[extensionOf(absPath)] });
+ return { url: URL.createObjectURL(blob), bytes: bytes.byteLength };
+}
+
+/** Releases the object URL; a leaked one pins the whole image in memory. */
+export function releaseImage(image: ImagePayload | undefined): void {
+ if (image) URL.revokeObjectURL(image.url);
+}
+
+const BYTE_UNITS = ['B', 'KB', 'MB'];
+
+/** Byte count for the viewer's status line, e.g. `24.1 KB`. */
+export function formatBytes(bytes: number): string {
+ let value = bytes;
+ let unit = 0;
+ while (value >= 1024 && unit < BYTE_UNITS.length - 1) {
+ value /= 1024;
+ unit++;
+ }
+ return `${unit === 0 ? value : value.toFixed(1)} ${BYTE_UNITS[unit]}`;
+}
diff --git a/src/lib/ide/native-deps.ts b/src/lib/ide/native-deps.ts
index db42cca..5b838f2 100644
--- a/src/lib/ide/native-deps.ts
+++ b/src/lib/ide/native-deps.ts
@@ -11,6 +11,9 @@ type Manifest = {
/** What the repo declares, package name to version spec, dependencies and devDependencies. */
type DeclaredDeps = Map;
+/** Reads the repo's own value for an entry, never an earlier patch's, so rule order cannot matter. */
+type CurrentValue = (section: string, name: string) => string | undefined;
+
type SectionPatch = {
/** Top-level manifest key holding a name to value map. */
section: string;
@@ -21,7 +24,7 @@ type SectionPatch = {
type FrameworkRule = {
applies: (deps: DeclaredDeps) => boolean;
- patches: SectionPatch[];
+ patches: (deps: DeclaredDeps, current: CurrentValue) => SectionPatch[];
};
/** Ours wins: for where the repo's own value is the thing that breaks the pod. */
@@ -42,24 +45,46 @@ const DEP_SECTIONS = new Set([
'peerDependencies'
]);
+/** Native binaries the pod cannot execute. */
const WASM_BUNDLERS = {
- esbuild: 'npm:esbuild-wasm@0.25.11',
- rollup: 'npm:@rollup/wasm-node@4.52.4'
+ esbuild: 'npm:esbuild-wasm@*',
+ rollup: 'npm:@rollup/wasm-node@*'
};
const FRAMEWORK_RULES: FrameworkRule[] = [
- // Vite 8+
+ // Vite 8.2+
{
- applies: (deps) => majorAtLeast(deps, 'vite', 8),
- patches: [fill('devDependencies', { '@rolldown/binding-wasm32-wasi': '1.2.2' })]
+ applies: (deps) => minorAtLeast(deps, 'vite', 8, 2),
+ patches: () => [fill('devDependencies', { '@rolldown/binding-wasm32-wasi': '1.2.5' })]
},
// Vite 7 and earlier
{
applies: (deps) => majorBelow(deps, 'vite', 8),
- patches: [force('overrides', WASM_BUNDLERS)]
+ patches: () => [force('overrides', WASM_BUNDLERS)]
+ },
+ // Next.js
+ {
+ applies: (deps) => deps.has('next'),
+ patches: (deps, current) => {
+ const dev = nextDevWithWebpack(current('scripts', 'dev'), deps);
+ return dev ? [force('scripts', { dev })] : [];
+ }
}
];
+/**
+ * Turbopack needs native bindings the pod cannot execute. Dropping its flags is enough through Next
+ * 15; 16 defaults to it and needs `--webpack` to opt out.
+ */
+function nextDevWithWebpack(script: string | undefined, deps: DeclaredDeps): string | undefined {
+ if (!script) return undefined;
+ const withoutTurbopack = script.replace(/ --turbo(?:pack)?\b/g, '');
+ if (!majorAtLeast(deps, 'next', 16) || withoutTurbopack.includes('--webpack')) {
+ return withoutTurbopack;
+ }
+ return withoutTurbopack.replace(/\bnext\s+dev\b/, '$& --webpack');
+}
+
/** Highest major the spec could install. Null means no ceiling at all. */
function highestMajor(spec: string): number | null {
if (spec.includes('>') && !spec.includes('<')) return null;
@@ -68,6 +93,27 @@ function highestMajor(spec: string): number | null {
return Math.max(...versions.map((version) => Number.parseInt(version, 10)));
}
+/** Highest minor the spec could install within `major`, Infinity when it leaves the minor free. */
+function highestMinor(spec: string, major: number): number {
+ // A caret or a bare major floats the minor: `^8.1.1` installs 8.2 today, so it reads as 8.x.
+ if (spec.includes('^')) return Infinity;
+ const minors = (spec.match(/\d+(?:\.\d+)*/g) ?? [])
+ .map((version) => version.split('.').map(Number))
+ .filter(([declared]) => declared === major)
+ .map(([, minor]) => minor ?? Infinity);
+ return minors.length > 0 ? Math.max(...minors) : Infinity;
+}
+
+/** True when `name` is declared and can install `major.minor` or newer. */
+function minorAtLeast(deps: DeclaredDeps, name: string, major: number, minor: number): boolean {
+ const spec = deps.get(name);
+ if (spec === undefined) return false;
+ const highest = highestMajor(spec);
+ if (highest === null) return true;
+ if (highest !== major) return highest > major;
+ return highestMinor(spec, major) >= minor;
+}
+
/** True when `name` is declared and can install `major` or newer, an unversioned spec included. */
function majorAtLeast(deps: DeclaredDeps, name: string, major: number): boolean {
const spec = deps.get(name);
@@ -116,6 +162,10 @@ export function patchClonedManifest(
const deps: DeclaredDeps = new Map(
Object.entries({ ...manifest.dependencies, ...manifest.devDependencies })
);
+ const currentValue: CurrentValue = (section, name) => {
+ const held = manifest[section];
+ return isRecord(held) ? held[name] : undefined;
+ };
// Working copies, seeded from the manifest the first time a rule touches the section. A section
// holding anything other than a map is treated as absent; npm would reject it anyway.
const sections = new Map>();
@@ -132,7 +182,7 @@ export function patchClonedManifest(
const notes: string[] = [];
for (const rule of FRAMEWORK_RULES) {
if (!rule.applies(deps)) continue;
- for (const { section: sectionName, mode, entries } of rule.patches) {
+ for (const { section: sectionName, mode, entries } of rule.patches(deps, currentValue)) {
const section = workingCopy(sectionName);
for (const [name, value] of Object.entries(entries)) {
if (mode === 'fill' && alreadyPresent(section, sectionName, name, deps)) continue;
diff --git a/src/lib/ide/session.svelte.ts b/src/lib/ide/session.svelte.ts
index b0d218f..6f82467 100644
--- a/src/lib/ide/session.svelte.ts
+++ b/src/lib/ide/session.svelte.ts
@@ -15,6 +15,7 @@ import {
} from '$lib/pod/fs';
import { ANSI, BP_RC, BP_RC_PATH } from './shell-rc';
import { patchClonedManifest } from './native-deps';
+import { isImagePath, loadPodImage, releaseImage, type ImagePayload } from './media';
import { fetchRepoTree } from '$lib/github/api';
import { trackEvent } from '$lib/utils/useLazyTracking';
import type { PortalUpdate } from '$lib/pod/portals';
@@ -29,7 +30,14 @@ const COLOR_ENV = ['FORCE_COLOR=3', 'COLORTERM=truecolor'];
* A file open as an editor tab. A `preview` tab (opened by single-click)
* is reused by the next preview open; double-clicking or editing pins it.
*/
-export type OpenFile = { path: string; content: string; savedContent: string; preview: boolean };
+export type OpenFile = {
+ path: string;
+ content: string;
+ savedContent: string;
+ preview: boolean;
+ /** Set on image tabs, which render as a picture and never save. */
+ image?: ImagePayload;
+};
/** Where the boot pipeline currently is; drives the loader's progress readout. `copying` is
* framework-only, `cloning` GitHub-only. */
@@ -38,8 +46,8 @@ export type BootStage = 'booting' | 'copying' | 'cloning' | 'installing' | 'star
/**
* Owns the BrowserPod lifecycle for the playground IDE: boots the pod, hydrates
* the selected framework template into its filesystem, starts the dev server and
- * exposes file/terminal/portal state. UI components render from this; the editor
- * implementation (Monaco today, VS Code Web later) stays swappable on top.
+ * exposes file/terminal/portal state. UI components render from this; it holds no
+ * editor state of its own, so Monaco lives entirely in the component layer.
*/
export class IdeSession {
framework = $state(defaultFrameworkId);
@@ -461,6 +469,7 @@ export class IdeSession {
const gone = (p: string) => p === path || p.startsWith(`${path}/`);
this.projectFiles = this.projectFiles.filter((p) => !gone(p));
this.projectDirs = this.projectDirs.filter((p) => !gone(p));
+ for (const file of this.openFiles) if (gone(file.path)) releaseImage(file.image);
this.openFiles = this.openFiles.filter((file) => !gone(file.path));
if (gone(this.selectedFile)) this.selectedFile = this.openFiles.at(-1)?.path ?? '';
return null;
@@ -486,20 +495,28 @@ export class IdeSession {
this.loading = true;
this.selectedFile = path;
try {
- const content = await readPodFile(this.pod, `${this.workdir}/${path}`);
- if (this.unmounted || this.openFiles.some((file) => file.path === path)) return;
+ const absPath = `${this.workdir}/${path}`;
+ const image = isImagePath(path) ? await loadPodImage(this.pod, absPath) : undefined;
+ const content = image ? '' : await readPodFile(this.pod, absPath);
+ if (this.unmounted || this.openFiles.some((file) => file.path === path)) {
+ releaseImage(image);
+ return;
+ }
// A pin that arrived while the read was in flight wins over the preview flag.
const entry: OpenFile = {
path,
content,
savedContent: content,
- preview: preview && !this.pendingPins.delete(path)
+ preview: preview && !this.pendingPins.delete(path),
+ image
};
const previewIndex = entry.preview ? this.openFiles.findIndex((file) => file.preview) : -1;
- this.openFiles =
- previewIndex >= 0
- ? this.openFiles.map((file, i) => (i === previewIndex ? entry : file))
- : [...this.openFiles, entry];
+ if (previewIndex >= 0) {
+ releaseImage(this.openFiles[previewIndex].image);
+ this.openFiles = this.openFiles.map((file, i) => (i === previewIndex ? entry : file));
+ } else {
+ this.openFiles = [...this.openFiles, entry];
+ }
} catch (error) {
console.error('Failed to load file:', error);
this.pendingPins.delete(path);
@@ -531,6 +548,7 @@ export class IdeSession {
if (index < 0) return;
const entry = this.openFiles[index];
if (entry.content !== entry.savedContent) void this.saveEntry(entry);
+ releaseImage(entry.image);
this.openFiles = this.openFiles.filter((file) => file.path !== path);
if (this.selectedFile === path)
this.selectedFile = (this.openFiles[index] ?? this.openFiles[index - 1])?.path ?? '';
@@ -554,6 +572,8 @@ export class IdeSession {
}
private async saveEntry(entry: OpenFile): Promise {
+ // An image tab carries no text, so writing its content back would truncate the file.
+ if (entry.image) return;
// Saving only makes sense once the dev server is reachable; earlier writes
// would race the template hydration.
if (!this.pod || !this.hasPortal || this.unmounted) return;
@@ -594,6 +614,7 @@ export class IdeSession {
/** Tears down the pod and cancels any in-flight boot. */
shutdown(): void {
this.unmounted = true;
+ for (const file of this.openFiles) releaseImage(file.image);
this.bootToken += 1;
if (this.pod) void shutdownPod(this.pod);
}
diff --git a/src/lib/stores/editor-settings.svelte.ts b/src/lib/stores/editor-settings.svelte.ts
new file mode 100644
index 0000000..dc21a48
--- /dev/null
+++ b/src/lib/stores/editor-settings.svelte.ts
@@ -0,0 +1,45 @@
+import {
+ defaultEditorThemeId,
+ isEditorThemeId,
+ type EditorThemeId,
+ type EditorThemeVariant
+} from '$lib/config/editor-themes';
+
+const STORAGE_KEY = 'browsercode:editor-theme';
+
+export const appearance: EditorThemeVariant = 'dark';
+
+type ThemeChoices = Record;
+
+/** Unknown ids are dropped, so a stale value can't reach Monaco. */
+function loadChoices(): ThemeChoices {
+ const choices: ThemeChoices = { dark: null, light: null };
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (!raw) return choices;
+ const stored = JSON.parse(raw) as Partial>;
+ for (const variant of ['dark', 'light'] as const) {
+ const value = stored[variant];
+ if (typeof value === 'string' && isEditorThemeId(value)) choices[variant] = value;
+ }
+ } catch (error) {
+ console.warn('Could not read the stored editor theme:', error);
+ }
+ return choices;
+}
+
+const choices = $state(loadChoices());
+
+export function activeEditorThemeId(): EditorThemeId {
+ return choices[appearance] ?? defaultEditorThemeId;
+}
+
+/** Persists the pick for the current appearance. */
+export function setEditorTheme(id: EditorThemeId): void {
+ choices[appearance] = id;
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(choices));
+ } catch (error) {
+ console.warn('Could not persist the editor theme:', error);
+ }
+}
diff --git a/src/lib/stores/portals.svelte.ts b/src/lib/stores/portals.svelte.ts
index 98a1d33..96318c0 100644
--- a/src/lib/stores/portals.svelte.ts
+++ b/src/lib/stores/portals.svelte.ts
@@ -35,6 +35,7 @@ export class PortalState {
url = $state('');
frameStatus = $state('waiting');
showMenu = $state(false);
+ showPorts = $state(false);
showInfo = $state(false);
copied = $state(false);
qrError = $state('');
@@ -76,11 +77,8 @@ export class PortalState {
if (next.length === 0) this.options.onEmpty?.();
};
- /** Change handler for Portal.svelte's port . */
- onPortChange = (event: Event): void => {
- const value = Number((event.currentTarget as HTMLSelectElement).value);
- if (!Number.isInteger(value)) return;
- this.selectUrl(value, this.portals.find((item) => item.port === value)?.url ?? '');
+ selectPort = (port: number): void => {
+ this.selectUrl(port, this.portals.find((item) => item.port === port)?.url ?? '');
this.closeOverlays();
};
@@ -100,18 +98,39 @@ export class PortalState {
toggleMenu = (): void => {
this.showMenu = !this.showMenu;
- if (this.showMenu) this.showInfo = false;
+ this.clearCopied();
+ if (this.showMenu) {
+ this.showPorts = false;
+ this.showInfo = false;
+ }
+ };
+
+ togglePorts = (): void => {
+ this.showPorts = !this.showPorts;
+ if (this.showPorts) {
+ this.showMenu = false;
+ this.showInfo = false;
+ }
};
closeOverlays = (): void => {
this.showMenu = false;
+ this.showPorts = false;
this.showInfo = false;
+ this.clearCopied();
this.qrError = '';
};
+ /** The pending timer would otherwise close a later menu. */
+ private clearCopied(): void {
+ clearTimeout(this.copiedTimeout);
+ this.copied = false;
+ }
+
showQRCode = (): void => {
if (!this.url) return;
this.showMenu = false;
+ this.showPorts = false;
this.showInfo = true;
};
@@ -128,11 +147,13 @@ export class PortalState {
copyUrl = async (): Promise => {
if (!this.url) return;
- this.showMenu = false;
await navigator.clipboard.writeText(this.url);
this.copied = true;
clearTimeout(this.copiedTimeout);
- this.copiedTimeout = setTimeout(() => (this.copied = false), 1200);
+ this.copiedTimeout = setTimeout(() => {
+ this.copied = false;
+ this.showMenu = false;
+ }, 1200);
};
/** Reports that the framed document loaded. Ignored unless that frame is still the current one. */
diff --git a/src/routes/agents/[tool]/+page.svelte b/src/routes/agents/[tool]/+page.svelte
index 80da270..8d7be95 100644
--- a/src/routes/agents/[tool]/+page.svelte
+++ b/src/routes/agents/[tool]/+page.svelte
@@ -377,10 +377,12 @@
portals={portal.portals}
selectedPort={portal.selectedPort}
showMenu={portal.showMenu}
+ showPorts={portal.showPorts}
showInfo={portal.showInfo}
copied={portal.copied}
qrError={portal.qrError}
- onPortChange={portal.onPortChange}
+ onSelectPort={portal.selectPort}
+ onTogglePorts={portal.togglePorts}
onToggleMenu={portal.toggleMenu}
onCopyLink={portal.copyUrl}
onOpenNewTab={portal.openInNewTab}
@@ -399,10 +401,12 @@
portals={portal.portals}
selectedPort={portal.selectedPort}
showMenu={portal.showMenu}
+ showPorts={portal.showPorts}
showInfo={portal.showInfo}
copied={portal.copied}
qrError={portal.qrError}
- onPortChange={portal.onPortChange}
+ onSelectPort={portal.selectPort}
+ onTogglePorts={portal.togglePorts}
onToggleMenu={portal.toggleMenu}
onCopyLink={portal.copyUrl}
onOpenNewTab={portal.openInNewTab}