@womp/mcp-ui 0.1.6 → 0.1.8

package/src/print/main.ts

@@ -1,309 +1,846 @@
 import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
+import { expandHexInput, nearestPantone, normalizeHex, pantoneChips } from "./pantone";
 
 /**
- * The print card — a live configurator, and the way out to checkout.
+ * The print card — the web print panel's configurator, compressed to a card.
  *
- * The whole point (why this is not a static receipt): the user turns the knobs
- * — material, size, quantity — and the card re-quotes THROUGH THE HOST by
- * calling `estimate_print` itself, so tuning a print never round-trips through
- * the conversation. The model seeds the starting settings simply by calling
- * the tool with them: the host announces the call's arguments (`ontoolinput`)
- * before any result exists, and the controls initialize from that.
+ * Same flow as the panel (NewPrintingPanel.tsx): Size → Material → Print style
+ * → review with quantity and price → the one primary action. Same controls
+ * where the panel has them: W/H/D in cm or inches, swatch tiles grouped
+ * Standard / Enterprise, a Matte/Glossy finish on clear resin, a colour picker
+ * with the nearest-Pantone readout on dyed materials, Solid vs Hollow with both
+ * prices, a quantity stepper, currency-formatted totals with the discount
+ * struck through. What the panel does to the 3D viewport (drain holes, wall
+ * thickness, X-ray) stays on womp.com, which is where Hollow hands off.
  *
- * Deliberately NO payment surface: "Add to cart" calls the app-callable
- * `add_to_cart` (creates a free project + a real cart item), and the button
- * then becomes "Checkout on womp.com" — a `ui/open-link` to the cart checkout
- * at /pay/<ids>, where address, shipping, promo codes and payment all run in
- * the one existing cart UI. Turning any knob after an add resets the button
- * to "Add to cart" so the checkout link always matches the shown settings.
+ * The card re-quotes THROUGH THE HOST by calling `estimate_print` itself, so
+ * tuning a print never round-trips through the conversation. The model seeds
+ * the starting settings simply by calling the tool with them: the host
+ * announces the call's arguments (`ontoolinput`) before any result exists.
  *
- * Static mode: a result that already carries `printUrl` (the model called
- * prepare_print directly) renders as a receipt — no controls, the button just
- * opens the link.
+ * Deliberately NO payment surface. "Add to cart" calls the app-callable
+ * `add_to_cart` (a free project + a real cart item) and then becomes "Checkout
+ * on womp.com" — a `ui/open-link` to /pay/<ids>, where address, shipping, promo
+ * codes and payment run in the one existing cart UI. Hollow never orders from
+ * here at all: escape holes are placed in the editor, so its button is
+ * "Continue on womp.com" via `prepare_print`.
+ *
+ * Colour: the panel snaps a pick to the nearest Pantone coated shade and sends
+ * the code; chat orders send a hex. The card snaps the same way and sends the
+ * snapped shade's own hex, so both paths print the same colour and show the
+ * same "Pantone 2386 C". Colour never changes the price, so it never re-quotes.
  */
 
-/** One priced variant, as swan-backend's QUOTE_ROW_SCHEMA emits it. */
 interface QuoteRow {
   salePrice: number;
   discount: number;
   unitPrice: number;
   productionDays: number;
 }
-
-/** structuredContent of estimate_print / prepare_print (api/mcp.ts §13). */
+interface Dims {
+  width: number;
+  height: number;
+  depth: number;
+}
+interface PrintMaterialOption {
+  id: string;
+  label?: string;
+  group?: "standard" | "enterprise";
+  description?: string;
+  swatchUrl?: string;
+  available?: boolean;
+  unavailableReason?: string;
+  contactUrl?: string;
+  colorRequired?: boolean;
+  colorOptional?: boolean;
+  finishes?: string[];
+  pricedAs?: string;
+}
+/** structuredContent of estimate_print / prepare_print (swan-backend api/mcp.ts §13). */
 interface PrintQuoteResult {
+  /** The catalog key the card is keyed on — echoed unchanged by the backend. */
   material?: string;
+  pricedAs?: string;
+  materialLabel?: string;
+  finish?: string;
+  color?: string;
   quantity?: number;
   longestSideCm?: number;
-  dimensionsCm?: { width: number; height: number; depth: number };
+  dimensionsCm?: Dims;
   solid?: QuoteRow;
   hollow?: QuoteRow;
   callerIsPro?: boolean;
-  /** Which mesh was quoted — what re-quotes and prepare_print are keyed on. */
+  repaired?: boolean;
+  nonManifold?: boolean;
   source?: { generationId?: number; glbUrl?: string };
-  /**
-   * Present on estimate results only — populates the material picker.
-   *
-   * `label` and `swatchUrl` come from the backend material catalog
-   * (swan-backend docs/PRINT_MATERIALS.md). Before it existed this was a list
-   * of pricing ids, so the picker read "resin-clear-glossy" where the print
-   * flow says "Clear". Both stay optional: an id with no catalog entry yet
-   * still has to appear.
-   */
+  /** Present on estimate results only; role-aware for this account. */
   materials?: PrintMaterialOption[];
   projectId?: number;
   /** Present on prepare_print results only. */
   printUrl?: string;
 }
 
-interface PrintMaterialOption {
-  id: string;
-  label?: string;
-  group?: "standard" | "enterprise";
-  swatchUrl?: string;
-  available?: boolean;
-  colorRequired?: boolean;
-}
+type Unit = "cm" | "in";
+type Style = "solid" | "hollow";
+type Axis = keyof Dims;
 
-const usd = (n: number) => `$${n.toFixed(2)}`;
+const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+const money = (n: number) => usd.format(n);
 
-const materialSelect = $("material") as HTMLSelectElement;
-const swatchImg = $("swatch") as HTMLImageElement;
-const longestInput = $("longest") as HTMLInputElement;
-const quantityInput = $("quantity") as HTMLInputElement;
-const orderBtn = $("order") as HTMLButtonElement;
+/** The bounds the panel enforces (usePrintingParams): a 60 × 60 × 40 cm ceiling. */
+const HARD_MAX_CM: Dims = { width: 60, height: 60, depth: 40 };
+/** The MCP contract's longest-side range. */
+const MIN_LONGEST_CM = 2;
+const MAX_LONGEST_CM = 60;
+/** The blue the panel seeds when switching into Tinted clear (NPP:7133). */
+const PANEL_DEFAULT_TINT = "#276ee2";
+/** The panel's own re-price debounce. */
+const REQUOTE_DEBOUNCE_MS = 500;
+const AXES: Axis[] = ["width", "height", "depth"];
+
+const state = {
+  materials: [] as PrintMaterialOption[],
+  material: "",
+  finish: undefined as string | undefined,
+  /** The user's exact pick, lowercase #rrggbb. What is SENT is its nearest Pantone's hex. */
+  color: undefined as string | undefined,
+  /** For dye-optional materials (Painted): "original" = full colour, "custom" = dyed. */
+  colorMode: "original" as "original" | "custom",
+  quantity: 1,
+  longestSideCm: undefined as number | undefined,
+  dims: undefined as Dims | undefined,
+  unit: "cm" as Unit,
+  style: "solid" as Style,
+  quote: undefined as PrintQuoteResult | undefined,
+  source: undefined as PrintQuoteResult["source"],
+  /** A prepare_print result rendered by a model call: a receipt, not a configurator. */
+  staticPrintUrl: "",
+  /** Set once the shown settings are in the cart; cleared by any knob turn. */
+  cartCheckoutUrl: "",
+  /** Set once a hollow hand-off project exists for the shown settings. */
+  preparedUrl: "",
+  quoting: false,
+  enterpriseOpen: false,
+  /** The gated Enterprise material the user last tapped, for the contact note. */
+  gatedTap: undefined as PrintMaterialOption | undefined,
+  sizeNotice: "",
+};
 
-/** The mesh being quoted, and whether the card is a receipt or a configurator. */
-let source: { generationId?: number; glbUrl?: string } | undefined;
-let staticPrintUrl: string | undefined;
-/** Set once the shown settings are in the cart; cleared by any knob turn. */
-let cartCheckoutUrl = "";
 /** Monotonic guard: a slow older quote must never overwrite a newer one. */
 let quoteSeq = 0;
 let debounceTimer: number | undefined;
 
+// --- helpers ---------------------------------------------------------------
+
+const selectedMaterial = () => state.materials.find((m) => m.id === state.material);
+const materialLabel = (m?: PrintMaterialOption) => m?.label || m?.id || state.quote?.materialLabel || state.material;
+const isClear = (m?: PrintMaterialOption) => (m?.pricedAs || m?.id || "") === "resin-clear";
+/** Whether the current selection carries a dye. */
+function needsColor(m = selectedMaterial()): boolean {
+  if (!m) return false;
+  if (m.colorRequired) return true;
+  return !!m.colorOptional && state.colorMode === "custom";
+}
+/** The colour an order would carry: the nearest Pantone's hex of the user's pick. */
+function snappedColor(): { code: string; hex: string } | undefined {
+  if (!needsColor()) return undefined;
+  return nearestPantone(state.color || PANEL_DEFAULT_TINT);
+}
+const toUnit = (cm: number, unit: Unit) => (unit === "in" ? cm / 2.54 : cm);
+const fromUnit = (v: number, unit: Unit) => (unit === "in" ? v * 2.54 : v);
+const fmtDim = (cm: number, unit: Unit) => toUnit(cm, unit).toFixed(unit === "in" ? 2 : 1);
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+const textOf = (res: { content?: unknown }) =>
+  (res.content as { type: string; text?: string }[] | undefined)?.find((c) => c.type === "text")?.text || "";
+
 function setStatus(text: string, isError = false) {
   const el = $("status");
   el.textContent = text;
   el.classList.toggle("error", isError);
 }
 
-function renderQuote(data: PrintQuoteResult) {
-  $("card").classList.remove("quoting");
+function setQuoting(on: boolean) {
+  state.quoting = on;
+  $("card").classList.toggle("quoting", on);
+  renderCta();
+}
+
+/** Any knob turn: whatever was added or prepared no longer matches the card. */
+function markDirty() {
+  state.cartCheckoutUrl = "";
+  state.preparedUrl = "";
+}
+
+/**
+ * The tool's error text is written for the model; the person at the card needs
+ * the action, not the argument name. Anything unrecognised is shown as is —
+ * a real message beats a generic one.
+ */
+function friendlyError(message: string): string {
+  if (/dyed material/i.test(message)) return "Pick a colour for this material first.";
+  if (/#rrggbb/i.test(message)) return "That colour couldn't be used. Pick another shade.";
+  if (/Enterprise material/i.test(message)) return "This material is available to Enterprise customers. Use Contact sales above.";
+  if (/escape holes/i.test(message)) return "Hollow prints are finished on womp.com, where escape holes are placed.";
+  if (/could not measure|degenerate/i.test(message)) return "The print engine couldn't measure this mesh.";
+  return message;
+}
+
+function svg(path: string, extra = ""): SVGElement {
+  const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  el.setAttribute("viewBox", "0 0 24 24");
+  el.setAttribute("fill", "none");
+  el.setAttribute("stroke", "currentColor");
+  el.setAttribute("stroke-width", "2");
+  el.setAttribute("stroke-linecap", "round");
+  el.setAttribute("stroke-linejoin", "round");
+  el.innerHTML = path + extra;
+  return el;
+}
+const ICON_INFO = '<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/>';
+const ICON_WARN = '<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4M12 17h.01"/>';
+const ICON_CROWN = '<path d="M3 18h18l-1.5-9-4.5 4-3-6-3 6-4.5-4L3 18Z" fill="currentColor" stroke="none"/>';
+
+function callout(kind: "info" | "warn" | "danger", body: (HTMLElement | string)[]): HTMLElement {
+  const el = document.createElement("div");
+  el.className = `callout ${kind}`;
+  el.append(svg(kind === "info" ? ICON_INFO : ICON_WARN));
+  const text = document.createElement("div");
+  text.append(...body);
+  el.append(text);
+  return el;
+}
+
+function linkButton(label: string, url: string): HTMLElement {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "link";
+  b.textContent = label;
+  b.addEventListener("click", () => void openLink(card.app, url));
+  return b;
+}
 
-  const d = data.dimensionsCm;
-  if (d) $("size").textContent = `${d.width.toFixed(1)} x ${d.height.toFixed(1)} x ${d.depth.toFixed(1)} cm`;
+// --- rendering -------------------------------------------------------------
 
-  const solid = data.solid;
-  if (!solid) return;
+function render() {
+  renderHead();
+  renderMeshCallouts();
+  renderSize();
+  renderMaterials();
+  renderSubControls();
+  renderStyle();
+  renderReview();
+  renderCta();
+}
 
-  const price = $("price");
-  price.textContent = "";
-  const amount = document.createElement("span");
-  amount.className = "amount";
-  amount.textContent = usd(solid.unitPrice);
-  price.append(amount);
-  if (solid.discount > 0) {
-    const was = document.createElement("span");
-    was.className = "was";
-    was.textContent = usd(solid.salePrice);
-    price.append(was);
+function renderHead() {
+  const d = state.dims;
+  $("dims").textContent = d
+    ? `${fmtDim(d.width, state.unit)} × ${fmtDim(d.height, state.unit)} × ${fmtDim(d.depth, state.unit)} ${state.unit}`
+    : "";
+}
+
+function renderMeshCallouts() {
+  const holder = $("mesh-callouts");
+  holder.textContent = "";
+  const q = state.quote;
+  if (!q) return;
+  if (q.nonManifold) {
+    holder.append(
+      callout("warn", [
+        "Parts of this mesh aren't watertight" +
+          (q.repaired ? ", even after repair" : "") +
+          ". It can be ordered, but the print may have defects. Every order is reviewed before printing.",
+      ]),
+    );
+  } else if (q.repaired) {
+    holder.append(
+      callout("info", [
+        "This mesh wasn't watertight, so it was repaired automatically for printing. Repair can subtly change the shape — check the preview.",
+      ]),
+    );
+  }
+}
+
+/** Any axis past the panel's ceiling blocks the order, as the panel does. */
+function overHardLimit(): boolean {
+  const d = state.dims;
+  return !!d && AXES.some((a) => d[a] > HARD_MAX_CM[a] + 1e-6);
+}
+
+function renderSize() {
+  const d = state.dims;
+  for (const axis of AXES) {
+    const input = $(`dim-${axis}`) as HTMLInputElement;
+    if (document.activeElement === input) continue; // never fight the typist
+    input.value = d ? fmtDim(d[axis], state.unit) : "";
   }
-  const per = document.createElement("span");
-  per.className = "per";
-  per.textContent = data.quantity && data.quantity > 1 ? `per unit x ${data.quantity}` : "per unit";
-  price.append(per);
-
-  const rows = $("rows");
-  rows.textContent = "";
-  if (data.hollow) {
-    const hollow = document.createElement("div");
-    hollow.textContent = `hollow (Pro): ${usd(data.hollow.unitPrice)} per unit${data.callerIsPro ? "" : " — requires a subscription"}`;
-    rows.append(hollow);
+  document.querySelectorAll<HTMLButtonElement>("#unit [data-unit]").forEach((b) => {
+    b.setAttribute("aria-checked", String(b.dataset.unit === state.unit));
+  });
+  const holder = $("size-callouts");
+  holder.textContent = "";
+  if (overHardLimit()) {
+    const lim = HARD_MAX_CM;
+    holder.append(
+      callout("danger", [
+        `This exceeds the maximum printable size, ${fmtDim(lim.width, state.unit)} × ${fmtDim(lim.height, state.unit)} × ${fmtDim(lim.depth, state.unit)} ${state.unit}. Reduce the size to continue.`,
+      ]),
+    );
+  } else if (state.sizeNotice) {
+    holder.append(callout("info", [state.sizeNotice]));
   }
-  const days = document.createElement("div");
-  days.textContent = `~${solid.productionDays} production day${solid.productionDays === 1 ? "" : "s"}`;
-  rows.append(days);
+}
 
-  $("note").hidden = false;
-  orderBtn.hidden = false;
-  orderBtn.disabled = false;
-  setStatus("");
+function tile(m: PrintMaterialOption): HTMLElement {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "tile";
+  b.setAttribute("role", "radio");
+  b.setAttribute("aria-checked", String(m.id === state.material));
+  if (m.available === false) b.setAttribute("aria-disabled", "true");
+  b.title = m.description || m.label || m.id;
+  // The catalog's swatch when it has one and it loads; the label's initial in
+  // the same box otherwise — a broken-image glyph next to a picker reads as a
+  // broken card.
+  const placeholder = () => {
+    const ph = document.createElement("div");
+    ph.className = "tile-img";
+    ph.textContent = (m.label || m.id).charAt(0).toUpperCase();
+    return ph;
+  };
+  if (m.swatchUrl) {
+    const img = document.createElement("img");
+    img.className = "tile-img";
+    img.src = m.swatchUrl;
+    img.alt = "";
+    img.loading = "lazy";
+    img.addEventListener("error", () => img.replaceWith(placeholder()), { once: true });
+    b.append(img);
+  } else {
+    b.append(placeholder());
+  }
+  if (m.group === "enterprise") {
+    const crown = document.createElement("span");
+    crown.className = "crown";
+    crown.append(svg(ICON_CROWN));
+    b.append(crown);
+  }
+  const label = document.createElement("span");
+  label.className = "tile-label";
+  label.textContent = m.label || m.id;
+  b.append(label);
+  b.addEventListener("click", () => selectMaterial(m.id));
+  return b;
 }
 
-/** Fill the controls from settings without firing their change handlers. */
-function syncControls(data: PrintQuoteResult) {
-  if (data.material) {
-    // The picker may not exist yet on the very first input announcement; the
-    // result's materials list (below) is what populates it.
-    if (![...materialSelect.options].some((o) => o.value === data.material)) {
-      const opt = document.createElement("option");
-      opt.value = data.material;
-      opt.textContent = data.material;
-      materialSelect.append(opt);
+function renderMaterials() {
+  const standard = state.materials.filter((m) => (m.group || "standard") !== "enterprise");
+  const enterprise = state.materials.filter((m) => m.group === "enterprise");
+
+  const std = $("tiles-standard");
+  std.textContent = "";
+  standard.forEach((m) => std.append(tile(m)));
+
+  const toggle = $("enterprise-toggle");
+  const ent = $("tiles-enterprise");
+  ent.textContent = "";
+  toggle.hidden = !enterprise.length;
+  if (enterprise.length) {
+    // Opens itself when the selection is an Enterprise material, so the ring is
+    // never hidden behind a closed disclosure.
+    if (selectedMaterial()?.group === "enterprise") state.enterpriseOpen = true;
+    toggle.setAttribute("aria-expanded", String(state.enterpriseOpen));
+    $("enterprise-label").textContent = `Enterprise materials (${enterprise.length})`;
+    ent.hidden = !state.enterpriseOpen;
+    enterprise.forEach((m) => ent.append(tile(m)));
+  }
+
+  const notes = $("material-callouts");
+  notes.textContent = "";
+  const gated = state.gatedTap;
+  if (gated) {
+    const body: (HTMLElement | string)[] = [`${gated.label || gated.id} prints are available to Enterprise customers. `];
+    if (gated.contactUrl) body.push(linkButton("Contact sales", gated.contactUrl));
+    notes.append(callout("info", body));
+  }
+}
+
+function renderSubControls() {
+  const m = selectedMaterial();
+  const finishes = m?.finishes || [];
+  const showFinish = finishes.length > 0;
+  const showMode = !!m?.colorOptional;
+  const showColor = needsColor(m);
+  $("sub").hidden = !(showFinish || showMode || showColor);
+
+  $("finish-row").hidden = !showFinish;
+  if (showFinish) {
+    const seg = $("finish");
+    seg.textContent = "";
+    if (!state.finish || !finishes.includes(state.finish)) state.finish = finishes[0];
+    for (const f of finishes) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.setAttribute("role", "radio");
+      b.setAttribute("aria-checked", String(f === state.finish));
+      b.textContent = capitalize(f);
+      b.addEventListener("click", () => {
+        if (state.finish === f) return;
+        state.finish = f;
+        markDirty();
+        renderSubControls();
+        renderCta();
+      });
+      seg.append(b);
     }
-    materialSelect.value = data.material;
-    showSwatch();
   }
-  if (typeof data.longestSideCm === "number") longestInput.value = String(Math.round(data.longestSideCm * 10) / 10);
-  if (typeof data.quantity === "number") quantityInput.value = String(data.quantity);
-}
-
-/** Swatches by material id, so the preview can follow the selection. */
-let swatches: Record<string, string> = {};
-
-function populateMaterials(materials: PrintMaterialOption[], selected?: string) {
-  materialSelect.textContent = "";
-  swatches = {};
-  // Grouped the way the print flow groups them. An Enterprise material this
-  // account cannot order is shown DISABLED rather than dropped: the reader can
-  // see it exists, which is the same thing the web panel does.
-  for (const group of ["standard", "enterprise"] as const) {
-    const rows = materials.filter((m) => (m.group || "standard") === group);
-    if (!rows.length) continue;
-    const holder =
-      group === "enterprise" ? Object.assign(document.createElement("optgroup"), { label: "Enterprise" }) : null;
-    for (const m of rows) {
-      const opt = document.createElement("option");
-      opt.value = m.id;
-      opt.textContent = m.label || m.id;
-      if (m.available === false) opt.disabled = true;
-      (holder || materialSelect).append(opt);
-      if (m.swatchUrl) swatches[m.id] = m.swatchUrl;
+
+  $("color-mode-row").hidden = !showMode;
+  if (showMode) {
+    document.querySelectorAll<HTMLButtonElement>("#color-mode [data-mode]").forEach((b) => {
+      b.setAttribute("aria-checked", String(b.dataset.mode === state.colorMode));
+    });
+  }
+
+  $("color-block").hidden = !showColor;
+  if (showColor) renderColor();
+}
+
+function renderColor() {
+  const pick = state.color || PANEL_DEFAULT_TINT;
+  const snapped = nearestPantone(pick);
+
+  ($("color-dot") as HTMLElement).style.background = pick;
+  const native = $("color-native") as HTMLInputElement;
+  if (native.value !== pick) native.value = pick;
+  const hex = $("color-hex") as HTMLInputElement;
+  if (document.activeElement !== hex) hex.value = pick.slice(1).toUpperCase();
+
+  const readout = $("pantone");
+  readout.textContent = "";
+  const dot = document.createElement("i");
+  dot.style.background = snapped.hex;
+  readout.append(dot, `Pantone ${snapped.code}`);
+  readout.title = `Prints as Pantone ${snapped.code} (${snapped.hex.toUpperCase()})`;
+
+  const chips = $("chips");
+  if (!chips.childElementCount) {
+    for (const chip of pantoneChips()) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "chip";
+      b.setAttribute("role", "option");
+      b.dataset.hex = chip.hex;
+      b.style.background = chip.hex;
+      b.title = `Pantone ${chip.code}`;
+      b.setAttribute("aria-label", `Pantone ${chip.code}`);
+      b.addEventListener("click", () => setColor(chip.hex));
+      chips.append(b);
     }
-    if (holder) materialSelect.append(holder);
   }
-  if (selected) materialSelect.value = selected;
-  showSwatch();
+  chips.querySelectorAll<HTMLButtonElement>(".chip").forEach((c) => {
+    c.setAttribute("aria-selected", String(c.dataset.hex === snapped.hex));
+  });
+}
+
+function renderStyle() {
+  const q = state.quote;
+  const section = $("style-section");
+  section.hidden = !q?.hollow || !!state.staticPrintUrl;
+  if (section.hidden) return;
+  if (!q?.hollow) return;
+  document.querySelectorAll<HTMLButtonElement>(".style[data-style]").forEach((b) => {
+    b.setAttribute("aria-checked", String(b.dataset.style === state.style));
+  });
+  $("price-solid").textContent = q.solid ? `${money(q.solid.unitPrice)} each` : "";
+  $("price-hollow").textContent = `${money(q.hollow.unitPrice)} each`;
+  $("hollow-pro").hidden = !!q.callerIsPro;
+
+  const notes = $("style-callouts");
+  notes.textContent = "";
+  if (state.style === "hollow") {
+    const bits: string[] = ["Hollow prints need escape holes placed in the Womp editor, so they're finished on womp.com."];
+    if (!q.callerIsPro) bits.push("Hollow pricing needs Womp Pro.");
+    if (isClear(selectedMaterial())) bits.push("Solid is best for clear prints: nothing inside shows through.");
+    notes.append(callout("info", [bits.join(" ")]));
+  }
+}
+
+function renderReview() {
+  const q = state.quote;
+  const review = $("review");
+  review.hidden = !q?.solid;
+  if (!q?.solid) return;
+
+  const qty = $("qty") as HTMLInputElement;
+  if (document.activeElement !== qty) qty.value = String(state.quantity);
+  ($("qty-dec") as HTMLButtonElement).disabled = state.quantity <= 1 || !!state.staticPrintUrl;
+  ($("qty-inc") as HTMLButtonElement).disabled = state.quantity >= 100 || !!state.staticPrintUrl;
+  qty.disabled = !!state.staticPrintUrl;
+
+  const row = state.style === "hollow" && q.hollow ? q.hollow : q.solid;
+  const n = state.quantity;
+  $("amount").textContent = money(row.unitPrice * n);
+  const was = $("was");
+  was.hidden = !(row.discount > 0);
+  if (row.discount > 0) was.textContent = money(row.salePrice * n);
+  // The saving as a number, not a label: the row's discount folds Pro,
+  // Enterprise and bulk savings together, and the card cannot tell which.
+  const pill = $("pill");
+  pill.hidden = !(row.discount > 0);
+  if (row.discount > 0) pill.textContent = `Save ${money(row.discount * n)}`;
+
+  const sub: string[] = [];
+  if (n > 1) sub.push(`${money(row.unitPrice)} each`);
+  sub.push(`~${row.productionDays} production day${row.productionDays === 1 ? "" : "s"}`);
+  $("price-sub").textContent = sub.join(" · ");
+}
+
+function renderCta() {
+  const cta = $("cta") as HTMLButtonElement;
+  const label = $("cta-label");
+  const q = state.quote;
+  cta.hidden = !q?.solid && !state.staticPrintUrl;
+  $("note").hidden = cta.hidden;
+  if (cta.hidden) return;
+
+  if (state.staticPrintUrl) {
+    label.textContent = "Complete order on womp.com";
+    cta.disabled = false;
+    return;
+  }
+  const gated = selectedMaterial()?.available === false;
+  cta.disabled = state.quoting || overHardLimit() || gated || !q?.solid;
+  if (state.style === "hollow") {
+    label.textContent = state.preparedUrl ? "Open on womp.com" : "Continue on womp.com";
+  } else {
+    label.textContent = state.cartCheckoutUrl ? "Checkout on womp.com" : "Add to cart";
+  }
+}
+
+// --- state changes ---------------------------------------------------------
+
+function selectMaterial(id: string) {
+  const m = state.materials.find((x) => x.id === id);
+  if (!m) return;
+  if (m.available === false) {
+    // The panel keeps the selection and opens the contact dialog; the card keeps
+    // the selection and shows the contact note.
+    state.gatedTap = m;
+    renderMaterials();
+    return;
+  }
+  state.gatedTap = undefined;
+  if (m.id === state.material) return;
+  state.material = m.id;
+  state.finish = m.finishes?.length ? m.finishes[0] : undefined;
+  state.colorMode = "original";
+  // The panel seeds its blue when you switch into Tinted clear; a tint the user
+  // already chose on this card is kept, because they chose it.
+  if (m.colorRequired && !state.color) state.color = PANEL_DEFAULT_TINT;
+  markDirty();
+  render();
+  scheduleRequote();
 }
 
-/** The selected material's preview image, when the catalog has one. */
-function showSwatch() {
-  const url = swatches[materialSelect.value];
-  swatchImg.src = url || "";
-  swatchImg.hidden = !url;
+function setColor(hex: string) {
+  const norm = normalizeHex(hex);
+  if (!norm || norm === state.color) return;
+  state.color = norm;
+  markDirty();
+  renderColor();
+  renderCta();
 }
 
-function currentSettings() {
+function setQuantity(n: number) {
+  const next = Math.min(100, Math.max(1, Math.round(n) || 1));
+  if (next === state.quantity) {
+    renderReview();
+    return;
+  }
+  state.quantity = next;
+  markDirty();
+  renderReview();
+  renderCta();
+  scheduleRequote(); // discounts can depend on quantity
+}
+
+/**
+ * One axis was edited: MCP prints scale uniformly, so the other two follow and
+ * the longest side is what gets sent. Clamped to the contract's range, with a
+ * notice rather than a silent snap.
+ */
+function commitDim(axis: Axis, raw: string) {
+  const d = state.dims;
+  const entered = fromUnit(Number(raw), state.unit);
+  if (!d || !(entered > 0) || !(d[axis] > 0)) {
+    renderSize();
+    return;
+  }
+  const longest = Math.max(d.width, d.height, d.depth);
+  let nextLongest = (longest * entered) / d[axis];
+  state.sizeNotice = "";
+  if (nextLongest > MAX_LONGEST_CM) {
+    nextLongest = MAX_LONGEST_CM;
+    state.sizeNotice = `The longest side is capped at ${fmtDim(MAX_LONGEST_CM, state.unit)} ${state.unit}.`;
+  } else if (nextLongest < MIN_LONGEST_CM) {
+    nextLongest = MIN_LONGEST_CM;
+    state.sizeNotice = `The longest side can't go below ${fmtDim(MIN_LONGEST_CM, state.unit)} ${state.unit}.`;
+  }
+  const k = nextLongest / longest;
+  if (Math.abs(k - 1) < 1e-6) {
+    renderSize();
+    return;
+  }
+  state.dims = { width: d.width * k, height: d.height * k, depth: d.depth * k };
+  state.longestSideCm = nextLongest;
+  markDirty();
+  renderHead();
+  renderSize();
+  renderCta();
+  scheduleRequote();
+}
+
+// --- talking to the server -------------------------------------------------
+
+function baseArgs() {
+  const m = selectedMaterial();
+  const snapped = snappedColor();
   return {
-    ...(source?.generationId ? { generationId: source.generationId } : {}),
-    ...(source?.glbUrl ? { glbUrl: source.glbUrl } : {}),
-    material: materialSelect.value,
-    quantity: Math.min(100, Math.max(1, Math.round(Number(quantityInput.value) || 1))),
-    longestSideCm: Math.min(60, Math.max(2, Number(longestInput.value) || 10)),
+    ...(state.source?.generationId ? { generationId: state.source.generationId } : {}),
+    ...(state.source?.glbUrl ? { glbUrl: state.source.glbUrl } : {}),
+    material: state.material,
+    ...(m?.finishes?.length && state.finish ? { finish: state.finish } : {}),
+    ...(snapped ? { color: snapped.hex } : {}),
+    quantity: state.quantity,
+    ...(state.longestSideCm ? { longestSideCm: Math.round(state.longestSideCm * 100) / 100 } : {}),
   };
 }
 
+/** Fold a quote into the state without fighting what the user is doing. */
+function applyQuote(data: PrintQuoteResult) {
+  state.quote = data;
+  if (data.source) state.source = data.source;
+  if (data.materials?.length) state.materials = data.materials;
+  if (data.material) {
+    state.material = data.material;
+    if (!state.materials.some((m) => m.id === data.material)) {
+      // An id the catalog has not caught up with yet still has to be selectable.
+      state.materials.push({ id: data.material, label: data.materialLabel, available: true });
+    }
+  }
+  if (data.finish) state.finish = data.finish;
+  // The echo is what the card SENT (a snapped hex); the user's exact pick wins
+  // when there is one, so the dot never jumps under their finger.
+  if (data.color && !state.color) state.color = normalizeHex(data.color);
+  if (data.color && selectedMaterial()?.colorOptional) state.colorMode = "custom";
+  if (typeof data.quantity === "number") state.quantity = data.quantity;
+  if (typeof data.longestSideCm === "number") state.longestSideCm = data.longestSideCm;
+  if (data.dimensionsCm) state.dims = data.dimensionsCm;
+  state.sizeNotice = "";
+  render();
+}
+
 async function requote() {
-  if (!source || staticPrintUrl) return;
+  if (!state.source || state.staticPrintUrl || !state.material) return;
   const seq = ++quoteSeq;
-  $("card").classList.add("quoting");
-  orderBtn.disabled = true;
+  setQuoting(true);
   setStatus("Updating price…");
   try {
-    const res = await callTool(card.app, "estimate_print", currentSettings());
+    const res = await callTool(card.app, "estimate_print", baseArgs());
     if (seq !== quoteSeq) return; // superseded by a newer knob turn
+    setQuoting(false);
     if (res.isError) {
-      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not update the quote.";
-      $("card").classList.remove("quoting");
-      orderBtn.disabled = false;
-      setStatus(String(text), true);
+      setStatus(friendlyError(textOf(res) || "Could not update the price."), true);
       return;
     }
-    renderQuote((res.structuredContent || {}) as PrintQuoteResult);
+    applyQuote((res.structuredContent || {}) as PrintQuoteResult);
+    setStatus("");
   } catch {
     if (seq !== quoteSeq) return;
-    $("card").classList.remove("quoting");
-    orderBtn.disabled = false;
-    setStatus("Could not update the quote — check the connection and try again.", true);
+    setQuoting(false);
+    setStatus("Could not update the price. Check the connection and try again.", true);
   }
 }
 
 function scheduleRequote() {
-  // Same idea as the web print panel's debounce: a slider being dragged must
-  // not fire an engine estimate per pixel.
   if (debounceTimer !== undefined) clearTimeout(debounceTimer);
-  // The settings changed: whatever was added to the cart no longer matches
-  // what the card shows, so the button goes back to adding.
-  cartCheckoutUrl = "";
-  $("order-label").textContent = "Add to cart";
-  debounceTimer = window.setTimeout(() => void requote(), 600);
+  debounceTimer = window.setTimeout(() => void requote(), REQUOTE_DEBOUNCE_MS);
 }
 
-materialSelect.addEventListener("change", () => {
-  showSwatch();
-  scheduleRequote();
-});
-longestInput.addEventListener("change", scheduleRequote);
-quantityInput.addEventListener("change", scheduleRequote);
+async function addToCart() {
+  const cta = $("cta") as HTMLButtonElement;
+  cta.disabled = true;
+  $("cta-label").textContent = "Adding to cart…";
+  setStatus("");
+  try {
+    const res = await callTool(card.app, "add_to_cart", baseArgs());
+    const data = (res.structuredContent || {}) as { payUrl?: string; items?: unknown[]; subtotal?: number };
+    if (res.isError || !data.payUrl) {
+      setStatus(friendlyError(textOf(res) || "Could not add to the cart."), true);
+      return;
+    }
+    state.cartCheckoutUrl = data.payUrl;
+    const count = data.items?.length ?? 1;
+    setStatus(
+      `Added. Your cart has ${count} item${count === 1 ? "" : "s"}, ${money(data.subtotal ?? 0)} before shipping. ` +
+        "Shipping and promo codes apply at checkout.",
+    );
+  } catch {
+    setStatus("Could not add to the cart. Try again.", true);
+  } finally {
+    renderCta();
+  }
+}
+
+/** Hollow: create the print project and open it — the editor is where escape holes go. */
+async function continueOnWomp() {
+  const cta = $("cta") as HTMLButtonElement;
+  cta.disabled = true;
+  $("cta-label").textContent = "Setting up…";
+  setStatus("");
+  try {
+    const res = await callTool(card.app, "prepare_print", baseArgs());
+    const data = (res.structuredContent || {}) as { printUrl?: string };
+    if (res.isError || !data.printUrl) {
+      setStatus(friendlyError(textOf(res) || "Could not set the print up."), true);
+      return;
+    }
+    state.preparedUrl = data.printUrl;
+    void openLink(card.app, data.printUrl);
+    setStatus("Opened on womp.com. Choose Hollow there, place the escape holes, and check out.");
+  } catch {
+    setStatus("Could not set the print up. Try again.", true);
+  } finally {
+    renderCta();
+  }
+}
+
+// --- wiring ----------------------------------------------------------------
 
 const card = createCard("Womp print", {
-  onTimeout: () => setStatus("Still measuring — ask me to check on it."),
+  onTimeout: () => setStatus("Still measuring. Ask me to check on it."),
   onInput: (args) => {
     // Seed the controls from what the model asked for, before any result: the
-    // user sees "resin-clear, 15cm" selected while the first quote computes.
-    syncControls({
-      material: typeof args.material === "string" ? args.material : undefined,
-      longestSideCm: typeof args.longestSideCm === "number" ? args.longestSideCm : undefined,
-      quantity: typeof args.quantity === "number" ? args.quantity : undefined,
-    });
+    // user sees "Tinted clear, glossy, 15 cm, two copies" selected while the
+    // first quote computes.
+    if (typeof args.material === "string") state.material = args.material;
+    if (typeof args.finish === "string") state.finish = args.finish.toLowerCase();
+    if (typeof args.color === "string") state.color = normalizeHex(args.color) || state.color;
+    if (typeof args.quantity === "number") state.quantity = args.quantity;
+    if (typeof args.longestSideCm === "number") state.longestSideCm = args.longestSideCm;
+    if (args.hollow === true) state.style = "hollow";
   },
   onResult: (raw: GenerationResult) => {
     const data = raw as PrintQuoteResult & GenerationResult;
     // ontoolinput sends {status: "running"} while the engine measures; a print
     // result itself never carries `status`.
     if (data.status === "running") {
-      $("card").classList.add("quoting");
+      setQuoting(true);
       setStatus("Measuring mesh…");
       return;
     }
-    if (data.source) source = data.source;
+    setQuoting(false);
     if (data.printUrl) {
-      // A model-initiated prepare_print: render a receipt, not a configurator.
-      staticPrintUrl = data.printUrl;
-      $("controls").hidden = true;
-      $("order-label").textContent = "Complete order on womp.com";
-    } else if (data.materials?.length) {
-      populateMaterials(data.materials, data.material);
-      $("controls").hidden = false;
+      // A model-initiated prepare_print: a receipt, not a configurator.
+      state.staticPrintUrl = data.printUrl;
+      applyQuote(data);
+      for (const id of ["size-section", "material-section", "style-section"]) $(id).hidden = true;
+      const m = selectedMaterial();
+      const bits = [materialLabel(m)];
+      if (state.finish && m?.finishes?.length) bits.push(capitalize(state.finish));
+      if (data.color) bits.push(`Pantone ${nearestPantone(data.color).code}`);
+      if (state.longestSideCm) bits.push(`${fmtDim(state.longestSideCm, state.unit)} ${state.unit} longest side`);
+      $("summary").textContent = bits.join(" · ");
+      $("summary").hidden = false;
+      setStatus("");
+      return;
     }
-    syncControls(data);
-    renderQuote(data);
+    applyQuote(data);
+    for (const id of ["size-section", "material-section"]) $(id).hidden = !state.materials.length;
+    setStatus("");
   },
 });
 
-orderBtn.addEventListener("click", async () => {
-  if (staticPrintUrl) {
-    void openLink(card.app, staticPrintUrl);
-    return;
-  }
-  if (cartCheckoutUrl) {
-    void openLink(card.app, cartCheckoutUrl);
-    return;
+document.querySelectorAll<HTMLButtonElement>("#unit [data-unit]").forEach((b) =>
+  b.addEventListener("click", () => {
+    state.unit = b.dataset.unit as Unit;
+    renderHead();
+    renderSize();
+  }),
+);
+for (const axis of AXES) {
+  const input = $(`dim-${axis}`) as HTMLInputElement;
+  input.addEventListener("change", () => commitDim(axis, input.value));
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") input.blur();
+  });
+}
+
+$("enterprise-toggle").addEventListener("click", () => {
+  state.enterpriseOpen = !state.enterpriseOpen;
+  // Closing the group is how the note about a gated material is dismissed.
+  if (!state.enterpriseOpen) state.gatedTap = undefined;
+  renderMaterials();
+});
+
+document.querySelectorAll<HTMLButtonElement>("#color-mode [data-mode]").forEach((b) =>
+  b.addEventListener("click", () => {
+    const mode = b.dataset.mode as "original" | "custom";
+    if (state.colorMode === mode) return;
+    state.colorMode = mode;
+    if (mode === "custom" && !state.color) state.color = PANEL_DEFAULT_TINT;
+    markDirty();
+    renderSubControls();
+    renderCta();
+  }),
+);
+
+const native = $("color-native") as HTMLInputElement;
+native.addEventListener("input", () => setColor(native.value));
+
+const hexInput = $("color-hex") as HTMLInputElement;
+hexInput.addEventListener("input", () => {
+  hexInput.value = hexInput.value.replace(/[^0-9a-fA-F]/g, "").toUpperCase().slice(0, 6);
+  if (hexInput.value.length === 6) setColor(`#${hexInput.value}`);
+});
+const commitHex = () => {
+  const expanded = expandHexInput(hexInput.value);
+  if (expanded) setColor(expanded);
+  renderColor();
+};
+hexInput.addEventListener("blur", commitHex);
+hexInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    commitHex();
+    hexInput.blur();
   }
-  if (!source) return;
-  orderBtn.disabled = true;
-  $("order-label").textContent = "Adding to cart…";
-  setStatus("");
-  try {
-    const res = await callTool(card.app, "add_to_cart", currentSettings());
-    const data = (res.structuredContent || {}) as { payUrl?: string; items?: unknown[]; subtotal?: number };
-    if (res.isError || !data.payUrl) {
-      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not add to the cart.";
-      setStatus(String(text), true);
-      $("order-label").textContent = "Add to cart";
-      return;
-    }
-    cartCheckoutUrl = data.payUrl;
-    $("order-label").textContent = "Checkout on womp.com";
-    setStatus(
-      `Added — cart has ${data.items?.length ?? 1} item(s), subtotal $${(data.subtotal ?? 0).toFixed(2)}. ` +
-        `Shipping and promo codes apply at checkout.`,
-    );
-  } catch {
-    setStatus("Could not add to the cart — try again.", true);
-    $("order-label").textContent = "Add to cart";
-  } finally {
-    orderBtn.disabled = false;
+});
+
+document.querySelectorAll<HTMLButtonElement>(".style[data-style]").forEach((b) =>
+  b.addEventListener("click", () => {
+    const style = b.dataset.style as Style;
+    if (state.style === style) return;
+    state.style = style;
+    markDirty();
+    renderStyle();
+    renderReview();
+    renderCta();
+  }),
+);
+
+const qtyInput = $("qty") as HTMLInputElement;
+qtyInput.addEventListener("change", () => setQuantity(Number(qtyInput.value)));
+$("qty-dec").addEventListener("click", () => setQuantity(state.quantity - 1));
+$("qty-inc").addEventListener("click", () => setQuantity(state.quantity + 1));
+
+$("cta").addEventListener("click", () => {
+  if (state.staticPrintUrl) return void openLink(card.app, state.staticPrintUrl);
+  if (state.style === "hollow") {
+    if (state.preparedUrl) return void openLink(card.app, state.preparedUrl);
+    return void continueOnWomp();
   }
+  if (state.cartCheckoutUrl) return void openLink(card.app, state.cartCheckoutUrl);
+  if (!state.source) return;
+  void addToCart();
 });