create-zudo-doc 0.1.0

package/templates/base/src/components/site-tree-nav.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+// Use preact hook entrypoints directly — zfb's esbuild step doesn't alias
+// "react" to "preact/compat" the way Astro's `@astrojs/preact` integration
+// did, so importing from "react" here would fail to resolve at SSR/island
+// bundle time. Same pattern as src/components/sidebar-tree.tsx.
+import { useState } from "preact/hooks";
+import type { NavNode } from "@/utils/docs";
+import { INDENT, connectorLeft, ConnectorLines, CategoryLinkIcon } from "./tree-nav-shared";
+
+// site-tree-nav uses wider padding than the narrow sidebar
+const SITE_BASE_PAD = "clamp(0.5rem, 0.8vw, 1rem)";
+
+function padLeft(depth: number): string {
+  if (depth === 0) return SITE_BASE_PAD;
+  return `calc(${depth} * ${INDENT} + 1.25rem + 5px)`;
+}
+
+function reorderTree(tree: NavNode[], order: string[]): NavNode[] {
+  const map = new Map(tree.map((node) => [node.slug, node]));
+  const ordered: NavNode[] = [];
+  for (const slug of order) {
+    const node = map.get(slug);
+    if (node) {
+      ordered.push(node);
+      map.delete(slug);
+    }
+  }
+  // append unmatched nodes at end
+  for (const node of map.values()) {
+    ordered.push(node);
+  }
+  return ordered;
+}
+
+interface SiteTreeNavProps {
+  tree: NavNode[];
+  ariaLabel?: string;
+  categoryOrder?: string[];
+  categoryIgnore?: string[];
+}
+
+export default function SiteTreeNav({
+  tree,
+  ariaLabel = "Site index",
+  categoryOrder,
+  categoryIgnore,
+}: SiteTreeNavProps) {
+  let processedTree = tree;
+  if (categoryIgnore) {
+    const ignoreSet = new Set(categoryIgnore);
+    processedTree = processedTree.filter((node) => !ignoreSet.has(node.slug));
+  }
+  if (categoryOrder) {
+    processedTree = reorderTree(processedTree, categoryOrder);
+  }
+  return (
+    <nav
+      aria-label={ariaLabel}
+      data-site-nav
+      className="grid gap-vsp-md"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(18rem, 100%), 1fr))",
+      }}
+    >
+      {processedTree.map((node) => (
+        <div key={node.slug} className="min-w-0 border border-muted pl-hsp-sm py-vsp-2xs">
+          {node.children.length > 0 ? (
+            <CategoryNode node={node} depth={0} isLast={true} />
+          ) : (
+            <LeafNode node={node} depth={0} isLast={true} />
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function NodeList({ nodes, depth }: { nodes: NavNode[]; depth: number }) {
+  return (
+    <>
+      {nodes.map((node, index) => {
+        const isLast = index === nodes.length - 1;
+        return node.children.length > 0 ? (
+          <CategoryNode
+            key={node.slug}
+            node={node}
+            depth={depth}
+            isLast={isLast}
+          />
+        ) : (
+          <LeafNode
+            key={node.slug}
+            node={node}
+            depth={depth}
+            isLast={isLast}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function CategoryNode({
+  node,
+  depth,
+  isLast,
+}: {
+  node: NavNode;
+  depth: number;
+  isLast: boolean;
+}) {
+  const [open, setOpen] = useState(true);
+  const toggle = () => setOpen((prev) => !prev);
+  const paddingLeft = padLeft(depth);
+
+  return (
+    <div className={`${depth >= 1 && !isLast ? "relative" : ""}`}>
+      {depth >= 1 && !isLast && open && (
+        <div
+          className="absolute border-l border-dashed border-muted z-10"
+          style={{
+            left: connectorLeft(depth),
+            top: 0,
+            bottom: 0,
+          }}
+        />
+      )}
+      <div className="relative">
+        <ConnectorLines
+          depth={depth}
+          isLast={isLast}
+          widthScale={2}
+          topPad="calc(0.15rem + var(--spacing-vsp-xs))"
+        />
+        <div
+          className="flex w-full items-center justify-between text-small font-semibold pt-[0.15rem] text-fg"
+          style={{ paddingLeft }}
+        >
+          {node.href ? (
+            <a
+              href={node.href}
+              className="flex-1 flex items-start gap-hsp-xs py-vsp-xs text-fg hover:text-accent hover:underline focus:underline"
+            >
+              {depth === 0 && (
+                <span className="flex h-[1lh] items-center">
+                  <CategoryLinkIcon className="w-[18px] 2xl:w-[24px]" />
+                </span>
+              )}
+              {node.label}
+            </a>
+          ) : (
+            <button
+              type="button"
+              onClick={toggle}
+              className="flex-1 py-vsp-xs text-left hover:text-accent hover:underline focus:underline"
+            >
+              {node.label}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={toggle}
+            className="aspect-square flex items-center justify-center w-[1.75rem] border-y border-l border-muted hover:underline focus:underline"
+            aria-expanded={open}
+            aria-label={open ? `Collapse ${node.label}` : `Expand ${node.label}`}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className={`h-icon-xs w-icon-xs transition-transform duration-150 ${open ? "rotate-90" : ""} text-muted`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      {open && (
+        <div>
+          <NodeList nodes={node.children} depth={depth + 1} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LeafNode({
+  node,
+  depth,
+  isLast,
+}: {
+  node: NavNode;
+  depth: number;
+  isLast: boolean;
+}) {
+  if (!node.href) return null;
+  const isRoot = depth === 0;
+  const paddingLeft = padLeft(depth);
+
+  const topPad = isRoot
+    ? "calc(var(--spacing-vsp-xs) + 0.15rem)"
+    : "var(--spacing-vsp-2xs)";
+
+  return (
+    <div>
+      <div className="relative">
+        <ConnectorLines depth={depth} isLast={isLast} widthScale={2} topPad={topPad} />
+        <a
+          href={node.href}
+          className={isRoot
+            ? "flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] text-small font-semibold text-fg hover:text-accent hover:underline focus:underline"
+            : `block py-vsp-2xs ${isLast ? "pb-vsp-xs" : ""} text-small text-fg hover:text-accent hover:underline focus:underline`
+          }
+          style={{ paddingLeft }}
+        >
+          {isRoot && (
+            <span className="flex h-[1lh] items-center">
+              <CategoryLinkIcon className="w-[18px] 2xl:w-[24px]" />
+            </span>
+          )}
+          {node.label}
+        </a>
+      </div>
+    </div>
+  );
+}

package/templates/base/src/components/theme-toggle.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from "preact/compat";
+
+const STORAGE_KEY = "zudo-doc-theme";
+
+function SunIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+interface ThemeToggleProps {
+  defaultMode?: "light" | "dark";
+}
+
+export default function ThemeToggle({ defaultMode = "dark" }: ThemeToggleProps) {
+  // Initial state must match server render to avoid hydration mismatch.
+  // Actual theme is synced from DOM in useEffect below.
+  const [mode, setMode] = useState<"light" | "dark">(defaultMode);
+
+  useEffect(() => {
+    const actual =
+      (document.documentElement.getAttribute("data-theme") as
+        | "light"
+        | "dark") || defaultMode;
+    if (actual !== mode) {
+      setMode(actual);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function toggle() {
+    const next = mode === "dark" ? "light" : "dark";
+    setMode(next);
+    document.documentElement.setAttribute("data-theme", next);
+    document.documentElement.style.colorScheme = next;
+    localStorage.setItem(STORAGE_KEY, next);
+    // Clear both v1 and v2 tweak state so the new scheme's palette takes effect.
+    localStorage.removeItem("zudo-doc-tweak-state");
+    localStorage.removeItem("zudo-doc-tweak-state-v2");
+    window.dispatchEvent(new CustomEvent("color-scheme-changed"));
+  }
+
+  const nextMode = mode === "dark" ? "light" : "dark";
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label={`Switch to ${nextMode} mode`}
+      className="text-muted hover:text-fg transition-colors p-hsp-sm focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+    >
+      {mode === "dark" ? <SunIcon /> : <MoonIcon />}
+    </button>
+  );
+}

package/templates/base/src/components/toc.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useMemo } from "preact/hooks";
+import { useActiveHeading } from "@/hooks/use-active-heading";
+import type { Heading } from "@/types/heading";
+import { SmartBreak } from "@/utils/smart-break";
+import clsx from "clsx";
+
+interface TocProps {
+  headings: Heading[];
+}
+
+export function Toc({ headings }: TocProps) {
+  const filtered = useMemo(
+    () => headings.filter((h) => h.depth >= 2 && h.depth <= 4),
+    [headings],
+  );
+  const { activeId, activate } = useActiveHeading(filtered);
+
+  if (filtered.length === 0) return <nav className="hidden" />;
+
+  return (
+    <nav
+      aria-label="Table of contents"
+      className={clsx(
+        "hidden xl:flex flex-col",
+        "w-[280px] shrink-0",
+        "sticky top-[3.5rem] self-start z-10",
+        "pt-vsp-xl lg:pt-vsp-2xl",
+        "h-[calc(100vh-3.5rem)]",
+      )}
+    >
+      <ul className="border-l border-muted pl-hsp-lg overflow-y-auto flex-1 min-h-0">
+        {filtered.map((heading, index) => {
+          const isActive = heading.slug === activeId;
+          return (
+            <li
+              key={`${heading.slug}-${index}`}
+              className={clsx(
+                heading.depth === 3 && "ml-hsp-lg",
+                heading.depth === 4 && "ml-hsp-2xl",
+              )}
+            >
+              <a
+                href={`#${heading.slug}`}
+                onClick={() => activate(heading.slug)}
+                aria-current={isActive ? "true" : undefined}
+                className={clsx(
+                  "block py-vsp-2xs text-small leading-snug transition-colors",
+                  isActive
+                    ? "bg-fg text-bg font-medium"
+                    : "text-muted hover:underline focus:underline",
+                )}
+              >
+                <SmartBreak>{heading.text}</SmartBreak>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/templates/base/src/components/tree-nav-shared.tsx

@@ -0,0 +1,71 @@
+// Shared constants and primitives for sidebar-tree and site-tree-nav
+
+// Indentation — fluid clamp values
+export const INDENT = "clamp(0.8rem, 1.2vw, 1.625rem)";
+export const CONNECTOR_OFFSET = "clamp(0.2rem, 0.3vw, 0.5rem)";
+export const CONNECTOR_WIDTH = "clamp(0.4rem, 0.6vw, 1rem)";
+export const BASE_PAD = "clamp(0.4rem, 0.8vw, 1.3rem)";
+
+export function connectorLeft(depth: number): string {
+  return `calc(${depth} * ${INDENT} + ${CONNECTOR_OFFSET})`;
+}
+
+const CATEGORY_LINK_PATH =
+  "M5.746 5.74 0 11.49l20.987 20.96C34.126 45.572 41.963 53.45 41.948 53.523c-.012.062-9.456 9.544-20.986 21.07L0 95.55l5.714 5.715c3.142 3.143 5.748 5.715 5.79 5.715s2.63-2.563 5.75-5.696l17.939-18.001c21.867-21.94 29.443-29.599 29.443-29.768 0-.114-.665-.804-5.084-5.275C51.872 40.47 11.71.125 11.565.036 11.525.01 8.906 2.578 5.746 5.74m38.345-.066c-3.132 3.13-5.696 5.71-5.696 5.732-.001.022 2.16 2.185 4.8 4.807 2.641 2.623 8.382 8.338 12.758 12.702 15.38 15.337 23.763 23.641 24.314 24.086.19.153.346.336.346.405 0 .07-1.738 1.847-3.887 3.976a17515 17515 0 0 0-20.35 20.264 19555 19555 0 0 1-17.223 17.158c-.416.409-.757.77-.757.8 0 .083 11.415 11.485 11.457 11.445.235-.22 53.542-53.528 53.542-53.543C103.395 53.472 49.891.02 49.837 0c-.028-.01-2.613 2.543-5.746 5.674";
+
+export function CategoryLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 103.395 107.049"
+      aria-hidden="true"
+      className={`shrink-0 ${className ?? ""}`}
+    >
+      <path d={CATEGORY_LINK_PATH} />
+    </svg>
+  );
+}
+
+export function ConnectorLines({
+  depth,
+  isLast,
+  widthScale = 1,
+  topPad = "0px",
+}: {
+  depth: number;
+  isLast: boolean;
+  widthScale?: number;
+  /**
+   * Padding-top of the inner content row that holds the link text. The horizontal
+   * connector and (when `isLast`) the vertical clip both anchor to the first-line
+   * midpoint computed as `topPad + 0.5lh`, so multi-line labels keep the connector
+   * aligned with the first line instead of the row's vertical center.
+   */
+  topPad?: string;
+}) {
+  if (depth === 0) return null;
+  const left = connectorLeft(depth);
+  const width = widthScale === 1 ? CONNECTOR_WIDTH : `calc(${CONNECTOR_WIDTH} * ${widthScale})`;
+  const firstLineMid = `calc(${topPad} + 0.5lh)`;
+  return (
+    <>
+      <div
+        className="absolute border-l border-dashed border-muted"
+        style={{
+          left,
+          top: 0,
+          bottom: isLast ? `calc(100% - ${firstLineMid})` : 0,
+        }}
+      />
+      <div
+        className="absolute border-t border-dashed border-muted"
+        style={{
+          left,
+          width,
+          top: firstLineMid,
+        }}
+      />
+    </>
+  );
+}

package/templates/base/src/config/color-scheme-utils.ts

@@ -0,0 +1,182 @@
+import { colorSchemes, type ColorScheme, type ColorRef } from "./color-schemes";
+import { settings } from "./settings";
+
+/** Default mapping: semantic token name → palette index */
+export const SEMANTIC_DEFAULTS: Record<string, number> = {
+  surface: 0,
+  muted: 8,
+  accent: 5,
+  accentHover: 14,
+  codeBg: 10,
+  codeFg: 11,
+  success: 2,
+  danger: 1,
+  warning: 3,
+  info: 4,
+  mermaidNodeBg: 9,
+  mermaidText: 11,
+  mermaidLine: 8,
+  mermaidLabelBg: 10,
+  mermaidNoteBg: 0,
+  chatUserBg: 5,
+  chatUserText: 9,
+  chatAssistantBg: 9,
+  chatAssistantText: 11,
+  imageOverlayBg: 0,
+  imageOverlayFg: 11,
+  matchedKeywordBg: 3,
+  matchedKeywordFg: 15,
+};
+
+export const SEMANTIC_CSS_NAMES: Record<string, string> = {
+  surface: "--zd-surface",
+  muted: "--zd-muted",
+  accent: "--zd-accent",
+  accentHover: "--zd-accent-hover",
+  codeBg: "--zd-code-bg",
+  codeFg: "--zd-code-fg",
+  success: "--zd-success",
+  danger: "--zd-danger",
+  warning: "--zd-warning",
+  info: "--zd-info",
+  mermaidNodeBg: "--zd-mermaid-node-bg",
+  mermaidText: "--zd-mermaid-text",
+  mermaidLine: "--zd-mermaid-line",
+  mermaidLabelBg: "--zd-mermaid-label-bg",
+  mermaidNoteBg: "--zd-mermaid-note-bg",
+  chatUserBg: "--zd-chat-user-bg",
+  chatUserText: "--zd-chat-user-text",
+  chatAssistantBg: "--zd-chat-assistant-bg",
+  chatAssistantText: "--zd-chat-assistant-text",
+  imageOverlayBg: "--zd-image-overlay-bg",
+  imageOverlayFg: "--zd-image-overlay-fg",
+  matchedKeywordBg: "--zd-matched-keyword-bg",
+  matchedKeywordFg: "--zd-matched-keyword-fg",
+};
+
+export const lightDarkPairings = [
+  { light: "Default Light", dark: "Default Dark", label: "Default" },
+];
+
+export function getActiveScheme(): ColorScheme {
+  const scheme = colorSchemes[settings.colorScheme];
+  if (!scheme) {
+    throw new Error(`Unknown color scheme: "${settings.colorScheme}". Available: ${Object.keys(colorSchemes).join(", ")}`);
+  }
+  return scheme;
+}
+
+/** Resolve a ColorRef to a concrete color string.
+ *  - number → palette[value]
+ *  - string → used as-is
+ *  - undefined → fallback */
+export function resolveColor(
+  value: ColorRef | undefined,
+  palette: string[],
+  fallback: string,
+): string {
+  if (value === undefined) return fallback;
+  if (typeof value === "number") return palette[value] ?? fallback;
+  return value;
+}
+
+/** Resolve semantic colors with fallbacks to default palette slots */
+export function resolveSemanticColors(scheme: ColorScheme) {
+  const p = scheme.palette;
+  return {
+    surface: resolveColor(scheme.semantic?.surface, p, p[0]),
+    muted: resolveColor(scheme.semantic?.muted, p, p[8]),
+    accent: resolveColor(scheme.semantic?.accent, p, p[5]),
+    accentHover: resolveColor(scheme.semantic?.accentHover, p, p[14]),
+    codeBg: resolveColor(scheme.semantic?.codeBg, p, p[10]),
+    codeFg: resolveColor(scheme.semantic?.codeFg, p, p[11]),
+    success: resolveColor(scheme.semantic?.success, p, p[2]),
+    danger: resolveColor(scheme.semantic?.danger, p, p[1]),
+    warning: resolveColor(scheme.semantic?.warning, p, p[3]),
+    info: resolveColor(scheme.semantic?.info, p, p[4]),
+    mermaidNodeBg: resolveColor(scheme.semantic?.mermaidNodeBg, p, p[9]),
+    mermaidText: resolveColor(scheme.semantic?.mermaidText, p, p[11]),
+    mermaidLine: resolveColor(scheme.semantic?.mermaidLine, p, p[8]),
+    mermaidLabelBg: resolveColor(scheme.semantic?.mermaidLabelBg, p, p[10]),
+    mermaidNoteBg: resolveColor(scheme.semantic?.mermaidNoteBg, p, p[0]),
+    chatUserBg: resolveColor(scheme.semantic?.chatUserBg, p, p[5]),
+    chatUserText: resolveColor(scheme.semantic?.chatUserText, p, p[9]),
+    chatAssistantBg: resolveColor(scheme.semantic?.chatAssistantBg, p, p[9]),
+    chatAssistantText: resolveColor(scheme.semantic?.chatAssistantText, p, p[11]),
+    imageOverlayBg: resolveColor(scheme.semantic?.imageOverlayBg, p, p[0]),
+    imageOverlayFg: resolveColor(scheme.semantic?.imageOverlayFg, p, p[11]),
+    matchedKeywordBg: resolveColor(scheme.semantic?.matchedKeywordBg, p, p[3]),
+    matchedKeywordFg: resolveColor(scheme.semantic?.matchedKeywordFg, p, p[15]),
+  };
+}
+
+export function schemeToCssPairs(scheme: ColorScheme): [string, string][] {
+  const p = scheme.palette;
+  const sem = resolveSemanticColors(scheme);
+  return [
+    ["--zd-bg", resolveColor(scheme.background, p, p[0])],
+    ["--zd-fg", resolveColor(scheme.foreground, p, p[15])],
+    ["--zd-cursor", resolveColor(scheme.cursor, p, p[6])],
+    ["--zd-sel-bg", resolveColor(scheme.selectionBg, p, resolveColor(scheme.background, p, p[0]))],
+    ["--zd-sel-fg", resolveColor(scheme.selectionFg, p, resolveColor(scheme.foreground, p, p[15]))],
+    ...p.map((color, i) => [`--zd-${i}`, color] as [string, string]),
+    ["--zd-surface", sem.surface],
+    ["--zd-muted", sem.muted],
+    ["--zd-accent", sem.accent],
+    ["--zd-accent-hover", sem.accentHover],
+    ["--zd-code-bg", sem.codeBg],
+    ["--zd-code-fg", sem.codeFg],
+    ["--zd-success", sem.success],
+    ["--zd-danger", sem.danger],
+    ["--zd-warning", sem.warning],
+    ["--zd-info", sem.info],
+    ["--zd-mermaid-node-bg", sem.mermaidNodeBg],
+    ["--zd-mermaid-text", sem.mermaidText],
+    ["--zd-mermaid-line", sem.mermaidLine],
+    ["--zd-mermaid-label-bg", sem.mermaidLabelBg],
+    ["--zd-mermaid-note-bg", sem.mermaidNoteBg],
+    ["--zd-chat-user-bg", sem.chatUserBg],
+    ["--zd-chat-user-text", sem.chatUserText],
+    ["--zd-chat-assistant-bg", sem.chatAssistantBg],
+    ["--zd-chat-assistant-text", sem.chatAssistantText],
+    ["--zd-image-overlay-bg", sem.imageOverlayBg],
+    ["--zd-image-overlay-fg", sem.imageOverlayFg],
+    ["--zd-matched-keyword-bg", sem.matchedKeywordBg],
+    ["--zd-matched-keyword-fg", sem.matchedKeywordFg],
+  ];
+}
+
+export function generateCssCustomProperties(): string {
+  const scheme = getActiveScheme();
+  const pairs = schemeToCssPairs(scheme);
+  const lines = [":root {", ...pairs.map(([prop, value]) => `  ${prop}: ${value};`), "}"];
+  return lines.join("\n");
+}
+
+export function generateLightDarkCssProperties(): string {
+  if (!settings.colorMode) {
+    throw new Error("colorMode is not configured");
+  }
+  const { lightScheme, darkScheme } = settings.colorMode;
+  const light = colorSchemes[lightScheme];
+  const dark = colorSchemes[darkScheme];
+  if (!light) throw new Error(`Unknown light scheme: "${lightScheme}"`);
+  if (!dark) throw new Error(`Unknown dark scheme: "${darkScheme}"`);
+
+  const lightPairs = schemeToCssPairs(light);
+  const darkPairs = schemeToCssPairs(dark);
+
+  if (lightPairs.length !== darkPairs.length) {
+    throw new Error(`Light scheme has ${lightPairs.length} properties but dark scheme has ${darkPairs.length}`);
+  }
+
+  const lines = [":root {", "  color-scheme: light dark;"];
+  for (let i = 0; i < lightPairs.length; i++) {
+    const prop = lightPairs[i][0];
+    const lightVal = lightPairs[i][1];
+    const darkVal = darkPairs[i][1];
+    lines.push(`  ${prop}: light-dark(${lightVal}, ${darkVal});`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}