@pyreon/runtime-dom 0.12.13 → 0.12.15

package/README.md

@@ -115,6 +115,19 @@ const App = () => (
 
 `TransitionProps`, `TransitionGroupProps`, `KeepAliveProps`, `SanitizeFn`, `DevtoolsComponentEntry`, `PyreonDevtools`
 
+## Dev-mode warnings — bundler tree-shake
+
+Dev warnings are gated on `import.meta.env?.DEV`. Tree-shake behavior depends on both the source pattern and the consumer bundler:
+
+| Source pattern | Vite prod | Raw esbuild prod | Test |
+| --- | --- | --- | --- |
+| `if (!import.meta.env?.DEV) return` (inline early-return) | tree-shaken | tree-shaken | `flow/src/tests/integration.test.ts` (esbuild) |
+| `const __DEV__ = ...; if (__DEV__) ...` | tree-shaken | mostly tree-shaken | `runtime-dom/src/tests/dev-gate-treeshake.test.ts` (Vite) |
+| `const __DEV__ = ...; __DEV__ && cond && warn(...)` (chained &&) | tree-shaken | runtime-gated only | `runtime-dom/.../dev-gate-treeshake.test.ts` (Vite + non-Vite runtime smoke) |
+| `typeof process !== 'undefined'` | dead in browser | dead in browser | `pyreon/no-process-dev-gate` lint rule |
+
+Vite is Pyreon's primary supported bundler. Non-Vite consumers (webpack, bunchee, raw esbuild) using the chained `&&` form may retain warning strings as data, but the runtime gate evaluates to `false` when `import.meta.env.DEV` is undefined — warnings don't fire. Only a small bundle-size cost.
+
 ## License
 
 MIT

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":"7c7cfc97-1","name":"delegate.ts"},{"uid":"7c7cfc97-3","name":"hydration-debug.ts"},{"uid":"7c7cfc97-5","name":"devtools.ts"},{"uid":"7c7cfc97-7","name":"nodes.ts"},{"uid":"7c7cfc97-9","name":"props.ts"},{"uid":"7c7cfc97-11","name":"mount.ts"},{"uid":"7c7cfc97-13","name":"hydrate.ts"},{"uid":"7c7cfc97-15","name":"keep-alive.ts"},{"uid":"7c7cfc97-17","name":"template.ts"},{"uid":"7c7cfc97-19","name":"transition.ts"},{"uid":"7c7cfc97-21","name":"transition-group.ts"},{"uid":"7c7cfc97-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7c7cfc97-1":{"renderedLength":1990,"gzipLength":976,"brotliLength":0,"metaUid":"7c7cfc97-0"},"7c7cfc97-3":{"renderedLength":662,"gzipLength":370,"brotliLength":0,"metaUid":"7c7cfc97-2"},"7c7cfc97-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"7c7cfc97-4"},"7c7cfc97-7":{"renderedLength":16207,"gzipLength":4334,"brotliLength":0,"metaUid":"7c7cfc97-6"},"7c7cfc97-9":{"renderedLength":6209,"gzipLength":2371,"brotliLength":0,"metaUid":"7c7cfc97-8"},"7c7cfc97-11":{"renderedLength":11597,"gzipLength":3709,"brotliLength":0,"metaUid":"7c7cfc97-10"},"7c7cfc97-13":{"renderedLength":7694,"gzipLength":2333,"brotliLength":0,"metaUid":"7c7cfc97-12"},"7c7cfc97-15":{"renderedLength":1473,"gzipLength":701,"brotliLength":0,"metaUid":"7c7cfc97-14"},"7c7cfc97-17":{"renderedLength":5319,"gzipLength":2069,"brotliLength":0,"metaUid":"7c7cfc97-16"},"7c7cfc97-19":{"renderedLength":4017,"gzipLength":1311,"brotliLength":0,"metaUid":"7c7cfc97-18"},"7c7cfc97-21":{"renderedLength":6362,"gzipLength":1937,"brotliLength":0,"metaUid":"7c7cfc97-20"},"7c7cfc97-23":{"renderedLength":769,"gzipLength":474,"brotliLength":0,"metaUid":"7c7cfc97-22"}},"nodeMetas":{"7c7cfc97-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"7c7cfc97-1"},"imported":[{"uid":"7c7cfc97-24"}],"importedBy":[{"uid":"7c7cfc97-22"},{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-8"}]},"7c7cfc97-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"7c7cfc97-3"},"imported":[],"importedBy":[{"uid":"7c7cfc97-22"},{"uid":"7c7cfc97-12"}]},"7c7cfc97-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"7c7cfc97-5"},"imported":[],"importedBy":[{"uid":"7c7cfc97-22"},{"uid":"7c7cfc97-10"}]},"7c7cfc97-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"7c7cfc97-7"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"}],"importedBy":[{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-10"}]},"7c7cfc97-8":{"id":"/src/props.ts","moduleParts":{"index.js":"7c7cfc97-9"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-0"}],"importedBy":[{"uid":"7c7cfc97-22"},{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-10"}]},"7c7cfc97-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"7c7cfc97-11"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-4"},{"uid":"7c7cfc97-6"},{"uid":"7c7cfc97-8"}],"importedBy":[{"uid":"7c7cfc97-22"},{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-14"},{"uid":"7c7cfc97-16"},{"uid":"7c7cfc97-20"}]},"7c7cfc97-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"7c7cfc97-13"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-0"},{"uid":"7c7cfc97-2"},{"uid":"7c7cfc97-10"},{"uid":"7c7cfc97-6"},{"uid":"7c7cfc97-8"}],"importedBy":[{"uid":"7c7cfc97-22"}]},"7c7cfc97-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"7c7cfc97-15"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-10"}],"importedBy":[{"uid":"7c7cfc97-22"}]},"7c7cfc97-16":{"id":"/src/template.ts","moduleParts":{"index.js":"7c7cfc97-17"},"imported":[{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-10"}],"importedBy":[{"uid":"7c7cfc97-22"}]},"7c7cfc97-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"7c7cfc97-19"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"}],"importedBy":[{"uid":"7c7cfc97-22"}]},"7c7cfc97-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"7c7cfc97-21"},"imported":[{"uid":"7c7cfc97-25"},{"uid":"7c7cfc97-24"},{"uid":"7c7cfc97-10"}],"importedBy":[{"uid":"7c7cfc97-22"}]},"7c7cfc97-22":{"id":"/src/index.ts","moduleParts":{"index.js":"7c7cfc97-23"},"imported":[{"uid":"7c7cfc97-0"},{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-2"},{"uid":"7c7cfc97-14"},{"uid":"7c7cfc97-10"},{"uid":"7c7cfc97-8"},{"uid":"7c7cfc97-16"},{"uid":"7c7cfc97-18"},{"uid":"7c7cfc97-20"},{"uid":"7c7cfc97-4"}],"importedBy":[],"isEntry":true},"7c7cfc97-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"7c7cfc97-0"},{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-14"},{"uid":"7c7cfc97-10"},{"uid":"7c7cfc97-8"},{"uid":"7c7cfc97-16"},{"uid":"7c7cfc97-18"},{"uid":"7c7cfc97-20"},{"uid":"7c7cfc97-6"}]},"7c7cfc97-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7c7cfc97-12"},{"uid":"7c7cfc97-14"},{"uid":"7c7cfc97-10"},{"uid":"7c7cfc97-8"},{"uid":"7c7cfc97-18"},{"uid":"7c7cfc97-20"},{"uid":"7c7cfc97-6"}]}},"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":"391d1e60-1","name":"delegate.ts"},{"uid":"391d1e60-3","name":"hydration-debug.ts"},{"uid":"391d1e60-5","name":"devtools.ts"},{"uid":"391d1e60-7","name":"nodes.ts"},{"uid":"391d1e60-9","name":"props.ts"},{"uid":"391d1e60-11","name":"mount.ts"},{"uid":"391d1e60-13","name":"hydrate.ts"},{"uid":"391d1e60-15","name":"keep-alive.ts"},{"uid":"391d1e60-17","name":"template.ts"},{"uid":"391d1e60-19","name":"transition.ts"},{"uid":"391d1e60-21","name":"transition-group.ts"},{"uid":"391d1e60-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"391d1e60-1":{"renderedLength":1990,"gzipLength":976,"brotliLength":0,"metaUid":"391d1e60-0"},"391d1e60-3":{"renderedLength":662,"gzipLength":370,"brotliLength":0,"metaUid":"391d1e60-2"},"391d1e60-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"391d1e60-4"},"391d1e60-7":{"renderedLength":16207,"gzipLength":4334,"brotliLength":0,"metaUid":"391d1e60-6"},"391d1e60-9":{"renderedLength":7947,"gzipLength":3020,"brotliLength":0,"metaUid":"391d1e60-8"},"391d1e60-11":{"renderedLength":11649,"gzipLength":3717,"brotliLength":0,"metaUid":"391d1e60-10"},"391d1e60-13":{"renderedLength":8239,"gzipLength":2455,"brotliLength":0,"metaUid":"391d1e60-12"},"391d1e60-15":{"renderedLength":1473,"gzipLength":701,"brotliLength":0,"metaUid":"391d1e60-14"},"391d1e60-17":{"renderedLength":5319,"gzipLength":2069,"brotliLength":0,"metaUid":"391d1e60-16"},"391d1e60-19":{"renderedLength":4895,"gzipLength":1390,"brotliLength":0,"metaUid":"391d1e60-18"},"391d1e60-21":{"renderedLength":7942,"gzipLength":2070,"brotliLength":0,"metaUid":"391d1e60-20"},"391d1e60-23":{"renderedLength":769,"gzipLength":474,"brotliLength":0,"metaUid":"391d1e60-22"}},"nodeMetas":{"391d1e60-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"391d1e60-1"},"imported":[{"uid":"391d1e60-24"}],"importedBy":[{"uid":"391d1e60-22"},{"uid":"391d1e60-12"},{"uid":"391d1e60-8"}]},"391d1e60-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"391d1e60-3"},"imported":[],"importedBy":[{"uid":"391d1e60-22"},{"uid":"391d1e60-12"}]},"391d1e60-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"391d1e60-5"},"imported":[],"importedBy":[{"uid":"391d1e60-22"},{"uid":"391d1e60-10"}]},"391d1e60-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"391d1e60-7"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"}],"importedBy":[{"uid":"391d1e60-12"},{"uid":"391d1e60-10"}]},"391d1e60-8":{"id":"/src/props.ts","moduleParts":{"index.js":"391d1e60-9"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"},{"uid":"391d1e60-0"}],"importedBy":[{"uid":"391d1e60-22"},{"uid":"391d1e60-12"},{"uid":"391d1e60-10"}]},"391d1e60-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"391d1e60-11"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"},{"uid":"391d1e60-4"},{"uid":"391d1e60-6"},{"uid":"391d1e60-8"}],"importedBy":[{"uid":"391d1e60-22"},{"uid":"391d1e60-12"},{"uid":"391d1e60-14"},{"uid":"391d1e60-16"},{"uid":"391d1e60-20"}]},"391d1e60-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"391d1e60-13"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"},{"uid":"391d1e60-0"},{"uid":"391d1e60-2"},{"uid":"391d1e60-10"},{"uid":"391d1e60-6"},{"uid":"391d1e60-8"}],"importedBy":[{"uid":"391d1e60-22"}]},"391d1e60-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"391d1e60-15"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"},{"uid":"391d1e60-10"}],"importedBy":[{"uid":"391d1e60-22"}]},"391d1e60-16":{"id":"/src/template.ts","moduleParts":{"index.js":"391d1e60-17"},"imported":[{"uid":"391d1e60-24"},{"uid":"391d1e60-10"}],"importedBy":[{"uid":"391d1e60-22"}]},"391d1e60-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"391d1e60-19"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"}],"importedBy":[{"uid":"391d1e60-22"}]},"391d1e60-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"391d1e60-21"},"imported":[{"uid":"391d1e60-25"},{"uid":"391d1e60-24"},{"uid":"391d1e60-10"}],"importedBy":[{"uid":"391d1e60-22"}]},"391d1e60-22":{"id":"/src/index.ts","moduleParts":{"index.js":"391d1e60-23"},"imported":[{"uid":"391d1e60-0"},{"uid":"391d1e60-12"},{"uid":"391d1e60-2"},{"uid":"391d1e60-14"},{"uid":"391d1e60-10"},{"uid":"391d1e60-8"},{"uid":"391d1e60-16"},{"uid":"391d1e60-18"},{"uid":"391d1e60-20"},{"uid":"391d1e60-4"}],"importedBy":[],"isEntry":true},"391d1e60-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"391d1e60-0"},{"uid":"391d1e60-12"},{"uid":"391d1e60-14"},{"uid":"391d1e60-10"},{"uid":"391d1e60-8"},{"uid":"391d1e60-16"},{"uid":"391d1e60-18"},{"uid":"391d1e60-20"},{"uid":"391d1e60-6"}]},"391d1e60-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"391d1e60-12"},{"uid":"391d1e60-14"},{"uid":"391d1e60-10"},{"uid":"391d1e60-8"},{"uid":"391d1e60-18"},{"uid":"391d1e60-20"},{"uid":"391d1e60-6"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -981,7 +981,7 @@ function applyEventProp(el, key, value) {
 		if (__DEV__$3 && value != null) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
 		return null;
 	}
-	const eventName = key[2]?.toLowerCase() + key.slice(3);
+	const eventName = (key[2]?.toLowerCase() + key.slice(3)).toLowerCase();
 	const handler = value;
 	if (DELEGATED_EVENTS.has(eventName)) {
 		const prop = delegatedPropName(eventName);
@@ -994,19 +994,38 @@ function applyEventProp(el, key, value) {
 	el.addEventListener(eventName, batched);
 	return () => el.removeEventListener(eventName, batched);
 }
-function applyProp(el, key, value) {
-	if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
+/**
+* Sink for a single prop's CALLED value (always a primitive / object /
+* `null` — never a function). Called both directly for static values and
+* from the reactive `renderEffect` for accessor-bound values.
+*
+* NOTE on architecture: extracting the special-cased sinks
+* (`innerHTML` / `dangerouslySetInnerHTML`) into this single dispatch
+* function ensures every prop kind goes through the same reactive
+* wrapping at `applyProp`'s entry. Previously each special case had its
+* own early-return branch that needed to remember to handle function
+* values; missing the dance once meant the closure was stringified and
+* set as literal text. The structural fix (one reactive-wrap, then
+* dispatch) eliminates the entire bug class.
+*/
+function applyStaticProp(el, key, value) {
+	if (__DEV__$3 && typeof value === "function") console.warn(`[Pyreon] applyStaticProp received a function for "${key}". This likely means a new special-cased prop sink in applyProp() bypassed the reactive-wrap path. The closure would be stringified and set as a literal value. Verify the dispatch in applyProp().`);
 	if (key === "innerHTML") {
-		if (typeof el.setHTML === "function") el.setHTML(value);
-		else el.innerHTML = sanitizeHtml(value);
-		return null;
+		const html = String(value ?? "");
+		if (typeof el.setHTML === "function") el.setHTML(html);
+		else el.innerHTML = sanitizeHtml(html);
+		return;
 	}
 	if (key === "dangerouslySetInnerHTML") {
-		el.innerHTML = value.__html;
-		return null;
+		el.innerHTML = value?.__html ?? "";
+		return;
 	}
-	if (typeof value === "function") return renderEffect(() => setStaticProp(el, key, value()));
 	setStaticProp(el, key, value);
+}
+function applyProp(el, key, value) {
+	if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
+	if (typeof value === "function") return renderEffect(() => applyStaticProp(el, key, value()));
+	applyStaticProp(el, key, value);
 	return null;
 }
 const URL_ATTRS = new Set([
@@ -1019,15 +1038,36 @@ const URL_ATTRS = new Set([
 	"data"
 ]);
 const UNSAFE_URL_RE = /^\s*(?:javascript|data):/i;
+const _prevStyleKeys = /* @__PURE__ */ new WeakMap();
 /** Apply a style prop (string or object). */
 function applyStyleProp(el, value) {
-	if (typeof value === "string") el.style.cssText = value;
-	else if (value != null && typeof value === "object") {
+	if (typeof value === "string") {
+		el.style.cssText = value;
+		_prevStyleKeys.delete(el);
+		return;
+	}
+	const prev = _prevStyleKeys.get(el);
+	if (value == null) {
+		if (prev) {
+			for (const propName of prev) el.style.removeProperty(propName);
+			_prevStyleKeys.delete(el);
+		}
+		return;
+	}
+	if (typeof value === "object") {
 		const obj = value;
+		const next = /* @__PURE__ */ new Set();
 		for (const k in obj) {
+			const propName = k.startsWith("--") ? k : toKebabCase(k);
+			next.add(propName);
 			const css = normalizeStyleValue(k, obj[k]);
-			el.style.setProperty(k.startsWith("--") ? k : toKebabCase(k), css);
+			el.style.setProperty(propName, css);
 		}
+		if (prev) {
+			for (const propName of prev) if (!next.has(propName)) el.style.removeProperty(propName);
+		}
+		if (next.size === 0) _prevStyleKeys.delete(el);
+		else _prevStyleKeys.set(el, next);
 	}
 }
 function applyClassProp(el, value) {
@@ -1299,13 +1339,15 @@ function mountElement(vnode, parent, anchor) {
 		};
 		const refToClean = ref;
 		return () => {
-			if (refToClean && typeof refToClean === "object") refToClean.current = null;
+			if (refToClean) if (typeof refToClean === "function") refToClean(null);
+			else refToClean.current = null;
 			if (propCleanup) propCleanup();
 			childCleanup();
 		};
 	}
 	return () => {
-		if (ref && typeof ref === "object") ref.current = null;
+		if (ref) if (typeof ref === "function") ref(null);
+		else ref.current = null;
 		if (propCleanup) propCleanup();
 		childCleanup();
 		const p = el.parentNode;
@@ -1500,7 +1542,9 @@ function hydrateReactiveChild(child, domNode, parent, anchor, path) {
 	const initial = runUntracked(child);
 	if (initial == null || initial === false) return [mountReactive(child, parent, insertMarker(parent, domNode, "pyreon"), mountChild), domNode];
 	if (typeof initial === "string" || typeof initial === "number" || typeof initial === "boolean") return hydrateReactiveText(child, domNode, parent, anchor, path);
-	return [mountReactive(child, parent, insertMarker(parent, domNode, "pyreon"), mountChild), domNode ? nextReal(domNode) : null];
+	const next = domNode ? nextReal(domNode) : null;
+	if (domNode && domNode.parentNode) domNode.parentNode.removeChild(domNode);
+	return [mountReactive(child, parent, insertMarker(parent, next, "pyreon"), mountChild), next];
 }
 /** Hydrate a reactive text binding against an existing text node. */
 function hydrateReactiveText(child, domNode, parent, anchor, path) {
@@ -1543,6 +1587,18 @@ function hydrateChild(child, domNode, parent, anchor, path = "root") {
 		warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > text`);
 		return [mountChild(child, parent, anchor), domNode];
 	}
+	if (child?.__isNative === true) {
+		const native = child;
+		const next = domNode ? nextReal(domNode) : null;
+		if (domNode && domNode.parentNode) domNode.parentNode.replaceChild(native.el, domNode);
+		else parent.insertBefore(native.el, anchor);
+		const cleanup = () => {
+			native.cleanup?.();
+			const p = native.el.parentNode;
+			if (p && p.isConnected !== false) p.removeChild(native.el);
+		};
+		return [cleanup, next];
+	}
 	return hydrateVNode(child, domNode, parent, anchor, path);
 }
 function hydrateElement(vnode, domNode, parent, anchor, path = "root") {
@@ -1559,7 +1615,8 @@ function hydrateElement(vnode, domNode, parent, anchor, path = "root") {
 		if (ref) if (typeof ref === "function") ref(el);
 		else ref.current = el;
 		const cleanup = () => {
-			if (ref && typeof ref === "object") ref.current = null;
+			if (ref) if (typeof ref === "function") ref(null);
+			else ref.current = null;
 			for (const c of cleanups) c();
 			el.remove();
 		};
@@ -1906,38 +1963,63 @@ function Transition(props) {
 	};
 	const ref = createRef();
 	const isMounted = signal(runUntracked(props.show));
+	let pendingEnterCancel = null;
 	let pendingLeaveCancel = null;
 	let initialized = false;
 	const applyEnter = (el) => {
 		pendingLeaveCancel?.();
 		pendingLeaveCancel = null;
+		pendingEnterCancel?.();
+		pendingEnterCancel = null;
 		props.onBeforeEnter?.(el);
 		el.classList.remove(cls.lf, cls.la, cls.lt);
 		el.classList.add(cls.ef, cls.ea);
 		requestAnimationFrame(() => {
 			el.classList.remove(cls.ef);
 			el.classList.add(cls.et);
+			let safetyTimer = null;
 			const done = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				pendingEnterCancel = null;
 				el.classList.remove(cls.ea, cls.et);
 				props.onAfterEnter?.(el);
 			};
+			pendingEnterCancel = () => {
+				el.removeEventListener("transitionend", done);
+				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				el.classList.remove(cls.ef, cls.ea, cls.et);
+			};
 			el.addEventListener("transitionend", done, { once: true });
 			el.addEventListener("animationend", done, { once: true });
-			setTimeout(done, 5e3);
+			safetyTimer = setTimeout(done, 5e3);
 		});
 	};
 	const applyLeave = (el) => {
+		pendingEnterCancel?.();
+		pendingEnterCancel = null;
 		props.onBeforeLeave?.(el);
 		el.classList.remove(cls.ef, cls.ea, cls.et);
 		el.classList.add(cls.lf, cls.la);
 		requestAnimationFrame(() => {
 			el.classList.remove(cls.lf);
 			el.classList.add(cls.lt);
+			let safetyTimer = null;
 			const done = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
 				el.classList.remove(cls.la, cls.lt);
 				pendingLeaveCancel = null;
 				isMounted.set(false);
@@ -1946,11 +2028,15 @@ function Transition(props) {
 			pendingLeaveCancel = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
 				el.classList.remove(cls.lf, cls.la, cls.lt);
 			};
 			el.addEventListener("transitionend", done, { once: true });
 			el.addEventListener("animationend", done, { once: true });
-			setTimeout(done, 5e3);
+			safetyTimer = setTimeout(done, 5e3);
 		});
 	};
 	const handleVisibilityChange = (visible) => {
@@ -1977,6 +2063,8 @@ function Transition(props) {
 		handleVisibilityChange(visible);
 	});
 	onUnmount(() => {
+		pendingEnterCancel?.();
+		pendingEnterCancel = null;
 		pendingLeaveCancel?.();
 		pendingLeaveCancel = null;
 	});
@@ -2043,39 +2131,71 @@ function TransitionGroup(props) {
 	const entries = /* @__PURE__ */ new Map();
 	const ready = signal(false);
 	let firstRun = true;
-	const applyEnter = (el) => {
+	const applyEnter = (entry, el) => {
 		props.onBeforeEnter?.(el);
 		el.classList.remove(cls.lf, cls.la, cls.lt);
 		el.classList.add(cls.ef, cls.ea);
 		requestAnimationFrame(() => {
 			el.classList.remove(cls.ef);
 			el.classList.add(cls.et);
+			let safetyTimer = null;
 			const done = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				entry.cancelTransition = null;
 				el.classList.remove(cls.ea, cls.et);
 				props.onAfterEnter?.(el);
 			};
+			entry.cancelTransition = () => {
+				el.removeEventListener("transitionend", done);
+				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				el.classList.remove(cls.ef, cls.ea, cls.et);
+			};
 			el.addEventListener("transitionend", done, { once: true });
 			el.addEventListener("animationend", done, { once: true });
+			safetyTimer = setTimeout(done, 5e3);
 		});
 	};
-	const applyLeave = (el, onDone) => {
+	const applyLeave = (entry, el, onDone) => {
 		props.onBeforeLeave?.(el);
 		el.classList.remove(cls.ef, cls.ea, cls.et);
 		el.classList.add(cls.lf, cls.la);
 		requestAnimationFrame(() => {
 			el.classList.remove(cls.lf);
 			el.classList.add(cls.lt);
+			let safetyTimer = null;
 			const done = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				entry.cancelTransition = null;
 				el.classList.remove(cls.la, cls.lt);
 				props.onAfterLeave?.(el);
 				onDone();
 			};
+			entry.cancelTransition = () => {
+				el.removeEventListener("transitionend", done);
+				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				el.classList.remove(cls.lf, cls.la, cls.lt);
+			};
 			el.addEventListener("transitionend", done, { once: true });
 			el.addEventListener("animationend", done, { once: true });
+			safetyTimer = setTimeout(done, 5e3);
 		});
 	};
 	/** Start leave animation for removed items. */
@@ -2084,7 +2204,7 @@ function TransitionGroup(props) {
 			if (newKeys.has(key) || entry.leaving) continue;
 			entry.leaving = true;
 			const el = entry.ref.current;
-			if (el) applyLeave(el, () => {
+			if (el) applyLeave(entry, el, () => {
 				entry.cleanup();
 				entries.delete(key);
 			});
@@ -2113,25 +2233,42 @@ function TransitionGroup(props) {
 						ref: itemRef
 					}
 				} : rawVNode, container, null),
-				leaving: false
+				leaving: false,
+				cancelTransition: null
 			};
 			entries.set(key, entry);
 			newEntries.push(entry);
 		}
 		return newEntries;
 	};
-	const startMoveAnimation = (el) => {
+	const startMoveAnimation = (entry, el) => {
 		requestAnimationFrame(() => {
 			el.classList.add(cls.mv);
 			el.style.transform = "";
 			el.style.transition = "";
+			let safetyTimer = null;
 			const done = () => {
 				el.removeEventListener("transitionend", done);
 				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
+				entry.cancelTransition = null;
+				el.classList.remove(cls.mv);
+			};
+			entry.cancelTransition = () => {
+				el.removeEventListener("transitionend", done);
+				el.removeEventListener("animationend", done);
+				if (safetyTimer !== null) {
+					clearTimeout(safetyTimer);
+					safetyTimer = null;
+				}
 				el.classList.remove(cls.mv);
 			};
 			el.addEventListener("transitionend", done, { once: true });
 			el.addEventListener("animationend", done, { once: true });
+			safetyTimer = setTimeout(done, 5e3);
 		});
 	};
 	const flipEntry = (entry, oldPos) => {
@@ -2143,7 +2280,7 @@ function TransitionGroup(props) {
 		const el = entry.ref.current;
 		el.style.transform = `translate(${dx}px, ${dy}px)`;
 		el.style.transition = "none";
-		startMoveAnimation(el);
+		startMoveAnimation(entry, el);
 	};
 	/** Apply FLIP move animations for items that shifted position. */
 	const applyFlipMoves = (oldPositions) => {
@@ -2171,7 +2308,7 @@ function TransitionGroup(props) {
 	};
 	const animateNewEntries = (newEntries) => {
 		for (const entry of newEntries) queueMicrotask(() => {
-			if (entry.ref.current) applyEnter(entry.ref.current);
+			if (entry.ref.current) applyEnter(entry, entry.ref.current);
 		});
 	};
 	const e = effect(() => {
@@ -2194,7 +2331,11 @@ function TransitionGroup(props) {
 	});
 	onUnmount(() => {
 		e.dispose();
-		for (const entry of entries.values()) entry.cleanup();
+		for (const entry of entries.values()) {
+			entry.cancelTransition?.();
+			entry.cancelTransition = null;
+			entry.cleanup();
+		}
 		entries.clear();
 	});
 	return h(tag, { ref: containerRef });