figma-local 1.0.0 → 1.2.0

package/src/index.js

@@ -1039,7 +1039,7 @@ program
 
       // Show plugin setup instructions
       console.log(chalk.hex('#FF6B35')('\n  ┌─────────────────────────────────────────────────────┐'));
-      console.log(chalk.hex('#FF6B35')('  │') + chalk.white.bold('  Setup the FigCli plugin                           ') + chalk.hex('#FF6B35')('│'));
+      console.log(chalk.hex('#FF6B35')('  │') + chalk.white.bold('  Setup the Figma Local plugin                      ') + chalk.hex('#FF6B35')('│'));
       console.log(chalk.hex('#FF6B35')('  └─────────────────────────────────────────────────────┘\n'));
 
       console.log(chalk.white.bold('  ONE-TIME SETUP:\n'));
@@ -1049,7 +1049,7 @@ program
       console.log(chalk.cyan('  4. ') + chalk.white('Click ') + chalk.yellow('Open') + chalk.white(' — plugin is now installed!\n'));
 
       console.log(chalk.white.bold('  EACH SESSION:\n'));
-      console.log(chalk.cyan('  → ') + chalk.white('In Figma: ') + chalk.yellow('Plugins → Development → FigCli\n'));
+      console.log(chalk.cyan('  → ') + chalk.white('In Figma: ') + chalk.yellow('Plugins → Development → Figma Local\n'));
 
       console.log(chalk.gray('  💡 Tip: Right-click plugin → "Add to toolbar" for one-click access\n'));
 
@@ -6764,7 +6764,31 @@ node
               const b = Array.isArray(binding) ? binding[0] : binding;
               if (b && b.id) {
                 const variable = figma.variables.getVariableById(b.id);
-                bindings[prop] = variable ? variable.name : b.id;
+                if (variable) {
+                  const info = { name: variable.name };
+                  try {
+                    const modeIds = Object.keys(variable.valuesByMode);
+                    if (modeIds.length > 0) {
+                      const val = variable.valuesByMode[modeIds[0]];
+                      if (val !== undefined) {
+                        if (typeof val === 'object' && val.r !== undefined) {
+                          const r = Math.round((val.r||0)*255), g = Math.round((val.g||0)*255), bl = Math.round((val.b||0)*255);
+                          info.value = '#' + r.toString(16).padStart(2,'0') + g.toString(16).padStart(2,'0') + bl.toString(16).padStart(2,'0');
+                        } else if (typeof val === 'object' && val.id) {
+                          try {
+                            const alias = figma.variables.getVariableById(val.id);
+                            info.value = alias ? alias.name + ' (alias)' : 'alias';
+                          } catch(e) { info.value = 'alias'; }
+                        } else {
+                          info.value = val;
+                        }
+                      }
+                    }
+                  } catch(e) {}
+                  bindings[prop] = info;
+                } else {
+                  bindings[prop] = { name: b.id };
+                }
               }
             }
           }
@@ -8354,21 +8378,100 @@ blocksCmd
 
 program
   .command('read [frameName]')
-  .description('Extract design info in lean structured format (staged, token-efficient)')
-  .option('--lean', 'Output compact text block instead of raw JSON (default: true)')
-  .option('--json', 'Output raw JSON instead of text block')
-  .option('--tokens', 'Include only used design tokens (skips structure)')
-  .option('--stage <n>', 'Run only stage 1 (metadata), 2 (structure), or 3 (tokens)', null)
+  .description('Read your Figma canvas — list all frames, or dive into one for layout, components, and tokens')
+  .option('--json', 'Output raw JSON instead of formatted text')
+  .option('--tokens', 'Show only the design tokens (colors, spacing, etc.) used in the frame')
+  .option('--selection', 'Read whatever is currently selected in Figma')
+  .option('--link <url>', 'Read a specific node from a Figma selection link (e.g. copied via "Copy link to selection")')
+  .option('--stage <n>', 'Run a specific stage: 1 (list frames), 2 (structure), 3 (tokens)')
+  .addHelpText('after', `
+Examples:
+  fig read                          List all frames on the current page
+  fig read "Login Screen"           Get layout, components, and tokens for the Login Screen frame
+  fig read "Login Screen" --tokens  Show only the design tokens used by Login Screen
+  fig read --selection              Read the node you currently have selected in Figma
+  fig read --link "https://..."     Read a node from a Figma selection link
+  fig read --json                   Output raw JSON (useful for piping to other tools)
+`)
   .action(async (frameName, options) => {
     checkConnection();
-    const spinner = ora('Reading design (stage 1: metadata)...').start();
+    const spinner = ora('Reading design...').start();
 
     try {
+      // --selection: read the currently selected node in Figma
+      if (options.selection) {
+        spinner.text = 'Reading current selection...';
+        const selectionCode = `(function() {
+          const sel = figma.currentPage.selection;
+          if (!sel || sel.length === 0) return { error: 'Nothing selected in Figma. Select a frame or layer first.' };
+          const node = sel[0];
+          function walk(n, depth) {
+            if (depth > 4) return { type: n.type, name: n.name, truncated: true };
+            const obj = { type: n.type, name: n.name };
+            if (n.width) obj.w = Math.round(n.width);
+            if (n.height) obj.h = Math.round(n.height);
+            if (n.type === 'TEXT') obj.text = n.characters.slice(0, 100);
+            if (n.fills && n.fills.length) obj.fills = n.fills.map(f => f.type === 'SOLID' ? { r: Math.round(f.color.r*255), g: Math.round(f.color.g*255), b: Math.round(f.color.b*255) } : { type: f.type });
+            if (n.cornerRadius) obj.radius = n.cornerRadius;
+            if (n.children) obj.children = n.children.slice(0, 20).map(c => walk(c, depth + 1));
+            return obj;
+          }
+          return { selected: sel.length, node: walk(node, 0) };
+        })()`;
+        const result = await daemonExec('eval', { code: selectionCode });
+        if (result.error) {
+          spinner.fail(result.error);
+          process.exit(1);
+        }
+        spinner.succeed(`Reading selection: ${result.node.name}`);
+        console.log(options.json ? JSON.stringify(result, null, 2) : formatSelectionResult(result));
+        return;
+      }
+
+      // --link: parse Figma URL and read a specific node by ID
+      if (options.link) {
+        spinner.text = 'Reading node from link...';
+        // Figma links contain node-id as a query param like ?node-id=123:456 or ?node-id=123-456
+        const url = options.link;
+        const nodeIdMatch = url.match(/node-id=([0-9]+-[0-9]+|[0-9]+:[0-9]+|[0-9]+%3A[0-9]+)/i);
+        if (!nodeIdMatch) {
+          spinner.fail('Could not find a node ID in that link. Copy the link from Figma via right-click → "Copy/Paste as" → "Copy link to selection".');
+          process.exit(1);
+        }
+        // Normalize: Figma URLs use - or %3A, but the API expects :
+        const nodeId = decodeURIComponent(nodeIdMatch[1]).replace('-', ':');
+        const nodeCode = `(function() {
+          const node = figma.getNodeById('${nodeId}');
+          if (!node) return { error: 'Node ${nodeId} not found on the current page.' };
+          function walk(n, depth) {
+            if (depth > 4) return { type: n.type, name: n.name, truncated: true };
+            const obj = { type: n.type, name: n.name };
+            if (n.width) obj.w = Math.round(n.width);
+            if (n.height) obj.h = Math.round(n.height);
+            if (n.type === 'TEXT') obj.text = n.characters.slice(0, 100);
+            if (n.fills && n.fills.length) obj.fills = n.fills.map(f => f.type === 'SOLID' ? { r: Math.round(f.color.r*255), g: Math.round(f.color.g*255), b: Math.round(f.color.b*255) } : { type: f.type });
+            if (n.cornerRadius) obj.radius = n.cornerRadius;
+            if (n.children) obj.children = n.children.slice(0, 20).map(c => walk(c, depth + 1));
+            return obj;
+          }
+          return { nodeId: '${nodeId}', node: walk(node, 0) };
+        })()`;
+        const result = await daemonExec('eval', { code: nodeCode });
+        if (result.error) {
+          spinner.fail(result.error);
+          process.exit(1);
+        }
+        spinner.succeed(`Reading node: ${result.node.name} (${nodeId})`);
+        console.log(options.json ? JSON.stringify(result, null, 2) : formatSelectionResult(result));
+        return;
+      }
+
       // Stage 1: metadata — always run, cheapest call
+      spinner.text = 'Scanning canvas...';
       const metadata = await daemonExec('eval', { code: STAGE1_METADATA });
 
       if (options.stage === '1') {
-        spinner.succeed('Stage 1 complete');
+        spinner.succeed('Canvas scanned');
         console.log(options.json ? JSON.stringify(metadata, null, 2) : formatStage1(metadata));
         return;
       }
@@ -8387,44 +8490,41 @@ program
       } else if (metadata.frames.length === 1) {
         targetFrame = metadata.frames[0];
       } else {
-        spinner.succeed('Stage 1 complete — multiple frames found');
-        console.log('\nAvailable frames (use read <frameName> to focus):');
-        metadata.frames.forEach(f => console.log(`  • ${f.name}  ${f.w}x${f.h}`));
-        console.log('\nOr: read "Frame Name" to extract structure + tokens for a specific frame.');
+        spinner.succeed(`Found ${metadata.frames.length} frames on "${metadata.page}"`);
+        console.log('');
+        metadata.frames.forEach(f => console.log(`  • ${f.name}  ${f.w}x${f.h}  [${f.type}]`));
+        console.log(`\nTo read a specific frame:\n  fig read "${metadata.frames[0].name}"`);
         return;
       }
 
-      // Stage 2: frame structure — only the target frame
-      spinner.text = `Stage 2: reading structure of "${targetFrame.name}"...`;
+      // Stage 2: frame structure
+      spinner.text = `Reading "${targetFrame.name}"...`;
       const frameStructure = await daemonExec('eval', { code: buildFrameStructureCode(targetFrame.id) });
 
       if (options.stage === '2') {
-        spinner.succeed('Stage 2 complete');
+        spinner.succeed('Structure extracted');
         console.log(options.json ? JSON.stringify(frameStructure, null, 2) : JSON.stringify(frameStructure, null, 2));
         return;
       }
 
       if (options.tokens) {
-        // Skip to stage 3 only
-        spinner.text = 'Stage 3: extracting used tokens only...';
+        spinner.text = 'Extracting design tokens...';
         const tokens = await daemonExec('eval', { code: buildUsedTokensCode(targetFrame.id) });
-        spinner.succeed(`Stage 3 complete — ${Object.keys(tokens).length} tokens used in this frame`);
+        spinner.succeed(`${Object.keys(tokens).length} tokens used in "${targetFrame.name}"`);
         console.log(options.json ? JSON.stringify(tokens, null, 2) : formatTokensOnly(tokens));
         return;
       }
 
-      // Stage 3: used tokens — parallel with structure already done
-      spinner.text = 'Stage 3: extracting used tokens...';
+      // Stage 3: used tokens
+      spinner.text = 'Extracting tokens...';
       const tokens = await daemonExec('eval', { code: buildUsedTokensCode(targetFrame.id) });
 
       spinner.succeed(`Read complete — ${targetFrame.name}`);
       console.log('');
 
-      // Format and output
       if (options.json) {
         console.log(JSON.stringify({ metadata, frame: frameStructure, tokens }, null, 2));
       } else {
-        // Default: lean text block
         const ctx = formatLeanContext(metadata, frameStructure, tokens, targetFrame.name);
         console.log(ctx);
       }
@@ -8447,11 +8547,1658 @@ function formatTokensOnly(tokens) {
     keys.map(k => `  ${k}: ${tokens[k]}`).join('\n');
 }
 
+function formatSelectionResult(result) {
+  const lines = [];
+  function printNode(node, depth) {
+    if (!node) return;
+    const indent = '  '.repeat(depth);
+    let line = `${indent}[${node.type}] ${node.name}`;
+    if (node.w && node.h) line += `  ${node.w}x${node.h}`;
+    if (node.text) line += `  "${node.text}"`;
+    if (node.radius) line += `  radius=${node.radius}`;
+    if (node.fills && node.fills.length) {
+      const colors = node.fills.map(f => f.r !== undefined ? `rgb(${f.r},${f.g},${f.b})` : f.type).join(', ');
+      line += `  fill=${colors}`;
+    }
+    if (node.truncated) line += '  ...';
+    lines.push(line);
+    if (node.children) node.children.forEach(c => printNode(c, depth + 1));
+  }
+  printNode(result.node, 0);
+  return lines.join('\n');
+}
+
+// ============ INSPECT — detailed design specs ============
+
+const INSPECT_CODE = `(function() {
+  var sel = figma.currentPage.selection;
+  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select a frame, component, or layer in Figma first.' };
+
+  var BASE = 16; // 1rem = 16px
+
+  function toRem(px) {
+    return parseFloat((px / BASE).toFixed(3));
+  }
+
+  function colorToHex(c) {
+    var r = Math.round((c.r || 0) * 255);
+    var g = Math.round((c.g || 0) * 255);
+    var b = Math.round((c.b || 0) * 255);
+    return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
+  }
+
+  function colorToRgba(c, opacity) {
+    var r = Math.round((c.r || 0) * 255);
+    var g = Math.round((c.g || 0) * 255);
+    var b = Math.round((c.b || 0) * 255);
+    if (opacity !== undefined && opacity < 1) {
+      return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + parseFloat(opacity.toFixed(2)) + ')';
+    }
+    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
+  }
+
+  function inspectNode(node) {
+    var spec = {
+      name: node.name,
+      type: node.type,
+    };
+
+    // Dimensions
+    if (node.width !== undefined) {
+      spec.dimensions = {
+        width: { px: Math.round(node.width), rem: toRem(node.width) },
+        height: { px: Math.round(node.height), rem: toRem(node.height) }
+      };
+    }
+
+    // Position
+    if (node.x !== undefined) {
+      spec.position = {
+        x: { px: Math.round(node.x), rem: toRem(node.x) },
+        y: { px: Math.round(node.y), rem: toRem(node.y) }
+      };
+    }
+
+    // Auto layout / Flexbox
+    if (node.layoutMode && node.layoutMode !== 'NONE') {
+      spec.layout = {
+        mode: node.layoutMode === 'HORIZONTAL' ? 'row' : 'column',
+        gap: { px: node.itemSpacing || 0, rem: toRem(node.itemSpacing || 0) },
+        padding: {
+          top: { px: node.paddingTop || 0, rem: toRem(node.paddingTop || 0) },
+          right: { px: node.paddingRight || 0, rem: toRem(node.paddingRight || 0) },
+          bottom: { px: node.paddingBottom || 0, rem: toRem(node.paddingBottom || 0) },
+          left: { px: node.paddingLeft || 0, rem: toRem(node.paddingLeft || 0) }
+        },
+        mainAxisAlign: node.primaryAxisAlignItems || 'MIN',
+        crossAxisAlign: node.counterAxisAlignItems || 'MIN',
+        wrap: node.layoutWrap === 'WRAP' ? true : false
+      };
+      if (node.primaryAxisSizingMode) spec.layout.mainAxisSizing = node.primaryAxisSizingMode;
+      if (node.counterAxisSizingMode) spec.layout.crossAxisSizing = node.counterAxisSizingMode;
+    }
+
+    // Corner radius
+    if (node.cornerRadius !== undefined && node.cornerRadius !== 0) {
+      if (typeof node.cornerRadius === 'number') {
+        spec.borderRadius = { px: node.cornerRadius, rem: toRem(node.cornerRadius) };
+      }
+    }
+    // Per-corner radius
+    if (node.topLeftRadius || node.topRightRadius || node.bottomRightRadius || node.bottomLeftRadius) {
+      spec.borderRadiusPerCorner = {
+        topLeft: { px: node.topLeftRadius || 0, rem: toRem(node.topLeftRadius || 0) },
+        topRight: { px: node.topRightRadius || 0, rem: toRem(node.topRightRadius || 0) },
+        bottomRight: { px: node.bottomRightRadius || 0, rem: toRem(node.bottomRightRadius || 0) },
+        bottomLeft: { px: node.bottomLeftRadius || 0, rem: toRem(node.bottomLeftRadius || 0) }
+      };
+    }
+
+    // Fills
+    if (node.fills && node.fills.length > 0) {
+      spec.fills = [];
+      for (var i = 0; i < node.fills.length; i++) {
+        var f = node.fills[i];
+        if (f.visible === false) continue;
+        var fillSpec = { type: f.type };
+        if (f.type === 'SOLID' && f.color) {
+          fillSpec.hex = colorToHex(f.color);
+          fillSpec.rgba = colorToRgba(f.color, f.opacity);
+          fillSpec.opacity = f.opacity !== undefined ? f.opacity : 1;
+        }
+        if (f.type === 'GRADIENT_LINEAR' || f.type === 'GRADIENT_RADIAL') {
+          fillSpec.stops = f.gradientStops ? f.gradientStops.map(function(s) {
+            return { color: colorToHex(s.color), position: parseFloat(s.position.toFixed(2)) };
+          }) : [];
+        }
+        spec.fills.push(fillSpec);
+      }
+    }
+
+    // Strokes
+    if (node.strokes && node.strokes.length > 0) {
+      spec.strokes = [];
+      for (var i = 0; i < node.strokes.length; i++) {
+        var s = node.strokes[i];
+        if (s.visible === false) continue;
+        var strokeSpec = { type: s.type };
+        if (s.type === 'SOLID' && s.color) {
+          strokeSpec.hex = colorToHex(s.color);
+          strokeSpec.rgba = colorToRgba(s.color, s.opacity);
+        }
+        spec.strokes.push(strokeSpec);
+      }
+      if (node.strokeWeight) spec.strokeWeight = { px: node.strokeWeight, rem: toRem(node.strokeWeight) };
+      if (node.strokeAlign) spec.strokeAlign = node.strokeAlign;
+    }
+
+    // Typography
+    if (node.type === 'TEXT') {
+      spec.typography = {};
+      spec.typography.content = node.characters;
+      if (node.fontName && node.fontName !== figma.mixed) {
+        spec.typography.fontFamily = node.fontName.family;
+        spec.typography.fontStyle = node.fontName.style;
+      }
+      if (node.fontSize && node.fontSize !== figma.mixed) {
+        spec.typography.fontSize = { px: node.fontSize, rem: toRem(node.fontSize) };
+      }
+      if (node.fontWeight && node.fontWeight !== figma.mixed) {
+        spec.typography.fontWeight = node.fontWeight;
+      }
+      if (node.lineHeight && node.lineHeight !== figma.mixed) {
+        if (node.lineHeight.unit === 'PIXELS') {
+          spec.typography.lineHeight = { px: node.lineHeight.value, rem: toRem(node.lineHeight.value) };
+        } else if (node.lineHeight.unit === 'PERCENT') {
+          spec.typography.lineHeight = { percent: node.lineHeight.value + '%' };
+        } else {
+          spec.typography.lineHeight = 'auto';
+        }
+      }
+      if (node.letterSpacing && node.letterSpacing !== figma.mixed) {
+        if (node.letterSpacing.unit === 'PIXELS') {
+          spec.typography.letterSpacing = { px: node.letterSpacing.value, rem: toRem(node.letterSpacing.value) };
+        } else if (node.letterSpacing.unit === 'PERCENT') {
+          spec.typography.letterSpacing = { percent: node.letterSpacing.value + '%' };
+        }
+      }
+      if (node.textAlignHorizontal) spec.typography.textAlign = node.textAlignHorizontal.toLowerCase();
+      if (node.textDecoration && node.textDecoration !== 'NONE' && node.textDecoration !== figma.mixed) {
+        spec.typography.textDecoration = node.textDecoration.toLowerCase();
+      }
+      if (node.textCase && node.textCase !== 'ORIGINAL' && node.textCase !== figma.mixed) {
+        spec.typography.textTransform = node.textCase.toLowerCase();
+      }
+    }
+
+    // Effects (shadows, blur)
+    if (node.effects && node.effects.length > 0) {
+      spec.effects = [];
+      for (var i = 0; i < node.effects.length; i++) {
+        var e = node.effects[i];
+        if (e.visible === false) continue;
+        var effectSpec = { type: e.type };
+        if (e.type === 'DROP_SHADOW' || e.type === 'INNER_SHADOW') {
+          effectSpec.offset = {
+            x: { px: e.offset.x, rem: toRem(e.offset.x) },
+            y: { px: e.offset.y, rem: toRem(e.offset.y) }
+          };
+          effectSpec.blur = { px: e.radius, rem: toRem(e.radius) };
+          effectSpec.spread = { px: e.spread || 0, rem: toRem(e.spread || 0) };
+          if (e.color) effectSpec.color = colorToRgba(e.color, e.color.a);
+        }
+        if (e.type === 'LAYER_BLUR' || e.type === 'BACKGROUND_BLUR') {
+          effectSpec.blur = { px: e.radius, rem: toRem(e.radius) };
+        }
+        spec.effects.push(effectSpec);
+      }
+    }
+
+    // Opacity
+    if (node.opacity !== undefined && node.opacity < 1) {
+      spec.opacity = parseFloat(node.opacity.toFixed(2));
+    }
+
+    // Constraints
+    if (node.constraints) {
+      spec.constraints = {
+        horizontal: node.constraints.horizontal,
+        vertical: node.constraints.vertical
+      };
+    }
+
+    // Component info
+    if (node.type === 'INSTANCE' && node.mainComponent) {
+      spec.component = {
+        name: node.mainComponent.name,
+        id: node.mainComponent.id
+      };
+      if (node.mainComponent.parent && node.mainComponent.parent.type === 'COMPONENT_SET') {
+        spec.component.set = node.mainComponent.parent.name;
+      }
+    }
+    if (node.type === 'COMPONENT') {
+      spec.component = { name: node.name, id: node.id, isMainComponent: true };
+    }
+
+    // Variable bindings
+    if (node.boundVariables) {
+      var vars = {};
+      var bindings = node.boundVariables;
+      Object.keys(bindings).forEach(function(prop) {
+        var binding = bindings[prop];
+        if (!binding) return;
+        var entries = Array.isArray(binding) ? binding : [binding];
+        entries.forEach(function(b) {
+          if (!b || !b.id) return;
+          try {
+            var v = figma.variables.getVariableById(b.id);
+            if (v) {
+              var info = { name: v.name };
+              try {
+                var modeIds = Object.keys(v.valuesByMode);
+                if (modeIds.length > 0) {
+                  var val = v.valuesByMode[modeIds[0]];
+                  if (val !== undefined) {
+                    if (typeof val === 'object' && val.r !== undefined) {
+                      info.value = colorToHex(val);
+                    } else if (typeof val === 'object' && val.id) {
+                      try {
+                        var alias = figma.variables.getVariableById(val.id);
+                        if (alias) info.value = alias.name + ' (alias)';
+                      } catch(e2) { info.value = 'alias'; }
+                    } else {
+                      info.value = val;
+                    }
+                  }
+                }
+                if (modeIds.length > 1) {
+                  info.modes = {};
+                  for (var mi = 0; mi < modeIds.length; mi++) {
+                    var mVal = v.valuesByMode[modeIds[mi]];
+                    try {
+                      var collection = figma.variables.getVariableCollectionById(v.variableCollectionId);
+                      var modeName = collection ? collection.modes.find(function(m) { return m.modeId === modeIds[mi]; }) : null;
+                      var mKey = modeName ? modeName.name : modeIds[mi];
+                      if (typeof mVal === 'object' && mVal.r !== undefined) {
+                        info.modes[mKey] = colorToHex(mVal);
+                      } else if (typeof mVal === 'object' && mVal.id) {
+                        try {
+                          var aliasM = figma.variables.getVariableById(mVal.id);
+                          info.modes[mKey] = aliasM ? aliasM.name : 'alias';
+                        } catch(e3) { info.modes[mKey] = 'alias'; }
+                      } else {
+                        info.modes[mKey] = mVal;
+                      }
+                    } catch(e4) {}
+                  }
+                }
+              } catch(e5) {}
+              vars[prop] = info;
+            }
+          } catch(e) {}
+        });
+      });
+      if (Object.keys(vars).length > 0) spec.variableBindings = vars;
+    }
+
+    // Children summary
+    if (node.children && node.children.length > 0) {
+      spec.childCount = node.children.length;
+      spec.children = node.children.slice(0, 30).map(function(c) {
+        return { name: c.name, type: c.type, w: c.width ? Math.round(c.width) : undefined, h: c.height ? Math.round(c.height) : undefined };
+      });
+    }
+
+    return spec;
+  }
+
+  // Inspect all selected nodes (up to 10)
+  var results = [];
+  var count = Math.min(sel.length, 10);
+  for (var i = 0; i < count; i++) {
+    results.push(inspectNode(sel[i]));
+  }
+  return { count: sel.length, specs: results };
+})()`;
+
+function buildInspectCodeForNode(nodeId) {
+  return INSPECT_CODE.replace(
+    "var sel = figma.currentPage.selection;\n  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select a frame, component, or layer in Figma first.' };",
+    `var targetNode = figma.getNodeById('${nodeId}');\n  if (!targetNode) return { error: 'Node ${nodeId} not found.' };\n  var sel = [targetNode];`
+  );
+}
+
+function parseNodeIdFromLink(url) {
+  const match = url.match(/node-id=([0-9]+-[0-9]+|[0-9]+:[0-9]+|[0-9]+%3A[0-9]+)/i);
+  if (!match) return null;
+  return decodeURIComponent(match[1]).replace('-', ':');
+}
+
+program
+  .command('inspect')
+  .description('Get detailed design specs for the selected element — spacing, colors, typography, effects (all in px and rem)')
+  .option('--json', 'Output raw JSON')
+  .option('--node <id>', 'Inspect a specific node by ID instead of selection')
+  .option('--link <url>', 'Inspect a node from a Figma selection link')
+  .option('--deep', 'Also inspect all children recursively (useful for components)')
+  .addHelpText('after', `
+Examples:
+  fig inspect                       Inspect what you have selected in Figma
+  fig inspect --node "123:456"      Inspect a specific node by ID
+  fig inspect --link "https://..."  Inspect from a Figma selection link
+  fig inspect --deep                Inspect selection + all children
+  fig inspect --json                Output raw JSON for programmatic use
+`)
+  .action(async (options) => {
+    checkConnection();
+    const spinner = ora('Inspecting...').start();
+
+    try {
+      let code = INSPECT_CODE;
+      if (options.link) {
+        const nodeId = parseNodeIdFromLink(options.link);
+        if (!nodeId) {
+          spinner.fail('Could not find a node ID in that link. Copy via right-click → "Copy link to selection" in Figma.');
+          process.exit(1);
+        }
+        code = buildInspectCodeForNode(nodeId);
+      } else if (options.node) {
+        code = buildInspectCodeForNode(options.node);
+      }
+
+      const result = await daemonExec('eval', { code });
+
+      if (result.error) {
+        spinner.fail(result.error);
+        process.exit(1);
+      }
+
+      // If --deep, also inspect all children
+      if (options.deep && result.specs.length > 0 && result.specs[0].children) {
+        spinner.text = 'Inspecting children...';
+        for (const child of result.specs[0].children) {
+          // We need the child's node ID — get it from the parent
+          // Use a separate eval to get child IDs
+        }
+        // Collect child node IDs from the parent
+        const parentName = result.specs[0].name;
+        const childIdsCode = `(function() {
+          var sel = figma.currentPage.selection;
+          var node = sel && sel.length > 0 ? sel[0] : null;
+          ${options.node ? `node = figma.getNodeById('${options.node}');` : ''}
+          ${options.link ? `node = figma.getNodeById('${parseNodeIdFromLink(options.link)}');` : ''}
+          if (!node || !node.children) return [];
+          return node.children.slice(0, 30).map(function(c) { return c.id; });
+        })()`;
+        const childIds = await daemonExec('eval', { code: childIdsCode });
+        if (Array.isArray(childIds)) {
+          for (const cid of childIds) {
+            const childResult = await daemonExec('eval', { code: buildInspectCodeForNode(cid) });
+            if (childResult && childResult.specs) {
+              result.specs.push(...childResult.specs);
+            }
+          }
+        }
+      }
+
+      spinner.succeed(`Inspected ${result.specs.length} element${result.specs.length > 1 ? 's' : ''}`);
+
+      if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+      } else {
+        console.log('');
+        for (const spec of result.specs) {
+          console.log(formatInspectSpec(spec));
+          console.log('');
+        }
+      }
+    } catch (e) {
+      spinner.fail(`Inspect failed: ${e.message}`);
+      process.exit(1);
+    }
+  });
+
+function formatInspectSpec(spec) {
+  const lines = [];
+  const px = (v) => typeof v === 'object' && v.px !== undefined ? v.px : v;
+  const rem = (v) => typeof v === 'object' && v.rem !== undefined ? v.rem : null;
+  const dual = (v) => {
+    if (!v || typeof v !== 'object') return String(v);
+    if (v.px !== undefined && v.rem !== undefined) return `${v.px}px (${v.rem}rem)`;
+    if (v.percent) return v.percent;
+    return String(v);
+  };
+
+  // Header
+  lines.push(chalk.bold(`${spec.name}`) + chalk.gray(` [${spec.type}]`));
+  lines.push(chalk.gray('─'.repeat(50)));
+
+  // Dimensions
+  if (spec.dimensions) {
+    lines.push(chalk.cyan('Dimensions'));
+    lines.push(`  Width:  ${dual(spec.dimensions.width)}`);
+    lines.push(`  Height: ${dual(spec.dimensions.height)}`);
+  }
+
+  // Position
+  if (spec.position) {
+    lines.push(chalk.cyan('Position'));
+    lines.push(`  X: ${dual(spec.position.x)}   Y: ${dual(spec.position.y)}`);
+  }
+
+  // Layout
+  if (spec.layout) {
+    lines.push(chalk.cyan('Layout (Auto Layout)'));
+    lines.push(`  Direction: ${spec.layout.mode}`);
+    lines.push(`  Gap:       ${dual(spec.layout.gap)}`);
+    const p = spec.layout.padding;
+    lines.push(`  Padding:   ${px(p.top)}px ${px(p.right)}px ${px(p.bottom)}px ${px(p.left)}px  (${rem(p.top)}rem ${rem(p.right)}rem ${rem(p.bottom)}rem ${rem(p.left)}rem)`);
+    lines.push(`  Align:     main=${spec.layout.mainAxisAlign}  cross=${spec.layout.crossAxisAlign}`);
+    if (spec.layout.wrap) lines.push(`  Wrap:      yes`);
+  }
+
+  // Border radius
+  if (spec.borderRadius) {
+    lines.push(chalk.cyan('Border Radius'));
+    lines.push(`  ${dual(spec.borderRadius)}`);
+  }
+  if (spec.borderRadiusPerCorner) {
+    lines.push(chalk.cyan('Border Radius (per corner)'));
+    const c = spec.borderRadiusPerCorner;
+    lines.push(`  TL: ${dual(c.topLeft)}  TR: ${dual(c.topRight)}  BR: ${dual(c.bottomRight)}  BL: ${dual(c.bottomLeft)}`);
+  }
+
+  // Fills
+  if (spec.fills && spec.fills.length > 0) {
+    lines.push(chalk.cyan('Fills'));
+    for (const f of spec.fills) {
+      if (f.type === 'SOLID') {
+        lines.push(`  ${f.hex}  ${f.rgba}${f.opacity < 1 ? `  opacity=${f.opacity}` : ''}`);
+      } else if (f.stops) {
+        lines.push(`  ${f.type}: ${f.stops.map(s => `${s.color} @${s.position}`).join(' → ')}`);
+      } else {
+        lines.push(`  ${f.type}`);
+      }
+    }
+  }
+
+  // Strokes
+  if (spec.strokes && spec.strokes.length > 0) {
+    lines.push(chalk.cyan('Strokes'));
+    for (const s of spec.strokes) {
+      let line = `  ${s.type === 'SOLID' ? s.hex : s.type}`;
+      lines.push(line);
+    }
+    if (spec.strokeWeight) lines.push(`  Weight: ${dual(spec.strokeWeight)}  Align: ${spec.strokeAlign || 'inside'}`);
+  }
+
+  // Typography
+  if (spec.typography) {
+    const t = spec.typography;
+    lines.push(chalk.cyan('Typography'));
+    if (t.fontFamily) lines.push(`  Font:           ${t.fontFamily} ${t.fontStyle || ''}`);
+    if (t.fontSize) lines.push(`  Size:           ${dual(t.fontSize)}`);
+    if (t.fontWeight) lines.push(`  Weight:         ${t.fontWeight}`);
+    if (t.lineHeight) lines.push(`  Line height:    ${typeof t.lineHeight === 'string' ? t.lineHeight : dual(t.lineHeight)}`);
+    if (t.letterSpacing) lines.push(`  Letter spacing: ${dual(t.letterSpacing)}`);
+    if (t.textAlign) lines.push(`  Text align:     ${t.textAlign}`);
+    if (t.textDecoration) lines.push(`  Decoration:     ${t.textDecoration}`);
+    if (t.textTransform) lines.push(`  Transform:      ${t.textTransform}`);
+    if (t.content) lines.push(`  Content:        "${t.content.slice(0, 80)}${t.content.length > 80 ? '...' : ''}"`);
+  }
+
+  // Effects
+  if (spec.effects && spec.effects.length > 0) {
+    lines.push(chalk.cyan('Effects'));
+    for (const e of spec.effects) {
+      if (e.type === 'DROP_SHADOW' || e.type === 'INNER_SHADOW') {
+        lines.push(`  ${e.type === 'DROP_SHADOW' ? 'Drop shadow' : 'Inner shadow'}: ${px(e.offset.x)}px ${px(e.offset.y)}px ${px(e.blur)}px ${px(e.spread)}px  ${e.color || ''}`);
+        lines.push(`    → ${rem(e.offset.x)}rem ${rem(e.offset.y)}rem ${rem(e.blur)}rem ${rem(e.spread)}rem`);
+      } else {
+        lines.push(`  ${e.type}: blur ${dual(e.blur)}`);
+      }
+    }
+  }
+
+  // Opacity
+  if (spec.opacity !== undefined) {
+    lines.push(chalk.cyan('Opacity') + `  ${spec.opacity}`);
+  }
+
+  // Variable bindings
+  if (spec.variableBindings) {
+    lines.push(chalk.cyan('Variable Bindings'));
+    for (const [prop, binding] of Object.entries(spec.variableBindings)) {
+      if (typeof binding === 'object' && binding.name) {
+        let line = `  ${prop}: ${binding.name}`;
+        if (binding.value !== undefined) line += ` = ${binding.value}`;
+        if (binding.modes) {
+          const modeStr = Object.entries(binding.modes).map(([m, v]) => `${m}: ${v}`).join(', ');
+          line += `  [${modeStr}]`;
+        }
+        lines.push(line);
+      } else {
+        lines.push(`  ${prop}: ${binding}`);
+      }
+    }
+  }
+
+  // Component
+  if (spec.component) {
+    lines.push(chalk.cyan('Component'));
+    lines.push(`  Name: ${spec.component.name}`);
+    if (spec.component.set) lines.push(`  Set:  ${spec.component.set}`);
+    if (spec.component.isMainComponent) lines.push(`  (Main component definition)`);
+  }
+
+  // Children
+  if (spec.childCount) {
+    lines.push(chalk.cyan(`Children (${spec.childCount})`));
+    for (const c of spec.children) {
+      let line = `  [${c.type}] ${c.name}`;
+      if (c.w && c.h) line += `  ${c.w}x${c.h}`;
+      lines.push(line);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+// ============ CSS — generate CSS from selection ============
+
+const CSS_GEN_CODE = `(function() {
+  var sel = figma.currentPage.selection;
+  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select an element in Figma first.' };
+
+  var BASE = 16;
+  function rem(px) { return parseFloat((px / BASE).toFixed(3)); }
+  function colorHex(c) {
+    var r = Math.round((c.r||0)*255), g = Math.round((c.g||0)*255), b = Math.round((c.b||0)*255);
+    return '#' + r.toString(16).padStart(2,'0') + g.toString(16).padStart(2,'0') + b.toString(16).padStart(2,'0');
+  }
+  function colorRgba(c, a) {
+    var r = Math.round((c.r||0)*255), g = Math.round((c.g||0)*255), b = Math.round((c.b||0)*255);
+    if (a !== undefined && a < 1) return 'rgba(' + r + ',' + g + ',' + b + ',' + parseFloat(a.toFixed(2)) + ')';
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
+  }
+
+  function genCSS(node, unit) {
+    var props = {};
+    var tw = [];
+
+    // Dimensions
+    if (node.width !== undefined) {
+      props['width'] = unit === 'rem' ? rem(node.width) + 'rem' : Math.round(node.width) + 'px';
+      props['height'] = unit === 'rem' ? rem(node.height) + 'rem' : Math.round(node.height) + 'px';
+    }
+
+    // Layout
+    if (node.layoutMode && node.layoutMode !== 'NONE') {
+      props['display'] = 'flex';
+      props['flex-direction'] = node.layoutMode === 'HORIZONTAL' ? 'row' : 'column';
+      if (node.itemSpacing) props['gap'] = unit === 'rem' ? rem(node.itemSpacing) + 'rem' : node.itemSpacing + 'px';
+
+      var pt = node.paddingTop || 0, pr = node.paddingRight || 0, pb = node.paddingBottom || 0, pl = node.paddingLeft || 0;
+      if (pt || pr || pb || pl) {
+        if (pt === pr && pr === pb && pb === pl) {
+          props['padding'] = unit === 'rem' ? rem(pt) + 'rem' : pt + 'px';
+        } else if (pt === pb && pl === pr) {
+          props['padding'] = (unit === 'rem' ? rem(pt) + 'rem ' + rem(pr) + 'rem' : pt + 'px ' + pr + 'px');
+        } else {
+          props['padding'] = unit === 'rem'
+            ? rem(pt) + 'rem ' + rem(pr) + 'rem ' + rem(pb) + 'rem ' + rem(pl) + 'rem'
+            : pt + 'px ' + pr + 'px ' + pb + 'px ' + pl + 'px';
+        }
+      }
+
+      var mainMap = { MIN: 'flex-start', CENTER: 'center', MAX: 'flex-end', SPACE_BETWEEN: 'space-between' };
+      var crossMap = { MIN: 'flex-start', CENTER: 'center', MAX: 'flex-end' };
+      if (node.primaryAxisAlignItems && node.primaryAxisAlignItems !== 'MIN') {
+        props['justify-content'] = mainMap[node.primaryAxisAlignItems] || node.primaryAxisAlignItems;
+      }
+      if (node.counterAxisAlignItems && node.counterAxisAlignItems !== 'MIN') {
+        props['align-items'] = crossMap[node.counterAxisAlignItems] || node.counterAxisAlignItems;
+      }
+      if (node.layoutWrap === 'WRAP') props['flex-wrap'] = 'wrap';
+    }
+
+    // Border radius
+    if (node.cornerRadius && node.cornerRadius !== 0 && typeof node.cornerRadius === 'number') {
+      if (node.cornerRadius >= 9999) {
+        props['border-radius'] = '9999px';
+      } else {
+        props['border-radius'] = unit === 'rem' ? rem(node.cornerRadius) + 'rem' : node.cornerRadius + 'px';
+      }
+    }
+    if (node.topLeftRadius || node.topRightRadius || node.bottomRightRadius || node.bottomLeftRadius) {
+      var tl = node.topLeftRadius||0, tr = node.topRightRadius||0, br = node.bottomRightRadius||0, bl = node.bottomLeftRadius||0;
+      if (tl === tr && tr === br && br === bl) {
+        props['border-radius'] = unit === 'rem' ? rem(tl) + 'rem' : tl + 'px';
+      } else {
+        props['border-radius'] = unit === 'rem'
+          ? rem(tl) + 'rem ' + rem(tr) + 'rem ' + rem(br) + 'rem ' + rem(bl) + 'rem'
+          : tl + 'px ' + tr + 'px ' + br + 'px ' + bl + 'px';
+      }
+    }
+
+    // Fills
+    if (node.fills && node.fills.length > 0) {
+      for (var i = 0; i < node.fills.length; i++) {
+        var f = node.fills[i];
+        if (f.visible === false) continue;
+        if (f.type === 'SOLID' && f.color) {
+          var opacity = f.opacity !== undefined ? f.opacity : 1;
+          props['background-color'] = opacity < 1 ? colorRgba(f.color, opacity) : colorHex(f.color);
+          break;
+        }
+        if (f.type === 'GRADIENT_LINEAR' && f.gradientStops) {
+          var stops = f.gradientStops.map(function(s) { return colorHex(s.color) + ' ' + Math.round(s.position*100) + '%'; });
+          props['background'] = 'linear-gradient(' + stops.join(', ') + ')';
+          break;
+        }
+      }
+    }
+
+    // Strokes
+    if (node.strokes && node.strokes.length > 0) {
+      for (var i = 0; i < node.strokes.length; i++) {
+        var s = node.strokes[i];
+        if (s.visible === false) continue;
+        if (s.type === 'SOLID' && s.color) {
+          var sw = node.strokeWeight || 1;
+          props['border'] = (unit === 'rem' ? rem(sw) + 'rem' : sw + 'px') + ' solid ' + colorHex(s.color);
+          break;
+        }
+      }
+    }
+
+    // Typography
+    if (node.type === 'TEXT') {
+      if (node.fontName && node.fontName !== figma.mixed) {
+        props['font-family'] = "'" + node.fontName.family + "', sans-serif";
+      }
+      if (node.fontSize && node.fontSize !== figma.mixed) {
+        props['font-size'] = unit === 'rem' ? rem(node.fontSize) + 'rem' : node.fontSize + 'px';
+      }
+      if (node.fontName && node.fontName !== figma.mixed && node.fontName.style) {
+        var style = node.fontName.style.toLowerCase();
+        if (style.includes('bold') || style.includes('700')) props['font-weight'] = 'bold';
+        else if (style.includes('semibold') || style.includes('600')) props['font-weight'] = '600';
+        else if (style.includes('medium') || style.includes('500')) props['font-weight'] = '500';
+        else if (style.includes('light') || style.includes('300')) props['font-weight'] = '300';
+        if (style.includes('italic')) props['font-style'] = 'italic';
+      }
+      if (node.lineHeight && node.lineHeight !== figma.mixed) {
+        if (node.lineHeight.unit === 'PIXELS') {
+          props['line-height'] = unit === 'rem' ? rem(node.lineHeight.value) + 'rem' : node.lineHeight.value + 'px';
+        } else if (node.lineHeight.unit === 'PERCENT') {
+          props['line-height'] = (node.lineHeight.value / 100).toFixed(2);
+        }
+      }
+      if (node.letterSpacing && node.letterSpacing !== figma.mixed) {
+        if (node.letterSpacing.unit === 'PIXELS' && node.letterSpacing.value !== 0) {
+          props['letter-spacing'] = unit === 'rem' ? rem(node.letterSpacing.value) + 'rem' : node.letterSpacing.value + 'px';
+        } else if (node.letterSpacing.unit === 'PERCENT' && node.letterSpacing.value !== 0) {
+          props['letter-spacing'] = (node.letterSpacing.value / 100).toFixed(3) + 'em';
+        }
+      }
+      if (node.textAlignHorizontal) {
+        var alignMap = { LEFT: 'left', CENTER: 'center', RIGHT: 'right', JUSTIFIED: 'justify' };
+        if (alignMap[node.textAlignHorizontal] && node.textAlignHorizontal !== 'LEFT') {
+          props['text-align'] = alignMap[node.textAlignHorizontal];
+        }
+      }
+      // Text fill color
+      if (node.fills && node.fills.length > 0) {
+        var tf = node.fills[0];
+        if (tf.type === 'SOLID' && tf.color && tf.visible !== false) {
+          props['color'] = colorHex(tf.color);
+          delete props['background-color'];
+        }
+      }
+    }
+
+    // Effects
+    if (node.effects && node.effects.length > 0) {
+      var shadows = [];
+      for (var i = 0; i < node.effects.length; i++) {
+        var e = node.effects[i];
+        if (e.visible === false) continue;
+        if (e.type === 'DROP_SHADOW') {
+          var ox = unit === 'rem' ? rem(e.offset.x) + 'rem' : e.offset.x + 'px';
+          var oy = unit === 'rem' ? rem(e.offset.y) + 'rem' : e.offset.y + 'px';
+          var bl = unit === 'rem' ? rem(e.radius) + 'rem' : e.radius + 'px';
+          var sp = unit === 'rem' ? rem(e.spread||0) + 'rem' : (e.spread||0) + 'px';
+          shadows.push(ox + ' ' + oy + ' ' + bl + ' ' + sp + ' ' + (e.color ? colorRgba(e.color, e.color.a) : ''));
+        }
+        if (e.type === 'INNER_SHADOW') {
+          var ox = unit === 'rem' ? rem(e.offset.x) + 'rem' : e.offset.x + 'px';
+          var oy = unit === 'rem' ? rem(e.offset.y) + 'rem' : e.offset.y + 'px';
+          var bl = unit === 'rem' ? rem(e.radius) + 'rem' : e.radius + 'px';
+          var sp = unit === 'rem' ? rem(e.spread||0) + 'rem' : (e.spread||0) + 'px';
+          shadows.push('inset ' + ox + ' ' + oy + ' ' + bl + ' ' + sp + ' ' + (e.color ? colorRgba(e.color, e.color.a) : ''));
+        }
+      }
+      if (shadows.length > 0) props['box-shadow'] = shadows.join(', ');
+    }
+
+    // Opacity
+    if (node.opacity !== undefined && node.opacity < 1) {
+      props['opacity'] = parseFloat(node.opacity.toFixed(2));
+    }
+
+    // Overflow
+    if (node.clipsContent) props['overflow'] = 'hidden';
+
+    return { name: node.name, type: node.type, css: props, text: node.type === 'TEXT' ? node.characters : undefined };
+  }
+
+  var results = [];
+  var count = Math.min(sel.length, 10);
+  for (var i = 0; i < count; i++) {
+    results.push(genCSS(sel[i], 'rem'));
+  }
+  return { count: sel.length, nodes: results };
+})()`;
+
+program
+  .command('css')
+  .description('Generate CSS from the selected element — ready to paste into your codebase')
+  .option('--px', 'Use px units instead of rem (default: rem)')
+  .option('--tailwind', 'Output Tailwind classes instead of CSS')
+  .option('--json', 'Output raw JSON')
+  .option('--node <id>', 'Target a specific node by ID')
+  .option('--link <url>', 'Target a node from a Figma selection link')
+  .addHelpText('after', `
+Examples:
+  fig css                     CSS for current selection (rem units)
+  fig css --px                CSS in px units
+  fig css --tailwind          Tailwind classes
+  fig css --link "https://..."  CSS from a Figma link
+`)
+  .action(async (options) => {
+    checkConnection();
+    const spinner = ora('Generating CSS...').start();
+
+    try {
+      let code = CSS_GEN_CODE;
+      const unit = options.px ? 'px' : 'rem';
+      code = code.replace("genCSS(sel[i], 'rem')", `genCSS(sel[i], '${unit}')`);
+
+      if (options.link) {
+        const nodeId = parseNodeIdFromLink(options.link);
+        if (!nodeId) { spinner.fail('Could not find a node ID in that link.'); process.exit(1); }
+        code = code.replace(
+          "var sel = figma.currentPage.selection;\n  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select an element in Figma first.' };",
+          `var n = figma.getNodeById('${nodeId}'); if (!n) return { error: 'Node not found.' }; var sel = [n];`
+        );
+      } else if (options.node) {
+        code = code.replace(
+          "var sel = figma.currentPage.selection;\n  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select an element in Figma first.' };",
+          `var n = figma.getNodeById('${options.node}'); if (!n) return { error: 'Node not found.' }; var sel = [n];`
+        );
+      }
+
+      const result = await daemonExec('eval', { code });
+
+      if (result.error) { spinner.fail(result.error); process.exit(1); }
+
+      spinner.succeed(`Generated CSS for ${result.nodes.length} element${result.nodes.length > 1 ? 's' : ''}`);
+      console.log('');
+
+      if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+
+      for (const node of result.nodes) {
+        if (options.tailwind) {
+          console.log(formatTailwind(node));
+        } else {
+          console.log(formatCSS(node));
+        }
+        console.log('');
+      }
+    } catch (e) {
+      spinner.fail(`CSS generation failed: ${e.message}`);
+      process.exit(1);
+    }
+  });
+
+function formatCSS(node) {
+  const lines = [];
+  const className = node.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+  lines.push(chalk.gray(`/* ${node.name} [${node.type}] */`));
+  lines.push(`.${className} {`);
+  for (const [prop, val] of Object.entries(node.css)) {
+    lines.push(`  ${prop}: ${val};`);
+  }
+  lines.push('}');
+  if (node.text) {
+    lines.push(chalk.gray(`/* Content: "${node.text.slice(0, 60)}${node.text.length > 60 ? '...' : ''}" */`));
+  }
+  return lines.join('\n');
+}
+
+function formatTailwind(node) {
+  const css = node.css;
+  const classes = [];
+
+  // Width/height
+  if (css['width']) classes.push(`w-[${css['width']}]`);
+  if (css['height']) classes.push(`h-[${css['height']}]`);
+
+  // Display + flex
+  if (css['display'] === 'flex') {
+    classes.push('flex');
+    if (css['flex-direction'] === 'column') classes.push('flex-col');
+    if (css['flex-wrap'] === 'wrap') classes.push('flex-wrap');
+  }
+
+  // Gap
+  if (css['gap']) classes.push(`gap-[${css['gap']}]`);
+
+  // Padding
+  if (css['padding']) {
+    const parts = css['padding'].split(' ');
+    if (parts.length === 1) classes.push(`p-[${parts[0]}]`);
+    else if (parts.length === 2) { classes.push(`py-[${parts[0]}]`); classes.push(`px-[${parts[1]}]`); }
+    else if (parts.length === 4) { classes.push(`pt-[${parts[0]}]`); classes.push(`pr-[${parts[1]}]`); classes.push(`pb-[${parts[2]}]`); classes.push(`pl-[${parts[3]}]`); }
+  }
+
+  // Alignment
+  if (css['justify-content']) {
+    const map = { 'flex-start': 'justify-start', 'center': 'justify-center', 'flex-end': 'justify-end', 'space-between': 'justify-between' };
+    classes.push(map[css['justify-content']] || `justify-[${css['justify-content']}]`);
+  }
+  if (css['align-items']) {
+    const map = { 'flex-start': 'items-start', 'center': 'items-center', 'flex-end': 'items-end' };
+    classes.push(map[css['align-items']] || `items-[${css['align-items']}]`);
+  }
+
+  // Border radius
+  if (css['border-radius']) {
+    if (css['border-radius'] === '9999px') classes.push('rounded-full');
+    else classes.push(`rounded-[${css['border-radius']}]`);
+  }
+
+  // Background
+  if (css['background-color']) classes.push(`bg-[${css['background-color']}]`);
+
+  // Border
+  if (css['border']) classes.push(`border-[${css['border'].split(' solid ')[0]}]`, `border-[${css['border'].split(' solid ')[1] || ''}]`);
+
+  // Typography
+  if (css['font-size']) classes.push(`text-[${css['font-size']}]`);
+  if (css['font-weight']) {
+    const map = { 'bold': 'font-bold', '600': 'font-semibold', '500': 'font-medium', '300': 'font-light' };
+    classes.push(map[css['font-weight']] || `font-[${css['font-weight']}]`);
+  }
+  if (css['font-style'] === 'italic') classes.push('italic');
+  if (css['line-height']) classes.push(`leading-[${css['line-height']}]`);
+  if (css['letter-spacing']) classes.push(`tracking-[${css['letter-spacing']}]`);
+  if (css['text-align']) {
+    const map = { 'center': 'text-center', 'right': 'text-right', 'justify': 'text-justify' };
+    classes.push(map[css['text-align']] || `text-${css['text-align']}`);
+  }
+  if (css['color']) classes.push(`text-[${css['color']}]`);
+
+  // Shadow
+  if (css['box-shadow']) classes.push(`shadow-[${css['box-shadow'].replace(/\s+/g, '_')}]`);
+
+  // Opacity
+  if (css['opacity']) classes.push(`opacity-[${css['opacity']}]`);
+
+  // Overflow
+  if (css['overflow'] === 'hidden') classes.push('overflow-hidden');
+
+  const lines = [];
+  lines.push(chalk.gray(`{/* ${node.name} */}`));
+  lines.push(`className="${classes.join(' ')}"`);
+  if (node.text) lines.push(chalk.gray(`{/* "${node.text.slice(0, 60)}${node.text.length > 60 ? '...' : ''}" */}`));
+  return lines.join('\n');
+}
+
+// ============ MEASURE — spacing between elements ============
+
+program
+  .command('measure')
+  .description('Measure spacing between two selected elements — select exactly 2 layers in Figma')
+  .option('--json', 'Output raw JSON')
+  .action(async (options) => {
+    checkConnection();
+    const spinner = ora('Measuring spacing...').start();
+
+    try {
+      const code = `(function() {
+        var sel = figma.currentPage.selection;
+        if (!sel || sel.length < 2) return { error: 'Select exactly 2 elements in Figma to measure the spacing between them.' };
+        var a = sel[0], b = sel[1];
+        var BASE = 16;
+        function rem(px) { return parseFloat((px / BASE).toFixed(3)); }
+
+        var ax = a.absoluteTransform ? a.absoluteTransform[0][2] : a.x;
+        var ay = a.absoluteTransform ? a.absoluteTransform[1][2] : a.y;
+        var bx = b.absoluteTransform ? b.absoluteTransform[0][2] : b.x;
+        var by = b.absoluteTransform ? b.absoluteTransform[1][2] : b.y;
+        var aw = a.width, ah = a.height;
+        var bw = b.width, bh = b.height;
+
+        var hGap = 0, vGap = 0;
+        // Horizontal gap
+        if (bx >= ax + aw) hGap = bx - (ax + aw);
+        else if (ax >= bx + bw) hGap = ax - (bx + bw);
+        // Vertical gap
+        if (by >= ay + ah) vGap = by - (ay + ah);
+        else if (ay >= by + bh) vGap = ay - (by + bh);
+
+        return {
+          a: { name: a.name, x: Math.round(ax), y: Math.round(ay), w: Math.round(aw), h: Math.round(ah) },
+          b: { name: b.name, x: Math.round(bx), y: Math.round(by), w: Math.round(bw), h: Math.round(bh) },
+          spacing: {
+            horizontal: { px: Math.round(hGap), rem: rem(hGap) },
+            vertical: { px: Math.round(vGap), rem: rem(vGap) }
+          },
+          centerDistance: {
+            x: { px: Math.round(Math.abs((bx + bw/2) - (ax + aw/2))), rem: rem(Math.abs((bx + bw/2) - (ax + aw/2))) },
+            y: { px: Math.round(Math.abs((by + bh/2) - (ay + ah/2))), rem: rem(Math.abs((by + bh/2) - (ay + ah/2))) }
+          }
+        };
+      })()`;
+
+      const result = await daemonExec('eval', { code });
+      if (result.error) { spinner.fail(result.error); process.exit(1); }
+
+      spinner.succeed(`Measured: "${result.a.name}" ↔ "${result.b.name}"`);
+
+      if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+      } else {
+        console.log('');
+        console.log(chalk.bold(`${result.a.name}`) + chalk.gray(` (${result.a.w}x${result.a.h})`));
+        console.log(chalk.gray('  ↕'));
+        console.log(chalk.bold(`${result.b.name}`) + chalk.gray(` (${result.b.w}x${result.b.h})`));
+        console.log('');
+        console.log(chalk.cyan('Spacing'));
+        console.log(`  Horizontal: ${result.spacing.horizontal.px}px (${result.spacing.horizontal.rem}rem)`);
+        console.log(`  Vertical:   ${result.spacing.vertical.px}px (${result.spacing.vertical.rem}rem)`);
+        console.log(chalk.cyan('Center-to-center'));
+        console.log(`  X: ${result.centerDistance.x.px}px (${result.centerDistance.x.rem}rem)`);
+        console.log(`  Y: ${result.centerDistance.y.px}px (${result.centerDistance.y.rem}rem)`);
+      }
+    } catch (e) {
+      spinner.fail(`Measure failed: ${e.message}`);
+      process.exit(1);
+    }
+  });
+
+// ============ STYLES — extract unique styles from a frame ============
+
+program
+  .command('styles [frameName]')
+  .description('Extract all unique text styles, colors, and spacing values from a frame — a mini style guide')
+  .option('--json', 'Output raw JSON')
+  .option('--selection', 'Extract styles from current selection instead of a named frame')
+  .option('--link <url>', 'Extract styles from a Figma selection link')
+  .addHelpText('after', `
+Examples:
+  fig styles "Login Screen"    All text styles, colors, spacing in that frame
+  fig styles --selection       Styles from the current selection
+  fig styles --json            Raw JSON output
+`)
+  .action(async (frameName, options) => {
+    checkConnection();
+    const spinner = ora('Extracting styles...').start();
+
+    try {
+      let nodeSelector;
+      if (options.selection) {
+        nodeSelector = `var sel = figma.currentPage.selection; if (!sel || sel.length === 0) return { error: 'Nothing selected.' }; var root = sel[0];`;
+      } else if (options.link) {
+        const nodeId = parseNodeIdFromLink(options.link);
+        if (!nodeId) { spinner.fail('Could not find a node ID in that link.'); process.exit(1); }
+        nodeSelector = `var root = figma.getNodeById('${nodeId}'); if (!root) return { error: 'Node not found.' };`;
+      } else if (frameName) {
+        nodeSelector = `var frames = figma.currentPage.children.filter(function(n) { return n.name.toLowerCase().includes('${frameName.toLowerCase()}'); }); if (frames.length === 0) return { error: 'Frame "${frameName}" not found.' }; var root = frames[0];`;
+      } else {
+        nodeSelector = `var sel = figma.currentPage.selection; if (!sel || sel.length === 0) return { error: 'Select an element or specify a frame name.' }; var root = sel[0];`;
+      }
+
+      const code = `(function() {
+        ${nodeSelector}
+        var BASE = 16;
+        function rem(px) { return parseFloat((px / BASE).toFixed(3)); }
+        function colorHex(c) {
+          var r = Math.round((c.r||0)*255), g = Math.round((c.g||0)*255), b = Math.round((c.b||0)*255);
+          return '#' + r.toString(16).padStart(2,'0') + g.toString(16).padStart(2,'0') + b.toString(16).padStart(2,'0');
+        }
+
+        var textStyles = {};
+        var colors = {};
+        var spacingValues = {};
+        var radiusValues = {};
+
+        function walk(node) {
+          // Colors from fills
+          if (node.fills && node.fills.length > 0) {
+            for (var i = 0; i < node.fills.length; i++) {
+              var f = node.fills[i];
+              if (f.visible === false) continue;
+              if (f.type === 'SOLID' && f.color) {
+                var hex = colorHex(f.color);
+                if (!colors[hex]) colors[hex] = { count: 0, usedBy: [] };
+                colors[hex].count++;
+                if (colors[hex].usedBy.length < 3) colors[hex].usedBy.push(node.name);
+              }
+            }
+          }
+
+          // Colors from strokes
+          if (node.strokes && node.strokes.length > 0) {
+            for (var i = 0; i < node.strokes.length; i++) {
+              var s = node.strokes[i];
+              if (s.visible === false) continue;
+              if (s.type === 'SOLID' && s.color) {
+                var hex = colorHex(s.color);
+                if (!colors[hex]) colors[hex] = { count: 0, usedBy: [] };
+                colors[hex].count++;
+              }
+            }
+          }
+
+          // Typography
+          if (node.type === 'TEXT') {
+            var family = (node.fontName && node.fontName !== figma.mixed) ? node.fontName.family : 'mixed';
+            var style = (node.fontName && node.fontName !== figma.mixed) ? node.fontName.style : '';
+            var size = (node.fontSize && node.fontSize !== figma.mixed) ? node.fontSize : 0;
+            var lh = '';
+            if (node.lineHeight && node.lineHeight !== figma.mixed) {
+              if (node.lineHeight.unit === 'PIXELS') lh = node.lineHeight.value + 'px';
+              else if (node.lineHeight.unit === 'PERCENT') lh = node.lineHeight.value + '%';
+              else lh = 'auto';
+            }
+            var key = family + '/' + style + '/' + size;
+            if (!textStyles[key]) {
+              textStyles[key] = { fontFamily: family, fontStyle: style, fontSize: size, lineHeight: lh, count: 0 };
+            }
+            textStyles[key].count++;
+          }
+
+          // Spacing (gap, padding)
+          if (node.layoutMode && node.layoutMode !== 'NONE') {
+            if (node.itemSpacing) {
+              var g = Math.round(node.itemSpacing);
+              spacingValues[g + 'px'] = (spacingValues[g + 'px'] || 0) + 1;
+            }
+            var sides = [node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft];
+            sides.forEach(function(v) {
+              if (v && v > 0) {
+                var k = Math.round(v) + 'px';
+                spacingValues[k] = (spacingValues[k] || 0) + 1;
+              }
+            });
+          }
+
+          // Radius
+          if (node.cornerRadius && node.cornerRadius !== 0 && typeof node.cornerRadius === 'number') {
+            var rk = node.cornerRadius >= 9999 ? 'full' : Math.round(node.cornerRadius) + 'px';
+            radiusValues[rk] = (radiusValues[rk] || 0) + 1;
+          }
+
+          if (node.children) {
+            for (var i = 0; i < node.children.length; i++) walk(node.children[i]);
+          }
+        }
+        walk(root);
+
+        return {
+          name: root.name,
+          textStyles: Object.values(textStyles).sort(function(a,b) { return b.count - a.count; }),
+          colors: Object.keys(colors).map(function(hex) { return { hex: hex, count: colors[hex].count, usedBy: colors[hex].usedBy }; }).sort(function(a,b) { return b.count - a.count; }),
+          spacing: Object.keys(spacingValues).map(function(k) { var px = parseInt(k); return { value: k, rem: rem(px) + 'rem', count: spacingValues[k] }; }).sort(function(a,b) { return parseInt(a.value) - parseInt(b.value); }),
+          radii: Object.keys(radiusValues).map(function(k) { var px = k === 'full' ? 9999 : parseInt(k); return { value: k, rem: k === 'full' ? 'full' : rem(px) + 'rem', count: radiusValues[k] }; }).sort(function(a,b) { return parseInt(a.value) - parseInt(b.value); })
+        };
+      })()`;
+
+      const result = await daemonExec('eval', { code });
+      if (result.error) { spinner.fail(result.error); process.exit(1); }
+
+      spinner.succeed(`Styles extracted from "${result.name}"`);
+
+      if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+
+      console.log('');
+      // Text styles
+      if (result.textStyles.length > 0) {
+        console.log(chalk.cyan.bold(`Typography (${result.textStyles.length} styles)`));
+        for (const t of result.textStyles) {
+          let line = `  ${t.fontFamily} ${t.fontStyle}  ${t.fontSize}px (${(t.fontSize/16).toFixed(3)}rem)`;
+          if (t.lineHeight) line += `  line-height: ${t.lineHeight}`;
+          line += chalk.gray(`  ×${t.count}`);
+          console.log(line);
+        }
+        console.log('');
+      }
+
+      // Colors
+      if (result.colors.length > 0) {
+        console.log(chalk.cyan.bold(`Colors (${result.colors.length} unique)`));
+        for (const c of result.colors) {
+          let line = `  ${c.hex}`;
+          if (c.usedBy.length > 0) line += chalk.gray(`  used by: ${c.usedBy.join(', ')}`);
+          line += chalk.gray(`  ×${c.count}`);
+          console.log(line);
+        }
+        console.log('');
+      }
+
+      // Spacing scale
+      if (result.spacing.length > 0) {
+        console.log(chalk.cyan.bold(`Spacing scale (${result.spacing.length} values)`));
+        for (const s of result.spacing) {
+          console.log(`  ${s.value.padEnd(8)} ${s.rem.padEnd(10)}` + chalk.gray(`×${s.count}`));
+        }
+        console.log('');
+      }
+
+      // Radii
+      if (result.radii.length > 0) {
+        console.log(chalk.cyan.bold(`Border radii (${result.radii.length} values)`));
+        for (const r of result.radii) {
+          console.log(`  ${r.value.padEnd(8)} ${r.rem.padEnd(10)}` + chalk.gray(`×${r.count}`));
+        }
+      }
+    } catch (e) {
+      spinner.fail(`Styles extraction failed: ${e.message}`);
+      process.exit(1);
+    }
+  });
+
+// ============ DOCUMENT — deep component documentation ============
+
+const DOCUMENT_CODE = `(function() {
+  var BASE = 16;
+  function toRem(px) { return parseFloat((px / BASE).toFixed(3)); }
+  function dual(px) { return { px: Math.round(px), rem: toRem(px) }; }
+  function colorToHex(c) {
+    var r = Math.round((c.r||0)*255), g = Math.round((c.g||0)*255), b = Math.round((c.b||0)*255);
+    return '#' + r.toString(16).padStart(2,'0') + g.toString(16).padStart(2,'0') + b.toString(16).padStart(2,'0');
+  }
+  function colorToRgba(c, opacity) {
+    var r = Math.round((c.r||0)*255), g = Math.round((c.g||0)*255), b = Math.round((c.b||0)*255);
+    if (opacity !== undefined && opacity < 1) return 'rgba(' + r + ',' + g + ',' + b + ',' + parseFloat(opacity.toFixed(2)) + ')';
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
+  }
+
+  function extractNode(node, depth) {
+    if (depth > 15) return null;
+    var n = { name: node.name, type: node.type };
+
+    // Dimensions
+    if (node.width !== undefined) {
+      n.width = dual(node.width);
+      n.height = dual(node.height);
+    }
+
+    // Visibility & opacity
+    if (node.visible === false) n.visible = false;
+    if (node.opacity !== undefined && node.opacity < 1) n.opacity = parseFloat(node.opacity.toFixed(2));
+
+    // Auto layout
+    if (node.layoutMode && node.layoutMode !== 'NONE') {
+      n.layout = {
+        direction: node.layoutMode === 'HORIZONTAL' ? 'row' : 'column',
+        gap: dual(node.itemSpacing || 0),
+        padding: {
+          top: dual(node.paddingTop || 0),
+          right: dual(node.paddingRight || 0),
+          bottom: dual(node.paddingBottom || 0),
+          left: dual(node.paddingLeft || 0)
+        },
+        mainAxisAlign: node.primaryAxisAlignItems || 'MIN',
+        crossAxisAlign: node.counterAxisAlignItems || 'MIN'
+      };
+      if (node.layoutWrap === 'WRAP') n.layout.wrap = true;
+      if (node.primaryAxisSizingMode) n.layout.mainAxisSizing = node.primaryAxisSizingMode;
+      if (node.counterAxisSizingMode) n.layout.crossAxisSizing = node.counterAxisSizingMode;
+    }
+
+    // Sizing behavior
+    if (node.layoutSizingHorizontal) n.horizontalSizing = node.layoutSizingHorizontal;
+    if (node.layoutSizingVertical) n.verticalSizing = node.layoutSizingVertical;
+
+    // Corner radius
+    if (node.cornerRadius !== undefined && node.cornerRadius !== 0 && typeof node.cornerRadius === 'number') {
+      n.borderRadius = dual(node.cornerRadius);
+    } else if (node.topLeftRadius || node.topRightRadius || node.bottomRightRadius || node.bottomLeftRadius) {
+      n.borderRadius = {
+        topLeft: dual(node.topLeftRadius || 0),
+        topRight: dual(node.topRightRadius || 0),
+        bottomRight: dual(node.bottomRightRadius || 0),
+        bottomLeft: dual(node.bottomLeftRadius || 0)
+      };
+    }
+
+    // Fills
+    if (node.fills && node.fills.length > 0) {
+      n.fills = [];
+      for (var i = 0; i < node.fills.length; i++) {
+        var f = node.fills[i];
+        if (f.visible === false) continue;
+        var fill = { type: f.type };
+        if (f.type === 'SOLID' && f.color) {
+          fill.hex = colorToHex(f.color);
+          fill.rgba = colorToRgba(f.color, f.opacity);
+          if (f.opacity !== undefined && f.opacity < 1) fill.opacity = parseFloat(f.opacity.toFixed(2));
+        }
+        if (f.type === 'GRADIENT_LINEAR' || f.type === 'GRADIENT_RADIAL') {
+          fill.stops = f.gradientStops ? f.gradientStops.map(function(s) {
+            return { color: colorToHex(s.color), position: parseFloat(s.position.toFixed(2)) };
+          }) : [];
+        }
+        if (f.type === 'IMAGE') fill.scaleMode = f.scaleMode;
+        n.fills.push(fill);
+      }
+      if (n.fills.length === 0) delete n.fills;
+    }
+
+    // Strokes
+    if (node.strokes && node.strokes.length > 0) {
+      n.strokes = [];
+      for (var i = 0; i < node.strokes.length; i++) {
+        var s = node.strokes[i];
+        if (s.visible === false) continue;
+        var stroke = { type: s.type };
+        if (s.type === 'SOLID' && s.color) {
+          stroke.hex = colorToHex(s.color);
+          stroke.rgba = colorToRgba(s.color, s.opacity);
+        }
+        n.strokes.push(stroke);
+      }
+      if (n.strokes.length === 0) delete n.strokes;
+      if (node.strokeWeight) n.strokeWeight = dual(node.strokeWeight);
+      if (node.strokeAlign) n.strokeAlign = node.strokeAlign;
+    }
+
+    // Typography
+    if (node.type === 'TEXT') {
+      n.text = { content: node.characters };
+      if (node.fontName && node.fontName !== figma.mixed) {
+        n.text.fontFamily = node.fontName.family;
+        n.text.fontStyle = node.fontName.style;
+      }
+      if (node.fontSize && node.fontSize !== figma.mixed) n.text.fontSize = dual(node.fontSize);
+      if (node.fontWeight && node.fontWeight !== figma.mixed) n.text.fontWeight = node.fontWeight;
+      if (node.lineHeight && node.lineHeight !== figma.mixed) {
+        if (node.lineHeight.unit === 'PIXELS') n.text.lineHeight = dual(node.lineHeight.value);
+        else if (node.lineHeight.unit === 'PERCENT') n.text.lineHeight = node.lineHeight.value + '%';
+        else n.text.lineHeight = 'auto';
+      }
+      if (node.letterSpacing && node.letterSpacing !== figma.mixed) {
+        if (node.letterSpacing.unit === 'PIXELS') n.text.letterSpacing = dual(node.letterSpacing.value);
+        else if (node.letterSpacing.unit === 'PERCENT') n.text.letterSpacing = node.letterSpacing.value + '%';
+      }
+      if (node.textAlignHorizontal) n.text.textAlign = node.textAlignHorizontal.toLowerCase();
+      if (node.textDecoration && node.textDecoration !== 'NONE' && node.textDecoration !== figma.mixed) {
+        n.text.textDecoration = node.textDecoration.toLowerCase();
+      }
+      if (node.textCase && node.textCase !== 'ORIGINAL' && node.textCase !== figma.mixed) {
+        n.text.textTransform = node.textCase.toLowerCase();
+      }
+    }
+
+    // Effects
+    if (node.effects && node.effects.length > 0) {
+      n.effects = [];
+      for (var i = 0; i < node.effects.length; i++) {
+        var e = node.effects[i];
+        if (e.visible === false) continue;
+        var eff = { type: e.type };
+        if (e.type === 'DROP_SHADOW' || e.type === 'INNER_SHADOW') {
+          eff.x = dual(e.offset.x); eff.y = dual(e.offset.y);
+          eff.blur = dual(e.radius); eff.spread = dual(e.spread || 0);
+          if (e.color) eff.color = colorToRgba(e.color, e.color.a);
+        }
+        if (e.type === 'LAYER_BLUR' || e.type === 'BACKGROUND_BLUR') {
+          eff.blur = dual(e.radius);
+        }
+        n.effects.push(eff);
+      }
+      if (n.effects.length === 0) delete n.effects;
+    }
+
+    // Constraints
+    if (node.constraints) {
+      n.constraints = { horizontal: node.constraints.horizontal, vertical: node.constraints.vertical };
+    }
+
+    // Clip content
+    if (node.clipsContent) n.clipsContent = true;
+
+    // Component info
+    if (node.type === 'INSTANCE' && node.mainComponent) {
+      n.component = { name: node.mainComponent.name, id: node.mainComponent.id };
+      if (node.mainComponent.parent && node.mainComponent.parent.type === 'COMPONENT_SET') {
+        n.component.set = node.mainComponent.parent.name;
+      }
+      // Overridden properties
+      try {
+        var overrides = node.overrides;
+        if (overrides && overrides.length > 0) {
+          n.component.overrideCount = overrides.length;
+        }
+      } catch(e) {}
+    }
+    if (node.type === 'COMPONENT') {
+      n.component = { name: node.name, id: node.id, isDefinition: true };
+      if (node.description) n.component.description = node.description;
+    }
+
+    // Variable bindings
+    if (node.boundVariables) {
+      var vars = {};
+      var bindings = node.boundVariables;
+      Object.keys(bindings).forEach(function(prop) {
+        var binding = bindings[prop];
+        if (!binding) return;
+        var entries = Array.isArray(binding) ? binding : [binding];
+        entries.forEach(function(b) {
+          if (!b || !b.id) return;
+          try {
+            var v = figma.variables.getVariableById(b.id);
+            if (v) {
+              var info = { name: v.name };
+              try {
+                var modeIds = Object.keys(v.valuesByMode);
+                if (modeIds.length > 0) {
+                  var val = v.valuesByMode[modeIds[0]];
+                  if (val !== undefined) {
+                    if (typeof val === 'object' && val.r !== undefined) {
+                      info.value = colorToHex(val);
+                    } else if (typeof val === 'object' && val.id) {
+                      try {
+                        var alias = figma.variables.getVariableById(val.id);
+                        if (alias) info.value = alias.name + ' (alias)';
+                      } catch(e2) { info.value = 'alias'; }
+                    } else {
+                      info.value = val;
+                    }
+                  }
+                }
+                if (modeIds.length > 1) {
+                  info.modes = {};
+                  for (var mi = 0; mi < modeIds.length; mi++) {
+                    var mVal = v.valuesByMode[modeIds[mi]];
+                    try {
+                      var collection = figma.variables.getVariableCollectionById(v.variableCollectionId);
+                      var modeName = collection ? collection.modes.find(function(m) { return m.modeId === modeIds[mi]; }) : null;
+                      var mKey = modeName ? modeName.name : modeIds[mi];
+                      if (typeof mVal === 'object' && mVal.r !== undefined) {
+                        info.modes[mKey] = colorToHex(mVal);
+                      } else if (typeof mVal === 'object' && mVal.id) {
+                        try {
+                          var aliasM = figma.variables.getVariableById(mVal.id);
+                          info.modes[mKey] = aliasM ? aliasM.name : 'alias';
+                        } catch(e3) { info.modes[mKey] = 'alias'; }
+                      } else {
+                        info.modes[mKey] = mVal;
+                      }
+                    } catch(e4) {}
+                  }
+                }
+              } catch(e5) {}
+              vars[prop] = info;
+            }
+          } catch(e) {}
+        });
+      });
+      if (Object.keys(vars).length > 0) n.variables = vars;
+    }
+
+    // Children — recurse
+    if (node.children && node.children.length > 0) {
+      n.children = [];
+      for (var i = 0; i < node.children.length; i++) {
+        var child = extractNode(node.children[i], depth + 1);
+        if (child) n.children.push(child);
+      }
+    }
+
+    return n;
+  }
+
+  // Collect unique tokens used across the tree
+  function collectTokens(tree) {
+    var colors = {};
+    var fonts = {};
+    var spacings = {};
+    var radii = {};
+    var shadows = {};
+
+    function walk(n) {
+      // Colors from fills
+      if (n.fills) n.fills.forEach(function(f) {
+        if (f.hex) colors[f.hex] = (colors[f.hex] || 0) + 1;
+      });
+      // Colors from strokes
+      if (n.strokes) n.strokes.forEach(function(s) {
+        if (s.hex) colors[s.hex] = (colors[s.hex] || 0) + 1;
+      });
+      // Typography
+      if (n.text) {
+        if (n.text.fontFamily) {
+          var key = n.text.fontFamily + ' ' + (n.text.fontStyle || 'Regular');
+          if (n.text.fontSize) key += ' / ' + n.text.fontSize.px + 'px';
+          fonts[key] = (fonts[key] || 0) + 1;
+        }
+      }
+      // Spacing from layout
+      if (n.layout) {
+        if (n.layout.gap && n.layout.gap.px > 0) spacings[n.layout.gap.px + 'px'] = (spacings[n.layout.gap.px + 'px'] || 0) + 1;
+        if (n.layout.padding) {
+          var p = n.layout.padding;
+          [p.top, p.right, p.bottom, p.left].forEach(function(v) {
+            if (v && v.px > 0) spacings[v.px + 'px'] = (spacings[v.px + 'px'] || 0) + 1;
+          });
+        }
+      }
+      // Radii
+      if (n.borderRadius) {
+        if (n.borderRadius.px !== undefined) {
+          radii[n.borderRadius.px + 'px'] = (radii[n.borderRadius.px + 'px'] || 0) + 1;
+        } else {
+          [n.borderRadius.topLeft, n.borderRadius.topRight, n.borderRadius.bottomRight, n.borderRadius.bottomLeft].forEach(function(v) {
+            if (v && v.px > 0) radii[v.px + 'px'] = (radii[v.px + 'px'] || 0) + 1;
+          });
+        }
+      }
+      // Shadows
+      if (n.effects) n.effects.forEach(function(e) {
+        if (e.type === 'DROP_SHADOW' || e.type === 'INNER_SHADOW') {
+          var key = e.x.px + 'px ' + e.y.px + 'px ' + e.blur.px + 'px ' + e.spread.px + 'px ' + (e.color || '');
+          shadows[key] = (shadows[key] || 0) + 1;
+        }
+      });
+      // Recurse
+      if (n.children) n.children.forEach(walk);
+    }
+    walk(tree);
+
+    return {
+      colors: Object.keys(colors).sort(function(a,b) { return colors[b] - colors[a]; }).map(function(c) { return { value: c, count: colors[c] }; }),
+      typography: Object.keys(fonts).sort(function(a,b) { return fonts[b] - fonts[a]; }).map(function(f) { return { value: f, count: fonts[f] }; }),
+      spacing: Object.keys(spacings).sort(function(a,b) { return parseInt(a) - parseInt(b); }).map(function(s) { return { value: s, rem: toRem(parseInt(s)) + 'rem', count: spacings[s] }; }),
+      radii: Object.keys(radii).sort(function(a,b) { return parseInt(a) - parseInt(b); }).map(function(r) { return { value: r, rem: toRem(parseInt(r)) + 'rem', count: radii[r] }; }),
+      shadows: Object.keys(shadows).map(function(s) { return { value: s, count: shadows[s] }; })
+    };
+  }
+
+  // Count total nodes
+  function countNodes(n) {
+    var c = 1;
+    if (n.children) n.children.forEach(function(ch) { c += countNodes(ch); });
+    return c;
+  }
+
+  __TARGET_SELECTOR__
+
+  var tree = extractNode(node, 0);
+  var tokens = collectTokens(tree);
+  var total = countNodes(tree);
+
+  return {
+    summary: {
+      name: node.name,
+      type: node.type,
+      totalNodes: total,
+      width: node.width ? Math.round(node.width) : undefined,
+      height: node.height ? Math.round(node.height) : undefined,
+      isComponent: node.type === 'COMPONENT' || node.type === 'COMPONENT_SET',
+      isInstance: node.type === 'INSTANCE'
+    },
+    tokens: tokens,
+    tree: tree
+  };
+})()`;
+
+function buildDocumentCode(target) {
+  if (target === 'selection') {
+    return DOCUMENT_CODE.replace('__TARGET_SELECTOR__',
+      "var sel = figma.currentPage.selection;\n  if (!sel || sel.length === 0) return { error: 'Nothing selected. Select a component or frame in Figma first.' };\n  var node = sel[0];"
+    );
+  }
+  // target is a node ID
+  return DOCUMENT_CODE.replace('__TARGET_SELECTOR__',
+    `var node = figma.getNodeById('${target}');\n  if (!node) return { error: 'Node ${target} not found.' };`
+  );
+}
+
+function formatDocument(doc) {
+  const lines = [];
+
+  // Header
+  lines.push(chalk.bold.underline(`Component Documentation: ${doc.summary.name}`));
+  lines.push('');
+
+  // Summary
+  lines.push(chalk.bold('Overview'));
+  lines.push(`  Type:        ${doc.summary.type}`);
+  lines.push(`  Size:        ${doc.summary.width}×${doc.summary.height}px`);
+  lines.push(`  Total nodes: ${doc.summary.totalNodes}`);
+  if (doc.summary.isComponent) lines.push(`  Role:        Component definition`);
+  if (doc.summary.isInstance) lines.push(`  Role:        Component instance`);
+  lines.push('');
+
+  // Design tokens summary
+  lines.push(chalk.bold('Design Tokens'));
+  lines.push('');
+
+  if (doc.tokens.colors.length > 0) {
+    lines.push(chalk.cyan('  Colors'));
+    for (const c of doc.tokens.colors) {
+      lines.push(`    ${c.value}  (used ${c.count}×)`);
+    }
+  }
+
+  if (doc.tokens.typography.length > 0) {
+    lines.push(chalk.cyan('  Typography'));
+    for (const t of doc.tokens.typography) {
+      lines.push(`    ${t.value}  (${t.count}×)`);
+    }
+  }
+
+  if (doc.tokens.spacing.length > 0) {
+    lines.push(chalk.cyan('  Spacing'));
+    lines.push(`    ${doc.tokens.spacing.map(s => `${s.value} (${s.rem})`).join('  |  ')}`);
+  }
+
+  if (doc.tokens.radii.length > 0) {
+    lines.push(chalk.cyan('  Border Radii'));
+    lines.push(`    ${doc.tokens.radii.map(r => `${r.value} (${r.rem})`).join('  |  ')}`);
+  }
+
+  if (doc.tokens.shadows.length > 0) {
+    lines.push(chalk.cyan('  Shadows'));
+    for (const s of doc.tokens.shadows) {
+      lines.push(`    ${s.value}`);
+    }
+  }
+
+  lines.push('');
+  lines.push(chalk.bold('Component Tree (JSON)'));
+  lines.push('');
+  lines.push(JSON.stringify(doc.tree, null, 2));
+
+  return lines.join('\n');
+}
+
+program
+  .command('document')
+  .description('Generate complete component documentation — recursive specs, tokens, and structured tree for coding agents')
+  .option('--json', 'Output raw JSON only (best for coding agents)')
+  .option('--node <id>', 'Document a specific node by ID')
+  .option('--link <url>', 'Document from a Figma selection link')
+  .option('--selection', 'Document the current selection (default)')
+  .option('--tokens-only', 'Output only the design tokens summary')
+  .addHelpText('after', `
+Examples:
+  fig document                       Document the selected component
+  fig document --json                JSON output for coding agents
+  fig document --node "123:456"      Document a specific node
+  fig document --link "https://..."  Document from a Figma link
+  fig document --tokens-only         Just the design tokens used
+`)
+  .action(async (options) => {
+    checkConnection();
+    const spinner = ora('Documenting component...').start();
+
+    try {
+      let target = 'selection';
+
+      if (options.link) {
+        const nodeId = parseNodeIdFromLink(options.link);
+        if (!nodeId) {
+          spinner.fail('Could not find a node ID in that link. Copy via right-click → "Copy link to selection" in Figma.');
+          process.exit(1);
+        }
+        target = nodeId;
+      } else if (options.node) {
+        target = options.node;
+      }
+
+      const code = buildDocumentCode(target);
+      const result = await daemonExec('eval', { code }, 120000);
+
+      if (result.error) {
+        spinner.fail(result.error);
+        process.exit(1);
+      }
+
+      spinner.succeed(`Documented "${result.summary.name}" — ${result.summary.totalNodes} nodes`);
+
+      if (options.tokensOnly) {
+        console.log(JSON.stringify(result.tokens, null, 2));
+      } else if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+      } else {
+        console.log('');
+        console.log(formatDocument(result));
+      }
+    } catch (e) {
+      spinner.fail(`Documentation failed: ${e.message}`);
+      process.exit(1);
+    }
+  });
+
 // ============ PROMPT — export to AI tool ============
 
 program
   .command('prompt [frameName]')
-  .description('Generate a lean, tool-specific AI prompt from a Figma frame')
+  .description('Export a frame as a text prompt for AI tools (Figma Make, Lovable, Pencil, Stitch)')
   .option('-t, --target <tool>', 'Target tool: figma-make | lovable | pencil | paper | stitch', 'figma-make')
   .option('-p, --platform <platform>', 'desktop | mobile | responsive', 'desktop')
   .option('-s, --stack <stack>', 'Tech stack (for Lovable/Pencil)', 'React + shadcn/ui + Tailwind')