@commercelayer/agent-cli 0.1.10 → 0.1.12

package/README.md

@@ -17,8 +17,8 @@ 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, and the hosted cart and checkout, wired to the sandbox's sales channel. Refuses to overwrite without the flag. |
-| `storefront publish` | Upload the folder at `storefront.path` (default `storefront`) to the store host. |
+| `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. |
 | `orders show <id or number>` | One order. |
@@ -70,7 +70,7 @@ COFFEE-ETH-250,"Ethiopia Yirgacheffe, 250 g","Washed, floral, bright.",Coffee >
 COFFEE-COL-250,"Colombia Huila, 250 g",,Coffee > Single origin,12.00,13.50
 ```
 Errors name the file (and line, for CSV) and the sku, so one product file can be fixed without reading the rest. Moving a product between `store.yml` and a file is not a change to the store: `plan` keys everything by sku. The catalog has no stock: inventory is tracked live in Commerce Layer, and the sandbox treats every product as in stock. Prices in these files are what the store charges; a published storefront reads prices and availability live from Commerce Layer.
-Rules `plan` and `apply` enforce: a name, at least one market and one product; every market has `code`, `name`, `countries` and an ISO 4217 `currency`; codes and skus are unique across all files; a product has only `sku`, `name`, `description`, `image_url`, `category` and `prices`; a `category` is a path of names from the top level, separated by ` > `; every product has a price in the currency of every market; `shipping`, if present, has `method` and a non-negative `price`; policy entries are URLs. Currency, languages and tax follow from the countries.
+Rules `plan` and `apply` enforce: a name, at least one market and one product; every market has `code`, `name`, `countries` and an ISO 4217 `currency`; codes and skus are unique across all files; a product has only `sku`, `name`, `description`, `image_url`, `category` and `prices`; a `category` is a path of names from the top level, separated by ` > `; an `image_url` is an `https://` URL or a path in the storefront folder such as `img/eth.jpg` (served from the store host, given to shopping agents as a full URL); every product has a price in the currency of every market; `shipping`, if present, has `method` and a non-negative `price`; policy entries are URLs. Currency, languages and tax follow from the countries.
 ### A catalog the human edits
 When the products live in a tool the human edits too, `store.yml` names it and `c11r catalog pull` copies it into `.commercelayer/products/catalog.csv`, sorted by sku: same source, same file. Pull applies the product rules above before it writes, with errors naming the row in the source, and reports the skus added, changed and removed. Removed products leave the store only through `apply --allow-delete`. Every source has the same columns: `sku`, `name`, `description`, `image_url`, `category`, and one price column per market currency, named by its ISO 4217 code in lowercase (`eur`, `usd`).
 ```yaml

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 = {
@@ -99,7 +101,7 @@ function variant(ctx, p, market) {
         availability: { available: true, status: 'in_stock' },
     };
     if (p.image_url)
-        v.media = [{ type: 'image', url: p.image_url }];
+        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 }] }] };
@@ -201,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

@@ -6,8 +6,8 @@ import path from 'node:path';
 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, loadStore, storefrontPath, template, toApplied } from './store.js';
-import { storefrontHtml } from './storefront.js';
+import { diff, hashStore, isLocalImage, loadStore, storefrontPath, template, toApplied } from './store.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,15 +164,24 @@ 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 });
+    if (!fs.existsSync(keep))
+        fs.writeFileSync(keep, '');
     return {
         status: 'created',
-        files: [file],
+        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, 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() {
@@ -181,16 +190,36 @@ export async function storefrontPublish() {
     if (!fs.existsSync(path.join(dir, 'index.html'))) {
         fail('no_storefront', `There is no ${path.join(dir, 'index.html')}.`, 'Run `c11r storefront init` to create one, or set storefront.path in store.yml to the folder that has index.html.');
     }
+    // Dotfiles (.gitkeep, .DS_Store, .env) and dot folders stay on this machine.
     const files = fs
         .readdirSync(dir, { recursive: true, withFileTypes: true })
         .filter((e) => e.isFile())
-        .map((e) => {
-        const full = path.join(e.parentPath, e.name);
-        return { path: path.relative(dir, full).split(path.sep).join('/'), content_base64: fs.readFileSync(full).toString('base64') };
-    });
+        .map((e) => path.relative(dir, path.join(e.parentPath, e.name)).split(path.sep).join('/'))
+        .filter((rel) => !rel.split('/').some((part) => part.startsWith('.')))
+        .map((rel) => ({ path: rel, content_base64: fs.readFileSync(path.join(dir, rel)).toString('base64') }));
+    // Products whose image_url is a path in the storefront that is not there.
+    let missingImages = [];
+    try {
+        const uploaded = new Set(files.map((f) => f.path));
+        missingImages = loadStore()
+            .products.filter((p) => p.image_url && isLocalImage(p.image_url) && !uploaded.has(p.image_url.replace(/^\.?\//, '')))
+            .map((p) => `${p.sku}: ${p.image_url}`);
+    }
+    catch (e) {
+        if (!(e instanceof CliError))
+            throw e;
+    }
     const published = await api.publishStorefront(dir, files);
     const state = await api.getStore();
-    return { status: 'published', preview_url: state.preview_url, path: dir, files: published.files, published_at: published.published_at };
+    return {
+        status: 'published',
+        preview_url: state.preview_url,
+        path: dir,
+        files: published.files,
+        published_at: published.published_at,
+        missing_images: missingImages.length ? missingImages : undefined,
+        next: missingImages.length ? `Add the missing images under ${dir}/ (image_url is relative to it), or fix image_url, then publish again.` : undefined,
+    };
 }
 /** The store's origin on the web: where it speaks UCP. */
 async function storeOrigin() {

package/dist/store.js

@@ -153,6 +153,12 @@ export function checkProducts(sourced, currencies) {
             const why = unknown.includes('stock') ? 'Stock is not part of the catalog: inventory is tracked live in Commerce Layer. ' : '';
             fail('invalid_product', `Product ${p.sku} in ${source} has ${unknown.length === 1 ? 'a field' : 'fields'} not in the catalog: ${unknown.join(', ')}.`, `${why}A product has ${PRODUCT_KEYS.join(', ')}. Remove the other fields.`);
         }
+        if (p.image_url !== undefined) {
+            const url = String(p.image_url);
+            const ok = isLocalImage(url) ? !url.split('/').includes('..') && url.trim() === url && url !== '' : /^https?:\/\/\S+$/.test(url);
+            if (!ok)
+                fail('invalid_product', `Product ${p.sku} in ${source} has image_url "${url}".`, 'Use a full https:// URL, or a path in the storefront folder such as img/eth.jpg (no "..").');
+        }
         if (p.category !== undefined) {
             const parts = typeof p.category === 'string' ? p.category.split('>').map((c) => c.trim()) : [''];
             if (parts.some((c) => !c))
@@ -169,6 +175,8 @@ export function checkProducts(sourced, currencies) {
     }
     return products;
 }
+/** An image_url that is a path in the storefront (img/eth.jpg), not a URL. */
+export const isLocalImage = (url) => !/^[a-z][a-z0-9+.-]*:/i.test(url) && !url.startsWith('//');
 export function toApplied(store) {
     return {
         markets: Object.fromEntries(store.markets.map((m) => [m.code, m])),

package/dist/storefront.js

@@ -1,15 +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="">\n` : ''}        <${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();
@@ -17,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();
@@ -34,11 +43,14 @@ ${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>
@@ -48,6 +60,8 @@ ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-pric
   <!-- 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)}';
@@ -58,40 +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>
-    :root { color-scheme: light; --ink: #16181d; --muted: #5d6572; --line: #e3e6ea; --accent: #1f5eff; }
-    body { margin: 0; font-family: system-ui, sans-serif; color: var(--ink); background: #fff; }
-    header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
-    header h1 { margin: 0; font-size: 20px; }
-    header nav { display: flex; align-items: center; gap: 16px; }
-    nav.categories { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
-    nav.categories a { color: var(--ink); 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: 8px; }
-    .product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
-    .product h2, .product h3 { margin: 0; font-size: 17px; }
-    .product p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
-    cl-price { font-weight: 600; }
-    cl-price-amount[type="compare-at"] { color: var(--muted); font-weight: 400; text-decoration: line-through; }
-    cl-availability { font-size: 13px; color: var(--muted); }
-    cl-add-to-cart { margin-top: auto; }
-    /* 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; }
-    cl-add-to-cart::part(button), cl-checkout-link::part(a) { display: inline-block; padding: 10px 16px; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; border: 0; cursor: pointer; text-decoration: none; }
-    footer { padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
-  </style>
+  <script src="app.js" defer></script>
 </head>
 <body>
   <header>
-    <h1>${name}</h1>
+    <h1><a href="#">${name}</a></h1>
     <nav>
-      <label>Market
-        <select onchange="location.search = '?market=' + this.value">
+      <label><span class="market-label">Market</span>
+        <select id="market">
 ${options}
         </select>
       </label>
@@ -100,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.10",
+  "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"