@12ui/design 0.2.80 → 0.2.81

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

@@ -0,0 +1,405 @@
+/**
+ * The large view, like Design Lab's: one design at full size over the workspace. A slim bar names it (its code, where
+ * it came from) with previous, next and close; under it the design, which zooms with the wheel or a pinch around the
+ * pointer, pans by dragging (horizontal wheel and Shift+wheel pan too), and has minus, the zoom level (a tap toggles
+ * 100 percent and fit), plus and fit; under that the labelled actions: Edit, Branch and Build this.
+ *
+ * Edit and branch open a bar in place of the actions, so nothing covers the design:
+ * - 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.
+ *
+ * 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 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) {
+    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: {} };
+    if (!isFullscreen() && canFullscreen()) { requestMode("fullscreen"); }
+    renderAll();
+  }
+  function closeViewer() {
+    if (!state.lv || state.lv.committing) return;
+    state.lv = null;
+    viewerHost().textContent = "";
+    renderAll();
+  }
+  function viewerHost() {
+    if (isFullscreen()) { if (!stageBuilt) buildStageSkeleton(); return stageEls.viewer; }
+    return $("viewer");
+  }
+
+  function lvVersion() { return state.lv ? ver(state.lv.versionId) : null; }
+  function stepViewer(delta) {
+    var lv = state.lv;
+    if (!lv || lv.mode) return;
+    var order = viewerOrder();
+    var at = order.findIndex(function (x) { return x.versionId === lv.versionId; });
+    var next = order[at + delta];
+    if (!next) return;
+    lv.versionId = next.versionId;
+    lv.fitted = true;
+    lv.error = "";
+    lv.built = null;
+    renderViewer();
+  }
+
+  // ---- render: built once per version and bar, zoom moves the picture without a rebuild ----
+  function renderViewer() {
+    var lv = state.lv;
+    var host = viewerHost();
+    if (!host) return;
+    if (!lv) { host.textContent = ""; return; }
+    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; }
+    lv.built = sig;
+    host.textContent = "";
+    var box = el("div", "lv");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    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);
+    bar.appendChild(el("span", "spacer"));
+    var order = viewerOrder();
+    var at = 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); });
+    next.disabled = at < 0 || at >= order.length - 1 || !!lv.mode;
+    bar.appendChild(prev);
+    bar.appendChild(el("span", "lvcount", (at + 1) + " / " + order.length));
+    bar.appendChild(next);
+    bar.appendChild(iconAction(t("close"), ICON.close, closeViewer));
+    box.appendChild(bar);
+
+    var port = el("div", "lvport" + (lv.mode === "edit" ? " drawing" : ""));
+    port.style.setProperty("--ar", String(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);
+    port.appendChild(stageBox);
+    if (lv.mode === "edit") scribbleAttach(stageBox, lv);
+    var zoom = el("div", "lvzoom");
+    zoom.appendChild(iconAction(t("zoomOut"), ICON.minus, function () { zoomBy(1 / 1.25); }));
+    lv.els.level = button("", "lvlevel", function () { if (Math.abs(lv.scale - 1) < 0.001) fitViewer(); else zoomTo(1); });
+    lv.els.level.setAttribute("aria-label", t("zoomActual"));
+    lv.els.level.title = t("zoomActual");
+    zoom.appendChild(lv.els.level);
+    zoom.appendChild(iconAction(t("zoomIn"), ICON.plus, function () { zoomBy(1.25); }));
+    zoom.appendChild(iconAction(t("zoomFit"), ICON.fit, fitViewer));
+    if (lv.mode !== "edit") port.appendChild(zoom);
+    box.appendChild(port);
+    lv.els.port = port;
+    lv.els.stage = stageBox;
+    bindZoom(port);
+
+    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));
+    lv.els.alert = el("p", "alert");
+    lv.els.alert.setAttribute("role", "alert");
+    foot.appendChild(lv.els.alert);
+    box.appendChild(foot);
+    host.appendChild(box);
+    applyZoom();
+    syncViewerForm();
+    var first = foot.querySelector("input") || foot.querySelector("button:not([disabled])");
+    if (first && first.focus && lv.mode) first.focus();
+  }
+
+  function viewerActions(v) {
+    var row = el("div", "lvacts");
+    row.setAttribute("role", "toolbar");
+    row.setAttribute("aria-label", t("actionsFor", { name: v.label }));
+    var edit = wordAction(t("edit"), ICON.edit, function () { setViewerMode("edit"); });
+    edit.disabled = !v.editable || !localImage().ready;
+    if (!v.editable && v.editBlockedReason) edit.title = serverText(v.editBlockedL10n, v.editBlockedReason);
+    var branch = wordAction(t("branch"), ICON.branch, function () { setViewerMode("branch"); });
+    branch.disabled = !localImage().ready;
+    // Build this: the one primary action. It records the pick and hands the build to the agent.
+    var choose = wordAction(samePick(v) ? t("chosen") : t("choose"), ICON.convert, function () { doSelect(v); }, "choose primary");
+    choose.setAttribute("aria-pressed", samePick(v) ? "true" : "false");
+    choose.disabled = state.busy || !pickable(v);
+    [edit, branch, choose].forEach(function (b) { row.appendChild(b); });
+    return row;
+  }
+  function setViewerMode(mode) {
+    var lv = state.lv;
+    if (!lv || lv.committing) return;
+    lv.mode = mode;
+    lv.error = "";
+    lv.strokes = [];
+    lv.current = null;
+    lv.fitted = true;
+    lv.built = null;
+    renderViewer();
+  }
+
+  // The bar's own mark at its left, so it reads as edit or branch once the field holds words.
+  function modeMark(path) { var mark = el("span", "lvmode"); mark.setAttribute("aria-hidden", "true"); mark.innerHTML = svgIcon(path, 16); return mark; }
+  // Enter applies on its own keydown: a host frame sandboxed without allow-forms (the browser workspace) never submits a form.
+  function enterApplies(input) {
+    input.addEventListener("keydown", function (e) {
+      if (e.key !== "Enter" || e.isComposing) return;
+      e.preventDefault();
+      commitViewer();
+    });
+  }
+  // ---- edit: draw and/or type, then Enter ----
+  function editForm(v) {
+    var lv = state.lv;
+    var form = el("form", "lvform");
+    form.setAttribute("aria-label", t("edit"));
+    form.appendChild(modeMark(ICON.edit));
+    var input = el("input");
+    input.type = "text";
+    input.className = "lvinput";
+    input.placeholder = t("editChange");
+    input.setAttribute("aria-label", t("editChange"));
+    input.setAttribute("maxlength", "6000");
+    input.value = lv.prompt;
+    input.addEventListener("input", function () { lv.prompt = input.value; lv.error = ""; syncViewerForm(); });
+    enterApplies(input);
+    lv.els.undo = iconAction(t("undo"), ICON.undo, function () { scribbleUndo(lv); });
+    lv.els.apply = iconAction(t("apply"), ICON.send, function () { commitViewer(); }, "go");
+    form.appendChild(lv.els.undo);
+    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(); });
+    return form;
+  }
+  // ---- branch: optional page names ----
+  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 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);
+    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(); });
+    return form;
+  }
+  function viewerReady() {
+    var lv = state.lv;
+    var v = lvVersion();
+    if (!lv || !v || lv.committing || !localImage().ready) return false;
+    if (lv.mode === "edit") return v.editable && (lv.strokes.length > 0 || !!editWords(lv.prompt)) && editOverBy(lv.prompt) === 0;
+    if (lv.mode === "branch") return true;
+    return false;
+  }
+  function syncViewerForm() {
+    var lv = state.lv;
+    if (!lv || !lv.els) return;
+    if (lv.els.apply) lv.els.apply.disabled = !viewerReady();
+    if (lv.els.undo) lv.els.undo.disabled = lv.strokes.length === 0 || lv.committing;
+    if (lv.els.alert) {
+      var tooLong = lv.mode === "edit" ? editOverBy(lv.prompt) : 0;
+      lv.els.alert.textContent = lv.error || (lv.mode && !localImage().ready ? localReason() : "") || (tooLong > 0 ? t("editTooLong", { n: tooLong }) : "");
+      lv.els.alert.classList.toggle("hidden", !lv.els.alert.textContent);
+    }
+    if (lv.els.port) lv.els.port.classList.toggle("busy", lv.committing);
+  }
+  // The scribble layer reports each change of its strokes here.
+  function scribbleChanged(d) { if (d === state.lv) syncViewerForm(); }
+
+  function commitViewer() {
+    var lv = state.lv;
+    if (!viewerReady()) return;
+    var v = lvVersion();
+    lv.committing = true;
+    lv.error = "";
+    syncViewerForm();
+    var work;
+    if (lv.mode === "edit") {
+      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;
+      work = runAction(action, lv.id);
+    }
+    work.then(function () {
+      lv.committing = false;
+      if (state.lv === lv) { state.lv = null; viewerHost().textContent = ""; }
+      state.tab = "designs";
+      syncTabs();
+      renderAll();
+    }, function (err) {
+      lv.committing = false;
+      if (state.lv !== lv) return;
+      lv.error = errText(err);
+      syncViewerForm();
+    });
+  }
+
+  // ---- zoom and pan ----
+  function portSize() {
+    var lv = state.lv;
+    var r = lv && lv.els.port ? lv.els.port.getBoundingClientRect() : null;
+    return r && r.width > 0 && r.height > 0 ? { w: r.width, h: r.height } : null;
+  }
+  function fitScale() {
+    var v = lvVersion();
+    var size = portSize();
+    if (!v || !size) return 1;
+    return Math.min(size.w / v.width, size.h / v.height);
+  }
+  function clampPan() {
+    var lv = state.lv;
+    var v = lvVersion();
+    var size = portSize();
+    if (!v || !size) return;
+    var w = v.width * lv.scale;
+    var h = v.height * 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));
+  }
+  function applyZoom() {
+    var lv = state.lv;
+    if (!lv || !lv.els.stage) return;
+    if (lv.fitted) lv.scale = fitScale();
+    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) + "%";
+  }
+  function fitViewer() { var lv = state.lv; if (!lv) return; lv.fitted = true; applyZoom(); }
+  function zoomAround(next, cx, cy) {
+    var lv = state.lv;
+    if (!lv || lv.mode === "edit") return;
+    var size = portSize();
+    if (!size) return;
+    var min = Math.min(fitScale(), 1);
+    var scale = Math.max(min, Math.min(ZOOM_MAX, next));
+    var px = cx === undefined ? size.w / 2 : cx;
+    var py = cy === undefined ? size.h / 2 : cy;
+    lv.x = px - (px - lv.x) * (scale / lv.scale);
+    lv.y = py - (py - lv.y) * (scale / lv.scale);
+    lv.scale = scale;
+    lv.fitted = false;
+    applyZoom();
+  }
+  function zoomBy(factor, cx, cy) { var lv = state.lv; if (lv) zoomAround(lv.scale * factor, cx, cy); }
+  function zoomTo(scale) { zoomAround(scale); }
+  function bindZoom(port) {
+    var pointers = {};
+    var pinch = null;
+    function local(e) { var r = port.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }
+    port.addEventListener("wheel", function (e) {
+      var lv = state.lv;
+      if (!lv || lv.mode === "edit") return;
+      if (e.preventDefault) e.preventDefault();
+      var p = local(e);
+      var dx = e.deltaMode === 1 ? e.deltaX * 16 : e.deltaX;
+      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; }
+      zoomBy(Math.exp(-dy * 0.002), p.x, p.y);
+    }, { passive: false });
+    port.addEventListener("dblclick", function (e) {
+      var lv = state.lv;
+      if (!lv || lv.mode === "edit") return;
+      var p = local(e);
+      if (Math.abs(lv.scale - 1) < 0.001) fitViewer(); else zoomAround(1, p.x, p.y);
+    });
+    port.addEventListener("pointerdown", function (e) {
+      var lv = state.lv;
+      if (!lv || lv.mode === "edit" || (e.target && e.target.closest && e.target.closest("button"))) return;
+      pointers[e.pointerId] = local(e);
+      var ids = Object.keys(pointers);
+      if (ids.length === 2) {
+        var a = pointers[ids[0]], b = pointers[ids[1]];
+        pinch = { d: Math.hypot(a.x - b.x, a.y - b.y) || 1, scale: lv.scale };
+      }
+      if (port.setPointerCapture) { try { port.setPointerCapture(e.pointerId); } catch (err) { /* best effort */ } }
+      port.classList.add("grabbing");
+    });
+    port.addEventListener("pointermove", function (e) {
+      var lv = state.lv;
+      var last = pointers[e.pointerId];
+      if (!lv || !last) return;
+      var p = local(e);
+      pointers[e.pointerId] = p;
+      var ids = Object.keys(pointers);
+      if (ids.length === 2 && pinch) {
+        var a = pointers[ids[0]], b = pointers[ids[1]];
+        var d = Math.hypot(a.x - b.x, a.y - b.y) || 1;
+        zoomAround(pinch.scale * d / pinch.d, (a.x + b.x) / 2, (a.y + b.y) / 2);
+        return;
+      }
+      lv.x += p.x - last.x;
+      lv.y += p.y - last.y;
+      lv.fitted = false;
+      applyZoom();
+    });
+    function up(e) {
+      delete pointers[e.pointerId];
+      if (Object.keys(pointers).length < 2) pinch = null;
+      if (Object.keys(pointers).length === 0) port.classList.remove("grabbing");
+    }
+    port.addEventListener("pointerup", up);
+    port.addEventListener("pointercancel", up);
+  }
+  window.addEventListener("resize", function () { if (state.lv) applyZoom(); });
+
+  document.addEventListener("keydown", function (e) {
+    var lv = state.lv;
+    if (!lv) return;
+    var typing = e.target && e.target.tagName === "INPUT";
+    if (e.key === "Escape") { if (lv.committing) return; if (lv.mode) setViewerMode(null); else closeViewer(); return; }
+    if (typing || lv.mode) return;
+    if (e.key === "ArrowLeft") stepViewer(-1);
+    else if (e.key === "ArrowRight") stepViewer(1);
+    else if (e.key === "+" || e.key === "=") zoomBy(1.25);
+    else if (e.key === "-") zoomBy(1 / 1.25);
+    else if (e.key === "0") fitViewer();
+    else if (e.key === "1") zoomTo(1);
+  });
+`;
+//# sourceMappingURL=mcp-slate-ui-script-viewer.js.map

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

@@ -0,0 +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"}

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

@@ -1,9 +1,8 @@
 /**
  * The workspace view's script, assembled from single-purpose fragments that
  * share one scope: bridge (host protocol), state (view state, picture queue,
- * polling, what the ops say), l10n (the person's language and every word, `t(key)`), progress, inline (the card), select (Select and
- * the hand-offs), inspiration (the tabs and the Inspiration tab), stage
- * (fullscreen), pause (the inspiration pause of the hosted server), dialog (Edit, Branch and Convert), more (the Generate more tile and its panel), scribble (the drawing layer of Edit), the hosted and browser targets' words, then the handshake, last, so every function and
+ * polling, what the ops say), l10n (the person's language and every word, `t(key)`), inline (the card), select (Select), inspiration (the tabs and the Inspiration tab), stage
+ * (fullscreen), pause (the inspiration pause of the hosted server), edit (what the large view's Edit sends), more (the Generate more tile and its panel), scribble (the drawing layer of Edit), the hosted and browser targets' words, then the handshake, last, so every function and
  * variable exists before the first message can arrive. The tool names come
  * from the view contract (SLATE_UI_TOOLS), not from the server's own module.
  *
@@ -19,8 +18,8 @@
 export type SlateUiTarget = 'local' | 'remote' | 'browser';
 /**
  * The script for one target. The fragments are the same for both; the target is a constant they read (`TARGET`), and
- * only the places the two servers differ branch on it: what the agent is told, how a running op reads, which Convert
- * outputs exist and what the edit carries.
+ * only the places the two servers differ branch on it: what the agent is told, how a running op reads and what the
+ * edit carries.
  */
 export declare const buildSlateUiScript: (target: SlateUiTarget) => string;
 export declare const SLATE_UI_SCRIPT: string;

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":"AAkBA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AA2B3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MA0B/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":"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"}

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

@@ -1,20 +1,22 @@
-import { SLATE_BROWSER_PAGE_KEYS, SLATE_CONVERT_CHOICES, SLATE_CONVERT_DESCRIPTION_KEYS, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_REMOTE_CONVERT_DESCRIPTION_KEYS } from './mcp-slate-ui-copy.js';
+import { SLATE_BROWSER_PAGE_KEYS, SLATE_MORE_COUNTS } from './mcp-slate-ui-copy.js';
 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_DIALOG } from './mcp-slate-ui-script-dialog.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_NO_PAUSE, SLATE_UI_PAUSE } from './mcp-slate-ui-script-pause.js';
-import { SLATE_UI_PROGRESS } from './mcp-slate-ui-script-progress.js';
+import { SLATE_UI_REFERENCES } from './mcp-slate-ui-script-references.js';
 import { SLATE_UI_REMOTE } from './mcp-slate-ui-script-remote.js';
 import { SLATE_UI_SCRIBBLE } from './mcp-slate-ui-script-scribble.js';
 import { SLATE_UI_SELECT } from './mcp-slate-ui-script-select.js';
 import { SLATE_UI_STAGE } from './mcp-slate-ui-script-stage.js';
 import { SLATE_UI_STATE } from './mcp-slate-ui-script-state.js';
+import { SLATE_UI_VIEWER } from './mcp-slate-ui-script-viewer.js';
 /**
  * Every shipped catalogue as the screen carries it: all keys but the words of the browser page around it (that page
  * carries its own, SLATE_BROWSER_PAGE_KEYS; the title is both's).
@@ -40,29 +42,26 @@ const HANDSHAKE = String.raw `
 `;
 /**
  * The script for one target. The fragments are the same for both; the target is a constant they read (`TARGET`), and
- * only the places the two servers differ branch on it: what the agent is told, how a running op reads, which Convert
- * outputs exist and what the edit carries.
+ * only the places the two servers differ branch on it: what the agent is told, how a running op reads and what the
+ * edit carries.
  */
 export const buildSlateUiScript = (target) => [
     '"use strict";',
     '(function () {',
     SLATE_UI_BRIDGE
         .replace('__TOOLS__', () => JSON.stringify(SLATE_UI_TOOLS))
-        .replace('__TARGET__', () => JSON.stringify(target))
-        .replace('__CONVERT__', () => JSON.stringify({
-        choices: target === 'remote' ? SLATE_REMOTE_CONVERT_CHOICES : SLATE_CONVERT_CHOICES,
-        descriptionKeys: target === 'remote' ? SLATE_REMOTE_CONVERT_DESCRIPTION_KEYS : SLATE_CONVERT_DESCRIPTION_KEYS,
-        maxWidth: SLATE_CONVERT_MAX_WIDTH,
-    })),
+        .replace('__TARGET__', () => JSON.stringify(target)),
     SLATE_UI_STATE,
     buildSlateUiL10n(screenMessages()),
-    SLATE_UI_PROGRESS,
     SLATE_UI_INLINE,
     SLATE_UI_SELECT,
     SLATE_UI_INSPIRATION,
+    SLATE_UI_REFERENCES,
     target === 'remote' ? SLATE_UI_PAUSE : SLATE_UI_NO_PAUSE,
+    SLATE_UI_DESIGNS,
+    SLATE_UI_VIEWER,
     SLATE_UI_STAGE,
-    SLATE_UI_DIALOG.replace('__EDIT_PROMPT_MAX_BYTES__', () => JSON.stringify(SLATE_EDIT_PROMPT_MAX_BYTES)),
+    SLATE_UI_EDIT.replace('__EDIT_PROMPT_MAX_BYTES__', () => JSON.stringify(SLATE_EDIT_PROMPT_MAX_BYTES)),
     SLATE_UI_MORE.replace('__MORE__', () => JSON.stringify(SLATE_MORE_COUNTS)),
     SLATE_UI_SCRIBBLE,
     SLATE_UI_REMOTE,

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

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

@@ -0,0 +1,10 @@
+/**
+ * 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
+ * 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 declare const SLATE_UI_DESIGNS_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-designs.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,121 @@
+/**
+ * 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
+ * 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; }
+  @media (max-width: 639px) { #stage .designs { --tile: 130px; } }
+
+  /* The bar: how many a round draws, and More. */
+  .dbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
+  .dbar .alert { flex-basis: 100%; text-align: right; }
+  .dbar .alert:empty { display: none; }
+  .seg.count { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; background: var(--fill); }
+  button.segbtn { min-width: 40px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text2); font-variant-numeric: tabular-nums; }
+  button.segbtn[aria-checked="true"] { background: var(--bg); color: var(--text); box-shadow: var(--elev); }
+  .morebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px 7px 12px; border-radius: 999px; }
+
+  /* A round: a small head (number, what fed it, a status dot), then its grid. */
+  .dsec { min-width: 0; }
+  .dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; min-height: 36px; margin-bottom: 10px; }
+  .dtitle { flex: none; margin: 0; font-size: 13px; font-weight: 600; }
+  .dbranchicon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-solid); color: var(--inverse-text); }
+  .feed { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
+  .feedimg { display: block; flex: none; width: 34px; height: 24px; border-radius: 4px; background: var(--fill); object-fit: cover; }
+  .feedimg.design { width: 36px; outline: 2px solid var(--ring); outline-offset: 1px; margin-right: 4px; }
+  .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; }
+  .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; }
+
+  /* A tile: the picture, then its row. */
+  .dtile { position: relative; min-width: 0; }
+  button.dface { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 1.5); padding: 0; border: 0; border-radius: var(--radius); background: var(--fill); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border2); cursor: zoom-in; transition: box-shadow .12s; }
+  button.dface:hover:not(:disabled) { background: var(--fill); }
+  button.dface:disabled { opacity: 1; cursor: default; }
+  .dface .thumb { width: 100%; height: 100%; object-fit: contain; background: var(--fill); }
+  .dface .thumb:not([src]) { visibility: hidden; }
+  .dtile:hover .dface:not(:disabled) { box-shadow: inset 0 0 0 1px var(--border); }
+  .dtile.paused .dface { opacity: .55; }
+  .dtile.failed .dface { background: var(--bg); }
+  .failed .tilenote { color: var(--danger); }
+  /* 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; }
+  .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; }
+  button.dpick:hover:not(:disabled) { background: var(--bg); }
+  .dpick.on, button.dpick.on:hover:not(:disabled) { background: var(--accent-solid); color: var(--inverse-text); }
+  .dtile:hover .dpick, .dtile:focus-within .dpick { opacity: 1; }
+  @media (hover: none) { .dpick { opacity: 1; } }
+
+  /* The chosen design: the selection's ring and filled check, as on the inspiration tiles. */
+  .dtile.chosen .dface { box-shadow: 0 0 0 3px var(--ring); }
+  .dchosen { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-solid); color: var(--inverse-text); pointer-events: none; box-shadow: 0 0 0 2px var(--bg); }
+  .dchosen.inline { position: static; flex: none; width: 22px; height: 22px; box-shadow: none; }
+
+  /* Icon actions. */
+  button.ia { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text2); }
+  button.ia:hover:not(:disabled) { background: var(--fill); color: var(--text); }
+  button.ia.choose[aria-pressed="true"], button.ia.choose[aria-pressed="true"]:hover { background: var(--accent-solid); color: var(--inverse-text); }
+  button.ia.big { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
+  button.ia.big:hover:not(:disabled) { background: var(--fill); }
+  button.ia.big.choose[aria-pressed="true"] { border-color: var(--accent-solid); }
+  button.ia.big.wide { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 16px; font-size: var(--fs-sm); font-weight: 600; }
+  button.ia.big.wide.primary, button.ia.big.wide.primary:hover:not(:disabled) { background: var(--inverse); color: var(--inverse-text); border-color: var(--inverse); }
+  button.ia.big.wide.primary:hover:not(:disabled) { opacity: .88; }
+  button.ia.go { background: var(--inverse); color: var(--inverse-text); border-radius: 999px; width: 34px; height: 34px; }
+  button.ia.go:hover:not(:disabled) { background: var(--inverse); color: var(--inverse-text); opacity: .85; }
+
+  /* The large view. */
+  .lv { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+  #stage .lv { position: fixed; inset: 0; z-index: 15; padding: 12px 16px 14px; background: var(--bg); }
+  .lvbar { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 36px; }
+  .lvbar .dtag { flex: 0 1 auto; }
+  .lvcount { flex: none; min-width: 52px; text-align: center; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
+  .lvport { position: relative; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--fill); touch-action: none; cursor: grab; user-select: none; }
+  #stage .lvport { flex: 1 1 auto; min-height: 0; }
+  #viewer .lvport { width: 100%; aspect-ratio: var(--ar, 1.5); }
+  .lvport.grabbing { cursor: grabbing; }
+  .lvport.drawing { cursor: crosshair; }
+  .lvport.busy { opacity: .6; }
+  .lvstage { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: var(--elev-lg); }
+  .lvimg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
+  .lvimg:not([src]) { visibility: hidden; }
+  .lvzoom { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); box-shadow: var(--elev); }
+  .lvlevel { min-width: 58px; padding: 4px 6px; border: 0; background: transparent; font-size: 12px; font-variant-numeric: tabular-nums; }
+  .lvfoot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
+  .alert { margin: 0; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
+  .lvfoot .alert:empty { display: none; }
+  .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); }
+  .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; } }
+  /* 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; }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-designs.js.map