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

package/dist/lib/components/theme/theme-palette.d.ts

@@ -0,0 +1,157 @@
+/** Canonical palette and frozen historical inheritance for named presets. No imports. */
+export declare const LEGACY_LIGHT_COLORS: {
+    '--radius': string;
+    '--background': string;
+    '--foreground': string;
+    '--card': string;
+    '--card-foreground': string;
+    '--popover': string;
+    '--popover-foreground': string;
+    '--primary': string;
+    '--primary-foreground': string;
+    '--secondary': string;
+    '--secondary-foreground': string;
+    '--muted': string;
+    '--muted-foreground': string;
+    '--accent': string;
+    '--accent-foreground': string;
+    '--destructive': string;
+    '--border': string;
+    '--input': string;
+    '--ring': string;
+    '--highlight': string;
+    '--highlight-foreground': string;
+    '--chart-1': string;
+    '--chart-2': string;
+    '--chart-3': string;
+    '--chart-4': string;
+    '--chart-5': string;
+    '--sidebar': string;
+    '--sidebar-foreground': string;
+    '--sidebar-primary': string;
+    '--sidebar-primary-foreground': string;
+    '--sidebar-accent': string;
+    '--sidebar-accent-foreground': string;
+    '--sidebar-border': string;
+    '--sidebar-ring': string;
+    '--brand': string;
+    '--brand-fill': string;
+    '--brand-foreground': string;
+};
+export declare const LEGACY_DARK_COLORS: {
+    '--background': string;
+    '--foreground': string;
+    '--card': string;
+    '--card-foreground': string;
+    '--popover': string;
+    '--popover-foreground': string;
+    '--primary': string;
+    '--primary-foreground': string;
+    '--secondary': string;
+    '--secondary-foreground': string;
+    '--muted': string;
+    '--muted-foreground': string;
+    '--accent': string;
+    '--accent-foreground': string;
+    '--destructive': string;
+    '--border': string;
+    '--input': string;
+    '--ring': string;
+    '--highlight': string;
+    '--highlight-foreground': string;
+    '--chart-1': string;
+    '--chart-2': string;
+    '--chart-3': string;
+    '--chart-4': string;
+    '--chart-5': string;
+    '--sidebar': string;
+    '--sidebar-foreground': string;
+    '--sidebar-primary': string;
+    '--sidebar-primary-foreground': string;
+    '--sidebar-accent': string;
+    '--sidebar-accent-foreground': string;
+    '--sidebar-border': string;
+    '--sidebar-ring': string;
+    '--brand': string;
+    '--brand-fill': string;
+    '--brand-foreground': string;
+};
+export declare const VIBES_PALETTE: {
+    light: {
+        '--background': string;
+        '--foreground': string;
+        '--card': string;
+        '--card-foreground': string;
+        '--primary': string;
+        '--primary-foreground': string;
+        '--brand': string;
+        '--brand-fill': string;
+        '--brand-foreground': string;
+        '--ring': string;
+        '--highlight': string;
+        '--highlight-foreground': string;
+        '--sidebar-primary': string;
+        '--sidebar-primary-foreground': string;
+        '--sidebar-ring': string;
+        '--muted-foreground': string;
+        '--radius': string;
+        '--popover': string;
+        '--popover-foreground': string;
+        '--secondary': string;
+        '--secondary-foreground': string;
+        '--muted': string;
+        '--accent': string;
+        '--accent-foreground': string;
+        '--destructive': string;
+        '--border': string;
+        '--input': string;
+        '--chart-1': string;
+        '--chart-2': string;
+        '--chart-3': string;
+        '--chart-4': string;
+        '--chart-5': string;
+        '--sidebar': string;
+        '--sidebar-foreground': string;
+        '--sidebar-accent': string;
+        '--sidebar-accent-foreground': string;
+        '--sidebar-border': string;
+    };
+    dark: {
+        '--background': string;
+        '--foreground': string;
+        '--card': string;
+        '--card-foreground': string;
+        '--primary': string;
+        '--primary-foreground': string;
+        '--brand': string;
+        '--brand-fill': string;
+        '--brand-foreground': string;
+        '--sidebar-primary': string;
+        '--sidebar-primary-foreground': string;
+        '--muted-foreground': string;
+        '--popover': string;
+        '--popover-foreground': string;
+        '--secondary': string;
+        '--secondary-foreground': string;
+        '--muted': string;
+        '--accent': string;
+        '--accent-foreground': string;
+        '--destructive': string;
+        '--border': string;
+        '--input': string;
+        '--ring': string;
+        '--highlight': string;
+        '--highlight-foreground': string;
+        '--chart-1': string;
+        '--chart-2': string;
+        '--chart-3': string;
+        '--chart-4': string;
+        '--chart-5': string;
+        '--sidebar': string;
+        '--sidebar-foreground': string;
+        '--sidebar-accent': string;
+        '--sidebar-accent-foreground': string;
+        '--sidebar-border': string;
+        '--sidebar-ring': string;
+    };
+};

package/dist/lib/components/theme/theme-palette.js

@@ -0,0 +1,116 @@
+/** Canonical palette and frozen historical inheritance for named presets. No imports. */
+export const LEGACY_LIGHT_COLORS = {
+    '--radius': '0.625rem',
+    '--background': 'oklch(1 0 0)',
+    '--foreground': 'oklch(0.141 0.005 285.823)',
+    '--card': 'oklch(1 0 0)',
+    '--card-foreground': 'oklch(0.141 0.005 285.823)',
+    '--popover': 'oklch(1 0 0)',
+    '--popover-foreground': 'oklch(0.141 0.005 285.823)',
+    '--primary': 'oklch(0.21 0.006 285.885)',
+    '--primary-foreground': 'oklch(0.985 0 0)',
+    '--secondary': 'oklch(0.967 0.001 286.375)',
+    '--secondary-foreground': 'oklch(0.21 0.006 285.885)',
+    '--muted': 'oklch(0.967 0.001 286.375)',
+    '--muted-foreground': 'oklch(0.552 0.016 285.938)',
+    '--accent': 'oklch(0.967 0.001 286.375)',
+    '--accent-foreground': 'oklch(0.21 0.006 285.885)',
+    '--destructive': 'oklch(0.577 0.245 27.325)',
+    '--border': 'oklch(0.92 0.004 286.32)',
+    '--input': 'oklch(0.92 0.004 286.32)',
+    '--ring': '#15803d',
+    '--highlight': '#15803d',
+    '--highlight-foreground': '#ffffff',
+    '--chart-1': 'oklch(0.646 0.222 41.116)',
+    '--chart-2': 'oklch(0.6 0.118 184.704)',
+    '--chart-3': 'oklch(0.398 0.07 227.392)',
+    '--chart-4': 'oklch(0.828 0.189 84.429)',
+    '--chart-5': 'oklch(0.769 0.188 70.08)',
+    '--sidebar': 'oklch(0.985 0 0)',
+    '--sidebar-foreground': 'oklch(0.141 0.005 285.823)',
+    '--sidebar-primary': 'oklch(0.21 0.006 285.885)',
+    '--sidebar-primary-foreground': 'oklch(0.985 0 0)',
+    '--sidebar-accent': 'oklch(0.967 0.001 286.375)',
+    '--sidebar-accent-foreground': 'oklch(0.21 0.006 285.885)',
+    '--sidebar-border': 'oklch(0.92 0.004 286.32)',
+    '--sidebar-ring': '#15803d',
+    '--brand': '#15803d',
+    '--brand-fill': '#15803d',
+    '--brand-foreground': '#ffffff'
+};
+export const LEGACY_DARK_COLORS = {
+    '--background': 'oklch(0.141 0.005 285.823)',
+    '--foreground': 'oklch(0.985 0 0)',
+    '--card': 'oklch(0.21 0.006 285.885)',
+    '--card-foreground': 'oklch(0.985 0 0)',
+    '--popover': 'oklch(0.21 0.006 285.885)',
+    '--popover-foreground': 'oklch(0.985 0 0)',
+    '--primary': 'oklch(0.92 0.004 286.32)',
+    '--primary-foreground': 'oklch(0.21 0.006 285.885)',
+    '--secondary': 'oklch(0.274 0.006 286.033)',
+    '--secondary-foreground': 'oklch(0.985 0 0)',
+    '--muted': 'oklch(0.274 0.006 286.033)',
+    '--muted-foreground': 'oklch(0.705 0.015 286.067)',
+    '--accent': 'oklch(0.274 0.006 286.033)',
+    '--accent-foreground': 'oklch(0.985 0 0)',
+    '--destructive': 'oklch(0.704 0.191 22.216)',
+    '--border': 'oklch(1 0 0 / 10%)',
+    '--input': 'oklch(1 0 0 / 15%)',
+    '--ring': '#b8ff51',
+    '--highlight': '#b8ff51',
+    '--highlight-foreground': '#090c11',
+    '--chart-1': 'oklch(0.488 0.243 264.376)',
+    '--chart-2': 'oklch(0.696 0.17 162.48)',
+    '--chart-3': 'oklch(0.769 0.188 70.08)',
+    '--chart-4': 'oklch(0.627 0.265 303.9)',
+    '--chart-5': 'oklch(0.645 0.246 16.439)',
+    '--sidebar': 'oklch(0.21 0.006 285.885)',
+    '--sidebar-foreground': 'oklch(0.985 0 0)',
+    '--sidebar-primary': 'oklch(0.488 0.243 264.376)',
+    '--sidebar-primary-foreground': 'oklch(0.985 0 0)',
+    '--sidebar-accent': 'oklch(0.274 0.006 286.033)',
+    '--sidebar-accent-foreground': 'oklch(0.985 0 0)',
+    '--sidebar-border': 'oklch(1 0 0 / 10%)',
+    '--sidebar-ring': '#b8ff51',
+    '--brand': '#b8ff51',
+    '--brand-fill': '#b8ff51',
+    '--brand-foreground': '#090c11'
+};
+const vibesOverrides = {
+    light: {
+        '--background': '#fafafa',
+        '--foreground': '#18181b',
+        '--card': '#ffffff',
+        '--card-foreground': '#18181b',
+        '--primary': '#166534',
+        '--primary-foreground': '#ffffff',
+        '--brand': '#166534',
+        '--brand-fill': '#166534',
+        '--brand-foreground': '#ffffff',
+        '--ring': '#166534',
+        '--highlight': '#166534',
+        '--highlight-foreground': '#ffffff',
+        '--sidebar-primary': '#166534',
+        '--sidebar-primary-foreground': '#ffffff',
+        '--sidebar-ring': '#166534',
+        '--muted-foreground': '#52525b'
+    },
+    dark: {
+        '--background': '#09090b',
+        '--foreground': '#fafafa',
+        '--card': '#18181b',
+        '--card-foreground': '#fafafa',
+        '--primary': '#b8ff51',
+        '--primary-foreground': '#18181b',
+        '--brand': '#b8ff51',
+        '--brand-fill': '#b8ff51',
+        '--brand-foreground': '#18181b',
+        '--sidebar-primary': '#b8ff51',
+        '--sidebar-primary-foreground': '#18181b',
+        '--muted-foreground': '#a1a1aa'
+    }
+};
+export const VIBES_PALETTE = {
+    light: { ...LEGACY_LIGHT_COLORS, ...vibesOverrides.light },
+    dark: { ...LEGACY_DARK_COLORS, ...vibesOverrides.dark }
+};

package/dist/lib/components/theme/theme-preset-bootstrap.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Dependency-free source of the first-paint theme-preset bootstrap script and
+ * the storage keys it touches.
+ *
+ * Isolated into its own leaf module — with ZERO imports — so it can be pulled
+ * in at SvelteKit build-config time (`svelte.config.js` → the browser CSP
+ * builder) without dragging the theme runtime's Svelte/browser dependency
+ * graph (`theme-colors`, `theme-presets`, `shared-mode-sync`) into config load.
+ *
+ * This now exists only for the explicit legacy ProductShell opt-in. Canonical
+ * `@vibesdotdev/kit/browser-csp` deliberately carries no inline-script hash;
+ * the default shell path uses SSR mode stamping and a blocking stylesheet.
+ * Keep the leaf dependency-free while compatibility consumers remain.
+ */
+export declare const THEME_PRESET_STYLE_ID = "vibes-theme-preset-client";
+export declare const THEME_PRESET_CSS_CACHE_KEY = "vibes-theme-preset-css";
+/**
+ * Legacy first-paint theme replay. When explicitly injected into `<head>`, it
+ * reads the CSS the last apply cached and mounts it before hydration.
+ * `textContent` assignment cannot escape the style element, and the cached CSS
+ * was sanitized when written.
+ */
+export declare function createThemePresetBootstrapScript(): string;

package/dist/lib/components/theme/theme-preset-bootstrap.js

@@ -0,0 +1,35 @@
+/**
+ * Dependency-free source of the first-paint theme-preset bootstrap script and
+ * the storage keys it touches.
+ *
+ * Isolated into its own leaf module — with ZERO imports — so it can be pulled
+ * in at SvelteKit build-config time (`svelte.config.js` → the browser CSP
+ * builder) without dragging the theme runtime's Svelte/browser dependency
+ * graph (`theme-colors`, `theme-presets`, `shared-mode-sync`) into config load.
+ *
+ * This now exists only for the explicit legacy ProductShell opt-in. Canonical
+ * `@vibesdotdev/kit/browser-csp` deliberately carries no inline-script hash;
+ * the default shell path uses SSR mode stamping and a blocking stylesheet.
+ * Keep the leaf dependency-free while compatibility consumers remain.
+ */
+export const THEME_PRESET_STYLE_ID = 'vibes-theme-preset-client';
+export const THEME_PRESET_CSS_CACHE_KEY = 'vibes-theme-preset-css';
+/**
+ * Legacy first-paint theme replay. When explicitly injected into `<head>`, it
+ * reads the CSS the last apply cached and mounts it before hydration.
+ * `textContent` assignment cannot escape the style element, and the cached CSS
+ * was sanitized when written.
+ */
+export function createThemePresetBootstrapScript() {
+    return [
+        '(function(){try{',
+        `var css=window.localStorage.getItem(${JSON.stringify(THEME_PRESET_CSS_CACHE_KEY)});`,
+        'if(!css)return;',
+        `var el=document.getElementById(${JSON.stringify(THEME_PRESET_STYLE_ID)});`,
+        "if(!el){el=document.createElement('style');",
+        `el.id=${JSON.stringify(THEME_PRESET_STYLE_ID)};`,
+        'document.head.appendChild(el);}',
+        'el.textContent=css;',
+        '}catch(e){console.error("theme-preset bootstrap: localStorage or DOM may be blocked",e);}})();'
+    ].join('');
+}

package/dist/lib/components/theme/theme-preset-client.d.ts

@@ -0,0 +1,46 @@
+import type { PreferenceStorage } from '../../preferences/preference-storage.ts';
+import { type ThemePreset } from './theme-presets.ts';
+export { THEME_PRESET_CSS_CACHE_KEY, THEME_PRESET_STYLE_ID, createThemePresetBootstrapScript } from './theme-preset-bootstrap.ts';
+export declare const THEME_PRESET_COOKIE_NAME = "vibes-theme-preset";
+export declare const THEME_PRESET_STORAGE_KEY = "vibes-theme-preset";
+export declare const THEME_PRESET_MAX_AGE: number;
+/** The kit's base tokens — selecting it removes the injected override sheet. */
+export declare const DEFAULT_THEME_PRESET_ID = "default";
+/** Value-free storage feedback for theme preference operations. */
+export type ThemePresetStorageStatus = 'stored' | 'removed' | 'blocked' | 'unavailable';
+/** A remembered preset, confirmed absence, denied storage, or no browser page. */
+export type ClientThemePresetRead = {
+    readonly status: 'found';
+    readonly presetId: string;
+    readonly source: 'cookie' | 'storage';
+} | {
+    readonly status: 'missing' | 'blocked' | 'unavailable';
+};
+/** Built-in presets, enabled only — the catalog the quick switcher offers. */
+export declare function builtInThemePresets(): ThemePreset[];
+/** A representative swatch color for a preset chip. */
+export declare function themePresetSwatch(preset: ThemePreset, mode?: 'light' | 'dark'): string;
+/**
+ * Apply `preset` to the page. The first-paint CSS cache lives in the runtime's
+ * preference `storage`; without one the style still applies and the cache
+ * reports `unavailable`.
+ */
+export declare function applyThemePresetToDocument(preset: ThemePreset | null, storage?: PreferenceStorage): ThemePresetStorageStatus;
+export declare function readThemePresetCookie(cookieString: string | undefined): string | undefined;
+/**
+ * Persist the cookie (authoritative) and mirror the choice into the runtime's
+ * preference `storage`. Without storage only the cookie is written and the
+ * status is `unavailable`.
+ */
+export declare function persistThemePresetPreference(presetId: string, storage?: PreferenceStorage): ThemePresetStorageStatus;
+/** Read the client preference without collapsing blocked storage into absence. */
+export declare function readClientThemePresetResult(storage?: PreferenceStorage): ClientThemePresetRead;
+/** Legacy value-only read. Prefer `readClientThemePresetResult` when refusal matters. */
+export declare function readClientThemePreset(storage?: PreferenceStorage): string | undefined;
+/** The event other surfaces dispatch on `window` to choose a preset; its detail is the preset id. */
+export declare const THEME_PRESET_CHANGED_EVENT = "vibes:theme-preset-changed";
+/**
+ * Follow preset-change events on `target`. Any script can dispatch the event,
+ * so only a non-empty string detail reaches `onPreset`. Answers the unsubscribe.
+ */
+export declare function subscribeThemePresetChanges(target: EventTarget, onPreset: (presetId: string) => void): () => void;

package/dist/lib/components/theme/theme-preset-client.js

@@ -0,0 +1,143 @@
+/**
+ * Client-side color-theme application — the quick-switch path used by the
+ * shell's Appearance menu. Injects the chosen preset's token overrides
+ * (ThemeColorSelector's exact live-preview mechanism) into one persistent
+ * style tag and remembers the choice in a cross-subdomain cookie, mirroring
+ * mode (vibes-mode) and layout (vibes-shell-style). Browser-side mirrors live
+ * in the runtime's preference storage, passed in by the caller.
+ *
+ * Signed-in users get durability beyond the cookie: VibesAppShell forwards
+ * picks into account settings (theme.preset), where the server-rendered
+ * stylesheet path takes over on next load.
+ */
+import { deriveSharedCookieDomain } from "../ui/mode-switcher/shared-mode-sync.js";
+import { BROWSER } from 'esm-env';
+import * as z from 'zod/v4';
+import { settleNow } from "../../attempt.js";
+import { generateThemeCSS, sanitizeInjectedCSS } from "./theme-colors.js";
+import { getEnabledThemePresets, normalizeThemePresets } from "./theme-presets.js";
+import { THEME_PRESET_CSS_CACHE_KEY, THEME_PRESET_STYLE_ID } from "./theme-preset-bootstrap.js";
+// The first-paint bootstrap script and the storage keys it touches live in the
+// dependency-free leaf `theme-preset-bootstrap` so the browser-CSP builder can
+// hash the exact same source at config time. Re-exported here to preserve this
+// module's long-standing public surface.
+export { THEME_PRESET_CSS_CACHE_KEY, THEME_PRESET_STYLE_ID, createThemePresetBootstrapScript } from "./theme-preset-bootstrap.js";
+export const THEME_PRESET_COOKIE_NAME = 'vibes-theme-preset';
+export const THEME_PRESET_STORAGE_KEY = 'vibes-theme-preset';
+export const THEME_PRESET_MAX_AGE = 60 * 60 * 24 * 365;
+/** The kit's base tokens — selecting it removes the injected override sheet. */
+export const DEFAULT_THEME_PRESET_ID = 'default';
+/** Built-in presets, enabled only — the catalog the quick switcher offers. */
+export function builtInThemePresets() {
+    return getEnabledThemePresets(normalizeThemePresets(null));
+}
+/** A representative swatch color for a preset chip. */
+export function themePresetSwatch(preset, mode = 'light') {
+    const colors = preset.colors[mode];
+    const other = preset.colors[mode === 'light' ? 'dark' : 'light'];
+    return (colors['--primary'] ??
+        colors['--accent'] ??
+        colors['--background'] ??
+        other['--primary'] ??
+        'var(--primary)');
+}
+/**
+ * Apply `preset` to the page. The first-paint CSS cache lives in the runtime's
+ * preference `storage`; without one the style still applies and the cache
+ * reports `unavailable`.
+ */
+export function applyThemePresetToDocument(preset, storage) {
+    if (!BROWSER)
+        return 'unavailable';
+    const existing = document.getElementById(THEME_PRESET_STYLE_ID);
+    if (!preset || preset.id === DEFAULT_THEME_PRESET_ID) {
+        existing?.remove();
+        return cacheThemePresetCSS(null, storage);
+    }
+    const css = sanitizeInjectedCSS(generateThemeCSS(preset.colors, preset.customCss));
+    const style = existing ?? document.createElement('style');
+    style.id = THEME_PRESET_STYLE_ID;
+    style.textContent = css;
+    if (!existing)
+        document.head.appendChild(style);
+    return cacheThemePresetCSS(css, storage);
+}
+/** Cache the exact CSS the bootstrap script replays before hydration. */
+function cacheThemePresetCSS(css, storage) {
+    if (!storage)
+        return 'unavailable';
+    const cached = settleNow(() => {
+        if (css)
+            storage.setItem(THEME_PRESET_CSS_CACHE_KEY, css);
+        else
+            storage.removeItem(THEME_PRESET_CSS_CACHE_KEY);
+    });
+    if (!cached.ok)
+        return 'blocked';
+    return css ? 'stored' : 'removed';
+}
+export function readThemePresetCookie(cookieString) {
+    if (!cookieString)
+        return undefined;
+    const match = cookieString
+        .split(';')
+        .map((part) => part.trim())
+        .find((part) => part.startsWith(`${THEME_PRESET_COOKIE_NAME}=`));
+    const value = match?.slice(THEME_PRESET_COOKIE_NAME.length + 1);
+    return value ? decodeURIComponent(value) : undefined;
+}
+/**
+ * Persist the cookie (authoritative) and mirror the choice into the runtime's
+ * preference `storage`. Without storage only the cookie is written and the
+ * status is `unavailable`.
+ */
+export function persistThemePresetPreference(presetId, storage) {
+    if (!BROWSER)
+        return 'unavailable';
+    const domain = deriveSharedCookieDomain(window.location.hostname);
+    const domainPart = domain ? `; Domain=${domain}` : '';
+    document.cookie = `${THEME_PRESET_COOKIE_NAME}=${encodeURIComponent(presetId)}; Max-Age=${THEME_PRESET_MAX_AGE}; Path=/${domainPart}; SameSite=Lax`;
+    if (!storage)
+        return 'unavailable';
+    const stored = settleNow(() => {
+        storage.setItem(THEME_PRESET_STORAGE_KEY, presetId);
+    });
+    return stored.ok ? 'stored' : 'blocked';
+}
+/** Read the client preference without collapsing blocked storage into absence. */
+export function readClientThemePresetResult(storage) {
+    if (!BROWSER)
+        return { status: 'unavailable' };
+    const fromCookie = readThemePresetCookie(document.cookie);
+    if (fromCookie)
+        return { status: 'found', presetId: fromCookie, source: 'cookie' };
+    if (!storage)
+        return { status: 'unavailable' };
+    const stored = settleNow(() => storage.getItem(THEME_PRESET_STORAGE_KEY));
+    if (!stored.ok)
+        return { status: 'blocked' };
+    return stored.value
+        ? { status: 'found', presetId: stored.value, source: 'storage' }
+        : { status: 'missing' };
+}
+/** Legacy value-only read. Prefer `readClientThemePresetResult` when refusal matters. */
+export function readClientThemePreset(storage) {
+    const result = readClientThemePresetResult(storage);
+    return result.status === 'found' ? result.presetId : undefined;
+}
+/** The event other surfaces dispatch on `window` to choose a preset; its detail is the preset id. */
+export const THEME_PRESET_CHANGED_EVENT = 'vibes:theme-preset-changed';
+const PresetEventDetail = z.string().min(1);
+/**
+ * Follow preset-change events on `target`. Any script can dispatch the event,
+ * so only a non-empty string detail reaches `onPreset`. Answers the unsubscribe.
+ */
+export function subscribeThemePresetChanges(target, onPreset) {
+    const listener = (event) => {
+        const detail = PresetEventDetail.safeParse(event instanceof CustomEvent ? event.detail : undefined);
+        if (detail.success)
+            onPreset(detail.data);
+    };
+    target.addEventListener(THEME_PRESET_CHANGED_EVENT, listener);
+    return () => target.removeEventListener(THEME_PRESET_CHANGED_EVENT, listener);
+}

package/dist/lib/components/theme/theme-preset-store.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ThemePreset } from './theme-presets.ts';
+import type { PreferenceStorage } from '../../preferences/preference-storage.ts';
+export declare class ThemePresetStore {
+    #private;
+    readonly presets: ThemePreset[];
+    constructor();
+    /** Stop following `vibes:theme-preset-changed` events; the store keeps its preset. */
+    dispose(): void;
+    get current(): string;
+    find(id: string): ThemePreset | null;
+    /**
+     * Bind the runtime's preference storage: the stored preset wins over the
+     * cookie-derived one and is applied, then every later change is mirrored.
+     */
+    attachStorage(storage: PreferenceStorage): void;
+    set(id: string): void;
+}

package/dist/lib/components/theme/theme-preset-store.svelte.js

@@ -0,0 +1,60 @@
+/**
+ * Client color-theme preference store. One instance belongs to one shell/runtime
+ * (see `preferences/preference-stores.ts`); it is never a process global. The
+ * current preset is read eagerly at construction so components can read
+ * `current` from a `$derived` scope, and it mirrors through the runtime's
+ * preference storage once `attachStorage` hands it one.
+ */
+import * as z from 'zod/v4';
+import { DEFAULT_THEME_PRESET_ID, applyThemePresetToDocument, builtInThemePresets, persistThemePresetPreference, readClientThemePreset } from "./theme-preset-client.js";
+import { BROWSER } from 'esm-env';
+/** Any script can dispatch the event, so its detail is parsed before it is used. */
+const ThemePresetEventDetail = z.string().min(1);
+export class ThemePresetStore {
+    presets = builtInThemePresets();
+    #current = $state(DEFAULT_THEME_PRESET_ID);
+    #storage;
+    #followingPresetChanges = () => { };
+    constructor() {
+        this.#current = BROWSER
+            ? (readClientThemePreset() ?? DEFAULT_THEME_PRESET_ID)
+            : DEFAULT_THEME_PRESET_ID;
+        if (BROWSER) {
+            const follow = (event) => {
+                const detail = ThemePresetEventDetail.safeParse(event instanceof CustomEvent ? event.detail : undefined);
+                if (detail.success)
+                    this.set(detail.data);
+            };
+            window.addEventListener('vibes:theme-preset-changed', follow);
+            this.#followingPresetChanges = () => window.removeEventListener('vibes:theme-preset-changed', follow);
+        }
+    }
+    /** Stop following `vibes:theme-preset-changed` events; the store keeps its preset. */
+    dispose() {
+        this.#followingPresetChanges();
+    }
+    get current() {
+        return this.#current;
+    }
+    find(id) {
+        return this.presets.find((preset) => preset.id === id) ?? null;
+    }
+    /**
+     * Bind the runtime's preference storage: the stored preset wins over the
+     * cookie-derived one and is applied, then every later change is mirrored.
+     */
+    attachStorage(storage) {
+        this.#storage = storage;
+        const stored = readClientThemePreset(storage);
+        if (stored)
+            this.set(stored);
+        if (this.#current !== DEFAULT_THEME_PRESET_ID) {
+            persistThemePresetPreference(this.#current, storage);
+        }
+    }
+    set(id) {
+        this.#current = id;
+        applyThemePresetToDocument(this.find(id), this.#storage);
+        persistThemePresetPreference(id, this.#storage);
+    }
+}

package/dist/lib/components/theme/theme-presets.d.ts

@@ -0,0 +1,21 @@
+import * as z from 'zod/v4';
+import { type StoredThemeValue, type ThemeColors } from './theme-colors.ts';
+export declare const themePresetSchema: z.ZodObject<{
+    id: z.ZodString;
+    name: z.ZodString;
+    description: z.ZodDefault<z.ZodString>;
+    enabled: z.ZodDefault<z.ZodBoolean>;
+    builtIn: z.ZodDefault<z.ZodBoolean>;
+    colors: z.ZodObject<{
+        light: z.ZodRecord<z.ZodString, z.ZodString>;
+        dark: z.ZodRecord<z.ZodString, z.ZodString>;
+    }, z.core.$strip>;
+    customCss: z.ZodDefault<z.ZodString>;
+}, z.core.$strip>;
+export type ThemePreset = z.infer<typeof themePresetSchema>;
+/** Stored presets: the saved JSON document, presets already decoded, or any other stored value (which decodes to none). */
+export type ThemePresetsSource = StoredThemeValue | readonly ThemePreset[];
+export declare function normalizeThemePresets(value: ThemePresetsSource): ThemePreset[];
+export declare function serializeThemePresets(value: ThemePreset[]): string;
+export declare function getEnabledThemePresets(value: ThemePreset[]): ThemePreset[];
+export declare function createCustomThemePreset(name: string, colors: ThemeColors, customCss?: string): ThemePreset;