@insymetri/styleguide 0.1.35 → 0.1.37

package/dist/IIDropdownMenu/IIDropdownMenuSubSimple.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
+	import {useFloating, portal} from '../utils/menu'
+
+	type Props = {
+		items: MenuEntry[]
+		onSelect: (value: string) => void
+		onClose: () => void
+		triggerEl: HTMLElement | null
+		renderItemContent: Snippet<[MenuItem]>
+		renderSubMenu: Snippet<[SubEntry]>
+	}
+
+	let {
+		items,
+		onSelect,
+		onClose,
+		triggerEl,
+		renderItemContent,
+		renderSubMenu,
+	}: Props = $props()
+
+	let floatingEl = $state<HTMLElement | null>(null)
+
+	useFloating({
+		reference: () => triggerEl,
+		floating: () => floatingEl,
+		placement: 'right-start',
+		offset: 4,
+	})
+
+	function activate() {
+		requestAnimationFrame(() => {
+			const first = floatingEl?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+			first?.focus()
+		})
+	}
+
+	function getMenuItems(): HTMLElement[] {
+		if (!floatingEl) return []
+		return Array.from(floatingEl.querySelectorAll<HTMLElement>(':scope > [role="menuitem"]:not([data-disabled]), :scope > [role="group"] > [role="menuitem"]:not([data-disabled])'))
+	}
+
+	function focusItem(items: HTMLElement[], currentIndex: number, direction: 1 | -1) {
+		if (items.length === 0) return
+		const nextIndex = direction === 1
+			? (currentIndex >= items.length - 1 ? 0 : currentIndex + 1)
+			: (currentIndex <= 0 ? items.length - 1 : currentIndex - 1)
+		items[nextIndex]?.focus()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		const menuItems = getMenuItems()
+		const currentIndex = menuItems.indexOf(document.activeElement as HTMLElement)
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault()
+				focusItem(menuItems, currentIndex, 1)
+				break
+			case 'ArrowUp':
+				e.preventDefault()
+				focusItem(menuItems, currentIndex, -1)
+				break
+			case 'ArrowLeft':
+			case 'Escape':
+				e.preventDefault()
+				onClose()
+				break
+			case 'Enter':
+			case ' ':
+				e.preventDefault()
+				;(document.activeElement as HTMLElement)?.click()
+				break
+		}
+	}
+</script>
+
+<div use:portal>
+	<div
+		bind:this={floatingEl}
+		role="menu"
+		data-menu-content
+		class={menuStyles.subContent}
+		onkeydown={handleKeydown}
+		onpointerenter={() => activate()}
+		onpointerleave={(e) => e.stopImmediatePropagation()}
+	>
+		{#each items as entry, i (i)}
+			{#if isSeparator(entry)}
+				<div role="separator" class={menuStyles.separator}></div>
+			{:else if isGroup(entry)}
+				{@const headingId = `dd-sub-simple-group-${i}`}
+				<div role="group" aria-labelledby={entry.heading ? headingId : undefined}>
+					{#if entry.heading}
+						<div id={headingId} role="presentation" class={menuStyles.groupHeading}>
+							{entry.heading}
+						</div>
+					{/if}
+					{#each entry.items as groupItem (isItem(groupItem) ? groupItem.value : groupItem.label)}
+						{#if isSub(groupItem)}
+							{@render renderSubMenu(groupItem)}
+						{:else if isItem(groupItem)}
+							<div
+								role="menuitem"
+								tabindex="-1"
+								data-disabled={groupItem.disabled ? '' : undefined}
+								class={menuItemClass({variant: groupItem.variant})}
+								onclick={() => onSelect(groupItem.value)}
+								onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+							>
+								{@render renderItemContent(groupItem)}
+							</div>
+						{/if}
+					{/each}
+				</div>
+			{:else if isSub(entry)}
+				{@render renderSubMenu(entry)}
+			{:else if isItem(entry)}
+				<div
+					role="menuitem"
+					tabindex="-1"
+					data-disabled={entry.disabled ? '' : undefined}
+					class={menuItemClass({variant: entry.variant})}
+					onclick={() => onSelect(entry.value)}
+					onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+				>
+					{@render renderItemContent(entry)}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>

package/dist/IIDropdownMenu/IIDropdownMenuSubSimple.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type MenuItem, type MenuEntry, type SubEntry } from '../utils/menu';
+type Props = {
+    items: MenuEntry[];
+    onSelect: (value: string) => void;
+    onClose: () => void;
+    triggerEl: HTMLElement | null;
+    renderItemContent: Snippet<[MenuItem]>;
+    renderSubMenu: Snippet<[SubEntry]>;
+};
+declare const IIDropdownMenuSubSimple: import("svelte").Component<Props, {}, "">;
+type IIDropdownMenuSubSimple = ReturnType<typeof IIDropdownMenuSubSimple>;
+export default IIDropdownMenuSubSimple;

package/dist/style/colors.css

@@ -212,7 +212,7 @@
 	--ii-inspector-keyword: #569cd6;
 
 	/* Radius */
-	--ii-radius-control: 9999px;
+	--ii-radius-control: 8px;
 
 	/* Misc */
 	--ii-error-dark: #dc2626;

package/dist/style/tailwind/animations.js

@@ -63,7 +63,7 @@ export const keyframes = {
 export const animation = {
     spin: 'spin 0.6s linear infinite',
     'fade-in': 'fadeIn 200ms ease-out',
-    'scale-in': 'scaleIn 200ms ease-out',
+    'scale-in': 'scaleIn 120ms ease-out',
     'slide-in': 'slideIn 150ms ease-out',
     shake: 'shake 0.4s ease-out',
     shimmer: 'shimmer 1.5s infinite',

package/dist/style/tailwind/shadows.d.ts

@@ -5,6 +5,7 @@ export declare const boxShadow: {
     card: string;
     'card-hover': string;
     dropdown: string;
+    submenu: string;
     modal: string;
     drawer: string;
     toast: string;

package/dist/style/tailwind/shadows.js

@@ -9,7 +9,9 @@ export const boxShadow = {
     // Card hover / raised state
     'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
     // Dropdown menus, popovers, comboboxes, date pickers
-    dropdown: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    dropdown: '0 6px 18px rgba(0, 0, 0, 0.02), 0 3px 9px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04)',
+    // Submenu / nested floating panels
+    submenu: '0 9px 48px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.04)',
     // Modal dialogs
     modal: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     // Side drawers / floating panels

package/dist/utils/menu/MenuItemContent.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+
+	type Props = {
+		icon?: Snippet
+		label: string
+		shortcut?: string
+	}
+
+	let {icon, label, shortcut}: Props = $props()
+</script>
+
+{#if icon}
+	<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
+		{@render icon()}
+	</div>
+{/if}
+<span class="flex-1">{label}</span>
+{#if shortcut}
+	<span class="text-tiny text-tertiary ml-8">{shortcut}</span>
+{/if}

package/dist/utils/menu/MenuItemContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    icon?: Snippet;
+    label: string;
+    shortcut?: string;
+};
+declare const MenuItemContent: import("svelte").Component<Props, {}, "">;
+type MenuItemContent = ReturnType<typeof MenuItemContent>;
+export default MenuItemContent;

package/dist/utils/menu/MenuNoResults.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div class="px-12 py-8 text-small text-tertiary select-none">No results</div>

package/dist/utils/menu/MenuNoResults.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MenuNoResults: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MenuNoResults = InstanceType<typeof MenuNoResults>;
+export default MenuNoResults;

package/dist/utils/menu/MenuSearchInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	type Props = {
+		inputEl?: HTMLInputElement | null
+		searchQuery?: string
+		placeholder?: string
+		onkeydown: (e: KeyboardEvent) => void
+	}
+
+	let {
+		inputEl = $bindable(null),
+		searchQuery = $bindable(''),
+		placeholder = 'Search...',
+		onkeydown,
+	}: Props = $props()
+</script>
+
+<div class="-mx-4 -mt-4 px-14 mb-4 border-b-[0.5px] border-dropdown-border">
+	<input
+		bind:this={inputEl}
+		bind:value={searchQuery}
+		{placeholder}
+		class="w-full h-36 bg-transparent text-small text-body placeholder:text-tertiary outline-none border-none p-0"
+		{onkeydown}
+	/>
+</div>

package/dist/utils/menu/MenuSearchInput.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    inputEl?: HTMLInputElement | null;
+    searchQuery?: string;
+    placeholder?: string;
+    onkeydown: (e: KeyboardEvent) => void;
+};
+declare const MenuSearchInput: import("svelte").Component<Props, {}, "inputEl" | "searchQuery">;
+type MenuSearchInput = ReturnType<typeof MenuSearchInput>;
+export default MenuSearchInput;

package/dist/utils/menu/index.d.ts

@@ -0,0 +1,8 @@
+export { default as MenuSearchInput } from './MenuSearchInput.svelte';
+export { default as MenuNoResults } from './MenuNoResults.svelte';
+export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { menuStyles, menuItemClass } from './menu-styles';
+export { portal } from './use-portal';
+export { clickOutside } from './use-click-outside';
+export { useFloating } from './use-floating.svelte';
+export { createMenuSearch, filterMenuItems, getSelectableItems, isItem, isGroup, isSub, isSeparator, type MenuItem, type MenuEntry, type SubEntry, type SeparatorEntry, type GroupEntry, } from './menu-search.svelte';

package/dist/utils/menu/index.js

@@ -0,0 +1,8 @@
+export { default as MenuSearchInput } from './MenuSearchInput.svelte';
+export { default as MenuNoResults } from './MenuNoResults.svelte';
+export { default as MenuItemContent } from './MenuItemContent.svelte';
+export { menuStyles, menuItemClass } from './menu-styles';
+export { portal } from './use-portal';
+export { clickOutside } from './use-click-outside';
+export { useFloating } from './use-floating.svelte';
+export { createMenuSearch, filterMenuItems, getSelectableItems, isItem, isGroup, isSub, isSeparator, } from './menu-search.svelte';

package/dist/utils/menu/menu-search.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+export type MenuItem = {
+    label: string;
+    value: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    variant?: 'default' | 'destructive';
+    shortcut?: string;
+};
+export type SeparatorEntry = {
+    type: 'separator';
+};
+export type GroupEntry = {
+    type: 'group';
+    heading?: string;
+    items: (MenuItem | SubEntry)[];
+};
+export type SubEntry = {
+    type: 'sub';
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    shortcut?: string;
+    items: MenuEntry[];
+    searchable?: boolean;
+    searchPlaceholder?: string;
+};
+export type MenuEntry = MenuItem | SeparatorEntry | GroupEntry | SubEntry;
+export declare function isSeparator(entry: MenuEntry): entry is SeparatorEntry;
+export declare function isGroup(entry: MenuEntry): entry is GroupEntry;
+export declare function isSub(entry: MenuEntry): entry is SubEntry;
+export declare function isItem(entry: MenuEntry): entry is MenuItem;
+export declare function filterMenuItems(entries: MenuEntry[], query: string): MenuEntry[];
+export declare function getSelectableItems(entries: MenuEntry[]): MenuItem[];
+export declare function createMenuSearch(opts: {
+    getItems: () => MenuEntry[];
+    onSelect: (value: string) => void;
+    /** Extra keys to pass through (not stopPropagation). Escape always passes through. */
+    passthroughKeys?: string[];
+}): {
+    searchQuery: string;
+    readonly highlightedIndex: number;
+    inputEl: HTMLInputElement | null;
+    readonly filteredItems: MenuEntry[];
+    readonly selectableItems: MenuItem[];
+    reset: () => void;
+    focusInput: () => void;
+    resetAndFocus: () => void;
+    getItemIndex: (item: MenuItem) => number;
+    handleKeydown: (e: KeyboardEvent, containerSelector: string) => void;
+    setHighlight: (index: number) => void;
+    refocusInput: (e: FocusEvent) => void;
+};

package/dist/utils/menu/menu-search.svelte.js

@@ -0,0 +1,138 @@
+export function isSeparator(entry) {
+    return 'type' in entry && entry.type === 'separator';
+}
+export function isGroup(entry) {
+    return 'type' in entry && entry.type === 'group';
+}
+export function isSub(entry) {
+    return 'type' in entry && entry.type === 'sub';
+}
+export function isItem(entry) {
+    return !('type' in entry);
+}
+export function filterMenuItems(entries, query) {
+    if (!query)
+        return entries;
+    const lowerQuery = query.toLowerCase();
+    const filtered = [];
+    for (const entry of entries) {
+        if (isSeparator(entry)) {
+            filtered.push(entry);
+        }
+        else if (isGroup(entry)) {
+            const filteredGroupItems = entry.items.filter(item => isSub(item) || item.label.toLowerCase().includes(lowerQuery));
+            if (filteredGroupItems.length > 0) {
+                filtered.push({ ...entry, items: filteredGroupItems });
+            }
+        }
+        else if (isSub(entry)) {
+            // Sub entries are not filtered by search — they don't appear in searchable panels
+            filtered.push(entry);
+        }
+        else if (isItem(entry)) {
+            if (entry.label.toLowerCase().includes(lowerQuery)) {
+                filtered.push(entry);
+            }
+        }
+    }
+    // Remove leading/trailing/consecutive separators
+    return filtered.filter((entry, i, arr) => {
+        if (!isSeparator(entry))
+            return true;
+        if (i === 0 || i === arr.length - 1)
+            return false;
+        return !isSeparator(arr[i - 1]);
+    });
+}
+export function getSelectableItems(entries) {
+    const result = [];
+    for (const entry of entries) {
+        if (isItem(entry) && !entry.disabled) {
+            result.push(entry);
+        }
+        else if (isGroup(entry)) {
+            for (const item of entry.items) {
+                if (isItem(item) && !item.disabled)
+                    result.push(item);
+            }
+        }
+    }
+    return result;
+}
+export function createMenuSearch(opts) {
+    let searchQuery = $state('');
+    let highlightedIndex = $state(0);
+    let inputEl = $state(null);
+    const filteredItems = $derived(filterMenuItems(opts.getItems(), searchQuery));
+    const selectableItems = $derived(getSelectableItems(filteredItems));
+    // Reset highlight when search changes
+    $effect(() => {
+        searchQuery;
+        highlightedIndex = 0;
+    });
+    function reset() {
+        searchQuery = '';
+        highlightedIndex = 0;
+    }
+    function focusInput() {
+        requestAnimationFrame(() => inputEl?.focus());
+    }
+    function resetAndFocus() {
+        reset();
+        focusInput();
+    }
+    function getItemIndex(item) {
+        return selectableItems.indexOf(item);
+    }
+    function scrollToHighlighted(containerSelector) {
+        requestAnimationFrame(() => {
+            const container = inputEl?.closest(containerSelector);
+            const el = container?.querySelectorAll('[data-search-item]')?.[highlightedIndex];
+            el?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    function handleKeydown(e, containerSelector) {
+        if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+            e.preventDefault();
+            highlightedIndex = Math.min(highlightedIndex + 1, selectableItems.length - 1);
+            scrollToHighlighted(containerSelector);
+        }
+        else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+            e.preventDefault();
+            highlightedIndex = Math.max(highlightedIndex - 1, 0);
+            scrollToHighlighted(containerSelector);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const item = selectableItems[highlightedIndex];
+            if (item)
+                opts.onSelect(item.value);
+        }
+        else if (e.key !== 'Escape' && !opts.passthroughKeys?.includes(e.key)) {
+            e.stopPropagation();
+        }
+    }
+    function setHighlight(index) {
+        highlightedIndex = index;
+    }
+    function refocusInput(e) {
+        e.preventDefault();
+        inputEl?.focus();
+    }
+    return {
+        get searchQuery() { return searchQuery; },
+        set searchQuery(v) { searchQuery = v; },
+        get highlightedIndex() { return highlightedIndex; },
+        get inputEl() { return inputEl; },
+        set inputEl(v) { inputEl = v; },
+        get filteredItems() { return filteredItems; },
+        get selectableItems() { return selectableItems; },
+        reset,
+        focusInput,
+        resetAndFocus,
+        getItemIndex,
+        handleKeydown,
+        setHighlight,
+        refocusInput,
+    };
+}

package/dist/utils/menu/menu-styles.d.ts

@@ -0,0 +1,16 @@
+export declare const menuStyles: {
+    readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none";
+    readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover";
+    readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none";
+    readonly content: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 outline-none origin-top-left animate-scale-in motion-reduce:animate-none";
+    readonly subContent: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none origin-top-left animate-scale-in motion-reduce:animate-none";
+    readonly searchableSubContent: "min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none overflow-hidden origin-top-left animate-scale-in motion-reduce:animate-none";
+    readonly scrollableItems: "max-h-250 overflow-y-auto overflow-x-hidden";
+    readonly separator: "h-1 bg-muted -mx-4 my-4";
+    readonly groupHeading: "text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none";
+};
+export declare function menuItemClass(opts: {
+    variant?: 'default' | 'destructive';
+    searchable?: boolean;
+    isHighlighted?: boolean;
+}): string;

package/dist/utils/menu/menu-styles.js

@@ -0,0 +1,19 @@
+import { cn } from '../cn';
+export const menuStyles = {
+    item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
+    itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover',
+    itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none',
+    content: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 outline-none origin-top-left animate-scale-in motion-reduce:animate-none',
+    subContent: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none origin-top-left animate-scale-in motion-reduce:animate-none',
+    searchableSubContent: 'min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none overflow-hidden origin-top-left animate-scale-in motion-reduce:animate-none',
+    scrollableItems: 'max-h-250 overflow-y-auto overflow-x-hidden',
+    separator: 'h-1 bg-muted -mx-4 my-4',
+    groupHeading: 'text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none',
+};
+export function menuItemClass(opts) {
+    const { variant = 'default', searchable = false, isHighlighted = false } = opts;
+    if (variant === 'destructive') {
+        return cn(menuStyles.item, 'text-error', !searchable && 'hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg', searchable && isHighlighted && 'bg-error-bg');
+    }
+    return cn(menuStyles.item, 'text-dropdown-item', !searchable && 'hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover', searchable && isHighlighted && 'bg-dropdown-item-hover');
+}

package/dist/utils/menu/use-click-outside.d.ts

@@ -0,0 +1,9 @@
+type ClickOutsideParams = {
+    onClose: () => void;
+    enabled?: boolean;
+};
+export declare function clickOutside(node: HTMLElement, params: ClickOutsideParams): {
+    update(newParams: ClickOutsideParams): void;
+    destroy(): void;
+};
+export {};

package/dist/utils/menu/use-click-outside.js

@@ -0,0 +1,45 @@
+export function clickOutside(node, params) {
+    let { onClose, enabled = true } = params;
+    let handler = null;
+    let rafId = null;
+    function setup() {
+        teardown();
+        if (!enabled)
+            return;
+        // Defer so we don't catch the opening click/contextmenu event
+        rafId = requestAnimationFrame(() => {
+            handler = (e) => {
+                const target = e.target;
+                // Don't close if click is inside any menu content (including portaled submenus)
+                const allMenuContent = document.querySelectorAll('[data-menu-content]');
+                for (const el of allMenuContent) {
+                    if (el.contains(target))
+                        return;
+                }
+                onClose();
+            };
+            document.addEventListener('pointerdown', handler, { capture: true });
+        });
+    }
+    function teardown() {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+        if (handler) {
+            document.removeEventListener('pointerdown', handler, { capture: true });
+            handler = null;
+        }
+    }
+    setup();
+    return {
+        update(newParams) {
+            onClose = newParams.onClose;
+            enabled = newParams.enabled ?? true;
+            setup();
+        },
+        destroy() {
+            teardown();
+        },
+    };
+}

package/dist/utils/menu/use-floating.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Placement, type VirtualElement } from '@floating-ui/dom';
+export type UseFloatingOptions = {
+    reference: () => HTMLElement | VirtualElement | null;
+    floating: () => HTMLElement | null;
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean | {
+        padding?: number;
+    };
+    matchWidth?: boolean;
+};
+export declare function useFloating(opts: UseFloatingOptions): void;

package/dist/utils/menu/use-floating.svelte.js

@@ -0,0 +1,55 @@
+import { computePosition, autoUpdate, offset as offsetMiddleware, flip as flipMiddleware, shift as shiftMiddleware, size as sizeMiddleware } from '@floating-ui/dom';
+export function useFloating(opts) {
+    let cleanup = null;
+    function compute(reference, floating) {
+        const middleware = [];
+        if (opts.offset != null) {
+            middleware.push(offsetMiddleware(opts.offset));
+        }
+        if (opts.flip !== false) {
+            middleware.push(flipMiddleware());
+        }
+        if (opts.shift !== false) {
+            const padding = typeof opts.shift === 'object' ? opts.shift.padding : 8;
+            middleware.push(shiftMiddleware({ padding }));
+        }
+        if (opts.matchWidth) {
+            middleware.push(sizeMiddleware({
+                apply({ rects }) {
+                    Object.assign(floating.style, {
+                        minWidth: `${rects.reference.width}px`,
+                    });
+                },
+            }));
+        }
+        computePosition(reference, floating, {
+            placement: opts.placement ?? 'bottom-start',
+            middleware,
+        }).then(({ x, y }) => {
+            Object.assign(floating.style, {
+                position: 'absolute',
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+    }
+    $effect(() => {
+        const reference = opts.reference();
+        const floating = opts.floating();
+        if (cleanup) {
+            cleanup();
+            cleanup = null;
+        }
+        if (!reference || !floating)
+            return;
+        cleanup = autoUpdate(reference, floating, () => {
+            compute(reference, floating);
+        });
+        return () => {
+            if (cleanup) {
+                cleanup();
+                cleanup = null;
+            }
+        };
+    });
+}

package/dist/utils/menu/use-portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement): {
+    destroy(): void;
+};