How to correctly type a custom element event bubbling on the imported component?

[haleksandre]

I tried a few things but each doesn't seem to type correctly.

// Melt types
export type EventHandler<T extends Event = Event> = (event: T) => void;
export type MeltEvent<E extends Event> = CustomEvent<{
    originalEvent: E;
}>;
export type MeltEventHandler<E extends Event> = EventHandler<Expand<Omit<MeltEvent<E>, 'initCustomEvent'>>>;

// Svelte DOM enhancement
declare module "svelte/elements" {
	// works for the button element
	export interface DOMAttributes {
		"on:m-click"?: MeltEventHandler<MouseEvent> | undefined | null;
	}

	// this work for the button element as well
	export interface HTMLButtonAttributes {
		"on:m-click": MeltEventHandler<MouseEvent> | undefined | null;
	}
}

// button.svelte
// this will correctly be typed as defined above
...
<button on:m-click on:m-click={(e) => void}>button</button>
...

// app.svelte
// On the component the type will be every possible Event (m-click: Event | MouseEvent | UIEvent | ClipboardEvent | CompositionEvent | FocusEvent | InputEvent | ... 11 more ... | SecurityPolicyViolationEvent)
)
...
<Button on:m-click={(e) => void}>

// Even if I declare the handler within the `script` tag with the `ComponentEvents` type it still defaults to a generic handler.
<script lang="ts">
// ...
const handler = async (e: ComponentEvents<Button>["m-click"]) => void);
// ...
</script>

I'm guessing that Svelte is defaulting the type of any on:${string} as a generic event handler. Is there a way to narrow the type such as when I use on:m-click on the Button component, it correctly assesses the type as it is in the declare module?