@tokenoftrust/storefront-runner 4.3.0 → 4.3.1

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

@@ -1,14 +1,20 @@
 /** Catalog defaults: progressively revealed controls and an authoritative live sample. */
 import {
-  applySaveAfterEdits, draftIsDirty, editorFromPayload, parseSettingsNumber, saveBody, selectDraftMethod,
+  applySaveAfterEdits, draftIsDirty, editorFromPayload, saveBody, selectDraftMethod,
   type SettingsEditorState, type SettingsPayload,
 } from "@/lib/catalog/admin/catalogSettingsState";
+import {
+  asRecord, createCatalogSettingsFields, fieldString, h, METHOD_TITLES, responseMessage,
+  type MethodOption, type MethodPickerContext, type RecordValue,
+} from "@/lib/catalog/admin/catalogSettingsFields";
+import { renderPricingControls, renderPricingMethodPicker } from "@/lib/catalog/admin/catalogSettingsPricingView";
+import { renderSkuControls, renderSkuMethodPicker } from "@/lib/catalog/admin/catalogSettingsSkuView";
 import { latestPreview, type PreviewStatus } from "@/lib/catalog/admin/catalogSettingsPreview";
 
-interface MethodOption { id: string; title: string; reason: string }
 interface SettingsResponse extends SettingsPayload {
   ok: true;
   pricingMethods: MethodOption[];
+  skuMethods: MethodOption[];
   history: Array<{ revision: number; savedAt: string; actor: string }>;
   historyUnavailable: boolean;
 }
@@ -18,49 +24,7 @@ interface PreviewResponse {
     price: number | null; cost: number | null; profit: number | null; margin: number | null;
     calculation: string; issues: string[]; ruleExplanation: string;
   } };
-}
-type Child = Node | string | null | undefined | false;
-type RecordValue = Record<string, unknown>;
-
-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) node.setAttribute(key, value === true ? "" : value);
-  for (const child of children) if (child !== null && child !== undefined && child !== false) node.append(child);
-  return node;
-}
-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",
-};
-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",
-  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;
+  sku?: { status: string; value?: string; issues?: unknown };
 }
 
 export function initCatalogSettingsPage(root: HTMLElement): void {
@@ -72,6 +36,7 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
   let state: SettingsEditorState | null = null;
   let storeCurrency = root.dataset.currency ?? "";
   let pricingMethods: MethodOption[] = [];
+  let skuMethods: MethodOption[] = [];
   let history: SettingsResponse["history"] = [];
   let historyUnavailable = false;
   let saving = false;
@@ -92,8 +57,7 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
     catch { return `${currency} ${value.toFixed(2)}`; }
   };
   const currencyMismatch = () => Boolean(state && storeCurrency && state.currency !== storeCurrency);
-  const isConfigured = () => state?.draft.pricingConfigured === true;
-  const methodTitle = (id: string) => METHOD_TITLES[id] ?? pricingMethods.find((method) => method.id === id)?.title ?? "Saved method";
+  const methodTitle = (id: string) => METHOD_TITLES[id] ?? [...pricingMethods, ...skuMethods].find((method) => method.id === id)?.title ?? "Saved method";
 
   function paintStatus(): void {
     if (!state) return;
@@ -118,154 +82,26 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
   }
   function touch(): void { feedback = ""; feedbackError = false; paintStatus(); refreshRuleChoices(); schedulePreview(); }
 
-  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 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", { class: "field" }, h("span", {}, 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: 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] = key === "prefix" ? control.value.toUpperCase() : control.value;
-      if (key === "prefix") control.value = String(record[key]);
-      onChange();
-    });
-    return h("label", { class: "field" }, h("span", {}, label), control);
-  }
-  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; touch(); });
-    return h("label", { class: "check-field" }, control, h("span", {}, label));
-  }
-  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 methodPicker(): HTMLElement {
-    if (!state) return h("div");
-    const record = state.draft.pricing;
-    const configured = isConfigured();
-    const commonIds = ["msrp", "margin", "markup"];
-    const common = pricingMethods.filter((method) => commonIds.includes(method.id));
-    const more = pricingMethods.filter((method) => !commonIds.includes(method.id));
-    const sampleExamples: Record<string, string> = {
-      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)}`,
-    };
-    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.",
-    };
-    const card = (method: MethodOption) => {
-      const selected = configured && record.method === method.id;
-      const radio = h("input", { type: "radio", name: "pricing-method", value: method.id, "data-focus": `pricing-${method.id}` });
-      radio.checked = selected;
-      radio.addEventListener("change", () => { if (state) { selectDraftMethod(state, "pricing", 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 fields = createCatalogSettingsFields(touch, openDetails);
+  const { select, numberField, textField, disclosure } = fields;
+  function methodContext(section: "pricing" | "sku"): MethodPickerContext | null {
+    if (!state) return null;
+    return {
+      fields, record: state.draft[section], configured: state.draft[section === "pricing" ? "pricingConfigured" : "skuConfigured"] === true,
+      methods: section === "pricing" ? pricingMethods : skuMethods, methodTitle, money,
+      selectMethod: (id) => { if (state) { selectDraftMethod(state, section, id); touch(); renderEditor(); } },
+      useManual: () => { if (state) { state.draft[section === "pricing" ? "pricingConfigured" : "skuConfigured"] = false; touch(); renderEditor(); } },
     };
-    const manual = h("button", { type: "button", class: "text-button", "data-focus": "pricing-manual", "aria-pressed": String(!configured) }, "Use manual prices instead");
-    manual.addEventListener("click", () => {
-      if (!state) return;
-      state.draft.pricingConfigured = false;
-      touch(); renderEditor();
-    });
-    return h("section", { class: "editor-panel method-panel", "aria-labelledby": "pricing-method-heading" },
-      h("div", { class: "section-heading" }, h("span", { class: "step-number", "aria-hidden": "true" }, "1"), h("h2", { id: "pricing-method-heading" }, "Choose your pricing method")),
-      h("p", { class: "section-intro" }, "One starting point for every new product."),
-      !configured ? h("p", { class: "manual-note" }, "Manual pricing is on. Choose a method to set a default.") : null,
-      h("div", { class: "method-grid" }, ...common.map(card)),
-      disclosure("pricing-more", "More methods", "Adjust MSRP or add a fixed amount", [h("div", { class: "method-grid more-grid" }, ...more.map(card))], configured && more.some((method) => method.id === record.method)),
-      configured && METHOD_FIELDS[String(record.method)] ? h("div", { class: "method-parameter" }, parameter(record)) : null,
-      configured ? manual : null);
-  }
-
-  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 pricingControls(): HTMLElement[] {
-    if (!state || !isConfigured()) return [];
-    const pricing = state.draft.pricing;
-    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: 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;
-    };
-    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];
+    return state?.draft.pricingConfigured === true ? renderPricingControls(state.draft.pricing, {
+      fields, touch, repaint: () => { touch(); renderEditor(); }, money, methodTitle,
+    }) : [];
+  }
+  function skuSection(): HTMLElement[] {
+    const context = skuMethods.length > 0 ? methodContext("sku") : null;
+    if (!context || !state) return [];
+    return [renderSkuMethodPicker(context), ...(state.draft.skuConfigured ? renderSkuControls(state.draft.sku, fields, touch) : [])];
   }
   function savedHistory(): HTMLElement {
     const entries: Node[] = [];
@@ -284,14 +120,16 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
     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;
+    const pricing = methodContext("pricing");
     editor.replaceChildren(
-      h("div", { id: "settings-pricing-panel" }, methodPicker(), ...pricingControls()),
+      h("div", { id: "settings-pricing-panel" }, pricing ? renderPricingMethodPicker(pricing) : null, ...pricingControls()),
+      ...skuSection(),
       h("p", { class: "preserve-note" }, h("span", { "aria-hidden": "true" }, "✓"), " Saved listings keep their prices and merchant SKUs. Pricing 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="pricing-method"]`)?.focus({ preventScroll: true });
+      if (!control && focusKey.endsWith("-manual")) editor.querySelector<HTMLInputElement>(`input[name="${focusKey.startsWith("sku-") ? "sku" : "pricing"}-method"]`)?.focus({ preventScroll: true });
     }
     refreshRuleChoices();
   }
@@ -312,7 +150,7 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
     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]),
+      ...(["assortment", "category", "brand"] as const).map((key) => textField(sampleText, key, key.charAt(0).toUpperCase() + key.slice(1), schedulePreview, {}, `sample-${key}`)), ruleSelect]),
     h("p", { class: "preview-footnote" }, "A sample price; saving it does not change catalog references or existing listings."));
 
   function paintPreview(result: PreviewStatus<PreviewResponse>): void {
@@ -332,13 +170,19 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
       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)));
     }
+    const skuValue = body.sku?.status === "ok" && typeof body.sku.value === "string" ? body.sku.value : "";
+    const skuIssues = body.sku?.status === "review-needed" && Array.isArray(body.sku.issues) && body.sku.issues.every((issue) => typeof issue === "string")
+      ? body.sku.issues
+      : [];
     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("span", { class: "result-method" }, calculated ? "Your draft price" : "Choose a pricing method to calculate"), metrics,
+        skuValue ? h("span", { class: "sku-result" }, skuValue) : null),
       ...(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)));
+      ...(calculated?.issues ?? []).map((issue) => h("p", { class: "notice review-note" }, issue)),
+      ...skuIssues.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 });
@@ -364,8 +208,8 @@ export function initCatalogSettingsPage(root: HTMLElement): void {
     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; history = body.history; historyUnavailable = body.historyUnavailable;
+      if (!response.ok || !body.ok || !Array.isArray(body.skuMethods)) 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;

package/apps/storefront/src/lib/catalog/admin/catalogSettingsFields.ts

@@ -0,0 +1,134 @@
+/** Text-safe controls and named catalog settings fields. */
+import { parseSettingsNumber } from "@/lib/catalog/admin/catalogSettingsState";
+
+export type Child = Node | string | null | undefined | false;
+export type Section = "pricing" | "sku";
+export type RecordValue = Record<string, unknown>;
+
+export 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) node.setAttribute(key, value === true ? "" : value);
+  for (const child of children) if (child !== null && child !== undefined && child !== false) node.append(child);
+  return node;
+}
+export interface MethodParameterField { readonly key: CatalogFieldKey; readonly label: string; readonly hint: string }
+export const METHOD_FIELDS: Readonly<Partial<Record<string, MethodParameterField>>> = {
+  margin: { key: "targetMargin", label: "Target gross margin (%)", hint: "The share of your selling price left after product cost." },
+  markup: { key: "markup", label: "Markup over cost (%)", hint: "100% doubles cost. That gives a 50% gross margin." },
+  "msrp-adjustment": { key: "msrpAdjustment", label: "MSRP adjustment (%)", hint: "−10 is 10% below MSRP; +10 is 10% above." },
+  fixed: { key: "fixedMarkup", label: "Amount added to cost", hint: "Add this amount to the cost of each item." },
+};
+export const METHOD_TITLES: Readonly<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",
+};
+export const FIELD_LABELS = {
+  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",
+} as const satisfies Readonly<Record<string, string>>;
+export type CatalogFieldKey = keyof typeof FIELD_LABELS | "assortment" | "category" | "brand" | "preserveMsrp" | "capAtMsrp" | "includeManualOverrides";
+export function asRecord(value: unknown): RecordValue { return value && typeof value === "object" ? value as RecordValue : {}; }
+export function fieldString(record: RecordValue, key: string): string {
+  const value = record[key];
+  return typeof value === "number" || typeof value === "string" ? String(value) : "";
+}
+export 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: string = FIELD_LABELS[(path.at(-1) ?? "") as keyof typeof FIELD_LABELS] ?? "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 createCatalogSettingsFields(touch: () => void, openDetails: ReadonlyMap<string, boolean>) {
+  function select(record: RecordValue, key: CatalogFieldKey, label: string, options: Array<{ value: string; label: string }>, onChange: () => void = touch, focusKey: string = key): HTMLElement {
+    const current = fieldString(record, key);
+    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", { class: "field" }, h("span", {}, label), control);
+  }
+  function numberField(record: RecordValue, key: CatalogFieldKey, label: string, onChange: () => void = touch, hint = "", focusKey: string = 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: RecordValue, key: CatalogFieldKey, label: string, onChange: () => void = touch, attrs: Record<string, string> = {}, focusKey: string = key): HTMLElement {
+    const control = h("input", { type: "text", "data-focus": focusKey, value: fieldString(record, key), autocomplete: "off", ...attrs });
+    control.addEventListener("input", () => {
+      record[key] = key === "prefix" ? control.value.toUpperCase() : control.value;
+      if (key === "prefix") control.value = String(record[key]);
+      onChange();
+    });
+    return h("label", { class: "field" }, h("span", {}, label), control);
+  }
+  function flag(record: RecordValue, key: CatalogFieldKey, label: string): HTMLElement {
+    const control = h("input", { type: "checkbox", "data-focus": key });
+    control.checked = record[key] === true;
+    control.addEventListener("change", () => { record[key] = control.checked; touch(); });
+    return h("label", { class: "check-field" }, control, h("span", {}, label));
+  }
+  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.key, field.label, touch, field.hint, `${prefix}${field.key}`) : null;
+  }
+  return { select, numberField, textField, flag, disclosure, parameter };
+}
+export type CatalogSettingsFields = ReturnType<typeof createCatalogSettingsFields>;
+export interface MethodOption { id: string; title: string; reason: string }
+export interface MethodPickerContext {
+  fields: CatalogSettingsFields; record: RecordValue; configured: boolean; methods: MethodOption[];
+  methodTitle: (id: string) => string; money: (value: number) => string;
+  selectMethod: (id: string) => void; useManual: () => void;
+}
+function examples(section: Section, money: (value: number) => string): 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" };
+}
+export function renderCatalogMethodPicker(section: Section, context: MethodPickerContext): HTMLElement {
+  const { fields: { disclosure, parameter }, record, configured, methods: all, methodTitle, money, selectMethod, useManual } = context;
+  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, money);
+  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", () => selectMethod(method.id));
+    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", useManual);
+  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);
+}

package/apps/storefront/src/lib/catalog/admin/catalogSettingsPricingView.ts

@@ -0,0 +1,39 @@
+/** Pricing methods, finishing, costs and limits. */
+import { h, METHOD_FIELDS, renderCatalogMethodPicker, type MethodPickerContext, type RecordValue } from "@/lib/catalog/admin/catalogSettingsFields";
+import { renderPricingRules, type RuleViewContext } from "@/lib/catalog/admin/catalogSettingsRuleView";
+export interface PricingViewContext extends RuleViewContext { money: (value: number) => string }
+export function renderPricingMethodPicker(context: MethodPickerContext): HTMLElement { return renderCatalogMethodPicker("pricing", context); }
+export function renderPricingControls(pricing: RecordValue, context: PricingViewContext): HTMLElement[] {
+    const { fields: { select, textField, numberField, flag, disclosure }, touch, repaint, money, methodTitle } = context;
+    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.key, `Fallback ${fallbackField.label.toLowerCase()}`, touch, "Choose a fallback that uses a different price source.", `fallback-${fallbackField.key}`) : 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"),
+    ]);
+    return [priceFormat, advanced, renderPricingRules(pricing, context)];
+}

package/apps/storefront/src/lib/catalog/admin/catalogSettingsRuleView.ts

@@ -0,0 +1,44 @@
+/** Rules, cost tiers and product-specific pricing controls. */
+import { h, asRecord, type RecordValue, type CatalogSettingsFields } from "@/lib/catalog/admin/catalogSettingsFields";
+export interface RuleViewContext { fields: CatalogSettingsFields; touch: () => void; repaint: () => void; methodTitle: (id: string) => string }
+export function renderRuleRows(list: RecordValue[], kind: "exception" | "tier" | "override", context: RuleViewContext): HTMLElement {
+    const { fields: { textField, select, numberField, parameter }, touch, repaint, methodTitle } = context;
+    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); repaint(); });
+      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; repaint(); }, `${prefix}method`) : null,
+          kind !== "override" ? parameter(rule, prefix) : null));
+    }));
+  }
+
+export function renderPricingRules(pricing: RecordValue, context: RuleViewContext): HTMLDetailsElement {
+  const { fields: { disclosure }, repaint } = context;
+    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: 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() }); repaint(); });
+      return button;
+    };
+    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."), renderRuleRows(exceptions, "exception", context),
+      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."), renderRuleRows(tiers, "tier", context),
+      add(tiers, { minimumCost: 0, maximumCost: "", method: "margin", targetMargin: 40, markup: "", fixedMarkup: "" }, "Add cost tier"),
+      h("h3", {}, "Product prices"), renderRuleRows(overrides, "override", context), add(overrides, { productKey: "", price: 0 }, "Add product price"),
+    ]);
+  return rules;
+}

package/apps/storefront/src/lib/catalog/admin/catalogSettingsSkuView.ts

@@ -0,0 +1,21 @@
+/** SKU method selection and format controls. */
+import { h, renderCatalogMethodPicker, type MethodPickerContext, type RecordValue, type CatalogSettingsFields } from "@/lib/catalog/admin/catalogSettingsFields";
+export function renderSkuMethodPicker(context: MethodPickerContext): HTMLElement { return renderCatalogMethodPicker("sku", context); }
+export function renderSkuControls(sku: RecordValue, fields: CatalogSettingsFields, touch: () => void): HTMLElement[] {
+    const { textField, numberField, select } = fields;
+    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)];
+  }

package/package.json

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