@pyreon/runtime-dom 0.12.14 → 0.12.15

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/delegate.ts","../../../src/devtools.ts","../../../src/hydrate.ts","../../../src/hydration-debug.ts","../../../src/keep-alive.ts","../../../src/mount.ts","../../../src/props.ts","../../../src/template.ts","../../../src/transition.ts","../../../src/transition-group.ts","../../../src/index.ts"],"mappings":"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"}
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/delegate.ts","../../../src/devtools.ts","../../../src/hydrate.ts","../../../src/hydration-debug.ts","../../../src/keep-alive.ts","../../../src/mount.ts","../../../src/props.ts","../../../src/template.ts","../../../src/transition.ts","../../../src/transition-group.ts","../../../src/index.ts"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-dom",
-  "version": "0.12.14",
+  "version": "0.12.15",
   "description": "DOM renderer for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
   "bugs": {
@@ -43,13 +43,13 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.12.14",
-    "@pyreon/reactivity": "^0.12.14"
+    "@pyreon/core": "^0.12.15",
+    "@pyreon/reactivity": "^0.12.15"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.12.14",
-    "@pyreon/runtime-server": "^0.12.14",
+    "@pyreon/compiler": "^0.12.15",
+    "@pyreon/runtime-server": "^0.12.15",
     "@pyreon/test-utils": "^0.12.10",
     "@vitest/browser-playwright": "^4.1.4",
     "esbuild": "^0.28.0",

package/src/props.ts

@@ -245,37 +245,76 @@ function applyEventProp(el: Element, key: string, value: unknown): Cleanup | nul
   return () => el.removeEventListener(eventName, batched)
 }
 
-export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
-  // Event listener: onClick → "click"
-  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: Element, key: string, value: unknown): void {
+  if (__DEV__ && typeof value === 'function') {
+    // Defensive: function values must be unwrapped via `renderEffect`
+    // before reaching here. If we see one, a NEW special-case branch
+    // somewhere upstream skipped the reactive-wrapping dance — exactly
+    // the bug class the structural refactor was meant to eliminate.
+    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().`,
+    )
+  }
 
-  // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer
+  // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer.
   if (key === 'innerHTML') {
+    const html = String(value ?? '')
     if (typeof (el as HTMLElement & { setHTML?: (h: string) => void }).setHTML === 'function') {
-      ;(el as HTMLElement & { setHTML: (h: string) => void }).setHTML(value as string)
+      ;(el as HTMLElement & { setHTML: (h: string) => void }).setHTML(html)
     } else {
-      ;(el as HTMLElement).innerHTML = sanitizeHtml(value as string)
+      ;(el as HTMLElement).innerHTML = sanitizeHtml(html)
     }
-    return null
+    return
   }
-  // dangerouslySetInnerHTML — intentionally raw, developer owns sanitization (same as React).
-  // The name itself is the warning — React doesn't log, neither should we.
-  // Previously this warned on every prop application, flooding the console
-  // on re-renders (one warning per render per instance).
+
+  // dangerouslySetInnerHTML — intentionally raw, developer owns sanitization
+  // (same as React). The name itself is the warning — React doesn't log,
+  // neither should we.
   if (key === 'dangerouslySetInnerHTML') {
-    ;(el as HTMLElement).innerHTML = (value as { __html: string }).__html
-    return null
+    const v = value as { __html: string } | null | undefined
+    ;(el as HTMLElement).innerHTML = v?.__html ?? ''
+    return
   }
 
-  // Reactive prop — function that returns the actual value
-  // Uses renderEffect (lighter than effect — no scope registration, no WeakMap)
-  // since lifecycle is managed by mountElement's cleanup array.
+  setStaticProp(el, key, value)
+}
+
+export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
+  // Event listener: onClick → "click"
+  if (EVENT_RE.test(key)) return applyEventProp(el, key, value)
+
+  // Reactive prop — function value is an accessor closure. The JSX compiler
+  // emits `prop={someExpr(signal())}` as a `() => someExpr(signal())` thunk
+  // so the prop tracks the signal automatically. We wrap in `renderEffect`
+  // ONCE here, before any prop-kind dispatch, so EVERY sink gets the same
+  // reactive treatment. Previously special-cased sinks (innerHTML etc.) had
+  // early-return branches that bypassed this wrap and stringified the
+  // closure — the bug fixed by this restructure.
+  //
+  // Uses renderEffect (lighter than effect — no scope registration, no
+  // WeakMap) since lifecycle is managed by mountElement's cleanup array.
   if (typeof value === 'function') {
-    const dispose = renderEffect(() => setStaticProp(el, key, (value as () => unknown)()))
-    return dispose
+    return renderEffect(() => applyStaticProp(el, key, (value as () => unknown)()))
   }
 
-  setStaticProp(el, key, value)
+  applyStaticProp(el, key, value)
   return null
 }
 

package/src/tests/mount.test.ts

@@ -3177,6 +3177,95 @@ describe('TransitionGroup — cleanup', () => {
   })
 })
 
+// ─── TransitionGroup — leak regression tests ─────────────────────────────────
+// Regression for the two fixes:
+// 1. No safety timeout on applyLeave meant an item whose transition never
+//    fired stayed in the `entries` Map forever (`entries.delete(key)` was
+//    gated on the `done` callback firing).
+// 2. Unmount during in-flight transition left the 5s safety timer running,
+//    firing `onAfterEnter` / `onAfterLeave` on detached elements.
+
+describe('TransitionGroup — leak regressions', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('onAfterLeave fires via 5s safety timeout when transitionend never fires', async () => {
+    const el = container()
+    const items = signal([{ id: 1 }, { id: 2 }])
+    const onAfterLeave = vi.fn()
+    mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterLeave,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([{ id: 1 }])
+    await vi.advanceTimersByTimeAsync(20)
+    // transitionend never fires — before the fix this would leak forever.
+    expect(onAfterLeave).not.toHaveBeenCalled()
+    await vi.advanceTimersByTimeAsync(5100)
+    expect(onAfterLeave).toHaveBeenCalledTimes(1)
+  })
+
+  test('onAfterEnter does NOT fire after container unmount during in-flight enter', async () => {
+    const el = container()
+    const items = signal<{ id: number }[]>([])
+    const onAfterEnter = vi.fn()
+    const dispose = mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterEnter,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([{ id: 1 }])
+    await vi.advanceTimersByTimeAsync(20)
+    // Mid-transition — unmount. The 5s safety timer must NOT fire the
+    // callback on a detached element.
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterEnter).not.toHaveBeenCalled()
+  })
+
+  test('onAfterLeave does NOT fire after container unmount during in-flight leave', async () => {
+    const el = container()
+    const items = signal([{ id: 1 }])
+    const onAfterLeave = vi.fn()
+    const dispose = mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterLeave,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([])
+    await vi.advanceTimersByTimeAsync(20)
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterLeave).not.toHaveBeenCalled()
+  })
+})
+
 // ─── Error paths (no ErrorBoundary) ──────────────────────────────────────────
 
 describe('mount — error paths', () => {

package/src/tests/props.test.ts

@@ -269,6 +269,123 @@ describe('applyProp — innerHTML', () => {
     expect(warnSpy).not.toHaveBeenCalled()
     warnSpy.mockRestore()
   })
+
+  test('reactive innerHTML accessor — function value is called, not stringified', async () => {
+    // Regression: the JSX compiler emits `innerHTML={getIcon(props.x ? "a" : "b")}`
+    // as a `() => …` accessor. Without function-value handling here, the
+    // closure was set as literal text — `() => getIcon(...)` rendered
+    // verbatim instead of the SVG.
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const which = signal<'a' | 'b'>('a')
+    const cleanup = applyProp(el, 'innerHTML', () => `<span data-x="${which()}">x</span>`)
+    expect(el.querySelector('[data-x="a"]')).not.toBeNull()
+    expect(el.innerHTML).not.toContain('=>')
+    which.set('b')
+    expect(el.querySelector('[data-x="b"]')).not.toBeNull()
+    cleanup?.()
+  })
+
+  test('reactive dangerouslySetInnerHTML accessor — function value is called, not stringified', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const html = signal('<em>one</em>')
+    const cleanup = applyProp(el, 'dangerouslySetInnerHTML', () => ({ __html: html() }))
+    expect(el.innerHTML).toBe('<em>one</em>')
+    html.set('<em>two</em>')
+    expect(el.innerHTML).toBe('<em>two</em>')
+    cleanup?.()
+  })
+
+  test('dev warning fires if a function reaches applyStaticProp directly (defensive guard)', () => {
+    // applyStaticProp is internal — reachable only if a future special-case
+    // branch in applyProp bypasses the reactive-wrap dance. The dev guard
+    // catches that regression at first render.
+    const el = document.createElement('div')
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    // Indirect: trigger by routing a function through `applyProp` for a
+    // key that DOESN'T have a special case — exercises the reactive path,
+    // which calls the accessor + passes the result. The accessor itself
+    // returning a function would surface the warning.
+    applyProp(el, 'innerHTML', () => () => '<em>nested</em>')
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('applyStaticProp received a function for "innerHTML"'),
+    )
+    warnSpy.mockRestore()
+  })
+})
+
+// Comprehensive sweep: every string-typed sink must handle reactive
+// (function) values. The original bug was specific to innerHTML, but the
+// structural fix should cover ALL sinks the same way. These tests assert
+// that.
+describe('applyProp — reactive function values across all sink kinds', () => {
+  test('reactive href accessor on <a>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('a')
+    const path = signal('/one')
+    const cleanup = applyProp(el, 'href', () => path())
+    expect(el.getAttribute('href')).toBe('/one')
+    path.set('/two')
+    expect(el.getAttribute('href')).toBe('/two')
+    cleanup?.()
+  })
+
+  test('reactive src accessor on <img>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('img')
+    const url = signal('/a.png')
+    const cleanup = applyProp(el, 'src', () => url())
+    // <img> exposes `src` as a normalized absolute URL — assert via getAttribute
+    expect(el.getAttribute('src')).toBe('/a.png')
+    url.set('/b.png')
+    expect(el.getAttribute('src')).toBe('/b.png')
+    cleanup?.()
+  })
+
+  test('reactive value accessor on <input>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('input')
+    const val = signal('alpha')
+    const cleanup = applyProp(el, 'value', () => val())
+    expect((el as HTMLInputElement).value).toBe('alpha')
+    val.set('beta')
+    expect((el as HTMLInputElement).value).toBe('beta')
+    cleanup?.()
+  })
+
+  test('reactive title accessor (data attribute pattern)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const tip = signal('hello')
+    const cleanup = applyProp(el, 'title', () => tip())
+    expect(el.getAttribute('title')).toBe('hello')
+    tip.set('world')
+    expect(el.getAttribute('title')).toBe('world')
+    cleanup?.()
+  })
+
+  test('reactive class accessor (string form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const cls = signal('one')
+    const cleanup = applyProp(el, 'class', () => cls())
+    expect(el.className).toBe('one')
+    cls.set('two')
+    expect(el.className).toBe('two')
+    cleanup?.()
+  })
+
+  test('reactive style accessor (object form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const color = signal('red')
+    const cleanup = applyProp(el, 'style', () => ({ color: color() }))
+    expect(el.style.color).toBe('red')
+    color.set('blue')
+    expect(el.style.color).toBe('blue')
+    cleanup?.()
+  })
 })
 
 // ─── applyProp — URL safety ──────────────────────────────────────────────────

package/src/tests/transition-timeout-leak.test.ts

@@ -78,4 +78,49 @@ describe('Transition — safety-timer leak (regression)', () => {
     await vi.advanceTimersByTimeAsync(6000)
     expect(onAfterLeave).toHaveBeenCalledTimes(1)
   })
+
+  // Regression: component unmount during an in-flight transition used to
+  // leave the 5s safety timer running. onAfterEnter / onAfterLeave would
+  // fire on a detached element up to 5 seconds after unmount.
+  test('onAfterEnter does NOT fire after component unmount during enter transition', async () => {
+    const el = container()
+    const show = signal(false)
+    const onAfterEnter = vi.fn()
+    const dispose = mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterEnter },
+        h('div', { class: 'unmount-enter' }, 'x'),
+      ),
+      el,
+    )
+
+    show.set(true)
+    await vi.advanceTimersByTimeAsync(20)
+    // Mid-transition — unmount without firing transitionend.
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterEnter).not.toHaveBeenCalled()
+  })
+
+  test('onAfterLeave does NOT fire after component unmount during leave transition', async () => {
+    const el = container()
+    const show = signal(true)
+    const onAfterLeave = vi.fn()
+    const dispose = mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterLeave },
+        h('div', { class: 'unmount-leave' }, 'x'),
+      ),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+
+    show.set(false)
+    await vi.advanceTimersByTimeAsync(20)
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterLeave).not.toHaveBeenCalled()
+  })
 })

package/src/transition-group.ts

@@ -41,6 +41,15 @@ type ItemEntry = {
   ref: ReturnType<typeof createRef<HTMLElement>>
   cleanup: () => void
   leaving: boolean
+  /**
+   * Cancel function for an in-progress enter / leave / move transition —
+   * removes listeners, clears the safety timer, strips active-state
+   * classes, but does NOT fire the onAfterX callback. Called when a
+   * transition is superseded or when the whole TransitionGroup unmounts
+   * mid-transition (so onAfterEnter/Leave doesn't fire on a detached
+   * element and the 5s timer doesn't leak past unmount).
+   */
+  cancelTransition: (() => void) | null
 }
 
 /**
@@ -87,40 +96,80 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
   const ready = signal(false)
   let firstRun = true
 
-  const applyEnter = (el: HTMLElement) => {
+  const applyEnter = (entry: ItemEntry, el: HTMLElement) => {
     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: ReturnType<typeof setTimeout> | null = 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 })
+      // Safety timeout: if CSS animation never fires (off-screen, zero
+      // duration, `display: none`), force cleanup so the entry's
+      // onAfterEnter runs and the listener + closure don't leak.
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
-  const applyLeave = (el: HTMLElement, onDone: () => void) => {
+  const applyLeave = (entry: ItemEntry, el: HTMLElement, onDone: () => void) => {
     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: ReturnType<typeof setTimeout> | null = 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 })
+      // Safety timeout: CRITICAL for transition-group. Without it, a list
+      // item whose leave transition never fires (off-screen, zero
+      // duration, `display: none`) stays in the `entries` Map forever
+      // because `onDone` never runs to `entries.delete(key)` — a real
+      // memory leak that grows with every list mutation.
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
@@ -131,7 +180,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
       entry.leaving = true
       const el = entry.ref.current
       if (el) {
-        applyLeave(el, () => {
+        applyLeave(entry, el, () => {
           entry.cleanup()
           entries.delete(key)
         })
@@ -156,25 +205,41 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
           ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
           : rawVNode
       const cleanup = mountChild(vnode, container, null)
-      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false }
+      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false, cancelTransition: null }
       entries.set(key, entry)
       newEntries.push(entry)
     }
     return newEntries
   }
 
-  const startMoveAnimation = (el: HTMLElement) => {
+  const startMoveAnimation = (entry: ItemEntry, el: HTMLElement) => {
     requestAnimationFrame(() => {
       el.classList.add(cls.mv)
       el.style.transform = ''
       el.style.transition = ''
+      let safetyTimer: ReturnType<typeof setTimeout> | null = 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, 5000)
     })
   }
 
@@ -187,7 +252,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
     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. */
@@ -224,7 +289,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
   const animateNewEntries = (newEntries: ItemEntry[]) => {
     for (const entry of newEntries) {
       queueMicrotask(() => {
-        if (entry.ref.current) applyEnter(entry.ref.current)
+        if (entry.ref.current) applyEnter(entry, entry.ref.current)
       })
     }
   }
@@ -255,7 +320,14 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
 
   onUnmount(() => {
     e.dispose()
-    for (const entry of entries.values()) entry.cleanup()
+    for (const entry of entries.values()) {
+      // Cancel any in-progress enter/leave/move transition so the 5s
+      // safety timer doesn't keep running past container unmount and
+      // onAfterEnter / onAfterLeave don't fire on a detached element.
+      entry.cancelTransition?.()
+      entry.cancelTransition = null
+      entry.cleanup()
+    }
     entries.clear()
   })
 

package/src/transition.ts

@@ -80,13 +80,20 @@ export function Transition(props: TransitionProps): VNodeChild {
   const ref = createRef<HTMLElement>()
   const isMounted = signal(runUntracked<boolean>(props.show))
 
-  // Cancel an in-progress leave when re-entering before the animation ends
+  // Cancel in-progress enter / leave when the component unmounts or when a
+  // new transition supersedes the current one. Both are set inside their
+  // respective applyX(). Calling the cancel removes event listeners, clears
+  // the safety timer, and strips active-state classes — WITHOUT firing the
+  // onAfterX callback (which would run on a detached element after unmount).
+  let pendingEnterCancel: (() => void) | null = null
   let pendingLeaveCancel: (() => void) | null = null
   let initialized = false
 
   const applyEnter = (el: HTMLElement) => {
     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)
@@ -105,9 +112,21 @@ export function Transition(props: TransitionProps): VNodeChild {
           clearTimeout(safetyTimer)
           safetyTimer = null
         }
+        pendingEnterCancel = null
         el.classList.remove(cls.ea, cls.et)
         props.onAfterEnter?.(el)
       }
+      // Cancel path (called from onUnmount or a superseding transition): tears
+      // down without firing onAfterEnter on a detached element.
+      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 })
       // Safety timeout: if CSS animation never fires (bad CSS, off-screen), force cleanup
@@ -116,6 +135,8 @@ export function Transition(props: TransitionProps): VNodeChild {
   }
 
   const applyLeave = (el: HTMLElement) => {
+    pendingEnterCancel?.()
+    pendingEnterCancel = null
     props.onBeforeLeave?.(el)
     el.classList.remove(cls.ef, cls.ea, cls.et)
     el.classList.add(cls.lf, cls.la)
@@ -181,6 +202,10 @@ export function Transition(props: TransitionProps): VNodeChild {
   })
 
   onUnmount(() => {
+    // Cancel both pending transitions so neither fires its onAfterX
+    // callback on a now-detached element after the 5s safety window.
+    pendingEnterCancel?.()
+    pendingEnterCancel = null
     pendingLeaveCancel?.()
     pendingLeaveCancel = null
   })