@kithinji/orca 1.0.16 → 1.0.18

package/dist/browser/index.iife.js

@@ -28,13 +28,17 @@ var kithinjiorca = (() => {
   // src/index.browser.ts
   var index_browser_exports = {};
   __export(index_browser_exports, {
+    Actor: () => Actor,
+    ActorModule: () => ActorModule,
     BOOTSTRAP: () => BOOTSTRAP,
     BOOTSTRAP_VNODE: () => BOOTSTRAP_VNODE,
+    BehaviorSubject: () => BehaviorSubject,
     Body: () => Body,
     BrowserFactory: () => BrowserFactory,
     COMPONENT: () => COMPONENT,
     COMPONENT_DEPS: () => COMPONENT_DEPS,
     COMPONENT_PROVIDERS: () => COMPONENT_PROVIDERS,
+    COMPONENT_ROUTE: () => COMPONENT_ROUTE,
     CONTROLLER: () => CONTROLLER,
     CONTROLLERS_KEY: () => CONTROLLERS_KEY,
     CONTROLLER_PREFIX_KEY: () => CONTROLLER_PREFIX_KEY,
@@ -44,6 +48,7 @@ var kithinjiorca = (() => {
     DECLARATIONS_KEY: () => DECLARATIONS_KEY,
     DESIGN_PARAMTYPES: () => DESIGN_PARAMTYPES,
     ERROR_ELEMENT: () => ERROR_ELEMENT,
+    EVENT_HANDLER: () => EVENT_HANDLER,
     EXPORTS_KEY: () => EXPORTS_KEY,
     EXPRESS_ADAPTER_HOST: () => EXPRESS_ADAPTER_HOST,
     Fragment: () => Fragment,
@@ -76,18 +81,28 @@ var kithinjiorca = (() => {
     Param: () => Param,
     Post: () => Post,
     ProviderNormalizer: () => ProviderNormalizer,
+    Query: () => Query,
     RouterModule: () => RouterModule,
     RouterOutlet: () => RouterOutlet,
     SIGNATURE_METADATA_KEY: () => SIGNATURE_METADATA_KEY,
+    SSE_ROUTE: () => SSE_ROUTE,
     Signature: () => Signature,
+    Sse: () => Sse,
+    Subject: () => Subject,
+    Subscribe: () => Subscribe,
     assert$: () => assert$,
     batch: () => batch,
     browser: () => browser_exports,
+    catchError: () => catchError,
     collectAllProvidersFromNode: () => collectAllProvidersFromNode,
     computed: () => computed,
+    concatMap: () => concatMap,
     createComponent: () => createComponent,
     createRoot: () => createRoot,
+    debounceTime: () => debounceTime,
+    distinctUntilChanged: () => distinctUntilChanged,
     effect: () => effect,
+    filter: () => filter,
     from: () => from,
     getCurrentInjector: () => getCurrentInjector,
     getSignatureMetadata: () => getSignatureMetadata,
@@ -101,16 +116,26 @@ var kithinjiorca = (() => {
     isSignal: () => isSignal,
     jsx: () => jsx,
     jsxs: () => jsxs,
+    map: () => map,
+    mergeMap: () => mergeMap,
     observable: () => observable,
     of: () => of,
     parseSignatureSchemas: () => parseSignatureSchemas,
+    reduce: () => reduce,
+    scan: () => scan,
     setCurrentInjector: () => setCurrentInjector,
     shared: () => shared_exports,
     signal: () => signal,
+    skip: () => skip,
     spread: () => spread,
+    startWith: () => startWith,
     style: () => style,
+    switchMap: () => switchMap,
     symbolValueReplacer: () => symbolValueReplacer,
     symbolValueReviver: () => symbolValueReviver,
+    take: () => take,
+    tap: () => tap,
+    throttleTime: () => throttleTime,
     toSignal: () => toSignal,
     untracked: () => untracked
   });
@@ -121,10 +146,13 @@ var kithinjiorca = (() => {
   __export(shared_exports, {
     BOOTSTRAP: () => BOOTSTRAP,
     BOOTSTRAP_VNODE: () => BOOTSTRAP_VNODE,
+    BaseActor: () => BaseActor,
+    BehaviorSubject: () => BehaviorSubject,
     Body: () => Body,
     COMPONENT: () => COMPONENT,
     COMPONENT_DEPS: () => COMPONENT_DEPS,
     COMPONENT_PROVIDERS: () => COMPONENT_PROVIDERS,
+    COMPONENT_ROUTE: () => COMPONENT_ROUTE,
     CONTROLLER: () => CONTROLLER,
     CONTROLLERS_KEY: () => CONTROLLERS_KEY,
     CONTROLLER_PREFIX_KEY: () => CONTROLLER_PREFIX_KEY,
@@ -134,6 +162,7 @@ var kithinjiorca = (() => {
     DECLARATIONS_KEY: () => DECLARATIONS_KEY,
     DESIGN_PARAMTYPES: () => DESIGN_PARAMTYPES,
     ERROR_ELEMENT: () => ERROR_ELEMENT,
+    EVENT_HANDLER: () => EVENT_HANDLER,
     EXPORTS_KEY: () => EXPORTS_KEY,
     EXPRESS_ADAPTER_HOST: () => EXPRESS_ADAPTER_HOST,
     Fragment: () => Fragment,
@@ -151,7 +180,6 @@ var kithinjiorca = (() => {
     Injector: () => Injector,
     Module: () => Module,
     NODE: () => NODE,
-    Navigate: () => Navigate,
     Node: () => Node2,
     ORCA_CLIENT_COMPONENT: () => ORCA_CLIENT_COMPONENT,
     ORCA_ELEMENT_TYPE: () => ORCA_ELEMENT_TYPE,
@@ -166,19 +194,27 @@ var kithinjiorca = (() => {
     Param: () => Param,
     Post: () => Post,
     ProviderNormalizer: () => ProviderNormalizer,
-    RouterModule: () => RouterModule,
-    RouterOutlet: () => RouterOutlet,
+    Query: () => Query,
     SIGNATURE_METADATA_KEY: () => SIGNATURE_METADATA_KEY,
+    SSE_ROUTE: () => SSE_ROUTE,
     Signature: () => Signature,
+    Sse: () => Sse,
     StreamRenderer: () => StreamRenderer,
     StringRenderer: () => StringRenderer,
+    Subject: () => Subject,
+    Subscribe: () => Subscribe,
     VNode: () => VNode,
     assert$: () => assert$,
     batch: () => batch,
+    catchError: () => catchError,
     collectAllProvidersFromNode: () => collectAllProvidersFromNode,
     computed: () => computed,
+    concatMap: () => concatMap,
     createRoot: () => createRoot,
+    debounceTime: () => debounceTime,
+    distinctUntilChanged: () => distinctUntilChanged,
     effect: () => effect,
+    filter: () => filter,
     from: () => from,
     getCurrentInjector: () => getCurrentInjector,
     getSignatureMetadata: () => getSignatureMetadata,
@@ -191,14 +227,24 @@ var kithinjiorca = (() => {
     isSignal: () => isSignal,
     jsx: () => jsx,
     jsxs: () => jsxs,
+    map: () => map,
+    mergeMap: () => mergeMap,
     observable: () => observable,
     of: () => of,
     parseSignatureSchemas: () => parseSignatureSchemas,
+    reduce: () => reduce,
+    scan: () => scan,
     setCurrentInjector: () => setCurrentInjector,
     signal: () => signal,
+    skip: () => skip,
+    startWith: () => startWith,
     store: () => store,
+    switchMap: () => switchMap,
     symbolValueReplacer: () => symbolValueReplacer,
     symbolValueReviver: () => symbolValueReviver,
+    take: () => take,
+    tap: () => tap,
+    throttleTime: () => throttleTime,
     toSignal: () => toSignal,
     untracked: () => untracked
   });
@@ -234,6 +280,7 @@ var kithinjiorca = (() => {
   var COMPONENT = Symbol("orca:component");
   var COMPONENT_PROVIDERS = Symbol("orca:component:providers");
   var COMPONENT_DEPS = Symbol("orca:component:deps");
+  var COMPONENT_ROUTE = Symbol("orca:component:route");
   var INJECT_TOKENS_KEY = Symbol("orca:injectTokens");
   var NODE = Symbol("orca:node");
   var DESIGN_PARAMTYPES = "design:paramtypes";
@@ -244,6 +291,8 @@ var kithinjiorca = (() => {
   var PATH_KEY = Symbol("orca:path");
   var EXPRESS_ADAPTER_HOST = Symbol("orca:express");
   var SIGNATURE_METADATA_KEY = Symbol("orca:signature:schemas");
+  var SSE_ROUTE = Symbol("orca:sse:route");
+  var EVENT_HANDLER = Symbol("orca:event:handler");
   var ERROR_ELEMENT = Symbol.for("orca:error");
   var ORCA_ELEMENT_TYPE = Symbol.for("orca:element");
   var ORCA_FRAGMENT_TYPE = Symbol.for("orca:fragment");
@@ -254,6 +303,10 @@ var kithinjiorca = (() => {
   var HandlerParamType = /* @__PURE__ */ ((HandlerParamType2) => {
     HandlerParamType2["ROUTE_PARAM"] = "ROUTE_PARAM";
     HandlerParamType2["BODY"] = "BODY";
+    HandlerParamType2["QUERY"] = "QUERY";
+    HandlerParamType2["HEADERS"] = "HEADERS";
+    HandlerParamType2["REQUEST"] = "REQUEST";
+    HandlerParamType2["RESPONSE"] = "RESPONSE";
     return HandlerParamType2;
   })(HandlerParamType || {});
   var HttpMethod = /* @__PURE__ */ ((HttpMethod2) => {
@@ -270,7 +323,7 @@ var kithinjiorca = (() => {
       Reflect.defineMetadata(IMPORTS_KEY, params.imports || [], target);
       Reflect.defineMetadata(EXPORTS_KEY, params.exports || [], target);
       Reflect.defineMetadata(CONTROLLERS_KEY, params.controllers || [], target);
-      Reflect.defineMetadata(BOOTSTRAP, params.bootstrap || [], target);
+      Reflect.defineMetadata(BOOTSTRAP, params.bootstrap, target);
     };
   }
   function Injectable() {
@@ -284,8 +337,15 @@ var kithinjiorca = (() => {
       store.update("components", (current) => {
         const next = current ?? /* @__PURE__ */ new Map();
         next.set(target.name, target);
+        if (params.route) {
+          const [pathPattern] = params.route.split("?");
+          next.set(pathPattern, target);
+        }
         return next;
       });
+      if (params.route) {
+        Reflect.defineMetadata(COMPONENT_ROUTE, params.route, target);
+      }
       Reflect.defineMetadata(COMPONENT, true, target);
       Reflect.defineMetadata(COMPONENT_PROVIDERS, params.providers || [], target);
       Reflect.defineMetadata(COMPONENT_DEPS, params.deps || [], target);
@@ -329,6 +389,9 @@ var kithinjiorca = (() => {
   function Body(key) {
     return getHandlerParamDecorator("BODY" /* BODY */, key);
   }
+  function Query(key) {
+    return getHandlerParamDecorator("QUERY" /* QUERY */, key);
+  }
   function getRouteDecorator(httpMethod, path) {
     return function(target, key, descriptor) {
       Reflect.defineMetadata(HTTP_METHOD_KEY, httpMethod, target, key);
@@ -341,6 +404,18 @@ var kithinjiorca = (() => {
   function Post(path) {
     return getRouteDecorator("post" /* POST */, path ?? "");
   }
+  function Sse(path) {
+    return function(target, propertyKey, descriptor) {
+      Reflect.defineMetadata(SSE_ROUTE, true, target, propertyKey);
+      Reflect.defineMetadata(PATH_KEY, path, target, propertyKey);
+      Reflect.defineMetadata(HTTP_METHOD_KEY, "get" /* GET */, target, propertyKey);
+    };
+  }
+  function Subscribe(pattern) {
+    return function(target, propertyKey, descriptor) {
+      Reflect.defineMetadata(EVENT_HANDLER, pattern, target, propertyKey);
+    };
+  }
   function Signature(...schemas) {
     return function(target, propertyKey, descriptor) {
       Reflect.defineMetadata(SIGNATURE_METADATA_KEY, schemas, target, propertyKey);
@@ -488,7 +563,7 @@ var kithinjiorca = (() => {
         const exportedTokens = node.getExports();
         for (const exp of exportedTokens) {
           if (!providedTokens.has(exp)) {
-            errors.push(`\u274C EXPORT ERROR in module "${moduleName}":
+            errors.push(`EXPORT ERROR in module "${moduleName}":
    Exports token "${tokenName(exp)}" but this module does not provide it.
    \u2192 Add it to providers/controllers/declarations, or remove from exports.`);
           }
@@ -496,7 +571,7 @@ var kithinjiorca = (() => {
         const seen = /* @__PURE__ */ new Set();
         for (const token of providedTokens.keys()) {
           if (seen.has(token)) {
-            errors.push(`\u274C DUPLICATE PROVIDER in module "${moduleName}":
+            errors.push(`DUPLICATE PROVIDER in module "${moduleName}":
    Token "${tokenName(token)}" is registered more than once.
    \u2192 Remove duplicate entries.`);
           }
@@ -520,7 +595,7 @@ var kithinjiorca = (() => {
                 suggestion = `
    \u2192 "${missing}" is not provided anywhere. Add a provider for it.`;
               }
-              errors.push(`\u274C UNRESOLVED DEPENDENCY in module "${moduleName}":
+              errors.push(`UNRESOLVED DEPENDENCY in module "${moduleName}":
    "${consumer}" requires "${missing}"${suggestion}`);
             }
           }
@@ -530,14 +605,14 @@ var kithinjiorca = (() => {
             const componentDeps = Reflect.getMetadata(COMPONENT_DEPS, token) || [];
             componentDeps.forEach((depComp) => {
               if (typeof depComp === "function" && !Reflect.getMetadata(COMPONENT, depComp)) {
-                errors.push(`\u274C COMPONENT DEPENDENCY ERROR in module "${moduleName}":
+                errors.push(`COMPONENT DEPENDENCY ERROR in module "${moduleName}":
    Component "${tokenName(token)}" lists "${tokenName(depComp)}" in deps
    \u2192 "${tokenName(depComp)}" is not a component (missing @Component decorator)`);
               }
               if (!providedTokens.has(depComp)) {
                 const providingMod = this.findProvidingModule(depComp, node, allNodes, /* @__PURE__ */ new Set());
                 if (!providingMod) {
-                  errors.push(`\u274C COMPONENT DEPENDENCY ERROR in module "${moduleName}":
+                  errors.push(`COMPONENT DEPENDENCY ERROR in module "${moduleName}":
    Component "${tokenName(token)}" renders "${tokenName(depComp)}"
    \u2192 "${tokenName(depComp)}" must be in declarations or imported`);
                 }
@@ -877,14 +952,14 @@ var kithinjiorca = (() => {
       return "";
     }
     escapeHtml(text) {
-      const map = {
+      const map2 = {
         "&": "&",
         "<": "&lt;",
         ">": "&gt;",
         '"': "&quot;",
         "'": "&#039;"
       };
-      return text.replace(/[&<>"']/g, (m) => map[m]);
+      return text.replace(/[&<>"']/g, (m) => map2[m]);
     }
   };
 
@@ -966,6 +1041,16 @@ var kithinjiorca = (() => {
       } else {
         processedChildren = this.mapChildren(children, injector);
       }
+      if (vnode.type == "a" && restProps["href"]) {
+        const href = restProps["href"];
+        try {
+          new URL(href);
+        } catch {
+          if (!href.startsWith("#") && !href.startsWith("mailto:") && !href.startsWith("tel:")) {
+            restProps["onclick"] = `Orca.navigate(event, '${href}')`;
+          }
+        }
+      }
       return {
         $$typeof: ORCA_ELEMENT_TYPE,
         type: vnode.type,
@@ -1232,10 +1317,11 @@ var kithinjiorca = (() => {
     let value = initialValue;
     const subscribers = /* @__PURE__ */ new Set();
     const notify = () => {
-      if (batchDepth > 0) {
-        subscribers.forEach((sub) => pendingEffects.add(sub));
-      } else {
-        subscribers.forEach((sub) => sub.execute());
+      subscribers.forEach((sub) => pendingEffects.add(sub));
+      if (batchDepth === 0) {
+        const effects = Array.from(pendingEffects);
+        pendingEffects.clear();
+        effects.forEach((effect2) => effect2.execute());
       }
     };
     return {
@@ -1355,67 +1441,40 @@ var kithinjiorca = (() => {
     constructor(producer) {
       this.producer = producer;
       this.__isObservable = true;
-      this.subscribers = /* @__PURE__ */ new Set();
-    }
-    get $value() {
-      return this._value;
-    }
-    setValue(newValue) {
-      this._value = newValue;
     }
     subscribe(observerOrNext, error, complete) {
       const observer = typeof observerOrNext === "function" ? { next: observerOrNext, error, complete } : observerOrNext;
-      this.subscribers.add(observer);
       let cleanup;
+      let isUnsubscribed = false;
       if (this.producer) {
         try {
           cleanup = this.producer(observer);
         } catch (err) {
           if (observer.error) {
-            observer.error(err);
+            try {
+              observer.error(err);
+            } catch (e) {
+              console.error("Error in error handler during subscription:", e);
+            }
+          } else {
+            throw err;
           }
         }
       }
       return {
         unsubscribe: () => {
-          this.subscribers.delete(observer);
-          if (cleanup)
-            cleanup();
-        }
-      };
-    }
-    next(value) {
-      this.setValue(value);
-      this.subscribers.forEach((observer) => {
-        try {
-          observer.next(value);
-        } catch (err) {
-          console.error("Error in observer:", err);
-        }
-      });
-    }
-    error(err) {
-      this.subscribers.forEach((observer) => {
-        if (observer.error) {
-          try {
-            observer.error(err);
-          } catch (e) {
-            console.error("Error in error handler:", e);
-          }
-        }
-      });
-    }
-    complete() {
-      this.subscribers.forEach((observer) => {
-        if (observer.complete) {
-          try {
-            observer.complete();
-          } catch (err) {
-            console.error("Error in complete handler:", err);
+          if (isUnsubscribed)
+            return;
+          isUnsubscribed = true;
+          if (cleanup) {
+            try {
+              cleanup();
+            } catch (err) {
+              console.error("Error during cleanup:", err);
+            }
           }
         }
-      });
-      this.subscribers.clear();
+      };
     }
     pipe(...operations) {
       if (operations.length === 0) {
@@ -1426,10 +1485,14 @@ var kithinjiorca = (() => {
   };
   function from(iterable) {
     return new Observable((observer) => {
-      for (const value of iterable) {
-        observer.next(value);
+      try {
+        for (const value of iterable) {
+          observer.next(value);
+        }
+        observer.complete?.();
+      } catch (err) {
+        observer.error?.(err);
       }
-      observer.complete?.();
     });
   }
   function interval(ms) {
@@ -1443,8 +1506,12 @@ var kithinjiorca = (() => {
   }
   function of(...values) {
     return new Observable((observer) => {
-      values.forEach((value) => observer.next(value));
-      observer.complete?.();
+      try {
+        values.forEach((value) => observer.next(value));
+        observer.complete?.();
+      } catch (err) {
+        observer.error?.(err);
+      }
     });
   }
   function observable(producer) {
@@ -1455,19 +1522,494 @@ var kithinjiorca = (() => {
     const subst = obs.subscribe((val) => {
       sig.value = val;
     });
-    instance.__cleanup = [...instance.__cleanup ?? [], () => subst.unsubscribe()];
+    instance.__cleanup = [
+      ...instance.__cleanup || [],
+      () => subst.unsubscribe()
+    ];
     return sig;
   }
   function isObservable(value) {
     return value && value.__isObservable === true;
   }
+  function map(fn) {
+    return (source) => {
+      return new Observable((observer) => {
+        const subscription = source.subscribe(
+          (value) => {
+            try {
+              observer.next(fn(value));
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function filter(predicate) {
+    return (source) => {
+      return new Observable((observer) => {
+        const subscription = source.subscribe(
+          (value) => {
+            try {
+              if (predicate(value)) {
+                observer.next(value);
+              }
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function tap(fn) {
+    return (source) => {
+      return new Observable((observer) => {
+        const subscription = source.subscribe(
+          (value) => {
+            try {
+              fn(value);
+              observer.next(value);
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function take(count) {
+    return (source) => {
+      return new Observable((observer) => {
+        let taken = 0;
+        const subscription = source.subscribe(
+          (value) => {
+            if (taken < count) {
+              observer.next(value);
+              taken++;
+              if (taken === count) {
+                observer.complete?.();
+                subscription.unsubscribe();
+              }
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function skip(count) {
+    return (source) => {
+      return new Observable((observer) => {
+        let skipped = 0;
+        const subscription = source.subscribe(
+          (value) => {
+            if (skipped < count) {
+              skipped++;
+            } else {
+              observer.next(value);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function debounceTime(ms) {
+    return (source) => {
+      return new Observable((observer) => {
+        let timeoutId;
+        const subscription = source.subscribe(
+          (value) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+              observer.next(value);
+            }, ms);
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => {
+          clearTimeout(timeoutId);
+          subscription.unsubscribe();
+        };
+      });
+    };
+  }
+  function throttleTime(ms) {
+    return (source) => {
+      return new Observable((observer) => {
+        let lastEmit = 0;
+        const subscription = source.subscribe(
+          (value) => {
+            const now = Date.now();
+            if (now - lastEmit >= ms) {
+              lastEmit = now;
+              observer.next(value);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function distinctUntilChanged(compare) {
+    return (source) => {
+      return new Observable((observer) => {
+        let hasLast = false;
+        let last;
+        const subscription = source.subscribe(
+          (value) => {
+            const isDistinct = !hasLast || (compare ? !compare(last, value) : last !== value);
+            if (isDistinct) {
+              hasLast = true;
+              last = value;
+              observer.next(value);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function switchMap(fn) {
+    return (source) => {
+      return new Observable((observer) => {
+        let innerSubscription = null;
+        const outerSubscription = source.subscribe(
+          (value) => {
+            if (innerSubscription) {
+              innerSubscription.unsubscribe();
+            }
+            try {
+              const innerObservable = fn(value);
+              innerSubscription = innerObservable.subscribe(
+                (innerValue) => observer.next(innerValue),
+                (err) => observer.error?.(err)
+              );
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => {
+          if (innerSubscription) {
+            innerSubscription.unsubscribe();
+          }
+          outerSubscription.unsubscribe();
+        };
+      });
+    };
+  }
+  function mergeMap(fn) {
+    return (source) => {
+      return new Observable((observer) => {
+        const innerSubscriptions = [];
+        let outerComplete = false;
+        let activeCount = 0;
+        const checkComplete = () => {
+          if (outerComplete && activeCount === 0) {
+            observer.complete?.();
+          }
+        };
+        const outerSubscription = source.subscribe(
+          (value) => {
+            try {
+              const innerObservable = fn(value);
+              activeCount++;
+              const innerSub = innerObservable.subscribe(
+                (innerValue) => observer.next(innerValue),
+                (err) => observer.error?.(err),
+                () => {
+                  activeCount--;
+                  checkComplete();
+                }
+              );
+              innerSubscriptions.push(innerSub);
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => {
+            outerComplete = true;
+            checkComplete();
+          }
+        );
+        return () => {
+          innerSubscriptions.forEach((sub) => sub.unsubscribe());
+          outerSubscription.unsubscribe();
+        };
+      });
+    };
+  }
+  function concatMap(fn) {
+    return (source) => {
+      return new Observable((observer) => {
+        const queue = [];
+        let innerSubscription = null;
+        let outerComplete = false;
+        let isProcessing = false;
+        const processNext = () => {
+          if (isProcessing || queue.length === 0) {
+            if (outerComplete && queue.length === 0) {
+              observer.complete?.();
+            }
+            return;
+          }
+          isProcessing = true;
+          const value = queue.shift();
+          try {
+            const innerObservable = fn(value);
+            innerSubscription = innerObservable.subscribe(
+              (innerValue) => observer.next(innerValue),
+              (err) => observer.error?.(err),
+              () => {
+                isProcessing = false;
+                processNext();
+              }
+            );
+          } catch (err) {
+            observer.error?.(err);
+          }
+        };
+        const outerSubscription = source.subscribe(
+          (value) => {
+            queue.push(value);
+            processNext();
+          },
+          (err) => observer.error?.(err),
+          () => {
+            outerComplete = true;
+            if (queue.length === 0 && !isProcessing) {
+              observer.complete?.();
+            }
+          }
+        );
+        return () => {
+          if (innerSubscription) {
+            innerSubscription.unsubscribe();
+          }
+          outerSubscription.unsubscribe();
+        };
+      });
+    };
+  }
+  function catchError(handler) {
+    return (source) => {
+      return new Observable((observer) => {
+        const subscription = source.subscribe(
+          (value) => observer.next(value),
+          (err) => {
+            try {
+              const fallback = handler(err);
+              const fallbackSub = fallback.subscribe(
+                (value) => observer.next(value),
+                (e) => observer.error?.(e),
+                () => observer.complete?.()
+              );
+              subscription.__fallback = fallbackSub;
+            } catch (e) {
+              observer.error?.(e);
+            }
+          },
+          () => observer.complete?.()
+        );
+        return () => {
+          if (subscription.__fallback) {
+            subscription.__fallback.unsubscribe();
+          }
+          subscription.unsubscribe();
+        };
+      });
+    };
+  }
+  function startWith(...values) {
+    return (source) => {
+      return new Observable((observer) => {
+        values.forEach((value) => observer.next(value));
+        const subscription = source.subscribe(
+          (value) => observer.next(value),
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function scan(accumulator, seed) {
+    return (source) => {
+      return new Observable((observer) => {
+        let acc = seed;
+        const subscription = source.subscribe(
+          (value) => {
+            try {
+              acc = accumulator(acc, value);
+              observer.next(acc);
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => observer.complete?.()
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+  function reduce(accumulator, seed) {
+    return (source) => {
+      return new Observable((observer) => {
+        let acc = seed;
+        const subscription = source.subscribe(
+          (value) => {
+            try {
+              acc = accumulator(acc, value);
+            } catch (err) {
+              observer.error?.(err);
+            }
+          },
+          (err) => observer.error?.(err),
+          () => {
+            observer.next(acc);
+            observer.complete?.();
+          }
+        );
+        return () => subscription.unsubscribe();
+      });
+    };
+  }
+
+  // src/shared/observable/subject.ts
+  var Subject = class extends Observable {
+    constructor() {
+      super();
+      this.subscribers = /* @__PURE__ */ new Set();
+      this._isCompleted = false;
+      this._hasError = false;
+    }
+    subscribe(observerOrNext, error, complete) {
+      if (this._isCompleted) {
+        const obs = typeof observerOrNext === "function" ? { complete } : observerOrNext;
+        obs.complete?.();
+        return { unsubscribe: () => {
+        } };
+      }
+      if (this._hasError) {
+        return { unsubscribe: () => {
+        } };
+      }
+      const observer = typeof observerOrNext === "function" ? { next: observerOrNext, error, complete } : observerOrNext;
+      this.subscribers.add(observer);
+      return {
+        unsubscribe: () => {
+          this.subscribers.delete(observer);
+        }
+      };
+    }
+    next(value) {
+      if (this._isCompleted || this._hasError)
+        return;
+      const currentSubscribers = Array.from(this.subscribers);
+      currentSubscribers.forEach((observer) => {
+        if (this.subscribers.has(observer)) {
+          try {
+            observer.next(value);
+          } catch (err) {
+            console.error("Error in observer:", err);
+          }
+        }
+      });
+    }
+    error(err) {
+      if (this._isCompleted || this._hasError)
+        return;
+      this._hasError = true;
+      const currentSubscribers = Array.from(this.subscribers);
+      currentSubscribers.forEach((observer) => {
+        if (observer.error) {
+          try {
+            observer.error(err);
+          } catch (e) {
+            console.error("Error in error handler:", e);
+          }
+        }
+      });
+      this.subscribers.clear();
+    }
+    complete() {
+      if (this._isCompleted || this._hasError)
+        return;
+      this._isCompleted = true;
+      const currentSubscribers = Array.from(this.subscribers);
+      currentSubscribers.forEach((observer) => {
+        if (observer.complete) {
+          try {
+            observer.complete();
+          } catch (err) {
+            console.error("Error in complete handler:", err);
+          }
+        }
+      });
+      this.subscribers.clear();
+    }
+  };
+
+  // src/shared/observable/bsubject.ts
+  var BehaviorSubject = class extends Subject {
+    constructor(initialValue) {
+      super();
+      this._value = initialValue;
+    }
+    get $value() {
+      return this._value;
+    }
+    setValue(value) {
+      this._value = value;
+    }
+    next(value) {
+      this._value = value;
+      super.next(value);
+    }
+    subscribe(observerOrNext, error, complete) {
+      const observer = typeof observerOrNext === "function" ? { next: observerOrNext, error, complete } : observerOrNext;
+      try {
+        observer.next(this._value);
+      } catch (err) {
+        if (observer.error) {
+          observer.error(err);
+        }
+      }
+      return super.subscribe(observer);
+    }
+  };
 
   // src/shared/component.ts
   var OrcaComponent = class {
     constructor() {
       this.__cleanup = [];
     }
-    onDestory() {
+    onDestroy() {
       this.__cleanup.forEach((cb) => cb());
     }
     pushDrop(fn) {
@@ -1475,7 +2017,7 @@ var kithinjiorca = (() => {
     }
   };
 
-  // src/shared/module_libs/router_module/navigate.ts
+  // src/shared/module_libs/http_client/module.ts
   var __decorate = function(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -1486,162 +2028,6 @@ var kithinjiorca = (() => {
           r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-  var __metadata = function(k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-      return Reflect.metadata(k, v);
-  };
-  var __param = function(paramIndex, decorator) {
-    return function(target, key) {
-      decorator(target, key, paramIndex);
-    };
-  };
-  var Navigate = class Navigate2 {
-    constructor(oscUrl) {
-      this.oscUrl = oscUrl;
-      this.pages = from([]);
-      this.cursor = 0;
-      const initialState = history.state?.cursor ?? 0;
-      this.cursor = initialState;
-      if (!history.state) {
-        history.replaceState({ cursor: 0 }, "");
-      }
-      window.addEventListener("popstate", (e) => {
-        const newIndex = e.state?.cursor ?? 0;
-        this.cursor = newIndex;
-        this.pages.next([...this.pages.$value || []]);
-      });
-    }
-    getHome() {
-      const http = new HttpClient();
-      return http.post(this.oscUrl, {
-        stream: "ndjson",
-        reviver: symbolValueReviver
-      });
-    }
-    push(component) {
-      const currentPages = this.pages.$value || [];
-      const newPages = currentPages.slice(0, this.cursor + 1);
-      this.cursor++;
-      newPages.push(component);
-      history.pushState({ cursor: this.cursor }, "");
-      this.pages.next(newPages);
-    }
-    replace(component) {
-      const currentPages = [...this.pages.$value || []];
-      currentPages[this.cursor] = component;
-      history.replaceState({ cursor: this.cursor }, "");
-      this.pages.next(currentPages);
-    }
-    goBack() {
-      if (this.cursor > 0) {
-        history.back();
-      }
-    }
-    goForward() {
-      const currentPages = this.pages.$value || [];
-      if (this.cursor < currentPages.length - 1) {
-        history.forward();
-      }
-    }
-    canGoBack() {
-      return this.cursor > 0;
-    }
-    canGoForward() {
-      const currentPages = this.pages.$value || [];
-      return this.cursor < currentPages.length - 1;
-    }
-    getCurrentPage() {
-      const currentPages = this.pages.$value || [];
-      return currentPages[this.cursor];
-    }
-    clear() {
-      this.cursor = 0;
-      this.pages.next([]);
-      history.replaceState({ cursor: 0 }, "");
-    }
-  };
-  Navigate = __decorate([
-    __param(0, Inject("OSC_URL", { maybe: true })),
-    __metadata("design:paramtypes", [String])
-  ], Navigate);
-
-  // src/shared/module_libs/router_module/outlet.ts
-  var __decorate2 = function(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if (d = decorators[i])
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
-  var __metadata2 = function(k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-      return Reflect.metadata(k, v);
-  };
-  var _a;
-  var RouterOutlet = class RouterOutlet2 extends OrcaComponent {
-    constructor(navigate) {
-      super();
-      this.navigate = navigate;
-    }
-    build() {
-      const anchor = document.createElement("div");
-      const root = document.createElement("div");
-      anchor.appendChild(root);
-      const osc = new OSC(root);
-      const stream = this.navigate.getHome();
-      const streamSubscription = stream.subscribe((jsx2) => {
-        const action = jsx2.action || "insert";
-        if (action === "insert") {
-          osc.handleInsert(jsx2);
-        } else if (action === "update") {
-          osc.handleUpdate(jsx2);
-        } else {
-          console.warn(`Unknown action: ${action}`);
-        }
-      }, () => {
-      }, () => {
-        this.navigate.pages.setValue([osc.tree.dom]);
-      });
-      const subscription = this.navigate.pages.subscribe((pages) => {
-        const top = pages[this.navigate.cursor];
-        anchor.replaceChildren(top);
-      });
-      this.pushDrop(() => subscription.unsubscribe());
-      this.pushDrop(() => streamSubscription.unsubscribe());
-      return anchor;
-    }
-  };
-  RouterOutlet = __decorate2([
-    Component(),
-    __metadata2("design:paramtypes", [typeof (_a = typeof Navigate !== "undefined" && Navigate) === "function" ? _a : Object])
-  ], RouterOutlet);
-
-  // src/shared/module_libs/router_module/module.ts
-  var RouterModule = class _RouterModule {
-    static forRoot() {
-      return {
-        module: _RouterModule,
-        declarations: [RouterOutlet],
-        providers: [Navigate],
-        exports: [Navigate, RouterOutlet]
-      };
-    }
-  };
-
-  // src/shared/module_libs/http_client/module.ts
-  var __decorate3 = function(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if (d = decorators[i])
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
   var HttpClient = class HttpClient2 {
     get(url, { stream = "json", reviver, init } = {}) {
       return new Observable((subscriber) => {
@@ -1765,12 +2151,12 @@ var kithinjiorca = (() => {
       });
     }
   };
-  HttpClient = __decorate3([
+  HttpClient = __decorate([
     Injectable()
   ], HttpClient);
   var HttpClientModule = class HttpClientModule2 {
   };
-  HttpClientModule = __decorate3([
+  HttpClientModule = __decorate([
     Module({
       providers: [HttpClient],
       exports: [HttpClient]
@@ -2029,47 +2415,415 @@ var kithinjiorca = (() => {
     return context?.factory.createStringLiteral("assert");
   }
 
+  // src/shared/providers/actor.ts
+  var BaseActor = class {
+    constructor() {
+      this.mailbox = [];
+      this.isProcessing = false;
+      this.subscribers = /* @__PURE__ */ new Map();
+    }
+    receive(message) {
+      this.mailbox.push(message);
+      this.process();
+    }
+    subscribe(tag, handler) {
+      if (!this.subscribers.has(tag)) {
+        this.subscribers.set(tag, []);
+      }
+      this.subscribers.get(tag).push(handler);
+    }
+    unsubscribe(tag, handler) {
+      const handlers = this.subscribers.get(tag);
+      if (handlers) {
+        const index = handlers.indexOf(handler);
+        if (index > -1) {
+          handlers.splice(index, 1);
+        }
+      }
+    }
+    async process() {
+      if (this.isProcessing)
+        return;
+      this.isProcessing = true;
+      while (this.mailbox.length > 0) {
+        const message = this.mailbox.shift();
+        const handlers = this.subscribers.get(message.event);
+        if (handlers) {
+          for (const handler of handlers) {
+            await handler(message);
+          }
+        }
+      }
+      this.isProcessing = false;
+    }
+  };
+
   // src/browser/index.ts
   var browser_exports = {};
   __export(browser_exports, {
+    Actor: () => Actor,
+    ActorModule: () => ActorModule,
     BrowserFactory: () => BrowserFactory,
+    Navigate: () => Navigate,
+    RouterModule: () => RouterModule,
+    RouterOutlet: () => RouterOutlet,
     createComponent: () => createComponent,
     insert: () => insert,
     spread: () => spread,
     style: () => style
   });
 
+  // src/browser/modules/actor/actor.ts
+  var import_socket = __require("socket.io-client");
+  var __decorate2 = function(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if (d = decorators[i])
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var __metadata = function(k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+      return Reflect.metadata(k, v);
+  };
+  var Actor = class Actor2 extends BaseActor {
+    constructor() {
+      super();
+      this.pending = [];
+      this.socket = (0, import_socket.io)();
+      this.socket.on("connect", () => {
+        this.flushPending();
+      });
+      this.socket.on("message", (message) => {
+        this.receive(message);
+      });
+    }
+    send(to, message) {
+      const payload = {
+        to,
+        from: this.socket.id,
+        ...message
+      };
+      if (this.socket.connected && this.socket.id) {
+        this.socket.emit("message", payload);
+      } else {
+        this.pending.push(payload);
+      }
+    }
+    flushPending() {
+      if (!this.socket.id)
+        return;
+      for (const msg of this.pending) {
+        msg.from = this.socket.id;
+        this.socket.emit("message", msg);
+      }
+      this.pending = [];
+    }
+  };
+  Actor = __decorate2([
+    Injectable(),
+    __metadata("design:paramtypes", [])
+  ], Actor);
+  var ActorModule = class _ActorModule {
+    static forRoot() {
+      return {
+        module: _ActorModule,
+        providers: [
+          {
+            provide: Actor,
+            useClass: Actor,
+            eager: true
+          }
+        ],
+        exports: [Actor]
+      };
+    }
+  };
+
+  // src/browser/modules/router_module/navigate.ts
+  var __decorate3 = function(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if (d = decorators[i])
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var __metadata2 = function(k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+      return Reflect.metadata(k, v);
+  };
+  var __param = function(paramIndex, decorator) {
+    return function(target, key) {
+      decorator(target, key, paramIndex);
+    };
+  };
+  var Navigate = class Navigate2 {
+    constructor(oscUrl) {
+      this.oscUrl = oscUrl;
+      this.cursor = 0;
+      const initialStream = this.createStreamForCurrentUrl();
+      this.pages = new BehaviorSubject([initialStream]);
+      history.replaceState({ cursor: 0 }, "");
+      window.addEventListener("popstate", (e) => {
+        const newIndex = e.state?.cursor ?? 0;
+        this.cursor = newIndex;
+        this.pages.next([...this.pages.$value || []]);
+      });
+    }
+    createStreamForCurrentUrl() {
+      const http = new HttpClient();
+      let url = this.oscUrl;
+      const path = window.location.pathname;
+      const search = window.location.search;
+      if (path !== "/") {
+        const fullRoute = search ? `${path}${search}` : path;
+        url = `${this.oscUrl}?c=${encodeURIComponent(fullRoute)}`;
+      }
+      return http.post(url, {
+        stream: "ndjson",
+        reviver: symbolValueReviver
+      });
+    }
+    go(path) {
+      const http = new HttpClient();
+      const stream = http.post(`${this.oscUrl}?c=${path}`, {
+        stream: "ndjson",
+        reviver: symbolValueReviver
+      });
+      stream.__route = path;
+      this.push(stream);
+    }
+    push(item) {
+      const currentPages = this.pages.$value || [];
+      const newPages = currentPages.slice(0, this.cursor + 1);
+      let route = "";
+      if (item && typeof item === "object" && "__route" in item) {
+        route = item.__route;
+      }
+      this.cursor++;
+      newPages.push(item);
+      history.pushState({ cursor: this.cursor }, "", route);
+      this.pages.next(newPages);
+    }
+    replace(item) {
+      const currentPages = [...this.pages.$value || []];
+      currentPages[this.cursor] = item;
+      history.replaceState({ cursor: this.cursor }, "");
+      this.pages.next(currentPages);
+    }
+    resolveStream(index, element) {
+      const currentPages = [...this.pages.$value || []];
+      if (index >= 0 && index < currentPages.length) {
+        currentPages[index] = element;
+        this.pages.next(currentPages);
+      }
+    }
+    goBack() {
+      if (this.cursor > 0) {
+        history.back();
+      }
+    }
+    goForward() {
+      const currentPages = this.pages.$value || [];
+      if (this.cursor < currentPages.length - 1) {
+        history.forward();
+      }
+    }
+    canGoBack() {
+      return this.cursor > 0;
+    }
+    canGoForward() {
+      const currentPages = this.pages.$value || [];
+      return this.cursor < currentPages.length - 1;
+    }
+    getCurrentPage() {
+      const currentPages = this.pages.$value || [];
+      return currentPages[this.cursor];
+    }
+    clear() {
+      this.cursor = 0;
+      this.pages.next([]);
+      history.replaceState({ cursor: 0 }, "");
+    }
+  };
+  Navigate = __decorate3([
+    __param(0, Inject("OSC_URL", { maybe: true })),
+    __metadata2("design:paramtypes", [String])
+  ], Navigate);
+
+  // src/browser/modules/router_module/outlet.ts
+  var __decorate4 = function(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if (d = decorators[i])
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var __metadata3 = function(k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+      return Reflect.metadata(k, v);
+  };
+  var _a;
+  var RouterOutlet = class RouterOutlet2 extends OrcaComponent {
+    constructor(navigate) {
+      super();
+      this.navigate = navigate;
+      this.activeStreamSubscription = null;
+    }
+    build() {
+      const anchor = document.createElement("div");
+      const subscription = this.navigate.pages.subscribe((pages) => {
+        this.renderCurrentPage(anchor, pages);
+      });
+      this.pushDrop(() => subscription.unsubscribe());
+      this.pushDrop(() => {
+        if (this.activeStreamSubscription) {
+          this.activeStreamSubscription.unsubscribe();
+        }
+      });
+      return anchor;
+    }
+    renderCurrentPage(anchor, pages) {
+      const currentItem = pages[this.navigate.cursor];
+      if (!currentItem) {
+        anchor.replaceChildren();
+        return;
+      }
+      if (this.activeStreamSubscription) {
+        this.activeStreamSubscription.unsubscribe();
+        this.activeStreamSubscription = null;
+      }
+      if (this.isObservable(currentItem)) {
+        this.renderStream(anchor, currentItem);
+      } else {
+        anchor.replaceChildren(currentItem);
+      }
+    }
+    renderStream(anchor, stream) {
+      const root = document.createElement("div");
+      anchor.replaceChildren(root);
+      const osc = new OSC(root);
+      this.activeStreamSubscription = stream.subscribe((jsx2) => {
+        const action = jsx2.action || "insert";
+        if (action === "insert") {
+          osc.handleInsert(jsx2);
+        } else if (action === "update") {
+          osc.handleUpdate(jsx2);
+        } else {
+          console.warn(`Unknown action: ${action}`);
+        }
+      }, (error) => {
+        console.error("Stream error:", error);
+      }, () => {
+        const resolvedElement = osc.tree.dom;
+        this.navigate.resolveStream(this.navigate.cursor, resolvedElement);
+        this.activeStreamSubscription = null;
+      });
+    }
+    isObservable(obj) {
+      return obj && typeof obj.subscribe === "function";
+    }
+  };
+  RouterOutlet = __decorate4([
+    Component(),
+    __metadata3("design:paramtypes", [typeof (_a = typeof Navigate !== "undefined" && Navigate) === "function" ? _a : Object])
+  ], RouterOutlet);
+
+  // src/browser/modules/router_module/module.ts
+  var RouterModule = class _RouterModule {
+    static forRoot() {
+      return {
+        module: _RouterModule,
+        declarations: [RouterOutlet],
+        providers: [Navigate],
+        exports: [Navigate, RouterOutlet]
+      };
+    }
+  };
+
   // src/browser/factory.ts
-  var BrowserFactory = class {
-    static create(rootModule, rootElement) {
-      const compiler = new Compiler();
-      const appNode = compiler.compile(rootModule);
-      const validation = compiler.validate(appNode);
+  var CompilationService = class {
+    constructor() {
+      this.compiler = new Compiler();
+    }
+    compileAndValidate(rootModule) {
+      const appNode = this.compiler.compile(rootModule);
+      const validation = this.compiler.validate(appNode);
       if (!validation.valid) {
-        throw new Error(
-          "\u274C Validation failed:\n" + validation.errors.join("\n\n")
-        );
+        throw new Error("Validation failed:\n" + validation.errors.join("\n\n"));
       }
+      return appNode;
+    }
+  };
+  var InjectorConfigurationService = class {
+    static createRootInjector(appNode) {
       const allProviders = collectAllProvidersFromNode(appNode);
-      const rootInjector = new Injector([
+      return new Injector([
         ...allProviders,
         {
           provide: "OSC_URL",
           useValue: "/osc"
+        },
+        {
+          provide: Actor,
+          useClass: Actor,
+          eager: true
+        },
+        {
+          provide: HttpClient,
+          useClass: HttpClient
         }
       ]);
-      setCurrentInjector(rootInjector);
+    }
+    static instantiateEagerProviders(appNode, injector) {
       appNode.traverse((node) => {
         const providers = [...node.getProviders().values()];
-        providers.filter((provider) => provider.eager).forEach((p) => rootInjector.resolve(p.provide));
+        providers.filter((provider) => provider.eager).forEach((p) => injector.resolve(p.provide));
       });
+    }
+  };
+  var BootstrapService = class {
+    static getBootstrapComponent(rootModule) {
       const bootstrap = Reflect.getMetadata(BOOTSTRAP, rootModule);
-      const instance = rootInjector.resolve(bootstrap);
-      instance.__injector = rootInjector;
+      if (!bootstrap) {
+        throw new Error(`No bootstrap component found. Ensure the root module has a @Bootstrap() decorator.`);
+      }
+      return bootstrap;
+    }
+    static renderBootstrap(bootstrap, injector, rootElement) {
+      const instance = injector.resolve(bootstrap);
+      instance.__injector = injector;
       const childDom = instance.build();
       rootElement.appendChild(childDom);
     }
   };
+  var BrowserFactory = class {
+    /**
+     * Creates and bootstraps the application in the browser
+     *
+     * @param rootModule - The root module of the application
+     * @param rootElement - The DOM element to mount the application to
+     * @throws {Error} If validation fails or bootstrap component is not found
+     */
+    static create(rootModule, rootElement) {
+      const compilationService = new CompilationService();
+      const appNode = compilationService.compileAndValidate(rootModule);
+      const rootInjector = InjectorConfigurationService.createRootInjector(appNode);
+      setCurrentInjector(rootInjector);
+      InjectorConfigurationService.instantiateEagerProviders(appNode, rootInjector);
+      const bootstrap = BootstrapService.getBootstrapComponent(rootModule);
+      BootstrapService.renderBootstrap(bootstrap, rootInjector, rootElement);
+    }
+  };
 
   // src/browser/dom/dom.ts
   var elementEffects = /* @__PURE__ */ new WeakMap();
@@ -2165,12 +2919,6 @@ var kithinjiorca = (() => {
         attach(value.value);
       });
       registerEffect(parent, cleanup);
-    } else if (isObservable(value)) {
-      const obs = value;
-      const subst = obs.subscribe((val) => {
-        attach(val);
-      });
-      registerEffect(parent, () => subst.unsubscribe());
     } else if (typeof value == "function") {
       const cleanup = effect(() => {
         attach(value());
@@ -2207,21 +2955,30 @@ var kithinjiorca = (() => {
     try {
       instance = injector.resolve(ComponentClass);
     } catch (e) {
-      throw new Error(e.message);
+      console.log(e);
+      throw new Error(`Failed to resolve component ${ComponentClass.name}: ${e.message}`);
     }
     const localProviders = Reflect.getMetadata(COMPONENT_PROVIDERS, ComponentClass) || [];
     if (localProviders.length > 0) {
-      injector = new Injector(localProviders.map((p) => ProviderNormalizer.normalize(p)), parentComponent.__injector);
+      injector = new Injector(localProviders.map((p) => ProviderNormalizer.normalize(p)), parentComponent.__injector || injector);
       instance.__injector = injector;
+    } else {
+      instance.__injector = injector;
+    }
+    const routePattern = Reflect.getMetadata(COMPONENT_ROUTE, ComponentClass);
+    let builtRoute = null;
+    if (routePattern) {
+      builtRoute = buildRouteFromProps(routePattern, props, ComponentClass.name);
     }
     instance.props = props;
     const root = instance.build();
     if (!(root instanceof Node)) {
-      throw new Error("Root is not instance of node");
+      throw new Error(`Component ${ComponentClass.name}.build() must return a DOM Node`);
     }
+    root.__route = builtRoute;
     const cleanup = () => {
       instance.__cleanup?.forEach((cb) => cb());
-      instance.onDestory?.();
+      instance.onDestroy?.();
     };
     if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
       const firstChild = root.firstChild;
@@ -2233,6 +2990,41 @@ var kithinjiorca = (() => {
     }
     return root;
   }
+  function buildRouteFromProps(routePattern, props, componentName) {
+    const [pathPattern, queryPattern] = routePattern.split("?");
+    let path = pathPattern;
+    const pathParams = pathPattern.match(/:(\w+)/g);
+    if (pathParams) {
+      for (const param of pathParams) {
+        const paramName = param.slice(1);
+        const paramValue = props[paramName];
+        if (paramValue === void 0 || paramValue === null) {
+          throw new Error(`Missing required prop "${paramName}" for route parameter in component ${componentName}. Route pattern: "${routePattern}"`);
+        }
+        path = path.replace(param, encodeURIComponent(String(paramValue)));
+      }
+    }
+    if (queryPattern) {
+      const queryParams = queryPattern.split("&").filter(Boolean);
+      const queryParts = [];
+      for (const param of queryParams) {
+        const isOptional = param.endsWith("*");
+        const paramName = isOptional ? param.slice(0, -1) : param;
+        const paramValue = props[paramName];
+        if (paramValue === void 0 || paramValue === null) {
+          if (!isOptional) {
+            throw new Error(`Missing required prop "${paramName}" for query parameter in component ${componentName}. Route pattern: "${routePattern}"`);
+          }
+          continue;
+        }
+        queryParts.push(`${encodeURIComponent(paramName)}=${encodeURIComponent(String(paramValue))}`);
+      }
+      if (queryParts.length > 0) {
+        path += "?" + queryParts.join("&");
+      }
+    }
+    return path;
+  }
   function style(el, styleObj) {
     if (typeof styleObj === "function") {
       const cleanup = effect(() => {