@12ui/design 0.2.73 → 0.2.75

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

@@ -1,22 +1,24 @@
 /**
  * Generate more: the last tile of the thumbnails (the card's strip, the
  * workspace's selection) and the panel it opens directly below them. The tile
- * is an empty, very light thumbnail-sized box with a plus and no words; the
- * panel is the heading, an optional note, how many (a segmented control) and
- * Generate or Cancel. Clicking the tile again, Cancel or Escape collapses it.
+ * is a dashed, thumbnail-sized box with a plus and the words Generate more, pinned outside any scroll so it is always in view; the
+ * panel is the only way to start a round, and it says what it will do:
  *
- * Generate starts a round through startRound, the very function the Design
- * dialog uses for New options, so the run tool, the mode, the note and the
- * selected inspiration are the same; the panel only adds the count.
+ * - a heading and one helper line that follows the state (fresh references,
+ *   the selected inspiration, or close to the shown design);
+ * - a switch, with a picture of the design at its left, "Based on <code>", off by default: off draws new options, on
+ *   draws options close to the design that is shown (mode "like" from the
+ *   shown version at the moment of Generate);
+ * - the selected inspiration as small chips, each with a remove button that is
+ *   the same selection write as the Inspiration tab's toggle (adding is done
+ *   in that tab);
+ * - an optional note, how many (1, 2, 4, 8 or 12, default 4) and Cancel and
+ *   Generate.
  *
- * The same panel serves a thumbnail's plus (mcp-slate-ui-script-thumbtools.ts):
- * "More like E2", with a tiny picture of that design, starts a round in mode
- * "like" from that design's latest version. The tile opens the plain panel
- * (mode "new"); opening either replaces the other, so neither carries the
- * other's reference. While a
- * round runs (or the request is in flight) the tile is off; the new round's
- * pending options are already in the thumbnails, because the returned view
- * carries them.
+ * Clicking the tile again, Cancel or Escape collapses it. While a round runs
+ * (or the request is in flight) the tile is off; the new round's pending
+ * options are already in the thumbnails, because the returned view carries
+ * them.
  *
  * In the card the panel takes its room from the large image rather than
  * growing the frame. The host grows the frame downward and does not scroll
@@ -42,31 +44,21 @@ export const SLATE_UI_MORE = String.raw `
     b.setAttribute("aria-expanded", "false");
     b.setAttribute("aria-controls", "morepanel");
     b.title = COPY.generateMore;
-    b.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="' + ICON_PLUS + '"/></svg>';
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="' + ICON_PLUS + '"/></svg>';
+    b.appendChild(el("span", "", COPY.generateMore));
     return b;
   }
   function moreTiles() { return Array.prototype.slice.call(document.querySelectorAll(".moretile")); }
   function moreHosts() { return [$("more"), stageEls && stageEls.more].filter(Boolean); }
 
-  // The dashed tile opens the plain panel (new options). It closes that panel again; when a thumbnail's plus had the panel
-  // open for one design, the tile replaces it with the plain one, so neither carries the other's reference.
   function toggleMore() {
-    if (state.more && state.more.mode === "new") { closeMore(true); return; }
-    openMore({ mode: "new" });
+    if (state.more) { closeMore(true); return; }
+    openMore();
   }
-  // A thumbnail's plus: the same panel, for variations of that design's latest version.
-  function openMoreLike(candidateId) {
-    var c = cand(candidateId);
-    var v = latestVersion(c);
-    if (!c || !v || !pickable(v)) return;
-    var m = state.more;
-    if (m && m.mode === "like" && m.fromVersionId === v.versionId && !m.committing) { m.els.note.focus(); return; }
-    openMore({ mode: "like", fromVersionId: v.versionId, fromCandidateId: c.candidateId, fromLabel: v.label });
-  }
-  function openMore(reference) {
+  function openMore() {
     if (!state.view || state.view.candidates.length === 0 || moreBusy()) return;
     if (state.more) resetMore();
-    state.more = { id: uuid4(), mode: reference.mode, fromVersionId: reference.fromVersionId, fromCandidateId: reference.fromCandidateId, fromLabel: reference.fromLabel, note: "", count: MORE.initial, committing: false, error: "", els: {} };
+    state.more = { id: uuid4(), like: false, note: "", count: MORE.initial, committing: false, error: "", sig: "", els: {} };
     buildMore();
     syncMore();
     state.more.els.note.focus();
@@ -96,7 +88,7 @@ export const SLATE_UI_MORE = String.raw `
     syncMore();
     fitMore();
     if (refocus) {
-      var back = (m.mode === "like" && thumbToolFor("more", m.fromCandidateId)) || moreTiles().filter(function (t) { return !t.disabled && !isHiddenNode(t); })[0];
+      var back = moreTiles().filter(function (t) { return !t.disabled && !isHiddenNode(t); })[0];
       if (back) back.focus();
     }
     reportSize();
@@ -112,28 +104,42 @@ export const SLATE_UI_MORE = String.raw `
     return false;
   }
 
+  // The design the switch is about: the one that is shown when Generate is clicked, so it follows the selection.
+  function moreBase() { var v = selectedVersion(); return pickable(v) ? v : null; }
+
   function buildMore() {
     var m = state.more;
     var box = el("div", "morepanel");
     box.id = "morepanel";
     box.setAttribute("role", "group");
-    var like = m.mode === "like";
-    var title = el("h2", "morehead", like ? tpl(COPY.moreLike, { label: m.fromLabel }) : COPY.generateMore);
+    var title = el("h2", "morehead", COPY.generateMore);
     title.id = "morehead";
     box.setAttribute("aria-labelledby", "morehead");
-    if (like) {
-      // The reference: a tiny picture of the design the variations are made from.
-      var head = el("div", "moreheadrow");
-      var ref = ver(m.fromVersionId);
-      var mini = el("img", "morethumb empty");
-      mini.alt = "";
-      var cached = ref && state.thumbs[imageKey(ref, "thumb")];
-      if (cached) { mini.src = cached; mini.classList.remove("empty"); }
-      else bindImage(mini, ref, "thumb", false);
-      head.appendChild(mini);
-      head.appendChild(title);
-      box.appendChild(head);
-    } else box.appendChild(title);
+    box.appendChild(title);
+    m.els.help = el("p", "help");
+    box.appendChild(m.els.help);
+
+    // The switch: a native checkbox that reads as a switch, with a picture of the design it is about.
+    var label = el("label", "moreswitch");
+    m.els.toggle = el("input");
+    m.els.toggle.type = "checkbox";
+    m.els.toggle.setAttribute("role", "switch");
+    m.els.toggle.addEventListener("change", function () { m.like = m.els.toggle.checked; syncMore(); });
+    m.els.thumb = el("img", "morethumb empty");
+    m.els.thumb.alt = "";
+    m.els.switchText = el("span", "moreswitchtext");
+    label.appendChild(m.els.thumb);
+    label.appendChild(m.els.switchText);
+    label.appendChild(m.els.toggle);
+    box.appendChild(label);
+
+    // The inspiration that is selected, read back from the view; removing one is the tab's own selection write.
+    m.els.chipsWrap = el("div", "morechips hidden");
+    m.els.chipsWrap.appendChild(el("span", "lbl", COPY.moreInspirationLabel));
+    m.els.chips = el("div", "refchips");
+    m.els.chipsWrap.appendChild(m.els.chips);
+    box.appendChild(m.els.chipsWrap);
+
     var note = el("textarea");
     note.setAttribute("rows", "2");
     note.setAttribute("maxlength", "600");
@@ -146,16 +152,16 @@ export const SLATE_UI_MORE = String.raw `
     seg.setAttribute("role", "radiogroup");
     seg.setAttribute("aria-label", COPY.moreCountLabel);
     MORE.choices.forEach(function (n) {
-      var label = el("label", "segopt");
+      var option = el("label", "segopt");
       var input = el("input");
       input.type = "radio";
       input.name = "morecount";
       input.value = String(n);
       input.checked = n === m.count;
       input.addEventListener("change", function () { m.count = n; });
-      label.appendChild(input);
-      label.appendChild(el("span", "", String(n)));
-      seg.appendChild(label);
+      option.appendChild(input);
+      option.appendChild(el("span", "", String(n)));
+      seg.appendChild(option);
     });
     row.appendChild(seg);
     // Cancel and Generate stay together: on a narrow card they drop to the next line as a pair, at the right.
@@ -172,13 +178,71 @@ export const SLATE_UI_MORE = String.raw `
     m.els.note = note;
   }
 
+  // The chips follow the selection, the switch follows the shown design; each is rebuilt only when what it shows changed.
+  function syncMoreBody(m) {
+    var base = moreBase();
+    var likeOn = m.like && !!base;
+    var selected = currentSelected().slice(0, MAX_SELECTED);
+    m.els.toggle.checked = likeOn;
+    m.els.toggle.disabled = !base || m.committing;
+    m.els.switchText.textContent = tpl(COPY.moreBasedOn, { label: base ? base.label : (selectedVersion() ? selectedVersion().label : "") });
+    m.els.switchText.parentNode.title = base ? "" : COPY.moreLikeUnavailable;
+    m.els.help.textContent = likeOn ? tpl(COPY.moreHelpLike, { label: base.label }) : selected.length > 0 ? COPY.moreHelpSelected : COPY.moreHelpFresh;
+    var shown = base || selectedVersion();
+    var thumbSig = shown ? shown.versionId + ":" + shown.sha256 : "";
+    if (m.thumbSig !== thumbSig) {
+      m.thumbSig = thumbSig;
+      var fresh = el("img", "morethumb empty");
+      fresh.alt = "";
+      m.els.thumb.parentNode.replaceChild(fresh, m.els.thumb);
+      m.els.thumb = fresh;
+      if (shown) {
+        var cached = state.thumbs[imageKey(shown, "thumb")];
+        if (cached) { fresh.src = cached; fresh.classList.remove("empty"); }
+        else bindImage(fresh, shown, "thumb", false);
+      }
+    }
+    var chipSig = JSON.stringify(selected);
+    if (m.chipSig !== chipSig) {
+      m.chipSig = chipSig;
+      m.els.chips.textContent = "";
+      selected.forEach(function (id) {
+        var chip = el("span", "refchip");
+        var img = el("img", "refchipimg empty shimmer");
+        img.alt = "";
+        chip.appendChild(img);
+        bindReference(img, id, "thumb");
+        var remove = button("", "refchipx", function () { toggleRef(id); });
+        remove.setAttribute("aria-label", tpl(COPY.removeReference, { name: refDescription(id) }));
+        remove.title = tpl(COPY.removeReference, { name: refDescription(id) });
+        remove.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+        chip.appendChild(remove);
+        m.els.chips.appendChild(chip);
+      });
+    }
+    m.els.chipsWrap.classList.toggle("hidden", selected.length === 0);
+  }
+
+  // The one way a round starts: the selection is committed first, so the round uses the inspiration the person sees.
+  function roundAction(request) {
+    var action = { kind: "round", mode: request.mode, count: request.count };
+    var note = (request.note || "").trim();
+    if (note) action.note = note;
+    if (request.mode === "like") action.fromVersionId = request.fromVersionId;
+    return action;
+  }
+  function startRound(opId, request) {
+    return whenSelectionSettled().then(function () { return runAction(roundAction(request), opId); });
+  }
+
   function commitMore() {
     var m = state.more;
-    if (!m || m.committing || moreBusy() || !localImage().ready || (m.mode === "like" && !pickable(ver(m.fromVersionId)))) return;
+    if (!m || m.committing || moreBusy() || !localImage().ready) return;
+    var base = m.like ? moreBase() : null;
     m.committing = true;
     m.error = "";
     syncMore();
-    startRound(m.id, { mode: m.mode, note: m.note, count: m.count, fromVersionId: m.fromVersionId }).then(function () {
+    startRound(m.id, { mode: base ? "like" : "new", note: m.note, count: m.count, fromVersionId: base ? base.versionId : undefined }).then(function () {
       m.committing = false;
       if (state.more === m) closeMore(false);
       syncMore();
@@ -190,7 +254,7 @@ export const SLATE_UI_MORE = String.raw `
     });
   }
 
-  // The tiles follow the view; the panel sits in the host of the current mode, and keeps what was typed across modes and polls.
+  // The tiles follow the view; the panel sits in the host of the current mode, and keeps what was typed across polls and modes.
   function syncMore() {
     if (!state.view) return;
     var m = state.more;
@@ -198,17 +262,17 @@ export const SLATE_UI_MORE = String.raw `
     var busy = moreBusy();
     moreTiles().forEach(function (t) {
       t.disabled = busy;
-      t.setAttribute("aria-expanded", m && m.mode === "new" ? "true" : "false");
+      t.setAttribute("aria-expanded", m ? "true" : "false");
     });
-    syncThumbTools();
     if (!m) return;
     var host = isFullscreen() ? stageEls.more : $("more");
     if (host && m.els.box.parentNode !== host) {
       moreHosts().forEach(function (h) { if (h !== host) h.textContent = ""; });
       host.appendChild(m.els.box);
     }
+    syncMoreBody(m);
     var local = localImage();
-    m.els.primary.disabled = m.committing || busy || !local.ready || (m.mode === "like" && !pickable(ver(m.fromVersionId)));
+    m.els.primary.disabled = m.committing || busy || !local.ready;
     m.els.alert.textContent = m.error || (!local.ready && local.reason ? local.reason : "");
     m.els.alert.classList.toggle("hidden", !m.els.alert.textContent);
     // Fitted before the size report, so the host never sees the taller card.

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

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

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

@@ -6,8 +6,8 @@
  * names what happened and carries no command, flag, path, price or credit word;
  * the agent confirms through the model-visible data tool, which returns the
  * server's own trusted text. Six messages exist, one per click (spec v2 9.2):
- * New options and Generate more, More like this, Edit, Select, Branch and
- * Convert. The user's own words (a steer note, an edit instruction, the Branch
+ * Generate more with new options, Generate more based on a design, Edit,
+ * Select, Branch and Convert. The user's own words (a steer note, an edit instruction, the Branch
  * explanation) are never put in a message; the agent reads them from the data
  * tool, quoted. `runDir` is named in each because the tools take it and a
  * thread may hold several workspaces.

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

@@ -6,8 +6,8 @@
  * names what happened and carries no command, flag, path, price or credit word;
  * the agent confirms through the model-visible data tool, which returns the
  * server's own trusted text. Six messages exist, one per click (spec v2 9.2):
- * New options and Generate more, More like this, Edit, Select, Branch and
- * Convert. The user's own words (a steer note, an edit instruction, the Branch
+ * Generate more with new options, Generate more based on a design, Edit,
+ * Select, Branch and Convert. The user's own words (a steer note, an edit instruction, the Branch
  * explanation) are never put in a message; the agent reads them from the data
  * tool, quoted. `runDir` is named in each because the tools take it and a
  * thread may hold several workspaces.

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

@@ -69,7 +69,7 @@ export const SLATE_UI_SCRIBBLE = String.raw `
   function scribbleAttach(wrap, d) {
     var canvas = document.createElement("canvas");
     canvas.className = "scribble";
-    canvas.setAttribute("aria-label", COPY.scribbleLabel);
+    canvas.setAttribute("aria-label", COPY.scribbleHint);
     d.canvas = canvas;
     wrap.appendChild(canvas);
     // The bitmap follows the size the image is shown at; the strokes repaint from their permille points.

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

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

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

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

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

@@ -1,8 +1,9 @@
 /**
  * The fullscreen workspace: on the left the selection (compact thumbnails
  * grouped by round, each option with its versions as chips), in the middle one
- * large image, and under it one row of actions: Select, Design, Edit, Branch
- * and Convert. Nothing else shows until a button is clicked; the dialogs live
+ * large image, and under it one row of actions at the right: Edit, Branch and
+ * Convert, then Select (primary) at the far right. Nothing else shows until a
+ * button is clicked; the dialogs live
  * in mcp-slate-ui-script-dialog.ts. One band above the image says what is
  * running, stopped or failed, with Resume when the work can resume. Mounted
  * only in fullscreen.
@@ -38,14 +39,14 @@ export const SLATE_UI_STAGE = String.raw `
     stageEls.band.setAttribute("role", "status");
     stageEls.hero = el("div", "hero");
     var row = el("div", "actionrow");
-    stageEls.select = button(COPY.select, "primary", function () { doSelect(selectedVersion()); });
-    stageEls.design = button(COPY.design, "", function () { openDialog("design", stageEls.design); });
     stageEls.edit = button(COPY.edit, "", function () { openDialog("edit", stageEls.edit); });
     stageEls.branch = button(COPY.branch, "", function () { openDialog("branch", stageEls.branch); });
     stageEls.convert = button(COPY.convert, "", function () { openDialog("convert", stageEls.convert); });
+    stageEls.select = button(COPY.select, "primary", function () { doSelect(selectedVersion()); });
     stageEls.editWhy = el("span", "sr");
     stageEls.editWhy.id = "edit-why";
-    [stageEls.select, stageEls.design, stageEls.edit, stageEls.branch, stageEls.convert, stageEls.editWhy].forEach(function (b) { row.appendChild(b); });
+    // Select is last: the row is right-aligned, so it ends at the picture's right edge.
+    [stageEls.edit, stageEls.branch, stageEls.convert, stageEls.select, stageEls.editWhy].forEach(function (b) { row.appendChild(b); });
     stageEls.status = el("p", "status");
     stageEls.status.setAttribute("data-status", "");
     stageEls.status.setAttribute("role", "status");
@@ -87,7 +88,7 @@ export const SLATE_UI_STAGE = String.raw `
       var list = el("ul", "options");
       orderedCandidates().filter(function (c) { return c.roundId === round.roundId; }).sort(byLabel).forEach(function (c) {
         var item = el("li", "option");
-        item.appendChild(thumbCell(c, "opt"));
+        item.appendChild(thumbButton(c, "opt"));
         var versions = versionsOf(c);
         if (versions.length > 1) {
           var chips = el("div", "chips");
@@ -132,9 +133,7 @@ export const SLATE_UI_STAGE = String.raw `
   function syncStageControls(selectLabel, selectDisabled) {
     if (!stageBuilt || !isFullscreen()) return;
     var v = selectedVersion();
-    var any = !!state.view && state.view.candidates.length > 0;
     if (selectLabel !== undefined) { stageEls.select.textContent = selectLabel; stageEls.select.disabled = selectDisabled; }
-    stageEls.design.disabled = !any;
     // Edit is off when the shown version cannot be edited; the reason is its accessible description, not a tooltip.
     var blocked = !v || !v.editable;
     stageEls.edit.disabled = blocked;

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

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

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

@@ -13,10 +13,10 @@ 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,
+    tab: "designs", query: "", dialog: null, more: 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: [] }
+    insp: { local: null, writing: false, dirty: false, searching: false, noMatch: "", waiters: [] }
   };
 
   // ---- small helpers ----
@@ -161,7 +161,7 @@ export const SLATE_UI_STATE = String.raw `
     promise.then(function (src) {
       if (img.isConnected === false) return;
       img.src = src;
-      img.classList.remove("empty");
+      img.classList.remove("empty", "shimmer");
     }, function (err) {
       // An error is shown in place of the picture, never thrown.
       img.alt = errText(err);

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

@@ -3,8 +3,7 @@
  * 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
+ * (fullscreen), dialog (Edit, Branch and Convert), more (the Generate more tile and its panel), 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.
  *

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAgB3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAyB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

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

@@ -1,4 +1,4 @@
-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_CONVERT_CHOICES, SLATE_CONVERT_DESCRIPTIONS, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_REMOTE_CONVERT_DESCRIPTIONS, 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';
@@ -12,7 +12,6 @@ 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) {
@@ -38,7 +37,11 @@ export const buildSlateUiScript = (target) => [
         .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 })),
+        .replace('__CONVERT__', () => JSON.stringify({
+        choices: target === 'remote' ? SLATE_REMOTE_CONVERT_CHOICES : SLATE_CONVERT_CHOICES,
+        descriptions: target === 'remote' ? SLATE_REMOTE_CONVERT_DESCRIPTIONS : SLATE_CONVERT_DESCRIPTIONS,
+        maxWidth: SLATE_CONVERT_MAX_WIDTH,
+    })),
     SLATE_UI_STATE,
     SLATE_UI_PROGRESS,
     SLATE_UI_INLINE,
@@ -47,7 +50,6 @@ export const buildSlateUiScript = (target) => [
     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,

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,iCAAiC,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvN,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;AAuBhE,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;QAC3C,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB;QACnF,YAAY,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,0BAA0B;QAClG,QAAQ,EAAE,uBAAuB;KAClC,CAAC,CAAC;IACL,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,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

@@ -1,17 +1,20 @@
 /**
- * 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
+ * The dialogs (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.
+ * phone. The reference tiles are square and fluid: at least 192 px across in
+ * the card and 256 px in the workspace (--ref-min), two across under 420 px.
  */
 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.
+ * The Generate more tile and its panel. The tile is quiet but findable: a
+ * dashed border in the secondary text colour, a plus and the words "Generate
+ * more", no fill; it takes the size of the thumbnails around it (--thumb-card
+ * beside the card's strip, --thumb-rail in the selection). The panel is one bordered block under the thumbnails:
+ * heading, one helper line, the "Based on" switch, the selected inspiration as
+ * small chips, a note, the count and the two buttons. 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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAoClC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAuChC,CAAC"}