@pyreon/kinetic 0.11.3 → 0.11.5

package/lib/index.js

@@ -415,55 +415,64 @@ const getKeyedChildren = (children) => {
 * Children that appear (new key) animate in. Children that disappear
 * (removed key) stay in DOM during leave animation, then unmount.
 * config.tag wraps all children as a container element.
+*
+* In Pyreon, components run once. Pass children as a reactive accessor
+* `() => VNode[]` for the group to detect changes and animate entries/exits.
 */
 const GroupRenderer = ({ config, htmlProps, appear, timeout, callbacks, children }) => {
 	const effectiveAppear = appear ?? config.appear ?? false;
 	const effectiveTimeout = timeout ?? config.timeout ?? 5e3;
 	const prevMap = /* @__PURE__ */ new Map();
 	const leavingMap = /* @__PURE__ */ new Map();
-	const forceUpdateSignal = signal(0);
-	const currentKeyed = getKeyedChildren(children);
-	const currentMap = /* @__PURE__ */ new Map();
-	for (const { key, element } of currentKeyed) currentMap.set(key, element);
-	const initialKeys = new Set(currentMap.keys());
-	for (const [key, child] of prevMap) if (!currentMap.has(key)) leavingMap.set(key, child);
-	for (const key of currentMap.keys()) leavingMap.delete(key);
-	prevMap.clear();
-	for (const [key, element] of currentMap) prevMap.set(key, element);
+	const forceUpdate = signal(0);
+	const getChildren = typeof children === "function" ? children : () => children;
+	const initialKeyed = getKeyedChildren(getChildren());
+	const initialKeys = new Set(initialKeyed.map((c) => c.key));
+	for (const { key, element } of initialKeyed) prevMap.set(key, element);
 	const handleAfterLeave = (key) => {
 		leavingMap.delete(key);
 		callbacks.onAfterLeave?.();
-		forceUpdateSignal.update((c) => c + 1);
+		forceUpdate.update((c) => c + 1);
 	};
-	const allEntries = [...currentKeyed];
-	for (const [key, element] of leavingMap) allEntries.push({
-		key,
-		element
-	});
-	const groupedChildren = allEntries.map(({ key, element }) => {
-		const isInitial = initialKeys.has(key);
-		const isShowing = currentMap.has(key);
-		return /* @__PURE__ */ jsx(TransitionItem, {
-			show: () => isShowing,
-			appear: isInitial ? effectiveAppear : true,
-			timeout: effectiveTimeout,
-			enterStyle: config.enterStyle,
-			enterToStyle: config.enterToStyle,
-			enterTransition: config.enterTransition,
-			leaveStyle: config.leaveStyle,
-			leaveToStyle: config.leaveToStyle,
-			leaveTransition: config.leaveTransition,
-			enter: config.enter,
-			enterFrom: config.enterFrom,
-			enterTo: config.enterTo,
-			leave: config.leave,
-			leaveFrom: config.leaveFrom,
-			leaveTo: config.leaveTo,
-			onAfterLeave: () => handleAfterLeave(key),
-			children: element
+	return (() => {
+		forceUpdate();
+		const currentKeyed = getKeyedChildren(getChildren());
+		const currentMap = /* @__PURE__ */ new Map();
+		for (const { key, element } of currentKeyed) currentMap.set(key, element);
+		for (const [key, child] of prevMap) if (!currentMap.has(key) && !leavingMap.has(key)) leavingMap.set(key, child);
+		for (const key of currentMap.keys()) leavingMap.delete(key);
+		prevMap.clear();
+		for (const [key, element] of currentMap) prevMap.set(key, element);
+		const allEntries = [...currentKeyed];
+		for (const [key, element] of leavingMap) allEntries.push({
+			key,
+			element
+		});
+		const groupedChildren = allEntries.map(({ key, element }) => {
+			const isInitial = initialKeys.has(key);
+			const isShowing = currentMap.has(key);
+			return /* @__PURE__ */ jsx(TransitionItem, {
+				show: () => isShowing,
+				appear: isInitial ? effectiveAppear : true,
+				timeout: effectiveTimeout,
+				enterStyle: config.enterStyle,
+				enterToStyle: config.enterToStyle,
+				enterTransition: config.enterTransition,
+				leaveStyle: config.leaveStyle,
+				leaveToStyle: config.leaveToStyle,
+				leaveTransition: config.leaveTransition,
+				enter: config.enter,
+				enterFrom: config.enterFrom,
+				enterTo: config.enterTo,
+				leave: config.leave,
+				leaveFrom: config.leaveFrom,
+				leaveTo: config.leaveTo,
+				onAfterLeave: () => handleAfterLeave(key),
+				children: element
+			});
 		});
+		return h(config.tag, { ...htmlProps }, ...groupedChildren);
 	});
-	return h(config.tag, { ...htmlProps }, ...groupedChildren);
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -44,11 +44,11 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.3",
-    "@pyreon/reactivity": "^0.11.3"
+    "@pyreon/core": "^0.11.5",
+    "@pyreon/reactivity": "^0.11.5"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.3"
+    "@pyreon/typescript": "^0.11.5"
   }
 }

package/src/Transition.tsx

@@ -114,12 +114,11 @@ const Transition = ({
   })
 
   const elementRef = createRef<HTMLElement>()
+  const childProps = (children.props ?? {}) as Record<string, unknown>
   const mergedRef = mergeRefs(
     elementRef,
     stateRef,
-    (children.props as Record<string, unknown>)?.ref as
-      | ((el: HTMLElement | null) => void)
-      | undefined,
+    childProps.ref as ((el: HTMLElement | null) => void) | undefined,
   )
 
   const callbacks = {
@@ -198,9 +197,7 @@ const Transition = ({
           : cloneVNode(children, {
               ref: mergedRef,
               style: mergeStyles(
-                (children.props as Record<string, unknown>)?.style as
-                  | Record<string, string | number | undefined>
-                  | undefined,
+                childProps.style as Record<string, string | number | undefined> | undefined,
                 { display: "none" },
               ),
             })

package/src/TransitionGroup.tsx

@@ -8,7 +8,12 @@ export type TransitionGroupProps = ClassTransitionProps &
   TransitionCallbacks & {
     appear?: boolean | undefined
     timeout?: number | undefined
-    children: VNode[]
+    /**
+     * Children can be a static array OR a reactive accessor `() => VNode[]`.
+     * When passed as an accessor, TransitionGroup tracks changes and
+     * animates entering/leaving children automatically.
+     */
+    children: VNode[] | (() => VNode[])
   }
 
 type KeyedChild = { key: string | number; element: VNode }
@@ -29,6 +34,14 @@ const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
   return result
 }
 
+/**
+ * Renders children with key-based enter/exit animations.
+ *
+ * In Pyreon, components run once. For TransitionGroup to detect children
+ * changes, pass children as a reactive accessor: `() => VNode[]`.
+ * The component uses a reactive accessor internally to diff previous vs
+ * current children and animate entries/exits.
+ */
 const TransitionGroup = ({
   children,
   appear = false,
@@ -38,71 +51,84 @@ const TransitionGroup = ({
 }: TransitionGroupProps): VNode | null => {
   const prevMap = new Map<string | number, VNode>()
   const leavingMap = new Map<string | number, VNode>()
-  const forceUpdateSignal = signal(0)
+  const forceUpdate = signal(0)
 
-  // Build current keyed children map
-  const currentKeyed = getKeyedChildren(children)
-  const currentMap = new Map<string | number, VNode>()
-  for (const { key, element } of currentKeyed) {
-    currentMap.set(key, element)
-  }
-
-  // Track initial keys to know which children were present on first render
-  const initialKeys: Set<string | number> = new Set(currentMap.keys())
-
-  // Detect leaving children (were in prev but not in current)
-  for (const [key, child] of prevMap) {
-    if (!currentMap.has(key)) {
-      leavingMap.set(key, child)
-    }
-  }
+  // Normalize children to an accessor for uniform handling
+  const getChildren = typeof children === "function" ? (children as () => VNode[]) : () => children
 
-  // If a leaving child reappears, stop leaving
-  for (const key of currentMap.keys()) {
-    leavingMap.delete(key)
-  }
-
-  // Update prev
-  prevMap.clear()
-  for (const [key, element] of currentMap) {
+  // Track initial keys for appear animation logic
+  const initialKeyed = getKeyedChildren(getChildren())
+  const initialKeys = new Set(initialKeyed.map((c) => c.key))
+  for (const { key, element } of initialKeyed) {
     prevMap.set(key, element)
   }
 
   const handleAfterLeave = (key: string | number) => {
     leavingMap.delete(key)
     onAfterLeave?.()
-    forceUpdateSignal.update((c) => c + 1)
+    forceUpdate.update((c) => c + 1)
   }
 
-  // Merge current + leaving, preserving insertion order
-  const allEntries: KeyedChild[] = [...currentKeyed]
+  // Reactive accessor — re-evaluates when children() or forceUpdate changes.
+  // The runtime mounts this via mountReactive + effect, creating a
+  // reactive scope that tracks signal reads.
+  return (() => {
+    // Read forceUpdate to re-evaluate when leaving children finish
+    forceUpdate()
+
+    const currentChildren = getChildren()
+    const currentKeyed = getKeyedChildren(currentChildren)
+    const currentMap = new Map<string | number, VNode>()
+    for (const { key, element } of currentKeyed) {
+      currentMap.set(key, element)
+    }
+
+    // Detect leaving children (were in prev but not in current)
+    for (const [key, child] of prevMap) {
+      if (!currentMap.has(key) && !leavingMap.has(key)) {
+        leavingMap.set(key, child)
+      }
+    }
 
-  for (const [key, element] of leavingMap) {
-    allEntries.push({ key, element })
-  }
+    // If a leaving child reappears, cancel the leave
+    for (const key of currentMap.keys()) {
+      leavingMap.delete(key)
+    }
+
+    // Update prev for next diff
+    prevMap.clear()
+    for (const [key, element] of currentMap) {
+      prevMap.set(key, element)
+    }
+
+    // Merge current + leaving, preserving insertion order
+    const allEntries: KeyedChild[] = [...currentKeyed]
+    for (const [key, element] of leavingMap) {
+      allEntries.push({ key, element })
+    }
 
-  return (
-    <>
-      {allEntries.map(({ key, element }) => {
-        // New children (not in initial render) must appear with animation
-        const isInitial = initialKeys.has(key)
-        const isShowing = currentMap.has(key)
-
-        return (
-          <Transition
-            key={key}
-            show={() => isShowing}
-            appear={isInitial ? appear : true}
-            timeout={timeout}
-            {...transitionProps}
-            onAfterLeave={() => handleAfterLeave(key)}
-          >
-            {element}
-          </Transition>
-        )
-      })}
-    </>
-  )
+    return (
+      <>
+        {allEntries.map(({ key, element }) => {
+          const isInitial = initialKeys.has(key)
+          const isShowing = currentMap.has(key)
+
+          return (
+            <Transition
+              key={key}
+              show={() => isShowing}
+              appear={isInitial ? appear : true}
+              timeout={timeout}
+              {...transitionProps}
+              onAfterLeave={() => handleAfterLeave(key)}
+            >
+              {element}
+            </Transition>
+          )
+        })}
+      </>
+    )
+  }) as unknown as VNode
 }
 
 export default TransitionGroup

package/src/__tests__/GroupRenderer.test.tsx

@@ -40,6 +40,13 @@ const makeConfig = (overrides: Partial<KineticConfig> = {}): KineticConfig => ({
   ...overrides,
 })
 
+/** Unwrap reactive accessors returned by GroupRenderer. */
+const unwrap = (val: any): any => {
+  let result = val
+  while (typeof result === "function") result = result()
+  return result
+}
+
 const makeKeyedChild = (key: string | number, text: string): VNode => ({
   type: "span",
   props: { "data-testid": `child-${key}` },
@@ -52,12 +59,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha"), makeKeyedChild("b", "Beta")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     expect(vnode).not.toBeNull()
     expect(vnode?.type).toBe("div")
@@ -67,12 +76,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ tag: "ul" })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     expect(vnode?.type).toBe("ul")
   })
@@ -81,12 +92,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: { "data-testid": "group-wrapper", class: "my-group" },
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: { "data-testid": "group-wrapper", class: "my-group" },
+        callbacks: {},
+        children,
+      }),
+    )
 
     const props = vnode?.props as Record<string, unknown>
     expect(props?.["data-testid"]).toBe("group-wrapper")
@@ -97,12 +110,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha"), makeKeyedChild("b", "Beta")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     // The wrapper div should have children that are TransitionItem VNodes
     const wrapperChildren = vnode?.children
@@ -122,21 +137,25 @@ describe("GroupRenderer", () => {
 
     // First render with initial children
     const initialChildren = [makeKeyedChild("a", "Alpha")]
-    GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children: initialChildren,
-    })
+    unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children: initialChildren,
+      }),
+    )
 
     // Second render with a new child added
     const updatedChildren = [makeKeyedChild("a", "Alpha"), makeKeyedChild("b", "Beta")]
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children: updatedChildren,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children: updatedChildren,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     expect(wrapperChildren.length).toBe(2)
@@ -153,12 +172,14 @@ describe("GroupRenderer", () => {
     })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const transitionItemVNode = wrapperChildren[0] as VNode
@@ -183,12 +204,14 @@ describe("GroupRenderer", () => {
     })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -205,12 +228,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ appear: true })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -223,12 +248,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ timeout: 2000 })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -240,12 +267,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -258,12 +287,14 @@ describe("GroupRenderer", () => {
     const keyedChild = makeKeyedChild("a", "Alpha")
     const unkeyedChild: VNode = { type: "span", props: {}, children: ["No key"], key: null }
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children: [keyedChild, unkeyedChild],
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children: [keyedChild, unkeyedChild],
+      }),
+    )
 
     // Only keyed child should be wrapped in TransitionItem
     const wrapperChildren = vnode?.children as VNode[]
@@ -274,13 +305,15 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ appear: false })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      appear: true,
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        appear: true,
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -292,13 +325,15 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ timeout: 2000 })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      timeout: 3000,
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        timeout: 3000,
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -311,12 +346,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: { onAfterLeave },
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: { onAfterLeave },
+        children,
+      }),
+    )
 
     // Each TransitionItem child gets an onAfterLeave that calls handleAfterLeave(key)
     const wrapperChildren = vnode?.children as VNode[]
@@ -333,12 +370,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha"), makeKeyedChild("b", "Beta")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
 
@@ -353,12 +392,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig({ appear: false })
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiProps = wrapperChildren[0]?.props as Record<string, unknown>
@@ -371,12 +412,14 @@ describe("GroupRenderer", () => {
     const config = makeConfig()
     const children = [makeKeyedChild("a", "Alpha")]
 
-    const vnode = GroupRenderer({
-      config,
-      htmlProps: {},
-      callbacks: {},
-      children,
-    })
+    const vnode = unwrap(
+      GroupRenderer({
+        config,
+        htmlProps: {},
+        callbacks: {},
+        children,
+      }),
+    )
 
     const wrapperChildren = vnode?.children as VNode[]
     const tiVNode = wrapperChildren[0] as VNode

package/src/kinetic/GroupRenderer.tsx

@@ -11,7 +11,12 @@ type GroupRendererProps = {
   appear?: boolean | undefined
   timeout?: number | undefined
   callbacks: Partial<TransitionCallbacks>
-  children: VNode[]
+  /**
+   * Children can be a static array OR a reactive accessor `() => VNode[]`.
+   * When passed as an accessor, GroupRenderer tracks changes and
+   * animates entering/leaving children automatically.
+   */
+  children: VNode[] | (() => VNode[])
 }
 
 type KeyedChild = { key: string | number; element: VNode }
@@ -37,6 +42,9 @@ const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
  * Children that appear (new key) animate in. Children that disappear
  * (removed key) stay in DOM during leave animation, then unmount.
  * config.tag wraps all children as a container element.
+ *
+ * In Pyreon, components run once. Pass children as a reactive accessor
+ * `() => VNode[]` for the group to detect changes and animate entries/exits.
  */
 const GroupRenderer = ({
   config,
@@ -51,74 +59,89 @@ const GroupRenderer = ({
 
   const prevMap = new Map<string | number, VNode>()
   const leavingMap = new Map<string | number, VNode>()
-  const forceUpdateSignal = signal(0)
+  const forceUpdate = signal(0)
 
-  const currentKeyed = getKeyedChildren(children)
-  const currentMap = new Map<string | number, VNode>()
-  for (const { key, element } of currentKeyed) {
-    currentMap.set(key, element)
-  }
-
-  const initialKeys: Set<string | number> = new Set(currentMap.keys())
-
-  // Detect leaving children
-  for (const [key, child] of prevMap) {
-    if (!currentMap.has(key)) {
-      leavingMap.set(key, child)
-    }
-  }
+  // Normalize children to an accessor
+  const getChildren = typeof children === "function" ? (children as () => VNode[]) : () => children
 
-  // If a leaving child reappears, stop leaving
-  for (const key of currentMap.keys()) {
-    leavingMap.delete(key)
-  }
-
-  prevMap.clear()
-  for (const [key, element] of currentMap) {
+  // Track initial keys for appear animation logic
+  const initialKeyed = getKeyedChildren(getChildren())
+  const initialKeys = new Set(initialKeyed.map((c) => c.key))
+  for (const { key, element } of initialKeyed) {
     prevMap.set(key, element)
   }
 
   const handleAfterLeave = (key: string | number) => {
     leavingMap.delete(key)
     callbacks.onAfterLeave?.()
-    forceUpdateSignal.update((c) => c + 1)
+    forceUpdate.update((c) => c + 1)
   }
 
-  // Merge current + leaving
-  const allEntries: KeyedChild[] = [...currentKeyed]
-  for (const [key, element] of leavingMap) {
-    allEntries.push({ key, element })
-  }
+  // Reactive accessor — re-evaluates when children() or forceUpdate changes
+  return (() => {
+    forceUpdate()
+
+    const currentChildren = getChildren()
+    const currentKeyed = getKeyedChildren(currentChildren)
+    const currentMap = new Map<string | number, VNode>()
+    for (const { key, element } of currentKeyed) {
+      currentMap.set(key, element)
+    }
+
+    // Detect leaving children
+    for (const [key, child] of prevMap) {
+      if (!currentMap.has(key) && !leavingMap.has(key)) {
+        leavingMap.set(key, child)
+      }
+    }
+
+    // Cancel leave if child reappears
+    for (const key of currentMap.keys()) {
+      leavingMap.delete(key)
+    }
+
+    // Update prev for next diff
+    prevMap.clear()
+    for (const [key, element] of currentMap) {
+      prevMap.set(key, element)
+    }
+
+    // Merge current + leaving
+    const allEntries: KeyedChild[] = [...currentKeyed]
+    for (const [key, element] of leavingMap) {
+      allEntries.push({ key, element })
+    }
 
-  const groupedChildren = allEntries.map(({ key, element }) => {
-    const isInitial = initialKeys.has(key)
-    const isShowing = currentMap.has(key)
-
-    return (
-      <TransitionItem
-        show={() => isShowing}
-        appear={isInitial ? effectiveAppear : true}
-        timeout={effectiveTimeout}
-        enterStyle={config.enterStyle}
-        enterToStyle={config.enterToStyle}
-        enterTransition={config.enterTransition}
-        leaveStyle={config.leaveStyle}
-        leaveToStyle={config.leaveToStyle}
-        leaveTransition={config.leaveTransition}
-        enter={config.enter}
-        enterFrom={config.enterFrom}
-        enterTo={config.enterTo}
-        leave={config.leave}
-        leaveFrom={config.leaveFrom}
-        leaveTo={config.leaveTo}
-        onAfterLeave={() => handleAfterLeave(key)}
-      >
-        {element}
-      </TransitionItem>
-    )
-  })
-
-  return h(config.tag, { ...htmlProps }, ...groupedChildren)
+    const groupedChildren = allEntries.map(({ key, element }) => {
+      const isInitial = initialKeys.has(key)
+      const isShowing = currentMap.has(key)
+
+      return (
+        <TransitionItem
+          show={() => isShowing}
+          appear={isInitial ? effectiveAppear : true}
+          timeout={effectiveTimeout}
+          enterStyle={config.enterStyle}
+          enterToStyle={config.enterToStyle}
+          enterTransition={config.enterTransition}
+          leaveStyle={config.leaveStyle}
+          leaveToStyle={config.leaveToStyle}
+          leaveTransition={config.leaveTransition}
+          enter={config.enter}
+          enterFrom={config.enterFrom}
+          enterTo={config.enterTo}
+          leave={config.leave}
+          leaveFrom={config.leaveFrom}
+          leaveTo={config.leaveTo}
+          onAfterLeave={() => handleAfterLeave(key)}
+        >
+          {element}
+        </TransitionItem>
+      )
+    })
+
+    return h(config.tag, { ...htmlProps }, ...groupedChildren)
+  }) as unknown as VNode
 }
 
 export default GroupRenderer