lutra 0.1.0 → 0.1.5

package/dist/components/MenuItem.svelte

@@ -0,0 +1,159 @@
+<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 -->
+<li
+    onmouseover={mouseover}
+    data-index={index}
+    class:keyboardHasFocus
+    class:divider={item.type === 'divider'}
+    class:header={item.type === 'header'}
+    class={shape}
+    data-type="{item.type}"
+    style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}"
+>
+    {#if item.type === 'divider'}
+        <hr />
+    {:else if item.type === 'header'}
+        <div class="Header">
+            <MenuItemContent {...item} />
+        </div>
+    {:else if item.type === 'text'}
+        <div class="Text">
+            <MenuItemContent {...item} />
+        </div>
+    {:else if item.type === 'item'}
+        {#if item.href}
+            <a href="{item.href}" class="Item" bind:this={el}>
+                <span class="Content">
+                    <MenuItemContent {...item} />
+                </span>
+                {#if item.shortcut}
+                    <span class="Shortcut">{item.shortcut}</span>
+                {/if}
+            </a>
+        {: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">
+                    <MenuItemContent {...item} />
+                </span>
+                {#if item.shortcut}
+                    <span class="Shortcut">{item.shortcut}</span>
+                {/if}
+            </button>
+        {:else if item.component}
+            <div class="Item Custom">
+                <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;
+        padding: 0;
+        user-select: none;
+    }
+
+    li .Item,
+    li .Header {
+        font-size: var(--font-size, 0.9em);
+        text-align: left;
+        padding-block: 0.5rem;
+        padding-inline: 1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        color: inherit;
+        text-decoration: none;
+        color: var(--color);
+        --inset-block: 0.5rem;
+        --inset-inline: 1rem;
+        border-radius: none;
+    }
+
+    li.rounded .Item,
+    li.rounded .Header {
+        border-radius: var(--menu-border-radius);
+    }
+
+    li .Header {
+        font-weight: 600;
+    }
+
+    li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
+    li .Item:not(.Custom):focus-visible {
+        background-color: var(--menu-background-color-hover);
+        cursor: pointer;
+        outline: none;
+    }
+
+    li .Item span.Shortcut {
+        font-size: max(0.75em, 9px);
+        text-align: right;
+        color: var(--menu-text-color-subtle);
+    }
+
+    li .Item:not(.Custom):active {
+        scale: 1;
+    }
+
+    li.divider {
+        padding-block: 0.5rem;
+    }
+
+    hr {
+        display: block;
+        border: none;
+        margin: 0;
+        border-top: 1px solid var(--menu-border-color);
+    }
+
+    li:first-child[data-type="item"] {
+        margin-block-start: var(--menu-item-margin, 0.5rem);
+    }
+
+    @media (pointer: none) {
+        li .Item span.Shortcut {
+            display: none;
+        }        
+    }
+</style>

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/components/MenuTypes.d.ts

@@ -0,0 +1,79 @@
+import type { StatusColorOrString } from "../util/color.js";
+import type { Component, Snippet } from "svelte";
+export type MenuItem = {
+    /** Type of menu item to render. */
+    type: 'divider';
+} | {
+    /** Type of menu item to render. */
+    type: 'header';
+    /** Text label of the item to display to the user. */
+    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: 'text';
+    /** Text label of the item to display to the user. */
+    text?: string;
+    /** Color to use for the item. */
+    color?: StatusColorOrString;
+} | {
+    /** Type of menu item to render. */
+    type: 'item';
+    /** 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. */
+    icon?: string | Component;
+    /** Path or URL to use for the menu item. */
+    href?: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent, item: MenuItem) => void;
+    /** If true, disables the item. */
+    disabled?: boolean;
+    /** Color to use for the item. */
+    color?: StatusColorOrString;
+    /** Menu item children. Pass an array of menu items to create a nested menu. */
+    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. */
+    href?: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent, item: TabItem, index: number) => void;
+    /** If true, overrides the currently selected item. */
+    active?: boolean;
+};
+export type TabbedContentItem = {
+    /** Text label of the item to display to the user. */
+    label: string;
+    /** URL hash to use for the item. */
+    hash?: string;
+    /** Content to display when the item is selected. */
+    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. */
+    label: 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. */
+    icon?: string | Component;
+    /** Path or URL to use for the breadcrumb item. */
+    href?: string;
+};

package/dist/components/MenuTypes.js

@@ -0,0 +1 @@
+export {};

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/components/Notification.svelte

@@ -0,0 +1,115 @@
+<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()}
+    <div class="Notification">
+        {#if !actions}
+            <Close position="top right" {onclick} />
+        {/if}
+        {#if icon}
+            <div class="Icon">
+                <Icon {icon} --vertical-align="text-top" --icon-width="2rem" --icon-height="2rem" />
+            </div>
+        {/if}
+        <div class="Content">
+            <PageContent --margin-scale="0.35">
+                {#if children}
+                    {@render children()}
+                {:else}
+                    {#if title}
+                        <h5>{title}</h5>
+                    {/if}
+                    <p>{content}</p>
+                {/if}
+            </PageContent>
+        </div>
+        {#if actions}
+            <div class="Actions">
+                {@render actions()}
+            </div>
+        {/if}
+    </div>
+{/snippet}
+
+{#if children}
+    <Overlay z={100} layer="notifications" position="bottom right" {id}>
+        {@render notification()}
+    </Overlay>
+{:else}
+    {@render notification()}
+{/if}
+
+<style>
+    .Notification {
+        display: block;
+        pointer-events: none;
+        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;
+        display: grid;
+        grid-template-areas: "content";
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        box-shadow: 0 0.5rem 1rem var(--shadow-color);
+    }
+    .Notification:has(.Icon):has(.Actions) {
+        grid-template-areas: "icon content actions";
+        grid-template-columns: auto 1fr auto;
+    }
+    .Notification:not(:has(.Icon)):has(.Actions) {
+        grid-template-areas: "content actions";
+        grid-template-columns: 1fr auto;
+    }
+    .Notification:has(.Icon):not(:has(.Actions)) {
+        grid-template-areas: "icon content";
+        grid-template-columns: auto 1fr;
+    }
+    .Icon {
+        grid-area: icon;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        pointer-events: auto;
+    }
+    .Content {
+        grid-area: content;
+    }
+    .Actions {
+        grid-area: actions;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        pointer-events: auto;
+    }
+</style>

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/components/OverlayContainer.svelte

@@ -0,0 +1,31 @@
+<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">
+    <OverlayLayer position="top left" items={overlays.topLeft} />
+    <OverlayLayer position="top right" items={overlays.topRight} />
+    <OverlayLayer position="top center" items={overlays.topCenter} />
+    <OverlayLayer position="bottom left" items={overlays.bottomLeft} />
+    <OverlayLayer position="bottom right" items={overlays.bottomRight} />
+    <OverlayLayer position="bottom center" items={overlays.bottomCenter} />
+    <OverlayLayer position="center" items={overlays.center} />
+    <OverlayLayer position="anchor" items={overlays.anchor} />
+</div>
+
+<style>
+    .Overlay {
+        isolation: isolate;
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1000;
+        pointer-events: none;
+    }
+</style>

package/dist/components/OverlayContainer.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 OverlayContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OverlayContainer = InstanceType<typeof OverlayContainer>;
+export default OverlayContainer;