Figma To React

{
  "name": "figma-to-react-skill",
  "private": true,
  "type": "module",
  "dependencies": {
    "playwright": "^1.57.0"
  }
}

#!/usr/bin/env bash
#
# add-missing-dimensions.sh
#
# Adds dimension entries to dimensions JSON files with manual: true flag.
#
# Usage modes:
#   # Single ID (backward compatible)
#   ./add-missing-dimensions.sh <json> <node-id> <width> <height>
#
#   # Multiple IDs to single file (same dimensions)
#   ./add-missing-dimensions.sh <json> <width> <height> <id1> [id2] [id3]...
#
#   # Multiple files (same dimensions)
#   ./add-missing-dimensions.sh <width> <height> --file <json1> <id1> [id2]... [--file <json2> <id3>...]
#
# Examples:
#   # Single ID
#   ./add-missing-dimensions.sh dims.json "232:1470" 393 64
#
#   # Multiple IDs to single file
#   ./add-missing-dimensions.sh dims.json 393 48 "I2006:2073;2603:5160" "I2006:2073;2603:5161"
#
#   # Multiple files
#   ./add-missing-dimensions.sh 393 48 \
#     --file metadata/2006-2062-dimensions.json "I2006:2073;2603:5160" "I2006:2073;2603:5161" \
#     --file metadata/2006-2075-dimensions.json "I2006:2086;2603:5160"

set -e

if ! command -v jq &>/dev/null; then
  echo "Error: jq is required" >&2
  exit 1
fi

# Helper: add single dimension to JSON file
add_dimension() {
  local json_file="$1"
  local node_id="$2"
  local width="$3"
  local height="$4"

  if [ ! -f "$json_file" ]; then
    echo "Error: Dimensions JSON not found: $json_file" >&2
    return 1
  fi

  local temp_file=$(mktemp)
  jq --arg id "$node_id" --argjson w "$width" --argjson h "$height" \
    '. + {($id): {"w": $w, "h": $h, "manual": true}}' "$json_file" > "$temp_file"
  mv "$temp_file" "$json_file"
  echo "✓ Added $node_id: ${width}x${height} to $(basename "$json_file")" >&2
}

# Helper: check if string is a positive integer
is_number() {
  [[ "$1" =~ ^[0-9]+$ ]]
}

# Detect mode based on arguments
if [ $# -lt 4 ]; then
  echo "Usage:" >&2
  echo "  $0 <json> <node-id> <width> <height>           # Single ID" >&2
  echo "  $0 <json> <width> <height> <id1> [id2]...      # Multiple IDs" >&2
  echo "  $0 <width> <height> --file <json> <ids>...     # Multiple files" >&2
  exit 1
fi

# Mode 3: Multiple files (first arg is width)
if is_number "$1" && is_number "$2" && [ "$3" = "--file" ]; then
  WIDTH="$1"
  HEIGHT="$2"
  shift 2  # Remove width and height

  CURRENT_JSON=""
  ADDED=0

  while [ $# -gt 0 ]; do
    if [ "$1" = "--file" ]; then
      shift
      if [ $# -eq 0 ]; then
        echo "Error: --file requires a filename" >&2
        exit 1
      fi
      CURRENT_JSON="$1"
      shift
    elif [ -n "$CURRENT_JSON" ]; then
      add_dimension "$CURRENT_JSON" "$1" "$WIDTH" "$HEIGHT"
      ADDED=$((ADDED + 1))
      shift
    else
      echo "Error: Node ID '$1' specified before --file" >&2
      exit 1
    fi
  done

  echo "✓ Added $ADDED dimensions (${WIDTH}x${HEIGHT})" >&2
  exit 0
fi

# Mode 2: Multiple IDs to single file (json, width, height, id1, id2...)
# Detect: 2nd and 3rd args are numbers, 4th+ are node IDs
if [ -f "$1" ] && is_number "$2" && is_number "$3" && [ $# -ge 4 ]; then
  DIMENSIONS_JSON="$1"
  WIDTH="$2"
  HEIGHT="$3"
  shift 3  # Remove json, width, height

  ADDED=0
  for node_id in "$@"; do
    add_dimension "$DIMENSIONS_JSON" "$node_id" "$WIDTH" "$HEIGHT"
    ADDED=$((ADDED + 1))
  done

  echo "✓ Added $ADDED dimensions (${WIDTH}x${HEIGHT}) to $(basename "$DIMENSIONS_JSON")" >&2
  exit 0
fi

# Mode 1: Single ID (original backward-compatible mode)
# Format: <json> <id> <width> <height>
DIMENSIONS_JSON="$1"
NODE_ID="$2"
WIDTH="$3"
HEIGHT="$4"

if [ -z "$DIMENSIONS_JSON" ] || [ -z "$NODE_ID" ] || [ -z "$WIDTH" ] || [ -z "$HEIGHT" ]; then
  echo "Usage: $0 <dimensions-json> <node-id> <width> <height>" >&2
  exit 1
fi

if [ ! -f "$DIMENSIONS_JSON" ]; then
  echo "Error: Dimensions JSON not found: $DIMENSIONS_JSON" >&2
  exit 1
fi

if ! is_number "$WIDTH" || ! is_number "$HEIGHT"; then
  echo "Error: Width and height must be positive integers" >&2
  exit 1
fi

add_dimension "$DIMENSIONS_JSON" "$NODE_ID" "$WIDTH" "$HEIGHT"

#!/usr/bin/env bash
#
# capture-figma-metadata.sh
#
# PostToolUse hook for Figma MCP get_metadata.
# Extracts frame dimensions from XML response and saves to component-metadata.json.
#
# Input (stdin): JSON with tool_input and tool_result
# Output: /tmp/figma-to-react/metadata/{nodeId}.json
#

set -e

# Read JSON from stdin
INPUT=$(cat)

# Extract nodeId from tool_input
NODE_ID=$(echo "$INPUT" | jq -r '.tool_input.nodeId // empty')
if [ -z "$NODE_ID" ]; then
  echo "Warning: No nodeId in get_metadata call" >&2
  echo '{}'
  exit 0
fi

# Extract the XML content from tool_response (not tool_result!)
# The response can be a string or array of content blocks
XML_CONTENT=$(echo "$INPUT" | jq -r '
  .tool_response as $resp |
  if ($resp | type) == "array" then
    $resp[0].text // empty
  elif ($resp | type) == "string" then
    $resp
  else
    empty
  end
' 2>/dev/null)
if [ -z "$XML_CONTENT" ]; then
  echo "Warning: No XML content in get_metadata response" >&2
  echo '{}'
  exit 0
fi

# Extract width and height from the root frame element
# Look for patterns like width="390" height="844" or size="390x844"
# The XML format varies, so try multiple patterns

# Try width="X" height="Y" pattern (common in Figma XML)
WIDTH=$(echo "$XML_CONTENT" | grep -oE 'width="[0-9.]+"' | head -1 | grep -oE '[0-9.]+')
HEIGHT=$(echo "$XML_CONTENT" | grep -oE 'height="[0-9.]+"' | head -1 | grep -oE '[0-9.]+')

# If not found, try w="X" h="Y" pattern
if [ -z "$WIDTH" ] || [ -z "$HEIGHT" ]; then
  WIDTH=$(echo "$XML_CONTENT" | grep -oE '\bw="[0-9.]+"' | head -1 | grep -oE '[0-9.]+')
  HEIGHT=$(echo "$XML_CONTENT" | grep -oE '\bh="[0-9.]+"' | head -1 | grep -oE '[0-9.]+')
fi

# If still not found, try size attribute
if [ -z "$WIDTH" ] || [ -z "$HEIGHT" ]; then
  SIZE=$(echo "$XML_CONTENT" | grep -oE 'size="[0-9.]+x[0-9.]+"' | head -1)
  if [ -n "$SIZE" ]; then
    WIDTH=$(echo "$SIZE" | grep -oE '[0-9.]+' | head -1)
    HEIGHT=$(echo "$SIZE" | grep -oE '[0-9.]+' | tail -1)
  fi
fi

if [ -z "$WIDTH" ] || [ -z "$HEIGHT" ]; then
  echo "Warning: Could not extract dimensions from get_metadata response" >&2
  echo "XML preview: ${XML_CONTENT:0:500}" >&2
  echo '{}'
  exit 0
fi

# Round to integers
WIDTH=$(printf "%.0f" "$WIDTH")
HEIGHT=$(printf "%.0f" "$HEIGHT")

# Create metadata directory (per-file approach avoids race conditions)
METADATA_DIR="/tmp/figma-to-react/metadata"
mkdir -p "$METADATA_DIR"

# Sanitize node ID for filename (replace : with -)
SAFE_NODE_ID="${NODE_ID//:/-}"
METADATA_FILE="${METADATA_DIR}/${SAFE_NODE_ID}.json"

# Write per-nodeId file (atomic, no contention)
cat > "$METADATA_FILE" << EOF
{"nodeId": "$NODE_ID", "width": $WIDTH, "height": $HEIGHT}
EOF

# Save full XML for fix-collapsed-containers.sh to use
XML_FILE="${METADATA_DIR}/${SAFE_NODE_ID}.xml"
echo "$XML_CONTENT" > "$XML_FILE"

# Extract ALL node dimensions to a JSON map for quick lookup
# Parse: <frame id="237:2572" ... width="393" height="64">
# Output: {"237:2572": {"w": 393, "h": 64}, ...}
DIMENSIONS_FILE="${METADATA_DIR}/${SAFE_NODE_ID}-dimensions.json"

# Use grep to extract all id/width/height from XML elements
# Match patterns like: id="237:2572" ... width="393" height="64"
echo "$XML_CONTENT" | grep -oE '<[^>]+ id="[^"]+"[^>]*>' | while read -r line; do
  id=$(echo "$line" | grep -oE 'id="[^"]+"' | sed 's/id="//;s/"//')
  w=$(echo "$line" | grep -oE 'width="[0-9.]+"' | grep -oE '[0-9.]+')
  h=$(echo "$line" | grep -oE 'height="[0-9.]+"' | grep -oE '[0-9.]+')
  if [ -n "$id" ] && [ -n "$w" ] && [ -n "$h" ]; then
    # Round to integers
    w=$(printf "%.0f" "$w")
    h=$(printf "%.0f" "$h")
    echo "\"$id\": {\"w\": $w, \"h\": $h}"
  fi
done | paste -sd ',' - | sed 's/^/{/;s/$/}/' > "$DIMENSIONS_FILE"

# Count how many dimensions we extracted
DIM_COUNT=$(grep -c '"w":' "$DIMENSIONS_FILE" 2>/dev/null || echo "0")

# ============================================================================
# Extract parent-child instance mapping for fix-component-instances.sh
# Format: {"parentId": [{"id": "...", "name": "...", "type": "instance", "w": X, "h": Y}, ...]}
# ============================================================================
INSTANCES_FILE="${METADATA_DIR}/${SAFE_NODE_ID}-instances.json"

# Parse XML to build parent-child structure using temp file for parent stack
TEMP_STACK=$(mktemp)
echo "root" > "$TEMP_STACK"

echo "$XML_CONTENT" | while IFS= read -r line; do
  # Count leading spaces to determine depth
  spaces=$(echo "$line" | sed 's/[^ ].*//' | wc -c)
  spaces=$((spaces - 1))
  depth=$((spaces / 2))

  # Extract element type (frame, instance, text)
  type=""
  if echo "$line" | grep -q '<frame '; then type="frame"; fi
  if echo "$line" | grep -q '<instance '; then type="instance"; fi
  if echo "$line" | grep -q '<text '; then type="text"; fi
  [ -z "$type" ] && continue

  # Extract id, name, dimensions
  id=$(echo "$line" | grep -oE 'id="[^"]+"' | sed 's/id="//;s/"//')
  name=$(echo "$line" | grep -oE 'name="[^"]+"' | sed 's/name="//;s/"//')
  w=$(echo "$line" | grep -oE 'width="[0-9.]+"' | grep -oE '[0-9.]+')
  h=$(echo "$line" | grep -oE 'height="[0-9.]+"' | grep -oE '[0-9.]+')
  # Round decimals to integers (matching dimensions map behavior)
  w=${w:+$(printf "%.0f" "$w")}
  h=${h:+$(printf "%.0f" "$h")}

  [ -z "$id" ] && continue

  # Get parent from line (depth+1) in stack file
  parent_id=$(sed -n "$((depth + 1))p" "$TEMP_STACK")

  # Update stack: keep lines up to depth+1, add new id
  head -n $((depth + 1)) "$TEMP_STACK" > "${TEMP_STACK}.tmp"
  echo "$id" >> "${TEMP_STACK}.tmp"
  mv "${TEMP_STACK}.tmp" "$TEMP_STACK"

  # Output JSON line for jq to process
  echo "{\"parent\": \"$parent_id\", \"id\": \"$id\", \"name\": \"$name\", \"type\": \"$type\", \"w\": ${w:-0}, \"h\": ${h:-0}}"
done | jq -s 'group_by(.parent) | map({(.[0].parent): [.[] | del(.parent)]}) | add // {}' > "$INSTANCES_FILE"

rm -f "$TEMP_STACK" "${TEMP_STACK}.tmp" 2>/dev/null

# Validate JSON (fix if empty or malformed)
if ! jq empty "$INSTANCES_FILE" 2>/dev/null; then
  echo '{}' > "$INSTANCES_FILE"
fi

INSTANCE_COUNT=$(jq 'to_entries | map(.value | length) | add // 0' "$INSTANCES_FILE" 2>/dev/null || echo "0")
echo "✓ Captured dimensions for $NODE_ID: ${WIDTH}x${HEIGHT} (+${DIM_COUNT} child nodes, ${INSTANCE_COUNT} instances)" >&2

# Output JSON for hook system
echo '{}'

#!/bin/bash
#
# PostToolUse hook for capturing Figma MCP get_design_context responses
#
# ALWAYS captures responses to /tmp/figma-to-react/captures/figma-{nodeId}.txt
# ONLY suppresses output when skill is active (marker file exists)
#
# This ensures:
# - Verbatim code capture without LLM transcription modifications
# - Normal Figma MCP experience when skill is not active
# - Debug captures available even without skill

MARKER="/tmp/figma-to-react/capture-active"
OUTPUT_DIR="/tmp/figma-to-react/captures"

# Always read the full hook input
INPUT=$(cat)

# Extract nodeId for filename (convert : to - for filesystem safety)
NODE_ID=$(echo "$INPUT" | jq -r '.tool_input.nodeId // "unknown"' 2>/dev/null | tr ':' '-')
if [ -z "$NODE_ID" ] || [ "$NODE_ID" = "null" ]; then
  NODE_ID="unknown-$(date +%s)"
fi

# Create output directory
mkdir -p "$OUTPUT_DIR"

# Extract the code from tool_response
# The response can be:
#   - A JSON array: [{"type": "text", "text": "...code..."}, ...]
#   - A JSON string containing a serialized array: "[{\"type\": \"text\", ...}]"
#   - A raw string
# We need to get just the first text block which contains the React code

OUTPUT_FILE="${OUTPUT_DIR}/figma-${NODE_ID}.txt"

# Try to extract from JSON - handle both parsed arrays and serialized JSON strings
CODE=$(echo "$INPUT" | jq -r '
  # Get tool_response
  .tool_response as $resp |

  # If it is an array, get first text element
  if ($resp | type) == "array" then
    $resp[0].text // empty

  # If it is a string, try to parse it as JSON
  elif ($resp | type) == "string" then
    # Try to parse as JSON array
    (try ($resp | fromjson) catch null) as $parsed |
    if ($parsed | type) == "array" then
      $parsed[0].text // empty
    else
      # Not parseable as array, return as-is
      $resp
    end

  else
    empty
  end
' 2>/dev/null)

if [ -z "$CODE" ]; then
  # Fallback: try to extract raw tool_response as string
  CODE=$(echo "$INPUT" | jq -r '.tool_response // empty' 2>/dev/null)
fi

if [ -z "$CODE" ]; then
  echo "Warning: Could not extract code from response" >&2
  # No code to capture, allow normal flow
  echo '{}'
  exit 0
fi

# ALWAYS save extracted code (useful for debugging even without skill)
printf '%s' "$CODE" > "$OUTPUT_FILE"
BYTES=$(wc -c < "$OUTPUT_FILE" | tr -d ' ')

# CONDITIONAL: Only suppress output when skill is active
if [ -f "$MARKER" ]; then
  # Skill is active - suppress raw output, replace with instruction
  echo "✓ Captured: figma-${NODE_ID}.txt (${BYTES} bytes) [suppressing output]" >&2
  cat << EOF
{
  "suppressOutput": true,
  "hookSpecificOutput": {
    "hookEventName": "PostToolUse",
    "additionalContext": "✅ Figma response captured to ${OUTPUT_FILE} (${BYTES} bytes)\n\nNEXT: Run the processing script to extract tokens and download assets:\n\n\$SKILL_DIR/scripts/process-figma.sh ${OUTPUT_FILE} <component.tsx> <asset-dir> <url-prefix> <tokens.css>"
  }
}
EOF
else
  # Skill not active - allow normal output (capture still happened for debugging)
  echo "✓ Captured: figma-${NODE_ID}.txt (${BYTES} bytes) [passthrough]" >&2
  echo '{}'
fi

#!/bin/bash
#
# PostToolUse hook for capturing Figma MCP get_screenshot responses
#
# Saves screenshot images to /tmp/figma-to-react/screenshots/figma-{nodeId}.png
# The image data comes as base64 in the tool_response
#

OUTPUT_DIR="/tmp/figma-to-react/screenshots"

# Read the full hook input
INPUT=$(cat)

# Extract nodeId for filename (convert : to - for filesystem safety)
NODE_ID=$(echo "$INPUT" | jq -r '.tool_input.nodeId // "unknown"' 2>/dev/null | tr ':' '-')
if [ -z "$NODE_ID" ] || [ "$NODE_ID" = "null" ]; then
  NODE_ID="unknown-$(date +%s)"
fi

# Create output directory
mkdir -p "$OUTPUT_DIR"

OUTPUT_FILE="${OUTPUT_DIR}/figma-${NODE_ID}.png"

# Extract base64 image data from the response
# The response format is typically: [{"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": "..."}}]
# Or it could be: [{"type": "image", "data": "base64string", ...}]

# Try multiple extraction patterns
IMAGE_DATA=$(echo "$INPUT" | jq -r '
  .tool_response as $resp |

  # If array, get first image element
  if ($resp | type) == "array" then
    ($resp[] | select(.type == "image") | .source.data // .data) // empty

  # If string, try to parse
  elif ($resp | type) == "string" then
    (try ($resp | fromjson) catch null) as $parsed |
    if ($parsed | type) == "array" then
      ($parsed[] | select(.type == "image") | .source.data // .data) // empty
    else
      empty
    end
  else
    empty
  end
' 2>/dev/null)

if [ -z "$IMAGE_DATA" ] || [ "$IMAGE_DATA" = "null" ]; then
  # Fallback: try direct extraction patterns
  IMAGE_DATA=$(echo "$INPUT" | jq -r '.tool_response[0].source.data // empty' 2>/dev/null)
fi

if [ -z "$IMAGE_DATA" ] || [ "$IMAGE_DATA" = "null" ]; then
  IMAGE_DATA=$(echo "$INPUT" | jq -r '.tool_response[0].data // empty' 2>/dev/null)
fi

if [ -z "$IMAGE_DATA" ] || [ "$IMAGE_DATA" = "null" ]; then
  echo "Warning: Could not extract image data from response" >&2
  # Debug: save raw response for inspection
  echo "$INPUT" | jq '.tool_response' > "${OUTPUT_DIR}/debug-${NODE_ID}.json" 2>/dev/null
  echo '{}'
  exit 0
fi

# Decode base64 and save as PNG
echo "$IMAGE_DATA" | base64 -d > "$OUTPUT_FILE" 2>/dev/null

if [ -f "$OUTPUT_FILE" ] && [ -s "$OUTPUT_FILE" ]; then
  BYTES=$(wc -c < "$OUTPUT_FILE" | tr -d ' ')
  echo "Screenshot saved: ${OUTPUT_FILE} (${BYTES} bytes)" >&2

  # Return success with file path info
  cat << EOF
{
  "hookSpecificOutput": {
    "hookEventName": "PostToolUse",
    "additionalContext": "Screenshot saved to ${OUTPUT_FILE}"
  }
}
EOF
else
  echo "Warning: Failed to decode image" >&2
  echo '{}'
fi

#!/usr/bin/env bun
/**
 * capture-screenshot.ts
 *
 * Capture a screenshot of a rendered component using headless Playwright.
 * Screenshots the [data-figma-component] element at its natural size.
 *
 * Usage:
 *   bun capture-screenshot.ts <url> <output.png>
 *
 * Arguments:
 *   url      - URL to capture (format depends on framework):
 *              Vite: http://localhost:5173/figma-preview.html?screen=Login
 *              Next.js: http://localhost:3000/figma-preview?screen=Login
 *   output   - Output path for screenshot (e.g., /tmp/rendered-Login.png)
 *
 * Example:
 *   bun capture-screenshot.ts "http://localhost:5173/figma-preview.html?screen=Login" /tmp/rendered.png
 */

import { chromium } from 'playwright';

const url = process.argv[2];
const output = process.argv[3];

if (!url || !output) {
  console.error('Usage: bun capture-screenshot.ts <url> <output.png>');
  console.error('');
  console.error('Arguments:');
  console.error('  url      - URL to capture');
  console.error('  output   - Output path for screenshot');
  console.error('');
  console.error('Screenshots the [data-figma-component] element at its natural size.');
  process.exit(1);
}

async function capture() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    deviceScaleFactor: 2, // Retina-quality screenshots
  });
  const page = await context.newPage();

  try {
    // Use domcontentloaded instead of networkidle because Vite's HMR WebSocket
    // keeps a persistent connection open, preventing networkidle from ever firing
    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });

    // Find the component element and wait for it to be visible
    const element = await page.locator('[data-figma-component]');
    await element.waitFor({ state: 'visible', timeout: 10000 });

    // Small delay for any animations to settle
    await page.waitForTimeout(500);
    const box = await element.boundingBox();
    await element.screenshot({ path: output });
    console.log(`Screenshot saved: ${output}`);
    console.log(`Component size: ${box?.width}x${box?.height} @2x`);
  } catch (error) {
    console.error(`Error capturing screenshot: ${error}`);
    process.exit(1);
  } finally {
    await browser.close();
  }
}

capture();

#!/usr/bin/env bash
#
# extract-tokens.sh
#
# Extracts CSS variables from Figma MCP output and generates a tokens file.
# The MCP outputs var(--name,fallback) - we extract the name and fallback value.
#
# Usage:
#   ./extract-tokens.sh <input-file> <output-css>
#   ./extract-tokens.sh /tmp/figma-to-react/captures/figma-123-456.txt src/styles/figma-tokens.css
#
# Always overwrites output file. Deduplicates by variable name, preferring non-zero values.

set -e

INPUT="$1"
OUTPUT="$2"

if [ -z "$INPUT" ] || [ -z "$OUTPUT" ]; then
  echo "Usage: $0 <input-file> <output-css>" >&2
  exit 1
fi

if [ ! -f "$INPUT" ]; then
  echo "Error: Input file not found: $INPUT" >&2
  exit 1
fi

# Create output directory if needed
mkdir -p "$(dirname "$OUTPUT")"

# Temp file for new tokens (under /tmp/figma-to-react/ for easy cleanup)
TMP_DIR="/tmp/figma-to-react/tmp"
mkdir -p "$TMP_DIR"
TEMP_TOKENS="$TMP_DIR/figma-tokens-$$.txt"
trap "rm -f $TEMP_TOKENS" EXIT

# Extract all var() patterns: var(--name,fallback)
# Handle both escaped slashes (--name\/sub) and regular names (--name-sub)
# Fallback values can contain arbitrarily nested parens: calc((100% - max(20px, 5vw)) / 2)
# Use stack-based parenthesis matching for reliable extraction
perl -e '
  use strict;
  use warnings;

  # Read entire file
  my $content = do { local $/; <> };

  # Find all var(--name, patterns and extract with balanced parens
  while ($content =~ /var\((--[^,)]+),/g) {
    my $name = $1;
    my $start = pos($content);
    my $depth = 1;
    my $i = $start;
    my $len = length($content);

    # Stack-based parenthesis matching
    while ($i < $len && $depth > 0) {
      my $c = substr($content, $i, 1);
      $depth++ if $c eq "(";
      $depth-- if $c eq ")";
      $i++;
    }

    if ($depth == 0) {
      my $fallback = substr($content, $start, $i - $start - 1);
      # Trim leading/trailing whitespace from fallback
      $fallback =~ s/^\s+//;
      $fallback =~ s/\s+$//;
      # Convert escaped slashes to hyphens for cleaner CSS variable names
      # e.g., --color\/primary\/500 → --color-primary-500
      $name =~ s/\\?\//\-/g;
      print "$name|$fallback\n";
    }
  }
' "$INPUT" | \
  # Sort by name, then by value (reverse so non-"0px" comes before "0px")
  sort -t'|' -k1,1 -k2,2r | \
  # Keep first occurrence of each name (the non-zero value)
  awk -F'|' '!seen[$1]++' > "$TEMP_TOKENS"

# Count tokens found
TOKEN_COUNT=$(wc -l < "$TEMP_TOKENS" | tr -d ' ')

if [ "$TOKEN_COUNT" -eq 0 ]; then
  echo "No CSS variables found in input" >&2
  exit 0
fi

echo "Found $TOKEN_COUNT unique CSS variables" >&2

# Write output CSS file (always overwrite - no merge)
{
  echo "/* Figma Design Tokens - auto-generated */"
  echo "/* Do not edit manually - regenerate with extract-tokens.sh */"
  echo ":root {"

  while IFS='|' read -r name fallback; do
    echo "  ${name}: ${fallback};"
  done < "$TEMP_TOKENS"

  echo "}"
} > "$OUTPUT"

echo "Written: $OUTPUT" >&2

#!/usr/bin/env bun
/**
 * Find shared components across multiple Figma screen captures.
 *
 * Usage:
 *   bun find-shared-components.ts capture1.txt capture2.txt [capture3.txt ...]
 *
 * Output (JSON):
 *   {
 *     "shared": [
 *       {
 *         "definitionId": "2708:1961",
 *         "name": "exit button",
 *         "instances": [
 *           {"instanceId": "I237:2417;2708:1961", "screen": "237:2416"},
 *           {"instanceId": "I237:2572;2708:1961", "screen": "237:2571"}
 *         ]
 *       }
 *     ],
 *     "total_shared": 6
 *   }
 */

import fs from 'fs';
import path from 'path';

interface Instance {
  instanceId: string;
  screen: string;
}

interface SharedComponent {
  definitionId: string;
  name: string | null;
  instances: Instance[];
}

interface Output {
  shared: SharedComponent[];
  total_shared: number;
}

/**
 * Extract the component definition ID from an instance node ID.
 * Instance IDs follow: I{parent};{component}[;{nested}...]
 * Returns the last segment (the innermost component definition).
 */
function extractComponentDefinitionId(instanceId: string): string | null {
  if (!instanceId.startsWith('I')) {
    return null;
  }
  const parts = instanceId.split(';');
  if (parts.length < 2) {
    return null;
  }
  return parts[parts.length - 1];
}

/**
 * Extract all node IDs from capture content.
 */
function extractNodeIds(content: string): string[] {
  const pattern = /data-node-id="([^"]+)"/g;
  const matches = content.matchAll(pattern);
  return [...matches].map(m => m[1]);
}

/**
 * Extract the screen's root node ID from the capture.
 * Looks for the first data-node-id that's not an instance (doesn't start with I).
 */
function extractScreenNodeId(content: string): string {
  const nodeIds = extractNodeIds(content);
  for (const id of nodeIds) {
    if (!id.startsWith('I')) {
      return id;
    }
  }
  // Fallback: use filename pattern
  return 'unknown';
}

/**
 * Extract element name from data-name attribute for a given node ID.
 */
function extractElementName(content: string, nodeId: string): string | null {
  const escapedId = nodeId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // Try both orderings of data-name and data-node-id
  const pattern = new RegExp(
    `data-name="([^"]+)"[^>]*data-node-id="${escapedId}"|data-node-id="${escapedId}"[^>]*data-name="([^"]+)"`
  );
  const match = content.match(pattern);
  return match ? (match[1] || match[2]) : null;
}

/**
 * Find shared components across multiple captures.
 */
function findSharedComponents(
  captures: Array<{ screen: string; content: string }>
): SharedComponent[] {
  const componentMap = new Map<string, SharedComponent>();

  for (const capture of captures) {
    const nodeIds = extractNodeIds(capture.content);

    for (const nodeId of nodeIds) {
      const definitionId = extractComponentDefinitionId(nodeId);
      if (!definitionId) continue;

      if (!componentMap.has(definitionId)) {
        componentMap.set(definitionId, {
          definitionId,
          name: extractElementName(capture.content, nodeId),
          instances: [],
        });
      }

      const component = componentMap.get(definitionId)!;

      // Avoid duplicates
      const exists = component.instances.some(
        i => i.instanceId === nodeId && i.screen === capture.screen
      );

      if (!exists) {
        component.instances.push({
          instanceId: nodeId,
          screen: capture.screen,
        });
      }
    }
  }

  // Filter to components appearing in 2+ different screens
  return [...componentMap.values()].filter(c => {
    const uniqueScreens = new Set(c.instances.map(i => i.screen));
    return uniqueScreens.size > 1;
  });
}

function main() {
  const args = process.argv.slice(2);

  if (args.length < 2) {
    console.error('Usage: bun find-shared-components.ts capture1.txt capture2.txt [...]');
    console.error('Need at least 2 capture files to find shared components.');
    process.exit(1);
  }

  const captures: Array<{ screen: string; content: string }> = [];

  for (const filePath of args) {
    if (!fs.existsSync(filePath)) {
      console.error(`File not found: ${filePath}`);
      process.exit(1);
    }

    const content = fs.readFileSync(filePath, 'utf-8');
    const screen = extractScreenNodeId(content);

    // Also try to extract from filename (figma-237-2571.txt → 237:2571)
    const filenameMatch = path.basename(filePath).match(/figma-(\d+)-(\d+)/);
    const screenFromFilename = filenameMatch ? `${filenameMatch[1]}:${filenameMatch[2]}` : screen;

    captures.push({
      screen: screenFromFilename,
      content,
    });
  }

  const shared = findSharedComponents(captures);

  const output: Output = {
    shared,
    total_shared: shared.length,
  };

  console.log(JSON.stringify(output, null, 2));
}

main();

#!/usr/bin/env bash
#
# fix-collapsed-containers.sh
#
# Fix containers that collapse because all children are absolute-positioned.
# Adds explicit h-[Xpx] or w-[Xpx] classes from Figma metadata.
#
# Two-pass approach:
#   Pass 1: Build map of ComponentName -> node-id from function definitions
#   Pass 2: Fix both inline elements (with data-node-id) AND component usages
#
# Usage modes:
#   # Single file pair (outputs to stdout - backward compatible)
#   ./fix-collapsed-containers.sh <tsx-file> <dimensions-json>
#
#   # Directory mode (auto-match files, fix in-place)
#   ./fix-collapsed-containers.sh <tsx-dir> <dimensions-dir>
#
#   # Multiple pairs (fix in-place)
#   ./fix-collapsed-containers.sh --pair <tsx1> <dims1> [--pair <tsx2> <dims2>]...
#
# Examples:
#   # Single file (stdout)
#   ./fix-collapsed-containers.sh component.tsx dimensions.json > fixed.tsx
#
#   # Directory mode (in-place)
#   ./fix-collapsed-containers.sh src/persona/ /tmp/figma-to-react/metadata/
#
#   # Multiple pairs (in-place)
#   ./fix-collapsed-containers.sh \
#     --pair src/Screen1.tsx metadata/1-1-dimensions.json \
#     --pair src/Screen2.tsx metadata/2-2-dimensions.json

set -e

# ============================================================================
# Core processing function - takes tsx and dims, outputs to stdout
# ============================================================================
process_single_file() {
  local TSX_FILE="$1"
  local DIMENSIONS_JSON="$2"
  local QUIET="${3:-false}"

  if [ ! -f "$TSX_FILE" ]; then
    echo "Error: TSX file not found: $TSX_FILE" >&2
    return 1
  fi

  if [ ! -f "$DIMENSIONS_JSON" ]; then
    # Just output original if no dimensions available
    cat "$TSX_FILE"
    return 0
  fi

  # Function to lookup dimensions from JSON
  lookup_dimensions() {
    local node_id="$1"
    jq -r --arg id "$node_id" '.[$id] // empty | "\(.w)x\(.h)"' "$DIMENSIONS_JSON" 2>/dev/null
  }

  # Function to check if dimensions were manually added
  is_manual_dimension() {
    local node_id="$1"
    jq -e --arg id "$node_id" '.[$id].manual // false' "$DIMENSIONS_JSON" &>/dev/null
  }

  # ============================================================================
  # PASS 1: Build component name -> node-id map
  # ============================================================================
  declare -A COMPONENT_NODE_IDS

  TEMP_MAP=$(mktemp)
  trap "rm -f $TEMP_MAP" RETURN

  current_component=""
  in_component=false

  while IFS= read -r line; do
    if echo "$line" | grep -qE '^function [A-Z][A-Za-z0-9_]+\s*[(<]'; then
      current_component=$(echo "$line" | grep -oE 'function [A-Z][A-Za-z0-9_]+' | sed 's/function //')
      in_component=true
    fi

    if [ "$in_component" = true ] && [ -n "$current_component" ]; then
      if echo "$line" | grep -qE 'data-node-id="[^"]+".*className=\{className\}|className=\{className\}.*data-node-id="[^"]+"'; then
        node_id=$(echo "$line" | grep -oE 'data-node-id="[^"]+"' | head -1 | sed 's/data-node-id="//;s/"//')
        if [ -n "$node_id" ]; then
          echo "$current_component=$node_id" >> "$TEMP_MAP"
          [ "$QUIET" = false ] && echo "  Mapped component: $current_component -> $node_id" >&2
        fi
        in_component=false
        current_component=""
      fi
      if echo "$line" | grep -qE '^(function |export |const [A-Z])' && ! echo "$line" | grep -qE "^function $current_component"; then
        in_component=false
        current_component=""
      fi
    fi
  done < "$TSX_FILE"

  while IFS='=' read -r comp_name node_id; do
    COMPONENT_NODE_IDS["$comp_name"]="$node_id"
  done < "$TEMP_MAP"

  [ "$QUIET" = false ] && echo "  Found ${#COMPONENT_NODE_IDS[@]} component mappings" >&2

  # ============================================================================
  # PASS 2: Process lines and apply fixes
  # ============================================================================
  FIXES_MADE=0

  needs_height_fix_conservative() {
    local line="$1"
    echo "$line" | grep -qE 'py-\[|p-\[' && ! echo "$line" | grep -qE 'h-\[[0-9]+px\]|h-full|h-auto|h-fit|size-full|h-\[var'
  }

  needs_height_fix_aggressive() {
    local line="$1"
    echo "$line" | grep -qE 'py-\[|p-\[' && ! echo "$line" | grep -qE 'h-\[[0-9]+px\]|size-full|h-\[var'
  }

  has_relative_height() {
    local line="$1"
    echo "$line" | grep -qE '(^|[" ])h-(full|auto|fit)[" ]'
  }

  needs_width_fix_conservative() {
    local line="$1"
    echo "$line" | grep -qE 'px-\[|p-\[' && ! echo "$line" | grep -qE 'w-\[[0-9]+px\]|w-full|w-auto|w-fit|size-full|w-\[var'
  }

  needs_width_fix_aggressive() {
    local line="$1"
    echo "$line" | grep -qE 'px-\[|p-\[' && ! echo "$line" | grep -qE 'w-\[[0-9]+px\]|size-full|w-\[var'
  }

  has_relative_width() {
    local line="$1"
    echo "$line" | grep -qE '(^|[" ])w-(full|auto|fit)[" ]'
  }

  has_positioning() {
    local line="$1"
    echo "$line" | grep -qE 'relative|absolute'
  }

  while IFS= read -r line || [ -n "$line" ]; do
    modified_line="$line"
    node_id=""

    if echo "$line" | grep -qE 'data-node-id="[^"]+"'; then
      node_id=$(echo "$line" | grep -oE 'data-node-id="[^"]+"' | sed 's/data-node-id="//;s/"//')
    fi

    if [ -z "$node_id" ]; then
      component_name=$(echo "$line" | grep -oE '<[A-Z][A-Za-z0-9_]+\s+className=' | sed 's/<//;s/[[:space:]]*className=//;s/[[:space:]]//g' | head -1)
      if [ -n "$component_name" ] && [ -n "${COMPONENT_NODE_IDS[$component_name]}" ]; then
        node_id="${COMPONENT_NODE_IDS[$component_name]}"
      fi
    fi

    if [ -n "$node_id" ]; then
      dims=$(lookup_dimensions "$node_id")
      if [ -n "$dims" ]; then
        w=$(echo "$dims" | cut -d'x' -f1)
        h=$(echo "$dims" | cut -d'x' -f2)

        if has_positioning "$line"; then
          is_manual=false
          if is_manual_dimension "$node_id"; then
            is_manual=true
          fi

          if [ "$h" -gt 0 ]; then
            if [ "$is_manual" = true ] && needs_height_fix_aggressive "$line"; then
              if has_relative_height "$modified_line"; then
                old_class=$(echo "$modified_line" | grep -oE '(^|[" ])h-(full|auto|fit)' | sed 's/^[" ]*//' | head -1)
                new_line=$(echo "$modified_line" | sed -E "s/([\" ])h-(full|auto|fit)([\" ])/\1h-[${h}px]\3/g")
                if [ "$new_line" != "$modified_line" ]; then
                  modified_line="$new_line"
                  FIXES_MADE=$((FIXES_MADE + 1))
                  [ "$QUIET" = false ] && echo "  Fixed height: $node_id -> h-[${h}px] (replaced $old_class, manual)" >&2
                fi
              else
                new_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}h-[${h}px] /")
                if [ "$new_line" != "$modified_line" ]; then
                  modified_line="$new_line"
                  FIXES_MADE=$((FIXES_MADE + 1))
                  [ "$QUIET" = false ] && echo "  Fixed height: $node_id -> h-[${h}px] (manual)" >&2
                fi
              fi
            elif [ "$is_manual" = false ] && needs_height_fix_conservative "$line"; then
              new_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}h-[${h}px] /")
              if [ "$new_line" != "$modified_line" ]; then
                modified_line="$new_line"
                FIXES_MADE=$((FIXES_MADE + 1))
                [ "$QUIET" = false ] && echo "  Fixed height: $node_id -> h-[${h}px]" >&2
              fi
            fi
          fi

          if [ "$w" -gt 0 ]; then
            if [ "$is_manual" = true ] && needs_width_fix_aggressive "$line"; then
              if has_relative_width "$modified_line"; then
                old_class=$(echo "$modified_line" | grep -oE '(^|[" ])w-(full|auto|fit)' | sed 's/^[" ]*//' | head -1)
                new_line=$(echo "$modified_line" | sed -E "s/([\" ])w-(full|auto|fit)([\" ])/\1w-[${w}px]\3/g")
                if [ "$new_line" != "$modified_line" ]; then
                  modified_line="$new_line"
                  FIXES_MADE=$((FIXES_MADE + 1))
                  [ "$QUIET" = false ] && echo "  Fixed width: $node_id -> w-[${w}px] (replaced $old_class, manual)" >&2
                fi
              else
                new_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}w-[${w}px] /")
                if [ "$new_line" != "$modified_line" ]; then
                  modified_line="$new_line"
                  FIXES_MADE=$((FIXES_MADE + 1))
                  [ "$QUIET" = false ] && echo "  Fixed width: $node_id -> w-[${w}px] (manual)" >&2
                fi
              fi
            elif [ "$is_manual" = false ] && needs_width_fix_conservative "$line"; then
              new_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}w-[${w}px] /")
              if [ "$new_line" != "$modified_line" ]; then
                modified_line="$new_line"
                FIXES_MADE=$((FIXES_MADE + 1))
                [ "$QUIET" = false ] && echo "  Fixed width: $node_id -> w-[${w}px]" >&2
              fi
            fi
          fi
        fi
      fi
    fi

    echo "$modified_line"
  done < "$TSX_FILE"

  if [ "$FIXES_MADE" -gt 0 ]; then
    echo "✓ Applied $FIXES_MADE collapsed container fixes to $(basename "$TSX_FILE")" >&2
  else
    [ "$QUIET" = false ] && echo "✓ No collapsed containers in $(basename "$TSX_FILE")" >&2
  fi

  # Return fix count via exit code (capped at 125 for safety)
  return 0
}

# ============================================================================
# Mode detection and dispatch
# ============================================================================

if ! command -v jq &>/dev/null; then
  echo "Error: jq is required for fix-collapsed-containers.sh" >&2
  exit 1
fi

# Mode 3: Multiple pairs (--pair flag)
if [ "$1" = "--pair" ]; then
  TOTAL_FIXES=0
  FILES_PROCESSED=0

  while [ $# -gt 0 ]; do
    if [ "$1" = "--pair" ]; then
      shift
      if [ $# -lt 2 ]; then
        echo "Error: --pair requires <tsx-file> <dimensions-json>" >&2
        exit 1
      fi
      TSX_FILE="$1"
      DIMS_FILE="$2"
      shift 2

      if [ ! -f "$TSX_FILE" ]; then
        echo "Error: TSX file not found: $TSX_FILE" >&2
        exit 1
      fi

      echo "Processing $(basename "$TSX_FILE")..." >&2
      TEMP_OUTPUT=$(mktemp)
      process_single_file "$TSX_FILE" "$DIMS_FILE" true > "$TEMP_OUTPUT"
      mv "$TEMP_OUTPUT" "$TSX_FILE"
      FILES_PROCESSED=$((FILES_PROCESSED + 1))
    else
      echo "Error: Expected --pair, got: $1" >&2
      exit 1
    fi
  done

  echo "✓ Processed $FILES_PROCESSED files" >&2
  exit 0
fi

# Mode 2: Directory mode (both args are directories)
if [ -d "$1" ] && [ -d "$2" ]; then
  TSX_DIR="$1"
  DIMS_DIR="$2"
  TOTAL_FIXES=0
  FILES_PROCESSED=0

  echo "=== Batch Processing ===" >&2
  echo "TSX directory: $TSX_DIR" >&2
  echo "Dimensions directory: $DIMS_DIR" >&2

  # Find all tsx files and try to match with dimensions
  for tsx_file in "$TSX_DIR"/*.tsx; do
    [ -f "$tsx_file" ] || continue

    # Try to find matching dimensions file
    # Extract potential node IDs from the tsx filename or content
    basename_tsx=$(basename "$tsx_file" .tsx)

    # Look for dimensions files that might match
    MATCHED_DIMS=""
    for dims_file in "$DIMS_DIR"/*-dimensions.json; do
      [ -f "$dims_file" ] || continue

      # Extract node ID from dimensions filename (e.g., 237-2571-dimensions.json -> 237-2571)
      dims_node_id=$(basename "$dims_file" -dimensions.json)

      # Check if the tsx file references this node ID
      if grep -q "data-node-id=\"${dims_node_id//-/:}\"" "$tsx_file" 2>/dev/null; then
        MATCHED_DIMS="$dims_file"
        break
      fi
    done

    if [ -n "$MATCHED_DIMS" ]; then
      echo "Processing $(basename "$tsx_file") with $(basename "$MATCHED_DIMS")..." >&2
      TEMP_OUTPUT=$(mktemp)
      process_single_file "$tsx_file" "$MATCHED_DIMS" true > "$TEMP_OUTPUT"
      mv "$TEMP_OUTPUT" "$tsx_file"
      FILES_PROCESSED=$((FILES_PROCESSED + 1))
    fi
  done

  if [ "$FILES_PROCESSED" -eq 0 ]; then
    echo "Warning: No matching tsx/dimensions pairs found" >&2
  else
    echo "✓ Processed $FILES_PROCESSED files" >&2
  fi
  exit 0
fi

# Mode 1: Single file pair (backward compatible - stdout)
TSX_FILE="$1"
DIMENSIONS_JSON="$2"

if [ -z "$TSX_FILE" ] || [ -z "$DIMENSIONS_JSON" ]; then
  echo "Usage:" >&2
  echo "  $0 <tsx-file> <dimensions-json>              # Single file (stdout)" >&2
  echo "  $0 <tsx-dir> <dimensions-dir>                # Directory mode (in-place)" >&2
  echo "  $0 --pair <tsx1> <dims1> [--pair <tsx2>...]  # Multiple pairs (in-place)" >&2
  exit 1
fi

if [ ! -f "$TSX_FILE" ]; then
  echo "Error: TSX file not found: $TSX_FILE" >&2
  exit 1
fi

if [ ! -f "$DIMENSIONS_JSON" ]; then
  echo "Error: Dimensions JSON not found: $DIMENSIONS_JSON" >&2
  cat "$TSX_FILE"
  exit 0
fi

process_single_file "$TSX_FILE" "$DIMENSIONS_JSON" false

#!/usr/bin/env bash
#
# fix-component-instances.sh
#
# Adds dimensions to component usages based on parent context + name matching.
# Solves the problem where component usages like <NavigationBar className="..."/>
# don't have data-node-id and thus miss their instance dimensions.
#
# Algorithm:
# 1. Build map: parentId -> [{name, type, w, h}, ...]
# 2. For each component usage <ComponentName className="...">:
#    a. Find nearest ancestor data-node-id -> parentId
#    b. Look up instances under parentId
#    c. Match by name (normalize: remove spaces, case-insensitive)
#    d. Track usage count per parent to handle duplicates
#    e. Add h-[Xpx] if missing and instance has height
#
# Usage:
#   ./fix-component-instances.sh <tsx-file> <instances-json>
#
# Arguments:
#   tsx-file        - Path to generated TSX file
#   instances-json  - Path to instances JSON from capture-figma-metadata.sh
#
# Output:
#   Writes fixed code to stdout

set -e

TSX_FILE="$1"
INSTANCES_JSON="$2"

if [ -z "$TSX_FILE" ] || [ -z "$INSTANCES_JSON" ]; then
  echo "Usage: $0 <tsx-file> <instances-json>" >&2
  exit 1
fi

if [ ! -f "$TSX_FILE" ]; then
  echo "Error: TSX file not found: $TSX_FILE" >&2
  exit 1
fi

if [ ! -f "$INSTANCES_JSON" ]; then
  # No instances file, just output original
  cat "$TSX_FILE"
  exit 0
fi

if ! command -v jq &>/dev/null; then
  echo "Error: jq is required" >&2
  cat "$TSX_FILE"
  exit 0
fi

# Normalize component name: "Navigation Bar" -> "navigationbar"
normalize_name() {
  echo "$1" | tr '[:upper:]' '[:lower:]' | tr -d ' _-'
}

# Load instances into a format we can query
# Create temp files for each parent's instances
TEMP_DIR=$(mktemp -d)
trap "rm -rf $TEMP_DIR" EXIT

# Extract all parent IDs and their instance children
jq -r 'to_entries[] | .key as $parent | .value[] | select(.type == "instance") | "\($parent)\t\(.name)\t\(.w)\t\(.h)"' "$INSTANCES_JSON" > "$TEMP_DIR/all_instances.tsv"

# Track current parent context as we process lines
current_parent=""
FIXES_MADE=0

# For multiline component handling
pending_comp=""
pending_comp_line=""
pending_comp_parent=""

# Process TSX file
while IFS= read -r line || [ -n "$line" ]; do
  modified_line="$line"

  # Update current parent context if we see data-node-id
  if echo "$line" | grep -qE 'data-node-id="[^"]+"'; then
    node_id=$(echo "$line" | grep -oE 'data-node-id="[^"]+"' | tail -1 | sed 's/data-node-id="//;s/"//')
    if [ -n "$node_id" ]; then
      current_parent="$node_id"
    fi
  fi

  # Check for start of multiline component: <ComponentName (without className on same line)
  if echo "$line" | grep -qE '<[A-Z][a-zA-Z0-9_]+$' || echo "$line" | grep -qE '<[A-Z][a-zA-Z0-9_]+[[:space:]]*$'; then
    pending_comp=$(echo "$line" | grep -oE '<[A-Z][a-zA-Z0-9_]+' | sed 's/<//')
    pending_comp_parent="$current_parent"
    pending_comp_line="$line"
  fi

  # Check if this is className line for a pending multiline component
  if [ -n "$pending_comp" ] && echo "$line" | grep -qE '^[[:space:]]*className='; then
    if [ -n "$pending_comp_parent" ]; then
      normalized_comp=$(normalize_name "$pending_comp")

      while IFS=$'\t' read -r parent name w h; do
        if [ "$parent" = "$pending_comp_parent" ]; then
          normalized_inst=$(normalize_name "$name")
          if [ "$normalized_comp" = "$normalized_inst" ]; then
            if ! echo "$line" | grep -qE 'h-\[[0-9]+px\]|size-full'; then
              if [ "$h" -gt 0 ] 2>/dev/null; then
                modified_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}h-[${h}px] /")
                FIXES_MADE=$((FIXES_MADE + 1))
                echo "  Fixed: $pending_comp in parent $pending_comp_parent -> h-[${h}px] (multiline)" >&2
              fi
            fi
            break
          fi
        fi
      done < "$TEMP_DIR/all_instances.tsv"
    fi
    pending_comp=""
    pending_comp_parent=""
    pending_comp_line=""
  fi

  # Check if this is a single-line component usage: <ComponentName className="...">
  if echo "$line" | grep -qE '<[A-Z][a-zA-Z0-9_]+ [^>]*className='; then
    comp_name=$(echo "$line" | grep -oE '<[A-Z][a-zA-Z0-9_]+' | sed 's/<//')

    if [ -n "$comp_name" ] && [ -n "$current_parent" ]; then
      normalized_comp=$(normalize_name "$comp_name")

      while IFS=$'\t' read -r parent name w h; do
        if [ "$parent" = "$current_parent" ]; then
          normalized_inst=$(normalize_name "$name")
          if [ "$normalized_comp" = "$normalized_inst" ]; then
            if ! echo "$line" | grep -qE 'h-\[[0-9]+px\]|size-full'; then
              if [ "$h" -gt 0 ] 2>/dev/null; then
                modified_line=$(echo "$modified_line" | perl -pe "s/(className=\")/\${1}h-[${h}px] /")
                FIXES_MADE=$((FIXES_MADE + 1))
                echo "  Fixed: $comp_name in parent $current_parent -> h-[${h}px]" >&2
              fi
            fi
            break
          fi
        fi
      done < "$TEMP_DIR/all_instances.tsv"
    fi
  fi

  # Reset pending if we hit closing tag or different element
  if [ -n "$pending_comp" ] && echo "$line" | grep -qE '/>|>'; then
    if ! echo "$line" | grep -qE 'className='; then
      pending_comp=""
      pending_comp_parent=""
    fi
  fi

  echo "$modified_line"
done < "$TSX_FILE"

if [ "$FIXES_MADE" -gt 0 ]; then
  echo "  Applied $FIXES_MADE component instance dimension fixes" >&2
fi

#!/usr/bin/env bash
#
# process-figma.sh
#
# All-in-one Figma MCP processor:
#   1. Extracts design tokens → CSS variables file
#   2. Downloads assets with content-hash deduplication
#   3. Replaces Figma URLs with local paths
#   4. Outputs production-ready component
#
# Usage:
#   ./process-figma.sh <input> <output> <asset-dir> <url-prefix> [tokens-file]
#
# Example:
#   ./process-figma.sh \
#     /tmp/figma-to-react/captures/figma-237-2571.txt \
#     src/components/MyScreen.tsx \
#     public/figma-assets \
#     /figma-assets \
#     src/styles/figma-tokens.css

set -e

# Cross-platform sed -i (BSD vs GNU)
sed_i() {
  if [[ "$OSTYPE" == "darwin"* ]]; then
    sed -i '' "$@"
  else
    sed -i "$@"
  fi
}

INPUT="$1"
OUTPUT="$2"
ASSET_DIR="$3"
URL_PREFIX="$4"
TOKENS_FILE="${5:-}"

if [ -z "$INPUT" ] || [ -z "$OUTPUT" ] || [ -z "$ASSET_DIR" ] || [ -z "$URL_PREFIX" ]; then
  echo "Usage: $0 <input> <output> <asset-dir> <url-prefix> [tokens-file]" >&2
  echo "" >&2
  echo "Arguments:" >&2
  echo "  input       - Captured MCP response file" >&2
  echo "  output      - Output component path (.tsx)" >&2
  echo "  asset-dir   - Directory to save downloaded assets" >&2
  echo "  url-prefix  - URL prefix for assets in code (e.g., /assets)" >&2
  echo "  tokens-file - Optional. CSS tokens file path" >&2
  exit 1
fi

if [ ! -f "$INPUT" ]; then
  echo "Error: Input file not found: $INPUT" >&2
  exit 1
fi

SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"

# Create directories
mkdir -p "$ASSET_DIR"
mkdir -p "$(dirname "$OUTPUT")"

# Temp files (all under /tmp/figma-to-react/ for easy cleanup)
TMP_DIR="/tmp/figma-to-react/tmp"
mkdir -p "$TMP_DIR"
TEMP_CODE="$TMP_DIR/figma-code-$$.txt"
ASSET_LIST="$TMP_DIR/figma-assets-$$.txt"
MAPPING_FILE="$TMP_DIR/figma-mapping-$$.txt"
HASH_MAP="$TMP_DIR/figma-hashes-$$.txt"
trap "rm -f $TEMP_CODE $ASSET_LIST $MAPPING_FILE $HASH_MAP $TMP_DIR/figma-dl-$$-*.bin" EXIT

# Extract nodeId from input filename (e.g., figma-237-2571.txt -> 237-2571)
NODE_ID=$(basename "$INPUT" | sed -E 's/^figma-(.+)\.txt$/\1/')

# Read dimensions from metadata (saved by capture-figma-metadata.sh hook)
METADATA_FILE="/tmp/figma-to-react/metadata/${NODE_ID}.json"
if [ -f "$METADATA_FILE" ]; then
  FRAME_WIDTH=$(jq -r '.width' "$METADATA_FILE" 2>/dev/null)
  FRAME_HEIGHT=$(jq -r '.height' "$METADATA_FILE" 2>/dev/null)

  # Validate dimensions are positive integers (security: prevent injection)
  if ! [[ "$FRAME_WIDTH" =~ ^[0-9]+$ ]] || ! [[ "$FRAME_HEIGHT" =~ ^[0-9]+$ ]]; then
    FRAME_WIDTH=""
    FRAME_HEIGHT=""
  fi
else
  FRAME_WIDTH=""
  FRAME_HEIGHT=""
fi

echo "=== Figma → React Processor ===" >&2
echo "" >&2

# Step 1: Extract tokens (if tokens file specified)
if [ -n "$TOKENS_FILE" ]; then
  echo "Step 1: Extracting design tokens..." >&2
  if [ -x "$SCRIPT_DIR/extract-tokens.sh" ]; then
    "$SCRIPT_DIR/extract-tokens.sh" "$INPUT" "$TOKENS_FILE"
  else
    # Inline token extraction if script not available
    mkdir -p "$(dirname "$TOKENS_FILE")"
    {
      echo "/* Figma Design Tokens - auto-generated */"
      echo ":root {"
      grep -oE 'var\(--[^)]+\)' "$INPUT" | sort -u | while read -r var; do
        name=$(echo "$var" | sed -E 's/var\((--[^,]+),.*/\1/')
        fallback=$(echo "$var" | sed -E 's/var\([^,]+,([^)]+)\)/\1/')
        [ -n "$name" ] && [ -n "$fallback" ] && echo "  ${name}: ${fallback};"
      done
      echo "}"
    } > "$TOKENS_FILE"
    echo "Written: $TOKENS_FILE" >&2
  fi
  echo "" >&2
else
  echo "Step 1: Skipping token extraction (no tokens file specified)" >&2
  echo "" >&2
fi

# Step 2: Extract and download assets
echo "Step 2: Processing assets..." >&2

# Extract all asset URLs and their variable names
# Format: varName|url
# Use perl for reliable cross-platform regex
# Supports both:
#   - Remote Figma MCP: https://figma.com/api/mcp/asset/...
#   - Local Figma Desktop MCP: http://localhost:PORT/assets/...
perl -ne 'if (/const\s+(\w+)\s*=\s*"(https?:\/\/(?:(?:www\.)?figma\.com\/api\/mcp\/asset|localhost:\d+\/assets)\/[^"]+)"/) { print "$1|$2\n"; }' "$INPUT" > "$ASSET_LIST" || true

TOTAL_REFS=$(wc -l < "$ASSET_LIST" | tr -d ' ')
UNIQUE_URLS=$(cut -d'|' -f2 "$ASSET_LIST" | sort -u | wc -l | tr -d ' ')

echo "  Found $TOTAL_REFS asset references ($UNIQUE_URLS unique URLs)" >&2

> "$MAPPING_FILE"
> "$HASH_MAP"

if [ "$TOTAL_REFS" -gt 0 ]; then
  echo "  Downloading with content-hash deduplication..." >&2

  for URL in $(cut -d'|' -f2 "$ASSET_LIST" | sort -u); do
    [ -z "$URL" ] && continue

    # Get variable name for this URL (for naming)
    VAR_NAME=$(grep "|${URL}$" "$ASSET_LIST" | head -1 | cut -d'|' -f1)

    # Derive base filename from variable name
    BASE_NAME=$(echo "$VAR_NAME" | \
      sed -E 's/^img([A-Z])/\1/' | \
      sed -E 's/^img$/asset/' | \
      sed -E 's/^img([0-9])/asset-\1/' | \
      sed -E 's/([a-z])([A-Z])/\1-\2/g' | \
      tr '[:upper:]' '[:lower:]')

    # Download to temp
    TEMP_FILE="$TMP_DIR/figma-dl-$$-${BASE_NAME}.bin"
    if ! curl -sL "$URL" -o "$TEMP_FILE" 2>/dev/null; then
      echo "    ✗ Failed: $BASE_NAME" >&2
      continue
    fi

    # Hash content for deduplication
    HASH=$(md5 -q "$TEMP_FILE" 2>/dev/null || md5sum "$TEMP_FILE" | cut -d' ' -f1)

    # Check if we already have this content
    EXISTING=$(grep "^$HASH|" "$HASH_MAP" 2>/dev/null | cut -d'|' -f2 || true)

    if [ -n "$EXISTING" ]; then
      # Duplicate content - reuse existing file
      echo "    ↔ Duplicate: $BASE_NAME → $EXISTING" >&2
      rm "$TEMP_FILE"
      URL_PATH="$EXISTING"
    else
      # New unique content
      FILE_TYPE=$(file -b "$TEMP_FILE" 2>/dev/null || echo "unknown")
      case "$FILE_TYPE" in
        *"SVG"*) EXT="svg" ;;
        *"PNG"*) EXT="png" ;;
        *"JPEG"*|*"JPG"*) EXT="jpg" ;;
        *"GIF"*) EXT="gif" ;;
        *"WebP"*) EXT="webp" ;;
        *)
          # Check for SVG content
          if head -c 200 "$TEMP_FILE" 2>/dev/null | grep -q "<svg"; then
            EXT="svg"
          else
            EXT="png"
          fi
          ;;
      esac

      FILENAME="${BASE_NAME}.${EXT}"
      LOCAL_PATH="${ASSET_DIR}/${FILENAME}"
      URL_PATH="${URL_PREFIX}/${FILENAME}"

      # Handle filename collision (different content, same derived name)
      if [ -f "$LOCAL_PATH" ]; then
        SHORT_HASH="${HASH:0:6}"
        FILENAME="${BASE_NAME}-${SHORT_HASH}.${EXT}"
        LOCAL_PATH="${ASSET_DIR}/${FILENAME}"
        URL_PATH="${URL_PREFIX}/${FILENAME}"
      fi

      mv "$TEMP_FILE" "$LOCAL_PATH"
      echo "$HASH|$URL_PATH" >> "$HASH_MAP"
      echo "    ✓ Downloaded: $FILENAME" >&2
    fi

    # Map original URL → local path
    echo "$URL|$URL_PATH" >> "$MAPPING_FILE"
  done

  UNIQUE_FILES=$(wc -l < "$HASH_MAP" | tr -d ' ')
  echo "  Saved $UNIQUE_FILES unique files (deduplicated from $UNIQUE_URLS URLs)" >&2
fi
echo "" >&2

# Step 3: Transform code
echo "Step 3: Generating component..." >&2

# Start with the input file
cp "$INPUT" "$TEMP_CODE"

# Strip MCP instructions that appear after the React code
# These markers indicate where Figma's guidance text begins
perl -i -0777 -pe 's/(SUPER CRITICAL:|Node ids have been added|These styles are contained|Component descriptions:|IMPORTANT: After you call this tool).*//s' "$TEMP_CODE"

# Convert escaped slashes to hyphens in CSS variable references
# e.g., var(--color\/primary\/500, #fff) → var(--color-primary-500, #fff)
# This matches the token name cleanup in extract-tokens.sh
# Pattern matches CSS var names (--xxx) and replaces all slashes with hyphens in one pass
perl -i -pe 's/--[^\s,)]+/my $s=$&; $s=~s{\\?\/}{-}g; $s/ge' "$TEMP_CODE"

# Remove asset const declarations (const imgXxx = "https://...")
perl -i -pe 's/^const\s+\w+\s*=\s*"https?:\/\/(?:www\.figma\.com\/api\/mcp\/asset|localhost:\d+\/assets)\/[^"]+";?\s*\n?//gm' "$TEMP_CODE"

# Replace src={varName} with src="localPath"
while IFS='|' read -r VAR_NAME URL; do
  [ -z "$VAR_NAME" ] && continue
  LOCAL_PATH=$(grep "^${URL}|" "$MAPPING_FILE" 2>/dev/null | head -1 | cut -d'|' -f2)
  [ -z "$LOCAL_PATH" ] && continue

  # Handle both src={var} and src={ var } patterns
  sed_i "s|src={${VAR_NAME}}|src=\"${LOCAL_PATH}\"|g" "$TEMP_CODE"
  sed_i "s|src={ ${VAR_NAME} }|src=\"${LOCAL_PATH}\"|g" "$TEMP_CODE"
done < "$ASSET_LIST"

# Note: size-full on root element is intentionally preserved.
# The preview wrapper (FigmaPreview.tsx) constrains components to exact Figma dimensions
# using inline styles (width, height, overflow:hidden). This allows components to be
# responsive in production while maintaining pixel-perfect validation screenshots.
# See: tests/e2e/skill-integration.test.ts "Preview Wrapper Dimension Tests"

# Step 3.5: Fix collapsed containers
# Containers with only absolute children collapse to padding-only height
DIMENSIONS_FILE="/tmp/figma-to-react/metadata/${NODE_ID}-dimensions.json"
if [ -f "$DIMENSIONS_FILE" ] && [ -x "$SCRIPT_DIR/fix-collapsed-containers.sh" ]; then
  echo "" >&2
  echo "Step 3.5: Fixing collapsed containers..." >&2
  "$SCRIPT_DIR/fix-collapsed-containers.sh" "$TEMP_CODE" "$DIMENSIONS_FILE" > "$TEMP_CODE.fixed"
  mv "$TEMP_CODE.fixed" "$TEMP_CODE"
fi

# Step 3.6: Fix component instance dimensions
# Component usages like <NavigationBar/> don't have data-node-id, so their
# instance dimensions are lost. This step matches them by parent context + name.
INSTANCES_FILE="/tmp/figma-to-react/metadata/${NODE_ID}-instances.json"
if [ -f "$INSTANCES_FILE" ] && [ -x "$SCRIPT_DIR/fix-component-instances.sh" ]; then
  echo "" >&2
  echo "Step 3.6: Fixing component instance dimensions..." >&2
  "$SCRIPT_DIR/fix-component-instances.sh" "$TEMP_CODE" "$INSTANCES_FILE" > "$TEMP_CODE.fixed"
  mv "$TEMP_CODE.fixed" "$TEMP_CODE"
fi

# Step 4: Inject dimension export for preview route
# Components export figmaDimensions so preview can set container size
if [ -n "$FRAME_WIDTH" ] && [ -n "$FRAME_HEIGHT" ]; then
  echo "" >&2
  echo "Step 4: Injecting dimension export..." >&2
  DIMENSION_EXPORT="export const figmaDimensions = { width: ${FRAME_WIDTH}, height: ${FRAME_HEIGHT} };"

  # Check if file starts with 'use client' (Next.js App Router)
  # The directive MUST stay on line 1, so inject export after it
  if head -1 "$TEMP_CODE" | grep -q "^['\"]use client['\"]"; then
    # Insert after first line (preserving 'use client' at top)
    sed_i "1a\\
\\
${DIMENSION_EXPORT}\\
" "$TEMP_CODE"
    echo "  Added after 'use client': $DIMENSION_EXPORT" >&2
  else
    # No 'use client' - prepend to file
    echo -e "${DIMENSION_EXPORT}\n\n$(cat "$TEMP_CODE")" > "$TEMP_CODE"
    echo "  Added: $DIMENSION_EXPORT" >&2
  fi
fi

# Write output
cp "$TEMP_CODE" "$OUTPUT"

echo "  Written: $OUTPUT" >&2
echo "" >&2

# Summary
echo "=== Done ===" >&2
echo "" >&2
echo "Component: $OUTPUT" >&2
[ -n "$TOKENS_FILE" ] && echo "Tokens:    $TOKENS_FILE" >&2
echo "Assets:    $ASSET_DIR/ ($UNIQUE_FILES files)" >&2
echo "" >&2
echo "Next steps:" >&2
echo "  1. Import tokens in your CSS: @import \"$(basename "$TOKENS_FILE")\";" >&2
echo "  2. Rename component export if needed" >&2
echo "  3. Add interactivity (onClick, useState, etc.)" >&2