@womp/mcp-ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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",
+    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print",
     "build:bake": "node scripts/bake-html.mjs",
     "dev": "vite",
     "dev:host": "vite",
@@ -24,7 +24,8 @@
     "clean": "rm -rf dist",
     "prepublishOnly": "yarn clean && yarn build",
     "build:ui:image": "CARD=image vite build",
-    "build:ui:mesh": "CARD=mesh vite build"
+    "build:ui:mesh": "CARD=mesh vite build",
+    "build:ui:print": "CARD=print vite build"
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",

package/src/print/index.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Womp 3D print</title>
+    <style>
+      /* Same var()-with-fallback discipline as the other cards: host style
+         variables arrive over the bridge after the handshake, not as CSS
+         custom properties, so the card must look right without them. */
+      :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, #e8e8e8);
+      }
+
+      .card {
+        max-width: 360px;
+        border-radius: var(--border-radius-lg, 14px);
+        overflow: hidden;
+        background: var(--color-background-secondary, #1b1b1d);
+        border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.08));
+        padding: 14px;
+        box-sizing: border-box;
+      }
+
+      .head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      .title {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+      }
+      .material {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .size {
+        margin-top: 4px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+      .size:empty { display: none; }
+
+      .price {
+        margin-top: 10px;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+      .price:empty { display: none; }
+      .amount {
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+      .was {
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        text-decoration: line-through;
+      }
+      .per {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+
+      .rows {
+        margin-top: 6px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        display: grid;
+        gap: 2px;
+      }
+      .rows:empty { display: none; }
+
+      .cta {
+        margin-top: 12px;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        border: 0;
+        cursor: pointer;
+        font: inherit;
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+        padding: 9px 12px;
+        border-radius: var(--border-radius-full, 999px);
+        color: #fff;
+        background: var(--color-background-accent, #5867dd);
+      }
+      .cta:hover { filter: brightness(1.1); }
+      .cta:focus-visible { outline: 2px solid var(--color-ring-primary, #7aa2ff); outline-offset: 1px; }
+      .cta[hidden] { display: none; }
+      .cta svg { width: 14px; height: 14px; display: block; }
+
+      /* The disclaimer only after there is a price to disclaim. */
+      .note {
+        margin-top: 8px;
+        font-size: 10px;
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.5));
+      }
+      .note[hidden] { display: none; }
+
+      .status {
+        margin-top: 8px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+      .status:empty { display: none; }
+
+      /* Skeleton shimmer while the engine measures. */
+      .measuring .price,
+      .measuring .rows { opacity: 0.35; }
+    </style>
+  </head>
+  <body>
+    <div class="card" id="card">
+      <div class="head">
+        <div class="title">3D print</div>
+        <div class="material" id="material"></div>
+      </div>
+      <div class="size" id="size"></div>
+      <div class="price" id="price"></div>
+      <div class="rows" id="rows"></div>
+      <button class="cta" id="order" hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M7 17 17 7M9 7h8v8" />
+        </svg>
+        Complete order on womp.com
+      </button>
+      <div class="note" id="note" hidden>
+        Shipping is added at checkout; the final price is confirmed before printing.
+      </div>
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/print/main.ts

@@ -0,0 +1,108 @@
+import { $, createCard, openLink, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The print card — a quote, and (after prepare_print) the way out to checkout.
+ *
+ * Deliberately has NO payment surface: the button opens womp.com's print flow
+ * via `ui/open-link`, where address, shipping and payment run with every gate
+ * the web app already has. The card renders what estimate_print /
+ * prepare_print returned; it never calls a tool itself, so unlike the mesh
+ * card it needs no app-callable visibility anywhere.
+ */
+
+/** 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 PrintQuoteResult {
+  material?: string;
+  quantity?: number;
+  dimensionsCm?: { width: number; height: number; depth: number };
+  solid?: QuoteRow;
+  hollow?: QuoteRow;
+  callerIsPro?: boolean;
+  projectId?: number;
+  /** Present on prepare_print only — what the CTA opens. */
+  printUrl?: string;
+}
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+
+const setStatus = (text: string) => {
+  $("status").textContent = text;
+};
+
+function render(data: PrintQuoteResult) {
+  $("card").classList.remove("measuring");
+
+  if (data.material) {
+    $("material").textContent = `${data.quantity && data.quantity > 1 ? `${data.quantity}x ` : ""}${data.material}`;
+  }
+
+  const d = data.dimensionsCm;
+  if (d) {
+    $("size").textContent = `${d.width.toFixed(1)} x ${d.height.toFixed(1)} x ${d.depth.toFixed(1)} cm`;
+  }
+
+  const solid = data.solid;
+  if (solid) {
+    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);
+    }
+    const per = document.createElement("span");
+    per.className = "per";
+    per.textContent = "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);
+    }
+    const days = document.createElement("div");
+    days.textContent = `~${solid.productionDays} production day${solid.productionDays === 1 ? "" : "s"}`;
+    rows.append(days);
+
+    $("note").hidden = false;
+    setStatus("");
+  }
+
+  const order = $("order");
+  order.hidden = !data.printUrl;
+}
+
+const card = createCard("Womp print", {
+  onTimeout: () => setStatus("Still measuring — ask me to check on it."),
+  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("measuring");
+      setStatus("Measuring mesh…");
+      return;
+    }
+    render(data);
+  },
+});
+
+$("order").addEventListener("click", () => {
+  const data = card.current() as PrintQuoteResult | undefined;
+  if (data?.printUrl) openLink(card.app, data.printUrl);
+});