@sigx/terminal 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,7 +1,14 @@
-//#region ../reactivity/src/index.ts
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+const ComputedSymbol = Symbol("computed");
 let activeEffect = null;
-let batchDepth = 0;
-const pendingEffects = /* @__PURE__ */ new Set();
+var batchDepth = 0;
+var pendingEffects = /* @__PURE__ */ new Set();
+function setActiveEffect(effect) {
+	activeEffect = effect;
+}
+function getActiveEffect() {
+	return activeEffect;
+}
 function batch(fn) {
 	batchDepth++;
 	try {
@@ -11,10 +18,25 @@ function batch(fn) {
 		if (batchDepth === 0) {
 			const effects = Array.from(pendingEffects);
 			pendingEffects.clear();
-			for (const effect$1 of effects) effect$1();
+			for (const effect of effects) effect();
 		}
 	}
 }
+function cleanup(effect) {
+	if (!effect.deps) return;
+	for (const dep of effect.deps) dep.delete(effect);
+	effect.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 of effects) if (batchDepth > 0) pendingEffects.add(effect);
+	else effect();
+}
 function runEffect(fn) {
 	const effectFn = function() {
 		cleanup(effectFn);
@@ -28,22 +50,226 @@ function runEffect(fn) {
 	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 effect(fn) {
+	return runEffect(fn);
 }
-function track(depSet) {
-	if (!activeEffect) return;
-	depSet.add(activeEffect);
-	activeEffect.deps.push(depSet);
+function untrack(fn) {
+	const prev = activeEffect;
+	activeEffect = null;
+	try {
+		return fn();
+	} finally {
+		activeEffect = prev;
+	}
 }
-function trigger(depSet) {
-	const effects = Array.from(depSet);
-	for (const effect$1 of effects) if (batchDepth > 0) pendingEffects.add(effect$1);
-	else effect$1();
+function effectScope(detached) {
+	const effects = [];
+	let active = true;
+	return {
+		run(fn) {
+			if (!active) return void 0;
+			return fn();
+		},
+		stop() {
+			active = false;
+			effects.forEach((e) => e());
+		}
+	};
+}
+const ITERATE_KEY = Symbol("iterate");
+const reactiveToRaw = /* @__PURE__ */ new WeakMap();
+const rawToReactive = /* @__PURE__ */ new WeakMap();
+function toRaw(observed) {
+	const raw = reactiveToRaw.get(observed);
+	return raw ? toRaw(raw) : observed;
+}
+function isReactive(value) {
+	return reactiveToRaw.has(value);
+}
+function isCollection(value) {
+	if (!value || typeof value !== "object") return false;
+	const ctor = value.constructor;
+	return ctor === Set || ctor === Map || ctor === WeakSet || ctor === WeakMap;
+}
+function isIterableCollection(value) {
+	if (!value || typeof value !== "object") return false;
+	const ctor = value.constructor;
+	return ctor === Set || ctor === Map;
+}
+function shouldNotProxy(value) {
+	if (!value || typeof value !== "object") return false;
+	const proto = Object.prototype.toString.call(value);
+	return [
+		"[object Date]",
+		"[object RegExp]",
+		"[object Error]",
+		"[object Promise]",
+		"[object ArrayBuffer]",
+		"[object DataView]",
+		"[object Int8Array]",
+		"[object Uint8Array]",
+		"[object Uint8ClampedArray]",
+		"[object Int16Array]",
+		"[object Uint16Array]",
+		"[object Int32Array]",
+		"[object Uint32Array]",
+		"[object Float32Array]",
+		"[object Float64Array]",
+		"[object BigInt64Array]",
+		"[object BigUint64Array]"
+	].includes(proto);
+}
+function createCollectionInstrumentations(depsMap, getOrCreateDep) {
+	const instrumentations = {};
+	instrumentations.has = function(key) {
+		const target = toRaw(this);
+		const rawKey = toRaw(key);
+		track(getOrCreateDep(rawKey));
+		return target.has(rawKey);
+	};
+	instrumentations.get = function(key) {
+		const target = toRaw(this);
+		const rawKey = toRaw(key);
+		track(getOrCreateDep(rawKey));
+		const value = target.get(rawKey);
+		if (value && typeof value === "object") return rawToReactive.get(value) || value;
+		return value;
+	};
+	Object.defineProperty(instrumentations, "size", { get() {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		return target.size;
+	} });
+	instrumentations.forEach = function(callback, thisArg) {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		target.forEach((value, key) => {
+			const reactiveValue = value && typeof value === "object" ? rawToReactive.get(value) || value : value;
+			const reactiveKey = key && typeof key === "object" ? rawToReactive.get(key) || key : key;
+			callback.call(thisArg, reactiveValue, reactiveKey, this);
+		});
+	};
+	instrumentations.keys = function() {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		return createReactiveIterator(target.keys(), false);
+	};
+	instrumentations.values = function() {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		return createReactiveIterator(target.values(), true);
+	};
+	instrumentations.entries = function() {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		return createReactiveEntriesIterator(target.entries());
+	};
+	instrumentations[Symbol.iterator] = function() {
+		const target = toRaw(this);
+		track(getOrCreateDep(ITERATE_KEY));
+		if (target instanceof Set) return createReactiveIterator(target.values(), true);
+		else return createReactiveEntriesIterator(target.entries());
+	};
+	instrumentations.add = function(value) {
+		const target = toRaw(this);
+		const rawValue = toRaw(value);
+		const hadKey = target.has(rawValue);
+		target.add(rawValue);
+		if (!hadKey) {
+			const dep = depsMap.get(rawValue);
+			if (dep) trigger(dep);
+			const iterDep = depsMap.get(ITERATE_KEY);
+			if (iterDep) trigger(iterDep);
+		}
+		return this;
+	};
+	instrumentations.set = function(key, value) {
+		const target = toRaw(this);
+		const rawKey = toRaw(key);
+		const rawValue = toRaw(value);
+		const hadKey = target.has(rawKey);
+		const oldValue = target.get(rawKey);
+		target.set(rawKey, rawValue);
+		if (!hadKey) {
+			const iterDep = depsMap.get(ITERATE_KEY);
+			if (iterDep) trigger(iterDep);
+		}
+		if (!hadKey || !Object.is(oldValue, rawValue)) {
+			const dep = depsMap.get(rawKey);
+			if (dep) trigger(dep);
+		}
+		return this;
+	};
+	instrumentations.delete = function(key) {
+		const target = toRaw(this);
+		const rawKey = toRaw(key);
+		const hadKey = target.has(rawKey);
+		const result = target.delete(rawKey);
+		if (hadKey) {
+			const dep = depsMap.get(rawKey);
+			if (dep) trigger(dep);
+			const iterDep = depsMap.get(ITERATE_KEY);
+			if (iterDep) trigger(iterDep);
+		}
+		return result;
+	};
+	instrumentations.clear = function() {
+		const target = toRaw(this);
+		const hadItems = target.size > 0;
+		target.clear();
+		if (hadItems) for (const dep of depsMap.values()) trigger(dep);
+	};
+	return instrumentations;
+}
+function createReactiveIterator(innerIterator, wrapValues) {
+	return {
+		next() {
+			const { value, done } = innerIterator.next();
+			if (done) return {
+				value: void 0,
+				done: true
+			};
+			return {
+				value: wrapValues && value && typeof value === "object" ? rawToReactive.get(value) || value : value,
+				done: false
+			};
+		},
+		[Symbol.iterator]() {
+			return this;
+		}
+	};
+}
+function createReactiveEntriesIterator(innerIterator) {
+	return {
+		next() {
+			const { value, done } = innerIterator.next();
+			if (done) return {
+				value: void 0,
+				done: true
+			};
+			const [key, val] = value;
+			return {
+				value: [key && typeof key === "object" ? rawToReactive.get(key) || key : key, val && typeof val === "object" ? rawToReactive.get(val) || val : val],
+				done: false
+			};
+		},
+		[Symbol.iterator]() {
+			return this;
+		}
+	};
+}
+function isPrimitive(value) {
+	if (value === null || value === void 0) return true;
+	const type = typeof value;
+	return type === "string" || type === "number" || type === "boolean" || type === "symbol" || type === "bigint";
+}
+var accessObserver = null;
+function getAccessObserver() {
+	return accessObserver;
+}
+function setAccessObserver(observer) {
+	accessObserver = observer;
 }
-let accessObserver = null;
 function detectAccess(selector) {
 	let result = null;
 	const prev = accessObserver;
@@ -57,19 +283,43 @@ function detectAccess(selector) {
 	}
 	return result;
 }
-function untrack(fn) {
-	const prev = activeEffect;
-	activeEffect = null;
-	try {
-		return fn();
-	} finally {
-		activeEffect = prev;
-	}
-}
+var 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;
+	};
+});
 function signal(target) {
+	if (isPrimitive(target)) return signal({ value: target });
+	const objectTarget = target;
+	if (shouldNotProxy(objectTarget)) return objectTarget;
+	if (isReactive(objectTarget)) return objectTarget;
+	const existingProxy = rawToReactive.get(objectTarget);
+	if (existingProxy) return existingProxy;
 	const depsMap = /* @__PURE__ */ new Map();
 	const reactiveCache = /* @__PURE__ */ new WeakMap();
-	return new Proxy(target, {
+	const getOrCreateDep = (key) => {
+		let dep = depsMap.get(key);
+		if (!dep) {
+			dep = /* @__PURE__ */ new Set();
+			depsMap.set(key, dep);
+		}
+		return dep;
+	};
+	const collectionInstrumentations = isCollection(objectTarget) ? createCollectionInstrumentations(depsMap, getOrCreateDep) : null;
+	const proxy = new Proxy(objectTarget, {
 		get(obj, prop, receiver) {
 			if (prop === "$set") return (newValue) => {
 				batch(() => {
@@ -85,16 +335,22 @@ function signal(target) {
 					}
 				});
 			};
+			if (collectionInstrumentations) {
+				if (prop === "size" && isIterableCollection(obj)) {
+					track(getOrCreateDep(ITERATE_KEY));
+					return obj.size;
+				}
+				if (prop in collectionInstrumentations) {
+					const instrumented = collectionInstrumentations[prop];
+					if (typeof instrumented === "function") return instrumented.bind(receiver);
+					return instrumented;
+				}
+			}
 			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") {
+			if (!collectionInstrumentations) track(getOrCreateDep(prop));
+			if (value && typeof value === "object" && !shouldNotProxy(value)) {
 				let cached = reactiveCache.get(value);
 				if (!cached) {
 					cached = signal(value);
@@ -134,28 +390,26 @@ function signal(target) {
 			return result;
 		}
 	});
+	reactiveToRaw.set(proxy, objectTarget);
+	rawToReactive.set(objectTarget, proxy);
+	return proxy;
 }
-function effect(fn) {
-	return runEffect(fn);
+function traverse(value, depth = Infinity, seen = /* @__PURE__ */ new Set()) {
+	if (depth <= 0) return value;
+	if (value === null || typeof value !== "object") return value;
+	if (seen.has(value)) return value;
+	seen.add(value);
+	if (Array.isArray(value)) for (let i = 0; i < value.length; i++) traverse(value[i], depth - 1, seen);
+	else if (value instanceof Map) value.forEach((v, k) => {
+		traverse(k, depth - 1, seen);
+		traverse(v, depth - 1, seen);
+	});
+	else if (value instanceof Set) value.forEach((v) => {
+		traverse(v, depth - 1, seen);
+	});
+	else for (const key of Object.keys(value)) traverse(value[key], depth - 1, seen);
+	return value;
 }
-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;
-	};
-});
 function watch(source, cb, options) {
 	let oldValue;
 	let isFirst = true;
@@ -163,8 +417,13 @@ function watch(source, cb, options) {
 	let paused = false;
 	let pendingValue;
 	let hasPending = false;
+	let stopped = false;
+	const deep = options?.deep;
+	const traverseDepth = deep === true ? Infinity : typeof deep === "number" ? deep : 0;
 	const runner = effect(() => {
-		const newValue = typeof source === "function" ? source() : source;
+		if (stopped) return;
+		let newValue = typeof source === "function" ? source() : source;
+		if (traverseDepth > 0) traverse(newValue, traverseDepth);
 		if (paused) {
 			pendingValue = newValue;
 			hasPending = true;
@@ -174,15 +433,24 @@ function watch(source, cb, options) {
 			if (options?.immediate) {
 				if (cleanupFn) cleanupFn();
 				cb(newValue, oldValue, (fn) => cleanupFn = fn);
+				if (options?.once) {
+					stopped = true;
+					queueMicrotask(() => stop());
+				}
 			}
 			isFirst = false;
 		} else {
 			if (cleanupFn) cleanupFn();
 			cb(newValue, oldValue, (fn) => cleanupFn = fn);
+			if (options?.once) {
+				stopped = true;
+				queueMicrotask(() => stop());
+			}
 		}
 		oldValue = newValue;
 	});
 	const stop = () => {
+		stopped = true;
 		runner.stop();
 		if (cleanupFn) cleanupFn();
 	};
@@ -206,135 +474,281 @@ function watch(source, cb, options) {
 		resume
 	});
 }
-function effectScope(detached) {
-	const effects = [];
-	let active = true;
-	return {
-		run(fn) {
-			if (!active) return void 0;
-			return fn();
-		},
-		stop() {
-			active = false;
-			effects.forEach((e) => e());
+function computed(getterOrOptions) {
+	let getter;
+	let setter;
+	if (typeof getterOrOptions === "function") getter = getterOrOptions;
+	else {
+		getter = getterOrOptions.get;
+		setter = getterOrOptions.set;
+	}
+	const subscribers = /* @__PURE__ */ new Set();
+	let cachedValue;
+	let dirty = true;
+	const computedEffect = function() {
+		if (!dirty) {
+			dirty = true;
+			trigger(subscribers);
 		}
 	};
+	computedEffect.deps = [];
+	const computeValue = () => {
+		cleanup(computedEffect);
+		const prevEffect = getActiveEffect();
+		setActiveEffect(computedEffect);
+		try {
+			cachedValue = getter();
+			dirty = false;
+			return cachedValue;
+		} finally {
+			setActiveEffect(prevEffect);
+		}
+	};
+	const computedObj = {
+		[ComputedSymbol]: true,
+		get value() {
+			const observer = getAccessObserver();
+			if (observer) {
+				observer(computedObj, "value");
+				setAccessObserver(null);
+			}
+			track(subscribers);
+			const result = dirty ? computeValue() : cachedValue;
+			if (observer) setAccessObserver(observer);
+			return result;
+		}
+	};
+	if (setter) {
+		Object.defineProperty(computedObj, "value", {
+			get() {
+				const observer = getAccessObserver();
+				if (observer) {
+					observer(computedObj, "value");
+					setAccessObserver(null);
+				}
+				track(subscribers);
+				const result = dirty ? computeValue() : cachedValue;
+				if (observer) setAccessObserver(observer);
+				return result;
+			},
+			set(newValue) {
+				setter(newValue);
+			},
+			enumerable: true,
+			configurable: false
+		});
+		return computedObj;
+	}
+	return computedObj;
 }
-
-//#endregion
-//#region ../runtime-core/src/platform.ts
-let platformSyncProcessor$1 = null;
-/**
-* Set the platform-specific sync processor for intrinsic elements.
-* Called by runtime-dom to handle checkbox/radio/select sync bindings.
-*/
-function setPlatformSyncProcessor(fn) {
-	platformSyncProcessor$1 = fn;
-}
-/**
-* Get the current platform sync processor (for internal use).
-*/
-function getPlatformSyncProcessor() {
-	return platformSyncProcessor$1;
+function isComputed(value) {
+	return value !== null && typeof value === "object" && ComputedSymbol in value;
 }
-
-//#endregion
-//#region ../runtime-core/src/plugins.ts
-const plugins$1 = [];
+var platformModelProcessor = null;
+function setPlatformModelProcessor(fn) {
+	platformModelProcessor = fn;
+}
+function getPlatformModelProcessor() {
+	return platformModelProcessor;
+}
+var plugins = [];
 function registerComponentPlugin(plugin) {
-	plugins$1.push(plugin);
+	plugins.push(plugin);
 }
-/**
-* Get all registered plugins (internal use)
-*/
 function getComponentPlugins() {
-	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: () => {} };
-* });
-* ```
-*/
+	return plugins;
+}
+var contextExtensions = [];
 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
-//#region ../runtime-core/src/app.ts
-const isDev = typeof process !== "undefined" && true || true;
-/**
-* Unique symbol for app context injection
-*/
-const AppContextKey = Symbol("sigx:app");
-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);
-* ```
-*/
+var require___vite_browser_external = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = {};
+}));
+var asyncLocalStorage = null;
+try {
+	if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined") {
+		const nodeAsync = globalThis.process?.versions?.node ? require___vite_browser_external() : null;
+		if (nodeAsync?.AsyncLocalStorage) asyncLocalStorage = new nodeAsync.AsyncLocalStorage();
+	}
+} catch {}
+var _fallbackContext = {
+	currentComponentContext: null,
+	currentSuspenseBoundary: null
+};
+function getRequestContext() {
+	if (asyncLocalStorage) {
+		const store = asyncLocalStorage.getStore();
+		if (store) return store;
+	}
+	return _fallbackContext;
+}
+function getCurrentInstanceSafe() {
+	return getRequestContext().currentComponentContext;
+}
+function setCurrentInstanceSafe(ctx) {
+	const reqCtx = getRequestContext();
+	const prev = reqCtx.currentComponentContext;
+	reqCtx.currentComponentContext = ctx;
+	return prev;
+}
+function getCurrentSuspenseBoundarySafe() {
+	return getRequestContext().currentSuspenseBoundary;
+}
+function setCurrentSuspenseBoundarySafe(boundary) {
+	const reqCtx = getRequestContext();
+	const prev = reqCtx.currentSuspenseBoundary;
+	reqCtx.currentSuspenseBoundary = boundary;
+	return prev;
+}
+function runInRequestScope(fn) {
+	if (asyncLocalStorage) return asyncLocalStorage.run({
+		currentComponentContext: null,
+		currentSuspenseBoundary: null
+	}, fn);
+	return fn();
+}
+function hasRequestIsolation() {
+	return asyncLocalStorage !== null;
+}
+var currentComponentContext = null;
+function getCurrentInstance() {
+	return getCurrentInstanceSafe() ?? currentComponentContext;
+}
+function setCurrentInstance(ctx) {
+	const prevSafe = setCurrentInstanceSafe(ctx);
+	const prevModule = currentComponentContext;
+	currentComponentContext = ctx;
+	return prevSafe ?? prevModule;
+}
+function onMounted(fn) {
+	if (currentComponentContext) currentComponentContext.onMounted(fn);
+	else console.warn("onMounted called outside of component setup");
+}
+function onUnmounted(fn) {
+	if (currentComponentContext) currentComponentContext.onUnmounted(fn);
+	else console.warn("onUnmounted called outside of component setup");
+}
+function onCreated(fn) {
+	if (currentComponentContext) currentComponentContext.onCreated(fn);
+	else console.warn("onCreated called outside of component setup");
+}
+function onUpdated(fn) {
+	if (currentComponentContext) currentComponentContext.onUpdated(fn);
+	else console.warn("onUpdated called outside of component setup");
+}
+var componentRegistry = /* @__PURE__ */ new Map();
+function getComponentMeta(factory) {
+	return componentRegistry.get(factory);
+}
+function createPropsProxy(target, onAccess) {
+	return new Proxy(target, { get(obj, prop) {
+		if (typeof prop === "string" && onAccess) onAccess(prop);
+		return obj[prop];
+	} });
+}
+function component(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;
+}
+var globalInstances = /* @__PURE__ */ new Map();
+var appContextToken = Symbol("sigx:appContext");
+function lookupProvided(token) {
+	const ctx = getCurrentInstance();
+	if (!ctx) return;
+	let current = ctx;
+	while (current) {
+		if (current.provides && current.provides.has(token)) return current.provides.get(token);
+		current = current.parent;
+	}
+}
+function provideAtComponent(token, value) {
+	const ctx = getCurrentInstance();
+	if (!ctx) throw new Error("defineProvide must be called inside a component setup function");
+	if (!ctx.provides) ctx.provides = /* @__PURE__ */ new Map();
+	ctx.provides.set(token, value);
+}
+function defineInjectable(factory) {
+	const token = Symbol();
+	const useFn = (() => {
+		const provided = lookupProvided(token);
+		if (provided !== void 0) return provided;
+		if (!globalInstances.has(token)) globalInstances.set(token, factory());
+		return globalInstances.get(token);
+	});
+	useFn._factory = factory;
+	useFn._token = token;
+	return useFn;
+}
+function defineProvide(useFn, factory) {
+	const actualFactory = factory ?? useFn._factory;
+	const token = useFn._token;
+	if (!actualFactory || !token) throw new Error("defineProvide must be called with a function created by defineInjectable");
+	const instance = actualFactory();
+	provideAtComponent(token, instance);
+	return instance;
+}
+function useAppContext() {
+	return lookupProvided(appContextToken) ?? null;
+}
+function getAppContextToken() {
+	return appContextToken;
+}
+function provideAppContext(ctx, appContext) {
+	if (!ctx.provides) ctx.provides = /* @__PURE__ */ new Map();
+	ctx.provides.set(appContextToken, appContext);
+	if (appContext.provides) for (const [token, value] of appContext.provides) ctx.provides.set(token, value);
+}
+const __DIRECTIVE__ = Symbol.for("sigx.directive");
+function defineDirective(definition) {
+	definition[__DIRECTIVE__] = true;
+	return definition;
+}
+function isDirective(value) {
+	return value != null && typeof value === "object" && value[__DIRECTIVE__] === true;
+}
+var isDev = typeof process !== "undefined" && process.env.NODE_ENV !== "production" || true;
+var defaultMountFn = null;
 function setDefaultMount(mountFn) {
 	defaultMountFn = mountFn;
 }
-/**
-* Get the current default mount function.
-* @internal
-*/
 function getDefaultMount() {
 	return defaultMountFn;
 }
-/**
-* Create an application instance.
-* 
-* @example
-* ```tsx
-* import { defineApp, defineInjectable } from '@sigx/runtime-core';
-* import { render } from '@sigx/runtime-dom';
-* 
-* // Define an injectable service
-* const useApiConfig = defineInjectable(() => ({ baseUrl: 'https://api.example.com' }));
-* 
-* const app = defineApp(<App />);
-* 
-* app.use(myPlugin, { option: 'value' });
-* 
-* // Provide using the injectable token (works with inject())
-* app.provide(useApiConfig, { baseUrl: 'https://custom.api.com' });
-* 
-* app.mount(document.getElementById('app')!, render);
-* ```
-*/
 function defineApp(rootComponent) {
 	const installedPlugins = /* @__PURE__ */ new Set();
 	const context = {
 		app: null,
 		provides: /* @__PURE__ */ new Map(),
 		config: {},
-		hooks: []
+		hooks: [],
+		directives: /* @__PURE__ */ new Map()
 	};
 	let isMounted = false;
 	let container = null;
-	let unmountFn$1 = null;
+	let unmountFn = null;
 	const app = {
 		config: context.config,
 		use(plugin, options) {
@@ -348,16 +762,26 @@ function defineApp(rootComponent) {
 			else if (isDev) console.warn("Invalid plugin: must be a function or have an install() method.");
 			return app;
 		},
-		provide(token, value) {
-			const actualToken = token?._token ?? token;
-			if (isDev && context.provides.has(actualToken)) console.warn(`App-level provide: token is being overwritten.`);
-			context.provides.set(actualToken, value);
-			return app;
+		defineProvide(useFn, factory) {
+			const actualFactory = factory ?? useFn._factory;
+			const token = useFn._token;
+			if (!actualFactory || !token) throw new Error("defineProvide must be called with a function created by defineInjectable");
+			const instance = actualFactory();
+			context.provides.set(token, instance);
+			return instance;
 		},
 		hook(hooks) {
 			context.hooks.push(hooks);
 			return app;
 		},
+		directive(name, definition) {
+			if (definition !== void 0) {
+				if (isDev && !isDirective(definition)) console.warn(`[sigx] app.directive('${name}', ...) received a value that is not a valid directive definition. Use defineDirective() to create directive definitions.`);
+				context.directives.set(name, definition);
+				return app;
+			}
+			return context.directives.get(name);
+		},
 		mount(target, renderFn) {
 			if (isMounted) {
 				if (isDev) console.warn("App is already mounted. Call app.unmount() first.");
@@ -368,7 +792,7 @@ function defineApp(rootComponent) {
 			container = target;
 			isMounted = true;
 			const result = mountFn(rootComponent, target, context);
-			if (typeof result === "function") unmountFn$1 = result;
+			if (typeof result === "function") unmountFn = result;
 			return app;
 		},
 		unmount() {
@@ -376,7 +800,7 @@ function defineApp(rootComponent) {
 				if (isDev) console.warn("App is not mounted.");
 				return;
 			}
-			if (unmountFn$1) unmountFn$1();
+			if (unmountFn) unmountFn();
 			context.provides.clear();
 			isMounted = false;
 			container = null;
@@ -389,15 +813,16 @@ function defineApp(rootComponent) {
 		},
 		get _container() {
 			return container;
+		},
+		get _rootComponent() {
+			return rootComponent;
 		}
 	};
 	context.app = app;
+	const appContextToken = getAppContextToken();
+	context.provides.set(appContextToken, context);
 	return app;
 }
-/**
-* 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 {
@@ -406,10 +831,6 @@ function notifyComponentCreated(context, instance) {
 		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 {
@@ -418,10 +839,6 @@ function notifyComponentMounted(context, instance) {
 		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 {
@@ -430,10 +847,6 @@ function notifyComponentUnmounted(context, instance) {
 		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 {
@@ -442,10 +855,6 @@ function notifyComponentUpdated(context, instance) {
 		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 {
@@ -460,105 +869,54 @@ function handleComponentError(context, err, instance, info) {
 	}
 	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 compound(main, sub) {
+	return Object.assign(main, sub);
 }
-function setCurrentInstance(ctx) {
-	const prev = currentComponentContext;
-	currentComponentContext = ctx;
-	return prev;
+var MODEL_SYMBOL = Symbol.for("sigx.model");
+function createModel(tuple, updateHandler) {
+	const [obj, key] = tuple;
+	return {
+		get value() {
+			return obj[key];
+		},
+		set value(v) {
+			updateHandler(v);
+		},
+		get binding() {
+			return [
+				obj,
+				key,
+				updateHandler
+			];
+		},
+		[MODEL_SYMBOL]: true
+	};
 }
-function onMount(fn) {
-	if (currentComponentContext) currentComponentContext.onMount(fn);
-	else console.warn("onMount called outside of component setup");
+function createModelFromBinding(binding) {
+	const [obj, key, handler] = binding;
+	return createModel([obj, key], handler);
 }
-function onCleanup(fn) {
-	if (currentComponentContext) currentComponentContext.onCleanup(fn);
-	else console.warn("onCleanup called outside of component setup");
+function isModel(value) {
+	return value !== null && typeof value === "object" && MODEL_SYMBOL in value && value[MODEL_SYMBOL] === true;
 }
-const componentRegistry$1 = /* @__PURE__ */ new Map();
-/**
-* Get component metadata (for DevTools)
-*/
-function getComponentMeta(factory) {
-	return componentRegistry$1.get(factory);
+function getModelSymbol() {
+	return MODEL_SYMBOL;
 }
-/**
-* Helper to create a proxy that tracks property access
-*/
-function createPropsProxy(target, onAccess) {
-	return new Proxy(target, { get(obj, prop) {
-		if (typeof prop === "string" && onAccess) onAccess(prop);
-		return obj[prop];
-	} });
-}
-/**
-* 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().forEach((p) => p.onDefine?.(options?.name, factory, setup));
-	return factory;
+function isComponent(type) {
+	return typeof type === "function" && "__setup" in type;
 }
-
-//#endregion
-//#region ../runtime-core/src/jsx-runtime.ts
 const Fragment = Symbol.for("sigx.Fragment");
 const Text = Symbol.for("sigx.Text");
-function normalizeChildren$1(children) {
+function normalizeChildren(children) {
 	if (children == null || children === false || children === true) return [];
-	if (Array.isArray(children)) return children.flatMap((c) => normalizeChildren$1(c));
+	if (isComputed(children)) return normalizeChildren(children.value);
+	if (Array.isArray(children)) return children.flatMap((c) => normalizeChildren(c));
 	if (typeof children === "string" || typeof children === "number") return [{
 		type: Text,
 		props: {},
@@ -570,64 +928,92 @@ function normalizeChildren$1(children) {
 	if (children.type) return [children];
 	return [];
 }
-/**
-* Check if a type is a sigx component (has __setup)
-*/
-function isComponent$2(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 || {} };
+	const models = {};
+	const isComponentType = isComponent(type);
 	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;
+		for (const propKey in props) if (propKey === "model") {
+			let modelBinding = props[propKey];
+			let tuple = null;
+			let updateHandler = null;
+			if (isModel(modelBinding)) {
+				const [obj, key, handler] = modelBinding.binding;
+				tuple = [obj, key];
+				updateHandler = handler;
+			} else if (typeof modelBinding === "function") {
+				const detected = detectAccess(modelBinding);
+				if (detected && typeof detected[1] === "string") tuple = detected;
+			} else if (Array.isArray(modelBinding) && modelBinding.length === 2 && typeof modelBinding[1] === "string") tuple = modelBinding;
+			if (tuple) {
+				const [stateObj, stateKey] = tuple;
 				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 (!updateHandler) {
+					const existingHandler = processedProps["onUpdate:modelValue"];
+					updateHandler = (v) => {
+						const customHandler = stateObj[`onUpdate:${stateKey}`];
+						if (typeof customHandler === "function") customHandler(v);
+						else stateObj[stateKey] = 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);
-				};
+				const platformProcessor = getPlatformModelProcessor();
+				if (typeof type === "string" && platformProcessor) handled = platformProcessor(type, processedProps, tuple, props);
+				if (isComponentType) {
+					models.model = createModel(tuple, updateHandler);
+					processedProps["onUpdate:modelValue"] = updateHandler;
+				} else if (!handled) {
+					processedProps.modelValue = stateObj[stateKey];
+					processedProps["onUpdate:modelValue"] = updateHandler;
+				}
+				delete processedProps.model;
+			}
+		} else if (propKey.startsWith("model:")) {
+			let modelBinding = props[propKey];
+			const name = propKey.slice(6);
+			let tuple = null;
+			let updateHandler = null;
+			if (isModel(modelBinding)) {
+				const [obj, key, handler] = modelBinding.binding;
+				tuple = [obj, key];
+				updateHandler = handler;
+			} else if (typeof modelBinding === "function") {
+				const detected = detectAccess(modelBinding);
+				if (detected && typeof detected[1] === "string") tuple = detected;
+			} else if (Array.isArray(modelBinding) && modelBinding.length === 2 && typeof modelBinding[1] === "string") tuple = modelBinding;
+			if (tuple) {
+				const [stateObj, stateKey] = tuple;
+				const eventName = `onUpdate:${name}`;
+				if (!updateHandler) {
+					const existingHandler = processedProps[eventName];
+					updateHandler = (v) => {
+						const customHandler = stateObj[`onUpdate:${stateKey}`];
+						if (typeof customHandler === "function") customHandler(v);
+						else stateObj[stateKey] = v;
+						if (existingHandler) existingHandler(v);
+					};
+				}
+				if (isComponentType) {
+					models[name] = createModel(tuple, updateHandler);
+					processedProps[eventName] = updateHandler;
+				} else {
+					processedProps[name] = stateObj[stateKey];
+					processedProps[eventName] = updateHandler;
+				}
 				delete processedProps[propKey];
 			}
 		}
 	}
-	if (isComponent$2(type)) {
-		const { children: children$1, ...rest$1 } = processedProps;
+	if (Object.keys(models).length > 0) processedProps.$models = models;
+	if (isComponent(type)) {
+		const { children, ...rest } = processedProps;
 		return {
 			type,
 			props: {
-				...rest$1,
-				children: children$1
+				...rest,
+				children
 			},
-			key: key || rest$1.key || null,
+			key: key || rest.key || null,
 			children: [],
 			dom: null
 		};
@@ -638,33 +1024,17 @@ function jsx(type, props, key) {
 		type,
 		props: rest,
 		key: key || rest.key || null,
-		children: normalizeChildren$1(children),
+		children: normalizeChildren(children),
 		dom: null
 	};
 }
-/**
-* JSX Factory for fragments
-*/
 function jsxs(type, props, key) {
 	return jsx(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
-*/
+var currentSuspenseBoundary = null;
 function registerPendingPromise(promise) {
-	const boundary = currentSuspenseBoundary$1;
+	const boundary = getCurrentSuspenseBoundarySafe() ?? currentSuspenseBoundary;
 	if (boundary) {
 		boundary.pending.add(promise);
 		promise.finally(() => {
@@ -675,39 +1045,12 @@ function registerPendingPromise(promise) {
 	}
 	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 LazyWrapper = component((ctx) => {
 		const loadState = ctx.signal({
 			state,
 			tick: 0
@@ -756,30 +1099,7 @@ function lazy(loader) {
 	};
 	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 Suspense = component((ctx) => {
 	const { props, slots } = ctx;
 	const state = ctx.signal({
 		isReady: false,
@@ -792,14 +1112,15 @@ const Suspense = defineComponent((ctx) => {
 			if (boundary.pending.size === 0) state.isReady = true;
 		}
 	};
-	ctx.onMount(() => {
+	ctx.onMounted(() => {
 		if (boundary.pending.size === 0) state.isReady = true;
 	});
 	return () => {
 		state.isReady;
 		state.pendingCount;
-		const prevBoundary = currentSuspenseBoundary$1;
-		currentSuspenseBoundary$1 = boundary;
+		const prevBoundary = getCurrentSuspenseBoundarySafe() ?? currentSuspenseBoundary;
+		currentSuspenseBoundary = boundary;
+		setCurrentSuspenseBoundarySafe(boundary);
 		try {
 			const children = slots.default();
 			if (boundary.pending.size > 0) {
@@ -823,19 +1144,42 @@ const Suspense = defineComponent((ctx) => {
 			}
 			throw err;
 		} finally {
-			currentSuspenseBoundary$1 = prevBoundary;
+			currentSuspenseBoundary = prevBoundary;
+			setCurrentSuspenseBoundarySafe(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
+const ErrorBoundary = component((ctx) => {
+	const { fallback } = ctx.props;
+	const { slots } = ctx;
+	const state = ctx.signal({
+		hasError: false,
+		error: null
+	});
+	const retry = () => {
+		state.hasError = false;
+		state.error = null;
+	};
+	return () => {
+		if (state.hasError && state.error) {
+			if (typeof fallback === "function") return fallback(state.error, retry);
+			return fallback ?? null;
+		}
+		try {
+			return slots.default();
+		} catch (e) {
+			const error = e instanceof Error ? e : new Error(String(e));
+			state.hasError = true;
+			state.error = error;
+			if (process.env.NODE_ENV !== "production") console.error("[ErrorBoundary] Caught error during render:", error);
+			if (typeof fallback === "function") return fallback(error, retry);
+			return fallback ?? null;
+		}
+	};
+}, { name: "ErrorBoundary" });
 var Utils = class {
 	static isPromise(value) {
 		return !!value && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
@@ -847,92 +1191,29 @@ function guid$1() {
 		return (c == "x" ? r : r & 3 | 8).toString(16);
 	});
 }
-
-//#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) {
+	return new Proxy(reactiveProps, {
+		get(target, key) {
 			if (typeof key === "symbol") return void 0;
-			const value = reactiveProps[key];
-			return value != null ? value : defaults[key];
+			return target[key];
 		},
-		apply(_, __, args) {
-			if (args[0] && typeof args[0] === "object") defaults = {
-				...defaults,
-				...args[0]
-			};
-			return proxy;
-		},
-		has(_, key) {
+		has(target, key) {
 			if (typeof key === "symbol") return false;
-			return key in reactiveProps || key in defaults;
+			return key in target;
 		},
-		ownKeys() {
-			return [...new Set([...Object.keys(reactiveProps), ...Object.keys(defaults)])];
+		ownKeys(target) {
+			return Object.keys(target);
 		},
-		getOwnPropertyDescriptor(_, key) {
+		getOwnPropertyDescriptor(target, key) {
 			if (typeof key === "symbol") return void 0;
-			if (key in reactiveProps || key in defaults) return {
+			if (key in target) 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) {
@@ -979,37 +1260,6 @@ function createSlots(children, slotsFromProps) {
 		};
 	} });
 }
-
-//#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,
@@ -1019,6 +1269,7 @@ function normalizeSubTree(result) {
 		dom: null,
 		text: ""
 	};
+	if (isComputed(result)) return normalizeSubTree(result.value);
 	if (Array.isArray(result)) return {
 		type: Fragment,
 		props: {},
@@ -1036,22 +1287,16 @@ function normalizeSubTree(result) {
 	};
 	return result;
 }
-
-//#endregion
-//#region ../runtime-core/src/models/index.ts
 const guid = guid$1;
-let InstanceLifetimes = /* @__PURE__ */ function(InstanceLifetimes$1) {
-	InstanceLifetimes$1[InstanceLifetimes$1["Transient"] = 0] = "Transient";
-	InstanceLifetimes$1[InstanceLifetimes$1["Scoped"] = 1] = "Scoped";
-	InstanceLifetimes$1[InstanceLifetimes$1["Singleton"] = 2] = "Singleton";
-	return InstanceLifetimes$1;
+let InstanceLifetimes = /* @__PURE__ */ function(InstanceLifetimes) {
+	InstanceLifetimes[InstanceLifetimes["Transient"] = 0] = "Transient";
+	InstanceLifetimes[InstanceLifetimes["Scoped"] = 1] = "Scoped";
+	InstanceLifetimes[InstanceLifetimes["Singleton"] = 2] = "Singleton";
+	return InstanceLifetimes;
 }({});
 function valueOf(obj) {
 	return obj;
 }
-
-//#endregion
-//#region ../runtime-core/src/messaging/index.ts
 function createTopic(options) {
 	let subscribers = [];
 	const publish = (data) => {
@@ -1064,7 +1309,7 @@ function createTopic(options) {
 			if (idx > -1) subscribers.splice(idx, 1);
 		};
 		try {
-			onCleanup(unsubscribe);
+			onUnmounted(unsubscribe);
 		} catch (e) {}
 		return { unsubscribe };
 	};
@@ -1080,72 +1325,10 @@ function createTopic(options) {
 function toSubscriber(topic) {
 	return { subscribe: (handler) => topic.subscribe(handler) };
 }
-
-//#endregion
-//#region ../runtime-core/src/di/injectable.ts
-function inject(token) {
-	const ctx = getCurrentInstance();
-	if (!ctx) return void 0;
-	let current = ctx;
-	while (current) {
-		if (current.provides && current.provides.has(token)) return current.provides.get(token);
-		current = current.parent;
-	}
-	const appContext = getAppContext(ctx);
-	if (appContext && appContext.provides.has(token)) return appContext.provides.get(token);
-}
-/**
-* Get the app context from the current component context
-*/
-function getAppContext(ctx) {
-	let current = ctx;
-	while (current) {
-		if (current._appContext) return current._appContext;
-		current = current.parent;
-	}
-	return null;
-}
-/**
-* Inject the App instance (useful for plugins)
-*/
-function injectApp() {
-	return inject(AppContextKey);
-}
-function provide(token, value) {
-	const ctx = getCurrentInstance();
-	if (!ctx) {
-		console.warn("provide called outside of component setup");
-		return;
-	}
-	if (!ctx.provides) ctx.provides = /* @__PURE__ */ new Map();
-	ctx.provides.set(token, value);
-}
-const globalInstances = /* @__PURE__ */ new Map();
-function defineInjectable(factory) {
-	const token = factory;
-	const useFn = () => {
-		const injected = inject(token);
-		if (injected) return injected;
-		if (!globalInstances.has(token)) globalInstances.set(token, factory());
-		return globalInstances.get(token);
-	};
-	useFn._factory = factory;
-	useFn._token = token;
-	return useFn;
-}
-function defineProvide(useFn) {
-	const factory = useFn._factory;
-	const token = useFn._token;
-	if (!factory || !token) throw new Error("defineProvide must be called with a function created by defineInjectable");
-	const instance = factory();
-	provide(token, instance);
-	return instance;
-}
-
-//#endregion
-//#region ../runtime-core/src/di/factory.ts
 var SubscriptionHandler = class {
-	unsubs = [];
+	constructor() {
+		this.unsubs = [];
+	}
 	add(unsub) {
 		this.unsubs.push(unsub);
 	}
@@ -1171,7 +1354,7 @@ function defineFactory(setup, lifetime, typeIdentifier) {
 		};
 		if (customDispose) customDispose(dispose);
 		else try {
-			onCleanup(() => dispose());
+			onUnmounted(() => dispose());
 		} catch (e) {}
 		return {
 			...result,
@@ -1181,160 +1364,64 @@ function defineFactory(setup, lifetime, typeIdentifier) {
 	if (setup.length <= 1) return defineInjectable(() => factoryCreator());
 	return factoryCreator;
 }
-
-//#endregion
-//#region ../runtime-core/src/stores/store.ts
-function defineStore(name, setup, lifetime = InstanceLifetimes.Scoped) {
-	return defineFactory((ctxFactory, ...args) => {
-		const scope = effectScope(true);
-		let messages = [];
-		const id = `${name}_${guid()}`;
-		const result = setup({
-			...ctxFactory,
-			defineState: (state) => {
-				return defineState(state, id, scope, messages);
-			},
-			defineActions: (actions) => {
-				return defineActions(actions, id, messages);
-			}
-		}, ...args);
-		ctxFactory.onDeactivated(() => {
-			scope.stop();
-			messages?.forEach((m) => m.destroy());
-			messages = null;
-		});
-		if (!result.name) result.name = id;
-		return result;
-	}, lifetime);
-}
-function defineActions(actions, storeInstanceName, messages) {
-	const events = {};
-	const namespace = `${storeInstanceName}.actions.${guid()}`;
-	const onDispatching = {};
-	const onDispatched = {};
-	const onFailure = {};
-	const result = {
-		onDispatching,
-		onDispatched,
-		onFailure
-	};
-	function getEvent(actionName, type) {
-		const name = `${actionName}.${type}`;
-		if (!events[name]) {
-			events[name] = createTopic({
-				namespace,
-				name
-			});
-			messages.push(events[name]);
-		}
-		return events[name];
-	}
-	Object.keys(actions).forEach((actionName) => {
-		onDispatching[actionName] = { subscribe: (fn) => {
-			return getEvent(actionName, "onDispatching").subscribe(function() {
-				fn.apply(this, arguments[0]);
-			});
-		} };
-		onDispatched[actionName] = { subscribe: (fn) => {
-			return getEvent(actionName, "onDispatched").subscribe(function() {
-				const msg = arguments[0];
-				const allArguments = [msg.result].concat(Array.from(msg.args));
-				fn.apply(this, allArguments);
-			});
-		} };
-		onFailure[actionName] = { subscribe: (fn) => {
-			return getEvent(actionName, "onFailure").subscribe(function() {
-				const msg = arguments[0];
-				const allArguments = [msg.reason].concat(Array.from(msg.args));
-				fn.apply(this, allArguments);
-			});
-		} };
-		result[actionName] = function() {
-			try {
-				const currentArguments = arguments;
-				getEvent(actionName, "onDispatching").publish(currentArguments);
-				const returnedResult = actions[actionName].apply(this, currentArguments);
-				if (Utils.isPromise(returnedResult)) returnedResult.then((result$1) => {
-					getEvent(actionName, "onDispatched").publish({
-						result: returnedResult,
-						args: currentArguments
-					});
-				});
-				else getEvent(actionName, "onDispatched").publish({
-					result: returnedResult,
-					args: currentArguments
-				});
-				return returnedResult;
-			} catch (err) {
-				console.error(err);
-				getEvent(actionName, "onFailure").publish({
-					reason: err,
-					args: arguments
-				});
-			}
-		};
-	});
-	return result;
+const CLIENT_DIRECTIVE_PREFIX = "client:";
+const CLIENT_DIRECTIVES = [
+	"client:load",
+	"client:idle",
+	"client:visible",
+	"client:media",
+	"client:only"
+];
+function filterClientDirectives(props) {
+	const filtered = {};
+	for (const key in props) if (!key.startsWith("client:")) filtered[key] = props[key];
+	return filtered;
+}
+function getHydrationDirective(props) {
+	if (props["client:load"] !== void 0) return { strategy: "load" };
+	if (props["client:idle"] !== void 0) return { strategy: "idle" };
+	if (props["client:visible"] !== void 0) return { strategy: "visible" };
+	if (props["client:only"] !== void 0) return { strategy: "only" };
+	if (props["client:media"] !== void 0) return {
+		strategy: "media",
+		media: props["client:media"]
+	};
+	return null;
 }
-function defineState(value, storeInstanceName, scope, messages) {
-	const state = signal(value);
-	const events = {};
-	const mutate = {};
-	function initProperty(key) {
-		scope.run(() => {
-			watch(() => state[key], (newValue) => {
-				triggerEvent(key, newValue);
-			}, {
-				deep: true,
-				immediate: true
-			});
-		});
-		mutate[key] = (val) => {
-			try {
-				let newValue;
-				if (typeof val === "function") newValue = val(state[key]);
-				else newValue = val;
-				state[key] = newValue;
-			} catch (err) {
-				console.error(err);
-			}
-		};
-		const eventKey = `onMutated${key.charAt(0).toUpperCase()}${key.slice(1)}`;
-		if (!events[eventKey]) {
-			const topic = createTopic({
-				namespace: `${storeInstanceName}.events`,
-				name: eventKey
-			});
-			events[eventKey] = topic;
-			messages.push(topic);
-		}
-	}
-	function triggerEvent(name, value$1) {
-		const keyString = name;
-		events[`onMutated${keyString.charAt(0).toUpperCase()}${keyString.slice(1)}`]?.publish(value$1);
+function hasClientDirective(props) {
+	for (const key in props) if (key.startsWith("client:")) return true;
+	return false;
+}
+function serializeProps(props) {
+	const filtered = filterClientDirectives(props);
+	const result = {};
+	let hasProps = false;
+	for (const key in filtered) {
+		const value = filtered[key];
+		if (key === "children" || key === "key" || key === "ref" || key === "slots") continue;
+		if (typeof value === "function") continue;
+		if (typeof value === "symbol") continue;
+		if (value === void 0) continue;
+		if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase()) continue;
+		try {
+			JSON.stringify(value);
+			result[key] = value;
+			hasProps = true;
+		} catch {}
 	}
-	if (value) Object.keys(value).forEach((key) => {
-		initProperty(key);
-	});
-	return {
-		state,
-		events,
-		mutate
-	};
+	return hasProps ? result : void 0;
 }
-
-//#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 createEmit(reactiveProps) {
+	return (event, ...args) => {
+		const eventName = `on${event[0].toUpperCase() + event.slice(1)}`;
+		const handler = ("value" in reactiveProps ? reactiveProps.value : reactiveProps)?.[eventName];
+		if (handler && typeof handler === "function") handler(...args);
+	};
 }
 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;
+	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, patchDirective: hostPatchDirective, onElementMounted: hostOnElementMounted, onElementUnmounted: hostOnElementUnmounted } = options;
 	let currentAppContext = null;
-	function render$1(element, container, appContext) {
+	function render(element, container, appContext) {
 		if (appContext) currentAppContext = appContext;
 		const oldVNode = container._vnode;
 		let vnode = null;
@@ -1363,7 +1450,72 @@ function createRenderer(options) {
 			container._vnode = null;
 		}
 	}
-	function mount(vnode, container, before = null) {
+	const svgTags = new Set([
+		"svg",
+		"animate",
+		"animateMotion",
+		"animateTransform",
+		"circle",
+		"clipPath",
+		"defs",
+		"desc",
+		"ellipse",
+		"feBlend",
+		"feColorMatrix",
+		"feComponentTransfer",
+		"feComposite",
+		"feConvolveMatrix",
+		"feDiffuseLighting",
+		"feDisplacementMap",
+		"feDistantLight",
+		"feDropShadow",
+		"feFlood",
+		"feFuncA",
+		"feFuncB",
+		"feFuncG",
+		"feFuncR",
+		"feGaussianBlur",
+		"feImage",
+		"feMerge",
+		"feMergeNode",
+		"feMorphology",
+		"feOffset",
+		"fePointLight",
+		"feSpecularLighting",
+		"feSpotLight",
+		"feTile",
+		"feTurbulence",
+		"filter",
+		"foreignObject",
+		"g",
+		"image",
+		"line",
+		"linearGradient",
+		"marker",
+		"mask",
+		"metadata",
+		"mpath",
+		"path",
+		"pattern",
+		"polygon",
+		"polyline",
+		"radialGradient",
+		"rect",
+		"set",
+		"stop",
+		"switch",
+		"symbol",
+		"text",
+		"textPath",
+		"title",
+		"tspan",
+		"use",
+		"view"
+	]);
+	function isSvgTag(tag) {
+		return svgTags.has(tag);
+	}
+	function mount(vnode, container, before = null, parentIsSVG = false) {
 		if (vnode == null || vnode === false || vnode === true) return;
 		if (vnode.type === Text) {
 			const node = hostCreateText(String(vnode.text));
@@ -1376,28 +1528,34 @@ function createRenderer(options) {
 			const anchor = hostCreateComment("");
 			vnode.dom = anchor;
 			hostInsert(anchor, container, before);
-			if (vnode.children) vnode.children.forEach((child) => mount(child, container, anchor));
+			if (vnode.children) vnode.children.forEach((child) => mount(child, container, anchor, parentIsSVG));
 			return;
 		}
 		if (isComponent(vnode.type)) {
 			mountComponent(vnode, container, before, vnode.type.__setup);
 			return;
 		}
-		const element = hostCreateElement(vnode.type);
+		const tag = vnode.type;
+		const isSVG = tag === "svg" || parentIsSVG && tag !== "foreignObject";
+		const element = hostCreateElement(tag, isSVG);
 		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) {
+			for (const key in vnode.props) if (key !== "children" && key !== "key" && key !== "ref") if (key.charCodeAt(0) === 117 && key.startsWith("use:")) {
+				if (hostPatchDirective) hostPatchDirective(element, key.slice(4), null, vnode.props[key], currentAppContext);
+			} else hostPatchProp(element, key, null, vnode.props[key], isSVG);
+			if (vnode.props.ref) untrack(() => {
 				if (typeof vnode.props.ref === "function") vnode.props.ref(element);
 				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = element;
-			}
+			});
 		}
+		const childIsSVG = isSVG && tag !== "foreignObject";
 		if (vnode.children) vnode.children.forEach((child) => {
 			child.parent = vnode;
-			mount(child, element);
+			mount(child, element, null, childIsSVG);
 		});
 		hostInsert(element, container, before);
+		if (hostOnElementMounted) hostOnElementMounted(element);
 	}
 	function unmount(vnode, container) {
 		const internalVNode = vnode;
@@ -1407,10 +1565,10 @@ function createRenderer(options) {
 			const subTree = internalVNode._subTree;
 			if (subTree) unmount(subTree, container);
 			if (vnode.dom) hostRemove(vnode.dom);
-			if (vnode.props?.ref) {
+			if (vnode.props?.ref) untrack(() => {
 				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) {
@@ -1418,10 +1576,11 @@ function createRenderer(options) {
 			if (vnode.dom) hostRemove(vnode.dom);
 			return;
 		}
-		if (vnode.props?.ref) {
+		if (vnode.props?.ref) untrack(() => {
 			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 (hostOnElementUnmounted && vnode.dom) hostOnElementUnmounted(vnode.dom);
 		if (vnode.children && vnode.children.length > 0) vnode.children.forEach((child) => unmount(child, vnode.dom));
 		if (vnode.dom) hostRemove(vnode.dom);
 	}
@@ -1429,7 +1588,7 @@ function createRenderer(options) {
 		if (oldVNode === newVNode) return;
 		if (!isSameVNode(oldVNode, newVNode)) {
 			const parent = hostParentNode(oldVNode.dom) || container;
-			const nextSibling = hostNextSibling(oldVNode.dom);
+			const nextSibling = oldVNode.dom ? hostNextSibling(oldVNode.dom) : null;
 			unmount(oldVNode, parent);
 			mount(newVNode, parent, nextSibling);
 			return;
@@ -1444,12 +1603,25 @@ function createRenderer(options) {
 			const props = oldInternal._componentProps;
 			newInternal._componentProps = props;
 			if (props) {
-				const newProps$1 = newVNode.props || {};
+				const newProps = newVNode.props || {};
+				const newModels = newVNode.props?.$models || {};
 				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 newProps) if (key !== "children" && key !== "key" && key !== "ref" && key !== "$models") {
+						if (props[key] !== newProps[key]) props[key] = newProps[key];
+					}
+					for (const modelKey in newModels) {
+						const newModel = newModels[modelKey];
+						const oldModel = props[modelKey];
+						if (isModel(newModel)) {
+							if (isModel(oldModel)) {
+								const [newObj, newKey] = newModel.binding;
+								const [oldObj, oldKey] = oldModel.binding;
+								if (newObj === oldObj && newKey === oldKey) continue;
+							}
+							props[modelKey] = newModel;
+						}
 					}
-					for (const key in props) if (!(key in newProps$1) && key !== "children" && key !== "key" && key !== "ref") delete props[key];
+					for (const key in props) if (!(key in newProps) && !(key in newModels) && key !== "children" && key !== "key" && key !== "ref" && key !== "$models") delete props[key];
 				});
 			}
 			const slotsRef = oldInternal._slots;
@@ -1473,31 +1645,57 @@ function createRenderer(options) {
 		}
 		if (newVNode.type === Text) {
 			newVNode.dom = oldVNode.dom;
+			if (!newVNode.dom) {
+				const textNode = hostCreateText(String(newVNode.text));
+				newVNode.dom = textNode;
+				if (container) hostInsert(textNode, container, oldVNode.dom || null);
+				return;
+			}
 			if (oldVNode.text !== newVNode.text) hostSetText(newVNode.dom, String(newVNode.text));
 			return;
 		}
 		if (newVNode.type === Fragment) {
-			patchChildren(oldVNode, newVNode, container);
+			patchChildren(oldVNode, newVNode, container, false);
 			return;
 		}
 		const element = newVNode.dom = oldVNode.dom;
+		if (!element) {
+			mount(newVNode, container);
+			return;
+		}
+		const tag = newVNode.type;
+		const isSVG = tag === "svg" || isSvgTag(tag);
 		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 oldProps) if (!(key in newProps) && key !== "children" && key !== "key" && key !== "ref") if (key.charCodeAt(0) === 117 && key.startsWith("use:")) {
+			if (hostPatchDirective) hostPatchDirective(element, key.slice(4), oldProps[key], null, currentAppContext);
+		} else hostPatchProp(element, key, oldProps[key], null, isSVG);
 		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);
+			if (key !== "children" && key !== "key" && key !== "ref" && oldValue !== newValue) if (key.charCodeAt(0) === 117 && key.startsWith("use:")) {
+				if (hostPatchDirective) hostPatchDirective(element, key.slice(4), oldValue, newValue, currentAppContext);
+			} else hostPatchProp(element, key, oldValue, newValue, isSVG);
 		}
-		patchChildren(oldVNode, newVNode, element);
+		patchChildren(oldVNode, newVNode, element, isSVG && tag !== "foreignObject");
 	}
-	function patchChildren(oldVNode, newVNode, container) {
+	function patchChildren(oldVNode, newVNode, container, parentIsSVG = false) {
 		const oldChildren = oldVNode.children;
 		const newChildren = newVNode.children;
 		newChildren.forEach((c) => c.parent = newVNode);
-		reconcileChildrenArray(container, oldChildren, newChildren);
+		reconcileChildrenArray(container, oldChildren, newChildren, parentIsSVG);
+	}
+	function checkDuplicateKeys(children) {
+		if (process.env.NODE_ENV === "production") return;
+		const seenKeys = /* @__PURE__ */ new Set();
+		for (const child of children) if (child?.key != null) {
+			const keyStr = String(child.key);
+			if (seenKeys.has(keyStr)) console.warn(`[SignalX] Duplicate key "${child.key}" detected in list. Keys should be unique among siblings to ensure correct reconciliation. This may cause unexpected behavior when items are reordered, added, or removed.`);
+			seenKeys.add(keyStr);
+		}
 	}
-	function reconcileChildrenArray(parent, oldChildren, newChildren) {
+	function reconcileChildrenArray(parent, oldChildren, newChildren, parentIsSVG = false) {
+		if (process.env.NODE_ENV !== "production") checkDuplicateKeys(newChildren);
 		let oldStartIdx = 0;
 		let oldEndIdx = oldChildren.length - 1;
 		let oldStartVNode = oldChildren[0];
@@ -1539,13 +1737,13 @@ function createRenderer(options) {
 				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);
+			} else mount(newStartVNode, parent, oldStartVNode.dom, parentIsSVG);
 			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);
+				for (let i = newStartIdx; i <= newEndIdx; i++) mount(newChildren[i], parent, anchor, parentIsSVG);
 			}
 		} else if (newStartIdx > newEndIdx) {
 			for (let i = oldStartIdx; i <= oldEndIdx; i++) if (oldChildren[i]) unmount(oldChildren[i], parent);
@@ -1562,7 +1760,11 @@ function createRenderer(options) {
 		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);
+			if (key != null) {
+				const keyStr = String(key);
+				if (process.env.NODE_ENV !== "production" && map.has(keyStr)) console.warn(`[SignalX] Duplicate key "${key}" detected in list. Keys should be unique among siblings to ensure correct reconciliation. This may cause unexpected behavior when items are reordered, added, or removed.`);
+				map.set(keyStr, i);
+			}
 		}
 		return map;
 	}
@@ -1577,14 +1779,21 @@ function createRenderer(options) {
 		hostInsert(anchor, container, before);
 		let exposed = null;
 		let exposeCalled = false;
-		const { children, slots: slotsFromProps, ...propsData } = vnode.props || {};
-		const reactiveProps = signal(propsData);
+		const { children, slots: slotsFromProps, $models: modelsData, ...propsData } = vnode.props || {};
+		const propsWithModels = { ...propsData };
+		if (modelsData) for (const modelKey in modelsData) {
+			const modelValue = modelsData[modelKey];
+			if (isModel(modelValue)) propsWithModels[modelKey] = modelValue;
+		}
+		const reactiveProps = signal(propsWithModels);
 		const internalVNode = vnode;
 		internalVNode._componentProps = reactiveProps;
 		const slots = createSlots(children, slotsFromProps);
 		internalVNode._slots = slots;
+		const createdHooks = [];
 		const mountHooks = [];
-		const cleanupHooks = [];
+		const updatedHooks = [];
+		const unmountHooks = [];
 		const parentInstance = getCurrentInstance();
 		const componentName = vnode.type.__name;
 		const ctx = {
@@ -1592,16 +1801,19 @@ function createRenderer(options) {
 			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);
-			},
+			emit: createEmit(reactiveProps),
 			parent: parentInstance,
-			onMount: (fn) => {
+			onMounted: (fn) => {
 				mountHooks.push(fn);
 			},
-			onCleanup: (fn) => {
-				cleanupHooks.push(fn);
+			onUnmounted: (fn) => {
+				unmountHooks.push(fn);
+			},
+			onCreated: (fn) => {
+				createdHooks.push(fn);
+			},
+			onUpdated: (fn) => {
+				updatedHooks.push(fn);
 			},
 			expose: (exposedValue) => {
 				exposed = exposedValue;
@@ -1612,7 +1824,7 @@ function createRenderer(options) {
 		};
 		applyContextExtensions(ctx);
 		ctx.__name = componentName;
-		if (currentAppContext) ctx._appContext = currentAppContext;
+		if (!parentInstance && currentAppContext) provideAppContext(ctx, currentAppContext);
 		const componentInstance = {
 			name: componentName,
 			ctx,
@@ -1622,9 +1834,10 @@ function createRenderer(options) {
 		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.`);
+			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 onMounted.`);
 			renderFn = setupResult;
 			notifyComponentCreated(currentAppContext, componentInstance);
+			createdHooks.forEach((hook) => hook());
 		} catch (err) {
 			if (!handleComponentError(currentAppContext, err, componentInstance, "setup")) throw err;
 		} finally {
@@ -1632,8 +1845,10 @@ function createRenderer(options) {
 		}
 		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;
+			untrack(() => {
+				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;
@@ -1647,6 +1862,7 @@ function createRenderer(options) {
 					if (prevSubTree) {
 						patch(prevSubTree, subTree, container);
 						notifyComponentUpdated(currentAppContext, componentInstance);
+						updatedHooks.forEach((hook) => hook());
 					} else mount(subTree, container, anchor);
 					internalVNode._subTree = subTree;
 				} catch (err) {
@@ -1665,34 +1881,18 @@ function createRenderer(options) {
 		notifyComponentMounted(currentAppContext, componentInstance);
 		vnode.cleanup = () => {
 			notifyComponentUnmounted(currentAppContext, componentInstance);
-			cleanupHooks.forEach((hook) => hook(mountCtx));
+			unmountHooks.forEach((hook) => hook(mountCtx));
 		};
 	}
 	return {
-		render: render$1,
+		render,
 		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);
-			} };
-		}
+		mountComponent
 	};
 }
-
-//#endregion
-//#region ../runtime-terminal/src/focus.ts
-const focusableIds = /* @__PURE__ */ new Set();
+var focusableIds = /* @__PURE__ */ new Set();
 const focusState = signal({ activeId: null });
 function registerFocusable(id) {
 	focusableIds.add(id);
@@ -1718,9 +1918,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 ../runtime-terminal/src/utils.ts
 function getColorCode(color) {
 	switch (color) {
 		case "red": return "\x1B[31m";
@@ -1748,316 +1945,62 @@ 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$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) {
-	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$1,
-		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$1(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$1();
-				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$1) 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$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
-/** @jsxImportSource @sigx/runtime-core */
-const Input = defineComponent(({ props, emit }) => {
+const Input = component(({ 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$1("box", {
+		return /* @__PURE__ */ jsxs("box", {
 			border: "single",
 			borderColor: showCursor ? "green" : "white",
 			label: props.label,
-			children: [/* @__PURE__ */ jsx$1("text", { children: val || placeholder }), showCursor && /* @__PURE__ */ jsx$1("text", {
+			children: [/* @__PURE__ */ jsx("text", { children: val || placeholder }), showCursor && /* @__PURE__ */ jsx("text", {
 				color: "cyan",
 				children: "_"
 			})]
 		});
 	};
 }, { name: "Input" });
-
-//#endregion
-//#region ../runtime-terminal/src/components/ProgressBar.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const ProgressBar = defineComponent(({ props }) => {
+const ProgressBar = component(({ props }) => {
 	return () => {
 		const value = props.value || 0;
 		const max = props.max || 100;
@@ -2070,14 +2013,10 @@ const ProgressBar = defineComponent(({ props }) => {
 		const percentage = Math.min(Math.max(value / max, 0), 1);
 		const filledLen = Math.round(width * percentage);
 		const emptyLen = width - filledLen;
-		return /* @__PURE__ */ jsx$1("box", { children: /* @__PURE__ */ jsx$1("text", { children: colorCode + barChar.repeat(filledLen) + emptyChar.repeat(emptyLen) + reset + ` ${Math.round(percentage * 100)}%` }) });
+		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 ../runtime-terminal/src/components/Button.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Button = defineComponent(({ props, emit }) => {
+const Button = component(({ props, emit }) => {
 	const id = Math.random().toString(36).slice(2);
 	const isFocused = () => focusState.activeId === id;
 	const pressed = signal({ value: false });
@@ -2095,11 +2034,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);
@@ -2108,42 +2047,38 @@ const Button = defineComponent(({ props, emit }) => {
 		const focused = isFocused();
 		const label = props.label || "Button";
 		const isPressed = pressed.value;
-		return /* @__PURE__ */ jsx$1("box", {
+		return /* @__PURE__ */ jsx("box", {
 			border: "single",
 			borderColor: isPressed ? "yellow" : focused ? "green" : "white",
 			backgroundColor: isPressed ? "red" : focused ? "blue" : void 0,
 			dropShadow: props.dropShadow,
-			children: /* @__PURE__ */ jsx$1("text", {
+			children: /* @__PURE__ */ jsx("text", {
 				color: focused ? "white" : void 0,
 				children: label
 			})
 		});
 	};
 }, { name: "Button" });
-
-//#endregion
-//#region ../runtime-terminal/src/components/Checkbox.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Checkbox = defineComponent(({ props, emit }) => {
+const Checkbox = component(({ 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);
 	});
@@ -2152,12 +2087,12 @@ const Checkbox = defineComponent(({ props, emit }) => {
 		const focused = isFocused();
 		const isChecked = checked();
 		const disabled = !!props.disabled;
-		return /* @__PURE__ */ jsxs$1("box", { children: [
-			/* @__PURE__ */ jsx$1("text", {
+		return /* @__PURE__ */ jsxs("box", { children: [
+			/* @__PURE__ */ jsx("text", {
 				color: focused ? "cyan" : "white",
 				children: focused ? ">" : " "
 			}),
-			/* @__PURE__ */ jsxs$1("text", {
+			/* @__PURE__ */ jsxs("text", {
 				color: disabled ? "white" : isChecked ? "green" : focused ? "cyan" : "white",
 				children: [
 					"[",
@@ -2165,86 +2100,87 @@ const Checkbox = defineComponent(({ props, emit }) => {
 					"]"
 				]
 			}),
-			label && /* @__PURE__ */ jsxs$1("text", {
+			label && /* @__PURE__ */ jsxs("text", {
 				color: disabled ? "white" : focused ? "cyan" : void 0,
 				children: [" ", label]
 			})
 		] });
 	};
 }, { name: "Checkbox" });
-
-//#endregion
-//#region ../runtime-terminal/src/components/Select.tsx
-/** @jsxImportSource @sigx/runtime-core */
-const Select = defineComponent(({ props, emit }) => {
+const Select = component(({ 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$1("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$1("box", { children: [/* @__PURE__ */ jsxs$1("text", {
-					color: isSelected ? "cyan" : "white",
-					children: [
-						isSelected ? "❯" : " ",
-						" ",
-						option.label
-					]
-				}), option.description && isSelected && /* @__PURE__ */ jsxs$1(Fragment$1, { children: [/* @__PURE__ */ jsx$1("br", {}), /* @__PURE__ */ jsxs$1("text", {
-					color: "white",
-					children: ["  ", option.description]
-				})] })] });
-			})
-		});
+			children: optionElements
+		}), descriptionElement] });
 	};
 }, { name: "Select" });
-
-//#endregion
-//#region ../runtime-terminal/src/index.ts
-const renderer = createRenderer({
+const { render } = createRenderer({
 	patchProp: (el, key, prev, next) => {
 		el.props[key] = next;
 		scheduleRender();
@@ -2315,9 +2251,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;
@@ -2333,10 +2268,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;
@@ -2425,7 +2356,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);
@@ -2472,16 +2403,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,
@@ -2491,9 +2413,6 @@ function mountTerminal(options = { clearConsole: true }) {
 		}
 	};
 }
-/**
-* Exit the terminal app cleanly, restoring terminal state.
-*/
 function exitTerminal() {
 	if (unmountFn) {
 		unmountFn();
@@ -2502,20 +2421,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",
@@ -2544,7 +2449,6 @@ const terminalMount = (component, options, appContext) => {
 	};
 };
 setDefaultMount(terminalMount);
+export { Button, CLIENT_DIRECTIVES, CLIENT_DIRECTIVE_PREFIX, Checkbox, ComputedSymbol, ErrorBoundary, Fragment, Input, InstanceLifetimes, ProgressBar, Select, SubscriptionHandler, Suspense, Text, Utils, __DIRECTIVE__, applyContextExtensions, batch, cleanup, component, compound, computed, createEmit, createModel, createModelFromBinding, createPropsAccessor, createPropsProxy, createRenderer, createSlots, createTopic, defineApp, defineDirective, defineFactory, defineInjectable, defineProvide, detectAccess, effect, effectScope, exitTerminal, filterClientDirectives, focus, focusNext, focusPrev, focusState, getAppContextToken, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getHydrationDirective, getModelSymbol, getPlatformModelProcessor, guid, handleComponentError, hasClientDirective, hasRequestIsolation, isComponent, isComputed, isDirective, isLazyComponent, isModel, isReactive, jsx, jsxDEV, jsxs, lazy, mountTerminal, normalizeSubTree, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCreated, onKey, onMounted, onUnmounted, onUpdated, provideAppContext, registerComponentPlugin, registerContextExtension, registerFocusable, registerPendingPromise, render, renderNodeToLines, renderTerminal, runInRequestScope, serializeProps, setCurrentInstance, setDefaultMount, setPlatformModelProcessor, signal, terminalMount, toRaw, toSubscriber, track, trigger, unregisterFocusable, untrack, useAppContext, valueOf, watch };
 
-//#endregion
-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