rask-ui 0.12.5 → 0.13.0

package/README.md

@@ -25,10 +25,10 @@ npm run dev
 ## Quick Example
 
 ```tsx
-import { createState, render } from "rask-ui";
+import { useState, render } from "rask-ui";
 
 function Counter() {
-  const state = createState({ count: 0 });
+  const state = useState({ count: 0 });
 
   return () => (
     <div>
@@ -41,17 +41,17 @@ function Counter() {
 render(<Counter />, document.getElementById("app"));
 ```
 
-## Reactive Primitives
+## Reactive Hooks
 
-RASK provides a set of reactive primitives for building interactive UIs:
+RASK provides a set of reactive hooks for building interactive UIs. These hooks are bound to components like in React, but they are reactive:
 
-- **`createState`** - Create reactive state objects
-- **`createEffect`** - Run side effects when dependencies change
-- **`createComputed`** - Derive values from state with automatic caching
-- **`createTask`** - Manage async operations (fetch, mutations, etc.)
-- **`createRouter`** - Type-safe client-side routing
-- **`createContext`** - Share data through the component tree
-- **`createView`** - Compose state and methods into reusable objects
+- **`useState`** - Create reactive state objects
+- **`useEffect`** - Run side effects when dependencies change
+- **`useComputed`** - Derive values from state with automatic caching
+- **`useAsync`** - Manage async operations (fetch, mutations, polling, etc.)
+- **`useRouter`** - Type-safe client-side routing
+- **`createContext`** / **`useContext`** - Share data through the component tree
+- **`useView`** - Compose state and methods into reusable objects
 
 Visit [rask-ui.io](https://rask-ui.io) for complete API documentation and guides.
 

package/dist/component.d.ts

@@ -8,8 +8,8 @@ export declare class RaskStatelessComponent extends Component {
     render(): VNode;
 }
 export declare function getCurrentComponent(): RaskStatefulComponent<any> | undefined;
-export declare function createMountEffect(cb: () => void): void;
-export declare function createCleanup(cb: () => void): void;
+export declare function useMountEffect(cb: () => void): void;
+export declare function useCleanup(cb: () => void): void;
 export type RaskStatefulFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
 export declare class RaskStatefulComponent<P extends Props<any>> extends Component<P> {
     setup: RaskStatefulFunctionComponent<P>;

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAExE,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAOP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAKb;IAEH,WAAW,UAAS;IAEpB,OAAO,CAAC,UAAU,CAAQ;IAG1B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IAyD3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAkBlC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAWrD,MAAM;CA2CP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAExE,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAOP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAKb;IAEH,WAAW,UAAS;IAEpB,OAAO,CAAC,UAAU,CAAQ;IAG1B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IAyD3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAkBlC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAWrD,MAAM;CA0CP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -1,7 +1,7 @@
 import { createComponentVNode, Component } from "inferno";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 import { syncBatch } from "./batch";
-import { PROXY_MARKER } from "./createState";
+import { PROXY_MARKER } from "./useState";
 export class RaskStatelessComponent extends Component {
     observer = new Observer(() => {
         this.forceUpdate();
@@ -26,13 +26,13 @@ let currentComponent;
 export function getCurrentComponent() {
     return currentComponent;
 }
-export function createMountEffect(cb) {
+export function useMountEffect(cb) {
     if (!currentComponent) {
         throw new Error("Only use createMountEffect in component setup");
     }
     currentComponent.onMounts.push(cb);
 }
-export function createCleanup(cb) {
+export function useCleanup(cb) {
     if (!currentComponent || currentComponent.isRendering) {
         throw new Error("Only use createCleanup in component setup");
     }
@@ -169,7 +169,6 @@ export class RaskStatefulComponent extends Component {
         let result = null;
         try {
             this.isRendering = true;
-            console.log("WTF", this.setup.name);
             result = this.renderFn();
             this.isRendering = false;
             this.willRender = false;

package/dist/createContext.d.ts

@@ -22,9 +22,11 @@
  *
  * @returns Context object with inject() and get() methods
  */
-export declare function createContext<T>(): {
+export type Context<T> = {
     inject(value: T): void;
     get(): T;
-    hasValue(): boolean;
 };
+export declare function createContext<T>(): Context<T>;
+export declare function useContext<T>(context: Context<T>, value: T): void;
+export declare function useContext<T>(context: Context<T>): T;
 //# sourceMappingURL=createContext.d.ts.map

package/dist/createContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,wBAAgB,aAAa,CAAC,CAAC;kBAEb,CAAC;WASR,CAAC;;EA2CX"}
+{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI;IACvB,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACvB,GAAG,IAAI,CAAC,CAAC;CACV,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAqC7C;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;AACnE,wBAAgB,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC"}

package/dist/createContext.js

@@ -46,17 +46,13 @@ export function createContext() {
             }
             return contextValue;
         },
-        hasValue() {
-            let currentComponent = getCurrentComponent();
-            if (!currentComponent) {
-                throw new Error("You can not get context outside component setup");
-            }
-            if (typeof currentComponent.context.getContext !== "function") {
-                return false;
-            }
-            const contextValue = currentComponent.context.getContext(context);
-            return Boolean(contextValue);
-        },
     };
     return context;
 }
+export function useContext(context, value) {
+    if (value) {
+        context.inject(value);
+        return;
+    }
+    return context.get();
+}

package/dist/index.d.ts

@@ -1,15 +1,15 @@
 export { render } from "./render";
-export { createCleanup, createMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
-export { createContext } from "./createContext";
-export { createState, assignState } from "./createState";
-export { createTask, TaskState as Task } from "./createTask";
+export { useCleanup, useMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
+export { createContext, useContext } from "./createContext";
+export { useState, assignState } from "./useState";
+export { useAsync, Async } from "./useAsync";
 export { ErrorBoundary } from "./error";
 export { createRef } from "inferno";
-export { createView } from "./createView";
-export { createEffect } from "./createEffect";
-export { createComputed } from "./createComputed";
+export { useView } from "./useView";
+export { useEffect } from "./useEffect";
+export { useComputed } from "./useComputed";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
-export { Router, createRouter } from "./createRouter";
+export { Router, useRouter } from "./useRouter";
 export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,SAAS,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,15 +1,15 @@
 export { render } from "./render";
-export { createCleanup, createMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
-export { createContext } from "./createContext";
-export { createState, assignState } from "./createState";
-export { createTask } from "./createTask";
+export { useCleanup, useMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
+export { createContext, useContext } from "./createContext";
+export { useState, assignState } from "./useState";
+export { useAsync } from "./useAsync";
 export { ErrorBoundary } from "./error";
 export { createRef } from "inferno";
-export { createView } from "./createView";
-export { createEffect } from "./createEffect";
-export { createComputed } from "./createComputed";
+export { useView } from "./useView";
+export { useEffect } from "./useEffect";
+export { useComputed } from "./useComputed";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
-export { createRouter } from "./createRouter";
+export { useRouter } from "./useRouter";
 // Re-export Inferno JSX runtime functions so users don't need to install Inferno directly
 export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";

package/dist/useAsync.d.ts

@@ -0,0 +1,27 @@
+export type AsyncState<P, T, I = null> = {
+    isPending: false;
+    params: null;
+    value: I;
+    error: null;
+} | {
+    isPending: true;
+    value: T | I;
+    params: P;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    value: T;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    value: T | I;
+    error: string;
+};
+export type Async<A, B = never, I = null> = [B] extends [never] ? [AsyncState<null, A, I>, () => void] : [AsyncState<A, B, I>, (params: A) => void];
+export declare function useAsync<T>(initialValue: T, fn: (params: undefined, signal: AbortSignal) => Promise<T>): Async<T, never, T>;
+export declare function useAsync<P, T>(initialValue: T, fn: (params: P, signal: AbortSignal) => Promise<T>): Async<P, T, T>;
+export declare function useAsync<T>(fn: (params: undefined, signal: AbortSignal) => Promise<T>): Async<T>;
+export declare function useAsync<P, T>(fn: (params: P, signal: AbortSignal) => Promise<T>): Async<P, T>;
+//# sourceMappingURL=useAsync.d.ts.map

package/dist/useAsync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../src/useAsync.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,IACjC;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAC3D,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,GACpC,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE/C,wBAAgB,QAAQ,CAAC,CAAC,EACxB,YAAY,EAAE,CAAC,EACf,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GACzD,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACtB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,YAAY,EAAE,CAAC,EACf,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GACjD,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAClB,wBAAgB,QAAQ,CAAC,CAAC,EACxB,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GACzD,KAAK,CAAC,CAAC,CAAC,CAAC;AACZ,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GACjD,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC"}

package/dist/useAsync.js

@@ -0,0 +1,72 @@
+import { useCleanup, getCurrentComponent } from "./component";
+import { assignState, useState } from "./useState";
+export function useAsync(...args) {
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use createTask in component setup");
+    }
+    const value = args.length === 2 ? args[0] : null;
+    const fn = args.length === 2 ? args[1] : args[0];
+    const state = useState({
+        isPending: false,
+        value,
+        error: null,
+        params: null,
+    });
+    let currentAbortController;
+    const fetch = (params) => {
+        currentAbortController?.abort();
+        const abortController = (currentAbortController = new AbortController());
+        const promise = fn(params, abortController.signal);
+        promise
+            .then((result) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assignState(state, {
+                isPending: false,
+                value: result,
+                error: null,
+                params: null,
+            });
+        })
+            .catch((error) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assignState(state, {
+                isPending: false,
+                value: state.value,
+                error: String(error),
+                params: null,
+            });
+        });
+        return promise;
+    };
+    useCleanup(() => currentAbortController?.abort());
+    return [
+        {
+            get isPending() {
+                return state.isPending;
+            },
+            get value() {
+                return state.value;
+            },
+            get error() {
+                return state.error;
+            },
+            get params() {
+                return state.params;
+            },
+        },
+        (params) => {
+            fetch(params);
+            assignState(state, {
+                isPending: true,
+                value: state.value,
+                error: null,
+                params: (params || null),
+            });
+        },
+    ];
+}

package/dist/useComputed.d.ts

@@ -0,0 +1,5 @@
+export type Computed<T extends Record<string, () => any>> = {
+    [K in keyof T]: ReturnType<T[K]>;
+};
+export declare function useComputed<T extends Record<string, () => any>>(computed: T): Computed<T>;
+//# sourceMappingURL=useComputed.d.ts.map

package/dist/useComputed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComputed.d.ts","sourceRoot":"","sources":["../src/useComputed.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACzD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC7D,QAAQ,EAAE,CAAC,GACV,QAAQ,CAAC,CAAC,CAAC,CA0Eb"}

package/dist/useComputed.js

@@ -0,0 +1,69 @@
+import { getCurrentComponent, useCleanup } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+import { getCurrentObserver, Observer, Signal } from "./observation";
+export function useComputed(computed) {
+    const currentComponent = getCurrentComponent();
+    const proxy = {};
+    let notifyInspectorRef = {};
+    for (const prop in computed) {
+        let isDirty = true;
+        let value;
+        const signal = new Signal();
+        const computedObserver = new Observer(() => {
+            isDirty = true;
+            signal.notify();
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "computed",
+                    path: notifyInspectorRef.current.path.concat(prop),
+                    isDirty: true,
+                    value,
+                });
+            }
+        });
+        useCleanup(() => computedObserver.dispose());
+        Object.defineProperty(proxy, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                const currentObserver = getCurrentObserver();
+                if (currentObserver) {
+                    currentObserver.subscribeSignal(signal);
+                }
+                if (isDirty) {
+                    const stopObserving = computedObserver.observe();
+                    value = computed[prop]();
+                    stopObserving();
+                    isDirty = false;
+                    if (INSPECTOR_ENABLED) {
+                        notifyInspectorRef.current?.notify({
+                            type: "computed",
+                            path: notifyInspectorRef.current.path.concat(prop),
+                            isDirty: false,
+                            value,
+                        });
+                    }
+                    return value;
+                }
+                return value;
+            },
+        });
+    }
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(proxy, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
+    return proxy;
+}

package/dist/useEffect.d.ts

@@ -0,0 +1,2 @@
+export declare function useEffect(cb: () => void | (() => void)): void;
+//# sourceMappingURL=useEffect.d.ts.map

package/dist/useEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffect.d.ts","sourceRoot":"","sources":["../src/useEffect.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QA2BtD"}

package/dist/useEffect.js

@@ -0,0 +1,29 @@
+import { syncBatch } from "./batch";
+import { useCleanup, getCurrentComponent } from "./component";
+import { Observer } from "./observation";
+export function useEffect(cb) {
+    const component = getCurrentComponent();
+    if (!component || component.isRendering) {
+        throw new Error("Only use createEffect in component setup");
+    }
+    let disposer;
+    const observer = new Observer(() => {
+        syncBatch(runEffect);
+    });
+    const runEffect = () => {
+        try {
+            disposer?.();
+        }
+        catch (error) {
+            console.error("Error in effect dispose function:", error);
+        }
+        const stopObserving = observer.observe();
+        disposer = cb();
+        stopObserving();
+    };
+    useCleanup(() => {
+        observer.dispose();
+        disposer?.();
+    });
+    runEffect();
+}

package/dist/useQuery.d.ts

@@ -0,0 +1,25 @@
+type QueryState<T, I = null> = {
+    isPending: true;
+    error: null;
+    value: I;
+} | {
+    isPending: false;
+    error: null;
+    value: T;
+} | {
+    isPending: false;
+    error: string;
+    value: I | null;
+};
+export type Query<T, P, I = null> = [
+    QueryState<T, I>,
+    [
+        P
+    ] extends [never] ? (params: P) => void : () => void
+];
+export declare function useQuery<T>(query: () => Promise<T>): Query<T, never>;
+export declare function useQuery<T>(query: () => Promise<T>, initialValue: T): Query<T, never, T>;
+export declare function useQuery<T, P>(query: (params: P) => Promise<T>): Query<T, never>;
+export declare function useQuery<T, P>(query: (params: P) => Promise<T>, initialValue: T): Query<T, never, T>;
+export {};
+//# sourceMappingURL=useQuery.d.ts.map

package/dist/useQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,IACvB;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;CACV,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,IAAI;IAClC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;IAChB;QAAC,CAAC;KAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;CACvD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACtE,wBAAgB,QAAQ,CAAC,CAAC,EACxB,KAAK,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EACvB,YAAY,EAAE,CAAC,GACd,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACtB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAC/B,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACnB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,EAChC,YAAY,EAAE,CAAC,GACd,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC"}

package/dist/useQuery.js

@@ -0,0 +1,25 @@
+import { useEffect } from "./useEffect";
+import { useTask } from "./useTask";
+export function useQuery(query, initialValue) {
+    const [taskState, runTask] = useTask(query);
+    let lastValue = initialValue === undefined ? null : initialValue;
+    useEffect(() => {
+        if (taskState.result) {
+            lastValue = taskState.result;
+        }
+    });
+    return [
+        {
+            get value() {
+                return taskState.result || lastValue;
+            },
+            get isPending() {
+                return taskState.isPending;
+            },
+            get error() {
+                return taskState.error;
+            },
+        },
+        runTask,
+    ];
+}

package/dist/useRouter.d.ts

@@ -0,0 +1,8 @@
+import { RoutesConfig, TRouter, TRoutes } from "typed-client-router";
+export type Router<T extends RoutesConfig> = Omit<TRouter<T>, "current" | "listen" | "pathname"> & {
+    route?: TRoutes<T>;
+};
+export declare function useRouter<const T extends RoutesConfig>(config: T, options?: {
+    base?: string;
+}): Router<T>;
+//# sourceMappingURL=useRouter.d.ts.map

package/dist/useRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouter.d.ts","sourceRoot":"","sources":["../src/useRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,CA4BX"}

package/dist/useRouter.js

@@ -0,0 +1,27 @@
+import { createRouter as internalCreateRouter, } from "typed-client-router";
+import { getCurrentObserver, Signal } from "./observation";
+import { useCleanup, getCurrentComponent } from "./component";
+export function useRouter(config, options) {
+    if (!getCurrentComponent()) {
+        throw new Error("Only use createRouter in component setup");
+    }
+    const router = internalCreateRouter(config, options);
+    const signal = new Signal();
+    useCleanup(router.listen(() => signal.notify()));
+    return {
+        get route() {
+            const observer = getCurrentObserver();
+            if (observer) {
+                observer.subscribeSignal(signal);
+            }
+            return router.current;
+        },
+        get queries() {
+            return router.queries;
+        },
+        setQuery: router.setQuery,
+        push: router.push,
+        replace: router.replace,
+        url: router.url,
+    };
+}

package/dist/useState.d.ts

@@ -0,0 +1,28 @@
+export declare function assignState<T extends object>(state: T, newState: T): T;
+/**
+ * Creates a reactive state object that tracks property access and notifies observers on changes.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining proxy access. This is the same rule
+ * as Solid.js signals.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   const { count, name } = state; // Don't do this!
+ *   return () => <div>{count} {name}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   return () => <div>{state.count} {state.name}</div>; // Reactive!
+ * }
+ *
+ * @param state - The initial state object to make reactive
+ * @returns A reactive proxy of the state object
+ */
+export declare function useState<T extends object>(state: T): T;
+export declare const PROXY_MARKER: unique symbol;
+//# sourceMappingURL=useState.d.ts.map

package/dist/useState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAOtD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}

package/dist/useState.js

@@ -0,0 +1,129 @@
+import { getCurrentComponent } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+import { getCurrentObserver, Signal } from "./observation";
+export function assignState(state, newState) {
+    return Object.assign(state, newState);
+}
+/**
+ * Creates a reactive state object that tracks property access and notifies observers on changes.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining proxy access. This is the same rule
+ * as Solid.js signals.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   const { count, name } = state; // Don't do this!
+ *   return () => <div>{count} {name}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   return () => <div>{state.count} {state.name}</div>; // Reactive!
+ * }
+ *
+ * @param state - The initial state object to make reactive
+ * @returns A reactive proxy of the state object
+ */
+export function useState(state) {
+    if (getCurrentComponent()?.isRendering) {
+        throw new Error("createState cannot be called during render. Call it in component setup or globally.");
+    }
+    return getProxy(state, {});
+}
+const proxyCache = new WeakMap();
+export const PROXY_MARKER = Symbol("isProxy");
+function getProxy(value, notifyInspectorRef) {
+    // Check if already a proxy to avoid double-wrapping
+    if (PROXY_MARKER in value) {
+        return value;
+    }
+    if (proxyCache.has(value)) {
+        return proxyCache.get(value);
+    }
+    const signals = {};
+    const proxy = new Proxy(value, {
+        has(target, key) {
+            // Support the "in" operator check for PROXY_MARKER
+            if (key === PROXY_MARKER) {
+                return true;
+            }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return true;
+            }
+            return Reflect.has(target, key);
+        },
+        get(target, key) {
+            // Mark this as a proxy to prevent double-wrapping
+            if (key === PROXY_MARKER) {
+                return true;
+            }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return !notifyInspectorRef.current;
+            }
+            const value = Reflect.get(target, key);
+            if (typeof key === "symbol" || typeof value === "function") {
+                return value;
+            }
+            const observer = getCurrentObserver();
+            if (observer) {
+                const signal = (signals[key] = signals[key] || new Signal());
+                observer.subscribeSignal(signal);
+            }
+            if (Array.isArray(value) ||
+                (typeof value === "object" && value !== null)) {
+                return getProxy(value, INSPECTOR_ENABLED && notifyInspectorRef.current
+                    ? {
+                        current: {
+                            notify: notifyInspectorRef.current.notify,
+                            path: notifyInspectorRef.current.path.concat(key),
+                        },
+                    }
+                    : notifyInspectorRef);
+            }
+            return value;
+        },
+        set(target, key, newValue) {
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return newValue.current;
+                    },
+                });
+                return Reflect.set(target, key, newValue);
+            }
+            if (typeof key === "symbol") {
+                return Reflect.set(target, key, newValue);
+            }
+            const oldValue = Reflect.get(target, key);
+            const setResult = Reflect.set(target, key, newValue);
+            // We only notify if actual change, though array length actually updates under the hood
+            if (newValue !== oldValue || (Array.isArray(value) && key === "length")) {
+                const signal = signals[key];
+                signal?.notify();
+            }
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "mutation",
+                    path: notifyInspectorRef.current.path,
+                    value: newValue,
+                });
+            }
+            return setResult;
+        },
+        deleteProperty(target, key) {
+            if (typeof key === "symbol") {
+                return Reflect.deleteProperty(target, key);
+            }
+            const signal = signals[key];
+            signal?.notify();
+            delete signals[key];
+            return Reflect.deleteProperty(target, key);
+        },
+    });
+    proxyCache.set(value, proxy);
+    return proxy;
+}

package/dist/useTask.d.ts

@@ -0,0 +1,25 @@
+export type TaskState<P, T> = {
+    isPending: false;
+    params: null;
+    result: null;
+    error: null;
+} | {
+    isPending: true;
+    result: T | null;
+    params: P;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    result: T;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    result: null;
+    error: string;
+};
+export type Task<A, B = never> = [B] extends [never] ? [TaskState<null, A>, () => void] : [TaskState<A, B>, (params: A) => void];
+export declare function useTask<T>(task: (params: undefined, signal: AbortSignal) => Promise<T>): Task<T>;
+export declare function useTask<P, T>(task: (params: P, signal: AbortSignal) => Promise<T>): Task<P, T>;
+//# sourceMappingURL=useTask.d.ts.map

package/dist/useTask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTask.d.ts","sourceRoot":"","sources":["../src/useTask.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,IACtB;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAChD,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,GAChC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAE3C,wBAAgB,OAAO,CAAC,CAAC,EACvB,IAAI,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GAC3D,IAAI,CAAC,CAAC,CAAC,CAAC;AACX,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,EAC1B,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,GACnD,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC"}

package/dist/useTask.js

@@ -0,0 +1,70 @@
+import { useCleanup, getCurrentComponent } from "./component";
+import { assignState, useState } from "./useState";
+export function useTask(task) {
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use createTask in component setup");
+    }
+    const state = useState({
+        isPending: false,
+        result: null,
+        error: null,
+        params: null,
+    });
+    let currentAbortController;
+    const fetch = (params) => {
+        currentAbortController?.abort();
+        const abortController = (currentAbortController = new AbortController());
+        const promise = task(params, abortController.signal);
+        promise
+            .then((result) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assignState(state, {
+                isPending: false,
+                result,
+                error: null,
+                params: null,
+            });
+        })
+            .catch((error) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assignState(state, {
+                isPending: false,
+                result: null,
+                error: String(error),
+                params: null,
+            });
+        });
+        return promise;
+    };
+    useCleanup(() => currentAbortController?.abort());
+    return [
+        {
+            get isPending() {
+                return state.isPending;
+            },
+            get result() {
+                return state.result;
+            },
+            get error() {
+                return state.error;
+            },
+            get params() {
+                return state.params;
+            },
+        },
+        (params) => {
+            fetch(params);
+            assignState(state, {
+                isPending: true,
+                result: null,
+                error: null,
+                params: (params || null),
+            });
+        },
+    ];
+}

package/dist/useView.d.ts

@@ -0,0 +1,28 @@
+type Simplify<T> = T extends any ? {
+    [K in keyof T]: T[K];
+} : never;
+type UndefinedKeys<T> = {
+    [K in keyof T]-?: [T[K]] extends [undefined] ? K : never;
+}[keyof T];
+type MergeTwo<A extends object, B extends object> = A extends any ? Simplify<Omit<A, keyof B> & Omit<B, UndefinedKeys<B>>> : never;
+type MergeMany<T extends readonly object[]> = T extends [
+    infer H extends object,
+    ...infer R extends object[]
+] ? MergeManyAcc<H, R> : {};
+type MergeManyAcc<Acc extends object, Rest extends object[]> = Rest extends [
+    infer H extends object,
+    ...infer R extends object[]
+] ? MergeManyAcc<MergeTwo<Acc, H>, R> : Acc;
+/**
+ * Creates a view that merges multiple objects (reactive or not) into a single
+ * object while maintaining reactivity through getters. Properties from later
+ * arguments override earlier ones.
+ *
+ * ⚠️ Do not destructure the returned view object; always read properties
+ * directly from the view to preserve reactivity.
+ */
+export declare function useView<A extends object>(a: A): A;
+export declare function useView<A extends object, B extends object>(a: A, b: B): MergeTwo<A, B>;
+export declare function useView<T extends readonly object[]>(...args: T): MergeMany<T>;
+export {};
+//# sourceMappingURL=useView.d.ts.map

package/dist/useView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useView.d.ts","sourceRoot":"","sources":["../src/useView.ts"],"names":[],"mappings":"AAGA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,KAAK,CAAC;AAEpE,KAAK,aAAa,CAAC,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CACzD,CAAC,MAAM,CAAC,CAAC,CAAC;AAEX,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,GAC7D,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GACtD,KAAK,CAAC;AAEV,KAAK,SAAS,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,EAAE,CAAC;AAEP,KAAK,YAAY,CAAC,GAAG,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,SAAS;IAC1E,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACjC,GAAG,CAAC;AAER;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACnD,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EACxD,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GACH,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAClB,wBAAgB,OAAO,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC"}

package/dist/useView.js

@@ -0,0 +1,77 @@
+import { getCurrentComponent } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+export function useView(...args) {
+    if (!getCurrentComponent()) {
+        throw new Error("Only use createView in component setup");
+    }
+    const result = {};
+    const seen = new Set();
+    let notifyInspectorRef = {};
+    for (let i = args.length - 1; i >= 0; i--) {
+        const src = args[i];
+        if (!src)
+            continue;
+        if (INSPECTOR_ENABLED && src[INSPECT_MARKER]) {
+            src[INSPECT_MARKER] = notifyInspectorRef;
+        }
+        // Mimic Object.assign: only enumerable own property keys
+        for (const key of Reflect.ownKeys(src)) {
+            if (seen.has(key))
+                continue;
+            const desc = Object.getOwnPropertyDescriptor(src, key);
+            if (!desc || !desc.enumerable)
+                continue;
+            Object.defineProperty(result, key, {
+                enumerable: true,
+                configurable: true,
+                get: () => {
+                    const value = src[key];
+                    if (!INSPECTOR_ENABLED || !notifyInspectorRef.current) {
+                        return value;
+                    }
+                    // Propagate inspector marker into nested observables
+                    if (value?.[INSPECT_MARKER]) {
+                        value[INSPECT_MARKER] = {
+                            current: {
+                                notify: notifyInspectorRef.current.notify,
+                                path: notifyInspectorRef.current.path.concat(key),
+                            },
+                        };
+                    }
+                    else if (typeof value === "function") {
+                        // Wrap actions to notify inspector
+                        return (...params) => {
+                            notifyInspectorRef.current.notify({
+                                type: "action",
+                                path: notifyInspectorRef.current.path.concat(key),
+                                params,
+                            });
+                            return value(...params);
+                        };
+                    }
+                    return value;
+                },
+            });
+            seen.add(key);
+        }
+    }
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(result, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    configurable: true,
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
+    // The overload signatures expose a precise type; this is the shared impl.
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",