@popcraft/cli 0.13.2 → 0.15.0

package/dist/popcraft.mjs

@@ -32,9 +32,9 @@ var __commonJS = (cb, mod) => function __require2() {
     throw mod = 0, e;
   }
 };
-var __export = (target2, all3) => {
-  for (var name2 in all3)
-    __defProp(target2, name2, { get: all3[name2], enumerable: true });
+var __export = (target2, all4) => {
+  for (var name2 in all4)
+    __defProp(target2, name2, { get: all4[name2], enumerable: true });
 };
 var __copyProps = (to, from2, except, desc2) => {
   if (from2 && typeof from2 === "object" || typeof from2 === "function") {
@@ -456,9 +456,9 @@ var init_groups = __esm({
         label: "Web",
         hint: "Pages and sections at every breakpoint",
         home: ["WEB", "KIT"],
-        types: [t("web", "Pages", "WEB"), t("components", "Components", "WEB")],
+        types: [t("web", "Pages", "WEB"), t("storefront", "Storefronts", "WEB"), t("components", "Components", "WEB")],
         presets: ids((p2) => p2.category === "WEB" && !p2.id.startsWith("lottie-")),
-        keywords: ["website", "landing", "site", "ui kit"]
+        keywords: ["website", "landing", "site", "ui kit", "ecommerce", "shop", "store"]
       },
       {
         id: "app",
@@ -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.13.2"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.15.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -1460,10 +1460,10 @@ function forgetToken(url4) {
   } catch {
     return false;
   }
-  const all3 = readCredentials();
-  if (!(url4 in all3)) return false;
-  delete all3[url4];
-  if (Object.keys(all3).length) writeCredentials(all3);
+  const all4 = readCredentials();
+  if (!(url4 in all4)) return false;
+  delete all4[url4];
+  if (Object.keys(all4).length) writeCredentials(all4);
   else rmSync(credentialsPath(), { force: true });
   return true;
 }
@@ -5928,7 +5928,7 @@ var init_types = __esm({
   "lib/document/types.ts"() {
     "use strict";
     CONTROL_KINDS = ["FORM", "INPUT", "TEXTAREA", "SELECT", "CHECKBOX", "RADIO", "BUTTON"];
-    INPUT_TYPES = ["text", "email", "number", "tel", "url", "search", "date", "password"];
+    INPUT_TYPES = ["text", "email", "number", "tel", "url", "search", "date", "password", "hidden"];
     FIELD_TYPES = ["TEXT", "RICH_TEXT", "NUMBER", "BOOLEAN", "DATE", "COLOR", "MEDIA", "URL", "SLUG", "OPTION"];
     SEMANTIC_TAGS = ["div", "section", "header", "footer", "nav", "main", "aside", "article", "ul", "ol", "li", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "button", "figure", "label"];
     INTERACTION_TRIGGERS = ["ON_CLICK", "ON_HOVER", "ON_PRESS", "ON_DRAG", "MOUSE_ENTER", "MOUSE_LEAVE", "AFTER_TIMEOUT", "KEY_DOWN", "ON_SCROLL"];
@@ -29073,10 +29073,10 @@ function paramsFromFlags(spec, flags) {
       if (!RESERVED.has(name2)) unknown2.push(name2);
       continue;
     }
-    const all3 = Array.isArray(value3) ? value3 : [value3];
-    const last3 = all3[all3.length - 1];
+    const all4 = Array.isArray(value3) ? value3 : [value3];
+    const last3 = all4[all4.length - 1];
     if (f2.type === "array") {
-      const list2 = all3.flatMap((v) => {
+      const list2 = all4.flatMap((v) => {
         if (typeof v === "string" && v.trim().startsWith("[")) {
           try {
             return JSON.parse(v);
@@ -29504,8 +29504,8 @@ function parseNumberSkeleton(tokens) {
         result = {
           ...result,
           notation: "scientific",
-          ...token.options.reduce((all3, opt) => ({
-            ...all3,
+          ...token.options.reduce((all4, opt) => ({
+            ...all4,
             ...parseNotationOptions(opt)
           }), {})
         };
@@ -29514,8 +29514,8 @@ function parseNumberSkeleton(tokens) {
         result = {
           ...result,
           notation: "engineering",
-          ...token.options.reduce((all3, opt) => ({
-            ...all3,
+          ...token.options.reduce((all4, opt) => ({
+            ...all4,
             ...parseNotationOptions(opt)
           }), {})
         };
@@ -31663,11 +31663,11 @@ var init_icu_messageformat_parser = __esm({
 // node_modules/.pnpm/intl-messageformat@12.1.2/node_modules/intl-messageformat/index.js
 function mergeLiteral(parts) {
   if (parts.length < 2) return parts;
-  return parts.reduce((all3, part) => {
-    const lastPart = all3[all3.length - 1];
-    if (!lastPart || lastPart.type !== 0 || part.type !== 0) all3.push(part);
+  return parts.reduce((all4, part) => {
+    const lastPart = all4[all4.length - 1];
+    if (!lastPart || lastPart.type !== 0 || part.type !== 0) all4.push(part);
     else lastPart.value += part.value;
-    return all3;
+    return all4;
   }, []);
 }
 function isFormatXMLElementFn(el) {
@@ -31780,20 +31780,20 @@ function mergeConfig(c1, c2) {
   return {
     ...c1,
     ...c2,
-    ...Object.keys(c1).reduce((all3, k2) => {
-      all3[k2] = {
+    ...Object.keys(c1).reduce((all4, k2) => {
+      all4[k2] = {
         ...c1[k2],
         ...c2[k2]
       };
-      return all3;
+      return all4;
     }, {})
   };
 }
 function mergeConfigs(defaultConfig, configs) {
   if (!configs) return defaultConfig;
-  return Object.keys(defaultConfig).reduce((all3, k2) => {
-    all3[k2] = mergeConfig(defaultConfig[k2], configs[k2]);
-    return all3;
+  return Object.keys(defaultConfig).reduce((all4, k2) => {
+    all4[k2] = mergeConfig(defaultConfig[k2], configs[k2]);
+    return all4;
   }, { ...defaultConfig });
 }
 function createFastMemoizeCache(store6) {
@@ -31868,10 +31868,10 @@ var init_intl_messageformat = __esm({
         this.format = ((values3) => {
           const parts = this.formatToParts(values3);
           if (parts.length === 1) return parts[0].value;
-          const result = parts.reduce((all3, part) => {
-            if (!all3.length || part.type !== 0 || typeof all3[all3.length - 1] !== "string") all3.push(part.value);
-            else all3[all3.length - 1] += part.value;
-            return all3;
+          const result = parts.reduce((all4, part) => {
+            if (!all4.length || part.type !== 0 || typeof all4[all4.length - 1] !== "string") all4.push(part.value);
+            else all4[all4.length - 1] += part.value;
+            return all4;
           }, []);
           if (result.length <= 1) return result[0] || "";
           return result;
@@ -32502,6 +32502,7 @@ var init_en2 = __esm({
       "collections.no": "No",
       "collections.noRecords": "No records yet. Add one, or import a CSV.",
       "collections.noRepeat": "Does not repeat",
+      "collections.offset": "Skip first",
       "collections.onePage": "One page",
       "collections.open": "{count, plural, =0 {Collections} one {Collections (#)} other {Collections (#)}}",
       "collections.ownOrder": "In the collection\u2019s order",
@@ -32510,10 +32511,18 @@ var init_en2 = __esm({
       "collections.perVisitorHint": "On the published site, a signed-in visitor sees and adds only their own records, kept in the site's database. The records here are samples the design is drawn with.",
       "collections.repeat": "Repeat its content for",
       "collections.repeatHint": "{count, plural, one {Shows # record on the page. The canvas shows the first.} other {Shows # records on the page. The canvas shows the first.}}",
+      "collections.schema.commerce.cart": "The cart's totals",
+      "collections.schema.commerce.cartLine": "The cart's lines",
+      "collections.schema.commerce.collection": "Store categories",
+      "collections.schema.commerce.menu": "The store's menu",
+      "collections.schema.commerce.product": "Store products",
       "collections.shared": "They all see each other's",
       "collections.sharedHint": "Every signed-in visitor sees everyone's records, each with who added it. A visitor changes and deletes only their own.",
       "collections.sortBy": "Sort by",
       "collections.sortedBy": "Sorted by {name}",
+      "collections.standsFor": "Stands for",
+      "collections.standsForHint": "What the records are in a storefront: its fields become the store's, and exported as storefront components a list of it is a prop the store fills",
+      "collections.standsForNothing": "Records of your own",
       "collections.title": "Collections",
       "collections.tokenHint": "Type this in a text to say the field",
       "collections.yes": "Yes",
@@ -32542,12 +32551,16 @@ var init_en2 = __esm({
       "command:export.pdf": "Export as PDF",
       "command:export.pngSequence": "Export animation as PNG sequence",
       "command:export.pptx": "Export as PowerPoint (.pptx)",
+      "command:export.storefront": "Export storefront\u2026",
+      "command:export.storefront#next-commerce": "Export storefront as Next.js Commerce components",
+      "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",
@@ -32898,17 +32911,23 @@ var init_en2 = __esm({
       "controlFields.required": "Required",
       "controlFields.reset": "Clears the form",
       "controlFields.sending": "Sending it",
+      "controlFields.sendingAddToCart": "Adds the product to the cart",
       "controlFields.sendingChangePassword": "Changes the visitor's password",
+      "controlFields.sendingCheckout": "Goes to checkout",
       "controlFields.sendingDelete": "Deletes its record",
       "controlFields.sendingDeleteAccount": "Deletes the visitor's account",
       "controlFields.sendingForgotPassword": "Emails a password reset link",
+      "controlFields.sendingRemoveCartLine": "Removes a line from the cart",
       "controlFields.sendingResetPassword": "Sets a new password from a reset link",
       "controlFields.sendingSaves": "Saves what was entered",
+      "controlFields.sendingSearch": "Searches the store",
       "controlFields.sendingSignIn": "Signs the visitor in",
       "controlFields.sendingSignOut": "Signs the visitor out",
       "controlFields.sendingSignUp": "Creates an account",
+      "controlFields.sendingStore": "Storefront",
       "controlFields.sendingUpdate": "Changes its record",
       "controlFields.sendingUpdateAccount": "Changes the visitor's name",
+      "controlFields.sendingUpdateCartLine": "Changes a cart line's quantity",
       "controlFields.stayHere": "Stay on the page",
       "controlFields.submit": "Sends the form",
       "controlFields.turnOn": "Turn on {name}",
@@ -33789,6 +33808,7 @@ 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",
@@ -35680,6 +35700,7 @@ var init_en2 = __esm({
       "taskCluster.starting": "starting\u2026",
       "taskCluster.subagent": "subagent",
       "templateGallery.animated": "Animated",
+      "templateGallery.exportsAsStorefront": "Exports as a storefront: {store}",
       "templateGallery.featured": "Featured",
       "templateGallery.featuredTitle": "Featured by PopCraft: shown first",
       "templateGallery.lottie": "Lottie",
@@ -35738,6 +35759,7 @@ var init_en2 = __esm({
       "templateType:resume": "Resume",
       "templateType:social": "Social",
       "templateType:sticker": "Sticker",
+      "templateType:storefront": "Storefronts",
       "templateType:text-gif": "Text GIF",
       "templateType:web": "Pages",
       "textAnimatorPanel.afterTheFigureK": "After the figure (%, k, +\u2026)",
@@ -92127,6 +92149,39 @@ var init_editability = __esm({
   }
 });
 
+// lib/server/media-types.ts
+function sniffMime(bytes2, fallback2) {
+  if (bytes2[0] === 137 && bytes2[1] === 80) return "image/png";
+  if (bytes2[0] === 255 && bytes2[1] === 216) return "image/jpeg";
+  if (ascii(bytes2, 0, "RIFF") && ascii(bytes2, 8, "WAVE")) return "audio/wav";
+  if (bytes2[0] === 82 && bytes2[1] === 73 && bytes2[8] === 87) return "image/webp";
+  if (ascii(bytes2, 0, "GIF8")) return "image/gif";
+  if (ascii(bytes2, 4, "ftyp")) {
+    const brand = String.fromCharCode(...bytes2.subarray(8, 12));
+    if (brand === "avif" || brand === "avis") return "image/avif";
+    if (brand === "qt  ") return "video/quicktime";
+    return "video/mp4";
+  }
+  if (bytes2[0] === 26 && bytes2[1] === 69 && bytes2[2] === 223 && bytes2[3] === 163) return "video/webm";
+  if (ascii(bytes2, 0, "OggS")) return "audio/ogg";
+  if (ascii(bytes2, 0, "ID3") || bytes2[0] === 255 && (bytes2[1] & 230) === 226) return "audio/mpeg";
+  const head2 = new TextDecoder().decode(bytes2.slice(0, 512)).trimStart().toLowerCase();
+  if (head2.startsWith("<svg") || head2.startsWith("<?xml") && head2.includes("<svg")) return "image/svg+xml";
+  return fallback2;
+}
+var MAX_MEDIA_BYTES, ascii;
+var init_media_types = __esm({
+  "lib/server/media-types.ts"() {
+    "use strict";
+    MAX_MEDIA_BYTES = 100 * 1024 * 1024;
+    ascii = (bytes2, at3, s) => {
+      if (bytes2.length < at3 + s.length) return false;
+      for (let i2 = 0; i2 < s.length; i2++) if (bytes2[at3 + i2] !== s.charCodeAt(i2)) return false;
+      return true;
+    };
+  }
+});
+
 // packages/cli/src/shims/idb-keyval.ts
 import { mkdirSync as mkdirSync2, readFileSync as readFileSync5, readdirSync, rmSync as rmSync2, writeFileSync as writeFileSync2, existsSync as existsSync3 } from "node:fs";
 import { join as join2 } from "node:path";
@@ -92565,7 +92620,8 @@ async function mediaToDataUrl(ref3) {
   const bytes2 = new Uint8Array(await blob.arrayBuffer());
   let bin = "";
   for (let i2 = 0; i2 < bytes2.length; i2 += 32768) bin += String.fromCharCode(...bytes2.subarray(i2, i2 + 32768));
-  return `data:${blob.type || "application/octet-stream"};base64,${btoa(bin)}`;
+  const type = blob.type && blob.type !== "application/octet-stream" ? blob.type : sniffMime(bytes2, "application/octet-stream");
+  return `data:${type};base64,${btoa(bin)}`;
 }
 function mapNodeImageUrls(node2, fn) {
   let out = null;
@@ -92688,6 +92744,7 @@ var key2, peaksKey, objectUrls, sourceKey, remoteResolver, MEDIA_FETCH_TIMEOUT_M
 var init_media_store = __esm({
   "lib/storage/media-store.ts"() {
     "use strict";
+    init_media_types();
     init_idb();
     init_media_hash();
     init_types2();
@@ -96009,8 +96066,8 @@ function setOnsetMarkers(comp, times2) {
   return bare;
 }
 function cutToBeat(comp, opts = {}) {
-  const every2 = Math.max(1, Math.round(opts.every ?? 1)), minScene = Math.max(1, opts.minScene ?? 250);
-  const beats = onsetTimes(comp).filter((_, k2) => k2 % every2 === 0);
+  const every3 = Math.max(1, Math.round(opts.every ?? 1)), minScene = Math.max(1, opts.minScene ?? 250);
+  const beats = onsetTimes(comp).filter((_, k2) => k2 % every3 === 0);
   const cuts = [];
   let out = comp, last3 = -Infinity;
   for (let i2 = 0; i2 + 1 < out.clips.length; i2++) {
@@ -97170,9 +97227,9 @@ function applyActions(sm, values3, actions) {
   return { values: out, fired };
 }
 function nextTransition(sm, run4, fired) {
-  const all3 = sortedValues(sm.transitions);
-  const own2 = all3.filter((t3) => t3.from === run4.state);
-  const any4 = all3.filter((t3) => t3.from === ANY_STATE && t3.to !== run4.state);
+  const all4 = sortedValues(sm.transitions);
+  const own2 = all4.filter((t3) => t3.from === run4.state);
+  const any4 = all4.filter((t3) => t3.from === ANY_STATE && t3.to !== run4.state);
   for (const t3 of [...own2, ...any4]) {
     if (!sm.states[t3.to]) continue;
     if ((t3.guards ?? []).every((g) => guardHolds(sm, g, run4.values, fired))) return t3;
@@ -239981,8 +240038,8 @@ function googleCssUrl(family, italic, weight, withAxes = true, wghtRange = "100.
   return `https://fonts.googleapis.com/css2?family=${fam}:${tags}@${tuple2}&display=swap`;
 }
 function pickWoff2FromCss(css, italic) {
-  const blocks = css.split("@font-face").slice(1).map((b, i2, all3) => {
-    const prev = i2 === 0 ? css.split("@font-face")[0] : all3[i2 - 1];
+  const blocks = css.split("@font-face").slice(1).map((b, i2, all4) => {
+    const prev = i2 === 0 ? css.split("@font-face")[0] : all4[i2 - 1];
     const subset = /\/\*\s*([\w-]+)\s*\*\/\s*$/.exec(prev)?.[1] ?? "";
     return { body: b, subset };
   });
@@ -248378,11 +248435,11 @@ function createPixelSlice(set4, get4) {
       const n = l?.parentId ? node2(l.parentId) : null;
       if (!l || !n) return;
       const fid = n.frames[clampFrame(n, frameIndex)].id;
-      const all3 = n.frames.map((f2) => f2.id);
-      const ids2 = frameIdsOf(l) ?? all3;
+      const all4 = n.frames.map((f2) => f2.id);
+      const ids2 = frameIdsOf(l) ?? all4;
       let next2 = ids2.includes(fid) ? ids2.filter((x2) => x2 !== fid) : [...ids2, fid];
-      next2 = all3.filter((x2) => next2.includes(x2));
-      commitDoc(updateNode(doc2, layerId2, { pixelFrameIds: next2.length === all3.length ? void 0 : next2 }), "Layer frames");
+      next2 = all4.filter((x2) => next2.includes(x2));
+      commitDoc(updateNode(doc2, layerId2, { pixelFrameIds: next2.length === all4.length ? void 0 : next2 }), "Layer frames");
     },
     /** Show a layer in every frame. */
     pixelShowLayerInAllFrames: (layerId2) => {
@@ -248444,9 +248501,9 @@ function createPixelSlice(set4, get4) {
       const count2 = n.pixelWidth * n.pixelHeight;
       let palette2 = n.palette;
       if (mode === "INDEXED" && palette2.length < 2) {
-        const all3 = new Uint32Array(count2 * n.frames.length);
-        n.frames.forEach((_, i2) => all3.set(frameRGBA(n, i2), i2 * count2));
-        palette2 = extractPalette(all3, 256).map(packedToHex);
+        const all4 = new Uint32Array(count2 * n.frames.length);
+        n.frames.forEach((_, i2) => all4.set(frameRGBA(n, i2), i2 * count2));
+        palette2 = extractPalette(all4, 256).map(packedToHex);
       }
       const conv = (b64, cellCount) => encodeCels(convertCels(decodeCels(b64, cellCount), n.colorMode, mode, n.palette, palette2, n.transparentIndex));
       const patch = { colorMode: mode, palette: palette2 };
@@ -250007,6 +250064,7 @@ __export(apply_exports2, {
   insertFragment: () => insertFragment,
   insertRootGroups: () => insertRootGroups,
   insertRoots: () => insertRoots,
+  ownBox: () => ownBox,
   variantOf: () => variantOf
 });
 function freshIdMap(t3) {
@@ -250076,10 +250134,10 @@ function insertRoots(doc2, t3, rootIds, parentId, ox, oy) {
 }
 function insertRootGroups(doc2, t3, groups, parentId) {
   const map2 = freshIdMap(t3);
-  const all3 = groups.flatMap((g) => g.rootIds);
-  let document2 = mergeLibraryNodes(mergeRecords(doc2, t3, map2, new Set(all3)), t3);
+  const all4 = groups.flatMap((g) => g.rootIds);
+  let document2 = mergeLibraryNodes(mergeRecords(doc2, t3, map2, new Set(all4)), t3);
   for (const g of groups) for (const rid of g.rootIds) document2 = addTree(document2, t3, map2, rid, parentId, g.ox, g.oy);
-  return { document: document2, rootIds: all3.map((r) => map2.get(r)) };
+  return { document: document2, rootIds: all4.map((r) => map2.get(r)) };
 }
 function documentFromTemplate(t3, name2 = t3.meta.name, sizeId) {
   const chosen = variantOf(t3, sizeId);
@@ -250111,7 +250169,7 @@ function documentFromTemplate(t3, name2 = t3.meta.name, sizeId) {
   });
   return document2;
 }
-var variantOf;
+var variantOf, ownBox;
 var init_apply2 = __esm({
   "lib/templates/apply.ts"() {
     "use strict";
@@ -250121,6 +250179,7 @@ var init_apply2 = __esm({
     init_page_presets();
     init_print_pages();
     variantOf = (t3, sizeId) => sizeId && t3.payload.variants.find((v) => v.sizeId === sizeId) || t3.payload.variants[0];
+    ownBox = (t3, root2) => t3.meta.kind === "PRESENTATION" || t3.meta.kind === "WEB" && root2.height > root2.width * 1.5;
   }
 });
 
@@ -251022,39 +251081,6 @@ var init_collapse_duplicates = __esm({
   }
 });
 
-// lib/server/media-types.ts
-function sniffMime(bytes2, fallback2) {
-  if (bytes2[0] === 137 && bytes2[1] === 80) return "image/png";
-  if (bytes2[0] === 255 && bytes2[1] === 216) return "image/jpeg";
-  if (ascii(bytes2, 0, "RIFF") && ascii(bytes2, 8, "WAVE")) return "audio/wav";
-  if (bytes2[0] === 82 && bytes2[1] === 73 && bytes2[8] === 87) return "image/webp";
-  if (ascii(bytes2, 0, "GIF8")) return "image/gif";
-  if (ascii(bytes2, 4, "ftyp")) {
-    const brand = String.fromCharCode(...bytes2.subarray(8, 12));
-    if (brand === "avif" || brand === "avis") return "image/avif";
-    if (brand === "qt  ") return "video/quicktime";
-    return "video/mp4";
-  }
-  if (bytes2[0] === 26 && bytes2[1] === 69 && bytes2[2] === 223 && bytes2[3] === 163) return "video/webm";
-  if (ascii(bytes2, 0, "OggS")) return "audio/ogg";
-  if (ascii(bytes2, 0, "ID3") || bytes2[0] === 255 && (bytes2[1] & 230) === 226) return "audio/mpeg";
-  const head2 = new TextDecoder().decode(bytes2.slice(0, 512)).trimStart().toLowerCase();
-  if (head2.startsWith("<svg") || head2.startsWith("<?xml") && head2.includes("<svg")) return "image/svg+xml";
-  return fallback2;
-}
-var MAX_MEDIA_BYTES, ascii;
-var init_media_types = __esm({
-  "lib/server/media-types.ts"() {
-    "use strict";
-    MAX_MEDIA_BYTES = 100 * 1024 * 1024;
-    ascii = (bytes2, at3, s) => {
-      if (bytes2.length < at3 + s.length) return false;
-      for (let i2 = 0; i2 < s.length; i2++) if (bytes2[at3 + i2] !== s.charCodeAt(i2)) return false;
-      return true;
-    };
-  }
-});
-
 // lib/storage/document-library.ts
 var document_library_exports = {};
 __export(document_library_exports, {
@@ -251595,7 +251621,7 @@ function editCounter(node2, patch) {
   let motion = node2.motion;
   const track2 = motion?.tracks[COUNTER_PATH];
   if (track2?.keys.length && (patch.from !== void 0 || patch.to !== void 0)) {
-    const keys4 = track2.keys.map((k2, i2, all3) => i2 === 0 && patch.from !== void 0 ? { ...k2, v: next2.from } : i2 === all3.length - 1 && patch.to !== void 0 ? { ...k2, v: next2.to } : k2);
+    const keys4 = track2.keys.map((k2, i2, all4) => i2 === 0 && patch.from !== void 0 ? { ...k2, v: next2.from } : i2 === all4.length - 1 && patch.to !== void 0 ? { ...k2, v: next2.to } : k2);
     motion = withTrack(motion, COUNTER_PATH, { ...track2, keys: keys4 });
   }
   return { ...withCounter(node2, next2), motion };
@@ -254192,10 +254218,12 @@ function createMotionSlice(set4, get4) {
     transport: DEFAULT_TRANSPORT,
     motionGesture: null,
     keySelection: [],
-    setMotionTarget: (target2) => {
+    setMotionTarget: (target2, at3 = "start") => {
       const tr = get4().transport;
       if (sameTarget(tr.target, target2)) return;
-      set4({ transport: { ...tr, target: target2, time: 0, playing: false, playAnchor: null, fps: fpsOf(target2, tr.fps) }, keySelection: [] });
+      const fid = at3 === "end" ? targetFrameId(target2) : null;
+      const time4 = fid ? Math.max(0, timelineDuration(get4().document.nodes, fid) - 1) : 0;
+      set4({ transport: { ...tr, target: target2, time: time4, playing: false, playAnchor: null, fps: fpsOf(target2, tr.fps) }, keySelection: [] });
     },
     editComposition: (id3, fn, description) => {
       const s = get4();
@@ -254467,9 +254495,9 @@ function breakpointsOf(doc2) {
   return [base, ...rest];
 }
 function chain2(doc2, id3) {
-  const all3 = breakpointsOf(doc2);
-  const at3 = all3.findIndex((b) => b.id === id3);
-  return at3 > 0 ? all3.slice(1, at3 + 1) : [];
+  const all4 = breakpointsOf(doc2);
+  const at3 = all4.findIndex((b) => b.id === id3);
+  return at3 > 0 ? all4.slice(1, at3 + 1) : [];
 }
 function overridesAt(node2, doc2, id3) {
   if (!node2.responsive) return null;
@@ -254741,6 +254769,35 @@ 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 [];
@@ -255998,6 +256055,7 @@ function activeTeamWorkspaceId() {
 var STORAGE_KEY2, useHyperyTeam, useTeamPrompt;
 var init_team = __esm({
   "lib/client/cloud/team.ts"() {
+    "use strict";
     init_esm();
     init_api4();
     init_session();
@@ -265427,12 +265485,12 @@ var init_client = __esm({
 
 // lib/collab/private.ts
 function privateNodeIds(nodes, userId) {
-  const all3 = allPrivateIds(nodes);
-  if (!userId) return all3;
+  const all4 = allPrivateIds(nodes);
+  if (!userId) return all4;
   if (nodes === privateIdsFor && userId === privateIdsOwner) return privateIdsCache;
   privateIdsFor = nodes;
   privateIdsOwner = userId;
-  privateIdsCache = all3.filter((id3) => nodes[id3].privateTo === userId);
+  privateIdsCache = all4.filter((id3) => nodes[id3].privateTo === userId);
   return privateIdsCache;
 }
 function withoutPrivate(doc2) {
@@ -266147,7 +266205,7 @@ var init_vocabulary = __esm({
     TEMPLATE_CATEGORIES = Object.fromEntries(
       ["SOCIAL", "PRESENTATION", "WEB", "APP", "EMAIL", "BOARD", "CANVAS", "PRINT"].map((kind) => [kind, typesForKind(kind).map((t3) => t3.id)])
     );
-    FACET_KEYS = ["animated", "durationMs", "fps", "platforms", "formats", "useCases", "lottie", "threeD", "featured", "pinned"];
+    FACET_KEYS = ["animated", "durationMs", "fps", "platforms", "formats", "useCases", "lottie", "threeD", "storefronts", "featured", "pinned"];
   }
 });
 
@@ -266213,9 +266271,9 @@ var require_gifenc = __commonJS({
   "node_modules/.pnpm/gifenc@1.0.3/node_modules/gifenc/dist/gifenc.js"(exports) {
     var __defProp2 = Object.defineProperty;
     var __markAsModule = (target2) => __defProp2(target2, "__esModule", { value: true });
-    var __export2 = (target2, all3) => {
-      for (var name2 in all3)
-        __defProp2(target2, name2, { get: all3[name2], enumerable: true });
+    var __export2 = (target2, all4) => {
+      for (var name2 in all4)
+        __defProp2(target2, name2, { get: all4[name2], enumerable: true });
     };
     __markAsModule(exports);
     __export2(exports, {
@@ -290428,7 +290486,7 @@ var init_input_track = __esm({
         sortBy: queryA?.sortBy || queryB?.sortBy ? (track2) => {
           const resultA = queryA?.sortBy?.(track2) ?? [];
           const resultB = queryB?.sortBy?.(track2) ?? [];
-          const join12 = (resultA2, resultB2) => {
+          const join13 = (resultA2, resultB2) => {
             return [
               ...Array.isArray(resultA2) ? resultA2 : [resultA2],
               ...Array.isArray(resultB2) ? resultB2 : [resultB2]
@@ -290436,10 +290494,10 @@ var init_input_track = __esm({
           };
           if (isThenable(resultA) || isThenable(resultB)) {
             return Promise.all([resultA, resultB]).then(([resultA2, resultB2]) => {
-              return join12(resultA2, resultB2);
+              return join13(resultA2, resultB2);
             });
           } else {
-            return join12(resultA, resultB);
+            return join13(resultA, resultB);
           }
         } : void 0
       };
@@ -303263,7 +303321,7 @@ function thumbnailRegion(t3, sizeId) {
   const sheets = v.rootIds.filter((id3) => !nodes[id3]?.print?.isMaster);
   const root2 = nodes[sheets[0] ?? v.rootIds[0]];
   const x2 = root2?.x ?? 0, y = root2?.y ?? 0;
-  const box2 = t3.meta.kind === "PRESENTATION" && root2 ? { width: root2.width, height: root2.height } : { width: v.width, height: v.height };
+  const box2 = root2 && ownBox(t3, root2) ? { width: root2.width, height: root2.height } : { width: v.width, height: v.height };
   return { minX: x2, minY: y, maxX: x2 + box2.width, maxY: y + box2.height };
 }
 function flattenOnWhite(px5) {
@@ -304583,7 +304641,6 @@ function downloadBlob(blob, filename) {
 }
 var init_download = __esm({
   "lib/io/download.ts"() {
-    "use strict";
   }
 });
 
@@ -304801,7 +304858,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;
@@ -307476,8 +307532,8 @@ function lineItems(node2, ctx2, acc) {
   const items = [];
   if (visual) {
     const cmds = visual.map((p2, i2) => ({ op: i2 ? "L" : "M", x: p2.x, y: p2.y }));
-    const all3 = (strokes.length ? strokes : [stroke3]).map(toIRStroke).filter((s) => !!s);
-    items.push({ t: "path", cmds, fillRule: "nonzero", fills: [], strokes: [...all3].reverse() });
+    const all4 = (strokes.length ? strokes : [stroke3]).map(toIRStroke).filter((s) => !!s);
+    items.push({ t: "path", cmds, fillRule: "nonzero", fills: [], strokes: [...all4].reverse() });
   }
   const headAlpha = strokeAlpha(stroke3);
   const head2 = (type, tip, angle2) => {
@@ -309814,6 +309870,7 @@ async function exportSettingFile(renderer, node2, setting, doc2, styles) {
 var MIME, DEFAULT_EXPORT, exportSettingsOf;
 var init_export = __esm({
   "lib/io/export.ts"() {
+    "use strict";
     init_download();
     init_scene_graph();
     init_codecs();
@@ -309905,6 +309962,7 @@ 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();
@@ -314584,6 +314642,27 @@ var init_vector = __esm({
   }
 });
 
+// lib/io/web/project/storefront-targets.ts
+var STOREFRONT_TARGET_INFO, STOREFRONT_TARGET_IDS;
+var init_storefront_targets = __esm({
+  "lib/io/web/project/storefront-targets.ts"() {
+    "use strict";
+    STOREFRONT_TARGET_INFO = {
+      "next-commerce": {
+        label: "Next.js Commerce components",
+        short: "Next.js Commerce",
+        description: "React components a Next.js Commerce store renders with its own Shopify data and server actions."
+      },
+      "shopify-theme": {
+        label: "Shopify theme",
+        short: "Shopify",
+        description: "An Online Store 2.0 theme to upload in Shopify: Online Store \u203A Themes \u203A Add theme \u203A Upload zip file."
+      }
+    };
+    STOREFRONT_TARGET_IDS = Object.keys(STOREFRONT_TARGET_INFO);
+  }
+});
+
 // lib/motion/video-edit.ts
 function clipOr(doc2, id3, frameId) {
   const c2 = videoClipOf(doc2.nodes, id3, frameId, timelineDuration(doc2.nodes, frameId));
@@ -314818,8 +314897,8 @@ function splitAudioClip(holder, clipId, at3) {
   return { holder: withAudio(made.composition, placeAudio(placeAudio(others, left), right)), id: made.id };
 }
 function crossfadeAudio(holder, aId, bId, ms2, sourceMs) {
-  const all3 = holder.audio ?? [];
-  let a = all3.find((c2) => c2.id === aId), b = all3.find((c2) => c2.id === bId);
+  const all4 = holder.audio ?? [];
+  let a = all4.find((c2) => c2.id === aId), b = all4.find((c2) => c2.id === bId);
   if (!a || !b || a.id === b.id) throw new Error("Pick two different audio clips to crossfade.");
   if (b.start < a.start) [a, b] = [b, a];
   const d = Math.max(1, Math.round(ms2));
@@ -315670,17 +315749,17 @@ function exactKeys(src, grid, samples, present2) {
     }
     const b = keys4[j + 1];
     const eases = moving.map((d) => cpOf(d, j));
-    const all3 = (kind) => eases.every((e) => e.kind === kind);
+    const all4 = (kind) => eases.every((e) => e.kind === kind);
     const cps = (sel) => src.dims.map((s, d) => s ? sel(eases[moving.indexOf(d)]) : LINEAR_CP);
-    if (all3("hold")) {
+    if (all4("hold")) {
       push2(a.t, keyValue(j), "hold");
       continue;
     }
-    if (all3("curve")) {
+    if (all4("curve")) {
       push2(a.t, keyValue(j), cps((e) => e.kind === "curve" ? e.cp : LINEAR_CP));
       continue;
     }
-    if (all3("halves")) {
+    if (all4("halves")) {
       const va = keyValue(j), vb = keyValue(j + 1);
       push2(a.t, va, cps((e) => e.kind === "halves" ? e.first : LINEAR_CP));
       push2((a.t + b.t) / 2, va.map((v, d) => (v + vb[d]) / 2), cps((e) => e.kind === "halves" ? e.second : LINEAR_CP));
@@ -315869,12 +315948,12 @@ function uniqueName(name2, taken) {
 function lottieMarkers(timeline, range3) {
   const markers = [];
   const names = /* @__PURE__ */ new Map();
-  const all3 = [...timeline?.markers ?? []].sort((a, b) => a.t - b.t);
+  const all4 = [...timeline?.markers ?? []].sort((a, b) => a.t - b.t);
   const taken = /* @__PURE__ */ new Set();
   const frames = (ms2) => (ms2 - range3.start) * range3.fps / 1e3;
-  all3.forEach((m, i2) => {
+  all4.forEach((m, i2) => {
     if (m.t < range3.start || m.t > range3.end) return;
-    const next2 = all3.find((n) => n.t > m.t && n.kind !== "pause")?.t ?? range3.end;
+    const next2 = all4.find((n) => n.t > m.t && n.kind !== "pause")?.t ?? range3.end;
     const cm = uniqueName(m.label || `Marker ${i2 + 1}`, taken);
     names.set(m.id, cm);
     markers.push({ tm: frames(m.t), cm, dr: Math.max(0, frames(Math.min(next2, range3.end)) - frames(m.t)) });
@@ -317976,7 +318055,8 @@ var init_naming = __esm({
     "use strict";
     classNameFor = (node2) => {
       const base = (node2.name || node2.type).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "node";
-      return `${base}-${node2.id.replace(/[^a-zA-Z0-9]/g, "").slice(-6)}`;
+      const id3 = node2.id.includes("~__pcitem__") ? node2.id.split("~")[0] : node2.id;
+      return `${base}-${id3.replace(/[^a-zA-Z0-9]/g, "").slice(-6)}`;
     };
     componentName = (name2) => (name2.replace(/[^a-zA-Z0-9]/g, "") || "Node").replace(/^[0-9]/, "N$&");
     fileBase = (name2) => (name2 || "export").replace(/[^a-zA-Z0-9-_]+/g, "-").replace(/^-|-$/g, "") || "export";
@@ -317989,11 +318069,11 @@ function codeSyntaxFor(v, 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 camel3 = parts.map((p2, i2) => {
+  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.${camel3}` : `Tokens.${camel3}`;
+  return platform4 === "iOS" ? `Tokens.${camel4}` : `Tokens.${camel4}`;
 }
 var init_dev_mode = __esm({
   "lib/document/dev-mode.ts"() {
@@ -318130,10 +318210,12 @@ function serializeHTML(tree, opts = {}) {
       }
     } else {
       const cls = classNameFor(node2);
+      const own2 = Object.fromEntries(Object.entries(style).filter(([, v]) => v.includes("{{")));
+      const shared = Object.fromEntries(Object.entries(style).filter(([, v]) => !v.includes("{{")));
       rules.push(`.${cls} {
-${styleMapToCSSText(style, "  ")}
+${styleMapToCSSText(shared, "  ")}
 }`);
-      attrs = ` class="${cls}"`;
+      attrs = ` class="${cls}"${Object.keys(own2).length ? ` style="${styleMapToInline(own2)}"` : ""}`;
       if (el.keyframes) {
         if (!keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
         attrs += " data-motion-child";
@@ -318143,7 +318225,8 @@ ${styleMapToCSSText(style, "  ")}
         triggered = true;
       }
     }
-    for (const [k2, v] of Object.entries(el.attrs)) attrs += ` ${k2}="${escapeHTML(v)}"`;
+    const sends = node2.action ? opts.form?.(node2) : null;
+    for (const [k2, v] of Object.entries({ ...el.attrs, ...sends?.attrs })) attrs += ` ${k2}="${escapeHTML(v)}"`;
     attrs += imageRoleAttrs(node2);
     if (opts.ids) attrs += ` data-pc-id="${escapeHTML(node2.id)}"`;
     if (machine && isRoot) attrs += ' data-sm-root=""';
@@ -318158,17 +318241,30 @@ ${indent}` : escapeHTML(el.input.value ?? "");
     const check2 = el.check ? `
 ${indent}  <input${Object.entries(el.check.attrs).map(([k2, v]) => ` ${k2}="${escapeHTML(v)}"`).join("")} style="${CHECK_STYLE}" />` : "";
     if (el.html !== void 0) return `${indent}<${tag}${attrs}>${el.html}</${tag}>`;
+    const words = el.runs ? el.runs.map(runMarkup).join("") : el.text !== void 0 ? escapeHTML(el.text) : null;
+    if (words !== null && !el.picture && !node2.children.length && !node2.repeat && !check2 && !sends?.fields) return `${indent}<${tag}${attrs}>${words}</${tag}>`;
     const inner = [
       el.runs ? `
 ${indent}  ${el.runs.map(runMarkup).join("")}` : el.text !== void 0 ? `
 ${indent}  ${escapeHTML(el.text)}` : "",
       pictureMarkup(node2, el.picture, indent),
-      ...node2.children.map((c2) => `
-${emit8(c2, depth2 + 1, false)}`),
+      ...sends?.fields ? [`
+${indent}  ${sends.fields}`] : [],
+      ...listed(node2, depth2),
       check2
     ].join("");
     return inner ? `${indent}<${tag}${attrs}>${inner}
 ${indent}</${tag}>` : `${indent}<${tag}${attrs}></${tag}>`;
+  };
+  const listed = (node2, depth2) => {
+    const loop = node2.repeat && opts.lists?.(node2);
+    if (!loop || !node2.repeat) return node2.children.map((c2) => `
+${emit8(c2, depth2 + 1, false)}`);
+    const indent = "  ".repeat(depth2 + 1);
+    return [`
+${indent}${loop.open}`, ...node2.repeat.template.map((c2) => `
+${emit8(c2, depth2 + 2, false)}`), `
+${indent}${loop.close}`];
   };
   const body = emit8(tree.root, opts.document ? 2 : 0, true);
   const fonts = opts.document ? fontsHref(tree) : null;
@@ -318398,6 +318494,7 @@ var init_tailwind = __esm({
 // lib/io/web/react.ts
 function serializeReact(tree, opts = {}) {
   const tailwind = opts.styling === "tailwind";
+  const reader = opts.itemReader ?? "itemWords";
   const spec = interactiveSpec(tree);
   const machine = tree.stateMachine ?? null;
   const listened = machineLayers(machine);
@@ -318434,10 +318531,10 @@ ${pad}</>`;
     const fonted = opts.fontFamily && el.style["font-family"] ? { ...el.style, "font-family": opts.fontFamily(el.style["font-family"]) } : el.style;
     const style = node2.hidden && !bound?.visible && !el.pc ? { ...fonted, display: "none" } : fonted;
     if (el.keyframes && !keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
-    let attrs = tailwind && !el.pc ? ` className="${tailwindFor(style)}"` : ` style={{ ${[...styleMapToJSX(style).filter(([p2]) => !bound?.style[p2]).map(([p2, v]) => `${JSON.stringify(p2).replace(/^"([A-Za-z_$][\w$]*)"$/, "$1")}: '${v}'`), ...Object.entries(bound?.style ?? {}).map(([p2, e]) => `${p2}: ${e}`)].join(", ")} }${Object.keys(style).some((k2) => k2.startsWith("--")) ? " as CSSProperties" : ""}}`;
-    if (isRoot && (spec || machine || triggeredIn(node2))) attrs = ` ref={root}${attrs}`;
     const inItem = node2.id.includes(`~${ITEM_RECORD}`);
-    for (const [k2, v] of Object.entries(el.attrs)) attrs += inItem ? itemAttr(k2, v) : jsxAttr(k2, v);
+    let attrs = tailwind && !el.pc ? ` className="${tailwindFor(style)}"` : ` style={{ ${[...styleMapToJSX(style).filter(([p2]) => !bound?.style[p2]).map(([p2, v]) => `${JSON.stringify(p2).replace(/^"([A-Za-z_$][\w$]*)"$/, "$1")}: ${inItem ? itemStyle(v, reader) : `'${v}'`}`), ...Object.entries(bound?.style ?? {}).map(([p2, e]) => `${p2}: ${e}`)].join(", ")} }${Object.keys(style).some((k2) => k2.startsWith("--")) ? " as CSSProperties" : ""}}`;
+    if (isRoot && (spec || machine || triggeredIn(node2))) attrs = ` ref={root}${attrs}`;
+    for (const [k2, v] of Object.entries(el.attrs)) attrs += inItem ? itemAttr(k2, v, reader) : jsxAttr(k2, v);
     if (opts.ids) attrs += inItem ? ` data-pc-id={${JSON.stringify(node2.id.split(`~${ITEM_RECORD}`)[0] + "~")} + item.id${node2.id.split(`~${ITEM_RECORD}`)[1] ? ` + ${JSON.stringify(node2.id.split(`~${ITEM_RECORD}`)[1])}` : ""}}` : ` data-pc-id=${JSON.stringify(node2.id)}`;
     const host = node2.id.includes("::") ? layerId(node2.id).split("::")[0] : void 0;
     const changeTo = (id3, target2) => {
@@ -318447,6 +318544,8 @@ ${pad}</>`;
     const handlers = opts.behaviour?.events(node2.id, { variant: chosen && layerId(node2.id) === chosen.instance ? node2.variant : void 0, changeTo }) ?? {};
     for (const [event, handler] of Object.entries(handlers)) attrs += ` ${event}={${inItem ? handler.split(ITEM_ID).join("item.id") : handler}}`;
     if (handlers.onClick && !NATIVELY_INTERACTIVE.has(tag)) attrs += ` role="button" tabIndex={0} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.currentTarget.click() } }}`;
+    const sends = node2.action ? opts.formAction?.(node2) : null;
+    if (sends) attrs += ` action={${sends}}`;
     if (el.keyframes) attrs += ' data-motion-child=""';
     if (el.motionTrigger) {
       attrs += ` data-motion="${el.motionTrigger}"`;
@@ -318455,7 +318554,7 @@ ${pad}</>`;
     if (el.pc) attrs += ` data-pc="${el.pc.uid}" data-layer=${JSON.stringify(el.pc.layer)}`;
     if (el.sm) attrs += ` data-sm=${JSON.stringify(el.sm)}`;
     if (el.input?.tag === "input") return `${pad}<input${attrs} />`;
-    const fieldValue = (v) => inItem ? itemAttr("value", v) : ` defaultValue=${JSON.stringify(v)}`;
+    const fieldValue = (v) => inItem ? itemAttr("value", v, reader) : ` defaultValue=${JSON.stringify(v)}`;
     if (el.input?.tag === "textarea") return `${pad}<textarea${attrs}${el.input.value ? fieldValue(el.input.value) : ""} />`;
     if (el.input) return `${pad}<select${attrs}${el.input.value ? fieldValue(el.input.value) : ""}>
 ${(el.input.options ?? []).map((o) => `${pad}  <option value=${JSON.stringify(o.value)}>${jsxText(o.label)}</option>`).join("\n")}
@@ -318466,14 +318565,15 @@ ${pad}</select>`;
     if (drawn2) inner.push(`${pad}  ${drawn2}`);
     if (el.runs) inner.push(...el.runs.map((run4) => {
       const style2 = Object.keys(run4.style).length ? ` style={{ ${styleMapToJSX(run4.style).map(([p2, v]) => `${p2}: '${v}'`).join(", ")} }}` : "";
-      const words = inItem ? itemJsx(run4.text) : jsxText(run4.text);
+      const words = inItem ? itemJsx(run4.text, reader) : jsxText(run4.text);
       if (run4.link) return `${pad}  <a href=${JSON.stringify(run4.link)}${style2}>${words}</a>`;
       return style2 ? `${pad}  <span${style2}>${words}</span>` : `${pad}  ${words}`;
     }));
     else if (bound?.text) inner.push(`${pad}  {${bound.text}}`);
-    else if (el.text !== void 0) inner.push(`${pad}  ${inItem ? itemJsx(el.text) : jsxText(el.text)}`);
+    else if (el.text !== void 0) inner.push(`${pad}  ${inItem ? itemJsx(el.text, reader) : jsxText(el.text)}`);
     const picture2 = el.picture;
     if (picture2?.kind === "svg") inner.push(`${pad}  <span dangerouslySetInnerHTML={{ __html: ${JSON.stringify(labelSVG(picture2.svg, node2))} }} />`);
+    else if (picture2?.kind === "img" && inItem && itemMarks(picture2.src)) inner.push(`${pad}  <img${itemAttr("src", picture2.src, reader)} width={${Math.round(node2.width)}} height={${Math.round(node2.height)}} alt=${JSON.stringify(altFor(node2))} style={{ objectFit: 'cover' }} />`);
     else if (picture2?.kind === "img") inner.push(`${pad}  ${opts.image ? opts.image({ src: picture2.src, width: node2.width, height: node2.height, alt: altFor(node2) }) : `<img src="${picture2.src}" width={${node2.width}} height={${node2.height}} alt=${JSON.stringify(altFor(node2))} />`}`);
     else if (picture2) inner.push(`${pad}  {/* ${picture2.reason}: render this node to ${picture2.format.toUpperCase()} */}`);
     const live2 = node2.island ? opts.island?.(node2) : null;
@@ -318511,7 +318611,7 @@ ${drawn}
   const live = !!spec || !!machine || triggered;
   const prelude = [...opts.prelude ?? [], ...states].map((l) => `  ${l}
 `).join("");
-  if (!live && !keyframes.length && !body.includes(" as CSSProperties}")) return `export function ${name2}() {
+  if (!live && !keyframes.length && !body.includes(" as CSSProperties}")) return `export function ${name2}(${opts.props ?? ""}) {
 ${prelude}  return (
 ${body}
   )
@@ -318544,7 +318644,7 @@ ${body}
     "    return () => { io.disconnect(); el.removeEventListener('click', click); el.removeEventListener('mouseover', hover) }",
     "  }, [])"
   );
-  return `${head2.join("\n")}export function ${name2}() {
+  return `${head2.join("\n")}export function ${name2}(${opts.props ?? ""}) {
 ${prelude}${effects.join("\n")}${effects.length ? "\n" : ""}  return (
 ${body}
   )
@@ -318555,7 +318655,7 @@ function elementType(node2) {
   const known = { div: "HTMLDivElement", section: "HTMLElement", main: "HTMLElement", header: "HTMLElement", footer: "HTMLElement", nav: "HTMLElement", article: "HTMLElement", aside: "HTMLElement", form: "HTMLFormElement", a: "HTMLAnchorElement", button: "HTMLButtonElement", ul: "HTMLUListElement", li: "HTMLLIElement" };
   return known[tag] ?? "HTMLElement";
 }
-var jsxText, template, JSX_ATTR, NATIVELY_INTERACTIVE, BOOLEAN_ATTR, jsxAttr, itemJsx, itemAttr, ITEM_ID;
+var jsxText, template, JSX_ATTR, NATIVELY_INTERACTIVE, BOOLEAN_ATTR, jsxAttr, itemJsx, itemAttr, itemStyle, ITEM_ID;
 var init_react2 = __esm({
   "lib/io/web/react.ts"() {
     "use strict";
@@ -318574,33 +318674,173 @@ var init_react2 = __esm({
     NATIVELY_INTERACTIVE = /* @__PURE__ */ new Set(["a", "button", "input", "select", "textarea", "summary", "label"]);
     BOOLEAN_ATTR = /* @__PURE__ */ new Set(["required", "checked", "disabled", "multiple", "readonly", "autofocus", "novalidate", "selected", "hidden", "open"]);
     jsxAttr = (k2, v) => BOOLEAN_ATTR.has(k2) ? v === "false" ? "" : ` ${JSX_ATTR[k2] ?? k2}` : ` ${JSX_ATTR[k2] ?? k2}=${JSON.stringify(v)}`;
-    itemJsx = (s) => {
+    itemJsx = (s, reader = "itemWords") => {
       const parts = itemMarks(s);
       if (!parts) return jsxText(s);
-      return `{${parts.map((p2) => typeof p2 === "string" ? JSON.stringify(p2) : `itemWords(item, ${JSON.stringify(p2.key)})`).join(" + ")}}`;
+      return `{${parts.map((p2) => typeof p2 === "string" ? JSON.stringify(p2) : `${reader}(item, ${JSON.stringify(p2.key)})`).join(" + ")}}`;
     };
-    itemAttr = (k2, v) => {
+    itemAttr = (k2, v, reader = "itemWords") => {
       const parts = itemMarks(v);
       if (!parts || BOOLEAN_ATTR.has(k2)) return jsxAttr(k2, v);
-      return ` ${JSX_ATTR[k2] ?? k2}={${parts.map((p2) => typeof p2 === "string" ? JSON.stringify(p2) : `itemWords(item, ${JSON.stringify(p2.key)})`).join(" + ")}}`;
+      return ` ${JSX_ATTR[k2] ?? k2}={${parts.map((p2) => typeof p2 === "string" ? JSON.stringify(p2) : `${reader}(item, ${JSON.stringify(p2.key)})`).join(" + ")}}`;
+    };
+    itemStyle = (v, reader) => {
+      const parts = itemMarks(v);
+      if (!parts) return `'${v}'`;
+      return parts.map((p2) => typeof p2 === "string" ? JSON.stringify(p2.replace(/\\'/g, "'")) : `${reader}(item, ${JSON.stringify(p2.key)})`).join(" + ");
     };
     ITEM_ID = JSON.stringify(ITEM_RECORD);
   }
 });
 
+// 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;
   if (Object.values(doc2.variables ?? {}).some((v) => v.name.startsWith("user/"))) return true;
   return Object.values(doc2.nodes).some((n) => {
     const o = n;
-    return !!o.route?.access || !!o.control?.formAction && o.control.formAction !== "deleteRecord" && o.control.formAction !== "updateRecord";
+    return !!o.route?.access || !!o.control?.formAction && o.control.formAction !== "deleteRecord" && o.control.formAction !== "updateRecord" && !isCommerceAction(o.control.formAction);
   });
 }
 var init_auth = __esm({
   "lib/sites/auth.ts"() {
     "use strict";
     init_contract();
+    init_commerce();
   }
 });
 
@@ -319282,7 +319522,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.13.2",
+      version: "0.15.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",
@@ -319298,6 +319538,10 @@ var init_package = __esm({
           types: "./dist/index.d.ts",
           import: "./dist/index.js"
         },
+        "./commerce": {
+          types: "./dist/commerce.d.ts",
+          import: "./dist/commerce.js"
+        },
         "./server": {
           types: "./dist/server/index.d.ts",
           import: "./dist/server.js"
@@ -319877,10 +320121,11 @@ function cleanPath(raw) {
 function routesOf(screens) {
   const taken = /* @__PURE__ */ new Set();
   const own2 = /* @__PURE__ */ new Map();
+  const claim2 = (s, path) => s.route?.collectionId ? `${path}/*` : path;
   for (const s of screens) {
     const path = s.route?.path ? cleanPath(s.route.path) : null;
-    if (path && !taken.has(path)) {
-      taken.add(path);
+    if (path && !taken.has(claim2(s, path))) {
+      taken.add(claim2(s, path));
       own2.set(s.id, path);
     }
   }
@@ -320395,6 +320640,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
   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;
   };
@@ -320408,6 +320654,8 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
       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;
@@ -320415,6 +320663,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
       }
       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();
@@ -320494,8 +320743,10 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
     const control = node2.control;
     if (control) {
       const named = control.name ? { name: control.name } : {};
-      if (control.kind === "FORM") web.tag = "form";
-      else if (control.kind === "BUTTON") {
+      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") {
@@ -320624,7 +320875,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
                 if (built) web.children.push(built);
               }
             }
-            if (collection.perVisitor && !outerItem) {
+            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)) {
@@ -320683,6 +320934,7 @@ var init_tree = __esm({
     init_variables();
     init_scene3d();
     init_semantics();
+    init_commerce();
     init_collections();
     init_props();
     init_native_registry();
@@ -333927,9 +334179,9 @@ var require_sourcemap_codec_umd = __commonJS({
       var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
       var __getOwnPropNames2 = Object.getOwnPropertyNames;
       var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-      var __export2 = (target2, all3) => {
-        for (var name2 in all3)
-          __defProp2(target2, name2, { get: all3[name2], enumerable: true });
+      var __export2 = (target2, all4) => {
+        for (var name2 in all4)
+          __defProp2(target2, name2, { get: all4[name2], enumerable: true });
       };
       var __copyProps2 = (to, from2, except, desc2) => {
         if (from2 && typeof from2 === "object" || typeof from2 === "function") {
@@ -334614,9 +334866,9 @@ var require_trace_mapping_umd = __commonJS({
       var __commonJS2 = (cb, mod) => function __require2() {
         return mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
       };
-      var __export2 = (target2, all3) => {
-        for (var name2 in all3)
-          __defProp2(target2, name2, { get: all3[name2], enumerable: true });
+      var __export2 = (target2, all4) => {
+        for (var name2 in all4)
+          __defProp2(target2, name2, { get: all4[name2], enumerable: true });
       };
       var __copyProps2 = (to, from2, except, desc2) => {
         if (from2 && typeof from2 === "object" || typeof from2 === "function") {
@@ -335098,7 +335350,7 @@ var require_trace_mapping_umd = __commonJS({
         }
         return result;
       }
-      function generatedPosition(map2, source3, line, column, bias, all3) {
+      function generatedPosition(map2, source3, line, column, bias, all4) {
         var _a4, _b2;
         line--;
         if (line < 0) throw new Error(LINE_GTR_ZERO);
@@ -335106,13 +335358,13 @@ var require_trace_mapping_umd = __commonJS({
         const { sources, resolvedSources } = map2;
         let sourceIndex2 = sources.indexOf(source3);
         if (sourceIndex2 === -1) sourceIndex2 = resolvedSources.indexOf(source3);
-        if (sourceIndex2 === -1) return all3 ? [] : GMapping(null, null);
+        if (sourceIndex2 === -1) return all4 ? [] : GMapping(null, null);
         const bySourceMemos = (_a4 = cast(map2))._bySourceMemos || (_a4._bySourceMemos = sources.map(memoizedState));
         const generated = (_b2 = cast(map2))._bySources || (_b2._bySources = buildBySources(decodedMappings(map2), bySourceMemos));
         const segments = generated[sourceIndex2][line];
-        if (segments == null) return all3 ? [] : GMapping(null, null);
+        if (segments == null) return all4 ? [] : GMapping(null, null);
         const memo5 = bySourceMemos[sourceIndex2];
-        if (all3) return sliceGeneratedPositions(segments, memo5, line, column, bias);
+        if (all4) return sliceGeneratedPositions(segments, memo5, line, column, bias);
         const index2 = traceSegmentInternal(segments, memo5, line, column, bias);
         if (index2 === -1) return GMapping(null, null);
         const segment = segments[index2];
@@ -335154,9 +335406,9 @@ var require_gen_mapping_umd = __commonJS({
       var __commonJS2 = (cb, mod) => function __require2() {
         return mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
       };
-      var __export2 = (target2, all3) => {
-        for (var name2 in all3)
-          __defProp2(target2, name2, { get: all3[name2], enumerable: true });
+      var __export2 = (target2, all4) => {
+        for (var name2 in all4)
+          __defProp2(target2, name2, { get: all4[name2], enumerable: true });
       };
       var __copyProps2 = (to, from2, except, desc2) => {
         if (from2 && typeof from2 === "object" || typeof from2 === "function") {
@@ -345221,8 +345473,8 @@ ${pad})`;
     return [`${pad}Box(`, `${pad}    modifier = ${modifier}`, `${pad}) {`, ...kids, `${pad}}`].join("\n");
   };
   const body = emit8(tree.root, 1, true);
-  const all3 = [body, ...parts].join("\n");
-  const uses = (re) => re.test(all3);
+  const all4 = [body, ...parts].join("\n");
+  const uses = (re) => re.test(all4);
   const imports3 = [
     [/\.background\(/, "androidx.compose.foundation.background"],
     [/\.border\(/, "androidx.compose.foundation.border"],
@@ -345826,6 +346078,429 @@ var init_project = __esm({
   }
 });
 
+// lib/io/web/project/components.ts
+var components_exports = {};
+__export(components_exports, {
+  componentFiles: () => componentFiles,
+  componentMedia: () => componentMedia,
+  componentScreens: () => componentScreens
+});
+function componentScreens(doc2, pageId2 = doc2.pages[0], nodeCap = 2e4) {
+  const screens = screensOf(doc2, pageId2);
+  const build3 = { target: "site", nodeCap, listTemplates: true, routes: Object.fromEntries(routesOf(screens)) };
+  return screens.map((s) => {
+    const of = s.route?.collectionId ? doc2.collections?.[s.route.collectionId] : void 0;
+    const about = of?.schema ? of : void 0;
+    const opts = about ? { ...build3, item: { collectionId: about.id, recordId: ITEM_RECORD } } : build3;
+    const tree = buildPlainTree(doc2, s.id, opts);
+    const media2 = mediaRules(doc2, s.id, tree.root, opts).map((r) => r.replace(/\[data-pc-id="([^"~]+)~[^"]+"\]/g, '[data-pc-id^="$1~"]'));
+    return { id: s.id, name: s.name, tree: media2.length ? { ...tree, rules: [...tree.rules ?? [], ...media2] } : tree, ...about ? { about } : {} };
+  });
+}
+function componentMedia(doc2, screens) {
+  const text = JSON.stringify(screens.map((s) => s.tree)) + JSON.stringify(doc2.records ?? {});
+  return [...new Set(text.match(MEDIA_REF2) ?? [])].sort();
+}
+function componentFiles(doc2, screens, o = {}) {
+  const dir = (o.dir ?? "components/popcraft").replace(/\/$/, "");
+  const media2 = [];
+  const at3 = /* @__PURE__ */ new Map();
+  for (const [ref3, m] of Object.entries(o.media ?? {})) {
+    const name2 = `${ref3.slice("media://".length)}.${MEDIA_EXT[m.type] ?? "bin"}`;
+    at3.set(ref3, `/popcraft/media/${name2}`);
+    media2.push({ path: `public/popcraft/media/${name2}`, content: m.bytes });
+  }
+  const located = (v) => at3.size ? JSON.parse(JSON.stringify(v).replace(MEDIA_REF2, (ref3) => at3.get(ref3) ?? ref3)) : v;
+  doc2 = { ...doc2, records: located(doc2.records) };
+  const holder = { pages: screens.map((s) => ({ tree: located(s.tree) })) };
+  const pictures = [...externalizeBitmaps(holder).map((f2) => ({ ...f2, path: `public/popcraft/${f2.path}` })), ...media2];
+  const names = /* @__PURE__ */ new Set();
+  const files = [];
+  const index2 = [];
+  screens.forEach((s, i2) => {
+    const tree = { ...holder.pages[i2].tree, root: withAssetBase(holder.pages[i2].tree.root, "/popcraft/") };
+    const base = (componentName(s.name) || "Screen").replace(/(page|screen)?$/i, "Page");
+    let name2 = base;
+    for (let n = 2; names.has(name2); n++) name2 = `${base}${n}`;
+    names.add(name2);
+    const props = [];
+    const types = /* @__PURE__ */ new Set();
+    const samples = [];
+    const prelude = [];
+    const listProp = /* @__PURE__ */ new Map();
+    const propName2 = (base2) => {
+      let p2 = base2;
+      for (let n = 2; props.some((x2) => x2.name === p2) || p2 === "item"; n++) p2 = `${base2}${n}`;
+      return p2;
+    };
+    if (s.about) {
+      const schema = s.about.schema;
+      const p2 = propName2(camel3(singular(COMMERCE_PROP[schema].name)));
+      const type = COMMERCE_PROP[schema].type;
+      types.add(type);
+      props.push({ name: p2, type: `${type}`, doc: `The ${singular(s.about.name).toLowerCase()} this page is about; none: the design's first sample.` });
+      samples.push(sampleConst(`SAMPLE_${p2.toUpperCase()}`, doc2, s.about, 1));
+      prelude.push(`const item = ${p2} ? commerceItem(${JSON.stringify(schema)}, ${p2}) : SAMPLE_${p2.toUpperCase()}`);
+    }
+    for (const n of all3(tree.root)) {
+      const c2 = n.repeat && doc2.collections?.[n.repeat.collectionId];
+      if (!c2?.schema || listProp.has(c2.id)) continue;
+      const { type, one } = COMMERCE_PROP[c2.schema];
+      const p2 = propName2(one ? COMMERCE_PROP[c2.schema].name : camel3(c2.name));
+      types.add(type);
+      listProp.set(c2.id, p2);
+      props.push({ name: p2, type: one ? type : `${type}[]`, doc: `${c2.name}; none: the design's samples.` });
+      samples.push(sampleConst(`SAMPLE_${p2.toUpperCase()}`, doc2, c2));
+    }
+    const actions = [...new Set(all3(tree.root).map((n) => n.action).filter((a) => !!a))];
+    for (const a of actions) props.push({ name: COMMERCE_ACTION_PROP[a], type: "(formData: FormData) => void | Promise<void>", doc: `What sending its ${a} form does (a server action).` });
+    const body = serializeReact(tree, {
+      ids: true,
+      name: name2,
+      styling: o.styling ?? "inline",
+      prelude,
+      itemReader: "commerceWords",
+      props: props.length ? `{ ${props.map((p2) => p2.name).join(", ")} }: ${name2}Props = {}` : "",
+      lists: (r) => {
+        const p2 = listProp.get(r.collectionId);
+        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.offset || r.limit) out += `.slice(${r.offset ?? 0}${r.limit ? `, ${(r.offset ?? 0) + r.limit}` : ""})`;
+        return out;
+      },
+      formAction: (n) => n.action ? COMMERCE_ACTION_PROP[n.action] : null
+    });
+    const runtime = [.../\bcommerceItem\(/.test(body) ? ["commerceItem"] : [], .../\bcommerceWords\(/.test(body) ? ["commerceWords"] : [], ...samples.length ? ["type CommerceItem"] : [], ...[...types].sort().map((t3) => `type ${t3}`)];
+    const client = /\buse(Effect|Ref|State)\b/.test(body);
+    const react = /<Fragment\b/.test(body) && !/import \{[^}]*\bFragment\b/.test(body) ? ["import { Fragment } from 'react'"] : [];
+    const content = [
+      ...client ? ["'use client'", ""] : [],
+      `// ${s.name}, exported from PopCraft (${doc2.name}) as a component a Next.js Commerce store renders with its own data.`,
+      "// Re-export it from PopCraft rather than editing it here: the design is the source.",
+      "",
+      ...react,
+      ...runtime.length ? [`import { ${runtime.join(", ")} } from '@popcraft/runtime/commerce'`] : [],
+      "",
+      ...props.length ? [`export interface ${name2}Props {`, ...props.map((p2) => `  /** ${p2.doc} */
+  ${p2.name}?: ${p2.type}`), "}", ""] : [],
+      ...samples,
+      body,
+      ""
+    ].join("\n");
+    files.push({ path: `${dir}/${name2}.tsx`, content });
+    index2.push(`export { ${name2}${props.length ? `, type ${name2}Props` : ""} } from './${name2}'`);
+  });
+  const tokens = screens.find((sc) => sc.tree.tokens)?.tree.tokens;
+  files.push({ path: `${dir}/popcraft.css`, content: [
+    `/* The variables of ${doc2.name}'s design, exported from PopCraft: what its components' styles name. */`,
+    "*, *::before, *::after { box-sizing: border-box; }",
+    ...tokens ? tokensCSS(tokens) : [],
+    ""
+  ].join("\n") });
+  files.push({ path: `${dir}/index.ts`, content: [`// The components of ${doc2.name}, exported from PopCraft.`, "import './popcraft.css'", "", ...index2, ""].join("\n") });
+  return [...files, ...pictures];
+}
+function sampleConst(name2, doc2, c2, one) {
+  const rows = recordsIn(doc2, c2.id).map((r) => ({ id: r.id, values: Object.fromEntries(c2.fields.map((f2) => [fieldKey(f2.name), r.values[f2.id] ?? ""])) }));
+  return one ? `const ${name2}: CommerceItem = ${JSON.stringify(rows[0] ?? { id: "sample", values: {} }, null, 2)}
+` : `const ${name2}: CommerceItem[] = ${JSON.stringify(rows, null, 2)}
+`;
+}
+var all3, camel3, singular, MEDIA_REF2, MEDIA_EXT;
+var init_components = __esm({
+  "lib/io/web/project/components.ts"() {
+    init_commerce();
+    init_collections();
+    init_routes();
+    init_naming();
+    init_react2();
+    init_tokens2();
+    init_site();
+    init_tree();
+    init_assets();
+    all3 = (n, out = []) => {
+      out.push(n);
+      n.children.forEach((c2) => all3(c2, out));
+      n.repeat?.template.forEach((c2) => all3(c2, out));
+      return out;
+    };
+    camel3 = (s) => {
+      const w = componentName(s.replace(/[^A-Za-z0-9]+/g, " ").replace(/\b\w/g, (c2) => c2.toUpperCase()));
+      return w.charAt(0).toLowerCase() + w.slice(1);
+    };
+    singular = (s) => s.replace(/ies$/, "y").replace(/s$/, "");
+    MEDIA_REF2 = /media:\/\/[A-Za-z0-9_-]+/g;
+    MEDIA_EXT = { "image/png": "png", "image/jpeg": "jpg", "image/webp": "webp", "image/gif": "gif", "image/avif": "avif", "image/svg+xml": "svg" };
+  }
+});
+
+// lib/io/web/project/shopify-theme.ts
+function kindOf(s, doc2, route2) {
+  if (s.about?.schema === "commerce.product") return "product";
+  if (s.about?.schema === "commerce.collection") return "collection";
+  const nodes = every2(s.tree.root);
+  if (nodes.some((n) => n.action === "search")) return "search";
+  if (nodes.some((n) => n.repeat && doc2.collections?.[n.repeat.collectionId]?.schema === "commerce.cartLine")) return "cart";
+  if (route2 === "/") return "index";
+  return "page";
+}
+function liquidNode(node2, schema, v) {
+  const fields = LIQUID[schema](v);
+  const out = boundNode(node2, (key5) => key5 in fields ? `{{ ${fields[key5]} }}` : key5 === "id" ? `{{ ${v}.id }}` : "");
+  const rename = (n) => ({ ...n, ...n.input?.attrs.name === "merchandiseId" ? { input: { ...n.input, attrs: { ...n.input.attrs, name: "id" } } } : {}, children: n.children.map(rename) });
+  return rename(out);
+}
+function boundNode(node2, field) {
+  const { children, repeat, variants, ...own2 } = node2;
+  const out = JSON.parse(JSON.stringify(own2).replace(/\u2063([^\u2063]*)\u2063/g, (_m, key5) => field(key5)));
+  const page = new RegExp(`^/[\\w-]+/${field("handle").replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`);
+  const href = (h) => field("handle") && page.test(h) ? field("url") : h;
+  if (out.link?.href) out.link = { ...out.link, href: href(out.link.href) };
+  if (out.attrs?.href) out.attrs = { ...out.attrs, href: href(out.attrs.href) };
+  return { ...out, children: children.map((c2) => boundNode(c2, field)), ...repeat ? { repeat } : {}, ...variants ? { variants } : {} };
+}
+function shopifyThemeFiles(doc2, screens, o = {}) {
+  const files = [];
+  const name2 = o.name ?? doc2.name;
+  const asset = /* @__PURE__ */ new Map();
+  for (const [ref3, m] of Object.entries(o.media ?? {})) {
+    const file2 = `popcraft-${ref3.slice("media://".length)}.${MEDIA_EXT2[m.type] ?? "bin"}`;
+    asset.set(ref3, `{{ '${file2}' | asset_url }}`);
+    files.push({ path: `assets/${file2}`, content: m.bytes });
+  }
+  const holder = { pages: screens.map((s) => ({ tree: s.tree })) };
+  for (const f2 of externalizeBitmaps(holder)) {
+    const file2 = `popcraft-${f2.path.replace(/^assets\//, "")}`;
+    files.push({ path: `assets/${file2}`, content: f2.content });
+  }
+  const located = (v) => JSON.parse(JSON.stringify(v).replace(MEDIA_REF3, (ref3) => asset.get(ref3) ?? ref3).replace(/(["'(])assets\/(img-\d+\.\w+)/g, (_m, lead, f2) => `${lead}{{ 'popcraft-${f2}' | asset_url }}`));
+  const schemaOf = (id3) => doc2.collections?.[id3]?.schema;
+  const used = /* @__PURE__ */ new Set();
+  const sections = [];
+  for (const [i2, s] of screens.entries()) {
+    const route2 = doc2.nodes?.[s.id] ? doc2.nodes[s.id].route?.path : void 0;
+    let kind = kindOf(s, doc2, route2 ?? (i2 === 0 ? "/" : void 0));
+    if (kind !== "page" && used.has(kind)) kind = "page";
+    used.add(kind);
+    const slug3 = fileBase(s.name).toLowerCase() || `page-${i2 + 1}`;
+    let tree = located(holder.pages[i2].tree);
+    if (s.about?.schema) tree = { ...tree, root: liquidNode(tree.root, s.about.schema, s.about.schema === "commerce.product" ? "product" : "collection") };
+    const relist = (n) => {
+      const schema = n.repeat && schemaOf(n.repeat.collectionId);
+      const template3 = n.repeat && schema ? n.repeat.template.map((c2) => liquidNode(c2, schema, LOOP_VAR[schema])) : n.repeat?.template;
+      return { ...n, children: n.children.map(relist), ...n.repeat ? { repeat: { ...n.repeat, template: (template3 ?? []).map(relist) } } : {} };
+    };
+    tree = { ...tree, root: relist(tree.root) };
+    const source3 = kind === "collection" ? "collection.products" : kind === "search" ? "pc_results" : "collections.all.products";
+    const html = serializeHTML(tree, {
+      ids: true,
+      lists: (n) => {
+        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}` : ""}`;
+        switch (schema) {
+          case "commerce.product":
+            return { open: `{% for p in ${source3}${range3} %}`, close: "{% endfor %}" };
+          case "commerce.collection":
+            return { open: `{% for c in collections${range3} %}{% if c.handle == 'all' or c.handle == 'frontpage' %}{% continue %}{% endif %}`, close: "{% endfor %}" };
+          case "commerce.cartLine":
+            return { open: `{% for line in cart.items${range3} %}`, close: "{% endfor %}" };
+          case "commerce.menu":
+            return { open: `{% for link in linklists['main-menu'].links${range3} %}`, close: "{% endfor %}" };
+          case "commerce.cart":
+            return { open: "", close: "" };
+        }
+      },
+      form: (n) => {
+        const f2 = n.action && FORMS[n.action];
+        return f2 ? { attrs: { action: f2.action, method: f2.method, "accept-charset": "UTF-8" }, ...f2.fields ? { fields: f2.fields } : {} } : null;
+      }
+    });
+    const prelude = kind === "search" ? "{%- liquid\n  if search.performed\n    assign pc_results = search.results | where: 'object_type', 'product'\n  else\n    assign pc_results = collections.all.products\n  endif\n-%}\n" : "";
+    const title = s.name;
+    files.push({ path: `sections/popcraft-${slug3}.liquid`, content: `${prelude}${html}
+
+{% schema %}
+${JSON.stringify({ name: `${title} (PopCraft)`, settings: [] }, null, 2)}
+{% endschema %}
+` });
+    sections.push({ kind, slug: slug3, title });
+    const template2 = kind === "page" ? `page.${slug3}` : kind;
+    files.push({ path: `templates/${template2}.json`, content: `${JSON.stringify({ sections: { main: { type: `popcraft-${slug3}`, settings: {} } }, order: ["main"] }, null, 2)}
+` });
+  }
+  const plain2 = (template2, title, body) => {
+    files.push({ path: `sections/popcraft-${template2}.liquid`, content: `<div class="popcraft-plain">
+  ${body}
+</div>
+
+{% schema %}
+${JSON.stringify({ name: `${title} (PopCraft)`, settings: [] }, null, 2)}
+{% endschema %}
+` });
+    files.push({ path: `templates/${template2}.json`, content: `${JSON.stringify({ sections: { main: { type: `popcraft-${template2}`, settings: {} } }, order: ["main"] }, null, 2)}
+` });
+  };
+  const need = [
+    ["index", "Home", "<h1>{{ shop.name }}</h1>"],
+    ["product", "Product", `<h1>{{ product.title }}</h1>
+  <p>{{ product.price | money }}</p>
+  {% form 'product', product %}<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}"><button type="submit">Add to cart</button>{% endform %}`],
+    ["collection", "Collection", '<h1>{{ collection.title }}</h1>\n  {% for p in collection.products %}<a href="{{ p.url }}">{{ p.title }} \u2014 {{ p.price | money }}</a>{% endfor %}'],
+    ["search", "Search", '<form action="/search"><input name="q" value="{{ search.terms | escape }}"><button>Search</button></form>\n  {% for item in search.results %}<a href="{{ item.url }}">{{ item.title }}</a>{% endfor %}'],
+    ["cart", "Cart", '<form action="/cart" method="post">{% for line in cart.items %}<p>{{ line.product.title }} \xD7 {{ line.quantity }}</p>{% endfor %}<button name="checkout">Check out</button></form>'],
+    ["page", "Page", "<h1>{{ page.title }}</h1>\n  {{ page.content }}"],
+    ["404", "Not found", '<h1>Page not found</h1>\n  <a href="{{ routes.root_url }}">Back to the shop</a>'],
+    ["list-collections", "Collections", '{% for c in collections %}<a href="{{ c.url }}">{{ c.title }}</a>{% endfor %}'],
+    ["blog", "Blog", '<h1>{{ blog.title }}</h1>\n  {% for article in blog.articles %}<a href="{{ article.url }}">{{ article.title }}</a>{% endfor %}'],
+    ["article", "Article", "<h1>{{ article.title }}</h1>\n  {{ article.content }}"],
+    ["password", "Password", `<h1>{{ shop.name }}</h1>
+  <p>Opening soon.</p>
+  {% form 'storefront_password' %}<input type="password" name="password"><button>Enter</button>{% endform %}`]
+  ];
+  for (const [template2, title, body] of need) if (!files.some((f2) => f2.path === `templates/${template2}.json`)) plain2(template2, title, body);
+  files.push({ path: "templates/gift_card.liquid", content: "{% layout none %}\n<!doctype html>\n<html><head>{{ content_for_header }}</head><body><h1>{{ gift_card.balance | money }}</h1><p>{{ gift_card.code }}</p></body></html>\n" });
+  const fonts = screens.map((s) => fontsHref(s.tree)).find(Boolean);
+  files.push({ path: "layout/theme.liquid", content: [
+    "<!doctype html>",
+    '<html lang="{{ request.locale.iso_code }}">',
+    "<head>",
+    '  <meta charset="utf-8">',
+    '  <meta name="viewport" content="width=device-width, initial-scale=1">',
+    "  <title>{{ page_title }}{% unless page_title contains shop.name %} \xB7 {{ shop.name }}{% endunless %}</title>",
+    '  {% if page_description %}<meta name="description" content="{{ page_description | escape }}">{% endif %}',
+    '  <link rel="canonical" href="{{ canonical_url }}">',
+    ...fonts ? [`  <link rel="stylesheet" href="${fonts}">`] : [],
+    "  <style>html, body { margin: 0; } *, *::before, *::after { box-sizing: border-box; } img { display: block; max-width: 100%; } .popcraft-plain { max-width: 960px; margin: 48px auto; padding: 0 20px; font-family: system-ui, sans-serif; }</style>",
+    "  {{ content_for_header }}",
+    "</head>",
+    "<body>",
+    "  {{ content_for_layout }}",
+    "</body>",
+    "</html>",
+    ""
+  ].join("\n") });
+  files.push({ path: "config/settings_schema.json", content: `${JSON.stringify([{ name: "theme_info", theme_name: name2, theme_version: "1.0.0", theme_author: "PopCraft", theme_documentation_url: "https://popcraft.app/docs/exporting/commerce", theme_support_url: "https://popcraft.app/docs" }], null, 2)}
+` });
+  files.push({ path: "config/settings_data.json", content: `${JSON.stringify({ current: {} }, null, 2)}
+` });
+  files.push({ path: "locales/en.default.json", content: "{}\n" });
+  return files;
+}
+var MEDIA_REF3, MEDIA_EXT2, LIQUID, LOOP_VAR, FORMS, every2;
+var init_shopify_theme = __esm({
+  "lib/io/web/project/shopify-theme.ts"() {
+    "use strict";
+    init_fonts3();
+    init_html();
+    init_naming();
+    init_assets();
+    MEDIA_REF3 = /media:\/\/[A-Za-z0-9_-]+/g;
+    MEDIA_EXT2 = { "image/png": "png", "image/jpeg": "jpg", "image/webp": "webp", "image/gif": "gif", "image/avif": "avif", "image/svg+xml": "svg" };
+    LIQUID = {
+      "commerce.product": (v) => ({
+        title: `${v}.title`,
+        handle: `${v}.handle`,
+        url: `${v}.url`,
+        description: `${v}.description | strip_html | truncatewords: 60`,
+        price: `${v}.price | money`,
+        max_price: `${v}.price_max | money`,
+        image: `${v}.featured_image | image_url: width: 1200`,
+        image_alt: `${v}.featured_image.alt | escape`,
+        available: `${v}.available`,
+        variant_id: `${v}.selected_or_first_available_variant.id`,
+        tags: `${v}.tags | join: ', '`
+      }),
+      "commerce.collection": (v) => ({ title: `${v}.title`, handle: `${v}.handle`, url: `${v}.url`, description: `${v}.description | strip_html` }),
+      "commerce.cartLine": (v) => ({
+        title: `${v}.product.title`,
+        variant: `${v}.variant.title`,
+        url: `${v}.url`,
+        image: `${v}.image | image_url: width: 300`,
+        quantity: `${v}.quantity`,
+        price: `${v}.final_line_price | money`,
+        merchandise_id: `${v}.key`
+      }),
+      "commerce.cart": () => ({ count: "cart.item_count", subtotal: "cart.items_subtotal_price | money", taxes: "'Calculated at checkout'", total: "cart.total_price | money", checkout_url: "routes.cart_url" }),
+      "commerce.menu": (v) => ({ title: `${v}.title`, url: `${v}.url` })
+    };
+    LOOP_VAR = { "commerce.product": "p", "commerce.collection": "c", "commerce.cartLine": "line", "commerce.cart": "cart", "commerce.menu": "link" };
+    FORMS = {
+      addToCart: { action: "/cart/add", method: "post" },
+      updateCartLine: { action: "/cart/change", method: "post" },
+      removeCartLine: { action: "/cart/change", method: "post", fields: '<input type="hidden" name="quantity" value="0" />' },
+      checkout: { action: "/cart", method: "post", fields: '<input type="hidden" name="checkout" value="1" />' },
+      search: { action: "/search", method: "get" }
+    };
+    every2 = (n, out = []) => {
+      out.push(n);
+      n.children.forEach((c2) => every2(c2, out));
+      n.repeat?.template.forEach((c2) => every2(c2, out));
+      return out;
+    };
+  }
+});
+
+// lib/io/web/project/storefront.ts
+var storefront_exports = {};
+__export(storefront_exports, {
+  STOREFRONT_TARGETS: () => STOREFRONT_TARGETS,
+  STOREFRONT_TARGET_IDS: () => STOREFRONT_TARGET_IDS,
+  storefrontDesign: () => storefrontDesign
+});
+function storefrontDesign(doc2, screens) {
+  const named = (id3) => doc2.collections?.[id3];
+  const pages2 = screens.map((s) => {
+    let root2 = s.tree.root;
+    if (s.about) root2 = boundNode(root2, (key5) => `{{page.${key5}}}`);
+    const relist = (n) => ({ ...n, children: n.children.map(relist), ...n.repeat ? { repeat: { ...n.repeat, template: n.repeat.template.map((c2) => relist(boundNode(c2, (key5) => `{{item.${key5}}}`))) } } : {} });
+    const html = serializeHTML({ ...s.tree, root: relist(root2) }, {
+      ids: true,
+      lists: (n) => {
+        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 -->" };
+      },
+      form: (n) => n.action ? { attrs: { "data-pc-action": n.action } } : null
+    });
+    const route2 = doc2.nodes[s.id]?.route?.path ?? null;
+    return { name: s.name, route: route2, about: s.about?.schema ?? null, html };
+  });
+  const collections = Object.values(doc2.collections ?? {}).map((c2) => ({
+    id: c2.id,
+    name: c2.name,
+    schema: c2.schema ?? null,
+    fields: c2.fields.map((f2) => fieldKey(f2.name)),
+    samples: recordsIn(doc2, c2.id).map((r) => Object.fromEntries(c2.fields.map((f2) => [fieldKey(f2.name), r.values[f2.id] ?? null])))
+  }));
+  return { name: doc2.name, pages: pages2, collections };
+}
+var STOREFRONT_TARGETS;
+var init_storefront = __esm({
+  "lib/io/web/project/storefront.ts"() {
+    init_components();
+    init_shopify_theme();
+    init_collections();
+    init_html();
+    init_storefront_targets();
+    init_storefront_targets();
+    STOREFRONT_TARGETS = {
+      "next-commerce": {
+        id: "next-commerce",
+        ...STOREFRONT_TARGET_INFO["next-commerce"],
+        files: (doc2, screens, o) => componentFiles(doc2, screens, { media: o.media, styling: o.styling })
+      },
+      "shopify-theme": {
+        id: "shopify-theme",
+        ...STOREFRONT_TARGET_INFO["shopify-theme"],
+        files: (doc2, screens, o) => shopifyThemeFiles(doc2, screens, { media: o.media })
+      }
+    };
+  }
+});
+
 // lib/io/csv.ts
 function toCsv(rows, delimiter = ",") {
   return rows.map((r) => r.map((c2) => quote3(c2, delimiter)).join(delimiter)).join("\n");
@@ -346088,11 +346763,12 @@ 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, exportBoard;
+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 init_export2 = __esm({
   "lib/commands/export.ts"() {
     "use strict";
     init_zod();
+    init_storefront_targets();
     init_errors();
     init_types5();
     init_ui();
@@ -346493,6 +347169,58 @@ var init_export2 = __esm({
         return { summary: `Exported ${node2.name || "layer"} as ${filename}`, data: { filename, format, bytes: markup.length, truncated: tree.truncated } };
       }
     });
+    exportStorefront = defineCommand({
+      id: "export.storefront",
+      title: "Export storefront",
+      domain: "export",
+      effect: "none",
+      permission: "export",
+      needs: ["canvas"],
+      params: external_exports.object({
+        target: external_exports.enum(STOREFRONT_TARGET_IDS).default("next-commerce").describe("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."),
+        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"],
+          variants: [
+            { 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" } }
+          ]
+        },
+        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: 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." }
+      },
+      run: async (args2, ctx2) => {
+        const doc2 = ctx2.doc();
+        const [{ componentMedia: componentMedia2, componentScreens: componentScreens2 }, { STOREFRONT_TARGETS: STOREFRONT_TARGETS2 }, { bytesOf: bytesOf2 }, { fileBase: fileBase2, flatten: flatten3, resolveWebAssets: resolveWebAssets2 }, { rendererAssetResolvers: rendererAssetResolvers2 }, { zipFiles: zipFiles2 }, { downloadBlob: downloadBlob2 }, { loadMediaBlob: loadMediaBlob2 }] = await Promise.all([
+          Promise.resolve().then(() => (init_components(), components_exports)),
+          Promise.resolve().then(() => (init_storefront(), storefront_exports)),
+          Promise.resolve().then(() => (init_project(), project_exports)),
+          Promise.resolve().then(() => (init_web(), web_exports)),
+          Promise.resolve().then(() => (init_resolvers(), resolvers_exports)),
+          Promise.resolve().then(() => (init_zip_export(), zip_export_exports)),
+          Promise.resolve().then(() => (init_download(), download_exports)),
+          Promise.resolve().then(() => (init_media_store(), media_store_exports))
+        ]);
+        const target2 = STOREFRONT_TARGETS2[args2.target];
+        const screens = componentScreens2(doc2, ctx2.pageId(), EXPORT_NODE_CAP);
+        if (!screens.length) throw new ToolError("This page has no screens: a top-level frame is a page of the store.");
+        const resolvers = rendererAssetResolvers2(doc2);
+        for (const s of screens) if (flatten3(s.tree.root).some((n) => n.asset)) await resolveWebAssets2(s.tree, resolvers);
+        const media2 = {};
+        await Promise.all(componentMedia2(doc2, screens).map(async (ref3) => {
+          const blob = await loadMediaBlob2(ref3).catch(() => null);
+          if (blob) media2[ref3] = { bytes: new Uint8Array(await blob.arrayBuffer()), type: blob.type };
+        }));
+        const files = args2.target === "next-commerce" && args2.dir ? (await Promise.resolve().then(() => (init_components(), components_exports))).componentFiles(doc2, screens, { styling: args2.styling, dir: args2.dir, media: media2 }) : target2.files(doc2, screens, { media: media2, styling: args2.styling });
+        const base = `${fileBase2(doc2.name)}-${args2.target}`;
+        downloadBlob2(zipFiles2(files.map((f2) => ({ name: f2.path, bytes: bytesOf2(f2) }))), `${base}.zip`);
+        const bound = screens.filter((s) => s.about || flatten3(s.tree.root).some((n) => n.repeat && doc2.collections?.[n.repeat.collectionId]?.schema)).length;
+        return { summary: `Exported ${plural2(screens.length, "page")} (${bound} bound to store data) as ${target2.label} (${base}.zip)`, data: { filename: `${base}.zip`, target: args2.target, pages: screens.map((s) => s.name), files: files.length } };
+      }
+    });
     exportBoard = defineCommand({
       id: "export.board",
       title: "Export board",
@@ -347244,7 +347972,7 @@ function selectedImageTarget(doc2, selection) {
 }
 function withImage(node2, ref3) {
   if (node2.type === "IMAGE") return { imageUrl: ref3 };
-  const fills = (node2.fills ?? []).map((p2, i2, all3) => p2.type === "IMAGE" && all3.findIndex((q) => q.type === "IMAGE") === i2 ? { ...p2, imageUrl: ref3, imageHash: void 0 } : p2);
+  const fills = (node2.fills ?? []).map((p2, i2, all4) => p2.type === "IMAGE" && all4.findIndex((q) => q.type === "IMAGE") === i2 ? { ...p2, imageUrl: ref3, imageHash: void 0 } : p2);
   return { fills };
 }
 function importSvgLayers(doc2, pageId2, svg, name2, cx, cy) {
@@ -348333,9 +349061,9 @@ var init_motion2 = __esm({
       },
       run: (args2, ctx2) => {
         const doc2 = ctx2.doc();
-        const all3 = Object.values(doc2.compositions ?? {});
+        const all4 = Object.values(doc2.compositions ?? {});
         if (args2.id && !doc2.compositions?.[args2.id]) throw new ToolError(`There is no composition "${args2.id}".`);
-        const list2 = args2.id ? [doc2.compositions[args2.id]] : all3;
+        const list2 = args2.id ? [doc2.compositions[args2.id]] : all4;
         const hex10 = (c2) => c2 ? "#" + [c2.r, c2.g, c2.b].map((v) => Math.round(v * 255).toString(16).padStart(2, "0")).join("") : void 0;
         const data = list2.map((c2) => ({
           id: c2.id,
@@ -352289,7 +353017,6 @@ function publishSite(key5, files, opts = {}) {
 var siteStatus, setSiteVersion, renameSite;
 var init_sites = __esm({
   "lib/client/cloud/sites.ts"() {
-    "use strict";
     init_files();
     init_upload2();
     init_api4();
@@ -352417,7 +353144,8 @@ __export(integrations_exports, {
   listWorkspaceIntegrations: () => listWorkspaceIntegrations,
   removeDestination: () => removeDestination,
   setSignIn: () => setSignIn,
-  siteBackend: () => siteBackend
+  siteBackend: () => siteBackend,
+  storeProducts: () => storeProducts
 });
 function connectWithOAuth(workspaceId, provider2) {
   const popup = window.open("", "popcraft-integration", "popup,width=640,height=760");
@@ -352450,7 +353178,7 @@ function connectWithOAuth(workspaceId, provider2) {
     });
   });
 }
-var integrationsWorkspaceId, listWorkspaceIntegrations, connectWithToken, disconnect, listResources, createResource, listDestinations, addDestination, removeDestination, deployDestination, siteBackend, attachDatabase, setSignIn, detachDatabase, listSubmissions, listCandidates, createDatabase, createDestination;
+var integrationsWorkspaceId, listWorkspaceIntegrations, connectWithToken, disconnect, listResources, createResource, listDestinations, addDestination, removeDestination, deployDestination, siteBackend, attachDatabase, setSignIn, detachDatabase, listSubmissions, listCandidates, createDatabase, createDestination, storeProducts;
 var init_integrations = __esm({
   "lib/client/cloud/integrations.ts"() {
     init_api4();
@@ -352473,6 +353201,7 @@ 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;
   }
 });
 
@@ -353542,11 +354271,11 @@ function allThemes(s) {
   return map2;
 }
 function pickableThemes(s) {
-  const all3 = allThemes(s);
+  const all4 = allThemes(s);
   const builtinIds = new Set(BUILTIN_THEMES.map((t3) => t3.id));
   return [
-    ...PICKABLE_BUILTIN_IDS.map((id3) => all3.get(id3)),
-    ...[...all3.values()].filter((t3) => !builtinIds.has(t3.id))
+    ...PICKABLE_BUILTIN_IDS.map((id3) => all4.get(id3)),
+    ...[...all4.values()].filter((t3) => !builtinIds.has(t3.id))
   ];
 }
 function computeAppliedTheme(s) {
@@ -353585,15 +354314,15 @@ function usePickableThemes() {
   const userThemes = useThemeStore((s) => s.userThemes);
   const pluginThemes = useThemeStore((s) => s.pluginThemes);
   const localThemes = useThemeStore((s) => s.localThemes);
-  return (0, import_react8.useMemo)(() => pickableThemes({ userThemes, pluginThemes, localThemes }), [userThemes, pluginThemes, localThemes]);
+  return (0, import_react9.useMemo)(() => pickableThemes({ userThemes, pluginThemes, localThemes }), [userThemes, pluginThemes, localThemes]);
 }
-var import_react8, IDB_KEY, useThemeStore, cssString, defaultAccent, effectiveAccent;
+var import_react9, IDB_KEY, useThemeStore, cssString, defaultAccent, effectiveAccent;
 var init_theme_store = __esm({
   "lib/theme/theme-store.ts"() {
     init_contrast();
     init_idb();
     init_esm();
-    import_react8 = __toESM(require_react());
+    import_react9 = __toESM(require_react());
     init_boot2();
     init_builtin();
     init_resolve();
@@ -354987,6 +355716,62 @@ before proposing anything, and recommend the least that covers it.
   }
 });
 
+// lib/agent/skills/builtin/storefront.ts
+var storefront;
+var init_storefront2 = __esm({
+  "lib/agent/skills/builtin/storefront.ts"() {
+    "use strict";
+    storefront = {
+      id: "storefront",
+      name: "Design a storefront",
+      description: "Bind a shop to a store's data and 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"],
+      instructions: `# Design a storefront
+
+PopCraft draws the shop; a Next.js Commerce store runs it. The store keeps Shopify, the cart, checkout and search;
+the design binds to the store's data through collections with a **commerce schema**, and is exported as React
+components the store renders with its products and server actions. Starting fresh, the Fieldwork and Kiln templates
+are whole stores to begin from.
+
+## Steps
+
+1. **Read the design.** \`get_document_outline\`: which screens are the store's pages (home, search, a product, the
+   cart), where products are listed, where the cart and its totals are.
+2. **The data.** \`edit_collection\` with \`schema\` and no fields makes a collection whose fields are the schema's:
+   - \`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\`.
+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.
+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\`:
+   - \`addToCart\`: needs a hidden INPUT named \`merchandiseId\`, value \`{{item.variant_id}}\`
+   - \`removeCartLine\` or \`updateCartLine\` inside a cart line: \`merchandiseId\` is \`{{item.merchandise_id}}\`
+   - \`checkout\`
+   - \`search\`: a field named \`q\`
+6. **Export.** \`export_storefront\` writes the store's project, for the store the user runs:
+   - \`target: 'next-commerce'\`: components, a prop per list (\`products\`, \`cartLines\`, \`cart\`, \`menu\`), \`product\` on a
+     product's page, and \`onAddToCart\`, \`onCheckout\`\u2026 for the forms; the store passes its \`lib/shopify\` data and its
+     server actions.
+   - \`target: 'shopify-theme'\`: an Online Store 2.0 theme the user uploads in Shopify (Online Store \u203A Themes), running
+     on Shopify with its own cart and checkout.
+   Say which, and where it goes (/docs/exporting/commerce).
+
+## Rules
+
+- Never invent a Shopify connection, an API key or an order flow in the design: the store owns those.
+- Product copy is real (a material, a size, what it is for), never lorem ipsum.
+- One schema per collection; two lists of one collection (featured, new) share one prop, each with its own limit.`
+    };
+  }
+});
+
 // lib/agent/skills/builtin/index.ts
 var BUILTIN_SKILLS;
 var init_builtin2 = __esm({
@@ -355011,6 +355796,7 @@ var init_builtin2 = __esm({
     init_design_code();
     init_design_review();
     init_web_app();
+    init_storefront2();
     BUILTIN_SKILLS = [
       fillContent,
       autoLayout,
@@ -355030,7 +355816,8 @@ var init_builtin2 = __esm({
       campaignPack,
       designCode,
       designReview,
-      webApp
+      webApp,
+      storefront
     ].map((s) => ({ ...s, source: "builtin" }));
   }
 });
@@ -357376,16 +358163,16 @@ var init_api5 = __esm({
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/generated/runtime.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/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=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/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      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=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})();';
     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=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/host.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/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:;";
@@ -357413,40 +358200,40 @@ function buildUIDocument(uiHtml, network) {
 }
 var escapeScript;
 var init_host2 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/host.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/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=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/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/rpc.js
 var init_rpc = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/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/rpc.js"() {
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/runtime/main.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/main.js
 var init_main = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/runtime/main.js"() {
     init_rpc();
   }
 });
 
-// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/types.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/types.js
 var init_types9 = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/types.js"() {
+  "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=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/widget.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/widget.js
 var init_widget = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/widget.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=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/index.js
+// node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/index.js
 var init_dist = __esm({
-  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=96b9dbf7c14e2f42dc018560c454dc18c0676d4092077efc38f3939519e5012c/node_modules/@popcraft/plugins/dist/index.js"() {
+  "node_modules/.pnpm/@popcraft+plugins@1.0.0_patch_hash=997b73fa0364896bf8afb3420ac81e52de261b88cad7cac3e2e206341916c9a5/node_modules/@popcraft/plugins/dist/index.js"() {
     init_host2();
     init_main();
     init_runtime4();
@@ -357819,8 +358606,8 @@ var init_package2 = __esm({
 
 // lib/plugins/registry.ts
 async function listPlugins() {
-  const all3 = await values2(db2());
-  return all3.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+  const all4 = await values2(db2());
+  return all4.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
 }
 async function getPlugin(id3) {
   return get2(id3, db2());
@@ -358628,9 +359415,9 @@ var init_import = __esm({
         return node2;
       }
       vectorFrom(b, name2) {
-        const all3 = this.bezierPoints(b);
-        const minX = Math.min(...all3.map((q) => q[0])), minY = Math.min(...all3.map((q) => q[1]));
-        const maxX = Math.max(...all3.map((q) => q[0])), maxY = Math.max(...all3.map((q) => q[1]));
+        const all4 = this.bezierPoints(b);
+        const minX = Math.min(...all4.map((q) => q[0])), minY = Math.min(...all4.map((q) => q[1]));
+        const maxX = Math.max(...all4.map((q) => q[0])), maxY = Math.max(...all4.map((q) => q[1]));
         return createVector({ name: name2, x: minX, y: minY, width: Math.max(1e-3, maxX - minX), height: Math.max(1e-3, maxY - minY), paths: [this.pathFrom(b, minX, minY)], fills: [], strokes: [] });
       }
       /** Every vertex and control point of `b`, absolute. */
@@ -381124,8 +381911,8 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
         CurrentPointers.setTimeStamp(event.timeStamp);
         stopEvent(event);
       }
-      static _cleanup(all3) {
-        if (all3) {
+      static _cleanup(all4) {
+        if (all4) {
           this._currentDrawId = -1;
           this._currentParent = null;
           _DrawingEditor.#currentDraw = null;
@@ -387894,6 +388681,23 @@ var init_plugin = __esm({
         expose: { plugin: { method: "getImportFile", shape: (r) => r.data } },
         run: (_p, ctx2) => ({ summary: "Import file", data: hostEnv(ctx2).importFile ?? null })
       }),
+      defineCommand({
+        id: pluginCommandId("getStorefront"),
+        title: "Get storefront design",
+        domain: "export",
+        params: empty,
+        effect: "none",
+        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.
+        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();
+          const design = storefrontDesign2(doc2, componentScreens2(doc2, ctx2.pageId()));
+          return { summary: `Storefront: ${design.pages.length} pages`, data: design };
+        }
+      }),
       defineCommand({
         id: pluginCommandId("getExportRequest"),
         title: "Get export request",
@@ -388080,7 +388884,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;
+var integrationList, integrationOpen, asPath2, integrationListResources, place3, integrationAddDestination, integrationDeploy, integrationAttachDatabase, integrationSubmissions, integrationSetSignIn, integrationConfirmCommands, integrationPullProducts;
 var init_integration = __esm({
   "lib/commands/integration.ts"() {
     "use strict";
@@ -388094,13 +388898,13 @@ var init_integration = __esm({
       effect: "none",
       permission: null,
       params: external_exports.object({
-        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).")
+        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).")
       }),
       expose: {
         agent: {
           name: "list_integrations",
           readOnly: true,
-          description: "The services this workspace can connect its own accounts to (GitHub, Vercel, Neon, Supabase), what each can do for a published site (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."
+          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."
         }
       },
       run: async ({ capability: capability2 }) => {
@@ -388237,9 +389041,9 @@ var init_integration = __esm({
       run: async (p2, ctx2) => {
         const key5 = await openFile();
         const { deployDestination: deployDestination2, listDestinations: listDestinations2 } = await Promise.resolve().then(() => (init_integrations(), integrations_exports));
-        const all3 = await listDestinations2(key5);
-        const dest = p2.destinationId ? all3.find((d) => d.id === p2.destinationId) : all3.length === 1 ? all3[0] : void 0;
-        if (!dest) throw new CommandError(all3.length ? `Say which destination: ${all3.map((d) => `${d.id} (${d.target.map((t3) => t3.name).join(" / ")})`).join(", ")}.` : "This file has no destination yet. Add one first (add_site_destination).", "invalid_params");
+        const all4 = await listDestinations2(key5);
+        const dest = p2.destinationId ? all4.find((d) => d.id === p2.destinationId) : all4.length === 1 ? all4[0] : void 0;
+        if (!dest) throw new CommandError(all4.length ? `Say which destination: ${all4.map((d) => `${d.id} (${d.target.map((t3) => t3.name).join(" / ")})`).join(", ")}.` : "This file has no destination yet. Add one first (add_site_destination).", "invalid_params");
         const done = await deployDestination2(key5, dest.id, p2.version);
         ctx2.notice(done.status === "building" ? `Deploying: ${done.url}` : `Sent: ${done.url}`);
         return { summary: `Version ${done.version} ${done.status === "building" ? "is deploying" : "was sent"}: ${done.url}`, data: { url: done.url, ref: done.ref, status: done.status, version: done.version, destinationId: dest.id } };
@@ -388335,6 +389139,56 @@ 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 }, { integrationsWorkspaceId: integrationsWorkspaceId2, listWorkspaceIntegrations: listWorkspaceIntegrations2, 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];
+        let connectionId = args2.connectionId;
+        if (!connectionId) {
+          const workspaceId = integrationsWorkspaceId2();
+          if (!workspaceId) throw new CommandError("Your workspaces have not loaded yet. Try again in a moment.", "failed");
+          const stores2 = (await listWorkspaceIntegrations2(workspaceId)).integrations.filter((i2) => i2.manifest.capabilities.includes("commerce")).flatMap((i2) => i2.connections);
+          if (!stores2.length) throw new CommandError("No store is connected. Connect Shopify in Integrations first.", "failed");
+          if (stores2.length > 1) throw new CommandError(`Name the store: ${stores2.map((c2) => `${c2.account} (${c2.id})`).join(", ")}.`, "invalid_params");
+          connectionId = stores2[0].id;
+        }
+        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 } };
+      }
+    });
   }
 });
 
@@ -389339,6 +390193,7 @@ function designRecorder() {
 var installed;
 var init_recorders = __esm({
   "lib/agent/design-script/recorders.ts"() {
+    "use strict";
     installed = null;
   }
 });
@@ -390854,8 +391709,8 @@ var init_app = __esm({
         s.setActiveBreakpoint(breakpoint2);
         const { breakpointsOf: breakpointsOf2 } = await Promise.resolve().then(() => (init_breakpoints(), breakpoints_exports));
         const shown2 = (await store5()).activeBreakpoint;
-        const all3 = breakpointsOf2(s.document);
-        return { summary: `Showing ${(all3.find((b) => b.id === shown2) ?? all3[0]).name}`, data: { breakpoint: shown2 ?? all3[0].id } };
+        const all4 = breakpointsOf2(s.document);
+        return { summary: `Showing ${(all4.find((b) => b.id === shown2) ?? all4[0]).name}`, data: { breakpoint: shown2 ?? all4[0].id } };
       }
     });
     appCommands = [modeSet, modeEdit, nodeRasterize, panelOpen, panelToggle, dialogOpen, aiOpen, docAction, toolSet, toolPlace, nodeOps, canvasToggle, viewSetBreakpoint, popcornOpen, pageGo];
@@ -391688,9 +392543,9 @@ var init_check = __esm({
     MAX_FRAME_PX = 8192;
     label2 = (t3) => `"${(t3.characters || t3.name).replace(/\s+/g, " ").slice(0, 40)}"`;
     presetOf = (doc2, w, h) => {
-      const all3 = PAGE_PRESETS.filter((p2) => p2.unit === "px" && p2.width === w && p2.height === h);
-      const web = all3.find((p2) => p2.category === "WEB");
-      return (doc2.settings?.kind === "WEB" || web && all3.length > 1 && w >= 1024 ? web : void 0)?.id ?? all3[0]?.id;
+      const all4 = PAGE_PRESETS.filter((p2) => p2.unit === "px" && p2.width === w && p2.height === h);
+      const web = all4.find((p2) => p2.category === "WEB");
+      return (doc2.settings?.kind === "WEB" || web && all4.length > 1 && w >= 1024 ? web : void 0)?.id ?? all4[0]?.id;
     };
   }
 });
@@ -392485,6 +393340,7 @@ var init_site3 = __esm({
     init_controls();
     init_types();
     init_routes();
+    init_commerce();
     init_doc_helpers();
     init_errors();
     init_types5();
@@ -392540,9 +393396,9 @@ var init_site3 = __esm({
       run: (args2, ctx2) => {
         const { doc: doc2, ids: ids2 } = resolveTargets(ctx2, args2.ids, "set_responsive");
         if (!args2.set && !args2.reset) throw new ToolError("set_responsive needs set or reset.");
-        const all3 = breakpointsOf(doc2);
-        if (!all3.some((b) => b.id === args2.breakpoint)) throw new ToolError(`No breakpoint "${args2.breakpoint}". This file has: ${all3.map((b) => b.id).join(", ")}.`);
-        if (isBaseBreakpoint(doc2, args2.breakpoint)) throw new ToolError(`"${args2.breakpoint}" is the base: what a layer has there is the layer itself. Use update_nodes, or name a narrower breakpoint (${all3.slice(1).map((b) => b.id).join(", ")}).`);
+        const all4 = breakpointsOf(doc2);
+        if (!all4.some((b) => b.id === args2.breakpoint)) throw new ToolError(`No breakpoint "${args2.breakpoint}". This file has: ${all4.map((b) => b.id).join(", ")}.`);
+        if (isBaseBreakpoint(doc2, args2.breakpoint)) throw new ToolError(`"${args2.breakpoint}" is the base: what a layer has there is the layer itself. Use update_nodes, or name a narrower breakpoint (${all4.slice(1).map((b) => b.id).join(", ")}).`);
         const patches = /* @__PURE__ */ new Map();
         for (const id3 of ids2) {
           let node2 = doc2.nodes[id3];
@@ -392639,7 +393495,7 @@ var init_site3 = __esm({
         options: external_exports.array(external_exports.object({ value: external_exports.string().max(200), label: external_exports.string().max(200) })).max(200).optional().describe("SELECT: its choices."),
         buttonType: external_exports.enum(["submit", "reset", "button"]).optional().describe("BUTTON: what it does in a form (default submit)."),
         variableId: external_exports.string().nullable().optional().describe("The variable typing writes, so layers bound to it follow; null unbinds."),
-        formAction: external_exports.enum(["signUp", "signIn", "signOut", "updateAccount", "changePassword", "deleteAccount", "forgotPassword", "resetPassword", "deleteRecord", "updateRecord"]).nullable().optional().describe(`FORM: what sending does on a published site with sign-in. signUp: make an account from its fields named name, email and password. signIn: sign in with email and password. signOut: end the session. updateAccount: change the signed-in visitor's name (field name). changePassword: fields password (the current one) and new_password. deleteAccount: field password, then the visitor is signed out for good. forgotPassword: field email, emails a reset link that opens the site's /reset-password page; resetPassword (on that page): field new_password. deleteRecord: a form inside a repeated list's copy removes that copy's record from the visitor's own. updateRecord: a form inside a copy changes that copy's record \u2014 the fields it sends take their values, the rest stay; a BUTTON with a name and a value sends them with the form it sends ("Mark done" is a button named done with value Yes). null (default): save its values (to the visitor's own records when the form's collectionId is a perVisitor collection: each control's name is a field). onSubmit runs only when it worked; a refusal is put in the variable user/signInError.`),
+        formAction: external_exports.enum(["signUp", "signIn", "signOut", "updateAccount", "changePassword", "deleteAccount", "forgotPassword", "resetPassword", "deleteRecord", "updateRecord", ...COMMERCE_ACTIONS]).nullable().optional().describe(`FORM: what sending does on a published site with sign-in. signUp: make an account from its fields named name, email and password. signIn: sign in with email and password. signOut: end the session. updateAccount: change the signed-in visitor's name (field name). changePassword: fields password (the current one) and new_password. deleteAccount: field password, then the visitor is signed out for good. forgotPassword: field email, emails a reset link that opens the site's /reset-password page; resetPassword (on that page): field new_password. deleteRecord: a form inside a repeated list's copy removes that copy's record from the visitor's own. updateRecord: a form inside a copy changes that copy's record \u2014 the fields it sends take their values, the rest stay; a BUTTON with a name and a value sends them with the form it sends ("Mark done" is a button named done with value Yes). null (default): save its values (to the visitor's own records when the form's collectionId is a perVisitor collection: each control's name is a field). onSubmit runs only when it worked; a refusal is put in the variable user/signInError. Storefront actions (for a design exported as components for a Next.js Commerce store): addToCart (a field or hidden input named merchandiseId, usually {{item.variant_id}}), updateCartLine (merchandiseId and quantity), removeCartLine (merchandiseId), checkout, search (a field named q); each becomes a prop of the exported component (onAddToCart, \u2026) its form sends to.`),
         collectionId: external_exports.string().nullable().optional().describe("FORM: the collection its values are kept in as a record (each control named as a field)."),
         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(),
@@ -392811,7 +393667,8 @@ var init_site3 = __esm({
       name: c2.name,
       records: c2.order.filter((id3) => doc2.records?.[id3]).length,
       fields: c2.fields.map((f2) => ({ id: f2.id, name: f2.name, key: fieldKey(f2.name), type: f2.type, ...f2.options ? { options: f2.options } : {} })),
-      slugField: c2.fields.find((f2) => f2.id === c2.slugFieldId)?.name ?? null
+      slugField: c2.fields.find((f2) => f2.id === c2.slugFieldId)?.name ?? null,
+      ...c2.schema ? { schema: c2.schema } : {}
     });
     dataEditCollection = defineCommand({
       id: "data.editCollection",
@@ -392832,6 +393689,7 @@ var init_site3 = __esm({
         slugField: external_exports.string().nullable().optional().describe("The field a record's page address is made from (by name); default: the first SLUG or TEXT field."),
         shared: external_exports.boolean().optional().describe("With perVisitor (turned on with it): every signed-in visitor sees everyone's records \u2014 a guest book, a team board. Each record says who made it (item_by) and whether it is the visitor's own (item_mine); only its maker changes or deletes it."),
         perVisitor: external_exports.boolean().optional().describe("Each signed-in visitor of the published site has their own records: a list repeated from it shows only theirs, and a form bound to it adds to theirs, kept in the site's database. The records in the file are samples the design is drawn with. Needs a database with sign-in attached."),
+        schema: external_exports.enum(COMMERCE_SCHEMAS).nullable().optional().describe("What its records stand for in a storefront: commerce.product, commerce.collection, commerce.cart (one record: the cart count and totals, shown by a list of one), commerce.cartLine or commerce.menu. Its fields become the schema's (leave fields out) and its records are samples; exported as components, a list repeated from it is a typed prop (products, collections, cart, lines, menu) a Next.js Commerce store fills. null clears it."),
         remove: external_exports.boolean().optional().describe("Delete the collection, its records, and the repeaters and collection pages that used it.")
       }).strict(),
       expose: {
@@ -392850,6 +393708,7 @@ var init_site3 = __esm({
           return { summary: `Removed collection ${before.name}`, data: { removed: before.id } };
         }
         if (!before && !args2.name) throw new ToolError("A new collection needs a name.");
+        if (args2.schema && !args2.fields) args2 = { ...args2, fields: COMMERCE_FIELDS[args2.schema].map((f2) => ({ name: f2.name, type: f2.type })) };
         if (!before && !args2.fields) throw new ToolError("A new collection needs fields.");
         if (!before && Object.keys(doc2.collections ?? {}).length >= COLLECTION_LIMITS.collections) throw new ToolError(`A file holds up to ${COLLECTION_LIMITS.collections} collections.`);
         const keys4 = (args2.fields ?? []).map((f2) => fieldKey(f2.name));
@@ -392870,6 +393729,11 @@ var init_site3 = __esm({
           void _was;
           next2 = { ...next2, collections: { ...next2.collections, [draft.id]: args2.shared ? { ...rest, shared: true, perVisitor: true } : rest } };
         }
+        if (args2.schema !== void 0) {
+          const { schema: _was, ...rest } = next2.collections[draft.id];
+          void _was;
+          next2 = { ...next2, collections: { ...next2.collections, [draft.id]: args2.schema ? { ...rest, schema: args2.schema } : rest } };
+        }
         if (args2.perVisitor !== void 0) {
           const { perVisitor: _was, ...rest } = next2.collections[draft.id];
           void _was;
@@ -392953,11 +393817,11 @@ var init_site3 = __esm({
           return { summary: list2.length ? `${list2.length} collections: ${list2.map((c3) => c3.name).join(", ")}` : "No collections", data: { collections: list2 } };
         }
         const c2 = collectionOf(doc2, args2.collection);
-        const all3 = recordsIn(doc2, c2.id);
+        const all4 = recordsIn(doc2, c2.id);
         const slugs = recordSlugs(doc2, c2.id);
         const from2 = args2.offset ?? 0;
-        const records = all3.slice(from2, from2 + (args2.limit ?? 50)).map((r) => ({ id: r.id, slug: slugs.get(r.id), values: Object.fromEntries(c2.fields.map((f2) => [fieldKey(f2.name), r.values[f2.id] ?? null])) }));
-        return { summary: `${c2.name}: ${records.length} of ${all3.length} records`, data: { collection: described2(c2, doc2), total: all3.length, records } };
+        const records = all4.slice(from2, from2 + (args2.limit ?? 50)).map((r) => ({ id: r.id, slug: slugs.get(r.id), values: Object.fromEntries(c2.fields.map((f2) => [fieldKey(f2.name), r.values[f2.id] ?? null])) }));
+        return { summary: `${c2.name}: ${records.length} of ${all4.length} records`, data: { collection: described2(c2, doc2), total: all4.length, records } };
       }
     });
     nodeSetRepeat = defineCommand({
@@ -394098,6 +394962,7 @@ var init_builtin4 = __esm({
       exportPages,
       exportPptx,
       exportWeb,
+      exportStorefront,
       // state machines (lib/motion/state-machine.ts): interactive timelines (appended, as above)
       motionEditStateMachine,
       motionGetStateMachine,
@@ -394131,6 +394996,7 @@ 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)
@@ -399353,11 +400219,11 @@ function fileStorage(path) {
   return {
     get: async (key5) => read6()[key5],
     set: async (key5, value3) => {
-      const all3 = read6();
-      all3[key5] = value3;
+      const all4 = read6();
+      all4[key5] = value3;
       if (!path) return;
       mkdirSync3(dirname(path), { recursive: true });
-      writeFileSync3(path, JSON.stringify(all3));
+      writeFileSync3(path, JSON.stringify(all4));
     }
   };
 }
@@ -399950,15 +400816,15 @@ function runCommandsList(positionals, flags, out) {
     out.line(commandHelp(command));
     return;
   }
-  const all3 = flagBool(flags, "all");
-  const rows = cliCommands().filter((c2) => all3 || ["local", "browser"].includes(availability2(c2)));
+  const all4 = flagBool(flags, "all");
+  const rows = cliCommands().filter((c2) => all4 || ["local", "browser"].includes(availability2(c2)));
   if (out.json) {
     out.result(`${rows.length} commands`, rows.map((c2) => ({ id: c2.id, title: c2.title, availability: availability2(c2), effect: c2.effect, flat: specOf(c2).flat })));
     return;
   }
   out.line(table([["COMMAND", "WHERE", "TITLE"], ...rows.map((c2) => [c2.id, WHERE[availability2(c2)], c2.title])]));
   out.line(`
-${rows.length} commands${all3 ? "" : " that run from the CLI (--all lists every command, with where the rest run)"}. \`popcraft commands <id>\` shows a command's flags.`);
+${rows.length} commands${all4 ? "" : " that run from the CLI (--all lists every command, with where the rest run)"}. \`popcraft commands <id>\` shows a command's flags.`);
 }
 function suggest(key5) {
   const k2 = key5.toLowerCase().replace(/[^a-z]/g, "");
@@ -401056,6 +401922,64 @@ export default defineTemplate({
   }
 });
 
+// packages/cli/src/storefront.ts
+var storefront_exports2 = {};
+__export(storefront_exports2, {
+  runStorefront: () => runStorefront
+});
+import { existsSync as existsSync12, mkdirSync as mkdirSync8, readFileSync as readFileSync12, writeFileSync as writeFileSync9 } from "node:fs";
+import { dirname as dirname4, join as join11 } from "node:path";
+async function mediaFor(refs, file2, appUrl) {
+  const out = {};
+  await Promise.all(refs.map(async (ref3) => {
+    const hash3 = ref3.slice("media://".length);
+    const local = join11(dirname4(file2), "media", hash3);
+    const bytes2 = existsSync12(local) ? new Uint8Array(readFileSync12(local)) : await fetch(`${appUrl}/templates/media/${hash3}`).then(async (r) => r.ok ? new Uint8Array(await r.arrayBuffer()) : null, () => null);
+    if (bytes2) out[ref3] = { bytes: bytes2, type: sniff(bytes2) };
+  }));
+  return out;
+}
+async function runStorefront(rest, flags, out, appUrl) {
+  const file2 = rest[0];
+  if (!file2) throw usage("popcraft storefront <file.popcraft> [--target next-commerce|shopify-theme] [--out <dir>] [--page <id|name>] [--styling inline|tailwind] [--dir components/popcraft]");
+  const target2 = flagString(flags, "target") ?? "next-commerce";
+  if (!STOREFRONT_TARGET_IDS.includes(target2)) throw usage(`--target is one of ${STOREFRONT_TARGET_IDS.join(", ")}`);
+  const doc2 = readPopcraft(file2);
+  const ref3 = flagString(flags, "page");
+  const pageId2 = ref3 ? resolvePage(doc2, ref3) : doc2.pages[0];
+  if (!pageId2) throw usage(`No page ${ref3}`);
+  const styling = flagString(flags, "styling");
+  if (styling && styling !== "inline" && styling !== "tailwind") throw usage("--styling is inline or tailwind");
+  const screens = componentScreens(doc2, pageId2);
+  if (!screens.length) throw usage("That page has no screens: a top-level frame is a component.");
+  const refs = componentMedia(doc2, screens);
+  const media2 = await mediaFor(refs, file2, appUrl);
+  const missing = refs.filter((r) => !media2[r]);
+  if (missing.length) out.info(`${missing.length} picture(s) not found beside the file or on ${appUrl}; they keep their media:// address: ${missing.join(", ")}`);
+  const dir = flagString(flags, "dir");
+  const files = target2 === "next-commerce" && dir ? componentFiles(doc2, screens, { styling, dir, media: media2 }) : STOREFRONT_TARGETS[target2].files(doc2, screens, { styling, media: media2 });
+  const root2 = flagString(flags, "out") ?? ".";
+  for (const f2 of files) {
+    const at3 = join11(root2, f2.path);
+    mkdirSync8(dirname4(at3), { recursive: true });
+    writeFileSync9(at3, f2.content);
+  }
+  out.result(`Wrote ${STOREFRONT_TARGETS[target2].label}: ${screens.length} page${screens.length === 1 ? "" : "s"} (${screens.map((s) => s.name).join(", ")}) and ${files.filter((f2) => /^(public|assets)\/.*\.(jpg|png|webp|gif|avif|svg)$/.test(f2.path)).length} picture(s) under ${root2}`, out.json ? { target: target2, pages: screens.map((s) => s.name), files: files.map((f2) => f2.path) } : void 0);
+  return 0;
+}
+var sniff;
+var init_storefront3 = __esm({
+  "packages/cli/src/storefront.ts"() {
+    "use strict";
+    init_components();
+    init_storefront();
+    init_args();
+    init_headless2();
+    init_io();
+    sniff = (b) => b[0] === 255 && b[1] === 216 ? "image/jpeg" : b[0] === 137 && b[1] === 80 ? "image/png" : b[8] === 87 && b[9] === 69 ? "image/webp" : b[0] === 71 && b[1] === 73 ? "image/gif" : "application/octet-stream";
+  }
+});
+
 // lib/desktop/local-assets.ts
 function parsePluginFolder(manifestText, files) {
   let raw;
@@ -401091,36 +402015,36 @@ __export(plugins_exports, {
   runPluginHeadless: () => runPluginHeadless
 });
 import { spawn } from "node:child_process";
-import { existsSync as existsSync12, mkdirSync as mkdirSync8, readFileSync as readFileSync12, statSync as statSync6, writeFileSync as writeFileSync9 } from "node:fs";
-import { dirname as dirname4, extname as extname3, join as join11, resolve as resolve5, sep } from "node:path";
+import { existsSync as existsSync13, mkdirSync as mkdirSync9, readFileSync as readFileSync13, statSync as statSync6, writeFileSync as writeFileSync10 } from "node:fs";
+import { dirname as dirname5, extname as extname3, join as join12, resolve as resolve5, sep } from "node:path";
 function loadPlugin(ref3, root2 = desktopDataDir()) {
   let path = ref3;
-  if (!existsSync12(path)) {
+  if (!existsSync13(path)) {
     const installed3 = listResources2("plugins", root2).find((r) => r.name === ref3);
     if (!installed3) throw usage(`No plugin "${ref3}": give its folder, .zip or .json, or the name of one in \`popcraft plugins list\`.`);
-    path = join11(root2, installed3.path);
+    path = join12(root2, installed3.path);
   }
   if (statSync6(path).isDirectory()) {
     const dir = resolve5(path);
-    const manifest2 = join11(dir, "manifest.json");
-    if (!existsSync12(manifest2)) throw usage(`${path} has no manifest.json.`);
+    const manifest2 = join12(dir, "manifest.json");
+    if (!existsSync13(manifest2)) throw usage(`${path} has no manifest.json.`);
     const files = new Proxy({}, {
       get: (_, rel) => {
         if (typeof rel !== "string") return void 0;
         const file2 = resolve5(dir, rel);
-        return file2.startsWith(dir + sep) && existsSync12(file2) ? readFileSync12(file2, "utf8") : void 0;
+        return file2.startsWith(dir + sep) && existsSync13(file2) ? readFileSync13(file2, "utf8") : void 0;
       }
     });
-    return parsePluginFolder(readFileSync12(manifest2, "utf8"), files);
+    return parsePluginFolder(readFileSync13(manifest2, "utf8"), files);
   }
-  if (extname3(path).toLowerCase() === ".zip") return parsePluginZip(new Uint8Array(readFileSync12(path)));
-  return parsePluginBundle(readFileSync12(path, "utf8"));
+  if (extname3(path).toLowerCase() === ".zip") return parsePluginZip(new Uint8Array(readFileSync13(path)));
+  return parsePluginBundle(readFileSync13(path, "utf8"));
 }
 async function approvedPermissions(manifest2, dir) {
   const asked = manifest2.permissions;
   if (!asked.length) return [];
-  const file2 = dir ? join11(dir, "plugin-permissions.json") : null;
-  const approved = file2 && existsSync12(file2) ? JSON.parse(readFileSync12(file2, "utf8")) : {};
+  const file2 = dir ? join12(dir, "plugin-permissions.json") : null;
+  const approved = file2 && existsSync13(file2) ? JSON.parse(readFileSync13(file2, "utf8")) : {};
   if (asked.every((p2) => approved[manifest2.id]?.includes(p2))) return asked.slice();
   const answer2 = await askConfirmation({
     id: newConfirmId(),
@@ -401131,8 +402055,8 @@ async function approvedPermissions(manifest2, dir) {
   });
   if (!answer2.approved) throw new CliError(`${manifest2.name} was not run: ${answer2.reason}.`, 3);
   if (file2) {
-    mkdirSync8(dirname4(file2), { recursive: true });
-    writeFileSync9(file2, JSON.stringify({ ...approved, [manifest2.id]: asked }));
+    mkdirSync9(dirname5(file2), { recursive: true });
+    writeFileSync10(file2, JSON.stringify({ ...approved, [manifest2.id]: asked }));
   }
   return asked.slice();
 }
@@ -401145,8 +402069,8 @@ async function runPluginHeadless(plugin, opts) {
   const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
   const storageDir = opts.storageDir ?? null;
   const granted = await approvedPermissions(manifest2, storageDir);
-  const storageFile = storageDir ? join11(storageDir, "plugin-storage", `${manifest2.id}.json`) : null;
-  const storage = storageFile && existsSync12(storageFile) ? JSON.parse(readFileSync12(storageFile, "utf8")) : {};
+  const storageFile = storageDir ? join12(storageDir, "plugin-storage", `${manifest2.id}.json`) : null;
+  const storage = storageFile && existsSync13(storageFile) ? JSON.parse(readFileSync13(storageFile, "utf8")) : {};
   const errors2 = [];
   const app = (what) => new Error(`${manifest2.name} ${what}, which only works in the app: install it there with \`popcraft plugins install\`.`);
   let finish3;
@@ -401172,8 +402096,8 @@ async function runPluginHeadless(plugin, opts) {
       storageSet: async (key5, value3) => {
         storage[key5] = value3;
         if (!storageFile) return;
-        mkdirSync8(dirname4(storageFile), { recursive: true });
-        writeFileSync9(storageFile, JSON.stringify(storage));
+        mkdirSync9(dirname5(storageFile), { recursive: true });
+        writeFileSync10(storageFile, JSON.stringify(storage));
       },
       exportNode: async () => {
         throw app("renders with the canvas");
@@ -401226,7 +402150,7 @@ async function runPluginHeadless(plugin, opts) {
 async function runPluginCommand(args2, flags, out) {
   const [ref3, file2] = args2;
   if (!ref3 || !file2) throw usage("Usage: popcraft plugins run <plugin> <file.popcraft> [--command <id>] [--out <file>] [--dry-run] [--timeout <seconds>]");
-  if (!existsSync12(file2)) throw usage(`No such file: ${file2}`);
+  if (!existsSync13(file2)) throw usage(`No such file: ${file2}`);
   const plugin = loadPlugin(ref3, flagString(flags, "dataDir") ?? desktopDataDir());
   openInStore(readPopcraft(file2));
   const before = currentDocument();
@@ -401356,7 +402280,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.13.2";
+var VERSION2 = "0.15.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):
@@ -401398,6 +402322,10 @@ Templates (made as PopCraft's own are, with @popcraft/kit installed beside them)
   popcraft publish [dir] [--dry-run] [--changed-since <ref>]   marketplace items under dir (default: .), templates
                                                        with their media/ and pictures/
 
+Storefronts (one design, bound to a store's data, as a store's project):
+  popcraft storefront <file> [--target next-commerce|shopify-theme] [--out <dir>] [--page <id|name>]
+                      [--styling inline|tailwind] [--dir components/popcraft] [--app-url <url>]
+
 The desktop app's local folders:
   popcraft plugins|themes|fonts|skills|agents [list | install <path|url> | remove <name> | path]
   popcraft plugins run <plugin> <file> [--command <id>]   a plugin's main script on the file, sandboxed (no panel)
@@ -401520,6 +402448,10 @@ async function main(argv) {
       const { runTemplate: runTemplate2 } = await Promise.resolve().then(() => (init_template(), template_exports));
       return runTemplate2(rest, flags, { out, appUrl: (flagString(flags, "appUrl") ?? process.env.POPCRAFT_APP_URL ?? url4).replace(/\/+$/, ""), target: target2 });
     }
+    case "storefront": {
+      const { runStorefront: runStorefront2 } = await Promise.resolve().then(() => (init_storefront3(), storefront_exports2));
+      return runStorefront2(rest, flags, out, (flagString(flags, "appUrl") ?? process.env.POPCRAFT_APP_URL ?? url4).replace(/\/+$/, ""));
+    }
     case "pictures": {
       const { runPictures: runPictures2 } = await Promise.resolve().then(() => (init_pictures(), pictures_exports));
       await runPictures2(rest[0] ?? ".", (flagString(flags, "appUrl") ?? process.env.POPCRAFT_APP_URL ?? url4).replace(/\/+$/, ""), out);