@ttsalpha/mirra 0.0.0-stage → 1.0.0

package/dist/plugin/manifest.json

@@ -0,0 +1,58 @@
+{
+  "name": "Mirra",
+  "id": "mirra-figma-bridge",
+  "api": "1.0.0",
+  "main": "main.js",
+  "ui": "ui.html",
+  "editorType": [
+    "figma"
+  ],
+  "documentAccess": "dynamic-page",
+  "networkAccess": {
+    "allowedDomains": [
+      "ws://localhost:51730",
+      "ws://localhost:51731",
+      "ws://localhost:51732",
+      "ws://localhost:51733",
+      "ws://localhost:51734",
+      "ws://localhost:51735",
+      "ws://localhost:51736",
+      "ws://localhost:51737",
+      "ws://localhost:51738",
+      "ws://localhost:51739",
+      "http://localhost:51730",
+      "http://localhost:51731",
+      "http://localhost:51732",
+      "http://localhost:51733",
+      "http://localhost:51734",
+      "http://localhost:51735",
+      "http://localhost:51736",
+      "http://localhost:51737",
+      "http://localhost:51738",
+      "http://localhost:51739"
+    ],
+    "devAllowedDomains": [
+      "ws://localhost:51730",
+      "ws://localhost:51731",
+      "ws://localhost:51732",
+      "ws://localhost:51733",
+      "ws://localhost:51734",
+      "ws://localhost:51735",
+      "ws://localhost:51736",
+      "ws://localhost:51737",
+      "ws://localhost:51738",
+      "ws://localhost:51739",
+      "http://localhost:51730",
+      "http://localhost:51731",
+      "http://localhost:51732",
+      "http://localhost:51733",
+      "http://localhost:51734",
+      "http://localhost:51735",
+      "http://localhost:51736",
+      "http://localhost:51737",
+      "http://localhost:51738",
+      "http://localhost:51739"
+    ],
+    "reasoning": "Talks to the Mirra MCP server on the user's own machine over loopback: a WebSocket for the agent's commands, and a health check that tells a missing server apart from a blocked one. No remote server is contacted."
+  }
+}

package/dist/plugin/ui.html

@@ -0,0 +1,282 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-size: 11px;
+        --mark-ink: #101418;
+        --mark-mint: #0fa87c;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --mark-ink: #fff;
+          --mark-mint: #49e3b0;
+        }
+      }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+        min-height: 0;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        color: var(--figma-color-text, #1e1e1e);
+        background: var(--figma-color-bg, #fff);
+      }
+      header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .mark {
+        width: 16px;
+        height: 16px;
+        flex: none;
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #b3b3b3;
+        flex: none;
+      }
+      .dot.online {
+        background: #14ae5c;
+      }
+      .dot.connecting {
+        background: #e5a000;
+      }
+      .dot.offline {
+        background: #e03e1a;
+      }
+      #state {
+        font-weight: 600;
+      }
+      #port {
+        margin-left: auto;
+        color: var(--figma-color-text-secondary, #777);
+        font-variant-numeric: tabular-nums;
+      }
+      button {
+        border: 1px solid var(--figma-color-border, #e6e6e6);
+        background: var(--figma-color-bg-secondary, #f5f5f5);
+        color: inherit;
+        border-radius: 6px;
+        padding: 6px 10px;
+        font: inherit;
+        cursor: pointer;
+      }
+      button:hover {
+        background: var(--figma-color-bg-hover, #ebebeb);
+      }
+      #log {
+        flex: 1 1 auto;
+        min-height: 0;
+        margin: 0;
+        padding: 8px;
+        overflow: auto;
+        white-space: pre-wrap;
+        border-radius: 6px;
+        background: var(--figma-color-bg-secondary, #f5f5f5);
+        color: var(--figma-color-text-secondary, #777);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 10px;
+        line-height: 1.5;
+      }
+      #exec-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--figma-color-text-secondary, #777);
+        cursor: pointer;
+      }
+      #allow-exec {
+        margin: 0;
+      }
+      footer {
+        color: var(--figma-color-text-tertiary, #999);
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <svg class="mark" viewBox="0 0 256 256" aria-hidden="true">
+        <g fill="none" stroke-width="32" stroke-linejoin="round" stroke-linecap="butt">
+          <path d="M48 116V44l80 56 80-56v72" stroke="var(--mark-ink)" />
+          <path d="M48 142v72l80-56 80 56v-72" stroke="var(--mark-mint)" />
+        </g>
+      </svg>
+      <span id="dot" class="dot offline"></span>
+      <span id="state">Disconnected</span>
+      <span id="port">—</span>
+    </header>
+    <button id="reconnect" type="button">Reconnect</button>
+    <label id="exec-row">
+      <input id="allow-exec" type="checkbox" />
+      Allow code execution
+    </label>
+    <pre id="log"></pre>
+    <footer>Keep this panel open while the agent works.</footer>
+    <script>
+      "use strict";
+(() => {
+  // ../schema/dist/constants.js
+  var PROTOCOL_VERSION = 1;
+  var DEFAULT_PORT = 51730;
+  var PORT_RANGE_END = 51739;
+
+  // src/ui.ts
+  var PORTS = Array.from({ length: PORT_RANGE_END - DEFAULT_PORT + 1 }, (_, i) => DEFAULT_PORT + i);
+  var CONNECT_TIMEOUT_MS = 5e3;
+  var RESCAN_MS = 5e3;
+  var MAX_LOGS = 10;
+  var context = null;
+  var scanning = false;
+  var logs = [];
+  var sockets = /* @__PURE__ */ new Map();
+  var askedBy = /* @__PURE__ */ new Map();
+  var dot = element("dot");
+  var stateLabel = element("state");
+  var portLabel = element("port");
+  var logList = element("log");
+  var allowExec = element("allow-exec");
+  allowExec.addEventListener("change", () => {
+    toMain({ kind: "allow-exec", value: allowExec.checked });
+    log(`code execution ${allowExec.checked ? "allowed" : "blocked"}`);
+  });
+  element("reconnect").addEventListener("click", () => {
+    for (const socket of sockets.values()) socket.close();
+    sockets.clear();
+    void scan();
+  });
+  window.onmessage = (event) => {
+    const message = event.data?.pluginMessage;
+    if (!message) return;
+    if (message.kind === "context") {
+      const first = context === null;
+      context = message;
+      if (first) {
+        void scan();
+        setInterval(() => void scan(), RESCAN_MS);
+      }
+      return;
+    }
+    const { kind: _kind, ...envelope } = message;
+    const socket = askedBy.get(envelope.id);
+    askedBy.delete(envelope.id);
+    socket?.send(JSON.stringify(envelope));
+  };
+  document.addEventListener("securitypolicyviolation", (event) => {
+    log(`blocked by CSP: ${event.blockedURI}`);
+  });
+  toMain({ kind: "ready" });
+  async function scan() {
+    if (scanning) return;
+    scanning = true;
+    if (!sockets.size) setStatus("connecting");
+    try {
+      await Promise.all(PORTS.filter((port) => !sockets.has(port)).map(open));
+    } finally {
+      scanning = false;
+    }
+    if (sockets.size) return setStatus("online");
+    await probe(PORTS[0]);
+    setStatus("offline");
+  }
+  function open(port) {
+    return new Promise((resolve) => {
+      let settled = false;
+      let candidate;
+      try {
+        candidate = new WebSocket(`ws://localhost:${port}`);
+      } catch (error) {
+        log(`cannot open ${port}: ${error instanceof Error ? error.message : String(error)}`);
+        return resolve();
+      }
+      const done = () => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        resolve();
+      };
+      const timer = setTimeout(() => {
+        candidate.close();
+        done();
+      }, CONNECT_TIMEOUT_MS);
+      candidate.onopen = () => {
+        attach(candidate, port);
+        done();
+      };
+      candidate.onerror = () => done();
+    });
+  }
+  function attach(socket, port) {
+    sockets.set(port, socket);
+    setStatus("online");
+    log(`connected on ${port}`);
+    socket.onmessage = (event) => {
+      let envelope;
+      try {
+        envelope = JSON.parse(String(event.data));
+      } catch {
+        return log("dropped malformed message");
+      }
+      askedBy.set(envelope.id, socket);
+      toMain({ kind: "request", id: envelope.id, op: envelope.op, params: envelope.params });
+    };
+    socket.onclose = () => {
+      if (sockets.get(port) !== socket) return;
+      sockets.delete(port);
+      log(`lost ${port}`);
+      setStatus(sockets.size ? "online" : "offline");
+    };
+    socket.onerror = () => log(`socket error on ${port}`);
+    socket.send(
+      JSON.stringify({
+        type: "hello",
+        protocolVersion: PROTOCOL_VERSION,
+        pluginVersion: context?.pluginVersion ?? "unknown",
+        fileKey: context?.fileKey ?? null,
+        fileName: context?.fileName ?? "unknown"
+      })
+    );
+  }
+  async function probe(port) {
+    try {
+      const response = await fetch(`http://localhost:${port}/health`);
+      log(`probe ${port}: http ${response.status}`);
+    } catch (error) {
+      log(`probe ${port}: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+  function setStatus(next) {
+    dot.className = `dot ${next}`;
+    const ports = [...sockets.keys()].sort((a, b) => a - b);
+    stateLabel.textContent = next === "online" ? `Connected${ports.length > 1 ? ` (${ports.length})` : ""}` : next === "connecting" ? "Connecting\u2026" : "Disconnected";
+    portLabel.textContent = ports.length ? ports.map((port) => `:${port}`).join(" ") : "\u2014";
+  }
+  function log(message) {
+    logs.unshift(`${(/* @__PURE__ */ new Date()).toLocaleTimeString()}  ${message}`);
+    logs.length = Math.min(logs.length, MAX_LOGS);
+    logList.textContent = logs.join("\n");
+  }
+  function toMain(message) {
+    parent.postMessage({ pluginMessage: message }, "*");
+  }
+  function element(id) {
+    const node = document.getElementById(id);
+    if (!node) throw new Error(`Missing #${id} in the panel markup`);
+    return node;
+  }
+})();
+
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@ttsalpha/mirra",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Two-way MCP server for Figma: read a design and render one back through the Figma Plugin API",
+  "keywords": [
+    "figma",
+    "mcp",
+    "figma-mcp",
+    "figma-plugin",
+    "design-to-code",
+    "claude"
+  ],
+  "license": "MIT",
+  "author": "Son Tran @ttsalpha",
+  "homepage": "https://github.com/ttsalpha/mirra#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ttsalpha/mirra.git",
+    "directory": "packages/server"
+  },
+  "bugs": {
+    "url": "https://github.com/ttsalpha/mirra/issues"
+  },
+  "type": "module",
+  "bin": {
+    "mirra": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "node build.mjs && node scripts/stage-package.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "pnpm -w run build",
+    "build:mcpb": "node scripts/build-mcpb.mjs"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.32.1",
+    "ws": "8.22.0",
+    "zod": "4.6.7"
+  },
+  "devDependencies": {
+    "@mirra/plugin": "workspace:*",
+    "@mirra/schema": "workspace:*",
+    "@types/node": "24.19.2",
+    "@types/ws": "8.18.2",
+    "esbuild": "0.25.12"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}