lutra 0.0.33 → 0.1.4

package/dist/{nav → components}/MenuItem.svelte

@@ -1,20 +1,30 @@
-<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-import { isStatusColor } from "../utils/color.js";
-import { isComponent, isSnippet } from "../utils/isSnippet.js";
-let {
-  item,
-  index,
-  onmouseover,
-  keyboardHasFocus,
-  shape = "rounded"
-} = $props();
-let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false);
-let el = $state(null);
-function mouseover(e) {
-  if (onmouseover && item.type === "item") {
-    el?.focus();
-  }
-}
+<script lang="ts">
+	import { isStatusColor } from "../util/color.js";
+    import MenuItemContent from "./MenuItemContent.svelte";
+	import type { MenuItem as Item } from "./MenuTypes.js";
+
+    let {
+        item,
+        index,
+        onmouseover,
+        keyboardHasFocus,
+        shape = 'default',
+    }: {
+        item: Item;
+        index: number;
+        onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+        keyboardHasFocus?: boolean;
+        shape?: 'default' | 'rounded' | 'pill';
+    } = $props();
+
+    let isSet = $derived(item.type !== 'divider' ? isStatusColor(item.color) : false);
+    let el: HTMLElement | null = $state(null);
+
+    function mouseover(e: MouseEvent) {
+        if(onmouseover && item.type === "item") {
+            el?.focus();
+        }
+    }
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
@@ -32,13 +42,13 @@ function mouseover(e) {
         <hr />
     {:else if item.type === 'header'}
         <div class="Header">
-            <StringOrSnippet content={item.content} />
+            <MenuItemContent {...item} />
         </div>
     {:else if item.type === 'item'}
         {#if item.href}
             <a href="{item.href}" class="Item" bind:this={el}>
                 <span class="Content">
-                    <StringOrSnippet content={item.content} />
+                    <MenuItemContent {...item} />
                 </span>
                 {#if item.shortcut}
                     <span class="Shortcut">{item.shortcut}</span>
@@ -47,25 +57,30 @@ function mouseover(e) {
         {:else if item.onclick}
             <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item" bind:this={el}>
                 <span class="Content">
-                    <StringOrSnippet content={item.content} />
+                    <MenuItemContent {...item} />
                 </span>
                 {#if item.shortcut}
                     <span class="Shortcut">{item.shortcut}</span>
                 {/if}
             </button>
-        {:else if isSnippet(item.content)}
+        {:else if item.component}
             <div class="Item Custom">
-                {@render item.content()}
-            </div>
-        {:else if isComponent(item.content)}
-            <div class="Item Custom">
-                <item.content />
+                <MenuItemContent {...item} />
             </div>
         {/if}
     {/if}
 </li>
 
 <style>
+    button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: inherit;
+        text-align: left;
+    }
     li {
         margin: 0;
         list-style: none;
@@ -88,11 +103,12 @@ function mouseover(e) {
         color: var(--color);
         --inset-block: 0.5rem;
         --inset-inline: 1rem;
+        border-radius: none;
     }
 
     li.rounded .Item,
     li.rounded .Header {
-        border-radius: var(--border-radius);
+        border-radius: var(--menu-border-radius);
     }
 
     li .Header {
@@ -101,7 +117,7 @@ function mouseover(e) {
 
     li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
     li .Item:not(.Custom):focus-visible {
-        background-color: var(--bg-hover);
+        background-color: var(--menu-background-color-hover);
         cursor: pointer;
         outline: none;
     }
@@ -109,7 +125,7 @@ function mouseover(e) {
     li .Item span.Shortcut {
         font-size: max(0.75em, 9px);
         text-align: right;
-        color: var(--text-subtle);
+        color: var(--menu-text-color-subtle);
     }
 
     li .Item:not(.Custom):active {
@@ -124,21 +140,13 @@ function mouseover(e) {
         display: block;
         border: none;
         margin: 0;
-        border-top: 1px solid var(--border-color);
+        border-top: 1px solid var(--menu-border-color);
     }
 
     li:first-child[data-type="item"] {
         margin-block-start: var(--menu-item-margin, 0.5rem);
     }
 
-    li:first-child[data-type="header"]:has(+ li[data-type="item"]) {
-        margin-block-end: 0.125rem;
-    }
-
-    li:nth-last-child(2)[data-type="item"]:has(+ li[data-type="header"]:last-child) {
-        margin-block-end: 0.5rem;
-    }
-
     @media (pointer: none) {
         li .Item span.Shortcut {
             display: none;

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

@@ -0,0 +1,11 @@
+import type { MenuItem as Item } from "./MenuTypes.js";
+type $$ComponentProps = {
+    item: Item;
+    index: number;
+    onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+    keyboardHasFocus?: boolean;
+    shape?: 'default' | 'rounded' | 'pill';
+};
+declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/MenuItemContent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { Component, Snippet } from "svelte";
+
+    let {
+        text,
+        snippet,
+        component: Comp,
+        props
+    }: {
+        text?: string;
+        snippet?: Snippet;
+        component?: Component;
+        props?: any;
+    } = $props();
+</script>
+
+{#if text}
+    {text}
+{/if}
+{#if snippet}
+    {@render snippet([...props])}
+{/if}
+{#if Comp}
+    <Comp {...props} />
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    text?: string;
+    snippet?: Snippet;
+    component?: Component;
+    props?: any;
+};
+declare const MenuItemContent: Component<$$ComponentProps, {}, "">;
+type MenuItemContent = ReturnType<typeof MenuItemContent>;
+export default MenuItemContent;

package/dist/{nav → components}/MenuTypes.d.ts

@@ -1,4 +1,4 @@
-import type { StatusColorOrString } from "../utils/color.js";
+import type { StatusColorOrString } from "../util/color.js";
 import type { Component, Snippet } from "svelte";
 export type MenuItem = {
     /** Type of menu item to render. */
@@ -7,14 +7,22 @@ export type MenuItem = {
     /** Type of menu item to render. */
     type: 'header';
     /** Text label of the item to display to the user. */
-    content: string | Snippet;
+    text?: string;
+    /** Snippet to display. */
+    snippet?: Snippet;
+    /** Component to display. */
+    component?: Component;
     /** Color to use for the item. */
     color?: StatusColorOrString;
 } | {
     /** Type of menu item to render. */
     type: 'item';
-    /** Content of the item to display to the user. */
-    content: string | Snippet;
+    /** Text label of the item to display to the user. */
+    text?: string;
+    /** Snippet to display. */
+    snippet?: Snippet;
+    /** Component to display. */
+    component?: Component;
     /** Keyboard shortcut to display next to the item. */
     shortcut?: string;
     /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
@@ -31,6 +39,8 @@ export type MenuItem = {
     children?: MenuItem[];
 };
 export type TabItem = {
+    /** Unique identifier of the item. */
+    id?: string;
     /** Text label of the item to display to the user. */
     label: string;
     /** Path or URL to use for the item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active items. */
@@ -46,7 +56,11 @@ export type TabbedContentItem = {
     /** URL hash to use for the item. */
     hash?: string;
     /** Content to display when the item is selected. */
-    content: Snippet;
+    text?: string;
+    /** Snippet to display. */
+    snippet?: Snippet;
+    /** Component to display. */
+    component?: Component;
 };
 export type BreadcrumbItem = {
     /** Text label of the item to display to the user. */

package/dist/components/Modal.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import UiContent from "./UIContent.svelte";
+    import { getContext, type Snippet } from "svelte";
+    import { slidefade } from "../util/transitions.js";
+    import { attr } from "../util/attr.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} />
+     * <Modal trigger={trigger} content={content} hover />
+     * </div>
+     */
+    let {
+        contained,
+        content,
+        buttons,
+        trigger,
+        shape = "rounded",
+    }: {
+        /** 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]>;
+        /** Buttons to be displayed in the modal */
+        buttons?: Snippet<[close: () => void]>;
+        /** The shape of the modal */
+        shape?: "rounded" | "sharp";
+    } = $props();
+
+    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);
+
+    function closeModal() { document.getElementById(id)!.hidePopover(); isOpen = false; }
+    function toggleModal() { isOpen = !isOpen; }
+
+    function clickElsewhere(e: MouseEvent) {
+        if (e.target instanceof HTMLElement && !e.target.closest('.ModalContent')) {
+            closeModal();
+        }
+    }
+
+    $effect(() => {
+        if(isOpen) {
+            document.getElementsByTagName("html")[0].style.overflow = "hidden";
+        } else {
+            document.getElementsByTagName("html")[0].style.overflow = "auto";
+        }
+    });
+
+    let attrs = $derived.by(() => {
+        return attr({
+            id: `trigger-${id}`,
+            popovertarget: id,
+            onclick: toggleModal,
+        })
+    });
+
+</script>
+
+<div class="Modal">
+    <div class="Trigger">
+        {@render trigger(attrs)}
+    </div>
+    {#if isOpen}
+        <UiContent>
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div {id} onclick={clickElsewhere} popover="auto" class="ModalContainer">
+                <div class="ModalContent {shape}" class:contained>
+                    <div class="ModalContentInside">
+                        {@render content(closeModal)}
+                        {#if buttons}
+                            <div class="ModalActions">
+                                {@render buttons(closeModal)}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </UiContent>
+    {/if}
+</div>
+
+<style>
+    .Modal, .Trigger {
+        position: relative;
+        display: inline-block;
+    }
+    .ModalContainer {
+        border: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bg-overlay);
+        backdrop-filter: var(--overlay-filter);
+        overflow-y: auto;
+    }
+    .ModalContent {
+        background: var(--bg, var(--background-main));
+        box-shadow: var(--shadow);
+        opacity: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0.25rem 1rem 0 var(--shadow);
+    }
+    .ModalContentInsize {
+        container-type: inline-size;
+    }
+    .ModalContent.rounded {
+        border-radius: var(--border-radius);
+    }
+    .ModalContent.contained {
+        border: var(--border);
+    }
+    .ModalActions {
+        display: flex;
+        gap: 1rem;
+        border-top: var(--border);
+        justify-content: flex-end;
+        padding: 1rem;
+        background: var(--bg-subtle) linear-gradient(0deg, transparent, 95%, color-mix(in hsl, transparent 95%, var(--mix-target)));
+    }
+    [popover] {
+        animation: fadeIn 0.2s;
+    }
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** 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]>;
+    /** Buttons to be displayed in the modal */
+    buttons?: Snippet<[close: () => void]>;
+    /** The shape of the modal */
+    shape?: "rounded" | "sharp";
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/{display → components}/Notification.svelte

@@ -1,21 +1,32 @@
-<script lang="ts">import Overlay from "../layout/Overlay.svelte";
-import PageContent from "../layout/PageContent.svelte";
-import { removeOverlay } from "../layout/overlays.svelte.js";
-import Close from "./Close.svelte";
-import { createId } from "../utils/id.js";
-import Icon from "./Icon.svelte";
-let {
-  id = createId(),
-  children,
-  title,
-  content,
-  icon,
-  actions
-} = $props();
-function onclick(e) {
-  e.preventDefault();
-  removeOverlay(id);
-}
+<script lang="ts">
+	import Overlay from "./Overlay.svelte";
+	import PageContent from "./PageContent.svelte";
+	import { removeOverlay } from "./overlays.svelte.js";
+	import type { Snippet, Component } from "svelte";
+	import Close from "./Close.svelte";
+	import Icon from "./Icon.svelte";
+
+    let {
+        id = crypto.randomUUID(),
+        children,
+        title,
+        content,
+        icon,
+        actions,
+    }: {
+        id?: string;
+        children?: Snippet;
+        title?: string;
+        content?: string;
+        icon?: string | Component;
+        actions?: Snippet;
+    } = $props();
+
+    function onclick(e: MouseEvent) {
+        e.preventDefault();
+        removeOverlay(id);
+    }
+
 </script>
 
 {#snippet notification()}
@@ -60,9 +71,9 @@ function onclick(e) {
     .Notification {
         display: block;
         pointer-events: none;
-        background: var(--bg-app);
-        border-radius: var(--border-radius);
-        border: var(--border);
+        background-color: var(--notification-background-color);
+        border-radius: var(--notification-border-radius);
+        border: var(--notification-border-size) var(--notification-border-style) var(--notification-border-color);
         padding: 0.75rem 1rem;
         width: 30rem;
         font-size: 0.85em;
@@ -70,7 +81,7 @@ function onclick(e) {
         grid-template-areas: "content";
         grid-template-columns: 1fr;
         gap: 1rem;
-        box-shadow: 0 0.5rem 1rem var(--shadow);
+        box-shadow: 0 0.5rem 1rem var(--shadow-color);
     }
     .Notification:has(.Icon):has(.Actions) {
         grid-template-areas: "icon content actions";

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

@@ -0,0 +1,12 @@
+import type { Snippet, Component } from "svelte";
+type $$ComponentProps = {
+    id?: string;
+    children?: Snippet;
+    title?: string;
+    content?: string;
+    icon?: string | Component;
+    actions?: Snippet;
+};
+declare const Notification: Component<$$ComponentProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

package/dist/components/Overlay.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onDestroy, onMount, type Snippet } from "svelte";
+    import { addOverlay, removeOverlay, type OverlayPosition, type TransitionOpts } from "./overlays.svelte.js";
+
+    let {
+        id = crypto.randomUUID(),
+        children,
+        position = "center",
+        anchor,
+        layer,
+        transition,
+        z,
+    }: {
+        id?: string;
+        children: Snippet;
+        anchor?: HTMLElement;
+        layer?: string;
+        position?: OverlayPosition;
+        transition?: TransitionOpts;
+        z?: number;
+    } = $props();
+
+    onMount(() => {
+        addOverlay({ id, z, layer, snippet: children, transition, position, anchor });
+    });
+
+    onDestroy(() => {
+        removeOverlay(id);
+    });
+</script>
+

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

@@ -0,0 +1,14 @@
+import { type Snippet } from "svelte";
+import { type OverlayPosition, type TransitionOpts } from "./overlays.svelte.js";
+type $$ComponentProps = {
+    id?: string;
+    children: Snippet;
+    anchor?: HTMLElement;
+    layer?: string;
+    position?: OverlayPosition;
+    transition?: TransitionOpts;
+    z?: number;
+};
+declare const Overlay: import("svelte").Component<$$ComponentProps, {}, "">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

package/dist/{layout → components}/OverlayContainer.svelte

@@ -1,6 +1,8 @@
-<script lang="ts">import { overlays } from "./overlays.svelte.js";
-import OverlayLayer from "./OverlayLayer.svelte";
-import { slidefade } from "../utils/transitions.js";
+<script lang="ts">
+    import { overlays, type OverlayItem } from './overlays.svelte.js';
+	import OverlayLayer from './OverlayLayer.svelte';
+	import { slidefade } from '../util/transitions.js';
+
 </script>
 
 <div class="Overlay">
@@ -16,6 +18,7 @@ import { slidefade } from "../utils/transitions.js";
 
 <style>
     .Overlay {
+        isolation: isolate;
         display: block;
         position: fixed;
         top: 0;

package/dist/{layout → components}/OverlayContainer.svelte.d.ts

@@ -5,7 +5,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const OverlayContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {