@sigx/terminal 0.1.3 → 0.1.5

package/dist/index.js

@@ -16,15 +16,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;
@@ -158,8 +160,16 @@ function watch(source, cb, options) {
 	let oldValue;
 	let isFirst = true;
 	let cleanupFn = null;
+	let paused = false;
+	let pendingValue;
+	let hasPending = false;
 	const runner = effect(() => {
 		const newValue = typeof source === "function" ? source() : source;
+		if (paused) {
+			pendingValue = newValue;
+			hasPending = true;
+			return;
+		}
 		if (isFirst) {
 			if (options?.immediate) {
 				if (cleanupFn) cleanupFn();
@@ -173,14 +183,28 @@ function watch(source, cb, options) {
 		oldValue = newValue;
 	});
 	const stop = () => {
-		runner();
+		runner.stop();
 		if (cleanupFn) cleanupFn();
 	};
-	const handle = stop;
-	handle.stop = stop;
-	handle.pause = () => {};
-	handle.resume = () => {};
-	return handle;
+	const pause = () => {
+		paused = true;
+	};
+	const resume = () => {
+		if (!paused) return;
+		paused = false;
+		if (hasPending && !Object.is(pendingValue, oldValue)) {
+			if (cleanupFn) cleanupFn();
+			cb(pendingValue, oldValue, (fn) => cleanupFn = fn);
+			oldValue = pendingValue;
+		}
+		hasPending = false;
+		pendingValue = void 0;
+	};
+	return Object.assign(stop, {
+		stop,
+		pause,
+		resume
+	});
 }
 function effectScope(detached) {
 	const effects = [];
@@ -216,15 +240,38 @@ function getPlatformSyncProcessor() {
 
 //#endregion
 //#region ../runtime-core/src/plugins.ts
-const plugins = [];
+const plugins$1 = [];
 function registerComponentPlugin(plugin) {
-	plugins.push(plugin);
+	plugins$1.push(plugin);
 }
 /**
 * Get all registered plugins (internal use)
 */
 function getComponentPlugins() {
-	return plugins;
+	return plugins$1;
+}
+const contextExtensions = [];
+/**
+* Register a function that will be called to extend every component context.
+* Extensions are called in order of registration.
+* 
+* @example
+* ```ts
+* // In @sigx/server-renderer/client
+* registerContextExtension((ctx) => {
+*     ctx.ssr = { load: () => {} };
+* });
+* ```
+*/
+function registerContextExtension(extension) {
+	contextExtensions.push(extension);
+}
+/**
+* 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
@@ -442,12 +489,12 @@ 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();
 /**
 * Get component metadata (for DevTools)
 */
 function getComponentMeta(factory) {
-	return componentRegistry.get(factory);
+	return componentRegistry$1.get(factory);
 }
 /**
 * Helper to create a proxy that tracks property access
@@ -497,7 +544,7 @@ function defineComponent(setup, options) {
 	factory.__events = null;
 	factory.__ref = null;
 	factory.__slots = null;
-	componentRegistry.set(factory, {
+	componentRegistry$1.set(factory, {
 		name: options?.name,
 		setup
 	});
@@ -603,6 +650,190 @@ function jsxs(type, props, key) {
 }
 const jsxDEV = jsx;
 
+//#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(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;
+}
+/**
+* Create a lazy-loaded component wrapper.
+* 
+* The component will be loaded on first render. Use with `<Suspense>` to show
+* a fallback while loading.
+* 
+* @param loader - Function that returns a Promise resolving to the component
+* @returns A component factory that loads the real component on demand
+* 
+* @example
+* ```tsx
+* import { lazy, Suspense } from 'sigx';
+* 
+* // Component will be in a separate chunk
+* const HeavyChart = lazy(() => import('./components/HeavyChart'));
+* 
+* // Usage
+* <Suspense fallback={<Spinner />}>
+*     <HeavyChart data={chartData} />
+* </Suspense>
+* 
+* // Preload on hover
+* <button onMouseEnter={() => HeavyChart.preload()}>
+*     Show Chart
+* </button>
+* ```
+*/
+function lazy(loader) {
+	let Component = null;
+	let promise = null;
+	let error = null;
+	let state = "pending";
+	const LazyWrapper = defineComponent((ctx) => {
+		const loadState = ctx.signal({
+			state,
+			tick: 0
+		});
+		if (!promise) promise = loader().then((mod) => {
+			Component = "default" in mod ? mod.default : mod;
+			state = "resolved";
+			loadState.state = "resolved";
+			loadState.tick++;
+			return Component;
+		}).catch((err) => {
+			error = err instanceof Error ? err : new Error(String(err));
+			state = "rejected";
+			loadState.state = "rejected";
+			loadState.tick++;
+			throw error;
+		});
+		if (state === "resolved" && Component) return () => {
+			return jsx(Component, {});
+		};
+		if (state === "rejected" && error) throw error;
+		if (!registerPendingPromise(promise)) promise.catch(() => {});
+		return () => {
+			const currentState = loadState.state;
+			loadState.tick;
+			if (currentState === "resolved" && Component) return jsx(Component, {});
+			if (currentState === "rejected" && error) throw error;
+			return null;
+		};
+	}, { name: "LazyComponent" });
+	LazyWrapper.__lazy = true;
+	LazyWrapper.preload = () => {
+		if (!promise) promise = loader().then((mod) => {
+			Component = "default" in mod ? mod.default : mod;
+			state = "resolved";
+			return Component;
+		}).catch((err) => {
+			error = err instanceof Error ? err : new Error(String(err));
+			state = "rejected";
+			throw error;
+		});
+		return promise;
+	};
+	LazyWrapper.isLoaded = () => {
+		return state === "resolved";
+	};
+	return LazyWrapper;
+}
+/**
+* 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((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(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary$1 = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
+/**
+* Check if a component is a lazy-loaded component
+*/
+function isLazyComponent(component) {
+	return component && component.__lazy === true;
+}
+
 //#endregion
 //#region ../runtime-core/src/utils/index.ts
 var Utils = class {
@@ -617,6 +848,195 @@ function guid$1() {
 	});
 }
 
+//#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,
+		props: {},
+		key: null,
+		children: [],
+		dom: null,
+		text: ""
+	};
+	if (Array.isArray(result)) return {
+		type: Fragment,
+		props: {},
+		key: null,
+		children: result,
+		dom: null
+	};
+	if (typeof result === "string" || typeof result === "number") return {
+		type: Text,
+		props: {},
+		key: null,
+		children: [],
+		dom: null,
+		text: result
+	};
+	return result;
+}
+
 //#endregion
 //#region ../runtime-core/src/models/index.ts
 const guid = guid$1;
@@ -913,7 +1333,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;
@@ -927,6 +1346,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);
@@ -938,6 +1364,7 @@ function createRenderer(options) {
 		}
 	}
 	function mount(vnode, container, before = null) {
+		if (vnode == null || vnode === false || vnode === true) return;
 		if (vnode.type === Text) {
 			const node = hostCreateText(String(vnode.text));
 			vnode.dom = node;
@@ -949,7 +1376,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)) {
@@ -966,17 +1393,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) {
@@ -986,7 +1414,7 @@ function createRenderer(options) {
 			return;
 		}
 		if (vnode.type === Fragment) {
-			vnode.children.forEach((child) => unmount(child, container));
+			if (vnode.children) vnode.children.forEach((child) => unmount(child, container));
 			if (vnode.dom) hostRemove(vnode.dom);
 			return;
 		}
@@ -1006,13 +1434,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(() => {
@@ -1022,20 +1452,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;
 					}
 				}
 			}
@@ -1149,9 +1579,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();
@@ -1159,7 +1590,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)}`];
@@ -1175,8 +1606,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 = {
@@ -1187,7 +1621,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;
@@ -1199,24 +1635,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);
@@ -1225,81 +1668,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,
-			props: {},
-			key: null,
-			children: result,
-			dom: null
-		};
-		if (typeof result === "string" || typeof result === "number") return {
-			type: Text,
-			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;
@@ -1384,6 +1758,60 @@ let platformSyncProcessor = null;
 function getPlatformSyncProcessor$1() {
 	return platformSyncProcessor;
 }
+const plugins = [];
+/**
+* Get all registered plugins (internal use)
+*/
+function getComponentPlugins$1() {
+	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$1().forEach((p) => p.onDefine?.(options?.name, factory, setup));
+	return factory;
+}
 const Fragment$1 = Symbol.for("sigx.Fragment");
 const Text$1 = Symbol.for("sigx.Text");
 function normalizeChildren(children) {
@@ -1478,6 +1906,100 @@ function jsx$1(type, props, key) {
 function jsxs$1(type, props, key) {
 	return jsx$1(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$1(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$1 = 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$1(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
 
 //#endregion
 //#region ../runtime-terminal/src/components/Input.tsx
@@ -2024,5 +2546,5 @@ const terminalMount = (component, options, appContext) => {
 setDefaultMount(terminalMount);
 
 //#endregion
-export { AppContextKey, Button, Checkbox, Fragment, Input, InstanceLifetimes, ProgressBar, Select, SubscriptionHandler, Text, Utils, batch, createApp, createPropsProxy, createRenderer, createTopic, defineApp, defineComponent, defineFactory, defineInjectable, defineProvide, defineStore, detectAccess, effect, effectScope, exitTerminal, focus, focusNext, focusPrev, focusState, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getPlatformSyncProcessor, guid, handleComponentError, inject, injectApp, jsx, jsxDEV, jsxs, mountTerminal, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCleanup, onKey, onMount, provide, registerComponentPlugin, registerFocusable, render, renderNodeToLines, renderTerminal, setCurrentInstance, setDefaultMount, setPlatformSyncProcessor, signal, terminalMount, toSubscriber, unregisterFocusable, untrack, valueOf, watch };
+export { AppContextKey, Button, Checkbox, Fragment, Input, InstanceLifetimes, ProgressBar, Select, SubscriptionHandler, Suspense, Text, Utils, applyContextExtensions, batch, createApp, createPropsAccessor, createPropsProxy, createRenderer, createSlots, createTopic, defineApp, defineComponent, defineFactory, defineInjectable, defineProvide, defineStore, detectAccess, effect, effectScope, exitTerminal, focus, focusNext, focusPrev, focusState, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getPlatformSyncProcessor, guid, handleComponentError, inject, injectApp, isLazyComponent, jsx, jsxDEV, jsxs, lazy, mountTerminal, normalizeSubTree, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCleanup, onKey, onMount, provide, registerComponentPlugin, registerContextExtension, registerFocusable, registerPendingPromise, render, renderNodeToLines, renderTerminal, setCurrentInstance, setDefaultMount, setPlatformSyncProcessor, signal, terminalMount, toSubscriber, unregisterFocusable, untrack, valueOf, watch };
 //# sourceMappingURL=index.js.map