@12ui/design 0.2.80 → 0.2.81

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

@@ -1,351 +0,0 @@
-/**
- * The three dialogs of the workspace: Edit (a drawing over the image, an
- * optional instruction, or both), Branch (an optional description of what to
- * build) and Convert (which format, with only the options that format has).
- * Each is opened by its button, confirmed by one verb (Apply, Send, Send) and
- * closed by Cancel or Escape; Select has no dialog, and Generate more is a
- * panel, not a dialog (mcp-slate-ui-script-more.ts).
- *
- * Common rules: a title, fields, one line that says what will happen, an error
- * line (role alert, empty by default), then Cancel and the primary. The
- * primary keeps its label and disables while a call is in flight; on success
- * the dialog closes at once. One id is minted when the dialog opens (the op id
- * of Edit, the hand-off id of Branch and Convert), so a double click sends one
- * request.
- *
- * Edit starts work through the run tool, which returns as soon as the work is
- * committed; Branch and Convert hand off to the agent through sendHandoff.
- * Nothing here shows or asks for money.
- */
-export const SLATE_UI_DIALOG = String.raw `
-  // Catalogue keys: the dialog's title is its button's verb, and its primary says what confirming does.
-  var DIALOG_TITLES = { edit: "edit", branch: "branch", convert: "convert" };
-  var DIALOG_VERBS = { edit: "apply", branch: "send", convert: "send" };
-
-  function field(labelText, control, id) {
-    var wrap = el("div", "field");
-    var label = el("label", "lbl", labelText);
-    if (id) label.setAttribute("for", id);
-    wrap.appendChild(label);
-    wrap.appendChild(control);
-    return wrap;
-  }
-  function group(labelText, control) {
-    var wrap = el("div", "field");
-    wrap.appendChild(el("span", "lbl", labelText));
-    wrap.appendChild(control);
-    return wrap;
-  }
-  // One muted line under a control: what it does, or what will happen.
-  function helpLine(text) { return el("p", "help", text); }
-  function textarea(id, rows, placeholder, max, onInput, ariaLabel) {
-    var area = el("textarea");
-    area.id = id;
-    area.setAttribute("rows", String(rows));
-    area.placeholder = placeholder;
-    area.setAttribute("aria-label", ariaLabel);
-    area.setAttribute("maxlength", String(max));
-    area.addEventListener("input", function () { onInput(area.value); updateDialogUi(); });
-    return area;
-  }
-  function radioRow(name, options, current, onChange) {
-    var row = el("div", "radios");
-    row.setAttribute("role", "radiogroup");
-    options.forEach(function (opt) {
-      var label = el("label", "radio");
-      var input = el("input");
-      input.type = "radio";
-      input.name = name;
-      input.value = String(opt.value);
-      input.checked = opt.value === current;
-      if (opt.disabled) input.disabled = true;
-      input.addEventListener("change", function () { onChange(opt.value); updateDialogUi(); });
-      label.appendChild(input);
-      label.appendChild(el("span", "", opt.label));
-      row.appendChild(label);
-    });
-    return row;
-  }
-
-  // ---- the edit instruction, counted as the servers count it: UTF-8 bytes of the words, control characters stripped ----
-  var EDIT_PROMPT_MAX_BYTES = __EDIT_PROMPT_MAX_BYTES__;
-  function editWords(text) { return String(text || "").replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, "").trim(); }
-  function utf8Bytes(text) {
-    var n = 0;
-    for (var i = 0; i < text.length; i++) {
-      var c = text.charCodeAt(i);
-      if (c < 0x80) n += 1;
-      else if (c < 0x800) n += 2;
-      else if (c >= 0xd800 && c <= 0xdbff && i + 1 < text.length && text.charCodeAt(i + 1) >= 0xdc00 && text.charCodeAt(i + 1) <= 0xdfff) { n += 4; i++; }
-      else n += 3;
-    }
-    return n;
-  }
-  // How many characters must go from the end of the instruction for it to fit; 0 when it fits.
-  function editOverBy(text) {
-    var words = editWords(text);
-    var over = utf8Bytes(words) - EDIT_PROMPT_MAX_BYTES;
-    if (over <= 0) return 0;
-    var chars = Array.from(words);
-    var cut = 0;
-    while (over > 0 && chars.length > 0) { over -= utf8Bytes(chars.pop()); cut++; }
-    return cut;
-  }
-
-  // ---- what this Mac can do now ----
-  function localImage() { return (state.view && state.view.local && state.view.local.image) || { ready: false, reason: null }; }
-  // Why this Mac cannot draw, in the person's language when the server named it by code.
-  function localReason() { var local = localImage(); return serverText(local.reasonL10n, local.reason); }
-
-  // ---- open and close ----
-  function openDialog(kind, opener) {
-    if (state.dialog || !state.view) return;
-    var v = selectedVersion();
-    if (!v) return;
-    if (kind === "edit" && !v.editable) return;
-    state.dialog = {
-      kind: kind, id: uuid4(), versionId: v.versionId, opener: opener,
-      prompt: "", explanation: "",
-      format: CONVERT.choices[0].value, quality: "standard", width: "", layouts: "standard",
-      strokes: [], current: null, committing: false, error: "", els: {}
-    };
-    mountDialog();
-  }
-  function closeDialog() {
-    var d = state.dialog;
-    if (!d) return;
-    state.dialog = null;
-    stageEls.dialog.textContent = "";
-    if (d.opener && d.opener.isConnected !== false && d.opener.focus) d.opener.focus();
-  }
-
-  // ---- what each dialog would send ----
-  // The instruction is optional when the edit carries marks: a drawing alone is sent with no words and the server infers them.
-  function editAction(d) {
-    var action = { kind: "edit", versionId: d.versionId };
-    var words = d.prompt.trim();
-    if (words) action.prompt = words;
-    if (d.strokes.length > 0) action.strokes = d.strokes.map(function (s) { return s.map(function (p) { return [p[0], p[1]]; }); });
-    return action;
-  }
-  // The hosted server takes the marked image from the screen (there is no server-side compositing), so an edit with
-  // strokes carries it; the local server draws its own from the strokes.
-  function editActionFor(d, version) {
-    var action = editAction(d);
-    if (TARGET !== "remote" || d.strokes.length === 0) return Promise.resolve(action);
-    return compositeMarked(version, d.strokes).then(function (marked) {
-      action.annotated = marked;
-      return action;
-    }, function (err) { throw new Error(t("markFailed", { detail: errText(err) })); });
-  }
-  function convertChoice(d) { return CONVERT.choices.filter(function (c) { return c.value === d.format; })[0]; }
-  // An empty width is fine (the service picks); anything else must be a whole number the CLI accepts.
-  function widthOf(d) {
-    var t = d.width.trim();
-    if (!t) return { ok: true, value: null };
-    var n = Number(t);
-    var ok = /^[0-9]+$/.test(t) && n >= 1 && n <= CONVERT.maxWidth;
-    return { ok: ok, value: ok ? n : null };
-  }
-  function convertOptions(d) {
-    var choice = convertChoice(d);
-    // The hosted server has one engine and two outputs; nothing else is a choice.
-    if (TARGET === "remote") return { engine: "local", output: choice.output };
-    if (choice.engine === "local") return { engine: "local", output: choice.output };
-    var options = { engine: "service", output: choice.output, model: d.quality };
-    var width = widthOf(d);
-    if (width.value !== null) options.width = width.value;
-    if (choice.output === "html") options.responsiveQuality = d.layouts;
-    return options;
-  }
-  function dialogReady(d) {
-    var v = ver(d.versionId);
-    // An edit needs a drawing, words or both; Branch has no required field.
-    if (d.kind === "edit") return localImage().ready && !!v && v.editable && (d.strokes.length > 0 || !!d.prompt.trim()) && editOverBy(d.prompt) === 0;
-    if (d.kind === "branch") return true;
-    return !!convertChoice(d) && widthOf(d).ok;
-  }
-
-  // ---- send ----
-  function runAction(action, opId) {
-    return callTool(TOOLS.run, { runDir: state.view.runDir, opId: opId, action: action }).then(function (result) {
-      var sc = result.structuredContent || {};
-      if (sc.view) applyView(sc.view, true);
-      // The hosted server draws nothing: the workspace runner on the person's Mac does, or else the person's agent,
-      // which is told here (best effort, like Select) only when no runner holds the workspace.
-      if (TARGET === "remote") remoteAfterRun(action, opId, sc.runner);
-      return sc;
-    });
-  }
-  function commitDialog() {
-    var d = state.dialog;
-    if (!d || d.committing || !dialogReady(d)) return;
-    d.committing = true;
-    d.error = "";
-    updateDialogUi();
-    var version = ver(d.versionId);
-    var work;
-    if (d.kind === "branch") work = sendHandoff("branch", version, d.id, { explanation: d.explanation.trim() });
-    else if (d.kind === "convert") work = sendHandoff("convert", version, d.id, convertOptions(d));
-    else {
-      var edited = cand(version.candidateId);
-      work = editActionFor(d, version).then(function (action) { return runAction(action, d.id); }).then(function () {
-        // The new version is shown the moment it lands.
-        state.awaitEdit = { candidateId: version.candidateId, count: edited ? edited.versionIds.length : 0 };
-      });
-    }
-    work.then(function () {
-      closeDialog();
-    }, function (err) {
-      if (state.dialog !== d) return;
-      d.committing = false;
-      d.error = errText(err);
-      updateDialogUi();
-    });
-  }
-
-  // ---- the dialog's elements ----
-  function editBody(d, box) {
-    var v = ver(d.versionId);
-    var wrap = el("div", "imgwrap");
-    wrap.style.setProperty("--ar", String(v.width / v.height));
-    var img = el("img", "stageimg empty");
-    img.alt = t("versionName", { label: v.label });
-    img.setAttribute("draggable", "false");
-    wrap.appendChild(img);
-    bindImage(img, v, "full", true);
-    var cached = state.thumbs[imageKey(v, "thumb")];
-    if (cached) img.src = cached;
-    scribbleAttach(wrap, d);
-    box.appendChild(wrap);
-    // Under the image: the hint that it can be drawn on, and the two drawing controls.
-    var tools = el("div", "dialogtools");
-    tools.appendChild(el("p", "hint", t("scribbleHint")));
-    d.els.undo = button(t("undo"), "", function () { scribbleUndo(d); });
-    d.els.clear = button(t("clear"), "", function () { scribbleClear(d); });
-    tools.appendChild(d.els.undo);
-    tools.appendChild(d.els.clear);
-    box.appendChild(tools);
-    box.appendChild(textarea("dialogedit", 3, t("editPlaceholder"), 6000, function (value) { d.prompt = value; }, t("editAria")));
-    d.els.help = helpLine("");
-    box.appendChild(d.els.help);
-  }
-  function branchBody(d, box) {
-    box.appendChild(textarea("dialogbranch", 4, t("branchPlaceholder"), 2000, function (value) { d.explanation = value; }, t("branchAria")));
-    box.appendChild(helpLine(t("branchHelp")));
-  }
-  function convertBody(d, box) {
-    var select = el("select");
-    select.id = "dialogformat";
-    var service = el("optgroup");
-    service.setAttribute("label", t("serviceGroup"));
-    CONVERT.choices.forEach(function (choice) {
-      var option = el("option", "", choice.labelKey ? t(choice.labelKey) : choice.label);
-      option.setAttribute("value", choice.value);
-      if (choice.value === d.format) option.setAttribute("selected", "");
-      (choice.engine === "local" ? select : service).appendChild(option);
-    });
-    if (service.childNodes.length > 0) select.appendChild(service);
-    select.addEventListener("change", function () { d.format = select.value; updateDialogUi(); });
-    box.appendChild(field(t("convertLabel"), select, "dialogformat"));
-    // One line that follows the choice: what the person gets.
-    d.els.formatHelp = helpLine("");
-    box.appendChild(d.els.formatHelp);
-    // The hosted server builds from the image and has nothing else to ask: no quality, width or layouts.
-    if (TARGET === "remote") return;
-    // Only the options the chosen format has are shown; the rest are hidden, not disabled. Each says what it does in one line.
-    d.els.quality = group(t("qualityLabel"), radioRow("quality", [{ value: "fast", label: t("fast") }, { value: "standard", label: t("standard") }, { value: "pro", label: t("pro") }], d.quality, function (value) { d.quality = value; }));
-    d.els.quality.appendChild(helpLine(t("qualityHelp")));
-    var width = el("input");
-    width.type = "number";
-    width.id = "dialogwidth";
-    width.setAttribute("min", "1");
-    width.setAttribute("max", String(CONVERT.maxWidth));
-    width.setAttribute("placeholder", t("widthPlaceholder"));
-    width.setAttribute("inputmode", "numeric");
-    width.addEventListener("input", function () { d.width = width.value; updateDialogUi(); });
-    d.els.width = field(t("widthLabel"), width, "dialogwidth");
-    d.els.width.appendChild(helpLine(t("widthHelp")));
-    d.els.layouts = group(t("layoutsLabel"), radioRow("layouts", [{ value: "standard", label: t("standard") }, { value: "pro", label: t("pro") }], d.layouts, function (value) { d.layouts = value; }));
-    d.els.layouts.appendChild(helpLine(t("layoutsHelp")));
-    [d.els.quality, d.els.width, d.els.layouts].forEach(function (node) { box.appendChild(node); });
-  }
-
-  function mountDialog() {
-    var d = state.dialog;
-    var host = stageEls.dialog;
-    host.textContent = "";
-    var backdrop = el("div", "modal");
-    backdrop.addEventListener("click", function (e) { if (e.target === backdrop && !d.committing) closeDialog(); });
-    var box = el("div", "modalbox" + (d.kind === "edit" ? " wide" : ""));
-    box.setAttribute("role", "dialog");
-    box.setAttribute("aria-modal", "true");
-    box.setAttribute("aria-label", t(DIALOG_TITLES[d.kind]));
-    box.appendChild(el("h2", "", t(DIALOG_TITLES[d.kind])));
-    if (d.kind === "edit") editBody(d, box);
-    else if (d.kind === "branch") branchBody(d, box);
-    else convertBody(d, box);
-    d.els.alert = el("p", "alert");
-    d.els.alert.setAttribute("role", "alert");
-    box.appendChild(d.els.alert);
-    var buttons = el("div", "dialogbtns");
-    buttons.appendChild(el("span", "spacer"));
-    buttons.appendChild(button(t("cancel"), "", closeDialog));
-    d.els.primary = button(t(DIALOG_VERBS[d.kind]), "primary", commitDialog);
-    buttons.appendChild(d.els.primary);
-    box.appendChild(buttons);
-    backdrop.appendChild(box);
-    host.appendChild(backdrop);
-    d.els.box = box;
-    updateDialogUi();
-    var first = box.querySelector("textarea") || box.querySelector("select") || box.querySelector("input:checked") || d.els.primary;
-    if (first && first.focus) first.focus();
-  }
-
-  function updateDialogUi() {
-    var d = state.dialog;
-    if (!d || !d.els.primary) return;
-    d.els.primary.disabled = d.committing || !dialogReady(d);
-    // A dialog that cannot run on this Mac says why, in the same line an error would use.
-    var local = localImage();
-    var blockedByLocal = d.kind === "edit" && !local.ready;
-    var tooLong = d.kind === "edit" ? editOverBy(d.prompt) : 0;
-    d.els.alert.textContent = d.error || (blockedByLocal ? localReason() : "") || (tooLong > 0 ? t("editTooLong", { n: tooLong }) : "");
-    d.els.alert.classList.toggle("hidden", !d.els.alert.textContent);
-    if (d.els.undo) d.els.undo.disabled = d.strokes.length === 0 || d.committing;
-    if (d.els.clear) d.els.clear.disabled = d.strokes.length === 0 || d.committing;
-    if (d.els.help) {
-      var marksOnly = d.strokes.length > 0 && !d.prompt.trim();
-      d.els.help.textContent = marksOnly ? t("editHelpMarks") : t("editHelp", { label: (ver(d.versionId) || {}).label || "" });
-    }
-    if (d.kind === "convert") {
-      var choice = convertChoice(d);
-      d.els.formatHelp.textContent = choice && CONVERT.descriptionKeys[choice.value] ? t(CONVERT.descriptionKeys[choice.value]) : "";
-    }
-    if (d.kind === "convert" && TARGET !== "remote") {
-      var isLocal = !!choice && choice.engine === "local";
-      d.els.quality.classList.toggle("hidden", isLocal);
-      d.els.width.classList.toggle("hidden", isLocal);
-      d.els.layouts.classList.toggle("hidden", isLocal || choice.output !== "html");
-    }
-  }
-
-  // Escape closes; Tab stays inside the dialog.
-  document.addEventListener("keydown", function (e) {
-    var d = state.dialog;
-    if (!d) return;
-    if (e.key === "Escape" && !d.committing) { closeDialog(); return; }
-    if (e.key !== "Tab" || !d.els.box) return;
-    var items = Array.prototype.filter.call(d.els.box.querySelectorAll("button, textarea, input, select"), function (n) {
-      if (n.disabled) return false;
-      for (var node = n; node && node.classList; node = node.parentElement) if (node.classList.contains("hidden")) return false;
-      return true;
-    });
-    if (items.length === 0) return;
-    var first = items[0];
-    var last = items[items.length - 1];
-    if (e.shiftKey && document.activeElement === first) { last.focus(); if (e.preventDefault) e.preventDefault(); }
-    else if (!e.shiftKey && document.activeElement === last) { first.focus(); if (e.preventDefault) e.preventDefault(); }
-  });
-`;
-//# sourceMappingURL=mcp-slate-ui-script-dialog.js.map

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

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

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

@@ -1,7 +0,0 @@
-/**
- * The hairline that sits under the large image while work runs on its option.
- * There is no measured duration, so it never estimates: it is indeterminate,
- * and the words (the band, the status line) carry what is happening.
- */
-export declare const SLATE_UI_PROGRESS: string;
-//# sourceMappingURL=mcp-slate-ui-script-progress.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mcp-slate-ui-script-progress.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAE7B,CAAC"}

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

@@ -1,9 +0,0 @@
-/**
- * The hairline that sits under the large image while work runs on its option.
- * There is no measured duration, so it never estimates: it is indeterminate,
- * and the words (the band, the status line) carry what is happening.
- */
-export const SLATE_UI_PROGRESS = String.raw `
-  function progressBar() { return el("span", "hair indeterminate"); }
-`;
-//# sourceMappingURL=mcp-slate-ui-script-progress.js.map

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

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

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

@@ -1,20 +0,0 @@
-/**
- * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and, at the
- * end, the Inspiration tab (mcp-slate-ui-styles-inspiration.ts). 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 quiet but findable: a
- * dashed border in the secondary text colour, a plus and the words "Generate
- * more", no fill. In the card's strip it is one more tile of the thumbnails' grid, as wide as a column and with the
- * newest round's ratio; in the workspace it is a slim bar on top of the selection (mcp-slate-ui-styles-stage.ts).
- * The panel is one bordered block under the tile:
- * 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

@@ -1 +0,0 @@
-{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAqBJ,CAAC;AAEhC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB,QA6ChC,CAAC"}

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

@@ -1,87 +0,0 @@
-import { SLATE_UI_INSPIRATION_STYLES } from './mcp-slate-ui-styles-inspiration.js';
-/**
- * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and, at the
- * end, the Inspiration tab (mcp-slate-ui-styles-inspiration.ts). 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; }
-  /* 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; }
-${SLATE_UI_INSPIRATION_STYLES}`;
-/**
- * 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. In the card's strip it is one more tile of the thumbnails' grid, as wide as a column and with the
- * newest round's ratio; in the workspace it is a slim bar on top of the selection (mcp-slate-ui-styles-stage.ts).
- * The panel is one bordered block under the tile:
- * 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; }
-  .strip .moretile { width: 100%; aspect-ratio: var(--ar, 1.5); align-self: start; }
-  .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; }
-  /* The switch drops under its words when the panel is too narrow for both (the workspace's 168 px column), so no word of
-     "Based on A" breaks mid-word. */
-  .moreswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 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 6em; 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 0 0 auto; 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); }
-  /* The field is as tall as its placeholder needs at this width (a hidden twin of the words sets the row's height, in the
-     textarea's own font and padding), so a narrow column never cuts the placeholder off. */
-  .notewrap { display: grid; min-width: 0; }
-  .notewrap::after { content: attr(data-placeholder) "\200b"; grid-area: 1 / 1; visibility: hidden; padding: 9px 11px; font: inherit; white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
-  .notewrap textarea { grid-area: 1 / 1; }
-  .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; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
-  .morerow button { min-width: 0; max-width: 100%; padding: 8px 10px; overflow-wrap: anywhere; }
-  .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: 22px; }
-  .segopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
-  .segopt span { display: block; padding: 7px 2px; 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

@@ -1 +0,0 @@
-{"version":3,"file":"mcp-slate-ui-styles-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;EAqB9C,2BAA2B,EAAE,CAAC;AAEhC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C7C,CAAC"}