@popcraft/kit 0.53.15 → 0.53.16

package/dist/chunks/chunk-XUBWAGKC.js

@@ -0,0 +1,405 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  componentFiles,
+  componentPlan
+} from "./chunk-ZM74XQGT.js";
+import {
+  routesOf,
+  screensOf
+} from "./chunk-O6H6N3RA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// lib/io/web/project/next-commerce.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/generated/next-commerce-shell.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var 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/storefront-pages.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var every = (n, out = []) => {
+  out.push(n);
+  n.children.forEach((c) => every(c, out));
+  n.repeat?.template.forEach((c) => every(c, out));
+  return out;
+};
+function storefrontPageKind(s, doc, route) {
+  if (s.about?.schema === "commerce.product") return "product";
+  if (s.about?.schema === "commerce.collection") return "collection";
+  const nodes = every(s.tree.root);
+  if (nodes.some((n) => n.action === "search")) return "search";
+  if (nodes.some((n) => n.repeat && doc.collections?.[n.repeat.collectionId]?.schema === "commerce.cartLine")) return "cart";
+  if (route === "/") return "index";
+  return "page";
+}
+
+// lib/io/web/project/next-commerce.ts
+var ACTION = { addToCart: "addToCart", updateCartLine: "updateCartLine", removeCartLine: "removeCartLine", checkout: "checkout", search: "search" };
+var 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"
+};
+function valueOf(p) {
+  if (p.action) return ACTION[p.action];
+  if (p.about) return p.schema === "commerce.product" ? "product" : p.schema === "commerce.collection" ? "collection" : null;
+  switch (p.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(plan, kind) {
+  const given = plan.props.map((p) => [p.name, valueOf(p)]).filter((x) => !!x[1]);
+  const uses = (v) => given.some(([, e]) => e === v);
+  const actions = [...new Set(plan.props.filter((p) => p.action).map((p) => ACTION[p.action]))].sort();
+  const jsx = `<${plan.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 picks = uses("products") ? plan.picks ?? [] : [];
+  const listed = picks.length ? `Promise.all([${productsFrom[kind]}, ...${JSON.stringify(picks)}.map((h) => getProduct(h))]).then(([list, ...picked]) => [...picked.filter((p): p is NonNullable<typeof p> => !!p), ...list])` : productsFrom[kind];
+  const fetches = [
+    ...kind === "collection" ? [["collection", "getCollection(handle)"]] : [],
+    ...uses("products") ? [["products", listed]] : [],
+    ...uses("categories") ? [["categories", "storeCategories()"]] : [],
+    ["frame", "storeFrame()"]
+  ];
+  const shopify = [
+    ...kind === "product" || picks.length ? ["getProduct"] : [],
+    ...kind === "collection" ? ["getCollection"] : [],
+    ...uses("products") ? [productsFrom[kind].slice(0, productsFrom[kind].indexOf("("))] : []
+  ];
+  const sorted = (kind === "collection" || kind === "search") && uses("products");
+  const head = [
+    ...actions.length ? [`import { ${actions.join(", ")} } from "app/actions";`] : [],
+    `import { ${plan.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 load = [
+    `  const [${fetches.map((f) => f[0]).join(", ")}] = await Promise.all([${fetches.map((f) => f[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 [
+        ...head,
+        "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();",
+        ...load
+      ].join("\n");
+    case "collection":
+      return [
+        ...head,
+        "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,
+        ...load
+      ].join("\n");
+    case "search":
+      return [
+        ...head,
+        '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,
+        ...load
+      ].join("\n");
+    case "cart":
+      return [
+        ...head,
+        'export const metadata = { title: "Your cart" };',
+        "",
+        "export default async function Cart() {",
+        ...load
+      ].join("\n");
+    default:
+      return [
+        ...head,
+        `export default async function ${kind === "index" ? "Home" : "Page"}() {`,
+        ...load
+      ].join("\n");
+  }
+}
+var otherRoute = (route) => {
+  const path = route.replace(/^\/+|\/+$/g, "");
+  return path && /^[a-z0-9-]+(\/[a-z0-9-]+)*$/i.test(path) ? `app/${path}/page.tsx` : null;
+};
+function nextCommerceFiles(doc, screens, o = {}) {
+  const routes = new Map(routesOf(screensOf(doc, doc.pages[0])));
+  const pages = [];
+  const taken = /* @__PURE__ */ new Set();
+  componentPlan(doc, screens).forEach((plan, i) => {
+    const route = routes.get(plan.screen.id) ?? (i === 0 ? "/" : void 0);
+    const kind = storefrontPageKind(plan.screen, doc, route);
+    const path = kind === "page" ? route ? otherRoute(route) : null : ROUTE[kind];
+    if (!path || taken.has(path)) return;
+    taken.add(path);
+    pages.push({ path, content: pageSource(plan, kind) });
+  });
+  const name = o.siteName ?? doc.name;
+  const shell = Object.entries(NEXT_COMMERCE_SHELL).map(([path, content]) => {
+    if (path === "package.json") {
+      const pkg = JSON.parse(content);
+      pkg.name = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "store";
+      pkg.description = `${name}: 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(name)}`).replace(/COMPANY_NAME=".*"/, `COMPANY_NAME=${JSON.stringify(name)}`) };
+    return { path, content };
+  });
+  return [...shell, ...componentFiles(doc, screens, { media: o.media, styling: o.styling }), ...pages];
+}
+
+export {
+  storefrontPageKind,
+  nextCommerceFiles
+};

package/dist/chunks/chunk-XUM5E6RH.js

@@ -0,0 +1,151 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  QUIRE,
+  editorialBrand,
+  editorialType,
+  fitGround,
+  inkButton,
+  lockup,
+  maskedLines,
+  pageBelow,
+  paperGround,
+  riseLines,
+  runningHead
+} from "./chunk-UNHEQZO3.js";
+import {
+  chart
+} from "./chunk-AGV72YOJ.js";
+import {
+  board,
+  reboard,
+  restyle
+} from "./chunk-T43CHLBH.js";
+import {
+  outro,
+  postVariants,
+  verticalPadding
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/social/style-editorial-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Editorial SaaS milestone post";
+var DURATION = 8e3;
+var OUT = 6600;
+var COLS = [80, 420, 1e3];
+var CARD = { w: 920, h: 330 };
+var PLOT = { w: CARD.w - 60, h: 160 };
+var MONTHS = [150, 180, 200, 230, 260, 290, 320, 350, 380, 420, 520, 700];
+var LETTERS = "ONDJFMAMJJAS";
+var CONTENT = ["Running head words", "Line", "Year card", "Foot"];
+var cues = [
+  { layer: "Running head rule", preset: "wipe-in", at: 0, params: { duration: 900 } },
+  { layer: "Running head words", preset: "fade-in", at: 150, params: { duration: 500 } },
+  { layer: "Line", preset: "fade-in", at: 1200, params: { duration: 700 } },
+  { layer: "Year card", preset: "rise-in", at: 900, params: { duration: 900, distance: 40 } },
+  { layer: "Bar", preset: "wipe-in", at: 1300, params: { duration: 500, direction: "up" }, stagger: { delay: 110 } },
+  { layer: "Total dot", preset: "scale-in", at: 3600, params: { duration: 400 } },
+  { layer: "Foot", preset: "fade-in", at: 1800, params: { duration: 600 } },
+  { layer: "Total dot", preset: "pulse", at: 4800, params: { duration: 800, amount: 0.4 } },
+  { layer: "Button", preset: "pulse", at: 5400, params: { duration: 800, amount: 0.03 } },
+  outro(CONTENT, OUT + 200, { gap: 90, duration: 500 }),
+  { layer: "Running head rule", preset: "wipe-out", at: OUT + 500, params: { duration: 600 } }
+];
+var counts = [
+  { layer: "Figure line", at: 300, duration: 3e3, ease: ease.inOut("cubic"), counter: { from: 0, to: QUIRE.paidOut, prefix: "$" } }
+];
+var style_editorial_milestone_default = defineTemplate({
+  id: "motion-saas-style-editorial-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the warm editorial look: on book paper ruled in columns one large serif figure rises from its baseline counting to four million, and a figure card draws the year behind it, twelve monthly bars rising in turn while the running total draws over them. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "editorial", "serif", "magazine", "paper", "milestone", "metric", "counter", "chart", "bar chart", "growth", "build in public", "newsletter", "publishing", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    editorialBrand(k, { line: "paid to writers through Quire in twelve months. Our share of it: nothing." });
+    const t = editorialType(k);
+    inkButton(k, "Call", { style: t.strong(26), label: "Keep yours", pad: [16, 24], arrow: 22 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 30, 80, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    paperGround(k, sheet, 1080, COLS);
+    const head = runningHead(k, sheet, { words: [], style: t.label(20), weight: 3 });
+    const words = k.named(head, "Running head words")[0];
+    lockup(k, words, { size: 30, style: t.serif(34) });
+    k.text(words, "OCT 2025 \u2013 SEP 2026", { style: t.label(20), color: "onPaper", autoWidth: true, name: "Span" });
+    const said = k.stack(sheet, { gap: 18, name: "Said" });
+    maskedLines(k, said, [`$${QUIRE.paidOut.toLocaleString("en-US")}`], { style: t.figure(170), name: "Figure" });
+    k.text(said, "{{brand.line}}", { style: t.serif(32), color: "text", width: 760, name: "Line" });
+    const stage = board(k, sheet, CARD.w, CARD.h, 1, "Year board");
+    const card = k.stack(stage, { width: CARD.w, height: CARD.h, fill: "card", padding: 30, gap: 16, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Year card" });
+    const ch = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    k.text(ch, "FIG. 1 \xB7 PAID OUT A MONTH", { style: t.label(17), color: "cardMuted", autoWidth: true, name: "Card title" });
+    k.text(ch, "RUNNING TOTAL \u2014", { style: t.label(17), color: "onCard", autoWidth: true, name: "Card key" });
+    const max = Math.max(...MONTHS), gap = 12, bw = (PLOT.w - gap * 11) / 12;
+    const plot = k.stack(card, { direction: "HORIZONTAL", width: PLOT.w, height: PLOT.h, gap, align: "MAX", name: "Plot" });
+    MONTHS.forEach((v, i) => k.rect(plot, bw, Math.round(v / max * PLOT.h * 0.92), i === 11 ? "mark" : k.tint("mark", 0.28), { name: "Bar" }));
+    let sum = 0;
+    const totals = MONTHS.map((v) => sum += v);
+    const c = chart(totals, PLOT.w - bw, PLOT.h - 14, sum);
+    const line = k.vector(plot, PLOT.w - bw, PLOT.h - 14, [c.line], [], { name: "Total line", stroke: { color: "onCard", width: 3, join: "ROUND" }, absolute: { x: bw / 2, y: 7 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(plot, 16, "onCard", { name: "Total dot", absolute: { x: bw / 2 + end.x - 8, y: 7 + end.y - 8 }, stroke: { color: "card", width: 3, align: "OUTSIDE" } });
+    const axis = k.stack(card, { direction: "HORIZONTAL", gap, name: "Axis" });
+    for (const l of LETTERS) k.text(axis, l, { style: t.label(16), color: "cardMuted", align: "CENTER", name: "Month" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.instance(foot, "Call", { Label: "Keep yours" }, { name: "Button" });
+    k.text(foot, `THANK YOU, ${QUIRE.publications.toLocaleString("en-US")} PUBLICATIONS`, { style: t.label(20), color: "onPaper", autoWidth: true, name: "Thanks" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    riseLines(k, sheet, "Figure", 200, { duration: 1e3, out: OUT });
+    k.animate(line, "trim.end", [{ t: 1300, v: 0, ease: ease.inOut("cubic") }, { t: 3600, v: 1 }]);
+    k.variants(sheet, postVariants({ portrait: 80, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitGround(kit, id, COLS);
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        restyle(kit, id, "Figure line", t.figure(180));
+      },
+      vertical: (kit, id) => {
+        fitGround(kit, id, [140, 940]);
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 48, counterAxisSpacing: 48, padding: { ...verticalPadding(), bottom: 1920 - 1360 } });
+        for (const n of kit.named(id, "Line")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        restyle(kit, id, "Figure line", t.figure(150));
+        reboard(kit, id, "Year board", 800 / CARD.w);
+        pageBelow(kit, id, { x: 140, y: 1400, width: 800, height: 520 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  style_editorial_milestone_default
+};