@12ui/design 0.2.72 → 0.2.74

package/dist/mcp-slate-ui-script-remote.js

@@ -0,0 +1,147 @@
+/**
+ * What only the hosted target does (TARGET is "remote"): the words it says to the
+ * agent, and the marked image an edit carries.
+ *
+ * The messages. The host wraps every app message as untrusted input, so each one
+ * names what happened and carries no command, flag, path, price or credit word;
+ * the agent confirms through the model-visible data tool, which returns the
+ * server's own trusted text. Six messages exist, one per click (spec v2 9.2):
+ * Generate more with new options, Generate more based on a design, Edit,
+ * Select, Branch and Convert. The user's own words (a steer note, an edit instruction, the Branch
+ * explanation) are never put in a message; the agent reads them from the data
+ * tool, quoted. `runDir` is named in each because the tools take it and a
+ * thread may hold several workspaces.
+ *
+ * The marked image. The hosted server does no image work, so the screen
+ * composites the strokes onto the parent itself and sends the result with the
+ * edit: the parent as shown (the display rendition), scaled so its long edge is
+ * at most 1280 px, the strokes in whichever of four colours is farthest from
+ * the image's mean colour (as the local server chooses), round caps, a width of
+ * 0.8 percent of the shorter side (at least 3 px), exported as a JPEG whose
+ * quality steps down until it fits in 300 KiB, and whose size steps down if no
+ * quality does. A canvas that cannot be read or exported is an error the dialog
+ * shows; the edit is not sent without the picture it asked for.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export const SLATE_UI_REMOTE = String.raw `
+  // ---- the six messages ----
+  function remoteRunMessage(action, opId) {
+    var head;
+    if (action.kind === "edit") {
+      var parent = ver(action.versionId);
+      head = "I asked to edit " + (parent ? parent.label : "an option");
+    } else if (action.mode === "like") {
+      var from = ver(action.fromVersionId);
+      head = "I asked for more like " + (from ? from.label : "an option");
+    } else head = "I asked for new options";
+    return head + " in the Design workspace (request " + opId + ", runDir " + state.view.runDir + "). Please confirm it with " + TOOLS.data + ", then carry it out.";
+  }
+  function remoteSelectMessage(label) {
+    return "I selected " + label + " in the Design workspace (runDir " + state.view.runDir + "). Please confirm it with " + TOOLS.data + " and tell me its version id.";
+  }
+  function remoteHandoffMessage(kind, label, handoffId) {
+    return "I asked to " + (kind === "branch" ? "build from" : "convert") + " " + label + " in the Design workspace (request " + handoffId + ", runDir " + state.view.runDir + "). Please confirm it with " + TOOLS.data + ", then carry it out.";
+  }
+  // The run is recorded before the agent is told, and a host that refuses the message is shown, not thrown: the request
+  // is on the server and the person can ask their agent for it.
+  function remoteTellRun(action, opId) {
+    messageAgent(remoteRunMessage(action, opId)).then(function () {}, function (err) {
+      setStatus(tpl(COPY.sentRefused, { detail: errText(err) }), "err");
+    });
+  }
+
+  // ---- the marked image ----
+  var MARK_COLORS = [
+    { name: "magenta", hex: "#ff00ff", rgb: [255, 0, 255] },
+    { name: "cyan", hex: "#00e5ff", rgb: [0, 229, 255] },
+    { name: "red", hex: "#ff3b30", rgb: [255, 59, 48] },
+    { name: "yellow", hex: "#ffee00", rgb: [255, 238, 0] }
+  ];
+  var MARK_LONG_EDGE = 1280;
+  var MARK_MAX_BYTES = 300 * 1024;
+  var MARK_QUALITIES = [0.9, 0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.34];
+  var MARK_SHRINK = 0.85;
+  var MARK_MIN_LONG_EDGE = 320;
+
+  function markPicture(src) {
+    return new Promise(function (resolve, reject) {
+      var img = document.createElement("img");
+      img.onload = function () { resolve(img); };
+      img.onerror = function () { reject(new Error("the image could not be read")); };
+      img.src = src;
+    });
+  }
+  function markCanvas(w, h) {
+    var canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    var ctx = canvas.getContext && canvas.getContext("2d");
+    if (!ctx) throw new Error("no canvas is available");
+    return { canvas: canvas, ctx: ctx };
+  }
+  // The colour farthest (in RGB) from the image's mean; the first listed wins a tie.
+  function markColorFor(img) {
+    var side = 16;
+    var small = markCanvas(side, side);
+    small.ctx.drawImage(img, 0, 0, side, side);
+    var data = small.ctx.getImageData(0, 0, side, side).data;
+    var sum = [0, 0, 0];
+    var n = data.length / 4;
+    for (var i = 0; i < data.length; i += 4) { sum[0] += data[i]; sum[1] += data[i + 1]; sum[2] += data[i + 2]; }
+    var mean = [sum[0] / n, sum[1] / n, sum[2] / n];
+    function far(c) { return Math.sqrt(Math.pow(c.rgb[0] - mean[0], 2) + Math.pow(c.rgb[1] - mean[1], 2) + Math.pow(c.rgb[2] - mean[2], 2)); }
+    return MARK_COLORS.reduce(function (best, c) { return far(c) > far(best) ? c : best; });
+  }
+  function markPaint(ctx, w, h, strokes, hex) {
+    var width = Math.max(3, Math.min(w, h) * 0.008);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = hex;
+    ctx.fillStyle = hex;
+    ctx.lineWidth = width;
+    strokes.forEach(function (stroke) {
+      ctx.beginPath();
+      if (stroke.length === 1) {
+        ctx.arc(stroke[0][0] / 1000 * w, stroke[0][1] / 1000 * h, width / 2, 0, Math.PI * 2);
+        ctx.fill();
+        return;
+      }
+      ctx.moveTo(stroke[0][0] / 1000 * w, stroke[0][1] / 1000 * h);
+      for (var i = 1; i < stroke.length; i++) ctx.lineTo(stroke[i][0] / 1000 * w, stroke[i][1] / 1000 * h);
+      ctx.stroke();
+    });
+  }
+  // Bytes of a base64 string.
+  function base64Bytes(text) {
+    var pad = text.charAt(text.length - 1) === "=" ? (text.charAt(text.length - 2) === "=" ? 2 : 1) : 0;
+    return text.length * 3 / 4 - pad;
+  }
+  // The picture with the strokes on it, as a JPEG within the caps: the first quality that fits, then a smaller picture.
+  function compositeMarked(version, strokes) {
+    return wantImage(version, "full", true).then(markPicture).then(function (img) {
+      var sw = img.naturalWidth || img.width;
+      var sh = img.naturalHeight || img.height;
+      if (!(sw > 0) || !(sh > 0)) throw new Error("the image has no size");
+      var color = markColorFor(img);
+      var scale = Math.min(1, MARK_LONG_EDGE / Math.max(sw, sh));
+      for (;;) {
+        var w = Math.max(1, Math.round(sw * scale));
+        var h = Math.max(1, Math.round(sh * scale));
+        var target = markCanvas(w, h);
+        target.ctx.drawImage(img, 0, 0, w, h);
+        markPaint(target.ctx, w, h, strokes, color.hex);
+        for (var q = 0; q < MARK_QUALITIES.length; q++) {
+          var url = target.canvas.toDataURL("image/jpeg", MARK_QUALITIES[q]);
+          var comma = url.indexOf(",");
+          if (url.indexOf("data:image/jpeg") !== 0 || comma < 0) throw new Error("the canvas could not export a JPEG");
+          var data = url.slice(comma + 1);
+          if (base64Bytes(data) <= MARK_MAX_BYTES) return { mimeType: "image/jpeg", data: data, color: color.name };
+        }
+        scale *= MARK_SHRINK;
+        if (Math.max(sw, sh) * scale < MARK_MIN_LONG_EDGE) throw new Error("the marked image would be too large");
+      }
+    });
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-remote.js.map

package/dist/mcp-slate-ui-script-remote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-remote.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-remote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHxC,CAAC"}

package/dist/mcp-slate-ui-script-scribble.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The scribble layer of the Edit dialog: a canvas exactly over the image where
+ * a pointer draws freehand strokes, with Undo and Clear. A stroke is a
+ * polyline of integer permille points [x, y] (0 to 1000 of the displayed
+ * image's width and height), so it does not depend on the size it was drawn
+ * at; that is also what the edit run carries. The local server draws the
+ * annotated image itself, so nothing is exported here; the hosted target
+ * composites and exports its own (mcp-slate-ui-script-remote.ts).
+ *
+ * Limits (spec v3, section 2): at most 24 strokes, 400 points in a stroke and
+ * 3,000 points in all; points closer than 2 permille to the last one add
+ * nothing and are dropped. Past a limit the input is ignored, never truncated
+ * after the fact. A single click is a one-point stroke (a dot).
+ *
+ * Pointer only by design: the scribble is optional, and every other control
+ * of the dialog works by keyboard.
+ */
+export declare const SLATE_UI_SCRIBBLE: string;
+//# sourceMappingURL=mcp-slate-ui-script-scribble.d.ts.map

package/dist/mcp-slate-ui-script-scribble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-scribble.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-scribble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,QA+F7B,CAAC"}

package/dist/mcp-slate-ui-script-scribble.js

@@ -0,0 +1,114 @@
+/**
+ * The scribble layer of the Edit dialog: a canvas exactly over the image where
+ * a pointer draws freehand strokes, with Undo and Clear. A stroke is a
+ * polyline of integer permille points [x, y] (0 to 1000 of the displayed
+ * image's width and height), so it does not depend on the size it was drawn
+ * at; that is also what the edit run carries. The local server draws the
+ * annotated image itself, so nothing is exported here; the hosted target
+ * composites and exports its own (mcp-slate-ui-script-remote.ts).
+ *
+ * Limits (spec v3, section 2): at most 24 strokes, 400 points in a stroke and
+ * 3,000 points in all; points closer than 2 permille to the last one add
+ * nothing and are dropped. Past a limit the input is ignored, never truncated
+ * after the fact. A single click is a one-point stroke (a dot).
+ *
+ * Pointer only by design: the scribble is optional, and every other control
+ * of the dialog works by keyboard.
+ */
+export const SLATE_UI_SCRIBBLE = String.raw `
+  var SCRIBBLE_COLOR = "#ff2bd6";
+  var SCRIBBLE_MAX_STROKES = 24;
+  var SCRIBBLE_MAX_POINTS = 400;
+  var SCRIBBLE_MAX_TOTAL = 3000;
+  var SCRIBBLE_MIN_GAP = 2;
+
+  function scribbleTotal(d) { return d.strokes.reduce(function (n, s) { return n + s.length; }, 0); }
+
+  // Paint the strokes on the canvas: round caps, a width of 0.8 percent of the shorter side.
+  function scribblePaint(d) {
+    var canvas = d.canvas;
+    var ctx = canvas && canvas.getContext && canvas.getContext("2d");
+    if (!ctx) return;
+    var w = canvas.width;
+    var h = canvas.height;
+    ctx.clearRect(0, 0, w, h);
+    var width = Math.max(2, Math.min(w, h) * 0.008);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = SCRIBBLE_COLOR;
+    ctx.fillStyle = SCRIBBLE_COLOR;
+    ctx.lineWidth = width;
+    d.strokes.forEach(function (stroke) {
+      ctx.beginPath();
+      if (stroke.length === 1) {
+        ctx.arc(stroke[0][0] / 1000 * w, stroke[0][1] / 1000 * h, width / 2, 0, Math.PI * 2);
+        ctx.fill();
+        return;
+      }
+      ctx.moveTo(stroke[0][0] / 1000 * w, stroke[0][1] / 1000 * h);
+      for (var i = 1; i < stroke.length; i++) ctx.lineTo(stroke[i][0] / 1000 * w, stroke[i][1] / 1000 * h);
+      ctx.stroke();
+    });
+  }
+
+  function scribbleUndo(d) {
+    if (d.committing || d.strokes.length === 0) return;
+    d.strokes.pop();
+    d.current = null;
+    scribblePaint(d);
+    updateDialogUi();
+  }
+  function scribbleClear(d) {
+    if (d.committing) return;
+    d.strokes = [];
+    d.current = null;
+    scribblePaint(d);
+    updateDialogUi();
+  }
+
+  function scribbleAttach(wrap, d) {
+    var canvas = document.createElement("canvas");
+    canvas.className = "scribble";
+    canvas.setAttribute("aria-label", COPY.scribbleHint);
+    d.canvas = canvas;
+    wrap.appendChild(canvas);
+    // The bitmap follows the size the image is shown at; the strokes repaint from their permille points.
+    function fit() {
+      var r = canvas.getBoundingClientRect();
+      var scale = window.devicePixelRatio || 1;
+      var w = Math.max(1, Math.round(r.width * scale));
+      var h = Math.max(1, Math.round(r.height * scale));
+      if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
+      scribblePaint(d);
+    }
+    new ResizeObserver(fit).observe(wrap);
+    function point(e) {
+      var r = canvas.getBoundingClientRect();
+      var x = Math.round((e.clientX - r.left) / (r.width || 1) * 1000);
+      var y = Math.round((e.clientY - r.top) / (r.height || 1) * 1000);
+      return [Math.max(0, Math.min(1000, x)), Math.max(0, Math.min(1000, y))];
+    }
+    canvas.addEventListener("pointerdown", function (e) {
+      if (d.committing || d.strokes.length >= SCRIBBLE_MAX_STROKES || scribbleTotal(d) >= SCRIBBLE_MAX_TOTAL) return;
+      d.current = [point(e)];
+      d.strokes.push(d.current);
+      if (canvas.setPointerCapture) { try { canvas.setPointerCapture(e.pointerId); } catch (err) { /* capture is best effort */ } }
+      if (e.preventDefault) e.preventDefault();
+      scribblePaint(d);
+      updateDialogUi();
+    });
+    canvas.addEventListener("pointermove", function (e) {
+      if (!d.current) return;
+      if (d.current.length >= SCRIBBLE_MAX_POINTS || scribbleTotal(d) >= SCRIBBLE_MAX_TOTAL) return;
+      var p = point(e);
+      var last = d.current[d.current.length - 1];
+      if (Math.sqrt((p[0] - last[0]) * (p[0] - last[0]) + (p[1] - last[1]) * (p[1] - last[1])) < SCRIBBLE_MIN_GAP) return;
+      d.current.push(p);
+      scribblePaint(d);
+    });
+    function finish() { d.current = null; updateDialogUi(); }
+    canvas.addEventListener("pointerup", finish);
+    canvas.addEventListener("pointercancel", finish);
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-scribble.js.map

package/dist/mcp-slate-ui-script-scribble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-scribble.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-scribble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+F1C,CAAC"}

package/dist/mcp-slate-ui-script-select.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Select and the two hand-offs. Select acts at once: no dialog, and no reason
+ * (the pick tool takes none from here). It records the pick and then tells the
+ * agent, best effort. Branch and Convert (dialogs, in
+ * mcp-slate-ui-script-dialog.ts) end here: they record the request with the
+ * hand-off tool, under an id minted when the dialog opened, and then tell the
+ * agent to read it.
+ *
+ * What the agent is told names what happened and carries no command, no flag
+ * and no backtick: the host wraps app messages as untrusted input, so the
+ * agent confirms with the model-visible data tool. The user's own words (the
+ * Branch explanation) are never put in a message; the agent reads them from
+ * the record.
+ */
+export declare const SLATE_UI_SELECT: string;
+//# sourceMappingURL=mcp-slate-ui-script-select.d.ts.map

package/dist/mcp-slate-ui-script-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-select.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,QAyD3B,CAAC"}

package/dist/mcp-slate-ui-script-select.js

@@ -0,0 +1,73 @@
+/**
+ * Select and the two hand-offs. Select acts at once: no dialog, and no reason
+ * (the pick tool takes none from here). It records the pick and then tells the
+ * agent, best effort. Branch and Convert (dialogs, in
+ * mcp-slate-ui-script-dialog.ts) end here: they record the request with the
+ * hand-off tool, under an id minted when the dialog opened, and then tell the
+ * agent to read it.
+ *
+ * What the agent is told names what happened and carries no command, no flag
+ * and no backtick: the host wraps app messages as untrusted input, so the
+ * agent confirms with the model-visible data tool. The user's own words (the
+ * Branch explanation) are never put in a message; the agent reads them from
+ * the record.
+ */
+export const SLATE_UI_SELECT = String.raw `
+  function samePick(version) {
+    var p = state.view && state.view.pick;
+    // A pick whose durable copy is gone is not a pick to rest on: Select stays available to record it again.
+    return !!p && p.intact !== false && !!version && p.versionId === version.versionId;
+  }
+
+  // What the agent is told, one wording per target: the local plugin's asks the agent to confirm through its tools, the
+  // hosted one is spec v2 9.2, and the browser's is only a record (its decision reaches the agent as the command's result).
+  function selectMessage(label, rev) {
+    if (TARGET === "remote") return remoteSelectMessage(label);
+    if (TARGET === "browser") return browserSelectMessage(label);
+    return "I selected " + label + " in the Design workspace (rev " + rev + "). " +
+      "Please confirm it with " + TOOLS.data + " for runDir " + state.view.runDir + ", and tell me its version id, path and sha256.";
+  }
+  function handoffMessage(kind, label, handoffId, rev) {
+    if (TARGET === "remote") return remoteHandoffMessage(kind, label, handoffId);
+    if (TARGET === "browser") return browserHandoffMessage(kind, label, handoffId);
+    return "I asked to " + (kind === "branch" ? "build from" : "convert") + " " + label + " in the Design workspace (rev " + rev + ", request " + handoffId + "). " +
+      "Please confirm it with " + TOOLS.data + " for runDir " + state.view.runDir + ", then carry it out and ask me before anything that uses my 12ui credits.";
+  }
+
+  function doSelect(version) {
+    // The button is disabled in these cases; the guard keeps a stray click (a script, a stale focus) from sending a second pick.
+    if (!version || state.busy || samePick(version) || !pickable(version)) return;
+    state.busy = true;
+    syncControls();
+    setStatus(COPY.recording);
+    callTool(TOOLS.pick, { runDir: state.view.runDir, versionId: version.versionId }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.view) applyView(sc.view, true);
+      var label = sc.pick ? sc.pick.label : version.label;
+      var rev = sc.rev !== undefined ? sc.rev : state.view.rev;
+      return messageAgent(selectMessage(label, rev)).then(function () {
+        setStatus(tpl(COPY.selectedLine, { label: label }), "ok");
+      }, function (err) {
+        setStatus(tpl(COPY.selectedRefused, { label: label, detail: errText(err) }), "err");
+      });
+    }, function (err) {
+      setStatus(tpl(COPY.couldNotSelect, { detail: errText(err) }), "err");
+    }).then(function () { state.busy = false; syncControls(); });
+  }
+
+  // Record a Branch or Convert request for the shown version, then tell the agent. Resolves once the agent has been
+  // told (or the host refused, which is shown but not thrown); rejects on a recording error so the dialog can show it.
+  function sendHandoff(kind, version, handoffId, options) {
+    return callTool(TOOLS.handoff, { runDir: state.view.runDir, handoffId: handoffId, kind: kind, versionId: version.versionId, options: options }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.view) applyView(sc.view, true);
+      var rev = sc.rev !== undefined ? sc.rev : state.view.rev;
+      return messageAgent(handoffMessage(kind, version.label, handoffId, rev)).then(function () {
+        setStatus(COPY.sent, "ok");
+      }, function (err) {
+        setStatus(tpl(COPY.sentRefused, { detail: errText(err) }), "err");
+      });
+    });
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-select.js.map

package/dist/mcp-slate-ui-script-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-select.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxC,CAAC"}

package/dist/mcp-slate-ui-script-stage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The fullscreen workspace: on the left the selection (compact thumbnails
+ * grouped by round, each option with its versions as chips), in the middle one
+ * large image, and under it one row of actions at the right: Edit, Branch and
+ * Convert, then Select (primary) at the far right. Nothing else shows until a
+ * button is clicked; the dialogs live
+ * in mcp-slate-ui-script-dialog.ts. One band above the image says what is
+ * running, stopped or failed, with Resume when the work can resume. Mounted
+ * only in fullscreen.
+ */
+export declare const SLATE_UI_STAGE: string;
+//# sourceMappingURL=mcp-slate-ui-script-stage.d.ts.map

package/dist/mcp-slate-ui-script-stage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,QAwK1B,CAAC"}

package/dist/mcp-slate-ui-script-stage.js

@@ -0,0 +1,180 @@
+/**
+ * The fullscreen workspace: on the left the selection (compact thumbnails
+ * grouped by round, each option with its versions as chips), in the middle one
+ * large image, and under it one row of actions at the right: Edit, Branch and
+ * Convert, then Select (primary) at the far right. Nothing else shows until a
+ * button is clicked; the dialogs live
+ * in mcp-slate-ui-script-dialog.ts. One band above the image says what is
+ * running, stopped or failed, with Resume when the work can resume. Mounted
+ * only in fullscreen.
+ */
+export const SLATE_UI_STAGE = String.raw `
+  var stageBuilt = false;
+  var stageEls = {};
+
+  var ICON_CLOSE = "M6 6l12 12M18 6L6 18";
+  function iconButton(label, path, onclick) {
+    var b = button("", "iconbtn", onclick);
+    b.setAttribute("aria-label", label);
+    b.title = label;
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + path + '"/></svg>';
+    return b;
+  }
+
+  function buildStageSkeleton() {
+    var stage = $("stage");
+    stage.textContent = "";
+    var head = el("header", "stagehead");
+    head.appendChild(el("h1", "sr", COPY.title));
+    head.appendChild(buildTabs());
+    head.appendChild(el("span", "spacer"));
+    stageEls.close = iconButton(COPY.closeWorkspace, ICON_CLOSE, closeWorkspace);
+    head.appendChild(stageEls.close);
+
+    stageEls.body = el("div", "stagebody");
+    stageEls.rail = el("nav", "rail");
+    stageEls.rail.setAttribute("aria-label", COPY.tabDesigns);
+    var main = el("section", "main");
+    stageEls.band = el("div", "band hidden");
+    stageEls.band.setAttribute("role", "status");
+    stageEls.hero = el("div", "hero");
+    var row = el("div", "actionrow");
+    stageEls.edit = button(COPY.edit, "", function () { openDialog("edit", stageEls.edit); });
+    stageEls.branch = button(COPY.branch, "", function () { openDialog("branch", stageEls.branch); });
+    stageEls.convert = button(COPY.convert, "", function () { openDialog("convert", stageEls.convert); });
+    stageEls.select = button(COPY.select, "primary", function () { doSelect(selectedVersion()); });
+    stageEls.editWhy = el("span", "sr");
+    stageEls.editWhy.id = "edit-why";
+    // Select is last: the row is right-aligned, so it ends at the picture's right edge.
+    [stageEls.edit, stageEls.branch, stageEls.convert, stageEls.select, stageEls.editWhy].forEach(function (b) { row.appendChild(b); });
+    stageEls.status = el("p", "status");
+    stageEls.status.setAttribute("data-status", "");
+    stageEls.status.setAttribute("role", "status");
+    stageEls.status.setAttribute("aria-live", "polite");
+    // A line set before the workspace was built (the first view arrives first) still shows.
+    stageEls.status.textContent = state.status.text;
+    if (state.status.kind) stageEls.status.className = "status " + state.status.kind;
+    main.appendChild(stageEls.band);
+    main.appendChild(stageEls.hero);
+    main.appendChild(row);
+    main.appendChild(stageEls.status);
+    stageEls.more = el("div", "morehost");
+    var selection = el("div", "selection");
+    selection.appendChild(stageEls.rail);
+    selection.appendChild(stageEls.more);
+    stageEls.body.appendChild(selection);
+    stageEls.body.appendChild(main);
+    stageEls.inspiration = el("div", "inspiration hidden");
+    stageEls.dialog = el("div", "dialogmount");
+
+    stage.appendChild(head);
+    stage.appendChild(stageEls.body);
+    stage.appendChild(stageEls.inspiration);
+    stage.appendChild(stageEls.dialog);
+    stageBuilt = true;
+  }
+
+  // A chip is one version of an option; its title carries the words of the edit that made it.
+  function chipTitle(v) { return v.prompt ? v.label + ": " + v.prompt : v.label; }
+
+  function buildRail(rail) {
+    var v = state.view;
+    v.rounds.slice().sort(function (a, b) { return b.index - a.index; }).forEach(function (round) {
+      var section = el("div", "round");
+      var head = el("h2", "roundhead", COPY.roundPrefix + round.index);
+      var title = roundTitle(round);
+      if (title) head.title = title;
+      section.appendChild(head);
+      var list = el("ul", "options");
+      orderedCandidates().filter(function (c) { return c.roundId === round.roundId; }).sort(byLabel).forEach(function (c) {
+        var item = el("li", "option");
+        item.appendChild(thumbButton(c, "opt"));
+        var versions = versionsOf(c);
+        if (versions.length > 1) {
+          var chips = el("div", "chips");
+          versions.forEach(function (version) {
+            var on = state.sel.versionId === version.versionId;
+            var chip = button(version.label, "chip" + (on ? " selected" : ""), function () { selectCandidate(c.candidateId, version.versionId); });
+            chip.title = chipTitle(version);
+            chip.setAttribute("aria-label", COPY.versionPrefix + version.label);
+            chip.setAttribute("aria-pressed", on ? "true" : "false");
+            chips.appendChild(chip);
+          });
+          item.appendChild(chips);
+        }
+        list.appendChild(item);
+      });
+      section.appendChild(list);
+      rail.appendChild(section);
+    });
+    var slot = el("div", "moreslot");
+    slot.appendChild(moreTile());
+    rail.appendChild(slot);
+  }
+
+  // ---- the band: what is running, stopped or failed ----
+  function buildBand(node, band) {
+    node.appendChild(el("span", "bandtext" + (band.kind === "failed" ? " err" : ""), band.text));
+    if (band.op.resumable) {
+      var b = button(COPY.resume, "textbtn", function () { actResume(band.op, b); });
+      node.appendChild(b);
+    }
+  }
+  function actResume(op, buttonEl) {
+    if (state.opBusy[op.opId]) return;
+    state.opBusy[op.opId] = true;
+    if (buttonEl) buttonEl.disabled = true;
+    callTool(TOOLS.resume, { runDir: state.view.runDir, opId: op.opId }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.view) applyView(sc.view, true);
+    }, function (err) { setStatus(errText(err), "err"); }).then(function () { state.opBusy[op.opId] = false; if (buttonEl) buttonEl.disabled = false; });
+  }
+
+  function syncStageControls(selectLabel, selectDisabled) {
+    if (!stageBuilt || !isFullscreen()) return;
+    var v = selectedVersion();
+    if (selectLabel !== undefined) { stageEls.select.textContent = selectLabel; stageEls.select.disabled = selectDisabled; }
+    // Edit is off when the shown version cannot be edited; the reason is its accessible description, not a tooltip.
+    var blocked = !v || !v.editable;
+    stageEls.edit.disabled = blocked;
+    stageEls.editWhy.textContent = blocked && v && v.editBlockedReason ? v.editBlockedReason : "";
+    if (blocked && v && v.editBlockedReason) stageEls.edit.setAttribute("aria-describedby", "edit-why"); else stageEls.edit.removeAttribute("aria-describedby");
+    stageEls.branch.disabled = !v;
+    stageEls.convert.disabled = !v;
+  }
+
+  // ---- render ----
+  function renderStage() {
+    var v = state.view;
+    if (!stageBuilt) buildStageSkeleton();
+    stageEls.close.classList.toggle("hidden", !canInline());
+    syncTabs();
+    syncProgressLine(v);
+    var onDesigns = state.tab === "designs";
+    stageEls.body.classList.toggle("hidden", !onDesigns);
+    stageEls.inspiration.classList.toggle("hidden", onDesigns);
+    if (!onDesigns) { renderInspiration(stageEls.inspiration, "stage"); return; }
+    var c = selectedCandidate();
+    var sel = selectedVersion();
+    if (v.candidates.length === 0) {
+      stageEls.rail.textContent = "";
+      stageEls.rail.__sig = "";
+      stageEls.band.classList.add("hidden");
+      stageEls.hero.__sig = "";
+      stageEls.hero.textContent = "";
+      stageEls.hero.classList.add("note");
+      stageEls.hero.appendChild(el("div", "heronote", COPY.empty));
+      syncStageControls(COPY.select, true);
+      return;
+    }
+    var railSig = JSON.stringify([state.sel, v.rounds.map(function (r) { return [r.roundId, r.index, r.kind, r.fromVersionId]; }),
+      orderedCandidates().map(function (x) { return thumbSignature(x).concat([x.versionIds]); })]);
+    setIfChanged(stageEls.rail, railSig, buildRail);
+    var band = activeBand(v);
+    stageEls.band.classList.toggle("hidden", !band);
+    setIfChanged(stageEls.band, band ? JSON.stringify([band.kind, band.text, band.op.opId, band.op.resumable]) : "", function (node) { if (band) buildBand(node, band); });
+    setIfChanged(stageEls.hero, heroSignature(c, sel), function (node) { heroInto(node, c, sel); });
+    syncControls();
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-stage.js.map

package/dist/mcp-slate-ui-script-stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKvC,CAAC"}

package/dist/mcp-slate-ui-script-state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * View state, the image loader queue and the status polling controller.
+ *
+ * Host limits, measured or derived (see the step-0 probe): about five
+ * concurrent app requests app-wide, so a view keeps at most three image loads
+ * in flight, version pictures and reference pictures together (leaving room
+ * for status and an action); it polls only while something is running and the
+ * document is visible, with backoff from two to ten seconds and a `since`
+ * stamp so an unchanged answer costs no re-render. A hidden view issues no
+ * calls at all.
+ */
+export declare const SLATE_UI_STATE: string;
+//# sourceMappingURL=mcp-slate-ui-script-state.d.ts.map

package/dist/mcp-slate-ui-script-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-state.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAqS1B,CAAC"}