@atomixstudio/mcp 1.0.21 → 1.0.23

package/dist/{chunk-FFAGTYRZ.js → chunk-BXWOCXYT.js}

@@ -10,6 +10,7 @@ var BRIDGE_METHODS = [
   "create_paint_styles",
   "create_text_styles",
   "create_number_variables",
+  "create_effect_styles",
   "apply_fill_to_selection",
   "create_design_placeholder",
   "design_create_frame",
@@ -41,4 +42,4 @@ export {
   normalizeBridgeMethod,
   isAllowedMethod
 };
-//# sourceMappingURL=chunk-FFAGTYRZ.js.map
+//# sourceMappingURL=chunk-BXWOCXYT.js.map

package/dist/chunk-BXWOCXYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/figma-bridge-protocol.ts"],"sourcesContent":["/**\n * Bridge wire protocol (merged from figma-bridge).\n * All messages are JSON. Only whitelisted methods are allowed.\n * Used by the in-process Figma bridge (WebSocket server in mcp-user).\n */\n\nexport const BRIDGE_METHODS = [\n  \"get_document_info\",\n  \"get_selection\",\n  \"get_node_info\",\n  \"get_figma_variables_and_styles\",\n  \"create_color_variables\",\n  \"create_paint_styles\",\n  \"create_text_styles\",\n  \"create_number_variables\",\n  \"create_effect_styles\",\n  \"apply_fill_to_selection\",\n  \"create_design_placeholder\",\n  \"design_create_frame\",\n  \"design_create_text\",\n  \"design_create_rectangle\",\n  \"design_set_auto_layout\",\n  \"design_set_layout_constraints\",\n  \"design_append_child\",\n  \"get_design_screenshot\",\n  \"finalize_design_frame\",\n] as const;\n\nexport type BridgeMethod = (typeof BRIDGE_METHODS)[number];\n\nexport interface BridgeRequest {\n  id: string;\n  method: string;\n  params?: Record<string, unknown>;\n}\n\nexport interface BridgeSuccessResponse {\n  id: string;\n  result: unknown;\n}\n\nexport interface BridgeErrorResponse {\n  id: string;\n  error: string;\n}\n\nexport type BridgeResponse = BridgeSuccessResponse | BridgeErrorResponse;\n\nexport function isBridgeRequest(msg: unknown): msg is BridgeRequest {\n  if (!msg || typeof msg !== \"object\") return false;\n  const m = msg as Record<string, unknown>;\n  return (\n    typeof m.id === \"string\" &&\n    m.id.length > 0 &&\n    typeof m.method === \"string\" &&\n    m.method.length > 0\n  );\n}\n\n/** Convert camelCase to snake_case for bridge (e.g. getFigmaVariablesAndStyles -> get_figma_variables_and_styles). */\nexport function normalizeBridgeMethod(method: string): string {\n  if (typeof method !== \"string\" || !method) return method;\n  return method.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);\n}\n\nexport function isAllowedMethod(method: string): method is BridgeMethod {\n  const normalized = normalizeBridgeMethod(method);\n  return (BRIDGE_METHODS as readonly string[]).includes(normalized);\n}\n"],"mappings":";;;AAMO,IAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAsBO,SAAS,gBAAgB,KAAoC;AAClE,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,QAAM,IAAI;AACV,SACE,OAAO,EAAE,OAAO,YAChB,EAAE,GAAG,SAAS,KACd,OAAO,EAAE,WAAW,YACpB,EAAE,OAAO,SAAS;AAEtB;AAGO,SAAS,sBAAsB,QAAwB;AAC5D,MAAI,OAAO,WAAW,YAAY,CAAC,OAAQ,QAAO;AAClD,SAAO,OAAO,QAAQ,UAAU,CAAC,MAAM,IAAI,EAAE,YAAY,CAAC,EAAE;AAC9D;AAEO,SAAS,gBAAgB,QAAwC;AACtE,QAAM,aAAa,sBAAsB,MAAM;AAC/C,SAAQ,eAAqC,SAAS,UAAU;AAClE;","names":[]}

package/dist/figma-bridge-protocol.d.ts

@@ -3,7 +3,7 @@
  * All messages are JSON. Only whitelisted methods are allowed.
  * Used by the in-process Figma bridge (WebSocket server in mcp-user).
  */
-declare const BRIDGE_METHODS: readonly ["get_document_info", "get_selection", "get_node_info", "get_figma_variables_and_styles", "create_color_variables", "create_paint_styles", "create_text_styles", "create_number_variables", "apply_fill_to_selection", "create_design_placeholder", "design_create_frame", "design_create_text", "design_create_rectangle", "design_set_auto_layout", "design_set_layout_constraints", "design_append_child", "get_design_screenshot", "finalize_design_frame"];
+declare const BRIDGE_METHODS: readonly ["get_document_info", "get_selection", "get_node_info", "get_figma_variables_and_styles", "create_color_variables", "create_paint_styles", "create_text_styles", "create_number_variables", "create_effect_styles", "apply_fill_to_selection", "create_design_placeholder", "design_create_frame", "design_create_text", "design_create_rectangle", "design_set_auto_layout", "design_set_layout_constraints", "design_append_child", "get_design_screenshot", "finalize_design_frame"];
 type BridgeMethod = (typeof BRIDGE_METHODS)[number];
 interface BridgeRequest {
     id: string;

package/dist/figma-bridge-protocol.js

@@ -4,7 +4,7 @@ import {
   isAllowedMethod,
   isBridgeRequest,
   normalizeBridgeMethod
-} from "./chunk-FFAGTYRZ.js";
+} from "./chunk-BXWOCXYT.js";
 export {
   BRIDGE_METHODS,
   isAllowedMethod,

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   isAllowedMethod,
   normalizeBridgeMethod
-} from "./chunk-FFAGTYRZ.js";
+} from "./chunk-BXWOCXYT.js";
 
 // src/index.ts
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -1480,6 +1480,25 @@ function figmaColorNameWithGroup(key) {
   const groupDisplay = group.charAt(0).toUpperCase() + group.slice(1).toLowerCase();
   return `${groupDisplay} / ${name}`;
 }
+var FIGMA_COLOR_GROUP_ORDER = {
+  background: 0,
+  text: 1,
+  border: 2,
+  icon: 3,
+  brand: 4,
+  action: 5,
+  feedback: 6
+};
+var FIGMA_SHADOW_ORDER = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  "2xl": 6,
+  focus: 7
+};
 function tokenValueToNumber(s) {
   if (typeof s !== "string" || !s.trim()) return 0;
   const t = s.trim();
@@ -1593,6 +1612,25 @@ function buildFigmaPayloadsFromDS(data) {
     }
   }
   if (variables.length === 0 && modes.length === 0) modes.push("Light");
+  const colorSortKey = (figmaName) => {
+    const slash = figmaName.indexOf(" / ");
+    const group = slash >= 0 ? figmaName.slice(0, slash).toLowerCase() : "";
+    const name = slash >= 0 ? figmaName.slice(slash + 3) : figmaName;
+    const order = FIGMA_COLOR_GROUP_ORDER[group] ?? 999;
+    return [order, name];
+  };
+  variables.sort((a, b) => {
+    const [oA, nA] = colorSortKey(a.name);
+    const [oB, nB] = colorSortKey(b.name);
+    if (oA !== oB) return oA - oB;
+    return nA.localeCompare(nB);
+  });
+  paintStyles.sort((a, b) => {
+    const [oA, nA] = colorSortKey(a.name);
+    const [oB, nB] = colorSortKey(b.name);
+    if (oA !== oB) return oA - oB;
+    return nA.localeCompare(nB);
+  });
   const collectionName = data.meta?.name ? `${data.meta.name} Colors` : "Atomix Colors";
   const textStyles = [];
   const sizeToPx = (val, basePx = 16) => {
@@ -1619,8 +1657,8 @@ function buildFigmaPayloadsFromDS(data) {
   };
   const firstFont = (obj) => {
     if (typeof obj === "string") {
-      const match = obj.match(/['"]?([^'",\s]+)['"]?/);
-      return match ? match[1] : "Inter";
+      const primary = obj.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+      return primary || "Inter";
     }
     if (obj && typeof obj === "object" && !Array.isArray(obj)) {
       const v = obj.body ?? obj.heading ?? obj.display ?? Object.values(obj)[0];
@@ -1693,49 +1731,70 @@ function buildFigmaPayloadsFromDS(data) {
       textStyles.push(payload);
     }
   }
-  const numberVariables = [];
+  textStyles.sort((a, b) => {
+    if (a.fontSize !== b.fontSize) return a.fontSize - b.fontSize;
+    return (a.name || "").localeCompare(b.name || "");
+  });
   const dsName = data.meta?.name ?? "Atomix";
-  const primitivesCollectionName = `${dsName} Primitives`;
+  const numberVariableCollections = [];
   const spacing = tokens?.spacing;
   if (spacing?.scale && typeof spacing.scale === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(spacing.scale)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Spacing / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Spacing`, categoryKey: "Spacing", variables: variables2, scopes: ["GAP"] });
   }
   const radius = tokens?.radius;
   if (radius?.scale && typeof radius.scale === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(radius.scale)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Radius / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Radius`, categoryKey: "Radius", variables: variables2, scopes: ["CORNER_RADIUS"] });
   }
   const borders = tokens?.borders;
   if (borders?.width && typeof borders.width === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(borders.width)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Borders / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Borders`, categoryKey: "Borders", variables: variables2, scopes: ["STROKE_FLOAT"] });
   }
   const sizing = tokens?.sizing;
   if (sizing?.height && typeof sizing.height === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(sizing.height)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Height / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Height`, categoryKey: "Height", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   if (sizing?.icon && typeof sizing.icon === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(sizing.icon)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Icon / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Icon`, categoryKey: "Icon", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   const layout = tokens?.layout;
   if (layout?.breakpoint && typeof layout.breakpoint === "object") {
+    const variables2 = [];
     for (const [key, val] of Object.entries(layout.breakpoint)) {
       const n = tokenValueToNumber(val);
-      if (n >= 0) numberVariables.push({ name: `Breakpoint / ${key}`, value: n });
+      if (n >= 0) variables2.push({ name: key, value: n });
     }
+    variables2.sort((a, b) => a.value - b.value);
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Breakpoint`, categoryKey: "Breakpoint", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   const effectStyles = [];
   const shadows = tokens?.shadows;
@@ -1757,22 +1816,33 @@ function buildFigmaPayloadsFromDS(data) {
       effectStyles.push({ name: "Shadow / focus", effects });
     }
   }
+  effectStyles.sort((a, b) => {
+    const nameA = a.name.startsWith("Shadow / ") ? a.name.slice(9) : a.name;
+    const nameB = b.name.startsWith("Shadow / ") ? b.name.slice(9) : b.name;
+    const orderA = FIGMA_SHADOW_ORDER[nameA] ?? 100;
+    const orderB = FIGMA_SHADOW_ORDER[nameB] ?? 100;
+    if (orderA !== orderB) return orderA - orderB;
+    return nameA.localeCompare(nameB);
+  });
   return {
     colorVariables: { collectionName, modes, variables },
     paintStyles,
     textStyles,
-    numberVariables: { collectionName: primitivesCollectionName, variables: numberVariables },
+    numberVariableCollections,
     effectStyles
   };
 }
 function getExpectedFigmaNamesFromDS(data) {
   const payloads = buildFigmaPayloadsFromDS(data);
+  const numberVariableNames = payloads.numberVariableCollections.flatMap(
+    (c) => c.variables.map((v) => `${c.categoryKey} / ${v.name}`)
+  );
   return {
     colorVariableNames: payloads.colorVariables.variables.map((v) => v.name),
     paintStyleNames: payloads.paintStyles.map((s) => s.name),
     textStyleNames: payloads.textStyles.map((s) => s.name),
     effectStyleNames: payloads.effectStyles.map((s) => s.name),
-    numberVariableNames: payloads.numberVariables.variables.map((v) => v.name)
+    numberVariableNames
   };
 }
 function parseArgs() {
@@ -1861,7 +1931,7 @@ var TOKEN_CATEGORIES = ["colors", "typography", "spacing", "sizing", "shadows",
 var server = new Server(
   {
     name: "atomix-mcp-user",
-    version: "1.0.21"
+    version: "1.0.22"
   },
   {
     capabilities: {
@@ -2881,7 +2951,7 @@ ${tokenResponseText}` : summary;
               variables: payloads.colorVariables.variables,
               paintStyles: payloads.paintStyles,
               textStyles: payloads.textStyles,
-              numberVariables: payloads.numberVariables,
+              numberVariableCollections: payloads.numberVariableCollections,
               effectStyles: payloads.effectStyles
             };
             return {
@@ -2898,12 +2968,18 @@ ${tokenResponseText}` : summary;
           if (payloads.paintStyles.length > 0) {
             out.paintStyles = await sendBridgeRequest("create_paint_styles", { styles: payloads.paintStyles });
           }
-          if (payloads.numberVariables.variables.length > 0) {
+          if (payloads.numberVariableCollections.length > 0) {
+            const numberResults = [];
             try {
-              out.numberVariables = await sendBridgeRequest("create_number_variables", {
-                collectionName: payloads.numberVariables.collectionName,
-                variables: payloads.numberVariables.variables
-              });
+              for (const coll of payloads.numberVariableCollections) {
+                const result = await sendBridgeRequest("create_number_variables", {
+                  collectionName: coll.collectionName,
+                  variables: coll.variables,
+                  scopes: coll.scopes
+                });
+                numberResults.push({ collectionName: coll.collectionName, result });
+              }
+              out.numberVariables = numberResults;
             } catch (e) {
               const msg = e instanceof Error ? e.message : String(e);
               out.numberVariables = { error: msg };
@@ -2924,7 +3000,7 @@ ${tokenResponseText}` : summary;
             variables: payloads.colorVariables.variables,
             paintStyles: payloads.paintStyles,
             textStyles: payloads.textStyles,
-            numberVariables: payloads.numberVariables,
+            numberVariableCollections: payloads.numberVariableCollections,
             effectStyles: payloads.effectStyles
           };
         } catch (e) {
@@ -2935,7 +3011,7 @@ ${tokenResponseText}` : summary;
             variables: payloads.colorVariables.variables,
             paintStyles: payloads.paintStyles,
             textStyles: payloads.textStyles,
-            numberVariables: payloads.numberVariables,
+            numberVariableCollections: payloads.numberVariableCollections,
             effectStyles: payloads.effectStyles
           };
           const errMsg = out.error.toLowerCase();
@@ -3050,9 +3126,20 @@ ${tokenResponseText}` : summary;
           const response = raw;
           const variableByName = /* @__PURE__ */ new Map();
           if (response.variableCollections) {
+            const numberCategorySuffixes = [" Spacing", " Radius", " Borders", " Height", " Icon", " Breakpoint"];
             for (const coll of response.variableCollections) {
-              for (const v of coll.variables || []) {
-                variableByName.set(v.name, v.id);
+              if (coll.name.endsWith(" Colors")) {
+                for (const v of coll.variables || []) {
+                  variableByName.set(v.name, v.id);
+                }
+                continue;
+              }
+              const numberSuffix = numberCategorySuffixes.find((s) => coll.name.endsWith(s));
+              if (numberSuffix) {
+                const category = numberSuffix.slice(1);
+                for (const v of coll.variables || []) {
+                  variableByName.set(`${category} / ${v.name}`, v.id);
+                }
               }
             }
           }