@popcraft/cli 0.16.0 → 0.17.0

package/dist/popcraft.mjs

@@ -1186,7 +1186,7 @@ function operations(spec = openapi) {
 }
 async function call(target2, method, path, opts = {}) {
   const qs = new URLSearchParams(opts.query ?? {}).toString();
-  const headers = { "user-agent": `popcraft-cli/${"0.16.0"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.17.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -32554,14 +32554,12 @@ var init_en2 = __esm({
       "command:export.storefront": "Export storefront\u2026",
       "command:export.storefront#next-commerce": "Export storefront as Next.js Commerce components",
       "command:export.storefront#next-commerce-store": "Export storefront as a Next.js Commerce store",
-      "command:export.storefront#shopify-theme": "Export storefront as a Shopify theme",
       "command:export.web": "Export as web code\u2026",
       "command:export.webm": "Export animation as WebM",
       "command:file.duplicate": "Duplicate file",
       "command:generate.video": "Generate video",
       "command:history.redo": "Redo",
       "command:history.undo": "Undo",
-      "command:integration.pullProducts": "Draw with my store's products",
       "command:media.download": "Download",
       "command:motion.addAudio": "Add audio",
       "command:motion.applyPreset": "Animate",
@@ -32684,6 +32682,7 @@ var init_en2 = __esm({
       "command:show.setAdvance": "Set how the show advances",
       "command:site.setBreakpoints": "Breakpoints",
       "command:site.setBreakpoints#defaults": "Reset breakpoints to Desktop, Tablet and Phone",
+      "command:site.setEnvironment": "Site environment",
       "command:site.setGpuTransitions": "Draw 3D transitions with WebGPU",
       "command:site.setGpuTransitions#off": "Draw 3D transitions in CSS only",
       "command:site.setGpuTransitions#on": "Draw 3D transitions with WebGPU",
@@ -33809,7 +33808,6 @@ var init_en2 = __esm({
       "integrationsDialog.adminsOnly": "Only owners and admins of this team connect and disconnect accounts.",
       "integrationsDialog.cancel": "Cancel",
       "integrationsDialog.capabilityAuth": "Sign-in",
-      "integrationsDialog.capabilityCommerce": "Store",
       "integrationsDialog.capabilityDatabase": "Database",
       "integrationsDialog.capabilityDeploy": "Hosting",
       "integrationsDialog.capabilityRepo": "Code",
@@ -35658,7 +35656,7 @@ var init_en2 = __esm({
       "stateMachine.wholeFrame": "The whole frame",
       "storeSection.about": "Deploy it as a store that sells: a Next.js Commerce store on Vercel, with your Shopify store's products, cart and checkout.",
       "storeSection.building": "Building:",
-      "storeSection.connect": "Connect Shopify and Vercel\u2026",
+      "storeSection.connect": "Connect Vercel\u2026",
       "storeSection.deploy": "Deploy store",
       "storeSection.deployAgain": "Deploy store again",
       "storeSection.deploying": "Deploying store\u2026",
@@ -35667,6 +35665,7 @@ var init_en2 = __esm({
       "storeSection.noHost": "Not connected",
       "storeSection.noShop": "Not connected",
       "storeSection.sellsFrom": "Sells from Shopify",
+      "storeSection.setUpShop": "Choose the Shopify store it sells from in the Ecommerce plugin (Marketplace \u203A Plugins).",
       "storeSection.title": "Store",
       "strokeEndpointDropdown.circle": "Circle",
       "strokeEndpointDropdown.diamond": "Diamond",
@@ -241678,6 +241677,7 @@ function resyncText(doc2, ids2) {
 var isVirtualId;
 var init_invariants2 = __esm({
   "lib/document/invariants.ts"() {
+    "use strict";
     init_auto_layout();
     init_scene_graph();
     init_text_bounds();
@@ -254786,35 +254786,6 @@ var init_contract = __esm({
 });
 
 // lib/document/collections.ts
-var collections_exports = {};
-__export(collections_exports, {
-  COLLECTION_LIMITS: () => COLLECTION_LIMITS,
-  ITEM_RECORD: () => ITEM_RECORD,
-  copyRecord: () => copyRecord,
-  copySuffix: () => copySuffix,
-  exprData: () => exprData,
-  fieldKey: () => fieldKey,
-  fieldText: () => fieldText,
-  hasItemToken: () => hasItemToken,
-  itemMark: () => itemMark,
-  itemMarks: () => itemMarks,
-  itemNode: () => itemNode,
-  itemScope: () => itemScope,
-  itemText: () => itemText,
-  itemValues: () => itemValues,
-  layerId: () => layerId,
-  recordSlugs: () => recordSlugs,
-  recordsIn: () => recordsIn,
-  removeCollection: () => removeCollection,
-  removeRecords: () => removeRecords,
-  repeatRecords: () => repeatRecords,
-  setCollection: () => setCollection,
-  shownRecordOf: () => shownRecordOf,
-  slugify: () => slugify2,
-  templateRecord: () => templateRecord,
-  upsertRecords: () => upsertRecords,
-  withData: () => withData
-});
 function recordsIn(doc2, collectionId) {
   const c2 = doc2.collections?.[collectionId];
   if (!c2) return [];
@@ -264657,7 +264628,7 @@ var init_ydoc = __esm({
     "use strict";
     init_yjs();
     LOCAL_ORIGIN = "popcraft-local";
-    RECORD_FIELDS = ["styles", "variables", "variableCollections", "libraries", "compositions", "collections", "records", "codeModules"];
+    RECORD_FIELDS = ["styles", "variables", "variableCollections", "libraries", "compositions", "collections", "records", "codeModules", "pluginData"];
     META_FIELDS = ["name", "thumbnailNodeId", "voteResults", "settings", "site"];
     yRecordMaps = (ydoc) => RECORD_FIELDS.map((f2) => ydoc.getMap(f2));
     TRACK_PREFIX = "motion.tracks/";
@@ -304658,6 +304629,7 @@ function downloadBlob(blob, filename) {
 }
 var init_download = __esm({
   "lib/io/download.ts"() {
+    "use strict";
   }
 });
 
@@ -304875,6 +304847,7 @@ function creditLine(c2) {
 var MAX_PHOTO_PAGE, MAX_PHOTO_QUERY, UUID, isPhotoId, photoImagePath;
 var init_stock = __esm({
   "lib/photos/stock.ts"() {
+    "use strict";
     MAX_PHOTO_PAGE = 12;
     MAX_PHOTO_QUERY = 200;
     UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -305536,6 +305509,7 @@ function applyTextPath(layout2, path, tp, rebase = true) {
 var defaultCircleRadius, ownsPath, mapPoint;
 var init_text_path = __esm({
   "lib/engine/text/text-path.ts"() {
+    "use strict";
     init_scene_graph();
     init_transform();
     init_shape_to_path();
@@ -305653,6 +305627,7 @@ function areaBounds(rings) {
 }
 var init_text_area = __esm({
   "lib/engine/text/text-area.ts"() {
+    "use strict";
   }
 });
 
@@ -309977,7 +309952,6 @@ async function selectionReferenceImages(doc2, selection, opts = {}) {
 var FIT_QUALITIES, FIT_SCALES, blobToDataUrl;
 var init_reference_images = __esm({
   "lib/ai/reference-images.ts"() {
-    "use strict";
     init_export();
     init_selection_bounds();
     init_renderer_registry();
@@ -310809,7 +310783,6 @@ function agentToolList() {
 var AGENT_CAPABILITIES, legacyCommandId, legacyTools, blobToDataUrl3, provided, legacyTool, legacyToolList;
 var init_agent = __esm({
   "lib/commands/agent.ts"() {
-    "use strict";
     init_types5();
     init_registry();
     init_errors();
@@ -315221,6 +315194,1674 @@ var init_formats = __esm({
   }
 });
 
+// packages/runtime/src/commerce.ts
+var COMMERCE_SCHEMAS, COMMERCE_FIELDS, COMMERCE_PROP, COMMERCE_ACTIONS, COMMERCE_ACTION_PROP, isCommerceAction;
+var init_commerce = __esm({
+  "packages/runtime/src/commerce.ts"() {
+    "use strict";
+    COMMERCE_SCHEMAS = ["commerce.product", "commerce.collection", "commerce.cart", "commerce.cartLine", "commerce.menu"];
+    COMMERCE_FIELDS = {
+      "commerce.product": [
+        { name: "Title", type: "TEXT" },
+        { name: "Handle", type: "TEXT" },
+        { name: "URL", type: "URL" },
+        { name: "Description", type: "TEXT" },
+        { name: "Price", type: "TEXT" },
+        { name: "Max price", type: "TEXT" },
+        { name: "Image", type: "MEDIA" },
+        { name: "Image alt", type: "TEXT" },
+        { name: "Available", type: "BOOLEAN" },
+        { name: "Variant ID", type: "TEXT" },
+        { name: "Tags", type: "TEXT" }
+      ],
+      "commerce.collection": [{ name: "Title", type: "TEXT" }, { name: "Handle", type: "TEXT" }, { name: "URL", type: "URL" }, { name: "Description", type: "TEXT" }],
+      "commerce.cart": [
+        { name: "Count", type: "NUMBER" },
+        { name: "Subtotal", type: "TEXT" },
+        { name: "Taxes", type: "TEXT" },
+        { name: "Total", type: "TEXT" },
+        { name: "Checkout URL", type: "URL" }
+      ],
+      "commerce.cartLine": [
+        { name: "Title", type: "TEXT" },
+        { name: "Variant", type: "TEXT" },
+        { name: "URL", type: "URL" },
+        { name: "Image", type: "MEDIA" },
+        { name: "Quantity", type: "NUMBER" },
+        { name: "Price", type: "TEXT" },
+        { name: "Merchandise ID", type: "TEXT" }
+      ],
+      "commerce.menu": [{ name: "Title", type: "TEXT" }, { name: "URL", type: "URL" }]
+    };
+    COMMERCE_PROP = {
+      "commerce.product": { name: "products", type: "Product" },
+      "commerce.collection": { name: "collections", type: "Collection" },
+      "commerce.cart": { name: "cart", type: "Cart", one: true },
+      "commerce.cartLine": { name: "lines", type: "CartItem" },
+      "commerce.menu": { name: "menu", type: "Menu" }
+    };
+    COMMERCE_ACTIONS = ["addToCart", "updateCartLine", "removeCartLine", "checkout", "search"];
+    COMMERCE_ACTION_PROP = {
+      addToCart: "onAddToCart",
+      updateCartLine: "onUpdateCartLine",
+      removeCartLine: "onRemoveCartLine",
+      checkout: "onCheckout",
+      search: "onSearch"
+    };
+    isCommerceAction = (a) => typeof a === "string" && COMMERCE_ACTIONS.includes(a);
+  }
+});
+
+// lib/code/props.ts
+function propName(key5) {
+  const words = key5.split("#")[0].trim().split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const name2 = words.map((w, i2) => i2 === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return /^[A-Za-z_$]/.test(name2) ? name2 : `p${name2}`;
+}
+function componentOf(nodes, node2) {
+  const c2 = node2.type === "COMPONENT" ? node2 : node2.type === "INSTANCE" ? nodes[node2.mainComponentId] : void 0;
+  return c2?.type === "COMPONENT" ? c2 : void 0;
+}
+function codeOf(nodes, node2) {
+  if (node2.type !== "COMPONENT" && node2.type !== "INSTANCE") return null;
+  return componentOf(nodes, node2)?.code ?? null;
+}
+function codeProps(nodes, node2) {
+  const component = componentOf(nodes, node2);
+  const out = {};
+  if (!component) return out;
+  const set4 = component.parentId ? nodes[component.parentId] : void 0;
+  const defs = (set4?.type === "COMPONENT_SET" ? set4.componentPropertyDefinitions : component.componentPropertyDefinitions) ?? {};
+  const given = node2.type === "INSTANCE" ? node2.componentProperties ?? {} : {};
+  for (const key5 of Object.keys(defs).sort()) {
+    const v = value(key5 in given ? given[key5] : defs[key5].defaultValue);
+    if (v !== void 0) out[propName(key5)] = v;
+  }
+  out.width = Math.round(node2.width);
+  out.height = Math.round(node2.height);
+  return out;
+}
+var value;
+var init_props = __esm({
+  "lib/code/props.ts"() {
+    "use strict";
+    init_color();
+    value = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : v && typeof v === "object" && "r" in v ? colorToHex8(v) : void 0;
+  }
+});
+
+// lib/document/controls.ts
+function fieldPart(nodes, id3) {
+  const n = nodes[id3];
+  if (!n) return null;
+  if (n.type === "TEXT") return id3;
+  for (const c2 of n.childIds ?? []) {
+    const hit = fieldPart(nodes, c2);
+    if (hit) return hit;
+  }
+  return null;
+}
+var cleanName;
+var init_controls = __esm({
+  "lib/document/controls.ts"() {
+    "use strict";
+    cleanName = (raw) => raw.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  }
+});
+
+// lib/io/web/paint.ts
+function toRgba(c2, a) {
+  const alpha2 = a !== void 0 ? a : c2.a;
+  const [r, g, b] = [c2.r, c2.g, c2.b].map((v) => Math.round(v * 255));
+  return alpha2 < 1 ? `rgba(${r}, ${g}, ${b}, ${Math.round(alpha2 * 100) / 100})` : `rgb(${r}, ${g}, ${b})`;
+}
+function gradientAngleDeg(paint) {
+  const h = paint.gradientHandlePositions;
+  const p0 = h?.[0] ?? { x: 0, y: 0.5 };
+  const p1 = h?.[1] ?? { x: 1, y: 0.5 };
+  return Math.round(Math.atan2(p1.x - p0.x, -(p1.y - p0.y)) * 180 / Math.PI);
+}
+function paintToBackground(paint, opts = {}) {
+  if (paint.type === "SOLID" && paint.color) {
+    const alpha2 = (paint.opacity ?? 1) * paint.color.a;
+    return alpha2 < 1 ? toRgba(paint.color, alpha2) : toHex(paint.color);
+  }
+  if (paint.type === "GRADIENT_LINEAR") return `linear-gradient(${gradientAngleDeg(paint)}deg, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_RADIAL") return `radial-gradient(circle, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_ANGULAR") return `conic-gradient(${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_DIAMOND") return `radial-gradient(closest-side, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "IMAGE") {
+    const src = paint.imageUrl || paint.imageHash;
+    if (!src) return null;
+    return `url('${opts.fullImageUrl || src.length <= 64 ? src : src.slice(0, 64)}') ${IMAGE_FIT[paint.scaleMode ?? "FILL"]}`;
+  }
+  return null;
+}
+function parseCssColor(css) {
+  if (!css) return null;
+  const hex10 = /^#([0-9a-f]{6})$/i.exec(css.trim());
+  if (hex10) {
+    const n = parseInt(hex10[1], 16);
+    return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
+  }
+  const rgb = /^rgba?\(([^)]+)\)$/i.exec(css.trim());
+  if (!rgb) return null;
+  const parts = rgb[1].split(",").map((v) => Number(v.trim()));
+  if (parts.length < 3 || parts.some((v) => Number.isNaN(v))) return null;
+  return { r: parts[0] / 255, g: parts[1] / 255, b: parts[2] / 255, a: parts[3] ?? 1 };
+}
+var hex23, toHex, gradientStopsCSS, IMAGE_FIT, swiftColor, composeColor;
+var init_paint2 = __esm({
+  "lib/io/web/paint.ts"() {
+    "use strict";
+    hex23 = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
+    toHex = (c2) => `#${hex23(c2.r)}${hex23(c2.g)}${hex23(c2.b)}`.toUpperCase();
+    gradientStopsCSS = (paint) => (paint.gradientStops ?? []).map((s) => `${toRgba(s.color)} ${Math.round((s.position ?? 0) * 100)}%`).join(", ");
+    IMAGE_FIT = {
+      FILL: "center / cover no-repeat",
+      CROP: "center / cover no-repeat",
+      FIT: "center / contain no-repeat",
+      TILE: "top left / auto repeat"
+    };
+    swiftColor = (c2) => {
+      const n = (v) => Math.round(v * 1e3) / 1e3;
+      return `Color(red: ${n(c2.r)}, green: ${n(c2.g)}, blue: ${n(c2.b)}${(c2.a ?? 1) < 1 ? `, opacity: ${Math.round((c2.a ?? 1) * 100) / 100}` : ""})`;
+    };
+    composeColor = (c2) => `Color(0x${[c2.a ?? 1, c2.r, c2.g, c2.b].map((v) => Math.round(v * 255).toString(16).padStart(2, "0")).join("").toUpperCase()})`;
+  }
+});
+
+// lib/io/web/css.ts
+function stylePaints(styleId, styles) {
+  const s = styleId ? styles?.[styleId] : void 0;
+  return s?.type === "PAINT" ? s.paints ?? [] : null;
+}
+function transformParts(node2, dx = 0, dy = 0) {
+  return [
+    dx + restValue(node2, "translateX"),
+    dy + restValue(node2, "translateY"),
+    restValue(node2, "z"),
+    node2.rotation || 0,
+    restValue(node2, "rotateY"),
+    restValue(node2, "rotateX"),
+    restValue(node2, "scaleX") * (node2.flipHorizontal ? -1 : 1),
+    restValue(node2, "scaleY") * (node2.flipVertical ? -1 : 1)
+  ];
+}
+function transformFromParts(p2, orbit) {
+  const [tx2, ty, z2, r, ry0, rx0, sx, sy] = p2;
+  const ry = ry0 + (orbit?.rotateY ?? 0), rx = rx0 + (orbit?.rotateX ?? 0);
+  const parts = [];
+  if (tx2 || ty || z2) parts.push(z2 ? `translate3d(${round(tx2)}px, ${round(ty)}px, ${round(z2)}px)` : `translate(${round(tx2)}px, ${round(ty)}px)`);
+  if (r) parts.push(`rotate(${round(r)}deg)`);
+  if (ry) parts.push(`rotateY(${round(ry)}deg)`);
+  if (rx) parts.push(`rotateX(${round(rx)}deg)`);
+  if (sx !== 1 || sy !== 1) parts.push(`scale(${round(sx)}, ${round(sy)})`);
+  return parts.length ? parts.join(" ") : void 0;
+}
+function styleMapFor(node2, styles, opts = {}) {
+  const scene2 = node2;
+  const out = {};
+  out.width = `${Math.round(node2.width)}px`;
+  out.height = `${Math.round(node2.height)}px`;
+  const transform3 = transformCss(node2);
+  if (transform3) out.transform = transform3;
+  const ax = restValue(node2, "anchorX"), ay = restValue(node2, "anchorY");
+  if (transform3 && (ax !== 0.5 || ay !== 0.5)) out["transform-origin"] = `${round(ax * 100)}% ${round(ay * 100)}%`;
+  const scene3d = scene3dOf(node2);
+  if (scene3d) {
+    out.perspective = `${round(zoomPx(scene3d.camera.focalLength, node2.width))}px`;
+    out["perspective-origin"] = `${round((scene3d.originX ?? 0.5) * 100)}% ${round((scene3d.originY ?? 0.5) * 100)}%`;
+    out["transform-style"] = "preserve-3d";
+  } else if (has3DPlacement(node2) && passesThrough(node2)) out["transform-style"] = "preserve-3d";
+  if ((node2.opacity ?? 1) !== 1) out.opacity = String(round(node2.opacity ?? 1));
+  const bm = node2.blendMode;
+  if (bm && bm !== "NORMAL" && bm !== "PASS_THROUGH") out["mix-blend-mode"] = bm.toLowerCase().replace(/_/g, "-");
+  const fills = visibleFills(node2, styles);
+  const own2 = node2.type === "IMAGE" && node2.imageUrl ? [{ type: "IMAGE", imageUrl: node2.imageUrl, scaleMode: node2.scaleMode, visible: true }] : [];
+  const painted = [...fills, ...own2];
+  if (node2.type !== "TEXT" && painted.length) {
+    const layers2 = painted.map((f2) => paintToBackground(f2, opts)).filter((l) => !!l);
+    const over2 = (l) => /^(#|rgb)/.test(l) ? `linear-gradient(${l}, ${l})` : l;
+    if (layers2.length) out.background = layers2.map((l, i2) => i2 === layers2.length - 1 ? l : over2(l)).join(", ");
+  }
+  const cr = scene2.cornerRadius;
+  if (typeof cr === "number" && cr > 0) out["border-radius"] = `${cr}px`;
+  else if (Array.isArray(cr) && cr.some((r) => r > 0)) out["border-radius"] = cr.map((r) => `${r}px`).join(" ");
+  if (node2.type === "ELLIPSE") out["border-radius"] = "50%";
+  const stroke3 = scene2.strokes?.[0];
+  if (stroke3) {
+    const color4 = toHex(stroke3.color);
+    if (Array.isArray(stroke3.width)) {
+      out["border-style"] = "solid";
+      out["border-color"] = color4;
+      out["border-width"] = stroke3.width.map((w) => `${w}px`).join(" ");
+    } else if (stroke3.alignment === "OUTSIDE") {
+      out.outline = `${stroke3.width}px solid ${color4}`;
+    } else {
+      out.border = `${stroke3.width}px ${stroke3.dashPattern?.length ? "dashed" : "solid"} ${color4}`;
+      if (stroke3.alignment === "INSIDE") out["box-sizing"] = "border-box";
+    }
+  }
+  const shadows = shadowsOf(node2, styles).filter((s) => s.visible);
+  if (node2.type === "TEXT") {
+    const drops = shadows.filter((s) => s.type === "DROP_SHADOW");
+    if (drops.length) out["text-shadow"] = drops.map((s) => `${s.offset.x}px ${s.offset.y}px ${s.blur}px ${toRgba(s.color)}`).join(", ");
+  } else if (shadows.length) {
+    out["box-shadow"] = shadows.map((s) => `${s.type === "INNER_SHADOW" ? "inset " : ""}${s.offset.x}px ${s.offset.y}px ${s.blur}px ${s.spread}px ${toRgba(s.color)}`).join(", ");
+  }
+  const blurs = blursOf(node2, styles);
+  const layer2 = blurs.find((b) => b.type === "LAYER");
+  const backdrop = blurs.find((b) => b.type === "BACKGROUND");
+  if (layer2) out.filter = `blur(${layer2.radius}px)`;
+  if (backdrop) out["backdrop-filter"] = `blur(${backdrop.radius}px)`;
+  if (node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE") {
+    const f2 = node2;
+    Object.assign(out, flexDeclarations(f2));
+    if (f2.clipsContent) out.overflow = "hidden";
+  }
+  if (node2.type === "TEXT") {
+    const t3 = node2;
+    const tFills = visibleFills(t3, styles);
+    out.margin = "0";
+    if (t3.textAutoResize === "WIDTH_AND_HEIGHT") {
+      out.width = "max-content";
+      out.height = "auto";
+      out["white-space"] = "pre";
+    } else if (t3.textAutoResize === "HEIGHT") out.height = "auto";
+    out["font-family"] = `"${t3.fontFamily}", system-ui, sans-serif`;
+    out["font-size"] = `${t3.fontSize}px`;
+    out["font-weight"] = String(t3.fontWeight);
+    if (t3.fontStyle === "italic") out["font-style"] = "italic";
+    out["line-height"] = t3.lineHeight === "AUTO" ? "normal" : `${t3.lineHeight}px`;
+    if (t3.letterSpacing) out["letter-spacing"] = `${t3.letterSpacing}px`;
+    out["text-align"] = t3.textAlign.toLowerCase();
+    if (t3.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
+    else if (t3.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
+    const tc = t3.textCase;
+    if (tc === "UPPER") out["text-transform"] = "uppercase";
+    else if (tc === "LOWER") out["text-transform"] = "lowercase";
+    else if (tc === "TITLE") out["text-transform"] = "capitalize";
+    const solid5 = tFills.find((f2) => f2.type === "SOLID" && f2.color);
+    if (solid5?.color) out.color = toHex(solid5.color);
+    const grad = tFills.find((f2) => f2.type !== "SOLID");
+    const g = grad ? paintToBackground(grad) : null;
+    if (g) {
+      out.background = g;
+      out["-webkit-background-clip"] = "text";
+      out.color = "transparent";
+    }
+  }
+  return out;
+}
+function flexDeclarations(f2) {
+  const out = {};
+  if (f2.layoutMode !== "HORIZONTAL" && f2.layoutMode !== "VERTICAL") return out;
+  out.display = "flex";
+  out["flex-direction"] = f2.layoutMode === "HORIZONTAL" ? "row" : "column";
+  const justify = JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"];
+  const align4 = ALIGN2[f2.counterAxisAlignItems ?? "MIN"];
+  if (justify !== "flex-start") out["justify-content"] = justify;
+  if (align4 !== "flex-start") out["align-items"] = align4;
+  out.gap = `${f2.itemSpacing ?? 0}px`;
+  if (f2.padding) {
+    out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
+    if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
+  }
+  return out;
+}
+var visibleFills, round, transformCss, JUSTIFY, ALIGN2, styleMapToCSSText, styleMapToInline, camel2, styleMapToJSX;
+var init_css = __esm({
+  "lib/io/web/css.ts"() {
+    "use strict";
+    init_effects();
+    init_paint2();
+    init_scene3d();
+    init_transform3d();
+    init_transform();
+    visibleFills = (node2, styles) => (stylePaints(node2.fillStyleId, styles) ?? node2.fills ?? []).filter((f2) => f2.visible !== false);
+    round = (v) => Math.round(v * 100) / 100;
+    transformCss = (node2) => transformFromParts(transformParts(node2));
+    JUSTIFY = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", SPACE_BETWEEN: "space-between" };
+    ALIGN2 = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", BASELINE: "baseline" };
+    styleMapToCSSText = (m, indent = "") => Object.entries(m).map(([k2, v]) => `${indent}${k2}: ${v};`).join("\n");
+    styleMapToInline = (m) => Object.entries(m).map(([k2, v]) => `${k2}:${v}`).join(";");
+    camel2 = (k2) => k2.startsWith("--") ? k2 : (k2.startsWith("-") ? k2.replace(/^-/, "Webkit").replace(/-webkit-/i, "") : k2).replace(/-([a-z])/g, (_, c2) => c2.toUpperCase());
+    styleMapToJSX = (m) => Object.entries(m).map(([k2, v]) => [camel2(k2), v.replace(/'/g, "\\'")]);
+  }
+});
+
+// lib/io/web/expressible.ts
+function expressibility(node2, styles) {
+  const c2 = capability(node2, "css", styles);
+  return { css: c2.reason === "", reason: c2.reason, needsRaster: c2.verdict === "raster" };
+}
+var init_expressible = __esm({
+  "lib/io/web/expressible.ts"() {
+    "use strict";
+    init_capability();
+  }
+});
+
+// lib/io/web/keyframes.ts
+function transformOf(n, rest) {
+  return transformFromParts(transformParts(n, n.x - rest.x, n.y - rest.y)) ?? "none";
+}
+function declarationsOf(node2, rest, style) {
+  return { ...style(node2), transform: transformOf(node2, rest), opacity: String(round2(node2.visible === false ? 0 : node2.opacity ?? 1)) };
+}
+function vectorOf(style, keys4) {
+  const text = keys4.map((k2) => `${k2}:${style[k2] ?? ""}`).join(";");
+  return { shape: text.replace(NUMBER2, "#"), v: (text.match(NUMBER2) ?? []).map(Number) };
+}
+function thinSamples(times2, samples, tol, pinned = []) {
+  const n = samples.length;
+  if (n <= 2) return samples.map((_, i2) => i2);
+  const keep = /* @__PURE__ */ new Set([0, n - 1, ...pinned]);
+  for (let i2 = 1; i2 < n; i2++) if (samples[i2].shape !== samples[i2 - 1].shape) {
+    keep.add(i2 - 1);
+    keep.add(i2);
+  }
+  const sorted = () => [...keep].sort((a, b) => a - b);
+  const stack = [];
+  const kept = sorted();
+  for (let i2 = 1; i2 < kept.length; i2++) stack.push([kept[i2 - 1], kept[i2]]);
+  while (stack.length) {
+    const [a, b] = stack.pop();
+    if (b - a < 2 || samples[a].shape !== samples[b].shape) continue;
+    let worst2 = -1, at3 = -1;
+    for (let i2 = a + 1; i2 < b; i2++) {
+      const k2 = (times2[i2] - times2[a]) / (times2[b] - times2[a] || 1);
+      let err2 = 0;
+      samples[i2].v.forEach((x2, d) => {
+        const want = samples[a].v[d] + (samples[b].v[d] - samples[a].v[d]) * k2;
+        err2 = Math.max(err2, Math.abs(x2 - want) / tol[d]);
+      });
+      if (err2 > worst2) {
+        worst2 = err2;
+        at3 = i2;
+      }
+    }
+    if (worst2 > 1) {
+      keep.add(at3);
+      stack.push([a, at3], [at3, b]);
+    }
+  }
+  return sorted();
+}
+function keyframesOf(times2, samples, length2) {
+  const keys4 = [...new Set(samples.flatMap((s) => Object.keys(s)))].filter((k2) => !FIXED.has(k2));
+  const moving = keys4.filter((k2) => samples.some((s) => s[k2] !== samples[0][k2]));
+  if (!moving.length) return null;
+  const vectors = samples.map((s) => vectorOf(s, moving));
+  const dims = Math.max(...vectors.map((v) => v.v.length));
+  const range3 = Array.from({ length: dims }, (_, d) => {
+    let lo = Infinity, hi = -Infinity;
+    for (const v of vectors) if (d < v.v.length) {
+      lo = Math.min(lo, v.v[d]);
+      hi = Math.max(hi, v.v[d]);
+    }
+    return hi > lo ? hi - lo : 0;
+  });
+  const tol = range3.map((r) => Math.max(1e-3, r * 3e-3));
+  const same5 = (a, b) => vectors[a].shape === vectors[b].shape && vectors[a].v.every((x2, d) => Math.abs(x2 - vectors[b].v[d]) <= tol[d]);
+  const jumps = /* @__PURE__ */ new Set();
+  for (let i2 = 1; i2 < samples.length; i2++) {
+    if (same5(i2 - 1, i2)) continue;
+    const stillBefore = i2 >= 2 && same5(i2 - 2, i2 - 1);
+    if (!stillBefore) continue;
+    const words = vectors[i2].shape !== vectors[i2 - 1].shape;
+    const far = !words && vectors[i2].v.some((x2, d) => range3[d] > 0 && Math.abs(x2 - vectors[i2 - 1].v[d]) > range3[d] * 0.2);
+    if (words || far) jumps.add(i2);
+  }
+  const kept = thinSamples(times2, vectors, tol, [...jumps].flatMap((i2) => [i2 - 1, i2]));
+  return kept.map((i2) => {
+    const style = {};
+    for (const k2 of moving) if (samples[i2][k2] !== void 0) style[k2] = samples[i2][k2];
+    return { offset: pct(times2[i2] / (length2 || 1)), style, ...jumps.has(i2 + 1) ? { step: true } : {} };
+  });
+}
+var SAMPLE_RATE, round2, pct, FIXED, NUMBER2;
+var init_keyframes = __esm({
+  "lib/io/web/keyframes.ts"() {
+    "use strict";
+    init_css();
+    SAMPLE_RATE = 30;
+    round2 = (v) => Math.round(v * 1e3) / 1e3;
+    pct = (k2) => Math.round(k2 * 1e5) / 1e3;
+    FIXED = /* @__PURE__ */ new Set(["position", "display", "left", "top", "right", "bottom", "inset", "animation", "animation-play-state", "transform-origin", "transform-style", "box-sizing", "isolation", "z-index"]);
+    NUMBER2 = /-?\d+(?:\.\d+)?(?:e-?\d+)?/g;
+  }
+});
+
+// lib/io/web/element.ts
+function placementStyle(node2, isRoot) {
+  if (node2.place) return { ...node2.place, ...node2.place.position ? {} : node2.layered || node2.children.some((c2) => c2.positioning === "absolute") ? { position: "relative" } : {} };
+  const out = {};
+  if (node2.positioning === "absolute" && !isRoot) {
+    out.position = "absolute";
+    out.left = `${node2.x}px`;
+    out.top = `${node2.y}px`;
+  } else if (node2.layered || node2.children.some((c2) => c2.positioning === "absolute") || isRoot) {
+    out.position = "relative";
+  }
+  return out;
+}
+function imageRole(node2) {
+  if (node2.asset || node2.text) return null;
+  if (node2.type !== "IMAGE" && node2.alt === void 0) return null;
+  return roleOf(node2);
+}
+function pictureOf(node2) {
+  const a = node2.asset;
+  if (!a) return null;
+  if (a.src) return { kind: "img", src: a.src };
+  if (a.svg) return { kind: "svg", svg: a.svg };
+  if (a.pngDataUrl) return { kind: "img", src: a.pngDataUrl };
+  return { kind: "missing", reason: a.reason, format: a.kind };
+}
+function elementOf(node2, ctx2) {
+  const motion = ctx2.still ? void 0 : node2.motion;
+  const spec = ctx2.spec ?? null;
+  const tag = node2.input ? node2.input.tag : node2.link ? "a" : node2.tag ?? (node2.text ? "p" : "div");
+  const attrs = { ...node2.attrs };
+  if (node2.input) Object.assign(attrs, node2.input.attrs);
+  if (node2.link && !node2.input) {
+    attrs.href = node2.link.href;
+    if (node2.link.newTab) {
+      attrs.target = "_blank";
+      attrs.rel = "noopener noreferrer";
+    }
+  }
+  return {
+    tag,
+    attrs,
+    // A tag's own look (a button's border, a link's underline, a list's bullets) is not the layer's: under its declarations.
+    style: { ...node2.link || node2.tag || node2.input ? TAG_RESET[tag] : void 0, ...placementStyle(node2, ctx2.isRoot), ...node2.style, ...motion ? motion.style : {}, ...hiddenAtStart(spec, node2) ? HIDDEN_AT_START : {} },
+    // A field's words are its placeholder (an attribute), not its content.
+    ...node2.text && !node2.input ? { text: node2.text.characters } : {},
+    ...node2.text && node2.runs && !node2.input ? { runs: node2.runs } : {},
+    ...node2.input ? { input: node2.input } : {},
+    ...node2.html !== void 0 ? { html: node2.html } : {},
+    ...node2.check ? { check: node2.check } : {},
+    picture: pictureOf(node2),
+    role: imageRole(node2),
+    ...motion ? { keyframes: motion.keyframes } : {},
+    ...node2.motionTrigger ? { motionTrigger: node2.motionTrigger } : {},
+    ...spec && node2.uid !== void 0 ? { pc: { uid: node2.uid, layer: node2.name } } : {},
+    ...ctx2.listened?.has(node2.id) ? { sm: node2.id } : {}
+  };
+}
+var escapeHTML, altFor, roleOf, roleAttrs, labelSVG, imageRoleAttrs, hiddenAtStart, HIDDEN_AT_START, FIELD, HEADING, TAG_RESET, MOTION_PLAY_RULE, CHECK_STYLE;
+var init_element = __esm({
+  "lib/io/web/element.ts"() {
+    "use strict";
+    escapeHTML = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    altFor = (node2) => node2.alt ?? node2.name;
+    roleOf = (node2) => {
+      const alt = altFor(node2);
+      return alt === "" ? { hidden: true } : { label: alt };
+    };
+    roleAttrs = (role) => "hidden" in role ? ' aria-hidden="true"' : ` role="img" aria-label="${escapeHTML(role.label)}"`;
+    labelSVG = (svg, node2) => svg.replace(/^<svg\b/, `<svg${roleAttrs(roleOf(node2))}`);
+    imageRoleAttrs = (node2) => {
+      const role = imageRole(node2);
+      return role ? roleAttrs(role) : "";
+    };
+    hiddenAtStart = (spec, node2) => {
+      const e = spec && node2.uid !== void 0 ? spec.e[node2.uid] : void 0;
+      return !!e && e[1][spec.m[e[0]]] === -1;
+    };
+    HIDDEN_AT_START = { opacity: "0", visibility: "hidden", "pointer-events": "none", position: "absolute" };
+    FIELD = { display: "block", border: "0", padding: "0", margin: "0", background: "none", outline: "none", font: "inherit", color: "inherit", "min-width": "0" };
+    HEADING = { margin: "0", "font-size": "inherit", "font-weight": "inherit" };
+    TAG_RESET = {
+      a: { display: "block", color: "inherit", "text-decoration": "none" },
+      button: { display: "block", border: "0", padding: "0", background: "none", font: "inherit", color: "inherit", "text-align": "inherit", cursor: "pointer" },
+      ul: { "list-style": "none", margin: "0", padding: "0" },
+      ol: { "list-style": "none", margin: "0", padding: "0" },
+      h1: HEADING,
+      h2: HEADING,
+      h3: HEADING,
+      h4: HEADING,
+      h5: HEADING,
+      h6: HEADING,
+      p: { margin: "0" },
+      figure: { margin: "0" },
+      span: { display: "block" },
+      label: { display: "block" },
+      form: { margin: "0" },
+      input: FIELD,
+      textarea: { ...FIELD, resize: "none" },
+      select: { ...FIELD, appearance: "none" }
+    };
+    MOTION_PLAY_RULE = "[data-motion-play] [data-motion-child] { animation-play-state: running; }";
+    CHECK_STYLE = "position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer";
+  }
+});
+
+// lib/io/web/motion.ts
+function instanceWebMotion(doc2, instance, style) {
+  const comp = instance.mainComponentId;
+  if (!comp || !isMotionComponent(doc2.nodes, comp)) return null;
+  const m = playbackOf(doc2.nodes, instance, comp);
+  const [a, b] = m.range;
+  const len3 = b - a;
+  if (len3 <= 0) return null;
+  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
+  const times2 = Array.from({ length: steps + 1 }, (_, i2) => len3 * i2 / steps);
+  const samples = [];
+  for (let i2 = 0; i2 <= steps; i2++) samples.push(instancePoseAt(doc2.nodes, instance.id, a + len3 * i2 / steps));
+  const ids2 = /* @__PURE__ */ new Set();
+  for (const s of samples) for (const id3 in s) if (id3.includes("::")) ids2.add(id3);
+  const children = /* @__PURE__ */ new Map();
+  const tag = instance.id.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
+  let n = 0;
+  for (const id3 of ids2) {
+    const restNode = resolveVirtualNode2(doc2.nodes, id3);
+    if (!restNode) continue;
+    const frames = keyframesOf(times2, samples.map((s) => declarationsOf(s[id3] ?? restNode, restNode, style)), len3);
+    if (!frames) continue;
+    children.set(id3, {
+      name: `motion-${tag}-${n++}`,
+      frames,
+      durationMs: m.speed > 0 ? Math.round(len3 / m.speed) : 0,
+      delayMs: Math.round(m.start),
+      iterations: m.loop === "none" ? 1 : "infinite",
+      direction: m.loop === "pingpong" ? "alternate" : "normal",
+      fill: m.hold === "first" ? "backwards" : "both"
+    });
+  }
+  return children.size ? { trigger: m.trigger, children } : null;
+}
+function animationStyle(mo, trigger) {
+  const out = { animation: `${mo.name} ${mo.durationMs}ms linear ${mo.delayMs}ms ${mo.iterations} ${mo.direction} ${mo.fill}` };
+  if (trigger !== "load") out["animation-play-state"] = "paused";
+  return out;
+}
+var keyframesCSS, MOTION_SCRIPT;
+var init_motion = __esm({
+  "lib/io/web/motion.ts"() {
+    "use strict";
+    init_scene_graph();
+    init_instances2();
+    init_keyframes();
+    init_keyframes();
+    init_element();
+    keyframesCSS = (mo) => `@keyframes ${mo.name} {
+${mo.frames.map((f2) => `  ${f2.offset}% { ${Object.entries(f2.style).map(([k2, v]) => `${k2}: ${v};`).join(" ")}${f2.step ? " animation-timing-function: step-end;" : ""} }`).join("\n")}
+}`;
+    MOTION_SCRIPT = `(function () {
+  var play = function (el) { el.setAttribute('data-motion-play', '') };
+  document.querySelectorAll('[data-motion="click"]').forEach(function (el) { el.addEventListener('click', function () { play(el) }) });
+  document.querySelectorAll('[data-motion="hover"]').forEach(function (el) { el.addEventListener('mouseenter', function () { play(el) }) });
+  var seen = document.querySelectorAll('[data-motion="inView"]');
+  if (!('IntersectionObserver' in window)) { seen.forEach(play); return }
+  var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { play(e.target); io.unobserve(e.target) } }) }, { threshold: 0.25 });
+  seen.forEach(function (el) { io.observe(el) });
+})();`;
+  }
+});
+
+// lib/io/web/responsive.ts
+function containerStyle(f2) {
+  const out = {};
+  if (isStack(f2) && f2.layoutWrap === "WRAP") {
+    out["flex-wrap"] = "wrap";
+    const cross2 = f2.counterAxisSpacing ?? f2.itemSpacing ?? 0;
+    const main2 = f2.itemSpacing ?? 0;
+    if (cross2 !== main2) out.gap = f2.layoutMode === "HORIZONTAL" ? `${cross2}px ${main2}px` : `${main2}px ${cross2}px`;
+    out["align-content"] = "flex-start";
+  }
+  if (isGrid(f2)) {
+    out.display = "grid";
+    const cols = f2.layoutGridColumns ?? "AUTO";
+    out["grid-template-columns"] = cols === "AUTO" ? `repeat(auto-fill, minmax(${f2.layoutGridMinColumnWidth ?? 100}px, 1fr))` : Array.from({ length: Math.max(1, cols) }, (_, i2) => track(f2.layoutGridColumnSizes?.[i2])).join(" ");
+    const rows = f2.layoutGridRows ?? "AUTO";
+    if (rows === "AUTO") out["grid-auto-rows"] = `minmax(${f2.layoutGridMinRowHeight ?? 100}px, auto)`;
+    else out["grid-template-rows"] = Array.from({ length: Math.max(1, rows) }, (_, i2) => track(f2.layoutGridRowSizes?.[i2])).join(" ");
+    const colGap = f2.itemSpacing ?? 0, rowGap = f2.counterAxisSpacing ?? colGap;
+    out.gap = rowGap === colGap ? `${colGap}px` : `${rowGap}px ${colGap}px`;
+    if (f2.padding) {
+      out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
+      if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
+    }
+  }
+  const scroll = f2.overflowScrolling;
+  if (scroll && scroll !== "NONE") {
+    out["overflow-x"] = scroll === "HORIZONTAL" || scroll === "BOTH" ? "auto" : "hidden";
+    out["overflow-y"] = scroll === "VERTICAL" || scroll === "BOTH" ? "auto" : "hidden";
+  }
+  return out;
+}
+function flowChild(node2, parent) {
+  const style = { ...limits(node2) };
+  const h = node2.layoutSizingHorizontal ?? "FIXED", v = node2.layoutSizingVertical ?? "FIXED";
+  if (isGrid(parent)) {
+    if (h !== "FIXED") style.width = h === "FILL" ? null : "fit-content";
+    if (v !== "FIXED") style.height = null;
+    return { style };
+  }
+  if (h === "FIXED" && style["max-width"] === void 0) style["max-width"] = "100%";
+  const row2 = parent.layoutMode === "HORIZONTAL";
+  const main2 = row2 ? h : v, cross2 = row2 ? v : h;
+  const mainProp = row2 ? "width" : "height", crossProp = row2 ? "height" : "width";
+  if (main2 === "FILL") {
+    style[mainProp] = null;
+    style.flex = "1 1 0";
+    if (style[`min-${mainProp}`] === void 0) style[`min-${mainProp}`] = "0";
+  } else {
+    if (main2 === "HUG") style[mainProp] = null;
+    style["flex-shrink"] = "0";
+  }
+  if (cross2 === "FILL") {
+    style[crossProp] = null;
+    style["align-self"] = "stretch";
+  } else {
+    if (cross2 === "HUG") style[crossProp] = null;
+    if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
+  }
+  return { style };
+}
+function constrained(kind, pos, size6, parentSize, start2, end, sizeProp) {
+  const far = parentSize - pos - size6;
+  switch (kind) {
+    case "MAX":
+      return { place: { [end]: px2(far) }, style: {} };
+    case "STRETCH":
+      return { place: { [start2]: px2(pos), [end]: px2(far) }, style: { [sizeProp]: null } };
+    // Its centre keeps its distance from the parent's centre.
+    case "CENTER":
+      return { place: { [start2]: `calc(50% + ${px2(pos - parentSize / 2)})` }, style: {} };
+    case "SCALE":
+      return parentSize > 0 ? { place: { [start2]: pct2(pos / parentSize) }, style: { [sizeProp]: pct2(size6 / parentSize) } } : { place: { [start2]: px2(pos) }, style: {} };
+    default:
+      return { place: { [start2]: px2(pos) }, style: {} };
+  }
+}
+function placedChild(node2, parent, frame2 = parent) {
+  const c2 = node2.constraints ?? { horizontal: "MIN", vertical: "MIN" };
+  const x2 = constrained(c2.horizontal, node2.x, node2.width, frame2.width, "left", "right", "width");
+  const y = constrained(c2.vertical, node2.y, node2.height, frame2.height, "top", "bottom", "height");
+  return { style: { ...limits(node2), ...x2.style, ...y.style }, place: { position: "absolute", ...x2.place, ...y.place } };
+}
+function siteLayout(node2, parent, layout2) {
+  const own2 = node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE" ? node2 : null;
+  if (!parent) {
+    const grows = !own2 || laysOut(own2) || own2.overflowScrolling === "NONE" || !own2.overflowScrolling;
+    return { style: { ...limits(node2), width: "100%", ...grows ? { height: null, "min-height": `max(${px2(node2.height)}, 100dvh)` } : {} }, place: { position: "relative" } };
+  }
+  const s = node2;
+  return layout2 && laysOut(layout2) && s.layoutPositioning !== "ABSOLUTE" ? flowChild(s, layout2) : placedChild(s, parent, parent.type === "INSTANCE" && layout2 ? layout2 : parent);
+}
+var px2, pct2, isStack, isGrid, laysOut, track, limits;
+var init_responsive = __esm({
+  "lib/io/web/responsive.ts"() {
+    "use strict";
+    px2 = (v) => `${Math.round(v * 100) / 100}px`;
+    pct2 = (v) => `${Math.round(v * 1e4) / 100}%`;
+    isStack = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
+    isGrid = (f2) => f2?.layoutMode === "GRID";
+    laysOut = (f2) => isStack(f2) || isGrid(f2);
+    track = (t3) => {
+      if (!t3 || t3.sizing === "FILL") return t3?.value && /fr$/.test(t3.value) ? t3.value : "1fr";
+      if (t3.sizing === "HUG") return "auto";
+      return /^[\d.]+$/.test(t3.value) ? `${t3.value}px` : t3.value;
+    };
+    limits = (n) => {
+      const out = {};
+      if (n.minWidth !== void 0) out["min-width"] = px2(n.minWidth);
+      if (n.maxWidth !== void 0) out["max-width"] = px2(n.maxWidth);
+      if (n.minHeight !== void 0) out["min-height"] = px2(n.minHeight);
+      if (n.maxHeight !== void 0) out["max-height"] = px2(n.maxHeight);
+      return out;
+    };
+  }
+});
+
+// lib/io/web/richtext.ts
+function runStyle(seg) {
+  const out = {};
+  if (seg.fontFamily) out["font-family"] = `"${seg.fontFamily}", system-ui, sans-serif`;
+  if (seg.fontSize) out["font-size"] = `${seg.fontSize}px`;
+  if (seg.fontWeight) out["font-weight"] = String(seg.fontWeight);
+  if (seg.fontStyle) out["font-style"] = seg.fontStyle;
+  if (seg.lineHeight !== void 0 && seg.lineHeight !== "AUTO") out["line-height"] = `${seg.lineHeight}px`;
+  if (seg.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
+  else if (seg.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
+  else if (seg.textDecoration === "NONE") out["text-decoration"] = "none";
+  if (seg.textCase === "UPPER") out["text-transform"] = "uppercase";
+  else if (seg.textCase === "LOWER") out["text-transform"] = "lowercase";
+  else if (seg.textCase === "TITLE") out["text-transform"] = "capitalize";
+  else if (seg.textCase === "ORIGINAL") out["text-transform"] = "none";
+  const solid5 = seg.fills?.find((f2) => f2.visible !== false && f2.type === "SOLID" && f2.color);
+  if (solid5?.color) out.color = toHex(solid5.color);
+  return out;
+}
+function textRuns(t3) {
+  const text = t3.characters ?? "";
+  const segs = [...t3.styledSegments ?? []].filter((s) => s.end > s.start).sort((a, b) => a.start - b.start);
+  if (!segs.length && !t3.link) return void 0;
+  const runs = [];
+  const push2 = (from2, to, seg) => {
+    if (to <= from2) return;
+    const link2 = seg?.link ?? t3.link;
+    runs.push({ text: text.slice(from2, to), style: seg ? runStyle(seg) : {}, ...link2 ? { link: link2 } : {} });
+  };
+  let at3 = 0;
+  for (const s of segs) {
+    const start2 = Math.max(at3, Math.min(text.length, s.start)), end = Math.min(text.length, s.end);
+    push2(at3, start2);
+    push2(start2, end, s);
+    at3 = Math.max(at3, end);
+  }
+  push2(at3, text.length);
+  return runs;
+}
+var init_richtext = __esm({
+  "lib/io/web/richtext.ts"() {
+    "use strict";
+    init_paint2();
+  }
+});
+
+// lib/document/dev-mode.ts
+function codeSyntaxFor(v, platform4) {
+  const explicit = v.codeSyntax?.[platform4];
+  if (explicit) return explicit;
+  const parts = v.name.split("/").map((p2) => p2.trim()).filter(Boolean);
+  if (platform4 === "WEB") return `--${parts.join("-").toLowerCase().replace(/[^a-z0-9-]+/g, "-")}`;
+  const camel4 = parts.map((p2, i2) => {
+    const w = p2.replace(/[^A-Za-z0-9]+/g, " ").trim().split(/\s+/);
+    return w.map((x2, j) => i2 === 0 && j === 0 ? x2.toLowerCase() : x2[0].toUpperCase() + x2.slice(1).toLowerCase()).join("");
+  }).join("");
+  return platform4 === "iOS" ? `Tokens.${camel4}` : `Tokens.${camel4}`;
+}
+var init_dev_mode = __esm({
+  "lib/document/dev-mode.ts"() {
+    "use strict";
+  }
+});
+
+// lib/io/web/tokens.ts
+function cssValue(v, value3) {
+  if (v.type === "COLOR") return isColor3(value3) ? (value3.a ?? 1) < 1 ? toRgba(value3) : toHex(value3) : null;
+  if (v.type === "FLOAT") return typeof value3 === "number" && Number.isFinite(value3) ? String(Math.round(value3 * 1e3) / 1e3) : null;
+  if (v.type === "STRING") return typeof value3 === "string" ? JSON.stringify(value3) : null;
+  return null;
+}
+function siteTokens(doc2) {
+  const collections = Object.values(doc2.variableCollections ?? {}).map((c2) => ({
+    id: c2.id,
+    name: c2.name,
+    defaultMode: c2.defaultModeId,
+    modes: c2.modes.map((m) => ({ id: m.id, name: m.name, className: modeClass(c2, m) }))
+  }));
+  const taken = /* @__PURE__ */ new Set();
+  const vars = [];
+  for (const v of Object.values(doc2.variables ?? {}).sort((a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id))) {
+    const values3 = {};
+    for (const [mode, value3] of Object.entries(v.valuesByMode ?? {})) {
+      const css = cssValue(v, value3);
+      if (css !== null) values3[mode] = css;
+    }
+    if (!Object.keys(values3).length) continue;
+    let name2 = codeSyntaxFor(v, "WEB");
+    if (!name2.startsWith("--")) name2 = `--${slug(name2)}`;
+    if (taken.has(name2)) name2 = `${name2}-${v.id.replace(/[^a-zA-Z0-9]/g, "").slice(-4)}`;
+    taken.add(name2);
+    vars.push({ id: v.id, name: name2, type: v.type, collection: v.variableCollectionId, values: values3 });
+  }
+  const active3 = Object.entries(doc2.activeVariableModes ?? {}).flatMap(([cid, mid]) => {
+    const c2 = collections.find((x2) => x2.id === cid);
+    const m = c2 && mid !== c2.defaultMode ? c2.modes.find((x2) => x2.id === mid) : void 0;
+    return m ? [m.className] : [];
+  });
+  return { collections, vars, active: active3 };
+}
+function tokensCSS(tokens) {
+  const rules = [];
+  const defaults3 = [];
+  const byMode = /* @__PURE__ */ new Map();
+  for (const v of tokens.vars) {
+    const c2 = tokens.collections.find((x2) => x2.id === v.collection);
+    const base = v.values[c2?.defaultMode ?? ""] ?? Object.values(v.values)[0];
+    defaults3.push(`  ${v.name}: ${base};`);
+    if (v.type === "FLOAT") rules.push(`@property ${v.name} { syntax: '<number>'; inherits: true; initial-value: ${base}; }`);
+    for (const m of c2?.modes ?? []) {
+      if (m.id === c2.defaultMode || v.values[m.id] === void 0 || v.values[m.id] === base) continue;
+      (byMode.get(m.className) ?? byMode.set(m.className, []).get(m.className)).push(`  ${v.name}: ${v.values[m.id]};`);
+    }
+  }
+  if (defaults3.length) rules.push(`:root {
+${defaults3.join("\n")}
+}`);
+  for (const [cls, lines2] of byMode) rules.push(`.${cls} {
+${lines2.join("\n")}
+}`);
+  return rules;
+}
+function tokenStyle(raw, style, tokens) {
+  const name2 = (id3) => id3 ? tokens.vars.find((v) => v.id === id3)?.name : void 0;
+  const out = {};
+  const fills = (raw.fills ?? []).filter((f2) => f2.visible !== false);
+  const fill = fills.length === 1 && fills[0].type === "SOLID" && (fills[0].opacity ?? 1) === 1 ? name2(fills[0].boundVariables?.color) : void 0;
+  if (fill) {
+    if (raw.type === "TEXT") {
+      if (style.color) out.color = `var(${fill})`;
+    } else if (style.background) out.background = `var(${fill})`;
+  }
+  const stroke3 = raw.strokes?.[0];
+  const strokeVar = name2(stroke3?.boundVariables?.color);
+  if (strokeVar) {
+    if (style["border-color"]) out["border-color"] = `var(${strokeVar})`;
+    for (const p2 of ["border", "outline"]) if (style[p2]) out[p2] = style[p2].replace(/(#[0-9A-Fa-f]{3,8}|rgba?\([^)]*\))$/, `var(${strokeVar})`);
+  }
+  for (const [prop, id3] of Object.entries(raw.boundVariables ?? {})) {
+    const rule2 = NUMBER_PROPS[prop];
+    const token = tokens.vars.find((v) => v.id === id3);
+    if (!rule2 || !token || token.type !== "FLOAT" || style[rule2[0]] === void 0) continue;
+    out[rule2[0]] = rule2[1](token.name);
+  }
+  return out;
+}
+var slug, modeClass, isColor3, px3, NUMBER_PROPS;
+var init_tokens2 = __esm({
+  "lib/io/web/tokens.ts"() {
+    "use strict";
+    init_dev_mode();
+    init_paint2();
+    slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "x";
+    modeClass = (collection, mode) => `pc-${slug(collection.name)}-${slug(mode.name)}`;
+    isColor3 = (v) => !!v && typeof v === "object" && "r" in v && "g" in v && "b" in v;
+    px3 = (name2) => `calc(var(${name2}) * 1px)`;
+    NUMBER_PROPS = {
+      width: ["width", px3],
+      height: ["height", px3],
+      opacity: ["opacity", (n) => `var(${n})`],
+      cornerRadius: ["border-radius", px3],
+      itemSpacing: ["gap", px3],
+      fontSize: ["font-size", px3],
+      letterSpacing: ["letter-spacing", px3]
+    };
+  }
+});
+
+// lib/io/web/timeline.ts
+function frameWebMotion(doc2, frameId, style) {
+  const nodes = doc2.nodes;
+  const frame2 = nodes[frameId];
+  if (!frame2 || !hasFrameMotion(nodes, frameId)) return null;
+  const len3 = timelineDuration(nodes, frameId);
+  if (!(len3 > 0)) return null;
+  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
+  const times2 = [];
+  const poses = [];
+  for (let i2 = 0; i2 <= steps; i2++) {
+    const t3 = len3 * i2 / steps;
+    times2.push(t3);
+    poses.push(evaluatePose(nodes, { kind: "frame", frameId }, t3).nodes);
+  }
+  const ids2 = /* @__PURE__ */ new Set();
+  for (const p2 of poses) for (const id3 in p2) if (id3 !== frameId && p2[id3] !== nodes[id3]) ids2.add(id3);
+  const loops = frameRunsOn(nodes, frameId);
+  const out = /* @__PURE__ */ new Map();
+  const tag = frameId.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
+  let n = 0;
+  for (const id3 of ids2) {
+    const rest = id3.includes("::") ? resolveVirtualNode2(nodes, id3) : nodes[id3];
+    if (!rest || !underFrame(nodes, id3, frameId)) continue;
+    const frames = keyframesOf(times2, poses.map((p2) => declarationsOf(p2[id3] ?? rest, rest, style)), len3);
+    if (!frames) continue;
+    out.set(id3, {
+      name: `timeline-${tag}-${n++}`,
+      frames,
+      durationMs: Math.round(len3),
+      delayMs: 0,
+      iterations: loops ? "infinite" : 1,
+      direction: "normal",
+      fill: "both"
+    });
+  }
+  return out.size ? out : null;
+}
+function underFrame(nodes, id3, frameId) {
+  const real = id3.split("::")[0];
+  for (let n = nodes[real]; n; n = n.parentId ? nodes[n.parentId] : void 0) if (n.id === frameId) return true;
+  return false;
+}
+var init_timeline = __esm({
+  "lib/io/web/timeline.ts"() {
+    "use strict";
+    init_scene_graph();
+    init_pose();
+    init_instances2();
+    init_keyframes();
+  }
+});
+
+// lib/io/web/generated/runtimes.ts
+var PROTOTYPE_JS, MACHINE_JS;
+var init_runtimes = __esm({
+  "lib/io/web/generated/runtimes.ts"() {
+    "use strict";
+    PROTOTYPE_JS = 'function popcraftMount(root, spec) {\n  var els = {}, state = {}, owned = {}, orbit = {}, last = {}, holds = {}, hist = [], timers = [];\n  var nodes = [root].concat(Array.prototype.slice.call(root.querySelectorAll("[data-pc]")));\n  nodes.forEach(function(el) {\n    els[el.getAttribute("data-pc")] = el;\n  });\n  for (var m in spec.m) state[m] = spec.m[m];\n  for (var u in spec.e) (owned[spec.e[u][0]] = owned[spec.e[u][0]] || []).push(u);\n  var drags = {}, clicks = {};\n  spec.on.forEach(function(o) {\n    if (o[3] === "drag") drags[o[0]] = 1;\n    if (o[3] === "click" || o[3] === "press") clicks[o[0]] = 1;\n  });\n  function lookIn(u2, st) {\n    var e = spec.e[u2];\n    if (!e) return -2;\n    var i = e[1][st === void 0 ? state[e[0]] : st];\n    return i === void 0 ? -1 : i;\n  }\n  function tf(f, o) {\n    var ry = f[4] + (o ? o.ry : 0), rx = f[5] + (o ? o.rx : 0), p = [];\n    if (f[0] || f[1] || f[2]) p.push(f[2] ? "translate3d(" + f[0] + "px, " + f[1] + "px, " + f[2] + "px)" : "translate(" + f[0] + "px, " + f[1] + "px)");\n    if (f[3]) p.push("rotate(" + f[3] + "deg)");\n    if (ry) p.push("rotateY(" + ry + "deg)");\n    if (rx) p.push("rotateX(" + rx + "deg)");\n    if (f[6] !== 1 || f[7] !== 1) p.push("scale(" + f[6] + ", " + f[7] + ")");\n    return p.length ? p.join(" ") : "none";\n  }\n  function css(u2, i) {\n    var L = spec.L[i], c = L[0];\n    if (orbit[u2] && L[2]) c += ";transform:" + tf(L[2], orbit[u2]);\n    if (drags[u2]) c += ";touch-action:none;user-select:none;-webkit-user-select:none";\n    if (clicks[u2]) c += ";cursor:pointer";\n    return c;\n  }\n  var HIDE = ";opacity:0;visibility:hidden;pointer-events:none;position:absolute";\n  function set(u2, ms, ez) {\n    var el = els[u2], i = lookIn(u2, void 0);\n    if (!el || i === -2) return;\n    var tr = ms ? ";transition:all " + ms + "ms " + ez : ";transition:none";\n    if (i < 0) {\n      el.style.cssText = (last[u2] || "") + HIDE + tr;\n      return;\n    }\n    var c = css(u2, i), text = spec.L[i][1];\n    if (text !== null && el.textContent !== text) el.textContent = text;\n    if (ms && el.style.visibility === "hidden") {\n      el.style.cssText = c + ";opacity:0;transition:none";\n      void el.offsetWidth;\n    }\n    el.style.cssText = c + tr;\n    last[u2] = c;\n  }\n  var ANIM = /(?:^|;)animation:[^;]*/;\n  function anim(i) {\n    var m2 = i >= 0 ? ANIM.exec(spec.L[i][0]) : null;\n    return m2 ? m2[0] : "";\n  }\n  function go(m2, to, ms, ez, fromHistory) {\n    if (!(m2 in state) || state[m2] === to) return;\n    var list = owned[m2] || [];\n    list.forEach(function(u2) {\n      var a = lookIn(u2, void 0), b = lookIn(u2, to), el = els[u2];\n      if (!el || a < 0 || !anim(a) || anim(a) === anim(b)) return;\n      var cs = getComputedStyle(el);\n      el.style.cssText = css(u2, a) + ";animation:none;transition:none;transform:" + cs.transform + ";opacity:" + cs.opacity;\n    });\n    void root.offsetWidth;\n    if (m2 === "flow" && !fromHistory) hist.push(state[m2]);\n    state[m2] = to;\n    list.forEach(function(u2) {\n      set(u2, ms, ez);\n    });\n    arm();\n  }\n  function active(u2, trig) {\n    return spec.on.filter(function(o) {\n      return String(o[0]) === String(u2) && o[3] === trig && state[o[1]] === o[2];\n    });\n  }\n  function run(o, u2) {\n    var a = o[4];\n    if (a.k === "go") {\n      if (a.hold) {\n        if (!holds[u2]) holds[u2] = { m: a.m, back: state[a.m], ms: a.ms, ez: a.ez };\n      }\n      go(a.m, a.to, a.ms, a.ez, false);\n    } else if (a.k === "back" && hist.length) {\n      go(a.m, hist.pop(), 300, "ease-in-out", true);\n    }\n  }\n  function release(u2) {\n    var h = holds[u2];\n    if (!h) return;\n    delete holds[u2];\n    go(h.m, h.back, h.ms, h.ez, true);\n  }\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id2 = n.getAttribute && n.getAttribute("data-pc");\n      if (id2 !== null && id2 !== void 0) out.push(id2);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function first(ids, trig) {\n    for (var i = 0; i < ids.length; i++) {\n      var a = active(ids[i], trig);\n      if (a.length) return { u: ids[i], list: a };\n    }\n    return null;\n  }\n  function arm() {\n    timers.forEach(clearTimeout);\n    timers = [];\n    spec.on.forEach(function(o) {\n      if (o[3] === "timeout" && state[o[1]] === o[2]) timers.push(setTimeout(function() {\n        if (state[o[1]] === o[2]) run(o, o[0]);\n      }, o[5]));\n    });\n  }\n  var over = [];\n  function hover(ids) {\n    var left = over.filter(function(u2) {\n      return ids.indexOf(u2) < 0;\n    }), entered = ids.filter(function(u2) {\n      return over.indexOf(u2) < 0;\n    });\n    over = ids;\n    left.forEach(function(u2) {\n      release(u2);\n      active(u2, "leave").forEach(function(o) {\n        run(o, u2);\n      });\n    });\n    entered.slice().reverse().forEach(function(u2) {\n      active(u2, "hover").concat(active(u2, "enter")).forEach(function(o) {\n        run(o, u2);\n      });\n    });\n  }\n  var press = null;\n  function onMove(e) {\n    if (press) {\n      var dx = e.clientX - press.x, dy = e.clientY - press.y;\n      if (!press.dragged && Math.abs(dx) + Math.abs(dy) > 5) {\n        press.dragged = true;\n        var d = first(press.ids, "drag");\n        if (d) {\n          var du = d.u;\n          press.drag = d;\n          d.list.forEach(function(o) {\n            if (o[4].k !== "orbit") run(o, du);\n          });\n        }\n        if (press.held) {\n          release(press.held);\n          press.held = null;\n        }\n      }\n      if (press.drag) {\n        var k = root.getBoundingClientRect().width / (root.offsetWidth || 1) || 1;\n        press.drag.list.forEach(function(o) {\n          var a = o[4];\n          if (a.k !== "orbit") return;\n          var cur = orbit[a.t] || { rx: 0, ry: 0 };\n          orbit[a.t] = { rx: cur.rx, ry: cur.ry + (e.clientX - press.lx) / k * a.d };\n          if (a.tilt) {\n            var tc = orbit[a.tt] || { rx: 0, ry: 0 };\n            orbit[a.tt] = { ry: tc.ry, rx: Math.max(a.lo, Math.min(a.hi, tc.rx - (e.clientY - press.ly) / k * a.d)) };\n          }\n          set(a.t, 0, "linear");\n          if (a.tt !== a.t) set(a.tt, 0, "linear");\n        });\n        press.lx = e.clientX;\n        press.ly = e.clientY;\n        return;\n      }\n    }\n    hover(chain(e.target));\n  }\n  function onDown(e) {\n    var ids = chain(e.target);\n    press = { x: e.clientX, y: e.clientY, lx: e.clientX, ly: e.clientY, ids, dragged: false, drag: null, held: null };\n    if (first(ids, "drag") && root.setPointerCapture) {\n      try {\n        root.setPointerCapture(e.pointerId);\n      } catch (err) {\n      }\n    }\n    var p = first(ids, "press");\n    if (p) {\n      var pu = p.u;\n      press.held = pu;\n      p.list.forEach(function(o) {\n        run(o, pu);\n      });\n    }\n  }\n  function onUp(e) {\n    var p = press;\n    press = null;\n    if (!p) return;\n    if (p.held) release(p.held);\n    if (p.dragged) return;\n    var c = first(p.ids, "click");\n    if (c) {\n      var cu = c.u;\n      c.list.forEach(function(o) {\n        run(o, cu);\n      });\n    }\n    void e;\n  }\n  function onLeave() {\n    if (!press) hover([]);\n  }\n  function onKey(e) {\n    spec.on.forEach(function(o) {\n      if (o[3] === "key" && state[o[1]] === o[2] && (!o[6] || o[6].toLowerCase() === String(e.key).toLowerCase())) run(o, o[0]);\n    });\n  }\n  for (var id in els) set(id, 0, "linear");\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerdown", onDown);\n  root.addEventListener("pointerup", onUp);\n  root.addEventListener("pointercancel", onUp);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", onKey);\n  arm();\n  return function() {\n    timers.forEach(clearTimeout);\n    root.removeEventListener("pointermove", onMove);\n    root.removeEventListener("pointerdown", onDown);\n    root.removeEventListener("pointerup", onUp);\n    root.removeEventListener("pointercancel", onUp);\n    root.removeEventListener("pointerleave", onLeave);\n    window.removeEventListener("keydown", onKey);\n  };\n}';
+    MACHINE_JS = 'function popcraftMachineCore(spec) {\n  function start(id) {\n    var t = spec.in[id];\n    return !t || t[0] === "event" ? void 0 : t[1];\n  }\n  function holds(g, values, fired) {\n    var t = spec.in[g[0]];\n    if (!t) return false;\n    if (t[0] === "event") return !!fired[g[0]];\n    var v = g[0] in values ? values[g[0]] : start(g[0]), w = g[2];\n    switch (g[1]) {\n      case "eq":\n        return v === w;\n      case "neq":\n        return v !== w;\n      case "gt":\n        return typeof v === "number" && typeof w === "number" && v > w;\n      case "gte":\n        return typeof v === "number" && typeof w === "number" && v >= w;\n      case "lt":\n        return typeof v === "number" && typeof w === "number" && v < w;\n      case "lte":\n        return typeof v === "number" && typeof w === "number" && v <= w;\n    }\n    return false;\n  }\n  function apply(values, actions) {\n    var out = {}, fired = {};\n    for (var k in values) out[k] = values[k];\n    actions.forEach(function(a) {\n      var t = spec.in[a[1]];\n      if (!t) return;\n      var cur = a[1] in out ? out[a[1]] : start(a[1]), by = typeof a[2] === "number" ? a[2] : 1;\n      if (a[0] === "set") {\n        if (t[0] === "event") fired[a[1]] = 1;\n        else if (a.length > 2 && typeof a[2] === typeof cur) out[a[1]] = a[2];\n      } else if (a[0] === "toggle") {\n        if (typeof cur === "boolean") out[a[1]] = !cur;\n      } else if (a[0] === "increment") {\n        if (typeof cur === "number") out[a[1]] = cur + by;\n      } else if (a[0] === "decrement") {\n        if (typeof cur === "number") out[a[1]] = cur - by;\n      } else if (a[0] === "fire") {\n        if (t[0] === "event") fired[a[1]] = 1;\n      } else if (a[0] === "reset") {\n        var s = start(a[1]);\n        if (s === void 0) delete out[a[1]];\n        else out[a[1]] = s;\n      }\n    });\n    return { values: out, fired };\n  }\n  function next(r, fired) {\n    var own = spec.t.filter(function(t2) {\n      return t2[0] === r.state;\n    });\n    var any = spec.t.filter(function(t2) {\n      return t2[0] === "*" && t2[1] !== r.state;\n    });\n    var all = own.concat(any);\n    for (var i = 0; i < all.length; i++) {\n      var t = all[i];\n      if (spec.s[t[1]] && t[2].every(function(g) {\n        return holds(g, r.values, fired);\n      })) return t;\n    }\n    return null;\n  }\n  function enter(r, id) {\n    var res = apply(r.values, spec.s[id] ? spec.s[id][4] : []);\n    return { run: { state: id, values: res.values }, fired: res.fired };\n  }\n  function settle(r, fired) {\n    var cur = r, ev = fired || {};\n    for (var i = 0; i < 16; i++) {\n      var t = next(cur, ev);\n      if (!t) break;\n      var n = enter(cur, t[1]);\n      cur = n.run;\n      ev = n.fired;\n    }\n    return cur;\n  }\n  function begin() {\n    var first = spec.s[spec.i] ? spec.i : Object.keys(spec.s)[0], values = {};\n    if (first === void 0) return null;\n    for (var k in spec.in) {\n      var s = start(k);\n      if (s !== void 0) values[k] = s;\n    }\n    var e = enter({ state: first, values }, first);\n    return settle(e.run, e.fired);\n  }\n  function hears(l, type, chain, key) {\n    if (l[0] !== type) return false;\n    if (type === "complete") return true;\n    if (type === "keyDown" || type === "keyUp") return !l[3] || String(l[3]).toLowerCase() === String(key).toLowerCase();\n    return l[1] === null || chain.indexOf(l[1]) >= 0;\n  }\n  function dispatch(r, type, chain, key) {\n    var heard = spec.l.filter(function(l) {\n      return hears(l, type, chain, key);\n    });\n    if (!heard.length) return r;\n    var res = apply(r.values, [].concat.apply([], heard.map(function(l) {\n      return l[2];\n    })));\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  function set(r, id, value) {\n    var t = spec.in[id];\n    if (!t) return r;\n    var res = apply(r.values, [t[0] === "event" ? ["fire", id] : ["set", id, value]]);\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  return { begin, dispatch, set };\n}\nfunction popcraftMachine(root, spec) {\n  var core = popcraftMachineCore(spec), run = core.begin(), anims = [], t0 = 0, done = false, raf = 0, over = [];\n  if (!run) return function() {\n  };\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id = n.getAttribute && n.getAttribute("data-sm");\n      if (id) out.push(id);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function update(r) {\n    if (r === run) return;\n    var changed = r.state !== run.state;\n    run = r;\n    if (!changed) return;\n    t0 = performance.now();\n    done = false;\n    root.dispatchEvent(new CustomEvent("popcraft:state", { detail: { state: r.state, name: spec.s[r.state] ? spec.s[r.state][5] : r.state, values: r.values } }));\n  }\n  function tick(now) {\n    var s = spec.s[run.state];\n    if (s) {\n      var a = s[0], b = s[1], played = Math.max(0, now - t0) * s[3], t;\n      if (s[2] && b > a) t = a + played % (b - a);\n      else {\n        t = Math.min(b, a + played);\n        if (!done && a + played >= b) {\n          done = true;\n          update(core.dispatch(run, "complete", []));\n        }\n      }\n      anims.forEach(function(x) {\n        x.currentTime = t;\n      });\n    }\n    raf = requestAnimationFrame(tick);\n  }\n  function on(type) {\n    return function(e) {\n      update(core.dispatch(run, type, chain(e.target)));\n    };\n  }\n  function onMove(e) {\n    var ids = chain(e.target);\n    var left = over.filter(function(u) {\n      return ids.indexOf(u) < 0;\n    }), entered = ids.filter(function(u) {\n      return over.indexOf(u) < 0;\n    });\n    over = ids;\n    if (left.length) update(core.dispatch(run, "pointerExit", left));\n    if (entered.length) update(core.dispatch(run, "pointerEnter", entered));\n  }\n  function onLeave() {\n    if (over.length) {\n      var left = over;\n      over = [];\n      update(core.dispatch(run, "pointerExit", left));\n    }\n  }\n  function onKey(type) {\n    return function(e) {\n      var t = e.target;\n      if (e.repeat || e.metaKey || e.ctrlKey || t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;\n      var r = core.dispatch(run, type, [], e.key);\n      if (r !== run) {\n        e.preventDefault();\n        update(r);\n      }\n    };\n  }\n  var down = on("pointerDown"), up = on("pointerUp"), click = on("click"), keyDown = onKey("keyDown"), keyUp = onKey("keyUp");\n  anims = root.getAnimations ? root.getAnimations({ subtree: true }) : [];\n  anims.forEach(function(x) {\n    x.pause();\n  });\n  t0 = performance.now();\n  root.addEventListener("pointerdown", down);\n  root.addEventListener("pointerup", up);\n  root.addEventListener("click", click);\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", keyDown);\n  window.addEventListener("keyup", keyUp);\n  raf = requestAnimationFrame(tick);\n  function byName(k) {\n    if (spec.in[k]) return k;\n    for (var id in spec.in) if (spec.in[id][2] === k) return id;\n    return k;\n  }\n  var api = {\n    state: function() {\n      return run.state;\n    },\n    values: function() {\n      return run.values;\n    },\n    set: function(input, value) {\n      update(core.set(run, byName(input), value));\n    },\n    fire: function(input) {\n      update(core.set(run, byName(input), void 0));\n    },\n    destroy: function() {\n      cancelAnimationFrame(raf);\n      root.removeEventListener("pointerdown", down);\n      root.removeEventListener("pointerup", up);\n      root.removeEventListener("click", click);\n      root.removeEventListener("pointermove", onMove);\n      root.removeEventListener("pointerleave", onLeave);\n      window.removeEventListener("keydown", keyDown);\n      window.removeEventListener("keyup", keyUp);\n    }\n  };\n  root.popcraftMachine = api;\n  return api.destroy;\n}';
+  }
+});
+
+// lib/io/web/machine-runtime.ts
+var init_machine_runtime = __esm({
+  "lib/io/web/machine-runtime.ts"() {
+    "use strict";
+    init_runtimes();
+  }
+});
+
+// lib/io/web/state-machine.ts
+function webStateMachine(doc2, frameId) {
+  const sm = machineOf(doc2.nodes[frameId]);
+  if (!sm || !doc2.nodes[frameId]?.timeline) return null;
+  const timeline = frameTimeline(doc2.nodes, frameId);
+  const duration3 = timelineDuration(doc2.nodes, frameId);
+  const action3 = (a) => a.value === void 0 ? [a.type, a.input] : [a.type, a.input, a.value];
+  const spec = { i: sm.initial, s: {}, t: [], in: {}, l: [] };
+  for (const i2 of sortedValues(sm.inputs)) spec.in[i2.id] = [i2.type, i2.type === "event" ? null : i2.value ?? defaultOf2(i2.type), i2.name];
+  for (const s of sortedValues(sm.states)) {
+    const [a, b] = stateStretch(s, timeline, duration3);
+    spec.s[s.id] = [a, b, s.loop ? 1 : 0, s.speed ?? 1, (s.entry ?? []).map(action3), s.name];
+  }
+  for (const t3 of sortedValues(sm.transitions)) {
+    spec.t.push([t3.from, t3.to, (t3.guards ?? []).map((g) => {
+      const type = sm.inputs[g.input]?.type;
+      const value3 = type === "event" ? null : g.value ?? (type === "boolean" ? true : type === "number" ? 0 : "");
+      return [g.input, g.op ?? "eq", value3];
+    })]);
+  }
+  for (const l of sortedValues(sm.listeners)) {
+    if (!isKeyListener(l.type)) spec.l.push([l.type, l.layer ?? null, l.actions.map(action3)]);
+    else spec.l.push(l.key ? [l.type, null, l.actions.map(action3), l.key] : [l.type, null, l.actions.map(action3)]);
+  }
+  return spec;
+}
+var defaultOf2, machineLayers, machineScript;
+var init_state_machine2 = __esm({
+  "lib/io/web/state-machine.ts"() {
+    "use strict";
+    init_instances2();
+    init_state_machine();
+    init_machine_runtime();
+    init_machine_runtime();
+    defaultOf2 = (type) => type === "boolean" ? false : type === "number" ? 0 : type === "string" ? "" : null;
+    machineLayers = (spec) => new Set((spec?.l ?? []).map((l) => l[1]).filter((id3) => !!id3));
+    machineScript = (spec) => `${MACHINE_JS}
+popcraftMachine(document.querySelector('[data-sm-root]'), ${JSON.stringify(spec)});`;
+  }
+});
+
+// lib/io/web/interactive.ts
+function subtreeIds(doc2, id3, out = /* @__PURE__ */ new Set()) {
+  if (out.has(id3)) return out;
+  const n = doc2.nodes[id3];
+  if (!n) return out;
+  out.add(id3);
+  if (n.type === "INSTANCE") subtreeIds(doc2, n.mainComponentId, out);
+  for (const c2 of n.childIds ?? []) subtreeIds(doc2, c2, out);
+  return out;
+}
+function flowScreens(doc2, startId) {
+  const start2 = doc2.nodes[startId];
+  if (!start2 || start2.type !== "FRAME" || doc2.nodes[start2.parentId ?? ""]?.type !== "PAGE") return [startId];
+  const out = [startId];
+  for (let i2 = 0; i2 < out.length; i2++) {
+    for (const id3 of subtreeIds(doc2, out[i2])) {
+      for (const ix of interactionsOf(doc2.nodes[id3])) {
+        const to = ix.action.navigationType === "NAVIGATE" ? ix.action.destinationId : null;
+        const dest = to ? doc2.nodes[to] : void 0;
+        if (!dest || out.includes(dest.id) || dest.type !== "FRAME" || doc2.nodes[dest.parentId ?? ""]?.type !== "PAGE") continue;
+        if (Math.round(dest.width) !== Math.round(start2.width) || Math.round(dest.height) !== Math.round(start2.height)) continue;
+        out.push(dest.id);
+      }
+    }
+  }
+  return out;
+}
+function variantStates(doc2, mainId) {
+  const out = [mainId];
+  for (let i2 = 0; i2 < out.length; i2++) {
+    for (const id3 of subtreeIds(doc2, out[i2])) {
+      for (const ix of interactionsOf(doc2.nodes[id3])) {
+        const to = ix.action.navigationType === "CHANGE_TO" ? ix.action.destinationId : null;
+        if (to && !out.includes(to) && doc2.nodes[to]?.type === "COMPONENT") out.push(to);
+      }
+    }
+  }
+  return out;
+}
+function buildState(ctx2, doc2, id3, machine, state, start2, variantOf2) {
+  const expand = /* @__PURE__ */ new Map();
+  const tree = buildPlainTree(doc2, id3, ctx2.opts, start2, { built: (web, _node, at3) => {
+    if (web.type === "INSTANCE") expand.set(web, at3);
+  } });
+  for (const r of tree.rules ?? []) ctx2.rules.add(r);
+  if (tree.truncated) ctx2.truncated = true;
+  const ids2 = /* @__PURE__ */ new Map();
+  const index2 = (w) => {
+    ids2.set(w.id, w);
+    w.children.forEach(index2);
+  };
+  index2(tree.root);
+  const visit2 = (w, owner, st, isRoot) => {
+    w.owner = owner;
+    w.looks = { [st]: lookOf(w, isRoot) };
+    if (w.motion) ctx2.keyframes.add(w.motion.keyframes);
+    const node2 = nodeOf(doc2, w.id);
+    note(ctx2, w, interactionsOf(doc2.nodes[realId(w.id)]), owner, st, ids2);
+    const at3 = expand.get(w);
+    const inst = node2?.type === "INSTANCE" ? node2 : void 0;
+    const states = inst && at3 && ctx2.depth < 4 ? variantStates(doc2, inst.mainComponentId) : [];
+    if (inst && at3 && states.length > 1 && w.id !== variantOf2) {
+      const m = { id: `m${ctx2.machines.length}`, initial: inst.mainComponentId, states: states.map((s) => ({ id: s, name: stateName(doc2, s) })) };
+      ctx2.machines.push(m);
+      w.machine = m;
+      const perState = [];
+      for (const s of states) {
+        let kids;
+        if (s === inst.mainComponentId) {
+          kids = w.children;
+          kids.forEach((c2) => visit2(c2, m.id, s, false));
+        } else {
+          const shown2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: s } } };
+          ctx2.depth++;
+          try {
+            kids = buildState(ctx2, shown2, inst.id, m.id, s, at3, inst.id).children;
+          } finally {
+            ctx2.depth--;
+          }
+        }
+        note(ctx2, w, interactionsOf(doc2.nodes[s]), m.id, s, ids2, m.id);
+        perState.push([s, kids]);
+      }
+      w.children = mergeChildren(perState, m.id, m.states.map((s) => s.id), ctx2);
+    } else if (w.id === variantOf2) {
+      w.children.forEach((c2) => visit2(c2, owner, st, false));
+    } else {
+      if (inst) note(ctx2, w, interactionsOf(doc2.nodes[inst.mainComponentId]), owner, st, ids2);
+      w.children.forEach((c2) => visit2(c2, owner, st, false));
+    }
+  };
+  visit2(tree.root, machine, state, !start2);
+  return tree.root;
+}
+function note(ctx2, w, list2, machine, state, ids2, hostMachine) {
+  if (!list2.length) return;
+  const at3 = ctx2.pending.get(w) ?? [];
+  for (const ix of list2) at3.push({ machine, state, ix, hostMachine: hostMachine ?? (machine !== FLOW ? machine : void 0), ids: ids2 });
+  ctx2.pending.set(w, at3);
+}
+function lookOf(w, isRoot) {
+  return {
+    style: { ...placementStyle(w, isRoot), ...w.style, ...w.motion?.style ?? {} },
+    ...w.text ? { text: w.text.characters } : {},
+    ...w.tf ? { tf: w.tf } : {}
+  };
+}
+function keyed(kids) {
+  const seen = /* @__PURE__ */ new Map();
+  return kids.map((k2) => {
+    const base = `${k2.name}\0${k2.type}`;
+    const i2 = seen.get(base) ?? 0;
+    seen.set(base, i2 + 1);
+    return [`${base}\0${i2}`, k2];
+  });
+}
+function mergeChildren(perState, machine, states, ctx2) {
+  const order2 = [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const [state, kids] of perState) {
+    let after = -1;
+    for (const [k2, node2] of keyed(kids)) {
+      let at3 = order2.indexOf(k2);
+      if (at3 < 0) {
+        order2.splice(after + 1, 0, k2);
+        at3 = after + 1;
+      }
+      after = at3;
+      (groups.get(k2) ?? groups.set(k2, []).get(k2)).push([state, node2]);
+    }
+  }
+  return order2.map((k2) => mergeNode(groups.get(k2), machine, states, ctx2));
+}
+function mergeNode(items, machine, states, ctx2) {
+  const [, first2] = items[0];
+  if (first2.owner !== machine) {
+    for (const [, w] of items.slice(1)) alias(ctx2, w, first2);
+    return first2;
+  }
+  const looks = {};
+  for (const s of states) looks[s] = null;
+  for (const [s, w] of items) looks[s] = w.looks?.[s] ?? null;
+  const merged = { ...first2, looks };
+  const pend = items.flatMap(([, w]) => ctx2.pending.get(w) ?? []);
+  if (pend.length) ctx2.pending.set(merged, pend);
+  for (const [, w] of items) if (w !== merged) alias(ctx2, w, merged);
+  if (first2.machine) {
+    for (const [, w] of items) if (w.machine && w.machine !== first2.machine) ctx2.renamed.set(w.machine.id, first2.machine.id);
+  }
+  merged.children = first2.machine ? first2.children : mergeChildren(items.map(([s, w]) => [s, w.children]), machine, states, ctx2);
+  return merged;
+}
+function alias(ctx2, from2, to) {
+  const a = ctx2.alias ??= /* @__PURE__ */ new Map();
+  a.set(from2, to);
+}
+function mergedOf(ctx2, w) {
+  const a = ctx2.alias;
+  let cur = w;
+  for (let i2 = 0; i2 < 16 && a?.has(cur); i2++) cur = a.get(cur);
+  return cur;
+}
+function actionOf(ctx2, p2) {
+  const a = p2.ix.action;
+  const glide2 = glideOf2(a.transition);
+  const hold = p2.ix.trigger === "ON_HOVER" || p2.ix.trigger === "ON_PRESS";
+  switch (a.navigationType) {
+    case "NAVIGATE":
+      return a.destinationId && ctx2.screens.has(a.destinationId) ? { kind: "go", machine: FLOW, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
+    case "BACK":
+      return ctx2.screens.size > 1 ? { kind: "back", machine: FLOW } : null;
+    case "CHANGE_TO":
+      return p2.hostMachine && a.destinationId ? { kind: "go", machine: p2.hostMachine, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
+    case "ORBIT_3D": {
+      const o = a.orbit ?? {};
+      const uidOf = (id3) => {
+        const w = id3 ? p2.ids.get(id3) : void 0;
+        return w ? mergedOf(ctx2, w).uid : void 0;
+      };
+      const uid2 = uidOf(a.destinationId);
+      const tiltUid = uidOf(o.tiltLayerId) ?? uid2;
+      return uid2 === void 0 || tiltUid === void 0 ? null : { kind: "orbit", target: uid2, tiltTarget: tiltUid, degreesPerPx: o.degreesPerPx ?? 0.4, tilt: !!o.tilt, tiltRange: o.tiltRange ?? [-30, 30] };
+    }
+    default:
+      return null;
+  }
+}
+function buildWebTree(doc2, nodeId2, opts = {}) {
+  const tree = buildTree(doc2, nodeId2, opts);
+  const machine = opts.static || opts.stateMachine === false ? null : webStateMachine(doc2, nodeId2);
+  return machine ? { ...tree, stateMachine: machine } : tree;
+}
+function buildTree(doc2, nodeId2, opts = {}) {
+  if (opts.static || opts.target === "site") return buildPlainTree(doc2, nodeId2, opts);
+  const screens = flowScreens(doc2, nodeId2);
+  const anything = screens.length > 1 || [...subtreeIds(doc2, nodeId2)].some((id3) => interactionsOf(doc2.nodes[id3]).some((ix) => ix.action.navigationType === "CHANGE_TO" || ix.action.navigationType === "ORBIT_3D"));
+  if (!anything) return buildPlainTree(doc2, nodeId2, opts);
+  const flow = { id: FLOW, initial: nodeId2, states: screens.map((s) => ({ id: s, name: doc2.nodes[s]?.name ?? s })) };
+  const ctx2 = { doc: doc2, opts, screens: new Set(screens), machines: [flow], keyframes: /* @__PURE__ */ new Set(), rules: /* @__PURE__ */ new Set(), pending: /* @__PURE__ */ new Map(), depth: 0, renamed: /* @__PURE__ */ new Map() };
+  const roots = screens.map((s) => [s, buildState(ctx2, doc2, s, FLOW, s)]);
+  const truncated = !!ctx2.truncated;
+  const root2 = mergeNode(roots, FLOW, screens, ctx2);
+  let uid2 = 0;
+  const number4 = (w) => {
+    w.uid = uid2++;
+    w.children.forEach(number4);
+  };
+  number4(root2);
+  const place4 = (w) => {
+    const pend = ctx2.pending.get(w);
+    if (pend) {
+      const seen = /* @__PURE__ */ new Set();
+      const on = [];
+      for (const raw of pend) {
+        const p2 = { ...raw, machine: ctx2.renamed.get(raw.machine) ?? raw.machine, ...raw.hostMachine ? { hostMachine: ctx2.renamed.get(raw.hostMachine) ?? raw.hostMachine } : {} };
+        const trigger = TRIGGERS[p2.ix.trigger];
+        const action3 = trigger ? actionOf(ctx2, p2) : null;
+        if (!trigger || !action3) continue;
+        const ix = { machine: p2.machine, state: p2.state, trigger, ...p2.ix.triggerDelay ? { delay: p2.ix.triggerDelay } : {}, ...p2.ix.triggerKey ? { key: p2.ix.triggerKey } : {}, action: action3 };
+        const sig = JSON.stringify(ix);
+        if (!seen.has(sig)) {
+          seen.add(sig);
+          on.push(ix);
+        }
+      }
+      if (on.length) w.on = on;
+    }
+    w.children.forEach(place4);
+  };
+  place4(root2);
+  return { root: root2, truncated, ...ctx2.rules.size ? { rules: [...ctx2.rules].sort() } : {}, interactive: { machines: ctx2.machines.filter((m) => !ctx2.renamed.has(m.id)), keyframes: [...ctx2.keyframes] } };
+}
+var FLOW, interactionsOf, realId, nodeOf, stateName, TRIGGERS, EASINGS2, glideOf2;
+var init_interactive = __esm({
+  "lib/io/web/interactive.ts"() {
+    "use strict";
+    init_scene_graph();
+    init_tree();
+    init_state_machine2();
+    init_element();
+    FLOW = "flow";
+    interactionsOf = (n) => n?.interactions ?? [];
+    realId = (id3) => id3.includes("::") ? id3.slice(id3.lastIndexOf("::") + 2) : id3;
+    nodeOf = (doc2, id3) => doc2.nodes[id3] ?? (id3.includes("::") ? resolveVirtualNode2(doc2.nodes, id3) ?? void 0 : void 0);
+    stateName = (doc2, id3) => {
+      const n = doc2.nodes[id3];
+      const v = n?.variantProperties;
+      return v ? Object.values(v).join(", ") : n?.name ?? id3;
+    };
+    TRIGGERS = {
+      ON_CLICK: "click",
+      ON_HOVER: "hover",
+      ON_PRESS: "press",
+      ON_DRAG: "drag",
+      MOUSE_ENTER: "enter",
+      MOUSE_LEAVE: "leave",
+      AFTER_TIMEOUT: "timeout",
+      KEY_DOWN: "key"
+    };
+    EASINGS2 = { EASE_IN: "ease-in", EASE_OUT: "ease-out", EASE_IN_OUT: "ease-in-out", LINEAR: "linear", SPRING: "cubic-bezier(0.34, 1.56, 0.64, 1)" };
+    glideOf2 = (t3) => !t3 || t3.type === "INSTANT" || t3.type === "CUT" ? { ms: 0, easing: "linear" } : { ms: Math.max(0, Math.round(t3.duration)), easing: EASINGS2[t3.easing] ?? "ease-in-out" };
+  }
+});
+
+// lib/io/web/tree.ts
+var tree_exports = {};
+__export(tree_exports, {
+  DEFAULT_NODE_CAP: () => DEFAULT_NODE_CAP,
+  EXPORT_NODE_CAP: () => EXPORT_NODE_CAP,
+  buildPlainTree: () => buildPlainTree,
+  buildWebTree: () => buildWebTree,
+  flatten: () => flatten2,
+  foldRules: () => foldRules,
+  foldVar: () => foldVar,
+  prepared: () => prepared
+});
+function anchorTargets(doc2) {
+  const hit = anchorMemo.get(doc2.nodes);
+  if (hit) return hit;
+  const out = /* @__PURE__ */ new Set();
+  for (const id3 in doc2.nodes) {
+    const n = doc2.nodes[id3];
+    if (n.semantics?.link?.kind === "anchor") out.add(n.semantics.link.nodeId);
+    for (const ix of n.interactions ?? []) if (ix.action.link?.kind === "anchor" && ix.action.link.nodeId) out.add(ix.action.link.nodeId);
+  }
+  anchorMemo.set(doc2.nodes, out);
+  return out;
+}
+function spriteOnly(nodes, id3) {
+  let leaves = 0;
+  const visit2 = (nid, depth2) => {
+    const n = nodes[nid];
+    if (!n || n.visible === false) return true;
+    if (n.type === "PIXEL_GRID") {
+      leaves++;
+      return true;
+    }
+    if (depth2 > 8 || n.type !== "INSTANCE" && n.type !== "COMPONENT" && n.type !== "FRAME" && n.type !== "GROUP") return false;
+    const main2 = n.mainComponentId;
+    const kids = n.childIds?.length ? n.childIds : main2 ? [main2] : [];
+    return kids.every((k2) => visit2(k2, depth2 + 1));
+  };
+  return visit2(id3, 0) && leaves > 0;
+}
+function prepared(node2, doc2) {
+  let n = node2;
+  if (n.id.includes("::")) n = withInstanceBox(n, doc2.nodes);
+  n = resolveNodeVariables(n, doc2.variables, doc2.variableCollections, doc2.activeVariableModes, exprData(doc2));
+  n = resolveTextNodeStyles(n, doc2.styles ?? {});
+  return n;
+}
+function layoutOf2(node2, nodes) {
+  if (!node2) return null;
+  if (node2.type === "INSTANCE") {
+    const mainId = node2.mainComponentId;
+    const main2 = mainId ? nodes[mainId] : void 0;
+    return main2 ?? null;
+  }
+  if (node2.id.includes("::")) {
+    const real = nodes[node2.id.split("::").pop()];
+    return real ?? node2;
+  }
+  return node2;
+}
+function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
+  const cap2 = opts.nodeCap ?? DEFAULT_NODE_CAP;
+  const first2 = doc2.nodes[nodeId2] ?? (nodeId2.includes("::") ? childLookup(doc2, nodeId2) : void 0);
+  if (!first2) throw new Error(`No node ${nodeId2}`);
+  let emitted = 0;
+  let truncated = false;
+  let folds = 0;
+  const tokens = opts.target === "site" && Object.keys(doc2.variables ?? {}).length ? siteTokens(doc2) : null;
+  const anchored = anchorTargets(doc2);
+  const pageItem = () => {
+    const c2 = opts.item && doc2.collections?.[opts.item.collectionId];
+    if (c2 && opts.item.recordId === ITEM_RECORD) return { collection: c2, record: templateRecord(c2), suffix: `~${ITEM_RECORD}` };
+    const r = opts.item && doc2.records?.[opts.item.recordId];
+    return c2 && r ? { collection: c2, record: r, suffix: "" } : null;
+  };
+  let item = pageItem();
+  const scopeOf2 = (it) => itemScope(it.collection, it.record, withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2));
+  const itemised = (node2, raw, it) => itemNode(node2, raw, it.collection, it.record, scopeOf2(it));
+  const itemLink = (link2, it) => {
+    const filled2 = it && link2.kind === "url" ? { ...link2, url: itemText(link2.url, it.collection, it.record) } : it && (link2.kind === "email" || link2.kind === "tel") ? { ...link2, value: itemText(link2.value, it.collection, it.record) } : link2;
+    if (filled2.kind === "screen") {
+      const dest = doc2.nodes[filled2.frameId];
+      const base = opts.routes?.[filled2.frameId];
+      const of = dest?.route?.collectionId;
+      if (of && base !== void 0) {
+        const slugField = it?.record.id === ITEM_RECORD && it.collection.id === of ? it.collection.fields.find((f2) => f2.id === it.collection.slugFieldId) ?? it.collection.fields.find((f2) => f2.type === "SLUG" || f2.type === "TEXT") : void 0;
+        if (slugField) return { link: filled2, href: `${base === "/" ? "" : base}/${itemMark(fieldKey(slugField.name))}`, screen: filled2.frameId };
+        const slugs = recordSlugs(doc2, of);
+        const rec = it?.collection.id === of ? it.record.id : slugs.keys().next().value;
+        const slug3 = rec ? slugs.get(rec) : void 0;
+        return slug3 ? { link: filled2, href: `${base === "/" ? "" : base}/${slug3}`, screen: `${filled2.frameId}~${rec}` } : { link: filled2, href: null };
+      }
+      return { link: filled2, href: base ?? null, screen: filled2.frameId };
+    }
+    if (filled2.kind === "url" && it?.record.id === ITEM_RECORD && itemMarks(filled2.url)) return { link: filled2, href: filled2.url.trim() };
+    return { link: filled2, href: hrefOf(filled2, doc2.nodes, opts.routes) };
+  };
+  const fields = /* @__PURE__ */ new Map();
+  const styleOpts = { fullImageUrl: opts.fullImageUrls ?? opts.target === "site" };
+  const stylesOf = (n) => styleMapFor(n, doc2.styles, styleOpts);
+  let motion = null;
+  const timeline = !opts.static && !start2 && first2.type === "FRAME" ? frameWebMotion(doc2, first2.id, (n) => stylesOf(prepared(n, doc2))) : null;
+  const build3 = (raw, parent, in3D2, fold) => {
+    if (emitted >= cap2) {
+      truncated = true;
+      return null;
+    }
+    emitted++;
+    const node2 = item ? itemised(prepared(raw, doc2), raw, item) : prepared(raw, doc2);
+    const waits = node2.visible === false && parent !== null;
+    if (waits && !(opts.target === "site" && followsVisibility(raw))) return null;
+    const exp = expressibility(node2, doc2.styles);
+    const f2 = layoutOf2(node2, doc2.nodes) ?? node2;
+    const style = stylesOf(node2);
+    if (f2 !== node2 && !style.display) Object.assign(style, flexDeclarations(f2));
+    const through = in3D2 && passesThrough(raw, doc2.nodes);
+    const own2 = typeof node2.opacity === "number" ? node2.opacity : 1;
+    if (through) {
+      style["transform-style"] = "preserve-3d";
+      delete style.opacity;
+      style[foldVar(fold + 1)] = fold ? `calc(var(${foldVar(fold)}) * ${round3(own2)})` : String(round3(own2));
+      folds = Math.max(folds, fold + 1);
+    } else if (fold) style.opacity = own2 === 1 ? `var(${foldVar(fold)})` : `calc(var(${foldVar(fold)}) * ${round3(own2)})`;
+    if (own2 === 0) style["pointer-events"] = "none";
+    if (clickable(raw) && !style.cursor) style.cursor = "pointer";
+    const web = {
+      id: item?.suffix ? `${node2.id}${item.suffix}` : node2.id,
+      name: node2.name || node2.type,
+      type: node2.type,
+      x: Math.round(node2.x),
+      y: Math.round(node2.y),
+      width: Math.round(node2.width),
+      height: Math.round(node2.height),
+      // Absolutely-positioned auto-layout children are taken out of the flow, exactly as the canvas does.
+      // A grid's children are in its flow too: its tracks place them.
+      positioning: (isFlex(layoutOf2(parent, doc2.nodes)) || layoutOf2(parent, doc2.nodes)?.layoutMode === "GRID") && node2.layoutPositioning !== "ABSOLUTE" ? "flow" : "absolute",
+      style,
+      children: []
+    };
+    if (tokens) Object.assign(style, tokenStyle(raw, style, tokens));
+    if (opts.target === "site") {
+      const lay = siteLayout(node2, parent, layoutOf2(parent, doc2.nodes));
+      for (const [k2, v] of Object.entries(lay.style)) {
+        if (v === null) delete style[k2];
+        else style[k2] = v;
+      }
+      if (laysOut(f2) || f2.overflowScrolling) Object.assign(style, containerStyle(f2));
+      if (node2.type === "TEXT") {
+        if (style["white-space"] === "pre") {
+          style["white-space"] = "pre-wrap";
+          style.width = "fit-content";
+        }
+        if (style["max-width"] === void 0) style["max-width"] = "100%";
+        if (style.height && style.height !== "auto") {
+          style["min-height"] = style.height;
+          delete style.height;
+        }
+      }
+      if (lay.place && (parent !== null || !start2?.parent)) web.place = lay.place;
+    }
+    if (waits) web.hidden = true;
+    const sem = node2.semantics;
+    if (sem) {
+      if (sem.tag && sem.tag !== "div") web.tag = sem.tag;
+      const attrs = {};
+      if (sem.label) attrs["aria-label"] = sem.label;
+      if (sem.hidden) attrs["aria-hidden"] = "true";
+      if (Object.keys(attrs).length) web.attrs = attrs;
+      const to = sem.link ? itemLink(sem.link, item) : null;
+      if (to?.href) web.link = { href: to.href, ...opensNewTab(to.link) ? { newTab: true } : {}, ...to.screen ? { screen: to.screen } : {} };
+    }
+    const control = node2.control;
+    if (control) {
+      const named = control.name ? { name: control.name } : {};
+      if (control.kind === "FORM") {
+        web.tag = "form";
+        if (isCommerceAction(control.formAction)) web.action = control.formAction;
+      } else if (control.kind === "BUTTON") {
+        web.tag = "button";
+        web.attrs = { ...web.attrs, type: control.buttonType ?? "submit", ...named, ...control.name && control.value !== void 0 ? { value: item && hasItemToken(control.value) ? itemText(control.value, item.collection, item.record) : control.value } : {} };
+      } else if (control.kind === "CHECKBOX" || control.kind === "RADIO") {
+        web.check = { attrs: { type: control.kind === "RADIO" ? "radio" : "checkbox", ...named, ...control.value !== void 0 ? { value: control.value } : {}, ...control.checked ? { checked: "" } : {}, ...control.required ? { required: "" } : {} }, ...control.variableId ? { variable: control.variableId } : {} };
+      } else fields.set(fieldPart(doc2.nodes, raw.id) ?? raw.id, control);
+    }
+    const control0 = fields.get(raw.id);
+    const field = control0 && item && control0.value !== void 0 && hasItemToken(control0.value) ? { ...control0, value: itemText(control0.value, item.collection, item.record) } : control0;
+    if (field) {
+      const tag = field.kind === "TEXTAREA" ? "textarea" : field.kind === "SELECT" ? "select" : "input";
+      const words = node2.characters;
+      web.input = {
+        tag,
+        attrs: {
+          ...tag === "input" ? { type: field.inputType ?? "text" } : {},
+          ...field.name ? { name: field.name } : {},
+          ...tag !== "select" && (field.placeholder ?? words) ? { placeholder: field.placeholder ?? words } : {},
+          ...field.required ? { required: "" } : {},
+          ...tag === "input" && field.value !== void 0 ? { value: field.value } : {},
+          "aria-label": node2.semantics?.label ?? field.placeholder ?? field.name ?? web.name
+        },
+        ...tag === "select" ? { options: field.options ?? [] } : {},
+        ...tag !== "input" && field.value !== void 0 ? { value: field.value } : {},
+        ...field.variableId ? { variable: field.variableId } : {}
+      };
+    }
+    if (sem?.anchor || anchored.has(node2.id)) web.attrs = { ...web.attrs, id: anchorOf(node2) };
+    if (through) web.preserve3d = true;
+    web.tf = transformParts(node2);
+    if (typeof node2.altText === "string") web.alt = node2.altText;
+    if (parent === null) web.positioning = start2?.parent ? web.positioning : "flow";
+    if (f2.layoutMode === "HORIZONTAL" || f2.layoutMode === "VERTICAL") {
+      web.layout = {
+        direction: f2.layoutMode === "HORIZONTAL" ? "row" : "column",
+        gap: f2.itemSpacing ?? 0,
+        justify: JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"],
+        align: ALIGN2[f2.counterAxisAlignItems ?? "MIN"],
+        padding: f2.padding ?? { top: 0, right: 0, bottom: 0, left: 0 }
+      };
+    }
+    if (node2.type === "TEXT") {
+      const t3 = node2;
+      const solid5 = (t3.fills ?? []).find((p2) => p2.visible !== false && p2.type === "SOLID" && p2.color);
+      web.text = {
+        characters: t3.characters ?? "",
+        align: t3.textAlign,
+        fontFamily: t3.fontFamily,
+        fontSize: t3.fontSize,
+        fontWeight: t3.fontWeight,
+        italic: t3.fontStyle === "italic",
+        ...solid5?.color ? { color: toHex(solid5.color) } : {},
+        ...t3.letterSpacing ? { letterSpacing: t3.letterSpacing } : {},
+        ...t3.lineHeight !== "AUTO" ? { lineHeight: t3.lineHeight } : {}
+      };
+      const runs = textRuns(t3);
+      if (runs) web.runs = runs;
+    }
+    const tl = timeline?.get(node2.id);
+    const mo = tl ?? motion?.children.get(node2.id);
+    if (mo) web.motion = { style: animationStyle(mo, tl ? "load" : motion.trigger), keyframes: keyframesCSS(mo) };
+    const ext = getNativeExtension(raw.type);
+    if (ext?.toWeb) {
+      const said = ext.toWeb(node2, { escape: escapeHTML, color: (c2) => toRgba({ ...c2, a: c2.a ?? 1 }) });
+      if (said.tag) web.tag = said.tag;
+      Object.assign(style, said.style);
+      web.html = said.html;
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    const code = opts.target === "site" ? codeOf(doc2.nodes, raw) : null;
+    if (code && doc2.codeModules?.[code.moduleId]) {
+      for (const k2 of PAINTED) delete style[k2];
+      web.code = { module: code.moduleId, ...code.exportName ? { export: code.exportName } : {}, props: codeProps(doc2.nodes, node2) };
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    const sprite = opts.target === "site" && raw.type === "INSTANCE" && !raw.id.includes("::") && spriteOnly(doc2.nodes, raw.id) && isLive(doc2.nodes, raw.id);
+    if (!exp.css || sprite) {
+      for (const k2 of PAINTED) delete style[k2];
+      web.asset = { kind: opts.assetKind ?? (exp.needsRaster ? "png" : "svg"), reason: exp.reason || (sprite ? "an animated sprite" : ""), ...item?.suffix ? { of: node2.id } : {} };
+      if (isPixelArt(doc2, raw.id)) style["image-rendering"] = "pixelated";
+      if (sprite || opts.target === "site" && renderMode(node2, { styles: doc2.styles, live: isLive(doc2.nodes, raw.id) }) === "island") web.island = true;
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    const lost = capability(node2, "css", doc2.styles).dropped.find((f3) => f3.startsWith("paint:"));
+    if (lost && !node2.id.includes("::")) {
+      const site = opts.target === "site";
+      style.isolation = "isolate";
+      web.children.push({
+        id: `${node2.id}/backdrop${item?.suffix ?? ""}`,
+        name: `${web.name} fill`,
+        type: "BACKDROP",
+        x: 0,
+        y: 0,
+        width: web.width,
+        height: web.height,
+        positioning: "absolute",
+        ...site ? { place: { position: "absolute", inset: "0" } } : {},
+        style: { ...site ? {} : { width: `${web.width}px`, height: `${web.height}px` }, "border-radius": "inherit", overflow: "hidden", "z-index": "-1", "pointer-events": "none" },
+        alt: "",
+        asset: { kind: "png", reason: featureName(lost), of: node2.id, self: true },
+        ...site && movesItself(raw) ? { island: true } : {},
+        children: []
+      });
+    }
+    const outer = motion;
+    if (!motion && node2.type === "INSTANCE" && !opts.static) {
+      motion = instanceWebMotion(doc2, node2, (n) => stylesOf(prepared(n, doc2)));
+      if (motion && (motion.trigger !== "load" || opts.target === "site")) web.motionTrigger = motion.trigger;
+    }
+    try {
+      if (opts.includeChildren !== false) {
+        const kids3D = in3D2 ? through : is3DContext(raw) && !raw.id.includes("::");
+        const kidFold = through ? fold + 1 : 0;
+        const repeat = raw.repeat;
+        const collection = repeat && doc2.collections?.[repeat.collectionId];
+        if (repeat && collection && opts.target === "site") {
+          const outerItem = item;
+          const under = outerItem ? scopeOf2(outerItem) : withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2);
+          try {
+            for (const record2 of repeatRecords(doc2, repeat, under)) {
+              item = { collection, record: record2, suffix: `${outerItem?.suffix ?? ""}~${record2.id}` };
+              for (const child of childrenOf(node2, doc2.nodes)) {
+                const built = build3(child, node2, kids3D, kidFold);
+                if (built) web.children.push(built);
+              }
+            }
+            if (collection.perVisitor && !outerItem || collection.schema && opts.listTemplates) {
+              item = { collection, record: templateRecord(collection), suffix: `~${ITEM_RECORD}` };
+              const template2 = [];
+              for (const child of childrenOf(node2, doc2.nodes)) {
+                const built = build3(child, node2, kids3D, kidFold);
+                if (built) template2.push(built);
+              }
+              const sortField = repeat.sort && collection.fields.find((f3) => f3.id === repeat.sort.fieldId);
+              web.repeat = {
+                collectionId: collection.id,
+                template: template2,
+                ...repeat.filter?.trim() ? { filter: repeat.filter } : {},
+                ...sortField ? { sort: { key: fieldKey(sortField.name), dir: repeat.sort.dir } } : {},
+                ...repeat.offset ? { offset: repeat.offset } : {},
+                ...repeat.limit ? { limit: repeat.limit } : {}
+              };
+            }
+          } finally {
+            item = outerItem;
+          }
+        } else for (const child of childrenOf(node2, doc2.nodes)) {
+          const built = build3(child, node2, kids3D, kidFold);
+          if (built) web.children.push(built);
+        }
+      }
+    } finally {
+      motion = outer;
+    }
+    if (web.children.some((c2) => c2.positioning === "absolute")) {
+      for (const c2 of web.children) if (c2.positioning === "flow") c2.layered = true;
+    }
+    hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+    return web;
+  };
+  const root2 = build3(first2, start2?.parent ?? null, start2?.in3D ?? false, start2?.fold ?? 0);
+  if (!root2) throw new Error("Node cap of 0");
+  return { root: root2, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
+}
+function childLookup(doc2, id3) {
+  const at3 = id3.lastIndexOf("::");
+  const host = at3 > 0 ? id3.slice(0, at3) : "";
+  const hostNode = doc2.nodes[host] ?? (host.includes("::") ? childLookup(doc2, host) : void 0);
+  return hostNode ? childrenOf(hostNode, doc2.nodes).find((c2) => c2.id === id3) : void 0;
+}
+function flatten2(node2, out = []) {
+  out.push(node2);
+  for (const c2 of node2.children) flatten2(c2, out);
+  return out;
+}
+var DEFAULT_NODE_CAP, EXPORT_NODE_CAP, PAINTED, anchorMemo, followsVisibility, isFlex, round3, foldVar, foldRules, clickable;
+var init_tree = __esm({
+  "lib/io/web/tree.ts"() {
+    "use strict";
+    init_pixel_art();
+    init_instance_layout();
+    init_text_styles();
+    init_variables();
+    init_scene3d();
+    init_semantics();
+    init_commerce();
+    init_collections();
+    init_props();
+    init_native_registry();
+    init_controls();
+    init_expressions2();
+    init_children();
+    init_css();
+    init_capability();
+    init_expressible();
+    init_motion();
+    init_element();
+    init_paint2();
+    init_responsive();
+    init_richtext();
+    init_tokens2();
+    init_timeline();
+    init_interactive();
+    DEFAULT_NODE_CAP = 120;
+    EXPORT_NODE_CAP = 2e4;
+    PAINTED = ["background", "border", "border-style", "border-color", "border-width", "outline", "border-radius", "box-shadow", "box-sizing", "filter", "backdrop-filter"];
+    anchorMemo = /* @__PURE__ */ new WeakMap();
+    followsVisibility = (n) => !!n.boundVariables?.visible || !!n.boundExpressions?.visible || // Hidden in the design and shown at a breakpoint: on the page, for the media query that shows it.
+    Object.values(n.responsive ?? {}).some((o) => o.visible === true) || // A game's win banner (LayerPhysics role 'win') and a player's run and jump poses: hidden in the design, shown by
+    // the platformer on winning or as the player moves.
+    n.physics?.role === "win" || n.physics?.role === "pose" || n.physics?.role === "reveal";
+    isFlex = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
+    round3 = (v) => Math.round(v * 1e3) / 1e3;
+    foldVar = (depth2) => `--pc-f${depth2}`;
+    foldRules = (depth2) => Array.from({ length: depth2 }, (_, i2) => `@property ${foldVar(i2 + 1)} { syntax: '<number>'; inherits: true; initial-value: 1; }`);
+    clickable = (n) => !!n.semantics?.link || (n.interactions ?? []).some((ix) => ix.trigger === "ON_CLICK" || ix.trigger === "ON_PRESS");
+  }
+});
+
 // lib/io/zip-export.ts
 var zip_export_exports = {};
 __export(zip_export_exports, {
@@ -316232,7 +317873,7 @@ function stateMachineFromDotLottie(input2, id3 = "sm1", name2 = "State machine")
   };
 }
 var INPUT_TYPES2, CONDITIONS, INTERACTIONS, invert2, isObj6, isValue2, DOT_INPUT_TYPES, DOT_CONDITIONS, DOT_INTERACTIONS;
-var init_state_machine2 = __esm({
+var init_state_machine3 = __esm({
   "lib/io/lottie/state-machine.ts"() {
     "use strict";
     init_state_machine();
@@ -316439,7 +318080,7 @@ var init_build = __esm({
     init_channels();
     init_ease();
     init_shapes();
-    init_state_machine2();
+    init_state_machine3();
     BLEND2 = {
       NORMAL: 0,
       MULTIPLY: 1,
@@ -317313,7 +318954,7 @@ var init_lottie = __esm({
     init_scene_graph();
     init_png();
     init_build();
-    init_state_machine2();
+    init_state_machine3();
     init_build();
     init_support();
     RASTER_SCALE = 2;
@@ -317458,112 +319099,6 @@ var init_data = __esm({
   }
 });
 
-// lib/io/web/element.ts
-function placementStyle(node2, isRoot) {
-  if (node2.place) return { ...node2.place, ...node2.place.position ? {} : node2.layered || node2.children.some((c2) => c2.positioning === "absolute") ? { position: "relative" } : {} };
-  const out = {};
-  if (node2.positioning === "absolute" && !isRoot) {
-    out.position = "absolute";
-    out.left = `${node2.x}px`;
-    out.top = `${node2.y}px`;
-  } else if (node2.layered || node2.children.some((c2) => c2.positioning === "absolute") || isRoot) {
-    out.position = "relative";
-  }
-  return out;
-}
-function imageRole(node2) {
-  if (node2.asset || node2.text) return null;
-  if (node2.type !== "IMAGE" && node2.alt === void 0) return null;
-  return roleOf(node2);
-}
-function pictureOf(node2) {
-  const a = node2.asset;
-  if (!a) return null;
-  if (a.src) return { kind: "img", src: a.src };
-  if (a.svg) return { kind: "svg", svg: a.svg };
-  if (a.pngDataUrl) return { kind: "img", src: a.pngDataUrl };
-  return { kind: "missing", reason: a.reason, format: a.kind };
-}
-function elementOf(node2, ctx2) {
-  const motion = ctx2.still ? void 0 : node2.motion;
-  const spec = ctx2.spec ?? null;
-  const tag = node2.input ? node2.input.tag : node2.link ? "a" : node2.tag ?? (node2.text ? "p" : "div");
-  const attrs = { ...node2.attrs };
-  if (node2.input) Object.assign(attrs, node2.input.attrs);
-  if (node2.link && !node2.input) {
-    attrs.href = node2.link.href;
-    if (node2.link.newTab) {
-      attrs.target = "_blank";
-      attrs.rel = "noopener noreferrer";
-    }
-  }
-  return {
-    tag,
-    attrs,
-    // A tag's own look (a button's border, a link's underline, a list's bullets) is not the layer's: under its declarations.
-    style: { ...node2.link || node2.tag || node2.input ? TAG_RESET[tag] : void 0, ...placementStyle(node2, ctx2.isRoot), ...node2.style, ...motion ? motion.style : {}, ...hiddenAtStart(spec, node2) ? HIDDEN_AT_START : {} },
-    // A field's words are its placeholder (an attribute), not its content.
-    ...node2.text && !node2.input ? { text: node2.text.characters } : {},
-    ...node2.text && node2.runs && !node2.input ? { runs: node2.runs } : {},
-    ...node2.input ? { input: node2.input } : {},
-    ...node2.html !== void 0 ? { html: node2.html } : {},
-    ...node2.check ? { check: node2.check } : {},
-    picture: pictureOf(node2),
-    role: imageRole(node2),
-    ...motion ? { keyframes: motion.keyframes } : {},
-    ...node2.motionTrigger ? { motionTrigger: node2.motionTrigger } : {},
-    ...spec && node2.uid !== void 0 ? { pc: { uid: node2.uid, layer: node2.name } } : {},
-    ...ctx2.listened?.has(node2.id) ? { sm: node2.id } : {}
-  };
-}
-var escapeHTML, altFor, roleOf, roleAttrs, labelSVG, imageRoleAttrs, hiddenAtStart, HIDDEN_AT_START, FIELD, HEADING, TAG_RESET, MOTION_PLAY_RULE, CHECK_STYLE;
-var init_element = __esm({
-  "lib/io/web/element.ts"() {
-    "use strict";
-    escapeHTML = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-    altFor = (node2) => node2.alt ?? node2.name;
-    roleOf = (node2) => {
-      const alt = altFor(node2);
-      return alt === "" ? { hidden: true } : { label: alt };
-    };
-    roleAttrs = (role) => "hidden" in role ? ' aria-hidden="true"' : ` role="img" aria-label="${escapeHTML(role.label)}"`;
-    labelSVG = (svg, node2) => svg.replace(/^<svg\b/, `<svg${roleAttrs(roleOf(node2))}`);
-    imageRoleAttrs = (node2) => {
-      const role = imageRole(node2);
-      return role ? roleAttrs(role) : "";
-    };
-    hiddenAtStart = (spec, node2) => {
-      const e = spec && node2.uid !== void 0 ? spec.e[node2.uid] : void 0;
-      return !!e && e[1][spec.m[e[0]]] === -1;
-    };
-    HIDDEN_AT_START = { opacity: "0", visibility: "hidden", "pointer-events": "none", position: "absolute" };
-    FIELD = { display: "block", border: "0", padding: "0", margin: "0", background: "none", outline: "none", font: "inherit", color: "inherit", "min-width": "0" };
-    HEADING = { margin: "0", "font-size": "inherit", "font-weight": "inherit" };
-    TAG_RESET = {
-      a: { display: "block", color: "inherit", "text-decoration": "none" },
-      button: { display: "block", border: "0", padding: "0", background: "none", font: "inherit", color: "inherit", "text-align": "inherit", cursor: "pointer" },
-      ul: { "list-style": "none", margin: "0", padding: "0" },
-      ol: { "list-style": "none", margin: "0", padding: "0" },
-      h1: HEADING,
-      h2: HEADING,
-      h3: HEADING,
-      h4: HEADING,
-      h5: HEADING,
-      h6: HEADING,
-      p: { margin: "0" },
-      figure: { margin: "0" },
-      span: { display: "block" },
-      label: { display: "block" },
-      form: { margin: "0" },
-      input: FIELD,
-      textarea: { ...FIELD, resize: "none" },
-      select: { ...FIELD, appearance: "none" }
-    };
-    MOTION_PLAY_RULE = "[data-motion-play] [data-motion-child] { animation-play-state: running; }";
-    CHECK_STYLE = "position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer";
-  }
-});
-
 // lib/io/web/fonts.ts
 function fontFamilies(tree) {
   const families = /* @__PURE__ */ new Map();
@@ -317586,392 +319121,6 @@ var init_fonts3 = __esm({
   }
 });
 
-// lib/io/web/paint.ts
-function toRgba(c2, a) {
-  const alpha2 = a !== void 0 ? a : c2.a;
-  const [r, g, b] = [c2.r, c2.g, c2.b].map((v) => Math.round(v * 255));
-  return alpha2 < 1 ? `rgba(${r}, ${g}, ${b}, ${Math.round(alpha2 * 100) / 100})` : `rgb(${r}, ${g}, ${b})`;
-}
-function gradientAngleDeg(paint) {
-  const h = paint.gradientHandlePositions;
-  const p0 = h?.[0] ?? { x: 0, y: 0.5 };
-  const p1 = h?.[1] ?? { x: 1, y: 0.5 };
-  return Math.round(Math.atan2(p1.x - p0.x, -(p1.y - p0.y)) * 180 / Math.PI);
-}
-function paintToBackground(paint, opts = {}) {
-  if (paint.type === "SOLID" && paint.color) {
-    const alpha2 = (paint.opacity ?? 1) * paint.color.a;
-    return alpha2 < 1 ? toRgba(paint.color, alpha2) : toHex(paint.color);
-  }
-  if (paint.type === "GRADIENT_LINEAR") return `linear-gradient(${gradientAngleDeg(paint)}deg, ${gradientStopsCSS(paint)})`;
-  if (paint.type === "GRADIENT_RADIAL") return `radial-gradient(circle, ${gradientStopsCSS(paint)})`;
-  if (paint.type === "GRADIENT_ANGULAR") return `conic-gradient(${gradientStopsCSS(paint)})`;
-  if (paint.type === "GRADIENT_DIAMOND") return `radial-gradient(closest-side, ${gradientStopsCSS(paint)})`;
-  if (paint.type === "IMAGE") {
-    const src = paint.imageUrl || paint.imageHash;
-    if (!src) return null;
-    return `url('${opts.fullImageUrl || src.length <= 64 ? src : src.slice(0, 64)}') ${IMAGE_FIT[paint.scaleMode ?? "FILL"]}`;
-  }
-  return null;
-}
-function parseCssColor(css) {
-  if (!css) return null;
-  const hex10 = /^#([0-9a-f]{6})$/i.exec(css.trim());
-  if (hex10) {
-    const n = parseInt(hex10[1], 16);
-    return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
-  }
-  const rgb = /^rgba?\(([^)]+)\)$/i.exec(css.trim());
-  if (!rgb) return null;
-  const parts = rgb[1].split(",").map((v) => Number(v.trim()));
-  if (parts.length < 3 || parts.some((v) => Number.isNaN(v))) return null;
-  return { r: parts[0] / 255, g: parts[1] / 255, b: parts[2] / 255, a: parts[3] ?? 1 };
-}
-var hex23, toHex, gradientStopsCSS, IMAGE_FIT, swiftColor, composeColor;
-var init_paint2 = __esm({
-  "lib/io/web/paint.ts"() {
-    "use strict";
-    hex23 = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
-    toHex = (c2) => `#${hex23(c2.r)}${hex23(c2.g)}${hex23(c2.b)}`.toUpperCase();
-    gradientStopsCSS = (paint) => (paint.gradientStops ?? []).map((s) => `${toRgba(s.color)} ${Math.round((s.position ?? 0) * 100)}%`).join(", ");
-    IMAGE_FIT = {
-      FILL: "center / cover no-repeat",
-      CROP: "center / cover no-repeat",
-      FIT: "center / contain no-repeat",
-      TILE: "top left / auto repeat"
-    };
-    swiftColor = (c2) => {
-      const n = (v) => Math.round(v * 1e3) / 1e3;
-      return `Color(red: ${n(c2.r)}, green: ${n(c2.g)}, blue: ${n(c2.b)}${(c2.a ?? 1) < 1 ? `, opacity: ${Math.round((c2.a ?? 1) * 100) / 100}` : ""})`;
-    };
-    composeColor = (c2) => `Color(0x${[c2.a ?? 1, c2.r, c2.g, c2.b].map((v) => Math.round(v * 255).toString(16).padStart(2, "0")).join("").toUpperCase()})`;
-  }
-});
-
-// lib/io/web/css.ts
-function stylePaints(styleId, styles) {
-  const s = styleId ? styles?.[styleId] : void 0;
-  return s?.type === "PAINT" ? s.paints ?? [] : null;
-}
-function transformParts(node2, dx = 0, dy = 0) {
-  return [
-    dx + restValue(node2, "translateX"),
-    dy + restValue(node2, "translateY"),
-    restValue(node2, "z"),
-    node2.rotation || 0,
-    restValue(node2, "rotateY"),
-    restValue(node2, "rotateX"),
-    restValue(node2, "scaleX") * (node2.flipHorizontal ? -1 : 1),
-    restValue(node2, "scaleY") * (node2.flipVertical ? -1 : 1)
-  ];
-}
-function transformFromParts(p2, orbit) {
-  const [tx2, ty, z2, r, ry0, rx0, sx, sy] = p2;
-  const ry = ry0 + (orbit?.rotateY ?? 0), rx = rx0 + (orbit?.rotateX ?? 0);
-  const parts = [];
-  if (tx2 || ty || z2) parts.push(z2 ? `translate3d(${round(tx2)}px, ${round(ty)}px, ${round(z2)}px)` : `translate(${round(tx2)}px, ${round(ty)}px)`);
-  if (r) parts.push(`rotate(${round(r)}deg)`);
-  if (ry) parts.push(`rotateY(${round(ry)}deg)`);
-  if (rx) parts.push(`rotateX(${round(rx)}deg)`);
-  if (sx !== 1 || sy !== 1) parts.push(`scale(${round(sx)}, ${round(sy)})`);
-  return parts.length ? parts.join(" ") : void 0;
-}
-function styleMapFor(node2, styles, opts = {}) {
-  const scene2 = node2;
-  const out = {};
-  out.width = `${Math.round(node2.width)}px`;
-  out.height = `${Math.round(node2.height)}px`;
-  const transform3 = transformCss(node2);
-  if (transform3) out.transform = transform3;
-  const ax = restValue(node2, "anchorX"), ay = restValue(node2, "anchorY");
-  if (transform3 && (ax !== 0.5 || ay !== 0.5)) out["transform-origin"] = `${round(ax * 100)}% ${round(ay * 100)}%`;
-  const scene3d = scene3dOf(node2);
-  if (scene3d) {
-    out.perspective = `${round(zoomPx(scene3d.camera.focalLength, node2.width))}px`;
-    out["perspective-origin"] = `${round((scene3d.originX ?? 0.5) * 100)}% ${round((scene3d.originY ?? 0.5) * 100)}%`;
-    out["transform-style"] = "preserve-3d";
-  } else if (has3DPlacement(node2) && passesThrough(node2)) out["transform-style"] = "preserve-3d";
-  if ((node2.opacity ?? 1) !== 1) out.opacity = String(round(node2.opacity ?? 1));
-  const bm = node2.blendMode;
-  if (bm && bm !== "NORMAL" && bm !== "PASS_THROUGH") out["mix-blend-mode"] = bm.toLowerCase().replace(/_/g, "-");
-  const fills = visibleFills(node2, styles);
-  const own2 = node2.type === "IMAGE" && node2.imageUrl ? [{ type: "IMAGE", imageUrl: node2.imageUrl, scaleMode: node2.scaleMode, visible: true }] : [];
-  const painted = [...fills, ...own2];
-  if (node2.type !== "TEXT" && painted.length) {
-    const layers2 = painted.map((f2) => paintToBackground(f2, opts)).filter((l) => !!l);
-    const over2 = (l) => /^(#|rgb)/.test(l) ? `linear-gradient(${l}, ${l})` : l;
-    if (layers2.length) out.background = layers2.map((l, i2) => i2 === layers2.length - 1 ? l : over2(l)).join(", ");
-  }
-  const cr = scene2.cornerRadius;
-  if (typeof cr === "number" && cr > 0) out["border-radius"] = `${cr}px`;
-  else if (Array.isArray(cr) && cr.some((r) => r > 0)) out["border-radius"] = cr.map((r) => `${r}px`).join(" ");
-  if (node2.type === "ELLIPSE") out["border-radius"] = "50%";
-  const stroke3 = scene2.strokes?.[0];
-  if (stroke3) {
-    const color4 = toHex(stroke3.color);
-    if (Array.isArray(stroke3.width)) {
-      out["border-style"] = "solid";
-      out["border-color"] = color4;
-      out["border-width"] = stroke3.width.map((w) => `${w}px`).join(" ");
-    } else if (stroke3.alignment === "OUTSIDE") {
-      out.outline = `${stroke3.width}px solid ${color4}`;
-    } else {
-      out.border = `${stroke3.width}px ${stroke3.dashPattern?.length ? "dashed" : "solid"} ${color4}`;
-      if (stroke3.alignment === "INSIDE") out["box-sizing"] = "border-box";
-    }
-  }
-  const shadows = shadowsOf(node2, styles).filter((s) => s.visible);
-  if (node2.type === "TEXT") {
-    const drops = shadows.filter((s) => s.type === "DROP_SHADOW");
-    if (drops.length) out["text-shadow"] = drops.map((s) => `${s.offset.x}px ${s.offset.y}px ${s.blur}px ${toRgba(s.color)}`).join(", ");
-  } else if (shadows.length) {
-    out["box-shadow"] = shadows.map((s) => `${s.type === "INNER_SHADOW" ? "inset " : ""}${s.offset.x}px ${s.offset.y}px ${s.blur}px ${s.spread}px ${toRgba(s.color)}`).join(", ");
-  }
-  const blurs = blursOf(node2, styles);
-  const layer2 = blurs.find((b) => b.type === "LAYER");
-  const backdrop = blurs.find((b) => b.type === "BACKGROUND");
-  if (layer2) out.filter = `blur(${layer2.radius}px)`;
-  if (backdrop) out["backdrop-filter"] = `blur(${backdrop.radius}px)`;
-  if (node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE") {
-    const f2 = node2;
-    Object.assign(out, flexDeclarations(f2));
-    if (f2.clipsContent) out.overflow = "hidden";
-  }
-  if (node2.type === "TEXT") {
-    const t3 = node2;
-    const tFills = visibleFills(t3, styles);
-    out.margin = "0";
-    if (t3.textAutoResize === "WIDTH_AND_HEIGHT") {
-      out.width = "max-content";
-      out.height = "auto";
-      out["white-space"] = "pre";
-    } else if (t3.textAutoResize === "HEIGHT") out.height = "auto";
-    out["font-family"] = `"${t3.fontFamily}", system-ui, sans-serif`;
-    out["font-size"] = `${t3.fontSize}px`;
-    out["font-weight"] = String(t3.fontWeight);
-    if (t3.fontStyle === "italic") out["font-style"] = "italic";
-    out["line-height"] = t3.lineHeight === "AUTO" ? "normal" : `${t3.lineHeight}px`;
-    if (t3.letterSpacing) out["letter-spacing"] = `${t3.letterSpacing}px`;
-    out["text-align"] = t3.textAlign.toLowerCase();
-    if (t3.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
-    else if (t3.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
-    const tc = t3.textCase;
-    if (tc === "UPPER") out["text-transform"] = "uppercase";
-    else if (tc === "LOWER") out["text-transform"] = "lowercase";
-    else if (tc === "TITLE") out["text-transform"] = "capitalize";
-    const solid5 = tFills.find((f2) => f2.type === "SOLID" && f2.color);
-    if (solid5?.color) out.color = toHex(solid5.color);
-    const grad = tFills.find((f2) => f2.type !== "SOLID");
-    const g = grad ? paintToBackground(grad) : null;
-    if (g) {
-      out.background = g;
-      out["-webkit-background-clip"] = "text";
-      out.color = "transparent";
-    }
-  }
-  return out;
-}
-function flexDeclarations(f2) {
-  const out = {};
-  if (f2.layoutMode !== "HORIZONTAL" && f2.layoutMode !== "VERTICAL") return out;
-  out.display = "flex";
-  out["flex-direction"] = f2.layoutMode === "HORIZONTAL" ? "row" : "column";
-  const justify = JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"];
-  const align4 = ALIGN2[f2.counterAxisAlignItems ?? "MIN"];
-  if (justify !== "flex-start") out["justify-content"] = justify;
-  if (align4 !== "flex-start") out["align-items"] = align4;
-  out.gap = `${f2.itemSpacing ?? 0}px`;
-  if (f2.padding) {
-    out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
-    if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
-  }
-  return out;
-}
-var visibleFills, round, transformCss, JUSTIFY, ALIGN2, styleMapToCSSText, styleMapToInline, camel2, styleMapToJSX;
-var init_css = __esm({
-  "lib/io/web/css.ts"() {
-    "use strict";
-    init_effects();
-    init_paint2();
-    init_scene3d();
-    init_transform3d();
-    init_transform();
-    visibleFills = (node2, styles) => (stylePaints(node2.fillStyleId, styles) ?? node2.fills ?? []).filter((f2) => f2.visible !== false);
-    round = (v) => Math.round(v * 100) / 100;
-    transformCss = (node2) => transformFromParts(transformParts(node2));
-    JUSTIFY = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", SPACE_BETWEEN: "space-between" };
-    ALIGN2 = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", BASELINE: "baseline" };
-    styleMapToCSSText = (m, indent = "") => Object.entries(m).map(([k2, v]) => `${indent}${k2}: ${v};`).join("\n");
-    styleMapToInline = (m) => Object.entries(m).map(([k2, v]) => `${k2}:${v}`).join(";");
-    camel2 = (k2) => k2.startsWith("--") ? k2 : (k2.startsWith("-") ? k2.replace(/^-/, "Webkit").replace(/-webkit-/i, "") : k2).replace(/-([a-z])/g, (_, c2) => c2.toUpperCase());
-    styleMapToJSX = (m) => Object.entries(m).map(([k2, v]) => [camel2(k2), v.replace(/'/g, "\\'")]);
-  }
-});
-
-// lib/io/web/keyframes.ts
-function transformOf(n, rest) {
-  return transformFromParts(transformParts(n, n.x - rest.x, n.y - rest.y)) ?? "none";
-}
-function declarationsOf(node2, rest, style) {
-  return { ...style(node2), transform: transformOf(node2, rest), opacity: String(round2(node2.visible === false ? 0 : node2.opacity ?? 1)) };
-}
-function vectorOf(style, keys4) {
-  const text = keys4.map((k2) => `${k2}:${style[k2] ?? ""}`).join(";");
-  return { shape: text.replace(NUMBER2, "#"), v: (text.match(NUMBER2) ?? []).map(Number) };
-}
-function thinSamples(times2, samples, tol, pinned = []) {
-  const n = samples.length;
-  if (n <= 2) return samples.map((_, i2) => i2);
-  const keep = /* @__PURE__ */ new Set([0, n - 1, ...pinned]);
-  for (let i2 = 1; i2 < n; i2++) if (samples[i2].shape !== samples[i2 - 1].shape) {
-    keep.add(i2 - 1);
-    keep.add(i2);
-  }
-  const sorted = () => [...keep].sort((a, b) => a - b);
-  const stack = [];
-  const kept = sorted();
-  for (let i2 = 1; i2 < kept.length; i2++) stack.push([kept[i2 - 1], kept[i2]]);
-  while (stack.length) {
-    const [a, b] = stack.pop();
-    if (b - a < 2 || samples[a].shape !== samples[b].shape) continue;
-    let worst2 = -1, at3 = -1;
-    for (let i2 = a + 1; i2 < b; i2++) {
-      const k2 = (times2[i2] - times2[a]) / (times2[b] - times2[a] || 1);
-      let err2 = 0;
-      samples[i2].v.forEach((x2, d) => {
-        const want = samples[a].v[d] + (samples[b].v[d] - samples[a].v[d]) * k2;
-        err2 = Math.max(err2, Math.abs(x2 - want) / tol[d]);
-      });
-      if (err2 > worst2) {
-        worst2 = err2;
-        at3 = i2;
-      }
-    }
-    if (worst2 > 1) {
-      keep.add(at3);
-      stack.push([a, at3], [at3, b]);
-    }
-  }
-  return sorted();
-}
-function keyframesOf(times2, samples, length2) {
-  const keys4 = [...new Set(samples.flatMap((s) => Object.keys(s)))].filter((k2) => !FIXED.has(k2));
-  const moving = keys4.filter((k2) => samples.some((s) => s[k2] !== samples[0][k2]));
-  if (!moving.length) return null;
-  const vectors = samples.map((s) => vectorOf(s, moving));
-  const dims = Math.max(...vectors.map((v) => v.v.length));
-  const range3 = Array.from({ length: dims }, (_, d) => {
-    let lo = Infinity, hi = -Infinity;
-    for (const v of vectors) if (d < v.v.length) {
-      lo = Math.min(lo, v.v[d]);
-      hi = Math.max(hi, v.v[d]);
-    }
-    return hi > lo ? hi - lo : 0;
-  });
-  const tol = range3.map((r) => Math.max(1e-3, r * 3e-3));
-  const same5 = (a, b) => vectors[a].shape === vectors[b].shape && vectors[a].v.every((x2, d) => Math.abs(x2 - vectors[b].v[d]) <= tol[d]);
-  const jumps = /* @__PURE__ */ new Set();
-  for (let i2 = 1; i2 < samples.length; i2++) {
-    if (same5(i2 - 1, i2)) continue;
-    const stillBefore = i2 >= 2 && same5(i2 - 2, i2 - 1);
-    if (!stillBefore) continue;
-    const words = vectors[i2].shape !== vectors[i2 - 1].shape;
-    const far = !words && vectors[i2].v.some((x2, d) => range3[d] > 0 && Math.abs(x2 - vectors[i2 - 1].v[d]) > range3[d] * 0.2);
-    if (words || far) jumps.add(i2);
-  }
-  const kept = thinSamples(times2, vectors, tol, [...jumps].flatMap((i2) => [i2 - 1, i2]));
-  return kept.map((i2) => {
-    const style = {};
-    for (const k2 of moving) if (samples[i2][k2] !== void 0) style[k2] = samples[i2][k2];
-    return { offset: pct(times2[i2] / (length2 || 1)), style, ...jumps.has(i2 + 1) ? { step: true } : {} };
-  });
-}
-var SAMPLE_RATE, round2, pct, FIXED, NUMBER2;
-var init_keyframes = __esm({
-  "lib/io/web/keyframes.ts"() {
-    "use strict";
-    init_css();
-    SAMPLE_RATE = 30;
-    round2 = (v) => Math.round(v * 1e3) / 1e3;
-    pct = (k2) => Math.round(k2 * 1e5) / 1e3;
-    FIXED = /* @__PURE__ */ new Set(["position", "display", "left", "top", "right", "bottom", "inset", "animation", "animation-play-state", "transform-origin", "transform-style", "box-sizing", "isolation", "z-index"]);
-    NUMBER2 = /-?\d+(?:\.\d+)?(?:e-?\d+)?/g;
-  }
-});
-
-// lib/io/web/motion.ts
-function instanceWebMotion(doc2, instance, style) {
-  const comp = instance.mainComponentId;
-  if (!comp || !isMotionComponent(doc2.nodes, comp)) return null;
-  const m = playbackOf(doc2.nodes, instance, comp);
-  const [a, b] = m.range;
-  const len3 = b - a;
-  if (len3 <= 0) return null;
-  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
-  const times2 = Array.from({ length: steps + 1 }, (_, i2) => len3 * i2 / steps);
-  const samples = [];
-  for (let i2 = 0; i2 <= steps; i2++) samples.push(instancePoseAt(doc2.nodes, instance.id, a + len3 * i2 / steps));
-  const ids2 = /* @__PURE__ */ new Set();
-  for (const s of samples) for (const id3 in s) if (id3.includes("::")) ids2.add(id3);
-  const children = /* @__PURE__ */ new Map();
-  const tag = instance.id.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
-  let n = 0;
-  for (const id3 of ids2) {
-    const restNode = resolveVirtualNode2(doc2.nodes, id3);
-    if (!restNode) continue;
-    const frames = keyframesOf(times2, samples.map((s) => declarationsOf(s[id3] ?? restNode, restNode, style)), len3);
-    if (!frames) continue;
-    children.set(id3, {
-      name: `motion-${tag}-${n++}`,
-      frames,
-      durationMs: m.speed > 0 ? Math.round(len3 / m.speed) : 0,
-      delayMs: Math.round(m.start),
-      iterations: m.loop === "none" ? 1 : "infinite",
-      direction: m.loop === "pingpong" ? "alternate" : "normal",
-      fill: m.hold === "first" ? "backwards" : "both"
-    });
-  }
-  return children.size ? { trigger: m.trigger, children } : null;
-}
-function animationStyle(mo, trigger) {
-  const out = { animation: `${mo.name} ${mo.durationMs}ms linear ${mo.delayMs}ms ${mo.iterations} ${mo.direction} ${mo.fill}` };
-  if (trigger !== "load") out["animation-play-state"] = "paused";
-  return out;
-}
-var keyframesCSS, MOTION_SCRIPT;
-var init_motion = __esm({
-  "lib/io/web/motion.ts"() {
-    "use strict";
-    init_scene_graph();
-    init_instances2();
-    init_keyframes();
-    init_keyframes();
-    init_element();
-    keyframesCSS = (mo) => `@keyframes ${mo.name} {
-${mo.frames.map((f2) => `  ${f2.offset}% { ${Object.entries(f2.style).map(([k2, v]) => `${k2}: ${v};`).join(" ")}${f2.step ? " animation-timing-function: step-end;" : ""} }`).join("\n")}
-}`;
-    MOTION_SCRIPT = `(function () {
-  var play = function (el) { el.setAttribute('data-motion-play', '') };
-  document.querySelectorAll('[data-motion="click"]').forEach(function (el) { el.addEventListener('click', function () { play(el) }) });
-  document.querySelectorAll('[data-motion="hover"]').forEach(function (el) { el.addEventListener('mouseenter', function () { play(el) }) });
-  var seen = document.querySelectorAll('[data-motion="inView"]');
-  if (!('IntersectionObserver' in window)) { seen.forEach(play); return }
-  var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { play(e.target); io.unobserve(e.target) } }) }, { threshold: 0.25 });
-  seen.forEach(function (el) { io.observe(el) });
-})();`;
-  }
-});
-
-// lib/io/web/generated/runtimes.ts
-var PROTOTYPE_JS, MACHINE_JS;
-var init_runtimes = __esm({
-  "lib/io/web/generated/runtimes.ts"() {
-    "use strict";
-    PROTOTYPE_JS = 'function popcraftMount(root, spec) {\n  var els = {}, state = {}, owned = {}, orbit = {}, last = {}, holds = {}, hist = [], timers = [];\n  var nodes = [root].concat(Array.prototype.slice.call(root.querySelectorAll("[data-pc]")));\n  nodes.forEach(function(el) {\n    els[el.getAttribute("data-pc")] = el;\n  });\n  for (var m in spec.m) state[m] = spec.m[m];\n  for (var u in spec.e) (owned[spec.e[u][0]] = owned[spec.e[u][0]] || []).push(u);\n  var drags = {}, clicks = {};\n  spec.on.forEach(function(o) {\n    if (o[3] === "drag") drags[o[0]] = 1;\n    if (o[3] === "click" || o[3] === "press") clicks[o[0]] = 1;\n  });\n  function lookIn(u2, st) {\n    var e = spec.e[u2];\n    if (!e) return -2;\n    var i = e[1][st === void 0 ? state[e[0]] : st];\n    return i === void 0 ? -1 : i;\n  }\n  function tf(f, o) {\n    var ry = f[4] + (o ? o.ry : 0), rx = f[5] + (o ? o.rx : 0), p = [];\n    if (f[0] || f[1] || f[2]) p.push(f[2] ? "translate3d(" + f[0] + "px, " + f[1] + "px, " + f[2] + "px)" : "translate(" + f[0] + "px, " + f[1] + "px)");\n    if (f[3]) p.push("rotate(" + f[3] + "deg)");\n    if (ry) p.push("rotateY(" + ry + "deg)");\n    if (rx) p.push("rotateX(" + rx + "deg)");\n    if (f[6] !== 1 || f[7] !== 1) p.push("scale(" + f[6] + ", " + f[7] + ")");\n    return p.length ? p.join(" ") : "none";\n  }\n  function css(u2, i) {\n    var L = spec.L[i], c = L[0];\n    if (orbit[u2] && L[2]) c += ";transform:" + tf(L[2], orbit[u2]);\n    if (drags[u2]) c += ";touch-action:none;user-select:none;-webkit-user-select:none";\n    if (clicks[u2]) c += ";cursor:pointer";\n    return c;\n  }\n  var HIDE = ";opacity:0;visibility:hidden;pointer-events:none;position:absolute";\n  function set(u2, ms, ez) {\n    var el = els[u2], i = lookIn(u2, void 0);\n    if (!el || i === -2) return;\n    var tr = ms ? ";transition:all " + ms + "ms " + ez : ";transition:none";\n    if (i < 0) {\n      el.style.cssText = (last[u2] || "") + HIDE + tr;\n      return;\n    }\n    var c = css(u2, i), text = spec.L[i][1];\n    if (text !== null && el.textContent !== text) el.textContent = text;\n    if (ms && el.style.visibility === "hidden") {\n      el.style.cssText = c + ";opacity:0;transition:none";\n      void el.offsetWidth;\n    }\n    el.style.cssText = c + tr;\n    last[u2] = c;\n  }\n  var ANIM = /(?:^|;)animation:[^;]*/;\n  function anim(i) {\n    var m2 = i >= 0 ? ANIM.exec(spec.L[i][0]) : null;\n    return m2 ? m2[0] : "";\n  }\n  function go(m2, to, ms, ez, fromHistory) {\n    if (!(m2 in state) || state[m2] === to) return;\n    var list = owned[m2] || [];\n    list.forEach(function(u2) {\n      var a = lookIn(u2, void 0), b = lookIn(u2, to), el = els[u2];\n      if (!el || a < 0 || !anim(a) || anim(a) === anim(b)) return;\n      var cs = getComputedStyle(el);\n      el.style.cssText = css(u2, a) + ";animation:none;transition:none;transform:" + cs.transform + ";opacity:" + cs.opacity;\n    });\n    void root.offsetWidth;\n    if (m2 === "flow" && !fromHistory) hist.push(state[m2]);\n    state[m2] = to;\n    list.forEach(function(u2) {\n      set(u2, ms, ez);\n    });\n    arm();\n  }\n  function active(u2, trig) {\n    return spec.on.filter(function(o) {\n      return String(o[0]) === String(u2) && o[3] === trig && state[o[1]] === o[2];\n    });\n  }\n  function run(o, u2) {\n    var a = o[4];\n    if (a.k === "go") {\n      if (a.hold) {\n        if (!holds[u2]) holds[u2] = { m: a.m, back: state[a.m], ms: a.ms, ez: a.ez };\n      }\n      go(a.m, a.to, a.ms, a.ez, false);\n    } else if (a.k === "back" && hist.length) {\n      go(a.m, hist.pop(), 300, "ease-in-out", true);\n    }\n  }\n  function release(u2) {\n    var h = holds[u2];\n    if (!h) return;\n    delete holds[u2];\n    go(h.m, h.back, h.ms, h.ez, true);\n  }\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id2 = n.getAttribute && n.getAttribute("data-pc");\n      if (id2 !== null && id2 !== void 0) out.push(id2);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function first(ids, trig) {\n    for (var i = 0; i < ids.length; i++) {\n      var a = active(ids[i], trig);\n      if (a.length) return { u: ids[i], list: a };\n    }\n    return null;\n  }\n  function arm() {\n    timers.forEach(clearTimeout);\n    timers = [];\n    spec.on.forEach(function(o) {\n      if (o[3] === "timeout" && state[o[1]] === o[2]) timers.push(setTimeout(function() {\n        if (state[o[1]] === o[2]) run(o, o[0]);\n      }, o[5]));\n    });\n  }\n  var over = [];\n  function hover(ids) {\n    var left = over.filter(function(u2) {\n      return ids.indexOf(u2) < 0;\n    }), entered = ids.filter(function(u2) {\n      return over.indexOf(u2) < 0;\n    });\n    over = ids;\n    left.forEach(function(u2) {\n      release(u2);\n      active(u2, "leave").forEach(function(o) {\n        run(o, u2);\n      });\n    });\n    entered.slice().reverse().forEach(function(u2) {\n      active(u2, "hover").concat(active(u2, "enter")).forEach(function(o) {\n        run(o, u2);\n      });\n    });\n  }\n  var press = null;\n  function onMove(e) {\n    if (press) {\n      var dx = e.clientX - press.x, dy = e.clientY - press.y;\n      if (!press.dragged && Math.abs(dx) + Math.abs(dy) > 5) {\n        press.dragged = true;\n        var d = first(press.ids, "drag");\n        if (d) {\n          var du = d.u;\n          press.drag = d;\n          d.list.forEach(function(o) {\n            if (o[4].k !== "orbit") run(o, du);\n          });\n        }\n        if (press.held) {\n          release(press.held);\n          press.held = null;\n        }\n      }\n      if (press.drag) {\n        var k = root.getBoundingClientRect().width / (root.offsetWidth || 1) || 1;\n        press.drag.list.forEach(function(o) {\n          var a = o[4];\n          if (a.k !== "orbit") return;\n          var cur = orbit[a.t] || { rx: 0, ry: 0 };\n          orbit[a.t] = { rx: cur.rx, ry: cur.ry + (e.clientX - press.lx) / k * a.d };\n          if (a.tilt) {\n            var tc = orbit[a.tt] || { rx: 0, ry: 0 };\n            orbit[a.tt] = { ry: tc.ry, rx: Math.max(a.lo, Math.min(a.hi, tc.rx - (e.clientY - press.ly) / k * a.d)) };\n          }\n          set(a.t, 0, "linear");\n          if (a.tt !== a.t) set(a.tt, 0, "linear");\n        });\n        press.lx = e.clientX;\n        press.ly = e.clientY;\n        return;\n      }\n    }\n    hover(chain(e.target));\n  }\n  function onDown(e) {\n    var ids = chain(e.target);\n    press = { x: e.clientX, y: e.clientY, lx: e.clientX, ly: e.clientY, ids, dragged: false, drag: null, held: null };\n    if (first(ids, "drag") && root.setPointerCapture) {\n      try {\n        root.setPointerCapture(e.pointerId);\n      } catch (err) {\n      }\n    }\n    var p = first(ids, "press");\n    if (p) {\n      var pu = p.u;\n      press.held = pu;\n      p.list.forEach(function(o) {\n        run(o, pu);\n      });\n    }\n  }\n  function onUp(e) {\n    var p = press;\n    press = null;\n    if (!p) return;\n    if (p.held) release(p.held);\n    if (p.dragged) return;\n    var c = first(p.ids, "click");\n    if (c) {\n      var cu = c.u;\n      c.list.forEach(function(o) {\n        run(o, cu);\n      });\n    }\n    void e;\n  }\n  function onLeave() {\n    if (!press) hover([]);\n  }\n  function onKey(e) {\n    spec.on.forEach(function(o) {\n      if (o[3] === "key" && state[o[1]] === o[2] && (!o[6] || o[6].toLowerCase() === String(e.key).toLowerCase())) run(o, o[0]);\n    });\n  }\n  for (var id in els) set(id, 0, "linear");\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerdown", onDown);\n  root.addEventListener("pointerup", onUp);\n  root.addEventListener("pointercancel", onUp);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", onKey);\n  arm();\n  return function() {\n    timers.forEach(clearTimeout);\n    root.removeEventListener("pointermove", onMove);\n    root.removeEventListener("pointerdown", onDown);\n    root.removeEventListener("pointerup", onUp);\n    root.removeEventListener("pointercancel", onUp);\n    root.removeEventListener("pointerleave", onLeave);\n    window.removeEventListener("keydown", onKey);\n  };\n}';
-    MACHINE_JS = 'function popcraftMachineCore(spec) {\n  function start(id) {\n    var t = spec.in[id];\n    return !t || t[0] === "event" ? void 0 : t[1];\n  }\n  function holds(g, values, fired) {\n    var t = spec.in[g[0]];\n    if (!t) return false;\n    if (t[0] === "event") return !!fired[g[0]];\n    var v = g[0] in values ? values[g[0]] : start(g[0]), w = g[2];\n    switch (g[1]) {\n      case "eq":\n        return v === w;\n      case "neq":\n        return v !== w;\n      case "gt":\n        return typeof v === "number" && typeof w === "number" && v > w;\n      case "gte":\n        return typeof v === "number" && typeof w === "number" && v >= w;\n      case "lt":\n        return typeof v === "number" && typeof w === "number" && v < w;\n      case "lte":\n        return typeof v === "number" && typeof w === "number" && v <= w;\n    }\n    return false;\n  }\n  function apply(values, actions) {\n    var out = {}, fired = {};\n    for (var k in values) out[k] = values[k];\n    actions.forEach(function(a) {\n      var t = spec.in[a[1]];\n      if (!t) return;\n      var cur = a[1] in out ? out[a[1]] : start(a[1]), by = typeof a[2] === "number" ? a[2] : 1;\n      if (a[0] === "set") {\n        if (t[0] === "event") fired[a[1]] = 1;\n        else if (a.length > 2 && typeof a[2] === typeof cur) out[a[1]] = a[2];\n      } else if (a[0] === "toggle") {\n        if (typeof cur === "boolean") out[a[1]] = !cur;\n      } else if (a[0] === "increment") {\n        if (typeof cur === "number") out[a[1]] = cur + by;\n      } else if (a[0] === "decrement") {\n        if (typeof cur === "number") out[a[1]] = cur - by;\n      } else if (a[0] === "fire") {\n        if (t[0] === "event") fired[a[1]] = 1;\n      } else if (a[0] === "reset") {\n        var s = start(a[1]);\n        if (s === void 0) delete out[a[1]];\n        else out[a[1]] = s;\n      }\n    });\n    return { values: out, fired };\n  }\n  function next(r, fired) {\n    var own = spec.t.filter(function(t2) {\n      return t2[0] === r.state;\n    });\n    var any = spec.t.filter(function(t2) {\n      return t2[0] === "*" && t2[1] !== r.state;\n    });\n    var all = own.concat(any);\n    for (var i = 0; i < all.length; i++) {\n      var t = all[i];\n      if (spec.s[t[1]] && t[2].every(function(g) {\n        return holds(g, r.values, fired);\n      })) return t;\n    }\n    return null;\n  }\n  function enter(r, id) {\n    var res = apply(r.values, spec.s[id] ? spec.s[id][4] : []);\n    return { run: { state: id, values: res.values }, fired: res.fired };\n  }\n  function settle(r, fired) {\n    var cur = r, ev = fired || {};\n    for (var i = 0; i < 16; i++) {\n      var t = next(cur, ev);\n      if (!t) break;\n      var n = enter(cur, t[1]);\n      cur = n.run;\n      ev = n.fired;\n    }\n    return cur;\n  }\n  function begin() {\n    var first = spec.s[spec.i] ? spec.i : Object.keys(spec.s)[0], values = {};\n    if (first === void 0) return null;\n    for (var k in spec.in) {\n      var s = start(k);\n      if (s !== void 0) values[k] = s;\n    }\n    var e = enter({ state: first, values }, first);\n    return settle(e.run, e.fired);\n  }\n  function hears(l, type, chain, key) {\n    if (l[0] !== type) return false;\n    if (type === "complete") return true;\n    if (type === "keyDown" || type === "keyUp") return !l[3] || String(l[3]).toLowerCase() === String(key).toLowerCase();\n    return l[1] === null || chain.indexOf(l[1]) >= 0;\n  }\n  function dispatch(r, type, chain, key) {\n    var heard = spec.l.filter(function(l) {\n      return hears(l, type, chain, key);\n    });\n    if (!heard.length) return r;\n    var res = apply(r.values, [].concat.apply([], heard.map(function(l) {\n      return l[2];\n    })));\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  function set(r, id, value) {\n    var t = spec.in[id];\n    if (!t) return r;\n    var res = apply(r.values, [t[0] === "event" ? ["fire", id] : ["set", id, value]]);\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  return { begin, dispatch, set };\n}\nfunction popcraftMachine(root, spec) {\n  var core = popcraftMachineCore(spec), run = core.begin(), anims = [], t0 = 0, done = false, raf = 0, over = [];\n  if (!run) return function() {\n  };\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id = n.getAttribute && n.getAttribute("data-sm");\n      if (id) out.push(id);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function update(r) {\n    if (r === run) return;\n    var changed = r.state !== run.state;\n    run = r;\n    if (!changed) return;\n    t0 = performance.now();\n    done = false;\n    root.dispatchEvent(new CustomEvent("popcraft:state", { detail: { state: r.state, name: spec.s[r.state] ? spec.s[r.state][5] : r.state, values: r.values } }));\n  }\n  function tick(now) {\n    var s = spec.s[run.state];\n    if (s) {\n      var a = s[0], b = s[1], played = Math.max(0, now - t0) * s[3], t;\n      if (s[2] && b > a) t = a + played % (b - a);\n      else {\n        t = Math.min(b, a + played);\n        if (!done && a + played >= b) {\n          done = true;\n          update(core.dispatch(run, "complete", []));\n        }\n      }\n      anims.forEach(function(x) {\n        x.currentTime = t;\n      });\n    }\n    raf = requestAnimationFrame(tick);\n  }\n  function on(type) {\n    return function(e) {\n      update(core.dispatch(run, type, chain(e.target)));\n    };\n  }\n  function onMove(e) {\n    var ids = chain(e.target);\n    var left = over.filter(function(u) {\n      return ids.indexOf(u) < 0;\n    }), entered = ids.filter(function(u) {\n      return over.indexOf(u) < 0;\n    });\n    over = ids;\n    if (left.length) update(core.dispatch(run, "pointerExit", left));\n    if (entered.length) update(core.dispatch(run, "pointerEnter", entered));\n  }\n  function onLeave() {\n    if (over.length) {\n      var left = over;\n      over = [];\n      update(core.dispatch(run, "pointerExit", left));\n    }\n  }\n  function onKey(type) {\n    return function(e) {\n      var t = e.target;\n      if (e.repeat || e.metaKey || e.ctrlKey || t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;\n      var r = core.dispatch(run, type, [], e.key);\n      if (r !== run) {\n        e.preventDefault();\n        update(r);\n      }\n    };\n  }\n  var down = on("pointerDown"), up = on("pointerUp"), click = on("click"), keyDown = onKey("keyDown"), keyUp = onKey("keyUp");\n  anims = root.getAnimations ? root.getAnimations({ subtree: true }) : [];\n  anims.forEach(function(x) {\n    x.pause();\n  });\n  t0 = performance.now();\n  root.addEventListener("pointerdown", down);\n  root.addEventListener("pointerup", up);\n  root.addEventListener("click", click);\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", keyDown);\n  window.addEventListener("keyup", keyUp);\n  raf = requestAnimationFrame(tick);\n  function byName(k) {\n    if (spec.in[k]) return k;\n    for (var id in spec.in) if (spec.in[id][2] === k) return id;\n    return k;\n  }\n  var api = {\n    state: function() {\n      return run.state;\n    },\n    values: function() {\n      return run.values;\n    },\n    set: function(input, value) {\n      update(core.set(run, byName(input), value));\n    },\n    fire: function(input) {\n      update(core.set(run, byName(input), void 0));\n    },\n    destroy: function() {\n      cancelAnimationFrame(raf);\n      root.removeEventListener("pointerdown", down);\n      root.removeEventListener("pointerup", up);\n      root.removeEventListener("click", click);\n      root.removeEventListener("pointermove", onMove);\n      root.removeEventListener("pointerleave", onLeave);\n      window.removeEventListener("keydown", keyDown);\n      window.removeEventListener("keyup", keyUp);\n    }\n  };\n  root.popcraftMachine = api;\n  return api.destroy;\n}';
-  }
-});
-
 // lib/io/web/runtime.ts
 function interactiveSpec(tree) {
   if (!tree.interactive) return null;
@@ -318019,55 +319168,6 @@ var init_runtime3 = __esm({
   }
 });
 
-// lib/io/web/machine-runtime.ts
-var init_machine_runtime = __esm({
-  "lib/io/web/machine-runtime.ts"() {
-    "use strict";
-    init_runtimes();
-  }
-});
-
-// lib/io/web/state-machine.ts
-function webStateMachine(doc2, frameId) {
-  const sm = machineOf(doc2.nodes[frameId]);
-  if (!sm || !doc2.nodes[frameId]?.timeline) return null;
-  const timeline = frameTimeline(doc2.nodes, frameId);
-  const duration3 = timelineDuration(doc2.nodes, frameId);
-  const action3 = (a) => a.value === void 0 ? [a.type, a.input] : [a.type, a.input, a.value];
-  const spec = { i: sm.initial, s: {}, t: [], in: {}, l: [] };
-  for (const i2 of sortedValues(sm.inputs)) spec.in[i2.id] = [i2.type, i2.type === "event" ? null : i2.value ?? defaultOf2(i2.type), i2.name];
-  for (const s of sortedValues(sm.states)) {
-    const [a, b] = stateStretch(s, timeline, duration3);
-    spec.s[s.id] = [a, b, s.loop ? 1 : 0, s.speed ?? 1, (s.entry ?? []).map(action3), s.name];
-  }
-  for (const t3 of sortedValues(sm.transitions)) {
-    spec.t.push([t3.from, t3.to, (t3.guards ?? []).map((g) => {
-      const type = sm.inputs[g.input]?.type;
-      const value3 = type === "event" ? null : g.value ?? (type === "boolean" ? true : type === "number" ? 0 : "");
-      return [g.input, g.op ?? "eq", value3];
-    })]);
-  }
-  for (const l of sortedValues(sm.listeners)) {
-    if (!isKeyListener(l.type)) spec.l.push([l.type, l.layer ?? null, l.actions.map(action3)]);
-    else spec.l.push(l.key ? [l.type, null, l.actions.map(action3), l.key] : [l.type, null, l.actions.map(action3)]);
-  }
-  return spec;
-}
-var defaultOf2, machineLayers, machineScript;
-var init_state_machine3 = __esm({
-  "lib/io/web/state-machine.ts"() {
-    "use strict";
-    init_instances2();
-    init_state_machine();
-    init_machine_runtime();
-    init_machine_runtime();
-    defaultOf2 = (type) => type === "boolean" ? false : type === "number" ? 0 : type === "string" ? "" : null;
-    machineLayers = (spec) => new Set((spec?.l ?? []).map((l) => l[1]).filter((id3) => !!id3));
-    machineScript = (spec) => `${MACHINE_JS}
-popcraftMachine(document.querySelector('[data-sm-root]'), ${JSON.stringify(spec)});`;
-  }
-});
-
 // lib/io/web/naming.ts
 var classNameFor, componentName, fileBase;
 var init_naming = __esm({
@@ -318083,128 +319183,6 @@ var init_naming = __esm({
   }
 });
 
-// lib/document/dev-mode.ts
-function codeSyntaxFor(v, platform4) {
-  const explicit = v.codeSyntax?.[platform4];
-  if (explicit) return explicit;
-  const parts = v.name.split("/").map((p2) => p2.trim()).filter(Boolean);
-  if (platform4 === "WEB") return `--${parts.join("-").toLowerCase().replace(/[^a-z0-9-]+/g, "-")}`;
-  const camel4 = parts.map((p2, i2) => {
-    const w = p2.replace(/[^A-Za-z0-9]+/g, " ").trim().split(/\s+/);
-    return w.map((x2, j) => i2 === 0 && j === 0 ? x2.toLowerCase() : x2[0].toUpperCase() + x2.slice(1).toLowerCase()).join("");
-  }).join("");
-  return platform4 === "iOS" ? `Tokens.${camel4}` : `Tokens.${camel4}`;
-}
-var init_dev_mode = __esm({
-  "lib/document/dev-mode.ts"() {
-    "use strict";
-  }
-});
-
-// lib/io/web/tokens.ts
-function cssValue(v, value3) {
-  if (v.type === "COLOR") return isColor3(value3) ? (value3.a ?? 1) < 1 ? toRgba(value3) : toHex(value3) : null;
-  if (v.type === "FLOAT") return typeof value3 === "number" && Number.isFinite(value3) ? String(Math.round(value3 * 1e3) / 1e3) : null;
-  if (v.type === "STRING") return typeof value3 === "string" ? JSON.stringify(value3) : null;
-  return null;
-}
-function siteTokens(doc2) {
-  const collections = Object.values(doc2.variableCollections ?? {}).map((c2) => ({
-    id: c2.id,
-    name: c2.name,
-    defaultMode: c2.defaultModeId,
-    modes: c2.modes.map((m) => ({ id: m.id, name: m.name, className: modeClass(c2, m) }))
-  }));
-  const taken = /* @__PURE__ */ new Set();
-  const vars = [];
-  for (const v of Object.values(doc2.variables ?? {}).sort((a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id))) {
-    const values3 = {};
-    for (const [mode, value3] of Object.entries(v.valuesByMode ?? {})) {
-      const css = cssValue(v, value3);
-      if (css !== null) values3[mode] = css;
-    }
-    if (!Object.keys(values3).length) continue;
-    let name2 = codeSyntaxFor(v, "WEB");
-    if (!name2.startsWith("--")) name2 = `--${slug(name2)}`;
-    if (taken.has(name2)) name2 = `${name2}-${v.id.replace(/[^a-zA-Z0-9]/g, "").slice(-4)}`;
-    taken.add(name2);
-    vars.push({ id: v.id, name: name2, type: v.type, collection: v.variableCollectionId, values: values3 });
-  }
-  const active3 = Object.entries(doc2.activeVariableModes ?? {}).flatMap(([cid, mid]) => {
-    const c2 = collections.find((x2) => x2.id === cid);
-    const m = c2 && mid !== c2.defaultMode ? c2.modes.find((x2) => x2.id === mid) : void 0;
-    return m ? [m.className] : [];
-  });
-  return { collections, vars, active: active3 };
-}
-function tokensCSS(tokens) {
-  const rules = [];
-  const defaults3 = [];
-  const byMode = /* @__PURE__ */ new Map();
-  for (const v of tokens.vars) {
-    const c2 = tokens.collections.find((x2) => x2.id === v.collection);
-    const base = v.values[c2?.defaultMode ?? ""] ?? Object.values(v.values)[0];
-    defaults3.push(`  ${v.name}: ${base};`);
-    if (v.type === "FLOAT") rules.push(`@property ${v.name} { syntax: '<number>'; inherits: true; initial-value: ${base}; }`);
-    for (const m of c2?.modes ?? []) {
-      if (m.id === c2.defaultMode || v.values[m.id] === void 0 || v.values[m.id] === base) continue;
-      (byMode.get(m.className) ?? byMode.set(m.className, []).get(m.className)).push(`  ${v.name}: ${v.values[m.id]};`);
-    }
-  }
-  if (defaults3.length) rules.push(`:root {
-${defaults3.join("\n")}
-}`);
-  for (const [cls, lines2] of byMode) rules.push(`.${cls} {
-${lines2.join("\n")}
-}`);
-  return rules;
-}
-function tokenStyle(raw, style, tokens) {
-  const name2 = (id3) => id3 ? tokens.vars.find((v) => v.id === id3)?.name : void 0;
-  const out = {};
-  const fills = (raw.fills ?? []).filter((f2) => f2.visible !== false);
-  const fill = fills.length === 1 && fills[0].type === "SOLID" && (fills[0].opacity ?? 1) === 1 ? name2(fills[0].boundVariables?.color) : void 0;
-  if (fill) {
-    if (raw.type === "TEXT") {
-      if (style.color) out.color = `var(${fill})`;
-    } else if (style.background) out.background = `var(${fill})`;
-  }
-  const stroke3 = raw.strokes?.[0];
-  const strokeVar = name2(stroke3?.boundVariables?.color);
-  if (strokeVar) {
-    if (style["border-color"]) out["border-color"] = `var(${strokeVar})`;
-    for (const p2 of ["border", "outline"]) if (style[p2]) out[p2] = style[p2].replace(/(#[0-9A-Fa-f]{3,8}|rgba?\([^)]*\))$/, `var(${strokeVar})`);
-  }
-  for (const [prop, id3] of Object.entries(raw.boundVariables ?? {})) {
-    const rule2 = NUMBER_PROPS[prop];
-    const token = tokens.vars.find((v) => v.id === id3);
-    if (!rule2 || !token || token.type !== "FLOAT" || style[rule2[0]] === void 0) continue;
-    out[rule2[0]] = rule2[1](token.name);
-  }
-  return out;
-}
-var slug, modeClass, isColor3, px2, NUMBER_PROPS;
-var init_tokens2 = __esm({
-  "lib/io/web/tokens.ts"() {
-    "use strict";
-    init_dev_mode();
-    init_paint2();
-    slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "x";
-    modeClass = (collection, mode) => `pc-${slug(collection.name)}-${slug(mode.name)}`;
-    isColor3 = (v) => !!v && typeof v === "object" && "r" in v && "g" in v && "b" in v;
-    px2 = (name2) => `calc(var(${name2}) * 1px)`;
-    NUMBER_PROPS = {
-      width: ["width", px2],
-      height: ["height", px2],
-      opacity: ["opacity", (n) => `var(${n})`],
-      cornerRadius: ["border-radius", px2],
-      itemSpacing: ["gap", px2],
-      fontSize: ["font-size", px2],
-      letterSpacing: ["letter-spacing", px2]
-    };
-  }
-});
-
 // lib/io/web/html.ts
 function serializeHTML(tree, opts = {}) {
   const rules = [];
@@ -318342,7 +319320,7 @@ var init_html = __esm({
     init_css();
     init_motion();
     init_runtime3();
-    init_state_machine3();
+    init_state_machine2();
     init_element();
     init_fonts3();
     init_naming();
@@ -318448,7 +319426,7 @@ function tailwindFor(style) {
   const out = [];
   for (const [k2, v] of Object.entries(style)) {
     const util = UTILITIES[k2]?.(v);
-    out.push(util ?? `[${k2}:${px3(v)}]`);
+    out.push(util ?? `[${k2}:${px4(v)}]`);
   }
   return out.join(" ");
 }
@@ -318468,44 +319446,44 @@ ${indent}</${tag}>` : `${indent}<${tag} class="${cls}"></${tag}>`;
   };
   return emit8(tree.root, 0, true);
 }
-var px3, UTILITIES;
+var px4, UTILITIES;
 var init_tailwind = __esm({
   "lib/io/web/tailwind.ts"() {
     "use strict";
     init_element();
-    px3 = (v) => v.replace(/"/g, "'").replace(/\s+/g, "_");
+    px4 = (v) => v.replace(/"/g, "'").replace(/\s+/g, "_");
     UTILITIES = {
-      width: (v) => `w-[${px3(v)}]`,
-      height: (v) => `h-[${px3(v)}]`,
+      width: (v) => `w-[${px4(v)}]`,
+      height: (v) => `h-[${px4(v)}]`,
       display: (v) => v === "flex" ? "flex" : v === "block" ? "block" : v === "none" ? "hidden" : null,
       "flex-direction": (v) => v === "row" ? "flex-row" : "flex-col",
-      gap: (v) => `gap-[${px3(v)}]`,
+      gap: (v) => `gap-[${px4(v)}]`,
       "justify-content": (v) => ({ "flex-start": "justify-start", "flex-end": "justify-end", center: "justify-center", "space-between": "justify-between" })[v] ?? null,
       "align-items": (v) => ({ "flex-start": "items-start", "flex-end": "items-end", center: "items-center", baseline: "items-baseline" })[v] ?? null,
-      padding: (v) => `p-[${px3(v)}]`,
-      "border-radius": (v) => `rounded-[${px3(v)}]`,
+      padding: (v) => `p-[${px4(v)}]`,
+      "border-radius": (v) => `rounded-[${px4(v)}]`,
       overflow: (v) => v === "hidden" ? "overflow-hidden" : null,
       position: (v) => ({ absolute: "absolute", relative: "relative", fixed: "fixed" })[v] ?? null,
-      left: (v) => `left-[${px3(v)}]`,
-      top: (v) => `top-[${px3(v)}]`,
+      left: (v) => `left-[${px4(v)}]`,
+      top: (v) => `top-[${px4(v)}]`,
       opacity: (v) => `opacity-[${v}]`,
-      background: (v) => v.startsWith("#") || v.startsWith("rgb") ? `bg-[${px3(v)}]` : `bg-[image:${px3(v)}]`,
-      color: (v) => `text-[${px3(v)}]`,
-      "font-size": (v) => `text-[${px3(v)}]`,
+      background: (v) => v.startsWith("#") || v.startsWith("rgb") ? `bg-[${px4(v)}]` : `bg-[image:${px4(v)}]`,
+      color: (v) => `text-[${px4(v)}]`,
+      "font-size": (v) => `text-[${px4(v)}]`,
       "font-weight": (v) => `font-[${v}]`,
       "font-style": (v) => v === "italic" ? "italic" : null,
-      "line-height": (v) => v === "normal" ? "leading-normal" : `leading-[${px3(v)}]`,
-      "letter-spacing": (v) => `tracking-[${px3(v)}]`,
+      "line-height": (v) => v === "normal" ? "leading-normal" : `leading-[${px4(v)}]`,
+      "letter-spacing": (v) => `tracking-[${px4(v)}]`,
       "text-align": (v) => `text-${v}`,
       "text-decoration": (v) => v === "underline" ? "underline" : v === "line-through" ? "line-through" : null,
       "text-transform": (v) => ({ uppercase: "uppercase", lowercase: "lowercase", capitalize: "capitalize" })[v] ?? null,
       "mix-blend-mode": (v) => `mix-blend-${v}`,
-      transform: (v) => /^rotate\(/.test(v) ? `rotate-[${px3(v.slice(7, -1))}]` : null,
-      filter: (v) => /^blur\(/.test(v) ? `blur-[${px3(v.slice(5, -1))}]` : null,
-      "backdrop-filter": (v) => /^blur\(/.test(v) ? `backdrop-blur-[${px3(v.slice(5, -1))}]` : null,
-      "box-shadow": (v) => `shadow-[${px3(v)}]`,
-      border: (v) => `border-[${px3(v)}]`,
-      outline: (v) => `outline-[${px3(v)}]`,
+      transform: (v) => /^rotate\(/.test(v) ? `rotate-[${px4(v.slice(7, -1))}]` : null,
+      filter: (v) => /^blur\(/.test(v) ? `blur-[${px4(v.slice(5, -1))}]` : null,
+      "backdrop-filter": (v) => /^blur\(/.test(v) ? `backdrop-blur-[${px4(v.slice(5, -1))}]` : null,
+      "box-shadow": (v) => `shadow-[${px4(v)}]`,
+      border: (v) => `border-[${px4(v)}]`,
+      outline: (v) => `outline-[${px4(v)}]`,
       "box-sizing": (v) => v === "border-box" ? "box-border" : "box-content"
     };
   }
@@ -318686,7 +319664,7 @@ var init_react2 = __esm({
     init_naming();
     init_motion();
     init_runtime3();
-    init_state_machine3();
+    init_state_machine2();
     init_tailwind();
     jsxText = (s) => `{'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'}`;
     template = (s) => "`" + s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${") + "`";
@@ -318713,140 +319691,6 @@ var init_react2 = __esm({
   }
 });
 
-// packages/runtime/src/commerce.ts
-var commerce_exports = {};
-__export(commerce_exports, {
-  COMMERCE_ACTIONS: () => COMMERCE_ACTIONS,
-  COMMERCE_ACTION_PROP: () => COMMERCE_ACTION_PROP,
-  COMMERCE_FIELDS: () => COMMERCE_FIELDS,
-  COMMERCE_PROP: () => COMMERCE_PROP,
-  COMMERCE_SCHEMAS: () => COMMERCE_SCHEMAS,
-  commerceItem: () => commerceItem,
-  commerceWords: () => commerceWords,
-  formatMoney: () => formatMoney,
-  isCommerceAction: () => isCommerceAction
-});
-function formatMoney(m, locale = "en-US") {
-  if (!m) return "";
-  try {
-    return new Intl.NumberFormat(locale, { style: "currency", currency: m.currencyCode, currencyDisplay: "narrowSymbol" }).format(Number(m.amount));
-  } catch {
-    return `${m.amount} ${m.currencyCode}`;
-  }
-}
-function commerceItem(schema, value3) {
-  switch (schema) {
-    case "commerce.product": {
-      const p2 = value3;
-      return { id: p2.id, values: {
-        title: p2.title,
-        handle: p2.handle,
-        url: `/product/${p2.handle}`,
-        description: p2.description,
-        price: formatMoney(p2.priceRange?.minVariantPrice),
-        max_price: formatMoney(p2.priceRange?.maxVariantPrice),
-        image: p2.featuredImage?.url ?? "",
-        image_alt: p2.featuredImage?.altText || p2.title,
-        available: !!p2.availableForSale,
-        variant_id: p2.variants?.find((v) => v.availableForSale)?.id ?? p2.variants?.[0]?.id ?? "",
-        tags: (p2.tags ?? []).join(", ")
-      } };
-    }
-    case "commerce.collection": {
-      const c2 = value3;
-      return { id: c2.handle || "all", values: { title: c2.title, handle: c2.handle, url: c2.path, description: c2.description } };
-    }
-    case "commerce.cart": {
-      const c2 = value3;
-      return { id: c2.id ?? "cart", values: {
-        count: c2.totalQuantity,
-        subtotal: formatMoney(c2.cost?.subtotalAmount),
-        taxes: formatMoney(c2.cost?.totalTaxAmount),
-        total: formatMoney(c2.cost?.totalAmount),
-        checkout_url: c2.checkoutUrl
-      } };
-    }
-    case "commerce.cartLine": {
-      const l = value3;
-      const m = l.merchandise;
-      return { id: l.id ?? m.id, values: {
-        title: m.product.title,
-        variant: m.title === "Default Title" ? "" : m.title,
-        url: `/product/${m.product.handle}`,
-        image: m.product.featuredImage?.url ?? "",
-        quantity: l.quantity,
-        price: formatMoney(l.cost?.totalAmount),
-        merchandise_id: m.id
-      } };
-    }
-    case "commerce.menu": {
-      const m = value3;
-      return { id: m.path, values: { title: m.title, url: m.path } };
-    }
-  }
-}
-function commerceWords(item, key5) {
-  if (key5 === "id") return item.id;
-  const v = item.values[key5];
-  return typeof v === "boolean" ? v ? "Yes" : "No" : v === void 0 ? "" : String(v);
-}
-var COMMERCE_SCHEMAS, COMMERCE_FIELDS, COMMERCE_PROP, COMMERCE_ACTIONS, COMMERCE_ACTION_PROP, isCommerceAction;
-var init_commerce = __esm({
-  "packages/runtime/src/commerce.ts"() {
-    "use strict";
-    COMMERCE_SCHEMAS = ["commerce.product", "commerce.collection", "commerce.cart", "commerce.cartLine", "commerce.menu"];
-    COMMERCE_FIELDS = {
-      "commerce.product": [
-        { name: "Title", type: "TEXT" },
-        { name: "Handle", type: "TEXT" },
-        { name: "URL", type: "URL" },
-        { name: "Description", type: "TEXT" },
-        { name: "Price", type: "TEXT" },
-        { name: "Max price", type: "TEXT" },
-        { name: "Image", type: "MEDIA" },
-        { name: "Image alt", type: "TEXT" },
-        { name: "Available", type: "BOOLEAN" },
-        { name: "Variant ID", type: "TEXT" },
-        { name: "Tags", type: "TEXT" }
-      ],
-      "commerce.collection": [{ name: "Title", type: "TEXT" }, { name: "Handle", type: "TEXT" }, { name: "URL", type: "URL" }, { name: "Description", type: "TEXT" }],
-      "commerce.cart": [
-        { name: "Count", type: "NUMBER" },
-        { name: "Subtotal", type: "TEXT" },
-        { name: "Taxes", type: "TEXT" },
-        { name: "Total", type: "TEXT" },
-        { name: "Checkout URL", type: "URL" }
-      ],
-      "commerce.cartLine": [
-        { name: "Title", type: "TEXT" },
-        { name: "Variant", type: "TEXT" },
-        { name: "URL", type: "URL" },
-        { name: "Image", type: "MEDIA" },
-        { name: "Quantity", type: "NUMBER" },
-        { name: "Price", type: "TEXT" },
-        { name: "Merchandise ID", type: "TEXT" }
-      ],
-      "commerce.menu": [{ name: "Title", type: "TEXT" }, { name: "URL", type: "URL" }]
-    };
-    COMMERCE_PROP = {
-      "commerce.product": { name: "products", type: "Product" },
-      "commerce.collection": { name: "collections", type: "Collection" },
-      "commerce.cart": { name: "cart", type: "Cart", one: true },
-      "commerce.cartLine": { name: "lines", type: "CartItem" },
-      "commerce.menu": { name: "menu", type: "Menu" }
-    };
-    COMMERCE_ACTIONS = ["addToCart", "updateCartLine", "removeCartLine", "checkout", "search"];
-    COMMERCE_ACTION_PROP = {
-      addToCart: "onAddToCart",
-      updateCartLine: "onUpdateCartLine",
-      removeCartLine: "onRemoveCartLine",
-      checkout: "onCheckout",
-      search: "onSearch"
-    };
-    isCommerceAction = (a) => typeof a === "string" && COMMERCE_ACTIONS.includes(a);
-  }
-});
-
 // lib/sites/auth.ts
 function usesSignIn(doc2) {
   if (Object.values(doc2.collections ?? {}).some((c2) => c2.perVisitor)) return true;
@@ -319542,7 +320386,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.16.0",
+      version: "0.17.0",
       description: "What code exported from PopCraft shares: the meaning of expressions (operators and functions) and, as it grows, the parts of a design's behaviour that are common code rather than generated React.",
       license: "MIT",
       homepage: "https://popcraft.app/docs/exporting/nextjs",
@@ -320316,941 +321160,6 @@ var init_physics = __esm({
   }
 });
 
-// lib/code/props.ts
-function propName(key5) {
-  const words = key5.split("#")[0].trim().split(/[^A-Za-z0-9]+/).filter(Boolean);
-  const name2 = words.map((w, i2) => i2 === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
-  return /^[A-Za-z_$]/.test(name2) ? name2 : `p${name2}`;
-}
-function componentOf(nodes, node2) {
-  const c2 = node2.type === "COMPONENT" ? node2 : node2.type === "INSTANCE" ? nodes[node2.mainComponentId] : void 0;
-  return c2?.type === "COMPONENT" ? c2 : void 0;
-}
-function codeOf(nodes, node2) {
-  if (node2.type !== "COMPONENT" && node2.type !== "INSTANCE") return null;
-  return componentOf(nodes, node2)?.code ?? null;
-}
-function codeProps(nodes, node2) {
-  const component = componentOf(nodes, node2);
-  const out = {};
-  if (!component) return out;
-  const set4 = component.parentId ? nodes[component.parentId] : void 0;
-  const defs = (set4?.type === "COMPONENT_SET" ? set4.componentPropertyDefinitions : component.componentPropertyDefinitions) ?? {};
-  const given = node2.type === "INSTANCE" ? node2.componentProperties ?? {} : {};
-  for (const key5 of Object.keys(defs).sort()) {
-    const v = value(key5 in given ? given[key5] : defs[key5].defaultValue);
-    if (v !== void 0) out[propName(key5)] = v;
-  }
-  out.width = Math.round(node2.width);
-  out.height = Math.round(node2.height);
-  return out;
-}
-var value;
-var init_props = __esm({
-  "lib/code/props.ts"() {
-    "use strict";
-    init_color();
-    value = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : v && typeof v === "object" && "r" in v ? colorToHex8(v) : void 0;
-  }
-});
-
-// lib/document/controls.ts
-function fieldPart(nodes, id3) {
-  const n = nodes[id3];
-  if (!n) return null;
-  if (n.type === "TEXT") return id3;
-  for (const c2 of n.childIds ?? []) {
-    const hit = fieldPart(nodes, c2);
-    if (hit) return hit;
-  }
-  return null;
-}
-var cleanName2;
-var init_controls = __esm({
-  "lib/document/controls.ts"() {
-    "use strict";
-    cleanName2 = (raw) => raw.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
-  }
-});
-
-// lib/io/web/expressible.ts
-function expressibility(node2, styles) {
-  const c2 = capability(node2, "css", styles);
-  return { css: c2.reason === "", reason: c2.reason, needsRaster: c2.verdict === "raster" };
-}
-var init_expressible = __esm({
-  "lib/io/web/expressible.ts"() {
-    "use strict";
-    init_capability();
-  }
-});
-
-// lib/io/web/responsive.ts
-function containerStyle(f2) {
-  const out = {};
-  if (isStack(f2) && f2.layoutWrap === "WRAP") {
-    out["flex-wrap"] = "wrap";
-    const cross2 = f2.counterAxisSpacing ?? f2.itemSpacing ?? 0;
-    const main2 = f2.itemSpacing ?? 0;
-    if (cross2 !== main2) out.gap = f2.layoutMode === "HORIZONTAL" ? `${cross2}px ${main2}px` : `${main2}px ${cross2}px`;
-    out["align-content"] = "flex-start";
-  }
-  if (isGrid(f2)) {
-    out.display = "grid";
-    const cols = f2.layoutGridColumns ?? "AUTO";
-    out["grid-template-columns"] = cols === "AUTO" ? `repeat(auto-fill, minmax(${f2.layoutGridMinColumnWidth ?? 100}px, 1fr))` : Array.from({ length: Math.max(1, cols) }, (_, i2) => track(f2.layoutGridColumnSizes?.[i2])).join(" ");
-    const rows = f2.layoutGridRows ?? "AUTO";
-    if (rows === "AUTO") out["grid-auto-rows"] = `minmax(${f2.layoutGridMinRowHeight ?? 100}px, auto)`;
-    else out["grid-template-rows"] = Array.from({ length: Math.max(1, rows) }, (_, i2) => track(f2.layoutGridRowSizes?.[i2])).join(" ");
-    const colGap = f2.itemSpacing ?? 0, rowGap = f2.counterAxisSpacing ?? colGap;
-    out.gap = rowGap === colGap ? `${colGap}px` : `${rowGap}px ${colGap}px`;
-    if (f2.padding) {
-      out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
-      if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
-    }
-  }
-  const scroll = f2.overflowScrolling;
-  if (scroll && scroll !== "NONE") {
-    out["overflow-x"] = scroll === "HORIZONTAL" || scroll === "BOTH" ? "auto" : "hidden";
-    out["overflow-y"] = scroll === "VERTICAL" || scroll === "BOTH" ? "auto" : "hidden";
-  }
-  return out;
-}
-function flowChild(node2, parent) {
-  const style = { ...limits(node2) };
-  const h = node2.layoutSizingHorizontal ?? "FIXED", v = node2.layoutSizingVertical ?? "FIXED";
-  if (isGrid(parent)) {
-    if (h !== "FIXED") style.width = h === "FILL" ? null : "fit-content";
-    if (v !== "FIXED") style.height = null;
-    return { style };
-  }
-  if (h === "FIXED" && style["max-width"] === void 0) style["max-width"] = "100%";
-  const row2 = parent.layoutMode === "HORIZONTAL";
-  const main2 = row2 ? h : v, cross2 = row2 ? v : h;
-  const mainProp = row2 ? "width" : "height", crossProp = row2 ? "height" : "width";
-  if (main2 === "FILL") {
-    style[mainProp] = null;
-    style.flex = "1 1 0";
-    if (style[`min-${mainProp}`] === void 0) style[`min-${mainProp}`] = "0";
-  } else {
-    if (main2 === "HUG") style[mainProp] = null;
-    style["flex-shrink"] = "0";
-  }
-  if (cross2 === "FILL") {
-    style[crossProp] = null;
-    style["align-self"] = "stretch";
-  } else {
-    if (cross2 === "HUG") style[crossProp] = null;
-    if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
-  }
-  return { style };
-}
-function constrained(kind, pos, size6, parentSize, start2, end, sizeProp) {
-  const far = parentSize - pos - size6;
-  switch (kind) {
-    case "MAX":
-      return { place: { [end]: px4(far) }, style: {} };
-    case "STRETCH":
-      return { place: { [start2]: px4(pos), [end]: px4(far) }, style: { [sizeProp]: null } };
-    // Its centre keeps its distance from the parent's centre.
-    case "CENTER":
-      return { place: { [start2]: `calc(50% + ${px4(pos - parentSize / 2)})` }, style: {} };
-    case "SCALE":
-      return parentSize > 0 ? { place: { [start2]: pct2(pos / parentSize) }, style: { [sizeProp]: pct2(size6 / parentSize) } } : { place: { [start2]: px4(pos) }, style: {} };
-    default:
-      return { place: { [start2]: px4(pos) }, style: {} };
-  }
-}
-function placedChild(node2, parent, frame2 = parent) {
-  const c2 = node2.constraints ?? { horizontal: "MIN", vertical: "MIN" };
-  const x2 = constrained(c2.horizontal, node2.x, node2.width, frame2.width, "left", "right", "width");
-  const y = constrained(c2.vertical, node2.y, node2.height, frame2.height, "top", "bottom", "height");
-  return { style: { ...limits(node2), ...x2.style, ...y.style }, place: { position: "absolute", ...x2.place, ...y.place } };
-}
-function siteLayout(node2, parent, layout2) {
-  const own2 = node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE" ? node2 : null;
-  if (!parent) {
-    const grows = !own2 || laysOut(own2) || own2.overflowScrolling === "NONE" || !own2.overflowScrolling;
-    return { style: { ...limits(node2), width: "100%", ...grows ? { height: null, "min-height": `max(${px4(node2.height)}, 100dvh)` } : {} }, place: { position: "relative" } };
-  }
-  const s = node2;
-  return layout2 && laysOut(layout2) && s.layoutPositioning !== "ABSOLUTE" ? flowChild(s, layout2) : placedChild(s, parent, parent.type === "INSTANCE" && layout2 ? layout2 : parent);
-}
-var px4, pct2, isStack, isGrid, laysOut, track, limits;
-var init_responsive = __esm({
-  "lib/io/web/responsive.ts"() {
-    "use strict";
-    px4 = (v) => `${Math.round(v * 100) / 100}px`;
-    pct2 = (v) => `${Math.round(v * 1e4) / 100}%`;
-    isStack = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
-    isGrid = (f2) => f2?.layoutMode === "GRID";
-    laysOut = (f2) => isStack(f2) || isGrid(f2);
-    track = (t3) => {
-      if (!t3 || t3.sizing === "FILL") return t3?.value && /fr$/.test(t3.value) ? t3.value : "1fr";
-      if (t3.sizing === "HUG") return "auto";
-      return /^[\d.]+$/.test(t3.value) ? `${t3.value}px` : t3.value;
-    };
-    limits = (n) => {
-      const out = {};
-      if (n.minWidth !== void 0) out["min-width"] = px4(n.minWidth);
-      if (n.maxWidth !== void 0) out["max-width"] = px4(n.maxWidth);
-      if (n.minHeight !== void 0) out["min-height"] = px4(n.minHeight);
-      if (n.maxHeight !== void 0) out["max-height"] = px4(n.maxHeight);
-      return out;
-    };
-  }
-});
-
-// lib/io/web/richtext.ts
-function runStyle(seg) {
-  const out = {};
-  if (seg.fontFamily) out["font-family"] = `"${seg.fontFamily}", system-ui, sans-serif`;
-  if (seg.fontSize) out["font-size"] = `${seg.fontSize}px`;
-  if (seg.fontWeight) out["font-weight"] = String(seg.fontWeight);
-  if (seg.fontStyle) out["font-style"] = seg.fontStyle;
-  if (seg.lineHeight !== void 0 && seg.lineHeight !== "AUTO") out["line-height"] = `${seg.lineHeight}px`;
-  if (seg.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
-  else if (seg.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
-  else if (seg.textDecoration === "NONE") out["text-decoration"] = "none";
-  if (seg.textCase === "UPPER") out["text-transform"] = "uppercase";
-  else if (seg.textCase === "LOWER") out["text-transform"] = "lowercase";
-  else if (seg.textCase === "TITLE") out["text-transform"] = "capitalize";
-  else if (seg.textCase === "ORIGINAL") out["text-transform"] = "none";
-  const solid5 = seg.fills?.find((f2) => f2.visible !== false && f2.type === "SOLID" && f2.color);
-  if (solid5?.color) out.color = toHex(solid5.color);
-  return out;
-}
-function textRuns(t3) {
-  const text = t3.characters ?? "";
-  const segs = [...t3.styledSegments ?? []].filter((s) => s.end > s.start).sort((a, b) => a.start - b.start);
-  if (!segs.length && !t3.link) return void 0;
-  const runs = [];
-  const push2 = (from2, to, seg) => {
-    if (to <= from2) return;
-    const link2 = seg?.link ?? t3.link;
-    runs.push({ text: text.slice(from2, to), style: seg ? runStyle(seg) : {}, ...link2 ? { link: link2 } : {} });
-  };
-  let at3 = 0;
-  for (const s of segs) {
-    const start2 = Math.max(at3, Math.min(text.length, s.start)), end = Math.min(text.length, s.end);
-    push2(at3, start2);
-    push2(start2, end, s);
-    at3 = Math.max(at3, end);
-  }
-  push2(at3, text.length);
-  return runs;
-}
-var init_richtext = __esm({
-  "lib/io/web/richtext.ts"() {
-    "use strict";
-    init_paint2();
-  }
-});
-
-// lib/io/web/timeline.ts
-function frameWebMotion(doc2, frameId, style) {
-  const nodes = doc2.nodes;
-  const frame2 = nodes[frameId];
-  if (!frame2 || !hasFrameMotion(nodes, frameId)) return null;
-  const len3 = timelineDuration(nodes, frameId);
-  if (!(len3 > 0)) return null;
-  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
-  const times2 = [];
-  const poses = [];
-  for (let i2 = 0; i2 <= steps; i2++) {
-    const t3 = len3 * i2 / steps;
-    times2.push(t3);
-    poses.push(evaluatePose(nodes, { kind: "frame", frameId }, t3).nodes);
-  }
-  const ids2 = /* @__PURE__ */ new Set();
-  for (const p2 of poses) for (const id3 in p2) if (id3 !== frameId && p2[id3] !== nodes[id3]) ids2.add(id3);
-  const loops = frameRunsOn(nodes, frameId);
-  const out = /* @__PURE__ */ new Map();
-  const tag = frameId.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
-  let n = 0;
-  for (const id3 of ids2) {
-    const rest = id3.includes("::") ? resolveVirtualNode2(nodes, id3) : nodes[id3];
-    if (!rest || !underFrame(nodes, id3, frameId)) continue;
-    const frames = keyframesOf(times2, poses.map((p2) => declarationsOf(p2[id3] ?? rest, rest, style)), len3);
-    if (!frames) continue;
-    out.set(id3, {
-      name: `timeline-${tag}-${n++}`,
-      frames,
-      durationMs: Math.round(len3),
-      delayMs: 0,
-      iterations: loops ? "infinite" : 1,
-      direction: "normal",
-      fill: "both"
-    });
-  }
-  return out.size ? out : null;
-}
-function underFrame(nodes, id3, frameId) {
-  const real = id3.split("::")[0];
-  for (let n = nodes[real]; n; n = n.parentId ? nodes[n.parentId] : void 0) if (n.id === frameId) return true;
-  return false;
-}
-var init_timeline = __esm({
-  "lib/io/web/timeline.ts"() {
-    "use strict";
-    init_scene_graph();
-    init_pose();
-    init_instances2();
-    init_keyframes();
-  }
-});
-
-// lib/io/web/tree.ts
-function anchorTargets(doc2) {
-  const hit = anchorMemo.get(doc2.nodes);
-  if (hit) return hit;
-  const out = /* @__PURE__ */ new Set();
-  for (const id3 in doc2.nodes) {
-    const n = doc2.nodes[id3];
-    if (n.semantics?.link?.kind === "anchor") out.add(n.semantics.link.nodeId);
-    for (const ix of n.interactions ?? []) if (ix.action.link?.kind === "anchor" && ix.action.link.nodeId) out.add(ix.action.link.nodeId);
-  }
-  anchorMemo.set(doc2.nodes, out);
-  return out;
-}
-function spriteOnly(nodes, id3) {
-  let leaves = 0;
-  const visit2 = (nid, depth2) => {
-    const n = nodes[nid];
-    if (!n || n.visible === false) return true;
-    if (n.type === "PIXEL_GRID") {
-      leaves++;
-      return true;
-    }
-    if (depth2 > 8 || n.type !== "INSTANCE" && n.type !== "COMPONENT" && n.type !== "FRAME" && n.type !== "GROUP") return false;
-    const main2 = n.mainComponentId;
-    const kids = n.childIds?.length ? n.childIds : main2 ? [main2] : [];
-    return kids.every((k2) => visit2(k2, depth2 + 1));
-  };
-  return visit2(id3, 0) && leaves > 0;
-}
-function prepared(node2, doc2) {
-  let n = node2;
-  if (n.id.includes("::")) n = withInstanceBox(n, doc2.nodes);
-  n = resolveNodeVariables(n, doc2.variables, doc2.variableCollections, doc2.activeVariableModes, exprData(doc2));
-  n = resolveTextNodeStyles(n, doc2.styles ?? {});
-  return n;
-}
-function layoutOf2(node2, nodes) {
-  if (!node2) return null;
-  if (node2.type === "INSTANCE") {
-    const mainId = node2.mainComponentId;
-    const main2 = mainId ? nodes[mainId] : void 0;
-    return main2 ?? null;
-  }
-  if (node2.id.includes("::")) {
-    const real = nodes[node2.id.split("::").pop()];
-    return real ?? node2;
-  }
-  return node2;
-}
-function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
-  const cap2 = opts.nodeCap ?? DEFAULT_NODE_CAP;
-  const first2 = doc2.nodes[nodeId2] ?? (nodeId2.includes("::") ? childLookup(doc2, nodeId2) : void 0);
-  if (!first2) throw new Error(`No node ${nodeId2}`);
-  let emitted = 0;
-  let truncated = false;
-  let folds = 0;
-  const tokens = opts.target === "site" && Object.keys(doc2.variables ?? {}).length ? siteTokens(doc2) : null;
-  const anchored = anchorTargets(doc2);
-  const pageItem = () => {
-    const c2 = opts.item && doc2.collections?.[opts.item.collectionId];
-    if (c2 && opts.item.recordId === ITEM_RECORD) return { collection: c2, record: templateRecord(c2), suffix: `~${ITEM_RECORD}` };
-    const r = opts.item && doc2.records?.[opts.item.recordId];
-    return c2 && r ? { collection: c2, record: r, suffix: "" } : null;
-  };
-  let item = pageItem();
-  const scopeOf2 = (it) => itemScope(it.collection, it.record, withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2));
-  const itemised = (node2, raw, it) => itemNode(node2, raw, it.collection, it.record, scopeOf2(it));
-  const itemLink = (link2, it) => {
-    const filled2 = it && link2.kind === "url" ? { ...link2, url: itemText(link2.url, it.collection, it.record) } : it && (link2.kind === "email" || link2.kind === "tel") ? { ...link2, value: itemText(link2.value, it.collection, it.record) } : link2;
-    if (filled2.kind === "screen") {
-      const dest = doc2.nodes[filled2.frameId];
-      const base = opts.routes?.[filled2.frameId];
-      const of = dest?.route?.collectionId;
-      if (of && base !== void 0) {
-        const slugField = it?.record.id === ITEM_RECORD && it.collection.id === of ? it.collection.fields.find((f2) => f2.id === it.collection.slugFieldId) ?? it.collection.fields.find((f2) => f2.type === "SLUG" || f2.type === "TEXT") : void 0;
-        if (slugField) return { link: filled2, href: `${base === "/" ? "" : base}/${itemMark(fieldKey(slugField.name))}`, screen: filled2.frameId };
-        const slugs = recordSlugs(doc2, of);
-        const rec = it?.collection.id === of ? it.record.id : slugs.keys().next().value;
-        const slug3 = rec ? slugs.get(rec) : void 0;
-        return slug3 ? { link: filled2, href: `${base === "/" ? "" : base}/${slug3}`, screen: `${filled2.frameId}~${rec}` } : { link: filled2, href: null };
-      }
-      return { link: filled2, href: base ?? null, screen: filled2.frameId };
-    }
-    if (filled2.kind === "url" && it?.record.id === ITEM_RECORD && itemMarks(filled2.url)) return { link: filled2, href: filled2.url.trim() };
-    return { link: filled2, href: hrefOf(filled2, doc2.nodes, opts.routes) };
-  };
-  const fields = /* @__PURE__ */ new Map();
-  const styleOpts = { fullImageUrl: opts.fullImageUrls ?? opts.target === "site" };
-  const stylesOf = (n) => styleMapFor(n, doc2.styles, styleOpts);
-  let motion = null;
-  const timeline = !opts.static && !start2 && first2.type === "FRAME" ? frameWebMotion(doc2, first2.id, (n) => stylesOf(prepared(n, doc2))) : null;
-  const build3 = (raw, parent, in3D2, fold) => {
-    if (emitted >= cap2) {
-      truncated = true;
-      return null;
-    }
-    emitted++;
-    const node2 = item ? itemised(prepared(raw, doc2), raw, item) : prepared(raw, doc2);
-    const waits = node2.visible === false && parent !== null;
-    if (waits && !(opts.target === "site" && followsVisibility(raw))) return null;
-    const exp = expressibility(node2, doc2.styles);
-    const f2 = layoutOf2(node2, doc2.nodes) ?? node2;
-    const style = stylesOf(node2);
-    if (f2 !== node2 && !style.display) Object.assign(style, flexDeclarations(f2));
-    const through = in3D2 && passesThrough(raw, doc2.nodes);
-    const own2 = typeof node2.opacity === "number" ? node2.opacity : 1;
-    if (through) {
-      style["transform-style"] = "preserve-3d";
-      delete style.opacity;
-      style[foldVar(fold + 1)] = fold ? `calc(var(${foldVar(fold)}) * ${round3(own2)})` : String(round3(own2));
-      folds = Math.max(folds, fold + 1);
-    } else if (fold) style.opacity = own2 === 1 ? `var(${foldVar(fold)})` : `calc(var(${foldVar(fold)}) * ${round3(own2)})`;
-    if (own2 === 0) style["pointer-events"] = "none";
-    if (clickable(raw) && !style.cursor) style.cursor = "pointer";
-    const web = {
-      id: item?.suffix ? `${node2.id}${item.suffix}` : node2.id,
-      name: node2.name || node2.type,
-      type: node2.type,
-      x: Math.round(node2.x),
-      y: Math.round(node2.y),
-      width: Math.round(node2.width),
-      height: Math.round(node2.height),
-      // Absolutely-positioned auto-layout children are taken out of the flow, exactly as the canvas does.
-      // A grid's children are in its flow too: its tracks place them.
-      positioning: (isFlex(layoutOf2(parent, doc2.nodes)) || layoutOf2(parent, doc2.nodes)?.layoutMode === "GRID") && node2.layoutPositioning !== "ABSOLUTE" ? "flow" : "absolute",
-      style,
-      children: []
-    };
-    if (tokens) Object.assign(style, tokenStyle(raw, style, tokens));
-    if (opts.target === "site") {
-      const lay = siteLayout(node2, parent, layoutOf2(parent, doc2.nodes));
-      for (const [k2, v] of Object.entries(lay.style)) {
-        if (v === null) delete style[k2];
-        else style[k2] = v;
-      }
-      if (laysOut(f2) || f2.overflowScrolling) Object.assign(style, containerStyle(f2));
-      if (node2.type === "TEXT") {
-        if (style["white-space"] === "pre") {
-          style["white-space"] = "pre-wrap";
-          style.width = "fit-content";
-        }
-        if (style["max-width"] === void 0) style["max-width"] = "100%";
-        if (style.height && style.height !== "auto") {
-          style["min-height"] = style.height;
-          delete style.height;
-        }
-      }
-      if (lay.place && (parent !== null || !start2?.parent)) web.place = lay.place;
-    }
-    if (waits) web.hidden = true;
-    const sem = node2.semantics;
-    if (sem) {
-      if (sem.tag && sem.tag !== "div") web.tag = sem.tag;
-      const attrs = {};
-      if (sem.label) attrs["aria-label"] = sem.label;
-      if (sem.hidden) attrs["aria-hidden"] = "true";
-      if (Object.keys(attrs).length) web.attrs = attrs;
-      const to = sem.link ? itemLink(sem.link, item) : null;
-      if (to?.href) web.link = { href: to.href, ...opensNewTab(to.link) ? { newTab: true } : {}, ...to.screen ? { screen: to.screen } : {} };
-    }
-    const control = node2.control;
-    if (control) {
-      const named = control.name ? { name: control.name } : {};
-      if (control.kind === "FORM") {
-        web.tag = "form";
-        if (isCommerceAction(control.formAction)) web.action = control.formAction;
-      } else if (control.kind === "BUTTON") {
-        web.tag = "button";
-        web.attrs = { ...web.attrs, type: control.buttonType ?? "submit", ...named, ...control.name && control.value !== void 0 ? { value: item && hasItemToken(control.value) ? itemText(control.value, item.collection, item.record) : control.value } : {} };
-      } else if (control.kind === "CHECKBOX" || control.kind === "RADIO") {
-        web.check = { attrs: { type: control.kind === "RADIO" ? "radio" : "checkbox", ...named, ...control.value !== void 0 ? { value: control.value } : {}, ...control.checked ? { checked: "" } : {}, ...control.required ? { required: "" } : {} }, ...control.variableId ? { variable: control.variableId } : {} };
-      } else fields.set(fieldPart(doc2.nodes, raw.id) ?? raw.id, control);
-    }
-    const control0 = fields.get(raw.id);
-    const field = control0 && item && control0.value !== void 0 && hasItemToken(control0.value) ? { ...control0, value: itemText(control0.value, item.collection, item.record) } : control0;
-    if (field) {
-      const tag = field.kind === "TEXTAREA" ? "textarea" : field.kind === "SELECT" ? "select" : "input";
-      const words = node2.characters;
-      web.input = {
-        tag,
-        attrs: {
-          ...tag === "input" ? { type: field.inputType ?? "text" } : {},
-          ...field.name ? { name: field.name } : {},
-          ...tag !== "select" && (field.placeholder ?? words) ? { placeholder: field.placeholder ?? words } : {},
-          ...field.required ? { required: "" } : {},
-          ...tag === "input" && field.value !== void 0 ? { value: field.value } : {},
-          "aria-label": node2.semantics?.label ?? field.placeholder ?? field.name ?? web.name
-        },
-        ...tag === "select" ? { options: field.options ?? [] } : {},
-        ...tag !== "input" && field.value !== void 0 ? { value: field.value } : {},
-        ...field.variableId ? { variable: field.variableId } : {}
-      };
-    }
-    if (sem?.anchor || anchored.has(node2.id)) web.attrs = { ...web.attrs, id: anchorOf(node2) };
-    if (through) web.preserve3d = true;
-    web.tf = transformParts(node2);
-    if (typeof node2.altText === "string") web.alt = node2.altText;
-    if (parent === null) web.positioning = start2?.parent ? web.positioning : "flow";
-    if (f2.layoutMode === "HORIZONTAL" || f2.layoutMode === "VERTICAL") {
-      web.layout = {
-        direction: f2.layoutMode === "HORIZONTAL" ? "row" : "column",
-        gap: f2.itemSpacing ?? 0,
-        justify: JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"],
-        align: ALIGN2[f2.counterAxisAlignItems ?? "MIN"],
-        padding: f2.padding ?? { top: 0, right: 0, bottom: 0, left: 0 }
-      };
-    }
-    if (node2.type === "TEXT") {
-      const t3 = node2;
-      const solid5 = (t3.fills ?? []).find((p2) => p2.visible !== false && p2.type === "SOLID" && p2.color);
-      web.text = {
-        characters: t3.characters ?? "",
-        align: t3.textAlign,
-        fontFamily: t3.fontFamily,
-        fontSize: t3.fontSize,
-        fontWeight: t3.fontWeight,
-        italic: t3.fontStyle === "italic",
-        ...solid5?.color ? { color: toHex(solid5.color) } : {},
-        ...t3.letterSpacing ? { letterSpacing: t3.letterSpacing } : {},
-        ...t3.lineHeight !== "AUTO" ? { lineHeight: t3.lineHeight } : {}
-      };
-      const runs = textRuns(t3);
-      if (runs) web.runs = runs;
-    }
-    const tl = timeline?.get(node2.id);
-    const mo = tl ?? motion?.children.get(node2.id);
-    if (mo) web.motion = { style: animationStyle(mo, tl ? "load" : motion.trigger), keyframes: keyframesCSS(mo) };
-    const ext = getNativeExtension(raw.type);
-    if (ext?.toWeb) {
-      const said = ext.toWeb(node2, { escape: escapeHTML, color: (c2) => toRgba({ ...c2, a: c2.a ?? 1 }) });
-      if (said.tag) web.tag = said.tag;
-      Object.assign(style, said.style);
-      web.html = said.html;
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    const code = opts.target === "site" ? codeOf(doc2.nodes, raw) : null;
-    if (code && doc2.codeModules?.[code.moduleId]) {
-      for (const k2 of PAINTED) delete style[k2];
-      web.code = { module: code.moduleId, ...code.exportName ? { export: code.exportName } : {}, props: codeProps(doc2.nodes, node2) };
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    const sprite = opts.target === "site" && raw.type === "INSTANCE" && !raw.id.includes("::") && spriteOnly(doc2.nodes, raw.id) && isLive(doc2.nodes, raw.id);
-    if (!exp.css || sprite) {
-      for (const k2 of PAINTED) delete style[k2];
-      web.asset = { kind: opts.assetKind ?? (exp.needsRaster ? "png" : "svg"), reason: exp.reason || (sprite ? "an animated sprite" : ""), ...item?.suffix ? { of: node2.id } : {} };
-      if (isPixelArt(doc2, raw.id)) style["image-rendering"] = "pixelated";
-      if (sprite || opts.target === "site" && renderMode(node2, { styles: doc2.styles, live: isLive(doc2.nodes, raw.id) }) === "island") web.island = true;
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    const lost = capability(node2, "css", doc2.styles).dropped.find((f3) => f3.startsWith("paint:"));
-    if (lost && !node2.id.includes("::")) {
-      const site = opts.target === "site";
-      style.isolation = "isolate";
-      web.children.push({
-        id: `${node2.id}/backdrop${item?.suffix ?? ""}`,
-        name: `${web.name} fill`,
-        type: "BACKDROP",
-        x: 0,
-        y: 0,
-        width: web.width,
-        height: web.height,
-        positioning: "absolute",
-        ...site ? { place: { position: "absolute", inset: "0" } } : {},
-        style: { ...site ? {} : { width: `${web.width}px`, height: `${web.height}px` }, "border-radius": "inherit", overflow: "hidden", "z-index": "-1", "pointer-events": "none" },
-        alt: "",
-        asset: { kind: "png", reason: featureName(lost), of: node2.id, self: true },
-        ...site && movesItself(raw) ? { island: true } : {},
-        children: []
-      });
-    }
-    const outer = motion;
-    if (!motion && node2.type === "INSTANCE" && !opts.static) {
-      motion = instanceWebMotion(doc2, node2, (n) => stylesOf(prepared(n, doc2)));
-      if (motion && (motion.trigger !== "load" || opts.target === "site")) web.motionTrigger = motion.trigger;
-    }
-    try {
-      if (opts.includeChildren !== false) {
-        const kids3D = in3D2 ? through : is3DContext(raw) && !raw.id.includes("::");
-        const kidFold = through ? fold + 1 : 0;
-        const repeat = raw.repeat;
-        const collection = repeat && doc2.collections?.[repeat.collectionId];
-        if (repeat && collection && opts.target === "site") {
-          const outerItem = item;
-          const under = outerItem ? scopeOf2(outerItem) : withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2);
-          try {
-            for (const record2 of repeatRecords(doc2, repeat, under)) {
-              item = { collection, record: record2, suffix: `${outerItem?.suffix ?? ""}~${record2.id}` };
-              for (const child of childrenOf(node2, doc2.nodes)) {
-                const built = build3(child, node2, kids3D, kidFold);
-                if (built) web.children.push(built);
-              }
-            }
-            if (collection.perVisitor && !outerItem || collection.schema && opts.listTemplates) {
-              item = { collection, record: templateRecord(collection), suffix: `~${ITEM_RECORD}` };
-              const template2 = [];
-              for (const child of childrenOf(node2, doc2.nodes)) {
-                const built = build3(child, node2, kids3D, kidFold);
-                if (built) template2.push(built);
-              }
-              const sortField = repeat.sort && collection.fields.find((f3) => f3.id === repeat.sort.fieldId);
-              web.repeat = {
-                collectionId: collection.id,
-                template: template2,
-                ...repeat.filter?.trim() ? { filter: repeat.filter } : {},
-                ...sortField ? { sort: { key: fieldKey(sortField.name), dir: repeat.sort.dir } } : {},
-                ...repeat.offset ? { offset: repeat.offset } : {},
-                ...repeat.limit ? { limit: repeat.limit } : {}
-              };
-            }
-          } finally {
-            item = outerItem;
-          }
-        } else for (const child of childrenOf(node2, doc2.nodes)) {
-          const built = build3(child, node2, kids3D, kidFold);
-          if (built) web.children.push(built);
-        }
-      }
-    } finally {
-      motion = outer;
-    }
-    if (web.children.some((c2) => c2.positioning === "absolute")) {
-      for (const c2 of web.children) if (c2.positioning === "flow") c2.layered = true;
-    }
-    hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-    return web;
-  };
-  const root2 = build3(first2, start2?.parent ?? null, start2?.in3D ?? false, start2?.fold ?? 0);
-  if (!root2) throw new Error("Node cap of 0");
-  return { root: root2, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
-}
-function childLookup(doc2, id3) {
-  const at3 = id3.lastIndexOf("::");
-  const host = at3 > 0 ? id3.slice(0, at3) : "";
-  const hostNode = doc2.nodes[host] ?? (host.includes("::") ? childLookup(doc2, host) : void 0);
-  return hostNode ? childrenOf(hostNode, doc2.nodes).find((c2) => c2.id === id3) : void 0;
-}
-function flatten2(node2, out = []) {
-  out.push(node2);
-  for (const c2 of node2.children) flatten2(c2, out);
-  return out;
-}
-var DEFAULT_NODE_CAP, PAINTED, anchorMemo, followsVisibility, isFlex, round3, foldVar, foldRules, clickable;
-var init_tree = __esm({
-  "lib/io/web/tree.ts"() {
-    "use strict";
-    init_pixel_art();
-    init_instance_layout();
-    init_text_styles();
-    init_variables();
-    init_scene3d();
-    init_semantics();
-    init_commerce();
-    init_collections();
-    init_props();
-    init_native_registry();
-    init_controls();
-    init_expressions2();
-    init_children();
-    init_css();
-    init_capability();
-    init_expressible();
-    init_motion();
-    init_element();
-    init_paint2();
-    init_responsive();
-    init_richtext();
-    init_tokens2();
-    init_timeline();
-    init_interactive();
-    DEFAULT_NODE_CAP = 120;
-    PAINTED = ["background", "border", "border-style", "border-color", "border-width", "outline", "border-radius", "box-shadow", "box-sizing", "filter", "backdrop-filter"];
-    anchorMemo = /* @__PURE__ */ new WeakMap();
-    followsVisibility = (n) => !!n.boundVariables?.visible || !!n.boundExpressions?.visible || // Hidden in the design and shown at a breakpoint: on the page, for the media query that shows it.
-    Object.values(n.responsive ?? {}).some((o) => o.visible === true) || // A game's win banner (LayerPhysics role 'win') and a player's run and jump poses: hidden in the design, shown by
-    // the platformer on winning or as the player moves.
-    n.physics?.role === "win" || n.physics?.role === "pose" || n.physics?.role === "reveal";
-    isFlex = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
-    round3 = (v) => Math.round(v * 1e3) / 1e3;
-    foldVar = (depth2) => `--pc-f${depth2}`;
-    foldRules = (depth2) => Array.from({ length: depth2 }, (_, i2) => `@property ${foldVar(i2 + 1)} { syntax: '<number>'; inherits: true; initial-value: 1; }`);
-    clickable = (n) => !!n.semantics?.link || (n.interactions ?? []).some((ix) => ix.trigger === "ON_CLICK" || ix.trigger === "ON_PRESS");
-  }
-});
-
-// lib/io/web/interactive.ts
-function subtreeIds(doc2, id3, out = /* @__PURE__ */ new Set()) {
-  if (out.has(id3)) return out;
-  const n = doc2.nodes[id3];
-  if (!n) return out;
-  out.add(id3);
-  if (n.type === "INSTANCE") subtreeIds(doc2, n.mainComponentId, out);
-  for (const c2 of n.childIds ?? []) subtreeIds(doc2, c2, out);
-  return out;
-}
-function flowScreens(doc2, startId) {
-  const start2 = doc2.nodes[startId];
-  if (!start2 || start2.type !== "FRAME" || doc2.nodes[start2.parentId ?? ""]?.type !== "PAGE") return [startId];
-  const out = [startId];
-  for (let i2 = 0; i2 < out.length; i2++) {
-    for (const id3 of subtreeIds(doc2, out[i2])) {
-      for (const ix of interactionsOf(doc2.nodes[id3])) {
-        const to = ix.action.navigationType === "NAVIGATE" ? ix.action.destinationId : null;
-        const dest = to ? doc2.nodes[to] : void 0;
-        if (!dest || out.includes(dest.id) || dest.type !== "FRAME" || doc2.nodes[dest.parentId ?? ""]?.type !== "PAGE") continue;
-        if (Math.round(dest.width) !== Math.round(start2.width) || Math.round(dest.height) !== Math.round(start2.height)) continue;
-        out.push(dest.id);
-      }
-    }
-  }
-  return out;
-}
-function variantStates(doc2, mainId) {
-  const out = [mainId];
-  for (let i2 = 0; i2 < out.length; i2++) {
-    for (const id3 of subtreeIds(doc2, out[i2])) {
-      for (const ix of interactionsOf(doc2.nodes[id3])) {
-        const to = ix.action.navigationType === "CHANGE_TO" ? ix.action.destinationId : null;
-        if (to && !out.includes(to) && doc2.nodes[to]?.type === "COMPONENT") out.push(to);
-      }
-    }
-  }
-  return out;
-}
-function buildState(ctx2, doc2, id3, machine, state, start2, variantOf2) {
-  const expand = /* @__PURE__ */ new Map();
-  const tree = buildPlainTree(doc2, id3, ctx2.opts, start2, { built: (web, _node, at3) => {
-    if (web.type === "INSTANCE") expand.set(web, at3);
-  } });
-  for (const r of tree.rules ?? []) ctx2.rules.add(r);
-  if (tree.truncated) ctx2.truncated = true;
-  const ids2 = /* @__PURE__ */ new Map();
-  const index2 = (w) => {
-    ids2.set(w.id, w);
-    w.children.forEach(index2);
-  };
-  index2(tree.root);
-  const visit2 = (w, owner, st, isRoot) => {
-    w.owner = owner;
-    w.looks = { [st]: lookOf(w, isRoot) };
-    if (w.motion) ctx2.keyframes.add(w.motion.keyframes);
-    const node2 = nodeOf(doc2, w.id);
-    note(ctx2, w, interactionsOf(doc2.nodes[realId(w.id)]), owner, st, ids2);
-    const at3 = expand.get(w);
-    const inst = node2?.type === "INSTANCE" ? node2 : void 0;
-    const states = inst && at3 && ctx2.depth < 4 ? variantStates(doc2, inst.mainComponentId) : [];
-    if (inst && at3 && states.length > 1 && w.id !== variantOf2) {
-      const m = { id: `m${ctx2.machines.length}`, initial: inst.mainComponentId, states: states.map((s) => ({ id: s, name: stateName(doc2, s) })) };
-      ctx2.machines.push(m);
-      w.machine = m;
-      const perState = [];
-      for (const s of states) {
-        let kids;
-        if (s === inst.mainComponentId) {
-          kids = w.children;
-          kids.forEach((c2) => visit2(c2, m.id, s, false));
-        } else {
-          const shown2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: s } } };
-          ctx2.depth++;
-          try {
-            kids = buildState(ctx2, shown2, inst.id, m.id, s, at3, inst.id).children;
-          } finally {
-            ctx2.depth--;
-          }
-        }
-        note(ctx2, w, interactionsOf(doc2.nodes[s]), m.id, s, ids2, m.id);
-        perState.push([s, kids]);
-      }
-      w.children = mergeChildren(perState, m.id, m.states.map((s) => s.id), ctx2);
-    } else if (w.id === variantOf2) {
-      w.children.forEach((c2) => visit2(c2, owner, st, false));
-    } else {
-      if (inst) note(ctx2, w, interactionsOf(doc2.nodes[inst.mainComponentId]), owner, st, ids2);
-      w.children.forEach((c2) => visit2(c2, owner, st, false));
-    }
-  };
-  visit2(tree.root, machine, state, !start2);
-  return tree.root;
-}
-function note(ctx2, w, list2, machine, state, ids2, hostMachine) {
-  if (!list2.length) return;
-  const at3 = ctx2.pending.get(w) ?? [];
-  for (const ix of list2) at3.push({ machine, state, ix, hostMachine: hostMachine ?? (machine !== FLOW ? machine : void 0), ids: ids2 });
-  ctx2.pending.set(w, at3);
-}
-function lookOf(w, isRoot) {
-  return {
-    style: { ...placementStyle(w, isRoot), ...w.style, ...w.motion?.style ?? {} },
-    ...w.text ? { text: w.text.characters } : {},
-    ...w.tf ? { tf: w.tf } : {}
-  };
-}
-function keyed(kids) {
-  const seen = /* @__PURE__ */ new Map();
-  return kids.map((k2) => {
-    const base = `${k2.name}\0${k2.type}`;
-    const i2 = seen.get(base) ?? 0;
-    seen.set(base, i2 + 1);
-    return [`${base}\0${i2}`, k2];
-  });
-}
-function mergeChildren(perState, machine, states, ctx2) {
-  const order2 = [];
-  const groups = /* @__PURE__ */ new Map();
-  for (const [state, kids] of perState) {
-    let after = -1;
-    for (const [k2, node2] of keyed(kids)) {
-      let at3 = order2.indexOf(k2);
-      if (at3 < 0) {
-        order2.splice(after + 1, 0, k2);
-        at3 = after + 1;
-      }
-      after = at3;
-      (groups.get(k2) ?? groups.set(k2, []).get(k2)).push([state, node2]);
-    }
-  }
-  return order2.map((k2) => mergeNode(groups.get(k2), machine, states, ctx2));
-}
-function mergeNode(items, machine, states, ctx2) {
-  const [, first2] = items[0];
-  if (first2.owner !== machine) {
-    for (const [, w] of items.slice(1)) alias(ctx2, w, first2);
-    return first2;
-  }
-  const looks = {};
-  for (const s of states) looks[s] = null;
-  for (const [s, w] of items) looks[s] = w.looks?.[s] ?? null;
-  const merged = { ...first2, looks };
-  const pend = items.flatMap(([, w]) => ctx2.pending.get(w) ?? []);
-  if (pend.length) ctx2.pending.set(merged, pend);
-  for (const [, w] of items) if (w !== merged) alias(ctx2, w, merged);
-  if (first2.machine) {
-    for (const [, w] of items) if (w.machine && w.machine !== first2.machine) ctx2.renamed.set(w.machine.id, first2.machine.id);
-  }
-  merged.children = first2.machine ? first2.children : mergeChildren(items.map(([s, w]) => [s, w.children]), machine, states, ctx2);
-  return merged;
-}
-function alias(ctx2, from2, to) {
-  const a = ctx2.alias ??= /* @__PURE__ */ new Map();
-  a.set(from2, to);
-}
-function mergedOf(ctx2, w) {
-  const a = ctx2.alias;
-  let cur = w;
-  for (let i2 = 0; i2 < 16 && a?.has(cur); i2++) cur = a.get(cur);
-  return cur;
-}
-function actionOf(ctx2, p2) {
-  const a = p2.ix.action;
-  const glide2 = glideOf2(a.transition);
-  const hold = p2.ix.trigger === "ON_HOVER" || p2.ix.trigger === "ON_PRESS";
-  switch (a.navigationType) {
-    case "NAVIGATE":
-      return a.destinationId && ctx2.screens.has(a.destinationId) ? { kind: "go", machine: FLOW, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
-    case "BACK":
-      return ctx2.screens.size > 1 ? { kind: "back", machine: FLOW } : null;
-    case "CHANGE_TO":
-      return p2.hostMachine && a.destinationId ? { kind: "go", machine: p2.hostMachine, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
-    case "ORBIT_3D": {
-      const o = a.orbit ?? {};
-      const uidOf = (id3) => {
-        const w = id3 ? p2.ids.get(id3) : void 0;
-        return w ? mergedOf(ctx2, w).uid : void 0;
-      };
-      const uid2 = uidOf(a.destinationId);
-      const tiltUid = uidOf(o.tiltLayerId) ?? uid2;
-      return uid2 === void 0 || tiltUid === void 0 ? null : { kind: "orbit", target: uid2, tiltTarget: tiltUid, degreesPerPx: o.degreesPerPx ?? 0.4, tilt: !!o.tilt, tiltRange: o.tiltRange ?? [-30, 30] };
-    }
-    default:
-      return null;
-  }
-}
-function buildWebTree(doc2, nodeId2, opts = {}) {
-  const tree = buildTree(doc2, nodeId2, opts);
-  const machine = opts.static || opts.stateMachine === false ? null : webStateMachine(doc2, nodeId2);
-  return machine ? { ...tree, stateMachine: machine } : tree;
-}
-function buildTree(doc2, nodeId2, opts = {}) {
-  if (opts.static || opts.target === "site") return buildPlainTree(doc2, nodeId2, opts);
-  const screens = flowScreens(doc2, nodeId2);
-  const anything = screens.length > 1 || [...subtreeIds(doc2, nodeId2)].some((id3) => interactionsOf(doc2.nodes[id3]).some((ix) => ix.action.navigationType === "CHANGE_TO" || ix.action.navigationType === "ORBIT_3D"));
-  if (!anything) return buildPlainTree(doc2, nodeId2, opts);
-  const flow = { id: FLOW, initial: nodeId2, states: screens.map((s) => ({ id: s, name: doc2.nodes[s]?.name ?? s })) };
-  const ctx2 = { doc: doc2, opts, screens: new Set(screens), machines: [flow], keyframes: /* @__PURE__ */ new Set(), rules: /* @__PURE__ */ new Set(), pending: /* @__PURE__ */ new Map(), depth: 0, renamed: /* @__PURE__ */ new Map() };
-  const roots = screens.map((s) => [s, buildState(ctx2, doc2, s, FLOW, s)]);
-  const truncated = !!ctx2.truncated;
-  const root2 = mergeNode(roots, FLOW, screens, ctx2);
-  let uid2 = 0;
-  const number4 = (w) => {
-    w.uid = uid2++;
-    w.children.forEach(number4);
-  };
-  number4(root2);
-  const place4 = (w) => {
-    const pend = ctx2.pending.get(w);
-    if (pend) {
-      const seen = /* @__PURE__ */ new Set();
-      const on = [];
-      for (const raw of pend) {
-        const p2 = { ...raw, machine: ctx2.renamed.get(raw.machine) ?? raw.machine, ...raw.hostMachine ? { hostMachine: ctx2.renamed.get(raw.hostMachine) ?? raw.hostMachine } : {} };
-        const trigger = TRIGGERS[p2.ix.trigger];
-        const action3 = trigger ? actionOf(ctx2, p2) : null;
-        if (!trigger || !action3) continue;
-        const ix = { machine: p2.machine, state: p2.state, trigger, ...p2.ix.triggerDelay ? { delay: p2.ix.triggerDelay } : {}, ...p2.ix.triggerKey ? { key: p2.ix.triggerKey } : {}, action: action3 };
-        const sig = JSON.stringify(ix);
-        if (!seen.has(sig)) {
-          seen.add(sig);
-          on.push(ix);
-        }
-      }
-      if (on.length) w.on = on;
-    }
-    w.children.forEach(place4);
-  };
-  place4(root2);
-  return { root: root2, truncated, ...ctx2.rules.size ? { rules: [...ctx2.rules].sort() } : {}, interactive: { machines: ctx2.machines.filter((m) => !ctx2.renamed.has(m.id)), keyframes: [...ctx2.keyframes] } };
-}
-var FLOW, interactionsOf, realId, nodeOf, stateName, TRIGGERS, EASINGS2, glideOf2;
-var init_interactive = __esm({
-  "lib/io/web/interactive.ts"() {
-    "use strict";
-    init_scene_graph();
-    init_tree();
-    init_state_machine3();
-    init_element();
-    FLOW = "flow";
-    interactionsOf = (n) => n?.interactions ?? [];
-    realId = (id3) => id3.includes("::") ? id3.slice(id3.lastIndexOf("::") + 2) : id3;
-    nodeOf = (doc2, id3) => doc2.nodes[id3] ?? (id3.includes("::") ? resolveVirtualNode2(doc2.nodes, id3) ?? void 0 : void 0);
-    stateName = (doc2, id3) => {
-      const n = doc2.nodes[id3];
-      const v = n?.variantProperties;
-      return v ? Object.values(v).join(", ") : n?.name ?? id3;
-    };
-    TRIGGERS = {
-      ON_CLICK: "click",
-      ON_HOVER: "hover",
-      ON_PRESS: "press",
-      ON_DRAG: "drag",
-      MOUSE_ENTER: "enter",
-      MOUSE_LEAVE: "leave",
-      AFTER_TIMEOUT: "timeout",
-      KEY_DOWN: "key"
-    };
-    EASINGS2 = { EASE_IN: "ease-in", EASE_OUT: "ease-out", EASE_IN_OUT: "ease-in-out", LINEAR: "linear", SPRING: "cubic-bezier(0.34, 1.56, 0.64, 1)" };
-    glideOf2 = (t3) => !t3 || t3.type === "INSTANT" || t3.type === "CUT" ? { ms: 0, easing: "linear" } : { ms: Math.max(0, Math.round(t3.duration)), easing: EASINGS2[t3.easing] ?? "ease-in-out" };
-  }
-});
-
 // lib/io/web/site.ts
 function light(node2) {
   const out = {};
@@ -321474,7 +321383,7 @@ var init_site = __esm({
     init_fonts3();
     init_slice();
     init_render();
-    init_state_machine3();
+    init_state_machine2();
     init_physics();
     init_interactive();
     init_tree();
@@ -345136,6 +345045,7 @@ function exportsOf(source3) {
 var CODE_LIMITS, packageOf;
 var init_source2 = __esm({
   "lib/code/source.ts"() {
+    "use strict";
     CODE_LIMITS = { modules: 100, sourceLength: 2e5, packages: 12 };
     packageOf = (spec) => spec.split("/").slice(0, spec.startsWith("@") ? 2 : 1).join("/");
   }
@@ -345178,6 +345088,7 @@ function compileModule(module2) {
 var import_sucrase, BUILT_IN, memo4;
 var init_compile2 = __esm({
   "lib/code/compile.ts"() {
+    "use strict";
     import_sucrase = __toESM(require_dist2());
     init_source2();
     init_source2();
@@ -345760,6 +345671,7 @@ __export(web_exports, {
   CODE_FORMAT_IDS: () => CODE_FORMAT_IDS,
   DEFAULT_NODE_CAP: () => DEFAULT_NODE_CAP,
   EMAIL_DEFAULT_WIDTH: () => EMAIL_DEFAULT_WIDTH,
+  EXPORT_NODE_CAP: () => EXPORT_NODE_CAP,
   WEB_LANGUAGES: () => WEB_LANGUAGES,
   assetKindFor: () => assetKindFor,
   buildWebSite: () => buildWebSite,
@@ -347108,24 +347020,6 @@ var init_board_export = __esm({
 });
 
 // lib/commands/export.ts
-var export_exports2 = {};
-__export(export_exports2, {
-  EXPORT_NODE_CAP: () => EXPORT_NODE_CAP,
-  exportBoard: () => exportBoard,
-  exportCopy: () => exportCopy,
-  exportGif: () => exportGif,
-  exportLottie: () => exportLottie2,
-  exportMp4: () => exportMp4,
-  exportNodes: () => exportNodes,
-  exportPages: () => exportPages,
-  exportPdf: () => exportPdf,
-  exportPngSequence: () => exportPngSequence,
-  exportPptx: () => exportPptx,
-  exportStorefront: () => exportStorefront,
-  exportSvg: () => exportSvg,
-  exportWeb: () => exportWeb,
-  exportWebm: () => exportWebm
-});
 function animationTarget(args2, ctx2, doc2) {
   if (args2.composition) {
     if (!doc2.compositions?.[args2.composition]) throw new ToolError(`There is no composition "${args2.composition}".`);
@@ -347233,7 +347127,7 @@ async function exportSite(doc2, pageId2, packaging, styling = "css") {
   downloadBlob2(zipFiles2(files.map((f2) => ({ name: f2.path, bytes: bytesOf2(f2) }))), `${base}.zip`);
   return { summary: `Exported ${plural2(site.pages.length, "page")} as ${packaging === "next" ? "a Next.js project" : "a static site"} (${base}.zip)`, data: { filename: `${base}.zip`, packaging, pages: site.pages.map((p2) => p2.route), files: files.length } };
 }
-var MAX_INLINE_BYTES, exportSvg, exportNodes, exportPdf, exportCopy, exportPages, exportPptx, animationParams, videoParams, gifParams, lottieParams, animationCommand, TARGET, exportMp4, exportWebm, exportGif, exportPngSequence, exportLottie2, EXPORT_NODE_CAP, exportWeb, exportStorefront, exportBoard;
+var MAX_INLINE_BYTES, exportSvg, exportNodes, exportPdf, exportCopy, exportPages, exportPptx, animationParams, videoParams, gifParams, lottieParams, animationCommand, TARGET, exportMp4, exportWebm, exportGif, exportPngSequence, exportLottie2, exportWeb, APP_STOREFRONT_TARGETS, exportStorefront, exportBoard;
 var init_export2 = __esm({
   "lib/commands/export.ts"() {
     "use strict";
@@ -347246,6 +347140,7 @@ var init_export2 = __esm({
     init_markers();
     init_doc_helpers();
     init_formats();
+    init_tree();
     MAX_INLINE_BYTES = 15e5;
     exportSvg = defineCommand({
       id: "export.svg",
@@ -347594,7 +347489,6 @@ var init_export2 = __esm({
       name: "export_lottie",
       description: `Write ${TARGET.replace(" and \u2014 for video \u2014 its sound", "")} as a Lottie (bodymovin JSON, or a .lottie zip) the user downloads: vector shapes, fills, strokes, masks, text as outlines and images as embedded assets, with our keys and bezier / hold easing where Lottie can say them and every other curve, behaviour and text animator keyed frame by frame. Refuses what Lottie cannot carry (shader fills, blurs, glass, halftone, 3D, video) and lists what it baked. The timeline's markers go in as Lottie markers; a .lottie also carries the frame's state machine. Options: frame rate, range, container, stateMachine.`
     });
-    EXPORT_NODE_CAP = 2e4;
     exportWeb = defineCommand({
       id: "export.web",
       title: "Export as web code",
@@ -347639,6 +347533,7 @@ var init_export2 = __esm({
         return { summary: `Exported ${node2.name || "layer"} as ${filename}`, data: { filename, format, bytes: markup.length, truncated: tree.truncated } };
       }
     });
+    APP_STOREFRONT_TARGETS = STOREFRONT_TARGET_IDS.filter((t3) => t3 !== "shopify-theme");
     exportStorefront = defineCommand({
       id: "export.storefront",
       title: "Export storefront",
@@ -347647,21 +347542,20 @@ var init_export2 = __esm({
       permission: "export",
       needs: ["canvas"],
       params: external_exports.object({
-        target: external_exports.enum(STOREFRONT_TARGET_IDS).default("next-commerce").describe("next-commerce-store: a whole Next.js Commerce store drawn by the design, to deploy with a Shopify store's domain and Storefront token (publish_store deploys it for you). next-commerce: React components a Next.js Commerce store renders with its own data and server actions. shopify-theme: an Online Store 2.0 theme (Liquid) to upload in the store's admin, running on Shopify with its own cart and checkout."),
+        target: external_exports.enum(APP_STOREFRONT_TARGETS).default("next-commerce").describe("next-commerce-store: a whole Next.js Commerce store drawn by the design, to deploy with a Shopify store's domain and Storefront token (publish_store deploys it for you). next-commerce: React components a Next.js Commerce store renders with its own data and server actions. A Shopify theme is the Ecommerce plugin's."),
         styling: external_exports.enum(["inline", "tailwind"]).optional().describe("next-commerce: style objects (default) or Tailwind CSS v4 classes."),
         dir: external_exports.string().max(200).optional().describe("next-commerce: where the components go in the store's project (default components/popcraft).")
       }).strict(),
       expose: {
         ui: {
           label: "Export storefront\u2026",
-          keywords: ["commerce", "shopify", "theme", "liquid", "store", "shop", "next", "react", "components", "export"],
+          keywords: ["commerce", "shopify", "store", "shop", "next", "react", "components", "export"],
           variants: [
             { id: "next-commerce-store", label: "Export storefront as a Next.js Commerce store", params: { target: "next-commerce-store" } },
-            { id: "next-commerce", label: "Export storefront as Next.js Commerce components", params: { target: "next-commerce" } },
-            { id: "shopify-theme", label: "Export storefront as a Shopify theme", params: { target: "shopify-theme" } }
+            { id: "next-commerce", label: "Export storefront as Next.js Commerce components", params: { target: "next-commerce" } }
           ]
         },
-        agent: { name: "export_storefront", readOnly: false, description: "Download a storefront design (a page whose lists and pages read collections with a commerce schema) as a store's project, in a zip. target next-commerce-store: the whole Next.js Commerce app (Shopify client, cart, checkout, a page per screen), ready to deploy. target next-commerce: a React component per screen, each list a typed prop of Next.js Commerce's own types, each storefront form (addToCart, updateCartLine, removeCartLine, checkout, search) an action prop for a server action. target shopify-theme: an Online Store 2.0 theme, each screen a section and template (home: index, a page about a product: product, about a category: collection, search, cart), each list a Liquid loop over the store's products, cart or menu, each form posting to Shopify's cart; uploaded in Online Store \u203A Themes. With no store data a Next.js Commerce component draws the design's samples." }
+        agent: { name: "export_storefront", readOnly: false, description: "Download a storefront design (a page whose lists and pages read collections with a commerce schema) as a store's project, in a zip. target next-commerce-store: the whole Next.js Commerce app (Shopify client, cart, checkout, a page per screen), ready to deploy. target next-commerce: a React component per screen, each list a typed prop of Next.js Commerce's own types, each storefront form (addToCart, updateCartLine, removeCartLine, checkout, search) an action prop for a server action. With no store data a Next.js Commerce component draws the design's samples." }
       },
       run: async (args2, ctx2) => {
         const doc2 = ctx2.doc();
@@ -353593,7 +353487,6 @@ __export(integrations_exports, {
   attachDatabase: () => attachDatabase,
   connectWithOAuth: () => connectWithOAuth,
   connectWithToken: () => connectWithToken,
-  connectedStore: () => connectedStore,
   createDatabase: () => createDatabase,
   createDestination: () => createDestination,
   createResource: () => createResource,
@@ -353609,8 +353502,7 @@ __export(integrations_exports, {
   listWorkspaceIntegrations: () => listWorkspaceIntegrations,
   removeDestination: () => removeDestination,
   setSignIn: () => setSignIn,
-  siteBackend: () => siteBackend,
-  storeProducts: () => storeProducts
+  siteBackend: () => siteBackend
 });
 function connectWithOAuth(workspaceId, provider2) {
   const popup = window.open("", "popcraft-integration", "popup,width=640,height=760");
@@ -353647,7 +353539,7 @@ async function sha12(bytes2) {
   const digest = await crypto.subtle.digest("SHA-1", bytes2);
   return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join("");
 }
-async function deployStore(key5, id3, files, shopifyConnectionId, onProgress) {
+async function deployStore(key5, id3, files, env, onProgress) {
   const listed = await Promise.all(files.map(async (f2) => ({ path: f2.path, sha: await sha12(f2.bytes), size: f2.bytes.length, bytes: f2.bytes })));
   const queue2 = [...new Map(listed.map((f2) => [f2.sha, f2])).values()];
   const total2 = queue2.length;
@@ -353658,18 +353550,9 @@ async function deployStore(key5, id3, files, shopifyConnectionId, onProgress) {
       onProgress?.(++done, total2);
     }
   }));
-  return (await api(`/api/sites/${key5}/destinations/${id3}/store`, { method: "POST", json: { shopifyConnectionId, files: listed.map(({ path, sha, size: size6 }) => ({ path, sha, size: size6 })) } })).deploy;
-}
-async function connectedStore(connectionId) {
-  if (connectionId) return connectionId;
-  const workspaceId = integrationsWorkspaceId();
-  if (!workspaceId) throw new Error("Your workspaces have not loaded yet. Try again in a moment.");
-  const stores2 = (await listWorkspaceIntegrations(workspaceId)).integrations.filter((i2) => i2.manifest.capabilities.includes("commerce")).flatMap((i2) => i2.connections);
-  if (!stores2.length) throw new Error("No store is connected. Connect Shopify in Integrations first.");
-  if (stores2.length > 1) throw new Error(`Name the store: ${stores2.map((c2) => `${c2.account} (${c2.id})`).join(", ")}.`);
-  return stores2[0].id;
-}
-var integrationsWorkspaceId, listWorkspaceIntegrations, connectWithToken, disconnect, listResources, createResource, listDestinations, addDestination, removeDestination, deployDestination, siteBackend, attachDatabase, setSignIn, detachDatabase, listSubmissions, listCandidates, createDatabase, createDestination, storeProducts;
+  return (await api(`/api/sites/${key5}/destinations/${id3}/store`, { method: "POST", json: { env, files: listed.map(({ path, sha, size: size6 }) => ({ path, sha, size: size6 })) } })).deploy;
+}
+var integrationsWorkspaceId, listWorkspaceIntegrations, connectWithToken, disconnect, listResources, createResource, listDestinations, addDestination, removeDestination, deployDestination, siteBackend, attachDatabase, setSignIn, detachDatabase, listSubmissions, listCandidates, createDatabase, createDestination;
 var init_integrations = __esm({
   "lib/client/cloud/integrations.ts"() {
     init_api4();
@@ -353692,7 +353575,48 @@ var init_integrations = __esm({
     listCandidates = async (workspaceId, capability2) => (await api(`/api/workspaces/${encodeURIComponent(workspaceId)}/integrations/candidates?capability=${capability2}`)).candidates;
     createDatabase = (key5, provider2, connectionId) => api(`/api/sites/${key5}/backend`, { method: "PUT", json: { create: true, ...provider2 ? { provider: provider2 } : {}, ...connectionId ? { connectionId } : {} } });
     createDestination = async (key5, capability2, provider2, connectionId) => (await api(`/api/sites/${key5}/destinations`, { method: "POST", json: { create: true, capability: capability2, ...provider2 ? { provider: provider2 } : {}, ...connectionId ? { connectionId } : {} } })).destination;
-    storeProducts = async (connectionId, first2) => (await api(`/api/integrations/connections/${encodeURIComponent(connectionId)}/products?first=${first2}`)).products;
+  }
+});
+
+// lib/client/cloud/publish-store.ts
+var publish_store_exports = {};
+__export(publish_store_exports, {
+  deployOpenStore: () => deployOpenStore,
+  isStorefront: () => isStorefront
+});
+async function deployOpenStore(doc2, pageId2, o = {}) {
+  const [{ openFileKey: openFileKey2 }, { uploadActiveDocument: uploadActiveDocument2 }, cloud, { storefrontInputs: storefrontInputs2 }, { nextCommerceFiles: nextCommerceFiles2 }, { bytesOf: bytesOf2 }] = await Promise.all([
+    Promise.resolve().then(() => (init_publish_site(), publish_site_exports)),
+    Promise.resolve().then(() => (init_sync2(), sync_exports2)),
+    Promise.resolve().then(() => (init_integrations(), integrations_exports)),
+    Promise.resolve().then(() => (init_storefront_prepare(), storefront_prepare_exports)),
+    Promise.resolve().then(() => (init_next_commerce(), next_commerce_exports)),
+    Promise.resolve().then(() => (init_project(), project_exports))
+  ]);
+  if (!isStorefront(doc2)) throw new Error("This file is not a storefront: set a collection to Store products in Collections, or start from a Storefronts template.");
+  const env = doc2.site?.env ?? {};
+  if (!env.SHOPIFY_STORE_DOMAIN || !env.SHOPIFY_STOREFRONT_ACCESS_TOKEN) throw new Error("This store does not say which Shopify store it sells from: connect one in the Ecommerce plugin (it sets SHOPIFY_STORE_DOMAIN and SHOPIFY_STOREFRONT_ACCESS_TOKEN in the site environment).");
+  o.onStep?.("Building the store\u2026");
+  const { screens, media: media2 } = await storefrontInputs2(doc2, pageId2, EXPORT_NODE_CAP);
+  if (!screens.length) throw new Error("This page has no screens: a top-level frame is a page of the store.");
+  const key5 = openFileKey2() ?? await uploadActiveDocument2();
+  const all4 = await cloud.listDestinations(key5);
+  let dest = o.destinationId ? all4.find((d) => d.id === o.destinationId) : all4.find((d) => d.capability === "deploy");
+  if (o.destinationId && !dest) throw new Error(`This file has no destination ${o.destinationId}.`);
+  if (!dest) {
+    o.onStep?.("Making a Vercel project\u2026");
+    dest = await cloud.createDestination(key5, "deploy", "vercel");
+  }
+  const files = nextCommerceFiles2(doc2, screens, { media: media2 }).map((f2) => ({ path: f2.path, bytes: bytesOf2(f2) }));
+  const project = dest.target.map((t3) => t3.name).join(" / ");
+  const done = await cloud.deployStore(key5, dest.id, files, env, (n, total2) => o.onStep?.(`Sending files ${n} of ${total2}\u2026`));
+  return { ...done, destinationId: dest.id, project, files: files.length, pages: screens.map((s) => s.name) };
+}
+var isStorefront;
+var init_publish_store = __esm({
+  "lib/client/cloud/publish-store.ts"() {
+    init_tree();
+    isStorefront = (doc2) => Object.values(doc2.collections ?? {}).some((c2) => c2.schema === "commerce.product");
   }
 });
 
@@ -353821,55 +353745,28 @@ var init_publish = __esm({
       permission: null,
       needs: ["canvas"],
       params: external_exports.object({
-        shopifyConnectionId: external_exports.string().optional().describe("The Shopify store it sells from, from list_integrations (capability commerce). Omit when one store is connected."),
         destinationId: external_exports.string().optional().describe("The Vercel project to deploy to (a deploy destination, from get_site_status). Omit: the file's deploy destination, or a new project named after the file.")
       }),
       confirm: {
         level: "confirm",
         summary: () => "Deploy this page as a store selling your Shopify products",
-        detail: () => "The page becomes a Next.js Commerce store on Vercel, its products, cart and checkout your Shopify store's. A Vercel project is made for it when the file has none, and your store's address and Storefront token are set as that project's environment. Visitors can buy from it once it is live."
+        detail: () => "The page becomes a Next.js Commerce store on Vercel, its products, cart and checkout your Shopify store's. A Vercel project is made for it when the file has none, and the site environment (your store's address and public Storefront token) is set as that project's. Visitors can buy from it once it is live."
       },
       expose: {
         ui: { label: "Publish as a store\u2026", keywords: ["store", "shop", "shopify", "commerce", "next", "vercel", "deploy", "sell", "ecommerce", "checkout", "cart"] },
         agent: {
           name: "publish_store",
-          description: "Deploy a storefront design (its lists and pages bound to collections with a commerce schema) as a working store: a Next.js Commerce app on Vercel selling the connected Shopify store's products, with its cart and checkout. Needs a Shopify connection (capability commerce) and a Vercel connection; uses the file's Vercel deploy destination or makes one. Returns the deployment URL (it builds for a minute or two). The user approves every call."
+          description: "Deploy a storefront design (its lists and pages bound to collections with a commerce schema) as a working store: a Next.js Commerce app on Vercel selling the connected Shopify store's products, with its cart and checkout. Needs the site environment to name the Shopify store (SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_ACCESS_TOKEN: get_site_environment; the Ecommerce plugin sets them) and a Vercel connection; uses the file's Vercel deploy destination or makes one. Returns the deployment URL (it builds for a minute or two). The user approves every call."
         }
       },
       run: async (p2, ctx2) => {
         await signedIn();
-        const [{ openFileKey: openFileKey2 }, { uploadActiveDocument: uploadActiveDocument2 }, cloud, { storefrontInputs: storefrontInputs2 }, { nextCommerceFiles: nextCommerceFiles2 }, { bytesOf: bytesOf2 }, { EXPORT_NODE_CAP: EXPORT_NODE_CAP2 }] = await Promise.all([
-          Promise.resolve().then(() => (init_publish_site(), publish_site_exports)),
-          Promise.resolve().then(() => (init_sync2(), sync_exports2)),
-          Promise.resolve().then(() => (init_integrations(), integrations_exports)),
-          Promise.resolve().then(() => (init_storefront_prepare(), storefront_prepare_exports)),
-          Promise.resolve().then(() => (init_next_commerce(), next_commerce_exports)),
-          Promise.resolve().then(() => (init_project(), project_exports)),
-          Promise.resolve().then(() => (init_export2(), export_exports2))
-        ]);
-        const doc2 = ctx2.doc();
-        if (!Object.values(doc2.collections ?? {}).some((c2) => c2.schema === "commerce.product")) throw new CommandError("This file is not a storefront: set a collection to Store products in Collections, or start from a Storefronts template.", "failed");
-        const shop = await cloud.connectedStore(p2.shopifyConnectionId).catch((e) => {
+        const { deployOpenStore: deployOpenStore2 } = await Promise.resolve().then(() => (init_publish_store(), publish_store_exports));
+        const done = await deployOpenStore2(ctx2.doc(), ctx2.pageId(), { destinationId: p2.destinationId }).catch((e) => {
           throw new CommandError(e instanceof Error ? e.message : String(e), "failed");
         });
-        const { screens, media: media2 } = await storefrontInputs2(doc2, ctx2.pageId(), EXPORT_NODE_CAP2);
-        if (!screens.length) throw new CommandError("This page has no screens: a top-level frame is a page of the store.", "failed");
-        const key5 = openFileKey2() ?? await uploadActiveDocument2();
-        const all4 = await cloud.listDestinations(key5);
-        const deploys = all4.filter((d) => d.capability === "deploy");
-        let dest = p2.destinationId ? all4.find((d) => d.id === p2.destinationId) : deploys[0];
-        if (p2.destinationId && !dest) throw new CommandError(`This file has no destination ${p2.destinationId}.`, "invalid_params");
-        if (!dest) {
-          ctx2.notice("Making a Vercel project for the store\u2026");
-          dest = await cloud.createDestination(key5, "deploy", "vercel");
-        }
-        const files = nextCommerceFiles2(doc2, screens, { media: media2 }).map((f2) => ({ path: f2.path, bytes: bytesOf2(f2) }));
-        const where = dest.target.map((t3) => t3.name).join(" / ");
-        const done = await cloud.deployStore(key5, dest.id, files, shop, (n, total2) => {
-          if (n === total2) ctx2.notice(`Sent ${total2} files to ${where}: building the store`);
-        });
         ctx2.notice(done.status === "failed" ? `The store did not deploy: ${done.error ?? "Vercel refused it"}` : `Store deploying: ${done.url}`);
-        return { summary: `Store ${done.status === "ready" ? "is live" : done.status === "building" ? "is building" : "failed"} at ${done.url} (${where}, ${screens.length} ${screens.length === 1 ? "page" : "pages"}, ${files.length} files)`, data: { url: done.url, status: done.status, destinationId: dest.id, project: where, files: files.length, pages: screens.map((s) => s.name) } };
+        return { summary: `Store ${done.status === "ready" ? "is live" : done.status === "building" ? "is building" : "failed"} at ${done.url} (${done.project}, ${done.pages.length} ${done.pages.length === 1 ? "page" : "pages"}, ${done.files} files)`, data: { url: done.url, status: done.status, destinationId: done.destinationId, project: done.project, files: done.files, pages: done.pages } };
       }
     });
     publishCommands = [publishSite2, publishSetVersion, publishStore];
@@ -356276,7 +356173,7 @@ var init_storefront2 = __esm({
       name: "Design a storefront",
       description: "Bind a shop to a store's data and publish or export it for Next.js Commerce or Shopify.",
       whenToUse: "the design should sell",
-      tools: ["get_document_outline", "edit_collection", "edit_records", "set_repeat", "set_route", "set_control", "export_storefront", "list_integrations", "open_integrations", "pull_store_products", "ask_user", "manage_todos"],
+      tools: ["get_document_outline", "edit_collection", "edit_records", "set_repeat", "set_route", "set_control", "export_storefront", "list_integrations", "open_integrations", "get_site_environment", "ask_user", "manage_todos"],
       instructions: `# Design a storefront
 
 PopCraft draws the shop; a Next.js Commerce store runs it. The store keeps Shopify, the cart, checkout and search;
@@ -356292,9 +356189,8 @@ are whole stores to begin from.
    - \`commerce.product\` for products (title, handle, url, description, price, image, variant_id\u2026)
    - \`commerce.cartLine\` for the cart's lines, \`commerce.cart\` for its count and totals (one record)
    - \`commerce.menu\` for the store's menu, \`commerce.collection\` for its categories
-   Add a few real sample records with \`edit_records\`: the canvas is drawn with them. When the user has a Shopify
-   store, draw the design with its real products instead: \`list_integrations\` (capability commerce) for a connected
-   store, then \`pull_store_products\`. You cannot connect a store yourself: say why it helps and \`open_integrations\`.
+   Add a few real sample records with \`edit_records\`: the canvas is drawn with them. A store's real catalogue
+   comes from the Ecommerce plugin (Marketplace \u203A Plugins): it fills these collections from Shopify.
 3. **The lists.** \`set_repeat\` on the frame that holds one card, over the collection; the card's texts say
    \`{{item.title}}\`, \`{{item.price}}\`, and its picture follows \`item_image\`. The cart's totals are a list of one
    (\`limit: 1\`) over the \`commerce.cart\` collection.
@@ -356306,12 +356202,13 @@ are whole stores to begin from.
    - \`checkout\`
    - \`search\`: a field named \`q\`
 6. **Sell.** \`publish_store\` deploys it as a working store: a Next.js Commerce app on Vercel selling the connected
-   Shopify store's products, with its cart and checkout (needs Shopify and Vercel connected: \`list_integrations\`).
+   Shopify store's products, with its cart and checkout (needs the site environment to name the Shopify store,
+   \`get_site_environment\`, which the Ecommerce plugin sets, and Vercel connected: \`list_integrations\`).
    Or \`export_storefront\` writes the project for a store the user runs:
    - \`target: 'next-commerce-store'\`: the whole Next.js Commerce store, to deploy with Shopify's keys.
    - \`target: 'next-commerce'\`: components only, for a Next.js Commerce store that exists: a prop per list
      (\`products\`, \`cartLines\`, \`cart\`, \`menu\`), \`product\` on a product's page, \`onAddToCart\`, \`onCheckout\`\u2026 for the forms.
-   - \`target: 'shopify-theme'\`: an Online Store 2.0 theme the user uploads in Shopify (Online Store \u203A Themes).
+   A Shopify theme, the store's catalogue and its setup are the Ecommerce plugin's (Marketplace \u203A Plugins).
    Say which, and where it goes (/docs/exporting/commerce).
 
 ## Rules
@@ -358714,16 +358611,16 @@ var init_api5 = __esm({
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/generated/runtime.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/generated/runtime.js
 var MAIN_RUNTIME, UI_RUNTIME;
 var init_runtime4 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/generated/runtime.js"() {
-    MAIN_RUNTIME = '"use strict";\n(() => {\n  // src/runtime/rpc.ts\n  function createRpcClient() {\n    let port = null;\n    const queue = [];\n    const pending = {};\n    const listeners = {};\n    let nextId = 1;\n    function send(msg) {\n      if (port) port.postMessage(msg);\n      else queue.push(msg);\n    }\n    function call(method, params) {\n      return new Promise((resolve, reject) => {\n        const id = nextId++;\n        pending[id] = { resolve, reject };\n        send({ kind: "rpc", id, method, params });\n      });\n    }\n    function emit(event, data) {\n      for (const cb of (listeners[event] || []).slice()) {\n        try {\n          cb(data);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }\n    window.addEventListener("message", (e) => {\n      const data = e.data;\n      if (e.source !== window.parent || !data || data.type !== "popcraft-plugin-port" || port) return;\n      port = e.ports[0];\n      port.onmessage = (ev) => {\n        const m = ev.data || {};\n        if (m.kind === "result" && m.id !== void 0 && pending[m.id]) {\n          const p = pending[m.id];\n          delete pending[m.id];\n          if (m.error) p.reject(new Error(m.error));\n          else p.resolve(m.result);\n        } else if (m.kind === "event" && m.event) {\n          emit(m.event, m.data);\n        }\n      };\n      for (const msg of queue.splice(0)) port.postMessage(msg);\n    });\n    return {\n      call,\n      send,\n      on(event, cb) {\n        (listeners[event] = listeners[event] || []).push(cb);\n      },\n      off(event, cb) {\n        listeners[event] = (listeners[event] || []).filter((x) => x !== cb);\n      }\n    };\n  }\n\n  // src/runtime/main.ts\n  function clone(v) {\n    return v === void 0 ? {} : JSON.parse(JSON.stringify(v));\n  }\n  function createMainApi(rpc = createRpcClient()) {\n    const uiHandlers = [];\n    let uiOnMessage = null;\n    const uiQueue = [];\n    function deliverUI(msg) {\n      for (const cb of uiHandlers) {\n        try {\n          cb(msg);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n      if (typeof uiOnMessage === "function") {\n        try {\n          uiOnMessage(msg);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }\n    function flushUI() {\n      if (uiHandlers.length || typeof uiOnMessage === "function") uiQueue.splice(0).forEach(deliverUI);\n    }\n    rpc.on("uimessage", (msg) => {\n      if (!uiHandlers.length && typeof uiOnMessage !== "function") uiQueue.push(msg);\n      else deliverUI(msg);\n    });\n    let widgetDef = null;\n    const widgetQueue = [];\n    function renderWidget(state) {\n      const handlers = {};\n      function walk(el, path) {\n        if (!el || typeof el !== "object") return el;\n        const out = {};\n        for (const k of Object.keys(el)) {\n          const v = el[k];\n          if (k === "children") {\n            out.children = (Array.isArray(v) ? v : [v]).filter((c) => c !== null && c !== void 0 && c !== false).map((c, i) => walk(c, path + "." + i));\n          } else if (k === "onClick" && typeof v === "function") {\n            handlers[path] = v;\n            out.onClick = path;\n          } else {\n            out[k] = v;\n          }\n        }\n        return out;\n      }\n      return { tree: walk(widgetDef.render(state), "root"), handlers };\n    }\n    function initialWidgetState() {\n      const s = widgetDef && widgetDef.initialState;\n      return clone(typeof s === "function" ? s() : s);\n    }\n    function commitWidget(nodeId, state) {\n      return rpc.call("widgetUpdate", { id: nodeId, state, tree: renderWidget(clone(state)).tree });\n    }\n    function handleWidgetClick(e) {\n      Promise.resolve().then(() => {\n        const state = clone(e.state);\n        const rendered = renderWidget(state);\n        const h = rendered.handlers[e.handler] || widgetDef.handlers && widgetDef.handlers[e.handler];\n        if (typeof h !== "function") return;\n        return Promise.resolve(h(state, { nodeId: e.nodeId })).then((ret) => commitWidget(e.nodeId, ret === void 0 ? state : ret));\n      }).catch((err) => rpc.send({ kind: "error", message: String((err == null ? void 0 : err.message) || err) }));\n    }\n    rpc.on("widgetclick", (e) => {\n      if (widgetDef) handleWidgetClick(e);\n      else widgetQueue.push(e);\n    });\n    const popcraft = {\n      /** Which menu command the user picked, or null when the plugin ran some other way. */\n      command: null,\n      /** Host import mode when launched as an importer, else null. */\n      importMode: null,\n      /** Pending import file when the host handed one over, else null. */\n      importFile: null,\n      /** Pending export request when the host started this plugin as an exporter, else null. */\n      exportRequest: null,\n      getSelection: () => rpc.call("getSelection"),\n      setSelection: (ids) => rpc.call("setSelection", { ids }),\n      getNode: (id) => rpc.call("getNode", { id }),\n      findNodes: (query) => rpc.call("findNodes", query || {}),\n      getCurrentPage: () => rpc.call("getCurrentPage"),\n      createNode: (type, props) => rpc.call("createNode", { type, props: props || {} }),\n      updateNode: (id, props) => rpc.call("updateNode", { id, props }),\n      deleteNode: (id) => rpc.call("deleteNode", { id }),\n      setText: (id, characters) => rpc.call("setText", { id, characters }),\n      setTextPath: (opts) => rpc.call("setTextPath", opts || {}),\n      flowTextIntoShape: (opts) => rpc.call("flowTextIntoShape", opts || {}),\n      detachText: (opts) => rpc.call("detachText", opts || {}),\n      setTextFit: (opts) => rpc.call("setTextFit", opts || {}),\n      createPage: (name) => rpc.call("createPage", name != null ? { name: String(name) } : {}),\n      setCurrentPage: (pageId) => rpc.call("setCurrentPage", { pageId }),\n      createImage: (opts) => rpc.call("createImage", opts || {}),\n      createDocument: (opts) => rpc.call("createDocument", opts || {}),\n      getImportMode: () => rpc.call("getImportMode"),\n      getImportFile: () => rpc.call("getImportFile"),\n      getStorefront: () => rpc.call("getStorefront"),\n      getExportRequest: () => rpc.call("getExportRequest"),\n      saveExport: (file) => rpc.call("saveExport", file || {}),\n      getPresentationAudio: (opts) => rpc.call("getPresentationAudio", opts || {}),\n      setPresentationAudioSettings: (opts) => rpc.call("setPresentationAudioSettings", opts || {}),\n      setPresentationAudioClip: (opts) => rpc.call("setPresentationAudioClip", opts || {}),\n      removePresentationAudioClip: (opts) => rpc.call("removePresentationAudioClip", opts || {}),\n      setPresentationTiming: (opts) => rpc.call("setPresentationTiming", opts || {}),\n      getPresentationMix: (opts) => rpc.call("getPresentationMix", opts || {}),\n      requestPresentationAudio: (opts) => rpc.call("requestPresentationAudio", opts || {}),\n      moveNodes: (opts) => rpc.call("moveNodes", opts || {}),\n      resizeNodes: (opts) => rpc.call("resizeNodes", opts || {}),\n      renameNodes: (opts) => rpc.call("renameNodes", opts || {}),\n      reparentNodes: (opts) => rpc.call("reparentNodes", opts || {}),\n      duplicateNodes: (opts) => rpc.call("duplicateNodes", opts || {}),\n      groupNodes: (opts) => rpc.call("groupNodes", opts || {}),\n      ungroupNodes: (opts) => rpc.call("ungroupNodes", opts || {}),\n      alignNodes: (opts) => rpc.call("alignNodes", opts || {}),\n      distributeNodes: (opts) => rpc.call("distributeNodes", opts || {}),\n      flipNodes: (opts) => rpc.call("flipNodes", opts || {}),\n      rotateNodes: (opts) => rpc.call("rotateNodes", opts || {}),\n      reorderNodes: (opts) => rpc.call("reorderNodes", opts || {}),\n      setLocked: (opts) => rpc.call("setLocked", opts || {}),\n      setVisible: (opts) => rpc.call("setVisible", opts || {}),\n      setAutoLayout: (opts) => rpc.call("setAutoLayout", opts || {}),\n      importSvg: (opts) => rpc.call("importSvg", opts || {}),\n      measureNodes: (opts) => rpc.call("measureNodes", opts || {}),\n      setFills: (opts) => rpc.call("setFills", opts || {}),\n      setStrokes: (opts) => rpc.call("setStrokes", opts || {}),\n      setEffects: (opts) => rpc.call("setEffects", opts || {}),\n      replaceColor: (opts) => rpc.call("replaceColor", opts || {}),\n      setTypography: (opts) => rpc.call("setTypography", opts || {}),\n      applyStyle: (opts) => rpc.call("applyStyle", opts || {}),\n      createComponent: (opts) => rpc.call("createComponent", opts || {}),\n      createInstance: (opts) => rpc.call("createInstance", opts || {}),\n      renamePage: (opts) => rpc.call("renamePage", opts || {}),\n      getDocumentOutline: (opts) => rpc.call("getDocumentOutline", opts || {}),\n      setPageSetup: (opts) => rpc.call("setPageSetup", opts || {}),\n      setShowAdvance: (opts) => rpc.call("setShowAdvance", opts || {}),\n      booleanOperation: (opts) => rpc.call("booleanOperation", opts || {}),\n      flattenNodes: (opts) => rpc.call("flattenNodes", opts || {}),\n      outlineStroke: (opts) => rpc.call("outlineStroke", opts || {}),\n      setMask: (opts) => rpc.call("setMask", opts || {}),\n      setMaskType: (opts) => rpc.call("setMaskType", opts || {}),\n      shapeBuilder: (opts) => rpc.call("shapeBuilder", opts || {}),\n      setKeyframes: (opts) => rpc.call("setKeyframes", opts || {}),\n      getAnimation: (opts) => rpc.call("getAnimation", opts || {}),\n      getCompositions: (opts) => rpc.call("getCompositions", opts || {}),\n      editBehaviours: (opts) => rpc.call("editBehaviours", opts || {}),\n      setTimeline: (opts) => rpc.call("setTimeline", opts || {}),\n      setLayerTiming: (opts) => rpc.call("setLayerTiming", opts || {}),\n      editTextAnimation: (opts) => rpc.call("editTextAnimation", opts || {}),\n      edit3DScene: (opts) => rpc.call("edit3DScene", opts || {}),\n      setInstancePlayback: (opts) => rpc.call("setInstancePlayback", opts || {}),\n      editComponentProperty: (opts) => rpc.call("editComponentProperty", opts || {}),\n      setShaderFill: (opts) => rpc.call("setShaderFill", opts || {}),\n      createComposition: (opts) => rpc.call("createComposition", opts || {}),\n      editComposition: (opts) => rpc.call("editComposition", opts || {}),\n      editStateMachine: (opts) => rpc.call("editStateMachine", opts || {}),\n      getStateMachine: (opts) => rpc.call("getStateMachine", opts || {}),\n      applyMotionPreset: (opts) => rpc.call("applyMotionPreset", opts || {}),\n      staggerMotion: (opts) => rpc.call("staggerMotion", opts || {}),\n      createMotionComponent: (opts) => rpc.call("createMotionComponent", opts || {}),\n      addAudio: (opts) => rpc.call("addAudio", opts || {}),\n      editFrameAudio: (opts) => rpc.call("editFrameAudio", opts || {}),\n      editVideoClip: (opts) => rpc.call("editVideoClip", opts || {}),\n      detectAudioOnsets: (opts) => rpc.call("detectAudioOnsets", opts || {}),\n      cutToBeat: (opts) => rpc.call("cutToBeat", opts || {}),\n      editPrototype: (opts) => rpc.call("editPrototype", opts || {}),\n      importFile: (opts) => rpc.call("importFile", opts || {}),\n      usePresentationFallbackAudio: (opts) => rpc.call("usePresentationFallbackAudio", opts || {}),\n      getStyles: () => rpc.call("getStyles"),\n      createPaintStyle: (name, paints) => rpc.call("createPaintStyle", { name, paints }),\n      getVariables: () => rpc.call("getVariables"),\n      setVariableValue: (variableId, modeId, value) => rpc.call("setVariableValue", { variableId, modeId, value }),\n      exportNode: (id, options) => rpc.call("exportNode", { id, options: options || {} }),\n      openExternal: (url) => rpc.call("openExternal", { url }),\n      notify: (message, options) => rpc.call("notify", { message: String(message), error: !!(options && options.error) }),\n      showUI: (options) => rpc.call("showUI", options || {}),\n      hideUI: () => rpc.call("hideUI"),\n      /** Ends the run. The optional message is shown as a notification. */\n      closePlugin: (message) => rpc.call("closePlugin", { message }),\n      storage: {\n        get: (key) => rpc.call("storageGet", { key }),\n        set: (key, value) => rpc.call("storageSet", { key, value })\n      },\n      ui: {\n        get onmessage() {\n          return uiOnMessage;\n        },\n        set onmessage(cb) {\n          uiOnMessage = cb;\n          flushUI();\n        },\n        postMessage: (msg) => rpc.send({ kind: "toUI", data: msg }),\n        on: (cb) => {\n          uiHandlers.push(cb);\n          flushUI();\n        }\n      },\n      widget: {\n        register(def) {\n          if (!def || typeof def.render !== "function") throw new Error("popcraft.widget.register needs a render(state) function");\n          widgetDef = def;\n          widgetQueue.splice(0).forEach(handleWidgetClick);\n        },\n        insert(options) {\n          if (!widgetDef) return Promise.reject(new Error("Call popcraft.widget.register first"));\n          const o = options || {};\n          const state = o.state !== void 0 ? clone(o.state) : initialWidgetState();\n          return rpc.call("widgetInsert", { state, tree: renderWidget(state).tree, x: o.x, y: o.y });\n        },\n        getState: (nodeId) => rpc.call("widgetGet", { id: nodeId }),\n        setState(nodeId, state) {\n          if (!widgetDef) return Promise.reject(new Error("Call popcraft.widget.register first"));\n          return commitWidget(nodeId, clone(state));\n        }\n      },\n      on: (event, cb) => rpc.on(event, cb),\n      off: (event, cb) => rpc.off(event, cb)\n    };\n    rpc.on("init", (data) => {\n      var _a, _b, _c;\n      popcraft.command = data.command;\n      popcraft.exportRequest = (_c = data.exportRequest) != null ? _c : null;\n      popcraft.importMode = (_a = data.importMode) != null ? _a : null;\n      popcraft.importFile = (_b = data.importFile) != null ? _b : null;\n    });\n    return popcraft;\n  }\n  function installMainApi() {\n    const rpc = createRpcClient();\n    const api = createMainApi(rpc);\n    const w = window;\n    w.__popcraftRpc = rpc;\n    w.popcraft = api;\n    w.vizpops = api;\n    window.addEventListener("error", (e) => rpc.send({ kind: "error", message: String(e.message || e) }));\n    window.addEventListener("unhandledrejection", (e) => rpc.send({ kind: "error", message: String(e.reason && e.reason.message || e.reason) }));\n    return api;\n  }\n\n  // src/runtime/main.entry.ts\n  installMainApi();\n})();';
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/generated/runtime.js"() {
+    MAIN_RUNTIME = '"use strict";\n(() => {\n  // src/runtime/rpc.ts\n  function createRpcClient() {\n    let port = null;\n    const queue = [];\n    const pending = {};\n    const listeners = {};\n    let nextId = 1;\n    function send(msg) {\n      if (port) port.postMessage(msg);\n      else queue.push(msg);\n    }\n    function call(method, params) {\n      return new Promise((resolve, reject) => {\n        const id = nextId++;\n        pending[id] = { resolve, reject };\n        send({ kind: "rpc", id, method, params });\n      });\n    }\n    function emit(event, data) {\n      for (const cb of (listeners[event] || []).slice()) {\n        try {\n          cb(data);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }\n    window.addEventListener("message", (e) => {\n      const data = e.data;\n      if (e.source !== window.parent || !data || data.type !== "popcraft-plugin-port" || port) return;\n      port = e.ports[0];\n      port.onmessage = (ev) => {\n        const m = ev.data || {};\n        if (m.kind === "result" && m.id !== void 0 && pending[m.id]) {\n          const p = pending[m.id];\n          delete pending[m.id];\n          if (m.error) p.reject(new Error(m.error));\n          else p.resolve(m.result);\n        } else if (m.kind === "event" && m.event) {\n          emit(m.event, m.data);\n        }\n      };\n      for (const msg of queue.splice(0)) port.postMessage(msg);\n    });\n    return {\n      call,\n      send,\n      on(event, cb) {\n        (listeners[event] = listeners[event] || []).push(cb);\n      },\n      off(event, cb) {\n        listeners[event] = (listeners[event] || []).filter((x) => x !== cb);\n      }\n    };\n  }\n\n  // src/runtime/main.ts\n  function clone(v) {\n    return v === void 0 ? {} : JSON.parse(JSON.stringify(v));\n  }\n  function createMainApi(rpc = createRpcClient()) {\n    const uiHandlers = [];\n    let uiOnMessage = null;\n    const uiQueue = [];\n    function deliverUI(msg) {\n      for (const cb of uiHandlers) {\n        try {\n          cb(msg);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n      if (typeof uiOnMessage === "function") {\n        try {\n          uiOnMessage(msg);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }\n    function flushUI() {\n      if (uiHandlers.length || typeof uiOnMessage === "function") uiQueue.splice(0).forEach(deliverUI);\n    }\n    rpc.on("uimessage", (msg) => {\n      if (!uiHandlers.length && typeof uiOnMessage !== "function") uiQueue.push(msg);\n      else deliverUI(msg);\n    });\n    let widgetDef = null;\n    const widgetQueue = [];\n    function renderWidget(state) {\n      const handlers = {};\n      function walk(el, path) {\n        if (!el || typeof el !== "object") return el;\n        const out = {};\n        for (const k of Object.keys(el)) {\n          const v = el[k];\n          if (k === "children") {\n            out.children = (Array.isArray(v) ? v : [v]).filter((c) => c !== null && c !== void 0 && c !== false).map((c, i) => walk(c, path + "." + i));\n          } else if (k === "onClick" && typeof v === "function") {\n            handlers[path] = v;\n            out.onClick = path;\n          } else {\n            out[k] = v;\n          }\n        }\n        return out;\n      }\n      return { tree: walk(widgetDef.render(state), "root"), handlers };\n    }\n    function initialWidgetState() {\n      const s = widgetDef && widgetDef.initialState;\n      return clone(typeof s === "function" ? s() : s);\n    }\n    function commitWidget(nodeId, state) {\n      return rpc.call("widgetUpdate", { id: nodeId, state, tree: renderWidget(clone(state)).tree });\n    }\n    function handleWidgetClick(e) {\n      Promise.resolve().then(() => {\n        const state = clone(e.state);\n        const rendered = renderWidget(state);\n        const h = rendered.handlers[e.handler] || widgetDef.handlers && widgetDef.handlers[e.handler];\n        if (typeof h !== "function") return;\n        return Promise.resolve(h(state, { nodeId: e.nodeId })).then((ret) => commitWidget(e.nodeId, ret === void 0 ? state : ret));\n      }).catch((err) => rpc.send({ kind: "error", message: String((err == null ? void 0 : err.message) || err) }));\n    }\n    rpc.on("widgetclick", (e) => {\n      if (widgetDef) handleWidgetClick(e);\n      else widgetQueue.push(e);\n    });\n    const popcraft = {\n      /** Which menu command the user picked, or null when the plugin ran some other way. */\n      command: null,\n      /** Host import mode when launched as an importer, else null. */\n      importMode: null,\n      /** Pending import file when the host handed one over, else null. */\n      importFile: null,\n      /** Pending export request (File \u2192 Export \u2192 this plugin\'s format), else null. */\n      exportRequest: null,\n      getSelection: () => rpc.call("getSelection"),\n      setSelection: (ids) => rpc.call("setSelection", { ids }),\n      getNode: (id) => rpc.call("getNode", { id }),\n      findNodes: (query) => rpc.call("findNodes", query || {}),\n      getCurrentPage: () => rpc.call("getCurrentPage"),\n      createNode: (type, props) => rpc.call("createNode", { type, props: props || {} }),\n      updateNode: (id, props) => rpc.call("updateNode", { id, props }),\n      deleteNode: (id) => rpc.call("deleteNode", { id }),\n      setText: (id, characters) => rpc.call("setText", { id, characters }),\n      /** Put TEXT layers on a path (another layer\'s outline, or their own arc, circle or wave), or tune one: brackets, alignment, placement, effect, overflow. */\n      setTextPath: (opts) => rpc.call("setTextPath", opts || {}),\n      /** Area type: flow a TEXT layer inside a closed shape, kept `inset` px in. */\n      flowTextIntoShape: (opts) => rpc.call("flowTextIntoShape", opts || {}),\n      /** Take TEXT layers off their path or out of their shape (or free every text linked to a path / shape). */\n      detachText: (opts) => rpc.call("detachText", opts || {}),\n      /** Auto-size TEXT layers\' type to their box, shape or path. */\n      setTextFit: (opts) => rpc.call("setTextFit", opts || {}),\n      createPage: (name) => rpc.call("createPage", name != null ? { name: String(name) } : {}),\n      setCurrentPage: (pageId) => rpc.call("setCurrentPage", { pageId }),\n      createImage: (opts) => rpc.call("createImage", opts || {}),\n      createDocument: (opts) => rpc.call("createDocument", opts || {}),\n      getImportMode: () => rpc.call("getImportMode"),\n      getImportFile: () => rpc.call("getImportFile"),\n      /**\n      * The open page as a storefront design in a neutral form, for an exporter that writes its own store\'s templates:\n      * each page\'s HTML with the store\'s data marked (`{{page.title}}`, `{{item.price}}`, `<!-- pc:each \u2026 -->` lists,\n      * `data-pc-action` forms), and its collections with their commerce schema and sample records.\n      */\n      getStorefront: () => rpc.call("getStorefront"),\n      /**\n      * A design\'s data (docs: Collections): a collection and its fields (`schema`: what it stands for, e.g.\n      * `commerce.product`, whose fields are made for it), its records, and reading them.\n      */\n      editCollection: (opts) => rpc.call("editCollection", opts || {}),\n      editRecords: (opts) => rpc.call("editRecords", opts || {}),\n      getRecords: (opts) => rpc.call("getRecords", opts || {}),\n      /** A layer as a web page\'s form control (a FORM\'s `formAction`, an INPUT\'s name and value), repeated per record, a page\'s address, its semantics. */\n      setControl: (opts) => rpc.call("setControl", opts || {}),\n      setRepeat: (opts) => rpc.call("setRepeat", opts || {}),\n      setRoute: (opts) => rpc.call("setRoute", opts || {}),\n      setSemantics: (opts) => rpc.call("setSemantics", opts || {}),\n      /** The site\'s environment: public settings its host reads by name when it is deployed (never a secret: the file keeps them). */\n      getSiteEnvironment: () => rpc.call("getSiteEnvironment"),\n      setSiteEnvironment: (set) => rpc.call("setSiteEnvironment", { set }),\n      /** What this plugin keeps with the open file (its settings for this design), under its own id; JSON only. */\n      getFileData: (key) => rpc.call("getFileData", { key }),\n      setFileData: (key, value) => rpc.call("setFileData", { key, value }),\n      /** A store\'s project built from the open page, zipped (needs `export`): what an exporter saves with `saveExport`. */\n      getStorefrontFiles: (target) => rpc.call("getStorefrontFiles", { target }),\n      getExportRequest: () => rpc.call("getExportRequest"),\n      /** Save the exporter\'s file (once per export request); the host enforces the contributed extension. */\n      saveExport: (file) => rpc.call("saveExport", file || {}),\n      /**\n      * Presentation audio (docs/plugins/presentation-audio.md): the deck\'s slides, notes, narration and timing; the\n      * soundtrack\'s settings, bed and stinger.\n      */\n      getPresentationAudio: (opts) => rpc.call("getPresentationAudio", opts || {}),\n      /** Change the soundtrack\'s settings (voice, style, mood, loudness, beat alignment, levels) and re-time it. */\n      setPresentationAudioSettings: (opts) => rpc.call("setPresentationAudioSettings", opts || {}),\n      /** Put a sound in (a slide\'s narration, the bed or the stinger): bytes are normalised to the soundtrack\'s target and stored. */\n      setPresentationAudioClip: (opts) => rpc.call("setPresentationAudioClip", opts || {}),\n      removePresentationAudioClip: (opts) => rpc.call("removePresentationAudioClip", opts || {}),\n      /** Re-time: fixed slide lengths (ms, null clears) and beat-aligned changes. */\n      setPresentationTiming: (opts) => rpc.call("setPresentationTiming", opts || {}),\n      /** The mix as the export carries it: loudness, true peak, and (wav: true) the 48 kHz stereo WAV. */\n      getPresentationMix: (opts) => rpc.call("getPresentationMix", opts || {}),\n      /** Ask the user to generate with AI (the panel opens with the request filled in; the user decides). */\n      requestPresentationAudio: (opts) => rpc.call("requestPresentationAudio", opts || {}),\n      /** Editor commands: each takes the arguments documented in docs/plugins/methods.md (the agent tool of the same purpose). */\n      moveNodes: (opts) => rpc.call("moveNodes", opts || {}),\n      resizeNodes: (opts) => rpc.call("resizeNodes", opts || {}),\n      renameNodes: (opts) => rpc.call("renameNodes", opts || {}),\n      reparentNodes: (opts) => rpc.call("reparentNodes", opts || {}),\n      duplicateNodes: (opts) => rpc.call("duplicateNodes", opts || {}),\n      groupNodes: (opts) => rpc.call("groupNodes", opts || {}),\n      ungroupNodes: (opts) => rpc.call("ungroupNodes", opts || {}),\n      alignNodes: (opts) => rpc.call("alignNodes", opts || {}),\n      distributeNodes: (opts) => rpc.call("distributeNodes", opts || {}),\n      flipNodes: (opts) => rpc.call("flipNodes", opts || {}),\n      rotateNodes: (opts) => rpc.call("rotateNodes", opts || {}),\n      reorderNodes: (opts) => rpc.call("reorderNodes", opts || {}),\n      setLocked: (opts) => rpc.call("setLocked", opts || {}),\n      setVisible: (opts) => rpc.call("setVisible", opts || {}),\n      setAutoLayout: (opts) => rpc.call("setAutoLayout", opts || {}),\n      importSvg: (opts) => rpc.call("importSvg", opts || {}),\n      measureNodes: (opts) => rpc.call("measureNodes", opts || {}),\n      setFills: (opts) => rpc.call("setFills", opts || {}),\n      setStrokes: (opts) => rpc.call("setStrokes", opts || {}),\n      setEffects: (opts) => rpc.call("setEffects", opts || {}),\n      replaceColor: (opts) => rpc.call("replaceColor", opts || {}),\n      setTypography: (opts) => rpc.call("setTypography", opts || {}),\n      applyStyle: (opts) => rpc.call("applyStyle", opts || {}),\n      createComponent: (opts) => rpc.call("createComponent", opts || {}),\n      createInstance: (opts) => rpc.call("createInstance", opts || {}),\n      renamePage: (opts) => rpc.call("renamePage", opts || {}),\n      getDocumentOutline: (opts) => rpc.call("getDocumentOutline", opts || {}),\n      setPageSetup: (opts) => rpc.call("setPageSetup", opts || {}),\n      setShowAdvance: (opts) => rpc.call("setShowAdvance", opts || {}),\n      booleanOperation: (opts) => rpc.call("booleanOperation", opts || {}),\n      flattenNodes: (opts) => rpc.call("flattenNodes", opts || {}),\n      outlineStroke: (opts) => rpc.call("outlineStroke", opts || {}),\n      setMask: (opts) => rpc.call("setMask", opts || {}),\n      setMaskType: (opts) => rpc.call("setMaskType", opts || {}),\n      shapeBuilder: (opts) => rpc.call("shapeBuilder", opts || {}),\n      setKeyframes: (opts) => rpc.call("setKeyframes", opts || {}),\n      getAnimation: (opts) => rpc.call("getAnimation", opts || {}),\n      getCompositions: (opts) => rpc.call("getCompositions", opts || {}),\n      editBehaviours: (opts) => rpc.call("editBehaviours", opts || {}),\n      setTimeline: (opts) => rpc.call("setTimeline", opts || {}),\n      setLayerTiming: (opts) => rpc.call("setLayerTiming", opts || {}),\n      editTextAnimation: (opts) => rpc.call("editTextAnimation", opts || {}),\n      edit3DScene: (opts) => rpc.call("edit3DScene", opts || {}),\n      setInstancePlayback: (opts) => rpc.call("setInstancePlayback", opts || {}),\n      editComponentProperty: (opts) => rpc.call("editComponentProperty", opts || {}),\n      setShaderFill: (opts) => rpc.call("setShaderFill", opts || {}),\n      createComposition: (opts) => rpc.call("createComposition", opts || {}),\n      editComposition: (opts) => rpc.call("editComposition", opts || {}),\n      editStateMachine: (opts) => rpc.call("editStateMachine", opts || {}),\n      getStateMachine: (opts) => rpc.call("getStateMachine", opts || {}),\n      applyMotionPreset: (opts) => rpc.call("applyMotionPreset", opts || {}),\n      staggerMotion: (opts) => rpc.call("staggerMotion", opts || {}),\n      createMotionComponent: (opts) => rpc.call("createMotionComponent", opts || {}),\n      addAudio: (opts) => rpc.call("addAudio", opts || {}),\n      editFrameAudio: (opts) => rpc.call("editFrameAudio", opts || {}),\n      editVideoClip: (opts) => rpc.call("editVideoClip", opts || {}),\n      detectAudioOnsets: (opts) => rpc.call("detectAudioOnsets", opts || {}),\n      cutToBeat: (opts) => rpc.call("cutToBeat", opts || {}),\n      editPrototype: (opts) => rpc.call("editPrototype", opts || {}),\n      usePresentationFallbackAudio: (opts) => rpc.call("usePresentationFallbackAudio", opts || {}),\n      /** Bring a Lottie, PDF or PopCraft file into the open document (the `importFile` field is the file an importer was handed). */\n      importDocumentFile: (opts) => rpc.call("importDocumentFile", opts || {}),\n      getStyles: () => rpc.call("getStyles"),\n      createPaintStyle: (name, paints) => rpc.call("createPaintStyle", { name, paints }),\n      getVariables: () => rpc.call("getVariables"),\n      setVariableValue: (variableId, modeId, value) => rpc.call("setVariableValue", { variableId, modeId, value }),\n      exportNode: (id, options) => rpc.call("exportNode", { id, options: options || {} }),\n      openExternal: (url) => rpc.call("openExternal", { url }),\n      notify: (message, options) => rpc.call("notify", { message: String(message), error: !!(options && options.error) }),\n      showUI: (options) => rpc.call("showUI", options || {}),\n      hideUI: () => rpc.call("hideUI"),\n      /** Ends the run. The optional message is shown as a notification. */\n      closePlugin: (message) => rpc.call("closePlugin", { message }),\n      storage: {\n        get: (key) => rpc.call("storageGet", { key }),\n        set: (key, value) => rpc.call("storageSet", { key, value })\n      },\n      ui: {\n        get onmessage() {\n          return uiOnMessage;\n        },\n        set onmessage(cb) {\n          uiOnMessage = cb;\n          flushUI();\n        },\n        postMessage: (msg) => rpc.send({ kind: "toUI", data: msg }),\n        on: (cb) => {\n          uiHandlers.push(cb);\n          flushUI();\n        }\n      },\n      widget: {\n        register(def) {\n          if (!def || typeof def.render !== "function") throw new Error("popcraft.widget.register needs a render(state) function");\n          widgetDef = def;\n          widgetQueue.splice(0).forEach(handleWidgetClick);\n        },\n        insert(options) {\n          if (!widgetDef) return Promise.reject(new Error("Call popcraft.widget.register first"));\n          const o = options || {};\n          const state = o.state !== void 0 ? clone(o.state) : initialWidgetState();\n          return rpc.call("widgetInsert", { state, tree: renderWidget(state).tree, x: o.x, y: o.y });\n        },\n        getState: (nodeId) => rpc.call("widgetGet", { id: nodeId }),\n        setState(nodeId, state) {\n          if (!widgetDef) return Promise.reject(new Error("Call popcraft.widget.register first"));\n          return commitWidget(nodeId, clone(state));\n        }\n      },\n      on: (event, cb) => rpc.on(event, cb),\n      off: (event, cb) => rpc.off(event, cb)\n    };\n    rpc.on("init", (data) => {\n      var _a, _b, _c;\n      popcraft.command = data.command;\n      popcraft.importMode = (_a = data.importMode) != null ? _a : null;\n      popcraft.importFile = (_b = data.importFile) != null ? _b : null;\n      popcraft.exportRequest = (_c = data.exportRequest) != null ? _c : null;\n    });\n    return popcraft;\n  }\n  function installMainApi() {\n    const rpc = createRpcClient();\n    const api = createMainApi(rpc);\n    const w = window;\n    w.__popcraftRpc = rpc;\n    w.popcraft = api;\n    w.vizpops = api;\n    window.addEventListener("error", (e) => rpc.send({ kind: "error", message: String(e.message || e) }));\n    window.addEventListener("unhandledrejection", (e) => rpc.send({ kind: "error", message: String(e.reason && e.reason.message || e.reason) }));\n    return api;\n  }\n\n  // src/runtime/main.entry.ts\n  installMainApi();\n})();';
     UI_RUNTIME = '"use strict";\n(() => {\n  // src/runtime/rpc.ts\n  function createRpcClient() {\n    let port = null;\n    const queue = [];\n    const pending = {};\n    const listeners = {};\n    let nextId = 1;\n    function send(msg) {\n      if (port) port.postMessage(msg);\n      else queue.push(msg);\n    }\n    function call(method, params) {\n      return new Promise((resolve, reject) => {\n        const id = nextId++;\n        pending[id] = { resolve, reject };\n        send({ kind: "rpc", id, method, params });\n      });\n    }\n    function emit(event, data) {\n      for (const cb of (listeners[event] || []).slice()) {\n        try {\n          cb(data);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }\n    window.addEventListener("message", (e) => {\n      const data = e.data;\n      if (e.source !== window.parent || !data || data.type !== "popcraft-plugin-port" || port) return;\n      port = e.ports[0];\n      port.onmessage = (ev) => {\n        const m = ev.data || {};\n        if (m.kind === "result" && m.id !== void 0 && pending[m.id]) {\n          const p = pending[m.id];\n          delete pending[m.id];\n          if (m.error) p.reject(new Error(m.error));\n          else p.resolve(m.result);\n        } else if (m.kind === "event" && m.event) {\n          emit(m.event, m.data);\n        }\n      };\n      for (const msg of queue.splice(0)) port.postMessage(msg);\n    });\n    return {\n      call,\n      send,\n      on(event, cb) {\n        (listeners[event] = listeners[event] || []).push(cb);\n      },\n      off(event, cb) {\n        listeners[event] = (listeners[event] || []).filter((x) => x !== cb);\n      }\n    };\n  }\n\n  // src/runtime/ui.ts\n  function createUiApi(rpc = createRpcClient()) {\n    const popcraft = {\n      onmessage: null,\n      postMessage: (msg) => rpc.send({ kind: "fromUI", data: msg }),\n      close: () => rpc.send({ kind: "closeUI" })\n    };\n    rpc.on("message", (msg) => {\n      if (typeof popcraft.onmessage === "function") popcraft.onmessage(msg);\n      window.dispatchEvent(new MessageEvent("message", { data: { pluginMessage: msg } }));\n    });\n    return popcraft;\n  }\n  function installUiApi() {\n    const rpc = createRpcClient();\n    const api = createUiApi(rpc);\n    const w = window;\n    w.__popcraftRpc = rpc;\n    w.popcraft = api;\n    w.vizpops = api;\n    return api;\n  }\n\n  // src/runtime/ui.entry.ts\n  installUiApi();\n})();';
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/host.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/host.js
 function csp(network) {
   const connect2 = network ? "connect-src * data: blob:;" : "connect-src 'none';";
   const img = network ? "img-src * data: blob:;" : "img-src data: blob:;";
@@ -358751,40 +358648,40 @@ function buildUIDocument(uiHtml, network) {
 }
 var escapeScript;
 var init_host2 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/host.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/host.js"() {
     init_runtime4();
     escapeScript = (code) => code.replace(/<\/script/gi, "<\\/script");
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/rpc.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/rpc.js
 var init_rpc = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/rpc.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/rpc.js"() {
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/main.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/main.js
 var init_main = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
     init_rpc();
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/types.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/types.js
 var init_types9 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/types.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/types.js"() {
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/widget.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/widget.js
 var init_widget = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/widget.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/widget.js"() {
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/index.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/index.js
 var init_dist = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/index.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/index.js"() {
     init_host2();
     init_main();
     init_runtime4();
@@ -359532,7 +359429,7 @@ var init_import = __esm({
     init_esm2();
     init_scene_graph();
     init_types();
-    init_state_machine2();
+    init_state_machine3();
     GEOMETRY = /* @__PURE__ */ new Set(["gr", "rc", "el", "sh", "sr"]);
     BLENDS = ["NORMAL", "MULTIPLY", "SCREEN", "OVERLAY", "DARKEN", "LIGHTEN", "COLOR_DODGE", "COLOR_BURN", "HARD_LIGHT", "SOFT_LIGHT", "DIFFERENCE", "EXCLUSION", "HUE", "SATURATION", "COLOR", "LUMINOSITY"];
     nearestFps = (fr) => TIMELINE_FPS_VALUES.reduce((a, b) => Math.abs(b - fr) < Math.abs(a - fr) ? b : a, TIMELINE_FPS_VALUES[0]);
@@ -388978,6 +388875,10 @@ function isOpenableUrl(v) {
     return false;
   }
 }
+function pluginOf(ctx2) {
+  if (ctx2.actor.kind !== "plugin" || !ctx2.actor.id) throw new PluginApiError("Only a plugin keeps file data");
+  return ctx2.actor.id;
+}
 function pluginMethods() {
   registerPluginCommands();
   return listCommandsForSurface("plugin").map((c2) => c2.expose.plugin.method);
@@ -389241,7 +389142,7 @@ var init_plugin = __esm({
         permission: "read",
         expose: { plugin: { method: "getStorefront", shape: (r) => r.data } },
         // A storefront design in a neutral form (lib/io/web/project/storefront.ts `storefrontDesign`): what an exporter
-        // plugin turns into its own store's templates, as PopCraft turns it into a Next.js Commerce store or a Shopify theme.
+        // plugin turns into its own store's templates, as PopCraft turns it into a Next.js Commerce store (the Ecommerce plugin makes a Shopify theme of it).
         run: async (_p, ctx2) => {
           const [{ componentScreens: componentScreens2 }, { storefrontDesign: storefrontDesign2 }] = await Promise.all([Promise.resolve().then(() => (init_components(), components_exports)), Promise.resolve().then(() => (init_storefront(), storefront_exports))]);
           const doc2 = ctx2.doc();
@@ -389249,6 +389150,32 @@ var init_plugin = __esm({
           return { summary: `Storefront: ${design.pages.length} pages`, data: design };
         }
       }),
+      defineCommand({
+        id: pluginCommandId("getStorefrontFiles"),
+        title: "Build a storefront target",
+        domain: "export",
+        params: external_exports.object({ target: external_exports.enum(["shopify-theme", "next-commerce", "next-commerce-store"]) }),
+        effect: "none",
+        permission: "export",
+        expose: { plugin: { method: "getStorefrontFiles", shape: (r) => r.data } },
+        // A store's project, built from the open page as Export storefront builds it, zipped: what an exporter plugin
+        // saves (the Ecommerce plugin's Shopify theme), so a target is written once, here, and never again in a plugin.
+        run: async (p2, ctx2) => {
+          const [{ storefrontInputs: storefrontInputs2 }, { STOREFRONT_TARGETS: STOREFRONT_TARGETS2 }, { bytesOf: bytesOf2 }, { zipFiles: zipFiles2 }, { EXPORT_NODE_CAP: EXPORT_NODE_CAP2 }] = await Promise.all([
+            Promise.resolve().then(() => (init_storefront_prepare(), storefront_prepare_exports)),
+            Promise.resolve().then(() => (init_storefront(), storefront_exports)),
+            Promise.resolve().then(() => (init_project(), project_exports)),
+            Promise.resolve().then(() => (init_zip_export(), zip_export_exports)),
+            Promise.resolve().then(() => (init_tree(), tree_exports))
+          ]);
+          const doc2 = ctx2.doc();
+          const { screens, media: media2 } = await storefrontInputs2(doc2, ctx2.pageId(), EXPORT_NODE_CAP2);
+          if (!screens.length) throw new PluginApiError("This page has no screens: a top-level frame is a page of the store.");
+          const files = STOREFRONT_TARGETS2[p2.target].files(doc2, screens, { media: media2 });
+          const zip = zipFiles2(files.map((f2) => ({ name: f2.path, bytes: bytesOf2(f2) })));
+          return { summary: `${STOREFRONT_TARGETS2[p2.target].label}: ${files.length} files`, data: { name: `${doc2.name || "store"}-${p2.target}.zip`, files: files.length, bytes: new Uint8Array(await zip.arrayBuffer()) } };
+        }
+      }),
       defineCommand({
         id: pluginCommandId("getExportRequest"),
         title: "Get export request",
@@ -389378,6 +389305,36 @@ var init_plugin = __esm({
           return { summary: `Wrote ${p2.key}` };
         }
       }),
+      // What the plugin keeps with the open file (Document.pluginData), under its own id: its settings for this design.
+      defineCommand({
+        id: pluginCommandId("getFileData"),
+        title: "Read plugin file data",
+        domain: "storage",
+        params: external_exports.object({ key: external_exports.unknown().transform((v) => String(v)) }),
+        effect: "none",
+        permission: "read",
+        expose: { plugin: { method: "getFileData", shape: (r) => r.data } },
+        run: (p2, ctx2) => ({ summary: `Read ${p2.key}`, data: ctx2.doc().pluginData?.[pluginOf(ctx2)]?.[p2.key] })
+      }),
+      defineCommand({
+        id: pluginCommandId("setFileData"),
+        title: "Write plugin file data",
+        domain: "storage",
+        params: external_exports.object({ key: external_exports.unknown().transform((v) => String(v)), value: external_exports.unknown() }),
+        effect: "document",
+        permission: "write",
+        expose: { plugin: { method: "setFileData" } },
+        run: (p2, ctx2) => {
+          const doc2 = ctx2.doc();
+          const id3 = pluginOf(ctx2);
+          const mine = { ...doc2.pluginData?.[id3] ?? {} };
+          if (p2.value === void 0 || p2.value === null) delete mine[p2.key];
+          else mine[p2.key] = plain(p2.value);
+          const { [id3]: _, ...others } = doc2.pluginData ?? {};
+          ctx2.commit({ ...doc2, pluginData: Object.keys(mine).length ? { ...others, [id3]: mine } : others });
+          return { summary: `Wrote ${p2.key}` };
+        }
+      }),
       ...widgetCommands(pluginCommandId)
     ];
     pluginRun = defineCommand({
@@ -389435,7 +389392,7 @@ function attached(done, ctx2) {
   ctx2.notice(`Database attached: ${where}`);
   return { summary: `Attached ${where} (${db3.connection.provider}, ${db3.connection.account}): the site's forms are saved there once it is published`, data: { provider: db3.connection.provider, account: db3.connection.account, target: db3.target } };
 }
-var integrationList, integrationOpen, asPath2, integrationListResources, place3, integrationAddDestination, integrationDeploy, integrationAttachDatabase, integrationSubmissions, integrationSetSignIn, integrationConfirmCommands, integrationPullProducts;
+var integrationList, integrationOpen, asPath2, integrationListResources, place3, integrationAddDestination, integrationDeploy, integrationAttachDatabase, integrationSubmissions, integrationSetSignIn, integrationConfirmCommands;
 var init_integration = __esm({
   "lib/commands/integration.ts"() {
     "use strict";
@@ -389449,13 +389406,13 @@ var init_integration = __esm({
       effect: "none",
       permission: null,
       params: external_exports.object({
-        capability: external_exports.enum(["repo", "deploy", "database", "auth", "commerce"]).optional().describe("Only the integrations that can do this: repo (push code to a repository), deploy (host the site), database (store what forms send and what collections hold), auth (sign-in for the site's visitors), commerce (a store whose products a storefront design is drawn with).")
+        capability: external_exports.enum(["repo", "deploy", "database", "auth"]).optional().describe("Only the integrations that can do this: repo (push code to a repository), deploy (host the site), database (store what forms send and what collections hold), auth (sign-in for the site's visitors).")
       }),
       expose: {
         agent: {
           name: "list_integrations",
           readOnly: true,
-          description: "The services this workspace can connect its own accounts to (GitHub, Vercel, Neon, Supabase, Shopify), what each can do (repo, deploy, database, auth, commerce), which accounts are connected, and whether the user can connect more. `notYet` lists what an integration is meant to do and cannot yet: never promise those. Call it before recommending one, and before any step that needs a connection. You cannot connect an account yourself: when one is missing, say which integration fits and why, then call open_integrations so the user can connect it."
+          description: "The services this workspace can connect its own accounts to (GitHub, Vercel, Neon, Supabase), what each can do (repo, deploy, database, auth), which accounts are connected, and whether the user can connect more. `notYet` lists what an integration is meant to do and cannot yet: never promise those. Call it before recommending one, and before any step that needs a connection. You cannot connect an account yourself: when one is missing, say which integration fits and why, then call open_integrations so the user can connect it."
         }
       },
       run: async ({ capability: capability2 }) => {
@@ -389690,50 +389647,6 @@ var init_integration = __esm({
       }
     });
     integrationConfirmCommands = [integrationAddDestination, integrationDeploy, integrationAttachDatabase, integrationSetSignIn];
-    integrationPullProducts = defineCommand({
-      id: "integration.pullProducts",
-      title: "Draw the design with a store's products",
-      domain: "integration",
-      effect: "document",
-      permission: "write",
-      undoLabel: "Store products",
-      params: external_exports.object({
-        connectionId: external_exports.string().optional().describe("The connected store, from list_integrations (capability commerce). Omit when one store is connected."),
-        collection: external_exports.string().optional().describe("The collection to fill, by id or name; it must stand for store products (schema commerce.product). Omit when the file has one."),
-        limit: external_exports.number().int().min(1).max(100).default(24).describe("How many of the store's newest products.")
-      }).strict(),
-      expose: {
-        ui: { label: "Draw with my store's products", keywords: ["shopify", "store", "products", "commerce", "shop", "catalogue", "import"] },
-        agent: {
-          name: "pull_store_products",
-          description: "Replace the records of a storefront design's product collection (schema commerce.product) with a connected store's real products (Shopify): titles, prices, pictures, handles and variant ids, newest first. The design's lists and product pages then show them. It reads the store; it never changes it. Needs a Shopify connection (list_integrations, capability commerce); you cannot connect one yourself."
-        }
-      },
-      run: async (args2, ctx2) => {
-        const [{ cloudUser: cloudUser2 }, { connectedStore: connectedStore2, storeProducts: storeProducts2 }, { commerceItem: commerceItem2, COMMERCE_FIELDS: COMMERCE_FIELDS2 }, { fieldKey: fieldKey2, removeRecords: removeRecords2, upsertRecords: upsertRecords2 }] = await Promise.all([
-          Promise.resolve().then(() => (init_session(), session_exports)),
-          Promise.resolve().then(() => (init_integrations(), integrations_exports)),
-          Promise.resolve().then(() => (init_commerce(), commerce_exports)),
-          Promise.resolve().then(() => (init_collections(), collections_exports))
-        ]);
-        if (!cloudUser2()) throw new CommandError("You are not signed in: a store is connected to your account's workspace.", "denied");
-        const doc2 = ctx2.doc();
-        const pick5 = Object.values(doc2.collections ?? {}).filter((c2) => c2.schema === "commerce.product" && (!args2.collection || c2.id === args2.collection || c2.name.toLowerCase() === args2.collection.toLowerCase()));
-        if (!pick5.length) throw new CommandError(args2.collection ? `No store products collection "${args2.collection}".` : "This file has no collection that stands for store products: set one to Store products in Collections first.", "invalid_params");
-        if (pick5.length > 1) throw new CommandError(`Name the collection: ${pick5.map((c2) => c2.name).join(", ")}.`, "invalid_params");
-        const collection = pick5[0];
-        const connectionId = await connectedStore2(args2.connectionId).catch((e) => {
-          throw new CommandError(e instanceof Error ? e.message : String(e), "failed");
-        });
-        const products = await storeProducts2(connectionId, args2.limit);
-        if (!products.length) throw new CommandError("The store has no products to show.", "failed");
-        const keys4 = new Map(COMMERCE_FIELDS2["commerce.product"].map((f2) => [fieldKey2(f2.name), f2.name]));
-        const rows = products.map((p2) => ({ values: Object.fromEntries(Object.entries(commerceItem2("commerce.product", p2).values).filter(([k2]) => keys4.has(k2)).map(([k2, v]) => [keys4.get(k2), v])) }));
-        const cleared = removeRecords2(doc2, collection.order);
-        ctx2.commit(upsertRecords2(cleared, collection.id, rows).document);
-        return { summary: `Drew ${collection.name} with ${products.length} of the store's products`, data: { collection: collection.id, products: products.length } };
-      }
-    });
   }
 });
 
@@ -390356,6 +390269,7 @@ function record(source, namespaces, globals, limits) {
 var HELPER_NAMES;
 var init_helper_names = __esm({
   "lib/agent/design-script/helper-names.ts"() {
+    "use strict";
     HELPER_NAMES = ["draw", "marks", "fit", "motion", "captions", "overlays", "texture", "pointer", "windows", "devices", "type", "beat", "web", "social", "video", "site", "effects"];
   }
 });
@@ -393873,7 +393787,7 @@ function collectionOf(doc2, ref3) {
   if (!c2) throw new ToolError(`No collection "${ref3}". ${Object.values(doc2.collections ?? {}).length ? `There is: ${Object.values(doc2.collections).map((x2) => x2.name).join(", ")}.` : "Make one with edit_collection."}`);
   return c2;
 }
-var sizing2, padding2, overrides, nodeSetResponsive, link, nodeSetSemantics, nodeSetControl, siteSetRoute, breakpoint, siteSetBreakpoints, siteSetGpuTransitions, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat;
+var sizing2, padding2, overrides, nodeSetResponsive, link, nodeSetSemantics, nodeSetControl, siteSetRoute, breakpoint, siteSetBreakpoints, siteSetGpuTransitions, ENV_NAME, RESERVED_ENV, siteSetEnvironment, siteGetEnvironment, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat;
 var init_site3 = __esm({
   "lib/commands/site.ts"() {
     "use strict";
@@ -393983,6 +393897,7 @@ var init_site3 = __esm({
         link: link.nullable().optional().describe('Make the whole layer a link: {kind:"url", url, newTab?}, {kind:"screen", frameId} (another top-level frame), {kind:"anchor", nodeId} (a layer on the page), {kind:"email", value} or {kind:"tel", value}; null removes it.')
       }).strict(),
       expose: {
+        plugin: { method: "setSemantics" },
         ui: { label: "Web semantics", keywords: ["semantic", "html", "tag", "heading", "link", "anchor", "accessibility", "aria"], enabled: needsSelection(1), palette: false },
         agent: {
           name: "set_semantics",
@@ -394045,6 +393960,7 @@ var init_site3 = __esm({
         onSubmit: external_exports.record(external_exports.string(), external_exports.unknown()).nullable().optional().describe('FORM: a prototype action run once it is sent, as edit_prototype takes them ({navigationType: "NAVIGATE", destinationId: <thank-you frame>}).')
       }).strict(),
       expose: {
+        plugin: { method: "setControl" },
         ui: { label: "Form control", keywords: ["form", "input", "field", "textarea", "select", "checkbox", "radio", "button", "submit"], enabled: needsSelection(1), palette: false },
         agent: {
           name: "set_control",
@@ -394056,7 +393972,7 @@ var init_site3 = __esm({
         const { ids: _ids, kind, ...rest } = args2;
         void _ids;
         if (rest.variableId && !doc2.variables?.[rest.variableId]) throw new ToolError(`No variable ${rest.variableId}.`);
-        const name2 = rest.name !== void 0 ? cleanName2(rest.name) : void 0;
+        const name2 = rest.name !== void 0 ? cleanName(rest.name) : void 0;
         if (rest.name && !name2) throw new ToolError(`"${rest.name}" has nothing a form can send a value under: use letters, digits, dashes and underscores.`);
         const patches = /* @__PURE__ */ new Map();
         for (const id3 of ids2) {
@@ -394093,6 +394009,7 @@ var init_site3 = __esm({
         collectionId: external_exports.string().nullable().optional().describe("Make the screen one page per record of this collection (its address, then the record's: /blog/first-post); texts on it say fields with {{item.title}}. null: an ordinary page again.")
       }).strict(),
       expose: {
+        plugin: { method: "setRoute" },
         ui: { label: "Page address", keywords: ["route", "url", "path", "slug", "page title", "seo", "404"], enabled: needsSelection(1), palette: false },
         agent: {
           name: "set_route",
@@ -394184,6 +394101,56 @@ var init_site3 = __esm({
         return { summary: args2.on ? "3D transitions draw with WebGPU where the browser has it" : "3D transitions draw in CSS 3D only", data: { on: args2.on } };
       }
     });
+    ENV_NAME = /^[A-Z][A-Z0-9_]{0,63}$/;
+    RESERVED_ENV = /^(VERCEL|NEXT_RUNTIME|NODE_ENV|PORT|DATABASE_URL|SITE_AUTH_)/;
+    siteSetEnvironment = defineCommand({
+      id: "site.setEnvironment",
+      title: "Set site environment",
+      domain: "site",
+      effect: "document",
+      permission: "write",
+      undoLabel: "Change the site environment",
+      params: external_exports.object({
+        set: external_exports.record(external_exports.string().regex(ENV_NAME, "Names are upper case, digits and underscores (SHOPIFY_STORE_DOMAIN)"), external_exports.string().max(4096).nullable()).describe("Each name to its value; null removes it. Public values only: everyone who can open the file sees them.")
+      }).strict(),
+      expose: {
+        plugin: { method: "setSiteEnvironment" },
+        ui: { label: "Site environment", keywords: ["environment", "env", "variables", "settings", "deploy", "store"], palette: false },
+        agent: {
+          name: "set_site_environment",
+          description: "Set or remove the site's environment variables: public settings its host reads by name when it is deployed (a store's SHOPIFY_STORE_DOMAIN and public SHOPIFY_STOREFRONT_ACCESS_TOKEN). Kept in the file, seen by everyone who can open it: never put a secret here. null removes a name."
+        }
+      },
+      run: (args2, ctx2) => {
+        const doc2 = ctx2.doc();
+        const bad = Object.keys(args2.set).find((k2) => RESERVED_ENV.test(k2));
+        if (bad) throw new ToolError(`${bad} is set by the host or kept on the server: a file cannot set it.`);
+        const env = { ...doc2.site?.env ?? {} };
+        for (const [k2, v] of Object.entries(args2.set)) {
+          if (v === null) delete env[k2];
+          else env[k2] = v;
+        }
+        const { env: _, ...rest } = doc2.site ?? {};
+        ctx2.commit({ ...doc2, site: Object.keys(env).length ? { ...rest, env } : rest });
+        return { summary: `Site environment: ${Object.keys(env).sort().join(", ") || "none"}`, data: { names: Object.keys(env).sort() } };
+      }
+    });
+    siteGetEnvironment = defineCommand({
+      id: "site.getEnvironment",
+      title: "Get site environment",
+      domain: "site",
+      effect: "none",
+      permission: "read",
+      params: external_exports.object({}).strict(),
+      expose: {
+        plugin: { method: "getSiteEnvironment", shape: (r) => r.data },
+        agent: { name: "get_site_environment", readOnly: true, description: "The site's environment variables (public settings its host reads by name when it is deployed), by name." }
+      },
+      run: (_args, ctx2) => {
+        const env = ctx2.doc().site?.env ?? {};
+        return { summary: `${Object.keys(env).length} environment variable(s)`, data: env };
+      }
+    });
     siteGetBreakpoints = defineCommand({
       id: "site.getBreakpoints",
       title: "Get breakpoints",
@@ -394238,6 +394205,7 @@ var init_site3 = __esm({
         remove: external_exports.boolean().optional().describe("Delete the collection, its records, and the repeaters and collection pages that used it.")
       }).strict(),
       expose: {
+        plugin: { method: "editCollection" },
         ui: { label: "Collections", keywords: ["cms", "collection", "data", "records", "content", "blog", "products"], palette: false },
         agent: {
           name: "edit_collection",
@@ -394306,6 +394274,7 @@ var init_site3 = __esm({
         order: external_exports.array(external_exports.string()).max(COLLECTION_LIMITS.records).optional().describe("Record ids in the order the collection should list them; ones left out keep their order after these.")
       }).strict(),
       expose: {
+        plugin: { method: "editRecords" },
         ui: { label: "Edit records", keywords: ["cms", "record", "row", "content"], palette: false },
         agent: {
           name: "edit_records",
@@ -394349,6 +394318,7 @@ var init_site3 = __esm({
         offset: external_exports.number().int().min(0).optional()
       }).strict(),
       expose: {
+        plugin: { method: "getRecords" },
         agent: {
           name: "get_records",
           readOnly: true,
@@ -394385,6 +394355,7 @@ var init_site3 = __esm({
         filter: external_exports.string().max(500).nullable().optional().describe('An expression over the record, only records it holds for are shown: "item_price > 100", "item_featured".')
       }).strict(),
       expose: {
+        plugin: { method: "setRepeat" },
         ui: { label: "Repeat for each record", keywords: ["repeat", "repeater", "list", "cms", "collection", "loop"], enabled: needsSelection(1), palette: false },
         agent: {
           name: "set_repeat",
@@ -394450,7 +394421,7 @@ var init_import2 = __esm({
         url: external_exports.string().url().max(2e3).optional().describe("Or fetch it from an https URL.")
       }).strict(),
       expose: {
-        plugin: { method: "importFile" },
+        plugin: { method: "importDocumentFile" },
         agent: {
           name: "import_file",
           description: "Import a Lottie animation (.json or .lottie: a frame with its timeline, precomps as components), a PDF or a PopCraft file into the open file, onto the current page; later pages are appended. Pass the content as text, base64 or an https url. Returns the added layer ids and anything that did not map."
@@ -395340,7 +395311,6 @@ function registerBuiltinCommands() {
 var builtinCommands, uiOnlyCommands;
 var init_builtin4 = __esm({
   "lib/commands/builtin.ts"() {
-    "use strict";
     init_registry();
     init_node();
     init_node();
@@ -395521,6 +395491,8 @@ var init_builtin4 = __esm({
       siteSetRoute,
       nodeSetControl,
       nodeSetRepeat,
+      siteSetEnvironment,
+      siteGetEnvironment,
       codeEditModule,
       codeGetModules,
       componentSetCode,
@@ -395541,7 +395513,6 @@ var init_builtin4 = __esm({
       integrationOpen,
       integrationListResources,
       integrationSubmissions,
-      integrationPullProducts,
       // a copy of the open file as a new file (lib/commands/file.ts) (appended, as above)
       fileDuplicate,
       // a whiteboard as one picture, or its stickies as Markdown / CSV (lib/popcorn/board-export.ts) (appended, as above)
@@ -402825,7 +402796,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.16.0";
+var VERSION2 = "0.17.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):