From 33a5dda473afc8777a22489b06d3b16fc75f10e6 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Sun, 29 Jun 2025 22:57:21 -0700
Subject: [PATCH 1/8] feat: :tada: Start work on modals

---
 src/lib/components/Modals.svelte    | 36 +++++++++++++++++++++++++++++
 src/lib/components/testmodal.svelte |  7 ++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/lib/components/Modals.svelte
 create mode 100644 src/lib/components/testmodal.svelte

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
new file mode 100644
index 00000000..eabf8619
--- /dev/null
+++ b/src/lib/components/Modals.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import type { Component } from "svelte"
+	import Testmodal from "./testmodal.svelte"
+
+    const stack: Modal<ModalData>[] = []
+
+    export type ModalData = null | Record<string, any>
+
+    export type ModalProps<Data extends ModalData = null> = {
+        modal: Modal<Data>,
+        data: Data
+    }
+
+    export type ModalComponent<Data extends ModalData> = Component<ModalProps<Data>>
+
+    export class Modal<Data extends ModalData> {
+
+        // This is a shortcut but we won't have types so precise as to require a Component
+        // type param so who gives a shit
+        readonly component: ModalComponent<Data>
+        readonly data: Data
+        canBeDismissedByUser: boolean = $state(true)
+        title: string | undefined = $state()
+
+        dismiss(byUser: boolean = false) {
+            // perf: we can probably just pop off the first item honestly no need for indexof but just in case
+        }
+
+        constructor(component: ModalComponent<Data>, data: Data) {
+            this.component = component, this.data = data
+        }
+
+    }
+
+    new Modal(Testmodal, null)
+</script>
\ No newline at end of file
diff --git a/src/lib/components/testmodal.svelte b/src/lib/components/testmodal.svelte
new file mode 100644
index 00000000..b3157c92
--- /dev/null
+++ b/src/lib/components/testmodal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { ModalProps } from "./Modals.svelte"
+
+    const { modal }: ModalProps = $props()
+    modal.title = "Test modal"
+
+</script>
\ No newline at end of file

From a107c226dbae4afdeea9427085cbff54829306ca Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 01:27:35 -0700
Subject: [PATCH 2/8] feat: :sparkles: introduce api, test things

---
 src/lib/components/Modals.svelte             | 113 ++++++++++++++++++-
 src/lib/components/testmodal.svelte          |   6 +-
 src/routes/(app)/(nonuser)/home/+page.svelte |   9 ++
 src/routes/(app)/+layout.svelte              |   5 +-
 4 files changed, 125 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index eabf8619..75b254d3 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -1,14 +1,15 @@
 <script module lang="ts">
 	import type { Component } from "svelte"
 	import Testmodal from "./testmodal.svelte"
+	import { fade, fly } from "svelte/transition"
+	import { circOut } from "svelte/easing"
 
-    const stack: Modal<ModalData>[] = []
+    const stack: Modal<any>[] = $state([])
 
     export type ModalData = null | Record<string, any>
 
     export type ModalProps<Data extends ModalData = null> = {
-        modal: Modal<Data>,
-        data: Data
+        modal: Modal<Data>
     }
 
     export type ModalComponent<Data extends ModalData> = Component<ModalProps<Data>>
@@ -22,15 +23,117 @@
         canBeDismissedByUser: boolean = $state(true)
         title: string | undefined = $state()
 
+        get inStack() {
+            return stack.includes(this)
+        }
+
+        get isOpen() {
+            return stack[0] === this 
+        }
+
+        /**
+         * Dismiss the modal
+         * @param byUser Whether or not this action was invoked by a user
+         */
         dismiss(byUser: boolean = false) {
+            // do we really need this? maybe we could remove this?
+            if (!this.canBeDismissedByUser && byUser)
+                return
             // perf: we can probably just pop off the first item honestly no need for indexof but just in case
+            stack.splice( stack.indexOf(this), 1 )
+            this.onDismissal?.(byUser)
         }
 
+        onDismissal?: (byUser: boolean) => void
+
         constructor(component: ModalComponent<Data>, data: Data) {
             this.component = component, this.data = data
+            stack.push(this)
         }
 
     }
+</script>
+<script lang="ts">
+    const modal = $derived(stack[0])
+    let backdrop: HTMLDivElement | undefined = $state()
+</script>
+<!--TODO (stretch goal): accessibility stuff -may-->
+<svelte:document onkeyup={(e) => {
+    if (e.key === "Escape" && modal?.canBeDismissedByUser)
+        modal.dismiss(true)
+}} />
+{#if modal}
+    <!-- 
+        svelte-ignore a11y_click_events_have_key_events 
+        We put the event listener on the document in this case, not
+        on the element, so this can be ignored.
+     -->
+    <!--
+        svelte-ignore a11y_no_static_element_interactions
+        This is but an alternate way to "tap out" of a modal, so I don't believe it's
+        necessary to give it a role, considering the modal div already has the dialog
+        role.
+    -->
+    <!-- cc @Jack5079 for general recommendations on accessibility? -->
+    <div class="modal-backdrop" onclick={(e) => e.target === backdrop && modal.canBeDismissedByUser && modal.dismiss(true)} transition:fade={{duration: 200, easing: circOut}} bind:this={backdrop}>
+        {#key modal}
+            <div class="modal" role="dialog" aria-modal="true" in:fly|global={{duration: 200, easing: circOut, y: "1em"}} out:fly|global={{duration: 200, easing: circOut, y: "-1em"}}>
+                {#if modal.title}
+                    <div class="modal-title">
+                        <h1>{modal.title}</h1>
+                        <button aria-label="Close dialog">
+                            
+                        </button>
+                    </div>
+                {/if}
+                <div class="modal-content">
+                    <modal.component {modal} />
+                </div>
+            </div>
+        {/key}
+    </div>
+{/if}
 
-    new Modal(Testmodal, null)
-</script>
\ No newline at end of file
+<style lang="scss">
+    .modal-backdrop {
+        background-color: var(--fg-color);
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 2em;
+        z-index: 100000000;
+        backdrop-filter: blur(4px);
+    }
+    .modal {
+        max-width: 100%;
+        background-color: var(--panel-bg-opaque);
+        display: flex;
+        flex-direction: column;
+        padding: var(--page-padding);
+        border-radius: var(--panel-border-radius);
+        border: 1px solid var(--attention);
+        position: absolute;
+        // can't use flex here due to how transitrions owrk
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 0px 0px 10px var(--panel-bg-highlight);
+        border: 1px solid var(--panel-stroke);
+
+        .modal-title {
+            display: flex;
+            gap: 1em;
+            flex-direction: row;
+            width: 100%;
+            align-items: center;
+            justify-content: space-between;
+            h1 {
+                font-size: 14pt;
+                margin: 0;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/testmodal.svelte b/src/lib/components/testmodal.svelte
index b3157c92..022ddcd4 100644
--- a/src/lib/components/testmodal.svelte
+++ b/src/lib/components/testmodal.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { ModalProps } from "./Modals.svelte"
 
-    const { modal }: ModalProps = $props()
+    const { modal }: ModalProps<{message: string}> = $props()
     modal.title = "Test modal"
 
-</script>
\ No newline at end of file
+</script>
+
+Hello world! I wanted to tell you this: {modal.data.message}
\ No newline at end of file
diff --git a/src/routes/(app)/(nonuser)/home/+page.svelte b/src/routes/(app)/(nonuser)/home/+page.svelte
index 54f4b902..23ab37a6 100644
--- a/src/routes/(app)/(nonuser)/home/+page.svelte
+++ b/src/routes/(app)/(nonuser)/home/+page.svelte
@@ -4,6 +4,8 @@
 	import Announcement from "$lib/components/generic/Announcement.svelte"
 	import Banner from "$lib/components/generic/Banner.svelte"
 	import Song from "$lib/components/generic/Song.svelte"
+	import { Modal } from "$lib/components/Modals.svelte"
+	import Testmodal from "$lib/components/testmodal.svelte"
 	
     import LL from "$lib/i18n/i18n-svelte";
 
@@ -37,6 +39,13 @@
         }}></Song>
     {/each}
 </div>
+<button onclick={() => {
+    new Modal(Testmodal, {message: "I'm #1!"});
+}}>Queue 1 modal</button>
+<button onclick={() => {
+    new Modal(Testmodal, {message: "I'm #1!"});
+    new Modal(Testmodal, {message: "I'm #2!"});
+}}>Queue 2 modals</button>
 <style lang="scss">
     .song-list {
         display: flex;
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index e4c2d2fd..a40a89e2 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -8,6 +8,7 @@
     
     import Navigator from "$lib/components/Navigator.svelte"
 	import type { Action } from "svelte/action"
+	import Modals from "$lib/components/Modals.svelte"
 </script>
 <!-- when setting the user's background image, add "page-background-image" class -->
 <div class="page-background"></div>
@@ -17,4 +18,6 @@
     <main>
         {@render children()}
     </main>
-</div>
\ No newline at end of file
+</div>
+
+<Modals />
\ No newline at end of file

From 1747a16b4ae647173e915de377f1c0efeb672632 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 02:51:42 -0700
Subject: [PATCH 3/8] feat: :lipstick: prettier transition also yo ucan have
 optional properties now

---
 src/lib/components/Modals.svelte             | 61 ++++++++++++++++----
 src/lib/components/testmodal.svelte          |  4 +-
 src/routes/(app)/(nonuser)/home/+page.svelte |  3 +
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index 75b254d3..d372c3af 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -1,24 +1,24 @@
 <script module lang="ts">
 	import type { Component } from "svelte"
-	import Testmodal from "./testmodal.svelte"
 	import { fade, fly } from "svelte/transition"
 	import { circOut } from "svelte/easing"
+    import dismiss from "@fluentui/svg-icons/icons/dismiss_20_filled.svg?raw"
 
-    const stack: Modal<any>[] = $state([])
+    const stack: Modal<any, any>[] = $state([])
 
     export type ModalData = null | Record<string, any>
 
     export type ModalProps<Data extends ModalData = null> = {
-        modal: Modal<Data>
+        modal: Modal<ModalComponent<Data>, Data>
     }
 
     export type ModalComponent<Data extends ModalData> = Component<ModalProps<Data>>
 
-    export class Modal<Data extends ModalData> {
+    export class Modal<Component extends ModalComponent<any>, Data extends ModalData> {
 
         // This is a shortcut but we won't have types so precise as to require a Component
         // type param so who gives a shit
-        readonly component: ModalComponent<Data>
+        readonly component: Component
         readonly data: Data
         canBeDismissedByUser: boolean = $state(true)
         title: string | undefined = $state()
@@ -46,12 +46,22 @@
 
         onDismissal?: (byUser: boolean) => void
 
-        constructor(component: ModalComponent<Data>, data: Data) {
+        constructor(component: Component, data: Data) {
             this.component = component, this.data = data
             stack.push(this)
         }
 
     }
+
+    const popin = (node: HTMLElement, params: { duration: number, easing: (t: number) => number, y: string, scale: number}, { direction }: { direction: "in" | "out" | "both" }) => {
+        const existing = getComputedStyle(node).transform.replace("none", "")
+
+        return {
+            duration: params.duration || 200,
+            easing: params.easing || circOut,
+            css: (t: number, u: number) => `transform: ${existing} scale(${params.scale + ((1-params.scale)*t)}) translateY(calc( ${params.y} * ${u} )); opacity: ${t}`
+        }
+    }
 </script>
 <script lang="ts">
     const modal = $derived(stack[0])
@@ -62,6 +72,19 @@
     if (e.key === "Escape" && modal?.canBeDismissedByUser)
         modal.dismiss(true)
 }} />
+<!-- this is like 2 lines so maybe this shouldn't be a snippet -->
+{#snippet closeButton(isSecretAndForAccessibilityOnlyEvenThoughYouCanJustHitEscape: boolean)}
+    {#if modal && modal.canBeDismissedByUser}    
+        <button
+            aria-label="Close dialog"
+            class="close-button secondary"
+            class:secret={isSecretAndForAccessibilityOnlyEvenThoughYouCanJustHitEscape}
+            onclick={() => modal.dismiss(true)}
+        >
+            {@html dismiss}
+        </button>
+    {/if}
+{/snippet}
 {#if modal}
     <!-- 
         svelte-ignore a11y_click_events_have_key_events 
@@ -77,14 +100,14 @@
     <!-- cc @Jack5079 for general recommendations on accessibility? -->
     <div class="modal-backdrop" onclick={(e) => e.target === backdrop && modal.canBeDismissedByUser && modal.dismiss(true)} transition:fade={{duration: 200, easing: circOut}} bind:this={backdrop}>
         {#key modal}
-            <div class="modal" role="dialog" aria-modal="true" in:fly|global={{duration: 200, easing: circOut, y: "1em"}} out:fly|global={{duration: 200, easing: circOut, y: "-1em"}}>
+            <div class="modal" role="dialog" aria-modal="true" in:popin|global={{duration: 200, easing: circOut, y: "1em", scale: 0.8}} out:popin|global={{duration: 200, easing: circOut, y: "-1em", scale: 0.8}}>
                 {#if modal.title}
                     <div class="modal-title">
                         <h1>{modal.title}</h1>
-                        <button aria-label="Close dialog">
-                            
-                        </button>
+                    {@render closeButton(false)}
                     </div>
+                {:else}
+                    {@render closeButton(true)}
                 {/if}
                 <div class="modal-content">
                     <modal.component {modal} />
@@ -116,12 +139,14 @@
         border-radius: var(--panel-border-radius);
         border: 1px solid var(--attention);
         position: absolute;
+        box-sizing: border-box;
         // can't use flex here due to how transitrions owrk
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         box-shadow: 0px 0px 10px var(--panel-bg-highlight);
         border: 1px solid var(--panel-stroke);
+        gap: .5em;
 
         .modal-title {
             display: flex;
@@ -136,4 +161,20 @@
             }
         }
     }
+    .close-button {
+        width: fit-content;
+        padding: 0.25em;
+        display: flex;
+    }
+    .close-button.secret {
+        position: absolute;
+        right: 100vw;
+        top: -100vh;
+        opacity: 0;
+        &:focus-visible {
+            opacity: 1;
+            right: 0px;
+            top: 0px;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/testmodal.svelte b/src/lib/components/testmodal.svelte
index 022ddcd4..6098d715 100644
--- a/src/lib/components/testmodal.svelte
+++ b/src/lib/components/testmodal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { ModalProps } from "./Modals.svelte"
 
-    const { modal }: ModalProps<{message: string}> = $props()
-    modal.title = "Test modal"
+    const { modal }: ModalProps<{message: string, title?: string}> = $props()
+    modal.title = modal.data.title ?? "Test modal"
 
 </script>
 
diff --git a/src/routes/(app)/(nonuser)/home/+page.svelte b/src/routes/(app)/(nonuser)/home/+page.svelte
index 23ab37a6..1129ce21 100644
--- a/src/routes/(app)/(nonuser)/home/+page.svelte
+++ b/src/routes/(app)/(nonuser)/home/+page.svelte
@@ -46,6 +46,9 @@
     new Modal(Testmodal, {message: "I'm #1!"});
     new Modal(Testmodal, {message: "I'm #2!"});
 }}>Queue 2 modals</button>
+<button onclick={() => {
+    new Modal(Testmodal, {message: "I'm #1!aaa", title: ""})
+}}>Queue modal no title</button>
 <style lang="scss">
     .song-list {
         display: flex;

From fb2265053cdf245ec18d309f3573f2dc5ced9d75 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 04:33:01 -0700
Subject: [PATCH 4/8] feat: :lipstick: animation tweaks

---
 src/lib/components/Modals.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index d372c3af..de36fff0 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -100,7 +100,7 @@
     <!-- cc @Jack5079 for general recommendations on accessibility? -->
     <div class="modal-backdrop" onclick={(e) => e.target === backdrop && modal.canBeDismissedByUser && modal.dismiss(true)} transition:fade={{duration: 200, easing: circOut}} bind:this={backdrop}>
         {#key modal}
-            <div class="modal" role="dialog" aria-modal="true" in:popin|global={{duration: 200, easing: circOut, y: "1em", scale: 0.8}} out:popin|global={{duration: 200, easing: circOut, y: "-1em", scale: 0.8}}>
+            <div class="modal" role="dialog" aria-modal="true" in:popin|global={{duration: 200, easing: circOut, y: "1em", scale: 0.8}} out:popin|global={{duration: 200, easing: circOut, y: stack.length === 0 ? "0em" : "-2em", scale: 0.9}}>
                 {#if modal.title}
                     <div class="modal-title">
                         <h1>{modal.title}</h1>

From eb36d5a6d92564848a053c26f2bf056087876cb9 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 04:42:25 -0700
Subject: [PATCH 5/8] feat: :sparkles: add data to dismiss

---
 src/lib/components/Modals.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index de36fff0..78ebfc9f 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -4,17 +4,17 @@
 	import { circOut } from "svelte/easing"
     import dismiss from "@fluentui/svg-icons/icons/dismiss_20_filled.svg?raw"
 
-    const stack: Modal<any, any>[] = $state([])
+    const stack: Modal<any, any, any>[] = $state([])
 
     export type ModalData = null | Record<string, any>
 
-    export type ModalProps<Data extends ModalData = null> = {
-        modal: Modal<ModalComponent<Data>, Data>
+    export type ModalProps<Data extends ModalData = null, ReturnType = undefined> = {
+        modal: Modal<ModalComponent<Data>, Data, ReturnType>
     }
 
     export type ModalComponent<Data extends ModalData> = Component<ModalProps<Data>>
 
-    export class Modal<Component extends ModalComponent<any>, Data extends ModalData> {
+    export class Modal<Component extends ModalComponent<any>, Data extends ModalData, ReturnType = undefined> {
 
         // This is a shortcut but we won't have types so precise as to require a Component
         // type param so who gives a shit
@@ -35,16 +35,16 @@
          * Dismiss the modal
          * @param byUser Whether or not this action was invoked by a user
          */
-        dismiss(byUser: boolean = false) {
+        dismiss(byUser: boolean = false, data?: ReturnType) {
             // do we really need this? maybe we could remove this?
             if (!this.canBeDismissedByUser && byUser)
                 return
             // perf: we can probably just pop off the first item honestly no need for indexof but just in case
             stack.splice( stack.indexOf(this), 1 )
-            this.onDismissal?.(byUser)
+            this.onDismissal?.(byUser, data)
         }
 
-        onDismissal?: (byUser: boolean) => void
+        onDismissal?: (byUser: boolean, data?: ReturnType) => void
 
         constructor(component: Component, data: Data) {
             this.component = component, this.data = data

From b64c6c6754496d4fde59e8fbf28efeb2b82a4297 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 04:51:08 -0700
Subject: [PATCH 6/8] feat: :lipstick: better modal titles

---
 src/lib/components/Modals.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index 78ebfc9f..c54e0462 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -158,6 +158,8 @@
             h1 {
                 font-size: 14pt;
                 margin: 0;
+                font-weight: 600;
+                font-stretch: 125%;
             }
         }
     }

From a1970263987d2a7b3cb4ad33e486f56b9a0a7915 Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 12:19:43 -0700
Subject: [PATCH 7/8] feat: :lipstick: transition tweaks

---
 src/lib/components/Modals.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index c54e0462..a288f12f 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import type { Component } from "svelte"
 	import { fade, fly } from "svelte/transition"
-	import { circOut } from "svelte/easing"
+	import { circInOut, circOut } from "svelte/easing"
     import dismiss from "@fluentui/svg-icons/icons/dismiss_20_filled.svg?raw"
 
     const stack: Modal<any, any, any>[] = $state([])
@@ -98,9 +98,13 @@
         role.
     -->
     <!-- cc @Jack5079 for general recommendations on accessibility? -->
-    <div class="modal-backdrop" onclick={(e) => e.target === backdrop && modal.canBeDismissedByUser && modal.dismiss(true)} transition:fade={{duration: 200, easing: circOut}} bind:this={backdrop}>
+    <div class="modal-backdrop" onclick={(e) => e.target === backdrop && modal.canBeDismissedByUser && modal.dismiss(true)} in:fade={{duration: 200, easing: circOut}} out:fade={{duration: 300, easing: circOut}} bind:this={backdrop}>
         {#key modal}
-            <div class="modal" role="dialog" aria-modal="true" in:popin|global={{duration: 200, easing: circOut, y: "1em", scale: 0.8}} out:popin|global={{duration: 200, easing: circOut, y: stack.length === 0 ? "0em" : "-2em", scale: 0.9}}>
+            <div class="modal" role="dialog" aria-modal="true" in:popin|global={{duration: 200, easing: circOut, y: "1em", scale: 0.8}} out:popin|global={
+                stack.length === 0
+                ? {duration: 300, easing: circOut, y: "0em", scale: 0.8}
+                : {duration: 200, easing: circOut, y: "-2em", scale: 0.9}
+            }>
                 {#if modal.title}
                     <div class="modal-title">
                         <h1>{modal.title}</h1>

From 8b49a2730d095b1ce297871a90627bfe8d91c63b Mon Sep 17 00:00:00 2001
From: May <split@split.pet>
Date: Wed, 2 Jul 2025 14:19:31 -0700
Subject: [PATCH 8/8] fix: :bug: fix types

these types are abhorrent @Jack5079 should i clean this up later or is this fine
---
 src/lib/components/Modals.svelte    | 16 ++++++++++------
 src/lib/components/testmodal.svelte |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Modals.svelte b/src/lib/components/Modals.svelte
index a288f12f..da2dbad9 100644
--- a/src/lib/components/Modals.svelte
+++ b/src/lib/components/Modals.svelte
@@ -4,18 +4,22 @@
 	import { circInOut, circOut } from "svelte/easing"
     import dismiss from "@fluentui/svg-icons/icons/dismiss_20_filled.svg?raw"
 
-    const stack: Modal<any, any, any>[] = $state([])
+    const stack: Modal<any, any>[] = $state([])
 
     export type ModalData = null | Record<string, any>
 
     export type ModalProps<Data extends ModalData = null, ReturnType = undefined> = {
-        modal: Modal<ModalComponent<Data>, Data, ReturnType>
+        modal: Modal<ModalComponent<Data, ReturnType>, Data>,
+        $INTERNAL_TYPE_HELPER_PROVIDING_RETURN_TYPE_DO_NOT_USE?: {t: ReturnType}
     }
 
-    export type ModalComponent<Data extends ModalData> = Component<ModalProps<Data>>
+    export type ModalComponent<Data extends ModalData, ReturnType = undefined> =
+        Component<ModalProps<Data, ReturnType>>
 
-    export class Modal<Component extends ModalComponent<any>, Data extends ModalData, ReturnType = undefined> {
+    type ReturnTypeForModal<Mdl extends Modal<any, any>> = Mdl extends Modal<infer Component, infer Data> ? Exclude<Parameters<Component>[1]["$INTERNAL_TYPE_HELPER_PROVIDING_RETURN_TYPE_DO_NOT_USE"], undefined>["t"] : never
 
+    export class Modal<Component extends ModalComponent<any, any>, Data extends ModalData> {
+        
         // This is a shortcut but we won't have types so precise as to require a Component
         // type param so who gives a shit
         readonly component: Component
@@ -35,7 +39,7 @@
          * Dismiss the modal
          * @param byUser Whether or not this action was invoked by a user
          */
-        dismiss(byUser: boolean = false, data?: ReturnType) {
+        dismiss(byUser: boolean = false, data?: ReturnTypeForModal<this>) {
             // do we really need this? maybe we could remove this?
             if (!this.canBeDismissedByUser && byUser)
                 return
@@ -44,7 +48,7 @@
             this.onDismissal?.(byUser, data)
         }
 
-        onDismissal?: (byUser: boolean, data?: ReturnType) => void
+        onDismissal?: (byUser: boolean, data?: ReturnTypeForModal<this>) => void
 
         constructor(component: Component, data: Data) {
             this.component = component, this.data = data
diff --git a/src/lib/components/testmodal.svelte b/src/lib/components/testmodal.svelte
index 6098d715..38c91908 100644
--- a/src/lib/components/testmodal.svelte
+++ b/src/lib/components/testmodal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ModalProps } from "./Modals.svelte"
 
-    const { modal }: ModalProps<{message: string, title?: string}> = $props()
+    const { modal }: ModalProps<{message: string, title?: string}, { hi: "hi" }> = $props()
     modal.title = modal.data.title ?? "Test modal"
 
 </script>