truecanvas 0.1.0

package/dist/chunk-WB35FXGP.js

@@ -0,0 +1,3366 @@
+import {
+  Catalog,
+  importSpecifier
+} from "./chunk-753N4QRO.js";
+
+// src/core/config.ts
+import fs from "fs";
+import path from "path";
+function loadConfig(root, overrides = {}) {
+  let file = {};
+  const configPath = path.join(root, "truecanvas.config.json");
+  if (fs.existsSync(configPath)) file = JSON.parse(fs.readFileSync(configPath, "utf8"));
+  const appDir = file.appDir ?? (fs.existsSync(path.join(root, "src/app")) ? "src/app" : "app");
+  const srcPrefix = appDir.startsWith("src/") ? "src/" : "";
+  let deps = {};
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8"));
+    deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  } catch {
+    deps = {};
+  }
+  const knownLibraries = ["@paper-design/shaders-react"].filter((l) => l in deps);
+  return {
+    root,
+    appUrl: "http://localhost:3000",
+    port: 4800,
+    canvasDir: `${srcPrefix}canvas`,
+    appDir,
+    components: [`${srcPrefix}components/**/*.tsx`],
+    darkMode: { strategy: "class", value: "dark" },
+    ...file,
+    libraries: [.../* @__PURE__ */ new Set([...knownLibraries, ...file.libraries ?? []])],
+    ...stripUndefined(overrides)
+  };
+}
+function stripUndefined(o) {
+  return Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+}
+
+// src/core/ast.ts
+import { parse } from "@babel/parser";
+function parseModule(source) {
+  return parse(source, {
+    sourceType: "module",
+    plugins: ["typescript", "jsx"],
+    errorRecovery: false
+  });
+}
+function idOf(node) {
+  const loc = node.loc.start;
+  return `${loc.line}:${loc.column}`;
+}
+function jsxName(name) {
+  if (name.type === "JSXIdentifier") return name.name;
+  if (name.type === "JSXNamespacedName") return `${name.namespace.name}:${name.name.name}`;
+  return `${jsxName(name.object)}.${name.property.name}`;
+}
+function walk(node, visit, parent = null) {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (const child of node) walk(child, visit, parent);
+    return;
+  }
+  const n = node;
+  if (typeof n.type !== "string") return;
+  if (visit(n, parent) === false) return;
+  for (const key of Object.keys(n)) {
+    if (key === "loc" || key === "leadingComments" || key === "trailingComments" || key === "innerComments" || key === "extra") continue;
+    const value = n[key];
+    if (value && typeof value === "object") walk(value, visit, n);
+  }
+}
+function isComponentName(name) {
+  return /^[A-Z]/.test(name) || name.includes(".");
+}
+
+// src/core/parse.ts
+function parseCanvas(name, file, source) {
+  let ast;
+  try {
+    ast = parseModule(source);
+  } catch (err) {
+    return { name, file, frames: [], imports: [], canvasNode: null, prologueEnd: 0, declared: [], error: err.message };
+  }
+  const imports = readImports(ast);
+  const directives = ast.program.directives;
+  const prologueEnd = directives.length ? directives[directives.length - 1].end : 0;
+  const declared = topLevelNames(ast);
+  let canvasEl = null;
+  walk(ast, (node) => {
+    if (canvasEl) return false;
+    if (node.type === "JSXElement" && jsxName(node.openingElement.name) === "Canvas") {
+      canvasEl = node;
+      return false;
+    }
+  });
+  if (!canvasEl) {
+    return { name, file, frames: [], imports, canvasNode: null, prologueEnd, declared, error: "No <Canvas> element found in the default export." };
+  }
+  const canvasNode = buildNode(canvasEl, source, []);
+  const frames = [];
+  let frameIndex = 0;
+  for (const child of canvasNode.children) {
+    if (child.kind !== "component" || child.name !== "Frame") continue;
+    const path12 = [frameIndex++];
+    reindex(child, path12);
+    frames.push({
+      ...child,
+      frameName: str(child.props.name) ?? `Frame ${frameIndex}`,
+      x: num(child.props.x) ?? 0,
+      y: num(child.props.y) ?? 0,
+      width: num(child.props.width) ?? 1024,
+      height: num(child.props.height) ?? null,
+      theme: str(child.props.theme) ?? null,
+      device: str(child.props.device) ?? null,
+      page: str(child.props.page) ?? null,
+      from: str(child.props.from) ?? null,
+      component: str(child.props.component) ?? null,
+      link: null
+    });
+  }
+  return { name, file, frames, imports, canvasNode, prologueEnd, declared };
+}
+function readImports(ast) {
+  const imports = [];
+  for (const stmt of ast.program.body) {
+    if (stmt.type !== "ImportDeclaration") continue;
+    const typeOnly = stmt.importKind === "type";
+    const named = stmt.specifiers.filter((s) => s.type === "ImportSpecifier");
+    const def = stmt.specifiers.find((s) => s.type === "ImportDefaultSpecifier");
+    const ns = stmt.specifiers.find((s) => s.type === "ImportNamespaceSpecifier");
+    imports.push({
+      source: stmt.source.value,
+      typeOnly,
+      // value bindings only: `import type` and `{ type X }` don't exist at runtime
+      names: typeOnly ? [] : [...named.filter((s) => s.importKind !== "type").map((s) => s.local.name), ...ns ? [ns.local.name] : []],
+      defaultName: def ? def.local.name : null,
+      start: stmt.start,
+      end: stmt.end,
+      lastSpecifierEnd: named.length && !typeOnly ? named[named.length - 1].end : null
+    });
+  }
+  return imports;
+}
+function topLevelNames(ast) {
+  const out = [];
+  for (let stmt of ast.program.body) {
+    if ((stmt.type === "ExportNamedDeclaration" || stmt.type === "ExportDefaultDeclaration") && stmt.declaration) stmt = stmt.declaration;
+    if ((stmt.type === "FunctionDeclaration" || stmt.type === "ClassDeclaration") && stmt.id) out.push(stmt.id.name);
+    if (stmt.type === "VariableDeclaration") {
+      for (const d of stmt.declarations) if (d.id.type === "Identifier") out.push(d.id.name);
+    }
+  }
+  return out;
+}
+function reindex(node, path12) {
+  node.path = path12;
+  node.children.forEach((c, i) => reindex(c, [...path12, i]));
+}
+function str(v) {
+  return v?.kind === "string" ? v.value : void 0;
+}
+function num(v) {
+  return v?.kind === "number" ? v.value : void 0;
+}
+function buildNode(el, source, path12) {
+  const children = [];
+  for (const child of el.children) {
+    const built = buildChild(child, source, [...path12, children.length]);
+    if (built) children.push(built);
+  }
+  if (el.type === "JSXFragment") {
+    return {
+      id: idOf(el),
+      kind: "fragment",
+      name: "Fragment",
+      props: {},
+      spreads: 0,
+      children,
+      start: el.start,
+      end: el.end,
+      line: el.loc.start.line,
+      col: el.loc.start.column,
+      path: path12,
+      attrs: [],
+      nameEnd: el.openingFragment.end - 1,
+      openEnd: el.openingFragment.end,
+      selfClosing: false,
+      closeStart: el.closingFragment.start
+    };
+  }
+  const open = el.openingElement;
+  const name = jsxName(open.name);
+  const props = {};
+  const attrs = [];
+  let spreads = 0;
+  for (const attr of open.attributes) {
+    if (attr.type === "JSXSpreadAttribute") {
+      spreads++;
+      continue;
+    }
+    const attrName = attr.name.type === "JSXIdentifier" ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
+    if (attrName === "data-tc") continue;
+    const literal = classLiteral(attr.value);
+    attrs.push({ name: attrName, start: attr.start, end: attr.end, ...literal ? { literal: { start: literal.start, end: literal.end } } : {} });
+    props[attrName] = literal ? { kind: "string", value: literal.type === "StringLiteral" ? literal.value : literal.quasis.map((q) => q.value.cooked ?? "").join("") } : readValue(attr.value, source);
+  }
+  return {
+    id: idOf(open),
+    kind: isComponentName(name) ? "component" : "element",
+    name,
+    props,
+    spreads,
+    children,
+    start: el.start,
+    end: el.end,
+    line: open.loc.start.line,
+    col: open.loc.start.column,
+    path: path12,
+    attrs,
+    // after type arguments: `<Select<Opt> …>`
+    nameEnd: (open.typeParameters ?? open.name).end,
+    openEnd: open.end,
+    selfClosing: open.selfClosing,
+    closeStart: el.closingElement ? el.closingElement.start : open.end
+  };
+}
+function buildChild(child, source, path12) {
+  if (child.type === "JSXElement" || child.type === "JSXFragment") return buildNode(child, source, path12);
+  if (child.type === "JSXText") {
+    const text = child.value.replace(/\s+/g, " ").trim();
+    if (!text) return null;
+    return leaf("text", text, child, path12, { text });
+  }
+  if (child.type === "JSXExpressionContainer") {
+    const expr = child.expression;
+    if (expr.type === "JSXEmptyExpression") return null;
+    if (expr.type === "StringLiteral") return leaf("text", expr.value, child, path12, { text: expr.value });
+    if (expr.type === "TemplateLiteral" && expr.expressions.length === 0) {
+      const text = expr.quasis.map((q) => q.value.cooked ?? "").join("");
+      return leaf("text", text, child, path12, { text });
+    }
+    return leaf("expression", source.slice(expr.start, expr.end), child, path12, {});
+  }
+  if (child.type === "JSXSpreadChild") return leaf("expression", source.slice(child.start, child.end), child, path12, {});
+  return null;
+}
+function leaf(kind, name, node, path12, extra) {
+  return {
+    id: `${kind[0]}${idOf(node)}`,
+    kind,
+    name,
+    props: {},
+    spreads: 0,
+    children: [],
+    ...extra,
+    start: node.start,
+    end: node.end,
+    line: node.loc.start.line,
+    col: node.loc.start.column,
+    path: path12,
+    attrs: [],
+    nameEnd: node.end,
+    openEnd: node.end,
+    selfClosing: true,
+    closeStart: node.end
+  };
+}
+var CLASS_HELPERS = /* @__PURE__ */ new Set(["cn", "clsx", "cx", "twMerge", "classNames", "classnames"]);
+function classLiteral(value) {
+  if (value?.type !== "JSXExpressionContainer") return null;
+  const e = value.expression;
+  if (e.type !== "CallExpression" || e.callee.type !== "Identifier" || !CLASS_HELPERS.has(e.callee.name)) return null;
+  const first = e.arguments[0];
+  if (first?.type === "StringLiteral") return first;
+  if (first?.type === "TemplateLiteral" && first.expressions.length === 0) return first;
+  return null;
+}
+function readValue(value, source) {
+  if (value == null) return { kind: "boolean", value: true };
+  if (value.type === "StringLiteral") return { kind: "string", value: value.value };
+  if (value.type === "JSXExpressionContainer") {
+    const e = value.expression;
+    if (e.type === "StringLiteral") return { kind: "string", value: e.value };
+    if (e.type === "NumericLiteral") return { kind: "number", value: e.value };
+    if (e.type === "BooleanLiteral") return { kind: "boolean", value: e.value };
+    if (e.type === "UnaryExpression" && e.operator === "-" && e.argument.type === "NumericLiteral") {
+      return { kind: "number", value: -e.argument.value };
+    }
+    if (e.type === "TemplateLiteral" && e.expressions.length === 0) {
+      return { kind: "string", value: e.quasis.map((q) => q.value.cooked ?? "").join("") };
+    }
+    if (e.type === "ArrayExpression") {
+      const items = [];
+      for (const el of e.elements) {
+        if (el?.type === "StringLiteral" || el?.type === "NumericLiteral" || el?.type === "BooleanLiteral") items.push(el.value);
+        else if (el?.type === "UnaryExpression" && el.operator === "-" && el.argument.type === "NumericLiteral") items.push(-el.argument.value);
+        else return { kind: "expression", code: source.slice(e.start, e.end) };
+      }
+      return { kind: "array", value: items };
+    }
+    if (e.type === "JSXEmptyExpression") return { kind: "expression", code: "" };
+    return { kind: "expression", code: source.slice(e.start, e.end) };
+  }
+  return { kind: "expression", code: source.slice(value.start, value.end) };
+}
+function* allNodes(doc) {
+  for (const frame of doc.frames) {
+    yield { node: frame, parent: null, frame };
+    const stack = frame.children.map((c) => ({ node: c, parent: frame })).reverse();
+    while (stack.length) {
+      const item = stack.pop();
+      yield { ...item, frame };
+      for (let i = item.node.children.length - 1; i >= 0; i--) stack.push({ node: item.node.children[i], parent: item.node });
+    }
+  }
+}
+function findNode(doc, id) {
+  for (const entry of allNodes(doc)) if (entry.node.id === id) return entry;
+  return null;
+}
+function findFrame(doc, ref) {
+  return doc.frames.find((f) => f.id === ref || f.frameName === ref) ?? null;
+}
+function findByPath(doc, path12) {
+  if (!path12.length) return null;
+  let node = doc.frames[path12[0]];
+  for (const i of path12.slice(1)) node = node?.children[i];
+  return node ?? null;
+}
+
+// src/core/edit.ts
+import MagicString from "magic-string";
+var EditError = class extends Error {
+};
+function attrCode(name, value) {
+  if (value === true) return name;
+  if (typeof value === "string") {
+    return /["\n\\{}&]/.test(value) ? `${name}={${JSON.stringify(value)}}` : `${name}="${value}"`;
+  }
+  if (typeof value === "number" && !Number.isFinite(value)) throw new EditError(`Invalid number for ${name}.`);
+  if (Array.isArray(value)) return `${name}={[${value.map((v) => JSON.stringify(v)).join(", ")}]}`;
+  return `${name}={${JSON.stringify(value)}}`;
+}
+var PROP_NAME = /^[A-Za-z_$][\w$-]*(:[\w$-]+)?$/;
+function textCode(text) {
+  if (text === "") return "";
+  if (/[{}<>&\n]/.test(text) || /^\s|\s$/.test(text)) return `{${JSON.stringify(text)}}`;
+  return text;
+}
+var CanvasEditor = class {
+  constructor(source, doc) {
+    this.source = source;
+    this.doc = doc;
+    this.s = new MagicString(source);
+  }
+  source;
+  doc;
+  s;
+  /** Path of the node that should be selected after the edit (best effort, before formatting). */
+  selectPaths = [];
+  usedFrameNames = null;
+  placed = null;
+  node(id) {
+    const found = findNode(this.doc, id);
+    if (!found) throw new EditError(`Node ${id} not found. Re-read the canvas, ids change after every edit.`);
+    return found;
+  }
+  frame(ref) {
+    const f = findFrame(this.doc, ref);
+    if (!f) throw new EditError(`Frame "${ref}" not found. Available: ${this.doc.frames.map((x) => `"${x.frameName}"`).join(", ")}`);
+    return f;
+  }
+  /** A frame id/name or a node id: whatever an agent passes as "parent". */
+  container(ref) {
+    const f = findFrame(this.doc, ref);
+    if (f) return f;
+    const n = this.node(ref).node;
+    if (n.kind === "text" || n.kind === "expression") throw new EditError(`${ref} is a ${n.kind} node and cannot have children.`);
+    return n;
+  }
+  setProp(node, name, value, opts = {}) {
+    if (node.kind !== "component" && node.kind !== "element") throw new EditError(`Cannot set props on a ${node.kind} node.`);
+    if (!PROP_NAME.test(name) || name === "data-tc") throw new EditError(`Invalid prop name "${name}".`);
+    const existing = node.attrs.find((a) => a.name === name);
+    if (existing?.literal && opts.raw === void 0 && (typeof value === "string" || value === null)) {
+      this.s.overwrite(existing.literal.start, existing.literal.end, JSON.stringify(value ?? ""));
+      return;
+    }
+    const code = opts.raw !== void 0 ? `${name}={${opts.raw}}` : value === null || value === void 0 ? null : attrCode(name, value);
+    if (existing) {
+      if (code === null) {
+        let start = existing.start;
+        while (start > 0 && /\s/.test(this.source[start - 1])) start--;
+        this.s.remove(start, existing.end);
+      } else {
+        this.s.overwrite(existing.start, existing.end, code, { contentOnly: true });
+      }
+    } else if (code !== null) {
+      const at = node.attrs.length ? node.attrs[node.attrs.length - 1].end : node.nameEnd;
+      this.s.appendRight(at, ` ${code}`);
+    }
+  }
+  setText(node, text) {
+    if (node.kind === "text") {
+      this.s.overwrite(this.contentStart(node), this.contentEnd(node), textCode(text) || '{""}');
+      return;
+    }
+    if (node.kind !== "component" && node.kind !== "element") throw new EditError(`Cannot set text on a ${node.kind} node.`);
+    if (node.children.some((c) => c.kind !== "text")) {
+      throw new EditError(`Node ${node.id} has element children; edit a text child instead.`);
+    }
+    const code = textCode(text);
+    if (node.selfClosing) {
+      let end = node.openEnd - 2;
+      while (/\s/.test(this.source[end - 1])) end--;
+      this.s.overwrite(end, node.openEnd, `>${code}</${node.name}>`);
+    } else if (node.openEnd === node.closeStart) {
+      this.s.appendLeft(node.openEnd, code);
+    } else {
+      this.s.overwrite(node.openEnd, node.closeStart, code);
+    }
+  }
+  // ---------- indentation helpers: edits match the file's existing style ----------
+  unitCache = null;
+  /** The file's indent unit: tabs, or the smallest non-zero space indent. */
+  unit() {
+    if (this.unitCache) return this.unitCache;
+    if (/^\t/m.test(this.source)) return this.unitCache = "	";
+    let min = Infinity;
+    for (const m of this.source.matchAll(/^( +)(?!\*)\S/gm)) min = Math.min(min, m[1].length);
+    return this.unitCache = " ".repeat(Number.isFinite(min) && min <= 8 ? min : 2);
+  }
+  lineIndent(pos) {
+    const lineStart = this.source.lastIndexOf("\n", pos - 1) + 1;
+    return /^[ \t]*/.exec(this.source.slice(lineStart))[0];
+  }
+  /** Where a node's real content starts/ends (JSX text includes surrounding whitespace). */
+  contentStart(n) {
+    if (n.kind !== "text") return n.start;
+    const raw = this.source.slice(n.start, n.end);
+    return n.start + (raw.length - raw.trimStart().length);
+  }
+  contentEnd(n) {
+    if (n.kind !== "text") return n.end;
+    return n.start + this.source.slice(n.start, n.end).trimEnd().length;
+  }
+  childIndent(parent) {
+    const kid = parent.children.find((c) => c.kind !== "text") ?? parent.children[0];
+    if (kid) {
+      const pos = this.contentStart(kid);
+      const lineStart = this.source.lastIndexOf("\n", pos - 1) + 1;
+      if (/^[ \t]*$/.test(this.source.slice(lineStart, pos))) return this.lineIndent(pos);
+    }
+    return this.lineIndent(parent.start) + this.unit();
+  }
+  /** Re-indents lines 2..n of a snippet so it sits at `indent`. */
+  shift(code, indent) {
+    const lines = code.trim().split("\n");
+    const rest = lines.slice(1).filter((l) => l.trim());
+    const base = rest.length ? Math.min(...rest.map((l) => /^[ \t]*/.exec(l)[0].length)) : 0;
+    const relative = lines.slice(1).map((l) => l.trim() ? l.slice(base) : "");
+    const steps = relative.map((l) => /^ */.exec(l)[0].length).filter((n) => n > 0);
+    const from = steps.length ? Math.min(...steps) : 0;
+    const unit = this.unit();
+    const convert = (l) => {
+      if (!from || unit === " ".repeat(from)) return l;
+      const n = /^ */.exec(l)[0].length;
+      return unit.repeat(Math.floor(n / from)) + " ".repeat(n % from) + l.slice(n);
+    };
+    return [lines[0], ...relative.map((l) => l ? indent + convert(l) : "")].join("\n");
+  }
+  openToClose(node, inner) {
+    let end = node.openEnd - 2;
+    while (/\s/.test(this.source[end - 1])) end--;
+    this.s.overwrite(end, node.openEnd, `>${inner}</${node.name}>`);
+  }
+  insertAt(parent, kids, i, code) {
+    const ci = this.childIndent(parent);
+    const pi = this.lineIndent(parent.start);
+    const body = this.shift(code, ci);
+    if (parent.selfClosing) {
+      this.openToClose(parent, `
+${ci}${body}
+${pi}`);
+    } else if (i < kids.length) {
+      this.s.appendRight(this.contentStart(kids[i]), `${body}
+${ci}`);
+    } else if (kids.length) {
+      this.s.appendLeft(this.contentEnd(kids[kids.length - 1]), `
+${ci}${body}`);
+    } else if (parent.openEnd === parent.closeStart) {
+      this.s.appendLeft(parent.openEnd, `
+${ci}${body}
+${pi}`);
+    } else if (/^\s*$/.test(this.source.slice(parent.openEnd, parent.closeStart))) {
+      this.s.overwrite(parent.openEnd, parent.closeStart, `
+${ci}${body}
+${pi}`);
+    } else {
+      this.s.appendRight(parent.closeStart, `${body}`);
+    }
+  }
+  insertChild(parent, index, jsx) {
+    const kids = parent.children;
+    const i = index === void 0 || index < 0 || index > kids.length ? kids.length : index;
+    this.insertAt(parent, kids, i, jsx);
+    this.selectPaths.push([...parent.path, i]);
+  }
+  /** Removes a node together with its line when it sits alone on it. */
+  remove(node) {
+    const start = this.contentStart(node);
+    const end = this.contentEnd(node);
+    let a = start;
+    while (a > 0 && (this.source[a - 1] === " " || this.source[a - 1] === "	")) a--;
+    const restOfLine = /^[ \t]*(\n|$)/.test(this.source.slice(end));
+    if (a > 0 && this.source[a - 1] === "\n" && restOfLine) this.s.remove(a - 1, end);
+    else this.s.remove(node.start, node.end);
+  }
+  duplicate(node) {
+    let code = this.source.slice(node.start, node.end);
+    if ("frameName" in node) {
+      const f = node;
+      this.usedFrameNames ??= new Set(this.doc.frames.map((x) => x.frameName));
+      this.placed ??= this.doc.frames.map((o) => ({ x: o.x, y: o.y, width: o.width, height: o.height ?? 600 }));
+      let name = `${f.frameName} copy`;
+      for (let n = 2; this.usedFrameNames.has(name); n++) name = `${f.frameName} copy ${n}`;
+      this.usedFrameNames.add(name);
+      const h = f.height ?? 600;
+      const row = this.placed.filter((o) => o.y < f.y + Math.max(h, 1) && o.y + Math.max(o.height, 1) > f.y);
+      const right = row.length ? Math.max(...row.map((o) => o.x + o.width)) : f.x + f.width;
+      this.placed.push({ x: right + 80, y: f.y, width: f.width, height: h });
+      code = rewriteFrameProps(code, { name, x: right + 80 });
+    }
+    this.s.appendLeft(this.contentEnd(node), `
+${this.lineIndent(node.start)}${code.trim()}`);
+    const path12 = [...node.path];
+    path12[path12.length - 1] += 1;
+    this.selectPaths.push(path12);
+  }
+  move(node, target, index) {
+    if (isInside(target, node)) throw new EditError("Cannot move a node into itself.");
+    const raw = this.source.slice(this.contentStart(node), this.contentEnd(node));
+    const code = node.kind === "component" || node.kind === "element" ? raw.replace(/^<([\w.:-]+)/, "<$1 __tcsel") : raw;
+    const kids = target.children.filter((c) => c.id !== node.id);
+    const i = index === void 0 || index < 0 || index > kids.length ? kids.length : index;
+    this.remove(node);
+    this.insertAt(target, kids, i, code);
+  }
+  wrap(nodes, open, close) {
+    const sorted = [...nodes].sort((a, b) => a.start - b.start);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    if (sorted.some((n) => "frameName" in n)) throw new EditError("Frames can't be wrapped; wrap the layers inside a frame.");
+    const parentPath = first.path.slice(0, -1).join(",");
+    if (sorted.some((n) => n.path.slice(0, -1).join(",") !== parentPath)) throw new EditError("Nodes to wrap must share the same parent.");
+    const indices = sorted.map((n) => n.path[n.path.length - 1]);
+    const parent = findByPath(this.doc, first.path.slice(0, -1));
+    const between = parent?.children.slice(indices[0], indices[indices.length - 1] + 1) ?? [];
+    if (between.some((c) => c.kind !== "text" && !sorted.includes(c))) throw new EditError("Nodes to wrap must be adjacent siblings.");
+    const ind = this.lineIndent(this.contentStart(first));
+    const inner = ind + this.unit();
+    const slice = this.source.slice(this.contentStart(first), this.contentEnd(last));
+    this.s.overwrite(this.contentStart(first), this.contentEnd(last), `${open}
+${inner}${this.shift(slice, inner)}
+${ind}${close}`);
+    this.selectPaths.push(first.path);
+  }
+  /** Like wrap, but keeps content that sits on one line on one line: `<p><X>Hi</X></p>`. */
+  wrapInline(nodes, open, close) {
+    const sorted = [...nodes].sort((a, b) => a.start - b.start);
+    const start = this.contentStart(sorted[0]);
+    const end = this.contentEnd(sorted[sorted.length - 1]);
+    const slice = this.source.slice(start, end);
+    if (slice.includes("\n")) return this.wrap(nodes, open, close);
+    this.s.overwrite(start, end, `${open}${slice}${close}`);
+    this.selectPaths.push(sorted[0].path);
+  }
+  /** Replaces a wrapper element with its children (re-indented to its place). */
+  unwrap(node) {
+    const kids = node.children;
+    if (!kids.length) {
+      this.remove(node);
+      return;
+    }
+    const inner = this.source.slice(this.contentStart(kids[0]), this.contentEnd(kids[kids.length - 1]));
+    this.s.overwrite(this.contentStart(node), this.contentEnd(node), this.shift(inner, this.lineIndent(this.contentStart(node))));
+    this.selectPaths.push(node.path);
+  }
+  replace(node, jsx) {
+    this.s.overwrite(this.contentStart(node), this.contentEnd(node), this.shift(jsx, this.lineIndent(this.contentStart(node))));
+    this.selectPaths.push(node.path);
+  }
+  added = /* @__PURE__ */ new Set();
+  ensureImport(name, from) {
+    if (this.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) return;
+    if (this.added.has(name)) return;
+    this.added.add(name);
+    const same = this.doc.imports.find((i) => i.source === from && !i.typeOnly && i.lastSpecifierEnd !== null);
+    if (same) {
+      this.s.appendLeft(same.lastSpecifierEnd, `, ${name}`);
+      return;
+    }
+    const last = this.doc.imports[this.doc.imports.length - 1];
+    const line = `import { ${name} } from ${JSON.stringify(from)};`;
+    if (last) this.s.appendLeft(last.end, `
+${line}`);
+    else if (this.doc.prologueEnd) this.s.appendLeft(this.doc.prologueEnd, `
+${line}`);
+    else this.prependImport(line);
+  }
+  /** Adds a whole import statement unless every name it binds is already imported. */
+  addImportStatement(statement) {
+    let names = [];
+    try {
+      const ast = parseModule(statement);
+      const decl = ast.program.body[0];
+      if (decl?.type === "ImportDeclaration") names = decl.specifiers.map((sp) => sp.local.name);
+    } catch {
+      return;
+    }
+    const known = /* @__PURE__ */ new Set([...this.doc.imports.flatMap((i) => [...i.names, ...i.defaultName ? [i.defaultName] : []]), ...this.added]);
+    if (names.length && names.every((n) => known.has(n))) return;
+    for (const n of names) this.added.add(n);
+    const last = this.doc.imports[this.doc.imports.length - 1];
+    if (last) this.s.appendLeft(last.end, `
+${statement}`);
+    else if (this.doc.prologueEnd) this.s.appendLeft(this.doc.prologueEnd, `
+${statement}`);
+    else this.prependImport(statement);
+  }
+  importsPrepended = false;
+  /** First imports of a file: in order, with a blank line before the code. */
+  prependImport(line) {
+    if (!this.importsPrepended) {
+      this.importsPrepended = true;
+      this.s.prependRight(0, "\n");
+    }
+    this.s.appendLeft(0, `${line}
+`);
+  }
+  insertFrame(code) {
+    const canvas = this.doc.canvasNode;
+    if (!canvas) throw new EditError("No <Canvas> element to add a frame to.");
+    this.insertAt(canvas, canvas.children, canvas.children.length, code);
+    this.selectPaths.push([this.doc.frames.length]);
+  }
+  result() {
+    return this.s.toString();
+  }
+};
+function isInside(target, node) {
+  return target.start >= node.start && target.end <= node.end;
+}
+function rewriteFrameProps(code, props) {
+  const wrapped = `(${code})`;
+  const ast = parseModule(wrapped);
+  let open = null;
+  walk(ast, (n) => {
+    if (open) return false;
+    if (n.type === "JSXOpeningElement") open = n;
+  });
+  if (!open) return code;
+  const o = open;
+  const s = new MagicString(wrapped);
+  for (const [name, value] of Object.entries(props)) {
+    const attr = o.attributes.find((a) => a.type === "JSXAttribute" && a.name.name === name);
+    if (attr) {
+      if (value === null) s.remove(attr.start - 1, attr.end);
+      else s.overwrite(attr.start, attr.end, attrCode(name, value));
+    } else if (value !== null) s.appendLeft(o.name.end, ` ${attrCode(name, value)}`);
+  }
+  return s.toString().slice(1, -1);
+}
+function componentNamesIn(jsx) {
+  const names = /* @__PURE__ */ new Set();
+  const ast = parseJsx(jsx);
+  walk(ast, (n) => {
+    if (n.type === "JSXOpeningElement") {
+      const name = jsxName(n.name);
+      if (/^[A-Z]/.test(name) || name.includes(".")) names.add(name.split(".")[0]);
+    }
+  });
+  return [...names];
+}
+function parseJsx(jsx) {
+  try {
+    return parseModule(`<>${jsx}</>`);
+  } catch (err) {
+    throw new EditError(`Invalid JSX: ${err.message.replace(/\(\d+:\d+\)$/, "")}`);
+  }
+}
+function frameCode(opts) {
+  const attrs = [attrCode("name", opts.name), attrCode("x", Math.round(opts.x)), attrCode("y", Math.round(opts.y)), attrCode("width", Math.round(opts.width))];
+  if (opts.height) attrs.push(attrCode("height", Math.round(opts.height)));
+  if (opts.theme) attrs.push(attrCode("theme", opts.theme));
+  if (opts.device) attrs.push(attrCode("device", opts.device));
+  if (opts.page) attrs.push(attrCode("page", opts.page));
+  if (opts.from) attrs.push(attrCode("from", opts.from));
+  if (opts.component) attrs.push(attrCode("component", opts.component));
+  const body = opts.body ?? `<div className="flex flex-col gap-3 p-6"></div>`;
+  return `<Frame ${attrs.join(" ")}>
+${indentBlock(body)}
+</Frame>`;
+}
+function indentBlock(code, unit = "  ") {
+  return code.split("\n").map((l) => l.trim() ? unit + l : l).join("\n");
+}
+
+// src/core/devices.ts
+var DEVICES = [
+  { id: "iphone-16", name: "iPhone 16", kind: "phone", width: 393, height: 852, dpr: 3, statusBar: 54, homeIndicator: 34, radius: 55, island: true },
+  { id: "iphone-16-pro-max", name: "iPhone 16 Pro Max", kind: "phone", width: 440, height: 956, dpr: 3, statusBar: 54, homeIndicator: 34, radius: 62, island: true },
+  { id: "iphone-se", name: "iPhone SE", kind: "phone", width: 375, height: 667, dpr: 2, statusBar: 20, homeIndicator: 0, radius: 0 },
+  { id: "pixel-9", name: "Pixel 9", kind: "phone", width: 412, height: 923, dpr: 2.625, statusBar: 36, homeIndicator: 24, radius: 48 },
+  { id: "galaxy-s24", name: "Galaxy S24", kind: "phone", width: 360, height: 780, dpr: 3, statusBar: 32, homeIndicator: 24, radius: 44 },
+  { id: "ipad-mini", name: "iPad mini", kind: "tablet", width: 744, height: 1133, dpr: 2, statusBar: 24, homeIndicator: 20, radius: 22 },
+  { id: "ipad-pro-11", name: "iPad Pro 11\u2033", kind: "tablet", width: 834, height: 1210, dpr: 2, statusBar: 24, homeIndicator: 20, radius: 18 },
+  { id: "laptop", name: "Laptop", kind: "desktop", width: 1280, height: 800, dpr: 2, statusBar: 0, homeIndicator: 0, radius: 0 },
+  { id: "desktop", name: "Desktop", kind: "desktop", width: 1440, height: 900, dpr: 1, statusBar: 0, homeIndicator: 0, radius: 0 },
+  { id: "desktop-hd", name: "Desktop HD", kind: "desktop", width: 1920, height: 1080, dpr: 1, statusBar: 0, homeIndicator: 0, radius: 0 }
+];
+function findDevice(id) {
+  return id ? DEVICES.find((d) => d.id === id) : void 0;
+}
+
+// src/core/comments.ts
+import fs2 from "fs";
+import path2 from "path";
+import { randomUUID } from "crypto";
+var Comments = class {
+  constructor(config) {
+    this.config = config;
+  }
+  config;
+  file(canvas) {
+    return path2.join(this.config.root, this.config.canvasDir, `${canvas}.comments.json`);
+  }
+  list(canvas) {
+    try {
+      return JSON.parse(fs2.readFileSync(this.file(canvas), "utf8")).threads ?? [];
+    } catch {
+      return [];
+    }
+  }
+  save(canvas, threads) {
+    const file = this.file(canvas);
+    if (!threads.length) {
+      if (fs2.existsSync(file)) fs2.rmSync(file);
+      return;
+    }
+    fs2.mkdirSync(path2.dirname(file), { recursive: true });
+    fs2.writeFileSync(file, `${JSON.stringify({ version: 1, threads }, null, 2)}
+`);
+  }
+  update(canvas, id, fn) {
+    const threads = this.list(canvas);
+    const t = threads.find((x) => x.id === id || x.id.startsWith(id));
+    if (!t) throw new Error(`No comment thread "${id}".`);
+    fn(t);
+    this.save(canvas, threads);
+    return t;
+  }
+  add(canvas, input) {
+    const threads = this.list(canvas);
+    const now = Date.now();
+    const thread = {
+      id: randomUUID().slice(0, 8),
+      frame: input.frame,
+      x: Math.round(input.x),
+      y: Math.round(input.y),
+      node: input.node ?? null,
+      resolved: false,
+      messages: [{ id: randomUUID().slice(0, 8), author: input.author, text: input.text.trim(), at: now }],
+      createdAt: now
+    };
+    threads.push(thread);
+    this.save(canvas, threads);
+    return thread;
+  }
+  reply(canvas, id, text, author) {
+    return this.update(canvas, id, (t) => {
+      t.messages.push({ id: randomUUID().slice(0, 8), author, text: text.trim(), at: Date.now() });
+    });
+  }
+  resolve(canvas, id, resolved, author) {
+    return this.update(canvas, id, (t) => {
+      t.resolved = resolved;
+      t.resolvedBy = resolved ? author : void 0;
+    });
+  }
+  remove(canvas, id) {
+    this.save(
+      canvas,
+      this.list(canvas).filter((t) => t.id !== id)
+    );
+  }
+  /** Frames keep their comments when renamed. */
+  renameFrame(canvas, from, to) {
+    const threads = this.list(canvas);
+    let changed = false;
+    for (const t of threads) if (t.frame === from) t.frame = to, changed = true;
+    if (changed) this.save(canvas, threads);
+  }
+  renameCanvas(from, to) {
+    const a = this.file(from);
+    if (fs2.existsSync(a)) fs2.renameSync(a, this.file(to));
+  }
+};
+
+// src/core/git.ts
+import { execFile } from "child_process";
+import path3 from "path";
+var GitError = class extends EditError {
+};
+function git(cwd, args, timeout = 3e4, opts = {}) {
+  return run("git", cwd, args, timeout, opts);
+}
+function run(cmd, cwd, args, timeout, opts = {}) {
+  return new Promise((resolve, reject) => {
+    const child = execFile(
+      cmd,
+      args,
+      { cwd, timeout, maxBuffer: 16 * 1024 * 1024, env: { ...process.env, GIT_TERMINAL_PROMPT: "0", GH_PROMPT_DISABLED: "1", LC_ALL: "C", ...opts.env } },
+      (err, stdout, stderr) => {
+        if (err && opts.exit1 && err.code === 1) resolve(stdout);
+        else if (err) {
+          const missing = err.code === "ENOENT";
+          reject(new GitError(missing ? `${cmd} isn't installed.` : (stderr || err.message).trim().split("\n").slice(-3).join(" ")));
+        } else resolve(stdout);
+      }
+    );
+    if (opts.input !== void 0) child.stdin?.end(opts.input);
+  });
+}
+var Git = class {
+  constructor(cwd) {
+    this.cwd = cwd;
+  }
+  cwd;
+  async status() {
+    let root;
+    try {
+      root = (await git(this.cwd, ["rev-parse", "--show-toplevel"])).trim();
+    } catch {
+      return { repo: false, root: null, branch: null, unborn: false, upstream: null, ahead: 0, behind: 0, files: [], user: null, defaultBranch: null, remote: null };
+    }
+    const out = await git(this.cwd, ["status", "--porcelain=v2", "--branch", "--untracked-files=all", "--", "."]);
+    const s = { repo: true, root, branch: null, unborn: false, upstream: null, ahead: 0, behind: 0, files: [], user: null, defaultBranch: null, remote: null };
+    for (const line of out.split("\n")) {
+      if (line.startsWith("# branch.head ")) s.branch = line.slice(14) === "(detached)" ? null : line.slice(14);
+      else if (line.startsWith("# branch.oid ")) s.unborn = line.slice(13) === "(initial)";
+      else if (line.startsWith("# branch.upstream ")) s.upstream = line.slice(18);
+      else if (line.startsWith("# branch.ab ")) {
+        const m = /\+(\d+) -(\d+)/.exec(line);
+        if (m) [s.ahead, s.behind] = [Number(m[1]), Number(m[2])];
+      } else if (line.startsWith("1 ") || line.startsWith("2 ")) {
+        const parts = line.split(" ");
+        const xy = parts[1];
+        const file = line.startsWith("2 ") ? line.split("	")[0].split(" ").slice(9).join(" ") : parts.slice(8).join(" ");
+        const code = xy.replace(".", "")[0] ?? "M";
+        s.files.push({ path: this.rel(root, file), status: code === "A" ? "added" : code === "D" ? "deleted" : code === "R" ? "renamed" : "modified", staged: xy[0] !== "." });
+      } else if (line.startsWith("? ")) s.files.push({ path: this.rel(root, line.slice(2)), status: "untracked", staged: false });
+    }
+    s.user = (await git(this.cwd, ["config", "user.name"]).catch(() => "")).trim() || null;
+    s.remote = (await git(this.cwd, ["remote", "get-url", "origin"]).catch(() => "")).trim() || null;
+    s.defaultBranch = await this.defaultBranch();
+    return s;
+  }
+  /** The branch PRs target: origin's HEAD, else a local main/master. */
+  async defaultBranch() {
+    const head = (await git(this.cwd, ["symbolic-ref", "--short", "refs/remotes/origin/HEAD"]).catch(() => "")).trim();
+    if (head) return head.replace(/^origin\//, "");
+    const { local } = await this.branches();
+    return ["main", "master", "trunk", "develop"].find((b) => local.includes(b)) ?? null;
+  }
+  /** When the last commit was made (ms), or 0 with no commits. */
+  async lastCommitAt() {
+    const out = await git(this.cwd, ["log", "-1", "--format=%ct"]).catch(() => "");
+    return Number(out.trim() || 0) * 1e3;
+  }
+  /** When a commit was made (ms). */
+  async commitAt(ref) {
+    const out = await git(this.cwd, ["log", "-1", "--format=%ct", ref]).catch(() => "");
+    return Number(out.trim() || 0) * 1e3;
+  }
+  /** Commit where this branch left `base`. */
+  async mergeBase(base) {
+    for (const ref of [`origin/${base}`, base]) {
+      const out = await git(this.cwd, ["merge-base", ref, "HEAD"]).catch(() => "");
+      if (out.trim()) return out.trim();
+    }
+    return null;
+  }
+  /** Files changed between a commit and HEAD, from the project root. */
+  async changedSince(ref) {
+    const out = await git(this.cwd, ["diff", "--name-only", "--relative", `${ref}...HEAD`]).catch(() => "");
+    return out.split("\n").filter(Boolean);
+  }
+  /** Unified diff of these files against HEAD, including new files. */
+  async diff(files) {
+    if (!files.length) return "";
+    const tracked = await git(this.cwd, ["diff", "--relative", "HEAD", "--", ...files]).catch(() => "");
+    const untracked = (await git(this.cwd, ["ls-files", "--others", "--exclude-standard", "--", ...files]).catch(() => "")).split("\n").filter(Boolean);
+    let out = tracked;
+    for (const f of untracked) out += await git(this.cwd, ["diff", "--no-index", "--", "/dev/null", f], 3e4, { exit1: true }).catch(() => "");
+    return out;
+  }
+  /**
+   * Adds files to a side branch without touching the working tree or index
+   * (used for PR screenshots), and pushes it. Returns the branch tip.
+   */
+  async commitToSideBranch(branch, files, message) {
+    const tip = (await git(this.cwd, ["rev-parse", "--verify", "--quiet", `refs/heads/${branch}`]).catch(() => "")).trim() || (await git(this.cwd, ["rev-parse", "--verify", "--quiet", `refs/remotes/origin/${branch}`]).catch(() => "")).trim();
+    const os = await import("os");
+    const fs11 = await import("fs");
+    const index = path3.join(os.tmpdir(), `truecanvas-index-${process.pid}-${Date.now()}`);
+    const env = { GIT_INDEX_FILE: index };
+    try {
+      if (tip) await git(this.cwd, ["read-tree", tip], 3e4, { env });
+      else await git(this.cwd, ["read-tree", "--empty"], 3e4, { env });
+      for (const f of files) {
+        const blob = (await git(this.cwd, ["hash-object", "-w", "--stdin"], 3e4, { input: f.data })).trim();
+        await git(this.cwd, ["update-index", "--add", "--cacheinfo", `100644,${blob},${f.path}`], 3e4, { env });
+      }
+      const tree = (await git(this.cwd, ["write-tree"], 3e4, { env })).trim();
+      const commit = (await git(this.cwd, ["commit-tree", tree, ...tip ? ["-p", tip] : [], "-m", message])).trim();
+      await git(this.cwd, ["update-ref", `refs/heads/${branch}`, commit]);
+      await git(this.cwd, ["push", "origin", `refs/heads/${branch}:refs/heads/${branch}`], 12e4);
+    } finally {
+      fs11.rmSync(index, { force: true });
+    }
+  }
+  // ---------- GitHub (gh CLI) ----------
+  /** owner/name of the GitHub repo, if origin is on GitHub and gh is set up. */
+  async githubRepo() {
+    const out = await run("gh", this.cwd, ["repo", "view", "--json", "nameWithOwner", "-q", ".nameWithOwner"], 2e4).catch(() => "");
+    return out.trim() || null;
+  }
+  /** The open (or latest) pull request of the current branch. */
+  async pullRequest() {
+    const out = await run("gh", this.cwd, ["pr", "view", "--json", "number,url,title,state,isDraft,reviewDecision,statusCheckRollup"], 2e4).catch(() => "");
+    if (!out.trim()) return null;
+    const pr = JSON.parse(out);
+    const checks = { passed: 0, failed: 0, pending: 0 };
+    for (const c of pr.statusCheckRollup ?? []) {
+      const v = (c.conclusion || c.state || c.status || "").toUpperCase();
+      if (["SUCCESS", "NEUTRAL", "SKIPPED"].includes(v)) checks.passed++;
+      else if (["FAILURE", "ERROR", "CANCELLED", "TIMED_OUT", "ACTION_REQUIRED"].includes(v)) checks.failed++;
+      else checks.pending++;
+    }
+    return { number: pr.number, url: pr.url, title: pr.title, state: pr.state, draft: pr.isDraft, review: pr.reviewDecision || null, checks };
+  }
+  async createPullRequest(opts) {
+    const out = await run("gh", this.cwd, ["pr", "create", "--title", opts.title, "--body-file", "-", "--base", opts.base, ...opts.draft ? ["--draft"] : []], 12e4, { input: opts.body });
+    return out.trim().split("\n").pop() ?? "";
+  }
+  /** Creates a GitHub repo for this project and pushes it (gh repo create). */
+  async publish(name, isPrivate) {
+    if (!/^[\w.-]+$/.test(name)) throw new GitError("Invalid repository name.");
+    await run("gh", this.cwd, ["repo", "create", name, isPrivate ? "--private" : "--public", "--source", ".", "--remote", "origin", "--push"], 18e4);
+    return (await git(this.cwd, ["remote", "get-url", "origin"])).trim();
+  }
+  /** git reports paths from the repo root; we show them from the project root. */
+  rel(root, file) {
+    return path3.relative(this.cwd, path3.join(root, file));
+  }
+  async branches() {
+    const out = await git(this.cwd, ["branch", "-a", "--format=%(refname)%09%(HEAD)"]).catch(() => "");
+    const local = [];
+    const remote = [];
+    let current = null;
+    for (const line of out.split("\n").filter(Boolean)) {
+      const [ref, head] = line.split("	");
+      if (ref.endsWith("/HEAD") || ref.endsWith("/truecanvas-previews")) continue;
+      if (ref.startsWith("refs/heads/")) {
+        const name = ref.slice("refs/heads/".length);
+        if (head === "*") current = name;
+        local.push(name);
+      } else if (ref.startsWith("refs/remotes/")) remote.push(ref.slice("refs/remotes/".length));
+    }
+    return { current, local, remote };
+  }
+  /** Commits that touched these paths (newest first). */
+  async log(paths, limit = 30) {
+    const out = await git(this.cwd, ["log", `-n${limit}`, "--format=%H%x09%h%x09%s%x09%an%x09%ct", "--", ...paths]).catch(() => "");
+    return out.split("\n").filter(Boolean).map((l) => {
+      const [hash, short2, subject, author, at] = l.split("	");
+      return { hash, short: short2, subject, author, at: Number(at) * 1e3 };
+    });
+  }
+  /** A file's content at a ref, or null if it doesn't exist there. */
+  async show(ref, file) {
+    const root = (await git(this.cwd, ["rev-parse", "--show-toplevel"])).trim();
+    const inRepo = path3.relative(root, path3.join(this.cwd, file)).split(path3.sep).join("/");
+    return git(this.cwd, ["show", `${ref}:${inRepo}`]).catch(() => null);
+  }
+  async commit(message, files) {
+    if (!message.trim()) throw new GitError("Write a commit message.");
+    if (!files.length) throw new GitError("Nothing to commit.");
+    await git(this.cwd, ["add", "--all", "--", ...files]);
+    await git(this.cwd, ["commit", "-m", message.trim(), "--", ...files]);
+    return (await git(this.cwd, ["rev-parse", "--short", "HEAD"])).trim();
+  }
+  async push() {
+    const s = await this.status();
+    if (s.upstream) await git(this.cwd, ["push"], 12e4);
+    else await git(this.cwd, ["push", "-u", "origin", "HEAD"], 12e4);
+  }
+  async pull() {
+    await git(this.cwd, ["pull", "--ff-only"], 12e4);
+  }
+  async fetch() {
+    await git(this.cwd, ["fetch", "--quiet"], 6e4).catch(() => {
+    });
+  }
+  async switch(branch, create = false) {
+    if (!/^[\w./-]+$/.test(branch) || branch.startsWith("-")) throw new GitError("Invalid branch name.");
+    await git(this.cwd, create ? ["switch", "-c", branch] : ["switch", branch]);
+  }
+};
+
+// src/core/workspace.ts
+import fs8 from "fs";
+import path9 from "path";
+import { createRequire } from "module";
+
+// src/core/link.ts
+import fs4 from "fs";
+import path5 from "path";
+
+// src/core/routes.ts
+import fs3 from "fs";
+import path4 from "path";
+
+// src/core/source.ts
+function defaultReturn(source, layout) {
+  let ast;
+  try {
+    ast = parseModule(source);
+  } catch {
+    return null;
+  }
+  let fn = null;
+  const decls = /* @__PURE__ */ new Map();
+  for (const stmt of ast.program.body) {
+    if (stmt.type === "FunctionDeclaration" && stmt.id) decls.set(stmt.id.name, stmt);
+    if (stmt.type === "VariableDeclaration") {
+      for (const d of stmt.declarations) if (d.id.type === "Identifier" && d.init) decls.set(d.id.name, d.init);
+    }
+  }
+  for (const stmt of ast.program.body) {
+    if (stmt.type !== "ExportDefaultDeclaration") continue;
+    const d = stmt.declaration;
+    const target = d.type === "Identifier" ? decls.get(d.name) : d;
+    if (target && (target.type === "FunctionDeclaration" || target.type === "ArrowFunctionExpression" || target.type === "FunctionExpression")) fn = target;
+  }
+  if (!fn) return null;
+  let ret = null;
+  let simple = !fn.async;
+  if (fn.body.type !== "BlockStatement") ret = fn.body;
+  else {
+    const body = fn.body.body.filter((s) => s.type !== "EmptyStatement");
+    const last = body[body.length - 1];
+    if (last?.type !== "ReturnStatement") return null;
+    if (body.length !== 1) simple = false;
+    ret = last.argument ?? null;
+  }
+  while (ret?.type === "ParenthesizedExpression") ret = ret.expression;
+  if (!ret || ret.type !== "JSXElement" && ret.type !== "JSXFragment") return null;
+  const imported = /* @__PURE__ */ new Set();
+  for (const stmt of ast.program.body) {
+    if (stmt.type !== "ImportDeclaration" || stmt.importKind === "type") continue;
+    for (const s of stmt.specifiers) if (!(s.type === "ImportSpecifier" && s.importKind === "type")) imported.add(s.local.name);
+  }
+  let pure = simple;
+  walk(ret, (n) => {
+    if (n.type === "JSXOpeningElement") {
+      const name = jsxName(n.name);
+      const root = name.split(".")[0];
+      if ((/^[A-Z]/.test(name) || name.includes(".")) && !imported.has(root)) pure = false;
+    }
+    if (n.type === "JSXExpressionContainer") {
+      const e = n.expression;
+      const ok = e.type === "JSXEmptyExpression" || e.type === "StringLiteral" || e.type === "NumericLiteral" || e.type === "BooleanLiteral" || e.type === "TemplateLiteral" && e.expressions.length === 0 || layout && e.type === "Identifier" && e.name === "children" || e.type === "JSXElement" || e.type === "JSXFragment";
+      if (!ok) pure = false;
+    }
+    if (n.type === "JSXSpreadAttribute") pure = false;
+  });
+  return { ast, node: ret, pure, imported };
+}
+function qualify(node, file) {
+  node.id = `${file}#${node.id}`;
+  for (const c of node.children) qualify(c, file);
+}
+function parseSourceDoc(file, source, layout) {
+  const info = defaultReturn(source, layout);
+  if (!info || !info.pure) return null;
+  const root = buildNode(info.node, source, [0, 0]);
+  qualify(root, file);
+  const frame = {
+    ...root,
+    id: `${file}#file`,
+    kind: "component",
+    name: "File",
+    props: {},
+    attrs: [],
+    children: [root],
+    path: [0],
+    frameName: file,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: null,
+    theme: null,
+    device: null,
+    page: null,
+    from: null,
+    component: null,
+    link: null
+  };
+  const directives = info.ast.program.directives;
+  return {
+    name: file,
+    file,
+    frames: [frame],
+    imports: readImports(info.ast),
+    canvasNode: null,
+    prologueEnd: directives.length ? directives[directives.length - 1].end : 0,
+    declared: topLevelNames(info.ast)
+  };
+}
+function fileOfId(id) {
+  const i = id.lastIndexOf("#");
+  if (i <= 0) return null;
+  const file = id.slice(0, i);
+  return /\.[jt]sx?$/.test(file) ? file : null;
+}
+function unwrapFn(n) {
+  if (!n) return null;
+  if (n.type === "FunctionDeclaration" || n.type === "ArrowFunctionExpression" || n.type === "FunctionExpression") return n;
+  if (n.type === "CallExpression") {
+    const callee = n.callee.type === "MemberExpression" && n.callee.property.type === "Identifier" ? n.callee.property.name : n.callee.type === "Identifier" ? n.callee.name : "";
+    if (/^(forwardRef|memo)$/.test(callee)) return unwrapFn(n.arguments[0]);
+  }
+  if (n.type === "TSAsExpression" || n.type === "TSSatisfiesExpression") return unwrapFn(n.expression);
+  return null;
+}
+function lastReturn(fn) {
+  let ret = null;
+  if (fn.body.type !== "BlockStatement") ret = fn.body;
+  else for (const stmt of fn.body.body) if (stmt.type === "ReturnStatement") ret = stmt.argument;
+  while (ret?.type === "ParenthesizedExpression") ret = ret.expression;
+  return ret && (ret.type === "JSXElement" || ret.type === "JSXFragment") ? ret : null;
+}
+function exportedComponents(ast) {
+  const local = /* @__PURE__ */ new Map();
+  for (const stmt of ast.program.body) {
+    const decl = stmt.type === "ExportNamedDeclaration" && stmt.declaration ? stmt.declaration : stmt;
+    if (decl.type === "FunctionDeclaration" && decl.id) local.set(decl.id.name, decl);
+    if (decl.type === "VariableDeclaration") {
+      for (const d of decl.declarations) if (d.id.type === "Identifier" && d.init) local.set(d.id.name, d.init);
+    }
+  }
+  const names = [];
+  for (const stmt of ast.program.body) {
+    if (stmt.type === "ExportNamedDeclaration") {
+      const d = stmt.declaration;
+      if (d?.type === "FunctionDeclaration" && d.id) names.push(d.id.name);
+      if (d?.type === "VariableDeclaration") {
+        for (const v of d.declarations) if (v.id.type === "Identifier") names.push(v.id.name);
+      }
+      for (const sp of stmt.specifiers) if (sp.type === "ExportSpecifier") names.push(sp.local.name);
+    }
+    if (stmt.type === "ExportDefaultDeclaration") {
+      const d = stmt.declaration;
+      if (d.type === "Identifier") names.push(d.name);
+      else if (d.type === "FunctionDeclaration" && d.id) names.push(d.id.name);
+    }
+  }
+  const out = [];
+  for (const name of [...new Set(names)]) {
+    if (!/^[A-Z]/.test(name)) continue;
+    const fn = unwrapFn(local.get(name));
+    const jsx = fn && lastReturn(fn);
+    if (jsx) out.push({ name, jsx });
+  }
+  return out;
+}
+function parseModuleDoc(file, source) {
+  let ast;
+  try {
+    ast = parseModule(source);
+  } catch {
+    return null;
+  }
+  const comps = exportedComponents(ast);
+  if (!comps.length) return null;
+  const frames = comps.map((c, i) => {
+    const root = buildNode(c.jsx, source, [i, 0]);
+    qualify(root, file);
+    return {
+      ...root,
+      id: `${file}#${c.name}`,
+      kind: "component",
+      name: "File",
+      props: {},
+      attrs: [],
+      children: [root],
+      path: [i],
+      frameName: c.name,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: null,
+      theme: null,
+      device: null,
+      page: null,
+      from: null,
+      component: null,
+      link: null
+    };
+  });
+  const directives = ast.program.directives;
+  return {
+    name: file,
+    file,
+    frames,
+    imports: readImports(ast),
+    canvasNode: null,
+    prologueEnd: directives.length ? directives[directives.length - 1].end : 0,
+    declared: topLevelNames(ast)
+  };
+}
+function parseTargetDoc(file, source) {
+  const base = file.split("/").pop() ?? "";
+  if (/^page\.[jt]sx?$/.test(base)) return parseSourceDoc(file, source, false);
+  if (/^layout\.[jt]sx?$/.test(base)) return parseSourceDoc(file, source, true);
+  return parseModuleDoc(file, source);
+}
+
+// src/core/routes.ts
+var PAGE = /^page\.(tsx|jsx|ts|js)$/;
+var LAYOUT = ["layout.tsx", "layout.jsx", "layout.js", "layout.ts"];
+function listRoutes(config) {
+  const appDir = path4.join(config.root, config.appDir);
+  const out = [];
+  const walkDir = (dir, segments) => {
+    let entries;
+    try {
+      entries = fs3.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const e of entries) {
+      if (e.isFile() && PAGE.test(e.name)) {
+        const visible = segments.filter((s) => !/^\(.*\)$/.test(s) && !s.startsWith("@"));
+        out.push({ route: `/${visible.join("/")}`, file: path4.relative(config.root, path4.join(dir, e.name)), dynamic: segments.some((s) => s.startsWith("[")) });
+      }
+      if (e.isDirectory() && !e.name.startsWith("_") && e.name !== "truecanvas" && e.name !== "api" && e.name !== "node_modules") walkDir(path4.join(dir, e.name), [...segments, e.name]);
+    }
+  };
+  walkDir(appDir, []);
+  return out.sort((a, b) => a.route.localeCompare(b.route));
+}
+function extract(file, canvasFile, config, layout) {
+  const source = fs3.readFileSync(file, "utf8");
+  const info = defaultReturn(source, layout);
+  if (!info?.pure) return null;
+  const imports = [];
+  for (const stmt of info.ast.program.body) {
+    if (stmt.type !== "ImportDeclaration" || stmt.importKind === "type") continue;
+    const src = stmt.source.value;
+    if (/\.(css|scss|sass|less)$/.test(src)) continue;
+    const from = repoint(config, src, file, canvasFile);
+    const text = source.slice(stmt.start, stmt.end);
+    imports.push(from === src ? text : text.replace(JSON.stringify(src), JSON.stringify(from)).replace(`'${src}'`, `'${from}'`));
+  }
+  return { jsx: source.slice(info.node.start, info.node.end), imports };
+}
+function repoint(config, spec, fromFile, toFile) {
+  if (!spec.startsWith(".")) return spec;
+  return importSpecifier(config.root, path4.relative(config.root, toFile), path4.relative(config.root, path4.resolve(path4.dirname(fromFile), spec)));
+}
+function layoutFiles(config, pageFile) {
+  const appDir = path4.join(config.root, config.appDir);
+  const out = [];
+  for (let dir = path4.dirname(path4.resolve(config.root, pageFile)); dir.startsWith(appDir) && dir !== appDir; dir = path4.dirname(dir)) {
+    const file = LAYOUT.map((f) => path4.join(dir, f)).find((f) => fs3.existsSync(f));
+    if (file) out.push(path4.relative(config.root, file));
+  }
+  return out;
+}
+function routeOf(config, pageFile) {
+  const rel = path4.relative(path4.join(config.root, config.appDir), path4.dirname(path4.resolve(config.root, pageFile)));
+  const visible = rel.split(path4.sep).filter((s) => s && !/^\(.*\)$/.test(s) && !s.startsWith("@"));
+  return `/${visible.join("/")}`;
+}
+function routeFrame(config, pageFile, canvasFile) {
+  const appDir = path4.join(config.root, config.appDir);
+  const pageAbs = path4.resolve(config.root, pageFile);
+  const canvasAbs = path4.resolve(config.root, canvasFile);
+  const imports = [];
+  let mode = "inline";
+  const page = extract(pageAbs, canvasAbs, config, false);
+  let jsx;
+  if (page) {
+    jsx = page.jsx;
+    imports.push(...page.imports);
+  } else {
+    mode = "component";
+    imports.push(`import RoutePage from ${JSON.stringify(importSpecifier(config.root, canvasFile, pageFile))};`);
+    jsx = "<RoutePage />";
+  }
+  let i = 0;
+  for (let dir = path4.dirname(pageAbs); dir.startsWith(appDir) && dir !== appDir; dir = path4.dirname(dir)) {
+    const file = LAYOUT.map((f) => path4.join(dir, f)).find((f) => fs3.existsSync(f));
+    if (!file) continue;
+    const layout = extract(file, canvasAbs, config, true);
+    const holes = layout ? (layout.jsx.match(/\{\s*children\s*\}/g) ?? []).length : 0;
+    if (layout && holes === 1) {
+      jsx = layout.jsx.replace(/\{\s*children\s*\}/, jsx.startsWith("<>") ? jsx.slice(2, -3) : jsx);
+      imports.push(...layout.imports);
+    } else {
+      const local = `RouteLayout${i++ || ""}`;
+      imports.push(`import ${local} from ${JSON.stringify(importSpecifier(config.root, canvasFile, path4.relative(config.root, file)))};`);
+      jsx = `<${local}>${jsx}</${local}>`;
+    }
+  }
+  if (jsx.trimStart().startsWith("<>")) jsx = `<div>${jsx.trim().slice(2, -3)}</div>`;
+  return { jsx, imports: [...new Set(imports)], mode };
+}
+
+// src/core/link.ts
+var flatten = (n) => n.kind === "fragment" ? n.children : [n];
+function wrapperChain(frame) {
+  const chain = [];
+  for (let n = frame; ; ) {
+    const kids = n.children.filter((c) => c.kind !== "text");
+    if (kids.length !== 1 || kids[0].kind !== "component") return chain;
+    chain.push(kids[0]);
+    n = kids[0];
+  }
+}
+function readSource(config, rel) {
+  try {
+    return fs4.readFileSync(path5.join(config.root, rel), "utf8");
+  } catch {
+    return null;
+  }
+}
+function resolveLinks(config, doc) {
+  if (!doc.frames.some((f) => f.page || f.component)) return doc;
+  return { ...doc, frames: doc.frames.map((f) => f.component ? linkComponent(config, f) : f.page ? linkFrame(config, f) : f) };
+}
+function splitComponentRef(ref) {
+  const i = ref.lastIndexOf("#");
+  return i > 0 ? { file: ref.slice(0, i), name: ref.slice(i + 1) } : { file: ref, name: "default" };
+}
+function linkComponent(config, original) {
+  const frame = { ...original };
+  const { file, name } = splitComponentRef(frame.component);
+  const source = readSource(config, file);
+  const doc = source === null ? null : parseModuleDoc(file, source);
+  const own = doc?.frames.find((f) => f.frameName === name);
+  if (!own) {
+    frame.link = { kind: "component", page: file, route: name, files: [], editable: false, reason: source === null ? `${file} doesn't exist anymore.` : `${file} has no exported component ${name} returning JSX.` };
+    return frame;
+  }
+  frame.children = flatten(own.children[0]);
+  reindex(frame, frame.path);
+  frame.link = { kind: "component", page: file, route: name, files: [file], editable: true };
+  return frame;
+}
+function linkFrame(config, original) {
+  const frame = { ...original };
+  const page = frame.page;
+  const route = routeOf(config, page);
+  const pageSource = readSource(config, page);
+  if (pageSource === null) {
+    frame.link = { page, route, files: [], editable: false, reason: `${page} doesn't exist anymore.` };
+    return frame;
+  }
+  const chain = wrapperChain(original);
+  const files = [];
+  let current;
+  const pageDoc = parseSourceDoc(page, pageSource, false);
+  if (pageDoc) {
+    current = flatten(pageDoc.frames[0].children[0]);
+    files.push(page);
+  } else {
+    current = chain.length ? [chain[chain.length - 1]] : original.children;
+  }
+  const layouts = layoutFiles(config, page);
+  layouts.forEach((rel, i) => {
+    const src = readSource(config, rel);
+    const ldoc = src === null ? null : parseSourceDoc(rel, src, true);
+    const root = ldoc?.frames[0].children[0];
+    const slot = root && findSlot(root);
+    if (root && slot) {
+      slot.parent.children.splice(slot.index, 1, ...current);
+      current = flatten(root);
+      files.push(rel);
+    } else {
+      const wrapper = chain[layouts.length - 1 - i];
+      if (wrapper) current = [{ ...wrapper, children: current }];
+    }
+  });
+  frame.children = current;
+  reindex(frame, frame.path);
+  frame.link = pageDoc ? { page, route, files, editable: true } : { page, route, files, editable: false, reason: "This page fetches data or has logic before its return, so it's shown as one layer. Explore a copy to design on it." };
+  return frame;
+}
+function findSlot(root) {
+  for (const [i, c] of root.children.entries()) {
+    if (c.kind === "expression" && c.name.trim() === "children") return { parent: root, index: i };
+    const deeper = findSlot(c);
+    if (deeper) return deeper;
+  }
+  return null;
+}
+var pascal = (s) => s.replace(/[^A-Za-z0-9]+/g, " ").trim().split(" ").filter(Boolean).map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+function uniqueName(doc, taken, base) {
+  const used = /* @__PURE__ */ new Set([...doc.declared, ...doc.imports.flatMap((i) => [...i.names, ...i.defaultName ? [i.defaultName] : []]), ...taken, "Canvas", "Frame"]);
+  let name = /^[A-Z]/.test(base) ? base : `Page${base}`;
+  for (let n = 2; used.has(name); n++) name = `${base}${n}`;
+  taken.add(name);
+  return name;
+}
+function importName(config, doc, canvasRel, file, base, taken, imports) {
+  const spec = importSpecifier(config.root, canvasRel, file);
+  const existing = doc.imports.find((i) => i.source === spec && i.defaultName);
+  if (existing) return existing.defaultName;
+  const name = uniqueName(doc, taken, base);
+  imports.push(`import ${name} from ${JSON.stringify(spec)};`);
+  return name;
+}
+function linkedFrameBody(config, doc, canvasRel, page) {
+  const taken = /* @__PURE__ */ new Set();
+  const imports = [];
+  const route = routeOf(config, page);
+  const segments = route.split("/").filter(Boolean);
+  const pageName = importName(config, doc, canvasRel, page, `${segments.length ? pascal(segments[segments.length - 1]) : "Home"}Page`, taken, imports);
+  let jsx = `<${pageName} />`;
+  for (const rel of layoutFiles(config, page)) {
+    const dir = path5.basename(path5.dirname(rel));
+    const name = importName(config, doc, canvasRel, rel, `${pascal(dir) || "Route"}Layout`, taken, imports);
+    jsx = `<${name}>
+${indentBlock(jsx)}
+</${name}>`;
+  }
+  return { imports, jsx };
+}
+function unwrapFragment(jsx) {
+  let code = jsx.trim();
+  if (code.startsWith("<>") && code.endsWith("</>")) code = code.slice(2, -3).trim();
+  return dedent(code);
+}
+function dedent(code) {
+  const lines = code.split("\n");
+  const rest = lines.slice(1).filter((l) => l.trim());
+  const base = rest.length ? Math.min(...rest.map((l) => /^[ \t]*/.exec(l)[0].length)) : 0;
+  return [lines[0], ...lines.slice(1).map((l) => l.trim() ? l.slice(base) : "")].join("\n");
+}
+function explorationBody(config, frame, canvasRel) {
+  if (frame.component) throw new EditError(`"${frame.frameName}" is a main component: edit it directly, every instance follows.`);
+  if (!frame.page) throw new EditError(`"${frame.frameName}" isn't linked to a page.`);
+  const pageAbs = path5.join(config.root, frame.page);
+  const source = readSource(config, frame.page);
+  if (source === null) throw new EditError(`${frame.page} doesn't exist anymore.`);
+  const chain = wrapperChain(frame);
+  const wrappers = chain.slice(0, -1).map((n) => n.name);
+  const info = defaultReturn(source, false);
+  const imports = [];
+  let jsx;
+  if (info?.pure) {
+    for (const stmt of info.ast.program.body) {
+      if (stmt.type !== "ImportDeclaration" || stmt.importKind === "type" || /\.(css|scss|sass|less)$/.test(stmt.source.value)) continue;
+      const src = stmt.source.value;
+      const from = repoint(config, src, pageAbs, path5.join(config.root, canvasRel));
+      const text = source.slice(stmt.start, stmt.end);
+      imports.push(from === src ? text : text.replace(JSON.stringify(src), JSON.stringify(from)).replace(`'${src}'`, `'${from}'`));
+    }
+    jsx = unwrapFragment(source.slice(info.node.start, info.node.end));
+  } else {
+    jsx = chain.length ? `<${chain[chain.length - 1].name} />` : "";
+  }
+  for (const w of [...wrappers].reverse()) jsx = `<${w}>
+${indentBlock(jsx)}
+</${w}>`;
+  return { imports, jsx, inline: !!info?.pure };
+}
+function applyPlan(config, canvasSource, doc, frame, canvasRel) {
+  const page = frame.from;
+  if (!page) throw new EditError(`"${frame.frameName}" isn't an exploration of a page. Explore a copy of a linked frame first.`);
+  if (!fs4.existsSync(path5.join(config.root, page))) throw new EditError(`${page} doesn't exist anymore.`);
+  const layoutSpecs = new Set(doc.imports.filter((i) => /(^|\/)layout(\.\w+)?$/.test(i.source)).flatMap((i) => [...i.names, ...i.defaultName ? [i.defaultName] : []]));
+  let content = frame.children;
+  for (; ; ) {
+    const kids = content.filter((c) => c.kind !== "text" || c.text?.trim());
+    if (kids.length === 1 && kids[0].kind === "component" && layoutSpecs.has(kids[0].name)) content = kids[0].children;
+    else break;
+  }
+  content = content.filter((c) => !(c.kind === "text" && !c.text?.trim()));
+  if (!content.length) throw new EditError(`"${frame.frameName}" is empty: there's nothing to apply.`);
+  const body = dedent(canvasSource.slice(content[0].start, content[content.length - 1].end));
+  const single = content.length === 1 && content[0].kind !== "text" && content[0].kind !== "expression";
+  const jsx = single ? body : `<>
+${indentBlock(body)}
+</>`;
+  const ast = parseModule(canvasSource);
+  const imports = [];
+  for (const name of componentNamesIn(jsx)) {
+    const decl = ast.program.body.find(
+      (s) => s.type === "ImportDeclaration" && s.importKind !== "type" && s.specifiers.some((sp2) => sp2.local.name === name)
+    );
+    if (!decl) {
+      if (doc.declared.includes(name)) throw new EditError(`<${name}> is defined in the canvas file itself. Move it to a component file before applying.`);
+      continue;
+    }
+    const sp = decl.specifiers.find((x) => x.local.name === name);
+    const from = repoint(config, decl.source.value, path5.join(config.root, canvasRel), path5.join(config.root, page));
+    const what = sp.type === "ImportDefaultSpecifier" ? name : sp.type === "ImportNamespaceSpecifier" ? `* as ${name}` : `{ ${sp.imported.type === "Identifier" && sp.imported.name !== name ? `${sp.imported.name} as ${name}` : name} }`;
+    imports.push(`import ${what} from ${JSON.stringify(from)};`);
+  }
+  return { page, jsx, imports };
+}
+function pruneImports(source, candidates) {
+  let ast;
+  try {
+    ast = parseModule(source);
+  } catch {
+    return source;
+  }
+  const used = /* @__PURE__ */ new Set();
+  for (const stmt of ast.program.body) {
+    if (stmt.type === "ImportDeclaration") continue;
+    walk(stmt, (n) => {
+      if (n.type === "Identifier" || n.type === "JSXIdentifier") used.add(n.name);
+    });
+  }
+  let out = source;
+  const decls = ast.program.body.filter((s) => s.type === "ImportDeclaration" && s.specifiers.length > 0);
+  for (const decl of [...decls].reverse()) {
+    const names = decl.specifiers.map((s) => s.local.name);
+    if (!names.every((n) => candidates.has(n) && !used.has(n))) continue;
+    let end = decl.end;
+    if (out[end] === "\n") end++;
+    out = out.slice(0, decl.start) + out.slice(end);
+  }
+  return out;
+}
+
+// src/core/motion.ts
+import fs5 from "fs";
+import path6 from "path";
+var REVEAL = `"use client";
+
+import { Children, cloneElement, isValidElement, useEffect, useRef, useState, type CSSProperties, type ReactElement, type ReactNode } from "react";
+
+export type RevealEffect = "fade-up" | "fade-down" | "fade-in" | "blur-in" | "scale-in" | "slide-left" | "slide-right";
+
+export interface RevealProps {
+  /** How it enters */
+  effect?: RevealEffect;
+  /** Wait before it starts, in seconds (0 to 2) */
+  delay?: number;
+  /** Length of the animation, in seconds (0.1 to 2) */
+  duration?: number;
+  /** Animate each child one after another, this many seconds apart (0 to 0.3) */
+  stagger?: number;
+  /** Play only the first time it scrolls into view */
+  once?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+// Short distances and a light blur: enough to read as motion, never a jump.
+const HIDDEN: Record<RevealEffect, CSSProperties> = {
+  "fade-up": { opacity: 0, transform: "translateY(16px)", filter: "blur(4px)" },
+  "fade-down": { opacity: 0, transform: "translateY(-16px)", filter: "blur(4px)" },
+  "fade-in": { opacity: 0 },
+  "blur-in": { opacity: 0, filter: "blur(10px)" },
+  "scale-in": { opacity: 0, transform: "scale(0.96)", filter: "blur(4px)" },
+  "slide-left": { opacity: 0, transform: "translateX(24px)", filter: "blur(4px)" },
+  "slide-right": { opacity: 0, transform: "translateX(-24px)", filter: "blur(4px)" },
+};
+
+const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
+
+/** Animates its content in when it scrolls into view. Added by Truecanvas; it's your code now. */
+export function Reveal({ effect = "fade-up", delay = 0, duration = 0.6, stagger = 0, once = true, className, children }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(false);
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setReduced(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShown(true);
+          if (once) io.disconnect();
+        } else if (!once) setShown(false);
+      },
+      { root: document, rootMargin: "0px 0px -48px 0px", threshold: 0 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [once]);
+
+  const styleAt = (d: number): CSSProperties => {
+    // Reduced motion keeps a short fade (it helps reading) and drops the movement.
+    if (reduced) return { opacity: shown ? 1 : 0, transition: \`opacity 0.2s ease \${d}s\` };
+    return {
+      ...(shown ? { opacity: 1, transform: "none", filter: "none" } : HIDDEN[effect]),
+      transition: \`opacity \${duration}s \${EASE_OUT} \${d}s, transform \${duration}s \${EASE_OUT} \${d}s, filter \${duration}s \${EASE_OUT} \${d}s\`,
+    };
+  };
+
+  if (stagger > 0) {
+    let i = 0;
+    return (
+      <div ref={ref} className={className}>
+        {Children.map(children, (child) => {
+          if (!isValidElement(child)) return child;
+          const el = child as ReactElement<{ style?: CSSProperties }>;
+          return cloneElement(el, { style: { ...el.props.style, ...styleAt(delay + i++ * stagger) } });
+        })}
+      </div>
+    );
+  }
+  return (
+    <div ref={ref} className={className} style={styleAt(delay)}>
+      {children}
+    </div>
+  );
+}
+`;
+var TEXT_ANIMATE = `"use client";
+
+import { Children, cloneElement, isValidElement, use, useEffect, useRef, useState, type CSSProperties, type ReactElement, type ReactNode } from "react";
+
+export type TextEffect = "words" | "letters" | "blur-in" | "slide-up" | "typewriter";
+
+export interface TextAnimateProps {
+  /** How the text appears */
+  effect?: TextEffect;
+  /** Time between words or letters, in seconds (0 to 0.3) */
+  stagger?: number;
+  /** Wait before it starts, in seconds (0 to 2) */
+  delay?: number;
+  /** Length of each word's or letter's animation, in seconds (0.1 to 1.5) */
+  duration?: number;
+  /** Play only the first time it scrolls into view */
+  once?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const FROM: Record<TextEffect, CSSProperties> = {
+  words: { opacity: 0, transform: "translateY(0.25em)", filter: "blur(6px)" },
+  letters: { opacity: 0, transform: "translateY(0.25em)", filter: "blur(4px)" },
+  "blur-in": { opacity: 0, filter: "blur(8px)" },
+  "slide-up": { transform: "translateY(110%)" },
+  typewriter: { opacity: 0 },
+};
+
+const SR_ONLY: CSSProperties = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
+
+// Elements a Server Component passes down can reach the client as lazy
+// references (React 19). Resolve them so server and client split the same text.
+const LAZY = Symbol.for("react.lazy");
+function resolve(node: ReactNode): ReactNode {
+  const lazy = node as { $$typeof?: symbol; _payload?: PromiseLike<ReactNode> } | null;
+  return lazy && typeof lazy === "object" && lazy.$$typeof === LAZY && lazy._payload ? resolve(use(lazy._payload as Promise<ReactNode>)) : node;
+}
+
+function textOf(node: ReactNode): string {
+  node = resolve(node);
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement(node)) {
+    const props = node.props as { children?: ReactNode; "aria-hidden"?: unknown };
+    return props["aria-hidden"] ? "" : textOf(props.children);
+  }
+  return "";
+}
+
+/**
+ * Reveals text word by word or letter by letter when it scrolls into view.
+ * Inline elements inside (like <em>) keep their styling. Added by Truecanvas;
+ * it's your code now.
+ */
+export function TextAnimate({ effect = "words", stagger = 0.06, delay = 0, duration = 0.5, once = true, className, children }: TextAnimateProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setShown(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShown(true);
+          if (once) io.disconnect();
+        } else if (!once) setShown(false);
+      },
+      { root: document, rootMargin: "0px 0px -48px 0px", threshold: 0 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [once]);
+
+  const byLetter = effect === "letters" || effect === "typewriter";
+  const ease = "cubic-bezier(0.23, 1, 0.32, 1)";
+  let i = 0;
+  const piece = (content: ReactNode, key: string) => {
+    const d = delay + i++ * stagger;
+    const transition =
+      effect === "typewriter" ? \`opacity 0.01s linear \${d}s\` : \`opacity \${duration}s \${ease} \${d}s, transform \${duration}s \${ease} \${d}s, filter \${duration}s \${ease} \${d}s\`;
+    const style: CSSProperties = { display: "inline-block", whiteSpace: "pre", ...(shown ? { opacity: 1, transform: "none", filter: "none" } : FROM[effect]), transition };
+    const span = (
+      <span key={key} style={style}>
+        {content}
+      </span>
+    );
+    // slide-up: each word rises from behind its own line
+    return effect === "slide-up" ? (
+      <span key={key} style={{ display: "inline-block", overflow: "hidden", verticalAlign: "bottom" }}>
+        {span}
+      </span>
+    ) : (
+      span
+    );
+  };
+  const split = (nodes: ReactNode, prefix: string): ReactNode[] => {
+    const out: ReactNode[] = [];
+    Children.toArray(nodes).forEach((raw, ci) => {
+      const child = resolve(raw);
+      const key = \`\${prefix}\${ci}\`;
+      if (typeof child === "string" || typeof child === "number") {
+        String(child)
+          .split(/(\\s+)/)
+          .forEach((part, pi) => {
+            if (!part) return;
+            if (/^\\s+$/.test(part)) return void out.push(" ");
+            const k = \`\${key}-\${pi}\`;
+            if (byLetter)
+              out.push(
+                <span key={k} style={{ display: "inline-block", whiteSpace: "nowrap" }}>
+                  {Array.from(part).map((ch, li) => piece(ch, \`\${k}-\${li}\`))}
+                </span>,
+              );
+            else out.push(piece(part, k));
+          });
+      } else if (isValidElement(child) && (child.props as { children?: ReactNode }).children != null && !(child.props as { "aria-hidden"?: unknown })["aria-hidden"]) {
+        // <em>, <strong>, links\u2026: keep the element, animate the text inside it
+        const el = child as ReactElement<{ children?: ReactNode }>;
+        out.push(cloneElement(el, { key }, split(el.props.children, \`\${key}.\`)));
+      } else out.push(child);
+    });
+    return out;
+  };
+
+  return (
+    <span ref={ref} className={className}>
+      <span style={SR_ONLY}>{textOf(children)}</span>
+      <span aria-hidden>{split(children, "")}</span>
+    </span>
+  );
+}
+`;
+function motionFiles(config) {
+  const glob = config.components[0] ?? "components/**/*.tsx";
+  const base = glob.split("/").filter((p) => !p.includes("*")).join("/") || "components";
+  const dir = path6.join(base, "motion");
+  return { reveal: path6.join(dir, "reveal.tsx"), text: path6.join(dir, "text-animate.tsx") };
+}
+function ensureMotionComponents(config) {
+  const files = motionFiles(config);
+  let created = false;
+  for (const [rel, content] of [
+    [files.reveal, REVEAL],
+    [files.text, TEXT_ANIMATE]
+  ]) {
+    const abs = path6.join(config.root, rel);
+    if (fs5.existsSync(abs)) continue;
+    fs5.mkdirSync(path6.dirname(abs), { recursive: true });
+    fs5.writeFileSync(abs, content);
+    created = true;
+  }
+  return { ...files, created };
+}
+
+// src/core/components.ts
+import fs6 from "fs";
+import path7 from "path";
+function componentsDir(config) {
+  const glob = config.components[0] ?? "components/**/*.tsx";
+  return glob.split("/").filter((p) => !p.includes("*")).join("/") || "components";
+}
+var kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^A-Za-z0-9]+/g, "-").toLowerCase().replace(/^-|-$/g, "");
+function componentName(input) {
+  const name = input.trim().split(/[^A-Za-z0-9]+/).filter(Boolean).map((w) => w[0].toUpperCase() + w.slice(1)).join("");
+  return /^[A-Z][A-Za-z0-9]*$/.test(name) ? name : null;
+}
+var GLOBALS = /* @__PURE__ */ new Set(["undefined", "null", "true", "false", "Math", "JSON", "Number", "String", "Boolean", "Date", "Array", "Object", "Intl", "console", "window", "document"]);
+function freeNames(jsx) {
+  const ast = parseModule(`<>${jsx}</>`);
+  const out = /* @__PURE__ */ new Set();
+  const visit = (n, locals) => {
+    if (!n || typeof n !== "object") return;
+    switch (n.type) {
+      case "Identifier":
+        if (!locals.has(n.name)) out.add(n.name);
+        return;
+      case "MemberExpression":
+        visit(n.object, locals);
+        if (n.computed) visit(n.property, locals);
+        return;
+      case "ObjectProperty":
+        if (n.computed) visit(n.key, locals);
+        visit(n.value, locals);
+        return;
+      case "ArrowFunctionExpression":
+      case "FunctionExpression": {
+        const inner = new Set(locals);
+        for (const p of n.params) walk(p, (x) => void (x.type === "Identifier" && inner.add(x.name)));
+        visit(n.body, inner);
+        return;
+      }
+      case "JSXAttribute":
+        visit(n.value, locals);
+        return;
+      case "JSXOpeningElement":
+        for (const a of n.attributes) visit(a, locals);
+        return;
+      case "JSXClosingElement":
+        return;
+    }
+    for (const key of Object.keys(n)) {
+      if (key === "loc" || key === "start" || key === "end" || key.endsWith("Comments")) continue;
+      const v = n[key];
+      if (Array.isArray(v)) for (const x of v) visit(x, locals);
+      else if (v && typeof v === "object" && "type" in v) visit(v, locals);
+    }
+  };
+  visit(ast.program, /* @__PURE__ */ new Set());
+  return out;
+}
+function importsFor(config, jsx, source, doc, fromRel, toRel) {
+  const ast = parseModule(source);
+  const needed = /* @__PURE__ */ new Set([...componentNamesIn(jsx), ...freeNames(jsx)]);
+  const out = [];
+  for (const name of needed) {
+    if (GLOBALS.has(name)) continue;
+    const decl = ast.program.body.find(
+      (s) => s.type === "ImportDeclaration" && s.importKind !== "type" && s.specifiers.some((sp2) => sp2.local.name === name)
+    );
+    if (!decl) {
+      if (doc.declared.includes(name)) throw new EditError(`These layers use ${name}, defined in ${path7.basename(fromRel)}. Move it to its own file first, or ask your agent to extract the component.`);
+      throw new EditError(`These layers use \`${name}\` from the surrounding code, so they can't become a component automatically. Ask your agent to extract it with props.`);
+    }
+    const sp = decl.specifiers.find((x) => x.local.name === name);
+    const from = repoint(config, decl.source.value, path7.join(config.root, fromRel), path7.join(config.root, toRel));
+    const what = sp.type === "ImportDefaultSpecifier" ? name : sp.type === "ImportNamespaceSpecifier" ? `* as ${name}` : `{ ${sp.imported.type === "Identifier" && sp.imported.name !== name ? `${sp.imported.name} as ${name}` : name} }`;
+    out.push(`import ${what} from ${JSON.stringify(from)};`);
+  }
+  return out;
+}
+function starterJsx(name) {
+  const words = name.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+  return `<div className="flex flex-col gap-2 rounded-xl border border-neutral-200 p-6">
+  <h3 className="text-lg font-semibold">${words}</h3>
+  <p className="text-sm text-neutral-500">Describe it here.</p>
+</div>`;
+}
+function componentFile(name, jsx, imports) {
+  return `${imports.length ? `${imports.join("\n")}
+
+` : ""}export function ${name}() {
+  return (
+${indentBlock(indentBlock(jsx.trim()))}
+  );
+}
+`;
+}
+function newComponentPath(config, name) {
+  const rel = path7.join(componentsDir(config), `${kebab(name)}.tsx`);
+  if (fs6.existsSync(path7.join(config.root, rel))) throw new EditError(`${rel} already exists. Pick another name.`);
+  return rel;
+}
+
+// src/core/scaffold.ts
+import fs7 from "fs";
+import path8 from "path";
+var CANVAS_SUFFIX = ".canvas.tsx";
+var ROUTE = "truecanvas";
+function canvasFiles(config) {
+  const dir = path8.join(config.root, config.canvasDir);
+  if (!fs7.existsSync(dir)) return [];
+  return fs7.readdirSync(dir).filter((f) => f.endsWith(CANVAS_SUFFIX)).sort((a, b) => canvasNameOf(a).localeCompare(canvasNameOf(b)));
+}
+function canvasNameOf(file) {
+  return path8.basename(file).slice(0, -CANVAS_SUFFIX.length);
+}
+function canvasPath(config, name) {
+  if (!/^[a-z0-9][a-z0-9-_]*$/i.test(name)) throw new Error(`Invalid canvas name "${name}". Use letters, digits, - and _.`);
+  return path8.join(config.root, config.canvasDir, `${name}${CANVAS_SUFFIX}`);
+}
+function writeIfChanged(file, content) {
+  if (fs7.existsSync(file) && fs7.readFileSync(file, "utf8") === content) return false;
+  fs7.mkdirSync(path8.dirname(file), { recursive: true });
+  fs7.writeFileSync(file, content);
+  return true;
+}
+function syncRoute(config) {
+  const routeDir = path8.join(config.root, config.appDir, ROUTE);
+  const pageFile = path8.join(routeDir, "[canvas]", "page.tsx");
+  const registryFile = path8.join(routeDir, "canvases.tsx");
+  const canvasDirAbs = path8.join(config.root, config.canvasDir);
+  let rel = path8.relative(routeDir, canvasDirAbs);
+  if (!rel.startsWith(".")) rel = `./${rel}`;
+  const compareDir = path8.join(routeDir, "compare");
+  const compares = fs7.existsSync(compareDir) ? fs7.readdirSync(compareDir).filter((f) => f.endsWith(CANVAS_SUFFIX)) : [];
+  const entries = [
+    ...canvasFiles(config).map((f) => `  ${JSON.stringify(canvasNameOf(f))}: lazy(() => import(${JSON.stringify(`${rel}/${f.replace(/\.tsx$/, "")}`)})),`),
+    // older versions rendered for Compare
+    ...compares.map((f) => `  ${JSON.stringify(`__compare__${canvasNameOf(f)}`)}: lazy(() => import(${JSON.stringify(`./compare/${f.replace(/\.tsx$/, "")}`)})),`)
+  ].join("\n");
+  const registry = `"use client";
+/* eslint-disable */
+// Generated by Truecanvas. Do not edit: it is regenerated when canvases are added or removed.
+import { lazy } from "react";
+import { TruecanvasHost, type HostProps } from "truecanvas/host";
+import { components } from "./components";
+
+const canvases = {
+${entries}
+};
+
+export default function Canvases(props: Omit<HostProps, "canvases" | "components">) {
+  return <TruecanvasHost {...props} canvases={canvases} components={components} />;
+}
+`;
+  const dm = config.darkMode;
+  const page = `/* eslint-disable */
+// Generated by Truecanvas. Dev-only route that renders canvas frames.
+import { notFound } from "next/navigation";
+import Canvases from "../canvases";
+
+export const dynamic = "force-dynamic";
+
+export default async function TruecanvasFrame({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ canvas: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}) {
+  if (process.env.NODE_ENV !== "development") notFound();
+  const { canvas } = await params;
+  const query = await searchParams;
+  return (
+    <Canvases
+      canvas={canvas}
+      frame={query.frame ?? null}
+      theme={(query.theme as "light" | "dark" | "system" | undefined) ?? "system"}
+      darkMode={${JSON.stringify(dm)}}
+    />
+  );
+}
+`;
+  const componentsFile = path8.join(routeDir, "components.tsx");
+  if (!fs7.existsSync(componentsFile)) writeIfChanged(componentsFile, componentRegistry(config, []));
+  const a = writeIfChanged(registryFile, registry);
+  const b = writeIfChanged(pageFile, page);
+  return a || b;
+}
+var STARTER_CANVAS = `"use client";
+import { Canvas, Frame } from "truecanvas";
+
+/*
+ * A placeholder page. Replace the Welcome frame with your own components:
+ * drag them from Assets, draw frames with F, or ask your agent over MCP.
+ * Inline styles keep it readable in any app, with or without Tailwind.
+ */
+export default function StarterCanvas() {
+  return (
+    <Canvas>
+      <Frame name="Welcome" x={0} y={0} width={1200} height={760}>
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+            color: "light-dark(#1d1d1b, #ededea)",
+            backgroundColor: "light-dark(#f6f5f2, #121211)",
+            backgroundImage: "radial-gradient(light-dark(rgba(0,0,0,.07), rgba(255,255,255,.06)) 1px, transparent 1px), radial-gradient(circle at 50% 38%, rgba(255,138,92,.16), transparent 55%)",
+            backgroundSize: "22px 22px, 100% 100%",
+          }}
+        >
+          <div
+            style={{
+              width: 520,
+              padding: 40,
+              borderRadius: 24,
+              backgroundColor: "light-dark(#ffffff, #1b1b1a)",
+              border: "1px solid light-dark(#e9e8e4, #2a2a28)",
+              boxShadow: "0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(0,0,0,.25)",
+            }}
+          >
+            <svg width="44" height="44" viewBox="0 0 64 64" aria-hidden>
+              <defs>
+                <linearGradient id="tc-starter" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0" stopColor="#ff9466" />
+                  <stop offset="1" stopColor="#ea6a3c" />
+                </linearGradient>
+              </defs>
+              <rect width="64" height="64" rx="15" fill="url(#tc-starter)" />
+              <path fill="#f6f5f1" fillRule="evenodd" d="M10.5 10.5h43v13.1h-43z M25.5 16.8h13v36.7h-13z" />
+            </svg>
+            <h1 style={{ margin: "22px 0 6px", fontSize: 26, lineHeight: "32px", fontWeight: 650, letterSpacing: "-0.02em" }}>Your canvas is ready</h1>
+            <p style={{ margin: 0, fontSize: 15, lineHeight: "23px", color: "light-dark(#6b6b66, #a3a39d)" }}>
+              Everything here is real code from your app. Replace this frame with your own components.
+            </p>
+            <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14 }}>
+                <span style={{ minWidth: 58, textAlign: "center", padding: "3px 8px", borderRadius: 7, fontSize: 12, fontWeight: 600, backgroundColor: "light-dark(#f3f2ee, #262624)", border: "1px solid light-dark(#e3e1dc, #34342f)" }}>Assets</span>
+                <span>Drag a component from your design system onto a frame</span>
+              </div>
+              <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14 }}>
+                <span style={{ minWidth: 58, textAlign: "center", padding: "3px 8px", borderRadius: 7, fontSize: 12, fontWeight: 600, backgroundColor: "light-dark(#f3f2ee, #262624)", border: "1px solid light-dark(#e3e1dc, #34342f)" }}>F</span>
+                <span>Draw a frame, or pick an iPhone or desktop size</span>
+              </div>
+              <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14 }}>
+                <span style={{ minWidth: 58, textAlign: "center", padding: "3px 8px", borderRadius: 7, fontSize: 12, fontWeight: 600, color: "#fff", backgroundColor: "#ee7445", border: "1px solid #e0652f" }}>Agent</span>
+                <span>Ask: \u201CBuild a pricing page with our components\u201D</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Frame>
+    </Canvas>
+  );
+}
+`;
+function componentRegistry(config, specs) {
+  const routeDir = path8.join(config.root, config.appDir, ROUTE);
+  const lines = specs.map((c) => {
+    let from = c.library;
+    if (!from) {
+      from = path8.relative(routeDir, path8.join(config.root, c.file)).replace(/\.(tsx|ts|jsx|js)$/, "");
+      if (!from.startsWith(".")) from = `./${from}`;
+    }
+    return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)}).then((m) => ({ default: m[${JSON.stringify(c.name)}] }))),`;
+  });
+  return `"use client";
+/* eslint-disable */
+// Generated by Truecanvas. Do not edit: it is regenerated when components change.
+import { lazy, type ComponentType } from "react";
+
+// any: components with required props are rendered with whatever the preview passes
+export const components: Record<string, ComponentType<any>> = {
+${lines.join("\n")}
+};
+`;
+}
+function syncComponentRegistry(config, specs) {
+  const file = path8.join(config.root, config.appDir, ROUTE, "components.tsx");
+  return writeIfChanged(file, componentRegistry(config, specs));
+}
+
+// src/core/workspace.ts
+var require2 = createRequire(import.meta.url);
+var MARK = "__tcsel";
+var ConflictError = class extends EditError {
+  constructor(message, file) {
+    super(message);
+    this.file = file;
+  }
+  file;
+};
+var Workspace = class {
+  constructor(config) {
+    this.config = config;
+    this.catalog = new Catalog(config.root, config.components, config.libraries);
+    this.comments = new Comments(config);
+    this.git = new Git(config.root);
+    for (const c of this.canvases()) this.sources.set(c, fs8.readFileSync(this.file(c), "utf8"));
+  }
+  config;
+  catalog;
+  sources = /* @__PURE__ */ new Map();
+  undoStacks = /* @__PURE__ */ new Map();
+  redoStacks = /* @__PURE__ */ new Map();
+  feed = [];
+  seq = 0;
+  queue = Promise.resolve();
+  listeners = /* @__PURE__ */ new Set();
+  selection = { canvas: null, ids: [] };
+  agents = /* @__PURE__ */ new Map();
+  comments;
+  git;
+  on(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+  emit(e) {
+    for (const fn of this.listeners) fn(e);
+  }
+  // ---------- canvases ----------
+  canvases() {
+    return canvasFiles(this.config).map(canvasNameOf);
+  }
+  file(canvas) {
+    return canvasPath(this.config, canvas);
+  }
+  relFile(canvas) {
+    return path9.relative(this.config.root, this.file(canvas));
+  }
+  read(canvas) {
+    const file = this.file(canvas);
+    if (!fs8.existsSync(file)) throw new EditError(`Canvas "${canvas}" does not exist. Canvases: ${this.canvases().join(", ") || "none"}`);
+    const src = fs8.readFileSync(file, "utf8");
+    if (!this.sources.has(canvas)) this.sources.set(canvas, src);
+    return src;
+  }
+  doc(canvas) {
+    return this.docFrom(canvas, this.read(canvas));
+  }
+  /** A canvas doc with linked frames resolved to their page's layers. */
+  docFrom(canvas, source) {
+    return resolveLinks(this.config, parseCanvas(canvas, this.relFile(canvas), source));
+  }
+  /** Where a node's code lives: the canvas, or a linked page/layout file. */
+  nodeSource(canvas, id) {
+    const hit = findNode(this.doc(canvas), id);
+    if (!hit) return null;
+    const rel = fileOfId(id) ?? this.relFile(canvas);
+    const abs = path9.join(this.config.root, rel);
+    return { node: hit.node, rel, abs, source: fs8.readFileSync(abs, "utf8") };
+  }
+  /** Page and layout files shown by linked frames, across all canvases (the Git panel counts them as design files). */
+  linkedFiles() {
+    const out = /* @__PURE__ */ new Set();
+    for (const c of this.canvases()) {
+      try {
+        for (const f of this.doc(c).frames) for (const file of f.link?.files ?? []) out.add(file);
+      } catch {
+      }
+    }
+    return [...out];
+  }
+  /**
+   * Files that belong with design commits besides the canvas folder: linked
+   * pages and layouts, and the motion components animations import.
+   */
+  designFiles() {
+    const m = motionFiles(this.config);
+    return [...this.linkedFiles(), ...[m.reveal, m.text].filter((f) => fs8.existsSync(path9.join(this.config.root, f)))];
+  }
+  /** Canvases with a linked frame showing this page or layout file. */
+  canvasesLinking(rel) {
+    return this.canvases().filter((c) => {
+      try {
+        return this.doc(c).frames.some((f) => f.page === rel || f.link?.files.includes(rel));
+      } catch {
+        return false;
+      }
+    });
+  }
+  /** Called by the app-dir watcher: a page or layout changed (in a code editor, or by git). */
+  linkedFileChanged(rel) {
+    let next;
+    try {
+      next = fs8.readFileSync(path9.join(this.config.root, rel), "utf8");
+    } catch {
+      next = "";
+    }
+    const key = `file:${rel}`;
+    if (this.sources.get(key) === next) return;
+    this.sources.set(key, next);
+    for (const c of this.canvasesLinking(rel)) this.emit({ type: "doc", canvas: c, doc: this.doc(c) });
+  }
+  createCanvas(name, actor, content = STARTER_CANVAS) {
+    const file = canvasPath(this.config, name);
+    if (fs8.existsSync(file)) throw new EditError(`Canvas "${name}" already exists.`);
+    fs8.mkdirSync(path9.dirname(file), { recursive: true });
+    fs8.writeFileSync(file, content);
+    this.sources.set(name, content);
+    this.canvasesChanged();
+    this.record(name, `Created canvas ${name}`, actor, "", content, []);
+    return name;
+  }
+  // ---------- comments ----------
+  async userAuthor() {
+    const s = await this.git.status().catch(() => null);
+    return { name: s?.user ?? (process.env.USER || "You"), kind: "user" };
+  }
+  commentsChanged(canvas) {
+    this.emit({ type: "comments", canvas });
+  }
+  /** Pages panel: each canvas with its frame count. */
+  canvasInfos() {
+    return this.canvases().map((name) => {
+      try {
+        return { name, frames: this.doc(name).frames.length };
+      } catch {
+        return { name, frames: 0 };
+      }
+    });
+  }
+  uniqueCanvasName(base) {
+    const taken = new Set(this.canvases());
+    if (!taken.has(base)) return base;
+    for (let i = 2; ; i++) if (!taken.has(`${base}-${i}`)) return `${base}-${i}`;
+  }
+  canvasesChanged() {
+    syncRoute(this.config);
+    this.emit({ type: "canvases", canvases: this.canvases() });
+  }
+  renameCanvas(from, to) {
+    const src = this.file(from);
+    if (!fs8.existsSync(src)) throw new EditError(`Canvas "${from}" does not exist.`);
+    const dest = canvasPath(this.config, to);
+    if (fs8.existsSync(dest)) throw new EditError(`A canvas named "${to}" already exists.`);
+    fs8.renameSync(src, dest);
+    this.comments.renameCanvas(from, to);
+    for (const map of [this.sources, this.undoStacks, this.redoStacks]) {
+      if (map.has(from)) {
+        map.set(to, map.get(from));
+        map.delete(from);
+      }
+    }
+    for (const e of this.feed) if (e.canvas === from) e.canvas = to;
+    if (this.selection.canvas === from) this.selection = { ...this.selection, canvas: to };
+    this.canvasesChanged();
+    this.emit({ type: "canvas-renamed", from, to });
+    return to;
+  }
+  duplicateCanvas(name) {
+    const source = this.read(name);
+    const copy = this.uniqueCanvasName(`${name}-copy`);
+    fs8.writeFileSync(canvasPath(this.config, copy), source);
+    this.sources.set(copy, source);
+    this.canvasesChanged();
+    return copy;
+  }
+  /** Deleted pages are kept in memory for this session so they can be restored. */
+  trash = /* @__PURE__ */ new Map();
+  deleteCanvas(name) {
+    const file = this.file(name);
+    if (!fs8.existsSync(file)) throw new EditError(`Canvas "${name}" does not exist.`);
+    this.trash.set(name, fs8.readFileSync(file, "utf8"));
+    fs8.unlinkSync(file);
+    this.sources.delete(name);
+    this.canvasesChanged();
+  }
+  restoreCanvas(name) {
+    const source = this.trash.get(name);
+    if (source === void 0) throw new EditError(`Nothing to restore for "${name}".`);
+    const target = this.uniqueCanvasName(name);
+    fs8.writeFileSync(canvasPath(this.config, target), source);
+    this.sources.set(target, source);
+    this.trash.delete(name);
+    this.canvasesChanged();
+    return target;
+  }
+  /** Called by the file watcher. Edits made in a code editor become undoable history too. */
+  externalChange(fileName) {
+    if (!fileName.endsWith(CANVAS_SUFFIX)) return;
+    const canvas = canvasNameOf(fileName);
+    const file = this.file(canvas);
+    if (!fs8.existsSync(file)) {
+      this.sources.delete(canvas);
+      syncRoute(this.config);
+      this.emit({ type: "canvases", canvases: this.canvases() });
+      return;
+    }
+    const prev = this.sources.get(canvas);
+    const next = fs8.readFileSync(file, "utf8");
+    if (prev === next) return;
+    this.sources.set(canvas, next);
+    if (prev === void 0) {
+      syncRoute(this.config);
+      this.emit({ type: "canvases", canvases: this.canvases() });
+    } else {
+      this.record(canvas, "Edited in code", { kind: "file" }, prev, next, []);
+    }
+    this.emit({ type: "doc", canvas, doc: this.docFrom(canvas, next) });
+  }
+  // ---------- commands ----------
+  run(cmd, actor) {
+    const job = this.queue.then(async () => {
+      try {
+        return await this.exec(cmd, actor);
+      } catch (err) {
+        if (!(err instanceof ConflictError)) throw err;
+        if (err.file) this.linkedFileChanged(err.file);
+        else this.externalChange(path9.basename(this.file(cmd.canvas)));
+        return this.exec(cmd, actor);
+      }
+    });
+    this.queue = job.catch(() => void 0);
+    return job;
+  }
+  async exec(cmd, actor) {
+    cmd = { ...cmd };
+    if (cmd.op === "add_component_frame" && !fs8.existsSync(this.file(cmd.canvas))) this.createCanvas(cmd.canvas, actor, COMPONENTS_CANVAS);
+    const canvasSource = this.read(cmd.canvas);
+    const canvasDoc = parseCanvas(cmd.canvas, this.relFile(cmd.canvas), canvasSource);
+    if (canvasDoc.error) throw new EditError(`The canvas file does not parse: ${canvasDoc.error}`);
+    const view = resolveLinks(this.config, canvasDoc);
+    cmd = this.routeLinked(cmd, view);
+    let target = this.targetOf(cmd);
+    if (cmd.op === "explore_copy") {
+      const frame = findFrame(canvasDoc, cmd.frame);
+      if (!frame) throw new EditError(`Frame "${cmd.frame}" not found.`);
+      const body = explorationBody(this.config, frame, this.relFile(cmd.canvas));
+      this.pending = { kind: "explore", frame, imports: body.imports, jsx: await this.formatSnippet(body.jsx) };
+    }
+    if (cmd.op === "apply_to_page") {
+      const frame = findFrame(canvasDoc, cmd.frame);
+      if (!frame) throw new EditError(`Frame "${cmd.frame}" not found.`);
+      const plan = applyPlan(this.config, canvasSource, canvasDoc, frame, this.relFile(cmd.canvas));
+      target = plan.page;
+      this.pending = { kind: "apply", frame, ...plan };
+    }
+    const rel = target ?? this.relFile(cmd.canvas);
+    const file = path9.join(this.config.root, rel);
+    const before = target ? fs8.readFileSync(file, "utf8") : canvasSource;
+    const parse2 = (src) => target ? parseTargetDoc(target, src) : parseCanvas(cmd.canvas, rel, src);
+    const doc = parse2(before);
+    if (!doc) throw new EditError(`${rel} has data or logic in its component now, so it can't be edited from the canvas. Explore a copy instead.`);
+    if ((cmd.op === "insert_jsx" || cmd.op === "replace" || cmd.op === "create_frame") && cmd.jsx) {
+      cmd = { ...cmd, jsx: await this.formatSnippet(cmd.jsx) };
+    }
+    if (cmd.op === "import_route") {
+      const routes = listRoutes(this.config);
+      const r = routes.find((x) => x.route === cmd.route || x.file === cmd.route);
+      if (!r) throw new EditError(`No page "${cmd.route}". Pages: ${routes.map((x) => x.route).join(", ") || "none"}`);
+      if (cmd.copy) {
+        const built = routeFrame(this.config, r.file, this.relFile(cmd.canvas));
+        this.pending = { kind: "route", route: r.route, page: null, imports: built.imports, mode: built.mode, jsx: await this.formatSnippet(built.jsx) };
+      } else {
+        const built = linkedFrameBody(this.config, canvasDoc, this.relFile(cmd.canvas), r.file);
+        this.pending = { kind: "route", route: r.route, page: r.file, imports: built.imports, mode: "linked", jsx: built.jsx };
+      }
+    }
+    if (cmd.op === "add_animation") {
+      const files = ensureMotionComponents(this.config);
+      if (files.created) this.catalog.invalidate();
+      this.motion = files;
+    }
+    let newComponent = null;
+    let movedNames = /* @__PURE__ */ new Set();
+    if (cmd.op === "create_component") {
+      const name = componentName(cmd.name);
+      if (!name) throw new EditError(`"${cmd.name}" can't be a component name. Use letters and digits, like PricingCard.`);
+      await this.catalog.load().catch(() => []);
+      if (this.catalog.get(name) || doc.declared.includes(name) || doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) throw new EditError(`There's already a ${name}. Pick another name.`);
+      const fileRel = newComponentPath(this.config, name);
+      let jsx = starterJsx(name);
+      let imports = [];
+      if (cmd.from) {
+        const hit = findNode(doc, cmd.from);
+        if (!hit) throw new EditError(`Node ${cmd.from} not found.`);
+        if (hit.node === hit.frame) throw new EditError("Select layers inside the frame to turn them into a component.");
+        if (hit.node.kind !== "element" && hit.node.kind !== "component" && hit.node.kind !== "fragment") throw new EditError("Select an element (not text) to turn it into a component.");
+        jsx = dedent(before.slice(hit.node.start, hit.node.end));
+        imports = importsFor(this.config, jsx, before, doc, rel, fileRel);
+        movedNames = new Set(componentNamesIn(jsx));
+      }
+      const abs = path9.join(this.config.root, fileRel);
+      newComponent = { rel: fileRel, content: await this.format(componentFile(name, jsx, imports), abs).catch(() => componentFile(name, jsx, imports)) };
+      this.pending = { kind: "component", name, file: fileRel };
+    }
+    await this.catalog.load().catch(() => []);
+    const ed = new CanvasEditor(before, doc);
+    const renamedFrame = cmd.op === "update_frame" && cmd.name !== void 0 ? findFrame(doc, cmd.frame) : null;
+    const usedBefore = cmd.op === "apply_to_page" ? new Set(componentNamesIn(before.slice(doc.frames[0].children[0].start, doc.frames[0].children[0].end))) : null;
+    const label = this.apply(ed, cmd, rel);
+    const pretty = await this.isPrettierClean(before, file);
+    const finish = async (code) => pretty ? this.format(code, file) : validate(code);
+    let result = ed.result();
+    if (usedBefore) result = pruneImports(result, usedBefore);
+    if (cmd.op === "remove_animation") result = pruneImports(result, /* @__PURE__ */ new Set(["Reveal", "TextAnimate"]));
+    if (cmd.op === "create_component" && cmd.from && movedNames.size) result = pruneImports(result, movedNames);
+    let after = await finish(result);
+    let ids = [];
+    const reparse = (src) => {
+      const d = parse2(src);
+      if (!d) throw new EditError(`That edit would put logic into ${path9.basename(rel)}. Only plain JSX can be edited from the canvas.`);
+      return d;
+    };
+    if (after.includes(MARK)) {
+      const marked = reparse(after);
+      const paths = [];
+      for (const f of marked.frames) {
+        const stack = [f];
+        while (stack.length) {
+          const n = stack.pop();
+          if (n.props[MARK]) paths.push(n.path);
+          stack.push(...n.children);
+        }
+      }
+      after = await finish(after.replace(new RegExp(`\\s*${MARK}(?=[\\s/>])`, "g"), ""));
+      const clean = reparse(after);
+      ids = paths.map((p) => pathId(clean, p)).filter(Boolean);
+    } else {
+      const clean = reparse(after);
+      const paths = ed.selectPaths.length ? ed.selectPaths : touchedPaths(doc, cmd);
+      ids = paths.map((p) => pathId(clean, p)).filter(Boolean);
+    }
+    if (cmd.op === "apply_to_page") ids = [findFrame(canvasDoc, cmd.frame).id];
+    if (after === before) return { doc: target ? this.doc(cmd.canvas) : view, ids, label };
+    if (fs8.readFileSync(file, "utf8") !== before) throw new ConflictError(`${path9.basename(rel)} changed during the edit.`, target ?? void 0);
+    if (newComponent) {
+      fs8.mkdirSync(path9.dirname(path9.join(this.config.root, newComponent.rel)), { recursive: true });
+      fs8.writeFileSync(path9.join(this.config.root, newComponent.rel), newComponent.content, { flag: "wx" });
+      this.catalog.invalidate();
+      this.emit({ type: "catalog" });
+    }
+    if (target) this.sources.set(`file:${target}`, after);
+    else this.sources.set(cmd.canvas, after);
+    fs8.writeFileSync(file, after);
+    const newDoc = this.doc(cmd.canvas);
+    this.record(cmd.canvas, label, actor, before, after, ids, target ?? void 0, touchedFrames(cmd, ids, view, newDoc));
+    if (renamedFrame) {
+      const now = newDoc.frames[renamedFrame.path[0]];
+      if (now && now.frameName !== renamedFrame.frameName) {
+        this.comments.renameFrame(cmd.canvas, renamedFrame.frameName, now.frameName);
+        this.emit({ type: "comments", canvas: cmd.canvas });
+      }
+    }
+    this.emit({ type: "doc", canvas: cmd.canvas, doc: newDoc });
+    if (target) {
+      for (const c of this.canvasesLinking(target)) if (c !== cmd.canvas) this.emit({ type: "doc", canvas: c, doc: this.doc(c) });
+    }
+    return { doc: newDoc, ids, label };
+  }
+  /**
+   * Linked frames: a frame passed as a parent means the page's root element,
+   * and view-only pages refuse edits on their layers.
+   */
+  routeLinked(cmd, view) {
+    const viewOnly = (frame) => new EditError(`"${frame.frameName}" is view only: ${frame.link?.reason ?? "its page can't be edited from the canvas."}`);
+    if ("parent" in cmd && cmd.parent && !fileOfId(cmd.parent)) {
+      const f = findFrame(view, cmd.parent);
+      if (f?.link) {
+        if (!f.link.editable) throw viewOnly(f);
+        const src = fs8.readFileSync(path9.join(this.config.root, f.link.page), "utf8");
+        if (f.link.kind === "component") {
+          const own = parseModuleDoc(f.link.page, src)?.frames.find((x) => x.frameName === f.link.route);
+          if (!own) throw viewOnly(f);
+          cmd = { ...cmd, parent: own.children[0].id };
+        } else {
+          const pageDoc = parseSourceDoc(f.link.page, src, false);
+          if (!pageDoc) throw viewOnly(f);
+          cmd = { ...cmd, parent: pageDoc.frames[0].children[0].id };
+        }
+      }
+    }
+    const refs = nodeRefs(cmd);
+    for (const ref of refs) {
+      if (fileOfId(ref)) continue;
+      const hit = findNode(view, ref);
+      if (hit && hit.frame.link && hit.node !== hit.frame) throw viewOnly(hit.frame);
+    }
+    return cmd;
+  }
+  /** The page/layout file the command's layers live in, or null for the canvas. */
+  targetOf(cmd) {
+    const refs = nodeRefs(cmd);
+    const files = new Set(refs.map(fileOfId));
+    if (files.size > 1) {
+      const names = [...files].map((f) => f ? path9.basename(f) : "the canvas");
+      throw new EditError(`These layers live in different files (${names.join(", ")}). Edit them one file at a time.`);
+    }
+    return [...files][0] ?? null;
+  }
+  apply(ed, cmd, rel) {
+    const doc = ed.doc;
+    const guard = (node, verb) => {
+      if (doc.canvasNode) return;
+      if (node.path.length <= 2) throw new EditError(`Can't ${verb} the root element of ${path9.basename(rel)}.`);
+      if (node.kind === "expression" && node.name.trim() === "children" && /^layout\.[jt]sx?$/.test(path9.basename(rel))) throw new EditError(`Can't ${verb} the {children} slot of ${path9.basename(rel)}: that's where the page renders.`);
+    };
+    const literalOnly = (node, key) => {
+      const v = node.props[key];
+      if (!doc.canvasNode && v?.kind === "expression") throw new EditError(`${key} on ${node.name} is computed in code ({${short(v.code, 50)}}). Edit it in ${path9.basename(rel)}, or ask your agent.`);
+    };
+    switch (cmd.op) {
+      case "set_props": {
+        const { node } = ed.node(cmd.id);
+        for (const k of Object.keys(cmd.props)) literalOnly(node, k);
+        for (const [k, v] of Object.entries(cmd.props)) ed.setProp(node, k, v);
+        const entries = Object.entries(cmd.props);
+        if (entries.length === 1) {
+          const [k, v] = entries[0];
+          return v === null ? `Removed ${k} from ${node.name}` : `Set ${k} to ${short(JSON.stringify(v).replace(/^"|"$/g, ""))} on ${node.name}`;
+        }
+        return `Set ${entries.map(([k]) => k).join(", ")} on ${node.name}`;
+      }
+      case "set_text": {
+        const { node, parent } = ed.node(cmd.id);
+        ed.setText(node, cmd.text);
+        const owner = node.kind === "text" ? parent?.name : node.name;
+        return `Changed ${owner && !("frameName" in (parent ?? {})) ? `${owner} ` : ""}text to \u201C${short(cmd.text)}\u201D`;
+      }
+      case "set_class": {
+        const { node } = ed.node(cmd.id);
+        const next = cmd.className.trim() ? cmd.className.trim().replace(/\s+/g, " ") : null;
+        literalOnly(node, "className");
+        ed.setProp(node, "className", next);
+        const old = node.props.className?.kind === "string" ? node.props.className.value.split(/\s+/).filter(Boolean) : [];
+        const now = next?.split(" ") ?? [];
+        const added = now.filter((c) => !old.includes(c));
+        const removed = old.filter((c) => !now.includes(c));
+        const diff = [...added.map((c) => `+${short(c, 28)}`), ...removed.map((c) => `-${short(c, 28)}`)];
+        return diff.length ? `Restyled ${node.name} (${diff.slice(0, 3).join(" ")}${diff.length > 3 ? ` and ${diff.length - 3} more` : ""})` : `Restyled ${node.name}`;
+      }
+      case "insert_jsx": {
+        const parent = ed.container(cmd.parent);
+        parseJsx(cmd.jsx);
+        this.autoImport(ed, rel, cmd.jsx);
+        ed.insertChild(parent, cmd.index, cmd.jsx.trim());
+        const names = componentNamesIn(cmd.jsx);
+        return `Inserted ${names[0] ?? "element"}${names.length > 1 ? ` +${names.length - 1}` : ""}`;
+      }
+      case "insert_component": {
+        const parent = ed.container(cmd.parent);
+        const spec = this.catalog.get(cmd.component);
+        if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
+        const jsx = componentJsx(spec, cmd.props, cmd.text);
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.insertChild(parent, cmd.index, jsx);
+        return `Inserted ${spec.name}`;
+      }
+      case "replace": {
+        const { node } = ed.node(cmd.id);
+        parseJsx(cmd.jsx);
+        this.autoImport(ed, rel, cmd.jsx);
+        ed.replace(node, cmd.jsx.trim());
+        return `Replaced ${node.name}`;
+      }
+      case "duplicate": {
+        const nodes = cmd.ids.map((id) => ed.node(id));
+        for (const { node } of nodes) guard(node, "duplicate");
+        for (const { node } of nodes) ed.duplicate(node);
+        return nodes.length === 1 ? `Duplicated ${nodes[0].node.kind === "component" && "frameName" in nodes[0].node ? "frame" : nodes[0].node.name}` : `Duplicated ${nodes.length} layers`;
+      }
+      case "delete": {
+        const nodes = cmd.ids.map((id) => ed.node(id).node);
+        const roots = nodes.filter((n) => !nodes.some((o) => o !== n && n.start >= o.start && n.end <= o.end));
+        for (const n of roots) guard(n, "delete");
+        for (const n of roots) ed.remove(n);
+        return roots.length === 1 ? `Deleted ${"frameName" in roots[0] ? `frame ${roots[0].frameName}` : roots[0].name}` : `Deleted ${roots.length} layers`;
+      }
+      case "move": {
+        const { node } = ed.node(cmd.id);
+        guard(node, "move");
+        const target = ed.container(cmd.parent);
+        ed.move(node, target, cmd.index);
+        return `Moved ${node.name}`;
+      }
+      case "reorder": {
+        const { node, parent } = ed.node(cmd.id);
+        if (!parent) throw new EditError("Frames are positioned with x/y, not reordered.");
+        guard(node, "move");
+        const siblings = parent.children;
+        const i = siblings.findIndex((c) => c.id === node.id);
+        const j = Math.max(0, Math.min(siblings.length - 1, i + cmd.delta));
+        if (i === j) return `Moved ${node.name}`;
+        ed.move(node, parent, j);
+        return `Moved ${node.name} ${cmd.delta < 0 ? "up" : "down"}`;
+      }
+      case "wrap": {
+        const nodes = cmd.ids.map((id) => ed.node(id).node);
+        for (const n of nodes) guard(n, "wrap");
+        const cls = cmd.className ?? "flex flex-col gap-2";
+        ed.wrap(nodes, `<div className="${cls}">`, "</div>");
+        return nodes.length === 1 ? `Wrapped ${nodes[0].name} in auto layout` : `Wrapped ${nodes.length} layers in auto layout`;
+      }
+      case "create_frame": {
+        const device = findDevice(cmd.device);
+        if (cmd.device && !device) throw new EditError(`Unknown device "${cmd.device}". Devices: ${DEVICES.map((d) => d.id).join(", ")}`);
+        const name = uniqueFrameName(doc, cmd.name ?? device?.name ?? "Frame");
+        const right = doc.frames.reduce((m, f) => Math.max(m, f.x + f.width), -80);
+        const top = doc.frames.length ? Math.min(...doc.frames.map((f) => f.y)) : 0;
+        if (cmd.jsx) {
+          parseJsx(cmd.jsx);
+          this.autoImport(ed, rel, cmd.jsx);
+        }
+        ed.insertFrame(
+          frameCode({
+            name,
+            x: cmd.x ?? right + 80,
+            y: cmd.y ?? top,
+            width: cmd.width ?? device?.width ?? 1024,
+            height: cmd.height !== void 0 ? cmd.height : device?.height ?? null,
+            theme: cmd.theme ?? null,
+            device: device?.id ?? null,
+            body: cmd.jsx?.trim()
+          })
+        );
+        return `Created frame ${name}`;
+      }
+      case "update_frame": {
+        const f = ed.frame(cmd.frame);
+        const changes = [];
+        if (cmd.name !== void 0) {
+          ed.setProp(f, "name", uniqueFrameName(doc, cmd.name, f.frameName));
+          changes.push("name");
+        }
+        for (const k of ["x", "y", "width"]) {
+          if (cmd[k] !== void 0) {
+            ed.setProp(f, k, Math.round(cmd[k]));
+            changes.push(k);
+          }
+        }
+        if (cmd.height !== void 0) {
+          ed.setProp(f, "height", cmd.height === null ? null : Math.round(cmd.height));
+          changes.push("height");
+        }
+        if (cmd.theme !== void 0) {
+          ed.setProp(f, "theme", cmd.theme);
+          changes.push("theme");
+        }
+        if (cmd.device !== void 0) {
+          const device = findDevice(cmd.device);
+          if (cmd.device && !device) throw new EditError(`Unknown device "${cmd.device}".`);
+          ed.setProp(f, "device", device?.id ?? null);
+          if (device && cmd.width === void 0) ed.setProp(f, "width", device.width);
+          if (device && cmd.height === void 0) ed.setProp(f, "height", device.height);
+          changes.push("device");
+        }
+        ed.selectPaths.push(f.path);
+        if (changes.length === 2 && changes.includes("x") && changes.includes("y")) return `Moved frame ${f.frameName}`;
+        if (changes.length === 1 && (changes[0] === "width" || changes[0] === "height")) return `Resized frame ${f.frameName}`;
+        if (changes.length === 1 && changes[0] === "device") return cmd.device ? `Set ${f.frameName} to ${findDevice(cmd.device).name}` : `Removed device from ${f.frameName}`;
+        return `Updated frame ${f.frameName}`;
+      }
+      case "add_background": {
+        const spec = this.catalog.get(cmd.component);
+        if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
+        let parent = ed.container(cmd.parent);
+        if ("frameName" in parent) {
+          const kids = parent.children.filter((c) => c.kind !== "text");
+          if (kids.length === 1 && kids[0].kind === "element") parent = kids[0];
+        }
+        const preset = cmd.preset ? spec.presets?.find((p) => p.name.toLowerCase() === cmd.preset.toLowerCase()) : void 0;
+        if (cmd.preset && !preset) throw new EditError(`${spec.name} has no preset "${cmd.preset}". Presets: ${spec.presets?.map((p) => p.name).join(", ") || "none"}`);
+        const props = { className: "pointer-events-none absolute inset-0 -z-10 h-full w-full", ...preset ? presetDiff(spec, preset.props) : {} };
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        if (parent.kind === "element") {
+          const cls = parent.props.className;
+          if (cls === void 0 || cls.kind === "string") {
+            const tokens = new Set((cls?.kind === "string" ? cls.value : "").split(/\s+/).filter(Boolean));
+            const wanted = ["relative", "isolate"].filter((t) => !tokens.has(t) && !(t === "relative" && [...tokens].some((x) => /^(absolute|fixed|sticky)$/.test(x))));
+            if (wanted.length) ed.setProp(parent, "className", [...wanted, ...tokens].join(" "));
+          }
+        }
+        ed.insertChild(parent, 0, componentJsx(spec, props));
+        return `Added ${spec.name} background`;
+      }
+      case "apply_preset": {
+        const { node } = ed.node(cmd.id);
+        const spec = this.catalog.get(node.name);
+        const preset = spec?.presets?.find((p) => p.name.toLowerCase() === cmd.preset.toLowerCase());
+        if (!spec || !preset) throw new EditError(`No preset "${cmd.preset}" for ${node.name}. Presets: ${spec?.presets?.map((p) => p.name).join(", ") || "none"}`);
+        const diff = presetDiff(spec, preset.props);
+        const next = {};
+        for (const key of Object.keys(preset.props)) next[key] = key in diff ? diff[key] : null;
+        for (const [k, v] of Object.entries(next)) if (v !== null || node.props[k] !== void 0) ed.setProp(node, k, v);
+        ed.selectPaths.push(node.path);
+        return `Applied ${preset.name} preset to ${spec.name}`;
+      }
+      case "import_route": {
+        const built = this.pending;
+        this.pending = null;
+        for (const stmt of built.imports) ed.addImportStatement(stmt);
+        const right = doc.frames.reduce((m, f) => Math.max(m, f.x + f.width), -80);
+        const top = doc.frames.length ? Math.min(...doc.frames.map((f) => f.y)) : 0;
+        const name = uniqueFrameName(doc, cmd.name ?? (built.route === "/" ? "Home" : built.route.split("/").filter(Boolean).map((p) => p.replace(/^./, (c) => c.toUpperCase())).join(" / ")));
+        ed.insertFrame(frameCode({ name, x: cmd.x ?? right + 80, y: cmd.y ?? top, width: cmd.width ?? 1440, height: null, page: built.page ?? void 0, body: built.jsx }));
+        return built.mode === "linked" ? `Linked ${built.route}` : built.mode === "inline" ? `Copied ${built.route} as layers` : `Copied ${built.route}`;
+      }
+      case "explore_copy": {
+        const built = this.pending;
+        this.pending = null;
+        const f = built.frame;
+        for (const stmt of built.imports) ed.addImportStatement(stmt);
+        const h = (fr) => fr.height ?? 2e3;
+        const row = doc.frames.filter((o) => o.y < f.y + h(f) && o.y + h(o) > f.y);
+        const right = Math.max(...row.map((o) => o.x + o.width), f.x + f.width);
+        const name = uniqueFrameName(doc, cmd.name ?? `${f.frameName} exploration`);
+        ed.insertFrame(frameCode({ name, x: right + 80, y: f.y, width: f.width, height: f.height, theme: f.theme, device: f.device, from: f.page, body: built.jsx }));
+        return `Explored a copy of ${f.frameName}`;
+      }
+      case "apply_to_page": {
+        const plan = this.pending;
+        this.pending = null;
+        for (const stmt of plan.imports) ed.addImportStatement(stmt);
+        ed.replace(doc.frames[0].children[0], plan.jsx);
+        return `Applied ${plan.frame.frameName} to ${plan.page}`;
+      }
+      case "add_animation": {
+        const { node, parent } = ed.node(cmd.id);
+        if ("frameName" in node) throw new EditError("Animate a layer inside the frame, not the frame itself.");
+        if (node.kind === "expression") throw new EditError("Expressions can't be animated; pick the element around it.");
+        const files = this.motion ?? motionFiles(this.config);
+        const props = {};
+        if (cmd.effect !== void 0) props.effect = cmd.effect;
+        for (const k of ["delay", "duration", "stagger"]) if (cmd[k] !== void 0 && !(cmd.kind === "reveal" && k === "stagger")) props[k] = Math.round(cmd[k] * 100) / 100;
+        if (cmd.once === false) props.once = false;
+        const attrs = (defaults) => Object.entries({ ...defaults, ...props }).map(([k, v]) => ` ${attrCode(k, v)}`).join("");
+        const solid = (n) => n.children.filter((c) => !(c.kind === "text" && !c.text?.trim()));
+        if (cmd.kind === "reveal") {
+          const wrapper2 = node.name === "Reveal" ? node : parent?.name === "Reveal" && solid(parent).length === 1 ? parent : null;
+          if (wrapper2) {
+            for (const [k, v] of Object.entries(props)) ed.setProp(wrapper2, k, v);
+            ed.selectPaths.push(node.path);
+            return `Updated the reveal of ${wrapper2 === node ? "layer" : node.name}`;
+          }
+          ed.ensureImport("Reveal", importSpecifier(this.config.root, rel, files.reveal));
+          ed.wrap([node], `<Reveal${attrs({ effect: "fade-up" })}>`, "</Reveal>");
+          ed.selectPaths.length = 0;
+          ed.selectPaths.push([...node.path, 0]);
+          return `Added a ${props.effect ?? "fade-up"} reveal to ${node.kind === "text" ? "text" : node.name}`;
+        }
+        const kids = solid(node);
+        const wrapper = node.name === "TextAnimate" ? node : kids.length === 1 && kids[0].name === "TextAnimate" ? kids[0] : parent?.name === "TextAnimate" ? parent : null;
+        if (wrapper) {
+          for (const [k, v] of Object.entries(props)) ed.setProp(wrapper, k, v);
+          ed.selectPaths.push(node.path);
+          return "Updated the text animation";
+        }
+        const hasText = (n) => n.kind === "text" || n.children.some(hasText);
+        if (!hasText(node)) throw new EditError(`${node.name} has no text of its own here. Text inside a component (like <${node.name} />) lives in its file: animate a layer whose text is in this page.`);
+        ed.ensureImport("TextAnimate", importSpecifier(this.config.root, rel, files.text));
+        const open = `<TextAnimate${attrs({ effect: "words" })}>`;
+        if (node.kind === "text") ed.wrapInline([node], open, "</TextAnimate>");
+        else ed.wrapInline(node.children, open, "</TextAnimate>");
+        ed.selectPaths.length = 0;
+        ed.selectPaths.push(node.kind === "text" ? [...node.path, 0] : node.path);
+        return `Added a ${props.effect ?? "words"} text animation to ${node.kind === "text" ? "text" : node.name}`;
+      }
+      case "remove_animation": {
+        const { node, parent } = ed.node(cmd.id);
+        const name = cmd.kind === "reveal" ? "Reveal" : "TextAnimate";
+        const kids = node.children.filter((c) => !(c.kind === "text" && !c.text?.trim()));
+        const wrapper = node.name === name ? node : parent?.name === name ? parent : kids.length === 1 && kids[0].name === name ? kids[0] : null;
+        if (!wrapper) throw new EditError(`${node.name} has no ${cmd.kind === "reveal" ? "reveal" : "text animation"}.`);
+        ed.unwrap(wrapper);
+        ed.selectPaths.length = 0;
+        ed.selectPaths.push(wrapper === kids[0] ? node.path : wrapper.path);
+        return cmd.kind === "reveal" ? "Removed the reveal" : "Removed the text animation";
+      }
+      case "create_component": {
+        const made = this.pending;
+        this.pending = null;
+        ed.ensureImport(made.name, importSpecifier(this.config.root, rel, made.file));
+        if (cmd.from) {
+          const { node } = ed.node(cmd.from);
+          ed.replace(node, `<${made.name} />`);
+          return `Made ${node.name} a component: ${made.name}`;
+        }
+        if (!cmd.parent) return `Created component ${made.name}`;
+        ed.insertChild(ed.container(cmd.parent), cmd.index, `<${made.name} />`);
+        return `Created component ${made.name}`;
+      }
+      case "add_component_frame": {
+        const spec = this.catalog.get(cmd.component);
+        if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
+        if (spec.library) throw new EditError(`${spec.name} comes from ${spec.library}: it can't be edited here.`);
+        const existing = doc.frames.find((f) => f.component === `${spec.file}#${spec.name}`);
+        if (existing) {
+          ed.selectPaths.push(existing.path);
+          return `Opened ${spec.name}`;
+        }
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        const right = doc.frames.reduce((m, f) => Math.max(m, f.x + f.width), -80);
+        const top = doc.frames.length ? Math.min(...doc.frames.map((f) => f.y)) : 0;
+        ed.insertFrame(
+          frameCode({
+            name: uniqueFrameName(doc, spec.name),
+            x: cmd.x ?? right + 80,
+            y: cmd.y ?? top,
+            width: cmd.width ?? 640,
+            component: `${spec.file}#${spec.name}`,
+            body: `<div className="p-10">
+  ${componentJsx(spec)}
+</div>`
+          })
+        );
+        return `Opened main component ${spec.name}`;
+      }
+      case "create_variants": {
+        const spec = this.catalog.get(cmd.component);
+        if (!spec) throw new EditError(`Unknown component "${cmd.component}".`);
+        const prop = spec.props.find((p) => p.name === cmd.prop);
+        if (!prop) throw new EditError(`${spec.name} has no prop "${cmd.prop}".`);
+        const values = prop.type === "enum" ? prop.options : prop.type === "boolean" ? [false, true] : [];
+        if (!values.length) throw new EditError(`Prop "${cmd.prop}" is ${prop.typeText}; variants need a union of string literals or a boolean.`);
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        const label = (v) => typeof v === "string" ? v[0].toUpperCase() + v.slice(1) : `${prop.name}: ${v}`;
+        const rows = indentBlock(values.map((v) => componentJsx(spec, { ...cmd.props, [prop.name]: v }, spec.acceptsChildren ? label(v) : void 0)).join("\n"));
+        const right = doc.frames.reduce((m, f) => Math.max(m, f.x + f.width), -80);
+        const name = uniqueFrameName(doc, `${spec.name} \xB7 ${prop.name}`);
+        ed.insertFrame(frameCode({ name, x: cmd.x ?? right + 80, y: cmd.y ?? 0, width: 360, body: `<div className="flex flex-col gap-3 p-4">
+${rows}
+</div>` }));
+        return `Created ${spec.name} ${prop.name} variants`;
+      }
+    }
+  }
+  autoImport(ed, rel, jsx) {
+    const known = /* @__PURE__ */ new Set(["Frame", "Canvas", "Fragment"]);
+    for (const name of componentNamesIn(jsx)) {
+      if (known.has(name) || ed.doc.declared.includes(name)) continue;
+      if (ed.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) continue;
+      const spec = this.catalog.get(name);
+      if (!spec) throw new EditError(`Unknown component <${name}>. It is not imported in the canvas and not in the component catalog. Use list_components.`);
+      ed.ensureImport(name, importSpecifier(this.config.root, rel, spec.file));
+    }
+  }
+  motion = null;
+  /** work resolved (async) in exec before the synchronous apply */
+  pending = null;
+  cleanCache = /* @__PURE__ */ new Map();
+  async isPrettierClean(source, file) {
+    const hit = this.cleanCache.get(source);
+    if (hit !== void 0) return hit;
+    let clean = false;
+    try {
+      clean = await this.format(source, file) === source;
+    } catch {
+      clean = false;
+    }
+    if (this.cleanCache.size > 20) this.cleanCache.clear();
+    this.cleanCache.set(source, clean);
+    return clean;
+  }
+  /** Pretty-prints an agent's JSX snippet so it lands in the file readable. */
+  async formatSnippet(jsx) {
+    try {
+      this.prettier ??= require2("prettier");
+      const out = await this.prettier.format(`<>${jsx.trim()}</>`, { parser: "typescript", printWidth: 96, semi: false });
+      const lines = out.trimEnd().replace(/^;/, "").split("\n");
+      if (lines[0] !== "<>" || lines[lines.length - 1] !== "</>") return jsx.trim();
+      return lines.slice(1, -1).map((l) => l.replace(/^ {2}/, "")).join("\n");
+    } catch {
+      return jsx.trim();
+    }
+  }
+  prettier = null;
+  async format(source, file) {
+    try {
+      this.prettier ??= require2("prettier");
+      const options = await this.prettier.resolveConfig(file) ?? {};
+      return await this.prettier.format(source, { printWidth: 100, ...options, filepath: file, parser: "typescript" });
+    } catch (err) {
+      throw new EditError(`Edit produced invalid code: ${err.message.split("\n")[0]}`);
+    }
+  }
+  // ---------- history ----------
+  record(canvas, label, actor, before, after, ids, file, frames) {
+    const entry = { id: ++this.seq, canvas, label, actor, at: Date.now(), before, after, ids, ...file ? { file } : {}, ...frames?.length ? { frames } : {} };
+    const stack = this.undoStacks.get(canvas) ?? [];
+    stack.push(entry);
+    if (stack.length > 200) stack.shift();
+    this.undoStacks.set(canvas, stack);
+    this.redoStacks.set(canvas, []);
+    this.feed.push(entry);
+    if (this.feed.length > 300) this.feed.shift();
+    this.emit({ type: "change", entry: publicEntry(entry), ids });
+    this.emitHistory(canvas);
+  }
+  /** Changes still in effect (not undone) on a canvas since a time, oldest first. */
+  changesSince(canvas, since) {
+    return (this.undoStacks.get(canvas) ?? []).filter((e) => e.at > since).map(publicEntry);
+  }
+  historyState(canvas) {
+    return { undo: this.undoStacks.get(canvas)?.length ?? 0, redo: this.redoStacks.get(canvas)?.length ?? 0 };
+  }
+  emitHistory(canvas) {
+    this.emit({ type: "history", canvas, ...this.historyState(canvas) });
+  }
+  undo(canvas, actor) {
+    return this.step(canvas, actor, "undo");
+  }
+  redo(canvas, actor) {
+    return this.step(canvas, actor, "redo");
+  }
+  step(canvas, actor, dir) {
+    const job = this.queue.then(() => {
+      const from = dir === "undo" ? this.undoStacks : this.redoStacks;
+      const to = dir === "undo" ? this.redoStacks : this.undoStacks;
+      const stack = from.get(canvas) ?? [];
+      const entry = stack[stack.length - 1];
+      if (!entry) throw new EditError(`Nothing to ${dir}.`);
+      if (dir === "undo" && entry.before === "") throw new EditError("Cannot undo creating the canvas; delete the file instead.");
+      stack.pop();
+      const file = entry.file ? path9.join(this.config.root, entry.file) : this.file(canvas);
+      const current = entry.file ? fs8.readFileSync(file, "utf8") : this.read(canvas);
+      const expected = dir === "undo" ? entry.after : entry.before;
+      if (current !== expected) {
+        stack.push(entry);
+        throw new EditError(`Cannot ${dir} "${entry.label}": ${entry.file ? path9.basename(entry.file) : "the file"} changed since.`);
+      }
+      const next = dir === "undo" ? entry.before : entry.after;
+      this.sources.set(entry.file ? `file:${entry.file}` : canvas, next);
+      fs8.writeFileSync(file, next);
+      const list = to.get(canvas) ?? [];
+      list.push(entry);
+      to.set(canvas, list);
+      const doc = this.doc(canvas);
+      this.emit({ type: "doc", canvas, doc });
+      if (entry.file) {
+        for (const c of this.canvasesLinking(entry.file)) if (c !== canvas) this.emit({ type: "doc", canvas: c, doc: this.doc(c) });
+      }
+      const label = `${dir === "undo" ? "Undid" : "Redid"} \u201C${entry.label}\u201D`;
+      const marker = { ...entry, id: ++this.seq, label, actor, at: Date.now() };
+      this.feed.push(marker);
+      this.emit({ type: "change", entry: publicEntry(marker), ids: [] });
+      this.emitHistory(canvas);
+      return { doc, label };
+    });
+    this.queue = job.catch(() => void 0);
+    return job;
+  }
+  publicFeed() {
+    return this.feed.map(publicEntry);
+  }
+  // ---------- agents ----------
+  touchAgent(session, name) {
+    const now = Date.now();
+    const existing = this.agents.get(session);
+    this.agents.set(session, { session, name, since: existing?.since ?? now, lastSeen: now });
+    for (const [id, a] of this.agents) if (id !== session && a.name === name && a.lastSeen < now - 1e3) this.agents.delete(id);
+    if (!existing || existing.name !== name || now - existing.lastSeen > 3e4) this.emit({ type: "agents", agents: [...this.agents.values()] });
+  }
+  /** Agents that went quiet for 15 minutes are shown as disconnected. */
+  pruneAgents(maxIdle = 15 * 6e4) {
+    const before = this.agents.size;
+    for (const [id, a] of this.agents) if (Date.now() - a.lastSeen > maxIdle) this.agents.delete(id);
+    if (this.agents.size !== before) this.emit({ type: "agents", agents: [...this.agents.values()] });
+  }
+  dropAgent(session) {
+    if (this.agents.delete(session)) this.emit({ type: "agents", agents: [...this.agents.values()] });
+  }
+  ensureRoute() {
+    if (!fs8.existsSync(path9.join(this.config.root, this.config.canvasDir))) {
+      fs8.mkdirSync(path9.join(this.config.root, this.config.canvasDir), { recursive: true });
+    }
+    if (!this.canvases().length) {
+      const file = canvasPath(this.config, "home");
+      const content = this.homeCanvas();
+      fs8.writeFileSync(file, content);
+      void this.format(content, file).then((pretty) => {
+        if (fs8.readFileSync(file, "utf8") !== content) return;
+        this.sources.set("home", pretty);
+        fs8.writeFileSync(file, pretty);
+      }).catch(() => {
+      });
+    }
+    return syncRoute(this.config);
+  }
+  /** First canvas of a project: its homepage as a linked frame when there is one, else the placeholder. */
+  homeCanvas() {
+    try {
+      const home = listRoutes(this.config).find((r) => r.route === "/");
+      if (!home) return STARTER_CANVAS;
+      const rel = path9.relative(this.config.root, canvasPath(this.config, "home"));
+      const empty = parseCanvas("home", rel, `import { Canvas, Frame } from "truecanvas";
+export default function C() { return <Canvas></Canvas>; }
+`);
+      const built = linkedFrameBody(this.config, empty, rel, home.file);
+      const body = built.jsx.split("\n").join("\n        ");
+      return `"use client";
+import { Canvas, Frame } from "truecanvas";
+${built.imports.join("\n")}
+
+/** Your homepage, linked to ${home.file}: editing its layers edits that file. */
+export default function HomeCanvas() {
+  return (
+    <Canvas>
+      <Frame name="Home" x={0} y={0} width={1440} page=${JSON.stringify(home.file)}>
+        ${body}
+      </Frame>
+    </Canvas>
+  );
+}
+`;
+    } catch {
+      return STARTER_CANVAS;
+    }
+  }
+  findFrameOf(canvas, ref) {
+    const doc = this.doc(canvas);
+    const frame = findFrame(doc, ref) ?? (findNode(doc, ref)?.frame ?? null);
+    if (!frame) throw new EditError(`Frame "${ref}" not found in ${canvas}. Frames: ${doc.frames.map((f) => `"${f.frameName}"`).join(", ")}`);
+    return frame;
+  }
+};
+var COMPONENTS_CANVAS = `"use client";
+import { Canvas, Frame } from "truecanvas";
+
+/** Main components: edit one here and every instance in the app follows. */
+export default function ComponentsCanvas() {
+  return <Canvas></Canvas>;
+}
+`;
+function validate(code) {
+  try {
+    parseModule(code);
+  } catch (err) {
+    throw new EditError(`Edit produced invalid code: ${err.message}`);
+  }
+  return code;
+}
+function publicEntry(e) {
+  const { before: _b, after: _a, ...rest } = e;
+  return rest;
+}
+function nodeRefs(cmd) {
+  const refs = [];
+  if ("id" in cmd && cmd.id) refs.push(cmd.id);
+  if ("ids" in cmd) refs.push(...cmd.ids);
+  if ("parent" in cmd && cmd.parent) refs.push(cmd.parent);
+  if ("from" in cmd && cmd.op === "create_component" && cmd.from) refs.push(cmd.from);
+  return refs;
+}
+function touchedFrames(cmd, ids, before, after) {
+  const out = /* @__PURE__ */ new Set();
+  const refs = nodeRefs(cmd);
+  if ("frame" in cmd && cmd.frame) refs.push(cmd.frame);
+  for (const ref of refs) {
+    const f = findFrame(before, ref) ?? findNode(before, ref)?.frame;
+    if (f) out.add(f.frameName);
+  }
+  for (const id of ids) {
+    const f = findFrame(after, id) ?? findNode(after, id)?.frame;
+    if (f) out.add(f.frameName);
+  }
+  return [...out];
+}
+var short = (s, max = 40) => s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
+function pathId(doc, p) {
+  let node = doc.frames[p[0]];
+  for (const i of p.slice(1)) node = node?.children[i];
+  return node?.id ?? null;
+}
+function touchedPaths(doc, cmd) {
+  if ("id" in cmd && cmd.id) {
+    const found = findNode(doc, cmd.id);
+    if (found) return [found.node.path];
+  }
+  return [];
+}
+function presetDiff(spec, values) {
+  const out = {};
+  for (const [k, v] of Object.entries(values)) {
+    const def = spec.props.find((p) => p.name === k)?.default;
+    if (JSON.stringify(def) !== JSON.stringify(v)) out[k] = v;
+  }
+  return out;
+}
+function uniqueFrameName(doc, wanted, current) {
+  const used = new Set(doc.frames.map((f) => f.frameName).filter((n) => n !== current));
+  if (!used.has(wanted)) return wanted;
+  for (let i = 2; ; i++) if (!used.has(`${wanted} ${i}`)) return `${wanted} ${i}`;
+}
+function componentJsx(spec, props = {}, text) {
+  const attrs = [];
+  const merged = {};
+  for (const p of spec.props) {
+    if (p.optional || p.default !== void 0 || p.name === "children") continue;
+    if (p.type === "string") merged[p.name] = p.name === "title" || p.name === "label" ? spec.name : p.name;
+    else if (p.type === "enum") merged[p.name] = p.options[0];
+    else if (p.type === "boolean") merged[p.name] = false;
+    else if (p.type === "number") merged[p.name] = 0;
+  }
+  Object.assign(merged, props);
+  for (const [k, v] of Object.entries(merged)) if (v !== null && v !== void 0) attrs.push(attrCode(k, v));
+  const open = `<${spec.name}${attrs.length ? ` ${attrs.join(" ")}` : ""}`;
+  const childText = text ?? (spec.acceptsChildren && spec.props.find((p) => p.name === "children" && !p.optional) ? spec.name : void 0);
+  return childText !== void 0 ? `${open}>${textCode(childText)}</${spec.name}>` : `${open} />`;
+}
+
+// src/core/outline.ts
+function propText(name, v) {
+  if (v.kind === "boolean") return v.value ? name : `${name}={false}`;
+  if (v.kind === "string") return `${name}=${JSON.stringify(v.value.length > 60 ? `${v.value.slice(0, 57)}\u2026` : v.value)}`;
+  if (v.kind === "number") return `${name}={${v.value}}`;
+  if (v.kind === "array") return `${name}={[${v.value.map((x) => JSON.stringify(x)).join(", ")}]}`;
+  return `${name}={${v.code.length > 40 ? `${v.code.slice(0, 37)}\u2026` : v.code}}`;
+}
+function linkText(f) {
+  if (f.link?.kind === "component") {
+    return f.link.editable ? ` MAIN COMPONENT ${f.link.route} (${f.link.page}): layer edits write to that file, every instance follows` : ` MAIN COMPONENT, unavailable: ${f.link.reason ?? ""}`;
+  }
+  if (f.link) {
+    if (!f.link.editable) return ` LINKED to ${f.link.page}, view only: ${f.link.reason ?? ""}`;
+    return ` LINKED to ${f.link.page} (route ${f.link.route}): layer edits write to ${f.link.files.join(" and ")}`;
+  }
+  if (f.from) return ` exploration of ${f.from} (apply_to_page writes it back)`;
+  return "";
+}
+function outlineDoc(doc, opts = {}) {
+  const lines = [`canvas "${doc.name}" (${doc.file})`];
+  if (doc.error) lines.push(`\u26A0 parse error: ${doc.error}`);
+  const frames = opts.frame ? doc.frames.filter((f) => f.frameName === opts.frame || f.id === opts.frame) : doc.frames;
+  for (const f of frames) {
+    lines.push(
+      `frame "${f.frameName}" [${f.id}] x=${f.x} y=${f.y} w=${f.width} h=${f.height ?? "hug"} theme=${f.theme ?? "inherit"}${linkText(f)}`
+    );
+    for (const c of f.children) outlineNode(c, 1, lines, opts.depth ?? 99);
+  }
+  if (!frames.length) lines.push("(no frames)");
+  return lines.join("\n");
+}
+function outlineNode(n, depth, lines, max) {
+  const pad = "  ".repeat(depth);
+  if (n.kind === "text") {
+    lines.push(`${pad}"${n.text}" [${n.id}]`);
+    return;
+  }
+  if (n.kind === "expression") {
+    lines.push(`${pad}{${n.name.length > 60 ? `${n.name.slice(0, 57)}\u2026` : n.name}} [${n.id}] (expression, read-only)`);
+    return;
+  }
+  const props = Object.entries(n.props).map(([k, v]) => propText(k, v));
+  if (n.spreads) props.push("{...spread}");
+  const onlyText = n.children.length === 1 && n.children[0].kind === "text";
+  const head = `${pad}<${n.name}${props.length ? ` ${props.join(" ")}` : ""}>`;
+  if (!n.children.length) {
+    lines.push(`${head.slice(0, -1)} /> [${n.id}]`);
+  } else if (onlyText) {
+    lines.push(`${head}${n.children[0].text}</${n.name}> [${n.id}]`);
+  } else if (depth >= max) {
+    lines.push(`${head}\u2026 ${n.children.length} children [${n.id}]`);
+  } else {
+    lines.push(`${head} [${n.id}]`);
+    for (const c of n.children) outlineNode(c, depth + 1, lines, max);
+  }
+}
+function describeComponent(c, verbose = false) {
+  const typeOf = (p) => {
+    if (p.type === "enum") return p.options.map((o) => JSON.stringify(o)).join(verbose ? " | " : "|");
+    if (p.type === "color") return "color string";
+    if (p.type === "colors") return "color string[]";
+    if (p.type === "number" && p.min !== void 0) return `number ${p.min}..${p.max}`;
+    return p.type === "other" || verbose ? p.typeText : p.type;
+  };
+  const where = c.library ? `from "${c.library}"` : c.file;
+  if (!verbose) {
+    const props = c.props.filter((p) => p.name !== "className" && !p.advanced).map((p) => `${p.name}${p.optional ? "?" : ""}: ${typeOf(p)}`);
+    const presets = c.presets?.length ? ` presets: ${c.presets.map((p) => p.name).join(", ")}` : "";
+    return `${c.name} (${where}) { ${props.join("; ")} }${presets}`;
+  }
+  const lines = [`${c.name} (${where})`];
+  if (c.description) lines.push(c.description);
+  for (const p of c.props) {
+    const def = p.default !== void 0 ? ` = ${JSON.stringify(p.default)}` : "";
+    lines.push(`- ${p.name}${p.optional ? "?" : ""}: ${typeOf(p)}${def}${p.advanced ? " (advanced)" : ""}${p.description ? `. ${p.description}` : ""}`);
+  }
+  if (c.presets?.length) {
+    lines.push("", "Presets (apply_preset, or copy the values):");
+    for (const p of c.presets) {
+      const diff = Object.fromEntries(Object.entries(p.props).filter(([k, v]) => JSON.stringify(c.props.find((x) => x.name === k)?.default) !== JSON.stringify(v)));
+      lines.push(`- ${p.name}: ${Object.keys(diff).length ? JSON.stringify(diff) : "(defaults)"}`);
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/core/tokens.ts
+import fs9 from "fs";
+import path10 from "path";
+import { globSync } from "tinyglobby";
+var GROUPS = [
+  ["--color-", "Colors", "bg-{name} text-{name} border-{name}"],
+  ["--font-", "Fonts", "font-{name}"],
+  ["--text-", "Text sizes", "text-{name}"],
+  ["--radius-", "Radius", "rounded-{name}"],
+  ["--shadow-", "Shadows", "shadow-{name}"],
+  ["--spacing", "Spacing", "p-*, gap-*, m-* (multiples of the base)"],
+  ["--breakpoint-", "Breakpoints", "{name}:"]
+];
+function readDesignTokens(root) {
+  const files = globSync(["**/*.css"], { cwd: root, ignore: ["**/node_modules/**", "**/.next/**", "**/dist/**", "**/out/**"], absolute: true }).slice(0, 40);
+  const found = /* @__PURE__ */ new Map();
+  const sources = [];
+  let darkVariant = null;
+  for (const file of files) {
+    const css = fs9.readFileSync(file, "utf8");
+    if (!css.includes("@theme") && !css.includes("@custom-variant")) continue;
+    sources.push(path10.relative(root, file));
+    const dv = /@custom-variant\s+dark\s*\(([^;]+)\);/.exec(css);
+    if (dv) darkVariant = dv[1].trim();
+    for (const block of css.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g)) {
+      for (const decl of block[1].matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+        const [, name, value] = decl;
+        const group = GROUPS.find(([prefix]) => name.startsWith(prefix));
+        if (!group) continue;
+        const key = group[1];
+        if (!found.has(key)) found.set(key, /* @__PURE__ */ new Map());
+        const short2 = group[0] === "--spacing" ? name : name.slice(group[0].length);
+        if (short2.includes("*")) continue;
+        found.get(key).set(short2, value.trim());
+      }
+    }
+  }
+  if (!found.size) return "No Tailwind @theme tokens found. Use Tailwind's default palette (e.g. bg-white, text-zinc-500).";
+  const lines = [`Design tokens from ${sources.join(", ")}. Prefer these over Tailwind defaults.`];
+  for (const [prefix, title, usage] of GROUPS) {
+    const entries = found.get(title);
+    if (!entries?.size) continue;
+    lines.push("", `${title} (use as ${usage}):`);
+    const names = [...entries.keys()];
+    if (title === "Colors") lines.push(names.join(", "));
+    else lines.push(names.map((n) => `${n} (${entries.get(n)})`).join(", "));
+    void prefix;
+  }
+  if (darkVariant) lines.push("", `Dark mode: dark: variant \u2192 ${darkVariant}. Tokens already adapt; avoid hard-coded colors.`);
+  return lines.join("\n");
+}
+function readTokenData(root) {
+  const files = globSync(["**/*.css"], { cwd: root, ignore: ["**/node_modules/**", "**/.next/**", "**/dist/**", "**/out/**"], absolute: true }).slice(0, 40);
+  const theme = /* @__PURE__ */ new Map();
+  const lightVars = /* @__PURE__ */ new Map();
+  const darkVars = /* @__PURE__ */ new Map();
+  const decls = (body, into) => {
+    for (const m of body.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) into.set(m[1], m[2].trim());
+  };
+  for (const file of files) {
+    const css = fs9.readFileSync(file, "utf8");
+    for (const block of css.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g)) decls(block[1], theme);
+    for (const block of css.matchAll(/(?:^|\n)\s*:root\s*\{([\s\S]*?)\n\}/g)) decls(block[1], lightVars);
+    for (const block of css.matchAll(/(?:^|\n)\s*(?:\.dark|\[data-theme=["']?dark["']?\]|:root\.dark)\s*\{([\s\S]*?)\n\}/g)) decls(block[1], darkVars);
+  }
+  const resolve = (value, vars, depth = 0) => {
+    const m = /^var\((--[\w-]+)(?:,\s*([^)]+))?\)$/.exec(value.trim());
+    if (!m || depth > 5) return value;
+    const next = vars.get(m[1]) ?? lightVars.get(m[1]) ?? m[2];
+    return next ? resolve(next, vars, depth + 1) : value;
+  };
+  const pick = (prefix) => [...theme.keys()].filter((k) => k.startsWith(prefix) && !k.includes("*")).map((k) => k.slice(prefix.length));
+  const colors = pick("--color-").map((name) => {
+    const raw = theme.get(`--color-${name}`);
+    const light = resolve(raw, lightVars);
+    const dark = resolve(raw, darkVars);
+    return { name, light, dark: dark !== light ? dark : null };
+  });
+  const custom = (prefix, defaults) => {
+    const names = pick(prefix).filter((n) => !n.includes("--"));
+    return names.length ? [.../* @__PURE__ */ new Set([...defaults, ...names])] : defaults;
+  };
+  return {
+    colors,
+    radius: custom("--radius-", ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"]),
+    shadows: custom("--shadow-", ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]),
+    textSizes: custom("--text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"]),
+    fonts: custom("--font-", ["sans", "serif", "mono"])
+  };
+}
+
+// src/core/compare.ts
+import fs10 from "fs";
+import path11 from "path";
+var COMPARE_PREFIX = "__compare__";
+function writeCompare(config, canvas, source, files = {}, as = canvas) {
+  const routeDir = path11.join(config.root, config.appDir, "truecanvas");
+  const dir = path11.join(routeDir, "compare");
+  fs10.mkdirSync(dir, { recursive: true });
+  const canvasDir = path11.join(config.root, config.canvasDir);
+  const canvasRel = path11.join(config.canvasDir, `${canvas}.canvas.tsx`);
+  const swapped = /* @__PURE__ */ new Map();
+  for (const [rel, content] of Object.entries(files)) {
+    const ext = path11.extname(rel);
+    const name = `${as}--${rel.slice(0, -ext.length).replace(/[^\w.-]+/g, "_")}${ext}`;
+    const original = path11.join(config.root, rel);
+    fs10.writeFileSync(path11.join(dir, name), rewriteImports(content, (spec) => spec.startsWith(".") ? relativeSpec(dir, path11.resolve(path11.dirname(original), spec)) : spec));
+    swapped.set(importSpecifier(config.root, canvasRel, rel), `./${name.slice(0, -ext.length)}`);
+  }
+  const out = rewriteImports(source, (spec) => swapped.get(spec) ?? (spec.startsWith(".") ? relativeSpec(dir, path11.resolve(canvasDir, spec)) : spec));
+  fs10.writeFileSync(path11.join(dir, `${as}.canvas.tsx`), out);
+  syncRoute(config);
+  return `${COMPARE_PREFIX}${as}`;
+}
+function relativeSpec(fromDir, target) {
+  const next = path11.relative(fromDir, target);
+  return next.startsWith(".") ? next : `./${next}`;
+}
+function rewriteImports(source, map) {
+  const doc = parseCanvas("", "", source);
+  let out = source;
+  for (const imp of [...doc.imports].sort((a, b) => b.start - a.start)) {
+    const next = map(imp.source);
+    if (next === imp.source) continue;
+    const stmt = out.slice(imp.start, imp.end).replace(JSON.stringify(imp.source), JSON.stringify(next)).replace(`'${imp.source}'`, `'${next}'`);
+    out = out.slice(0, imp.start) + stmt + out.slice(imp.end);
+  }
+  return out;
+}
+function clearCompare(config, canvas) {
+  const dir = path11.join(config.root, config.appDir, "truecanvas", "compare");
+  if (!fs10.existsSync(dir)) return;
+  for (const f of fs10.readdirSync(dir)) if (!canvas || f === `${canvas}.canvas.tsx` || f.startsWith(`${canvas}--`)) fs10.rmSync(path11.join(dir, f));
+  syncRoute(config);
+}
+function frameChanges(before, after) {
+  const a = parseCanvas("", "", before);
+  const b = parseCanvas("", "", after);
+  const norm = (src, start, end) => src.slice(start, end).replace(/\s+/g, " ").replace(/\s?(x|y)=\{-?\d+\}/g, "");
+  const out = {};
+  for (const f of b.frames) {
+    const old = a.frames.find((x) => x.frameName === f.frameName);
+    out[f.frameName] = !old ? "added" : norm(before, old.start, old.end) === norm(after, f.start, f.end) ? "same" : "changed";
+  }
+  for (const f of a.frames) if (!(f.frameName in out)) out[f.frameName] = "removed";
+  return out;
+}
+
+export {
+  loadConfig,
+  parseModule,
+  idOf,
+  walk,
+  parseCanvas,
+  allNodes,
+  findNode,
+  findFrame,
+  findByPath,
+  EditError,
+  attrCode,
+  textCode,
+  CanvasEditor,
+  listRoutes,
+  layoutFiles,
+  componentsDir,
+  DEVICES,
+  findDevice,
+  Comments,
+  Git,
+  syncComponentRegistry,
+  Workspace,
+  componentJsx,
+  outlineDoc,
+  describeComponent,
+  readDesignTokens,
+  readTokenData,
+  writeCompare,
+  clearCompare,
+  frameChanges
+};