@sigx/runtime-terminal 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,10 +1,18 @@
 //#region ../runtime-core/src/plugins.ts
-const plugins = [];
+const plugins$1 = [];
 /**
 * Get all registered plugins (internal use)
 */
-function getComponentPlugins() {
-	return plugins;
+function getComponentPlugins$1() {
+	return plugins$1;
+}
+const contextExtensions = [];
+/**
+* Apply all registered context extensions to a context object.
+* Called internally by the renderer when creating component contexts.
+*/
+function applyContextExtensions(ctx) {
+	for (const extension of contextExtensions) extension(ctx);
 }
 
 //#endregion
@@ -119,7 +127,7 @@ function onCleanup(fn) {
 	if (currentComponentContext) currentComponentContext.onCleanup(fn);
 	else console.warn("onCleanup called outside of component setup");
 }
-const componentRegistry = /* @__PURE__ */ new Map();
+const componentRegistry$1 = /* @__PURE__ */ new Map();
 /**
 * Define a component. Returns a JSX factory function.
 * 
@@ -159,11 +167,11 @@ function defineComponent(setup, options) {
 	factory.__events = null;
 	factory.__ref = null;
 	factory.__slots = null;
-	componentRegistry.set(factory, {
+	componentRegistry$1.set(factory, {
 		name: options?.name,
 		setup
 	});
-	getComponentPlugins().forEach((p) => p.onDefine?.(options?.name, factory, setup));
+	getComponentPlugins$1().forEach((p) => p.onDefine?.(options?.name, factory, setup));
 	return factory;
 }
 
@@ -186,15 +194,17 @@ function batch(fn) {
 	}
 }
 function runEffect(fn) {
-	const effect$1 = function() {
-		cleanup(effect$1);
-		activeEffect = effect$1;
+	const effectFn = function() {
+		cleanup(effectFn);
+		activeEffect = effectFn;
 		fn();
 		activeEffect = null;
 	};
-	effect$1.deps = [];
-	effect$1();
-	return () => cleanup(effect$1);
+	effectFn.deps = [];
+	effectFn();
+	const runner = (() => effectFn());
+	runner.stop = () => cleanup(effectFn);
+	return runner;
 }
 function cleanup(effect$1) {
 	if (!effect$1.deps) return;
@@ -330,6 +340,292 @@ const arrayInstrumentations = {};
 const Fragment$1 = Symbol.for("sigx.Fragment");
 const Text$1 = Symbol.for("sigx.Text");
 
+//#endregion
+//#region ../runtime-core/src/lazy.tsx
+/**
+* Lazy loading utilities for sigx components.
+* 
+* Provides runtime-only lazy loading with no build dependencies.
+* Works with any bundler that supports dynamic import().
+*/
+let currentSuspenseBoundary$1 = null;
+/**
+* Register a promise with the current Suspense boundary
+* @internal
+*/
+function registerPendingPromise$1(promise) {
+	const boundary = currentSuspenseBoundary$1;
+	if (boundary) {
+		boundary.pending.add(promise);
+		promise.finally(() => {
+			boundary.pending.delete(promise);
+			if (boundary.pending.size === 0) boundary.onResolve();
+		});
+		return true;
+	}
+	return false;
+}
+/**
+* Suspense boundary component for handling async loading states.
+* 
+* Wraps lazy-loaded components and shows a fallback while they load.
+* 
+* @example
+* ```tsx
+* import { lazy, Suspense } from 'sigx';
+* 
+* const LazyDashboard = lazy(() => import('./Dashboard'));
+* 
+* // Basic usage
+* <Suspense fallback={<div>Loading...</div>}>
+*     <LazyDashboard />
+* </Suspense>
+* 
+* // With spinner component
+* <Suspense fallback={<Spinner size="large" />}>
+*     <LazyDashboard />
+*     <LazyCharts />
+* </Suspense>
+* ```
+*/
+const Suspense$1 = defineComponent((ctx) => {
+	const { props, slots } = ctx;
+	const state = ctx.signal({
+		isReady: false,
+		pendingCount: 0
+	});
+	const boundary = {
+		pending: /* @__PURE__ */ new Set(),
+		onResolve: () => {
+			state.pendingCount = boundary.pending.size;
+			if (boundary.pending.size === 0) state.isReady = true;
+		}
+	};
+	ctx.onMount(() => {
+		if (boundary.pending.size === 0) state.isReady = true;
+	});
+	return () => {
+		state.isReady;
+		state.pendingCount;
+		const prevBoundary = currentSuspenseBoundary$1;
+		currentSuspenseBoundary$1 = boundary;
+		try {
+			const children = slots.default();
+			if (boundary.pending.size > 0) {
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			if (Array.isArray(children)) {
+				const filtered = children.filter((c) => c != null && c !== false && c !== true);
+				if (filtered.length === 0) return null;
+				if (filtered.length === 1) return filtered[0];
+				return filtered;
+			}
+			return children;
+		} catch (err) {
+			if (err instanceof Promise) {
+				registerPendingPromise$1(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary$1 = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
+
+//#endregion
+//#region ../runtime-core/src/utils/props-accessor.ts
+/**
+* Creates a props accessor that can be called with defaults or accessed directly.
+* After calling with defaults, direct property access uses those defaults.
+* 
+* @example
+* ```ts
+* // In component setup:
+* const props = createPropsAccessor(reactiveProps);
+* 
+* // Set defaults
+* props({ count: 0, label: 'Default' });
+* 
+* // Access props (falls back to defaults if not provided)
+* const count = props.count;
+* ```
+*/
+function createPropsAccessor(reactiveProps) {
+	let defaults = {};
+	const proxy = new Proxy(function propsAccessor() {}, {
+		get(_, key) {
+			if (typeof key === "symbol") return void 0;
+			const value = reactiveProps[key];
+			return value != null ? value : defaults[key];
+		},
+		apply(_, __, args) {
+			if (args[0] && typeof args[0] === "object") defaults = {
+				...defaults,
+				...args[0]
+			};
+			return proxy;
+		},
+		has(_, key) {
+			if (typeof key === "symbol") return false;
+			return key in reactiveProps || key in defaults;
+		},
+		ownKeys() {
+			return [...new Set([...Object.keys(reactiveProps), ...Object.keys(defaults)])];
+		},
+		getOwnPropertyDescriptor(_, key) {
+			if (typeof key === "symbol") return void 0;
+			if (key in reactiveProps || key in defaults) return {
+				enumerable: true,
+				configurable: true,
+				writable: false
+			};
+		}
+	});
+	return proxy;
+}
+
+//#endregion
+//#region ../runtime-core/src/utils/slots.ts
+/**
+* Slots system for component children.
+* Supports default and named slots with reactivity.
+*/
+/**
+* Create slots object from children and slots prop.
+* Uses a version signal to trigger re-renders when children change.
+* 
+* Supports named slots via:
+* - `slots` prop object (e.g., `slots={{ header: () => <div>...</div> }}`)
+* - `slot` prop on children (e.g., `<div slot="header">...</div>`)
+* 
+* @example
+* ```tsx
+* // Parent component
+* <Card slots={{ header: () => <h1>Title</h1> }}>
+*   <p>Default content</p>
+*   <span slot="footer">Footer text</span>
+* </Card>
+* 
+* // Card component setup
+* const slots = createSlots(children, slotsFromProps);
+* return () => (
+*   <div>
+*     {slots.header()}
+*     {slots.default()}
+*     {slots.footer()}
+*   </div>
+* );
+* ```
+*/
+function createSlots(children, slotsFromProps) {
+	const versionSignal = signal({ v: 0 });
+	function extractNamedSlotsFromChildren(c) {
+		const defaultChildren = [];
+		const namedSlots = {};
+		if (c == null) return {
+			defaultChildren,
+			namedSlots
+		};
+		const items = Array.isArray(c) ? c : [c];
+		for (const child of items) if (child && typeof child === "object" && child.props && child.props.slot) {
+			const slotName = child.props.slot;
+			if (!namedSlots[slotName]) namedSlots[slotName] = [];
+			namedSlots[slotName].push(child);
+		} else defaultChildren.push(child);
+		return {
+			defaultChildren,
+			namedSlots
+		};
+	}
+	const slotsObj = {
+		_children: children,
+		_slotsFromProps: slotsFromProps || {},
+		_version: versionSignal,
+		_isPatching: false,
+		default: function() {
+			this._version.v;
+			const c = this._children;
+			const { defaultChildren } = extractNamedSlotsFromChildren(c);
+			return defaultChildren.filter((child) => child != null && child !== false && child !== true);
+		}
+	};
+	return new Proxy(slotsObj, { get(target, prop) {
+		if (prop in target) return target[prop];
+		if (typeof prop === "string") return function(scopedProps) {
+			target._version.v;
+			if (target._slotsFromProps && typeof target._slotsFromProps[prop] === "function") {
+				const result = target._slotsFromProps[prop](scopedProps);
+				if (result == null) return [];
+				return Array.isArray(result) ? result : [result];
+			}
+			const { namedSlots } = extractNamedSlotsFromChildren(target._children);
+			return namedSlots[prop] || [];
+		};
+	} });
+}
+
+//#endregion
+//#region ../runtime-core/src/utils/normalize.ts
+/**
+* VNode normalization utilities.
+* Converts render results into proper VNode structures.
+*/
+/**
+* Normalize render result to a VNode (wrapping arrays in Fragment).
+* Handles null, undefined, false, true by returning an empty Text node.
+* 
+* This is used to normalize the return value of component render functions
+* into a consistent VNode structure for the renderer to process.
+* 
+* @example
+* ```ts
+* // Conditional rendering returns null/false
+* normalizeSubTree(null)     // → empty Text node
+* normalizeSubTree(false)    // → empty Text node
+* 
+* // Arrays become Fragments
+* normalizeSubTree([<A/>, <B/>])  // → Fragment with children
+* 
+* // Primitives become Text nodes
+* normalizeSubTree("hello")  // → Text node
+* normalizeSubTree(42)       // → Text node
+* 
+* // VNodes pass through
+* normalizeSubTree(<div/>)   // → same VNode
+* ```
+*/
+function normalizeSubTree(result) {
+	if (result == null || result === false || result === true) return {
+		type: Text$1,
+		props: {},
+		key: null,
+		children: [],
+		dom: null,
+		text: ""
+	};
+	if (Array.isArray(result)) return {
+		type: Fragment$1,
+		props: {},
+		key: null,
+		children: result,
+		dom: null
+	};
+	if (typeof result === "string" || typeof result === "number") return {
+		type: Text$1,
+		props: {},
+		key: null,
+		children: [],
+		dom: null,
+		text: result
+	};
+	return result;
+}
+
 //#endregion
 //#region ../runtime-core/src/renderer.ts
 /**
@@ -340,7 +636,6 @@ function isComponent(type) {
 }
 function createRenderer(options) {
 	const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options;
-	let isPatching = false;
 	let currentAppContext = null;
 	function render$1(element, container, appContext) {
 		if (appContext) currentAppContext = appContext;
@@ -354,6 +649,13 @@ function createRenderer(options) {
 			dom: null,
 			text: element
 		};
+		else if (isComponent(element)) vnode = {
+			type: element,
+			props: {},
+			key: null,
+			children: [],
+			dom: null
+		};
 		else vnode = element;
 		if (vnode) {
 			if (oldVNode) patch(oldVNode, vnode, container);
@@ -365,6 +667,7 @@ function createRenderer(options) {
 		}
 	}
 	function mount(vnode, container, before = null) {
+		if (vnode == null || vnode === false || vnode === true) return;
 		if (vnode.type === Text$1) {
 			const node = hostCreateText(String(vnode.text));
 			vnode.dom = node;
@@ -376,7 +679,7 @@ function createRenderer(options) {
 			const anchor = hostCreateComment("");
 			vnode.dom = anchor;
 			hostInsert(anchor, container, before);
-			vnode.children.forEach((child) => mount(child, container, anchor));
+			if (vnode.children) vnode.children.forEach((child) => mount(child, container, anchor));
 			return;
 		}
 		if (isComponent(vnode.type)) {
@@ -393,17 +696,18 @@ function createRenderer(options) {
 				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = element;
 			}
 		}
-		vnode.children.forEach((child) => {
+		if (vnode.children) vnode.children.forEach((child) => {
 			child.parent = vnode;
 			mount(child, element);
 		});
 		hostInsert(element, container, before);
 	}
 	function unmount(vnode, container) {
-		if (vnode._effect) vnode._effect();
+		const internalVNode = vnode;
+		if (internalVNode._effect) internalVNode._effect.stop();
 		if (vnode.cleanup) vnode.cleanup();
 		if (isComponent(vnode.type)) {
-			const subTree = vnode._subTree;
+			const subTree = internalVNode._subTree;
 			if (subTree) unmount(subTree, container);
 			if (vnode.dom) hostRemove(vnode.dom);
 			if (vnode.props?.ref) {
@@ -413,7 +717,7 @@ function createRenderer(options) {
 			return;
 		}
 		if (vnode.type === Fragment$1) {
-			vnode.children.forEach((child) => unmount(child, container));
+			if (vnode.children) vnode.children.forEach((child) => unmount(child, container));
 			if (vnode.dom) hostRemove(vnode.dom);
 			return;
 		}
@@ -433,13 +737,15 @@ function createRenderer(options) {
 			mount(newVNode, parent, nextSibling);
 			return;
 		}
-		if (oldVNode._effect) {
+		const oldInternal = oldVNode;
+		const newInternal = newVNode;
+		if (oldInternal._effect) {
 			newVNode.dom = oldVNode.dom;
-			newVNode._effect = oldVNode._effect;
-			newVNode._subTree = oldVNode._subTree;
-			newVNode._slots = oldVNode._slots;
-			const props = oldVNode._componentProps;
-			newVNode._componentProps = props;
+			newInternal._effect = oldInternal._effect;
+			newInternal._subTree = oldInternal._subTree;
+			newInternal._slots = oldInternal._slots;
+			const props = oldInternal._componentProps;
+			newInternal._componentProps = props;
 			if (props) {
 				const newProps$1 = newVNode.props || {};
 				untrack(() => {
@@ -449,20 +755,20 @@ function createRenderer(options) {
 					for (const key in props) if (!(key in newProps$1) && key !== "children" && key !== "key" && key !== "ref") delete props[key];
 				});
 			}
-			const slotsRef = oldVNode._slots;
+			const slotsRef = oldInternal._slots;
 			const newChildren = newVNode.props?.children;
 			const newSlotsFromProps = newVNode.props?.slots;
 			if (slotsRef) {
 				if (newChildren !== void 0) slotsRef._children = newChildren;
 				if (newSlotsFromProps !== void 0) slotsRef._slotsFromProps = newSlotsFromProps;
-				if (!isPatching) {
-					isPatching = true;
+				if (!slotsRef._isPatching) {
+					slotsRef._isPatching = true;
 					try {
 						untrack(() => {
 							slotsRef._version.v++;
 						});
 					} finally {
-						isPatching = false;
+						slotsRef._isPatching = false;
 					}
 				}
 			}
@@ -576,9 +882,10 @@ function createRenderer(options) {
 		let exposeCalled = false;
 		const { children, slots: slotsFromProps, ...propsData } = vnode.props || {};
 		const reactiveProps = signal(propsData);
-		vnode._componentProps = reactiveProps;
+		const internalVNode = vnode;
+		internalVNode._componentProps = reactiveProps;
 		const slots = createSlots(children, slotsFromProps);
-		vnode._slots = slots;
+		internalVNode._slots = slots;
 		const mountHooks = [];
 		const cleanupHooks = [];
 		const parentInstance = getCurrentInstance();
@@ -586,7 +893,7 @@ function createRenderer(options) {
 		const ctx = {
 			el: container,
 			signal,
-			props: reactiveProps,
+			props: createPropsAccessor(reactiveProps),
 			slots,
 			emit: (event, ...args) => {
 				const handler = reactiveProps[`on${event[0].toUpperCase() + event.slice(1)}`];
@@ -602,8 +909,11 @@ function createRenderer(options) {
 			expose: (exposedValue) => {
 				exposed = exposedValue;
 				exposeCalled = true;
-			}
+			},
+			renderFn: null,
+			update: () => {}
 		};
+		applyContextExtensions(ctx);
 		ctx.__name = componentName;
 		if (currentAppContext) ctx._appContext = currentAppContext;
 		const componentInstance = {
@@ -614,7 +924,9 @@ function createRenderer(options) {
 		const prev = setCurrentInstance(ctx);
 		let renderFn;
 		try {
-			renderFn = setup(ctx);
+			const setupResult = setup(ctx);
+			if (setupResult && typeof setupResult.then === "function") throw new Error(`Async setup in component "${componentName}" is only supported during SSR. On the client, use pre-loaded data from hydration or fetch in onMount.`);
+			renderFn = setupResult;
 			notifyComponentCreated(currentAppContext, componentInstance);
 		} catch (err) {
 			if (!handleComponentError(currentAppContext, err, componentInstance, "setup")) throw err;
@@ -626,24 +938,31 @@ function createRenderer(options) {
 			if (typeof vnode.props.ref === "function") vnode.props.ref(refValue);
 			else if (vnode.props.ref && typeof vnode.props.ref === "object") vnode.props.ref.current = refValue;
 		}
-		if (renderFn) vnode._effect = effect(() => {
-			const prevInstance = setCurrentInstance(ctx);
-			try {
-				const subTreeResult = renderFn();
-				if (subTreeResult == null) return;
-				const subTree = normalizeSubTree(subTreeResult);
-				const prevSubTree = vnode._subTree;
-				if (prevSubTree) {
-					patch(prevSubTree, subTree, container);
-					notifyComponentUpdated(currentAppContext, componentInstance);
-				} else mount(subTree, container, anchor);
-				vnode._subTree = subTree;
-			} catch (err) {
-				if (!handleComponentError(currentAppContext, err, componentInstance, "render")) throw err;
-			} finally {
-				setCurrentInstance(prevInstance);
-			}
-		});
+		if (renderFn) {
+			ctx.renderFn = renderFn;
+			const componentEffect = effect(() => {
+				const prevInstance = setCurrentInstance(ctx);
+				try {
+					const subTreeResult = ctx.renderFn();
+					if (subTreeResult == null) return;
+					const subTree = normalizeSubTree(subTreeResult);
+					const prevSubTree = internalVNode._subTree;
+					if (prevSubTree) {
+						patch(prevSubTree, subTree, container);
+						notifyComponentUpdated(currentAppContext, componentInstance);
+					} else mount(subTree, container, anchor);
+					internalVNode._subTree = subTree;
+				} catch (err) {
+					if (!handleComponentError(currentAppContext, err, componentInstance, "render")) throw err;
+				} finally {
+					setCurrentInstance(prevInstance);
+				}
+			});
+			internalVNode._effect = componentEffect;
+			ctx.update = () => {
+				componentEffect();
+			};
+		}
 		const mountCtx = { el: container };
 		mountHooks.forEach((hook) => hook(mountCtx));
 		notifyComponentMounted(currentAppContext, componentInstance);
@@ -652,81 +971,12 @@ function createRenderer(options) {
 			cleanupHooks.forEach((hook) => hook(mountCtx));
 		};
 	}
-	/**
-	* Create slots object from children and slots prop.
-	* Uses a version signal to trigger re-renders when children change.
-	* Supports named slots via:
-	* - `slots` prop object (e.g., slots={{ header: () => <div>...</div> }})
-	* - `slot` prop on children (e.g., <div slot="header">...</div>)
-	*/
-	function createSlots(children, slotsFromProps) {
-		const versionSignal = signal({ v: 0 });
-		function extractNamedSlotsFromChildren(c) {
-			const defaultChildren = [];
-			const namedSlots = {};
-			if (c == null) return {
-				defaultChildren,
-				namedSlots
-			};
-			const items = Array.isArray(c) ? c : [c];
-			for (const child of items) if (child && typeof child === "object" && child.props && child.props.slot) {
-				const slotName = child.props.slot;
-				if (!namedSlots[slotName]) namedSlots[slotName] = [];
-				namedSlots[slotName].push(child);
-			} else defaultChildren.push(child);
-			return {
-				defaultChildren,
-				namedSlots
-			};
-		}
-		const slotsObj = {
-			_children: children,
-			_slotsFromProps: slotsFromProps || {},
-			_version: versionSignal,
-			default: function() {
-				this._version.v;
-				const c = this._children;
-				const { defaultChildren } = extractNamedSlotsFromChildren(c);
-				return defaultChildren;
-			}
-		};
-		return new Proxy(slotsObj, { get(target, prop) {
-			if (prop in target) return target[prop];
-			if (typeof prop === "string") return function(scopedProps) {
-				target._version.v;
-				if (target._slotsFromProps && typeof target._slotsFromProps[prop] === "function") {
-					const result = target._slotsFromProps[prop](scopedProps);
-					if (result == null) return [];
-					return Array.isArray(result) ? result : [result];
-				}
-				const { namedSlots } = extractNamedSlotsFromChildren(target._children);
-				return namedSlots[prop] || [];
-			};
-		} });
-	}
-	/**
-	* Normalize render result to a VNode (wrapping arrays in Fragment)
-	*/
-	function normalizeSubTree(result) {
-		if (Array.isArray(result)) return {
-			type: Fragment$1,
-			props: {},
-			key: null,
-			children: result,
-			dom: null
-		};
-		if (typeof result === "string" || typeof result === "number") return {
-			type: Text$1,
-			props: {},
-			key: null,
-			children: [],
-			dom: null,
-			text: result
-		};
-		return result;
-	}
 	return {
 		render: render$1,
+		patch,
+		mount,
+		unmount,
+		mountComponent,
 		createApp: (rootComponent) => {
 			return { mount(selectorOrContainer) {
 				let container = null;
@@ -811,6 +1061,60 @@ let platformSyncProcessor = null;
 function getPlatformSyncProcessor() {
 	return platformSyncProcessor;
 }
+const plugins = [];
+/**
+* Get all registered plugins (internal use)
+*/
+function getComponentPlugins() {
+	return plugins;
+}
+const componentRegistry = /* @__PURE__ */ new Map();
+/**
+* Define a component. Returns a JSX factory function.
+* 
+* @param setup - Setup function that receives context and returns a render function
+* @param options - Optional configuration (e.g., name for DevTools)
+* 
+* @example
+* ```tsx
+* type CardProps = DefineProp<"title", string> & DefineSlot<"header">;
+* 
+* export const Card = defineComponent<CardProps>((ctx) => {
+*     const { title } = ctx.props;
+*     const { slots } = ctx;
+*     
+*     return () => (
+*         <div class="card">
+*             {slots.header?.() ?? <h2>{title}</h2>}
+*             {slots.default()}
+*         </div>
+*     );
+* });
+* ```
+*/
+function defineComponent$1(setup, options) {
+	const factory = function(props) {
+		return {
+			type: factory,
+			props: props || {},
+			key: props?.key || null,
+			children: [],
+			dom: null
+		};
+	};
+	factory.__setup = setup;
+	factory.__name = options?.name;
+	factory.__props = null;
+	factory.__events = null;
+	factory.__ref = null;
+	factory.__slots = null;
+	componentRegistry.set(factory, {
+		name: options?.name,
+		setup
+	});
+	getComponentPlugins().forEach((p) => p.onDefine?.(options?.name, factory, setup));
+	return factory;
+}
 const Fragment = Symbol.for("sigx.Fragment");
 const Text = Symbol.for("sigx.Text");
 function normalizeChildren(children) {
@@ -905,6 +1209,100 @@ function jsx(type, props, key) {
 function jsxs(type, props, key) {
 	return jsx(type, props, key);
 }
+/**
+* Lazy loading utilities for sigx components.
+* 
+* Provides runtime-only lazy loading with no build dependencies.
+* Works with any bundler that supports dynamic import().
+*/
+let currentSuspenseBoundary = null;
+/**
+* Register a promise with the current Suspense boundary
+* @internal
+*/
+function registerPendingPromise(promise) {
+	const boundary = currentSuspenseBoundary;
+	if (boundary) {
+		boundary.pending.add(promise);
+		promise.finally(() => {
+			boundary.pending.delete(promise);
+			if (boundary.pending.size === 0) boundary.onResolve();
+		});
+		return true;
+	}
+	return false;
+}
+/**
+* Suspense boundary component for handling async loading states.
+* 
+* Wraps lazy-loaded components and shows a fallback while they load.
+* 
+* @example
+* ```tsx
+* import { lazy, Suspense } from 'sigx';
+* 
+* const LazyDashboard = lazy(() => import('./Dashboard'));
+* 
+* // Basic usage
+* <Suspense fallback={<div>Loading...</div>}>
+*     <LazyDashboard />
+* </Suspense>
+* 
+* // With spinner component
+* <Suspense fallback={<Spinner size="large" />}>
+*     <LazyDashboard />
+*     <LazyCharts />
+* </Suspense>
+* ```
+*/
+const Suspense = defineComponent$1((ctx) => {
+	const { props, slots } = ctx;
+	const state = ctx.signal({
+		isReady: false,
+		pendingCount: 0
+	});
+	const boundary = {
+		pending: /* @__PURE__ */ new Set(),
+		onResolve: () => {
+			state.pendingCount = boundary.pending.size;
+			if (boundary.pending.size === 0) state.isReady = true;
+		}
+	};
+	ctx.onMount(() => {
+		if (boundary.pending.size === 0) state.isReady = true;
+	});
+	return () => {
+		state.isReady;
+		state.pendingCount;
+		const prevBoundary = currentSuspenseBoundary;
+		currentSuspenseBoundary = boundary;
+		try {
+			const children = slots.default();
+			if (boundary.pending.size > 0) {
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			if (Array.isArray(children)) {
+				const filtered = children.filter((c) => c != null && c !== false && c !== true);
+				if (filtered.length === 0) return null;
+				if (filtered.length === 1) return filtered[0];
+				return filtered;
+			}
+			return children;
+		} catch (err) {
+			if (err instanceof Promise) {
+				registerPendingPromise(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
 
 //#endregion
 //#region src/components/Input.tsx