@womp/mcp-ui 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "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/index.html

@@ -120,6 +120,102 @@
         outline-offset: 2px;
       }
 
+      /* Any colour: the native picker (Chromium's has an eyedropper of its own). */
+      .pick {
+        position: relative;
+        flex: none;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        border: 1px solid rgba(0, 0, 0, 0.18);
+        background: conic-gradient(#ff5e5e, #ffd93d, #6bdc6b, #4fc3f7, #7b6cf6, #f06bd8, #ff5e5e);
+        cursor: pointer;
+        box-sizing: border-box;
+      }
+      .pick input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        padding: 0;
+        border: 0;
+        cursor: pointer;
+      }
+      .icon-button {
+        flex: none;
+        display: inline-grid;
+        place-items: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border-radius: 50%;
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
+        background: transparent;
+        color: var(--color-text-primary, #1b1b1a);
+        font: inherit;
+        font-size: 14px;
+        line-height: 1;
+        cursor: pointer;
+      }
+      .icon-button[hidden] { display: none; }
+      .icon-button:disabled { opacity: 0.4; cursor: default; }
+
+      .mode {
+        flex: none;
+        display: inline-flex;
+        gap: 2px;
+        padding: 2px;
+        border-radius: var(--border-radius-full, 999px);
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
+      }
+      .mode button {
+        font: inherit;
+        font-size: var(--font-text-xs-size, 12px);
+        padding: 3px 10px;
+        border: 0;
+        border-radius: var(--border-radius-full, 999px);
+        background: transparent;
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+        cursor: pointer;
+      }
+      .mode button[aria-pressed="true"] {
+        background: var(--color-text-primary, #1b1b1a);
+        color: var(--color-background-primary, #ffffff);
+      }
+
+      /* A gradient: its colours on a track, the one being edited ringed. */
+      .stops {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+      .stops[hidden] { display: none; }
+      .track {
+        position: relative;
+        width: 132px;
+        height: 22px;
+        border-radius: var(--border-radius-full, 999px);
+        border: 1px solid rgba(0, 0, 0, 0.18);
+        box-sizing: border-box;
+      }
+      .stop {
+        position: absolute;
+        top: 50%;
+        width: 18px;
+        height: 18px;
+        margin: -9px 0 0 -9px;
+        padding: 0;
+        border-radius: 50%;
+        border: 2px solid #ffffff;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+        cursor: pointer;
+      }
+      .stop[aria-pressed="true"] {
+        box-shadow: 0 0 0 2px var(--color-text-primary, #1b1b1a);
+      }
+
       .foot {
         display: flex;
         align-items: center;
@@ -212,8 +308,38 @@
 
       <div class="view" id="view-design">
         <div class="controls">
-          <div class="row"><span>Shell</span><div class="swatches" id="sw-shell"></div></div>
-          <div class="row"><span>Button</span><div class="swatches" id="sw-button"></div></div>
+          <div class="row">
+            <span>Shell</span>
+            <div class="mode" role="group" aria-label="Shell finish">
+              <button type="button" id="solid-shell" aria-pressed="true">Solid</button>
+              <button type="button" id="gradient-shell" aria-pressed="false">Gradient</button>
+            </div>
+            <div class="stops" id="stops-shell" hidden></div>
+          </div>
+          <div class="row">
+            <span></span>
+            <div class="swatches" id="sw-shell"></div>
+            <label class="pick" title="Any colour"><input type="color" id="pick-shell" aria-label="Shell: any colour" /></label>
+            <button class="icon-button" type="button" id="dropper-shell" title="Pick a colour from the screen" aria-label="Shell: pick a colour from the screen" hidden>
+              <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="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>
+            </button>
+          </div>
+          <div class="row">
+            <span>Button</span>
+            <div class="mode" role="group" aria-label="Button finish">
+              <button type="button" id="solid-button" aria-pressed="true">Solid</button>
+              <button type="button" id="gradient-button" aria-pressed="false">Gradient</button>
+            </div>
+            <div class="stops" id="stops-button" hidden></div>
+          </div>
+          <div class="row">
+            <span></span>
+            <div class="swatches" id="sw-button"></div>
+            <label class="pick" title="Any colour"><input type="color" id="pick-button" aria-label="Button: any colour" /></label>
+            <button class="icon-button" type="button" id="dropper-button" title="Pick a colour from the screen" aria-label="Button: pick a colour from the screen" hidden>
+              <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="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>
+            </button>
+          </div>
         </div>
         <div class="foot">
           <div class="price" id="price"></div>

package/src/openai-camera/main.ts

@@ -17,7 +17,9 @@ import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../
  *    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.
+ * 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.
  *
  * 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
@@ -39,7 +41,8 @@ interface Design {
   viewerOrigin: string;
   sceneUrl: string;
   options: DesignOption[];
-  colors: Record<Slot, string>;
+  /** Each part's colours: one is solid, more is a gradient. */
+  colors: Record<Slot, string[]>;
   palette: { name: string; hex: string }[];
   price: { amount: number; currency: string; label: string };
   lastChange?: { source: string; writer: string; fields: string[] };
@@ -55,6 +58,13 @@ type Slot = "shell" | "button";
 const SLOTS: Slot[] = ["shell", "button"];
 type View = "design" | "order" | "done";
 
+/** The most colours a gradient takes (the server holds the same limit). */
+const MAX_COLORS = 3;
+
+/** Chromium's EyeDropper API; absent elsewhere. */
+type EyeDropperCtor = new () => { open(): Promise<{ sRGBHex: string }> };
+const EyeDropper = (window as Window & { EyeDropper?: EyeDropperCtor }).EyeDropper;
+
 const CONTACT_FIELDS = ["name", "email", "address", "city", "postcode", "country"] as const;
 
 /** Marks this card's own writes, so its polling does not reload the viewer for them. */
@@ -78,6 +88,8 @@ let readyTimer: number | undefined;
 let pollTimer: number | undefined;
 let lastActivity = Date.now();
 let statusTimer: number | undefined;
+/** Which colour of a part's gradient the swatches, picker and eyedropper set. */
+const activeStop: Record<Slot, number> = { shell: 0, button: 0 };
 
 function setStatus(text: string, clearAfterMs?: number) {
   clearTimeout(statusTimer);
@@ -165,8 +177,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", design.colors.shell],
-    ["Button colour", design.colors.button],
+    ["Shell colour", paintText(design.colors.shell)],
+    ["Button colour", paintText(design.colors.button)],
     ...design.options.map((o) => [o.label, o.display] as [string, string]),
   ];
   for (const [k, v] of rows) {
@@ -192,8 +204,17 @@ function flatten(scripts: unknown): Record<string, number> {
   return out;
 }
 
+/**
+ * Where the viewer's messages come from. A host that frames the card on an
+ * opaque origin (a sandbox without allow-same-origin) passes that sandbox down
+ * to the viewer's frame, which then speaks as "null" — still our frame, as
+ * `event.source` proves.
+ */
+const fromViewer = (event: MessageEvent, d: Design) =>
+  event.source === viewer.contentWindow && (event.origin === d.viewerOrigin || event.origin === "null");
+
 window.addEventListener("message", (event) => {
-  if (!design || event.source !== viewer.contentWindow || event.origin !== design.viewerOrigin) return;
+  if (!design || !fromViewer(event, design)) return;
   const msg = event.data as { type?: string; scripts?: unknown };
   if (msg?.type === "kakapo:ready") {
     viewerReady = true;
@@ -213,7 +234,8 @@ 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;
-  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, design.viewerOrigin);
+  // "*": 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" }, "*");
 }, 1_500);
 
 function onViewerParams(params: Record<string, number>) {
@@ -233,10 +255,10 @@ function onViewerParams(params: Record<string, number>) {
 // ---- saving -------------------------------------------------------------------
 
 /**
- * Save the viewer's knobs (and a colour, if one was picked). Serialised, so two
- * quick changes cannot race each other's baseRev.
+ * Save the viewer's knobs (and a part's colours, 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(colors?: Partial<Record<Slot, string[]>>) {
   clearTimeout(syncTimer);
   syncTimer = undefined;
   while (syncing) await syncing;
@@ -280,9 +302,14 @@ 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];
+}
+
 const contextLine = (d: Design) =>
   `The user adjusted their camera in the card. Design ${d.designId}, revision ${d.rev}: ` +
-  `shell ${d.colors.shell}, button ${d.colors.button}; ` +
+  `shell ${paintText(d.colors.shell)}, button ${paintText(d.colors.button)}; ` +
   d.options.map((o) => `${o.label} ${o.display}`).join(", ") +
   ".";
 
@@ -321,15 +348,30 @@ async function poll() {
 
 // ---- controls -----------------------------------------------------------------
 
+/** A colour as CSS: a palette name's swatch, or the hex itself. */
+function cssColor(color: string) {
+  return design?.palette.find((p) => p.name === color)?.hex ?? color;
+}
+
 function render() {
   if (!design) return;
   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]];
+
+    $(`solid-${slot}`).setAttribute("aria-pressed", String(!gradient));
+    $(`gradient-${slot}`).setAttribute("aria-pressed", String(gradient));
+    renderStops(slot, paint);
+
     const row = $(`sw-${slot}`);
     row.textContent = "";
-    const chosen = design.colors[slot];
     const entries = [...design.palette];
-    // A colour the model set as a hex has no swatch of its own — show it first.
-    if (chosen.startsWith("#") && !entries.some((p) => p.name === chosen)) entries.unshift({ name: chosen, hex: chosen });
+    // A hex (from the model, the picker or the eyedropper) has no swatch of its own — show it first.
+    for (const color of [...new Set(paint)].reverse()) {
+      if (color.startsWith("#") && !entries.some((p) => p.name === color)) entries.unshift({ name: color, hex: color });
+    }
     for (const p of entries) {
       const b = document.createElement("button");
       b.type = "button";
@@ -341,18 +383,120 @@ function render() {
       b.addEventListener("click", () => void pickColor(slot, p.name));
       row.append(b);
     }
+    ($(`pick-${slot}`) as HTMLInputElement).value = cssColor(chosen);
+    $(`dropper-${slot}`).hidden = !EyeDropper;
   }
   $("price").textContent = `Full-colour print · ${design.price.label}`;
   $("order-summary").textContent =
-    `Your camera, printed in full colour: ${design.price.label}. Shell ${design.colors.shell}, button ${design.colors.button}.`;
+    `Your camera, printed in full colour: ${design.price.label}. ` +
+    `Shell ${paintText(design.colors.shell)}, button ${paintText(design.colors.button)}.`;
   if (!fallback.hidden) showFallback();
 }
 
-async function pickColor(slot: Slot, name: string) {
-  if (!design || design.colors[slot] === name) return;
+/** A gradient's colours on a track, first to last; picking one makes it the one the swatches set. */
+function renderStops(slot: Slot, paint: string[]) {
+  const box = $(`stops-${slot}`);
+  box.hidden = paint.length < 2;
+  box.textContent = "";
+  if (paint.length < 2) return;
+  const track = document.createElement("div");
+  track.className = "track";
+  track.style.background = `linear-gradient(90deg, ${paint.map(cssColor).join(", ")})`;
+  paint.forEach((color, i) => {
+    const stop = document.createElement("button");
+    stop.type = "button";
+    stop.className = "stop";
+    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-pressed", String(i === activeStop[slot]));
+    stop.addEventListener("click", () => {
+      activeStop[slot] = i;
+      render();
+    });
+    track.append(stop);
+  });
+  const add = iconButton("+", `${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, () => {
+    void setPaint(slot, paint.filter((_, i) => i !== activeStop[slot]));
+  });
+  box.append(track, add, remove);
+}
+
+function iconButton(text: string, label: string, disabled: boolean, onClick: () => void) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "icon-button";
+  b.textContent = text;
+  b.title = label;
+  b.setAttribute("aria-label", label);
+  b.disabled = disabled;
+  b.addEventListener("click", onClick);
+  return b;
+}
+
+/** A colour that reads well next to `color`, for a gradient's new end. */
+function partner(color: string) {
+  return color === "violet" ? "sky" : "violet";
+}
+
+/** The eyedropper's answer as #rrggbb; some Chromium versions say `rgb(r, g, b)`. */
+function toHex(color: string) {
+  const rgb = /^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(color);
+  if (!rgb) return color.toLowerCase();
+  return `#${rgb.slice(1, 4).map((c) => Number(c).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/** Set the colour being edited: the part's only colour, or the selected one of its gradient. */
+async function pickColor(slot: Slot, color: string) {
+  if (!design) return;
+  const paint = [...design.colors[slot]];
+  paint[activeStop[slot]] = color;
+  await setPaint(slot, paint);
+}
+
+async function setPaint(slot: Slot, paint: string[]) {
+  if (!design) return;
+  const current = design.colors[slot];
+  if (paint.length === current.length && paint.every((c, i) => c === current[i])) return;
   lastActivity = Date.now();
+  // Show it at once; the save's answer replaces it.
+  design = { ...design, colors: { ...design.colors, [slot]: paint } };
+  render();
   setStatus("Saving…");
-  await flushSync({ [slot]: name });
+  await flushSync({ [slot]: paint });
+}
+
+for (const slot of SLOTS) {
+  $(`solid-${slot}`).addEventListener("click", () => {
+    if (!design || design.colors[slot].length < 2) return;
+    const keep = design.colors[slot][activeStop[slot]];
+    activeStop[slot] = 0;
+    void setPaint(slot, [keep]);
+  });
+  $(`gradient-${slot}`).addEventListener("click", () => {
+    if (!design || design.colors[slot].length > 1) return;
+    const [only] = design.colors[slot];
+    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 -----------------------------------------------------------------