@mp3wizard/figma-console-mcp 1.27.2 → 1.29.1

package/dist/cloudflare/core/tokens/formatters/tokens-studio.js

@@ -1,4 +1,250 @@
-import { FormatterNotImplementedError } from "./stubs.js";
-export function formatTokensStudio(_doc, _opts) {
-    throw new FormatterNotImplementedError("Tokens Studio");
+/**
+ * Tokens Studio for Figma JSON formatter.
+ *
+ * Tokens Studio uses a multi-file layout:
+ *
+ *   $themes.json      — array of theme definitions with selectedTokenSets
+ *   $metadata.json    — list of token set names + tokenSetOrder
+ *   primitives.json   — one file per token set
+ *   semantic.json
+ *   theme/light.json
+ *   theme/dark.json
+ *
+ * Each per-set file holds tokens with the Tokens Studio shape:
+ *
+ *   {
+ *     "color": {
+ *       "primary": {
+ *         "value": "#4085F2",
+ *         "type": "color",
+ *         "description": "Primary brand color"
+ *       }
+ *     }
+ *   }
+ *
+ * Tokens Studio uses bare `value` / `type` (no `$` prefix — same as
+ * Style Dictionary v3, which the plugin's format is based on). Aliases
+ * use `{path.to.token}` syntax.
+ *
+ * `$themes.json` carries the Figma collection/mode bindings that make
+ * Tokens Studio's "send to Figma" feature work — preserved here for
+ * round-trip with Tokens Studio plugin users (notably Altitude).
+ *
+ * Output strategy:
+ *   - One file per TokenSet, named after the set (slugified).
+ *   - Multi-mode sets emit one file per (set, mode) pair (Tokens Studio
+ *     convention).
+ *   - `$metadata.json` enumerates the token set names in order.
+ *   - `$themes.json` builds a theme entry per mode with selectedTokenSets
+ *     and the figma-console-mcp metadata stamped onto it.
+ */
+import { FIGMA_MCP_EXTENSION_KEY } from "../types.js";
+export function formatTokensStudio(doc, opts) {
+    const warnings = [];
+    const files = [];
+    // Track which (setName, mode) → filename pairs exist so $metadata + $themes
+    // can reference them.
+    const setNamesByMode = [];
+    // 1. Per-set per-mode token files.
+    for (const set of doc.sets) {
+        for (const mode of set.modes) {
+            const fileSetName = set.modes.length > 1 ? `${slugify(set.name)}/${slugify(mode)}` : slugify(set.name);
+            const filename = `${fileSetName}.json`;
+            setNamesByMode.push({ setName: fileSetName, mode, filename });
+            files.push({
+                path: filename,
+                content: renderSetFile(set, mode, warnings),
+            });
+        }
+    }
+    // 2. $metadata.json — ordered list of token sets.
+    const tokenSetOrder = setNamesByMode.map((e) => e.setName);
+    files.push({
+        path: "$metadata.json",
+        content: JSON.stringify({ tokenSetOrder }, null, 2) + "\n",
+    });
+    // 3. $themes.json — one theme entry per mode, with figma-console-mcp
+    //    metadata so the Tokens Studio plugin's Figma sync features know
+    //    which Figma collection/mode each theme maps to.
+    const themes = buildThemes(doc, setNamesByMode);
+    files.push({
+        path: "$themes.json",
+        content: JSON.stringify(themes, null, 2) + "\n",
+    });
+    return { files, warnings };
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+/**
+ * Render a single set's tokens for a specific mode in Tokens Studio's
+ * bare-key JSON format.
+ */
+function renderSetFile(set, mode, warnings) {
+    const tree = {};
+    for (const token of set.tokens) {
+        const value = token.values[mode];
+        if (!value)
+            continue;
+        const tsValue = tsValueFor(value, token, warnings);
+        if (tsValue === undefined)
+            continue;
+        // Walk path creating nested groups.
+        let cursor = tree;
+        for (let i = 0; i < token.path.length - 1; i++) {
+            const segment = token.path[i];
+            if (!cursor[segment] || typeof cursor[segment] !== "object") {
+                cursor[segment] = {};
+            }
+            cursor = cursor[segment];
+        }
+        const leafKey = token.path[token.path.length - 1];
+        const leaf = {
+            value: tsValue,
+            type: tsTypeFor(token),
+        };
+        if (token.description)
+            leaf.description = token.description;
+        cursor[leafKey] = leaf;
+    }
+    return JSON.stringify(sortKeys(tree), null, 2) + "\n";
+}
+/**
+ * Build the $themes.json structure. One theme entry per (set, mode) tuple.
+ * For multi-mode sets, the theme name combines set + mode.
+ */
+function buildThemes(doc, setNamesByMode) {
+    const themes = [];
+    // Group by mode so each mode gets one theme entry pulling in the
+    // appropriate set files.
+    const allModes = new Set();
+    for (const e of setNamesByMode)
+        allModes.add(e.mode);
+    for (const mode of allModes) {
+        const selectedTokenSets = {};
+        for (const e of setNamesByMode) {
+            if (e.mode === mode) {
+                selectedTokenSets[e.setName] = "enabled";
+            }
+            else {
+                // Other-mode sets are disabled in this theme (Tokens Studio
+                // convention: only one mode of each set is "enabled" per theme).
+                selectedTokenSets[e.setName] = "source";
+            }
+        }
+        // Find the Figma collection + mode IDs for this mode (preserved
+        // from the export converter's $extensions metadata).
+        const figmaCollectionId = findCollectionIdForMode(doc, mode);
+        const figmaModeId = findModeId(doc, mode);
+        const theme = {
+            id: `${slugify(mode)}-${Math.random().toString(36).slice(2, 10)}`,
+            name: mode,
+            selectedTokenSets,
+        };
+        // Stash Figma metadata for round-trip with Tokens Studio plugin.
+        if (figmaCollectionId)
+            theme.$figmaCollectionId = figmaCollectionId;
+        if (figmaModeId)
+            theme.$figmaModeId = figmaModeId;
+        // Also stash our own extension namespace for tools that read it.
+        if (figmaCollectionId || figmaModeId) {
+            theme.$extensions = {
+                [FIGMA_MCP_EXTENSION_KEY]: {
+                    ...(figmaCollectionId ? { figmaCollectionId } : {}),
+                    ...(figmaModeId ? { figmaModeId } : {}),
+                },
+            };
+        }
+        themes.push(theme);
+    }
+    return themes;
+}
+function findCollectionIdForMode(doc, _mode) {
+    // The mode-to-collection mapping requires knowing which set the mode
+    // belongs to. For simplicity, return the first collection ID we find;
+    // multi-collection support requires per-set theme entries which the
+    // Tokens Studio plugin does support.
+    for (const set of doc.sets) {
+        if (set.meta?.figmaCollectionId)
+            return set.meta.figmaCollectionId;
+    }
+    return undefined;
+}
+function findModeId(_doc, _mode) {
+    // We don't carry Figma's modeId through the internal model in this
+    // version — it's computed lazily during apply via the
+    // (collectionId, modeName) lookup map. Future enhancement: stash the
+    // modeId in TokenSet.meta during export so it round-trips through
+    // Tokens Studio.
+    return undefined;
+}
+/**
+ * Map DTCG types to Tokens Studio's type names. Tokens Studio uses SD-style
+ * type names with some additions (e.g. "sizing", "borderRadius",
+ * "boxShadow", "typography", "opacity", "fontFamilies", "fontWeights").
+ */
+function tsTypeFor(token) {
+    if (token.type === "color")
+        return "color";
+    if (token.type === "fontFamily")
+        return "fontFamilies";
+    if (token.type === "fontWeight")
+        return "fontWeights";
+    if (token.type === "typography")
+        return "typography";
+    if (token.type === "shadow")
+        return "boxShadow";
+    if (token.type === "duration")
+        return "time";
+    if (token.type === "dimension") {
+        const lower = token.path[0]?.toLowerCase() ?? "";
+        if (lower.includes("border") || lower.includes("radius"))
+            return "borderRadius";
+        if (lower.startsWith("space") || lower.startsWith("spacing"))
+            return "spacing";
+        if (lower.includes("size") || lower.includes("width") || lower.includes("height"))
+            return "sizing";
+        return "sizing";
+    }
+    return token.type;
+}
+function tsValueFor(value, token, warnings) {
+    if (value.reference) {
+        const bare = value.reference.replace(/^\{|\}$/g, "");
+        if (bare.startsWith("__library:") || bare === "unknown") {
+            warnings.push(`Skipped ${token.path.join(".")} in Tokens Studio — cross-library alias unresolved.`);
+            return undefined;
+        }
+        return `{${bare}}`;
+    }
+    if (value.literal === undefined || value.literal === null)
+        return undefined;
+    if (typeof value.literal === "number" && token.type === "dimension") {
+        return `${value.literal}px`;
+    }
+    return value.literal;
+}
+function sortKeys(node) {
+    if (node === null || typeof node !== "object" || Array.isArray(node)) {
+        return node;
+    }
+    const obj = node;
+    const sorted = {};
+    // $-prefixed keys first (matches Tokens Studio convention), then alphabetical.
+    const keys = Object.keys(obj).sort((a, b) => {
+        const aDollar = a.startsWith("$");
+        const bDollar = b.startsWith("$");
+        if (aDollar && !bDollar)
+            return -1;
+        if (!aDollar && bDollar)
+            return 1;
+        return a.localeCompare(b);
+    });
+    for (const k of keys)
+        sorted[k] = sortKeys(obj[k]);
+    return sorted;
 }

package/dist/cloudflare/core/tokens/formatters/ts-module.js

@@ -1,4 +1,198 @@
-import { FormatterNotImplementedError } from "./stubs.js";
-export function formatTsModule(_doc, _opts) {
-    throw new FormatterNotImplementedError("TypeScript module");
+/**
+ * TypeScript module formatter.
+ *
+ * Output shape:
+ *
+ *   // tokens.ts
+ *   export const tokens = {
+ *     color: {
+ *       primary: "#4085F2",
+ *       brand: { primary: "#FF00AA" }
+ *     },
+ *     spacing: {
+ *       md: "16px"
+ *     }
+ *   } as const;
+ *
+ *   export type Tokens = typeof tokens;
+ *
+ * Multi-mode tokens emit as nested objects keyed by mode name:
+ *
+ *   export const tokens = {
+ *     mode: {
+ *       primary: { Light: "#FFFFFF", Dark: "#000000" }
+ *     }
+ *   } as const;
+ *
+ * Aliases get resolved at write time to the literal value (TypeScript
+ * can't natively express references). Cross-library aliases get emitted
+ * as `null` with a "TODO: cross-library alias unresolved" comment so
+ * consumers see the gap.
+ */
+import { buildTokenIndex, resolveAliasChain } from "../alias-resolver.js";
+export function formatTsModule(doc, opts) {
+    const warnings = [];
+    const files = [];
+    const splitByCollection = opts.target.splitByCollection ?? false;
+    // splitByMode doesn't make conceptual sense for a TypeScript module
+    // (the value is held in-memory at runtime, not selected by CSS cascade).
+    // TypeScript modules can't natively express alias references — runtime
+    // code reading tokens.color.X gets a string at runtime, no resolution
+    // logic. Build a document-wide token index so aliases resolve to their
+    // literal target at export time. The index spans every set even when
+    // splitByCollection writes single-set files, because aliases often
+    // cross set boundaries (semantic → primitives).
+    const tokenIndex = buildTokenIndex(doc);
+    if (splitByCollection) {
+        for (const set of doc.sets) {
+            files.push({
+                path: filenameFor(opts, set),
+                content: renderTsFile([set], opts, tokenIndex, warnings),
+            });
+        }
+    }
+    else {
+        files.push({
+            path: filenameFor(opts),
+            content: renderTsFile(doc.sets, opts, tokenIndex, warnings),
+        });
+    }
+    return { files, warnings };
+}
+function filenameFor(opts, set) {
+    if (opts.target.filename)
+        return opts.target.filename;
+    if (set)
+        return `${slugify(set.name)}.tokens.ts`;
+    return "tokens.ts";
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+/**
+ * Convert a path segment to a valid JS identifier or quoted-key form.
+ * Numeric leading chars, hyphens, etc. → quoted string key.
+ */
+function jsKey(segment) {
+    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(segment))
+        return segment;
+    return JSON.stringify(segment);
+}
+function renderTsFile(sets, opts, tokenIndex, warnings) {
+    const prefix = opts.target.prefix ?? "";
+    const lines = [];
+    lines.push("/**");
+    lines.push(" * Generated by figma-console-mcp — do not edit by hand.");
+    lines.push(" * Regenerate with: figma_export_tokens (or your npm tokens:export script)");
+    lines.push(" */");
+    lines.push("");
+    const constName = prefix
+        ? `${prefix.replace(/-+$/, "").replace(/-(\w)/g, (_, c) => c.toUpperCase())}Tokens`
+        : "tokens";
+    // Build the nested object structure by walking each set's tokens.
+    const tree = {};
+    for (const set of sets) {
+        for (const token of set.tokens) {
+            writeTokenIntoTree(tree, token, set, tokenIndex, warnings);
+        }
+    }
+    lines.push(`export const ${constName} = ${renderTree(tree, 0)} as const;`);
+    lines.push("");
+    lines.push(`export type ${constName[0].toUpperCase()}${constName.slice(1)} = typeof ${constName};`);
+    lines.push("");
+    return lines.join("\n");
+}
+function writeTokenIntoTree(tree, token, set, tokenIndex, warnings) {
+    let cursor = tree;
+    for (let i = 0; i < token.path.length - 1; i++) {
+        const segment = token.path[i];
+        let next = cursor[segment];
+        if (!next || isLeaf(next)) {
+            next = {};
+            cursor[segment] = next;
+        }
+        cursor = next;
+    }
+    const leafKey = token.path[token.path.length - 1];
+    const isMulti = set.modes.length > 1;
+    const resolvedValues = {};
+    for (const [modeName, value] of Object.entries(token.values)) {
+        let effective = value;
+        if (value.reference) {
+            effective = resolveAliasChain(value, modeName, tokenIndex);
+            if (!effective) {
+                const bare = value.reference.replace(/^\{|\}$/g, "");
+                const reason = bare.startsWith("__library:") || bare === "unknown"
+                    ? "cross-library alias"
+                    : "alias target not found";
+                warnings.push(`Skipped ${token.path.join(".")} (mode "${modeName}") in TS module — ${reason}: ${value.reference}.`);
+                resolvedValues[modeName] = null;
+                continue;
+            }
+        }
+        if (!effective || effective.literal === undefined || effective.literal === null)
+            continue;
+        resolvedValues[modeName] = formatLiteral(effective.literal, token.type);
+    }
+    cursor[leafKey] = {
+        __leaf: true,
+        values: resolvedValues,
+        type: token.type,
+        isMultiMode: isMulti,
+        description: token.description,
+    };
+}
+function isLeaf(node) {
+    return node.__leaf === true;
+}
+function renderTree(tree, indent) {
+    const ind = "  ".repeat(indent);
+    const innerInd = "  ".repeat(indent + 1);
+    const entries = [];
+    for (const [key, value] of Object.entries(tree)) {
+        const k = jsKey(key);
+        if (isLeaf(value)) {
+            const leaf = value;
+            if (leaf.isMultiMode) {
+                // Emit as { Mode: value } object
+                const modeEntries = [];
+                for (const [m, v] of Object.entries(leaf.values)) {
+                    modeEntries.push(`${jsKey(m)}: ${renderValue(v)}`);
+                }
+                entries.push(`${innerInd}${k}: { ${modeEntries.join(", ")} }`);
+            }
+            else {
+                // Single-mode: emit value directly
+                const onlyValue = Object.values(leaf.values)[0];
+                entries.push(`${innerInd}${k}: ${renderValue(onlyValue)}`);
+            }
+        }
+        else {
+            entries.push(`${innerInd}${k}: ${renderTree(value, indent + 1)}`);
+        }
+    }
+    if (entries.length === 0)
+        return "{}";
+    return `{\n${entries.join(",\n")},\n${ind}}`;
+}
+function renderValue(v) {
+    if (v === null)
+        return "null /* TODO: cross-library alias unresolved */";
+    if (typeof v === "string")
+        return JSON.stringify(v);
+    if (typeof v === "number" || typeof v === "boolean")
+        return String(v);
+    return JSON.stringify(v);
+}
+function formatLiteral(value, type) {
+    if (typeof value === "number") {
+        if (type === "dimension")
+            return `${value}px`;
+        return value;
+    }
+    return value;
 }

package/dist/cloudflare/core/tokens/index.js

@@ -11,5 +11,5 @@ export { TokensConfigSchema, loadTokensConfig, findTokensConfig, DEFAULT_TOKENS_
 export { ExportTokensInputSchema, ImportTokensInputSchema, ExportFormatSchema, ImportFormatSchema, SyncStrategySchema, ConflictResolutionSchema, } from "./schemas.js";
 export { parse, detectFormat, } from "./parsers/index.js";
 export { format, } from "./formatters/index.js";
-export { buildTokenIndex, resolveReference, validateAliases, formatDtcgReference, parseDtcgReference, } from "./alias-resolver.js";
+export { buildTokenIndex, resolveReference, resolveAliasChain, validateAliases, formatDtcgReference, parseDtcgReference, } from "./alias-resolver.js";
 export { convertFigmaVariablesToDocument, } from "./figma-converter.js";

package/dist/cloudflare/core/tokens/parsers/stubs.js

@@ -1,13 +1,20 @@
 /**
- * Shared NotImplementedError for parsers/formatters that are scaffolded but
- * not yet implemented. DTCG round-trip is the canonical fully-implemented
- * path; CSS variables is also fully implemented as a formatter output.
- * Everything else returns a helpful error pointing the user at the canonical
- * format.
+ * Shared NotImplementedError for parser stubs.
+ *
+ * Only DTCG is implemented as a parser today — that's the canonical
+ * round-trip format for `figma_import_tokens`. Other parsers are
+ * scaffolding for potential future import-source support; the way to get
+ * tokens INTO Figma now is via DTCG JSON (you can generate that JSON from
+ * any source with your own tooling). The export side (Figma → code) is
+ * fully covered for all 10 formats — see formatters/stubs.ts for that
+ * surface.
  */
 export class TokenFormatNotImplementedError extends Error {
     constructor(formatName, kind) {
-        super(`[figma-console-mcp] The ${formatName} ${kind} is scaffolded but not yet implemented. Fully implemented: DTCG JSON (parser + formatter) and CSS custom properties (formatter only). For now, export to 'dtcg' as the canonical format and either consume the JSON directly or convert downstream — or open an issue with your use case to prioritize this format.`);
+        const guidance = kind === "parser"
+            ? `Only the DTCG parser is implemented today. To import tokens into Figma from ${formatName}, convert to DTCG JSON first (or open an issue if you need direct ${formatName} import support).`
+            : `Implemented formatters: dtcg, css-vars, tailwind-v4, tailwind-v3, scss, ts-module, json-flat, json-nested, style-dictionary-v3, tokens-studio. If you need ${formatName}, open an issue with your use case.`;
+        super(`[figma-console-mcp] The ${formatName} ${kind} is not implemented. ${guidance}`);
         this.name = "TokenFormatNotImplementedError";
     }
 }

package/dist/cloudflare/core/tokens-tools.js

@@ -30,10 +30,20 @@ const logger = createChildLogger({ component: "tokens-tools" });
  * on every exported token document. Kept in sync with package.json by
  * scripts/release.sh — see step 3 of the release flow.
  */
-const MCP_VERSION = "1.27.1";
+const MCP_VERSION = "1.29.0";
 const EXPORT_TOOL_DESCRIPTION = `Export Figma variables to design token files in your codebase. Bidirectional with figma_import_tokens — together they replace Style Dictionary and Tokens Studio's export pipeline for the popular styling methods.
 
-CANONICAL OUTPUT IS DTCG JSON (https://tr.designtokens.org/format/). CSS custom properties is also fully implemented and produces \`:root\` + \`.dark\` + \`[data-theme=...]\` mode selectors with proper string quoting and composite-token expansion. Remaining formats (Tokens Studio, Tailwind v4 @theme, Tailwind v3 config, SCSS, Less, TypeScript module, JSON flat/nested, Style Dictionary v3) are scaffolded but throw TokenFormatNotImplementedError — convert via DTCG for now or open an issue with your specific styling stack.
+FULLY-IMPLEMENTED OUTPUT FORMATS:
+  • dtcg — W3C DTCG JSON. Canonical pivot format. Round-trip safe via \`$extensions["figma-console-mcp"]\`.
+  • css-vars — CSS custom properties with mode-aware selectors (\`:root\`, \`.dark\`, \`[data-theme=...]\`).
+  • tailwind-v4 — Tailwind v4 \`@theme inline\` block. Token-to-namespace mapping (color/*, spacing/*, radius/*, etc.) generates Tailwind utility classes.
+  • tailwind-v3 — \`tailwind.config.js\` theme.extend object grouped under Tailwind's theme keys (colors, spacing, fontFamily, etc.).
+  • scss — \`$var: value;\` declarations. Multi-mode emits a primary variable + a mode-keyed SCSS map for runtime access.
+  • ts-module — \`export const tokens = { ... } as const\` with derived \`Tokens\` type. Multi-mode tokens emit as \`{ Light: ..., Dark: ... }\` objects.
+  • json-flat — flat key-value JSON (\`{"ds-color-primary": "#4085F2"}\`) for custom build scripts.
+  • json-nested — nested object JSON mirroring the token path tree.
+  • style-dictionary-v3 — SD v3 source format with bare \`value\`/\`type\` keys (back-compat for existing SD users).
+  • tokens-studio — Tokens Studio multi-file layout (\`$themes.json\` + \`$metadata.json\` + per-set files). Preserves Figma collection/mode bindings for round-trip with the TS plugin.
 
 ZERO-ARG USAGE: With a tokens.config.json at your project root, just call the tool with no args — it picks up source dir, output formats, modes, prefix, etc. from config. See the response's \`suggestedScaffold\` payload when no config is detected — present it to the user, write the scaffold via your file tools, then call again.
 

package/dist/cloudflare/index.js

@@ -23,6 +23,7 @@ import { registerVersionTools } from "./core/version-tools.js";
 import { registerAnnotationTools } from "./core/annotation-tools.js";
 import { registerDeepComponentTools } from "./core/deep-component-tools.js";
 import { registerDesignSystemTools } from "./core/design-system-tools.js";
+import { registerLibraryTools, registerLibraryVariableTools } from "./core/library-tools.js";
 import { registerAccessibilityTools } from "./core/accessibility-tools.js";
 import { registerDiagnoseTool } from "./core/diagnose-tool.js";
 import { wrapServerForIdentity } from "./core/identity.js";
@@ -73,7 +74,7 @@ export class FigmaConsoleMCPv3 extends McpAgent {
         this.server = (() => {
             const s = new McpServer({
                 name: "Figma Console MCP",
-                version: "1.27.1",
+                version: "1.29.0",
             });
             // Identity wrap — every tool's response and thrown error gets stamped
             // with our MCP name so cross-MCP attribution is unambiguous.
@@ -809,6 +810,11 @@ export class FigmaConsoleMCPv3 extends McpAgent {
         // Register Design System Kit tool
         registerDesignSystemTools(this.server, async () => await this.getFigmaAPI(), () => this.browserManager?.getCurrentUrl() || null, undefined, // variablesCache
         { isRemoteMode: true });
+        // Register Library Tools (key-based component inspection across shared libraries)
+        registerLibraryTools(this.server, async () => await this.getFigmaAPI());
+        // Register Library Variable Tools (Plugin-API based — list + import variables
+        // from subscribed team libraries; routes through the cloud Desktop Bridge)
+        registerLibraryVariableTools(this.server, getCloudDesktopConnector);
         // Register code-side accessibility scanning (axe-core + JSDOM)
         // Note: May not work in Cloudflare Workers due to JSDOM dependency
         try {
@@ -1077,7 +1083,7 @@ export default {
             });
             const statelessServer = new McpServer({
                 name: "Figma Console MCP",
-                version: "1.27.1",
+                version: "1.29.0",
             });
             wrapServerForIdentity(statelessServer);
             // ================================================================
@@ -1175,6 +1181,8 @@ export default {
             registerVersionTools(statelessServer, async () => statelessApi, getCloudFileUrl);
             registerDesignSystemTools(statelessServer, async () => statelessApi, getCloudFileUrl, new Map(), // Fresh variables cache per request
             { isRemoteMode: true });
+            registerLibraryTools(statelessServer, async () => statelessApi);
+            registerLibraryVariableTools(statelessServer, getCloudDesktopConnector);
             await statelessServer.connect(transport);
             const response = await transport.handleRequest(request);
             if (response) {
@@ -1712,7 +1720,7 @@ export default {
             return new Response(JSON.stringify({
                 status: "healthy",
                 service: "Figma Console MCP",
-                version: "1.27.1",
+                version: "1.29.0",
                 endpoints: {
                     mcp: ["/sse", "/mcp"],
                     oauth_mcp_spec: ["/.well-known/oauth-authorization-server", "/authorize", "/token", "/oauth/register"],
@@ -1751,13 +1759,13 @@ export default {
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Figma Console MCP - The Most Comprehensive MCP Server for Figma</title>
 	<link rel="icon" type="image/svg+xml" href="https://docs.figma-console-mcp.southleft.com/favicon.svg">
-	<meta name="description" content="Turn your Figma design system into a living API. 103+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
+	<meta name="description" content="Turn your Figma design system into a living API. 106+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
 
 	<!-- Open Graph -->
 	<meta property="og:type" content="website">
 	<meta property="og:url" content="https://figma-console-mcp.southleft.com">
 	<meta property="og:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta property="og:description" content="The most comprehensive MCP server for Figma. 103+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta property="og:description" content="The most comprehensive MCP server for Figma. 106+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta property="og:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 	<meta property="og:image:width" content="1200">
 	<meta property="og:image:height" content="630">
@@ -1765,7 +1773,7 @@ export default {
 	<!-- Twitter -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 103+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 106+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta name="twitter:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 
 	<meta name="theme-color" content="#0D9488">
@@ -2652,7 +2660,7 @@ export default {
 			<div class="grid-cell showcase-cell rule-left">
 				<div class="showcase-label">What AI Can Access</div>
 				<div class="showcase-stat">
-					<span class="number">103+</span>
+					<span class="number">106+</span>
 					<span class="label">MCP tools for Figma</span>
 				</div>
 				<div class="capability-list">

package/dist/core/design-system-tools.d.ts

@@ -8,10 +8,60 @@
  */
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import type { FigmaAPI } from "./figma-api.js";
+interface VisualSpec {
+    fills?: Array<{
+        type: string;
+        color?: string;
+        opacity?: number;
+    }>;
+    strokes?: Array<{
+        type: string;
+        color?: string;
+        weight?: number;
+        align?: string;
+    }>;
+    effects?: Array<{
+        type: string;
+        color?: string;
+        offset?: {
+            x: number;
+            y: number;
+        };
+        radius?: number;
+        spread?: number;
+    }>;
+    cornerRadius?: number;
+    rectangleCornerRadii?: number[];
+    opacity?: number;
+    layout?: {
+        mode?: string;
+        paddingTop?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+        paddingLeft?: number;
+        itemSpacing?: number;
+        primaryAxisAlign?: string;
+        counterAxisAlign?: string;
+    };
+    typography?: {
+        fontFamily?: string;
+        fontSize?: number;
+        fontWeight?: number;
+        lineHeight?: any;
+        letterSpacing?: any;
+        textAlignHorizontal?: string;
+    };
+}
+/**
+ * Extract a compact visual specification from a Figma node.
+ * Captures the essential CSS-equivalent properties an AI needs to reproduce the component.
+ */
+export declare function extractVisualSpec(node: any): VisualSpec | undefined;
 export declare function registerDesignSystemTools(server: McpServer, getFigmaAPI: () => Promise<FigmaAPI>, getCurrentUrl: () => string | null, variablesCache?: Map<string, {
     data: any;
     timestamp: number;
 }>, options?: {
     isRemoteMode?: boolean;
 }): void;
+export {};
 //# sourceMappingURL=design-system-tools.d.ts.map

package/dist/core/design-system-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-system-tools.d.ts","sourceRoot":"","sources":["../../src/core/design-system-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AA0hB/C,wBAAgB,yBAAyB,CACxC,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,MAAM,GAAG,IAAI,EAClC,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC9D,OAAO,CAAC,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,GAClC,IAAI,CAogBN"}
+{"version":3,"file":"design-system-tools.d.ts","sourceRoot":"","sources":["../../src/core/design-system-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAwB/C,UAAU,UAAU;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnF,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,GAAG,CAAC;QACjB,aAAa,CAAC,EAAE,GAAG,CAAC;QACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;CACF;AAuFD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,UAAU,GAAG,SAAS,CA6FnE;AAiTD,wBAAgB,yBAAyB,CACxC,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,MAAM,GAAG,IAAI,EAClC,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC9D,OAAO,CAAC,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,GAClC,IAAI,CAogBN"}