@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/code/monaco-setup.js

@@ -0,0 +1,126 @@
+/*
+  Monaco setup helper for Vibes
+  - Defines dark/light themes using monaco-themes
+  - Configures TS language service defaults
+  - Injects @types/bun (best-effort via CDN) and fallback minimal bun:test types
+  - Injects Vibes benchmark/test globals for autocomplete
+*/
+// Local ambient types packaged by Vite
+import { BUN_TEST_TYPES as bunTestDts } from "./monaco/types/bun-test-types.js";
+import benchmarkEnvDts from './monaco/types/benchmark-env.d.ts?raw';
+import { kitLogger } from '../../kit-logger';
+import { settleNow } from "../../attempt.js";
+import { failureClass } from "../../failure-class.js";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-monaco');
+let tsConfigured = false;
+let bunTypesInjected = false;
+let vibesTypesInjected = false;
+const registeredThemeIds = new WeakMap();
+/** A setup step that failed and was continued past: reported once, by the failure's class only. */
+function warnMonacoSetup(message, failure) {
+    logger.warn(message, { reason: failureClass(failure) });
+}
+export function registerVibesMonacoTheme(monaco, projection) {
+    let registered = registeredThemeIds.get(monaco);
+    if (!registered) {
+        registered = new Set();
+        registeredThemeIds.set(monaco, registered);
+    }
+    if (registered.has(projection.id))
+        return;
+    monaco.editor.defineTheme(projection.id, projection.theme);
+    registered.add(projection.id);
+}
+function configureTypeScript(monaco) {
+    if (tsConfigured)
+        return;
+    const configured = settleNow(() => {
+        const ts = monaco.typescript;
+        ts.typescriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: false,
+            noSyntaxValidation: false
+        });
+        ts.javascriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: false,
+            noSyntaxValidation: false
+        });
+        ts.typescriptDefaults.setEagerModelSync(true);
+        ts.typescriptDefaults.setCompilerOptions({
+            allowJs: false,
+            checkJs: false,
+            noEmit: true,
+            allowNonTsExtensions: true,
+            target: ts.ScriptTarget.ES2020,
+            module: ts.ModuleKind.ESNext,
+            moduleResolution: ts.ModuleResolutionKind.NodeJs,
+            allowSyntheticDefaultImports: true,
+            skipLibCheck: true
+        });
+        ts.javascriptDefaults.setCompilerOptions({
+            allowJs: true,
+            checkJs: true,
+            noEmit: true,
+            target: ts.ScriptTarget.ES2020,
+            allowNonTsExtensions: true
+        });
+        tsConfigured = true;
+    });
+    if (!configured.ok) {
+        warnMonacoSetup('failed to configure TypeScript defaults', configured.error);
+    }
+}
+function addDtsLib(monaco, content, path) {
+    const typescriptLib = settleNow(() => monaco.typescript.typescriptDefaults.addExtraLib(content, path));
+    if (!typescriptLib.ok) {
+        warnMonacoSetup(`failed to add TypeScript lib ${path}`, typescriptLib.error);
+    }
+    const javascriptLib = settleNow(() => monaco.typescript.javascriptDefaults.addExtraLib(content, path));
+    if (!javascriptLib.ok) {
+        warnMonacoSetup(`failed to add JavaScript lib ${path}`, javascriptLib.error);
+    }
+    const libModel = settleNow(() => {
+        const uri = monaco.Uri.parse(path);
+        if (!monaco.editor.getModel(uri)) {
+            monaco.editor.createModel(content, 'typescript', uri);
+        }
+    });
+    if (!libModel.ok) {
+        warnMonacoSetup(`failed to create lib model ${path}`, libModel.error);
+    }
+}
+function injectBunTypes(monaco) {
+    if (bunTypesInjected)
+        return;
+    // Inject our local bun:test ambient types immediately (no network)
+    addDtsLib(monaco, bunTestDts, 'file:///node_modules/@types/bun/bun-test.d.ts');
+    // Skip CDN fetching - causes CORS errors and we have local types
+    // The local bunTestDts should be sufficient for most use cases
+    bunTypesInjected = true;
+}
+function injectVibesEnvTypes(monaco) {
+    if (vibesTypesInjected)
+        return;
+    addDtsLib(monaco, benchmarkEnvDts, 'file:///vibes/benchmark-env.d.ts');
+    vibesTypesInjected = true;
+}
+export async function setupMonacoForVibes(monaco, theme) {
+    if (theme)
+        registerVibesMonacoTheme(monaco, theme);
+    configureTypeScript(monaco);
+    await injectBunTypes(monaco);
+    injectVibesEnvTypes(monaco);
+}
+export async function finalizeMonacoEditor(monaco, editor, opts) {
+    const finalized = settleNow(() => {
+        const requestedLang = opts?.language ?? 'plaintext';
+        // Model identity is owned by the caller; finalization only applies language configuration.
+        const model = editor?.getModel?.();
+        if (model) {
+            monaco.editor.setModelLanguage(model, requestedLang);
+        }
+    });
+    if (!finalized.ok) {
+        warnMonacoSetup('failed to finalize editor', finalized.error);
+    }
+}

package/dist/lib/components/code/monaco-theme-coordinator.d.ts

@@ -0,0 +1,13 @@
+import { type VibesMonacoThemeProjection } from './monaco-theme.ts';
+export type VibesMonacoAppearance = 'light' | 'dark' | 'system';
+export interface VibesMonacoThemeSubscription {
+    updateAppearance(appearance: VibesMonacoAppearance): void;
+    dispose(): void;
+}
+/**
+ * Subscribe one Monaco view to its document's appearance policy. Monaco's
+ * standalone theme service is document-global, so the first active view owns
+ * the policy; every subscriber receives the same theme until ownership is
+ * released, then the next mounted view takes over.
+ */
+export declare function subscribeVibesMonacoDocumentTheme(element: HTMLElement, appearance: VibesMonacoAppearance, notify: (theme: VibesMonacoThemeProjection) => void): VibesMonacoThemeSubscription;

package/dist/lib/components/code/monaco-theme-coordinator.js

@@ -0,0 +1,160 @@
+import { isCssColorDark } from "./appearance.js";
+import { projectVibesMonacoTheme, resolveVibesMonacoThemeScope } from "./monaco-theme.js";
+const documentCoordinators = new WeakMap();
+function paintedDark(scope, view) {
+    let current = scope;
+    while (current) {
+        const resolved = isCssColorDark(view.getComputedStyle(current).backgroundColor);
+        if (resolved !== null)
+            return resolved;
+        current = current.parentElement;
+    }
+    if (scope === scope.ownerDocument.documentElement && scope.ownerDocument.body) {
+        return isCssColorDark(view.getComputedStyle(scope.ownerDocument.body).backgroundColor);
+    }
+    return null;
+}
+function effectiveDark(coordinator, appearance, scope) {
+    if (appearance === 'dark')
+        return true;
+    if (appearance === 'light')
+        return false;
+    return paintedDark(scope, coordinator.view) ?? coordinator.mediaDark.matches;
+}
+function observeScope(coordinator, scope) {
+    if (coordinator.observedScope === scope)
+        return;
+    coordinator.scopeObserver.disconnect();
+    coordinator.observedScope = scope;
+    const observation = {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'data-theme', 'data-vibes-monaco-theme-scope']
+    };
+    let current = scope;
+    while (current) {
+        coordinator.scopeObserver.observe(current, observation);
+        current = current.parentElement;
+    }
+    if (scope === coordinator.document.documentElement && coordinator.document.body) {
+        coordinator.scopeObserver.observe(coordinator.document.body, observation);
+    }
+}
+function notifyConsumers(coordinator, theme) {
+    for (const consumer of coordinator.consumers.values())
+        consumer.notify(theme);
+}
+function refreshCoordinator(coordinator) {
+    const owner = coordinator.ownerId ? coordinator.consumers.get(coordinator.ownerId) : undefined;
+    if (!owner)
+        return;
+    const scope = resolveVibesMonacoThemeScope(coordinator.document.documentElement);
+    observeScope(coordinator, scope);
+    const theme = projectVibesMonacoTheme(scope, effectiveDark(coordinator, owner.appearance, scope));
+    if (theme.id === coordinator.currentTheme?.id)
+        return;
+    coordinator.currentTheme = theme;
+    notifyConsumers(coordinator, theme);
+}
+function scheduleRefresh(coordinator) {
+    if (coordinator.frame !== null)
+        return;
+    coordinator.frame = coordinator.view.requestAnimationFrame(() => {
+        coordinator.frame = null;
+        refreshCoordinator(coordinator);
+    });
+}
+function createCoordinator(document, view) {
+    // The observers and listener close over `coordinator`; they only run after it is built.
+    const coordinator = {
+        document,
+        view,
+        consumers: new Map(),
+        ownerId: null,
+        currentTheme: null,
+        observedScope: null,
+        scopeObserver: new view.MutationObserver(() => scheduleRefresh(coordinator)),
+        headObserver: new view.MutationObserver(() => scheduleRefresh(coordinator)),
+        mediaDark: view.matchMedia('(prefers-color-scheme: dark)'),
+        forcedColors: view.matchMedia('(forced-colors: active)'),
+        mediaChangeListener: () => scheduleRefresh(coordinator),
+        frame: null
+    };
+    const { headObserver, mediaDark, forcedColors, mediaChangeListener } = coordinator;
+    if (document.head) {
+        headObserver.observe(document.head, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true
+        });
+    }
+    // A link mutation precedes its download; repaint again when its CSS is available.
+    document.addEventListener('load', mediaChangeListener, true);
+    document.fonts?.addEventListener('loadingdone', mediaChangeListener);
+    mediaDark.addEventListener('change', mediaChangeListener);
+    forcedColors.addEventListener('change', mediaChangeListener);
+    return coordinator;
+}
+function destroyCoordinator(coordinator) {
+    coordinator.scopeObserver.disconnect();
+    coordinator.headObserver.disconnect();
+    coordinator.document.removeEventListener('load', coordinator.mediaChangeListener, true);
+    coordinator.document.fonts?.removeEventListener('loadingdone', coordinator.mediaChangeListener);
+    coordinator.mediaDark.removeEventListener('change', coordinator.mediaChangeListener);
+    coordinator.forcedColors.removeEventListener('change', coordinator.mediaChangeListener);
+    if (coordinator.frame !== null)
+        coordinator.view.cancelAnimationFrame(coordinator.frame);
+    documentCoordinators.delete(coordinator.document);
+}
+/**
+ * Subscribe one Monaco view to its document's appearance policy. Monaco's
+ * standalone theme service is document-global, so the first active view owns
+ * the policy; every subscriber receives the same theme until ownership is
+ * released, then the next mounted view takes over.
+ */
+export function subscribeVibesMonacoDocumentTheme(element, appearance, notify) {
+    const document = element.ownerDocument;
+    const view = document.defaultView;
+    if (!view) {
+        notify(projectVibesMonacoTheme(resolveVibesMonacoThemeScope(element), appearance === 'dark'));
+        return { updateAppearance() { }, dispose() { } };
+    }
+    let coordinator = documentCoordinators.get(document);
+    if (!coordinator) {
+        coordinator = createCoordinator(document, view);
+        documentCoordinators.set(document, coordinator);
+    }
+    const consumerId = Symbol('vibes-monaco-theme-consumer');
+    const consumer = { appearance, notify };
+    coordinator.consumers.set(consumerId, consumer);
+    if (coordinator.ownerId === null)
+        coordinator.ownerId = consumerId;
+    if (coordinator.currentTheme)
+        notify(coordinator.currentTheme);
+    refreshCoordinator(coordinator);
+    let disposed = false;
+    return {
+        updateAppearance(nextAppearance) {
+            if (disposed || consumer.appearance === nextAppearance)
+                return;
+            consumer.appearance = nextAppearance;
+            if (coordinator?.ownerId === consumerId)
+                refreshCoordinator(coordinator);
+        },
+        dispose() {
+            if (disposed || !coordinator)
+                return;
+            disposed = true;
+            const wasOwner = coordinator.ownerId === consumerId;
+            coordinator.consumers.delete(consumerId);
+            if (coordinator.consumers.size === 0) {
+                destroyCoordinator(coordinator);
+                return;
+            }
+            if (wasOwner) {
+                coordinator.ownerId = coordinator.consumers.keys().next().value ?? null;
+                refreshCoordinator(coordinator);
+            }
+        }
+    };
+}

package/dist/lib/components/code/monaco-theme.d.ts

@@ -0,0 +1,43 @@
+import type { editor } from 'monaco-editor';
+export interface VibesMonacoPalette {
+    background: string;
+    foreground: string;
+    card: string;
+    popover: string;
+    primary: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    border: string;
+    ring: string;
+    info: string;
+    success: string;
+    warning: string;
+    destructive: string;
+    fontFamily: string;
+}
+export interface VibesMonacoThemeProjection {
+    id: string;
+    dark: boolean;
+    palette: VibesMonacoPalette;
+    theme: editor.IStandaloneThemeData;
+}
+export declare const VIBES_MONACO_THEME_SCOPE_ATTRIBUTE = "data-vibes-monaco-theme-scope";
+/**
+ * Resolve any browser-supported computed CSS color to Monaco's hexadecimal
+ * wire format. Canvas is intentional here: it is the browser's own CSS Color
+ * 4 conversion path for oklch(), color-mix(), display-p3, and system colors.
+ */
+export declare function normalizeVibesMonacoColor(value: string | null | undefined, ownerDocument?: Document): string | null;
+/**
+ * Monaco's standalone theme service is shared by every editor in a document.
+ * Resolve one equally shared token scope so a later-mounted editor cannot
+ * silently recolor siblings from a different local theme. Embedders that do
+ * not theme the document root may mark one host as the document theme scope.
+ */
+export declare function resolveVibesMonacoThemeScope(element: HTMLElement): HTMLElement;
+/** Build a stable Monaco theme from an already-resolved VibesKit palette. */
+export declare function createVibesMonacoThemeProjection(palette: VibesMonacoPalette, dark: boolean): VibesMonacoThemeProjection;
+/** Resolve the painted VibesKit token scope around one Monaco view. */
+export declare function projectVibesMonacoTheme(element: HTMLElement, dark: boolean): VibesMonacoThemeProjection;
+export declare function fallbackVibesMonacoTheme(dark: boolean): VibesMonacoThemeProjection;

package/dist/lib/components/code/monaco-theme.js

@@ -0,0 +1,229 @@
+import { parseCssColorChannels } from "./appearance.js";
+export const VIBES_MONACO_THEME_SCOPE_ATTRIBUTE = 'data-vibes-monaco-theme-scope';
+const LIGHT_FALLBACKS = {
+    background: '#FFFFFF',
+    foreground: '#24212B',
+    card: '#FFFFFF',
+    popover: '#FFFFFF',
+    primary: '#6F52E5',
+    muted: '#F3F1F7',
+    mutedForeground: '#686173',
+    accent: '#ECE8F7',
+    border: '#DDD8E6',
+    ring: '#789CFF',
+    info: '#4777E8',
+    success: '#358A42',
+    warning: '#A96900',
+    destructive: '#C73550',
+    fontFamily: 'ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace'
+};
+const DARK_FALLBACKS = {
+    background: '#121018',
+    foreground: '#F7F4FF',
+    card: '#1F1A2B',
+    popover: '#1F1A2B',
+    primary: '#A98DFF',
+    muted: '#272130',
+    mutedForeground: '#C9C0DC',
+    accent: '#342A47',
+    border: '#4F4766',
+    ring: '#8FACFF',
+    info: '#8FACFF',
+    success: '#B8FF51',
+    warning: '#FFF585',
+    destructive: '#FF7A8E',
+    fontFamily: 'ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace'
+};
+const COLOR_TOKENS = [
+    ['background', '--vibes-workbench-editor-background', '--background'],
+    ['foreground', '--foreground'],
+    ['card', '--card'],
+    ['popover', '--popover'],
+    ['primary', '--primary'],
+    ['muted', '--muted'],
+    ['mutedForeground', '--muted-foreground'],
+    ['accent', '--accent'],
+    ['border', '--border'],
+    ['ring', '--ring'],
+    ['info', '--info'],
+    ['success', '--success'],
+    ['warning', '--warning'],
+    ['destructive', '--destructive']
+];
+function channelToHex(value) {
+    return Math.round(Math.max(0, Math.min(255, value)))
+        .toString(16)
+        .padStart(2, '0')
+        .toUpperCase();
+}
+function channelsToHex(channels) {
+    const opaque = `#${channelToHex(channels.r)}${channelToHex(channels.g)}${channelToHex(channels.b)}`;
+    return channels.alpha >= 0.999 ? opaque : `${opaque}${channelToHex(channels.alpha * 255)}`;
+}
+function canvasColorToHex(value, ownerDocument) {
+    const css = ownerDocument.defaultView?.CSS;
+    if (css && !css.supports('color', value))
+        return null;
+    const canvas = ownerDocument.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    if (!context)
+        return null;
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = value;
+    context.fillRect(0, 0, 1, 1);
+    const [r, g, b, alpha] = context.getImageData(0, 0, 1, 1).data;
+    if (alpha === 0)
+        return null;
+    return channelsToHex({ r, g, b, alpha: alpha / 255 });
+}
+/**
+ * Resolve any browser-supported computed CSS color to Monaco's hexadecimal
+ * wire format. Canvas is intentional here: it is the browser's own CSS Color
+ * 4 conversion path for oklch(), color-mix(), display-p3, and system colors.
+ */
+export function normalizeVibesMonacoColor(value, ownerDocument) {
+    const color = value?.trim();
+    if (!color || color.toLowerCase() === 'transparent')
+        return null;
+    if (ownerDocument) {
+        const projected = canvasColorToHex(color, ownerDocument);
+        if (projected)
+            return projected;
+    }
+    const parsed = parseCssColorChannels(color);
+    return parsed ? channelsToHex(parsed) : null;
+}
+/**
+ * Monaco's standalone theme service is shared by every editor in a document.
+ * Resolve one equally shared token scope so a later-mounted editor cannot
+ * silently recolor siblings from a different local theme. Embedders that do
+ * not theme the document root may mark one host as the document theme scope.
+ */
+export function resolveVibesMonacoThemeScope(element) {
+    return (element.ownerDocument.querySelector(`[${VIBES_MONACO_THEME_SCOPE_ATTRIBUTE}]`) ??
+        element.ownerDocument.documentElement);
+}
+function resolvePalette(element, dark) {
+    const fallbacks = dark ? DARK_FALLBACKS : LIGHT_FALLBACKS;
+    const ownerDocument = element.ownerDocument;
+    const view = ownerDocument.defaultView;
+    if (!view)
+        return { ...fallbacks };
+    const probe = ownerDocument.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.cssText =
+        'position:absolute;inline-size:0;block-size:0;overflow:hidden;pointer-events:none;visibility:hidden;';
+    element.appendChild(probe);
+    try {
+        const palette = { ...fallbacks };
+        for (const [key, token, fallbackToken] of COLOR_TOKENS) {
+            probe.style.color = fallbackToken
+                ? `var(${token}, var(${fallbackToken}, ${fallbacks[key]}))`
+                : `var(${token}, ${fallbacks[key]})`;
+            palette[key] =
+                normalizeVibesMonacoColor(view.getComputedStyle(probe).color, ownerDocument) ??
+                    fallbacks[key];
+        }
+        probe.style.fontFamily = 'var(--vibes-font-mono, var(--font-mono, ui-monospace))';
+        palette.fontFamily = view.getComputedStyle(probe).fontFamily || fallbacks.fontFamily;
+        return palette;
+    }
+    finally {
+        probe.remove();
+    }
+}
+function withAlpha(color, alpha) {
+    const opaque = color.slice(0, 7);
+    return `${opaque}${channelToHex(alpha * 255)}`;
+}
+function tokenColor(color) {
+    return color.slice(1, 7);
+}
+function themeFingerprint(dark, palette) {
+    const input = JSON.stringify([dark, ...Object.values(palette)]);
+    let hash = 0x811c9dc5;
+    for (let index = 0; index < input.length; index += 1) {
+        hash = Math.imul(hash ^ input.charCodeAt(index), 0x01000193);
+    }
+    return (hash >>> 0).toString(36).padStart(7, '0');
+}
+/** Build a stable Monaco theme from an already-resolved VibesKit palette. */
+export function createVibesMonacoThemeProjection(palette, dark) {
+    const id = `vibes-${dark ? 'dark' : 'light'}-${themeFingerprint(dark, palette)}`;
+    return {
+        id,
+        dark,
+        palette,
+        theme: {
+            base: dark ? 'vs-dark' : 'vs',
+            inherit: true,
+            rules: [
+                { token: '', foreground: tokenColor(palette.foreground) },
+                { token: 'comment', foreground: tokenColor(palette.mutedForeground), fontStyle: 'italic' },
+                { token: 'keyword', foreground: tokenColor(palette.primary), fontStyle: 'bold' },
+                { token: 'keyword.control', foreground: tokenColor(palette.primary) },
+                { token: 'string', foreground: tokenColor(palette.success) },
+                { token: 'string.escape', foreground: tokenColor(palette.info) },
+                { token: 'number', foreground: tokenColor(palette.info) },
+                { token: 'regexp', foreground: tokenColor(palette.info) },
+                { token: 'type', foreground: tokenColor(palette.warning) },
+                { token: 'type.identifier', foreground: tokenColor(palette.warning) },
+                { token: 'function', foreground: tokenColor(palette.primary) },
+                { token: 'tag', foreground: tokenColor(palette.destructive) },
+                { token: 'attribute.name', foreground: tokenColor(palette.warning) },
+                { token: 'delimiter', foreground: tokenColor(palette.mutedForeground) },
+                { token: 'invalid', foreground: tokenColor(palette.destructive), fontStyle: 'underline' }
+            ],
+            colors: {
+                'editor.background': palette.background,
+                'editor.foreground': palette.foreground,
+                'editorGutter.background': palette.background,
+                'editorLineNumber.foreground': withAlpha(palette.mutedForeground, 0.72),
+                'editorLineNumber.activeForeground': palette.foreground,
+                'editorCursor.foreground': palette.ring,
+                'editor.selectionBackground': withAlpha(palette.primary, dark ? 0.38 : 0.24),
+                'editor.inactiveSelectionBackground': withAlpha(palette.primary, dark ? 0.22 : 0.14),
+                'editor.selectionHighlightBackground': withAlpha(palette.primary, dark ? 0.18 : 0.1),
+                'editor.lineHighlightBackground': withAlpha(palette.muted, dark ? 0.42 : 0.58),
+                'editor.lineHighlightBorder': '#00000000',
+                'editorIndentGuide.background1': withAlpha(palette.border, 0.55),
+                'editorIndentGuide.activeBackground1': withAlpha(palette.ring, 0.82),
+                'editorBracketHighlight.foreground1': palette.primary,
+                'editorBracketHighlight.foreground2': palette.info,
+                'editorBracketHighlight.foreground3': palette.success,
+                'editorBracketHighlight.foreground4': palette.warning,
+                'editorBracketHighlight.foreground5': palette.destructive,
+                'editorWhitespace.foreground': withAlpha(palette.border, 0.72),
+                'editorWidget.background': palette.card,
+                'editorWidget.border': palette.border,
+                'editorHoverWidget.background': palette.popover,
+                'editorHoverWidget.border': palette.border,
+                'editorSuggestWidget.background': palette.popover,
+                'editorSuggestWidget.border': palette.border,
+                'editorSuggestWidget.selectedBackground': palette.accent,
+                'editorError.foreground': palette.destructive,
+                'editorWarning.foreground': palette.warning,
+                'editorInfo.foreground': palette.info,
+                'editorHint.foreground': palette.success,
+                focusBorder: palette.ring,
+                'input.background': palette.background,
+                'input.border': palette.border,
+                'input.foreground': palette.foreground,
+                'list.activeSelectionBackground': palette.accent,
+                'list.activeSelectionForeground': palette.foreground,
+                'scrollbarSlider.background': withAlpha(palette.mutedForeground, 0.2),
+                'scrollbarSlider.hoverBackground': withAlpha(palette.mutedForeground, 0.32),
+                'scrollbarSlider.activeBackground': withAlpha(palette.mutedForeground, 0.42)
+            }
+        }
+    };
+}
+/** Resolve the painted VibesKit token scope around one Monaco view. */
+export function projectVibesMonacoTheme(element, dark) {
+    return createVibesMonacoThemeProjection(resolvePalette(element, dark), dark);
+}
+export function fallbackVibesMonacoTheme(dark) {
+    return createVibesMonacoThemeProjection({ ...(dark ? DARK_FALLBACKS : LIGHT_FALLBACKS) }, dark);
+}

package/dist/lib/components/demo/DemoBanner.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { Icon } from "../icon";
+let { class: className = "", onDismiss, ctaHref, ctaText } = $props();
+function dismiss() {
+	if (onDismiss) onDismiss();
+}
+</script>
+
+<div
+	class="flex min-h-11 flex-wrap items-center gap-2 border-b border-warning/40 bg-warning/10 px-4 text-xs font-medium {className}"
+	role="status"
+>
+	<Icon icon="lucide:info" class="size-3.5 shrink-0 text-warning" />
+	<span class="text-foreground">
+		<strong>Demo Mode</strong> — This is a sandbox preview. No data will be saved.
+		{#if ctaText && ctaHref}
+			<a
+				href={ctaHref}
+				class="ml-2 inline-flex min-h-11 items-center gap-1 underline underline-offset-2 transition-colors hover:text-warning"
+				>{ctaText}</a
+			>{/if}
+	</span>
+	{#if onDismiss}
+		<button
+			type="button"
+			onclick={dismiss}
+			class="ml-auto grid size-11 place-items-center rounded transition-colors hover:bg-warning/20"
+			aria-label="Dismiss demo banner"
+		>
+			✕
+		</button>
+	{/if}
+</div>

package/dist/lib/components/demo/DemoBanner.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    class?: string;
+    onDismiss?: () => void;
+    ctaHref?: string;
+    ctaText?: string;
+};
+declare const DemoBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type DemoBanner = ReturnType<typeof DemoBanner>;
+export default DemoBanner;