@kithinji/pod 1.0.23 → 1.0.25

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,20 +927,50 @@ 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) {
-  const ast = parseSync(code, {
+
+// 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"),
+    tsx: filePath.endsWith("x") || filePath.endsWith(".tsx"),
     decorators: true
   });
-  const serviceInfo = extractServiceInfo(ast);
-  if (!serviceInfo || !serviceInfo.hasInjectable) return null;
-  return generateControllerCode(serviceInfo, filePath);
 }
-function extractServiceInfo(ast) {
-  let serviceClass = null;
-  let hasInjectable = false;
+function hasInjectableDecorator(decorators) {
+  if (!decorators) return false;
+  return decorators.some((d) => {
+    const expr = d.expression;
+    return expr.type === "Identifier" && expr.value === "Injectable" || expr.type === "CallExpression" && expr.callee.type === "Identifier" && expr.callee.value === "Injectable";
+  });
+}
+function isPublicMethod(member) {
+  return member.type === "ClassMethod" && (member.accessibility === "public" || !member.accessibility);
+}
+function getMethodName(method) {
+  if (method.key.type === "Identifier") {
+    return method.key.value;
+  }
+  return null;
+}
+function extractImportMap(ast) {
   const importMap = {};
   for (const item of ast.body) {
     if (item.type === "ImportDeclaration") {
@@ -951,55 +982,94 @@ function extractServiceInfo(ast) {
         }
       });
     }
-    if (item.type === "ExportDeclaration" && item.declaration.type === "ClassDeclaration") {
+  }
+  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)) {
-        serviceClass = classDecl;
-        hasInjectable = true;
+        return classDecl;
       }
     }
   }
-  if (!serviceClass || !serviceClass.identifier) return null;
+  return null;
+}
+function analyzeReturnType(method) {
+  const returnType = method.function.returnType?.typeAnnotation;
+  if (!returnType) {
+    return {
+      type: "any",
+      isStreamable: false,
+      isSubjectLike: 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 {
-    className: serviceClass.identifier.value,
-    methods: extractMethods(serviceClass),
-    hasInjectable,
-    importMap
+    type: stringifyType(returnType),
+    isStreamable: false,
+    isSubjectLike: false
   };
 }
-function hasInjectableDecorator(decorators) {
-  return decorators?.some((d) => {
-    const expr = d.expression;
-    return expr.type === "Identifier" && expr.value === "Injectable" || expr.type === "CallExpression" && expr.callee.type === "Identifier" && expr.callee.value === "Injectable";
-  }) ?? 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 extractMethods(classDecl) {
-  const methods = [];
-  for (const member of classDecl.body) {
-    if (member.type === "ClassMethod" && member.accessibility === "public") {
-      const method = member;
-      const methodName = method.key.type === "Identifier" ? method.key.value : "";
-      if (!methodName) continue;
-      if (!method.function.async) {
-        throw new Error(
-          `Server action ${classDecl.identifier.value}.${methodName} must be async.`
-        );
-      }
-      const { paramSchemas, returnSchema } = extractSignature(
-        method.function.decorators,
-        method.function.params.length
-      );
-      methods.push({
-        name: methodName,
-        params: extractMethodParams(method.function.params),
-        returnType: extractReturnType(method.function.returnType),
-        isAsync: true,
-        paramSchemas,
-        returnSchema
-      });
+function extractMethodParams(params) {
+  return params.map((p) => {
+    const pat = p.pat;
+    if (pat.type !== "Identifier") {
+      return {
+        name: "param",
+        type: "any",
+        decorators: []
+      };
     }
-  }
-  return methods;
+    return {
+      name: pat.value,
+      type: pat.typeAnnotation ? stringifyType(pat.typeAnnotation.typeAnnotation) : "any",
+      decorators: []
+    };
+  });
 }
 function extractSignature(decorators, paramCount) {
   if (!decorators) return { paramSchemas: [] };
@@ -1023,9 +1093,14 @@ function extractSignature(decorators, paramCount) {
   return { paramSchemas: [] };
 }
 function stringifyExpression(expr) {
-  if (expr.type === "Identifier") return expr.value;
+  if (!expr) return "any";
+  if (expr.type === "Identifier") {
+    return expr.value;
+  }
   if (expr.type === "MemberExpression") {
-    return `${stringifyExpression(expr.object)}.${expr.property.value || ""}`;
+    const object = stringifyExpression(expr.object);
+    const property = expr.property.value || stringifyExpression(expr.property);
+    return `${object}.${property}`;
   }
   if (expr.type === "CallExpression") {
     const args = expr.arguments.map((a) => stringifyExpression(a.expression)).join(", ");
@@ -1033,107 +1108,257 @@ function stringifyExpression(expr) {
   }
   return "any";
 }
-function extractMethodParams(params) {
-  return params.map((p) => {
-    const pat = p.pat;
-    return {
-      name: pat.value,
-      type: pat.typeAnnotation ? stringifyType(pat.typeAnnotation.typeAnnotation) : "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 }
+      };
+    }
+    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) {
+    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`
+    );
+  }
+  serviceInfo.methods.forEach((method) => {
+    if (method.params.length > 0 && method.paramSchemas?.length === 0) {
+      console.warn(
+        `Warning: Method ${serviceInfo.className}.${method.name} has parameters but no @Signature validation`
+      );
+    }
   });
 }
-function extractReturnType(node) {
-  if (!node?.typeAnnotation) return "any";
-  const type = node.typeAnnotation;
-  if (type.type === "TsTypeReference" && type.typeName.value === "Promise") {
-    return stringifyType(type.typeParams?.params[0]);
+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
+    };
   }
-  return stringifyType(type);
 }
-function stringifyType(node) {
-  if (!node) return "any";
-  switch (node.type) {
-    case "TsKeywordType":
-      return node.kind;
-    case "TsTypeReference":
-      const base = node.typeName.value;
-      const args = node.typeParams ? `<${node.typeParams.params.map(stringifyType).join(", ")}>` : "";
-      return base + args;
-    case "TsArrayType":
-      return `${stringifyType(node.elemType)}[]`;
-    default:
-      return "any";
+
+// 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$/, "AutoController");
-  const serviceImportPath = `./${path4.basename(filePath).replace(/\.ts$/, "")}`;
+  const controllerName = serviceName.replace(/Service$/, "GenController");
+  const serviceImportPath = getImportPath(filePath);
+  const controllerPath = serviceNameToPath(serviceName);
+  const imports = generateImports(serviceInfo, serviceName, serviceImportPath);
+  const methods = generateMethods(serviceInfo);
+  const serviceInstance = toInstanceName(serviceName);
+  return `${imports}
+
+@Controller("/${controllerPath}", {
+  providedIn: "root",
+})
+export class ${controllerName} {
+  constructor(
+    private readonly ${serviceInstance}: ${serviceName}
+  ) {}
+
+${methods}
+}`;
+}
+function getImportPath(filePath) {
+  const basename3 = path4.basename(filePath);
+  return `./${basename3.replace(/\.tsx?$/, "")}`;
+}
+function generateImports(serviceInfo, serviceName, serviceImportPath) {
   const importGroups = /* @__PURE__ */ new Map();
   const registerIdentifier = (id) => {
     const source = serviceInfo.importMap[id] || serviceImportPath;
-    if (!importGroups.has(source)) importGroups.set(source, /* @__PURE__ */ new Set());
+    if (!importGroups.has(source)) {
+      importGroups.set(source, /* @__PURE__ */ new Set());
+    }
     importGroups.get(source).add(id);
   };
   serviceInfo.methods.forEach((m) => {
     [...m.paramSchemas, m.returnSchema].filter(Boolean).forEach((s) => {
       const matches = s.match(/[A-Z][a-zA-Z0-9]*/g);
       matches?.forEach(registerIdentifier);
-      if (s.includes("z.")) registerIdentifier("z");
+      if (s.includes("z.")) {
+        registerIdentifier("z");
+      }
     });
   });
-  let importStrings = `import { Controller, Post, Get, Body } from "@kithinji/orca";
+  const hasPost = serviceInfo.methods.some(
+    (m) => !m.isStreamable && m.params.length > 0
+  );
+  const hasGet = serviceInfo.methods.some(
+    (m) => !m.isStreamable && m.params.length === 0
+  );
+  const hasSse = serviceInfo.methods.some(
+    (m) => m.isStreamable && m.streamType == "Observable" /* Observable */
+  );
+  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 (hasStreamableWithParams) decorators.push("Query");
+  let importStrings = `import { ${decorators.join(
+    ", "
+  )} } from "@kithinji/orca";
 `;
   importGroups.forEach((ids, source) => {
     const filteredIds = Array.from(ids).filter((id) => id !== serviceName);
     if (filteredIds.length > 0) {
-      importStrings += `
-import { ${filteredIds.join(
+      importStrings += `import { ${filteredIds.join(
         ", "
-      )} } from "${source}";`;
-    }
-  });
-  const methods = serviceInfo.methods.map((m) => {
-    const hasParams = m.params.length > 0;
-    const bodyParam = hasParams ? `@Body() body: any` : "";
-    let body = "";
-    if (hasParams) {
-      if (m.paramSchemas.length > 0) {
-        body += `    const b = typeof body === 'object' && body !== null ? body : {};
-`;
-        m.params.forEach((p, i) => {
-          body += `    const ${p.name} = ${m.paramSchemas[i]}.parse(b.${p.name});
+      )} } from "${source}";
 `;
-        });
-      } else {
-        body += `    const { ${m.params.map((p) => p.name).join(", ")} } = body;
-`;
-      }
     }
-    const callArgs = m.params.map((p) => p.name).join(", ");
-    const serviceCall = `this.${serviceName.charAt(0).toLowerCase() + serviceName.slice(1)}.${m.name}(${callArgs})`;
-    if (m.returnSchema) {
-      body += `    const res = await ${serviceCall};
-    return ${m.returnSchema}.parse(res);`;
-    } else {
-      body += `    return ${serviceCall};`;
-    }
-    return `  @${hasParams ? "Post" : "Get"}("${m.name}")
-  async ${m.name}(${bodyParam}): Promise<${m.returnType}> {
+  });
+  return importStrings;
+}
+function generateMethods(serviceInfo) {
+  return serviceInfo.methods.map((m) => generateMethod(m, serviceInfo.className)).join("\n\n");
+}
+function generateMethod(method, serviceName) {
+  const hasParams = method.params.length > 0;
+  const serviceInstance = toInstanceName(serviceName);
+  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}): ${returnTypeName}<${method.returnType}> {
+${body2}
+  }`;
+  }
+  const decorator = hasParams ? "Post" : "Get";
+  const bodyParam = hasParams ? `@Body() body: any` : "";
+  const body = generateMethodBody(method, serviceInstance, true);
+  return `  @${decorator}("${method.name}")
+  async ${method.name}(${bodyParam}): Promise<${method.returnType}> {
 ${body}
   }`;
-  }).join("\n\n");
-  return `${importStrings}
-
-@Controller("/${serviceName}", {
-  providedIn: "root",
-})
-export class ${controllerName} {
-  constructor(private readonly ${serviceName.charAt(0).toLowerCase() + serviceName.slice(1)}: ${serviceName}) {}
-
-${methods}
-}`;
+}
+function generateMethodBody(method, serviceInstance, isAsync) {
+  const lines = [];
+  const hasParams = method.params.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.isStreamable) {
+    if (method.paramSchemas.length > 0) {
+      lines.push(
+        `    const b = typeof body === 'object' && body !== null ? body : {};`
+      );
+      method.params.forEach((p, i) => {
+        lines.push(
+          `    const ${p.name} = ${method.paramSchemas[i]}.parse(b.${p.name});`
+        );
+      });
+    } else {
+      const paramNames = method.params.map((p) => p.name).join(", ");
+      lines.push(`    const { ${paramNames} } = body || {};`);
+    }
+  }
+  let callArgs;
+  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(", ");
+  }
+  const serviceCall = `${serviceInstance}.${method.name}(${callArgs})`;
+  if (method.returnSchema && isAsync) {
+    lines.push(`    const res = await this.${serviceCall};`);
+    lines.push(`    return ${method.returnSchema}.parse(res);`);
+  } else if (isAsync) {
+    lines.push(`    return this.${serviceCall};`);
+  } else {
+    lines.push(`    return this.${serviceCall};`);
+  }
+  return lines.join("\n");
 }
 
 // src/plugins/generators/tsx_server_stub.ts
@@ -1380,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" });
   }
 };
@@ -1390,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;
@@ -1525,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
         );
@@ -1539,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);
@@ -1662,7 +1887,8 @@ var ElementTransformer = class {
       elId,
       statements,
       scope,
-      context2
+      context2,
+      tag
     );
     if (hasRef && refValue) {
       statements.push(
@@ -1756,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,
@@ -1797,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(
@@ -1866,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();
@@ -2008,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,
@@ -2378,7 +2648,7 @@ function extractMethods2(classDecl) {
         continue;
       }
       const params = extractMethodParams2(method.function.params || []);
-      const returnType = extractReturnType2(method.function.returnType);
+      const returnType = extractReturnType(method.function.returnType);
       const isAsync = method.function.async || false;
       methods.push({
         name: methodName,
@@ -2407,7 +2677,7 @@ function extractMethodParams2(params) {
   }
   return result;
 }
-function extractReturnType2(returnType) {
+function extractReturnType(returnType) {
   if (!returnType || !returnType.typeAnnotation) {
     return "any";
   }
@@ -2526,159 +2796,104 @@ ${decoratorsStr}export class ${className} extends _OrcaComponent {
 }`;
 }
 
-// src/plugins/generators/generate_rsc.ts
-import { parseSync as parseSync4 } from "@swc/core";
-function generateRscStub(filePath, code) {
-  const ast = parseSync4(code, {
-    syntax: "typescript",
-    tsx: filePath.endsWith("x"),
-    decorators: true
-  });
-  const serviceInfo = extractServiceInfo2(ast);
-  return generateStubCode2(serviceInfo);
-}
-function extractServiceInfo2(ast) {
-  let serviceClass = null;
-  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 || !serviceClass.identifier) {
-    throw new Error("Service class is undefined");
-  }
-  const className = serviceClass.identifier.value;
-  const methods = extractMethods3(serviceClass);
-  return {
-    className,
-    methods
-  };
-}
-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;
+// src/plugins/generators/generate_rpc.ts
+function generateRpcStub(filePath, code) {
+  try {
+    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
+      };
     }
-    return false;
-  });
-}
-function extractMethods3(classDecl) {
-  const methods = [];
-  for (const member of classDecl.body) {
-    if (member.type === "ClassMethod" && member.accessibility === "public") {
-      const method = member;
-      const methodName = method.key.type === "Identifier" ? method.key.value : "";
-      if (!methodName) {
-        continue;
-      }
-      if (!method.function.async) {
-        throw new Error(
-          `Server action ${classDecl.identifier.value}.${methodName} must be async.`
-        );
-      }
-      const params = extractMethodParams3(method.function.params || []);
-      const returnType = extractReturnType3(method.function.returnType);
-      const isAsync = method.function.async || false;
-      methods.push({
-        name: methodName,
-        params,
-        returnType,
-        isAsync
-      });
+    validateServiceInfo(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
+    };
   }
-  return methods;
 }
-function extractMethodParams3(params) {
-  const result = [];
-  for (const param of params) {
-    if (param.type === "Parameter") {
-      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
-        });
-      }
-    }
+function generateStubCode2(serviceInfo) {
+  const className = serviceInfo.className;
+  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 generateImports2(hasStreamable) {
+  let imports = `import { Injectable } from "@kithinji/orca";
+`;
+  if (hasStreamable) {
+    imports += `import { Observable } from "@kithinji/orca";
+`;
   }
-  return result;
+  return imports;
 }
-function extractReturnType3(returnType) {
-  if (!returnType || !returnType.typeAnnotation) {
-    return "any";
+function generateMethod2(method, basePath, serviceName) {
+  if (method.isStreamable) {
+    return generateSseMethod(method, basePath);
   }
-  const type = returnType.typeAnnotation;
-  if (type.type === "TsTypeReference") {
-    const typeName = type.typeName;
-    if (typeName.type === "Identifier" && typeName.value === "Promise") {
-      if (type.typeParams && type.typeParams.params.length > 0) {
-        return stringifyType4(type.typeParams.params[0]);
-      }
-    }
+  const params = method.params.map((p) => `${p.name}: ${p.type}`).join(", ");
+  const hasParams = method.params.length > 0;
+  if (!hasParams) {
+    return generateGetMethod(method, basePath);
   }
-  return stringifyType4(type);
+  return generatePostMethod(method, basePath, params);
 }
-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 && typeNode.typeParams.params.length > 0) {
-          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}`;
+function generateSseMethod(method, basePath) {
+  const params = method.params.map((p) => `${p.name}: ${p.type}`).join(", ");
+  const hasParams = method.params.length > 0;
+  let urlBuilder;
+  if (hasParams) {
+    const queryParams = method.params.map((p) => `${p.name}=\${encodeURIComponent(${p.name})}`).join("&");
+    urlBuilder = `\`/${basePath}/${method.name}?${queryParams}\``;
+  } else {
+    urlBuilder = `\`/${basePath}/${method.name}\``;
+  }
+  return `  ${method.name}(${params}): Observable<${method.returnType}> {
+    return new Observable((observer) => {
+      const eventSource = new EventSource(${urlBuilder});
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          observer.next(data);
+        } catch (error) {
+          observer.error?.(error);
         }
-        return "";
-      }).filter(Boolean);
-      return `{ ${props.join("; ")} }`;
-    default:
-      return "any";
-  }
+      };
+
+      eventSource.onerror = (error) => {
+        observer.error?.(error);
+        eventSource.close();
+      };
+
+      return () => {
+        eventSource.close();
+      };
+    });
+  }`;
 }
-function generateStubCode2(serviceInfo) {
-  const className = serviceInfo.className;
-  const methods = serviceInfo.methods.map((method) => {
-    const params = method.params.map((p) => `${p.name}: ${p.type}`).join(", ");
-    const paramNames = method.params.map((p) => p.name).join(", ");
-    const asyncKeyword = method.isAsync ? "async " : "";
-    const returnType = method.isAsync ? `Promise<${method.returnType}>` : method.returnType;
-    const hasParams = method.params.length > 0;
-    const bodyParam = hasParams ? `{ ${paramNames} }` : "{}";
-    if (!hasParams) {
-      return `  ${asyncKeyword}${method.name}(${params}): ${returnType} {
-    const response = await fetch(\`/${className}/${method.name}\`, {
+function generateGetMethod(method, basePath) {
+  const params = method.params.map((p) => `${p.name}: ${p.type}`).join(", ");
+  const returnType = `Promise<${method.returnType}>`;
+  return `  async ${method.name}(${params}): ${returnType} {
+    const response = await fetch(\`/${basePath}/${method.name}\`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -2691,14 +2906,17 @@ function generateStubCode2(serviceInfo) {
 
     return response.json();
   }`;
-    }
-    return `  ${asyncKeyword}${method.name}(${params}): ${returnType} {
-    const response = await fetch(\`/${className}/${method.name}\`, {
+}
+function generatePostMethod(method, basePath, params) {
+  const paramNames = method.params.map((p) => p.name).join(", ");
+  const returnType = `Promise<${method.returnType}>`;
+  return `  async ${method.name}(${params}): ${returnType} {
+    const response = await fetch(\`/${basePath}/${method.name}\`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(${bodyParam}),
+      body: JSON.stringify({ ${paramNames} }),
     });
 
     if (!response.ok) {
@@ -2707,13 +2925,6 @@ function generateStubCode2(serviceInfo) {
 
     return response.json();
   }`;
-  }).join("\n\n");
-  return `import { Injectable } from "@kithinji/orca";
-
-@Injectable()
-export class ${className} {
-${methods}
-}`;
 }
 
 // src/plugins/my.ts
@@ -2830,8 +3041,8 @@ var ClientBuildTransformer = class {
     const scSource = generateServerComponent(path15, source);
     return swcTransform(scSource, path15);
   }
-  async transformPublicFileRsc(node, source, path15) {
-    const stubSource = generateRscStub(path15, source);
+  async transformPublicFileRpc(node, source, path15) {
+    const stubSource = generateRpcStub(path15, source);
     return swcTransform(stubSource, path15);
   }
   async transformSharedCode(source, path15) {
@@ -2853,7 +3064,7 @@ var ClientBuildTransformer = class {
       }
     }
     if (directive === "public") {
-      return this.transformPublicFileRsc(node, source, path15);
+      return this.transformPublicFileRpc(node, source, path15);
     }
     if (directive === null) {
       return this.transformSharedCode(source, path15);
@@ -2896,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) {
@@ -3044,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
@@ -3112,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 {
-    await fs5.mkdir("public", { recursive: true });
-    await fs5.copyFile("./src/client/index.html", "./public/index.html");
+    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("\u274C Failed to copy index.html:", 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 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("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;
         }
@@ -3146,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();
       });
     }
@@ -3157,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 {
@@ -3185,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)) || [],
@@ -3201,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();
                 }
               });
             }
@@ -3214,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;
     }
   }
@@ -3245,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");
@@ -3259,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();
 }
 
@@ -3279,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 {
@@ -3456,35 +3933,35 @@ 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");
     }
   }
 }
 function updateModuleWithComponent(moduleContent, componentName) {
-  const className = capitalize(componentName);
+  const className = capitalize2(componentName);
   const importPath = `./component/${componentName}.component`;
   const sourceFile = ts2.createSourceFile(
     "component.module.ts",
@@ -3640,7 +4117,7 @@ function ensureComponentModuleImported(appModuleContent) {
 function ensureInImportsArray(content, sourceFile) {
   return addToDecoratorArray(content, sourceFile, "imports", "ComponentModule");
 }
-function capitalize(str) {
+function capitalize2(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 function createModule() {
@@ -3665,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 || "");
@@ -3683,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);
@@ -3746,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,
@@ -3773,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,
@@ -3814,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;
@@ -3833,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;
@@ -4107,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>
         );
     }
@@ -4134,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";
@@ -4142,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>
@@ -4318,6 +4795,9 @@ export function bootstrap() {
 }
 
 bootstrap();
+
+/* Don't modify */
+export { Navigate, getCurrentInjector } from "@kithinji/orca";
 `;
 }
 function genMainTs() {
@@ -4340,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);
@@ -4391,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 = [];
@@ -4443,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`
     );
@@ -4539,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}
@@ -4665,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 = {
@@ -4736,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 })
   );
@@ -4744,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 }));
@@ -4815,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
@@ -4850,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 = {
@@ -4961,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";
@@ -5218,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) {
@@ -5297,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;
@@ -5323,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;
@@ -5341,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);
         }
       }
     };
@@ -5516,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];
@@ -5578,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.23");
+program.name("pod").description("Pod cli tool").version("1.0.24");
 program.command("new <name>").description("Start a new Orca Project").action(async (name) => {
   await addNew(name);
   const appDir = path14.resolve(process.cwd());