@12ui/design 0.2.82 → 0.2.83

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

@@ -8,31 +8,37 @@
  * - Edit: draw on the design (the scribble layer, mcp-slate-ui-script-scribble.ts; the view fits the design while
  *   drawing) and/or type a change, then Enter. The edit runs at once and the view closes onto the Designs tab, where
  *   the new version is already a loading tile next to its source.
- * - Branch: optional page names, comma separated, then Enter. It draws those pages (or four the model chooses) of the
- *   same product from this design; they land as a branch section of the Designs tab.
+ * - Branch: Full page or More pages (page names optional, comma separated), then Enter. It runs the branch pipeline
+ *   on this design: the full page continued below the fold, or other pages of the same product; each screen lands on
+ *   the branch's board in the Designs tab (mcp-slate-ui-script-board.ts).
+ *
+ * Opened from a branch's board, the view shows the screen's whole column as the continuous page it is (a web page flush,
+ * app states framed one by one), at the port's width, scrolling down; left and right step across the board's columns.
+ * The actions act on the screen at the middle of the port, whose code the bar names as it scrolls.
  *
  * Keys: Escape leaves the bar, then the view; left and right step; plus, minus, 0 (fit) and 1 (100 percent) zoom.
  * In the workspace the view covers the frame; in a card whose host has no fullscreen it opens in the card instead.
  */
 export const SLATE_UI_VIEWER = String.raw `
   var ZOOM_MAX = 8;
-  var BRANCH_DEFAULT_PAGES = 4;
-  var BRANCH_MAX_PAGES = 8;
+  var BRANCH_MAX_PAGES = 4;
   var PAGE_NAME_CHARS = 60;
 
   // Open the view on a version, optionally straight onto its edit or branch bar. From the card it asks for the workspace.
-  function openViewer(versionId, mode) {
+  function openViewer(versionId, mode, board) {
     var v = ver(versionId);
     if (!v) return;
-    state.lv = { versionId: versionId, mode: mode || null, scale: 1, x: 0, y: 0, fitted: true, prompt: "", pages: "", strokes: [], current: null, committing: false, error: "", id: uuid4(), els: {} };
+    state.lv = { scrollY: state.lv ? state.lv.scrollY : window.scrollY, versionId: versionId, mode: mode || null, board: board || null, focus: true, anchor: null, layout: null, scale: 1, x: 0, y: 0, fitted: true, prompt: "", pages: "", strokes: [], current: null, committing: false, error: "", id: uuid4(), els: {} };
     if (!isFullscreen() && canFullscreen()) { requestMode("fullscreen"); }
     renderAll();
   }
   function closeViewer() {
     if (!state.lv || state.lv.committing) return;
+    var y = state.lv.scrollY;
     state.lv = null;
     viewerHost().textContent = "";
     renderAll();
+    window.scrollTo(0, y);
   }
   function viewerHost() {
     if (isFullscreen()) { if (!stageBuilt) buildStageSkeleton(); return stageEls.viewer; }
@@ -40,9 +46,62 @@ export const SLATE_UI_VIEWER = String.raw `
   }
 
   function lvVersion() { return state.lv ? ver(state.lv.versionId) : null; }
+
+  function lvColumn() {
+    var lv = state.lv;
+    return lv && lv.board && !lv.mode ? boardColumn(lv.board.from, lv.board.column) : null;
+  }
+  function lvColumns() {
+    var lv = state.lv;
+    return lv && lv.board ? boardColumns(lv.board.from).filter(function (col) { return col.screens.some(boardScreenVersion); }) : [];
+  }
+  function columnLayout(col) {
+    var first = col.screens.map(boardScreenVersion).filter(sized)[0];
+    var w = first ? first.width : 1536;
+    var gap = col.flow === "states" ? Math.round(w * 0.03) : 0;
+    var bottom = 0;
+    var shots = col.screens.filter(function (s) { return boardScreenVersion(s) || !s.c || drawing(s.c); }).map(function (s, i) {
+      var v = boardScreenVersion(s);
+      var h = Math.round(w / (sized(v) ? v.width / v.height : boardRatio(state.lv.board.from)));
+      var shot = { s: s, v: v, top: bottom + (i ? gap : 0), height: h };
+      bottom = shot.top + h;
+      return shot;
+    });
+    return { w: w, h: bottom, flow: col.flow, shots: shots };
+  }
+  function stageSize() {
+    var lv = state.lv;
+    if (lv && lv.layout && !lv.mode) return { w: lv.layout.w, h: lv.layout.h };
+    var v = lvVersion();
+    return v ? { w: v.width, h: v.height } : null;
+  }
+  function scrolls() { var lv = state.lv; return !!(lv && lv.layout && !lv.mode && lv.layout.shots.length > 1); }
+  function followScroll() {
+    var lv = state.lv;
+    var size = portSize();
+    if (!lv || !lv.layout || lv.mode || !size) return;
+    var mid = (size.h / 2 - lv.y) / lv.scale;
+    var shown = lv.layout.shots.filter(function (sh) { return sh.v; });
+    var at = shown.filter(function (sh) { return sh.top <= mid; }).pop() || shown[0];
+    if (at && at.v.versionId !== lv.versionId) { lv.versionId = at.v.versionId; syncViewerTarget(); }
+  }
+
   function stepViewer(delta) {
     var lv = state.lv;
     if (!lv || lv.mode) return;
+    if (lv.board) {
+      var cols = lvColumns();
+      var col = cols[cols.findIndex(function (x) { return x.index === lv.board.column; }) + delta];
+      if (!col) return;
+      lv.board = { from: lv.board.from, column: col.index };
+      lv.versionId = col.screens.map(boardScreenVersion).filter(Boolean)[0].versionId;
+      lv.fitted = true;
+      lv.anchor = 0;
+      lv.error = "";
+      lv.built = null;
+      renderViewer();
+      return;
+    }
     var order = viewerOrder();
     var at = order.findIndex(function (x) { return x.versionId === lv.versionId; });
     var next = order[at + delta];
@@ -63,8 +122,12 @@ export const SLATE_UI_VIEWER = String.raw `
     var v = lvVersion();
     if (!v) { state.lv = null; host.textContent = ""; return; }
     var c = cand(v.candidateId);
-    var sig = JSON.stringify([v.versionId, v.sha256, lv.mode, samePick(v), state.busy, v.editable, localImage().ready, moreBusy(), viewerOrder().map(function (x) { return x.versionId; })]);
-    if (lv.built === sig && host.firstChild) { syncViewerForm(); return; }
+    var col = lvColumn();
+    lv.layout = col ? columnLayout(col) : null;
+    var sig = lv.layout
+      ? JSON.stringify([lv.board, lv.layout.flow, lv.layout.shots.map(function (sh) { return sh.v ? sh.v.sha256 : sh.height; }), lvColumns().length])
+      : JSON.stringify([v.versionId, v.sha256, lv.mode, lv.scope, samePick(v), state.busy, v.editable, localImage().ready, moreBusy(), viewerOrder().map(function (x) { return x.versionId; })]);
+    if (lv.built === sig && host.firstChild) { syncViewerTarget(); syncViewerForm(); return; }
     lv.built = sig;
     host.textContent = "";
     var box = el("div", "lv");
@@ -73,17 +136,13 @@ export const SLATE_UI_VIEWER = String.raw `
     box.setAttribute("aria-label", tileName(c, v));
 
     var bar = el("div", "lvbar");
-    var tag = el("span", "dtag");
-    tag.appendChild(el("b", "code", v.label));
-    var from = parentLabel(v);
-    if (from) tag.appendChild(el("span", "dfrom", t("fromLabel", { label: from })));
-    var page = pageName(c);
-    if (page) tag.appendChild(el("span", "dpage", page));
-    if (samePick(v)) { var chosen = el("span", "dchosen inline"); chosen.innerHTML = svgIcon(ICON.choose, 13); chosen.appendChild(el("span", "sr", t("chosen"))); tag.appendChild(chosen); }
-    bar.appendChild(tag);
+    lv.els.tag = viewerTag(v);
+    bar.appendChild(lv.els.tag);
     bar.appendChild(el("span", "spacer"));
-    var order = viewerOrder();
-    var at = order.findIndex(function (x) { return x.versionId === v.versionId; });
+    var order = lv.board ? lvColumns() : viewerOrder();
+    var at = lv.board
+      ? order.findIndex(function (x) { return x.index === lv.board.column; })
+      : order.findIndex(function (x) { return x.versionId === v.versionId; });
     var prev = iconAction(t("previous"), ICON.left, function () { stepViewer(-1); });
     prev.disabled = at <= 0 || !!lv.mode;
     var next = iconAction(t("next"), ICON.right, function () { stepViewer(1); });
@@ -95,17 +154,30 @@ export const SLATE_UI_VIEWER = String.raw `
     box.appendChild(bar);
 
     var port = el("div", "lvport" + (lv.mode === "edit" ? " drawing" : ""));
-    port.style.setProperty("--ar", String(v.width / v.height));
+    var size = stageSize();
+    port.style.setProperty("--ar", String(lv.layout ? lv.layout.w / lv.layout.shots[0].height : v.width / v.height));
     var stageBox = el("div", "lvstage");
-    stageBox.style.width = v.width + "px";
-    stageBox.style.height = v.height + "px";
-    var img = el("img", "lvimg empty");
-    img.alt = tileName(c, v);
-    img.setAttribute("draggable", "false");
-    var cached = state.fulls[imageKey(v, "full")] || state.thumbs[imageKey(v, "thumb")];
-    if (cached) { img.src = cached; img.classList.remove("empty"); }
-    bindImage(img, v, "full", true);
-    stageBox.appendChild(img);
+    stageBox.style.width = size.w + "px";
+    stageBox.style.height = size.h + "px";
+    if (lv.layout) {
+      stageBox.classList.add("column");
+      stageBox.setAttribute("data-flow", lv.layout.flow);
+      lv.layout.shots.forEach(function (sh) {
+        var part = el("div", "lvshot" + (sh.v ? "" : " loading shimmer"));
+        part.style.top = sh.top + "px";
+        part.style.height = sh.height + "px";
+        if (sh.v) part.appendChild(viewerImage(sh.v, sh.s.c ? tileName(sh.s.c, sh.v) : t("versionName", { label: sh.v.label })));
+        else part.appendChild(el("span", "spin"));
+        stageBox.appendChild(part);
+      });
+      if (lv.focus) {
+        var shot = lv.layout.shots.filter(function (sh) { return sh.v && sh.v.versionId === lv.versionId; })[0];
+        lv.anchor = shot ? shot.top : 0;
+        lv.focus = false;
+      }
+    } else {
+      stageBox.appendChild(viewerImage(v, tileName(c, v)));
+    }
     port.appendChild(stageBox);
     if (lv.mode === "edit") scribbleAttach(stageBox, lv);
     var zoom = el("div", "lvzoom");
@@ -125,7 +197,8 @@ export const SLATE_UI_VIEWER = String.raw `
     var foot = el("div", "lvfoot");
     if (lv.mode === "edit") foot.appendChild(editForm(v));
     else if (lv.mode === "branch") foot.appendChild(branchForm(v));
-    else foot.appendChild(viewerActions(v));
+    else { lv.els.acts = viewerActions(v); foot.appendChild(lv.els.acts); }
+    lv.els.target = targetSig(v);
     lv.els.alert = el("p", "alert");
     lv.els.alert.setAttribute("role", "alert");
     foot.appendChild(lv.els.alert);
@@ -137,6 +210,40 @@ export const SLATE_UI_VIEWER = String.raw `
     if (first && first.focus && lv.mode) first.focus();
   }
 
+  function viewerImage(v, alt) {
+    var img = el("img", "lvimg empty");
+    img.alt = alt;
+    img.setAttribute("draggable", "false");
+    var cached = state.fulls[imageKey(v, "full")] || state.thumbs[imageKey(v, "thumb")];
+    if (cached) { img.src = cached; img.classList.remove("empty"); }
+    bindImage(img, v, "full", true);
+    return img;
+  }
+  function viewerTag(v) {
+    var tag = el("span", "dtag");
+    tag.appendChild(el("b", "code", v.label));
+    var from = parentLabel(v);
+    if (from) tag.appendChild(el("span", "dfrom", t("fromLabel", { label: from })));
+    var c = cand(v.candidateId);
+    var page = c ? pageName(c) : "";
+    if (page) tag.appendChild(el("span", "dpage", page));
+    if (samePick(v)) { var chosen = el("span", "dchosen inline"); chosen.innerHTML = svgIcon(ICON.choose, 13); chosen.appendChild(el("span", "sr", t("chosen"))); tag.appendChild(chosen); }
+    return tag;
+  }
+  function targetSig(v) { return JSON.stringify([v.versionId, samePick(v), state.busy, v.editable, localImage().ready]); }
+  function syncViewerTarget() {
+    var lv = state.lv;
+    var v = lvVersion();
+    if (!lv || !v || lv.mode || !lv.els.tag || !lv.els.acts || lv.els.target === targetSig(v)) return;
+    lv.els.target = targetSig(v);
+    var tag = viewerTag(v);
+    lv.els.tag.replaceWith(tag);
+    lv.els.tag = tag;
+    var acts = viewerActions(v);
+    lv.els.acts.replaceWith(acts);
+    lv.els.acts = acts;
+  }
+
   function viewerActions(v) {
     var row = el("div", "lvacts");
     row.setAttribute("role", "toolbar");
@@ -162,6 +269,7 @@ export const SLATE_UI_VIEWER = String.raw `
     lv.current = null;
     lv.fitted = true;
     lv.built = null;
+    if (!mode && lv.board) lv.focus = true;
     renderViewer();
   }
 
@@ -199,25 +307,44 @@ export const SLATE_UI_VIEWER = String.raw `
     form.addEventListener("submit", function (e) { e.preventDefault(); commitViewer(); });
     return form;
   }
-  // ---- branch: optional page names ----
+  // ---- branch: the full page, or more pages (names optional) ----
   function branchPages(text) {
     return String(text || "").split(/[,\n;]/).map(function (p) { return p.replace(/\s+/g, " ").trim().slice(0, PAGE_NAME_CHARS); }).filter(Boolean).slice(0, BRANCH_MAX_PAGES);
   }
+  function branchScope() { var lv = state.lv; return lv && lv.scope === "site" ? "site" : "page"; }
   function branchForm(v) {
     var lv = state.lv;
     var form = el("form", "lvform");
     form.setAttribute("aria-label", t("branch"));
     form.appendChild(modeMark(ICON.branch));
-    var input = el("input");
-    input.type = "text";
-    input.className = "lvinput";
-    input.placeholder = t("branchPages");
-    input.setAttribute("aria-label", t("branchPages"));
-    input.value = lv.pages;
-    input.addEventListener("input", function () { lv.pages = input.value; });
-    enterApplies(input);
+    var seg = el("div", "seg lvscope");
+    seg.setAttribute("role", "radiogroup");
+    seg.setAttribute("aria-label", t("branch"));
+    [["page", t("fullPage")], ["site", t("morePages")]].forEach(function (choice) {
+      var b = button(choice[1], "segbtn", function () {
+        if (branchScope() === choice[0]) return;
+        lv.scope = choice[0];
+        renderViewer();
+      });
+      b.setAttribute("role", "radio");
+      b.setAttribute("aria-checked", branchScope() === choice[0] ? "true" : "false");
+      seg.appendChild(b);
+    });
+    form.appendChild(seg);
+    if (branchScope() === "site") {
+      var input = el("input");
+      input.type = "text";
+      input.className = "lvinput";
+      input.placeholder = t("branchPages");
+      input.setAttribute("aria-label", t("branchPages"));
+      input.value = lv.pages;
+      input.addEventListener("input", function () { lv.pages = input.value; });
+      enterApplies(input);
+      form.appendChild(input);
+    } else {
+      form.appendChild(el("span", "spacer"));
+    }
     lv.els.apply = iconAction(t("branch"), ICON.send, function () { commitViewer(); }, "go");
-    form.appendChild(input);
     form.appendChild(lv.els.apply);
     form.appendChild(iconAction(t("cancel"), ICON.close, function () { setViewerMode(null); }));
     form.addEventListener("submit", function (e) { e.preventDefault(); commitViewer(); });
@@ -258,9 +385,9 @@ export const SLATE_UI_VIEWER = String.raw `
       var d = { versionId: v.versionId, prompt: lv.prompt, strokes: lv.strokes };
       work = editActionFor(d, v).then(function (action) { return runAction(action, lv.id); });
     } else {
-      var pages = branchPages(lv.pages);
-      var action = { kind: "round", mode: "branch", fromVersionId: v.versionId };
-      if (pages.length) action.pages = pages; else action.count = BRANCH_DEFAULT_PAGES;
+      var action = { kind: "round", mode: "branch", fromVersionId: v.versionId, scope: branchScope() };
+      var pages = action.scope === "site" ? branchPages(lv.pages) : [];
+      if (pages.length) action.pages = pages;
       work = runAction(action, lv.id);
     }
     work.then(function () {
@@ -284,18 +411,19 @@ export const SLATE_UI_VIEWER = String.raw `
     return r && r.width > 0 && r.height > 0 ? { w: r.width, h: r.height } : null;
   }
   function fitScale() {
-    var v = lvVersion();
+    var stage = stageSize();
     var size = portSize();
-    if (!v || !size) return 1;
-    return Math.min(size.w / v.width, size.h / v.height);
+    if (!stage || !size) return 1;
+    if (scrolls()) return Math.min(size.w / stage.w, 1);
+    return Math.min(size.w / stage.w, size.h / stage.h);
   }
   function clampPan() {
     var lv = state.lv;
-    var v = lvVersion();
+    var stage = stageSize();
     var size = portSize();
-    if (!v || !size) return;
-    var w = v.width * lv.scale;
-    var h = v.height * lv.scale;
+    if (!stage || !size) return;
+    var w = stage.w * lv.scale;
+    var h = stage.h * lv.scale;
     // Smaller than the port: centred on that axis. Larger: no gap at either edge.
     lv.x = w <= size.w ? (size.w - w) / 2 : Math.min(0, Math.max(size.w - w, lv.x));
     lv.y = h <= size.h ? (size.h - h) / 2 : Math.min(0, Math.max(size.h - h, lv.y));
@@ -304,9 +432,11 @@ export const SLATE_UI_VIEWER = String.raw `
     var lv = state.lv;
     if (!lv || !lv.els.stage) return;
     if (lv.fitted) lv.scale = fitScale();
+    if (lv.anchor !== null && lv.layout && !lv.mode) lv.y = -lv.anchor * lv.scale;
     clampPan();
     lv.els.stage.style.transform = "translate(" + lv.x + "px, " + lv.y + "px) scale(" + lv.scale + ")";
     if (lv.els.level) lv.els.level.textContent = Math.round(lv.scale * 100) + "%";
+    followScroll();
   }
   function fitViewer() { var lv = state.lv; if (!lv) return; lv.fitted = true; applyZoom(); }
   function zoomAround(next, cx, cy) {
@@ -322,6 +452,7 @@ export const SLATE_UI_VIEWER = String.raw `
     lv.y = py - (py - lv.y) * (scale / lv.scale);
     lv.scale = scale;
     lv.fitted = false;
+    lv.anchor = null;
     applyZoom();
   }
   function zoomBy(factor, cx, cy) { var lv = state.lv; if (lv) zoomAround(lv.scale * factor, cx, cy); }
@@ -339,7 +470,8 @@ export const SLATE_UI_VIEWER = String.raw `
       var dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
       // A trackpad pinch arrives as a wheel with ctrlKey; vertical zooms around the pointer; horizontal and Shift pan.
       if (e.ctrlKey) { zoomBy(Math.exp(-dy * 0.01), p.x, p.y); return; }
-      if (e.shiftKey || Math.abs(dx) > Math.abs(dy)) { lv.x -= e.shiftKey && !dx ? 0 : dx; lv.y -= e.shiftKey ? dy : 0; lv.fitted = false; applyZoom(); return; }
+      if (scrolls() && !e.shiftKey && Math.abs(dy) >= Math.abs(dx)) { lv.anchor = null; lv.y -= dy; applyZoom(); return; }
+      if (e.shiftKey || Math.abs(dx) > Math.abs(dy)) { lv.anchor = null; lv.x -= e.shiftKey && !dx ? 0 : dx; lv.y -= e.shiftKey ? dy : 0; lv.fitted = false; applyZoom(); return; }
       zoomBy(Math.exp(-dy * 0.002), p.x, p.y);
     }, { passive: false });
     port.addEventListener("dblclick", function (e) {
@@ -375,6 +507,7 @@ export const SLATE_UI_VIEWER = String.raw `
       }
       lv.x += p.x - last.x;
       lv.y += p.y - last.y;
+      lv.anchor = null;
       lv.fitted = false;
       applyZoom();
     });

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-viewer.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmYxC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-viewer.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmgBxC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAoBA;;;;;;;;;;;GAWG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AA2B3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAuB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAsBA;;;;;;;;;;;GAWG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AA2B3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAyB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

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

@@ -3,12 +3,14 @@ import { SLATE_UI_LOCALES } from './mcp-slate-ui-locales/index.js';
 import { SLATE_EDIT_PROMPT_MAX_BYTES, SLATE_UI_TOOLS } from './slate-view-contract.js';
 import { SLATE_UI_BRIDGE } from './mcp-slate-ui-script-bridge.js';
 import { SLATE_UI_BROWSER } from './mcp-slate-ui-script-browser.js';
+import { SLATE_UI_BOARD } from './mcp-slate-ui-script-board.js';
 import { SLATE_UI_DESIGNS } from './mcp-slate-ui-script-designs.js';
 import { SLATE_UI_EDIT } from './mcp-slate-ui-script-edit.js';
 import { SLATE_UI_INLINE } from './mcp-slate-ui-script-inline.js';
 import { SLATE_UI_INSPIRATION } from './mcp-slate-ui-script-inspiration.js';
 import { buildSlateUiL10n } from './mcp-slate-ui-script-l10n.js';
 import { SLATE_UI_MORE } from './mcp-slate-ui-script-more.js';
+import { SLATE_UI_PEEK } from './mcp-slate-ui-script-peek.js';
 import { SLATE_UI_NO_PAUSE, SLATE_UI_PAUSE } from './mcp-slate-ui-script-pause.js';
 import { SLATE_UI_REFERENCES } from './mcp-slate-ui-script-references.js';
 import { SLATE_UI_REMOTE } from './mcp-slate-ui-script-remote.js';
@@ -59,6 +61,7 @@ export const buildSlateUiScript = (target) => [
     SLATE_UI_REFERENCES,
     target === 'remote' ? SLATE_UI_PAUSE : SLATE_UI_NO_PAUSE,
     SLATE_UI_DESIGNS,
+    SLATE_UI_BOARD,
     SLATE_UI_VIEWER,
     SLATE_UI_STAGE,
     SLATE_UI_EDIT.replace('__EDIT_PROMPT_MAX_BYTES__', () => JSON.stringify(SLATE_EDIT_PROMPT_MAX_BYTES)),
@@ -66,6 +69,7 @@ export const buildSlateUiScript = (target) => [
     SLATE_UI_SCRIBBLE,
     SLATE_UI_REMOTE,
     SLATE_UI_BROWSER,
+    SLATE_UI_PEEK,
     HANDSHAKE,
     '})();',
 ].join('\n');

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAsBlE;;;GAGG;AACH,MAAM,cAAc,GAAG,GAA2C,EAAE;IAClE,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAS,uBAAuB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC;IAC3F,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC;QAClF,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;KACxF,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAU,EAAE,CAAC;IACnE,eAAe;IACf,gBAAgB;IAChB,eAAe;SACZ,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;SAC1D,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACtD,cAAc;IACd,gBAAgB,CAAC,cAAc,EAAE,CAAC;IAClC,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,mBAAmB;IACnB,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB;IACxD,gBAAgB;IAChB,cAAc;IACd,eAAe;IACf,cAAc;IACd,aAAa,CAAC,OAAO,CAAC,2BAA2B,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;IACrG,aAAa,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1E,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,aAAa;IACb,SAAS;IACT,OAAO;CACR,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC"}

package/dist/mcp-slate-ui-styles-board.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A branch's board (mcp-slate-ui-script-board.ts) and its column in the large view. Columns run across and scroll when
+ * the board is wider than the frame: about two at the Codex inline width, four at 1440 px, one and a bit on a phone. A
+ * web page's column is one frame with its screens flush (no gap, no seam); an app's column frames each state on its own.
+ */
+export declare const SLATE_UI_BOARD_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-board.d.ts.map

package/dist/mcp-slate-ui-styles-board.d.ts.map

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

package/dist/mcp-slate-ui-styles-board.js

@@ -0,0 +1,30 @@
+/**
+ * A branch's board (mcp-slate-ui-script-board.ts) and its column in the large view. Columns run across and scroll when
+ * the board is wider than the frame: about two at the Codex inline width, four at 1440 px, one and a bit on a phone. A
+ * web page's column is one frame with its screens flush (no gap, no seam); an app's column frames each state on its own.
+ */
+export const SLATE_UI_BOARD_STYLES = String.raw `
+  .dboard { display: flex; align-items: flex-start; gap: 20px; min-width: 0; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
+  .bcol { flex: none; width: max(min(340px, 44%), min(260px, 80%)); min-width: 0; }
+  .bchead { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; margin-bottom: 8px; }
+  .bctitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
+  .bctitle.waiting { width: 45%; height: 12px; border-radius: 6px; background: var(--fill); }
+  .bstack { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--fill); }
+  .bstack::after, .bcol[data-flow="states"] .bshot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border2); pointer-events: none; }
+  .bcol[data-flow="states"] .bstack { gap: 10px; border-radius: 0; overflow: visible; background: none; }
+  .bcol[data-flow="states"] .bstack::after { display: none; }
+  .bcol[data-flow="states"] .bshot { border-radius: var(--radius); overflow: hidden; background: var(--fill); }
+
+  .bshot { position: relative; min-width: 0; }
+  button.bface { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 1.5); padding: 0; border: 0; border-radius: 0; background: var(--fill); overflow: hidden; cursor: zoom-in; }
+  button.bface:disabled { opacity: 1; cursor: default; }
+  .bface .thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
+  .bface .thumb:not([src]) { visibility: hidden; }
+  .bshot.chosen::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 3px var(--ring); pointer-events: none; }
+  .bshot:hover .dpick, .bshot:focus-within .dpick { opacity: 1; }
+  .lvstage.column { box-shadow: none; }
+  .lvstage.column[data-flow="page"] { box-shadow: var(--elev-lg); }
+  .lvshot { position: absolute; left: 0; width: 100%; overflow: hidden; background: var(--bg); }
+  .lvstage.column[data-flow="states"] .lvshot { box-shadow: var(--elev-lg); }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-board.js.map

package/dist/mcp-slate-ui-styles-board.js.map

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

package/dist/mcp-slate-ui-styles-designs.d.ts

@@ -1,7 +1,8 @@
 /**
  * The Designs tab and the large view. Tiles are large and keep the frame's shape (`--ar` per tile); a grid's columns
  * are no narrower than `--tile` times the square root of its ratio (`--shape`), so a 3:2 design is about 160 px wide on
- * a phone (two across), 220 px in a card (three across) and 300 px in the workspace (four across at 1440 px). Under
+ * a phone (two across), 300 px in a card (two across in Codex's inline frame) and 400 px in the workspace (three across
+ * at 1440 px). A slot being drawn is the loading surface (mcp-slate-ui-styles-loading.ts). Under
  * each picture is one row: the code (and where it came from, or its page) at the left, the four icon actions at the
  * right, so nothing covers the design. The chosen design has the selection's own language: a thick ring in the host's
  * accent and a filled check on the picture.

package/dist/mcp-slate-ui-styles-designs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-designs.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,QA+GnC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-designs.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,QAgHnC,CAAC"}

package/dist/mcp-slate-ui-styles-designs.js

@@ -1,15 +1,16 @@
 /**
  * The Designs tab and the large view. Tiles are large and keep the frame's shape (`--ar` per tile); a grid's columns
  * are no narrower than `--tile` times the square root of its ratio (`--shape`), so a 3:2 design is about 160 px wide on
- * a phone (two across), 220 px in a card (three across) and 300 px in the workspace (four across at 1440 px). Under
+ * a phone (two across), 300 px in a card (two across in Codex's inline frame) and 400 px in the workspace (three across
+ * at 1440 px). A slot being drawn is the loading surface (mcp-slate-ui-styles-loading.ts). Under
  * each picture is one row: the code (and where it came from, or its page) at the left, the four icon actions at the
  * right, so nothing covers the design. The chosen design has the selection's own language: a thick ring in the host's
  * accent and a filled check on the picture.
  */
 export const SLATE_UI_DESIGNS_STYLES = String.raw `
   .designs { --tile: 130px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
-  @container (min-width: 480px) { .designs { --tile: 180px; } }
-  #stage .designs { --tile: 245px; }
+  @container (min-width: 480px) { .designs { --tile: 250px; } }
+  #stage .designs { --tile: 330px; }
   @media (max-width: 639px) { #stage .designs { --tile: 130px; } }
 
   /* The bar: how many a round draws, and More. */
@@ -32,13 +33,14 @@ export const SLATE_UI_DESIGNS_STYLES = String.raw `
   .feedimg:not([src]) { visibility: hidden; }
   .feedmore { flex: none; font-size: 11px; color: var(--text2); padding-left: 2px; }
   .dnote { min-width: 0; flex: 0 1 auto; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .dcaption { min-width: 0; flex: 1 1 0; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .dcaption + .spacer { display: none; }
   .dstat { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
   .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
   .dot.run { background: var(--ring); animation: pulse 1.2s ease-in-out infinite; }
   .dot.err { background: var(--danger); }
   @keyframes pulse { 50% { opacity: .3; } }
   .earlier { align-self: center; color: var(--text2); }
-  .dsec.branch .dgrid { padding-left: 14px; border-left: 2px solid var(--ring); margin-left: 10px; }
 
   .dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--tile) * var(--shape, 1.22))), 1fr)); gap: 14px 12px; align-items: start; min-width: 0; }
   #stage .dgrid { gap: 20px 16px; }
@@ -57,11 +59,9 @@ export const SLATE_UI_DESIGNS_STYLES = String.raw `
   /* Under the picture: its letter and, where there is one, where it came from; the words shorten with an ellipsis (the full words are the tag's title). */
   .dmeta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 4px; min-width: 0; min-height: 28px; margin-top: 4px; }
   .dtag { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
-  .dtag .code { position: static; flex: none; padding: 0 7px; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 12px; font-weight: 600; line-height: 20px; }
+  .dtag .code, .bchead .code { position: static; flex: none; padding: 0 7px; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 12px; font-weight: 600; line-height: 20px; }
   .dfrom { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text2); }
   .dpage { min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
-  .spin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2.5px solid var(--border); border-top-color: var(--text2); border-radius: 50%; animation: spin .9s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
   .dtile.loading .dtag .code { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text2); }
   /* The tile's one action: a labelled pill over the picture's top right, on hover or keyboard focus, always on a touch screen. */
   .dpick { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 5px 12px; border: 0; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 12px; font-weight: 600; box-shadow: var(--elev); opacity: 0; transition: opacity .12s; }
@@ -111,10 +111,12 @@ export const SLATE_UI_DESIGNS_STYLES = String.raw `
   .lvacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
   .lvform { display: flex; align-items: center; gap: 4px; width: min(720px, 100%); padding: 4px 4px 4px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
   .lvform:focus-within { border-color: var(--ring); }
+  .seg.lvscope { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; background: var(--fill); }
+  .lvscope button.segbtn { white-space: nowrap; }
   .lvmode { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-solid); color: var(--inverse-text); }
   input.lvinput { flex: 1 1 auto; min-width: 0; padding: 8px 6px; border: 0; background: transparent; color: var(--text); font: inherit; }
   input.lvinput:focus-visible { outline: none; }
-  @media (prefers-reduced-motion: reduce) { .dot.run { animation: none; } button.dface { transition: none; } .dpick { transition: none; } .spin { animation-duration: 2.4s; } }
+  @media (prefers-reduced-motion: reduce) { .dot.run { animation: none; } button.dface { transition: none; } .dpick { transition: none; } }
   /* The scribble layer of the large view's edit lies exactly over the picture. */
   .scribble { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
 `;

package/dist/mcp-slate-ui-styles-designs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-designs.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GhD,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-designs.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-designs.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,2BAA2B,QA2DvC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,2BAA2B,QAsEvC,CAAC"}

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

@@ -18,6 +18,8 @@ export const SLATE_UI_INSPIRATION_STYLES = String.raw `
   .insp { container-type: inline-size; }
   .refs { container-type: inline-size; }
   .insp > .status { margin: 0 0 10px; }
+  /* One quiet sentence on what the tab is doing for this brief: no icon, no box. */
+  .tabcaption { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.35; color: var(--text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
   .results { min-width: 0; }
   /* The gutter is kept, so the scroll bar coming and going never changes the collage's width. */
   .insp.card .results { max-height: max(360px, 72cqw); overflow-y: auto; scrollbar-gutter: stable; padding: 2px; }
@@ -40,8 +42,17 @@ export const SLATE_UI_INSPIRATION_STYLES = String.raw `
   .zoombtn svg { width: 15px; height: 15px; }
   @media (hover: hover) { .gtile .zoombtn { opacity: 0; transition: opacity .12s; } .gtile:hover .zoombtn, .gtile .zoombtn:focus-visible { opacity: 1; } }
   .skelgrid:empty { display: none; }
-  .skelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
-  .skelgrid > .skeleton { height: 160px; border-radius: var(--radius); }
+  .skelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
+  .skelgrid > .skeleton { height: 200px; border-radius: var(--radius); }
+  /* A captioned grid (References): the picture, then its name and its site's domain (a link) in the reserved strip. */
+  .captioned .refbtn { bottom: auto; height: calc(100% - 42px); }
+  .gcap { position: absolute; left: 2px; right: 2px; bottom: 0; height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 16px; }
+  .gname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
+  .gdomain { align-self: flex-start; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--text2); text-decoration: none; }
+  .gdomain:hover { color: var(--ring); text-decoration: underline; }
+  .gdomain:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 3px; }
+  .gtile.pending .refbtn { cursor: default; background: var(--fill); }
+  .gtile.pending .refbtn:disabled { opacity: 1; }
   .placeholder { display: grid; place-items: center; min-height: 160px; border-radius: var(--radius); background: var(--fill); color: var(--text2); padding: 16px; text-align: center; font-size: var(--fs-sm); }
   /* The tray: the picks, the countdown while a round waits, and the one action. */
   .tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border2); background: var(--bg); min-width: 0; }

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-inspiration.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DpD,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEpD,CAAC"}

package/dist/mcp-slate-ui-styles-loading.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The loading surface, everywhere a picture is on its way (`.shimmer`): an Inspiration or References tile until its
+ * picture lands, the skeleton tiles of a first search, a reference site whose screenshot is still being captured, and a
+ * design slot while it is drawn.
+ *
+ * A field of fine dots in the host's ink whose brightness ripples across the frame: one soft crest with a faint echo,
+ * travelling diagonally. The wave is fixed to the frame (`background-attachment: fixed`), so every loading tile on
+ * screen is a window onto the same wave and a grid of them reads as one calm surface rather than many blinking boxes.
+ *
+ * - On a picture (`img.shimmer`, no pixels yet) the dots are the picture's own mask, so its tile's ground shows between
+ *   them; on anything else they are an overlay (`::before`) over the element's own ground, under its content.
+ * - The colours are the host's ink (`--text`) mixed into transparency, so Codex's light and dark themes drive it.
+ * - Reduced motion: still dots, no wave.
+ * - Chosen over the web's light band (apps/web generatedDesignPromptEdit.css) side by side in light and dark (evidence
+ *   12ui/slate-ui-polish/loading): the band must stay faint not to glare in light, and then all but vanishes on dark.
+ */
+export declare const SLATE_UI_LOADING_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-loading.d.ts.map