@loworbitstudio/visor-theme-engine 0.1.0

package/dist/adapters/index.d.ts

@@ -0,0 +1,150 @@
+import { c as GeneratedPrimitives, i as SemanticTokens, R as ResolvedThemeConfig } from '../types-r7ae3WP2.js';
+
+/**
+ * Adapter types for the Visor theme engine.
+ *
+ * Adapters transform the theme engine's intermediate output into
+ * consumer-specific CSS for different frameworks and contexts.
+ */
+
+/** Input provided to all adapters — the theme engine's intermediate data. */
+interface AdapterInput {
+    primitives: GeneratedPrimitives;
+    tokens: SemanticTokens;
+    config: ResolvedThemeConfig;
+}
+/** Base options shared by all adapters. */
+interface AdapterOptions {
+    /** Include FOWT prevention script usage comment (default: true for NextJS) */
+    includeFowt?: boolean;
+}
+/** Options specific to the NextJS adapter. */
+interface NextJSAdapterOptions extends AdapterOptions {
+    /** Include Google Fonts @import statements (default: true) */
+    includeFontImports?: boolean;
+}
+/** Options specific to the Deck adapter. */
+interface DeckAdapterOptions extends AdapterOptions {
+    /** Override the scope class name (default: .deck--{kebab-theme-name}) */
+    scopeClass?: string;
+}
+/** Options specific to the Docs adapter. */
+interface DocsAdapterOptions extends AdapterOptions {
+    /** Include font imports at the top (default: true) */
+    includeFontImports?: boolean;
+}
+/** Supported adapter names. */
+type AdapterName = "nextjs" | "fumadocs" | "deck" | "docs";
+
+/**
+ * NextJS Adapter
+ *
+ * Generates CSS custom properties formatted for Next.js projects:
+ * - @import for Google Fonts (before @layer per CSS spec)
+ * - @layer declarations for specificity ordering
+ * - Primitives, light/dark adaptive tokens in layers
+ * - FOWT usage comment
+ */
+
+/**
+ * Generate Next.js-formatted CSS from theme engine output.
+ *
+ * Output order (CSS spec compliant):
+ *   1. @import (Google Fonts)
+ *   2. @layer order declaration
+ *   3. @layer visor-primitives { ... }
+ *   4. @layer visor-adaptive { light + dark }
+ */
+declare function nextjsAdapter(input: AdapterInput, options?: NextJSAdapterOptions): string;
+
+/**
+ * Fumadocs Adapter
+ *
+ * Generates the Section 4 (framework bridge) CSS that maps Visor
+ * semantic tokens to fumadocs --color-fd-* custom properties.
+ * Replaces the manually written bridge sections in theme CSS files.
+ */
+
+/**
+ * Generate fumadocs bridge CSS from theme engine output.
+ *
+ * Produces .dark and html:not(.dark) blocks with --color-fd-* tokens
+ * wrapped in @layer visor-bridge.
+ */
+declare function fumadocsAdapter(input: AdapterInput): string;
+
+/**
+ * Deck Adapter
+ *
+ * Generates CSS scoped under a .deck--{theme-name} class for pitch decks
+ * where multiple themes may coexist on one page. All tokens are nested
+ * under the scope class — no :root selectors.
+ */
+
+/**
+ * Generate scoped CSS for a deck theme.
+ *
+ * All tokens are nested under .deck--{theme-name} with no :root selectors.
+ * Dark mode uses .dark .deck--{name} selectors.
+ */
+declare function deckAdapter(input: AdapterInput, options?: DeckAdapterOptions): string;
+
+/**
+ * Docs Adapter
+ *
+ * Generates class-scoped CSS for the Visor docs site (fumadocs).
+ * Output matches the hand-written theme CSS files in packages/docs/app/.
+ *
+ * Structure:
+ *   1. Font imports (@import Google Fonts, @font-face Visor Fonts)
+ *   2. .{slug}-theme { } — all primitives (colors, spacing, radius, typography,
+ *      shadows, motion, misc)
+ *   3. .dark .{slug}-theme { } — dark semantic tokens
+ *      @media (prefers-color-scheme: dark) { .{slug}-theme:not(.light) { } }
+ *   4. html:not(.dark) .{slug}-theme { } — light semantic tokens
+ *   5. Fumadocs bridge — .dark/.light scoped to theme class
+ */
+
+/**
+ * Generate docs-site CSS for a theme.
+ *
+ * Output is class-scoped (.{slug}-theme) with no @layer wrapping,
+ * matching the hand-written theme files in packages/docs/app/.
+ */
+declare function docsAdapter(input: AdapterInput, options?: DocsAdapterOptions): string;
+
+/**
+ * CSS @layer utilities for adapter output.
+ *
+ * Establishes a specificity ordering so theme overrides work
+ * without !important. Layers are adapter-only — the base
+ * generateFullBundleCss output is not wrapped in layers.
+ */
+/** Layer order declaration — must appear before any @layer blocks. */
+declare const LAYER_ORDER = "@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;";
+/**
+ * Wrap CSS content in a named @layer block.
+ */
+declare function wrapInLayer(layerName: string, css: string): string;
+
+/**
+ * Fumadocs Bridge Token Mapping
+ *
+ * Maps fumadocs --color-fd-* tokens to Visor semantic token references.
+ * Used by the fumadocs adapter to auto-generate Section 4 (framework bridge)
+ * of theme CSS files.
+ */
+interface FumadocsBridgeEntry {
+    /** The Visor semantic token name (e.g., "page", "primary") */
+    visorToken: string;
+    /** Which semantic token category to look up */
+    category: "text" | "surface" | "border" | "interactive";
+}
+/**
+ * Static mapping from fumadocs tokens to Visor semantic tokens.
+ *
+ * Reference: packages/docs/app/neutral-theme.css Section 4
+ */
+declare const FUMADOCS_BRIDGE_MAP: Record<string, FumadocsBridgeEntry>;
+
+export { type AdapterInput, type AdapterName, type AdapterOptions, type DeckAdapterOptions, type DocsAdapterOptions, FUMADOCS_BRIDGE_MAP, type FumadocsBridgeEntry, LAYER_ORDER, type NextJSAdapterOptions, deckAdapter, docsAdapter, fumadocsAdapter, nextjsAdapter, wrapInLayer };

package/dist/adapters/index.js

@@ -0,0 +1,537 @@
+import {
+  FULL_SHADE_STEPS,
+  SELECTIVE_SHADE_STEPS,
+  buildVisorFontUrl,
+  generateDarkCss,
+  generateLightCss,
+  generatePrimitivesCss,
+  header,
+  resolveThemeFonts,
+  sectionComment
+} from "../chunk-ZLXFCNYF.js";
+
+// src/adapters/layers.ts
+var LAYER_ORDER = "@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;";
+function wrapInLayer(layerName, css) {
+  const trimmed = css.trim();
+  if (!trimmed) return "";
+  return `@layer ${layerName} {
+${trimmed}
+}`;
+}
+
+// src/adapters/nextjs.ts
+function nextjsAdapter(input, options) {
+  const includeFontImports = options?.includeFontImports ?? true;
+  const includeFowt = options?.includeFowt ?? true;
+  const lines = [];
+  lines.push(header("Visor Theme \u2014 NextJS Adapter"));
+  if (includeFontImports && input.config.typography) {
+    const fontResult = resolveThemeFonts(input.config.typography);
+    const googleFonts = [fontResult.heading, fontResult.display, fontResult.body, fontResult.mono].filter(
+      (r) => r !== null && r.source === "google-fonts"
+    );
+    const seenUrls = /* @__PURE__ */ new Set();
+    for (const font of googleFonts) {
+      if (font?.cssUrl && !seenUrls.has(font.cssUrl)) {
+        seenUrls.add(font.cssUrl);
+        lines.push(`@import url("${font.cssUrl}");`);
+      }
+    }
+    if (seenUrls.size > 0) {
+      lines.push("");
+      lines.push(
+        "/*",
+        " * Note: If using next/font, remove the @import above and configure",
+        " * fonts in your layout.tsx to avoid double-loading. See:",
+        " * https://nextjs.org/docs/app/building-your-application/optimizing/fonts",
+        " */"
+      );
+      lines.push("");
+    }
+    const visorFonts = [fontResult.heading, fontResult.display, fontResult.body, fontResult.mono].filter(
+      (r) => r !== null && r.source === "visor-fonts"
+    );
+    const seenVisorFamilies = /* @__PURE__ */ new Set();
+    for (const font of visorFonts) {
+      if (seenVisorFamilies.has(font.family)) continue;
+      seenVisorFamilies.add(font.family);
+      for (const weight of font.weights) {
+        const url = buildVisorFontUrl(font.org ?? "", font.family, weight);
+        lines.push(`@font-face {`);
+        lines.push(`  font-family: "${font.family}";`);
+        lines.push(`  src: url("${url}") format("woff2");`);
+        lines.push(`  font-weight: ${weight};`);
+        lines.push(`  font-style: ${font.italic ? "italic" : "normal"};`);
+        lines.push(`  font-display: ${font.display};`);
+        lines.push(`}`);
+        lines.push("");
+      }
+    }
+  }
+  lines.push(LAYER_ORDER);
+  lines.push("");
+  const primitivesBody = stripHeader(
+    generatePrimitivesCss(input.primitives, input.config)
+  );
+  lines.push(wrapInLayer("visor-primitives", primitivesBody));
+  lines.push("");
+  const lightBody = stripHeader(generateLightCss(input.tokens));
+  const darkBody = stripHeader(generateDarkCss(input.tokens));
+  lines.push(
+    wrapInLayer("visor-adaptive", lightBody + "\n\n" + darkBody)
+  );
+  if (includeFowt) {
+    lines.push("");
+    lines.push(
+      "/*",
+      " * FOWT Prevention: Add this blocking script to your <head> before",
+      " * any stylesheets to prevent flash of wrong theme:",
+      " *",
+      " * import { FOWT_SCRIPT } from '@loworbitstudio/visor-theme-engine/fowt';",
+      " *",
+      " * In your layout.tsx <head>:",
+      " *   <script>",
+      " *     {FOWT_SCRIPT}",
+      " *   </script>",
+      " */"
+    );
+  }
+  return lines.join("\n") + "\n";
+}
+function stripHeader(css) {
+  const headerEndMarker = "============================================ */";
+  const idx = css.indexOf(headerEndMarker);
+  if (idx === -1) return css;
+  return css.slice(idx + headerEndMarker.length).trim();
+}
+
+// src/adapters/fumadocs-map.ts
+var FUMADOCS_BRIDGE_MAP = {
+  "fd-background": { visorToken: "page", category: "surface" },
+  "fd-foreground": { visorToken: "primary", category: "text" },
+  "fd-card": { visorToken: "card", category: "surface" },
+  "fd-card-foreground": { visorToken: "primary", category: "text" },
+  "fd-border": { visorToken: "default", category: "border" },
+  "fd-muted": { visorToken: "muted", category: "surface" },
+  "fd-muted-foreground": { visorToken: "secondary", category: "text" },
+  "fd-accent": { visorToken: "accent-default", category: "surface" },
+  "fd-accent-foreground": {
+    visorToken: "primary-text",
+    category: "interactive"
+  },
+  "fd-primary": { visorToken: "accent-default", category: "surface" },
+  "fd-primary-foreground": {
+    visorToken: "primary-text",
+    category: "interactive"
+  },
+  "fd-secondary": { visorToken: "muted", category: "surface" },
+  "fd-secondary-foreground": { visorToken: "primary", category: "text" },
+  "fd-popover": { visorToken: "card", category: "surface" },
+  "fd-popover-foreground": { visorToken: "primary", category: "text" },
+  "fd-ring": { visorToken: "focus", category: "border" }
+};
+
+// src/adapters/fumadocs.ts
+function fumadocsAdapter(input) {
+  const lines = [];
+  lines.push(header("Visor Theme \u2014 Fumadocs Bridge"));
+  const darkDecls = [];
+  const lightDecls = [];
+  for (const [fdToken, entry] of Object.entries(FUMADOCS_BRIDGE_MAP)) {
+    const tokenMap = input.tokens[entry.category];
+    const value = tokenMap?.[entry.visorToken];
+    if (!value) {
+      darkDecls.push(`  /* --color-${fdToken}: unmapped */`);
+      lightDecls.push(`  /* --color-${fdToken}: unmapped */`);
+      continue;
+    }
+    darkDecls.push(`  --color-${fdToken}: ${value.dark};`);
+    lightDecls.push(`  --color-${fdToken}: ${value.light};`);
+  }
+  const bridgeCss = [
+    ".dark {",
+    ...darkDecls,
+    "}",
+    "",
+    "html:not(.dark) {",
+    ...lightDecls,
+    "}"
+  ].join("\n");
+  lines.push(wrapInLayer("visor-bridge", bridgeCss));
+  lines.push("");
+  return lines.join("\n") + "\n";
+}
+
+// src/adapters/deck.ts
+var FULL_SCALE_ROLES = ["primary", "accent", "neutral"];
+var SELECTIVE_SCALE_ROLES = [
+  "success",
+  "warning",
+  "error",
+  "info"
+];
+function toKebabCase(name) {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
+function generateScopedPrimitives(primitives, config) {
+  const decls = [];
+  decls.push("--color-white: #ffffff;");
+  decls.push("--color-black: #000000;");
+  const allRoles = [...FULL_SCALE_ROLES, ...SELECTIVE_SCALE_ROLES];
+  for (const role of allRoles) {
+    const scale = primitives[role];
+    const steps = FULL_SCALE_ROLES.includes(role) ? FULL_SHADE_STEPS : SELECTIVE_SHADE_STEPS;
+    for (const step of steps) {
+      const value = scale[step];
+      decls.push(`--color-${role}-${step}: ${value};`);
+    }
+  }
+  const multipliers = [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24];
+  for (const m of multipliers) {
+    const px = config.spacing.base * m;
+    const rem = px === 0 ? "0" : `${px / 16}rem`;
+    decls.push(`--spacing-${m}: ${rem};`);
+  }
+  decls.push("--radius-none: 0;");
+  decls.push(`--radius-sm: ${config.radius.sm / 16}rem;`);
+  decls.push(`--radius-md: ${config.radius.md / 16}rem;`);
+  decls.push(`--radius-lg: ${config.radius.lg / 16}rem;`);
+  decls.push(`--radius-xl: ${config.radius.xl / 16}rem;`);
+  decls.push(`--radius-full: ${config.radius.pill}px;`);
+  decls.push(`--font-heading: ${config.typography.heading.family};`);
+  decls.push(`--font-display: ${config.typography.display.family};`);
+  decls.push(`--font-sans: ${config.typography.body.family};`);
+  decls.push(`--font-body: ${config.typography.body.family};`);
+  decls.push(`--font-mono: ${config.typography.mono.family};`);
+  return decls;
+}
+function generateSemanticDecls(tokens, mode) {
+  const decls = [];
+  for (const [name, values] of Object.entries(tokens.text)) {
+    decls.push(`--text-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.surface)) {
+    decls.push(`--surface-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.border)) {
+    decls.push(`--border-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.interactive)) {
+    decls.push(`--interactive-${name}: ${values[mode]};`);
+  }
+  return decls;
+}
+function deckAdapter(input, options) {
+  const scopeClass = options?.scopeClass ?? `.deck--${toKebabCase(input.config.name)}`;
+  const lines = [];
+  lines.push(header(`Visor Theme \u2014 Deck Adapter (${scopeClass})`));
+  const primDecls = generateScopedPrimitives(input.primitives, input.config);
+  const lightDecls = generateSemanticDecls(input.tokens, "light");
+  const lightBlock = [
+    `${scopeClass} {`,
+    sectionComment("Primitives"),
+    ...primDecls.map((d) => `  ${d}`),
+    "",
+    sectionComment("Semantic (light)"),
+    ...lightDecls.map((d) => `  ${d}`),
+    "}"
+  ].join("\n");
+  const darkDecls = generateSemanticDecls(input.tokens, "dark");
+  const darkBlock = [
+    `.dark ${scopeClass} {`,
+    ...darkDecls.map((d) => `  ${d}`),
+    "}",
+    "",
+    `@media (prefers-color-scheme: dark) {`,
+    `  ${scopeClass}:not(.light) {`,
+    ...darkDecls.map((d) => `    ${d}`),
+    `  }`,
+    `}`
+  ].join("\n");
+  lines.push(wrapInLayer("visor-adaptive", lightBlock + "\n\n" + darkBlock));
+  lines.push("");
+  return lines.join("\n") + "\n";
+}
+
+// src/adapters/docs.ts
+var FULL_SCALE_ROLES2 = ["primary", "accent", "neutral"];
+var SELECTIVE_SCALE_ROLES2 = ["success", "warning", "error", "info"];
+function toKebabCase2(name) {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
+function generateColorDecls(primitives) {
+  const decls = [];
+  decls.push("--color-white: #ffffff;");
+  decls.push("--color-black: #000000;");
+  const allRoles = [...FULL_SCALE_ROLES2, ...SELECTIVE_SCALE_ROLES2];
+  for (const role of allRoles) {
+    const scale = primitives[role];
+    const steps = FULL_SCALE_ROLES2.includes(role) ? FULL_SHADE_STEPS : SELECTIVE_SHADE_STEPS;
+    for (const step of steps) {
+      const value = scale[step];
+      decls.push(`--color-${role}-${step}: ${value};`);
+    }
+  }
+  return decls;
+}
+function generateSpacingDecls(config) {
+  const multipliers = [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24];
+  return multipliers.map((m) => {
+    const px = config.spacing.base * m;
+    const rem = px === 0 ? "0" : `${px / 16}rem`;
+    return `--spacing-${m}: ${rem};`;
+  });
+}
+function generateRadiusDecls(config) {
+  return [
+    "--radius-none: 0;",
+    `--radius-sm: ${config.radius.sm / 16}rem; /* ${config.radius.sm}px */`,
+    `--radius-md: ${config.radius.md / 16}rem; /* ${config.radius.md}px */`,
+    `--radius-lg: ${config.radius.lg / 16}rem; /* ${config.radius.lg}px */`,
+    `--radius-xl: ${config.radius.xl / 16}rem; /* ${config.radius.xl}px */`,
+    `--radius-2xl: ${config.radius.xl * 1.333 / 16}rem; /* ${Math.round(config.radius.xl * 1.333)}px */`,
+    `--radius-3xl: ${config.radius.xl * 2 / 16}rem; /* ${config.radius.xl * 2}px */`,
+    `--radius-full: ${config.radius.pill}px;`
+  ];
+}
+function generateTypographyDecls(config) {
+  const decls = [];
+  decls.push(`--font-display: ${config.typography.display.family};`);
+  decls.push(`--font-sans: ${config.typography.body.family};`);
+  decls.push(`--font-heading: var(--font-sans);`);
+  decls.push(`--font-body: ${config.typography.body.family};`);
+  decls.push(`--font-mono: ${config.typography.mono.family};`);
+  const fontSizes = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36
+  };
+  for (const [name, px] of Object.entries(fontSizes)) {
+    decls.push(`--font-size-${name}: ${px / 16}rem; /* ${px}px */`);
+  }
+  decls.push(`--font-weight-normal: ${config.typography.body.weight};`);
+  decls.push("--font-weight-medium: 500;");
+  decls.push(`--font-weight-semibold: ${config.typography.heading.weight};`);
+  decls.push("--font-weight-bold: 700;");
+  const lineHeights = {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2
+  };
+  for (const [name, value] of Object.entries(lineHeights)) {
+    decls.push(`--line-height-${name}: ${value};`);
+  }
+  decls.push("--letter-spacing-normal: 0.05em;");
+  return decls;
+}
+function generateShadowDecls(config) {
+  return [
+    `--shadow-xs: ${config.shadows.xs};`,
+    `--shadow-sm: ${config.shadows.sm};`,
+    `--shadow-md: ${config.shadows.md};`,
+    `--shadow-lg: ${config.shadows.lg};`,
+    `--shadow-xl: ${config.shadows.xl};`
+  ];
+}
+function generateMotionDecls(config) {
+  return [
+    `--motion-duration-100: ${config.motion["duration-fast"]};`,
+    "--motion-duration-150: 150ms;",
+    `--motion-duration-200: ${config.motion["duration-normal"]};`,
+    "--motion-duration-300: 300ms;",
+    `--motion-duration-500: ${config.motion["duration-slow"]};`,
+    "--motion-duration-800: 800ms;",
+    "--motion-easing-linear: linear;",
+    "--motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);",
+    "--motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);",
+    `--motion-easing-ease-in-out: ${config.motion.easing};`,
+    "--motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);"
+  ];
+}
+function generateMiscDecls() {
+  return [
+    "--border-width-1: 1px;",
+    "--border-width-2: 2px;",
+    "--border-width-3: 3px;",
+    "--border-width-4: 4px;",
+    "--z-base: 0;",
+    "--z-raised: 1;",
+    "--z-dropdown: 1000;",
+    "--z-sticky: 1100;",
+    "--z-modal: 1300;",
+    "--z-popover: 1400;",
+    "--z-toast: 1500;",
+    "--overlay-bg: rgba(0, 0, 0, 0.5);",
+    "--focus-ring-width: 2px;",
+    "--focus-ring-offset: 2px;"
+  ];
+}
+function generateSemanticDecls2(tokens, mode) {
+  const decls = [];
+  for (const [name, values] of Object.entries(tokens.text)) {
+    decls.push(`--text-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.surface)) {
+    decls.push(`--surface-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.border)) {
+    decls.push(`--border-${name}: ${values[mode]};`);
+  }
+  for (const [name, values] of Object.entries(tokens.interactive)) {
+    decls.push(`--interactive-${name}: ${values[mode]};`);
+  }
+  return decls;
+}
+function generateFumadocsBridgeDecls(tokens, mode) {
+  const decls = [];
+  for (const [fdToken, entry] of Object.entries(FUMADOCS_BRIDGE_MAP)) {
+    const tokenMap = tokens[entry.category];
+    const value = tokenMap?.[entry.visorToken];
+    if (!value) {
+      decls.push(`/* --color-${fdToken}: unmapped */`);
+    } else {
+      decls.push(`--color-${fdToken}: ${value[mode]};`);
+    }
+  }
+  return decls;
+}
+function block(selector, decls) {
+  return [`${selector} {`, ...decls.map((d) => `  ${d}`), "}"].join("\n");
+}
+function sectionComment2(label) {
+  return `
+/* --- ${label} --- */`;
+}
+function docsAdapter(input, options) {
+  const slug = toKebabCase2(input.config.name);
+  const scopeClass = `.${slug}-theme`;
+  const includeFontImports = options?.includeFontImports ?? true;
+  const lines = [];
+  if (includeFontImports && input.config.typography) {
+    const fontResult = resolveThemeFonts(input.config.typography);
+    const fontSlots = [fontResult.heading, fontResult.display, fontResult.body, fontResult.mono];
+    const seenUrls = /* @__PURE__ */ new Set();
+    for (const font of fontSlots) {
+      if (font && font.source === "google-fonts" && font.cssUrl && !seenUrls.has(font.cssUrl)) {
+        seenUrls.add(font.cssUrl);
+        lines.push(`@import url("${font.cssUrl}");`);
+        lines.push("");
+      }
+    }
+    const seenFamilies = /* @__PURE__ */ new Set();
+    for (const font of fontSlots) {
+      if (font && font.source === "visor-fonts" && !seenFamilies.has(font.family)) {
+        seenFamilies.add(font.family);
+        for (const weight of font.weights) {
+          const url = buildVisorFontUrl(font.org ?? "", font.family, weight);
+          lines.push("@font-face {");
+          lines.push(`  font-family: "${font.family}";`);
+          lines.push(`  src: url("${url}") format("woff2");`);
+          lines.push(`  font-weight: ${weight};`);
+          lines.push(`  font-style: ${font.italic ? "italic" : "normal"};`);
+          lines.push(`  font-display: ${font.display};`);
+          lines.push("}");
+          lines.push("");
+        }
+      }
+    }
+  }
+  lines.push("\n/* \u2500\u2500 Section 1: Shared tokens (mode-independent) \u2500\u2500 */");
+  const sharedDecls = [
+    "min-height: 100vh;",
+    "font-size: 1rem;",
+    `background: var(--surface-page, var(--surface-background));`,
+    "color: var(--text-primary);",
+    "font-family: var(--font-sans);"
+  ];
+  lines.push(sectionComment2("Primitive: Colors"));
+  lines.push(block(scopeClass, [
+    ...sharedDecls,
+    "",
+    ...generateColorDecls(input.primitives)
+  ]));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Spacing"));
+  lines.push(block(scopeClass, generateSpacingDecls(input.config)));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Border Radius"));
+  lines.push(block(scopeClass, generateRadiusDecls(input.config)));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Typography"));
+  lines.push(block(scopeClass, generateTypographyDecls(input.config)));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Shadows"));
+  lines.push(block(scopeClass, generateShadowDecls(input.config)));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Motion"));
+  lines.push(block(scopeClass, generateMotionDecls(input.config)));
+  lines.push("");
+  lines.push(sectionComment2("Primitive: Miscellaneous"));
+  lines.push(block(scopeClass, generateMiscDecls()));
+  lines.push("");
+  lines.push("\n/* \u2500\u2500 Section 2: Dark mode overrides \u2500\u2500 */");
+  const darkDecls = generateSemanticDecls2(input.tokens, "dark");
+  const categories = ["Text", "Surface", "Border", "Interactive"];
+  const categoryDecls = [
+    Object.entries(input.tokens.text).map(([n, v]) => `--text-${n}: ${v.dark};`),
+    Object.entries(input.tokens.surface).map(([n, v]) => `--surface-${n}: ${v.dark};`),
+    Object.entries(input.tokens.border).map(([n, v]) => `--border-${n}: ${v.dark};`),
+    Object.entries(input.tokens.interactive).map(([n, v]) => `--interactive-${n}: ${v.dark};`)
+  ];
+  for (let i = 0; i < categories.length; i++) {
+    lines.push(sectionComment2(`Adaptive: ${categories[i]} (dark) \u2014 manual toggle`));
+    lines.push(block(`.dark ${scopeClass}`, categoryDecls[i]));
+    lines.push("");
+  }
+  const pcsCategories = [
+    { label: "Text", entries: Object.entries(input.tokens.text).map(([n, v]) => `--text-${n}: ${v.dark};`) },
+    { label: "Surface", entries: Object.entries(input.tokens.surface).map(([n, v]) => `--surface-${n}: ${v.dark};`) },
+    { label: "Border", entries: Object.entries(input.tokens.border).map(([n, v]) => `--border-${n}: ${v.dark};`) },
+    { label: "Interactive", entries: Object.entries(input.tokens.interactive).map(([n, v]) => `--interactive-${n}: ${v.dark};`) }
+  ];
+  for (const cat of pcsCategories) {
+    lines.push(sectionComment2(`Adaptive: ${cat.label} (dark) \u2014 prefers-color-scheme`));
+    const inner = block(`${scopeClass}:not(.light)`, cat.entries);
+    lines.push(`@media (prefers-color-scheme: dark) {
+${inner.split("\n").map((l) => `  ${l}`).join("\n")}
+}`);
+    lines.push("");
+  }
+  lines.push("\n/* \u2500\u2500 Section 3: Light mode overrides \u2500\u2500 */");
+  const lightCategoryDecls = [
+    { label: "Text", entries: Object.entries(input.tokens.text).map(([n, v]) => `--text-${n}: ${v.light};`) },
+    { label: "Surface", entries: Object.entries(input.tokens.surface).map(([n, v]) => `--surface-${n}: ${v.light};`) },
+    { label: "Border", entries: Object.entries(input.tokens.border).map(([n, v]) => `--border-${n}: ${v.light};`) },
+    { label: "Interactive", entries: Object.entries(input.tokens.interactive).map(([n, v]) => `--interactive-${n}: ${v.light};`) }
+  ];
+  for (const cat of lightCategoryDecls) {
+    lines.push(sectionComment2(`Adaptive: ${cat.label} (light)`));
+    lines.push(block(`html:not(.dark) ${scopeClass}`, cat.entries));
+    lines.push("");
+  }
+  lines.push(sectionComment2("Fumadocs bridge: dark"));
+  lines.push(block(`.dark ${scopeClass}`, generateFumadocsBridgeDecls(input.tokens, "dark")));
+  lines.push("");
+  lines.push(sectionComment2("Fumadocs bridge: light"));
+  lines.push(block(`html:not(.dark) ${scopeClass}`, generateFumadocsBridgeDecls(input.tokens, "light")));
+  lines.push("");
+  return lines.join("\n") + "\n";
+}
+export {
+  FUMADOCS_BRIDGE_MAP,
+  LAYER_ORDER,
+  deckAdapter,
+  docsAdapter,
+  fumadocsAdapter,
+  nextjsAdapter,
+  wrapInLayer
+};