@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-YSW7UO2P.js

@@ -0,0 +1,877 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  buildDesignContext
+} from "./chunk-AJSYQ2TP.js";
+import {
+  external_exports
+} from "./chunk-EZVFNLBJ.js";
+import {
+  placeSvgLayers
+} from "./chunk-MJH2BDAK.js";
+import {
+  exportNodeToSVG
+} from "./chunk-ZYZ4UT45.js";
+import {
+  selectionReferenceImages
+} from "./chunk-V7G6P5MV.js";
+import {
+  AiClientError,
+  IMAGE_ACTIONS,
+  modelEditsImages,
+  requestDesign,
+  requestImage,
+  requestImageAction,
+  sizeForAspect,
+  vectorSupport
+} from "./chunk-SN6Z5LZR.js";
+import {
+  useEditorStore
+} from "./chunk-7ALVCXI7.js";
+import {
+  getActiveRenderer
+} from "./chunk-ILG7UWXL.js";
+import {
+  measureTextWidth
+} from "./chunk-NDT2GAQB.js";
+import {
+  internDataUrl,
+  isMediaUrl,
+  mediaToDataUrl
+} from "./chunk-ZPIQLTT7.js";
+import {
+  applyAutoLayout
+} from "./chunk-USNPFHKI.js";
+import {
+  idIndex
+} from "./chunk-YHLIOY2L.js";
+import {
+  addNode,
+  createEllipse,
+  createFrame,
+  createImage,
+  createInstanceOf,
+  createLine,
+  createRectangle,
+  createText,
+  init_scene_graph,
+  removeNode
+} from "./chunk-F6JQTMKE.js";
+import {
+  AI_LIMITS,
+  init_limits,
+  num,
+  str
+} from "./chunk-QU6I6MIF.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/ai/client-actions.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+
+// lib/ai/design.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_limits();
+
+// lib/ai/schemas.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DESIGN_NODE_TYPES = ["FRAME", "TEXT", "RECTANGLE", "ELLIPSE", "LINE"];
+var DESIGN_FONTS = ["Inter", "Source Serif 4", "JetBrains Mono"];
+var layoutMode = external_exports.enum(["NONE", "HORIZONTAL", "VERTICAL"]);
+var align = external_exports.enum(["MIN", "CENTER", "MAX", "SPACE_BETWEEN"]);
+var counterAlign = external_exports.enum(["MIN", "CENTER", "MAX"]);
+var sizing = external_exports.enum(["FIXED", "HUG", "FILL"]);
+var boxProps = {
+  name: external_exports.string().describe('Short layer name, e.g. "Header", "Primary button", "Price"'),
+  width: external_exports.number().nullable().describe("px; null = size from content/defaults"),
+  height: external_exports.number().nullable(),
+  x: external_exports.number().nullable().describe("px relative to the parent; ignored inside auto-layout parents"),
+  y: external_exports.number().nullable(),
+  fill: external_exports.string().nullable().describe("#RRGGBB or #RRGGBBAA; null = no fill (text: text color)"),
+  stroke: external_exports.string().nullable().describe("#RRGGBB border color or null"),
+  strokeWidth: external_exports.number().nullable(),
+  cornerRadius: external_exports.number().nullable(),
+  opacity: external_exports.number().nullable().describe("0..1"),
+  widthSizing: sizing.nullable().describe("Inside an auto-layout parent: FIXED, HUG content or FILL the parent"),
+  heightSizing: sizing.nullable()
+};
+var frameLayoutProps = {
+  layout: layoutMode.nullable().describe("Auto layout direction; prefer VERTICAL/HORIZONTAL for real UI"),
+  gap: external_exports.number().nullable().describe("Spacing between children in px"),
+  padding: external_exports.array(external_exports.number()).nullable().describe("[top, right, bottom, left] px"),
+  primaryAlign: align.nullable(),
+  counterAlign: counterAlign.nullable(),
+  clip: external_exports.boolean().nullable()
+};
+var designNodeSchema = external_exports.object({
+  id: external_exports.string().describe('Unique id within this screen, e.g. "n1"'),
+  parent: external_exports.string().nullable().describe("id of a FRAME node in this screen, or null for the screen root"),
+  type: external_exports.enum(DESIGN_NODE_TYPES),
+  ...boxProps,
+  ...frameLayoutProps,
+  text: external_exports.string().nullable().describe("TEXT only: the text content"),
+  fontSize: external_exports.number().nullable(),
+  fontWeight: external_exports.number().nullable().describe("100..900"),
+  fontFamily: external_exports.enum(DESIGN_FONTS).nullable(),
+  textAlign: external_exports.enum(["LEFT", "CENTER", "RIGHT"]).nullable()
+});
+var designScreenSchema = external_exports.object({
+  name: external_exports.string().describe('Screen name, e.g. "Sign in"'),
+  width: external_exports.number(),
+  height: external_exports.number(),
+  fill: external_exports.string().nullable().describe("Screen background #RRGGBB"),
+  ...frameLayoutProps,
+  nodes: external_exports.array(designNodeSchema).describe("Flat list of layers; nesting is expressed with `parent`")
+});
+var designSchema = external_exports.object({
+  title: external_exports.string().describe("A short title for the generated design"),
+  screens: external_exports.array(designScreenSchema)
+});
+var contentSchema = external_exports.object({
+  items: external_exports.array(external_exports.object({
+    id: external_exports.string().describe("The text layer id you were given"),
+    text: external_exports.string().describe("Replacement text for that layer")
+  }))
+});
+var layoutSuggestionSchema = external_exports.object({
+  layoutMode: external_exports.enum(["HORIZONTAL", "VERTICAL"]),
+  itemSpacing: external_exports.number(),
+  padding: external_exports.object({ top: external_exports.number(), right: external_exports.number(), bottom: external_exports.number(), left: external_exports.number() }),
+  primaryAxisAlignItems: align,
+  counterAxisAlignItems: counterAlign,
+  /** Child ids in the order they should flow. */
+  order: external_exports.array(external_exports.string()),
+  /** Runs of children to wrap into their own nested auto-layout frame first (e.g. an icon + label row). */
+  wrap: external_exports.array(external_exports.object({
+    childIds: external_exports.array(external_exports.string()),
+    layoutMode: external_exports.enum(["HORIZONTAL", "VERTICAL"]),
+    itemSpacing: external_exports.number(),
+    name: external_exports.string()
+  })),
+  rationale: external_exports.string().describe("One or two sentences explaining the choice")
+});
+var generateRequestSchema = external_exports.object({
+  prompt: external_exports.string().min(1),
+  mode: external_exports.enum(["screen", "flow"]),
+  size: external_exports.object({ width: external_exports.number(), height: external_exports.number(), label: external_exports.string().optional() }).optional(),
+  style: external_exports.string().optional(),
+  screens: external_exports.number().optional(),
+  /** Compact summary of the file's styles/colors, built by the editor. */
+  context: external_exports.string().optional()
+});
+var contentRequestSchema = external_exports.object({
+  instructions: external_exports.string().optional(),
+  context: external_exports.string().optional(),
+  targets: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    name: external_exports.string(),
+    role: external_exports.string(),
+    current: external_exports.string(),
+    maxChars: external_exports.number(),
+    path: external_exports.string()
+  })).min(1)
+});
+var layoutRequestSchema = external_exports.object({
+  frame: external_exports.object({ id: external_exports.string(), name: external_exports.string(), type: external_exports.string(), width: external_exports.number(), height: external_exports.number() }),
+  children: external_exports.array(external_exports.object({
+    id: external_exports.string(),
+    name: external_exports.string(),
+    type: external_exports.string(),
+    x: external_exports.number(),
+    y: external_exports.number(),
+    width: external_exports.number(),
+    height: external_exports.number(),
+    text: external_exports.string().optional()
+  })).min(1),
+  heuristic: layoutSuggestionSchema.omit({ rationale: true }).extend({ rationale: external_exports.string().optional(), confidence: external_exports.number().optional() })
+});
+var embedRequestSchema = external_exports.object({
+  values: external_exports.array(external_exports.string()).min(1)
+});
+
+// lib/ai/design.ts
+var oneOf = (v, allowed, fallback) => typeof v === "string" && allowed.includes(v.toUpperCase()) ? v.toUpperCase() : fallback;
+var isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function parseHexColor(v) {
+  if (isObj(v) && ["r", "g", "b"].every((k) => typeof v[k] === "number" && Number.isFinite(v[k]))) {
+    return { r: num(v.r, 0, 1, 0), g: num(v.g, 0, 1, 0), b: num(v.b, 0, 1, 0), a: num(v.a, 0, 1, 1) };
+  }
+  if (typeof v !== "string") return null;
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(v.trim());
+  if (!m) return null;
+  let hex = m[1];
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+  const byte = (i) => parseInt(hex.slice(i, i + 2), 16) / 255;
+  return { r: byte(0), g: byte(2), b: byte(4), a: hex.length === 8 ? byte(6) : 1 };
+}
+function sanitizeLayout(o) {
+  const pad = Array.isArray(o.padding) ? o.padding : typeof o.padding === "number" ? [o.padding] : [];
+  const p = (i) => num(pad.length === 1 ? pad[0] : pad.length === 2 ? pad[i % 2] : pad[i], 0, AI_LIMITS.maxSpacing, 0);
+  return {
+    layout: oneOf(o.layout, ["NONE", "HORIZONTAL", "VERTICAL"], "NONE"),
+    gap: num(o.gap, 0, AI_LIMITS.maxSpacing, 0),
+    padding: [p(0), p(1), p(2), p(3)],
+    primaryAlign: oneOf(o.primaryAlign, ["MIN", "CENTER", "MAX", "SPACE_BETWEEN"], "MIN"),
+    counterAlign: oneOf(o.counterAlign, ["MIN", "CENTER", "MAX"], "MIN"),
+    clip: typeof o.clip === "boolean" ? o.clip : true
+  };
+}
+var optSize = (v) => v == null || v === "" ? null : num(v, AI_LIMITS.minSize, AI_LIMITS.maxSize, 100);
+function sanitizeNode(o, id) {
+  const type = typeof o.type === "string" ? o.type.toUpperCase() : null;
+  if (!type || !DESIGN_NODE_TYPES.includes(type)) return null;
+  const text = str(o.text, AI_LIMITS.maxTextChars);
+  if (type === "TEXT" && !text.trim()) return null;
+  const fontFamily = DESIGN_FONTS.includes(o.fontFamily) ? o.fontFamily : "Inter";
+  return {
+    id,
+    parent: typeof o.parent === "string" && o.parent ? o.parent : null,
+    type,
+    name: str(o.name, AI_LIMITS.maxNameChars).trim() || (type === "TEXT" ? text.slice(0, 40) : type.charAt(0) + type.slice(1).toLowerCase()),
+    width: optSize(o.width),
+    height: type === "LINE" ? null : optSize(o.height),
+    x: num(o.x, -AI_LIMITS.maxSize, AI_LIMITS.maxSize, 0),
+    y: num(o.y, -AI_LIMITS.maxSize, AI_LIMITS.maxSize, 0),
+    fill: parseHexColor(o.fill),
+    stroke: parseHexColor(o.stroke),
+    strokeWidth: num(o.strokeWidth, 0, AI_LIMITS.maxStrokeWidth, 1),
+    cornerRadius: num(o.cornerRadius, 0, AI_LIMITS.maxRadius, 0),
+    opacity: num(o.opacity, 0, 1, 1),
+    widthSizing: oneOf(o.widthSizing, ["FIXED", "HUG", "FILL"], type === "TEXT" || type === "FRAME" ? "HUG" : "FIXED"),
+    heightSizing: oneOf(o.heightSizing, ["FIXED", "HUG", "FILL"], type === "TEXT" || type === "FRAME" ? "HUG" : "FIXED"),
+    text,
+    fontSize: num(o.fontSize, AI_LIMITS.minFontSize, AI_LIMITS.maxFontSize, 16),
+    fontWeight: Math.round(num(o.fontWeight, 100, 900, 400) / 100) * 100,
+    fontFamily,
+    textAlign: oneOf(o.textAlign, ["LEFT", "CENTER", "RIGHT"], "LEFT"),
+    ...sanitizeLayout(o)
+  };
+}
+function repairParents(nodes) {
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  for (const n of nodes) {
+    if (n.parent !== null && (!byId.has(n.parent) || byId.get(n.parent).type !== "FRAME" || n.parent === n.id)) n.parent = null;
+  }
+  for (const n of nodes) {
+    const seen = /* @__PURE__ */ new Set([n.id]);
+    let depth = 1;
+    let cur = n.parent;
+    while (cur !== null) {
+      if (seen.has(cur) || depth >= AI_LIMITS.maxDepth) {
+        n.parent = null;
+        break;
+      }
+      seen.add(cur);
+      depth++;
+      cur = byId.get(cur).parent;
+    }
+  }
+}
+function sanitizeDesign(input, opts = {}) {
+  const root = isObj(input) ? input : {};
+  const rawScreens = Array.isArray(root.screens) ? root.screens : [];
+  const maxScreens = Math.max(1, Math.min(AI_LIMITS.maxFrames, opts.maxScreens ?? AI_LIMITS.maxFrames));
+  let budget = AI_LIMITS.maxTotalNodes;
+  const screens = [];
+  for (const s of rawScreens) {
+    if (screens.length >= maxScreens) break;
+    if (!isObj(s)) continue;
+    const used = /* @__PURE__ */ new Set();
+    const nodes = [];
+    const rawNodes = Array.isArray(s.nodes) ? s.nodes : [];
+    for (const raw of rawNodes) {
+      if (nodes.length >= AI_LIMITS.maxNodesPerFrame || budget <= 0) break;
+      if (!isObj(raw)) continue;
+      let id = str(raw.id, 64).trim() || `n${nodes.length + 1}`;
+      while (used.has(id)) id = `${id}_`;
+      const node = sanitizeNode(raw, id);
+      if (!node) continue;
+      used.add(id);
+      nodes.push(node);
+      budget--;
+    }
+    repairParents(nodes);
+    screens.push({
+      name: str(s.name, AI_LIMITS.maxNameChars).trim() || `Screen ${screens.length + 1}`,
+      width: num(s.width, 100, AI_LIMITS.maxSize, 390),
+      height: num(s.height, 100, AI_LIMITS.maxSize, 844),
+      fill: s.fill === null || s.fill === void 0 ? { r: 1, g: 1, b: 1, a: 1 } : parseHexColor(s.fill),
+      nodes,
+      ...sanitizeLayout(s)
+    });
+  }
+  return { title: str(root.title, AI_LIMITS.maxNameChars).trim() || "Generated design", screens };
+}
+var estimateTextWidth = (text, _family, weight, size) => Math.max(...text.split("\n").map((l) => l.length)) * size * (weight >= 600 ? 0.58 : 0.54);
+var LINE_HEIGHT = 1.2;
+function textHeight(text, width, fontFamily, fontWeight, fontSize, measure2) {
+  let lines = 0;
+  for (const para of text.split("\n")) {
+    const w = measure2(para, fontFamily, fontWeight, fontSize);
+    lines += width && width > 0 ? Math.max(1, Math.ceil(w / width - 1e-3)) : 1;
+  }
+  return Math.max(1, lines) * fontSize * LINE_HEIGHT;
+}
+var solid = (c) => ({ type: "SOLID", color: { r: c.r, g: c.g, b: c.b, a: 1 }, opacity: c.a, visible: true });
+var stroke = (c, width) => ({ color: c, width, alignment: "INSIDE", cap: "NONE", join: "MITER", dashPattern: [] });
+var padObj = (p) => ({ top: p[0], right: p[1], bottom: p[2], left: p[3] });
+function frameProps(l) {
+  return {
+    layoutMode: l.layout,
+    itemSpacing: l.gap,
+    padding: padObj(l.padding),
+    primaryAxisAlignItems: l.primaryAlign,
+    counterAxisAlignItems: l.counterAlign,
+    clipsContent: l.clip
+  };
+}
+function buildDesignNodes(design, opts = {}) {
+  const measure2 = opts.measure ?? estimateTextWidth;
+  const gap = opts.gap ?? 80;
+  const nodes = {};
+  const rootIds = [];
+  let cursorX = 0;
+  for (const screen of design.screens) {
+    const root = createFrame({
+      name: screen.name,
+      x: cursorX,
+      y: 0,
+      width: screen.width,
+      height: screen.height,
+      fills: screen.fill ? [solid(screen.fill)] : [],
+      backgroundColor: screen.fill ?? { r: 1, g: 1, b: 1, a: 0 },
+      ...frameProps(screen),
+      layoutSizingHorizontal: "FIXED",
+      layoutSizingVertical: "FIXED",
+      parentId: null,
+      childIds: []
+    });
+    nodes[root.id] = root;
+    rootIds.push(root.id);
+    cursorX += screen.width + gap;
+    const idMap = /* @__PURE__ */ new Map();
+    const created = [];
+    for (const src of screen.nodes) {
+      const node = createNode(src, measure2);
+      idMap.set(src.id, node.id);
+      nodes[node.id] = node;
+      created.push({ src, node });
+    }
+    for (const { src, node } of created) {
+      const parentId = src.parent !== null ? idMap.get(src.parent) : root.id;
+      const parent = nodes[parentId];
+      node.parentId = parentId;
+      parent.childIds = [...parent.childIds, node.id];
+      const parentAuto = parent.layoutMode !== "NONE";
+      const n = node;
+      if (!parentAuto) {
+        if (n.layoutSizingHorizontal === "FILL") n.layoutSizingHorizontal = "FIXED";
+        if (n.layoutSizingVertical === "FILL") n.layoutSizingVertical = "FIXED";
+      }
+    }
+  }
+  return { nodes, rootIds };
+}
+function createNode(src, measure2) {
+  const common = {
+    name: src.name,
+    x: src.x,
+    y: src.y,
+    opacity: src.opacity,
+    parentId: null,
+    childIds: [],
+    layoutSizingHorizontal: src.widthSizing,
+    layoutSizingVertical: src.heightSizing
+  };
+  switch (src.type) {
+    case "TEXT": {
+      const wraps = src.widthSizing === "FILL" || src.widthSizing === "FIXED" && src.width !== null;
+      const width = wraps ? src.width ?? 200 : Math.max(1, Math.ceil(measure2(src.text, src.fontFamily, src.fontWeight, src.fontSize)));
+      return createText({
+        ...common,
+        characters: src.text,
+        fontSize: src.fontSize,
+        fontWeight: src.fontWeight,
+        fontFamily: src.fontFamily,
+        textAlign: src.textAlign,
+        fills: [solid(src.fill ?? { r: 0.07, g: 0.07, b: 0.08, a: 1 })],
+        width,
+        height: textHeight(src.text, wraps ? width : null, src.fontFamily, src.fontWeight, src.fontSize, measure2),
+        textAutoResize: wraps ? "HEIGHT" : "WIDTH_AND_HEIGHT",
+        layoutSizingHorizontal: wraps ? src.widthSizing : "HUG",
+        layoutSizingVertical: "HUG"
+      });
+    }
+    case "FRAME":
+      return createFrame({
+        ...common,
+        width: src.width ?? 200,
+        height: src.height ?? 100,
+        fills: src.fill ? [solid(src.fill)] : [],
+        backgroundColor: src.fill ?? { r: 1, g: 1, b: 1, a: 0 },
+        strokes: src.stroke ? [stroke(src.stroke, src.strokeWidth)] : [],
+        cornerRadius: src.cornerRadius,
+        ...frameProps(src),
+        // HUG needs auto layout to mean anything.
+        layoutSizingHorizontal: src.layout === "NONE" && src.widthSizing === "HUG" ? "FIXED" : src.widthSizing,
+        layoutSizingVertical: src.layout === "NONE" && src.heightSizing === "HUG" ? "FIXED" : src.heightSizing
+      });
+    case "RECTANGLE":
+    case "ELLIPSE": {
+      const props = {
+        ...common,
+        width: src.width ?? 100,
+        height: src.height ?? 100,
+        fills: src.fill ? [solid(src.fill)] : [],
+        strokes: src.stroke ? [stroke(src.stroke, src.strokeWidth)] : [],
+        layoutSizingHorizontal: src.widthSizing === "HUG" ? "FIXED" : src.widthSizing,
+        layoutSizingVertical: src.heightSizing === "HUG" ? "FIXED" : src.heightSizing
+      };
+      return src.type === "RECTANGLE" ? createRectangle({ ...props, cornerRadius: src.cornerRadius }) : createEllipse(props);
+    }
+    case "LINE": {
+      const width = src.width ?? 100;
+      return createLine({
+        ...common,
+        width,
+        height: 0,
+        strokes: [{ ...stroke(src.stroke ?? src.fill ?? { r: 0.85, g: 0.85, b: 0.87, a: 1 }, Math.max(1, src.strokeWidth)), alignment: "CENTER" }],
+        startPoint: { x: 0, y: 0 },
+        endPoint: { x: width, y: 0 },
+        layoutSizingHorizontal: src.widthSizing === "HUG" ? "FIXED" : src.widthSizing,
+        layoutSizingVertical: "FIXED"
+      });
+    }
+  }
+}
+function insertDesign(doc, pageId, built, origin, measure2 = estimateTextWidth) {
+  const page = doc.nodes[pageId];
+  if (!page || !built.rootIds.length) return { doc, rootIds: [] };
+  const nodes = { ...doc.nodes };
+  for (const id in built.nodes) {
+    const n = built.nodes[id];
+    nodes[id] = n.parentId === null ? { ...n, parentId: pageId, x: n.x + origin.x, y: n.y + origin.y } : n;
+  }
+  nodes[pageId] = { ...page, childIds: [...page.childIds, ...built.rootIds] };
+  let next = applyAutoLayout({ ...doc, nodes });
+  let changed = false;
+  const refit = { ...next.nodes };
+  for (const id in built.nodes) {
+    const t = refit[id];
+    if (t.type !== "TEXT" || t.textAutoResize !== "HEIGHT") continue;
+    const h = textHeight(t.characters, t.width, t.fontFamily, t.fontWeight, t.fontSize, measure2);
+    if (Math.abs(h - t.height) > 0.5) {
+      refit[id] = { ...t, height: h };
+      changed = true;
+    }
+  }
+  if (changed) next = applyAutoLayout({ ...next, nodes: refit });
+  return { doc: next, rootIds: built.rootIds };
+}
+function placementOrigin(doc, pageId, gap = 120) {
+  const page = doc.nodes[pageId];
+  let maxX = -Infinity;
+  let minY = Infinity;
+  for (const id of page?.childIds ?? []) {
+    const n = doc.nodes[id];
+    if (!n) continue;
+    maxX = Math.max(maxX, n.x + n.width);
+    minY = Math.min(minY, n.y);
+  }
+  return maxX === -Infinity ? { x: 0, y: 0 } : { x: Math.round(maxX + gap), y: Math.round(minY) };
+}
+
+// lib/ai/image-jobs.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var running = /* @__PURE__ */ new Map();
+var finished = /* @__PURE__ */ new Set();
+function trackImageJob(nodeId, controller) {
+  running.set(nodeId, controller);
+  finished.delete(nodeId);
+  renderSoon();
+}
+function finishImageJob(nodeId) {
+  running.delete(nodeId);
+  finished.add(nodeId);
+  renderSoon();
+}
+var pendingIds = idIndex((n) => !!n.aiPending);
+function renderSoon() {
+  if (typeof window !== "undefined") window.dispatchEvent(new Event("popcraft-render"));
+}
+
+// lib/ai/client-actions.ts
+init_limits();
+var measure = (text, family, weight, size) => measureTextWidth(text, family, weight, size);
+var notice = (text) => {
+  if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("popcraft-notice", { detail: { text } }));
+};
+var editor = () => useEditorStore.getState();
+function guardEditable() {
+  if (editor().isVersionHistoryMode) throw new AiClientError("Leave version history to apply AI changes.", "readonly", 0);
+}
+async function generateDesignIntoPage(opts, signal) {
+  guardEditable();
+  const context = buildDesignContext(editor().document);
+  const raw = await requestDesign({ ...opts, context }, signal);
+  const design = sanitizeDesign(raw, { maxScreens: opts.mode === "flow" ? 5 : 1 });
+  if (!design.screens.length) throw new AiClientError("The model returned nothing to insert.", "empty", 0);
+  const st = editor();
+  const pageId = st.currentPageId;
+  const built = buildDesignNodes(design, { measure });
+  const { doc, rootIds } = insertDesign(st.document, pageId, built, placementOrigin(st.document, pageId), measure);
+  st.commitDocument(doc, opts.mode === "flow" ? `AI first draft: ${design.title}` : `AI design: ${design.title}`);
+  st.setSelection(rootIds);
+  st.zoomToSelection();
+  return rootIds.length;
+}
+function openSearchItem(item, mode = item.kind === "component" ? "insert" : "select") {
+  const st = editor();
+  const node = st.document.nodes[item.id];
+  if (item.kind === "style" || item.kind === "variable" || !node) {
+    notice(`${item.detail}: ${item.name}`);
+    return;
+  }
+  if (mode === "insert" && (node.type === "COMPONENT" || node.type === "COMPONENT_SET")) {
+    guardEditable();
+    const main = node.type === "COMPONENT_SET" ? st.document.nodes[node.childIds.find((c) => st.document.nodes[c]?.type === "COMPONENT") ?? ""] : node;
+    if (!main) return;
+    const inst = createInstanceOf(main, { x: Math.round(st.camera.x - main.width / 2), y: Math.round(st.camera.y - main.height / 2) });
+    st.commitDocument(addNode(st.document, inst, st.currentPageId), `Insert ${main.name}`);
+    st.setSelection([inst.id]);
+    return;
+  }
+  if (item.pageId && item.pageId !== st.currentPageId) st.setCurrentPage(item.pageId);
+  editor().setSelection([item.id]);
+  editor().focusOnNode(item.id);
+}
+var blobToDataUrl = (blob) => new Promise((resolve, reject) => {
+  const r = new FileReader();
+  r.onload = () => resolve(String(r.result));
+  r.onerror = () => reject(r.error);
+  r.readAsDataURL(blob);
+});
+var naturalSize = (src) => new Promise((res) => {
+  const img = new Image();
+  img.onload = () => res({ w: img.naturalWidth || 1024, h: img.naturalHeight || 1024 });
+  img.onerror = () => res({ w: 1024, h: 1024 });
+  img.src = src;
+});
+var isSvg = (mime) => mime.split(";")[0].trim() === "image/svg+xml";
+function selectedImageTarget(doc, selection) {
+  if (selection.length !== 1) return null;
+  const n = doc.nodes[selection[0]];
+  if (!n) return null;
+  if (n.type === "IMAGE") return n;
+  const fills = n.fills;
+  return fills?.some((p) => p.type === "IMAGE") ? n : null;
+}
+function withImage(node, ref) {
+  if (node.type === "IMAGE") return { imageUrl: ref };
+  const fills = (node.fills ?? []).map((p, i, all) => p.type === "IMAGE" && all.findIndex((q) => q.type === "IMAGE") === i ? { ...p, imageUrl: ref, imageHash: void 0 } : p);
+  return { fills };
+}
+function setPending(id, pending) {
+  const st = editor();
+  const node = st.document.nodes[id];
+  if (!node) return;
+  const next = { ...node };
+  if (pending) next.aiPending = pending;
+  else delete next.aiPending;
+  useEditorStore.setState({ document: { ...st.document, nodes: { ...st.document.nodes, [id]: next } } });
+}
+var liveNode = (id) => editor().document.nodes[id] ?? null;
+async function landResult(id, blob, mime, name, opts) {
+  const node = liveNode(id);
+  if (!node) return;
+  if (isSvg(mime)) {
+    const st2 = editor();
+    const parentId = node.parentId ?? st2.currentPageId;
+    const cx = opts.besideSource ? node.x + node.width * 1.5 + 40 : node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    let doc = st2.document;
+    const clean = { ...node };
+    delete clean.aiPending;
+    doc = { ...doc, nodes: { ...doc.nodes, [id]: clean } };
+    const imported = placeSvgLayers(doc, parentId, await blob.text(), { name, cx, cy, intern: (url) => internDataUrl(url, "generated") });
+    if (imported) {
+      let next2 = imported.doc;
+      if (opts.generation) next2 = { ...next2, nodes: { ...next2.nodes, [imported.id]: { ...next2.nodes[imported.id], aiGeneration: opts.generation } } };
+      if (!opts.besideSource) {
+        const parent = next2.nodes[parentId];
+        if (parent) {
+          const kids = parent.childIds.filter((c) => c !== imported.id);
+          const at = kids.indexOf(id);
+          if (at >= 0) kids.splice(at + 1, 0, imported.id);
+          else kids.push(imported.id);
+          next2 = { ...next2, nodes: { ...next2.nodes, [parentId]: { ...parent, childIds: kids } } };
+        }
+        next2 = removeNode(next2, id);
+      }
+      editor().commitDocument(applyAutoLayout(next2), `AI vector: ${name}`);
+      const sel = editor().selection;
+      if (!sel.length || sel.includes(id)) editor().setSelection([imported.id]);
+      return;
+    }
+    notice("SVG import failed \u2014 inserted as an image instead.");
+  }
+  const dataUrl = await blobToDataUrl(isSvg(mime) ? new Blob([await blob.arrayBuffer()], { type: "image/svg+xml" }) : blob);
+  const ref = internDataUrl(dataUrl, "generated");
+  const live = liveNode(id);
+  if (!live) return;
+  const next = { ...live, ...withImage(live, ref) };
+  delete next.aiPending;
+  if (opts.generation) next.aiGeneration = opts.generation;
+  if (opts.placeholder) {
+    const { w, h } = await naturalSize(dataUrl);
+    const height = Math.max(1, Math.round(live.width * (h / Math.max(1, w))));
+    Object.assign(next, { y: Math.round(live.y + live.height / 2 - height / 2), height, fills: [] });
+  }
+  const st = editor();
+  st.commitDocument({ ...st.document, nodes: { ...st.document.nodes, [id]: next } }, `AI image: ${name}`);
+}
+function runInBackground(id, opts, work) {
+  const controller = new AbortController();
+  trackImageJob(id, controller);
+  void (async () => {
+    try {
+      const result = await work(controller.signal);
+      finishImageJob(id);
+      await landResult(id, result.blob, result.mime, opts.name, opts);
+    } catch (e) {
+      finishImageJob(id);
+      const node = liveNode(id);
+      if (node && opts.placeholder && e?.name !== "AbortError") {
+        replaceWithErrorCard(id, e?.message || "Unknown error");
+      } else if (node && opts.placeholder) {
+        useEditorStore.setState({ document: removeNode(editor().document, id), selection: editor().selection.filter((s) => s !== id) });
+      } else if (node) setPending(id, void 0);
+      if (e?.name !== "AbortError") notice(`Image generation failed: ${e?.message ?? "unknown error"}`);
+    }
+  })();
+}
+var ERROR_FILL = { r: 0.94, g: 0.27, b: 0.27 };
+function replaceWithErrorCard(id, message, title = "Image generation failed", label = "AI image failed") {
+  const st = editor();
+  const node = st.document.nodes[id];
+  if (!node) return;
+  const parentId = node.parentId ?? st.currentPageId;
+  const pad = Math.max(8, Math.round(Math.min(node.width, node.height) * 0.06));
+  const fontSize = Math.max(10, Math.min(18, Math.round(node.width / 22)));
+  const card = createFrame({
+    name: `${label}: ${node.name}`,
+    x: node.x,
+    y: node.y,
+    width: node.width,
+    height: node.height,
+    rotation: node.rotation,
+    fills: [{ type: "SOLID", color: { ...ERROR_FILL, a: 0.12 }, visible: true }],
+    strokes: [{ color: { ...ERROR_FILL, a: 1 }, width: 2, alignment: "INSIDE", cap: "NONE", join: "MITER", dashPattern: [6, 4] }],
+    cornerRadius: 8,
+    clipsContent: true,
+    layoutMode: "VERTICAL",
+    primaryAxisAlignItems: "CENTER",
+    counterAxisAlignItems: "CENTER",
+    padding: { top: pad, right: pad, bottom: pad, left: pad },
+    itemSpacing: Math.round(fontSize / 2),
+    layoutSizingHorizontal: "FIXED",
+    layoutSizingVertical: "FIXED"
+  });
+  const text = (characters, weight) => createText({
+    name: weight > 400 ? "Error" : "Error message",
+    characters,
+    width: Math.max(1, node.width - pad * 2),
+    fontSize: weight > 400 ? fontSize + 2 : fontSize,
+    fontWeight: weight,
+    textAlign: "CENTER",
+    textAutoResize: "HEIGHT",
+    layoutSizingHorizontal: "FILL",
+    fills: [{ type: "SOLID", color: { ...ERROR_FILL, a: 1 }, visible: true }]
+  });
+  const heading = text(title, 700);
+  const detail = text(message, 400);
+  let doc = removeNode(st.document, id);
+  doc = addNode(doc, card, parentId);
+  doc = addNode(doc, heading, card.id);
+  doc = addNode(doc, detail, card.id);
+  const parent = doc.nodes[parentId];
+  const oldIndex = st.document.nodes[parentId]?.childIds.indexOf(id) ?? -1;
+  if (parent && oldIndex >= 0) {
+    const kids = parent.childIds.filter((c) => c !== card.id);
+    kids.splice(Math.min(oldIndex, kids.length), 0, card.id);
+    doc = { ...doc, nodes: { ...doc.nodes, [parentId]: { ...parent, childIds: kids } } };
+  }
+  editor().commitDocument(applyAutoLayout(doc), label);
+  if (editor().selection.includes(id)) editor().setSelection([card.id]);
+}
+var VARIANT_GAP = 24;
+function createPlaceholders(name, aspect, pending, count) {
+  const st = editor();
+  const { width: w, height: h } = sizeForAspect(aspect);
+  const zoom = Math.max(0.25, Math.min(4, st.camera.zoom || 1));
+  const k = Math.min(1, 480 / Math.max(w, h)) / zoom;
+  const width = Math.round(w * k), height = Math.round(h * k);
+  const gap = Math.round(VARIANT_GAP / zoom);
+  const row = count * width + (count - 1) * gap;
+  let doc = st.document;
+  const ids = [];
+  for (let i = 0; i < count; i++) {
+    const at = { x: Math.round(st.camera.x - row / 2 + i * (width + gap)), y: Math.round(st.camera.y - height / 2), width, height };
+    const node = placeholderNode(count > 1 ? `${name} ${i + 1}` : name, at, pending);
+    doc = addNode(doc, node, st.currentPageId);
+    ids.push(node.id);
+  }
+  st.commitDocument(doc, count > 1 ? `AI images: ${name}` : `AI image: ${name}`);
+  editor().setSelection(ids);
+  return ids;
+}
+function placeholderNode(name, at, pending) {
+  const node = createImage("", {
+    name,
+    ...at,
+    scaleMode: "FILL",
+    fills: [{ type: "SOLID", color: { r: 0.17, g: 0.17, b: 0.19, a: 1 }, visible: true }]
+  });
+  node.aiPending = pending;
+  return node;
+}
+function selectedVectorTarget(doc, selection) {
+  if (selection.length !== 1) return null;
+  const n = doc.nodes[selection[0]];
+  if (!n || n.type === "IMAGE" || n.type === "PAGE" || n.type === "TEXT") return null;
+  if (n.fills?.some((p) => p.type === "IMAGE")) return null;
+  return n;
+}
+var MAX_IMAGE_VARIANTS = 4;
+function startImageGeneration(req) {
+  guardEditable();
+  const st = editor();
+  const name = req.prompt.slice(0, 40) || "AI image";
+  const pending = { prompt: req.prompt, model: req.model.id, startedAt: Date.now() };
+  const imageTarget = req.useSelection ? selectedImageTarget(st.document, st.selection) : null;
+  const vectorTarget = req.useSelection && req.model.edits && !imageTarget ? selectedVectorTarget(st.document, st.selection) : null;
+  const format = req.model.vector === "always" ? "svg" : req.model.vector === "option" ? req.format : "image";
+  const base = { prompt: req.prompt, aspect: req.aspect, style: req.style, format };
+  const generation = { prompt: req.prompt, model: req.model.id, aspect: req.aspect, style: req.style, format, createdAt: Date.now() };
+  const referenceIds = req.useReferences && req.model.edits && format === "image" ? [...st.selection] : [];
+  const references = async (excludeId) => {
+    const ids = excludeId ? referenceIds.filter((id) => id !== excludeId) : referenceIds;
+    if (!ids.length) return void 0;
+    const refs = await selectionReferenceImages(editor().document, ids);
+    return refs.length ? refs : void 0;
+  };
+  if (vectorTarget) {
+    const id = vectorTarget.id;
+    setPending(id, pending);
+    runInBackground(id, { placeholder: false, name, generation }, async (signal) => {
+      const renderer = getActiveRenderer();
+      if (!renderer) throw new AiClientError("The canvas is not ready.", "not_ready", 0);
+      const doc = editor().document;
+      const node = doc.nodes[id];
+      if (!node) throw new AiClientError("The selection was deleted.", "gone", 0);
+      const svg = await exportNodeToSVG(renderer, node, doc, doc.styles);
+      if (!svg) throw new AiClientError("Could not export the selection as SVG.", "export", 0);
+      return requestImage(req.model, { ...base, format: "svg", svg }, signal);
+    });
+    return;
+  }
+  if (imageTarget) {
+    const id = imageTarget.id;
+    setPending(id, pending);
+    runInBackground(id, { placeholder: false, name, generation }, async (signal) => {
+      const source = req.model.edits && format === "image" ? await sourceDataUrl(liveNode(id) ?? imageTarget) : void 0;
+      return requestImage(req.model, { ...base, image: source, references: await references(id) }, signal);
+    });
+    return;
+  }
+  const count = Math.max(1, Math.min(MAX_IMAGE_VARIANTS, Math.round(req.count ?? 1)));
+  for (const id of createPlaceholders(name, req.aspect, pending, count)) {
+    runInBackground(
+      id,
+      { placeholder: true, name, generation },
+      async (signal) => requestImage(req.model, { ...base, references: await references() }, signal)
+    );
+  }
+}
+function regenerableImage(doc, id) {
+  return doc.nodes[id]?.aiGeneration ?? null;
+}
+function regenerateImage(id, count = 1) {
+  guardEditable();
+  const st = editor();
+  const source = st.document.nodes[id];
+  const gen = regenerableImage(st.document, id);
+  if (!source || !gen) throw new AiClientError("This layer has no generation settings to regenerate from.", "no_generation", 0);
+  const model = { id: gen.model, vector: vectorSupport(gen.model), edits: modelEditsImages(gen.model) };
+  const name = gen.prompt.slice(0, 40) || "AI image";
+  const pending = { prompt: gen.prompt, model: gen.model, startedAt: Date.now() };
+  const parentId = source.parentId ?? st.currentPageId;
+  const n = Math.max(1, Math.min(MAX_IMAGE_VARIANTS, Math.round(count)));
+  const gap = Math.max(16, Math.round(source.width * 0.08));
+  let doc = st.document;
+  const ids = [];
+  for (let i = 0; i < n; i++) {
+    const at = { x: source.x + (i + 1) * (source.width + gap), y: source.y, width: source.width, height: source.height };
+    const node = placeholderNode(name, at, pending);
+    doc = addNode(doc, node, parentId);
+    ids.push(node.id);
+  }
+  st.commitDocument(doc, `Regenerate: ${name}`);
+  editor().setSelection(ids);
+  const generation = { ...gen, createdAt: Date.now() };
+  for (const pid of ids) {
+    runInBackground(
+      pid,
+      { placeholder: true, name, generation },
+      (signal) => requestImage(model, { prompt: gen.prompt, aspect: gen.aspect, style: gen.style, format: gen.format }, signal)
+    );
+  }
+}
+async function sourceDataUrl(node) {
+  const url = node.type === "IMAGE" ? node.imageUrl : node.fills?.find((p) => p.type === "IMAGE")?.imageUrl;
+  if (!url) throw new AiClientError("This layer has no image to process.", "no_image", 0);
+  let dataUrl = null;
+  if (isMediaUrl(url)) dataUrl = await mediaToDataUrl(url);
+  else if (url.startsWith("data:")) dataUrl = url;
+  else {
+    try {
+      dataUrl = await blobToDataUrl(await (await fetch(url)).blob());
+    } catch {
+      dataUrl = null;
+    }
+  }
+  if (!dataUrl || !/^data:image\//.test(dataUrl)) throw new AiClientError("Could not read this image.", "no_image", 0);
+  if (dataUrl.length > AI_LIMITS.maxSourceImageChars) throw new AiClientError("This image is too large for AI actions (max ~3 MB).", "too_large", 0);
+  return dataUrl;
+}
+function startImageAction(kind) {
+  guardEditable();
+  const st = editor();
+  const target = selectedImageTarget(st.document, st.selection);
+  if (!target) throw new AiClientError("Select an image first.", "no_image", 0);
+  const action = IMAGE_ACTIONS[kind];
+  const pending = { prompt: action.label, model: action.id, startedAt: Date.now() };
+  setPending(target.id, pending);
+  runInBackground(target.id, { placeholder: false, name: `${target.name} (${action.label.toLowerCase()})`, besideSource: kind === "vectorize" }, async (signal) => requestImageAction(kind, await sourceDataUrl(liveNode(target.id) ?? target), signal));
+}
+
+export {
+  notice,
+  generateDesignIntoPage,
+  openSearchItem,
+  selectedImageTarget,
+  replaceWithErrorCard,
+  selectedVectorTarget,
+  MAX_IMAGE_VARIANTS,
+  startImageGeneration,
+  regenerableImage,
+  regenerateImage,
+  startImageAction
+};