@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/EmptyState.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * <EmptyState> — intentional empty result (search/PLP). Copy is passed in by
+ * the parent (kept in the tenant's editorial voice).
+ */
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  title: string;
+  body?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+  /** Extra, lower-emphasis recovery links (e.g. "clear just the price range"),
+   * shown under the primary CTA. Optional — most callers have only one CTA. */
+  secondaryActions?: { label: string; href: string }[];
+}
+
+const { title, body, ctaLabel, ctaHref, secondaryActions } = Astro.props;
+const { basePath } = Astro.locals;
+---
+
+<div
+  class="mx-auto flex max-w-md flex-col items-center px-6 py-20 text-center sm:py-28"
+  data-reveal
+>
+  <h2 class="display-md">{title}</h2>
+  {body && <p class="mt-3 max-w-prose text-muted">{body}</p>}
+  {
+    ctaLabel && ctaHref && (
+      <a
+        href={withBase(basePath, ctaHref)}
+        class="mt-7 inline-flex items-center rounded-full bg-primary px-5 py-2 font-display text-sm font-medium text-primary-contrast transition-opacity hover:opacity-90"
+      >
+        {ctaLabel}
+      </a>
+    )
+  }
+  {
+    secondaryActions && secondaryActions.length > 0 && (
+      <ul class="mt-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5">
+        {secondaryActions.map((action) => (
+          <li>
+            <a
+              href={withBase(basePath, action.href)}
+              rel="nofollow"
+              class="text-sm text-muted underline underline-offset-2 hover:text-[var(--color-accent-ink)]"
+            >
+              {action.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    )
+  }
+</div>

package/apps/storefront/src/components/Img.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * <Img> — CLS-free, theme-agnostic image with offline placeholder fallback.
+ *
+ * Fixture image URLs are dead Shopify-CDN paths (brief: images note). When a
+ * URL is unusable, we render a deterministic, aspect-correct gradient SVG keyed
+ * by a stable seed so the site looks polished offline AND stays CLS-free
+ * (explicit width/height always set). When real rehosted URLs land
+ * (CatalogImage.rehosted === true), the same component serves them with
+ * responsive srcset/sizes.
+ *
+ * Responsive srcset is emitted for any URL whose CDN accepts `?width=`: the
+ * rehost target AND Shopify's image CDN (so referenced Shopify URLs from a live
+ * migration are responsive without rehosting).
+ */
+import { resolveImage } from "@/lib/imageAttrs";
+
+interface Props {
+  src?: string;
+  alt: string;
+  width: number;
+  height: number;
+  /** Seed for the placeholder (image id or product handle). */
+  seed: string;
+  /** Short label drawn into the placeholder (e.g. product title). */
+  label?: string;
+  rehosted?: boolean;
+  /** LCP hint: eager + high priority + no lazy. */
+  priority?: boolean;
+  sizes?: string;
+  class?: string;
+  loading?: "eager" | "lazy";
+}
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  seed,
+  label,
+  rehosted = false,
+  priority = false,
+  sizes,
+  class: className,
+  loading,
+} = Astro.props;
+
+// Render decision (placeholder / Cloudflare resizing / Shopify ?width=) lives in
+// lib/imageAttrs.ts so it's unit-testable without rendering this component (D4).
+const { src: resolvedSrc, srcset } = resolveImage({ src, rehosted, width, height, seed, label });
+
+const loadingAttr = loading ?? (priority ? "eager" : "lazy");
+---
+
+<img
+  src={resolvedSrc}
+  srcset={srcset}
+  sizes={srcset ? (sizes ?? "(min-width: 768px) 50vw, 100vw") : undefined}
+  alt={alt}
+  width={width}
+  height={height}
+  loading={loadingAttr}
+  decoding={priority ? "sync" : "async"}
+  fetchpriority={priority ? "high" : "auto"}
+  class={className}
+  style={`aspect-ratio:${width}/${height};background:var(--color-border)`}
+/>

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

@@ -0,0 +1,228 @@
+---
+/**
+ * <ProductCard> — PLP/grid card. Uses the stretched-link pattern (the title is
+ * the link; an ::after overlay makes the whole card clickable) so interactive
+ * controls — wishlist heart, quick-view — can sit ABOVE the link without nesting
+ * buttons in an anchor. Image hover-zoom + optional second image; status badges;
+ * color swatches; price with struck compare-at. Theme-agnostic.
+ */
+import type { CatalogProduct } from "@tot/public-runtime";
+import { discountPercent, truncate } from "@/lib/format";
+import { isOnSale, isNew, isAvailable, fromPrice } from "@/lib/tot/query";
+import { colorOptionValues, resolveSwatch, isLightFill } from "@/lib/colors";
+import Img from "@/components/Img.astro";
+import Badge from "@/components/Badge.astro";
+import PriceDisplay from "@/components/commerce/PriceDisplay.astro";
+import RatingStars from "@/components/commerce/RatingStars.astro";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  product: CatalogProduct;
+  position?: number;
+  list?: string;
+  priority?: boolean;
+  /** Optional aggregate rating (0–5) — renders <RatingStars> when present. */
+  rating?: number;
+  /** Optional review count shown with the stars. */
+  reviewCount?: number;
+}
+
+const { product, priority = false, rating, reviewCount } = Astro.props;
+const { tenant, basePath } = Astro.locals;
+
+// A compliance-verified item (age/lab/regulatory) earns a "Compliant" badge —
+// tag-driven so it stays tenant-agnostic (no per-merchant branch).
+const isCompliant = product.tags.some((t) =>
+  ["compliant", "lab-tested", "age-verified"].includes(t),
+);
+
+const primary = product.images[0];
+const secondary = product.images[1];
+
+const onSale = isOnSale(product);
+const available = isAvailable(product);
+const isNewProduct = !onSale && isNew(product);
+
+const saleVariant = product.variants
+  .filter((v) => v.compare_at_price != null && v.compare_at_price > v.price)
+  .sort(
+    (a, b) =>
+      discountPercent(b.price, b.compare_at_price)! -
+      discountPercent(a.price, a.compare_at_price)!,
+  )[0];
+const salePercent = saleVariant
+  ? discountPercent(saleVariant.price, saleVariant.compare_at_price)
+  : null;
+
+const maxCompareAt = onSale
+  ? Math.max(
+      ...product.variants
+        .filter((v) => v.compare_at_price != null)
+        .map((v) => v.compare_at_price!),
+    )
+  : null;
+
+const price = fromPrice(product);
+const currency = product.price_range.currency;
+const locale = tenant.locale;
+
+const colors = colorOptionValues(product.options);
+const MAX_SWATCHES = 5;
+const swatches = colors.slice(0, MAX_SWATCHES).map(resolveSwatch);
+const extraColors = Math.max(0, colors.length - MAX_SWATCHES);
+
+// Compact snapshot for the wishlist heart + recently-viewed parity.
+const snapshot = {
+  handle: product.handle,
+  title: product.title,
+  price,
+  currency,
+  vendor: product.vendor,
+  img: primary?.url,
+  rehosted: primary?.rehosted,
+  seed: primary?.id ?? product.handle,
+};
+
+// Richer payload for the quick-view dialog (no variant picker — that's the PDP).
+const quickview = {
+  ...snapshot,
+  images: product.images.slice(0, 4).map((im) => ({
+    url: im.url,
+    rehosted: im.rehosted,
+    seed: im.id ?? product.handle,
+  })),
+  desc: truncate(product.description_text, 180),
+  colors,
+  onSale,
+  available,
+  maxCompareAt,
+  sku: product.variants[0]?.sku ?? null,
+};
+---
+
+<div class="group relative" data-reveal>
+  <div class="relative aspect-[4/5] overflow-hidden rounded-md bg-border ring-1 ring-[var(--color-border)] transition-shadow duration-300 motion-safe:group-hover:shadow-[var(--shadow-md)]">
+    {
+      primary ? (
+        <Img
+          src={primary.url}
+          rehosted={primary.rehosted}
+          seed={primary.id ?? product.handle}
+          label={product.title}
+          alt={primary.alt ?? product.title}
+          width={primary.width ?? 800}
+          height={primary.height ?? 1000}
+          sizes="(min-width:1024px) 25vw, (min-width:640px) 50vw, 100vw"
+          priority={priority}
+          class="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]"
+        />
+      ) : (
+        <Img
+          seed={product.handle}
+          label={product.title}
+          alt={product.title}
+          width={800}
+          height={1000}
+          sizes="(min-width:1024px) 25vw, (min-width:640px) 50vw, 100vw"
+          priority={priority}
+          class="h-full w-full object-cover"
+        />
+      )
+    }
+    {
+      secondary && (
+        <Img
+          src={secondary.url}
+          rehosted={secondary.rehosted}
+          seed={secondary.id ?? `${product.handle}-2`}
+          label={product.title}
+          alt=""
+          width={secondary.width ?? 800}
+          height={secondary.height ?? 1000}
+          sizes="(min-width:1024px) 25vw, (min-width:640px) 50vw, 100vw"
+          class="absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-500 motion-safe:group-hover:opacity-100"
+        />
+      )
+    }
+
+    {/* 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" />}
+      {!available && <Badge variant="soldout" label="Sold out" />}
+    </div>
+
+    {/* Wishlist heart — above the stretched link (z-10). State hydrated by the
+        global wishlist script; aria-pressed reflects saved state. */}
+    <button
+      type="button"
+      class="wishlist-toggle absolute right-2 top-2 z-10 grid h-9 w-9 place-items-center rounded-full bg-[color-mix(in_srgb,var(--color-surface)_88%,transparent)] text-[var(--color-text)] backdrop-blur transition-colors hover:text-[var(--color-sale)] focus-visible:text-[var(--color-sale)] aria-pressed:text-[var(--color-sale)]"
+      aria-pressed="false"
+      aria-label={`Save ${product.title}`}
+      data-wishlist={JSON.stringify(snapshot)}
+    >
+      <svg class="wishlist-heart h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+        <path d="M12 21s-7.5-4.6-10-9.2C.4 8.6 2 5 5.5 5 8 5 9.4 6.6 12 9c2.6-2.4 4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.4 12 21 12 21z" />
+      </svg>
+    </button>
+
+    {/* Quick view — reveals on hover/focus-within; opens the global dialog. */}
+    <button
+      type="button"
+      class="quickview-trigger absolute inset-x-2 bottom-2 z-10 rounded-[var(--radius-sm)] bg-[color-mix(in_srgb,var(--color-surface)_92%,transparent)] py-2 text-center font-display text-xs font-medium text-[var(--color-text)] opacity-0 backdrop-blur transition-opacity duration-200 hover:bg-[var(--color-surface)] focus-visible:opacity-100 motion-safe:group-hover:opacity-100 md:opacity-0"
+      data-quickview={JSON.stringify(quickview)}
+    >
+      Quick view
+    </button>
+  </div>
+
+  <div class="mt-3.5">
+    {
+      product.vendor && (
+        <p class="font-mono text-[0.62rem] uppercase tracking-[0.14em] text-muted">
+          {product.vendor}
+        </p>
+      )
+    }
+    <h3 class="mt-1 font-display text-[0.95rem] font-medium leading-snug">
+      <a
+        href={withBase(basePath, `/products/${product.handle}`)}
+        class="after:absolute after:inset-0 after:z-0 transition-colors motion-safe:group-hover:text-primary"
+      >
+        {product.title}
+      </a>
+    </h3>
+    <PriceDisplay product={product} locale={locale} class="mt-1.5" />
+
+    {rating != null && <RatingStars rating={rating} count={reviewCount} class="mt-1.5" />}
+
+    {
+      swatches.length > 1 && (
+        <ul class="mt-2.5 flex items-center gap-1.5" aria-label={`Available in ${colors.length} colors`}>
+          {swatches.map((s) => (
+            <li
+              title={s.label}
+              class:list={[
+                "h-3.5 w-3.5 rounded-full",
+                s.fill && isLightFill(s.fill) ? "ring-1 ring-inset ring-[var(--color-border)]" : "",
+              ]}
+              style={
+                s.fill
+                  ? `background:${s.fill}`
+                  : "background:repeating-linear-gradient(45deg,var(--color-surface),var(--color-surface)2px,var(--color-border)2px,var(--color-border)4px)"
+              }
+            >
+              <span class="sr-only">{s.label}</span>
+            </li>
+          ))}
+          {extraColors > 0 && (
+            <li class="ml-0.5 font-mono text-[0.62rem] text-muted" aria-hidden="true">
+              +{extraColors}
+            </li>
+          )}
+        </ul>
+      )
+    }
+  </div>
+</div>

package/apps/storefront/src/components/Section.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * Section wrapper — consistent vertical rhythm + optional titled header.
+ * Structure encodes meaning (brief §6): an eyebrow/title pair only when there's
+ * a real section heading; otherwise just rhythm.
+ */
+interface Props {
+  title?: string;
+  eyebrow?: string;
+  /** "bg" (default) | "surface" — alternate band background. */
+  tone?: "bg" | "surface";
+  class?: string;
+  id?: string;
+}
+const { title, eyebrow, tone = "bg", class: className, id } = Astro.props;
+const bg = tone === "surface" ? "bg-[var(--color-surface)]" : "bg-[var(--color-bg)]";
+---
+
+<section
+  id={id}
+  class:list={[bg, "py-[clamp(3rem,7vw,6rem)]", className]}
+>
+  <div class="container-prose">
+    {(title || eyebrow) && (
+      <header class="mb-9 flex flex-wrap items-end justify-between gap-4" data-reveal>
+        <div>
+          {eyebrow && <p class="eyebrow eyebrow--tick mb-3">{eyebrow}</p>}
+          {title && (
+            <h2 class="display-lg">
+              {title}
+            </h2>
+          )}
+        </div>
+        <slot name="header-aside" />
+      </header>
+    )}
+    <slot />
+  </div>
+</section>

package/apps/storefront/src/components/Seo.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * <Seo> — per-page title/meta, Open Graph, Twitter card, canonical, JSON-LD.
+ * (brief §8). Tenant-aware: OG image + site name come from the resolved tenant.
+ */
+interface JsonLd {
+  [key: string]: unknown;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  /** Path-only canonical, e.g. /products/foo. Joined to tenant canonical base. */
+  path: string;
+  ogType?: "website" | "product" | "article";
+  ogImage?: string;
+  noindex?: boolean;
+  /** One or more JSON-LD graphs (Product, BreadcrumbList, Organization…). */
+  jsonLd?: JsonLd | JsonLd[];
+}
+
+const {
+  title,
+  description,
+  path,
+  ogType = "website",
+  ogImage,
+  noindex = false,
+  jsonLd,
+} = Astro.props;
+
+const { tenant, canonicalBase } = Astro.locals;
+const canonical = new URL(path, canonicalBase + "/").toString();
+// Don't double-append the brand: merchant SEO titles (title_tag) often already
+// end with the store name.
+const fullTitle = title.includes(tenant.displayName)
+  ? title
+  : `${title} — ${tenant.displayName}`;
+const image = ogImage
+  ? new URL(ogImage, canonicalBase + "/").toString()
+  : new URL(tenant.theme_tokens?.brand?.ogImage ?? "/brand/northwind-og.svg", canonicalBase + "/").toString();
+
+const graphs = jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : [];
+---
+
+<title>{fullTitle}</title>
+{description && <meta name="description" content={description} />}
+<link rel="canonical" href={canonical} />
+{noindex && <meta name="robots" content="noindex,nofollow" />}
+
+<meta property="og:type" content={ogType} />
+<meta property="og:site_name" content={tenant.displayName} />
+<meta property="og:title" content={fullTitle} />
+{description && <meta property="og:description" content={description} />}
+<meta property="og:url" content={canonical} />
+<meta property="og:image" content={image} />
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={fullTitle} />
+{description && <meta name="twitter:description" content={description} />}
+<meta name="twitter:image" content={image} />
+
+{
+  graphs.map((g) => (
+    <script
+      type="application/ld+json"
+      set:html={JSON.stringify(g)}
+    />
+  ))
+}

package/apps/storefront/src/components/WidgetFrame.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * <WidgetFrame> — renders a tenant-registered widget (isolation:"sandbox") in a
+ * sandboxed iframe. The sandbox token list (`allow-scripts`, no
+ * `allow-same-origin`) puts the widget in an opaque origin, so it cannot read the
+ * page's cookies/DOM or its own storage, even though the bundle is served from our
+ * own origin. The widget bundle is hash-pinned in CSP and placed into a
+ * platform-defined slot.
+ */
+import { widgetFrameAttrs, type ScriptStrategy } from "@tot/public-runtime";
+
+interface Props {
+  /** Same-origin URL that loads the tenant's widget bundle. */
+  src: string;
+  /** Accessible title for the iframe (required for a11y). */
+  title: string;
+  strategy?: ScriptStrategy;
+  /** Optional fixed height; widgets may also self-size via postMessage later. */
+  height?: string;
+}
+
+const { src, title, strategy = "on-idle", height = "auto" } = Astro.props;
+const attrs = widgetFrameAttrs(strategy);
+---
+
+<iframe
+  src={src}
+  title={title}
+  sandbox={attrs.sandbox}
+  loading={attrs.loading}
+  referrerpolicy={attrs.referrerpolicy}
+  class="tot-widget-frame"
+  style={`border:0;width:100%;height:${height};`}
+></iframe>