@tokenoftrust/storefront-runner 0.1.0

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

@@ -0,0 +1,239 @@
+/**
+ * <MobileNav> — hamburger button + slide-in drawer for small screens.
+ *
+ * Interactive island (Preact). The parent Header renders this inside a
+ * `md:hidden` wrapper; we also add `md:hidden` defensively so it never shows on
+ * desktop even if mounted standalone.
+ *
+ * A11y (WCAG 2.2 AA): hamburger exposes aria-expanded/aria-controls; the drawer
+ * traps focus, closes on Escape and backdrop click, locks body scroll, and
+ * restores focus to the hamburger on close. Motion is guarded by
+ * prefers-reduced-motion.
+ */
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+interface NavChild {
+  label: string;
+  href: string;
+}
+interface NavItem {
+  label: string;
+  href: string;
+  children?: NavChild[];
+}
+
+interface Props {
+  nav: NavItem[];
+  announcement?: string;
+}
+
+const DRAWER_ID = "mobile-drawer";
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export default function MobileNav({ nav, announcement }: Props) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const reduced = prefersReducedMotion();
+
+  const close = useCallback(() => setOpen(false), []);
+
+  // Body scroll lock while open.
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Focus management: move focus into the panel on open, restore on close.
+  useEffect(() => {
+    if (open) {
+      // Focus the first focusable element (the close button) once painted.
+      const id = window.requestAnimationFrame(() => {
+        const first = panelRef.current?.querySelector<HTMLElement>(
+          "[data-autofocus]",
+        );
+        first?.focus();
+      });
+      return () => window.cancelAnimationFrame(id);
+    }
+    // On close, return focus to the hamburger.
+    buttonRef.current?.focus();
+    return undefined;
+  }, [open]);
+
+  // Escape to close + focus trap (Tab cycling) while open.
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = Array.from(
+        panel.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (focusable.length === 0) return;
+      const firstEl = focusable[0]!;
+      const lastEl = focusable[focusable.length - 1]!;
+      const active = document.activeElement as HTMLElement | null;
+      if (e.shiftKey) {
+        if (active === firstEl || !panel.contains(active)) {
+          e.preventDefault();
+          lastEl.focus();
+        }
+      } else if (active === lastEl) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    },
+    [close],
+  );
+
+  return (
+    <div class="md:hidden">
+      <button
+        ref={buttonRef}
+        type="button"
+        aria-label="Open menu"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={DRAWER_ID}
+        onClick={() => setOpen(true)}
+        class="inline-flex h-10 w-10 items-center justify-center rounded-md text-text transition-colors hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      >
+        <svg
+          width="22"
+          height="22"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          class="fixed inset-0 z-50"
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          onKeyDown={onKeyDown}
+        >
+          {/* Backdrop */}
+          <div
+            class={`absolute inset-0 bg-text/40 ${
+              reduced ? "" : "transition-opacity duration-200"
+            }`}
+            onClick={close}
+            aria-hidden="true"
+          />
+          {/* Panel */}
+          <div
+            ref={panelRef}
+            id={DRAWER_ID}
+            role="dialog"
+            aria-modal="true"
+            aria-label="Site menu"
+            class="absolute inset-y-0 right-0 flex w-[85vw] max-w-sm flex-col overflow-y-auto bg-surface text-text shadow-xl"
+            style={
+              reduced
+                ? undefined
+                : "transform:translateX(100%);animation:tot-slidein .22s ease-out forwards"
+            }
+          >
+            <div class="flex items-center justify-between border-b border-border px-5 py-4">
+              <span class="font-display text-sm font-medium uppercase tracking-[0.14em] text-muted">
+                Menu
+              </span>
+              <button
+                type="button"
+                data-autofocus
+                aria-label="Close menu"
+                onClick={close}
+                class="inline-flex h-10 w-10 items-center justify-center rounded-md text-text transition-colors hover:bg-border/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+              >
+                <svg
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  aria-hidden="true"
+                >
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            {announcement && (
+              <p class="border-b border-border bg-primary px-5 py-2.5 text-center font-body text-sm text-primary-contrast">
+                {announcement}
+              </p>
+            )}
+
+            <nav aria-label="Mobile" class="flex-1 px-2 py-4">
+              <ul class="space-y-1">
+                {nav.map((item) => (
+                  <li key={item.href}>
+                    {item.children && item.children.length > 0 ? (
+                      <div class="px-3 py-2">
+                        <a
+                          href={item.href}
+                          class="block font-display text-base font-medium text-text hover:text-primary"
+                        >
+                          {item.label}
+                        </a>
+                        <ul class="mt-1 space-y-0.5 border-l border-border pl-3">
+                          {item.children.map((child) => (
+                            <li key={child.href}>
+                              <a
+                                href={child.href}
+                                class="block rounded px-2 py-1.5 font-body text-sm text-muted hover:bg-border/40 hover:text-text"
+                              >
+                                {child.label}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ) : (
+                      <a
+                        href={item.href}
+                        class="block rounded px-3 py-2.5 font-display text-base font-medium text-text hover:bg-border/40 hover:text-primary"
+                      >
+                        {item.label}
+                      </a>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+/**
+ * <QuickView> — one global native <dialog> that any product card opens via a
+ * `[data-quickview]` button (event-delegated, so cards stay zero-JS). Shows a
+ * peek — image, price, colors, short description — and routes to the full PDP
+ * for variant selection. No cart action (Phase 1 browse-only). Native <dialog>
+ * gives us focus-trap + Esc + backdrop for free; we add backdrop-click + the
+ * reduced-motion-safe entrance via CSS.
+ */
+import { useEffect, useRef, useState } from "preact/hooks";
+import { formatPrice } from "@/lib/format";
+import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+import { withClientBase } from "@/lib/basePath";
+
+interface QV {
+  handle: string;
+  title: string;
+  price: number;
+  currency: string;
+  vendor?: string;
+  desc?: string;
+  colors?: string[];
+  onSale?: boolean;
+  available?: boolean;
+  maxCompareAt?: number | null;
+  sku?: string | null;
+  images?: { url?: string; rehosted?: boolean; seed: string }[];
+}
+
+interface Props {
+  locale: string;
+}
+
+function imgSrc(im: { url?: string; rehosted?: boolean; seed: string }, title: string) {
+  return isUsableImageUrl(im.url, im.rehosted)
+    ? im.url!
+    : placeholderDataUri({ seed: im.seed, width: 700, height: 875, label: title });
+}
+
+export default function QuickView({ locale }: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [qv, setQv] = useState<QV | null>(null);
+
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      const btn = (e.target as HTMLElement)?.closest?.("[data-quickview]");
+      if (!btn) return;
+      e.preventDefault();
+      try {
+        setQv(JSON.parse(btn.getAttribute("data-quickview")!) as QV);
+        dialogRef.current?.showModal();
+      } catch {
+        /* malformed payload — ignore, card link still works */
+      }
+    }
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
+  const close = () => dialogRef.current?.close();
+
+  return (
+    <dialog
+      ref={dialogRef}
+      class="quickview m-auto w-[min(46rem,92vw)] rounded-[var(--radius-lg)] bg-[var(--color-surface)] p-0 text-[var(--color-text)] backdrop:bg-[color-mix(in_srgb,var(--color-text)_55%,transparent)]"
+      aria-label="Product quick view"
+      onClick={(e) => {
+        // Backdrop click closes (clicks inside the panel stop at the panel).
+        if (e.target === dialogRef.current) close();
+      }}
+    >
+      {qv && (
+        <div class="grid gap-0 sm:grid-cols-2">
+          <div class="aspect-[4/5] overflow-hidden bg-[var(--color-border)] sm:rounded-l-[var(--radius-lg)]">
+            <img
+              src={imgSrc(qv.images?.[0] ?? { seed: qv.handle }, qv.title)}
+              alt={qv.title}
+              width={700}
+              height={875}
+              class="h-full w-full object-cover"
+            />
+          </div>
+          <div class="relative p-6 sm:p-7">
+            <button
+              type="button"
+              onClick={close}
+              aria-label="Close quick view"
+              class="absolute right-3 top-3 grid h-9 w-9 place-items-center rounded-full text-[var(--color-muted)] hover:bg-[var(--color-bg)] hover:text-[var(--color-text)]"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" />
+              </svg>
+            </button>
+
+            {qv.vendor && (
+              <p class="font-mono text-[0.7rem] uppercase tracking-[0.14em] text-[var(--color-muted)]">
+                {qv.vendor}
+              </p>
+            )}
+            <h2 class="mt-1.5 font-display text-2xl font-semibold leading-tight">{qv.title}</h2>
+
+            <p class="mt-3 flex items-baseline gap-2">
+              <span class={`font-display text-xl tabular-nums ${qv.onSale ? "text-[var(--color-sale)]" : ""}`}>
+                {formatPrice(qv.price, qv.currency, locale)}
+              </span>
+              {qv.onSale && qv.maxCompareAt != null && (
+                <span class="text-sm text-[var(--color-muted)] line-through tabular-nums">
+                  {formatPrice(qv.maxCompareAt, qv.currency, locale)}
+                </span>
+              )}
+              {qv.available === false && (
+                <span class="text-sm text-[var(--color-muted)]">· Sold out</span>
+              )}
+            </p>
+
+            {qv.colors && qv.colors.length > 0 && (
+              <p class="mt-3 text-sm text-[var(--color-muted)]">
+                {qv.colors.length} {qv.colors.length === 1 ? "color" : "colors"}: {qv.colors.join(", ")}
+              </p>
+            )}
+
+            {qv.desc && <p class="mt-4 text-sm leading-relaxed text-[var(--color-text)]">{qv.desc}</p>}
+
+            <a
+              href={withClientBase(`/products/${qv.handle}`)}
+              class="mt-6 inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-2.5 font-display text-sm font-semibold text-[var(--color-primary-contrast)] transition-transform hover:gap-3"
+            >
+              View full details
+              <span aria-hidden="true">→</span>
+            </a>
+            {qv.sku && (
+              <p class="mt-4 font-mono text-[0.7rem] text-[var(--color-muted)]">SKU {qv.sku}</p>
+            )}
+          </div>
+        </div>
+      )}
+    </dialog>
+  );
+}

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

@@ -0,0 +1,122 @@
+/**
+ * Recently viewed (Shopify-style discovery rail). A small client island that
+ * records the current product to localStorage on a PDP and renders the rest as
+ * a quiet strip. No server round-trip — snapshots are self-contained, so it
+ * works against fixtures or live ToT identically. Renders nothing until it has
+ * something to show (no layout shift, no empty state noise).
+ */
+import { useEffect, useState } from "preact/hooks";
+import { formatPrice } from "@/lib/format";
+import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+import { withClientBase } from "@/lib/basePath";
+
+export interface RVItem {
+  handle: string;
+  title: string;
+  price: number;
+  currency: string;
+  vendor?: string;
+  img?: string;
+  rehosted?: boolean;
+  seed: string;
+}
+
+interface Props {
+  /** When set (on a PDP), this product is recorded and excluded from the rail. */
+  current?: RVItem;
+  locale: string;
+  title?: string;
+  max?: number;
+}
+
+const KEY = "tot:recently-viewed";
+const CAP = 12;
+
+function read(): RVItem[] {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? (arr as RVItem[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+export default function RecentlyViewed({
+  current,
+  locale,
+  title = "Recently viewed",
+  max = 5,
+}: Props) {
+  const [items, setItems] = useState<RVItem[]>([]);
+
+  useEffect(() => {
+    let list = read();
+    if (current) {
+      list = [current, ...list.filter((i) => i.handle !== current.handle)].slice(
+        0,
+        CAP,
+      );
+      try {
+        localStorage.setItem(KEY, JSON.stringify(list));
+      } catch {
+        /* storage full / disabled — degrade silently */
+      }
+    }
+    // Exclude the current product from what we *show*.
+    setItems(
+      list.filter((i) => i.handle !== current?.handle).slice(0, max),
+    );
+  }, [current?.handle]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <section
+      class="container-prose border-t border-[var(--color-border)] py-12"
+      aria-label={title}
+    >
+      <p class="eyebrow eyebrow--tick mb-5">{title}</p>
+      <ul class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5">
+        {items.map((p) => {
+          const src = isUsableImageUrl(p.img, p.rehosted)
+            ? p.img!
+            : placeholderDataUri({
+                seed: p.seed,
+                width: 400,
+                height: 500,
+                label: p.title,
+              });
+          return (
+            <li>
+              <a href={withClientBase(`/products/${p.handle}`)} class="group block">
+                <div class="aspect-[4/5] overflow-hidden rounded-md bg-[var(--color-border)] ring-1 ring-[var(--color-border)]">
+                  <img
+                    src={src}
+                    alt={p.title}
+                    width={400}
+                    height={500}
+                    loading="lazy"
+                    class="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]"
+                  />
+                </div>
+                {p.vendor && (
+                  <p class="mt-2.5 font-mono text-[0.62rem] uppercase tracking-[0.14em] text-[var(--color-muted)]">
+                    {p.vendor}
+                  </p>
+                )}
+                <h3 class="mt-1 font-display text-[0.9rem] font-medium leading-snug transition-colors motion-safe:group-hover:text-[var(--color-primary)]">
+                  {p.title}
+                </h3>
+                <p class="mt-1 font-display text-sm tabular-nums">
+                  {formatPrice(p.price, p.currency, locale)}
+                </p>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

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

@@ -0,0 +1,99 @@
+/**
+ * <SavedList> — renders the wishlist from localStorage on the /saved page.
+ * Client-only (the list lives in the browser). Each item links to its PDP and
+ * can be removed inline; empty state invites browsing. Phase 2 swaps the store
+ * for an account-backed list without touching this component.
+ */
+import { useEffect, useState } from "preact/hooks";
+import {
+  readWishlist,
+  toggleSaved,
+  WISHLIST_EVENT,
+  type SavedItem,
+} from "@/lib/wishlist";
+import { formatPrice } from "@/lib/format";
+import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+import { withClientBase } from "@/lib/basePath";
+
+interface Props {
+  locale: string;
+}
+
+export default function SavedList({ locale }: Props) {
+  const [items, setItems] = useState<SavedItem[] | null>(null);
+
+  useEffect(() => {
+    const refresh = () => setItems(readWishlist());
+    refresh();
+    window.addEventListener(WISHLIST_EVENT, refresh);
+    return () => window.removeEventListener(WISHLIST_EVENT, refresh);
+  }, []);
+
+  // null = pre-hydration (avoid a flash of the empty state).
+  if (items === null) return null;
+
+  if (items.length === 0) {
+    return (
+      <div class="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-6 py-16 text-center">
+        <p class="display-md">Nothing saved yet</p>
+        <p class="mx-auto mt-3 max-w-md text-[var(--color-muted)]">
+          Tap the heart on any product to keep it here for later. Saved items
+          live on this device.
+        </p>
+        <a
+          href={withClientBase("/collections/bestsellers")}
+          class="mt-6 inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-2.5 font-display text-sm font-semibold text-[var(--color-primary-contrast)]"
+        >
+          Browse the shop <span aria-hidden="true">→</span>
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <ul class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
+      {items.map((p) => {
+        const src = isUsableImageUrl(p.img, p.rehosted)
+          ? p.img!
+          : placeholderDataUri({ seed: p.seed, width: 400, height: 500, label: p.title });
+        return (
+          <li class="group relative">
+            <div class="relative aspect-[4/5] overflow-hidden rounded-md bg-[var(--color-border)] ring-1 ring-[var(--color-border)]">
+              <img
+                src={src}
+                alt={p.title}
+                width={400}
+                height={500}
+                loading="lazy"
+                class="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]"
+              />
+              <button
+                type="button"
+                onClick={() => toggleSaved(p)}
+                aria-label={`Remove ${p.title} from saved`}
+                class="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-sale)] backdrop-blur"
+              >
+                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" 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>
+            </div>
+            <a href={withClientBase(`/products/${p.handle}`)} class="mt-3 block after:absolute after:inset-0">
+              {p.vendor && (
+                <span class="block font-mono text-[0.62rem] uppercase tracking-[0.14em] text-[var(--color-muted)]">
+                  {p.vendor}
+                </span>
+              )}
+              <span class="mt-1 block font-display text-[0.95rem] font-medium leading-snug">
+                {p.title}
+              </span>
+              <span class="mt-1 block font-display text-sm tabular-nums">
+                {formatPrice(p.price, p.currency, locale)}
+              </span>
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}