@womp/mcp-ui 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build": "yarn build:ui && yarn build:bake",
-    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print && yarn build:ui:cart && yarn build:ui:order && yarn build:ui:upload && yarn build:ui:openai-camera",
+    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print && yarn build:ui:cart && yarn build:ui:order && yarn build:ui:upload && yarn build:ui:openai-camera && yarn build:ui:openai-quote",
     "build:bake": "node scripts/bake-html.mjs",
     "dev": "vite",
     "dev:host": "vite",
@@ -31,7 +31,8 @@
     "build:ui:cart": "CARD=cart vite build",
     "build:ui:order": "CARD=order vite build",
     "build:ui:upload": "CARD=upload vite build",
-    "build:ui:openai-camera": "CARD=openai-camera vite build"
+    "build:ui:openai-camera": "CARD=openai-camera vite build",
+    "build:ui:openai-quote": "CARD=openai-quote vite build"
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",

package/src/cart/main.ts

@@ -10,7 +10,7 @@ import { $, callTool, createCard, openLink, type GenerationResult } from "../sha
  * the app-callable `view_cart` until every thumbnail exists — the same
  * self-filling trick as the mesh card, bounded so a dead render can't poll
  * forever. Like every card, it never touches money: checkout is a
- * `ui/open-link` to `/pay/<ids>`.
+ * `ui/open-link` to `/checkout/<ids>`.
  */
 
 interface CartItem {

package/src/openai-camera/index.html

@@ -42,12 +42,6 @@
         height: auto;
         min-height: 0;
       }
-      /* While ordering, the design stays in view but gives the form the room. */
-      .card[data-view="order"] .stage,
-      .card[data-view="done"] .stage {
-        height: 220px;
-        flex: none;
-      }
       .stage iframe {
         display: block;
         width: 100%;
@@ -78,8 +72,6 @@
       .fallback dt { color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
       .fallback dd { margin: 0; font-variant-numeric: tabular-nums; }
 
-      .view[hidden] { display: none; }
-
       .controls {
         display: grid;
         gap: 8px;
@@ -246,51 +238,6 @@
       }
       button.action:disabled { opacity: 0.5; cursor: default; }
 
-      form {
-        display: grid;
-        gap: 8px;
-        padding: 12px 14px 0;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      }
-      form .wide { grid-column: 1 / -1; }
-      form h2 {
-        margin: 0;
-        font-size: var(--font-text-sm-size, 14px);
-      }
-      form .note {
-        margin: 0;
-        font-size: var(--font-text-xs-size, 12px);
-        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
-      }
-      label {
-        display: grid;
-        gap: 3px;
-        min-width: 0;
-        font-size: var(--font-text-xs-size, 12px);
-        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
-      }
-      input {
-        width: 100%;
-        box-sizing: border-box;
-        font: inherit;
-        font-size: var(--font-text-sm-size, 13px);
-        color: var(--color-text-primary, #1b1b1a);
-        background: var(--color-background-primary, #ffffff);
-        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
-        border-radius: 8px;
-        padding: 7px 9px;
-      }
-      input[aria-invalid="true"] { border-color: #c2410c; }
-
-      .done {
-        padding: 14px;
-        display: grid;
-        gap: 6px;
-        font-size: var(--font-text-sm-size, 13px);
-      }
-      .done h2 { margin: 0; font-size: var(--font-text-md-size, 15px); }
-      .done p { margin: 0; color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
-
       .status {
         padding: 0 14px 10px;
         font-size: var(--font-text-xs-size, 11px);
@@ -300,13 +247,13 @@
     </style>
   </head>
   <body>
-    <div class="card" id="card" data-view="design">
+    <div class="card" id="card">
       <div class="stage">
         <iframe id="viewer" title="3D preview of your camera" allow="fullscreen" hidden></iframe>
         <div class="fallback" id="fallback" hidden></div>
       </div>
 
-      <div class="view" id="view-design">
+      <div id="view-design">
         <div class="controls">
           <div class="row">
             <span>Shell</span>
@@ -348,35 +295,6 @@
         </div>
       </div>
 
-      <div class="view" id="view-order" hidden>
-        <form id="order-form" novalidate>
-          <h2 class="wide">Where should we send it?</h2>
-          <p class="note wide" id="order-summary"></p>
-          <label class="wide">Full name<input name="name" autocomplete="name" maxlength="200" /></label>
-          <label class="wide">Email<input name="email" type="email" autocomplete="email" maxlength="200" /></label>
-          <label class="wide">Address<input name="address" autocomplete="street-address" maxlength="200" /></label>
-          <label>City<input name="city" autocomplete="address-level2" maxlength="200" /></label>
-          <label>Postcode / ZIP<input name="postcode" autocomplete="postal-code" maxlength="40" /></label>
-          <label class="wide">Country<input name="country" autocomplete="country-name" maxlength="100" /></label>
-        </form>
-        <div class="foot">
-          <div class="price">Test mode — nothing is charged.</div>
-          <button class="action" id="order-back" type="button">Back</button>
-          <button class="action primary" id="order-place" type="button">Place test order</button>
-        </div>
-      </div>
-
-      <div class="view" id="view-done" hidden>
-        <div class="done">
-          <h2>Order received</h2>
-          <p id="done-text"></p>
-        </div>
-        <div class="foot">
-          <div class="price"></div>
-          <button class="action" id="done-back" type="button">Back to design</button>
-        </div>
-      </div>
-
       <div class="status" id="status">Connecting&hellip;</div>
     </div>
     <script type="module" src="./main.ts"></script>

package/src/openai-camera/main.ts

@@ -1,4 +1,4 @@
-import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../shared/bridge";
+import { $, callTool, createCard, pushModelContext, sendChatMessage, toggleFullscreen } from "../shared/bridge";
 
 /**
  * The camera card — the OpenAI MCP's first project (swan-backend
@@ -24,9 +24,9 @@ import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../
  * 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
- * the app-only `place_order` for the revision on screen. Nothing is charged.
+ * Order asks for a quote in the chat, as if the user had typed it: the model
+ * answers with `checkout_camera`, whose quote card (src/openai-quote) carries the
+ * checkout link. Nothing about paying happens in here.
  */
 
 interface DesignOption {
@@ -39,7 +39,6 @@ interface DesignOption {
 interface Design {
   designId: string;
   rev: number;
-  mode?: "design" | "checkout";
   viewerUrl: string;
   viewerOrigin: string;
   sceneUrl: string;
@@ -53,15 +52,8 @@ interface Design {
   lastChange?: { source: string; writer: string; fields: string[] };
 }
 
-interface OrderResult {
-  orderId: string;
-  rev: number;
-  price: { label: string };
-}
-
 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;
@@ -80,15 +72,11 @@ const ARROW_AT_0: Record<Slot, number> = { shell: 90, button: 0 };
 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. */
 const writer = `card-${Math.random().toString(36).slice(2, 10)}`;
 
-const cardEl = $("card");
 const viewer = $("viewer") as HTMLIFrameElement;
 const fallback = $("fallback");
-const form = $("order-form") as HTMLFormElement;
 
 let design: Design | undefined;
 /** Revision the viewer is showing. */
@@ -123,13 +111,6 @@ function setStatus(text: string, clearAfterMs?: number) {
   if (clearAfterMs) statusTimer = window.setTimeout(() => ($("status").textContent = ""), clearAfterMs);
 }
 
-function showView(view: View) {
-  cardEl.dataset.view = view;
-  $("view-design").hidden = view !== "design";
-  $("view-order").hidden = view !== "order";
-  $("view-done").hidden = view !== "done";
-}
-
 const { app } = createCard("Camera", {
   onInput: () => setStatus("Setting up your camera…"),
   onResult: (raw) => {
@@ -151,7 +132,6 @@ function adopt(next: Design) {
   } else if (next.rev > loadedRev) {
     void loadViewer();
   }
-  if (next.mode === "checkout") openOrderForm();
 }
 
 // ---- the viewer -------------------------------------------------------------
@@ -288,7 +268,7 @@ window.addEventListener("message", (event) => {
   } else if (msg?.type === "kakapo:print") {
     // The viewer's own Print button is our Order.
     onViewerParams(flatten(msg.scripts));
-    openOrderForm();
+    void order();
   }
 });
 
@@ -468,10 +448,6 @@ function render() {
     $(`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 ${paintText(design.colors.shell, design.gradientAngles.shell)}, ` +
-    `button ${paintText(design.colors.button, design.gradientAngles.button)}.`;
   if (!fallback.hidden) showFallback();
 }
 
@@ -599,56 +575,30 @@ for (const slot of SLOTS) {
 
 // ---- ordering -----------------------------------------------------------------
 
-function openOrderForm() {
-  if (!design) return;
-  lastActivity = Date.now();
-  showView("order");
-  setStatus("");
-  (form.elements.namedItem("name") as HTMLInputElement | null)?.focus();
-}
-
-/** The form's values, or undefined after marking what is missing. */
-function readContact(): Record<(typeof CONTACT_FIELDS)[number], string> | undefined {
-  const contact = {} as Record<(typeof CONTACT_FIELDS)[number], string>;
-  let ok = true;
-  for (const name of CONTACT_FIELDS) {
-    const input = form.elements.namedItem(name) as HTMLInputElement;
-    const value = input.value.trim();
-    const valid = name === "email" ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) : value.length > 0;
-    input.setAttribute("aria-invalid", String(!valid));
-    if (!valid) ok = false;
-    contact[name] = value;
-  }
-  return ok ? contact : undefined;
-}
+let ordering = false;
 
-async function placeOrder() {
-  if (!design) return;
-  const contact = readContact();
-  if (!contact) {
-    setStatus("Fill in the highlighted fields.");
-    return;
-  }
-  const button = $("order-place") as HTMLButtonElement;
+/**
+ * Ask for a quote in the chat. Whatever the user just changed is saved first,
+ * so the quote is for what is on screen, and fullscreen closes so the quote card
+ * that answers is in view.
+ */
+async function order() {
+  if (!design || ordering) return;
+  ordering = true;
+  lastActivity = Date.now();
+  const button = $("order") as HTMLButtonElement;
   button.disabled = true;
-  setStatus("Placing your order…");
+  setStatus("Getting your quote…");
   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;
-    if (res.isError || !order) {
-      setStatus("The order didn't go through. Check the details and try again.");
-      return;
-    }
-    $("done-text").textContent = `Test order ${order.orderId} is recorded (${order.price.label}). Nothing was charged.`;
-    showView("done");
-    setStatus("");
-    void pushModelContext(app, `The user placed test order ${order.orderId} for camera design ${design.designId}, revision ${order.rev}.`);
+    if (document.documentElement.dataset.displayMode === "fullscreen") await toggleFullscreen(app);
+    const sent = await sendChatMessage(app, "Order it");
+    setStatus(sent ? "" : "Ask in the chat to order it.");
   } catch {
-    setStatus("The order didn't go through. Try again in a moment.");
+    setStatus("Couldn't ask for a quote. Ask in the chat to order it.");
   } finally {
+    ordering = false;
     button.disabled = false;
   }
 }
@@ -657,14 +607,7 @@ $("customize").addEventListener("click", () => {
   lastActivity = Date.now();
   void toggleFullscreen(app);
 });
-$("order").addEventListener("click", openOrderForm);
-$("order-back").addEventListener("click", () => showView("design"));
-$("order-place").addEventListener("click", () => void placeOrder());
-$("done-back").addEventListener("click", () => showView("design"));
-form.addEventListener("submit", (event) => {
-  event.preventDefault();
-  void placeOrder();
-});
+$("order").addEventListener("click", () => void order());
 
 // The bridge sets data-display-mode from the host; keep the toggle's label honest.
 new MutationObserver(() => {

package/src/openai-quote/index.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Quote</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: 12px;
+        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;
+      }
+      /* A picture of the design from its colours alone: the shell, and the shutter button on it. */
+      .thumb {
+        position: relative;
+        flex: none;
+        width: 56px;
+        height: 56px;
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.14);
+        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);
+      }
+      .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));
+      }
+
+      .lines {
+        display: grid;
+        gap: 6px;
+        margin: 0;
+        padding-top: 12px;
+        border-top: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        font-size: var(--font-text-sm-size, 13px);
+      }
+      .lines > div {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .lines dt { color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
+      .lines dd { margin: 0; font-variant-numeric: tabular-nums; }
+      .lines .total {
+        padding-top: 6px;
+        border-top: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        font-weight: 600;
+      }
+      .lines .total dt { color: inherit; }
+
+      .note {
+        margin: 0;
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+
+      .foot {
+        display: flex;
+        gap: 8px;
+      }
+      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);
+      }
+      button.action.primary {
+        flex: 1;
+        border-color: transparent;
+        background: var(--color-text-primary, #1b1b1a);
+        color: var(--color-background-primary, #ffffff);
+      }
+      button.action:disabled { opacity: 0.5; cursor: default; }
+
+      .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">
+        <div class="thumb" id="thumb" aria-hidden="true"><span class="cap" id="cap"></span></div>
+        <div class="titles">
+          <h2 id="title"></h2>
+          <p id="summary"></p>
+        </div>
+      </div>
+
+      <dl class="lines" id="lines" hidden>
+        <div><dt id="item-label"></dt><dd id="item-amount"></dd></div>
+        <div><dt id="shipping-label"></dt><dd id="shipping-amount"></dd></div>
+        <div class="total"><dt id="total-label">Total</dt><dd id="total"></dd></div>
+      </dl>
+      <p class="note" id="note" hidden></p>
+
+      <div class="foot" id="foot" hidden>
+        <button class="action" id="edit" type="button">Edit design</button>
+        <button class="action primary" id="checkout" type="button"></button>
+      </div>
+
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/openai-quote/main.ts

@@ -0,0 +1,131 @@
+import { $, createCard, openExternal, pushModelContext, sendChatMessage, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The quote card: what `checkout_camera` answers on the OpenAI MCP (swan-backend
+ * docs/OPENAI_MCP.md). The camera's price, shipping to the user's country, the
+ * total and an arrival date, for the design as it was when the user asked.
+ *
+ * It never touches money or an address. Checkout opens the quote's checkout
+ * link on the web, where the user pays; every browser that opens it gets its
+ * own copy of this design in its cart. Edit design asks the chat to reopen the
+ * designer, as if the user had typed it.
+ */
+
+interface Quote {
+  designId: string;
+  rev: number;
+  title: string;
+  summary: string;
+  /** Each part's colours as CSS, first to last. */
+  swatches: { shell: string[]; button: string[] };
+  currency: string;
+  item: { label: string; amount: number };
+  shipping: { country: string; countryName: string; amount: number } | null;
+  total: number;
+  /** YYYY-MM-DD */
+  arrivesBy: string | null;
+  checkoutUrl: string;
+  expiresAt: string;
+}
+
+let quote: Quote | undefined;
+
+const setStatus = (text: string) => {
+  $("status").textContent = text;
+};
+
+/** One colour fills; two or three run top to bottom, as on the shell. */
+const paint = (colors: string[]) => (colors.length > 1 ? `linear-gradient(180deg, ${colors.join(", ")})` : colors[0] || "transparent");
+
+/** "Nov 2", or "Nov 2, 2027" when it isn't this year. A date-only string is the user's calendar day, not UTC midnight. */
+function day(iso: string) {
+  const [y, m, d] = iso.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(y !== new Date().getFullYear() ? { year: "numeric" } : {}),
+  });
+}
+
+/** "womp.com" from the link, so the button names where it goes on every environment. */
+function host(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return "the web";
+  }
+}
+
+const expired = (q: Quote) => Date.parse(q.expiresAt) <= Date.now();
+
+function render(q: Quote) {
+  const money = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: q.currency }).format(amount);
+
+  $("thumb").style.background = paint(q.swatches.shell);
+  $("cap").style.background = paint(q.swatches.button);
+  $("title").textContent = q.title;
+  $("summary").textContent = q.summary;
+
+  $("item-label").textContent = q.item.label;
+  $("item-amount").textContent = money(q.item.amount);
+  if (q.shipping) {
+    $("shipping-label").textContent = `Shipping to ${q.shipping.countryName}`;
+    $("shipping-amount").textContent = money(q.shipping.amount);
+    $("total-label").textContent = "Total";
+  } else {
+    $("shipping-label").textContent = "Shipping";
+    $("shipping-amount").textContent = "Added at checkout";
+    $("total-label").textContent = "Total before shipping";
+  }
+  $("total").textContent = money(q.total);
+  $("lines").hidden = false;
+
+  const made = "Printed and assembled by Womp";
+  $("note").textContent = q.arrivesBy ? `Arrives by ${day(q.arrivesBy)} · ${made}` : made;
+  $("note").hidden = false;
+
+  const checkout = $("checkout") as HTMLButtonElement;
+  checkout.textContent = `Checkout on ${host(q.checkoutUrl)} ↗`;
+  checkout.disabled = expired(q);
+  $("foot").hidden = false;
+  setStatus(expired(q) ? "This quote has expired. Ask in the chat for a new one." : "");
+}
+
+const card = createCard("Quote", {
+  onInput: () => setStatus("Getting your quote…"),
+  onResult: (raw: GenerationResult) => {
+    const data = raw as unknown as Partial<Quote>;
+    // The bridge also calls this with a bare { status: "running" } placeholder.
+    if (typeof data.checkoutUrl !== "string" || typeof data.designId !== "string") return;
+    quote = data as Quote;
+    render(quote);
+  },
+});
+
+$("checkout").addEventListener("click", async () => {
+  if (!quote) return;
+  if (expired(quote)) {
+    render(quote);
+    return;
+  }
+  try {
+    await openExternal(card.app, quote.checkoutUrl);
+    setStatus("Checkout is open in your browser. Your design and total carry over.");
+    void pushModelContext(
+      card.app,
+      `The user opened checkout for camera design ${quote.designId}, revision ${quote.rev}. They enter their address and pay on that page.`,
+    );
+  } catch {
+    setStatus("Couldn't open checkout here. Ask in the chat for the checkout link.");
+  }
+});
+
+$("edit").addEventListener("click", async () => {
+  try {
+    const sent = await sendChatMessage(card.app, "Edit the design");
+    if (!sent) setStatus("Ask in the chat to change the design.");
+  } catch {
+    setStatus("Ask in the chat to change the design.");
+  }
+});

package/src/print/main.ts

@@ -28,9 +28,9 @@ import { expandHexInput, nearestPantone, normalizeHex, pantoneChips } from "./pa
  *
  * 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
+ * on womp.com" — a `ui/open-link` to /checkout/<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