@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,53 @@
+---
+/**
+ * State/jurisdiction sale-eligibility DISPLAY notice. Presentational only — it
+ * SHOWS the tenant-configured eligibility messaging (which states a product is /
+ * isn't available in); it does NOT decide whether a given cart/address is
+ * eligible — that computation stays product-owned (decision
+ * compliance-widgets-platform-owned). Renders NOTHING when no eligibility data
+ * is supplied, so absent config never shows a placeholder.
+ *
+ * Message precedence: an explicit `note` wins; otherwise a sentence is composed
+ * from `restrictedStates` ("Not available for sale in: …") or, failing that,
+ * `eligibleStates` ("Available for sale in select states only: …").
+ */
+import type { StateEligibilityConfig } from "@tot/public-runtime";
+import ComplianceNotice from "./ComplianceNotice.astro";
+
+interface Props {
+  /** From tenant.compliance.stateEligibility. */
+  config?: StateEligibilityConfig;
+  variant?: "bar" | "block" | "inline" | "footer";
+}
+
+const { config, variant = "block" } = Astro.props;
+
+function compose(c: StateEligibilityConfig): string | null {
+  if (c.note && c.note.trim()) return c.note.trim();
+  const restricted = (c.restrictedStates ?? []).filter(Boolean);
+  if (restricted.length > 0) {
+    return `Not available for sale or shipment in: ${restricted.join(", ")}.`;
+  }
+  const eligible = (c.eligibleStates ?? []).filter(Boolean);
+  if (eligible.length > 0) {
+    return `Available for sale and shipment in select states only: ${eligible.join(", ")}.`;
+  }
+  return null;
+}
+
+const message = config ? compose(config) : null;
+---
+
+{
+  message && (
+    <ComplianceNotice
+      variant={variant}
+      tone="warning"
+      hook="state-eligibility"
+      label="State eligibility notice"
+      symbol="⚠"
+    >
+      {message}
+    </ComplianceNotice>
+  )
+}

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

@@ -0,0 +1,164 @@
+---
+/**
+ * Homepage hero — the SIGNATURE moment (brief §6: "hero is a thesis", spend
+ * boldness in ONE place). Two treatments, by the tenant's brand.heroVariant:
+ *   - "bold" (default): full-bleed primary background, light contrast text.
+ *   - "light": hero on the page background, brand color as an accent on the
+ *     headline + CTA — matches merchants whose own site is a light page with
+ *     color accents. The brand adopter sets "light" when it captures a hero image.
+ * The feature image is the merchant's own hero slide (block.image) when adopted,
+ * else the hero collection's first product.
+ */
+import type { HeroBlock } from "@/lib/storyblok/content-model";
+import type { CatalogProduct } from "@tot/public-runtime";
+import Img from "@/components/Img.astro";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  block: HeroBlock;
+  featureProduct?: CatalogProduct | null;
+}
+const { block, featureProduct } = Astro.props;
+const { basePath } = Astro.locals;
+const light = (Astro.locals.tenant?.theme_tokens?.brand?.heroVariant ?? "bold") === "light";
+const prodImg = featureProduct?.images[0];
+const heroImg = block.image;
+const hasImage = Boolean(heroImg || (prodImg && featureProduct));
+---
+
+<section
+  class:list={[
+    "relative overflow-hidden",
+    light
+      ? "bg-[var(--color-bg)] text-[var(--color-text)]"
+      : "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]",
+  ]}
+>
+  <div
+    class:list={[
+      "container-prose grid items-center gap-10 py-[clamp(3.5rem,9vw,7rem)]",
+      hasImage && "md:grid-cols-[1.1fr_0.9fr]",
+    ]}
+  >
+    <div data-reveal>
+      {
+        block.eyebrow && (
+          <p
+            class:list={[
+              "eyebrow eyebrow--tick mb-6",
+              light
+                ? "!text-[var(--color-muted)]"
+                : "!text-[color-mix(in_srgb,var(--color-primary-contrast)_72%,transparent)]",
+            ]}
+          >
+            {block.eyebrow}
+          </p>
+        )
+      }
+      <h1 class="display-hero">
+        <span class:list={["block", light && "text-[var(--color-primary)]"]}>{block.headline}</span>
+        {
+          block.headlineAccent && (
+            <span class="relative block w-fit text-[var(--color-accent)]">
+              {block.headlineAccent}
+              <span
+                aria-hidden="true"
+                class="absolute -bottom-1 left-0 h-[3px] w-full origin-left bg-[var(--color-accent)]/55"
+              />
+            </span>
+          )
+        }
+      </h1>
+      {
+        block.subhead && (
+          <p
+            class:list={[
+              "mt-7 max-w-prose text-[1.1rem] leading-relaxed",
+              light
+                ? "text-[var(--color-muted)]"
+                : "text-[color-mix(in_srgb,var(--color-primary-contrast)_82%,transparent)]",
+            ]}
+          >
+            {block.subhead}
+          </p>
+        )
+      }
+      {
+        block.ctaLabel && block.ctaHref && (
+          <a
+            href={withBase(basePath, block.ctaHref)}
+            class="group mt-9 inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-7 py-3 font-display text-[0.95rem] font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5 focus-visible:-translate-y-0.5"
+          >
+            {block.ctaLabel}
+            <span aria-hidden="true" class="transition-transform duration-200 group-hover:translate-x-1">
+              →
+            </span>
+          </a>
+        )
+      }
+    </div>
+
+    {
+      heroImg ? (
+        <div class="relative" data-reveal>
+          <div
+            class:list={[
+              "overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] ring-1",
+              light ? "ring-[var(--color-border)]" : "ring-white/10",
+            ]}
+          >
+            <img
+              src={heroImg}
+              alt={block.imageAlt ?? block.headline}
+              loading="eager"
+              class="h-full w-full object-cover"
+            />
+          </div>
+        </div>
+      ) : (
+        prodImg &&
+        featureProduct && (
+          <div class="relative" data-reveal>
+            <div
+              class:list={[
+                "overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] ring-1",
+                light ? "ring-[var(--color-border)]" : "ring-white/10",
+              ]}
+            >
+              <Img
+                src={prodImg.url}
+                rehosted={prodImg.rehosted}
+                seed={prodImg.id ?? featureProduct.handle}
+                label={featureProduct.title}
+                alt={prodImg.alt ?? featureProduct.title}
+                width={prodImg.width ?? 1000}
+                height={prodImg.height ?? 1250}
+                priority={true}
+                sizes="(min-width: 768px) 42vw, 100vw"
+                class="h-full w-full object-cover"
+              />
+            </div>
+            <a
+              href={withBase(basePath, `/products/${featureProduct.handle}`)}
+              class="absolute bottom-4 left-4 right-4 flex items-center justify-between rounded-[var(--radius-md)] bg-[var(--color-surface)]/95 px-4 py-3 text-[var(--color-text)] backdrop-blur"
+            >
+              <span class="font-display text-sm font-medium">{featureProduct.title}</span>
+              <span class="eyebrow !text-[var(--color-accent)]">Shop →</span>
+            </a>
+          </div>
+        )
+      )
+    }
+  </div>
+
+  <div
+    aria-hidden="true"
+    class:list={[
+      "pointer-events-none absolute inset-x-0 bottom-0 h-px",
+      light
+        ? "bg-[var(--color-border)]"
+        : "bg-[color-mix(in_srgb,var(--color-primary-contrast)_18%,transparent)]",
+    ]}
+  >
+  </div>
+</section>

package/apps/storefront/src/components/islands/AgeGate.tsx

@@ -0,0 +1,109 @@
+/**
+ * <AgeGate> — soft 21+ affirmation shown once per device for regulated tenants.
+ *
+ * IMPORTANT: this is the storefront's front-door affirmation only. The REAL
+ * identity/age verification is Token of Trust's product and is wired at a later
+ * phase (the "Yes" path is where that handoff will live). We deliberately do not
+ * reimplement verification here. Affirmation is remembered in localStorage.
+ */
+import { useEffect, useRef, useState } from "preact/hooks";
+
+interface Props {
+  minAge: number;
+  brand: string;
+}
+
+const KEY = "tot:age-affirmed";
+
+export default function AgeGate({ minAge, brand }: Props) {
+  const [state, setState] = useState<"hidden" | "ask" | "denied">("hidden");
+  const yesRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    let affirmed = false;
+    try {
+      affirmed = localStorage.getItem(KEY) === "yes";
+    } catch {
+      /* storage disabled — show the gate */
+    }
+    if (!affirmed) {
+      setState("ask");
+      document.documentElement.style.overflow = "hidden";
+    }
+  }, []);
+
+  useEffect(() => {
+    // preventScroll: the gate is a fixed overlay, but its host <div> is appended
+    // to the end of <body> (see IsolatedAgeGate). A plain focus() would scroll the
+    // underlying page down to that host — leaving the page at the bottom once the
+    // gate is dismissed. preventScroll keeps the a11y focus without the jump.
+    if (state === "ask") yesRef.current?.focus({ preventScroll: true });
+    if (state === "hidden") document.documentElement.style.overflow = "";
+  }, [state]);
+
+  const affirm = () => {
+    try {
+      localStorage.setItem(KEY, "yes");
+    } catch {
+      /* ignore */
+    }
+    setState("hidden");
+  };
+
+  if (state === "hidden") return null;
+
+  return (
+    <div
+      class="fixed inset-0 z-[100] grid place-items-center bg-[color-mix(in_srgb,var(--color-text)_75%,transparent)] p-5 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="agegate-title"
+    >
+      <div class="w-[min(30rem,100%)] rounded-[var(--radius-lg)] bg-[var(--color-surface)] p-7 text-center shadow-[var(--shadow-lg)]">
+        {state === "ask" ? (
+          <>
+            <p class="eyebrow eyebrow--tick mx-auto mb-4 w-fit">Age verification</p>
+            <h2 id="agegate-title" class="display-md">
+              Are you {minAge} or older?
+            </h2>
+            <p class="mx-auto mt-3 max-w-sm text-[var(--color-muted)]">
+              {brand} sells age-restricted products. You must be {minAge}+ to enter.
+              By continuing you confirm your age — we verify it for real at checkout.
+            </p>
+            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
+              <button
+                ref={yesRef}
+                type="button"
+                onClick={affirm}
+                class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 font-display text-sm font-semibold text-[var(--color-primary-contrast)]"
+              >
+                Yes, I'm {minAge} or older
+              </button>
+              <button
+                type="button"
+                onClick={() => setState("denied")}
+                class="rounded-[var(--radius-md)] border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] hover:border-[var(--color-text)]"
+              >
+                No
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <h2 id="agegate-title" class="display-md">Come back when you're {minAge}</h2>
+            <p class="mx-auto mt-3 max-w-sm text-[var(--color-muted)]">
+              You must be {minAge} or older to view this store. Please close this tab.
+            </p>
+            <button
+              type="button"
+              onClick={() => setState("ask")}
+              class="link-accent mt-6 inline-block font-display text-sm font-medium"
+            >
+              I entered my age incorrectly
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/storefront/src/components/islands/ImageGallery.tsx

@@ -0,0 +1,237 @@
+/**
+ * <ImageGallery> — PDP image gallery (main image + thumbnail strip).
+ *
+ * Interactive island (Preact). Thumbnails swap the main image; the main image
+ * has a tasteful click-to-toggle zoom (reduced-motion safe). The first image is
+ * the LCP candidate (eager / high priority / sync decode) until the user
+ * interacts.
+ *
+ * Cross-island wiring: listens on `window` for a `variant:image` CustomEvent
+ * `{ detail: { imageId } }` (dispatched by <VariantSelector>) and switches to
+ * the matching image when present.
+ *
+ * CLS-free: explicit width/height + aspect-ratio on every image. Dead fixture
+ * CDN URLs fall back to a deterministic placeholder.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import type { CatalogImage } from "@tot/public-runtime";
+import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+
+interface Props {
+  images: CatalogImage[];
+  title: string;
+  productHandle: string;
+  activeImageId?: string;
+}
+
+const FALLBACK_W = 1000;
+const FALLBACK_H = 1250;
+
+function srcFor(img: CatalogImage, title: string): string {
+  if (isUsableImageUrl(img.url, img.rehosted)) return img.url;
+  return placeholderDataUri({
+    seed: img.id || title,
+    width: img.width ?? FALLBACK_W,
+    height: img.height ?? FALLBACK_H,
+    label: title,
+  });
+}
+
+// Responsive srcset for CDNs that accept `?width=` (our rehost target + Shopify's
+// image CDN), so referenced Shopify images are responsive without rehosting.
+const GALLERY_WIDTHS = [320, 480, 640, 960, 1280, 1600];
+function srcsetFor(img: CatalogImage): string | undefined {
+  if (!isUsableImageUrl(img.url, img.rehosted)) return undefined;
+  const cdn = img.rehosted || /\/\/cdn\.shopify\.com\//.test(img.url) || /\/cdn\/shop\//.test(img.url);
+  if (!cdn) return undefined;
+  const max = (img.width ?? FALLBACK_W) * 2;
+  return GALLERY_WIDTHS.filter((w) => w <= max)
+    .map((w) => `${img.url}${img.url.includes("?") ? "&" : "?"}width=${w} ${w}w`)
+    .join(", ");
+}
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export default function ImageGallery({
+  images,
+  title,
+  productHandle,
+  activeImageId,
+}: Props) {
+  const ordered = useMemo(
+    () => [...images].sort((a, b) => a.position - b.position),
+    [images],
+  );
+
+  const initialIndex = useMemo(() => {
+    if (activeImageId) {
+      const i = ordered.findIndex((im) => im.id === activeImageId);
+      if (i >= 0) return i;
+    }
+    return 0;
+  }, [ordered, activeImageId]);
+
+  const [index, setIndex] = useState(initialIndex);
+  const [zoomed, setZoomed] = useState(false);
+  // After the first interaction the LCP hint no longer applies to the new image.
+  const [interacted, setInteracted] = useState(false);
+  const reduced = prefersReducedMotion();
+  const thumbRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const select = useCallback(
+    (i: number) => {
+      setIndex(i);
+      setZoomed(false);
+      setInteracted(true);
+    },
+    [],
+  );
+
+  // Cross-island: variant selector drives the active image.
+  useEffect(() => {
+    function onVariantImage(e: Event) {
+      const detail = (e as CustomEvent<{ imageId?: string }>).detail;
+      if (!detail?.imageId) return;
+      const i = ordered.findIndex((im) => im.id === detail.imageId);
+      if (i >= 0) {
+        setIndex(i);
+        setZoomed(false);
+        setInteracted(true);
+      }
+    }
+    window.addEventListener("variant:image", onVariantImage);
+    return () => window.removeEventListener("variant:image", onVariantImage);
+  }, [ordered]);
+
+  // Keyboard nav on the thumbnail strip (roving via arrow keys).
+  const onThumbKeyDown = useCallback(
+    (e: KeyboardEvent, i: number) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = (i + 1) % ordered.length;
+        select(next);
+        thumbRefs.current[next]?.focus();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = i <= 0 ? ordered.length - 1 : i - 1;
+        select(prev);
+        thumbRefs.current[prev]?.focus();
+      }
+    },
+    [ordered.length, select],
+  );
+
+  if (ordered.length === 0) {
+    return (
+      <div
+        class="w-full overflow-hidden rounded-md"
+        style={`aspect-ratio:${FALLBACK_W}/${FALLBACK_H};background:var(--color-border)`}
+      >
+        <img
+          src={placeholderDataUri({
+            seed: productHandle,
+            width: FALLBACK_W,
+            height: FALLBACK_H,
+            label: title,
+          })}
+          alt={title}
+          width={FALLBACK_W}
+          height={FALLBACK_H}
+          decoding="sync"
+          fetchpriority="high"
+          loading="eager"
+          class="h-full w-full object-cover"
+        />
+      </div>
+    );
+  }
+
+  const current = ordered[index] ?? ordered[0]!;
+  const w = current.width ?? FALLBACK_W;
+  const h = current.height ?? FALLBACK_H;
+  const isLcp = index === 0 && !interacted;
+
+  return (
+    <div class="flex flex-col gap-3 md:flex-row-reverse md:gap-4">
+      {/* Main image */}
+      <div class="md:flex-1">
+        <button
+          type="button"
+          aria-label={zoomed ? "Zoom out" : "Zoom in"}
+          aria-pressed={zoomed}
+          onClick={() => setZoomed((z) => !z)}
+          class={`group block w-full overflow-hidden rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${
+            zoomed ? "cursor-zoom-out" : "cursor-zoom-in"
+          }`}
+          style={`aspect-ratio:${w}/${h};background:var(--color-border)`}
+        >
+          <img
+            src={srcFor(current, title)}
+            srcset={srcsetFor(current)}
+            sizes="(min-width: 768px) 45vw, 100vw"
+            alt={current.alt ?? title}
+            width={w}
+            height={h}
+            loading={isLcp ? "eager" : "lazy"}
+            decoding={isLcp ? "sync" : "async"}
+            fetchpriority={isLcp ? "high" : "auto"}
+            class={`h-full w-full object-cover ${
+              reduced ? "" : "transition-transform duration-300"
+            } ${zoomed ? "scale-150" : "scale-100"}`}
+          />
+        </button>
+      </div>
+
+      {/* Thumbnail strip */}
+      {ordered.length > 1 && (
+        <ul
+          aria-label="Product images"
+          class="flex gap-2 overflow-x-auto md:w-20 md:flex-col md:overflow-visible"
+        >
+          {ordered.map((img, i) => {
+            const tw = img.width ?? FALLBACK_W;
+            const th = img.height ?? FALLBACK_H;
+            return (
+              <li key={img.id} class="shrink-0">
+                <button
+                  type="button"
+                  ref={(el) => {
+                    thumbRefs.current[i] = el;
+                  }}
+                  aria-label={`View image ${i + 1}`}
+                  aria-pressed={i === index}
+                  onClick={() => select(i)}
+                  onKeyDown={(e) => onThumbKeyDown(e, i)}
+                  class={`block h-16 w-16 overflow-hidden rounded-md border-2 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary md:h-20 md:w-20 ${
+                    i === index
+                      ? "border-primary"
+                      : "border-transparent hover:border-border"
+                  }`}
+                  style={`aspect-ratio:${tw}/${th};background:var(--color-border)`}
+                >
+                  <img
+                    src={srcFor(img, title)}
+                    srcset={srcsetFor(img)}
+                    sizes="80px"
+                    alt=""
+                    width={tw}
+                    height={th}
+                    loading="lazy"
+                    decoding="async"
+                    class="h-full w-full object-cover"
+                  />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/apps/storefront/src/components/islands/IsolatedAgeGate.tsx

@@ -0,0 +1,73 @@
+/**
+ * <IsolatedAgeGate> — mounts the 21+ affirmation gate inside a **closed shadow
+ * root** so no tenant CSS or JavaScript can select, restyle, or hide it.
+ *
+ * Why a wrapper instead of rendering <AgeGate> directly: a closed shadow root
+ * also blocks the platform's own global stylesheet, so we clone the document's
+ * stylesheets into the shadow root (Tailwind utilities + fonts). Theme tokens
+ * are CSS custom properties on :root, which *do* inherit across the shadow
+ * boundary, so the gate keeps the tenant's colors.
+ *
+ * The host element lives in light DOM (the only attack surface), so a
+ * MutationObserver re-asserts it: if tenant code removes it or sets it
+ * display:none/hidden, it is restored. The gate's *contents* are unreachable
+ * (closed shadow). This makes "customize anything except what keeps you legal"
+ * a technical guarantee, not a policy.
+ */
+import { render } from "preact";
+import { useEffect } from "preact/hooks";
+import AgeGate from "./AgeGate";
+
+interface Props {
+  minAge: number;
+  brand: string;
+}
+
+const HOST_MARKER = "data-tot-compliance";
+
+export default function IsolatedAgeGate({ minAge, brand }: Props) {
+  useEffect(() => {
+    // Guard against an accidental double-mount (e.g. HMR).
+    if (document.querySelector(`[${HOST_MARKER}]`)) return;
+
+    const host = document.createElement("div");
+    host.setAttribute(HOST_MARKER, "");
+    const shadow = host.attachShadow({ mode: "closed" });
+
+    // Bring platform styles into the shadow root via the external stylesheet
+    // <link>s only (Tailwind utilities; build externalizes all CSS). We do NOT
+    // clone the inline theme <style>: cloning strips its CSP nonce, and it's
+    // unneeded — CSS custom properties (the theme tokens on :root) inherit
+    // across the shadow boundary, so the gate keeps the tenant's colors anyway.
+    document
+      .querySelectorAll('link[rel="stylesheet"]')
+      .forEach((link) => shadow.appendChild(link.cloneNode(true)));
+
+    const mount = document.createElement("div");
+    shadow.appendChild(mount);
+    render(<AgeGate minAge={minAge} brand={brand} />, mount);
+    document.body.appendChild(host);
+
+    // Re-assert: restore the host if tenant code detaches or hides it.
+    const ensure = () => {
+      if (!host.isConnected) document.body.appendChild(host);
+      if (host.style.display === "none") host.style.display = "";
+      if (host.style.visibility === "hidden") host.style.visibility = "";
+      if (host.hasAttribute("hidden")) host.removeAttribute("hidden");
+    };
+    const observer = new MutationObserver(ensure);
+    observer.observe(document.body, { childList: true });
+    observer.observe(host, {
+      attributes: true,
+      attributeFilter: ["style", "class", "hidden"],
+    });
+
+    return () => {
+      observer.disconnect();
+      render(null, mount);
+      host.remove();
+    };
+  }, [minAge, brand]);
+
+  return null;
+}