@12ui/design 0.2.82 → 0.2.84

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

@@ -3,11 +3,14 @@
  *
  * `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.
+ * - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load?, pending? }`:
+ *   `thumbUrl` for the tile and `imageUrl` for the large view (and the hover peek), 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. A `pending` item has no picture yet: its tile is the loading surface and cannot be selected.
+ * - `caption: true` puts the item's title and its site's domain (a link to the live page) under each picture.
  * - `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
+ *   list only adds what is new at the end, and refills in place a tile whose item stopped being `pending` (a reference
+ *   site whose screenshot landed); a list whose shown part changed otherwise is built again. 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.

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,4BAA4B,QA4OxC,CAAC"}

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

@@ -3,11 +3,14 @@
  *
  * `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.
+ * - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load?, pending? }`:
+ *   `thumbUrl` for the tile and `imageUrl` for the large view (and the hover peek), 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. A `pending` item has no picture yet: its tile is the loading surface and cannot be selected.
+ * - `caption: true` puts the item's title and its site's domain (a link to the live page) under each picture.
  * - `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
+ *   list only adds what is new at the end, and refills in place a tile whose item stopped being `pending` (a reference
+ *   site whose screenshot landed); a list whose shown part changed otherwise is built again. 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.
@@ -55,7 +58,12 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
         if (scroller) scroller.scrollTop = 0;
         revealPage(g);
       } else {
+        var before = g.items;
+        var kept = items.length >= g.shown && before.slice(0, g.shown).every(function (item, i) { return item.id === items[i].id; });
+        if (!kept) { g.key = null; g.set(key, items); return; }
         g.items = items.slice();
+        var shownTiles = g.node.querySelectorAll(".gtile");
+        for (var i = 0; i < g.shown; i++) if (!!before[i].pending !== !!items[i].pending) refillTile(g, shownTiles[i], i);
         // The list had ended on screen (a short last page): what joins it shows at once, in that block.
         if (g.shown % GALLERY_PAGE !== 0) revealPage(g);
       }
@@ -69,12 +77,22 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
     g.layout = function () { layoutBlocks(g.node, g.opts.where); };
     return g;
   }
+  // A tile whose item changed (a pending site that landed) is built again where it stands.
+  function refillTile(g, tile, index) {
+    if (!tile) return;
+    var fresh = galleryTile(g, g.items[index], index);
+    fresh.style.cssText = tile.style.cssText;
+    var img = tile.querySelector("img.thumb"), freshImg = fresh.querySelector("img.thumb");
+    if (img && freshImg && img.sizes) freshImg.sizes = img.sizes;
+    tile.parentNode.replaceChild(fresh, tile);
+  }
   // The next page of the list as one collage block, before the end marker; a short last block is topped up first, so
   // sites arriving one by one fill its rows instead of stacking short blocks. Returns whether anything was added.
   function revealPage(g) {
     if (g.shown >= g.items.length) return false;
     var short = g.shown % GALLERY_PAGE !== 0;
     var grid = short ? g.end.previousElementSibling : el("div", "refgrid");
+    if (g.opts.caption) { grid.__caption = COLLAGE.caption; grid.classList.add("captioned"); }
     var page = g.items.slice(g.shown, g.shown + (short ? GALLERY_PAGE - (g.shown % GALLERY_PAGE) : GALLERY_PAGE));
     var start = g.shown;
     page.forEach(function (item, i) { grid.appendChild(galleryTile(g, item, start + i)); });
@@ -105,6 +123,14 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
     b.setAttribute("data-ref", item.id);
     b.setAttribute("aria-label", item.label || item.title || item.id);
     b.setAttribute("aria-pressed", g.opts.isSelected(item.id) ? "true" : "false");
+    if (g.opts.caption) tile.appendChild(galleryCaption(item));
+    if (item.pending) {
+      tile.classList.add("pending");
+      b.classList.add("shimmer");
+      b.disabled = true;
+      tile.insertBefore(b, tile.firstChild);
+      return tile;
+    }
     // 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 = "";
@@ -117,16 +143,31 @@ export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
       if (item.srcset) img.srcset = item.srcset;
       img.src = item.thumbUrl;
     } else if (item.load) item.load(img, "thumb");
+    if (item.imageUrl && item.imageUrl !== item.thumbUrl && !item.srcset) img.setAttribute("data-large", item.imageUrl);
     b.appendChild(img);
     var check = el("span", "check");
     check.innerHTML = glyph(GLYPH.check, 15, 3);
     b.appendChild(check);
     b.addEventListener("click", function () { g.opts.onToggle(item.id); });
     b.addEventListener("dblclick", function (e) { e.preventDefault(); openLargeView(g, index); });
-    tile.appendChild(b);
+    tile.insertBefore(b, tile.firstChild);
     tile.appendChild(glyphButton(t("expand"), GLYPH.expand, "zoombtn", function (e) { e.stopPropagation(); openLargeView(g, index); }));
     return tile;
   }
+  // Under a captioned picture: its name, and its site's domain as a link that opens the live page through the host.
+  function galleryCaption(item) {
+    var cap = el("div", "gcap");
+    cap.appendChild(el("span", "gname", item.title || ""));
+    if (item.sourceUrl) {
+      var link = el("a", "gdomain", item.domain || item.sourceUrl);
+      link.href = item.sourceUrl;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.addEventListener("click", function (e) { e.preventDefault(); openSite(item.sourceUrl); });
+      cap.appendChild(link);
+    }
+    return cap;
+  }
 
   // ---- the large view ----
   var largeView = null;

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsMrD,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-gallery.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-gallery.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4OrD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,QA2JrC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inspiration-grid.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inspiration-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,yBAAyB,QA+JrC,CAAC"}

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

@@ -101,6 +101,9 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
     pane.__built = true;
     pane.__where = where;
     pane.classList.add("insp", where);
+    var caption = el("p", "tabcaption");
+    pane.__caption = caption;
+    pane.appendChild(caption);
     var status = el("div", "status");
     status.setAttribute("data-istatus", "");
     status.setAttribute("role", "status");
@@ -145,6 +148,7 @@ export const SLATE_UI_INSPIRATION_GRID = String.raw `
   function renderInspiration(pane, where) {
     if (!state.view) return;
     if (!pane.__built) buildInspirationShell(pane, where);
+    pane.__caption.textContent = pane.__caption.title = tabCaption("inspiration");
     syncSearchRun();
     var list = gridList();
     var searching = state.insp.searching;

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;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JlD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JlD,CAAC"}

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

@@ -6,6 +6,10 @@
  * - A new wait opens the Inspiration tab (unless the person chose a tab since), with the round's references picked;
  *   when the wait ends (Continue, or the countdown on the server) the screen moves back to Designs, where the options
  *   now draw. Moving on to Designs by hand continues the round with the picks (`setTab`).
+ * - While the server's countdown waits for the workspace's first live website reference, more than 60 s are left
+ *   (`remainingMs`, workers/api/src/slate/store/pause.ts): the words say so ("Starts after the first site") and the
+ *   line stays full until 60 s are left. The seconds are always the server's, so the screen never counts down a
+ *   deadline the server does not keep.
  * - In the Inspiration tab the tray carries the countdown ("Starts in 42 s") beside Continue. On Designs (the
  *   workspace's picture, or the card when the person went there) the pause bar says "Starts in 42 s" beside Change and
  *   Continue, and counts down calmly: the words change once a second (a timer role, so assistive

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-pause.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,cAAc,QAuL1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAY7B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-pause.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,cAAc,QA0L1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAY7B,CAAC"}

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

@@ -6,6 +6,10 @@
  * - A new wait opens the Inspiration tab (unless the person chose a tab since), with the round's references picked;
  *   when the wait ends (Continue, or the countdown on the server) the screen moves back to Designs, where the options
  *   now draw. Moving on to Designs by hand continues the round with the picks (`setTab`).
+ * - While the server's countdown waits for the workspace's first live website reference, more than 60 s are left
+ *   (`remainingMs`, workers/api/src/slate/store/pause.ts): the words say so ("Starts after the first site") and the
+ *   line stays full until 60 s are left. The seconds are always the server's, so the screen never counts down a
+ *   deadline the server does not keep.
  * - In the Inspiration tab the tray carries the countdown ("Starts in 42 s") beside Continue. On Designs (the
  *   workspace's picture, or the card when the person went there) the pause bar says "Starts in 42 s" beside Change and
  *   Continue, and counts down calmly: the words change once a second (a timer role, so assistive
@@ -71,11 +75,14 @@ export const SLATE_UI_PAUSE = String.raw `
     if (pause.opId && pause.autoTab && state.tab === "inspiration") { state.tab = "designs"; syncTabs(); }
     pause = { opId: null, roundId: null, endsAt: 0, held: false, chosen: null, sending: false, error: "", timer: null, asked: false, sighted: false, autoTab: false };
   }
+  // The countdown waits for the first website: the server leaves more than the usual 60 s only then.
+  function pauseAwaitsSite() { return !pause.held && pauseLeftMs() > PAUSE_COUNTDOWN_MS; }
   function pauseLeftMs() { return Math.max(0, pause.endsAt - pauseClock()); }
   function pauseText() {
     if (pause.error) return pause.error;
     if (pause.sending) return t("pauseStarting");
     if (pause.held) return t("pauseHeld");
+    if (pauseAwaitsSite()) return t("pauseFirstSite");
     var left = Math.ceil(pauseLeftMs() / 1000);
     return left > 0 ? t("startsIn", { n: left }) : t("pauseStarting");
   }
@@ -88,10 +95,10 @@ export const SLATE_UI_PAUSE = String.raw `
     var words = pauseText();
     var left = Math.ceil(pauseLeftMs() / 1000);
     // The tray's clock: the seconds left, nothing once held, and "Starting." when the round goes.
-    var clock = pause.error ? pause.error : pause.sending || (!pause.held && left <= 0) ? t("pauseStarting") : pause.held ? "" : t("startsIn", { n: left });
+    var clock = pause.error ? pause.error : pause.sending || (!pause.held && left <= 0) ? t("pauseStarting") : pause.held ? "" : pauseAwaitsSite() ? t("pauseFirstSite") : t("startsIn", { n: left });
     var clocks = document.querySelectorAll("[data-pause-clock]");
     for (var c = 0; c < clocks.length; c++) if (clocks[c].textContent !== clock) clocks[c].textContent = clock;
-    var share = pause.held ? 0 : pauseLeftMs() / PAUSE_COUNTDOWN_MS;
+    var share = pause.held ? 0 : Math.min(1, pauseLeftMs() / PAUSE_COUNTDOWN_MS);
     // Only the bars themselves are walked, never the whole document: this runs every second while a round waits.
     pauseBoxes = pauseBoxes.filter(function (box) { return box.isConnected !== false; });
     pauseBoxes.forEach(function (box) {

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-pause.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuLvC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY1C,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-pause.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0LvC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY1C,CAAC"}

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

@@ -0,0 +1,16 @@
+/**
+ * The hover peek: resting the pointer on a picture tile (an Inspiration or References tile, or a design) for a moment,
+ * or reaching it with the keyboard, shows a modestly larger copy (about 1.4x, at most half the frame wide and 60% of its height) of its picture floating over the grid, centred on the tile and
+ * kept inside the frame, with a soft shadow. Nothing in the grid moves.
+ *
+ * - The copy never takes the pointer, so a click lands on the tile exactly as without it (select in a gallery, the
+ *   large view on a design), and moving onto another tile peeks that one instead. It goes on leave, a press, a scroll,
+ *   a resize, Escape, and over a tile's own controls (expand, the pill, the row under a design).
+ * - Only a tile whose picture has landed peeks, and only where the copy would be noticeably larger than the tile.
+ * - It shows the tile's own picture at once; a gallery tile with a larger picture (`data-large`) swaps to it when it loads.
+ * - Off on a touch screen: only where the primary pointer hovers and is fine, and only for a mouse.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export declare const SLATE_UI_PEEK: string;
+//# sourceMappingURL=mcp-slate-ui-script-peek.d.ts.map

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

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

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

@@ -0,0 +1,89 @@
+/**
+ * The hover peek: resting the pointer on a picture tile (an Inspiration or References tile, or a design) for a moment,
+ * or reaching it with the keyboard, shows a modestly larger copy (about 1.4x, at most half the frame wide and 60% of its height) of its picture floating over the grid, centred on the tile and
+ * kept inside the frame, with a soft shadow. Nothing in the grid moves.
+ *
+ * - The copy never takes the pointer, so a click lands on the tile exactly as without it (select in a gallery, the
+ *   large view on a design), and moving onto another tile peeks that one instead. It goes on leave, a press, a scroll,
+ *   a resize, Escape, and over a tile's own controls (expand, the pill, the row under a design).
+ * - Only a tile whose picture has landed peeks, and only where the copy would be noticeably larger than the tile.
+ * - It shows the tile's own picture at once; a gallery tile with a larger picture (`data-large`) swaps to it when it loads.
+ * - Off on a touch screen: only where the primary pointer hovers and is fine, and only for a mouse.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export const SLATE_UI_PEEK = String.raw `
+  // ---- the hover peek ----
+  var PEEK = { delayMs: 420, scale: 1.4, maxWidth: 0.5, hardWidth: 0.6, maxHeight: 0.6, floorGain: 1.2, margin: 12, minGain: 1.1 };
+  var peek = { key: null, tile: null, timer: null, node: null, held: null };
+  function peekFaceOf(target) { return target && target.closest ? target.closest(".gtile .refbtn, .dtile .dface") : null; }
+  function peekKey(face) { var tile = face.closest(".gtile, .dtile"); return tile.getAttribute("data-version") || face.getAttribute("data-ref") || ""; }
+  function peekPicture(face) {
+    var img = face.querySelector("img.thumb");
+    return img && img.complete && img.naturalWidth > 0 && !img.classList.contains("empty") && !img.classList.contains("shimmer") ? img : null;
+  }
+  function hidePeek() {
+    if (peek.timer !== null) { clearTimeout(peek.timer); peek.timer = null; }
+    if (peek.node && peek.node.parentNode) peek.node.parentNode.removeChild(peek.node);
+    peek.node = null;
+    peek.key = null;
+    peek.tile = null;
+  }
+  function armPeek(face) {
+    var key = peekKey(face);
+    if (key === peek.key || key === peek.held) return;
+    hidePeek();
+    peek.key = key;
+    peek.tile = face;
+    peek.timer = setTimeout(function () { peek.timer = null; showPeek(face); }, PEEK.delayMs);
+  }
+  function showPeek(face) {
+    var img = face.isConnected ? peekPicture(face) : null;
+    if (!img || face.disabled) return;
+    var r = face.getBoundingClientRect();
+    var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight, m = PEEK.margin;
+    if (r.width < 8 || r.height < 8) return;
+    var ratio = r.width / r.height;
+    // Half the frame's width at most, except that a wide tile (two across in a narrow frame) still gains the floor, up to 60%; a tile already past that does not peek.
+    var w = Math.min(r.width * PEEK.scale, Math.max(vw * PEEK.maxWidth, Math.min(r.width * PEEK.floorGain, vw * PEEK.hardWidth)), vw - 2 * m), h = w / ratio;
+    var hMax = Math.min(vh * PEEK.maxHeight, vh - 2 * m);
+    if (h > hMax) { h = hMax; w = h * ratio; }
+    if (w < r.width * PEEK.minGain) return;
+    var left = Math.max(m, Math.min(vw - m - w, r.left + r.width / 2 - w / 2));
+    var top = Math.max(m, Math.min(vh - m - h, r.top + r.height / 2 - h / 2));
+    var node = el("div", "peek");
+    node.setAttribute("aria-hidden", "true");
+    node.style.cssText = "left:" + left + "px;top:" + top + "px;width:" + w + "px;height:" + h + "px";
+    if (face.getAttribute("aria-pressed") === "true" || face.closest(".dtile.chosen")) node.classList.add("on");
+    var copy = el("img", "");
+    copy.alt = "";
+    copy.src = img.currentSrc || img.src;
+    node.appendChild(copy);
+    var large = img.getAttribute("data-large");
+    if (large && large !== copy.src) {
+      var better = new Image();
+      better.onload = function () { if (peek.node === node) copy.src = large; };
+      better.src = large;
+    }
+    document.body.appendChild(node);
+    peek.node = node;
+  }
+  if (typeof matchMedia === "function" && matchMedia("(hover: hover) and (pointer: fine)").matches) {
+    document.addEventListener("pointerover", function (e) {
+      if (e.pointerType && e.pointerType !== "mouse") return;
+      var face = peekFaceOf(e.target);
+      if (!face) { peek.held = null; hidePeek(); return; }
+      if (peekKey(face) !== peek.held) peek.held = null;
+      armPeek(face);
+    });
+    // A press shows the tile itself (its ring, the large view): no peek until the pointer moves to another tile.
+    document.addEventListener("pointerdown", function () { if (peek.key) peek.held = peek.key; hidePeek(); }, true);
+    document.documentElement.addEventListener("pointerleave", function () { peek.held = null; hidePeek(); });
+    document.addEventListener("focusin", function (e) { var face = peekFaceOf(e.target); if (face && face.matches(":focus-visible")) armPeek(face); else hidePeek(); });
+    document.addEventListener("focusout", function () { hidePeek(); });
+    document.addEventListener("scroll", hidePeek, true);
+    window.addEventListener("resize", hidePeek);
+    document.addEventListener("keydown", function (e) { if (e.key === "Escape") hidePeek(); }, true);
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-peek.js.map

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

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

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

@@ -3,8 +3,10 @@
  * and captured by the 12ui command line while a round waits on them. It is the Inspiration tab's gallery, large view
  * and tray (mcp-slate-ui-script-inspiration-gallery.ts, mcp-slate-ui-script-inspiration-grid.ts) over the sites:
  *
- * - The sites arrive one by one while the tab is open (the status poll brings each, or the tab's own short watch below)
- *   and join the end of the grid; nothing already shown moves.
+ * - As soon as the agents have chosen the sites (`view.pendingSites`), each shows as a placeholder tile, the loading
+ *   surface, with its name and domain under it; its screenshot fills that tile in place when it is captured (the status
+ *   poll brings each, or the tab's own short watch below). A site keeps the place it first took, so nothing already
+ *   shown moves; a site that was never planned joins the end. The name and domain stay under the picture.
  * - A click selects or deselects a site exactly like an Inspiration reference (`toggleRef`: the selection for the next
  *   round, or, while a round waits on the person, that round's references), with the same ring, check and tray.
  * - The large view adds Open site, which opens the live page through the host.

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-references.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB,QAmF/B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-references.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,mBAAmB,QAiH/B,CAAC"}

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

@@ -3,8 +3,10 @@
  * and captured by the 12ui command line while a round waits on them. It is the Inspiration tab's gallery, large view
  * and tray (mcp-slate-ui-script-inspiration-gallery.ts, mcp-slate-ui-script-inspiration-grid.ts) over the sites:
  *
- * - The sites arrive one by one while the tab is open (the status poll brings each, or the tab's own short watch below)
- *   and join the end of the grid; nothing already shown moves.
+ * - As soon as the agents have chosen the sites (`view.pendingSites`), each shows as a placeholder tile, the loading
+ *   surface, with its name and domain under it; its screenshot fills that tile in place when it is captured (the status
+ *   poll brings each, or the tab's own short watch below). A site keeps the place it first took, so nothing already
+ *   shown moves; a site that was never planned joins the end. The name and domain stay under the picture.
  * - A click selects or deselects a site exactly like an Inspiration reference (`toggleRef`: the selection for the next
  *   round, or, while a round waits on the person, that round's references), with the same ring, check and tray.
  * - The large view adds Open site, which opens the live page through the host.
@@ -35,6 +37,20 @@ export const SLATE_UI_REFERENCES = String.raw `
   }
 
   function siteList() { return (state.view && state.view.sites) || []; }
+  function pendingSiteList() { return (state.view && state.view.pendingSites) || []; }
+  // Every site's place in the grid, the first time it is seen (planned or landed), per workspace.
+  var siteOrder = { runDir: null, ids: [] };
+  function orderedSiteItems() {
+    var byId = {};
+    var fresh = [];
+    siteList().forEach(function (site) { byId[site.id] = siteItem(site); fresh.push(site.id); });
+    pendingSiteList().forEach(function (site) { if (!byId[site.id]) { byId[site.id] = pendingSiteItem(site); fresh.push(site.id); } });
+    if (siteOrder.runDir !== state.view.runDir) siteOrder = { runDir: state.view.runDir, ids: [] };
+    var ids = siteOrder.ids.filter(function (id) { return !!byId[id]; });
+    fresh.forEach(function (id) { if (ids.indexOf(id) < 0) ids.push(id); });
+    siteOrder.ids = ids;
+    return ids.map(function (id) { return byId[id]; });
+  }
   function siteById(id) {
     var sites = siteList();
     for (var i = 0; i < sites.length; i++) if (sites[i].id === id) return sites[i];
@@ -48,17 +64,31 @@ export const SLATE_UI_REFERENCES = String.raw `
   }
   // A site as the gallery shows it.
   function siteItem(site) {
-    var item = { id: site.id, label: site.title + " (" + siteDomain(site) + ")", title: site.title, sourceUrl: site.sourceUrl,
+    var item = { id: site.id, label: site.title + " (" + siteDomain(site) + ")", title: site.title, sourceUrl: site.sourceUrl, domain: siteDomain(site),
       aspect: "landscape", width: 1600, height: 1000, thumbUrl: site.thumbUrl || null, imageUrl: site.imageUrl || site.thumbUrl || null, srcset: "" };
     if (!item.thumbUrl) item.load = function (img, size) { fillImage(img, wantReference(site.id, size === "thumb" ? "thumb" : "ref", false)); };
     return item;
   }
 
+  // A site the agents chose whose screenshot is still being captured: the same shape, so it fills in without a move.
+  function pendingSiteItem(site) {
+    return { id: site.id, label: site.title + " (" + siteDomain(site) + ")", title: site.title, sourceUrl: site.sourceUrl, domain: siteDomain(site),
+      aspect: "landscape", width: 1600, height: 1000, thumbUrl: null, imageUrl: null, srcset: "", pending: true };
+  }
+
   // ---- the tab ----
+  // The line at the top of a tab: the one the person's agent wrote for this brief, else the screen's own.
+  function tabCaption(tab) {
+    var written = state.view && state.view.captions && state.view.captions[tab];
+    return written || t(tab === "references" ? "referencesCaption" : "inspirationCaption");
+  }
   function buildReferencesShell(pane, where) {
     pane.__built = true;
     pane.__where = where;
     pane.classList.add("insp", "refs", where);
+    var caption = el("p", "tabcaption");
+    pane.__caption = caption;
+    pane.appendChild(caption);
     var status = el("div", "status");
     status.setAttribute("data-istatus", "");
     status.setAttribute("role", "status");
@@ -68,7 +98,8 @@ export const SLATE_UI_REFERENCES = String.raw `
       where: where,
       root: function () { return where === "card" ? results : null; },
       isSelected: function (id) { return activeSelection().indexOf(id) >= 0; },
-      onToggle: toggleRef
+      onToggle: toggleRef,
+      caption: true
     });
     var empty = el("div", "placeholder");
     results.appendChild(gallery.node);
@@ -83,16 +114,17 @@ export const SLATE_UI_REFERENCES = String.raw `
   function renderReferences(pane, where) {
     if (!state.view) return;
     if (!pane.__built) buildReferencesShell(pane, where);
+    pane.__caption.textContent = pane.__caption.title = tabCaption("references");
     armSiteWatch();
-    var sites = siteList();
-    var has = sites.length > 0;
+    var items = orderedSiteItems();
+    var has = items.length > 0;
     var emptyText = has ? "" : stillFinding() ? t("referencesFinding") : t("referencesNone");
     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);
     // One list per workspace: a new site only joins its end.
-    if (has) pane.__gallery.set(state.view.runDir + ":sites", sites.map(siteItem));
+    if (has) pane.__gallery.set(state.view.runDir + ":sites", items);
     pane.__gallery.layout();
     pane.__gallery.sync();
     syncTray(pane);

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-references.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmF5C,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-references.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiH5C,CAAC"}

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

@@ -45,7 +45,7 @@ export const SLATE_UI_REMOTE = String.raw `
     }
     if (action.mode === "branch") {
       var root = ver(action.fromVersionId);
-      return "Draw more pages of " + (root ? root.label : "the design") + ".";
+      return (action.scope === "page" ? "Draw the full page of " : "Draw more pages of ") + (root ? root.label : "the design") + ".";
     }
     if (action.mode === "like") {
       var from = ver(action.fromVersionId);
@@ -64,7 +64,7 @@ export const SLATE_UI_REMOTE = String.raw `
   function remoteChoose(version, label) {
     var handoffId = uuid4();
     return callTool(TOOLS.handoff, {
-      runDir: state.view.runDir, handoffId: handoffId, kind: "convert", versionId: version.versionId, options: { engine: "local", output: "html" }
+      runDir: state.view.runDir, handoffId: handoffId, kind: "convert", versionId: version.versionId, options: { engine: "service", output: "html" }
     }).then(function (result) {
       var sc = result.structuredContent || {};
       if (sc.view) applyView(sc.view, true);

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

@@ -8,8 +8,13 @@
  * - 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.

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-viewer.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,QAmY3B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-viewer.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,QAmgB3B,CAAC"}