@12ui/design 0.2.72 → 0.2.73

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

@@ -0,0 +1,306 @@
+/**
+ * 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 const SLATE_UI_STATE = String.raw `
+  var state = {
+    host: {}, view: null,
+    sel: { candidateId: null, versionId: null, followLatest: true },
+    tab: "designs", query: "", dialog: null, more: null, wantEdit: null,
+    busy: false, status: { text: "", kind: "", source: "", phase: "" }, lastOpText: "", lastBandOp: "",
+    thumbs: {}, fulls: {}, refs: {}, lastOpStates: {}, opBusy: {}, awaitEdit: null,
+    insp: { local: null, writing: false, dirty: false, searching: false, waiters: [] }
+  };
+
+  // ---- small helpers ----
+  function el(tag, cls, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text !== undefined) e.textContent = text;
+    return e;
+  }
+  function button(label, cls, onclick) {
+    var b = el("button", cls || "", label);
+    b.type = "button";
+    if (onclick) b.addEventListener("click", onclick);
+    return b;
+  }
+  function uuid4() {
+    var b = new Uint8Array(16);
+    if (typeof crypto !== "undefined" && crypto.getRandomValues) crypto.getRandomValues(b);
+    else for (var i = 0; i < 16; i++) b[i] = Math.floor(Math.random() * 256);
+    b[6] = (b[6] & 15) | 64;
+    b[8] = (b[8] & 63) | 128;
+    var h = Array.prototype.map.call(b, function (x) { return (x + 256).toString(16).slice(1); }).join("");
+    return h.slice(0, 8) + "-" + h.slice(8, 12) + "-" + h.slice(12, 16) + "-" + h.slice(16, 20) + "-" + h.slice(20);
+  }
+  function visible() { return document.visibilityState !== "hidden"; }
+  function errText(err) { return err && err.message ? err.message : String(err); }
+  // "source" is "op" for a line the screen derives from the ops' own state, "" for a message about a click.
+  function setStatus(text, kind, source, phase) {
+    state.status = { text: text || "", kind: kind || "", source: source || "", phase: phase || "" };
+    var nodes = document.querySelectorAll("[data-status]");
+    for (var i = 0; i < nodes.length; i++) {
+      nodes[i].textContent = state.status.text;
+      nodes[i].className = "status" + (kind ? " " + kind : "");
+    }
+  }
+
+  // ---- lookups over the current view ----
+  function cand(id) { return state.view && state.view.candidates.find(function (c) { return c.candidateId === id; }); }
+  function ver(id) { return state.view && state.view.versions.find(function (v) { return v.versionId === id; }); }
+  function latestVersion(c) { return c && c.latestVersionId ? ver(c.latestVersionId) : undefined; }
+  function roundById(id) { return state.view && state.view.rounds.find(function (r) { return r.roundId === id; }); }
+  function byLabel(a, b) { return a.label.length - b.label.length || (a.label < b.label ? -1 : a.label > b.label ? 1 : 0); }
+  // Newest round first, then by letter: the order of the strip and of the selection.
+  function optionOrder(a, b) {
+    var ra = roundById(a.roundId);
+    var rb = roundById(b.roundId);
+    return ((rb ? rb.index : 0) - (ra ? ra.index : 0)) || byLabel(a, b);
+  }
+  function orderedCandidates() { return state.view.candidates.slice().sort(optionOrder); }
+  // The card's strip: the newest round only, plus the option the pick belongs to and the one being viewed when they are
+  // older, so the large image always has its thumbnail. The workspace still lists every round.
+  function inlineCandidates() {
+    var all = orderedCandidates();
+    if (all.length === 0) return all;
+    var newest = all[0].roundId;
+    var picked = state.view.pick && ver(state.view.pick.versionId);
+    var keep = {};
+    keep[newest] = true;
+    if (picked) keep[picked.candidateId] = true;
+    if (state.sel.candidateId) keep[state.sel.candidateId] = true;
+    return all.filter(function (c) { return c.roundId === newest || keep[c.candidateId]; });
+  }
+  function versionsOf(c) { return c.versionIds.map(ver).filter(Boolean); }
+  function runningOps() { return state.view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; }); }
+  function selectedCandidate() { return cand(state.sel.candidateId); }
+  function selectedVersion() { return ver(state.sel.versionId); }
+  function optionName(c) { return COPY.optionPrefix + c.label + (c.state === "failed" ? COPY.failedSuffix : ""); }
+
+  function ensureSelection() {
+    var v = state.view;
+    if (!v || v.candidates.length === 0) { state.sel = { candidateId: null, versionId: null, followLatest: true }; return; }
+    var c = cand(state.sel.candidateId);
+    if (!c) {
+      var picked = v.pick && ver(v.pick.versionId);
+      var ordered = orderedCandidates();
+      c = (picked && cand(picked.candidateId)) || ordered.find(function (x) { return x.state === "ready"; }) || ordered[0];
+      state.sel = { candidateId: c.candidateId, versionId: null, followLatest: true };
+    }
+    var current = state.sel.versionId && c.versionIds.indexOf(state.sel.versionId) >= 0 ? state.sel.versionId : null;
+    if (state.sel.followLatest || !current) { state.sel.versionId = c.latestVersionId; state.sel.followLatest = true; }
+  }
+  // Choosing the option that is already shown, at the version already shown, changes nothing.
+  function selectCandidate(id, versionId) {
+    var c = cand(id);
+    if (!c) return;
+    var target = versionId || c.latestVersionId;
+    if (state.sel.candidateId === id && state.sel.versionId === target) return;
+    state.awaitEdit = null;
+    state.sel.candidateId = id;
+    state.sel.versionId = target;
+    state.sel.followLatest = !versionId || versionId === c.latestVersionId;
+    renderAll();
+  }
+
+  // ---- pictures through the app-only tools, at most three at a time; the workspace jumps the queue ----
+  var loader = { queue: [], active: 0, max: 3, inflight: {} };
+  function imageKey(version, size) { return size + ":" + version.versionId + ":" + version.sha256; }
+  function enqueue(key, cache, tool, args, urgent) {
+    if (cache[key]) return Promise.resolve(cache[key]);
+    if (loader.inflight[key]) {
+      if (urgent) {
+        var at = loader.queue.findIndex(function (j) { return j.key === key; });
+        if (at > 0) loader.queue.unshift(loader.queue.splice(at, 1)[0]);
+      }
+      return loader.inflight[key].promise;
+    }
+    var job = { key: key, cache: cache, tool: tool, args: args };
+    job.promise = new Promise(function (resolve, reject) { job.resolve = resolve; job.reject = reject; });
+    loader.inflight[key] = job;
+    if (urgent) loader.queue.unshift(job); else loader.queue.push(job);
+    pump();
+    return job.promise;
+  }
+  function wantImage(version, size, urgent) {
+    var cache = size === "full" ? state.fulls : state.thumbs;
+    return enqueue(imageKey(version, size), cache, TOOLS.image, { runDir: state.view.runDir, versionId: version.versionId, size: size }, urgent);
+  }
+  function wantReference(id, size, urgent) {
+    return enqueue("ref:" + size + ":" + id, state.refs, TOOLS.reference, { runDir: state.view.runDir, referenceId: id, size: size }, urgent);
+  }
+  function pump() {
+    while (visible() && loader.active < loader.max && loader.queue.length > 0) {
+      var job = loader.queue.shift();
+      loader.active++;
+      run(job);
+    }
+  }
+  function run(job) {
+    callTool(job.tool, job.args).then(function (result) {
+      var block = (result.content || []).find(function (b) { return b.type === "image"; });
+      if (!block) throw new Error("no image block returned");
+      var src = "data:" + block.mimeType + ";base64," + block.data;
+      job.cache[job.key] = src;
+      job.resolve(src);
+    }).catch(function (err) { job.reject(err); }).then(function () {
+      delete loader.inflight[job.key];
+      loader.active--;
+      pump();
+    });
+  }
+  function fillImage(img, promise) {
+    promise.then(function (src) {
+      if (img.isConnected === false) return;
+      img.src = src;
+      img.classList.remove("empty");
+    }, function (err) {
+      // An error is shown in place of the picture, never thrown.
+      img.alt = errText(err);
+      img.setAttribute("data-error", errText(err));
+    });
+  }
+  function bindImage(img, version, size, urgent) { if (version) fillImage(img, wantImage(version, size, urgent)); }
+  function bindReference(img, id, size) { fillImage(img, wantReference(id, size, false)); }
+
+  // ---- status polling ----
+  var DELAYS = [2000, 3000, 5000, 8000, 10000];
+  var poll = { timer: null, step: 0, inFlight: false };
+  function wantsPolling() { return !!state.view && !!state.view.runDir && visible() && runningOps().length > 0; }
+  function clearPoll() { if (poll.timer !== null) { clearTimeout(poll.timer); poll.timer = null; } }
+  function schedulePoll() {
+    clearPoll();
+    if (!wantsPolling() || poll.inFlight) return;
+    poll.timer = setTimeout(runPoll, DELAYS[Math.min(poll.step, DELAYS.length - 1)]);
+  }
+  function runPoll() {
+    poll.timer = null;
+    if (!wantsPolling()) return;
+    poll.inFlight = true;
+    callTool(TOOLS.status, { runDir: state.view.runDir, since: state.view.stamp }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.unchanged) poll.step++;
+      else if (sc.schema) { poll.step = 0; applyView(sc, true); }
+    }).catch(function () { poll.step++; }).then(function () { poll.inFlight = false; schedulePoll(); });
+  }
+  // One refresh when the view becomes visible again.
+  function refreshOnce() {
+    if (!state.view || !state.view.runDir || poll.inFlight) return;
+    poll.inFlight = true;
+    callTool(TOOLS.status, { runDir: state.view.runDir, since: state.view.stamp }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.schema) applyView(sc, true);
+    }).catch(function () {}).then(function () { poll.inFlight = false; schedulePoll(); });
+  }
+  document.addEventListener("visibilitychange", function () {
+    if (visible()) { pump(); refreshOnce(); schedulePoll(); }
+    else clearPoll();
+  });
+
+  // ---- what the ops say: the band of the workspace, the status line of the card ----
+  function opLabel(op) {
+    var parent = op.edit && ver(op.edit.parentVersionId);
+    var c = parent && cand(parent.candidateId);
+    return c ? c.label : (op.target || "");
+  }
+  function roundOfOp(op) {
+    var rounds = state.view.rounds;
+    var named = rounds.filter(function (r) { return COPY.roundPrefix + r.index === op.target; })[0];
+    if (named) return named;
+    var running = rounds.filter(function (r) { return r.state === "running"; });
+    return running.length ? running[running.length - 1] : null;
+  }
+  function progressText(op) {
+    // The hosted server has no runner of its own: a running op is waiting for the person's agent to draw and upload.
+    if (TARGET === "remote" && op.phase === "agent") return COPY.waitingForAgent;
+    if (op.kind === "round") {
+      var r = roundOfOp(op);
+      return r ? tpl(COPY.designingProgress, { n: r.readyCount, m: r.count }) : COPY.designing;
+    }
+    return tpl(COPY.editing, { label: opLabel(op) });
+  }
+  // The newest op. The local plugin stamps every op with a time; the hosted server sends none (data minimization), so
+  // its ops are already oldest first and the last one is the newest.
+  function latestOp(view) {
+    if (TARGET === "remote") return view.ops[view.ops.length - 1];
+    return view.ops.slice().sort(function (a, b) { return Date.parse(a.startedAt) - Date.parse(b.startedAt); }).pop();
+  }
+  // The one thing worth a band: work that is running, else work that stopped or failed as the newest word.
+  function activeBand(view) {
+    var running = view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; });
+    if (running.length) { var op = running[running.length - 1]; return { kind: "run", op: op, text: progressText(op) }; }
+    var last = latestOp(view);
+    if (last && last.state === "interrupted") return { kind: "stopped", op: last, text: TARGET === "remote" && last.error && last.error.message ? last.error.message : COPY.interrupted };
+    if (last && last.state === "failed" && last.error) return { kind: "failed", op: last, text: last.error.message };
+    return null;
+  }
+
+  // The card has one status line, so it also carries the running, stopped and failed words; the workspace has a band.
+  function syncProgressLine(view) {
+    var band = activeBand(view);
+    // The workspace's band speaks for running work, so a line about an earlier click ("Selected E.") is stale the
+    // moment a new op starts; a refusal stays, because the person has not read it away.
+    var bandOp = band && band.kind === "run" ? band.op.opId : "";
+    if (bandOp && bandOp !== state.lastBandOp && isFullscreen() && state.status.kind !== "err") setStatus("", "");
+    state.lastBandOp = bandOp;
+    if (isFullscreen() || !band) {
+      state.lastOpText = "";
+      if (state.status.source === "op" && state.status.phase === "progress") setStatus("", "");
+      return;
+    }
+    // A message about a click stays until these words themselves change.
+    if (band.text !== state.lastOpText) { state.lastOpText = band.text; setStatus(band.text, band.kind === "failed" ? "err" : "", "op", "progress"); }
+  }
+  // What a finished op produced. A failure is the band's to say in the workspace.
+  function syncDoneLine(prev, view) {
+    var was = {};
+    if (prev) prev.ops.forEach(function (o) { was[o.opId] = o.state; });
+    var finished = view.ops.filter(function (o) {
+      return (was[o.opId] === "starting" || was[o.opId] === "running") && (o.state === "succeeded" || o.state === "failed");
+    }).pop();
+    if (!finished) return;
+    if (finished.state === "failed") return;
+    var made = view.versions.filter(function (v) { return finished.resultVersionIds.indexOf(v.versionId) >= 0; });
+    if (finished.kind === "round") {
+      var n = made.length;
+      if (n === 0) return;
+      var round = roundOfOp(finished);
+      var failedCount = round ? view.candidates.filter(function (c) { return c.roundId === round.roundId && c.state === "failed"; }).length : 0;
+      var text = (n === 1 ? COPY.roundReadyOne : tpl(COPY.roundReadyMany, { n: n })) + (failedCount ? " " + tpl(COPY.roundFailed, { n: failedCount }) : "");
+      setStatus(text, failedCount ? "" : "ok", "op", "done");
+    } else {
+      setStatus(tpl(COPY.editReady, { label: made.length ? made[made.length - 1].label : opLabel(finished) }), "ok", "op", "done");
+    }
+  }
+  function syncOpStatus(prev, view) { syncProgressLine(view); syncDoneLine(prev, view); }
+
+  // ---- tell the agent, best effort, when work that was running has finished ----
+  function announceSettled(prev, next) {
+    next.ops.forEach(function (op) {
+      var was = state.lastOpStates[op.opId];
+      state.lastOpStates[op.opId] = op.state;
+      if (was !== "starting" && was !== "running") return;
+      if (op.state !== "succeeded" && op.state !== "failed") return;
+      var head = TARGET === "remote" ? "Design workspace: " : "Design workspace rev " + next.rev + ": ";
+      var text;
+      if (op.state === "failed") text = head + "the " + op.kind + " " + (op.target ? "for " + op.target + " " : "") + "failed" + (op.error ? " (" + op.error.code + ")" : "") + ".";
+      else if (op.kind === "round") {
+        var labels = next.candidates.filter(function (c) { return c.versionIds.some(function (id) { return op.resultVersionIds.indexOf(id) >= 0; }); }).map(function (c) { return c.label; });
+        text = head + (op.target || "the round") + " is ready" + (labels.length ? " (" + labels[0] + " to " + labels[labels.length - 1] + ")" : "") + ".";
+      } else {
+        var made = next.versions.find(function (v) { return op.resultVersionIds.indexOf(v.versionId) >= 0; });
+        text = head + (made ? made.label : opLabel(op)) + " was created.";
+      }
+      updateModelContext(text + " Confirm with " + TOOLS.data + ".");
+    });
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-state.js.map

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

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

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

@@ -0,0 +1,23 @@
+/**
+ * The two small controls on a design's thumbnail, in the card's strip and in
+ * the workspace's selection: a plus (More like this) and an edit pencil
+ * (Edit). They are siblings of the thumbnail button inside one cell (a button
+ * cannot hold buttons), revealed by CSS on hover and on keyboard focus within
+ * the cell, and on a device with no hover only on the selected thumbnail. A
+ * click on either never reaches the thumbnail, so it never swaps the large
+ * image by itself.
+ *
+ * The plus opens the Generate more panel for variations of that design
+ * (openMoreLike, in mcp-slate-ui-script-more.ts). Edit selects that design and
+ * opens the Edit dialog. The dialog lives in the workspace; the card has no
+ * room for the drawing surface, so in the card Edit opens the workspace and the
+ * dialog opens as soon as it shows (wantEdit). A host that cannot show the
+ * workspace has no place for the dialog, so there Edit is hidden in the card.
+ *
+ * Not on the Generate more tile, and not on an option that has no picture yet.
+ * Whether each control is on follows the view (syncThumbTools): the plus is off
+ * while a round runs (the tile's rule), Edit while that design has an edit in
+ * flight or its version cannot be edited.
+ */
+export declare const SLATE_UI_THUMBTOOLS: string;
+//# sourceMappingURL=mcp-slate-ui-script-thumbtools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-thumbtools.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-thumbtools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,mBAAmB,QAgF/B,CAAC"}

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

@@ -0,0 +1,103 @@
+/**
+ * The two small controls on a design's thumbnail, in the card's strip and in
+ * the workspace's selection: a plus (More like this) and an edit pencil
+ * (Edit). They are siblings of the thumbnail button inside one cell (a button
+ * cannot hold buttons), revealed by CSS on hover and on keyboard focus within
+ * the cell, and on a device with no hover only on the selected thumbnail. A
+ * click on either never reaches the thumbnail, so it never swaps the large
+ * image by itself.
+ *
+ * The plus opens the Generate more panel for variations of that design
+ * (openMoreLike, in mcp-slate-ui-script-more.ts). Edit selects that design and
+ * opens the Edit dialog. The dialog lives in the workspace; the card has no
+ * room for the drawing surface, so in the card Edit opens the workspace and the
+ * dialog opens as soon as it shows (wantEdit). A host that cannot show the
+ * workspace has no place for the dialog, so there Edit is hidden in the card.
+ *
+ * Not on the Generate more tile, and not on an option that has no picture yet.
+ * Whether each control is on follows the view (syncThumbTools): the plus is off
+ * while a round runs (the tile's rule), Edit while that design has an edit in
+ * flight or its version cannot be edited.
+ */
+export const SLATE_UI_THUMBTOOLS = String.raw `
+  var ICON_PENCIL = "M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19l-4 1zM14 7l3 3";
+
+  function thumbToolButton(action, label, path, c, onclick) {
+    var b = button("", "thumbtool", function (e) {
+      if (e && e.stopPropagation) e.stopPropagation();
+      onclick(c.candidateId);
+    });
+    b.setAttribute("aria-label", label);
+    b.title = label;
+    b.setAttribute("data-action", action);
+    b.setAttribute("data-candidate", c.candidateId);
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + path + '"/></svg>';
+    return b;
+  }
+
+  // One cell per option: the thumbnail button and, when there is a picture to work from, its two controls.
+  function thumbCell(c, cls) {
+    var cell = el("span", "thumbcell");
+    var thumb = thumbButton(c, cls);
+    if (thumb.classList.contains("selected")) cell.classList.add("selected");
+    cell.appendChild(thumb);
+    if (c.state === "ready" && latestVersion(c)) {
+      var tools = el("span", "thumbtools");
+      tools.appendChild(thumbToolButton("more", COPY.moreLikeThis, ICON_PLUS, c, openMoreLike));
+      tools.appendChild(thumbToolButton("edit", COPY.edit, ICON_PENCIL, c, editFromThumb));
+      cell.appendChild(tools);
+    }
+    return cell;
+  }
+
+  // Whether Edit has a dialog to open in this host: the workspace itself, or a card that can open the workspace.
+  function canEditHere() { return isFullscreen() || canFullscreen(); }
+
+  function thumbToolNodes() { return Array.prototype.slice.call(document.querySelectorAll(".thumbtool")); }
+  function thumbToolFor(action, candidateId) {
+    return thumbToolNodes().filter(function (t) {
+      return t.getAttribute("data-action") === action && t.getAttribute("data-candidate") === candidateId && !t.disabled && !isHiddenNode(t);
+    })[0];
+  }
+
+  function syncThumbTools() {
+    if (!state.view) return;
+    var busy = moreBusy();
+    var edit = canEditHere();
+    var likeId = state.more && state.more.mode === "like" ? state.more.fromCandidateId : null;
+    thumbToolNodes().forEach(function (t) {
+      var c = cand(t.getAttribute("data-candidate"));
+      var v = latestVersion(c);
+      if (t.getAttribute("data-action") === "more") {
+        t.disabled = busy || !pickable(v);
+        t.setAttribute("aria-expanded", likeId !== null && likeId === t.getAttribute("data-candidate") ? "true" : "false");
+      } else {
+        t.classList.toggle("hidden", !edit);
+        t.disabled = !v || !v.editable || !!(c && c.busy);
+      }
+    });
+  }
+
+  // Edit: that design is selected, then the Edit dialog opens on it, exactly as the workspace's Edit button does.
+  function editFromThumb(candidateId) {
+    var c = cand(candidateId);
+    var v = latestVersion(c);
+    if (!c || !v || !v.editable || c.busy || state.dialog) return;
+    selectCandidate(candidateId);
+    if (isFullscreen()) { openDialog("edit", thumbToolFor("edit", candidateId) || stageEls.edit); return; }
+    if (!canFullscreen()) return;
+    state.wantEdit = v.versionId;
+    request("ui/request-display-mode", { mode: "fullscreen" }).then(function (result) {
+      if (result && result.mode && result.mode !== "fullscreen") state.wantEdit = null;
+    }, function () { state.wantEdit = null; });
+  }
+  // The workspace has just shown: the dialog that was asked for in the card opens now, on the version that was asked for.
+  function openWantedEdit() {
+    var want = state.wantEdit;
+    if (!want || !stageBuilt || state.dialog) return;
+    state.wantEdit = null;
+    var v = selectedVersion();
+    if (v && v.versionId === want && v.editable) openDialog("edit", stageEls.edit);
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-thumbtools.js.map

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * The workspace view's script, assembled from single-purpose fragments that
+ * share one scope: bridge (host protocol), state (view state, picture queue,
+ * polling, what the ops say), progress, inline (the card), select (Select and
+ * the hand-offs), inspiration (the tabs and the Inspiration tab), stage
+ * (fullscreen), dialog (Design, Edit, Branch and Convert), more (the Generate more tile and panel), thumbtools (the
+ * plus and the pencil on a thumbnail), scribble (the drawing layer of Edit), the hosted and browser targets' words, then the handshake, last, so every function and
+ * variable exists before the first message can arrive. The tool names come
+ * from the view contract (SLATE_UI_TOOLS), not from the server's own module.
+ *
+ * The fragments are String.raw, so escape sequences reach the browser
+ * unchanged; the assembled script must therefore contain no backtick and no
+ * dollar-brace (a test asserts it).
+ */
+/**
+ * Which host the screen is for: the local plugin's own tools, the hosted server (design.12ui.com), or a browser page
+ * opened by `12ui workspace open` when the plugin's tools are not available (the local plugin's tools, reached
+ * through a host shim in the page in place of an MCP Apps host).
+ */
+export type SlateUiTarget = 'local' | 'remote' | 'browser';
+/**
+ * The script for one target. The fragments are the same for both; the target is a constant they read (`TARGET`), and
+ * only the places the two servers differ branch on it: what the agent is told, how a running op reads, which Convert
+ * outputs exist and what the edit carries.
+ */
+export declare const buildSlateUiScript: (target: SlateUiTarget) => string;
+export declare const SLATE_UI_SCRIPT: string;
+//# sourceMappingURL=mcp-slate-ui-script.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;GAaG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAgB3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAsB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

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

@@ -0,0 +1,58 @@
+import { SLATE_CONVERT_CHOICES, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_UI_COPY } from './mcp-slate-ui-copy.js';
+import { SLATE_UI_TOOLS } from './slate-view-contract.js';
+import { SLATE_UI_BRIDGE } from './mcp-slate-ui-script-bridge.js';
+import { SLATE_UI_BROWSER } from './mcp-slate-ui-script-browser.js';
+import { SLATE_UI_DIALOG } from './mcp-slate-ui-script-dialog.js';
+import { SLATE_UI_INLINE } from './mcp-slate-ui-script-inline.js';
+import { SLATE_UI_INSPIRATION } from './mcp-slate-ui-script-inspiration.js';
+import { SLATE_UI_MORE } from './mcp-slate-ui-script-more.js';
+import { SLATE_UI_PROGRESS } from './mcp-slate-ui-script-progress.js';
+import { SLATE_UI_REMOTE } from './mcp-slate-ui-script-remote.js';
+import { SLATE_UI_SCRIBBLE } from './mcp-slate-ui-script-scribble.js';
+import { SLATE_UI_SELECT } from './mcp-slate-ui-script-select.js';
+import { SLATE_UI_STAGE } from './mcp-slate-ui-script-stage.js';
+import { SLATE_UI_STATE } from './mcp-slate-ui-script-state.js';
+import { SLATE_UI_THUMBTOOLS } from './mcp-slate-ui-script-thumbtools.js';
+const HANDSHAKE = String.raw `
+  // ---- connect: handlers are registered above, before the handshake ----
+  if (window.parent === window) {
+    fatal(COPY.needsHost);
+  } else {
+    request("ui/initialize", { appCapabilities: {}, appInfo: { name: "12ui-slate", version: "3.0.0" }, protocolVersion: PROTOCOL })
+      .then(function (init) {
+        applyHost((init && init.hostContext) || {});
+        notify("ui/notifications/initialized", {});
+      })
+      .catch(function (err) { fatal(COPY.noConnection + errText(err)); });
+  }
+`;
+/**
+ * The script for one target. The fragments are the same for both; the target is a constant they read (`TARGET`), and
+ * only the places the two servers differ branch on it: what the agent is told, how a running op reads, which Convert
+ * outputs exist and what the edit carries.
+ */
+export const buildSlateUiScript = (target) => [
+    '"use strict";',
+    '(function () {',
+    SLATE_UI_BRIDGE
+        .replace('__TOOLS__', () => JSON.stringify(SLATE_UI_TOOLS))
+        .replace('__COPY__', () => JSON.stringify(SLATE_UI_COPY))
+        .replace('__TARGET__', () => JSON.stringify(target))
+        .replace('__CONVERT__', () => JSON.stringify({ choices: target === 'remote' ? SLATE_REMOTE_CONVERT_CHOICES : SLATE_CONVERT_CHOICES, maxWidth: SLATE_CONVERT_MAX_WIDTH })),
+    SLATE_UI_STATE,
+    SLATE_UI_PROGRESS,
+    SLATE_UI_INLINE,
+    SLATE_UI_SELECT,
+    SLATE_UI_INSPIRATION,
+    SLATE_UI_STAGE,
+    SLATE_UI_DIALOG,
+    SLATE_UI_MORE.replace('__MORE__', () => JSON.stringify(SLATE_MORE_COUNTS)),
+    SLATE_UI_THUMBTOOLS,
+    SLATE_UI_SCRIBBLE,
+    SLATE_UI_REMOTE,
+    SLATE_UI_BROWSER,
+    HANDSHAKE,
+    '})();',
+].join('\n');
+export const SLATE_UI_SCRIPT = buildSlateUiScript('local');
+//# sourceMappingURL=mcp-slate-ui-script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACxJ,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAwB1E,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAU,EAAE,CAAC;IACnE,eAAe;IACf,gBAAgB;IAChB,eAAe;SACZ,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;SAC1D,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;SACxD,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACnD,OAAO,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EAAE,QAAQ,EAAE,uBAAuB,EAAE,CAAC,CAAC;IAC3K,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,cAAc;IACd,eAAe;IACf,aAAa,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1E,mBAAmB;IACnB,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,SAAS;IACT,OAAO;CACR,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC"}

package/dist/mcp-slate-ui-styles-dialog.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The dialogs (Design, Edit, Branch, Convert), the scribble layer of Edit and
+ * the Inspiration tab. A dialog is a centred box over a dimmed workspace; it
+ * scrolls inside itself when the window is short, and fills the width on a
+ * phone.
+ */
+export declare const SLATE_UI_DIALOG_STYLES: string;
+/**
+ * The Generate more tile and its panel. The tile is deliberately quiet: a
+ * hairline dashed border, a muted plus, no fill, no words; it takes the size
+ * of the thumbnails around it (56 px in the card's strip, 72 px in the
+ * selection). The panel is one bordered block under the thumbnails. In the
+ * card, the script shortens the large image by the panel's height while it is
+ * open (an inline --cap), or folds it when too little would be left.
+ */
+export declare const SLATE_UI_MORE_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-dialog.d.ts.map

package/dist/mcp-slate-ui-styles-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAgClC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,QAwBhC,CAAC"}

package/dist/mcp-slate-ui-styles-dialog.js

@@ -0,0 +1,73 @@
+/**
+ * The dialogs (Design, Edit, Branch, Convert), the scribble layer of Edit and
+ * the Inspiration tab. A dialog is a centred box over a dimmed workspace; it
+ * scrolls inside itself when the window is short, and fills the width on a
+ * phone.
+ */
+export const SLATE_UI_DIALOG_STYLES = String.raw `
+  .modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); overflow: auto; }
+  .modalbox { display: flex; flex-direction: column; gap: 12px; width: min(520px, 100%); max-height: calc(100vh - 32px); min-width: 0; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--bg); color: var(--text); }
+  .modalbox.wide { width: min(880px, 100%); }
+  .modalbox h2 { margin: 0; font-size: 15px; }
+  .modalbox textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
+  .modalbox textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  .radios { display: flex; flex-wrap: wrap; gap: 6px 14px; }
+  .radio { display: inline-flex; align-items: center; gap: 6px; }
+  .refline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
+  .refthumbs { display: flex; flex-wrap: wrap; gap: 4px; }
+  .refmini { display: block; width: 36px; height: 36px; border-radius: 4px; background: var(--bg3); object-fit: cover; object-position: top; }
+  .alert { margin: 0; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
+  .dialogbtns, .dialogtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  .dialogbtns button, .dialogtools button { padding: 8px 12px; }
+  /* The image of Edit, sized to the picture itself (a height cap of 60 percent of the window), so the scribble layer over it is exactly over the picture. */
+  .imgwrap { position: relative; width: min(100%, calc(60vh * var(--ar, 1.5))); aspect-ratio: var(--ar, 1.5); margin: 0 auto; min-width: 0; border-radius: var(--radius); background: var(--bg3); overflow: hidden; touch-action: none; }
+  .stageimg { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
+  .scribble { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
+  .searchrow { display: flex; gap: 8px; min-width: 0; }
+  .searchrow .query { flex: 1 1 0; min-width: 0; }
+  .insp.card { --refsize: 96px; }
+  .insp.stage { --refsize: 128px; }
+  .results { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
+  .refhead { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
+  .refgrid { display: grid; grid-template-columns: repeat(auto-fill, var(--refsize)); gap: 8px; }
+  .refbtn { width: var(--refsize); height: var(--refsize); }
+  .refbtn .thumb { object-position: center; }
+  .refbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
+  .check { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--inverse); color: var(--inverse-text); }
+  .refbtn[aria-pressed="true"] .check { display: grid; }
+  .placeholder { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text2); padding: 16px; text-align: center; }
+`;
+/**
+ * The Generate more tile and its panel. The tile is deliberately quiet: a
+ * hairline dashed border, a muted plus, no fill, no words; it takes the size
+ * of the thumbnails around it (56 px in the card's strip, 72 px in the
+ * selection). The panel is one bordered block under the thumbnails. In the
+ * card, the script shortens the large image by the panel's height while it is
+ * open (an inline --cap), or folds it when too little would be left.
+ */
+export const SLATE_UI_MORE_STYLES = String.raw `
+  button.moretile { display: grid; place-items: center; flex: none; padding: 0; border: 1px dashed var(--border); border-radius: 6px; background: none; color: var(--text2); opacity: .75; }
+  button.moretile:hover:not(:disabled), button.moretile[aria-expanded="true"] { opacity: 1; border-color: var(--text2); }
+  button.moretile:disabled { opacity: .35; }
+  .strip .moretile { width: 56px; height: 56px; }
+  .rail .moretile { width: 72px; height: 72px; }
+  .morepanel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
+  #more:not(:empty) { padding-top: 10px; }
+  #card .hero.folded { display: none; }
+  .morehead { margin: 0; font-size: 13px; font-weight: 600; }
+  .moreheadrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .morethumb { display: block; flex: none; width: 28px; height: 28px; border-radius: 4px; background: var(--bg3); object-fit: cover; object-position: top; }
+  .morepanel textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
+  .morepanel textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  .morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+  .morebtns { display: flex; gap: 8px; margin-left: auto; }
+  .morerow button { padding: 8px 10px; }
+  .seg { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .segopt { position: relative; display: block; }
+  .segopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+  .segopt span { display: block; min-width: 30px; padding: 7px 8px; text-align: center; font-weight: 600; }
+  .segopt input:checked + span { background: var(--inverse); color: var(--inverse-text); }
+  .segopt input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: -2px; }
+  .morepanel .alert { margin: 0; }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-dialog.js.map

package/dist/mcp-slate-ui-styles-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC/C,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwB7C,CAAC"}