windmill-components 1.642.0 → 1.655.0

package/package/components/instanceSettings/IndexerMemorySettings.svelte

@@ -2,13 +2,44 @@
 import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 import { IndexSearchService } from '../../gen';
 import { sendUserToast } from '../../toast';
+import { displaySize } from '../../utils';
 import Tooltip from '../Tooltip.svelte';
 import IntegerInput from '../IntegerInput.svelte';
 import InputError from '../InputError.svelte';
 import Label from '../Label.svelte';
+import { Loader2, RefreshCw } from 'lucide-svelte';
 let { values, disabled = false, errors = {} } = $props();
 let clearJobsIndexModalOpen = $state(false);
 let clearServiceLogsIndexModalOpen = $state(false);
+let status = $state(undefined);
+let statusLoading = $state(true);
+let statusError = $state(false);
+function formatTimeAgo(isoDate) {
+    const diffMs = Date.now() - new Date(isoDate).getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    if (diffSecs < 60)
+        return `${diffSecs}s ago`;
+    const diffMins = Math.floor(diffSecs / 60);
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    return `${diffHours}h ago`;
+}
+async function loadStatus() {
+    statusLoading = true;
+    statusError = false;
+    try {
+        status = await IndexSearchService.getIndexerStatus();
+    }
+    catch (e) {
+        status = undefined;
+        statusError = true;
+    }
+    finally {
+        statusLoading = false;
+    }
+}
+loadStatus();
 </script>
 
 <div class="space-y-6">
@@ -42,30 +73,132 @@ let clearServiceLogsIndexModalOpen = $state(false);
 		/>
 		<InputError error={errors.writer_memory_budget ?? ''} />
 	</div>
+	<div class="flex flex-col gap-1">
+		<label for="max_index_time_window_secs" class="block text-xs font-semibold text-emphasis">
+			Index time window (days)
+			<Tooltip>
+				Maximum age of items to include in the index. Jobs and logs older than this window will not
+				be indexed and will be cleaned up from the index. Set to 0 to disable (index everything
+				within the retention period).
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="7"
+			id="max_index_time_window_secs"
+			{disabled}
+			error={errors.max_index_time_window_secs ?? ''}
+			value={$values['indexer_settings'].max_index_time_window_secs != null
+				? Math.round($values['indexer_settings'].max_index_time_window_secs / 86400)
+				: undefined}
+			oninput={(v) => {
+				if (v == null) {
+					const { max_index_time_window_secs: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						max_index_time_window_secs: v * 86400
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.max_index_time_window_secs ?? ''} />
+	</div>
+	<Label label="Indexer status">
+		{#snippet action()}
+			<button
+				onclick={loadStatus}
+				disabled={statusLoading}
+				class="inline-flex items-center text-secondary hover:text-primary disabled:opacity-50"
+			>
+				{#if statusLoading}
+					<Loader2 size={14} class="animate-spin" />
+				{:else}
+					<RefreshCw size={14} />
+				{/if}
+			</button>
+		{/snippet}
+		{#if status}
+			<div class="flex flex-col gap-2">
+				{#each [{ label: 'Job indexer', entry: status.job_indexer }, { label: 'Service log indexer', entry: status.log_indexer }] as { label, entry } (label)}
+					<div class="flex flex-row items-center gap-2 text-xs">
+						<span
+							class="inline-block w-2 h-2 rounded-full {entry?.is_alive
+								? 'bg-green-500'
+								: 'bg-red-500'}"
+						></span>
+						<span class="text-primary font-medium">{label}:</span>
+						<span class="font-semibold {entry?.is_alive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">
+							{entry?.is_alive ? 'Running' : 'Stopped'}
+						</span>
+						{#if entry?.last_locked_at}
+							<span class="text-tertiary text-2xs">
+								Last active: {formatTimeAgo(entry.last_locked_at)}
+							</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{:else if statusError && !statusLoading}
+			<span class="text-2xs text-secondary">
+				Could not fetch indexer status. Search may not be enabled in this build.
+			</span>
+		{/if}
+	</Label>
+	<Label label="Index storage">
+		{#if status}
+			<div class="flex flex-col gap-1 text-2xs text-tertiary">
+				<span>
+					Jobs index:
+					{#if status.job_indexer?.storage?.disk_size_bytes != null}
+						Disk: {displaySize(status.job_indexer.storage.disk_size_bytes) ?? 'N/A'}
+					{/if}
+					{#if status.job_indexer?.storage?.s3_size_bytes != null}
+						{#if status.job_indexer?.storage?.disk_size_bytes != null}&middot;{/if}
+						S3: {displaySize(status.job_indexer.storage.s3_size_bytes) ?? 'N/A'}
+					{/if}
+				</span>
+				<span>
+					Service logs index:
+					{#if status.log_indexer?.storage?.disk_size_bytes != null}
+						Disk: {displaySize(status.log_indexer.storage.disk_size_bytes) ?? 'N/A'}
+					{/if}
+					{#if status.log_indexer?.storage?.s3_size_bytes != null}
+						{#if status.log_indexer?.storage?.disk_size_bytes != null}&middot;{/if}
+						S3: {displaySize(status.log_indexer.storage.s3_size_bytes) ?? 'N/A'}
+					{/if}
+				</span>
+			</div>
+		{/if}
+	</Label>
 	<Label label="Clear index">
 		<span class="text-xs text-secondary"
-			>This buttons will clear the whole index, and the service will start reindexing from scratch.
+			>These buttons will clear the whole index, and the service will start reindexing from scratch.
 			Full text search might be down during this time.</span
 		>
-		<div class="flex flex-row gap-2">
-			<Button
-				variant="default"
-				unifiedSize="sm"
-				on:click={() => {
-					clearJobsIndexModalOpen = true
-				}}
-			>
-				Clear jobs index
-			</Button>
-			<Button
-				variant="default"
-				unifiedSize="sm"
-				on:click={() => {
-					clearServiceLogsIndexModalOpen = true
-				}}
-			>
-				Clear service logs index
-			</Button>
+		<div class="flex flex-col gap-3">
+			<div class="flex flex-row items-center gap-2">
+				<Button
+					variant="default"
+					unifiedSize="sm"
+					onclick={() => {
+						clearJobsIndexModalOpen = true
+					}}
+				>
+					Clear jobs index
+				</Button>
+			</div>
+			<div class="flex flex-row items-center gap-2">
+				<Button
+					variant="default"
+					unifiedSize="sm"
+					onclick={() => {
+						clearServiceLogsIndexModalOpen = true
+					}}
+				>
+					Clear service logs index
+				</Button>
+			</div>
 		</div>
 	</Label>
 	<ConfirmationModal

package/package/components/instanceSettings.js

@@ -20,7 +20,8 @@ const indexerSettingsSchema = z
     refresh_index_period: positiveNumber.optional(),
     max_indexed_job_log_size: positiveNumber.optional(),
     commit_log_max_batch_size: positiveNumber.optional(),
-    refresh_log_index_period: positiveNumber.optional()
+    refresh_log_index_period: positiveNumber.optional(),
+    max_index_time_window_secs: positiveNumber.optional()
 })
     .passthrough();
 function validateIndexerSettings(v) {
@@ -73,6 +74,18 @@ export const settings = {
                     !value?.endsWith('/') &&
                     !value?.endsWith(' '))
         },
+        {
+            label: 'Email domain',
+            description: 'Domain to display in webhooks for email triggers (should match the MX record)',
+            key: 'email_domain',
+            fieldType: 'text',
+            placeholder: 'mail.windmill.com',
+            storage: 'setting',
+            error: 'Must be a valid domain',
+            isValid: (value) => value == undefined ||
+                value === '' ||
+                /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?)*$/.test(value)
+        },
         {
             label: 'Request size limit in MB',
             description: 'Maximum size of HTTP requests in MB.',
@@ -107,6 +120,16 @@ export const settings = {
             storage: 'setting',
             ee_only: '',
             hideInQuickSetup: true
+        },
+        {
+            label: 'Audit log retention (days)',
+            key: 'audit_log_retention_days',
+            description: 'How long to keep audit log entries in the database. Default: 365 days.',
+            fieldType: 'number',
+            placeholder: '365',
+            storage: 'setting',
+            ee_only: '',
+            hideInQuickSetup: true
         }
     ],
     Jobs: [
@@ -143,7 +166,6 @@ export const settings = {
             label: 'Max timeout for sync endpoints',
             description: 'Maximum amount of time (measured in seconds) that a <a href="https://www.windmill.dev/docs/core_concepts/webhooks">sync endpoint</a> is allowed to run before it is forcibly stopped or timed out.',
             key: 'timeout_wait_result',
-            cloudonly: true,
             fieldType: 'seconds',
             placeholder: '60',
             storage: 'setting'
@@ -239,6 +261,15 @@ export const settings = {
             storage: 'setting',
             ee_only: '',
             hiddenIfEmpty: true
+        },
+        {
+            label: 'Disable Hub',
+            description: 'Disable the Windmill Hub integration entirely. Enable this if your instance runs in a closed environment without internet access and you do not have a private hub setup.',
+            key: 'disable_hub',
+            fieldType: 'boolean',
+            storage: 'setting',
+            ee_only: '',
+            requiresReloadOnChange: true
         }
     ],
     SMTP: [
@@ -358,7 +389,7 @@ export const settings = {
         },
         {
             label: 'Nuget Config',
-            description: 'Write a nuget.config file to set custom package sources and credentials',
+            description: 'Write a nuget.config file to set custom package sources and credentials. Use <clear /> inside <packageSources> to remove default sources and only use your custom ones',
             key: 'nuget_config',
             fieldType: 'codearea',
             codeAreaLang: 'xml',
@@ -462,6 +493,14 @@ export const settings = {
             requiresReloadOnChange: true,
             ee_only: 'Critical alerts in UI are only available in the EE version'
         },
+        {
+            label: 'Alert on token expiry',
+            description: 'Send critical alerts when API tokens are about to expire (within 7 days) or have expired',
+            key: 'critical_alerts_on_token_expiry',
+            fieldType: 'boolean',
+            storage: 'setting',
+            ee_only: ''
+        },
         {
             label: 'Slack',
             key: 'slack',
@@ -516,11 +555,10 @@ export const settings = {
     ],
     Telemetry: [
         {
-            label: 'Disable telemetry',
+            label: 'Minimal telemetry',
             key: 'disable_stats',
             fieldType: 'boolean',
-            storage: 'setting',
-            hiddenInEe: true
+            storage: 'setting'
         }
     ],
     'Secret Storage': [

package/package/components/meltComponents/MeltButton.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">import {} from '@melt-ui/svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
-export let aiId = undefined;
-export let aiDescription = undefined;
-export let meltElement = undefined;
-export let type = undefined;
-export let title = '';
-export let id = undefined;
-let buttonRef = undefined;
+let { aiId = undefined, aiDescription = undefined, meltElement = undefined, type = undefined, title = '', id = undefined, class: className = '', children, onClick } = $props();
+let buttonRef = $state(undefined);
 </script>
 
 <button
@@ -20,12 +15,12 @@ let buttonRef = undefined;
 			buttonRef?.click()
 		}
 	}}
-	class={$$props.class}
+	class={className}
 	{type}
 	{title}
 	{id}
 	{...$meltElement}
-	on:click
+	onclick={onClick}
 >
-	<slot />
+	{@render children?.()}
 </button>

package/package/components/meltComponents/MeltButton.svelte.d.ts

@@ -1,38 +1,15 @@
 import { type AnyMeltElement } from '@melt-ui/svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const MeltButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    aiId?: string | undefined | undefined;
-    aiDescription?: string | undefined | undefined;
+interface Props {
+    aiId?: string | undefined;
+    aiDescription?: string | undefined;
     meltElement?: AnyMeltElement | undefined;
-    type?: "button" | "submit" | "reset" | null | undefined | undefined;
-    title?: string | undefined;
-    id?: string | undefined | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type MeltButton = InstanceType<typeof MeltButton>;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    title?: string;
+    id?: string | undefined;
+    class?: string;
+    children?: import('svelte').Snippet;
+    onClick?: (event: MouseEvent) => void;
+}
+declare const MeltButton: import("svelte").Component<Props, {}, "">;
+type MeltButton = ReturnType<typeof MeltButton>;
 export default MeltButton;

package/package/components/meltComponents/Menu.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">import { createBubbler } from 'svelte/legacy';
+<script lang="ts">import { untrack } from 'svelte';
+import { createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { melt, createSync } from '@melt-ui/svelte';
 import { pointerDownOutside } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import ResolveOpen from '../common/menu/ResolveOpen.svelte';
+import { watch } from 'runed';
 let { placement = 'right-start', justifyEnd = false, lightMode = false, maxHeight = 900, disabled = false, createMenu, invisible = false, usePointerDownOutside = false, menuClass = '', open = $bindable(false), renderContent = false, class: classNames = '', triggr, children } = $props();
 // Use the passed createMenu function
-const menu = createMenu({
+const menu = untrack(() => createMenu)({
     positioning: {
-        placement,
+        placement: untrack(() => placement),
         fitViewport: true,
         strategy: 'fixed'
     },
@@ -17,9 +19,7 @@ const menu = createMenu({
 //Melt
 const { elements: { trigger, menu: menuElement, item }, states } = menu;
 const sync = createSync(states);
-$effect(() => {
-    sync.open(open, (v) => (open = Boolean(v)));
-});
+watch(() => open, () => sync.open(open, (v) => (open = Boolean(v))));
 export function close() {
     open = false;
 }

package/package/components/meltComponents/Menu.svelte.d.ts

@@ -31,8 +31,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const Menu: $$__sveltets_2_IsomorphicComponent<Props, {
-    open: CustomEvent<any>;
-    close: CustomEvent<any>;
+    open: CustomEvent<void>;
+    close: CustomEvent<void>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package/components/meltComponents/Menubar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { createMenubar, melt } from '@melt-ui/svelte';
 const { elements: { menubar }, builders: { createMenu } } = createMenubar();
+let { class: className = '', children } = $props();
 </script>
 
-<div {...$menubar} use:$menubar.action class={$$props.class}>
-	<slot {createMenu} />
+<div {...$menubar} use:$menubar.action class={className}>
+	{@render children?.({ createMenu, })}
 </div>

package/package/components/meltComponents/Menubar.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet<[any]>;
+}
+declare const Menubar: import("svelte").Component<Props, {}, "">;
+type Menubar = ReturnType<typeof Menubar>;
+export default Menubar;

package/package/components/meltComponents/Popover.svelte

@@ -1,66 +1,41 @@
-<script context="module" lang="ts">import { writable } from 'svelte/store';
+<script module lang="ts">import { writable } from 'svelte/store';
 const activePopover = writable({
     id: null,
     close: null
 });
 </script>
 
-<script lang="ts">import { createPopover, createSync, melt } from '@melt-ui/svelte';
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { createPopover, createSync, melt } from '@melt-ui/svelte';
 import { fly } from 'svelte/transition';
 import { X, Minimize2, Maximize2 } from 'lucide-svelte';
 import { debounce, pointerDownOutside } from '../../utils';
 import { twMerge } from 'tailwind-merge';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { Button } from '../common';
 import DocLink from '../apps/editor/settingsPanel/DocLink.svelte';
-export let closeButton = false;
-export let displayArrow = false;
-export let placement = 'bottom';
-export let disablePopup = false;
-export let openOnHover = false;
-export let debounceDelay = 0;
-export let floatingConfig = undefined;
-export let usePointerDownOutside = false;
-export let closeOnOutsideClick = true;
-export let contentClasses = '';
-export let contentStyle = '';
-export let portal = 'body';
-export let closeOnOtherPopoverOpen = false;
-export let allowFullScreen = false;
-export let extraProps = {};
-export let disabled = false;
-export let documentationLink = undefined;
-export let disableFocusTrap = false;
-export let openFocus = undefined;
-export let escapeBehavior = 'close';
-export let enableFlyTransition = false;
-export let onKeyDown = () => { };
-export let onClose = () => { };
-/**
- * If provided, the popover will only open if the click is on the element with the given id.
- */
-export let targetId = undefined;
-/**
- * Additional CSS selectors whose matching elements should be excluded from outside-click detection.
- */
-export let excludeSelectors = undefined;
-let fullScreen = false;
+let fullScreen = $state(false);
 const dispatch = createEventDispatcher();
-// Dynamic portal: use 'body' when fullscreen, otherwise use the provided portal
-$: dynamicPortal = fullScreen ? 'body' : portal;
 function clearTimers() {
     clearDebounceClose();
 }
 // Cleanup timers on component destruction
 import { onDestroy } from 'svelte';
+import { onCustomEvent } from '../../svelte5Utils.svelte';
+import { watch } from 'runed';
 onDestroy(clearTimers);
-const { elements: { trigger, content, arrow, close: closeElement, overlay }, states, options: { closeOnOutsideClick: closeOnOutsideClickOption, positioning, portal: portalOption }, ids: { content: popoverId } } = createPopover({
+let { closeButton = false, displayArrow = false, placement = 'bottom', disablePopup = false, openOnHover = false, debounceDelay = 0, floatingConfig = undefined, usePointerDownOutside = false, closeOnOutsideClick = true, contentClasses = '', contentStyle = '', portal = 'body', closeOnOtherPopoverOpen = false, allowFullScreen = false, extraProps = {}, disabled = false, documentationLink = undefined, disableFocusTrap = false, openFocus = undefined, escapeBehavior = 'close', enableFlyTransition = false, onKeyDown = () => { }, onClose = () => { }, class: className = '', targetId = undefined, excludeSelectors = undefined, isOpen = $bindable(false), trigger, content } = $props();
+// Dynamic portal: use 'body' when fullscreen, otherwise use the provided portal
+let dynamicPortal = $derived(fullScreen ? 'body' : portal);
+const { elements: { trigger: _trigger, content: _content, arrow, close: closeElement, overlay }, states, options: { closeOnOutsideClick: closeOnOutsideClickOption, positioning, portal: portalOption }, ids: { content: popoverId } } = createPopover({
     forceVisible: true,
-    portal: dynamicPortal,
-    disableFocusTrap,
-    escapeBehavior,
-    openFocus,
+    portal: untrack(() => dynamicPortal),
+    disableFocusTrap: untrack(() => disableFocusTrap),
+    escapeBehavior: untrack(() => escapeBehavior),
+    openFocus: untrack(() => openFocus),
     onOpenChange: ({ curr, next }) => {
+        console.log('Popover open state changed:', { curr, next });
         if (curr != next) {
             dispatch('openChange', next);
             if (!next) {
@@ -86,8 +61,8 @@ const { elements: { trigger, content, arrow, close: closeElement, overlay }, sta
         return next;
     }
 });
-$positioning = floatingConfig ?? {
-    placement,
+$positioning = untrack(() => floatingConfig) ?? {
+    placement: untrack(() => placement),
     strategy: 'absolute',
     gutter: 8,
     overflowPadding: 16,
@@ -95,15 +70,7 @@ $positioning = floatingConfig ?? {
     fitViewport: true,
     overlap: false
 };
-// Update portal reactively when fullscreen state changes
-$: if (portalOption) {
-    $portalOption = dynamicPortal;
-}
-export let isOpen = false;
 const sync = createSync(states);
-$: sync.open(isOpen, (v) => (isOpen = v));
-// Allow for dynamic closeOnOutsideClick
-$: $closeOnOutsideClickOption = usePointerDownOutside ? false : closeOnOutsideClick;
 export function close() {
     isOpen = false;
 }
@@ -119,12 +86,10 @@ export function updatePositioning(pos) {
     }
 }
 async function getMenuElements() {
-    const selector = excludeSelectors
-        ? `[data-popover], ${excludeSelectors}`
-        : '[data-popover]';
+    const selector = excludeSelectors ? `[data-popover], ${excludeSelectors}` : '[data-popover]';
     return Array.from(document.querySelectorAll(selector));
 }
-let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce(() => openOnHover && close(), debounceDelay);
+let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce(() => openOnHover && close(), untrack(() => debounceDelay));
 const handleClick = (event) => {
     if (targetId) {
         const target = event.detail.originalEvent.target;
@@ -136,38 +101,49 @@ const handleClick = (event) => {
         }
     }
 };
+// Update portal reactively when fullscreen state changes
+$effect(() => {
+    if (portalOption) {
+        $portalOption = dynamicPortal;
+    }
+});
+watch(() => isOpen, () => sync.open(isOpen, (v) => (isOpen = v)));
+// Allow for dynamic closeOnOutsideClick
+$effect(() => {
+    $closeOnOutsideClickOption = usePointerDownOutside ? false : closeOnOutsideClick;
+});
 </script>
 
 <svelte:window onkeydown={(e) => isOpen && onKeyDown(e)} />
 
 <button
-	class={$$props.class}
-	{...$trigger} use:$trigger.action
+	class={className}
+	{...$_trigger} use:$_trigger.action
 	aria-label="Popup button"
 	disabled={disablePopup || disabled}
-	on:mouseenter={() => {
+	onmouseenter={() => {
 		if (openOnHover) {
 			open()
 			clearDebounceClose()
 		}
 	}}
-	on:mouseleave={debounceClose}
+	onmouseleave={debounceClose}
 	use:pointerDownOutside={{
 		capture: true,
 		stopPropagation: false,
-		exclude: getMenuElements
-	}}
-	on:pointerdown_outside={() => {
-		if (usePointerDownOutside) {
-			if (fullScreen) fullScreen = false
-			else close()
+		exclude: getMenuElements,
+		onClickOutside: () => {
+			if (usePointerDownOutside) {
+				if (fullScreen) fullScreen = false
+				else close()
+			}
 		}
 	}}
 	data-popover
-	on:m-click={handleClick}
-	on:click
+	use:onCustomEvent={{ event: 'm-click', handler: handleClick }}
+	onclick={bubble('click')}
 >
-	<slot name="trigger" {isOpen} />
+	{@render trigger?.({ isOpen })}
 </button>
 
 {#if fullScreen && isOpen && !disablePopup}
@@ -176,14 +152,14 @@ const handleClick = (event) => {
 
 {#if isOpen && !disablePopup}
 	<div
-		on:mouseenter={() => {
+		onmouseenter={() => {
 			if (openOnHover) {
 				open()
 				clearDebounceClose()
 			}
 		}}
-		on:mouseleave={debounceClose}
-		{...$content} use:$content.action
+		onmouseleave={debounceClose}
+		{...$_content} use:$_content.action
 		transition:fly={{ duration: enableFlyTransition ? 100 : 0, y: -16 }}
 		class={twMerge(
 			'relative dark:border rounded-md bg-surface-tertiary shadow-lg',
@@ -223,7 +199,7 @@ const handleClick = (event) => {
 			</button>
 		{/if}
 
-		<slot name="content" {open} {close} />
+		{@render content?.({ open, close })}
 	</div>
 {/if}