truecanvas 0.5.0 → 0.6.1

package/dist/chunk-D565QDII.js

@@ -0,0 +1,814 @@
+import {
+  idOf,
+  isComponentName,
+  jsxName,
+  parseModule,
+  walk
+} from "./chunk-LKFOLM3L.js";
+
+// 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 path2 = [frameIndex++];
+    reindex(child, path2);
+    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] : []],
+      bindings: typeOnly ? [] : named.filter((s) => s.importKind !== "type").map((s) => ({ imported: s.imported.type === "Identifier" ? s.imported.name : s.imported.value, local: s.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, path2) {
+  node.path = path2;
+  node.children.forEach((c, i) => reindex(c, [...path2, 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, path2) {
+  const children = [];
+  for (const child of el.children) {
+    const built = buildChild(child, source, [...path2, 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: path2,
+      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: path2,
+    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, path2) {
+  if (child.type === "JSXElement" || child.type === "JSXFragment") return buildNode(child, source, path2);
+  if (child.type === "JSXText") {
+    const text = child.value.replace(/\s+/g, " ").trim();
+    if (!text) return null;
+    return leaf("text", text, child, path2, { 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, path2, { 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, path2, { text });
+    }
+    return leaf("expression", source.slice(expr.start, expr.end), child, path2, {});
+  }
+  if (child.type === "JSXSpreadChild") return leaf("expression", source.slice(child.start, child.end), child, path2, {});
+  return null;
+}
+function leaf(kind, name, node, path2, 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: path2,
+    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, path2) {
+  if (!path2.length) return null;
+  let node = doc.frames[path2[0]];
+  for (const i of path2.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 {
+      const comments = this.source.slice(node.openEnd, node.closeStart).match(/\{\s*\/\*[\s\S]*?\*\/\s*\}/g) ?? [];
+      this.s.overwrite(node.openEnd, node.closeStart, comments.join("") + 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`. Lines that start
+   * inside a multi-line string or template literal are content, not code: they
+   * are kept exactly as written.
+   */
+  shift(code, indent) {
+    const trimmed = code.trim();
+    const lines = trimmed.split("\n");
+    const frozen = literalLines(trimmed);
+    const free = (i) => !frozen.has(i);
+    const rest = lines.slice(1).filter((l, i) => l.trim() && free(i + 1));
+    const base = rest.length ? Math.min(...rest.map((l) => /^[ \t]*/.exec(l)[0].length)) : 0;
+    const relative = lines.slice(1).map((l, i) => free(i + 1) ? l.trim() ? l.slice(base) : "" : l);
+    const steps = relative.filter((_, i) => free(i + 1)).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, i) => !free(i + 1) ? 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 });
+    }
+    const marked = withMarker(code.trim(), node);
+    this.s.appendLeft(this.contentEnd(node), `
+${this.lineIndent(node.start)}${marked}`);
+    if (marked === code.trim()) {
+      const path2 = [...node.path];
+      path2[path2.length - 1] += 1;
+      this.selectPaths.push(path2);
+    }
+  }
+  move(node, target, index) {
+    if (isInside(target, node)) throw new EditError("Cannot move a node into itself.");
+    const code = withMarker(this.source.slice(this.contentStart(node), this.contentEnd(node)), node);
+    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 = node.selfClosing ? "" : this.source.slice(node.openEnd, node.closeStart).trim();
+    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, isDefault = false) {
+    if (this.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) return;
+    if (this.added.has(name)) return;
+    this.added.add(name);
+    if (isDefault) {
+      this.addImportLine(`import ${name} from ${JSON.stringify(from)};`);
+      return;
+    }
+    const same = this.doc.imports.find((i) => i.source === from && !i.typeOnly && i.lastSpecifierEnd !== null);
+    if (same) {
+      this.s.appendLeft(same.lastSpecifierEnd, `, ${name}`);
+      return;
+    }
+    this.addImportLine(`import { ${name} } from ${JSON.stringify(from)};`);
+  }
+  /**
+   * Imports `name` from `from` and returns the local name to write in JSX. When
+   * the name is already taken by something else (another import, a local
+   * component), it is imported under `alias` instead: `{ Search as SearchIcon }`.
+   */
+  importAs(name, from, alias) {
+    const existing = this.doc.imports.find((i) => i.source === from && !i.typeOnly)?.bindings.find((b) => b.imported === name);
+    if (existing) return existing.local;
+    const key = `${from}\0${name}`;
+    const pending = this.importedAs.get(key);
+    if (pending) return pending;
+    const taken = (n) => this.doc.declared.includes(n) || this.added.has(n) || this.doc.imports.some((i) => i.names.includes(n) || i.defaultName === n);
+    let local = name;
+    if (taken(local)) {
+      local = alias;
+      for (let k = 2; taken(local); k++) local = `${alias}${k}`;
+    }
+    this.added.add(local);
+    this.importedAs.set(key, local);
+    const specifier = local === name ? name : `${name} as ${local}`;
+    const same = this.doc.imports.find((i) => i.source === from && !i.typeOnly && i.lastSpecifierEnd !== null);
+    if (same) this.s.appendLeft(same.lastSpecifierEnd, `, ${specifier}`);
+    else this.addImportLine(`import { ${specifier} } from ${JSON.stringify(from)};`);
+    return local;
+  }
+  importedAs = /* @__PURE__ */ new Map();
+  addImportLine(line) {
+    const last = this.doc.imports[this.doc.imports.length - 1];
+    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);
+    this.addImportLine(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 withMarker(code, node) {
+  if (node.kind !== "component" && node.kind !== "element") return code;
+  const m = /^<[\w.:-]+/.exec(code);
+  if (!m) return code;
+  let i = m[0].length;
+  if (code[i] === "<") {
+    for (let depth = 0; i < code.length; i++) {
+      if (code[i] === "<") depth++;
+      else if (code[i] === ">" && --depth === 0) {
+        i++;
+        break;
+      }
+    }
+  }
+  return `${code.slice(0, i)} __tcsel${code.slice(i)}`;
+}
+function literalLines(code) {
+  const out = /* @__PURE__ */ new Set();
+  if (!code.includes("\n") || !/[`"']/.test(code)) return out;
+  let ast;
+  try {
+    ast = parseModule(`<>${code}</>`);
+  } catch {
+    return out;
+  }
+  const ranges = [];
+  walk(ast, (n) => {
+    if (n.type === "TemplateLiteral" || n.type === "StringLiteral") ranges.push([n.start - 2, n.end - 2]);
+  });
+  if (!ranges.length) return out;
+  let offset = 0;
+  code.split("\n").forEach((line, i) => {
+    if (i > 0 && ranges.some(([a, b]) => offset > a && offset < b)) out.add(i);
+    offset += line.length + 1;
+  });
+  return out;
+}
+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/pm.ts
+import { spawn } from "child_process";
+import fs from "fs";
+import path from "path";
+function detectPm(dir) {
+  for (let d = dir; ; d = path.dirname(d)) {
+    if (fs.existsSync(path.join(d, "pnpm-lock.yaml")) || fs.existsSync(path.join(d, "pnpm-workspace.yaml"))) return "pnpm";
+    if (fs.existsSync(path.join(d, "yarn.lock"))) return "yarn";
+    if (fs.existsSync(path.join(d, "bun.lock")) || fs.existsSync(path.join(d, "bun.lockb"))) return "bun";
+    if (fs.existsSync(path.join(d, "package-lock.json"))) return "npm";
+    if (path.dirname(d) === d || fs.existsSync(path.join(d, ".git"))) break;
+  }
+  const agent = process.env.npm_config_user_agent ?? "";
+  if (agent.startsWith("pnpm")) return "pnpm";
+  if (agent.startsWith("yarn")) return "yarn";
+  if (agent.startsWith("bun")) return "bun";
+  return "npm";
+}
+function addArgs(pm, specs, dev = false) {
+  if (pm === "npm") return ["install", ...dev ? ["-D"] : [], ...specs];
+  if (pm === "bun") return ["add", ...dev ? ["-d"] : [], ...specs];
+  return ["add", ...dev ? ["-D"] : [], ...specs];
+}
+function dlx(pm, pkg, args) {
+  if (pm === "pnpm") return ["pnpm", ["dlx", pkg, ...args]];
+  if (pm === "yarn") return ["yarn", ["dlx", pkg, ...args]];
+  if (pm === "bun") return ["bunx", [pkg, ...args]];
+  return ["npx", ["--yes", pkg, ...args]];
+}
+var runtime = null;
+function useNodeRuntime(node, env) {
+  runtime = { node, env };
+}
+function nodeBin() {
+  return runtime ? runtime.node : process.execPath;
+}
+function toolEnv(extra = {}) {
+  const base = runtime?.env ?? process.env;
+  const node = nodeBin();
+  return { ...base, PATH: node ? `${path.dirname(node)}${path.delimiter}${base.PATH ?? ""}` : base.PATH ?? "", ...extra };
+}
+function shellSafe(cmd, args) {
+  if (process.platform !== "win32") return { cmd, args, shell: false };
+  const quote = (a) => /[\s"&|<>^()%!]/.test(a) ? `"${a.replace(/"/g, '""')}"` : a;
+  return { cmd: quote(cmd), args: args.map(quote), shell: true };
+}
+function run(cmd, args, cwd, timeoutMs = 3e5) {
+  return new Promise((resolve) => {
+    let out = "";
+    let done = false;
+    const finish = (ok, extra = "") => {
+      if (done) return;
+      done = true;
+      clearTimeout(timer);
+      resolve({ ok, out: (out + extra).slice(-2e4) });
+    };
+    const safe = shellSafe(cmd, args);
+    const p = spawn(safe.cmd, safe.args, { cwd, stdio: ["ignore", "pipe", "pipe"], env: toolEnv({ CI: "1", FORCE_COLOR: "0", NO_COLOR: "1" }), shell: safe.shell });
+    const timer = setTimeout(() => {
+      p.kill();
+      finish(false, `
+${cmd} timed out after ${Math.round(timeoutMs / 1e3)}s`);
+    }, timeoutMs);
+    p.stdout.on("data", (d) => out += d);
+    p.stderr.on("data", (d) => out += d);
+    p.on("error", (err) => finish(false, `
+${err.message}`));
+    p.on("close", (code) => finish(code === 0));
+  });
+}
+
+export {
+  parseCanvas,
+  readImports,
+  topLevelNames,
+  reindex,
+  buildNode,
+  allNodes,
+  findNode,
+  findFrame,
+  findByPath,
+  EditError,
+  attrCode,
+  textCode,
+  CanvasEditor,
+  componentNamesIn,
+  parseJsx,
+  frameCode,
+  indentBlock,
+  detectPm,
+  addArgs,
+  dlx,
+  useNodeRuntime,
+  nodeBin,
+  toolEnv,
+  shellSafe,
+  run
+};