@12ui/design 0.2.79 → 0.2.81

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

@@ -1,13 +1,7 @@
 /**
- * The inline card: one large image of the selected option with a badge,
- * Select under it, and the strip of thumbnails (the newest round, plus the
- * picked or viewed option of an older round) on as many rows as it takes,
- * ending with the Generate more tile; an icon-only control opens the
- * workspace. There is no status line: an option being drawn shimmers, one
- * that failed or stopped says why on its tile, and an error about a click
- * shows beside Select. Also the view application, the large image and the
- * thumbnail buttons shared with the workspace, and the tool-result entry
- * point.
+ * The inline card: the tabs and an icon-only control that opens the workspace, then the Designs tab
+ * (mcp-slate-ui-script-designs.ts) or Inspiration. An error about a click shows in one line under the tab. Also the
+ * view application, the render switch between card and workspace, and the tool-result entry point.
  */
 export const SLATE_UI_INLINE = String.raw `
   // ---- apply a view: selection, announcements, polling, render ----
@@ -17,24 +11,14 @@ export const SLATE_UI_INLINE = String.raw `
     var prev = state.view;
     if (prev && prev.runDir !== view.runDir) {
       state.sel = { candidateId: null, versionId: null, followLatest: true };
-      state.dialog = null;
-      resetMore();
+      state.lv = null;
       state.insp.local = null;
-      state.awaitEdit = null;
       pickRestored = null;
     }
     if (prev) announceSettled(prev, view);
     else view.ops.forEach(function (op) { state.lastOpStates[op.opId] = op.state; });
     if (!prev || prev.stamp !== view.stamp) poll.step = 0;
     state.view = view;
-    // An edit that was just applied is shown the moment its version exists.
-    if (state.awaitEdit) {
-      var edited = cand(state.awaitEdit.candidateId);
-      if (edited && edited.versionIds.length > state.awaitEdit.count) {
-        state.sel = { candidateId: edited.candidateId, versionId: edited.latestVersionId, followLatest: true };
-        state.awaitEdit = null;
-      }
-    }
     syncStaleLine(view);
     syncPause();
     if (view.pick && pickRestored !== view.runDir) {
@@ -56,24 +40,22 @@ export const SLATE_UI_INLINE = String.raw `
     $("app").classList.toggle("hidden", full);
     $("stage").classList.toggle("hidden", !full);
     if (full) renderStage(); else renderInline();
-    // A dialog that is open follows the view: what this Mac can do now, for one.
-    if (state.dialog) updateDialogUi();
-    syncMore();
+    syncBrief();
     if (pause.opId) syncPauseBars();
     reportSize();
   }
 
-  // A new language: every container is built again in it on the next render. An open dialog and the Generate more panel
-  // close, because they were built in the old words; what the person typed in the search box stays (state.query).
+  // A new language: every container is built again in it on the next render, because each was built in the old words;
+  // what the person typed in the prompt stays (state.brief).
   function relocalizeView() {
-    if (state.dialog) { state.dialog = null; if (stageEls.dialog) stageEls.dialog.textContent = ""; }
-    if (state.more) resetMore();
-    $("hero").__sig = null;
-    $("strip").__sig = null;
+    if (state.lv) state.lv.built = null;
+    $("designs").__sig = null;
     $("pausebar").__pause = null;
-    var pane = $("pane-inspiration");
-    pane.__built = false;
-    pane.textContent = "";
+    ["pane-inspiration", "pane-references"].forEach(function (id) {
+      var pane = $(id);
+      pane.__built = false;
+      pane.textContent = "";
+    });
     stageBuilt = false;
   }
 
@@ -86,7 +68,6 @@ export const SLATE_UI_INLINE = String.raw `
     return true;
   }
 
-  // ---- the large image, shared by the card and the workspace ----
   function pickable(version) { return !!version && version.fileState === "ok"; }
   // Why an option has no picture to show, or "" when it has one. One being drawn is named; the shimmer says the rest.
   function optionNote(c) {
@@ -98,95 +79,6 @@ export const SLATE_UI_INLINE = String.raw `
     if (v && v.fileState === "changed") return t("fileChanged");
     return "";
   }
-  // The full picture jumps the queue; while it loads, the thumbnail (already fetched) stands in.
-  function heroInto(wrap, c, v) {
-    wrap.textContent = "";
-    wrap.classList.remove("note");
-    wrap.style.removeProperty("--ar");
-    // The workspace's action row is as wide as the picture, so Select sits under its right edge: the shared parent carries the ratio too.
-    var shared = wrap.parentElement;
-    if (shared) shared.style.removeProperty("--ar");
-    if (!c) return;
-    var waitingRef = !v ? pausedRef(c) : null;
-    if (waitingRef) { pausedHeroInto(wrap, shared, c, waitingRef); return; }
-    if (!v || v.fileState !== "ok") {
-      wrap.classList.add("note");
-      var reason = !v ? optionNote(c) : v.fileState === "changed" ? t("fileChanged") : t("fileMissing");
-      wrap.appendChild(el("div", "heronote" + (drawing(c) ? " shimmer" : ""), reason));
-      return;
-    }
-    wrap.style.setProperty("--ar", String(v.width / v.height));
-    if (shared) shared.style.setProperty("--ar", String(v.width / v.height));
-    var img = el("img", "heroimg empty");
-    img.alt = t("versionName", { label: v.label });
-    img.setAttribute("draggable", "false");
-    wrap.appendChild(img);
-    bindImage(img, v, "full", true);
-    var cached = state.thumbs[imageKey(v, "thumb")];
-    if (cached) img.src = cached;
-    wrap.appendChild(el("span", "badge", v.label));
-    if (c.busy) wrap.appendChild(progressBar());
-  }
-  // An option of a round that waits for the person: the reference it will be drawn from, at that picture's ratio, named.
-  function pausedHeroInto(wrap, shared, c, referenceId) {
-    var meta = refMeta(referenceId);
-    var ratio = meta && meta.width > 0 && meta.height > 0 ? meta.width / meta.height : ratioOf(c);
-    wrap.style.setProperty("--ar", String(ratio));
-    if (shared) shared.style.setProperty("--ar", String(ratio));
-    var img = el("img", "heroimg empty");
-    img.alt = t("pauseDrawsFrom", { label: c.label });
-    img.setAttribute("draggable", "false");
-    wrap.appendChild(img);
-    fillImage(img, wantReference(referenceId, "thumb", true));
-    wrap.appendChild(el("span", "badge", t("pauseReferenceFor", { label: c.label })));
-  }
-  function heroSignature(c, v) {
-    return JSON.stringify([state.sel, v && [v.sha256, v.fileState, v.label], c && [c.state, c.error, c.busy, drawing(c), optionNote(c), pausedRef(c)]]);
-  }
-
-  // ---- a thumbnail button for an option: the strip in the card, the selection in the workspace ----
-  // The tile has the option's own ratio. With a picture it holds the picture (an <img> only once there is a file to
-  // show); being drawn it shimmers; without a picture otherwise it says why on the tile. Its code is always on it.
-  function thumbButton(c, cls) {
-    var b = button("", cls);
-    var selected = state.sel.candidateId === c.candidateId;
-    b.setAttribute("aria-label", optionName(c));
-    b.setAttribute("aria-pressed", selected ? "true" : "false");
-    if (selected) b.classList.add("selected");
-    b.setAttribute("data-option", c.label);
-    b.style.setProperty("--ar", String(ratioOf(c)));
-    var v = latestVersion(c);
-    var waitingRef = pausedRef(c);
-    if (drawing(c)) b.classList.add("shimmer");
-    else if (waitingRef) {
-      // Not drawn yet: the tile shows the reference this option will be drawn from.
-      b.classList.add("paused");
-      b.title = t("pauseDrawsFrom", { label: c.label });
-      var ref = el("img", "thumb empty");
-      ref.alt = "";
-      b.appendChild(ref);
-      bindReference(ref, waitingRef, "thumb");
-    } else if (c.state === "ready" && v && v.fileState === "ok") {
-      var img = el("img", "thumb empty");
-      img.alt = "";
-      b.appendChild(img);
-      bindImage(img, v, "thumb", false);
-    } else {
-      var note = optionNote(c);
-      b.title = note;
-      b.classList.add(c.state === "pending" ? "stopped" : "failed");
-      var words = el("span", "tilenote");
-      words.appendChild(el("span", "", note));
-      b.appendChild(words);
-    }
-    b.appendChild(el("b", "code", c.label));
-    b.addEventListener("click", function () { selectCandidate(c.candidateId); });
-    return b;
-  }
-  function thumbSignature(c) {
-    var lv = latestVersion(c);
-    return [c.candidateId, c.state, c.error, c.latestVersionId, c.versionIds.length, lv ? lv.fileState : "", drawing(c), optionNote(c), ratioOf(c), pausedRef(c)];
-  }
 
   function renderInline() {
     var v = state.view;
@@ -197,49 +89,31 @@ export const SLATE_UI_INLINE = String.raw `
     if (empty) { reportSize(); return; }
     syncTabs();
     var onDesigns = state.tab === "designs";
-    $("pane-designs").classList.toggle("hidden", !onDesigns);
-    $("pane-inspiration").classList.toggle("hidden", onDesigns);
+    // A host without fullscreen opens the large view in the card, in place of the tab.
+    var viewing = !!state.lv;
+    $("pane-designs").classList.toggle("hidden", !onDesigns || viewing);
+    $("pane-inspiration").classList.toggle("hidden", state.tab !== "inspiration" || viewing);
+    $("pane-references").classList.toggle("hidden", state.tab !== "references" || viewing);
+    $("viewer").classList.toggle("hidden", !viewing);
+    renderViewer();
     syncPauseHost($("pausebar"), true);
     if (!onDesigns) {
-      renderInspiration($("pane-inspiration"), "card");
+      if (state.tab === "references") renderReferences($("pane-references"), "card");
+      else renderInspiration($("pane-inspiration"), "card");
       syncControls();
       reportSize();
       return;
     }
-    var c = selectedCandidate();
-    var sel = selectedVersion();
-    setIfChanged($("hero"), heroSignature(c, sel), function (node) { heroInto(node, c, sel); });
-    var strip = $("strip");
-    // Where keyboard focus sits among the strip's buttons (the thumbnails and the tile), so a rebuild can put it back.
-    var focusAt = strip.contains(document.activeElement) ? Array.prototype.indexOf.call(strip.querySelectorAll("button"), document.activeElement) : -1;
-    var options = inlineCandidates();
-    var rebuilt = setIfChanged(strip, JSON.stringify([state.sel.candidateId, options.map(thumbSignature)]), function (node) {
-      options.forEach(function (x) { node.appendChild(thumbButton(x, "thumbbtn")); });
-      // The strip wraps onto as many rows as it needs, so the Generate more tile, last, is always in view after the options.
-      node.appendChild(moreTile());
-      setShape(node, ratioOf(options[0]));
-    });
-    // Choosing a thumbnail rebuilds the strip: keep keyboard focus at the same place in it.
-    var stripButtons = strip.querySelectorAll("button");
-    if (rebuilt && focusAt >= 0 && stripButtons[focusAt]) stripButtons[focusAt].focus();
+    renderDesigns($("designs"), "card");
     syncControls();
     reportSize();
   }
 
   function syncControls() {
-    if (!state.view) return;
-    var v = selectedVersion();
-    var same = samePick(v);
-    var label = same ? t("selected") : t("select");
-    var disabled = !(pickable(v) && !state.busy && !same);
-    if (!isFullscreen()) {
-      var expand = $("expand");
-      expand.classList.toggle("hidden", !canFullscreen());
-      expand.disabled = state.view.candidates.length === 0;
-      $("select").disabled = disabled;
-      $("select").textContent = label;
-    }
-    if (typeof syncStageControls === "function") syncStageControls(label, disabled);
+    if (!state.view || isFullscreen()) return;
+    var expand = $("expand");
+    expand.classList.toggle("hidden", !canFullscreen());
+    expand.disabled = state.view.candidates.length === 0;
   }
 
   function expandWorkspace() {
@@ -251,7 +125,6 @@ export const SLATE_UI_INLINE = String.raw `
   }
 
   $("expand").addEventListener("click", expandWorkspace);
-  $("select").addEventListener("click", function () { doSelect(selectedVersion()); });
 
   // ---- tool result: the workspace ----
   function onToolResult(result) {

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

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

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

@@ -1,20 +1,21 @@
 /**
- * The Inspiration tab's collage: every grid of reference tiles (and the skeleton tiles of a search in flight) is laid
- * out by the 12ui web gallery's own mosaic band solver, `packMosaicBands` from `mosaic-bands.ts`, whose source is
- * embedded here as is. Each picture keeps its aspect ratio (from the reference's recorded width and height, else its
- * recorded aspect, by the solver's own rule) and every band is exactly as wide as the grid.
+ * The gallery's collage: every page of picture tiles is laid out by the 12ui web gallery's own mosaic band solver,
+ * `packMosaicBands` from `mosaic-bands.ts`, whose source is embedded here as is. Each picture keeps its aspect ratio
+ * (from the reference's recorded width and height, else its recorded aspect, by the solver's own rule) and every band
+ * is exactly as wide as the grid.
  *
  * Only the packing is the screen's (the gallery's is sized for cards with an action strip on a whole page):
  *
- * - a band plans its pictures at least 192 px across in the card and 256 px in the workspace (the old square tiles'
- *   minimums), two across at the least, and holds at most four columns; the gap is 8 px, room for a selected tile's
- *   ring;
- * - a section with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a round
- *   with one reference shows one tile, not one picture as wide as the pane.
+ * - a band plans its pictures at least 220 px across in the card and 300 px in the workspace, two across at the least,
+ *   and holds at most four columns: fairly large thumbnails; the gap is a generous 16 px;
+ * - a page with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a short list
+ *   shows tiles of the usual size, not one picture as wide as the pane.
  *
- * The grid is measured, so it is laid out after it is built and again whenever the pane's width changes (a window
- * resize, the card's scroll bar, the tab shown again). Tiles stay in result order in the document, so the keyboard
- * walks them in the order the search ranked them.
+ * Each full page is its own block, so revealing the next page never moves a tile already on screen; a short last page
+ * takes what joins it (sites arriving one by one), so its rows fill. A block is measured, so
+ * it is laid out after it is built and again whenever its width changes (a window resize, the card's scroll bar, the
+ * tab shown again). Tiles stay in result order in the document, so the keyboard walks them in the order the search
+ * ranked them. Each picture is told its laid-out width (`sizes`), so the browser picks the rendition that fills it.
  */
 export declare const SLATE_UI_INSPIRATION_COLLAGE: string;
 //# sourceMappingURL=mcp-slate-ui-script-inspiration-collage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,4BAA4B,QA+CxC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,4BAA4B,QA8CxC,CAAC"}

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

@@ -1,26 +1,27 @@
 import { packMosaicBands } from './mosaic-bands.js';
 /**
- * The Inspiration tab's collage: every grid of reference tiles (and the skeleton tiles of a search in flight) is laid
- * out by the 12ui web gallery's own mosaic band solver, `packMosaicBands` from `mosaic-bands.ts`, whose source is
- * embedded here as is. Each picture keeps its aspect ratio (from the reference's recorded width and height, else its
- * recorded aspect, by the solver's own rule) and every band is exactly as wide as the grid.
+ * The gallery's collage: every page of picture tiles is laid out by the 12ui web gallery's own mosaic band solver,
+ * `packMosaicBands` from `mosaic-bands.ts`, whose source is embedded here as is. Each picture keeps its aspect ratio
+ * (from the reference's recorded width and height, else its recorded aspect, by the solver's own rule) and every band
+ * is exactly as wide as the grid.
  *
  * Only the packing is the screen's (the gallery's is sized for cards with an action strip on a whole page):
  *
- * - a band plans its pictures at least 192 px across in the card and 256 px in the workspace (the old square tiles'
- *   minimums), two across at the least, and holds at most four columns; the gap is 8 px, room for a selected tile's
- *   ring;
- * - a section with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a round
- *   with one reference shows one tile, not one picture as wide as the pane.
+ * - a band plans its pictures at least 220 px across in the card and 300 px in the workspace, two across at the least,
+ *   and holds at most four columns: fairly large thumbnails; the gap is a generous 16 px;
+ * - a page with fewer pictures than a row holds is as wide as those pictures would be in a full row, so a short list
+ *   shows tiles of the usual size, not one picture as wide as the pane.
  *
- * The grid is measured, so it is laid out after it is built and again whenever the pane's width changes (a window
- * resize, the card's scroll bar, the tab shown again). Tiles stay in result order in the document, so the keyboard
- * walks them in the order the search ranked them.
+ * Each full page is its own block, so revealing the next page never moves a tile already on screen; a short last page
+ * takes what joins it (sites arriving one by one), so its rows fill. A block is measured, so
+ * it is laid out after it is built and again whenever its width changes (a window resize, the card's scroll bar, the
+ * tab shown again). Tiles stay in result order in the document, so the keyboard walks them in the order the search
+ * ranked them. Each picture is told its laid-out width (`sizes`), so the browser picks the rendition that fills it.
  */
 export const SLATE_UI_INSPIRATION_COLLAGE = String.raw `
   // ---- the collage: the web gallery's mosaic bands (packages/12ui/src/mosaic-bands.ts) ----
   var packMosaicBands = (${packMosaicBands.toString()});
-  var COLLAGE = { min: { card: 192, stage: 256 }, gap: 8, columns: 4 };
+  var COLLAGE = { min: { card: 220, stage: 300 }, gap: 16, columns: 4 };
   // How a grid of this many pictures packs at this width: the width it takes and the band packing.
   function collagePacking(count, width, where) {
     var gap = COLLAGE.gap;
@@ -32,36 +33,35 @@ export const SLATE_UI_INSPIRATION_COLLAGE = String.raw `
     }
     return { width: width, packing: { columns: Math.min(across, COLLAGE.columns), across: across, gap: gap } };
   }
-  // A tile's shape: the reference's recorded aspect and size, or a 16:10 landscape for a skeleton tile.
-  function collageShape(node, referenceId) {
-    var meta = referenceId && state.view.references ? state.view.references[referenceId] : null;
-    node.__shape = meta ? { aspect: meta.aspect, width: meta.width, height: meta.height } : { aspect: "landscape", width: null, height: null };
-  }
   function layoutGrid(grid, where, width) {
     var tiles = grid.children;
     var items = [];
     for (var i = 0; i < tiles.length; i++) {
-      var shape = tiles[i].__shape;
+      var shape = tiles[i].__shape || { aspect: "landscape", width: null, height: null };
       items.push({ id: String(i), aspect: shape.aspect, width: shape.width, height: shape.height });
     }
     var plan = collagePacking(items.length, width, where);
     var layout = packMosaicBands(items, plan.width, plan.packing, 0);
     layout.placements.forEach(function (p) {
-      var s = tiles[Number(p.id)].style;
+      var tile = tiles[Number(p.id)];
+      var s = tile.style;
       s.left = p.left + "px";
       s.top = p.top + "px";
       s.width = p.width + "px";
       s.height = p.height + "px";
+      var img = tile.querySelector("img");
+      if (img) img.sizes = Math.ceil(p.width) + "px";
     });
     grid.style.height = layout.height + "px";
     grid.__laidAt = width;
   }
-  // Lays out every grid in the pane that has a width and was not laid out at it (a hidden pane has none: it is laid out when shown).
-  function layoutResults(pane) {
-    var grids = pane.__results.querySelectorAll(".refgrid");
+  // Lays out every block under the node that has a width and was not laid out at it (a hidden pane has none: it is
+  // laid out when shown).
+  function layoutBlocks(node, where) {
+    var grids = node.querySelectorAll(".refgrid");
     for (var i = 0; i < grids.length; i++) {
       var width = grids[i].getBoundingClientRect().width;
-      if (width > 0 && grids[i].__laidAt !== width) layoutGrid(grids[i], pane.__where, width);
+      if (width > 0 && grids[i].__laidAt !== width) layoutGrid(grids[i], where, width);
     }
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;2BAE3B,eAAe,CAAC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CpD,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-collage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-collage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;2BAE3B,eAAe,CAAC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CpD,CAAC"}

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

@@ -0,0 +1,23 @@
+/**
+ * The picture gallery and its large view: the Inspiration grid, and the References grid (lane W1) reuses both.
+ *
+ * `createGallery({ where, root, isSelected, onToggle })` returns `{ node, set(key, items), sync(), layout() }`.
+ *
+ * - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load? }`:
+ *   `thumbUrl` for the tile and `imageUrl` for the large view, straight from their origin (`srcset` lets the browser
+ *   pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no URL.
+ * - `set(key, items)`: a new key is a new list (the tiles are built again from the top); the same key with a longer
+ *   list only adds what is new at the end. The first page shows at once and the next page appears as the person nears
+ *   the end of the grid (an IntersectionObserver on a marker after the last block, under `root()`, the element that
+ *   scrolls the grid, or the window), until the list ends. Each page is its own collage block, so nothing already on
+ *   screen ever moves: not on a click, not when a page is added.
+ * - A click toggles the tile (`onToggle`); `sync()` sets every tile's pressed state in place, without a rebuild. A
+ *   selected tile carries a ring hugging the picture and a check in its corner.
+ * - The expand control in a tile's corner, or a double click, opens the large view: the picture as large as the frame
+ *   allows, previous and next, Select or Selected, Open site for an item with a `sourceUrl`, and close; Escape closes
+ *   it, the arrow keys step through the list.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export declare const SLATE_UI_INSPIRATION_GALLERY: string;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration-gallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,4BAA4B,QAsMxC,CAAC"}