@tokenoftrust/storefront-runner 1.3.4-rc.4 → 1.4.1

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

@@ -0,0 +1,295 @@
+/**
+ * <CheckoutComplianceGate> — the storefront's pre-handoff compliance ENFORCEMENT
+ * seam for regulated (age/nicotine) tenants.
+ *
+ * Checkout completion happens in the EXTERNAL managed cart, so the last moment the
+ * storefront controls is the add-to-cart submit. This island intercepts that
+ * submit for any `form[data-managed-cart]`, collects the ship-to state + 21+
+ * affirmation, and asks the server-authoritative gate (`/api/compliance/preflight`,
+ * F12) whether the cart may proceed. Only a `clear` decision releases the handoff;
+ * a hard block (restricted destination, flavored ban, per-order limit, failed /
+ * unconfigured verification) STOPS it and shows why. Fail-closed by construction:
+ * if the preflight itself errors on a regulated tenant, we do NOT hand off.
+ *
+ * This is progressive enhancement: the underlying form still posts the real
+ * (server-pre-signed) cart fields. If this island never hydrates, the form submits
+ * as before — so the gate hardens the flow without being a single point of failure
+ * for rendering the buy button. The REAL production enforcement is defense-in-depth
+ * in the managed-cart pre-cart webhook (Track B); this is the storefront-side check
+ * and the demo/preview's visible compliance checkpoint.
+ */
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import type { CartComplianceDecision } from "@tot/public-runtime";
+
+interface Props {
+  /** Absolute (base-path-aware) URL of the preflight endpoint. */
+  preflightUrl: string;
+  /** Minimum purchase age for the tenant (display only; the server enforces). */
+  minAge: number;
+}
+
+const AGE_KEY = "tot:age-affirmed";
+
+// US states/territories that can be a ship-to region. The server owns which are
+// prohibited; this list is only the picker's options.
+const US_REGIONS: Array<{ code: string; name: string }> = [
+  { code: "AL", name: "Alabama" }, { code: "AK", name: "Alaska" },
+  { code: "AZ", name: "Arizona" }, { code: "AR", name: "Arkansas" },
+  { code: "CA", name: "California" }, { code: "CO", name: "Colorado" },
+  { code: "CT", name: "Connecticut" }, { code: "DE", name: "Delaware" },
+  { code: "DC", name: "District of Columbia" }, { code: "FL", name: "Florida" },
+  { code: "GA", name: "Georgia" }, { code: "HI", name: "Hawaii" },
+  { code: "ID", name: "Idaho" }, { code: "IL", name: "Illinois" },
+  { code: "IN", name: "Indiana" }, { code: "IA", name: "Iowa" },
+  { code: "KS", name: "Kansas" }, { code: "KY", name: "Kentucky" },
+  { code: "LA", name: "Louisiana" }, { code: "ME", name: "Maine" },
+  { code: "MD", name: "Maryland" }, { code: "MA", name: "Massachusetts" },
+  { code: "MI", name: "Michigan" }, { code: "MN", name: "Minnesota" },
+  { code: "MS", name: "Mississippi" }, { code: "MO", name: "Missouri" },
+  { code: "MT", name: "Montana" }, { code: "NE", name: "Nebraska" },
+  { code: "NV", name: "Nevada" }, { code: "NH", name: "New Hampshire" },
+  { code: "NJ", name: "New Jersey" }, { code: "NM", name: "New Mexico" },
+  { code: "NY", name: "New York" }, { code: "NC", name: "North Carolina" },
+  { code: "ND", name: "North Dakota" }, { code: "OH", name: "Ohio" },
+  { code: "OK", name: "Oklahoma" }, { code: "OR", name: "Oregon" },
+  { code: "PA", name: "Pennsylvania" }, { code: "RI", name: "Rhode Island" },
+  { code: "SC", name: "South Carolina" }, { code: "SD", name: "South Dakota" },
+  { code: "TN", name: "Tennessee" }, { code: "TX", name: "Texas" },
+  { code: "UT", name: "Utah" }, { code: "VT", name: "Vermont" },
+  { code: "VA", name: "Virginia" }, { code: "WA", name: "Washington" },
+  { code: "WV", name: "West Virginia" }, { code: "WI", name: "Wisconsin" },
+  { code: "WY", name: "Wyoming" },
+];
+
+interface PendingLine {
+  form: HTMLFormElement;
+  handle: string;
+  sku?: string;
+  variantId?: string;
+  quantity: number;
+  title: string;
+}
+
+export default function CheckoutComplianceGate({ preflightUrl, minAge }: Props) {
+  const [pending, setPending] = useState<PendingLine | null>(null);
+  const [region, setRegion] = useState("");
+  const [affirmed, setAffirmed] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [decision, setDecision] = useState<CartComplianceDecision | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Intercept managed-cart form submits (capture phase, before the native POST).
+  useEffect(() => {
+    function onSubmit(e: Event) {
+      const form = e.target;
+      if (!(form instanceof HTMLFormElement)) return;
+      if (!form.matches("form[data-managed-cart]")) return;
+      // Already cleared by the gate → let this submission through.
+      if (form.dataset.complianceCleared === "1") return;
+      e.preventDefault();
+      e.stopPropagation();
+      const qtyInput = form.querySelector<HTMLInputElement>('input[name$="quantity" i], input[name="quantity"]');
+      const quantity = Math.max(1, parseInt(qtyInput?.value ?? "1", 10) || 1);
+      setPending({
+        form,
+        handle: form.dataset.productHandle ?? "",
+        sku: form.dataset.variantSku || undefined,
+        variantId: form.dataset.variantId || undefined,
+        quantity,
+        title: form.dataset.productTitle ?? "this item",
+      });
+      setDecision(null);
+      setError(null);
+      let pre = false;
+      try {
+        pre = localStorage.getItem(AGE_KEY) === "yes";
+      } catch {
+        /* storage disabled */
+      }
+      setAffirmed(pre);
+      document.documentElement.style.overflow = "hidden";
+    }
+    document.addEventListener("submit", onSubmit, true);
+    return () => document.removeEventListener("submit", onSubmit, true);
+  }, []);
+
+  const close = useCallback(() => {
+    setPending(null);
+    setDecision(null);
+    setError(null);
+    setLoading(false);
+    document.documentElement.style.overflow = "";
+  }, []);
+
+  const proceed = useCallback((line: PendingLine) => {
+    line.form.dataset.complianceCleared = "1";
+    document.documentElement.style.overflow = "";
+    setPending(null);
+    // requestSubmit re-runs submit; our listener now passes it through, and the
+    // managed-cart loader takes over the (still server-pre-signed) POST.
+    if (typeof line.form.requestSubmit === "function") line.form.requestSubmit();
+    else line.form.submit();
+  }, []);
+
+  const check = useCallback(async () => {
+    if (!pending) return;
+    setLoading(true);
+    setError(null);
+    setDecision(null);
+    try {
+      const res = await fetch(preflightUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          lines: [
+            {
+              handle: pending.handle,
+              sku: pending.sku,
+              variantId: pending.variantId,
+              quantity: pending.quantity,
+            },
+          ],
+          destination: region ? { region, country: "US" } : null,
+          ageAffirmed: affirmed,
+        }),
+      });
+      const data = (await res.json()) as { decision?: CartComplianceDecision };
+      const d = data.decision;
+      if (!d) {
+        // Fail closed: a regulated tenant never proceeds on an unreadable result.
+        setError(
+          "We couldn't confirm this order can ship. Please try again in a moment.",
+        );
+        return;
+      }
+      setDecision(d);
+      if (d.status === "clear") proceed(pending);
+    } catch {
+      setError(
+        "We couldn't reach our compliance check. For your safety, checkout is paused — please try again.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [pending, preflightUrl, region, affirmed, proceed]);
+
+  if (!pending) return null;
+
+  const blocks = decision?.blocks ?? [];
+  const adultSignature = decision?.requirements.adultSignature;
+
+  return (
+    <div
+      class="fixed inset-0 z-[110] 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="cgate-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) close();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        class="w-[min(32rem,100%)] rounded-[var(--radius-lg)] bg-[var(--color-surface)] p-7 text-left shadow-[var(--shadow-lg)]"
+      >
+        <p class="eyebrow eyebrow--tick mb-3 w-fit">Compliance check</p>
+        <h2 id="cgate-title" class="display-sm">
+          Confirm before checkout
+        </h2>
+        <p class="mt-2 text-sm text-[var(--color-muted)]">
+          This is an age-restricted order. We confirm your age and where it can
+          legally ship before sending you to secure checkout.
+        </p>
+
+        <div class="mt-5 flex flex-col gap-4">
+          <label class="flex flex-col gap-1.5">
+            <span class="font-mono text-xs uppercase tracking-[0.12em] text-[var(--color-muted)]">
+              Ship to state
+            </span>
+            <select
+              class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2.5 text-[var(--color-text)]"
+              value={region}
+              onChange={(e) => {
+                setRegion((e.target as HTMLSelectElement).value);
+                setDecision(null);
+              }}
+            >
+              <option value="">Select a state…</option>
+              {US_REGIONS.map((r) => (
+                <option key={r.code} value={r.code}>
+                  {r.name}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label class="flex items-start gap-2.5 text-sm text-[var(--color-text)]">
+            <input
+              type="checkbox"
+              class="mt-0.5 h-4 w-4"
+              checked={affirmed}
+              onChange={(e) => {
+                setAffirmed((e.target as HTMLInputElement).checked);
+                setDecision(null);
+              }}
+            />
+            <span>I confirm I am {minAge} or older.</span>
+          </label>
+        </div>
+
+        {/* Decision surface */}
+        {blocks.length > 0 && (
+          <div
+            class="mt-5 rounded-[var(--radius-md)] border border-[var(--color-sale)] bg-[color-mix(in_srgb,var(--color-sale)_8%,transparent)] px-4 py-3"
+            role="alert"
+          >
+            <p class="font-display text-sm font-semibold text-[var(--color-sale)]">
+              {decision?.status === "blocked"
+                ? "This order can't proceed"
+                : "One more step"}
+            </p>
+            <ul class="mt-1.5 list-disc space-y-1 pl-5 text-sm text-[var(--color-text)]">
+              {blocks.map((b, i) => (
+                <li key={i}>{b.message}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {error && (
+          <p
+            class="mt-5 rounded-[var(--radius-md)] border border-[var(--color-sale)] bg-[color-mix(in_srgb,var(--color-sale)_8%,transparent)] px-4 py-3 text-sm text-[var(--color-text)]"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+
+        {adultSignature && decision?.status !== "blocked" && (
+          <p class="mt-4 text-xs text-[var(--color-muted)]">
+            Adult signature (21+) is required on delivery for this order.
+          </p>
+        )}
+
+        <div class="mt-6 flex flex-wrap gap-3">
+          <button
+            type="button"
+            disabled={loading}
+            onClick={check}
+            class="rounded-full bg-[var(--color-primary)] px-6 py-3 font-display text-sm font-medium uppercase tracking-[0.08em] text-[var(--color-primary-contrast)] transition-opacity hover:opacity-90 disabled:opacity-60"
+          >
+            {loading ? "Checking…" : "Continue to checkout"}
+          </button>
+          <button
+            type="button"
+            onClick={close}
+            class="rounded-full border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] transition-colors hover:border-[var(--color-text)]"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -16,6 +16,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { CatalogImage } from "@tot/public-runtime";
 import { placeholderDataUri, isUsableImageUrl } from "@/lib/placeholder";
+import { resolveImage } from "@/lib/imageAttrs";
+import { cfImageUrl } from "@/lib/cfImage";
 
 interface Props {
   images: CatalogImage[];
@@ -27,27 +29,47 @@ interface Props {
 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,
+const isShopifyCdnUrl = (url: string): boolean =>
+  /\/\/cdn\.shopify\.com\//.test(url) || /\/cdn\/shop\//.test(url);
+
+/**
+ * Main-image src + responsive srcset. Delegates to the SHARED `resolveImage`
+ * decision (same as <Img> on the PLP) so rehosted (R2) images go through
+ * Cloudflare Image Resizing — `?width=` is a no-op on the R2 bucket, so the old
+ * per-island srcset silently served full-size bytes at every breakpoint.
+ */
+function mainImage(img: CatalogImage, title: string): { src: string; srcset?: string } {
+  return resolveImage({
+    src: img.url,
+    rehosted: img.rehosted,
     width: img.width ?? FALLBACK_W,
     height: img.height ?? FALLBACK_H,
+    seed: img.id || title,
     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(", ");
+/**
+ * Thumbnail src — a single small (160px, 2x of the 80px strip) request, so a
+ * thumbnail never downloads a full-size photo. Rehosted images resize via
+ * Cloudflare Image Resizing; referenced Shopify images via their native
+ * `?width=`; dead fixture URLs draw a deterministic placeholder.
+ */
+const THUMB_WIDTH = 160;
+function thumbSrc(img: CatalogImage, title: string): string {
+  if (!isUsableImageUrl(img.url, img.rehosted)) {
+    return placeholderDataUri({
+      seed: img.id || title,
+      width: img.width ?? FALLBACK_W,
+      height: img.height ?? FALLBACK_H,
+      label: title,
+    });
+  }
+  if (img.rehosted) return cfImageUrl(img.url, { width: THUMB_WIDTH });
+  if (isShopifyCdnUrl(img.url)) {
+    return `${img.url}${img.url.includes("?") ? "&" : "?"}width=${THUMB_WIDTH}`;
+  }
+  return img.url;
 }
 
 function prefersReducedMotion(): boolean {
@@ -156,6 +178,7 @@ export default function ImageGallery({
   const w = current.width ?? FALLBACK_W;
   const h = current.height ?? FALLBACK_H;
   const isLcp = index === 0 && !interacted;
+  const main = mainImage(current, title);
 
   return (
     <div class="flex flex-col gap-3 md:flex-row-reverse md:gap-4">
@@ -172,9 +195,9 @@ export default function ImageGallery({
           style={`aspect-ratio:${w}/${h};background:var(--color-border)`}
         >
           <img
-            src={srcFor(current, title)}
-            srcset={srcsetFor(current)}
-            sizes="(min-width: 768px) 45vw, 100vw"
+            src={main.src}
+            srcset={main.srcset}
+            sizes={main.srcset ? "(min-width: 768px) 45vw, 100vw" : undefined}
             alt={current.alt ?? title}
             width={w}
             height={h}
@@ -216,9 +239,7 @@ export default function ImageGallery({
                   style={`aspect-ratio:${tw}/${th};background:var(--color-border)`}
                 >
                   <img
-                    src={srcFor(img, title)}
-                    srcset={srcsetFor(img)}
-                    sizes="80px"
+                    src={thumbSrc(img, title)}
                     alt=""
                     width={tw}
                     height={th}

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

@@ -22,8 +22,10 @@ import type {
   CatalogVariant,
   ProductPurchaseOption,
   VariantCartPayload,
+  MembershipTierRule,
+  MembershipStackingPolicy,
 } from "@tot/public-runtime";
-import { purchaseOptionPrice } from "@tot/public-runtime";
+import { priceForPurchaseOption } from "@tot/public-runtime";
 import { formatPrice } from "@/lib/format";
 
 interface OptionDef {
@@ -37,6 +39,10 @@ interface Props {
   options: OptionDef[];
   currency: string;
   locale?: string;
+  /** Product handle/title — surfaced as form data-attributes so the checkout
+   * compliance gate (regulated tenants) can resolve the cart line server-side. */
+  productHandle?: string;
+  productTitle?: string;
   /**
    * Managed 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 checkout
@@ -48,6 +54,15 @@ interface Props {
     purchaseOptions: ProductPurchaseOption[];
     byVariantId: Record<string, Record<string, VariantCartPayload>>;
   };
+  /**
+   * Membership pricing (F10). Present only when an eligible member is resolved
+   * for this request (Phase 2 shopper login). Undefined → list pricing only,
+   * which is the Phase-1 anonymous behavior.
+   */
+  pricing?: {
+    membershipRule: MembershipTierRule;
+    stacking: MembershipStackingPolicy;
+  };
 }
 
 const LOW_STOCK_THRESHOLD = 5;
@@ -70,7 +85,10 @@ export default function VariantSelector({
   options,
   currency,
   locale,
+  productHandle,
+  productTitle,
   checkoutCart,
+  pricing,
 }: Props) {
   const sortedOptions = useMemo(
     () => [...options].sort((a, b) => a.position - b.position),
@@ -201,20 +219,35 @@ export default function VariantSelector({
     }
   }
 
-  const selectedPrice = selected
-    ? purchaseOptionPrice(selected.price, selectedPurchaseOption)
+  // Compose member + subscription pricing (F10). The pricing context carries the
+  // resolved member tier only when an eligible member was resolved server-side;
+  // otherwise it is a non-member and list pricing stands.
+  const pricingCtx = pricing
+    ? {
+        member: { isMember: true, tierId: pricing.membershipRule.tierId },
+        program: {
+          enabled: true,
+          tiers: [pricing.membershipRule],
+          stacking: pricing.stacking,
+        },
+      }
+    : { member: { isMember: false } };
+  const effectiveOption: ProductPurchaseOption =
+    selectedPurchaseOption ?? { id: "one_time", kind: "one_time", label: "One-time purchase" };
+  const priced = selected
+    ? priceForPurchaseOption(selected.price, effectiveOption, pricingCtx)
     : undefined;
+  const selectedPrice = priced?.price;
+  const memberApplied = priced?.appliedDiscounts.includes("member") ?? false;
   const compareAt = selected?.compare_at_price;
-  const purchaseOptionCompareAt =
-    selectedPrice !== undefined && selected && selectedPrice < selected.price
-      ? selected.price
-      : undefined;
+  const discountCompareAt = priced?.compareAt;
   const displayCompareAt =
-    compareAt !== undefined && selectedPrice !== undefined && compareAt > selectedPrice
-      ? compareAt
-      : purchaseOptionCompareAt;
+    selectedPrice !== undefined
+      ? compareAt !== undefined && compareAt > selectedPrice
+        ? compareAt
+        : discountCompareAt
+      : undefined;
   const showCompare =
-    selected !== undefined &&
     selectedPrice !== undefined &&
     displayCompareAt !== undefined &&
     displayCompareAt > selectedPrice;
@@ -249,6 +282,14 @@ export default function VariantSelector({
                   {formatPrice(displayCompareAt!, currency, locale)}
                 </span>
               )}
+              {memberApplied && (
+                <span
+                  data-member-price
+                  class="rounded-full bg-accent px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-primary-contrast"
+                >
+                  {pricing?.membershipRule.label ?? "Member"} price
+                </span>
+              )}
             </div>
             <p class={`font-mono text-xs uppercase tracking-[0.08em] ${stockClass}`}>
               {stockLabel}
@@ -412,7 +453,16 @@ export default function VariantSelector({
           placeholder. */}
       {checkoutCart ? (
         <div class="flex flex-col gap-1.5">
-          <form action={checkoutCart.action} method="post" target="_top">
+          <form
+            action={checkoutCart.action}
+            method="post"
+            target="_top"
+            data-managed-cart
+            data-product-handle={productHandle}
+            data-product-title={productTitle}
+            data-variant-id={selected?.id}
+            data-variant-sku={selected?.sku}
+          >
             {canBuy &&
               cartPayload!.hidden.map((f) => (
                 <input key={f.name} type="hidden" name={f.name} value={f.value} />

package/apps/storefront/src/components/plp/FacetSidebar.astro

@@ -71,7 +71,7 @@ const clearHref =
                   <a
                     href={href}
                     rel="nofollow"
-                    aria-pressed={isSel}
+                    aria-current={isSel ? "true" : undefined}
                     class:list={[
                       "flex items-center justify-between gap-3 rounded-[var(--radius-sm)] px-2 py-1 transition-colors",
                       isSel
@@ -123,7 +123,7 @@ const clearHref =
                 <a
                   href={href}
                   rel="nofollow"
-                  aria-pressed={isSel}
+                  aria-current={isSel ? "true" : undefined}
                   class:list={[
                     "flex items-center justify-between gap-3 rounded-[var(--radius-sm)] px-2 py-1 transition-colors",
                     isSel

package/apps/storefront/src/components/subscription/ManageSubscriptionEntry.astro

@@ -50,6 +50,7 @@ const { entries, eyebrow, heading, subhead } = Astro.props;
           <li>
             <a
               href={entry.href}
+              data-manage-action={entry.action}
               class="flex min-h-[44px] flex-col rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 transition-colors hover:border-[var(--color-primary)]"
             >
               <span class="font-display text-base font-semibold text-[var(--color-text)]">

package/apps/storefront/src/config/compliance/rulesets.ts

@@ -0,0 +1,79 @@
+/**
+ * Per-tenant compliance RULE DATA — the data-driven substance the enforcement
+ * engine (`@tot/public-runtime` compliance) evaluates. Keeping the rules here as
+ * DATA (not `if` branches in code) is the whole point: a jurisdiction change is a
+ * data edit reviewed against the ruleset shape, not a code change.
+ *
+ * ⚠️ LEGAL PROVENANCE: the state rules below are a REPRESENTATIVE starter set for
+ * the pilot vape tenants, not legal advice and not a guaranteed-current list. The
+ * authoritative flavor-ban / no-ship / per-order-limit / excise data and the PACT
+ * Act monthly FILING are the merchant's and their counsel's responsibility. Each
+ * ruleset carries `source` + `updatedAt` so this boundary stays explicit. Replace
+ * this data with the merchant's counsel-reviewed ruleset before a real go-live.
+ *
+ * The live verification PROVIDER is intentionally NOT set here — it is operational
+ * config resolved by `resolveTenantRuleset` from env (`TOT_VERIFICATION_PROVIDER`).
+ * A regulated tenant with no provider configured FAILS CLOSED (checkout blocks,
+ * evidence is not promotable), which is the correct safe default.
+ */
+import type { ComplianceRuleset } from "@tot/public-runtime";
+
+/**
+ * Shared vape/ENDS rule template. `tenantId` is filled per tenant. The state list
+ * models three enforcement axes as data: full no-ship, flavored-ENDS ban, and a
+ * per-order unit cap. `verification.provider` is deliberately omitted (see header).
+ */
+function vapeRuleset(tenantId: string): ComplianceRuleset {
+  return {
+    tenantId,
+    minAge: 21,
+    verification: {
+      required: true,
+      minAge: 21,
+      // provider: set at resolve time from operational config (fail-closed if absent).
+    },
+    excise: {
+      required: true,
+      handling: "managed-cart",
+      note:
+        "State vapor excise materializes in the managed cart via the pre-cart " +
+        "webhook + tot_excise_tax coupon (Track B). If that path is unavailable, " +
+        "set handling: 'unavailable' so checkout fails closed rather than shipping untaxed.",
+    },
+    pactAct: {
+      enabled: true,
+      adultSignatureRequired: true,
+      // PACT Act bars USPS from carrying ENDS; carrier selection is merchant-external.
+      prohibitedCarriers: ["USPS"],
+      reportingRequired: true,
+    },
+    // A conservative federal-floor per-order cap; states below can tighten it.
+    defaultPerOrderUnitLimit: 10,
+    states: [
+      // --- Full DTC no-ship (state prohibits/does not license DTC vapor shipment) ---
+      { region: "UT", banAll: true, note: "UT restricts DTC vapor shipment" },
+      { region: "VT", banAll: true, note: "VT prohibits DTC e-cigarette shipment to consumers" },
+      { region: "AR", banAll: true, note: "AR restricts DTC vapor shipment" },
+      // --- Flavored-ENDS bans (tobacco/menthol still permitted) ---
+      { region: "MA", banFlavored: true, note: "MA flavored tobacco/ENDS ban" },
+      { region: "NY", banFlavored: true, note: "NY flavored e-cigarette ban" },
+      { region: "NJ", banFlavored: true, note: "NJ flavored vape ban" },
+      { region: "RI", banFlavored: true, note: "RI flavored ENDS ban" },
+      { region: "CA", banFlavored: true, note: "CA SB-793 flavored tobacco ban" },
+      // --- Tighter per-order caps ---
+      { region: "ME", perOrderUnitLimit: 5, adultSignatureRequired: true, note: "ME per-order limit" },
+      { region: "CT", perOrderUnitLimit: 5, note: "CT per-order limit" },
+    ],
+    updatedAt: "2026-07-23",
+    source:
+      "ToT storefront pilot starter ruleset (representative, NOT legal advice). " +
+      "Merchant + counsel own the authoritative rule data and PACT filings.",
+  };
+}
+
+/** Ruleset data keyed by tenant_id. Regulated tenants MUST have an entry. */
+export const COMPLIANCE_RULESETS: Record<string, ComplianceRuleset> = {
+  "sample-store.com": vapeRuleset("sample-store.com"),
+  "sample-store-2.net": vapeRuleset("sample-store-2.net"),
+  "sample-store-3.com": vapeRuleset("sample-store-3.com"),
+};

package/apps/storefront/src/config/storeName.ts

@@ -0,0 +1,34 @@
+/**
+ * Best-effort friendly store name for a tenant's appDomain, used to humanize the
+ * developer magic-link invite — the email subject/body ("Your invitation to …")
+ * and the /auth/magic "Signing in to …" card, which otherwise fall back to the
+ * bare appDomain (the "generic" tell in the deployed invite UX).
+ *
+ * Resolves via the SAME canonical TenantResolver the middleware uses on every
+ * request (config/resolver), so the name is only ever the tenant's real
+ * displayName — never fabricated. Returns undefined when no tenant resolves or it
+ * carries no displayName; callers then omit `storeName` and the flow shows the
+ * appDomain as before. NEVER throws: a display-label lookup must not be able to
+ * break sending (or resending) an invite.
+ *
+ * Lives in the config layer (not lib) so this appDomain→displayName lookup can
+ * consume the CONCRETE resolver behind the `tenancy-resolver-fence`
+ * (.dependency-cruiser.cjs) — mirroring `config/adminTargetTenant` and
+ * `config/previewTenantLookup`, the other sanctioned resolver-consuming seams —
+ * so a single-tenant extraction stays a drop-in (the resolver is swapped, not the
+ * callers).
+ */
+import { getTenantResolver } from "@/config/resolver";
+
+export async function resolveStoreName(appDomain: string): Promise<string | undefined> {
+  const domain = appDomain.trim();
+  if (!domain) return undefined;
+  try {
+    const resolver = await getTenantResolver();
+    const tenant = await resolver.resolveStrict(domain);
+    const name = tenant?.displayName?.trim();
+    return name || undefined;
+  } catch {
+    return undefined;
+  }
+}