@commercelayer/agent-cli 0.1.11 → 0.1.13

package/README.md

@@ -17,8 +17,9 @@ 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`). |
+| `storefront check` | Read the published storefront at the preview URL and check it: drop-in.js and its config block wired to this store, the drop-in elements, an add to cart for every product and none for unknown skus, every image loading, alt text, stylesheets after drop-in.css, the theme tokens and drop-in overrides (no dead `::part` rules), title, `lang`, viewport, description, and whether the folder changed since publish. Prints `{ status, summary, checks: [{ id, kind, status: pass\|warn\|fail, message, fix, items }], render }` and exits 1 when a check fails; warnings do not fail. `kind` is `static` today; a later rendering phase adds `render` checks and fills `render`. |
 | `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. |
@@ -84,7 +85,7 @@ catalog:
 - `merchant`: a Google Merchant Center product feed URL, RSS 2.0 (XML, `g:` namespace) or TSV. `id` is the sku, `title` the name, `description`, `image_link` the image, `price` (`14.50 EUR`) the price in its currency, `product_type` the category. An id listed once per currency is one product with several prices. Other attributes, `sale_price` included, are ignored.
 Error codes: `no_catalog_source`, `invalid_catalog`, `missing_credentials`, `catalog_unreachable`, `catalog_unauthorized`, `catalog_not_found`, `catalog_not_csv`, `catalog_error`, `empty_catalog`, plus `invalid_product` and `missing_price`.
 
-Error codes: `no_store`, `invalid_yaml`, `invalid_store`, `invalid_market`, `invalid_product`, `missing_price`, `deletes_need_approval`, `apply_failed`, `apply_pending`, `apply_in_progress`, `storefront_exists`, `no_storefront`, `not_applied`, `not_found`, `missing_argument`, `invalid_argument`, `unknown_command`, `unauthorized`, `expired`, `api_unreachable`, `api_error`, `no_product`, `checkout_not_ready`, `ucp_error`, `ucp_profile_unreachable`, `ucp_profile_malformed`, `ucp_version_unsupported`, `ucp_no_rest_service`, `internal`.
+Error codes: `no_store`, `invalid_yaml`, `invalid_store`, `invalid_market`, `invalid_product`, `missing_price`, `deletes_need_approval`, `apply_failed`, `apply_pending`, `apply_in_progress`, `storefront_exists`, `no_storefront`, `storefront_unreachable`, `not_applied`, `not_found`, `missing_argument`, `invalid_argument`, `unknown_command`, `unauthorized`, `expired`, `api_unreachable`, `api_error`, `no_product`, `checkout_not_ready`, `ucp_error`, `ucp_profile_unreachable`, `ucp_profile_malformed`, `ucp_version_unsupported`, `ucp_no_rest_service`, `internal`.
 ## The store speaks UCP
 Each store is a UCP business at `https://<org>.sandbox.commercelayer.store` (live stores: `<slug>.commercelayer.store`), implementing release **2026-08-25** over REST:
 | What | Where |

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/bin.js

@@ -50,7 +50,9 @@ async function run() {
                 return cmd.storefrontInit(flags);
             if (sub === 'publish')
                 return cmd.storefrontPublish();
-            throw new CliError('unknown_command', `There is no command "storefront ${sub ?? ''}".`, 'Use `c11r storefront init` or `c11r storefront publish`.');
+            if (sub === 'check')
+                return cmd.storefrontCheckCmd();
+            throw new CliError('unknown_command', `There is no command "storefront ${sub ?? ''}".`, 'Use `c11r storefront init`, `storefront publish` or `storefront check`.');
         case 'orders':
             if (sub === 'test')
                 return cmd.ordersTest(flags, values);

package/dist/check.js

@@ -0,0 +1,187 @@
+// c11r storefront check: read the published storefront at preview_url, as a browser
+// would fetch it, and report what would break it or what is still the scaffold's.
+// This is the static phase: HTML and CSS as served, images by request. Every check
+// has a kind; a rendering phase (contrast, overflow, minicart fit, screenshots)
+// adds checks of kind "render" and fills `render`, without changing the shape.
+import fs from 'node:fs';
+import path from 'node:path';
+import { send } from './api/transport.js';
+import { fail } from './output.js';
+import { storefrontPath } from './store.js';
+const decode = (t) => t.replace(/&(#x[0-9a-f]+|#\d+|amp|lt|gt|quot|apos);/gi, (m, e) => {
+    const named = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'" };
+    if (e[0] !== '#')
+        return named[e.toLowerCase()] ?? m;
+    return String.fromCodePoint(e[1] === 'x' || e[1] === 'X' ? parseInt(e.slice(2), 16) : Number(e.slice(1)));
+});
+/** Every start tag with its attributes, comments and script bodies left out. */
+function tags(html) {
+    const text = html.replace(/<!--[\s\S]*?-->/g, '').replace(/(<script\b[^>]*>)[\s\S]*?(<\/script>)/gi, '$1$2');
+    return [...text.matchAll(/<([a-zA-Z][\w-]*)((?:\s+[^\s=/>]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*\/?>/g)].map(([, name, raw]) => {
+        const attrs = {};
+        for (const [, k, d, s, u] of raw.matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g))
+            attrs[k.toLowerCase()] = decode(d ?? s ?? u ?? '');
+        return { name: name.toLowerCase(), attrs };
+    });
+}
+const scripts = (html) => [...html.replace(/<!--[\s\S]*?-->/g, '').matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)].map(([, attrs, body]) => ({ attrs, body }));
+/** GET a URL: through the CLI's transport on the store host (so the stub works), plain fetch elsewhere. */
+async function get(url, origin, method = 'GET') {
+    if (new URL(url).origin === origin) {
+        const r = await send('GET', url);
+        return { status: r.status, type: r.headers['content-type'] ?? '', body: r.body };
+    }
+    try {
+        let r = await fetch(url, { method, redirect: 'follow' });
+        if (method === 'HEAD' && (r.status === 405 || r.status === 403))
+            r = await fetch(url, { redirect: 'follow' });
+        return { status: r.status, type: r.headers.get('content-type') ?? '', body: method === 'HEAD' ? '' : await r.text() };
+    }
+    catch (e) {
+        return { status: 0, type: '', body: String(e.cause?.message ?? e.message) };
+    }
+}
+/** In batches, so a large catalog does not open hundreds of connections at once. */
+async function mapLimit(items, limit, fn) {
+    const out = [];
+    for (let i = 0; i < items.length; i += limit)
+        out.push(...(await Promise.all(items.slice(i, i + limit).map(fn))));
+    return out;
+}
+const check = (id, status, message, extra = {}) => ({ id, kind: 'static', status, message, ...extra });
+export async function storefrontCheck(api) {
+    const state = await api.getStore();
+    if (!state.storefront)
+        fail('no_storefront', 'Nothing is published at the store host yet.', 'Run `c11r storefront init` if there is no storefront folder, then `c11r storefront publish`.');
+    const origin = new URL(state.preview_url).origin;
+    const pageUrl = `${origin}/`;
+    const page = await get(pageUrl, origin);
+    if (page.status !== 200 || !page.type.includes('text/html'))
+        fail('storefront_unreachable', `${pageUrl} answered ${page.status} ${page.type}.`, 'Run `c11r storefront publish` again; if it keeps happening, tell the human, with this output.');
+    const html = page.body;
+    const all = tags(html);
+    const find = (name) => all.filter((t) => t.name === name);
+    const checks = [];
+    // drop-in.js: the script, its stylesheets, and the config block wired to this store's sales channel.
+    const dropInJs = find('script').some((t) => /@commercelayer\/drop-in\.js@[^/]+\/dist\/drop-in\/drop-in\.esm\.js/.test(t.attrs.src ?? '') && t.attrs.type === 'module');
+    checks.push(dropInJs ? check('drop_in_script', 'pass', 'drop-in.js is loaded as a module.') : check('drop_in_script', 'fail', 'drop-in.js is not loaded: prices, cart and checkout will not work.', { fix: 'Keep <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.esm.js"> in the <head>, as storefront init writes it.' }));
+    const config = scripts(html).find((s) => s.body.includes('commercelayerConfig'))?.body ?? '';
+    const clientId = config.match(/clientId\s*:\s*['"]([^'"]+)['"]/)?.[1];
+    if (!config)
+        checks.push(check('config', 'fail', 'There is no window.commercelayerConfig block.', { fix: 'Restore the config <script> from storefront init (clientId, scope, defaultAttributes) before the drop-in.js script.' }));
+    else if (clientId !== state.sales_channel_client_id)
+        checks.push(check('config', 'fail', `The config block's clientId is ${clientId ? `"${clientId}"` : 'missing'}, not this store's sales channel.`, { fix: `Set clientId: '${state.sales_channel_client_id}' in the config block.` }));
+    else if (!/market:code:/.test(config))
+        checks.push(check('config', 'fail', 'The config block has no market scope.', { fix: "Keep scope: 'market:code:' + market in the config block." }));
+    else
+        checks.push(check('config', 'pass', "The config block uses this store's sales channel and a market scope."));
+    // The elements a shopper needs, and an add to cart for every product applied.
+    const missing = ['cl-price', 'cl-add-to-cart', 'cl-cart-link', 'cl-checkout-link'].filter((n) => find(n).length === 0);
+    checks.push(missing.length ? check('drop_in_elements', 'fail', `The page has no ${missing.join(', ')}.`, { fix: 'Keep the drop-in.js elements storefront init writes: cl-price and cl-add-to-cart per product, cl-cart-link with cl-cart-count and the mini cl-cart, cl-checkout-link.', items: missing }) : check('drop_in_elements', 'pass', 'Prices, add to cart, the cart link and the checkout link are on the page.'));
+    let data = {};
+    const json = scripts(html).find((s) => /id\s*=\s*["']?products["']?/.test(s.attrs) && /application\/json/.test(s.attrs));
+    if (json) {
+        try {
+            data = JSON.parse(json.body);
+        }
+        catch {
+            checks.push(check('product_data', 'fail', 'The #products data is not valid JSON: product pages will not open.', { fix: 'Fix the JSON in <script type="application/json" id="products">, or regenerate with `c11r storefront init --force`.' }));
+        }
+    }
+    const templated = json && all.some((t) => t.name === 'cl-add-to-cart' && 'data-code' in t.attrs);
+    const codes = new Set(all.filter((t) => t.name.startsWith('cl-') && t.attrs.code).map((t) => t.attrs.code));
+    const buyable = new Set([...find('cl-add-to-cart').map((t) => t.attrs.code).filter(Boolean), ...(templated ? Object.keys(data) : [])]);
+    const skus = Object.keys(state.applied?.products ?? {});
+    const unsold = skus.filter((s) => !buyable.has(s));
+    const unknown = [...new Set([...codes, ...(templated ? Object.keys(data) : [])])].filter((c) => !skus.includes(c));
+    if (unknown.length)
+        checks.push(check('products', 'fail', `The page offers skus the store does not have: ${unknown.join(', ')}.`, { fix: 'Use the skus in the catalog (code="<sku>"), or run `c11r apply` if the catalog has them and the store does not yet.', items: unknown }));
+    else if (unsold.length)
+        checks.push(check('products', 'warn', `${unsold.length} of ${skus.length} products have no add to cart on the page.`, { fix: 'Add a card with <cl-add-to-cart code="<sku>"> for each, or regenerate with `c11r storefront init --force`.', items: unsold }));
+    else
+        checks.push(check('products', 'pass', `All ${skus.length} products can be added to the cart.`));
+    // Images: every <img> and product image, requested; and alt text on the page's images.
+    const imageUrls = new Set();
+    for (const t of find('img'))
+        if (t.attrs.src && !('data-field' in t.attrs))
+            imageUrls.add(t.attrs.src);
+    for (const p of Object.values(data))
+        if (p?.image_url)
+            imageUrls.add(p.image_url);
+    const resolved = [...imageUrls].slice(0, 200).map((src) => {
+        try {
+            return { src, url: new URL(src, pageUrl).href };
+        }
+        catch {
+            return { src, url: '' };
+        }
+    });
+    const answers = await mapLimit(resolved, 8, async (i) => ({ ...i, res: i.url ? await get(i.url, origin, 'HEAD') : { status: 0, type: '', body: 'not a URL' } }));
+    const broken = answers.filter((a) => a.res.status < 200 || a.res.status >= 300 || (a.res.type && !a.res.type.startsWith('image/')));
+    checks.push(broken.length
+        ? check('images', 'fail', `${broken.length} of ${answers.length} images do not load.`, { fix: 'Put the files in the storefront folder (img/<file>) and publish, or fix the URLs.', items: broken.map((b) => `${b.src}: ${b.res.status || b.res.body}${b.res.type && !b.res.type.startsWith('image/') ? ` ${b.res.type}` : ''}`) })
+        : check('images', 'pass', answers.length ? `All ${answers.length} images load.` : 'The page has no images.'));
+    const noAlt = find('img').filter((t) => !('alt' in t.attrs) && !('data-field' in t.attrs)).map((t) => t.attrs.src ?? '(no src)');
+    checks.push(noAlt.length ? check('image_alt', 'warn', `${noAlt.length} images have no alt text.`, { fix: 'Give every <img> an alt: the product name, or alt="" for decoration.', items: noAlt }) : check('image_alt', 'pass', 'Every image has alt text.'));
+    // Styles: the page's own CSS after drop-in.css, the theme tokens, overrides that can apply.
+    const sheets = find('link').filter((t) => /\bstylesheet\b/i.test(t.attrs.rel ?? '') && t.attrs.href);
+    const dropInCss = sheets.findIndex((t) => /drop-in\.js@[^/]+\/dist\/drop-in\/drop-in\.css/.test(t.attrs.href));
+    const own = sheets.filter((t) => new URL(t.attrs.href, pageUrl).origin === origin);
+    const inline = [...html.replace(/<!--[\s\S]*?-->/g, '').matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]);
+    const ownCss = await mapLimit(own, 4, async (t) => (await get(new URL(t.attrs.href, pageUrl).href, origin)).body);
+    const css = [...ownCss, ...inline].join('\n');
+    if (dropInCss < 0)
+        checks.push(check('stylesheets', 'warn', 'drop-in.css is not linked: drop-in.js elements fall back to unstyled.', { fix: 'Keep <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.css" rel="stylesheet">, before the page\'s own stylesheet.' }));
+    else if (own.some((t) => sheets.indexOf(t) < dropInCss))
+        checks.push(check('stylesheets', 'warn', "A stylesheet of the page loads before drop-in.css, so drop-in.css's rules win over it.", { fix: 'Link the page\'s stylesheets after drop-in.css and minicart.css.', items: own.filter((t) => sheets.indexOf(t) < dropInCss).map((t) => t.attrs.href) }));
+    else
+        checks.push(check('stylesheets', 'pass', "The page's stylesheets load after drop-in.css."));
+    const tokens = ['--paper', '--ink', '--accent'].filter((t) => !new RegExp(`${t}\\s*:`).test(css));
+    checks.push(tokens.length ? check('theme_tokens', 'warn', `The theme tokens ${tokens.join(', ')} are not defined.`, { fix: 'Keep the tokens block at the top of styles.css and restyle through it.', items: tokens }) : check('theme_tokens', 'pass', 'The theme tokens are defined.'));
+    const dead = [...css.matchAll(/(cl-add-to-cart|cl-checkout-link|cl-cart-link)::part\([^)]*\)/g)].map((m) => m[0]);
+    const overrides = /cl-price-amount\s*\{[^}]*color\s*:/.test(css) && /cl-add-to-cart(?::not\(\[aria-disabled=["']?true["']?\]\))?\s*\{[^}]*background(-color)?\s*:/.test(css);
+    if (dead.length)
+        checks.push(check('drop_in_overrides', 'fail', 'Some rules style ::part()s that these drop-in.js elements do not have: they never apply.', { fix: 'Style the elements themselves (cl-add-to-cart, cl-checkout-link a), as styles.css does.', items: [...new Set(dead)] }));
+    else if (!overrides)
+        checks.push(check('drop_in_overrides', 'warn', "Nothing overrides drop-in.css's colours for prices and the add to cart button, so they ignore the theme.", { fix: 'Keep the "drop-in.js overrides" section of styles.css.' }));
+    else
+        checks.push(check('drop_in_overrides', 'pass', 'Prices and the add to cart button follow the theme.'));
+    // The page itself.
+    const title = decode(html.match(/<title[^>]*>([\s\S]*?)<\/title>/i)?.[1] ?? '').trim();
+    if (!title)
+        checks.push(check('title', 'fail', 'The page has no <title>.', { fix: 'Add a <title> with the store name and what it sells.' }));
+    else if (title === state.name)
+        checks.push(check('title', 'warn', `The <title> is still the scaffold's: "${title}".`, { fix: 'Say what the store sells too, e.g. "<name> · Specialty coffee".' }));
+    else
+        checks.push(check('title', 'pass', `The <title> is "${title}".`));
+    const lang = find('html')[0]?.attrs.lang;
+    checks.push(lang ? check('lang', 'pass', `The page language is ${lang}.`) : check('lang', 'warn', 'The <html> element has no lang.', { fix: 'Add lang="en" (or the store\'s language) to <html>.' }));
+    const viewport = find('meta').some((t) => t.attrs.name === 'viewport');
+    checks.push(viewport ? check('viewport', 'pass', 'The page has a viewport meta tag.') : check('viewport', 'fail', 'The page has no viewport meta tag: phones show it zoomed out.', { fix: 'Add <meta name="viewport" content="width=device-width, initial-scale=1">.' }));
+    const description = find('meta').find((t) => t.attrs.name === 'description')?.attrs.content;
+    checks.push(description ? check('description', 'pass', 'The page has a meta description.') : check('description', 'warn', 'The page has no meta description, what search results and link previews show.', { fix: 'Add <meta name="description" content="<one sentence on the store>">.' }));
+    // The local folder against what is published.
+    const dir = storefrontPath();
+    if (fs.existsSync(dir)) {
+        const since = Date.parse(state.storefront.published_at);
+        const newer = fs
+            .readdirSync(dir, { recursive: true, withFileTypes: true })
+            .filter((e) => e.isFile() && !path.relative(dir, path.join(e.parentPath, e.name)).split(path.sep).some((p) => p.startsWith('.')))
+            .filter((e) => fs.statSync(path.join(e.parentPath, e.name)).mtimeMs > since)
+            .map((e) => path.relative(dir, path.join(e.parentPath, e.name)).split(path.sep).join('/'));
+        checks.push(newer.length ? check('published', 'warn', `${newer.length} files in ${dir}/ changed after the last publish: this check read the published version.`, { fix: 'Run `c11r storefront publish`, then check again.', items: newer }) : check('published', 'pass', `The published storefront matches ${dir}/.`));
+    }
+    const summary = { pass: 0, warn: 0, fail: 0 };
+    for (const c of checks)
+        summary[c.status]++;
+    return {
+        status: summary.fail ? 'fail' : 'pass',
+        url: pageUrl,
+        published_at: state.storefront.published_at,
+        summary,
+        checks,
+        // Filled by the rendering phase (1440 and 390 px: contrast, overflow, minicart fit, screenshots); null until then.
+        render: null,
+        next: summary.fail ? 'Fix the failed checks (see fix), publish, and check again.' : summary.warn ? 'The storefront works. The warnings are worth fixing before the human sees it.' : undefined,
+    };
+}

package/dist/commands.js

@@ -7,8 +7,9 @@ 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 { storefrontCheck } from './check.js';
 import { buy } from './ucp/buy.js';
 import { check } from './ucp/check.js';
 import { discover } from './ucp/client.js';
@@ -20,7 +21,8 @@ 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 check': 'Check the published storefront at the preview URL: drop-in.js and its config block wired to this store, the drop-in elements, an add to cart for every product, every image loading, alt text, stylesheets after drop-in.css, the theme tokens and drop-in overrides, title, lang, viewport, description, and whether the folder changed since publish. Prints { status, summary, checks: [{ id, kind, status: pass|warn|fail, message, fix, items }] }; exits 1 when a check fails.',
     '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 +166,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,12 +180,15 @@ 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 storefrontCheckCmd() {
+    return storefrontCheck(createApi(requireCredentials()));
+}
 export async function storefrontPublish() {
     const api = createApi(requireCredentials());
     const dir = storefrontPath();

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.13",
   "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"