@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/commerce/ReviewList.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * <ReviewList> — molecule. A grid of individual review cards (author, star
+ * rating, optional title, body, verified-buyer badge, date).
+ *
+ * Presentation only — it renders exactly the `Review[]` you pass through, in
+ * order, up to `max`. It never fabricates a review, a rating, or a "verified"
+ * badge: every field comes from the caller's sourced/imported review data
+ * (claims-ledger discipline; see docs/architecture/review-markup-policy.md).
+ * Renders nothing when `reviews` is empty — callers decide whether an empty
+ * state or the section itself should show.
+ *
+ * data-widget="review-list" is the audit/test hook.
+ */
+import type { Review } from "@tot/public-runtime";
+import RatingStars from "./RatingStars.astro";
+import { formatDate } from "@/lib/format";
+
+interface Props {
+  reviews: Review[];
+  /** Cap how many render (source list may be longer). */
+  max?: number;
+  locale?: string;
+  class?: string;
+}
+
+const { reviews, max = 10, locale = "en-US", class: className } = Astro.props;
+const shown = reviews.slice(0, max);
+---
+
+{
+  shown.length > 0 && (
+    <ul class:list={["grid gap-5 md:grid-cols-2", className]} data-widget="review-list">
+      {shown.map((r) => (
+        <li class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
+          <div class="flex items-center justify-between gap-3">
+            <RatingStars rating={r.rating} showCount={false} />
+            {r.verifiedBuyer && (
+              <span class="font-mono text-[0.6rem] uppercase tracking-[0.12em] text-[var(--color-success)]">
+                Verified buyer
+              </span>
+            )}
+          </div>
+          {r.title && <p class="mt-2.5 font-display font-semibold leading-snug">{r.title}</p>}
+          <p class="mt-1.5 text-sm leading-relaxed text-[var(--color-text)]">{r.body}</p>
+          <p class="mt-3 text-xs text-[var(--color-muted)]">
+            {r.author}
+            {formatDate(r.date, locale) ? ` · ${formatDate(r.date, locale)}` : ""}
+          </p>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/apps/storefront/src/components/commerce/ReviewSummary.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * <ReviewSummary> — atom. The aggregate rating badge (stars + "N reviews") shown
+ * near a product title. Wraps <RatingStars>; adds an optional link down to the
+ * full review list.
+ *
+ * Presentation only — it renders whatever aggregate you pass. No review data is
+ * invented here (claims-ledger discipline: source the average/count before
+ * shipping them; see docs/architecture/review-markup-policy.md). Callers that
+ * have no real aggregate yet should not render this component at all.
+ *
+ * data-widget="review-summary" is the audit/test hook.
+ */
+import RatingStars from "./RatingStars.astro";
+
+interface Props {
+  /** 0–5, real average from the source reviews app. */
+  average: number;
+  /** Real review count backing the average. */
+  count: number;
+  /** Anchor to the full review list section, e.g. "#reviews". */
+  href?: string;
+  size?: "sm" | "md";
+  class?: string;
+}
+
+const { average, count, href, size = "sm", class: className } = Astro.props;
+---
+
+{
+  href ? (
+    <a
+      href={href}
+      class:list={["inline-flex items-center gap-2 hover:opacity-80", className]}
+      data-widget="review-summary"
+    >
+      <RatingStars rating={average} count={count} size={size} />
+    </a>
+  ) : (
+    <div class:list={["inline-flex items-center gap-2", className]} data-widget="review-summary">
+      <RatingStars rating={average} count={count} size={size} />
+    </div>
+  )
+}

package/apps/storefront/src/components/commerce/TagFilterCloud.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * <TagFilterCloud> — a cloud of tag/category chips for a blog or article index,
+ * each linking to its filtered view. The active tag is marked (aria-current) and
+ * visually filled; an optional leading "All" chip clears the filter. Tenant-
+ * agnostic — the `tags` are content, theme tokens are the skin.
+ *
+ * URL-addressable + zero-JS: each chip is a plain link, so filtering works
+ * without client script (the server renders the filtered index). Mirrors the
+ * raw-chrome `.tag-cloud` / `.tag-chip` block in
+ * public/shared/commerce-chrome.css — same token vocabulary, same look.
+ */
+import { withBase } from "@/lib/basePath";
+
+export interface TagItem {
+  /** Display label. */
+  label: string;
+  /** Filtered-index URL. Base-prefixed here. */
+  href: string;
+  /** Optional article count shown as a superscript-ish suffix. */
+  count?: number;
+  /** True for the currently-selected tag. */
+  active?: boolean;
+}
+
+interface Props {
+  tags: TagItem[];
+  /** Optional heading above the cloud. */
+  title?: string;
+  /** Render a leading "All" chip that clears the filter. */
+  allHref?: string;
+  allLabel?: string;
+  /** True when no tag filter is applied (the "All" chip is active). */
+  allActive?: boolean;
+  /** Accessible label for the nav region (default "Filter by tag"). */
+  ariaLabel?: string;
+  class?: string;
+}
+
+const {
+  tags,
+  title,
+  allHref,
+  allLabel = "All",
+  allActive = false,
+  ariaLabel = "Filter by tag",
+  class: className,
+} = Astro.props;
+const basePath = Astro.locals.basePath ?? "";
+
+const chip = (t: TagItem) => ({
+  href: withBase(basePath, t.href),
+  active: !!t.active,
+});
+---
+
+<nav class:list={["tag-cloud-wrap", className]} aria-label={ariaLabel}>
+  {title && <p class="tag-cloud__title">{title}</p>}
+  <ul class="tag-cloud" role="list">
+    {
+      allHref && (
+        <li>
+          <a
+            class:list={["tag-chip", allActive && "is-active"]}
+            href={withBase(basePath, allHref)}
+            aria-current={allActive ? "page" : undefined}
+          >
+            {allLabel}
+          </a>
+        </li>
+      )
+    }
+    {
+      tags.map((t) => (
+        <li>
+          <a
+            class:list={["tag-chip", chip(t).active && "is-active"]}
+            href={chip(t).href}
+            aria-current={chip(t).active ? "page" : undefined}
+          >
+            {t.label}
+            {typeof t.count === "number" && <span class="tag-chip__count">{t.count}</span>}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  /* Mirrors the raw-chrome `.tag-cloud` / `.tag-chip` block in
+     public/shared/commerce-chrome.css — same token vocabulary, same look. */
+  .tag-cloud__title {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 0.72rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-muted);
+    margin-bottom: 0.6rem;
+  }
+  .tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: 0.85rem;
+    font-weight: 600;
+    transition:
+      background 0.15s ease,
+      color 0.15s ease,
+      border-color 0.15s ease;
+  }
+  .tag-chip:hover {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+  .tag-chip.is-active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+  .tag-chip__count {
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--color-muted);
+  }
+  .tag-chip.is-active .tag-chip__count {
+    color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent);
+  }
+  .tag-chip:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tag-chip {
+      transition: none;
+    }
+  }
+</style>

package/apps/storefront/src/components/compliance/AdultSignatureNotice.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * Adult-signature-on-delivery notice. Regulated nicotine/vapor deliveries
+ * require an of-age adult to sign; the wording is fixed here and the age
+ * reflects tenant.compliance.minAge (defaults to 21). Renders NOTHING when
+ * `enabled` is false. Driven by tenant.compliance.adultSignature — never hand-
+ * authored on a marketing page (decision compliance-widgets-platform-owned).
+ */
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.adultSignature. */
+  enabled?: boolean;
+  /** From tenant.compliance.minAge (defaults to 21). */
+  minAge?: number;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { enabled = false, minAge = 21, variant = "inline" } = Astro.props;
+
+const TEXT =
+  `Adult signature required: someone ${minAge} or older must be present to sign ` +
+  `for this delivery.`;
+---
+
+{
+  enabled && (
+    <ComplianceNotice
+      variant={variant}
+      tone="neutral"
+      hook="adult-signature"
+      label="Adult signature on delivery notice"
+    >
+      {TEXT}
+    </ComplianceNotice>
+  )
+}

package/apps/storefront/src/components/compliance/ComplianceNotice.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * Shared presentational chrome for the platform compliance-notice widgets
+ * (PACT Act, adult signature, Prop 65, purchase limits — and the pattern the
+ * FDA NicotineWarning follows). It owns ONLY the chrome: the fixed legal text
+ * is supplied by each sibling widget via <slot />, and every sibling renders it
+ * ONLY when its tenant.compliance data is present. This component adds no copy
+ * of its own — it never fabricates legal wording (decision
+ * compliance-widgets-platform-owned).
+ *
+ * Variants — one visual treatment per placement, token-styled so they re-skin
+ * with the theme and never carry a hardcoded brand color:
+ *   - "bar"    persistent full-width strip (top-of-page compliance band)
+ *   - "block"  reinforced bordered box (PDP / cart / dedicated notice)
+ *   - "inline" compact inline note (beside a control or price)
+ *   - "footer" footer-hub row (matches the shipping-restriction footer band)
+ *
+ * Tone drives the emphasis color from the contract token vocab only. Every
+ * arbitrary-value class is written as a STATIC literal in the lookup maps below
+ * so the Tailwind compiler emits it (dynamic interpolation would be dropped) —
+ * same pattern as Badge.astro.
+ */
+type Variant = "bar" | "block" | "inline" | "footer";
+type Tone = "warning" | "info" | "neutral";
+
+interface Props {
+  variant?: Variant;
+  tone?: Tone;
+  /** data-compliance hook value, e.g. "pact-act". */
+  hook: string;
+  /** Accessible label for the note landmark. */
+  label: string;
+  /** Optional leading glyph (decorative), e.g. the ⚠ Prop 65 symbol. */
+  symbol?: string;
+}
+
+const { variant = "block", tone = "neutral", hook, label, symbol } = Astro.props;
+
+// Static class literals — see the note above on Tailwind JIT.
+const TONE_BORDER: Record<Tone, string> = {
+  warning: "border-[var(--color-warning)]",
+  info: "border-[var(--color-info)]",
+  neutral: "border-[var(--color-text)]",
+};
+const TONE_TEXT: Record<Tone, string> = {
+  warning: "text-[var(--color-warning)]",
+  info: "text-[var(--color-info)]",
+  neutral: "text-[var(--color-text)]",
+};
+---
+
+{
+  variant === "bar" ? (
+    <div
+      class="border-b border-[var(--color-border)] bg-[var(--color-surface-2)]"
+      role="note"
+      aria-label={label}
+      data-compliance={hook}
+    >
+      <p class={`container-prose py-2 text-center text-[0.72rem] font-semibold uppercase tracking-[0.05em] sm:text-xs ${TONE_TEXT[tone]}`}>
+        {symbol && <span aria-hidden="true" class="mr-1">{symbol}</span>}
+        <slot />
+      </p>
+    </div>
+  ) : variant === "footer" ? (
+    <div class="border-t border-[var(--color-border)] bg-[var(--color-bg)]" data-compliance={hook}>
+      <p
+        class="container-prose py-3 text-center text-xs text-[var(--color-muted)]"
+        role="note"
+        aria-label={label}
+      >
+        {symbol && <span aria-hidden="true" class="mr-1">{symbol}</span>}
+        <slot />
+      </p>
+    </div>
+  ) : variant === "inline" ? (
+    <span
+      class="inline-flex items-center gap-1.5 text-xs font-medium text-[var(--color-muted)]"
+      role="note"
+      aria-label={label}
+      data-compliance={hook}
+    >
+      {symbol && <span aria-hidden="true">{symbol}</span>}
+      <slot />
+    </span>
+  ) : (
+    <div
+      class={`rounded-[var(--radius-md)] border-2 px-4 py-3 ${TONE_BORDER[tone]}`}
+      role="note"
+      aria-label={label}
+      data-compliance={hook}
+    >
+      <p class="text-sm font-semibold text-[var(--color-text)]">
+        {symbol && <span aria-hidden="true" class="mr-1.5">{symbol}</span>}
+        <slot />
+      </p>
+    </div>
+  )
+}

package/apps/storefront/src/components/compliance/ExciseTaxNotice.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * Excise-tax DISPLAY cue. Presentational only — it surfaces that applicable
+ * excise taxes apply (and, optionally, a per-jurisdiction breakdown for shopper
+ * transparency); it NEVER computes tax. The actual excise-tax CALCULATION is
+ * product/commerce-owned (decision compliance-widgets-platform-owned). Renders
+ * NOTHING when no note is supplied.
+ *
+ * The optional jurisdiction breakdown is rendered as inline "label detail"
+ * spans (valid inside the primitive's paragraph) so it re-skins with the theme
+ * and never fabricates a figure the tenant didn't provide.
+ */
+import type { ExciseTaxConfig } from "@tot/public-runtime";
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.exciseTax. */
+  config?: ExciseTaxConfig;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { config, variant = "inline" } = Astro.props;
+
+const note = config?.note?.trim();
+const jurisdictions = (config?.jurisdictions ?? []).filter((j) => j && j.label && j.detail);
+---
+
+{
+  note && (
+    <ComplianceNotice
+      variant={variant}
+      tone="info"
+      hook="excise-tax"
+      label="Excise tax notice"
+    >
+      {note}
+      {jurisdictions.length > 0 &&
+        jurisdictions.map((j) => (
+          <span class="ml-1.5 whitespace-nowrap text-[var(--color-muted)]">
+            · <span class="font-semibold">{j.label}</span> {j.detail}
+          </span>
+        ))}
+    </ComplianceNotice>
+  )
+}

package/apps/storefront/src/components/compliance/NicotineWarning.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * FDA-mandated nicotine warning (21 CFR 1143.3). The wording is fixed by law and
+ * must be conspicuous — do not paraphrase. Two presentations:
+ *   - "bar": a persistent high-contrast strip at the very top of every page.
+ *   - "block": a reinforced box on the PDP (regulation also requires it on the
+ *     product's own page/ads).
+ * Rendered only when the tenant's compliance.nicotineWarning is set.
+ */
+interface Props {
+  variant?: "bar" | "block";
+}
+const { variant = "bar" } = Astro.props;
+
+const TEXT =
+  "WARNING: This product contains nicotine. Nicotine is an addictive chemical.";
+---
+
+{
+  variant === "bar" ? (
+    <div class="border-b-2 border-[var(--color-text)] bg-[var(--color-text)] text-[var(--color-bg)]" role="note" aria-label="Health warning" data-compliance="nicotine-warning">
+      <p class="container-prose py-2 text-center text-[0.72rem] font-semibold uppercase tracking-[0.06em] sm:text-xs">
+        {TEXT}
+      </p>
+    </div>
+  ) : (
+    <div class="rounded-[var(--radius-md)] border-2 border-[var(--color-text)] px-4 py-3" role="note" aria-label="Health warning" data-compliance="nicotine-warning">
+      <p class="text-sm font-semibold uppercase tracking-[0.04em] text-[var(--color-text)]">
+        {TEXT}
+      </p>
+    </div>
+  )
+}

package/apps/storefront/src/components/compliance/PactActNotice.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * PACT Act (Prevent All Cigarette Trafficking Act, extended to ENDS/vapor in
+ * 2021) compliance notice. The federal requirements it summarizes are fixed and
+ * authored here — age verification, adult signature on delivery, and no U.S.
+ * Postal Service carriage; only whether it renders (and the age) comes from
+ * tenant.compliance.pactAct / .minAge. Renders NOTHING when `enabled` is false,
+ * so absent data never shows placeholder legal text. Never hand-author this on a
+ * marketing page (decision compliance-widgets-platform-owned).
+ */
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.pactAct. */
+  enabled?: boolean;
+  /** From tenant.compliance.minAge (defaults to the PACT Act floor, 21). */
+  minAge?: number;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { enabled = false, minAge = 21, variant = "block" } = Astro.props;
+
+const TEXT =
+  `In compliance with the federal PACT Act, all vapor and nicotine orders require ` +
+  `age verification (${minAge}+) and an adult signature on delivery. These products ` +
+  `cannot be shipped through the U.S. Postal Service.`;
+---
+
+{
+  enabled && (
+    <ComplianceNotice variant={variant} tone="info" hook="pact-act" label="PACT Act shipping compliance notice">
+      {TEXT}
+    </ComplianceNotice>
+  )
+}

package/apps/storefront/src/components/compliance/Prop65Warning.astro

@@ -0,0 +1,80 @@
+---
+/**
+ * California Prop 65 warning. The safe-harbor warning FORMAT is mandated (Cal.
+ * Code Regs. tit. 27 § 25601+): this component owns the fixed skeleton
+ * ("WARNING: … known to the State of California to cause …"), the ⚠ symbol, and
+ * the official warnings URL. Only the variable slots — harm endpoint(s) and the
+ * chemical name(s) named in the long form — come from tenant.compliance.prop65.
+ * Renders NOTHING when the config is absent, so it never fabricates a warning
+ * (decision compliance-widgets-platform-owned).
+ *
+ * `true` → short cancer + reproductive-harm warning. A Prop65Config selects the
+ * harm endpoint(s); providing `chemicals` switches to the long form.
+ */
+import type { Prop65Config } from "@tot/public-runtime";
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.prop65. */
+  config?: Prop65Config | boolean;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { config, variant = "block" } = Astro.props;
+
+// Normalize: `true` is the common cancer + reproductive short warning.
+const cfg: Prop65Config | null =
+  config === true ? { harm: "cancer-and-reproductive" } : config || null;
+
+const DEFAULT_URL = "www.P65Warnings.ca.gov";
+
+// Mandated harm clauses (long form) and short-form labels — fixed wording.
+const HARM_CLAUSE: Record<Prop65Config["harm"], string> = {
+  cancer: "cancer",
+  reproductive: "birth defects or other reproductive harm",
+  "cancer-and-reproductive": "cancer and birth defects or other reproductive harm",
+};
+const HARM_SHORT: Record<Prop65Config["harm"], string> = {
+  cancer: "Cancer",
+  reproductive: "Reproductive Harm",
+  "cancer-and-reproductive": "Cancer and Reproductive Harm",
+};
+
+const url = cfg?.url ?? DEFAULT_URL;
+const href = /^https?:\/\//i.test(url) ? url : `https://${url}`;
+
+const chemicals = cfg?.chemicals?.filter(Boolean) ?? [];
+const isLongForm = chemicals.length > 0;
+const chemicalList =
+  chemicals.length <= 1
+    ? chemicals[0] ?? ""
+    : `${chemicals.slice(0, -1).join(", ")} and ${chemicals[chemicals.length - 1]}`;
+const verb = chemicals.length > 1 ? "are" : "is";
+
+// Text up to the URL; the URL renders as a link in the slot.
+const lead =
+  cfg && isLongForm
+    ? `WARNING: This product can expose you to chemicals including ${chemicalList}, ` +
+      `which ${verb} known to the State of California to cause ${HARM_CLAUSE[cfg.harm]}. ` +
+      `For more information, go to `
+    : cfg
+      ? `WARNING: ${HARM_SHORT[cfg.harm]} — `
+      : "";
+---
+
+{
+  cfg && (
+    <ComplianceNotice
+      variant={variant}
+      tone="warning"
+      hook="prop65"
+      label="California Proposition 65 warning"
+      symbol="⚠"
+    >
+      {lead}
+      <a href={href} rel="noopener" class="underline underline-offset-2">
+        {url}
+      </a>
+    </ComplianceNotice>
+  )
+}

package/apps/storefront/src/components/compliance/PurchaseLimitNotice.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Purchase-quantity-limit DISPLAY. Surfaces a shopper-facing limit (e.g. state
+ * or PACT-Act order caps). Display surface ONLY — the limit text comes from
+ * tenant.compliance.purchaseLimit and the actual enforcement stays in the
+ * product/commerce layer, never hand-built here (decision
+ * compliance-widgets-platform-owned). Renders NOTHING when the config (or its
+ * text) is absent.
+ */
+import type { PurchaseLimitConfig } from "@tot/public-runtime";
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.purchaseLimit. */
+  config?: PurchaseLimitConfig;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { config, variant = "inline" } = Astro.props;
+const text = config?.text?.trim();
+const reason = config?.reason?.trim();
+
+const label = `Purchase limit: ${text ?? ""}`;
+---
+
+{
+  text && (
+    <ComplianceNotice
+      variant={variant}
+      tone="neutral"
+      hook="purchase-limit"
+      label={label}
+    >
+      Purchase limit: {text}
+      {reason && <span> ({reason})</span>}
+    </ComplianceNotice>
+  )
+}

package/apps/storefront/src/components/compliance/ShippingRestrictionNotice.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Shipping-restriction DISPLAY notice (e.g. PACT Act no-ship states, adult
+ * signature, carrier limits). Presentational only — it renders the tenant's
+ * configured `compliance.shippingRestriction` text; the actual ship/no-ship
+ * DECISION for an address stays in the product/commerce layer (decision
+ * compliance-widgets-platform-owned). Renders NOTHING when `text` is absent.
+ *
+ * This is the platform component behind the footer shipping band the app Layout
+ * previously inlined — same data, same footer placement, now token-styled via
+ * the shared ComplianceNotice primitive so it re-skins with the theme.
+ */
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.shippingRestriction. Display text only. */
+  text?: string;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { text, variant = "footer" } = Astro.props;
+---
+
+{
+  text && (
+    <ComplianceNotice
+      variant={variant}
+      tone="neutral"
+      hook="shipping-restriction"
+      label="Shipping restriction notice"
+    >
+      {text}
+    </ComplianceNotice>
+  )
+}