@tokenoftrust/storefront-runner 1.3.4-rc.3 → 1.4.0

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

@@ -0,0 +1,30 @@
+---
+/**
+ * <AppWidgetFrame> — renders one private-app widget placement (PrivateApps
+ * epic, D5 Chunk D) as a sandboxed iframe. Its `sandbox`/`loading`/
+ * `referrerpolicy` come straight from `widgetFrameAttrs()`
+ * (`allow-scripts`, no `allow-same-origin` — see `frameProps.ts`), the SAME
+ * primitive `WidgetFrame.astro` uses for tenant `scripts.json` widgets. This
+ * component composes the `src` (endpoint + launch-token query param) and
+ * stamps `data-tot-widget-origin`/`data-tot-install-id` directly on the
+ * `<iframe>` for the parent-side `mountWidgetPostMessageBridge()`
+ * (`@tot/public-runtime`) to scan for.
+ */
+import { buildAppWidgetFrameAttrs, type AppWidgetFrameProps } from "@/lib/apps/widgets/frameProps.js";
+
+type Props = AppWidgetFrameProps;
+
+const attrs = buildAppWidgetFrameAttrs(Astro.props);
+---
+
+<iframe
+  src={attrs.src}
+  title={attrs.title}
+  sandbox={attrs.sandbox}
+  loading={attrs.loading}
+  referrerpolicy={attrs.referrerpolicy}
+  data-tot-widget-origin={attrs.dataWidgetOrigin}
+  data-tot-install-id={attrs.dataInstallId}
+  class="tot-app-widget-frame"
+  style={`border:0;width:100%;height:${attrs.height};`}
+></iframe>

package/apps/storefront/src/components/chrome/NavDropdown.astro

@@ -78,7 +78,7 @@ const groups = isMega
                       <a
                         href={hrefOf(child)}
                         class="flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
-                        {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                        {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                       >
                         {child.label}
                         {child.badge && (
@@ -99,6 +99,7 @@ const groups = isMega
       <li>
         <a
           href={itemHref}
+          data-astro-prefetch
           class:list={[
             "flex items-center gap-1.5 border-b border-border py-2.5 text-sm font-medium text-text transition-colors last:border-b-0 hover:text-accent",
             item.flag && "text-accent",
@@ -117,6 +118,7 @@ const groups = isMega
     <li class="group relative">
       <a
         href={itemHref}
+        data-astro-prefetch
         class:list={[
           "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent group-focus-within:text-accent",
           item.flag && "font-semibold text-accent",
@@ -148,7 +150,7 @@ const groups = isMega
                       <a
                         href={hrefOf(child)}
                         class="flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
-                        {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                        {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                       >
                         {child.label}
                         {child.badge && (
@@ -170,7 +172,7 @@ const groups = isMega
                 <a
                   href={hrefOf(child)}
                   class="block rounded-sm px-3 py-1.5 text-sm text-muted transition-colors hover:bg-bg hover:text-primary"
-                  {...(child.external ? { rel: "noopener noreferrer" } : {})}
+                  {...(child.external ? { rel: "noopener noreferrer" } : { "data-astro-prefetch": true })}
                 >
                   {child.label}
                 </a>
@@ -184,6 +186,7 @@ const groups = isMega
     <li>
       <a
         href={itemHref}
+        data-astro-prefetch
         class:list={[
           "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent",
           item.flag && "font-semibold text-accent",

package/apps/storefront/src/components/chrome/SiteFooter.astro

@@ -50,11 +50,21 @@ const showLogo = !!brand?.logo && /^(https?:|\/)/.test(brand.logo.src);
       <div>
         {
           showLogo ? (
+            /*
+              Brand logo: a bare merchant URL shown at a fixed height via
+              object-contain. It can't go through <Img> — that forces an
+              aspect-ratio crop box + a placeholder background, which would alter
+              a transparent logo's appearance. Keep raw, but set explicit
+              width/height (reserve space → CLS-free) and, since the footer sits
+              below the fold, lazy/async loading hints to defer the fetch.
+            */
             <img
               src={brand!.logo!.src}
               alt={brand!.logo!.alt}
               width={brand!.logo!.width ?? 160}
               height={brand!.logo!.height ?? 48}
+              loading="lazy"
+              decoding="async"
               class="h-9 w-auto max-w-[180px] object-contain"
             />
           ) : (

package/apps/storefront/src/components/chrome/SiteHeader.astro

@@ -106,11 +106,21 @@ const mobileNav = nav.map((item) => ({
       >
         {
           showLogo ? (
+            /*
+              Brand logo: a bare merchant URL shown at a fixed header height via
+              object-contain. It can't go through <Img> — that forces an
+              aspect-ratio crop box + a placeholder background, which would alter
+              a transparent logo's appearance. Keep raw, but set explicit
+              width/height (reserve space → CLS-free) and, since it sits
+              above the fold, eager/async loading hints.
+            */
             <img
               src={logo!.src}
               alt={logo!.alt}
               width={logo!.width ?? 160}
               height={logo!.height ?? 48}
+              loading="eager"
+              decoding="async"
               class="h-9 w-auto max-w-[180px] object-contain"
             />
           ) : (

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

@@ -2,7 +2,8 @@
 /**
  * <RatingStars> — atom. A 0–5 star rating with fractional fill (a single clipped
  * overlay, no half-star glyph juggling) and an accessible label. Tenant-agnostic:
- * filled stars use `--color-accent`, the empty track uses `--color-border`.
+ * filled stars use `--color-star` (the trust/review star token, defaults to the
+ * accent spark), the empty track uses `--color-border`.
  *
  * Presentation only — it renders whatever aggregate you pass. No review data is
  * invented here (claims-ledger discipline: source ratings before shipping them).
@@ -42,7 +43,7 @@ const label =
   <span class:list={["relative inline-block leading-none tracking-[0.08em]", dim]} aria-hidden="true">
     <span class="text-[var(--color-border)]">{stars}</span>
     <span
-      class="absolute inset-0 overflow-hidden whitespace-nowrap text-[var(--color-accent)]"
+      class="absolute inset-0 overflow-hidden whitespace-nowrap text-[var(--color-star)]"
       style={`width:${pct}%`}
     >
       {stars}

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

@@ -0,0 +1,75 @@
+---
+/**
+ * <Callout> — a tone-styled aside (see lib/content/callout.ts), the structured
+ * form of the f05 sheet's `.disclaimer` (info) and `.warn-band` (warning/legal)
+ * page patterns. A tenant supplies a {@link CalloutModel}; this paints it from
+ * f06 tokens using the SAME token formulas the raw sheet uses — the info tone
+ * mirrors `.disclaimer` (info tint over surface), warning/legal mirror
+ * `.warn-band` (warning tint + a warning left border) — so the raw-HTML path and
+ * the structured widget look identical.
+ *
+ * A11y is baked in via calloutPresentation(): role="note" (a static aside, not a
+ * live region) + a tone aria-label, and the icon is aria-hidden. The body is a
+ * <RichText>, so no HTML is authored. Arbitrary token classes are STATIC
+ * per-tone literals so the Tailwind JIT emits them (same discipline as
+ * IllustrativeLabel / ComplianceNotice).
+ */
+import type { CalloutModel, CalloutTone } from "@/lib/content/callout";
+import { calloutPresentation } from "@/lib/content/callout";
+import RichText from "@/components/content/RichText.astro";
+
+interface Props {
+  callout: CalloutModel;
+}
+const { callout } = Astro.props;
+const p = calloutPresentation(callout.tone);
+
+// Static per-tone token classes (JIT-safe). Mirrors commerce-marketing.css:
+// info → .disclaimer tint; warning/legal → .warn-band tint + left border.
+const TONE: Record<
+  CalloutTone,
+  { box: string; icon: string }
+> = {
+  info: {
+    box: "bg-[color-mix(in_srgb,var(--color-info)_10%,var(--color-surface))] border-[color-mix(in_srgb,var(--color-info)_32%,var(--color-border))]",
+    icon: "text-[var(--color-info)]",
+  },
+  warning: {
+    box: "bg-[color-mix(in_srgb,var(--color-warning)_12%,var(--color-surface))] border-[color-mix(in_srgb,var(--color-warning)_40%,var(--color-border))] border-l-4 border-l-[var(--color-warning)]",
+    icon: "text-[var(--color-warning)]",
+  },
+  legal: {
+    box: "bg-[color-mix(in_srgb,var(--color-warning)_12%,var(--color-surface))] border-[color-mix(in_srgb,var(--color-warning)_40%,var(--color-border))] border-l-4 border-l-[var(--color-warning)]",
+    icon: "text-[var(--color-warning)]",
+  },
+  success: {
+    box: "bg-[color-mix(in_srgb,var(--color-success)_10%,var(--color-surface))] border-[color-mix(in_srgb,var(--color-success)_32%,var(--color-border))]",
+    icon: "text-[var(--color-success)]",
+  },
+};
+const tone = TONE[callout.tone] ?? TONE.info;
+---
+<div
+  class={`my-5 flex max-w-[76ch] items-start gap-2.5 rounded-[var(--radius-md)] border p-3.5 text-sm text-[var(--color-text)] ${tone.box}`}
+  role={p.role}
+  aria-label={p.label}
+  data-widget="callout"
+  data-tone={callout.tone}
+>
+  <svg
+    class={`mt-0.5 h-[18px] w-[18px] flex-none ${tone.icon}`}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d={p.iconPath} />
+  </svg>
+  <div>
+    {callout.title && <p class="font-semibold">{callout.title}</p>}
+    <p class={callout.title ? "mt-1" : ""}><RichText value={callout.body} /></p>
+  </div>
+</div>

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

@@ -0,0 +1,66 @@
+---
+/**
+ * <NeedsReviewCallout> — the structured form of the f05 sheet's `.needs-review`
+ * flag + `.nr` badge (see lib/content/needsReview.ts). Marks a placeholder that
+ * needs human sign-off before go-live — the honest counterpart to f09's
+ * real-or-absent rule (say "needs confirming", never fabricate).
+ *
+ * This is a REVIEWER affordance: it is shown in preview/dev only. Live shopper
+ * pages omit it — <ProseSections includeNeedsReview={false}> drops the section,
+ * and the deploy path fails on any `blocker` via auditNeedsReview(). Styled from
+ * f06 tokens, mirroring the raw sheet (surface ground + a warning left border +
+ * the uppercase `.nr` badge). role="note" + data hooks for audit/e2e.
+ */
+import type { NeedsReview } from "@/lib/content/needsReview";
+import { NEEDS_REVIEW_TITLE } from "@/lib/content/needsReview";
+
+interface Props {
+  flag: NeedsReview;
+}
+const { flag } = Astro.props;
+const severity = flag.severity ?? "note";
+---
+<div
+  class="my-5 flex max-w-[76ch] items-start gap-2.5 rounded-[var(--radius-md)] border border-[var(--color-border)] border-l-4 border-l-[var(--color-warning)] bg-[var(--color-surface)] p-3.5 text-sm text-[var(--color-text)]"
+  role="note"
+  aria-label={NEEDS_REVIEW_TITLE}
+  data-widget="needs-review"
+  data-needs-review
+  data-severity={severity}
+>
+  <svg
+    class="mt-0.5 h-[18px] w-[18px] flex-none text-[var(--color-warning)]"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+  </svg>
+  <div>
+    <p class="font-semibold">
+      {NEEDS_REVIEW_TITLE}
+      <span class="ml-1.5 inline-block rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-2)] px-1.5 py-px align-middle text-[0.6rem] font-extrabold uppercase tracking-[0.06em] text-[var(--color-warning)]">
+        {severity === "blocker" ? "Blocker" : "Review"}
+      </span>
+    </p>
+    <p class="mt-1">{flag.reason}</p>
+    {(flag.owner || flag.href) && (
+      <p class="mt-1 text-xs text-[var(--color-muted)]">
+        {flag.owner && <span>Owner: {flag.owner}</span>}
+        {flag.owner && flag.href && <span> · </span>}
+        {flag.href && (
+          <a
+            href={flag.href}
+            class="text-[var(--color-accent-ink)] underline underline-offset-[3px]"
+          >
+            Context
+          </a>
+        )}
+      </p>
+    )}
+  </div>
+</div>

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

@@ -0,0 +1,121 @@
+---
+/**
+ * <ProseSections> — renders a structured {@link ProseSection}[] (policy / about /
+ * compliance body) as a real document: <h2>/<h3> with anchor ids, <p>, <ul>/<ol>,
+ * a semantic <dl> glossary, <address> contact block, tone callouts, and (in
+ * preview only) needs-review flags. This is the F4 promotion of the old
+ * `set:html(body_html)` policy blob — a tenant drives the whole page from JSON,
+ * copying no HTML/CSS. Mirrors the f05 sheet's `.prose` / `.contact-card`
+ * patterns using f06 tokens; accessibility lives in the components, not content.
+ *
+ * `includeNeedsReview` gates the reviewer-only needs-review flags: true in
+ * preview/dev (the reviewer sees what still needs sign-off), false on live
+ * shopper pages (the flag is scaffolding, never shown to shoppers).
+ */
+import type { ProseSection } from "@/lib/content/prose";
+import { normalizeProse, withHeadingIds } from "@/lib/content/prose";
+import RichText from "@/components/content/RichText.astro";
+import Callout from "@/components/content/Callout.astro";
+import NeedsReviewCallout from "@/components/content/NeedsReviewCallout.astro";
+
+interface Props {
+  sections: ProseSection[];
+  /** Show reviewer-only needs-review flags (preview/dev). Default false (live). */
+  includeNeedsReview?: boolean;
+}
+const { sections, includeNeedsReview = false } = Astro.props;
+const rendered = withHeadingIds(normalizeProse(sections));
+---
+<div class="prose-sections max-w-[68ch] text-[var(--color-text)]" data-widget="prose-sections">
+  {
+    rendered.map((s) => {
+      switch (s.kind) {
+        case "heading":
+          return (s.level ?? 2) === 3 ? (
+            <h3 id={s.id} class="mt-6 scroll-mt-24 font-display text-xl font-semibold">
+              {s.text}
+            </h3>
+          ) : (
+            <h2 id={s.id} class="mt-8 scroll-mt-24 font-display text-2xl font-semibold">
+              {s.text}
+            </h2>
+          );
+        case "paragraph":
+          return (
+            <p class="mt-3 leading-relaxed">
+              <RichText value={s.text} />
+            </p>
+          );
+        case "list":
+          return s.ordered ? (
+            <ol class="mt-3 list-decimal space-y-2 pl-5">
+              {s.items.map((item) => (
+                <li><RichText value={item} /></li>
+              ))}
+            </ol>
+          ) : (
+            <ul class="mt-3 list-disc space-y-2 pl-5">
+              {s.items.map((item) => (
+                <li><RichText value={item} /></li>
+              ))}
+            </ul>
+          );
+        case "definitions":
+          return (
+            <dl class="mt-4 space-y-4">
+              {s.items.map((d) => (
+                <div>
+                  <dt class="font-semibold text-[var(--color-text)]">{d.term}</dt>
+                  <dd class="mt-1 text-[var(--color-muted)]">
+                    <RichText value={d.description} />
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          );
+        case "callout":
+          return <Callout callout={{ tone: s.tone, title: s.title, body: s.body }} />;
+        case "contact":
+          return (
+            <address class="mt-4 not-italic">
+              {s.heading && (
+                <p class="font-display text-lg font-semibold">{s.heading}</p>
+              )}
+              {s.email && (
+                <a
+                  href={`mailto:${s.email}`}
+                  class="mt-2 inline-flex min-h-[var(--tap-target)] items-center text-[var(--color-accent-ink)] underline underline-offset-[3px]"
+                >
+                  {s.email}
+                </a>
+              )}
+              {s.phone && (
+                <a
+                  href={`tel:${s.phone.replace(/[^+\d]/g, "")}`}
+                  class="mt-1 flex min-h-[var(--tap-target)] items-center text-[var(--color-accent-ink)] underline underline-offset-[3px]"
+                >
+                  {s.phone}
+                </a>
+              )}
+              {s.address && s.address.length > 0 && (
+                <p class="mt-2 text-[var(--color-muted)]">
+                  {s.address.map((line, i) => (
+                    <>
+                      {i > 0 && <br />}
+                      {line}
+                    </>
+                  ))}
+                </p>
+              )}
+            </address>
+          );
+        case "needs_review":
+          return includeNeedsReview ? (
+            <NeedsReviewCallout flag={{ reason: s.reason, severity: s.severity, owner: s.owner, href: s.href }} />
+          ) : null;
+        default:
+          return null;
+      }
+    })
+  }
+</div>

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

@@ -0,0 +1,34 @@
+---
+/**
+ * <ProseToc> — the table-of-contents chip row for a long policy page (the f05
+ * sheet's `.toc` pattern), driven by {@link tableOfContents} over the same
+ * structured sections <ProseSections> renders. One chip per level-2 heading,
+ * anchor-linked to the heading id. Rendered as a real <nav> landmark with an
+ * accessible label. Renders nothing below the `min` heading count (a short page
+ * needs no TOC). Styled from f06 tokens.
+ */
+import type { ProseSection } from "@/lib/content/prose";
+import { normalizeProse, withHeadingIds, tableOfContents } from "@/lib/content/prose";
+
+interface Props {
+  sections: ProseSection[];
+  /** Only render when there are at least this many entries. Default 3. */
+  min?: number;
+}
+const { sections, min = 3 } = Astro.props;
+const entries = tableOfContents(withHeadingIds(normalizeProse(sections)));
+---
+{
+  entries.length >= min && (
+    <nav class="mt-5 flex flex-wrap gap-2" aria-label="On this page" data-widget="prose-toc">
+      {entries.map((e) => (
+        <a
+          href={`#${e.id}`}
+          class="inline-flex min-h-[var(--tap-target)] items-center rounded-[var(--radius-full)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-[0.82rem] font-semibold text-[var(--color-accent-ink)] no-underline hover:border-[var(--color-accent-ink)]"
+        >
+          {e.text}
+        </a>
+      ))}
+    </nav>
+  )
+}

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

@@ -0,0 +1,44 @@
+---
+/**
+ * <RichText> — renders an inline {@link RichText} (see lib/content/richtext.ts)
+ * as REAL DOM: text, <strong>/<em>, and safe <a>. Never uses `set:html`, so a
+ * paragraph/list-item/callout body carries typed runs instead of an HTML blob —
+ * closing the injection seam f09 + CSP push us to close.
+ *
+ * Accessibility lives here, not in tenant content: an external link gets
+ * rel="noopener noreferrer", target="_blank", and a visually-hidden
+ * "(opens in new tab)" so its behavior is announced. Link color/underline come
+ * from the f06 token contract via the inherited `.rte a` / token styles.
+ */
+import type { RichText } from "@/lib/content/richtext";
+import { toRuns } from "@/lib/content/richtext";
+
+interface Props {
+  value: RichText;
+}
+const runs = toRuns(Astro.props.value);
+---
+{
+  runs.map((run) =>
+    run.kind === "link" ? (
+      <a
+        href={run.href}
+        class="text-[var(--color-accent-ink)] underline underline-offset-[3px]"
+        {...(run.external
+          ? { rel: "noopener noreferrer", target: "_blank" }
+          : {})}
+      >
+        {run.text}
+        {run.external && <span class="sr-only"> (opens in new tab)</span>}
+      </a>
+    ) : run.strong && run.em ? (
+      <strong><em>{run.text}</em></strong>
+    ) : run.strong ? (
+      <strong>{run.text}</strong>
+    ) : run.em ? (
+      <em>{run.text}</em>
+    ) : (
+      <Fragment>{run.text}</Fragment>
+    ),
+  )
+}

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

@@ -0,0 +1,46 @@
+---
+/**
+ * <TrustStrip> — the quiet row of proof tokens a store repeats across pages
+ * ("Ships from USA", "Lab-tested", a rating). REAL-OR-ABSENT by construction
+ * (f09): sanitizeTrustStrip() drops any claim that is scraped review-widget
+ * markup and any rating that isn't a real positive aggregate, reusing f09's
+ * detector. If nothing real is left the strip renders NOTHING — never a
+ * fabricated badge. Plain text + one rating glyph; styled from f06 tokens.
+ * data-widget="trust-strip".
+ */
+import type { TrustStripItem } from "@/lib/content/trustStrip";
+import { sanitizeTrustStrip, ratingAriaLabel } from "@/lib/content/trustStrip";
+
+interface Props {
+  items: TrustStripItem[];
+}
+const items = sanitizeTrustStrip(Astro.props.items);
+---
+{
+  items.length > 0 && (
+    <div
+      class="border-y border-[var(--color-border)] bg-[var(--color-surface)]"
+      data-widget="trust-strip"
+    >
+      <ul class="container-prose flex flex-wrap items-center justify-center gap-x-6 gap-y-2 py-4 text-center font-mono text-[0.72rem] uppercase tracking-[0.1em] text-[var(--color-muted)]">
+        {items.map((item) =>
+          item.kind === "rating" ? (
+            <li
+              class="flex items-center gap-1.5 text-[var(--color-text)]"
+              data-trust="rating"
+            >
+              <span aria-hidden="true" class="text-[var(--color-warning)]">★</span>
+              <span aria-hidden="true">
+                {Math.round(item.average * 10) / 10}
+                {item.label ? ` ${item.label}` : ` (${item.count})`}
+              </span>
+              <span class="sr-only">{ratingAriaLabel(item)}</span>
+            </li>
+          ) : (
+            <li data-trust="claim">{item.label}</li>
+          ),
+        )}
+      </ul>
+    </div>
+  )
+}

package/apps/storefront/src/components/home/Hero.astro

@@ -107,10 +107,24 @@ const hasImage = Boolean(heroImg || (prodImg && featureProduct));
               light ? "ring-[var(--color-border)]" : "ring-white/10",
             ]}
           >
+            {/*
+              heroImg is a bare merchant URL (HeroBlock.image string) — no
+              intrinsic dims and no `rehosted` flag, so it can't go through <Img>
+              (that would force a fixed aspect-ratio crop, changing appearance).
+              Instead give it the LCP hints the product branch's <Img priority>
+              gets — fetchpriority/decoding/eager — plus width/height so the
+              browser reserves space (CLS). The `auto` aspect-ratio semantics of
+              width/height attributes mean the final render still uses the
+              image's natural ratio; the dims below only size the pre-load box.
+            */}
             <img
               src={heroImg}
               alt={block.imageAlt ?? block.headline}
+              width={1600}
+              height={1000}
               loading="eager"
+              fetchpriority="high"
+              decoding="sync"
               class="h-full w-full object-cover"
             />
           </div>