@sigx/runtime-core 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,107 +1,139 @@
-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;
+import { detectAccess, effect, isComputed, signal, signal as signal$1, untrack } from "@sigx/reactivity";
+var platformModelProcessor = null;
+function setPlatformModelProcessor(fn) {
+	platformModelProcessor = fn;
 }
-/**
-* Get the current platform sync processor (for internal use).
-*/
-function getPlatformSyncProcessor() {
-	return platformSyncProcessor;
+function getPlatformModelProcessor() {
+	return platformModelProcessor;
 }
-
-//#endregion
-//#region src/plugins.ts
-const plugins = [];
+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 currentComponentContext = null;
+function getCurrentInstance() {
+	return currentComponentContext;
+}
+function setCurrentInstance(ctx) {
+	const prev = currentComponentContext;
+	currentComponentContext = ctx;
+	return prev;
+}
+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);
+}
+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 = {
@@ -126,11 +158,13 @@ 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);
@@ -167,15 +201,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 +219,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 +227,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 +235,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 +243,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 +257,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 +316,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,27 +416,11 @@ 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;
 	if (boundary) {
@@ -453,39 +433,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 +487,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,7 +500,7 @@ 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 () => {
@@ -605,15 +535,9 @@ const Suspense = defineComponent((ctx) => {
 		}
 	};
 }, { 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
 var Utils = class {
 	static isPromise(value) {
 		return !!value && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
@@ -625,92 +549,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 +618,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 +627,7 @@ function normalizeSubTree(result) {
 		dom: null,
 		text: ""
 	};
+	if (isComputed(result)) return normalizeSubTree(result.value);
 	if (Array.isArray(result)) return {
 		type: Fragment,
 		props: {},
@@ -814,22 +645,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 +667,7 @@ function createTopic(options) {
 			if (idx > -1) subscribers.splice(idx, 1);
 		};
 		try {
-			onCleanup(unsubscribe);
+			onUnmounted(unsubscribe);
 		} catch (e) {}
 		return { unsubscribe };
 	};
@@ -858,72 +683,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 +712,7 @@ function defineFactory(setup, lifetime, typeIdentifier) {
 		};
 		if (customDispose) customDispose(dispose);
 		else try {
-			onCleanup(() => dispose());
+			onUnmounted(() => dispose());
 		} catch (e) {}
 		return {
 			...result,
@@ -959,155 +722,59 @@ 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);
+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 defineActions(actions, storeInstanceName, messages) {
-	const events = {};
-	const namespace = `${storeInstanceName}.actions.${guid()}`;
-	const onDispatching = {};
-	const onDispatched = {};
-	const onFailure = {};
-	const result = {
-		onDispatching,
-		onDispatched,
-		onFailure
+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;
@@ -1141,7 +808,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,26 +886,29 @@ 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") 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);
 	}
@@ -1185,10 +920,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 +931,10 @@ 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 (vnode.children && vnode.children.length > 0) vnode.children.forEach((child) => unmount(child, vnode.dom));
 		if (vnode.dom) hostRemove(vnode.dom);
 	}
@@ -1207,7 +942,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 +957,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;
@@ -1255,27 +1003,43 @@ function createRenderer(options) {
 			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") 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) 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 reconcileChildrenArray(parent, oldChildren, newChildren) {
+	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, parentIsSVG = false) {
+		if (process.env.NODE_ENV !== "production") checkDuplicateKeys(newChildren);
 		let oldStartIdx = 0;
 		let oldEndIdx = oldChildren.length - 1;
 		let oldStartVNode = oldChildren[0];
@@ -1317,13 +1081,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 +1104,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 +1123,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 +1145,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 +1168,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 +1178,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 +1189,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 +1206,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 +1225,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 +1233,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, Fragment, InstanceLifetimes, SubscriptionHandler, Suspense, Text, Utils, applyContextExtensions, component, compound, createEmit, createModel, createModelFromBinding, createPropsAccessor, createPropsProxy, createRenderer, createSlots, createTopic, defineApp, defineFactory, defineInjectable, defineProvide, filterClientDirectives, getAppContextToken, getComponentMeta, getComponentPlugins, getCurrentInstance, getDefaultMount, getHydrationDirective, getModelSymbol, getPlatformModelProcessor, guid, handleComponentError, hasClientDirective, isComponent, isLazyComponent, isModel, jsx, jsxDEV, jsxs, lazy, normalizeSubTree, notifyComponentCreated, notifyComponentMounted, notifyComponentUnmounted, notifyComponentUpdated, onCreated, onMounted, onUnmounted, onUpdated, provideAppContext, registerComponentPlugin, registerContextExtension, registerPendingPromise, 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