arggon-harness 0.1.0

package/dist/plugin/tools/spec-design-hifi.js

@@ -0,0 +1,653 @@
+import * as fs from "fs/promises";
+import * as path from "path";
+import { z } from "zod";
+// ── Helpers ──────────────────────────────────────────────────────────
+const hexColorRegex = /^#[0-9a-fA-F]{3,8}$/;
+function isValidHex(val) {
+    return hexColorRegex.test(val);
+}
+// ── Zod schemas ──────────────────────────────────────────────────────
+const ColorGroupSchema = z.object({
+    base: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    hover: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }).optional(),
+    active: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }).optional(),
+    disabled: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }).optional(),
+    contrast: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }).optional(),
+});
+const SemanticColorsSchema = z.object({
+    success: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    warning: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    error: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    info: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+});
+const SurfaceColorsSchema = z.object({
+    background: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    foreground: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    card: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    border: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+    muted: z.string().refine(isValidHex, { message: "Must be a valid hex color (#RRGGBB)" }),
+});
+const ColorPaletteSchema = z.object({
+    primary: ColorGroupSchema,
+    secondary: ColorGroupSchema,
+    accent: ColorGroupSchema,
+    neutral: ColorGroupSchema,
+    semantic: SemanticColorsSchema,
+    surfaces: SurfaceColorsSchema,
+});
+const FontFamilySchema = z.object({
+    name: z.string().min(1),
+    stack: z.string().min(1),
+    role: z.enum(["heading", "body", "monospace"]),
+});
+const TypeScaleSchema = z.object({
+    name: z.string().min(1),
+    size: z.string().min(1),
+    weight: z.number().min(100).max(900),
+    line_height: z.number().min(0.5).max(3),
+    letter_spacing: z.string().optional(),
+    role: z.string().min(1),
+});
+const TypographySchema = z.object({
+    families: z.array(FontFamilySchema).min(1),
+    scale: z.array(TypeScaleSchema).min(1),
+});
+const SpacingSchema = z.object({
+    base_unit: z.number().min(1).max(32),
+    scale: z.array(z.number().min(0)),
+});
+const ComponentStateSchema = z.object({
+    name: z.string().min(1),
+    properties: z.record(z.string(), z.any()),
+});
+const ComponentVariantSchema = z.object({
+    name: z.string().min(1),
+    description: z.string().optional(),
+    properties: z.record(z.string(), z.any()).optional(),
+    states: z.array(ComponentStateSchema).optional(),
+});
+const ComponentLibrarySchema = z.object({
+    button: z.array(ComponentVariantSchema).optional(),
+    card: z.array(ComponentVariantSchema).optional(),
+    input: z.array(ComponentVariantSchema).optional(),
+    navigation: z.array(ComponentVariantSchema).optional(),
+});
+const BreakpointSchema = z.object({
+    name: z.string().min(1),
+    min_width: z.number().min(0),
+    columns: z.number().min(1).max(24),
+    rules: z.array(z.string()).optional(),
+});
+const DesignHiFiInputSchema = z.object({
+    changeName: z.string().min(1),
+    color_palette: ColorPaletteSchema,
+    typography: TypographySchema,
+    spacing: SpacingSchema,
+    component_library: ComponentLibrarySchema.optional(),
+    breakpoints: z.array(BreakpointSchema).optional(),
+    html_preview: z.boolean().optional().default(true),
+});
+// ── Exported handler ─────────────────────────────────────────────────
+export async function specDesignHiFi(args, ctx) {
+    try {
+        // Validate input via Zod
+        const parsed = DesignHiFiInputSchema.parse(args);
+        const { changeName, color_palette, typography, spacing, component_library, breakpoints, html_preview } = parsed;
+        const changeDir = path.join(ctx.projectRoot, "spec", "changes", changeName);
+        // Verify change directory exists
+        try {
+            await fs.access(changeDir);
+        }
+        catch {
+            return {
+                output: `Error: Change "${changeName}" does not exist. Use spec_change_new to create it first.`,
+                metadata: { error: true, changeName },
+            };
+        }
+        // Build artifact content matching the template structure
+        const artifact = {
+            id: changeName,
+            schema: "spec-driven",
+            agent: {
+                context_files: [],
+                affected_paths: [`spec/changes/${changeName}/design-hifi.yaml`],
+            },
+            body: {
+                color_palette: {
+                    primary: {
+                        base: color_palette.primary.base,
+                        ...(color_palette.primary.hover ? { hover: color_palette.primary.hover } : {}),
+                        ...(color_palette.primary.active ? { active: color_palette.primary.active } : {}),
+                        ...(color_palette.primary.disabled ? { disabled: color_palette.primary.disabled } : {}),
+                        ...(color_palette.primary.contrast ? { contrast: color_palette.primary.contrast } : {}),
+                    },
+                    secondary: {
+                        base: color_palette.secondary.base,
+                        ...(color_palette.secondary.hover ? { hover: color_palette.secondary.hover } : {}),
+                        ...(color_palette.secondary.active ? { active: color_palette.secondary.active } : {}),
+                        ...(color_palette.secondary.disabled ? { disabled: color_palette.secondary.disabled } : {}),
+                        ...(color_palette.secondary.contrast ? { contrast: color_palette.secondary.contrast } : {}),
+                    },
+                    accent: {
+                        base: color_palette.accent.base,
+                        ...(color_palette.accent.hover ? { hover: color_palette.accent.hover } : {}),
+                        ...(color_palette.accent.active ? { active: color_palette.accent.active } : {}),
+                        ...(color_palette.accent.disabled ? { disabled: color_palette.accent.disabled } : {}),
+                        ...(color_palette.accent.contrast ? { contrast: color_palette.accent.contrast } : {}),
+                    },
+                    neutral: {
+                        base: color_palette.neutral.base,
+                        ...(color_palette.neutral.hover ? { hover: color_palette.neutral.hover } : {}),
+                        ...(color_palette.neutral.active ? { active: color_palette.neutral.active } : {}),
+                        ...(color_palette.neutral.disabled ? { disabled: color_palette.neutral.disabled } : {}),
+                        ...(color_palette.neutral.contrast ? { contrast: color_palette.neutral.contrast } : {}),
+                    },
+                    semantic: {
+                        success: color_palette.semantic.success,
+                        warning: color_palette.semantic.warning,
+                        error: color_palette.semantic.error,
+                        info: color_palette.semantic.info,
+                    },
+                    surfaces: {
+                        background: color_palette.surfaces.background,
+                        foreground: color_palette.surfaces.foreground,
+                        card: color_palette.surfaces.card,
+                        border: color_palette.surfaces.border,
+                        muted: color_palette.surfaces.muted,
+                    },
+                },
+                typography: {
+                    families: typography.families.map((f) => ({
+                        name: f.name,
+                        stack: f.stack,
+                        role: f.role,
+                    })),
+                    scale: typography.scale.map((t) => ({
+                        name: t.name,
+                        size: t.size,
+                        weight: t.weight,
+                        line_height: t.line_height,
+                        ...(t.letter_spacing ? { letter_spacing: t.letter_spacing } : {}),
+                        role: t.role,
+                    })),
+                },
+                spacing: {
+                    base_unit: spacing.base_unit,
+                    scale: spacing.scale,
+                },
+                ...(component_library
+                    ? {
+                        component_library: {
+                            ...(component_library.button
+                                ? {
+                                    button: component_library.button.map((v) => ({
+                                        name: v.name,
+                                        ...(v.description ? { description: v.description } : {}),
+                                        ...(v.properties && Object.keys(v.properties).length > 0
+                                            ? { properties: v.properties }
+                                            : {}),
+                                        ...(v.states && v.states.length > 0
+                                            ? {
+                                                states: v.states.map((s) => ({
+                                                    name: s.name,
+                                                    properties: s.properties,
+                                                })),
+                                            }
+                                            : {}),
+                                    })),
+                                }
+                                : {}),
+                            ...(component_library.card
+                                ? {
+                                    card: component_library.card.map((v) => ({
+                                        name: v.name,
+                                        ...(v.description ? { description: v.description } : {}),
+                                        ...(v.properties && Object.keys(v.properties).length > 0
+                                            ? { properties: v.properties }
+                                            : {}),
+                                        ...(v.states && v.states.length > 0
+                                            ? {
+                                                states: v.states.map((s) => ({
+                                                    name: s.name,
+                                                    properties: s.properties,
+                                                })),
+                                            }
+                                            : {}),
+                                    })),
+                                }
+                                : {}),
+                            ...(component_library.input
+                                ? {
+                                    input: component_library.input.map((v) => ({
+                                        name: v.name,
+                                        ...(v.description ? { description: v.description } : {}),
+                                        ...(v.properties && Object.keys(v.properties).length > 0
+                                            ? { properties: v.properties }
+                                            : {}),
+                                        ...(v.states && v.states.length > 0
+                                            ? {
+                                                states: v.states.map((s) => ({
+                                                    name: s.name,
+                                                    properties: s.properties,
+                                                })),
+                                            }
+                                            : {}),
+                                    })),
+                                }
+                                : {}),
+                            ...(component_library.navigation
+                                ? {
+                                    navigation: component_library.navigation.map((v) => ({
+                                        name: v.name,
+                                        ...(v.description ? { description: v.description } : {}),
+                                        ...(v.properties && Object.keys(v.properties).length > 0
+                                            ? { properties: v.properties }
+                                            : {}),
+                                        ...(v.states && v.states.length > 0
+                                            ? {
+                                                states: v.states.map((s) => ({
+                                                    name: s.name,
+                                                    properties: s.properties,
+                                                })),
+                                            }
+                                            : {}),
+                                    })),
+                                }
+                                : {}),
+                        },
+                    }
+                    : {}),
+                ...(breakpoints
+                    ? {
+                        breakpoints: breakpoints.map((b) => ({
+                            name: b.name,
+                            min_width: b.min_width,
+                            columns: b.columns,
+                            ...(b.rules && b.rules.length > 0 ? { rules: b.rules } : {}),
+                        })),
+                    }
+                    : {}),
+            },
+        };
+        // Write YAML file
+        const yamlContent = buildYaml(artifact);
+        const outputPath = path.join(changeDir, "design-hifi.yaml");
+        await fs.writeFile(outputPath, yamlContent, "utf-8");
+        // Generate HTML preview if requested
+        let htmlPreview;
+        if (html_preview) {
+            htmlPreview = generateStyleGuideHtml(artifact);
+            const htmlPath = path.join(changeDir, "design-hifi-preview.html");
+            await fs.writeFile(htmlPath, htmlPreview, "utf-8");
+        }
+        return {
+            output: `Created hi-fi design artifact at spec/changes/${changeName}/design-hifi.yaml` +
+                (htmlPreview
+                    ? `\nHTML style guide preview: spec/changes/${changeName}/design-hifi-preview.html`
+                    : ""),
+            metadata: {
+                changeName,
+                artifactPath: `spec/changes/${changeName}/design-hifi.yaml`,
+                colorsCount: 6, // primary, secondary, accent, neutral, semantic, surfaces
+                typographyFamilies: typography.families.length,
+                typeScaleItems: typography.scale.length,
+                spacingScale: spacing.scale.length,
+                componentVariants: component_library
+                    ? Object.values(component_library).reduce((sum, arr) => sum + (arr?.length || 0), 0)
+                    : 0,
+                breakpointsCount: breakpoints?.length || 0,
+                htmlPreview: !!html_preview,
+            },
+        };
+    }
+    catch (error) {
+        if (error instanceof z.ZodError) {
+            const issues = error.issues
+                .map((i) => `${i.path.join(".")}: ${i.message}`)
+                .join("; ");
+            return {
+                output: `Validation error: ${issues}`,
+                metadata: { error: true, validationErrors: error.issues },
+            };
+        }
+        return {
+            output: `Error: ${error.message}`,
+            metadata: { error: true },
+        };
+    }
+}
+// ── YAML builder (pure string builder, no external deps) ────────────
+function buildYaml(obj, indent = 0) {
+    const pad = "  ".repeat(indent);
+    let result = "";
+    for (const [key, value] of Object.entries(obj)) {
+        if (value === undefined || value === null)
+            continue;
+        if (Array.isArray(value)) {
+            if (value.length === 0) {
+                result += `${pad}${key}: []\n`;
+            }
+            else {
+                result += `${pad}${key}:\n`;
+                for (const item of value) {
+                    if (typeof item === "object" && item !== null) {
+                        result += `${pad}- ${buildInlineYaml(item, indent + 1).trimStart()}\n`;
+                    }
+                    else {
+                        result += `${pad}- ${formatYamlValue(item)}\n`;
+                    }
+                }
+            }
+        }
+        else if (typeof value === "object" && value !== null) {
+            result += `${pad}${key}:\n`;
+            result += buildYaml(value, indent + 1);
+        }
+        else {
+            result += `${pad}${key}: ${formatYamlValue(value)}\n`;
+        }
+    }
+    return result;
+}
+function buildInlineYaml(obj, indent) {
+    const pad = "  ".repeat(indent);
+    let result = "";
+    const entries = Object.entries(obj).filter(([_, v]) => v !== undefined && v !== null);
+    for (let i = 0; i < entries.length; i++) {
+        const [key, value] = entries[i];
+        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+            result += `\n${pad}${key}:\n`;
+            result += buildYaml(value, indent + 1);
+        }
+        else if (Array.isArray(value)) {
+            if (value.length === 0) {
+                result += `${i > 0 ? pad : ""}${key}: []\n`;
+            }
+            else {
+                result += `${i > 0 ? pad : ""}${key}:\n`;
+                for (const item of value) {
+                    if (typeof item === "object" && item !== null) {
+                        result += `${pad}- ${buildInlineYaml(item, indent + 1).trimStart()}\n`;
+                    }
+                    else {
+                        result += `${pad}- ${formatYamlValue(item)}\n`;
+                    }
+                }
+            }
+        }
+        else {
+            const prefix = i > 0 && typeof entries[i - 1][1] === "object" ? pad : "";
+            result += `${prefix}${key}: ${formatYamlValue(value)}\n`;
+        }
+    }
+    return result;
+}
+function formatYamlValue(value) {
+    if (typeof value === "string") {
+        if (value.includes("\n")) {
+            return `|\n  ${value.replace(/\n/g, "\n  ")}`;
+        }
+        if (value.includes(":") || value.includes("#") || value === "" || value.startsWith(" ")) {
+            return `"${value}"`;
+        }
+        return value;
+    }
+    return String(value);
+}
+// ── HTML style guide preview generator ──────────────────────────────
+function generateStyleGuideHtml(artifact) {
+    const body = artifact.body;
+    const palette = body.color_palette || {};
+    const typography = body.typography || {};
+    const spacing = body.spacing || {};
+    const components = body.component_library || {};
+    const breakpoints = body.breakpoints || [];
+    // ── Color swatches ─────────────────────────────────────────────────
+    function renderColorGroup(name, group) {
+        if (!group)
+            return "";
+        const keys = ["base", "hover", "active", "disabled", "contrast"];
+        const swatches = keys
+            .filter((k) => group[k])
+            .map((k) => `
+      <div class="swatch" style="background:${group[k]}; color: ${k === "contrast" ? group.base : "#fff"};">
+        <span class="swatch-label">${k}</span>
+        <span class="swatch-hex">${group[k]}</span>
+      </div>`)
+            .join("");
+        return `
+    <div class="section">
+      <h3>${escapeHtml(name)}</h3>
+      <div class="swatch-group">${swatches}</div>
+    </div>`;
+    }
+    function renderSemanticColors(sem) {
+        if (!sem)
+            return "";
+        const swatches = Object.entries(sem)
+            .map(([k, v]) => `
+      <div class="swatch" style="background:${v};">
+        <span class="swatch-label">${k}</span>
+        <span class="swatch-hex">${v}</span>
+      </div>`)
+            .join("");
+        return `
+    <div class="section">
+      <h3>semantic</h3>
+      <div class="swatch-group">${swatches}</div>
+    </div>`;
+    }
+    function renderSurfaceColors(surfaces) {
+        if (!surfaces)
+            return "";
+        const swatches = Object.entries(surfaces)
+            .map(([k, v]) => `
+      <div class="swatch" style="background:${v}; ${k === "foreground" || k === "border" ? "color:#fff" : ""}; ${k === "background" || k === "card" || k === "muted" ? "border:1px solid #ddd;" : ""}">
+        <span class="swatch-label">${k}</span>
+        <span class="swatch-hex">${v}</span>
+      </div>`)
+            .join("");
+        return `
+    <div class="section">
+      <h3>surfaces</h3>
+      <div class="swatch-group">${swatches}</div>
+    </div>`;
+    }
+    // ── Typography samples ─────────────────────────────────────────────
+    function renderTypography() {
+        const families = typography.families || [];
+        const scale = typography.scale || [];
+        const familyHtml = families
+            .map((f) => `
+    <div style="margin-bottom:8px;">
+      <span style="font-size:12px;color:#999;font-family:monospace;">${escapeHtml(f.name)}</span>
+      <span style="font-size:11px;color:#aaa;font-family:monospace;margin-left:8px;">${escapeHtml(f.role)}</span>
+      <div style="font-size:12px;color:#bbb;font-family:monospace;word-break:break-all;">${escapeHtml(f.stack)}</div>
+    </div>`)
+            .join("");
+        const scaleHtml = scale
+            .map((t) => {
+            const style = `font-size:${t.size};font-weight:${t.weight};line-height:${t.line_height};${t.letter_spacing ? `letter-spacing:${t.letter_spacing};` : ""}`;
+            return `
+    <div class="type-sample" style="margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #eee;">
+      <div style="${style}margin:0;">
+        ${escapeHtml(t.name || t.role)} — The quick brown fox jumps over the lazy dog.
+      </div>
+      <div style="font-size:11px;color:#999;margin-top:4px;font-family:monospace;">
+        ${escapeHtml(t.name)} / ${t.size} / ${t.weight}w / ${t.line_height}lh${t.letter_spacing ? ` / ${t.letter_spacing}` : ""} / ${t.role}
+      </div>
+    </div>`;
+        })
+            .join("");
+        return `
+    <div class="section">
+      <h3>Font Families</h3>
+      ${familyHtml}
+      <h3 style="margin-top:24px;">Type Scale</h3>
+      ${scaleHtml}
+    </div>`;
+    }
+    // ── Spacing blocks ─────────────────────────────────────────────────
+    function renderSpacing() {
+        const base = spacing.base_unit || 4;
+        const scale = spacing.scale || [];
+        const blocks = scale
+            .map((multiplier) => {
+            const px = base * multiplier;
+            return `
+    <div class="spacing-row">
+      <span class="spacing-label">${multiplier}×</span>
+      <span class="spacing-value">${px}px</span>
+      <div class="spacing-block" style="width:${Math.min(px, 640)}px;height:16px;background:#3B82F6;border-radius:2px;${px === 0 ? "width:8px;background:transparent;border-left:1px dashed #999;" : ""}"></div>
+    </div>`;
+        })
+            .join("");
+        return `
+    <div class="section">
+      <h3>Spacing Scale (base unit: ${base}px)</h3>
+      ${blocks}
+    </div>`;
+    }
+    // ── Component library ──────────────────────────────────────────────
+    function renderComponentGroup(type, variants) {
+        if (!variants || variants.length === 0)
+            return "";
+        const variantHtml = variants
+            .map((v) => {
+            const states = v.states || [];
+            const stateHtml = states
+                .map((s) => `
+        <div class="state-card">
+          <div class="state-name">${escapeHtml(s.name)}</div>
+          <div class="state-props">
+            ${Object.entries(s.properties || {})
+                .map(([pk, pv]) => `<span class="prop">${escapeHtml(pk)}: <strong>${escapeHtml(String(pv))}</strong></span>`)
+                .join("\n            ")}
+          </div>
+        </div>`)
+                .join("");
+            return `
+      <div class="variant-card">
+        <div class="variant-header">
+          <strong>${escapeHtml(v.name)}</strong>
+          ${v.description ? `<p class="variant-desc">${escapeHtml(v.description)}</p>` : ""}
+        </div>
+        <div class="variant-props">
+          ${Object.entries(v.properties || {})
+                .slice(0, 8)
+                .map(([pk, pv]) => `<span class="prop">${escapeHtml(pk)}: <strong>${escapeHtml(String(pv)).substring(0, 60)}</strong></span>`)
+                .join("\n          ")}
+          ${Object.keys(v.properties || {}).length > 8 ? `<span class="prop" style="color:#999;">… and ${Object.keys(v.properties).length - 8} more</span>` : ""}
+        </div>
+        ${stateHtml ? `<div class="states-section"><strong>States:</strong>${stateHtml}</div>` : ""}
+      </div>`;
+        })
+            .join("");
+        return `
+    <div class="section">
+      <h3>${escapeHtml(type)}</h3>
+      <div class="variants-grid">${variantHtml}</div>
+    </div>`;
+    }
+    // ── Breakpoints ────────────────────────────────────────────────────
+    function renderBreakpoints() {
+        if (!breakpoints.length)
+            return "";
+        const bpHtml = breakpoints
+            .map((bp) => `
+    <div class="bp-card">
+      <div class="bp-header">
+        <strong>${escapeHtml(bp.name)}</strong>
+        <span class="bp-meta">≥${bp.min_width}px / ${bp.columns} cols</span>
+      </div>
+      ${bp.rules && bp.rules.length > 0
+            ? `<ul class="bp-rules">
+          ${bp.rules.map((r) => `<li>${escapeHtml(r)}</li>`).join("")}
+        </ul>`
+            : ""}
+    </div>`)
+            .join("");
+        return `
+    <div class="section">
+      <h3>Breakpoints</h3>
+      <div class="bps-grid">${bpHtml}</div>
+    </div>`;
+    }
+    // ── Assemble ───────────────────────────────────────────────────────
+    const colorSection = `
+    <div class="section">
+      <h2>Color Palette</h2>
+      ${renderColorGroup("primary", palette.primary)}
+      ${renderColorGroup("secondary", palette.secondary)}
+      ${renderColorGroup("accent", palette.accent)}
+      ${renderColorGroup("neutral", palette.neutral)}
+      ${renderSemanticColors(palette.semantic)}
+      ${renderSurfaceColors(palette.surfaces)}
+    </div>`;
+    const typographySection = renderTypography();
+    const spacingSection = renderSpacing();
+    const componentsSection = `
+    <div class="section">
+      <h2>Component Library</h2>
+      ${renderComponentGroup("button", components.button)}
+      ${renderComponentGroup("card", components.card)}
+      ${renderComponentGroup("input", components.input)}
+      ${renderComponentGroup("navigation", components.navigation)}
+    </div>`;
+    const breakpointsSection = renderBreakpoints();
+    return `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><title>Style Guide Preview</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 24px; background: #f0f2f5; color: #1a1a2e; }
+  .container { max-width: 1100px; margin: 0 auto; background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+  h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: #111; }
+  h2 { font-size: 20px; font-weight: 600; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; color: #1f2937; }
+  h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
+  .section { margin-bottom: 32px; }
+  .swatch-group { display: flex; flex-wrap: wrap; gap: 8px; }
+  .swatch { display: flex; flex-direction: column; justify-content: flex-end; width: 120px; height: 80px; padding: 6px 8px; border-radius: 6px; font-size: 11px; font-family: monospace; position: relative; }
+  .swatch-label { font-weight: 600; text-transform: uppercase; opacity: 0.85; }
+  .swatch-hex { opacity: 0.7; font-size: 10px; }
+  .type-sample { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+  .spacing-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+  .spacing-label { width: 40px; font-size: 12px; font-family: monospace; color: #6b7280; text-align: right; }
+  .spacing-value { width: 60px; font-size: 11px; font-family: monospace; color: #9ca3af; }
+  .spacing-block { flex-shrink: 0; transition: width 0.1s; }
+  .variants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+  .variant-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #fafafa; }
+  .variant-header { margin-bottom: 8px; }
+  .variant-desc { font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.4; }
+  .variant-props { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
+  .prop { font-size: 10px; font-family: monospace; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #374151; }
+  .states-section { border-top: 1px solid #e5e7eb; padding-top: 8px; margin-top: 8px; font-size: 12px; color: #374151; }
+  .state-card { margin-top: 6px; padding: 6px; background: #fff; border: 1px solid #f3f4f6; border-radius: 4px; }
+  .state-name { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
+  .state-props { display: flex; flex-wrap: wrap; gap: 3px; }
+  .bps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+  .bp-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #fafafa; }
+  .bp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+  .bp-meta { font-size: 11px; font-family: monospace; color: #6b7280; }
+  .bp-rules { list-style: none; font-size: 12px; color: #4b5563; }
+  .bp-rules li::before { content: "• "; color: #3B82F6; }
+  .subtitle { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
+</style></head>
+<body><div class="container">
+  <h1>Style Guide: ${escapeHtml(artifact.id)}</h1>
+  <div class="subtitle">High-fidelity design system specification</div>
+  ${colorSection}
+  ${typographySection}
+  ${spacingSection}
+  ${componentsSection}
+  ${breakpointsSection}
+</div></body></html>`;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+//# sourceMappingURL=spec-design-hifi.js.map