@pyreon/vue-compat 0.13.1 → 0.15.0

package/README.md

@@ -163,3 +163,23 @@ app.mount('#app')
 
 - **`h` / `Fragment`** -- JSX runtime.
 - **`batch(fn)`** -- coalesce multiple signal writes.
+
+## Composing Pyreon framework components inside vue-compat
+
+Pyreon's framework components (`RouterView`, `PyreonUI`, `FormProvider`, `QueryClientProvider`, …) ship marked with `nativeCompat()` from `@pyreon/core` — vue-compat's JSX runtime detects the marker and routes them through Pyreon's setup frame instead of the compat wrapper. **You don't need to do anything** for the 24 components shipped marked.
+
+If you write your **own** Pyreon-flavored helper that uses `provide()` / `onMount()` / `onUnmount()` / `effect()` at component-body scope and use it in a vue-compat app, mark it explicitly:
+
+```tsx
+import { nativeCompat, provide, createContext } from '@pyreon/core'
+
+const MyCtx = createContext<string>('default')
+
+function MyProvider(props: { value: string; children?: unknown }) {
+  provide(MyCtx, props.value)
+  return props.children as never
+}
+nativeCompat(MyProvider) // ← required for compat-mode apps
+```
+
+Without the marker, the wrapper relocates the body's render context and `provide()` lands in a torn-down context stack — descendants read the default. See [`packages/core/core/src/compat-marker.ts`](../../core/core/src/compat-marker.ts) for details.

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"d4e3dc19-1","name":"jsx-runtime.ts"},{"uid":"d4e3dc19-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"d4e3dc19-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"d4e3dc19-0"},"d4e3dc19-3":{"renderedLength":12003,"gzipLength":2957,"brotliLength":0,"metaUid":"d4e3dc19-2"}},"nodeMetas":{"d4e3dc19-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"d4e3dc19-1"},"imported":[{"uid":"d4e3dc19-4"},{"uid":"d4e3dc19-5"}],"importedBy":[{"uid":"d4e3dc19-2"}]},"d4e3dc19-2":{"id":"/src/index.ts","moduleParts":{"index.js":"d4e3dc19-3"},"imported":[{"uid":"d4e3dc19-4"},{"uid":"d4e3dc19-5"},{"uid":"d4e3dc19-6"},{"uid":"d4e3dc19-0"}],"importedBy":[],"isEntry":true},"d4e3dc19-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"d4e3dc19-2"},{"uid":"d4e3dc19-0"}]},"d4e3dc19-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"d4e3dc19-2"},{"uid":"d4e3dc19-0"}]},"d4e3dc19-6":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"d4e3dc19-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"2431af31-1","name":"jsx-runtime.ts"},{"uid":"2431af31-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"2431af31-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"2431af31-0"},"2431af31-3":{"renderedLength":21829,"gzipLength":5180,"brotliLength":0,"metaUid":"2431af31-2"}},"nodeMetas":{"2431af31-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"2431af31-1"},"imported":[{"uid":"2431af31-4"},{"uid":"2431af31-5"}],"importedBy":[{"uid":"2431af31-2"}]},"2431af31-2":{"id":"/src/index.ts","moduleParts":{"index.js":"2431af31-3"},"imported":[{"uid":"2431af31-4"},{"uid":"2431af31-5"},{"uid":"2431af31-6"},{"uid":"2431af31-0"}],"importedBy":[],"isEntry":true},"2431af31-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-2"},{"uid":"2431af31-0"}]},"2431af31-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-2"},{"uid":"2431af31-0"}]},"2431af31-6":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/jsx-runtime.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"d37de618-1","name":"jsx-runtime.ts"},{"uid":"d37de618-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"d37de618-1":{"renderedLength":2340,"gzipLength":841,"brotliLength":0,"metaUid":"d37de618-0"},"d37de618-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"d37de618-2"}},"nodeMetas":{"d37de618-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"d37de618-1"},"imported":[{"uid":"d37de618-4"},{"uid":"d37de618-5"}],"importedBy":[{"uid":"d37de618-2"}]},"d37de618-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"d37de618-3"},"imported":[{"uid":"d37de618-0"}],"importedBy":[],"isEntry":true},"d37de618-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"d37de618-0"}]},"d37de618-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"d37de618-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"5769505c-1","name":"jsx-runtime.ts"},{"uid":"5769505c-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"5769505c-1":{"renderedLength":2715,"gzipLength":981,"brotliLength":0,"metaUid":"5769505c-0"},"5769505c-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"5769505c-2"}},"nodeMetas":{"5769505c-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"5769505c-1"},"imported":[{"uid":"5769505c-4"},{"uid":"5769505c-5"}],"importedBy":[{"uid":"5769505c-2"}]},"5769505c-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"5769505c-3"},"imported":[{"uid":"5769505c-0"}],"importedBy":[],"isEntry":true},"5769505c-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"5769505c-0"}]},"5769505c-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"5769505c-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { Fragment, createContext, h as pyreonH, onMount, onUnmount, onUpdate, popContext, pushContext, useContext } from "@pyreon/core";
+import { Fragment, Portal, createContext, h as pyreonH, onMount, onUnmount, onUpdate, popContext, pushContext, useContext } from "@pyreon/core";
 import { batch, computed as computed$1, createStore, effect, nextTick as nextTick$1, signal } from "@pyreon/reactivity";
 import { mount } from "@pyreon/runtime-dom";
 
@@ -14,8 +14,9 @@ function getHookIndex() {
 
 //#endregion
 //#region src/index.ts
-const V_IS_REF = Symbol("__v_isRef");
+const V_IS_REF = Symbol.for("__v_isRef");
 const V_IS_READONLY = Symbol("__v_isReadonly");
+const V_SKIP = Symbol("__v_skip");
 const V_RAW = Symbol("__v_raw");
 /**
 * Creates a reactive ref wrapping the given value.
@@ -40,6 +41,7 @@ function ref(value) {
 				s.set(v);
 				scheduleRerender();
 			},
+			/** @internal — access underlying signal for triggerRef */
 			_signal: s,
 			_scheduleRerender: scheduleRerender
 		};
@@ -55,6 +57,7 @@ function ref(value) {
 		set value(v) {
 			s.set(v);
 		},
+		/** @internal — access underlying signal for triggerRef */
 		_signal: s
 	};
 }
@@ -88,6 +91,15 @@ function isRef(val) {
 function unref(r) {
 	return isRef(r) ? r.value : r;
 }
+/**
+* Unwraps a ref, calls a getter, or returns the value as-is.
+* Vue 3.3+ API for normalizing ref/getter/value inputs.
+*/
+function toValue(source) {
+	if (isRef(source)) return source.value;
+	if (typeof source === "function") return source();
+	return source;
+}
 function computed(fnOrOptions) {
 	const ctx = getCurrentCtx();
 	if (ctx) {
@@ -134,6 +146,7 @@ const rawMap = /* @__PURE__ */ new WeakMap();
 * call `scheduleRerender()`.
 */
 function reactive(obj) {
+	if (obj[V_SKIP]) return obj;
 	const ctx = getCurrentCtx();
 	if (ctx) {
 		const idx = getHookIndex();
@@ -183,7 +196,22 @@ function readonly(obj) {
 	}
 	return _createReadonlyProxy(obj);
 }
-function _createReadonlyProxy(obj) {
+/**
+* Returns a shallow readonly proxy — only top-level properties throw on set.
+* Nested objects are NOT wrapped in readonly (unlike `readonly()`).
+*/
+function shallowReadonly(obj) {
+	const ctx = getCurrentCtx();
+	if (ctx) {
+		const idx = getHookIndex();
+		if (idx < ctx.hooks.length) return ctx.hooks[idx];
+		const proxy = _createShallowReadonlyProxy(obj);
+		ctx.hooks[idx] = proxy;
+		return proxy;
+	}
+	return _createShallowReadonlyProxy(obj);
+}
+function _createShallowReadonlyProxy(obj) {
 	return new Proxy(obj, {
 		get(target, key) {
 			if (key === V_IS_READONLY) return true;
@@ -199,6 +227,24 @@ function _createReadonlyProxy(obj) {
 		}
 	});
 }
+function _createReadonlyProxy(obj) {
+	return new Proxy(obj, {
+		get(target, key) {
+			if (key === V_IS_READONLY) return true;
+			if (key === V_RAW) return target;
+			const value = Reflect.get(target, key);
+			if (value !== null && typeof value === "object" && !isRef(value)) return _createReadonlyProxy(value);
+			return value;
+		},
+		set(_target, key) {
+			if (key === V_IS_READONLY || key === V_RAW) return true;
+			throw new Error(`Cannot set property "${String(key)}" on a readonly object`);
+		},
+		deleteProperty(_target, key) {
+			throw new Error(`Cannot delete property "${String(key)}" from a readonly object`);
+		}
+	});
+}
 /**
 * Returns the raw (unwrapped) object behind a reactive or readonly proxy.
 */
@@ -255,12 +301,102 @@ function toRefs(obj) {
 	for (const key of Object.keys(obj)) result[key] = _createToRef(obj, key);
 	return result;
 }
-/**
-* Watches a reactive source and calls `cb` when it changes.
-*
-* Inside a component: hook-indexed, created once. Disposed on unmount.
-*/
 function watch(source, cb, options) {
+	if (Array.isArray(source)) return _watchArray(source, cb, options);
+	return _watchSingle(source, cb, options);
+}
+function _watchArray(sources, cb, options) {
+	const getters = sources.map((s) => isRef(s) ? () => s.value : s);
+	let cleanupFn;
+	const onCleanup = (fn) => {
+		cleanupFn = fn;
+	};
+	const runCleanup = () => {
+		if (cleanupFn) {
+			cleanupFn();
+			cleanupFn = void 0;
+		}
+	};
+	const ctx = getCurrentCtx();
+	if (ctx) {
+		const idx = getHookIndex();
+		if (idx < ctx.hooks.length) return ctx.hooks[idx];
+		let oldValues;
+		let initialized = false;
+		if (options?.immediate) {
+			const current = getters.map((g) => g());
+			cb(current, getters.map(() => void 0), onCleanup);
+			oldValues = current;
+			initialized = true;
+		}
+		let running = false;
+		const combined = computed$1(() => getters.map((g) => g()));
+		const e = effect(() => {
+			if (running) return;
+			running = true;
+			try {
+				const newValues = combined();
+				if (initialized) {
+					runCleanup();
+					cb([...newValues], oldValues ? [...oldValues] : getters.map(() => void 0), onCleanup);
+				}
+				oldValues = [...newValues];
+				initialized = true;
+			} finally {
+				running = false;
+			}
+		});
+		const stop = () => {
+			runCleanup();
+			e.dispose();
+		};
+		ctx.hooks[idx] = stop;
+		ctx.unmountCallbacks.push(stop);
+		return stop;
+	}
+	let oldValues;
+	let initialized = false;
+	if (options?.immediate) {
+		const current = getters.map((g) => g());
+		cb(current, getters.map(() => void 0), onCleanup);
+		oldValues = current;
+		initialized = true;
+	}
+	let running = false;
+	const combined = computed$1(() => getters.map((g) => g()));
+	const e = effect(() => {
+		if (running) return;
+		running = true;
+		try {
+			const newValues = combined();
+			if (initialized) {
+				runCleanup();
+				cb([...newValues], oldValues ? [...oldValues] : getters.map(() => void 0), onCleanup);
+			}
+			oldValues = [...newValues];
+			initialized = true;
+		} finally {
+			running = false;
+		}
+	});
+	const stop = () => {
+		runCleanup();
+		e.dispose();
+	};
+	if (_currentEffectScope) _currentEffectScope._cleanups.push(stop);
+	return stop;
+}
+function _watchSingle(source, cb, options) {
+	let cleanupFn;
+	const onCleanup = (fn) => {
+		cleanupFn = fn;
+	};
+	const runCleanup = () => {
+		if (cleanupFn) {
+			cleanupFn();
+			cleanupFn = void 0;
+		}
+	};
 	const ctx = getCurrentCtx();
 	if (ctx) {
 		const idx = getHookIndex();
@@ -271,7 +407,7 @@ function watch(source, cb, options) {
 		if (options?.immediate) {
 			oldValue = void 0;
 			const current = getter();
-			cb(current, oldValue);
+			cb(current, oldValue, onCleanup);
 			oldValue = current;
 			initialized = true;
 		}
@@ -281,14 +417,20 @@ function watch(source, cb, options) {
 			running = true;
 			try {
 				const newValue = getter();
-				if (initialized) cb(newValue, oldValue);
+				if (initialized) {
+					runCleanup();
+					cb(newValue, oldValue, onCleanup);
+				}
 				oldValue = newValue;
 				initialized = true;
 			} finally {
 				running = false;
 			}
 		});
-		const stop = () => e.dispose();
+		const stop = () => {
+			runCleanup();
+			e.dispose();
+		};
 		ctx.hooks[idx] = stop;
 		ctx.unmountCallbacks.push(stop);
 		return stop;
@@ -299,7 +441,7 @@ function watch(source, cb, options) {
 	if (options?.immediate) {
 		oldValue = void 0;
 		const current = getter();
-		cb(current, oldValue);
+		cb(current, oldValue, onCleanup);
 		oldValue = current;
 		initialized = true;
 	}
@@ -309,23 +451,43 @@ function watch(source, cb, options) {
 		running = true;
 		try {
 			const newValue = getter();
-			if (initialized) cb(newValue, oldValue);
+			if (initialized) {
+				runCleanup();
+				cb(newValue, oldValue, onCleanup);
+			}
 			oldValue = newValue;
 			initialized = true;
 		} finally {
 			running = false;
 		}
 	});
-	return () => e.dispose();
+	const stop = () => {
+		runCleanup();
+		e.dispose();
+	};
+	if (_currentEffectScope) _currentEffectScope._cleanups.push(stop);
+	return stop;
 }
 /**
 * Runs the given function reactively — re-executes whenever its tracked
-* dependencies change.
+* dependencies change. Passes an `onCleanup` registration function to the
+* callback, matching Vue 3's `watchEffect((onCleanup) => { ... })` API.
 *
 * Inside a component: hook-indexed, created once. Disposed on unmount.
 */
 function watchEffect(fn) {
 	const ctx = getCurrentCtx();
+	let cleanupFn;
+	const onCleanup = (cleanup) => {
+		cleanupFn = cleanup;
+	};
+	const runEffect = () => {
+		if (cleanupFn) {
+			cleanupFn();
+			cleanupFn = void 0;
+		}
+		fn(onCleanup);
+	};
 	if (ctx) {
 		const idx = getHookIndex();
 		if (idx < ctx.hooks.length) return ctx.hooks[idx];
@@ -334,12 +496,15 @@ function watchEffect(fn) {
 			if (running) return;
 			running = true;
 			try {
-				fn();
+				runEffect();
 			} finally {
 				running = false;
 			}
 		});
-		const stop = () => e.dispose();
+		const stop = () => {
+			if (cleanupFn) cleanupFn();
+			e.dispose();
+		};
 		ctx.hooks[idx] = stop;
 		ctx.unmountCallbacks.push(stop);
 		return stop;
@@ -349,12 +514,17 @@ function watchEffect(fn) {
 		if (running) return;
 		running = true;
 		try {
-			fn();
+			runEffect();
 		} finally {
 			running = false;
 		}
 	});
-	return () => e.dispose();
+	const stop = () => {
+		if (cleanupFn) cleanupFn();
+		e.dispose();
+	};
+	if (_currentEffectScope) _currentEffectScope._cleanups.push(stop);
+	return stop;
 }
 /**
 * Registers a callback to run after the component is mounted.
@@ -463,10 +633,14 @@ function provide(key, value) {
 }
 /**
 * Injects a value provided by an ancestor component.
+* Supports Vue 3's factory default pattern: `inject(key, () => expensiveDefault, true)`.
 */
-function inject(key, defaultValue) {
+function inject(key, defaultValue, treatDefaultAsFactory) {
 	const value = useContext(getOrCreateContext(key));
-	return value !== void 0 ? value : defaultValue;
+	if (value !== void 0) return value;
+	if (defaultValue === void 0) return void 0;
+	if (treatDefaultAsFactory && typeof defaultValue === "function") return defaultValue();
+	return defaultValue;
 }
 /**
 * Defines a component using Vue 3 Composition API style.
@@ -475,7 +649,16 @@ function inject(key, defaultValue) {
 function defineComponent(options) {
 	if (typeof options === "function") return options;
 	const comp = (props) => {
-		const result = options.setup(props);
+		const children = props.children;
+		const setupCtx = {
+			emit: (event, ...args) => {
+				const handler = props[`on${event.charAt(0).toUpperCase()}${event.slice(1)}`];
+				if (typeof handler === "function") handler(...args);
+			},
+			slots: { default: children !== void 0 ? (() => children) : void 0 },
+			attrs: props
+		};
+		const result = options.setup(props, setupCtx);
 		if (typeof result === "function") return result();
 		return result;
 	};
@@ -483,16 +666,215 @@ function defineComponent(options) {
 	return comp;
 }
 /**
+* Defines an async component that lazily loads on first use.
+* Supports both a bare loader function and an options object with
+* loadingComponent, errorComponent, delay, and timeout.
+*
+* Returns a ComponentFn with a `__loading` property for Suspense integration.
+*/
+function defineAsyncComponent(loader) {
+	const load = typeof loader === "function" ? loader : loader.loader;
+	const loaded = signal(null);
+	const error = signal(null);
+	let promise = null;
+	const startLoad = () => {
+		if (promise) return;
+		promise = load().then((mod) => loaded.set(mod.default), (err) => error.set(err instanceof Error ? err : new Error(String(err))));
+	};
+	const AsyncComp = ((props) => {
+		startLoad();
+		const err = error();
+		if (err) throw err;
+		const comp = loaded();
+		if (!comp) return null;
+		return comp(props);
+	});
+	AsyncComp.__loading = () => {
+		const isLoading = loaded() === null && error() === null;
+		if (isLoading) startLoad();
+		return isLoading;
+	};
+	return AsyncComp;
+}
+/**
 * Creates a Pyreon application instance — Vue 3 `createApp()` compatible.
 */
 function createApp(component, props) {
-	return { mount(el) {
-		const container = typeof el === "string" ? document.querySelector(el) : el;
-		if (!container) throw new Error(`Cannot find mount target: ${el}`);
-		return mount(pyreonH(component, props ?? null), container);
-	} };
+	const provisions = [];
+	const app = {
+		mount(el) {
+			const container = typeof el === "string" ? document.querySelector(el) : el;
+			if (!container) throw new Error(`Cannot find mount target: ${el}`);
+			for (const { key, value } of provisions) {
+				const ctx = getOrCreateContext(key);
+				pushContext(new Map([[ctx.id, value]]));
+			}
+			return mount(pyreonH(component, props ?? null), container);
+		},
+		use(plugin) {
+			plugin.install(app);
+			return app;
+		},
+		provide(key, value) {
+			provisions.push({
+				key,
+				value
+			});
+			return app;
+		}
+	};
+	return app;
 }
+/**
+* Returns `true` if the value was created by `reactive()`.
+*/
+function isReactive(value) {
+	return value !== null && typeof value === "object" && rawMap.has(value);
+}
+/**
+* Returns `true` if the value was created by `readonly()`.
+*/
+function isReadonly(value) {
+	return value !== null && typeof value === "object" && value[V_IS_READONLY] === true;
+}
+/**
+* Returns `true` if the value is either reactive or readonly.
+*/
+function isProxy(value) {
+	return isReactive(value) || isReadonly(value);
+}
+/**
+* Marks an object so that `reactive()` will return it as-is (not wrapped).
+*/
+function markRaw(obj) {
+	obj[V_SKIP] = true;
+	return obj;
+}
+let _currentEffectScope = null;
+/**
+* Creates an effect scope that collects reactive effects for grouped disposal.
+*
+* @param detached - If true, the scope is not collected by a parent scope.
+*/
+function effectScope(detached) {
+	const cleanups = [];
+	let active = true;
+	const scope = {
+		get active() {
+			return active;
+		},
+		run(fn) {
+			if (!active) return void 0;
+			const prev = _currentEffectScope;
+			_currentEffectScope = scope;
+			try {
+				return fn();
+			} finally {
+				_currentEffectScope = prev;
+			}
+		},
+		stop() {
+			if (!active) return;
+			active = false;
+			for (const fn of cleanups) fn();
+			cleanups.length = 0;
+		}
+	};
+	if (!detached && _currentEffectScope) {
+		const parentCleanups = _currentEffectScope._cleanups;
+		if (parentCleanups) parentCleanups.push(() => scope.stop());
+	}
+	scope._cleanups = cleanups;
+	return scope;
+}
+/**
+* Returns the current active effect scope, or undefined if none.
+*/
+function getCurrentScope() {
+	return _currentEffectScope ?? void 0;
+}
+/**
+* Registers a cleanup function on the current effect scope.
+*/
+function onScopeDispose(fn) {
+	if (_currentEffectScope) _currentEffectScope._cleanups.push(fn);
+}
+/**
+* Registers an error capture handler.
+* No direct equivalent in Pyreon — stored but not actively used.
+*/
+function onErrorCaptured(fn) {
+	const ctx = getCurrentCtx();
+	if (ctx) {
+		const idx = getHookIndex();
+		if (idx < ctx.hooks.length) return;
+		ctx.hooks[idx] = fn;
+	}
+}
+/**
+* Dev-only lifecycle hook — no-op in Pyreon.
+*/
+function onRenderTracked(_fn) {}
+/**
+* Dev-only lifecycle hook — no-op in Pyreon.
+*/
+function onRenderTriggered(_fn) {}
+/**
+* Teleport — renders children into a different DOM element.
+* Maps to Pyreon's Portal.
+*/
+function Teleport(props) {
+	const target = typeof props.to === "string" ? document.querySelector(props.to) : props.to;
+	if (!target) return props.children ?? null;
+	return Portal({
+		target,
+		children: props.children ?? null
+	});
+}
+/**
+* KeepAlive — not supported in Pyreon. Renders children as-is.
+*/
+function KeepAlive(props) {
+	return props.children ?? null;
+}
+/**
+* Runs a watchEffect that flushes after DOM updates.
+* In Pyreon, same as `watchEffect()`.
+*/
+function watchPostEffect(fn) {
+	return watchEffect(fn);
+}
+/**
+* Runs a watchEffect that flushes synchronously.
+* In Pyreon, same as `watchEffect()`.
+*/
+function watchSyncEffect(fn) {
+	return watchEffect(fn);
+}
+/**
+* Creates a customized ref with explicit control over dependency tracking
+* and update triggering.
+*/
+function customRef(factory) {
+	const s = signal(0);
+	const { get, set } = factory(() => {
+		s();
+	}, () => s.set(s.peek() + 1));
+	return {
+		[V_IS_REF]: true,
+		get value() {
+			return get();
+		},
+		set value(v) {
+			set(v);
+		}
+	};
+}
+/**
+* Compatibility version string — indicates Vue 3 API compatibility.
+*/
+const version = "3.5.0-pyreon";
 
 //#endregion
-export { Fragment, batch, computed, createApp, defineComponent, pyreonH as h, inject, isRef, nextTick, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, onUpdated, provide, reactive, readonly, ref, shallowReactive, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect };
+export { Fragment, KeepAlive, Teleport, batch, computed, createApp, customRef, defineAsyncComponent, defineComponent, effectScope, getCurrentScope, pyreonH as h, inject, isProxy, isReactive, isReadonly, isRef, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onUnmounted, onUpdated, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, toValue, triggerRef, unref, version, watch, watchEffect, watchPostEffect, watchSyncEffect };
 //# sourceMappingURL=index.js.map

package/lib/jsx-runtime.js

@@ -1,4 +1,4 @@
-import { Fragment, h, onUnmount } from "@pyreon/core";
+import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
 import { runUntracked, signal } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
@@ -80,10 +80,23 @@ function jsx(type, props, key) {
 		...rest,
 		key
 	} : rest;
-	if (typeof type === "function") return h(wrapCompatComponent(type), children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
+	if (typeof type === "function") {
+		const componentProps = children !== void 0 ? {
+			...propsWithKey,
+			children
+		} : propsWithKey;
+		if (isNativeCompat(type)) return h(type, componentProps);
+		return h(wrapCompatComponent(type), componentProps);
+	}
+	if (typeof type === "string" && propsWithKey.ref != null) {
+		const r = propsWithKey.ref;
+		if (typeof r === "object" && r !== null && r[Symbol.for("__v_isRef")] === true) {
+			const vueRef = r;
+			propsWithKey.ref = (el) => {
+				vueRef.value = el;
+			};
+		}
+	}
 	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
 }
 const jsxs = jsx;