figma-console-mcp 1.40.3 → 1.40.4

package/dist/core/design-code-tools.js

@@ -376,14 +376,16 @@ function describeEffect(effect) {
     if (!effect || effect.visible === false || typeof effect.type !== "string")
         return null;
     if (effect.type === "DROP_SHADOW" || effect.type === "INNER_SHADOW") {
-        const color = effect.color ? figmaRGBAToHex({ ...effect.color, a: effect.color.a ?? 1 }) : "";
-        const x = effect.offset?.x ?? 0, y = effect.offset?.y ?? 0;
-        return `${effect.type === "DROP_SHADOW" ? "drop" : "inner"} shadow: x ${x} · y ${y} · blur ${effect.radius ?? 0} · spread ${effect.spread ?? 0}${color ? ` · ${color}` : ""}`;
+        const color = effect.color ? figmaRGBAToHex({ ...effect.color, a: effect.color.a ?? 1 }).toUpperCase() : "";
+        // Scaled instances produce values like 0.39000001549720764
+        const n = (v) => Math.round((v ?? 0) * 100) / 100;
+        return `${effect.type === "DROP_SHADOW" ? "drop" : "inner"} shadow: x ${n(effect.offset?.x)} · y ${n(effect.offset?.y)} · blur ${n(effect.radius)} · spread ${n(effect.spread)}${color ? ` · ${color}` : ""}`;
     }
+    const radius = Math.round((effect.radius ?? 0) * 100) / 100;
     if (effect.type === "LAYER_BLUR")
-        return `layer blur ${effect.radius ?? 0}px`;
+        return `layer blur ${radius}px`;
     if (effect.type === "BACKGROUND_BLUR")
-        return `background blur ${effect.radius ?? 0}px`;
+        return `background blur ${radius}px`;
     return `${effect.type.toLowerCase().replace(/_/g, " ")} effect`;
 }
 /** Largest dimension (px) an instance-swap slot can have and still be treated as an icon */
@@ -414,13 +416,32 @@ function detectIconInstance(node, lookup) {
     if (!nameSaysIcon && !(swapProperty && iconSized))
         return null;
     const cleanedLayerName = layerName.replace(/^icon\s*\/?\s*/i, "").trim() || layerName;
+    // Many systems wrap the glyph: an "Icon (small)" instance whose only job is to
+    // hold a swappable "MagnifyingGlass". The wrapper says nothing about WHICH icon
+    // this is — the instance nested inside it does.
+    const glyph = findNestedGlyphName(node, lookup);
     return {
-        name: mainName || cleanedLayerName,
+        name: glyph || mainName || cleanedLayerName,
         type: "instance",
         layerName,
         ...(swapProperty ? { swapProperty } : {}),
     };
 }
+/** Name of the first instance nested inside an icon wrapper (breadth-first, ≤3 levels) */
+function findNestedGlyphName(icon, lookup) {
+    let level = Array.isArray(icon.children) ? icon.children : [];
+    for (let depth = 0; depth < 3 && level.length > 0; depth++) {
+        for (const child of level) {
+            if (child.type === "INSTANCE") {
+                const name = resolveMainComponentName(child.componentId, lookup);
+                if (name)
+                    return name;
+            }
+        }
+        level = level.flatMap((c) => (Array.isArray(c.children) ? c.children : []));
+    }
+    return undefined;
+}
 /** True when the node has at least one visible paint (solid, gradient, image…) */
 function hasVisibleSolidFill(node) {
     return Array.isArray(node?.fills) && node.fills.some((f) => describePaint(f) !== null);
@@ -626,64 +647,43 @@ const typographySignature = (ts) => `${ts.fontFamily}|${ts.fontWeight}|${ts.font
  */
 export function collectTypographyAcrossVariants(setNode) {
     const variants = Array.isArray(setNode?.children) ? setNode.children : [];
+    // A row's identity is (element name, style) — NOT its position in the tree.
+    // Positional identity ("text-8 #4") made ten nav items' badges ten separate
+    // elements, each with its own scope, and printed the same fact three times.
+    const rowKey = (ts) => `${ts.nodeName}|${typographySignature(ts)}`;
     const perVariant = variants.map((v) => {
-        // Same-named text layers within one variant are told apart by order
-        const seen = new Map();
-        const byElement = new Map();
-        for (const ts of collectTypographyData(v)) {
-            const n = (seen.get(ts.nodeName) ?? 0) + 1;
-            seen.set(ts.nodeName, n);
-            byElement.set(n === 1 ? ts.nodeName : `${ts.nodeName} #${n}`, ts);
-        }
-        return { name: cleanVariantName(v.name || "Unknown"), props: parseVariantProperties(v.name || ""), byElement };
+        const keys = new Map();
+        for (const ts of collectTypographyData(v))
+            if (!keys.has(rowKey(ts)))
+                keys.set(rowKey(ts), ts);
+        return { name: cleanVariantName(v.name || "Unknown"), props: parseVariantProperties(v.name || ""), keys };
     });
-    const elements = [];
-    for (const pv of perVariant)
-        for (const el of pv.byElement.keys())
-            if (!elements.includes(el))
-                elements.push(el);
-    const rows = [];
-    for (const el of elements) {
-        const having = perVariant.filter((pv) => pv.byElement.has(el));
-        const distinct = new Map();
-        for (const pv of having) {
-            const style = pv.byElement.get(el);
-            const sig = typographySignature(style);
-            if (!distinct.has(sig))
-                distinct.set(sig, { style, names: [] });
-            distinct.get(sig).names.push(pv.name);
-        }
-        if (distinct.size === 1) {
-            const only = [...distinct.values()][0];
-            // Present in only some variants? Say which, rather than implying all.
-            const scope = having.length === perVariant.length ? "" : scopeLabel(only.names, perVariant.length);
-            rows.push({ style: { ...only.style, nodeName: el }, scope });
-            continue;
+    const order = [];
+    const styles = new Map();
+    for (const pv of perVariant) {
+        for (const [key, ts] of pv.keys) {
+            if (!styles.has(key)) {
+                styles.set(key, ts);
+                order.push(key);
+            }
+        }
+    }
+    return order.map((key) => {
+        const style = styles.get(key);
+        const having = perVariant.filter((pv) => pv.keys.has(key));
+        let scope = "";
+        if (having.length < perVariant.length) {
+            // Which variant property decides where this (element, style) appears?
+            const explanation = explainByVariantProperty(perVariant.map((pv) => ({ props: pv.props, display: pv.keys.has(key) ? "yes" : "no" })));
+            const values = explanation?.groups.filter(([, display]) => display === "yes").map(([pv]) => pv) ?? [];
+            scope = explanation && values.length > 0
+                ? `${explanation.property}=${values.join(" | ")}`
+                : scopeLabel(having.map((pv) => pv.name), perVariant.length);
         }
-        const explanation = explainByVariantProperty(having.map((pv) => ({ props: pv.props, display: typographySignature(pv.byElement.get(el)) })));
-        for (const [sig, group] of distinct) {
-            const propValue = explanation?.groups.filter(([, display]) => display === sig).map(([pv]) => pv);
-            const scope = explanation && propValue && propValue.length > 0
-                ? `${explanation.property}=${propValue.join(" | ")}`
-                : scopeLabel(group.names, perVariant.length);
-            rows.push({ style: { ...group.style, nodeName: el }, scope });
-        }
-    }
-    // Same-named layers ("Label", "Label #2", "Label #3" — three tabs in a tab list)
-    // that share a style and a scope are one fact, not three rows.
-    const merged = [];
-    const seenRows = new Set();
-    for (const row of rows) {
-        const baseName = row.style.nodeName.replace(/ #\d+$/, "");
-        const key = `${baseName}|${typographySignature(row.style)}|${row.scope}|${row.style.hidden ? "h" : ""}`;
-        if (seenRows.has(key))
-            continue;
-        seenRows.add(key);
         // Text layers are often auto-named after their content — keep the table readable
-        const label = baseName.length > 40 ? `${baseName.slice(0, 40)}…` : baseName;
-        merged.push({ ...row, style: { ...row.style, nodeName: label } });
-    }
-    return merged;
+        const label = style.nodeName.length > 40 ? `${style.nodeName.slice(0, 40)}…` : style.nodeName;
+        return { style: { ...style, nodeName: label }, scope };
+    });
 }
 /** "Primary / Default, Primary / Hover, +3 more" — enough to identify, short enough to read */
 function scopeLabel(names, total) {
@@ -729,7 +729,9 @@ function countChildDepth(node) {
     }
     return 1 + max;
 }
-function buildAnatomyLines(node, lines, prefix, isLast, depth, maxDepth) {
+function buildAnatomyLines(node, lines, prefix, isLast, depth, maxDepth, 
+/** Appended to this node's own line — " ×7" for a collapsed run of identical siblings */
+suffix = "") {
     if (depth > maxDepth)
         return;
     const connector = depth === 0 ? "" : (isLast ? "└── " : "├── ");
@@ -755,12 +757,16 @@ function buildAnatomyLines(node, lines, prefix, isLast, depth, maxDepth) {
     let sizingInfo = "";
     if (node.primaryAxisSizingMode || node.counterAxisSizingMode) {
         const parts = [];
+        // The PRIMARY axis is width only in a horizontal layout — in a vertical one it
+        // is height. (These were hard-wired to width/height, mislabeling every
+        // vertical auto-layout: a fixed-width sidebar printed as "fixed-height".)
+        const vertical = node.layoutMode === "VERTICAL";
         if (node.primaryAxisSizingMode === "FIXED")
-            parts.push("fixed-width");
+            parts.push(vertical ? "fixed-height" : "fixed-width");
         if (node.primaryAxisSizingMode === "AUTO")
             parts.push("hug-content");
         if (node.counterAxisSizingMode === "FIXED")
-            parts.push("fixed-height");
+            parts.push(vertical ? "fixed-width" : "fixed-height");
         if (node.layoutGrow === 1)
             parts.push("fill");
         if (parts.length > 0)
@@ -769,14 +775,28 @@ function buildAnatomyLines(node, lines, prefix, isLast, depth, maxDepth) {
     // Hidden layers stay in the tree, marked: the color table names them (a hidden
     // focus ring is real design intent), so the tree must not pretend they don't exist.
     const hiddenHint = node.visible === false ? " (hidden)" : "";
-    lines.push(`${prefix}${connector}${label}${typeHint}${hiddenHint}${layoutInfo}${sizingInfo}`);
-    // Recurse into children
-    if (node.children && Array.isArray(node.children)) {
-        const visibleChildren = node.children;
-        for (let i = 0; i < visibleChildren.length; i++) {
-            const isChildLast = i === visibleChildren.length - 1;
-            buildAnatomyLines(visibleChildren[i], lines, prefix + childPrefix, isChildLast, depth + 1, maxDepth);
-        }
+    lines.push(`${prefix}${connector}${label}${typeHint}${suffix}${hiddenHint}${layoutInfo}${sizingInfo}`);
+    // Recurse into children, collapsing RUNS of siblings that would print
+    // identically (ten nav items, five list rows) into one entry marked ×N. Compared
+    // on the rendered text, so anything the tree shows — a different gap, one hidden
+    // caret — keeps a sibling separate.
+    if (node.children && Array.isArray(node.children) && depth < maxDepth) {
+        const rendered = node.children.map((child) => {
+            const own = [];
+            buildAnatomyLines(child, own, "", true, depth + 1, maxDepth);
+            return own.join("\n");
+        });
+        const runs = [];
+        node.children.forEach((child, i) => {
+            const last = runs[runs.length - 1];
+            if (last && rendered[i] === rendered[i - 1])
+                last.count++;
+            else
+                runs.push({ child, count: 1 });
+        });
+        runs.forEach((run, i) => {
+            buildAnatomyLines(run.child, lines, prefix + childPrefix, i === runs.length - 1, depth + 1, maxDepth, run.count > 1 ? ` ×${run.count}` : "");
+        });
     }
 }
 /**
@@ -2032,15 +2052,15 @@ export function generateOverviewSection(componentName, description, fileUrl, par
     }
     lines.push(links.join(" | "));
     lines.push("");
-    lines.push("## Overview");
-    lines.push("");
+    // Collected separately so an empty overview doesn't leave an orphaned heading
+    const section = [];
     // Use parsed overview or fall back to raw description
     // No filler: libraries that deliberately keep descriptions empty would get a
     // sentence carrying no information on every page. Nothing says more than that.
     const overviewText = parsedDesc.overview || description?.split("\n")[0] || "";
     if (overviewText.trim()) {
-        lines.push(overviewText);
-        lines.push("");
+        section.push(overviewText);
+        section.push("");
     }
     // Base component attribution
     if (codeInfo?.baseComponent) {
@@ -2048,30 +2068,35 @@ export function generateOverviewSection(componentName, description, fileUrl, par
             ? `[${codeInfo.baseComponent.name}](${codeInfo.baseComponent.url})`
             : codeInfo.baseComponent.name;
         if (codeInfo.baseComponent.description) {
-            lines.push(`Built on ${baseLink}, ${codeInfo.baseComponent.description}`);
+            section.push(`Built on ${baseLink}, ${codeInfo.baseComponent.description}`);
         }
         else {
-            lines.push(`Built on ${baseLink}.`);
+            section.push(`Built on ${baseLink}.`);
         }
-        lines.push("");
+        section.push("");
     }
     // When to Use
     if (parsedDesc.whenToUse.length > 0) {
-        lines.push("### When to Use");
-        lines.push("");
+        section.push("### When to Use");
+        section.push("");
         for (const item of parsedDesc.whenToUse) {
-            lines.push(`- ${item}`);
+            section.push(`- ${item}`);
         }
-        lines.push("");
+        section.push("");
     }
     // When NOT to Use
     if (parsedDesc.whenNotToUse.length > 0) {
-        lines.push("### When NOT to Use");
-        lines.push("");
+        section.push("### When NOT to Use");
+        section.push("");
         for (const item of parsedDesc.whenNotToUse) {
-            lines.push(`- ${item}`);
+            section.push(`- ${item}`);
         }
+        section.push("");
+    }
+    if (section.length > 0) {
+        lines.push("## Overview");
         lines.push("");
+        lines.push(...section);
     }
     return lines.join("\n");
 }
@@ -2079,8 +2104,30 @@ export function generateOverviewSection(componentName, description, fileUrl, par
 function formatIconCell(icons) {
     if (!icons || icons.length === 0)
         return "—";
-    // A chip with a leading AND a trailing icon has two — show both
-    return icons.map(formatOneIcon).join("; ");
+    // A chip with a leading AND a trailing icon has two — show both. A nav with
+    // twenty repeats of the same one shows it once, counted.
+    const groups = new Map();
+    for (const icon of icons) {
+        const key = `${icon.name}|${icon.swapProperty ?? ""}`;
+        if (!groups.has(key))
+            groups.set(key, { icon, total: 0, hidden: 0 });
+        const g = groups.get(key);
+        g.total++;
+        if (icon.hidden)
+            g.hidden++;
+    }
+    const MAX_ICON_GROUPS = 5;
+    const parts = [...groups.values()].slice(0, MAX_ICON_GROUPS).map(({ icon, total, hidden }) => {
+        if (total === 1)
+            return formatOneIcon(icon);
+        // Count first, then the note: "Placeholder ×9 _(all hidden)_"
+        const label = formatOneIcon({ ...icon, hidden: false });
+        const note = hidden === 0 ? "" : hidden === total ? " _(all hidden)_" : ` _(${hidden} hidden)_`;
+        return `${label} ×${total}${note}`;
+    });
+    if (groups.size > MAX_ICON_GROUPS)
+        parts.push(`+${groups.size - MAX_ICON_GROUPS} more`);
+    return parts.join("; ");
 }
 function formatOneIcon(icon) {
     const notes = [];
@@ -2318,6 +2365,8 @@ setNode) {
             };
             // Multi-path icons and repeated shapes would otherwise emit identical rows
             const emitted = new Set();
+            // Text layers are often auto-named after their content ("Lorem ipsum dolor…")
+            const short = (name) => (name.length > 40 ? `${name.slice(0, 40)}…` : name);
             const pushRow = (label, c) => {
                 const row = `| ${label}${c.hidden ? " _(hidden layer)_" : ""} | ${tokenCell(c)} | ${c.hex} |`;
                 if (emitted.has(row))
@@ -2340,7 +2389,7 @@ setNode) {
                 pushRow(c.iconLabel ? `Icon (${c.iconLabel})` : "Icon", c);
             // Text colors
             for (const text of vd.textColors)
-                pushRow(`Text (${text.nodeName})`, text);
+                pushRow(`Text (${short(text.nodeName)})`, text);
             // Strokes — through the same writer, so a visible underline and a hidden
             // focus ring sharing one color don't print as two indistinguishable rows
             for (const stroke of vd.strokes)
@@ -3405,7 +3454,11 @@ export function registerDesignCodeTools(server, getFigmaAPI, getCurrentUrl, vari
             if (getDesktopConnector) {
                 try {
                     const connector = await getDesktopConnector();
-                    const varsResult = await connector.getVariables();
+                    // Target the file being DOCUMENTED, not whichever file is active:
+                    // variable ids are file-local, so the active file's variables either
+                    // resolve nothing (every token prints as "—") or, on an id collision,
+                    // resolve to the wrong names. Rejects → caught → hex fallback.
+                    const varsResult = await connector.getVariables(fileKey);
                     const varList = varsResult?.variables || varsResult?.result?.variables;
                     if (Array.isArray(varList)) {
                         for (const [id, name] of buildVariableNameMap(varList, varsResult?.variableCollections || varsResult?.result?.variableCollections))
@@ -3434,7 +3487,7 @@ export function registerDesignCodeTools(server, getFigmaAPI, getCurrentUrl, vari
             if (getDesktopConnector) {
                 try {
                     const connector = await getDesktopConnector();
-                    const bridgeResult = await connector.getComponentFromPluginUI(nodeId);
+                    const bridgeResult = await connector.getComponentFromPluginUI(nodeId, fileKey);
                     if (bridgeResult.success && bridgeResult.component) {
                         // Fetch description from bridge if REST API returned empty
                         if (!description) {