makersclaw 0.2.0 → 0.3.0

package/registry/blocks/pdf-viewer/pdfjs.js

@@ -0,0 +1,37 @@
+// The one door to react-pdf (MIT) and pdf.js (pdfjs-dist, Apache-2.0).
+// Every file in this block reaches them through here, and the blocks built
+// on this one reach them through PdfViewer — never the packages directly.
+//
+// The order of the imports is the point: the text and annotation layers'
+// stylesheets, then ssr-shim.js (stand-ins for the browser globals pdf.js
+// reads while it loads — only on the server, where they are missing),
+// react-pdf, then ssr-shim-end.js, which takes them away again. Keep them
+// together and in this order.
+//
+// THE WORKER. pdf.js parses PDFs in a Web Worker, and must be told the
+// worker script's URL. The usual answers are a file copied into public/
+// (a file the app has to own and keep in step with the package) or a CDN
+// (a runtime fetch from someone else's server, blocked by a strict CSP).
+// Neither: `new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url)`
+// is a pattern the bundler (webpack in Next, and Turbopack, Vite, Parcel
+// alike) recognises at BUILD time: it resolves the package's worker file,
+// emits it as a hashed asset under /_next/static/media/, and replaces the
+// expression with that asset's URL (the app's base path included). So the
+// worker ships with the app, is always the same version as the pdf.js that
+// calls it, and is served from the app's own origin. No import(), so the
+// app's one-static-bundle check is happy.
+//
+// It is set here, after react-pdf has loaded, because react-pdf sets its
+// own default when it loads and the later assignment must win. Only in the
+// browser: the server never parses a PDF.
+import "react-pdf/dist/Page/TextLayer.css";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "./ssr-shim";
+import { Document, Page, pdfjs } from "react-pdf";
+import "./ssr-shim-end";
+
+if (typeof window !== "undefined") {
+  pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+}
+
+export { Document, Page, pdfjs };

package/registry/blocks/pdf-viewer/ssr-shim-end.js

@@ -0,0 +1,6 @@
+// Server only: removes the stand-ins ssr-shim.js laid, right after
+// react-pdf and pdf.js have loaded (see ssr-shim.js). Does nothing in the
+// browser.
+import { removeShim } from "./ssr-shim";
+
+removeShim();

package/registry/blocks/pdf-viewer/ssr-shim.js

@@ -0,0 +1,44 @@
+// Server only: stand-ins for the few browser globals pdf.js's viewer
+// module reads WHILE IT LOADS. See pdfjs.js for why this exists.
+//
+// react-pdf imports pdfjs-dist/web/pdf_viewer.mjs (for its link service),
+// and that module runs browser code at the top level:
+// window.requestAnimationFrame, document.documentElement.style,
+// document.createElement("div") (a CSS feature probe), and react-pdf reads
+// window.location. On the server those throw "window is not defined" and
+// the page fails to render — though the viewer itself only ever renders in
+// the browser (the mount guard). The app is one static bundle (no
+// import(), no next/dynamic), so the module cannot be kept off the server;
+// it is let load against these stand-ins instead — the same trick as
+// sketch-canvas's ssr-shim.js.
+//
+// They live only for that load: pdfjs.js imports this file, then
+// react-pdf, then ssr-shim-end.js, which removes them — module evaluation
+// is synchronous, so no other code runs in between. If the load throws,
+// the microtask below removes them anyway, so a global `window` never
+// outlives it. In the browser `window` exists and this file does nothing.
+const G = globalThis;
+const SET = [];
+
+function stand(name, value) {
+  if (typeof G[name] !== "undefined") return;
+  G[name] = value;
+  SET.push(name);
+}
+
+if (typeof window === "undefined") {
+  const element = () => ({ style: {}, dataset: {}, classList: { add() {}, remove() {}, toggle() {} }, setAttribute() {}, appendChild() {} });
+  stand("window", { location: { protocol: "", href: "", origin: "" }, devicePixelRatio: 1, requestAnimationFrame: () => 0 });
+  stand("document", { createElement: element, documentElement: element(), head: element(), body: element() });
+  G.__pdfViewerShim = SET;
+  queueMicrotask(() => {
+    if (G.__pdfViewerShim === SET) removeShim();
+  });
+}
+
+export function removeShim() {
+  const set = G.__pdfViewerShim;
+  if (!set) return;
+  for (const name of set) delete G[name];
+  delete G.__pdfViewerShim;
+}

package/registry/blocks/product-detail/README.md

@@ -0,0 +1,217 @@
+# Product detail
+
+One product on its own page: its pictures, name, price, rating, the
+options a customer picks (size, colour, plan), how many, and **Add to
+cart**. The add goes out through `onAddToCart(line)`; while it runs the
+button spins, when it fails the block says why and nothing else changes,
+when it works it says what was added. Details (description, care,
+shipping) sit under the buy box in an accordion or tabs.
+
+```jsx
+import { ProductDetail } from "../components/blocks/product-detail";   // a Makersclaw app ("./blocks/product-detail" from components/)
+import { ProductDetail } from "@/components/makersclaw/blocks/product-detail";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the product in the server surface (README §4).
+
+## The data
+
+A **product** is one plain object. Only `id`, `name` and `price` are
+needed; everything else draws a part when it is there.
+
+```js
+{
+  id: "tee-linen",               // required
+  name: "Linen camp shirt",      // required
+  price: 68,                     // required: a number in the currency's major unit (68 = $68.00)
+  compareAt: 85,                 // the old price, struck through, with "20% off"
+  currency: "USD",               // else the block's `currency`
+  image: "https://…",            // one picture, or:
+  images: ["https://…", { src: "https://…", alt: "The back" }],
+  brand: "Harbor & Pine",        // a small line over the name
+  badge: "New",                  // an outlined label beside it
+  description: "…",
+  rating: 4.6, reviews: 214,     // stars (halves) and the count
+  href: "/shop/tee-linen",       // where the product lives (carried into the cart line)
+  available: false,              // sold out: the button says so and is off
+  stock: 3,                      // the quantity control stops here
+  options: [                     // what the customer picks, in order
+    { key: "size", label: "Size", values: ["S", "M", "L", { value: "XL", disabled: true }] },
+    { key: "color", label: "Colour", values: [{ value: "sand", label: "Sand", color: "#d8c8a8" }] },
+  ],
+  selected: { size: "M" },       // the first choices (else the first open value of each)
+  details: [{ key: "care", title: "Care", content: "Cold wash…" }],   // content: text or a node
+  perks: [{ icon: "truck", label: "Free shipping over $100" }],
+  stats: [{ value: "1,234", label: "sales" }],
+  scene: "https://…",            // gallery="overlay": the wide picture the buy box floats on
+}
+```
+
+An option's **values** are strings or `{ value, label?, color?, price?,
+compareAt?, per?, description?, badge?, disabled? }`. How an option is
+drawn follows its values (or its `display`):
+
+- `color` on the values → **swatches** (colour squares; the chosen name
+  in the heading). The colour is data, drawn by the kit's `Swatch`.
+- up to 6 short values → **buttons**, a segmented row (sizes).
+- more, or longer → **select**, the native one.
+- `price` or `description` on the values → **plans**, a card each. The
+  chosen value's `price` replaces the product's (a licence, a bigger box).
+
+`disabled: true` on a value marks it sold out: struck through, not
+choosable.
+
+### The cart line
+
+`onAddToCart` and `onBuyNow` get one **line**, the same shape the `cart`
+block takes as an item, so a surface can push it straight into its cart
+rows:
+
+```js
+{
+  id: "tee-linen",
+  key: "tee-linen:size=M:color=sand",   // one cart row per product + choices
+  name: "Linen camp shirt",
+  price: 68, compareAt: 85, currency: "USD",
+  image: "https://…",
+  href: "/shop/tee-linen",
+  quantity: 2,
+  selected: { size: "M", color: "sand" },   // machine values, for your order row
+  variant: "M · Sand",                       // what the cart prints under the name
+}
+```
+
+`cartLine(product, selected, quantity, currency)` builds the same line
+anywhere else (a grid's quick add).
+
+## Props
+
+- `product` — the product above. `null` (and not loading) shows "No
+  product here".
+- `onAddToCart(line)` — put the line in the cart; return `{ ok: true }` or
+  `{ ok: false, error }` (a throw counts as failed, its message shown).
+  Without it the button is off.
+- `gallery` — how the pictures sit: `"thumbs"` (default: one large, a
+  row of thumbnails under it) · `"rail"` (thumbnails in a column beside
+  it from lg up) · `"carousel"` (one at a time, swipe, arrows, dots) ·
+  `"stack"` (every picture, the buy box sticky beside them) ·
+  `"overlay"` (one wide `scene` picture with the buy box floating over it
+  from lg up; under it on a phone).
+- `details` — `"accordion"` (default; the first section open) or `"tabs"`.
+- `onBuyNow(line)` — a second button that goes straight to checkout
+  (open Paddle there); `{ ok }` as above. Absent: no button.
+- `onFavorite(product, next)` — shows a heart toggle; `next` is true to
+  save, false to remove. It flips at once and flips back, with the
+  error, when the save fails. `favorite` — its starting state.
+- `onViewCart()` — a "View cart" button in the added message.
+- `breadcrumb` — `[{ label, href? }]`, drawn above with the kit's
+  `Breadcrumb`.
+- `perks` — `[{ icon, label }]` under the buttons (else `product.perks`).
+  `icon` is a kit `Icon` name: `truck`, `refresh`, `shield-check`, `package`.
+- `quantity` — `false` hides the quantity control (a download); default
+  `true`. `maxQuantity` — the most at once (10; `product.stock` caps it).
+- `currency` — default `"USD"`. `locale` — for prices and counts
+  (default: the reader's).
+- `imageFit` — `"cover"` (default, cropped to the square) or `"contain"`
+  (the whole picture, on a muted fill: packshots on white, screenshots).
+- `loading` — skeletons in the page's shape. `error` (a string) — the
+  load failed; `onRetry` adds "Try again".
+- `addLabel` (`"Add to cart"`) · `buyLabel` (`"Buy now"`) — the words.
+- `headingLevel` — the name's heading, `2` by default; `1` when the block
+  IS the page.
+- `className` — layout around it (width, margin). Never colour.
+
+The parts are exported for a page of your own: `ProductMedia({ product,
+layout, fit })`, `OptionPicker({ option, value, onChange })`,
+`QuantityControl({ value, onChange, min, max })`, `Price({ price,
+compareAt, currency })`, `formatPrice(amount, currency, locale)`.
+
+## Example
+
+```jsx
+// surfaces/product.jsx — server: load, hand over
+import { loadRow } from "../lib/data";
+import ProductPage from "../components/ProductPage";
+
+export default async function ProductSurface({ params }) {
+  const { row, error } = await loadRow({ source: "public.products", id: params.id });
+  return <ProductPage product={row} error={error} />;
+}
+```
+
+```jsx
+// components/ProductPage.jsx — client: the page, the cart write
+"use client";
+import { insertRow } from "../lib/actions";
+import { ProductDetail } from "./blocks/product-detail";
+
+export default function ProductPage({ product, error }) {
+  return (
+    <ProductDetail
+      product={product}
+      error={error}
+      breadcrumb={[{ label: "Shop", href: "/shop" }, { label: product?.name ?? "Product" }]}
+      perks={[
+        { icon: "truck", label: "Free shipping over $100" },
+        { icon: "refresh", label: "30-day returns" },
+      ]}
+      onAddToCart={(line) =>
+        insertRow({
+          source: "public.cart_items",
+          values: { product_id: line.id, line_key: line.key, quantity: line.quantity, selected: line.selected },
+          detail: `${line.quantity} × ${line.name}`,
+        })
+      }
+    />
+  );
+}
+```
+
+A digital product with plans, no quantity, and a straight-to-checkout
+button:
+
+```jsx
+<ProductDetail
+  product={{
+    id: "ui-kit",
+    name: "Dashboard UI kit",
+    price: 49,
+    images: ["https://…/cover.png"],
+    rating: 4.9,
+    reviews: 127,
+    stats: [{ value: "1,234", label: "sales" }],
+    options: [{
+      key: "licence",
+      label: "Licence",
+      values: [
+        { value: "solo", label: "Solo", price: 49, description: "One maker, unlimited projects." },
+        { value: "team", label: "Team", price: 149, badge: "Popular", description: "Up to 10 seats." },
+      ],
+    }],
+  }}
+  quantity={false}
+  imageFit="contain"
+  onAddToCart={addToCart}
+  onBuyNow={(line) => openPaddleCheckout(line)}
+/>
+```
+
+## What it will not do
+
+- Take payment. "Buy now" hands the line to `onBuyNow`; checkout is
+  Paddle's, and no card field is ever drawn here.
+- Keep the cart. It hands over one line; the cart's rows, totals and
+  merging live in your data and the `cart` block.
+- Show similar products or reviews in full: put a `ProductGrid` (the
+  `product-grid` block) and your review list under it.
+- Colour itself: swatch colours are data; everything else is the theme.
+
+A product page it cannot be is your own component in `components/`, built
+from the kit (and this block's exported parts) — not an edit to this
+block. Its files are fixed: `npm run check` refuses a change, and
+`makersclaw add product-detail` restores them.
+
+## Credits
+
+Ported from Creative Tim UI (https://github.com/creativetimofficial/ui), MIT — a rewrite on the Makersclaw kit, none of its code, copy or pictures.

package/registry/blocks/product-detail/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "product-detail",
+  "title": "Product detail",
+  "description": "One product on its own page: pictures (thumbnails, a side rail, a carousel, a tall stack, or one scene with the buy box floating over it), brand, name, price with the old price struck through, star rating and review count, options (sizes as a segmented row, colours as swatches, long lists as a select, plans as cards with their own price), a quantity control, add to cart through an async callback that may fail, buy now, save to favourites, perks, and details in an accordion or tabs. Loading, error, not-found and sold-out states.",
+  "useWhen": "Selling one thing a customer looks at before buying: a product page, a template or digital download with plans, a merch item, a booking add-on. Not for many products at once (product-grid), the cart itself (cart), or a plan comparison table.",
+  "tags": ["product", "shop", "store", "ecommerce", "commerce", "buy", "add to cart", "price", "rating", "size", "colour", "variant", "quantity", "gallery", "carousel", "plans", "favourite", "pdp"],
+  "exports": ["ProductDetail", "ProductMedia", "OptionPicker", "QuantityControl", "Price", "formatPrice", "cartLine"],
+  "files": ["index.js", "product-detail.jsx", "product-media.jsx", "product-options.jsx", "price.jsx"],
+  "requires": []
+}

package/registry/blocks/product-detail/demo.jsx

@@ -0,0 +1,233 @@
+"use client";
+
+// The product page with its data in memory — the gallery's and the smoke
+// test's surface. Not installed into apps: `makersclaw add product-detail`
+// lays the block's files only. Every variant (each a source layout it was
+// ported from) is one choice in the switcher.
+import { useState } from "react";
+import { Field, Select, ToggleGroup } from "../components/ui";
+import { ProductDetail } from "../components/blocks/product-detail";
+
+const pic = (seed, w = 900, h = 900) => `https://picsum.photos/seed/${seed}/${w}/${h}`;
+
+const SHIRT = {
+  id: "camp-shirt",
+  name: "Linen camp shirt",
+  brand: "Harbor & Pine",
+  price: 68,
+  rating: 4.5,
+  reviews: 214,
+  description: "Washed linen with a relaxed collar and a straight hem, cut to wear open over a tee or buttoned on its own.",
+  images: [pic("mc-shirt-1"), pic("mc-shirt-2"), pic("mc-shirt-3"), pic("mc-shirt-4")],
+  options: [
+    { key: "size", label: "Size", values: ["XS", "S", "M", "L", "XL", { value: "XXL", disabled: true }] },
+    {
+      key: "color",
+      label: "Colour",
+      values: [
+        { value: "sand", label: "Sand", color: "tan" },
+        { value: "white", label: "Chalk", color: "whitesmoke" },
+        { value: "olive", label: "Olive", color: "darkolivegreen" },
+      ],
+    },
+  ],
+  selected: { size: "M" },
+  details: [
+    { key: "about", title: "About the shirt", content: "Mid-weight European linen, garment washed so it is soft from the first wear. Corozo buttons, a single chest pocket, and a back pleat for room across the shoulders." },
+    { key: "delivery", title: "Delivery and returns", content: "Free standard delivery on orders over $100, usually in three to five working days. Return anything unworn within 30 days." },
+    { key: "help", title: "Questions", content: "Write to help@harborpine.example and a person replies within a working day." },
+  ],
+};
+
+const COAT = {
+  id: "wool-overcoat",
+  name: "Double-faced wool overcoat",
+  brand: "Northfold",
+  badge: "Limited run",
+  price: 420,
+  rating: 4,
+  reviews: 88,
+  description: "A single-breasted overcoat in double-faced wool: no lining, so it drapes, and warm enough for a city winter.",
+  images: [pic("mc-coat-1"), pic("mc-coat-2"), pic("mc-coat-3"), pic("mc-coat-4")],
+  options: [
+    {
+      key: "color",
+      label: "Colour",
+      values: [
+        { value: "charcoal", label: "Charcoal", color: "dimgray" },
+        { value: "camel", label: "Camel", color: "peru" },
+        { value: "navy", label: "Navy", color: "midnightblue" },
+      ],
+    },
+    { key: "size", label: "Size", values: ["34", "36", "38", "40", "42", "44", "46"] },
+  ],
+  perks: [
+    { icon: "truck", label: "Free shipping over $150" },
+    { icon: "refresh", label: "30-day returns" },
+    { icon: "shield-check", label: "Two-year guarantee" },
+    { icon: "package", label: "Ships in recycled card" },
+  ],
+  details: [
+    { key: "features", title: "Features", content: "Hand-finished edges, a two-button front, welt pockets and an inside pocket sized for a phone." },
+    { key: "care", title: "Care", content: "Dry clean only. Brush after wearing and hang on a shaped hanger to keep the shoulders." },
+    { key: "shipping", title: "Shipping and returns", content: "Ships in two working days. Returns are free within 30 days in original condition." },
+    { key: "warranty", title: "Warranty", content: "Seams and buttons are covered for two years. Write to us with a photo and we repair or replace it." },
+  ],
+};
+
+const JUG = {
+  id: "stoneware-jug",
+  name: "Stoneware water jug",
+  brand: "Kiln Street",
+  badge: "New",
+  price: 54,
+  compareAt: 72,
+  rating: 5,
+  reviews: 127,
+  description: "Thrown by hand and glazed inside and out, with a pinched spout that pours without a drip.",
+  images: [pic("mc-jug-1"), pic("mc-jug-2"), pic("mc-jug-3")],
+  scene: pic("mc-jug-room", 1600, 900),
+  perks: [{ icon: "truck", label: "Free shipping on orders over $100" }],
+  details: [
+    { key: "features", title: "Features", content: "Holds 1.2 litres. Dishwasher safe; the unglazed foot is sanded smooth so it will not mark a table." },
+    { key: "care", title: "Care", content: "Rinse after use. A little vinegar lifts limescale from the inside." },
+    { key: "shipping", title: "Shipping", content: "Double boxed. If it arrives chipped, send a photo and we send another." },
+  ],
+};
+
+const BAG = {
+  id: "crossbody-bag",
+  name: "Vegetable-tanned crossbody",
+  brand: "Atelier Rue",
+  badge: "Trending",
+  price: 185,
+  rating: 4.7,
+  reviews: 342,
+  description: "A small bag in vegetable-tanned leather that darkens as it is used. A magnetic flap, one inside zip pocket, and a strap that adjusts.",
+  images: [pic("mc-bag-1"), pic("mc-bag-2"), pic("mc-bag-3"), pic("mc-bag-4"), pic("mc-bag-5")],
+  options: [
+    {
+      key: "color",
+      label: "Colour",
+      values: [
+        { value: "black", label: "Black", color: "black" },
+        { value: "tan", label: "Tan", color: "sienna" },
+        { value: "forest", label: "Forest", color: "seagreen" },
+        { value: "stone", label: "Stone", color: "silver", disabled: true },
+      ],
+    },
+  ],
+  perks: [
+    { icon: "package", label: "Full-grain leather" },
+    { icon: "pin", label: "Made in Portugal" },
+  ],
+  details: [{ key: "more", title: "More information", content: "23 × 17 × 7 cm. The strap drops 50 to 60 cm. Wipe with a dry cloth; condition twice a year." }],
+};
+
+const KIT = {
+  id: "admin-kit",
+  name: "Admin dashboard kit",
+  badge: "Best seller",
+  price: 49,
+  rating: 4.9,
+  reviews: 127,
+  description: "Sixty screens and the components behind them, ready to drop into a project: tables, charts, settings and sign-in.",
+  images: [pic("mc-kit-1", 1200, 900), pic("mc-kit-2", 1200, 900)],
+  stats: [
+    { value: "4.9/5", label: "rating" },
+    { value: "1,234", label: "sales" },
+  ],
+  options: [
+    {
+      key: "licence",
+      label: "Choose your licence",
+      values: [
+        { value: "html", label: "HTML", price: 39, per: "one-time", description: "Static pages with the styles compiled." },
+        { value: "react", label: "React", price: 49, per: "one-time", badge: "Popular", description: "Components with props and typed data." },
+        { value: "team", label: "Team", price: 149, per: "one-time", description: "React, for up to ten people." },
+      ],
+    },
+  ],
+  selected: { licence: "react" },
+};
+
+const VARIANTS = [
+  { value: "simple", label: "Simple — thumbs, accordion", product: SHIRT, props: { gallery: "thumbs" } },
+  { value: "description", label: "Description — selects, perks", product: COAT, props: { gallery: "thumbs", breadcrumb: [{ label: "Shop", href: "#shop" }, { label: "Outerwear", href: "#outerwear" }, { label: COAT.name }] } },
+  { value: "carousel", label: "Carousel", product: SHIRT, props: { gallery: "carousel", breadcrumb: [{ label: "Shop", href: "#shop" }, { label: SHIRT.name }] } },
+  { value: "complex", label: "Complex — side rail, long details", product: COAT, props: { gallery: "rail", onBuyNow: true } },
+  { value: "tabs", label: "Tabs — sale price", product: JUG, props: { gallery: "thumbs", details: "tabs" } },
+  { value: "stack", label: "Stack — sticky buy box", product: BAG, props: { gallery: "stack", onBuyNow: true, quantity: false } },
+  { value: "plans", label: "Digital — plans", product: KIT, props: { gallery: "thumbs", imageFit: "contain", quantity: false, onBuyNow: true } },
+  { value: "overlay", label: "Overlay — room scene", product: JUG, props: { gallery: "overlay" } },
+];
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export default function ProductDetailDemo() {
+  const [variant, setVariant] = useState("simple");
+  const [state, setState] = useState("ready");
+  const [cart, setCart] = useState([]);
+  const v = VARIANTS.find((x) => x.value === variant) ?? VARIANTS[0];
+  const failing = state === "fails";
+
+  async function addToCart(line) {
+    await wait(700);
+    if (failing) return { ok: false, error: "The cart is not answering. Nothing was added — try again." };
+    setCart((all) => {
+      const hit = all.find((l) => l.key === line.key);
+      return hit ? all.map((l) => (l.key === line.key ? { ...l, quantity: l.quantity + line.quantity } : l)) : [...all, line];
+    });
+    return { ok: true };
+  }
+  async function buyNow() {
+    await wait(700);
+    return failing ? { ok: false, error: "Checkout did not open. Try again in a moment." } : { ok: true };
+  }
+  async function favorite() {
+    await wait(400);
+    return failing ? { ok: false, error: "Favourites are not saving right now." } : { ok: true };
+  }
+
+  const { onBuyNow, ...props } = v.props;
+  const count = cart.reduce((n, l) => n + l.quantity, 0);
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-end gap-3">
+        <Field id="pd-variant" label="Layout" className="w-full sm:w-72">
+          <Select id="pd-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS.map(({ value, label }) => ({ value, label }))} />
+        </Field>
+        <ToggleGroup
+          size="sm"
+          aria-label="Demo state"
+          value={state}
+          onChange={setState}
+          items={[
+            { value: "ready", label: "Ready" },
+            { value: "fails", label: "Fails" },
+            { value: "loading", label: "Loading" },
+            { value: "error", label: "Error" },
+            { value: "missing", label: "Gone" },
+          ]}
+        />
+        <p data-nums className="text-sm text-muted-foreground sm:ml-auto">
+          Cart: {count} {count === 1 ? "item" : "items"}
+        </p>
+      </div>
+
+      <ProductDetail
+        key={variant}
+        product={state === "missing" ? null : v.product}
+        loading={state === "loading"}
+        error={state === "error" ? "The shop's database did not answer." : undefined}
+        onRetry={() => setState("ready")}
+        onAddToCart={addToCart}
+        onBuyNow={onBuyNow ? buyNow : undefined}
+        onFavorite={favorite}
+        onViewCart={() => {}}
+        {...props}
+      />
+    </div>
+  );
+}

package/registry/blocks/product-detail/index.js

@@ -0,0 +1,7 @@
+// The Product detail block — `makersclaw add product-detail`. Fixed:
+// compose it through its props (README.md beside this file); a product
+// page it cannot be is your own component in components/.
+export { ProductDetail } from "./product-detail";
+export { ProductMedia } from "./product-media";
+export { OptionPicker, QuantityControl } from "./product-options";
+export { Price, formatPrice, cartLine } from "./price";