zidane-ui 9.1.1 → 9.1.3

package/src/appearance/headless/fonts.ts

@@ -1,224 +0,0 @@
-/**
- * Font preferences → CSS variables, plus the font catalog the Appearance
- * panel offers.
- *
- * Strategy: system fonts only, nothing bundled. Defaults are the platform
- * UI stack and `ui-monospace`. The picker shows a curated list filtered to
- * what is actually installed (canvas `measureText` probe), extended by
- * `queryLocalFonts()` when the permission is granted (main allows it for
- * our origin). A chosen family is written as the FIRST entry of the
- * stack, so a font that disappears later degrades to the default instead
- * of to the browser fallback.
- */
-import type { FontChoices, FontSizes } from './prefs';
-
-/** The default font stacks: the platform UI stack and `ui-monospace`. */
-export const FONT_STACKS = {
-  ui: `-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif`,
-  mono: `ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace`,
-} as const;
-
-/** A font the picker offers. */
-export interface FontOption {
-  /** Family name as passed to CSS. */
-  family: string;
-  /** Name shown in the picker. */
-  label: string;
-  /** Its kind, for grouping. */
-  kind: 'sans' | 'mono' | 'serif';
-}
-
-/**
- * Curated candidates. Order = display order within each kind. Availability
- * is checked at runtime; missing ones are hidden from the picker.
- */
-export const CURATED_FONTS: readonly FontOption[] = [
-  { family: 'Inter', label: 'Inter', kind: 'sans' },
-  { family: 'Geist', label: 'Geist', kind: 'sans' },
-  { family: 'SF Pro Text', label: 'SF Pro', kind: 'sans' },
-  { family: 'Helvetica Neue', label: 'Helvetica Neue', kind: 'sans' },
-  { family: 'IBM Plex Sans', label: 'IBM Plex Sans', kind: 'sans' },
-  { family: 'Source Sans 3', label: 'Source Sans', kind: 'sans' },
-  { family: 'Roboto', label: 'Roboto', kind: 'sans' },
-  { family: 'Segoe UI', label: 'Segoe UI', kind: 'sans' },
-  { family: 'Avenir Next', label: 'Avenir Next', kind: 'sans' },
-  { family: 'Atkinson Hyperlegible', label: 'Atkinson Hyperlegible', kind: 'sans' },
-  { family: 'Iowan Old Style', label: 'Iowan Old Style', kind: 'serif' },
-  { family: 'Charter', label: 'Charter', kind: 'serif' },
-  { family: 'Georgia', label: 'Georgia', kind: 'serif' },
-  { family: 'New York', label: 'New York', kind: 'serif' },
-  { family: 'SF Mono', label: 'SF Mono', kind: 'mono' },
-  { family: 'Menlo', label: 'Menlo', kind: 'mono' },
-  { family: 'Monaco', label: 'Monaco', kind: 'mono' },
-  { family: 'JetBrains Mono', label: 'JetBrains Mono', kind: 'mono' },
-  { family: 'Fira Code', label: 'Fira Code', kind: 'mono' },
-  { family: 'Geist Mono', label: 'Geist Mono', kind: 'mono' },
-  { family: 'IBM Plex Mono', label: 'IBM Plex Mono', kind: 'mono' },
-  { family: 'Source Code Pro', label: 'Source Code Pro', kind: 'mono' },
-  { family: 'Cascadia Code', label: 'Cascadia Code', kind: 'mono' },
-  { family: 'Berkeley Mono', label: 'Berkeley Mono', kind: 'mono' },
-  { family: 'Iosevka', label: 'Iosevka', kind: 'mono' },
-  { family: 'Commit Mono', label: 'Commit Mono', kind: 'mono' },
-  { family: 'Monaspace Neon', label: 'Monaspace Neon', kind: 'mono' },
-  { family: 'Hack', label: 'Hack', kind: 'mono' },
-  { family: 'Consolas', label: 'Consolas', kind: 'mono' },
-];
-
-/**
- * Quotes a family name for CSS when it contains spaces or punctuation.
- *
- * @param family - The family name.
- */
-export function cssFamily(family: string): string {
-  return /^[a-zA-Z0-9-]+$/.test(family) ? family : `'${family.replace(/'/g, "\\'")}'`;
-}
-
-/**
- * A font stack with the chosen family first, so a font that disappears degrades to the default stack.
- *
- * @param choice - The chosen family, or `null` for the default stack.
- * @param kind - Which default stack follows it.
- */
-export function fontStack(choice: string | null, kind: 'ui' | 'mono'): string {
-  const base = FONT_STACKS[kind];
-  return choice ? `${cssFamily(choice)}, ${base}` : base;
-}
-
-/** The font CSS variables {@link fontsToCssVars} writes. */
-export type FontCssVars = Record<
-  | '--zg-font-ui'
-  | '--zg-font-chat'
-  | '--zg-font-prompt'
-  | '--zg-font-mono'
-  | '--zg-font-size-chat'
-  | '--zg-font-size-prompt'
-  | '--zg-font-size-code',
-  string
->;
-
-/**
- * The font CSS variables for the picked families and sizes.
- *
- * @param fonts - The families per role.
- * @param sizes - The sizes per role.
- */
-export function fontsToCssVars(fonts: FontChoices, sizes: FontSizes): FontCssVars {
-  const ui = fontStack(fonts.ui, 'ui');
-  return {
-    '--zg-font-ui': ui,
-    // Chat and prompt fall back to the UI choice (not the stylesheet default)
-    // so picking one font for the interface carries into the transcript.
-    '--zg-font-chat': fonts.chat ? fontStack(fonts.chat, 'ui') : ui,
-    '--zg-font-prompt': fonts.prompt ? fontStack(fonts.prompt, 'ui') : fonts.chat ? fontStack(fonts.chat, 'ui') : ui,
-    '--zg-font-mono': fontStack(fonts.mono, 'mono'),
-    '--zg-font-size-chat': `${sizes.chat}px`,
-    '--zg-font-size-prompt': `${sizes.prompt}px`,
-    '--zg-font-size-code': `${sizes.code}px`,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Availability detection
-// ---------------------------------------------------------------------------
-
-/**
- * A string with wide/narrow glyph mix so a substituted fallback almost
- * always measures differently from the real face.
- */
-const PROBE_TEXT = 'mmmmmmmmMMWli1O0@# fjord';
-
-let probeCtx: CanvasRenderingContext2D | null | undefined;
-
-function ctx(): CanvasRenderingContext2D | null {
-  if (probeCtx === undefined) {
-    probeCtx = typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
-  }
-  return probeCtx;
-}
-
-/**
- * True when `family` renders differently from both generic fallbacks,
- * i.e. the OS resolved it to an actual installed face. Cheap (three
- * `measureText` calls), synchronous, no permission needed.
- *
- * @param family - The family name.
- */
-export function isFontAvailable(family: string): boolean {
-  const c = ctx();
-  if (!c) {
-    return false;
-  }
-  const measure = (font: string): number => {
-    c.font = `16px ${font}`;
-    return c.measureText(PROBE_TEXT).width;
-  };
-  const quoted = cssFamily(family);
-  const sans = measure('sans-serif');
-  const mono = measure('monospace');
-  const serif = measure('serif');
-  const w1 = measure(`${quoted}, sans-serif`);
-  const w2 = measure(`${quoted}, monospace`);
-  // If the family is missing, each probe collapses to its fallback width.
-  const missing = Math.abs(w1 - sans) < 0.01 && Math.abs(w2 - mono) < 0.01;
-  if (!missing) {
-    return true;
-  }
-  // Edge: family IS the generic default (e.g. Helvetica on macOS). Check serif too.
-  return Math.abs(measure(`${quoted}, serif`) - serif) >= 0.01;
-}
-
-/** The curated fonts installed on this computer. */
-export function availableCuratedFonts(): FontOption[] {
-  return CURATED_FONTS.filter((f) => isFontAvailable(f.family));
-}
-
-interface LocalFontData {
-  family: string;
-  style: string;
-}
-
-/**
- * Installed families via the Local Font Access API. Resolves to `[]` when
- * unsupported or denied. Families are de-duplicated and sorted; `kind` is
- * guessed from the name because the API doesn't classify.
- */
-export async function queryInstalledFonts(): Promise<FontOption[]> {
-  const w = window as unknown as { queryLocalFonts?: () => Promise<LocalFontData[]> };
-  if (typeof w.queryLocalFonts !== 'function') {
-    return [];
-  }
-  try {
-    const faces = await w.queryLocalFonts();
-    const families = new Set<string>();
-    for (const face of faces) {
-      if (face.family && !face.family.startsWith('.')) {
-        families.add(face.family);
-      }
-    }
-    return [...families]
-      .sort((a, b) => a.localeCompare(b))
-      .map((family) => ({ family, label: family, kind: guessKind(family) }));
-  } catch {
-    return [];
-  }
-}
-
-const MONO_HINT =
-  /mono|code|courier|consol|menlo|monaco|fira ?code|hack|iosevka|jetbrains|cascadia|source code|berkeley|plex mono|terminal|fixed/i;
-const SERIF_HINT =
-  /serif|georgia|times|garamond|baskerville|charter|palatino|book|iowan|new york|didot|bodoni|caslon|minion|merriweather|lora|playfair/i;
-
-/**
- * Guesses a family's kind from its name (the Local Font Access API doesn't classify).
- *
- * @param family - The family name.
- */
-export function guessKind(family: string): FontOption['kind'] {
-  if (MONO_HINT.test(family)) {
-    return 'mono';
-  }
-  if (SERIF_HINT.test(family) && !/sans/i.test(family)) {
-    return 'serif';
-  }
-  return 'sans';
-}

package/src/appearance/headless/host.ts

@@ -1,65 +0,0 @@
-/**
- * The appearance host: where an app keeps its appearance preferences, which
- * themes beyond the built-in ones it offers, where the pre-paint snapshot
- * goes and what the window does natively. An app implements it once (the
- * desktop app over `localStorage` and IPC, a web app over `localStorage`
- * with `createBrowserAppearanceHost`) and hands it to `AppearanceProvider`
- * (or `AppHost.appearance`).
- *
- * Only `prefs` is required: a host that leaves another member out offers the
- * built-in themes only, writes no snapshot, or leaves the window alone.
- */
-import type { Readable } from '../../chat/headless/store';
-import type { Theme } from '../../theme/themes';
-import type { AppearanceMode, AppearanceState } from './prefs';
-
-export type { Theme };
-
-/** The stored preferences: read with `get`, follow with `subscribe`, change with `set`. */
-export interface AppearancePrefs extends Readable<AppearanceState> {
-  /**
-   * Merges `update` into the preferences (or replaces them with what the function returns), stores them and tells
-   * subscribers. Equal preferences change nothing.
-   */
-  set(update: Partial<AppearanceState> | ((prev: AppearanceState) => AppearanceState)): void;
-  /** Back to `DEFAULT_APPEARANCE`. */
-  reset(): void;
-  /** True until preferences were stored: the app's first run on this computer. */
-  isFirstRun(): boolean;
-}
-
-/** The pre-paint snapshot: the last applied CSS variables, replayed before any script loads. */
-export interface BootSnapshot {
-  /** The appearance class (`.light` / `.dark`). */
-  appearance: 'light' | 'dark';
-  /** `--zg-*` name → value. */
-  vars: Record<string, string>;
-}
-
-/** Where the pre-paint snapshot goes. */
-export interface AppearanceBoot {
-  /** Stores the snapshot (after every apply that changed something). */
-  write(snapshot: BootSnapshot): void;
-}
-
-/** What the window does natively when the appearance changes. Each member is optional. */
-export interface AppearanceWindow {
-  /** Paints the window background shown during resize, before the page does. `#rrggbb`. */
-  setBackground?(color: string): Promise<void>;
-  /** Applies the interface scale (a zoom factor, 0.8..1.5). */
-  setZoom?(factor: number): Promise<void>;
-  /** Mirrors the mode into the native chrome (title bar, menus). */
-  setNativeTheme?(mode: AppearanceMode): Promise<void>;
-}
-
-/** The appearance host. Only `prefs` is required. */
-export interface AppearanceHost {
-  /** The stored preferences. */
-  prefs: AppearancePrefs;
-  /** Themes beyond the built-in ones for a folder (its extensions'). Absent: built-in themes only. */
-  themes?(folder: string): Promise<readonly Theme[]>;
-  /** Where the pre-paint snapshot goes. Absent: none is written. */
-  boot?: AppearanceBoot;
-  /** Native window effects. Absent: the window is left alone. */
-  window?: AppearanceWindow;
-}

package/src/appearance/headless/index.ts

@@ -1,12 +0,0 @@
-/**
- * `zidane-ui/appearance/headless`: the React-free half of the appearance
- * area. The `AppearanceHost` interface, the preferences model
- * (`parseAppearance`, `DEFAULT_APPEARANCE`, `LIMITS`), the `Storage`-backed
- * preferences and pre-paint snapshot, the font tokens and the zoom key
- * commands (`zoomKeyCommands`).
- */
-export * from './host';
-export * from './prefs';
-export * from './storage';
-export * from './fonts';
-export * from './zoom-commands';

package/src/appearance/headless/prefs.ts

@@ -1,252 +0,0 @@
-/**
- * The appearance preferences: mode, the light/dark theme pairing, contrast,
- * accent, fonts and sizes, interface scale, motion, panel widths, the Files
- * tree side and the code theme per appearance. One blob, validated field by
- * field on read (`parseAppearance`), kept by the host (`AppearanceHost.prefs`).
- *
- * These are properties of a window on a display, not of the agent: they are
- * not part of zidane's shared `Settings`.
- */
-
-/** Which appearance the app shows: the OS's, or always light or dark. */
-export type AppearanceMode = 'system' | 'light' | 'dark';
-
-/** How much the UI animates. `system` follows the OS reduced-motion preference. */
-export type MotionPreference = 'system' | 'off' | 'reduced' | 'full';
-
-/** The font families picked per role, as the OS names them. `null`: the stylesheet default. */
-export interface FontChoices {
-  /** The interface font. */
-  ui: string | null;
-  /** The transcript font (default: the interface font). */
-  chat: string | null;
-  /** The prompt font (default: the transcript font). */
-  prompt: string | null;
-  /** The code font. */
-  mono: string | null;
-}
-
-/** Font sizes in CSS px. */
-export interface FontSizes {
-  /** The transcript. */
-  chat: number;
-  /** The prompt. */
-  prompt: number;
-  /** Code blocks and the editor. */
-  code: number;
-}
-
-/** Which side of the Files tab the tree column sits on. */
-export type FilesTreeSide = 'left' | 'right';
-
-/** A bundled code theme id, or `'auto'`: the app theme's own mapping. */
-export type CodeThemePick = 'auto' | (string & {});
-
-/**
- * Syntax colours per appearance. Only the tokens come from the code theme; the code
- * background is always the app's, so each slot holds a theme of its type.
- */
-export interface CodeThemeChoice {
-  /** The pick while the app is dark. */
-  dark: CodeThemePick;
-  /** The pick while the app is light. */
-  light: CodeThemePick;
-}
-
-/** 2: `filesTreeSide` defaults to the left (see `parseAppearance`). */
-const APPEARANCE_VERSION = 2 as const;
-
-/** Every appearance preference, as stored. */
-export interface AppearanceState {
-  /** The blob's version. */
-  version: typeof APPEARANCE_VERSION;
-  /** System, light or dark. */
-  mode: AppearanceMode;
-  /** The theme id shown while light (registry or extension). */
-  lightTheme: string;
-  /** The theme id shown while dark (registry or extension). */
-  darkTheme: string;
-  /** 50..200, 100 = as designed. */
-  contrast: number;
-  /** `#rrggbb` replacing the theme's accent, or `null` to use the theme's own. */
-  accentOverride: string | null;
-  /** Font families per role. */
-  fonts: FontChoices;
-  /** Font sizes per role. */
-  fontSizes: FontSizes;
-  /** The interface zoom factor, 0.8..1.5. */
-  interfaceScale: number;
-  /** The motion preference. */
-  motion: MotionPreference;
-  /**
-   * Spring animations: motion settles with physics (a hint of overshoot)
-   * instead of fixed ease-out curves. Only meaningful at the Full level.
-   */
-  springs: boolean;
-  /** Panel open/close duration in ms (sidebar, side panels), 0..400. */
-  panelMs: number;
-  /** The sidebar's drag-resized width in CSS px; persisted on drag end only. */
-  sidebarWidth: number;
-  /** The side panel's drag-resized width in CSS px; persisted on drag end only. */
-  panelWidth: number;
-  /** Which side of the Files tab the tree column sits on. */
-  filesTreeSide: FilesTreeSide;
-  /** The code theme per appearance. */
-  codeTheme: CodeThemeChoice;
-}
-
-/** The preferences before the user changes anything. */
-export const DEFAULT_APPEARANCE: AppearanceState = {
-  version: APPEARANCE_VERSION,
-  mode: 'system',
-  lightTheme: 'light',
-  darkTheme: 'default',
-  contrast: 100,
-  accentOverride: null,
-  fonts: { ui: null, chat: null, prompt: null, mono: null },
-  fontSizes: { chat: 14, prompt: 14, code: 12 },
-  interfaceScale: 1,
-  motion: 'system',
-  springs: true,
-  panelMs: 200,
-  sidebarWidth: 260,
-  panelWidth: 420,
-  filesTreeSide: 'left',
-  codeTheme: { dark: 'auto', light: 'auto' },
-};
-
-/** The bounds (and slider steps) of the numeric preferences. */
-export const LIMITS = {
-  contrast: { min: 50, max: 200, step: 5 },
-  fontSize: { min: 10, max: 22, step: 1 },
-  interfaceScale: { min: 0.8, max: 1.5, step: 0.05 },
-  panelMs: { min: 0, max: 400, step: 20 },
-  sidebarWidth: { min: 220, max: 480 },
-  panelWidth: { min: 300, max: 900 },
-} as const;
-
-/** Options of {@link parseAppearance}. */
-export interface ParseAppearanceOptions {
-  /**
-   * The appearance a code theme id is made for, `undefined` when unknown
-   * (`codeThemeTypeOf` from `zidane-ui/appearance`). A stored pick of the
-   * wrong type, or unknown, reads as `'auto'`. Absent: any non-empty id is kept.
-   */
-  codeThemeType?: (id: string) => 'light' | 'dark' | undefined;
-}
-
-const clampNum = (n: unknown, min: number, max: number, fallback: number): number =>
-  typeof n === 'number' && Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
-
-const strOrNull = (v: unknown): string | null => (typeof v === 'string' && v.trim() ? v : null);
-
-const HEX = /^#[0-9a-f]{6}$/i;
-
-function parseCodeThemePick(v: unknown, type: 'light' | 'dark', options: ParseAppearanceOptions): CodeThemePick {
-  if (typeof v !== 'string' || !v) return 'auto';
-  if (!options.codeThemeType) return v;
-  return options.codeThemeType(v) === type ? v : 'auto';
-}
-
-/**
- * Validates a stored blob field by field; anything unrecognised falls back to its default.
- *
- * @param raw - The stored JSON.
- * @param options - How to check code theme ids.
- * @returns The preferences, or `undefined` when `raw` is not a known blob.
- */
-export function parseAppearance(raw: string, options: ParseAppearanceOptions = {}): AppearanceState | undefined {
-  let json: unknown;
-  try {
-    json = JSON.parse(raw);
-  } catch {
-    return undefined;
-  }
-  if (!json || typeof json !== 'object') {
-    return undefined;
-  }
-  const o = json as Record<string, unknown>;
-  if (o.version !== 1 && o.version !== APPEARANCE_VERSION) {
-    return undefined;
-  }
-  const d = DEFAULT_APPEARANCE;
-  const fonts = (o.fonts ?? {}) as Record<string, unknown>;
-  const sizes = (o.fontSizes ?? {}) as Record<string, unknown>;
-  const accent = strOrNull(o.accentOverride);
-  const codeTheme = (o.codeTheme ?? {}) as Record<string, unknown>;
-
-  return {
-    version: APPEARANCE_VERSION,
-    mode: o.mode === 'light' || o.mode === 'dark' || o.mode === 'system' ? o.mode : d.mode,
-    lightTheme: strOrNull(o.lightTheme) ?? d.lightTheme,
-    darkTheme: strOrNull(o.darkTheme) ?? d.darkTheme,
-    contrast: clampNum(o.contrast, LIMITS.contrast.min, LIMITS.contrast.max, d.contrast),
-    accentOverride: accent && HEX.test(accent) ? accent.toLowerCase() : null,
-    fonts: {
-      ui: strOrNull(fonts.ui),
-      chat: strOrNull(fonts.chat),
-      prompt: strOrNull(fonts.prompt),
-      mono: strOrNull(fonts.mono),
-    },
-    fontSizes: {
-      chat: clampNum(sizes.chat, LIMITS.fontSize.min, LIMITS.fontSize.max, d.fontSizes.chat),
-      prompt: clampNum(sizes.prompt, LIMITS.fontSize.min, LIMITS.fontSize.max, d.fontSizes.prompt),
-      code: clampNum(sizes.code, LIMITS.fontSize.min, LIMITS.fontSize.max, d.fontSizes.code),
-    },
-    interfaceScale: clampNum(o.interfaceScale, LIMITS.interfaceScale.min, LIMITS.interfaceScale.max, d.interfaceScale),
-    motion:
-      o.motion === 'off' || o.motion === 'reduced' || o.motion === 'full' || o.motion === 'system'
-        ? o.motion
-        : d.motion,
-    springs: typeof o.springs === 'boolean' ? o.springs : d.springs,
-    panelMs: clampNum(o.panelMs, LIMITS.panelMs.min, LIMITS.panelMs.max, d.panelMs),
-    // Version 1 blobs hold the old `'right'` default (the whole state was written on any change): left once.
-    filesTreeSide: o.version === APPEARANCE_VERSION && o.filesTreeSide === 'right' ? 'right' : 'left',
-    sidebarWidth: Math.round(
-      clampNum(o.sidebarWidth, LIMITS.sidebarWidth.min, LIMITS.sidebarWidth.max, d.sidebarWidth),
-    ),
-    panelWidth: Math.round(clampNum(o.panelWidth, LIMITS.panelWidth.min, LIMITS.panelWidth.max, d.panelWidth)),
-    codeTheme: {
-      dark: parseCodeThemePick(codeTheme.dark, 'dark', options),
-      light: parseCodeThemePick(codeTheme.light, 'light', options),
-    },
-  };
-}
-
-/**
- * The preferences with the interface scale one step up or down, or back to 1, clamped to {@link LIMITS}.
- *
- * @param prev - The current preferences.
- * @param direction - `1` one step up, `-1` one step down, `0` back to 100%.
- */
-export function stepInterfaceScale(prev: AppearanceState, direction: 1 | -1 | 0): AppearanceState {
-  const { min, max, step } = LIMITS.interfaceScale;
-  const raw = direction === 0 ? 1 : prev.interfaceScale + direction * step;
-  // Round to the step grid so repeated ± never drifts (0.1 + 0.05 …).
-  const snapped = Math.round(raw / step) * step;
-  return { ...prev, interfaceScale: Math.min(max, Math.max(min, Number(snapped.toFixed(2)))) };
-}
-
-/**
- * The theme id to show: the dark slot when the mode (or the OS, under `system`) asks for dark, else the light slot.
- *
- * @param state - The preferences.
- * @param prefersDark - Whether the OS prefers dark.
- */
-export function activeThemeId(state: AppearanceState, prefersDark: boolean): string {
-  const wantDark = state.mode === 'dark' || (state.mode === 'system' && prefersDark);
-  return wantDark ? state.darkTheme : state.lightTheme;
-}
-
-/**
- * The motion level a preference resolves to: `system` follows the OS, an explicit choice wins.
- *
- * @param pref - The stored preference.
- * @param osReducedMotion - Whether the OS asks for reduced motion.
- */
-export function resolveMotion(pref: MotionPreference, osReducedMotion: boolean): 'off' | 'reduced' | 'full' {
-  if (pref === 'system') {
-    return osReducedMotion ? 'reduced' : 'full';
-  }
-  return pref;
-}

package/src/appearance/headless/storage.ts

@@ -1,127 +0,0 @@
-/**
- * Preferences and the pre-paint snapshot kept in a `Storage`
- * (`localStorage`): the desktop app's and the web app's. Every storage call is
- * guarded: a storage that throws (disabled, full, missing) reads as empty and
- * drops writes, and the UI never notices.
- */
-import type { AppearanceBoot, AppearancePrefs, BootSnapshot } from './host';
-import { DEFAULT_APPEARANCE, parseAppearance, type AppearanceState, type ParseAppearanceOptions } from './prefs';
-
-/** The key the preferences live under. */
-export const APPEARANCE_STORAGE_KEY = 'zg:appearance:v1';
-
-/** The key the pre-paint snapshot lives under. A page's inline script replays it before any bundle loads. */
-export const BOOT_SNAPSHOT_KEY = 'zg:appearance:boot:v1';
-
-/** The `Storage` calls the appearance stores make (`localStorage` or a double). */
-export type AppearanceStorage = Pick<Storage, 'getItem' | 'setItem'>;
-
-/** Options of {@link createStorageAppearancePrefs}. */
-export interface StorageAppearancePrefsOptions extends ParseAppearanceOptions {
-  /** Where the preferences live. */
-  storage: AppearanceStorage;
-  /** The key. Default: {@link APPEARANCE_STORAGE_KEY}. */
-  key?: string;
-  /**
-   * Calls `onChange` when another window changed the stored preferences; returns the unsubscribe. Default: the
-   * `storage` event of `window`, when there is one.
-   */
-  watch?: (key: string, onChange: () => void) => () => void;
-}
-
-function watchWindow(key: string, onChange: () => void): () => void {
-  if (typeof window === 'undefined') return () => {};
-  const listener = (e: StorageEvent) => {
-    if (e.key === key) onChange();
-  };
-  window.addEventListener('storage', listener);
-  return () => window.removeEventListener('storage', listener);
-}
-
-/**
- * Appearance preferences kept in a `Storage` under one key, read on first use and validated with `parseAppearance`.
- * Another window's change (the `storage` event) is adopted and announced.
- *
- * @param options - The storage, the key and how to check code theme ids.
- */
-export function createStorageAppearancePrefs(options: StorageAppearancePrefsOptions): AppearancePrefs {
-  const { storage, key = APPEARANCE_STORAGE_KEY, watch = watchWindow } = options;
-  let state: AppearanceState | undefined;
-  /** True when nothing was stored yet. */
-  let firstRun = false;
-  const listeners = new Set<() => void>();
-
-  const load = (): AppearanceState => {
-    if (!state) {
-      let stored: AppearanceState | undefined;
-      try {
-        const raw = storage.getItem(key);
-        stored = raw === null ? undefined : parseAppearance(raw, options);
-      } catch {
-        stored = undefined;
-      }
-      firstRun = stored === undefined;
-      state = stored ?? DEFAULT_APPEARANCE;
-    }
-    return state;
-  };
-  const notify = () => {
-    for (const l of [...listeners]) l();
-  };
-
-  const prefs: AppearancePrefs = {
-    get: load,
-    subscribe(onChange) {
-      listeners.add(onChange);
-      return () => {
-        listeners.delete(onChange);
-      };
-    },
-    set(update) {
-      const prev = load();
-      const next = typeof update === 'function' ? update(prev) : { ...prev, ...update, version: prev.version };
-      if (JSON.stringify(prev) === JSON.stringify(next)) return;
-      state = next;
-      firstRun = false;
-      try {
-        storage.setItem(key, JSON.stringify(next));
-      } catch {
-        // Non-fatal: the next launch falls back to the defaults.
-      }
-      notify();
-    },
-    reset() {
-      prefs.set(() => DEFAULT_APPEARANCE);
-    },
-    isFirstRun() {
-      load();
-      return firstRun;
-    },
-  };
-
-  // Another window (a standalone session window) changed the appearance: adopt it.
-  watch(key, () => {
-    state = undefined;
-    notify();
-  });
-  return prefs;
-}
-
-/**
- * The pre-paint snapshot kept in a `Storage` as a flat JSON blob (`{ appearance, vars }`), so the page's inline
- * script needs no logic beyond `setProperty`.
- *
- * @param storage - Where to keep it, such as `localStorage`.
- * @param key - The key. Default: {@link BOOT_SNAPSHOT_KEY}.
- */
-export function createStorageBoot(storage: AppearanceStorage, key: string = BOOT_SNAPSHOT_KEY): AppearanceBoot {
-  return {
-    write(snapshot: BootSnapshot) {
-      try {
-        storage.setItem(key, JSON.stringify(snapshot));
-      } catch {
-        // Non-fatal: the first paint falls back to the stylesheet.
-      }
-    },
-  };
-}