@sigx/runtime-dom 0.1.5 → 0.1.7

package/dist/Portal.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Portal component for rendering children to a different DOM location.
+ *
+ * Uses the `moveBefore` API (Chrome 133+) when available for state-preserving
+ * DOM moves. Falls back to `insertBefore` for older browsers.
+ *
+ * @example
+ * ```tsx
+ * import { Portal } from '@sigx/runtime-dom';
+ *
+ * // Render to document.body (default)
+ * <Portal>
+ *   <div class="modal">Modal content</div>
+ * </Portal>
+ *
+ * // Render to a specific container
+ * <Portal to={document.getElementById('modal-root')}>
+ *   <div class="modal">Modal content</div>
+ * </Portal>
+ *
+ * // Render to a container by selector
+ * <Portal to="#modal-root">
+ *   <div class="modal">Modal content</div>
+ * </Portal>
+ * ```
+ */
+import { DefineProp } from '@sigx/runtime-core';
+/**
+ * Check if the browser supports the moveBefore API.
+ * moveBefore allows moving DOM nodes without losing state (iframes, videos, focus, etc.)
+ */
+export declare function supportsMoveBefore(): boolean;
+/**
+ * Move or insert a node into a parent, using moveBefore when available
+ * for state-preserving moves.
+ *
+ * @param parent - The target parent element
+ * @param node - The node to move/insert
+ * @param anchor - Optional reference node to insert before
+ */
+export declare function moveNode(parent: Element, node: Node, anchor?: Node | null): void;
+type PortalProps = DefineProp<'to', string | Element> & DefineProp<'disabled', boolean>;
+/**
+ * Portal component - renders children to a different DOM location.
+ *
+ * Props:
+ * - `to` - Target container (Element or CSS selector string). Defaults to document.body.
+ * - `disabled` - When true, renders children in place instead of portaling
+ * - `children` - Content to render in the portal
+ *
+ * Features:
+ * - Uses `moveBefore` API (Chrome 133+) for state-preserving DOM moves
+ * - Preserves iframe content, video playback, focus, and CSS animations
+ * - Falls back to `insertBefore` for older browsers
+ */
+export declare const Portal: import("@sigx/runtime-core").ComponentFactory<PortalProps, void, {}>;
+export {};
+//# sourceMappingURL=Portal.d.ts.map

package/dist/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAa,UAAU,EAA0C,MAAM,oBAAoB,CAAC;AAInG;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,IAAI,EACV,MAAM,GAAE,IAAI,GAAG,IAAW,GAC3B,IAAI,CAQN;AAuBD,KAAK,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,sEA2EG,CAAC"}

package/dist/directives/show-jsx-types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * JSX type augmentation for the `show` directive.
+ *
+ * Adds `use:show` to `DirectiveAttributeExtensions` so that typing `use:`
+ * in JSX triggers IntelliSense with `use:show` as a suggestion.
+ */
+import type { DirectiveDefinition } from '@sigx/runtime-core';
+declare global {
+    namespace JSX {
+        interface DirectiveAttributeExtensions {
+            /**
+             * Toggle element visibility via `display` CSS property.
+             *
+             * The element stays in the DOM — only its `display` is toggled.
+             * Preserves original display value (e.g., `flex`, `grid`).
+             *
+             * @example
+             * ```tsx
+             * // Shorthand — directive resolved automatically:
+             * <div use:show={isVisible}>Content</div>
+             *
+             * // Explicit tuple form:
+             * import { show } from 'sigx';
+             * <div use:show={[show, isVisible]}>Content</div>
+             * ```
+             */
+            'use:show'?: boolean | DirectiveDefinition<boolean, HTMLElement> | [DirectiveDefinition<boolean, HTMLElement>, boolean];
+        }
+    }
+}
+//# sourceMappingURL=show-jsx-types.d.ts.map

package/dist/directives/show-jsx-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-jsx-types.d.ts","sourceRoot":"","sources":["../../src/directives/show-jsx-types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,4BAA4B;YAClC;;;;;;;;;;;;;;;eAeG;YACH,UAAU,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;SAC3H;KACJ;CACJ"}

package/dist/directives/show.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Built-in `show` directive — toggles element visibility via `display` CSS property.
+ *
+ * Unlike conditional rendering (ternary in JSX), `use:show` keeps the element in the DOM
+ * and only toggles its `display` style. This is useful when toggling is frequent and you
+ * want to preserve element state (e.g., scroll position, input focus).
+ *
+ * @example
+ * ```tsx
+ * // Shorthand — directive resolved automatically:
+ * <div use:show={isVisible}>Content</div>
+ *
+ * // Explicit tuple form:
+ * import { show } from 'sigx';
+ * <div use:show={[show, isVisible]}>Content</div>
+ * ```
+ */
+export declare const show: import("@sigx/runtime-core").DirectiveDefinition<boolean, HTMLElement>;
+//# sourceMappingURL=show.d.ts.map

package/dist/directives/show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.d.ts","sourceRoot":"","sources":["../../src/directives/show.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAYH,eAAO,MAAM,IAAI,wEAwBf,CAAC"}

package/dist/index.d.ts

@@ -1,13 +1,69 @@
 import './jsx';
-import './types.js';
+import './types';
+import './directives/show-jsx-types';
 import { RendererOptions } from '@sigx/runtime-core';
+import { type DirectiveDefinition } from '@sigx/runtime-core';
+import type { AppContext } from '@sigx/runtime-core';
+/**
+ * A directive definition narrowed to DOM elements.
+ * Use this type when defining directives for the DOM renderer.
+ *
+ * @example
+ * ```ts
+ * import { defineDirective, type DOMDirective } from 'sigx';
+ *
+ * const tooltip = defineDirective<string, HTMLElement>({
+ *     mounted(el, { value }) {
+ *         el.title = value; // el is HTMLElement, fully typed
+ *     }
+ * });
+ * ```
+ */
+export type DOMDirective<T = any> = DirectiveDefinition<T, HTMLElement>;
+/**
+ * Register a built-in directive so it can be used with the shorthand syntax:
+ * `<div use:show={value}>` instead of `<div use:show={[show, value]}>`.
+ * @internal
+ */
+export declare function registerBuiltInDirective(name: string, def: DirectiveDefinition): void;
+/**
+ * Look up a registered built-in directive by name.
+ * Used by SSR renderer to resolve `use:<name>={value}` shorthand.
+ * @internal
+ */
+export declare function resolveBuiltInDirective(name: string): DirectiveDefinition | undefined;
+/**
+ * Process a `use:*` prop in patchProp.
+ * Handles directive created and updated lifecycle hooks.
+ * @internal
+ */
+declare function patchDirective(el: Element, name: string, prevValue: any, nextValue: any, appContext: AppContext | null): void;
+/**
+ * Called after an element is inserted into the DOM.
+ * Invokes `mounted` hooks for all directives on the element.
+ * @internal
+ */
+declare function onElementMounted(el: Element): void;
 declare function patchProp(dom: Element, key: string, prevValue: any, nextValue: any, isSVG?: boolean): void;
 declare const nodeOps: RendererOptions<Node, Element>;
-export declare const render: import("@sigx/runtime-core").RootRenderFunction<Node, Element>, createApp: (rootComponent: any) => {
-    mount: (selectorOrContainer: string | Element) => void;
-};
+/**
+ * Render a SignalX element to a DOM container.
+ * Supports both Element references and CSS selectors.
+ *
+ * @example
+ * ```tsx
+ * import { render } from 'sigx';
+ *
+ * // Using CSS selector
+ * render(<App />, "#app");
+ *
+ * // Using element reference
+ * render(<App />, document.getElementById('app')!);
+ * ```
+ */
+export declare const render: (element: any, container: Element | string, appContext?: any) => void;
 export declare const patch: import("@sigx/runtime-core").RendererPatchFn<Node, Element>, mount: import("@sigx/runtime-core").RendererMountFn<Node, Element>, unmount: import("@sigx/runtime-core").RendererUnmountFn<Node, Element>, mountComponent: import("@sigx/runtime-core").RendererMountComponentFn<Node, Element>;
-export { patchProp, nodeOps };
+export { patchProp, patchDirective, onElementMounted, nodeOps };
 /**
  * Mount function for DOM environments.
  * Use this with defineApp().mount() to render to the DOM.
@@ -23,4 +79,6 @@ export { patchProp, nodeOps };
  * ```
  */
 export declare const domMount: (component: any, container: HTMLElement | Element | ShadowRoot | string, appContext?: any) => (() => void);
+export { Portal, supportsMoveBefore, moveNode } from './Portal.js';
+export { show } from './directives/show.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,CAAC;AAEf,OAAO,YAAY,CAAC;AACpB,OAAO,EAAyE,eAAe,EAAyB,MAAM,oBAAoB,CAAC;AAoDnJ,iBAAS,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,QAmI5F;AAED,QAAA,MAAM,OAAO,EAAE,eAAe,CAAC,IAAI,EAAE,OAAO,CA4B3C,CAAC;AAKF,eAAO,MAAQ,MAAM,kEAAE,SAAS;;CAAa,CAAC;AAG9C,eAAO,MAAQ,KAAK,+DAAE,KAAK,+DAAE,OAAO,iEAAE,cAAc,sEAAa,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAE9B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,GAAG,EAAE,WAAW,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,EAAE,aAAa,GAAG,KAAG,CAAC,MAAM,IAAI,CAiB9H,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,CAAC;AAEf,OAAO,SAAS,CAAC;AAEjB,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAA0E,eAAe,EAAyB,MAAM,oBAAoB,CAAC;AACpJ,OAAO,EAAe,KAAK,mBAAmB,EAAyB,MAAM,oBAAoB,CAAC;AAClG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,GAAG,IAAI,mBAAmB,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAcxE;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,mBAAmB,GAAG,IAAI,CAErF;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAErF;AA+BD;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAoEtH;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAS3C;AA+ID,iBAAS,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,QAgL5F;AAED,QAAA,MAAM,OAAO,EAAE,eAAe,CAAC,IAAI,EAAE,OAAO,CAkC3C,CAAC;AAIF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,GAAI,SAAS,GAAG,EAAE,WAAW,OAAO,GAAG,MAAM,EAAE,aAAa,GAAG,KAAG,IAUpF,CAAC;AAGF,eAAO,MAAQ,KAAK,+DAAE,KAAK,+DAAE,OAAO,iEAAE,cAAc,sEAAa,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC;AAEhE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,GAAG,EAAE,WAAW,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,EAAE,aAAa,GAAG,KAAG,CAAC,MAAM,IAAI,CAiB9H,CAAC;AAMF,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,25 +1,184 @@
-import { createRenderer, setDefaultMount, setPlatformSyncProcessor } from "@sigx/runtime-core";
-
-//#region src/index.ts
-setPlatformSyncProcessor((type, props, [stateObj, key], originalProps) => {
+import { Fragment, component as component$1, createRenderer, defineDirective, isDirective, jsx, normalizeSubTree, setDefaultMount, setPlatformModelProcessor } from "@sigx/runtime-core";
+import { effect } from "@sigx/reactivity";
+function supportsMoveBefore() {
+	return typeof Node !== "undefined" && "moveBefore" in Node.prototype;
+}
+function moveNode(parent, node, anchor = null) {
+	if (supportsMoveBefore()) parent.moveBefore(node, anchor);
+	else parent.insertBefore(node, anchor);
+}
+function resolveTarget(target) {
+	if (target === void 0) return document.body;
+	if (typeof target === "string") {
+		const resolved = document.querySelector(target);
+		if (!resolved) {
+			console.warn(`Portal: Target "${target}" not found, falling back to document.body`);
+			return document.body;
+		}
+		return resolved;
+	}
+	return target;
+}
+const Portal = component$1(({ props, slots, onMounted, onUnmounted }) => {
+	let portalContainer = null;
+	let mountedVNode = null;
+	let cleanupEffect = null;
+	onMounted(() => {
+		if (props.disabled) return;
+		const targetContainer = resolveTarget(props.to);
+		portalContainer = document.createElement("div");
+		portalContainer.setAttribute("data-sigx-portal", "");
+		moveNode(targetContainer, portalContainer);
+		cleanupEffect = effect(() => {
+			const children = slots.default();
+			if (!portalContainer) return;
+			const vnode = normalizeSubTree(children);
+			if (mountedVNode) patch(mountedVNode, vnode, portalContainer);
+			else mount(vnode, portalContainer);
+			mountedVNode = vnode;
+		});
+	});
+	onUnmounted(() => {
+		if (cleanupEffect) {
+			cleanupEffect();
+			cleanupEffect = null;
+		}
+		if (mountedVNode && portalContainer) {
+			unmount(mountedVNode, portalContainer);
+			mountedVNode = null;
+		}
+		if (portalContainer && portalContainer.parentNode) portalContainer.parentNode.removeChild(portalContainer);
+		portalContainer = null;
+	});
+	return () => {
+		if (props.disabled) return jsx(Fragment, { children: slots.default() });
+		return null;
+	};
+}, { name: "Portal" });
+var ORIGINAL_DISPLAY = Symbol("sigx.show.originalDisplay");
+const show = defineDirective({
+	mounted(el, { value }) {
+		const showEl = el;
+		const saved = showEl.style.display === "none" ? "" : showEl.style.display;
+		showEl[ORIGINAL_DISPLAY] = saved;
+		showEl.style.display = value ? saved : "none";
+	},
+	updated(el, { value, oldValue }) {
+		if (value !== oldValue) {
+			const showEl = el;
+			showEl.style.display = value ? showEl[ORIGINAL_DISPLAY] ?? "" : "none";
+		}
+	},
+	unmounted(el) {
+		const showEl = el;
+		const original = showEl[ORIGINAL_DISPLAY];
+		if (original !== void 0) showEl.style.display = original;
+	}
+});
+var builtInDirectives = /* @__PURE__ */ new Map();
+function registerBuiltInDirective(name, def) {
+	builtInDirectives.set(name, def);
+}
+function resolveBuiltInDirective(name) {
+	return builtInDirectives.get(name);
+}
+var DIRECTIVE_STATE = Symbol.for("sigx.directives");
+function getDirectiveMap(el) {
+	let map = el[DIRECTIVE_STATE];
+	if (!map) {
+		map = /* @__PURE__ */ new Map();
+		el[DIRECTIVE_STATE] = map;
+	}
+	return map;
+}
+function patchDirective(el, name, prevValue, nextValue, appContext) {
+	const dirMap = getDirectiveMap(el);
+	if (nextValue == null) {
+		dirMap.delete(name);
+		return;
+	}
+	let def;
+	let value;
+	if (isDirective(nextValue)) {
+		def = nextValue;
+		value = void 0;
+	} else if (Array.isArray(nextValue) && nextValue.length >= 1 && isDirective(nextValue[0])) {
+		def = nextValue[0];
+		value = nextValue[1];
+	} else {
+		const builtIn = builtInDirectives.get(name);
+		if (builtIn) {
+			def = builtIn;
+			value = nextValue;
+		} else {
+			const custom = appContext?.directives.get(name);
+			if (custom) {
+				def = custom;
+				value = nextValue;
+			} else {
+				console.warn(`[sigx] Directive "use:${name}" could not be resolved. Make sure to register it via app.directive('${name}', definition) or pass a directive definition directly.`);
+				return;
+			}
+		}
+	}
+	const existing = dirMap.get(name);
+	if (!existing) {
+		const state = {
+			def,
+			value
+		};
+		dirMap.set(name, state);
+		if (def.created) def.created(el, { value });
+	} else {
+		const oldValue = existing.value;
+		existing.def = def;
+		existing.value = value;
+		if (def.updated && value !== oldValue) def.updated(el, {
+			value,
+			oldValue
+		});
+	}
+}
+function onElementMounted(el) {
+	const map = el[DIRECTIVE_STATE];
+	if (!map) return;
+	for (const [, state] of map) if (state.def.mounted) state.def.mounted(el, { value: state.value });
+}
+function onElementUnmounted(el) {
+	const map = el[DIRECTIVE_STATE];
+	if (!map) return;
+	for (const [, state] of map) {
+		if (state.def.unmounted) state.def.unmounted(el, { value: state.value });
+		if (state.cleanup) state.cleanup();
+	}
+	map.clear();
+	delete el[DIRECTIVE_STATE];
+}
+var svgNS = "http://www.w3.org/2000/svg";
+setPlatformModelProcessor((type, props, [stateObj, key], originalProps) => {
+	const setValue = (v) => {
+		const updateHandler = stateObj[`onUpdate:${key}`];
+		if (typeof updateHandler === "function") updateHandler(v);
+		else stateObj[key] = v;
+	};
 	if (type === "input" && originalProps.type === "checkbox") {
 		const val = stateObj[key];
 		if (Array.isArray(val)) {
 			props.checked = val.includes(originalProps.value);
-			const existingHandler = props["onUpdate:value"];
-			props["onUpdate:value"] = (checked) => {
+			const existingHandler = props["onUpdate:modelValue"];
+			props["onUpdate:modelValue"] = (checked) => {
 				const currentVal = originalProps.value;
 				const currentArr = stateObj[key];
 				if (checked) {
-					if (!currentArr.includes(currentVal)) stateObj[key] = [...currentArr, currentVal];
-				} else stateObj[key] = currentArr.filter((i) => i !== currentVal);
+					if (!currentArr.includes(currentVal)) setValue([...currentArr, currentVal]);
+				} else setValue(currentArr.filter((i) => i !== currentVal));
 				if (existingHandler) existingHandler(checked);
 			};
 		} else {
 			props.checked = val;
-			const existingHandler = props["onUpdate:value"];
-			props["onUpdate:value"] = (v) => {
-				stateObj[key] = v;
+			const existingHandler = props["onUpdate:modelValue"];
+			props["onUpdate:modelValue"] = (v) => {
+				setValue(v);
 				if (existingHandler) existingHandler(v);
 			};
 		}
@@ -27,17 +186,46 @@ setPlatformSyncProcessor((type, props, [stateObj, key], originalProps) => {
 	}
 	if (type === "input" && originalProps.type === "radio") {
 		props.checked = stateObj[key] === originalProps.value;
-		const existingHandler = props["onUpdate:value"];
-		props["onUpdate:value"] = (checked) => {
-			if (checked) stateObj[key] = originalProps.value;
+		const existingHandler = props["onUpdate:modelValue"];
+		props["onUpdate:modelValue"] = (checked) => {
+			if (checked) setValue(originalProps.value);
 			if (existingHandler) existingHandler(checked);
 		};
 		return true;
 	}
+	if (type === "input") {
+		props.value = stateObj[key] ?? "";
+		const existingHandler = props["onUpdate:modelValue"];
+		props["onUpdate:modelValue"] = (v) => {
+			setValue(v);
+			if (existingHandler) existingHandler(v);
+		};
+		return true;
+	}
+	if (type === "textarea") {
+		props.value = stateObj[key] ?? "";
+		const existingHandler = props["onUpdate:modelValue"];
+		props["onUpdate:modelValue"] = (v) => {
+			setValue(v);
+			if (existingHandler) existingHandler(v);
+		};
+		return true;
+	}
+	if (type === "select") {
+		props.value = stateObj[key] ?? "";
+		const existingHandler = props["onUpdate:modelValue"];
+		props["onUpdate:modelValue"] = (v) => {
+			setValue(v);
+			if (existingHandler) existingHandler(v);
+		};
+		return true;
+	}
 	return false;
 });
 function patchProp(dom, key, prevValue, nextValue, isSVG) {
+	if (!dom) return;
 	const tagName = dom.tagName.toLowerCase();
+	const isSvgElement = isSVG ?? dom instanceof SVGElement;
 	const oldValue = prevValue;
 	const newValue = nextValue;
 	if (key === "children" || key === "key" || key === "ref") return;
@@ -49,10 +237,10 @@ function patchProp(dom, key, prevValue, nextValue, isSVG) {
 			else el.style[styleKey] = styleObj[styleKey];
 		} else el.style.cssText = String(newValue);
 	} else if (key.startsWith("on")) {
-		if (key === "onUpdate:value" && (tagName === "input" || tagName === "textarea" || tagName === "select")) {
+		if (key === "onUpdate:modelValue" && (tagName === "input" || tagName === "textarea" || tagName === "select")) {
 			const el = dom;
 			if (oldValue) {
-				const wrapper = oldValue.__sigx_sync_handler;
+				const wrapper = oldValue.__sigx_model_handler;
 				if (wrapper) {
 					el.removeEventListener("input", wrapper);
 					el.removeEventListener("change", wrapper);
@@ -68,7 +256,7 @@ function patchProp(dom, key, prevValue, nextValue, isSVG) {
 					else val = target.value;
 					newValue(val);
 				};
-				newValue.__sigx_sync_handler = handler;
+				newValue.__sigx_model_handler = handler;
 				const inputType = dom.type;
 				if (tagName === "select" || tagName === "input" && (inputType === "checkbox" || inputType === "radio")) el.addEventListener("change", handler);
 				else el.addEventListener("input", handler);
@@ -99,11 +287,29 @@ function patchProp(dom, key, prevValue, nextValue, isSVG) {
 	else if (key.startsWith(".")) {
 		const propName = key.slice(1);
 		dom[propName] = newValue;
-	} else if ((tagName === "input" || tagName === "textarea" || tagName === "select") && (key === "value" || key === "checked")) {
-		if (tagName === "select" && key === "value") return;
+	} else if (key.startsWith("prop:")) {
+		const propName = key.slice(5);
+		dom[propName] = newValue;
+	} else if (isSvgElement) if (key === "innerHTML" || key === "textContent") dom[key] = newValue ?? "";
+	else if (key.startsWith("xlink:")) {
+		const xlinkNS = "http://www.w3.org/1999/xlink";
+		if (newValue == null) dom.removeAttributeNS(xlinkNS, key.slice(6));
+		else dom.setAttributeNS(xlinkNS, key, String(newValue));
+	} else if (newValue === true) dom.setAttribute(key, "");
+	else if (newValue === false || newValue == null) dom.removeAttribute(key);
+	else dom.setAttribute(key, String(newValue));
+	else if ((tagName === "input" || tagName === "textarea" || tagName === "select") && (key === "value" || key === "checked")) {
+		if (tagName === "select" && key === "value") {
+			queueMicrotask(() => {
+				dom.value = String(newValue ?? "");
+			});
+			return;
+		}
 		if (key === "checked" && tagName === "input") dom.checked = Boolean(newValue);
 		else if (key === "value") dom.value = String(newValue ?? "");
-	} else if (key in dom) try {
+	} else if (key in dom) if (newValue == null) {
+		if (dom.hasAttribute?.(key)) dom.removeAttribute(key);
+	} else try {
 		dom[key] = newValue;
 	} catch (e) {
 		dom.setAttribute(key, String(newValue));
@@ -113,7 +319,7 @@ function patchProp(dom, key, prevValue, nextValue, isSVG) {
 	else if (newValue === false || newValue == null) dom.removeAttribute(key);
 	else dom.setAttribute(key, String(newValue));
 }
-const nodeOps = {
+var nodeOps = {
 	insert: (child, parent, anchor) => {
 		parent.insertBefore(child, anchor || null);
 	},
@@ -122,6 +328,7 @@ const nodeOps = {
 		if (parent) parent.removeChild(child);
 	},
 	createElement: (tag, isSVG, isCustomizedBuiltIn) => {
+		if (isSVG) return document.createElementNS(svgNS, tag);
 		const is = isCustomizedBuiltIn ? { is: isCustomizedBuiltIn } : void 0;
 		return document.createElement(tag, is);
 	},
@@ -138,25 +345,18 @@ const nodeOps = {
 	querySelector: (selector) => document.querySelector(selector),
 	setScopeId: (el, id) => el.setAttribute(id, ""),
 	cloneNode: (node) => node.cloneNode(true),
-	patchProp
+	patchProp,
+	patchDirective,
+	onElementMounted,
+	onElementUnmounted
+};
+var renderer = createRenderer(nodeOps);
+const render = (element, container, appContext) => {
+	const target = typeof container === "string" ? document.querySelector(container) : container;
+	if (!target) throw new Error(`Render target "${container}" not found.`);
+	return renderer.render(element, target, appContext);
 };
-const renderer = createRenderer(nodeOps);
-const { render, createApp } = renderer;
 const { patch, mount, unmount, mountComponent } = renderer;
-/**
-* Mount function for DOM environments.
-* Use this with defineApp().mount() to render to the DOM.
-* 
-* @example
-* ```tsx
-* import { defineApp } from '@sigx/runtime-core';
-* import { domMount } from '@sigx/runtime-dom';
-* 
-* const app = defineApp(<App />);
-* app.use(routerPlugin)
-*    .mount(document.getElementById('app')!, domMount);
-* ```
-*/
 const domMount = (component, container, appContext) => {
 	const target = typeof container === "string" ? document.querySelector(container) : container;
 	if (!target) throw new Error(`Mount target "${container}" not found.`);
@@ -166,7 +366,7 @@ const domMount = (component, container, appContext) => {
 	};
 };
 setDefaultMount(domMount);
+registerBuiltInDirective("show", show);
+export { Portal, domMount, mount, mountComponent, moveNode, nodeOps, onElementMounted, patch, patchDirective, patchProp, registerBuiltInDirective, render, resolveBuiltInDirective, show, supportsMoveBefore, unmount };
 
-//#endregion
-export { createApp, domMount, mount, mountComponent, nodeOps, patch, patchProp, render, unmount };
 //# sourceMappingURL=index.js.map