@12ui/design 0.2.71 → 0.2.73

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

@@ -0,0 +1,103 @@
+/**
+ * The two small controls on a design's thumbnail, in the card's strip and in
+ * the workspace's selection: a plus (More like this) and an edit pencil
+ * (Edit). They are siblings of the thumbnail button inside one cell (a button
+ * cannot hold buttons), revealed by CSS on hover and on keyboard focus within
+ * the cell, and on a device with no hover only on the selected thumbnail. A
+ * click on either never reaches the thumbnail, so it never swaps the large
+ * image by itself.
+ *
+ * The plus opens the Generate more panel for variations of that design
+ * (openMoreLike, in mcp-slate-ui-script-more.ts). Edit selects that design and
+ * opens the Edit dialog. The dialog lives in the workspace; the card has no
+ * room for the drawing surface, so in the card Edit opens the workspace and the
+ * dialog opens as soon as it shows (wantEdit). A host that cannot show the
+ * workspace has no place for the dialog, so there Edit is hidden in the card.
+ *
+ * Not on the Generate more tile, and not on an option that has no picture yet.
+ * Whether each control is on follows the view (syncThumbTools): the plus is off
+ * while a round runs (the tile's rule), Edit while that design has an edit in
+ * flight or its version cannot be edited.
+ */
+export const SLATE_UI_THUMBTOOLS = String.raw `
+  var ICON_PENCIL = "M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19l-4 1zM14 7l3 3";
+
+  function thumbToolButton(action, label, path, c, onclick) {
+    var b = button("", "thumbtool", function (e) {
+      if (e && e.stopPropagation) e.stopPropagation();
+      onclick(c.candidateId);
+    });
+    b.setAttribute("aria-label", label);
+    b.title = label;
+    b.setAttribute("data-action", action);
+    b.setAttribute("data-candidate", c.candidateId);
+    b.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + path + '"/></svg>';
+    return b;
+  }
+
+  // One cell per option: the thumbnail button and, when there is a picture to work from, its two controls.
+  function thumbCell(c, cls) {
+    var cell = el("span", "thumbcell");
+    var thumb = thumbButton(c, cls);
+    if (thumb.classList.contains("selected")) cell.classList.add("selected");
+    cell.appendChild(thumb);
+    if (c.state === "ready" && latestVersion(c)) {
+      var tools = el("span", "thumbtools");
+      tools.appendChild(thumbToolButton("more", COPY.moreLikeThis, ICON_PLUS, c, openMoreLike));
+      tools.appendChild(thumbToolButton("edit", COPY.edit, ICON_PENCIL, c, editFromThumb));
+      cell.appendChild(tools);
+    }
+    return cell;
+  }
+
+  // Whether Edit has a dialog to open in this host: the workspace itself, or a card that can open the workspace.
+  function canEditHere() { return isFullscreen() || canFullscreen(); }
+
+  function thumbToolNodes() { return Array.prototype.slice.call(document.querySelectorAll(".thumbtool")); }
+  function thumbToolFor(action, candidateId) {
+    return thumbToolNodes().filter(function (t) {
+      return t.getAttribute("data-action") === action && t.getAttribute("data-candidate") === candidateId && !t.disabled && !isHiddenNode(t);
+    })[0];
+  }
+
+  function syncThumbTools() {
+    if (!state.view) return;
+    var busy = moreBusy();
+    var edit = canEditHere();
+    var likeId = state.more && state.more.mode === "like" ? state.more.fromCandidateId : null;
+    thumbToolNodes().forEach(function (t) {
+      var c = cand(t.getAttribute("data-candidate"));
+      var v = latestVersion(c);
+      if (t.getAttribute("data-action") === "more") {
+        t.disabled = busy || !pickable(v);
+        t.setAttribute("aria-expanded", likeId !== null && likeId === t.getAttribute("data-candidate") ? "true" : "false");
+      } else {
+        t.classList.toggle("hidden", !edit);
+        t.disabled = !v || !v.editable || !!(c && c.busy);
+      }
+    });
+  }
+
+  // Edit: that design is selected, then the Edit dialog opens on it, exactly as the workspace's Edit button does.
+  function editFromThumb(candidateId) {
+    var c = cand(candidateId);
+    var v = latestVersion(c);
+    if (!c || !v || !v.editable || c.busy || state.dialog) return;
+    selectCandidate(candidateId);
+    if (isFullscreen()) { openDialog("edit", thumbToolFor("edit", candidateId) || stageEls.edit); return; }
+    if (!canFullscreen()) return;
+    state.wantEdit = v.versionId;
+    request("ui/request-display-mode", { mode: "fullscreen" }).then(function (result) {
+      if (result && result.mode && result.mode !== "fullscreen") state.wantEdit = null;
+    }, function () { state.wantEdit = null; });
+  }
+  // The workspace has just shown: the dialog that was asked for in the card opens now, on the version that was asked for.
+  function openWantedEdit() {
+    var want = state.wantEdit;
+    if (!want || !stageBuilt || state.dialog) return;
+    state.wantEdit = null;
+    var v = selectedVersion();
+    if (v && v.versionId === want && v.editable) openDialog("edit", stageEls.edit);
+  }
+`;
+//# sourceMappingURL=mcp-slate-ui-script-thumbtools.js.map

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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 (Design, Edit, Branch and Convert), more (the Generate more tile and panel), thumbtools (the
+ * plus and the pencil on a thumbnail), 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":"AAgBA;;;;;;;;;;;;;GAaG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAgB3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAsB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

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

@@ -0,0 +1,58 @@
+import { SLATE_CONVERT_CHOICES, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, 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';
+import { SLATE_UI_THUMBTOOLS } from './mcp-slate-ui-script-thumbtools.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, 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_THUMBTOOLS,
+    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,uBAAuB,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACxJ,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;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAwB1E,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,EAAE,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EAAE,QAAQ,EAAE,uBAAuB,EAAE,CAAC,CAAC;IAC3K,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,mBAAmB;IACnB,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,17 @@
+/**
+ * The dialogs (Design, 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.
+ */
+export declare const SLATE_UI_DIALOG_STYLES: string;
+/**
+ * The Generate more tile and its panel. The tile is deliberately quiet: a
+ * hairline dashed border, a muted plus, no fill, no words; it takes the size
+ * of the thumbnails around it (56 px in the card's strip, 72 px in the
+ * selection). The panel is one bordered block under the thumbnails. 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;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAgClC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,QAwBhC,CAAC"}

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

@@ -0,0 +1,73 @@
+/**
+ * The dialogs (Design, 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.
+ */
+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; }
+  .refline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
+  .refthumbs { display: flex; flex-wrap: wrap; gap: 4px; }
+  .refmini { display: block; width: 36px; height: 36px; border-radius: 4px; background: var(--bg3); object-fit: cover; object-position: top; }
+  .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; }
+  /* 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.card { --refsize: 96px; }
+  .insp.stage { --refsize: 128px; }
+  .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, var(--refsize)); gap: 8px; }
+  .refbtn { width: var(--refsize); height: var(--refsize); }
+  .refbtn .thumb { object-position: center; }
+  .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 deliberately quiet: a
+ * hairline dashed border, a muted plus, no fill, no words; it takes the size
+ * of the thumbnails around it (56 px in the card's strip, 72 px in the
+ * selection). The panel is one bordered block under the thumbnails. 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: grid; place-items: center; flex: none; padding: 0; border: 1px dashed var(--border); border-radius: 6px; background: none; color: var(--text2); opacity: .75; }
+  button.moretile:hover:not(:disabled), button.moretile[aria-expanded="true"] { opacity: 1; border-color: var(--text2); }
+  button.moretile:disabled { opacity: .35; }
+  .strip .moretile { width: 56px; height: 56px; }
+  .rail .moretile { width: 72px; height: 72px; }
+  .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; }
+  .moreheadrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .morethumb { display: block; flex: none; width: 28px; height: 28px; border-radius: 4px; background: var(--bg3); object-fit: cover; object-position: top; }
+  .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: inline-flex; flex: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+  .segopt { position: relative; display: block; }
+  .segopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+  .segopt span { display: block; min-width: 30px; padding: 7px 8px; 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; }
+`;
+//# 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;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC/C,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwB7C,CAAC"}

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

@@ -0,0 +1,12 @@
+/**
+ * The fullscreen workspace: the selection on the left (220 px), 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). From 640px the selection
+ * stays on the left, 176 px wide until 900px so the image keeps its room in
+ * the desktop app's default 708 px tab. Below 640px the selection becomes one
+ * horizontal row above the image, scrolling inside itself, with each option's
+ * version chips under its thumbnail.
+ */
+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;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,QAyCjC,CAAC"}

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

@@ -0,0 +1,53 @@
+/**
+ * The fullscreen workspace: the selection on the left (220 px), 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). From 640px the selection
+ * stays on the left, 176 px wide until 900px so the image keeps its room in
+ * the desktop app's default 708 px tab. Below 640px the selection becomes one
+ * horizontal row above the image, scrolling inside itself, with each option's
+ * version chips under its thumbnail.
+ */
+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: 220px 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, 72px); gap: 10px 8px; }
+  .option { min-width: 0; width: 72px; }
+  .opt { display: block; width: 72px; height: 72px; }
+  .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 .hero { --cap: max(240px, calc(100vh - 230px)); }
+  .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; gap: 8px; min-width: 0; }
+  .actionrow button { flex: none; }
+  .inspiration { min-width: 0; max-width: 960px; width: 100%; margin: 0 auto; }
+  @media (max-width: 480px) {
+    .actionrow { gap: 6px; }
+    .actionrow button { flex: 1 1 auto; padding: 8px 9px; }
+  }
+  @media (max-width: 899px) {
+    .stagebody { grid-template-columns: 176px 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; }
+    .moreslot { position: static; flex: none; align-self: flex-start; padding: 0; background: none; }
+    .round { flex: none; }
+    .options { display: flex; }
+    #stage .hero { --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;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC9C,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * The two controls on a design thumbnail (a plus and a pencil), and the cell
+ * that holds them beside the thumbnail button. They sit in the top right corner
+ * on a semi-opaque dark backdrop, so they stay legible over any picture, and
+ * are shown only on hover or while keyboard focus is inside the cell. A device
+ * with no hover shows them on the selected thumbnail only. A hidden control is
+ * not clickable but stays focusable, and focus reveals it.
+ */
+export declare const SLATE_UI_THUMBTOOLS_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-thumbtools.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * The two controls on a design thumbnail (a plus and a pencil), and the cell
+ * that holds them beside the thumbnail button. They sit in the top right corner
+ * on a semi-opaque dark backdrop, so they stay legible over any picture, and
+ * are shown only on hover or while keyboard focus is inside the cell. A device
+ * with no hover shows them on the selected thumbnail only. A hidden control is
+ * not clickable but stays focusable, and focus reveals it.
+ */
+export const SLATE_UI_THUMBTOOLS_STYLES = String.raw `
+  .thumbcell { position: relative; flex: none; display: block; }
+  .strip .thumbcell { width: 56px; height: 56px; }
+  .option .thumbcell { width: 72px; height: 72px; }
+  .thumbtools { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s; }
+  .thumbcell:hover .thumbtools, .thumbcell:focus-within .thumbtools { opacity: 1; pointer-events: auto; }
+  button.thumbtool { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: rgba(20, 20, 20, .62); color: #fff; }
+  button.thumbtool:hover:not(:disabled) { background: rgba(20, 20, 20, .85); }
+  button.thumbtool:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
+  button.thumbtool:disabled { opacity: .5; }
+  @media (hover: none) {
+    .thumbtools { display: none; }
+    .thumbcell.selected .thumbtools { display: flex; opacity: 1; pointer-events: auto; }
+  }
+  @media (prefers-reduced-motion: reduce) { .thumbtools { transition: none; } }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-thumbtools.js.map

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The workspace view's stylesheet: base and inline card (the fullscreen stage
+ * is in mcp-slate-ui-styles-stage.ts, the dialogs in
+ * mcp-slate-ui-styles-dialog.ts). Host variables win; the fallbacks keep the
+ * view usable when a host passes none. System fonts only, no external
+ * requests.
+ *
+ * The layout is fluid by construction: the view never asks the host for a
+ * width. Every flex/grid parent sets `min-width: 0` so no child can push the
+ * frame wider than its pane, and the strip of thumbnails scrolls inside itself.
+ */
+export declare const SLATE_UI_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles.d.ts.map

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

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

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

@@ -0,0 +1,117 @@
+/**
+ * The workspace view's stylesheet: base and inline card (the fullscreen stage
+ * is in mcp-slate-ui-styles-stage.ts, the dialogs in
+ * mcp-slate-ui-styles-dialog.ts). Host variables win; the fallbacks keep the
+ * view usable when a host passes none. System fonts only, no external
+ * requests.
+ *
+ * The layout is fluid by construction: the view never asks the host for a
+ * width. Every flex/grid parent sets `min-width: 0` so no child can push the
+ * frame wider than its pane, and the strip of thumbnails scrolls inside itself.
+ */
+export const SLATE_UI_STYLES = String.raw `
+  /* Host variables win; these fallbacks keep the view usable when a host passes none. System fonts only. */
+  :root {
+    color-scheme: light dark;
+    --f-bg: light-dark(#ffffff, #1c1c1c);
+    --f-bg2: light-dark(#f4f4f2, #2a2a2a);
+    --f-bg3: light-dark(#e8e8e4, #3a3a3a);
+    --f-text: light-dark(#1a1a1a, #f2f2f2);
+    --f-text2: light-dark(#5f5f5b, #a8a8a3);
+    --f-border: light-dark(#d9d9d3, #444440);
+    --f-inverse: light-dark(#1a1a1a, #f2f2f2);
+    --f-inverse-text: light-dark(#ffffff, #1a1a1a);
+    --f-ring: light-dark(#2f6fed, #7aa2ff);
+    --f-danger: light-dark(#b3261e, #ff8a80);
+    --f-ok: light-dark(#1d6b3a, #6fd08c);
+    --bg: var(--color-background-primary, var(--f-bg));
+    --bg2: var(--color-background-secondary, var(--f-bg2));
+    --bg3: var(--color-background-tertiary, var(--f-bg3));
+    --text: var(--color-text-primary, var(--f-text));
+    --text2: var(--color-text-secondary, var(--f-text2));
+    --border: var(--color-border-primary, var(--f-border));
+    --inverse: var(--color-background-inverse, var(--f-inverse));
+    --inverse-text: var(--color-text-inverse, var(--f-inverse-text));
+    --ring: var(--color-ring-primary, var(--f-ring));
+    --danger: var(--color-text-danger, var(--f-danger));
+    --ok: var(--color-text-success, var(--f-ok));
+    --radius: var(--border-radius-md, 8px);
+    --font: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  }
+  :root[data-theme="light"] { color-scheme: light; }
+  :root[data-theme="dark"] { color-scheme: dark; }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; }
+  /* Fluid by construction: the app never asks the host for a width. The layout width is whatever the host gives
+     the view (fixed width or flexible maxWidth alike), so a host can never grow the frame past its pane. */
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font: 14px/1.45 var(--font);
+    padding: 16px;
+    min-width: 0;
+  }
+  main { max-width: 960px; margin: 0 auto; min-width: 0; container-type: inline-size; }
+  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  h1 { font-size: 15px; font-weight: 600; margin: 0; }
+  .meta { color: var(--text2); font-size: 12px; }
+  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-width: 0; }
+  .tabs { display: flex; gap: 4px; min-width: 0; }
+  .tab { padding: 6px 12px; border-radius: 999px; border-color: transparent; background: transparent; color: var(--text2); font-weight: 500; }
+  .tab[aria-selected="true"] { background: var(--bg2); color: var(--text); border-color: var(--border); }
+  .iconbtn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; }
+  /* The large image. Its box has the image's own aspect ratio and a capped height, so the card never jumps when the
+     picture lands and the badge and hairline sit on the picture itself. The card caps the height at 60 percent of
+     its own width (a container unit, so the frame's height never feeds back into it); the workspace uses the window. */
+  .hero { position: relative; width: min(100%, calc(var(--cap, 60cqw) * 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; }
+  #card .hero { --cap: 60cqw; }
+  .hero.note { width: 100%; aspect-ratio: auto; background: var(--bg2); }
+  .heroimg { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
+  .heroimg.empty { background: var(--bg3); }
+  .heronote { padding: 32px 16px; color: var(--text2); text-align: center; overflow-wrap: anywhere; }
+  .hero .badge, .thumbbtn .code, .opt .code { position: absolute; left: 8px; bottom: 8px; padding: 0 8px; border-radius: 999px; background: var(--inverse); color: var(--inverse-text); font-size: 12px; font-weight: 600; line-height: 20px; }
+  .hero .hair { position: absolute; left: 0; right: 0; bottom: 0; }
+  .pickrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
+  .pickrow > button { flex: none; }
+  /* One row of small thumbnails; more than fit scroll sideways inside the strip, never the page, with a fade at the edge. */
+  .strip { flex: 1 1 0; display: flex; gap: 8px; min-width: 0; margin: 0; padding: 4px; overflow-x: auto; }
+  .strip.fade { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .thumbbtn, .opt, .refbtn { position: relative; padding: 0; border: 0; border-radius: 6px; background: var(--bg2); overflow: hidden; }
+  .thumbbtn { flex: none; width: 56px; height: 56px; }
+  .thumb { display: block; width: 100%; height: 100%; background: var(--bg3); object-fit: cover; object-position: top; }
+  .thumbbtn .code, .opt .code { left: 3px; bottom: 3px; padding: 0 5px; font-size: 10px; line-height: 14px; }
+  .thumbbtn.selected, .opt.selected { box-shadow: 0 0 0 2px var(--text); }
+  .thumbbtn.failed, .opt.failed { opacity: .5; }
+  .shimmer { background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
+  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+  .field { margin-top: 0; }
+  label.lbl, span.lbl { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
+  input[type="text"], input[type="number"], select {
+    width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg);
+    border: 1px solid var(--border); border-radius: var(--radius);
+  }
+  input[type="text"]:focus-visible, input[type="number"]:focus-visible, select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  .spacer { flex: 1 1 0; min-width: 0; }
+  button {
+    font: inherit; font-weight: 600; padding: 8px 16px; border-radius: var(--radius);
+    border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer;
+  }
+  button.thumbbtn, button.opt, button.refbtn { padding: 0; border: 0; }
+  button.primary { background: var(--inverse); color: var(--inverse-text); border-color: var(--inverse); }
+  button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  button:disabled { opacity: .45; cursor: default; }
+  .note { margin: 10px 0 0; font-size: 12px; color: var(--text2); }
+  .hair { display: block; height: 2px; background: var(--bg3); overflow: hidden; position: relative; min-width: 0; }
+  .hair.indeterminate::after { content: ""; position: absolute; inset: 0 auto 0 -30%; width: 30%; background: var(--text); animation: slide 1.4s ease-in-out infinite; }
+  @keyframes slide { from { left: -30%; } to { left: 100%; } }
+  @media (prefers-reduced-motion: reduce) {
+    .hair.indeterminate::after { animation: none; width: 100%; left: 0; opacity: .3; }
+    .shimmer { animation: none; }
+  }
+  .status { min-height: 18px; margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
+  .status.ok { color: var(--ok); }
+  .status.err, .err { color: var(--danger); }
+  #fatal { padding: 16px; color: var(--danger); }
+  .hidden { display: none !important; }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { type SlateUiTarget } from './mcp-slate-ui-script.js';
+/**
+ * The workspace view for one target, as one self-contained HTML document: no external script,
+ * stylesheet, font, or URL, so it renders under the strictest host sandbox.
+ *
+ * The static markup is the inline card and nothing else: the tabs, one large
+ * image, one row with the strip of options and Select, one status line, and an
+ * icon-only control that opens the workspace. The fullscreen stage and its dialogs are built by the
+ * script into `#stage` only when the host puts the view in fullscreen.
+ */
+export declare const buildSlateUiHtml: ({ target }: {
+    target: SlateUiTarget;
+}) => string;
+/** The local plugin's screen: what `12ui mcp` serves. */
+export declare const SLATE_UI_HTML: string;
+//# sourceMappingURL=mcp-slate-ui.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMlF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,KAAG,MAuCxE,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,aAAa,QAAwC,CAAC"}