@ox-content/vite-plugin 3.0.0-alpha.9 → 3.0.0-beta.0

package/dist/theme-tokens.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderThemeTokenCss = renderThemeTokenCss;
+exports.tokensToCss = tokensToCss;
+const TOKEN_PREFIX = "--octc-";
+const TOKEN_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
+/**
+ * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
+ *
+ * The built-in SSG emits these declarations itself, but `ssg.bare: true` and
+ * custom hosts render their own document — this is how they get the same
+ * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so
+ * a bare host that wants only the highlighter palette can ask for it:
+ *
+ * ```ts
+ * import { renderThemeTokenCss } from "@ox-content/vite-plugin/theme-tokens";
+ * import { kanagawa } from "@ox-content/theme-color-kanagawa";
+ *
+ * const css = renderThemeTokenCss(kanagawa, {
+ *   include: (name) => name.startsWith("syntax-"),
+ * });
+ * ```
+ *
+ * Layers compose left to right and each layer's `extends` chain is flattened
+ * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
+ */
+function renderThemeTokenCss(theme, options = {}) {
+    const layers = (Array.isArray(theme) ? theme : [theme]).flatMap(expandExtendsChain);
+    return tokensToCss(mergeTokens(layers, "tokens", options.include), mergeTokens(layers, "darkTokens", options.include));
+}
+/**
+ * Renders light and dark token records as the three selectors the SSG runtime
+ * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
+ * `prefers-color-scheme` fallback, and the `:root` base.
+ *
+ * Emitted after the typed color variables and before the theme's own `css`, so
+ * a token can override a typed color and raw `css` can override a token.
+ */
+function tokensToCss(light, dark) {
+    const lightBody = declarations(light, "  ");
+    const darkBody = declarations(dark, "  ");
+    const blocks = [];
+    if (lightBody) {
+        blocks.push(`:root {\n${lightBody}\n}`);
+    }
+    if (darkBody) {
+        blocks.push(`[data-theme="dark"] {\n${darkBody}\n}`);
+        blocks.push(`@media (prefers-color-scheme: dark) {\n  :root:not([data-theme="light"]) {\n${declarations(dark, "    ")}\n  }\n}`);
+    }
+    return blocks.join("\n");
+}
+function declarations(tokens, indent) {
+    return Object.entries(tokens)
+        .filter(([, value]) => value !== undefined && value !== "")
+        .map(([name, value]) => `${indent}${TOKEN_PREFIX}${assertTokenName(name)}: ${value};`)
+        .join("\n");
+}
+function assertTokenName(name) {
+    // Token names land verbatim inside a declaration block, so a stray `:` or `}`
+    // would silently break every rule after it. Fail the build with the offending
+    // key instead of shipping a corrupt stylesheet.
+    if (!TOKEN_NAME_PATTERN.test(name)) {
+        throw new Error(`Invalid theme token name: ${JSON.stringify(name)}. ` +
+            `Token names are lowercase kebab-case without the "${TOKEN_PREFIX}" prefix (e.g. "surface-glass").`);
+    }
+    return name;
+}
+function mergeTokens(layers, field, include) {
+    const merged = {};
+    for (const layer of layers) {
+        for (const [name, value] of Object.entries(layer[field] ?? {})) {
+            if (!include || include(name)) {
+                merged[name] = value;
+            }
+        }
+    }
+    return merged;
+}
+/**
+ * Flattens one layer's `extends` chain into base-first order, mirroring the
+ * SSG's own resolution. The `seen` guard keeps a theme that extends itself (or
+ * forms a cycle across two packages) from hanging the caller.
+ */
+function expandExtendsChain(theme) {
+    const chain = [];
+    const seen = new Set();
+    let current = theme;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        chain.unshift(current);
+        current = current.extends;
+    }
+    return chain;
+}
+//# sourceMappingURL=theme-tokens.cjs.map

package/dist/theme-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.cjs","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Free-form `--octc-*` custom properties for themes that need more than the\n * typed `colors` / `fonts` / `layout` fields.\n *\n * Keys are written **without** the `--octc-` prefix, so `\"surface-glass\"`\n * becomes `--octc-surface-glass`. This is the seam that keeps the two theme\n * axes independent: a color package can restyle code-block line markers, brand\n * accents, and surface textures purely through tokens, while a skin package\n * lays out geometry against those same tokens without knowing any color.\n */\nexport type ThemeTokens = Record<string, string>;\n\nconst TOKEN_PREFIX = \"--octc-\";\nconst TOKEN_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;\n\n/**\n * The token-bearing shape of a theme.\n *\n * Declared structurally instead of importing `ThemeConfig` so this module keeps\n * an empty import graph: `@ox-content/vite-plugin/theme-tokens` has to be\n * loadable by a bare (`ssg.bare: true`) or custom host that never pulls in the\n * Vite plugin, the SSG, the native binding, or a filesystem API. Every\n * `ThemeConfig` — including the published `@ox-content/theme-color-*` and\n * `@ox-content/theme-*` packages — satisfies it.\n */\nexport interface ThemeTokenSource {\n  tokens?: ThemeTokens;\n  darkTokens?: ThemeTokens;\n  extends?: ThemeTokenSource;\n}\n\n/**\n * Options for {@link renderThemeTokenCss}.\n */\nexport interface RenderThemeTokenCssOptions {\n  /**\n   * Keeps only the tokens whose name passes the predicate. Names arrive without\n   * the `--octc-` prefix, so `(name) => name.startsWith(\"syntax-\")` reuses a\n   * color scheme's highlighter palette without adopting its page colors,\n   * typography, or layout policy.\n   *\n   * Filtering runs per layer, before merging, so a token a later layer would\n   * have overridden is dropped along with the override.\n   */\n  include?: (name: string) => boolean;\n}\n\n/**\n * Renders a theme's `--octc-*` tokens as a standalone stylesheet.\n *\n * The built-in SSG emits these declarations itself, but `ssg.bare: true` and\n * custom hosts render their own document — this is how they get the same\n * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so\n * a bare host that wants only the highlighter palette can ask for it:\n *\n * ```ts\n * import { renderThemeTokenCss } from \"@ox-content/vite-plugin/theme-tokens\";\n * import { kanagawa } from \"@ox-content/theme-color-kanagawa\";\n *\n * const css = renderThemeTokenCss(kanagawa, {\n *   include: (name) => name.startsWith(\"syntax-\"),\n * });\n * ```\n *\n * Layers compose left to right and each layer's `extends` chain is flattened\n * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.\n */\nexport function renderThemeTokenCss(\n  theme: ThemeTokenSource | ThemeTokenSource[],\n  options: RenderThemeTokenCssOptions = {},\n): string {\n  const layers = (Array.isArray(theme) ? theme : [theme]).flatMap(expandExtendsChain);\n  return tokensToCss(\n    mergeTokens(layers, \"tokens\", options.include),\n    mergeTokens(layers, \"darkTokens\", options.include),\n  );\n}\n\n/**\n * Renders light and dark token records as the three selectors the SSG runtime\n * switches between: an explicit `[data-theme=\"dark\"]` opt-in, the OS\n * `prefers-color-scheme` fallback, and the `:root` base.\n *\n * Emitted after the typed color variables and before the theme's own `css`, so\n * a token can override a typed color and raw `css` can override a token.\n */\nexport function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string {\n  const lightBody = declarations(light, \"  \");\n  const darkBody = declarations(dark, \"  \");\n  const blocks: string[] = [];\n\n  if (lightBody) {\n    blocks.push(`:root {\\n${lightBody}\\n}`);\n  }\n  if (darkBody) {\n    blocks.push(`[data-theme=\"dark\"] {\\n${darkBody}\\n}`);\n    blocks.push(\n      `@media (prefers-color-scheme: dark) {\\n  :root:not([data-theme=\"light\"]) {\\n${declarations(dark, \"    \")}\\n  }\\n}`,\n    );\n  }\n\n  return blocks.join(\"\\n\");\n}\n\nfunction declarations(tokens: ThemeTokens, indent: string): string {\n  return Object.entries(tokens)\n    .filter(([, value]) => value !== undefined && value !== \"\")\n    .map(([name, value]) => `${indent}${TOKEN_PREFIX}${assertTokenName(name)}: ${value};`)\n    .join(\"\\n\");\n}\n\nfunction assertTokenName(name: string): string {\n  // Token names land verbatim inside a declaration block, so a stray `:` or `}`\n  // would silently break every rule after it. Fail the build with the offending\n  // key instead of shipping a corrupt stylesheet.\n  if (!TOKEN_NAME_PATTERN.test(name)) {\n    throw new Error(\n      `Invalid theme token name: ${JSON.stringify(name)}. ` +\n        `Token names are lowercase kebab-case without the \"${TOKEN_PREFIX}\" prefix (e.g. \"surface-glass\").`,\n    );\n  }\n  return name;\n}\n\nfunction mergeTokens(\n  layers: ThemeTokenSource[],\n  field: \"tokens\" | \"darkTokens\",\n  include?: (name: string) => boolean,\n): ThemeTokens {\n  const merged: ThemeTokens = {};\n\n  for (const layer of layers) {\n    for (const [name, value] of Object.entries(layer[field] ?? {})) {\n      if (!include || include(name)) {\n        merged[name] = value;\n      }\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Flattens one layer's `extends` chain into base-first order, mirroring the\n * SSG's own resolution. The `seen` guard keeps a theme that extends itself (or\n * forms a cycle across two packages) from hanging the caller.\n */\nfunction expandExtendsChain(theme: ThemeTokenSource): ThemeTokenSource[] {\n  const chain: ThemeTokenSource[] = [];\n  const seen = new Set<ThemeTokenSource>();\n  let current: ThemeTokenSource | undefined = theme;\n\n  while (current && !seen.has(current)) {\n    seen.add(current);\n    chain.unshift(current);\n    current = current.extends;\n  }\n\n  return chain;\n}\n"]}

package/dist/theme-tokens.d.cts

@@ -0,0 +1,72 @@
+/**
+ * Free-form `--octc-*` custom properties for themes that need more than the
+ * typed `colors` / `fonts` / `layout` fields.
+ *
+ * Keys are written **without** the `--octc-` prefix, so `"surface-glass"`
+ * becomes `--octc-surface-glass`. This is the seam that keeps the two theme
+ * axes independent: a color package can restyle code-block line markers, brand
+ * accents, and surface textures purely through tokens, while a skin package
+ * lays out geometry against those same tokens without knowing any color.
+ */
+export type ThemeTokens = Record<string, string>;
+/**
+ * The token-bearing shape of a theme.
+ *
+ * Declared structurally instead of importing `ThemeConfig` so this module keeps
+ * an empty import graph: `@ox-content/vite-plugin/theme-tokens` has to be
+ * loadable by a bare (`ssg.bare: true`) or custom host that never pulls in the
+ * Vite plugin, the SSG, the native binding, or a filesystem API. Every
+ * `ThemeConfig` — including the published `@ox-content/theme-color-*` and
+ * `@ox-content/theme-*` packages — satisfies it.
+ */
+export interface ThemeTokenSource {
+    tokens?: ThemeTokens;
+    darkTokens?: ThemeTokens;
+    extends?: ThemeTokenSource;
+}
+/**
+ * Options for {@link renderThemeTokenCss}.
+ */
+export interface RenderThemeTokenCssOptions {
+    /**
+     * Keeps only the tokens whose name passes the predicate. Names arrive without
+     * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
+     * color scheme's highlighter palette without adopting its page colors,
+     * typography, or layout policy.
+     *
+     * Filtering runs per layer, before merging, so a token a later layer would
+     * have overridden is dropped along with the override.
+     */
+    include?: (name: string) => boolean;
+}
+/**
+ * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
+ *
+ * The built-in SSG emits these declarations itself, but `ssg.bare: true` and
+ * custom hosts render their own document — this is how they get the same
+ * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so
+ * a bare host that wants only the highlighter palette can ask for it:
+ *
+ * ```ts
+ * import { renderThemeTokenCss } from "@ox-content/vite-plugin/theme-tokens";
+ * import { kanagawa } from "@ox-content/theme-color-kanagawa";
+ *
+ * const css = renderThemeTokenCss(kanagawa, {
+ *   include: (name) => name.startsWith("syntax-"),
+ * });
+ * ```
+ *
+ * Layers compose left to right and each layer's `extends` chain is flattened
+ * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
+ */
+export declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
+/**
+ * Renders light and dark token records as the three selectors the SSG runtime
+ * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
+ * `prefers-color-scheme` fallback, and the `:root` base.
+ *
+ * Emitted after the typed color variables and before the theme's own `css`, so
+ * a token can override a typed color and raw `css` can override a token.
+ */
+export declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
+//# sourceMappingURL=theme-tokens.d.cts.map

package/dist/theme-tokens.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.d.cts","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAKjD;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,EAC5C,OAAO,GAAE,0BAA+B,GACvC,MAAM,CAMR;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAgBzE"}

package/dist/theme-tokens.d.mts

@@ -0,0 +1,72 @@
+/**
+ * Free-form `--octc-*` custom properties for themes that need more than the
+ * typed `colors` / `fonts` / `layout` fields.
+ *
+ * Keys are written **without** the `--octc-` prefix, so `"surface-glass"`
+ * becomes `--octc-surface-glass`. This is the seam that keeps the two theme
+ * axes independent: a color package can restyle code-block line markers, brand
+ * accents, and surface textures purely through tokens, while a skin package
+ * lays out geometry against those same tokens without knowing any color.
+ */
+export type ThemeTokens = Record<string, string>;
+/**
+ * The token-bearing shape of a theme.
+ *
+ * Declared structurally instead of importing `ThemeConfig` so this module keeps
+ * an empty import graph: `@ox-content/vite-plugin/theme-tokens` has to be
+ * loadable by a bare (`ssg.bare: true`) or custom host that never pulls in the
+ * Vite plugin, the SSG, the native binding, or a filesystem API. Every
+ * `ThemeConfig` — including the published `@ox-content/theme-color-*` and
+ * `@ox-content/theme-*` packages — satisfies it.
+ */
+export interface ThemeTokenSource {
+    tokens?: ThemeTokens;
+    darkTokens?: ThemeTokens;
+    extends?: ThemeTokenSource;
+}
+/**
+ * Options for {@link renderThemeTokenCss}.
+ */
+export interface RenderThemeTokenCssOptions {
+    /**
+     * Keeps only the tokens whose name passes the predicate. Names arrive without
+     * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
+     * color scheme's highlighter palette without adopting its page colors,
+     * typography, or layout policy.
+     *
+     * Filtering runs per layer, before merging, so a token a later layer would
+     * have overridden is dropped along with the override.
+     */
+    include?: (name: string) => boolean;
+}
+/**
+ * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
+ *
+ * The built-in SSG emits these declarations itself, but `ssg.bare: true` and
+ * custom hosts render their own document — this is how they get the same
+ * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so
+ * a bare host that wants only the highlighter palette can ask for it:
+ *
+ * ```ts
+ * import { renderThemeTokenCss } from "@ox-content/vite-plugin/theme-tokens";
+ * import { kanagawa } from "@ox-content/theme-color-kanagawa";
+ *
+ * const css = renderThemeTokenCss(kanagawa, {
+ *   include: (name) => name.startsWith("syntax-"),
+ * });
+ * ```
+ *
+ * Layers compose left to right and each layer's `extends` chain is flattened
+ * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
+ */
+export declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
+/**
+ * Renders light and dark token records as the three selectors the SSG runtime
+ * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
+ * `prefers-color-scheme` fallback, and the `:root` base.
+ *
+ * Emitted after the typed color variables and before the theme's own `css`, so
+ * a token can override a typed color and raw `css` can override a token.
+ */
+export declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
+//# sourceMappingURL=theme-tokens.d.mts.map

package/dist/theme-tokens.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.d.mts","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAKjD;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,EAC5C,OAAO,GAAE,0BAA+B,GACvC,MAAM,CAMR;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAgBzE"}

package/dist/theme-tokens.mjs

@@ -0,0 +1,91 @@
+const TOKEN_PREFIX = "--octc-";
+const TOKEN_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
+/**
+ * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
+ *
+ * The built-in SSG emits these declarations itself, but `ssg.bare: true` and
+ * custom hosts render their own document — this is how they get the same
+ * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so
+ * a bare host that wants only the highlighter palette can ask for it:
+ *
+ * ```ts
+ * import { renderThemeTokenCss } from "@ox-content/vite-plugin/theme-tokens";
+ * import { kanagawa } from "@ox-content/theme-color-kanagawa";
+ *
+ * const css = renderThemeTokenCss(kanagawa, {
+ *   include: (name) => name.startsWith("syntax-"),
+ * });
+ * ```
+ *
+ * Layers compose left to right and each layer's `extends` chain is flattened
+ * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
+ */
+export function renderThemeTokenCss(theme, options = {}) {
+    const layers = (Array.isArray(theme) ? theme : [theme]).flatMap(expandExtendsChain);
+    return tokensToCss(mergeTokens(layers, "tokens", options.include), mergeTokens(layers, "darkTokens", options.include));
+}
+/**
+ * Renders light and dark token records as the three selectors the SSG runtime
+ * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
+ * `prefers-color-scheme` fallback, and the `:root` base.
+ *
+ * Emitted after the typed color variables and before the theme's own `css`, so
+ * a token can override a typed color and raw `css` can override a token.
+ */
+export function tokensToCss(light, dark) {
+    const lightBody = declarations(light, "  ");
+    const darkBody = declarations(dark, "  ");
+    const blocks = [];
+    if (lightBody) {
+        blocks.push(`:root {\n${lightBody}\n}`);
+    }
+    if (darkBody) {
+        blocks.push(`[data-theme="dark"] {\n${darkBody}\n}`);
+        blocks.push(`@media (prefers-color-scheme: dark) {\n  :root:not([data-theme="light"]) {\n${declarations(dark, "    ")}\n  }\n}`);
+    }
+    return blocks.join("\n");
+}
+function declarations(tokens, indent) {
+    return Object.entries(tokens)
+        .filter(([, value]) => value !== undefined && value !== "")
+        .map(([name, value]) => `${indent}${TOKEN_PREFIX}${assertTokenName(name)}: ${value};`)
+        .join("\n");
+}
+function assertTokenName(name) {
+    // Token names land verbatim inside a declaration block, so a stray `:` or `}`
+    // would silently break every rule after it. Fail the build with the offending
+    // key instead of shipping a corrupt stylesheet.
+    if (!TOKEN_NAME_PATTERN.test(name)) {
+        throw new Error(`Invalid theme token name: ${JSON.stringify(name)}. ` +
+            `Token names are lowercase kebab-case without the "${TOKEN_PREFIX}" prefix (e.g. "surface-glass").`);
+    }
+    return name;
+}
+function mergeTokens(layers, field, include) {
+    const merged = {};
+    for (const layer of layers) {
+        for (const [name, value] of Object.entries(layer[field] ?? {})) {
+            if (!include || include(name)) {
+                merged[name] = value;
+            }
+        }
+    }
+    return merged;
+}
+/**
+ * Flattens one layer's `extends` chain into base-first order, mirroring the
+ * SSG's own resolution. The `seen` guard keeps a theme that extends itself (or
+ * forms a cycle across two packages) from hanging the caller.
+ */
+function expandExtendsChain(theme) {
+    const chain = [];
+    const seen = new Set();
+    let current = theme;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        chain.unshift(current);
+        current = current.extends;
+    }
+    return chain;
+}
+//# sourceMappingURL=theme-tokens.mjs.map

package/dist/theme-tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.mjs","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Free-form `--octc-*` custom properties for themes that need more than the\n * typed `colors` / `fonts` / `layout` fields.\n *\n * Keys are written **without** the `--octc-` prefix, so `\"surface-glass\"`\n * becomes `--octc-surface-glass`. This is the seam that keeps the two theme\n * axes independent: a color package can restyle code-block line markers, brand\n * accents, and surface textures purely through tokens, while a skin package\n * lays out geometry against those same tokens without knowing any color.\n */\nexport type ThemeTokens = Record<string, string>;\n\nconst TOKEN_PREFIX = \"--octc-\";\nconst TOKEN_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;\n\n/**\n * The token-bearing shape of a theme.\n *\n * Declared structurally instead of importing `ThemeConfig` so this module keeps\n * an empty import graph: `@ox-content/vite-plugin/theme-tokens` has to be\n * loadable by a bare (`ssg.bare: true`) or custom host that never pulls in the\n * Vite plugin, the SSG, the native binding, or a filesystem API. Every\n * `ThemeConfig` — including the published `@ox-content/theme-color-*` and\n * `@ox-content/theme-*` packages — satisfies it.\n */\nexport interface ThemeTokenSource {\n  tokens?: ThemeTokens;\n  darkTokens?: ThemeTokens;\n  extends?: ThemeTokenSource;\n}\n\n/**\n * Options for {@link renderThemeTokenCss}.\n */\nexport interface RenderThemeTokenCssOptions {\n  /**\n   * Keeps only the tokens whose name passes the predicate. Names arrive without\n   * the `--octc-` prefix, so `(name) => name.startsWith(\"syntax-\")` reuses a\n   * color scheme's highlighter palette without adopting its page colors,\n   * typography, or layout policy.\n   *\n   * Filtering runs per layer, before merging, so a token a later layer would\n   * have overridden is dropped along with the override.\n   */\n  include?: (name: string) => boolean;\n}\n\n/**\n * Renders a theme's `--octc-*` tokens as a standalone stylesheet.\n *\n * The built-in SSG emits these declarations itself, but `ssg.bare: true` and\n * custom hosts render their own document — this is how they get the same\n * tokens. The built-in highlighter emits `var(--octc-syntax-*)` references, so\n * a bare host that wants only the highlighter palette can ask for it:\n *\n * ```ts\n * import { renderThemeTokenCss } from \"@ox-content/vite-plugin/theme-tokens\";\n * import { kanagawa } from \"@ox-content/theme-color-kanagawa\";\n *\n * const css = renderThemeTokenCss(kanagawa, {\n *   include: (name) => name.startsWith(\"syntax-\"),\n * });\n * ```\n *\n * Layers compose left to right and each layer's `extends` chain is flattened\n * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.\n */\nexport function renderThemeTokenCss(\n  theme: ThemeTokenSource | ThemeTokenSource[],\n  options: RenderThemeTokenCssOptions = {},\n): string {\n  const layers = (Array.isArray(theme) ? theme : [theme]).flatMap(expandExtendsChain);\n  return tokensToCss(\n    mergeTokens(layers, \"tokens\", options.include),\n    mergeTokens(layers, \"darkTokens\", options.include),\n  );\n}\n\n/**\n * Renders light and dark token records as the three selectors the SSG runtime\n * switches between: an explicit `[data-theme=\"dark\"]` opt-in, the OS\n * `prefers-color-scheme` fallback, and the `:root` base.\n *\n * Emitted after the typed color variables and before the theme's own `css`, so\n * a token can override a typed color and raw `css` can override a token.\n */\nexport function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string {\n  const lightBody = declarations(light, \"  \");\n  const darkBody = declarations(dark, \"  \");\n  const blocks: string[] = [];\n\n  if (lightBody) {\n    blocks.push(`:root {\\n${lightBody}\\n}`);\n  }\n  if (darkBody) {\n    blocks.push(`[data-theme=\"dark\"] {\\n${darkBody}\\n}`);\n    blocks.push(\n      `@media (prefers-color-scheme: dark) {\\n  :root:not([data-theme=\"light\"]) {\\n${declarations(dark, \"    \")}\\n  }\\n}`,\n    );\n  }\n\n  return blocks.join(\"\\n\");\n}\n\nfunction declarations(tokens: ThemeTokens, indent: string): string {\n  return Object.entries(tokens)\n    .filter(([, value]) => value !== undefined && value !== \"\")\n    .map(([name, value]) => `${indent}${TOKEN_PREFIX}${assertTokenName(name)}: ${value};`)\n    .join(\"\\n\");\n}\n\nfunction assertTokenName(name: string): string {\n  // Token names land verbatim inside a declaration block, so a stray `:` or `}`\n  // would silently break every rule after it. Fail the build with the offending\n  // key instead of shipping a corrupt stylesheet.\n  if (!TOKEN_NAME_PATTERN.test(name)) {\n    throw new Error(\n      `Invalid theme token name: ${JSON.stringify(name)}. ` +\n        `Token names are lowercase kebab-case without the \"${TOKEN_PREFIX}\" prefix (e.g. \"surface-glass\").`,\n    );\n  }\n  return name;\n}\n\nfunction mergeTokens(\n  layers: ThemeTokenSource[],\n  field: \"tokens\" | \"darkTokens\",\n  include?: (name: string) => boolean,\n): ThemeTokens {\n  const merged: ThemeTokens = {};\n\n  for (const layer of layers) {\n    for (const [name, value] of Object.entries(layer[field] ?? {})) {\n      if (!include || include(name)) {\n        merged[name] = value;\n      }\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Flattens one layer's `extends` chain into base-first order, mirroring the\n * SSG's own resolution. The `seen` guard keeps a theme that extends itself (or\n * forms a cycle across two packages) from hanging the caller.\n */\nfunction expandExtendsChain(theme: ThemeTokenSource): ThemeTokenSource[] {\n  const chain: ThemeTokenSource[] = [];\n  const seen = new Set<ThemeTokenSource>();\n  let current: ThemeTokenSource | undefined = theme;\n\n  while (current && !seen.has(current)) {\n    seen.add(current);\n    chain.unshift(current);\n    current = current.extends;\n  }\n\n  return chain;\n}\n"]}

package/dist/theme-transition-client.cjs

@@ -0,0 +1,161 @@
+// Generated from crates/ox_content_ssg/src/html/theme_transition_runtime.js.
+// Run npm/vite-plugin-ox-content/scripts/build-theme-transition-client.mjs.
+
+"use strict";
+// Circular reveal for a same-document colour-scheme change.
+//
+// Prior art: @hooray's VitePress implementation, by way of @ryoppippi's
+// svelte-fancy-darkmode, which this is a framework-neutral port of.
+//
+// This wraps a *same-document* theme mutation. It is unrelated to the
+// cross-document `@view-transition` used for MPA navigation, and the CSS it
+// depends on is scoped to `data-ox-theme-transition` so the two lifecycles
+// cannot reach each other's snapshots.
+
+const OX_THEME_TRANSITION_ATTR = "data-ox-theme-transition";
+const OX_THEME_TRANSITION_SUPPRESS_ATTR = "data-ox-theme-transition-suppress";
+
+let oxThemeTransitionCurrent = null;
+
+function oxThemeTransitionRoot() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+
+function oxThemeTransitionReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function oxThemeTransitionSupported(root) {
+  return Boolean(
+    root &&
+    typeof document !== "undefined" &&
+    typeof document.startViewTransition === "function" &&
+    typeof root.animate === "function",
+  );
+}
+
+// A keyboard or programmatic activation still produces a click event, but with
+// no meaningful coordinates: `detail` is 0 and clientX/clientY report 0. Only
+// a real pointer press is trusted, so the reveal never starts from the corner
+// of the screen when someone tabs to the button.
+function oxThemeTransitionOrigin(event) {
+  const viewportCentre = {
+    x: (typeof innerWidth === "number" ? innerWidth : 0) / 2,
+    y: (typeof innerHeight === "number" ? innerHeight : 0) / 2,
+  };
+  if (!event) return viewportCentre;
+
+  const fromPointer =
+    typeof event.clientX === "number" &&
+    typeof event.clientY === "number" &&
+    (event.detail > 0 || (typeof event.pointerType === "string" && event.pointerType !== ""));
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+
+  const target = event.currentTarget ?? event.target;
+  if (target && typeof target.getBoundingClientRect === "function") {
+    const rect = target.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0) {
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+  }
+  return viewportCentre;
+}
+
+// The circle has to reach whichever viewport corner is furthest away, or the
+// old theme stays visible in one corner when the animation ends.
+function oxThemeTransitionRadius(origin) {
+  const width = typeof innerWidth === "number" ? innerWidth : 0;
+  const height = typeof innerHeight === "number" ? innerHeight : 0;
+  return Math.hypot(Math.max(origin.x, width - origin.x), Math.max(origin.y, height - origin.y));
+}
+
+// Element-level colour transitions would otherwise animate underneath the
+// snapshot and bleed the old palette into the new one. They are suppressed
+// only while the mutation happens, and restored as soon as both snapshots
+// have been captured.
+function oxThemeTransitionSuppress(root) {
+  root.setAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR, "");
+  return () => {
+    // Reading a layout property flushes the suppressed styles before they are
+    // allowed to animate again.
+    void root.offsetHeight;
+    root.removeAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR);
+  };
+}
+
+// eslint-disable-next-line no-unused-vars
+function applyThemeTransition(options) {
+  const settings = options ?? {};
+  const apply = settings.apply;
+  if (typeof apply !== "function") return Promise.resolve();
+
+  const root = oxThemeTransitionRoot();
+  if (!oxThemeTransitionSupported(root) || oxThemeTransitionReducedMotion()) {
+    apply();
+    return Promise.resolve();
+  }
+
+  // A second toggle while one is still running would capture a half-animated
+  // snapshot. Settle the running one first; its cleanup is synchronous.
+  if (oxThemeTransitionCurrent) {
+    const running = oxThemeTransitionCurrent;
+    oxThemeTransitionCurrent = null;
+    if (typeof running.skipTransition === "function") running.skipTransition();
+  }
+
+  // Going dark expands the incoming snapshot over the outgoing one; going
+  // light shrinks the outgoing snapshot away to reveal the incoming one
+  // underneath. Either way the circle grows out of, or collapses into, the
+  // point the reader activated.
+  const expanding = settings.nextTheme !== "light";
+  const origin = oxThemeTransitionOrigin(settings.event);
+  const radius = oxThemeTransitionRadius(origin);
+  const duration = typeof settings.duration === "number" ? settings.duration : 420;
+  const easing = typeof settings.easing === "string" ? settings.easing : "ease-in-out";
+
+  root.setAttribute(OX_THEME_TRANSITION_ATTR, expanding ? "expand" : "shrink");
+
+  let restore = () => {};
+  const transition = document.startViewTransition(() => {
+    restore = oxThemeTransitionSuppress(root);
+    apply();
+  });
+  oxThemeTransitionCurrent = transition;
+
+  const clipFrom = `circle(0px at ${origin.x}px ${origin.y}px)`;
+  const clipTo = `circle(${radius}px at ${origin.x}px ${origin.y}px)`;
+
+  transition.ready.then(
+    () => {
+      restore();
+      root.animate(
+        { clipPath: expanding ? [clipFrom, clipTo] : [clipTo, clipFrom] },
+        {
+          duration,
+          easing,
+          pseudoElement: expanding ? "::view-transition-new(root)" : "::view-transition-old(root)",
+        },
+      );
+    },
+    () => {
+      // A skipped or unsupported transition still has to hand the suppressed
+      // styles back.
+      restore();
+    },
+  );
+
+  const settled = () => {
+    restore();
+    // A rapid second toggle skips this one, which lands here *after* the newer
+    // transition has already claimed the attribute. Only the transition still
+    // holding the slot is allowed to clear it.
+    if (oxThemeTransitionCurrent !== transition) return;
+    oxThemeTransitionCurrent = null;
+    root.removeAttribute(OX_THEME_TRANSITION_ATTR);
+  };
+  // `finished` rejects when a transition is skipped, which is a normal outcome
+  // here — both arms clean up and neither leaves an unhandled rejection.
+  return transition.finished.then(settled, settled);
+}
+
+module.exports = { applyThemeTransition };

package/dist/theme-transition-client.d.cts

@@ -0,0 +1,21 @@
+export interface ThemeTransitionOptions {
+  /** Activation event. Supplies the reveal origin; omit for the viewport centre. */
+  event?: Event;
+  /** Theme being switched to. `"light"` collapses the circle, anything else grows it. */
+  nextTheme?: string;
+  /** Synchronous theme mutation, run while both snapshots are captured. */
+  apply: () => void;
+  /** Reveal duration in milliseconds. Defaults to 420. */
+  duration?: number;
+  /** Reveal easing. Defaults to `"ease-in-out"`. */
+  easing?: string;
+}
+
+/**
+ * Runs `apply` inside a circular view transition, or immediately when View
+ * Transitions are unavailable or the reader asked for reduced motion.
+ *
+ * Resolves once the transition has settled. A skipped transition resolves too,
+ * so the returned promise never rejects.
+ */
+export declare function applyThemeTransition(options: ThemeTransitionOptions): Promise<void>;

package/dist/theme-transition-client.d.mts

@@ -0,0 +1,21 @@
+export interface ThemeTransitionOptions {
+  /** Activation event. Supplies the reveal origin; omit for the viewport centre. */
+  event?: Event;
+  /** Theme being switched to. `"light"` collapses the circle, anything else grows it. */
+  nextTheme?: string;
+  /** Synchronous theme mutation, run while both snapshots are captured. */
+  apply: () => void;
+  /** Reveal duration in milliseconds. Defaults to 420. */
+  duration?: number;
+  /** Reveal easing. Defaults to `"ease-in-out"`. */
+  easing?: string;
+}
+
+/**
+ * Runs `apply` inside a circular view transition, or immediately when View
+ * Transitions are unavailable or the reader asked for reduced motion.
+ *
+ * Resolves once the transition has settled. A skipped transition resolves too,
+ * so the returned promise never rejects.
+ */
+export declare function applyThemeTransition(options: ThemeTransitionOptions): Promise<void>;