lutra 0.1.0 → 0.1.5

package/dist/components/Indicator.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">
+	import { isStatusColor, StatusColors, type StatusColorOrString, type StatusColor } from "../util/color.js";
+
+    /**
+     * @description
+     * A status indicator. Can be used to show the state of something, like a task or a process.
+     * @aria role="status"
+     * @aria aria-label="" - The name of the status color if used, otherwise pass a `label` prop.
+     * @cssprop --size - The size of the indicator. (Default: 0.75em)
+     * @cssprop --animation-duration - The duration of the animation when motion is applied. Clamps lower value to 0.5s and upper value to 3s. (Default: 1.2s)
+     * @cssprop --animation-iteration-count - The number of times the animation should repeat. (Default: infinite)
+     * @cssprop --margin-inline - The inline margin for the indicator. (Default: calc(var(--size) * 0.75))
+     * @example
+     * <h5>Without motion</h5>
+     * <p>
+     * <Indicator /> <Indicator color="ok" /> <Indicator color="alert" /> <Indicator color="warn" /> <Indicator color="info" /> <Indicator color="task" /> Static indicators
+     * </p>
+     * <h5>With motion</h5>
+     * <p>
+     * <Indicator motion="tunnel" color="blue" --size="1em" />
+     * <Indicator motion="blink" color="alert" --animation-duration="1s" --size="1em" />
+     * <Indicator motion="spin" color="ok" --size="1em" />
+     * <Indicator motion="bulge" color="alert" --size="1em" />
+     * <Indicator motion="highlight" color="warn" --animation-duration="2s" --size="1em" />
+     * <Indicator motion="pulse" color="task" --size="1em" />
+     * <Indicator motion="typing" color="default" --size="1em" />
+     * Moving indicators
+     * </p>
+     */
+    let {
+        color = "default",
+        motion,
+        label
+    }: { 
+        /** The color of the tag. Select from default status colors or provide a CSS Color value. */
+        color?: StatusColorOrString;
+        /** Possible motion to apply to the indicator. */
+        motion?: "pulse" | "spin" | "blink" | "highlight" | "bulge" | "tunnel" | "typing";
+        /** ARIA label to use when a custom color is applied */
+        label?: string;
+    } = $props();
+    let isSet = $derived(isStatusColor(color));
+    let _label = $derived(isSet ? StatusColors[color as StatusColor] : label ? label : 'status');
+</script>
+
+<span role="status" aria-label="{_label}" class="Indicator {color} {motion}" style="--bgColor: {isSet ? 'var(--status-'+color+')' : color};"></span>
+
+<style>
+    .Indicator {
+        --isize: var(--size, 0.75em);
+        --icount: var(--animation-iteration-count, infinite);
+        --bwidth: min(3px, calc(var(--isize) * 0.15));
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        margin-inline: var(--margin-inline, 0 calc(var(--isize) * 0.75));
+        background: var(--bgColor);
+        block-size: var(--isize);
+        inline-size: var(--isize);
+        border-radius: 50%;
+        mask-size: 0% 0%;
+        --dur: clamp(0.5s, var(--animation-duration, 1.2s), 3s);
+        transition: all calc(var(--dur) / 2), width 0s, height 0s, margin 0s;
+        margin-block-start: -2px;
+        animation-name: none;
+        animation-duration: var(--dur);
+        animation-iteration-count: var(--icount);
+        border-width: var(--bwidth);
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+    }
+    .Indicator::after,
+    .Indicator::before {
+        box-sizing: border-box;
+        content: "";
+        position: absolute;
+        top: 0%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border-width: var(--bwidth);
+        border-style: solid;
+        border-color: transparent;
+        animation-name: none;
+        animation-duration: var(--dur);
+        animation-iteration-count: var(--icount);
+    }
+
+    /**
+     * Tunnel
+     */
+
+    .Indicator.tunnel {
+        background: transparent;
+        border-color: var(--bgColor);
+    }
+    .Indicator.tunnel::after,
+    .Indicator.tunnel::before {
+        animation-name: tunnel;
+        animation-timing-function: ease-in;
+        border-width: calc(var(--bwidth) * 2);
+        animation-duration: calc(var(--dur) * 2);
+    }
+    .Indicator.tunnel::before {
+        animation-delay: calc(-1 * var(--dur) * 0.95);
+    }
+    @keyframes tunnel {
+        0% {
+            border-color: var(--bgColor);
+            transform: scale(0.1);
+            opacity: 0;
+        }
+        10% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 1;
+        }
+        100% {
+            transform: scale(1.5);
+            opacity: 0;
+        }
+    }
+
+    /**
+     * Blink
+     */
+
+    .Indicator.blink {
+        animation-name: blink;
+        animation-timing-function: ease-in-out;
+    }
+    @keyframes blink {
+        0% {
+            opacity: 1;
+            transform: scale(1);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
+        }
+        25% {
+            opacity: 0.5;
+            transform: scale(0.95);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) transparent);
+        }
+        50% {
+            opacity: 0.5;
+            transform: scale(0.95);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) transparent);
+        }
+        75% {
+            opacity: 1;
+            transform: scale(1);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.15) var(--bgColor));
+        }
+    }
+
+    /**
+     * Bulge
+     */
+
+    .Indicator.bulge {
+        animation-name: bulge;
+        animation-timing-function: ease-in-out;
+    }
+    @keyframes bulge {
+        0% {
+            transform: scale(0.85);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor)) brightness(1) saturate(1);
+        }
+        50% {
+            transform: scale(1);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor)) brightness(1.15) saturate(1.15);
+        }
+        100% {
+            transform: scale(0.85);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor)) brightness(1) saturate(1);
+        }
+    }
+
+    /**
+     * Highlight
+     */
+
+    .Indicator.highlight {
+        animation-name: hilite2;
+        animation-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);
+        border-width: 0;
+    }
+
+    @keyframes hilite2 {
+        0% {
+            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
+        }
+        35% {
+            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
+        }
+        50% {
+            filter: brightness(1.05) saturate(1.05) drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor));
+        }
+        65% {
+            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
+        }
+        100% {
+            filter: brightness(1) saturate(1) drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor));
+        }
+    }
+
+    .Indicator.highlight::before {
+        border-width: 0;
+    }
+
+    .Indicator.highlight::after {
+        background: linear-gradient(45deg, transparent, transparent, rgba(255,255,255,0.75), transparent, transparent);
+        animation-name: hilite;
+        animation-timing-function: linear;
+        mix-blend-mode: luminosity;
+        border-width: 0;
+        filter: blur(calc(var(--isize) * 0.12));
+        background-size: 500% 120%;
+    }
+    @keyframes hilite {
+        0% {
+            background-position: 100% center;
+        }
+        100% {
+            background-position: 0 center;
+        }
+    }
+
+    /**
+     * Spin
+     */
+
+    .Indicator.spin {
+        background: transparent;
+        --mask: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 45%, black 50%, black 100%);
+        -webkit-mask-image: var(--mask);
+        mask-image: var(--mask);
+        filter: drop-shadow(0 0 calc(var(--isize) * 0.05) var(--bgColor));
+    }
+    .Indicator.spin::after,
+    .Indicator.spin::before {
+        animation-name: spin;
+        background: none;
+        animation-timing-function: linear;
+        mask-mode: luminance;
+        background-origin: border-box;
+        background-clip: border-box;
+    }
+    .Indicator.spin::before {
+        animation-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);
+        animation-delay: calc(-1 * var(--dur) * 0.85);
+        animation-name: spin2;
+    }
+    @keyframes spin {
+        0% {
+            background-image: conic-gradient(from 0deg, transparent, transparent 73%, var(--bgColor) 73%, var(--bgColor) 100%);
+            transform: rotate(0deg) scale(1.2);
+        }
+        100% {
+            background-image: conic-gradient(from 0deg, transparent, transparent 73%, var(--bgColor) 73%, var(--bgColor) 100%);
+            transform: rotate(360deg) scale(1.2);
+        }
+    }
+    @keyframes spin2 {
+        0% {
+            background-image: conic-gradient(from 0deg, transparent, transparent 50%, var(--bgColor) 75%, var(--bgColor) 100%);
+            transform: rotate(0deg) scale(1.2);
+        }
+        100% {
+            background-image: conic-gradient(from 0deg, transparent, transparent 50%, var(--bgColor) 75%, var(--bgColor) 100%);
+            transform: rotate(360deg) scale(1.2);
+        }
+    }
+
+    /**
+     * Pulse
+     */
+
+    .Indicator.pulse {
+        animation-name: pulse;
+        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+    @keyframes pulse {
+        0% {
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor));
+            transform: scale(0.85);
+        }
+        25% {
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.01) var(--bgColor)) brightness(1) saturate(1);
+            transform: scale(1);
+        }
+        50% {
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor)) brightness(1.25) saturate(1.25);
+            transform: scale(1);
+        }
+        75% {
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.1) var(--bgColor)) brightness(1.25) saturate(1.25);
+        }
+        100% {
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.03) var(--bgColor)) brightness(1) saturate(1);
+            transform: scale(0.85);
+        }
+    }
+    .Indicator.pulse::after {
+        border-color: var(--bgColor);
+        border-width: calc(var(--bwidth) * 0.75);
+        animation-name: task;
+        animation-timing-function: ease-out;
+        filter: drop-shadow(0 0 calc(var(--isize) * 0.025) var(--bgColor));
+    }
+    @keyframes task {
+        0% {
+            transform: scale(.5);
+            opacity: 1;
+            filter: blur(calc(var(--isize) * 0.05)) saturate(1);
+        }
+        75% {
+            opacity: 0.25;
+            filter: blur(calc(var(--isize) * 0.01)) saturate(1);
+        }
+        100% {
+            transform: scale(2.75);
+            opacity: 0;
+            filter: blur(0) saturate(0.5);
+        }
+    }
+
+    /**
+     * Typing 
+     */
+
+    .Indicator.typing {
+        --mask-image: radial-gradient(ellipse, black, black 65%, transparent 70%, transparent 100%);
+        mask-image: var(--mask-image);
+        -webkit-mask-image: var(--mask-image);
+        mask-size: 100% 100%;
+        width: calc(var(--isize) * 1.5);
+        background: transparent;
+        border-radius: 0;
+        position: relative;
+    }
+    .Indicator.typing::before,
+    .Indicator.typing::after {
+        animation-name: typing;
+        background: var(--bgColor);
+        width: calc(var(--isize) * 0.5);
+        height: calc(var(--isize) * 0.5);
+        top: 50%;
+        left: calc(50% - var(--isize) * 0.25);
+        animation-timing-function: ease-in;
+        animation-direction: reverse;
+    }
+    .Indicator.typing::before,
+    .Indicator.recording::before {
+        animation-delay: calc(-1 * var(--dur) * 0.5);
+    }
+    @keyframes typing {
+        0% {
+            transform: translateX(-100%) translateY(-50%) scale(0.25);
+            opacity: 0;
+        }
+        25% {
+            transform: translateX(-50%) translateY(-50%) scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: translateX(0) translateY(-50%) scale(1);
+            filter: drop-shadow(0 0 calc(var(--isize) * 0.01) var(--bgColor));
+        }
+        75% {
+            transform: translateX(50%) translateY(-50%) scale(1);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(100%) translateY(-50%) scale(0.25);
+            opacity: 0;
+        }
+    }
+
+</style>

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

@@ -0,0 +1,12 @@
+import { type StatusColorOrString } from "../util/color.js";
+type $$ComponentProps = {
+    /** The color of the tag. Select from default status colors or provide a CSS Color value. */
+    color?: StatusColorOrString;
+    /** Possible motion to apply to the indicator. */
+    motion?: "pulse" | "spin" | "blink" | "highlight" | "bulge" | "tunnel" | "typing";
+    /** ARIA label to use when a custom color is applied */
+    label?: string;
+};
+declare const Indicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/Inset.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+    }: {
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="Inset">
+    {@render children()}
+</div>
+
+<style>
+    .Inset {
+        margin-block: calc(var(--inset-block, 0) * -1);
+        margin-inline: calc(var(--inset-inline, 0) * -1);
+    }
+    .Inset > * {
+        display: block;
+    }
+</style>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Inset: import("svelte").Component<$$ComponentProps, {}, "">;
+type Inset = ReturnType<typeof Inset>;
+export default Inset;

package/dist/components/Layout.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from "svelte";
     import "../css/lutra.css";
 	import Theme from "./Theme.svelte";
+    import OverlayContainer from "./OverlayContainer.svelte";
     /**
      * @description
      * Default layout component that imports default styles and wraps the entire application in a theme.
@@ -21,11 +22,11 @@
     <div class="Layout">
         {@render children()}
     </div>
+    <OverlayContainer />
 </Theme>
 
 <style>
     .Layout {
-        background: var(--bg-app);
         min-height: 100dvh;
         height: 100dvh;
     }

package/dist/components/MenuDropdown.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+    import type { MenuItem as Item } from "./MenuTypes.js";
+	import MenuItem from "./MenuItem.svelte";
+	import UiContent from "./UIContent.svelte";
+	import { arrowNavigation, getNextFocusableElement, matchOnType } from "../util/keyboard.svelte.js";
+	import { findContainingBlock, getPossiblyContainedPosition } from "../util/dom.js";
+	import Overlay from "./Overlay.svelte";
+
+    /**
+     * @description
+     * A menu component that can be used to create dropdown menus.
+     */
+    let {
+        open = $bindable(false),
+        items,
+        trigger,
+    }: {
+        /** Whether the menu is open */
+        open?: boolean;
+        /** The items to display in the menu */
+        items: Item[];
+        /** The trigger for the menu */
+        trigger: string | Snippet<[{ toggle: () => void, isOpen: boolean }]>;
+    } = $props();
+
+    let _open = $state(open);
+    let triggerEl: HTMLDivElement | null = $state(null);
+    let contentEl: HTMLDivElement | null = $state(null);
+    let menuEl: HTMLDivElement | null = $state(null);
+    let currentIndex: number = $state(-1);
+    let keyboardHasFocus: boolean = $state(false);
+
+    const id = crypto.randomUUID();
+
+    $effect(() => {
+        if(_open) {
+            window.addEventListener('click', clickoutside);
+            window.addEventListener('keydown', onkeydown);
+        } else {
+            window.removeEventListener('click', clickoutside);
+            window.removeEventListener('keydown', onkeydown);
+        }
+    });
+
+    function toggle() {
+        _open = !_open;
+    }
+
+    let scrollable = $derived.by(() => {
+        if(!contentEl) return false;
+        return contentEl.scrollHeight > contentEl.clientHeight;
+    });
+
+    function onclick(e: MouseEvent) {
+        e.preventDefault();
+        _open = !_open;
+    }
+
+    function clickoutside(e: MouseEvent) {
+        if(!_open) return;
+        if(contentEl && !contentEl.contains(e.target as Node) && !triggerEl?.contains(e.target as Node)) {
+            _open = false;
+        }
+    }
+
+    function onkeydown(e: KeyboardEvent) {
+        if(!_open) return;
+        const active = document.activeElement as HTMLButtonElement | HTMLAnchorElement;
+        switch(e.key) {
+            case "Escape":
+                e.preventDefault();
+                _open = false;
+                break;
+            case "Tab":
+                // try to open the next menu if it exists
+                e.preventDefault();
+                e.stopPropagation();
+                _open = false;
+                setTimeout(() => {
+                    const nextEl = getNextFocusableElement(menuEl, triggerEl, e.shiftKey ? "previous" : "next");
+                    console.log('nextEl', nextEl)
+                    if(nextEl) {
+                        nextEl.focus();
+                        if(nextEl.tagName === "BUTTON" || nextEl.tagName === "A" && nextEl.parentElement?.classList.contains("Trigger")) {
+                            nextEl.click();
+                        }
+                    }
+                }, 0);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                arrowNavigation(contentEl, "down");
+                matchOnType(contentEl, e); // call to reset the search
+                keyboardHasFocus = true;
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                arrowNavigation(contentEl, "up");
+                matchOnType(contentEl, e); // call to reset the search
+                keyboardHasFocus = true;
+                break;
+            case "Enter":
+            case "Space":
+                e.preventDefault();
+                active.click();
+                break;
+            default:
+                matchOnType(contentEl, e);
+        }
+    }
+
+    function mouseover(e: MouseEvent, item: Item, index: number) {
+        if(item.type === "item") {
+            currentIndex = index;
+        }
+    }
+
+</script>
+
+
+<UiContent>
+    <div class="MenuDropdown" bind:this={menuEl}>
+        <div
+            class="Trigger"
+            bind:this={triggerEl}
+        >
+            {#if typeof trigger === "string"}
+                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
+                    {trigger}
+                </button>
+            {:else}
+                {@render trigger({ toggle: toggle, isOpen: _open })}
+            {/if}
+        </div>
+        {#if _open && triggerEl}
+            <Overlay position="anchor" id="o-{id}" anchor={triggerEl} layer="menu">
+                <div {id}
+                    class="MenuDropdownContent"
+                    class:scrollable={scrollable}
+                    role="menu"
+                    bind:this={contentEl}
+                >
+                    <ul>
+                        {#each items as item, index}
+                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} item={item} {index} />
+                        {/each}
+                    </ul>
+                </div>
+            </Overlay>
+        {/if}
+    </div>
+</UiContent>
+
+<style>
+    .MenuDropdown {
+        position: relative;
+    }
+
+    .Trigger {
+        position: relative;
+        display: inline-flex;
+    }
+
+    .MenuDropdownContent {
+        max-height: calc(50vh - 2rem);
+        margin: 0;
+        z-index: 1000;
+        margin: 0;
+        border: var(--menu-border-size) var(--menu-border-style) var(--menu-border-color);
+        border-radius: var(--menu-border-radius);
+        box-shadow: 0 0.5rem 1rem var(--shadow-color);
+        background-color: var(--menu-background-color);
+        width: var(--width, 25ch);
+        overflow-x: clip;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color);
+    }
+    
+    .MenuDropdownContent.scrollable {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .MenuDropdownContent :global(:has(li:last-of-type[data-type="item"])) {
+        padding-block-end: 0.5rem;
+    }
+
+    ul {
+        margin: 0;
+        list-style: none;
+        padding: 0;
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { MenuItem as Item } from "./MenuTypes.js";
+type $$ComponentProps = {
+    /** Whether the menu is open */
+    open?: boolean;
+    /** The items to display in the menu */
+    items: Item[];
+    /** The trigger for the menu */
+    trigger: string | Snippet<[{
+        toggle: () => void;
+        isOpen: boolean;
+    }]>;
+};
+declare const MenuDropdown: import("svelte").Component<$$ComponentProps, {}, "open">;
+type MenuDropdown = ReturnType<typeof MenuDropdown>;
+export default MenuDropdown;