@12ui/design 0.2.76 → 0.2.78

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

@@ -18,8 +18,9 @@
  * Nothing here shows or asks for money.
  */
 export const SLATE_UI_DIALOG = String.raw `
-  var DIALOG_TITLES = { edit: COPY.edit, branch: COPY.branch, convert: COPY.convert };
-  var DIALOG_VERBS = { edit: COPY.apply, branch: COPY.send, convert: COPY.send };
+  // Catalogue keys: the dialog's title is its button's verb, and its primary says what confirming does.
+  var DIALOG_TITLES = { edit: "edit", branch: "branch", convert: "convert" };
+  var DIALOG_VERBS = { edit: "apply", branch: "send", convert: "send" };
 
   function field(labelText, control, id) {
     var wrap = el("div", "field");
@@ -66,8 +67,35 @@ export const SLATE_UI_DIALOG = String.raw `
     return row;
   }
 
+  // ---- the edit instruction, counted as the servers count it: UTF-8 bytes of the words, control characters stripped ----
+  var EDIT_PROMPT_MAX_BYTES = __EDIT_PROMPT_MAX_BYTES__;
+  function editWords(text) { return String(text || "").replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, "").trim(); }
+  function utf8Bytes(text) {
+    var n = 0;
+    for (var i = 0; i < text.length; i++) {
+      var c = text.charCodeAt(i);
+      if (c < 0x80) n += 1;
+      else if (c < 0x800) n += 2;
+      else if (c >= 0xd800 && c <= 0xdbff && i + 1 < text.length && text.charCodeAt(i + 1) >= 0xdc00 && text.charCodeAt(i + 1) <= 0xdfff) { n += 4; i++; }
+      else n += 3;
+    }
+    return n;
+  }
+  // How many characters must go from the end of the instruction for it to fit; 0 when it fits.
+  function editOverBy(text) {
+    var words = editWords(text);
+    var over = utf8Bytes(words) - EDIT_PROMPT_MAX_BYTES;
+    if (over <= 0) return 0;
+    var chars = Array.from(words);
+    var cut = 0;
+    while (over > 0 && chars.length > 0) { over -= utf8Bytes(chars.pop()); cut++; }
+    return cut;
+  }
+
   // ---- what this Mac can do now ----
   function localImage() { return (state.view && state.view.local && state.view.local.image) || { ready: false, reason: null }; }
+  // Why this Mac cannot draw, in the person's language when the server named it by code.
+  function localReason() { var local = localImage(); return serverText(local.reasonL10n, local.reason); }
 
   // ---- open and close ----
   function openDialog(kind, opener) {
@@ -108,7 +136,7 @@ export const SLATE_UI_DIALOG = String.raw `
     return compositeMarked(version, d.strokes).then(function (marked) {
       action.annotated = marked;
       return action;
-    }, function (err) { throw new Error(tpl(COPY.markFailed, { detail: errText(err) })); });
+    }, function (err) { throw new Error(t("markFailed", { detail: errText(err) })); });
   }
   function convertChoice(d) { return CONVERT.choices.filter(function (c) { return c.value === d.format; })[0]; }
   // An empty width is fine (the service picks); anything else must be a whole number the CLI accepts.
@@ -133,7 +161,7 @@ export const SLATE_UI_DIALOG = String.raw `
   function dialogReady(d) {
     var v = ver(d.versionId);
     // An edit needs a drawing, words or both; Branch has no required field.
-    if (d.kind === "edit") return localImage().ready && !!v && v.editable && (d.strokes.length > 0 || !!d.prompt.trim());
+    if (d.kind === "edit") return localImage().ready && !!v && v.editable && (d.strokes.length > 0 || !!d.prompt.trim()) && editOverBy(d.prompt) === 0;
     if (d.kind === "branch") return true;
     return !!convertChoice(d) && widthOf(d).ok;
   }
@@ -143,8 +171,9 @@ export const SLATE_UI_DIALOG = String.raw `
     return callTool(TOOLS.run, { runDir: state.view.runDir, opId: opId, action: action }).then(function (result) {
       var sc = result.structuredContent || {};
       if (sc.view) applyView(sc.view, true);
-      // The hosted server has no runner: the person's agent does the work, and is told here (best effort, like Select).
-      if (TARGET === "remote") remoteTellRun(action, opId);
+      // The hosted server draws nothing: the workspace runner on the person's Mac does, or else the person's agent,
+      // which is told here (best effort, like Select) only when no runner holds the workspace.
+      if (TARGET === "remote") remoteAfterRun(action, opId, sc.runner);
       return sc;
     });
   }
@@ -181,7 +210,7 @@ export const SLATE_UI_DIALOG = String.raw `
     var wrap = el("div", "imgwrap");
     wrap.style.setProperty("--ar", String(v.width / v.height));
     var img = el("img", "stageimg empty");
-    img.alt = COPY.versionPrefix + v.label;
+    img.alt = t("versionName", { label: v.label });
     img.setAttribute("draggable", "false");
     wrap.appendChild(img);
     bindImage(img, v, "full", true);
@@ -191,54 +220,54 @@ export const SLATE_UI_DIALOG = String.raw `
     box.appendChild(wrap);
     // Under the image: the hint that it can be drawn on, and the two drawing controls.
     var tools = el("div", "dialogtools");
-    tools.appendChild(el("p", "hint", COPY.scribbleHint));
-    d.els.undo = button(COPY.undo, "", function () { scribbleUndo(d); });
-    d.els.clear = button(COPY.clear, "", function () { scribbleClear(d); });
+    tools.appendChild(el("p", "hint", t("scribbleHint")));
+    d.els.undo = button(t("undo"), "", function () { scribbleUndo(d); });
+    d.els.clear = button(t("clear"), "", function () { scribbleClear(d); });
     tools.appendChild(d.els.undo);
     tools.appendChild(d.els.clear);
     box.appendChild(tools);
-    box.appendChild(textarea("dialogedit", 3, COPY.editPlaceholder, 6000, function (value) { d.prompt = value; }, COPY.editAria));
+    box.appendChild(textarea("dialogedit", 3, t("editPlaceholder"), 6000, function (value) { d.prompt = value; }, t("editAria")));
     d.els.help = helpLine("");
     box.appendChild(d.els.help);
   }
   function branchBody(d, box) {
-    box.appendChild(textarea("dialogbranch", 4, COPY.branchPlaceholder, 2000, function (value) { d.explanation = value; }, COPY.branchAria));
-    box.appendChild(helpLine(COPY.branchHelp));
+    box.appendChild(textarea("dialogbranch", 4, t("branchPlaceholder"), 2000, function (value) { d.explanation = value; }, t("branchAria")));
+    box.appendChild(helpLine(t("branchHelp")));
   }
   function convertBody(d, box) {
     var select = el("select");
     select.id = "dialogformat";
     var service = el("optgroup");
-    service.setAttribute("label", COPY.serviceGroup);
+    service.setAttribute("label", t("serviceGroup"));
     CONVERT.choices.forEach(function (choice) {
-      var option = el("option", "", choice.label);
+      var option = el("option", "", choice.labelKey ? t(choice.labelKey) : choice.label);
       option.setAttribute("value", choice.value);
       if (choice.value === d.format) option.setAttribute("selected", "");
       (choice.engine === "local" ? select : service).appendChild(option);
     });
     if (service.childNodes.length > 0) select.appendChild(service);
     select.addEventListener("change", function () { d.format = select.value; updateDialogUi(); });
-    box.appendChild(field(COPY.convertLabel, select, "dialogformat"));
+    box.appendChild(field(t("convertLabel"), select, "dialogformat"));
     // One line that follows the choice: what the person gets.
     d.els.formatHelp = helpLine("");
     box.appendChild(d.els.formatHelp);
     // The hosted server builds from the image and has nothing else to ask: no quality, width or layouts.
     if (TARGET === "remote") return;
     // Only the options the chosen format has are shown; the rest are hidden, not disabled. Each says what it does in one line.
-    d.els.quality = group(COPY.qualityLabel, radioRow("quality", [{ value: "fast", label: COPY.fast }, { value: "standard", label: COPY.standard }, { value: "pro", label: COPY.pro }], d.quality, function (value) { d.quality = value; }));
-    d.els.quality.appendChild(helpLine(COPY.qualityHelp));
+    d.els.quality = group(t("qualityLabel"), radioRow("quality", [{ value: "fast", label: t("fast") }, { value: "standard", label: t("standard") }, { value: "pro", label: t("pro") }], d.quality, function (value) { d.quality = value; }));
+    d.els.quality.appendChild(helpLine(t("qualityHelp")));
     var width = el("input");
     width.type = "number";
     width.id = "dialogwidth";
     width.setAttribute("min", "1");
     width.setAttribute("max", String(CONVERT.maxWidth));
-    width.setAttribute("placeholder", COPY.widthPlaceholder);
+    width.setAttribute("placeholder", t("widthPlaceholder"));
     width.setAttribute("inputmode", "numeric");
     width.addEventListener("input", function () { d.width = width.value; updateDialogUi(); });
-    d.els.width = field(COPY.widthLabel, width, "dialogwidth");
-    d.els.width.appendChild(helpLine(COPY.widthHelp));
-    d.els.layouts = group(COPY.layoutsLabel, radioRow("layouts", [{ value: "standard", label: COPY.standard }, { value: "pro", label: COPY.pro }], d.layouts, function (value) { d.layouts = value; }));
-    d.els.layouts.appendChild(helpLine(COPY.layoutsHelp));
+    d.els.width = field(t("widthLabel"), width, "dialogwidth");
+    d.els.width.appendChild(helpLine(t("widthHelp")));
+    d.els.layouts = group(t("layoutsLabel"), radioRow("layouts", [{ value: "standard", label: t("standard") }, { value: "pro", label: t("pro") }], d.layouts, function (value) { d.layouts = value; }));
+    d.els.layouts.appendChild(helpLine(t("layoutsHelp")));
     [d.els.quality, d.els.width, d.els.layouts].forEach(function (node) { box.appendChild(node); });
   }
 
@@ -251,8 +280,8 @@ export const SLATE_UI_DIALOG = String.raw `
     var box = el("div", "modalbox" + (d.kind === "edit" ? " wide" : ""));
     box.setAttribute("role", "dialog");
     box.setAttribute("aria-modal", "true");
-    box.setAttribute("aria-label", DIALOG_TITLES[d.kind]);
-    box.appendChild(el("h2", "", DIALOG_TITLES[d.kind]));
+    box.setAttribute("aria-label", t(DIALOG_TITLES[d.kind]));
+    box.appendChild(el("h2", "", t(DIALOG_TITLES[d.kind])));
     if (d.kind === "edit") editBody(d, box);
     else if (d.kind === "branch") branchBody(d, box);
     else convertBody(d, box);
@@ -261,8 +290,8 @@ export const SLATE_UI_DIALOG = String.raw `
     box.appendChild(d.els.alert);
     var buttons = el("div", "dialogbtns");
     buttons.appendChild(el("span", "spacer"));
-    buttons.appendChild(button(COPY.cancel, "", closeDialog));
-    d.els.primary = button(DIALOG_VERBS[d.kind], "primary", commitDialog);
+    buttons.appendChild(button(t("cancel"), "", closeDialog));
+    d.els.primary = button(t(DIALOG_VERBS[d.kind]), "primary", commitDialog);
     buttons.appendChild(d.els.primary);
     box.appendChild(buttons);
     backdrop.appendChild(box);
@@ -280,17 +309,18 @@ export const SLATE_UI_DIALOG = String.raw `
     // A dialog that cannot run on this Mac says why, in the same line an error would use.
     var local = localImage();
     var blockedByLocal = d.kind === "edit" && !local.ready;
-    d.els.alert.textContent = d.error || (blockedByLocal && local.reason ? local.reason : "");
+    var tooLong = d.kind === "edit" ? editOverBy(d.prompt) : 0;
+    d.els.alert.textContent = d.error || (blockedByLocal ? localReason() : "") || (tooLong > 0 ? t("editTooLong", { n: tooLong }) : "");
     d.els.alert.classList.toggle("hidden", !d.els.alert.textContent);
     if (d.els.undo) d.els.undo.disabled = d.strokes.length === 0 || d.committing;
     if (d.els.clear) d.els.clear.disabled = d.strokes.length === 0 || d.committing;
     if (d.els.help) {
       var marksOnly = d.strokes.length > 0 && !d.prompt.trim();
-      d.els.help.textContent = marksOnly ? COPY.editHelpMarks : tpl(COPY.editHelp, { label: (ver(d.versionId) || {}).label || "" });
+      d.els.help.textContent = marksOnly ? t("editHelpMarks") : t("editHelp", { label: (ver(d.versionId) || {}).label || "" });
     }
     if (d.kind === "convert") {
       var choice = convertChoice(d);
-      d.els.formatHelp.textContent = (choice && CONVERT.descriptions[choice.value]) || "";
+      d.els.formatHelp.textContent = choice && CONVERT.descriptionKeys[choice.value] ? t(CONVERT.descriptionKeys[choice.value]) : "";
     }
     if (d.kind === "convert" && TARGET !== "remote") {
       var isLocal = !!choice && choice.engine === "local";

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4SxC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0UxC,CAAC"}

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

@@ -1,10 +1,13 @@
 /**
- * The inline card: one large image of the selected option with a badge, one
- * row under it with the strip of thumbnails (the newest round, plus the picked
- * or viewed option of an older round) and Select, and one status line;
- * an icon-only control opens the workspace. Also the view application, the
- * large image and the thumbnail buttons shared with the workspace, and the
- * tool-result entry point.
+ * The inline card: one large image of the selected option with a badge,
+ * Select under it, and the strip of thumbnails (the newest round, plus the
+ * picked or viewed option of an older round) on as many rows as it takes,
+ * ending with the Generate more tile; an icon-only control opens the
+ * workspace. There is no status line: an option being drawn shimmers, one
+ * that failed or stopped says why on its tile, and an error about a click
+ * shows beside Select. Also the view application, the large image and the
+ * thumbnail buttons shared with the workspace, and the tool-result entry
+ * point.
  */
 export declare const SLATE_UI_INLINE: string;
 //# sourceMappingURL=mcp-slate-ui-script-inline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-inline.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inline.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,QAsN3B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-inline.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-inline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,QAgQ3B,CAAC"}

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

@@ -1,10 +1,13 @@
 /**
- * The inline card: one large image of the selected option with a badge, one
- * row under it with the strip of thumbnails (the newest round, plus the picked
- * or viewed option of an older round) and Select, and one status line;
- * an icon-only control opens the workspace. Also the view application, the
- * large image and the thumbnail buttons shared with the workspace, and the
- * tool-result entry point.
+ * The inline card: one large image of the selected option with a badge,
+ * Select under it, and the strip of thumbnails (the newest round, plus the
+ * picked or viewed option of an older round) on as many rows as it takes,
+ * ending with the Generate more tile; an icon-only control opens the
+ * workspace. There is no status line: an option being drawn shimmers, one
+ * that failed or stopped says why on its tile, and an error about a click
+ * shows beside Select. Also the view application, the large image and the
+ * thumbnail buttons shared with the workspace, and the tool-result entry
+ * point.
  */
 export const SLATE_UI_INLINE = String.raw `
   // ---- apply a view: selection, announcements, polling, render ----
@@ -32,13 +35,14 @@ export const SLATE_UI_INLINE = String.raw `
         state.awaitEdit = null;
       }
     }
-    syncOpStatus(prev, view);
+    syncStaleLine(view);
+    syncPause();
     if (view.pick && pickRestored !== view.runDir) {
       pickRestored = view.runDir;
       var earlier = ver(view.pick.versionId);
       if (earlier) state.sel = { candidateId: earlier.candidateId, versionId: earlier.versionId, followLatest: false };
-      if (!fromPoll && view.pick.fileState === "missing") setStatus(COPY.pickMissing, "err");
-      else if (!fromPoll && view.pick.fileState === "changed") setStatus(COPY.pickChanged, "err");
+      if (!fromPoll && view.pick.fileState === "missing") setStatus(t("pickMissing"), "err");
+      else if (!fromPoll && view.pick.fileState === "changed") setStatus(t("pickChanged"), "err");
     }
     ensureSelection();
     renderAll();
@@ -55,9 +59,24 @@ export const SLATE_UI_INLINE = String.raw `
     // A dialog that is open follows the view: what this Mac can do now, for one.
     if (state.dialog) updateDialogUi();
     syncMore();
+    if (pause.opId) syncPauseBars();
     reportSize();
   }
 
+  // A new language: every container is built again in it on the next render. An open dialog and the Generate more panel
+  // close, because they were built in the old words; what the person typed in the search box stays (state.query).
+  function relocalizeView() {
+    if (state.dialog) { state.dialog = null; if (stageEls.dialog) stageEls.dialog.textContent = ""; }
+    if (state.more) resetMore();
+    $("hero").__sig = null;
+    $("strip").__sig = null;
+    $("pausebar").__pause = null;
+    var pane = $("pane-inspiration");
+    pane.__built = false;
+    pane.textContent = "";
+    stageBuilt = false;
+  }
+
   // Rebuild a container only when what it shows changed, so polling never steals focus or discards typing.
   function setIfChanged(node, signature, build) {
     if (node.__sig === signature) return false;
@@ -69,13 +88,14 @@ export const SLATE_UI_INLINE = String.raw `
 
   // ---- the large image, shared by the card and the workspace ----
   function pickable(version) { return !!version && version.fileState === "ok"; }
-  // Why an option has no picture to show, or "" when it has one.
+  // Why an option has no picture to show, or "" when it has one. One being drawn is named; the shimmer says the rest.
   function optionNote(c) {
     var v = latestVersion(c);
-    if (c.state === "failed") return c.error || optionName(c);
-    if (c.state === "pending") return optionName(c);
-    if (v && v.fileState === "missing") return COPY.fileMissing;
-    if (v && v.fileState === "changed") return COPY.fileChanged;
+    if (c.state === "failed") return serverText(c.errorL10n, c.error) || optionName(c);
+    if (pausedFor(c)) return pausedRef(c) ? t("pauseDrawsFrom", { label: c.label }) : t("pauseNoReference");
+    if (c.state === "pending") return drawing(c) ? optionName(c) : stoppedReason(c);
+    if (v && v.fileState === "missing") return t("fileMissing");
+    if (v && v.fileState === "changed") return t("fileChanged");
     return "";
   }
   // The full picture jumps the queue; while it loads, the thumbnail (already fetched) stands in.
@@ -87,16 +107,18 @@ export const SLATE_UI_INLINE = String.raw `
     var shared = wrap.parentElement;
     if (shared) shared.style.removeProperty("--ar");
     if (!c) return;
+    var waitingRef = !v ? pausedRef(c) : null;
+    if (waitingRef) { pausedHeroInto(wrap, shared, c, waitingRef); return; }
     if (!v || v.fileState !== "ok") {
       wrap.classList.add("note");
-      var reason = !v ? optionNote(c) : v.fileState === "changed" ? COPY.fileChanged : COPY.fileMissing;
-      wrap.appendChild(el("div", "heronote" + (c.state === "pending" ? " shimmer" : ""), reason));
+      var reason = !v ? optionNote(c) : v.fileState === "changed" ? t("fileChanged") : t("fileMissing");
+      wrap.appendChild(el("div", "heronote" + (drawing(c) ? " shimmer" : ""), reason));
       return;
     }
     wrap.style.setProperty("--ar", String(v.width / v.height));
     if (shared) shared.style.setProperty("--ar", String(v.width / v.height));
     var img = el("img", "heroimg empty");
-    img.alt = COPY.versionPrefix + v.label;
+    img.alt = t("versionName", { label: v.label });
     img.setAttribute("draggable", "false");
     wrap.appendChild(img);
     bindImage(img, v, "full", true);
@@ -105,11 +127,26 @@ export const SLATE_UI_INLINE = String.raw `
     wrap.appendChild(el("span", "badge", v.label));
     if (c.busy) wrap.appendChild(progressBar());
   }
+  // An option of a round that waits for the person: the reference it will be drawn from, at that picture's ratio, named.
+  function pausedHeroInto(wrap, shared, c, referenceId) {
+    var meta = refMeta(referenceId);
+    var ratio = meta && meta.width > 0 && meta.height > 0 ? meta.width / meta.height : ratioOf(c);
+    wrap.style.setProperty("--ar", String(ratio));
+    if (shared) shared.style.setProperty("--ar", String(ratio));
+    var img = el("img", "heroimg empty");
+    img.alt = t("pauseDrawsFrom", { label: c.label });
+    img.setAttribute("draggable", "false");
+    wrap.appendChild(img);
+    fillImage(img, wantReference(referenceId, "thumb", true));
+    wrap.appendChild(el("span", "badge", t("pauseReferenceFor", { label: c.label })));
+  }
   function heroSignature(c, v) {
-    return JSON.stringify([state.sel, v && [v.sha256, v.fileState, v.label], c && [c.state, c.error, c.busy]]);
+    return JSON.stringify([state.sel, v && [v.sha256, v.fileState, v.label], c && [c.state, c.error, c.busy, drawing(c), optionNote(c), pausedRef(c)]]);
   }
 
-  // ---- a small thumbnail button for an option: the strip in the card, the selection in the workspace ----
+  // ---- a thumbnail button for an option: the strip in the card, the selection in the workspace ----
+  // The tile has the option's own ratio. With a picture it holds the picture (an <img> only once there is a file to
+  // show); being drawn it shimmers; without a picture otherwise it says why on the tile. Its code is always on it.
   function thumbButton(c, cls) {
     var b = button("", cls);
     var selected = state.sel.candidateId === c.candidateId;
@@ -117,75 +154,83 @@ export const SLATE_UI_INLINE = String.raw `
     b.setAttribute("aria-pressed", selected ? "true" : "false");
     if (selected) b.classList.add("selected");
     b.setAttribute("data-option", c.label);
+    b.style.setProperty("--ar", String(ratioOf(c)));
     var v = latestVersion(c);
-    var note = optionNote(c);
-    if (note && c.state !== "pending") b.title = note;
-    if (c.state === "failed" || (v && v.fileState !== "ok")) b.classList.add("failed");
-    if (c.state === "pending") b.classList.add("shimmer");
-    var img = el("img", "thumb empty");
-    img.alt = "";
-    if (v && v.fileState === "ok" && c.state === "ready") bindImage(img, v, "thumb", false);
-    else img.setAttribute("data-nofile", "");
-    b.appendChild(img);
+    var waitingRef = pausedRef(c);
+    if (drawing(c)) b.classList.add("shimmer");
+    else if (waitingRef) {
+      // Not drawn yet: the tile shows the reference this option will be drawn from.
+      b.classList.add("paused");
+      b.title = t("pauseDrawsFrom", { label: c.label });
+      var ref = el("img", "thumb empty");
+      ref.alt = "";
+      b.appendChild(ref);
+      bindReference(ref, waitingRef, "thumb");
+    } else if (c.state === "ready" && v && v.fileState === "ok") {
+      var img = el("img", "thumb empty");
+      img.alt = "";
+      b.appendChild(img);
+      bindImage(img, v, "thumb", false);
+    } else {
+      var note = optionNote(c);
+      b.title = note;
+      b.classList.add(c.state === "pending" ? "stopped" : "failed");
+      var words = el("span", "tilenote");
+      words.appendChild(el("span", "", note));
+      b.appendChild(words);
+    }
     b.appendChild(el("b", "code", c.label));
     b.addEventListener("click", function () { selectCandidate(c.candidateId); });
     return b;
   }
   function thumbSignature(c) {
     var lv = latestVersion(c);
-    return [c.candidateId, c.state, c.error, c.latestVersionId, c.versionIds.length, lv ? lv.fileState : ""];
+    return [c.candidateId, c.state, c.error, c.latestVersionId, c.versionIds.length, lv ? lv.fileState : "", drawing(c), optionNote(c), ratioOf(c), pausedRef(c)];
   }
 
   function renderInline() {
     var v = state.view;
     var empty = v.candidates.length === 0;
     $("empty").classList.toggle("hidden", !empty);
-    $("empty").textContent = COPY.empty;
+    $("empty").textContent = t("empty");
     $("card").classList.toggle("hidden", empty);
     if (empty) { reportSize(); return; }
     syncTabs();
     var onDesigns = state.tab === "designs";
     $("pane-designs").classList.toggle("hidden", !onDesigns);
     $("pane-inspiration").classList.toggle("hidden", onDesigns);
+    syncPauseHost($("pausebar"), true);
     if (!onDesigns) {
       renderInspiration($("pane-inspiration"), "card");
       syncControls();
       reportSize();
       return;
     }
-    syncProgressLine(v);
     var c = selectedCandidate();
     var sel = selectedVersion();
     setIfChanged($("hero"), heroSignature(c, sel), function (node) { heroInto(node, c, sel); });
     var strip = $("strip");
-    // Where keyboard focus sits among the strip's buttons (the thumbnails), so a rebuild can put it back.
+    // Where keyboard focus sits among the strip's buttons (the thumbnails and the tile), so a rebuild can put it back.
     var focusAt = strip.contains(document.activeElement) ? Array.prototype.indexOf.call(strip.querySelectorAll("button"), document.activeElement) : -1;
     var options = inlineCandidates();
     var rebuilt = setIfChanged(strip, JSON.stringify([state.sel.candidateId, options.map(thumbSignature)]), function (node) {
       options.forEach(function (x) { node.appendChild(thumbButton(x, "thumbbtn")); });
+      // The strip wraps onto as many rows as it needs, so the Generate more tile, last, is always in view after the options.
+      node.appendChild(moreTile());
+      setShape(node, ratioOf(options[0]));
     });
-    // The Generate more tile is pinned beside the strip, outside its scroll, so it is never pushed out of view; built once.
-    var wrap = $("stripwrap");
-    if (!wrap.querySelector(".moretile")) wrap.appendChild(moreTile());
     // Choosing a thumbnail rebuilds the strip: keep keyboard focus at the same place in it.
     var stripButtons = strip.querySelectorAll("button");
     if (rebuilt && focusAt >= 0 && stripButtons[focusAt]) stripButtons[focusAt].focus();
-    var shown = Array.prototype.filter.call(strip.children, function (b) { return b.classList.contains("selected"); })[0];
-    if (rebuilt && shown && shown.scrollIntoView && strip.scrollWidth > strip.clientWidth) { try { shown.scrollIntoView({ inline: "nearest", block: "nearest" }); } catch (e) { /* best effort */ } }
-    strip.classList.toggle("fade", strip.scrollWidth > strip.clientWidth + 1);
     syncControls();
     reportSize();
   }
-  window.addEventListener("resize", function () {
-    var strip = $("strip");
-    if (strip) strip.classList.toggle("fade", strip.scrollWidth > strip.clientWidth + 1);
-  });
 
   function syncControls() {
     if (!state.view) return;
     var v = selectedVersion();
     var same = samePick(v);
-    var label = same ? COPY.selected : COPY.select;
+    var label = same ? t("selected") : t("select");
     var disabled = !(pickable(v) && !state.busy && !same);
     if (!isFullscreen()) {
       var expand = $("expand");
@@ -211,12 +256,12 @@ export const SLATE_UI_INLINE = String.raw `
   // ---- tool result: the workspace ----
   function onToolResult(result) {
     if (!result || result.isError) {
-      var t = result && result.content && result.content[0] && result.content[0].text;
-      fatal(COPY.toolError + (t ? ": " + t : "."));
+      var said = result && result.content && result.content[0] && result.content[0].text;
+      fatal(said ? t("toolErrorDetail", { detail: said }) : t("toolError"));
       return;
     }
     var data = result.structuredContent;
-    if (!data || !Array.isArray(data.candidates)) { fatal(COPY.noView); return; }
+    if (!data || !Array.isArray(data.candidates)) { fatal(t("noView")); return; }
     applyView(data, false);
   }
 

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * The Inspiration tab's page, the same in the card and the workspace: the
+ * search row, a line that says whose words are in the box, the status line,
+ * a line that says how many results the grid shows and why no more, the grid,
+ * and, while references are selected, Generate.
+ *
+ * - The grid: the search of the words in the box at the top (skeleton tiles
+ *   while it runs, a line when it found nothing), then one section per round,
+ *   newest first, with the references that produced its options. Every grid is
+ *   a collage (`mcp-slate-ui-script-inspiration-collage.ts`): each picture at
+ *   its own aspect ratio, every band as wide as the grid.
+ * - Every reference a round used carries a badge that says where, from the
+ *   round records only: a reference is used when the round lists it
+ *   (`rounds[].referenceIds`), and the options are those whose `referenceId`
+ *   is it, e.g. "Used in round 1, option B". Nothing is inferred.
+ * - Generate asks for one new round drawn from exactly the selected
+ *   references: it is Generate more's own request (`startRound`, which first
+ *   waits for the selection write, then `design.slate.run` with a new round),
+ *   so the server freezes the selection into the round and the person's agent
+ *   or the local runner is told the same way. It draws the panel's default
+ *   count, or the next count up when more references are selected, so every
+ *   selected reference is drawn from at least once. While a round runs it is
+ *   off and says why.
+ */
+export declare const SLATE_UI_INSPIRATION_GRID: string;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration-grid.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,yBAAyB,QA4NrC,CAAC"}