Type Transition with $$Props

But getting some cryptic errors

src/lib/components/transitions/TransitionChild.svelte

@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+  export type TTransitionChildProps<TAsProp extends SupportedAs> =
+    TPassThroughProps<{}, TAsProp> & {
+      enter?: string;
+      enterFrom?: string;
+      enterTo?: string;
+      entered?: string;
+      leave?: string;
+      leaveFrom?: string;
+      leaveTo?: string;
+      unmount?: boolean;
+      class?: string;
+    };
+</script>
+
 <script lang="ts">
   import { createEventDispatcher, onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -18,13 +33,15 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features, RenderStrategy } from "$lib/utils/Render.svelte";
+  import Render, {
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    Features,
-    "beforeEnter",
+    RenderStrategy,
-    "beforeLeave",
+    type TPassThroughProps,
-    "afterEnter",
+  } from "$lib/utils/Render.svelte";
-    "afterLeave",
+
-  ]);
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionChildProps<TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
@@ -37,6 +54,7 @@
   export let leaveFrom = "";
   export let leaveTo = "";
 
+  /***** Events *****/
   const dispatch = createEventDispatcher<{
     afterEnter: null;
     afterLeave: null;
@@ -44,6 +62,14 @@
     beforeLeave: null;
   }>();
 
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "beforeEnter",
+    "beforeLeave",
+    "afterEnter",
+    "afterLeave",
+  ]);
+
+  /***** Component *****/
   let container: HTMLElement | null = null;
 
   let transitionContext = useTransitionContext();

src/lib/components/transitions/TransitionChildWrapper.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { hasOpenClosed } from "$lib/internal/open-closed";
   import TransitionChild from "./TransitionChild.svelte";
-  import TransitionRoot from "./TransitionRoot.svelte";
+  import TransitionRoot, {
+    type TTransitionRootProps,
+  } from "./TransitionRoot.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
@@ -14,9 +16,17 @@
     "afterLeave",
   ]);
 
+  /***** Props *****/
+
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionRootProps<TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+
+  /***** Component *****/
   let hasTransition = hasTransitionContext();
   let hasOpen = hasOpenClosed();
 </script>

src/lib/components/transitions/TransitionRoot.svelte

@@ -1,9 +1,19 @@
+<script lang="ts" context="module">
+  export type TTransitionRootProps<TAsProp extends SupportedAs> =
+    TTransitionChildProps<TAsProp> & {
+      show?: boolean;
+      appear?: boolean;
+    };
+</script>
+
 <script lang="ts">
   import { onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import TransitionChild from "$lib/components/transitions/TransitionChild.svelte";
+  import TransitionChild, {
+    type TTransitionChildProps,
+  } from "$lib/components/transitions/TransitionChild.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
@@ -26,12 +36,18 @@
     "afterLeave",
   ]);
 
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionRootProps<TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let show: boolean | undefined = undefined;
   export let appear = false;
 
+  /***** Events *****/
+
+  /***** Component *****/
   let openClosedState = useOpenClosed();
 
   function computeShow(

src/routes/dialog/index.svelte

@@ -55,7 +55,7 @@
 {#if nested}
   <Nested on:close={() => (nested = false)} />
 {/if}
-<Transition show={isOpen} afterLeave={() => console.log("done")}>
+<Transition show={isOpen} on:afterLeave={() => console.log("done")}>
   <Dialog on:close={() => (isOpen = false)}>
     <div class="fixed z-10 inset-0 overflow-y-auto">
       <div