@12ui/design 0.2.72 → 0.2.74

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

@@ -0,0 +1,321 @@
+/**
+ * The three dialogs of the workspace: Edit (a drawing over the image, an
+ * optional instruction, or both), Branch (an optional description of what to
+ * build) and Convert (which format, with only the options that format has).
+ * Each is opened by its button, confirmed by one verb (Apply, Send, Send) and
+ * closed by Cancel or Escape; Select has no dialog, and Generate more is a
+ * panel, not a dialog (mcp-slate-ui-script-more.ts).
+ *
+ * Common rules: a title, fields, one line that says what will happen, 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 Edit, the hand-off id of Branch and Convert), so a double click sends one
+ * request.
+ *
+ * Edit starts 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 = { edit: COPY.edit, branch: COPY.branch, convert: COPY.convert };
+  var DIALOG_VERBS = { 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;
+  }
+  // One muted line under a control: what it does, or what will happen.
+  function helpLine(text) { return el("p", "help", text); }
+  function textarea(id, rows, placeholder, max, onInput, ariaLabel) {
+    var area = el("textarea");
+    area.id = id;
+    area.setAttribute("rows", String(rows));
+    area.placeholder = placeholder;
+    area.setAttribute("aria-label", ariaLabel);
+    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 (!v) return;
+    if (kind === "edit" && !v.editable) return;
+    state.dialog = {
+      kind: kind, id: uuid4(), versionId: v.versionId, opener: opener,
+      prompt: "", explanation: "",
+      format: CONVERT.choices[0].value, 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 instruction is optional when the edit carries marks: a drawing alone is sent with no words and the server infers them.
+  function editAction(d) {
+    var action = { kind: "edit", versionId: d.versionId };
+    var words = d.prompt.trim();
+    if (words) action.prompt = words;
+    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 };
+    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);
+    // An edit needs a drawing, words or both; Branch has no required field.
+    if (d.kind === "edit") return localImage().ready && !!v && v.editable && (d.strokes.length > 0 || !!d.prompt.trim());
+    if (d.kind === "branch") return true;
+    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;
+    });
+  }
+  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 {
+      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 };
+      });
+    }
+    work.then(function () {
+      closeDialog();
+    }, function (err) {
+      if (state.dialog !== d) return;
+      d.committing = false;
+      d.error = errText(err);
+      updateDialogUi();
+    });
+  }
+
+  // ---- the dialog's elements ----
+  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);
+    // Under the image: the hint that it can be drawn on, and the two drawing controls.
+    var tools = el("div", "dialogtools");
+    tools.appendChild(el("p", "hint", COPY.scribbleHint));
+    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(textarea("dialogedit", 3, COPY.editPlaceholder, 6000, function (value) { d.prompt = value; }, COPY.editAria));
+    d.els.help = helpLine("");
+    box.appendChild(d.els.help);
+  }
+  function branchBody(d, box) {
+    box.appendChild(textarea("dialogbranch", 4, COPY.branchPlaceholder, 2000, function (value) { d.explanation = value; }, COPY.branchAria));
+    box.appendChild(helpLine(COPY.branchHelp));
+  }
+  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"));
+    // One line that follows the choice: what the person gets.
+    d.els.formatHelp = helpLine("");
+    box.appendChild(d.els.formatHelp);
+    // The hosted server builds from the image and has nothing else to ask: no quality, width or layouts.
+    if (TARGET === "remote") return;
+    // Only the options the chosen format has are shown; the rest are hidden, not disabled. Each says what it does in one line.
+    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; }));
+    d.els.quality.appendChild(helpLine(COPY.qualityHelp));
+    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.width.appendChild(helpLine(COPY.widthHelp));
+    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.layouts.appendChild(helpLine(COPY.layoutsHelp));
+    [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 === "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 === "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.els.help) {
+      var marksOnly = d.strokes.length > 0 && !d.prompt.trim();
+      d.els.help.textContent = marksOnly ? COPY.editHelpMarks : tpl(COPY.editHelp, { label: (ver(d.versionId) || {}).label || "" });
+    }
+    if (d.kind === "convert") {
+      var choice = convertChoice(d);
+      d.els.formatHelp.textContent = (choice && CONVERT.descriptions[choice.value]) || "";
+    }
+    if (d.kind === "convert" && TARGET !== "remote") {
+      var isLocal = !!choice && choice.engine === "local";
+      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;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4SxC,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,QAsN3B,CAAC"}

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

@@ -0,0 +1,224 @@
+/**
+ * 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 const SLATE_UI_INLINE = String.raw `
+  // ---- apply a view: selection, announcements, polling, render ----
+  var pickRestored = null;
+  function applyView(view, fromPoll) {
+    if (!view || view.schema !== "12ui.slate.view/3" || !Array.isArray(view.candidates)) return;
+    var prev = state.view;
+    if (prev && prev.runDir !== view.runDir) {
+      state.sel = { candidateId: null, versionId: null, followLatest: true };
+      state.dialog = null;
+      resetMore();
+      state.insp.local = null;
+      state.awaitEdit = null;
+      pickRestored = null;
+    }
+    if (prev) announceSettled(prev, view);
+    else view.ops.forEach(function (op) { state.lastOpStates[op.opId] = op.state; });
+    if (!prev || prev.stamp !== view.stamp) poll.step = 0;
+    state.view = view;
+    // An edit that was just applied is shown the moment its version exists.
+    if (state.awaitEdit) {
+      var edited = cand(state.awaitEdit.candidateId);
+      if (edited && edited.versionIds.length > state.awaitEdit.count) {
+        state.sel = { candidateId: edited.candidateId, versionId: edited.latestVersionId, followLatest: true };
+        state.awaitEdit = null;
+      }
+    }
+    syncOpStatus(prev, view);
+    if (view.pick && pickRestored !== view.runDir) {
+      pickRestored = view.runDir;
+      var earlier = ver(view.pick.versionId);
+      if (earlier) state.sel = { candidateId: earlier.candidateId, versionId: earlier.versionId, followLatest: false };
+      if (!fromPoll && view.pick.fileState === "missing") setStatus(COPY.pickMissing, "err");
+      else if (!fromPoll && view.pick.fileState === "changed") setStatus(COPY.pickChanged, "err");
+    }
+    ensureSelection();
+    renderAll();
+    schedulePoll();
+  }
+
+  function renderAll() {
+    if (!state.view) return;
+    $("fatal").classList.add("hidden");
+    var full = isFullscreen();
+    $("app").classList.toggle("hidden", full);
+    $("stage").classList.toggle("hidden", !full);
+    if (full) renderStage(); else renderInline();
+    // A dialog that is open follows the view: what this Mac can do now, for one.
+    if (state.dialog) updateDialogUi();
+    syncMore();
+    reportSize();
+  }
+
+  // Rebuild a container only when what it shows changed, so polling never steals focus or discards typing.
+  function setIfChanged(node, signature, build) {
+    if (node.__sig === signature) return false;
+    node.__sig = signature;
+    node.textContent = "";
+    build(node);
+    return true;
+  }
+
+  // ---- the large image, shared by the card and the workspace ----
+  function pickable(version) { return !!version && version.fileState === "ok"; }
+  // Why an option has no picture to show, or "" when it has one.
+  function optionNote(c) {
+    var v = latestVersion(c);
+    if (c.state === "failed") return c.error || optionName(c);
+    if (c.state === "pending") return optionName(c);
+    if (v && v.fileState === "missing") return COPY.fileMissing;
+    if (v && v.fileState === "changed") return COPY.fileChanged;
+    return "";
+  }
+  // The full picture jumps the queue; while it loads, the thumbnail (already fetched) stands in.
+  function heroInto(wrap, c, v) {
+    wrap.textContent = "";
+    wrap.classList.remove("note");
+    wrap.style.removeProperty("--ar");
+    // The workspace's action row is as wide as the picture, so Select sits under its right edge: the shared parent carries the ratio too.
+    var shared = wrap.parentElement;
+    if (shared) shared.style.removeProperty("--ar");
+    if (!c) return;
+    if (!v || v.fileState !== "ok") {
+      wrap.classList.add("note");
+      var reason = !v ? optionNote(c) : v.fileState === "changed" ? COPY.fileChanged : COPY.fileMissing;
+      wrap.appendChild(el("div", "heronote" + (c.state === "pending" ? " shimmer" : ""), reason));
+      return;
+    }
+    wrap.style.setProperty("--ar", String(v.width / v.height));
+    if (shared) shared.style.setProperty("--ar", String(v.width / v.height));
+    var img = el("img", "heroimg 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;
+    wrap.appendChild(el("span", "badge", v.label));
+    if (c.busy) wrap.appendChild(progressBar());
+  }
+  function heroSignature(c, v) {
+    return JSON.stringify([state.sel, v && [v.sha256, v.fileState, v.label], c && [c.state, c.error, c.busy]]);
+  }
+
+  // ---- a small thumbnail button for an option: the strip in the card, the selection in the workspace ----
+  function thumbButton(c, cls) {
+    var b = button("", cls);
+    var selected = state.sel.candidateId === c.candidateId;
+    b.setAttribute("aria-label", optionName(c));
+    b.setAttribute("aria-pressed", selected ? "true" : "false");
+    if (selected) b.classList.add("selected");
+    b.setAttribute("data-option", c.label);
+    var v = latestVersion(c);
+    var note = optionNote(c);
+    if (note && c.state !== "pending") b.title = note;
+    if (c.state === "failed" || (v && v.fileState !== "ok")) b.classList.add("failed");
+    if (c.state === "pending") b.classList.add("shimmer");
+    var img = el("img", "thumb empty");
+    img.alt = "";
+    if (v && v.fileState === "ok" && c.state === "ready") bindImage(img, v, "thumb", false);
+    else img.setAttribute("data-nofile", "");
+    b.appendChild(img);
+    b.appendChild(el("b", "code", c.label));
+    b.addEventListener("click", function () { selectCandidate(c.candidateId); });
+    return b;
+  }
+  function thumbSignature(c) {
+    var lv = latestVersion(c);
+    return [c.candidateId, c.state, c.error, c.latestVersionId, c.versionIds.length, lv ? lv.fileState : ""];
+  }
+
+  function renderInline() {
+    var v = state.view;
+    var empty = v.candidates.length === 0;
+    $("empty").classList.toggle("hidden", !empty);
+    $("empty").textContent = COPY.empty;
+    $("card").classList.toggle("hidden", empty);
+    if (empty) { reportSize(); return; }
+    syncTabs();
+    var onDesigns = state.tab === "designs";
+    $("pane-designs").classList.toggle("hidden", !onDesigns);
+    $("pane-inspiration").classList.toggle("hidden", onDesigns);
+    if (!onDesigns) {
+      renderInspiration($("pane-inspiration"), "card");
+      syncControls();
+      reportSize();
+      return;
+    }
+    syncProgressLine(v);
+    var c = selectedCandidate();
+    var sel = selectedVersion();
+    setIfChanged($("hero"), heroSignature(c, sel), function (node) { heroInto(node, c, sel); });
+    var strip = $("strip");
+    // Where keyboard focus sits among the strip's buttons (the thumbnails), so a rebuild can put it back.
+    var focusAt = strip.contains(document.activeElement) ? Array.prototype.indexOf.call(strip.querySelectorAll("button"), document.activeElement) : -1;
+    var options = inlineCandidates();
+    var rebuilt = setIfChanged(strip, JSON.stringify([state.sel.candidateId, options.map(thumbSignature)]), function (node) {
+      options.forEach(function (x) { node.appendChild(thumbButton(x, "thumbbtn")); });
+    });
+    // The Generate more tile is pinned beside the strip, outside its scroll, so it is never pushed out of view; built once.
+    var wrap = $("stripwrap");
+    if (!wrap.querySelector(".moretile")) wrap.appendChild(moreTile());
+    // Choosing a thumbnail rebuilds the strip: keep keyboard focus at the same place in it.
+    var stripButtons = strip.querySelectorAll("button");
+    if (rebuilt && focusAt >= 0 && stripButtons[focusAt]) stripButtons[focusAt].focus();
+    var shown = Array.prototype.filter.call(strip.children, function (b) { return b.classList.contains("selected"); })[0];
+    if (rebuilt && shown && shown.scrollIntoView && strip.scrollWidth > strip.clientWidth) { try { shown.scrollIntoView({ inline: "nearest", block: "nearest" }); } catch (e) { /* best effort */ } }
+    strip.classList.toggle("fade", strip.scrollWidth > strip.clientWidth + 1);
+    syncControls();
+    reportSize();
+  }
+  window.addEventListener("resize", function () {
+    var strip = $("strip");
+    if (strip) strip.classList.toggle("fade", strip.scrollWidth > strip.clientWidth + 1);
+  });
+
+  function syncControls() {
+    if (!state.view) return;
+    var v = selectedVersion();
+    var same = samePick(v);
+    var label = same ? COPY.selected : COPY.select;
+    var disabled = !(pickable(v) && !state.busy && !same);
+    if (!isFullscreen()) {
+      var expand = $("expand");
+      expand.classList.toggle("hidden", !canFullscreen());
+      expand.disabled = state.view.candidates.length === 0;
+      $("select").disabled = disabled;
+      $("select").textContent = label;
+    }
+    if (typeof syncStageControls === "function") syncStageControls(label, disabled);
+  }
+
+  function expandWorkspace() {
+    if (!canFullscreen()) return;
+    requestMode("fullscreen");
+  }
+  function closeWorkspace() {
+    if (isFullscreen() && canInline()) requestMode("inline");
+  }
+
+  $("expand").addEventListener("click", expandWorkspace);
+  $("select").addEventListener("click", function () { doSelect(selectedVersion()); });
+
+  // ---- tool result: the workspace ----
+  function onToolResult(result) {
+    if (!result || result.isError) {
+      var t = result && result.content && result.content[0] && result.content[0].text;
+      fatal(COPY.toolError + (t ? ": " + t : "."));
+      return;
+    }
+    var data = result.structuredContent;
+    if (!data || !Array.isArray(data.candidates)) { fatal(COPY.noView); return; }
+    applyView(data, false);
+  }
+
+`;
+//# sourceMappingURL=mcp-slate-ui-script-inline.js.map

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The tabs (Designs and Inspiration, in the card and the workspace) and the
+ * Inspiration tab, which is the same in both places: a search row, the newest
+ * search's results, and one section per round with the references that
+ * produced its options. Every reference is a toggle. The selection lives in
+ * the view (`inspiration.selected`, at most eight, in click order) and is
+ * written whole through the inspiration tool, one write in flight at a time,
+ * last click wins locally; the next round reads it at commit. Nothing in this
+ * tab starts work. While a search runs the newest-search slot is skeleton
+ * tiles; a search with no results says so.
+ */
+export declare const SLATE_UI_INSPIRATION: string;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration.d.ts.map

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

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