flexium 0.12.13 → 0.12.17

package/dist/core.d.cts

@@ -1,3 +1,5 @@
+import { F as FNodeChild } from './types-y2GGaXXk.cjs';
+
 type StateSetter<T> = (newValue: T | ((prev: T) => T)) => void;
 type ResourceControl = {
     refetch: () => Promise<void>;
@@ -5,15 +7,33 @@ type ResourceControl = {
     readonly error: unknown;
     readonly status: 'idle' | 'loading' | 'success' | 'error';
 };
-type StateAction<T> = StateSetter<T> | ResourceControl;
 interface StateOptions {
     key?: unknown[];
     deps?: any[];
+    /** Debug name for DevTools */
+    name?: string;
 }
+interface Context<T> {
+    Provider: (props: {
+        value: T;
+        children: any;
+    }) => any;
+    id: symbol;
+    defaultValue: T;
+}
+
+type StateAction<T> = StateSetter<T> | ResourceControl;
 declare function state<T>(fn: () => Promise<T>, options?: StateOptions): [T | undefined, ResourceControl];
 declare function state<T>(fn: () => T, options?: StateOptions): [T, ResourceControl];
 declare function state<T>(initialValue: T extends Function ? never : T, options?: StateOptions): [T, StateSetter<T>];
 
+interface RefObject<T> {
+    current: T | null;
+}
+type RefCallback<T> = (instance: T | null) => void;
+type Ref<T> = RefObject<T> | RefCallback<T> | null;
+type ForwardedRef<T> = RefCallback<T> | RefObject<T> | null;
+
 declare function effect(fn: () => (void | (() => void)), deps?: any[]): void;
 /**
  * Unified sync API
@@ -21,21 +41,77 @@ declare function effect(fn: () => (void | (() => void)), deps?: any[]): void;
  * - sync(fn): Batch updates (run fn then flush)
  */
 declare function sync(fn?: () => void): void;
-declare function batch(fn: () => void): void;
 
-interface Context<T> {
-    Provider: (props: {
-        value: T;
-        children: any;
-    }) => any;
-    id: symbol;
-    defaultValue: T;
-}
 declare function createContext<T>(defaultValue: T): Context<T>;
 declare function context<T>(ctx: Context<T>): T;
-declare function pushContext(id: symbol, value: any): any;
-declare function popContext(id: symbol, prevValue: any): void;
-declare function snapshotContext(): Map<symbol, any>;
-declare function runWithContext<R>(snapshot: Map<symbol, any>, fn: () => R): R;
 
-export { type Context, type ResourceControl, type StateAction, type StateSetter, batch, context, createContext, effect, popContext, pushContext, runWithContext, snapshotContext, state, sync };
+declare const FORWARD_REF_SYMBOL: unique symbol;
+interface ForwardRefRenderFunction<P, T> {
+    (props: P, ref: ForwardedRef<T>): FNodeChild;
+}
+interface ForwardRefComponent<P, T> {
+    (props: P & {
+        ref?: Ref<T>;
+    }): FNodeChild;
+    $$typeof: typeof FORWARD_REF_SYMBOL;
+    render: ForwardRefRenderFunction<P, T>;
+}
+/**
+ * Forwards a ref through a component to a child element
+ *
+ * @example
+ * ```tsx
+ * const FancyInput = forwardRef<{ placeholder?: string }, HTMLInputElement>(
+ *   (props, ref) => {
+ *     return (
+ *       <input
+ *         ref={ref}
+ *         class="fancy-input"
+ *         placeholder={props.placeholder}
+ *       />
+ *     )
+ *   }
+ * )
+ *
+ * function Parent() {
+ *   const inputRef = ref<HTMLInputElement>()
+ *
+ *   return (
+ *     <div>
+ *       <FancyInput ref={inputRef} placeholder="Type here..." />
+ *       <button onClick={() => inputRef.current?.select()}>
+ *         Select All
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function forwardRef<P = {}, T = HTMLElement>(render: ForwardRefRenderFunction<P, T>): ForwardRefComponent<P, T>;
+
+/**
+ * Creates a mutable ref object that persists across renders
+ *
+ * @example
+ * ```tsx
+ * function InputWithFocus() {
+ *   const inputRef = ref<HTMLInputElement>()
+ *
+ *   const focusInput = () => {
+ *     inputRef.current?.focus()
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <input ref={inputRef} type="text" />
+ *       <button onClick={focusInput}>Focus Input</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function ref<T>(initialValue: T): RefObject<T>;
+declare function ref<T>(initialValue: T | null): RefObject<T | null>;
+declare function ref<T = undefined>(): RefObject<T | undefined>;
+
+export { type Context, type ForwardedRef, type Ref, type RefCallback, type RefObject, type ResourceControl, type StateAction, type StateOptions, type StateSetter, context, createContext, effect, forwardRef, ref, state, sync };

package/dist/core.d.ts

@@ -1,3 +1,5 @@
+import { F as FNodeChild } from './types-y2GGaXXk.js';
+
 type StateSetter<T> = (newValue: T | ((prev: T) => T)) => void;
 type ResourceControl = {
     refetch: () => Promise<void>;
@@ -5,15 +7,33 @@ type ResourceControl = {
     readonly error: unknown;
     readonly status: 'idle' | 'loading' | 'success' | 'error';
 };
-type StateAction<T> = StateSetter<T> | ResourceControl;
 interface StateOptions {
     key?: unknown[];
     deps?: any[];
+    /** Debug name for DevTools */
+    name?: string;
 }
+interface Context<T> {
+    Provider: (props: {
+        value: T;
+        children: any;
+    }) => any;
+    id: symbol;
+    defaultValue: T;
+}
+
+type StateAction<T> = StateSetter<T> | ResourceControl;
 declare function state<T>(fn: () => Promise<T>, options?: StateOptions): [T | undefined, ResourceControl];
 declare function state<T>(fn: () => T, options?: StateOptions): [T, ResourceControl];
 declare function state<T>(initialValue: T extends Function ? never : T, options?: StateOptions): [T, StateSetter<T>];
 
+interface RefObject<T> {
+    current: T | null;
+}
+type RefCallback<T> = (instance: T | null) => void;
+type Ref<T> = RefObject<T> | RefCallback<T> | null;
+type ForwardedRef<T> = RefCallback<T> | RefObject<T> | null;
+
 declare function effect(fn: () => (void | (() => void)), deps?: any[]): void;
 /**
  * Unified sync API
@@ -21,21 +41,77 @@ declare function effect(fn: () => (void | (() => void)), deps?: any[]): void;
  * - sync(fn): Batch updates (run fn then flush)
  */
 declare function sync(fn?: () => void): void;
-declare function batch(fn: () => void): void;
 
-interface Context<T> {
-    Provider: (props: {
-        value: T;
-        children: any;
-    }) => any;
-    id: symbol;
-    defaultValue: T;
-}
 declare function createContext<T>(defaultValue: T): Context<T>;
 declare function context<T>(ctx: Context<T>): T;
-declare function pushContext(id: symbol, value: any): any;
-declare function popContext(id: symbol, prevValue: any): void;
-declare function snapshotContext(): Map<symbol, any>;
-declare function runWithContext<R>(snapshot: Map<symbol, any>, fn: () => R): R;
 
-export { type Context, type ResourceControl, type StateAction, type StateSetter, batch, context, createContext, effect, popContext, pushContext, runWithContext, snapshotContext, state, sync };
+declare const FORWARD_REF_SYMBOL: unique symbol;
+interface ForwardRefRenderFunction<P, T> {
+    (props: P, ref: ForwardedRef<T>): FNodeChild;
+}
+interface ForwardRefComponent<P, T> {
+    (props: P & {
+        ref?: Ref<T>;
+    }): FNodeChild;
+    $$typeof: typeof FORWARD_REF_SYMBOL;
+    render: ForwardRefRenderFunction<P, T>;
+}
+/**
+ * Forwards a ref through a component to a child element
+ *
+ * @example
+ * ```tsx
+ * const FancyInput = forwardRef<{ placeholder?: string }, HTMLInputElement>(
+ *   (props, ref) => {
+ *     return (
+ *       <input
+ *         ref={ref}
+ *         class="fancy-input"
+ *         placeholder={props.placeholder}
+ *       />
+ *     )
+ *   }
+ * )
+ *
+ * function Parent() {
+ *   const inputRef = ref<HTMLInputElement>()
+ *
+ *   return (
+ *     <div>
+ *       <FancyInput ref={inputRef} placeholder="Type here..." />
+ *       <button onClick={() => inputRef.current?.select()}>
+ *         Select All
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function forwardRef<P = {}, T = HTMLElement>(render: ForwardRefRenderFunction<P, T>): ForwardRefComponent<P, T>;
+
+/**
+ * Creates a mutable ref object that persists across renders
+ *
+ * @example
+ * ```tsx
+ * function InputWithFocus() {
+ *   const inputRef = ref<HTMLInputElement>()
+ *
+ *   const focusInput = () => {
+ *     inputRef.current?.focus()
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <input ref={inputRef} type="text" />
+ *       <button onClick={focusInput}>Focus Input</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function ref<T>(initialValue: T): RefObject<T>;
+declare function ref<T>(initialValue: T | null): RefObject<T | null>;
+declare function ref<T = undefined>(): RefObject<T | undefined>;
+
+export { type Context, type ForwardedRef, type Ref, type RefCallback, type RefObject, type ResourceControl, type StateAction, type StateOptions, type StateSetter, context, createContext, effect, forwardRef, ref, state, sync };

package/dist/core.js

@@ -1,2 +1,2 @@
-'use strict';var chunkLUW7DIEW_js=require('./chunk-LUW7DIEW.js'),chunkIA4FEBFE_js=require('./chunk-IA4FEBFE.js'),chunkAPAMPY43_js=require('./chunk-APAMPY43.js');require('./chunk-7BXR4ZFD.js'),require('./chunk-ENWGYQNU.js');Object.defineProperty(exports,"context",{enumerable:true,get:function(){return chunkLUW7DIEW_js.b}});Object.defineProperty(exports,"createContext",{enumerable:true,get:function(){return chunkLUW7DIEW_js.a}});Object.defineProperty(exports,"popContext",{enumerable:true,get:function(){return chunkLUW7DIEW_js.d}});Object.defineProperty(exports,"pushContext",{enumerable:true,get:function(){return chunkLUW7DIEW_js.c}});Object.defineProperty(exports,"runWithContext",{enumerable:true,get:function(){return chunkLUW7DIEW_js.f}});Object.defineProperty(exports,"snapshotContext",{enumerable:true,get:function(){return chunkLUW7DIEW_js.e}});Object.defineProperty(exports,"batch",{enumerable:true,get:function(){return chunkIA4FEBFE_js.c}});Object.defineProperty(exports,"effect",{enumerable:true,get:function(){return chunkIA4FEBFE_js.a}});Object.defineProperty(exports,"sync",{enumerable:true,get:function(){return chunkIA4FEBFE_js.b}});Object.defineProperty(exports,"state",{enumerable:true,get:function(){return chunkAPAMPY43_js.a}});//# sourceMappingURL=core.js.map
+'use strict';var chunkPSKDIB7J_js=require('./chunk-PSKDIB7J.js'),chunkLTT43APF_js=require('./chunk-LTT43APF.js');require('./chunk-6VIRXD2Y.js');var chunkYWTD32NA_js=require('./chunk-YWTD32NA.js'),chunkUWFVCKRU_js=require('./chunk-UWFVCKRU.js');function t(e){return chunkUWFVCKRU_js.b(()=>({current:e}))}var f=Symbol("flexium.forwardRef");function n(e){let r=p=>{let{ref:R,...d}=p;return e(d,R??null)};return r.$$typeof=f,r.render=e,r}Object.defineProperty(exports,"context",{enumerable:true,get:function(){return chunkPSKDIB7J_js.b}});Object.defineProperty(exports,"createContext",{enumerable:true,get:function(){return chunkPSKDIB7J_js.a}});Object.defineProperty(exports,"state",{enumerable:true,get:function(){return chunkLTT43APF_js.a}});Object.defineProperty(exports,"effect",{enumerable:true,get:function(){return chunkYWTD32NA_js.e}});Object.defineProperty(exports,"sync",{enumerable:true,get:function(){return chunkYWTD32NA_js.f}});exports.forwardRef=n;exports.ref=t;//# sourceMappingURL=core.js.map
 //# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"core.js"}
+{"version":3,"sources":["../src/ref/ref.ts","../src/ref/forwardRef.ts"],"names":["ref","initialValue","hook","FORWARD_REF_SYMBOL","forwardRef","render","ForwardRefComponent","props","otherProps"],"mappings":"oPA2BO,SAASA,CAAAA,CAAOC,EAA4C,CACjE,OAAOC,mBAAK,KAAO,CACjB,QAASD,CACX,CAAA,CAAE,CACJ,CC3BO,IAAME,EAAqB,MAAA,CAAO,oBAAoB,EA2CtD,SAASC,CAAAA,CACdC,CAAAA,CAC2B,CAC3B,IAAMC,CAAAA,CAAuBC,GAA4C,CACvE,GAAM,CAAE,GAAA,CAAAP,CAAAA,CAAK,GAAGQ,CAAW,CAAA,CAAID,CAAAA,CAC/B,OAAOF,CAAAA,CAAOG,CAAAA,CAAiBR,GAAO,IAAI,CAC5C,EAGA,OAAAM,CAAAA,CAAoB,SAAWH,CAAAA,CAC/BG,CAAAA,CAAoB,MAAA,CAASD,CAAAA,CAEtBC,CACT","file":"core.js","sourcesContent":["import { hook } from '../core/hook'\nimport type { RefObject } from './types'\n\n/**\n * Creates a mutable ref object that persists across renders\n *\n * @example\n * ```tsx\n * function InputWithFocus() {\n *   const inputRef = ref<HTMLInputElement>()\n *\n *   const focusInput = () => {\n *     inputRef.current?.focus()\n *   }\n *\n *   return (\n *     <div>\n *       <input ref={inputRef} type=\"text\" />\n *       <button onClick={focusInput}>Focus Input</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function ref<T>(initialValue: T): RefObject<T>\nexport function ref<T>(initialValue: T | null): RefObject<T | null>\nexport function ref<T = undefined>(): RefObject<T | undefined>\nexport function ref<T>(initialValue?: T): RefObject<T | undefined> {\n  return hook(() => ({\n    current: initialValue\n  }))\n}\n","import type { FNodeChild } from '../dom/types'\nimport type { ForwardedRef, Ref } from './types'\n\n// Symbol to identify forwarded components\nexport const FORWARD_REF_SYMBOL = Symbol('flexium.forwardRef')\n\nexport interface ForwardRefRenderFunction<P, T> {\n  (props: P, ref: ForwardedRef<T>): FNodeChild\n}\n\nexport interface ForwardRefComponent<P, T> {\n  (props: P & { ref?: Ref<T> }): FNodeChild\n  $$typeof: typeof FORWARD_REF_SYMBOL\n  render: ForwardRefRenderFunction<P, T>\n}\n\n/**\n * Forwards a ref through a component to a child element\n *\n * @example\n * ```tsx\n * const FancyInput = forwardRef<{ placeholder?: string }, HTMLInputElement>(\n *   (props, ref) => {\n *     return (\n *       <input\n *         ref={ref}\n *         class=\"fancy-input\"\n *         placeholder={props.placeholder}\n *       />\n *     )\n *   }\n * )\n *\n * function Parent() {\n *   const inputRef = ref<HTMLInputElement>()\n *\n *   return (\n *     <div>\n *       <FancyInput ref={inputRef} placeholder=\"Type here...\" />\n *       <button onClick={() => inputRef.current?.select()}>\n *         Select All\n *       </button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function forwardRef<P = {}, T = HTMLElement>(\n  render: ForwardRefRenderFunction<P, T>\n): ForwardRefComponent<P, T> {\n  const ForwardRefComponent = (props: P & { ref?: Ref<T> }): FNodeChild => {\n    const { ref, ...otherProps } = props as P & { ref?: Ref<T> }\n    return render(otherProps as P, ref ?? null)\n  }\n\n  // Mark as forwarded component\n  ForwardRefComponent.$$typeof = FORWARD_REF_SYMBOL\n  ForwardRefComponent.render = render\n\n  return ForwardRefComponent\n}\n"]}

package/dist/core.mjs

@@ -1,2 +1,2 @@
-export{b as context,a as createContext,d as popContext,c as pushContext,f as runWithContext,e as snapshotContext}from'./chunk-LUREDEUB.mjs';export{c as batch,a as effect,b as sync}from'./chunk-S6WF3XNF.mjs';export{a as state}from'./chunk-ECB5HZOQ.mjs';import'./chunk-CPJRQL2C.mjs';import'./chunk-44RZHCII.mjs';//# sourceMappingURL=core.mjs.map
+export{b as context,a as createContext}from'./chunk-3DKZ2J4D.mjs';export{a as state}from'./chunk-WGKD63GN.mjs';import'./chunk-JY6CE6RN.mjs';export{e as effect,f as sync}from'./chunk-IWFEXW4F.mjs';import {b}from'./chunk-5PNH2ARD.mjs';function t(e){return b(()=>({current:e}))}var f=Symbol("flexium.forwardRef");function n(e){let r=p=>{let{ref:R,...d}=p;return e(d,R??null)};return r.$$typeof=f,r.render=e,r}export{n as forwardRef,t as ref};//# sourceMappingURL=core.mjs.map
 //# sourceMappingURL=core.mjs.map

package/dist/core.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"core.mjs"}
+{"version":3,"sources":["../src/ref/ref.ts","../src/ref/forwardRef.ts"],"names":["ref","initialValue","hook","FORWARD_REF_SYMBOL","forwardRef","render","ForwardRefComponent","props","otherProps"],"mappings":"yOA2BO,SAASA,CAAAA,CAAOC,EAA4C,CACjE,OAAOC,EAAK,KAAO,CACjB,QAASD,CACX,CAAA,CAAE,CACJ,CC3BO,IAAME,EAAqB,MAAA,CAAO,oBAAoB,EA2CtD,SAASC,CAAAA,CACdC,CAAAA,CAC2B,CAC3B,IAAMC,CAAAA,CAAuBC,GAA4C,CACvE,GAAM,CAAE,GAAA,CAAAP,CAAAA,CAAK,GAAGQ,CAAW,CAAA,CAAID,CAAAA,CAC/B,OAAOF,CAAAA,CAAOG,CAAAA,CAAiBR,GAAO,IAAI,CAC5C,EAGA,OAAAM,CAAAA,CAAoB,SAAWH,CAAAA,CAC/BG,CAAAA,CAAoB,MAAA,CAASD,CAAAA,CAEtBC,CACT","file":"core.mjs","sourcesContent":["import { hook } from '../core/hook'\nimport type { RefObject } from './types'\n\n/**\n * Creates a mutable ref object that persists across renders\n *\n * @example\n * ```tsx\n * function InputWithFocus() {\n *   const inputRef = ref<HTMLInputElement>()\n *\n *   const focusInput = () => {\n *     inputRef.current?.focus()\n *   }\n *\n *   return (\n *     <div>\n *       <input ref={inputRef} type=\"text\" />\n *       <button onClick={focusInput}>Focus Input</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function ref<T>(initialValue: T): RefObject<T>\nexport function ref<T>(initialValue: T | null): RefObject<T | null>\nexport function ref<T = undefined>(): RefObject<T | undefined>\nexport function ref<T>(initialValue?: T): RefObject<T | undefined> {\n  return hook(() => ({\n    current: initialValue\n  }))\n}\n","import type { FNodeChild } from '../dom/types'\nimport type { ForwardedRef, Ref } from './types'\n\n// Symbol to identify forwarded components\nexport const FORWARD_REF_SYMBOL = Symbol('flexium.forwardRef')\n\nexport interface ForwardRefRenderFunction<P, T> {\n  (props: P, ref: ForwardedRef<T>): FNodeChild\n}\n\nexport interface ForwardRefComponent<P, T> {\n  (props: P & { ref?: Ref<T> }): FNodeChild\n  $$typeof: typeof FORWARD_REF_SYMBOL\n  render: ForwardRefRenderFunction<P, T>\n}\n\n/**\n * Forwards a ref through a component to a child element\n *\n * @example\n * ```tsx\n * const FancyInput = forwardRef<{ placeholder?: string }, HTMLInputElement>(\n *   (props, ref) => {\n *     return (\n *       <input\n *         ref={ref}\n *         class=\"fancy-input\"\n *         placeholder={props.placeholder}\n *       />\n *     )\n *   }\n * )\n *\n * function Parent() {\n *   const inputRef = ref<HTMLInputElement>()\n *\n *   return (\n *     <div>\n *       <FancyInput ref={inputRef} placeholder=\"Type here...\" />\n *       <button onClick={() => inputRef.current?.select()}>\n *         Select All\n *       </button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function forwardRef<P = {}, T = HTMLElement>(\n  render: ForwardRefRenderFunction<P, T>\n): ForwardRefComponent<P, T> {\n  const ForwardRefComponent = (props: P & { ref?: Ref<T> }): FNodeChild => {\n    const { ref, ...otherProps } = props as P & { ref?: Ref<T> }\n    return render(otherProps as P, ref ?? null)\n  }\n\n  // Mark as forwarded component\n  ForwardRefComponent.$$typeof = FORWARD_REF_SYMBOL\n  ForwardRefComponent.render = render\n\n  return ForwardRefComponent\n}\n"]}

package/dist/dom.d.cts

@@ -1,12 +1,157 @@
-type FNodeChild = FNode | string | number | boolean | null | undefined | FNodeChild[] | (() => FNode);
-interface FNode {
-    type: string | Function;
-    props: Record<string, any>;
-    children: FNodeChild[];
+import { a as FNode, F as FNodeChild } from './types-y2GGaXXk.cjs';
+import { S as SerializedState } from './types-CxlS2F2j.cjs';
+
+/**
+ * f() - Create FNodes without JSX
+ */
+declare function f(type: string | Function, props?: any, ...children: any[]): FNode;
+
+declare function reconcile(oldNodes: Node[], newNodes: Node[], parent: Node, beforeMarker: Node): Node[];
+declare function render(app: any, container: HTMLElement): void;
+
+interface HydrateOptions {
+    /**
+     * Serialized state from server
+     * Typically embedded in HTML as JSON script tag
+     */
+    state?: SerializedState;
+    /**
+     * Called when hydration completes successfully
+     */
+    onHydrated?: () => void;
+    /**
+     * Called when hydration fails (falls back to full render)
+     */
+    onMismatch?: (error: Error) => void;
+}
+/**
+ * Hydrate server-rendered HTML with client-side interactivity
+ */
+declare function hydrate(app: FNodeChild | (() => FNodeChild), container: HTMLElement, options?: HydrateOptions): void;
+
+interface PortalProps {
+    /** Target element or CSS selector to render children into */
+    target: HTMLElement | string;
+    /** Children to render in the portal */
+    children: FNodeChild;
+    /** Optional key for reconciliation */
     key?: any;
 }
-declare function render(app: any, container: HTMLElement): void;
-declare function f(type: string | Function, props?: any, ...children: any[]): any;
-declare function reconcile(oldNodes: Node[], newNodes: Node[], parent: Node, beforeMarker: Node): Node[];
+interface SuspenseProps {
+    /** Fallback UI to display while loading */
+    fallback: FNodeChild;
+    /** Children to render when loaded */
+    children: FNodeChild;
+}
+interface LazyComponent<P = any> {
+    (props: P): FNodeChild;
+    _lazy: true;
+    _loader: () => Promise<{
+        default: (props: P) => FNodeChild;
+    }>;
+    _resolved?: (props: P) => FNodeChild;
+    _promise?: Promise<any>;
+    _error?: Error;
+}
+interface SuspenseContextValue {
+    /** Register a pending promise with the suspense boundary */
+    register: (promise: Promise<any>) => void;
+    /** Whether there's an active suspense boundary */
+    hasBoundary: boolean;
+}
+interface ErrorInfo {
+    /** Component stack trace */
+    componentStack: string;
+    /** Error occurred during which phase */
+    phase: 'render' | 'effect' | 'event';
+}
+interface ErrorBoundaryProps {
+    /** Fallback UI to display when error occurs */
+    fallback: FNodeChild | ((error: Error, info: ErrorInfo) => FNodeChild);
+    /** Callback when error is caught */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Children to render */
+    children: FNodeChild;
+    /** Key to reset boundary (changing key resets error state) */
+    resetKey?: unknown;
+}
+
+/**
+ * Portal component that renders children into a different DOM node
+ *
+ * @example
+ * ```tsx
+ * function Modal({ isOpen, onClose, children }) {
+ *   if (!isOpen) return null
+ *
+ *   return (
+ *     <Portal target={document.body}>
+ *       <div class="modal-backdrop" onClick={onClose}>
+ *         <div class="modal-content" onClick={e => e.stopPropagation()}>
+ *           {children}
+ *         </div>
+ *       </div>
+ *     </Portal>
+ *   )
+ * }
+ * ```
+ */
+declare function Portal(props: PortalProps): null;
+
+/**
+ * Suspense component that shows fallback while children are loading
+ *
+ * @example
+ * ```tsx
+ * const Dashboard = lazy(() => import('./Dashboard'))
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Dashboard />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ */
+declare function Suspense(props: SuspenseProps): FNodeChild;
+
+/**
+ * ErrorBoundary component that catches errors in its children and displays fallback UI
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={(error, info) => <div>Error: {error.message}</div>}
+ *   onError={(error, info) => console.error(error)}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+declare function ErrorBoundary(props: ErrorBoundaryProps): FNodeChild;
+
+/**
+ * Creates a lazy-loaded component for code splitting
+ *
+ * @example
+ * ```tsx
+ * const Dashboard = lazy(() => import('./Dashboard'))
+ * const Settings = lazy(() => import('./Settings'))
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Dashboard />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ */
+declare function lazy<P = {}>(loader: () => Promise<{
+    default: (props: P) => FNodeChild;
+}>): LazyComponent<P>;
+
+declare function suspenseContext(): SuspenseContextValue;
 
-export { type FNode, type FNodeChild, f, reconcile, render };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorInfo, FNode, FNodeChild, type HydrateOptions, type LazyComponent, Portal, type PortalProps, Suspense, type SuspenseContextValue, type SuspenseProps, f, hydrate, lazy, reconcile, render, suspenseContext };

package/dist/dom.d.ts

@@ -1,12 +1,157 @@
-type FNodeChild = FNode | string | number | boolean | null | undefined | FNodeChild[] | (() => FNode);
-interface FNode {
-    type: string | Function;
-    props: Record<string, any>;
-    children: FNodeChild[];
+import { a as FNode, F as FNodeChild } from './types-y2GGaXXk.js';
+import { S as SerializedState } from './types-CxlS2F2j.js';
+
+/**
+ * f() - Create FNodes without JSX
+ */
+declare function f(type: string | Function, props?: any, ...children: any[]): FNode;
+
+declare function reconcile(oldNodes: Node[], newNodes: Node[], parent: Node, beforeMarker: Node): Node[];
+declare function render(app: any, container: HTMLElement): void;
+
+interface HydrateOptions {
+    /**
+     * Serialized state from server
+     * Typically embedded in HTML as JSON script tag
+     */
+    state?: SerializedState;
+    /**
+     * Called when hydration completes successfully
+     */
+    onHydrated?: () => void;
+    /**
+     * Called when hydration fails (falls back to full render)
+     */
+    onMismatch?: (error: Error) => void;
+}
+/**
+ * Hydrate server-rendered HTML with client-side interactivity
+ */
+declare function hydrate(app: FNodeChild | (() => FNodeChild), container: HTMLElement, options?: HydrateOptions): void;
+
+interface PortalProps {
+    /** Target element or CSS selector to render children into */
+    target: HTMLElement | string;
+    /** Children to render in the portal */
+    children: FNodeChild;
+    /** Optional key for reconciliation */
     key?: any;
 }
-declare function render(app: any, container: HTMLElement): void;
-declare function f(type: string | Function, props?: any, ...children: any[]): any;
-declare function reconcile(oldNodes: Node[], newNodes: Node[], parent: Node, beforeMarker: Node): Node[];
+interface SuspenseProps {
+    /** Fallback UI to display while loading */
+    fallback: FNodeChild;
+    /** Children to render when loaded */
+    children: FNodeChild;
+}
+interface LazyComponent<P = any> {
+    (props: P): FNodeChild;
+    _lazy: true;
+    _loader: () => Promise<{
+        default: (props: P) => FNodeChild;
+    }>;
+    _resolved?: (props: P) => FNodeChild;
+    _promise?: Promise<any>;
+    _error?: Error;
+}
+interface SuspenseContextValue {
+    /** Register a pending promise with the suspense boundary */
+    register: (promise: Promise<any>) => void;
+    /** Whether there's an active suspense boundary */
+    hasBoundary: boolean;
+}
+interface ErrorInfo {
+    /** Component stack trace */
+    componentStack: string;
+    /** Error occurred during which phase */
+    phase: 'render' | 'effect' | 'event';
+}
+interface ErrorBoundaryProps {
+    /** Fallback UI to display when error occurs */
+    fallback: FNodeChild | ((error: Error, info: ErrorInfo) => FNodeChild);
+    /** Callback when error is caught */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Children to render */
+    children: FNodeChild;
+    /** Key to reset boundary (changing key resets error state) */
+    resetKey?: unknown;
+}
+
+/**
+ * Portal component that renders children into a different DOM node
+ *
+ * @example
+ * ```tsx
+ * function Modal({ isOpen, onClose, children }) {
+ *   if (!isOpen) return null
+ *
+ *   return (
+ *     <Portal target={document.body}>
+ *       <div class="modal-backdrop" onClick={onClose}>
+ *         <div class="modal-content" onClick={e => e.stopPropagation()}>
+ *           {children}
+ *         </div>
+ *       </div>
+ *     </Portal>
+ *   )
+ * }
+ * ```
+ */
+declare function Portal(props: PortalProps): null;
+
+/**
+ * Suspense component that shows fallback while children are loading
+ *
+ * @example
+ * ```tsx
+ * const Dashboard = lazy(() => import('./Dashboard'))
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Dashboard />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ */
+declare function Suspense(props: SuspenseProps): FNodeChild;
+
+/**
+ * ErrorBoundary component that catches errors in its children and displays fallback UI
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={(error, info) => <div>Error: {error.message}</div>}
+ *   onError={(error, info) => console.error(error)}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+declare function ErrorBoundary(props: ErrorBoundaryProps): FNodeChild;
+
+/**
+ * Creates a lazy-loaded component for code splitting
+ *
+ * @example
+ * ```tsx
+ * const Dashboard = lazy(() => import('./Dashboard'))
+ * const Settings = lazy(() => import('./Settings'))
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Dashboard />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ */
+declare function lazy<P = {}>(loader: () => Promise<{
+    default: (props: P) => FNodeChild;
+}>): LazyComponent<P>;
+
+declare function suspenseContext(): SuspenseContextValue;
 
-export { type FNode, type FNodeChild, f, reconcile, render };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorInfo, FNode, FNodeChild, type HydrateOptions, type LazyComponent, Portal, type PortalProps, Suspense, type SuspenseContextValue, type SuspenseProps, f, hydrate, lazy, reconcile, render, suspenseContext };