@sigx/runtime-terminal 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,1002 +1,8 @@
-//#region ../runtime-core/src/plugins.ts
-const plugins$1 = [];
-/**
-* Get all registered plugins (internal use)
-*/
-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
-//#region ../runtime-core/src/app.ts
-let defaultMountFn = null;
-/**
-* Set the default mount function for the platform.
-* Called by platform packages (runtime-dom, runtime-terminal) on import.
-* 
-* @example
-* ```typescript
-* // In @sigx/runtime-dom
-* import { setDefaultMount } from '@sigx/runtime-core';
-* setDefaultMount(domMount);
-* ```
-*/
-function setDefaultMount(mountFn) {
-	defaultMountFn = mountFn;
-}
-/**
-* Notify all app hooks that a component was created.
-* Called by the renderer after setup() returns.
-*/
-function notifyComponentCreated(context, instance) {
-	if (!context) return;
-	for (const hooks of context.hooks) try {
-		hooks.onComponentCreated?.(instance);
-	} catch (err) {
-		handleHookError(context, err, instance, "onComponentCreated");
-	}
-}
-/**
-* Notify all app hooks that a component was mounted.
-* Called by the renderer after mount hooks run.
-*/
-function notifyComponentMounted(context, instance) {
-	if (!context) return;
-	for (const hooks of context.hooks) try {
-		hooks.onComponentMounted?.(instance);
-	} catch (err) {
-		handleHookError(context, err, instance, "onComponentMounted");
-	}
-}
-/**
-* Notify all app hooks that a component was unmounted.
-* Called by the renderer before cleanup.
-*/
-function notifyComponentUnmounted(context, instance) {
-	if (!context) return;
-	for (const hooks of context.hooks) try {
-		hooks.onComponentUnmounted?.(instance);
-	} catch (err) {
-		handleHookError(context, err, instance, "onComponentUnmounted");
-	}
-}
-/**
-* Notify all app hooks that a component updated.
-* Called by the renderer after re-render.
-*/
-function notifyComponentUpdated(context, instance) {
-	if (!context) return;
-	for (const hooks of context.hooks) try {
-		hooks.onComponentUpdated?.(instance);
-	} catch (err) {
-		handleHookError(context, err, instance, "onComponentUpdated");
-	}
-}
-/**
-* Handle an error in a component. Returns true if the error was handled.
-* Called by the renderer when an error occurs in setup or render.
-*/
-function handleComponentError(context, err, instance, info) {
-	if (!context) return false;
-	for (const hooks of context.hooks) try {
-		if (hooks.onComponentError?.(err, instance, info) === true) return true;
-	} catch (hookErr) {
-		console.error("Error in onComponentError hook:", hookErr);
-	}
-	if (context.config.errorHandler) try {
-		if (context.config.errorHandler(err, instance, info) === true) return true;
-	} catch (handlerErr) {
-		console.error("Error in app.config.errorHandler:", handlerErr);
-	}
-	return false;
-}
-/**
-* Handle errors that occur in hooks themselves
-*/
-function handleHookError(context, err, instance, hookName) {
-	console.error(`Error in ${hookName} hook:`, err);
-	if (context.config.errorHandler) try {
-		context.config.errorHandler(err, instance, `plugin hook: ${hookName}`);
-	} catch {}
-}
-
-//#endregion
-//#region ../runtime-core/src/component.ts
-let currentComponentContext = null;
-function getCurrentInstance() {
-	return currentComponentContext;
-}
-function setCurrentInstance(ctx) {
-	const prev = currentComponentContext;
-	currentComponentContext = ctx;
-	return prev;
-}
-function onMount(fn) {
-	if (currentComponentContext) currentComponentContext.onMount(fn);
-	else console.warn("onMount called outside of component setup");
-}
-function onCleanup(fn) {
-	if (currentComponentContext) currentComponentContext.onCleanup(fn);
-	else console.warn("onCleanup called outside of component setup");
-}
-const componentRegistry$1 = /* @__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(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$1.set(factory, {
-		name: options?.name,
-		setup
-	});
-	getComponentPlugins$1().forEach((p) => p.onDefine?.(options?.name, factory, setup));
-	return factory;
-}
-
-//#endregion
-//#region ../reactivity/src/index.ts
-let activeEffect = null;
-let batchDepth = 0;
-const pendingEffects = /* @__PURE__ */ new Set();
-function batch(fn) {
-	batchDepth++;
-	try {
-		fn();
-	} finally {
-		batchDepth--;
-		if (batchDepth === 0) {
-			const effects = Array.from(pendingEffects);
-			pendingEffects.clear();
-			for (const effect$1 of effects) effect$1();
-		}
-	}
-}
-function runEffect(fn) {
-	const effectFn = function() {
-		cleanup(effectFn);
-		activeEffect = effectFn;
-		fn();
-		activeEffect = null;
-	};
-	effectFn.deps = [];
-	effectFn();
-	const runner = (() => effectFn());
-	runner.stop = () => cleanup(effectFn);
-	return runner;
-}
-function cleanup(effect$1) {
-	if (!effect$1.deps) return;
-	for (const dep of effect$1.deps) dep.delete(effect$1);
-	effect$1.deps.length = 0;
-}
-function track(depSet) {
-	if (!activeEffect) return;
-	depSet.add(activeEffect);
-	activeEffect.deps.push(depSet);
-}
-function trigger(depSet) {
-	const effects = Array.from(depSet);
-	for (const effect$1 of effects) if (batchDepth > 0) pendingEffects.add(effect$1);
-	else effect$1();
-}
-let accessObserver = null;
-function detectAccess(selector) {
-	let result = null;
-	const prev = accessObserver;
-	accessObserver = (target, key) => {
-		result = [target, key];
-	};
-	try {
-		selector();
-	} finally {
-		accessObserver = prev;
-	}
-	return result;
-}
-function untrack(fn) {
-	const prev = activeEffect;
-	activeEffect = null;
-	try {
-		return fn();
-	} finally {
-		activeEffect = prev;
-	}
-}
-function signal(target) {
-	const depsMap = /* @__PURE__ */ new Map();
-	const reactiveCache = /* @__PURE__ */ new WeakMap();
-	return new Proxy(target, {
-		get(obj, prop, receiver) {
-			if (prop === "$set") return (newValue) => {
-				batch(() => {
-					if (Array.isArray(obj) && Array.isArray(newValue)) {
-						const len = newValue.length;
-						for (let i = 0; i < len; i++) Reflect.set(receiver, String(i), newValue[i]);
-						Reflect.set(receiver, "length", len);
-					} else {
-						const newKeys = Object.keys(newValue);
-						const oldKeys = Object.keys(obj);
-						for (const key of newKeys) Reflect.set(receiver, key, newValue[key]);
-						for (const key of oldKeys) if (!(key in newValue)) Reflect.deleteProperty(receiver, key);
-					}
-				});
-			};
-			if (Array.isArray(obj) && typeof prop === "string" && arrayInstrumentations.hasOwnProperty(prop)) return arrayInstrumentations[prop];
-			const value = Reflect.get(obj, prop);
-			if (accessObserver) accessObserver(receiver, prop);
-			let dep = depsMap.get(prop);
-			if (!dep) {
-				dep = /* @__PURE__ */ new Set();
-				depsMap.set(prop, dep);
-			}
-			track(dep);
-			if (value && typeof value === "object") {
-				let cached = reactiveCache.get(value);
-				if (!cached) {
-					cached = signal(value);
-					reactiveCache.set(value, cached);
-				}
-				return cached;
-			}
-			return value;
-		},
-		set(obj, prop, newValue) {
-			const oldLength = Array.isArray(obj) ? obj.length : 0;
-			const oldValue = Reflect.get(obj, prop);
-			const result = Reflect.set(obj, prop, newValue);
-			if (!Object.is(oldValue, newValue)) {
-				const dep = depsMap.get(prop);
-				if (dep) trigger(dep);
-				if (Array.isArray(obj)) {
-					if (prop !== "length" && obj.length !== oldLength) {
-						const lengthDep = depsMap.get("length");
-						if (lengthDep) trigger(lengthDep);
-					}
-					if (prop === "length" && typeof newValue === "number" && newValue < oldLength) for (let i = newValue; i < oldLength; i++) {
-						const idxDep = depsMap.get(String(i));
-						if (idxDep) trigger(idxDep);
-					}
-				}
-			}
-			return result;
-		},
-		deleteProperty(obj, prop) {
-			const hasKey = Object.prototype.hasOwnProperty.call(obj, prop);
-			const result = Reflect.deleteProperty(obj, prop);
-			if (result && hasKey) {
-				const dep = depsMap.get(prop);
-				if (dep) trigger(dep);
-			}
-			return result;
-		}
-	});
-}
-function effect(fn) {
-	return runEffect(fn);
-}
-const arrayInstrumentations = {};
-[
-	"push",
-	"pop",
-	"shift",
-	"unshift",
-	"splice",
-	"sort",
-	"reverse"
-].forEach((method) => {
-	arrayInstrumentations[method] = function(...args) {
-		let res;
-		batch(() => {
-			res = Array.prototype[method].apply(this, args);
-		});
-		return res;
-	};
-});
-
-//#endregion
-//#region ../runtime-core/src/jsx-runtime.ts
-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
-/**
-* Check if a vnode type is a component (has __setup)
-*/
-function isComponent(type) {
-	return typeof type === "function" && "__setup" in 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 currentAppContext = null;
-	function render$1(element, container, appContext) {
-		if (appContext) currentAppContext = appContext;
-		const oldVNode = container._vnode;
-		let vnode = null;
-		if (element != null && element !== false && element !== true) if (typeof element === "string" || typeof element === "number") vnode = {
-			type: Text$1,
-			props: {},
-			key: null,
-			children: [],
-			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);
-			else mount(vnode, container);
-			container._vnode = vnode;
-		} else if (oldVNode) {
-			unmount(oldVNode, container);
-			container._vnode = null;
-		}
-	}
-	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;
-			node.__vnode = vnode;
-			hostInsert(node, container, before);
-			return;
-		}
-		if (vnode.type === Fragment$1) {
-			const anchor = hostCreateComment("");
-			vnode.dom = anchor;
-			hostInsert(anchor, container, before);
-			if (vnode.children) vnode.children.forEach((child) => mount(child, container, anchor));
-			return;
-		}
-		if (isComponent(vnode.type)) {
-			mountComponent(vnode, container, before, vnode.type.__setup);
-			return;
-		}
-		const element = hostCreateElement(vnode.type);
-		vnode.dom = element;
-		element.__vnode = vnode;
-		if (vnode.props) {
-			for (const key in vnode.props) if (key !== "children" && key !== "key" && key !== "ref") hostPatchProp(element, key, null, vnode.props[key]);
-			if (vnode.props.ref) {
-				if (typeof vnode.props.ref === "function") vnode.props.ref(element);
-				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = element;
-			}
-		}
-		if (vnode.children) vnode.children.forEach((child) => {
-			child.parent = vnode;
-			mount(child, element);
-		});
-		hostInsert(element, container, before);
-	}
-	function unmount(vnode, container) {
-		const internalVNode = vnode;
-		if (internalVNode._effect) internalVNode._effect.stop();
-		if (vnode.cleanup) vnode.cleanup();
-		if (isComponent(vnode.type)) {
-			const subTree = internalVNode._subTree;
-			if (subTree) unmount(subTree, container);
-			if (vnode.dom) hostRemove(vnode.dom);
-			if (vnode.props?.ref) {
-				if (typeof vnode.props.ref === "function") vnode.props.ref(null);
-				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = null;
-			}
-			return;
-		}
-		if (vnode.type === Fragment$1) {
-			if (vnode.children) vnode.children.forEach((child) => unmount(child, container));
-			if (vnode.dom) hostRemove(vnode.dom);
-			return;
-		}
-		if (vnode.props?.ref) {
-			if (typeof vnode.props.ref === "function") vnode.props.ref(null);
-			else if (vnode.props.ref && typeof vnode.props.ref === "object") vnode.props.ref.current = null;
-		}
-		if (vnode.children && vnode.children.length > 0) vnode.children.forEach((child) => unmount(child, vnode.dom));
-		if (vnode.dom) hostRemove(vnode.dom);
-	}
-	function patch(oldVNode, newVNode, container) {
-		if (oldVNode === newVNode) return;
-		if (!isSameVNode(oldVNode, newVNode)) {
-			const parent = hostParentNode(oldVNode.dom) || container;
-			const nextSibling = hostNextSibling(oldVNode.dom);
-			unmount(oldVNode, parent);
-			mount(newVNode, parent, nextSibling);
-			return;
-		}
-		const oldInternal = oldVNode;
-		const newInternal = newVNode;
-		if (oldInternal._effect) {
-			newVNode.dom = oldVNode.dom;
-			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(() => {
-					for (const key in newProps$1) if (key !== "children" && key !== "key" && key !== "ref") {
-						if (props[key] !== newProps$1[key]) props[key] = newProps$1[key];
-					}
-					for (const key in props) if (!(key in newProps$1) && key !== "children" && key !== "key" && key !== "ref") delete props[key];
-				});
-			}
-			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 (!slotsRef._isPatching) {
-					slotsRef._isPatching = true;
-					try {
-						untrack(() => {
-							slotsRef._version.v++;
-						});
-					} finally {
-						slotsRef._isPatching = false;
-					}
-				}
-			}
-			return;
-		}
-		if (newVNode.type === Text$1) {
-			newVNode.dom = oldVNode.dom;
-			if (oldVNode.text !== newVNode.text) hostSetText(newVNode.dom, String(newVNode.text));
-			return;
-		}
-		if (newVNode.type === Fragment$1) {
-			patchChildren(oldVNode, newVNode, container);
-			return;
-		}
-		const element = newVNode.dom = oldVNode.dom;
-		const oldProps = oldVNode.props || {};
-		const newProps = newVNode.props || {};
-		for (const key in oldProps) if (!(key in newProps) && key !== "children" && key !== "key" && key !== "ref") hostPatchProp(element, key, oldProps[key], null);
-		for (const key in newProps) {
-			const oldValue = oldProps[key];
-			const newValue = newProps[key];
-			if (key !== "children" && key !== "key" && key !== "ref" && oldValue !== newValue) hostPatchProp(element, key, oldValue, newValue);
-		}
-		patchChildren(oldVNode, newVNode, element);
-	}
-	function patchChildren(oldVNode, newVNode, container) {
-		const oldChildren = oldVNode.children;
-		const newChildren = newVNode.children;
-		newChildren.forEach((c) => c.parent = newVNode);
-		reconcileChildrenArray(container, oldChildren, newChildren);
-	}
-	function reconcileChildrenArray(parent, oldChildren, newChildren) {
-		let oldStartIdx = 0;
-		let oldEndIdx = oldChildren.length - 1;
-		let oldStartVNode = oldChildren[0];
-		let oldEndVNode = oldChildren[oldEndIdx];
-		let newStartIdx = 0;
-		let newEndIdx = newChildren.length - 1;
-		let newStartVNode = newChildren[0];
-		let newEndVNode = newChildren[newEndIdx];
-		let oldKeyToIdx;
-		while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) if (oldStartVNode == null) oldStartVNode = oldChildren[++oldStartIdx];
-		else if (oldEndVNode == null) oldEndVNode = oldChildren[--oldEndIdx];
-		else if (isSameVNode(oldStartVNode, newStartVNode)) {
-			patch(oldStartVNode, newStartVNode, parent);
-			oldStartVNode = oldChildren[++oldStartIdx];
-			newStartVNode = newChildren[++newStartIdx];
-		} else if (isSameVNode(oldEndVNode, newEndVNode)) {
-			patch(oldEndVNode, newEndVNode, parent);
-			oldEndVNode = oldChildren[--oldEndIdx];
-			newEndVNode = newChildren[--newEndIdx];
-		} else if (isSameVNode(oldStartVNode, newEndVNode)) {
-			patch(oldStartVNode, newEndVNode, parent);
-			const nodeToMove = oldStartVNode.dom;
-			const anchor = hostNextSibling(oldEndVNode.dom);
-			if (nodeToMove) hostInsert(nodeToMove, parent, anchor);
-			oldStartVNode = oldChildren[++oldStartIdx];
-			newEndVNode = newChildren[--newEndIdx];
-		} else if (isSameVNode(oldEndVNode, newStartVNode)) {
-			patch(oldEndVNode, newStartVNode, parent);
-			const nodeToMove = oldEndVNode.dom;
-			const anchor = oldStartVNode.dom;
-			if (nodeToMove) hostInsert(nodeToMove, parent, anchor);
-			oldEndVNode = oldChildren[--oldEndIdx];
-			newStartVNode = newChildren[++newStartIdx];
-		} else {
-			if (!oldKeyToIdx) oldKeyToIdx = createKeyToKeyIndexMap(oldChildren, oldStartIdx, oldEndIdx);
-			const idxInOld = newStartVNode.key != null ? oldKeyToIdx.get(String(newStartVNode.key)) : findIndexInOld(oldChildren, newStartVNode, oldStartIdx, oldEndIdx);
-			if (idxInOld != null) {
-				const vnodeToMove = oldChildren[idxInOld];
-				patch(vnodeToMove, newStartVNode, parent);
-				oldChildren[idxInOld] = void 0;
-				if (vnodeToMove.dom && oldStartVNode.dom) hostInsert(vnodeToMove.dom, parent, oldStartVNode.dom);
-			} else mount(newStartVNode, parent, oldStartVNode.dom);
-			newStartVNode = newChildren[++newStartIdx];
-		}
-		if (oldStartIdx > oldEndIdx) {
-			if (newStartIdx <= newEndIdx) {
-				const anchor = newChildren[newEndIdx + 1] == null ? null : newChildren[newEndIdx + 1].dom;
-				for (let i = newStartIdx; i <= newEndIdx; i++) mount(newChildren[i], parent, anchor);
-			}
-		} else if (newStartIdx > newEndIdx) {
-			for (let i = oldStartIdx; i <= oldEndIdx; i++) if (oldChildren[i]) unmount(oldChildren[i], parent);
-		}
-	}
-	function isSameVNode(n1, n2) {
-		const k1 = n1.key == null ? null : n1.key;
-		const k2 = n2.key == null ? null : n2.key;
-		if (n1.type !== n2.type) return false;
-		if (k1 === k2) return true;
-		return String(k1) === String(k2);
-	}
-	function createKeyToKeyIndexMap(children, beginIdx, endIdx) {
-		const map = /* @__PURE__ */ new Map();
-		for (let i = beginIdx; i <= endIdx; i++) {
-			const key = children[i]?.key;
-			if (key != null) map.set(String(key), i);
-		}
-		return map;
-	}
-	function findIndexInOld(children, newChild, beginIdx, endIdx) {
-		for (let i = beginIdx; i <= endIdx; i++) if (children[i] && isSameVNode(children[i], newChild)) return i;
-		return null;
-	}
-	function mountComponent(vnode, container, before, setup) {
-		const anchor = hostCreateComment("");
-		vnode.dom = anchor;
-		anchor.__vnode = vnode;
-		hostInsert(anchor, container, before);
-		let exposed = null;
-		let exposeCalled = false;
-		const { children, slots: slotsFromProps, ...propsData } = vnode.props || {};
-		const reactiveProps = signal(propsData);
-		const internalVNode = vnode;
-		internalVNode._componentProps = reactiveProps;
-		const slots = createSlots(children, slotsFromProps);
-		internalVNode._slots = slots;
-		const mountHooks = [];
-		const cleanupHooks = [];
-		const parentInstance = getCurrentInstance();
-		const componentName = vnode.type.__name;
-		const ctx = {
-			el: container,
-			signal,
-			props: createPropsAccessor(reactiveProps),
-			slots,
-			emit: (event, ...args) => {
-				const handler = reactiveProps[`on${event[0].toUpperCase() + event.slice(1)}`];
-				if (handler && typeof handler === "function") handler(...args);
-			},
-			parent: parentInstance,
-			onMount: (fn) => {
-				mountHooks.push(fn);
-			},
-			onCleanup: (fn) => {
-				cleanupHooks.push(fn);
-			},
-			expose: (exposedValue) => {
-				exposed = exposedValue;
-				exposeCalled = true;
-			},
-			renderFn: null,
-			update: () => {}
-		};
-		applyContextExtensions(ctx);
-		ctx.__name = componentName;
-		if (currentAppContext) ctx._appContext = currentAppContext;
-		const componentInstance = {
-			name: componentName,
-			ctx,
-			vnode
-		};
-		const prev = setCurrentInstance(ctx);
-		let renderFn;
-		try {
-			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;
-		} finally {
-			setCurrentInstance(prev);
-		}
-		if (vnode.props?.ref) {
-			const refValue = exposeCalled ? exposed : null;
-			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) {
-			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);
-		vnode.cleanup = () => {
-			notifyComponentUnmounted(currentAppContext, componentInstance);
-			cleanupHooks.forEach((hook) => hook(mountCtx));
-		};
-	}
-	return {
-		render: render$1,
-		patch,
-		mount,
-		unmount,
-		mountComponent,
-		createApp: (rootComponent) => {
-			return { mount(selectorOrContainer) {
-				let container = null;
-				if (typeof selectorOrContainer === "string") {
-					if (options.querySelector) container = options.querySelector(selectorOrContainer);
-				} else container = selectorOrContainer;
-				if (!container) {
-					console.warn(`Container not found: ${selectorOrContainer}`);
-					return;
-				}
-				render$1(rootComponent, container);
-			} };
-		}
-	};
-}
-
-//#endregion
-//#region src/focus.ts
-const focusableIds = /* @__PURE__ */ new Set();
-const focusState = signal({ activeId: null });
+import { component as component$1, createRenderer, onMounted, onUnmounted, setDefaultMount, signal } from "@sigx/runtime-core";
+import { signal as signal$1 } from "@sigx/reactivity";
+import { jsx, jsxs } from "@sigx/runtime-core/jsx-runtime";
+var focusableIds = /* @__PURE__ */ new Set();
+const focusState = signal$1({ activeId: null });
 function registerFocusable(id) {
 	focusableIds.add(id);
 	if (focusState.activeId === null) focusState.activeId = id;
@@ -1021,9 +27,6 @@ function focusPrev() {
 	const ids = Array.from(focusableIds);
 	focusState.activeId = ids[((focusState.activeId ? ids.indexOf(focusState.activeId) : -1) - 1 + ids.length) % ids.length];
 }
-
-//#endregion
-//#region src/utils.ts
 function getColorCode(color) {
 	switch (color) {
 		case "red": return "\x1B[31m";
@@ -1051,298 +54,48 @@ function getBackgroundColorCode(color) {
 function stripAnsi(str) {
 	return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "");
 }
-
-//#endregion
-//#region ../runtime-core/dist/index.js
-let platformSyncProcessor = null;
-/**
-* Get the current platform sync processor (for internal use).
-*/
-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) {
-	if (children == null || children === false || children === true) return [];
-	if (Array.isArray(children)) return children.flatMap((c) => normalizeChildren(c));
-	if (typeof children === "string" || typeof children === "number") return [{
-		type: Text,
-		props: {},
-		key: null,
-		children: [],
-		dom: null,
-		text: children
-	}];
-	if (children.type) return [children];
-	return [];
-}
-/**
-* Check if a type is a sigx component (has __setup)
-*/
-function isComponent$1(type) {
-	return typeof type === "function" && "__setup" in type;
-}
-/**
-* Create a JSX element - this is the core function called by TSX transpilation
-*/
-function jsx(type, props, key) {
-	const processedProps = { ...props || {} };
-	if (props) {
-		for (const propKey in props) if (propKey === "sync") {
-			let syncBinding = props[propKey];
-			if (typeof syncBinding === "function") {
-				const detected = detectAccess(syncBinding);
-				if (detected) syncBinding = detected;
-			}
-			if (Array.isArray(syncBinding) && syncBinding.length === 2) {
-				const [stateObj, key$1] = syncBinding;
-				let handled = false;
-				const platformProcessor = getPlatformSyncProcessor();
-				if (typeof type === "string" && platformProcessor) handled = platformProcessor(type, processedProps, [stateObj, key$1], props);
-				if (!handled) {
-					processedProps.value = stateObj[key$1];
-					const existingHandler = processedProps["onUpdate:value"];
-					processedProps["onUpdate:value"] = (v) => {
-						stateObj[key$1] = v;
-						if (existingHandler) existingHandler(v);
-					};
-				}
-				delete processedProps.sync;
-			}
-		} else if (propKey.startsWith("sync:")) {
-			const syncBinding = props[propKey];
-			if (Array.isArray(syncBinding) && syncBinding.length === 2) {
-				const [stateObj, key$1] = syncBinding;
-				const name = propKey.slice(5);
-				processedProps[name] = stateObj[key$1];
-				const eventName = `onUpdate:${name}`;
-				const existingHandler = processedProps[eventName];
-				processedProps[eventName] = (v) => {
-					stateObj[key$1] = v;
-					if (existingHandler) existingHandler(v);
-				};
-				delete processedProps[propKey];
-			}
-		}
-	}
-	if (isComponent$1(type)) {
-		const { children: children$1, ...rest$1 } = processedProps;
-		return {
-			type,
-			props: {
-				...rest$1,
-				children: children$1
-			},
-			key: key || rest$1.key || null,
-			children: [],
-			dom: null
-		};
-	}
-	if (typeof type === "function" && type !== Fragment) return type(processedProps);
-	const { children, ...rest } = processedProps;
-	return {
-		type,
-		props: rest,
-		key: key || rest.key || null,
-		children: normalizeChildren(children),
-		dom: null
-	};
-}
-/**
-* JSX Factory for fragments
-*/
-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
-/** @jsxImportSource @sigx/runtime-core */
-const Input = defineComponent(({ props, emit }) => {
+const Input = component$1(({ props, emit }) => {
 	const id = Math.random().toString(36).slice(2);
+	let isReady = false;
 	const isFocused = () => focusState.activeId === id;
+	const getValue = () => props.model?.value || "";
 	const handleKey = (key) => {
 		if (!isFocused()) return;
+		if (!isReady) return;
 		if (key === "\r") {
-			emit("submit", props.value || "");
+			emit("submit", getValue());
 			return;
 		}
 		if (key === "\n") return;
 		if (key === "" || key === "\b") {
-			const val = props.value || "";
+			const val = getValue();
 			if (val.length > 0) {
-				const newValue$1 = val.slice(0, -1);
-				emit("update:value", newValue$1);
-				emit("input", newValue$1);
+				const newValue = val.slice(0, -1);
+				if (props.model) props.model.value = newValue;
+				emit("input", newValue);
 			}
 			return;
 		}
 		if (key.length > 1) return;
-		const newValue = (props.value || "") + key;
-		emit("update:value", newValue);
+		const newValue = getValue() + key;
+		if (props.model) props.model.value = newValue;
 		emit("input", newValue);
 	};
 	let keyCleanup = null;
-	onMount(() => {
+	onMounted(() => {
 		registerFocusable(id);
 		if (props.autofocus) focus(id);
 		keyCleanup = onKey(handleKey);
+		setTimeout(() => {
+			isReady = true;
+		}, 50);
 	});
-	onCleanup(() => {
+	onUnmounted(() => {
 		if (keyCleanup) keyCleanup();
 		unregisterFocusable(id);
 	});
 	return () => {
-		const val = (props.value || "").replace(/[\r\n]+/g, " ");
+		const val = getValue().replace(/[\r\n]+/g, " ");
 		const placeholder = (props.placeholder || "").replace(/[\r\n]+/g, " ");
 		const showCursor = isFocused();
 		return /* @__PURE__ */ jsxs("box", {
@@ -1356,11 +109,7 @@ const Input = defineComponent(({ props, emit }) => {
 		});
 	};
 }, { name: "Input" });
-
-//#endregion
-//#region src/components/ProgressBar.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const ProgressBar = defineComponent(({ props }) => {
+const ProgressBar = component$1(({ props }) => {
 	return () => {
 		const value = props.value || 0;
 		const max = props.max || 100;
@@ -1376,11 +125,7 @@ const ProgressBar = defineComponent(({ props }) => {
 		return /* @__PURE__ */ jsx("box", { children: /* @__PURE__ */ jsx("text", { children: colorCode + barChar.repeat(filledLen) + emptyChar.repeat(emptyLen) + reset + ` ${Math.round(percentage * 100)}%` }) });
 	};
 }, { name: "ProgressBar" });
-
-//#endregion
-//#region src/components/Button.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Button = defineComponent(({ props, emit }) => {
+const Button = component$1(({ props, emit }) => {
 	const id = Math.random().toString(36).slice(2);
 	const isFocused = () => focusState.activeId === id;
 	const pressed = signal({ value: false });
@@ -1398,11 +143,11 @@ const Button = defineComponent(({ props, emit }) => {
 	};
 	let keyCleanup = null;
 	let pressTimer = null;
-	onMount(() => {
+	onMounted(() => {
 		registerFocusable(id);
 		keyCleanup = onKey(handleKey);
 	});
-	onCleanup(() => {
+	onUnmounted(() => {
 		if (keyCleanup) keyCleanup();
 		unregisterFocusable(id);
 		if (pressTimer) clearTimeout(pressTimer);
@@ -1423,30 +168,26 @@ const Button = defineComponent(({ props, emit }) => {
 		});
 	};
 }, { name: "Button" });
-
-//#endregion
-//#region src/components/Checkbox.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Checkbox = defineComponent(({ props, emit }) => {
+const Checkbox = component$1(({ props, emit }) => {
 	const id = Math.random().toString(36).slice(2);
 	const isFocused = () => focusState.activeId === id;
-	const checked = () => !!props.value;
+	const checked = () => !!props.model?.value;
 	const handleKey = (key) => {
 		if (!isFocused()) return;
 		if (props.disabled) return;
 		if (key === "\r" || key === " ") {
 			const next = !checked();
-			emit("update:value", next);
+			if (props.model) props.model.value = next;
 			emit("change", next);
 		}
 	};
 	let keyCleanup = null;
-	onMount(() => {
+	onMounted(() => {
 		registerFocusable(id);
 		if (props.autofocus) focus(id);
 		keyCleanup = onKey(handleKey);
 	});
-	onCleanup(() => {
+	onUnmounted(() => {
 		if (keyCleanup) keyCleanup();
 		unregisterFocusable(id);
 	});
@@ -1475,79 +216,80 @@ const Checkbox = defineComponent(({ props, emit }) => {
 		] });
 	};
 }, { name: "Checkbox" });
-
-//#endregion
-//#region src/components/Select.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Select = defineComponent(({ props, emit }) => {
+const Select = component$1(({ props, emit }) => {
 	const id = Math.random().toString(36).slice(2);
+	let isReady = false;
 	const isFocused = () => focusState.activeId === id;
 	const getCurrentIndex = () => {
-		const idx = (props.options || []).findIndex((o) => o.value === props.value);
+		const idx = (props.options || []).findIndex((o) => o.value === props.model?.value);
 		return idx >= 0 ? idx : 0;
 	};
 	const handleKey = (key) => {
 		if (!isFocused()) return;
+		if (!isReady) return;
 		const options = props.options || [];
 		if (options.length === 0) return;
 		const currentIndex = getCurrentIndex();
 		if (key === "\x1B[A" || key === "k") {
 			const newValue = options[currentIndex > 0 ? currentIndex - 1 : options.length - 1].value;
-			emit("update:value", newValue);
+			if (props.model) props.model.value = newValue;
 			emit("change", newValue);
 			return;
 		}
 		if (key === "\x1B[B" || key === "j") {
 			const newValue = options[currentIndex < options.length - 1 ? currentIndex + 1 : 0].value;
-			emit("update:value", newValue);
+			if (props.model) props.model.value = newValue;
 			emit("change", newValue);
 			return;
 		}
 		if (key === "\r") {
-			emit("submit", props.value || options[0]?.value || "");
+			emit("submit", props.model?.value || options[0]?.value || "");
 			return;
 		}
 	};
 	let keyCleanup = null;
-	onMount(() => {
+	onMounted(() => {
 		registerFocusable(id);
 		if (props.autofocus) focus(id);
 		keyCleanup = onKey(handleKey);
+		setTimeout(() => {
+			isReady = true;
+		}, 50);
 	});
-	onCleanup(() => {
+	onUnmounted(() => {
 		if (keyCleanup) keyCleanup();
 		unregisterFocusable(id);
 	});
 	return () => {
 		const options = props.options || [];
 		const focused = isFocused();
-		const currentValue = props.value || options[0]?.value || "";
+		const currentValue = props.model?.value || options[0]?.value || "";
 		const label = props.label;
-		return /* @__PURE__ */ jsx("box", {
+		const selectedOption = options.find((o) => o.value === currentValue);
+		const optionElements = options.map((option) => {
+			const isSelected = option.value === currentValue;
+			return /* @__PURE__ */ jsx("box", { children: /* @__PURE__ */ jsxs("text", {
+				color: isSelected ? "cyan" : "white",
+				children: [
+					isSelected ? "❯" : " ",
+					" ",
+					option.label
+				]
+			}) });
+		});
+		const descriptionElement = props.showDescription && selectedOption?.description ? /* @__PURE__ */ jsx("box", { children: /* @__PURE__ */ jsxs("text", {
+			color: "#666666",
+			children: ["  ↳ ", selectedOption.description]
+		}) }) : null;
+		return /* @__PURE__ */ jsxs("box", { children: [/* @__PURE__ */ jsx("box", {
 			border: "single",
 			borderColor: focused ? "green" : "white",
 			label,
-			children: options.map((option) => {
-				const isSelected = option.value === currentValue;
-				return /* @__PURE__ */ jsxs("box", { children: [/* @__PURE__ */ jsxs("text", {
-					color: isSelected ? "cyan" : "white",
-					children: [
-						isSelected ? "❯" : " ",
-						" ",
-						option.label
-					]
-				}), option.description && isSelected && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), /* @__PURE__ */ jsxs("text", {
-					color: "white",
-					children: ["  ", option.description]
-				})] })] });
-			})
-		});
+			children: optionElements
+		}), descriptionElement] });
 	};
 }, { name: "Select" });
-
-//#endregion
-//#region src/index.ts
-const renderer = createRenderer({
+const { render } = createRenderer({
 	patchProp: (el, key, prev, next) => {
 		el.props[key] = next;
 		scheduleRender();
@@ -1618,9 +360,8 @@ const renderer = createRenderer({
 		};
 	}
 });
-const { render, createApp } = renderer;
-let rootNode = null;
-let isRendering = false;
+var rootNode = null;
+var isRendering = false;
 function scheduleRender() {
 	if (isRendering) return;
 	isRendering = true;
@@ -1636,10 +377,6 @@ function flushRender() {
 	process.stdout.write(lines.join("\x1B[K\n") + "\x1B[K");
 	process.stdout.write("\x1B[J");
 }
-/**
-* Check if a node has a box element as an immediate child.
-* This is used to determine if a component wrapper should be treated as a block element.
-*/
 function hasBoxChild(node) {
 	for (const child of node.children) if (child.tag === "box") return true;
 	return false;
@@ -1728,7 +465,7 @@ function getBorderChars(style) {
 		v: "│"
 	};
 }
-const keyHandlers = /* @__PURE__ */ new Set();
+var keyHandlers = /* @__PURE__ */ new Set();
 function onKey(handler) {
 	keyHandlers.add(handler);
 	return () => keyHandlers.delete(handler);
@@ -1775,16 +512,7 @@ function renderTerminal(app, options = {}) {
 		}
 	} };
 }
-let unmountFn = null;
-/**
-* Helper function to mount the terminal for CLI apps.
-* Returns a mount target that can be passed to defineApp().mount().
-* 
-* @example
-* ```tsx
-* defineApp(MyApp).mount(mountTerminal());
-* ```
-*/
+var unmountFn = null;
 function mountTerminal(options = { clearConsole: true }) {
 	return {
 		mount: terminalMount,
@@ -1794,9 +522,6 @@ function mountTerminal(options = { clearConsole: true }) {
 		}
 	};
 }
-/**
-* Exit the terminal app cleanly, restoring terminal state.
-*/
 function exitTerminal() {
 	if (unmountFn) {
 		unmountFn();
@@ -1805,20 +530,6 @@ function exitTerminal() {
 	process.stdout.write("\x1B[?25h");
 	process.stdout.write("\x1B[2J\x1B[H");
 }
-/**
-* Mount function for Terminal environments.
-* Use this with defineApp().mount() to render to the terminal.
-* 
-* @example
-* ```tsx
-* import { defineApp } from '@sigx/runtime-core';
-* import { terminalMount } from '@sigx/runtime-terminal';
-* 
-* const app = defineApp(<Counter />);
-* app.use(loggingPlugin)
-*    .mount({ clearConsole: true }, terminalMount);
-* ```
-*/
 const terminalMount = (component, options, appContext) => {
 	rootNode = {
 		type: "root",
@@ -1847,7 +558,6 @@ const terminalMount = (component, options, appContext) => {
 	};
 };
 setDefaultMount(terminalMount);
+export { Button, Checkbox, Input, ProgressBar, Select, exitTerminal, focus, focusNext, focusPrev, focusState, mountTerminal, onKey, registerFocusable, render, renderNodeToLines, renderTerminal, terminalMount, unregisterFocusable };
 
-//#endregion
-export { Button, Checkbox, Input, ProgressBar, Select, createApp, exitTerminal, focus, focusNext, focusPrev, focusState, mountTerminal, onKey, registerFocusable, render, renderNodeToLines, renderTerminal, terminalMount, unregisterFocusable };
 //# sourceMappingURL=index.js.map