canicode 0.7.0 → 0.8.0

package/dist/mcp/server.js

@@ -959,6 +959,211 @@ async function loadFromApi(fileKey, nodeId, token) {
   };
 }
 
+// src/core/adapters/tailwind-parser.ts
+var SPACING_SCALE = {
+  "0": 0,
+  "px": 1,
+  "0.5": 2,
+  "1": 4,
+  "1.5": 6,
+  "2": 8,
+  "2.5": 10,
+  "3": 12,
+  "3.5": 14,
+  "4": 16,
+  "5": 20,
+  "6": 24,
+  "7": 28,
+  "8": 32,
+  "9": 36,
+  "10": 40,
+  "11": 44,
+  "12": 48,
+  "14": 56,
+  "16": 64,
+  "20": 80,
+  "24": 96,
+  "28": 112,
+  "32": 128,
+  "36": 144,
+  "40": 160,
+  "44": 176,
+  "48": 192,
+  "52": 208,
+  "56": 224,
+  "60": 240,
+  "64": 256,
+  "72": 288,
+  "80": 320,
+  "96": 384
+};
+function resolveSpacing(value) {
+  const arbMatch = value.match(/^\[(\d+(?:\.\d+)?)px\]$/);
+  if (arbMatch?.[1]) return parseFloat(arbMatch[1]);
+  return SPACING_SCALE[value];
+}
+function extractStylesFromClasses(classes) {
+  const styles = {};
+  const tokens = classes.split(/\s+/);
+  for (const token of tokens) {
+    if (token === "flex" || token === "flex-row") {
+      styles.layoutMode = "HORIZONTAL";
+    } else if (token === "flex-col") {
+      styles.layoutMode = "VERTICAL";
+    } else if (token === "absolute") {
+      styles.layoutPositioning = "ABSOLUTE";
+    } else if (token === "relative" || token === "static") {
+      styles.layoutPositioning = "AUTO";
+    } else if (token === "w-full") {
+      styles.layoutSizingHorizontal = "FILL";
+    } else if (token === "h-full") {
+      styles.layoutSizingVertical = "FILL";
+    } else if (token === "w-fit") {
+      styles.layoutSizingHorizontal = "HUG";
+    } else if (token === "h-fit") {
+      styles.layoutSizingVertical = "HUG";
+    } else if (token.match(/^w-\[.+\]$/) || token.match(/^w-\d/)) {
+      styles.layoutSizingHorizontal = "FIXED";
+    } else if (token.match(/^h-\[.+\]$/) || token.match(/^h-\d/)) {
+      styles.layoutSizingVertical = "FIXED";
+    } else if (token.startsWith("gap-")) {
+      const val = token.slice(4);
+      const px = resolveSpacing(val);
+      if (px !== void 0) styles.itemSpacing = px;
+    } else if (token.startsWith("p-") && !token.startsWith("pl-") && !token.startsWith("pr-") && !token.startsWith("pt-") && !token.startsWith("pb-") && !token.startsWith("px-") && !token.startsWith("py-")) {
+      const val = token.slice(2);
+      const px = resolveSpacing(val);
+      if (px !== void 0) {
+        styles.paddingLeft = px;
+        styles.paddingRight = px;
+        styles.paddingTop = px;
+        styles.paddingBottom = px;
+      }
+    } else if (token.startsWith("px-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) {
+        styles.paddingLeft = px;
+        styles.paddingRight = px;
+      }
+    } else if (token.startsWith("py-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) {
+        styles.paddingTop = px;
+        styles.paddingBottom = px;
+      }
+    } else if (token.startsWith("pl-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) styles.paddingLeft = px;
+    } else if (token.startsWith("pr-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) styles.paddingRight = px;
+    } else if (token.startsWith("pt-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) styles.paddingTop = px;
+    } else if (token.startsWith("pb-")) {
+      const px = resolveSpacing(token.slice(3));
+      if (px !== void 0) styles.paddingBottom = px;
+    } else if (token.startsWith("bg-[")) {
+      const colorMatch = token.match(/^bg-\[(.+)\]$/);
+      if (colorMatch?.[1]) {
+        const color = colorMatch[1];
+        if (!styles.fills) styles.fills = [];
+        if (color.startsWith("var(")) {
+          styles.fills.push({ type: "SOLID", color: {}, boundVariable: color });
+        } else {
+          styles.fills.push({ type: "SOLID", color: parseHexColor(color) });
+        }
+      }
+    } else if (token === "shadow" || token.startsWith("shadow-")) {
+      if (!styles.effects) styles.effects = [];
+      styles.effects.push({ type: "DROP_SHADOW" });
+    }
+  }
+  return styles;
+}
+function parseHexColor(hex) {
+  const clean = hex.replace("#", "");
+  if (clean.length === 6 || clean.length === 8) {
+    return {
+      r: parseInt(clean.slice(0, 2), 16) / 255,
+      g: parseInt(clean.slice(2, 4), 16) / 255,
+      b: parseInt(clean.slice(4, 6), 16) / 255,
+      a: clean.length === 8 ? parseInt(clean.slice(6, 8), 16) / 255 : 1
+    };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+function extractRootClasses(code) {
+  const match = code.match(/className="([^"]+)"/);
+  return match?.[1] ?? "";
+}
+function extractAllClasses(code) {
+  const classes = [];
+  const regex = /className="([^"]+)"/g;
+  let match;
+  while ((match = regex.exec(code)) !== null) {
+    if (match[1]) classes.push(match[1]);
+  }
+  return classes;
+}
+function parseDesignContextCode(code) {
+  const rootClasses = extractRootClasses(code);
+  const rootStyles = extractStylesFromClasses(rootClasses);
+  const allClasses = extractAllClasses(code);
+  const aggregatedFills = [...rootStyles.fills ?? []];
+  const aggregatedEffects = [...rootStyles.effects ?? []];
+  for (const cls of allClasses) {
+    const styles = extractStylesFromClasses(cls);
+    if (styles.fills) {
+      for (const fill of styles.fills) aggregatedFills.push(fill);
+    }
+    if (styles.effects) {
+      for (const effect of styles.effects) aggregatedEffects.push(effect);
+    }
+  }
+  return {
+    ...rootStyles,
+    ...aggregatedFills.length > 0 ? { fills: aggregatedFills } : {},
+    ...aggregatedEffects.length > 0 ? { effects: aggregatedEffects } : {}
+  };
+}
+function parseCodeHeader(code) {
+  const headerMatch = code.match(/\/\*\s*(.+?)\s*\*\//);
+  if (!headerMatch?.[1]) return {};
+  const header = headerMatch[1];
+  const result = {};
+  const nameParts = header.split(" \u2014 ");
+  if (nameParts[0]) result.name = nameParts[0].trim();
+  const dimMatch = header.match(/(\d+)x(\d+)/);
+  if (dimMatch?.[1] && dimMatch[2]) {
+    result.width = parseInt(dimMatch[1]);
+    result.height = parseInt(dimMatch[2]);
+  }
+  const typeMatch = header.match(/\b(COMPONENT|FRAME|INSTANCE|GROUP|SECTION)\b/);
+  if (typeMatch?.[1]) result.type = typeMatch[1];
+  if (header.includes("no auto-layout")) {
+    result.hasAutoLayout = false;
+  } else if (header.includes("auto-layout")) {
+    result.hasAutoLayout = true;
+    if (header.includes("vertical auto-layout")) result.layoutDirection = "VERTICAL";
+    else if (header.includes("horizontal auto-layout")) result.layoutDirection = "HORIZONTAL";
+  }
+  return result;
+}
+function enrichNodeWithStyles(node, styles) {
+  if (styles.layoutMode && !node.layoutMode) node.layoutMode = styles.layoutMode;
+  if (styles.layoutPositioning && !node.layoutPositioning) node.layoutPositioning = styles.layoutPositioning;
+  if (styles.layoutSizingHorizontal && !node.layoutSizingHorizontal) node.layoutSizingHorizontal = styles.layoutSizingHorizontal;
+  if (styles.layoutSizingVertical && !node.layoutSizingVertical) node.layoutSizingVertical = styles.layoutSizingVertical;
+  if (styles.itemSpacing !== void 0 && node.itemSpacing === void 0) node.itemSpacing = styles.itemSpacing;
+  if (styles.paddingLeft !== void 0 && node.paddingLeft === void 0) node.paddingLeft = styles.paddingLeft;
+  if (styles.paddingRight !== void 0 && node.paddingRight === void 0) node.paddingRight = styles.paddingRight;
+  if (styles.paddingTop !== void 0 && node.paddingTop === void 0) node.paddingTop = styles.paddingTop;
+  if (styles.paddingBottom !== void 0 && node.paddingBottom === void 0) node.paddingBottom = styles.paddingBottom;
+  if (styles.fills && !node.fills) node.fills = styles.fills;
+  if (styles.effects && !node.effects) node.effects = styles.effects;
+}
+
 // src/core/adapters/figma-mcp-adapter.ts
 var TAG_TYPE_MAP = {
   canvas: "CANVAS",
@@ -1089,6 +1294,54 @@ function parseMcpMetadataXml(xml, fileKey, fileName) {
     styles: {}
   };
 }
+function enrichWithDesignContext(file, designContextCode, targetNodeId) {
+  const header = parseCodeHeader(designContextCode);
+  const styles = parseDesignContextCode(designContextCode);
+  if (header.hasAutoLayout === true && header.layoutDirection) {
+    if (!styles.layoutMode) styles.layoutMode = header.layoutDirection;
+  } else if (header.hasAutoLayout === false) {
+    delete styles.layoutMode;
+  }
+  if (targetNodeId) {
+    const node = findNodeById2(file.document, targetNodeId);
+    if (node) {
+      enrichNodeWithStyles(node, styles);
+      enrichChildrenFromCode(node, designContextCode);
+      return;
+    }
+  }
+  enrichNodeWithStyles(file.document, styles);
+  enrichChildrenFromCode(file.document, designContextCode);
+}
+function enrichChildrenFromCode(parent, code) {
+  if (!parent.children) return;
+  for (const child of parent.children) {
+    const escapedName = child.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const commentPattern = new RegExp(
+      `\\{/\\*\\s*${escapedName}(?:\\s*\u2014[^*]*)?\\s*\\*/\\}\\s*\\n\\s*<\\w+[^>]*className="([^"]*)"`
+    );
+    const match = code.match(commentPattern);
+    if (match?.[1]) {
+      const childStyles = parseDesignContextCode(
+        `<div className="${match[1]}">`
+      );
+      enrichNodeWithStyles(child, childStyles);
+    }
+    if (child.children) {
+      enrichChildrenFromCode(child, code);
+    }
+  }
+}
+function findNodeById2(node, id) {
+  if (node.id === id) return node;
+  if (node.children) {
+    for (const child of node.children) {
+      const found = findNodeById2(child, id);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
 
 // src/core/engine/design-data-parser.ts
 function parseDesignData(data, fileKey, fileName) {
@@ -3127,16 +3380,21 @@ Two ways to provide design data:
 
 Typical flow with Figma MCP (recommended, no token needed):
   Step 1: Call the official Figma MCP's get_metadata tool to get the node tree
-  Step 2: Pass the result as designData to this tool
+  Step 2: Call the official Figma MCP's get_design_context tool on the same node to get style data
+  Step 3: Pass get_metadata result as designData and get_design_context code as designContext to this tool
+
+The designContext parameter enriches analysis with style information (colors, layout, spacing, effects)
+that get_metadata alone cannot provide. Without it, token and layout rules may not fire.
 
 IMPORTANT \u2014 Before calling this tool, check which data source is available:
-- If the official Figma MCP (https://mcp.figma.com/mcp) is connected: use get_metadata \u2192 designData flow. No token needed.
+- If the official Figma MCP (https://mcp.figma.com/mcp) is connected: use get_metadata + get_design_context \u2192 designData + designContext flow. No token needed.
 - If Figma MCP is NOT connected: use the input parameter with a Figma URL. This requires a FIGMA_TOKEN.
   Tell the user: "The official Figma MCP server is not connected. To use without a token, set it up:
   claude mcp add -s project -t http figma https://mcp.figma.com/mcp
   Otherwise, provide a Figma API token via FIGMA_TOKEN env var or the token parameter."`,
   {
     designData: z.string().optional().describe("Figma node data from Figma MCP get_metadata (XML or JSON). Pass this instead of input when using Figma MCP."),
+    designContext: z.string().optional().describe("Code output from Figma MCP get_design_context. Enriches designData with style info (colors, layout, spacing, effects). Highly recommended alongside designData."),
     input: z.string().optional().describe("Figma URL. Used when designData is not provided. Requires FIGMA_TOKEN."),
     fileKey: z.string().optional().describe("Figma file key (used with designData to generate deep links)"),
     fileName: z.string().optional().describe("Figma file name (used with designData for display)"),
@@ -3152,13 +3410,16 @@ IMPORTANT \u2014 Before calling this tool, check which data source is available:
     openWorldHint: true,
     title: "Analyze Figma Design"
   },
-  async ({ designData, input, fileKey, fileName, token, preset, targetNodeId, configPath, customRulesPath }) => {
+  async ({ designData, designContext, input, fileKey, fileName, token, preset, targetNodeId, configPath, customRulesPath }) => {
     trackEvent(EVENTS.MCP_TOOL_CALLED, { tool: "analyze" });
     try {
       let file;
       let nodeId;
       if (designData) {
         file = parseDesignData(designData, fileKey ?? "unknown", fileName);
+        if (designContext) {
+          enrichWithDesignContext(file, designContext, targetNodeId);
+        }
       } else if (input) {
         const loaded = await loadFile(input, token);
         file = loaded.file;