lutra 0.1.0 → 0.1.4

package/dist/components/Avatar.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { hexRelativeLuminance, stringToColor } from '../util/color.js';
+	import Image from './Image.svelte';
+
+    /**
+     * @description
+     * An avatar is a user profile photo or a logo. It can be a placeholder or a URL to an image. If there is no image, the first letter of the name will be used as a placeholder.
+     * You can pick from three crop styles: circle, square, or rounded. The color of the placeholder is based on the name, making each visually distinct from each other.
+     * @cssprop --border-radius - The border radius of the avatar when cropped as rounded.
+     * @cssprop --mask-image - Custom mask image to use for the avatar.
+     * @example
+     * <p>With picture:</p>
+     * <Avatar name="Auth70" shape="rounded" src="https://avatars.githubusercontent.com/u/122825113?s=200&v=4" --size="4rem" />
+     * <p>Without picture:</p>
+     * <Avatar name="Moxie" shape="square" />
+     * <Avatar name="Napoleon" shape="rounded" />
+     * <Avatar name="Byron" shape="circle" />
+     */
+    let {
+        src,
+        srcset,
+        alt,
+        color,
+        size = '3rem',
+        name = "N/A",
+        shape = 'circle',
+        children,
+    }: {
+        src?: string;
+        srcset?: string;
+        alt?: string;
+        color?: string;
+        size?: string;
+        name?: string;
+        shape?: 'circle' | 'square' | 'rounded';
+        children?: Snippet;
+    } = $props();
+
+    const userColor = (src || srcset) ? '#666666' : color ?? stringToColor(name);
+    const luminance = hexRelativeLuminance(userColor);
+    const textColor = luminance < 0.5 ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)';
+    const firstCharacter = [...name][0]; // supports multi-byte characters. name[0] would not.
+</script>
+
+<figure class="Avatar {shape}" style="--user-color: {userColor}; --text-color: {textColor}; --size: {size}">
+    {#if src}
+        <Image
+            src={src}
+            srcset={srcset}
+            alt={alt ?? name}
+            fit="cover"
+            --width={size}
+            --height={size}
+        />
+    {:else}
+        <div class="Placeholder">
+            {#if children}
+                {@render children()}
+            {:else}
+                <span>{firstCharacter}</span>
+            {/if}
+        </div>
+    {/if}
+</figure>
+
+<style>
+    .Avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        block-size: var(--size, 3rem);
+        inline-size: var(--size, 3rem);
+        overflow: clip;
+        background-color: var(--user-color);
+        mask-image: var(--mask-image, none);
+        mask-size: 100% 100%;
+        mask-repeat: no-repeat;
+        -webkit-mask-image: var(--mask-image, none);
+        -webkit-mask-size: 100% 100%;
+        -webkit-mask-repeat: no-repeat;
+    }
+    .Avatar.circle { border-radius: 50%; }
+    .Avatar.square { border-radius: 0; }
+    .Avatar.rounded { border-radius: var(--border-radius); }
+    .Avatar img {
+        block-size: 100%;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+    .Avatar .Placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 100%;
+        inline-size: 100%;
+        background-color: var(--user-color);
+        color: var(--text-color);
+        user-select: none;
+        font-size: 1rem;
+        font-weight: 600;
+        user-select: none;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    src?: string;
+    srcset?: string;
+    alt?: string;
+    color?: string;
+    size?: string;
+    name?: string;
+    shape?: 'circle' | 'square' | 'rounded';
+    children?: Snippet;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Close.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    let {
+        onclick,
+        position
+    }: {
+        onclick?: (e: MouseEvent) => void;
+        position?: "top left" | "top right" | "bottom left" | "bottom right";
+    } = $props();
+</script>
+
+<button class="Close {position}" {onclick} aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+</button>
+
+<style>
+    .Close {
+        cursor: pointer;
+        padding: var(--close-padding, 0.5rem);
+        border-radius: 50%;
+        color: var(--text-color, light-dark(black, white));
+        cursor: pointer;
+        pointer-events: auto;
+        border: none;
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: inherit;
+        text-align: inherit;
+        display: inline-block;
+    }
+
+    svg {
+        display: block;
+        margin: 0;
+        width: max(1.5rem, 16px);
+        height: max(1.5rem, 16px);
+    }
+
+    .Close:hover {
+        color: var(--text-color-subtle, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)));
+    }
+
+    .Close.top {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 100;
+    }
+
+    .Close.bottom {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    .Close.left {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: auto;
+    }
+
+    .Close.right {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    onclick?: (e: MouseEvent) => void;
+    position?: "top left" | "top right" | "bottom left" | "bottom right";
+};
+declare const Close: import("svelte").Component<$$ComponentProps, {}, "">;
+type Close = ReturnType<typeof Close>;
+export default Close;

package/dist/components/ContextTip.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+    import Tooltip from "./Tooltip.svelte";
+	import Help from "../icons/IconHelp.svelte";
+	import Icon from "./Icon.svelte";
+
+    /**
+     * @description
+     * A component that displays a context tip.
+     * @example
+     * <ContextTip tip="This is a context tip" />
+     */
+    let {
+        tip
+    }: {
+        tip: string | Snippet;
+    } = $props();
+</script>
+
+<Tooltip {tip}>
+    <a href="#contexttip" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" --vertical-align="baseline" />
+    </a>
+</Tooltip>
+
+<style>
+    a {
+        border-radius: 50%;
+        color: var(--overlay-color, light-dark(black, white));
+        height: 16px;
+        width: 16px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    a:focus-visible {
+        color: var(--focus-ring-color);
+        outline-offset: 0px;
+    }
+</style>

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

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

package/dist/components/Icon.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { Component } from "svelte";
+
+    /**
+     * @description
+     * A component that displays an icon. It can be an image url or a component. The icon will be centered in the container.
+     * @cssprop --icon-width - The width of the icon. (Default: var(--font-size, 1em))
+     * @cssprop --icon-height - The height of the icon. (Default: var(--font-size, 1em))
+     * @cssprop --icon-color - The color of the icon. (Default: var(--text-color, currentColor))
+     * @example
+     * <script>
+     * import Copy from 'lutra/Icons/Copy.svelte';
+     * import Link from 'lutra/Icons/Link.svelte';
+     * <\/script>
+     * <Icon icon={Link} alt="Link icon" />
+     * <Icon icon={Copy} alt="Copy icon" />
+     */
+
+    let {
+        icon,
+        alt,
+    }: {
+        icon: string | Component;
+        alt?: string,
+    } = $props();
+
+    let Icon = icon as Component;
+
+</script>
+
+<span class="Icon" aria-label="icon">
+    {#if typeof icon === "string"}
+        <img src={icon} alt={alt ? alt : 'Icon'} width="100%" height="100%" />
+    {:else}
+        <Icon />
+    {/if}
+</span>
+
+<style>
+    .Icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1em;
+        line-height: inherit;
+        width: max(
+            var(--icon-width,
+                var(--icon-height, 1rem)
+            ), 16px);
+        height: max(var(--icon-height, auto), 16px);
+        color: var(--icon-color, currentColor);
+        overflow: clip;
+        vertical-align: var(--vertical-align, text-bottom);
+        cursor: var(--cursor, default);
+    }
+    img,
+    .Icon :global(svg) {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+</style>

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

@@ -0,0 +1,8 @@
+import type { Component } from "svelte";
+type $$ComponentProps = {
+    icon: string | Component;
+    alt?: string;
+};
+declare const Icon: Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/IconButton.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+    import type { Component, Snippet } from "svelte";
+    import Icon from './Icon.svelte';
+	import { fly } from "svelte/transition";
+	import { popBezier, popBezierInverse } from "../util/transitions.js";
+
+    /**
+     * @description
+     * A component that displays an icon with a possible label. It can also have a click event.
+     * The button has a padding of 0.75em by default to make it easier to tap on mobile devices. The padding can be changed using the `--padding` CSS variable.
+     * Icon and text color will be inherited from the parent element.
+     * @cssprop --padding - The padding of the icon button. (Default: 0.75em)
+     * @example
+     * <script>
+     * import Copy from 'lutra/Icons/Copy.svelte';
+     * import Link from 'lutra/Icons/Link.svelte';
+     * <\/script>
+     * <IconButton icon={Link} onclick={() => alert('clicked')} />
+     * <IconButton icon={Copy} onclick={() => alert('clicked')}>Copy</IconButton>
+     */
+    let {
+        icon,
+        disabled,
+        children,
+        onclick,
+        mask = true
+    }: {
+        /** The icon to display. */
+        icon: string | Component;
+        /** The children to display. */
+        children?: Snippet,
+        /** The onclick event. */
+        onclick?: (event: MouseEvent) => void,
+        /** Whether the button is disabled. */
+        disabled?: boolean,
+        /** Whether to mask the content. */
+        mask?: boolean
+    } = $props();
+
+</script>
+
+{#snippet inside()}
+    <span class="IconMask" class:mask>
+        {#key icon}
+            <span class="IconContent" in:fly={{ duration: 250, y: -32, easing: popBezier }} out:fly={{ duration: 250, y: 32, easing: popBezierInverse }}>
+                <Icon {icon} --cursor="pointer" />
+                {#if children}
+                    <span class="Text">
+                        {@render children()}
+                    </span>
+                {/if}
+            </span>
+        {/key}
+    </span>
+{/snippet}
+
+{#if onclick}
+    <button type="button" {disabled} class="IconButton" {onclick}>
+        {@render inside()}
+    </button>
+{:else}
+    <span class="IconButton">
+        {@render inside()}
+    </span>
+{/if}
+
+<style>
+    .IconButton {
+        display: inline-flex;
+        align-items: stretch;
+        color: inherit;
+        opacity: 1;
+        background-color: var(--field-background-color, transparent);
+        transition: background-color 0.04s;
+        border-radius: var(--field-border-radius);
+    }
+    .IconButton:hover {
+        background-color: var(--menu-background-color-hover);
+    }
+    .IconButton:active {
+        scale: 1;
+    }
+    button.IconButton {
+        border: none;
+        background: none;
+        cursor: pointer;
+        color: var(--text-color-p, light-dark(black, white));
+    }
+    .IconMask {
+        height: 100%;
+        padding-inline: calc(var(--padding, 0.75em) * 0.8);
+        padding-block: calc(var(--padding, 0.75em) * 0.8);
+        display: inline-grid;
+        gap: 0.5rem;
+        grid-template: "icon";
+        align-items: center;
+    }
+    .IconMask.mask {
+        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0));
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0));
+    }
+    .IconContent {
+        grid-area: icon;
+        display: inline-flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+    @media(max-width: 960px) {
+        .IconMask {
+            padding-inline: calc(var(--padding, 0.75em) * 0.75);
+            padding-block: calc(var(--padding, 0.75em) * 0.75);
+        }
+    }
+    @media(max-width: 320px) {
+        .IconMask {
+            padding-inline: calc(var(--padding, 0.75em) * 0.6);
+            padding-block: calc(var(--padding, 0.75em) * 0.6);
+        }
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The icon to display. */
+    icon: string | Component;
+    /** The children to display. */
+    children?: Snippet;
+    /** The onclick event. */
+    onclick?: (event: MouseEvent) => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Whether to mask the content. */
+    mask?: boolean;
+};
+declare const IconButton: Component<$$ComponentProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

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;