@popcraft/cli 0.15.0 → 0.16.0

package/dist/popcraft.mjs

@@ -1186,7 +1186,7 @@ function operations(spec = openapi) {
 }
 async function call(target2, method, path, opts = {}) {
   const qs = new URLSearchParams(opts.query ?? {}).toString();
-  const headers = { "user-agent": `popcraft-cli/${"0.15.0"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.16.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -32553,6 +32553,7 @@ var init_en2 = __esm({
       "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#next-commerce-store": "Export storefront as a Next.js Commerce store",
       "command:export.storefront#shopify-theme": "Export storefront as a Shopify theme",
       "command:export.web": "Export as web code\u2026",
       "command:export.webm": "Export animation as WebM",
@@ -35655,6 +35656,18 @@ var init_en2 = __esm({
       "stateMachine.true": "true",
       "stateMachine.whenAllHold": "Taken when all of these hold:",
       "stateMachine.wholeFrame": "The whole frame",
+      "storeSection.about": "Deploy it as a store that sells: a Next.js Commerce store on Vercel, with your Shopify store's products, cart and checkout.",
+      "storeSection.building": "Building:",
+      "storeSection.connect": "Connect Shopify and Vercel\u2026",
+      "storeSection.deploy": "Deploy store",
+      "storeSection.deployAgain": "Deploy store again",
+      "storeSection.deploying": "Deploying store\u2026",
+      "storeSection.hostedOn": "Hosted on Vercel",
+      "storeSection.live": "Live:",
+      "storeSection.noHost": "Not connected",
+      "storeSection.noShop": "Not connected",
+      "storeSection.sellsFrom": "Sells from Shopify",
+      "storeSection.title": "Store",
       "strokeEndpointDropdown.circle": "Circle",
       "strokeEndpointDropdown.diamond": "Diamond",
       "strokeEndpointDropdown.line": "Line",
@@ -254729,7 +254742,7 @@ function hrefOf(link2, nodes, routes) {
   if (!link2) return null;
   switch (link2.kind) {
     case "url":
-      return safeExternalUrl(link2.url);
+      return sitePath(link2.url) ?? safeExternalUrl(link2.url);
     case "email":
       return /^[^\s@]+@[^\s@]+$/.test(link2.value.trim()) ? `mailto:${link2.value.trim()}` : null;
     case "tel": {
@@ -254742,6 +254755,10 @@ function hrefOf(link2, nodes, routes) {
       return nodes[link2.nodeId] ? `#${anchorOf(nodes[link2.nodeId])}` : null;
   }
 }
+function sitePath(raw) {
+  const path = raw.trim().replace(/[\x00-\x1f\x7f]/g, "");
+  return /^\/(?![/\\])/.test(path) ? path : null;
+}
 var anchorOf, cleanAnchor, opensNewTab;
 var init_semantics = __esm({
   "lib/document/semantics.ts"() {
@@ -254749,7 +254766,7 @@ var init_semantics = __esm({
     init_safe_url();
     anchorOf = (node2) => node2.semantics?.anchor || `pc-${node2.id.replace(/[^A-Za-z0-9_-]/g, "-")}`;
     cleanAnchor = (raw) => raw.trim().toLowerCase().replace(/^#/, "").replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
-    opensNewTab = (link2) => link2.kind === "url" && link2.newTab !== false;
+    opensNewTab = (link2) => link2.kind === "url" && link2.newTab !== false && !sitePath(link2.url);
   }
 });
 
@@ -305519,7 +305536,6 @@ function applyTextPath(layout2, path, tp, rebase = true) {
 var defaultCircleRadius, ownsPath, mapPoint;
 var init_text_path = __esm({
   "lib/engine/text/text-path.ts"() {
-    "use strict";
     init_scene_graph();
     init_transform();
     init_shape_to_path();
@@ -305637,7 +305653,6 @@ function areaBounds(rings) {
 }
 var init_text_area = __esm({
   "lib/engine/text/text-area.ts"() {
-    "use strict";
   }
 });
 
@@ -310306,7 +310321,6 @@ function videoPixelSize(resolution, aspect) {
 var VIDEO_ASPECTS, VIDEO_RESOLUTIONS, SEEDANCE_ASPECTS, range, VIDEO_MODELS, DEFAULT_VIDEO_MODEL, videoModel, VIDEO_LIMITS;
 var init_video_models = __esm({
   "lib/ai/video-models.ts"() {
-    "use strict";
     VIDEO_ASPECTS = ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9"];
     VIDEO_RESOLUTIONS = ["480p", "720p", "1080p"];
     SEEDANCE_ASPECTS = ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9"];
@@ -310795,6 +310809,7 @@ function agentToolList() {
 var AGENT_CAPABILITIES, legacyCommandId, legacyTools, blobToDataUrl3, provided, legacyTool, legacyToolList;
 var init_agent = __esm({
   "lib/commands/agent.ts"() {
+    "use strict";
     init_types5();
     init_registry();
     init_errors();
@@ -314648,6 +314663,11 @@ var init_storefront_targets = __esm({
   "lib/io/web/project/storefront-targets.ts"() {
     "use strict";
     STOREFRONT_TARGET_INFO = {
+      "next-commerce-store": {
+        label: "Next.js Commerce store",
+        short: "Next.js Commerce",
+        description: "A whole Next.js Commerce store drawn by the design: deploy it with a Shopify store's domain and Storefront token, and it sells."
+      },
       "next-commerce": {
         label: "Next.js Commerce components",
         short: "Next.js Commerce",
@@ -319522,7 +319542,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.15.0",
+      version: "0.16.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",
@@ -346083,6 +346103,7 @@ var components_exports = {};
 __export(components_exports, {
   componentFiles: () => componentFiles,
   componentMedia: () => componentMedia,
+  componentPlan: () => componentPlan,
   componentScreens: () => componentScreens
 });
 function componentScreens(doc2, pageId2 = doc2.pages[0], nodeCap = 2e4) {
@@ -346097,6 +346118,35 @@ function componentScreens(doc2, pageId2 = doc2.pages[0], nodeCap = 2e4) {
     return { id: s.id, name: s.name, tree: media2.length ? { ...tree, rules: [...tree.rules ?? [], ...media2] } : tree, ...about ? { about } : {} };
   });
 }
+function componentPlan(doc2, screens) {
+  const names = /* @__PURE__ */ new Set();
+  return screens.map((s) => {
+    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 propName2 = (b) => {
+      let p2 = b;
+      for (let n = 2; props.some((x2) => x2.name === p2) || p2 === "item"; n++) p2 = `${b}${n}`;
+      return p2;
+    };
+    if (s.about) {
+      const schema = s.about.schema;
+      props.push({ name: propName2(camel3(singular(COMMERCE_PROP[schema].name))), type: COMMERCE_PROP[schema].type, doc: `The ${singular(s.about.name).toLowerCase()} this page is about; none: the design's first sample.`, schema, about: true, collectionId: s.about.id });
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const n of all3(s.tree.root)) {
+      const c2 = n.repeat && doc2.collections?.[n.repeat.collectionId];
+      if (!c2?.schema || seen.has(c2.id)) continue;
+      seen.add(c2.id);
+      const { type, one } = COMMERCE_PROP[c2.schema];
+      props.push({ name: propName2(one ? COMMERCE_PROP[c2.schema].name : camel3(c2.name)), type: one ? type : `${type}[]`, doc: `${c2.name}; none: the design's samples.`, schema: c2.schema, collectionId: c2.id });
+    }
+    for (const a of new Set(all3(s.tree.root).map((n) => n.action).filter((a2) => !!a2))) props.push({ name: COMMERCE_ACTION_PROP[a], type: "(formData: FormData) => void | Promise<void>", doc: `What sending its ${a} form does (a server action).`, action: a });
+    return { screen: s, name: name2, props };
+  });
+}
 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();
@@ -346114,46 +346164,27 @@ function componentFiles(doc2, screens, o = {}) {
   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) => {
+  componentPlan(doc2, screens).forEach(({ name: name2, props }, i2) => {
+    const s = screens[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).` });
+    for (const p2 of props) {
+      if (!p2.schema || !p2.collectionId) continue;
+      types.add(COMMERCE_PROP[p2.schema].type);
+      const c2 = doc2.collections[p2.collectionId];
+      if (p2.about) {
+        samples.push(sampleConst(`SAMPLE_${p2.name.toUpperCase()}`, doc2, c2, 1));
+        prelude.push(`const item = ${p2.name} ? commerceItem(${JSON.stringify(p2.schema)}, ${p2.name}) : SAMPLE_${p2.name.toUpperCase()}`);
+      } else {
+        listProp.set(c2.id, p2.name);
+        samples.push(sampleConst(`SAMPLE_${p2.name.toUpperCase()}`, doc2, c2));
+      }
+    }
     const body = serializeReact(tree, {
       ids: true,
       name: name2,
@@ -346235,8 +346266,35 @@ var init_components = __esm({
   }
 });
 
-// lib/io/web/project/shopify-theme.ts
-function kindOf(s, doc2, route2) {
+// lib/io/web/project/storefront-prepare.ts
+var storefront_prepare_exports = {};
+__export(storefront_prepare_exports, {
+  storefrontInputs: () => storefrontInputs
+});
+async function storefrontInputs(doc2, pageId2, nodeCap) {
+  const [{ componentMedia: componentMedia2, componentScreens: componentScreens2 }, { flatten: flatten3, resolveWebAssets: resolveWebAssets2 }, { rendererAssetResolvers: rendererAssetResolvers2 }, { loadMediaBlob: loadMediaBlob2 }] = await Promise.all([
+    Promise.resolve().then(() => (init_components(), components_exports)),
+    Promise.resolve().then(() => (init_web(), web_exports)),
+    Promise.resolve().then(() => (init_resolvers(), resolvers_exports)),
+    Promise.resolve().then(() => (init_media_store(), media_store_exports))
+  ]);
+  const screens = componentScreens2(doc2, pageId2, nodeCap);
+  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 };
+  }));
+  return { screens, media: media2 };
+}
+var init_storefront_prepare = __esm({
+  "lib/io/web/project/storefront-prepare.ts"() {
+  }
+});
+
+// lib/io/web/project/storefront-pages.ts
+function storefrontPageKind(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);
@@ -346245,6 +346303,20 @@ function kindOf(s, doc2, route2) {
   if (route2 === "/") return "index";
   return "page";
 }
+var every2;
+var init_storefront_pages = __esm({
+  "lib/io/web/project/storefront-pages.ts"() {
+    "use strict";
+    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/shopify-theme.ts
 function liquidNode(node2, schema, v) {
   const fields = LIQUID[schema](v);
   const out = boundNode(node2, (key5) => key5 in fields ? `{{ ${fields[key5]} }}` : key5 === "id" ? `{{ ${v}.id }}` : "");
@@ -346280,7 +346352,7 @@ function shopifyThemeFiles(doc2, screens, o = {}) {
   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));
+    let kind = storefrontPageKind(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}`;
@@ -346388,10 +346460,11 @@ ${JSON.stringify({ name: `${title} (PopCraft)`, settings: [] }, null, 2)}
   files.push({ path: "locales/en.default.json", content: "{}\n" });
   return files;
 }
-var MEDIA_REF3, MEDIA_EXT2, LIQUID, LOOP_VAR, FORMS, every2;
+var MEDIA_REF3, MEDIA_EXT2, LIQUID, LOOP_VAR, FORMS;
 var init_shopify_theme = __esm({
   "lib/io/web/project/shopify-theme.ts"() {
     "use strict";
+    init_storefront_pages();
     init_fonts3();
     init_html();
     init_naming();
@@ -346433,11 +346506,384 @@ var init_shopify_theme = __esm({
       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/generated/next-commerce-shell.ts
+var NEXT_COMMERCE_SHELL;
+var init_next_commerce_shell = __esm({
+  "lib/io/web/generated/next-commerce-shell.ts"() {
+    "use strict";
+    NEXT_COMMERCE_SHELL = {
+      ".env.example": 'COMPANY_NAME="Vercel Inc."\nSITE_NAME="Next.js Commerce"\nSHOPIFY_REVALIDATION_SECRET=""\nSHOPIFY_STOREFRONT_ACCESS_TOKEN=""\nSHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"\n',
+      ".gitignore": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n.playwright\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*\n!.env.example\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n.env*.local\n",
+      "README.md": "# Next.js Commerce, drawn by a PopCraft design\n\n[Next.js Commerce](https://github.com/vercel/commerce) with its pages rendered by components exported from\n[PopCraft](https://popcraft.app). The store does what Next.js Commerce does \u2014 Shopify's Storefront API, the cart\ncookie, server actions, checkout, search, revalidation \u2014 and the design is PopCraft's: the **Fieldwork** storefront\ntemplate, its layout at every width, its type, colours and motion.\n\nA designer changes the shop in PopCraft; `npm run design:sync` exports it again, and the store renders the new design\nwith its own products. No component is rewritten by hand.\n\n## How it fits together\n\n| Path | What it is |\n| --- | --- |\n| `design/fieldwork.popcraft` | The design: open it in PopCraft (**Import as new file**), change it, save it back here |\n| `design/media/` | Its pictures (the hero, the story, the sample products), by content hash |\n| `components/popcraft/` | The design exported as components: `HomePage`, `SearchPage`, `CategoryPage`, `ProductPage`, `CartPage` |\n| `public/popcraft/` | The pictures they draw |\n| `app/` | Next.js Commerce's routes, each fetching from Shopify and rendering a PopCraft component |\n| `app/actions.ts` | The design's forms (add to cart, remove, checkout, search) as server actions over Next.js Commerce's cart |\n| `lib/shopify/`, `components/cart/actions.ts` | Next.js Commerce's Shopify client and cart actions, unchanged |\n| `lib/popcraft.ts` | What every page passes: the visitor's cart (an empty one when there is none) and the menu |\n\nA page is Next.js Commerce's data handed to a component:\n\n```tsx\nexport default async function Product(props: { params: Promise<{ handle: string }> }) {\n  const product = await getProduct((await props.params).handle);\n  if (!product) return notFound();\n  const [related, frame] = await Promise.all([getProductRecommendations(product.id), storeFrame()]);\n  return <ProductPage product={product} products={related} onAddToCart={addToCart} {...frame} />;\n}\n```\n\nThe components take Next.js Commerce's own types (`Product`, `Cart`, `CartItem`, `Menu`) from\n`@popcraft/runtime/commerce`, so nothing is mapped by hand. See\n[Storefront components](https://popcraft.app/docs/exporting/commerce) for how a design is bound.\n\n## Run it\n\nYou need a Shopify store with the Headless channel (or the Storefront API) and Node 24 or later.\n\n```bash\ncp .env.example .env.local   # your store's domain and Storefront access token\nnpm install\nnpm run dev\n```\n\n| Variable | What it is |\n| --- | --- |\n| `SHOPIFY_STORE_DOMAIN` | `your-store.myshopify.com` |\n| `SHOPIFY_STOREFRONT_ACCESS_TOKEN` | From the Headless channel or a custom app with Storefront API access |\n| `SHOPIFY_REVALIDATION_SECRET` | Any secret: Shopify's webhooks call `/api/revalidate?secret=\u2026` when products change |\n| `SITE_NAME`, `COMPANY_NAME` | The store's name in titles and the footer |\n\nThe footer draws Shopify's menu with the handle `next-js-frontend-footer-menu`, as Next.js Commerce does. Deploy it like\nany Next.js app; on Vercel, add the variables to the project.\n\n## Change the design\n\n1. Open `design/fieldwork.popcraft` in PopCraft, or start from another storefront template (**New file \u203A Web \u203A\n   Kiln storefront**) and save it here.\n2. Change anything: the layout, type, colours, motion, copy. Keep the lists and forms bound (Collections, Repeat and\n   the forms' **Sending it**): they are how the store's data gets in.\n3. Export again:\n\n```bash\nnpm run design:sync   # popcraft storefront design/fieldwork.popcraft --target next-commerce --out .\n```\n\nProduct pictures, titles and prices come from Shopify; what the design draws itself (the hero, the story) comes from\n`design/media`.\n\n## What stays Next.js Commerce's\n\nVariant selection, the cart's optimistic updates, sorting and filtering, and checkout are the store's. The design's add\nto cart sends the first available variant; a store that sells options renders Next.js Commerce's variant selector\nbeside the component.\n\nNext.js Commerce is MIT licensed (`license.md`).\n",
+      "app/actions.ts": '"use server";\n\n// The design\'s storefront forms (add to cart, remove, checkout, search) as server actions. Each takes the form\'s own\n// fields \u2014 the names the design gave them \u2014 and calls Next.js Commerce\'s cart actions.\nimport {\n  addItem,\n  createCartAndSetCookie,\n  redirectToCheckout,\n  removeItem,\n  updateItemQuantity,\n} from "components/cart/actions";\nimport { cookies } from "next/headers";\nimport { redirect } from "next/navigation";\n\nconst field = (form: FormData, name: string) => String(form.get(name) ?? "");\n\nexport async function addToCart(form: FormData) {\n  if (!(await cookies()).get("cartId")) await createCartAndSetCookie();\n  await addItem(null, field(form, "merchandiseId"));\n}\n\nexport async function removeCartLine(form: FormData) {\n  await removeItem(null, field(form, "merchandiseId"));\n}\n\nexport async function updateCartLine(form: FormData) {\n  await updateItemQuantity(null, {\n    merchandiseId: field(form, "merchandiseId"),\n    quantity: Number(field(form, "quantity")),\n  });\n}\n\nexport async function checkout() {\n  await redirectToCheckout();\n}\n\nexport async function search(form: FormData) {\n  const q = field(form, "q").trim();\n  redirect(q ? `/search?q=${encodeURIComponent(q)}` : "/search");\n}\n',
+      "app/api/revalidate/route.ts": 'import { revalidate } from "lib/shopify";\nimport { NextRequest, NextResponse } from "next/server";\n\nexport async function POST(req: NextRequest): Promise<NextResponse> {\n  return revalidate(req);\n}\n',
+      "app/error.tsx": '"use client";\n\nexport default function Error({ reset }: { reset: () => void }) {\n  return (\n    <div style={{ maxWidth: 560, margin: "64px auto", padding: 32, fontFamily: "system-ui, sans-serif" }}>\n      <h2 style={{ margin: 0 }}>Something went wrong</h2>\n      <p>There was an issue with the store. Please try again.</p>\n      <button onClick={() => reset()} style={{ padding: "12px 20px", borderRadius: 8, border: 0, background: "#2B3A55", color: "#fff", cursor: "pointer" }}>\n        Try again\n      </button>\n    </div>\n  );\n}\n',
+      "app/globals.css": "html,\nbody {\n  margin: 0;\n  min-height: 100%;\n}\n\nimg,\npicture,\nsvg,\nvideo {\n  display: block;\n  max-width: 100%;\n}\n",
+      "app/layout.tsx": 'import { baseUrl } from "lib/utils";\nimport { ReactNode } from "react";\nimport "./globals.css";\n\nconst { SITE_NAME } = process.env;\n\nexport const metadata = {\n  metadataBase: new URL(baseUrl),\n  title: {\n    default: SITE_NAME!,\n    template: `%s | ${SITE_NAME}`,\n  },\n  robots: {\n    follow: true,\n    index: true,\n  },\n};\n\n// The design draws the whole page \u2014 its bar, its footer \u2014 so the layout is only the document.\nexport default function RootLayout({ children }: { children: ReactNode }) {\n  return (\n    <html lang="en">\n      <body>{children}</body>\n    </html>\n  );\n}\n',
+      "app/robots.ts": 'import { baseUrl } from "lib/utils";\n\nexport default function robots() {\n  return {\n    rules: [\n      {\n        userAgent: "*",\n      },\n    ],\n    sitemap: `${baseUrl}/sitemap.xml`,\n    host: baseUrl,\n  };\n}\n',
+      "app/sitemap.ts": 'import { getCollections, getPages, getProducts } from "lib/shopify";\nimport { baseUrl, validateEnvironmentVariables } from "lib/utils";\nimport { MetadataRoute } from "next";\n\ntype Route = {\n  url: string;\n  lastModified: string;\n};\n\nexport const dynamic = "force-dynamic";\n\nexport default async function sitemap(): Promise<MetadataRoute.Sitemap> {\n  validateEnvironmentVariables();\n\n  const routesMap = [""].map((route) => ({\n    url: `${baseUrl}${route}`,\n    lastModified: new Date().toISOString(),\n  }));\n\n  const collectionsPromise = getCollections().then((collections) =>\n    collections.map((collection) => ({\n      url: `${baseUrl}${collection.path}`,\n      lastModified: collection.updatedAt,\n    })),\n  );\n\n  const productsPromise = getProducts({}).then((products) =>\n    products.map((product) => ({\n      url: `${baseUrl}/product/${product.handle}`,\n      lastModified: product.updatedAt,\n    })),\n  );\n\n  const pagesPromise = getPages().then((pages) =>\n    pages.map((page) => ({\n      url: `${baseUrl}/${page.handle}`,\n      lastModified: page.updatedAt,\n    })),\n  );\n\n  let fetchedRoutes: Route[] = [];\n\n  try {\n    fetchedRoutes = (\n      await Promise.all([collectionsPromise, productsPromise, pagesPromise])\n    ).flat();\n  } catch (error) {\n    throw JSON.stringify(error, null, 2);\n  }\n\n  return [...routesMap, ...fetchedRoutes];\n}\n',
+      "components/cart/actions.ts": `"use server";
+
+import { TAGS } from "lib/constants";
+import {
+  addToCart,
+  createCart,
+  getCart,
+  removeFromCart,
+  updateCart,
+} from "lib/shopify";
+import { updateTag } from "next/cache";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export async function addItem(
+  prevState: any,
+  selectedVariantId: string | undefined
+) {
+  if (!selectedVariantId) {
+    return "Error adding item to cart";
+  }
+
+  try {
+    await addToCart([{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    updateTag(TAGS.cart);
+  } catch (e) {
+    return "Error adding item to cart";
+  }
+}
+
+export async function removeItem(prevState: any, merchandiseId: string) {
+  try {
+    const cart = await getCart();
+
+    if (!cart) {
+      return "Error fetching cart";
+    }
+
+    const lineItem = cart.lines.find(
+      (line) => line.merchandise.id === merchandiseId
+    );
+
+    if (lineItem && lineItem.id) {
+      await removeFromCart([lineItem.id]);
+      updateTag(TAGS.cart);
+    } else {
+      return "Item not found in cart";
+    }
+  } catch (e) {
+    return "Error removing item from cart";
+  }
+}
+
+export async function updateItemQuantity(
+  prevState: any,
+  payload: {
+    merchandiseId: string;
+    quantity: number;
+  }
+) {
+  const { merchandiseId, quantity } = payload;
+
+  try {
+    const cart = await getCart();
+
+    if (!cart) {
+      return "Error fetching cart";
+    }
+
+    const lineItem = cart.lines.find(
+      (line) => line.merchandise.id === merchandiseId
+    );
+
+    if (lineItem && lineItem.id) {
+      if (quantity === 0) {
+        await removeFromCart([lineItem.id]);
+      } else {
+        await updateCart([
+          {
+            id: lineItem.id,
+            merchandiseId,
+            quantity,
+          },
+        ]);
+      }
+    } else if (quantity > 0) {
+      // If the item doesn't exist in the cart and quantity > 0, add it
+      await addToCart([{ merchandiseId, quantity }]);
+    }
+
+    updateTag(TAGS.cart);
+  } catch (e) {
+    console.error(e);
+    return "Error updating item quantity";
+  }
+}
+
+export async function redirectToCheckout() {
+  let cart = await getCart();
+  redirect(cart!.checkoutUrl);
+}
+
+export async function createCartAndSetCookie() {
+  let cart = await createCart();
+  (await cookies()).set("cartId", cart.id!);
+}
+`,
+      "lib/constants.ts": 'export type SortFilterItem = {\n  title: string;\n  slug: string | null;\n  sortKey: "RELEVANCE" | "BEST_SELLING" | "CREATED_AT" | "PRICE";\n  reverse: boolean;\n};\n\nexport const defaultSort: SortFilterItem = {\n  title: "Relevance",\n  slug: null,\n  sortKey: "RELEVANCE",\n  reverse: false,\n};\n\nexport const sorting: SortFilterItem[] = [\n  defaultSort,\n  {\n    title: "Trending",\n    slug: "trending-desc",\n    sortKey: "BEST_SELLING",\n    reverse: false,\n  }, // asc\n  {\n    title: "Latest arrivals",\n    slug: "latest-desc",\n    sortKey: "CREATED_AT",\n    reverse: true,\n  },\n  {\n    title: "Price: Low to high",\n    slug: "price-asc",\n    sortKey: "PRICE",\n    reverse: false,\n  }, // asc\n  {\n    title: "Price: High to low",\n    slug: "price-desc",\n    sortKey: "PRICE",\n    reverse: true,\n  },\n];\n\nexport const TAGS = {\n  collections: "collections",\n  products: "products",\n  cart: "cart",\n};\n\nexport const HIDDEN_PRODUCT_TAG = "nextjs-frontend-hidden";\nexport const DEFAULT_OPTION = "Default Title";\nexport const SHOPIFY_GRAPHQL_API_ENDPOINT = "/api/2023-01/graphql.json";\n',
+      "lib/popcraft.ts": `// What every page hands its PopCraft component: the visitor's cart and the store's menu. A component given nothing
+// for a list draws the design's sample records, so an empty cart is passed as one, never left out.
+import { getCart, getCollections, getMenu } from "lib/shopify";
+import type { Cart } from "lib/shopify/types";
+
+export const EMPTY_CART: Cart = {
+  id: undefined,
+  checkoutUrl: "",
+  totalQuantity: 0,
+  lines: [],
+  cost: {
+    subtotalAmount: { amount: "0", currencyCode: "USD" },
+    totalAmount: { amount: "0", currencyCode: "USD" },
+    totalTaxAmount: { amount: "0", currencyCode: "USD" },
+  },
+};
+
+export async function storeFrame() {
+  const [cart, menu] = await Promise.all([getCart(), storeMenu()]);
+  return { cart: cart ?? EMPTY_CART, menu };
+}
+
+/**
+ * The store's menu: Shopify's main menu (Online Store \u203A Navigation), or \u2014 a store that has none \u2014 every product and
+ * its first categories, so the design's menu always goes to pages the store has.
+ */
+async function storeMenu() {
+  const menu = await getMenu("main-menu");
+  if (menu.length) return menu;
+  const categories = await storeCategories();
+  return [{ title: "Shop all", path: "/search" }, ...categories.slice(0, 3).map((c) => ({ title: c.title, path: c.path }))];
+}
+
+/** The store's categories, as the search and category pages list them ("All" is Next.js Commerce's own, left out). */
+export async function storeCategories() {
+  return (await getCollections()).filter((c) => c.handle !== "");
+}
+`,
+      "lib/shopify/fragments/cart.ts": 'import productFragment from "./product";\n\nconst cartFragment = /* GraphQL */ `\n  fragment cart on Cart {\n    id\n    checkoutUrl\n    cost {\n      subtotalAmount {\n        amount\n        currencyCode\n      }\n      totalAmount {\n        amount\n        currencyCode\n      }\n      totalTaxAmount {\n        amount\n        currencyCode\n      }\n    }\n    lines(first: 100) {\n      edges {\n        node {\n          id\n          quantity\n          cost {\n            totalAmount {\n              amount\n              currencyCode\n            }\n          }\n          merchandise {\n            ... on ProductVariant {\n              id\n              title\n              selectedOptions {\n                name\n                value\n              }\n              product {\n                ...product\n              }\n            }\n          }\n        }\n      }\n    }\n    totalQuantity\n  }\n  ${productFragment}\n`;\n\nexport default cartFragment;\n',
+      "lib/shopify/fragments/image.ts": "const imageFragment = /* GraphQL */ `\n  fragment image on Image {\n    url\n    altText\n    width\n    height\n  }\n`;\n\nexport default imageFragment;\n",
+      "lib/shopify/fragments/product.ts": 'import imageFragment from "./image";\nimport seoFragment from "./seo";\n\nconst productFragment = /* GraphQL */ `\n  fragment product on Product {\n    id\n    handle\n    availableForSale\n    title\n    description\n    descriptionHtml\n    options {\n      id\n      name\n      values\n    }\n    priceRange {\n      maxVariantPrice {\n        amount\n        currencyCode\n      }\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    variants(first: 250) {\n      edges {\n        node {\n          id\n          title\n          availableForSale\n          selectedOptions {\n            name\n            value\n          }\n          price {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n    featuredImage {\n      ...image\n    }\n    images(first: 20) {\n      edges {\n        node {\n          ...image\n        }\n      }\n    }\n    seo {\n      ...seo\n    }\n    tags\n    updatedAt\n  }\n  ${imageFragment}\n  ${seoFragment}\n`;\n\nexport default productFragment;\n',
+      "lib/shopify/fragments/seo.ts": "const seoFragment = /* GraphQL */ `\n  fragment seo on SEO {\n    description\n    title\n  }\n`;\n\nexport default seoFragment;\n",
+      "lib/shopify/index.ts": 'import {\n  HIDDEN_PRODUCT_TAG,\n  SHOPIFY_GRAPHQL_API_ENDPOINT,\n  TAGS,\n} from "lib/constants";\nimport { isShopifyError } from "lib/type-guards";\nimport { ensureStartsWith } from "lib/utils";\nimport {\n  unstable_cacheLife as cacheLife,\n  unstable_cacheTag as cacheTag,\n  revalidateTag,\n} from "next/cache";\nimport { cookies, headers } from "next/headers";\nimport { NextRequest, NextResponse } from "next/server";\nimport {\n  addToCartMutation,\n  createCartMutation,\n  editCartItemsMutation,\n  removeFromCartMutation,\n} from "./mutations/cart";\nimport { getCartQuery } from "./queries/cart";\nimport {\n  getCollectionProductsQuery,\n  getCollectionQuery,\n  getCollectionsQuery,\n} from "./queries/collection";\nimport { getMenuQuery } from "./queries/menu";\nimport { getPageQuery, getPagesQuery } from "./queries/page";\nimport {\n  getProductQuery,\n  getProductRecommendationsQuery,\n  getProductsQuery,\n} from "./queries/product";\nimport {\n  Cart,\n  Collection,\n  Connection,\n  Image,\n  Menu,\n  Page,\n  Product,\n  ShopifyAddToCartOperation,\n  ShopifyCart,\n  ShopifyCartOperation,\n  ShopifyCollection,\n  ShopifyCollectionOperation,\n  ShopifyCollectionProductsOperation,\n  ShopifyCollectionsOperation,\n  ShopifyCreateCartOperation,\n  ShopifyMenuOperation,\n  ShopifyPageOperation,\n  ShopifyPagesOperation,\n  ShopifyProduct,\n  ShopifyProductOperation,\n  ShopifyProductRecommendationsOperation,\n  ShopifyProductsOperation,\n  ShopifyRemoveFromCartOperation,\n  ShopifyUpdateCartOperation,\n} from "./types";\n\nconst domain = process.env.SHOPIFY_STORE_DOMAIN\n  ? ensureStartsWith(process.env.SHOPIFY_STORE_DOMAIN, "https://")\n  : "";\nconst endpoint = domain ? `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}` : "";\nconst key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;\n\ntype ExtractVariables<T> = T extends { variables: object }\n  ? T["variables"]\n  : never;\n\nexport async function shopifyFetch<T>({\n  headers,\n  query,\n  variables,\n}: {\n  headers?: HeadersInit;\n  query: string;\n  variables?: ExtractVariables<T>;\n}): Promise<{ status: number; body: T } | never> {\n  try {\n    if (!endpoint) {\n      throw new Error("SHOPIFY_STORE_DOMAIN environment variable is not set");\n    }\n\n    const result = await fetch(endpoint, {\n      method: "POST",\n      headers: {\n        "Content-Type": "application/json",\n        "X-Shopify-Storefront-Access-Token": key,\n        ...headers,\n      },\n      body: JSON.stringify({\n        ...(query && { query }),\n        ...(variables && { variables }),\n      }),\n    });\n\n    const body = await result.json();\n\n    if (body.errors) {\n      throw body.errors[0];\n    }\n\n    return {\n      status: result.status,\n      body,\n    };\n  } catch (e) {\n    if (isShopifyError(e)) {\n      throw {\n        cause: e.cause?.toString() || "unknown",\n        status: e.status || 500,\n        message: e.message,\n        query,\n      };\n    }\n\n    throw {\n      error: e,\n      query,\n    };\n  }\n}\n\nconst removeEdgesAndNodes = <T>(array: Connection<T>): T[] => {\n  return array.edges.map((edge) => edge?.node);\n};\n\nconst reshapeCart = (cart: ShopifyCart): Cart => {\n  if (!cart.cost?.totalTaxAmount) {\n    cart.cost.totalTaxAmount = {\n      amount: "0.0",\n      currencyCode: cart.cost.totalAmount.currencyCode,\n    };\n  }\n\n  return {\n    ...cart,\n    lines: removeEdgesAndNodes(cart.lines),\n  };\n};\n\nconst reshapeCollection = (\n  collection: ShopifyCollection\n): Collection | undefined => {\n  if (!collection) {\n    return undefined;\n  }\n\n  return {\n    ...collection,\n    path: `/search/${collection.handle}`,\n  };\n};\n\nconst reshapeCollections = (collections: ShopifyCollection[]) => {\n  const reshapedCollections = [];\n\n  for (const collection of collections) {\n    if (collection) {\n      const reshapedCollection = reshapeCollection(collection);\n\n      if (reshapedCollection) {\n        reshapedCollections.push(reshapedCollection);\n      }\n    }\n  }\n\n  return reshapedCollections;\n};\n\nconst reshapeImages = (images: Connection<Image>, productTitle: string) => {\n  const flattened = removeEdgesAndNodes(images);\n\n  return flattened.map((image) => {\n    const filename = image.url.match(/.*\\/(.*)\\..*/)?.[1];\n    return {\n      ...image,\n      altText: image.altText || `${productTitle} - ${filename}`,\n    };\n  });\n};\n\nconst reshapeProduct = (\n  product: ShopifyProduct,\n  filterHiddenProducts: boolean = true\n) => {\n  if (\n    !product ||\n    (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))\n  ) {\n    return undefined;\n  }\n\n  const { images, variants, ...rest } = product;\n\n  return {\n    ...rest,\n    images: reshapeImages(images, product.title),\n    variants: removeEdgesAndNodes(variants),\n  };\n};\n\nconst reshapeProducts = (products: ShopifyProduct[]) => {\n  const reshapedProducts = [];\n\n  for (const product of products) {\n    if (product) {\n      const reshapedProduct = reshapeProduct(product);\n\n      if (reshapedProduct) {\n        reshapedProducts.push(reshapedProduct);\n      }\n    }\n  }\n\n  return reshapedProducts;\n};\n\nexport async function createCart(): Promise<Cart> {\n  const res = await shopifyFetch<ShopifyCreateCartOperation>({\n    query: createCartMutation,\n  });\n\n  return reshapeCart(res.body.data.cartCreate.cart);\n}\n\nexport async function addToCart(\n  lines: { merchandiseId: string; quantity: number }[]\n): Promise<Cart> {\n  const cartId = (await cookies()).get("cartId")?.value!;\n  const res = await shopifyFetch<ShopifyAddToCartOperation>({\n    query: addToCartMutation,\n    variables: {\n      cartId,\n      lines,\n    },\n  });\n  return reshapeCart(res.body.data.cartLinesAdd.cart);\n}\n\nexport async function removeFromCart(lineIds: string[]): Promise<Cart> {\n  const cartId = (await cookies()).get("cartId")?.value!;\n  const res = await shopifyFetch<ShopifyRemoveFromCartOperation>({\n    query: removeFromCartMutation,\n    variables: {\n      cartId,\n      lineIds,\n    },\n  });\n\n  return reshapeCart(res.body.data.cartLinesRemove.cart);\n}\n\nexport async function updateCart(\n  lines: { id: string; merchandiseId: string; quantity: number }[]\n): Promise<Cart> {\n  const cartId = (await cookies()).get("cartId")?.value!;\n  const res = await shopifyFetch<ShopifyUpdateCartOperation>({\n    query: editCartItemsMutation,\n    variables: {\n      cartId,\n      lines,\n    },\n  });\n\n  return reshapeCart(res.body.data.cartLinesUpdate.cart);\n}\n\nexport async function getCart(): Promise<Cart | undefined> {\n  "use cache: private";\n  cacheTag(TAGS.cart);\n  cacheLife("seconds");\n\n  const cartId = (await cookies()).get("cartId")?.value;\n\n  if (!cartId) {\n    return undefined;\n  }\n\n  const res = await shopifyFetch<ShopifyCartOperation>({\n    query: getCartQuery,\n    variables: { cartId },\n  });\n\n  // Old carts becomes `null` when you checkout.\n  if (!res.body.data.cart) {\n    return undefined;\n  }\n\n  return reshapeCart(res.body.data.cart);\n}\n\nexport async function getCollection(\n  handle: string\n): Promise<Collection | undefined> {\n  "use cache";\n  cacheTag(TAGS.collections);\n  cacheLife("days");\n\n  const res = await shopifyFetch<ShopifyCollectionOperation>({\n    query: getCollectionQuery,\n    variables: {\n      handle,\n    },\n  });\n\n  return reshapeCollection(res.body.data.collection);\n}\n\nexport async function getCollectionProducts({\n  collection,\n  reverse,\n  sortKey,\n}: {\n  collection: string;\n  reverse?: boolean;\n  sortKey?: string;\n}): Promise<Product[]> {\n  "use cache";\n  cacheTag(TAGS.collections, TAGS.products);\n  cacheLife("days");\n\n  if (!endpoint) {\n    console.log(\n      `Skipping getCollectionProducts for \'${collection}\' - Shopify not configured`\n    );\n    return [];\n  }\n\n  const res = await shopifyFetch<ShopifyCollectionProductsOperation>({\n    query: getCollectionProductsQuery,\n    variables: {\n      handle: collection,\n      reverse,\n      sortKey: sortKey === "CREATED_AT" ? "CREATED" : sortKey,\n    },\n  });\n\n  if (!res.body.data.collection) {\n    console.log(`No collection found for \\`${collection}\\``);\n    return [];\n  }\n\n  return reshapeProducts(\n    removeEdgesAndNodes(res.body.data.collection.products)\n  );\n}\n\nexport async function getCollections(): Promise<Collection[]> {\n  "use cache";\n  cacheTag(TAGS.collections);\n  cacheLife("days");\n\n  if (!endpoint) {\n    console.log("Skipping getCollections - Shopify not configured");\n    return [\n      {\n        handle: "",\n        title: "All",\n        description: "All products",\n        seo: {\n          title: "All",\n          description: "All products",\n        },\n        path: "/search",\n        updatedAt: new Date().toISOString(),\n      },\n    ];\n  }\n\n  const res = await shopifyFetch<ShopifyCollectionsOperation>({\n    query: getCollectionsQuery,\n  });\n  const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);\n  const collections = [\n    {\n      handle: "",\n      title: "All",\n      description: "All products",\n      seo: {\n        title: "All",\n        description: "All products",\n      },\n      path: "/search",\n      updatedAt: new Date().toISOString(),\n    },\n    // Filter out the `hidden` collections.\n    // Collections that start with `hidden-*` need to be hidden on the search page.\n    ...reshapeCollections(shopifyCollections).filter(\n      (collection) => !collection.handle.startsWith("hidden")\n    ),\n  ];\n\n  return collections;\n}\n\nexport async function getMenu(handle: string): Promise<Menu[]> {\n  "use cache";\n  cacheTag(TAGS.collections);\n  cacheLife("days");\n\n  if (!endpoint) {\n    console.log(`Skipping getMenu for \'${handle}\' - Shopify not configured`);\n    return [];\n  }\n\n  const res = await shopifyFetch<ShopifyMenuOperation>({\n    query: getMenuQuery,\n    variables: {\n      handle,\n    },\n  });\n\n  return (\n    res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({\n      title: item.title,\n      path: item.url\n        .replace(domain, "")\n        .replace("/collections", "/search")\n        .replace("/pages", ""),\n    })) || []\n  );\n}\n\nexport async function getPage(handle: string): Promise<Page> {\n  const res = await shopifyFetch<ShopifyPageOperation>({\n    query: getPageQuery,\n    variables: { handle },\n  });\n\n  return res.body.data.pageByHandle;\n}\n\nexport async function getPages(): Promise<Page[]> {\n  const res = await shopifyFetch<ShopifyPagesOperation>({\n    query: getPagesQuery,\n  });\n\n  return removeEdgesAndNodes(res.body.data.pages);\n}\n\nexport async function getProduct(handle: string): Promise<Product | undefined> {\n  "use cache";\n  cacheTag(TAGS.products);\n  cacheLife("days");\n\n  if (!endpoint) {\n    console.log(`Skipping getProduct for \'${handle}\' - Shopify not configured`);\n    return undefined;\n  }\n\n  const res = await shopifyFetch<ShopifyProductOperation>({\n    query: getProductQuery,\n    variables: {\n      handle,\n    },\n  });\n\n  return reshapeProduct(res.body.data.product, false);\n}\n\nexport async function getProductRecommendations(\n  productId: string\n): Promise<Product[]> {\n  "use cache";\n  cacheTag(TAGS.products);\n  cacheLife("days");\n\n  const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({\n    query: getProductRecommendationsQuery,\n    variables: {\n      productId,\n    },\n  });\n\n  return reshapeProducts(res.body.data.productRecommendations);\n}\n\nexport async function getProducts({\n  query,\n  reverse,\n  sortKey,\n}: {\n  query?: string;\n  reverse?: boolean;\n  sortKey?: string;\n}): Promise<Product[]> {\n  "use cache";\n  cacheTag(TAGS.products);\n  cacheLife("days");\n\n  const res = await shopifyFetch<ShopifyProductsOperation>({\n    query: getProductsQuery,\n    variables: {\n      query,\n      reverse,\n      sortKey,\n    },\n  });\n\n  return reshapeProducts(removeEdgesAndNodes(res.body.data.products));\n}\n\n// This is called from `app/api/revalidate.ts` so providers can control revalidation logic.\nexport async function revalidate(req: NextRequest): Promise<NextResponse> {\n  // We always need to respond with a 200 status code to Shopify,\n  // otherwise it will continue to retry the request.\n  const collectionWebhooks = [\n    "collections/create",\n    "collections/delete",\n    "collections/update",\n  ];\n  const productWebhooks = [\n    "products/create",\n    "products/delete",\n    "products/update",\n  ];\n  const topic = (await headers()).get("x-shopify-topic") || "unknown";\n  const secret = req.nextUrl.searchParams.get("secret");\n  const isCollectionUpdate = collectionWebhooks.includes(topic);\n  const isProductUpdate = productWebhooks.includes(topic);\n\n  if (!secret || secret !== process.env.SHOPIFY_REVALIDATION_SECRET) {\n    console.error("Invalid revalidation secret.");\n    return NextResponse.json({ status: 401 });\n  }\n\n  if (!isCollectionUpdate && !isProductUpdate) {\n    // We don\'t need to revalidate anything for any other topics.\n    return NextResponse.json({ status: 200 });\n  }\n\n  if (isCollectionUpdate) {\n    revalidateTag(TAGS.collections, "seconds");\n  }\n\n  if (isProductUpdate) {\n    revalidateTag(TAGS.products, "seconds");\n  }\n\n  return NextResponse.json({ status: 200, revalidated: true, now: Date.now() });\n}\n',
+      "lib/shopify/mutations/cart.ts": 'import cartFragment from "../fragments/cart";\n\nexport const addToCartMutation = /* GraphQL */ `\n  mutation addToCart($cartId: ID!, $lines: [CartLineInput!]!) {\n    cartLinesAdd(cartId: $cartId, lines: $lines) {\n      cart {\n        ...cart\n      }\n    }\n  }\n  ${cartFragment}\n`;\n\nexport const createCartMutation = /* GraphQL */ `\n  mutation createCart($lineItems: [CartLineInput!]) {\n    cartCreate(input: { lines: $lineItems }) {\n      cart {\n        ...cart\n      }\n    }\n  }\n  ${cartFragment}\n`;\n\nexport const editCartItemsMutation = /* GraphQL */ `\n  mutation editCartItems($cartId: ID!, $lines: [CartLineUpdateInput!]!) {\n    cartLinesUpdate(cartId: $cartId, lines: $lines) {\n      cart {\n        ...cart\n      }\n    }\n  }\n  ${cartFragment}\n`;\n\nexport const removeFromCartMutation = /* GraphQL */ `\n  mutation removeFromCart($cartId: ID!, $lineIds: [ID!]!) {\n    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {\n      cart {\n        ...cart\n      }\n    }\n  }\n  ${cartFragment}\n`;\n',
+      "lib/shopify/queries/cart.ts": 'import cartFragment from "../fragments/cart";\n\nexport const getCartQuery = /* GraphQL */ `\n  query getCart($cartId: ID!) {\n    cart(id: $cartId) {\n      ...cart\n    }\n  }\n  ${cartFragment}\n`;\n',
+      "lib/shopify/queries/collection.ts": 'import productFragment from "../fragments/product";\nimport seoFragment from "../fragments/seo";\n\nconst collectionFragment = /* GraphQL */ `\n  fragment collection on Collection {\n    handle\n    title\n    description\n    seo {\n      ...seo\n    }\n    updatedAt\n  }\n  ${seoFragment}\n`;\n\nexport const getCollectionQuery = /* GraphQL */ `\n  query getCollection($handle: String!) {\n    collection(handle: $handle) {\n      ...collection\n    }\n  }\n  ${collectionFragment}\n`;\n\nexport const getCollectionsQuery = /* GraphQL */ `\n  query getCollections {\n    collections(first: 100, sortKey: TITLE) {\n      edges {\n        node {\n          ...collection\n        }\n      }\n    }\n  }\n  ${collectionFragment}\n`;\n\nexport const getCollectionProductsQuery = /* GraphQL */ `\n  query getCollectionProducts(\n    $handle: String!\n    $sortKey: ProductCollectionSortKeys\n    $reverse: Boolean\n  ) {\n    collection(handle: $handle) {\n      products(sortKey: $sortKey, reverse: $reverse, first: 100) {\n        edges {\n          node {\n            ...product\n          }\n        }\n      }\n    }\n  }\n  ${productFragment}\n`;\n',
+      "lib/shopify/queries/menu.ts": "export const getMenuQuery = /* GraphQL */ `\n  query getMenu($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        title\n        url\n      }\n    }\n  }\n`;\n",
+      "lib/shopify/queries/page.ts": 'import seoFragment from "../fragments/seo";\n\nconst pageFragment = /* GraphQL */ `\n  fragment page on Page {\n    ... on Page {\n      id\n      title\n      handle\n      body\n      bodySummary\n      seo {\n        ...seo\n      }\n      createdAt\n      updatedAt\n    }\n  }\n  ${seoFragment}\n`;\n\nexport const getPageQuery = /* GraphQL */ `\n  query getPage($handle: String!) {\n    pageByHandle(handle: $handle) {\n      ...page\n    }\n  }\n  ${pageFragment}\n`;\n\nexport const getPagesQuery = /* GraphQL */ `\n  query getPages {\n    pages(first: 100) {\n      edges {\n        node {\n          ...page\n        }\n      }\n    }\n  }\n  ${pageFragment}\n`;\n',
+      "lib/shopify/queries/product.ts": 'import productFragment from "../fragments/product";\n\nexport const getProductQuery = /* GraphQL */ `\n  query getProduct($handle: String!) {\n    product(handle: $handle) {\n      ...product\n    }\n  }\n  ${productFragment}\n`;\n\nexport const getProductsQuery = /* GraphQL */ `\n  query getProducts(\n    $sortKey: ProductSortKeys\n    $reverse: Boolean\n    $query: String\n  ) {\n    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) {\n      edges {\n        node {\n          ...product\n        }\n      }\n    }\n  }\n  ${productFragment}\n`;\n\nexport const getProductRecommendationsQuery = /* GraphQL */ `\n  query getProductRecommendations($productId: ID!) {\n    productRecommendations(productId: $productId) {\n      ...product\n    }\n  }\n  ${productFragment}\n`;\n',
+      "lib/shopify/types.ts": 'export type Maybe<T> = T | null;\n\nexport type Connection<T> = {\n  edges: Array<Edge<T>>;\n};\n\nexport type Edge<T> = {\n  node: T;\n};\n\nexport type Cart = Omit<ShopifyCart, "lines"> & {\n  lines: CartItem[];\n};\n\nexport type CartProduct = {\n  id: string;\n  handle: string;\n  title: string;\n  featuredImage: Image;\n};\n\nexport type CartItem = {\n  id: string | undefined;\n  quantity: number;\n  cost: {\n    totalAmount: Money;\n  };\n  merchandise: {\n    id: string;\n    title: string;\n    selectedOptions: {\n      name: string;\n      value: string;\n    }[];\n    product: CartProduct;\n  };\n};\n\nexport type Collection = ShopifyCollection & {\n  path: string;\n};\n\nexport type Image = {\n  url: string;\n  altText: string;\n  width: number;\n  height: number;\n};\n\nexport type Menu = {\n  title: string;\n  path: string;\n};\n\nexport type Money = {\n  amount: string;\n  currencyCode: string;\n};\n\nexport type Page = {\n  id: string;\n  title: string;\n  handle: string;\n  body: string;\n  bodySummary: string;\n  seo?: SEO;\n  createdAt: string;\n  updatedAt: string;\n};\n\nexport type Product = Omit<ShopifyProduct, "variants" | "images"> & {\n  variants: ProductVariant[];\n  images: Image[];\n};\n\nexport type ProductOption = {\n  id: string;\n  name: string;\n  values: string[];\n};\n\nexport type ProductVariant = {\n  id: string;\n  title: string;\n  availableForSale: boolean;\n  selectedOptions: {\n    name: string;\n    value: string;\n  }[];\n  price: Money;\n};\n\nexport type SEO = {\n  title: string;\n  description: string;\n};\n\nexport type ShopifyCart = {\n  id: string | undefined;\n  checkoutUrl: string;\n  cost: {\n    subtotalAmount: Money;\n    totalAmount: Money;\n    totalTaxAmount: Money;\n  };\n  lines: Connection<CartItem>;\n  totalQuantity: number;\n};\n\nexport type ShopifyCollection = {\n  handle: string;\n  title: string;\n  description: string;\n  seo: SEO;\n  updatedAt: string;\n};\n\nexport type ShopifyProduct = {\n  id: string;\n  handle: string;\n  availableForSale: boolean;\n  title: string;\n  description: string;\n  descriptionHtml: string;\n  options: ProductOption[];\n  priceRange: {\n    maxVariantPrice: Money;\n    minVariantPrice: Money;\n  };\n  variants: Connection<ProductVariant>;\n  featuredImage: Image;\n  images: Connection<Image>;\n  seo: SEO;\n  tags: string[];\n  updatedAt: string;\n};\n\nexport type ShopifyCartOperation = {\n  data: {\n    cart: ShopifyCart;\n  };\n  variables: {\n    cartId: string;\n  };\n};\n\nexport type ShopifyCreateCartOperation = {\n  data: { cartCreate: { cart: ShopifyCart } };\n};\n\nexport type ShopifyAddToCartOperation = {\n  data: {\n    cartLinesAdd: {\n      cart: ShopifyCart;\n    };\n  };\n  variables: {\n    cartId: string;\n    lines: {\n      merchandiseId: string;\n      quantity: number;\n    }[];\n  };\n};\n\nexport type ShopifyRemoveFromCartOperation = {\n  data: {\n    cartLinesRemove: {\n      cart: ShopifyCart;\n    };\n  };\n  variables: {\n    cartId: string;\n    lineIds: string[];\n  };\n};\n\nexport type ShopifyUpdateCartOperation = {\n  data: {\n    cartLinesUpdate: {\n      cart: ShopifyCart;\n    };\n  };\n  variables: {\n    cartId: string;\n    lines: {\n      id: string;\n      merchandiseId: string;\n      quantity: number;\n    }[];\n  };\n};\n\nexport type ShopifyCollectionOperation = {\n  data: {\n    collection: ShopifyCollection;\n  };\n  variables: {\n    handle: string;\n  };\n};\n\nexport type ShopifyCollectionProductsOperation = {\n  data: {\n    collection: {\n      products: Connection<ShopifyProduct>;\n    };\n  };\n  variables: {\n    handle: string;\n    reverse?: boolean;\n    sortKey?: string;\n  };\n};\n\nexport type ShopifyCollectionsOperation = {\n  data: {\n    collections: Connection<ShopifyCollection>;\n  };\n};\n\nexport type ShopifyMenuOperation = {\n  data: {\n    menu?: {\n      items: {\n        title: string;\n        url: string;\n      }[];\n    };\n  };\n  variables: {\n    handle: string;\n  };\n};\n\nexport type ShopifyPageOperation = {\n  data: { pageByHandle: Page };\n  variables: { handle: string };\n};\n\nexport type ShopifyPagesOperation = {\n  data: {\n    pages: Connection<Page>;\n  };\n};\n\nexport type ShopifyProductOperation = {\n  data: { product: ShopifyProduct };\n  variables: {\n    handle: string;\n  };\n};\n\nexport type ShopifyProductRecommendationsOperation = {\n  data: {\n    productRecommendations: ShopifyProduct[];\n  };\n  variables: {\n    productId: string;\n  };\n};\n\nexport type ShopifyProductsOperation = {\n  data: {\n    products: Connection<ShopifyProduct>;\n  };\n  variables: {\n    query?: string;\n    reverse?: boolean;\n    sortKey?: string;\n  };\n};\n',
+      "lib/type-guards.ts": 'export interface ShopifyErrorLike {\n  status: number;\n  message: Error;\n  cause?: Error;\n}\n\nexport const isObject = (\n  object: unknown,\n): object is Record<string, unknown> => {\n  return (\n    typeof object === "object" && object !== null && !Array.isArray(object)\n  );\n};\n\nexport const isShopifyError = (error: unknown): error is ShopifyErrorLike => {\n  if (!isObject(error)) return false;\n\n  if (error instanceof Error) return true;\n\n  return findError(error);\n};\n\nfunction findError<T extends object>(error: T): boolean {\n  if (Object.prototype.toString.call(error) === "[object Error]") {\n    return true;\n  }\n\n  const prototype = Object.getPrototypeOf(error) as T | null;\n\n  return prototype === null ? false : findError(prototype);\n}\n',
+      "lib/utils.ts": 'import { ReadonlyURLSearchParams } from "next/navigation";\n\nexport const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL\n  ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`\n  : "http://localhost:3000";\n\nexport const createUrl = (\n  pathname: string,\n  params: URLSearchParams | ReadonlyURLSearchParams,\n) => {\n  const paramsString = params.toString();\n  const queryString = `${paramsString.length ? "?" : ""}${paramsString}`;\n\n  return `${pathname}${queryString}`;\n};\n\nexport const ensureStartsWith = (stringToCheck: string, startsWith: string) =>\n  stringToCheck.startsWith(startsWith)\n    ? stringToCheck\n    : `${startsWith}${stringToCheck}`;\n\nexport const validateEnvironmentVariables = () => {\n  const requiredEnvironmentVariables = [\n    "SHOPIFY_STORE_DOMAIN",\n    "SHOPIFY_STOREFRONT_ACCESS_TOKEN",\n  ];\n  const missingEnvironmentVariables = [] as string[];\n\n  requiredEnvironmentVariables.forEach((envVar) => {\n    if (!process.env[envVar]) {\n      missingEnvironmentVariables.push(envVar);\n    }\n  });\n\n  if (missingEnvironmentVariables.length) {\n    throw new Error(\n      `The following environment variables are missing. Your site will not work without them. Read more: https://vercel.com/docs/integrations/shopify#configure-environment-variables\\n\\n${missingEnvironmentVariables.join(\n        "\\n",\n      )}\\n`,\n    );\n  }\n\n  if (\n    process.env.SHOPIFY_STORE_DOMAIN?.includes("[") ||\n    process.env.SHOPIFY_STORE_DOMAIN?.includes("]")\n  ) {\n    throw new Error(\n      "Your `SHOPIFY_STORE_DOMAIN` environment variable includes brackets (ie. `[` and / or `]`). Your site will not work with them there. Please remove them.",\n    );\n  }\n};\n',
+      "license.md": 'The MIT License (MIT)\n\nCopyright (c) 2025 Vercel, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n',
+      "next.config.ts": 'export default {\n  experimental: {\n    ppr: true,\n    inlineCss: true,\n    useCache: true,\n  },\n  images: {\n    formats: ["image/avif", "image/webp"],\n    remotePatterns: [\n      {\n        protocol: "https",\n        hostname: "cdn.shopify.com",\n        pathname: "/s/files/**",\n      },\n    ],\n  },\n};\n',
+      "package.json": `{
+  "name": "popcraft-store",
+  "private": true,
+  "description": "A Next.js Commerce store drawn by its PopCraft design: Shopify's products, cart and checkout, rendered by the design's components.",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "test": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@popcraft/runtime": "^0.15.0",
+    "next": "15.6.0-canary.60",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.13.10",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
+    "typescript": "5.8.2"
+  }
+}
+`,
+      "tsconfig.json": '{\n  "compilerOptions": {\n    "target": "es2015",\n    "lib": ["dom", "dom.iterable", "esnext"],\n    "downlevelIteration": true,\n    "allowJs": true,\n    "skipLibCheck": true,\n    "strict": true,\n    "forceConsistentCasingInFileNames": true,\n    "noEmit": true,\n    "esModuleInterop": true,\n    "module": "esnext",\n    "moduleResolution": "bundler",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "jsx": "react-jsx",\n    "incremental": true,\n    "baseUrl": ".",\n    "noUncheckedIndexedAccess": true,\n    "plugins": [\n      {\n        "name": "next"\n      }\n    ]\n  },\n  "include": [\n    "next-env.d.ts",\n    "**/*.ts",\n    "**/*.tsx",\n    ".next/types/**/*.ts",\n    ".next/dev/types/**/*.ts"\n  ],\n  "exclude": ["node_modules"]\n}\n',
+      "types/css.d.ts": '// Stylesheets imported for their effect (app/globals.css, components/popcraft/popcraft.css). Next.js declares these\n// itself once it has run (next-env.d.ts); this lets `npm test` typecheck a fresh checkout too.\ndeclare module "*.css";\n'
+    };
+  }
+});
+
+// lib/io/web/project/next-commerce.ts
+var next_commerce_exports = {};
+__export(next_commerce_exports, {
+  nextCommerceFiles: () => nextCommerceFiles
+});
+function valueOf(p2) {
+  if (p2.action) return ACTION[p2.action];
+  if (p2.about) return p2.schema === "commerce.product" ? "product" : p2.schema === "commerce.collection" ? "collection" : null;
+  switch (p2.schema) {
+    case "commerce.product":
+      return "products";
+    case "commerce.collection":
+      return "categories";
+    case "commerce.cartLine":
+      return "frame.cart.lines";
+    case "commerce.cart":
+      return "frame.cart";
+    case "commerce.menu":
+      return "frame.menu";
+    default:
+      return null;
+  }
+}
+function pageSource(plan2, kind) {
+  const given = plan2.props.map((p2) => [p2.name, valueOf(p2)]).filter((x2) => !!x2[1]);
+  const uses = (v) => given.some(([, e]) => e === v);
+  const actions = [...new Set(plan2.props.filter((p2) => p2.action).map((p2) => ACTION[p2.action]))].sort();
+  const jsx = `<${plan2.name} ${given.map(([n, e]) => `${n}={${e}}`).join(" ")} />`;
+  const productsFrom = {
+    product: "getProductRecommendations(product.id)",
+    collection: "getCollectionProducts({ collection: handle, sortKey, reverse })",
+    search: "getProducts({ sortKey, reverse, query })",
+    index: 'getProducts({ sortKey: "CREATED_AT", reverse: true })',
+    cart: 'getProducts({ sortKey: "CREATED_AT", reverse: true })',
+    page: 'getProducts({ sortKey: "CREATED_AT", reverse: true })'
+  };
+  const fetches = [
+    ...kind === "collection" ? [["collection", "getCollection(handle)"]] : [],
+    ...uses("products") ? [["products", productsFrom[kind]]] : [],
+    ...uses("categories") ? [["categories", "storeCategories()"]] : [],
+    ["frame", "storeFrame()"]
+  ];
+  const shopify = [
+    ...kind === "product" ? ["getProduct"] : [],
+    ...kind === "collection" ? ["getCollection"] : [],
+    ...uses("products") ? [productsFrom[kind].slice(0, productsFrom[kind].indexOf("("))] : []
+  ];
+  const sorted = (kind === "collection" || kind === "search") && uses("products");
+  const head2 = [
+    ...actions.length ? [`import { ${actions.join(", ")} } from "app/actions";`] : [],
+    `import { ${plan2.name} } from "components/popcraft";`,
+    ...sorted ? ['import { defaultSort, sorting } from "lib/constants";'] : [],
+    `import { ${["storeFrame", ...uses("categories") ? ["storeCategories"] : []].sort().join(", ")} } from "lib/popcraft";`,
+    ...shopify.length ? [`import { ${[...new Set(shopify)].sort().join(", ")} } from "lib/shopify";`] : [],
+    ...kind === "product" || kind === "collection" ? ['import type { Metadata } from "next";', 'import { notFound } from "next/navigation";'] : [],
+    ""
+  ];
+  const load2 = [
+    `  const [${fetches.map((f2) => f2[0]).join(", ")}] = await Promise.all([${fetches.map((f2) => f2[1]).join(", ")}]);`,
+    ...kind === "collection" ? ["  if (!collection) return notFound();"] : [],
+    `  return ${jsx};`,
+    "}",
+    ""
+  ];
+  const sorting = sorted ? ["  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;"] : [];
+  switch (kind) {
+    case "product":
+      return [
+        ...head2,
+        "export async function generateMetadata(props: { params: Promise<{ handle: string }> }): Promise<Metadata> {",
+        "  const product = await getProduct((await props.params).handle);",
+        "  if (!product) return notFound();",
+        "  const { url, width, height, altText: alt } = product.featuredImage || {};",
+        "  return { title: product.seo.title || product.title, description: product.seo.description || product.description, openGraph: url ? { images: [{ url, width, height, alt }] } : null };",
+        "}",
+        "",
+        "export default async function Product(props: { params: Promise<{ handle: string }> }) {",
+        "  const product = await getProduct((await props.params).handle);",
+        "  if (!product) return notFound();",
+        ...load2
+      ].join("\n");
+    case "collection":
+      return [
+        ...head2,
+        "export async function generateMetadata(props: { params: Promise<{ collection: string }> }): Promise<Metadata> {",
+        "  const collection = await getCollection((await props.params).collection);",
+        "  if (!collection) return notFound();",
+        "  return { title: collection.seo?.title || collection.title, description: collection.seo?.description || collection.description || `${collection.title} products` };",
+        "}",
+        "",
+        "export default async function Category(props: { params: Promise<{ collection: string }>; searchParams?: Promise<{ [key: string]: string | string[] | undefined }> }) {",
+        "  const { collection: handle } = await props.params;",
+        ...sorted ? ["  const { sort } = ((await props.searchParams) ?? {}) as { [key: string]: string };"] : [],
+        ...sorting,
+        ...load2
+      ].join("\n");
+    case "search":
+      return [
+        ...head2,
+        'export const metadata = { title: "Search", description: "Search for products in the store." };',
+        "",
+        "export default async function Search(props: { searchParams?: Promise<{ [key: string]: string | string[] | undefined }> }) {",
+        ...sorted ? ["  const { sort, q: query } = ((await props.searchParams) ?? {}) as { [key: string]: string };"] : ["  void props;"],
+        ...sorting,
+        ...load2
+      ].join("\n");
+    case "cart":
+      return [
+        ...head2,
+        'export const metadata = { title: "Your cart" };',
+        "",
+        "export default async function Cart() {",
+        ...load2
+      ].join("\n");
+    default:
+      return [
+        ...head2,
+        `export default async function ${kind === "index" ? "Home" : "Page"}() {`,
+        ...load2
+      ].join("\n");
+  }
+}
+function nextCommerceFiles(doc2, screens, o = {}) {
+  const routes = new Map(routesOf(screensOf(doc2, doc2.pages[0])));
+  const pages2 = [];
+  const taken = /* @__PURE__ */ new Set();
+  componentPlan(doc2, screens).forEach((plan2, i2) => {
+    const route2 = routes.get(plan2.screen.id) ?? (i2 === 0 ? "/" : void 0);
+    const kind = storefrontPageKind(plan2.screen, doc2, route2);
+    const path = kind === "page" ? route2 ? otherRoute(route2) : null : ROUTE[kind];
+    if (!path || taken.has(path)) return;
+    taken.add(path);
+    pages2.push({ path, content: pageSource(plan2, kind) });
+  });
+  const name2 = o.siteName ?? doc2.name;
+  const shell = Object.entries(NEXT_COMMERCE_SHELL).map(([path, content]) => {
+    if (path === "package.json") {
+      const pkg = JSON.parse(content);
+      pkg.name = name2.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "store";
+      pkg.description = `${name2}: a Next.js Commerce store drawn by its PopCraft design.`;
+      return { path, content: `${JSON.stringify(pkg, null, 2)}
+` };
+    }
+    if (path === ".env.example") return { path, content: content.replace(/SITE_NAME=".*"/, `SITE_NAME=${JSON.stringify(name2)}`).replace(/COMPANY_NAME=".*"/, `COMPANY_NAME=${JSON.stringify(name2)}`) };
+    return { path, content };
+  });
+  return [...shell, ...componentFiles(doc2, screens, { media: o.media, styling: o.styling }), ...pages2];
+}
+var ACTION, ROUTE, otherRoute;
+var init_next_commerce = __esm({
+  "lib/io/web/project/next-commerce.ts"() {
+    "use strict";
+    init_routes();
+    init_next_commerce_shell();
+    init_components();
+    init_storefront_pages();
+    ACTION = { addToCart: "addToCart", updateCartLine: "updateCartLine", removeCartLine: "removeCartLine", checkout: "checkout", search: "search" };
+    ROUTE = {
+      index: "app/page.tsx",
+      search: "app/search/page.tsx",
+      collection: "app/search/[collection]/page.tsx",
+      product: "app/product/[handle]/page.tsx",
+      cart: "app/cart/page.tsx"
+    };
+    otherRoute = (route2) => {
+      const path = route2.replace(/^\/+|\/+$/g, "");
+      return path && /^[a-z0-9-]+(\/[a-z0-9-]+)*$/i.test(path) ? `app/${path}/page.tsx` : null;
     };
   }
 });
@@ -346482,11 +346928,17 @@ var init_storefront = __esm({
   "lib/io/web/project/storefront.ts"() {
     init_components();
     init_shopify_theme();
+    init_next_commerce();
     init_collections();
     init_html();
     init_storefront_targets();
     init_storefront_targets();
     STOREFRONT_TARGETS = {
+      "next-commerce-store": {
+        id: "next-commerce-store",
+        ...STOREFRONT_TARGET_INFO["next-commerce-store"],
+        files: (doc2, screens, o) => nextCommerceFiles(doc2, screens, { media: o.media, styling: o.styling })
+      },
       "next-commerce": {
         id: "next-commerce",
         ...STOREFRONT_TARGET_INFO["next-commerce"],
@@ -346656,6 +347108,24 @@ var init_board_export = __esm({
 });
 
 // lib/commands/export.ts
+var export_exports2 = {};
+__export(export_exports2, {
+  EXPORT_NODE_CAP: () => EXPORT_NODE_CAP,
+  exportBoard: () => exportBoard,
+  exportCopy: () => exportCopy,
+  exportGif: () => exportGif,
+  exportLottie: () => exportLottie2,
+  exportMp4: () => exportMp4,
+  exportNodes: () => exportNodes,
+  exportPages: () => exportPages,
+  exportPdf: () => exportPdf,
+  exportPngSequence: () => exportPngSequence,
+  exportPptx: () => exportPptx,
+  exportStorefront: () => exportStorefront,
+  exportSvg: () => exportSvg,
+  exportWeb: () => exportWeb,
+  exportWebm: () => exportWebm
+});
 function animationTarget(args2, ctx2, doc2) {
   if (args2.composition) {
     if (!doc2.compositions?.[args2.composition]) throw new ToolError(`There is no composition "${args2.composition}".`);
@@ -347177,7 +347647,7 @@ var init_export2 = __esm({
       permission: "export",
       needs: ["canvas"],
       params: external_exports.object({
-        target: external_exports.enum(STOREFRONT_TARGET_IDS).default("next-commerce").describe("next-commerce: React components a Next.js Commerce store renders with its own data and server actions. shopify-theme: an Online Store 2.0 theme (Liquid) to upload in the store's admin, running on Shopify with its own cart and checkout."),
+        target: external_exports.enum(STOREFRONT_TARGET_IDS).default("next-commerce").describe("next-commerce-store: a whole Next.js Commerce store drawn by the design, to deploy with a Shopify store's domain and Storefront token (publish_store deploys it for you). next-commerce: React components a Next.js Commerce store renders with its own data and server actions. shopify-theme: an Online Store 2.0 theme (Liquid) to upload in the store's admin, running on Shopify with its own cart and checkout."),
         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(),
@@ -347186,34 +347656,26 @@ var init_export2 = __esm({
           label: "Export storefront\u2026",
           keywords: ["commerce", "shopify", "theme", "liquid", "store", "shop", "next", "react", "components", "export"],
           variants: [
+            { id: "next-commerce-store", label: "Export storefront as a Next.js Commerce store", params: { target: "next-commerce-store" } },
             { id: "next-commerce", label: "Export storefront as Next.js Commerce components", params: { target: "next-commerce" } },
             { id: "shopify-theme", label: "Export storefront as a Shopify theme", params: { target: "shopify-theme" } }
           ]
         },
-        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." }
+        agent: { name: "export_storefront", readOnly: false, description: "Download a storefront design (a page whose lists and pages read collections with a commerce schema) as a store's project, in a zip. target next-commerce-store: the whole Next.js Commerce app (Shopify client, cart, checkout, a page per screen), ready to deploy. target next-commerce: a React component per screen, each list a typed prop of Next.js Commerce's own types, each storefront form (addToCart, updateCartLine, removeCartLine, checkout, search) an action prop for a server action. target shopify-theme: an Online Store 2.0 theme, each screen a section and template (home: index, a page about a product: product, about a category: collection, search, cart), each list a Liquid loop over the store's products, cart or menu, each form posting to Shopify's cart; uploaded in Online Store \u203A Themes. With no store data a Next.js Commerce component draws the design's samples." }
       },
       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)),
+        const [{ storefrontInputs: storefrontInputs2 }, { STOREFRONT_TARGETS: STOREFRONT_TARGETS2 }, { bytesOf: bytesOf2 }, { fileBase: fileBase2, flatten: flatten3 }, { zipFiles: zipFiles2 }, { downloadBlob: downloadBlob2 }] = await Promise.all([
+          Promise.resolve().then(() => (init_storefront_prepare(), storefront_prepare_exports)),
           Promise.resolve().then(() => (init_storefront(), storefront_exports)),
           Promise.resolve().then(() => (init_project(), project_exports)),
           Promise.resolve().then(() => (init_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))
+          Promise.resolve().then(() => (init_download(), download_exports))
         ]);
         const target2 = STOREFRONT_TARGETS2[args2.target];
-        const screens = componentScreens2(doc2, ctx2.pageId(), EXPORT_NODE_CAP);
+        const { screens, media: media2 } = await storefrontInputs2(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`);
@@ -353017,6 +353479,7 @@ 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();
@@ -353130,10 +353593,12 @@ __export(integrations_exports, {
   attachDatabase: () => attachDatabase,
   connectWithOAuth: () => connectWithOAuth,
   connectWithToken: () => connectWithToken,
+  connectedStore: () => connectedStore,
   createDatabase: () => createDatabase,
   createDestination: () => createDestination,
   createResource: () => createResource,
   deployDestination: () => deployDestination,
+  deployStore: () => deployStore,
   detachDatabase: () => detachDatabase,
   disconnect: () => disconnect,
   integrationsWorkspaceId: () => integrationsWorkspaceId,
@@ -353178,6 +353643,32 @@ function connectWithOAuth(workspaceId, provider2) {
     });
   });
 }
+async function sha12(bytes2) {
+  const digest = await crypto.subtle.digest("SHA-1", bytes2);
+  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+async function deployStore(key5, id3, files, shopifyConnectionId, onProgress) {
+  const listed = await Promise.all(files.map(async (f2) => ({ path: f2.path, sha: await sha12(f2.bytes), size: f2.bytes.length, bytes: f2.bytes })));
+  const queue2 = [...new Map(listed.map((f2) => [f2.sha, f2])).values()];
+  const total2 = queue2.length;
+  let done = 0;
+  await Promise.all(Array.from({ length: Math.min(4, queue2.length) }, async () => {
+    for (let f2 = queue2.shift(); f2; f2 = queue2.shift()) {
+      await api(`/api/sites/${key5}/destinations/${id3}/files`, { method: "POST", body: f2.bytes, headers: { "content-type": "application/octet-stream", "x-file-sha1": f2.sha } });
+      onProgress?.(++done, total2);
+    }
+  }));
+  return (await api(`/api/sites/${key5}/destinations/${id3}/store`, { method: "POST", json: { shopifyConnectionId, files: listed.map(({ path, sha, size: size6 }) => ({ path, sha, size: size6 })) } })).deploy;
+}
+async function connectedStore(connectionId) {
+  if (connectionId) return connectionId;
+  const workspaceId = integrationsWorkspaceId();
+  if (!workspaceId) throw new Error("Your workspaces have not loaded yet. Try again in a moment.");
+  const stores2 = (await listWorkspaceIntegrations(workspaceId)).integrations.filter((i2) => i2.manifest.capabilities.includes("commerce")).flatMap((i2) => i2.connections);
+  if (!stores2.length) throw new Error("No store is connected. Connect Shopify in Integrations first.");
+  if (stores2.length > 1) throw new Error(`Name the store: ${stores2.map((c2) => `${c2.account} (${c2.id})`).join(", ")}.`);
+  return stores2[0].id;
+}
 var integrationsWorkspaceId, listWorkspaceIntegrations, connectWithToken, disconnect, listResources, createResource, listDestinations, addDestination, removeDestination, deployDestination, siteBackend, attachDatabase, setSignIn, detachDatabase, listSubmissions, listCandidates, createDatabase, createDestination, storeProducts;
 var init_integrations = __esm({
   "lib/client/cloud/integrations.ts"() {
@@ -353217,7 +353708,7 @@ async function publishedFile() {
   if (!key5) throw new CommandError("This file is not saved to the cloud yet, so it has no site. Publish it first.", "failed");
   return key5;
 }
-var statusData, publishSite2, publishSetVersion, publishStatus, publishCommands;
+var statusData, publishSite2, publishSetVersion, publishStatus, publishStore, publishCommands;
 var init_publish = __esm({
   "lib/commands/publish.ts"() {
     "use strict";
@@ -353322,7 +353813,66 @@ var init_publish = __esm({
         };
       }
     });
-    publishCommands = [publishSite2, publishSetVersion];
+    publishStore = defineCommand({
+      id: "publish.store",
+      title: "Publish as a store",
+      domain: "publish",
+      effect: "none",
+      permission: null,
+      needs: ["canvas"],
+      params: external_exports.object({
+        shopifyConnectionId: external_exports.string().optional().describe("The Shopify store it sells from, from list_integrations (capability commerce). Omit when one store is connected."),
+        destinationId: external_exports.string().optional().describe("The Vercel project to deploy to (a deploy destination, from get_site_status). Omit: the file's deploy destination, or a new project named after the file.")
+      }),
+      confirm: {
+        level: "confirm",
+        summary: () => "Deploy this page as a store selling your Shopify products",
+        detail: () => "The page becomes a Next.js Commerce store on Vercel, its products, cart and checkout your Shopify store's. A Vercel project is made for it when the file has none, and your store's address and Storefront token are set as that project's environment. Visitors can buy from it once it is live."
+      },
+      expose: {
+        ui: { label: "Publish as a store\u2026", keywords: ["store", "shop", "shopify", "commerce", "next", "vercel", "deploy", "sell", "ecommerce", "checkout", "cart"] },
+        agent: {
+          name: "publish_store",
+          description: "Deploy a storefront design (its lists and pages bound to collections with a commerce schema) as a working store: a Next.js Commerce app on Vercel selling the connected Shopify store's products, with its cart and checkout. Needs a Shopify connection (capability commerce) and a Vercel connection; uses the file's Vercel deploy destination or makes one. Returns the deployment URL (it builds for a minute or two). The user approves every call."
+        }
+      },
+      run: async (p2, ctx2) => {
+        await signedIn();
+        const [{ openFileKey: openFileKey2 }, { uploadActiveDocument: uploadActiveDocument2 }, cloud, { storefrontInputs: storefrontInputs2 }, { nextCommerceFiles: nextCommerceFiles2 }, { bytesOf: bytesOf2 }, { EXPORT_NODE_CAP: EXPORT_NODE_CAP2 }] = await Promise.all([
+          Promise.resolve().then(() => (init_publish_site(), publish_site_exports)),
+          Promise.resolve().then(() => (init_sync2(), sync_exports2)),
+          Promise.resolve().then(() => (init_integrations(), integrations_exports)),
+          Promise.resolve().then(() => (init_storefront_prepare(), storefront_prepare_exports)),
+          Promise.resolve().then(() => (init_next_commerce(), next_commerce_exports)),
+          Promise.resolve().then(() => (init_project(), project_exports)),
+          Promise.resolve().then(() => (init_export2(), export_exports2))
+        ]);
+        const doc2 = ctx2.doc();
+        if (!Object.values(doc2.collections ?? {}).some((c2) => c2.schema === "commerce.product")) throw new CommandError("This file is not a storefront: set a collection to Store products in Collections, or start from a Storefronts template.", "failed");
+        const shop = await cloud.connectedStore(p2.shopifyConnectionId).catch((e) => {
+          throw new CommandError(e instanceof Error ? e.message : String(e), "failed");
+        });
+        const { screens, media: media2 } = await storefrontInputs2(doc2, ctx2.pageId(), EXPORT_NODE_CAP2);
+        if (!screens.length) throw new CommandError("This page has no screens: a top-level frame is a page of the store.", "failed");
+        const key5 = openFileKey2() ?? await uploadActiveDocument2();
+        const all4 = await cloud.listDestinations(key5);
+        const deploys = all4.filter((d) => d.capability === "deploy");
+        let dest = p2.destinationId ? all4.find((d) => d.id === p2.destinationId) : deploys[0];
+        if (p2.destinationId && !dest) throw new CommandError(`This file has no destination ${p2.destinationId}.`, "invalid_params");
+        if (!dest) {
+          ctx2.notice("Making a Vercel project for the store\u2026");
+          dest = await cloud.createDestination(key5, "deploy", "vercel");
+        }
+        const files = nextCommerceFiles2(doc2, screens, { media: media2 }).map((f2) => ({ path: f2.path, bytes: bytesOf2(f2) }));
+        const where = dest.target.map((t3) => t3.name).join(" / ");
+        const done = await cloud.deployStore(key5, dest.id, files, shop, (n, total2) => {
+          if (n === total2) ctx2.notice(`Sent ${total2} files to ${where}: building the store`);
+        });
+        ctx2.notice(done.status === "failed" ? `The store did not deploy: ${done.error ?? "Vercel refused it"}` : `Store deploying: ${done.url}`);
+        return { summary: `Store ${done.status === "ready" ? "is live" : done.status === "building" ? "is building" : "failed"} at ${done.url} (${where}, ${screens.length} ${screens.length === 1 ? "page" : "pages"}, ${files.length} files)`, data: { url: done.url, status: done.status, destinationId: dest.id, project: where, files: files.length, pages: screens.map((s) => s.name) } };
+      }
+    });
+    publishCommands = [publishSite2, publishSetVersion, publishStore];
   }
 });
 
@@ -355724,7 +356274,7 @@ var init_storefront2 = __esm({
     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.",
+      description: "Bind a shop to a store's data and publish or export it for Next.js Commerce or Shopify.",
       whenToUse: "the design should sell",
       tools: ["get_document_outline", "edit_collection", "edit_records", "set_repeat", "set_route", "set_control", "export_storefront", "list_integrations", "open_integrations", "pull_store_products", "ask_user", "manage_todos"],
       instructions: `# Design a storefront
@@ -355755,12 +356305,13 @@ are whole stores to begin from.
    - \`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.
+6. **Sell.** \`publish_store\` deploys it as a working store: a Next.js Commerce app on Vercel selling the connected
+   Shopify store's products, with its cart and checkout (needs Shopify and Vercel connected: \`list_integrations\`).
+   Or \`export_storefront\` writes the project for a store the user runs:
+   - \`target: 'next-commerce-store'\`: the whole Next.js Commerce store, to deploy with Shopify's keys.
+   - \`target: 'next-commerce'\`: components only, for a Next.js Commerce store that exists: a prop per list
+     (\`products\`, \`cartLines\`, \`cart\`, \`menu\`), \`product\` on a product's page, \`onAddToCart\`, \`onCheckout\`\u2026 for the forms.
+   - \`target: 'shopify-theme'\`: an Online Store 2.0 theme the user uploads in Shopify (Online Store \u203A Themes).
    Say which, and where it goes (/docs/exporting/commerce).
 
 ## Rules
@@ -389159,7 +389710,7 @@ var init_integration = __esm({
         }
       },
       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([
+        const [{ cloudUser: cloudUser2 }, { connectedStore: connectedStore2, storeProducts: storeProducts2 }, { commerceItem: commerceItem2, COMMERCE_FIELDS: COMMERCE_FIELDS2 }, { fieldKey: fieldKey2, removeRecords: removeRecords2, upsertRecords: upsertRecords2 }] = await Promise.all([
           Promise.resolve().then(() => (init_session(), session_exports)),
           Promise.resolve().then(() => (init_integrations(), integrations_exports)),
           Promise.resolve().then(() => (init_commerce(), commerce_exports)),
@@ -389171,15 +389722,9 @@ var init_integration = __esm({
         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 connectionId = await connectedStore2(args2.connectionId).catch((e) => {
+          throw new CommandError(e instanceof Error ? e.message : String(e), "failed");
+        });
         const products = await storeProducts2(connectionId, args2.limit);
         if (!products.length) throw new CommandError("The store has no products to show.", "failed");
         const keys4 = new Map(COMMERCE_FIELDS2["commerce.product"].map((f2) => [fieldKey2(f2.name), f2.name]));
@@ -402280,7 +402825,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.15.0";
+var VERSION2 = "0.16.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):

package/package.json

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