batter-pixso-mcp 0.1.0

package/dist/plugin/code.js

@@ -0,0 +1,391 @@
+"use strict";
+(() => {
+  // src/context.ts
+  function collectContext() {
+    return {
+      fileKey: figma.fileKey,
+      fileName: figma.root.name,
+      pageName: figma.currentPage.name,
+      selection: figma.currentPage.selection.map(
+        (node) => ({ id: node.id, name: node.name, type: node.type })
+      )
+    };
+  }
+  function push() {
+    figma.ui.postMessage({ type: "context", payload: collectContext() });
+  }
+
+  // src/dsl/export.ts
+  async function exportNode(node, format, scale = 2) {
+    const settings = format === "SVG" ? { format: "SVG" } : { format: "PNG", constraint: { type: "SCALE", value: scale } };
+    return node.exportAsync(settings);
+  }
+
+  // src/dsl/detect.ts
+  var VECTOR_TYPES = /* @__PURE__ */ new Set([
+    "VECTOR",
+    "BOOLEAN_OPERATION",
+    "STAR",
+    "LINE",
+    "POLYGON"
+  ]);
+  function hasImageFill(node) {
+    return "fills" in node && Array.isArray(node.fills) && node.fills.some((p) => p.type === "IMAGE");
+  }
+  function isAllVectorWithoutText(node) {
+    if (node.type === "TEXT") return false;
+    if (VECTOR_TYPES.has(node.type)) return true;
+    if ("children" in node && node.children.length > 0) {
+      return node.children.every(isAllVectorWithoutText);
+    }
+    return false;
+  }
+  function detectAssetFormat(node) {
+    if ("exportSettings" in node && node.exportSettings.length > 0) {
+      return node.exportSettings[0].format === "SVG" ? "SVG" : "PNG";
+    }
+    if (hasImageFill(node)) return "PNG";
+    if (VECTOR_TYPES.has(node.type)) return "SVG";
+    if ((node.type === "GROUP" || node.type === "INSTANCE" || node.type === "FRAME") && isAllVectorWithoutText(node)) {
+      const box = "absoluteBoundingBox" in node ? node.absoluteBoundingBox : null;
+      if (box && Math.max(box.width, box.height) <= 64) return "SVG";
+    }
+    return null;
+  }
+
+  // src/dsl/util.ts
+  function round2(n) {
+    return Math.round(n * 100) / 100;
+  }
+
+  // src/dsl/paint.ts
+  function rgba(color, opacity) {
+    const r = Math.round(color.r * 255);
+    const g = Math.round(color.g * 255);
+    const b = Math.round(color.b * 255);
+    const a = opacity ?? 1;
+    if (a >= 1) {
+      return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${round2(a)})`;
+  }
+  function gradientToCss(paint) {
+    const stops = paint.gradientStops.map((s) => `${rgba(s.color, s.color.a)} ${round2(s.position * 100)}%`).join(", ");
+    const t = paint.gradientTransform;
+    const angle = Math.round(Math.atan2(t[0][1], -t[1][1]) * 180 / Math.PI);
+    const kind = paint.type === "GRADIENT_RADIAL" ? "radial-gradient" : "linear-gradient";
+    return paint.type === "GRADIENT_RADIAL" ? `${kind}(${stops})` : `${kind}(${(angle % 360 + 360) % 360}deg, ${stops})`;
+  }
+  function paintsToCss(fills) {
+    if (!Array.isArray(fills)) return [];
+    const out = [];
+    for (const paint of fills) {
+      if (paint.visible === false) continue;
+      if (paint.type === "SOLID") out.push(rgba(paint.color, paint.opacity));
+      else if (paint.type.startsWith("GRADIENT")) out.push(gradientToCss(paint));
+    }
+    return out;
+  }
+
+  // src/dsl/node.ts
+  var ALIGN_MAP = {
+    MIN: "flex-start",
+    CENTER: "center",
+    MAX: "flex-end",
+    SPACE_BETWEEN: "space-between",
+    BASELINE: "baseline"
+  };
+  var SIZING_MAP = {
+    FIXED: "fixed",
+    AUTO: "hug-content",
+    FILL: "fill-container",
+    HUG: "hug-content"
+  };
+  var CONSTRAINT_H_MAP = {
+    MIN: "left",
+    CENTER: "center",
+    MAX: "right",
+    STRETCH: "stretch",
+    SCALE: "scale"
+  };
+  var CONSTRAINT_V_MAP = {
+    MIN: "top",
+    CENTER: "center",
+    MAX: "bottom",
+    STRETCH: "stretch",
+    SCALE: "scale"
+  };
+  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)
+    };
+  }
+  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);
+  }
+  function extractSegmentsFallback(node) {
+    const chars = node.characters;
+    const runs = [];
+    for (let i = 0; i < chars.length; i++) {
+      const style = {
+        fontSize: node.getRangeFontSize(i, i + 1),
+        fontName: node.getRangeFontName(i, i + 1),
+        fills: node.getRangeFills(i, i + 1),
+        lineHeight: node.getRangeLineHeight(i, i + 1),
+        textDecoration: node.getRangeTextDecoration(i, i + 1),
+        letterSpacing: node.getRangeLetterSpacing(i, i + 1),
+        hyperlink: node.getRangeHyperlink(i, i + 1)
+      };
+      const prev = runs[runs.length - 1];
+      if (prev && sameStyle(prev, style)) {
+        prev.end = i + 1;
+        prev.characters += chars[i];
+      } else {
+        runs.push({ start: i, end: i + 1, characters: chars[i], ...style });
+      }
+    }
+    return runs;
+  }
+  function extractSegments(node) {
+    if (typeof node.getStyledTextSegments === "function") {
+      return node.getStyledTextSegments([
+        "fontSize",
+        "fontName",
+        "fills",
+        "lineHeight",
+        "textDecoration",
+        "letterSpacing",
+        "hyperlink"
+      ]);
+    }
+    return extractSegmentsFallback(node);
+  }
+  function lineHeightCss(lh) {
+    if (lh.unit === "AUTO") return "normal";
+    return lh.unit === "PIXELS" ? `${round2(lh.value)}px` : `${round2(lh.value)}%`;
+  }
+  function decorationCss(d) {
+    if (d === "UNDERLINE") return "underline";
+    if (d === "STRIKETHROUGH") return "line-through";
+    return void 0;
+  }
+  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;
+    const lh = lineHeightCss(s.lineHeight);
+    if (lh !== base.lineHeight) seg.lineHeight = lh;
+    const color = paintsToCss(s.fills)[0];
+    if (color && color !== base.color) seg.color = color;
+    const dec = decorationCss(s.textDecoration);
+    if (dec !== base.decoration) seg.decoration = dec ?? "none";
+    const ls = letterSpacingCss(s.letterSpacing);
+    if (ls !== base.letterSpacing) seg.letterSpacing = 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) {
+    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;
+    const fontSize = typeof node.fontSize === "number" ? node.fontSize : dom?.fontSize ?? "mixed";
+    const fontName = node.fontName === figma.mixed ? dom?.fontName ?? null : node.fontName;
+    const fills = paintsToCss(node.fills === figma.mixed ? dom?.fills ?? [] : node.fills);
+    const lineHeight = node.lineHeight === figma.mixed ? dom?.lineHeight : node.lineHeight;
+    const decoration = node.textDecoration === figma.mixed ? dom?.textDecoration : node.textDecoration;
+    const letterSpacing = node.letterSpacing === figma.mixed ? dom?.letterSpacing : node.letterSpacing;
+    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()
+    };
+    if (fills.length > 0) base.text.color = fills[0];
+    const dec = decoration ? decorationCss(decoration) : void 0;
+    if (dec) base.text.decoration = dec;
+    const ls = letterSpacing ? letterSpacingCss(letterSpacing) : void 0;
+    if (ls) base.text.letterSpacing = ls;
+    if (hyperlink?.type === "URL") base.text.link = hyperlink.value;
+    if (segments) base.text.segments = segments.map((s) => toSegment(s, base.text));
+    return base;
+  }
+  function applyContainerStyle(node, base) {
+    const fills = paintsToCss("fills" in node ? node.fills : []);
+    if (fills.length > 0) base.fills = fills;
+    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]}`;
+      }
+    }
+    if ("cornerRadius" in node && typeof node.cornerRadius === "number" && node.cornerRadius > 0) {
+      base.radius = round2(node.cornerRadius);
+    } else if ("topLeftRadius" in node) {
+      const corners = [
+        node.topLeftRadius,
+        node.topRightRadius,
+        node.bottomRightRadius,
+        node.bottomLeftRadius
+      ];
+      if (corners.some((c) => c > 0)) base.radius = corners.map(round2);
+    }
+    if ("effects" in node && Array.isArray(node.effects)) {
+      const shadows = [];
+      for (const e of node.effects) {
+        if (e.visible === false) continue;
+        if (e.type === "DROP_SHADOW" || e.type === "INNER_SHADOW") {
+          const prefix = e.type === "INNER_SHADOW" ? "inset " : "";
+          const spread = e.spread ? ` ${round2(e.spread)}px` : "";
+          shadows.push(
+            `${prefix}${round2(e.offset.x)}px ${round2(e.offset.y)}px ${round2(e.radius)}px${spread} ${rgba(e.color, e.color.a)}`
+          );
+        } else if (e.type === "LAYER_BLUR") {
+          base.blur = `${round2(e.radius)}px`;
+        } else if (e.type === "BACKGROUND_BLUR") {
+          base.backdropBlur = `${round2(e.radius)}px`;
+        }
+      }
+      if (shadows.length > 0) base.shadow = shadows.join(", ");
+    }
+  }
+  function applyConstraints(node, base) {
+    if (!("constraints" in node)) return;
+    const parent = node.parent;
+    if (!parent) return;
+    if ("layoutMode" in parent && parent.layoutMode !== "NONE") return;
+    if (parent.type !== "FRAME" && parent.type !== "COMPONENT" && parent.type !== "INSTANCE" && parent.type !== "GROUP") {
+      return;
+    }
+    const h = CONSTRAINT_H_MAP[node.constraints.horizontal] ?? "left";
+    const v = CONSTRAINT_V_MAP[node.constraints.vertical] ?? "top";
+    if (h === "left" && v === "top") return;
+    base.constraints = { h, v };
+  }
+  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)
+      ],
+      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
+      }
+    };
+  }
+  async function buildDevNode(node, assets) {
+    if (!node.visible) return null;
+    const base = {
+      id: node.id,
+      name: node.name,
+      type: node.type,
+      rect: rectOf(node)
+    };
+    if ("opacity" in node && node.opacity !== 1) base.opacity = round2(node.opacity);
+    applyConstraints(node, base);
+    const assetFormat = detectAssetFormat(node);
+    if (assetFormat) {
+      const key = `asset://${assets.length}`;
+      assets.push({ key, format: assetFormat, bytes: await exportNode(node, assetFormat) });
+      base.type = assetFormat === "SVG" ? "ICON" : "IMAGE";
+      base.image = key;
+      return base;
+    }
+    if (node.type === "TEXT") return buildText(node, base);
+    applyContainerStyle(node, base);
+    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 (children.length > 0) base.children = children;
+    }
+    return base;
+  }
+
+  // src/commands.ts
+  async function findNode(guid) {
+    if (guid) {
+      const node = await figma.getNodeByIdAsync(guid);
+      if (!node || node.removed) throw new Error(`\u8282\u70B9\u4E0D\u5B58\u5728\u6216\u5DF2\u5220\u9664: ${guid}`);
+      return node;
+    }
+    const selected = figma.currentPage.selection[0];
+    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: [] };
+      case "get_node_dsl": {
+        const node = await findNode(args.guid);
+        const assets = [];
+        const dsl = await buildDevNode(node, assets);
+        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);
+        return {
+          result: { image: "asset://0", width: rect.width, height: rect.height, format },
+          assets: [{ key: "asset://0", format, bytes }]
+        };
+      }
+    }
+  }
+
+  // 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.on("selectionchange", push);
+  figma.ui.onmessage = (msg) => {
+    if (msg?.type === "pull") {
+      push();
+      return;
+    }
+    if (msg?.type === "command") {
+      const command = msg.command;
+      executeCommand(command).then(({ result, assets }) => {
+        const reply = { type: "command-result", id: command.id, ok: true, result, assets };
+        figma.ui.postMessage(reply);
+      }).catch((err) => {
+        const reply = {
+          type: "command-result",
+          id: command.id,
+          ok: false,
+          error: err.message ?? String(err)
+        };
+        figma.ui.postMessage(reply);
+      });
+    }
+  };
+  push();
+})();

package/dist/plugin/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Batter Pixso Bridge",
+  "id": "batter-pixso-bridge",
+  "api": "1.0.0",
+  "main": "code.js",
+  "ui": "ui.html",
+  "editorType": ["figma", "preview", "dev"],
+  "networkAccess": {
+    "allowedDomains": [
+      "http://localhost:3210",
+      "http://127.0.0.1:3210"
+    ]
+  }
+}