batter-pixso-mcp 0.2.0 → 0.3.0

package/dist/plugin/code.js

@@ -1,5 +1,34 @@
 "use strict";
 (() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/cache.ts
+  var TTL_MS = 15 * 60 * 1e3;
+  var MAX_ENTRIES = 100;
+  var store = /* @__PURE__ */ new Map();
+  function readCache(key) {
+    const entry = store.get(key);
+    if (!entry) return null;
+    if (Date.now() - entry.time > TTL_MS) {
+      store.delete(key);
+      return null;
+    }
+    store.delete(key);
+    store.set(key, entry);
+    console.log(`[batter-bridge] cache hit: ${key}`);
+    return entry.value;
+  }
+  function writeCache(key, value) {
+    store.delete(key);
+    store.set(key, { time: Date.now(), value });
+    if (store.size > MAX_ENTRIES) {
+      const oldest = store.keys().next().value;
+      if (oldest !== void 0) store.delete(oldest);
+    }
+  }
+
   // src/context.ts
   function collectContext() {
     return {
@@ -17,9 +46,27 @@
 
   // src/dsl/export.ts
   async function exportNode(node, format, scale = 2) {
-    const settings = format === "SVG" ? { format: "SVG" } : { format: "PNG", constraint: { type: "SCALE", value: scale } };
+    const settings = format === "SVG" ? { format: "SVG" } : { format, constraint: { type: "SCALE", value: scale } };
     return node.exportAsync(settings);
   }
+  async function exportWithMarks(node, fallback, assets) {
+    const marks = "exportSettings" in node ? node.exportSettings : [];
+    if (marks.length === 0) {
+      const key = `asset://${assets.length}`;
+      assets.push({ key, format: fallback.format, bytes: await exportNode(node, fallback.format, fallback.scale) });
+      return [{ img: key, format: fallback.format, scale: fallback.scale }];
+    }
+    const items = [];
+    for (const mark of marks) {
+      const key = `asset://${assets.length}`;
+      assets.push({ key, format: mark.format, bytes: await node.exportAsync(mark) });
+      const item = { img: key, format: mark.format };
+      if ("constraint" in mark && mark.constraint?.type === "SCALE") item.scale = mark.constraint.value;
+      if ("suffix" in mark && mark.suffix) item.suffix = mark.suffix;
+      items.push(item);
+    }
+    return items;
+  }
 
   // src/dsl/detect.ts
   var VECTOR_TYPES = /* @__PURE__ */ new Set([
@@ -89,17 +136,17 @@
 
   // src/dsl/node.ts
   var ALIGN_MAP = {
-    MIN: "flex-start",
+    MIN: "start",
     CENTER: "center",
-    MAX: "flex-end",
+    MAX: "end",
     SPACE_BETWEEN: "space-between",
     BASELINE: "baseline"
   };
   var SIZING_MAP = {
     FIXED: "fixed",
-    AUTO: "hug-content",
-    FILL: "fill-container",
-    HUG: "hug-content"
+    AUTO: "hug",
+    FILL: "fill",
+    HUG: "hug"
   };
   var CONSTRAINT_H_MAP = {
     MIN: "left",
@@ -115,14 +162,63 @@
     STRETCH: "stretch",
     SCALE: "scale"
   };
+  var AUTO_NAME_RE = /^(Frame|Rectangle|Ellipse|Group|Line|Polygon|Star|Vector|Section)\s\d+$/;
+  function isStandaloneColor(css) {
+    return !css.includes("gradient(");
+  }
+  var Palette = class {
+    constructor() {
+      __publicField(this, "counts", /* @__PURE__ */ new Map());
+      __publicField(this, "refs", /* @__PURE__ */ new Map());
+    }
+    /** 构建期登记一次单色使用，原样返回（替换发生在 apply） */
+    use(color) {
+      if (color && isStandaloneColor(color)) {
+        this.counts.set(color, (this.counts.get(color) ?? 0) + 1);
+      }
+      return color;
+    }
+    /** 收尾：替换整棵树的颜色引用，调色板挂根节点 */
+    apply(root) {
+      const colors = [...this.counts.entries()].filter(([, n]) => n >= 2).map(([c]) => c);
+      if (colors.length === 0) return;
+      colors.forEach((c, i) => this.refs.set(c, `p${i}`));
+      this.rewrite(root);
+      root.palette = colors;
+    }
+    ref(color) {
+      return color ? this.refs.get(color) ?? color : color;
+    }
+    rewrite(node) {
+      if (node.fills) node.fills = node.fills.map((c) => this.ref(c));
+      if (node.stroke) {
+        for (const [color, ref] of this.refs) {
+          if (node.stroke.endsWith(color)) {
+            node.stroke = node.stroke.slice(0, -color.length) + ref;
+            break;
+          }
+        }
+      }
+      if (node.text) {
+        node.text.color = this.ref(node.text.color);
+        for (const seg of node.text.segs ?? []) seg.color = this.ref(seg.color);
+      }
+      for (const kid of node.kids ?? []) this.rewrite(kid);
+    }
+  };
   function rectOf(node) {
     const box = "absoluteBoundingBox" in node && node.absoluteBoundingBox ? node.absoluteBoundingBox : { x: 0, y: 0, width: node.width, height: node.height };
-    return {
-      x: round2(box.x),
-      y: round2(box.y),
-      width: round2(box.width),
-      height: round2(box.height)
-    };
+    return [round2(box.x), round2(box.y), round2(box.width), round2(box.height)];
+  }
+  function levelsBelow(node) {
+    if (!("children" in node)) return 0;
+    let max = 0;
+    for (const child of node.children) {
+      if (!child.visible) continue;
+      const below = 1 + levelsBelow(child);
+      if (below > max) max = below;
+    }
+    return max;
   }
   function sameStyle(a, b) {
     return a.fontSize === b.fontSize && a.fontName.family === b.fontName.family && a.fontName.style === b.fontName.style && a.textDecoration === b.textDecoration && JSON.stringify(a.fills) === JSON.stringify(b.fills) && JSON.stringify(a.lineHeight) === JSON.stringify(b.lineHeight) && JSON.stringify(a.letterSpacing) === JSON.stringify(b.letterSpacing) && JSON.stringify(a.hyperlink) === JSON.stringify(b.hyperlink);
@@ -176,24 +272,24 @@
   function letterSpacingCss(ls) {
     return ls.unit === "PIXELS" && ls.value !== 0 ? `${round2(ls.value)}px` : void 0;
   }
-  function toSegment(s, base) {
-    const seg = { start: s.start, end: s.end, text: s.characters };
-    if (s.fontSize !== base.fontSize) seg.fontSize = round2(s.fontSize);
-    if (s.fontName.family !== base.fontFamily) seg.fontFamily = s.fontName.family;
-    if (s.fontName.style !== base.fontWeight) seg.fontWeight = s.fontName.style;
+  function toSegment(s, base, palette) {
+    const seg = { text: s.characters };
+    if (round2(s.fontSize) !== base.size) seg.size = round2(s.fontSize);
+    if (s.fontName.family !== base.font) seg.font = s.fontName.family;
+    if (s.fontName.style !== (base.weight ?? "Regular")) seg.weight = s.fontName.style;
     const lh = lineHeightCss(s.lineHeight);
-    if (lh !== base.lineHeight) seg.lineHeight = lh;
+    if (lh !== (base.lh ?? "normal")) seg.lh = lh;
     const color = paintsToCss(s.fills)[0];
-    if (color && color !== base.color) seg.color = color;
+    if (color && color !== base.color) seg.color = palette.use(color);
     const dec = decorationCss(s.textDecoration);
-    if (dec !== base.decoration) seg.decoration = dec ?? "none";
+    if (dec !== base.deco) seg.deco = dec ?? "none";
     const ls = letterSpacingCss(s.letterSpacing);
-    if (ls !== base.letterSpacing) seg.letterSpacing = ls ?? "normal";
+    if (ls !== base.ls) seg.ls = ls ?? "normal";
     const link = s.hyperlink?.type === "URL" ? s.hyperlink.value : void 0;
     if (link !== base.link) seg.link = link ?? "";
     return seg;
   }
-  function buildText(node, base) {
+  function buildText(node, base, palette) {
     const mixed = node.fontSize === figma.mixed || node.fontName === figma.mixed || node.fills === figma.mixed || node.lineHeight === figma.mixed || node.textDecoration === figma.mixed || node.letterSpacing === figma.mixed || node.hyperlink === figma.mixed;
     const segments = mixed && node.characters.length > 0 ? extractSegments(node) : null;
     const dom = segments?.length ? segments.reduce((a, b) => b.characters.length > a.characters.length ? b : a) : null;
@@ -206,29 +302,32 @@
     const hyperlink = node.hyperlink === figma.mixed ? dom?.hyperlink ?? null : node.hyperlink;
     base.text = {
       content: node.characters,
-      fontSize,
-      fontFamily: fontName?.family ?? "",
-      fontWeight: fontName?.style ?? "",
-      lineHeight: lineHeight ? lineHeightCss(lineHeight) : void 0,
-      align: node.textAlignHorizontal.toLowerCase()
+      size: typeof fontSize === "number" ? round2(fontSize) : fontSize,
+      font: fontName?.family ?? ""
     };
-    if (fills.length > 0) base.text.color = fills[0];
+    const weight = fontName?.style;
+    if (weight && weight !== "Regular") base.text.weight = weight;
+    const lh = lineHeight ? lineHeightCss(lineHeight) : void 0;
+    if (lh && lh !== "normal") base.text.lh = lh;
+    const align = node.textAlignHorizontal.toLowerCase();
+    if (align !== "left") base.text.align = align;
+    if (fills.length > 0) base.text.color = palette.use(fills[0]);
     const dec = decoration ? decorationCss(decoration) : void 0;
-    if (dec) base.text.decoration = dec;
+    if (dec) base.text.deco = dec;
     const ls = letterSpacing ? letterSpacingCss(letterSpacing) : void 0;
-    if (ls) base.text.letterSpacing = ls;
+    if (ls) base.text.ls = ls;
     if (hyperlink?.type === "URL") base.text.link = hyperlink.value;
-    if (segments) base.text.segments = segments.map((s) => toSegment(s, base.text));
+    if (segments) base.text.segs = segments.map((s) => toSegment(s, base.text, palette));
     return base;
   }
-  function applyContainerStyle(node, base) {
+  function applyContainerStyle(node, base, palette) {
     const fills = paintsToCss("fills" in node ? node.fills : []);
-    if (fills.length > 0) base.fills = fills;
+    if (fills.length > 0) base.fills = fills.map((c) => palette.use(c));
     if ("strokes" in node && Array.isArray(node.strokes) && node.strokes.length > 0) {
       const strokes = paintsToCss(node.strokes);
       if (strokes.length > 0) {
         const weight = "strokeWeight" in node ? node.strokeWeight : 1;
-        base.stroke = `${typeof weight === "number" ? weight : 1}px solid ${strokes[0]}`;
+        base.stroke = `${typeof weight === "number" ? weight : 1}px solid ${palette.use(strokes[0])}`;
       }
     }
     if ("cornerRadius" in node && typeof node.cornerRadius === "number" && node.cornerRadius > 0) {
@@ -255,7 +354,7 @@
         } else if (e.type === "LAYER_BLUR") {
           base.blur = `${round2(e.radius)}px`;
         } else if (e.type === "BACKGROUND_BLUR") {
-          base.backdropBlur = `${round2(e.radius)}px`;
+          base.bgBlur = `${round2(e.radius)}px`;
         }
       }
       if (shadows.length > 0) base.shadow = shadows.join(", ");
@@ -277,33 +376,34 @@
   function applyAutoLayout(node, base) {
     if (!("layoutMode" in node)) return;
     if (node.layoutMode !== "HORIZONTAL" && node.layoutMode !== "VERTICAL") return;
-    base.layout = {
-      direction: node.layoutMode === "HORIZONTAL" ? "row" : "column",
-      gap: round2(node.itemSpacing),
-      padding: [
-        round2(node.paddingTop),
-        round2(node.paddingRight),
-        round2(node.paddingBottom),
-        round2(node.paddingLeft)
+    const layout = {
+      dir: node.layoutMode === "HORIZONTAL" ? "row" : "column",
+      align: [
+        ALIGN_MAP[node.primaryAxisAlignItems] ?? node.primaryAxisAlignItems,
+        ALIGN_MAP[node.counterAxisAlignItems] ?? node.counterAxisAlignItems
       ],
-      align: {
-        primary: ALIGN_MAP[node.primaryAxisAlignItems] ?? node.primaryAxisAlignItems,
-        counter: ALIGN_MAP[node.counterAxisAlignItems] ?? node.counterAxisAlignItems
-      },
-      sizing: {
-        primary: SIZING_MAP[node.primaryAxisSizingMode] ?? node.primaryAxisSizingMode,
-        counter: SIZING_MAP[node.counterAxisSizingMode] ?? node.counterAxisSizingMode
-      }
+      sizing: [
+        SIZING_MAP[node.primaryAxisSizingMode] ?? node.primaryAxisSizingMode,
+        SIZING_MAP[node.counterAxisSizingMode] ?? node.counterAxisSizingMode
+      ]
     };
+    const gap = round2(node.itemSpacing);
+    if (gap !== 0) layout.gap = gap;
+    const pad = [
+      round2(node.paddingTop),
+      round2(node.paddingRight),
+      round2(node.paddingBottom),
+      round2(node.paddingLeft)
+    ];
+    if (pad.some((p) => p !== 0)) layout.pad = pad;
+    base.layout = layout;
   }
-  async function buildDevNode(node, assets) {
+  async function build(node, assets, palette, depth, maxDepth) {
     if (!node.visible) return null;
-    const base = {
-      id: node.id,
-      name: node.name,
-      type: node.type,
-      rect: rectOf(node)
-    };
+    const base = { id: node.id, type: node.type };
+    if (!AUTO_NAME_RE.test(node.name)) base.name = node.name;
+    const [x, y, w, h] = rectOf(node);
+    base.rect = [x, y, w, h];
     if ("opacity" in node && node.opacity !== 1) base.opacity = round2(node.opacity);
     applyConstraints(node, base);
     const assetFormat = detectAssetFormat(node);
@@ -311,22 +411,35 @@
       const key = `asset://${assets.length}`;
       assets.push({ key, format: assetFormat, bytes: await exportNode(node, assetFormat) });
       base.type = assetFormat === "SVG" ? "ICON" : "IMAGE";
-      base.image = key;
+      base.img = key;
       return base;
     }
-    if (node.type === "TEXT") return buildText(node, base);
-    applyContainerStyle(node, base);
+    if (node.type === "TEXT") return buildText(node, base, palette);
+    applyContainerStyle(node, base, palette);
     applyAutoLayout(node, base);
     if ("children" in node && node.children.length > 0) {
-      const children = [];
-      for (const child of node.children) {
-        const built = await buildDevNode(child, assets);
-        if (built) children.push(built);
+      if (maxDepth !== void 0 && depth >= maxDepth) {
+        const more = levelsBelow(node);
+        if (more > 0) base.more = more;
+      } else {
+        const kids = [];
+        for (const child of node.children) {
+          const built = await build(child, assets, palette, depth + 1, maxDepth);
+          if (built) kids.push(built);
+        }
+        if (kids.length > 0) base.kids = kids;
       }
-      if (children.length > 0) base.children = children;
     }
     return base;
   }
+  async function buildDevNode(node, assets, maxDepth) {
+    const palette = new Palette();
+    const root = await build(node, assets, palette, 0, maxDepth);
+    if (!root) return null;
+    palette.apply(root);
+    root.depth = levelsBelow(node);
+    return root;
+  }
 
   // src/commands.ts
   async function findNode(guid) {
@@ -339,32 +452,76 @@
     if (!selected) throw new Error("\u672A\u4F20\u5165 guid \u4E14\u753B\u5E03\u65E0\u9009\u4E2D\u56FE\u5C42");
     return selected;
   }
-  async function executeCommand(command) {
-    const args = command.args;
-    switch (command.type) {
-      case "get_selected":
-        return { result: collectContext(), assets: [] };
+  function normMaxDepth(input) {
+    return typeof input === "number" && Number.isFinite(input) && input >= 0 ? Math.floor(input) : void 0;
+  }
+  function normImageFormat(input) {
+    const f = typeof input === "string" ? input.toUpperCase() : "PNG";
+    return f === "SVG" ? "SVG" : f === "JPG" ? "JPG" : "PNG";
+  }
+  function normParams(type, args) {
+    switch (type) {
+      case "get_node_dsl":
+        return { type, maxDepth: normMaxDepth(args.maxDepth) };
+      case "get_screenshot": {
+        const f = (args.format ?? "PNG").toUpperCase();
+        return { type, format: f === "SVG" ? "SVG" : "PNG", scale: args.scale ?? 2 };
+      }
+      case "export_image":
+        return {
+          type,
+          format: normImageFormat(args.format),
+          scale: typeof args.scale === "number" ? args.scale : 2
+        };
+      default:
+        throw new Error(`\u4E0D\u53EF\u7F13\u5B58\u7684\u547D\u4EE4\u7C7B\u578B: ${type}`);
+    }
+  }
+  async function produce(params, node) {
+    switch (params.type) {
       case "get_node_dsl": {
-        const node = await findNode(args.guid);
         const assets = [];
-        const dsl = await buildDevNode(node, assets);
+        const dsl = await buildDevNode(node, assets, params.maxDepth);
         return { result: dsl, assets };
       }
       case "get_screenshot": {
-        const node = await findNode(args.guid);
-        const format = (args.format ?? "PNG").toUpperCase();
-        const bytes = await exportNode(node, format === "SVG" ? "SVG" : "PNG", args.scale ?? 2);
-        const rect = rectOf(node);
+        const bytes = await exportNode(node, params.format, params.scale);
+        const [, , width, height] = rectOf(node);
         return {
-          result: { image: "asset://0", width: rect.width, height: rect.height, format },
-          assets: [{ key: "asset://0", format, bytes }]
+          result: { img: "asset://0", width, height, format: params.format },
+          assets: [{ key: "asset://0", format: params.format, bytes }]
         };
       }
+      case "export_image": {
+        const [, , width, height] = rectOf(node);
+        const assets = [];
+        const exports = await exportWithMarks(node, params, assets);
+        return { result: { width, height, exports }, assets };
+      }
+      default:
+        throw new Error(`\u672A\u77E5\u547D\u4EE4: ${params.type}`);
+    }
+  }
+  async function executeCommand(command) {
+    const args = command.args;
+    if (command.type === "get_selected") {
+      return { result: collectContext(), assets: [] };
+    }
+    const node = await findNode(args.guid);
+    const params = normParams(command.type, args);
+    const { type, ...keyParams } = params;
+    const key = `${type}:${node.id}:${JSON.stringify(keyParams)}`;
+    if (args.cache !== "refresh") {
+      const hit = readCache(key);
+      if (hit) return hit;
     }
+    const fresh = await produce(params, node);
+    writeCache(key, fresh);
+    return fresh;
   }
 
   // src/code.ts
-  figma.showUI('<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8" />\n  <style>\n    /* \u8D34\u8FD1 Figma/Pixso \u539F\u751F\u63D2\u4EF6\uFF1A\u767D\u5E95\u3001Inter 11px\u3001\u7EC6\u8FB9\u6846\u5706\u89D2\u63A7\u4EF6\u3001\u8BED\u4E49\u8272\u72B6\u6001 */\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n    body {\n      font: 11px/1.5 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;\n      background: #ffffff;\n      color: #1e1e1e;\n      padding: 8px 12px;\n      overflow: hidden;\n      user-select: none;\n    }\n    .row {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      white-space: nowrap;\n    }\n    .row + .row {\n      margin-top: 4px;\n    }\n    .grow {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    /* \u8FDE\u63A5\u72B6\u6001\u884C */\n    .dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #b3b3b3;\n      flex-shrink: 0;\n      animation: pulse 1.6s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.35; }\n    }\n    .dot.ok {\n      background: #14ae5c;\n      animation: none;\n    }\n    .dot.err {\n      background: #f24822;\n      animation: none;\n    }\n    #conn {\n      font-weight: 500;\n      color: #1e1e1e;\n    }\n    /* \u7AEF\u53E3\u8F93\u5165 + \u91CD\u8FDE\uFF1AFigma \u98CE\u683C\u6B21\u63A7\u4EF6 */\n    #port {\n      width: 42px;\n      padding: 1px 4px;\n      font: inherit;\n      color: #1e1e1e;\n      background: #ffffff;\n      border: 1px solid #e6e6e6;\n      border-radius: 5px;\n      text-align: center;\n    }\n    #port:hover { border-color: #b3b3b3; }\n    #port:focus {\n      outline: none;\n      border-color: #0d99ff;\n      box-shadow: 0 0 0 1px #0d99ff;\n    }\n    #retry {\n      padding: 1px 10px;\n      font: inherit;\n      font-weight: 500;\n      color: #1e1e1e;\n      background: #ffffff;\n      border: 1px solid #e6e6e6;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    #retry:hover {\n      background: #f5f5f5;\n      border-color: #b3b3b3;\n    }\n    #retry:active { background: #ebebeb; }\n    /* \u6267\u884C\u72B6\u6001\u884C\uFF1A\u6B21\u7EA7\u7070\uFF0C\u5FD9\u788C\u65F6\u84DD\u8272\u547C\u5438 */\n    #exec {\n      color: #7b7b7b;\n    }\n    #exec::before {\n      content: "\u25B8 ";\n      color: #b3b3b3;\n    }\n    #exec.busy {\n      color: #0d99ff;\n      animation: pulse 1.2s ease-in-out infinite;\n    }\n    #exec.busy::before { color: #0d99ff; }\n    #exec.ok { color: #14ae5c; }\n    #exec.ok::before { color: #14ae5c; }\n    #exec.err { color: #f24822; }\n    #exec.err::before { color: #f24822; }\n  </style>\n</head>\n<body>\n  <div class="row">\n    <span class="dot" id="dot"></span>\n    <span id="conn" class="grow">\u8FDE\u63A5\u4E2D\u2026</span>\n    <input id="port" inputmode="numeric" spellcheck="false" title="\u670D\u52A1\u7AEF\u53E3" />\n    <button id="retry" type="button">\u91CD\u8FDE</button>\n  </div>\n  <div class="row"><span id="exec" class="grow">\u7A7A\u95F2</span></div>\n  <script>\n"use strict";\n(() => {\n  // src/ui.ts\n  var DEFAULT_PORT = "3210";\n  var dotEl = document.getElementById("dot");\n  var connEl = document.getElementById("conn");\n  var execEl = document.getElementById("exec");\n  var portInput = document.getElementById("port");\n  var retryBtn = document.getElementById("retry");\n  var serverBase = `http://127.0.0.1:${DEFAULT_PORT}`;\n  function setConn(text, cls) {\n    connEl.textContent = text;\n    dotEl.className = `dot${cls ? ` ${cls}` : ""}`;\n  }\n  function setExec(text, cls) {\n    execEl.textContent = text;\n    execEl.className = `grow${cls ? ` ${cls}` : ""}`;\n  }\n  var sessionId = null;\n  var lastContext = null;\n  async function ensureSession() {\n    if (sessionId) return sessionId;\n    const res = await fetch(`${serverBase}/sessions/register`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(lastContext ?? {})\n    });\n    if (!res.ok) throw new Error(`register failed: HTTP ${res.status}`);\n    const data = await res.json();\n    sessionId = data.sessionId;\n    return sessionId;\n  }\n  function sleep(ms) {\n    const { promise, resolve } = Promise.withResolvers();\n    setTimeout(resolve, ms);\n    return promise;\n  }\n  function report(payload) {\n    lastContext = payload;\n    void (async () => {\n      try {\n        let sid = await ensureSession();\n        let res = await postContext(sid, payload);\n        if (res.status === 404) {\n          sessionId = null;\n          sid = await ensureSession();\n          res = await postContext(sid, payload);\n        }\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        setConn(`\\u5DF2\\u8FDE\\u63A5 \\xB7 \\u9009\\u533A ${payload.selection?.length ?? 0}`, "ok");\n      } catch {\n        setConn("\\u540C\\u6B65\\u5931\\u8D25", "err");\n      }\n    })();\n  }\n  function postContext(sid, payload) {\n    return fetch(`${serverBase}/context?session=${sid}`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(payload)\n    });\n  }\n  function checkHealth() {\n    fetch(`${serverBase}/health`).then(() => setConn("\\u5DF2\\u8FDE\\u63A5", "ok")).catch(() => setConn("\\u8FDE\\u63A5\\u5931\\u8D25", "err"));\n  }\n  var pendingCommands = /* @__PURE__ */ new Map();\n  function toBytes(raw) {\n    return new Uint8Array(raw);\n  }\n  async function uploadAsset(format, bytes) {\n    const res = await fetch(`${serverBase}/assets?format=${format}`, {\n      method: "POST",\n      headers: { "Content-Type": "application/octet-stream" },\n      body: bytes\n    });\n    if (!res.ok) throw new Error(`asset upload failed: HTTP ${res.status}`);\n    const data = await res.json();\n    if (!data.url) throw new Error("asset upload failed: \\u54CD\\u5E94\\u7F3A\\u5C11 url \\u5B57\\u6BB5");\n    return data.url;\n  }\n  async function handleCommand(command) {\n    setExec(`\\u6267\\u884C\\u4E2D ${command.type}`, "busy");\n    const reply = await new Promise((resolve) => {\n      pendingCommands.set(command.id, resolve);\n      parent.postMessage({ pluginMessage: { type: "command", command } }, "*");\n    });\n    if (!reply.ok) {\n      await postResult(command.id, false, reply.error ?? "unknown error");\n      setExec(`\\u5931\\u8D25 ${command.type}`, "err");\n      return;\n    }\n    let result = reply.result;\n    const assets = [...reply.assets ?? []].sort((a, b) => b.key.length - a.key.length);\n    for (const asset of assets) {\n      const url = await uploadAsset(asset.format, toBytes(asset.bytes));\n      const text = JSON.stringify(result);\n      const quoted = JSON.stringify(asset.key);\n      result = JSON.parse(text.split(quoted).join(JSON.stringify(url)));\n    }\n    await postResult(command.id, true, result);\n    setExec(`\\u5B8C\\u6210 ${command.type}`, "ok");\n  }\n  async function postResult(id, ok, payload) {\n    const body = ok ? { ok: true, result: payload } : { ok: false, error: String(payload) };\n    await fetch(`${serverBase}/commands/${id}/result`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(body)\n    });\n  }\n  var currentES = null;\n  var channelMode = null;\n  async function startChannel() {\n    for (; ; ) {\n      try {\n        const sid = await ensureSession();\n        const es = new EventSource(`${serverBase}/commands/stream?session=${sid}`);\n        currentES = es;\n        channelMode = "sse";\n        es.onmessage = (e) => {\n          const { command } = JSON.parse(e.data);\n          void handleCommand(command);\n        };\n        es.onerror = () => {\n          if (es.readyState === EventSource.CLOSED) {\n            currentES = null;\n            channelMode = "poll";\n            void pollLoop();\n          }\n        };\n        return;\n      } catch {\n        await sleep(2e3);\n      }\n    }\n  }\n  async function pollLoop() {\n    for (; ; ) {\n      try {\n        const sid = await ensureSession();\n        const res = await fetch(`${serverBase}/commands/next?session=${sid}`);\n        if (res.status === 404) {\n          sessionId = null;\n          await sleep(500);\n          continue;\n        }\n        if (res.status === 204) continue;\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const { command } = await res.json();\n        await handleCommand(command);\n      } catch {\n        await sleep(2e3);\n      }\n    }\n  }\n  function reconnect() {\n    const port = portInput.value.trim() || DEFAULT_PORT;\n    serverBase = `http://127.0.0.1:${port}`;\n    sessionId = null;\n    setConn("\\u8FDE\\u63A5\\u4E2D\\u2026");\n    if (channelMode === "sse") {\n      currentES?.close();\n      currentES = null;\n      channelMode = null;\n      void startChannel();\n    }\n    checkHealth();\n    parent.postMessage({ pluginMessage: { type: "pull" } }, "*");\n  }\n  retryBtn.addEventListener("click", reconnect);\n  window.onmessage = (event) => {\n    const msg = event.data?.pluginMessage;\n    if (msg?.type === "context") {\n      report(msg.payload);\n      return;\n    }\n    if (msg?.type === "command-result") {\n      const waiter = pendingCommands.get(msg.id);\n      pendingCommands.delete(msg.id);\n      waiter?.(msg);\n    }\n  };\n  portInput.value = DEFAULT_PORT;\n  portInput.addEventListener("change", reconnect);\n  parent.postMessage({ pluginMessage: { type: "pull" } }, "*");\n  checkHealth();\n  void startChannel();\n})();\n<\/script>\n</body>\n</html>\n', { width: 230, height: 62, title: "Batter Bridge" });
+  figma.showUI('<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8" />\n  <style>\n    /* \u8D34\u8FD1 Figma/Pixso \u539F\u751F\u63D2\u4EF6\uFF1A\u767D\u5E95\u3001Inter 11px\u3001\u7EC6\u8FB9\u6846\u5706\u89D2\u63A7\u4EF6\u3001\u8BED\u4E49\u8272\u72B6\u6001 */\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n    body {\n      font: 11px/1.5 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;\n      background: #ffffff;\n      color: #1e1e1e;\n      padding: 8px 12px;\n      overflow: hidden;\n      user-select: none;\n    }\n    .row {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      white-space: nowrap;\n    }\n    .row + .row {\n      margin-top: 4px;\n    }\n    .grow {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    /* \u8FDE\u63A5\u72B6\u6001\u884C */\n    .dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #b3b3b3;\n      flex-shrink: 0;\n      animation: pulse 1.6s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.35; }\n    }\n    .dot.ok {\n      background: #14ae5c;\n      animation: none;\n    }\n    .dot.err {\n      background: #f24822;\n      animation: none;\n    }\n    #conn {\n      font-weight: 500;\n      color: #1e1e1e;\n    }\n    /* \u7AEF\u53E3\u8F93\u5165 + \u91CD\u8FDE\uFF1AFigma \u98CE\u683C\u6B21\u63A7\u4EF6 */\n    #port {\n      width: 42px;\n      padding: 1px 4px;\n      font: inherit;\n      color: #1e1e1e;\n      background: #ffffff;\n      border: 1px solid #e6e6e6;\n      border-radius: 5px;\n      text-align: center;\n    }\n    #port:hover { border-color: #b3b3b3; }\n    #port:focus {\n      outline: none;\n      border-color: #0d99ff;\n      box-shadow: 0 0 0 1px #0d99ff;\n    }\n    #retry {\n      padding: 1px 10px;\n      font: inherit;\n      font-weight: 500;\n      color: #1e1e1e;\n      background: #ffffff;\n      border: 1px solid #e6e6e6;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    #retry:hover {\n      background: #f5f5f5;\n      border-color: #b3b3b3;\n    }\n    #retry:active { background: #ebebeb; }\n    /* \u6267\u884C\u72B6\u6001\u884C\uFF1A\u6B21\u7EA7\u7070\uFF0C\u5FD9\u788C\u65F6\u84DD\u8272\u547C\u5438 */\n    #exec {\n      color: #7b7b7b;\n    }\n    #exec::before {\n      content: "\u25B8 ";\n      color: #b3b3b3;\n    }\n    #exec.busy {\n      color: #0d99ff;\n      animation: pulse 1.2s ease-in-out infinite;\n    }\n    #exec.busy::before { color: #0d99ff; }\n    #exec.ok { color: #14ae5c; }\n    #exec.ok::before { color: #14ae5c; }\n    #exec.err { color: #f24822; }\n    #exec.err::before { color: #f24822; }\n  </style>\n</head>\n<body>\n  <div class="row">\n    <span class="dot" id="dot"></span>\n    <span id="conn" class="grow">\u8FDE\u63A5\u4E2D\u2026</span>\n    <input id="port" inputmode="numeric" spellcheck="false" title="\u670D\u52A1\u7AEF\u53E3" />\n    <button id="retry" type="button">\u91CD\u8FDE</button>\n  </div>\n  <div class="row"><span id="exec" class="grow">\u7A7A\u95F2</span></div>\n  <script>\n"use strict";\n(() => {\n  // src/ui.ts\n  var DEFAULT_PORT = "3210";\n  var dotEl = document.getElementById("dot");\n  var connEl = document.getElementById("conn");\n  var execEl = document.getElementById("exec");\n  var portInput = document.getElementById("port");\n  var retryBtn = document.getElementById("retry");\n  var serverBase = `http://127.0.0.1:${DEFAULT_PORT}`;\n  function setConn(text, cls) {\n    connEl.textContent = text;\n    dotEl.className = `dot${cls ? ` ${cls}` : ""}`;\n  }\n  function setExec(text, cls) {\n    execEl.textContent = text;\n    execEl.className = `grow${cls ? ` ${cls}` : ""}`;\n  }\n  var sessionId = null;\n  var lastContext = null;\n  async function ensureSession() {\n    if (sessionId) return sessionId;\n    const res = await fetch(`${serverBase}/sessions/register`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(lastContext ?? {})\n    });\n    if (!res.ok) throw new Error(`register failed: HTTP ${res.status}`);\n    const data = await res.json();\n    sessionId = data.sessionId;\n    return sessionId;\n  }\n  function sleep(ms) {\n    const { promise, resolve } = Promise.withResolvers();\n    setTimeout(resolve, ms);\n    return promise;\n  }\n  function report(payload) {\n    lastContext = payload;\n    void (async () => {\n      try {\n        let sid = await ensureSession();\n        let res = await postContext(sid, payload);\n        if (res.status === 404) {\n          sessionId = null;\n          sid = await ensureSession();\n          res = await postContext(sid, payload);\n        }\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        setConn(`\\u5DF2\\u8FDE\\u63A5 \\xB7 \\u9009\\u533A ${payload.selection?.length ?? 0}`, "ok");\n      } catch {\n        setConn("\\u540C\\u6B65\\u5931\\u8D25", "err");\n      }\n    })();\n  }\n  function postContext(sid, payload) {\n    return fetch(`${serverBase}/context?session=${sid}`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(payload)\n    });\n  }\n  function checkHealth() {\n    fetch(`${serverBase}/health`).then(() => setConn("\\u5DF2\\u8FDE\\u63A5", "ok")).catch(() => setConn("\\u8FDE\\u63A5\\u5931\\u8D25", "err"));\n  }\n  var pendingCommands = /* @__PURE__ */ new Map();\n  function toBytes(raw) {\n    return new Uint8Array(raw);\n  }\n  async function uploadAsset(format, bytes) {\n    const res = await fetch(`${serverBase}/assets?format=${format}`, {\n      method: "POST",\n      headers: { "Content-Type": "application/octet-stream" },\n      body: bytes\n    });\n    if (!res.ok) throw new Error(`asset upload failed: HTTP ${res.status}`);\n    const data = await res.json();\n    if (!data.name) throw new Error("asset upload failed: \\u54CD\\u5E94\\u7F3A\\u5C11 name \\u5B57\\u6BB5");\n    return data.name;\n  }\n  async function handleCommand(command) {\n    setExec(`\\u6267\\u884C\\u4E2D ${command.type}`, "busy");\n    const reply = await new Promise((resolve) => {\n      pendingCommands.set(command.id, resolve);\n      parent.postMessage({ pluginMessage: { type: "command", command } }, "*");\n    });\n    if (!reply.ok) {\n      await postResult(command.id, false, reply.error ?? "unknown error");\n      setExec(`\\u5931\\u8D25 ${command.type}`, "err");\n      return;\n    }\n    let result = reply.result;\n    const assets = [...reply.assets ?? []].sort((a, b) => b.key.length - a.key.length);\n    for (const asset of assets) {\n      const name = await uploadAsset(asset.format, toBytes(asset.bytes));\n      const text = JSON.stringify(result);\n      const quoted = JSON.stringify(asset.key);\n      result = JSON.parse(text.split(quoted).join(JSON.stringify(name)));\n    }\n    await postResult(command.id, true, result);\n    setExec(`\\u5B8C\\u6210 ${command.type}`, "ok");\n  }\n  async function postResult(id, ok, payload) {\n    const body = ok ? { ok: true, result: payload } : { ok: false, error: String(payload) };\n    await fetch(`${serverBase}/commands/${id}/result`, {\n      method: "POST",\n      headers: { "Content-Type": "application/json" },\n      body: JSON.stringify(body)\n    });\n  }\n  var currentES = null;\n  var channelMode = null;\n  async function startChannel() {\n    for (; ; ) {\n      try {\n        const sid = await ensureSession();\n        const es = new EventSource(`${serverBase}/commands/stream?session=${sid}`);\n        currentES = es;\n        channelMode = "sse";\n        es.onmessage = (e) => {\n          const { command } = JSON.parse(e.data);\n          void handleCommand(command);\n        };\n        es.onerror = () => {\n          if (es.readyState === EventSource.CLOSED) {\n            currentES = null;\n            channelMode = "poll";\n            void pollLoop();\n          }\n        };\n        return;\n      } catch {\n        await sleep(2e3);\n      }\n    }\n  }\n  async function pollLoop() {\n    for (; ; ) {\n      try {\n        const sid = await ensureSession();\n        const res = await fetch(`${serverBase}/commands/next?session=${sid}`);\n        if (res.status === 404) {\n          sessionId = null;\n          await sleep(500);\n          continue;\n        }\n        if (res.status === 204) continue;\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        const { command } = await res.json();\n        await handleCommand(command);\n      } catch {\n        await sleep(2e3);\n      }\n    }\n  }\n  function reconnect() {\n    const port = portInput.value.trim() || DEFAULT_PORT;\n    serverBase = `http://127.0.0.1:${port}`;\n    sessionId = null;\n    setConn("\\u8FDE\\u63A5\\u4E2D\\u2026");\n    if (channelMode === "sse") {\n      currentES?.close();\n      currentES = null;\n      channelMode = null;\n      void startChannel();\n    }\n    checkHealth();\n    parent.postMessage({ pluginMessage: { type: "pull" } }, "*");\n  }\n  retryBtn.addEventListener("click", reconnect);\n  window.onmessage = (event) => {\n    const msg = event.data?.pluginMessage;\n    if (msg?.type === "context") {\n      report(msg.payload);\n      return;\n    }\n    if (msg?.type === "command-result") {\n      const waiter = pendingCommands.get(msg.id);\n      pendingCommands.delete(msg.id);\n      waiter?.(msg);\n    }\n  };\n  portInput.value = DEFAULT_PORT;\n  portInput.addEventListener("change", reconnect);\n  parent.postMessage({ pluginMessage: { type: "pull" } }, "*");\n  checkHealth();\n  void startChannel();\n})();\n<\/script>\n</body>\n</html>\n', { width: 230, height: 62, title: "Batter Bridge" });
   figma.on("selectionchange", push);
   figma.ui.onmessage = (msg) => {
     if (msg?.type === "pull") {

package/dist/plugin/ui.html

@@ -194,8 +194,8 @@
     });
     if (!res.ok) throw new Error(`asset upload failed: HTTP ${res.status}`);
     const data = await res.json();
-    if (!data.url) throw new Error("asset upload failed: \u54CD\u5E94\u7F3A\u5C11 url \u5B57\u6BB5");
-    return data.url;
+    if (!data.name) throw new Error("asset upload failed: \u54CD\u5E94\u7F3A\u5C11 name \u5B57\u6BB5");
+    return data.name;
   }
   async function handleCommand(command) {
     setExec(`\u6267\u884C\u4E2D ${command.type}`, "busy");
@@ -211,10 +211,10 @@
     let result = reply.result;
     const assets = [...reply.assets ?? []].sort((a, b) => b.key.length - a.key.length);
     for (const asset of assets) {
-      const url = await uploadAsset(asset.format, toBytes(asset.bytes));
+      const name = await uploadAsset(asset.format, toBytes(asset.bytes));
       const text = JSON.stringify(result);
       const quoted = JSON.stringify(asset.key);
-      result = JSON.parse(text.split(quoted).join(JSON.stringify(url)));
+      result = JSON.parse(text.split(quoted).join(JSON.stringify(name)));
     }
     await postResult(command.id, true, result);
     setExec(`\u5B8C\u6210 ${command.type}`, "ok");

package/package.json

@@ -1,37 +1,34 @@
-{
-  "name": "batter-pixso-mcp",
-  "version": "0.2.0",
-  "description": "MCP bridge: Pixso plugin -> local MCP server -> Pixso remote MCP",
-  "type": "module",
-  "engines": {
-    "node": ">=18"
-  },
-  "exports": {
-    "./protocol": "./src/protocol.ts"
-  },
-  "bin": {
-    "batter-pixso-mcp": "dist/index.js",
-    "batter-pixso-mcp-win": "standalone/batter-pixso-mcp.cmd"
-  },
-  "files": [
-    "dist",
-    "standalone"
-  ],
-  "scripts": {
-    "build": "npm run typecheck && node build.mjs",
-    "prepack": "node ../../scripts/sync-plugin-dist.mjs && node build-standalone.mjs",
-    "pack:standalone": "node build-standalone.mjs",
-    "typecheck": "tsc --noEmit",
-    "dev": "tsx watch src/index.ts",
-    "start": "node dist/index.js"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.0",
-    "esbuild": "^0.24.0",
-    "tsx": "^4.19.0",
-    "typescript": "^5.7.0"
-  }
-}
+{
+  "name": "batter-pixso-mcp",
+  "version": "0.3.0",
+  "description": "MCP bridge: Pixso plugin -> local MCP server -> Pixso remote MCP",
+  "type": "module",
+  "exports": {
+    "./protocol": "./src/protocol.ts"
+  },
+  "bin": {
+    "batter-pixso-mcp": "dist/index.js",
+    "batter-pixso-mcp-win": "standalone/batter-pixso-mcp.cmd"
+  },
+  "files": [
+    "dist",
+    "standalone"
+  ],
+  "scripts": {
+    "build": "npm run typecheck && node build.mjs",
+    "prepack": "node ../../scripts/sync-plugin-dist.mjs && node build-standalone.mjs",
+    "pack:standalone": "node build-standalone.mjs",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsx watch src/index.ts",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "esbuild": "^0.24.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}