@nebutra/design-sync 0.1.1 → 0.1.2

package/dist/serialize/to-design-md.resolve.js

@@ -0,0 +1,248 @@
+/**
+ * DTCG → DESIGN.md resolver layer
+ *
+ * Builds flat token indexes from token sets, resolves aliases, extracts
+ * typed values (colors, typography, rounded, spacing, containers).
+ *
+ * Imported by `to-design-md.ts`; do NOT import this file directly in app code.
+ */
+export { buildIndex, buildIndexForSet, buildRounded, buildSpacing, buildTypography, readContainers, resolveColorRoles, };
+// ─── Index building ────────────────────────────────────────────────────────────
+function buildIndex(sets) {
+    const index = new Map();
+    for (const set of sets) {
+        flattenTree(set.tokens, "", index);
+    }
+    return index;
+}
+function buildIndexForSet(tree) {
+    const index = new Map();
+    flattenTree(tree, "", index);
+    return index;
+}
+function flattenTree(node, prefix, out) {
+    for (const [key, value] of Object.entries(node)) {
+        if (key.startsWith("$"))
+            continue; // skip $schema, $description at group level
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (isLeaf(value)) {
+            out.set(path, value);
+        }
+        else if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+            // Only recurse into plain objects — skip scalars (strings, numbers, booleans)
+            // that appear at the group level (e.g. a top-level "theme": "dark-dense" key).
+            flattenTree(value, path, out);
+        }
+        // Scalar non-leaf values (e.g. "$schema" companions without "$type") are silently skipped.
+    }
+}
+function isLeaf(value) {
+    return typeof value === "object" && value !== null && "$value" in value && "$type" in value;
+}
+// ─── Alias resolution ──────────────────────────────────────────────────────────
+const ALIAS_RE = /^\{([^}]+)\}$/;
+/**
+ * Resolve a token value to its literal (non-alias) string.
+ * Throws if the alias is dangling (referenced path not in index).
+ * Returns null only if the path itself is missing from the index (graceful skip).
+ *
+ * @param path       The current token path being resolved.
+ * @param index      The flat token index to look up.
+ * @param visited    Set of paths already visited (cycle detection).
+ * @param originPath The originating token path (for cycle error messages).
+ */
+export function resolveValue(path, index, visited = new Set(), originPath) {
+    const leaf = index.get(path);
+    if (!leaf)
+        return null; // graceful: source token absent
+    const raw = String(leaf.$value);
+    const match = ALIAS_RE.exec(raw);
+    if (!match)
+        return raw; // literal value
+    const refPath = match[1];
+    if (visited.has(refPath)) {
+        const origin = originPath ?? path;
+        throw new Error(`[design-sync] Cycle detected resolving token alias starting from "${origin}": ${[...visited, refPath].join(" → ")}`);
+    }
+    // Check the alias exists in the index before recursing
+    if (!index.has(refPath)) {
+        throw new Error(`[design-sync] Dangling token alias: {${refPath}} referenced by "${path}" could not be resolved. ` +
+            `Ensure the token set containing "${refPath}" is included in the sets array.`);
+    }
+    return resolveValue(refPath, index, new Set([...visited, refPath]), originPath ?? path);
+}
+// ─── Hex validation ────────────────────────────────────────────────────────────
+const HEX_RE = /^#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?$/;
+/** Returns a lowercase #rrggbb string, or null if the value isn't a bare hex. */
+function toHex(value) {
+    const v = value.trim();
+    if (!HEX_RE.test(v))
+        return null;
+    const lower = v.toLowerCase();
+    // Expand 3-char shorthand (#abc → #aabbcc)
+    if (lower.length === 4) {
+        const r = lower[1];
+        const g = lower[2];
+        const b = lower[3];
+        return `#${r}${r}${g}${g}${b}${b}`;
+    }
+    return lower;
+}
+// ─── Color role mapping ────────────────────────────────────────────────────────
+/** Map from color role name to the dot-path in the merged index. */
+const COLOR_ROLE_PATHS = [
+    ["primary", "brand.primary"],
+    ["accent", "brand.accent"],
+    ["tertiary", "brand.tertiary"],
+    ["danger", "status.danger"],
+    ["warning", "status.warning"],
+    ["success", "status.success"],
+];
+function resolveColorRoles(index, themeIndex) {
+    const roles = {};
+    const descriptions = {};
+    for (const [role, path] of COLOR_ROLE_PATHS) {
+        if (!index.has(path))
+            continue;
+        const resolved = resolveValue(path, index, new Set(), path);
+        if (resolved == null)
+            continue;
+        const hex = toHex(resolved);
+        if (!hex)
+            continue; // non-hex (gradient etc.) — skip from colors group
+        roles[role] = hex;
+        const sourceLeaf = index.get(path);
+        if (sourceLeaf?.$description) {
+            descriptions[role] = sourceLeaf.$description;
+        }
+    }
+    // Theme-specific: background + foreground
+    if (themeIndex.size > 0) {
+        for (const [role, path] of [
+            ["background", "color.background"],
+            ["foreground", "color.foreground"],
+        ]) {
+            if (!themeIndex.has(path))
+                continue;
+            const resolved = resolveValue(path, themeIndex, new Set(), path);
+            if (resolved == null)
+                continue;
+            const hex = toHex(resolved);
+            if (!hex)
+                continue;
+            roles[role] = hex;
+            const sourceLeaf = themeIndex.get(path);
+            if (sourceLeaf?.$description) {
+                descriptions[role] = sourceLeaf.$description;
+            }
+        }
+    }
+    return { roles, descriptions };
+}
+// ─── Typography ────────────────────────────────────────────────────────────────
+function buildTypography(index) {
+    const sansRaw = resolveValue("fontFamily.sans", index);
+    const monoRaw = resolveValue("fontFamily.mono", index);
+    const sansFontFamily = sansRaw ?? "Geist, system-ui, sans-serif";
+    const monoFontFamily = monoRaw ?? "Geist Mono, ui-monospace, monospace";
+    return {
+        h1: { fontFamily: sansFontFamily, fontSize: "3rem" },
+        "body-md": { fontFamily: sansFontFamily, fontSize: "1rem" },
+        label: { fontFamily: monoFontFamily, fontSize: "0.75rem" },
+    };
+}
+// ─── Rounded ──────────────────────────────────────────────────────────────────
+/** Stable key order for size.radius entries. */
+const RADIUS_KEY_ORDER = [
+    "none",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "full",
+    "button",
+    "card",
+    "panel",
+];
+function buildRounded(index) {
+    const result = {};
+    const prefix = "size.radius.";
+    const found = [];
+    for (const key of index.keys()) {
+        if (key.startsWith(prefix)) {
+            found.push(key.slice(prefix.length));
+        }
+    }
+    // Sort by canonical order then alphabetically for any extras
+    found.sort((a, b) => {
+        const ai = RADIUS_KEY_ORDER.indexOf(a);
+        const bi = RADIUS_KEY_ORDER.indexOf(b);
+        if (ai !== -1 && bi !== -1)
+            return ai - bi;
+        if (ai !== -1)
+            return -1;
+        if (bi !== -1)
+            return 1;
+        return a.localeCompare(b);
+    });
+    for (const key of found) {
+        const resolved = resolveValue(`${prefix}${key}`, index);
+        if (resolved != null) {
+            // DESIGN.md spec requires a unit suffix — normalize bare "0" to "0px"
+            // so the linter does not flag it as an invalid dimension.
+            result[key] = resolved === "0" ? "0px" : resolved;
+        }
+    }
+    return result;
+}
+// ─── Spacing ──────────────────────────────────────────────────────────────────
+/** Stable key order for size.spacing entries. */
+const SPACING_KEY_ORDER = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
+function buildSpacing(index) {
+    const prefix = "size.spacing.";
+    const found = [];
+    for (const key of index.keys()) {
+        if (key.startsWith(prefix)) {
+            found.push(key.slice(prefix.length));
+        }
+    }
+    if (found.length === 0)
+        return null;
+    // Sort by canonical order then alphabetically for any extras (determinism)
+    found.sort((a, b) => {
+        const ai = SPACING_KEY_ORDER.indexOf(a);
+        const bi = SPACING_KEY_ORDER.indexOf(b);
+        if (ai !== -1 && bi !== -1)
+            return ai - bi;
+        if (ai !== -1)
+            return -1;
+        if (bi !== -1)
+            return 1;
+        return a.localeCompare(b);
+    });
+    const result = {};
+    for (const shortKey of found) {
+        const resolved = resolveValue(`${prefix}${shortKey}`, index);
+        if (resolved != null) {
+            result[shortKey] = resolved;
+        }
+    }
+    return Object.keys(result).length > 0 ? result : null;
+}
+// ─── Containers ───────────────────────────────────────────────────────────────
+function readContainers(index) {
+    const info = {};
+    for (const [role, path] of [
+        ["text", "size.container.text"],
+        ["content", "size.container.content"],
+        ["wide", "size.container.wide"],
+    ]) {
+        const resolved = resolveValue(path, index);
+        if (resolved != null) {
+            info[role] = resolved;
+        }
+    }
+    return info;
+}

package/dist/serialize/to-preview-html.d.ts

@@ -0,0 +1,42 @@
+/**
+ * DTCG → preview.html serializer
+ *
+ * Converts an array of W3C DTCG token sets into a self-contained, dependency-free
+ * HTML document that visually renders the design system:
+ *
+ *   - Header with the design-system name
+ *   - Color swatches (name + resolved hex) for all brand/status roles
+ *   - Typography samples (h1 / body / label) using the resolved font family
+ *   - Component samples (button, card, input) built with resolved tokens
+ *   - Radius scale
+ *   - Light + dark rendering via CSS `prefers-color-scheme` + `[data-theme="dark"]`
+ *
+ * PURE: no filesystem I/O, no @google/design.md dependency.
+ * Only imports from `../types`, `./to-design-md.resolve`, and `./to-preview-html.template`.
+ */
+import type { DesignTokenSet } from "../types";
+export interface ToPreviewHtmlOptions {
+    /** Design system name. Default: "Nebutra" */
+    name?: string;
+    /**
+     * Name of a theme token set (e.g. "themes/light") whose
+     * `color.background` and `color.foreground` tokens are used for the light
+     * mode CSS custom properties.
+     */
+    theme?: string;
+    /**
+     * Name of the dark-theme token set (e.g. "themes/dark").
+     * Defaults to the set named exactly "themes/dark".
+     * If not found, light values are used for dark mode (preview still renders).
+     */
+    darkTheme?: string;
+}
+/**
+ * Serialize an array of DTCG token sets into a self-contained HTML preview.
+ *
+ * @param sets    All token sets to merge (e.g. core + semantic + theme).
+ * @param options Optional overrides for name, theme, and darkTheme.
+ * @returns A deterministic, self-contained HTML string.
+ */
+export declare function serializeToPreviewHtml(sets: DesignTokenSet[], options?: ToPreviewHtmlOptions): string;
+//# sourceMappingURL=to-preview-html.d.ts.map

package/dist/serialize/to-preview-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-preview-html.d.ts","sourceRoot":"","sources":["../../src/serialize/to-preview-html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAkB/C,MAAM,WAAW,oBAAoB;IACnC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,cAAc,EAAE,EACtB,OAAO,CAAC,EAAE,oBAAoB,GAC7B,MAAM,CA2CR"}

package/dist/serialize/to-preview-html.js

@@ -0,0 +1,250 @@
+/**
+ * DTCG → preview.html serializer
+ *
+ * Converts an array of W3C DTCG token sets into a self-contained, dependency-free
+ * HTML document that visually renders the design system:
+ *
+ *   - Header with the design-system name
+ *   - Color swatches (name + resolved hex) for all brand/status roles
+ *   - Typography samples (h1 / body / label) using the resolved font family
+ *   - Component samples (button, card, input) built with resolved tokens
+ *   - Radius scale
+ *   - Light + dark rendering via CSS `prefers-color-scheme` + `[data-theme="dark"]`
+ *
+ * PURE: no filesystem I/O, no @google/design.md dependency.
+ * Only imports from `../types`, `./to-design-md.resolve`, and `./to-preview-html.template`.
+ */
+import { buildIndex, buildIndexForSet, buildRounded, buildTypography, resolveColorRoles, } from "./to-design-md.resolve";
+import { buildDocument, cssAttrValue, escapeHtml, } from "./to-preview-html.template";
+/**
+ * Serialize an array of DTCG token sets into a self-contained HTML preview.
+ *
+ * @param sets    All token sets to merge (e.g. core + semantic + theme).
+ * @param options Optional overrides for name, theme, and darkTheme.
+ * @returns A deterministic, self-contained HTML string.
+ */
+export function serializeToPreviewHtml(sets, options) {
+    const name = options?.name ?? "Nebutra";
+    const escapedName = escapeHtml(name);
+    // 1. Build flat indexes
+    const index = buildIndex(sets);
+    const themeIndex = options?.theme != null
+        ? buildIndexForSet(sets.find((s) => s.name === options.theme)?.tokens ?? {})
+        : new Map();
+    // Find dark theme set: honour explicit darkTheme option, then fall back to
+    // the set named exactly "themes/dark".  Do NOT fall through to arbitrary
+    // themes/* sets — that caused silent mis-detection.
+    const darkThemeName = options?.darkTheme ?? "themes/dark";
+    const darkThemeSet = sets.find((s) => s.name === darkThemeName);
+    const darkThemeIndex = darkThemeSet != null ? buildIndexForSet(darkThemeSet.tokens) : themeIndex;
+    // 2. Resolve tokens
+    const { roles: resolvedLightColors } = resolveColorRoles(index, themeIndex);
+    const { roles: resolvedDarkColors } = resolveColorRoles(index, darkThemeIndex);
+    const typography = buildTypography(index);
+    const rounded = buildRounded(index);
+    // 3. Build CSS variable blocks (all fields guaranteed present via ?? defaults)
+    const lightVars = buildCssVars(resolvedLightColors, "light");
+    const darkVars = buildCssVars(resolvedDarkColors, "dark");
+    // 4. Build content sections (use lightVars — CssVarBlock with guaranteed strings)
+    const swatchesHtml = buildSwatches(lightVars);
+    const typographyHtml = buildTypographySection(typography);
+    const componentsHtml = buildComponentsSection(lightVars, typography, rounded);
+    const radiusHtml = buildRadiusSection(rounded);
+    return buildDocument({
+        escapedName,
+        lightVars,
+        darkVars,
+        swatchesHtml,
+        typographyHtml,
+        componentsHtml,
+        radiusHtml,
+    });
+}
+// ─── CSS variable builder ──────────────────────────────────────────────────────
+function buildCssVars(colors, _mode) {
+    return {
+        primary: colors.primary ?? "#0033fe",
+        accent: colors.accent ?? "#0bf1c3",
+        tertiary: colors.tertiary ?? "#8b5cf6",
+        danger: colors.danger ?? "#ef4444",
+        warning: colors.warning ?? "#f59e0b",
+        success: colors.success ?? "#22c55e",
+        background: colors.background ?? (_mode === "light" ? "#ffffff" : "#0a0a0a"),
+        foreground: colors.foreground ?? (_mode === "light" ? "#0f172a" : "#fafafa"),
+    };
+}
+// ─── Section builders ──────────────────────────────────────────────────────────
+const COLOR_ROLE_LABELS = [
+    ["primary", "Primary"],
+    ["accent", "Accent"],
+    ["tertiary", "Tertiary"],
+    ["danger", "Danger"],
+    ["warning", "Warning"],
+    ["success", "Success"],
+    ["background", "Background"],
+    ["foreground", "Foreground"],
+];
+function buildSwatches(colors) {
+    const items = COLOR_ROLE_LABELS.map(([role, label]) => {
+        const hex = colors[role];
+        const textColor = isLightColor(hex) ? "#0a0a0a" : "#ffffff";
+        return `
+      <div class="swatch">
+        <div class="swatch-color" style="background:${hex};color:${textColor};">
+          <span class="swatch-hex">${escapeHtml(hex)}</span>
+        </div>
+        <div class="swatch-label">${escapeHtml(label)}</div>
+      </div>`;
+    }).join("\n");
+    return `<section class="preview-section">
+  <h2 class="section-title">Colors</h2>
+  <div class="swatch-grid">
+    ${items}
+  </div>
+</section>`;
+}
+/** Naively estimates whether a hex color is light (for contrast text). */
+function isLightColor(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Perceived luminance (ITU-R BT.709)
+    const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    return luminance > 0.5;
+}
+function buildTypographySection(typography) {
+    const samples = Object.entries(typography)
+        .map(([variant, entry]) => {
+        const tag = variant === "h1" ? "h1" : "p";
+        const sampleText = variant === "h1"
+            ? "The quick brown fox"
+            : variant === "body-md"
+                ? "Body text — the quick brown fox jumps over the lazy dog."
+                : "label / mono sample";
+        return `
+    <div class="type-sample">
+      <div class="type-meta">${escapeHtml(variant)} &mdash; ${escapeHtml(entry.fontSize)} &mdash; ${escapeHtml(entry.fontFamily)}</div>
+      <${tag} class="type-preview" style="font-family:${cssAttrValue(entry.fontFamily)};font-size:${cssAttrValue(entry.fontSize)};margin:0;">${escapeHtml(sampleText)}</${tag}>
+    </div>`;
+    })
+        .join("\n");
+    return `<section class="preview-section">
+  <h2 class="section-title">Typography</h2>
+  <div class="type-stack">
+    ${samples}
+  </div>
+</section>`;
+}
+function buildComponentsSection(colors, typography, rounded) {
+    const fontFamily = cssAttrValue(typography["body-md"]?.fontFamily ?? "system-ui, sans-serif");
+    const radius = cssAttrValue(rounded["md"] ?? rounded["sm"] ?? "0.375rem");
+    const radiusLg = cssAttrValue(rounded["lg"] ?? rounded["md"] ?? "0.5rem");
+    const buttonHtml = `
+    <div class="component-item">
+      <div class="component-label">Primary Button</div>
+      <button type="button" style="
+        background:${colors.primary};
+        color:#ffffff;
+        border:none;
+        border-radius:${radius};
+        padding:0.5rem 1.25rem;
+        font-family:${fontFamily};
+        font-size:0.875rem;
+        font-weight:600;
+        cursor:pointer;
+      ">Get Started</button>
+    </div>`;
+    const outlineButtonHtml = `
+    <div class="component-item">
+      <div class="component-label">Outline Button</div>
+      <button type="button" style="
+        background:transparent;
+        color:${colors.primary};
+        border:1.5px solid ${colors.primary};
+        border-radius:${radius};
+        padding:0.5rem 1.25rem;
+        font-family:${fontFamily};
+        font-size:0.875rem;
+        font-weight:600;
+        cursor:pointer;
+      ">Secondary</button>
+    </div>`;
+    const cardHtml = `
+    <div class="component-item">
+      <div class="component-label">Card</div>
+      <div style="
+        background:var(--preview-bg);
+        border:1px solid rgba(0,0,0,0.1);
+        border-radius:${radiusLg};
+        padding:1rem 1.25rem;
+        font-family:${fontFamily};
+        max-width:220px;
+        box-shadow:0 1px 3px rgba(0,0,0,0.08);
+      ">
+        <div style="font-weight:600;font-size:0.9rem;margin-bottom:0.25rem;">Card Title</div>
+        <div style="font-size:0.8rem;opacity:0.7;">Card body text — semantic tokens applied.</div>
+      </div>
+    </div>`;
+    const inputHtml = `
+    <div class="component-item">
+      <div class="component-label">Input</div>
+      <input
+        data-allow-native
+        type="text"
+        placeholder="Placeholder text…"
+        style="
+          background:var(--preview-bg);
+          color:var(--preview-fg);
+          border:1.5px solid rgba(0,0,0,0.18);
+          border-radius:${radius};
+          padding:0.5rem 0.75rem;
+          font-family:${fontFamily};
+          font-size:0.875rem;
+          outline:none;
+          width:200px;
+        "
+      />
+    </div>`;
+    const badgeHtml = `
+    <div class="component-item">
+      <div class="component-label">Status Badges</div>
+      <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
+        <span style="background:${colors.success};color:#fff;border-radius:999px;padding:0.2rem 0.6rem;font-size:0.7rem;font-weight:600;font-family:${fontFamily};">Success</span>
+        <span style="background:${colors.warning};color:#fff;border-radius:999px;padding:0.2rem 0.6rem;font-size:0.7rem;font-weight:600;font-family:${fontFamily};">Warning</span>
+        <span style="background:${colors.danger};color:#fff;border-radius:999px;padding:0.2rem 0.6rem;font-size:0.7rem;font-weight:600;font-family:${fontFamily};">Danger</span>
+      </div>
+    </div>`;
+    return `<section class="preview-section">
+  <h2 class="section-title">Components</h2>
+  <div class="component-grid">
+    ${buttonHtml}
+    ${outlineButtonHtml}
+    ${cardHtml}
+    ${inputHtml}
+    ${badgeHtml}
+  </div>
+</section>`;
+}
+function buildRadiusSection(rounded) {
+    const entries = Object.entries(rounded);
+    if (entries.length === 0) {
+        return `<section class="preview-section">
+  <h2 class="section-title">Radius Scale</h2>
+  <p style="opacity:0.6;font-size:0.875rem;">No radius tokens found in the provided token sets.</p>
+</section>`;
+    }
+    const items = entries
+        .map(([key, value]) => `
+    <div class="radius-item">
+      <div class="radius-demo" style="border-radius:${cssAttrValue(value)};"></div>
+      <div class="radius-name">${escapeHtml(key)}</div>
+      <div class="radius-value">${escapeHtml(value)}</div>
+    </div>`)
+        .join("\n");
+    return `<section class="preview-section">
+  <h2 class="section-title">Radius Scale</h2>
+  <div class="radius-grid">
+    ${items}
+  </div>
+</section>`;
+}

package/dist/serialize/to-preview-html.template.d.ts

@@ -0,0 +1,75 @@
+/**
+ * to-preview-html.template.ts
+ *
+ * HTML / CSS template layer for the DTCG → preview.html serializer.
+ *
+ * Exports:
+ *   - escapeHtml        — generic HTML-attribute / content escaping
+ *   - cssAttrValue      — escapes a token value for use inside style="…"
+ *   - cssVarsDecl       — turns a CssVarBlock into CSS custom-property lines
+ *   - buildDocument     — assembles the full <!DOCTYPE html> string
+ *
+ * Pure: no filesystem I/O, no token resolution.
+ */
+/**
+ * Escape a string for safe insertion into HTML content or attribute values.
+ * Converts the five characters that have special meaning in HTML.
+ */
+export declare function escapeHtml(value: string): string;
+/**
+ * Escape a token-derived value for safe use inside a `style="…"` attribute.
+ *
+ * Strategy:
+ *  1. Strip CSS structural characters that could inject extra declarations or
+ *     break the style attribute — specifically `;`, `{`, `}`, `<`, `>`.
+ *     NOTE: We deliberately keep `"` in the string before step 2 so that
+ *     font-family values like `"Geist", sans-serif` are preserved; `escapeHtml`
+ *     will turn those `"` into `&quot;` which the browser decodes correctly.
+ *  2. HTML-escape the result so embedded quotes survive as `&quot;` and any
+ *     remaining angle brackets become `&lt;`/`&gt;`.
+ *
+ * Example:
+ *   cssAttrValue('"Geist", "Noto Sans SC", sans-serif')
+ *   → '&quot;Geist&quot;, &quot;Noto Sans SC&quot;, sans-serif'
+ *
+ *   cssAttrValue('red;display:none')
+ *   → 'reddisplay:none'   (semicolon stripped before HTML-escape)
+ */
+export declare function cssAttrValue(raw: string): string;
+export interface CssVarBlock {
+    primary: string;
+    accent: string;
+    tertiary: string;
+    danger: string;
+    warning: string;
+    success: string;
+    background: string;
+    foreground: string;
+}
+/**
+ * Render a CssVarBlock as indented CSS custom-property declarations (no braces).
+ * Values come from the validated toHex path so they are hex strings, but we
+ * wrap in cssAttrValue for consistency (harmless for safe hex values).
+ */
+export declare function cssVarsDecl(vars: CssVarBlock): string;
+export interface DocumentArgs {
+    escapedName: string;
+    lightVars: CssVarBlock;
+    darkVars: CssVarBlock;
+    swatchesHtml: string;
+    typographyHtml: string;
+    componentsHtml: string;
+    radiusHtml: string;
+}
+/**
+ * Assemble the full <!DOCTYPE html> preview document.
+ *
+ * Dark-mode CSS is emitted as TWO separate, valid rules:
+ *   1. `:root[data-theme="dark"]`  — explicit toggle
+ *   2. `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`
+ *      — OS/browser preference (but not when the user has explicitly chosen light)
+ *
+ * This avoids the invalid CSS form of comma-joining a selector with an at-rule.
+ */
+export declare function buildDocument(args: DocumentArgs): string;
+//# sourceMappingURL=to-preview-html.template.d.ts.map

package/dist/serialize/to-preview-html.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-preview-html.template.d.ts","sourceRoot":"","sources":["../../src/serialize/to-preview-html.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAIH;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEhD;AAID,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAarD;AAID,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,CA8LxD"}