@12ui/design 0.2.71 → 0.2.73

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

@@ -0,0 +1,225 @@
+/**
+ * Generate more: the last tile of the thumbnails (the card's strip, the
+ * workspace's selection) and the panel it opens directly below them. The tile
+ * is an empty, very light thumbnail-sized box with a plus and no words; the
+ * panel is the heading, an optional note, how many (a segmented control) and
+ * Generate or Cancel. Clicking the tile again, Cancel or Escape collapses it.
+ *
+ * Generate starts a round through startRound, the very function the Design
+ * dialog uses for New options, so the run tool, the mode, the note and the
+ * selected inspiration are the same; the panel only adds the count.
+ *
+ * The same panel serves a thumbnail's plus (mcp-slate-ui-script-thumbtools.ts):
+ * "More like E2", with a tiny picture of that design, starts a round in mode
+ * "like" from that design's latest version. The tile opens the plain panel
+ * (mode "new"); opening either replaces the other, so neither carries the
+ * other's reference. While a
+ * round runs (or the request is in flight) the tile is off; the new round's
+ * pending options are already in the thumbnails, because the returned view
+ * carries them.
+ *
+ * In the card the panel takes its room from the large image rather than
+ * growing the frame. The host grows the frame downward and does not scroll
+ * the thread, so a panel added below the thumbnails lands under the host's
+ * composer, out of sight (the frame's own document has nothing to scroll).
+ * While the panel is open the image is shortened by the panel's height, and
+ * folded away when what would be left is too small to read, so the card keeps
+ * its height and the panel sits where the bottom of the card already was.
+ */
+export const SLATE_UI_MORE = String.raw `
+  var MORE = __MORE__;
+  var ICON_PLUS = "M12 5v14M5 12h14";
+
+  // A round that is running, or the panel's own request still in flight, keeps the tile off until it settles.
+  function moreBusy() {
+    return (!!state.view && runningOps().some(function (o) { return o.kind === "round"; })) || !!(state.more && state.more.committing);
+  }
+
+  // One tile per row of thumbnails; the strip and the selection each build their own.
+  function moreTile() {
+    var b = button("", "moretile", toggleMore);
+    b.setAttribute("aria-label", COPY.generateMore);
+    b.setAttribute("aria-expanded", "false");
+    b.setAttribute("aria-controls", "morepanel");
+    b.title = COPY.generateMore;
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="' + ICON_PLUS + '"/></svg>';
+    return b;
+  }
+  function moreTiles() { return Array.prototype.slice.call(document.querySelectorAll(".moretile")); }
+  function moreHosts() { return [$("more"), stageEls && stageEls.more].filter(Boolean); }
+
+  // The dashed tile opens the plain panel (new options). It closes that panel again; when a thumbnail's plus had the panel
+  // open for one design, the tile replaces it with the plain one, so neither carries the other's reference.
+  function toggleMore() {
+    if (state.more && state.more.mode === "new") { closeMore(true); return; }
+    openMore({ mode: "new" });
+  }
+  // A thumbnail's plus: the same panel, for variations of that design's latest version.
+  function openMoreLike(candidateId) {
+    var c = cand(candidateId);
+    var v = latestVersion(c);
+    if (!c || !v || !pickable(v)) return;
+    var m = state.more;
+    if (m && m.mode === "like" && m.fromVersionId === v.versionId && !m.committing) { m.els.note.focus(); return; }
+    openMore({ mode: "like", fromVersionId: v.versionId, fromCandidateId: c.candidateId, fromLabel: v.label });
+  }
+  function openMore(reference) {
+    if (!state.view || state.view.candidates.length === 0 || moreBusy()) return;
+    if (state.more) resetMore();
+    state.more = { id: uuid4(), mode: reference.mode, fromVersionId: reference.fromVersionId, fromCandidateId: reference.fromCandidateId, fromLabel: reference.fromLabel, note: "", count: MORE.initial, committing: false, error: "", els: {} };
+    buildMore();
+    syncMore();
+    state.more.els.note.focus();
+  }
+  // The shortest the card's image gets while the panel is open; below this it folds away, and the thumbnails stay.
+  var HERO_FLOOR_PX = 120;
+  function fitMore() {
+    var hero = $("hero");
+    if (!hero) return;
+    hero.style.removeProperty("--cap");
+    hero.classList.remove("folded");
+    var m = state.more;
+    if (!m || isFullscreen() || m.els.box.parentNode !== $("more")) return;
+    // The panel's host holds the panel and the gap above it, so its height is all the room the panel takes.
+    var natural = hero.getBoundingClientRect().height;
+    var need = $("more").getBoundingClientRect().height;
+    if (!(natural > 0) || !(need > 0)) return;
+    var left = Math.floor(natural - need);
+    if (left >= HERO_FLOOR_PX) hero.style.setProperty("--cap", left + "px");
+    else hero.classList.add("folded");
+  }
+  function closeMore(refocus) {
+    var m = state.more;
+    if (!m || m.committing) return;
+    state.more = null;
+    moreHosts().forEach(function (host) { host.textContent = ""; });
+    syncMore();
+    fitMore();
+    if (refocus) {
+      var back = (m.mode === "like" && thumbToolFor("more", m.fromCandidateId)) || moreTiles().filter(function (t) { return !t.disabled && !isHiddenNode(t); })[0];
+      if (back) back.focus();
+    }
+    reportSize();
+  }
+  // A different run replaces the workspace: whatever was typed belongs to the old one.
+  function resetMore() {
+    state.more = null;
+    moreHosts().forEach(function (host) { host.textContent = ""; });
+    fitMore();
+  }
+  function isHiddenNode(node) {
+    for (var n = node; n && n.classList; n = n.parentElement) if (n.classList.contains("hidden")) return true;
+    return false;
+  }
+
+  function buildMore() {
+    var m = state.more;
+    var box = el("div", "morepanel");
+    box.id = "morepanel";
+    box.setAttribute("role", "group");
+    var like = m.mode === "like";
+    var title = el("h2", "morehead", like ? tpl(COPY.moreLike, { label: m.fromLabel }) : COPY.generateMore);
+    title.id = "morehead";
+    box.setAttribute("aria-labelledby", "morehead");
+    if (like) {
+      // The reference: a tiny picture of the design the variations are made from.
+      var head = el("div", "moreheadrow");
+      var ref = ver(m.fromVersionId);
+      var mini = el("img", "morethumb empty");
+      mini.alt = "";
+      var cached = ref && state.thumbs[imageKey(ref, "thumb")];
+      if (cached) { mini.src = cached; mini.classList.remove("empty"); }
+      else bindImage(mini, ref, "thumb", false);
+      head.appendChild(mini);
+      head.appendChild(title);
+      box.appendChild(head);
+    } else box.appendChild(title);
+    var note = el("textarea");
+    note.setAttribute("rows", "2");
+    note.setAttribute("maxlength", "600");
+    note.setAttribute("placeholder", COPY.moreNotePlaceholder);
+    note.setAttribute("aria-label", COPY.moreNotePlaceholder);
+    note.addEventListener("input", function () { m.note = note.value; });
+    box.appendChild(note);
+    var row = el("div", "morerow");
+    var seg = el("div", "seg");
+    seg.setAttribute("role", "radiogroup");
+    seg.setAttribute("aria-label", COPY.moreCountLabel);
+    MORE.choices.forEach(function (n) {
+      var label = el("label", "segopt");
+      var input = el("input");
+      input.type = "radio";
+      input.name = "morecount";
+      input.value = String(n);
+      input.checked = n === m.count;
+      input.addEventListener("change", function () { m.count = n; });
+      label.appendChild(input);
+      label.appendChild(el("span", "", String(n)));
+      seg.appendChild(label);
+    });
+    row.appendChild(seg);
+    // Cancel and Generate stay together: on a narrow card they drop to the next line as a pair, at the right.
+    var buttons = el("span", "morebtns");
+    buttons.appendChild(button(COPY.cancel, "", function () { closeMore(true); }));
+    m.els.primary = button(COPY.generate, "primary", commitMore);
+    buttons.appendChild(m.els.primary);
+    row.appendChild(buttons);
+    box.appendChild(row);
+    m.els.alert = el("p", "alert hidden");
+    m.els.alert.setAttribute("role", "alert");
+    box.appendChild(m.els.alert);
+    m.els.box = box;
+    m.els.note = note;
+  }
+
+  function commitMore() {
+    var m = state.more;
+    if (!m || m.committing || moreBusy() || !localImage().ready || (m.mode === "like" && !pickable(ver(m.fromVersionId)))) return;
+    m.committing = true;
+    m.error = "";
+    syncMore();
+    startRound(m.id, { mode: m.mode, note: m.note, count: m.count, fromVersionId: m.fromVersionId }).then(function () {
+      m.committing = false;
+      if (state.more === m) closeMore(false);
+      syncMore();
+    }, function (err) {
+      m.committing = false;
+      if (state.more !== m) return;
+      m.error = errText(err);
+      syncMore();
+    });
+  }
+
+  // The tiles follow the view; the panel sits in the host of the current mode, and keeps what was typed across modes and polls.
+  function syncMore() {
+    if (!state.view) return;
+    var m = state.more;
+    if (m && state.view.candidates.length === 0) { m.committing = false; closeMore(false); m = state.more; }
+    var busy = moreBusy();
+    moreTiles().forEach(function (t) {
+      t.disabled = busy;
+      t.setAttribute("aria-expanded", m && m.mode === "new" ? "true" : "false");
+    });
+    syncThumbTools();
+    if (!m) return;
+    var host = isFullscreen() ? stageEls.more : $("more");
+    if (host && m.els.box.parentNode !== host) {
+      moreHosts().forEach(function (h) { if (h !== host) h.textContent = ""; });
+      host.appendChild(m.els.box);
+    }
+    var local = localImage();
+    m.els.primary.disabled = m.committing || busy || !local.ready || (m.mode === "like" && !pickable(ver(m.fromVersionId)));
+    m.els.alert.textContent = m.error || (!local.ready && local.reason ? local.reason : "");
+    m.els.alert.classList.toggle("hidden", !m.els.alert.textContent);
+    // Fitted before the size report, so the host never sees the taller card.
+    fitMore();
+    reportSize();
+  }
+  window.addEventListener("resize", function () { if (state.more) { fitMore(); reportSize(); } });
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape" || !state.more || state.dialog || state.more.committing) return;
+    closeMore(true);
+  });
+`;
+//# sourceMappingURL=mcp-slate-ui-script-more.js.map

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * The hairline that sits under the large image while work runs on its option.
+ * There is no measured duration, so it never estimates: it is indeterminate,
+ * and the words (the band, the status line) carry what is happening.
+ */
+export declare const SLATE_UI_PROGRESS: string;
+//# sourceMappingURL=mcp-slate-ui-script-progress.d.ts.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * The hairline that sits under the large image while work runs on its option.
+ * There is no measured duration, so it never estimates: it is indeterminate,
+ * and the words (the band, the status line) carry what is happening.
+ */
+export const SLATE_UI_PROGRESS = String.raw `
+  function progressBar() { return el("span", "hair indeterminate"); }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-progress.js.map

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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):
+ * New options and Generate more, More like this, 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 declare const SLATE_UI_REMOTE: string;
+//# sourceMappingURL=mcp-slate-ui-script-remote.d.ts.map

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

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

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):
+ * New options and Generate more, More like this, 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.scribbleLabel);
+    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"}