@polymorphism-tech/morph-spec 9.0.0 → 9.2.0

package/src/lib/detectors/design-system-detector.js

@@ -1,188 +0,0 @@
-/**
- * @fileoverview Design System Detector
- *
- * Detects if a design system exists for the project or feature.
- * Checks multiple locations in priority order.
- *
- * @module design-system-detector
- */
-
-import { existsSync, readFileSync, readdirSync } from 'fs';
-import { join } from 'path';
-
-const SKIP_DIRS = new Set(['node_modules', '.git', '.morph', 'dist', 'build', '.next', 'obj', 'bin', '.vs']);
-const CSS_SCAN_MAX_DEPTH = 6;
-
-/**
- * Recursively walk a directory collecting files with given extensions.
- * @param {string} dir - Directory to walk
- * @param {string[]} extensions - File extensions to collect (e.g. ['.css', '.scss'])
- * @param {string[]} files - Accumulator array (mutated in-place)
- * @param {number} depth - Current recursion depth
- * @param {number} maxDepth - Maximum recursion depth
- */
-function walkDirForCss(dir, extensions, files, depth, maxDepth) {
-  if (depth > maxDepth) return;
-  let entries;
-  try {
-    entries = readdirSync(dir, { withFileTypes: true });
-  } catch {
-    return;
-  }
-  for (const entry of entries) {
-    if (entry.isDirectory()) {
-      if (!SKIP_DIRS.has(entry.name)) {
-        walkDirForCss(join(dir, entry.name), extensions, files, depth + 1, maxDepth);
-      }
-    } else if (entry.isFile()) {
-      const lower = entry.name.toLowerCase();
-      if (extensions.some(ext => lower.endsWith(ext))) {
-        files.push(join(dir, entry.name));
-      }
-    }
-  }
-}
-
-/**
- * Detect design system for project or feature
- * @param {string} projectPath - Root path of the project
- * @param {string|null} featureName - Feature name (optional, checks feature-level if provided)
- * @returns {Object} { hasDesignSystem, path, isProjectLevel, isFeatureLevel, source }
- */
-export function detectDesignSystem(projectPath, featureName = null) {
-  const result = {
-    hasDesignSystem: false,
-    path: null,
-    isProjectLevel: false,
-    isFeatureLevel: false,
-    source: null
-  };
-
-  // Priority 1: Feature-level design system (if feature specified)
-  if (featureName) {
-    const featureDesignSystemPath = join(
-      projectPath,
-      '.morph/features',
-      featureName,
-      '1-design',
-      'design-system.md'
-    );
-
-    if (existsSync(featureDesignSystemPath)) {
-      return {
-        hasDesignSystem: true,
-        path: featureDesignSystemPath,
-        isProjectLevel: false,
-        isFeatureLevel: true,
-        source: 'feature-output'
-      };
-    }
-  }
-
-  // Priority 2: Project-level design system (markdown)
-  const projectDesignSystemPath = join(projectPath, '.morph/context/design-system.md');
-  if (existsSync(projectDesignSystemPath)) {
-    return {
-      hasDesignSystem: true,
-      path: projectDesignSystemPath,
-      isProjectLevel: true,
-      isFeatureLevel: false,
-      source: 'project-markdown'
-    };
-  }
-
-  // Priority 3: Generated CSS design system
-  const cssDesignSystemPath = join(projectPath, 'wwwroot/css/design-system.css');
-  if (existsSync(cssDesignSystemPath)) {
-    return {
-      hasDesignSystem: true,
-      path: cssDesignSystemPath,
-      isProjectLevel: true,
-      isFeatureLevel: false,
-      source: 'generated-css'
-    };
-  }
-
-  // Priority 4: Recursively scan frontend root directories for CSS/SCSS with design tokens
-  const frontendRoots = ['wwwroot', 'styles', 'src/styles', 'src', 'public'];
-  const extensions = ['.css', '.scss'];
-  const collected = [];
-
-  for (const root of frontendRoots) {
-    const rootPath = join(projectPath, root);
-    if (existsSync(rootPath)) {
-      walkDirForCss(rootPath, extensions, collected, 0, CSS_SCAN_MAX_DEPTH);
-    }
-  }
-
-  // Deduplicate by resolved path
-  const seen = new Set();
-  const cssFiles = [];
-  for (const file of collected) {
-    if (!seen.has(file)) {
-      seen.add(file);
-      cssFiles.push(file);
-    }
-  }
-
-  // Sort for deterministic first-match across platforms
-  cssFiles.sort();
-
-  for (const cssFile of cssFiles) {
-    try {
-      const content = readFileSync(cssFile, 'utf8');
-      const hasDesignTokens = /:root\s*\{[\s\S]*?--/.test(content);
-      if (hasDesignTokens) {
-        return {
-          hasDesignSystem: true,
-          path: cssFile,
-          isProjectLevel: true,
-          isFeatureLevel: false,
-          source: 'existing-css-variables'
-        };
-      }
-    } catch {
-      // Continue checking other files
-    }
-  }
-
-  // No design system found
-  return result;
-}
-
-/**
- * Get recommended design system locations based on project type
- * @param {string} projectPath - Root path of the project
- * @returns {Object} { markdown, css, description }
- */
-export function getRecommendedLocations(projectPath) {
-  try {
-    const configPath = join(projectPath, '.morph/config/config.json');
-
-    let projectType = 'unknown';
-    if (existsSync(configPath)) {
-      const config = JSON.parse(readFileSync(configPath, 'utf8'));
-      projectType = config.project?.type || 'unknown';
-    }
-
-    // Default locations
-    const locations = {
-      markdown: '.morph/context/design-system.md',
-      css: 'public/design-system.css',
-      description: 'Project-level design system (shared across features)'
-    };
-
-    // Adjust based on project type
-    if (projectType === 'nextjs' || projectType.includes('nextjs')) {
-      locations.css = 'styles/design-system.css';
-    }
-
-    return locations;
-  } catch {
-    return {
-      markdown: '.morph/context/design-system.md',
-      css: 'wwwroot/css/design-system.css',
-      description: 'Project-level design system (shared across features)'
-    };
-  }
-}

package/src/lib/generators/design-system-generator.js

@@ -1,508 +0,0 @@
-/**
- * MORPH-SPEC Design System Generator Library
- *
- * Reads design-system.md and generates:
- * - CSS variables (design-system.css)
- *
- * Supports BOTH:
- * - New CSS :root format (design-system.md template v2)
- * - Old markdown list format (backward compat)
- *
- * Used both by CLI commands and internal automation.
- */
-
-import { readFileSync, existsSync } from 'fs';
-
-// ============================================================================
-// CSS :root Helpers
-// ============================================================================
-
-/**
- * Extract all CSS :root blocks from markdown (inside ```css fences)
- * @param {string} markdown
- * @returns {string} Combined CSS content from all :root blocks
- */
-function extractCSSRootBlocks(markdown) {
-  const cssBlocks = [];
-  const fenceRegex = /```css\s*\n([\s\S]*?)```/g;
-  let match;
-  while ((match = fenceRegex.exec(markdown)) !== null) {
-    cssBlocks.push(match[1]);
-  }
-  return cssBlocks.join('\n');
-}
-
-/**
- * Extract CSS custom properties from :root blocks
- * Returns array of { name, value } for all --xxx: yyy; declarations
- */
-function extractCSSProperties(cssContent) {
-  const props = [];
-  const propRegex = /(--[\w-]+)\s*:\s*([^;]+);/g;
-  let match;
-  while ((match = propRegex.exec(cssContent)) !== null) {
-    props.push({ name: match[1].trim(), value: match[2].trim() });
-  }
-  return props;
-}
-
-// ============================================================================
-// Parsing Functions
-// ============================================================================
-
-/**
- * Parse colors from markdown — supports CSS :root format and old markdown format
- * @param {string} markdown - Markdown content
- * @returns {Object} Colors object with primary, accent, secondary, neutral, semantic, surface, text, other
- */
-export function parseColors(markdown) {
-  const colors = {
-    primary: {},
-    accent: {},
-    secondary: {},
-    neutral: {},
-    semantic: {},
-    surface: {},
-    text: {},
-    other: {}
-  };
-
-  // Try CSS :root format first
-  const cssContent = extractCSSRootBlocks(markdown);
-  const props = extractCSSProperties(cssContent);
-
-  let cssColorCount = 0;
-
-  for (const { name, value } of props) {
-    if (!name.startsWith('--color-')) continue;
-
-    const suffix = name.slice('--color-'.length); // e.g. "primary", "primary-light", "neutral-500"
-
-    if (suffix.startsWith('primary-rgb')) {
-      // Store RGB metadata as-is
-      colors.primary['rgb'] = value;
-      cssColorCount++;
-    } else if (suffix.startsWith('primary')) {
-      const variant = suffix.slice('primary'.length).replace(/^-/, '') || 'default';
-      colors.primary[variant] = value;
-      cssColorCount++;
-    } else if (suffix.startsWith('accent')) {
-      const variant = suffix.slice('accent'.length).replace(/^-/, '') || 'default';
-      colors.accent[variant] = value;
-      cssColorCount++;
-    } else if (suffix.startsWith('neutral-')) {
-      const variant = suffix.slice('neutral-'.length);
-      colors.neutral[variant] = value;
-      cssColorCount++;
-    } else if (suffix.startsWith('surface-')) {
-      const variant = suffix.slice('surface-'.length);
-      colors.surface[variant] = value;
-      cssColorCount++;
-    } else if (suffix.startsWith('text-')) {
-      const variant = suffix.slice('text-'.length);
-      colors.text[variant] = value;
-      cssColorCount++;
-    } else if (suffix === 'success' || suffix === 'warning' || suffix === 'error' || suffix === 'info') {
-      colors.semantic[suffix] = value;
-      cssColorCount++;
-    } else if (suffix === 'border') {
-      colors.other['border'] = value;
-      cssColorCount++;
-    } else {
-      // Any other --color-xxx token
-      colors.other[suffix] = value;
-      cssColorCount++;
-    }
-  }
-
-  // If CSS format found colors, return them
-  if (cssColorCount > 0) {
-    return colors;
-  }
-
-  // FALL BACK to old markdown regex format
-  const colorRegex = /(?:^|\n)[-*]\s+\*\*([^*]+)\*\*[^\(]*\(`(#[0-9A-Fa-f]{6})`\)/gm;
-
-  let match;
-  while ((match = colorRegex.exec(markdown)) !== null) {
-    const [, name, hex] = match;
-
-    if (name.includes('Primary')) {
-      const variant = name.match(/\d+/)?.[0] || 'default';
-      colors.primary[variant] = hex;
-    } else if (name.includes('Secondary')) {
-      const variant = name.match(/\d+/)?.[0] || 'default';
-      colors.secondary[variant] = hex;
-    } else if (name.includes('Neutral') || name.includes('Gray')) {
-      const variant = name.match(/\d+/)?.[0] || 'default';
-      colors.neutral[variant] = hex;
-    } else if (name.includes('Success') || name.includes('Error') || name.includes('Warning') || name.includes('Info')) {
-      const type = name.toLowerCase().replace(/\s+/g, '-');
-      colors.semantic[type] = hex;
-    }
-  }
-
-  return colors;
-}
-
-/**
- * Parse typography from markdown — supports CSS :root format and old markdown format
- * @param {string} markdown - Markdown content
- * @returns {Object} Typography with fontFamily, fontSize, fontWeight, lineHeight
- */
-export function parseTypography(markdown) {
-  const typography = {
-    fontFamily: {},
-    fontSize: {},
-    fontWeight: {},
-    lineHeight: {}
-  };
-
-  // Try CSS :root format first
-  const cssContent = extractCSSRootBlocks(markdown);
-  const props = extractCSSProperties(cssContent);
-
-  let cssTypoCount = 0;
-
-  for (const { name, value } of props) {
-    if (name === '--font-display') {
-      typography.fontFamily.display = value;
-      cssTypoCount++;
-    } else if (name === '--font-body') {
-      typography.fontFamily.body = value;
-      cssTypoCount++;
-    } else if (name === '--font-mono') {
-      typography.fontFamily.mono = value;
-      cssTypoCount++;
-    } else if (name.startsWith('--text-')) {
-      // Font sizes: --text-xs, --text-sm, --text-base, etc.
-      const sizeName = name.slice('--text-'.length);
-      typography.fontSize[sizeName] = value;
-      cssTypoCount++;
-    } else if (name.startsWith('--font-weight-')) {
-      const weightName = name.slice('--font-weight-'.length);
-      typography.fontWeight[weightName] = value;
-      cssTypoCount++;
-    } else if (name.startsWith('--leading-')) {
-      const leadingName = name.slice('--leading-'.length);
-      typography.lineHeight[leadingName] = value;
-      cssTypoCount++;
-    }
-  }
-
-  // If CSS format found typography, return it
-  if (cssTypoCount > 0) {
-    return typography;
-  }
-
-  // FALL BACK to old markdown format
-  // Match font family
-  const fontFamilyRegex = /(?:font[- ]?family|typeface)[:\s]+([^\n]+)/gi;
-  const fontMatch = fontFamilyRegex.exec(markdown);
-  if (fontMatch) {
-    typography.fontFamily.primary = fontMatch[1].trim();
-  }
-
-  // Match font sizes (but exclude spacing-related)
-  const fontSizeRegex = /(?:^|\n)[-*]\s+\*\*([^*]+)\*\*[^:]*:\s*(\d+(?:\.\d+)?(?:rem|px|em))/gm;
-  let match;
-  while ((match = fontSizeRegex.exec(markdown)) !== null) {
-    const [, name, size] = match;
-    const lowerName = name.toLowerCase();
-    // Skip if it's spacing-related
-    if (lowerName.includes('spacing') || lowerName.includes('gap') || lowerName.includes('margin') || lowerName.includes('padding')) {
-      continue;
-    }
-    const cleanName = name.trim().toLowerCase().replace(/\s+/g, '-');
-    typography.fontSize[cleanName] = size;
-  }
-
-  return typography;
-}
-
-/**
- * Parse spacing from markdown — supports CSS :root format and old markdown format
- * @param {string} markdown - Markdown content
- * @returns {Object} Spacing values
- */
-export function parseSpacing(markdown) {
-  const spacing = {};
-
-  // Try CSS :root format first
-  const cssContent = extractCSSRootBlocks(markdown);
-  const props = extractCSSProperties(cssContent);
-
-  let cssSpaceCount = 0;
-
-  for (const { name, value } of props) {
-    if (name.startsWith('--space-')) {
-      const spaceName = name.slice('--space-'.length);
-      spacing[spaceName] = value;
-      cssSpaceCount++;
-    }
-  }
-
-  // If CSS format found spacing, return it
-  if (cssSpaceCount > 0) {
-    return spacing;
-  }
-
-  // FALL BACK to old markdown format
-  const spacingRegex = /(?:^|\n)[-*]\s+\*\*([^*]+)\*\*[^:]*:\s*(\d+(?:\.\d+)?(?:rem|px|em))/gm;
-  let match;
-  while ((match = spacingRegex.exec(markdown)) !== null) {
-    const [, name, value] = match;
-    if (name.toLowerCase().includes('spacing') || name.toLowerCase().includes('gap') || name.toLowerCase().includes('margin') || name.toLowerCase().includes('padding')) {
-      const cleanName = name.trim().toLowerCase().replace(/\s+/g, '-');
-      spacing[cleanName] = value;
-    }
-  }
-
-  return spacing;
-}
-
-/**
- * Parse motion tokens from markdown (CSS :root format only)
- * @param {string} markdown - Markdown content
- * @returns {Object} { durations, easings, scroll }
- */
-export function parseMotion(markdown) {
-  const motion = {
-    durations: {},
-    easings: {},
-    scroll: {}
-  };
-
-  const cssContent = extractCSSRootBlocks(markdown);
-  const props = extractCSSProperties(cssContent);
-
-  for (const { name, value } of props) {
-    if (name.startsWith('--duration-')) {
-      const key = name.slice('--duration-'.length);
-      motion.durations[key] = value;
-    } else if (name.startsWith('--easing-')) {
-      const key = name.slice('--easing-'.length);
-      motion.easings[key] = value;
-    } else if (name.startsWith('--scroll-')) {
-      const key = name.slice('--scroll-'.length);
-      motion.scroll[key] = value;
-    }
-  }
-
-  return motion;
-}
-
-/**
- * Parse advanced effects tokens from markdown (CSS :root format only)
- * @param {string} markdown - Markdown content
- * @returns {Object} { glass, aurora, perspective, container, viewTransition, noise }
- */
-export function parseAdvancedEffects(markdown) {
-  const effects = {
-    glass: {},
-    aurora: {},
-    perspective: {},
-    container: {},
-    viewTransition: {},
-    noise: {}
-  };
-
-  const cssContent = extractCSSRootBlocks(markdown);
-  const props = extractCSSProperties(cssContent);
-
-  for (const { name, value } of props) {
-    if (name.startsWith('--glass-')) {
-      const key = name.slice('--glass-'.length);
-      effects.glass[key] = value;
-    } else if (name.startsWith('--aurora-')) {
-      const key = name.slice('--aurora-'.length);
-      effects.aurora[key] = value;
-    } else if (name.startsWith('--noise-')) {
-      const key = name.slice('--noise-'.length);
-      effects.noise[key] = value;
-    } else if (name.startsWith('--perspective-')) {
-      const key = name.slice('--perspective-'.length);
-      effects.perspective[key] = value;
-    } else if (name.startsWith('--container-')) {
-      const key = name.slice('--container-'.length);
-      effects.container[key] = value;
-    } else if (name.startsWith('--view-transition-')) {
-      const key = name.slice('--view-transition-'.length);
-      effects.viewTransition[key] = value;
-    }
-  }
-
-  return effects;
-}
-
-/**
- * Parse all design system properties from markdown
- * @param {string} markdownPath - Path to design-system.md file
- * @returns {Object} Parsed design system with colors, typography, spacing, motion, effects
- */
-export function parseDesignSystem(markdownPath) {
-  if (!existsSync(markdownPath)) {
-    throw new Error(`File not found: ${markdownPath}`);
-  }
-
-  const markdown = readFileSync(markdownPath, 'utf-8');
-
-  return {
-    colors: parseColors(markdown),
-    typography: parseTypography(markdown),
-    spacing: parseSpacing(markdown),
-    motion: parseMotion(markdown),
-    effects: parseAdvancedEffects(markdown)
-  };
-}
-
-// ============================================================================
-// Generation Functions
-// ============================================================================
-
-/**
- * Helper to emit CSS variable entries for a color category
- */
-function emitColorCategory(colors, prefix, label) {
-  if (Object.keys(colors).length === 0) return '';
-  let css = `  /* ${label} */\n`;
-  Object.entries(colors).forEach(([variant, value]) => {
-    if (variant === 'rgb') {
-      css += `  --color-${prefix}-rgb: ${value};\n`;
-    } else if (variant === 'default') {
-      css += `  --color-${prefix}: ${value};\n`;
-    } else {
-      css += `  --color-${prefix}-${variant}: ${value};\n`;
-    }
-  });
-  css += `\n`;
-  return css;
-}
-
-/**
- * Generate CSS variables file
- * @param {Object} colors - Colors object
- * @param {Object} typography - Typography object
- * @param {Object} spacing - Spacing object
- * @returns {string} CSS content
- */
-export function generateCSS(colors, typography, spacing) {
-  let css = `/* Auto-generated by MORPH-SPEC Design System Generator */\n`;
-  css += `/* Do not edit manually - regenerate from design-system.md */\n\n`;
-  css += `:root {\n`;
-
-  // Colors — handle expanded structure
-  css += emitColorCategory(colors.primary, 'primary', 'Primary Colors');
-
-  // Support both accent (new) and secondary (old)
-  if (Object.keys(colors.accent || {}).length > 0) {
-    css += emitColorCategory(colors.accent, 'accent', 'Accent Colors');
-  }
-  if (Object.keys(colors.secondary || {}).length > 0) {
-    css += emitColorCategory(colors.secondary, 'secondary', 'Secondary Colors');
-  }
-
-  css += emitColorCategory(colors.neutral || {}, 'neutral', 'Neutral Colors');
-
-  if (Object.keys(colors.surface || {}).length > 0) {
-    css += emitColorCategory(colors.surface, 'surface', 'Surface Colors');
-  }
-
-  if (Object.keys(colors.text || {}).length > 0) {
-    css += emitColorCategory(colors.text, 'text', 'Text Colors');
-  }
-
-  if (Object.keys(colors.semantic || {}).length > 0) {
-    css += `  /* Semantic Colors */\n`;
-    Object.entries(colors.semantic).forEach(([type, hex]) => {
-      css += `  --color-${type}: ${hex};\n`;
-    });
-    css += `\n`;
-  }
-
-  if (Object.keys(colors.other || {}).length > 0) {
-    css += `  /* Other Colors */\n`;
-    Object.entries(colors.other).forEach(([key, value]) => {
-      css += `  --color-${key}: ${value};\n`;
-    });
-    css += `\n`;
-  }
-
-  // Typography
-  const fontFamilies = typography.fontFamily || {};
-  if (fontFamilies.display || fontFamilies.body || fontFamilies.mono || fontFamilies.primary) {
-    css += `  /* Typography */\n`;
-    if (fontFamilies.display) css += `  --font-display: ${fontFamilies.display};\n`;
-    if (fontFamilies.body) css += `  --font-body: ${fontFamilies.body};\n`;
-    if (fontFamilies.mono) css += `  --font-mono: ${fontFamilies.mono};\n`;
-    if (fontFamilies.primary) css += `  --font-family-primary: ${fontFamilies.primary};\n`;
-    css += `\n`;
-  }
-
-  if (Object.keys(typography.fontSize).length > 0) {
-    css += `  /* Font Sizes */\n`;
-    Object.entries(typography.fontSize).forEach(([name, size]) => {
-      css += `  --font-size-${name}: ${size};\n`;
-    });
-    css += `\n`;
-  }
-
-  // Spacing
-  if (Object.keys(spacing).length > 0) {
-    css += `  /* Spacing */\n`;
-    Object.entries(spacing).forEach(([name, value]) => {
-      // If key is numeric (from --space-N), use --space-N format
-      if (/^\d+$/.test(name)) {
-        css += `  --space-${name}: ${value};\n`;
-      } else {
-        css += `  --${name}: ${value};\n`;
-      }
-    });
-  }
-
-  css += `}\n`;
-
-  return css;
-}
-
-/**
- * Count non-empty keys in an object
- */
-function countTokens(obj) {
-  return Object.keys(obj || {}).length;
-}
-
-/**
- * Generate all design system files
- * @param {string} designSystemPath - Path to design-system.md
- * @param {Object} options - Generation options
- * @returns {Object} Generated files content
- */
-export function generateDesignSystem(designSystemPath, options = {}) {
-  // Parse design system
-  const { colors, typography, spacing, motion, effects } = parseDesignSystem(designSystemPath);
-
-  const generated = {
-    css: generateCSS(colors, typography, spacing),
-    stats: {
-      primaryColors: countTokens(colors.primary),
-      accentColors: countTokens(colors.accent),
-      secondaryColors: countTokens(colors.secondary),
-      neutralColors: countTokens(colors.neutral),
-      semanticColors: countTokens(colors.semantic),
-      surfaceColors: countTokens(colors.surface),
-      textColors: countTokens(colors.text),
-      fontSizes: countTokens(typography.fontSize),
-      fontWeights: countTokens(typography.fontWeight),
-      lineHeights: countTokens(typography.lineHeight),
-      spacingValues: countTokens(spacing),
-      motionDurations: countTokens(motion.durations),
-      motionEasings: countTokens(motion.easings),
-      effectsGlass: countTokens(effects.glass),
-      effectsAurora: countTokens(effects.aurora),
-      effectsPerspective: countTokens(effects.perspective)
-    }
-  };
-
-  return generated;
-}