@womp/mcp-ui 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",

package/src/openai-camera/main.ts

@@ -13,13 +13,16 @@ import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../
  *    is saved with `sync_camera_design` (app-only). The viewer already shows it;
  *    no reload.
  *  - The model calls `update_camera_design`. That renders no card, so this card
- *    polls `get_camera_design` and reloads the viewer when the revision moved
- *    for any reason other than its own write.
+ *    polls `get_camera_design` and moves the viewer to the new revision when it
+ *    changed for any reason other than its own write.
  *
  * Colours are not viewer knobs (they live in the scene's materials), so a swatch
- * saves and then reloads the viewer with the new revision. Each part is solid
- * or a gradient of 2-3 colours; the colours come from the palette, the native
- * colour picker, or the eyedropper where the browser has one.
+ * saves and moves the viewer to the new revision. A viewer that says it can
+ * (`kakapo:setScene` in its ready message) swaps the revision in place, keeping
+ * its camera and re-modelling only what changed; any other is reloaded. Each part
+ * is solid or a gradient of 2-3 colours, turned 45° at a time by the arrow; the
+ * colours come from the palette, the native colour picker, or the eyedropper
+ * where the browser has one.
  *
  * Ordering happens in the card: Order (or a `checkout_camera` result, which
  * arrives with mode "checkout") opens the shipping form, and the form submits to
@@ -43,6 +46,8 @@ interface Design {
   options: DesignOption[];
   /** Each part's colours: one is solid, more is a gradient. */
   colors: Record<Slot, string[]>;
+  /** Which way each part's gradient runs, in degrees. */
+  gradientAngles: Record<Slot, number>;
   palette: { name: string; hex: string }[];
   price: { amount: number; currency: string; label: string };
   lastChange?: { source: string; writer: string; fields: string[] };
@@ -61,6 +66,16 @@ type View = "design" | "order" | "done";
 /** The most colours a gradient takes (the server holds the same limit). */
 const MAX_COLORS = 3;
 
+/** An arrow pointing right (Lucide `arrow-right`, ISC). */
+const ARROW =
+  '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>';
+/**
+ * Where each part's arrow points at 0°, in CSS degrees: the shell runs top to
+ * bottom, the button left to right. In the default view both turn anticlockwise
+ * as the angle grows, so the arrow turns by minus the angle.
+ */
+const ARROW_AT_0: Record<Slot, number> = { shell: 90, button: 0 };
+
 /** Chromium's EyeDropper API; absent elsewhere. */
 type EyeDropperCtor = new () => { open(): Promise<{ sRGBHex: string }> };
 const EyeDropper = (window as Window & { EyeDropper?: EyeDropperCtor }).EyeDropper;
@@ -79,6 +94,17 @@ let design: Design | undefined;
 /** Revision the viewer is showing. */
 let loadedRev = 0;
 let viewerReady = false;
+/** The design the viewer frame was loaded for. */
+let viewerDesignId: string | undefined;
+/** Whether the viewer takes a new revision by message instead of a reload. */
+let viewerCanSwap = 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. */
+let pendingSwap: string | undefined;
+let swapTimer: number | undefined;
+/** Waiting for the viewer's next params message. */
+const paramsWaiters: (() => void)[] = [];
 /** Last knob values read back from the viewer. */
 let viewerParams: Record<string, number> | undefined;
 let webgpu: boolean | undefined;
@@ -153,8 +179,29 @@ async function loadViewer(note?: string) {
     setStatus("");
     return;
   }
+  if (viewerReady && viewerCanSwap && viewerDesignId === design.designId) swapScene(design.sceneUrl, note);
+  else reloadViewer(note);
+}
+
+/** Hand the viewer another revision of the design on screen. */
+function swapScene(url: string, note?: string) {
+  pendingSwap = url;
+  setStatus(note ?? "Updating the 3D view…");
+  viewer.contentWindow?.postMessage({ type: "kakapo:setScene", url }, viewerTarget);
+  clearTimeout(swapTimer);
+  swapTimer = window.setTimeout(() => {
+    if (pendingSwap === url) reloadViewer(note);
+  }, 15_000);
+}
+
+function reloadViewer(note?: string) {
+  if (!design) return;
   viewerReady = false;
+  viewerCanSwap = false;
   viewerParams = undefined;
+  viewerDesignId = design.designId;
+  pendingSwap = undefined;
+  clearTimeout(swapTimer);
   fallback.hidden = true;
   viewer.hidden = false;
   viewer.src = design.viewerUrl;
@@ -177,8 +224,8 @@ function showFallback() {
     "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)],
-    ["Button colour", paintText(design.colors.button)],
+    ["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) {
@@ -215,15 +262,29 @@ const fromViewer = (event: MessageEvent, d: Design) =>
 
 window.addEventListener("message", (event) => {
   if (!design || !fromViewer(event, design)) return;
-  const msg = event.data as { type?: string; scripts?: unknown };
+  const msg = event.data as { type?: string; scripts?: unknown; messages?: unknown; url?: string; error?: string };
   if (msg?.type === "kakapo:ready") {
     viewerReady = true;
+    viewerTarget = event.origin === "null" ? "*" : event.origin;
+    viewerCanSwap = Array.isArray(msg.messages) && msg.messages.includes("kakapo:setScene");
     clearTimeout(readyTimer);
     viewerParams = flatten(msg.scripts);
     setStatus("");
     report("viewer-ready");
+  } else if (msg?.type === "kakapo:sceneSet") {
+    if (msg.url !== pendingSwap) return; // an earlier swap, answering late
+    pendingSwap = undefined;
+    clearTimeout(swapTimer);
+    if (msg.error) {
+      reloadViewer();
+      return;
+    }
+    // The revision's knob values are the viewer's now: the baseline for spotting the user's next change.
+    viewerParams = flatten(msg.scripts);
+    setStatus("");
   } else if (msg?.type === "kakapo:params") {
     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.
     onViewerParams(flatten(msg.scripts));
@@ -234,10 +295,23 @@ window.addEventListener("message", (event) => {
 // The viewer has no change event, so read its knobs on an interval while visible.
 window.setInterval(() => {
   if (!design || !viewerReady || document.visibilityState !== "visible") return;
-  // "*": under an opaque host the viewer's origin is "null", which no target origin can name. The request carries nothing.
-  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, "*");
+  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, viewerTarget);
 }, 1_500);
 
+/**
+ * The viewer's knobs as they are now rather than at the last poll, for a save
+ * the user just asked for: one made with values up to 1.5s old would put back
+ * a slider they had just moved.
+ */
+function freshViewerParams(): Promise<void> {
+  if (!viewerReady) return Promise.resolve();
+  return new Promise((resolve) => {
+    paramsWaiters.push(resolve);
+    viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, viewerTarget);
+    window.setTimeout(resolve, 500);
+  });
+}
+
 function onViewerParams(params: Record<string, number>) {
   if (!viewerParams) {
     viewerParams = params;
@@ -254,11 +328,17 @@ function onViewerParams(params: Record<string, number>) {
 
 // ---- saving -------------------------------------------------------------------
 
+/** What the card changes besides the viewer's knobs. */
+interface Finish {
+  colors?: Partial<Record<Slot, string[]>>;
+  gradientAngles?: Partial<Record<Slot, number>>;
+}
+
 /**
- * Save the viewer's knobs (and a part's colours, if they changed). Serialised,
- * so two quick changes cannot race each other's baseRev.
+ * Save the viewer's knobs (and a part's colours or gradient angle, if they
+ * changed). Serialised, so two quick changes cannot race each other's baseRev.
  */
-async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
+async function flushSync(finish?: Finish) {
   clearTimeout(syncTimer);
   syncTimer = undefined;
   while (syncing) await syncing;
@@ -271,7 +351,7 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
         baseRev,
         writer,
         params: viewerParams ?? {},
-        ...(colors ? { colors } : {}),
+        ...finish,
       });
       const next = res.structuredContent as Design | undefined;
       if (res.isError || !next) {
@@ -285,11 +365,11 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
         return;
       }
       // Anything besides our own write since baseRev (a chat change merged in)
-      // means the viewer is behind. So is a colour, which it cannot set itself.
+      // means the viewer is behind. So does a colour, which lives in the scene file.
       const merged = next.rev > baseRev + 1;
-      if (merged || colors) void loadViewer(merged ? "Merged with a change from the chat…" : "Applying colour…");
+      if (merged || finish) void loadViewer(merged ? "Merged with a change from the chat…" : "Applying colour…");
       else loadedRev = next.rev;
-      if (!merged && !colors) setStatus("Saved", 1_500);
+      if (!merged && !finish) setStatus("Saved", 1_500);
       void pushModelContext(app, contextLine(next));
     } catch {
       setStatus("Couldn't save that change.");
@@ -302,14 +382,15 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
   }
 }
 
-/** "coral", or "coral → violet gradient" */
-function paintText(paint: string[]) {
-  return paint.length > 1 ? `${paint.join(" → ")} gradient` : paint[0];
+/** "coral", "coral → violet gradient", or "coral → violet gradient turned 45°" */
+function paintText(paint: string[], angle = 0) {
+  if (paint.length < 2) return paint[0];
+  return `${paint.join(" → ")} gradient${angle ? ` turned ${angle}°` : ""}`;
 }
 
 const contextLine = (d: Design) =>
   `The user adjusted their camera in the card. Design ${d.designId}, revision ${d.rev}: ` +
-  `shell ${paintText(d.colors.shell)}, button ${paintText(d.colors.button)}; ` +
+  `shell ${paintText(d.colors.shell, d.gradientAngles.shell)}, button ${paintText(d.colors.button, d.gradientAngles.button)}; ` +
   d.options.map((o) => `${o.label} ${o.display}`).join(", ") +
   ".";
 
@@ -389,7 +470,8 @@ function render() {
   $("price").textContent = `Full-colour print · ${design.price.label}`;
   $("order-summary").textContent =
     `Your camera, printed in full colour: ${design.price.label}. ` +
-    `Shell ${paintText(design.colors.shell)}, button ${paintText(design.colors.button)}.`;
+    `Shell ${paintText(design.colors.shell, design.gradientAngles.shell)}, ` +
+    `button ${paintText(design.colors.button, design.gradientAngles.button)}.`;
   if (!fallback.hidden) showFallback();
 }
 
@@ -424,7 +506,12 @@ function renderStops(slot: Slot, paint: string[]) {
   const remove = iconButton("−", `${slot}: remove the selected gradient colour`, paint.length <= 2, () => {
     void setPaint(slot, paint.filter((_, i) => i !== activeStop[slot]));
   });
-  box.append(track, add, remove);
+  const angle = design?.gradientAngles[slot] ?? 0;
+  const turn = iconButton("", `${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)`;
+  box.append(turn, track, add, remove);
 }
 
 function iconButton(text: string, label: string, disabled: boolean, onClick: () => void) {
@@ -468,7 +555,18 @@ async function setPaint(slot: Slot, paint: string[]) {
   design = { ...design, colors: { ...design.colors, [slot]: paint } };
   render();
   setStatus("Saving…");
-  await flushSync({ [slot]: paint });
+  await freshViewerParams();
+  await flushSync({ colors: { [slot]: paint } });
+}
+
+async function setAngle(slot: Slot, angle: number) {
+  if (!design || design.gradientAngles[slot] === angle) return;
+  lastActivity = Date.now();
+  design = { ...design, gradientAngles: { ...design.gradientAngles, [slot]: angle } };
+  render();
+  setStatus("Saving…");
+  await freshViewerParams();
+  await flushSync({ gradientAngles: { [slot]: angle } });
 }
 
 for (const slot of SLOTS) {
@@ -536,6 +634,7 @@ async function placeOrder() {
   setStatus("Placing your order…");
   try {
     // Order what is on screen: save any pending knob turn first.
+    await freshViewerParams();
     if (syncTimer !== undefined || syncing) await flushSync();
     const res = await callTool(app, "place_order", { designId: design.designId, rev: design.rev, writer, contact });
     const order = res.structuredContent as OrderResult | undefined;