@popcraft/cli 0.20.3 → 0.21.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.20.3"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.21.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -5303,6 +5303,9 @@ var init_properties = __esm({
       // Fill
       itemProp(FILLS, "color", "Color", { valueType: "color", group: "Fill", control: color, essential: true, accepts: (it) => it.type === "SOLID" }),
       itemProp(FILLS, "opacity", "Opacity", { valueType: "number", group: "Fill", control: percent, accepts: () => true, defaultOf: () => 1 }),
+      // A picture's address, swapped whole: what an IMAGE component property feeds (a product card's photo).
+      itemProp(FILLS, "imageUrl", "Picture", { valueType: "string", group: "Fill", control: { kind: "text" }, accepts: (it) => it.type === "IMAGE" }),
+      nodeProp("imageUrl", "Picture", { valueType: "string", group: "Fill", control: { kind: "text" }, appliesTo: (n) => n.type === "IMAGE" }),
       itemProp(FILLS, "color", "Color", { valueType: "color", group: "Fill", control: color, accepts: (it) => GRADIENTS.has(it.type), sub: { list: "gradientStops", label: (j) => `Stop ${j + 1}` } }),
       itemProp(FILLS, "position", "Position", { valueType: "number", group: "Fill", control: percent, accepts: (it) => GRADIENTS.has(it.type), sub: { list: "gradientStops", label: (j) => `Stop ${j + 1}` } }),
       shaderParamProp(),
@@ -32639,6 +32642,7 @@ var init_en2 = __esm({
       "command:node.align#right": "Align right",
       "command:node.align#top": "Align top",
       "command:node.applyAutoLayout": "Infer auto layout",
+      "command:node.bindField": "Bind to a field",
       "command:node.delete": "Delete selection",
       "command:node.distribute": "Distribute",
       "command:node.distribute#horizontal": "Distribute horizontally",
@@ -32662,6 +32666,7 @@ var init_en2 = __esm({
       "command:node.setLock": "Lock",
       "command:node.setLock#lock": "Lock selection",
       "command:node.setLock#unlock": "Unlock selection",
+      "command:node.setRecord": "Show a record",
       "command:node.setRepeat": "Repeat for each record",
       "command:node.setResponsive": "Breakpoint overrides",
       "command:node.setSemantics": "Web semantics",
@@ -32957,6 +32962,16 @@ var init_en2 = __esm({
       "cropToolbar.keepThisCropEnter": "Keep this crop (Enter)",
       "cropToolbar.putTheCropBackAs": "Put the crop back as it was (Esc)",
       "cropToolbar.ratio": "Ratio",
+      "dataSection.collectionHint": "Which collection this layer shows a record of",
+      "dataSection.fieldHint": "The field {name} shows",
+      "dataSection.fromAround": "From around it: {name}",
+      "dataSection.noRecord": "No record",
+      "dataSection.notBound": "Not bound",
+      "dataSection.pickFirst": "Pick a record above, or put this layer in a list, to bind it to fields.",
+      "dataSection.picture": "Picture",
+      "dataSection.recordHint": "Which record this layer shows",
+      "dataSection.text": "Text",
+      "dataSection.title": "Data",
       "deleteAccountDialog.cancel": "Cancel",
       "deleteAccountDialog.couldNotDelete": "Your account could not be deleted. Try again.",
       "deleteAccountDialog.deleteAccount": "Delete account",
@@ -33138,6 +33153,8 @@ var init_en2 = __esm({
       "designPanel.pairThePaddingLeftWith": "Pair the padding (left with right, top with bottom)",
       "designPanel.perspective": "Perspective",
       "designPanel.pick": "\u2014 Pick \u2014",
+      "designPanel.pictureAddress": "The picture's address",
+      "designPanel.pictureAddressPlaceholder": "https://\u2026",
       "designPanel.pixelCanvas": "Pixel canvas",
       "designPanel.placeholdersLikeTakeTheSelected": "Placeholders like '{{'Label'}}' take the selected instance's property values in the Dev panel.",
       "designPanel.pointCount": "Point count",
@@ -33737,9 +33754,9 @@ var init_en2 = __esm({
       "homeTeam.publicInMarketplace": "Public in the marketplace",
       "homeTeam.putOnline": "Put online",
       "homeTeam.reject": "Reject",
-      "homeTeam.rejectNote": "Why (for the publisher)",
       "homeTeam.rejected": "Rejected",
       "homeTeam.rejectedBecause": "Rejected: {note}",
+      "homeTeam.rejectNote": "Why (for the publisher)",
       "homeTeam.removeConfirm": "Take {name} off the marketplace? A plugin is unlisted (those who installed it keep it); anything else is deleted.",
       "homeTeam.removeTitle": "Take {name} off the marketplace?",
       "homeTeam.review": "Review",
@@ -254923,14 +254940,24 @@ function repeatRecords(doc2, repeat, under) {
   return list2.slice(from2, repeat.limit !== void 0 ? from2 + Math.max(0, repeat.limit) : void 0);
 }
 function shownRecordOf(nodes, doc2, id3) {
+  const own2 = pinnedRecord(doc2, nodes[id3]);
+  if (own2) return own2;
   for (let at3 = nodes[id3]?.parentId, hops = 0; at3 && hops < 64; at3 = nodes[at3]?.parentId, hops++) {
     const frame2 = nodes[at3];
+    const pinned = pinnedRecord(doc2, frame2);
+    if (pinned) return pinned;
     if (frame2?.repeat) return repeatRecords(doc2, frame2.repeat)[0] ?? null;
     const of = frame2?.route?.collectionId;
     if (of && doc2.collections?.[of]) return repeatRecords(doc2, { collectionId: of })[0] ?? null;
   }
   return null;
 }
+function pinnedRecord(doc2, node2) {
+  const pin = node2?.record;
+  if (!pin) return null;
+  const r = doc2.records?.[pin.recordId];
+  return r && r.collectionId === pin.collectionId && doc2.collections?.[pin.collectionId] ? r : null;
+}
 function recordSlugs(doc2, collectionId) {
   const c2 = doc2.collections?.[collectionId];
   const out = /* @__PURE__ */ new Map();
@@ -254961,6 +254988,12 @@ function itemNode(node2, raw, collection, record2, scope) {
   if (bound) for (const [prop, src] of Object.entries(bound)) {
     const val = tryEvaluate(src, scope);
     if (val === void 0) continue;
+    if (prop.startsWith(PROP_BINDING) && out.type === "INSTANCE") {
+      const name2 = prop.slice(PROP_BINDING.length);
+      const props = out.componentProperties;
+      out = { ...out, componentProperties: { ...props, [name2]: typeof val === "boolean" ? val : fieldText(val) } };
+      continue;
+    }
     const value3 = prop === "imageUrl" ? String(val) : boundPropValue(prop, val);
     if (value3 !== void 0) out = { ...out, [prop]: value3 };
   }
@@ -255043,7 +255076,7 @@ function removeRecords(doc2, ids2) {
   const collections = Object.fromEntries(Object.entries(doc2.collections ?? {}).map(([id3, c2]) => [id3, c2.order.some((r) => gone.has(r)) ? { ...c2, order: c2.order.filter((r) => !gone.has(r)) } : c2]));
   return { ...doc2, records, collections };
 }
-var COLLECTION_LIMITS, slugify2, dataMemo, withData, ITEM_RECORD, MARK, itemMark, templateRecord, compare, TOKEN2, hasItemToken, layerId, copySuffix, copyRecord, coerce3, newId;
+var COLLECTION_LIMITS, slugify2, dataMemo, withData, ITEM_RECORD, MARK, itemMark, templateRecord, compare, PROP_BINDING, TOKEN2, hasItemToken, layerId, copySuffix, copyRecord, coerce3, newId;
 var init_collections = __esm({
   "lib/document/collections.ts"() {
     "use strict";
@@ -255067,6 +255100,7 @@ var init_collections = __esm({
       values: Object.fromEntries(collection.fields.map((f2) => [f2.id, itemMark(fieldKey(f2.name))]))
     });
     compare = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true });
+    PROP_BINDING = "prop:";
     TOKEN2 = /\{\{\s*item\.([A-Za-z0-9_]+)\s*\}\}/g;
     hasItemToken = (text) => !!text && text.includes("{{") && /\{\{\s*item\./.test(text);
     layerId = (id3) => {
@@ -256251,7 +256285,6 @@ function planEntryAction({ home }) {
 var STORAGE_KEY2, useHyperyTeam, TEAM_PROMPT_ENABLED, TEAM_PROMPTED_KEY, PROMPTED_KEY, useTeamPrompt, started;
 var init_team = __esm({
   "lib/client/cloud/team.ts"() {
-    "use strict";
     init_esm();
     init_api4();
     init_session();
@@ -304671,7 +304704,6 @@ async function dispatchShaped(key5, options) {
 var onViolation;
 var init_dispatch = __esm({
   "lib/commands/dispatch.ts"() {
-    "use strict";
     init_errors();
     init_registry();
     init_confirm();
@@ -305060,7 +305092,6 @@ 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;
@@ -316779,7 +316810,29 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
   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;
+  let nodesNow = doc2.nodes;
   const build3 = (raw, parent, in3D2, fold) => {
+    const pinned = pinnedRecord(doc2, raw);
+    const outerItem = item, outerNodes = nodesNow;
+    const pinnedTo = pinned ? doc2.collections[pinned.collectionId] : void 0;
+    const holds2 = raw.type === "INSTANCE" || !!raw.childIds?.length;
+    const slugField = holds2 && pinnedTo?.schema && opts.listTemplates && opts.target === "site" ? pinnedTo.fields.find((f2) => f2.id === pinnedTo.slugFieldId) ?? pinnedTo.fields.find((f2) => f2.type === "SLUG") : void 0;
+    if (pinned && pinnedTo) item = slugField ? { collection: pinnedTo, record: templateRecord(pinnedTo), suffix: item?.suffix ?? "" } : { collection: pinnedTo, record: pinned, suffix: item?.suffix ?? "" };
+    if (item && raw.type === "INSTANCE" && raw.boundExpressions) {
+      const shown2 = itemised(raw, raw, item);
+      if (shown2 !== raw) nodesNow = { ...nodesNow, [raw.id]: shown2 };
+    }
+    try {
+      const web = buildLayer(raw, parent, in3D2, fold);
+      if (!web || !pinned || !slugField) return web;
+      const value3 = String(pinned.values[slugField.id] ?? "");
+      return { ...web, children: [], repeat: { collectionId: pinnedTo.id, template: web.children, limit: 1, pick: { key: fieldKey(slugField.name), value: value3 } } };
+    } finally {
+      item = outerItem;
+      nodesNow = outerNodes;
+    }
+  };
+  const buildLayer = (raw, parent, in3D2, fold) => {
     if (emitted >= cap2) {
       truncated = true;
       return null;
@@ -316978,7 +317031,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
           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)) {
+              for (const child of childrenOf(node2, nodesNow)) {
                 const built = build3(child, node2, kids3D, kidFold);
                 if (built) web.children.push(built);
               }
@@ -316986,7 +317039,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
             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)) {
+              for (const child of childrenOf(node2, nodesNow)) {
                 const built = build3(child, node2, kids3D, kidFold);
                 if (built) template2.push(built);
               }
@@ -317003,7 +317056,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
           } finally {
             item = outerItem;
           }
-        } else for (const child of childrenOf(node2, doc2.nodes)) {
+        } else for (const child of childrenOf(node2, nodesNow)) {
           const built = build3(child, node2, kids3D, kidFold);
           if (built) web.children.push(built);
         }
@@ -320600,7 +320653,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.20.3",
+      version: "0.21.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",
@@ -345259,7 +345312,6 @@ 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("/");
   }
@@ -345302,7 +345354,6 @@ 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();
@@ -346270,7 +346321,8 @@ function componentPlan(doc2, screens) {
       props.push({ name: propName2(one ? COMMERCE_PROP[c2.schema].name : camel3(c2.name)), type: one ? type : `${type}[]`, doc: `${c2.name}; none: the design's samples.`, schema: c2.schema, collectionId: c2.id });
     }
     for (const a of new Set(all3(s.tree.root).map((n) => n.action).filter((a2) => !!a2))) props.push({ name: COMMERCE_ACTION_PROP[a], type: "(formData: FormData) => void | Promise<void>", doc: `What sending its ${a} form does (a server action).`, action: a });
-    return { screen: s, name: name2, props };
+    const picks = [...new Set(all3(s.tree.root).filter((n) => n.repeat?.pick && doc2.collections?.[n.repeat.collectionId]?.schema === "commerce.product").map((n) => n.repeat.pick.value))].sort();
+    return { screen: s, name: name2, props, ...picks.length ? { picks } : {} };
   });
 }
 function componentMedia(doc2, screens) {
@@ -346323,6 +346375,7 @@ function componentFiles(doc2, screens, o = {}) {
         if (!p2) return null;
         const c2 = doc2.collections[r.collectionId];
         let out = COMMERCE_PROP[c2.schema].one ? `(${p2} ? [commerceItem(${JSON.stringify(c2.schema)}, ${p2})] : SAMPLE_${p2.toUpperCase()})` : `(${p2} ? ${p2}.map(v => commerceItem(${JSON.stringify(c2.schema)}, v)) : SAMPLE_${p2.toUpperCase()})`;
+        if (r.pick) return `((list) => [list.find(item => String(item.values[${JSON.stringify(r.pick.key)}] ?? "") === ${JSON.stringify(r.pick.value)}) ?? list[0]].filter((item): item is CommerceItem => !!item))(${out})`;
         if (r.offset || r.limit) out += `.slice(${r.offset ?? 0}${r.limit ? `, ${(r.offset ?? 0) + r.limit}` : ""})`;
         return out;
       },
@@ -346497,6 +346550,10 @@ function shopifyThemeFiles(doc2, screens, o = {}) {
         const schema = n.repeat && schemaOf(n.repeat.collectionId);
         if (!schema || !n.repeat) return null;
         const range3 = `${n.repeat.limit ? ` limit: ${n.repeat.limit}` : ""}${n.repeat.offset ? ` offset: ${n.repeat.offset}` : ""}`;
+        if (n.repeat.pick && schema === "commerce.product") {
+          const handle = n.repeat.pick.value.replace(/[^a-z0-9-]/gi, "");
+          return { open: `{% assign p = all_products['${handle}'] %}{% if p == empty %}{% assign p = ${source3} | first %}{% endif %}{% if p %}`, close: "{% endif %}" };
+        }
         switch (schema) {
           case "commerce.product":
             return { open: `{% for p in ${source3}${range3} %}`, close: "{% endfor %}" };
@@ -346879,14 +346936,16 @@ function pageSource(plan2, kind) {
     cart: 'getProducts({ sortKey: "CREATED_AT", reverse: true })',
     page: 'getProducts({ sortKey: "CREATED_AT", reverse: true })'
   };
+  const picks = uses("products") ? plan2.picks ?? [] : [];
+  const listed = picks.length ? `Promise.all([${productsFrom[kind]}, ...${JSON.stringify(picks)}.map((h) => getProduct(h))]).then(([list, ...picked]) => [...picked.filter((p): p is NonNullable<typeof p> => !!p), ...list])` : productsFrom[kind];
   const fetches = [
     ...kind === "collection" ? [["collection", "getCollection(handle)"]] : [],
-    ...uses("products") ? [["products", productsFrom[kind]]] : [],
+    ...uses("products") ? [["products", listed]] : [],
     ...uses("categories") ? [["categories", "storeCategories()"]] : [],
     ["frame", "storeFrame()"]
   ];
   const shopify = [
-    ...kind === "product" ? ["getProduct"] : [],
+    ...kind === "product" || picks.length ? ["getProduct"] : [],
     ...kind === "collection" ? ["getCollection"] : [],
     ...uses("products") ? [productsFrom[kind].slice(0, productsFrom[kind].indexOf("("))] : []
   ];
@@ -347033,7 +347092,8 @@ function storefrontDesign(doc2, screens) {
         const c2 = n.repeat && named(n.repeat.collectionId);
         if (!c2 || !n.repeat) return null;
         const range3 = `${n.repeat.limit ? ` limit="${n.repeat.limit}"` : ""}${n.repeat.offset ? ` offset="${n.repeat.offset}"` : ""}`;
-        return { open: `<!-- pc:each list="${c2.name}" schema="${c2.schema ?? ""}" as="item"${range3} -->`, close: "<!-- pc:end -->" };
+        const pick5 = n.repeat.pick ? ` pick-${n.repeat.pick.key}="${n.repeat.pick.value.replace(/[&"<>]/g, (ch) => `&#${ch.charCodeAt(0)};`)}"` : "";
+        return { open: `<!-- pc:each list="${c2.name}" schema="${c2.schema ?? ""}" as="item"${range3}${pick5} -->`, close: "<!-- pc:end -->" };
       },
       form: (n) => n.action ? { attrs: { "data-pc-action": n.action } } : null
     });
@@ -350976,7 +351036,7 @@ var init_motion_rich = __esm({
         return { summary: `Playback on ${plural2(patches.size, "instance")}`, data: { ids: [...patches.keys()] } };
       }
     });
-    PROP_TYPES = ["NUMBER", "COLOR", "MOTION", "BOOLEAN", "TEXT"];
+    PROP_TYPES = ["NUMBER", "COLOR", "MOTION", "BOOLEAN", "TEXT", "IMAGE"];
     componentPropOp = external_exports.discriminatedUnion("op", [
       external_exports.object({
         op: external_exports.literal("add"),
@@ -350993,8 +351053,8 @@ var init_motion_rich = __esm({
       external_exports.object({
         op: external_exports.literal("bindLayer"),
         layer: external_exports.string().describe("A layer inside the component."),
-        name: external_exports.string().describe("A NUMBER or COLOR property."),
-        path: external_exports.string().max(300).nullable().describe("The layer property it feeds (a number path for NUMBER, a colour path for COLOR: fills[#0].color, opacity, text.counter \u2026); null unbinds.")
+        name: external_exports.string().describe("A NUMBER, COLOR or IMAGE property."),
+        path: external_exports.string().max(300).nullable().describe("The layer property it feeds (a number path for NUMBER, a colour path for COLOR: fills[#0].color, opacity, text.counter \u2026; a picture for IMAGE: imageUrl on an image layer, fills[#0].imageUrl on an image fill); null unbinds.")
       }).describe("Make a layer property an input: each instance's value of the property plays there (a keyed path too).")
     ]);
     motionEditComponentProperty = defineCommand({
@@ -351010,7 +351070,7 @@ var init_motion_rich = __esm({
         ui: { label: "Edit component property", palette: false },
         agent: {
           name: "edit_component_property",
-          description: `A component's properties, as its instances set them: add a NUMBER, COLOR, MOTION (one playback setting shown on every instance), BOOLEAN or TEXT property, remove one, change its default, or bind a layer property inside the component to a NUMBER / COLOR property (a layer input). Keys can also take their value from a property per instance (set_keyframes with bind), so "count to N" or "slide this far" is set per instance with set_instance_playback properties.`
+          description: `A component's properties, as its instances set them: add a NUMBER, COLOR, MOTION (one playback setting shown on every instance), BOOLEAN, TEXT or IMAGE (a picture's address) property, remove one, change its default, or bind a layer property inside the component to a NUMBER / COLOR / IMAGE property (a layer input; IMAGE feeds a picture). An instance's TEXT and IMAGE properties can follow a record's field (bind_field). Keys can also take their value from a property per instance (set_keyframes with bind), so "count to N" or "slide this far" is set per instance with set_instance_playback properties.`
         }
       },
       run: (args2, ctx2) => {
@@ -351052,7 +351112,7 @@ var init_motion_rich = __esm({
           }
           case "bindLayer": {
             const def = has(op4.name);
-            if (def.type !== "NUMBER" && def.type !== "COLOR") throw new ToolError("Only a NUMBER or COLOR property feeds a layer input.");
+            if (def.type !== "NUMBER" && def.type !== "COLOR" && def.type !== "IMAGE") throw new ToolError("Only a NUMBER, COLOR or IMAGE property feeds a layer input.");
             const layer2 = nodeOrThrow(doc2, op4.layer);
             const owner = target2.type === "COMPONENT_SET" ? target2.id : target2.id;
             let inside2 = false;
@@ -354042,7 +354102,6 @@ var init_publish = __esm({
 var storeOpsSeam;
 var init_seams = __esm({
   "lib/commands/seams.ts"() {
-    "use strict";
     storeOpsSeam = (st) => ({
       booleanOperation: (op4) => st().booleanOperation(op4),
       flatten: () => st().flattenSelection(),
@@ -356456,9 +356515,11 @@ are whole stores to begin from.
    - \`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. 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.
+3. **The cards and lists.** Make the card a component with properties (\`edit_component_property\`: TEXT Title and
+   Price, IMAGE Image fed to its picture with \`bindLayer\` path \`imageUrl\`). \`set_repeat\` on the frame that holds
+   one instance, over the collection, and \`bind_field\` each property to a field (Title \u2190 title, Price \u2190 price,
+   Image \u2190 image). One product in a hero or feature is \`set_record\` (by its handle), never a list of one with an
+   offset. The cart's totals are a list of one (\`limit: 1\`) over the \`commerce.cart\` collection.
 4. **A page per product.** \`set_route\` on the product screen with the product collection's id: the route is
    \`/product\` and each product's page is \`/product/<handle>\`. A card links to that screen.
 5. **The forms.** \`set_control\` FORM with a storefront \`formAction\`:
@@ -358876,16 +358937,16 @@ var init_api5 = __esm({
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/generated/runtime.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/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=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})();';
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/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      /** Which record layers are about (one product, picked from a collection), and which of its fields a layer\'s words, picture or an instance\'s properties follow. */\n      setRecord: (opts) => rpc.call("setRecord", opts || {}),\n      bindField: (opts) => rpc.call("bindField", 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=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/host.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/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:;";
@@ -358913,40 +358974,40 @@ function buildUIDocument(uiHtml, network) {
 }
 var escapeScript;
 var init_host2 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/host.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/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=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/rpc.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/runtime/rpc.js
 var init_rpc = __esm({
-  "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=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/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/main.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/runtime/main.js
 var init_main = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
     init_rpc();
   }
 });
 
-// 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=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/types.js
 var init_types9 = __esm({
-  "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=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/types.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=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/widget.js
 var init_widget = __esm({
-  "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=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/widget.js"() {
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/index.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/index.js
 var init_dist = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=e61849e2a6a59df95f0ebad36ab274c37a933fcf798d8b4dd6b3f0ffc625a1da/node_modules/@popcraft/plugins/dist/index.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=6826cb40a12857607fa1f7d7d102e5d8316bd483c1ff06865dac73139dfe709b/node_modules/@popcraft/plugins/dist/index.js"() {
     init_host2();
     init_main();
     init_runtime4();
@@ -390534,7 +390595,6 @@ 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"];
   }
 });
@@ -390917,7 +390977,6 @@ function designRecorder() {
 var installed;
 var init_recorders = __esm({
   "lib/agent/design-script/recorders.ts"() {
-    "use strict";
     installed = null;
   }
 });
@@ -394052,7 +394111,31 @@ 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, ENV_NAME, RESERVED_ENV, siteSetEnvironment, siteGetEnvironment, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat;
+function recordOf(doc2, c2, ref3) {
+  const own2 = doc2.records?.[ref3];
+  if (own2?.collectionId === c2.id) return own2;
+  const slugs = recordSlugs(doc2, c2.id);
+  const want = ref3.trim().toLowerCase();
+  const found = recordsIn(doc2, c2.id).find((r) => slugs.get(r.id) === want || c2.fields.some((f2) => String(r.values[f2.id] ?? "").trim().toLowerCase() === want));
+  if (!found) throw new ToolError(`${c2.name} has no record "${ref3}". Read them with get_records.`);
+  return found;
+}
+function bindingKey(doc2, node2, property) {
+  if (property === "text") {
+    if (node2.type !== "TEXT") throw new ToolError(`"${node2.name}" is not a text.`);
+    return "characters";
+  }
+  if (property === "picture") {
+    if (node2.type !== "IMAGE") throw new ToolError(`"${node2.name}" is not an image layer: give its component an IMAGE property instead.`);
+    return "imageUrl";
+  }
+  if (node2.type !== "INSTANCE") throw new ToolError(`"${node2.name}" has no property "${property}": say text, picture, or an instance's property.`);
+  const defs = componentDefinitions(doc2.nodes, node2.mainComponentId);
+  const def = defs[property];
+  if (!def || !["TEXT", "IMAGE", "BOOLEAN"].includes(def.type)) throw new ToolError(`"${node2.name}" has no TEXT, IMAGE or BOOLEAN property "${property}". It has: ${Object.keys(defs).join(", ") || "none"}.`);
+  return `${PROP_BINDING}${property}`;
+}
+var sizing2, padding2, overrides, nodeSetResponsive, link, nodeSetSemantics, nodeSetControl, siteSetRoute, breakpoint, siteSetBreakpoints, siteSetGpuTransitions, ENV_NAME, RESERVED_ENV, siteSetEnvironment, siteGetEnvironment, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat, nodeSetRecord, nodeBindField, recordLabel;
 var init_site3 = __esm({
   "lib/commands/site.ts"() {
     "use strict";
@@ -394061,6 +394144,7 @@ var init_site3 = __esm({
     init_breakpoints();
     init_collections();
     init_semantics();
+    init_instances();
     init_controls();
     init_types();
     init_routes();
@@ -394659,6 +394743,83 @@ var init_site3 = __esm({
         return { summary: c2 ? `Repeats for ${c2.name} (${shown2} records)` : "No longer repeats", data: { ids: ids2, collectionId: c2?.id ?? null } };
       }
     });
+    nodeSetRecord = defineCommand({
+      id: "node.setRecord",
+      title: "Show a record",
+      domain: "node",
+      effect: "document",
+      permission: "write",
+      undoLabel: "Show a record",
+      params: external_exports.object({
+        ids: external_exports.array(external_exports.string()).min(1).max(50).optional().describe("Layers to edit (default: the selection)."),
+        collection: external_exports.string().nullable().describe("The collection, by id or name; null: the layers show no record of their own again."),
+        record: external_exports.string().optional().describe("The record, by id, page address, or the value of one of its fields (a product's handle or title).")
+      }).strict(),
+      expose: {
+        plugin: { method: "setRecord" },
+        ui: { label: "Show a record", keywords: ["record", "data", "bind", "product", "cms", "collection", "source"], enabled: needsSelection(1), palette: false },
+        agent: {
+          name: "set_record",
+          description: "Make layers about one record of a collection (one product, one post): they and what they hold show its values wherever they follow a field \u2014 a text with {{item.<field key>}}, a picture or an instance property bound with bind_field. The nearest record wins: a layer's own, then a list it is in, then its page's."
+        }
+      },
+      run: (args2, ctx2) => {
+        const { doc: doc2, ids: ids2 } = resolveTargets(ctx2, args2.ids, "set_record");
+        const c2 = args2.collection ? collectionOf(doc2, args2.collection) : null;
+        if (c2 && !args2.record) throw new ToolError("Say which record.");
+        const r = c2 ? recordOf(doc2, c2, args2.record) : null;
+        const pin = c2 && r ? { collectionId: c2.id, recordId: r.id } : void 0;
+        commitUpdates(ctx2, doc2, new Map(ids2.map((id3) => [id3, { record: pin }])));
+        return { summary: pin ? `Shows ${c2.name}: ${recordLabel(c2, r)}` : "Shows no record of its own", data: { ids: ids2, record: pin ?? null } };
+      }
+    });
+    nodeBindField = defineCommand({
+      id: "node.bindField",
+      title: "Bind to a field",
+      domain: "node",
+      effect: "document",
+      permission: "write",
+      undoLabel: "Bind to a field",
+      params: external_exports.object({
+        ids: external_exports.array(external_exports.string()).min(1).max(50).optional().describe("Layers to edit (default: the selection)."),
+        property: external_exports.string().min(1).max(120).describe(`What follows the field: "text" (a text's words), "picture" (an image layer's picture), or the name of one of an instance's TEXT, IMAGE or BOOLEAN properties.`),
+        field: external_exports.string().nullable().describe("The field, by name or key, of the record the layer is about (its own, its list's or its page's); null: it stops following one.")
+      }).strict(),
+      expose: {
+        plugin: { method: "bindField" },
+        ui: { label: "Bind to a field", keywords: ["bind", "field", "data", "source", "dynamic", "cms", "product"], enabled: needsSelection(1), palette: false },
+        agent: {
+          name: "bind_field",
+          description: "Make a layer show a field of the record it is about (set_record, a list, or a collection page): a text's words, an image layer's picture, or an instance's TEXT / IMAGE / BOOLEAN property \u2014 so a product card component takes its title, price and photo from the record. null unbinds."
+        }
+      },
+      run: (args2, ctx2) => {
+        const { doc: doc2, ids: ids2 } = resolveTargets(ctx2, args2.ids, "bind_field");
+        const updates = /* @__PURE__ */ new Map();
+        for (const id3 of ids2) {
+          const node2 = doc2.nodes[id3];
+          const key5 = bindingKey(doc2, node2, args2.property);
+          const bound = { ...node2.boundExpressions ?? {} };
+          if (args2.field === null) delete bound[key5];
+          else {
+            const record2 = shownRecordOf(doc2.nodes, doc2, id3);
+            const c2 = record2 && doc2.collections?.[record2.collectionId];
+            if (!c2) throw new ToolError(`"${node2.name}" is about no record: pick one with set_record, or put it in a list (set_repeat).`);
+            const want = fieldKey(args2.field);
+            const f2 = c2.fields.find((x2) => x2.id === args2.field || fieldKey(x2.name) === want);
+            if (!f2) throw new ToolError(`${c2.name} has no field "${args2.field}". It has: ${c2.fields.map((x2) => fieldKey(x2.name)).join(", ")}.`);
+            bound[key5] = `item_${fieldKey(f2.name)}`;
+          }
+          updates.set(id3, { boundExpressions: Object.keys(bound).length ? bound : void 0 });
+        }
+        commitUpdates(ctx2, doc2, updates);
+        return { summary: args2.field === null ? `${args2.property} follows no field` : `${args2.property} \u2190 ${args2.field}`, data: { ids: ids2 } };
+      }
+    });
+    recordLabel = (c2, r) => {
+      const f2 = c2.fields.find((x2) => x2.type === "TEXT") ?? c2.fields[0];
+      return String((f2 && r.values[f2.id]) ?? r.id).slice(0, 80);
+    };
   }
 });
 
@@ -395756,6 +395917,8 @@ var init_builtin4 = __esm({
       siteSetRoute,
       nodeSetControl,
       nodeSetRepeat,
+      nodeSetRecord,
+      nodeBindField,
       siteSetEnvironment,
       siteGetEnvironment,
       codeEditModule,
@@ -403062,7 +403225,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.20.3";
+var VERSION2 = "0.21.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popcraft/cli",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "description": "The PopCraft command line: edit .popcraft files headlessly, call the REST API, publish to the marketplace and manage the desktop app's local plugins, themes, fonts, skills and agents.",
   "license": "MIT",
   "homepage": "https://popcraft.app/docs/api/cli",
@@ -34,7 +34,7 @@
     "esbuild": "0.28.2"
   },
   "dependencies": {
-    "@popcraft/kit": "0.20.3"
+    "@popcraft/kit": "0.21.0"
   },
   "scripts": {
     "build": "node build.mjs",