@commercelayer/agent-cli 0.1.11 → 0.1.12

package/README.md

@@ -17,7 +17,7 @@ npx -y @commercelayer/agent-cli@latest init --name "The Blue Brand"   # runs c11
 | `plan` | Validate `store.yml` and the product files, and list what `apply` would create, update or delete: markets, products, and the store's name and policies. |
 | `apply [--allow-delete] [--full]` | Make the store match the files. Refuses deletes without `--allow-delete`. Product changes go through a Commerce Layer import: `apply` waits for it, with progress as JSON lines on stderr, and prints one result. `apply_failed` lists the products Commerce Layer refused; While Commerce Layer is busy or unavailable, `apply` keeps reading (backing off on busy) and writes a `retrying` line. `apply_pending` means the import keeps going after 10 minutes, and `c11r status` follows it. An apply still running is finished before a new one starts. `--full` re-imports every product and price, after edits in the Commerce Layer dashboard. |
 | `catalog pull` | Read the products from the catalog source in `store.yml` (a Supabase table, a Google Sheet or a Google Merchant Center feed) into `.commercelayer/products/catalog.csv`. Then `plan` and `apply` as usual. |
-| `storefront init [--force]` | Write `storefront/index.html`: a static page on [drop-in.js](https://commercelayer.github.io/drop-in.js/) listing the products in `store.yml`, grouped by top-level category with a navigation, with a minicart that slides in on add to cart, styled through theme tokens at the top of its `<style>` (`--paper`, `--ink`, `--muted`, `--line`, `--accent`, `--on-accent`, `--radius`, `--font`) that also restyle drop-in.js's prices, buttons and links, so a dark theme is a token change. Product images go in `storefront/img/` (`image_url: img/<file>`); products with no image get a neutral tile. and the hosted cart and checkout, wired to the sandbox's sales channel. Refuses to overwrite without the flag. |
+| `storefront init [--force]` | Write a static storefront on [drop-in.js](https://commercelayer.github.io/drop-in.js/), no build step, wired to the sandbox's sales channel. `index.html`: the config block, the products grouped by top-level category with a navigation, a minicart that slides in on add to cart, the hosted cart and checkout, and a product page at `#/p/<sku>` built from `<template id="product-template">` and the `#products` data. `styles.css`: theme tokens first (`--paper`, `--ink`, `--muted`, `--line`, `--accent`, `--on-accent`, `--radius`, `--font`), which also restyle drop-in.js's prices, buttons and links, so a dark theme is a token change; then the drop-in.js overrides, then the page. `app.js`: the market switch, the category links and the product page. `img/`: product images (`image_url: img/<file>`); products with no image get a neutral tile. Refuses to overwrite without the flag; with it, rewrites the three files. |
 | `storefront publish` | Upload the folder at `storefront.path` (default `storefront`) to the store host, leaving out dotfiles. Lists products whose `image_url` points at a file that is not in the folder (`missing_images`). |
 | `orders test [--sku <id>] [--quantity <n>] [--country <CC>] [--code <discount>] [--via-cart] [--decline]` | Buy from the store over UCP as a shopping agent would: discover, search, (cart,) checkout, address, pay with the sandbox handler, read the order back. Prints the order and every step. |
 | `orders list` | The orders placed in the store, newest first, as UCP order entities. |

package/dist/api/stub/shopping.js

@@ -86,6 +86,8 @@ function returnPolicy(ctx) {
     ];
 }
 // ---------- catalog
+/** A path in the storefront (img/eth.jpg) is served from the store host: shopping agents always get a full URL. */
+const imageUrl = (ctx, url) => new URL(url, `${ctx.origin}/`).href;
 function variant(ctx, p, market) {
     const price = { amount: toMinor(p.prices[market.currency], market.currency), currency: market.currency };
     const v = {
@@ -98,9 +100,8 @@ function variant(ctx, p, market) {
         // Inventory lives in Commerce Layer; the sandbox catalog has no stock, so everything is in stock.
         availability: { available: true, status: 'in_stock' },
     };
-    // A path in the storefront (img/eth.jpg) is served from the store host: shopping agents get the full URL.
     if (p.image_url)
-        v.media = [{ type: 'image', url: new URL(p.image_url, `${ctx.origin}/`).href }];
+        v.media = [{ type: 'image', url: imageUrl(ctx, p.image_url) }];
     if (ctx.shared.has('dev.ucp.shopping.fulfillment')) {
         const o = shippingOption(market);
         v.fulfillment = { methods: [{ type: 'shipping', description: { plain: `Ships to ${market.countries.join(', ')}` }, availability: v.availability, options: [{ id: o.id, title: o.title, description: o.description }] }] };
@@ -202,7 +203,7 @@ function buildLines(ctx, market, requested, existing = []) {
         const prev = existing.find((e) => e.id === l.id) ?? existing.find((e) => e.item.id === p.sku);
         const item = { id: p.sku, title: p.name, price };
         if (p.image_url)
-            item.image_url = p.image_url;
+            item.image_url = imageUrl(ctx, p.image_url);
         lines.push({ id: prev?.id ?? `li_${++n}`, item, quantity: qty, totals: [{ type: 'subtotal', amount: price * qty }, { type: 'total', amount: price * qty }] });
     });
     return { lines, messages };

package/dist/commands.js

@@ -7,7 +7,7 @@ import { createApi } from './api/client.js';
 import { ignoreCredentials, paths, readCredentials, requireCredentials, writeCredentials } from './files.js';
 import { CliError, fail, progress } from './output.js';
 import { diff, hashStore, isLocalImage, loadStore, storefrontPath, template, toApplied } from './store.js';
-import { storefrontHtml } from './storefront.js';
+import { storefrontFiles } from './storefront.js';
 import { pull } from './catalog.js';
 import { buy } from './ucp/buy.js';
 import { check } from './ucp/check.js';
@@ -20,7 +20,7 @@ export const HELP = {
     plan: 'Show what apply would create, update or delete: markets, products and the store\'s name and policies, from .commercelayer/store.yml and the product files under .commercelayer/products/ (*.yml lists, *.csv rows, merged by sku).',
     apply: 'Make the store match .commercelayer/store.yml and .commercelayer/products/. Refuses deletes unless --allow-delete is given. Product changes go through a Commerce Layer import: apply waits for it (progress as JSON lines on stderr) and prints one result; if it stops with apply_pending the import keeps going, so run `c11r status` to follow it. While Commerce Layer is busy or unavailable it keeps reading, with a retrying line. An apply still running is finished first. --full re-imports every product and price, after edits in the Commerce Layer dashboard.',
     'catalog pull': 'Read the products from the catalog source in store.yml (catalog: { source: supabase | sheets | merchant, url, table }) and write them to .commercelayer/products/catalog.csv; then plan and apply as usual. Columns: sku, name, description, image_url, category and one price column per market currency, in lowercase (eur, usd). Supabase reads C11R_SUPABASE_URL and C11R_SUPABASE_KEY (the anon key) from .commercelayer/credentials or the environment; a Google Sheet needs its CSV link or a link anyone can open; a Merchant Center feed is RSS/XML or TSV.',
-    'storefront init': 'Write storefront/index.html: a static page on drop-in.js listing the products in store.yml, with a minicart that opens on add to cart, and the hosted cart and checkout. Refuses to overwrite unless --force is given.',
+    'storefront init': 'Write a static storefront on drop-in.js, no build step: storefront/index.html (the products by category, a minicart that opens on add to cart, the hosted cart and checkout, and a product page at #/p/<sku>), styles.css (theme tokens first) and app.js, plus img/ for product images. Refuses to overwrite unless --force is given.',
     'storefront publish': 'Upload the storefront folder (store.yml storefront.path, default storefront) to the sandbox preview URL.',
     'orders test': 'Buy from the store over UCP as a shopping agent would, paying with the sandbox handler: discover, search, checkout, address, pay, read the order. Options: --sku <id> --quantity <n> --country <CC> --code <discount> --via-cart --decline.',
     'orders list': 'List the orders placed in the store, newest first, as UCP order entities.',
@@ -164,9 +164,13 @@ export async function storefrontInit(flags) {
         fail('storefront_exists', `${dir}/ already exists.`, 'Edit the files in it, or run `c11r storefront init --force` to regenerate them from store.yml (this overwrites your changes).');
     }
     const state = await api.getStore();
-    fs.mkdirSync(dir, { recursive: true });
-    const file = path.join(dir, 'index.html');
-    fs.writeFileSync(file, storefrontHtml(desired, state.sales_channel_client_id));
+    const written = [];
+    for (const [name, content] of Object.entries(storefrontFiles(desired, state.sales_channel_client_id))) {
+        const file = path.join(dir, name);
+        fs.mkdirSync(path.dirname(file), { recursive: true });
+        fs.writeFileSync(file, content);
+        written.push(file);
+    }
     // img/ is where product images go (image_url: img/<file>); .gitkeep keeps the empty folder in git, and publish skips dotfiles.
     const keep = path.join(dir, 'img', '.gitkeep');
     fs.mkdirSync(path.dirname(keep), { recursive: true });
@@ -174,10 +178,10 @@ export async function storefrontInit(flags) {
         fs.writeFileSync(keep, '');
     return {
         status: 'created',
-        files: [file, keep],
+        files: [...written, keep],
         markets: desired.markets.map((m) => m.code),
         products: desired.products.length,
-        next: `Set storefront.path: ${dir} in ${paths.store}, make the page the human's (restyle it through the theme tokens at the top of its <style>; product images go in ${dir}/img/ with image_url: img/<file>), then run c11r storefront publish.`,
+        next: `Set storefront.path: ${dir} in ${paths.store}, make it the human's (restyle through the tokens at the top of styles.css; product images go in ${dir}/img/ with image_url: img/<file>; each product has a page at #/p/<sku>, built from #product-template in index.html), then run c11r storefront publish.`,
     };
 }
 export async function storefrontPublish() {

package/dist/storefront.js

@@ -1,16 +1,25 @@
-// The storefront scaffold: one static page on drop-in.js listing the products in
-// store.yml, grouped by top-level category, with the minicart, the hosted cart and
-// checkout. The agent then makes it the human's.
+// The storefront scaffold: a static site on drop-in.js, no build step. Three files:
+// index.html (the config block, the drop-in elements, the products grouped by
+// top-level category), styles.css (theme tokens first, then the drop-in.css
+// overrides, then the page) and app.js (market switch, category links, and a
+// product page at #/p/<sku>). The agent then makes it the human's.
 const esc = (t) => String(t ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
-export function storefrontHtml(store, clientId) {
+/** The scaffold's files, by path relative to the storefront folder. */
+export function storefrontFiles(store, clientId) {
+    return { 'index.html': indexHtml(store, clientId), 'styles.css': STYLES, 'app.js': APP };
+}
+function indexHtml(store, clientId) {
     const name = esc(store.name);
-    const card = (p, h) => `      <article class="product">
-${p.image_url ? `        <img src="${esc(p.image_url)}" alt="">` : '        <div class="placeholder" aria-hidden="true"></div>'}
-        <${h}>${esc(p.name)}</${h}>
+    const card = (p, h) => {
+        const href = `#/p/${encodeURIComponent(p.sku)}`;
+        return `      <article class="product" id="p-${esc(p.sku)}">
+        <a class="media" href="${esc(href)}" tabindex="-1">${p.image_url ? `<img src="${esc(p.image_url)}" alt="${esc(p.name)}">` : '<div class="placeholder" aria-hidden="true"></div>'}</a>
+        <${h}><a href="${esc(href)}">${esc(p.name)}</a></${h}>
 ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-price code="${esc(p.sku)}"><cl-price-amount type="compare-at"></cl-price-amount> <cl-price-amount type="price"></cl-price-amount></cl-price>
         <cl-availability code="${esc(p.sku)}"><cl-availability-status type="available">In stock</cl-availability-status><cl-availability-status type="unavailable">Sold out</cl-availability-status></cl-availability>
         <cl-add-to-cart code="${esc(p.sku)}">Add to cart</cl-add-to-cart>
       </article>`;
+    };
     // Products are grouped by the top level of their category, in order of first appearance;
     // products with no category come last, under "Other". No categories: one grid.
     const groups = new Map();
@@ -18,11 +27,10 @@ ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-pric
         const top = p.category?.split(' > ')[0] ?? '';
         groups.set(top, [...(groups.get(top) ?? []), p]);
     }
-    const categorized = [...groups.keys()].some((k) => k);
-    let body;
+    let listing;
     let categoryNav = '';
-    if (!categorized)
-        body = `    <div class="grid">\n${store.products.map((p) => card(p, 'h2')).join('\n')}\n    </div>`;
+    if (![...groups.keys()].some((k) => k))
+        listing = `      <div class="grid">\n${store.products.map((p) => card(p, 'h2')).join('\n')}\n      </div>`;
     else {
         const ordered = [...groups.keys()].filter((k) => k).concat(groups.has('') ? [''] : []);
         const used = new Set();
@@ -35,21 +43,25 @@ ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-pric
             return id;
         });
         categoryNav = `  <nav class="categories">\n${ordered.map((k, i) => `    <a href="#${ids[i]}">${esc(k || 'Other')}</a>`).join('\n')}\n  </nav>\n`;
-        body = ordered
-            .map((k, i) => `    <section id="${ids[i]}">\n      <h2>${esc(k || 'Other')}</h2>\n      <div class="grid">\n${groups.get(k).map((p) => card(p, 'h3')).join('\n')}\n      </div>\n    </section>`)
+        listing = ordered
+            .map((k, i) => `      <section id="${ids[i]}">\n        <h2>${esc(k || 'Other')}</h2>\n        <div class="grid">\n${groups.get(k).map((p) => card(p, 'h3').replace(/^/gm, '  ')).join('\n')}\n        </div>\n      </section>`)
             .join('\n');
     }
     const options = store.markets.map((m) => `          <option value="${esc(m.code)}">${esc(m.name)} (${esc(m.currency)})</option>`).join('\n');
+    // What the product page shows, by sku. Prices and availability come live from drop-in.js.
+    const data = Object.fromEntries(store.products.map((p) => [p.sku, { name: p.name, description: p.description, image_url: p.image_url, category: p.category }]));
+    const json = JSON.stringify(data, null, 2).replace(/</g, '\\u003c');
     return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${name}</title>
-  <!-- Commerce Layer drop-in.js: prices, availability, add to cart, the minicart (a slide-in panel, styled by minicart.css) and links to the hosted cart and checkout.
-       Product images: put them in img/ next to this page and set image_url: img/<file> in the catalog. -->
+  <!-- Commerce Layer drop-in.js: prices, availability, add to cart, the minicart (a slide-in panel, styled by minicart.css) and links to the hosted cart and checkout. -->
   <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/minicart.css" rel="stylesheet">
+  <!-- After the drop-in.js stylesheets: styles.css overrides them with the same selectors. Restyle through its tokens. -->
+  <link href="styles.css" rel="stylesheet">
   <script>
     // The market comes from ?market=<code>; the first market in store.yml is the default. Keep clientId as it is.
     var market = new URLSearchParams(location.search).get('market') || '${esc(store.markets[0].code)}';
@@ -60,71 +72,14 @@ ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-pric
     };
   </script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.esm.js"></script>
-  <style>
-    /* Theme: restyle the page by changing these tokens; a dark theme is color-scheme: dark with paper and ink swapped.
-       Keep this <style> after the drop-in.js stylesheets: its rules use the same selectors as drop-in.css, so they win by coming later. */
-    :root {
-      color-scheme: light;
-      --paper: #ffffff;     /* page background */
-      --ink: #16181d;       /* text and prices */
-      --muted: #5d6572;     /* secondary text, compare-at prices, availability */
-      --line: #e3e6ea;      /* borders, disabled buttons */
-      --accent: #1f5eff;    /* buttons, link hover */
-      --on-accent: #ffffff; /* text on the accent */
-      --radius: 8px;
-      --font: system-ui, sans-serif;
-      /* drop-in.css's own defaults (add to cart, cart count) read these. */
-      --cl-color-primary: var(--accent);
-      --cl-color-white: var(--on-accent);
-    }
-    body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); }
-    a { color: inherit; }
-    header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
-    header h1 { margin: 0; font-size: 20px; }
-    /* The nav never wraps inside: on a narrow screen it moves under the store name as a whole. */
-    header nav { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
-    header select { font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); padding: 4px 6px; }
-    nav.categories { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
-    nav.categories a { text-decoration: none; font-size: 15px; }
-    nav.categories a:hover { color: var(--accent); }
-    main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
-    main section { scroll-margin-top: 16px; }
-    main section + section { margin-top: 40px; }
-    main section > h2 { margin: 0 0 16px; font-size: 22px; }
-    .grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
-    .product { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
-    .product img, .product .placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
-    /* No image: a plain tile a shade off the page, in any theme. */
-    .product .placeholder { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
-    .product h2, .product h3 { margin: 0; font-size: 17px; }
-    .product p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
-    /* drop-in.css colours cl-price-amount itself (#101111), so inheriting is not enough: set it here. */
-    cl-price-amount { color: var(--ink); font-weight: 600; }
-    cl-price-amount[type="compare-at"] { color: var(--muted); font-weight: 400; }
-    cl-availability { font-size: 13px; color: var(--muted); }
-    /* cl-add-to-cart is the button itself (it has no ::part); drop-in.css colours it with these same selectors. */
-    cl-add-to-cart { margin-top: auto; align-self: flex-start; padding: 10px 16px; border-radius: calc(var(--radius) - 2px); font: inherit; font-weight: 600; background-color: var(--line); color: var(--muted); }
-    cl-add-to-cart:not([aria-disabled=true]) { background-color: var(--accent); color: var(--on-accent); }
-    /* cl-checkout-link renders a plain <a> (no shadow DOM); without an order it is aria-disabled. */
-    cl-checkout-link a { display: inline-block; padding: 8px 14px; border-radius: calc(var(--radius) - 2px); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
-    cl-checkout-link[aria-disabled="true"] a { background: var(--line); color: var(--muted); }
-    /* drop-in.css styles the count as a badge beside a cart icon (absolute, pushed right). The link is text here, so render it inline: "Cart (3)". */
-    cl-cart-link cl-cart-count { position: static; transform: none; display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
-    footer { padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
-    @media (max-width: 480px) {
-      header, nav.categories { padding-left: 16px; padding-right: 16px; }
-      header nav { gap: 12px; }
-      .market-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-      main { padding: 24px 16px; }
-    }
-  </style>
+  <script src="app.js" defer></script>
 </head>
 <body>
   <header>
-    <h1>${name}</h1>
+    <h1><a href="#">${name}</a></h1>
     <nav>
       <label><span class="market-label">Market</span>
-        <select onchange="location.search = '?market=' + this.value">
+        <select id="market">
 ${options}
         </select>
       </label>
@@ -133,11 +88,190 @@ ${options}
     </nav>
   </header>
 ${categoryNav}  <main>
-${body}
+    <div id="listing">
+${listing}
+    </div>
+    <!-- The product page: app.js fills it from #product-template and #products when the address is #/p/<sku>. -->
+    <div id="product-page" hidden></div>
   </main>
   <footer>Sandbox store: test payments only.</footer>
-  <script>document.querySelector('header select').value = market;</script>
+
+  <!-- The product page's markup. Elements with data-field get the product's data; elements with data-code get code="<sku>" for drop-in.js. -->
+  <template id="product-template">
+    <article class="product-page">
+      <a class="back" href="#">&larr; All products</a>
+      <div class="media"><img data-field="image_url" alt=""><div class="placeholder" aria-hidden="true"></div></div>
+      <div class="info">
+        <p class="category" data-field="category"></p>
+        <h2 data-field="name"></h2>
+        <p data-field="description"></p>
+        <cl-price data-code><cl-price-amount type="compare-at"></cl-price-amount> <cl-price-amount type="price"></cl-price-amount></cl-price>
+        <cl-availability data-code><cl-availability-status type="available">In stock</cl-availability-status><cl-availability-status type="unavailable">Sold out</cl-availability-status></cl-availability>
+        <cl-add-to-cart data-code>Add to cart</cl-add-to-cart>
+      </div>
+    </article>
+  </template>
+  <template id="not-found-template">
+    <article class="product-page">
+      <a class="back" href="#">&larr; All products</a>
+      <p>This product is not in the store.</p>
+    </article>
+  </template>
+  <!-- The products, by sku: name, description, image_url, category. Keep it in step with the cards above. -->
+  <script type="application/json" id="products">
+${json}
+  </script>
 </body>
 </html>
 `;
 }
+const STYLES = `/* The storefront's styles, in three parts: theme tokens, drop-in.js overrides, the page.
+   Restyle the page by changing the tokens; a dark theme is color-scheme: dark with paper and ink swapped.
+   index.html links this file after the drop-in.js stylesheets: the overrides use the same selectors as
+   drop-in.css, so they win by coming later. Keep that order. */
+
+/* 1. Theme tokens */
+:root {
+  color-scheme: light;
+  --paper: #ffffff;     /* page background */
+  --ink: #16181d;       /* text and prices */
+  --muted: #5d6572;     /* secondary text, compare-at prices, availability */
+  --line: #e3e6ea;      /* borders, disabled buttons */
+  --accent: #1f5eff;    /* buttons, link hover */
+  --on-accent: #ffffff; /* text on the accent */
+  --radius: 8px;
+  --font: system-ui, sans-serif;
+  /* drop-in.css's own defaults (add to cart, cart count) read these. */
+  --cl-color-primary: var(--accent);
+  --cl-color-white: var(--on-accent);
+}
+
+/* 2. drop-in.js overrides */
+/* drop-in.css colours cl-price-amount itself (#101111), so inheriting is not enough: set it here. */
+cl-price-amount { color: var(--ink); font-weight: 600; }
+cl-price-amount[type="compare-at"] { color: var(--muted); font-weight: 400; }
+cl-availability { font-size: 13px; color: var(--muted); }
+/* cl-add-to-cart is the button itself (it has no ::part); drop-in.css colours it with these same selectors. */
+cl-add-to-cart { align-self: flex-start; padding: 10px 16px; border-radius: calc(var(--radius) - 2px); font: inherit; font-weight: 600; background-color: var(--line); color: var(--muted); }
+cl-add-to-cart:not([aria-disabled=true]) { background-color: var(--accent); color: var(--on-accent); }
+/* cl-checkout-link renders a plain <a> (no shadow DOM); without an order it is aria-disabled. */
+cl-checkout-link a { display: inline-block; padding: 8px 14px; border-radius: calc(var(--radius) - 2px); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
+cl-checkout-link[aria-disabled="true"] a { background: var(--line); color: var(--muted); }
+/* drop-in.css styles the count as a badge beside a cart icon (absolute, pushed right). The link is text here, so render it inline: "Cart (3)". */
+cl-cart-link cl-cart-count { position: static; transform: none; display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
+
+/* 3. The page */
+body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); }
+a { color: inherit; }
+header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
+header h1 { margin: 0; font-size: 20px; }
+header h1 a { text-decoration: none; }
+/* The nav never wraps inside: on a narrow screen it moves under the store name as a whole. */
+header nav { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
+header select { font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); padding: 4px 6px; }
+nav.categories { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
+nav.categories a { text-decoration: none; font-size: 15px; }
+nav.categories a:hover { color: var(--accent); }
+main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
+main section { scroll-margin-top: 16px; }
+main section + section { margin-top: 40px; }
+main section > h2 { margin: 0 0 16px; font-size: 22px; }
+.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+.product { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 16px; }
+.product h2, .product h3 { margin: 0; font-size: 17px; }
+.product h2 a, .product h3 a { text-decoration: none; }
+.product h2 a:hover, .product h3 a:hover { color: var(--accent); }
+.product p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
+.product cl-add-to-cart { margin-top: auto; }
+.media img, .media .placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
+/* No image: a plain tile a shade off the page, in any theme. */
+.placeholder { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
+.product-page { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+.product-page .back { grid-column: 1 / -1; text-decoration: none; color: var(--muted); }
+.product-page .back:hover { color: var(--accent); }
+.product-page .info { display: flex; flex-direction: column; gap: 12px; }
+.product-page .info h2 { margin: 0; font-size: 28px; }
+.product-page .info p { margin: 0; line-height: 1.6; }
+.product-page .category { color: var(--muted); font-size: 14px; }
+footer { padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
+@media (max-width: 720px) {
+  .product-page { grid-template-columns: 1fr; }
+}
+@media (max-width: 480px) {
+  header, nav.categories { padding-left: 16px; padding-right: 16px; }
+  header nav { gap: 12px; }
+  .market-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  main { padding: 24px 16px; }
+}
+`;
+const APP = `// The storefront's behaviour, no build step: the market switch, the category links,
+// and the product page at #/p/<sku>, filled from #product-template and the #products data.
+// drop-in.js does the commerce: prices, availability, cart, checkout.
+
+(function () {
+  var products = JSON.parse(document.getElementById('products').textContent);
+  var listing = document.getElementById('listing');
+  var page = document.getElementById('product-page');
+  var storeTitle = document.title;
+
+  // Market: ?market=<code> picks the drop-in.js scope (see the config block in index.html).
+  var select = document.getElementById('market');
+  select.value = market;
+  select.addEventListener('change', function () {
+    location.search = '?market=' + encodeURIComponent(select.value);
+  });
+
+  function fill(root, product, sku) {
+    root.querySelectorAll('[data-field]').forEach(function (el) {
+      var value = product[el.dataset.field];
+      if (el.tagName === 'IMG') {
+        if (!value) return el.remove();
+        el.src = value;
+        el.alt = product.name;
+        if (el.nextElementSibling) el.nextElementSibling.remove();
+      } else if (value) el.textContent = value;
+      else el.remove();
+    });
+    // code is set before the elements join the page, so drop-in.js reads it when they connect.
+    root.querySelectorAll('[data-code]').forEach(function (el) {
+      el.setAttribute('code', sku);
+      el.removeAttribute('data-code');
+    });
+  }
+
+  function showProduct(sku) {
+    var product = products[sku];
+    var view = document.getElementById(product ? 'product-template' : 'not-found-template').content.cloneNode(true);
+    if (product) fill(view, product, sku);
+    page.replaceChildren(view);
+    listing.hidden = true;
+    page.hidden = false;
+    document.title = (product ? product.name + ' · ' : '') + storeTitle;
+    window.scrollTo(0, 0);
+  }
+
+  function showListing(anchor) {
+    page.hidden = true;
+    page.replaceChildren();
+    listing.hidden = false;
+    document.title = storeTitle;
+    var target = anchor && document.getElementById(anchor);
+    if (target) target.scrollIntoView();
+  }
+
+  var lastSku = null;
+  function route() {
+    var hash = decodeURIComponent(location.hash.slice(1));
+    if (hash.indexOf('/p/') === 0) {
+      lastSku = hash.slice(3);
+      return showProduct(lastSku);
+    }
+    // A category link (#category-...), or the listing (#): back from a product, return to its card.
+    showListing(hash || (lastSku && 'p-' + lastSku));
+    lastSku = null;
+  }
+
+  window.addEventListener('hashchange', route);
+  route();
+})();
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/agent-cli",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "c11r: the Commerce Layer CLI for coding agents. Builds a sandbox store that people and shopping agents can buy from.",
   "homepage": "https://commercelayer.ai",
   "keywords": [
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "happy-dom": "^21.0.4",
     "tsx": "^4.19.0",
     "typescript": "^5.6.0",
     "vitest": "^3.0.0"