@zenithbuild/core 0.6.2 → 1.1.0

package/compiler/runtime/wrapExpression.ts

@@ -44,22 +44,41 @@ export function wrapExpression(
   const commentCode = code.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ' ').substring(0, 100)
   const jsonEscapedCode = JSON.stringify(code)
 
+  // Properly escape the transformed code for use inside a string
+  const escapedTransformedCode = transformedCode
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+
+  // Note: We cannot use `with (state)` in ES modules (strict mode)
+  // Instead, we use new Function() which runs in non-strict sloppy mode by default
+  // and allows 'with' statements. This is a workaround for strict mode limitations.
   return `
   // Expression: ${commentCode}${code.length > 100 ? '...' : ''}
-  const ${id} = (state) => {
-    try {
-      // Expose zenith helpers for JSX and content
-      const __zenith = window.__zenith || {};
-      const zenCollection = __zenith.zenCollection || ((name) => ({ get: () => [] }));
-      
-      with (state) {
-        return ${transformedCode};
+  const ${id} = (function() {
+    // Create the evaluator function once (with 'with' support in sloppy mode)
+    var evalFn = new Function('__ctx',
+      'with (__ctx) { return (' + '${escapedTransformedCode}' + '); }'
+    );
+    
+    return function(state) {
+      try {
+        var __zenith = window.__zenith || {};
+        var zenCollection = __zenith.zenCollection || function(name) { return { get: function() { return []; } }; };
+        var createZenOrder = __zenith.createZenOrder || function(sections) { return { sections: [], getSectionBySlug: function() { return null; }, getDocBySlug: function() { return null; } }; };
+        
+        // Merge window globals (script variables) with state
+        // State takes precedence over window globals
+        var __ctx = Object.assign({}, window, { zenCollection: zenCollection, createZenOrder: createZenOrder }, state || {});
+        
+        return evalFn(__ctx);
+      } catch (e) {
+        console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
+        return undefined;
       }
-    } catch (e) {
-      console.warn('[Zenith] Expression evaluation error:', ${jsonEscapedCode}, e);
-      return undefined;
-    }
-  };`
+    };
+  })();`
 }
 
 /**

package/compiler/runtime/wrapExpressionWithLoop.ts

@@ -66,18 +66,32 @@ export function wrapExpressionWithLoopContext(
   // or recognized as an existing h() call.
   const transformedCode = transformExpressionJSX(code)
 
+  // Properly escape the transformed code for use inside a string
+  const escapedTransformedCode = transformedCode
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+
   return `
   // Expression with loop context: ${escapedCode}
   // Loop variables: ${loopContext.variables.join(', ')}
-  const ${id} = (${argsStr}) => {
-    try {
-      ${contextObject}
-      with (__ctx) {
-        return ${transformedCode};
+  const ${id} = (function() {
+    // Create the evaluator function once (with 'with' support in sloppy mode)
+    var evalFn = new Function('__ctx',
+      'with (__ctx) { return (' + '${escapedTransformedCode}' + '); }'
+    );
+    
+    return function(${argsStr}) {
+      try {
+        // Merge window globals with context (for script-level variables)
+        var __baseCtx = Object.assign({}, window);
+        ${contextObject.replace('const __ctx', 'var __ctx').replace('= Object.assign({},', '= Object.assign(__baseCtx,')}
+        return evalFn(__ctx);
+      } catch (e) {
+        console.warn('[Zenith] Expression evaluation error for "${escapedCode}":', e);
+        return undefined;
       }
-    } catch (e) {
-      console.warn('[Zenith] Expression evaluation error for "${escapedCode}":', e);
-      return undefined;
-    }
-  };`
+    };
+  })();`
 }

package/compiler/ssg-build.ts

@@ -11,6 +11,18 @@
  * Hydrated pages reference the shared bundle.js and their page-specific JS.
  */
 
+/**
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * CLI HARDENING: BLIND ORCHESTRATOR PATTERN
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * 
+ * This build system uses the plugin bridge pattern:
+ * - Plugins are initialized unconditionally
+ * - Data is collected via 'cli:runtime:collect' hook
+ * - CLI never inspects or branches on plugin data
+ * ═══════════════════════════════════════════════════════════════════════════════
+ */
+
 import fs from "fs"
 import path from "path"
 import { compileZenSource } from "./index"
@@ -19,8 +31,16 @@ import { processLayout } from "./transform/layoutProcessor"
 import { discoverPages, generateRouteDefinition } from "@zenithbuild/router/manifest"
 import { analyzePageSource, getAnalysisSummary, getBuildOutputType, type PageAnalysis } from "./build-analyzer"
 import { generateBundleJS } from "../runtime/bundle-generator"
-import { loadContent } from "../cli/utils/content"
 import { compileCss, resolveGlobalsCss } from "./css"
+import { loadZenithConfig } from "../core/config/loader"
+import { PluginRegistry, createPluginContext, getPluginDataByNamespace } from "../core/plugins/registry"
+import {
+    createBridgeAPI,
+    collectHookReturns,
+    buildRuntimeEnvelope,
+    clearHooks,
+    type HookContext
+} from "../core/plugins/bridge"
 
 // ============================================
 // Types
@@ -131,8 +151,10 @@ async function compilePage(
  * Generate the final HTML for a page
  * Static pages: no JS references
  * Hydrated pages: bundle.js + page-specific JS
+ * 
+ * Uses the neutral __ZENITH_PLUGIN_DATA__ envelope - CLI never inspects contents.
  */
-function generatePageHTML(page: CompiledPage, globalStyles: string, contentData: any): string {
+function generatePageHTML(page: CompiledPage, globalStyles: string, pluginEnvelope: Record<string, unknown>): string {
     const { html, styles, analysis, routePath, pageScript } = page
 
     // Combine styles
@@ -142,8 +164,10 @@ function generatePageHTML(page: CompiledPage, globalStyles: string, contentData:
     // Build script tags only if needed
     let scriptTags = ''
     if (analysis.needsHydration) {
+        // Escape </script> sequences in JSON to prevent breaking the script tag
+        const envelopeJson = JSON.stringify(pluginEnvelope).replace(/<\//g, '<\\/')
         scriptTags = `
-  <script>window.__ZENITH_CONTENT__ = ${JSON.stringify(contentData)};</script>
+  <script>window.__ZENITH_PLUGIN_DATA__ = ${envelopeJson};</script>
   <script src="/assets/bundle.js"></script>`
 
         if (pageScript) {
@@ -238,17 +262,57 @@ ${page.pageScript}
 
 /**
  * Build all pages using SSG approach
+ * 
+ * Follows the blind orchestrator pattern:
+ * - Plugins are initialized unconditionally
+ * - Data is collected via hooks
+ * - CLI never inspects plugin data
  */
 export async function buildSSG(options: SSGBuildOptions): Promise<void> {
     const { pagesDir, outDir, baseDir = path.dirname(pagesDir) } = options
-    const contentDir = path.join(baseDir, 'content')
-    const contentData = loadContent(contentDir)
 
     console.log('🔨 Zenith SSG Build')
     console.log(`   Pages: ${pagesDir}`)
     console.log(`   Output: ${outDir}`)
     console.log('')
 
+    // ============================================
+    // Plugin Initialization (Unconditional)
+    // ============================================
+    // Load config and initialize all plugins without checking which ones exist.
+    const config = await loadZenithConfig(baseDir)
+    const registry = new PluginRegistry()
+    const bridgeAPI = createBridgeAPI()
+
+    // Clear any previously registered hooks
+    clearHooks()
+
+    // Register ALL plugins unconditionally
+    for (const plugin of config.plugins || []) {
+        console.log(`   Plugin: ${plugin.name}`)
+        registry.register(plugin)
+
+        // Let plugin register its CLI hooks
+        if (plugin.registerCLI) {
+            plugin.registerCLI(bridgeAPI)
+        }
+    }
+
+    // Initialize all plugins
+    await registry.initAll(createPluginContext(baseDir))
+
+    // Create hook context - CLI provides this but NEVER uses getPluginData itself
+    const hookCtx: HookContext = {
+        projectRoot: baseDir,
+        getPluginData: getPluginDataByNamespace
+    }
+
+    // Collect runtime payloads from ALL plugins
+    const payloads = await collectHookReturns('cli:runtime:collect', hookCtx)
+    const pluginEnvelope = buildRuntimeEnvelope(payloads)
+
+    console.log('')
+
     // Clean and create output directory
     if (fs.existsSync(outDir)) {
         fs.rmSync(outDir, { recursive: true, force: true })
@@ -326,7 +390,7 @@ export async function buildSSG(options: SSGBuildOptions): Promise<void> {
         fs.mkdirSync(pageOutDir, { recursive: true })
 
         // Generate and write HTML
-        const html = generatePageHTML(page, globalStyles, contentData)
+        const html = generatePageHTML(page, globalStyles, pluginEnvelope)
         fs.writeFileSync(path.join(pageOutDir, 'index.html'), html)
 
         // Write page-specific JS if needed
@@ -357,7 +421,7 @@ export async function buildSSG(options: SSGBuildOptions): Promise<void> {
         if (fs.existsSync(custom404Path)) {
             try {
                 const compiled = await compilePage(custom404Path, pagesDir, baseDir)
-                const html = generatePageHTML(compiled, globalStyles, contentData)
+                const html = generatePageHTML(compiled, globalStyles, pluginEnvelope)
                 fs.writeFileSync(path.join(outDir, '404.html'), html)
                 console.log('📦 Generated 404.html (custom)')
                 has404 = true

package/compiler/test/component-stacking.test.ts

@@ -0,0 +1,365 @@
+/**
+ * Component Stacking Test
+ * 
+ * Tests that multiple sibling components and multiple instances
+ * of the same component render correctly.
+ */
+
+import { compileZenSource } from '../index'
+import { discoverComponents, type ComponentMetadata } from '../discovery/componentDiscovery'
+import { resolveComponentsInIR } from '../transform/componentResolver'
+import { parseTemplate } from '../parse/parseTemplate'
+import * as fs from 'fs'
+import * as path from 'path'
+
+// Test 1: Multiple sibling components
+async function testMultipleSiblingComponents() {
+  console.log('\n=== Test 1: Multiple Sibling Components ===\n')
+  
+  // Create mock components
+  const mockComponents = new Map<string, ComponentMetadata>()
+  
+  mockComponents.set('Header', {
+    name: 'Header',
+    path: '/mock/Header.zen',
+    template: '<header class="test-header">Header Content</header>',
+    nodes: [{
+      type: 'element',
+      tag: 'header',
+      attributes: [{ name: 'class', value: 'test-header', location: { line: 1, column: 1 } }],
+      children: [{ type: 'text', value: 'Header Content', location: { line: 1, column: 1 } }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  mockComponents.set('Hero', {
+    name: 'Hero',
+    path: '/mock/Hero.zen',
+    template: '<section class="test-hero">Hero Content</section>',
+    nodes: [{
+      type: 'element',
+      tag: 'section',
+      attributes: [{ name: 'class', value: 'test-hero', location: { line: 1, column: 1 } }],
+      children: [{ type: 'text', value: 'Hero Content', location: { line: 1, column: 1 } }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  mockComponents.set('Footer', {
+    name: 'Footer',
+    path: '/mock/Footer.zen',
+    template: '<footer class="test-footer">Footer Content</footer>',
+    nodes: [{
+      type: 'element',
+      tag: 'footer',
+      attributes: [{ name: 'class', value: 'test-footer', location: { line: 1, column: 1 } }],
+      children: [{ type: 'text', value: 'Footer Content', location: { line: 1, column: 1 } }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  // Test source with multiple sibling components
+  const testSource = `
+<script setup="ts">
+</script>
+<div class="page">
+  <Header />
+  <Hero />
+  <Footer />
+</div>
+`
+  
+  // Parse the template
+  const template = parseTemplate(testSource, 'test.zen')
+  
+  console.log('Parsed nodes:', JSON.stringify(template.nodes, null, 2))
+  console.log('\nComponent nodes found:')
+  
+  // Find all component nodes
+  function findComponents(nodes: any[], depth = 0): void {
+    for (const node of nodes) {
+      if (node.type === 'component') {
+        console.log(`${'  '.repeat(depth)}Component: ${node.name}`)
+      } else if (node.type === 'element') {
+        console.log(`${'  '.repeat(depth)}Element: <${node.tag}>`)
+        if (node.children) {
+          findComponents(node.children, depth + 1)
+        }
+      }
+    }
+  }
+  
+  findComponents(template.nodes)
+  
+  // Create IR
+  const ir = {
+    filePath: 'test.zen',
+    template,
+    script: { raw: '', attributes: {} },
+    styles: []
+  }
+  
+  // Resolve components
+  const resolvedIR = resolveComponentsInIR(ir, mockComponents)
+  
+  console.log('\nResolved nodes:', JSON.stringify(resolvedIR.template.nodes, null, 2))
+  
+  // Count how many test-* classes appear in the resolved HTML
+  const jsonStr = JSON.stringify(resolvedIR.template.nodes)
+  const countHeaders = (jsonStr.match(/"value":"test-header"/g) || []).length
+  const countHeros = (jsonStr.match(/"value":"test-hero"/g) || []).length
+  const countFooters = (jsonStr.match(/"value":"test-footer"/g) || []).length
+  
+  console.log(`\nResults:`)
+  console.log(`  Headers: ${countHeaders} (expected: 1)`)
+  console.log(`  Heros: ${countHeros} (expected: 1)`)
+  console.log(`  Footers: ${countFooters} (expected: 1)`)
+  
+  const passed = countHeaders === 1 && countHeros === 1 && countFooters === 1
+  console.log(`\n${passed ? '✅ PASSED' : '❌ FAILED'}: Multiple sibling components`)
+  
+  return passed
+}
+
+// Test 2: Multiple instances of the same component
+async function testMultipleInstances() {
+  console.log('\n=== Test 2: Multiple Instances of Same Component ===\n')
+  
+  const mockComponents = new Map<string, ComponentMetadata>()
+  
+  mockComponents.set('Card', {
+    name: 'Card',
+    path: '/mock/Card.zen',
+    template: '<div class="card">Card Content</div>',
+    nodes: [{
+      type: 'element',
+      tag: 'div',
+      attributes: [{ name: 'class', value: 'card', location: { line: 1, column: 1 } }],
+      children: [{ type: 'text', value: 'Card Content', location: { line: 1, column: 1 } }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  const testSource = `
+<script setup="ts">
+</script>
+<div class="grid">
+  <Card />
+  <Card />
+  <Card />
+</div>
+`
+  
+  const template = parseTemplate(testSource, 'test.zen')
+  
+  console.log('Component nodes found:')
+  
+  function countComponents(nodes: any[]): number {
+    let count = 0
+    for (const node of nodes) {
+      if (node.type === 'component') {
+        console.log(`  Found component: ${node.name}`)
+        count++
+      } else if (node.type === 'element' && node.children) {
+        count += countComponents(node.children)
+      }
+    }
+    return count
+  }
+  
+  const componentCount = countComponents(template.nodes)
+  console.log(`Total component nodes before resolution: ${componentCount}`)
+  
+  const ir = {
+    filePath: 'test.zen',
+    template,
+    script: { raw: '', attributes: {} },
+    styles: []
+  }
+  
+  const resolvedIR = resolveComponentsInIR(ir, mockComponents)
+  
+  // Count card divs in resolved output - search for the attribute value
+  const jsonStr = JSON.stringify(resolvedIR.template.nodes)
+  const cardCount = (jsonStr.match(/"value":"card"/g) || []).length
+  
+  console.log(`\nResolved JSON (first 500 chars): ${jsonStr.substring(0, 500)}...`)
+  console.log(`\nCard divs in resolved output: ${cardCount} (expected: 3)`)
+  
+  const passed = cardCount === 3
+  console.log(`\n${passed ? '✅ PASSED' : '❌ FAILED'}: Multiple instances of same component`)
+  
+  return passed
+}
+
+// Test 3: Nested components
+async function testNestedComponents() {
+  console.log('\n=== Test 3: Nested Components ===\n')
+  
+  const mockComponents = new Map<string, ComponentMetadata>()
+  
+  mockComponents.set('Outer', {
+    name: 'Outer',
+    path: '/mock/Outer.zen',
+    template: '<div class="outer"><slot /></div>',
+    nodes: [{
+      type: 'element',
+      tag: 'div',
+      attributes: [{ name: 'class', value: 'outer', location: { line: 1, column: 1 } }],
+      children: [{
+        type: 'element',
+        tag: 'slot',
+        attributes: [],
+        children: [],
+        location: { line: 1, column: 1 }
+      }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [{ name: null, location: { line: 1, column: 1 } }],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  mockComponents.set('Inner', {
+    name: 'Inner',
+    path: '/mock/Inner.zen',
+    template: '<span class="inner">Inner Content</span>',
+    nodes: [{
+      type: 'element',
+      tag: 'span',
+      attributes: [{ name: 'class', value: 'inner', location: { line: 1, column: 1 } }],
+      children: [{ type: 'text', value: 'Inner Content', location: { line: 1, column: 1 } }],
+      location: { line: 1, column: 1 }
+    }],
+    slots: [],
+    props: [],
+    styles: [],
+    script: null,
+    scriptAttributes: null,
+    hasScript: false,
+    hasStyles: false
+  })
+  
+  const testSource = `
+<script setup="ts">
+</script>
+<Outer>
+  <Inner />
+</Outer>
+`
+  
+  const template = parseTemplate(testSource, 'test.zen')
+  
+  const ir = {
+    filePath: 'test.zen',
+    template,
+    script: { raw: '', attributes: {} },
+    styles: []
+  }
+  
+  const resolvedIR = resolveComponentsInIR(ir, mockComponents)
+  
+  const jsonStr = JSON.stringify(resolvedIR.template.nodes)
+  const hasOuter = jsonStr.includes('"value":"outer"')
+  const hasInner = jsonStr.includes('"value":"inner"')
+  
+  console.log(`Resolved JSON (first 500 chars): ${jsonStr.substring(0, 500)}...`)
+  console.log(`Outer div present: ${hasOuter}`)
+  console.log(`Inner span present: ${hasInner}`)
+  
+  const passed = hasOuter && hasInner
+  console.log(`\n${passed ? '✅ PASSED' : '❌ FAILED'}: Nested components`)
+  
+  return passed
+}
+
+// Test 4: Auto-import naming (filename-based)
+async function testAutoImportNaming() {
+  console.log('\n=== Test 4: Auto-Import Naming ===\n')
+  
+  // Test the naming algorithm directly
+  // With the new convention, component name = filename (subdirectories are ignored)
+  const testCases = [
+    { input: 'components/Header.zen', expected: 'Header' },
+    { input: 'components/globals/Header.zen', expected: 'Header' }, // Filename only!
+    { input: 'components/ui/buttons/Primary.zen', expected: 'Primary' },
+    { input: 'components/sections/HeroSection.zen', expected: 'HeroSection' },
+    { input: 'components/ui-kit/Button.zen', expected: 'Button' },
+  ]
+  
+  let passed = true
+  
+  for (const tc of testCases) {
+    // Component name is just the filename without .zen extension
+    const result = path.basename(tc.input, '.zen')
+    
+    const match = result === tc.expected
+    console.log(`  ${match ? '✓' : '✗'} "${tc.input}" → "${result}" (expected: "${tc.expected}")`)
+    
+    if (!match) passed = false
+  }
+  
+  console.log(`\n${passed ? '✅ PASSED' : '❌ FAILED'}: Auto-import naming`)
+  
+  return passed
+}
+
+// Run all tests
+async function runTests() {
+  console.log('╔════════════════════════════════════════════╗')
+  console.log('║    Component Stacking Tests                ║')
+  console.log('╚════════════════════════════════════════════╝')
+  
+  const results = []
+  
+  results.push(await testMultipleSiblingComponents())
+  results.push(await testMultipleInstances())
+  results.push(await testNestedComponents())
+  results.push(await testAutoImportNaming())
+  
+  console.log('\n════════════════════════════════════════════')
+  console.log('Summary:')
+  console.log(`  Total: ${results.length}`)
+  console.log(`  Passed: ${results.filter(r => r).length}`)
+  console.log(`  Failed: ${results.filter(r => !r).length}`)
+  console.log('════════════════════════════════════════════\n')
+  
+  process.exit(results.every(r => r) ? 0 : 1)
+}
+
+runTests().catch(err => {
+  console.error('Test error:', err)
+  process.exit(1)
+})

package/compiler/transform/componentResolver.ts

@@ -5,19 +5,19 @@
  * Uses compound component pattern for named slots (Card.Header, Card.Footer).
  */
 
-import type { TemplateNode, ComponentNode, ElementNode, ZenIR, LoopContext, ComponentScriptIR } from '../ir/types'
+import type { TemplateNode, ComponentNode, ElementNode, ZenIR, LoopContext, ComponentScriptIR, ExpressionIR } from '../ir/types'
 import type { ComponentMetadata } from '../discovery/componentDiscovery'
 import { extractSlotsFromChildren, resolveSlots } from './slotResolver'
 import { throwOrphanCompoundError, throwUnresolvedComponentError } from '../validate/invariants'
 
-// Track which components have been used (for style and script collection)
+// Track which components have been used (for style, script, and expression collection)
 const usedComponents = new Set<string>()
 
 /**
  * Resolve all component nodes in a template IR
  * 
  * Recursively replaces ComponentNode instances with their resolved templates
- * Also collects styles AND scripts from used components and adds them to the IR
+ * Also collects styles, scripts, AND expressions from used components and adds them to the IR
  */
 export function resolveComponentsInIR(
     ir: ZenIR,
@@ -46,11 +46,21 @@ export function resolveComponentsInIR(
             scriptAttributes: meta.scriptAttributes || {}
         }))
 
+    // Collect expressions from all used components (critical for rendering)
+    // Component templates may contain expression nodes that reference expression IDs
+    // These IDs must be present in the IR's expressions array for transformation to work
+    const componentExpressions: ExpressionIR[] = Array.from(usedComponents)
+        .map(name => components.get(name))
+        .filter((meta): meta is ComponentMetadata => meta !== undefined && meta.expressions?.length > 0)
+        .flatMap(meta => meta.expressions)
+
     return {
         ...ir,
         template: {
             ...ir.template,
-            nodes: resolvedNodes
+            nodes: resolvedNodes,
+            // Merge component expressions with existing page expressions
+            expressions: [...ir.template.expressions, ...componentExpressions]
         },
         // Merge component styles with existing page styles
         styles: [...ir.styles, ...componentStyles],
@@ -108,6 +118,34 @@ function resolveComponentNode(
         }
     }
 
+    // Handle loop-fragment nodes - recursively resolve body
+    if (node.type === 'loop-fragment') {
+        const loopNode = node as import('../ir/types').LoopFragmentNode
+        return {
+            ...loopNode,
+            body: resolveComponentsInNodes(loopNode.body, components, depth + 1)
+        }
+    }
+
+    // Handle conditional-fragment nodes - recursively resolve both branches
+    if (node.type === 'conditional-fragment') {
+        const condNode = node as import('../ir/types').ConditionalFragmentNode
+        return {
+            ...condNode,
+            consequent: resolveComponentsInNodes(condNode.consequent, components, depth + 1),
+            alternate: resolveComponentsInNodes(condNode.alternate, components, depth + 1)
+        }
+    }
+
+    // Handle optional-fragment nodes - recursively resolve fragment
+    if (node.type === 'optional-fragment') {
+        const optNode = node as import('../ir/types').OptionalFragmentNode
+        return {
+            ...optNode,
+            fragment: resolveComponentsInNodes(optNode.fragment, components, depth + 1)
+        }
+    }
+
     // Text and expression nodes pass through unchanged
     return node
 }