lutra 0.0.33 → 0.1.4

package/dist/components/Image.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+    /**
+     * @description
+     * An image component that can be used to display images with different aspect ratios and fit modes.
+     * Can also decode a BlurHash.
+     * @cssprop --width - The width of the image.
+     * @cssprop --height - The height of the image.
+     * @example
+     * <Image aspectRatio="16:9" fit="cover" src="https://images.unsplash.com/photo-1712337646541-d0c6f85447f8" alt="An example image" />
+     */
+    
+	import { browser } from "$app/environment";
+    import { decode } from "blurhash";
+	import { fade } from "svelte/transition";
+
+    let {
+        hash,
+        width,
+        height,
+        aspectRatio,
+        fit,
+        src,
+        srcset,
+        alt,
+        style = '',
+        class: className,
+        ...rest
+    }: {
+        /**
+         * @description
+         * A BlurHash string to decode into an image.
+         */
+        hash?: string;
+        /**
+         * @description
+         * The aspect ratio of the image.
+         */
+        aspectRatio?: string;
+        /**
+         * @description
+         * The fit mode of the image.
+         * @default 'cover'
+         */
+        fit?: 'cover' | 'contain' | 'scale-down';
+        /**
+         * @description
+         * The source URL of the image.
+         */
+        src?: string;
+        /**
+         * @description
+         * The source URL of the image (with srcset).
+         */
+        srcset?: string;
+        /**
+         * @description
+         * The alt text of the image.
+         */
+        alt?: string;
+        /**
+         * @description
+         * The width of the image.
+         */
+        width?: string | number;
+        /**
+         * @description
+         * The height of the image.
+         */
+        height?: string | number;
+        /**
+         * @description
+         * Additional style attributes for the image.
+         */
+        style?: string;
+        /**
+         * @description
+         * Additional classes to apply to the image.
+         */
+        class?: string;
+    } = $props();
+
+    let canvas: HTMLCanvasElement | null = $state(null);
+    let el: HTMLImageElement | null = $state(null);
+    let elWidth = $state(32);
+    let elHeight = $state(32);
+
+    if(!src && srcset) {
+        const [src1] = srcset.split(", ");
+        src = src1.split(" ")[0];
+    }
+
+    if(aspectRatio) {
+        style += ` aspect-ratio: ${aspectRatio};`;
+    }
+
+    let decoded = $state(false);
+    let loaded = $state(browser ? false : true);
+
+    const onload = () => {
+        loaded = true;
+    };
+
+    $effect(() => {
+        if(hash) {
+            setTimeout(() => {
+                const pixels = decode(hash!, elWidth, elHeight);
+                const ctx = canvas!.getContext("2d");
+                const imageData = ctx!.createImageData(elWidth, elHeight);
+                imageData.data.set(pixels);
+                ctx!.putImageData(imageData, 0, 0);
+                decoded = true;
+            }, 0);
+        }
+    });
+    
+</script>
+
+<div class="Image" class:loaded>
+    <img
+        bind:this={el}
+        bind:clientWidth={elWidth}
+        bind:clientHeight={elHeight}
+        {onload}
+        {src}
+        {srcset}
+        {alt}
+        width={width ? width : '100%'}
+        height={height ? height : '100%'}
+        {style}
+        class="{className} {fit}"
+        {...rest}
+    />
+    {#if !loaded && hash}
+        <canvas class:decoded out:fade={{ duration: 100 }} width={elWidth} height={elHeight} bind:this={canvas}></canvas>
+    {/if}
+</div>
+
+<style>
+    .Image {
+        position: relative;
+        display: grid;
+        grid-template-areas: "img";
+        width: var(--width, 100%);
+        height: var(--height, 100%);
+    }
+    canvas {
+        z-index: 2;
+        opacity: 0;
+        width: 100%;
+        grid-area: img;
+        transition: opacity var(--transition-speed-slow);
+    }
+    canvas.decoded {
+        opacity: 1;
+    }
+    img {
+        z-index: 1;
+        grid-area: img;
+        display: inline-block;
+        vertical-align: middle;
+        opacity: 0;
+        transition: opacity var(--transition-speed-slow);
+        width: var(--width, 100%);
+        height: var(--height, 100%);
+    }
+    img.cover { object-fit: cover; }
+    img.contain { object-fit: contain; }
+    img.scale-down { object-fit: scale-down; }
+    .Image.loaded img {
+        opacity: 1;
+    }
+</style>

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

@@ -0,0 +1,56 @@
+type $$ComponentProps = {
+    /**
+     * @description
+     * A BlurHash string to decode into an image.
+     */
+    hash?: string;
+    /**
+     * @description
+     * The aspect ratio of the image.
+     */
+    aspectRatio?: string;
+    /**
+     * @description
+     * The fit mode of the image.
+     * @default 'cover'
+     */
+    fit?: 'cover' | 'contain' | 'scale-down';
+    /**
+     * @description
+     * The source URL of the image.
+     */
+    src?: string;
+    /**
+     * @description
+     * The source URL of the image (with srcset).
+     */
+    srcset?: string;
+    /**
+     * @description
+     * The alt text of the image.
+     */
+    alt?: string;
+    /**
+     * @description
+     * The width of the image.
+     */
+    width?: string | number;
+    /**
+     * @description
+     * The height of the image.
+     */
+    height?: string | number;
+    /**
+     * @description
+     * Additional style attributes for the image.
+     */
+    style?: string;
+    /**
+     * @description
+     * Additional classes to apply to the image.
+     */
+    class?: string;
+};
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

@@ -1,14 +1,49 @@
-<script lang="ts">import { isStatusColor, StatusColors } from "../utils/color.js";
-let {
-  color = "default",
-  motion,
-  label
-} = $props();
-let isSet = $derived(isStatusColor(color));
-let _label = $derived(isSet ? StatusColors[color] : label ? label : "status");
+<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 role="status" aria-label="{_label}" class="Indicator {color} {motion}" style="--bgColor: {isSet ? 'var(--status-'+color+')' : color};"></span>
 
 <style>
     .Indicator {

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/{display → components}/Inset.svelte

@@ -1,6 +1,11 @@
-<script lang="ts">let {
-  children
-} = $props();
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+    }: {
+        children: Snippet;
+    } = $props();
 </script>
 
 <div class="Inset">

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	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.
+     */
+    let {
+        theme,
+        children,
+    }: { 
+        /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
+        theme?: 'light' | 'dark' | undefined;
+        /** The content to display. */
+        children: Snippet;
+    } = $props();
+</script>
+
+<Theme theme={theme}>
+    <div class="Layout">
+        {@render children()}
+    </div>
+    <OverlayContainer />
+</Theme>
+
+<style>
+    .Layout {
+        min-height: 100dvh;
+        height: 100dvh;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import "../css/lutra.css";
+type $$ComponentProps = {
+    /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
+    theme?: 'light' | 'dark' | undefined;
+    /** The content to display. */
+    children: Snippet;
+};
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

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;