@tokenoftrust/storefront-runner 0.1.0

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

@@ -0,0 +1,248 @@
+/**
+ * <SearchTypeahead> — compact header search with debounced typeahead dropdown.
+ *
+ * Interactive island (Preact). Fetches `GET {action}?q=<q>&format=json` (the
+ * /search page returns `{ products: TypeaheadDoc[] }` when `format=json`) and
+ * renders up to 6 results as an ARIA combobox/listbox. Submitting the form (or
+ * Enter with no active option) navigates to the full `{action}?q=<q>` page.
+ *
+ * A11y: role=combobox input owning a role=listbox of role=option rows,
+ * aria-activedescendant for the active row, ArrowUp/Down navigation, Enter to
+ * open a product, Escape to dismiss. Fetch failures degrade to "no dropdown".
+ */
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import type { TypeaheadDoc } from "@/lib/search";
+import { formatPrice } from "@/lib/format";
+import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+import { withClientBase } from "@/lib/basePath";
+
+interface Props {
+  action?: string;
+}
+
+const MAX_RESULTS = 6;
+const DEBOUNCE_MS = 150;
+const MIN_CHARS = 2;
+const LISTBOX_ID = "typeahead-listbox";
+
+function thumbFor(doc: TypeaheadDoc): string {
+  if (isUsableImageUrl(doc.image, false)) return doc.image!;
+  return placeholderDataUri({
+    seed: doc.handle,
+    width: 48,
+    height: 48,
+    label: doc.title,
+  });
+}
+
+export default function SearchTypeahead({ action = "/search" }: Props) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<TypeaheadDoc[]>([]);
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1); // index into results, -1 = none
+  const rootRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+    setActive(-1);
+  }, []);
+
+  // Debounced fetch.
+  useEffect(() => {
+    const q = query.trim();
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (q.length < MIN_CHARS) {
+      setResults([]);
+      setOpen(false);
+      setActive(-1);
+      return;
+    }
+    debounceRef.current = setTimeout(() => {
+      abortRef.current?.abort();
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+      // Prefix with the tenant base path so the typeahead queries THIS tenant's
+      // /search (path-routed) rather than the root fallback tenant.
+      const url = `${withClientBase(action)}?q=${encodeURIComponent(q)}&format=json`;
+      fetch(url, { signal: ctrl.signal, headers: { Accept: "application/json" } })
+        .then((r) => (r.ok ? r.json() : Promise.reject(new Error("bad status"))))
+        .then((data: { products?: TypeaheadDoc[] }) => {
+          const products = Array.isArray(data.products)
+            ? data.products.slice(0, MAX_RESULTS)
+            : [];
+          setResults(products);
+          setActive(-1);
+          setOpen(products.length > 0);
+        })
+        .catch(() => {
+          // Network/parse error or aborted: degrade silently (no dropdown).
+          setResults([]);
+          setOpen(false);
+          setActive(-1);
+        });
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, action]);
+
+  // Close when focus/click leaves the widget.
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [closeDropdown]);
+
+  const go = useCallback((href: string) => {
+    // Keep navigations inside the tenant base path (path-routed tenants).
+    window.location.href = withClientBase(href);
+  }, []);
+
+  const submitSearch = useCallback(() => {
+    const q = query.trim();
+    if (q.length === 0) return;
+    go(`${action}?q=${encodeURIComponent(q)}`);
+  }, [query, action, go]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        closeDropdown();
+        return;
+      }
+      if (!open || results.length === 0) {
+        // Enter falls through to native form submit handler.
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((i) => (i + 1) % results.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((i) => (i <= 0 ? results.length - 1 : i - 1));
+      } else if (e.key === "Enter") {
+        if (active >= 0 && active < results.length) {
+          e.preventDefault();
+          go(`/products/${results[active]!.handle}`);
+        }
+        // else: let the form submit (full results page).
+      }
+    },
+    [open, results, active, closeDropdown, go],
+  );
+
+  const activeId = active >= 0 ? `typeahead-opt-${active}` : undefined;
+
+  return (
+    <form
+      ref={rootRef}
+      role="search"
+      aria-label="Site search"
+      action={action}
+      method="get"
+      onSubmit={(e) => {
+        e.preventDefault();
+        submitSearch();
+      }}
+      class="relative w-full"
+    >
+      <div class="flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1.5 focus-within:border-primary">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true"
+          class="shrink-0 text-muted"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          ref={inputRef}
+          type="search"
+          name="q"
+          value={query}
+          autocomplete="off"
+          spellcheck={false}
+          aria-label="Search products"
+          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={LISTBOX_ID}
+          aria-autocomplete="list"
+          aria-activedescendant={activeId}
+          placeholder="Search products"
+          onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
+          onFocus={() => {
+            if (results.length > 0) setOpen(true);
+          }}
+          onKeyDown={onKeyDown}
+          class="w-full min-w-0 bg-transparent font-body text-sm text-text placeholder:text-muted focus:outline-none"
+        />
+      </div>
+
+      {open && results.length > 0 && (
+        <ul
+          id={LISTBOX_ID}
+          role="listbox"
+          aria-label="Search suggestions"
+          class="absolute left-0 right-0 top-[calc(100%+0.4rem)] z-50 overflow-hidden rounded-md border border-border bg-surface shadow-lg"
+        >
+          {results.map((doc, i) => (
+            <li
+              key={doc.handle}
+              id={`typeahead-opt-${i}`}
+              role="option"
+              aria-selected={i === active}
+              onMouseEnter={() => setActive(i)}
+              onMouseDown={(e) => {
+                // Prevent input blur before navigation.
+                e.preventDefault();
+                go(`/products/${doc.handle}`);
+              }}
+              class={`flex cursor-pointer items-center gap-3 px-3 py-2 ${
+                i === active ? "bg-border/50" : ""
+              }`}
+            >
+              <img
+                src={thumbFor(doc)}
+                alt=""
+                width={40}
+                height={40}
+                loading="lazy"
+                decoding="async"
+                class="h-10 w-10 shrink-0 rounded object-cover"
+                style="background:var(--color-border)"
+              />
+              <span class="min-w-0 flex-1">
+                <span class="block truncate font-body text-sm text-text">
+                  {doc.title}
+                </span>
+                {(doc.vendor || doc.type) && (
+                  <span class="block truncate font-mono text-[0.65rem] uppercase tracking-[0.08em] text-muted">
+                    {[doc.vendor, doc.type].filter(Boolean).join(" · ")}
+                  </span>
+                )}
+              </span>
+              <span class="shrink-0 font-mono text-sm text-text">
+                {formatPrice(doc.price, doc.currency)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,378 @@
+/**
+ * <VariantSelector> — PDP variant picker (the centerpiece interaction).
+ *
+ * Interactive island (Preact). One radiogroup per product option (Color, Size,
+ * …). Selecting values resolves the matching CatalogVariant via `option_values`.
+ * For each value we compute availability GIVEN the other current selections and
+ * clearly disable unbuyable combinations (struck-through + aria-disabled).
+ *
+ * On a complete valid selection we update a polite live region (price /
+ * compare-at / SKU / stock state) and dispatch two window CustomEvents:
+ *   - `variant:image`  { imageId }  → <ImageGallery> swaps the main image
+ *   - `variant:change` { variantId, available }
+ *
+ * Buy button is an intentionally-disabled placeholder (Phase 1 has no cart).
+ *
+ * A11y: role=radiogroup/radio with aria-checked, disabled values get
+ * aria-disabled, live region is aria-live="polite".
+ */
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import type { CatalogVariant, VariantCartPayload } from "@tot/public-runtime";
+import { formatPrice } from "@/lib/format";
+
+interface OptionDef {
+  name: string;
+  position: number;
+  values: string[];
+}
+
+interface Props {
+  variants: CatalogVariant[];
+  options: OptionDef[];
+  currency: string;
+  locale?: string;
+  /**
+   * FoxyCart add-to-cart (Track A). Server pre-builds a signed cart payload per
+   * variant; the island renders the selected variant's payload as a real Foxy
+   * form (loader.js turns it into the sidecart). Undefined → no cart (marketing
+   * tenant, or signed mode missing secret) → the button stays a placeholder.
+   */
+  foxyCart?: {
+    action: string;
+    byVariantId: Record<string, VariantCartPayload>;
+  };
+}
+
+const LOW_STOCK_THRESHOLD = 5;
+
+type Selection = Record<string, string>;
+
+function variantMatches(v: CatalogVariant, sel: Selection): boolean {
+  return Object.entries(sel).every(([name, value]) => v.option_values[name] === value);
+}
+
+function findVariant(
+  variants: CatalogVariant[],
+  sel: Selection,
+): CatalogVariant | undefined {
+  return variants.find((v) => variantMatches(v, sel));
+}
+
+export default function VariantSelector({
+  variants,
+  options,
+  currency,
+  locale,
+  foxyCart,
+}: Props) {
+  const sortedOptions = useMemo(
+    () => [...options].sort((a, b) => a.position - b.position),
+    [options],
+  );
+
+  // Default selection: first available variant (fallback: first variant).
+  const defaultSelection = useMemo<Selection>(() => {
+    const base =
+      variants.find((v) => v.inventory.available) ?? variants[0];
+    const sel: Selection = {};
+    if (base) {
+      for (const opt of sortedOptions) {
+        const val = base.option_values[opt.name];
+        if (val !== undefined) sel[opt.name] = val;
+      }
+    }
+    return sel;
+  }, [variants, sortedOptions]);
+
+  const [selection, setSelection] = useState<Selection>(defaultSelection);
+  const [quantity, setQuantity] = useState(1);
+
+  const selected = useMemo(
+    () => findVariant(variants, selection),
+    [variants, selection],
+  );
+
+  const complete = useMemo(
+    () => sortedOptions.every((o) => selection[o.name] !== undefined),
+    [sortedOptions, selection],
+  );
+
+  // Is a value buyable given the OTHER current selections?
+  const isValueAvailable = useCallback(
+    (optionName: string, value: string): boolean => {
+      const trial: Selection = { ...selection, [optionName]: value };
+      // Only constrain on options that the trial actually pins.
+      return variants.some(
+        (v) =>
+          v.inventory.available &&
+          Object.entries(trial).every(
+            ([n, val]) => v.option_values[n] === val,
+          ),
+      );
+    },
+    [selection, variants],
+  );
+
+  const selectValue = useCallback(
+    (optionName: string, value: string) => {
+      setSelection((prev) => ({ ...prev, [optionName]: value }));
+    },
+    [],
+  );
+
+  // Roving radio keyboard handling within a group.
+  const onRadioKeyDown = useCallback(
+    (e: KeyboardEvent, opt: OptionDef, currentIdx: number) => {
+      const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"];
+      if (!keys.includes(e.key)) return;
+      e.preventDefault();
+      const fwd = e.key === "ArrowRight" || e.key === "ArrowDown";
+      const len = opt.values.length;
+      let i = currentIdx;
+      // Step to the next selectable (available) value, wrapping; if none other
+      // is available, stay put.
+      for (let step = 0; step < len; step++) {
+        i = fwd ? (i + 1) % len : (i - 1 + len) % len;
+        const val = opt.values[i]!;
+        if (isValueAvailable(opt.name, val)) {
+          selectValue(opt.name, val);
+          return;
+        }
+      }
+    },
+    [isValueAvailable, selectValue],
+  );
+
+  // Dispatch cross-island events when the resolved variant changes.
+  useEffect(() => {
+    if (!complete || !selected) return;
+    if (selected.image_id) {
+      window.dispatchEvent(
+        new CustomEvent("variant:image", {
+          detail: { imageId: selected.image_id },
+        }),
+      );
+    }
+    window.dispatchEvent(
+      new CustomEvent("variant:change", {
+        detail: {
+          variantId: selected.id,
+          available: selected.inventory.available,
+        },
+      }),
+    );
+  }, [complete, selected]);
+
+  // ---- live-region status copy --------------------------------------------
+  const qty = selected?.inventory.quantity;
+  const available = selected?.inventory.available ?? false;
+  let stockLabel = "";
+  let stockClass = "text-muted";
+  if (complete && selected) {
+    if (!available) {
+      stockLabel = "Sold out";
+      stockClass = "text-sale";
+    } else if (qty !== undefined && qty !== null && qty <= LOW_STOCK_THRESHOLD) {
+      stockLabel = `Only ${qty} left`;
+      stockClass = "text-accent";
+    } else {
+      stockLabel = "In stock";
+      stockClass = "text-primary";
+    }
+  }
+
+  const compareAt = selected?.compare_at_price;
+  const showCompare =
+    selected !== undefined &&
+    compareAt !== undefined &&
+    compareAt > selected.price;
+
+  // FoxyCart payload for the resolved variant (server pre-signed). Buyable only
+  // when the selection is complete, in stock, AND a cart is wired.
+  const cartPayload =
+    foxyCart && selected ? foxyCart.byVariantId[selected.id] : undefined;
+  const canBuy = complete && available && !!cartPayload;
+  const buyLabel = !complete
+    ? "Select options"
+    : !available
+      ? "Sold out"
+      : "Add to cart";
+
+  return (
+    <div class="flex flex-col gap-6">
+      {/* Live region: price + stock + sku */}
+      <div aria-live="polite" class="flex flex-col gap-1">
+        {selected ? (
+          <>
+            <div class="flex items-baseline gap-3">
+              <span class={`font-display text-[1.75rem] font-semibold tabular-nums leading-none ${showCompare ? "text-sale" : "text-text"}`}>
+                {formatPrice(selected.price, currency, locale)}
+              </span>
+              {showCompare && (
+                <span class="font-body text-base text-muted line-through tabular-nums">
+                  {formatPrice(compareAt!, currency, locale)}
+                </span>
+              )}
+            </div>
+            <p class={`font-mono text-xs uppercase tracking-[0.08em] ${stockClass}`}>
+              {stockLabel}
+            </p>
+            {selected.sku && (
+              <p class="font-mono text-[0.7rem] text-muted">
+                SKU: {selected.sku}
+              </p>
+            )}
+          </>
+        ) : (
+          <p class="font-body text-sm text-muted">
+            Select options to see price &amp; availability.
+          </p>
+        )}
+      </div>
+
+      {/* Option groups */}
+      {sortedOptions.map((opt) => {
+        const groupSelected = selection[opt.name];
+        return (
+          <fieldset key={opt.name} class="flex flex-col gap-2">
+            <legend class="font-mono text-xs uppercase tracking-[0.12em] text-muted">
+              {opt.name}
+              {groupSelected && (
+                <span class="ml-2 normal-case tracking-normal text-text">
+                  {groupSelected}
+                </span>
+              )}
+            </legend>
+            <div
+              role="radiogroup"
+              aria-label={opt.name}
+              class="flex flex-wrap gap-2"
+            >
+              {opt.values.map((value, vi) => {
+                const checked = groupSelected === value;
+                const enabled = isValueAvailable(opt.name, value);
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    role="radio"
+                    aria-checked={checked}
+                    aria-disabled={!enabled}
+                    disabled={!enabled}
+                    tabIndex={checked ? 0 : -1}
+                    onClick={() => enabled && selectValue(opt.name, value)}
+                    onKeyDown={(e) => onRadioKeyDown(e, opt, vi)}
+                    class={[
+                      "min-w-[2.75rem] rounded-md border px-3 py-2 font-body text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+                      checked
+                        ? "border-primary bg-primary text-primary-contrast"
+                        : "border-border bg-surface text-text hover:border-primary",
+                      !enabled
+                        ? "cursor-not-allowed border-border bg-surface text-muted line-through opacity-50 hover:border-border"
+                        : "",
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                  >
+                    {value}
+                  </button>
+                );
+              })}
+            </div>
+          </fieldset>
+        );
+      })}
+
+      {/* Quantity stepper (UI only) */}
+      <div class="flex flex-col gap-2">
+        <span
+          id="qty-label"
+          class="font-mono text-xs uppercase tracking-[0.12em] text-muted"
+        >
+          Quantity
+        </span>
+        <div class="inline-flex items-center rounded-md border border-border bg-surface">
+          <button
+            type="button"
+            aria-label="Decrease quantity"
+            disabled={quantity <= 1}
+            onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+            class="flex h-10 w-10 items-center justify-center text-lg text-text transition-colors hover:bg-border/40 disabled:opacity-40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          >
+            −
+          </button>
+          <input
+            type="number"
+            min={1}
+            value={quantity}
+            aria-labelledby="qty-label"
+            onInput={(e) => {
+              const n = parseInt((e.target as HTMLInputElement).value, 10);
+              setQuantity(Number.isNaN(n) || n < 1 ? 1 : n);
+            }}
+            class="w-12 [appearance:textfield] bg-transparent text-center font-mono text-sm text-text focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+          />
+          <button
+            type="button"
+            aria-label="Increase quantity"
+            onClick={() => setQuantity((q) => q + 1)}
+            class="flex h-10 w-10 items-center justify-center text-lg text-text transition-colors hover:bg-border/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      {/* Add to cart. With a wired FoxyCart store this is a real Foxy form —
+          loader.js turns the submit into the sidecart + hosted checkout. The
+          product fields are server-pre-signed (tamper-proof); the quantity
+          rides along as the selected stepper value. Without a store (marketing
+          tenant / signed mode missing secret) it degrades to a disabled
+          placeholder. */}
+      {foxyCart ? (
+        <div class="flex flex-col gap-1.5">
+          <form action={foxyCart.action} method="post" target="_top">
+            {canBuy &&
+              cartPayload!.hidden.map((f) => (
+                <input key={f.name} type="hidden" name={f.name} value={f.value} />
+              ))}
+            {canBuy && (
+              <input
+                type="hidden"
+                name={cartPayload!.quantityName}
+                value={String(quantity)}
+              />
+            )}
+            <button
+              type="submit"
+              disabled={!canBuy}
+              aria-disabled={!canBuy}
+              class={`w-full rounded-full bg-primary px-6 py-3.5 font-display text-sm font-medium uppercase tracking-[0.08em] text-primary-contrast transition-opacity ${
+                canBuy
+                  ? "hover:opacity-90"
+                  : "cursor-not-allowed opacity-60"
+              }`}
+            >
+              {buyLabel}
+            </button>
+          </form>
+          <p class="text-center font-body text-xs text-muted">
+            Powered by FoxyCart
+          </p>
+        </div>
+      ) : (
+        <div class="flex flex-col gap-1.5">
+          <button
+            type="button"
+            disabled
+            aria-disabled="true"
+            class="w-full cursor-not-allowed rounded-full bg-primary px-6 py-3.5 font-display text-sm font-medium uppercase tracking-[0.08em] text-primary-contrast opacity-60"
+          >
+            Add to cart
+          </button>
+          <p class="text-center font-body text-xs text-muted">Checkout coming soon</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/storefront/src/components/marketing/CardGrid.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * <CardGrid> — a responsive grid of capability/industry/feature cards. One
+ * component, three visual variants (density + emphasis). Cards may link
+ * internally (base-path prefixed) or externally.
+ */
+import Section from "@/components/Section.astro";
+import type { CardGridBlock } from "@/lib/storyblok/content-model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  block: CardGridBlock;
+  basePath: string;
+}
+const { block, basePath } = Astro.props;
+const variant = block.variant ?? "capability";
+const cols =
+  variant === "industry"
+    ? "sm:grid-cols-2 lg:grid-cols-3"
+    : "sm:grid-cols-2 lg:grid-cols-4";
+const isExternal = (href: string) => /^https?:\/\//i.test(href);
+const hrefOf = (href: string) => (isExternal(href) ? href : withBase(basePath, href));
+---
+<Section id={block.anchor} eyebrow={block.eyebrow} title={block.title} tone="bg">
+  {block.subhead && (
+    <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
+      {block.subhead}
+    </p>
+  )}
+  <div class:list={["grid gap-5", cols]} data-reveal>
+    {block.cards.map((card) => {
+      const Tag = card.href ? "a" : "div";
+      const linkProps = card.href
+        ? {
+            href: hrefOf(card.href),
+            ...(isExternal(card.href)
+              ? { target: "_blank", rel: "noopener noreferrer" }
+              : {}),
+          }
+        : {};
+      return (
+        <Tag
+          {...linkProps}
+          class:list={[
+            "flex flex-col rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 transition-shadow",
+            card.href ? "hover:shadow-[var(--shadow-md)]" : "",
+          ]}
+        >
+          {card.icon && (
+            <span aria-hidden="true" class="text-2xl leading-none">{card.icon}</span>
+          )}
+          <h3 class="mt-3 font-display text-base font-semibold text-[var(--color-text)]">
+            {card.title}
+          </h3>
+          {card.body && (
+            <p class="mt-2 flex-1 text-sm text-[var(--color-muted)]">{card.body}</p>
+          )}
+          {card.meta && (
+            <p class="mt-4 font-mono text-[0.7rem] uppercase tracking-[0.08em] text-[var(--color-muted)]">
+              {card.meta}
+            </p>
+          )}
+        </Tag>
+      );
+    })}
+  </div>
+  {block.footnote && (
+    <p class="mt-8 text-center text-sm text-[var(--color-muted)]" data-reveal>
+      {block.footnote}
+    </p>
+  )}
+</Section>