@12ui/design 0.2.80 → 0.2.81

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

@@ -0,0 +1,221 @@
+/**
+ * The picture gallery and its large view: the Inspiration grid, and the References grid (lane W1) reuses both.
+ *
+ * `createGallery({ where, root, isSelected, onToggle })` returns `{ node, set(key, items), sync(), layout() }`.
+ *
+ * - An item is `{ id, label, thumbUrl, imageUrl, title?, sourceUrl?, srcset?, width?, height?, aspect?, load? }`:
+ *   `thumbUrl` for the tile and `imageUrl` for the large view, straight from their origin (`srcset` lets the browser
+ *   pick by the tile's laid-out width); `load(img, size)` fills a picture another way when there is no URL.
+ * - `set(key, items)`: a new key is a new list (the tiles are built again from the top); the same key with a longer
+ *   list only adds what is new at the end. The first page shows at once and the next page appears as the person nears
+ *   the end of the grid (an IntersectionObserver on a marker after the last block, under `root()`, the element that
+ *   scrolls the grid, or the window), until the list ends. Each page is its own collage block, so nothing already on
+ *   screen ever moves: not on a click, not when a page is added.
+ * - A click toggles the tile (`onToggle`); `sync()` sets every tile's pressed state in place, without a rebuild. A
+ *   selected tile carries a ring hugging the picture and a check in its corner.
+ * - The expand control in a tile's corner, or a double click, opens the large view: the picture as large as the frame
+ *   allows, previous and next, Select or Selected, Open site for an item with a `sourceUrl`, and close; Escape closes
+ *   it, the arrow keys step through the list.
+ *
+ * Fragment of the view's script; String.raw, no backtick, no dollar-brace.
+ */
+export const SLATE_UI_INSPIRATION_GALLERY = String.raw `
+  var GALLERY_PAGE = 24;
+  var GLYPH = {
+    expand: "M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5",
+    close: "M6 6l12 12M18 6L6 18",
+    prev: "M15 5l-7 7 7 7",
+    next: "M9 5l7 7-7 7",
+    check: "M5 12.5l4.5 4.5L19 7.5",
+    open: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"
+  };
+  function glyph(path, size, stroke) {
+    return '<svg viewBox="0 0 24 24" width="' + size + '" height="' + size + '" fill="none" stroke="currentColor" stroke-width="' + stroke + '" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + path + '"/></svg>';
+  }
+  function glyphButton(label, path, cls, onclick) {
+    var b = button("", cls, onclick);
+    b.setAttribute("aria-label", label);
+    b.title = label;
+    b.innerHTML = glyph(path, 18, 2);
+    return b;
+  }
+
+  function createGallery(opts) {
+    var g = { opts: opts, key: null, items: [], shown: 0, node: el("div", "gallery"), observer: null };
+    g.end = el("div", "gend");
+    g.end.setAttribute("aria-hidden", "true");
+    g.node.appendChild(g.end);
+    g.set = function (key, items) {
+      if (key !== g.key) {
+        g.key = key;
+        g.items = items.slice();
+        g.shown = 0;
+        Array.prototype.slice.call(g.node.querySelectorAll(".refgrid")).forEach(function (n) { g.node.removeChild(n); });
+        var scroller = g.opts.root ? g.opts.root() : null;
+        if (scroller) scroller.scrollTop = 0;
+        revealPage(g);
+      } else {
+        g.items = items.slice();
+        // The list had ended on screen (a short last page): what joins it shows at once, in that block.
+        if (g.shown % GALLERY_PAGE !== 0) revealPage(g);
+      }
+      watchEnd(g);
+    };
+    g.sync = function () {
+      var tiles = g.node.querySelectorAll(".refbtn");
+      for (var i = 0; i < tiles.length; i++) tiles[i].setAttribute("aria-pressed", g.opts.isSelected(tiles[i].getAttribute("data-ref")) ? "true" : "false");
+      if (largeView && largeView.g === g) syncLargeView();
+    };
+    g.layout = function () { layoutBlocks(g.node, g.opts.where); };
+    return g;
+  }
+  // The next page of the list as one collage block, before the end marker; a short last block is topped up first, so
+  // sites arriving one by one fill its rows instead of stacking short blocks. Returns whether anything was added.
+  function revealPage(g) {
+    if (g.shown >= g.items.length) return false;
+    var short = g.shown % GALLERY_PAGE !== 0;
+    var grid = short ? g.end.previousElementSibling : el("div", "refgrid");
+    var page = g.items.slice(g.shown, g.shown + (short ? GALLERY_PAGE - (g.shown % GALLERY_PAGE) : GALLERY_PAGE));
+    var start = g.shown;
+    page.forEach(function (item, i) { grid.appendChild(galleryTile(g, item, start + i)); });
+    if (!short) g.node.insertBefore(grid, g.end);
+    g.shown += page.length;
+    var width = grid.getBoundingClientRect().width;
+    if (width > 0) layoutGrid(grid, g.opts.where, width);
+    return true;
+  }
+  function watchEnd(g) {
+    if (g.observer || typeof IntersectionObserver === "undefined") return;
+    var root = g.opts.root ? g.opts.root() : null;
+    g.observer = new IntersectionObserver(function (entries) {
+      if (!entries.some(function (e) { return e.isIntersecting; })) return;
+      if (!revealPage(g)) return;
+      reportSize();
+      // Still in reach after a short page: look again.
+      g.observer.unobserve(g.end);
+      g.observer.observe(g.end);
+    }, { root: root, rootMargin: "0px 0px 900px 0px" });
+    g.observer.observe(g.end);
+  }
+
+  function galleryTile(g, item, index) {
+    var tile = el("div", "gtile");
+    tile.__shape = { aspect: item.aspect || "landscape", width: item.width || null, height: item.height || null };
+    var b = button("", "refbtn");
+    b.setAttribute("data-ref", item.id);
+    b.setAttribute("aria-label", item.label || item.title || item.id);
+    b.setAttribute("aria-pressed", g.opts.isSelected(item.id) ? "true" : "false");
+    // The picture's own skeleton shows until it lands, so a tile that has arrived never flashes a grey square.
+    var img = el("img", "thumb empty shimmer");
+    img.alt = "";
+    img.decoding = "async";
+    img.addEventListener("load", function () { img.classList.remove("empty", "shimmer"); });
+    img.setAttribute("loading", "lazy");
+    img.setAttribute("draggable", "false");
+    img.addEventListener("error", function () { img.setAttribute("data-error", "1"); });
+    if (item.thumbUrl) {
+      if (item.srcset) img.srcset = item.srcset;
+      img.src = item.thumbUrl;
+    } else if (item.load) item.load(img, "thumb");
+    b.appendChild(img);
+    var check = el("span", "check");
+    check.innerHTML = glyph(GLYPH.check, 15, 3);
+    b.appendChild(check);
+    b.addEventListener("click", function () { g.opts.onToggle(item.id); });
+    b.addEventListener("dblclick", function (e) { e.preventDefault(); openLargeView(g, index); });
+    tile.appendChild(b);
+    tile.appendChild(glyphButton(t("expand"), GLYPH.expand, "zoombtn", function (e) { e.stopPropagation(); openLargeView(g, index); }));
+    return tile;
+  }
+
+  // ---- the large view ----
+  var largeView = null;
+  function openLargeView(g, index) {
+    closeLargeView();
+    // As a design's large view does: from the card it asks for the workspace, so the picture has the whole window.
+    if (!isFullscreen() && canFullscreen()) requestMode("fullscreen");
+    var lv = { g: g, index: index, opener: document.activeElement, els: {} };
+    var box = el("div", "bigview");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    var bar = el("div", "bvbar");
+    lv.els.count = el("span", "bvcount");
+    lv.els.pick = button("", "bvpick", function () { var item = g.items[lv.index]; if (item) g.opts.onToggle(item.id); syncLargeView(); });
+    lv.els.close = glyphButton(t("close"), GLYPH.close, "iconbtn bvclose", closeLargeView);
+    // A live site opens in the host's browser.
+    lv.els.open = glyphButton(t("referencesOpenSite"), GLYPH.open, "iconbtn bvopen", function () { var item = g.items[lv.index]; if (item && item.sourceUrl) openSite(item.sourceUrl); });
+    bar.appendChild(lv.els.count);
+    bar.appendChild(el("span", "spacer"));
+    bar.appendChild(lv.els.open);
+    bar.appendChild(lv.els.pick);
+    bar.appendChild(lv.els.close);
+    var view = el("div", "bvview");
+    lv.els.img = el("img", "bvimg");
+    lv.els.img.alt = "";
+    lv.els.img.setAttribute("draggable", "false");
+    lv.els.prev = glyphButton(t("previous"), GLYPH.prev, "bvnav bvprev", function () { stepLargeView(-1); });
+    lv.els.next = glyphButton(t("next"), GLYPH.next, "bvnav bvnext", function () { stepLargeView(1); });
+    view.appendChild(lv.els.img);
+    view.appendChild(lv.els.prev);
+    view.appendChild(lv.els.next);
+    box.appendChild(bar);
+    box.appendChild(view);
+    // A click on the dimmed space around the picture closes the view.
+    view.addEventListener("click", function (e) { if (e.target === view) closeLargeView(); });
+    lv.els.box = box;
+    document.body.appendChild(box);
+    largeView = lv;
+    syncLargeView();
+    lv.els.close.focus();
+  }
+  function syncLargeView() {
+    var lv = largeView;
+    if (!lv) return;
+    var item = lv.g.items[lv.index];
+    if (!item) { closeLargeView(); return; }
+    if (lv.shownId !== item.id) {
+      lv.shownId = item.id;
+      var fresh = el("img", "bvimg");
+      fresh.alt = item.label || "";
+      fresh.setAttribute("draggable", "false");
+      if (item.imageUrl) fresh.src = item.imageUrl;
+      else if (item.load) item.load(fresh, "ref");
+      lv.els.img.parentNode.replaceChild(fresh, lv.els.img);
+      lv.els.img = fresh;
+      lv.els.box.setAttribute("aria-label", item.label || "");
+    }
+    lv.els.open.classList.toggle("hidden", !item.sourceUrl);
+    var picked = lv.g.opts.isSelected(item.id);
+    lv.els.pick.innerHTML = picked ? glyph(GLYPH.check, 15, 3) : "";
+    lv.els.pick.appendChild(document.createTextNode(picked ? t("selected") : t("select")));
+    lv.els.pick.className = "bvpick" + (picked ? " on" : " primary");
+    lv.els.pick.setAttribute("aria-pressed", picked ? "true" : "false");
+    lv.els.count.textContent = (lv.index + 1) + " / " + lv.g.items.length;
+    lv.els.prev.disabled = lv.index <= 0;
+    lv.els.next.disabled = lv.index >= lv.g.items.length - 1;
+  }
+  function stepLargeView(delta) {
+    var lv = largeView;
+    if (!lv) return;
+    var next = Math.max(0, Math.min(lv.g.items.length - 1, lv.index + delta));
+    if (next === lv.index) return;
+    lv.index = next;
+    // Stepping past what the grid shows reveals it there too.
+    while (lv.g.shown <= next && revealPage(lv.g)) { /* keep revealing */ }
+    syncLargeView();
+  }
+  function closeLargeView() {
+    var lv = largeView;
+    if (!lv) return;
+    largeView = null;
+    if (lv.els.box.parentNode) lv.els.box.parentNode.removeChild(lv.els.box);
+    if (lv.opener && lv.opener.isConnected && lv.opener.focus) lv.opener.focus();
+  }
+  document.addEventListener("keydown", function (e) {
+    if (!largeView) return;
+    if (e.key === "Escape") { e.preventDefault(); e.stopImmediatePropagation(); closeLargeView(); }
+    else if (e.key === "ArrowLeft") { e.preventDefault(); stepLargeView(-1); }
+    else if (e.key === "ArrowRight") { e.preventDefault(); stepLargeView(1); }
+  }, true);
+`;
+//# sourceMappingURL=mcp-slate-ui-script-inspiration-gallery.js.map

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

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

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

@@ -1,26 +1,19 @@
 /**
- * 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 Inspiration tab's page, the same in the card and the workspace: one status line (what went wrong, when anything
+ * did), the gallery of the search's results, and the tray. The search itself is the prompt card above the tabs.
  *
- * - 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.
+ * - The gallery (mcp-slate-ui-script-inspiration-gallery.ts) shows the search the grid follows, a page at a time as
+ *   the person scrolls; the first search of a workspace without one shows skeleton tiles until it lands, and a new
+ *   search keeps the old results, dimmed, until the new ones arrive.
+ * - The tray holds the picks the next drawing uses, so they stay in sight whatever the grid shows: a small picture of
+ *   each (a click takes it out) and the one action (how many is said once, in the tab row). While a round waits for its references the picks are
+ *   that round's, the action is Continue and the countdown shows beside it; otherwise the picks are the selection and
+ *   the action is Generate: one new round drawn from exactly them, Generate more's own request (`startRound`, which
+ *   first waits for the selection write), drawing the panel's default count, or the next count up when more are
+ *   picked, so every pick is drawn from at least once. Either way the screen then moves on to Designs.
+ * - In the card the results scroll inside themselves (the host grows the frame and never scrolls the thread, so a long
+ *   page would push the card out of sight) and the tray sits under them; in the workspace the page scrolls and the tray
+ *   sticks to the bottom of the window.
  */
 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

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