@womp/mcp-ui 0.1.19 → 0.1.21

package/src/openai-camera/main.ts

@@ -24,6 +24,13 @@ import { $, callTool, createCard, openExternal, pushModelContext, toggleFullscre
  * colours come from the palette, the native colour picker, or the eyedropper
  * where the browser has one.
  *
+ * Inline, the card is the render, the two colours, the price, Customize and
+ * Order. Customize goes fullscreen, where the same card grows every control:
+ * gradients, the picker, and the shape knobs under plain names. The card owns
+ * those controls; the viewer is asked to hide its own panel and Print button
+ * (`embed=1`). Until it takes `kakapo:setParams`, a knob turned here saves and
+ * swaps in the new revision, the way a colour does.
+ *
  * Order gets the quote from `checkout_camera` and opens its checkout link on
  * the web, all from here; paying happens there. In the chat, "order it" makes
  * the model answer with the quote card (src/openai-quote) instead.
@@ -34,6 +41,16 @@ interface DesignOption {
   label: string;
   value: number;
   display: string;
+  /** What the card needs to draw the control. A server without them leaves the knob out. */
+  kind?: "number" | "choice";
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  choices?: { value: number; label: string }[];
+  /** Which section it sits in; the first in a section shows, the rest fold under "More". */
+  group?: string;
+  hint?: string;
 }
 
 interface Design {
@@ -54,6 +71,8 @@ interface Design {
 
 type Slot = "shell" | "button";
 const SLOTS: Slot[] = ["shell", "button"];
+/** What each part is called on screen: plain words, not the template's. */
+const PART_LABEL: Record<Slot, string> = { shell: "Body", button: "Shutter button" };
 
 /** The most colours a gradient takes (the server holds the same limit). */
 const MAX_COLORS = 3;
@@ -86,6 +105,8 @@ let viewerReady = false;
 let viewerDesignId: string | undefined;
 /** Whether the viewer takes a new revision by message instead of a reload. */
 let viewerCanSwap = false;
+/** Whether the viewer takes knob values by message, so a knob needs no new scene. */
+let viewerCanSetParams = false;
 /** Where to post to the viewer: its origin, or "*" when it speaks as "null" (an opaque host). */
 let viewerTarget = "*";
 /** The scene URL a swap is waiting on, and the reload that stands in if it never lands. */
@@ -102,6 +123,8 @@ let readyTimer: number | undefined;
 let pollTimer: number | undefined;
 let lastActivity = Date.now();
 let statusTimer: number | undefined;
+/** Which part the swatches paint: one at a time keeps the card calm. */
+let activePart: Slot = "shell";
 /** Which colour of a part's gradient the swatches, picker and eyedropper set. */
 const activeStop: Record<Slot, number> = { shell: 0, button: 0 };
 
@@ -178,13 +201,18 @@ function reloadViewer(note?: string) {
   if (!design) return;
   viewerReady = false;
   viewerCanSwap = false;
+  viewerCanSetParams = false;
   viewerParams = undefined;
   viewerDesignId = design.designId;
   pendingSwap = undefined;
   clearTimeout(swapTimer);
-  fallback.hidden = true;
   viewer.hidden = false;
-  viewer.src = design.viewerUrl;
+  // The drawing stands in until the viewer says it is ready.
+  drawPreview(false);
+  // The card owns the controls: ask the viewer to drop its own panel and Print button.
+  const src = new URL(design.viewerUrl);
+  src.searchParams.set("embed", "1");
+  viewer.src = src.toString();
   setStatus(note ?? "Loading the 3D viewer…");
   clearTimeout(readyTimer);
   readyTimer = window.setTimeout(() => {
@@ -197,25 +225,58 @@ function reloadViewer(note?: string) {
 function showFallback() {
   if (!design) return;
   viewer.hidden = true;
+  drawPreview(true);
+}
+
+/** The flat drawing over the stage: for good without WebGPU, or until the viewer is ready. */
+function drawPreview(final: boolean) {
+  if (!design) return;
   fallback.hidden = false;
-  fallback.textContent = "";
-  const p = document.createElement("p");
-  p.textContent =
-    "The 3D preview needs WebGPU, which this browser or device doesn't offer. You can still change the design here or in chat, and order it.";
-  const list = document.createElement("dl");
-  const rows: [string, string][] = [
-    ["Shell colour", paintText(design.colors.shell, design.gradientAngles.shell)],
-    ["Button colour", paintText(design.colors.button, design.gradientAngles.button)],
-    ...design.options.map((o) => [o.label, o.display] as [string, string]),
-  ];
-  for (const [k, v] of rows) {
-    const dt = document.createElement("dt");
-    dt.textContent = k;
-    const dd = document.createElement("dd");
-    dd.textContent = v;
-    list.append(dt, dd);
+  fallback.style.opacity = "";
+  fallback.innerHTML = cameraSvg(design);
+  if (final) {
+    const note = document.createElement("p");
+    note.textContent = "3D preview isn't available here. Colours still update.";
+    fallback.append(note);
   }
-  fallback.append(p, list);
+}
+
+/** A part's paint as an SVG fill: a flat colour, or a gradient defined in `defs`. */
+function svgPaint(slot: Slot, d: Design, defs: string[]) {
+  const paint = d.colors[slot].map(cssColor);
+  if (paint.length < 2) return paint[0];
+  // The angle turns the gradient the way the viewer does: 0° runs along the part's own axis.
+  const angle = (ARROW_AT_0[slot] - d.gradientAngles[slot] + 360) % 360;
+  const rad = (angle * Math.PI) / 180;
+  const x = Math.cos(rad) / 2;
+  const y = Math.sin(rad) / 2;
+  const stops = paint.map((c, i) => `<stop offset="${i / (paint.length - 1)}" stop-color="${c}"/>`).join("");
+  defs.push(
+    `<linearGradient id="g-${slot}" x1="${0.5 - x}" y1="${0.5 - y}" x2="${0.5 + x}" y2="${0.5 + y}">${stops}</linearGradient>`,
+  );
+  return `url(#g-${slot})`;
+}
+
+/** A flat drawing of the camera in its colours, for when the 3D view can't run. */
+function cameraSvg(d: Design) {
+  const defs: string[] = [];
+  const shell = svgPaint("shell", d, defs);
+  const button = svgPaint("button", d, defs);
+  return (
+    `<svg viewBox="0 0 220 160" role="img" aria-label="Your camera: ${describe("shell", d)} body, ${describe("button", d)} shutter button">` +
+    `<defs>${defs.join("")}</defs>` +
+    `<rect x="150" y="12" width="40" height="22" rx="8" fill="${button}" stroke="rgba(0,0,0,.18)"/>` +
+    `<circle cx="34" cy="38" r="14" fill="none" stroke="rgba(0,0,0,.28)" stroke-width="6"/>` +
+    `<rect x="10" y="28" width="200" height="124" rx="30" fill="${shell}" stroke="rgba(0,0,0,.16)"/>` +
+    `<rect x="10" y="28" width="200" height="124" rx="30" fill="url(#shine)" opacity=".5"/>` +
+    `<circle cx="120" cy="92" r="40" fill="#1d1d20"/>` +
+    `<circle cx="120" cy="92" r="30" fill="#2c2c33" stroke="#47474f" stroke-width="2"/>` +
+    `<circle cx="120" cy="92" r="14" fill="#101014"/>` +
+    `<circle cx="110" cy="82" r="5" fill="#ffffff" opacity=".55"/>` +
+    `<circle cx="184" cy="54" r="5" fill="#ff4d4d"/>` +
+    `<linearGradient id="shine" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".45" stop-color="#fff" stop-opacity="0"/></linearGradient>` +
+    `</svg>`
+  );
 }
 
 /** The viewer reports `scripts: [{ nodeId, name, params: { knob: value } }]`; knob names are unique across them. */
@@ -247,6 +308,8 @@ window.addEventListener("message", (event) => {
     viewerReady = true;
     viewerTarget = event.origin === "null" ? "*" : event.origin;
     viewerCanSwap = Array.isArray(msg.messages) && msg.messages.includes("kakapo:setScene");
+    viewerCanSetParams = Array.isArray(msg.messages) && msg.messages.includes("kakapo:setParams");
+    fallback.hidden = true;
     clearTimeout(readyTimer);
     viewerParams = flatten(msg.scripts);
     setStatus("");
@@ -266,7 +329,7 @@ window.addEventListener("message", (event) => {
     onViewerParams(flatten(msg.scripts));
     for (const done of paramsWaiters.splice(0)) done();
   } else if (msg?.type === "kakapo:print") {
-    // The viewer's own Print button is our Order.
+    // A viewer that ignores embed=1 still shows Print: treat it as Order.
     onViewerParams(flatten(msg.scripts));
     void order();
   }
@@ -414,14 +477,25 @@ function cssColor(color: string) {
   return design?.palette.find((p) => p.name === color)?.hex ?? color;
 }
 
+const PAINT_NAME = (paint: string[]) =>
+  paint.length > 1 ? "Gradient" : paint[0].startsWith("#") ? "Custom" : paint[0][0].toUpperCase() + paint[0].slice(1);
+
 function render() {
   if (!design) return;
+  $("card").dataset.ready = "";
+  const full = document.documentElement.dataset.displayMode === "fullscreen";
   for (const slot of SLOTS) {
     const paint = design.colors[slot];
     const gradient = paint.length > 1;
     activeStop[slot] = Math.min(activeStop[slot], paint.length - 1);
-    const chosen = paint[activeStop[slot]];
-
+    // Inline there is no gradient editing: a swatch replaces the whole part.
+    const chosen = gradient && !full ? undefined : paint[activeStop[slot]];
+
+    $(`note-${slot}`).textContent = PAINT_NAME(paint);
+    $(`dot-${slot}`).style.background =
+      paint.length > 1 ? `linear-gradient(135deg, ${paint.map(cssColor).join(", ")})` : cssColor(paint[0]);
+    $(`tab-${slot}`).setAttribute("aria-selected", String(slot === activePart));
+    $(`group-${slot}`).hidden = slot !== activePart;
     $(`solid-${slot}`).setAttribute("aria-pressed", String(!gradient));
     $(`gradient-${slot}`).setAttribute("aria-pressed", String(gradient));
     renderStops(slot, paint);
@@ -439,16 +513,180 @@ function render() {
       b.className = p.name === "clear" ? "swatch clear" : "swatch";
       b.style.background = p.hex;
       b.title = p.name;
-      b.setAttribute("aria-label", `${slot} colour: ${p.name}`);
+      b.setAttribute("aria-label", `${PART_LABEL[slot]} colour: ${p.name}`);
       b.setAttribute("aria-pressed", String(chosen === p.name));
-      b.addEventListener("click", () => void pickColor(slot, p.name));
+      b.addEventListener("click", () => void (full ? pickColor(slot, p.name) : setPaint(slot, [p.name])));
       row.append(b);
     }
-    ($(`pick-${slot}`) as HTMLInputElement).value = cssColor(chosen);
-    $(`dropper-${slot}`).hidden = !EyeDropper;
+
+    // Any colour: the native picker, then the eyedropper where the browser has one.
+    const pick = document.createElement("label");
+    pick.className = "pick";
+    pick.title = "Any colour";
+    const input = document.createElement("input");
+    input.type = "color";
+    input.setAttribute("aria-label", `${PART_LABEL[slot]}: any colour`);
+    input.value = toHex(cssColor(chosen ?? paint[0]));
+    // `change`, not `input`: the picker fires `input` on every drag, and each save reloads the viewer.
+    input.addEventListener("change", () => {
+      const hex = input.value.toLowerCase();
+      void (full ? pickColor(slot, hex) : setPaint(slot, [hex]));
+    });
+    pick.append(input);
+    row.append(pick);
+    if (EyeDropper && full) {
+      const dropper = iconButton("", `${PART_LABEL[slot]}: pick a colour from the screen`, false, async () => {
+        try {
+          const { sRGBHex } = await new EyeDropper().open();
+          await pickColor(slot, toHex(sRGBHex));
+        } catch {
+          // Escape cancels it; a host may also refuse it.
+        }
+      });
+      dropper.innerHTML = DROPPER;
+      dropper.classList.add("tool");
+      row.append(dropper);
+    }
+  }
+  renderKnobs();
+
+  $("price").textContent = design.price.label;
+  $("price-inline").textContent = design.price.label;
+  if (!fallback.hidden) drawPreview(viewer.hidden);
+}
+
+/** An eyedropper (Lucide `pipette`, ISC). */
+const DROPPER =
+  '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m2 22 1-1h3l9-9"/><path d="M3 21v-3l9-9"/><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z"/></svg>';
+
+// ---- shape knobs ----------------------------------------------------------------
+
+/** Section titles, in the order they show. A knob with no group goes last. */
+const GROUPS: Record<string, string> = { shape: "Shape", loop: "Strap loop", button: "Shutter button" };
+/** A knob being dragged: re-rendering under it would drop the drag. */
+let dragging: string | undefined;
+
+function describe(slot: Slot, d: Design) {
+  const paint = d.colors[slot];
+  return paint.length > 1 ? paint.join(" to ") : PAINT_NAME(paint).toLowerCase();
+}
+
+function renderKnobs() {
+  const box = $("knobs");
+  if (!design || dragging) return;
+  const knobs = design.options.filter((o) => o.kind === "choice" ? o.choices?.length : o.kind === "number");
+  box.hidden = knobs.length === 0;
+  // Keep which "More" folds are open across re-renders.
+  const open = new Set([...box.querySelectorAll("details[open]")].map((d) => (d as HTMLElement).dataset.group));
+  box.textContent = "";
+  const groups = new Map<string, DesignOption[]>();
+  for (const k of knobs) {
+    const g = k.group && GROUPS[k.group] ? k.group : "other";
+    groups.set(g, [...(groups.get(g) ?? []), k]);
+  }
+  const order = [...Object.keys(GROUPS), "other"].filter((g) => groups.has(g));
+  for (const g of order) {
+    const section = document.createElement("section");
+    section.className = "section";
+    const h = document.createElement("h3");
+    h.textContent = GROUPS[g] ?? "More";
+    section.append(h);
+    const [first, ...rest] = groups.get(g)!;
+    section.append(knobControl(first));
+    if (rest.length) {
+      const more = document.createElement("details");
+      more.className = "more";
+      more.dataset.group = g;
+      more.open = open.has(g);
+      const summary = document.createElement("summary");
+      summary.textContent = `More ${(GROUPS[g] ?? "options").toLowerCase()} options`;
+      const inner = document.createElement("div");
+      for (const k of rest) inner.append(knobControl(k));
+      more.append(summary, inner);
+      section.append(more);
+    }
+    box.append(section);
+  }
+}
+
+function formatKnob(k: DesignOption, value: number) {
+  if (k.kind === "choice") return k.choices?.find((c) => c.value === value)?.label ?? String(value);
+  const decimals = k.step && k.step < 1 ? Math.min(2, String(k.step).split(".")[1]?.length ?? 1) : 0;
+  return `${value.toFixed(decimals)}${k.unit ? (k.unit === "°" ? "°" : ` ${k.unit}`) : ""}`;
+}
+
+function knobControl(k: DesignOption) {
+  const wrap = document.createElement("div");
+  wrap.className = "knob";
+  const head = document.createElement("div");
+  head.className = "knob-head";
+  const name = document.createElement("span");
+  name.textContent = k.label;
+  if (k.hint) name.title = k.hint;
+  head.append(name);
+  wrap.append(head);
+
+  if (k.kind === "choice") {
+    name.id = `knob-${k.name}`;
+    const seg = document.createElement("div");
+    seg.className = "segmented";
+    seg.setAttribute("role", "group");
+    seg.setAttribute("aria-labelledby", name.id);
+    for (const c of k.choices ?? []) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.textContent = c.label;
+      b.setAttribute("aria-pressed", String(c.value === k.value));
+      b.addEventListener("click", () => void setKnob(k.name, c.value));
+      seg.append(b);
+    }
+    wrap.append(seg);
+    return wrap;
+  }
+
+  const out = document.createElement("output");
+  out.textContent = formatKnob(k, k.value);
+  head.append(out);
+  const range = document.createElement("input");
+  range.type = "range";
+  range.min = String(k.min);
+  range.max = String(k.max);
+  range.step = String(k.step ?? 1);
+  range.value = String(k.value);
+  range.setAttribute("aria-label", k.label);
+  const fill = () => range.style.setProperty("--fill", `${((Number(range.value) - k.min!) / (k.max! - k.min! || 1)) * 100}%`);
+  fill();
+  range.addEventListener("input", () => {
+    dragging = k.name;
+    out.textContent = formatKnob(k, Number(range.value));
+    fill();
+  });
+  // Save on release: every save is a new revision of the scene.
+  range.addEventListener("change", () => {
+    dragging = undefined;
+    void setKnob(k.name, Number(range.value));
+  });
+  wrap.append(range);
+  return wrap;
+}
+
+/** Set one shape knob from the card's own control. */
+async function setKnob(name: string, value: number) {
+  if (!design) return;
+  lastActivity = Date.now();
+  design = { ...design, options: design.options.map((o) => (o.name === name ? { ...o, value } : o)) };
+  render();
+  setStatus("Saving…");
+  await freshViewerParams();
+  viewerParams = { ...(viewerParams ?? {}), [name]: value };
+  if (viewerCanSetParams) {
+    // The viewer shows it at once; the save only records it.
+    viewer.contentWindow?.postMessage({ type: "kakapo:setParams", params: { [name]: value } }, viewerTarget);
+    await flushSync();
+  } else {
+    // An empty finish still means "the viewer is behind": swap in the saved revision.
+    await flushSync({});
   }
-  $("price").textContent = `Full-colour print · ${design.price.label} + shipping`;
-  if (!fallback.hidden) showFallback();
 }
 
 /** A gradient's colours on a track, first to last; picking one makes it the one the swatches set. */
@@ -467,7 +705,7 @@ function renderStops(slot: Slot, paint: string[]) {
     stop.style.left = `calc(11px + (100% - 22px) * ${i / (paint.length - 1)})`;
     stop.style.background = cssColor(color);
     stop.title = color;
-    stop.setAttribute("aria-label", `${slot} gradient colour ${i + 1} of ${paint.length}: ${color}`);
+    stop.setAttribute("aria-label", `${PART_LABEL[slot]} gradient colour ${i + 1} of ${paint.length}: ${color}`);
     stop.setAttribute("aria-pressed", String(i === activeStop[slot]));
     stop.addEventListener("click", () => {
       activeStop[slot] = i;
@@ -475,15 +713,15 @@ function renderStops(slot: Slot, paint: string[]) {
     });
     track.append(stop);
   });
-  const add = iconButton("+", `${slot}: add a gradient colour`, paint.length >= MAX_COLORS, () => {
+  const add = iconButton("+", `${PART_LABEL[slot]}: add a gradient colour`, paint.length >= MAX_COLORS, () => {
     activeStop[slot] = paint.length;
     void setPaint(slot, [...paint, partner(paint[paint.length - 1])]);
   });
-  const remove = iconButton("−", `${slot}: remove the selected gradient colour`, paint.length <= 2, () => {
+  const remove = iconButton("−", `${PART_LABEL[slot]}: remove the selected gradient colour`, paint.length <= 2, () => {
     void setPaint(slot, paint.filter((_, i) => i !== activeStop[slot]));
   });
   const angle = design?.gradientAngles[slot] ?? 0;
-  const turn = iconButton("", `${slot}: turn the gradient 45° (now ${angle}°)`, false, () => void setAngle(slot, (angle + 45) % 360));
+  const turn = iconButton("", `${PART_LABEL[slot]}: turn the gradient 45° (now ${angle}°)`, false, () => void setAngle(slot, (angle + 45) % 360));
   // The arrow points the way the colours run, first to last, as the part sits in the default view.
   turn.innerHTML = ARROW;
   turn.style.transform = `rotate(${ARROW_AT_0[slot] - angle}deg)`;
@@ -558,19 +796,6 @@ for (const slot of SLOTS) {
     activeStop[slot] = 1;
     void setPaint(slot, [only, partner(only)]);
   });
-  // `change`, not `input`: the picker fires `input` on every drag, and each save reloads the viewer.
-  $(`pick-${slot}`).addEventListener("change", (event) => {
-    void pickColor(slot, (event.target as HTMLInputElement).value.toLowerCase());
-  });
-  $(`dropper-${slot}`).addEventListener("click", async () => {
-    if (!EyeDropper) return;
-    try {
-      const { sRGBHex } = await new EyeDropper().open();
-      await pickColor(slot, toHex(sRGBHex));
-    } catch {
-      // Escape cancels it; a host may also refuse it.
-    }
-  });
 }
 
 // ---- ordering -----------------------------------------------------------------
@@ -611,7 +836,7 @@ async function order() {
       return;
     }
     await openExternal(app, quote.checkoutUrl);
-    setStatus("Checkout is open in your browser. Your design and price carry over.");
+    setStatus("Checkout is open in your browser. Your design and price carry over.", 6_000);
     // The link itself, and when to fetch a new one: told only that checkout
     // was open, the model once answered "order it" with the 3D viewer's URL
     // as the checkout link (2026-10-19).
@@ -631,14 +856,22 @@ async function order() {
 
 $("customize").addEventListener("click", () => {
   lastActivity = Date.now();
-  void toggleFullscreen(app);
+  void toggleFullscreen(app).then(render);
 });
+for (const slot of SLOTS) {
+  $(`tab-${slot}`).addEventListener("click", () => {
+    activePart = slot;
+    render();
+  });
+}
+$("close").addEventListener("click", () => void toggleFullscreen(app).then(render));
 $("order").addEventListener("click", () => void order());
 
-// The bridge sets data-display-mode from the host; keep the toggle's label honest.
-new MutationObserver(() => {
-  $("customize").textContent = document.documentElement.dataset.displayMode === "fullscreen" ? "Done" : "Customize";
-}).observe(document.documentElement, { attributes: true, attributeFilter: ["data-display-mode"] });
+// The bridge sets data-display-mode from the host: inline and fullscreen draw the colours differently.
+new MutationObserver(() => render()).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ["data-display-mode"],
+});
 
 /** Whether the viewer could run, and where — the data that settles "how many sessions have WebGPU". */
 function report(event: string, detail?: string) {
@@ -652,3 +885,8 @@ function report(event: string, detail?: string) {
     displayMode: document.documentElement.dataset.displayMode ?? "inline",
   }).catch(() => {});
 }
+
+// Before the first result: the camera in neutral greys, so the stage is never empty.
+fallback.hidden = false;
+fallback.innerHTML = cameraSvg({ colors: { shell: ["#e4e4e7"], button: ["#c4c4c8"] }, gradientAngles: { shell: 0, button: 0 } } as Design);
+fallback.style.opacity = "0.6";

package/src/openai-order/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Order</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+        color: var(--color-text-primary, #1b1b1a);
+      }
+
+      .card {
+        display: grid;
+        gap: 14px;
+        max-width: 520px;
+        padding: 14px;
+        border-radius: var(--border-radius-lg, 14px);
+        background: var(--color-background-secondary, #f6f6f4);
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        box-sizing: border-box;
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+      /* The quote card's picture of the design, from its colours alone. */
+      .thumb {
+        position: relative;
+        flex: none;
+        width: 56px;
+        height: 56px;
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.14);
+        background: var(--color-background-tertiary, #e8e8e4);
+        box-sizing: border-box;
+      }
+      .thumb .cap {
+        position: absolute;
+        top: 9px;
+        right: 9px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+      .thumb .cap:not([style]) { display: none; }
+      .titles { min-width: 0; }
+      .titles h2 {
+        margin: 0;
+        font-size: var(--font-text-md-size, 15px);
+      }
+      .titles p {
+        margin: 2px 0 0;
+        font-size: var(--font-text-sm-size, 13px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+
+      /* Paid → Printing → Shipped → Delivered: a bar per step, filled once reached. */
+      .tracker {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 6px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .tracker li {
+        display: grid;
+        gap: 6px;
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+      .tracker li::before {
+        content: "";
+        height: 4px;
+        border-radius: 2px;
+        background: var(--color-border-primary, rgba(0, 0, 0, 0.12));
+      }
+      .tracker li.done::before { background: var(--color-text-primary, #1b1b1a); }
+      .tracker li.now {
+        font-weight: 600;
+        color: var(--color-text-primary, #1b1b1a);
+      }
+
+      button.action {
+        font: inherit;
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+        border-radius: var(--border-radius-full, 999px);
+        padding: 9px 14px;
+        cursor: pointer;
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
+        background: transparent;
+        color: var(--color-text-primary, #1b1b1a);
+      }
+
+      .status {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+      .status:empty { display: none; }
+      [hidden] { display: none !important; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="head" id="head" hidden>
+        <div class="thumb" id="thumb" aria-hidden="true"><span class="cap" id="cap"></span></div>
+        <div class="titles">
+          <h2 id="title"></h2>
+          <p id="line"></p>
+        </div>
+      </div>
+
+      <ol class="tracker" id="tracker" aria-label="Order progress" hidden>
+        <li data-step="paid">Paid</li>
+        <li data-step="printing">Printing</li>
+        <li data-step="shipped">Shipped</li>
+        <li data-step="delivered">Delivered</li>
+      </ol>
+
+      <button class="action" id="track" type="button" hidden></button>
+
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>