foss-design 0.1.0

package/dist/cli.js

@@ -0,0 +1,3064 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import path18 from "path";
+import { parseArgs } from "util";
+
+// src/core/paths.ts
+import fs from "fs";
+import { createRequire } from "module";
+import path2 from "path";
+import { fileURLToPath } from "url";
+
+// src/core/text.ts
+import path from "path";
+function titleize(stem) {
+  const words = stem.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[-_.]+/g, " ").trim().split(/\s+/);
+  const text = words.join(" ").toLowerCase();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function slugify(stem) {
+  return stem.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase() || "item";
+}
+function fileStem(file) {
+  const base = path.basename(file, path.extname(file));
+  if (base === "index") return path.basename(path.dirname(file));
+  return base;
+}
+function toPosix(p) {
+  return p.split(path.sep).join("/");
+}
+function parseFrontmatter(source) {
+  const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(source);
+  if (!match) return { data: {}, body: source };
+  const data = {};
+  for (const line of match[1].split(/\r?\n/)) {
+    const pair = /^([\w-]+)\s*:\s*(.*)$/.exec(line);
+    if (pair) data[pair[1]] = pair[2].replace(/^["']|["']$/g, "").trim();
+  }
+  return { data, body: source.slice(match[0].length) };
+}
+function parseDocTags(source) {
+  const block = /^\s*(?:\/\*\*?([\s\S]*?)\*\/|<!--([\s\S]*?)-->)/.exec(source.replace(/^<!doctype[^>]*>\s*/i, ""));
+  const tags = {};
+  if (!block) return tags;
+  const lines = (block[1] ?? block[2] ?? "").split(/\r?\n/).map((line) => line.replace(/^\s*\*?\s?/, ""));
+  let current = null;
+  const flush = () => {
+    if (!current) return;
+    const list = tags[current.tag] ?? [];
+    list.push(current.value.join("\n").trim());
+    tags[current.tag] = list;
+  };
+  for (const line of lines) {
+    const tag = /^@([\w-]+)\s*(.*)$/.exec(line.trim());
+    if (tag) {
+      flush();
+      current = { tag: tag[1], value: [tag[2]] };
+    } else if (current) current.value.push(line);
+  }
+  flush();
+  return tags;
+}
+function firstHeading(markdown) {
+  const match = /^#\s+(.+)$/m.exec(markdown);
+  return match ? match[1].trim() : null;
+}
+function escapeHtml(text) {
+  return text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+}
+function scriptJson(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+
+// src/core/paths.ts
+var DESIGN_DIR = ".design";
+function designPaths(root) {
+  const design = path2.join(root, DESIGN_DIR);
+  const cache = path2.join(design, ".cache");
+  return {
+    root,
+    design,
+    config: path2.join(design, "design.json"),
+    system: path2.join(design, "system"),
+    canvases: path2.join(design, "canvas"),
+    cache,
+    entries: path2.join(cache, "entries"),
+    snapshots: path2.join(cache, "snapshots"),
+    shots: path2.join(cache, "shots")
+  };
+}
+function findProjectRoot(from = process.cwd()) {
+  let dir = path2.resolve(from);
+  for (; ; ) {
+    const candidate = path2.join(dir, DESIGN_DIR);
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) return dir;
+    const parent = path2.dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+function relToRoot(paths, abs) {
+  return toPosix(path2.relative(paths.root, abs));
+}
+function relToDesign(paths, abs) {
+  return toPosix(path2.relative(paths.design, abs));
+}
+function isInside(parent, child) {
+  const rel = path2.relative(parent, child);
+  return rel === "" || !rel.startsWith("..") && !path2.isAbsolute(rel);
+}
+var PKG_ROOT = path2.resolve(fileURLToPath(new URL("..", import.meta.url)));
+var PKG = {
+  root: PKG_ROOT,
+  manifest: path2.join(PKG_ROOT, "package.json"),
+  runtime: path2.join(PKG_ROOT, "dist", "runtime", "index.js"),
+  baseCss: path2.join(PKG_ROOT, "dist", "runtime", "base.css"),
+  viewer: path2.join(PKG_ROOT, "dist", "viewer"),
+  cli: path2.join(PKG_ROOT, "dist", "cli.js")
+};
+function packageVersion() {
+  try {
+    return JSON.parse(fs.readFileSync(PKG.manifest, "utf8")).version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+function resolveFrom(anchor, request) {
+  try {
+    return createRequire(anchor).resolve(request);
+  } catch {
+    return null;
+  }
+}
+
+// src/cli/commands/build.ts
+import { spawnSync } from "child_process";
+import fs9 from "fs";
+import path11 from "path";
+
+// src/build/static.ts
+import fs8 from "fs";
+import path10 from "path";
+import { build } from "vite";
+
+// src/core/project.ts
+import fs5 from "fs";
+import path6 from "path";
+
+// src/core/canvas.ts
+import { createHash } from "crypto";
+import fs2 from "fs";
+import path3 from "path";
+
+// src/shared/devices.ts
+var DEVICES = {
+  phone: { width: 390, height: 844, label: "Phone" },
+  "phone-sm": { width: 375, height: 667, label: "Phone S" },
+  "phone-lg": { width: 430, height: 932, label: "Phone L" },
+  tablet: { width: 834, height: 1194, label: "Tablet" },
+  "tablet-landscape": { width: 1194, height: 834, label: "Tablet landscape" },
+  laptop: { width: 1280, height: 800, label: "Laptop" },
+  desktop: { width: 1440, height: 900, label: "Desktop" },
+  wide: { width: 1920, height: 1080, label: "Wide" }
+};
+var DEVICE_NAMES = Object.keys(DEVICES);
+var DEFAULT_DEVICE = "desktop";
+
+// src/core/schema.ts
+import { z } from "zod";
+var id = z.string().regex(/^[a-z0-9][a-z0-9_-]*$/i, 'use letters, digits, "-" and "_", starting with a letter or digit');
+var theme = z.enum(["light", "dark"]);
+var position = { x: z.number().optional(), y: z.number().optional() };
+var size = {
+  device: z.enum(DEVICE_NAMES).optional(),
+  width: z.number().int().min(80).max(8e3).optional(),
+  height: z.union([z.number().int().min(80).max(4e4), z.literal("auto")]).optional()
+};
+var DesignConfigSchema = z.strictObject({
+  $schema: z.string().optional(),
+  name: z.string().min(1).optional(),
+  /** Import aliases for screens, relative to the project root: `{ "@/": "src/" }`. */
+  alias: z.record(z.string(), z.string()).optional(),
+  /** Extra folders Tailwind scans for class names, relative to the project root. */
+  sources: z.array(z.string()).optional(),
+  port: z.number().int().min(1).max(65535).optional()
+});
+var SystemConfigSchema = z.strictObject({
+  $schema: z.string().optional(),
+  name: z.string().min(1),
+  description: z.string().optional(),
+  /** Stylesheet URLs every screen loads, such as Google Fonts. */
+  fonts: z.array(z.string().url()).optional(),
+  /** A stylesheet that replaces the default Tailwind + tokens.css entry, relative to the system folder. */
+  stylesheet: z.string().optional(),
+  /** Text the typography specimen sets. */
+  sample: z.string().optional()
+});
+var ScreenItemSchema = z.strictObject({
+  type: z.literal("screen"),
+  id: id.optional(),
+  src: z.string().min(1),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  props: z.record(z.string(), z.unknown()).optional(),
+  theme: theme.optional(),
+  /** Inject the design system stylesheet; defaults to the canvas setting. */
+  system: z.boolean().optional(),
+  ...size,
+  ...position
+});
+var UrlItemSchema = z.strictObject({
+  type: z.literal("url"),
+  id: id.optional(),
+  url: z.string().regex(/^https?:\/\//, "must be an http(s) URL"),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  ...size,
+  ...position
+});
+var NoteItemSchema = z.strictObject({
+  type: z.literal("note"),
+  id: id.optional(),
+  text: z.string(),
+  title: z.string().optional(),
+  width: z.number().int().min(80).max(4e3).optional(),
+  tone: z.enum(["note", "plain"]).optional(),
+  ...position
+});
+var ImageItemSchema = z.strictObject({
+  type: z.literal("image"),
+  id: id.optional(),
+  src: z.string().min(1),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  width: z.number().int().min(16).max(8e3).optional(),
+  ...position
+});
+var ItemSchema = z.preprocess(
+  (value) => value && typeof value === "object" && !Array.isArray(value) && !("type" in value) ? { type: "screen", ...value } : value,
+  z.discriminatedUnion("type", [ScreenItemSchema, UrlItemSchema, NoteItemSchema, ImageItemSchema])
+);
+var SectionSchema = z.strictObject({
+  id: id.optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  columns: z.number().int().min(1).max(50).optional(),
+  items: z.array(z.unknown())
+});
+var PageSchema = z.strictObject({
+  id,
+  title: z.string().min(1),
+  description: z.string().optional(),
+  sections: z.array(z.unknown()).optional(),
+  items: z.array(z.unknown()).optional()
+}).refine((page) => !(page.sections && page.items), 'a page has either "sections" or free-layout "items", not both');
+var CanvasSchema = z.strictObject({
+  $schema: z.string().optional(),
+  title: z.string().min(1),
+  description: z.string().optional(),
+  /** Inject the design system stylesheet into screens (default true). */
+  system: z.boolean().optional(),
+  /** Theme screens open in (default follows the viewer). */
+  theme: theme.optional(),
+  pages: z.array(z.unknown()).min(1, "add at least one page")
+});
+var ID_PATTERN = /^[a-z0-9][a-z0-9_-]*$/i;
+function formatPath(base, path19) {
+  let out = base;
+  for (const part of path19) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  return out;
+}
+function describeZodError(error, base = "") {
+  return error.issues.map((issue) => ({ at: formatPath(base, issue.path), message: issue.message }));
+}
+
+// src/core/canvas.ts
+var MODULE_EXT = /* @__PURE__ */ new Set([".tsx", ".jsx", ".ts", ".js", ".mjs"]);
+var HTML_EXT = /* @__PURE__ */ new Set([".html", ".htm"]);
+function listCanvasIds(paths) {
+  if (!fs2.existsSync(paths.canvases)) return [];
+  return fs2.readdirSync(paths.canvases, { withFileTypes: true }).filter((entry) => entry.isDirectory() && !entry.name.startsWith(".")).map((entry) => entry.name).sort();
+}
+function frameOf(input) {
+  const custom = input.width !== void 0 || input.height !== void 0;
+  const device = input.device ?? (custom ? void 0 : DEFAULT_DEVICE);
+  const base = DEVICES[input.device ?? DEFAULT_DEVICE];
+  return { width: input.width ?? base.width, height: input.height ?? base.height, device };
+}
+function loadCanvas(paths, canvasId, urls, snapshots) {
+  const dir = path3.join(paths.canvases, canvasId);
+  const file = path3.join(dir, "canvas.json");
+  const fileRel = relToRoot(paths, file);
+  const issues = [];
+  const screens = [];
+  const report = (severity, message, at) => issues.push({ severity, file: fileRel, message, at });
+  const doc = { id: canvasId, title: titleize(canvasId), pages: [], issues, updatedAt: 0 };
+  if (!ID_PATTERN.test(canvasId)) {
+    report("error", `canvas folder "${canvasId}" is not a valid id (letters, digits, "-", "_")`);
+    return { doc, screens };
+  }
+  let source;
+  try {
+    source = fs2.readFileSync(file, "utf8");
+    doc.updatedAt = fs2.statSync(file).mtimeMs;
+  } catch {
+    report("error", "canvas.json is missing");
+    return { doc, screens };
+  }
+  let json;
+  try {
+    json = JSON.parse(source);
+  } catch (error) {
+    report("error", `invalid JSON: ${error.message}`);
+    return { doc, screens };
+  }
+  const top = CanvasSchema.safeParse(json);
+  let rawPages = [];
+  let systemDefault = true;
+  if (top.success) {
+    doc.title = top.data.title;
+    doc.description = top.data.description;
+    doc.theme = top.data.theme;
+    systemDefault = top.data.system ?? true;
+    rawPages = top.data.pages;
+  } else {
+    for (const issue of describeZodError(top.error)) report("error", issue.message, issue.at);
+    const loose = json;
+    if (typeof loose?.title === "string") doc.title = loose.title;
+    if (Array.isArray(loose?.pages)) rawPages = loose.pages;
+  }
+  const itemIds = /* @__PURE__ */ new Set();
+  const pageIds = /* @__PURE__ */ new Set();
+  const claimId = (wanted, explicit, at) => {
+    if (!itemIds.has(wanted)) {
+      itemIds.add(wanted);
+      return wanted;
+    }
+    let n = 2;
+    while (itemIds.has(`${wanted}-${n}`)) n++;
+    const id2 = `${wanted}-${n}`;
+    itemIds.add(id2);
+    report(
+      explicit ? "error" : "warning",
+      explicit ? `duplicate item id "${wanted}"; renamed to "${id2}"` : `two items would be called "${wanted}"; this one is "${id2}" \u2014 give it an explicit "id"`,
+      at
+    );
+    return id2;
+  };
+  const resolveItem = (item, at) => {
+    if (item.type === "screen") {
+      const abs2 = path3.resolve(dir, item.src);
+      const ext = path3.extname(abs2).toLowerCase();
+      const format = HTML_EXT.has(ext) ? "html" : MODULE_EXT.has(ext) ? "module" : null;
+      if (!format) {
+        report("error", `"${item.src}" is not a screen: use .tsx, .jsx or .html`, `${at}.src`);
+        return null;
+      }
+      if (!isInside(paths.design, abs2)) report("warning", `"${item.src}" is outside .design`, `${at}.src`);
+      const missing2 = !fs2.existsSync(abs2);
+      if (missing2) report("error", `file not found: ${item.src}`, `${at}.src`);
+      const id3 = claimId(item.id ?? slugify(fileStem(item.src)), item.id !== void 0, at);
+      const title = item.title ?? titleize(fileStem(item.src));
+      const snap = snapshots?.(canvasId, id3);
+      const system = item.system ?? systemDefault;
+      const theme2 = item.theme;
+      const frame = frameOf(item);
+      const rev = createHash("sha1").update(JSON.stringify([item.src, item.props ?? null, theme2 ?? null, system, frame.height === "auto"])).digest("hex").slice(0, 10);
+      screens.push({
+        key: `${canvasId}/${id3}`,
+        canvas: canvasId,
+        id: id3,
+        title,
+        file: abs2,
+        format,
+        props: item.props ?? {},
+        system,
+        theme: theme2,
+        autoHeight: frame.height === "auto"
+      });
+      return {
+        kind: "screen",
+        id: id3,
+        title,
+        description: item.description,
+        x: item.x,
+        y: item.y,
+        src: item.src,
+        file: relToRoot(paths, abs2),
+        format,
+        url: format === "module" ? urls.screen(canvasId, id3) : urls.html(relToDesign(paths, abs2), canvasId, id3),
+        frame,
+        theme: theme2,
+        missing: missing2 || void 0,
+        rev,
+        snapshots: snap?.urls,
+        measuredHeight: snap?.height
+      };
+    }
+    if (item.type === "url") {
+      const id3 = claimId(item.id ?? slugify(new URL(item.url).hostname), item.id !== void 0, at);
+      return {
+        kind: "url",
+        id: id3,
+        title: item.title ?? item.url.replace(/^https?:\/\//, ""),
+        description: item.description,
+        x: item.x,
+        y: item.y,
+        url: item.url,
+        frame: frameOf(item)
+      };
+    }
+    if (item.type === "note") {
+      const id3 = claimId(item.id ?? "note", item.id !== void 0, at);
+      return {
+        kind: "note",
+        id: id3,
+        title: item.title ?? "",
+        x: item.x,
+        y: item.y,
+        text: item.text,
+        width: item.width ?? (item.tone === "plain" ? 560 : 320),
+        tone: item.tone ?? "note"
+      };
+    }
+    const remote = /^https?:\/\//.test(item.src);
+    const abs = remote ? "" : path3.resolve(dir, item.src);
+    const missing = !remote && !fs2.existsSync(abs);
+    if (missing) report("error", `image not found: ${item.src}`, `${at}.src`);
+    const id2 = claimId(item.id ?? slugify(fileStem(item.src)), item.id !== void 0, at);
+    return {
+      kind: "image",
+      id: id2,
+      title: item.title ?? titleize(fileStem(item.src)),
+      description: item.description,
+      x: item.x,
+      y: item.y,
+      url: remote ? item.src : urls.file(relToDesign(paths, abs)),
+      width: item.width,
+      missing: missing || void 0
+    };
+  };
+  const resolveItems = (raw, at) => {
+    const out = [];
+    raw.forEach((value, index) => {
+      const itemAt = `${at}[${index}]`;
+      const parsed = ItemSchema.safeParse(value);
+      if (!parsed.success) {
+        for (const issue of describeZodError(parsed.error, itemAt)) report("error", issue.message, issue.at);
+        return;
+      }
+      const item = resolveItem(parsed.data, itemAt);
+      if (item) out.push(item);
+    });
+    return out;
+  };
+  rawPages.forEach((value, pageIndex) => {
+    const at = `pages[${pageIndex}]`;
+    const parsed = PageSchema.safeParse(value);
+    if (!parsed.success) {
+      for (const issue of describeZodError(parsed.error, at)) report("error", issue.message, issue.at);
+      return;
+    }
+    const page = parsed.data;
+    if (pageIds.has(page.id)) {
+      report("error", `duplicate page id "${page.id}"`, `${at}.id`);
+      return;
+    }
+    pageIds.add(page.id);
+    const sections = [];
+    if (page.items) {
+      sections.push({ id: "free", items: resolveItems(page.items, `${at}.items`) });
+    } else {
+      const sectionIds = /* @__PURE__ */ new Set();
+      (page.sections ?? []).forEach((rawSection, sectionIndex) => {
+        const sectionAt = `${at}.sections[${sectionIndex}]`;
+        const section = SectionSchema.safeParse(rawSection);
+        if (!section.success) {
+          for (const issue of describeZodError(section.error, sectionAt)) report("error", issue.message, issue.at);
+          return;
+        }
+        let sectionId = section.data.id ?? `section-${sectionIndex + 1}`;
+        if (sectionIds.has(sectionId)) sectionId = `${sectionId}-${sectionIndex + 1}`;
+        sectionIds.add(sectionId);
+        sections.push({
+          id: sectionId,
+          title: section.data.title,
+          description: section.data.description,
+          columns: section.data.columns,
+          items: resolveItems(section.data.items, `${sectionAt}.items`)
+        });
+      });
+    }
+    const out = {
+      id: page.id,
+      title: page.title,
+      description: page.description,
+      layout: page.items ? "free" : "sections",
+      sections
+    };
+    doc.pages.push(out);
+  });
+  return { doc, screens };
+}
+function summarize(canvas) {
+  const { doc } = canvas;
+  const screens = doc.pages.flatMap((page) => page.sections.flatMap((section) => section.items));
+  const firstScreen = screens.find((item) => item.kind === "screen" && item.snapshots);
+  return {
+    id: doc.id,
+    title: doc.title,
+    description: doc.description,
+    pages: doc.pages.length,
+    screens: screens.filter((item) => item.kind === "screen" || item.kind === "url").length,
+    updatedAt: doc.updatedAt,
+    issues: doc.issues.filter((issue) => issue.severity === "error").length,
+    cover: firstScreen && firstScreen.kind === "screen" ? firstScreen.snapshots?.light ?? firstScreen.snapshots?.dark : void 0
+  };
+}
+
+// src/core/system.ts
+import fs4 from "fs";
+import path5 from "path";
+
+// src/core/tokens.ts
+import fs3 from "fs";
+import path4 from "path";
+import postcss from "postcss";
+var NAMESPACES = [
+  ["--color-", "color"],
+  ["--font-weight-", "weight"],
+  ["--font-", "font"],
+  ["--text-shadow-", "shadow"],
+  ["--text-", "text"],
+  ["--leading-", "leading"],
+  ["--tracking-", "tracking"],
+  ["--spacing-", "spacing"],
+  ["--radius-", "radius"],
+  ["--inset-shadow-", "shadow"],
+  ["--drop-shadow-", "shadow"],
+  ["--shadow-", "shadow"],
+  ["--blur-", "blur"],
+  ["--ease-", "ease"],
+  ["--animate-", "animation"],
+  ["--duration-", "duration"],
+  ["--breakpoint-", "breakpoint"],
+  ["--container-", "breakpoint"]
+];
+var DEFAULT_GROUP = {
+  color: "Colors",
+  font: "Font families",
+  text: "Type scale",
+  weight: "Font weights",
+  leading: "Line heights",
+  tracking: "Letter spacing",
+  spacing: "Spacing",
+  radius: "Radii",
+  shadow: "Shadows",
+  blur: "Blur",
+  ease: "Easing",
+  animation: "Animations",
+  duration: "Durations",
+  breakpoint: "Breakpoints",
+  other: "Other"
+};
+var COLOR_FN = /^(?:#[0-9a-f]{3,8}\b|(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\()/i;
+var COLOR_NAMES = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentcolor",
+  "black",
+  "white",
+  "red",
+  "green",
+  "blue",
+  "gray",
+  "grey",
+  "orange",
+  "yellow",
+  "purple",
+  "pink",
+  "teal",
+  "navy",
+  "silver"
+]);
+function isColor(value) {
+  const v = value.trim();
+  return COLOR_FN.test(v) || COLOR_NAMES.has(v.toLowerCase());
+}
+function namespaceOf(name) {
+  if (name === "--spacing") return { kind: "spacing", key: "" };
+  for (const [prefix, kind] of NAMESPACES) if (name.startsWith(prefix)) return { kind, key: name.slice(prefix.length) };
+  return null;
+}
+function inferKind(name, value) {
+  const n = name.toLowerCase();
+  if (isColor(value)) return "color";
+  if (/shadow/.test(n)) return "shadow";
+  if (/radius|rounded/.test(n)) return "radius";
+  if (/ease|easing/.test(n) || /^cubic-bezier\(|^steps\(/.test(value.trim())) return "ease";
+  if (/duration/.test(n) || /^-?[\d.]+m?s$/.test(value.trim())) return "duration";
+  if (/font|family/.test(n) && /["',]/.test(value)) return "font";
+  if (/space|spacing|gap|gutter/.test(n)) return "spacing";
+  return "other";
+}
+function isDarkSelector(selector) {
+  return /\[data-(?:theme|mode|color-scheme)=["']?dark["']?\]|\.dark\b|:is\(\.dark|\.theme-dark\b/.test(selector);
+}
+function isRootSelector(selector) {
+  return /(^|[\s,])(:root|html|:host|\*)(?=$|[\s,:[.])/.test(selector) || /^\s*:root/.test(selector);
+}
+function insideDarkMedia(node) {
+  let parent = node.parent;
+  while (parent && parent.type !== "root") {
+    if (parent.type === "atrule") {
+      const at = parent;
+      if (at.name === "media" && /prefers-color-scheme\s*:\s*dark/.test(at.params)) return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+function scopeOf(container) {
+  if (container.type === "atrule") {
+    const at = container;
+    return at.name === "theme" ? "theme" : null;
+  }
+  if (container.type !== "rule") return null;
+  const rule = container;
+  if (isDarkSelector(rule.selector) || insideDarkMedia(rule)) return "dark";
+  if (isRootSelector(rule.selector)) return "root";
+  return null;
+}
+function commentText(node) {
+  return node.type === "comment" ? node.text.trim() : null;
+}
+function collect(css2, from) {
+  const root = postcss.parse(css2, { from });
+  const out = [];
+  const visit = (container) => {
+    const scope = scopeOf(container);
+    if (scope) {
+      let group;
+      let pending;
+      const nodes = container.nodes ?? [];
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const text = commentText(node);
+        if (text !== null) {
+          const marker = /^@group\s+(.+)$/.exec(text);
+          if (marker) {
+            group = marker[1].trim();
+            pending = void 0;
+            continue;
+          }
+          const prev = nodes[i - 1];
+          if (prev?.type === "decl" && !/\n/.test(node.raws.before ?? "")) {
+            const last = out[out.length - 1];
+            if (last && last.name === prev.prop && !last.description) last.description = text;
+            continue;
+          }
+          pending = text;
+          continue;
+        }
+        if (node.type === "decl") {
+          const decl = node;
+          if (decl.prop.startsWith("--") && !decl.prop.includes("*") && decl.value.trim() !== "initial") {
+            out.push({ name: decl.prop, value: decl.value.trim(), scope, group, description: pending });
+          }
+          pending = void 0;
+          continue;
+        }
+        pending = void 0;
+      }
+    }
+    for (const node of container.nodes ?? []) {
+      if (node.type === "rule" || node.type === "atrule") visit(node);
+    }
+  };
+  visit(root);
+  return out;
+}
+function readStylesheets(entry) {
+  const seen = /* @__PURE__ */ new Set();
+  const files = [];
+  const walk = (file) => {
+    if (seen.has(file) || !fs3.existsSync(file)) return;
+    seen.add(file);
+    const css2 = fs3.readFileSync(file, "utf8");
+    const imports = [...css2.matchAll(/@import\s+(?:url\()?\s*["']([^"']+)["']/g)].map((m) => m[1]);
+    for (const spec of imports) {
+      if (spec.startsWith("./") || spec.startsWith("../")) walk(path4.resolve(path4.dirname(file), spec));
+    }
+    files.push({ file, css: css2 });
+  };
+  walk(entry);
+  return files;
+}
+function closingParen(text, start) {
+  let depth = 1;
+  for (let i = start; i < text.length; i++) {
+    if (text[i] === "(") depth++;
+    else if (text[i] === ")" && --depth === 0) return i;
+  }
+  return -1;
+}
+function resolveValue(value, scope, depth = 0) {
+  if (depth > 12 || !value.includes("var(")) return value;
+  let out = "";
+  let i = 0;
+  for (; ; ) {
+    const at = value.indexOf("var(", i);
+    if (at === -1) break;
+    const end = closingParen(value, at + 4);
+    if (end === -1) break;
+    const inner = value.slice(at + 4, end);
+    let comma = -1;
+    let level = 0;
+    for (let j = 0; j < inner.length; j++) {
+      if (inner[j] === "(") level++;
+      else if (inner[j] === ")") level--;
+      else if (inner[j] === "," && level === 0) {
+        comma = j;
+        break;
+      }
+    }
+    const name = (comma === -1 ? inner : inner.slice(0, comma)).trim();
+    const fallback = comma === -1 ? void 0 : inner.slice(comma + 1).trim();
+    const found = scope.get(name);
+    const replacement = found !== void 0 ? resolveValue(found, scope, depth + 1) : fallback !== void 0 ? resolveValue(fallback, scope, depth + 1) : value.slice(at, end + 1);
+    out += value.slice(i, at) + replacement;
+    i = end + 1;
+  }
+  return out + value.slice(i);
+}
+function directRef(value) {
+  const match = /^var\(\s*(--[\w-]+)\s*(?:,[\s\S]*)?\)$/.exec(value.trim());
+  return match ? match[1] : null;
+}
+function parseTokens(files) {
+  const decls = files.flatMap(({ file, css: css2 }) => {
+    try {
+      return collect(css2, file);
+    } catch {
+      return [];
+    }
+  });
+  const rootVars = /* @__PURE__ */ new Map();
+  const darkVars = /* @__PURE__ */ new Map();
+  const themeVars = /* @__PURE__ */ new Map();
+  for (const decl of decls) {
+    const map = decl.scope === "root" ? rootVars : decl.scope === "dark" ? darkVars : themeVars;
+    const prev = map.get(decl.name);
+    map.set(decl.name, {
+      ...decl,
+      group: decl.group ?? prev?.group,
+      description: decl.description ?? prev?.description
+    });
+  }
+  const light = /* @__PURE__ */ new Map();
+  for (const [name, decl] of themeVars) light.set(name, decl.value);
+  for (const [name, decl] of rootVars) light.set(name, decl.value);
+  const dark = new Map(light);
+  for (const [name, decl] of darkVars) dark.set(name, decl.value);
+  const value = (raw, scope) => ({ raw, value: resolveValue(raw, scope) });
+  const darkOf = (name, raw, lightValue) => {
+    const own = darkVars.get(name);
+    const resolved = value(own?.value ?? raw, dark);
+    return resolved.value !== lightValue ? resolved : void 0;
+  };
+  const tokens = /* @__PURE__ */ new Map();
+  const consumed = /* @__PURE__ */ new Set();
+  const lineHeights = /* @__PURE__ */ new Map();
+  for (const [name, decl] of themeVars) {
+    const companion = /^(--text-[\w-]+?)--line-height$/.exec(name);
+    if (companion) {
+      lineHeights.set(companion[1], resolveValue(decl.value, light));
+      continue;
+    }
+    if (/--(?:letter-spacing|font-weight|font-feature-settings|font-variation-settings)$/.test(name)) continue;
+    const ns = namespaceOf(name);
+    const ref = directRef(decl.value);
+    const source = ref && rootVars.has(ref) ? rootVars.get(ref) : null;
+    const tokenName = source ? ref : name;
+    if (tokens.has(tokenName)) continue;
+    if (source) consumed.add(ref);
+    const raw = source ? source.value : decl.value;
+    const lightValue = value(raw, light);
+    const kind = ns?.kind ?? inferKind(tokenName, lightValue.value);
+    tokens.set(tokenName, {
+      name: tokenName,
+      kind,
+      group: source?.group ?? decl.group ?? DEFAULT_GROUP[kind],
+      description: source?.description ?? decl.description,
+      light: lightValue,
+      dark: darkOf(tokenName, raw, lightValue.value),
+      utility: ns ? ns.key : void 0
+    });
+  }
+  for (const [name, decl] of rootVars) {
+    if (consumed.has(name) || tokens.has(name)) continue;
+    const lightValue = value(decl.value, light);
+    const kind = namespaceOf(name)?.kind ?? inferKind(name, lightValue.value);
+    tokens.set(name, {
+      name,
+      kind,
+      group: decl.group ?? (kind === "other" ? "Variables" : DEFAULT_GROUP[kind]),
+      description: decl.description,
+      light: lightValue,
+      dark: darkOf(name, decl.value, lightValue.value)
+    });
+  }
+  for (const [name, lineHeight] of lineHeights) {
+    const token = tokens.get(name);
+    if (token) token.lineHeight = lineHeight;
+  }
+  return [...tokens.values()];
+}
+
+// src/core/system.ts
+var SYSTEM_CANVAS = "@system";
+var TYPOGRAPHY_ID = "@typography";
+var SPECIMEN_EXT = /* @__PURE__ */ new Set([".tsx", ".jsx", ".html"]);
+var COMPONENT_EXT = [".tsx", ".jsx", ".ts", ".js", ".vue", ".svelte", ".html"];
+var IMAGE_EXT = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg", ".ico"]);
+var FONT_EXT = /* @__PURE__ */ new Set([".woff", ".woff2", ".ttf", ".otf"]);
+function listFiles(dir, deep = false) {
+  if (!fs4.existsSync(dir)) return [];
+  const out = [];
+  for (const entry of fs4.readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name.startsWith(".")) continue;
+    const full = path5.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (deep) out.push(...listFiles(full, true));
+    } else out.push(full);
+  }
+  return out.sort();
+}
+function guessSources(componentsDir, stem) {
+  if (!fs4.existsSync(componentsDir)) return [];
+  const wanted = slugify(stem);
+  for (const file of listFiles(componentsDir)) {
+    const ext = path5.extname(file);
+    if (COMPONENT_EXT.includes(ext) && slugify(path5.basename(file, ext)) === wanted) return [file];
+  }
+  for (const entry of fs4.readdirSync(componentsDir, { withFileTypes: true })) {
+    if (entry.isDirectory() && slugify(entry.name) === wanted) {
+      const files = listFiles(path5.join(componentsDir, entry.name)).filter(
+        (f) => COMPONENT_EXT.includes(path5.extname(f))
+      );
+      if (files.length) return files;
+    }
+  }
+  return [];
+}
+function loadSystem(paths, urls) {
+  if (!fs4.existsSync(paths.system)) return null;
+  const issues = [];
+  const configFile = path5.join(paths.system, "system.json");
+  const report = (severity, file, message, at) => issues.push({ severity, file: relToRoot(paths, file), message, at });
+  let config = null;
+  if (fs4.existsSync(configFile)) {
+    try {
+      const parsed = SystemConfigSchema.safeParse(JSON.parse(fs4.readFileSync(configFile, "utf8")));
+      if (parsed.success) config = parsed.data;
+      else for (const issue of describeZodError(parsed.error)) report("error", configFile, issue.message, issue.at);
+    } catch (error) {
+      report("error", configFile, `invalid JSON: ${error.message}`);
+    }
+  } else {
+    report("warning", configFile, 'system.json is missing; run `design system init` or add { "name": "\u2026" }');
+  }
+  const tokensFile = path5.join(paths.system, "tokens.css");
+  let stylesheet = null;
+  if (config?.stylesheet) {
+    stylesheet = path5.resolve(paths.system, config.stylesheet);
+    if (!fs4.existsSync(stylesheet)) {
+      report("error", configFile, `stylesheet not found: ${config.stylesheet}`, "stylesheet");
+      stylesheet = null;
+    }
+  }
+  const tokenEntry = stylesheet ?? (fs4.existsSync(tokensFile) ? tokensFile : null);
+  const tokens = tokenEntry ? parseTokens(readStylesheets(tokenEntry)) : [];
+  if (!tokenEntry) report("warning", tokensFile, "no tokens.css: screens get the default Tailwind theme");
+  const specimensDir = path5.join(paths.system, "specimens");
+  const componentsDir = path5.join(paths.system, "components");
+  const components = [];
+  const specimens = [];
+  const usedIds = /* @__PURE__ */ new Set();
+  for (const file of listFiles(specimensDir)) {
+    const ext = path5.extname(file).toLowerCase();
+    if (!SPECIMEN_EXT.has(ext)) continue;
+    const stem = path5.basename(file, ext);
+    let id2 = slugify(stem);
+    if (usedIds.has(id2)) id2 = `${id2}-${usedIds.size + 1}`;
+    usedIds.add(id2);
+    const tags = parseDocTags(fs4.readFileSync(file, "utf8"));
+    const sources = (tags.source ?? []).flatMap((value) => value.split(/[\s,]+/)).filter(Boolean).map((value) => path5.resolve(path5.dirname(file), value));
+    for (const source of sources) {
+      if (!fs4.existsSync(source)) report("warning", file, `@source not found: ${path5.relative(paths.system, source)}`);
+    }
+    const found = sources.filter((source) => fs4.existsSync(source));
+    const title = tags.title?.[0] || titleize(stem);
+    const format = ext === ".html" ? "html" : "module";
+    components.push({
+      id: id2,
+      title,
+      group: tags.group?.[0] || "Components",
+      description: tags.description?.[0] || void 0,
+      status: tags.status?.[0] || void 0,
+      specimen: relToRoot(paths, file),
+      sources: (found.length ? found : guessSources(componentsDir, stem)).map((source) => relToRoot(paths, source)),
+      url: format === "module" ? urls.screen(SYSTEM_CANVAS, id2) : urls.html(relToDesign(paths, file), SYSTEM_CANVAS, id2)
+    });
+    specimens.push({
+      key: `${SYSTEM_CANVAS}/${id2}`,
+      canvas: SYSTEM_CANVAS,
+      id: id2,
+      title,
+      file,
+      format,
+      props: {},
+      system: true,
+      autoHeight: true
+    });
+  }
+  const guidelines = [];
+  for (const file of listFiles(path5.join(paths.system, "guidelines"))) {
+    if (path5.extname(file).toLowerCase() !== ".md") continue;
+    const stem = path5.basename(file, ".md");
+    const { data, body } = parseFrontmatter(fs4.readFileSync(file, "utf8"));
+    const prefix = /^(\d+)[-_. ]+(.*)$/.exec(stem);
+    const order = data.order !== void 0 ? Number(data.order) : prefix ? Number(prefix[1]) : 1e3;
+    guidelines.push({
+      slug: slugify(prefix ? prefix[2] : stem),
+      title: data.title || firstHeading(body) || titleize(prefix ? prefix[2] : stem),
+      order: Number.isFinite(order) ? order : 1e3,
+      markdown: body
+    });
+  }
+  guidelines.sort((a, b) => a.order - b.order || a.title.localeCompare(b.title));
+  const assets = [];
+  const assetsDir = path5.join(paths.system, "assets");
+  for (const file of listFiles(assetsDir, true)) {
+    const ext = path5.extname(file).toLowerCase();
+    assets.push({
+      name: path5.basename(file),
+      path: path5.relative(paths.system, file).split(path5.sep).join("/"),
+      url: urls.file(relToDesign(paths, file)),
+      size: fs4.statSync(file).size,
+      kind: IMAGE_EXT.has(ext) ? "image" : FONT_EXT.has(ext) ? "font" : "other"
+    });
+  }
+  const hasType = tokens.some((token) => token.kind === "font" || token.kind === "text");
+  if (hasType) {
+    specimens.push({
+      key: `${SYSTEM_CANVAS}/${TYPOGRAPHY_ID}`,
+      canvas: SYSTEM_CANVAS,
+      id: TYPOGRAPHY_ID,
+      title: "Typography",
+      file: "",
+      format: "module",
+      props: {
+        tokens: tokens.filter((token) => ["font", "text", "weight", "leading", "tracking"].includes(token.kind)),
+        sample: config?.sample
+      },
+      system: true,
+      autoHeight: true,
+      builtin: "typography"
+    });
+  }
+  return {
+    doc: {
+      name: config?.name ?? "Design system",
+      description: config?.description,
+      fonts: config?.fonts ?? [],
+      tokens,
+      components,
+      guidelines,
+      assets,
+      typographyUrl: hasType ? urls.screen(SYSTEM_CANVAS, TYPOGRAPHY_ID) : null,
+      issues
+    },
+    config,
+    stylesheet,
+    tokensFile: fs4.existsSync(tokensFile) ? tokensFile : null,
+    specimens
+  };
+}
+function summarizeSystem(system) {
+  return {
+    name: system.doc.name,
+    description: system.doc.description,
+    tokens: system.doc.tokens.length,
+    components: system.doc.components.length,
+    guidelines: system.doc.guidelines.length,
+    issues: system.doc.issues.filter((issue) => issue.severity === "error").length
+  };
+}
+
+// src/core/project.ts
+var DesignProject = class {
+  constructor(paths, urls, snapshots = null) {
+    this.paths = paths;
+    this.urls = urls;
+    this.snapshots = snapshots;
+  }
+  paths;
+  urls;
+  snapshots;
+  configCache = null;
+  systemCache;
+  canvasCache = /* @__PURE__ */ new Map();
+  config() {
+    if (this.configCache) return this.configCache;
+    const issues = [];
+    let config = {};
+    const file = this.paths.config;
+    if (fs5.existsSync(file)) {
+      try {
+        const parsed = DesignConfigSchema.safeParse(JSON.parse(fs5.readFileSync(file, "utf8")));
+        if (parsed.success) config = parsed.data;
+        else
+          for (const issue of describeZodError(parsed.error))
+            issues.push({ severity: "error", file: relToRoot(this.paths, file), message: issue.message, at: issue.at });
+      } catch (error) {
+        issues.push({
+          severity: "error",
+          file: relToRoot(this.paths, file),
+          message: `invalid JSON: ${error.message}`
+        });
+      }
+    }
+    this.configCache = { config, issues };
+    return this.configCache;
+  }
+  name() {
+    const configured = this.config().config.name;
+    if (configured) return configured;
+    try {
+      const manifest = JSON.parse(fs5.readFileSync(path6.join(this.paths.root, "package.json"), "utf8"));
+      if (typeof manifest.name === "string" && manifest.name) return manifest.name;
+    } catch {
+    }
+    return path6.basename(this.paths.root);
+  }
+  system() {
+    if (this.systemCache === void 0) this.systemCache = loadSystem(this.paths, this.urls);
+    return this.systemCache;
+  }
+  canvasIds() {
+    return listCanvasIds(this.paths);
+  }
+  canvas(id2) {
+    const cached = this.canvasCache.get(id2);
+    if (cached) return cached;
+    if (!fs5.existsSync(path6.join(this.paths.canvases, id2))) return null;
+    const canvas = loadCanvas(this.paths, id2, this.urls, this.snapshots);
+    this.canvasCache.set(id2, canvas);
+    return canvas;
+  }
+  canvases() {
+    return this.canvasIds().map((id2) => this.canvas(id2)).filter((canvas) => canvas !== null);
+  }
+  /** Every frame the server can render. */
+  sources() {
+    return [...this.system()?.specimens ?? [], ...this.canvases().flatMap((canvas) => canvas.screens)];
+  }
+  source(canvasId, id2) {
+    const list = canvasId === SYSTEM_CANVAS ? this.system()?.specimens ?? [] : this.canvas(canvasId)?.screens ?? [];
+    return list.find((source) => source.id === id2) ?? null;
+  }
+  info(isStatic) {
+    const system = this.system();
+    return {
+      name: this.name(),
+      root: isStatic ? "" : this.paths.root,
+      static: isStatic,
+      version: packageVersion(),
+      system: system ? summarizeSystem(system) : null,
+      canvases: this.canvases().map(summarize),
+      issues: this.config().issues
+    };
+  }
+  /** Every problem in the project, for `design check`. */
+  issues() {
+    return [
+      ...this.config().issues,
+      ...this.system()?.doc.issues ?? [],
+      ...this.canvases().flatMap((canvas) => canvas.doc.issues)
+    ];
+  }
+  invalidateConfig() {
+    this.configCache = null;
+  }
+  invalidateSystem() {
+    this.systemCache = void 0;
+  }
+  invalidateCanvas(id2) {
+    if (id2) this.canvasCache.delete(id2);
+    else this.canvasCache.clear();
+  }
+  invalidateAll() {
+    this.invalidateConfig();
+    this.invalidateSystem();
+    this.invalidateCanvas();
+  }
+};
+
+// src/core/sources.ts
+var encodePath = (rel) => rel.split("/").map(encodeURIComponent).join("/");
+var DEV_URLS = {
+  screen: (canvas, id2) => `/_s/${encodeURIComponent(canvas)}/${encodeURIComponent(id2)}`,
+  html: (rel, canvas, id2) => `/_fs/${encodePath(rel)}?__design=${encodeURIComponent(`${canvas}/${id2}`)}`,
+  file: (rel) => `/_fs/${encodePath(rel)}`
+};
+var STATIC_URLS = {
+  screen: (canvas, id2) => `_s/${encodeURIComponent(canvas)}/${encodeURIComponent(id2)}/`,
+  html: (_rel, canvas, id2) => `_s/${encodeURIComponent(canvas)}/${encodeURIComponent(id2)}/`,
+  file: (rel) => `_f/${encodePath(rel)}`
+};
+
+// src/server/entries.ts
+import fs6 from "fs";
+import path7 from "path";
+var SYSTEM_CSS = "system.css";
+var HTML_BOOT = "html-boot.js";
+function writeIfChanged(file, content) {
+  try {
+    if (fs6.readFileSync(file, "utf8") === content) return false;
+  } catch {
+  }
+  fs6.mkdirSync(path7.dirname(file), { recursive: true });
+  fs6.writeFileSync(file, content);
+  return true;
+}
+function importPath(fromDir, file) {
+  const rel = toPosix(path7.relative(fromDir, file));
+  return rel.startsWith(".") ? rel : `./${rel}`;
+}
+var css = (file) => JSON.stringify(toPosix(file));
+var Entries = class {
+  constructor(project) {
+    this.project = project;
+  }
+  project;
+  get dir() {
+    return this.project.paths.entries;
+  }
+  systemCssFile() {
+    return path7.join(this.dir, SYSTEM_CSS);
+  }
+  entryFile(source) {
+    return path7.join(this.dir, source.canvas, `${source.id}.js`);
+  }
+  /** Tailwind with the design tokens, or the stylesheet system.json names; scans every file in `.design`. */
+  systemCss() {
+    const { paths } = this.project;
+    const system = this.project.system();
+    const { config } = this.project.config();
+    const lines = ["/* Generated by foss-design. Edit .design/system/tokens.css instead. */"];
+    if (system?.stylesheet) {
+      lines.push(`@import ${css(system.stylesheet)};`);
+    } else {
+      const tailwind = resolveFrom(PKG.manifest, "tailwindcss/index.css");
+      if (!tailwind) throw new Error("tailwindcss is missing from foss-design; reinstall the package");
+      lines.push(`@import ${css(tailwind)} source(none);`, `@import ${css(PKG.baseCss)};`);
+      if (system?.tokensFile) lines.push(`@import ${css(system.tokensFile)};`);
+    }
+    lines.push(`@source ${css(paths.design)};`, `@source not ${css(paths.cache)};`);
+    lines.push(`@source not ${css(path7.join(paths.design, "node_modules"))};`);
+    for (const extra of config.sources ?? []) lines.push(`@source ${css(path7.resolve(paths.root, extra))};`);
+    return `${lines.join("\n")}
+`;
+  }
+  entrySource(source) {
+    const file = this.entryFile(source);
+    const dir = path7.dirname(file);
+    const lines = [];
+    if (source.system) lines.push(`import ${JSON.stringify(importPath(dir, this.systemCssFile()))}`);
+    if (source.builtin === "typography") {
+      lines.push(
+        `import { hmr, mount, TypographySpecimen } from '@design/runtime'`,
+        "hmr(import.meta.hot)",
+        "mount(TypographySpecimen)"
+      );
+    } else {
+      lines.push(
+        `import { hmr, mount } from '@design/runtime'`,
+        `import * as screen from ${JSON.stringify(importPath(dir, source.file))}`,
+        "",
+        `const Screen = screen.default ?? Object.values(screen).find((value) => typeof value === 'function')`,
+        "if (!Screen) throw new Error(" + JSON.stringify(`${path7.basename(source.file)} has no component to render: export one as default`) + ")",
+        "hmr(import.meta.hot)",
+        "mount(Screen)"
+      );
+    }
+    return `// Generated by foss-design for ${source.key}.
+${lines.join("\n")}
+`;
+  }
+  /** Write every entry the project needs and drop the ones it no longer does. */
+  sync() {
+    writeIfChanged(this.systemCssFile(), this.systemCss());
+    writeIfChanged(
+      path7.join(this.dir, HTML_BOOT),
+      `// Generated by foss-design.
+import { boot, hmr } from '@design/runtime'
+boot()
+hmr(import.meta.hot)
+`
+    );
+    const wanted = /* @__PURE__ */ new Set([this.systemCssFile(), path7.join(this.dir, HTML_BOOT)]);
+    for (const source of this.project.sources()) {
+      if (source.format !== "module") continue;
+      const file = this.entryFile(source);
+      wanted.add(file);
+      writeIfChanged(file, this.entrySource(source));
+    }
+    this.prune(this.dir, wanted);
+  }
+  /** Entry files, for dependency pre-bundling. */
+  files() {
+    return this.project.sources().filter((source) => source.format === "module").map((source) => this.entryFile(source));
+  }
+  prune(dir, wanted) {
+    if (!fs6.existsSync(dir)) return;
+    for (const entry of fs6.readdirSync(dir, { withFileTypes: true })) {
+      const full = path7.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        this.prune(full, wanted);
+        if (fs6.readdirSync(full).length === 0) fs6.rmdirSync(full);
+      } else if (!wanted.has(full)) fs6.rmSync(full);
+    }
+  }
+};
+
+// src/server/html.ts
+function headTags(head) {
+  const { source } = head;
+  const config = {
+    key: source.key,
+    canvas: source.canvas,
+    id: source.id,
+    title: source.title,
+    props: source.props,
+    theme: source.theme,
+    snapshots: head.snapshots,
+    autoHeight: head.autoHeight
+  };
+  const fallback = source.theme ?? head.theme;
+  const theme2 = `(function(){var q=new URLSearchParams(location.search).get('theme');var t=${JSON.stringify(source.theme ?? null)}||(q==='dark'||q==='light'?q:${JSON.stringify(fallback)});var r=document.documentElement;r.dataset.theme=t;r.classList.toggle('dark',t==='dark');r.style.colorScheme=t})()`;
+  const tags = [`<script>window.__DESIGN__=${scriptJson(config)};${theme2}</script>`, '<link rel="icon" href="data:,">'];
+  for (const href of head.fonts) tags.push(`<link rel="stylesheet" href="${escapeHtml(href)}">`);
+  if (head.systemCss) tags.push(`<link rel="stylesheet" href="${escapeHtml(head.systemCss)}">`);
+  if (head.boot) tags.push(`<script type="module" src="${escapeHtml(head.boot)}"></script>`);
+  return tags.join("\n");
+}
+function moduleShell(head, entryUrl) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(head.source.title)}</title>
+${headTags(head)}
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="${escapeHtml(entryUrl)}"></script>
+</body>
+</html>
+`;
+}
+function optsOutOfSystem(html) {
+  return /<meta\s+name=["']design:system["']\s+content=["']off["']/i.test(html);
+}
+function injectIntoHtml(html, head) {
+  const tags = headTags(head);
+  const open = /<head(\s[^>]*)?>/i.exec(html);
+  if (open) return `${html.slice(0, open.index + open[0].length)}
+${tags}
+${html.slice(open.index + open[0].length)}`;
+  const htmlOpen = /<html(\s[^>]*)?>/i.exec(html);
+  if (htmlOpen)
+    return html.slice(0, htmlOpen.index + htmlOpen[0].length) + `
+<head>
+${tags}
+</head>
+` + html.slice(htmlOpen.index + htmlOpen[0].length);
+  return `<!doctype html>
+<html><head>
+${tags}
+</head><body>
+${html}
+</body></html>`;
+}
+
+// src/server/links.ts
+import fs7 from "fs";
+import path8 from "path";
+var SHIPPED_PACKAGES = ["react", "react-dom", "motion", "lucide-react", "clsx", "tailwind-merge"];
+function findPackageDir(fromDir, name, skip) {
+  let dir = path8.resolve(fromDir);
+  for (; ; ) {
+    const modules = path8.join(dir, "node_modules");
+    const candidate = path8.join(modules, name);
+    if (modules !== skip && fs7.existsSync(path8.join(candidate, "package.json"))) return candidate;
+    const parent = path8.dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+function isLink(file) {
+  try {
+    return fs7.lstatSync(file).isSymbolicLink();
+  } catch {
+    return false;
+  }
+}
+function linkShippedPackages(paths) {
+  const modules = path8.join(paths.design, "node_modules");
+  const linked = [];
+  const allow = /* @__PURE__ */ new Set();
+  for (const name of SHIPPED_PACKAGES) {
+    const link = path8.join(modules, name);
+    const placedByUser = fs7.existsSync(link) && !isLink(link);
+    const own = placedByUser ? link : findPackageDir(paths.design, name, modules);
+    if (own) {
+      allow.add(path8.dirname(fs7.realpathSync(own)));
+      if (isLink(link)) fs7.unlinkSync(link);
+      continue;
+    }
+    const shipped = findPackageDir(PKG_ROOT, name);
+    if (!shipped) continue;
+    const target2 = fs7.realpathSync(shipped);
+    allow.add(path8.dirname(target2));
+    let current2 = null;
+    try {
+      current2 = fs7.realpathSync(link);
+    } catch {
+    }
+    if (current2 !== target2) {
+      if (isLink(link)) fs7.unlinkSync(link);
+      fs7.mkdirSync(path8.dirname(link), { recursive: true });
+      fs7.symlinkSync(target2, link, process.platform === "win32" ? "junction" : "dir");
+    }
+    linked.push(name);
+  }
+  const self = path8.join(modules, "foss-design");
+  const target = fs7.realpathSync(PKG_ROOT);
+  let current = null;
+  try {
+    current = fs7.realpathSync(self);
+  } catch {
+  }
+  if (current !== target) {
+    if (isLink(self)) fs7.unlinkSync(self);
+    if (!fs7.existsSync(self)) {
+      fs7.mkdirSync(modules, { recursive: true });
+      fs7.symlinkSync(target, self, process.platform === "win32" ? "junction" : "dir");
+    }
+  }
+  allow.add(target);
+  return { linked, allow: [...allow] };
+}
+
+// src/server/vite.ts
+import path9 from "path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function aliases(project) {
+  const { paths } = project;
+  const list = [
+    // A bare import, so the dev server pre-bundles the runtime with React wherever the package is installed.
+    { find: /^@design\/runtime$/, replacement: "foss-design/runtime" },
+    { find: /^@system\//, replacement: `${toPosix(paths.system)}/` }
+  ];
+  for (const [key, target] of Object.entries(project.config().config.alias ?? {})) {
+    const replacement = toPosix(path9.resolve(paths.root, target));
+    list.push(
+      key.endsWith("/") ? { find: new RegExp(`^${escapeRegExp(key)}`), replacement: `${replacement.replace(/\/$/, "")}/` } : { find: new RegExp(`^${escapeRegExp(key)}(?=/|$)`), replacement }
+    );
+  }
+  return list;
+}
+function baseConfig(project) {
+  const { paths } = project;
+  return {
+    configFile: false,
+    envDir: false,
+    root: paths.design,
+    cacheDir: path9.join(paths.cache, "vite"),
+    publicDir: false,
+    logLevel: "warn",
+    clearScreen: false,
+    resolve: {
+      alias: aliases(project),
+      // One React for screens, the runtime and project components: resolved from `.design`.
+      dedupe: ["react", "react-dom"]
+    },
+    plugins: [react(), tailwindcss()]
+  };
+}
+
+// src/build/static.ts
+var THEMES = ["light", "dark"];
+var SOURCE_EXT = /* @__PURE__ */ new Set([".ts", ".tsx", ".jsx", ".mts", ".cts", ".html", ".htm", ".md", ".map"]);
+var BUNDLED_REF = /<(script|link|img|source|video|audio|image|use|input)\b[^>]*>/gi;
+var encodePath2 = (rel) => rel.split("/").map(encodeURIComponent).join("/");
+function relUrl(fromDir, file) {
+  const rel = toPosix(path10.relative(fromDir, file));
+  return rel.startsWith(".") ? rel : `./${rel}`;
+}
+function staticSnapshots(paths) {
+  const copies = /* @__PURE__ */ new Map();
+  const metaCache = /* @__PURE__ */ new Map();
+  const meta = (canvas) => {
+    let data = metaCache.get(canvas);
+    if (!data) {
+      try {
+        data = JSON.parse(fs8.readFileSync(path10.join(paths.snapshots, canvas, "meta.json"), "utf8"));
+      } catch {
+      }
+      data ??= {};
+      metaCache.set(canvas, data);
+    }
+    return data;
+  };
+  const lookup = (canvas, id2) => {
+    const entry = meta(canvas)[id2];
+    if (!entry) return null;
+    const urls = {};
+    for (const theme2 of THEMES) {
+      const file = path10.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
+      if (!entry[theme2] || !fs8.existsSync(file)) continue;
+      const rel = `_snap/${canvas}/${id2}.${theme2}.png`;
+      copies.set(file, rel);
+      urls[theme2] = `${encodePath2(rel)}?v=${entry[theme2]}`;
+    }
+    return { urls, height: entry.height };
+  };
+  return { lookup, copies };
+}
+function rewriteRefs(html, originalDir, stagedDir) {
+  return html.replace(BUNDLED_REF, (tag, name) => {
+    const lower = name.toLowerCase();
+    if (lower === "script" && !/\btype\s*=\s*["']?module/i.test(tag)) return tag;
+    if (lower === "link" && !/\brel\s*=\s*["']?(?:stylesheet|icon|apple-touch-icon|modulepreload)/i.test(tag))
+      return tag;
+    return tag.replace(
+      /(\s(?:src|href|poster)\s*=\s*)(["'])([^"']*)\2/gi,
+      (whole, attr, quote, value) => {
+        if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/|#|\{)/i.test(value)) return whole;
+        const [pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value).slice(1);
+        const target = path10.resolve(originalDir, decodeURIComponent(pathname));
+        if (!fs8.existsSync(target)) return whole;
+        return `${attr}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
+      }
+    );
+  });
+}
+function copyTree(from, to, filter) {
+  if (!fs8.existsSync(from)) return;
+  for (const entry of fs8.readdirSync(from, { withFileTypes: true })) {
+    if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+    const source = path10.join(from, entry.name);
+    const target = path10.join(to, entry.name);
+    if (entry.isDirectory()) copyTree(source, target, filter);
+    else if (filter(source) && !fs8.existsSync(target)) {
+      fs8.mkdirSync(path10.dirname(target), { recursive: true });
+      fs8.copyFileSync(source, target);
+    }
+  }
+}
+function writeJson(file, value) {
+  fs8.mkdirSync(path10.dirname(file), { recursive: true });
+  fs8.writeFileSync(file, JSON.stringify(value));
+}
+async function buildSite(paths, only, out) {
+  const snapshots = staticSnapshots(paths);
+  const project = new DesignProject(paths, STATIC_URLS, snapshots.lookup);
+  const known = project.canvasIds();
+  const unknown = only.filter((id2) => !known.includes(id2));
+  if (unknown.length) throw new Error(`No canvas ${unknown.map((id2) => `"${id2}"`).join(", ")}`);
+  const canvasIds = only.length ? only : known;
+  const canvases = canvasIds.map((id2) => project.canvas(id2)).filter((c) => c !== null);
+  const system = project.system();
+  const entries = new Entries(project);
+  entries.sync();
+  linkShippedPackages(paths);
+  const staging = path10.join(paths.cache, "build", "src");
+  fs8.rmSync(staging, { recursive: true, force: true });
+  const fonts = system?.doc.fonts ?? [];
+  const sources = [...system?.specimens ?? [], ...canvases.flatMap((canvas) => canvas.screens)];
+  const inputs = [];
+  const htmlScreens = [];
+  for (const source of sources) {
+    if (!source.builtin && !fs8.existsSync(source.file)) continue;
+    const siteDir = path10.join("_s", source.canvas, source.id);
+    const dir = path10.join(staging, siteDir);
+    const file = path10.join(dir, "index.html");
+    fs8.mkdirSync(dir, { recursive: true });
+    const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
+    const head = {
+      source,
+      theme: canvasTheme ?? "light",
+      fonts,
+      snapshots: false,
+      autoHeight: source.autoHeight ?? false
+    };
+    if (source.format === "module") {
+      fs8.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
+    } else {
+      const raw = rewriteRefs(fs8.readFileSync(source.file, "utf8"), path10.dirname(source.file), dir);
+      const withSystem = source.system && !optsOutOfSystem(raw);
+      const html = injectIntoHtml(raw, {
+        ...head,
+        systemCss: withSystem ? relUrl(dir, entries.systemCssFile()) : void 0,
+        boot: relUrl(dir, path10.join(entries.dir, HTML_BOOT))
+      });
+      fs8.writeFileSync(file, html);
+      htmlScreens.push({ source, dir: siteDir });
+    }
+    inputs.push(file);
+  }
+  fs8.mkdirSync(out, { recursive: true });
+  if (inputs.length) {
+    const base = baseConfig(project);
+    await build({
+      ...base,
+      root: staging,
+      base: "./",
+      logLevel: "warn",
+      build: {
+        outDir: out,
+        emptyOutDir: true,
+        assetsDir: "_assets",
+        target: "es2022",
+        reportCompressedSize: false,
+        chunkSizeWarningLimit: 8e3,
+        rolldownOptions: { input: inputs }
+      }
+    });
+  } else {
+    fs8.rmSync(out, { recursive: true, force: true });
+    fs8.mkdirSync(out, { recursive: true });
+  }
+  for (const { source, dir } of htmlScreens) {
+    copyTree(
+      path10.dirname(source.file),
+      path10.join(out, dir),
+      (file) => !SOURCE_EXT.has(path10.extname(file).toLowerCase())
+    );
+  }
+  const files = /* @__PURE__ */ new Set();
+  for (const canvas of canvases) {
+    for (const page of canvas.doc.pages)
+      for (const section of page.sections)
+        for (const item of section.items) if (item.kind === "image" && item.url.startsWith("_f/")) files.add(item.url);
+  }
+  for (const asset of system?.doc.assets ?? []) files.add(asset.url);
+  for (const url of files) {
+    const rel = url.slice("_f/".length).split("/").map(decodeURIComponent).join("/");
+    const from = path10.join(paths.design, rel);
+    if (!fs8.existsSync(from)) continue;
+    const to = path10.join(out, "_f", rel);
+    fs8.mkdirSync(path10.dirname(to), { recursive: true });
+    fs8.copyFileSync(from, to);
+  }
+  for (const [from, rel] of snapshots.copies) {
+    const to = path10.join(out, rel);
+    fs8.mkdirSync(path10.dirname(to), { recursive: true });
+    fs8.copyFileSync(from, to);
+  }
+  const info = project.info(true);
+  info.canvases = info.canvases.filter((canvas) => canvasIds.includes(canvas.id));
+  writeJson(path10.join(out, "api", "project.json"), info);
+  for (const canvas of canvases) writeJson(path10.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
+  if (system) {
+    writeJson(path10.join(out, "api", "system.json"), system.doc);
+    const texts = {};
+    for (const component of system.doc.components) {
+      for (const rel of [component.specimen, ...component.sources]) {
+        const file = path10.join(paths.root, rel);
+        if (!(rel in texts) && fs8.existsSync(file)) texts[rel] = fs8.readFileSync(file, "utf8");
+      }
+    }
+    writeJson(path10.join(out, "api", "sources.json"), texts);
+  }
+  fs8.rmSync(staging, { recursive: true, force: true });
+  const errors = [
+    ...only.length ? [] : project.config().issues,
+    ...system?.doc.issues ?? [],
+    ...canvases.flatMap((canvas) => canvas.doc.issues)
+  ].filter((issue) => issue.severity === "error").length;
+  return { out, canvases: canvasIds, frames: inputs.length, errors };
+}
+function copyViewer(viewerDir, out) {
+  copyTree(viewerDir, out, () => true);
+  const index = path10.join(out, "index.html");
+  const html = fs8.readFileSync(index, "utf8");
+  const flag = "<script>window.__DESIGN_STATIC__=true</script>";
+  const head = /<head(\s[^>]*)?>/i.exec(html);
+  fs8.writeFileSync(
+    index,
+    head ? html.slice(0, head.index + head[0].length) + flag + html.slice(head.index + head[0].length) : flag + html
+  );
+  return { absoluteAssets: /(?:src|href)=["']\/(?!\/)/.test(html) };
+}
+
+// src/cli/log.ts
+var color = process.stdout.isTTY && !process.env.NO_COLOR;
+var wrap = (code) => (text) => color ? `\x1B[${code}m${text}\x1B[0m` : text;
+var bold = wrap("1");
+var dim = wrap("2");
+var red = wrap("31");
+var green = wrap("32");
+var yellow = wrap("33");
+var cyan = wrap("36");
+var CliError = class extends Error {
+  constructor(message, code = 1) {
+    super(message);
+    this.code = code;
+  }
+  code;
+};
+for (const stream of [process.stdout, process.stderr]) {
+  stream.on("error", (error) => {
+    if (error.code === "EPIPE") process.exit(0);
+    throw error;
+  });
+}
+function print(line = "") {
+  process.stdout.write(`${line}
+`);
+}
+function warn(line) {
+  process.stderr.write(`${yellow("warning")} ${line}
+`);
+}
+
+// src/cli/commands/build.ts
+function pack(out) {
+  const archive = `${out.replace(/[\\/]+$/, "")}.tar.gz`;
+  fs9.rmSync(archive, { force: true });
+  const entries = fs9.readdirSync(out);
+  const result = spawnSync("tar", ["-czf", archive, "-C", out, ...entries], {
+    stdio: ["ignore", "ignore", "pipe"],
+    env: { ...process.env, COPYFILE_DISABLE: "1" }
+  });
+  if (result.status !== 0)
+    throw new CliError(`tar failed: ${result.stderr?.toString().trim() || result.error?.message}`);
+  return archive;
+}
+async function runBuild(paths, canvases, options) {
+  if (!fs9.existsSync(path11.join(PKG.viewer, "index.html"))) {
+    throw new CliError("The viewer is missing from this foss-design install (dist/viewer). Rebuild or reinstall it.");
+  }
+  const out = path11.resolve(options.out ?? path11.join(paths.cache, "site"));
+  if (out === paths.root || out === paths.design) throw new CliError(`Refusing to build into ${out}`);
+  print(dim(`Building ${canvases.length ? canvases.join(", ") : "every canvas"} and the design system\u2026`));
+  let result;
+  try {
+    result = await buildSite(paths, canvases, out);
+  } catch (error) {
+    throw new CliError(error.message);
+  }
+  const { absoluteAssets } = copyViewer(PKG.viewer, out);
+  if (absoluteAssets) warn("the viewer references assets by absolute path; the site only works at the root of a host");
+  print(`${bold("Site")}    ${out}`);
+  print(
+    `${bold("Frames")}  ${result.frames} ${dim(`(${result.canvases.length} canvas${result.canvases.length === 1 ? "" : "es"})`)}`
+  );
+  if (options.tar) print(`${bold("Archive")} ${pack(out)} ${dim("(index.html at the root)")}`);
+  if (result.errors)
+    warn(`${result.errors} error${result.errors === 1 ? "" : "s"} in the built canvases \u2014 \`design check\` lists them`);
+}
+
+// src/capture/chrome.ts
+import fs10 from "fs";
+var CANDIDATES = {
+  darwin: [
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    "/Applications/Chromium.app/Contents/MacOS/Chromium",
+    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
+    "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
+  ],
+  linux: [
+    "/usr/bin/google-chrome",
+    "/usr/bin/google-chrome-stable",
+    "/usr/bin/chromium",
+    "/usr/bin/chromium-browser",
+    "/snap/bin/chromium",
+    "/usr/bin/microsoft-edge"
+  ],
+  win32: [
+    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+    "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+    "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
+  ]
+};
+function findChrome() {
+  const configured = process.env.DESIGN_CHROME;
+  if (configured && fs10.existsSync(configured)) return configured;
+  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs10.existsSync(candidate)) return candidate;
+  return null;
+}
+async function launchChrome() {
+  const executablePath = findChrome();
+  if (!executablePath) {
+    throw new Error(
+      "No Chrome, Chromium or Edge found. Install one, or point DESIGN_CHROME at a Chromium-based browser binary."
+    );
+  }
+  const { chromium } = await import("playwright-core");
+  return chromium.launch({ executablePath, headless: true, args: ["--hide-scrollbars", "--force-color-profile=srgb"] });
+}
+async function openFrame(page, url, options = {}) {
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text().replace(/^(?:\s*%[osdifcO])+\s*/, ""));
+  });
+  await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
+  let ready = options.waitForReady === false;
+  if (!ready) {
+    try {
+      await page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
+        timeout: options.timeoutMs ?? 2e4
+      });
+      ready = true;
+    } catch {
+    }
+  }
+  await page.waitForTimeout(options.settleMs ?? 700);
+  const runtimeErrors = await page.evaluate(() => window.__DESIGN_ERRORS__ ?? []).catch(() => []);
+  for (const error of runtimeErrors) if (!errors.includes(error)) errors.push(error);
+  const overlay = await page.evaluate(() => {
+    const el = document.querySelector("vite-error-overlay");
+    return el?.shadowRoot?.querySelector(".message")?.textContent ?? null;
+  }).catch(() => null);
+  if (overlay) errors.unshift(overlay.trim());
+  const unique = errors.filter(
+    (error, index) => error && !errors.some((other, j) => j !== index && other && other.length < error.length && error.includes(other))
+  );
+  return { errors: [...new Set(unique)], ready };
+}
+
+// src/capture/frames.ts
+var AUTO_VIEWPORT_HEIGHT = 900;
+function withTheme(url, theme2) {
+  return `${url}${url.includes("?") ? "&" : "?"}theme=${theme2}`;
+}
+function absolute(base, url) {
+  return /^https?:\/\//.test(url) ? url : `${base.replace(/\/$/, "")}${url.startsWith("/") ? "" : "/"}${url}`;
+}
+function frameJob(base, canvas, page, item, theme2) {
+  const auto = item.frame.height === "auto";
+  const pinned = item.kind === "screen" ? item.theme : void 0;
+  const effective = pinned ?? theme2;
+  return {
+    key: `${canvas}/${item.id}`,
+    canvas,
+    id: item.id,
+    page,
+    url: item.kind === "url" ? item.url : withTheme(absolute(base, item.url), effective),
+    width: item.frame.width,
+    height: auto ? AUTO_VIEWPORT_HEIGHT : item.frame.height,
+    fullPage: auto,
+    theme: effective,
+    waitForReady: item.kind === "screen"
+  };
+}
+function isFrameItem(item) {
+  return item.kind === "screen" || item.kind === "url";
+}
+function canvasFrames(doc, base, theme2, filter = {}) {
+  const jobs = [];
+  for (const page of doc.pages) {
+    if (filter.page && page.id !== filter.page) continue;
+    for (const section of page.sections) {
+      for (const item of section.items) {
+        if (!isFrameItem(item)) continue;
+        if (filter.id && item.id !== filter.id) continue;
+        if (item.kind === "url" && filter.includeUrls === false) continue;
+        if (item.kind === "screen" && item.missing && filter.skipMissing !== false) continue;
+        jobs.push(frameJob(base, doc.id, page.id, item, theme2));
+      }
+    }
+  }
+  return jobs;
+}
+function systemFrames(doc, base, theme2) {
+  const specimens = doc.components.map((component) => ({ id: component.id, url: component.url }));
+  if (doc.typographyUrl) specimens.push({ id: "@typography", url: doc.typographyUrl });
+  return specimens.map(({ id: id2, url }) => ({
+    key: `@system/${id2}`,
+    canvas: "@system",
+    id: id2,
+    url: withTheme(absolute(base, url), theme2),
+    width: 1200,
+    height: 800,
+    fullPage: true,
+    theme: theme2,
+    waitForReady: true
+  }));
+}
+async function mapLimit(items, limit, fn) {
+  const results = new Array(items.length);
+  let next = 0;
+  const worker = async () => {
+    while (next < items.length) {
+      const index = next++;
+      results[index] = await fn(items[index], index);
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker));
+  return results;
+}
+
+// src/server/state.ts
+import fs11 from "fs";
+import path12 from "path";
+var stateFile = (paths) => path12.join(paths.cache, "server.json");
+var logFile = (paths) => path12.join(paths.cache, "server.log");
+function readState(paths) {
+  try {
+    return JSON.parse(fs11.readFileSync(stateFile(paths), "utf8"));
+  } catch {
+    return null;
+  }
+}
+function writeState(paths, state) {
+  fs11.mkdirSync(paths.cache, { recursive: true });
+  fs11.writeFileSync(stateFile(paths), `${JSON.stringify(state, null, 2)}
+`);
+}
+function clearState(paths, pid) {
+  const state = readState(paths);
+  if (pid !== void 0 && state && state.pid !== pid) return;
+  fs11.rmSync(stateFile(paths), { force: true });
+}
+function pidAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return error.code === "EPERM";
+  }
+}
+async function liveServer(paths) {
+  const state = readState(paths);
+  if (!state || !pidAlive(state.pid)) return null;
+  try {
+    const response = await fetch(`http://127.0.0.1:${state.port}/api/health`, { signal: AbortSignal.timeout(1500) });
+    if (!response.ok) return null;
+    const health = await response.json();
+    return health.root === paths.root ? state : null;
+  } catch {
+    return null;
+  }
+}
+
+// src/cli/commands/preview.ts
+import { spawn } from "child_process";
+import fs15 from "fs";
+
+// src/server/index.ts
+import fs14 from "fs";
+import http from "http";
+import path15 from "path";
+import sirv from "sirv";
+import { createServer, searchForWorkspaceRoot } from "vite";
+
+// src/server/api.ts
+import fs12 from "fs";
+import path13 from "path";
+function sendJson(res, status, body) {
+  res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
+  res.end(JSON.stringify(body));
+}
+function readBody(req, limit = 25 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size2 = 0;
+    req.on("data", (chunk) => {
+      size2 += chunk.length;
+      if (size2 > limit) {
+        reject(new Error("body too large"));
+        req.destroy();
+      } else chunks.push(chunk);
+    });
+    req.on("end", () => resolve(Buffer.concat(chunks)));
+    req.on("error", reject);
+  });
+}
+async function handleApi(ctx, req, res, url) {
+  const { project, events, snapshots } = ctx;
+  const route = url.pathname.slice("/api".length);
+  const method = req.method ?? "GET";
+  if (route === "/health") {
+    sendJson(res, 200, { ok: true, root: project.paths.root, version: packageVersion(), pid: process.pid });
+    return true;
+  }
+  if (route === "/events") {
+    events.attach(req, res);
+    return true;
+  }
+  if (route === "/project") {
+    sendJson(res, 200, project.info(false));
+    return true;
+  }
+  if (route === "/system") {
+    const system = project.system();
+    if (!system) sendJson(res, 404, { error: "This project has no design system yet (.design/system)." });
+    else sendJson(res, 200, system.doc);
+    return true;
+  }
+  const canvasMatch = /^\/canvas\/([^/]+)$/.exec(route);
+  if (canvasMatch) {
+    const canvas = project.canvas(decodeURIComponent(canvasMatch[1]));
+    if (!canvas) sendJson(res, 404, { error: `No canvas "${decodeURIComponent(canvasMatch[1])}"` });
+    else sendJson(res, 200, canvas.doc);
+    return true;
+  }
+  if (route === "/source") {
+    const rel = url.searchParams.get("path") ?? "";
+    const file = path13.resolve(project.paths.root, rel);
+    if (!rel || !isInside(project.paths.root, file) || !fs12.existsSync(file) || fs12.statSync(file).isDirectory()) {
+      sendJson(res, 404, { error: "not found" });
+      return true;
+    }
+    if (fs12.statSync(file).size > 2 * 1024 * 1024) {
+      sendJson(res, 413, { error: "file too large to show" });
+      return true;
+    }
+    res.writeHead(200, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
+    res.end(fs12.readFileSync(file, "utf8"));
+    return true;
+  }
+  const snapshotPost = /^\/snapshots\/([^/]+)\/([^/]+)$/.exec(route);
+  if (snapshotPost && method === "POST") {
+    const canvas = decodeURIComponent(snapshotPost[1]);
+    const id2 = decodeURIComponent(snapshotPost[2]);
+    const theme2 = url.searchParams.get("theme") === "dark" ? "dark" : "light";
+    const heightParam = Number(url.searchParams.get("height"));
+    const height = Number.isFinite(heightParam) && heightParam > 0 ? Math.round(heightParam) : void 0;
+    try {
+      const body = await readBody(req);
+      if (body.subarray(0, 8).toString("hex") !== "89504e470d0a1a0a") throw new Error("not a PNG");
+      const { url: snapshotUrl } = snapshots.save(canvas, id2, theme2, body, height);
+      project.invalidateCanvas(canvas);
+      events.send({ type: "snapshot", canvas, id: id2, theme: theme2, url: snapshotUrl, height });
+      sendJson(res, 200, { url: snapshotUrl });
+    } catch (error) {
+      sendJson(res, 400, { error: error.message });
+    }
+    return true;
+  }
+  if (snapshotPost && method === "GET") {
+    const file = snapshots.file(decodeURIComponent(snapshotPost[1]), decodeURIComponent(snapshotPost[2]));
+    if (!file) {
+      res.writeHead(404);
+      res.end();
+      return true;
+    }
+    res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
+    fs12.createReadStream(file).pipe(res);
+    return true;
+  }
+  return false;
+}
+
+// src/server/events.ts
+var EventHub = class {
+  clients = /* @__PURE__ */ new Set();
+  timer;
+  constructor() {
+    this.timer = setInterval(() => {
+      for (const client of this.clients) client.write(": ping\n\n");
+    }, 2e4);
+    this.timer.unref();
+  }
+  attach(req, res) {
+    res.writeHead(200, {
+      "content-type": "text/event-stream",
+      "cache-control": "no-cache, no-transform",
+      connection: "keep-alive"
+    });
+    res.write(": connected\n\n");
+    this.clients.add(res);
+    req.on("close", () => this.clients.delete(res));
+  }
+  send(event) {
+    const data = `data: ${JSON.stringify(event)}
+
+`;
+    for (const client of this.clients) client.write(data);
+  }
+  close() {
+    clearInterval(this.timer);
+    for (const client of this.clients) client.end();
+    this.clients.clear();
+  }
+};
+
+// src/server/snapshots.ts
+import fs13 from "fs";
+import path14 from "path";
+var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
+function isSafeSegment(value) {
+  return SAFE.test(value);
+}
+var SnapshotStore = class {
+  constructor(dir, urlBase = "/api/snapshots") {
+    this.dir = dir;
+    this.urlBase = urlBase;
+  }
+  dir;
+  urlBase;
+  meta = /* @__PURE__ */ new Map();
+  metaFile(canvas) {
+    return path14.join(this.dir, canvas, "meta.json");
+  }
+  load(canvas) {
+    const cached = this.meta.get(canvas);
+    if (cached) return cached;
+    let data = {};
+    try {
+      data = JSON.parse(fs13.readFileSync(this.metaFile(canvas), "utf8"));
+    } catch {
+    }
+    this.meta.set(canvas, data);
+    return data;
+  }
+  url(canvas, id2, theme2, version) {
+    return `${this.urlBase}/${encodeURIComponent(canvas)}/${encodeURIComponent(id2)}.${theme2}.png?v=${version}`;
+  }
+  lookup = (canvas, id2) => {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return null;
+    const entry = this.load(canvas)[id2];
+    if (!entry) return null;
+    const urls = {};
+    if (entry.light) urls.light = this.url(canvas, id2, "light", entry.light);
+    if (entry.dark) urls.dark = this.url(canvas, id2, "dark", entry.dark);
+    return { urls, height: entry.height };
+  };
+  save(canvas, id2, theme2, png, height) {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
+    const dir = path14.join(this.dir, canvas);
+    fs13.mkdirSync(dir, { recursive: true });
+    fs13.writeFileSync(path14.join(dir, `${id2}.${theme2}.png`), png);
+    const data = this.load(canvas);
+    const version = Date.now();
+    data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
+    fs13.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
+    return { url: this.url(canvas, id2, theme2, version) };
+  }
+  /** Absolute path of `<id>.<theme>.png`, or null. */
+  file(canvas, name) {
+    const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)\.png$/i.exec(name);
+    if (!isSafeSegment(canvas) || !match) return null;
+    const file = path14.join(this.dir, canvas, name);
+    return fs13.existsSync(file) ? file : null;
+  }
+};
+
+// src/server/index.ts
+var DEFAULT_PORT = 0;
+async function listen(server, port, host) {
+  const attempt = (candidate) => new Promise((resolve, reject) => {
+    const onError = (error) => {
+      server.off("listening", onListening);
+      reject(error);
+    };
+    const onListening = () => {
+      server.off("error", onError);
+      resolve(server.address().port);
+    };
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(candidate, host);
+  });
+  if (port === 0) return attempt(0);
+  for (let candidate = port; candidate < port + 40; candidate++) {
+    try {
+      return await attempt(candidate);
+    } catch (error) {
+      if (error.code !== "EADDRINUSE") throw error;
+    }
+  }
+  throw new Error(`No free port between ${port} and ${port + 40}`);
+}
+function notFoundPage(res, title, text) {
+  res.writeHead(404, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+  res.end(
+    `<!doctype html><meta charset="utf-8"><body style="margin:0;display:grid;place-items:center;min-height:100vh;font:14px/1.5 ui-monospace,Menlo,monospace;background:#f5f6f8;color:#3a414a"><div style="max-width:520px;padding:24px"><div style="font-weight:600;margin-bottom:6px">${escapeHtml(title)}</div>${escapeHtml(text)}</div></body>`
+  );
+}
+async function startDevServer(options) {
+  const paths = designPaths(options.root);
+  if (!fs14.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs14.mkdirSync(paths.cache, { recursive: true });
+  const snapshots = new SnapshotStore(paths.snapshots);
+  const project = new DesignProject(paths, DEV_URLS, snapshots.lookup);
+  const entries = new Entries(project);
+  entries.sync();
+  const links = linkShippedPackages(paths);
+  const events = new EventHub();
+  const httpServer = http.createServer();
+  const base = baseConfig(project);
+  const vite = await createServer({
+    ...base,
+    base: "/_fs/",
+    appType: "custom",
+    server: {
+      middlewareMode: { server: httpServer },
+      // Without this Vite 8 opens HMR on its own port (24678), which a second preview then collides with.
+      hmr: { server: httpServer },
+      fs: {
+        strict: true,
+        allow: [searchForWorkspaceRoot(paths.root), paths.root, paths.design, PKG.root, ...links.allow]
+      },
+      watch: {
+        ignored: ["**/.cache/vite/**", "**/.cache/snapshots/**", "**/.cache/shots/**", "**/.cache/build/**"]
+      }
+    },
+    optimizeDeps: {
+      entries: entries.files().map((file) => toPosix(path15.relative(paths.design, file)))
+    }
+  });
+  const viewer = fs14.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path15.join(PKG.viewer, "index.html");
+  const serveViewerIndex = (res) => {
+    const html = fs14.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+    res.end(html);
+  };
+  const ctx = { project, events, snapshots };
+  const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
+  const bootUrl = `/${relToDesign(paths, path15.join(entries.dir, HTML_BOOT))}`;
+  const frameHead = (source, extra = {}) => {
+    const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
+    return {
+      source,
+      theme: canvasTheme ?? "light",
+      fonts: project.system()?.doc.fonts ?? [],
+      snapshots: source.canvas !== SYSTEM_CANVAS,
+      autoHeight: source.autoHeight ?? false,
+      ...extra
+    };
+  };
+  const serveModuleShell = async (req, res, url2) => {
+    const [canvas = "", id2 = ""] = url2.pathname.slice("/_s/".length).split("/").map(decodeURIComponent);
+    const source = project.source(canvas, id2);
+    if (source?.format !== "module") {
+      notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
+      return;
+    }
+    if (!fs14.existsSync(entries.entryFile(source))) entries.sync();
+    const entryUrl = `/${relToDesign(paths, entries.entryFile(source))}`;
+    const html = await vite.transformIndexHtml(url2.pathname + url2.search, moduleShell(frameHead(source), entryUrl));
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+    res.end(html);
+    void req;
+  };
+  const serveHtmlScreen = async (res, url2) => {
+    const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
+    const file = path15.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs14.existsSync(file)) {
+      notFoundPage(res, "Screen not found", `No file .design/${rel}`);
+      return;
+    }
+    const [canvas = "", id2 = ""] = (url2.searchParams.get("__design") ?? "").split("/");
+    const found = project.source(canvas, id2);
+    const source = found ?? {
+      key: `${canvas}/${id2}`,
+      canvas,
+      id: id2,
+      title: path15.basename(file),
+      file,
+      format: "html",
+      props: {},
+      system: true
+    };
+    const raw = fs14.readFileSync(file, "utf8");
+    const withSystem = source.system && !optsOutOfSystem(raw);
+    const html = injectIntoHtml(
+      raw,
+      frameHead(source, { systemCss: withSystem ? systemCssUrl : void 0, boot: bootUrl })
+    );
+    const transformed = await vite.transformIndexHtml(`/${rel}`, html, url2.pathname + url2.search);
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+    res.end(transformed);
+  };
+  httpServer.on("request", (req, res) => {
+    const url2 = new URL(req.url ?? "/", "http://localhost");
+    const fail = (error) => {
+      if (res.headersSent) return res.end();
+      sendJson(res, 500, { error: error?.stack ?? String(error) });
+    };
+    try {
+      if (url2.pathname.startsWith("/api/")) {
+        handleApi(ctx, req, res, url2).then((handled) => {
+          if (!handled) sendJson(res, 404, { error: "unknown endpoint" });
+        }).catch(fail);
+        return;
+      }
+      if (url2.pathname.startsWith("/_s/")) {
+        serveModuleShell(req, res, url2).catch(fail);
+        return;
+      }
+      if (url2.pathname.startsWith("/_fs/") && url2.searchParams.has("__design") && /\.html?$/i.test(url2.pathname)) {
+        serveHtmlScreen(res, url2).catch(fail);
+        return;
+      }
+      if (url2.pathname.startsWith("/_fs/")) {
+        vite.middlewares(req, res, () => notFoundPage(res, "Not found", url2.pathname));
+        return;
+      }
+      if (viewer) {
+        if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
+        else
+          viewer(
+            req,
+            res,
+            () => path15.extname(url2.pathname) ? notFoundPage(res, "Not found", url2.pathname) : serveViewerIndex(res)
+          );
+      } else notFoundPage(res, "Viewer is not built", "Run `pnpm build` in the foss-design package.");
+    } catch (error) {
+      fail(error);
+    }
+  });
+  const pending = /* @__PURE__ */ new Map();
+  let flushTimer;
+  const queue = (key, run) => {
+    pending.set(key, run);
+    clearTimeout(flushTimer);
+    flushTimer = setTimeout(() => {
+      const runs = [...pending.values()];
+      pending.clear();
+      try {
+        for (const job of runs) job();
+        entries.sync();
+      } catch (error) {
+        console.error("[design]", error.message);
+      }
+    }, 60);
+  };
+  vite.watcher.on("all", (event, file) => {
+    const rel = toPosix(path15.relative(paths.design, file));
+    if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
+    if (rel === "design.json") {
+      queue("config", () => {
+        project.invalidateConfig();
+        events.send({ type: "project" });
+      });
+    } else if (rel.startsWith("system/")) {
+      queue("system", () => {
+        project.invalidateSystem();
+        events.send({ type: "system" });
+        events.send({ type: "project" });
+      });
+    } else if (rel.startsWith("canvas/")) {
+      const [, id2, ...rest] = rel.split("/");
+      if (!id2) return;
+      const structural = event !== "change" || rest.join("/") === "canvas.json";
+      if (!structural) return;
+      queue(`canvas:${id2}`, () => {
+        project.invalidateCanvas(id2);
+        events.send({ type: "canvas", id: id2 });
+        events.send({ type: "project" });
+      });
+    }
+  });
+  const host = options.host ?? "127.0.0.1";
+  const port = await listen(httpServer, options.port ?? project.config().config.port ?? DEFAULT_PORT, host);
+  const url = `http://localhost:${port}`;
+  if (options.record !== false) {
+    writeState(paths, {
+      pid: process.pid,
+      port,
+      url,
+      root: paths.root,
+      version: packageVersion(),
+      startedAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }
+  let closed = false;
+  return {
+    url,
+    port,
+    project,
+    async close() {
+      if (closed) return;
+      closed = true;
+      events.close();
+      await vite.close();
+      await new Promise((resolve) => {
+        httpServer.close(() => resolve());
+        httpServer.closeAllConnections();
+      });
+      if (options.record !== false) clearState(paths, process.pid);
+    }
+  };
+}
+
+// src/cli/commands/preview.ts
+function openBrowser(url) {
+  const [command, args] = process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", ["/c", "start", '""', url]] : ["xdg-open", [url]];
+  const child = spawn(command, args, { stdio: "ignore", detached: true });
+  child.on("error", () => {
+  });
+  child.unref();
+}
+function printUrls(paths, url) {
+  const project = new DesignProject(paths, DEV_URLS);
+  print(`${bold("Preview")} ${url}`);
+  for (const id2 of project.canvasIds()) print(`  ${dim("canvas")} ${url}/c/${id2}`);
+  if (project.system()) print(`  ${dim("system")} ${url}/system`);
+}
+async function waitForServer(paths, timeoutMs) {
+  const until = Date.now() + timeoutMs;
+  while (Date.now() < until) {
+    const live = await liveServer(paths);
+    if (live) return live;
+    await new Promise((resolve) => setTimeout(resolve, 150));
+  }
+  return null;
+}
+async function stopServer(paths) {
+  const state = readState(paths);
+  if (!state) return false;
+  try {
+    process.kill(state.pid, "SIGTERM");
+  } catch {
+    clearState(paths);
+    return false;
+  }
+  const until = Date.now() + 5e3;
+  while (Date.now() < until) {
+    try {
+      process.kill(state.pid, 0);
+    } catch {
+      break;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  clearState(paths);
+  return true;
+}
+async function ensureServer(paths, options) {
+  const live = await liveServer(paths);
+  if (live && !options.restart) return live;
+  if (live) await stopServer(paths);
+  fs15.mkdirSync(paths.cache, { recursive: true });
+  const log = fs15.openSync(logFile(paths), "w");
+  const args = [PKG.cli, "preview", "--foreground", "--root", paths.root];
+  if (options.port) args.push("--port", String(options.port));
+  const child = spawn(process.execPath, args, { detached: true, stdio: ["ignore", log, log], cwd: paths.root });
+  child.unref();
+  const state = await waitForServer(paths, 4e4);
+  if (!state) {
+    const tail = fs15.existsSync(logFile(paths)) ? fs15.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    throw new CliError(`The preview server did not start.
+${tail.join("\n")}`);
+  }
+  return state;
+}
+async function runPreview(paths, options) {
+  const openPath = typeof options.open === "string" ? options.open : "";
+  if (options.foreground) {
+    const server = await startDevServer({ root: paths.root, port: options.port });
+    printUrls(paths, server.url);
+    if (options.open) openBrowser(`${server.url}${openPath}`);
+    const shutdown = () => {
+      void server.close().finally(() => process.exit(0));
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+    return;
+  }
+  const state = await ensureServer(paths, options);
+  printUrls(paths, state.url);
+  if (options.open) openBrowser(`${state.url}${openPath}`);
+}
+async function runStop(paths) {
+  print(await stopServer(paths) ? "Stopped the preview server." : "No preview server is running for this project.");
+}
+
+// src/cli/commands/check.ts
+var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
+function printIssues(issues) {
+  const byFile = /* @__PURE__ */ new Map();
+  for (const issue of issues) byFile.set(issue.file, [...byFile.get(issue.file) ?? [], issue]);
+  for (const [file, list] of byFile) {
+    print(bold(file));
+    for (const issue of list) {
+      const tag = issue.severity === "error" ? red("error  ") : yellow("warning");
+      print(`  ${tag} ${issue.at ? `${dim(issue.at)}  ` : ""}${issue.message}`);
+    }
+  }
+}
+async function renderFrames(jobs) {
+  const browser = await launchChrome();
+  try {
+    return await mapLimit(jobs, 4, async (job) => {
+      const page = await browser.newPage({ viewport: { width: job.width, height: job.height } });
+      let report;
+      try {
+        report = await openFrame(page, job.url, { waitForReady: job.waitForReady, settleMs: 300 });
+      } catch (error) {
+        report = { ready: false, errors: [error.message.split("\n")[0]] };
+      } finally {
+        await page.close().catch(() => {
+        });
+      }
+      return { key: job.key, url: job.url, ready: report.ready, errors: report.errors };
+    });
+  } finally {
+    await browser.close();
+  }
+}
+async function runCheck(paths, canvases, options) {
+  const project = new DesignProject(paths, DEV_URLS);
+  const known = project.canvasIds();
+  const unknown = canvases.filter((id2) => !known.includes(id2));
+  if (unknown.length) {
+    throw new CliError(
+      `No canvas ${unknown.map((id2) => `"${id2}"`).join(", ")}. Canvases: ${known.join(", ") || "none yet"}`
+    );
+  }
+  const issues = canvases.length ? canvases.flatMap((id2) => project.canvas(id2)?.doc.issues ?? []) : project.issues();
+  let frames = [];
+  if (options.render) {
+    const wasRunning = await liveServer(paths);
+    const server = await ensureServer(paths, {});
+    if (!wasRunning && !options.json)
+      print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
+    const base = `http://127.0.0.1:${server.port}`;
+    const docs = (canvases.length ? canvases : known).map((id2) => project.canvas(id2).doc);
+    const jobs = docs.flatMap((doc) => canvasFrames(doc, base, doc.theme ?? "light", { includeUrls: false }));
+    const system = project.system();
+    if (!canvases.length && system) jobs.unshift(...systemFrames(system.doc, base, "light"));
+    if (!options.json) print(dim(`Loading ${plural(jobs.length, "frame")} in Chrome via ${server.url}\u2026`));
+    frames = await renderFrames(jobs);
+  }
+  const errors = issues.filter((issue) => issue.severity === "error").length;
+  const warnings = issues.length - errors;
+  const broken = frames.filter((frame) => !frame.ready || frame.errors.length);
+  if (options.json) {
+    print(JSON.stringify({ issues, frames }, null, 2));
+  } else {
+    if (issues.length) printIssues(issues);
+    if (options.render) {
+      if (issues.length) print();
+      for (const frame of frames) {
+        const ok = frame.ready && !frame.errors.length;
+        print(`${ok ? green("\u2713") : red("\u2717")} ${frame.key} ${dim(frame.url)}`);
+        if (!frame.ready) print(`    ${red("did not finish rendering (no ready signal within 20s)")}`);
+        for (const error of frame.errors) print(`    ${red(error.split("\n")[0])}`);
+      }
+    }
+    const scope = canvases.length ? plural(canvases.length, "canvas", "canvases") : "the project";
+    if (!errors && !warnings && !broken.length) {
+      print(
+        green(
+          `\u2713 No problems in ${scope}${options.render ? `; ${plural(frames.length, "frame")} rendered cleanly` : ""}.`
+        )
+      );
+    } else {
+      const parts = [plural(errors, "error"), plural(warnings, "warning")];
+      if (options.render) parts.push(`${broken.length} of ${plural(frames.length, "frame")} with problems`);
+      print(errors || broken.length ? red(parts.join(", ")) : yellow(parts.join(", ")));
+    }
+  }
+  if (errors || broken.length) process.exitCode = 1;
+}
+
+// src/cli/commands/scaffold.ts
+import fs16 from "fs";
+import path16 from "path";
+
+// src/cli/templates.ts
+var TOKENS_CSS = `/*
+ * Design tokens. Every screen gets Tailwind v4 with these as utilities:
+ * bg-surface, text-ink, border-rule, font-sans, rounded-control, text-body\u2026
+ *
+ * Light values live in :root, dark overrides in :root[data-theme="dark"],
+ * and @theme inline maps them to Tailwind. A "@group Name" comment starts a
+ * group in the viewer; a comment right above a token describes it.
+ */
+
+:root {
+  /* @group Surfaces */
+  /* Page background */
+  --bg: #f4f5f7;
+  /* Cards, panels and inputs */
+  --surface: #ffffff;
+  /* Hover fills and quiet areas */
+  --soft: #eceef1;
+
+  /* @group Text */
+  --ink: #16181d;
+  --ink-2: #3b4049;
+  --muted: #6b7280;
+
+  /* @group Lines */
+  --rule: #dfe2e7;
+  --rule-strong: #b8bec7;
+
+  /* @group Accent */
+  --accent: #2f5bea;
+  --accent-ink: #ffffff;
+  --accent-soft: #e6ecfd;
+
+  /* @group Status */
+  --ok: #1f7a4d;
+  --ok-soft: #e3f3ea;
+  --danger: #c0352b;
+  --danger-soft: #fbe9e7;
+
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --bg: #111317;
+  --surface: #181b20;
+  --soft: #20242a;
+  --ink: #e8eaed;
+  --ink-2: #c4c8cf;
+  --muted: #8b929c;
+  --rule: #272b32;
+  --rule-strong: #434952;
+  --accent: #7c9bff;
+  --accent-ink: #0b1020;
+  --accent-soft: #1c2645;
+  --ok: #5cc18d;
+  --ok-soft: #16301f;
+  --danger: #f07b70;
+  --danger-soft: #3a1c19;
+  color-scheme: dark;
+}
+
+@theme inline {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-soft: var(--soft);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-muted: var(--muted);
+  --color-rule: var(--rule);
+  --color-rule-strong: var(--rule-strong);
+  --color-accent: var(--accent);
+  --color-accent-ink: var(--accent-ink);
+  --color-accent-soft: var(--accent-soft);
+  --color-ok: var(--ok);
+  --color-ok-soft: var(--ok-soft);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+
+  /* Captions, table meta */
+  --text-caption: 12px;
+  --text-caption--line-height: 16px;
+  /* Default reading size */
+  --text-body: 14px;
+  --text-body--line-height: 20px;
+  --text-title: 20px;
+  --text-title--line-height: 28px;
+  --text-display: 32px;
+  --text-display--line-height: 40px;
+
+  /* Buttons and inputs */
+  --radius-control: 6px;
+  /* Cards and panels */
+  --radius-card: 10px;
+
+  /* Menus and popovers */
+  --shadow-pop: 0 12px 32px rgb(16 24 40 / 0.14);
+}
+
+@layer base {
+  body {
+    background: var(--bg);
+    color: var(--ink);
+    font-family: var(--font-sans);
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+  }
+}
+`;
+var OVERVIEW_MD = `# Overview
+
+What this product is, who it is for, and the three or four principles every screen follows.
+
+## Principles
+
+- **One thing per screen.** Each view has one primary action.
+- **Quiet chrome.** Neutral surfaces; the accent marks what the user can act on.
+
+## Voice
+
+How the interface talks: sentence case, plain verbs, no exclamation marks.
+`;
+var BUTTON_TSX = `import type { ButtonHTMLAttributes } from 'react'
+
+export type ButtonKind = 'primary' | 'secondary' | 'ghost'
+
+const KIND: Record<ButtonKind, string> = {
+  primary: 'bg-accent text-accent-ink hover:opacity-90',
+  secondary: 'border border-rule-strong bg-surface text-ink hover:bg-soft',
+  ghost: 'text-ink-2 hover:bg-soft',
+}
+
+export function Button({
+  kind = 'secondary',
+  className = '',
+  ...rest
+}: ButtonHTMLAttributes<HTMLButtonElement> & { kind?: ButtonKind }) {
+  return (
+    <button
+      type="button"
+      className={\`inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-control px-3.5 text-body font-medium transition disabled:cursor-not-allowed disabled:opacity-45 \${KIND[kind]} \${className}\`}
+      {...rest}
+    />
+  )
+}
+`;
+var BUTTON_SPECIMEN_TSX = `/**
+ * @title Button
+ * @group Actions
+ * @description One primary action per view, secondary for the rest, ghost inside toolbars.
+ * @source ../components/button.tsx
+ */
+import { Button } from '@system/components/button'
+
+export default function ButtonSpecimen() {
+  return (
+    <div className="flex flex-col gap-6 p-8">
+      <div className="flex flex-wrap items-center gap-3">
+        <Button kind="primary">Save changes</Button>
+        <Button>Cancel</Button>
+        <Button kind="ghost">More</Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button kind="primary" disabled>
+          Save changes
+        </Button>
+        <Button disabled>Cancel</Button>
+      </div>
+    </div>
+  )
+}
+`;
+function canvasJson(title) {
+  return `${JSON.stringify(
+    {
+      title,
+      pages: [
+        {
+          id: "main",
+          title: "Main",
+          sections: [{ title: "Screens", items: [{ src: "screens/Main.tsx", device: "desktop" }] }]
+        }
+      ]
+    },
+    null,
+    2
+  )}
+`;
+}
+function mainScreen(canvasId) {
+  return `export default function Main() {
+  return (
+    <main className="grid min-h-screen place-items-center p-10">
+      <div className="max-w-md text-center">
+        <h1 className="text-2xl font-semibold">New canvas</h1>
+        <p className="mt-2 text-sm opacity-70">
+          Edit .design/canvas/${canvasId}/screens/Main.tsx and the canvas updates on save.
+        </p>
+      </div>
+    </main>
+  )
+}
+`;
+}
+
+// src/cli/commands/scaffold.ts
+function write(file, content, root) {
+  if (fs16.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path16.relative(root, file)}`);
+    return false;
+  }
+  fs16.mkdirSync(path16.dirname(file), { recursive: true });
+  fs16.writeFileSync(file, content);
+  print(`  ${green("created")} ${path16.relative(root, file)}`);
+  return true;
+}
+function ensureGitignored(root) {
+  const file = path16.join(root, ".gitignore");
+  const current = fs16.existsSync(file) ? fs16.readFileSync(file, "utf8") : "";
+  const covered = current.split(/\r?\n/).map((line) => line.trim()).some((line) => [".design", ".design/", "/.design", "/.design/", ".design/*"].includes(line));
+  if (covered) return "present";
+  const prefix = current && !current.endsWith("\n") ? "\n" : "";
+  fs16.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+.design/
+`);
+  return "added";
+}
+function projectName(root) {
+  try {
+    const manifest = JSON.parse(fs16.readFileSync(path16.join(root, "package.json"), "utf8"));
+    if (typeof manifest.name === "string" && manifest.name) return manifest.name;
+  } catch {
+  }
+  return path16.basename(root);
+}
+function runInit(root, options) {
+  const paths = designPaths(root);
+  print(`Setting up ${DESIGN_DIR} in ${root}`);
+  write(paths.config, `${JSON.stringify({ name: options.name ?? projectName(root) }, null, 2)}
+`, root);
+  fs16.mkdirSync(paths.canvases, { recursive: true });
+  if (options.gitignore) {
+    const result = ensureGitignored(root);
+    print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
+  }
+  print();
+  print("Next: `design system init` for a design system, `design new <canvas>` for a canvas, `design preview` to look.");
+}
+function runSystemInit(root, options) {
+  const paths = designPaths(root);
+  let base = projectName(root);
+  try {
+    base = JSON.parse(fs16.readFileSync(paths.config, "utf8")).name || base;
+  } catch {
+  }
+  const name = options.name ?? `${base} design system`;
+  print(`Scaffolding the design system in ${path16.relative(root, paths.system)}`);
+  write(path16.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+`, root);
+  write(path16.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  if (!options.empty) {
+    write(path16.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path16.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path16.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+  }
+}
+function runNew(root, id2, options) {
+  if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is not a valid canvas id: use letters, digits, "-" and "_"`);
+  const paths = designPaths(root);
+  const dir = path16.join(paths.canvases, id2);
+  if (fs16.existsSync(path16.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  print(`Creating canvas "${id2}"`);
+  const title = options.title ?? titleize(id2);
+  if (options.empty) {
+    write(
+      path16.join(dir, "canvas.json"),
+      `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
+`,
+      root
+    );
+    fs16.mkdirSync(path16.join(dir, "screens"), { recursive: true });
+  } else {
+    write(path16.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path16.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+  }
+}
+
+// src/cli/commands/shot.ts
+import fs17 from "fs";
+import path17 from "path";
+var OVERVIEW_TIMEOUT = 9e4;
+async function runShot(paths, target, options) {
+  const [canvasId = "", screenId] = target.split("/");
+  const project = new DesignProject(paths, DEV_URLS);
+  if (canvasId === SYSTEM_CANVAS) return shootSystem(paths, project, screenId, options);
+  const canvas = project.canvas(canvasId);
+  if (!canvas) {
+    const known = project.canvasIds();
+    throw new CliError(`No canvas "${canvasId}". Canvases: ${known.join(", ") || "none yet"}`);
+  }
+  const { doc } = canvas;
+  if (options.page && !doc.pages.some((page) => page.id === options.page)) {
+    throw new CliError(`No page "${options.page}" in "${canvasId}". Pages: ${doc.pages.map((p) => p.id).join(", ")}`);
+  }
+  const theme2 = options.theme ?? doc.theme ?? "light";
+  const outBase = path17.resolve(options.out ?? paths.shots);
+  const outDir = path17.join(outBase, canvasId);
+  fs17.mkdirSync(outDir, { recursive: true });
+  const base = await serverBase(paths);
+  const browser = await launchChrome();
+  let failed = false;
+  try {
+    if (options.overview) {
+      if (!fs17.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      const pages = options.page ? [options.page] : screenId ? doc.pages.filter((page) => page.sections.some((section) => section.items.some((item) => item.id === screenId))).map((page) => page.id) : doc.pages.map((page) => page.id);
+      for (const pageId of pages) {
+        const page = await browser.newPage({ viewport: { width: 1920, height: 1200 } });
+        const url = `${base}/c/${encodeURIComponent(canvasId)}?page=${encodeURIComponent(pageId)}&capture=1&theme=${theme2}`;
+        await page.goto(url, { waitUntil: "load" });
+        try {
+          await page.waitForFunction(
+            () => window.__DESIGN_CANVAS_READY__ === true,
+            null,
+            { timeout: OVERVIEW_TIMEOUT }
+          );
+        } catch {
+          warn(`page "${pageId}": not every frame reported ready within ${OVERVIEW_TIMEOUT / 1e3}s; shooting anyway`);
+        }
+        await page.waitForTimeout(400);
+        const file = path17.join(outDir, `${pageId}.overview.png`);
+        await page.screenshot({ path: file });
+        await page.close();
+        print(file);
+      }
+      return;
+    }
+    const jobs = canvasFrames(doc, base, theme2, { page: options.page, id: screenId });
+    if (!jobs.length) {
+      throw new CliError(
+        screenId ? `No screen "${screenId}" in "${canvasId}"${options.page ? ` on page "${options.page}"` : ""}.` : `Nothing to shoot in "${canvasId}"${options.page ? ` on page "${options.page}"` : ""}.`
+      );
+    }
+    failed = await shootFrames(browser, jobs, outDir);
+  } finally {
+    await browser.close();
+  }
+  if (failed) process.exitCode = 1;
+}
+async function serverBase(paths) {
+  const wasRunning = await liveServer(paths);
+  const server = await ensureServer(paths, {});
+  if (!wasRunning) print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
+  return `http://127.0.0.1:${server.port}`;
+}
+async function shootFrames(browser, jobs, outDir) {
+  let failed = false;
+  const results = await mapLimit(jobs, 4, async (job) => {
+    const page = await browser.newPage({ viewport: { width: job.width, height: job.height } });
+    const file = path17.join(outDir, `${job.id}.${job.theme}.png`);
+    try {
+      const report = await openFrame(page, job.url, { waitForReady: job.waitForReady });
+      await page.screenshot({ path: file, fullPage: job.fullPage });
+      return { file, errors: report.ready ? report.errors : ["did not finish rendering", ...report.errors] };
+    } catch (error) {
+      return { file: null, errors: [error.message.split("\n")[0]] };
+    } finally {
+      await page.close().catch(() => {
+      });
+    }
+  });
+  results.forEach((result, index) => {
+    const job = jobs[index];
+    if (result.file) print(result.file);
+    else print(`${red("\u2717")} ${job.key}: no screenshot`);
+    for (const error of result.errors) {
+      failed = true;
+      print(`  ${red(`${job.key}:`)} ${error.split("\n")[0]}`);
+    }
+  });
+  return failed;
+}
+async function shootSystem(paths, project, id2, options) {
+  const system = project.system();
+  if (!system) throw new CliError("This project has no design system yet (.design/system).");
+  if (options.overview || options.page) throw new CliError("--overview and --page apply to canvases, not @system");
+  const theme2 = options.theme ?? "light";
+  const all = systemFrames(system.doc, "http://placeholder", theme2);
+  if (id2 && !all.some((job) => job.id === id2)) {
+    throw new CliError(`No specimen "${id2}" in the design system. Specimens: ${all.map((job) => job.id).join(", ")}`);
+  }
+  const outDir = path17.join(path17.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs17.mkdirSync(outDir, { recursive: true });
+  const base = await serverBase(paths);
+  const jobs = systemFrames(system.doc, base, theme2).filter((job) => !id2 || job.id === id2);
+  const browser = await launchChrome();
+  try {
+    if (await shootFrames(browser, jobs, outDir)) process.exitCode = 1;
+  } finally {
+    await browser.close();
+  }
+}
+
+// src/cli/commands/status.ts
+var plural2 = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+async function runStatus(paths) {
+  const project = new DesignProject(paths, DEV_URLS);
+  const server = await liveServer(paths);
+  const label = (text) => bold(text.padEnd(9));
+  print(
+    server ? `${label("Preview")}${green("running")} ${server.url} ${dim(`(pid ${server.pid}, since ${new Date(server.startedAt).toLocaleString()})`)}` : `${label("Preview")}${dim("not running \u2014 `design preview` starts it")}`
+  );
+  print(`${label("Project")}${project.name()} ${dim(paths.root)}`);
+  const system = project.system();
+  if (system) {
+    const { doc } = system;
+    print(
+      `${label("System")}${doc.name} ${dim(
+        `\u2014 ${plural2(doc.tokens.length, "token")}, ${plural2(doc.components.length, "component")}, ${plural2(doc.guidelines.length, "guideline")}`
+      )}`
+    );
+  } else print(`${label("System")}${dim("none \u2014 `design system init` scaffolds one")}`);
+  const canvases = project.canvases();
+  if (!canvases.length) print(`${label("Canvases")}${dim("none \u2014 `design new <canvas>` scaffolds one")}`);
+  else {
+    print(label("Canvases"));
+    const width = Math.max(...canvases.map((canvas) => canvas.doc.id.length));
+    for (const { doc } of canvases) {
+      const items = doc.pages.flatMap((page) => page.sections.flatMap((section) => section.items));
+      const frames = items.filter((item) => item.kind === "screen" || item.kind === "url").length;
+      const errors2 = doc.issues.filter((issue) => issue.severity === "error").length;
+      const url = server ? dim(` ${server.url}/c/${doc.id}`) : "";
+      print(
+        `  ${doc.id.padEnd(width)}  ${doc.title} ${dim(`${plural2(doc.pages.length, "page")} \xB7 ${plural2(frames, "screen")}`)}` + (errors2 ? ` ${red(plural2(errors2, "error"))}` : "") + url
+      );
+    }
+  }
+  const issues = project.issues();
+  const errors = issues.filter((issue) => issue.severity === "error").length;
+  const warnings = issues.length - errors;
+  const summary = `${plural2(errors, "error")}, ${plural2(warnings, "warning")}`;
+  print(
+    `${label("Issues")}${errors ? red(summary) : warnings ? yellow(summary) : green(summary)}` + (issues.length ? dim(" \u2014 `design check` lists them") : "")
+  );
+}
+
+// src/cli/index.ts
+var HELP = `${bold("foss-design")} ${dim(`v${packageVersion()}`)} \u2014 design canvases and design systems in .design
+
+${bold("Usage")}  design <command> [options]
+
+${bold("Project")}
+  init [--name <name>] [--no-gitignore]      Create .design and add it to .gitignore
+  system init [--name <name>] [--empty]      Scaffold .design/system: tokens, a guideline, a component
+  new <canvas> [--title <title>] [--empty]   Scaffold .design/canvas/<canvas>
+
+${bold("Preview")}
+  preview [--open [path]] [--port <n>]       Start the viewer in the background on a free port (or reuse
+                                             it) and print its URL; --open also opens a browser
+          [--restart] [--foreground]
+  stop                                       Stop the viewer
+  status                                     Viewer state and a project summary
+
+${bold("Verify")}
+  check [canvas\u2026] [--render] [--json]        Validate canvas.json and the system; --render loads every
+                                             screen in Chrome and reports runtime errors
+  shot <canvas>[/<screen>] [--page <id>]     Screenshot screens with Chrome (PNG paths are printed);
+       [--theme light|dark] [--out <dir>]    @system or @system/<id> shoots the design system specimens
+       [--overview]
+
+${bold("Share")}
+  build [canvas\u2026] [--out <dir>] [--tar]      Static site of the canvases and the design system
+
+${bold("Options")}
+  --root <dir>   Project folder (default: the nearest folder with .design, or the current one)
+  -h, --help     This help
+  -v, --version  Version
+`;
+function projectPaths(rootOption, requireDesign = true) {
+  const found = rootOption ? path18.resolve(rootOption) : findProjectRoot();
+  if (!found) {
+    if (!requireDesign) return designPaths(process.cwd());
+    throw new CliError("No .design folder here or above. Run `design init` in the project root first.");
+  }
+  const paths = designPaths(found);
+  return paths;
+}
+async function main(argv) {
+  const { values, positionals } = parseArgs({
+    args: argv,
+    allowPositionals: true,
+    strict: true,
+    options: {
+      root: { type: "string" },
+      name: { type: "string" },
+      title: { type: "string" },
+      "no-gitignore": { type: "boolean" },
+      empty: { type: "boolean" },
+      open: { type: "boolean" },
+      port: { type: "string" },
+      restart: { type: "boolean" },
+      foreground: { type: "boolean" },
+      render: { type: "boolean" },
+      json: { type: "boolean" },
+      page: { type: "string" },
+      theme: { type: "string" },
+      out: { type: "string" },
+      overview: { type: "boolean" },
+      tar: { type: "boolean" },
+      help: { type: "boolean", short: "h" },
+      version: { type: "boolean", short: "v" }
+    }
+  });
+  const [command, ...rest] = positionals;
+  if (values.version) return print(packageVersion());
+  if (values.help || !command || command === "help") return print(HELP);
+  const port = values.port ? Number(values.port) : void 0;
+  if (port !== void 0 && !Number.isInteger(port)) throw new CliError("--port takes a number");
+  const theme2 = values.theme === "dark" ? "dark" : values.theme === "light" ? "light" : void 0;
+  if (values.theme && !theme2) throw new CliError("--theme is light or dark");
+  switch (command) {
+    case "init":
+      return runInit(values.root ? path18.resolve(values.root) : process.cwd(), {
+        name: values.name,
+        gitignore: !values["no-gitignore"]
+      });
+    case "system": {
+      if (rest[0] !== "init") throw new CliError("Usage: design system init [--name <name>] [--empty]");
+      return runSystemInit(projectPaths(values.root).root, { name: values.name, empty: !!values.empty });
+    }
+    case "new": {
+      if (!rest[0]) throw new CliError("Usage: design new <canvas> [--title <title>]");
+      return runNew(projectPaths(values.root).root, rest[0], { title: values.title, empty: !!values.empty });
+    }
+    case "preview": {
+      const openPath = rest[0]?.startsWith("/") ? rest[0] : void 0;
+      return runPreview(projectPaths(values.root), {
+        open: values.open ? openPath ?? true : false,
+        port,
+        foreground: !!values.foreground,
+        restart: !!values.restart
+      });
+    }
+    case "stop":
+      return runStop(projectPaths(values.root));
+    case "status":
+      return runStatus(projectPaths(values.root));
+    case "check":
+      return runCheck(projectPaths(values.root), rest, { render: !!values.render, json: !!values.json });
+    case "shot": {
+      if (!rest[0]) throw new CliError("Usage: design shot <canvas>[/<screen>] [--page <id>] [--theme light|dark]");
+      return runShot(projectPaths(values.root), rest[0], {
+        page: values.page,
+        theme: theme2,
+        out: values.out,
+        overview: !!values.overview
+      });
+    }
+    case "build":
+      return runBuild(projectPaths(values.root), rest, { out: values.out, tar: !!values.tar });
+    default:
+      throw new CliError(`Unknown command "${command}". Run \`design --help\`.`);
+  }
+}
+main(process.argv.slice(2)).catch((error) => {
+  if (error instanceof CliError) {
+    process.stderr.write(`${red("error")} ${error.message}
+`);
+    process.exit(error.code);
+  }
+  if (error.code?.startsWith("ERR_PARSE_ARGS")) {
+    process.stderr.write(`${red("error")} ${error.message}
+Run \`design --help\`.
+`);
+    process.exit(2);
+  }
+  process.stderr.write(`${red("error")} ${error?.stack ?? String(error)}
+`);
+  process.exit(1);
+});