@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/public/js/dashboard-vendor-search.js

@@ -0,0 +1,115 @@
+/**
+ * Client behavior for the ToT-STAFF vendor search + enter on /dashboard (#8425).
+ *
+ * Served as a STATIC same-origin file (public/) and referenced via
+ * <script src="/js/dashboard-vendor-search.js">, so the strict production CSP
+ * allows it via `script-src 'self'` — no nonce, no per-build hash. (An inline
+ * <script> is blocked: Astro's `is:inline` drops the templated nonce, and a
+ * processed inline script needs its content-hash pinned in cspStaticHashes on
+ * every change. An external 'self' file avoids both — mirrors dashboard-team.js.)
+ *
+ * Two session-authed, staff-gated endpoints (no server-injected values, so this
+ * file is fully static):
+ *   GET  /api/dashboard/vendor-search?q=<prefix>  → { vendors: [{appDomain, displayName}] }
+ *   POST /api/dashboard/enter-vendor {vendorAppDomain} → { ok, redirect } (writes audit)
+ */
+(function () {
+  const $ = (id) => document.getElementById(id);
+  const input = $("vendorSearch");
+  if (!input) return; // non-staff page — nothing to wire.
+  const results = $("vendorResults");
+  const msg = $("vendorSearchMsg");
+
+  let seq = 0; // guards against out-of-order responses (last query wins).
+  let timer = null;
+
+  function showMsg(text, isErr) {
+    msg.textContent = text || "";
+    msg.className = isErr ? "err" : "";
+  }
+
+  function clearResults() {
+    results.replaceChildren();
+  }
+
+  function renderResults(vendors) {
+    clearResults();
+    if (!vendors || !vendors.length) {
+      showMsg("No matching vendors.");
+      return;
+    }
+    showMsg("");
+    for (const v of vendors) {
+      const li = document.createElement("li");
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.appdomain = v.appDomain;
+      const dn = document.createElement("span");
+      dn.className = "dn";
+      dn.textContent = v.displayName || v.appDomain;
+      const ad = document.createElement("span");
+      ad.className = "ad";
+      ad.textContent = v.appDomain;
+      btn.appendChild(dn);
+      btn.appendChild(ad);
+      btn.addEventListener("click", () => enter(v.appDomain, btn));
+      li.appendChild(btn);
+      results.appendChild(li);
+    }
+  }
+
+  async function search(q) {
+    const mine = ++seq;
+    try {
+      const res = await fetch("/api/dashboard/vendor-search?q=" + encodeURIComponent(q), {
+        headers: { accept: "application/json" },
+      });
+      if (mine !== seq) return; // a newer query superseded this one.
+      const body = await res.json().catch(() => ({}));
+      if (res.ok) {
+        renderResults(body.vendors);
+      } else {
+        clearResults();
+        showMsg(body.error || "Search failed (HTTP " + res.status + ").", true);
+      }
+    } catch (e) {
+      if (mine !== seq) return;
+      clearResults();
+      showMsg("Search failed: " + (e && e.message ? e.message : e), true);
+    }
+  }
+
+  async function enter(appDomain, btn) {
+    if (btn) btn.disabled = true;
+    showMsg("Entering " + appDomain + "…");
+    try {
+      const res = await fetch("/api/dashboard/enter-vendor", {
+        method: "POST",
+        headers: { "content-type": "application/json", accept: "application/json" },
+        body: JSON.stringify({ vendorAppDomain: appDomain }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (res.ok && body.redirect) {
+        window.location.assign(body.redirect);
+        return;
+      }
+      showMsg(body.error || "Couldn't enter that vendor (HTTP " + res.status + ").", true);
+    } catch (e) {
+      showMsg("Couldn't enter: " + (e && e.message ? e.message : e), true);
+    } finally {
+      if (btn) btn.disabled = false;
+    }
+  }
+
+  input.addEventListener("input", () => {
+    const q = input.value.trim();
+    if (timer) clearTimeout(timer);
+    if (!q) {
+      seq++; // cancel any in-flight render.
+      clearResults();
+      showMsg("");
+      return;
+    }
+    timer = setTimeout(() => search(q), 200); // debounce keystrokes.
+  });
+})();

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

@@ -0,0 +1,34 @@
+---
+/**
+ * <Badge> — tiny mono-uppercase pill used over product imagery and inline.
+ * Theme-agnostic: colors map to CSS-var-backed Tailwind utilities.
+ */
+interface Props {
+  /** `soldout` is the out-of-stock state; `compliant` marks a
+   *  compliance-verified item (age/lab/regulatory). */
+  variant: "sale" | "new" | "low-stock" | "soldout" | "compliant";
+  /** Visible text. May also be supplied via the default slot. */
+  label?: string;
+  class?: string;
+}
+
+const { variant, label, class: className } = Astro.props;
+
+const variants: Record<Props["variant"], string> = {
+  sale: "bg-sale text-white",
+  new: "bg-primary text-primary-contrast",
+  "low-stock": "bg-accent text-white",
+  soldout: "bg-surface text-muted border border-border",
+  compliant: "bg-[var(--color-success)] text-white",
+};
+---
+
+<span
+  class:list={[
+    "inline-flex items-center rounded-full px-2 py-0.5 font-mono text-[0.62rem] uppercase tracking-[0.12em] leading-none whitespace-nowrap",
+    variants[variant],
+    className,
+  ]}
+>
+  {label}<slot />
+</span>

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

@@ -0,0 +1,45 @@
+---
+/**
+ * <Breadcrumbs> — semantic breadcrumb trail. The last crumb is the current
+ * page (aria-current, not a link). No own container — inherits parent width.
+ */
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  crumbs: { label: string; href: string }[];
+}
+
+const { crumbs } = Astro.props;
+const { basePath } = Astro.locals;
+---
+
+<nav aria-label="Breadcrumb" class="text-sm text-muted">
+  <ol class="flex flex-wrap items-center gap-x-1 gap-y-0.5">
+    {
+      crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <li class="flex items-center gap-x-1">
+            {i > 0 && (
+              <span aria-hidden="true" class="select-none text-border">
+                /
+              </span>
+            )}
+            {isLast ? (
+              <span aria-current="page" class="text-text">
+                {crumb.label}
+              </span>
+            ) : (
+              <a
+                href={withBase(basePath, crumb.href)}
+                class="transition-colors hover:text-primary"
+              >
+                {crumb.label}
+              </a>
+            )}
+          </li>
+        );
+      })
+    }
+  </ol>
+</nav>

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

@@ -0,0 +1,56 @@
+---
+/**
+ * <CollectionCard> — editorial collection tile with a dark gradient scrim so
+ * the overlaid title reads on any image. Theme-agnostic (CSS-var-backed
+ * utilities only).
+ */
+import type { CatalogCollection } from "@tot/public-runtime";
+import Img from "@/components/Img.astro";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  collection: CatalogCollection;
+  productCount?: number;
+}
+
+const { collection, productCount } = Astro.props;
+const { basePath } = Astro.locals;
+const image = collection.image;
+---
+
+<a
+  href={withBase(basePath, `/collections/${collection.handle}`)}
+  class="group relative block aspect-[3/2] overflow-hidden rounded-md bg-border"
+  data-reveal
+>
+  <Img
+    src={image?.url}
+    rehosted={image?.rehosted}
+    seed={image?.id ?? collection.handle}
+    label={collection.title}
+    alt={image?.alt ?? collection.title}
+    width={image?.width ?? 800}
+    height={image?.height ?? 600}
+    sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw"
+    class="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]"
+  />
+  <!-- Scrim: deep enough at the foot that white text passes AA over any image
+       (incl. the lighter placeholder pairs). -->
+  <div
+    class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"
+    aria-hidden="true"
+  >
+  </div>
+  <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
+    <h3 class="font-display text-xl font-semibold text-white drop-shadow-sm sm:text-2xl">
+      {collection.title}
+    </h3>
+    {
+      productCount != null && (
+        <p class="mt-0.5 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-white/80">
+          {productCount} {productCount === 1 ? "piece" : "pieces"}
+        </p>
+      )
+    }
+  </div>
+</a>

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

@@ -0,0 +1,35 @@
+---
+/**
+ * <EmptyState> — intentional empty result (search/PLP). Copy is passed in by
+ * the parent (kept in the tenant's editorial voice).
+ */
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  title: string;
+  body?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+}
+
+const { title, body, ctaLabel, ctaHref } = Astro.props;
+const { basePath } = Astro.locals;
+---
+
+<div
+  class="mx-auto flex max-w-md flex-col items-center px-6 py-20 text-center sm:py-28"
+  data-reveal
+>
+  <h2 class="display-md">{title}</h2>
+  {body && <p class="mt-3 max-w-prose text-muted">{body}</p>}
+  {
+    ctaLabel && ctaHref && (
+      <a
+        href={withBase(basePath, ctaHref)}
+        class="mt-7 inline-flex items-center rounded-full bg-primary px-5 py-2 font-display text-sm font-medium text-primary-contrast transition-opacity hover:opacity-90"
+      >
+        {ctaLabel}
+      </a>
+    )
+  }
+</div>

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

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

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

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

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

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