@12ui/design 0.2.71 → 0.2.73

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

@@ -0,0 +1,137 @@
+/**
+ * The MCP Apps bridge: JSON-RPC 2.0 over `postMessage`, the host context, the
+ * height-only size report, and the two ways an app talks to the agent.
+ *
+ * Rules kept, each proven against Codex desktop (see
+ * docs/analysis/codex-plugin-screens-2026-09-30.md):
+ * - it reports its height and never its width, because hosts treat a reported
+ *   width as a floor and a frame that grew could not shrink back to its pane;
+ * - in fullscreen it reports nothing (the host owns the size);
+ * - a message to the agent names what happened and carries no command: the
+ *   host wraps app messages as untrusted input, so the agent confirms with the
+ *   model-visible data tool instead.
+ *
+ * Fragment of the view's script; written with String.raw so escapes reach the
+ * browser unchanged. It must contain no backtick and no dollar-brace.
+ */
+export const SLATE_UI_BRIDGE = String.raw `
+  var PROTOCOL = "2026-01-26";
+  var TARGET = __TARGET__;
+  var TOOLS = __TOOLS__;
+  var COPY = __COPY__;
+  var CONVERT = __CONVERT__;
+  var $ = function (id) { return document.getElementById(id); };
+
+  // ---- JSON-RPC over postMessage ----
+  var pending = new Map();
+  var nextId = 1;
+  var inflight = 0;
+  function post(msg) { window.parent.postMessage(msg, "*"); }
+  function request(method, params) {
+    return new Promise(function (resolve, reject) {
+      var id = nextId++;
+      pending.set(id, { resolve: resolve, reject: reject });
+      post({ jsonrpc: "2.0", id: id, method: method, params: params });
+    });
+  }
+  function notify(method, params) { post({ jsonrpc: "2.0", method: method, params: params }); }
+  // Fill {name} slots of a copy string.
+  function tpl(text, values) {
+    return text.replace(/\{(\w+)\}/g, function (whole, key) { return values && values[key] !== undefined ? String(values[key]) : whole; });
+  }
+
+  // A tool call resolves to its structured content, or rejects with the tool's own code and sentence.
+  function callTool(name, args) {
+    inflight++;
+    return request("tools/call", { name: name, arguments: args }).then(function (result) {
+      inflight--;
+      if (result && result.isError) {
+        var sc = result.structuredContent || {};
+        var text = result.content && result.content[0] && result.content[0].text;
+        var err = new Error(sc.message || text || "The tool failed.");
+        err.code = sc.code || "error";
+        err.retryable = !!sc.retryable;
+        if (sc.retryAfterSeconds !== undefined) err.retryAfterSeconds = sc.retryAfterSeconds;
+        throw err;
+      }
+      return result;
+    }, function (err) { inflight--; throw err; });
+  }
+
+  window.addEventListener("message", function (event) {
+    if (event.source !== window.parent) return;
+    var m = event.data;
+    if (!m || m.jsonrpc !== "2.0") return;
+    if (m.method === undefined) {
+      var p = pending.get(m.id);
+      if (!p) return;
+      pending.delete(m.id);
+      if (m.error) p.reject(new Error(m.error.message || "request failed"));
+      else p.resolve(m.result);
+      return;
+    }
+    if (m.id !== undefined) {
+      // Host request (ui/resource-teardown, ping): acknowledge.
+      post({ jsonrpc: "2.0", id: m.id, result: {} });
+      return;
+    }
+    if (m.method === "ui/notifications/tool-result") onToolResult(m.params);
+    else if (m.method === "ui/notifications/host-context-changed") applyHost(m.params || {});
+    else if (m.method === "ui/notifications/tool-cancelled") fatal("The tool call was cancelled: " + ((m.params && m.params.reason) || "no reason given"));
+  });
+
+  // ---- host context: theme, CSS variables, display mode (feature-detected, all optional) ----
+  function applyHost(ctx) {
+    var before = state.host.displayMode;
+    state.host = Object.assign(state.host, ctx);
+    if (ctx.theme === "light" || ctx.theme === "dark") {
+      document.documentElement.dataset.theme = ctx.theme;
+      document.documentElement.style.colorScheme = ctx.theme;
+    }
+    var vars = ctx.styles && ctx.styles.variables;
+    if (vars) Object.keys(vars).forEach(function (k) { if (vars[k]) document.documentElement.style.setProperty(k, vars[k]); });
+    if (ctx.displayMode !== undefined && ctx.displayMode !== before) lastHeight = -1;
+    if (state.view) renderAll();
+    reportSize();
+  }
+  function modes() { return state.host.availableDisplayModes || []; }
+  function isFullscreen() { return state.host.displayMode === "fullscreen"; }
+  function canFullscreen() { return modes().indexOf("fullscreen") >= 0; }
+  function canInline() { return modes().indexOf("inline") >= 0; }
+  function requestMode(mode) { return request("ui/request-display-mode", { mode: mode }).catch(function () {}); }
+
+  // Height only. Width is the host's to decide; the layout is fluid, so it fills exactly what it is given.
+  var lastHeight = -1;
+  function reportSize() {
+    if (isFullscreen()) return;
+    var height = Math.ceil(document.documentElement.getBoundingClientRect().height);
+    if (height === lastHeight) return;
+    lastHeight = height;
+    notify("ui/notifications/size-changed", { height: height });
+  }
+  new ResizeObserver(reportSize).observe(document.body);
+
+  function fatal(text) {
+    $("app").classList.add("hidden");
+    $("stage").classList.add("hidden");
+    $("fatal").textContent = text;
+    $("fatal").classList.remove("hidden");
+  }
+
+  // ---- the agent: a message the agent verifies, and context it may read (best effort) ----
+  function messageAgent(text) {
+    // _meta["openai/message"] is an OpenAI extension; hosts that do not know it ignore it.
+    return request("ui/message", {
+      role: "user",
+      content: [{ type: "text", text: text }],
+      _meta: { "openai/message": { target: "active", send: true } }
+    });
+  }
+  function updateModelContext(text) {
+    // Correctness never depends on this: a host without a composer may refuse it, and the failure is swallowed.
+    request("ui/update-model-context", {
+      content: [{ type: "text", text: text, annotations: { audience: ["assistant"] } }]
+    }).catch(function () {});
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-bridge.js.map

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * What only the browser target does (TARGET is "browser"): the words it records for the agent.
+ *
+ * The screen in a browser page has no agent on the other end of its host: the shim in the page (slate-browser-host.ts)
+ * keeps what the screen would have sent with `ui/message` and hands it to the command that opened the page, which
+ * prints it in its result beside the decision itself. So these say what happened and nothing else: the agent
+ * reads the decision, the pick and the request from that result, not from the sentence.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export declare const SLATE_UI_BROWSER: string;
+//# sourceMappingURL=mcp-slate-ui-script-browser.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * What only the browser target does (TARGET is "browser"): the words it records for the agent.
+ *
+ * The screen in a browser page has no agent on the other end of its host: the shim in the page (slate-browser-host.ts)
+ * keeps what the screen would have sent with `ui/message` and hands it to the command that opened the page, which
+ * prints it in its result beside the decision itself. So these say what happened and nothing else: the agent
+ * reads the decision, the pick and the request from that result, not from the sentence.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export const SLATE_UI_BROWSER = String.raw `
+  function browserSelectMessage(label) {
+    return "I selected " + label + " in the Design workspace.";
+  }
+  function browserHandoffMessage(kind, label, handoffId) {
+    return "I asked to " + (kind === "branch" ? "build from" : "convert") + " " + label + " in the Design workspace (request " + handoffId + ").";
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-browser.js.map

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * The four dialogs of the workspace: Design (new options or more like this,
+ * an optional steer note, and the inspiration selected in its tab), Edit (an
+ * instruction and a scribble over the image), Branch (what to build) and
+ * Convert (which format, with only the options that format has). Each is opened
+ * by its button, confirmed by one verb (Generate, Apply, Send, Send) and closed
+ * by Cancel or Escape; Select has no dialog.
+ *
+ * Common rules: a title, fields, an error line (role alert, empty by default),
+ * then Cancel and the primary. The primary keeps its label and disables while a
+ * call is in flight; on success the dialog closes at once. One id is minted
+ * when the dialog opens (the op id of Design and Edit, the hand-off id of
+ * Branch and Convert), so a double click sends one request.
+ *
+ * Design and Edit start work through the run tool, which returns as soon as
+ * the work is committed; Branch and Convert hand off to the agent through
+ * sendHandoff. Nothing here shows or asks for money.
+ */
+export declare const SLATE_UI_DIALOG: string;
+//# sourceMappingURL=mcp-slate-ui-script-dialog.d.ts.map

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

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

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

@@ -0,0 +1,332 @@
+/**
+ * The four dialogs of the workspace: Design (new options or more like this,
+ * an optional steer note, and the inspiration selected in its tab), Edit (an
+ * instruction and a scribble over the image), Branch (what to build) and
+ * Convert (which format, with only the options that format has). Each is opened
+ * by its button, confirmed by one verb (Generate, Apply, Send, Send) and closed
+ * by Cancel or Escape; Select has no dialog.
+ *
+ * Common rules: a title, fields, an error line (role alert, empty by default),
+ * then Cancel and the primary. The primary keeps its label and disables while a
+ * call is in flight; on success the dialog closes at once. One id is minted
+ * when the dialog opens (the op id of Design and Edit, the hand-off id of
+ * Branch and Convert), so a double click sends one request.
+ *
+ * Design and Edit start work through the run tool, which returns as soon as
+ * the work is committed; Branch and Convert hand off to the agent through
+ * sendHandoff. Nothing here shows or asks for money.
+ */
+export const SLATE_UI_DIALOG = String.raw `
+  var DIALOG_TITLES = { design: COPY.design, edit: COPY.edit, branch: COPY.branch, convert: COPY.convert };
+  var DIALOG_VERBS = { design: COPY.generate, edit: COPY.apply, branch: COPY.send, convert: COPY.send };
+
+  function field(labelText, control, id) {
+    var wrap = el("div", "field");
+    var label = el("label", "lbl", labelText);
+    if (id) label.setAttribute("for", id);
+    wrap.appendChild(label);
+    wrap.appendChild(control);
+    return wrap;
+  }
+  function group(labelText, control) {
+    var wrap = el("div", "field");
+    wrap.appendChild(el("span", "lbl", labelText));
+    wrap.appendChild(control);
+    return wrap;
+  }
+  function textarea(id, rows, placeholder, max, onInput) {
+    var area = el("textarea");
+    area.id = id;
+    area.setAttribute("rows", String(rows));
+    area.placeholder = placeholder;
+    area.setAttribute("maxlength", String(max));
+    area.addEventListener("input", function () { onInput(area.value); updateDialogUi(); });
+    return area;
+  }
+  function radioRow(name, options, current, onChange) {
+    var row = el("div", "radios");
+    row.setAttribute("role", "radiogroup");
+    options.forEach(function (opt) {
+      var label = el("label", "radio");
+      var input = el("input");
+      input.type = "radio";
+      input.name = name;
+      input.value = String(opt.value);
+      input.checked = opt.value === current;
+      if (opt.disabled) input.disabled = true;
+      input.addEventListener("change", function () { onChange(opt.value); updateDialogUi(); });
+      label.appendChild(input);
+      label.appendChild(el("span", "", opt.label));
+      row.appendChild(label);
+    });
+    return row;
+  }
+
+  // ---- what this Mac can do now ----
+  function localImage() { return (state.view && state.view.local && state.view.local.image) || { ready: false, reason: null }; }
+
+  // ---- open and close ----
+  function openDialog(kind, opener) {
+    if (state.dialog || !state.view) return;
+    var v = selectedVersion();
+    if (kind !== "design" && !v) return;
+    if (kind === "edit" && !v.editable) return;
+    state.dialog = {
+      kind: kind, id: uuid4(), versionId: v ? v.versionId : null, opener: opener,
+      mode: "new", note: "", prompt: "", explanation: "",
+      format: CONVERT.choices[0].value, clean: "enhance", quality: "standard", width: "", layouts: "standard",
+      strokes: [], current: null, committing: false, error: "", els: {}
+    };
+    mountDialog();
+  }
+  function closeDialog() {
+    var d = state.dialog;
+    if (!d) return;
+    state.dialog = null;
+    stageEls.dialog.textContent = "";
+    if (d.opener && d.opener.isConnected !== false && d.opener.focus) d.opener.focus();
+  }
+
+  // ---- what each dialog would send ----
+  // The one round action: the Design dialog and the Generate more panel both build it here. Only the panel sets a count.
+  function roundAction(request) {
+    var action = { kind: "round", mode: request.mode };
+    var note = (request.note || "").trim();
+    if (note) action.note = note;
+    if (request.count !== undefined) action.count = request.count;
+    if (request.mode === "like") action.fromVersionId = request.fromVersionId;
+    return action;
+  }
+  function editAction(d) {
+    var action = { kind: "edit", versionId: d.versionId, prompt: d.prompt.trim() };
+    if (d.strokes.length > 0) action.strokes = d.strokes.map(function (s) { return s.map(function (p) { return [p[0], p[1]]; }); });
+    return action;
+  }
+  // The hosted server takes the marked image from the screen (there is no server-side compositing), so an edit with
+  // strokes carries it; the local server draws its own from the strokes.
+  function editActionFor(d, version) {
+    var action = editAction(d);
+    if (TARGET !== "remote" || d.strokes.length === 0) return Promise.resolve(action);
+    return compositeMarked(version, d.strokes).then(function (marked) {
+      action.annotated = marked;
+      return action;
+    }, function (err) { throw new Error(tpl(COPY.markFailed, { detail: errText(err) })); });
+  }
+  function convertChoice(d) { return CONVERT.choices.filter(function (c) { return c.value === d.format; })[0]; }
+  // An empty width is fine (the service picks); anything else must be a whole number the CLI accepts.
+  function widthOf(d) {
+    var t = d.width.trim();
+    if (!t) return { ok: true, value: null };
+    var n = Number(t);
+    var ok = /^[0-9]+$/.test(t) && n >= 1 && n <= CONVERT.maxWidth;
+    return { ok: ok, value: ok ? n : null };
+  }
+  function convertOptions(d) {
+    var choice = convertChoice(d);
+    // The hosted server has one engine and two outputs; nothing else is a choice.
+    if (TARGET === "remote") return { engine: "local", output: choice.output };
+    if (choice.engine === "local") return { engine: "local", output: choice.output, cleanAssets: d.clean };
+    var options = { engine: "service", output: choice.output, model: d.quality };
+    var width = widthOf(d);
+    if (width.value !== null) options.width = width.value;
+    if (choice.output === "html") options.responsiveQuality = d.layouts;
+    return options;
+  }
+  function dialogReady(d) {
+    var v = ver(d.versionId);
+    if (d.kind === "design") return localImage().ready && (d.mode === "new" || pickable(v));
+    if (d.kind === "edit") return localImage().ready && !!v && v.editable && !!d.prompt.trim();
+    if (d.kind === "branch") return !!d.explanation.trim();
+    return !!convertChoice(d) && widthOf(d).ok;
+  }
+
+  // ---- send ----
+  function runAction(action, opId) {
+    return callTool(TOOLS.run, { runDir: state.view.runDir, opId: opId, action: action }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.view) applyView(sc.view, true);
+      // The hosted server has no runner: the person's agent does the work, and is told here (best effort, like Select).
+      if (TARGET === "remote") remoteTellRun(action, opId);
+      return sc;
+    });
+  }
+  // The one way a round starts: the selection is committed first, so the round uses the inspiration the person sees.
+  function startRound(opId, request) {
+    return whenSelectionSettled().then(function () { return runAction(roundAction(request), opId); });
+  }
+  function commitDialog() {
+    var d = state.dialog;
+    if (!d || d.committing || !dialogReady(d)) return;
+    d.committing = true;
+    d.error = "";
+    updateDialogUi();
+    var version = ver(d.versionId);
+    var work;
+    if (d.kind === "branch") work = sendHandoff("branch", version, d.id, { explanation: d.explanation.trim() });
+    else if (d.kind === "convert") work = sendHandoff("convert", version, d.id, convertOptions(d));
+    else if (d.kind === "edit") {
+      var edited = cand(version.candidateId);
+      work = editActionFor(d, version).then(function (action) { return runAction(action, d.id); }).then(function () {
+        // The new version is shown the moment it lands.
+        state.awaitEdit = { candidateId: version.candidateId, count: edited ? edited.versionIds.length : 0 };
+      });
+    } else work = startRound(d.id, { mode: d.mode, note: d.note, fromVersionId: d.versionId });
+    work.then(function () {
+      closeDialog();
+    }, function (err) {
+      if (state.dialog !== d) return;
+      d.committing = false;
+      d.error = errText(err);
+      updateDialogUi();
+    });
+  }
+
+  // ---- the dialog's elements ----
+  function designBody(d, box) {
+    var v = ver(d.versionId);
+    var modes = [{ value: "new", label: COPY.newOptions }, { value: "like", label: COPY.moreLikeThis, disabled: !pickable(v) }];
+    box.appendChild(radioRow("mode", modes, d.mode, function (value) { d.mode = value; }));
+    box.appendChild(field(COPY.noteLabel, textarea("dialognote", 2, COPY.notePlaceholder, 600, function (value) { d.note = value; }), "dialognote"));
+    var line = el("div", "refline");
+    var chosen = currentSelected().slice(0, MAX_SELECTED);
+    if (chosen.length > 0) {
+      var thumbs = el("span", "refthumbs");
+      chosen.forEach(function (id) {
+        var img = el("img", "refmini empty");
+        img.alt = "";
+        thumbs.appendChild(img);
+        bindReference(img, id, "thumb");
+      });
+      line.appendChild(thumbs);
+    }
+    line.appendChild(el("span", "", chosen.length > 0 ? COPY.usingSelected : COPY.usingFresh));
+    box.appendChild(line);
+  }
+  function editBody(d, box) {
+    var v = ver(d.versionId);
+    var wrap = el("div", "imgwrap");
+    wrap.style.setProperty("--ar", String(v.width / v.height));
+    var img = el("img", "stageimg empty");
+    img.alt = COPY.versionPrefix + v.label;
+    img.setAttribute("draggable", "false");
+    wrap.appendChild(img);
+    bindImage(img, v, "full", true);
+    var cached = state.thumbs[imageKey(v, "thumb")];
+    if (cached) img.src = cached;
+    scribbleAttach(wrap, d);
+    box.appendChild(wrap);
+    var tools = el("div", "dialogtools");
+    d.els.undo = button(COPY.undo, "", function () { scribbleUndo(d); });
+    d.els.clear = button(COPY.clear, "", function () { scribbleClear(d); });
+    tools.appendChild(d.els.undo);
+    tools.appendChild(d.els.clear);
+    box.appendChild(tools);
+    box.appendChild(field(COPY.editLabel, textarea("dialogedit", 3, COPY.editPlaceholder, 6000, function (value) { d.prompt = value; }), "dialogedit"));
+  }
+  function branchBody(d, box) {
+    box.appendChild(field(COPY.branchLabel, textarea("dialogbranch", 4, COPY.branchPlaceholder, 2000, function (value) { d.explanation = value; }), "dialogbranch"));
+  }
+  function convertBody(d, box) {
+    var select = el("select");
+    select.id = "dialogformat";
+    var service = el("optgroup");
+    service.setAttribute("label", COPY.serviceGroup);
+    CONVERT.choices.forEach(function (choice) {
+      var option = el("option", "", choice.label);
+      option.setAttribute("value", choice.value);
+      if (choice.value === d.format) option.setAttribute("selected", "");
+      (choice.engine === "local" ? select : service).appendChild(option);
+    });
+    if (service.childNodes.length > 0) select.appendChild(service);
+    select.addEventListener("change", function () { d.format = select.value; updateDialogUi(); });
+    box.appendChild(field(COPY.convertLabel, select, "dialogformat"));
+    // The hosted server builds from the image and has nothing else to ask: no assets, quality, width or layouts.
+    if (TARGET === "remote") return;
+    // Only the options the chosen format has are shown; the rest are hidden, not disabled.
+    d.els.local = group(COPY.cleanLabel, radioRow("clean", [{ value: "crop", label: COPY.crop }, { value: "enhance", label: COPY.enhance }], d.clean, function (value) { d.clean = value; }));
+    d.els.quality = group(COPY.qualityLabel, radioRow("quality", [{ value: "fast", label: COPY.fast }, { value: "standard", label: COPY.standard }, { value: "pro", label: COPY.pro }], d.quality, function (value) { d.quality = value; }));
+    var width = el("input");
+    width.type = "number";
+    width.id = "dialogwidth";
+    width.setAttribute("min", "1");
+    width.setAttribute("max", String(CONVERT.maxWidth));
+    width.setAttribute("placeholder", COPY.widthPlaceholder);
+    width.setAttribute("inputmode", "numeric");
+    width.addEventListener("input", function () { d.width = width.value; updateDialogUi(); });
+    d.els.width = field(COPY.widthLabel, width, "dialogwidth");
+    d.els.layouts = group(COPY.layoutsLabel, radioRow("layouts", [{ value: "standard", label: COPY.standard }, { value: "pro", label: COPY.pro }], d.layouts, function (value) { d.layouts = value; }));
+    [d.els.local, d.els.quality, d.els.width, d.els.layouts].forEach(function (node) { box.appendChild(node); });
+  }
+
+  function mountDialog() {
+    var d = state.dialog;
+    var host = stageEls.dialog;
+    host.textContent = "";
+    var backdrop = el("div", "modal");
+    backdrop.addEventListener("click", function (e) { if (e.target === backdrop && !d.committing) closeDialog(); });
+    var box = el("div", "modalbox" + (d.kind === "edit" ? " wide" : ""));
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    box.setAttribute("aria-label", DIALOG_TITLES[d.kind]);
+    box.appendChild(el("h2", "", DIALOG_TITLES[d.kind]));
+    if (d.kind === "design") designBody(d, box);
+    else if (d.kind === "edit") editBody(d, box);
+    else if (d.kind === "branch") branchBody(d, box);
+    else convertBody(d, box);
+    d.els.alert = el("p", "alert");
+    d.els.alert.setAttribute("role", "alert");
+    box.appendChild(d.els.alert);
+    var buttons = el("div", "dialogbtns");
+    buttons.appendChild(el("span", "spacer"));
+    buttons.appendChild(button(COPY.cancel, "", closeDialog));
+    d.els.primary = button(DIALOG_VERBS[d.kind], "primary", commitDialog);
+    buttons.appendChild(d.els.primary);
+    box.appendChild(buttons);
+    backdrop.appendChild(box);
+    host.appendChild(backdrop);
+    d.els.box = box;
+    updateDialogUi();
+    var first = box.querySelector("textarea") || box.querySelector("select") || box.querySelector("input:checked") || d.els.primary;
+    if (first && first.focus) first.focus();
+  }
+
+  function updateDialogUi() {
+    var d = state.dialog;
+    if (!d || !d.els.primary) return;
+    d.els.primary.disabled = d.committing || !dialogReady(d);
+    // A dialog that cannot run on this Mac says why, in the same line an error would use.
+    var local = localImage();
+    var blockedByLocal = (d.kind === "design" || d.kind === "edit") && !local.ready;
+    d.els.alert.textContent = d.error || (blockedByLocal && local.reason ? local.reason : "");
+    d.els.alert.classList.toggle("hidden", !d.els.alert.textContent);
+    if (d.els.undo) d.els.undo.disabled = d.strokes.length === 0 || d.committing;
+    if (d.els.clear) d.els.clear.disabled = d.strokes.length === 0 || d.committing;
+    if (d.kind === "convert" && TARGET !== "remote") {
+      var choice = convertChoice(d);
+      var isLocal = !!choice && choice.engine === "local";
+      d.els.local.classList.toggle("hidden", !isLocal);
+      d.els.quality.classList.toggle("hidden", isLocal);
+      d.els.width.classList.toggle("hidden", isLocal);
+      d.els.layouts.classList.toggle("hidden", isLocal || choice.output !== "html");
+    }
+  }
+
+  // Escape closes; Tab stays inside the dialog.
+  document.addEventListener("keydown", function (e) {
+    var d = state.dialog;
+    if (!d) return;
+    if (e.key === "Escape" && !d.committing) { closeDialog(); return; }
+    if (e.key !== "Tab" || !d.els.box) return;
+    var items = Array.prototype.filter.call(d.els.box.querySelectorAll("button, textarea, input, select"), function (n) {
+      if (n.disabled) return false;
+      for (var node = n; node && node.classList; node = node.parentElement) if (node.classList.contains("hidden")) return false;
+      return true;
+    });
+    if (items.length === 0) return;
+    var first = items[0];
+    var last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) { last.focus(); if (e.preventDefault) e.preventDefault(); }
+    else if (!e.shiftKey && document.activeElement === last) { first.focus(); if (e.preventDefault) e.preventDefault(); }
+  });
+`;
+//# sourceMappingURL=mcp-slate-ui-script-dialog.js.map

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * The inline card: one large image of the selected option with a badge, one
+ * row under it with the strip of thumbnails (the newest round, plus the picked
+ * or viewed option of an older round) and Select, and one status line;
+ * an icon-only control opens the workspace. Also the view application, the
+ * large image and the thumbnail buttons shared with the workspace, and the
+ * tool-result entry point.
+ */
+export declare const SLATE_UI_INLINE: string;
+//# sourceMappingURL=mcp-slate-ui-script-inline.d.ts.map

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

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