@kithinji/pod 1.0.24 → 1.0.26

package/dist/main.js

@@ -11,7 +11,8 @@ import { Command } from "commander";
 // src/dev/server.ts
 import * as esbuild2 from "esbuild";
 import { spawn } from "child_process";
-import * as fs5 from "fs/promises";
+import * as fs6 from "fs/promises";
+import { WebSocketServer, WebSocket } from "ws";
 
 // src/config/config.ts
 import * as path from "path";
@@ -926,72 +927,32 @@ async function expandMacros(source, filePath, projectRoot = process.cwd()) {
 
 // src/plugins/generators/generate_controller.ts
 import * as path4 from "path";
-import { parseSync } from "@swc/core";
-function generateController(filePath, code) {
-  try {
-    const ast = parseSync(code, {
-      syntax: "typescript",
-      tsx: filePath.endsWith("x") || filePath.endsWith(".tsx"),
-      decorators: true
-    });
-    const serviceInfo = extractServiceInfo(ast, filePath);
-    if (!serviceInfo || !serviceInfo.hasInjectable) {
-      return null;
-    }
-    validateServiceInfo(serviceInfo, filePath);
-    return generateControllerCode(serviceInfo, filePath);
-  } catch (error) {
-    if (error.type) {
-      throw error;
-    }
-    throw {
-      type: "parse",
-      message: `Failed to parse TypeScript file: ${error.message}`,
-      filePath,
-      details: error
-    };
-  }
-}
-function extractServiceInfo(ast, filePath) {
-  let serviceClass = null;
-  let hasInjectable = false;
-  const importMap = {};
-  try {
-    for (const item of ast.body) {
-      if (item.type === "ImportDeclaration") {
-        const decl = item;
-        const source = decl.source.value;
-        decl.specifiers.forEach((spec) => {
-          if (spec.type === "ImportSpecifier" || spec.type === "ImportDefaultSpecifier" || spec.type === "ImportNamespaceSpecifier") {
-            importMap[spec.local.value] = source;
-          }
-        });
-      }
-      if (item.type === "ExportDeclaration" && item.declaration?.type === "ClassDeclaration") {
-        const classDecl = item.declaration;
-        if (hasInjectableDecorator(classDecl.decorators)) {
-          serviceClass = classDecl;
-          hasInjectable = true;
-        }
-      }
-    }
-    if (!serviceClass?.identifier) {
-      return null;
-    }
-    return {
-      className: serviceClass.identifier.value,
-      methods: extractMethods(serviceClass, filePath),
-      hasInjectable,
-      importMap
-    };
-  } catch (error) {
-    throw {
-      type: "parse",
-      message: `Failed to extract service info: ${error.message}`,
-      filePath,
-      details: error
-    };
+
+// src/plugins/generators/utils.ts
+import {
+  parseSync
+} from "@swc/core";
+var RETURN_TYPE_CONFIGS = [
+  {
+    typeName: "Observable",
+    isStreamable: true,
+    streamType: "Observable" /* Observable */,
+    decoratorName: "Sse",
+    isSubjectLike: false
+  },
+  {
+    typeName: "Promise",
+    isStreamable: false,
+    decoratorName: "Post",
+    isSubjectLike: false
   }
+];
+function parseTypeScript(filePath, code) {
+  return parseSync(code, {
+    syntax: "typescript",
+    tsx: filePath.endsWith("x") || filePath.endsWith(".tsx"),
+    decorators: true
+  });
 }
 function hasInjectableDecorator(decorators) {
   if (!decorators) return false;
@@ -1000,39 +961,6 @@ function hasInjectableDecorator(decorators) {
     return expr.type === "Identifier" && expr.value === "Injectable" || expr.type === "CallExpression" && expr.callee.type === "Identifier" && expr.callee.value === "Injectable";
   });
 }
-function extractMethods(classDecl, filePath) {
-  const methods = [];
-  const className = classDecl.identifier?.value || "UnknownClass";
-  for (const member of classDecl.body) {
-    if (!isPublicMethod(member)) continue;
-    const method = member;
-    const methodName = getMethodName(method);
-    if (!methodName) continue;
-    const returnTypeInfo = analyzeReturnType(method);
-    if (!returnTypeInfo.isObservable && !method.function.async) {
-      throw {
-        type: "validation",
-        message: `Method ${className}.${methodName} must be async or return an Observable`,
-        filePath,
-        details: { className, methodName }
-      };
-    }
-    const { paramSchemas, returnSchema } = extractSignature(
-      method.function.decorators,
-      method.function.params.length
-    );
-    methods.push({
-      name: methodName,
-      params: extractMethodParams(method.function.params),
-      returnType: returnTypeInfo.type,
-      isAsync: method.function.async,
-      isObservable: returnTypeInfo.isObservable,
-      paramSchemas,
-      returnSchema
-    });
-  }
-  return methods;
-}
 function isPublicMethod(member) {
   return member.type === "ClassMethod" && (member.accessibility === "public" || !member.accessibility);
 }
@@ -1042,30 +970,107 @@ function getMethodName(method) {
   }
   return null;
 }
+function extractImportMap(ast) {
+  const importMap = {};
+  for (const item of ast.body) {
+    if (item.type === "ImportDeclaration") {
+      const decl = item;
+      const source = decl.source.value;
+      decl.specifiers.forEach((spec) => {
+        if (spec.type === "ImportSpecifier" || spec.type === "ImportDefaultSpecifier" || spec.type === "ImportNamespaceSpecifier") {
+          importMap[spec.local.value] = source;
+        }
+      });
+    }
+  }
+  return importMap;
+}
+function findInjectableClass(ast) {
+  for (const item of ast.body) {
+    if (item.type === "ExportDeclaration" && item.declaration?.type === "ClassDeclaration") {
+      const classDecl = item.declaration;
+      if (hasInjectableDecorator(classDecl.decorators)) {
+        return classDecl;
+      }
+    }
+  }
+  return null;
+}
 function analyzeReturnType(method) {
   const returnType = method.function.returnType?.typeAnnotation;
   if (!returnType) {
-    return { type: "any", isObservable: false };
-  }
-  if (returnType.type === "TsTypeReference" && returnType.typeName.type === "Identifier" && returnType.typeName.value === "Observable") {
-    const innerType = returnType.typeParams?.params[0];
     return {
-      type: innerType ? stringifyType(innerType) : "any",
-      isObservable: true
+      type: "any",
+      isStreamable: false,
+      isSubjectLike: false
     };
   }
-  if (returnType.type === "TsTypeReference" && returnType.typeName.type === "Identifier" && returnType.typeName.value === "Promise") {
-    const innerType = returnType.typeParams?.params[0];
-    return {
-      type: innerType ? stringifyType(innerType) : "any",
-      isObservable: false
-    };
+  if (returnType.type === "TsTypeReference" && returnType.typeName.type === "Identifier") {
+    const typeName = returnType.typeName.value;
+    const config = RETURN_TYPE_CONFIGS.find((c) => c.typeName === typeName);
+    if (config) {
+      const innerType = returnType.typeParams?.params[0];
+      return {
+        type: innerType ? stringifyType(innerType) : "any",
+        isStreamable: config.isStreamable,
+        streamType: config.streamType,
+        isSubjectLike: config.isSubjectLike
+      };
+    }
   }
   return {
     type: stringifyType(returnType),
-    isObservable: false
+    isStreamable: false,
+    isSubjectLike: false
   };
 }
+function stringifyType(node) {
+  if (!node) return "any";
+  switch (node.type) {
+    case "TsKeywordType":
+      return node.kind;
+    case "TsTypeReference":
+      if (node.typeName.type !== "Identifier") return "any";
+      const base = node.typeName.value;
+      const args = node.typeParams?.params ? `<${node.typeParams.params.map(stringifyType).join(", ")}>` : "";
+      return base + args;
+    case "TsArrayType":
+      return `${stringifyType(node.elemType)}[]`;
+    case "TsUnionType":
+      return node.types.map(stringifyType).join(" | ");
+    case "TsIntersectionType":
+      return node.types.map(stringifyType).join(" & ");
+    case "TsTypeLiteral":
+      const props = node.members.map((member) => {
+        if (member.type === "TsPropertySignature") {
+          const key = member.key.type === "Identifier" ? member.key.value : "";
+          const type = member.typeAnnotation ? stringifyType(member.typeAnnotation.typeAnnotation) : "any";
+          return `${key}: ${type}`;
+        }
+        return "";
+      }).filter(Boolean);
+      return `{ ${props.join("; ")} }`;
+    default:
+      return "any";
+  }
+}
+function extractMethodParams(params) {
+  return params.map((p) => {
+    const pat = p.pat;
+    if (pat.type !== "Identifier") {
+      return {
+        name: "param",
+        type: "any",
+        decorators: []
+      };
+    }
+    return {
+      name: pat.value,
+      type: pat.typeAnnotation ? stringifyType(pat.typeAnnotation.typeAnnotation) : "any",
+      decorators: []
+    };
+  });
+}
 function extractSignature(decorators, paramCount) {
   if (!decorators) return { paramSchemas: [] };
   for (const decorator of decorators) {
@@ -1103,42 +1108,50 @@ function stringifyExpression(expr) {
   }
   return "any";
 }
-function extractMethodParams(params) {
-  return params.map((p) => {
-    const pat = p.pat;
-    if (pat.type !== "Identifier") {
-      return {
-        name: "param",
-        type: "any",
-        decorators: []
+function extractMethods(classDecl, filePath, includeSignatures = true) {
+  const methods = [];
+  const className = classDecl.identifier?.value || "UnknownClass";
+  for (const member of classDecl.body) {
+    if (!isPublicMethod(member)) continue;
+    const method = member;
+    const methodName = getMethodName(method);
+    if (!methodName) continue;
+    const returnTypeInfo = analyzeReturnType(method);
+    if (!returnTypeInfo.isStreamable && !method.function.async) {
+      throw {
+        type: "validation",
+        message: `Method ${className}.${methodName} must be async or return a streamable type (${RETURN_TYPE_CONFIGS.filter(
+          (c) => c.isStreamable
+        ).map((c) => c.typeName).join(", ")})`,
+        filePath,
+        details: { className, methodName }
       };
     }
-    return {
-      name: pat.value,
-      type: pat.typeAnnotation ? stringifyType(pat.typeAnnotation.typeAnnotation) : "any",
-      decorators: []
-    };
-  });
-}
-function stringifyType(node) {
-  if (!node) return "any";
-  switch (node.type) {
-    case "TsKeywordType":
-      return node.kind;
-    case "TsTypeReference":
-      if (node.typeName.type !== "Identifier") return "any";
-      const base = node.typeName.value;
-      const args = node.typeParams?.params ? `<${node.typeParams.params.map(stringifyType).join(", ")}>` : "";
-      return base + args;
-    case "TsArrayType":
-      return `${stringifyType(node.elemType)}[]`;
-    case "TsUnionType":
-      return node.types.map(stringifyType).join(" | ");
-    case "TsIntersectionType":
-      return node.types.map(stringifyType).join(" & ");
-    default:
-      return "any";
+    const signatures = includeSignatures ? extractSignature(
+      method.function.decorators,
+      method.function.params.length
+    ) : { paramSchemas: [] };
+    methods.push({
+      name: methodName,
+      params: extractMethodParams(method.function.params),
+      returnType: returnTypeInfo.type,
+      isAsync: method.function.async,
+      isStreamable: returnTypeInfo.isStreamable,
+      streamType: returnTypeInfo.streamType,
+      paramSchemas: signatures.paramSchemas,
+      returnSchema: signatures.returnSchema
+    });
   }
+  return methods;
+}
+function serviceNameToPath(serviceName) {
+  return serviceName.replace(/Service$/, "").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function toInstanceName(className) {
+  return className.charAt(0).toLowerCase() + className.slice(1);
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }
 function validateServiceInfo(serviceInfo, filePath) {
   if (!serviceInfo.className) {
@@ -1154,13 +1167,58 @@ function validateServiceInfo(serviceInfo, filePath) {
     );
   }
   serviceInfo.methods.forEach((method) => {
-    if (method.params.length > 0 && method.paramSchemas.length === 0) {
+    if (method.params.length > 0 && method.paramSchemas?.length === 0) {
       console.warn(
         `Warning: Method ${serviceInfo.className}.${method.name} has parameters but no @Signature validation`
       );
     }
   });
 }
+function extractServiceInfo(ast, filePath, includeSignatures = true) {
+  try {
+    const serviceClass = findInjectableClass(ast);
+    const importMap = extractImportMap(ast);
+    if (!serviceClass?.identifier) {
+      return null;
+    }
+    return {
+      className: serviceClass.identifier.value,
+      methods: extractMethods(serviceClass, filePath, includeSignatures),
+      hasInjectable: true,
+      importMap
+    };
+  } catch (error) {
+    throw {
+      type: "parse",
+      message: `Failed to extract service info: ${error.message}`,
+      filePath,
+      details: error
+    };
+  }
+}
+
+// src/plugins/generators/generate_controller.ts
+function generateController(filePath, code) {
+  try {
+    const ast = parseTypeScript(filePath, code);
+    const serviceInfo = extractServiceInfo(ast, filePath, true);
+    if (!serviceInfo || !serviceInfo.hasInjectable) {
+      return null;
+    }
+    validateServiceInfo(serviceInfo, filePath);
+    return generateControllerCode(serviceInfo, filePath);
+  } catch (error) {
+    if (error.type) {
+      throw error;
+    }
+    throw {
+      type: "parse",
+      message: `Failed to parse TypeScript file: ${error.message}`,
+      filePath,
+      details: error
+    };
+  }
+}
 function generateControllerCode(serviceInfo, filePath) {
   const serviceName = serviceInfo.className;
   const controllerName = serviceName.replace(/Service$/, "GenController");
@@ -1175,7 +1233,9 @@ function generateControllerCode(serviceInfo, filePath) {
   providedIn: "root",
 })
 export class ${controllerName} {
-  constructor(private readonly ${serviceInstance}: ${serviceName}) {}
+  constructor(
+    private readonly ${serviceInstance}: ${serviceName}
+  ) {}
 
 ${methods}
 }`;
@@ -1184,12 +1244,6 @@ function getImportPath(filePath) {
   const basename3 = path4.basename(filePath);
   return `./${basename3.replace(/\.tsx?$/, "")}`;
 }
-function serviceNameToPath(serviceName) {
-  return serviceName.replace(/Service$/, "").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function toInstanceName(className) {
-  return className.charAt(0).toLowerCase() + className.slice(1);
-}
 function generateImports(serviceInfo, serviceName, serviceImportPath) {
   const importGroups = /* @__PURE__ */ new Map();
   const registerIdentifier = (id) => {
@@ -1209,21 +1263,23 @@ function generateImports(serviceInfo, serviceName, serviceImportPath) {
     });
   });
   const hasPost = serviceInfo.methods.some(
-    (m) => !m.isObservable && m.params.length > 0
+    (m) => !m.isStreamable && m.params.length > 0
   );
   const hasGet = serviceInfo.methods.some(
-    (m) => !m.isObservable && m.params.length === 0
+    (m) => !m.isStreamable && m.params.length === 0
+  );
+  const hasSse = serviceInfo.methods.some(
+    (m) => m.isStreamable && m.streamType == "Observable" /* Observable */
   );
-  const hasSse = serviceInfo.methods.some((m) => m.isObservable);
-  const hasSseWithParams = serviceInfo.methods.some(
-    (m) => m.isObservable && m.params.length > 0
+  const hasStreamableWithParams = serviceInfo.methods.some(
+    (m) => m.isStreamable && m.params.length > 0
   );
   const decorators = ["Controller"];
   if (hasPost) decorators.push("Post");
   if (hasGet) decorators.push("Get");
   if (hasPost) decorators.push("Body");
   if (hasSse) decorators.push("Sse");
-  if (hasSseWithParams) decorators.push("Query");
+  if (hasStreamableWithParams) decorators.push("Query");
   let importStrings = `import { ${decorators.join(
     ", "
   )} } from "@kithinji/orca";
@@ -1245,11 +1301,12 @@ function generateMethods(serviceInfo) {
 function generateMethod(method, serviceName) {
   const hasParams = method.params.length > 0;
   const serviceInstance = toInstanceName(serviceName);
-  if (method.isObservable) {
+  if (method.isStreamable) {
     const queryParams = hasParams ? method.params.map((p) => `@Query('${p.name}') ${p.name}: ${p.type}`).join(", ") : "";
     const body2 = generateMethodBody(method, serviceInstance, false);
+    const returnTypeName = method.streamType || "Observable";
     return `  @Sse("${method.name}")
-  ${method.name}(${queryParams}): Observable<${method.returnType}> {
+  ${method.name}(${queryParams}): ${returnTypeName}<${method.returnType}> {
 ${body2}
   }`;
   }
@@ -1264,14 +1321,14 @@ ${body}
 function generateMethodBody(method, serviceInstance, isAsync) {
   const lines = [];
   const hasParams = method.params.length > 0;
-  if (hasParams && method.isObservable && method.paramSchemas.length > 0) {
+  if (hasParams && method.isStreamable && method.paramSchemas.length > 0) {
     method.params.forEach((p, i) => {
       lines.push(
         `    const validated${capitalize(p.name)} = ${method.paramSchemas[i]}.parse(${p.name});`
       );
     });
   }
-  if (hasParams && !method.isObservable) {
+  if (hasParams && !method.isStreamable) {
     if (method.paramSchemas.length > 0) {
       lines.push(
         `    const b = typeof body === 'object' && body !== null ? body : {};`
@@ -1287,7 +1344,7 @@ function generateMethodBody(method, serviceInstance, isAsync) {
     }
   }
   let callArgs;
-  if (hasParams && method.isObservable && method.paramSchemas.length > 0) {
+  if (hasParams && method.isStreamable && method.paramSchemas.length > 0) {
     callArgs = method.params.map((p) => `validated${capitalize(p.name)}`).join(", ");
   } else {
     callArgs = method.params.map((p) => p.name).join(", ");
@@ -1303,9 +1360,6 @@ function generateMethodBody(method, serviceInstance, isAsync) {
   }
   return lines.join("\n");
 }
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
 
 // src/plugins/generators/tsx_server_stub.ts
 import * as path5 from "path";
@@ -1551,7 +1605,7 @@ var NodeTypeGuards = class {
   isSignalMember(expr) {
     return this.t.isMemberExpression(expr) && this.t.isIdentifier(expr.property, { name: "value" });
   }
-  isObservableMember(expr) {
+  isBehaviorSubjectMember(expr) {
     return this.t.isMemberExpression(expr) && this.t.isIdentifier(expr.property, { name: "$value" });
   }
 };
@@ -1561,7 +1615,7 @@ var ASTUtilities = class {
     this.guards = guards;
   }
   getObject(expr) {
-    if (this.guards.isSignalMember(expr) || this.guards.isObservableMember(expr)) {
+    if (this.guards.isSignalMember(expr) || this.guards.isBehaviorSubjectMember(expr)) {
       return expr.object;
     }
     return expr;
@@ -1696,7 +1750,7 @@ var ObservableManager = class {
   }
   collectObservables(node, observables, astUtils) {
     this.walkNode(node, (n) => {
-      if (this.guards.isObservableMember(n)) {
+      if (this.guards.isBehaviorSubjectMember(n)) {
         const observable = astUtils.replaceThisWithSelf(
           n.object
         );
@@ -1710,7 +1764,7 @@ var ObservableManager = class {
   replaceObservablesWithSignals(node, observableSignals, astUtils) {
     const cloned = this.t.cloneNode(node, true);
     this.walkNode(cloned, (n) => {
-      if (this.guards.isObservableMember(n)) {
+      if (this.guards.isBehaviorSubjectMember(n)) {
         const observable = astUtils.replaceThisWithSelf(n.object);
         const key = this.getObservableKey(observable);
         const signalId = observableSignals.get(key);
@@ -1833,7 +1887,8 @@ var ElementTransformer = class {
       elId,
       statements,
       scope,
-      context2
+      context2,
+      tag
     );
     if (hasRef && refValue) {
       statements.push(
@@ -1927,7 +1982,7 @@ var ElementTransformer = class {
           context2.observables,
           this.astUtils
         );
-        if (this.guards.isSignalMember(expr) || this.guards.isObservableMember(expr)) {
+        if (this.guards.isSignalMember(expr) || this.guards.isBehaviorSubjectMember(expr)) {
           const replaced = this.observableManager.replaceObservablesWithSignals(
             expr,
             context2.observableSignals,
@@ -1968,11 +2023,13 @@ var ElementTransformer = class {
       }
     }
   }
-  processDOMAttributes(attributes, elId, statements, scope, context2) {
+  processDOMAttributes(attributes, elId, statements, scope, context2, tag) {
     let hasRef = false;
     let refValue = null;
     let hasDangerousHTML = false;
     let dangerousHTMLValue = null;
+    let hasClickHandler = false;
+    let hrefValue = null;
     for (const attr of attributes) {
       if (this.t.isJSXSpreadAttribute(attr)) {
         this.observableManager.collectObservables(
@@ -2037,17 +2094,59 @@ var ElementTransformer = class {
         continue;
       }
       if (/^on[A-Z]/.test(key)) {
+        if (key === "onClick") {
+          hasClickHandler = true;
+        }
         this.processEventListener(key, attr, elId, statements, context2);
         continue;
       }
+      if (key === "href" && this.t.isStringLiteral(attr.value)) {
+        hrefValue = attr.value.value;
+      }
       if (key === "style" && this.t.isJSXExpressionContainer(attr.value)) {
         this.processStyleAttribute(attr, elId, statements, scope, context2);
         continue;
       }
       this.processRegularAttribute(key, attr, elId, statements, context2);
     }
+    if (tag === "a" && !hasClickHandler && hrefValue && this.isRelativeUrl(hrefValue)) {
+      statements.push(
+        this.t.expressionStatement(
+          this.t.callExpression(
+            this.t.memberExpression(
+              elId,
+              this.t.identifier("addEventListener")
+            ),
+            [
+              this.t.stringLiteral("click"),
+              this.t.arrowFunctionExpression(
+                [this.t.identifier("event")],
+                this.t.callExpression(
+                  this.t.memberExpression(
+                    this.t.identifier("Orca"),
+                    this.t.identifier("navigate")
+                  ),
+                  [this.t.identifier("event"), this.t.stringLiteral(hrefValue)]
+                )
+              )
+            ]
+          )
+        )
+      );
+    }
     return { hasRef, refValue, hasDangerousHTML, dangerousHTMLValue };
   }
+  isRelativeUrl(url) {
+    try {
+      new URL(url);
+      return false;
+    } catch {
+      if (url.startsWith("#") || url.startsWith("mailto:") || url.startsWith("tel:")) {
+        return false;
+      }
+      return true;
+    }
+  }
   processEventListener(key, attr, elId, statements, context2) {
     const eventName = key.slice(2).toLowerCase();
     let handler = this.t.nullLiteral();
@@ -2179,7 +2278,7 @@ var ElementTransformer = class {
           insertedValue = this.astUtils.getObject(
             expr
           );
-        } else if (this.guards.isObservableMember(expr)) {
+        } else if (this.guards.isBehaviorSubjectMember(expr)) {
           const replaced = this.observableManager.replaceObservablesWithSignals(
             expr,
             context2.observableSignals,
@@ -2698,224 +2797,55 @@ ${decoratorsStr}export class ${className} extends _OrcaComponent {
 }
 
 // src/plugins/generators/generate_rpc.ts
-import { parseSync as parseSync4 } from "@swc/core";
 function generateRpcStub(filePath, code) {
   try {
-    const ast = parseSync4(code, {
-      syntax: "typescript",
-      tsx: filePath.endsWith("x") || filePath.endsWith(".tsx"),
-      decorators: true
-    });
-    const serviceInfo = extractServiceInfo2(ast, filePath);
-    validateServiceInfo2(serviceInfo, filePath);
-    return generateStubCode2(serviceInfo);
-  } catch (error) {
-    if (error.type) {
-      throw error;
-    }
-    throw {
-      type: "parse",
-      message: `Failed to parse TypeScript file: ${error.message}`,
-      filePath,
-      details: error
-    };
-  }
-}
-function extractServiceInfo2(ast, filePath) {
-  let serviceClass = null;
-  try {
-    for (const item of ast.body) {
-      if (item.type === "ExportDeclaration" && item.declaration?.type === "ClassDeclaration") {
-        const classDecl = item.declaration;
-        if (hasInjectableDecorator2(classDecl.decorators)) {
-          serviceClass = classDecl;
-          break;
-        }
-      }
-    }
-    if (!serviceClass?.identifier) {
+    const ast = parseTypeScript(filePath, code);
+    const serviceInfo = extractServiceInfo(ast, filePath, false);
+    if (!serviceInfo) {
       throw {
         type: "validation",
         message: "No exported class with @Injectable decorator found",
         filePath
       };
     }
-    const className = serviceClass.identifier.value;
-    const methods = extractMethods3(serviceClass, className, filePath);
-    return {
-      className,
-      methods
-    };
+    validateServiceInfo(serviceInfo, filePath);
+    return generateStubCode2(serviceInfo);
   } catch (error) {
     if (error.type) {
       throw error;
     }
     throw {
       type: "parse",
-      message: `Failed to extract service info: ${error.message}`,
+      message: `Failed to parse TypeScript file: ${error.message}`,
       filePath,
       details: error
     };
   }
 }
-function hasInjectableDecorator2(decorators) {
-  if (!decorators) return false;
-  return decorators.some((decorator) => {
-    const expr = decorator.expression;
-    if (expr.type === "CallExpression") {
-      if (expr.callee.type === "Identifier" && expr.callee.value === "Injectable") {
-        return true;
-      }
-    }
-    if (expr.type === "Identifier" && expr.value === "Injectable") {
-      return true;
-    }
-    return false;
-  });
-}
-function extractMethods3(classDecl, className, filePath) {
-  const methods = [];
-  for (const member of classDecl.body) {
-    if (!isPublicMethod2(member)) continue;
-    const method = member;
-    const methodName = getMethodName2(method);
-    if (!methodName) continue;
-    const returnTypeInfo = analyzeReturnType2(method);
-    if (!returnTypeInfo.isObservable && !method.function.async) {
-      throw {
-        type: "validation",
-        message: `Method ${className}.${methodName} must be async or return an Observable`,
-        filePath,
-        details: { className, methodName }
-      };
-    }
-    const params = extractMethodParams3(method.function.params || []);
-    methods.push({
-      name: methodName,
-      params,
-      returnType: returnTypeInfo.type,
-      isAsync: method.function.async,
-      isObservable: returnTypeInfo.isObservable
-    });
-  }
-  return methods;
-}
-function isPublicMethod2(member) {
-  return member.type === "ClassMethod" && (member.accessibility === "public" || !member.accessibility);
-}
-function getMethodName2(method) {
-  if (method.key.type === "Identifier") {
-    return method.key.value;
-  }
-  return null;
-}
-function analyzeReturnType2(method) {
-  const returnType = method.function.returnType?.typeAnnotation;
-  if (!returnType) {
-    return { type: "any", isObservable: false };
-  }
-  if (returnType.type === "TsTypeReference" && returnType.typeName.type === "Identifier" && returnType.typeName.value === "Observable") {
-    const innerType = returnType.typeParams?.params[0];
-    return {
-      type: innerType ? stringifyType4(innerType) : "any",
-      isObservable: true
-    };
-  }
-  if (returnType.type === "TsTypeReference" && returnType.typeName.type === "Identifier" && returnType.typeName.value === "Promise") {
-    const innerType = returnType.typeParams?.params[0];
-    return {
-      type: innerType ? stringifyType4(innerType) : "any",
-      isObservable: false
-    };
-  }
-  return {
-    type: stringifyType4(returnType),
-    isObservable: false
-  };
-}
-function extractMethodParams3(params) {
-  const result = [];
-  for (const param of params) {
-    const pat = param.pat;
-    if (pat.type === "Identifier") {
-      const name = pat.value;
-      const type = pat.typeAnnotation?.typeAnnotation ? stringifyType4(pat.typeAnnotation.typeAnnotation) : "any";
-      result.push({
-        name,
-        type
-      });
-    }
-  }
-  return result;
-}
-function stringifyType4(typeNode) {
-  if (!typeNode) return "any";
-  switch (typeNode.type) {
-    case "TsKeywordType":
-      return typeNode.kind;
-    case "TsTypeReference":
-      if (typeNode.typeName.type === "Identifier") {
-        const baseName = typeNode.typeName.value;
-        if (typeNode.typeParams?.params.length) {
-          const params = typeNode.typeParams.params.map(stringifyType4).join(", ");
-          return `${baseName}<${params}>`;
-        }
-        return baseName;
-      }
-      return "any";
-    case "TsArrayType":
-      return `${stringifyType4(typeNode.elemType)}[]`;
-    case "TsUnionType":
-      return typeNode.types.map(stringifyType4).join(" | ");
-    case "TsIntersectionType":
-      return typeNode.types.map(stringifyType4).join(" & ");
-    case "TsTypeLiteral":
-      const props = typeNode.members.map((member) => {
-        if (member.type === "TsPropertySignature") {
-          const key = member.key.type === "Identifier" ? member.key.value : "";
-          const type = member.typeAnnotation ? stringifyType4(member.typeAnnotation.typeAnnotation) : "any";
-          return `${key}: ${type}`;
-        }
-        return "";
-      }).filter(Boolean);
-      return `{ ${props.join("; ")} }`;
-    default:
-      return "any";
-  }
-}
-function validateServiceInfo2(serviceInfo, filePath) {
-  if (!serviceInfo.className) {
-    throw {
-      type: "validation",
-      message: "Service class must have a valid name",
-      filePath
-    };
-  }
-  if (serviceInfo.methods.length === 0) {
-    console.warn(
-      `Warning: Service ${serviceInfo.className} has no public methods`
-    );
-  }
-}
 function generateStubCode2(serviceInfo) {
   const className = serviceInfo.className;
-  const basePath = serviceNameToPath2(className);
-  const methods = serviceInfo.methods.map((method) => generateMethod2(method, basePath)).join("\n\n");
-  const hasObservable = serviceInfo.methods.some((m) => m.isObservable);
-  const observableImport = hasObservable ? `import { Observable } from "@kithinji/orca";
-` : "";
-  return `${observableImport}import { Injectable } from "@kithinji/orca";
+  const basePath = serviceNameToPath(className);
+  const methods = serviceInfo.methods.map((method) => generateMethod2(method, basePath, className)).join("\n\n");
+  const hasStreamable = serviceInfo.methods.some((m) => m.isStreamable);
+  const imports = generateImports2(hasStreamable);
+  return `${imports}
 
 @Injectable()
 export class ${className} {
 ${methods}
 }`;
 }
-function serviceNameToPath2(serviceName) {
-  return serviceName.replace(/Service$/, "").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function generateImports2(hasStreamable) {
+  let imports = `import { Injectable } from "@kithinji/orca";
+`;
+  if (hasStreamable) {
+    imports += `import { Observable } from "@kithinji/orca";
+`;
+  }
+  return imports;
 }
-function generateMethod2(method, basePath) {
-  if (method.isObservable) {
+function generateMethod2(method, basePath, serviceName) {
+  if (method.isStreamable) {
     return generateSseMethod(method, basePath);
   }
   const params = method.params.map((p) => `${p.name}: ${p.type}`).join(", ");
@@ -3177,7 +3107,7 @@ function useMyPlugin(options) {
 }
 
 // src/plugins/analyzers/graph.ts
-import { parseSync as parseSync5 } from "@swc/core";
+import { parseSync as parseSync4 } from "@swc/core";
 import * as fs3 from "fs";
 import * as path7 from "path";
 function resolveFilePath(fromFile, importPath) {
@@ -3325,7 +3255,7 @@ function buildGraph(entryPoints) {
     const store = Store.getInstance();
     const newCode = store.get(filePath);
     const content = newCode ? newCode[0] : fs3.readFileSync(filePath, "utf-8");
-    const ast = parseSync5(content, {
+    const ast = parseSync4(content, {
       syntax: "typescript",
       tsx: isTsx,
       decorators: true
@@ -3393,30 +3323,247 @@ function stylePlugin(store) {
   };
 }
 
+// src/html/index.ts
+import * as fs5 from "fs/promises";
+var HtmlPreprocessor = class {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  async processFile(inputPath, outputPath) {
+    const html = await fs5.readFile(inputPath, "utf-8");
+    const processed = await this.process(html);
+    await fs5.writeFile(outputPath, processed, "utf-8");
+  }
+  async process(html) {
+    let result = html;
+    if (this.options.transformers) {
+      for (const transformer of this.options.transformers) {
+        result = await transformer(result);
+      }
+    }
+    if (this.options.injectScripts && this.options.injectScripts.length > 0) {
+      result = this.injectScripts(result, this.options.injectScripts);
+    }
+    if (this.options.injectStyles && this.options.injectStyles.length > 0) {
+      result = this.injectStyles(result, this.options.injectStyles);
+    }
+    if (this.options.replaceVariables) {
+      result = this.replaceVariables(result, this.options.replaceVariables);
+    }
+    if (this.options.minify) {
+      result = this.minify(result);
+    }
+    return result;
+  }
+  injectScripts(html, scripts) {
+    const scriptTags = scripts.map((src) => `  <script src="${src}"></script>`).join("\n");
+    if (html.includes("</body>")) {
+      return html.replace("</body>", `${scriptTags}
+</body>`);
+    } else if (html.includes("</head>")) {
+      return html.replace("</head>", `${scriptTags}
+</head>`);
+    } else {
+      return html + `
+${scriptTags}`;
+    }
+  }
+  injectStyles(html, styles) {
+    const styleTags = styles.map((href) => `  <link rel="stylesheet" href="${href}">`).join("\n");
+    if (html.includes("</head>")) {
+      return html.replace("</head>", `${styleTags}
+</head>`);
+    } else if (html.includes("<head>")) {
+      return html.replace("<head>", `<head>
+${styleTags}`);
+    } else {
+      return styleTags + "\n" + html;
+    }
+  }
+  replaceVariables(html, variables) {
+    let result = html;
+    for (const [key, value] of Object.entries(variables)) {
+      result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, "g"), value);
+      result = result.replace(new RegExp(`\\$\\{${key}\\}`, "g"), value);
+    }
+    return result;
+  }
+  minify(html) {
+    return html.replace(/<!--[\s\S]*?-->/g, "").replace(/\s+/g, " ").replace(/>\s+</g, "><").trim();
+  }
+};
+function createHotReloadTransformer(port) {
+  return (html) => {
+    const hotReloadScript = `
+<script>
+(function() {
+  let ws;
+  let reconnectAttempts = 0;
+  const maxReconnectAttempts = 10;
+
+  function connect() {
+    ws = new WebSocket('ws://localhost:${port}');
+    
+    ws.onopen = () => {
+      reconnectAttempts = 0;
+    };
+    
+    ws.onmessage = (event) => {
+      if (event.data === 'reload') {
+        window.location.reload();
+      }
+    };
+    
+    ws.onclose = () => {      
+      if (reconnectAttempts < maxReconnectAttempts) {
+        reconnectAttempts++;
+        console.log(\`\u{1F504} Reconnecting... (attempt \${reconnectAttempts}/\${maxReconnectAttempts})\`);
+        setTimeout(connect, 1000 * reconnectAttempts);
+      } else {
+        console.log('\u274C Max reconnection attempts reached');
+      }
+    };
+    
+    ws.onerror = (error) => {
+      console.error('\u{1F525} Hot reload error:', error);
+    };
+  }
+  
+  connect();
+})();
+</script>`;
+    if (html.includes("</body>")) {
+      return html.replace("</body>", `${hotReloadScript}
+</body>`);
+    }
+    return html + hotReloadScript;
+  };
+}
+
 // src/dev/server.ts
-async function copyFile2() {
+var virtualClientFiles = {
+  "virtual:navigate": {
+    output: "navigate",
+    code: `
+export async function navigate(event, url) {
+  event.preventDefault();  
+  
+  try {
+    const { Navigate, getCurrentInjector } = await import("./src/client/client.js");
+    const injector = getCurrentInjector();
+    
+    if (injector) {
+      const navigate = injector.resolve(Navigate);
+      navigate.go(url);
+    } else {
+      window.location.href = url;
+    }
+  } catch (error) {
+    console.error("Navigation error:", error);
+    window.location.href = url;
+  }
+}
+    `.trim()
+  }
+};
+function createVirtualModulePlugin(virtualFiles) {
+  return {
+    name: "virtual-module",
+    setup(build) {
+      build.onResolve({ filter: /^virtual:/ }, (args) => {
+        if (virtualFiles[args.path]) {
+          return {
+            path: args.path,
+            namespace: "virtual"
+          };
+        }
+      });
+      build.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
+        const virtualFile = virtualFiles[args.path];
+        if (virtualFile) {
+          return {
+            contents: virtualFile.code,
+            loader: "js"
+          };
+        }
+      });
+    }
+  };
+}
+var HotReloadManager = class {
+  constructor(port = 3001) {
+    this.wss = null;
+    this.clients = /* @__PURE__ */ new Set();
+    this.port = port;
+  }
+  start() {
+    this.wss = new WebSocketServer({ port: this.port });
+    this.wss.on("connection", (ws) => {
+      this.clients.add(ws);
+      ws.on("close", () => {
+        this.clients.delete(ws);
+      });
+      ws.on("error", (error) => {
+        console.error("WebSocket error:", error);
+        this.clients.delete(ws);
+      });
+    });
+    console.log(`Hot reload server listening on ws://localhost:${this.port}`);
+  }
+  reload() {
+    const activeClients = Array.from(this.clients).filter(
+      (client) => client.readyState === WebSocket.OPEN
+    );
+    if (activeClients.length === 0) {
+      return;
+    }
+    activeClients.forEach((client) => {
+      try {
+        client.send("reload");
+      } catch (error) {
+        console.error("Failed to send reload signal:", error);
+        this.clients.delete(client);
+      }
+    });
+  }
+  close() {
+    if (this.wss) {
+      this.clients.forEach((client) => client.close());
+      this.wss.close();
+    }
+  }
+};
+async function copyAndProcessHtml(hotReloadPort, preprocessorOptions) {
   try {
-    await fs5.mkdir("public", { recursive: true });
-    await fs5.copyFile("./src/client/index.html", "./public/index.html");
+    await fs6.mkdir("public", { recursive: true });
+    const preprocessor = new HtmlPreprocessor({
+      transformers: [createHotReloadTransformer(hotReloadPort)],
+      injectScripts: ["./navigate.js"],
+      ...preprocessorOptions
+    });
+    await preprocessor.processFile(
+      "./src/client/index.html",
+      "./public/index.html"
+    );
   } catch (error) {
-    console.error("\u274C Failed to copy index.html:", error);
+    console.error("Failed to copy and process index.html:", error);
     throw error;
   }
 }
 async function cleanDirectories() {
   await Promise.all([
-    fs5.rm("dist", { recursive: true, force: true }),
-    fs5.rm("public", { recursive: true, force: true })
+    fs6.rm("dist", { recursive: true, force: true }),
+    fs6.rm("public", { recursive: true, force: true })
   ]);
 }
-function createRestartServerPlugin(serverProcess, onServerBuildComplete) {
+function createRestartServerPlugin(serverProcess, onServerBuildComplete, hotReloadManager) {
   return {
     name: "restart-server",
     setup(build) {
       build.onEnd((result) => {
         if (result.errors.length > 0) {
           console.error(
-            `\u274C Server build failed with ${result.errors.length} error(s)`
+            `Server build failed with ${result.errors.length} error(s)`
           );
           return;
         }
@@ -3427,8 +3574,11 @@ function createRestartServerPlugin(serverProcess, onServerBuildComplete) {
           stdio: "inherit"
         });
         serverProcess.current.on("error", (err) => {
-          console.error("\u274C Server process error:", err);
+          console.error("Server process error:", err);
         });
+        setTimeout(() => {
+          hotReloadManager.reload();
+        }, 500);
         onServerBuildComplete();
       });
     }
@@ -3438,15 +3588,48 @@ async function startDevServer() {
   const store = Store.getInstance();
   const userConfig = await loadConfig();
   const config = mergeConfig(getDefaultConfig(), userConfig);
+  const HOT_RELOAD_PORT = 3001;
+  const hotReloadManager = new HotReloadManager(HOT_RELOAD_PORT);
   await cleanDirectories();
-  await copyFile2();
+  await copyAndProcessHtml(HOT_RELOAD_PORT, config.htmlPreprocessor);
+  hotReloadManager.start();
   const entryPoints = ["src/main.ts"];
   const clientFiles = /* @__PURE__ */ new Set(["src/client/client.tsx"]);
   const serverProcessRef = { current: null };
   let clientCtx = null;
+  let virtualCtx = null;
   let isShuttingDown = false;
   let pendingClientFiles = /* @__PURE__ */ new Set();
   let needsClientRebuild = false;
+  async function buildVirtualFiles() {
+    if (isShuttingDown) return;
+    try {
+      if (virtualCtx) {
+        await virtualCtx.dispose();
+        virtualCtx = null;
+      }
+      const virtualEntryPoints = {};
+      Object.entries(virtualClientFiles).forEach(([key, value]) => {
+        virtualEntryPoints[value.output] = key;
+      });
+      virtualCtx = await esbuild2.context({
+        entryPoints: virtualEntryPoints,
+        bundle: true,
+        outdir: "public",
+        platform: "browser",
+        format: "iife",
+        globalName: "Orca",
+        sourcemap: config.build?.sourcemap ?? true,
+        minify: config.build?.minify ?? false,
+        plugins: [createVirtualModulePlugin(virtualClientFiles)],
+        write: true
+      });
+      await virtualCtx.rebuild();
+    } catch (error) {
+      console.error("Failed to build virtual files:", error);
+      throw error;
+    }
+  }
   async function rebuildClient() {
     if (isShuttingDown) return;
     try {
@@ -3466,7 +3649,7 @@ async function startDevServer() {
         format: "esm",
         sourcemap: config.build?.sourcemap ?? true,
         splitting: true,
-        minify: config.build?.minify ?? true,
+        minify: config.build?.minify ?? false,
         plugins: [
           ...config.plugins?.map((cb) => cb(store)) || [],
           ...config.client_plugins?.map((cb) => cb(store)) || [],
@@ -3482,8 +3665,11 @@ async function startDevServer() {
               build.onEnd((result) => {
                 if (result.errors.length > 0) {
                   console.error(
-                    `\u274C Client build failed with ${result.errors.length} error(s)`
+                    `Client build failed with ${result.errors.length} error(s)`
                   );
+                } else {
+                  console.log("Client build completed");
+                  hotReloadManager.reload();
                 }
               });
             }
@@ -3495,7 +3681,7 @@ async function startDevServer() {
       pendingClientFiles.clear();
       needsClientRebuild = false;
     } catch (error) {
-      console.error("\u274C Failed to rebuild client:", error);
+      console.error("Failed to rebuild client:", error);
       throw error;
     }
   }
@@ -3526,13 +3712,18 @@ async function startDevServer() {
           }
         }
       }),
-      createRestartServerPlugin(serverProcessRef, onServerBuildComplete)
+      createRestartServerPlugin(
+        serverProcessRef,
+        onServerBuildComplete,
+        hotReloadManager
+      )
     ],
     write: true
   });
   async function shutdown() {
     if (isShuttingDown) return;
     isShuttingDown = true;
+    console.log("\nShutting down dev server...");
     try {
       if (serverProcessRef.current) {
         serverProcessRef.current.kill("SIGTERM");
@@ -3540,14 +3731,19 @@ async function startDevServer() {
       }
       await serverCtx.dispose();
       if (clientCtx) await clientCtx.dispose();
+      if (virtualCtx) await virtualCtx.dispose();
+      hotReloadManager.close();
+      console.log("Dev server shut down successfully");
       process.exit(0);
     } catch (error) {
-      console.error("\u274C Error during shutdown:", error);
+      console.error("Error during shutdown:", error);
       process.exit(1);
     }
   }
   process.on("SIGINT", shutdown);
   process.on("SIGTERM", shutdown);
+  console.log("Starting dev server...");
+  await buildVirtualFiles();
   await serverCtx.watch();
 }
 
@@ -3560,7 +3756,7 @@ __export(config_exports, {
 });
 
 // src/add/component/component.ts
-import * as fs6 from "fs";
+import * as fs7 from "fs";
 import * as path8 from "path";
 import * as ts2 from "typescript";
 var ComponentDefinition = class {
@@ -3737,30 +3933,30 @@ Processing dependencies for "${name}": [${component.dependencies.join(
   );
   const componentDir = path8.dirname(componentPath);
   const appModulePath = path8.join(process.cwd(), "src/app/app.module.ts");
-  if (!fs6.existsSync(componentModulePath)) {
+  if (!fs7.existsSync(componentModulePath)) {
     const moduleDir = path8.dirname(componentModulePath);
-    if (!fs6.existsSync(moduleDir)) {
-      fs6.mkdirSync(moduleDir, { recursive: true });
+    if (!fs7.existsSync(moduleDir)) {
+      fs7.mkdirSync(moduleDir, { recursive: true });
     }
-    fs6.writeFileSync(componentModulePath, createModule(), "utf-8");
+    fs7.writeFileSync(componentModulePath, createModule(), "utf-8");
   }
-  if (!fs6.existsSync(componentDir)) {
-    fs6.mkdirSync(componentDir, { recursive: true });
+  if (!fs7.existsSync(componentDir)) {
+    fs7.mkdirSync(componentDir, { recursive: true });
   }
-  if (!fs6.existsSync(componentPath)) {
-    fs6.writeFileSync(componentPath, component.generate(), "utf-8");
+  if (!fs7.existsSync(componentPath)) {
+    fs7.writeFileSync(componentPath, component.generate(), "utf-8");
     console.log(`Created ${name}.component.tsx`);
   } else {
     console.log(`${name}.component.tsx already exists, skipping file creation`);
   }
-  const moduleContent = fs6.readFileSync(componentModulePath, "utf-8");
+  const moduleContent = fs7.readFileSync(componentModulePath, "utf-8");
   const updatedModule = updateModuleWithComponent(moduleContent, name);
-  fs6.writeFileSync(componentModulePath, updatedModule, "utf-8");
-  if (fs6.existsSync(appModulePath)) {
-    const appModuleContent = fs6.readFileSync(appModulePath, "utf-8");
+  fs7.writeFileSync(componentModulePath, updatedModule, "utf-8");
+  if (fs7.existsSync(appModulePath)) {
+    const appModuleContent = fs7.readFileSync(appModulePath, "utf-8");
     const updatedAppModule = ensureComponentModuleImported(appModuleContent);
     if (updatedAppModule !== appModuleContent) {
-      fs6.writeFileSync(appModulePath, updatedAppModule, "utf-8");
+      fs7.writeFileSync(appModulePath, updatedAppModule, "utf-8");
     }
   }
 }
@@ -3946,12 +4142,12 @@ function toPascalCase(str) {
 }
 
 // src/utils/create.ts
-import * as fs7 from "fs";
+import * as fs8 from "fs";
 import * as path9 from "path";
 function createStructure(basePath, entry) {
-  fs7.mkdirSync(basePath, { recursive: true });
+  fs8.mkdirSync(basePath, { recursive: true });
   entry.files?.forEach((file) => {
-    fs7.writeFileSync(path9.join(basePath, file.name), file.content);
+    fs8.writeFileSync(path9.join(basePath, file.name), file.content);
   });
   entry.dirs?.forEach((dir) => {
     const dirPath = path9.join(basePath, dir.name || "");
@@ -3964,7 +4160,7 @@ import path11 from "path";
 
 // src/add/module/module.ts
 import * as path10 from "path";
-import * as fs8 from "fs";
+import * as fs9 from "fs";
 import * as ts3 from "typescript";
 function addFeature(name) {
   const featureDir = path10.join(process.cwd(), "src", "features", name);
@@ -4027,8 +4223,8 @@ function updateFeaturesIndex(featureName) {
   );
   const moduleName = toPascalCase(featureName + "_Module");
   const importPath = `./${featureName}/${featureName}.module`;
-  if (fs8.existsSync(featuresIndexPath)) {
-    let content = fs8.readFileSync(featuresIndexPath, "utf-8");
+  if (fs9.existsSync(featuresIndexPath)) {
+    let content = fs9.readFileSync(featuresIndexPath, "utf-8");
     const sourceFile = ts3.createSourceFile(
       "index.ts",
       content,
@@ -4054,24 +4250,24 @@ function updateFeaturesIndex(featureName) {
     }
     const exportStatement = `export { ${moduleName} } from "${importPath}";
 `;
-    fs8.appendFileSync(featuresIndexPath, exportStatement);
+    fs9.appendFileSync(featuresIndexPath, exportStatement);
   } else {
     const featuresDir = path10.dirname(featuresIndexPath);
-    if (!fs8.existsSync(featuresDir)) {
-      fs8.mkdirSync(featuresDir, { recursive: true });
+    if (!fs9.existsSync(featuresDir)) {
+      fs9.mkdirSync(featuresDir, { recursive: true });
     }
     const exportStatement = `export { ${moduleName} } from "${importPath}";
 `;
-    fs8.writeFileSync(featuresIndexPath, exportStatement, "utf-8");
+    fs9.writeFileSync(featuresIndexPath, exportStatement, "utf-8");
   }
 }
 function updateAppModule(featureName) {
   const appModulePath = path10.join(process.cwd(), "src", "app", "app.module.ts");
-  if (!fs8.existsSync(appModulePath)) {
+  if (!fs9.existsSync(appModulePath)) {
     return;
   }
   const moduleName = toPascalCase(featureName + "_Module");
-  let content = fs8.readFileSync(appModulePath, "utf-8");
+  let content = fs9.readFileSync(appModulePath, "utf-8");
   const sourceFile = ts3.createSourceFile(
     "app.module.ts",
     content,
@@ -4095,7 +4291,7 @@ function updateAppModule(featureName) {
   });
   if (hasImport) {
     content = addToModuleImportsArray(content, sourceFile, moduleName);
-    fs8.writeFileSync(appModulePath, content, "utf-8");
+    fs9.writeFileSync(appModulePath, content, "utf-8");
     return;
   }
   let lastImportEnd = 0;
@@ -4114,7 +4310,7 @@ function updateAppModule(featureName) {
     true
   );
   content = addToModuleImportsArray(content, newSourceFile, moduleName);
-  fs8.writeFileSync(appModulePath, content, "utf-8");
+  fs9.writeFileSync(appModulePath, content, "utf-8");
 }
 function addToModuleImportsArray(content, sourceFile, moduleName) {
   let decoratorNode;
@@ -4388,24 +4584,19 @@ export class ${serviceName} {
 }
 function createPage(name) {
   const pageName = toPascalCase(name + "_Page");
-  const serviceName = toPascalCase(name + "_Service");
-  const serviceVar = toCamelCase(name + "_Service");
   const listComponent = toPascalCase(name + "_List");
   return `import { Component } from "@kithinji/orca";
-import { ${serviceName} } from "./${name}.service";
 import { ${listComponent} } from "./components/${name}-list.component";
 
-@Component()
+@Component({
+  deps: [${listComponent}]
+})
 export class ${pageName} {
-    constructor(
-        public ${serviceVar}: ${serviceName}
-    ) {}
-
     build() {
         return (
             <div>
                 <h1>${toPascalCase(name)} Management</h1>
-                <${listComponent} service={this.${serviceVar}} />
+                <${listComponent} name="hello" />
             </div>
         );
     }
@@ -4415,6 +4606,7 @@ export class ${pageName} {
 function createListComponent(name) {
   const componentName = toPascalCase(name + "_List");
   const serviceName = toPascalCase(name + "_Service");
+  const serviceVar = toCamelCase(name + "_Service");
   return `"use interactive";
 
 import { Component } from "@kithinji/orca";
@@ -4423,9 +4615,13 @@ import { ${serviceName} } from "../${name}.service";
 @Component()
 export class ${componentName} {
     props!: {
-        service: ${serviceName};
+        name: string;
     };
 
+    constructor(
+        public readonly ${serviceVar}: ${serviceName}
+    ) {}
+
     build() {
         return (
             <div>
@@ -4599,6 +4795,9 @@ export function bootstrap() {
 }
 
 bootstrap();
+
+/* Don't modify */
+export { Navigate, getCurrentInjector } from "@kithinji/orca";
 `;
 }
 function genMainTs() {
@@ -4621,17 +4820,17 @@ import path14 from "path";
 import { execSync } from "child_process";
 
 // src/docker/docker.ts
-import fs9 from "fs-extra";
+import fs10 from "fs-extra";
 import path12 from "path";
 import prompts from "prompts";
 import yaml from "js-yaml";
 async function dockerize(env = "prod") {
   const cwd = process.cwd();
   const packageJsonPath = path12.join(cwd, "package.json");
-  if (!fs9.existsSync(packageJsonPath)) {
+  if (!fs10.existsSync(packageJsonPath)) {
     throw new Error("package.json not found. Are you in a Pod project?");
   }
-  const packageJson = await fs9.readJSON(packageJsonPath);
+  const packageJson = await fs10.readJSON(packageJsonPath);
   const projectName = packageJson.name;
   const detectedServices = detectServices(packageJson);
   const selectedServices = await selectServices(detectedServices);
@@ -4672,30 +4871,30 @@ async function selectServices(detected) {
 }
 async function restructureProject(cwd, projectName) {
   const nestedDir = path12.join(cwd, projectName);
-  if (fs9.existsSync(nestedDir)) {
+  if (fs10.existsSync(nestedDir)) {
     console.log("\u26A0\uFE0F  Project already restructured, skipping...");
     return;
   }
-  await fs9.ensureDir(nestedDir);
-  const items = await fs9.readdir(cwd);
+  await fs10.ensureDir(nestedDir);
+  const items = await fs10.readdir(cwd);
   const toMove = items.filter((item) => item !== projectName);
   for (const item of toMove) {
     const src = path12.join(cwd, item);
     const dest = path12.join(nestedDir, item);
-    await fs9.move(src, dest, { overwrite: true });
+    await fs10.move(src, dest, { overwrite: true });
   }
   const envSrc = path12.join(nestedDir, ".env");
   const envDest = path12.join(cwd, ".env");
-  if (fs9.existsSync(envSrc)) {
-    await fs9.move(envSrc, envDest, { overwrite: true });
+  if (fs10.existsSync(envSrc)) {
+    await fs10.move(envSrc, envDest, { overwrite: true });
   }
 }
 async function writeEnvVars(cwd, services, env) {
   const envPath = path12.join(cwd, ".env");
   let existingEnv = {};
   let existingContent = "";
-  if (fs9.existsSync(envPath)) {
-    existingContent = await fs9.readFile(envPath, "utf8");
+  if (fs10.existsSync(envPath)) {
+    existingContent = await fs10.readFile(envPath, "utf8");
     existingEnv = parseEnvFile(existingContent);
   }
   const newVars = [];
@@ -4724,7 +4923,7 @@ async function writeEnvVars(cwd, services, env) {
   if (newVars.length > 0) {
     const separator = existingContent && !existingContent.endsWith("\n") ? "\n" : "";
     const newContent = existingContent + separator + (existingContent ? "\n" : "") + newVars.join("\n") + "\n";
-    await fs9.writeFile(envPath, newContent);
+    await fs10.writeFile(envPath, newContent);
     console.log(
       `\u2705 Added ${newVars.length} new environment variable(s) to .env`
     );
@@ -4820,8 +5019,8 @@ docker-compose*.yml
 tmp
 temp
 `;
-  await fs9.writeFile(dockerfilePath, dockerfile);
-  await fs9.writeFile(dockerignorePath, dockerignore);
+  await fs10.writeFile(dockerfilePath, dockerfile);
+  await fs10.writeFile(dockerignorePath, dockerignore);
 }
 async function createDeployfile(cwd, projectName) {
   const deployFile = `name: ${projectName}
@@ -4946,7 +5145,7 @@ targets:
             docker image prune -af --filter "until=24h"
 `;
   const deployFilePath = path12.join(cwd, "pod.deploy.yml");
-  await fs9.writeFile(deployFilePath, deployFile);
+  await fs10.writeFile(deployFilePath, deployFile);
 }
 async function setupProduction(cwd, projectName, services) {
   const compose = {
@@ -5017,7 +5216,7 @@ async function setupProduction(cwd, projectName, services) {
     compose.services[projectName].depends_on.push(service.name);
   }
   const composePath = path12.join(cwd, "docker-compose.yml");
-  await fs9.writeFile(
+  await fs10.writeFile(
     composePath,
     yaml.dump(compose, { indent: 2, lineWidth: -1 })
   );
@@ -5025,8 +5224,8 @@ async function setupProduction(cwd, projectName, services) {
 async function setupDevelopment(cwd, projectName, services) {
   const existingCompose = path12.join(cwd, "docker-compose.yml");
   let existingServices = [];
-  if (fs9.existsSync(existingCompose)) {
-    const content = await fs9.readFile(existingCompose, "utf8");
+  if (fs10.existsSync(existingCompose)) {
+    const content = await fs10.readFile(existingCompose, "utf8");
     const existing = yaml.load(content);
     if (existing.services) {
       existingServices = Object.keys(existing.services).filter((s) => ["postgres", "mysql", "redis", "mongodb"].includes(s)).map((name) => ({ name }));
@@ -5096,14 +5295,14 @@ async function setupDevelopment(cwd, projectName, services) {
     compose.services[projectName].depends_on.push(tunnelName);
   }
   const devComposePath = path12.join(cwd, "docker-compose.dev.yml");
-  await fs9.writeFile(
+  await fs10.writeFile(
     devComposePath,
     yaml.dump(compose, { indent: 2, lineWidth: -1 })
   );
 }
 async function createTunnelService(projectDir, serviceName) {
   const tunnelDir = path12.join(projectDir, `${serviceName}-tunnel`);
-  await fs9.ensureDir(tunnelDir);
+  await fs10.ensureDir(tunnelDir);
   const dockerfile = `FROM alpine:latest
 
 RUN apk add --no-cache openssh-client
@@ -5131,8 +5330,8 @@ ssh -i $SSH_KEY \\
     -o ServerAliveInterval=60 \\
     $REMOTE_HOST
 `;
-  await fs9.writeFile(path12.join(tunnelDir, "Dockerfile"), dockerfile);
-  await fs9.writeFile(path12.join(tunnelDir, "tunnel.sh"), tunnelScript);
+  await fs10.writeFile(path12.join(tunnelDir, "Dockerfile"), dockerfile);
+  await fs10.writeFile(path12.join(tunnelDir, "tunnel.sh"), tunnelScript);
 }
 function getServiceConfig(serviceName) {
   const configs = {
@@ -5242,7 +5441,7 @@ function printNextSteps(projectName, env, services) {
 }
 
 // src/deploy/deploy.ts
-import fs10 from "fs-extra";
+import fs11 from "fs-extra";
 import yaml2 from "js-yaml";
 import path13 from "path";
 import os from "os";
@@ -5499,12 +5698,12 @@ STDERR: ${result.stderr}`);
   }
   async uploadContent(remotePath, content) {
     const localTmp = path13.join(os.tmpdir(), `pod_tmp_${Date.now()}`);
-    fs10.writeFileSync(localTmp, content);
+    fs11.writeFileSync(localTmp, content);
     try {
       await this.ssh.execCommand(`mkdir -p $(dirname ${remotePath})`);
       await this.ssh.putFile(localTmp, remotePath);
     } finally {
-      if (fs10.existsSync(localTmp)) fs10.unlinkSync(localTmp);
+      if (fs11.existsSync(localTmp)) fs11.unlinkSync(localTmp);
     }
   }
   async readJson(remotePath) {
@@ -5578,25 +5777,25 @@ STDERR: ${err.stderr || err.message}`
       os.tmpdir(),
       `pod_script_${name}_${Date.now()}.sh`
     );
-    fs10.writeFileSync(scriptPath, interpolated);
-    fs10.chmodSync(scriptPath, "755");
+    fs11.writeFileSync(scriptPath, interpolated);
+    fs11.chmodSync(scriptPath, "755");
     try {
       await this.runCommand(scriptPath);
     } finally {
-      if (fs10.existsSync(scriptPath)) fs10.unlinkSync(scriptPath);
+      if (fs11.existsSync(scriptPath)) fs11.unlinkSync(scriptPath);
     }
   }
   async uploadContent(localPath, content) {
     const dir = path13.dirname(localPath);
-    if (!fs10.existsSync(dir)) {
-      fs10.mkdirSync(dir, { recursive: true });
+    if (!fs11.existsSync(dir)) {
+      fs11.mkdirSync(dir, { recursive: true });
     }
-    fs10.writeFileSync(localPath, content);
+    fs11.writeFileSync(localPath, content);
   }
   async readJson(localPath) {
     try {
-      if (!fs10.existsSync(localPath)) return null;
-      const content = fs10.readFileSync(localPath, "utf8");
+      if (!fs11.existsSync(localPath)) return null;
+      const content = fs11.readFileSync(localPath, "utf8");
       return JSON.parse(content);
     } catch {
       return null;
@@ -5604,8 +5803,8 @@ STDERR: ${err.stderr || err.message}`
   }
   async syncDirectory(source, destination, exclude) {
     console.log(chalk.gray(` Copying ${source} \u2192 ${destination}`));
-    if (!fs10.existsSync(destination)) {
-      fs10.mkdirSync(destination, { recursive: true });
+    if (!fs11.existsSync(destination)) {
+      fs11.mkdirSync(destination, { recursive: true });
     }
     const shouldExclude = (relativePath) => {
       if (!exclude?.length) return false;
@@ -5622,19 +5821,19 @@ STDERR: ${err.stderr || err.message}`
       });
     };
     const copyRecursive = (src, dest) => {
-      const entries = fs10.readdirSync(src, { withFileTypes: true });
+      const entries = fs11.readdirSync(src, { withFileTypes: true });
       for (const entry of entries) {
         const srcPath = path13.join(src, entry.name);
         const destPath = path13.join(dest, entry.name);
         const relativePath = path13.relative(source, srcPath);
         if (shouldExclude(relativePath)) continue;
         if (entry.isDirectory()) {
-          if (!fs10.existsSync(destPath)) {
-            fs10.mkdirSync(destPath, { recursive: true });
+          if (!fs11.existsSync(destPath)) {
+            fs11.mkdirSync(destPath, { recursive: true });
           }
           copyRecursive(srcPath, destPath);
         } else {
-          fs10.copyFileSync(srcPath, destPath);
+          fs11.copyFileSync(srcPath, destPath);
         }
       }
     };
@@ -5797,7 +5996,7 @@ var OperationHandler = class {
 async function deploy(targetName, options) {
   const cwd = process.cwd();
   const rawConfig = yaml2.load(
-    fs10.readFileSync(path13.join(cwd, "pod.deploy.yml"), "utf8"),
+    fs11.readFileSync(path13.join(cwd, "pod.deploy.yml"), "utf8"),
     { schema: yaml2.DEFAULT_SCHEMA }
   );
   const rawTarget = rawConfig.targets?.[targetName];
@@ -5859,7 +6058,7 @@ Deployment Failed: ${err.message}`));
 // src/main.ts
 import chalk2 from "chalk";
 var program = new Command();
-program.name("pod").description("Pod cli tool").version("1.0.24");
+program.name("pod").description("Pod cli tool").version("1.0.26");
 program.command("new <name>").description("Start a new Orca Project").action(async (name) => {
   await addNew(name);
   const appDir = path14.resolve(process.cwd());