@polymorphism-tech/morph-spec 4.11.0 → 4.12.0

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

@@ -1,35 +1,133 @@
 /**
  * MORPH-SPEC Design System Generator Library
  *
- * Reads ui-design-system.md and generates:
+ * Reads design-system.md (or ui-design-system.md) and generates:
  * - wwwroot/css/design-system.css (CSS variables)
  * - Themes/FluentDesignTheme.cs (Fluent UI theme)
  * - Themes/MudTheme.cs (MudBlazor theme)
  *
+ * 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
+ * Parse colors from markdown — supports CSS :root format and old markdown format
  * @param {string} markdown - Markdown content
- * @returns {Object} Colors object with primary, secondary, neutral, semantic
+ * @returns {Object} Colors object with primary, accent, secondary, neutral, semantic, surface, text, other
  */
 export function parseColors(markdown) {
-  const colors = { primary: {}, secondary: {}, neutral: {}, semantic: {} };
+  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++;
+    }
+  }
 
-  // Match color definitions like: - **Primary 500** (`#...`) - ...
+  // 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;
-    const cleanName = name.trim().toLowerCase().replace(/\s+/g, '-');
 
     if (name.includes('Primary')) {
       const variant = name.match(/\d+/)?.[0] || 'default';
@@ -50,13 +148,56 @@ export function parseColors(markdown) {
 }
 
 /**
- * Parse typography from markdown
+ * Parse typography from markdown — supports CSS :root format and old markdown format
  * @param {string} markdown - Markdown content
- * @returns {Object} Typography object with fontFamily, fontSize, fontWeight, lineHeight
+ * @returns {Object} Typography with fontFamily, fontSize, fontWeight, lineHeight
  */
 export function parseTypography(markdown) {
-  const typography = { fontFamily: {}, fontSize: {}, fontWeight: {}, lineHeight: {} };
+  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);
@@ -82,14 +223,33 @@ export function parseTypography(markdown) {
 }
 
 /**
- * Parse spacing from markdown
+ * Parse spacing from markdown — supports CSS :root format and old markdown format
  * @param {string} markdown - Markdown content
- * @returns {Object} Spacing object with spacing values
+ * @returns {Object} Spacing values
  */
 export function parseSpacing(markdown) {
   const spacing = {};
 
-  // Match spacing definitions
+  // 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) {
@@ -103,10 +263,84 @@ export function parseSpacing(markdown) {
   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 ui-design-system.md file
- * @returns {Object} Parsed design system with colors, typography, spacing
+ * @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)) {
@@ -118,7 +352,9 @@ export function parseDesignSystem(markdownPath) {
   return {
     colors: parseColors(markdown),
     typography: parseTypography(markdown),
-    spacing: parseSpacing(markdown)
+    spacing: parseSpacing(markdown),
+    motion: parseMotion(markdown),
+    effects: parseAdvancedEffects(markdown)
   };
 }
 
@@ -126,6 +362,25 @@ export function parseDesignSystem(markdownPath) {
 // 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
@@ -138,32 +393,28 @@ export function generateCSS(colors, typography, spacing) {
   css += `/* Do not edit manually - regenerate from ui-design-system.md */\n\n`;
   css += `:root {\n`;
 
-  // Colors
-  if (Object.keys(colors.primary).length > 0) {
-    css += `  /* Primary Colors */\n`;
-    Object.entries(colors.primary).forEach(([variant, hex]) => {
-      css += `  --color-primary-${variant}: ${hex};\n`;
-    });
-    css += `\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');
   }
 
-  if (Object.keys(colors.secondary).length > 0) {
-    css += `  /* Secondary Colors */\n`;
-    Object.entries(colors.secondary).forEach(([variant, hex]) => {
-      css += `  --color-secondary-${variant}: ${hex};\n`;
-    });
-    css += `\n`;
+  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.neutral).length > 0) {
-    css += `  /* Neutral Colors */\n`;
-    Object.entries(colors.neutral).forEach(([variant, hex]) => {
-      css += `  --color-neutral-${variant}: ${hex};\n`;
-    });
-    css += `\n`;
+  if (Object.keys(colors.text || {}).length > 0) {
+    css += emitColorCategory(colors.text, 'text', 'Text Colors');
   }
 
-  if (Object.keys(colors.semantic).length > 0) {
+  if (Object.keys(colors.semantic || {}).length > 0) {
     css += `  /* Semantic Colors */\n`;
     Object.entries(colors.semantic).forEach(([type, hex]) => {
       css += `  --color-${type}: ${hex};\n`;
@@ -171,10 +422,22 @@ export function generateCSS(colors, typography, spacing) {
     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
-  if (typography.fontFamily.primary) {
+  const fontFamilies = typography.fontFamily || {};
+  if (fontFamilies.display || fontFamilies.body || fontFamilies.mono || fontFamilies.primary) {
     css += `  /* Typography */\n`;
-    css += `  --font-family-primary: ${typography.fontFamily.primary};\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`;
   }
 
@@ -190,7 +453,12 @@ export function generateCSS(colors, typography, spacing) {
   if (Object.keys(spacing).length > 0) {
     css += `  /* Spacing */\n`;
     Object.entries(spacing).forEach(([name, value]) => {
-      css += `  --${name}: ${value};\n`;
+      // 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`;
+      }
     });
   }
 
@@ -207,7 +475,8 @@ export function generateCSS(colors, typography, spacing) {
  * @returns {string} C# code
  */
 export function generateFluentTheme(colors, typography, namespace = 'YourProject.Themes') {
-  const primary500 = colors.primary['500'] || '#0078d4';
+  // Support both new format (primary.default) and old format (primary['500'])
+  const primary = colors.primary.default || colors.primary['500'] || '#0078d4';
 
   let csharp = `// Auto-generated by MORPH-SPEC Design System Generator\n`;
   csharp += `// Do not edit manually - regenerate from ui-design-system.md\n\n`;
@@ -218,7 +487,7 @@ export function generateFluentTheme(colors, typography, namespace = 'YourProject
   csharp += `    {\n`;
   csharp += `        return new DesignThemePalette\n`;
   csharp += `        {\n`;
-  csharp += `            Accent = "${primary500}",\n`;
+  csharp += `            Accent = "${primary}",\n`;
   csharp += `            // Add more theme properties as needed\n`;
   csharp += `        };\n`;
   csharp += `    }\n`;
@@ -235,8 +504,10 @@ export function generateFluentTheme(colors, typography, namespace = 'YourProject
  * @returns {string} C# code
  */
 export function generateMudTheme(colors, typography, namespace = 'YourProject.Themes') {
-  const primary500 = colors.primary['500'] || '#594ae2';
-  const secondary500 = colors.secondary['500'] || '#ff4081';
+  // Support both new format (primary.default) and old format (primary['500'])
+  const primary = colors.primary.default || colors.primary['500'] || '#594ae2';
+  // Support accent (new) or secondary (old)
+  const secondary = (colors.accent || {}).default || (colors.secondary || {})['500'] || '#ff4081';
 
   let csharp = `// Auto-generated by MORPH-SPEC Design System Generator\n`;
   csharp += `// Do not edit manually - regenerate from ui-design-system.md\n\n`;
@@ -249,8 +520,8 @@ export function generateMudTheme(colors, typography, namespace = 'YourProject.Th
   csharp += `        {\n`;
   csharp += `            Palette = new PaletteLight\n`;
   csharp += `            {\n`;
-  csharp += `                Primary = "${primary500}",\n`;
-  csharp += `                Secondary = "${secondary500}",\n`;
+  csharp += `                Primary = "${primary}",\n`;
+  csharp += `                Secondary = "${secondary}",\n`;
   csharp += `                // Add more palette colors as needed\n`;
   csharp += `            }\n`;
   csharp += `        };\n`;
@@ -260,9 +531,16 @@ export function generateMudTheme(colors, typography, namespace = 'YourProject.Th
   return csharp;
 }
 
+/**
+ * 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 ui-design-system.md
+ * @param {string} designSystemPath - Path to design-system.md
  * @param {Object} options - Generation options
  * @param {string} options.mode - Generation mode: 'fluent', 'mud', or 'both'
  * @param {string} options.namespace - C# namespace
@@ -272,16 +550,27 @@ export function generateDesignSystem(designSystemPath, options = {}) {
   const { mode = 'both', namespace = 'YourProject.Themes' } = options;
 
   // Parse design system
-  const { colors, typography, spacing } = parseDesignSystem(designSystemPath);
+  const { colors, typography, spacing, motion, effects } = parseDesignSystem(designSystemPath);
 
   const generated = {
     css: generateCSS(colors, typography, spacing),
     stats: {
-      primaryColors: Object.keys(colors.primary).length,
-      neutralColors: Object.keys(colors.neutral).length,
-      semanticColors: Object.keys(colors.semantic).length,
-      fontSizes: Object.keys(typography.fontSize).length,
-      spacingValues: Object.keys(spacing).length
+      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)
     }
   };
 

package/src/lib/generators/recap-generator.js

@@ -233,11 +233,34 @@ function buildRecapMarkdown(data) {
 
   // Tasks Detail
   if (tasksSummary.items.length > 0) {
+    const anyNotes = tasksSummary.items.some(t => t.notes?.length > 0);
     md += `## Tasks\n\n`;
-    md += `| ID | Title | Status |\n|----|-------|--------|\n`;
-    for (const task of tasksSummary.items) {
-      const statusIcon = task.status === 'completed' ? '✅' : task.status === 'in_progress' ? '🔄' : '⏳';
-      md += `| ${task.id} | ${task.title || '-'} | ${statusIcon} ${task.status} |\n`;
+    if (anyNotes) {
+      md += `| ID | Title | Status | Notes |\n|----|-------|--------|-------|\n`;
+      for (const task of tasksSummary.items) {
+        const statusIcon = task.status === 'completed' ? '✅' : task.status === 'in_progress' ? '🔄' : '⏳';
+        const noteCount = task.notes?.length || 0;
+        const notesCell = noteCount > 0 ? `${noteCount} note${noteCount > 1 ? 's' : ''}` : '-';
+        md += `| ${task.id} | ${task.title || '-'} | ${statusIcon} ${task.status} | ${notesCell} |\n`;
+      }
+    } else {
+      md += `| ID | Title | Status |\n|----|-------|--------|\n`;
+      for (const task of tasksSummary.items) {
+        const statusIcon = task.status === 'completed' ? '✅' : task.status === 'in_progress' ? '🔄' : '⏳';
+        md += `| ${task.id} | ${task.title || '-'} | ${statusIcon} ${task.status} |\n`;
+      }
+    }
+    md += `\n`;
+  }
+
+  // Deviations from Plan
+  const deviations = tasksSummary.items
+    .filter(t => t.notes?.some(n => n.type === 'deviation'))
+    .flatMap(t => t.notes.filter(n => n.type === 'deviation').map(n => ({ taskId: t.id, text: n.text })));
+  if (deviations.length > 0) {
+    md += `## Deviations from Plan\n\n`;
+    for (const d of deviations) {
+      md += `- **${d.taskId}**: ${d.text}\n`;
     }
     md += `\n`;
   }

package/src/lib/stack/stack-profile.js

@@ -24,6 +24,7 @@ const PROFILES = {
     isDotnet: true, isNextjs: false,
     defaultValidators: ['architecture', 'packages'],
     checkpointValidators: ['architecture', 'packages', 'design-system', 'security'],
+    buildCommand: 'dotnet build --no-restore',
     contractsOutputType: 'contracts',
     contractsFilename: 'contracts.cs',
     contractsLanguage: 'csharp',
@@ -32,6 +33,7 @@ const PROFILES = {
     isDotnet: false, isNextjs: true,
     defaultValidators: ['nextjs-component'],
     checkpointValidators: ['nextjs-component', 'css'],
+    buildCommand: 'npx tsc --noEmit',
     contractsOutputType: 'contractsTs',
     contractsFilename: 'contracts.ts',
     contractsLanguage: 'typescript',
@@ -40,6 +42,7 @@ const PROFILES = {
     isDotnet: false, isNextjs: false,
     defaultValidators: [],
     checkpointValidators: [],
+    buildCommand: null,
     contractsOutputType: 'contracts',
     contractsFilename: 'contracts.cs',
     contractsLanguage: 'csharp',

package/src/lib/tasks/task-parser.js

@@ -122,18 +122,32 @@ export async function parseTasksMd(featureName, cwd = process.cwd()) {
     return [];
   }
 
-  const tasks = [];
+  // Phase 1: collect heading positions
   const headingRe = /^###\s+(T\d+)\s*[—–:\-]\s*(.+)$/gm;
+  const depRe = /\*\*Dependenc(?:y|ies):\*\*\s*(.+)/i;
+  const positions = [];
   let match;
   while ((match = headingRe.exec(content)) !== null) {
-    tasks.push({
-      id: match[1],
-      title: match[2].trim(),
-      status: 'pending',
-      dependencies: [],
-      files: [],
-      checkpoint: null,
-    });
+    positions.push({ id: match[1], title: match[2].trim(), pos: match.index });
+  }
+
+  // Phase 2: extract body and parse dependencies
+  const tasks = [];
+  for (let i = 0; i < positions.length; i++) {
+    const { id, title, pos } = positions[i];
+    const end = i + 1 < positions.length ? positions[i + 1].pos : content.length;
+    const block = content.slice(pos, end);
+
+    let dependencies = [];
+    const depMatch = depRe.exec(block);
+    if (depMatch) {
+      const val = depMatch[1].trim();
+      if (val.toLowerCase() !== 'none') {
+        dependencies = val.split(/[,\s]+/).filter(s => /^T\d+$/.test(s));
+      }
+    }
+
+    tasks.push({ id, title, status: 'pending', dependencies, files: [], checkpoint: null });
   }
   return tasks;
 }

package/src/lib/validators/design-system/design-system-validator.js

@@ -58,12 +58,18 @@ export async function validateDesignSystem(projectPath, featureName = null, opti
     return result;
   }
 
-  // Build allowed color set
+  // Build allowed color set — iterate all color categories
   const allowedColors = new Set();
-  Object.values(designSystem.colors.primary).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.secondary).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.neutral).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.semantic).forEach(hex => allowedColors.add(hex.toLowerCase()));
+  const colorCategories = ['primary', 'accent', 'secondary', 'neutral', 'semantic', 'surface', 'text', 'other'];
+  for (const category of colorCategories) {
+    const catColors = designSystem.colors[category] || {};
+    Object.values(catColors).forEach(val => {
+      // Only add hex-like values (skip rgb tuples, rgba, var() references, etc.)
+      if (typeof val === 'string' && val.startsWith('#')) {
+        allowedColors.add(val.toLowerCase());
+      }
+    });
+  }
 
   // Common system colors (allowed)
   const systemColors = new Set([

package/src/utils/file-copier.js

@@ -149,6 +149,7 @@ export async function updateGitignore(projectPath) {
     '.claude/CLAUDE.md',
     '.claude/settings.local.json',
     '.worktrees/',
+    'docs/superpowers/',
     ''
   ];