@constela/compiler 0.7.0 → 0.8.0

package/README.md

@@ -0,0 +1,172 @@
+# @constela/compiler
+
+Transforms Constela JSON programs into optimized runtime code.
+
+## Installation
+
+```bash
+npm install @constela/compiler
+```
+
+## Usage
+
+```bash
+constela compile app.json --out dist/app.compiled.json
+```
+
+## JSON Input
+
+```json
+{
+  "version": "1.0",
+  "state": {
+    "count": { "type": "number", "initial": 0 }
+  },
+  "actions": [
+    {
+      "name": "increment",
+      "steps": [{ "do": "update", "target": "count", "operation": "increment" }]
+    }
+  ],
+  "view": {
+    "kind": "element",
+    "tag": "button",
+    "props": { "onClick": { "event": "click", "action": "increment" } },
+    "children": [{ "kind": "text", "value": { "expr": "state", "name": "count" } }]
+  }
+}
+```
+
+## Compiler Pipeline
+
+The compiler transforms JSON programs through three passes:
+
+1. **Validate** - JSON Schema validation
+2. **Analyze** - Semantic analysis (state, actions, components, routes)
+3. **Transform** - AST to optimized runtime program
+
+## CompiledProgram Structure
+
+```json
+{
+  "version": "1.0",
+  "route": {
+    "path": "/users/:id",
+    "params": ["id"],
+    "title": { ... },
+    "layout": "MainLayout"
+  },
+  "lifecycle": {
+    "onMount": "loadData",
+    "onUnmount": "cleanup"
+  },
+  "state": {
+    "count": { "type": "number", "initial": 0 }
+  },
+  "actions": {
+    "increment": {
+      "name": "increment",
+      "steps": [{ "do": "update", "target": "count", "operation": "increment" }]
+    }
+  },
+  "view": { ... }
+}
+```
+
+## Layout Compilation
+
+Layouts are compiled separately with slot validation:
+
+```json
+{
+  "version": "1.0",
+  "type": "layout",
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "children": [
+      { "kind": "component", "name": "Header" },
+      { "kind": "slot" },
+      { "kind": "component", "name": "Footer" }
+    ]
+  }
+}
+```
+
+**Layout Validations:**
+- At least one slot exists
+- No duplicate named slots
+- No duplicate default slots
+- Slots not inside loops
+
+## Error Handling
+
+Structured errors with JSON Pointer paths:
+
+```json
+{
+  "code": "UNDEFINED_STATE",
+  "message": "State \"count\" is not defined",
+  "path": "/view/children/0/props/onClick"
+}
+```
+
+**Error Codes:**
+- `SCHEMA_INVALID` - JSON Schema validation error
+- `UNDEFINED_STATE` - Reference to undefined state
+- `UNDEFINED_ACTION` - Reference to undefined action
+- `DUPLICATE_ACTION` - Duplicate action name
+- `VAR_UNDEFINED` - Undefined variable reference
+- `COMPONENT_NOT_FOUND` - Undefined component
+- `COMPONENT_PROP_MISSING` - Missing required prop
+- `COMPONENT_CYCLE` - Circular component reference
+- `OPERATION_INVALID_FOR_TYPE` - Invalid operation for state type
+- `LAYOUT_MISSING_SLOT` - Layout missing slot node
+- `LAYOUT_NOT_FOUND` - Referenced layout not found
+
+## Internal API
+
+> For framework developers only. End users should use the CLI.
+
+### compile
+
+```typescript
+import { compile } from '@constela/compiler';
+
+const result = compile(jsonInput);
+
+if (result.ok) {
+  console.log(result.program);
+} else {
+  console.error(result.errors);
+}
+```
+
+### Individual Passes
+
+```typescript
+import { validatePass, analyzePass, transformPass } from '@constela/compiler';
+
+// Step 1: Validate
+const validated = validatePass(input);
+
+// Step 2: Analyze
+const analyzed = analyzePass(validated.program);
+
+// Step 3: Transform
+const compiled = transformPass(analyzed.program, analyzed.context);
+```
+
+### Layout Compilation
+
+```typescript
+import { analyzeLayoutPass, transformLayoutPass, composeLayoutWithPage } from '@constela/compiler';
+
+const layoutResult = analyzeLayoutPass(layoutProgram);
+const compiledLayout = transformLayoutPass(layoutProgram, layoutResult.context);
+const composedProgram = composeLayoutWithPage(compiledLayout, compiledPage);
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Program, ConstelaError, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
+import { Program, ConstelaError, Expression, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
 export { createUndefinedVarError } from '@constela/core';
 
 /**
@@ -20,6 +20,7 @@ interface AnalysisContext {
     importNames: Set<string>;
     dataNames: Set<string>;
     refNames: Set<string>;
+    styleNames: Set<string>;
 }
 interface AnalyzePassSuccess {
     ok: true;
@@ -63,6 +64,7 @@ interface CompiledRouteDefinition {
     params: string[];
     title?: CompiledExpression;
     layout?: string;
+    layoutParams?: Record<string, Expression>;
     meta?: Record<string, CompiledExpression>;
 }
 interface CompiledLifecycleHooks {
@@ -87,7 +89,7 @@ interface CompiledAction {
     name: string;
     steps: CompiledActionStep[];
 }
-type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep;
+type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep | CompiledDomStep | CompiledIfStep;
 interface CompiledSetStep {
     do: 'set';
     target: string;
@@ -178,7 +180,23 @@ interface CompiledDisposeStep {
     do: 'dispose';
     target: CompiledExpression;
 }
-type CompiledNode = CompiledElementNode | CompiledTextNode | CompiledIfNode | CompiledEachNode | CompiledMarkdownNode | CompiledCodeNode;
+/**
+ * Compiled DOM manipulation step
+ */
+interface CompiledDomStep {
+    do: 'dom';
+    operation: 'addClass' | 'removeClass' | 'toggleClass' | 'setAttribute' | 'removeAttribute';
+    selector: CompiledExpression;
+    value?: CompiledExpression;
+    attribute?: string;
+}
+interface CompiledIfStep {
+    do: 'if';
+    condition: CompiledExpression;
+    then: CompiledActionStep[];
+    else?: CompiledActionStep[];
+}
+type CompiledNode = CompiledElementNode | CompiledTextNode | CompiledIfNode | CompiledEachNode | CompiledMarkdownNode | CompiledCodeNode | CompiledSlotNode;
 interface CompiledElementNode {
     kind: 'element';
     tag: string;
@@ -213,7 +231,11 @@ interface CompiledCodeNode {
     language: CompiledExpression;
     content: CompiledExpression;
 }
-type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr | CompiledRouteExpr | CompiledImportExpr | CompiledRefExpr;
+interface CompiledSlotNode {
+    kind: 'slot';
+    name?: string;
+}
+type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr | CompiledRouteExpr | CompiledImportExpr | CompiledDataExpr | CompiledRefExpr | CompiledIndexExpr | CompiledParamExpr | CompiledStyleExpr;
 interface CompiledLitExpr {
     expr: 'lit';
     value: string | number | boolean | null | unknown[];
@@ -221,6 +243,7 @@ interface CompiledLitExpr {
 interface CompiledStateExpr {
     expr: 'state';
     name: string;
+    path?: string;
 }
 interface CompiledVarExpr {
     expr: 'var';
@@ -258,6 +281,26 @@ interface CompiledImportExpr {
     name: string;
     path?: string;
 }
+interface CompiledDataExpr {
+    expr: 'data';
+    name: string;
+    path?: string;
+}
+interface CompiledIndexExpr {
+    expr: 'index';
+    base: CompiledExpression;
+    key: CompiledExpression;
+}
+interface CompiledParamExpr {
+    expr: 'param';
+    name: string;
+    path?: string;
+}
+interface CompiledStyleExpr {
+    expr: 'style';
+    name: string;
+    variants?: Record<string, CompiledExpression>;
+}
 interface CompiledEventHandler {
     event: string;
     action: string;
@@ -380,6 +423,7 @@ interface CompiledLayoutProgram {
     actions: CompiledAction[];
     view: CompiledNode;
     components?: Record<string, ComponentDef> | undefined;
+    importData?: Record<string, unknown>;
 }
 /**
  * Transforms a layout program into a compiled layout
@@ -388,6 +432,6 @@ declare function transformLayoutPass(layout: LayoutProgram, _context: LayoutAnal
 /**
  * Composes a layout with a page, inserting page content into slots
  */
-declare function composeLayoutWithPage(layout: CompiledProgram, page: CompiledProgram, slots?: Record<string, ViewNode>): CompiledProgram;
+declare function composeLayoutWithPage(layout: CompiledProgram, page: CompiledProgram, layoutParams?: Record<string, Expression>, slots?: Record<string, ViewNode>): CompiledProgram;
 
-export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledBinExpr, type CompiledCallStep, type CompiledClipboardStep, type CompiledCodeNode, type CompiledCondExpr, type CompiledDisposeStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledGetExpr, type CompiledIfNode, type CompiledImportExpr, type CompiledImportStep, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledLitExpr, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledNotExpr, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSetStep, type CompiledStateExpr, type CompiledStorageStep, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, type CompiledVarExpr, type LayoutAnalysisContext, type LayoutAnalysisFailure, type LayoutAnalysisResult, type LayoutAnalysisSuccess, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzeLayoutPass, analyzePass, compile, composeLayoutWithPage, transformLayoutPass, transformPass, validatePass };
+export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledBinExpr, type CompiledCallStep, type CompiledClipboardStep, type CompiledCodeNode, type CompiledCondExpr, type CompiledDataExpr, type CompiledDisposeStep, type CompiledDomStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledGetExpr, type CompiledIfNode, type CompiledIfStep, type CompiledImportExpr, type CompiledImportStep, type CompiledIndexExpr, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledLitExpr, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledNotExpr, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSetStep, type CompiledSlotNode, type CompiledStateExpr, type CompiledStorageStep, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, type CompiledVarExpr, type LayoutAnalysisContext, type LayoutAnalysisFailure, type LayoutAnalysisResult, type LayoutAnalysisSuccess, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzeLayoutPass, analyzePass, compile, composeLayoutWithPage, transformLayoutPass, transformPass, validatePass };

package/dist/index.js

@@ -42,6 +42,9 @@ import {
   createClipboardWriteMissingValueError,
   createInvalidNavigateTargetError,
   createUndefinedRefError,
+  createUndefinedStyleError,
+  createUndefinedVariantError,
+  findSimilarNames,
   isEventHandler,
   DATA_SOURCE_TYPES,
   DATA_TRANSFORMS,
@@ -53,6 +56,15 @@ import {
 function buildPath(base, ...segments) {
   return segments.reduce((p, s) => `${p}/${s}`, base);
 }
+function createErrorOptionsWithSuggestion(name, availableNames) {
+  const availableNamesArray = Array.from(availableNames);
+  const similarNames = findSimilarNames(name, availableNames);
+  const suggestion = similarNames.length > 0 ? `Did you mean '${similarNames[0]}'?` : void 0;
+  return {
+    suggestion,
+    context: { availableNames: availableNamesArray }
+  };
+}
 function extractRouteParams(path) {
   const params = [];
   const segments = path.split("/");
@@ -124,7 +136,10 @@ function collectContext(programAst) {
     programAst.data ? Object.keys(programAst.data) : []
   );
   const refNames = collectRefs(programAst.view);
-  return { stateNames, actionNames, componentNames, routeParams, importNames, dataNames, refNames };
+  const styleNames = new Set(
+    programAst.styles ? Object.keys(programAst.styles) : []
+  );
+  return { stateNames, actionNames, componentNames, routeParams, importNames, dataNames, refNames, styleNames };
 }
 function checkDuplicateActions(ast2) {
   const errors = [];
@@ -144,7 +159,8 @@ function validateExpression(expr, path, context, scope, paramScope) {
   switch (expr.expr) {
     case "state":
       if (!context.stateNames.has(expr.name)) {
-        errors.push(createUndefinedStateError(expr.name, path));
+        const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.stateNames);
+        errors.push(createUndefinedStateError(expr.name, path, errorOptions));
       }
       break;
     case "var":
@@ -207,6 +223,32 @@ function validateExpression(expr, path, context, scope, paramScope) {
     case "get":
       errors.push(...validateExpression(expr.base, buildPath(path, "base"), context, scope, paramScope));
       break;
+    case "style":
+      errors.push(...validateStyleExpression(expr, path, context, scope, paramScope));
+      break;
+  }
+  return errors;
+}
+function validateStyleExpression(expr, path, context, scope, paramScope) {
+  const errors = [];
+  if (!context.styleNames.has(expr.name)) {
+    const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.styleNames);
+    errors.push(createUndefinedStyleError(expr.name, path, errorOptions));
+    return errors;
+  }
+  if (expr.variants) {
+    const stylePreset = ast.styles?.[expr.name];
+    const availableVariants = new Set(
+      stylePreset?.variants ? Object.keys(stylePreset.variants) : []
+    );
+    for (const [variantKey, variantValue] of Object.entries(expr.variants)) {
+      const variantPath = buildPath(path, "variants", variantKey);
+      if (!availableVariants.has(variantKey)) {
+        const errorOptions = createErrorOptionsWithSuggestion(variantKey, availableVariants);
+        errors.push(createUndefinedVariantError(variantKey, expr.name, variantPath, errorOptions));
+      }
+      errors.push(...validateExpression(variantValue, variantPath, context, scope, paramScope));
+    }
   }
   return errors;
 }
@@ -215,7 +257,8 @@ function validateActionStep(step, path, context) {
   switch (step.do) {
     case "set":
       if (!context.stateNames.has(step.target)) {
-        errors.push(createUndefinedStateError(step.target, buildPath(path, "target")));
+        const errorOptions = createErrorOptionsWithSuggestion(step.target, context.stateNames);
+        errors.push(createUndefinedStateError(step.target, buildPath(path, "target"), errorOptions));
       }
       errors.push(
         ...validateExpressionStateOnly(step.value, buildPath(path, "value"), context)
@@ -223,7 +266,8 @@ function validateActionStep(step, path, context) {
       break;
     case "update": {
       if (!context.stateNames.has(step.target)) {
-        errors.push(createUndefinedStateError(step.target, buildPath(path, "target")));
+        const errorOptions = createErrorOptionsWithSuggestion(step.target, context.stateNames);
+        errors.push(createUndefinedStateError(step.target, buildPath(path, "target"), errorOptions));
       } else {
         const stateField = ast.state[step.target];
         if (stateField) {
@@ -437,7 +481,8 @@ function validateActionStep(step, path, context) {
         ...validateExpressionStateOnly(subscribeStep.target, buildPath(path, "target"), context)
       );
       if (!context.actionNames.has(subscribeStep.action)) {
-        errors.push(createUndefinedActionError(subscribeStep.action, buildPath(path, "action")));
+        const errorOptions = createErrorOptionsWithSuggestion(subscribeStep.action, context.actionNames);
+        errors.push(createUndefinedActionError(subscribeStep.action, buildPath(path, "action"), errorOptions));
       }
       break;
     }
@@ -456,7 +501,8 @@ function validateExpressionStateOnly(expr, path, context) {
   switch (expr.expr) {
     case "state":
       if (!context.stateNames.has(expr.name)) {
-        errors.push(createUndefinedStateError(expr.name, path));
+        const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.stateNames);
+        errors.push(createUndefinedStateError(expr.name, path, errorOptions));
       }
       break;
     case "var":
@@ -513,6 +559,32 @@ function validateExpressionStateOnly(expr, path, context) {
     case "get":
       errors.push(...validateExpressionStateOnly(expr.base, buildPath(path, "base"), context));
       break;
+    case "style":
+      errors.push(...validateStyleExpressionStateOnly(expr, path, context));
+      break;
+  }
+  return errors;
+}
+function validateStyleExpressionStateOnly(expr, path, context) {
+  const errors = [];
+  if (!context.styleNames.has(expr.name)) {
+    const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.styleNames);
+    errors.push(createUndefinedStyleError(expr.name, path, errorOptions));
+    return errors;
+  }
+  if (expr.variants) {
+    const stylePreset = ast.styles?.[expr.name];
+    const availableVariants = new Set(
+      stylePreset?.variants ? Object.keys(stylePreset.variants) : []
+    );
+    for (const [variantKey, variantValue] of Object.entries(expr.variants)) {
+      const variantPath = buildPath(path, "variants", variantKey);
+      if (!availableVariants.has(variantKey)) {
+        const errorOptions = createErrorOptionsWithSuggestion(variantKey, availableVariants);
+        errors.push(createUndefinedVariantError(variantKey, expr.name, variantPath, errorOptions));
+      }
+      errors.push(...validateExpressionStateOnly(variantValue, variantPath, context));
+    }
   }
   return errors;
 }
@@ -521,7 +593,8 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
   switch (expr.expr) {
     case "state":
       if (!context.stateNames.has(expr.name)) {
-        errors.push(createUndefinedStateError(expr.name, path));
+        const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.stateNames);
+        errors.push(createUndefinedStateError(expr.name, path, errorOptions));
       }
       break;
     case "var":
@@ -595,6 +668,32 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
         ...validateExpressionInEventPayload(expr.base, buildPath(path, "base"), context, scope)
       );
       break;
+    case "style":
+      errors.push(...validateStyleExpressionInEventPayload(expr, path, context, scope));
+      break;
+  }
+  return errors;
+}
+function validateStyleExpressionInEventPayload(expr, path, context, scope) {
+  const errors = [];
+  if (!context.styleNames.has(expr.name)) {
+    const errorOptions = createErrorOptionsWithSuggestion(expr.name, context.styleNames);
+    errors.push(createUndefinedStyleError(expr.name, path, errorOptions));
+    return errors;
+  }
+  if (expr.variants) {
+    const stylePreset = ast.styles?.[expr.name];
+    const availableVariants = new Set(
+      stylePreset?.variants ? Object.keys(stylePreset.variants) : []
+    );
+    for (const [variantKey, variantValue] of Object.entries(expr.variants)) {
+      const variantPath = buildPath(path, "variants", variantKey);
+      if (!availableVariants.has(variantKey)) {
+        const errorOptions = createErrorOptionsWithSuggestion(variantKey, availableVariants);
+        errors.push(createUndefinedVariantError(variantKey, expr.name, variantPath, errorOptions));
+      }
+      errors.push(...validateExpressionInEventPayload(variantValue, variantPath, context, scope));
+    }
   }
   return errors;
 }
@@ -608,7 +707,8 @@ function validateViewNode(node, path, context, scope, options = { insideComponen
           const propPath = buildPath(path, "props", propName);
           if (isEventHandler(propValue)) {
             if (!context.actionNames.has(propValue.action)) {
-              errors.push(createUndefinedActionError(propValue.action, propPath));
+              const errorOptions = createErrorOptionsWithSuggestion(propValue.action, context.actionNames);
+              errors.push(createUndefinedActionError(propValue.action, propPath, errorOptions));
             }
             if (propValue.payload) {
               errors.push(
@@ -662,7 +762,8 @@ function validateViewNode(node, path, context, scope, options = { insideComponen
     }
     case "component": {
       if (!context.componentNames.has(node.name)) {
-        errors.push(createComponentNotFoundError(node.name, path));
+        const errorOptions = createErrorOptionsWithSuggestion(node.name, context.componentNames);
+        errors.push(createComponentNotFoundError(node.name, path, errorOptions));
       } else {
         const componentDef = ast.components?.[node.name];
         if (componentDef) {
@@ -839,7 +940,8 @@ function validateLifecycleHooks(lifecycle, context) {
   for (const hook of hooks) {
     const actionName = lifecycle[hook];
     if (actionName && !context.actionNames.has(actionName)) {
-      errors.push(createUndefinedActionError(actionName, `/lifecycle/${hook}`));
+      const errorOptions = createErrorOptionsWithSuggestion(actionName, context.actionNames);
+      errors.push(createUndefinedActionError(actionName, `/lifecycle/${hook}`, errorOptions));
     }
   }
   return errors;
@@ -958,11 +1060,16 @@ function transformExpression(expr, ctx) {
         expr: "lit",
         value: expr.value
       };
-    case "state":
-      return {
+    case "state": {
+      const stateExpr = {
         expr: "state",
         name: expr.name
       };
+      if (expr.path) {
+        stateExpr.path = expr.path;
+      }
+      return stateExpr;
+    }
     case "var": {
       const varExpr = {
         expr: "var",
@@ -1052,6 +1159,25 @@ function transformExpression(expr, ctx) {
     }
     case "ref":
       return { expr: "ref", name: expr.name };
+    case "index":
+      return {
+        expr: "index",
+        base: transformExpression(expr.base, ctx),
+        key: transformExpression(expr.key, ctx)
+      };
+    case "style": {
+      const styleExpr = {
+        expr: "style",
+        name: expr.name
+      };
+      if (expr.variants) {
+        styleExpr.variants = {};
+        for (const [key, value] of Object.entries(expr.variants)) {
+          styleExpr.variants[key] = transformExpression(value, ctx);
+        }
+      }
+      return styleExpr;
+    }
   }
 }
 function transformEventHandler(handler, ctx) {
@@ -1219,6 +1345,16 @@ function transformActionStep(step) {
         target: transformExpression(disposeStep.target, emptyContext)
       };
     }
+    case "dom": {
+      const domStep = step;
+      return {
+        do: "dom",
+        operation: domStep.operation,
+        selector: transformExpression(domStep.selector, emptyContext),
+        ...domStep.value && { value: transformExpression(domStep.value, emptyContext) },
+        ...domStep.attribute && { attribute: domStep.attribute }
+      };
+    }
   }
 }
 function flattenSlotChildren(children, ctx) {
@@ -1385,6 +1521,9 @@ function transformRouteDefinition(route, ctx) {
   if (route.layout) {
     compiled.layout = route.layout;
   }
+  if (route.layoutParams) {
+    compiled.layoutParams = route.layoutParams;
+  }
   if (route.meta) {
     compiled.meta = {};
     for (const [key, value] of Object.entries(route.meta)) {
@@ -1685,31 +1824,254 @@ function transformState2(state) {
   }
   return result;
 }
-function transformActions2(actions) {
-  if (!actions) return [];
-  return actions.map((action) => ({
-    name: action.name,
-    steps: action.steps.map((step) => {
-      if (step.do === "set") {
-        return {
-          do: "set",
-          target: step.target,
-          value: { expr: "lit", value: null }
-          // Simplified for now
-        };
+function transformExpression2(expr) {
+  switch (expr.expr) {
+    case "lit":
+      return { expr: "lit", value: expr.value };
+    case "state":
+      return { expr: "state", name: expr.name };
+    case "var": {
+      const varExpr = { expr: "var", name: expr.name };
+      if (expr.path) {
+        varExpr.path = expr.path;
       }
-      if (step.do === "update") {
-        return {
-          do: "update",
-          target: step.target,
-          operation: step.operation
-        };
+      return varExpr;
+    }
+    case "bin":
+      return {
+        expr: "bin",
+        op: expr.op,
+        left: transformExpression2(expr.left),
+        right: transformExpression2(expr.right)
+      };
+    case "not":
+      return {
+        expr: "not",
+        operand: transformExpression2(expr.operand)
+      };
+    case "cond":
+      return {
+        expr: "cond",
+        if: transformExpression2(expr.if),
+        then: transformExpression2(expr.then),
+        else: transformExpression2(expr.else)
+      };
+    case "get":
+      return {
+        expr: "get",
+        base: transformExpression2(expr.base),
+        path: expr.path
+      };
+    case "route":
+      return {
+        expr: "route",
+        name: expr.name,
+        source: expr.source ?? "param"
+      };
+    case "import": {
+      const importExpr = { expr: "import", name: expr.name };
+      if (expr.path) {
+        importExpr.path = expr.path;
+      }
+      return importExpr;
+    }
+    case "data": {
+      const dataExpr = { expr: "import", name: expr.name };
+      if (expr.path) {
+        dataExpr.path = expr.path;
       }
+      return dataExpr;
+    }
+    case "param": {
+      const paramExpr = { expr: "param", name: expr.name };
+      if (expr.path) {
+        paramExpr.path = expr.path;
+      }
+      return paramExpr;
+    }
+    case "ref":
+      return { expr: "ref", name: expr.name };
+    default:
+      return { expr: "lit", value: null };
+  }
+}
+function transformActionStep2(step) {
+  switch (step.do) {
+    case "set":
       return {
+        do: "set",
+        target: step.target,
+        value: transformExpression2(step.value)
+      };
+    case "update": {
+      const updateStep = {
+        do: "update",
+        target: step.target,
+        operation: step.operation
+      };
+      if (step.value) {
+        updateStep.value = transformExpression2(step.value);
+      }
+      if (step.index) {
+        updateStep.index = transformExpression2(step.index);
+      }
+      if (step.deleteCount) {
+        updateStep.deleteCount = transformExpression2(step.deleteCount);
+      }
+      return updateStep;
+    }
+    case "fetch": {
+      const fetchStep = {
         do: "fetch",
-        url: { expr: "lit", value: "" }
+        url: transformExpression2(step.url)
       };
-    })
+      if (step.method) {
+        fetchStep.method = step.method;
+      }
+      if (step.body) {
+        fetchStep.body = transformExpression2(step.body);
+      }
+      if (step.result) {
+        fetchStep.result = step.result;
+      }
+      if (step.onSuccess) {
+        fetchStep.onSuccess = step.onSuccess.map(transformActionStep2);
+      }
+      if (step.onError) {
+        fetchStep.onError = step.onError.map(transformActionStep2);
+      }
+      return fetchStep;
+    }
+    case "storage": {
+      const storageStep = step;
+      const compiledStorageStep = {
+        do: "storage",
+        operation: storageStep.operation,
+        key: transformExpression2(storageStep.key),
+        storage: storageStep.storage
+      };
+      if (storageStep.value) {
+        compiledStorageStep.value = transformExpression2(storageStep.value);
+      }
+      if (storageStep.result) {
+        compiledStorageStep.result = storageStep.result;
+      }
+      if (storageStep.onSuccess) {
+        compiledStorageStep.onSuccess = storageStep.onSuccess.map(transformActionStep2);
+      }
+      if (storageStep.onError) {
+        compiledStorageStep.onError = storageStep.onError.map(transformActionStep2);
+      }
+      return compiledStorageStep;
+    }
+    case "clipboard": {
+      const clipboardStep = step;
+      const compiledClipboardStep = {
+        do: "clipboard",
+        operation: clipboardStep.operation
+      };
+      if (clipboardStep.value) {
+        compiledClipboardStep.value = transformExpression2(clipboardStep.value);
+      }
+      if (clipboardStep.result) {
+        compiledClipboardStep.result = clipboardStep.result;
+      }
+      if (clipboardStep.onSuccess) {
+        compiledClipboardStep.onSuccess = clipboardStep.onSuccess.map(transformActionStep2);
+      }
+      if (clipboardStep.onError) {
+        compiledClipboardStep.onError = clipboardStep.onError.map(transformActionStep2);
+      }
+      return compiledClipboardStep;
+    }
+    case "navigate": {
+      const navigateStep = step;
+      const compiledNavigateStep = {
+        do: "navigate",
+        url: transformExpression2(navigateStep.url)
+      };
+      if (navigateStep.target) {
+        compiledNavigateStep.target = navigateStep.target;
+      }
+      if (navigateStep.replace !== void 0) {
+        compiledNavigateStep.replace = navigateStep.replace;
+      }
+      return compiledNavigateStep;
+    }
+    case "import": {
+      const importStep = step;
+      const compiledImportStep = {
+        do: "import",
+        module: importStep.module,
+        result: importStep.result
+      };
+      if (importStep.onSuccess) {
+        compiledImportStep.onSuccess = importStep.onSuccess.map(transformActionStep2);
+      }
+      if (importStep.onError) {
+        compiledImportStep.onError = importStep.onError.map(transformActionStep2);
+      }
+      return compiledImportStep;
+    }
+    case "call": {
+      const callStep = step;
+      const compiledCallStep = {
+        do: "call",
+        target: transformExpression2(callStep.target)
+      };
+      if (callStep.args) {
+        compiledCallStep.args = callStep.args.map((arg) => transformExpression2(arg));
+      }
+      if (callStep.result) {
+        compiledCallStep.result = callStep.result;
+      }
+      if (callStep.onSuccess) {
+        compiledCallStep.onSuccess = callStep.onSuccess.map(transformActionStep2);
+      }
+      if (callStep.onError) {
+        compiledCallStep.onError = callStep.onError.map(transformActionStep2);
+      }
+      return compiledCallStep;
+    }
+    case "subscribe": {
+      const subscribeStep = step;
+      return {
+        do: "subscribe",
+        target: transformExpression2(subscribeStep.target),
+        event: subscribeStep.event,
+        action: subscribeStep.action
+      };
+    }
+    case "dispose": {
+      const disposeStep = step;
+      return {
+        do: "dispose",
+        target: transformExpression2(disposeStep.target)
+      };
+    }
+    case "dom": {
+      const domStep = step;
+      return {
+        do: "dom",
+        operation: domStep.operation,
+        selector: transformExpression2(domStep.selector),
+        ...domStep.value && { value: transformExpression2(domStep.value) },
+        ...domStep.attribute && { attribute: domStep.attribute }
+      };
+    }
+    default:
+      return {
+        do: "set",
+        target: "_unknown",
+        value: { expr: "lit", value: null }
+      };
+  }
+}
+function transformActions2(actions) {
+  if (!actions) return [];
+  return actions.map((action) => ({
+    name: action.name,
+    steps: action.steps.map(transformActionStep2)
   }));
 }
 function transformViewNode2(node, ctx) {
@@ -1791,7 +2153,7 @@ function transformLayoutPass(layout, _context) {
   const ctx = {
     components: layout.components || {}
   };
-  return {
+  const result = {
     version: "1.0",
     type: "layout",
     state: transformState2(layout.state),
@@ -1799,17 +2161,161 @@ function transformLayoutPass(layout, _context) {
     view: transformViewNode2(layout.view, ctx),
     components: layout.components
   };
+  if (layout.importData && Object.keys(layout.importData).length > 0) {
+    result.importData = layout.importData;
+  }
+  return result;
 }
 function deepCloneNode(node) {
   return JSON.parse(JSON.stringify(node));
 }
+function isParamExpression(value) {
+  return typeof value === "object" && value !== null && value.expr === "param" && typeof value.name === "string";
+}
+function resolveParamExpression(paramExpr, layoutParams) {
+  const resolvedValue = layoutParams[paramExpr.name];
+  if (!resolvedValue) {
+    return { expr: "lit", value: null };
+  }
+  if (paramExpr.path) {
+    return {
+      expr: "get",
+      base: resolvedValue,
+      path: paramExpr.path
+    };
+  }
+  return resolvedValue;
+}
+function resolveExpressionValue(value, layoutParams) {
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+  if (isParamExpression(value)) {
+    return resolveParamExpression(value, layoutParams);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveExpressionValue(item, layoutParams));
+  }
+  const obj = value;
+  const result = {};
+  for (const [key, val] of Object.entries(obj)) {
+    result[key] = resolveExpressionValue(val, layoutParams);
+  }
+  return result;
+}
+function resolvePropsParams(props, layoutParams) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    result[key] = resolveExpressionValue(value, layoutParams);
+  }
+  return result;
+}
+function resolveParamExpressions(node, layoutParams) {
+  switch (node.kind) {
+    case "element": {
+      const elementNode = node;
+      const result = {
+        kind: "element",
+        tag: elementNode.tag
+      };
+      if (elementNode.props) {
+        result.props = resolvePropsParams(
+          elementNode.props,
+          layoutParams
+        );
+      }
+      if (elementNode.children && elementNode.children.length > 0) {
+        result.children = elementNode.children.map(
+          (child) => resolveParamExpressions(child, layoutParams)
+        );
+      }
+      return result;
+    }
+    case "text": {
+      const textNode = node;
+      return {
+        kind: "text",
+        value: resolveExpressionValue(textNode.value, layoutParams)
+      };
+    }
+    case "if": {
+      const ifNode = node;
+      const result = {
+        kind: "if",
+        condition: resolveExpressionValue(ifNode.condition, layoutParams),
+        then: resolveParamExpressions(ifNode.then, layoutParams)
+      };
+      if (ifNode.else) {
+        result.else = resolveParamExpressions(
+          ifNode.else,
+          layoutParams
+        );
+      }
+      return result;
+    }
+    case "each": {
+      const eachNode = node;
+      return {
+        kind: "each",
+        items: resolveExpressionValue(eachNode.items, layoutParams),
+        as: eachNode.as,
+        body: resolveParamExpressions(eachNode.body, layoutParams)
+      };
+    }
+    default:
+      return node;
+  }
+}
+function processNamedSlotsOnly(node, namedContent) {
+  if (node.kind === "slot") {
+    const slotName = node.name;
+    if (slotName && namedContent[slotName]) {
+      return deepCloneNode(namedContent[slotName]);
+    }
+    return node;
+  }
+  if (node.kind === "element") {
+    const children = node.children;
+    if (children && children.length > 0) {
+      const newChildren = children.map((child) => processNamedSlotsOnly(child, namedContent));
+      return {
+        ...node,
+        children: newChildren
+      };
+    }
+    return node;
+  }
+  if (node.kind === "if") {
+    const ifNode = node;
+    const result = {
+      ...node,
+      then: processNamedSlotsOnly(ifNode.then, namedContent)
+    };
+    if (ifNode.else) {
+      result.else = processNamedSlotsOnly(ifNode.else, namedContent);
+    }
+    return result;
+  }
+  if (node.kind === "each") {
+    const eachNode = node;
+    return {
+      ...node,
+      body: processNamedSlotsOnly(eachNode.body, namedContent)
+    };
+  }
+  return node;
+}
 function replaceSlots(node, defaultContent, namedContent) {
   if (node.kind === "slot") {
     const slotName = node.name;
     if (slotName && namedContent?.[slotName]) {
       return deepCloneNode(namedContent[slotName]);
     }
-    return deepCloneNode(defaultContent);
+    const clonedDefault = deepCloneNode(defaultContent);
+    if (namedContent && Object.keys(namedContent).length > 0) {
+      return processNamedSlotsOnly(clonedDefault, namedContent);
+    }
+    return clonedDefault;
   }
   if (node.kind === "element") {
     const children = node.children;
@@ -1842,11 +2348,31 @@ function replaceSlots(node, defaultContent, namedContent) {
   }
   return node;
 }
-function composeLayoutWithPage(layout, page, slots) {
-  const layoutView = deepCloneNode(layout.view);
-  const namedContent = slots ? Object.fromEntries(
-    Object.entries(slots).map(([name, node]) => [name, node])
-  ) : void 0;
+function extractMdxSlotsFromImportData(importData) {
+  if (!importData) return void 0;
+  for (const [, dataSource] of Object.entries(importData)) {
+    if (!Array.isArray(dataSource)) continue;
+    for (const item of dataSource) {
+      if (typeof item === "object" && item !== null && "content" in item && typeof item.content === "object") {
+        const content = item.content;
+        return { "mdx-content": content };
+      }
+    }
+  }
+  return void 0;
+}
+function composeLayoutWithPage(layout, page, layoutParams, slots) {
+  let layoutView = deepCloneNode(layout.view);
+  const resolvedParams = layoutParams ?? {};
+  layoutView = resolveParamExpressions(layoutView, resolvedParams);
+  let namedContent;
+  if (slots) {
+    namedContent = Object.fromEntries(
+      Object.entries(slots).map(([name, node]) => [name, node])
+    );
+  } else {
+    namedContent = extractMdxSlotsFromImportData(page.importData);
+  }
   const composedView = replaceSlots(layoutView, page.view, namedContent);
   const mergedState = {};
   for (const [name, field] of Object.entries(page.state)) {
@@ -1897,6 +2423,16 @@ function composeLayoutWithPage(layout, page, slots) {
   if (Object.keys(mergedComponents).length > 0) {
     result.components = mergedComponents;
   }
+  const mergedImportData = {
+    ...layout.importData || {},
+    ...page.importData || {}
+  };
+  if (Object.keys(mergedImportData).length > 0) {
+    result.importData = mergedImportData;
+  }
+  if (page.lifecycle) {
+    result.lifecycle = page.lifecycle;
+  }
   return result;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Compiler for Constela UI framework - AST to Program transformation",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "dist"
   ],
   "dependencies": {
-    "@constela/core": "0.7.0"
+    "@constela/core": "0.8.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",