@atomixstudio/mcp 0.1.0 → 1.0.0

package/scripts/sync-component-tokens.js

@@ -1,678 +0,0 @@
-#!/usr/bin/env node
-/**
- * Sync Component Tokens from Atomix Lab
- * 
- * This script reads component-defaults.ts from atomix-lab and generates
- * component-tokens.ts for the MCP server.
- * 
- * Usage:
- *   node scripts/sync-component-tokens.js
- * 
- * Called automatically by:
- *   - npm run sync (in atomix-mcp)
- *   - npm run build (in atomix package, after token build)
- */
-
-const fs = require("fs");
-const path = require("path");
-
-// Paths
-const LAB_DEFAULTS_PATH = path.join(__dirname, "../../../apps/atomix-lab/src/config/component-defaults.ts");
-const MCP_TOKENS_PATH = path.join(__dirname, "../src/component-tokens.ts");
-
-// ============================================
-// PARSE COMPONENT DEFAULTS
-// ============================================
-
-function parseDefaults(content) {
-  const defaults = {};
-
-  // Extract BUTTON_DEFAULTS
-  const buttonMatch = content.match(/export const BUTTON_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (buttonMatch) {
-    defaults.button = parseButtonDefaults(buttonMatch[1]);
-  }
-
-  // Extract CARD_DEFAULTS  
-  const cardMatch = content.match(/export const CARD_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (cardMatch) {
-    defaults.card = parseCardDefaults(cardMatch[1]);
-  }
-
-  // Extract DIALOG_DEFAULTS
-  const dialogMatch = content.match(/export const DIALOG_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (dialogMatch) {
-    defaults.dialog = parseDialogDefaults(dialogMatch[1]);
-  }
-
-  // Extract INPUT_DEFAULTS
-  const inputMatch = content.match(/export const INPUT_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (inputMatch) {
-    defaults.input = parseInputDefaults(inputMatch[1]);
-  }
-
-  // Extract TEXTFIELD_DEFAULTS (becomes select in MCP)
-  const textfieldMatch = content.match(/export const TEXTFIELD_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (textfieldMatch) {
-    defaults.select = parseSelectDefaults(textfieldMatch[1]);
-  }
-
-  // Extract HEADING_DEFAULTS
-  const headingMatch = content.match(/export const HEADING_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (headingMatch) {
-    defaults.heading = parseHeadingDefaults(headingMatch[1]);
-  }
-
-  // Extract SELECTION_CONTROLS_DEFAULTS
-  const selectionMatch = content.match(/export const SELECTION_CONTROLS_DEFAULTS[^{]*(\{[\s\S]*?\n\});/);
-  if (selectionMatch) {
-    defaults.selectionControls = parseSelectionControlsDefaults(selectionMatch[1]);
-  }
-
-  return defaults;
-}
-
-// ============================================
-// INDIVIDUAL PARSERS (extract key info from TS)
-// ============================================
-
-function parseButtonDefaults(tsBlock) {
-  // Extract variant bgColors
-  const variants = {};
-  const variantMatches = tsBlock.matchAll(/(\w+):\s*\{\s*bgColor:\s*"([^"]+)"/g);
-  for (const match of variantMatches) {
-    variants[match[1]] = { bgColor: match[2] };
-  }
-
-  // Extract sizes
-  const sizes = {};
-  const sizeMatches = tsBlock.matchAll(/(sm|md|lg):\s*\{[^}]*borderRadius:\s*"([^"]+)"[^}]*typeSet:\s*"([^"]+)"/g);
-  for (const match of sizeMatches) {
-    sizes[match[1]] = { borderRadius: match[2], typeSet: match[3] };
-  }
-
-  return { variants, sizes };
-}
-
-function parseCardDefaults(tsBlock) {
-  const variants = {};
-  const variantMatches = tsBlock.matchAll(/(default|elevated|outlined|ghost):\s*\{[^}]*background:\s*"([^"]+)"[^}]*shadow:\s*"([^"]+)"/gs);
-  for (const match of variantMatches) {
-    variants[match[1]] = { background: match[2], shadow: match[3] };
-  }
-  return { variants };
-}
-
-function parseDialogDefaults(tsBlock) {
-  // Extract global props
-  const borderRadius = tsBlock.match(/borderRadius:\s*"([^"]+)"/)?.[1] || "2xl";
-  const overlayBackground = tsBlock.match(/overlayBackground:\s*"([^"]+)"/)?.[1] || "blackAlpha-600";
-  return { borderRadius, overlayBackground };
-}
-
-function parseInputDefaults(tsBlock) {
-  const textfieldColor = tsBlock.match(/textfieldColor:\s*"([^"]+)"/)?.[1] || "text-primary";
-  const placeholderColor = tsBlock.match(/placeholderColor:\s*"([^"]+)"/)?.[1] || "text-muted";
-  return { textfieldColor, placeholderColor };
-}
-
-function parseSelectDefaults(tsBlock) {
-  const dropdownBg = tsBlock.match(/background:\s*"([^"]+)"/)?.[1] || "bg-surface";
-  return { dropdownBackground: dropdownBg };
-}
-
-function parseHeadingDefaults(tsBlock) {
-  const fontFamily = tsBlock.match(/fontFamily:\s*"([^"]+)"/)?.[1] || "sans";
-  return { fontFamily };
-}
-
-function parseSelectionControlsDefaults(tsBlock) {
-  const variants = {};
-  const variantMatches = tsBlock.matchAll(/(checkbox|radio|toggle):\s*\{[^}]*backgroundChecked:\s*"([^"]+)"/gs);
-  for (const match of variantMatches) {
-    variants[match[1]] = { backgroundChecked: match[2] };
-  }
-  return { variants };
-}
-
-// ============================================
-// GENERATE MCP TOKENS
-// ============================================
-
-function generateMCPTokens(defaults) {
-  const components = {
-    button: {
-      description: "Interactive button component with multiple variants and sizes",
-      variants: {
-        primary: {
-          description: "Primary action button with brand color",
-          tokens: {
-            background: "colors.modes.{mode}.actionPrimary",
-            backgroundHover: "colors.modes.{mode}.actionPrimaryHover",
-            text: "colors.static.brand.primaryForeground",
-            border: "transparent",
-          },
-        },
-        secondary: {
-          description: "Secondary action button with subtle styling",
-          tokens: {
-            background: "colors.modes.{mode}.actionSecondary",
-            backgroundHover: "colors.modes.{mode}.actionSecondaryHover",
-            text: "colors.modes.{mode}.textPrimary",
-            border: "transparent",
-          },
-        },
-        outline: {
-          description: "Outline button with border and transparent background",
-          tokens: {
-            background: "transparent",
-            backgroundHover: "colors.modes.{mode}.bgMuted",
-            text: "colors.modes.{mode}.textPrimary",
-            border: "colors.modes.{mode}.borderPrimary",
-          },
-        },
-        ghost: {
-          description: "Ghost button with no background or border",
-          tokens: {
-            background: "transparent",
-            backgroundHover: "colors.modes.{mode}.bgMuted",
-            text: "colors.modes.{mode}.textPrimary",
-            border: "transparent",
-          },
-        },
-        destructive: {
-          description: "Destructive action button for delete/remove operations",
-          tokens: {
-            background: "colors.modes.{mode}.actionDestructive",
-            backgroundHover: "colors.modes.{mode}.actionDestructiveHover",
-            text: "colors.static.white",
-            border: "transparent",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            height: "sizing.button.sm.height",
-            padding: "spacing.inset.sm",
-            fontSize: "typography.fontSize.xs",
-            borderRadius: defaults.button?.sizes?.sm?.borderRadius 
-              ? `radius.scale.${defaults.button.sizes.sm.borderRadius}`
-              : "radius.scale.md",
-          },
-        },
-        md: {
-          tokens: {
-            height: "sizing.button.md.height",
-            padding: "spacing.inset.md",
-            fontSize: "typography.fontSize.sm",
-            borderRadius: defaults.button?.sizes?.md?.borderRadius
-              ? `radius.scale.${defaults.button.sizes.md.borderRadius}`
-              : "radius.scale.md",
-          },
-        },
-        lg: {
-          tokens: {
-            height: "sizing.button.lg.height",
-            padding: "spacing.inset.lg",
-            fontSize: "typography.fontSize.md",
-            borderRadius: defaults.button?.sizes?.lg?.borderRadius
-              ? `radius.scale.${defaults.button.sizes.lg.borderRadius}`
-              : "radius.scale.lg",
-          },
-        },
-      },
-      shared: {
-        fontFamily: "typography.fontFamily.sans",
-        fontWeight: "typography.fontWeight.medium",
-        transitionDuration: "motion.duration.fast",
-        transitionEasing: "motion.easing.ease",
-        focusRing: "shadows.focus.ring",
-      },
-      cssVariables: [
-        "--atomix-button-bg",
-        "--atomix-button-text",
-        "--atomix-button-border",
-        "--atomix-button-radius",
-      ],
-    },
-
-    card: {
-      description: "Container component for grouping related content",
-      variants: {
-        default: {
-          description: "Standard card with subtle background",
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "colors.modes.{mode}.borderPrimary",
-            shadow: "shadows.elevation.sm",
-          },
-        },
-        outlined: {
-          description: "Card with visible border, no shadow",
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "colors.modes.{mode}.borderSecondary",
-            shadow: "none",
-          },
-        },
-        elevated: {
-          description: "Card with prominent elevation shadow",
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "transparent",
-            shadow: "shadows.elevation.md",
-          },
-        },
-        filled: {
-          description: "Card with muted background fill",
-          tokens: {
-            background: "colors.modes.{mode}.bgMuted",
-            border: "transparent",
-            shadow: "none",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            padding: "spacing.inset.md",
-            borderRadius: "radius.scale.lg",
-            gap: "spacing.gap.sm",
-          },
-        },
-        md: {
-          tokens: {
-            padding: "spacing.inset.lg",
-            borderRadius: "radius.scale.xl",
-            gap: "spacing.gap.md",
-          },
-        },
-        lg: {
-          tokens: {
-            padding: "spacing.inset.xl",
-            borderRadius: "radius.scale.2xl",
-            gap: "spacing.gap.lg",
-          },
-        },
-      },
-      shared: {
-        titleColor: "colors.modes.{mode}.textPrimary",
-        descriptionColor: "colors.modes.{mode}.textSecondary",
-        transitionDuration: "motion.duration.normal",
-      },
-    },
-
-    dialog: {
-      description: "Modal dialog for focused interactions",
-      variants: {
-        default: {
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "colors.modes.{mode}.borderPrimary",
-            shadow: "shadows.elevation.xl",
-            overlayBackground: defaults.dialog?.overlayBackground || "colors.scales.blackAlpha.600",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            width: "sizing.modal.sm",
-            padding: "spacing.inset.lg",
-            borderRadius: `radius.scale.${defaults.dialog?.borderRadius || "xl"}`,
-          },
-        },
-        md: {
-          tokens: {
-            width: "sizing.modal.md",
-            padding: "spacing.inset.xl",
-            borderRadius: `radius.scale.${defaults.dialog?.borderRadius || "2xl"}`,
-          },
-        },
-        lg: {
-          tokens: {
-            width: "sizing.modal.lg",
-            padding: "spacing.inset.2xl",
-            borderRadius: `radius.scale.${defaults.dialog?.borderRadius || "2xl"}`,
-          },
-        },
-      },
-      shared: {
-        titleColor: "colors.modes.{mode}.textPrimary",
-        descriptionColor: "colors.modes.{mode}.textSecondary",
-        animationDuration: "motion.duration.normal",
-        animationEasing: "motion.easing.expressiveEntrance",
-      },
-    },
-
-    input: {
-      description: "Text input field component",
-      variants: {
-        default: {
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "colors.modes.{mode}.borderPrimary",
-            borderFocus: "colors.static.brand.primary",
-            text: `colors.modes.{mode}.${defaults.input?.textfieldColor || "textPrimary"}`,
-            placeholder: `colors.modes.{mode}.${defaults.input?.placeholderColor || "textMuted"}`,
-          },
-        },
-        filled: {
-          tokens: {
-            background: "colors.modes.{mode}.bgMuted",
-            border: "transparent",
-            borderFocus: "colors.static.brand.primary",
-            text: "colors.modes.{mode}.textPrimary",
-            placeholder: "colors.modes.{mode}.textMuted",
-          },
-        },
-        error: {
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            border: "colors.adaptive.error.{mode}.border",
-            text: "colors.modes.{mode}.textPrimary",
-            placeholder: "colors.modes.{mode}.textMuted",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            height: "sizing.input.sm.height",
-            padding: "spacing.inset.sm",
-            fontSize: "typography.fontSize.sm",
-            borderRadius: "radius.scale.md",
-          },
-        },
-        md: {
-          tokens: {
-            height: "sizing.input.md.height",
-            padding: "spacing.inset.md",
-            fontSize: "typography.fontSize.sm",
-            borderRadius: "radius.scale.md",
-          },
-        },
-        lg: {
-          tokens: {
-            height: "sizing.input.lg.height",
-            padding: "spacing.inset.lg",
-            fontSize: "typography.fontSize.md",
-            borderRadius: "radius.scale.lg",
-          },
-        },
-      },
-      shared: {
-        fontFamily: "typography.fontFamily.sans",
-        transitionDuration: "motion.duration.fast",
-        focusRing: "shadows.focus.ring",
-      },
-    },
-
-    select: {
-      description: "Dropdown select component",
-      variants: {
-        default: {
-          tokens: {
-            triggerBackground: "colors.modes.{mode}.bgSurface",
-            triggerBorder: "colors.modes.{mode}.borderPrimary",
-            contentBackground: "colors.modes.{mode}.bgSurface",
-            contentBorder: "colors.modes.{mode}.borderPrimary",
-            contentShadow: "shadows.elevation.lg",
-            itemHover: "colors.modes.{mode}.bgMuted",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            height: "sizing.input.sm.height",
-            fontSize: "typography.fontSize.sm",
-            borderRadius: "radius.scale.md",
-          },
-        },
-        md: {
-          tokens: {
-            height: "sizing.input.md.height",
-            fontSize: "typography.fontSize.sm",
-            borderRadius: "radius.scale.md",
-          },
-        },
-      },
-      shared: {
-        fontFamily: "typography.fontFamily.sans",
-        transitionDuration: "motion.duration.fast",
-      },
-    },
-
-    heading: {
-      description: "Typography component for titles, descriptions, and eyebrows",
-      variants: {
-        "title-only": {
-          tokens: {
-            titleColor: "colors.modes.{mode}.textPrimary",
-          },
-        },
-        "with-description": {
-          tokens: {
-            titleColor: "colors.modes.{mode}.textPrimary",
-            descriptionColor: "colors.modes.{mode}.textSecondary",
-          },
-        },
-        full: {
-          tokens: {
-            eyebrowColor: "colors.static.brand.primary",
-            titleColor: "colors.modes.{mode}.textPrimary",
-            descriptionColor: "colors.modes.{mode}.textSecondary",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            titleTypeSet: "typography.typeSets.title-sm",
-            descriptionTypeSet: "typography.typeSets.text-small-regular",
-            gap: "spacing.scale.xs",
-          },
-        },
-        md: {
-          tokens: {
-            titleTypeSet: "typography.typeSets.title-md",
-            descriptionTypeSet: "typography.typeSets.text-normal-regular",
-            gap: "spacing.scale.sm",
-          },
-        },
-        lg: {
-          tokens: {
-            titleTypeSet: "typography.typeSets.title-lg",
-            descriptionTypeSet: "typography.typeSets.text-large-regular",
-            gap: "spacing.scale.sm",
-          },
-        },
-      },
-      shared: {
-        fontFamily: `typography.fontFamily.${defaults.heading?.fontFamily || "sans"}`,
-      },
-    },
-
-    checkbox: {
-      description: "Checkbox selection control",
-      variants: {
-        default: {
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            backgroundChecked: "colors.modes.{mode}.actionPrimary",
-            border: "colors.modes.{mode}.borderPrimary",
-            borderChecked: "colors.modes.{mode}.actionPrimary",
-            indicator: "colors.static.white",
-            labelColor: "colors.modes.{mode}.textPrimary",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            size: "16px",
-            borderRadius: "radius.scale.sm",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-        md: {
-          tokens: {
-            size: "20px",
-            borderRadius: "radius.scale.sm",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-      },
-      shared: {
-        transitionDuration: "motion.duration.fast",
-        focusRing: "shadows.focus.ring",
-      },
-    },
-
-    radio: {
-      description: "Radio button selection control",
-      variants: {
-        default: {
-          tokens: {
-            background: "colors.modes.{mode}.bgSurface",
-            backgroundChecked: "colors.modes.{mode}.actionPrimary",
-            border: "colors.modes.{mode}.borderPrimary",
-            borderChecked: "colors.modes.{mode}.actionPrimary",
-            indicator: "colors.static.white",
-            labelColor: "colors.modes.{mode}.textPrimary",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            size: "16px",
-            indicatorSize: "6px",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-        md: {
-          tokens: {
-            size: "20px",
-            indicatorSize: "8px",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-      },
-      shared: {
-        transitionDuration: "motion.duration.fast",
-        focusRing: "shadows.focus.ring",
-      },
-    },
-
-    toggle: {
-      description: "Toggle switch control",
-      variants: {
-        default: {
-          tokens: {
-            trackBackground: "colors.modes.{mode}.bgMuted",
-            trackBackgroundChecked: "colors.modes.{mode}.actionPrimary",
-            thumbBackground: "colors.static.white",
-            labelColor: "colors.modes.{mode}.textPrimary",
-          },
-        },
-      },
-      sizes: {
-        sm: {
-          tokens: {
-            trackWidth: "36px",
-            trackHeight: "20px",
-            thumbSize: "16px",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-        md: {
-          tokens: {
-            trackWidth: "44px",
-            trackHeight: "24px",
-            thumbSize: "20px",
-            labelFontSize: "typography.fontSize.sm",
-          },
-        },
-      },
-      shared: {
-        transitionDuration: "motion.duration.fast",
-        transitionEasing: "motion.easing.spring",
-        focusRing: "shadows.focus.ring",
-      },
-    },
-  };
-
-  return components;
-}
-
-// ============================================
-// MAIN
-// ============================================
-
-function main() {
-  console.log("Syncing component tokens from Atomix Lab...");
-
-  // Check if source file exists
-  if (!fs.existsSync(LAB_DEFAULTS_PATH)) {
-    console.error(`Error: Could not find ${LAB_DEFAULTS_PATH}`);
-    process.exit(1);
-  }
-
-  // Read and parse defaults
-  const content = fs.readFileSync(LAB_DEFAULTS_PATH, "utf-8");
-  const defaults = parseDefaults(content);
-  
-  console.log(`  Parsed ${Object.keys(defaults).length} component defaults`);
-
-  // Generate MCP tokens
-  const components = generateMCPTokens(defaults);
-
-  // Generate output file
-  const output = `/**
- * Component Token Mappings
- * 
- * AUTO-GENERATED from apps/atomix-lab/src/config/component-defaults.ts
- * DO NOT EDIT MANUALLY - run \`npm run sync\` to regenerate.
- * 
- * Maps each component to its design tokens.
- * This allows AI tools to understand which tokens apply to which components.
- * 
- * Last synced: ${new Date().toISOString()}
- */
-
-export interface ComponentTokenConfig {
-  description: string;
-  variants?: Record<string, VariantTokens>;
-  sizes?: Record<string, SizeTokens>;
-  shared?: Record<string, string>;
-  cssVariables?: string[];
-  tailwindClasses?: string[];
-}
-
-export interface VariantTokens {
-  description?: string;
-  tokens: Record<string, string>;
-}
-
-export interface SizeTokens {
-  description?: string;
-  tokens: Record<string, string>;
-}
-
-export const COMPONENT_TOKENS: Record<string, ComponentTokenConfig> = ${JSON.stringify(components, null, 2)};
-`;
-
-  // Write output
-  fs.writeFileSync(MCP_TOKENS_PATH, output, "utf-8");
-  console.log(`  ✓ Written to ${MCP_TOKENS_PATH}`);
-
-  // Also rebuild MCP
-  console.log("\nTo apply changes, rebuild the MCP server:");
-  console.log("  cd packages/atomix-mcp && npm run build");
-}
-
-main();
-