lutra 0.1.32 → 0.1.33

package/README.md

@@ -1,6 +1,6 @@
 # Lutra
 
-UI library for Svelte 5.
+UI library for Svelte 5 currently under active development.
 
 ## Installation
 

package/dist/components/MenuDropdown.svelte

@@ -122,6 +122,10 @@
         }
     }
 
+    function handleSelect(item: Item, index: number) {
+        _open = false;
+    }
+
 </script>
 
 
@@ -150,7 +154,7 @@
                 >
                     <ul>
                         {#each items as item, index}
-                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} item={item} {index} />
+                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} onselect={handleSelect} item={item} {index} />
                         {/each}
                     </ul>
                 </div>

package/dist/components/MenuItem.svelte

@@ -7,12 +7,14 @@
         item,
         index,
         onmouseover,
+        onselect,
         keyboardHasFocus,
         shape = 'default',
     }: {
         item: Item;
         index: number;
         onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+        onselect?: (item: Item, index: number) => void;
         keyboardHasFocus?: boolean;
         shape?: 'default' | 'rounded' | 'pill';
     } = $props();
@@ -25,6 +27,13 @@
             el?.focus();
         }
     }
+
+    function handleClick(e: MouseEvent | KeyboardEvent) {
+        if(item.type === 'item' && item.onclick) {
+            item.onclick(e as MouseEvent, item);
+            onselect?.(item, index);
+        }
+    }
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
@@ -59,7 +68,7 @@
                 {/if}
             </a>
         {:else if item.onclick}
-            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item" bind:this={el}>
+            <button type="button" onclick={handleClick} class="Item" bind:this={el}>
                 <span class="Content">
                     <MenuItemContent {...item} />
                 </span>
@@ -67,7 +76,7 @@
                     <span class="Shortcut">{item.shortcut}</span>
                 {/if}
             </button>
-        {:else if item.component}
+        {:else if item.component || item.render || item.snippet}
             <div class="Item Custom">
                 <MenuItemContent {...item} />
             </div>

package/dist/components/MenuItem.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     item: Item;
     index: number;
     onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+    onselect?: (item: Item, index: number) => void;
     keyboardHasFocus?: boolean;
     shape?: 'default' | 'rounded' | 'pill';
 };

package/dist/components/MenuItemContent.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
     import type { Component, Snippet } from "svelte";
+    import type { RenderFn } from "../types.js";
     import Icon from "./Icon.svelte";
 
     let {
         text,
         snippet,
+        render,
         component: Comp,
         props,
         icon
     }: {
         text?: string;
         snippet?: Snippet;
+        render?: RenderFn;
         component?: Component;
         props?: any;
         icon?: string | Component;
@@ -25,6 +28,8 @@
 {/if}
 {#if snippet}
     {@render snippet()}
+{:else if render}
+    {@render render()}
 {/if}
 {#if Comp}
     <Comp {...props} />

package/dist/components/MenuItemContent.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { Component, Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
 type $$ComponentProps = {
     text?: string;
     snippet?: Snippet;
+    render?: RenderFn;
     component?: Component;
     props?: any;
     icon?: string | Component;

package/dist/components/MenuTypes.d.ts

@@ -1,5 +1,6 @@
 import type { StatusColorOrString } from "../util/color.js";
 import type { Component, Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
 export type MenuItem = {
     /** Type of menu item to render. */
     type: 'divider';
@@ -8,8 +9,10 @@ export type MenuItem = {
     type: 'header';
     /** Text label of the item to display to the user. */
     text?: string;
-    /** Snippet to display. */
+    /** Snippet to display (for direct props). */
     snippet?: Snippet;
+    /** Render function to display (for object literals - avoids Svelte 5 snippet typing issues). */
+    render?: RenderFn;
     /** Component to display. */
     component?: Component;
     /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
@@ -28,8 +31,10 @@ export type MenuItem = {
     type: 'item';
     /** Text label of the item to display to the user. */
     text?: string;
-    /** Snippet to display. */
+    /** Snippet to display (for direct props). */
     snippet?: Snippet;
+    /** Render function to display (for object literals - avoids Svelte 5 snippet typing issues). */
+    render?: RenderFn;
     /** Component to display. */
     component?: Component;
     /** Keyboard shortcut to display next to the item. */

package/dist/components/Modal.svelte

@@ -1,27 +1,41 @@
 <script lang="ts">
-	import UiContent from "./UIContent.svelte";
-	import ModalContent from "./ModalContent.svelte";
+    import ModalContent from "./ModalContent.svelte";
+    import Overlay from "./Overlay.svelte";
     import { getContext, type Snippet } from "svelte";
     import { attr } from "../util/attr.js";
+    import type { RenderFn } from "../types.js";
 
     /**
-     * @description
-     * A modal component that uses the popover api. Both trigger and content elements are snippets.
-     * For the trigger element, you get an `attrs` function that applies the necessary attributes to your trigger with the `use:attrs` directive.
-     * @example
-     * <div>
-     * {#snippet trigger(attrs)}
-     *    <button use:attrs>foo</button>
-     * {/snippet}
-     * {#snippet content(close)}
-     *   <div>bar</div>
-     * {/snippet}
-     * <Modal trigger={trigger} content={content} />
-     * </div>
+     * A flexible modal component supporting multiple usage patterns:
+     * 
+     * **Pattern A: Trigger-based**
+     * ```svelte
+     * <Modal {trigger} {content} />
+     * ```
+     * 
+     * **Pattern B: Controlled state**
+     * ```svelte
+     * <Modal bind:open={showModal}>
+     *     {#snippet content(close)}
+     *         <p>Modal content</p>
+     *     {/snippet}
+     * </Modal>
+     * ```
+     * 
+     * **Pattern C: Auto-show (no trigger)**
+     * ```svelte
+     * {#if shouldShow}
+     *     <Modal open onclose={() => shouldShow = false}>
+     *         {#snippet content(close)}...{/snippet}
+     *     </Modal>
+     * {/if}
+     * ```
      */
     let {
+        open = $bindable(false),
         contained,
         content,
+        render,
         buttons,
         trigger,
         title,
@@ -31,15 +45,22 @@
         closeOnScrim = true,
         trapFocus = true,
         dismissOnEsc = true,
+        width,
         maxWidth,
         maxHeight,
+        onclose,
+        onopen,
     }: {
+        /** Whether the modal is open (bindable for controlled usage) */
+        open?: boolean;
         /** Whether the modal should be contained with a border */
         contained?: boolean;
-        /** The content of the modal */
-        content: Snippet<[close: () => void]>;
-        /** Snippet containing the trigger element */
-        trigger: Snippet<[attrs: (node: Element) => void]>;
+        /** Snippet for the modal content */
+        content?: Snippet<[close: () => void]>;
+        /** Render function for modal content (for object literals) */
+        render?: RenderFn<[close: () => void]>;
+        /** Optional snippet containing the trigger element */
+        trigger?: Snippet<[attrs: (node: Element) => void]>;
         /** Buttons to be displayed in the modal */
         buttons?: Snippet<[close: () => void]>;
         /** Optional title for the modal (improves a11y) */
@@ -56,97 +77,89 @@
         trapFocus?: boolean;
         /** Whether pressing Escape closes the modal */
         dismissOnEsc?: boolean;
+        /** Width of the modal */
+        width?: string;
         /** Maximum width of the modal */
         maxWidth?: string;
         /** Maximum height of the modal */
         maxHeight?: string;
+        /** Callback when the modal closes */
+        onclose?: () => void;
+        /** Callback when the modal opens */
+        onopen?: () => void;
     } = $props();
 
-    if(contained === undefined) { contained = getContext('lutra.modal.contained') ?? getContext('lutra.contained') ?? false; }
+    if (contained === undefined) {
+        contained = getContext('lutra.modal.contained') ?? getContext('lutra.contained') ?? false;
+    }
 
-    const id = `po-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
-    let isOpen = $state(false);
+    const id = `modal-${crypto.randomUUID()}`;
+    let wasOpen = false;
 
-    function closeModal() { 
-        document.getElementById(id)?.hidePopover(); 
-        isOpen = false;
+    function closeModal() {
+        open = false;
+        onclose?.();
     }
-    
-    function toggleModal() { 
-        isOpen = !isOpen; 
+
+    function toggleModal() {
+        open = !open;
     }
 
     $effect(() => {
-        if(isOpen) {
+        if (open && !wasOpen) {
+            onopen?.();
             document.documentElement.style.overflow = "hidden";
-        } else {
+        } else if (!open && wasOpen) {
             document.documentElement.style.overflow = "";
         }
+        wasOpen = open;
     });
 
     let attrs = $derived.by(() => {
         return attr({
             id: `trigger-${id}`,
-            popovertarget: id,
             onclick: toggleModal,
-        })
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": id,
+        });
     });
-
 </script>
 
-<div class="Modal">
-    <div class="Trigger">
-        {@render trigger(attrs)}
+{#if trigger}
+    <div class="Modal">
+        <div class="Trigger">
+            {@render trigger(attrs)}
+        </div>
     </div>
-    {#if isOpen}
-        <UiContent>
-            <div {id} popover="auto" class="ModalContainer">
-                <ModalContent
-                    {shape}
-                    {contained}
-                    {unstyled}
-                    {showScrim}
-                    {closeOnScrim}
-                    {trapFocus}
-                    {dismissOnEsc}
-                    {maxWidth}
-                    {maxHeight}
-                    {title}
-                    {buttons}
-                    children={content}
-                    close={closeModal}
-                />
-            </div>
-        </UiContent>
-    {/if}
-</div>
+{/if}
+
+{#if open}
+    <Overlay position="center" {id} z={200} layer="modals">
+        <ModalContent
+            {shape}
+            {contained}
+            {unstyled}
+            {showScrim}
+            {closeOnScrim}
+            {trapFocus}
+            {dismissOnEsc}
+            {width}
+            {maxWidth}
+            {maxHeight}
+            {title}
+            {buttons}
+            snippet={content}
+            {render}
+            close={closeModal}
+        />
+    </Overlay>
+{/if}
 
 <style>
-    .Modal, .Trigger {
+    .Modal,
+    .Trigger {
         position: relative;
         display: inline-block;
     }
-    
-    .ModalContainer {
-        border: 0;
-        width: 100svw;
-        height: 100svh;
-        overflow-y: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    [popover] {
-        animation: fadeIn 0.2s;
-    }
-    
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-</style>
+</style>

package/dist/components/Modal.svelte.d.ts

@@ -1,11 +1,16 @@
 import { type Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
 type $$ComponentProps = {
+    /** Whether the modal is open (bindable for controlled usage) */
+    open?: boolean;
     /** Whether the modal should be contained with a border */
     contained?: boolean;
-    /** The content of the modal */
-    content: Snippet<[close: () => void]>;
-    /** Snippet containing the trigger element */
-    trigger: Snippet<[attrs: (node: Element) => void]>;
+    /** Snippet for the modal content */
+    content?: Snippet<[close: () => void]>;
+    /** Render function for modal content (for object literals) */
+    render?: RenderFn<[close: () => void]>;
+    /** Optional snippet containing the trigger element */
+    trigger?: Snippet<[attrs: (node: Element) => void]>;
     /** Buttons to be displayed in the modal */
     buttons?: Snippet<[close: () => void]>;
     /** Optional title for the modal (improves a11y) */
@@ -22,11 +27,17 @@ type $$ComponentProps = {
     trapFocus?: boolean;
     /** Whether pressing Escape closes the modal */
     dismissOnEsc?: boolean;
+    /** Width of the modal */
+    width?: string;
     /** Maximum width of the modal */
     maxWidth?: string;
     /** Maximum height of the modal */
     maxHeight?: string;
+    /** Callback when the modal closes */
+    onclose?: () => void;
+    /** Callback when the modal opens */
+    onopen?: () => void;
 };
-declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/ModalContent.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import type { Component, Snippet } from 'svelte';
 	import { onMount, onDestroy } from 'svelte';
+	import type { ModalButton } from './ModalTypes.js';
+	import type { RenderFn } from '../types.js';
 
 	let {
 		children,
 		text,
 		snippet,
+		render,
 		component: Comp,
 		props,
 		buttons,
+		buttonsConfig,
 		close,
 		title,
 		shape = 'rounded',
@@ -18,15 +22,18 @@
 		closeOnScrim = true,
 		trapFocus = true,
 		dismissOnEsc = true,
+		width,
 		maxWidth,
 		maxHeight,
 	}: {
 		children?: Snippet<[close: () => void]>;
 		text?: string;
 		snippet?: Snippet<[close: () => void]>;
+		render?: RenderFn<[close: () => void]>;
 		component?: Component;
 		props?: any;
 		buttons?: Snippet<[close: () => void]>;
+		buttonsConfig?: ModalButton[];
 		close: () => void;
 		title?: string;
 		shape?: 'rounded' | 'sharp';
@@ -36,6 +43,7 @@
 		closeOnScrim?: boolean;
 		trapFocus?: boolean;
 		dismissOnEsc?: boolean;
+		width?: string;
 		maxWidth?: string;
 		maxHeight?: string;
 	} = $props();
@@ -43,6 +51,20 @@
 	let dialogEl: HTMLDivElement | null = $state(null);
 	let previousActiveElement: HTMLElement | null = null;
 	const titleId = title ? `modal-title-${crypto.randomUUID()}` : undefined;
+	let loading: Record<number, boolean> = $state({});
+
+	async function handleButtonClick(btn: ModalButton, index: number) {
+		if (!btn.onclick) return;
+		const result = btn.onclick(close);
+		if (result instanceof Promise) {
+			loading[index] = true;
+			try {
+				await result;
+			} finally {
+				loading[index] = false;
+			}
+		}
+	}
 
 	onMount(() => {
 		previousActiveElement = document.activeElement as HTMLElement;
@@ -53,11 +75,14 @@
 				focusableElements[0].focus();
 			}
 		}
+		dialogEl?.focus();
+		window.addEventListener('keydown', handleKeydown);
 	});
 
 	onDestroy(() => {
 		// Restore focus on unmount
 		previousActiveElement?.focus();
+		window.removeEventListener('keydown', handleKeydown);
 	});
 
 	function getFocusableElements(): HTMLElement[] {
@@ -120,7 +145,7 @@
 	tabindex="-1"
 	bind:this={dialogEl}
 	onkeydown={handleKeydown}
-	style="--modal-max-width: {maxWidth}; --modal-max-height: {maxHeight};"
+	style="--modal-width: {width}; --modal-max-width: {maxWidth}; --modal-max-height: {maxHeight};"
 >
 	<div class="ModalContentArea">
 		{#if title}
@@ -131,6 +156,8 @@
 		{/if}
 		{#if snippet}
 			{@render snippet(close)}
+		{:else if render}
+			{@render render(close)}
 		{/if}
 		{#if Comp}
 			<Comp {...props} {close} />
@@ -139,7 +166,17 @@
 			{@render children(close)}
 		{/if}
 	</div>
-	{#if buttons}
+	{#if buttonsConfig}
+		<div class="ModalActions">
+			{#each buttonsConfig as btn, i}
+				<button
+					class="button {btn.variant || 'default'}"
+					disabled={btn.disabled || loading[i]}
+					onclick={() => handleButtonClick(btn, i)}
+				>{btn.text}</button>
+			{/each}
+		</div>
+	{:else if buttons}
 		<div class="ModalActions">
 			{@render buttons(close)}
 		</div>
@@ -150,23 +187,25 @@
 	.ModalScrim {
 		background: var(--scrim-background);
 		backdrop-filter: var(--scrim-backdrop-filter);
-		position: fixed;
+		position: absolute;
 		inset: 0;
-		z-index: -1;
+		z-index: 0;
 	}
 
 	.ModalContent {
 		display: grid;
 		grid-template-rows: 1fr auto;
 		gap: var(--modal-gap);
+		width: var(--modal-width, fit-content);
 		max-width: min(var(--modal-max-width, 40rem), calc(100svw - 2rem));
 		max-height: min(var(--modal-max-height, 80svh), calc(100svh - 2rem));
 		background: var(--modal-background);
-		border: var(--modal-border);
+		border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
 		border-radius: var(--modal-border-radius);
 		box-shadow: 0 0.5rem 1rem var(--modal-shadow-color);
 		overflow: hidden;
 		position: relative;
+		z-index: 1;
 	}
 
 	.ModalContent.sharp {
@@ -190,7 +229,8 @@
 		overflow: auto;
 		scrollbar-gutter: stable;
 		scrollbar-width: thin;
-		padding: var(--modal-padding);
+		padding-block: var(--modal-padding-block);
+		padding-inline: var(--modal-padding-inline);
 		text-wrap: pretty;
 	}
 
@@ -215,7 +255,8 @@
 	.ModalActions {
 		background: var(--modal-actions-background);
 		border-top: var(--modal-border-size) var(--modal-border-style) var(--modal-actions-border-color);
-		padding: var(--modal-actions-padding);
+		padding-block: var(--modal-actions-padding-block);
+		padding-inline: var(--modal-actions-padding-inline);
 		display: flex;
 		gap: var(--space-sm);
 		justify-content: flex-end;

package/dist/components/ModalContent.svelte.d.ts

@@ -1,11 +1,15 @@
 import type { Component, Snippet } from 'svelte';
+import type { ModalButton } from './ModalTypes.js';
+import type { RenderFn } from '../types.js';
 type $$ComponentProps = {
     children?: Snippet<[close: () => void]>;
     text?: string;
     snippet?: Snippet<[close: () => void]>;
+    render?: RenderFn<[close: () => void]>;
     component?: Component;
     props?: any;
     buttons?: Snippet<[close: () => void]>;
+    buttonsConfig?: ModalButton[];
     close: () => void;
     title?: string;
     shape?: 'rounded' | 'sharp';
@@ -15,6 +19,7 @@ type $$ComponentProps = {
     closeOnScrim?: boolean;
     trapFocus?: boolean;
     dismissOnEsc?: boolean;
+    width?: string;
     maxWidth?: string;
     maxHeight?: string;
 };

package/dist/components/ModalTypes.d.ts

@@ -1,5 +1,6 @@
 import type { Component, Snippet } from 'svelte';
 import type { OverlayPosition } from './overlays.svelte.js';
+import type { RenderFn } from '../types.js';
 export type ModalButton = {
     text: string;
     variant?: 'action' | 'success' | 'danger' | 'ghost' | 'outline' | 'default';
@@ -10,8 +11,10 @@ export type ModalButton = {
 export type ModalOptions = {
     /** Text content to display */
     text?: string;
-    /** Snippet to render */
+    /** Snippet to render (for direct props) */
     snippet?: Snippet<[close: () => void]>;
+    /** Render function (for object literals - avoids Svelte 5 snippet typing issues) */
+    render?: RenderFn<[close: () => void]>;
     /** Component to render */
     component?: Component;
     /** Props to pass to component */

package/dist/components/OverlayContainer.svelte

@@ -25,7 +25,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        z-index: 1000;
+        z-index: var(--overlay-z-index);
         pointer-events: none;
     }
 </style>

package/dist/components/OverlayLayer.svelte

@@ -2,6 +2,7 @@
     import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.js";
 	import { slidefade } from "../util/transitions.js";
 	import { BROWSER } from "esm-env";
+	import RenderContent from "../util/RenderContent.svelte";
 	import { untrack } from "svelte";
 
     let {
@@ -113,11 +114,13 @@
             transition:slidefade|global={{ duration: 150, origin: originCache[item.id] || origins[index], noMargin: !!!item.anchor }}
             style="--index: {index}; --z: {item.z}; --left: {positions[index].left}px; --top: {positions[index].top}px;"
         >
-            {#if item.component}
-                <item.component {...item.props} />
-            {:else if item.snippet}
-                {@render item.snippet()}
-            {/if}
+            <RenderContent 
+                text={item.text}
+                snippet={item.snippet}
+                render={item.render}
+                component={item.component} 
+                props={item.props} 
+            />
         </div>
     {/each}
 </div>
@@ -128,7 +131,7 @@
         position: absolute;
         display: flex;
         flex-direction: column-reverse;
-        gap: 0.75rem;
+        gap: var(--overlay-gap);
     }
     .Layer.center {
         left: 50%;
@@ -136,19 +139,19 @@
         transform: translateX(-50%);
     }
     .Layer.top {
-        top: calc(1rem + env(safe-area-inset-top));
+        top: calc(var(--overlay-offset) + env(safe-area-inset-top));
         bottom: unset;
     }
     .Layer.bottom {
         top: unset;
-        bottom: calc(1rem + env(safe-area-inset-bottom));
+        bottom: calc(var(--overlay-offset) + env(safe-area-inset-bottom));
     }
     .Layer.right {
         left: unset;
-        right: calc(1rem + env(safe-area-inset-right));
+        right: calc(var(--overlay-offset) + env(safe-area-inset-right));
     }
     .Layer.left {
-        left: calc(1rem + env(safe-area-inset-left));
+        left: calc(var(--overlay-offset) + env(safe-area-inset-left));
         right: unset;
     }
     .Layer.center:not(.top):not(.bottom):not(.anchor) {

package/dist/components/modals.svelte.d.ts

@@ -1,4 +1,24 @@
 import type { ModalOptions } from './ModalTypes.js';
+/**
+ * Opens a modal programmatically.
+ * @param opts - Modal options or a simple string for text content
+ * @returns An object with the modal id and a close function
+ * @example
+ * // Simple text modal
+ * const { close } = openModal('Hello world!');
+ *
+ * // Modal with options
+ * const { close } = openModal({
+ *     title: 'Confirm',
+ *     text: 'Are you sure?',
+ *     buttons: 'ok-cancel',
+ * });
+ *
+ * // Modal with render function (for object literals)
+ * const { close } = openModal({
+ *     render: (close) => renderMyContent(close),
+ * });
+ */
 export declare function openModal(opts: ModalOptions | string): {
     id: string;
     close: () => void;

package/dist/components/modals.svelte.js

@@ -18,6 +18,26 @@ function unlockScroll() {
         activeElement = null;
     }
 }
+/**
+ * Opens a modal programmatically.
+ * @param opts - Modal options or a simple string for text content
+ * @returns An object with the modal id and a close function
+ * @example
+ * // Simple text modal
+ * const { close } = openModal('Hello world!');
+ *
+ * // Modal with options
+ * const { close } = openModal({
+ *     title: 'Confirm',
+ *     text: 'Are you sure?',
+ *     buttons: 'ok-cancel',
+ * });
+ *
+ * // Modal with render function (for object literals)
+ * const { close } = openModal({
+ *     render: (close) => renderMyContent(close),
+ * });
+ */
 export function openModal(opts) {
     const id = crypto.randomUUID();
     if (typeof opts === 'string') {
@@ -31,17 +51,16 @@ export function openModal(opts) {
     lockScroll();
     opts.onOpen?.();
     // Handle defaultButtons shortcut
-    let buttons;
+    let buttonsConfig;
     if (opts.buttons === 'ok-cancel') {
-        buttons = [cancelButton, okButton];
+        buttonsConfig = [cancelButton, okButton];
     }
     else if (opts.buttons === 'none' || opts.buttons === undefined) {
-        buttons = undefined;
+        buttonsConfig = undefined;
     }
     else {
-        buttons = opts.buttons;
+        buttonsConfig = opts.buttons;
     }
-    const buttonsSnippet = buttons ? createButtonsSnippet(buttons, close) : undefined;
     addOverlay({
         id,
         z: 200,
@@ -50,9 +69,10 @@ export function openModal(opts) {
             close,
             text: opts.text,
             snippet: opts.snippet,
+            render: opts.render,
             component: opts.component,
             props: opts.props,
-            buttons: buttonsSnippet,
+            buttonsConfig,
             title: opts.title,
             showScrim: opts.showScrim ?? true,
             closeOnScrim: opts.closeOnScrim ?? true,
@@ -61,6 +81,7 @@ export function openModal(opts) {
             unstyled: opts.unstyled ?? false,
             shape: opts.shape ?? 'rounded',
             contained: opts.contained ?? true,
+            width: opts.width,
             maxWidth: opts.maxWidth,
             maxHeight: opts.maxHeight,
         },
@@ -69,35 +90,3 @@ export function openModal(opts) {
     });
     return { id, close };
 }
-function createButtonsSnippet(buttons, close) {
-    // Create a snippet that renders the buttons
-    return (closeParam) => {
-        // We need to return actual DOM elements, not strings
-        // This will be rendered by Svelte's snippet system
-        const fragment = document.createDocumentFragment();
-        buttons.forEach((btn) => {
-            const button = document.createElement('button');
-            button.className = `button ${btn.variant || 'default'}`;
-            button.textContent = btn.text;
-            button.disabled = btn.disabled || btn.loading || false;
-            if (btn.onclick) {
-                button.addEventListener('click', async () => {
-                    const result = btn.onclick?.(close);
-                    if (result instanceof Promise) {
-                        button.disabled = true;
-                        button.classList.add('loading');
-                        try {
-                            await result;
-                        }
-                        finally {
-                            button.disabled = false;
-                            button.classList.remove('loading');
-                        }
-                    }
-                });
-            }
-            fragment.appendChild(button);
-        });
-        return fragment;
-    };
-}

package/dist/components/overlays.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Component, Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
 export type OverlayPosition = "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" | "center" | "anchor";
 export type TransitionOpts = {
     y?: number;
@@ -12,6 +13,7 @@ export type OverlayItem = {
     z?: number;
     text?: string;
     snippet?: Snippet;
+    render?: RenderFn;
     component?: Component;
     props?: any;
     layer?: string;

package/dist/css/1-props.css

@@ -475,6 +475,7 @@
 
 @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --modal-width { syntax: "<length>"; inherits: true; initial-value: fit-content; }
 @property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 40rem; }
 @property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 80svh; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@@ -484,9 +485,17 @@
 @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
+/**
+ * Overlay System
+ */
+
+@property --overlay-z-index { syntax: "<integer>"; inherits: true; initial-value: 1000; }
+@property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
+@property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+
 /**
  * Scrim/Backdrop (shared across overlays)
  */
 
 @property --scrim-background { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.5); }
-@property --scrim-backdrop-filter { syntax: "<string>"; inherits: true; initial-value: blur(2px); }
+@property --scrim-backdrop-filter { syntax: "*"; inherits: true; initial-value: blur(2px); }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/index.js';
 export * from './form/index.js';
 export * from './icons/index.js';
+export * from './types.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components/index.js';
 export * from './form/index.js';
 export * from './icons/index.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -1,3 +1,11 @@
+import { type Snippet } from "svelte";
+/**
+ * A render function that can be used in place of a Snippet when passing content
+ * through object literals. This works around Svelte 5's snippet typing limitations
+ * where inline snippet declarations don't type-check when passed through objects.
+ * @template T - Tuple of argument types passed to the render function
+ */
+export type RenderFn<T extends any[] = []> = (...args: T) => ReturnType<Snippet<T>>;
 export interface LutraConfig {
     /**
      * The default theme to use.

package/dist/util/RenderContent.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T = undefined">
+    import type { Component, Snippet } from "svelte";
+    import type { RenderFn } from "../types.js";
+
+    /**
+     * A unified content rendering component that handles multiple content types.
+     * Supports text strings, Svelte snippets, render functions, and components.
+     */
+    let {
+        text,
+        snippet,
+        render,
+        component: Comp,
+        props,
+        arg,
+    }: {
+        /** Plain text content to display */
+        text?: string;
+        /** Svelte snippet to render */
+        snippet?: T extends undefined ? Snippet<[]> : Snippet<[T]>;
+        /** Render function (for object literals - avoids Svelte 5 snippet typing issues) */
+        render?: T extends undefined ? RenderFn<[]> : RenderFn<[T]>;
+        /** Svelte component to instantiate */
+        component?: Component;
+        /** Props to pass to the component */
+        props?: Record<string, any>;
+        /** Argument to pass to snippet or render function */
+        arg?: T;
+    } = $props();
+</script>
+
+{#if text}
+    {text}
+{:else if snippet}
+    {#if arg !== undefined}
+        {@render snippet(arg)}
+    {:else}
+        {@render (snippet as Snippet<[]>)()}
+    {/if}
+{:else if render}
+    {#if arg !== undefined}
+        {@render render(arg)}
+    {:else}
+        {@render (render as RenderFn<[]>)()}
+    {/if}
+{:else if Comp}
+    <Comp {...props} />
+{/if}
+

package/dist/util/RenderContent.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Component, Snippet } from "svelte";
+import type { RenderFn } from "../types.js";
+declare class __sveltets_Render<T = undefined> {
+    props(): {
+        /** Plain text content to display */
+        text?: string;
+        /** Svelte snippet to render */
+        snippet?: (T extends undefined ? Snippet<[]> : Snippet<[T]>) | undefined;
+        /** Render function (for object literals - avoids Svelte 5 snippet typing issues) */
+        render?: (T extends undefined ? RenderFn<[]> : RenderFn<[T]>) | undefined;
+        /** Svelte component to instantiate */
+        component?: Component;
+        /** Props to pass to the component */
+        props?: Record<string, any>;
+        /** Argument to pass to snippet or render function */
+        arg?: T | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = undefined>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RenderContent: $$IsomorphicComponent;
+type RenderContent<T = undefined> = InstanceType<typeof RenderContent<T>>;
+export default RenderContent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.32",
+	"version": "0.1.33",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",
@@ -40,23 +40,23 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.47.0",
-		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@types/node": "^24.8.0",
-		"publint": "^0.3.14",
-		"svelte": "^5.40.1",
-		"svelte-check": "^4.3.3",
+		"@types/node": "^25.0.1",
+		"publint": "^0.3.16",
+		"svelte": "^5.45.10",
+		"svelte-check": "^4.3.4",
 		"typescript": "^5.9.3",
-		"vite": "^7.1.10"
+		"vite": "^7.2.7"
 	},
 	"dependencies": {
 		"@auth70/bodyguard": "^1.7.1",
 		"blurhash": "^2.0.5",
 		"browser-image-compression": "^2.0.2",
 		"esm-env": "^1.2.2",
-		"marked": "16.4.0",
-		"zod": "^4.1.12",
+		"marked": "17.0.1",
+		"zod": "^4.1.13",
 		"zodex": "^4.0.1"
 	}
 }

package/dist/util/StringOrComponent.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import type { Component } from "svelte";
-    let {
-        content,
-        props,
-    }: {
-        content: string | Component | undefined;
-        props?: Record<string, any>;
-    } = $props();
-
-    let Content = content as Component;
-</script>
-
-{#if content}
-    {#if typeof content === 'string'}
-        {content}
-    {:else if Content}
-        <Content {...props} />
-    {/if}
-{/if}

package/dist/util/StringOrComponent.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Component } from "svelte";
-type $$ComponentProps = {
-    content: string | Component | undefined;
-    props?: Record<string, any>;
-};
-declare const StringOrComponent: Component<$$ComponentProps, {}, "">;
-type StringOrComponent = ReturnType<typeof StringOrComponent>;
-export default StringOrComponent;