@tokenoftrust/storefront-runner 2.4.29 → 2.4.31

package/apps/storefront/src/lib/admin/catalogSettingsClient.ts

@@ -1,22 +1,11 @@
-/**
- * /admin/catalog-settings client. Field values are text nodes. A 409 keeps the
- * open draft; replacing it requires the explicit reload control.
- */
+/** Catalog defaults: progressively revealed controls and an authoritative live sample. */
 import {
-  applySaveResult,
-  draftIsDirty,
-  editorFromPayload,
-  saveBody,
-  type SettingsEditorState,
-  type SettingsPayload,
+  applySaveAfterEdits, draftIsDirty, editorFromPayload, parseSettingsNumber, saveBody, selectDraftMethod,
+  type SettingsEditorState, type SettingsPayload,
 } from "@/lib/admin/catalogSettingsState";
+import { latestPreview, type PreviewStatus } from "@/lib/admin/catalogSettingsPreview";
 
-interface MethodOption {
-  id: string;
-  title: string;
-  reason: string;
-}
-
+interface MethodOption { id: string; title: string; reason: string }
 interface SettingsResponse extends SettingsPayload {
   ok: true;
   pricingMethods: MethodOption[];
@@ -24,72 +13,59 @@ interface SettingsResponse extends SettingsPayload {
   history: Array<{ revision: number; savedAt: string; actor: string }>;
   historyUnavailable: boolean;
 }
-
+interface PreviewResponse {
+  ok?: boolean; message?: string; issues?: string[]; currency?: string;
+  pricing?: { status: string; preview?: {
+    price: number | null; cost: number | null; profit: number | null; margin: number | null;
+    calculation: string; issues: string[]; ruleExplanation: string;
+  } };
+  sku?: { status: string; value?: string };
+}
 type Child = Node | string | null | undefined | false;
+type Section = "pricing" | "sku";
+type RecordValue = Record<string, unknown>;
 
-function h<K extends keyof HTMLElementTagNameMap>(
-  tag: K,
-  attrs: Record<string, string | boolean | undefined> = {},
-  ...children: Child[]
-): HTMLElementTagNameMap[K] {
+function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string | boolean | undefined> = {}, ...children: Child[]): HTMLElementTagNameMap[K] {
   const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(attrs)) {
-    if (value === undefined || value === false) continue;
-    node.setAttribute(key, value === true ? "" : value);
-  }
+  for (const [key, value] of Object.entries(attrs)) if (value !== undefined && value !== false) node.setAttribute(key, value === true ? "" : value);
   for (const child of children) if (child !== null && child !== undefined && child !== false) node.append(child);
   return node;
 }
-
-const PRICING_NUMBERS: Array<[string, string]> = [
-  ["targetMargin", "Target margin (%)"],
-  ["markup", "Markup (%)"],
-  ["msrpAdjustment", "MSRP adjustment (%)"],
-  ["fixedMarkup", "Dollar markup"],
-  ["additionalCost", "Additional cost"],
-  ["additionalCostPercent", "Additional cost (%)"],
-  ["increment", "Rounding increment"],
-  ["minimumPrice", "Minimum price"],
-  ["maximumPrice", "Maximum price"],
-  ["minimumMargin", "Minimum margin (%)"],
-];
-
-const PRICING_SELECTS: Array<[string, string, string[]]> = [
-  ["costBasis", "Cost basis", ["wholesale", "adjusted"]],
-  ["rounding", "Rounding", ["none", "increment", "ending"]],
-  ["direction", "Round direction", ["up", "nearest", "down"]],
-  ["missingData", "Missing data", ["review", "fallback"]],
-  ["fallbackMethod", "Fallback method", ["msrp", "margin", "markup", "fixed"]],
-  ["updatePolicy", "When costs change", ["on-add", "manual", "automatic"]],
-];
-
-const PRICING_FLAGS: Array<[string, string]> = [
-  ["preserveMsrp", "Preserve MSRP as compare-at"],
-  ["capAtMsrp", "Cap the price at MSRP"],
-  ["includeManualOverrides", "Include manual product overrides"],
-];
-
-const RULE_NUMBERS: Array<[string, string]> = [
-  ["targetMargin", "Target margin (%)"],
-  ["markup", "Markup (%)"],
-  ["msrpAdjustment", "MSRP adjustment (%)"],
-  ["fixedMarkup", "Dollar markup"],
-];
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value && typeof value === "object" ? value as Record<string, unknown> : {};
-}
-
-function numberOrBlank(raw: string): number | "" {
-  if (raw.trim() === "") return "";
-  const value = Number(raw);
-  return Number.isFinite(value) ? value : "";
-}
-
-function fieldString(record: Record<string, unknown>, key: string): string {
+const METHOD_FIELDS: Record<string, [string, string, string]> = {
+  margin: ["targetMargin", "Target gross margin (%)", "The share of your selling price left after product cost."],
+  markup: ["markup", "Markup over cost (%)", "100% doubles cost. That gives a 50% gross margin."],
+  "msrp-adjustment": ["msrpAdjustment", "MSRP adjustment (%)", "−10 is 10% below MSRP; +10 is 10% above."],
+  fixed: ["fixedMarkup", "Amount added to cost", "Add this amount to the cost of each item."],
+};
+const METHOD_TITLES: Record<string, string> = {
+  msrp: "Supplier MSRP", margin: "Target margin", markup: "Markup over cost", "msrp-adjustment": "Adjust MSRP", fixed: "Add a fixed amount",
+  sequential: "Simple numbers", family: "Product families", hybrid: "Category + number", attributes: "Product attributes", supplier: "Supplier codes", random: "Short random codes", deterministic: "Stable identity codes",
+};
+const FIELD_LABELS: Record<string, string> = {
+  targetMargin: "Target gross margin", markup: "Markup over cost", msrpAdjustment: "MSRP adjustment", fixedMarkup: "Amount added to cost",
+  additionalCost: "Additional cost per item", additionalCostPercent: "Additional cost percentage", minimumPrice: "Minimum price", maximumPrice: "Maximum price", minimumMargin: "Minimum gross margin",
+  costBasis: "Cost basis", rounding: "Price format", increment: "Rounding increment", ending: "Price ending", direction: "Round direction", missingData: "Missing price source", fallbackMethod: "Fallback pricing method", updatePolicy: "Update preference",
+  startingNumber: "Starting number", prefix: "SKU prefix", separator: "SKU separator", method: "Method", productKey: "Product ID or SKU", selectedRuleId: "Matching rule",
+  name: "Rule name", scope: "Match by", match: "Matching value", minimumCost: "Cost from", maximumCost: "Cost below", price: "Selling price",
+  wholesale: "Wholesale cost", msrp: "Supplier MSRP", minimum: "Product minimum price", maximum: "Product maximum price",
+};
+function asRecord(value: unknown): RecordValue { return value && typeof value === "object" ? value as RecordValue : {}; }
+function fieldString(record: RecordValue, key: string): string {
   const value = record[key];
   return typeof value === "number" || typeof value === "string" ? String(value) : "";
 }
+function responseMessage(body: { message?: string; issues?: string[] }, fallback: string): string {
+  const issues = (body.issues ?? []).map((issue) => {
+    const separator = issue.indexOf(": ");
+    if (separator < 0) return issue;
+    const path = issue.slice(0, separator).split(".");
+    let label = FIELD_LABELS[path.at(-1) ?? ""] ?? "Settings";
+    const collection = path.findIndex((part) => ["exceptions", "costTiers", "productOverrides"].includes(part));
+    if (collection >= 0 && /^\d+$/.test(path[collection + 1] ?? "")) label = `${path[collection] === "exceptions" ? "Rule" : path[collection] === "costTiers" ? "Cost tier" : "Product price"} ${Number(path[collection + 1]) + 1} · ${label}`;
+    return `${label}: ${issue.slice(separator + 2)}`;
+  });
+  return [body.message, ...issues].filter(Boolean).join(" ") || fallback;
+}
 
 export function initCatalogSettingsPage(root: HTMLElement): void {
   const found = root.querySelector<HTMLElement>("[data-settings-app]");
@@ -97,265 +73,385 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
   const previewUrl = root.dataset.preview ?? "";
   if (!found || !api || !previewUrl) return;
   const panel: HTMLElement = found;
-
   let state: SettingsEditorState | null = null;
   let storeCurrency = root.dataset.currency ?? "";
   let pricingMethods: MethodOption[] = [];
   let skuMethods: MethodOption[] = [];
   let history: SettingsResponse["history"] = [];
   let historyUnavailable = false;
-  const sample: Record<string, number | ""> = { wholesale: "", msrp: "", minimum: "", maximum: "" };
-  const sampleText: Record<string, string> = { productKey: "", assortment: "", category: "", brand: "", selectedRuleId: "" };
-  const status = h("div", { "aria-live": "polite" });
-  const previewOut = h("div", { class: "preview-out" });
+  let activeTab: Section = window.location.hash === "#sku" ? "sku" : "pricing";
+  let saving = false;
+  let loading = false;
+  let feedback = "";
+  let feedbackError = false;
+  const sample: RecordValue = { wholesale: 40, msrp: 60, minimum: "", maximum: "" };
+  const sampleText: RecordValue = { productKey: "", assortment: "", category: "", brand: "", selectedRuleId: "" };
+  const openDetails = new Map<string, boolean>();
+  const editor = h("div", { class: "settings-editor" });
+  const status = h("div", { class: "settings-notices", "aria-live": "polite" });
+  const previewOut = h("div", { class: "preview-out", "aria-live": "polite", "aria-atomic": "true" });
+  const saveStatus = h("div", { class: "save-status", "aria-live": "polite" });
+  const saveButton = h("button", { type: "button", class: "btn primary", "data-save": "true" }, "Save defaults");
+  const discardButton = h("button", { type: "button", class: "btn secondary", "data-discard": "true" }, "Discard changes");
+  const tabs = h("div", { class: "settings-tabs", role: "tablist", "aria-label": "Catalog defaults" });
+  const money = (value: number, currency = state?.currency ?? storeCurrency) => {
+    try { return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(value); }
+    catch { return `${currency} ${value.toFixed(2)}`; }
+  };
+  const currencyMismatch = () => Boolean(state && storeCurrency && state.currency !== storeCurrency);
+  const isConfigured = (section: Section) => state?.draft[section === "pricing" ? "pricingConfigured" : "skuConfigured"] === true;
+  const methodTitle = (id: string) => METHOD_TITLES[id] ?? [...pricingMethods, ...skuMethods].find((method) => method.id === id)?.title ?? "Saved method";
 
-  function paintStatus(extra?: string): void {
+  function paintStatus(): void {
     if (!state) return;
     const dirty = draftIsDirty(state);
-    const revision = state.savedRevision === null ? "Not saved yet" : `Saved revision ${state.savedRevision}`;
-    const lines: Node[] = [h("p", { class: "muted" }, `${revision} · ${state.currency} · ${dirty ? "Unsaved edits" : "Matches the saved defaults"}`)];
-    if (storeCurrency && state.currency !== storeCurrency) {
-      lines.push(h("p", { class: "notice error", role: "alert" }, `Saved defaults are in ${state.currency}. This store is ${storeCurrency}. No currency conversion is applied.`));
-    }
+    const notices: Node[] = [];
+    if (currencyMismatch()) notices.push(h("p", { class: "notice error", role: "alert" }, `Saved defaults use ${state.currency}; this store uses ${storeCurrency}. Saving and preview are paused. No currency conversion is applied.`));
     if (state.conflict) {
-      lines.push(h("p", { class: "notice error", role: "alert" }, state.conflict.message));
-      lines.push(h("button", { type: "button", class: "btn", "data-reload": "true" }, "Load the saved revision"));
+      const reload = h("button", { type: "button", class: "btn secondary", disabled: saving || loading, "data-reload": "true" }, "Load saved defaults");
+      reload.addEventListener("click", () => void load());
+      notices.push(h("div", { class: "notice error", role: "alert" }, h("p", {}, state.conflict.message), reload));
     }
-    if (extra) lines.push(h("p", { class: "notice error", role: "alert" }, extra));
-    status.replaceChildren(...lines);
-    status.querySelector("[data-reload]")?.addEventListener("click", () => void load());
+    if (feedbackError && feedback) notices.push(h("p", { class: "notice error", role: "alert" }, feedback));
+    status.replaceChildren(...notices);
+    saveStatus.replaceChildren(
+      h("strong", { class: dirty ? "is-dirty" : "is-saved" }, saving ? "Saving defaults…" : dirty ? "Unsaved changes" : feedback || "All changes saved"),
+      h("span", { class: "muted small" }, state.savedRevision === null ? "Choose a method to set your store defaults." : `Store defaults · Revision ${state.savedRevision}`),
+    );
+    saveButton.disabled = saving || loading || !dirty || currencyMismatch() || Boolean(state.conflict);
+    saveButton.textContent = saving ? "Saving…" : "Save defaults";
+    discardButton.disabled = saving || loading || !dirty;
   }
+  function touch(): void { feedback = ""; feedbackError = false; paintStatus(); refreshRuleChoices(); schedulePreview(); }
 
-  function select(record: Record<string, unknown>, key: string, label: string, options: Array<{ value: string; label: string }>, onChange: () => void): HTMLElement {
+  function select(record: RecordValue, key: string, label: string, options: Array<{ value: string; label: string }>, onChange: () => void = touch, focusKey = key): HTMLElement {
     const current = fieldString(record, key);
-    const known = options.some((option) => option.value === current);
-    const control = h("select", { "aria-label": label }) as HTMLSelectElement;
-    if (current && !known) control.append(h("option", { value: current }, current));
+    const control = h("select", { "data-focus": focusKey });
+    if (!options.some((option) => option.value === current)) control.append(h("option", { value: current }, "Saved value — choose an option"));
     for (const option of options) control.append(h("option", { value: option.value }, option.label));
     control.value = current;
-    control.addEventListener("change", () => {
-      record[key] = control.value;
-      onChange();
-    });
-    return h("label", {}, label, control);
+    control.addEventListener("change", () => { record[key] = control.value; onChange(); });
+    return h("label", { class: "field" }, h("span", {}, label), control);
   }
-
-  function numberField(record: Record<string, unknown>, key: string, label: string, onChange: () => void): HTMLElement {
-    const control = h("input", { type: "text", inputmode: "decimal", "aria-label": label, value: fieldString(record, key) }) as HTMLInputElement;
-    control.addEventListener("input", () => {
-      record[key] = numberOrBlank(control.value);
-      onChange();
-    });
-    return h("label", {}, label, control);
+  function numberField(record: RecordValue, key: string, label: string, onChange: () => void = touch, hint = "", focusKey = key): HTMLElement {
+    const control = h("input", { type: "text", inputmode: "decimal", "data-focus": focusKey, value: fieldString(record, key), autocomplete: "off" });
+    control.addEventListener("input", () => { record[key] = parseSettingsNumber(control.value); onChange(); });
+    return h("label", { class: "field" }, h("span", {}, label), control, hint ? h("small", {}, hint) : null);
   }
-
-  function textField(record: Record<string, unknown>, key: string, label: string, onChange: () => void, attrs: Record<string, string> = {}): HTMLElement {
-    const control = h("input", { type: "text", "aria-label": label, value: fieldString(record, key), ...attrs }) as HTMLInputElement;
+  function textField(record: RecordValue, key: string, label: string, onChange: () => void = touch, attrs: Record<string, string> = {}, focusKey = key): HTMLElement {
+    const control = h("input", { type: "text", "data-focus": focusKey, value: fieldString(record, key), autocomplete: "off", ...attrs });
     control.addEventListener("input", () => {
-      record[key] = control.value;
+      record[key] = key === "prefix" ? control.value.toUpperCase() : control.value;
+      if (key === "prefix") control.value = String(record[key]);
       onChange();
     });
-    return h("label", {}, label, control);
+    return h("label", { class: "field" }, h("span", {}, label), control);
   }
-
-  function flag(record: Record<string, unknown>, key: string, label: string, onChange: () => void): HTMLElement {
-    const control = h("input", { type: "checkbox" }) as HTMLInputElement;
+  function flag(record: RecordValue, key: string, label: string): HTMLElement {
+    const control = h("input", { type: "checkbox", "data-focus": key });
     control.checked = record[key] === true;
-    control.addEventListener("change", () => {
-      record[key] = control.checked;
-      onChange();
-    });
-    return h("label", { class: "inline" }, control, ` ${label}`);
+    control.addEventListener("change", () => { record[key] = control.checked; touch(); });
+    return h("label", { class: "check-field" }, control, h("span", {}, label));
   }
-
-  function configured(key: "pricingConfigured" | "skuConfigured", label: string): HTMLElement {
-    const control = h("input", { type: "checkbox" }) as HTMLInputElement;
-    control.checked = state?.draft[key] === true;
-    control.addEventListener("change", () => {
+  function disclosure(key: string, title: string, hint: string, children: Child[], initiallyOpen = false): HTMLDetailsElement {
+    const details = h("details", { class: "disclosure", "data-disclosure": key },
+      h("summary", {}, h("span", { class: "disclosure-title" }, title), h("span", { class: "disclosure-hint" }, hint)), h("div", { class: "disclosure-body" }, ...children));
+    details.open = openDetails.get(key) ?? initiallyOpen;
+    return details;
+  }
+  function parameter(record: RecordValue, prefix = ""): HTMLElement | null {
+    const field = METHOD_FIELDS[fieldString(record, "method")];
+    return field ? numberField(record, field[0], field[1], touch, field[2], `${prefix}${field[0]}`) : null;
+  }
+  function examples(section: Section): Record<string, string> {
+    return section === "pricing" ? {
+      msrp: `${money(60)} MSRP → ${money(60)}`, margin: `${money(40)} cost · 40% → ${money(66.67)}`,
+      markup: `${money(40)} cost · 50% → ${money(60)}`, "msrp-adjustment": `${money(60)} MSRP · −10% → ${money(54)}`, fixed: `${money(40)} cost + ${money(15)} → ${money(55)}`,
+    } : { sequential: "SKU-004821", family: "P004821-V03", hybrid: "TSH-004821", attributes: "AC-TS42-BLK-M", supplier: "SUP7-AX204", random: "K7MX4R9T", deterministic: "P-7K3M9X2Q" };
+  }
+  function methodPicker(section: Section): HTMLElement {
+    if (!state) return h("div");
+    const record = state.draft[section];
+    const configured = isConfigured(section);
+    const all = section === "pricing" ? pricingMethods : skuMethods;
+    const commonIds = section === "pricing" ? ["msrp", "margin", "markup"] : ["sequential", "family", "hybrid"];
+    const common = all.filter((method) => commonIds.includes(method.id));
+    const more = all.filter((method) => !commonIds.includes(method.id));
+    const sampleExamples = examples(section);
+    const reasons: Record<string, string> = {
+      msrp: "Start with the supplier’s suggested retail price.", margin: "Keep a consistent share of every sale.", markup: "Add a percentage to what you paid.", sequential: "A dependable format for any catalog.", family: "Keep related variants easy to recognize.", hybrid: "A readable prefix with a simple number.",
+    };
+    const card = (method: MethodOption) => {
+      const selected = configured && record.method === method.id;
+      const radio = h("input", { type: "radio", name: `${section}-method`, value: method.id, "data-focus": `${section}-${method.id}` });
+      radio.checked = selected;
+      radio.addEventListener("change", () => { if (state) { selectDraftMethod(state, section, method.id); touch(); renderEditor(); } });
+      return h("label", { class: `method-card${selected ? " selected" : ""}` }, radio,
+        h("span", { class: "method-title" }, methodTitle(method.id)), h("span", { class: "method-example" }, sampleExamples[method.id] ?? "Sample format"), h("span", { class: "method-reason" }, reasons[method.id] ?? method.reason));
+    };
+    const manual = h("button", { type: "button", class: "text-button", "data-focus": `${section}-manual`, "aria-pressed": String(!configured) }, section === "pricing" ? "Use manual prices instead" : "Enter SKUs manually instead");
+    manual.addEventListener("click", () => {
       if (!state) return;
-      state.draft[key] = control.checked;
-      paintStatus();
+      state.draft[section === "pricing" ? "pricingConfigured" : "skuConfigured"] = false;
+      touch(); renderEditor();
     });
-    return h("label", { class: "inline" }, control, ` ${label}`);
+    return h("section", { class: "editor-panel method-panel", "aria-labelledby": `${section}-method-heading` },
+      h("div", { class: "section-heading" }, h("span", { class: "step-number", "aria-hidden": "true" }, "1"), h("h2", { id: `${section}-method-heading` }, section === "pricing" ? "Choose your pricing method" : "Choose your SKU format")),
+      h("p", { class: "section-intro" }, section === "pricing" ? "One starting point for every new product." : "An item code that works for the way you sell."),
+      !configured ? h("p", { class: "manual-note" }, section === "pricing" ? "Manual pricing is on. Choose a method to set a default." : "SKUs are entered manually. Choose a format to set a default.") : null,
+      h("div", { class: "method-grid" }, ...common.map(card)),
+      disclosure(`${section}-more`, "More methods", section === "pricing" ? "Adjust MSRP or add a fixed amount" : "Attributes, suppliers and generated codes", [h("div", { class: "method-grid more-grid" }, ...more.map(card))], configured && more.some((method) => method.id === record.method)),
+      configured && section === "pricing" && METHOD_FIELDS[String(record.method)] ? h("div", { class: "method-parameter" }, parameter(record)) : null,
+      configured ? manual : null);
   }
 
-  function ruleRows(list: Record<string, unknown>[], kind: "exception" | "tier" | "override", onChange: () => void): HTMLElement {
-    const rows = list.map((rule, index) => {
-      const remove = h("button", { type: "button", class: "btn small" }, "Remove");
-      remove.addEventListener("click", () => {
-        list.splice(index, 1);
-        renderForm();
-      });
-      const methodOptions = (kind === "tier" ? ["margin", "markup", "fixed"] : ["msrp", "margin", "markup", "msrp-adjustment", "fixed"])
-        .map((id) => ({ value: id, label: id }));
-      return h(
-        "div",
-        { class: "rule" },
-        textField(rule, "id", "Id", onChange),
-        kind !== "override" ? null : textField(rule, "productKey", "Product", onChange),
-        kind === "override" ? numberField(rule, "price", "Price", onChange) : null,
-        kind === "exception" ? textField(rule, "name", "Name", onChange) : null,
-        kind === "exception" ? select(rule, "scope", "Scope", ["assortment", "category", "brand"].map((id) => ({ value: id, label: id })), onChange) : null,
-        kind === "exception" ? textField(rule, "match", "Match", onChange) : null,
-        kind === "tier" ? numberField(rule, "minimumCost", "Minimum cost", onChange) : null,
-        kind === "tier" ? numberField(rule, "maximumCost", "Maximum cost", onChange) : null,
-        kind === "override" ? null : select(rule, "method", "Method", methodOptions, onChange),
-        kind === "override" ? null : h("div", { class: "grid" }, ...RULE_NUMBERS.filter(([key]) => kind === "exception" || key !== "msrpAdjustment").map(([key, label]) => numberField(rule, key, label, onChange))),
-        remove,
-      );
-    });
-    return h("div", { class: "rules" }, ...rows);
+  function ruleRows(list: RecordValue[], kind: "exception" | "tier" | "override"): HTMLElement {
+    return h("div", { class: "rules" }, ...list.map((rule, index) => {
+      const prefix = `${kind}-${String(rule.id)}-`;
+      const remove = h("button", { type: "button", class: "text-button danger", "aria-label": `Remove ${kind === "exception" ? "rule" : kind === "tier" ? "cost tier" : "product price"} ${index + 1}` }, "Remove");
+      remove.addEventListener("click", () => { list.splice(index, 1); touch(); renderEditor(); });
+      const methods = (kind === "tier" ? ["margin", "markup", "fixed"] : ["msrp", "margin", "markup", "msrp-adjustment", "fixed"]).map((id) => ({ value: id, label: methodTitle(id) }));
+      return h("div", { class: "rule" }, h("div", { class: "rule-heading" }, h("strong", {}, `${kind === "exception" ? "Rule" : kind === "tier" ? "Cost tier" : "Product price"} ${index + 1}`), remove),
+        h("div", { class: "fields-grid" },
+          kind === "exception" ? textField(rule, "name", "Rule name", touch, {}, `${prefix}name`) : null,
+          kind === "exception" ? select(rule, "scope", "Match by", ["assortment", "category", "brand"].map((value) => ({ value, label: value.charAt(0).toUpperCase() + value.slice(1) })), touch, `${prefix}scope`) : null,
+          kind === "exception" ? textField(rule, "match", "Matching value", touch, {}, `${prefix}match`) : null,
+          kind === "tier" ? numberField(rule, "minimumCost", "Cost from", touch, "Inclusive", `${prefix}minimumCost`) : null,
+          kind === "tier" ? numberField(rule, "maximumCost", "Cost below", touch, "Leave blank for no upper limit.", `${prefix}maximumCost`) : null,
+          kind === "override" ? textField(rule, "productKey", "Product ID or SKU", touch, {}, `${prefix}productKey`) : null,
+          kind === "override" ? numberField(rule, "price", "Selling price", touch, "An exact price for this product.", `${prefix}price`) : null,
+          kind !== "override" ? select(rule, "method", "Pricing method", methods, () => { if (rule.method === "margin" && rule.targetMargin === "") rule.targetMargin = 40; touch(); renderEditor(); }, `${prefix}method`) : null,
+          kind !== "override" ? parameter(rule, prefix) : null));
+    }));
   }
-
-  function renderForm(): void {
-    if (!state) return;
+  function pricingControls(): HTMLElement[] {
+    if (!state || !isConfigured("pricing")) return [];
     const pricing = state.draft.pricing;
-    const sku = state.draft.sku;
-    const touch = () => paintStatus();
+    const repaint = () => { touch(); renderEditor(); };
+    const priceFormat = h("section", { class: "editor-panel" },
+      h("div", { class: "section-heading" }, h("span", { class: "step-number", "aria-hidden": "true" }, "2"), h("h2", {}, "Give prices a consistent finish")),
+      h("div", { class: "fields-grid" },
+        select(pricing, "rounding", "Price format", [{ value: "none", label: "Exact calculated price" }, { value: "ending", label: "Use a price ending" }, { value: "increment", label: "Round to an increment" }], repaint),
+        pricing.rounding === "ending" ? textField(pricing, "ending", "Ending (two digits)", touch, { maxlength: "2", inputmode: "numeric" }) : null,
+        pricing.rounding === "increment" ? numberField(pricing, "increment", "Rounding increment", touch, `For example, ${money(1)} or ${money(0.5)}.`) : null,
+        pricing.rounding !== "none" ? select(pricing, "direction", "Round direction", [{ value: "up", label: "Up" }, { value: "nearest", label: "Nearest" }, { value: "down", label: "Down" }]) : null),
+      pricing.method === "msrp" ? flag(pricing, "preserveMsrp", "Keep supplier MSRP exact (skip price formatting)") : null);
+    const fallbackField = METHOD_FIELDS[String(pricing.fallbackMethod)];
+    const advanced = disclosure("pricing-advanced", "Advanced pricing", "Costs, limits and missing data", [
+      h("h3", {}, "Product cost"),
+      h("div", { class: "fields-grid" },
+        select(pricing, "costBasis", "Cost basis", [{ value: "wholesale", label: "Wholesale purchase cost" }, { value: "adjusted", label: "Wholesale + additional costs" }], repaint),
+        pricing.costBasis === "adjusted" ? numberField(pricing, "additionalCost", "Additional cost per item") : null,
+        pricing.costBasis === "adjusted" ? numberField(pricing, "additionalCostPercent", "Additional cost (% of wholesale)") : null),
+      h("p", { class: "hint" }, "Include freight, duties or handling. Both adjustments are added to wholesale cost."),
+      h("h3", {}, "Price limits"),
+      h("div", { class: "fields-grid" }, numberField(pricing, "minimumPrice", "Minimum price", touch, "Optional"), numberField(pricing, "maximumPrice", "Maximum price", touch, "Optional"), numberField(pricing, "minimumMargin", "Minimum gross margin (%)", touch, "Optional")),
+      flag(pricing, "capAtMsrp", "Flag prices above supplier MSRP"),
+      pricing.method !== "msrp" ? flag(pricing, "preserveMsrp", "Keep supplier MSRP exact when used") : null,
+      h("h3", {}, "When a price source is missing"),
+      select(pricing, "missingData", "Missing cost or MSRP", [{ value: "review", label: "Flag the product for review" }, { value: "fallback", label: "Use a fallback method" }], () => { if (pricing.missingData === "fallback" && pricing.fallbackMethod === "margin" && pricing.targetMargin === "") pricing.targetMargin = 40; repaint(); }),
+      pricing.missingData === "fallback" ? h("div", { class: "fields-grid nested-fields" },
+        select(pricing, "fallbackMethod", "Fallback pricing method", ["msrp", "margin", "markup", "fixed"].map((value) => ({ value, label: methodTitle(value) })), () => { if (pricing.fallbackMethod === "margin" && pricing.targetMargin === "") pricing.targetMargin = 40; repaint(); }),
+        fallbackField ? numberField(pricing, fallbackField[0], `Fallback ${fallbackField[1].toLowerCase()}`, touch, "Choose a fallback that uses a different price source.", `fallback-${fallbackField[0]}`) : null) : null,
+      h("h3", {}, "Update preference"),
+      select(pricing, "updatePolicy", "Apply pricing defaults", [{ value: "on-add", label: "When products are added" }, { value: "manual", label: "Only on request" }, { value: "automatic", label: "When costs change" }]),
+      h("p", { class: "hint" }, "Saved listings are not automatically repriced by these defaults."),
+      flag(pricing, "includeManualOverrides", "Include manually priced products in the update preference"),
+    ]);
     const exceptions = Array.isArray(pricing.exceptions) ? pricing.exceptions.map(asRecord) : [];
     const tiers = Array.isArray(pricing.costTiers) ? pricing.costTiers.map(asRecord) : [];
     const overrides = Array.isArray(pricing.productOverrides) ? pricing.productOverrides.map(asRecord) : [];
-    pricing.exceptions = exceptions;
-    pricing.costTiers = tiers;
-    pricing.productOverrides = overrides;
-
-    const add = (list: Record<string, unknown>[], blank: Record<string, unknown>, label: string) => {
-      const button = h("button", { type: "button", class: "btn small" }, label);
-      button.addEventListener("click", () => {
-        list.push({ ...blank, id: `${label.slice(0, 3).toLowerCase()}-${list.length + 1}` });
-        renderForm();
-      });
+    pricing.exceptions = exceptions; pricing.costTiers = tiers; pricing.productOverrides = overrides;
+    const add = (list: RecordValue[], blank: RecordValue, label: string) => {
+      const button = h("button", { type: "button", class: "btn secondary small" }, label);
+      button.addEventListener("click", () => { list.push({ ...blank, id: crypto.randomUUID() }); touch(); renderEditor(); });
       return button;
     };
-
-    panel.replaceChildren(
-      status,
-      h("section", { class: "panel" },
-        h("h2", {}, "Pricing"),
-        configured("pricingConfigured", "Use these pricing defaults"),
-        h("div", { class: "grid" },
-          select(pricing, "method", "Method", pricingMethods.map((method) => ({ value: method.id, label: method.title })), touch),
-          ...PRICING_NUMBERS.map(([key, label]) => numberField(pricing, key, label, touch)),
-          ...PRICING_SELECTS.map(([key, label, values]) => select(pricing, key, label, values.map((value) => ({ value, label: value })), touch)),
-          textField(pricing, "ending", "Price ending", touch, { maxlength: "2" }),
-        ),
-        h("div", { class: "flags" }, ...PRICING_FLAGS.map(([key, label]) => flag(pricing, key, label, touch))),
-        h("h3", {}, "Exceptions"),
-        ruleRows(exceptions, "exception", touch),
-        add(exceptions, { name: "Exception", scope: "brand", match: "", method: "margin", targetMargin: 40, markup: "", msrpAdjustment: "", fixedMarkup: "" }, "Add exception"),
-        h("h3", {}, "Cost tiers"),
-        ruleRows(tiers, "tier", touch),
-        add(tiers, { minimumCost: 0, maximumCost: "", method: "margin", targetMargin: 40, markup: "", fixedMarkup: "" }, "Add cost tier"),
-        h("h3", {}, "Product price overrides"),
-        ruleRows(overrides, "override", touch),
-        add(overrides, { productKey: "", price: 0 }, "Add product override"),
-      ),
-      h("section", { class: "panel" },
-        h("h2", {}, "SKUs"),
-        configured("skuConfigured", "Use these SKU defaults"),
-        h("div", { class: "grid" },
-          select(sku, "method", "Method", skuMethods.map((method) => ({ value: method.id, label: method.title })), touch),
-          textField(sku, "prefix", "Prefix", touch, { maxlength: "12" }),
-          numberField(sku, "startingNumber", "Starting number", touch),
-          select(sku, "separator", "Separator", [{ value: "-", label: "Hyphen" }, { value: "_", label: "Underscore" }, { value: "", label: "None" }], touch),
-        ),
-      ),
-      h("section", { class: "panel" },
-        h("h2", {}, "Preview a sample"),
-        h("p", { class: "muted small" }, "The server calculates this sample with the open draft. Saving defaults does not change prices or SKUs already on your products."),
-        h("div", { class: "grid" },
-          ...(["wholesale", "msrp", "minimum", "maximum"] as const).map((key) => {
-            const control = h("input", { type: "text", inputmode: "decimal", "aria-label": key, value: String(sample[key] ?? "") }) as HTMLInputElement;
-            control.addEventListener("input", () => { sample[key] = numberOrBlank(control.value); });
-            return h("label", {}, key, control);
-          }),
-          ...(["productKey", "assortment", "category", "brand", "selectedRuleId"] as const).map((key) => {
-            const control = h("input", { type: "text", "aria-label": key, value: sampleText[key] ?? "" }) as HTMLInputElement;
-            control.addEventListener("input", () => { sampleText[key] = control.value; });
-            return h("label", {}, key, control);
-          }),
-        ),
-        h("button", { type: "button", class: "btn", "data-preview": "true" }, "Calculate sample"),
-        previewOut,
-      ),
-      h("section", { class: "panel" },
-        h("h2", {}, "Saved revisions"),
-        historyUnavailable ? h("p", { class: "muted" }, "Saved history is unavailable.") : null,
-        history.length === 0 && !historyUnavailable ? h("p", { class: "muted" }, "No saved revision yet.") : null,
-        ...history.map((entry) => h("p", { class: "small" }, `Revision ${entry.revision} · ${entry.savedAt}`)),
-      ),
-      h("div", { class: "row" },
-        h("button", { type: "button", class: "btn primary", "data-save": "true" }, "Save defaults"),
-      ),
-    );
-    panel.querySelector("[data-preview]")?.addEventListener("click", () => void preview());
-    panel.querySelector("[data-save]")?.addEventListener("click", () => void save());
-    paintStatus();
+    const rules = disclosure("pricing-rules", "Rules & product exceptions", "Customize prices for part of your catalog", [
+      h("h3", {}, "Assortment, category or brand rules"), h("p", { class: "hint" }, "Use a different method for matching products. Matching rules are selected individually, never combined."), ruleRows(exceptions, "exception"),
+      add(exceptions, { name: "New rule", scope: "brand", match: "", method: "margin", targetMargin: 40, markup: "", msrpAdjustment: "", fixedMarkup: "" }, "Add rule"),
+      h("h3", {}, "Cost tiers"), h("p", { class: "hint" }, "Apply different cost-based pricing to different cost ranges."), ruleRows(tiers, "tier"),
+      add(tiers, { minimumCost: 0, maximumCost: "", method: "margin", targetMargin: 40, markup: "", fixedMarkup: "" }, "Add cost tier"),
+      h("h3", {}, "Product prices"), ruleRows(overrides, "override"), add(overrides, { productKey: "", price: 0 }, "Add product price"),
+    ]);
+    return [priceFormat, advanced, rules];
   }
-
-  async function load(): Promise<void> {
-    const response = await fetch(api, { headers: { accept: "application/json" } });
-    const body = await response.json() as SettingsResponse & { message?: string };
-    if (!response.ok || !body.ok) {
-      panel.replaceChildren(h("p", { class: "notice error", role: "alert" }, body.message || "Pricing and SKU defaults could not be loaded."));
-      return;
+  function skuControls(): HTMLElement[] {
+    if (!state || !isConfigured("sku")) return [];
+    const sku = state.draft.sku;
+    const numbered = ["sequential", "family", "hybrid"].includes(String(sku.method));
+    const separated = sku.method !== "random";
+    const hasPrefix = !["attributes", "random"].includes(String(sku.method));
+    return [h("section", { class: "editor-panel" },
+      h("div", { class: "section-heading" }, h("span", { class: "step-number", "aria-hidden": "true" }, "2"), h("h2", {}, "Fine-tune the format")),
+      h("div", { class: "fields-grid" },
+        hasPrefix ? textField(sku, "prefix", sku.method === "supplier" ? "Supplier prefix" : sku.method === "hybrid" ? "Category prefix" : "Prefix", touch, { maxlength: "12", spellcheck: "false" }) : null,
+        numbered ? numberField(sku, "startingNumber", "Starting number", touch, "A whole number. The preview pads it to six digits.") : null,
+        separated ? select(sku, "separator", "Separator", [{ value: "-", label: "Hyphen (–)" }, { value: "_", label: "Underscore (_)" }, { value: "", label: "None" }]) : null),
+      hasPrefix ? h("p", { class: "hint" }, "An optional prefix of up to 12 uppercase letters or digits, starting with a letter.") : null,
+      !separated ? h("p", { class: "hint" }, "No format options needed. Use eight uppercase letters and digits.") : null,
+      sku.method === "attributes" ? h("p", { class: "hint" }, "The sample illustrates brand, model, color and size abbreviations.") : null,
+      sku.method === "family" ? h("p", { class: "hint" }, "V03 illustrates a variant within a numbered product family.") : null,
+      sku.method === "supplier" ? h("p", { class: "hint" }, "AX204 illustrates a supplier’s item code.") : null,
+      sku.method === "deterministic" ? h("p", { class: "hint" }, "The sample uses a fixed item identity. Generated codes still need a uniqueness check.") : null)];
+  }
+  function savedHistory(): HTMLElement {
+    const entries: Node[] = [];
+    if (historyUnavailable) entries.push(h("p", { class: "hint" }, "Saved history is unavailable."));
+    if (!history.length && state?.savedRevision === null && !historyUnavailable) entries.push(h("p", { class: "hint" }, "Your first save will appear here."));
+    if (state?.savedRevision !== null && state?.savedRevision !== undefined && !history.some((entry) => entry.revision === state?.savedRevision)) entries.push(h("p", { class: "history-entry" }, `Revision ${state.savedRevision} · Saved in this session`));
+    for (const entry of history) {
+      const date = new Date(entry.savedAt);
+      entries.push(h("p", { class: "history-entry" }, `Revision ${entry.revision} · ${Number.isNaN(date.getTime()) ? entry.savedAt : date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}`));
     }
-    pricingMethods = body.pricingMethods;
-    skuMethods = body.skuMethods;
-    history = body.history;
-    historyUnavailable = body.historyUnavailable;
-    state = editorFromPayload(body);
-    if (typeof body.storeCurrency === "string") storeCurrency = body.storeCurrency;
-    renderForm();
+    return disclosure("history", "Saved history", state?.savedRevision === null ? "No saved defaults yet" : `Current revision ${state?.savedRevision}`, entries);
   }
-
-  async function save(): Promise<void> {
+  function renderEditor(): void {
     if (!state) return;
-    const current = state;
-    if (storeCurrency && current.currency !== storeCurrency) {
-      paintStatus(`Saved defaults are in ${current.currency}. This store is ${storeCurrency}. No currency conversion is applied.`);
-      return;
-    }
-    const response = await fetch(api, { method: "PUT", headers: { "content-type": "application/json", accept: "application/json" }, body: JSON.stringify(saveBody(current)) });
-    const body = await response.json() as { ok: boolean; code?: string; revision?: number | null; message?: string; issues?: string[]; pricing?: SettingsPayload["pricing"]; sku?: SettingsPayload["sku"] };
-    if (body.code === "revision_conflict") {
-      state = applySaveResult(current, { ok: false, code: "revision_conflict", revision: typeof body.revision === "number" ? body.revision : null, message: body.message || "These defaults changed. Your edits are still here." });
-      paintStatus();
-      return;
+    for (const details of editor.querySelectorAll<HTMLDetailsElement>("[data-disclosure]")) openDetails.set(details.dataset.disclosure ?? "", details.open);
+    const focused = document.activeElement as HTMLInputElement | null;
+    const focusKey = focused && editor.contains(focused) ? focused.dataset.focus : undefined;
+    const selection: [number | null, number | null] | null = focused?.tagName === "INPUT" && ["text", "search"].includes(focused.type) ? [focused.selectionStart, focused.selectionEnd] : null;
+    editor.replaceChildren(
+      h("div", { id: "settings-pricing-panel", role: "tabpanel", "aria-labelledby": "settings-pricing-tab", hidden: activeTab !== "pricing" }, methodPicker("pricing"), ...pricingControls()),
+      h("div", { id: "settings-sku-panel", role: "tabpanel", "aria-labelledby": "settings-sku-tab", hidden: activeTab !== "sku" }, methodPicker("sku"), ...skuControls()),
+      h("p", { class: "preserve-note" }, h("span", { "aria-hidden": "true" }, "✓"), " Saved listings keep their prices and SKUs. These defaults never overwrite them."), savedHistory());
+    if (focusKey) {
+      const control = Array.from(editor.querySelectorAll<HTMLElement>("[data-focus]")).find((node) => node.dataset.focus === focusKey);
+      control?.focus({ preventScroll: true });
+      if (selection && control instanceof HTMLInputElement) control.setSelectionRange(selection[0], selection[1]);
+      if (!control && focusKey.endsWith("-manual")) editor.querySelector<HTMLInputElement>(`input[name="${activeTab}-method"]`)?.focus({ preventScroll: true });
     }
-    if (!response.ok || !body.ok || typeof body.revision !== "number" || !body.pricing || !body.sku) {
-      paintStatus([body.message, ...(body.issues ?? [])].filter(Boolean).join(" "));
-      return;
+    refreshRuleChoices();
+  }
+  function setTab(section: Section, focus = false, updateHash = false): void {
+    activeTab = section;
+    if (updateHash) window.history.replaceState(window.history.state, "", `#${section}`);
+    for (const tab of tabs.querySelectorAll<HTMLButtonElement>("[data-tab]")) {
+      const selected = tab.dataset.tab === section;
+      tab.setAttribute("aria-selected", String(selected)); tab.tabIndex = selected ? 0 : -1;
+      if (selected && focus) tab.focus();
     }
-    state = applySaveResult(current, { ok: true, revision: body.revision, pricing: body.pricing, sku: body.sku });
-    renderForm();
+    for (const id of ["pricing", "sku"]) { const pane = editor.querySelector<HTMLElement>(`#settings-${id}-panel`); if (pane) pane.hidden = id !== section; }
   }
-
-  async function preview(): Promise<void> {
-    if (!state) return;
-    const current = state;
-    const draft = saveBody(current);
-    delete draft.expectedRevision;
-    const response = await fetch(previewUrl, {
-      method: "POST",
-      headers: { "content-type": "application/json", accept: "application/json" },
-      body: JSON.stringify({ ...draft, sample: { ...sample, ...Object.fromEntries(Object.entries(sampleText).filter(([, value]) => value !== "")) } }),
+  for (const section of ["pricing", "sku"] as const) {
+    const tab = h("button", { type: "button", role: "tab", id: `settings-${section}-tab`, "data-tab": section, "aria-controls": `settings-${section}-panel` }, section === "pricing" ? "Pricing" : "SKUs");
+    tab.addEventListener("click", () => setTab(section, false, true));
+    tab.addEventListener("keydown", (event) => {
+      if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+        event.preventDefault(); setTab(event.key === "Home" ? "pricing" : event.key === "End" ? "sku" : activeTab === "pricing" ? "sku" : "pricing", true, true);
+      }
     });
-    const body = await response.json() as { ok?: boolean; message?: string; issues?: string[]; pricing?: { status: string; preview?: { price: number | null; calculation: string; issues: string[]; ruleExplanation: string } }; sku?: { status: string; value?: string } };
-    previewOut.replaceChildren();
-    if (!response.ok || !body.ok) {
-      previewOut.append(h("p", { class: "notice error" }, [body.message, ...(body.issues ?? [])].filter(Boolean).join(" ")));
-      return;
-    }
-    if (body.pricing?.status === "ok" && body.pricing.preview) {
-      const calculated = body.pricing.preview;
-      previewOut.append(h("p", {}, calculated.price === null ? "No price" : `${current.currency} ${calculated.price.toFixed(2)}`));
-      if (calculated.calculation) previewOut.append(h("p", { class: "muted small" }, calculated.calculation));
-      if (calculated.ruleExplanation) previewOut.append(h("p", { class: "muted small" }, calculated.ruleExplanation));
-      for (const issue of calculated.issues) previewOut.append(h("p", { class: "notice error" }, issue));
-    } else previewOut.append(h("p", { class: "muted" }, "Pricing defaults are off for this draft."));
-    previewOut.append(h("p", {}, body.sku?.status === "ok" ? `SKU ${body.sku.value ?? ""}` : "SKU defaults are off for this draft."));
+    tabs.append(tab);
   }
+  window.addEventListener("hashchange", () => setTab(window.location.hash === "#sku" ? "sku" : "pricing"));
+  const ruleSelect = select(sampleText, "selectedRuleId", "Matching rule", [{ value: "", label: "Automatically match" }, { value: "store", label: "Use store default" }], schedulePreview, "sample-selectedRuleId");
+  function refreshRuleChoices(): void {
+    const control = ruleSelect.querySelector("select");
+    if (!control || !state) return;
+    const value = fieldString(sampleText, "selectedRuleId");
+    const exceptions = Array.isArray(state.draft.pricing.exceptions) ? state.draft.pricing.exceptions.map(asRecord) : [];
+    control.replaceChildren(h("option", { value: "" }, "Automatically match"), h("option", { value: "store" }, "Use store default"), ...exceptions.map((rule, index) => h("option", { value: String(rule.id) }, fieldString(rule, "name") || `Rule ${index + 1}`)));
+    if (value && value !== "store" && !exceptions.some((rule) => rule.id === value)) control.append(h("option", { value }, "Previously selected rule"));
+    control.value = value;
+  }
+  const previewPanel = h("aside", { class: "preview-panel", "aria-labelledby": "preview-title" },
+    h("div", { class: "preview-heading" }, h("span", { class: "eyebrow" }, "Live preview"), h("span", { class: "currency-badge" }, storeCurrency)),
+    h("h2", { id: "preview-title" }, "Example product"), h("p", { class: "hint" }, "Try your defaults before you save."), previewOut,
+    h("div", { class: "fields-grid sample-fields" }, numberField(sample, "wholesale", "Wholesale cost", schedulePreview, "", "sample-wholesale"), numberField(sample, "msrp", "Supplier MSRP", schedulePreview, "", "sample-msrp")),
+    disclosure("sample-context", "Try rules & limits", "Optional product details", [
+      h("div", { class: "fields-grid" }, numberField(sample, "minimum", "Product minimum price", schedulePreview, "", "sample-minimum"), numberField(sample, "maximum", "Product maximum price", schedulePreview, "", "sample-maximum")),
+      textField(sampleText, "productKey", "Product ID or SKU", schedulePreview, {}, "sample-productKey"),
+      ...["assortment", "category", "brand"].map((key) => textField(sampleText, key, key.charAt(0).toUpperCase() + key.slice(1), schedulePreview, {}, `sample-${key}`)), ruleSelect]),
+    h("p", { class: "preview-footnote" }, "A sample, not a catalog change. The SKU shown has not been reserved."));
 
+  function paintPreview(result: PreviewStatus<PreviewResponse>): void {
+    previewOut.setAttribute("aria-busy", String(result.status === "waiting" || result.status === "loading"));
+    if (result.status === "waiting" || result.status === "loading") {
+      previewOut.replaceChildren(h("div", { class: "preview-result pending" }, h("span", { class: "result-label" }, "Selling price"), h("strong", { class: "sample-price" }, "—"), h("p", { class: "hint" }, "Updating sample…"))); return;
+    }
+    if (result.status === "error") {
+      const retry = h("button", { type: "button", class: "btn secondary small" }, "Try again");
+      retry.addEventListener("click", schedulePreview);
+      previewOut.replaceChildren(h("div", { class: "preview-result unavailable" }, h("strong", {}, "Preview unavailable"), h("p", { class: "hint" }, result.message), retry)); return;
+    }
+    const body = result.value;
+    const calculated = body.pricing?.status === "ok" ? body.pricing.preview : undefined;
+    const metrics = h("dl", { class: "preview-metrics" });
+    if (calculated) {
+      const values: Array<[string, string]> = [["Product cost", calculated.cost === null ? "—" : money(calculated.cost, body.currency)], ["Gross profit", calculated.profit === null ? "—" : money(calculated.profit, body.currency)], ["Gross margin", calculated.margin === null ? "—" : `${calculated.margin.toFixed(1)}%`]];
+      for (const [label, value] of values) metrics.append(h("div", {}, h("dt", {}, label), h("dd", {}, value)));
+    }
+    previewOut.replaceChildren(
+      h("div", { class: "preview-result" }, h("span", { class: "result-label" }, "Selling price"),
+        h("strong", { class: `sample-price${!calculated ? " manual-result" : ""}` }, calculated ? calculated.price === null ? "Needs review" : money(calculated.price, body.currency) : "Manual price"),
+        h("span", { class: "result-method" }, calculated ? "Your draft price" : "Choose a pricing method to calculate"), metrics,
+        h("div", { class: "sku-result" }, h("span", { class: "result-label" }, "Sample SKU"), h("strong", {}, body.sku?.status === "ok" ? body.sku.value ?? "—" : "Entered manually"))),
+      ...(calculated?.calculation ? [h("p", { class: "calculation hint" }, calculated.calculation)] : []),
+      ...(calculated?.ruleExplanation && calculated.ruleExplanation !== "Store default" ? [h("p", { class: "hint applied-rule" }, calculated.ruleExplanation)] : []),
+      ...(calculated?.issues ?? []).map((issue) => h("p", { class: "notice review-note" }, issue)));
+  }
+  const preview = latestPreview<RecordValue, PreviewResponse>(async (draft, signal) => {
+    const response = await fetch(previewUrl, { method: "POST", headers: { "content-type": "application/json", accept: "application/json" }, body: JSON.stringify(draft), signal });
+    let body: PreviewResponse;
+    try { body = await response.json() as PreviewResponse; } catch { throw new Error("The server could not return a sample. Try again."); }
+    if (!response.ok || !body.ok) throw new Error(responseMessage(body, "The sample could not be calculated. Check your settings and try again."));
+    return body;
+  }, paintPreview);
+  function schedulePreview(): void {
+    if (!state) return;
+    if (currencyMismatch()) { preview.cancel(); paintPreview({ status: "error", message: "Saved defaults and this store use different currencies. No conversion is applied." }); return; }
+    const draft = structuredClone(saveBody(state)); delete draft.expectedRevision;
+    preview.schedule({ ...draft, sample: { ...sample, ...Object.fromEntries(Object.entries(sampleText).filter(([, value]) => value !== "")) } });
+  }
+  function mount(): void {
+    panel.replaceChildren(tabs, status, h("div", { class: "settings-layout" }, editor, previewPanel), h("div", { class: "save-bar" }, h("div", { class: "save-bar-inner" }, saveStatus, h("div", { class: "save-actions" }, discardButton, saveButton))));
+    renderEditor(); setTab(activeTab); paintStatus(); schedulePreview();
+  }
+  async function load(): Promise<void> {
+    if (saving || loading) return;
+    loading = true; editor.inert = true; paintStatus();
+    if (!state) panel.replaceChildren(h("p", { class: "loading-note", role: "status" }, "Loading your store defaults…"));
+    try {
+      const response = await fetch(api, { headers: { accept: "application/json" } });
+      const body = await response.json() as SettingsResponse & { message?: string };
+      if (!response.ok || !body.ok) throw new Error(body.message || "Your defaults could not be loaded. Try again.");
+      pricingMethods = body.pricingMethods; skuMethods = body.skuMethods; history = body.history; historyUnavailable = body.historyUnavailable;
+      state = editorFromPayload(body);
+      if (typeof body.storeCurrency === "string") storeCurrency = body.storeCurrency;
+      const badge = previewPanel.querySelector(".currency-badge"); if (badge) badge.textContent = state.currency;
+      feedback = ""; feedbackError = false; loading = false; mount();
+    } catch {
+      feedback = "Your defaults could not be loaded. Check your connection and try again."; feedbackError = true;
+      if (state) paintStatus();
+      else {
+        const retry = h("button", { type: "button", class: "btn secondary" }, "Try again"); retry.addEventListener("click", () => void load());
+        panel.replaceChildren(h("div", { class: "notice error", role: "alert" }, h("p", {}, feedback), retry));
+      }
+    } finally { loading = false; editor.inert = false; paintStatus(); }
+  }
+  async function save(): Promise<void> {
+    if (!state || saving || loading || currencyMismatch() || state.conflict || !draftIsDirty(state)) return;
+    const submitted = structuredClone(state);
+    saving = true; feedback = ""; feedbackError = false; paintStatus();
+    try {
+      const response = await fetch(api, { method: "PUT", headers: { "content-type": "application/json", accept: "application/json" }, body: JSON.stringify(saveBody(submitted)) });
+      const body = await response.json() as { ok: boolean; code?: string; revision?: number | null; message?: string; issues?: string[]; pricing?: SettingsPayload["pricing"]; sku?: SettingsPayload["sku"] };
+      if (body.code === "revision_conflict") {
+        state = applySaveAfterEdits(state, submitted, { ok: false, code: "revision_conflict", revision: typeof body.revision === "number" ? body.revision : null, message: body.message || "These defaults were saved by someone else. Your edits are still here. Load the saved defaults to continue." }); return;
+      }
+      if (!response.ok || !body.ok || typeof body.revision !== "number" || !body.pricing || !body.sku) throw new Error(responseMessage(body, "Your defaults could not be saved. Your edits are still here."));
+      state = applySaveAfterEdits(state, submitted, { ok: true, revision: body.revision, pricing: body.pricing, sku: body.sku });
+      feedback = draftIsDirty(state) ? "Saved. Your newer edits are still unsaved." : "Defaults saved";
+      renderEditor(); schedulePreview();
+    } catch (error) { feedback = error instanceof Error ? error.message : "Your defaults could not be saved. Your edits are still here."; feedbackError = true; }
+    finally { saving = false; paintStatus(); }
+  }
+  saveButton.addEventListener("click", () => void save());
+  discardButton.addEventListener("click", () => {
+    if (!state?.saved || saving || loading) return;
+    state.draft = structuredClone(state.saved); feedback = ""; feedbackError = false;
+    renderEditor(); paintStatus(); schedulePreview();
+  });
   void load();
 }

package/apps/storefront/src/lib/admin/catalogSettingsPreview.ts

@@ -0,0 +1,37 @@
+/** Immediately invalidate a sample, debounce requests, and admit only the latest result. */
+export type PreviewStatus<T> =
+  | { status: "waiting" }
+  | { status: "loading" }
+  | { status: "ready"; value: T }
+  | { status: "error"; message: string };
+
+export function latestPreview<Input, Output>(
+  request: (input: Input, signal: AbortSignal) => Promise<Output>,
+  publish: (state: PreviewStatus<Output>) => void,
+  delay = 250,
+): { schedule: (input: Input) => void; cancel: () => void } {
+  let generation = 0;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let active: AbortController | undefined;
+  function cancel(): void {
+    generation++;
+    clearTimeout(timer);
+    active?.abort();
+  }
+  function schedule(input: Input): void {
+    cancel();
+    const current = generation;
+    publish({ status: "waiting" });
+    timer = setTimeout(async () => {
+      active = new AbortController();
+      publish({ status: "loading" });
+      try {
+        const value = await request(input, active.signal);
+        if (current === generation) publish({ status: "ready", value });
+      } catch (error) {
+        if (current === generation) publish({ status: "error", message: error instanceof Error ? error.message : "The sample could not be calculated. Try again." });
+      }
+    }, delay);
+  }
+  return { schedule, cancel };
+}

package/apps/storefront/src/lib/admin/catalogSettingsState.ts

@@ -82,6 +82,31 @@ export function draftIsDirty(state: SettingsEditorState): boolean {
   return JSON.stringify(state.draft) !== JSON.stringify(state.saved);
 }
 
+/** Invalid text remains in the draft so the settings schema rejects it visibly. */
+export function parseSettingsNumber(raw: string): number | string {
+  if (raw.trim() === "") return "";
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : raw;
+}
+
+/** Choosing a method configures only that section, retaining all inactive fields. */
+export function selectDraftMethod(state: SettingsEditorState, section: "pricing" | "sku", method: string): void {
+  state.draft[section].method = method;
+  state.draft[section === "pricing" ? "pricingConfigured" : "skuConfigured"] = true;
+  if (section === "pricing" && method === "margin" && state.draft.pricing.targetMargin === "") {
+    state.draft.pricing.targetMargin = 40;
+  }
+}
+
+/** The saved baseline belongs to the request snapshot; subsequent edits stay dirty. */
+export function applySaveAfterEdits(state: SettingsEditorState, submitted: SettingsEditorState, result: SaveOutcome): SettingsEditorState {
+  if (!result.ok) return applySaveResult(state, result);
+  const saved = applySaveResult(submitted, result);
+  return JSON.stringify(state.draft) === JSON.stringify(submitted.draft)
+    ? saved
+    : { ...saved, draft: state.draft };
+}
+
 /** A conflict leaves the draft reference in place and does not move the expected revision. */
 export function applySaveResult(state: SettingsEditorState, result: SaveOutcome): SettingsEditorState {
   if (result.ok) {

package/apps/storefront/src/lib/admin/productSetupPhoto.ts

@@ -0,0 +1,23 @@
+/** One preview attempt, with a stable missing/broken photo placeholder. */
+export function productSetupPhoto(url: string | undefined, size: number, api: string): HTMLElement {
+  const box = document.createElement("span");
+  box.className = "photo-preview";
+  box.style.width = `${size}px`;
+  box.style.height = `${size}px`;
+  const placeholder = document.createElement("span");
+  placeholder.className = "img-empty";
+  placeholder.textContent = "No photo";
+  box.append(placeholder);
+  if (url) {
+    const image = document.createElement("img");
+    image.alt = "";
+    image.width = size;
+    image.height = size;
+    image.loading = "lazy";
+    image.addEventListener("error", () => { image.remove(); placeholder.hidden = false; }, { once: true });
+    image.addEventListener("load", () => { placeholder.hidden = true; }, { once: true });
+    image.src = url.startsWith("/api/admin/catalog/media?") ? `${api}/media?${url.split("?", 2)[1]}` : url;
+    box.append(image);
+  }
+  return box;
+}

package/apps/storefront/src/pages/products/[handle].astro

@@ -16,6 +16,7 @@ import VariantSelector, { publicSelectorVariants } from "@/components/islands/Va
 import CheckoutComplianceGate from "@/components/islands/CheckoutComplianceGate.tsx";
 import RecentlyViewed from "@/components/islands/RecentlyViewed.tsx";
 import NicotineWarning from "@/components/compliance/NicotineWarning.astro";
+import Prop65Warning from "@/components/compliance/Prop65Warning.astro";
 import ReviewSummary from "@/components/commerce/ReviewSummary.astro";
 import ReviewList from "@/components/commerce/ReviewList.astro";
 import { isOnSale, isNew, isAvailable, fromPrice } from "@/lib/tot/query";
@@ -348,6 +349,16 @@ const jsonLd = [productJsonLd, breadcrumbLd(crumbs, canonicalBase)];
         </div>
       )}
 
+      {/* California Prop 65 (Cal. Code Regs. tit. 27 § 25601+): the safe-harbor
+          warning must reach the purchaser before checkout completes, so the PDP
+          — the point of sale here (no in-app cart page; checkout is an external
+          handoff) — is the mandated placement. */}
+      {compliance?.prop65 && (
+        <div class="mt-6">
+          <Prop65Warning variant="block" config={compliance.prop65} />
+        </div>
+      )}
+
       {restrictedStates.length > 0 && (
         <div class="mt-4 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm" role="note">
           <p class="font-display font-medium text-[var(--color-text)]">Where we can ship this</p>

package/package.json

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