@12ui/design 0.2.72 → 0.2.74

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

@@ -0,0 +1,306 @@
+/**
+ * View state, the image loader queue and the status polling controller.
+ *
+ * Host limits, measured or derived (see the step-0 probe): about five
+ * 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`
+ * stamp so an unchanged answer costs no re-render. A hidden view issues no
+ * calls at all.
+ */
+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,
+    busy: false, status: { text: "", kind: "", source: "", phase: "" }, lastOpText: "", lastBandOp: "",
+    thumbs: {}, fulls: {}, refs: {}, lastOpStates: {}, opBusy: {}, awaitEdit: null,
+    insp: { local: null, writing: false, dirty: false, searching: false, noMatch: "", waiters: [] }
+  };
+
+  // ---- small helpers ----
+  function el(tag, cls, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text !== undefined) e.textContent = text;
+    return e;
+  }
+  function button(label, cls, onclick) {
+    var b = el("button", cls || "", label);
+    b.type = "button";
+    if (onclick) b.addEventListener("click", onclick);
+    return b;
+  }
+  function uuid4() {
+    var b = new Uint8Array(16);
+    if (typeof crypto !== "undefined" && crypto.getRandomValues) crypto.getRandomValues(b);
+    else for (var i = 0; i < 16; i++) b[i] = Math.floor(Math.random() * 256);
+    b[6] = (b[6] & 15) | 64;
+    b[8] = (b[8] & 63) | 128;
+    var h = Array.prototype.map.call(b, function (x) { return (x + 256).toString(16).slice(1); }).join("");
+    return h.slice(0, 8) + "-" + h.slice(8, 12) + "-" + h.slice(12, 16) + "-" + h.slice(16, 20) + "-" + h.slice(20);
+  }
+  function visible() { return document.visibilityState !== "hidden"; }
+  function errText(err) { return err && err.message ? err.message : String(err); }
+  // "source" is "op" for a line the screen derives from the ops' own state, "" for a message about a click.
+  function setStatus(text, kind, source, phase) {
+    state.status = { text: text || "", kind: kind || "", source: source || "", phase: phase || "" };
+    var nodes = document.querySelectorAll("[data-status]");
+    for (var i = 0; i < nodes.length; i++) {
+      nodes[i].textContent = state.status.text;
+      nodes[i].className = "status" + (kind ? " " + kind : "");
+    }
+  }
+
+  // ---- lookups over the current view ----
+  function cand(id) { return state.view && state.view.candidates.find(function (c) { return c.candidateId === id; }); }
+  function ver(id) { return state.view && state.view.versions.find(function (v) { return v.versionId === id; }); }
+  function latestVersion(c) { return c && c.latestVersionId ? ver(c.latestVersionId) : undefined; }
+  function roundById(id) { return state.view && state.view.rounds.find(function (r) { return r.roundId === id; }); }
+  function byLabel(a, b) { return a.label.length - b.label.length || (a.label < b.label ? -1 : a.label > b.label ? 1 : 0); }
+  // Newest round first, then by letter: the order of the strip and of the selection.
+  function optionOrder(a, b) {
+    var ra = roundById(a.roundId);
+    var rb = roundById(b.roundId);
+    return ((rb ? rb.index : 0) - (ra ? ra.index : 0)) || byLabel(a, b);
+  }
+  function orderedCandidates() { return state.view.candidates.slice().sort(optionOrder); }
+  // The card's strip: the newest round only, plus the option the pick belongs to and the one being viewed when they are
+  // older, so the large image always has its thumbnail. The workspace still lists every round.
+  function inlineCandidates() {
+    var all = orderedCandidates();
+    if (all.length === 0) return all;
+    var newest = all[0].roundId;
+    var picked = state.view.pick && ver(state.view.pick.versionId);
+    var keep = {};
+    keep[newest] = true;
+    if (picked) keep[picked.candidateId] = true;
+    if (state.sel.candidateId) keep[state.sel.candidateId] = true;
+    return all.filter(function (c) { return c.roundId === newest || keep[c.candidateId]; });
+  }
+  function versionsOf(c) { return c.versionIds.map(ver).filter(Boolean); }
+  function runningOps() { return state.view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; }); }
+  function selectedCandidate() { return cand(state.sel.candidateId); }
+  function selectedVersion() { return ver(state.sel.versionId); }
+  function optionName(c) { return COPY.optionPrefix + c.label + (c.state === "failed" ? COPY.failedSuffix : ""); }
+
+  function ensureSelection() {
+    var v = state.view;
+    if (!v || v.candidates.length === 0) { state.sel = { candidateId: null, versionId: null, followLatest: true }; return; }
+    var c = cand(state.sel.candidateId);
+    if (!c) {
+      var picked = v.pick && ver(v.pick.versionId);
+      var ordered = orderedCandidates();
+      c = (picked && cand(picked.candidateId)) || ordered.find(function (x) { return x.state === "ready"; }) || ordered[0];
+      state.sel = { candidateId: c.candidateId, versionId: null, followLatest: true };
+    }
+    var current = state.sel.versionId && c.versionIds.indexOf(state.sel.versionId) >= 0 ? state.sel.versionId : null;
+    if (state.sel.followLatest || !current) { state.sel.versionId = c.latestVersionId; state.sel.followLatest = true; }
+  }
+  // Choosing the option that is already shown, at the version already shown, changes nothing.
+  function selectCandidate(id, versionId) {
+    var c = cand(id);
+    if (!c) return;
+    var target = versionId || c.latestVersionId;
+    if (state.sel.candidateId === id && state.sel.versionId === target) return;
+    state.awaitEdit = null;
+    state.sel.candidateId = id;
+    state.sel.versionId = target;
+    state.sel.followLatest = !versionId || versionId === c.latestVersionId;
+    renderAll();
+  }
+
+  // ---- pictures through the app-only tools, at most three at a time; the workspace jumps the queue ----
+  var loader = { queue: [], active: 0, max: 3, inflight: {} };
+  function imageKey(version, size) { return size + ":" + version.versionId + ":" + version.sha256; }
+  function enqueue(key, cache, tool, args, urgent) {
+    if (cache[key]) return Promise.resolve(cache[key]);
+    if (loader.inflight[key]) {
+      if (urgent) {
+        var at = loader.queue.findIndex(function (j) { return j.key === key; });
+        if (at > 0) loader.queue.unshift(loader.queue.splice(at, 1)[0]);
+      }
+      return loader.inflight[key].promise;
+    }
+    var job = { key: key, cache: cache, tool: tool, args: args };
+    job.promise = new Promise(function (resolve, reject) { job.resolve = resolve; job.reject = reject; });
+    loader.inflight[key] = job;
+    if (urgent) loader.queue.unshift(job); else loader.queue.push(job);
+    pump();
+    return job.promise;
+  }
+  function wantImage(version, size, urgent) {
+    var cache = size === "full" ? state.fulls : state.thumbs;
+    return enqueue(imageKey(version, size), cache, TOOLS.image, { runDir: state.view.runDir, versionId: version.versionId, size: size }, urgent);
+  }
+  function wantReference(id, size, urgent) {
+    return enqueue("ref:" + size + ":" + id, state.refs, TOOLS.reference, { runDir: state.view.runDir, referenceId: id, size: size }, urgent);
+  }
+  function pump() {
+    while (visible() && loader.active < loader.max && loader.queue.length > 0) {
+      var job = loader.queue.shift();
+      loader.active++;
+      run(job);
+    }
+  }
+  function run(job) {
+    callTool(job.tool, job.args).then(function (result) {
+      var block = (result.content || []).find(function (b) { return b.type === "image"; });
+      if (!block) throw new Error("no image block returned");
+      var src = "data:" + block.mimeType + ";base64," + block.data;
+      job.cache[job.key] = src;
+      job.resolve(src);
+    }).catch(function (err) { job.reject(err); }).then(function () {
+      delete loader.inflight[job.key];
+      loader.active--;
+      pump();
+    });
+  }
+  function fillImage(img, promise) {
+    promise.then(function (src) {
+      if (img.isConnected === false) return;
+      img.src = src;
+      img.classList.remove("empty", "shimmer");
+    }, function (err) {
+      // An error is shown in place of the picture, never thrown.
+      img.alt = errText(err);
+      img.setAttribute("data-error", errText(err));
+    });
+  }
+  function bindImage(img, version, size, urgent) { if (version) fillImage(img, wantImage(version, size, urgent)); }
+  function bindReference(img, id, size) { fillImage(img, wantReference(id, size, false)); }
+
+  // ---- status polling ----
+  var DELAYS = [2000, 3000, 5000, 8000, 10000];
+  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; } }
+  function schedulePoll() {
+    clearPoll();
+    if (!wantsPolling() || poll.inFlight) return;
+    poll.timer = setTimeout(runPoll, DELAYS[Math.min(poll.step, DELAYS.length - 1)]);
+  }
+  function runPoll() {
+    poll.timer = null;
+    if (!wantsPolling()) return;
+    poll.inFlight = true;
+    callTool(TOOLS.status, { runDir: state.view.runDir, since: state.view.stamp }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.unchanged) poll.step++;
+      else if (sc.schema) { poll.step = 0; applyView(sc, true); }
+    }).catch(function () { poll.step++; }).then(function () { poll.inFlight = false; schedulePoll(); });
+  }
+  // One refresh when the view becomes visible again.
+  function refreshOnce() {
+    if (!state.view || !state.view.runDir || poll.inFlight) return;
+    poll.inFlight = true;
+    callTool(TOOLS.status, { runDir: state.view.runDir, since: state.view.stamp }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.schema) applyView(sc, true);
+    }).catch(function () {}).then(function () { poll.inFlight = false; schedulePoll(); });
+  }
+  document.addEventListener("visibilitychange", function () {
+    if (visible()) { pump(); refreshOnce(); schedulePoll(); }
+    else clearPoll();
+  });
+
+  // ---- what the ops say: the band of the workspace, the status line of the card ----
+  function opLabel(op) {
+    var parent = op.edit && ver(op.edit.parentVersionId);
+    var c = parent && cand(parent.candidateId);
+    return c ? c.label : (op.target || "");
+  }
+  function roundOfOp(op) {
+    var rounds = state.view.rounds;
+    var named = rounds.filter(function (r) { return COPY.roundPrefix + r.index === op.target; })[0];
+    if (named) return named;
+    var running = rounds.filter(function (r) { return r.state === "running"; });
+    return running.length ? running[running.length - 1] : null;
+  }
+  function progressText(op) {
+    // The hosted server has no runner of its own: a running op is waiting for the person's agent to draw and upload.
+    if (TARGET === "remote" && op.phase === "agent") return COPY.waitingForAgent;
+    if (op.kind === "round") {
+      var r = roundOfOp(op);
+      return r ? tpl(COPY.designingProgress, { n: r.readyCount, m: r.count }) : COPY.designing;
+    }
+    return tpl(COPY.editing, { label: opLabel(op) });
+  }
+  // The newest op. The local plugin stamps every op with a time; the hosted server sends none (data minimization), so
+  // its ops are already oldest first and the last one is the newest.
+  function latestOp(view) {
+    if (TARGET === "remote") return view.ops[view.ops.length - 1];
+    return view.ops.slice().sort(function (a, b) { return Date.parse(a.startedAt) - Date.parse(b.startedAt); }).pop();
+  }
+  // The one thing worth a band: work that is running, else work that stopped or failed as the newest word.
+  function activeBand(view) {
+    var running = view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; });
+    if (running.length) { var op = running[running.length - 1]; return { kind: "run", op: op, text: progressText(op) }; }
+    var last = latestOp(view);
+    if (last && last.state === "interrupted") return { kind: "stopped", op: last, text: TARGET === "remote" && last.error && last.error.message ? last.error.message : COPY.interrupted };
+    if (last && last.state === "failed" && last.error) return { kind: "failed", op: last, text: last.error.message };
+    return null;
+  }
+
+  // The card has one status line, so it also carries the running, stopped and failed words; the workspace has a band.
+  function syncProgressLine(view) {
+    var band = activeBand(view);
+    // The workspace's band speaks for running work, so a line about an earlier click ("Selected E.") is stale the
+    // moment a new op starts; a refusal stays, because the person has not read it away.
+    var bandOp = band && band.kind === "run" ? band.op.opId : "";
+    if (bandOp && bandOp !== state.lastBandOp && isFullscreen() && state.status.kind !== "err") setStatus("", "");
+    state.lastBandOp = bandOp;
+    if (isFullscreen() || !band) {
+      state.lastOpText = "";
+      if (state.status.source === "op" && state.status.phase === "progress") setStatus("", "");
+      return;
+    }
+    // A message about a click stays until these words themselves change.
+    if (band.text !== state.lastOpText) { state.lastOpText = band.text; setStatus(band.text, band.kind === "failed" ? "err" : "", "op", "progress"); }
+  }
+  // What a finished op produced. A failure is the band's to say in the workspace.
+  function syncDoneLine(prev, view) {
+    var was = {};
+    if (prev) prev.ops.forEach(function (o) { was[o.opId] = o.state; });
+    var finished = view.ops.filter(function (o) {
+      return (was[o.opId] === "starting" || was[o.opId] === "running") && (o.state === "succeeded" || o.state === "failed");
+    }).pop();
+    if (!finished) return;
+    if (finished.state === "failed") return;
+    var made = view.versions.filter(function (v) { return finished.resultVersionIds.indexOf(v.versionId) >= 0; });
+    if (finished.kind === "round") {
+      var n = made.length;
+      if (n === 0) return;
+      var round = roundOfOp(finished);
+      var failedCount = round ? view.candidates.filter(function (c) { return c.roundId === round.roundId && c.state === "failed"; }).length : 0;
+      var text = (n === 1 ? COPY.roundReadyOne : tpl(COPY.roundReadyMany, { n: n })) + (failedCount ? " " + tpl(COPY.roundFailed, { n: failedCount }) : "");
+      setStatus(text, failedCount ? "" : "ok", "op", "done");
+    } else {
+      setStatus(tpl(COPY.editReady, { label: made.length ? made[made.length - 1].label : opLabel(finished) }), "ok", "op", "done");
+    }
+  }
+  function syncOpStatus(prev, view) { syncProgressLine(view); syncDoneLine(prev, view); }
+
+  // ---- tell the agent, best effort, when work that was running has finished ----
+  function announceSettled(prev, next) {
+    next.ops.forEach(function (op) {
+      var was = state.lastOpStates[op.opId];
+      state.lastOpStates[op.opId] = op.state;
+      if (was !== "starting" && was !== "running") return;
+      if (op.state !== "succeeded" && op.state !== "failed") return;
+      var head = TARGET === "remote" ? "Design workspace: " : "Design workspace rev " + next.rev + ": ";
+      var text;
+      if (op.state === "failed") text = head + "the " + op.kind + " " + (op.target ? "for " + op.target + " " : "") + "failed" + (op.error ? " (" + op.error.code + ")" : "") + ".";
+      else if (op.kind === "round") {
+        var labels = next.candidates.filter(function (c) { return c.versionIds.some(function (id) { return op.resultVersionIds.indexOf(id) >= 0; }); }).map(function (c) { return c.label; });
+        text = head + (op.target || "the round") + " is ready" + (labels.length ? " (" + labels[0] + " to " + labels[labels.length - 1] + ")" : "") + ".";
+      } else {
+        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 + ".");
+    });
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-state.js.map

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * 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), progress, inline (the card), select (Select and
+ * the hand-offs), inspiration (the tabs and the Inspiration tab), stage
+ * (fullscreen), 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
+ * 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.
+ *
+ * The fragments are String.raw, so escape sequences reach the browser
+ * unchanged; the assembled script must therefore contain no backtick and no
+ * dollar-brace (a test asserts it).
+ */
+/**
+ * Which host the screen is for: the local plugin's own tools, the hosted server (design.12ui.com), or a browser page
+ * opened by `12ui workspace open` when the plugin's tools are not available (the local plugin's tools, reached
+ * through a host shim in the page in place of an MCP Apps host).
+ */
+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.
+ */
+export declare const buildSlateUiScript: (target: SlateUiTarget) => string;
+export declare const SLATE_UI_SCRIPT: string;
+//# sourceMappingURL=mcp-slate-ui-script.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAgB3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAyB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

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

@@ -0,0 +1,60 @@
+import { SLATE_CONVERT_CHOICES, SLATE_CONVERT_DESCRIPTIONS, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_REMOTE_CONVERT_DESCRIPTIONS, SLATE_UI_COPY } from './mcp-slate-ui-copy.js';
+import { 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_INLINE } from './mcp-slate-ui-script-inline.js';
+import { SLATE_UI_INSPIRATION } from './mcp-slate-ui-script-inspiration.js';
+import { SLATE_UI_MORE } from './mcp-slate-ui-script-more.js';
+import { SLATE_UI_PROGRESS } from './mcp-slate-ui-script-progress.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';
+const HANDSHAKE = String.raw `
+  // ---- connect: handlers are registered above, before the handshake ----
+  if (window.parent === window) {
+    fatal(COPY.needsHost);
+  } else {
+    request("ui/initialize", { appCapabilities: {}, appInfo: { name: "12ui-slate", version: "3.0.0" }, protocolVersion: PROTOCOL })
+      .then(function (init) {
+        applyHost((init && init.hostContext) || {});
+        notify("ui/notifications/initialized", {});
+      })
+      .catch(function (err) { fatal(COPY.noConnection + errText(err)); });
+  }
+`;
+/**
+ * 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.
+ */
+export const buildSlateUiScript = (target) => [
+    '"use strict";',
+    '(function () {',
+    SLATE_UI_BRIDGE
+        .replace('__TOOLS__', () => JSON.stringify(SLATE_UI_TOOLS))
+        .replace('__COPY__', () => JSON.stringify(SLATE_UI_COPY))
+        .replace('__TARGET__', () => JSON.stringify(target))
+        .replace('__CONVERT__', () => JSON.stringify({
+        choices: target === 'remote' ? SLATE_REMOTE_CONVERT_CHOICES : SLATE_CONVERT_CHOICES,
+        descriptions: target === 'remote' ? SLATE_REMOTE_CONVERT_DESCRIPTIONS : SLATE_CONVERT_DESCRIPTIONS,
+        maxWidth: SLATE_CONVERT_MAX_WIDTH,
+    })),
+    SLATE_UI_STATE,
+    SLATE_UI_PROGRESS,
+    SLATE_UI_INLINE,
+    SLATE_UI_SELECT,
+    SLATE_UI_INSPIRATION,
+    SLATE_UI_STAGE,
+    SLATE_UI_DIALOG,
+    SLATE_UI_MORE.replace('__MORE__', () => JSON.stringify(SLATE_MORE_COUNTS)),
+    SLATE_UI_SCRIBBLE,
+    SLATE_UI_REMOTE,
+    SLATE_UI_BROWSER,
+    HANDSHAKE,
+    '})();',
+].join('\n');
+export const SLATE_UI_SCRIPT = buildSlateUiScript('local');
+//# sourceMappingURL=mcp-slate-ui-script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,iCAAiC,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvN,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuBhE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAU,EAAE,CAAC;IACnE,eAAe;IACf,gBAAgB;IAChB,eAAe;SACZ,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;SAC1D,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;SACxD,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACnD,OAAO,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;QAC3C,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB;QACnF,YAAY,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,0BAA0B;QAClG,QAAQ,EAAE,uBAAuB;KAClC,CAAC,CAAC;IACL,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,cAAc;IACd,eAAe;IACf,aAAa,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1E,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,SAAS;IACT,OAAO;CACR,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and the
+ * Inspiration tab. A dialog is a centred box over a dimmed workspace; it
+ * scrolls inside itself when the window is short, and fills the width on a
+ * phone. The reference tiles are square and fluid: at least 192 px across in
+ * the card and 256 px in the workspace (--ref-min), two across under 420 px.
+ */
+export declare const SLATE_UI_DIALOG_STYLES: string;
+/**
+ * The Generate more tile and its panel. The tile is quiet but findable: a
+ * dashed border in the secondary text colour, a plus and the words "Generate
+ * more", no fill; it takes the size of the thumbnails around it (--thumb-card
+ * beside the card's strip, --thumb-rail in the selection). The panel is one bordered block under the thumbnails:
+ * heading, one helper line, the "Based on" switch, the selected inspiration as
+ * small chips, a note, the count and the two buttons. In the card, the script
+ * shortens the large image by the panel's height while it is open (an inline
+ * --cap), or folds it when too little would be left.
+ */
+export declare const SLATE_UI_MORE_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAoClC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAuChC,CAAC"}

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

@@ -0,0 +1,95 @@
+/**
+ * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and the
+ * Inspiration tab. A dialog is a centred box over a dimmed workspace; it
+ * scrolls inside itself when the window is short, and fills the width on a
+ * phone. The reference tiles are square and fluid: at least 192 px across in
+ * the card and 256 px in the workspace (--ref-min), two across under 420 px.
+ */
+export const SLATE_UI_DIALOG_STYLES = String.raw `
+  .modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); overflow: auto; }
+  .modalbox { display: flex; flex-direction: column; gap: 12px; width: min(520px, 100%); max-height: calc(100vh - 32px); min-width: 0; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--bg); color: var(--text); }
+  .modalbox.wide { width: min(880px, 100%); }
+  .modalbox h2 { margin: 0; font-size: 15px; }
+  .modalbox textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
+  .modalbox textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  .radios { display: flex; flex-wrap: wrap; gap: 6px 14px; }
+  .radio { display: inline-flex; align-items: center; gap: 6px; }
+  /* One muted line: what a control does, or what will happen. */
+  .help { margin: 0; font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
+  .field > .help { margin-top: 4px; }
+  .hint { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 12px; color: var(--text2); }
+  .alert { margin: 0; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
+  .dialogbtns, .dialogtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  .dialogbtns button, .dialogtools button { padding: 8px 12px; }
+  .dialogtools .hint { margin-right: auto; }
+  /* The image of Edit, sized to the picture itself (a height cap of 60 percent of the window), so the scribble layer over it is exactly over the picture. */
+  .imgwrap { position: relative; width: min(100%, calc(60vh * var(--ar, 1.5))); aspect-ratio: var(--ar, 1.5); margin: 0 auto; min-width: 0; border-radius: var(--radius); background: var(--bg3); overflow: hidden; touch-action: none; }
+  .stageimg { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
+  .scribble { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
+  .searchrow { display: flex; gap: 8px; min-width: 0; }
+  .searchrow .query { flex: 1 1 0; min-width: 0; }
+  .insp { container-type: inline-size; }
+  .insp.card { --ref-min: 192px; }
+  .insp.stage { --ref-min: 256px; }
+  .results { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
+  .refhead { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
+  .refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ref-min), 1fr)); gap: 8px; }
+  @container (max-width: 419px) { .refgrid { grid-template-columns: repeat(2, 1fr); } }
+  .refbtn, .skeleton { width: 100%; aspect-ratio: 1; }
+  .skeleton { border-radius: 6px; background: var(--bg2); }
+  .refbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
+  .check { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--inverse); color: var(--inverse-text); }
+  .refbtn[aria-pressed="true"] .check { display: grid; }
+  .placeholder { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text2); padding: 16px; text-align: center; }
+`;
+/**
+ * The Generate more tile and its panel. The tile is quiet but findable: a
+ * dashed border in the secondary text colour, a plus and the words "Generate
+ * more", no fill; it takes the size of the thumbnails around it (--thumb-card
+ * beside the card's strip, --thumb-rail in the selection). The panel is one bordered block under the thumbnails:
+ * heading, one helper line, the "Based on" switch, the selected inspiration as
+ * small chips, a note, the count and the two buttons. In the card, the script
+ * shortens the large image by the panel's height while it is open (an inline
+ * --cap), or folds it when too little would be left.
+ */
+export const SLATE_UI_MORE_STYLES = String.raw `
+  button.moretile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; padding: 0; border: 1px dashed var(--text2); border-radius: 6px; background: none; color: var(--text2); font-size: 12px; font-weight: 500; line-height: 1.2; }
+  button.moretile:hover:not(:disabled), button.moretile[aria-expanded="true"] { color: var(--text); border-color: var(--text); }
+  button.moretile:disabled { opacity: .35; }
+  .stripwrap .moretile { width: var(--thumb-card); height: var(--thumb-card); }
+  .rail .moretile { width: var(--thumb-rail); height: var(--thumb-rail); }
+  .morepanel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
+  #more:not(:empty) { padding-top: 10px; }
+  #card .hero.folded { display: none; }
+  .morehead { margin: 0; font-size: 13px; font-weight: 600; }
+  .moreswitch { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
+  .morethumb { display: block; flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--bg3); object-fit: contain; object-position: center; }
+  .moreswitchtext { flex: 1 1 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
+  .moreswitch input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg3); cursor: pointer; }
+  .moreswitch input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text2); transition: transform .12s; }
+  .moreswitch input[type="checkbox"]:checked { background: var(--inverse); border-color: var(--inverse); }
+  .moreswitch input[type="checkbox"]:checked::after { transform: translateX(16px); background: var(--inverse-text); }
+  .moreswitch input[type="checkbox"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .moreswitch input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
+  .morechips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+  .morechips .lbl { margin: 0; }
+  .refchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
+  .refchip { position: relative; flex: none; width: 48px; height: 48px; }
+  .refchipimg { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--bg3); object-fit: contain; object-position: center; }
+  button.refchipx { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--inverse); color: var(--inverse-text); border-color: var(--bg); }
+  .morepanel textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
+  .morepanel textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  .morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+  .morebtns { display: flex; gap: 8px; margin-left: auto; }
+  .morerow button { padding: 8px 10px; }
+  .seg { display: flex; flex: 1 1 auto; min-width: 0; max-width: 260px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .morehost .seg { max-width: none; flex-basis: 100%; }
+  .segopt { position: relative; display: block; flex: 1 1 0; min-width: 28px; }
+  .segopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+  .segopt span { display: block; padding: 7px 4px; text-align: center; font-weight: 600; }
+  .segopt input:checked + span { background: var(--inverse); color: var(--inverse-text); }
+  .segopt input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: -2px; }
+  .morepanel .alert { margin: 0; }
+  @media (prefers-reduced-motion: reduce) { .moreswitch input[type="checkbox"]::after { transition: none; } }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC/C,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC7C,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * The fullscreen workspace: the selection on the left, one large image with
+ * its band and action row in the middle. The Generate more tile ends the
+ * selection and its panel opens under it. Fluid at any width (`min-width: 0`
+ * on every grid and flex parent).
+ *
+ * The selection's thumbnails are --thumb-rail (144 px), so its column is sized
+ * to hold whole ones: 168 px (one per row) from 640px to 899px, where the image
+ * keeps its room in the desktop app's default 708 px tab; 320 px (two per row)
+ * from 900px; 472 px (three per row) from 1400px. Below 640px the selection
+ * becomes one horizontal row above the image, scrolling inside itself, with each
+ * option's version chips under its thumbnail.
+ *
+ * The action row is right-aligned and as wide as the picture (--ar is set by
+ * the script on the shared parent), so Select, last, ends at the picture's
+ * right edge.
+ */
+export declare const SLATE_UI_STAGE_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-stage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,QAgDjC,CAAC"}

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

@@ -0,0 +1,67 @@
+/**
+ * The fullscreen workspace: the selection on the left, one large image with
+ * its band and action row in the middle. The Generate more tile ends the
+ * selection and its panel opens under it. Fluid at any width (`min-width: 0`
+ * on every grid and flex parent).
+ *
+ * The selection's thumbnails are --thumb-rail (144 px), so its column is sized
+ * to hold whole ones: 168 px (one per row) from 640px to 899px, where the image
+ * keeps its room in the desktop app's default 708 px tab; 320 px (two per row)
+ * from 900px; 472 px (three per row) from 1400px. Below 640px the selection
+ * becomes one horizontal row above the image, scrolling inside itself, with each
+ * option's version chips under its thumbnail.
+ *
+ * The action row is right-aligned and as wide as the picture (--ar is set by
+ * the script on the shared parent), so Select, last, ends at the picture's
+ * right edge.
+ */
+export const SLATE_UI_STAGE_STYLES = String.raw `
+  #stage { min-width: 0; max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
+  #stage.hidden { display: none !important; }
+  .stagehead { display: flex; align-items: center; gap: 12px; min-width: 0; }
+  .stagebody { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; min-width: 0; align-items: start; }
+  .selection { min-width: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 96px); }
+  .rail { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 4px; }
+  .morehost:empty { display: none; }
+  .moreslot { position: sticky; bottom: 0; padding: 4px 0; background: var(--bg); }
+  .round { min-width: 0; }
+  .roundhead { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
+  .options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, var(--thumb-rail)); gap: 10px 8px; }
+  .option { min-width: 0; width: var(--thumb-rail); }
+  .opt { display: block; width: var(--thumb-rail); height: var(--thumb-rail); }
+  .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+  .chip { padding: 1px 7px; font-size: 11px; font-weight: 500; }
+  .chip.selected { background: var(--inverse); color: var(--inverse-text); border-color: var(--inverse); }
+  .main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
+  #stage .main { --cap: max(240px, calc(100vh - 230px)); --w: min(100%, calc(var(--cap) * var(--ar, 100))); }
+  #stage .band, #stage .actionrow, #stage .main > .status { width: var(--w); margin-left: auto; margin-right: auto; }
+  .band { display: flex; align-items: center; gap: 12px; min-height: 28px; min-width: 0; font-size: 13px; color: var(--text2); }
+  .bandtext { min-width: 0; overflow-wrap: anywhere; }
+  .textbtn { flex: none; padding: 2px 6px; border: 0; background: none; font-weight: 600; text-decoration: underline; }
+  .actionrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
+  .actionrow button { flex: none; }
+  #stage .main > .status { text-align: right; }
+  .inspiration { min-width: 0; max-width: 1800px; width: 100%; margin: 0 auto; }
+  @media (min-width: 1400px) {
+    .stagebody { grid-template-columns: 472px minmax(0, 1fr); }
+  }
+  @media (max-width: 480px) {
+    .actionrow { gap: 6px; }
+    .actionrow button { flex: 1 1 auto; padding: 8px 9px; }
+    #stage .main > .status { text-align: left; }
+  }
+  @media (max-width: 899px) {
+    .stagebody { grid-template-columns: 168px minmax(0, 1fr); gap: 12px; }
+  }
+  @media (max-width: 639px) {
+    .stagebody { grid-template-columns: minmax(0, 1fr); }
+    .selection { max-height: none; }
+    .rail { flex: none; flex-direction: row; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 8px; }
+    /* The selection is a row that scrolls sideways: the tile sticks to its right edge, so it is in view however many options there are. */
+    .moreslot { position: sticky; bottom: auto; right: 0; flex: none; align-self: flex-end; padding: 0 0 0 8px; }
+    .round { flex: none; }
+    .options { display: flex; }
+    #stage .main { --cap: 60vh; }
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-stage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD9C,CAAC"}