@12ui/design 0.2.75 → 0.2.77

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

@@ -0,0 +1,246 @@
+/**
+ * The Inspiration tab's page, the same in the card and the workspace: the
+ * search row, a line that says whose words are in the box, the status line,
+ * a line that says how many results the grid shows and why no more, the grid,
+ * and, while references are selected, Generate.
+ *
+ * - The grid: the search of the words in the box at the top (skeleton tiles
+ *   while it runs, a line when it found nothing), then one section per round,
+ *   newest first, with the references that produced its options. Every grid is
+ *   a collage (`mcp-slate-ui-script-inspiration-collage.ts`): each picture at
+ *   its own aspect ratio, every band as wide as the grid.
+ * - Every reference a round used carries a badge that says where, from the
+ *   round records only: a reference is used when the round lists it
+ *   (`rounds[].referenceIds`), and the options are those whose `referenceId`
+ *   is it, e.g. "Used in round 1, option B". Nothing is inferred.
+ * - Generate asks for one new round drawn from exactly the selected
+ *   references: it is Generate more's own request (`startRound`, which first
+ *   waits for the selection write, then `design.slate.run` with a new round),
+ *   so the server freezes the selection into the round and the person's agent
+ *   or the local runner is told the same way. It draws the panel's default
+ *   count, or the next count up when more references are selected, so every
+ *   selected reference is drawn from at least once. While a round runs it is
+ *   off and says why.
+ */
+export const SLATE_UI_INSPIRATION_GRID = String.raw `
+  // ---- where a reference was used, from the round records ----
+  function labelOrder(a, b) { return a.length - b.length || (a < b ? -1 : a > b ? 1 : 0); }
+  function usedText(id) {
+    var v = state.view;
+    // A round that still waits for the person has used nothing yet: its references are only chosen (the pause).
+    var places = v.rounds.slice().sort(function (a, b) { return b.index - a.index; }).filter(function (r) {
+      return r.referenceIds.indexOf(id) >= 0 && !(pauseActive() && r.roundId === pause.roundId);
+    }).map(function (r) {
+      var labels = v.candidates.filter(function (c) { return c.roundId === r.roundId && c.referenceId === id; }).map(function (c) { return c.label; }).sort(labelOrder);
+      return t("usedPlace", { options: labels.length, round: r.index, labels: labels.length ? listOf(labels) : "" });
+    });
+    return places.length ? t("usedIn", { places: places.join(t("usedSeparator")) }) : "";
+  }
+
+  // ---- the tiles ----
+  function refButton(id) {
+    var b = button("", "refbtn");
+    b.setAttribute("aria-label", refName(id));
+    b.setAttribute("data-ref", id);
+    collageShape(b, 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);
+    var used = usedText(id);
+    if (used) {
+      b.classList.add("used");
+      b.title = used;
+      b.appendChild(el("span", "usedbadge", used));
+    }
+    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;
+  }
+  // Tiles where the results will land, packed by the same collage, each a 16:10 landscape until the pictures are known.
+  var SKELETON_TILES = 12;
+  function skeletonSection() {
+    var sec = el("section", "refsec");
+    var grid = el("div", "refgrid");
+    for (var i = 0; i < SKELETON_TILES; i++) {
+      var tile = el("div", "skeleton shimmer");
+      collageShape(tile, null);
+      grid.appendChild(tile);
+    }
+    sec.appendChild(grid);
+    return sec;
+  }
+  function buildResults(box) {
+    var v = state.view;
+    var any = false;
+    var search = shownSearch();
+    // The search's slot: skeleton tiles while it runs, else its references, or the line that it found none.
+    // A round that waits for the person comes first, with the references it will be drawn from as they stand now.
+    var waiting = pauseRound();
+    if (waiting) { box.appendChild(refSection(t("roundHeading", { n: waiting.index }), roundTitle(waiting), pauseChosen())); any = true; }
+    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", t("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 || (waiting && round.roundId === waiting.roundId)) return;
+      box.appendChild(refSection(t("roundHeading", { n: round.index }), roundTitle(round), round.referenceIds));
+      any = true;
+    });
+    if (!any) box.appendChild(el("div", "placeholder", t("inspirationEmpty")));
+  }
+  // How many the search shows, and, at the cap, that one search returns no more.
+  function resultsText() {
+    var search = shownSearch();
+    if (state.insp.searching || !search || search.referenceIds.length === 0) return "";
+    var n = search.referenceIds.length;
+    return t(n >= SEARCH_COUNT ? "resultsMax" : "resultsCount", { n: n });
+  }
+
+  // ---- Generate: one new round from exactly the selected references ----
+  function generateCount(selected) {
+    var want = Math.max(selected, MORE.initial);
+    var fit = MORE.choices.filter(function (n) { return n >= want; })[0];
+    return fit || MORE.choices[MORE.choices.length - 1];
+  }
+  function generateFromSelection() {
+    var chosen = currentSelected();
+    if (chosen.length === 0 || state.insp.generating || moreBusy() || !localImage().ready) return;
+    state.insp.generating = true;
+    setInspStatus("", "");
+    renderAll();
+    startRound(uuid4(), { mode: "new", note: "", count: generateCount(chosen.length) }).then(function () {
+      state.insp.generating = false;
+      // The new round's options are pending in the designs: show them.
+      if (state.tab === "inspiration") setTab("designs"); else renderAll();
+    }, function (err) {
+      state.insp.generating = false;
+      setInspStatus(errText(err), "err");
+      renderAll();
+    });
+  }
+  function syncGenerate(pane) {
+    var chosen = currentSelected();
+    pane.__bar.classList.toggle("hidden", chosen.length === 0);
+    if (chosen.length === 0) return;
+    var running = moreBusy() && !state.insp.generating;
+    var local = localImage();
+    var line = t("selectionDraws", { m: chosen.length, n: generateCount(chosen.length) });
+    if (running) line = t("roundRunning");
+    else if (!local.ready && localReason()) line = localReason();
+    pane.__barText.textContent = line;
+    pane.__generate.disabled = state.insp.generating || running || !local.ready;
+  }
+
+  // ---- the tab ----
+  function buildInspirationShell(pane, where) {
+    pane.__built = true;
+    pane.__where = where;
+    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 = t("inspirationPlaceholder");
+    input.setAttribute("aria-label", t("inspirationLabel"));
+    input.value = state.query;
+    input.addEventListener("input", function () {
+      state.query = input.value;
+      state.insp.typed = true;
+      var panes = document.querySelectorAll(".insp");
+      for (var i = 0; i < panes.length; i++) { syncSearchButton(panes[i]); syncHow(panes[i]); }
+    });
+    input.addEventListener("keydown", function (e) { if (e.key === "Enter") doSearch(); });
+    var search = button(t("search"), "primary", doSearch);
+    row.appendChild(input);
+    row.appendChild(search);
+    var how = el("p", "insphow");
+    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; }
+    var count = el("p", "insphow inspcount");
+    var pauseHost = el("div", "pausebar hidden");
+    var pauseChoice = el("p", "help pausechoice");
+    pauseChoice.setAttribute("aria-live", "polite");
+    var bar = el("div", "inspbar hidden");
+    var barText = el("p", "help");
+    barText.setAttribute("aria-live", "polite");
+    var generate = button(t("generate"), "primary", generateFromSelection);
+    bar.appendChild(barText);
+    bar.appendChild(generate);
+    pane.__input = input;
+    pane.__search = search;
+    pane.__how = how;
+    pane.__count = count;
+    pane.__results = el("div", "results");
+    pane.__bar = bar;
+    pane.__barText = barText;
+    pane.__generate = generate;
+    pane.__pause = pauseHost;
+    pane.__pauseChoice = pauseChoice;
+    pane.appendChild(row);
+    pane.appendChild(how);
+    pane.appendChild(status);
+    pane.appendChild(count);
+    pane.appendChild(pane.__results);
+    pane.appendChild(bar);
+    pane.appendChild(pauseChoice);
+    pane.appendChild(pauseHost);
+    // The collage is measured: a new width (a resize, a scroll bar, the tab shown again) lays it out again.
+    new ResizeObserver(function () { layoutResults(pane); }).observe(pane.__results);
+  }
+  function syncHow(pane) {
+    var text = howText();
+    pane.__how.textContent = text;
+    pane.__how.classList.toggle("hidden", !text);
+  }
+  function renderInspiration(pane, where) {
+    if (!state.view) return;
+    if (!pane.__built) buildInspirationShell(pane, where);
+    syncQuery();
+    // The box shows the words, except while the person is in it: their caret and typing are never disturbed.
+    if (pane.__input.value !== state.query && document.activeElement !== pane.__input) pane.__input.value = state.query;
+    // Words longer than the field are all in its tooltip.
+    if (pane.__input.scrollWidth > pane.__input.clientWidth) pane.__input.title = state.query; else pane.__input.removeAttribute("title");
+    syncSearchButton(pane);
+    syncHow(pane);
+    var v = state.view;
+    var search = shownSearch();
+    pane.__results.setAttribute("aria-busy", state.insp.searching ? "true" : "false");
+    var count = resultsText();
+    pane.__count.textContent = count;
+    pane.__count.classList.toggle("hidden", !count);
+    var sig = JSON.stringify([pause.roundId, pauseActive() ? pauseChosen() : null, 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.candidates.map(function (c) { return [c.roundId, c.label, c.referenceId]; }), v.references]);
+    setIfChanged(pane.__results, sig, buildResults);
+    layoutResults(pane);
+    var chosen = pauseActive() ? pauseChosen() : 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");
+    // While a round waits for the person, the tab's bar is the pause's: how the options take the references, and Continue.
+    syncPauseHost(pane.__pause, false);
+    pane.__pauseChoice.textContent = pauseActive() ? pauseChoiceText() : "";
+    pane.__pauseChoice.classList.toggle("hidden", !pauseActive());
+    if (pauseActive()) pane.__bar.classList.add("hidden"); else syncGenerate(pane);
+    autoSearch();
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration-grid.js.map

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

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

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

@@ -1,13 +1,14 @@
 /**
- * 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.
+ * How many references the Inspiration tab asks one search for: the most the free corpus returns for one query (the
+ * public tier's cap, which both servers' inspire tools also cap at). The corpus has no paging, so this is all one search
+ * can show; the tab says so next to the results.
  */
+export declare const SLATE_INSPIRATION_SEARCH_COUNT = 24;
+/**
+ * The longest words one search takes, in characters (code points): both servers' inspire tools refuse longer. A round
+ * searches with the whole brief and its note, which can be longer, so the box shows the round's words in full and the
+ * search takes their first 500 characters, cut at a space, and the tab says so.
+ */
+export declare const SLATE_INSPIRATION_QUERY_CHARS = 500;
 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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,KAA0B,CAAC;AAEtE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAuQjD,eAAO,MAAM,oBAAoB,QAA2F,CAAC"}

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

@@ -1,23 +1,59 @@
+import { PUBLIC_CORPUS_MAX_COUNT } from './corpus-access.js';
+import { SLATE_UI_INSPIRATION_COLLAGE } from './mcp-slate-ui-script-inspiration-collage.js';
+import { SLATE_UI_INSPIRATION_GRID } from './mcp-slate-ui-script-inspiration-grid.js';
+/**
+ * How many references the Inspiration tab asks one search for: the most the free corpus returns for one query (the
+ * public tier's cap, which both servers' inspire tools also cap at). The corpus has no paging, so this is all one search
+ * can show; the tab says so next to the results.
+ */
+export const SLATE_INSPIRATION_SEARCH_COUNT = PUBLIC_CORPUS_MAX_COUNT;
+/**
+ * The longest words one search takes, in characters (code points): both servers' inspire tools refuse longer. A round
+ * searches with the whole brief and its note, which can be longer, so the box shows the round's words in full and the
+ * search takes their first 500 characters, cut at a space, and the tab says so.
+ */
+export const SLATE_INSPIRATION_QUERY_CHARS = 500;
 /**
  * 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.
+ * Inspiration tab's words and work, which are the same in both places: the
+ * search box, the search, and the selection. The tab's grid, its badges and
+ * Generate are in mcp-slate-ui-script-inspiration-grid.ts.
+ *
+ * - The search box opens with the words that produced this workspace's
+ *   references: the newest round's own search words, which the server states
+ *   in `inspiration.roundQueries` (stored or derived, never searched again),
+ *   else the newest recorded search. A line under it says whose words they are,
+ *   and when rounds searched different words, that these are the newest. Once
+ *   the person types, the box is theirs.
+ * - The grid shows the search of the words in the box. When the record has no
+ *   search of the newest round's words, opening the tab runs that one search
+ *   (free, at most once per workspace and words; an identical search is
+ *   answered from the record by both servers). Every search asks for the most
+ *   one search returns.
+ * - 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 here starts
+ *   a round: Generate does, through the same request as Generate more.
  */
-export const SLATE_UI_INSPIRATION = String.raw `
+const SEARCH_AND_SELECTION = String.raw `
   var MAX_SELECTED = 8;
+  var SEARCH_COUNT = ${JSON.stringify(SLATE_INSPIRATION_SEARCH_COUNT)};
+  var QUERY_CHARS = ${JSON.stringify(SLATE_INSPIRATION_QUERY_CHARS)};
+  // Per workspace: whether the person typed in the box, the search the grid shows, the automatic searches already asked.
+  state.insp.runDir = null;
+  state.insp.typed = false;
+  state.insp.shownQuery = null;
+  state.insp.searchId = "";
+  state.insp.auto = {};
+  state.insp.generating = false;
 
   // 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) {
+    tabs.setAttribute("aria-label", t("title"));
+    [["designs", t("tabDesigns")], ["inspiration", t("tabInspiration")]].forEach(function (t) {
       var b = button(t[1], "tab");
       b.setAttribute("role", "tab");
       b.setAttribute("data-tab", t[0]);
@@ -49,9 +85,10 @@ export const SLATE_UI_INSPIRATION = String.raw `
     var m = refMeta(id);
     return String((m && m.description) || id).slice(0, 40);
   }
-  function refName(id) { return COPY.referencePrefix + refDescription(id); }
+  function refName(id) { return t("referenceName", { description: refDescription(id) }); }
+  function searchList() { return (state.view.inspiration && state.view.inspiration.searches) || []; }
   function newestSearch() {
-    var searches = (state.view.inspiration && state.view.inspiration.searches) || [];
+    var searches = searchList();
     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;
@@ -59,11 +96,91 @@ export const SLATE_UI_INSPIRATION = String.raw `
     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 : ""); }
+    if (round.kind === "new") return t("newOptionsTitle");
+    if (round.kind === "like") { var from = ver(round.fromVersionId); return t("likeTitle", { label: from ? from.label : "" }); }
     return "";
   }
 
+  // ---- whose words are in the box ----
+  // Two sets of words are the same search when both servers would key them alike: whitespace collapsed, case ignored.
+  function norm(text) { return String(text || "").replace(/\s+/g, " ").trim().toLowerCase(); }
+  function collapsed(text) { return String(text || "").replace(/\s+/g, " ").trim(); }
+  // What one search can take of these words: all of them, or the first QUERY_CHARS characters, cut at the last space.
+  function searchable(text) {
+    var chars = Array.from(collapsed(text));
+    if (chars.length <= QUERY_CHARS) return chars.join("");
+    var cut = chars.slice(0, QUERY_CHARS).join("");
+    var space = cut.lastIndexOf(" ");
+    return (chars[QUERY_CHARS] === " " || space < 0 ? cut : cut.slice(0, space)).trim();
+  }
+  function tooLong(text) { return Array.from(collapsed(text)).length > QUERY_CHARS; }
+  // The newest round's search words, the rounds that searched them, and the rounds that searched other words.
+  function roundWords() {
+    var queries = (state.view.inspiration && state.view.inspiration.roundQueries) || [];
+    if (queries.length === 0) return null;
+    var latest = queries.reduce(function (a, b) { return b.roundIndex > a.roundIndex ? b : a; });
+    var key = norm(latest.query);
+    var byIndex = function (a, b) { return a - b; };
+    return {
+      query: latest.query,
+      same: queries.filter(function (q) { return norm(q.query) === key; }).map(function (q) { return q.roundIndex; }).sort(byIndex),
+      other: queries.filter(function (q) { return norm(q.query) !== key; }).map(function (q) { return q.roundIndex; }).sort(byIndex)
+    };
+  }
+  function defaultQuery() {
+    var words = roundWords();
+    if (words) return words.query;
+    var newest = newestSearch();
+    return newest ? newest.query : "";
+  }
+  function howText() {
+    var shown = norm(state.query);
+    if (!shown) return "";
+    var words = roundWords();
+    var line = "";
+    if (words && norm(words.query) === shown) {
+      line = words.other.length === 0
+        ? t("queryFrom", { count: words.same.length, rounds: listOf(words.same) })
+        : t("queryNewestOthers", { count: words.same.length, rounds: listOf(words.same), otherCount: words.other.length, others: listOf(words.other) });
+    } else {
+      var newest = newestSearch();
+      if (!state.insp.typed && newest && norm(newest.query) === shown) line = t("queryLastSearch");
+    }
+    if (tooLong(state.query)) line = sentences(line, t("queryCut", { n: QUERY_CHARS }));
+    return line;
+  }
+  // A new workspace starts clean; until the person types, the box follows the workspace's own words, and the grid with it.
+  function syncQuery() {
+    var v = state.view;
+    var i = state.insp;
+    if (i.runDir !== v.runDir) {
+      i.runDir = v.runDir;
+      i.typed = false;
+      i.shownQuery = null;
+      i.searchId = "";
+      i.noMatch = "";
+    }
+    if (i.typed) return;
+    var words = defaultQuery();
+    if (norm(words) !== norm(state.query)) { i.shownQuery = null; i.searchId = ""; }
+    state.query = words;
+  }
+
+  // ---- the search the grid shows: the one the person ran, else the record's search of the words in the box ----
+  function findSearch(words) {
+    var key = norm(words);
+    var hit = null;
+    searchList().forEach(function (s) { if (norm(s.query) === key) hit = s; });
+    return hit;
+  }
+  function shownSearch() {
+    var i = state.insp;
+    var ran = i.searchId ? searchList().filter(function (s) { return s.searchId === i.searchId; })[0] : null;
+    if (ran) return ran;
+    var words = i.shownQuery !== null ? i.shownQuery : defaultQuery();
+    return words ? findSearch(searchable(words)) : newestSearch();
+  }
+
   // ---- the status line of this tab ----
   function setInspStatus(text, kind) {
     var nodes = document.querySelectorAll("[data-istatus]");
@@ -73,11 +190,13 @@ export const SLATE_UI_INSPIRATION = String.raw `
 
   // ---- selection: optimistic, serialized, last write wins ----
   function toggleRef(id) {
+    // While a round waits for the person, a tile is a reference for that round, not the selection for a later one.
+    if (pauseActive()) { togglePauseRef(id); return; }
     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; }
+      if (cur.length >= MAX_SELECTED) { setInspStatus(t("eightAtMost"), ""); return; }
       cur.push(id);
     }
     setInspStatus("", "");
@@ -118,119 +237,41 @@ export const SLATE_UI_INSPIRATION = String.raw `
     if (pane.__search) pane.__search.disabled = !state.query.trim() || state.insp.searching;
   }
   function doSearch() {
-    var q = state.query.trim();
+    var q = searchable(state.query);
     if (!q || state.insp.searching || !state.view) return;
-    state.insp.searching = true;
-    state.insp.noMatch = "";
-    setInspStatus(COPY.searching, "");
+    runSearch(q);
+  }
+  function runSearch(q) {
+    var i = state.insp;
+    i.searching = true;
+    i.noMatch = "";
+    setInspStatus(t("searching"), "");
     renderAll();
-    callTool(TOOLS.inspire, { runDir: state.view.runDir, query: q }).then(function (result) {
+    callTool(TOOLS.inspire, { runDir: state.view.runDir, query: q, count: SEARCH_COUNT }).then(function (result) {
       var sc = result.structuredContent || {};
+      // The grid shows what this search found from now on, even when the view's newest search is another one.
+      if (sc.search) { i.searchId = sc.search.searchId; i.shownQuery = sc.search.query; }
       if (sc.view) applyView(sc.view, true);
       setInspStatus("", "");
       var found = sc.search || newestSearch();
-      if (found && found.referenceIds.length === 0) state.insp.noMatch = found.searchId;
+      if (found && found.referenceIds.length === 0) i.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(); });
+      setInspStatus(err.code === "rate_limited" && err.retryAfterSeconds !== undefined ? t("tryAgain", { n: err.retryAfterSeconds }) : t("searchFailed", { message: errText(err) }), "err");
+    }).then(function () { i.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);
+  // Opening the tab shows the newest round's words with their results: when the record has none, it asks once.
+  function autoSearch() {
     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");
+    var i = state.insp;
+    if (!v || !v.runDir || i.searching || i.typed || !visible()) return;
+    var words = roundWords();
+    var q = words ? searchable(words.query) : "";
+    if (!q || findSearch(q)) return;
+    var key = v.runDir + "\n" + norm(q);
+    if (i.auto[key]) return;
+    i.auto[key] = true;
+    runSearch(q);
   }
 `;
+export const SLATE_UI_INSPIRATION = `${SEARCH_AND_SELECTION}\n${SLATE_UI_INSPIRATION_COLLAGE}\n${SLATE_UI_INSPIRATION_GRID}`;
 //# sourceMappingURL=mcp-slate-ui-script-inspiration.js.map

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAC5F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,uBAAuB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;uBAEhB,IAAI,CAAC,SAAS,CAAC,8BAA8B,CAAC;sBAC/C,IAAI,CAAC,SAAS,CAAC,6BAA6B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOlE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,oBAAoB,KAAK,4BAA4B,KAAK,yBAAyB,EAAE,CAAC"}