@constela/compiler 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Program, ConstelaError } from '@constela/core';
+import { Program, ConstelaError, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
 export { createUndefinedVarError } from '@constela/core';
 
 /**
@@ -16,6 +16,9 @@ interface AnalysisContext {
     stateNames: Set<string>;
     actionNames: Set<string>;
     componentNames: Set<string>;
+    routeParams: Set<string>;
+    importNames: Set<string>;
+    dataNames: Set<string>;
 }
 interface AnalyzePassSuccess {
     ok: true;
@@ -40,6 +43,7 @@ type AnalyzePassResult = AnalyzePassSuccess | AnalyzePassFailure;
  * - Validates component references and props
  * - Detects component cycles
  * - Validates param references in component definitions
+ * - Validates data sources and getStaticPaths
  *
  * @param programAst - Validated AST from validate pass
  * @returns AnalyzePassResult
@@ -53,20 +57,36 @@ declare function analyzePass(programAst: Program): AnalyzePassResult;
  * that is optimized for runtime execution.
  */
 
+interface CompiledRouteDefinition {
+    path: string;
+    params: string[];
+    title?: CompiledExpression;
+    layout?: string;
+    meta?: Record<string, CompiledExpression>;
+}
+interface CompiledLifecycleHooks {
+    onMount?: string;
+    onUnmount?: string;
+    onRouteEnter?: string;
+    onRouteLeave?: string;
+}
 interface CompiledProgram {
     version: '1.0';
+    route?: CompiledRouteDefinition;
+    lifecycle?: CompiledLifecycleHooks;
     state: Record<string, {
         type: string;
         initial: unknown;
     }>;
     actions: Record<string, CompiledAction>;
     view: CompiledNode;
+    importData?: Record<string, unknown>;
 }
 interface CompiledAction {
     name: string;
     steps: CompiledActionStep[];
 }
-type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep;
+type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep;
 interface CompiledSetStep {
     do: 'set';
     target: string;
@@ -89,6 +109,30 @@ interface CompiledFetchStep {
     onSuccess?: CompiledActionStep[];
     onError?: CompiledActionStep[];
 }
+interface CompiledStorageStep {
+    do: 'storage';
+    operation: 'get' | 'set' | 'remove';
+    key: CompiledExpression;
+    value?: CompiledExpression;
+    storage: 'local' | 'session';
+    result?: string;
+    onSuccess?: CompiledActionStep[];
+    onError?: CompiledActionStep[];
+}
+interface CompiledClipboardStep {
+    do: 'clipboard';
+    operation: 'write' | 'read';
+    value?: CompiledExpression;
+    result?: string;
+    onSuccess?: CompiledActionStep[];
+    onError?: CompiledActionStep[];
+}
+interface CompiledNavigateStep {
+    do: 'navigate';
+    url: CompiledExpression;
+    target?: '_self' | '_blank';
+    replace?: boolean;
+}
 type CompiledNode = CompiledElementNode | CompiledTextNode | CompiledIfNode | CompiledEachNode | CompiledMarkdownNode | CompiledCodeNode;
 interface CompiledElementNode {
     kind: 'element';
@@ -123,7 +167,7 @@ interface CompiledCodeNode {
     language: CompiledExpression;
     content: CompiledExpression;
 }
-type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr;
+type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr | CompiledRouteExpr | CompiledImportExpr;
 interface CompiledLitExpr {
     expr: 'lit';
     value: string | number | boolean | null | unknown[];
@@ -158,6 +202,16 @@ interface CompiledGetExpr {
     base: CompiledExpression;
     path: string;
 }
+interface CompiledRouteExpr {
+    expr: 'route';
+    name: string;
+    source: 'param' | 'query' | 'path';
+}
+interface CompiledImportExpr {
+    expr: 'import';
+    name: string;
+    path?: string;
+}
 interface CompiledEventHandler {
     event: string;
     action: string;
@@ -168,9 +222,10 @@ interface CompiledEventHandler {
  *
  * @param ast - Validated AST from validate pass
  * @param _context - Analysis context from analyze pass (unused in current implementation)
+ * @param importData - Optional resolved import data to include in the compiled program
  * @returns CompiledProgram
  */
-declare function transformPass(ast: Program, _context: AnalysisContext): CompiledProgram;
+declare function transformPass(ast: Program, _context: AnalysisContext, importData?: Record<string, unknown>): CompiledProgram;
 
 /**
  * Main compile function for @constela/compiler
@@ -222,4 +277,71 @@ type ValidatePassResult = ValidatePassSuccess | ValidatePassFailure;
  */
 declare function validatePass(input: unknown): ValidatePassResult;
 
-export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledCodeNode, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledIfNode, type CompiledMarkdownNode, type CompiledNode, type CompiledProgram, type CompiledSetStep, type CompiledTextNode, type CompiledUpdateStep, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzePass, compile, transformPass, validatePass };
+/**
+ * Layout Analysis Pass - Semantic validation for layout programs
+ *
+ * This pass performs semantic analysis on layout programs:
+ * - Validates that at least one slot node exists
+ * - Detects duplicate named slots
+ * - Validates state and action references within layouts
+ * - Warns/errors for slots inside loops
+ */
+
+interface LayoutAnalysisContext {
+    stateNames: Set<string>;
+    actionNames: Set<string>;
+    componentNames: Set<string>;
+    routeParams: Set<string>;
+    importNames: Set<string>;
+    slotNames: Set<string>;
+    hasDefaultSlot: boolean;
+}
+interface LayoutAnalysisSuccess {
+    ok: true;
+    context: LayoutAnalysisContext;
+}
+interface LayoutAnalysisFailure {
+    ok: false;
+    errors: ConstelaError[];
+}
+type LayoutAnalysisResult = LayoutAnalysisSuccess | LayoutAnalysisFailure;
+/**
+ * Performs static analysis on a layout program
+ *
+ * - Validates at least one slot exists
+ * - Detects duplicate slot names
+ * - Validates state references
+ * - Validates action references
+ *
+ * @param layout - Layout program to analyze
+ * @returns LayoutAnalysisResult
+ */
+declare function analyzeLayoutPass(layout: LayoutProgram): LayoutAnalysisResult;
+
+/**
+ * Layout Transform Pass - Layout to CompiledProgram transformation and composition
+ *
+ * This pass transforms layout programs and composes them with page programs.
+ */
+
+interface CompiledLayoutProgram {
+    version: '1.0';
+    type: 'layout';
+    state: Record<string, {
+        type: string;
+        initial: unknown;
+    }>;
+    actions: CompiledAction[];
+    view: CompiledNode;
+    components?: Record<string, ComponentDef> | undefined;
+}
+/**
+ * Transforms a layout program into a compiled layout
+ */
+declare function transformLayoutPass(layout: LayoutProgram, _context: LayoutAnalysisContext): CompiledLayoutProgram;
+/**
+ * Composes a layout with a page, inserting page content into slots
+ */
+declare function composeLayoutWithPage(layout: CompiledProgram, page: CompiledProgram, 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 CompiledClipboardStep, type CompiledCodeNode, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledIfNode, type CompiledImportExpr, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledProgram, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSetStep, type CompiledStorageStep, type CompiledTextNode, type CompiledUpdateStep, 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

@@ -27,18 +27,57 @@ import {
   createSchemaError,
   createOperationInvalidForTypeError,
   createOperationMissingFieldError,
-  isEventHandler
+  createUndefinedRouteParamError,
+  createRouteNotDefinedError,
+  createUndefinedImportError,
+  createImportsNotDefinedError,
+  createInvalidDataSourceError,
+  createUndefinedDataSourceError,
+  createDataNotDefinedError,
+  createUndefinedDataError,
+  createInvalidStorageOperationError,
+  createInvalidStorageTypeError,
+  createStorageSetMissingValueError,
+  createInvalidClipboardOperationError,
+  createClipboardWriteMissingValueError,
+  createInvalidNavigateTargetError,
+  isEventHandler,
+  DATA_SOURCE_TYPES,
+  DATA_TRANSFORMS,
+  STORAGE_OPERATIONS,
+  STORAGE_TYPES,
+  CLIPBOARD_OPERATIONS,
+  NAVIGATE_TARGETS
 } from "@constela/core";
 function buildPath(base, ...segments) {
   return segments.reduce((p, s) => `${p}/${s}`, base);
 }
+function extractRouteParams(path) {
+  const params = [];
+  const segments = path.split("/");
+  for (const segment of segments) {
+    if (segment.startsWith(":")) {
+      params.push(segment.slice(1));
+    }
+  }
+  return params;
+}
 function collectContext(ast2) {
   const stateNames = new Set(Object.keys(ast2.state));
   const actionNames = new Set(ast2.actions.map((a) => a.name));
   const componentNames = new Set(
     ast2.components ? Object.keys(ast2.components) : []
   );
-  return { stateNames, actionNames, componentNames };
+  const routeParams = new Set(
+    ast2.route ? extractRouteParams(ast2.route.path) : []
+  );
+  const importNames = new Set(
+    ast2.imports ? Object.keys(ast2.imports) : []
+  );
+  const dataNames = new Set(
+    ast2.data ? Object.keys(ast2.data) : []
+  );
+  return { stateNames, actionNames, componentNames, routeParams, importNames, dataNames };
 }
 function checkDuplicateActions(ast2) {
   const errors = [];
@@ -71,6 +110,33 @@ function validateExpression(expr, path, context, scope, paramScope) {
         errors.push(createUndefinedParamError(expr.name, path));
       }
       break;
+    case "route": {
+      if (!hasRoute) {
+        errors.push(createRouteNotDefinedError(path));
+      } else {
+        const source = expr.source ?? "param";
+        if (source === "param" && !context.routeParams.has(expr.name)) {
+          errors.push(createUndefinedRouteParamError(expr.name, path));
+        }
+      }
+      break;
+    }
+    case "import": {
+      if (!hasImports) {
+        errors.push(createImportsNotDefinedError(path));
+      } else if (!context.importNames.has(expr.name)) {
+        errors.push(createUndefinedImportError(expr.name, path));
+      }
+      break;
+    }
+    case "data": {
+      if (!hasData) {
+        errors.push(createDataNotDefinedError(path));
+      } else if (!context.dataNames.has(expr.name)) {
+        errors.push(createUndefinedDataError(expr.name, path));
+      }
+      break;
+    }
     case "bin":
       errors.push(...validateExpression(expr.left, buildPath(path, "left"), context, scope, paramScope));
       errors.push(...validateExpression(expr.right, buildPath(path, "right"), context, scope, paramScope));
@@ -174,6 +240,88 @@ function validateActionStep(step, path, context) {
         }
       }
       break;
+    case "storage": {
+      const storageStep = step;
+      if (!STORAGE_OPERATIONS.includes(storageStep.operation)) {
+        errors.push(createInvalidStorageOperationError(storageStep.operation, path));
+      }
+      if (!STORAGE_TYPES.includes(storageStep.storage)) {
+        errors.push(createInvalidStorageTypeError(storageStep.storage, path));
+      }
+      errors.push(
+        ...validateExpressionStateOnly(storageStep.key, buildPath(path, "key"), context)
+      );
+      if (storageStep.operation === "set" && !storageStep.value) {
+        errors.push(createStorageSetMissingValueError(path));
+      }
+      if (storageStep.value) {
+        errors.push(
+          ...validateExpressionStateOnly(storageStep.value, buildPath(path, "value"), context)
+        );
+      }
+      if (storageStep.onSuccess) {
+        for (let i = 0; i < storageStep.onSuccess.length; i++) {
+          const successStep = storageStep.onSuccess[i];
+          if (successStep === void 0) continue;
+          errors.push(
+            ...validateActionStep(successStep, buildPath(path, "onSuccess", i), context)
+          );
+        }
+      }
+      if (storageStep.onError) {
+        for (let i = 0; i < storageStep.onError.length; i++) {
+          const errorStep = storageStep.onError[i];
+          if (errorStep === void 0) continue;
+          errors.push(
+            ...validateActionStep(errorStep, buildPath(path, "onError", i), context)
+          );
+        }
+      }
+      break;
+    }
+    case "clipboard": {
+      const clipboardStep = step;
+      if (!CLIPBOARD_OPERATIONS.includes(clipboardStep.operation)) {
+        errors.push(createInvalidClipboardOperationError(clipboardStep.operation, path));
+      }
+      if (clipboardStep.operation === "write" && !clipboardStep.value) {
+        errors.push(createClipboardWriteMissingValueError(path));
+      }
+      if (clipboardStep.value) {
+        errors.push(
+          ...validateExpressionStateOnly(clipboardStep.value, buildPath(path, "value"), context)
+        );
+      }
+      if (clipboardStep.onSuccess) {
+        for (let i = 0; i < clipboardStep.onSuccess.length; i++) {
+          const successStep = clipboardStep.onSuccess[i];
+          if (successStep === void 0) continue;
+          errors.push(
+            ...validateActionStep(successStep, buildPath(path, "onSuccess", i), context)
+          );
+        }
+      }
+      if (clipboardStep.onError) {
+        for (let i = 0; i < clipboardStep.onError.length; i++) {
+          const errorStep = clipboardStep.onError[i];
+          if (errorStep === void 0) continue;
+          errors.push(
+            ...validateActionStep(errorStep, buildPath(path, "onError", i), context)
+          );
+        }
+      }
+      break;
+    }
+    case "navigate": {
+      const navigateStep = step;
+      errors.push(
+        ...validateExpressionStateOnly(navigateStep.url, buildPath(path, "url"), context)
+      );
+      if (navigateStep.target !== void 0 && !NAVIGATE_TARGETS.includes(navigateStep.target)) {
+        errors.push(createInvalidNavigateTargetError(navigateStep.target, path));
+      }
+      break;
+    }
   }
   return errors;
 }
@@ -187,6 +335,33 @@ function validateExpressionStateOnly(expr, path, context) {
       break;
     case "var":
       break;
+    case "route": {
+      if (!hasRoute) {
+        errors.push(createRouteNotDefinedError(path));
+      } else {
+        const source = expr.source ?? "param";
+        if (source === "param" && !context.routeParams.has(expr.name)) {
+          errors.push(createUndefinedRouteParamError(expr.name, path));
+        }
+      }
+      break;
+    }
+    case "import": {
+      if (!hasImports) {
+        errors.push(createImportsNotDefinedError(path));
+      } else if (!context.importNames.has(expr.name)) {
+        errors.push(createUndefinedImportError(expr.name, path));
+      }
+      break;
+    }
+    case "data": {
+      if (!hasData) {
+        errors.push(createDataNotDefinedError(path));
+      } else if (!context.dataNames.has(expr.name)) {
+        errors.push(createUndefinedDataError(expr.name, path));
+      }
+      break;
+    }
     case "bin":
       errors.push(...validateExpressionStateOnly(expr.left, buildPath(path, "left"), context));
       errors.push(...validateExpressionStateOnly(expr.right, buildPath(path, "right"), context));
@@ -219,6 +394,33 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
       break;
     case "var":
       break;
+    case "route": {
+      if (!hasRoute) {
+        errors.push(createRouteNotDefinedError(path));
+      } else {
+        const source = expr.source ?? "param";
+        if (source === "param" && !context.routeParams.has(expr.name)) {
+          errors.push(createUndefinedRouteParamError(expr.name, path));
+        }
+      }
+      break;
+    }
+    case "import": {
+      if (!hasImports) {
+        errors.push(createImportsNotDefinedError(path));
+      } else if (!context.importNames.has(expr.name)) {
+        errors.push(createUndefinedImportError(expr.name, path));
+      }
+      break;
+    }
+    case "data": {
+      if (!hasData) {
+        errors.push(createDataNotDefinedError(path));
+      } else if (!context.dataNames.has(expr.name)) {
+        errors.push(createUndefinedDataError(expr.name, path));
+      }
+      break;
+    }
     case "bin":
       errors.push(
         ...validateExpressionInEventPayload(expr.left, buildPath(path, "left"), context, scope)
@@ -260,7 +462,7 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
 }
 function validateViewNode(node, path, context, scope, options = { insideComponent: false }) {
   const errors = [];
-  const { insideComponent, paramScope } = options;
+  const { insideComponent, insideLayout, paramScope } = options;
   switch (node.kind) {
     case "element":
       if (node.props) {
@@ -343,9 +545,9 @@ function validateViewNode(node, path, context, scope, options = { insideComponen
       break;
     }
     case "slot":
-      if (!insideComponent) {
+      if (!insideComponent && !insideLayout) {
         errors.push(
-          createSchemaError(`Slot can only be used inside component definitions`, path)
+          createSchemaError(`Slot can only be used inside component definitions or layouts`, path)
         );
       }
       break;
@@ -372,6 +574,26 @@ function validateComponentProps(node, componentDef, path, context, scope, paramS
   return errors;
 }
 var ast;
+var hasRoute;
+var hasImports;
+var hasData;
+function validateRouteDefinition(route, context) {
+  const errors = [];
+  const emptyScope = /* @__PURE__ */ new Set();
+  if (route.title) {
+    errors.push(
+      ...validateExpression(route.title, "/route/title", context, emptyScope)
+    );
+  }
+  if (route.meta) {
+    for (const [key, value] of Object.entries(route.meta)) {
+      errors.push(
+        ...validateExpression(value, `/route/meta/${key}`, context, emptyScope)
+      );
+    }
+  }
+  return errors;
+}
 function collectComponentCalls(node) {
   const calls = /* @__PURE__ */ new Set();
   switch (node.kind) {
@@ -472,6 +694,18 @@ function validateComponents(programAst, context) {
   }
   return errors;
 }
+function validateLifecycleHooks(lifecycle, context) {
+  const errors = [];
+  if (!lifecycle) return errors;
+  const hooks = ["onMount", "onUnmount", "onRouteEnter", "onRouteLeave"];
+  for (const hook of hooks) {
+    const actionName = lifecycle[hook];
+    if (actionName && !context.actionNames.has(actionName)) {
+      errors.push(createUndefinedActionError(actionName, `/lifecycle/${hook}`));
+    }
+  }
+  return errors;
+}
 function validateActions(programAst, context) {
   const errors = [];
   for (let i = 0; i < programAst.actions.length; i++) {
@@ -487,17 +721,81 @@ function validateActions(programAst, context) {
   }
   return errors;
 }
+function validateDataSources(programAst, context) {
+  const errors = [];
+  if (!programAst.data) return errors;
+  for (const [name, source] of Object.entries(programAst.data)) {
+    const path = `/data/${name}`;
+    if (!DATA_SOURCE_TYPES.includes(source.type)) {
+      errors.push(createInvalidDataSourceError(name, `invalid type '${source.type}'`, path));
+      continue;
+    }
+    if (source.transform !== void 0) {
+      if (!DATA_TRANSFORMS.includes(source.transform)) {
+        errors.push(createInvalidDataSourceError(name, `invalid transform '${source.transform}'`, path));
+      }
+    }
+    switch (source.type) {
+      case "glob":
+        if (typeof source.pattern !== "string") {
+          errors.push(createInvalidDataSourceError(name, `glob type requires 'pattern' field`, path));
+        }
+        break;
+      case "file":
+        if (typeof source.path !== "string") {
+          errors.push(createInvalidDataSourceError(name, `file type requires 'path' field`, path));
+        }
+        break;
+      case "api":
+        if (typeof source.url !== "string") {
+          errors.push(createInvalidDataSourceError(name, `api type requires 'url' field`, path));
+        }
+        break;
+    }
+  }
+  return errors;
+}
+function validateGetStaticPaths(programAst, context) {
+  const errors = [];
+  const getStaticPaths = programAst.route?.getStaticPaths;
+  if (!getStaticPaths) return errors;
+  const path = "/route/getStaticPaths";
+  if (!programAst.data) {
+    errors.push(createDataNotDefinedError(path));
+    return errors;
+  }
+  if (!context.dataNames.has(getStaticPaths.source)) {
+    errors.push(createUndefinedDataSourceError(getStaticPaths.source, path));
+  }
+  for (const [paramName, paramExpr] of Object.entries(getStaticPaths.params)) {
+    errors.push(
+      ...validateExpressionStateOnly(paramExpr, `${path}/params/${paramName}`, context)
+    );
+  }
+  return errors;
+}
 function analyzePass(programAst) {
   ast = programAst;
+  hasRoute = !!programAst.route;
+  hasImports = !!programAst.imports;
+  hasData = !!programAst.data;
+  const isLayout = programAst.type === "layout";
   const context = collectContext(programAst);
   const errors = [];
   errors.push(...checkDuplicateActions(programAst));
+  errors.push(...validateDataSources(programAst, context));
+  errors.push(...validateGetStaticPaths(programAst, context));
   errors.push(...validateActions(programAst, context));
+  errors.push(...validateLifecycleHooks(programAst.lifecycle, context));
   errors.push(...detectComponentCycles(programAst, context));
   errors.push(...validateComponents(programAst, context));
+  if (programAst.route) {
+    errors.push(...validateRouteDefinition(programAst.route, context));
+  }
   errors.push(
     ...validateViewNode(programAst.view, "/view", context, /* @__PURE__ */ new Set(), {
-      insideComponent: false
+      insideComponent: false,
+      insideLayout: isLayout
     })
   );
   if (errors.length > 0) {
@@ -588,6 +886,32 @@ function transformExpression(expr, ctx) {
         base: transformExpression(expr.base, ctx),
         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;
+    }
   }
 }
 function transformEventHandler(handler, ctx) {
@@ -648,6 +972,62 @@ function transformActionStep(step) {
       }
       return fetchStep;
     }
+    case "storage": {
+      const storageStep = step;
+      const compiledStorageStep = {
+        do: "storage",
+        operation: storageStep.operation,
+        key: transformExpression(storageStep.key, emptyContext),
+        storage: storageStep.storage
+      };
+      if (storageStep.value) {
+        compiledStorageStep.value = transformExpression(storageStep.value, emptyContext);
+      }
+      if (storageStep.result) {
+        compiledStorageStep.result = storageStep.result;
+      }
+      if (storageStep.onSuccess) {
+        compiledStorageStep.onSuccess = storageStep.onSuccess.map(transformActionStep);
+      }
+      if (storageStep.onError) {
+        compiledStorageStep.onError = storageStep.onError.map(transformActionStep);
+      }
+      return compiledStorageStep;
+    }
+    case "clipboard": {
+      const clipboardStep = step;
+      const compiledClipboardStep = {
+        do: "clipboard",
+        operation: clipboardStep.operation
+      };
+      if (clipboardStep.value) {
+        compiledClipboardStep.value = transformExpression(clipboardStep.value, emptyContext);
+      }
+      if (clipboardStep.result) {
+        compiledClipboardStep.result = clipboardStep.result;
+      }
+      if (clipboardStep.onSuccess) {
+        compiledClipboardStep.onSuccess = clipboardStep.onSuccess.map(transformActionStep);
+      }
+      if (clipboardStep.onError) {
+        compiledClipboardStep.onError = clipboardStep.onError.map(transformActionStep);
+      }
+      return compiledClipboardStep;
+    }
+    case "navigate": {
+      const navigateStep = step;
+      const compiledNavigateStep = {
+        do: "navigate",
+        url: transformExpression(navigateStep.url, emptyContext)
+      };
+      if (navigateStep.target) {
+        compiledNavigateStep.target = navigateStep.target;
+      }
+      if (navigateStep.replace !== void 0) {
+        compiledNavigateStep.replace = navigateStep.replace;
+      }
+      return compiledNavigateStep;
+    }
   }
 }
 function flattenSlotChildren(children, ctx) {
@@ -790,16 +1170,75 @@ function transformActions(actions) {
   }
   return compiledActions;
 }
-function transformPass(ast2, _context) {
+function extractRouteParams2(path) {
+  const params = [];
+  const segments = path.split("/");
+  for (const segment of segments) {
+    if (segment.startsWith(":")) {
+      params.push(segment.slice(1));
+    }
+  }
+  return params;
+}
+function transformRouteDefinition(route, ctx) {
+  const compiled = {
+    path: route.path,
+    params: extractRouteParams2(route.path)
+  };
+  if (route.title) {
+    compiled.title = transformExpression(route.title, ctx);
+  }
+  if (route.layout) {
+    compiled.layout = route.layout;
+  }
+  if (route.meta) {
+    compiled.meta = {};
+    for (const [key, value] of Object.entries(route.meta)) {
+      compiled.meta[key] = transformExpression(value, ctx);
+    }
+  }
+  return compiled;
+}
+function transformLifecycleHooks(lifecycle) {
+  if (!lifecycle) return void 0;
+  const hasAnyHook = lifecycle.onMount || lifecycle.onUnmount || lifecycle.onRouteEnter || lifecycle.onRouteLeave;
+  if (!hasAnyHook) return void 0;
+  const result = {};
+  if (lifecycle.onMount) {
+    result.onMount = lifecycle.onMount;
+  }
+  if (lifecycle.onUnmount) {
+    result.onUnmount = lifecycle.onUnmount;
+  }
+  if (lifecycle.onRouteEnter) {
+    result.onRouteEnter = lifecycle.onRouteEnter;
+  }
+  if (lifecycle.onRouteLeave) {
+    result.onRouteLeave = lifecycle.onRouteLeave;
+  }
+  return result;
+}
+function transformPass(ast2, _context, importData) {
   const ctx = {
     components: ast2.components || {}
   };
-  return {
+  const result = {
     version: "1.0",
     state: transformState(ast2.state),
     actions: transformActions(ast2.actions),
     view: transformViewNode(ast2.view, ctx)
   };
+  if (ast2.route) {
+    result.route = transformRouteDefinition(ast2.route, ctx);
+  }
+  const lifecycle = transformLifecycleHooks(ast2.lifecycle);
+  if (lifecycle) {
+    result.lifecycle = lifecycle;
+  }
+  if (importData && Object.keys(importData).length > 0) {
+    result.importData = importData;
+  }
+  return result;
 }
 
 // src/compile.ts
@@ -827,10 +1266,452 @@ function compile(input) {
 
 // src/index.ts
 import { createUndefinedVarError as createUndefinedVarError2 } from "@constela/core";
+
+// src/passes/analyze-layout.ts
+import {
+  createLayoutMissingSlotError,
+  createDuplicateSlotNameError,
+  createDuplicateDefaultSlotError,
+  createSlotInLoopError,
+  createUndefinedStateError as createUndefinedStateError2,
+  createUndefinedActionError as createUndefinedActionError2,
+  isEventHandler as isEventHandler3
+} from "@constela/core";
+function buildPath2(base, ...segments) {
+  return segments.reduce((p, s) => `${p}/${s}`, base);
+}
+function collectContext2(layout) {
+  const stateNames = new Set(layout.state ? Object.keys(layout.state) : []);
+  const actionNames = new Set(layout.actions ? layout.actions.map((a) => a.name) : []);
+  const componentNames = new Set(
+    layout.components ? Object.keys(layout.components) : []
+  );
+  return { stateNames, actionNames, componentNames, routeParams: /* @__PURE__ */ new Set(), importNames: /* @__PURE__ */ new Set() };
+}
+function findSlotNodes(node, path, slots, inLoop = false) {
+  if (node.kind === "slot") {
+    slots.push({
+      name: node.name,
+      path,
+      inLoop
+    });
+    return;
+  }
+  if (node.kind === "element" && node.children) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child) {
+        findSlotNodes(child, buildPath2(path, "children", i), slots, inLoop);
+      }
+    }
+  }
+  if (node.kind === "if") {
+    findSlotNodes(node.then, buildPath2(path, "then"), slots, inLoop);
+    if (node.else) {
+      findSlotNodes(node.else, buildPath2(path, "else"), slots, inLoop);
+    }
+  }
+  if (node.kind === "each") {
+    findSlotNodes(node.body, buildPath2(path, "body"), slots, true);
+  }
+  if (node.kind === "component" && node.children) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child) {
+        findSlotNodes(child, buildPath2(path, "children", i), slots, inLoop);
+      }
+    }
+  }
+}
+function validateSlots(layout) {
+  const errors = [];
+  const slots = [];
+  const slotNames = /* @__PURE__ */ new Set();
+  let hasDefaultSlot = false;
+  findSlotNodes(layout.view, "/view", slots);
+  if (slots.length === 0) {
+    errors.push(createLayoutMissingSlotError("/view"));
+    return { errors, slotNames, hasDefaultSlot };
+  }
+  const seenNames = /* @__PURE__ */ new Map();
+  let defaultSlotPath;
+  for (const slot of slots) {
+    if (slot.inLoop) {
+      errors.push(createSlotInLoopError(slot.path));
+      continue;
+    }
+    if (slot.name === void 0 || slot.name === "") {
+      if (defaultSlotPath !== void 0) {
+        errors.push(createDuplicateDefaultSlotError(slot.path));
+      } else {
+        defaultSlotPath = slot.path;
+        hasDefaultSlot = true;
+      }
+    } else {
+      const existingPath = seenNames.get(slot.name);
+      if (existingPath !== void 0) {
+        errors.push(createDuplicateSlotNameError(slot.name, slot.path));
+      } else {
+        seenNames.set(slot.name, slot.path);
+        slotNames.add(slot.name);
+      }
+    }
+  }
+  return { errors, slotNames, hasDefaultSlot };
+}
+function validateExpression2(expr, path, stateNames) {
+  const errors = [];
+  switch (expr.expr) {
+    case "state":
+      if (!stateNames.has(expr.name)) {
+        errors.push(createUndefinedStateError2(expr.name, path));
+      }
+      break;
+    case "bin":
+      errors.push(...validateExpression2(expr.left, buildPath2(path, "left"), stateNames));
+      errors.push(...validateExpression2(expr.right, buildPath2(path, "right"), stateNames));
+      break;
+    case "not":
+      errors.push(...validateExpression2(expr.operand, buildPath2(path, "operand"), stateNames));
+      break;
+    case "cond":
+      errors.push(...validateExpression2(expr.if, buildPath2(path, "if"), stateNames));
+      errors.push(...validateExpression2(expr.then, buildPath2(path, "then"), stateNames));
+      errors.push(...validateExpression2(expr.else, buildPath2(path, "else"), stateNames));
+      break;
+    case "get":
+      errors.push(...validateExpression2(expr.base, buildPath2(path, "base"), stateNames));
+      break;
+    case "lit":
+    case "var":
+    case "param":
+    case "route":
+    case "import":
+      break;
+  }
+  return errors;
+}
+function validateViewNode2(node, path, stateNames, actionNames) {
+  const errors = [];
+  switch (node.kind) {
+    case "element":
+      if (node.props) {
+        for (const [propName, propValue] of Object.entries(node.props)) {
+          const propPath = buildPath2(path, "props", propName);
+          if (isEventHandler3(propValue)) {
+            if (!actionNames.has(propValue.action)) {
+              errors.push(createUndefinedActionError2(propValue.action, propPath));
+            }
+            if (propValue.payload) {
+              errors.push(
+                ...validateExpression2(propValue.payload, buildPath2(propPath, "payload"), stateNames)
+              );
+            }
+          } else {
+            errors.push(...validateExpression2(propValue, propPath, stateNames));
+          }
+        }
+      }
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child) {
+            errors.push(
+              ...validateViewNode2(child, buildPath2(path, "children", i), stateNames, actionNames)
+            );
+          }
+        }
+      }
+      break;
+    case "text":
+      errors.push(...validateExpression2(node.value, buildPath2(path, "value"), stateNames));
+      break;
+    case "if":
+      errors.push(
+        ...validateExpression2(node.condition, buildPath2(path, "condition"), stateNames)
+      );
+      errors.push(...validateViewNode2(node.then, buildPath2(path, "then"), stateNames, actionNames));
+      if (node.else) {
+        errors.push(...validateViewNode2(node.else, buildPath2(path, "else"), stateNames, actionNames));
+      }
+      break;
+    case "each":
+      errors.push(...validateExpression2(node.items, buildPath2(path, "items"), stateNames));
+      errors.push(...validateViewNode2(node.body, buildPath2(path, "body"), stateNames, actionNames));
+      break;
+    case "slot":
+      break;
+  }
+  return errors;
+}
+function analyzeLayoutPass(layout) {
+  const baseContext = collectContext2(layout);
+  const errors = [];
+  const { errors: slotErrors, slotNames, hasDefaultSlot } = validateSlots(layout);
+  errors.push(...slotErrors);
+  if (slotErrors.length > 0) {
+    return {
+      ok: false,
+      errors
+    };
+  }
+  errors.push(
+    ...validateViewNode2(
+      layout.view,
+      "/view",
+      baseContext.stateNames,
+      baseContext.actionNames
+    )
+  );
+  if (errors.length > 0) {
+    return {
+      ok: false,
+      errors
+    };
+  }
+  return {
+    ok: true,
+    context: {
+      ...baseContext,
+      slotNames,
+      hasDefaultSlot
+    }
+  };
+}
+
+// src/passes/transform-layout.ts
+function transformState2(state) {
+  if (!state) return {};
+  const result = {};
+  for (const [name, field] of Object.entries(state)) {
+    result[name] = {
+      type: field.type,
+      initial: field.initial
+    };
+  }
+  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
+        };
+      }
+      if (step.do === "update") {
+        return {
+          do: "update",
+          target: step.target,
+          operation: step.operation
+        };
+      }
+      return {
+        do: "fetch",
+        url: { expr: "lit", value: "" }
+      };
+    })
+  }));
+}
+function transformViewNode2(node, ctx) {
+  switch (node.kind) {
+    case "element": {
+      const result = {
+        kind: "element",
+        tag: node.tag
+      };
+      if (node.props) {
+        result.props = {};
+        for (const [key, value] of Object.entries(node.props)) {
+          if ("event" in value) {
+            result.props[key] = {
+              event: value.event,
+              action: value.action
+            };
+          } else {
+            result.props[key] = value;
+          }
+        }
+      }
+      if (node.children && node.children.length > 0) {
+        result.children = node.children.map(
+          (child) => transformViewNode2(child, ctx)
+        );
+      }
+      return result;
+    }
+    case "text":
+      return {
+        kind: "text",
+        value: node.value
+      };
+    case "if": {
+      const result = {
+        kind: "if",
+        condition: node.condition,
+        then: transformViewNode2(node.then, ctx)
+      };
+      if (node.else) {
+        result.else = transformViewNode2(node.else, ctx);
+      }
+      return result;
+    }
+    case "each":
+      return {
+        kind: "each",
+        items: node.items,
+        as: node.as,
+        body: transformViewNode2(node.body, ctx)
+      };
+    case "slot":
+      return {
+        kind: "slot",
+        name: node.name
+      };
+    case "component": {
+      const def = ctx.components[node.name];
+      if (def) {
+        return transformViewNode2(def.view, ctx);
+      }
+      return { kind: "element", tag: "div" };
+    }
+    case "markdown":
+      return {
+        kind: "markdown",
+        content: node.content
+      };
+    case "code":
+      return {
+        kind: "code",
+        language: node.language,
+        content: node.content
+      };
+  }
+}
+function transformLayoutPass(layout, _context) {
+  const ctx = {
+    components: layout.components || {}
+  };
+  return {
+    version: "1.0",
+    type: "layout",
+    state: transformState2(layout.state),
+    actions: transformActions2(layout.actions),
+    view: transformViewNode2(layout.view, ctx),
+    components: layout.components
+  };
+}
+function deepCloneNode(node) {
+  return JSON.parse(JSON.stringify(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);
+  }
+  if (node.kind === "element") {
+    const children = node.children;
+    if (children && children.length > 0) {
+      const newChildren = children.map((child) => replaceSlots(child, defaultContent, namedContent));
+      return {
+        ...node,
+        children: newChildren
+      };
+    }
+    return node;
+  }
+  if (node.kind === "if") {
+    const ifNode = node;
+    const result = {
+      ...node,
+      then: replaceSlots(ifNode.then, defaultContent, namedContent)
+    };
+    if (ifNode.else) {
+      result.else = replaceSlots(ifNode.else, defaultContent, namedContent);
+    }
+    return result;
+  }
+  if (node.kind === "each") {
+    const eachNode = node;
+    return {
+      ...node,
+      body: replaceSlots(eachNode.body, 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;
+  const composedView = replaceSlots(layoutView, page.view, namedContent);
+  const mergedState = {};
+  for (const [name, field] of Object.entries(page.state)) {
+    mergedState[name] = field;
+  }
+  for (const [name, field] of Object.entries(layout.state)) {
+    if (name in mergedState) {
+      mergedState[`$layout.${name}`] = field;
+    } else {
+      mergedState[name] = field;
+    }
+  }
+  const getActionsArray = (actions) => {
+    if (Array.isArray(actions)) return actions;
+    if (typeof actions === "object" && actions !== null) {
+      return Object.values(actions);
+    }
+    return [];
+  };
+  const pageActions = getActionsArray(page.actions);
+  const layoutActions = getActionsArray(layout.actions);
+  const pageActionNames = new Set(pageActions.map((a) => a.name));
+  const mergedActions = {};
+  for (const action of pageActions) {
+    mergedActions[action.name] = action;
+  }
+  for (const action of layoutActions) {
+    if (pageActionNames.has(action.name)) {
+      const prefixedName = `$layout.${action.name}`;
+      mergedActions[prefixedName] = { ...action, name: prefixedName };
+    } else {
+      mergedActions[action.name] = action;
+    }
+  }
+  const mergedComponents = {
+    ...layout.components || {},
+    ...page.components || {}
+  };
+  const result = {
+    version: "1.0",
+    state: mergedState,
+    actions: mergedActions,
+    view: composedView
+  };
+  if (page.route) {
+    result.route = page.route;
+  }
+  if (Object.keys(mergedComponents).length > 0) {
+    result.components = mergedComponents;
+  }
+  return result;
+}
 export {
+  analyzeLayoutPass,
   analyzePass,
   compile,
+  composeLayoutWithPage,
   createUndefinedVarError2 as createUndefinedVarError,
+  transformLayoutPass,
   transformPass,
   validatePass
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.4.0",
+  "version": "0.5.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.4.0"
+    "@constela/core": "0.5.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",