@tokenoftrust/storefront-runner 3.12.3 → 4.0.0

package/apps/storefront/public/shared/commerce-chrome.css

@@ -454,10 +454,16 @@ a.article-card__tag:hover { text-decoration: underline; }
 .site-footer[data-variant="light-collapsible"] .footer-disclaimer p { color: var(--color-text); }
 
 /* --- Reveal-on-scroll (raw-chrome markup uses .reveal/.in) ---------------- */
-.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
+/* Unmarked .reveal stays visible. Opacity 0 applies only with .is-below,
+   the same below-the-fold mark as [data-reveal], so an in-viewport block
+   is not hidden before a script adds .in. */
+.reveal { opacity: 1; }
+.reveal.is-below { transition: opacity .5s ease, transform .5s ease; }
+.reveal.is-below:not(.in) { opacity: 0; transform: translateY(18px); }
 .reveal.in { opacity: 1; transform: none; }
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
+  .reveal,
+  .reveal.is-below:not(.in) { opacity: 1; transform: none; transition: none; }
 }
 
 /* --- Responsive ----------------------------------------------------------- */

package/apps/storefront/src/layouts/Layout.astro

@@ -582,14 +582,26 @@ const footerWidgets = await renderWidgetSlot(
       mountWidgetPostMessageBridge();
     </script>
 
-    {/* Scroll-reveal + analytics pageview hook. ~0.5KB, no framework. */}
+    {/* Scroll-reveal. Initial-viewport blocks stay visible (no .is-below).
+        Only blocks below the fold start hidden, then .is-in shows them. */}
     <script>
-      // Reveal-on-scroll (respects reduced motion via CSS).
+      // Reveal-on-scroll. Reduced motion stays visible via CSS and .is-in.
       const els = document.querySelectorAll("[data-reveal]");
-      if (
-        els.length &&
-        !window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      ) {
+      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const fold = window.innerHeight || document.documentElement.clientHeight || 0;
+      const below: Element[] = [];
+      for (const el of els) {
+        const rect = el.getBoundingClientRect();
+        const laidOut = rect.width > 0 && rect.height > 0;
+        const inView = !laidOut || fold <= 0 || (rect.bottom > 0 && rect.top < fold);
+        if (reduce || inView || typeof IntersectionObserver !== "function") {
+          el.classList.add("is-in");
+        } else {
+          el.classList.add("is-below");
+          below.push(el);
+        }
+      }
+      if (below.length) {
         const io = new IntersectionObserver(
           (entries) => {
             for (const e of entries) {
@@ -601,9 +613,7 @@ const footerWidgets = await renderWidgetSlot(
           },
           { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
         );
-        els.forEach((el) => io.observe(el));
-      } else {
-        els.forEach((el) => el.classList.add("is-in"));
+        for (const el of below) io.observe(el);
       }
     </script>
 

package/apps/storefront/src/lib/access/fixtures/settings.ts

@@ -51,13 +51,10 @@ function computeSettingsViewModel(envelope: AdminTenantEnvelope): SettingsViewMo
     aiPolicyMode: "approval_required",
     internalTenantPickerEnabled: true,
     auditTrail,
-    // The admin console renders from mock data; the checkout-styling editor
-    // starts from the neutral baseline (an un-styled tenant). A real published
-    // override is resolved server-side via resolveCheckoutStyle at render time
-    // once the read path is wired in — until then the editor shows the default,
-    // and SAVE is already live (POST /api/admin/checkout-style publishes to the
-    // versioned spine). Cloning keeps the shared DEFAULT_CHECKOUT_STYLE constant
-    // immutable if a caller mutates the view model.
+    // The neutral baseline (an un-styled tenant). The Settings tab renders the
+    // store's draft (resolveCheckoutStyle on `test`) in its place, and falls
+    // back to this only when the store cannot be read. Cloning keeps the shared
+    // DEFAULT_CHECKOUT_STYLE constant immutable if a caller mutates the view model.
     checkoutStyle: {
       ...DEFAULT_CHECKOUT_STYLE,
       colors: { ...DEFAULT_CHECKOUT_STYLE.colors },

package/apps/storefront/src/lib/checkout/browser/checkoutRequirementsForm.ts

@@ -1,16 +1,17 @@
 /** Browser wiring for the /admin "Checkout requirements" form: collect the switches, POST, report. */
 
+import { SETTING_SAVED_EVENT, savedMessage } from "./settingDraftActions";
+
 type StatusState = "ok" | "err";
 
 interface SaveResponse {
   readBack?: string;
+  inEffect?: string[];
   notice?: string;
   error?: string;
   errors?: unknown;
 }
 
-export const SAVED_IN_EFFECT = "Saved. In effect on your preview and live store.";
-
 export function saveFailureMessage(status: number, data: SaveResponse): string {
   if (Array.isArray(data.errors) && data.errors.length) return data.errors.join(" ");
   return data.error || `Save failed (${status})`;
@@ -18,12 +19,13 @@ export function saveFailureMessage(status: number, data: SaveResponse): string {
 
 /**
  * What the form reports for a save response. "Saved" only when the server read the save back
- * through the readers' own resolver (`readBack: "in-effect"`); an accepted save the edge has not
- * picked up yet reports its notice without the ok state.
+ * through the readers' own resolver (`readBack: "in-effect"`), naming where it is in effect: the
+ * draft the preview reads, or also live on a store with no live site. An accepted save the edge has
+ * not picked up yet reports its notice without the ok state.
  */
 export function saveResultStatus(httpOk: boolean, status: number, data: SaveResponse): { message: string; state?: StatusState } {
   if (!httpOk) return { message: saveFailureMessage(status, data), state: "err" };
-  if (data.readBack === "in-effect") return { message: SAVED_IN_EFFECT, state: "ok" };
+  if (data.readBack === "in-effect") return { message: savedMessage(data.inEffect), state: "ok" };
   if (data.readBack === "pending") return { message: data.notice || "Accepted. Reload to confirm it is in effect." };
   return { message: "The save could not be confirmed in effect. Reload to check.", state: "err" };
 }
@@ -60,6 +62,7 @@ export function mountCheckoutRequirementsForm(form: HTMLElement): void {
       }
       const result = saveResultStatus(res.ok, res.status, data);
       setStatus(result.message, result.state);
+      if (res.ok) document.dispatchEvent(new CustomEvent(SETTING_SAVED_EVENT, { detail: { kind: "checkout-requirements" } }));
     } catch {
       setStatus("Save failed — network error", "err");
     } finally {

package/apps/storefront/src/lib/checkout/browser/checkoutStyleForm.ts

@@ -0,0 +1,110 @@
+/** Browser wiring for the /admin "Checkout styling" editor: live preview, collect the fields, POST, report. */
+
+import { saveResultStatus } from "./checkoutRequirementsForm";
+import { SETTING_SAVED_EVENT } from "./settingDraftActions";
+
+type StatusState = "ok" | "err";
+
+/** data-cs-field → the preview CSS custom property it drives. */
+const CSS_VAR: Readonly<Record<string, string>> = {
+  "colors.background": "--cs-bg",
+  "colors.surface": "--cs-surface",
+  "colors.primary": "--cs-primary",
+  "colors.primaryContrast": "--cs-primary-contrast",
+  "colors.accent": "--cs-accent",
+  "colors.text": "--cs-text",
+  "typography.fontFamily": "--cs-font",
+  "typography.baseSize": "--cs-size",
+  "button.radius": "--cs-radius",
+};
+
+export interface CheckoutStyleFields {
+  colors: Record<string, string>;
+  typography: Record<string, string>;
+  button: Record<string, string>;
+  logoUrl?: string;
+}
+
+/** The CheckoutStyle partial the save endpoint validates, from `[field path, value]` pairs. */
+export function collectCheckoutStyle(entries: Iterable<readonly [string, string]>): CheckoutStyleFields {
+  const style: CheckoutStyleFields = { colors: {}, typography: {}, button: {} };
+  for (const [path, raw] of entries) {
+    const value = raw.trim();
+    if (path === "logoUrl") {
+      if (value) style.logoUrl = value;
+      continue;
+    }
+    const dot = path.indexOf(".");
+    const group = path.slice(0, dot);
+    if (group === "colors" || group === "typography" || group === "button") style[group][path.slice(dot + 1)] = value;
+  }
+  return style;
+}
+
+export function mountCheckoutStyleForm(form: HTMLElement): void {
+  const endpoint = form.dataset.endpoint || "/api/preview/checkout-style";
+  // The tenant this save targets: the routed tenant for a merchant, or the staff picker's
+  // "operating as" tenant. The endpoint re-authorizes it.
+  const targetTenant = form.dataset.targetTenant || "";
+  const preview = form.querySelector<HTMLElement>("[data-cs-preview]");
+  const logoImg = form.querySelector<HTMLImageElement>("[data-cs-logo]");
+  const status = form.querySelector<HTMLElement>("[data-checkout-style-status]");
+  const saveBtn = form.querySelector<HTMLButtonElement>("[data-checkout-style-save]");
+  const fields = Array.from(form.querySelectorAll<HTMLInputElement | HTMLSelectElement>("[data-cs-field]"));
+
+  const setStatus = (message: string, state?: StatusState) => {
+    if (!status) return;
+    status.textContent = message;
+    if (state) status.dataset.state = state;
+    else delete status.dataset.state;
+  };
+
+  // Reflect edits into the preview live. Inline style ATTRIBUTES are the one CSP-tolerated
+  // relaxation (style-src-attr 'unsafe-inline'); no <style> tag is injected.
+  const applyPreview = () => {
+    for (const el of fields) {
+      const path = el.dataset.csField ?? "";
+      const value = el.value.trim();
+      const cssVar = CSS_VAR[path];
+      if (cssVar && preview) preview.style.setProperty(cssVar, value);
+      const swatch = form.querySelector<HTMLElement>(`[data-cs-swatch="${path}"]`);
+      if (swatch) swatch.style.background = value;
+      if (path === "logoUrl" && logoImg) {
+        if (value) logoImg.src = value;
+        else logoImg.removeAttribute("src");
+        logoImg.hidden = !value;
+      }
+    }
+  };
+  for (const el of fields) el.addEventListener("input", applyPreview);
+
+  saveBtn?.addEventListener("click", async () => {
+    setStatus("Saving…");
+    saveBtn.disabled = true;
+    try {
+      const style = collectCheckoutStyle(fields.map((el) => [el.dataset.csField ?? "", el.value] as const));
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(targetTenant ? { ...style, targetTenant } : style),
+      });
+      let data: Parameters<typeof saveResultStatus>[2] & { versionId?: unknown } = {};
+      try {
+        data = (await res.json()) as typeof data;
+      } catch {
+        // non-JSON error body
+      }
+      const result = saveResultStatus(res.ok, res.status, data);
+      const version = result.state === "ok" && typeof data.versionId === "string" ? ` (version ${data.versionId.slice(0, 8)})` : "";
+      setStatus(result.message + version, result.state);
+      if (res.ok) document.dispatchEvent(new CustomEvent(SETTING_SAVED_EVENT, { detail: { kind: "checkout-style" } }));
+    } catch {
+      setStatus("Save failed — network error", "err");
+    } finally {
+      saveBtn.disabled = false;
+    }
+  });
+
+  // The preview coupon link is illustrative only; don't navigate.
+  form.querySelector("[data-checkout-styling-noop]")?.addEventListener("click", (e) => e.preventDefault());
+}

package/apps/storefront/src/lib/checkout/browser/settingDraftActions.ts

@@ -0,0 +1,367 @@
+/**
+ * Browser wiring for operational settings' draft/live state in /admin.
+ *
+ * - Under each Settings panel, one setting's block: "Live" when the draft equals live, otherwise
+ *   the pending changes in plain words with Publish to live and Discard draft.
+ * - On the Publish tab, "Settings waiting to go live": every pending setting with its changes,
+ *   Publish settings, and Roll back to a prior live value. Each pending setting carries
+ *   `[data-settings-pin]` with the versionIds it shows, which the publish-live dialog pins.
+ *
+ * Each action echoes back the versionIds shown, so the server refuses it when the draft or live
+ * value moved since. A save announces itself with `SETTING_SAVED_EVENT`, and the blocks re-read.
+ */
+
+export const SETTING_SAVED_EVENT = "operational-setting:saved";
+
+export interface SettingChangeView {
+  label: string;
+  live: string;
+  draft: string;
+}
+
+export interface SettingHistoryView {
+  versionId: string;
+  at: string;
+}
+
+export interface SettingStatusView {
+  kind: string;
+  title?: string;
+  path?: string;
+  draftVersionId: string | null;
+  liveVersionId: string | null;
+  pending: boolean;
+  changes: SettingChangeView[];
+  history?: SettingHistoryView[];
+}
+
+interface StatusResponse {
+  hasLiveSite?: boolean;
+  settings?: SettingStatusView[];
+}
+
+interface ActionResponse {
+  readBack?: string;
+  notice?: string;
+  error?: string;
+  settings?: StatusResponse;
+}
+
+type StatusState = "ok" | "err";
+
+/** "Enforce compliance rules: live off → draft on". */
+export function changeSentence(change: SettingChangeView): string {
+  return `${change.label}: live ${change.live} → draft ${change.draft}`;
+}
+
+/** Tell the other settings blocks on the page that a setting's draft or live value changed. */
+export function announceSettingChanged(kind: string): void {
+  document.dispatchEvent(new CustomEvent(SETTING_SAVED_EVENT, { detail: { kind } }));
+}
+
+/** A prior live value, by when it went live: "Live from 2026-10-24 09:12 UTC". */
+export function historyLabel(entry: SettingHistoryView): string {
+  const at = new Date(entry.at);
+  const when = Number.isNaN(at.getTime()) ? entry.at : `${at.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+  return `Live from ${when}`;
+}
+
+/** What a save reports, by the envs it is in effect on. */
+export function savedMessage(inEffect: readonly string[] | undefined): string {
+  return inEffect?.includes("live")
+    ? "Saved. In effect on your preview and live store."
+    : "Saved to your draft. Your preview shows it; publish it to put it on your live store.";
+}
+
+export function publishBody(setting: SettingStatusView, targetTenant: string): Record<string, unknown> {
+  return {
+    kind: setting.kind,
+    action: "publish",
+    versionId: setting.draftVersionId,
+    expectedLiveVersionId: setting.liveVersionId,
+    ...(targetTenant ? { targetTenant } : {}),
+  };
+}
+
+export function rollbackBody(setting: SettingStatusView, versionId: string, targetTenant: string): Record<string, unknown> {
+  return {
+    kind: setting.kind,
+    action: "rollback",
+    versionId,
+    expectedLiveVersionId: setting.liveVersionId,
+    ...(targetTenant ? { targetTenant } : {}),
+  };
+}
+
+export function discardBody(setting: SettingStatusView, targetTenant: string): Record<string, unknown> {
+  return {
+    kind: setting.kind,
+    expectedDraftVersionId: setting.draftVersionId,
+    ...(targetTenant ? { targetTenant } : {}),
+  };
+}
+
+/** What a publish, rollback or discard reports. "Done" only when the server read it back in effect. */
+export function actionResultStatus(
+  action: "publish" | "rollback" | "discard",
+  httpOk: boolean,
+  status: number,
+  data: ActionResponse,
+): { message: string; state?: StatusState } {
+  if (!httpOk) return { message: data.error || `That didn't work (${status}). Reload and try again.`, state: "err" };
+  if (data.readBack === "pending") return { message: data.notice || "Accepted. Reload to confirm it is in effect." };
+  if (data.readBack !== "in-effect") return { message: "It could not be confirmed in effect. Reload to check.", state: "err" };
+  if (action === "discard") return { message: "Draft discarded. Your preview shows the live value again.", state: "ok" };
+  if (action === "rollback") return { message: "Rolled back. Your live store reads the version you picked.", state: "ok" };
+  return { message: "Published. Your live store reads it now.", state: "ok" };
+}
+
+async function readJson<T>(res: Response): Promise<T> {
+  try {
+    return (await res.json()) as T;
+  } catch {
+    return {} as T;
+  }
+}
+
+function readSetting(el: HTMLElement): SettingStatusView {
+  return {
+    kind: el.dataset.kind ?? "",
+    draftVersionId: el.dataset.draftVersionId || null,
+    liveVersionId: el.dataset.liveVersionId || null,
+    pending: el.dataset.pending === "true",
+    changes: [],
+  };
+}
+
+/** Render a status into the block's existing markup: text only, never HTML. */
+export function renderSettingStatus(el: HTMLElement, setting: SettingStatusView): void {
+  el.dataset.draftVersionId = setting.draftVersionId ?? "";
+  el.dataset.liveVersionId = setting.liveVersionId ?? "";
+  el.dataset.pending = setting.pending ? "true" : "false";
+  const live = el.querySelector<HTMLElement>("[data-setting-draft-live]");
+  const pending = el.querySelector<HTMLElement>("[data-setting-draft-pending]");
+  const list = el.querySelector<HTMLElement>("[data-setting-draft-changes]");
+  if (live) live.hidden = setting.pending;
+  if (pending) pending.hidden = !setting.pending;
+  if (list) {
+    list.replaceChildren(
+      ...setting.changes.map((change) => {
+        const li = document.createElement("li");
+        li.textContent = changeSentence(change);
+        return li;
+      }),
+    );
+  }
+}
+
+export function mountSettingDraftStatus(el: HTMLElement): void {
+  const endpoint = el.dataset.endpoint || "/api/preview/settings-live";
+  const targetTenant = el.dataset.targetTenant || "";
+  const status = el.querySelector<HTMLElement>("[data-setting-draft-status]");
+  const buttons = [...el.querySelectorAll<HTMLButtonElement>("[data-setting-draft-publish], [data-setting-draft-discard]")];
+  const setStatus = (message: string, state?: StatusState) => {
+    if (!status) return;
+    status.textContent = message;
+    if (state) status.dataset.state = state;
+    else delete status.dataset.state;
+  };
+  const apply = (data: StatusResponse | undefined) => {
+    const next = data?.settings?.find((s) => s.kind === el.dataset.kind);
+    if (next) renderSettingStatus(el, next);
+  };
+  const refresh = async (): Promise<string | null> => {
+    try {
+      apply(await readStatus(endpoint, targetTenant));
+      return null;
+    } catch (e) {
+      return reasonOf(e);
+    }
+  };
+  const act = async (action: "publish" | "discard") => {
+    const setting = readSetting(el);
+    setStatus(action === "publish" ? "Publishing…" : "Discarding…");
+    for (const b of buttons) b.disabled = true;
+    try {
+      const res = await fetch(endpoint, {
+        method: action === "publish" ? "POST" : "DELETE",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(action === "publish" ? publishBody(setting, targetTenant) : discardBody(setting, targetTenant)),
+      });
+      const data = await readJson<ActionResponse>(res);
+      let result = actionResultStatus(action, res.ok, res.status, data);
+      if (res.ok) apply(data.settings);
+      else result = withStale(result, await refresh());
+      setStatus(result.message, result.state);
+      if (res.ok) announceSettingChanged(el.dataset.kind ?? "");
+      // The form above still shows the discarded draft; reload it onto the value the preview reads now.
+      if (res.ok && action === "discard") window.location.reload();
+    } catch {
+      setStatus("That didn't work — network error", "err");
+    } finally {
+      for (const b of buttons) b.disabled = false;
+    }
+  };
+  el.querySelector("[data-setting-draft-publish]")?.addEventListener("click", () => void act("publish"));
+  el.querySelector("[data-setting-draft-discard]")?.addEventListener("click", () => void act("discard"));
+  document.addEventListener(SETTING_SAVED_EVENT, (event) => {
+    if ((event as CustomEvent<{ kind?: string }>).detail?.kind !== el.dataset.kind) return;
+    void refresh().then((stale) => stale && setStatus(staleMessage(stale), "err"));
+  });
+}
+
+function statusSetter(el: Element | null) {
+  return (message: string, state?: StatusState) => {
+    if (!(el instanceof HTMLElement)) return;
+    el.textContent = message;
+    if (state) el.dataset.state = state;
+    else delete el.dataset.state;
+  };
+}
+
+const reasonOf = (e: unknown): string => (e instanceof Error ? e.message : String(e));
+
+const staleMessage = (reason: string): string => `Could not refresh the settings status (${reason}). Reload the page before acting on it.`;
+
+/** An action's result, told that the status shown beside it could not be refreshed. */
+function withStale(result: { message: string; state?: StatusState }, stale: string | null): { message: string; state?: StatusState } {
+  return stale ? { message: `${result.message} ${staleMessage(stale)}`, state: "err" } : result;
+}
+
+/** The settings status; throws with the reason when it cannot be read. */
+export async function readStatus(endpoint: string, targetTenant: string): Promise<StatusResponse> {
+  const query = targetTenant ? `?targetTenant=${encodeURIComponent(targetTenant)}` : "";
+  const res = await fetch(`${endpoint}${query}`, { headers: { accept: "application/json" } });
+  const data = await readJson<StatusResponse & { error?: string }>(res);
+  if (!res.ok || !Array.isArray(data.settings)) throw new Error(data.error ?? `HTTP ${res.status}`);
+  return data;
+}
+
+/** Render the Publish tab's pending list and rollback pickers: text only, never HTML. */
+export function renderSettingsGoLive(el: HTMLElement, status: StatusResponse): void {
+  const settings = status.settings ?? [];
+  const pending = settings.filter((s) => s.pending);
+  const list = el.querySelector<HTMLElement>("[data-settings-go-live-list]");
+  const none = el.querySelector<HTMLElement>("[data-settings-go-live-none]");
+  const publish = el.querySelector<HTMLButtonElement>("[data-settings-go-live-publish]");
+  if (list) {
+    list.replaceChildren(
+      ...pending.map((setting) => {
+        const li = document.createElement("li");
+        li.dataset.settingsPin = "";
+        li.dataset.kind = setting.kind;
+        li.dataset.settingsPath = setting.path ?? "";
+        li.dataset.draftVersionId = setting.draftVersionId ?? "";
+        li.dataset.liveVersionId = setting.liveVersionId ?? "";
+        const title = document.createElement("b");
+        title.textContent = setting.title ?? setting.kind;
+        const changes = document.createElement("ul");
+        changes.replaceChildren(
+          ...setting.changes.map((change) => {
+            const item = document.createElement("li");
+            item.textContent = changeSentence(change);
+            return item;
+          }),
+        );
+        li.append(title, changes);
+        return li;
+      }),
+    );
+  }
+  if (none) none.hidden = pending.length > 0;
+  if (publish) publish.hidden = pending.length === 0;
+  for (const row of el.querySelectorAll<HTMLElement>("[data-settings-rollback]")) {
+    const setting = settings.find((s) => s.kind === row.dataset.kind);
+    const select = row.querySelector<HTMLSelectElement>("select");
+    row.dataset.liveVersionId = setting?.liveVersionId ?? "";
+    const history = setting?.history ?? [];
+    row.hidden = history.length === 0;
+    if (select) {
+      select.replaceChildren(
+        ...history.map((entry) => {
+          const option = document.createElement("option");
+          option.value = entry.versionId;
+          option.textContent = historyLabel(entry);
+          return option;
+        }),
+      );
+    }
+  }
+}
+
+/** The Publish tab's "Settings waiting to go live" block. */
+export function mountSettingsGoLive(el: HTMLElement): void {
+  const endpoint = el.dataset.endpoint || "/api/preview/settings-live";
+  const targetTenant = el.dataset.targetTenant || "";
+  const setStatus = statusSetter(el.querySelector("[data-settings-go-live-status]"));
+  const buttons = () => [...el.querySelectorAll<HTMLButtonElement>("button")];
+  const refresh = async (): Promise<string | null> => {
+    try {
+      renderSettingsGoLive(el, await readStatus(endpoint, targetTenant));
+      return null;
+    } catch (e) {
+      return reasonOf(e);
+    }
+  };
+  const post = async (body: Record<string, unknown>) => {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    return { res, data: await readJson<ActionResponse>(res) };
+  };
+  const run = async (work: () => Promise<{ message: string; state?: StatusState }>) => {
+    for (const b of buttons()) b.disabled = true;
+    let result: { message: string; state?: StatusState };
+    try {
+      result = await work();
+    } catch {
+      result = { message: "That didn't work — network error", state: "err" };
+    }
+    const shown = withStale(result, await refresh());
+    setStatus(shown.message, shown.state);
+    for (const b of buttons()) b.disabled = false;
+    for (const row of el.querySelectorAll<HTMLElement>("[data-settings-rollback]")) announceSettingChanged(row.dataset.kind ?? "");
+  };
+  el.querySelector("[data-settings-go-live-publish]")?.addEventListener("click", () =>
+    void run(async () => {
+      // Exactly the drafts this block shows; each is CAS against the live value shown beside it.
+      const pins = [...el.querySelectorAll<HTMLElement>("[data-settings-pin]")];
+      setStatus("Publishing settings…");
+      let last: { message: string; state?: StatusState } = { message: "Nothing to publish." };
+      for (const pin of pins) {
+        const setting: SettingStatusView = {
+          kind: pin.dataset.kind ?? "",
+          draftVersionId: pin.dataset.draftVersionId || null,
+          liveVersionId: pin.dataset.liveVersionId || null,
+          pending: true,
+          changes: [],
+        };
+        const { res, data } = await post(publishBody(setting, targetTenant));
+        last = actionResultStatus("publish", res.ok, res.status, data);
+        if (last.state !== "ok") return last;
+      }
+      return pins.length > 1 ? { message: "Published. Your live store reads these settings now.", state: "ok" } : last;
+    }),
+  );
+  for (const row of el.querySelectorAll<HTMLElement>("[data-settings-rollback]")) {
+    row.querySelector("[data-settings-rollback-apply]")?.addEventListener("click", () =>
+      void run(async () => {
+        const versionId = row.querySelector<HTMLSelectElement>("select")?.value;
+        if (!versionId) return { message: "Pick a version to roll back to.", state: "err" };
+        setStatus("Rolling back…");
+        const setting: SettingStatusView = {
+          kind: row.dataset.kind ?? "",
+          draftVersionId: null,
+          liveVersionId: row.dataset.liveVersionId || null,
+          pending: false,
+          changes: [],
+        };
+        const { res, data } = await post(rollbackBody(setting, versionId, targetTenant));
+        return actionResultStatus("rollback", res.ok, res.status, data);
+      }),
+    );
+  }
+  document.addEventListener(SETTING_SAVED_EVENT, () => void refresh().then((stale) => stale && setStatus(staleMessage(stale), "err")));
+}

package/apps/storefront/src/lib/checkout/commerce/checkoutRequirements.ts

@@ -4,8 +4,10 @@
  *
  * They are merchant-operated commerce settings (ADR 0035 "operational"), saved as the
  * tenant-owned artifact `tenants/<id>/checkout-requirements.json` to the store's operational
- * selection. A save is in effect at once on the store's preview AND its live store — every
- * reader resolves it through `resolveArtifactSelection`, with no promote. Every switch defaults
+ * selection. A save writes the draft (`test`), which the store's preview reads; the live store
+ * reads the published value (`live`) until the owner publishes the draft. A store with no live
+ * site has nothing to protect, so its save writes both. Every reader resolves the setting through
+ * `resolveArtifactSelection` for its own env. Every switch defaults
  * off and can only make checkout stricter, so no write can weaken what the platform enforces.
  * They apply only while the store checks out on the shared test store; a store with its own
  * checkout store, and production, keep the full fail-closed contract regardless of what is saved here.

package/apps/storefront/src/styles/global.css

@@ -335,18 +335,30 @@
   h2:is(.display-xl, .display-lg, .display-md) { font-size: var(--heading-h2, var(--display-size)); }
   h3:is(.display-xl, .display-lg, .display-md) { font-size: var(--heading-h3, var(--display-size)); }
 
-  /* Tasteful scroll-reveal; opt-in via [data-reveal], JS toggles .is-in. */
+  /* Scroll-reveal only after the script marks a block below the fold.
+     An unmarked [data-reveal] stays at opacity 1, so a block already in the
+     initial viewport is visible with no IntersectionObserver and no tenant flag. */
   [data-reveal] {
+    opacity: 1;
+  }
+  [data-reveal].is-below {
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  [data-reveal].is-below:not(.is-in) {
     opacity: 0;
     transform: translateY(14px);
-    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
   [data-reveal].is-in {
     opacity: 1;
     transform: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    [data-reveal] { opacity: 1; transform: none; }
+    [data-reveal],
+    [data-reveal].is-below:not(.is-in) {
+      opacity: 1;
+      transform: none;
+      transition: none;
+    }
   }
 
   /* Island animations (MobileNav drawer slide-in). Globally neutralized by the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "3.12.3",
+  "version": "4.0.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",

package/packages/public-runtime/src/activity/catalog.ts

@@ -338,6 +338,25 @@ export const ACTION_CATALOG = {
     argsAllow: ["versionId", "scope", ...OPERATIONAL_READ_BACK_ARGS], renderedAllow: [],
     desc: "A store's checkout requirements were saved to a version.",
   },
+  "content.operational_setting.published": {
+    // An operational setting's saved draft (checkout requirements or styling) was made the live
+    // store's value (/api/preview/settings-live). `scope` names the setting.
+    actors: ["merchant", "admin"], source: "server", sinks: LIFECYCLE,
+    argsAllow: ["versionId", "scope", ...OPERATIONAL_READ_BACK_ARGS], renderedAllow: [],
+    desc: "A store's operational setting was published to its live store.",
+  },
+  "content.operational_setting.rolled_back": {
+    // An operational setting's live value was put back to one it held before.
+    actors: ["merchant", "admin"], source: "server", sinks: LIFECYCLE,
+    argsAllow: ["versionId", "scope", ...OPERATIONAL_READ_BACK_ARGS], renderedAllow: [],
+    desc: "A store's operational setting was rolled back on its live store.",
+  },
+  "content.operational_setting.draft_discarded": {
+    // An operational setting's pending draft was dropped; the preview reads the live value again.
+    actors: ["merchant", "admin"], source: "server", sinks: LIFECYCLE,
+    argsAllow: ["versionId", "scope", ...OPERATIONAL_READ_BACK_ARGS], renderedAllow: [],
+    desc: "A store's pending operational-setting draft was discarded.",
+  },
   "change.go_live": {
     // Renamed from the orphaned, un-namespaced `go_live` (the ONE key that broke the
     // domain-prefix rule). The snake_case suffix is kept (the `deploy.version_observed`

package/packages/public-runtime/src/customization-runtime.ts

@@ -80,11 +80,12 @@ export function derivedArtifactPath(tenantId: string, name: string): string {
 export const CATALOG_LISTING_ARTIFACT = "catalog-listing.json";
 
 /**
- * Operational settings (ADR 0035): records a merchant edits from /admin, in effect with no
- * deploy and no promote. Each is saved to the store's operational selection (the pointer's
- * per-path `test` selection) and read from there for EVERY env and channel, so a save is what the
- * preview, the live store and the final-cart authority all read. A path not listed here is
- * repo-authored content: a channel pointer, when engaged, owns it.
+ * Operational settings (ADR 0035): records a merchant edits from /admin, in effect with no deploy.
+ * Each has a draft and a live value, both per-path selections on the pointer: a save writes the
+ * draft (`test`), which the preview, staff preview and preview-side checkout read at once; the live
+ * store and live checkout read `live`, which moves only when the setting is published, rolled back,
+ * or carried by a preview→live promotion. A store with no live site yet saves to both. A path not
+ * listed here is repo-authored content: a channel pointer, when engaged, owns it.
  */
 export const OPERATIONAL_SETTING_FILES = Object.freeze(["checkout-requirements.json", "checkout-style.json"] as const);
 export type OperationalSettingFile = (typeof OPERATIONAL_SETTING_FILES)[number];
@@ -100,7 +101,7 @@ export function isOperationalSettingPath(path: string): boolean {
 
 /**
  * Which selection a reader of (env, path) consults on `pointer`:
- *   - `operational`: an operational setting the store has saved — the same selection for every env;
+ *   - `operational`: an operational setting's per-env selection (`test` = draft, `live` = published);
  *   - `channel`: the channel's immutable site version (authoritative once engaged);
  *   - `legacy`: the per-path selection of a tenant not cut over to channels.
  * `null` when nothing is selected. Readers ({@link resolvePublishedArtifactKey}) and the writer
@@ -117,8 +118,8 @@ export function resolveArtifactSelection(
   path: string,
 ): ArtifactSelection | null {
   if (isOperationalSettingPath(path)) {
-    const versionId = pointer.test?.[path];
-    if (versionId) return { source: "operational", versionId };
+    const versionId = pointer[env]?.[path];
+    return versionId ? { source: "operational", versionId } : null;
   }
   const channel = channelFromEnv(env);
   if (pointer.channels?.[channel]) return { source: "channel", channel };
@@ -331,8 +332,8 @@ export async function readVersionedArtifact(
  * back to the build-time artifact.
  *
  * Resolution follows {@link resolveArtifactSelection}:
- *   - An operational setting the store has saved resolves to that saved version
- *     for every env and channel.
+ *   - An operational setting resolves to `pointer[env][path]` alone: the draft for
+ *     `test`, the published value for `live`. No channel and no other env stands in.
  *   - If the tenant has a channel pointer for the resolved channel
  *     (`channelFromEnv(env)`), resolve via the immutable site version. A channel
  *     pointer is AUTHORITATIVE — if the snapshot omits this path we return null

package/packages/public-runtime/src/index.ts

@@ -39,7 +39,6 @@ export * from "./capabilities.js";
 export * from "./compliance-obligations.js";
 export * from "./evidence.js";
 export * from "./checkout-style.js";
-export * from "./checkout-style-publish.js";
 export * from "./catalog-api.js";
 export * from "./search.js";
 export * from "./catalog-d1.js";

package/packages/public-runtime/src/checkout-style-publish.ts

@@ -1,200 +0,0 @@
-/**
- * Signed storefront → checkout theme-publish client (U11b, the PUSH half of U11).
- *
- * Points a store's hosted checkout template at the storefront-hosted stylesheet
- * (`GET /api/checkout-style.css`, U11) by driving the commerce service's theme
- * endpoint: PUT the `content_url`, then POST `/refresh` (PUT alone only sets the
- * pointer — checkout caches the template, so nothing goes live until refresh).
- *
- * AUTH: each request carries an `x-tot-signature` header = lowercase-hex
- * HMAC-SHA256 of `JSON.stringify(body)` keyed by the STORE'S ToT SECRET KEY —
- * byte-identical to the commerce service's webhook-signature verifier. That
- * secret is the storefront's `TOT_SECRET_KEY`; this is independent of the
- * provider API credentials.
- *
- * Edge-safe + node-free (WebCrypto HMAC); the network call is injected so the
- * flow is fully unit-testable offline. The caller (the checkout-styling promote
- * hook — U13) supplies the resolved secret + base URL from server context; the
- * secret is never shipped to the client.
- */
-import type { CustomizationEnv } from "./customization-preview.js";
-
-/** Header the commerce service reads the HMAC from. */
-export const TOT_SIGNATURE_HEADER = "x-tot-signature";
-
-/** The provider caps content_url at 300 chars; '' detaches the template. */
-export const MAX_CONTENT_URL = 300;
-
-/** Fetch shape we depend on — the platform `fetch`, injectable for tests. */
-export type FetchLike = (
-  input: string,
-  init?: {
-    method?: string;
-    headers?: Record<string, string>;
-    body?: string;
-  },
-) => Promise<{ ok: boolean; status: number; text: () => Promise<string> }>;
-
-export interface ThemePublishTarget {
-  /** Commerce service base URL for the checkout proxy. */
-  checkoutServiceBaseUrl: string;
-  /** The store's app domain / subdomain (the service resolves the store from it). */
-  appDomain: string;
-  /** The hosted stylesheet URL checkout will fetch (U11's `/api/checkout-style.css`). */
-  contentUrl: string;
-  /** The store's ToT secret key (storefront `TOT_SECRET_KEY`) — signs the request. */
-  secret: string;
-  /** Checkout template to target; checkout styling uses `checkout` (the default). */
-  templateType?: string;
-}
-
-export interface ThemePublishResult {
-  ok: boolean;
-  /** Parsed PUT response (pointer set), when it succeeded. */
-  set?: unknown;
-  /** Parsed refresh response (cache re-pulled), when it succeeded. */
-  refreshed?: boolean;
-  /** Failure detail: which step + the endpoint's status/message. */
-  error?: string;
-}
-
-/** Lowercase-hex HMAC-SHA256(message) under `secret` (WebCrypto). */
-async function hmacHex(secret: string, message: string): Promise<string> {
-  const enc = new TextEncoder();
-  const key = await crypto.subtle.importKey(
-    "raw",
-    enc.encode(secret),
-    { name: "HMAC", hash: "SHA-256" },
-    false,
-    ["sign"],
-  );
-  const sig = await crypto.subtle.sign("HMAC", key, enc.encode(message));
-  return [...new Uint8Array(sig)]
-    .map((b) => b.toString(16).padStart(2, "0"))
-    .join("");
-}
-
-/**
- * The exact commerce-service signature: hex HMAC-SHA256 of the JSON body string
- * under the store secret. Exported so the promote hook and tests can
- * compute/assert it identically.
- */
-export function signThemeRequestBody(
-  secret: string,
-  body: unknown,
-): Promise<string> {
-  return hmacHex(secret, JSON.stringify(body));
-}
-
-/**
- * The canonical, stable content_url a store's checkout template points at — the
- * U11 route on the store's own host, so the server-side fetch self-identifies
- * the tenant + env. Returns null if it would exceed the provider's 300-char cap
- * so the caller surfaces a config error before pushing a URL checkout will reject.
- */
-export function checkoutStyleContentUrl(
-  host: string,
-  basePath = "",
-): string | null {
-  const url = `https://${host}${basePath}/api/checkout-style.css`;
-  return url.length <= MAX_CONTENT_URL ? url : null;
-}
-
-async function readErr(
-  res: { status: number; text: () => Promise<string> },
-  step: string,
-): Promise<string> {
-  let detail = "";
-  try {
-    detail = (await res.text()).slice(0, 300);
-  } catch {
-    /* ignore */
-  }
-  return `${step} failed (HTTP ${res.status})${detail ? `: ${detail}` : ""}`;
-}
-
-/**
- * Publish a store's checkout styling: signed PUT `/theme/foxy` then
- * signed POST `/theme/foxy/refresh`. Returns a discriminated result — we do NOT
- * fail open: if the PUT fails we skip the refresh and report the error, so the
- * caller never reports "published" for something that didn't take.
- *
- * `fetchImpl` defaults to the global `fetch`; tests inject a stub.
- */
-export async function publishCheckoutTheme(
-  target: ThemePublishTarget,
-  fetchImpl?: FetchLike,
-): Promise<ThemePublishResult> {
-  const doFetch = fetchImpl ?? (globalThis.fetch as unknown as FetchLike);
-  const templateType = target.templateType ?? "checkout";
-  const base = target.checkoutServiceBaseUrl.replace(/\/+$/, "");
-
-  if (
-    target.contentUrl !== "" &&
-    (!target.contentUrl.startsWith("https://") ||
-      target.contentUrl.length > MAX_CONTENT_URL)
-  ) {
-    return {
-      ok: false,
-      error: `invalid contentUrl (must be https and <= ${MAX_CONTENT_URL} chars)`,
-    };
-  }
-
-  // 1. PUT the pointer.
-  const setBody = {
-    appDomain: target.appDomain,
-    templateType,
-    contentUrl: target.contentUrl,
-  };
-  const setSig = await signThemeRequestBody(target.secret, setBody);
-  const setRes = await doFetch(`${base}/theme/foxy`, {
-    method: "PUT",
-    headers: {
-      "content-type": "application/json",
-      [TOT_SIGNATURE_HEADER]: setSig,
-    },
-    body: JSON.stringify(setBody),
-  });
-  if (!setRes.ok) {
-    return { ok: false, error: await readErr(setRes, "PUT /theme/foxy") };
-  }
-  let set: unknown = undefined;
-  try {
-    set = JSON.parse(await setRes.text());
-  } catch {
-    /* non-JSON ok-body — leave undefined */
-  }
-
-  // 2. POST refresh to make it live.
-  const refreshBody = { appDomain: target.appDomain, templateType };
-  const refreshSig = await signThemeRequestBody(target.secret, refreshBody);
-  const refreshRes = await doFetch(`${base}/theme/foxy/refresh`, {
-    method: "POST",
-    headers: {
-      "content-type": "application/json",
-      [TOT_SIGNATURE_HEADER]: refreshSig,
-    },
-    body: JSON.stringify(refreshBody),
-  });
-  if (!refreshRes.ok) {
-    return {
-      ok: false,
-      set,
-      error: await readErr(refreshRes, "POST /theme/foxy/refresh"),
-    };
-  }
-
-  return { ok: true, set, refreshed: true };
-}
-
-/**
- * Convenience: the env → checkout service base URL for this workstream's targets.
- * qa/test use the non-prod proxy; live uses the prod proxy. Kept here so the
- * promote hook resolves one place.
- */
-export function checkoutServiceBaseUrl(env: CustomizationEnv): string {
-  // "test" is the qa target's env; "live" is prod.
-  return env === "live"
-    ? "https://foxycart.tokenoftrust.com"
-    : "https://foxycart-test.tokenoftrust.com";
-}