@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/styles/theme.contrast.test.ts

@@ -1,460 +0,0 @@
-import { readFile } from "node:fs/promises";
-import { describe, expect, it } from "vitest";
-
-// `import.meta.dirname` (Node 24) rather than `import.meta.url`, because the
-// file is rewritten by Vitest's transform — `new URL(…, import.meta.url)`
-// gets a bare path as its base and dies with a scheme error.
-const THEME_CSS = `${import.meta.dirname}/theme.css`;
-
-// ---- Token parsing ----------------------------------------------------------
-
-type TokenMap = Map<string, string>;
-
-/**
- * Every `--name: value;` declaration inside a given block of CSS.
- * The regex is intentionally simple: it matches any `--custom-property: …;`
- * line, and `parseHsl` below validates the shape of the value.
- */
-function extractDeclarations(block: string): TokenMap {
-  const entries = [...block.matchAll(/--([\w-]+):\s*([^;]+);/g)]
-    .map((m): readonly [string, string] | null => {
-      const name = m[1];
-      const value = m[2];
-      if (name === undefined || value === undefined) return null;
-      return [name, value.trim()] as const;
-    })
-    .filter((e): e is readonly [string, string] => e !== null);
-  return new Map(entries);
-}
-
-/**
- * Read the light tokens from the `@theme static { }` block. The regex is
- * lazy (`*?`) so it stops at the first closing `}` on its own line — the
- * `@theme static` block itself — rather than reaching past it into the
- * dark-theme overrides that follow.
- */
-async function readLightTokens(): Promise<TokenMap> {
-  const css = await readFile(THEME_CSS, "utf8");
-  const block = /@theme static \{([\s\S]*?)\n\}/.exec(css)?.[1];
-  if (block === undefined) throw new Error(`${THEME_CSS}: no "@theme static {" block found.`);
-  return extractDeclarations(block);
-}
-
-/**
- * Read the dark tokens from the `:root[data-theme="dark"] { }` block.
- * Uses brace-depth counting to find the matching close brace, because the
- * block may contain nested comments or multi-line values that a simple
- * regex cannot handle.
- *
- * The marker `:root[data-theme="dark"] {` (with the opening brace) is used
- * rather than just the selector string, because the file's header comment
- * also mentions `:root[data-theme="dark"]` in prose — and a bare `indexOf`
- * would find that first and then latch onto the wrong opening brace.
- */
-async function readDarkTokens(): Promise<TokenMap> {
-  const css = await readFile(THEME_CSS, "utf8");
-  const marker = ':root[data-theme="dark"] {';
-  const start = css.indexOf(marker);
-  if (start === -1) throw new Error(`${THEME_CSS}: no dark theme block found.`);
-
-  const openBrace = start + marker.length - 1;
-  if (openBrace === -1) throw new Error(`${THEME_CSS}: dark theme block has no opening brace.`);
-
-  let depth = 0;
-  let end = -1;
-  for (let i = openBrace; i < css.length; i++) {
-    if (css[i] === "{") depth++;
-    else if (css[i] === "}") {
-      depth--;
-      if (depth === 0) {
-        end = i;
-        break;
-      }
-    }
-  }
-  if (end === -1) throw new Error(`${THEME_CSS}: dark theme block is never closed.`);
-
-  return extractDeclarations(css.slice(openBrace + 1, end));
-}
-
-// ---- Colour math ------------------------------------------------------------
-
-interface Rgb {
-  readonly r: number;
-  readonly g: number;
-  readonly b: number;
-  readonly a: number;
-}
-
-/**
- * Parse `hsl(H S% L%)` and the `/ alpha` form. Returns null for values
- * that are not a single HSL colour (shadows, durations, etc.).
- */
-function parseHsl(value: string): Rgb | null {
-  const match =
-    /^hsl\(\s*(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*\)$/.exec(value) ??
-    /^hsl\(\s*(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*\/\s*(\d+(?:\.\d+)?)%\s*\)$/.exec(
-      value,
-    );
-  if (!match) return null;
-  const h = Number(match[1]);
-  const s = Number(match[2]) / 100;
-  const l = Number(match[3]) / 100;
-  const a = match[4] === undefined ? 1 : Number(match[4]) / 100;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const hPrime = h / 60;
-  const x = c * (1 - Math.abs((hPrime % 2) - 1));
-  const m = l - c / 2;
-  let rgb: [number, number, number];
-  if (hPrime < 1) rgb = [c, x, 0];
-  else if (hPrime < 2) rgb = [x, c, 0];
-  else if (hPrime < 3) rgb = [0, c, x];
-  else if (hPrime < 4) rgb = [0, x, c];
-  else if (hPrime < 5) rgb = [x, 0, c];
-  else rgb = [c, 0, x];
-  return {
-    r: Math.round((rgb[0] + m) * 255),
-    g: Math.round((rgb[1] + m) * 255),
-    b: Math.round((rgb[2] + m) * 255),
-    a,
-  };
-}
-
-function linear(v: number): number {
-  return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-}
-
-function luminance(c: Rgb): number {
-  return 0.2126 * linear(c.r / 255) + 0.7152 * linear(c.g / 255) + 0.0722 * linear(c.b / 255);
-}
-
-function contrastRatio(a: Rgb, b: Rgb): number {
-  const la = luminance(a);
-  const lb = luminance(b);
-  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
-}
-
-/**
- * Resolve a token name to an opaque HSL colour, or throw. A missing or
- * non-HSL token is a structural defect the test must not silently skip.
- */
-function colorOf(tokens: TokenMap, name: string, theme: string): Rgb {
-  const value = tokens.get(name);
-  const color = value === undefined ? null : parseHsl(value);
-  if (!color) throw new Error(`"${name}" is not an opaque hsl token in the ${theme} theme`);
-  if (color.a !== 1) throw new Error(`"${name}" carries an alpha; its ratio depends on the page`);
-  return color;
-}
-
-// ---- Contrast floors --------------------------------------------------------
-
-/** WCAG 1.4.3 AA for normal text. */
-const TEXT_FLOOR = 4.5;
-/** WCAG 1.4.11 AA for graphical objects and UI components. */
-const GRAPHICAL_FLOOR = 3;
-
-// ---- Pairings to verify -----------------------------------------------------
-// Each pairing names a foreground (text/graphical) token against a background
-// token. The same pairs are checked for both themes.
-
-interface Pairing {
-  readonly fg: string;
-  readonly bg: string;
-  readonly floor: number;
-  readonly label: string;
-}
-
-const TEXT_PAIRINGS: Pairing[] = [
-  // Structural text-on-background
-  { fg: "color-foreground", bg: "color-background", floor: TEXT_FLOOR, label: "body text" },
-  { fg: "color-foreground", bg: "color-card", floor: TEXT_FLOOR, label: "card text" },
-  { fg: "color-foreground", bg: "color-popover", floor: TEXT_FLOOR, label: "popover text" },
-  {
-    fg: "color-card-foreground",
-    bg: "color-card",
-    floor: TEXT_FLOOR,
-    label: "card-foreground on card",
-  },
-  {
-    fg: "color-popover-foreground",
-    bg: "color-popover",
-    floor: TEXT_FLOOR,
-    label: "popover-foreground on popover",
-  },
-  {
-    fg: "color-muted-foreground",
-    bg: "color-background",
-    floor: TEXT_FLOOR,
-    label: "secondary text",
-  },
-  {
-    fg: "color-muted-foreground",
-    bg: "color-card",
-    floor: TEXT_FLOOR,
-    label: "secondary text on card",
-  },
-  {
-    fg: "color-muted-foreground",
-    bg: "color-muted",
-    floor: TEXT_FLOOR,
-    label: "secondary text on muted",
-  },
-  { fg: "color-subtle-foreground", bg: "color-subtle", floor: TEXT_FLOOR, label: "subtle text" },
-  {
-    fg: "color-secondary-foreground",
-    bg: "color-secondary",
-    floor: TEXT_FLOOR,
-    label: "secondary text on secondary",
-  },
-
-  // Action colour labels
-  {
-    fg: "color-primary-foreground",
-    bg: "color-primary",
-    floor: TEXT_FLOOR,
-    label: "primary button label",
-  },
-  {
-    fg: "color-accent-foreground",
-    bg: "color-accent",
-    floor: TEXT_FLOOR,
-    label: "accent button label",
-  },
-
-  // Functional colour labels
-  {
-    fg: "color-destructive-foreground",
-    bg: "color-destructive",
-    floor: TEXT_FLOOR,
-    label: "destructive button label",
-  },
-  {
-    fg: "color-success-foreground",
-    bg: "color-success",
-    floor: TEXT_FLOOR,
-    label: "success label",
-  },
-  {
-    fg: "color-warning-foreground",
-    bg: "color-warning",
-    floor: TEXT_FLOOR,
-    label: "warning label",
-  },
-  { fg: "color-info-foreground", bg: "color-info", floor: TEXT_FLOOR, label: "info label" },
-
-  // Text on muted surfaces (foreground token, which should always be readable)
-  {
-    fg: "color-foreground",
-    bg: "color-primary-muted",
-    floor: TEXT_FLOOR,
-    label: "text on primary-muted",
-  },
-  {
-    fg: "color-foreground",
-    bg: "color-destructive-muted",
-    floor: TEXT_FLOOR,
-    label: "text on destructive-muted",
-  },
-  {
-    fg: "color-foreground",
-    bg: "color-success-muted",
-    floor: TEXT_FLOOR,
-    label: "text on success-muted",
-  },
-  {
-    fg: "color-foreground",
-    bg: "color-warning-muted",
-    floor: TEXT_FLOOR,
-    label: "text on warning-muted",
-  },
-  {
-    fg: "color-foreground",
-    bg: "color-info-muted",
-    floor: TEXT_FLOOR,
-    label: "text on info-muted",
-  },
-];
-
-const GRAPHICAL_PAIRINGS: Pairing[] = [
-  // Graphical-object tokens
-  {
-    fg: "color-muted-foreground-soft",
-    bg: "color-background",
-    floor: GRAPHICAL_FLOOR,
-    label: "muted-soft on background",
-  },
-  {
-    fg: "color-muted-foreground-soft",
-    bg: "color-card",
-    floor: GRAPHICAL_FLOOR,
-    label: "muted-soft on card",
-  },
-
-  // Functional colours as graphical indicators on their surfaces
-  {
-    fg: "color-primary",
-    bg: "color-background",
-    floor: GRAPHICAL_FLOOR,
-    label: "primary indicator",
-  },
-  { fg: "color-accent", bg: "color-background", floor: GRAPHICAL_FLOOR, label: "accent indicator" },
-  {
-    fg: "color-destructive",
-    bg: "color-background",
-    floor: GRAPHICAL_FLOOR,
-    label: "destructive indicator",
-  },
-  {
-    fg: "color-success",
-    bg: "color-background",
-    floor: GRAPHICAL_FLOOR,
-    label: "success indicator",
-  },
-  {
-    fg: "color-warning",
-    bg: "color-background",
-    floor: GRAPHICAL_FLOOR,
-    label: "warning indicator",
-  },
-  { fg: "color-info", bg: "color-background", floor: GRAPHICAL_FLOOR, label: "info indicator" },
-
-  // Focus ring
-  { fg: "color-ring", bg: "color-background", floor: GRAPHICAL_FLOOR, label: "focus ring" },
-
-  // Functional hues on their own muted surface (icons, indicators)
-  {
-    fg: "color-primary",
-    bg: "color-primary-muted",
-    floor: GRAPHICAL_FLOOR,
-    label: "primary on primary-muted",
-  },
-  {
-    fg: "color-accent",
-    bg: "color-accent-muted",
-    floor: GRAPHICAL_FLOOR,
-    label: "accent on accent-muted",
-  },
-  {
-    fg: "color-destructive",
-    bg: "color-destructive-muted",
-    floor: GRAPHICAL_FLOOR,
-    label: "destructive on destructive-muted",
-  },
-  {
-    fg: "color-success",
-    bg: "color-success-muted",
-    floor: GRAPHICAL_FLOOR,
-    label: "success on success-muted",
-  },
-  {
-    fg: "color-warning",
-    bg: "color-warning-muted",
-    floor: GRAPHICAL_FLOOR,
-    label: "warning on warning-muted",
-  },
-  { fg: "color-info", bg: "color-info-muted", floor: GRAPHICAL_FLOOR, label: "info on info-muted" },
-];
-
-const ALL_PAIRINGS = [...TEXT_PAIRINGS, ...GRAPHICAL_PAIRINGS];
-
-// ---- Tests ------------------------------------------------------------------
-
-describe("Light theme contrast", () => {
-  it("meets the contrast floor for every structural pairing", async () => {
-    const tokens = await readLightTokens();
-    for (const { fg, bg, floor, label } of ALL_PAIRINGS) {
-      const fgColor = colorOf(tokens, fg, "light");
-      const bgColor = colorOf(tokens, bg, "light");
-      const cr = contrastRatio(fgColor, bgColor);
-      expect(
-        cr,
-        `${label}: ${fg} on ${bg} = ${cr.toFixed(2)}:1 (needs ${String(floor)})`,
-      ).toBeGreaterThanOrEqual(floor);
-    }
-  });
-});
-
-describe("Dark theme contrast", () => {
-  it("meets the contrast floor for every structural pairing", async () => {
-    const tokens = await readDarkTokens();
-    for (const { fg, bg, floor, label } of ALL_PAIRINGS) {
-      const fgColor = colorOf(tokens, fg, "dark");
-      const bgColor = colorOf(tokens, bg, "dark");
-      const cr = contrastRatio(fgColor, bgColor);
-      expect(
-        cr,
-        `${label}: ${fg} on ${bg} = ${cr.toFixed(2)}:1 (needs ${String(floor)})`,
-      ).toBeGreaterThanOrEqual(floor);
-    }
-  });
-});
-
-describe("Elevation hierarchy", () => {
-  it("light: sunken < background < card <= popover (by lightness)", async () => {
-    const tokens = await readLightTokens();
-    // In light mode, higher elevation = higher lightness
-    const sunkenL = luminance(colorOf(tokens, "color-sunken", "light"));
-    const backgroundL = luminance(colorOf(tokens, "color-background", "light"));
-    const cardL = luminance(colorOf(tokens, "color-card", "light"));
-    const popoverL = luminance(colorOf(tokens, "color-popover", "light"));
-    expect(sunkenL, "sunken < background").toBeLessThan(backgroundL);
-    expect(backgroundL, "background < card").toBeLessThan(cardL);
-    expect(cardL, "card <= popover").toBeLessThanOrEqual(popoverL);
-  });
-
-  it("dark: sunken < background < card < popover (by lightness)", async () => {
-    const tokens = await readDarkTokens();
-    // In dark mode, higher elevation = higher lightness (lighter background)
-    const sunkenL = luminance(colorOf(tokens, "color-sunken", "dark"));
-    const backgroundL = luminance(colorOf(tokens, "color-background", "dark"));
-    const cardL = luminance(colorOf(tokens, "color-card", "dark"));
-    const popoverL = luminance(colorOf(tokens, "color-popover", "dark"));
-    expect(sunkenL, "sunken < background").toBeLessThan(backgroundL);
-    expect(backgroundL, "background < card").toBeLessThan(cardL);
-    expect(cardL, "card < popover").toBeLessThan(popoverL);
-  });
-});
-
-describe("Text prominence hierarchy", () => {
-  it("light: muted-foreground-soft < muted-foreground < foreground (by luminance)", async () => {
-    const tokens = await readLightTokens();
-    // In light mode, less prominent text = higher luminance (lighter on light)
-    const softL = luminance(colorOf(tokens, "color-muted-foreground-soft", "light"));
-    const mutedL = luminance(colorOf(tokens, "color-muted-foreground", "light"));
-    const fgL = luminance(colorOf(tokens, "color-foreground", "light"));
-    expect(softL, "soft > muted (lighter = less prominent)").toBeGreaterThan(mutedL);
-    expect(mutedL, "muted > foreground (lighter = less prominent)").toBeGreaterThan(fgL);
-  });
-
-  it("dark: muted-foreground-soft < muted-foreground < foreground (by luminance)", async () => {
-    const tokens = await readDarkTokens();
-    // In dark mode, less prominent text = lower luminance (darker on dark)
-    const softL = luminance(colorOf(tokens, "color-muted-foreground-soft", "dark"));
-    const mutedL = luminance(colorOf(tokens, "color-muted-foreground", "dark"));
-    const fgL = luminance(colorOf(tokens, "color-foreground", "dark"));
-    expect(softL, "soft < muted (darker = less prominent)").toBeLessThan(mutedL);
-    expect(mutedL, "muted < foreground (darker = less prominent)").toBeLessThan(fgL);
-  });
-});
-
-describe("Border visibility hierarchy", () => {
-  it("light: border < input < border-strong (by luminance)", async () => {
-    const tokens = await readLightTokens();
-    // In light mode, more visible border = lower luminance (darker on light)
-    const borderL = luminance(colorOf(tokens, "color-border", "light"));
-    const inputL = luminance(colorOf(tokens, "color-input", "light"));
-    const strongL = luminance(colorOf(tokens, "color-border-strong", "light"));
-    expect(borderL, "border > input (lighter = less visible)").toBeGreaterThan(inputL);
-    expect(inputL, "input > strong (lighter = less visible)").toBeGreaterThan(strongL);
-  });
-
-  it("dark: border < input < border-strong (by luminance)", async () => {
-    const tokens = await readDarkTokens();
-    // In dark mode, more visible border = higher luminance (lighter on dark)
-    const borderL = luminance(colorOf(tokens, "color-border", "dark"));
-    const inputL = luminance(colorOf(tokens, "color-input", "dark"));
-    const strongL = luminance(colorOf(tokens, "color-border-strong", "dark"));
-    expect(borderL, "border < input (darker = less visible)").toBeLessThan(inputL);
-    expect(inputL, "input < strong (darker = less visible)").toBeLessThan(strongL);
-  });
-});

package/dist/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../src/lib/theme.ts"],"sourcesContent":["/**\n * Theme switching for Loom.\n *\n * The single source of truth is the `data-theme` attribute on `<html>`.\n * This composable reads and writes it, persists the preference to\n * `localStorage`, and resolves `\"system\"` mode from the OS preference.\n *\n * SSR-safe: every DOM access is guarded. On the server, `theme` returns\n * the persisted or default preference, `resolvedTheme` resolves `\"system\"`\n * to `\"light\"` (the only safe default without a DOM), and the setter and\n * toggler are no-ops.\n *\n * Flash prevention: `themeScript` is a string of inline JavaScript that\n * reads `localStorage` and sets `data-theme` before the first paint.\n * Consumers rendering SSR inject it into `<head>`:\n *\n *   <script>${themeScript}</script>\n */\n\nimport { type Ref, computed, onScopeDispose, ref, watch } from \"vue\";\n\n/** The preference a user expresses — `\"system\"` defers to the OS. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\n/** The actual theme applied — `\"system\"` is resolved away. */\nexport type ResolvedTheme = \"light\" | \"dark\";\n\nconst STORAGE_KEY = \"loom:theme\";\nconst DATA_ATTR = \"data-theme\";\nconst MEDIA_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Default preference when nothing is stored and no OS signal exists. */\nconst DEFAULT_PREFERENCE: ThemePreference = \"system\";\n\n// --- Shared state (one per Vue app, not one per composable call) ---------\n\ninterface ThemeState {\n  preference: Ref<ThemePreference>;\n  systemIsDark: Ref<boolean>;\n  mediaQuery: MediaQueryList | null;\n  listener: ((e: MediaQueryListEvent) => void) | null;\n  scopeCount: number;\n}\n\n/**\n * Reactive shared state, lazily initialised on the first `useTheme()` call\n * and torn down with the effect scope that owns it. Multiple components\n * calling `useTheme()` in the same app share the same refs and the same\n * `matchMedia` listener.\n */\nlet sharedState: ThemeState | null = null;\n\n/**\n * Reset the shared state. Intended for test isolation only — a real app\n * never needs this because the state lives for the app's lifetime.\n */\nexport function _resetThemeState(): void {\n  if (sharedState?.mediaQuery && sharedState.listener) {\n    sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n  }\n  sharedState = null;\n}\n\nfunction getSharedState(): ThemeState {\n  if (sharedState) {\n    sharedState.scopeCount++;\n    return sharedState;\n  }\n\n  // Read the stored preference, defaulting to \"system\".\n  let stored: ThemePreference = DEFAULT_PREFERENCE;\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (raw === \"light\" || raw === \"dark\" || raw === \"system\") {\n      stored = raw;\n    }\n  } catch {\n    // localStorage may be unavailable (SSR, private browsing).\n  }\n\n  // Apply the initial theme to the DOM so the very first render is correct.\n  const initial = resolveTheme(stored, getSystemIsDark());\n  applyToDOM(initial);\n\n  const preference = ref<ThemePreference>(stored);\n  const systemIsDark = ref<boolean>(getSystemIsDark());\n\n  // Listen for OS dark-mode changes.\n  let mediaQuery: MediaQueryList | null = null;\n  let listener: ((e: MediaQueryListEvent) => void) | null = null;\n\n  try {\n    mediaQuery = window.matchMedia(MEDIA_QUERY);\n    listener = (e: MediaQueryListEvent) => {\n      systemIsDark.value = e.matches;\n    };\n    mediaQuery.addEventListener(\"change\", listener);\n  } catch {\n    // matchMedia may be unavailable.\n  }\n\n  sharedState = {\n    preference,\n    systemIsDark,\n    mediaQuery,\n    listener,\n    scopeCount: 1,\n  };\n\n  return sharedState;\n}\n\nfunction releaseSharedState(): void {\n  if (!sharedState) return;\n  sharedState.scopeCount--;\n  if (sharedState.scopeCount > 0) return;\n\n  // Last consumer gone — tear down the listener.\n  if (sharedState.mediaQuery && sharedState.listener) {\n    sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n  }\n  sharedState = null;\n}\n\n// --- DOM helpers --------------------------------------------------------\n\nfunction getSystemIsDark(): boolean {\n  try {\n    return window.matchMedia(MEDIA_QUERY).matches;\n  } catch {\n    return false;\n  }\n}\n\nfunction resolveTheme(pref: ThemePreference, systemDark: boolean): ResolvedTheme {\n  return pref === \"system\" ? (systemDark ? \"dark\" : \"light\") : pref;\n}\n\nfunction applyToDOM(theme: ResolvedTheme): void {\n  try {\n    document.documentElement.setAttribute(DATA_ATTR, theme);\n  } catch {\n    // document may be unavailable (SSR).\n  }\n}\n\nfunction persist(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(STORAGE_KEY, preference);\n  } catch {\n    // localStorage may be unavailable.\n  }\n}\n\n// --- Public API ---------------------------------------------------------\n\n/**\n * Read and control the active Loom theme.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTheme } from \"@ecoma-io/loom/theme\"\n * const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()\n * </script>\n *\n * <template>\n *   <button @click=\"toggleTheme\">\n *     {{ resolvedTheme === \"dark\" ? \"☀️\" : \"🌙\" }}\n *   </button>\n * </template>\n * ```\n */\nexport function useTheme(): {\n  readonly theme: Ref<ThemePreference>;\n  readonly resolvedTheme: Readonly<Ref<ResolvedTheme>>;\n  readonly setTheme: (preference: ThemePreference) => void;\n  readonly toggleTheme: () => void;\n} {\n  const state = getSharedState();\n\n  // Clean up the shared listener when the consuming scope disposes.\n  onScopeDispose(releaseSharedState);\n\n  /** The user's preference — `\"system\"` defers to the OS. */\n  const theme = computed<ThemePreference>({\n    get: () => state.preference.value,\n    set: (value: ThemePreference) => {\n      state.preference.value = value;\n    },\n  });\n\n  /** The actual active theme, with `\"system\"` resolved to `\"light\"` or `\"dark\"`. */\n  const resolvedTheme = computed<ResolvedTheme>(() =>\n    resolveTheme(state.preference.value, state.systemIsDark.value),\n  );\n\n  // Whenever the preference or the OS signal changes, apply the resolved\n  // theme to the DOM and persist the preference.\n  watch([() => state.preference.value, () => state.systemIsDark.value], () => {\n    applyToDOM(resolvedTheme.value);\n    persist(state.preference.value);\n  });\n\n  /** Set the theme preference explicitly. */\n  function setTheme(preference: ThemePreference): void {\n    state.preference.value = preference;\n  }\n\n  /** Toggle between light and dark. System preference stays system. */\n  function toggleTheme(): void {\n    if (state.preference.value === \"system\") {\n      // Toggle the resolved theme and lock to it, so the user can override\n      // the OS preference with one click.\n      state.preference.value = resolvedTheme.value === \"dark\" ? \"light\" : \"dark\";\n    } else {\n      state.preference.value = state.preference.value === \"dark\" ? \"light\" : \"dark\";\n    }\n  }\n\n  return { theme, resolvedTheme, setTheme, toggleTheme } as const;\n}\n\n/**\n * Inline script to prevent flash-of-wrong-theme on SSR pages.\n *\n * Paste it into `<head>` before any stylesheet links:\n *\n * ```html\n * <script><%= themeScript %></script>\n * ```\n *\n * It reads `localStorage` and sets `data-theme` on `<html>` synchronously,\n * before the browser paints, so the first frame is already in the right\n * theme. When no preference is stored, it follows the OS preference.\n *\n * The script is deliberately tiny and has no dependencies.\n */\nexport const themeScript = `(() => {\n  const t = localStorage.getItem(\"${STORAGE_KEY}\");\n  const d = window.matchMedia(\"${MEDIA_QUERY}\").matches;\n  document.documentElement.setAttribute(\"${DATA_ATTR}\", (t === \"dark\" || (!t && d)) ? \"dark\" : \"light\");\n})()`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,cAAc;;AAGpB,IAAM,qBAAsC;;;;;;;AAkB5C,IAAI,cAAiC;;;;;AAMrC,SAAgB,mBAAyB;CACvC,IAAI,aAAa,cAAc,YAAY,UACzC,YAAY,WAAW,oBAAoB,UAAU,YAAY,QAAQ;CAE3E,cAAc;AAChB;AAEA,SAAS,iBAA6B;CACpC,IAAI,aAAa;EACf,YAAY;EACZ,OAAO;CACT;CAGA,IAAI,SAA0B;CAC9B,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,WAAW;EAC5C,IAAI,QAAQ,WAAW,QAAQ,UAAU,QAAQ,UAC/C,SAAS;CAEb,QAAQ,CAER;CAIA,WADgB,aAAa,QAAQ,gBAAgB,CAC1C,CAAO;CAElB,MAAM,aAAa,IAAqB,MAAM;CAC9C,MAAM,eAAe,IAAa,gBAAgB,CAAC;CAGnD,IAAI,aAAoC;CACxC,IAAI,WAAsD;CAE1D,IAAI;EACF,aAAa,OAAO,WAAW,WAAW;EAC1C,YAAY,MAA2B;GACrC,aAAa,QAAQ,EAAE;EACzB;EACA,WAAW,iBAAiB,UAAU,QAAQ;CAChD,QAAQ,CAER;CAEA,cAAc;EACZ;EACA;EACA;EACA;EACA,YAAY;CACd;CAEA,OAAO;AACT;AAEA,SAAS,qBAA2B;CAClC,IAAI,CAAC,aAAa;CAClB,YAAY;CACZ,IAAI,YAAY,aAAa,GAAG;CAGhC,IAAI,YAAY,cAAc,YAAY,UACxC,YAAY,WAAW,oBAAoB,UAAU,YAAY,QAAQ;CAE3E,cAAc;AAChB;AAIA,SAAS,kBAA2B;CAClC,IAAI;EACF,OAAO,OAAO,WAAW,WAAW,CAAC,CAAC;CACxC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,aAAa,MAAuB,YAAoC;CAC/E,OAAO,SAAS,WAAY,aAAa,SAAS,UAAW;AAC/D;AAEA,SAAS,WAAW,OAA4B;CAC9C,IAAI;EACF,SAAS,gBAAgB,aAAa,WAAW,KAAK;CACxD,QAAQ,CAER;AACF;AAEA,SAAS,QAAQ,YAAmC;CAClD,IAAI;EACF,aAAa,QAAQ,aAAa,UAAU;CAC9C,QAAQ,CAER;AACF;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,WAKd;CACA,MAAM,QAAQ,eAAe;CAG7B,eAAe,kBAAkB;;CAGjC,MAAM,QAAQ,SAA0B;EACtC,WAAW,MAAM,WAAW;EAC5B,MAAM,UAA2B;GAC/B,MAAM,WAAW,QAAQ;EAC3B;CACF,CAAC;;CAGD,MAAM,gBAAgB,eACpB,aAAa,MAAM,WAAW,OAAO,MAAM,aAAa,KAAK,CAC/D;CAIA,MAAM,OAAO,MAAM,WAAW,aAAa,MAAM,aAAa,KAAK,SAAS;EAC1E,WAAW,cAAc,KAAK;EAC9B,QAAQ,MAAM,WAAW,KAAK;CAChC,CAAC;;CAGD,SAAS,SAAS,YAAmC;EACnD,MAAM,WAAW,QAAQ;CAC3B;;CAGA,SAAS,cAAoB;EAC3B,IAAI,MAAM,WAAW,UAAU,UAG7B,MAAM,WAAW,QAAQ,cAAc,UAAU,SAAS,UAAU;OAEpE,MAAM,WAAW,QAAQ,MAAM,WAAW,UAAU,SAAS,UAAU;CAE3E;CAEA,OAAO;EAAE;EAAO;EAAe;EAAU;CAAY;AACvD;;;;;;;;;;;;;;;;AAiBA,IAAa,cAAc;oCACS,YAAY;iCACf,YAAY;2CACF,UAAU"}