@12ui/design 0.2.80 → 0.2.82

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

@@ -1,55 +1,30 @@
 /**
- * The fullscreen workspace: on the left the selection (the Generate more tile
- * on top, where the next round will land, its panel under it, then compact
- * thumbnails grouped by round, newest first, each option with its versions as
- * chips; one column that scrolls as a whole), in the middle one large image,
- * and under it one row of actions at the right: Edit, Branch and Convert, then
- * Select (primary) at the far right. Nothing else shows until a button is
- * clicked; the dialogs live in mcp-slate-ui-script-dialog.ts. One band above
- * the image says what is running (on the local plugin; on the hosted server
- * the person's agent says it), stopped or failed, with Resume when the work
- * can resume. Mounted only in fullscreen.
+ * The fullscreen workspace: the prompt card, the tab row (the tabs, the quiet selected count and the icon that leaves
+ * full screen), then the selected tab. Designs is the same tab as the
+ * card's (mcp-slate-ui-script-designs.ts) with every round shown and more room per tile; the large view
+ * (mcp-slate-ui-script-viewer.ts) covers the workspace when a design is opened. Mounted only in fullscreen.
  */
 export const SLATE_UI_STAGE = String.raw `
   var stageBuilt = false;
   var stageEls = {};
 
-  var ICON_CLOSE = "M6 6l12 12M18 6L6 18";
-  function iconButton(label, path, onclick) {
-    var b = button("", "iconbtn", onclick);
-    b.setAttribute("aria-label", label);
-    b.title = label;
-    b.innerHTML = '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + path + '"/></svg>';
-    return b;
-  }
-
   function buildStageSkeleton() {
     var stage = $("stage");
     stage.textContent = "";
+    stage.appendChild(buildBriefField());
     var head = el("header", "stagehead");
     head.appendChild(el("h1", "sr", t("title")));
     head.appendChild(buildTabs());
-    head.appendChild(el("span", "spacer"));
-    stageEls.close = iconButton(t("closeWorkspace"), ICON_CLOSE, closeWorkspace);
+    var count = el("span", "selcount");
+    count.setAttribute("data-selcount", "");
+    count.setAttribute("aria-live", "polite");
+    head.appendChild(count);
+    stageEls.close = iconAction(t("closeWorkspace"), ICON.collapse, closeWorkspace);
+    stageEls.close.className = "iconbtn";
     head.appendChild(stageEls.close);
-
     stageEls.body = el("div", "stagebody");
-    stageEls.rail = el("nav", "rail");
-    stageEls.rail.setAttribute("aria-label", t("tabDesigns"));
-    var main = el("section", "main");
     stageEls.pause = el("div", "pausebar hidden");
-    stageEls.band = el("div", "band hidden");
-    stageEls.band.setAttribute("role", "status");
-    stageEls.hero = el("div", "hero");
-    var row = el("div", "actionrow");
-    stageEls.edit = button(t("edit"), "", function () { openDialog("edit", stageEls.edit); });
-    stageEls.branch = button(t("branch"), "", function () { openDialog("branch", stageEls.branch); });
-    stageEls.convert = button(t("convert"), "", function () { openDialog("convert", stageEls.convert); });
-    stageEls.select = button(t("select"), "primary", function () { doSelect(selectedVersion()); });
-    stageEls.editWhy = el("span", "sr");
-    stageEls.editWhy.id = "edit-why";
-    // Select is last: the row is right-aligned, so it ends at the picture's right edge.
-    [stageEls.edit, stageEls.branch, stageEls.convert, stageEls.select, stageEls.editWhy].forEach(function (b) { row.appendChild(b); });
+    stageEls.designs = el("div", "designs");
     stageEls.status = el("p", "status");
     stageEls.status.setAttribute("data-status", "");
     stageEls.status.setAttribute("role", "status");
@@ -57,81 +32,20 @@ export const SLATE_UI_STAGE = String.raw `
     // A line set before the workspace was built (the first view arrives first) still shows.
     stageEls.status.textContent = state.status.text;
     if (state.status.kind) stageEls.status.className = "status " + state.status.kind;
-    main.appendChild(stageEls.pause);
-    main.appendChild(stageEls.band);
-    main.appendChild(stageEls.hero);
-    main.appendChild(row);
-    main.appendChild(stageEls.status);
-    // Generate more tops the selection: rounds are newest first, so it sits where the next round will appear, in the
-    // column's own flow (it scrolls with the rounds and never lies over one), and its panel opens directly under it.
-    stageEls.moreSlot = el("div", "moreslot");
-    stageEls.moreSlot.appendChild(moreTile());
-    stageEls.more = el("div", "morehost");
-    var selection = el("div", "selection");
-    selection.appendChild(stageEls.moreSlot);
-    selection.appendChild(stageEls.more);
-    selection.appendChild(stageEls.rail);
-    stageEls.body.appendChild(selection);
-    stageEls.body.appendChild(main);
+    stageEls.body.appendChild(stageEls.pause);
+    stageEls.body.appendChild(stageEls.status);
+    stageEls.body.appendChild(stageEls.designs);
     stageEls.inspiration = el("div", "inspiration hidden");
-    stageEls.dialog = el("div", "dialogmount");
-
+    stageEls.references = el("div", "inspiration hidden");
+    stageEls.viewer = el("div", "viewermount");
     stage.appendChild(head);
     stage.appendChild(stageEls.body);
     stage.appendChild(stageEls.inspiration);
-    stage.appendChild(stageEls.dialog);
+    stage.appendChild(stageEls.references);
+    stage.appendChild(stageEls.viewer);
     stageBuilt = true;
   }
 
-  // A chip is one version of an option; its title carries the words of the edit that made it (the person's own words;
-  // an edit made from a drawing alone says so, rather than show the instruction the server wrote for the model).
-  function chipTitle(v) {
-    if (v.promptFromMarks) return t("versionTitleMarks", { label: v.label });
-    return v.prompt ? t("versionTitle", { label: v.label, prompt: v.prompt }) : v.label;
-  }
-
-  function buildRail(rail) {
-    var v = state.view;
-    v.rounds.slice().sort(function (a, b) { return b.index - a.index; }).forEach(function (round) {
-      var section = el("div", "round");
-      var head = el("h2", "roundhead", t("roundHeading", { n: round.index }));
-      var title = roundTitle(round);
-      if (title) head.title = title;
-      section.appendChild(head);
-      var list = el("ul", "options");
-      var ofRound = orderedCandidates().filter(function (c) { return c.roundId === round.roundId; }).sort(byLabel);
-      if (ofRound.length) setShape(list, ratioOf(ofRound[0]));
-      ofRound.forEach(function (c) {
-        var item = el("li", "option");
-        item.appendChild(thumbButton(c, "opt"));
-        var versions = versionsOf(c);
-        if (versions.length > 1) {
-          var chips = el("div", "chips");
-          versions.forEach(function (version) {
-            var on = state.sel.versionId === version.versionId;
-            var chip = button(version.label, "chip" + (on ? " selected" : ""), function () { selectCandidate(c.candidateId, version.versionId); });
-            chip.title = chipTitle(version);
-            chip.setAttribute("aria-label", t("versionName", { label: version.label }));
-            chip.setAttribute("aria-pressed", on ? "true" : "false");
-            chips.appendChild(chip);
-          });
-          item.appendChild(chips);
-        }
-        list.appendChild(item);
-      });
-      section.appendChild(list);
-      rail.appendChild(section);
-    });
-  }
-
-  // ---- the band: what is running, stopped or failed ----
-  function buildBand(node, band) {
-    node.appendChild(el("span", "bandtext" + (band.kind === "failed" ? " err" : ""), band.text));
-    if (band.op.resumable) {
-      var b = button(t("resume"), "textbtn", function () { actResume(band.op, b); });
-      node.appendChild(b);
-    }
-  }
   function actResume(op, buttonEl) {
     if (state.opBusy[op.opId]) return;
     state.opBusy[op.opId] = true;
@@ -142,20 +56,6 @@ export const SLATE_UI_STAGE = String.raw `
     }, function (err) { setStatus(errText(err), "err"); }).then(function () { state.opBusy[op.opId] = false; if (buttonEl) buttonEl.disabled = false; });
   }
 
-  function syncStageControls(selectLabel, selectDisabled) {
-    if (!stageBuilt || !isFullscreen()) return;
-    var v = selectedVersion();
-    if (selectLabel !== undefined) { stageEls.select.textContent = selectLabel; stageEls.select.disabled = selectDisabled; }
-    // Edit is off when the shown version cannot be edited; the reason is its accessible description, not a tooltip.
-    var blocked = !v || !v.editable;
-    stageEls.edit.disabled = blocked;
-    stageEls.editWhy.textContent = blocked && v && v.editBlockedReason ? serverText(v.editBlockedL10n, v.editBlockedReason) : "";
-    if (blocked && v && v.editBlockedReason) stageEls.edit.setAttribute("aria-describedby", "edit-why"); else stageEls.edit.removeAttribute("aria-describedby");
-    stageEls.branch.disabled = !v;
-    stageEls.convert.disabled = !v;
-  }
-
-  // ---- render ----
   function renderStage() {
     var v = state.view;
     if (!stageBuilt) buildStageSkeleton();
@@ -163,32 +63,19 @@ export const SLATE_UI_STAGE = String.raw `
     syncTabs();
     var onDesigns = state.tab === "designs";
     stageEls.body.classList.toggle("hidden", !onDesigns);
-    stageEls.inspiration.classList.toggle("hidden", onDesigns);
+    stageEls.inspiration.classList.toggle("hidden", state.tab !== "inspiration");
+    stageEls.references.classList.toggle("hidden", state.tab !== "references");
+    renderViewer();
+    if (state.tab === "references") { renderReferences(stageEls.references, "stage"); return; }
     if (!onDesigns) { renderInspiration(stageEls.inspiration, "stage"); return; }
-    var c = selectedCandidate();
-    var sel = selectedVersion();
-    // With no option there is nothing to draw more of: no tile (openMore refuses too).
-    stageEls.moreSlot.classList.toggle("hidden", v.candidates.length === 0);
+    syncPauseHost(stageEls.pause, true);
     if (v.candidates.length === 0) {
-      stageEls.rail.textContent = "";
-      stageEls.rail.__sig = "";
-      stageEls.band.classList.add("hidden");
-      stageEls.hero.__sig = "";
-      stageEls.hero.textContent = "";
-      stageEls.hero.classList.add("note");
-      stageEls.hero.appendChild(el("div", "heronote", t("empty")));
-      syncStageControls(t("select"), true);
+      stageEls.designs.__sig = "";
+      stageEls.designs.textContent = "";
+      stageEls.designs.appendChild(el("p", "note", t("empty")));
       return;
     }
-    var railSig = JSON.stringify([state.sel, v.rounds.map(function (r) { return [r.roundId, r.index, r.kind, r.fromVersionId]; }),
-      orderedCandidates().map(function (x) { return thumbSignature(x).concat([x.versionIds]); })]);
-    setIfChanged(stageEls.rail, railSig, buildRail);
-    syncPauseHost(stageEls.pause, true);
-    var band = activeBand(v);
-    stageEls.band.classList.toggle("hidden", !band);
-    setIfChanged(stageEls.band, band ? JSON.stringify([band.kind, band.text, band.op.opId, band.op.resumable]) : "", function (node) { if (band) buildBand(node, band); });
-    setIfChanged(stageEls.hero, heroSignature(c, sel), function (node) { heroInto(node, c, sel); });
-    syncControls();
+    renderDesigns(stageEls.designs, "stage");
   }
 `;
 //# sourceMappingURL=mcp-slate-ui-script-stage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLvC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEvC,CAAC"}

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

@@ -5,7 +5,7 @@
  * concurrent app requests app-wide, so a view keeps at most three image loads
  * in flight, version pictures and reference pictures together (leaving room
  * for status and an action); it polls only while something is running and the
- * document is visible, with backoff from two to ten seconds and a `since`
+ * document is visible, with backoff from two to five seconds and a `since`
  * stamp so an unchanged answer costs no re-render. A hidden view issues no
  * calls at all.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-state.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAyT1B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-state.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QA8T1B,CAAC"}

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

@@ -5,7 +5,7 @@
  * concurrent app requests app-wide, so a view keeps at most three image loads
  * in flight, version pictures and reference pictures together (leaving room
  * for status and an action); it polls only while something is running and the
- * document is visible, with backoff from two to ten seconds and a `since`
+ * document is visible, with backoff from two to five seconds and a `since`
  * stamp so an unchanged answer costs no re-render. A hidden view issues no
  * calls at all.
  */
@@ -13,7 +13,7 @@ export const SLATE_UI_STATE = String.raw `
   var state = {
     host: {}, view: null,
     sel: { candidateId: null, versionId: null, followLatest: true },
-    tab: "designs", query: "", dialog: null, more: null,
+    tab: "designs", more: null,
     busy: false, status: { text: "", kind: "" }, lastRunOp: "",
     thumbs: {}, fulls: {}, refs: {}, lastOpStates: {}, opBusy: {}, awaitEdit: null,
     insp: { local: null, writing: false, dirty: false, searching: false, noMatch: "", waiters: [] }
@@ -184,6 +184,10 @@ export const SLATE_UI_STATE = String.raw `
     return enqueue(imageKey(version, size), cache, TOOLS.image, { runDir: state.view.runDir, versionId: version.versionId, size: size }, urgent);
   }
   function wantReference(id, size, urgent) {
+    // A website reference with a URL loads straight from it (the References tab's sites).
+    var site = siteById(id);
+    var url = site && (size === "thumb" ? site.thumbUrl : site.imageUrl);
+    if (url) return Promise.resolve(url);
     return enqueue("ref:" + size + ":" + id, state.refs, TOOLS.reference, { runDir: state.view.runDir, referenceId: id, size: size }, urgent);
   }
   function pump() {
@@ -221,7 +225,7 @@ export const SLATE_UI_STATE = String.raw `
   function bindReference(img, id, size) { fillImage(img, wantReference(id, size, false)); }
 
   // ---- status polling ----
-  var DELAYS = [2000, 3000, 5000, 8000, 10000];
+  var DELAYS = [2000, 2500, 3000, 4000, 5000];
   var poll = { timer: null, step: 0, inFlight: false };
   function wantsPolling() { return !!state.view && !!state.view.runDir && visible() && runningOps().length > 0; }
   function clearPoll() { if (poll.timer !== null) { clearTimeout(poll.timer); poll.timer = null; } }
@@ -319,7 +323,8 @@ export const SLATE_UI_STATE = String.raw `
         var made = next.versions.find(function (v) { return op.resultVersionIds.indexOf(v.versionId) >= 0; });
         text = head + (made ? made.label : opLabel(op)) + " was created.";
       }
-      updateModelContext(text + " Confirm with " + TOOLS.data + ".");
+      // The hosted agent is never asked to re-read the workspace for this: it is context for the person's next message.
+      updateModelContext(TARGET === "remote" ? text : text + " Confirm with " + TOOLS.data + ".");
     });
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-state.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyTvC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-state.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8TvC,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * 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 declare const SLATE_UI_VIEWER: string;
+//# sourceMappingURL=mcp-slate-ui-script-viewer.d.ts.map

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

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