@12ui/design 0.2.79 → 0.2.81

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

@@ -1,116 +1,21 @@
 /**
- * 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 Inspiration tab's page, the same in the card and the workspace: one status line (what went wrong, when anything
+ * did), the gallery of the search's results, and the tray. The search itself is the prompt card above the tabs.
  *
- * - 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.
+ * - The gallery (mcp-slate-ui-script-inspiration-gallery.ts) shows the search the grid follows, a page at a time as
+ *   the person scrolls; the first search of a workspace without one shows skeleton tiles until it lands, and a new
+ *   search keeps the old results, dimmed, until the new ones arrive.
+ * - The tray holds the picks the next drawing uses, so they stay in sight whatever the grid shows: a small picture of
+ *   each (a click takes it out) and the one action (how many is said once, in the tab row). While a round waits for its references the picks are
+ *   that round's, the action is Continue and the countdown shows beside it; otherwise the picks are the selection and
+ *   the action is Generate: one new round drawn from exactly them, Generate more's own request (`startRound`, which
+ *   first waits for the selection write), drawing the panel's default count, or the next count up when more are
+ *   picked, so every pick is drawn from at least once. Either way the screen then moves on to Designs.
+ * - In the card the results scroll inside themselves (the host grows the frame and never scrolls the thread, so a long
+ *   page would push the card out of sight) and the tray sits under them; in the workspace the page scrolls and the tray
+ *   sticks to the bottom of the window.
  */
 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);
@@ -126,24 +31,69 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
     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();
+      if (state.tab !== "designs") 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;
+
+  // ---- the tray: the picks, how many, and the one action ----
+  function trayPick(id) {
+    var b = button("", "traypick", function () { toggleRef(id); });
+    b.setAttribute("aria-label", t("removeReference", { name: refName(id) }));
+    b.title = t("removeReference", { name: refName(id) });
+    b.setAttribute("data-pick", id);
+    var item = refItem(id);
+    var img = el("img", "thumb");
+    img.alt = "";
+    if (item.thumbUrl) img.src = item.thumbUrl; else item.load(img, "thumb");
+    b.appendChild(img);
+    var x = el("span", "trayx");
+    x.innerHTML = glyph(GLYPH.close, 16, 3);
+    b.appendChild(x);
+    return b;
+  }
+  // Continue, from either pane, lets the round go and shows its options drawing, as Generate does.
+  function trayGo() {
+    if (pauseActive()) setTab("designs"); else generateFromSelection();
+  }
+  // The tray of a pane (Inspiration, References): the same picks, count, countdown and action in both.
+  function buildTray(pane) {
+    var tray = el("div", "tray hidden");
+    var picks = el("div", "traypicks");
+    var clock = el("span", "trayclock");
+    clock.setAttribute("data-pause-clock", "");
+    clock.setAttribute("role", "timer");
+    var go = button("", "primary", trayGo);
+    tray.appendChild(picks);
+    tray.appendChild(clock);
+    tray.appendChild(el("span", "spacer"));
+    tray.appendChild(go);
+    pane.__tray = tray;
+    pane.__trayPicks = picks;
+    pane.__trayGo = go;
+    return tray;
+  }
+  function syncTray(pane) {
+    var picks = activeSelection();
+    var waiting = pauseActive();
+    pane.__tray.classList.toggle("hidden", !waiting && picks.length === 0);
+    setIfChanged(pane.__trayPicks, JSON.stringify(picks), function (node) { picks.forEach(function (id) { node.appendChild(trayPick(id)); }); });
+    pane.__trayGo.textContent = waiting ? t("continueRound") : t("generate");
+    if (waiting) {
+      pane.__trayGo.setAttribute("data-continue", "");
+      pane.__trayGo.disabled = pause.sending || picks.length === 0;
+      pane.__trayGo.removeAttribute("title");
+      return;
+    }
+    pane.__trayGo.removeAttribute("data-continue");
     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;
+    pane.__trayGo.disabled = state.insp.generating || running || !local.ready;
+    var why = running ? t("roundRunning") : !local.ready ? localReason() : "";
+    if (why) pane.__trayGo.title = why; else pane.__trayGo.removeAttribute("title");
   }
 
   // ---- the tab ----
@@ -151,95 +101,73 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
     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);
+    var results = el("div", "results");
+    var gallery = createGallery({
+      where: where,
+      root: function () { return where === "card" ? results : null; },
+      isSelected: function (id) { return activeSelection().indexOf(id) >= 0; },
+      onToggle: toggleRef
+    });
+    var skeleton = el("div", "skelgrid");
+    var empty = el("div", "placeholder");
+    results.appendChild(skeleton);
+    results.appendChild(gallery.node);
+    pane.__results = results;
+    pane.__gallery = gallery;
+    pane.__skeleton = skeleton;
+    pane.__empty = empty;
     pane.appendChild(status);
-    pane.appendChild(count);
-    pane.appendChild(pane.__results);
-    pane.appendChild(bar);
-    pane.appendChild(pauseChoice);
-    pane.appendChild(pauseHost);
+    pane.appendChild(results);
+    pane.appendChild(buildTray(pane));
     // 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);
+    new ResizeObserver(function () { gallery.layout(); }).observe(results);
   }
-  function syncHow(pane) {
-    var text = howText();
-    pane.__how.textContent = text;
-    pane.__how.classList.toggle("hidden", !text);
+  // What the grid lists, in order, and the key that names the list: a waiting round's own references first (fixed for
+  // the whole wait, so a click never moves a tile), then the search the grid follows; a workspace with no search yet
+  // lists the references its rounds used, newest round first.
+  function gridList() {
+    var ids = [];
+    var add = function (id) { if (ids.indexOf(id) < 0) ids.push(id); };
+    var waiting = pauseRound();
+    if (waiting) waiting.referenceIds.forEach(add);
+    var search = shownSearch();
+    if (search) search.referenceIds.forEach(add);
+    else state.view.rounds.slice().sort(function (a, b) { return b.index - a.index; }).forEach(function (r) { r.referenceIds.forEach(add); });
+    var key = [state.view.runDir, search ? search.searchId : "rounds", waiting ? waiting.roundId + "=" + waiting.referenceIds.join(",") : "",
+      search ? "" : state.view.rounds.map(function (r) { return r.referenceIds.join(","); }).join("|")].join(":");
+    return { ids: ids, key: key, search: search };
   }
   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);
+    syncSearchRun();
+    var list = gridList();
+    var searching = state.insp.searching;
+    var has = list.ids.length > 0;
+    pane.__results.setAttribute("aria-busy", searching ? "true" : "false");
+    // A search in flight dims what is there until its results arrive; with nothing there yet, skeleton tiles hold the place.
+    pane.classList.toggle("searching", searching && has);
+    var skeleton = searching && !has;
+    if (skeleton !== !!pane.__skeleton.firstChild) {
+      pane.__skeleton.textContent = "";
+      if (skeleton) for (var s = 0; s < 12; s++) pane.__skeleton.appendChild(el("div", "skeleton shimmer"));
+    }
+    var noMatch = !!list.search && list.search.referenceIds.length === 0 && state.insp.noMatch === list.search.searchId;
+    var emptyText = searching ? "" : noMatch ? t("inspirationNoMatches") : has ? "" : t("inspirationEmpty");
+    // The line is in the results only while it says something.
+    pane.__empty.textContent = emptyText;
+    if (emptyText && !pane.__empty.parentNode) pane.__results.insertBefore(pane.__empty, pane.__gallery.node);
+    else if (!emptyText && pane.__empty.parentNode) pane.__empty.parentNode.removeChild(pane.__empty);
+    pane.__gallery.node.classList.toggle("hidden", !has);
+    if (has) pane.__gallery.set(list.key, list.ids.map(refItem));
+    pane.__gallery.layout();
+    pane.__gallery.sync();
+    syncTray(pane);
     autoSearch();
   }
 `;

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JlD,CAAC"}

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

@@ -1,14 +1,13 @@
 /**
- * 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.
+ * How many references one Inspiration search asks for, per server: the hosted server's searches carry a depth grant
+ * and return a window the grid reveals a page at a time as the person scrolls (`SLATE_LIMITS.searchCountMax` there);
+ * the local plugin asks the public tier, which returns at most 24.
  */
+export declare const SLATE_INSPIRATION_SEARCH_COUNT: {
+    readonly remote: 96;
+    readonly local: 24;
+};
+/** The longest words one search takes, in characters (code points): both servers' inspire tools refuse longer. */
 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":"AAIA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,KAA0B,CAAC;AAEtE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAuQjD,eAAO,MAAM,oBAAoB,QAA2F,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B;;;CAA0D,CAAC;AAEtG,kHAAkH;AAClH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AA6VjD,eAAO,MAAM,oBAAoB,QAAkI,CAAC"}