@tokenoftrust/storefront-runner 2.5.6 → 3.0.1

package/agency-kit/tools/lib/public-binaries.mjs

@@ -0,0 +1,111 @@
+/**
+ * Tenant binaries never live in the tenant repo. The platform's content-addressed `/_a/<sha256>`
+ * pool owns them and the store's repo holds references only. Platform capture of catalog images
+ * is pending: until it owns them, an image stays at its source URL, go-live requires 0 uncaptured
+ * catalog images, and the source store is never shut down before that check passes. This decides,
+ * from a listing of the store's `public/` tree, whether the repo is carrying binaries it must not.
+ *
+ * Findings, each naming its remedy:
+ *
+ *   - one per entry of {@link FORBIDDEN_PUBLIC_DIRS}: any file under a directory a media download
+ *     writes (`public/catalog-images/` is `catalog-images-in-repo`, `public/blog/wp-content/uploads/`
+ *     is `blog-media-in-repo`). Decided from paths alone, so a caller without sizes still refuses
+ *     it. This list is the one source the validators and the reconcile read; the Gitea
+ *     pre-receive size guard names the same directories.
+ *   - `public-binary-oversized` — one raster or media file over {@link PUBLIC_BINARY_LIMITS}
+ *     `maxFileBytes`.
+ *   - `public-tree-over-budget` — the whole `public/` tree over `maxTotalBytes`.
+ *
+ * The size findings need `bytes`; an entry without it is judged by path only.
+ *
+ * Budget basis (measured 2026-10-20 on three live store repos' `preview` branches): public/ held
+ * 17.2 MB (384 files, largest 0.9 MB), 16.5 MB (largest 0.4 MB) and 0.2 MB outside
+ * catalog-images/. No legitimate file exceeded 1 MB.
+ *
+ * Pure: no filesystem, no network, no imports, so it runs in Node and in the Worker.
+ */
+
+/** @type {{ maxFileBytes: number, maxTotalBytes: number }} */
+export const PUBLIC_BINARY_LIMITS = Object.freeze({
+  maxFileBytes: 1024 * 1024,
+  maxTotalBytes: 32 * 1024 * 1024,
+});
+
+/**
+ * The directories under `public/` a media download writes. No file under one may be committed.
+ *
+ * @type {ReadonlyArray<Readonly<{ dir: string, code: string, noun: string }>>}
+ */
+export const FORBIDDEN_PUBLIC_DIRS = Object.freeze([
+  Object.freeze({ dir: "catalog-images/", code: "catalog-images-in-repo", noun: "catalog image" }),
+  Object.freeze({ dir: "blog/wp-content/uploads/", code: "blog-media-in-repo", noun: "blog media" }),
+]);
+
+/** The finding codes decided from paths alone. */
+export const PATH_DECIDED_FINDING_CODES = Object.freeze(new Set(FORBIDDEN_PUBLIC_DIRS.map((d) => d.code)));
+
+/** True for a path (relative to `public/`, `/` separators) under a forbidden directory. */
+export function isForbiddenPublicPath(rel) {
+  return FORBIDDEN_PUBLIC_DIRS.some((d) => rel.startsWith(d.dir));
+}
+
+/** The kit command that moves downloaded catalog images and blog media back to their source URLs. */
+export const UNHOST_IMAGES_COMMAND = "node agency-kit/tools/import-catalog.mjs --store <checkout> --unhost-images --write";
+
+const RASTER_OR_MEDIA = /\.(?:jpe?g|png|gif|webp|avif|bmp|tiff?|heic|heif|ico|jxl|mp4|m4v|mov|webm|mkv|avi|mpe?g|mp3|wav|ogg|oga|m4a|aac|flac|opus)$/i;
+
+const mb = (bytes) => `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+
+/**
+ * @param {ReadonlyArray<{ rel: string, bytes?: number }>} entries  files under `public/`, `rel`
+ *   relative to it (`catalog-images/ab.jpg`)
+ * @param {{ maxFileBytes?: number, maxTotalBytes?: number }} [limits]
+ * @returns {Array<{ code: string, path: string, message: string, remedy: string }>}
+ */
+export function publicBinaryFindings(entries, limits = {}) {
+  const maxFileBytes = limits.maxFileBytes ?? PUBLIC_BINARY_LIMITS.maxFileBytes;
+  const maxTotalBytes = limits.maxTotalBytes ?? PUBLIC_BINARY_LIMITS.maxTotalBytes;
+  const findings = [];
+  for (const { dir, code, noun } of FORBIDDEN_PUBLIC_DIRS) {
+    const files = entries.filter((e) => e.rel.startsWith(dir));
+    if (files.length === 0) continue;
+    const bytes = files.reduce((n, e) => n + (e.bytes ?? 0), 0);
+    findings.push({
+      code,
+      path: `public/${dir}`,
+      message: `${files.length} ${noun} file(s)${bytes ? ` (${mb(bytes)})` : ""} are committed to the store repo; ` +
+        "images belong in the platform pool, not the repo; until platform capture owns them, keep each image at its source URL",
+      remedy: UNHOST_IMAGES_COMMAND,
+    });
+  }
+  for (const e of entries) {
+    if (isForbiddenPublicPath(e.rel) || e.bytes === undefined) continue;
+    if (e.bytes > maxFileBytes && RASTER_OR_MEDIA.test(e.rel)) {
+      findings.push({
+        code: "public-binary-oversized",
+        path: `public/${e.rel}`,
+        message: `${mb(e.bytes)} raster/media file exceeds the ${mb(maxFileBytes)} per-file limit for the store repo; ` +
+          "images and media belong in the platform pool",
+        remedy: "reference the file by its source URL, or compress it under the limit",
+      });
+    }
+  }
+  if (entries.every((e) => e.bytes !== undefined)) {
+    const total = entries.reduce((n, e) => n + /** @type {number} */ (e.bytes), 0);
+    if (total > maxTotalBytes) {
+      findings.push({
+        code: "public-tree-over-budget",
+        path: "public/",
+        message: `public/ holds ${mb(total)} across ${entries.length} file(s), over the ${mb(maxTotalBytes)} store-repo budget; ` +
+          "images and media belong in the platform pool",
+        remedy: "reference large or bulk assets by their source URL instead of committing them",
+      });
+    }
+  }
+  return findings;
+}
+
+/** One line per finding, remedy included: `<path>: [<code>] <message> — fix: <remedy>`. */
+export function describePublicBinaryFindings(findings) {
+  return findings.map((f) => `${f.path}: [${f.code}] ${f.message} — fix: ${f.remedy}`);
+}

package/apps/storefront/astro.config.mjs

@@ -95,6 +95,13 @@ export default defineConfig({
     // Local image/asset placeholders are served from /public; real product
     // images get rehosted to R2 in Phase 1 ETL (see DECISIONS.md).
     imageService: "compile",
+    // `astro preview` of the built Worker for the fold-gate loopback
+    // (scripts/publish/fold-gate-loopback.mjs): workerd keeps its local state in the
+    // directory the loopback names and opens no inspector port, so a preview never
+    // reads another run's cached responses or races a dev server for port 9229.
+    ...(process.env.TOT_PREVIEW_STATE_DIR
+      ? { persistState: { path: process.env.TOT_PREVIEW_STATE_DIR }, inspectorPort: false }
+      : {}),
   }),
   integrations: [
     // A framework Worker build requires no real-tenant checkout: tenant content

package/apps/storefront/env.d.ts

@@ -17,6 +17,7 @@ import type {
 } from "@tot/public-runtime";
 import type { ToTClient } from "@/lib/catalog/tot/ToTClient";
 import type { ContentProvider } from "@/lib/content/storyblok/provider";
+import type { ServerTiming } from "@/lib/observability/shared/serverTiming";
 
 /**
  * Minimal binding shapes. We intentionally do NOT depend on
@@ -160,6 +161,8 @@ declare global {
        * exist yet. Unset on every public request.
        */
       storeNotPublic?: boolean;
+      /** Per-request phase timer; the middleware stamps it as the `Server-Timing` header. */
+      serverTiming?: ServerTiming;
       /**
        * Which customization environment to serve. "live" on production
        * hosts; "test" only behind a valid, tenant-bound preview token on a

package/apps/storefront/src/components/catalog/storefront/ProductCard.astro

@@ -29,7 +29,8 @@ interface Props {
 }
 
 const { product, priority = false, rating, reviewCount } = Astro.props;
-const { tenant, basePath } = Astro.locals;
+const { tenant, basePath, features } = Astro.locals;
+const showBadges = features.productBadges;
 
 // A compliance-verified item (age/lab/regulatory) earns a "Compliant" badge —
 // tag-driven so it stays tenant-agnostic (no per-merchant branch).
@@ -148,9 +149,9 @@ const quickview = {
 
     {/* Status badges */}
     <div class="pointer-events-none absolute left-2 top-2 z-10 flex flex-col items-start gap-1">
-      {onSale && <Badge variant="sale" label={salePercent ? `-${salePercent}%` : "Sale"} />}
-      {isNewProduct && <Badge variant="new" label="New" />}
-      {isCompliant && <Badge variant="compliant" label="Compliant" />}
+      {showBadges && onSale && <Badge variant="sale" label={salePercent ? `-${salePercent}%` : "Sale"} />}
+      {showBadges && isNewProduct && <Badge variant="new" label="New" />}
+      {showBadges && isCompliant && <Badge variant="compliant" label="Compliant" />}
       {!available && <Badge variant="soldout" label="Sold out" />}
     </div>
 

package/apps/storefront/src/components/catalog/storefront/commerce/PriceDisplay.astro

@@ -10,6 +10,7 @@
  * atom is usable outside a CatalogProduct context (cart line, PDP, fixtures).
  */
 import type { CatalogProduct } from "@tot/public-runtime";
+import { resolveStoreCurrency } from "@tot/public-runtime/declared-tenant-config";
 import { formatPrice, discountPercent } from "@/lib/content/shared/format";
 import { fromPrice, isOnSale } from "@/lib/catalog/tot/query";
 import Badge from "@/components/content/storefront/Badge.astro";
@@ -47,7 +48,7 @@ const {
 // Derive from the product when one is supplied; explicit props win.
 const derivedAmount = product ? fromPrice(product) : 0;
 const amount = amountProp ?? derivedAmount;
-const currency = currencyProp ?? product?.price_range.currency ?? "USD";
+const currency = resolveStoreCurrency(currencyProp ?? product?.price_range.currency);
 
 const productHasRange = !!product && product.price_range.min !== product.price_range.max;
 const from = fromProp ?? productHasRange;

package/apps/storefront/src/components/catalog/storefront/islands/SearchTypeahead.tsx

@@ -1,8 +1,9 @@
 /**
  * <SearchTypeahead> — compact header search with debounced typeahead dropdown.
  *
- * Interactive island (Preact). Fetches `GET {action}?q=<q>&format=json` (the
- * /search page returns `{ products: TypeaheadDoc[] }` when `format=json`) and
+ * Interactive island (Preact). Searches the tenant's static catalog index
+ * (`/catalog-index.json`, fetched once) with the same engine as the /search
+ * page, so it works wherever the page is served — a static host included — and
  * renders up to 6 results as an ARIA combobox/listbox. Submitting the form (or
  * Enter with no active option) navigates to the full `{action}?q=<q>` page.
  *
@@ -11,10 +12,12 @@
  * open a product, Escape to dismiss. Fetch failures degrade to "no dropdown".
  */
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import type { TypeaheadDoc } from "@/lib/catalog/search/index";
+import { toTypeaheadDoc, type TypeaheadDoc } from "@/lib/catalog/search/index";
+import { loadCatalogIndex, searchFromIndex } from "@/lib/catalog/shared/catalogQueryView";
+import { asCatalogProduct } from "@/lib/catalog/shared/catalogIndex";
 import { formatPrice } from "@/lib/content/shared/format";
 import { placeholderDataUri, isUsableImageUrl } from "@/lib/content/shared/placeholder";
-import { withClientBase } from "@/lib/publication/shared/basePath";
+import { clientBasePath, withClientBase } from "@/lib/publication/shared/basePath";
 
 interface Props {
   action?: string;
@@ -48,7 +51,7 @@ export default function SearchTypeahead({
   const [active, setActive] = useState(-1); // index into results, -1 = none
   const rootRef = useRef<HTMLFormElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
+  const requestRef = useRef(0);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const closeDropdown = useCallback(() => {
@@ -56,7 +59,7 @@ export default function SearchTypeahead({
     setActive(-1);
   }, []);
 
-  // Debounced fetch.
+  // Debounced search.
   useEffect(() => {
     const q = query.trim();
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -67,24 +70,18 @@ export default function SearchTypeahead({
       return;
     }
     debounceRef.current = setTimeout(() => {
-      abortRef.current?.abort();
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      // Prefix with the tenant base path so the typeahead queries THIS tenant's
-      // /search (path-routed) rather than the root fallback tenant.
-      const url = `${withClientBase(action)}?q=${encodeURIComponent(q)}&format=json`;
-      fetch(url, { signal: ctrl.signal, headers: { Accept: "application/json" } })
-        .then((r) => (r.ok ? r.json() : Promise.reject(new Error("bad status"))))
-        .then((data: { products?: TypeaheadDoc[] }) => {
-          const products = Array.isArray(data.products)
-            ? data.products.slice(0, MAX_RESULTS)
-            : [];
+      const request = ++requestRef.current;
+      loadCatalogIndex(clientBasePath())
+        .then((index) => {
+          if (request !== requestRef.current) return;
+          const products = searchFromIndex(index, q, MAX_RESULTS).map((p) => toTypeaheadDoc(asCatalogProduct(p)));
           setResults(products);
           setActive(-1);
           setOpen(products.length > 0);
         })
         .catch(() => {
-          // Network/parse error or aborted: degrade silently (no dropdown).
+          // Network/parse error: degrade silently (no dropdown).
+          if (request !== requestRef.current) return;
           setResults([]);
           setOpen(false);
           setActive(-1);
@@ -94,7 +91,7 @@ export default function SearchTypeahead({
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [query, action]);
+  }, [query]);
 
   // Close when focus/click leaves the widget.
   useEffect(() => {

package/apps/storefront/src/components/catalog/storefront/islands/VariantSelector.tsx

@@ -27,6 +27,7 @@ import type {
 } from "@tot/public-runtime";
 import { priceForPurchaseOption } from "@tot/public-runtime";
 import { formatPrice } from "@/lib/content/shared/format";
+import { stockStatus } from "@/lib/catalog/shared/stockStatus";
 import { useCheckoutHandoffCorrelation } from "@/lib/checkout/browser/useCheckoutHandoffCorrelation";
 
 export type PublicSelectorVariant = Pick<CatalogVariant,
@@ -69,6 +70,7 @@ interface Props {
    */
   checkoutCart?: {
     action: string;
+    method: "get" | "post";
     purchaseOptions: ProductPurchaseOption[];
     byVariantId: Record<string, Record<string, VariantCartPayload>>;
   };
@@ -90,8 +92,6 @@ interface Props {
   handoffUrl?: string;
 }
 
-const LOW_STOCK_THRESHOLD = 5;
-
 type Selection = Record<string, string>;
 
 function variantMatches(v: PublicSelectorVariant, sel: Selection): boolean {
@@ -234,22 +234,9 @@ export default function VariantSelector({
   }, [complete, selected]);
 
   // ---- live-region status copy --------------------------------------------
-  const qty = selected?.inventory.quantity;
   const available = selected?.inventory.available ?? false;
-  let stockLabel = "";
-  let stockClass = "text-muted";
-  if (complete && selected) {
-    if (!available) {
-      stockLabel = "Sold out";
-      stockClass = "text-sale";
-    } else if (qty !== undefined && qty !== null && qty <= LOW_STOCK_THRESHOLD) {
-      stockLabel = `Only ${qty} left`;
-      stockClass = "text-accent-ink";
-    } else {
-      stockLabel = "In stock";
-      stockClass = "text-primary";
-    }
-  }
+  const stock = complete && selected ? stockStatus(selected.inventory) : undefined;
+  const STOCK_CLASS = { "sold-out": "text-sale", "low-stock": "text-accent-ink", "in-stock": "text-primary" };
 
   // Compose member + subscription pricing. The pricing context carries the
   // resolved member tier only when an eligible member was resolved server-side;
@@ -323,9 +310,14 @@ export default function VariantSelector({
                 </span>
               )}
             </div>
-            <p class={`font-mono text-xs uppercase tracking-[0.08em] ${stockClass}`}>
-              {stockLabel}
-            </p>
+            {stock && (
+              <p
+                data-product-availability={stock.state}
+                class={`font-mono text-xs uppercase tracking-[0.08em] ${STOCK_CLASS[stock.state]}`}
+              >
+                {stock.label}
+              </p>
+            )}
             {selected.sku && (
               <p class="font-mono text-[0.7rem] text-muted">
                 SKU: {selected.sku}
@@ -486,7 +478,7 @@ export default function VariantSelector({
         <div class="flex flex-col gap-1.5">
           <form
             action={checkoutCart.action}
-            method="post"
+            method={checkoutCart.method}
             target="_top"
             data-managed-cart
             data-product-handle={productHandle}

package/apps/storefront/src/components/catalog/storefront/plp/Pagination.astro

@@ -1,9 +1,11 @@
 ---
 /**
  * Numbered pagination (SEO-friendly, brief §5 default) + a "Load more" link.
- * Both are plain anchors carrying the full query, so they're crawlable and
- * back-button safe. "Load more" simply links to the next page; with JS it could
- * be progressively enhanced to append, but the no-JS path stays correct.
+ * Both are plain anchors, so they're crawlable and back-button safe. The default
+ * view links each page's path variant (`pageHref`, `/collections/<h>/page/<n>/`),
+ * which every static host serves; any other view links the full query. "Load
+ * more" simply links to the next page; with JS it could be progressively
+ * enhanced to append, but the no-JS path stays correct.
  */
 import type { ListProductsQuery } from "@tot/public-runtime";
 import { buildQueryString } from "@/lib/publication/shared/url";
@@ -14,14 +16,16 @@ interface Props {
   page: number;
   pageSize: number;
   total: number;
+  /** Path-variant link for page `p`; absent when the view must keep its query. */
+  pageHref?: (p: number) => string;
 }
-const { query, basePath, page, pageSize, total } = Astro.props;
+const { query, basePath, page, pageSize, total, pageHref } = Astro.props;
 const pageCount = Math.max(1, Math.ceil(total / pageSize));
 if (pageCount <= 1) {
   // nothing to render
 }
 
-const href = (p: number) => basePath + buildQueryString(query, { page: p });
+const href = (p: number) => pageHref?.(p) ?? basePath + buildQueryString(query, { page: p });
 
 // Compact page-number window.
 const windowSize = 5;

package/apps/storefront/src/components/checkout/storefront/commerce/CheckoutLoader.astro

@@ -1,10 +1,12 @@
 ---
 /**
- * <CheckoutLoader> — injects the managed checkout loader (Track A).
+ * <CheckoutLoader> — injects the managed checkout loader (Track A), deferred.
  *
- * The loader turns our add-to-cart forms/links into the cart drawer + hosted
- * checkout. It's loaded from the store's CDN path and must sit near the end of
- * <body>. Rendered only when the tenant has a store (locals.commerce);
+ * The loader turns cart links/forms into the cart drawer + hosted checkout. It is
+ * loaded from the store's CDN path by a nonced bootstrap on the first shopper input
+ * that can reach a commerce control, or a quiet timer after load (see
+ * lazyCheckoutLoader.ts), so its cart-drawer bundle never lands in the load-time
+ * critical path. Rendered only when the tenant has a store (locals.commerce);
  * marketing tenants ship nothing.
  *
  * Note: the loader is a mutable, versioned CDN artifact and does NOT support
@@ -12,10 +14,20 @@
  * allowlist set in middleware. It is loaded as a plain cross-origin script
  * (NO `crossorigin` attribute) because the CDN serves it without CORS headers.
  */
-const { commerce } = Astro.locals;
+import { lazyCheckoutLoaderJs } from "@/lib/checkout/shared/lazyCheckoutLoader";
+
+interface Props {
+  nonce?: string;
+}
+const { commerce, storeNotPublic } = Astro.locals;
+const { nonce } = Astro.props;
 ---
 {
   commerce && (
-    <script src={commerce.loaderSrc} async defer></script>
+    <script is:inline nonce={nonce} set:html={lazyCheckoutLoaderJs({
+        loaderSrc: commerce.loaderSrc,
+        cartOrigin: commerce.origin,
+        storeNotPublic: !!storeNotPublic,
+      })} />
   )
 }

package/apps/storefront/src/components/compliance/storefront/islands/CheckoutComplianceGate.tsx

@@ -32,6 +32,7 @@ import {
   readStoredRef,
   verificationPhase,
   verificationRefKey,
+  verifiedRefKey,
   writeStoredRef,
   type PreflightResponse,
   type VerificationPhase,
@@ -151,7 +152,9 @@ export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props)
       setPopupBlocked(false);
       // A reload mid-trip must not lose the correlation: replay the stored ref so
       // the server re-reads THIS attempt's verification instead of starting over.
-      setVerificationRef(readStoredRef(verificationRefKey(preflightUrl, line)));
+      setVerificationRef(
+        readStoredRef(verificationRefKey(preflightUrl, line)) ?? readStoredRef(verifiedRefKey(preflightUrl)),
+      );
       let pre = false;
       try {
         pre = localStorage.getItem(AGE_KEY) === "yes";
@@ -175,9 +178,19 @@ export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props)
     document.documentElement.style.overflow = "";
   }, [stopPolling]);
 
-  const proceed = useCallback((line: PendingLine) => {
+  const proceed = useCallback((line: PendingLine, ref: string | null) => {
     stopPolling();
     clearStoredRef(verificationRefKey(preflightUrl, line));
+    // The cleared ref rides to the cart (signed server-side) and is reused for later lines.
+    line.form.querySelectorAll('input[name="verification"]').forEach((input) => input.remove());
+    if (ref) {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = "verification";
+      input.value = ref;
+      line.form.appendChild(input);
+      writeStoredRef(verifiedRefKey(preflightUrl), ref);
+    }
     // UX latch so this dialog does not intercept the resubmit. Not payment
     // authority — the form's server action checks the cart.
     line.form.dataset.complianceCleared = "1";
@@ -258,12 +271,13 @@ export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props)
         switch (outcome.kind) {
           case "cleared":
             setDecision(outcome.response.decision);
-            proceed(line);
+            proceed(line, outcome.response.verification?.ref ?? ref);
             return;
           case "denied":
             setDecision(outcome.response.decision);
             setPhase("denied");
             clearStoredRef(verificationRefKey(preflightUrl, line));
+            clearStoredRef(verifiedRefKey(preflightUrl));
             setVerificationRef(null);
             return;
           case "halted":
@@ -304,7 +318,7 @@ export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props)
       setDecision(res.decision);
       // Only the server's own verdict releases the handoff.
       if (res.decision.status === "clear") {
-        proceed(line);
+        proceed(line, ref);
         return;
       }
 
@@ -312,6 +326,7 @@ export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props)
       setPhase(next);
       if (next === "denied") {
         clearStoredRef(key);
+        clearStoredRef(verifiedRefKey(preflightUrl));
         setVerificationRef(null);
         return;
       }

package/apps/storefront/src/components/content/storefront/Badge.astro

@@ -24,6 +24,7 @@ const variants: Record<Props["variant"], string> = {
 ---
 
 <span
+  data-product-badge={variant}
   class:list={[
     "inline-flex items-center rounded-full px-2 py-0.5 font-mono text-[0.62rem] uppercase tracking-[0.12em] leading-none whitespace-nowrap",
     variants[variant],

package/apps/storefront/src/components/content/storefront/blog/BlogIndexView.astro

@@ -10,6 +10,7 @@ import type { BlogIndexCopy } from "@/lib/content/blog/pagination.js";
 import type { BlogPresentation } from "@/lib/content/blog/presentation.js";
 import { categorySlug } from "@/lib/content/blog/collection.js";
 import { collectionPathsV1 } from "@/lib/content/blog/collectionPaths.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/content/shared/breadcrumbs.js";
 
 interface Props {
   basePath: string;
@@ -52,6 +53,14 @@ const itemList = {
     url: new URL(blogPaths.post(post.slug), canonicalBase + "/").toString(),
   })),
 };
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
+  { label: "Blog", href: blogPaths.index },
+);
+const items = pagePosts.map((post) => ({
+  title: post.title,
+  url: new URL(blogPaths.post(post.slug), canonicalBase + "/").toString(),
+}));
 ---
 
 <Layout
@@ -60,7 +69,7 @@ const itemList = {
   path={path}
   fullBleed
   jsonLd={itemList}
-  structuredData={{ pageType: "collection" }}
+  structuredData={{ pageType: "collection", crumbs, items }}
   pagination={pagination}
 >
   <header class:list={["blog-hero", { "blog-hero--plain": !presentation.hero }]}>