@12ui/design 0.2.72 → 0.2.74

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

@@ -0,0 +1,236 @@
+/**
+ * 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 const SLATE_UI_INSPIRATION = String.raw `
+  var MAX_SELECTED = 8;
+
+  // A tab strip for the workspace header. The card's own strip is static markup; both carry data-tab.
+  function buildTabs() {
+    var tabs = el("div", "tabs");
+    tabs.setAttribute("role", "tablist");
+    tabs.setAttribute("aria-label", COPY.title);
+    [["designs", COPY.tabDesigns], ["inspiration", COPY.tabInspiration]].forEach(function (t) {
+      var b = button(t[1], "tab");
+      b.setAttribute("role", "tab");
+      b.setAttribute("data-tab", t[0]);
+      b.setAttribute("aria-selected", state.tab === t[0] ? "true" : "false");
+      bindTab(b);
+      tabs.appendChild(b);
+    });
+    return tabs;
+  }
+  function syncTabs() {
+    var tabs = document.querySelectorAll("[data-tab]");
+    for (var i = 0; i < tabs.length; i++) tabs[i].setAttribute("aria-selected", tabs[i].getAttribute("data-tab") === state.tab ? "true" : "false");
+  }
+  function setTab(tab) {
+    if ((tab !== "designs" && tab !== "inspiration") || state.tab === tab) return;
+    state.tab = tab;
+    syncTabs();
+    if (state.view) renderAll();
+  }
+  function bindTab(b) { b.addEventListener("click", function () { setTab(b.getAttribute("data-tab")); }); }
+  Array.prototype.forEach.call(document.querySelectorAll("[data-tab]"), bindTab);
+
+  // ---- what the view says about references ----
+  function currentSelected() {
+    return state.insp.local || (state.view && state.view.inspiration ? state.view.inspiration.selected : []);
+  }
+  function refMeta(id) { return (state.view.references && state.view.references[id]) || null; }
+  function refDescription(id) {
+    var m = refMeta(id);
+    return String((m && m.description) || id).slice(0, 40);
+  }
+  function refName(id) { return COPY.referencePrefix + refDescription(id); }
+  function newestSearch() {
+    var searches = (state.view.inspiration && state.view.inspiration.searches) || [];
+    var best = null;
+    // The hosted server sends no time, only the order: the last search is the newest.
+    if (TARGET === "remote") return searches.length ? searches[searches.length - 1] : null;
+    searches.forEach(function (s) { if (!best || Date.parse(s.at) >= Date.parse(best.at)) best = s; });
+    return best;
+  }
+  function roundTitle(round) {
+    if (round.kind === "new") return COPY.newOptionsTitle;
+    if (round.kind === "like") { var from = ver(round.fromVersionId); return COPY.likePrefix + (from ? from.label : ""); }
+    return "";
+  }
+
+  // ---- the status line of this tab ----
+  function setInspStatus(text, kind) {
+    var nodes = document.querySelectorAll("[data-istatus]");
+    for (var i = 0; i < nodes.length; i++) { nodes[i].textContent = text || ""; nodes[i].className = "status" + (kind ? " " + kind : ""); }
+    state.inspMsg = { text: text || "", kind: kind || "" };
+  }
+
+  // ---- selection: optimistic, serialized, last write wins ----
+  function toggleRef(id) {
+    var cur = currentSelected().slice();
+    var at = cur.indexOf(id);
+    if (at >= 0) cur.splice(at, 1);
+    else {
+      if (cur.length >= MAX_SELECTED) { setInspStatus(COPY.eightAtMost, ""); return; }
+      cur.push(id);
+    }
+    setInspStatus("", "");
+    state.insp.local = cur;
+    renderAll();
+    writeSelection();
+  }
+  function writeSelection() {
+    var i = state.insp;
+    if (i.writing) { i.dirty = true; return; }
+    i.writing = true;
+    i.dirty = false;
+    callTool(TOOLS.inspiration, { runDir: state.view.runDir, referenceIds: i.local.slice() }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (!i.dirty) i.local = null;
+      if (sc.view) applyView(sc.view, true);
+    }, function (err) {
+      if (!i.dirty) i.local = null;
+      setInspStatus(errText(err), "err");
+    }).then(function () {
+      var again = i.dirty && !!i.local;
+      i.writing = false;
+      i.dirty = false;
+      if (again) { writeSelection(); return; }
+      var waiting = i.waiters.splice(0);
+      renderAll();
+      waiting.forEach(function (resolve) { resolve(); });
+    });
+  }
+  // Resolves when no selection write is in flight, so a round commits the selection the person sees.
+  function whenSelectionSettled() {
+    if (!state.insp.writing) return Promise.resolve();
+    return new Promise(function (resolve) { state.insp.waiters.push(resolve); });
+  }
+
+  // ---- search ----
+  function syncSearchButton(pane) {
+    if (pane.__search) pane.__search.disabled = !state.query.trim() || state.insp.searching;
+  }
+  function doSearch() {
+    var q = state.query.trim();
+    if (!q || state.insp.searching || !state.view) return;
+    state.insp.searching = true;
+    state.insp.noMatch = "";
+    setInspStatus(COPY.searching, "");
+    renderAll();
+    callTool(TOOLS.inspire, { runDir: state.view.runDir, query: q }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.view) applyView(sc.view, true);
+      setInspStatus("", "");
+      var found = sc.search || newestSearch();
+      if (found && found.referenceIds.length === 0) state.insp.noMatch = found.searchId;
+    }, function (err) {
+      setInspStatus(err.code === "rate_limited" && err.retryAfterSeconds !== undefined ? tpl(COPY.tryAgain, { n: err.retryAfterSeconds }) : tpl(COPY.searchFailed, { message: errText(err) }), "err");
+    }).then(function () { state.insp.searching = false; renderAll(); });
+  }
+
+  // ---- the tab ----
+  function refButton(id) {
+    var b = button("", "refbtn");
+    b.setAttribute("aria-label", refName(id));
+    b.setAttribute("data-ref", id);
+    // The picture's own skeleton shows until it lands, so a tile that has arrived never flashes a grey square.
+    var img = el("img", "thumb empty shimmer");
+    img.alt = "";
+    b.appendChild(img);
+    bindReference(img, id, "thumb");
+    var check = el("span", "check");
+    check.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+    b.appendChild(check);
+    b.addEventListener("click", function () { toggleRef(id); });
+    return b;
+  }
+  function refSection(heading, title, ids) {
+    var sec = el("section", "refsec");
+    if (heading) {
+      var h = el("h2", "refhead", heading);
+      if (title) h.title = title;
+      sec.appendChild(h);
+    }
+    var grid = el("div", "refgrid");
+    ids.forEach(function (id) { grid.appendChild(refButton(id)); });
+    sec.appendChild(grid);
+    return sec;
+  }
+  // The same tiles as the results, at the same size, where the results will land.
+  var SKELETON_TILES = 12;
+  function skeletonSection() {
+    var sec = el("section", "refsec");
+    var grid = el("div", "refgrid");
+    for (var i = 0; i < SKELETON_TILES; i++) grid.appendChild(el("div", "skeleton shimmer"));
+    sec.appendChild(grid);
+    return sec;
+  }
+  function buildResults(box) {
+    var v = state.view;
+    var any = false;
+    var search = newestSearch();
+    // The newest search's slot: skeleton tiles while it runs, else its references, or the line that it found none.
+    if (state.insp.searching) { box.appendChild(skeletonSection()); any = true; }
+    else if (search && search.referenceIds.length === 0 && state.insp.noMatch === search.searchId) { box.appendChild(el("div", "placeholder", COPY.inspirationNoMatches)); any = true; }
+    else if (search && search.referenceIds.length > 0) { box.appendChild(refSection("", "", search.referenceIds)); any = true; }
+    v.rounds.slice().sort(function (a, b) { return b.index - a.index; }).forEach(function (round) {
+      if (round.referenceIds.length === 0) return;
+      box.appendChild(refSection(COPY.roundPrefix + round.index, roundTitle(round), round.referenceIds));
+      any = true;
+    });
+    if (!any) box.appendChild(el("div", "placeholder", COPY.inspirationEmpty));
+  }
+  function buildInspirationShell(pane, where) {
+    pane.__built = true;
+    pane.classList.add("insp", where);
+    var row = el("div", "searchrow");
+    var input = el("input");
+    input.type = "text";
+    input.className = "query";
+    input.autocomplete = "off";
+    input.placeholder = COPY.inspirationPlaceholder;
+    input.setAttribute("aria-label", COPY.inspirationLabel);
+    input.value = state.query;
+    input.addEventListener("input", function () {
+      state.query = input.value;
+      var panes = document.querySelectorAll(".insp");
+      for (var i = 0; i < panes.length; i++) syncSearchButton(panes[i]);
+    });
+    input.addEventListener("keydown", function (e) { if (e.key === "Enter") doSearch(); });
+    var search = button(COPY.search, "primary", doSearch);
+    row.appendChild(input);
+    row.appendChild(search);
+    var status = el("div", "status");
+    status.setAttribute("data-istatus", "");
+    status.setAttribute("role", "status");
+    status.setAttribute("aria-live", "polite");
+    if (state.inspMsg) { status.textContent = state.inspMsg.text; if (state.inspMsg.kind) status.className = "status " + state.inspMsg.kind; }
+    pane.__input = input;
+    pane.__search = search;
+    pane.__results = el("div", "results");
+    pane.appendChild(row);
+    pane.appendChild(status);
+    pane.appendChild(pane.__results);
+  }
+  function renderInspiration(pane, where) {
+    if (!state.view) return;
+    if (!pane.__built) buildInspirationShell(pane, where);
+    syncSearchButton(pane);
+    var v = state.view;
+    var search = newestSearch();
+    pane.__results.setAttribute("aria-busy", state.insp.searching ? "true" : "false");
+    var sig = JSON.stringify([state.insp.searching, state.insp.noMatch, search && [search.searchId, search.referenceIds], v.rounds.map(function (r) { return [r.index, r.kind, r.fromVersionId, r.referenceIds]; }), v.references]);
+    setIfChanged(pane.__results, sig, buildResults);
+    var chosen = currentSelected();
+    var buttons = pane.__results.querySelectorAll(".refbtn");
+    for (var i = 0; i < buttons.length; i++) buttons[i].setAttribute("aria-pressed", chosen.indexOf(buttons[i].getAttribute("data-ref")) >= 0 ? "true" : "false");
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration.js.map

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

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

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

@@ -0,0 +1,32 @@
+/**
+ * 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 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:
+ *
+ * - 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.
+ *
+ * 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
+ * the thread, so a panel added below the thumbnails lands under the host's
+ * composer, out of sight (the frame's own document has nothing to scroll).
+ * While the panel is open the image is shortened by the panel's height, and
+ * folded away when what would be left is too small to read, so the card keeps
+ * its height and the panel sits where the bottom of the card already was.
+ */
+export declare const SLATE_UI_MORE: string;
+//# sourceMappingURL=mcp-slate-ui-script-more.d.ts.map

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

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

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

@@ -0,0 +1,289 @@
+/**
+ * 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 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:
+ *
+ * - 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.
+ *
+ * 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
+ * the thread, so a panel added below the thumbnails lands under the host's
+ * composer, out of sight (the frame's own document has nothing to scroll).
+ * While the panel is open the image is shortened by the panel's height, and
+ * folded away when what would be left is too small to read, so the card keeps
+ * its height and the panel sits where the bottom of the card already was.
+ */
+export const SLATE_UI_MORE = String.raw `
+  var MORE = __MORE__;
+  var ICON_PLUS = "M12 5v14M5 12h14";
+
+  // A round that is running, or the panel's own request still in flight, keeps the tile off until it settles.
+  function moreBusy() {
+    return (!!state.view && runningOps().some(function (o) { return o.kind === "round"; })) || !!(state.more && state.more.committing);
+  }
+
+  // One tile per row of thumbnails; the strip and the selection each build their own.
+  function moreTile() {
+    var b = button("", "moretile", toggleMore);
+    b.setAttribute("aria-label", COPY.generateMore);
+    b.setAttribute("aria-expanded", "false");
+    b.setAttribute("aria-controls", "morepanel");
+    b.title = COPY.generateMore;
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="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); }
+
+  function toggleMore() {
+    if (state.more) { closeMore(true); return; }
+    openMore();
+  }
+  function openMore() {
+    if (!state.view || state.view.candidates.length === 0 || moreBusy()) return;
+    if (state.more) resetMore();
+    state.more = { id: uuid4(), like: false, note: "", count: MORE.initial, committing: false, error: "", sig: "", els: {} };
+    buildMore();
+    syncMore();
+    state.more.els.note.focus();
+  }
+  // The shortest the card's image gets while the panel is open; below this it folds away, and the thumbnails stay.
+  var HERO_FLOOR_PX = 120;
+  function fitMore() {
+    var hero = $("hero");
+    if (!hero) return;
+    hero.style.removeProperty("--cap");
+    hero.classList.remove("folded");
+    var m = state.more;
+    if (!m || isFullscreen() || m.els.box.parentNode !== $("more")) return;
+    // The panel's host holds the panel and the gap above it, so its height is all the room the panel takes.
+    var natural = hero.getBoundingClientRect().height;
+    var need = $("more").getBoundingClientRect().height;
+    if (!(natural > 0) || !(need > 0)) return;
+    var left = Math.floor(natural - need);
+    if (left >= HERO_FLOOR_PX) hero.style.setProperty("--cap", left + "px");
+    else hero.classList.add("folded");
+  }
+  function closeMore(refocus) {
+    var m = state.more;
+    if (!m || m.committing) return;
+    state.more = null;
+    moreHosts().forEach(function (host) { host.textContent = ""; });
+    syncMore();
+    fitMore();
+    if (refocus) {
+      var back = moreTiles().filter(function (t) { return !t.disabled && !isHiddenNode(t); })[0];
+      if (back) back.focus();
+    }
+    reportSize();
+  }
+  // A different run replaces the workspace: whatever was typed belongs to the old one.
+  function resetMore() {
+    state.more = null;
+    moreHosts().forEach(function (host) { host.textContent = ""; });
+    fitMore();
+  }
+  function isHiddenNode(node) {
+    for (var n = node; n && n.classList; n = n.parentElement) if (n.classList.contains("hidden")) return true;
+    return false;
+  }
+
+  // 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 title = el("h2", "morehead", COPY.generateMore);
+    title.id = "morehead";
+    box.setAttribute("aria-labelledby", "morehead");
+    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");
+    note.setAttribute("placeholder", COPY.moreNotePlaceholder);
+    note.setAttribute("aria-label", COPY.moreNotePlaceholder);
+    note.addEventListener("input", function () { m.note = note.value; });
+    box.appendChild(note);
+    var row = el("div", "morerow");
+    var seg = el("div", "seg");
+    seg.setAttribute("role", "radiogroup");
+    seg.setAttribute("aria-label", COPY.moreCountLabel);
+    MORE.choices.forEach(function (n) {
+      var 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; });
+      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.
+    var buttons = el("span", "morebtns");
+    buttons.appendChild(button(COPY.cancel, "", function () { closeMore(true); }));
+    m.els.primary = button(COPY.generate, "primary", commitMore);
+    buttons.appendChild(m.els.primary);
+    row.appendChild(buttons);
+    box.appendChild(row);
+    m.els.alert = el("p", "alert hidden");
+    m.els.alert.setAttribute("role", "alert");
+    box.appendChild(m.els.alert);
+    m.els.box = box;
+    m.els.note = note;
+  }
+
+  // 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) return;
+    var base = m.like ? moreBase() : null;
+    m.committing = true;
+    m.error = "";
+    syncMore();
+    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();
+    }, function (err) {
+      m.committing = false;
+      if (state.more !== m) return;
+      m.error = errText(err);
+      syncMore();
+    });
+  }
+
+  // The tiles follow the view; the panel sits in the host of the current mode, and keeps what was typed across polls and modes.
+  function syncMore() {
+    if (!state.view) return;
+    var m = state.more;
+    if (m && state.view.candidates.length === 0) { m.committing = false; closeMore(false); m = state.more; }
+    var busy = moreBusy();
+    moreTiles().forEach(function (t) {
+      t.disabled = busy;
+      t.setAttribute("aria-expanded", m ? "true" : "false");
+    });
+    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.els.alert.textContent = m.error || (!local.ready && local.reason ? local.reason : "");
+    m.els.alert.classList.toggle("hidden", !m.els.alert.textContent);
+    // Fitted before the size report, so the host never sees the taller card.
+    fitMore();
+    reportSize();
+  }
+  window.addEventListener("resize", function () { if (state.more) { fitMore(); reportSize(); } });
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape" || !state.more || state.dialog || state.more.committing) return;
+    closeMore(true);
+  });
+`;
+//# sourceMappingURL=mcp-slate-ui-script-more.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * What only the hosted target does (TARGET is "remote"): the words it says to the
+ * agent, and the marked image an edit carries.
+ *
+ * The messages. The host wraps every app message as untrusted input, so each one
+ * names what happened and carries no command, flag, path, price or credit word;
+ * the agent confirms through the model-visible data tool, which returns the
+ * server's own trusted text. Six messages exist, one per click (spec v2 9.2):
+ * 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.
+ *
+ * The marked image. The hosted server does no image work, so the screen
+ * composites the strokes onto the parent itself and sends the result with the
+ * edit: the parent as shown (the display rendition), scaled so its long edge is
+ * at most 1280 px, the strokes in whichever of four colours is farthest from
+ * the image's mean colour (as the local server chooses), round caps, a width of
+ * 0.8 percent of the shorter side (at least 3 px), exported as a JPEG whose
+ * quality steps down until it fits in 300 KiB, and whose size steps down if no
+ * quality does. A canvas that cannot be read or exported is an error the dialog
+ * shows; the edit is not sent without the picture it asked for.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export declare const SLATE_UI_REMOTE: string;
+//# sourceMappingURL=mcp-slate-ui-script-remote.d.ts.map

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

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