@sigx/runtime-core 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,114 +1,206 @@
-import { detectAccess, effect, effectScope, signal, signal as signal$1, untrack, watch } from "@sigx/reactivity";
-
-//#region src/platform.ts
-let platformSyncProcessor = 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 = fn;
-}
-/**
-* Get the current platform sync processor (for internal use).
-*/
-function getPlatformSyncProcessor() {
-	return platformSyncProcessor;
+import { detectAccess, effect, isComputed, signal, signal as signal$1, untrack } from "@sigx/reactivity";
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var platformModelProcessor = null;
+function setPlatformModelProcessor(fn) {
+	platformModelProcessor = fn;
 }
-
-//#endregion
-//#region src/plugins.ts
-const plugins = [];
+function getPlatformModelProcessor() {
+	return platformModelProcessor;
+}
+var plugins = [];
 function registerComponentPlugin(plugin) {
 	plugins.push(plugin);
 }
-/**
-* Get all registered plugins (internal use)
-*/
 function getComponentPlugins() {
 	return plugins;
 }
-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: () => {} };
-* });
-* ```
-*/
+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 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;
@@ -126,16 +218,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.");
@@ -167,15 +269,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 {
@@ -184,10 +287,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 {
@@ -196,10 +295,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 {
@@ -208,10 +303,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 {
@@ -220,10 +311,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 {
@@ -238,104 +325,53 @@ 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 src/component.ts
-let currentComponentContext = null;
-function getCurrentInstance() {
-	return currentComponentContext;
-}
-function setCurrentInstance(ctx) {
-	const prev = currentComponentContext;
-	currentComponentContext = ctx;
-	return prev;
+function compound(main, sub) {
+	return Object.assign(main, sub);
 }
-function onMount(fn) {
-	if (currentComponentContext) currentComponentContext.onMount(fn);
-	else console.warn("onMount called outside of component setup");
+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 onCleanup(fn) {
-	if (currentComponentContext) currentComponentContext.onCleanup(fn);
-	else console.warn("onCleanup called outside of component setup");
+function createModelFromBinding(binding) {
+	const [obj, key, handler] = binding;
+	return createModel([obj, key], handler);
 }
-const componentRegistry = /* @__PURE__ */ new Map();
-/**
-* Get component metadata (for DevTools)
-*/
-function getComponentMeta(factory) {
-	return componentRegistry.get(factory);
+function isModel(value) {
+	return value !== null && typeof value === "object" && MODEL_SYMBOL in value && value[MODEL_SYMBOL] === true;
 }
-/**
-* 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];
-	} });
+function getModelSymbol() {
+	return MODEL_SYMBOL;
 }
-/**
-* 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.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 src/jsx-runtime.ts
 const Fragment = Symbol.for("sigx.Fragment");
 const Text = Symbol.for("sigx.Text");
 function normalizeChildren(children) {
 	if (children == null || children === false || children === true) return [];
+	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,
@@ -348,64 +384,92 @@ function normalizeChildren(children) {
 	if (children.type) return [children];
 	return [];
 }
-/**
-* Check if a type is a sigx component (has __setup)
-*/
-function isComponent$1(type) {
-	return typeof type === "function" && "__setup" in type;
-}
-/**
-* Create a JSX element - this is the core function called by TSX transpilation
-*/
 function jsx(type, props, key) {
 	const processedProps = { ...props || {} };
+	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;
+				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("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];
+		} 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}`;
-				const existingHandler = processedProps[eventName];
-				processedProps[eventName] = (v) => {
-					stateObj[key$1] = v;
-					if (existingHandler) existingHandler(v);
-				};
+				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$1(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
 		};
@@ -420,29 +484,13 @@ function jsx(type, props, key) {
 		dom: null
 	};
 }
-/**
-* JSX Factory for fragments
-*/
 function jsxs(type, props, key) {
 	return jsx(type, props, key);
 }
 const jsxDEV = jsx;
-
-//#endregion
-//#region 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 = null;
-/**
-* Register a promise with the current Suspense boundary
-* @internal
-*/
+var currentSuspenseBoundary = null;
 function registerPendingPromise(promise) {
-	const boundary = currentSuspenseBoundary;
+	const boundary = getCurrentSuspenseBoundarySafe() ?? currentSuspenseBoundary;
 	if (boundary) {
 		boundary.pending.add(promise);
 		promise.finally(() => {
@@ -453,39 +501,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
@@ -534,30 +555,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,
@@ -570,14 +568,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;
+		const prevBoundary = getCurrentSuspenseBoundarySafe() ?? currentSuspenseBoundary;
 		currentSuspenseBoundary = boundary;
+		setCurrentSuspenseBoundarySafe(boundary);
 		try {
 			const children = slots.default();
 			if (boundary.pending.size > 0) {
@@ -602,18 +601,41 @@ const Suspense = defineComponent((ctx) => {
 			throw err;
 		} finally {
 			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 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";
@@ -625,92 +647,29 @@ function guid$1() {
 		return (c == "x" ? r : r & 3 | 8).toString(16);
 	});
 }
-
-//#endregion
-//#region 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 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$1({ v: 0 });
 	function extractNamedSlotsFromChildren(c) {
@@ -757,37 +716,6 @@ function createSlots(children, slotsFromProps) {
 		};
 	} });
 }
-
-//#endregion
-//#region 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,
@@ -797,6 +725,7 @@ function normalizeSubTree(result) {
 		dom: null,
 		text: ""
 	};
+	if (isComputed(result)) return normalizeSubTree(result.value);
 	if (Array.isArray(result)) return {
 		type: Fragment,
 		props: {},
@@ -814,22 +743,16 @@ function normalizeSubTree(result) {
 	};
 	return result;
 }
-
-//#endregion
-//#region 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 src/messaging/index.ts
 function createTopic(options) {
 	let subscribers = [];
 	const publish = (data) => {
@@ -842,7 +765,7 @@ function createTopic(options) {
 			if (idx > -1) subscribers.splice(idx, 1);
 		};
 		try {
-			onCleanup(unsubscribe);
+			onUnmounted(unsubscribe);
 		} catch (e) {}
 		return { unsubscribe };
 	};
@@ -858,72 +781,10 @@ function createTopic(options) {
 function toSubscriber(topic) {
 	return { subscribe: (handler) => topic.subscribe(handler) };
 }
-
-//#endregion
-//#region 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 src/di/factory.ts
 var SubscriptionHandler = class {
-	unsubs = [];
+	constructor() {
+		this.unsubs = [];
+	}
 	add(unsub) {
 		this.unsubs.push(unsub);
 	}
@@ -949,7 +810,7 @@ function defineFactory(setup, lifetime, typeIdentifier) {
 		};
 		if (customDispose) customDispose(dispose);
 		else try {
-			onCleanup(() => dispose());
+			onUnmounted(() => dispose());
 		} catch (e) {}
 		return {
 			...result,
@@ -959,158 +820,62 @@ function defineFactory(setup, lifetime, typeIdentifier) {
 	if (setup.length <= 1) return defineInjectable(() => factoryCreator());
 	return factoryCreator;
 }
-
-//#endregion
-//#region 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
+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"]
 	};
-	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;
+	return null;
 }
-function defineState(value, storeInstanceName, scope, messages) {
-	const state = signal$1(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 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(element, container, appContext) {
 		if (appContext) currentAppContext = appContext;
@@ -1141,7 +906,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));
@@ -1154,28 +984,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;
@@ -1185,10 +1021,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) {
@@ -1196,10 +1032,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);
 	}
@@ -1207,7 +1044,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;
@@ -1222,12 +1059,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 key in props) if (!(key in newProps$1) && key !== "children" && key !== "key" && key !== "ref") delete props[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) && !(key in newModels) && key !== "children" && key !== "key" && key !== "ref" && key !== "$models") delete props[key];
 				});
 			}
 			const slotsRef = oldInternal._slots;
@@ -1251,31 +1101,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];
@@ -1317,13 +1193,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);
@@ -1340,7 +1216,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;
 	}
@@ -1355,14 +1235,21 @@ function createRenderer(options) {
 		hostInsert(anchor, container, before);
 		let exposed = null;
 		let exposeCalled = false;
-		const { children, slots: slotsFromProps, ...propsData } = vnode.props || {};
-		const reactiveProps = signal$1(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$1(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 = {
@@ -1370,16 +1257,19 @@ function createRenderer(options) {
 			signal: signal$1,
 			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;
@@ -1390,7 +1280,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,
@@ -1400,9 +1290,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 {
@@ -1410,8 +1301,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;
@@ -1425,6 +1318,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) {
@@ -1443,7 +1337,7 @@ function createRenderer(options) {
 		notifyComponentMounted(currentAppContext, componentInstance);
 		vnode.cleanup = () => {
 			notifyComponentUnmounted(currentAppContext, componentInstance);
-			cleanupHooks.forEach((hook) => hook(mountCtx));
+			unmountHooks.forEach((hook) => hook(mountCtx));
 		};
 	}
 	return {
@@ -1451,23 +1345,9 @@ function createRenderer(options) {
 		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(rootComponent, container);
-			} };
-		}
+		mountComponent
 	};
 }
+export { CLIENT_DIRECTIVES, CLIENT_DIRECTIVE_PREFIX, ErrorBoundary, Fragment, InstanceLifetimes, SubscriptionHandler, Suspense, Text, Utils, __DIRECTIVE__, applyContextExtensions, component, compound, createEmit, createModel, createModelFromBinding, createPropsAccessor, createPropsProxy, createRenderer, createSlots, createTopic, defineApp, defineDirective, defineFactory, defineInjectable, defineProvide, filterClientDirectives, getAppContextToken, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getHydrationDirective, getModelSymbol, getPlatformModelProcessor, guid, handleComponentError, hasClientDirective, hasRequestIsolation, isComponent, isDirective, isLazyComponent, isModel, jsx, jsxDEV, jsxs, lazy, normalizeSubTree, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCreated, onMounted, onUnmounted, onUpdated, provideAppContext, registerComponentPlugin, registerContextExtension, registerPendingPromise, runInRequestScope, serializeProps, setCurrentInstance, setDefaultMount, setPlatformModelProcessor, signal, toSubscriber, useAppContext, valueOf };
 
-//#endregion
-export { AppContextKey, Fragment, InstanceLifetimes, SubscriptionHandler, Suspense, Text, Utils, applyContextExtensions, createPropsAccessor, createPropsProxy, createRenderer, createSlots, createTopic, defineApp, defineComponent, defineFactory, defineInjectable, defineProvide, defineStore, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getPlatformSyncProcessor, guid, handleComponentError, inject, injectApp, isLazyComponent, jsx, jsxDEV, jsxs, lazy, normalizeSubTree, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCleanup, onMount, provide, registerComponentPlugin, registerContextExtension, registerPendingPromise, setCurrentInstance, setDefaultMount, setPlatformSyncProcessor, signal, toSubscriber, valueOf };
 //# sourceMappingURL=index.js.map