foss-design 0.6.0 → 0.7.0

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/cli/index.ts
-import path26 from "path";
+import path28 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -346,8 +346,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path27) {
-  return path27.split("/").filter(Boolean);
+function split(path29) {
+  return path29.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -366,8 +366,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path27) {
-  const parts = split(path27.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path29) {
+  const parts = split(path29.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -385,11 +385,11 @@ function scoreRoute(route2, path27) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path27) {
+function matchRoute(entries, path29) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path27);
+      const score = scoreRoute(route2, path29);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -512,9 +512,9 @@ var CanvasSchema = z.strictObject({
   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, path27) {
+function formatPath(base, path29) {
   let out = base;
-  for (const part of path27) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path29) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -1874,12 +1874,12 @@ function rewriteRefs(html, originalDir, stagedDir) {
       return tag;
     return tag.replace(
       /(\s(?:src|href|poster)\s*=\s*)(["'])([^"']*)\2/gi,
-      (whole, attr, quote, value) => {
+      (whole, attr2, quote, value) => {
         if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/|#|\{)/i.test(value)) return whole;
         const [pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value).slice(1);
         const target = path11.resolve(originalDir, decodeURIComponent(pathname));
         if (!fs11.existsSync(target)) return whole;
-        return `${attr}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
+        return `${attr2}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
       }
     );
   });
@@ -2438,7 +2438,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path27, init) {
+  async send(method, path29, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2446,7 +2446,7 @@ var CloudClient = class {
     if (this.token) headers.Authorization = `Bearer ${this.token}`;
     if (init.type) headers["Content-Type"] = init.type;
     try {
-      return await fetch(`${this.host}/api${path27}`, {
+      return await fetch(`${this.host}/api${path29}`, {
         method,
         headers,
         body: init.body,
@@ -2467,8 +2467,8 @@ var CloudClient = class {
     throw errorFor(this.host, response.status, body, response.headers.get("retry-after"));
   }
   /** JSON in, JSON out; any non-2xx answer throws a CloudError. */
-  async request(method, path27, body) {
-    const response = await this.send(method, path27, {
+  async request(method, path29, body) {
+    const response = await this.send(method, path29, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2480,7 +2480,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path27} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path29} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -3676,13 +3676,19 @@ async function openFrame(page, url, options = {}) {
     record2(text2);
   });
   let ready = false;
+  let reloads = 0;
+  const onNavigate = (frame) => {
+    if (frame === page.mainFrame()) reloads++;
+  };
   for (let attempt = 0; attempt < 2; attempt++) {
     errors = [];
+    reloads = 0;
     ready = options.waitForReady === false;
     const turnedAway = new Promise((resolve) => {
       outdated = () => resolve("outdated");
     });
     await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
+    page.on("framenavigated", onNavigate);
     if (!ready) {
       const signal = page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
         timeout: options.timeoutMs ?? 2e4
@@ -3691,9 +3697,12 @@ async function openFrame(page, url, options = {}) {
       });
       ready = await Promise.race([signal, turnedAway]).catch(() => null) === "ready";
     }
-    if (!errors.some((error) => OUTDATED_DEP.test(error))) break;
+    if (ready || options.waitForReady === false) await page.waitForTimeout(options.settleMs ?? 700);
+    page.off("framenavigated", onNavigate);
+    if (!reloads && !errors.some((error) => OUTDATED_DEP.test(error))) break;
   }
-  await page.waitForTimeout(options.settleMs ?? 700);
+  if (reloads) errors.push(`the page reloaded itself ${reloads === 1 ? "once" : `${reloads} times`} while it loaded`);
+  const held = ready ? 0 : await page.evaluate(() => window.__DESIGN_HOLDS__ ?? 0).catch(() => 0);
   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(() => {
@@ -3704,7 +3713,7 @@ async function openFrame(page, url, options = {}) {
   const unique2 = errors.filter(
     (error, index) => error && !errors.some((other, j) => j !== index && other && other.length < error.length && error.includes(other))
   );
-  return { errors: [...new Set(unique2)], ready };
+  return { errors: [...new Set(unique2)], ready, ...held ? { held } : {} };
 }
 
 // src/server/state.ts
@@ -4019,8 +4028,17 @@ async function startDevServer(options) {
         allow: [searchForWorkspaceRoot(paths.root), paths.root, paths.design, PKG.root, ...links.allow]
       },
       watch: {
-        ignored: ["**/.cache/vite/**", "**/.cache/snapshots/**", "**/.cache/shots/**", "**/.cache/build/**"]
-      }
+        // `.cache` is ours (server.log, snapshots, builds): a change there must not reload frames. The
+        // generated entries are modules the frames load, so those stay watched.
+        ignored: (file) => {
+          const rel = toPosix(path21.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path21.isAbsolute(rel);
+          return inCache && rel !== "entries" && !rel.startsWith("entries/");
+        }
+      },
+      // Vite forwards frames' console warnings to the server when an agent runs it; the runtime
+      // already reports errors, and the log they would fill sits in `.cache`.
+      forwardConsole: false
     },
     optimizeDeps: {
       entries: entries.files().map((file) => toPosix(path21.relative(paths.design, file)))
@@ -4330,7 +4348,7 @@ async function renderFrames(jobs) {
       try {
         report = await openFrame(page, job.url, { waitForReady: job.waitForReady, settleMs: 300 });
         links = await page.evaluate(
-          () => [...document.querySelectorAll("a[href], area[href]")].map((link) => ({
+          () => [...document.querySelectorAll("a[href]:not([download]), area[href]:not([download])")].map((link) => ({
             href: link.getAttribute("href") ?? "",
             text: (link.textContent || link.getAttribute("aria-label") || "").replace(/\s+/g, " ").trim().slice(0, 40)
           }))
@@ -4341,7 +4359,7 @@ async function renderFrames(jobs) {
         await page.close().catch(() => {
         });
       }
-      return { key: job.key, url: job.url, ready: report.ready, errors: report.errors, links };
+      return { key: job.key, url: job.url, ready: report.ready, held: report.held, errors: report.errors, links };
     });
   } finally {
     await browser.close();
@@ -4384,7 +4402,8 @@ async function runCheck(paths, canvases, options) {
       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)")}`);
+        if (frame.held) print(`    ${red(`holdReady() was not released within 20s (${frame.held} still held)`)}`);
+        else 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])}`);
       }
     }
@@ -4585,10 +4604,747 @@ async function runLink(paths, wanted, options) {
   else if (remote) print(dim("Everything is in sync."));
 }
 
-// src/cli/commands/scaffold.ts
+// src/cli/commands/import.ts
+import fs26 from "fs";
+import path24 from "path";
+
+// src/import/claude-design.ts
 import fs25 from "fs";
 import path23 from "path";
 
+// src/import/markup.ts
+var VOID = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "source",
+  "track",
+  "wbr"
+]);
+var RAW = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+var ATTR = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/y;
+function parseMarkup(source) {
+  const root = { type: "element", tag: "#root", attrs: [], children: [] };
+  const stack = [root];
+  const top = () => stack[stack.length - 1];
+  let i = 0;
+  while (i < source.length) {
+    const lt = source.indexOf("<", i);
+    if (lt === -1) {
+      top().children.push({ type: "text", text: source.slice(i) });
+      break;
+    }
+    if (lt > i) top().children.push({ type: "text", text: source.slice(i, lt) });
+    if (source.startsWith("<!--", lt)) {
+      const end = source.indexOf("-->", lt + 4);
+      i = end === -1 ? source.length : end + 3;
+      continue;
+    }
+    if (source[lt + 1] === "!" || source[lt + 1] === "?") {
+      const end = source.indexOf(">", lt);
+      i = end === -1 ? source.length : end + 1;
+      continue;
+    }
+    if (source[lt + 1] === "/") {
+      const end = source.indexOf(">", lt);
+      const tag = source.slice(lt + 2, end === -1 ? source.length : end).trim();
+      i = end === -1 ? source.length : end + 1;
+      for (let depth = stack.length - 1; depth > 0; depth--) {
+        if (stack[depth].tag.toLowerCase() === tag.toLowerCase()) {
+          stack.length = depth;
+          break;
+        }
+      }
+      continue;
+    }
+    const name = /^[A-Za-z][\w:-]*/.exec(source.slice(lt + 1));
+    if (!name) {
+      top().children.push({ type: "text", text: "<" });
+      i = lt + 1;
+      continue;
+    }
+    const element = { type: "element", tag: name[0], attrs: [], children: [] };
+    let at = lt + 1 + name[0].length;
+    let selfClosing = false;
+    for (; ; ) {
+      while (at < source.length && /\s/.test(source[at])) at++;
+      if (at >= source.length) break;
+      if (source[at] === ">") {
+        at++;
+        break;
+      }
+      if (source.startsWith("/>", at)) {
+        selfClosing = true;
+        at += 2;
+        break;
+      }
+      ATTR.lastIndex = at;
+      const match = ATTR.exec(source);
+      if (!match) {
+        at++;
+        continue;
+      }
+      element.attrs.push([match[1], match[2] ?? match[3] ?? match[4] ?? null]);
+      at = ATTR.lastIndex;
+    }
+    top().children.push(element);
+    const lower = element.tag.toLowerCase();
+    if (RAW.has(lower) && !selfClosing) {
+      const close = source.toLowerCase().indexOf(`</${lower}`, at);
+      const end = close === -1 ? source.length : close;
+      element.children.push({ type: "text", text: source.slice(at, end) });
+      const gt = close === -1 ? -1 : source.indexOf(">", close);
+      i = gt === -1 ? source.length : gt + 1;
+      continue;
+    }
+    if (!selfClosing && !VOID.has(lower)) stack.push(element);
+    i = at;
+  }
+  return root;
+}
+function findElement(node, test) {
+  for (const child of node.children) {
+    if (child.type !== "element") continue;
+    if (test(child)) return child;
+    const found = findElement(child, test);
+    if (found) return found;
+  }
+  return null;
+}
+var attr = (element, name) => element.attrs.find(([key]) => key.toLowerCase() === name.toLowerCase())?.[1];
+var NAMED = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: "\xA0",
+  thinsp: "\u2009",
+  ensp: "\u2002",
+  emsp: "\u2003",
+  mdash: "\u2014",
+  ndash: "\u2013",
+  minus: "\u2212",
+  hellip: "\u2026",
+  middot: "\xB7",
+  bull: "\u2022",
+  laquo: "\xAB",
+  raquo: "\xBB",
+  lsquo: "\u2018",
+  rsquo: "\u2019",
+  ldquo: "\u201C",
+  rdquo: "\u201D",
+  times: "\xD7",
+  divide: "\xF7",
+  deg: "\xB0",
+  copy: "\xA9",
+  reg: "\xAE",
+  trade: "\u2122",
+  euro: "\u20AC",
+  pound: "\xA3",
+  yen: "\xA5",
+  cent: "\xA2",
+  sect: "\xA7",
+  para: "\xB6",
+  plusmn: "\xB1",
+  le: "\u2264",
+  ge: "\u2265",
+  ne: "\u2260",
+  larr: "\u2190",
+  rarr: "\u2192",
+  uarr: "\u2191",
+  darr: "\u2193",
+  harr: "\u2194",
+  check: "\u2713",
+  zwj: "\u200D",
+  zwnj: "\u200C",
+  shy: "\xAD"
+};
+function decodeEntities(text2) {
+  return text2.replace(/&(#x[0-9a-f]+|#\d+|[a-z][a-z0-9]*);/gi, (whole, body) => {
+    if (body[0] === "#") {
+      const code = body[1] === "x" || body[1] === "X" ? Number.parseInt(body.slice(2), 16) : Number(body.slice(1));
+      return Number.isFinite(code) && code > 0 && code <= 1114111 ? String.fromCodePoint(code) : whole;
+    }
+    return NAMED[body.toLowerCase()] ?? whole;
+  });
+}
+
+// src/import/claude-design.ts
+var EXT = ".dc.html";
+var kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+var identifier = (name) => {
+  const clean = name.replace(/[^\w$]/g, "_");
+  return /^[A-Za-z_$]/.test(clean) ? clean : `_${clean}`;
+};
+var KEYWORDS = new Set(
+  "break case catch class const continue debugger default delete do else export extends false finally for function if import in instanceof new null return super switch this throw true try typeof var void while with yield let static await async of undefined NaN Infinity arguments eval Math JSON Number String Boolean Object Array Date Intl RegExp Error Map Set Symbol Promise BigInt console window document globalThis location navigator parseInt parseFloat isNaN isFinite encodeURIComponent decodeURIComponent encodeURI decodeURI setTimeout clearTimeout setInterval clearInterval".split(" ")
+);
+function freeNames(expression, into) {
+  const code = expression.replace(/'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/g, '""').replace(
+    /`(?:\\.|\$\{([^}]*)\}|[^`\\])*`/g,
+    (whole) => [...whole.matchAll(/\$\{([^}]*)\}/g)].map((match) => ` ${match[1]} `).join("")
+  );
+  for (const match of code.matchAll(/(?<![.\w$])[A-Za-z_$][\w$]*/g)) {
+    const name = match[0];
+    const after = code.slice(match.index + name.length);
+    if (/^\s*:(?!:)/.test(after) && /[{,]\s*$/.test(code.slice(0, match.index))) continue;
+    if (!KEYWORDS.has(name)) into.add(name);
+  }
+}
+var WHOLE = /^\s*\{\{([\s\S]+?)\}\}\s*$/;
+var PARTS = /\{\{([\s\S]+?)\}\}/g;
+var RENAME = {
+  class: "className",
+  for: "htmlFor",
+  tabindex: "tabIndex",
+  readonly: "readOnly",
+  maxlength: "maxLength",
+  minlength: "minLength",
+  colspan: "colSpan",
+  rowspan: "rowSpan",
+  autocomplete: "autoComplete",
+  autocapitalize: "autoCapitalize",
+  autocorrect: "autoCorrect",
+  autosave: "autoSave",
+  enterkeyhint: "enterKeyHint",
+  accesskey: "accessKey",
+  charset: "charSet",
+  formaction: "formAction",
+  formmethod: "formMethod",
+  formnovalidate: "formNoValidate",
+  formtarget: "formTarget",
+  hreflang: "hrefLang",
+  itemprop: "itemProp",
+  itemscope: "itemScope",
+  itemtype: "itemType",
+  marginheight: "marginHeight",
+  marginwidth: "marginWidth",
+  mediagroup: "mediaGroup",
+  nomodule: "noModule",
+  radiogroup: "radioGroup",
+  srcdoc: "srcDoc",
+  srclang: "srcLang",
+  popovertarget: "popoverTarget",
+  popovertargetaction: "popoverTargetAction",
+  autofocus: "autoFocus",
+  autoplay: "autoPlay",
+  crossorigin: "crossOrigin",
+  srcset: "srcSet",
+  enctype: "encType",
+  novalidate: "noValidate",
+  contenteditable: "contentEditable",
+  spellcheck: "spellCheck",
+  datetime: "dateTime",
+  allowfullscreen: "allowFullScreen",
+  frameborder: "frameBorder",
+  cellpadding: "cellPadding",
+  cellspacing: "cellSpacing",
+  inputmode: "inputMode",
+  usemap: "useMap",
+  referrerpolicy: "referrerPolicy",
+  playsinline: "playsInline",
+  viewbox: "viewBox",
+  "accept-charset": "acceptCharset",
+  "http-equiv": "httpEquiv",
+  "xlink:href": "xlinkHref",
+  "xmlns:xlink": "xmlnsXlink",
+  "xml:space": "xmlSpace",
+  "xml:lang": "xmlLang"
+};
+var BOOLEAN = /* @__PURE__ */ new Set([
+  "checked",
+  "disabled",
+  "selected",
+  "readonly",
+  "hidden",
+  "open",
+  "required",
+  "multiple",
+  "autofocus",
+  "novalidate",
+  "playsinline",
+  "muted",
+  "loop",
+  "autoplay",
+  "controls",
+  "default",
+  "reversed",
+  "allowfullscreen",
+  "async",
+  "defer",
+  "inert"
+]);
+var NO_TEXT = /* @__PURE__ */ new Set(["table", "thead", "tbody", "tfoot", "tr", "colgroup", "select", "optgroup", "datalist"]);
+function propName(name) {
+  const lower = name.toLowerCase();
+  if (RENAME[lower]) return RENAME[lower];
+  if (/^on[A-Z]/.test(name)) return name;
+  if (lower.startsWith("aria-") || lower.startsWith("data-")) return lower;
+  if (!/^[A-Za-z][\w:-]*$/.test(name)) return null;
+  return name.includes("-") ? name.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : name;
+}
+var str2 = (value) => JSON.stringify(value);
+function interpolated(raw, reads) {
+  if (!raw.includes("{{")) return str2(decodeEntities(raw));
+  let out = "`";
+  let last = 0;
+  for (const match of raw.matchAll(PARTS)) {
+    out += decodeEntities(raw.slice(last, match.index)).replace(/[`\\]|\$\{/g, (c) => `\\${c}`);
+    freeNames(match[1], reads);
+    out += "${dc.text(" + match[1].trim() + ")}";
+    last = match.index + match[0].length;
+  }
+  return `${out + decodeEntities(raw.slice(last)).replace(/[`\\]|\$\{/g, (c) => `\\${c}`)}\``;
+}
+function linkTarget(value, ctx) {
+  const match = /^(?:\.\/)?([^/?#]+)\.dc\.html(#.*)?$/.exec(value);
+  if (!match) return null;
+  const route2 = ctx.routes.get(match[1]);
+  if (route2) return route2;
+  ctx.warn(`links to ${match[1]}${EXT}, which is no board; the link goes nowhere (#)`);
+  return "#";
+}
+function attrsJsx(element, ctx, extra = []) {
+  const tag = element.tag.toLowerCase();
+  const handled = new Set(element.attrs.map(([name]) => name));
+  const hasHandler = [...handled].some((name) => /^on(Change|Input)$/.test(name));
+  const out = [...extra];
+  for (const [name, raw] of element.attrs) {
+    const lower = name.toLowerCase();
+    if (lower.startsWith("hint-") || lower === "xmlns") continue;
+    let prop = propName(name);
+    if (!prop) {
+      ctx.warn(`dropped the attribute "${name}"`);
+      continue;
+    }
+    if (!hasHandler && (tag === "input" || tag === "textarea") && (prop === "value" || prop === "checked"))
+      prop = prop === "value" ? "defaultValue" : "defaultChecked";
+    if (tag === "option" && prop === "selected") continue;
+    if (raw === null) {
+      out.push(BOOLEAN.has(lower) ? prop : `${prop}=""`);
+      continue;
+    }
+    const whole = WHOLE.exec(raw);
+    if (prop === "style") {
+      const body = interpolated(raw, ctx.reads);
+      out.push(`style={dc.css(${body})}`);
+      continue;
+    }
+    if (whole) {
+      const expression = whole[1].trim();
+      freeNames(expression, ctx.reads);
+      if (/^on[A-Z]/.test(prop)) out.push(`${prop}={${expression}}`);
+      else if (BOOLEAN.has(lower)) out.push(`${prop}={dc.flag(${expression})}`);
+      else out.push(`${prop}={dc.value(${expression})}`);
+      continue;
+    }
+    if (/^on[a-z]/.test(name)) {
+      ctx.warn(`dropped the inline handler ${name}="\u2026"; handlers come from renderVals()`);
+      continue;
+    }
+    if (BOOLEAN.has(lower)) {
+      out.push(prop);
+      continue;
+    }
+    if (lower === "href" && !raw.includes("{{")) {
+      const target = linkTarget(raw, ctx);
+      if (target !== null) {
+        out.push(`href=${str2(target)}`);
+        continue;
+      }
+    }
+    if (raw.includes("/_blob/"))
+      ctx.warn("uses an uploaded Claude Design asset (/_blob/\u2026) that the export does not contain");
+    out.push(`${prop}={${interpolated(raw, ctx.reads)}}`);
+  }
+  return out.length ? ` ${out.join(" ")}` : "";
+}
+function selectedOption(select) {
+  const option = findElement(select, (el) => el.tag.toLowerCase() === "option" && attr(el, "selected") !== void 0);
+  if (!option) return null;
+  const value = attr(option, "value");
+  if (value !== void 0 && value !== null) return value;
+  return option.children.map((child) => child.type === "text" ? child.text : "").join("").trim();
+}
+function childrenJsx(nodes, ctx, parent) {
+  const out = [];
+  for (const node of nodes) {
+    if (node.type === "text") {
+      if (!node.text.trim()) {
+        if (node.text && !NO_TEXT.has(parent)) out.push('{" "}');
+        continue;
+      }
+      if (NO_TEXT.has(parent)) continue;
+      let last = 0;
+      for (const match of node.text.matchAll(PARTS)) {
+        const before = node.text.slice(last, match.index);
+        if (before) out.push(`{${str2(decodeEntities(before))}}`);
+        freeNames(match[1], ctx.reads);
+        out.push(`{dc.text(${match[1].trim()})}`);
+        last = match.index + match[0].length;
+      }
+      const rest = node.text.slice(last);
+      if (rest) out.push(`{${str2(decodeEntities(rest))}}`);
+      continue;
+    }
+    out.push(elementJsx(node, ctx));
+  }
+  while (out[0] === '{" "}') out.shift();
+  while (out[out.length - 1] === '{" "}') out.pop();
+  return out.join("");
+}
+function elementJsx(element, ctx) {
+  const tag = element.tag;
+  const lower = tag.toLowerCase();
+  if (lower === "sc-for") {
+    const list = attr(element, "list") ?? "[]";
+    const as = attr(element, "as") || "item";
+    const expression = (WHOLE.exec(list)?.[1] ?? list).trim();
+    freeNames(expression, ctx.reads);
+    const body = childrenJsx(element.children, ctx, lower);
+    return `{dc.list(${expression}).map((${identifier(as)}, index) => (<dc.Fragment key={index}>${body}</dc.Fragment>))}`;
+  }
+  if (lower === "sc-if") {
+    const value = attr(element, "value") ?? "false";
+    const expression = (WHOLE.exec(value)?.[1] ?? value).trim();
+    freeNames(expression, ctx.reads);
+    return `{dc.flag(${expression}) ? (<>${childrenJsx(element.children, ctx, lower)}</>) : null}`;
+  }
+  if (lower === "dc-import") {
+    const name = attr(element, "name") ?? "";
+    if (!ctx.known.has(name)) {
+      ctx.warn(`imports ${name}${EXT}, which is not in the export`);
+      return "";
+    }
+    const component = `DC_${identifier(name)}`;
+    ctx.imports.add(name);
+    const props = element.attrs.filter(([key]) => key !== "name" && !key.startsWith("hint-")).map(([key, raw]) => {
+      if (raw === null) return `${str2(key)}: true`;
+      const whole = WHOLE.exec(raw);
+      if (whole) {
+        freeNames(whole[1], ctx.reads);
+        return `${str2(key)}: (${whole[1].trim()})`;
+      }
+      return `${str2(key)}: ${interpolated(raw, ctx.reads)}`;
+    });
+    return `<${component} {...{${props.join(", ")}}} />`;
+  }
+  if (lower === "script") {
+    ctx.warn("dropped a <script> inside the template");
+    return "";
+  }
+  if (lower === "title" || lower === "helmet") return "";
+  if (lower === "style") {
+    const css2 = element.children.map((child) => child.type === "text" ? child.text : "").join("");
+    return `<style>{${interpolated(css2, ctx.reads)}}</style>`;
+  }
+  if (lower === "textarea") {
+    const text2 = element.children.map((child) => child.type === "text" ? child.text : "").join("");
+    const extra2 = text2 ? [`defaultValue={${interpolated(text2, ctx.reads)}}`] : [];
+    return `<textarea${attrsJsx(element, ctx, extra2)} />`;
+  }
+  const extra = [];
+  if (lower === "select") {
+    const selected = selectedOption(element);
+    if (selected !== null && attr(element, "value") === void 0)
+      extra.push(`defaultValue={${interpolated(selected, ctx.reads)}}`);
+  }
+  const attrs = attrsJsx(element, ctx, extra);
+  const children = childrenJsx(element.children, ctx, lower);
+  return children ? `<${tag}${attrs}>${children}</${tag}>` : `<${tag}${attrs} />`;
+}
+function convertFile(name, source, ctx) {
+  const document2 = parseMarkup(source);
+  const root = findElement(document2, (el) => el.tag.toLowerCase() === "x-dc");
+  const script = findElement(
+    document2,
+    (el) => el.tag.toLowerCase() === "script" && attr(el, "data-dc-script") !== void 0
+  );
+  const file = { ...ctx, name, reads: /* @__PURE__ */ new Set(), imports: /* @__PURE__ */ new Set() };
+  if (!root) throw new Error("no <x-dc> element");
+  const helmet = /<helmet>([\s\S]*?)<\/helmet>/i.exec(source)?.[1]?.trim() ?? "";
+  const body = childrenJsx(root.children, file, "x-dc");
+  let spec = {};
+  const rawSpec = script ? attr(script, "data-props") : null;
+  if (rawSpec) {
+    try {
+      spec = JSON.parse(decodeEntities(rawSpec));
+    } catch {
+      file.warn("has data-props that are not JSON; the props keep no defaults");
+    }
+  }
+  const code = script?.children.map((child) => child.type === "text" ? child.text : "").join("") ?? "";
+  const className = /class\s+([A-Za-z_$][\w$]*)\s+extends\s+DCLogic/.exec(code)?.[1];
+  const logic = className ? `const __Logic = (() => {
+${code.trim()}
+return ${className}
+})()` : "const __Logic = null";
+  const reads = [...file.reads].filter((read) => !read.startsWith("__") && read !== "dc").sort();
+  const lines = [
+    `// Imported from Claude Design (${name}${EXT}).`,
+    `import * as dc from './dc'`,
+    ...[...file.imports].sort().map((dep) => `import DC_${identifier(dep)} from './${dep}'`),
+    `const DCLogic = dc.DCLogic`,
+    "",
+    helmet ? `dc.head(${str2(helmet)})
+` : "",
+    `const __spec = ${JSON.stringify(spec)}`,
+    "",
+    logic,
+    "",
+    `export default function ${identifier(name)}(__props) {`,
+    `  const __scope = dc.useLogic(__Logic, __spec, __props)`,
+    reads.length ? `  const { ${reads.join(", ")} } = __scope` : "",
+    `  return (<>${body}</>)`,
+    "}",
+    ""
+  ];
+  return lines.filter((line, index) => line !== "" || lines[index - 1] !== "").join("\n");
+}
+var DC_HELPERS = `// Imported from Claude Design: what the converted screens need. This file is the canvas's own.
+import { Fragment, useReducer, useRef } from 'react'
+import { useTheme } from '@design/runtime'
+
+export { Fragment }
+
+/** The base of each screen's logic class: props, state and setState, as Claude Design had them. */
+export class DCLogic {
+  constructor(props) {
+    this.props = props
+    this.state = {}
+  }
+  setState(patch) {
+    const next = typeof patch === 'function' ? patch(this.state, this.props) : patch
+    this.state = { ...this.state, ...next }
+    this.__update?.()
+  }
+  renderVals() {
+    return {}
+  }
+}
+
+const themed = (spec) => Array.isArray(spec?.theme?.options) && spec.theme.options.includes('dark')
+
+function convert(field, value) {
+  if (!field || typeof value !== 'string') return value
+  if (field.editor === 'int' || field.editor === 'number') return Number(value)
+  if (field.editor === 'bool' || field.editor === 'boolean') return value === 'true' || value === ''
+  return value
+}
+
+/** Props (defaults, then what the canvas or a parent passed), the logic's values, for the template. */
+export function useLogic(Logic, spec, given) {
+  const theme = useTheme()
+  const [, update] = useReducer((n) => n + 1, 0)
+  const props = {}
+  for (const [key, field] of Object.entries(spec ?? {}))
+    if (!key.startsWith('$') && field && typeof field === 'object' && 'default' in field) props[key] = field.default
+  for (const [key, value] of Object.entries(given ?? {})) props[key] = convert(spec?.[key], value)
+  // A theme prop follows the viewer's light/dark switch unless the canvas pins it.
+  if (themed(spec) && given?.theme === undefined) props.theme = theme
+  const logic = useRef(null)
+  if (Logic && !logic.current) logic.current = new Logic(props)
+  let vals = {}
+  if (logic.current) {
+    logic.current.props = props
+    logic.current.__update = update
+    vals = logic.current.renderVals?.() ?? {}
+  }
+  return { props, ...props, ...vals }
+}
+
+const heads = new Set()
+/** The template's <helmet>: fonts and styles, added to the page once. */
+export function head(html) {
+  if (heads.has(html) || typeof document === 'undefined') return
+  heads.add(html)
+  document.head.insertAdjacentHTML('beforeend', html)
+}
+
+/** An inline style string as a React style object. */
+export function css(text) {
+  const style = {}
+  let depth = 0
+  let quote = ''
+  let start = 0
+  const declarations = []
+  for (let i = 0; i <= text.length; i++) {
+    const c = text[i]
+    if (quote) {
+      if (c === quote) quote = ''
+    } else if (c === '"' || c === "'") quote = c
+    else if (c === '(') depth++
+    else if (c === ')') depth--
+    else if ((c === ';' && depth === 0) || i === text.length) {
+      declarations.push(text.slice(start, i))
+      start = i + 1
+    }
+  }
+  for (const declaration of declarations) {
+    const colon = declaration.indexOf(':')
+    if (colon === -1) continue
+    const name = declaration.slice(0, colon).trim()
+    const value = declaration.slice(colon + 1).trim()
+    if (!name || !value) continue
+    const key = name.startsWith('--') ? name : name.toLowerCase().replace(/^-ms-/, 'ms-').replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+    style[key] = value
+  }
+  return style
+}
+
+/** A template value in text: nothing for null, undefined and false. */
+export const text = (value) => (value == null || value === false ? '' : value)
+/** An attribute value: left out for null, undefined and false. */
+export const value = (v) => (v == null || v === false ? undefined : v)
+/** A boolean attribute or condition. */
+export const flag = (v) => v === true || v === 'true' || (!!v && v !== 'false')
+/** What a loop runs over. */
+export const list = (v) => (Array.isArray(v) ? v : v == null ? [] : Array.from(v))
+`;
+function boardId(file, used) {
+  let base = kebab(file.slice(0, -EXT.length)) || "screen";
+  if (!ID_PATTERN.test(base)) base = `s-${base}`;
+  let id2 = base;
+  for (let n2 = 2; used.has(id2); n2++) id2 = `${base}-${n2}`;
+  used.add(id2);
+  return id2;
+}
+function importClaudeDesign(dir, options = {}) {
+  const canvasFile = path23.join(dir, "canvas.json");
+  if (!fs25.existsSync(canvasFile))
+    throw new Error(`No canvas.json in ${dir}: point at the exported Claude Design project folder`);
+  const source = JSON.parse(fs25.readFileSync(canvasFile, "utf8"));
+  const templates = fs25.readdirSync(dir).filter((file) => file.endsWith(EXT));
+  if (!templates.length) throw new Error(`No ${EXT} files in ${dir}`);
+  const known = new Set(templates.map((file) => file.slice(0, -EXT.length)));
+  const warnings = /* @__PURE__ */ new Map();
+  const boards = source.boards ?? {};
+  const order = [...(source.order ?? []).filter((file) => file in boards), ...Object.keys(boards)];
+  const used = /* @__PURE__ */ new Set();
+  const ids = /* @__PURE__ */ new Map();
+  const routes = /* @__PURE__ */ new Map();
+  for (const file of new Set(order)) {
+    if (!known.has(file.slice(0, -EXT.length))) continue;
+    const id2 = boardId(file, used);
+    ids.set(file, id2);
+    routes.set(file.slice(0, -EXT.length), `/${id2}`);
+  }
+  const files = /* @__PURE__ */ new Map();
+  files.set("dc.jsx", DC_HELPERS);
+  for (const file of templates) {
+    const name = file.slice(0, -EXT.length);
+    const warn2 = (message) => {
+      const set = warnings.get(message) ?? /* @__PURE__ */ new Set();
+      set.add(file);
+      warnings.set(message, set);
+    };
+    try {
+      files.set(
+        `${name}.jsx`,
+        convertFile(name, fs25.readFileSync(path23.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+      );
+    } catch (error) {
+      warn2(`could not be converted: ${error.message}`);
+    }
+  }
+  const pageList = source.pages?.length ? source.pages : [{ id: "main", name: source.title ?? "Main" }];
+  const pages = pageList.map((page, index) => ({
+    id: ID_PATTERN.test(page.id) ? page.id : `page-${index + 1}`,
+    title: page.name || page.id,
+    items: []
+  }));
+  const pageOf = (id2) => pages[Math.max(
+    0,
+    pageList.findIndex((page) => page.id === id2)
+  )];
+  let notes = 0;
+  for (const [key, note] of Object.entries(source.notes ?? {})) {
+    if (!note.text) continue;
+    const heading = note.kind === "title1" ? "# " : note.kind === "title2" ? "## " : note.kind === "title3" ? "### " : "";
+    pageOf(note.page).items.push({
+      id: `note-${boardId(`${key}${EXT}`, used)}`,
+      type: "note",
+      tone: heading ? "plain" : "note",
+      text: `${heading}${note.text}`,
+      width: Math.round(Math.min(Math.max(note.maxW ?? note.w ?? 480, 80), 4e3)),
+      x: note.x ?? 0,
+      y: note.y ?? 0
+    });
+    notes++;
+  }
+  let screens = 0;
+  for (const [file, id2] of ids) {
+    const board = boards[file];
+    if (!files.has(`${file.slice(0, -EXT.length)}.jsx`)) continue;
+    pageOf(board.page).items.push({
+      id: id2,
+      src: `screens/${file.slice(0, -EXT.length)}.jsx`,
+      title: board.title || file.slice(0, -EXT.length),
+      route: routes.get(file.slice(0, -EXT.length)),
+      width: Math.round(Math.min(Math.max(board.w ?? 1440, 80), 8e3)),
+      height: Math.round(Math.min(Math.max(board.h ?? 900, 80), 4e4)),
+      x: board.x ?? 0,
+      y: board.y ?? 0
+    });
+    screens++;
+  }
+  const canvas = {
+    title: options.title ?? source.title ?? path23.basename(path23.resolve(dir)),
+    description: "Imported from Claude Design.",
+    // The templates bring their own styles; the design system's reset would restyle them.
+    system: false,
+    pages: pages.filter((page) => page.items.length)
+  };
+  return { canvas, files, screens, notes, warnings };
+}
+
+// src/cli/commands/import.ts
+var slug = (text2) => text2.normalize("NFKD").replace(/[^\w\s-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase();
+function runImport(paths, from, options) {
+  const dir = path24.resolve(from);
+  if (!fs26.existsSync(dir) || !fs26.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
+  let result;
+  try {
+    result = importClaudeDesign(dir, { title: options.title });
+  } catch (error) {
+    throw new CliError(error.message);
+  }
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path24.basename(dir)) || "imported");
+  if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
+  const out = path24.join(paths.canvases, id2);
+  if (fs26.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
+  fs26.mkdirSync(path24.join(out, "screens"), { recursive: true });
+  for (const [name, content] of result.files) fs26.writeFileSync(path24.join(out, "screens", name), content);
+  fs26.writeFileSync(path24.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+`);
+  print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
+  print(
+    `  ${result.screens} screens and ${result.notes} notes on ${result.canvas.pages.length} pages; ${result.files.size - 1} templates as React modules in screens/, helpers in screens/dc.jsx`
+  );
+  if (result.warnings.size) {
+    print();
+    for (const [message, files] of result.warnings) {
+      const list = [...files];
+      print(`${yellow("warning")} ${message}`);
+      print(`  ${dim(`${list.slice(0, 6).join(", ")}${list.length > 6 ? ` and ${list.length - 6} more` : ""}`)}`);
+    }
+  }
+  print();
+  print(`Next: \`design check ${id2} --render\`, then \`design preview --open /c/${id2}\`.`);
+}
+
+// src/cli/commands/scaffold.ts
+import fs27 from "fs";
+import path25 from "path";
+
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
  * Design tokens. Every screen gets Tailwind v4 with these as utilities:
@@ -4798,40 +5554,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs25.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path23.relative(root, file)}`);
+  if (fs27.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path25.relative(root, file)}`);
     return false;
   }
-  fs25.mkdirSync(path23.dirname(file), { recursive: true });
-  fs25.writeFileSync(file, content);
-  print(`  ${green("created")} ${path23.relative(root, file)}`);
+  fs27.mkdirSync(path25.dirname(file), { recursive: true });
+  fs27.writeFileSync(file, content);
+  print(`  ${green("created")} ${path25.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path23.join(root, ".gitignore");
-  const current = fs25.existsSync(file) ? fs25.readFileSync(file, "utf8") : "";
+  const file = path25.join(root, ".gitignore");
+  const current = fs27.existsSync(file) ? fs27.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" : "";
-  fs25.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs27.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs25.readFileSync(path23.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs27.readFileSync(path25.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path23.basename(root);
+  return path25.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);
-  fs25.mkdirSync(paths.canvases, { recursive: true });
+  fs27.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -4843,44 +5599,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs25.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs27.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path23.relative(root, paths.system)}`);
-  write(path23.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path25.relative(root, paths.system)}`);
+  write(path25.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path23.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path25.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path23.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path23.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path23.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path25.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path25.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path25.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 = path23.join(paths.canvases, id2);
-  if (fs25.existsSync(path23.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path25.join(paths.canvases, id2);
+  if (fs27.existsSync(path25.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(
-      path23.join(dir, "canvas.json"),
+      path25.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs25.mkdirSync(path23.join(dir, "screens"), { recursive: true });
+    fs27.mkdirSync(path25.join(dir, "screens"), { recursive: true });
   } else {
-    write(path23.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path23.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path25.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path25.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs26 from "fs";
-import path24 from "path";
+import fs28 from "fs";
+import path26 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -4896,15 +5652,15 @@ async function runShot(paths, target, options) {
     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 = path24.resolve(options.out ?? paths.shots);
-  const outDir = path24.join(outBase, canvasId);
-  fs26.mkdirSync(outDir, { recursive: true });
+  const outBase = path26.resolve(options.out ?? paths.shots);
+  const outDir = path26.join(outBase, canvasId);
+  fs28.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs26.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs28.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 } });
@@ -4920,7 +5676,7 @@ async function runShot(paths, target, options) {
           warn(`page "${pageId}": not every frame reported ready within ${OVERVIEW_TIMEOUT / 1e3}s; shooting anyway`);
         }
         await page.waitForTimeout(400);
-        const file = path24.join(outDir, `${pageId}.overview.png`);
+        const file = path26.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -4949,7 +5705,7 @@ 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 = path24.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path26.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 });
@@ -4981,8 +5737,8 @@ async function shootSystem(paths, project, id2, options) {
   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 = path24.join(path24.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs26.mkdirSync(outDir, { recursive: true });
+  const outDir = path26.join(path26.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs28.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();
@@ -4994,7 +5750,7 @@ async function shootSystem(paths, project, id2, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path25 from "path";
+import path27 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -5017,7 +5773,7 @@ function detail(paths, status) {
   if (status.state === "remote_ahead" && !status.local && !status.baseRev) parts.push("not pulled yet");
   if (status.state === "remote_ahead" && status.changed.length && !status.deletedRemotely)
     parts.push(`${plural(status.changed.length, "file")} changed here; the cloud only rebuilt it`);
-  if (status.conflictRev !== void 0) parts.push(`merge ${path25.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path27.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -5132,6 +5888,8 @@ ${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>
+  import <folder> [--canvas <id>]            Turn an exported Claude Design project (canvas.json and
+         [--title <title>]                   *.dc.html) into a canvas of React screens, once
   canvases [--json]                          Every canvas: pages and screens; with a cloud link also its
                                              revision, sync state, web link and public link
 
@@ -5191,7 +5949,7 @@ ${bold("Environment")}
   FOSS_DESIGN_CLOUD  Cloud to sign in and link to (default https://app.fossdesign.dev)
 `;
 function projectPaths(rootOption, requireDesign = true) {
-  const found = rootOption ? path26.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path28.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.");
@@ -5208,6 +5966,7 @@ async function main(argv) {
       root: { type: "string" },
       name: { type: "string" },
       title: { type: "string" },
+      canvas: { type: "string" },
       "no-gitignore": { type: "boolean" },
       empty: { type: "boolean" },
       open: { type: "boolean" },
@@ -5237,7 +5996,7 @@ async function main(argv) {
   if (values.theme && !theme2) throw new CliError("--theme is light or dark");
   switch (command) {
     case "init":
-      return runInit(values.root ? path26.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path28.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -5249,6 +6008,10 @@ async function main(argv) {
       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 "import": {
+      if (!rest[0]) throw new CliError("Usage: design import <folder> [--canvas <id>] [--title <title>]");
+      return runImport(projectPaths(values.root), rest[0], { canvas: values.canvas, title: values.title });
+    }
     case "preview": {
       const openPath = rest[0]?.startsWith("/") ? rest[0] : void 0;
       return runPreview(projectPaths(values.root), {