@12ui/design 0.2.81 → 0.2.83

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"}

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.