lutra 0.0.1

package/dist/Display/Indicator.svelte

@@ -0,0 +1,352 @@
+<script>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>
+
+<span role="status" aria-label="{_label}" class="Indicator {color} {motion}" style="--bgColor: {isSet ? 'var(--status-'+color+')' : color};" />
+
+<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/Display/Indicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type StatusColorOrString } from "../utils/color.js";
+declare const __propDef: {
+    props: {
+        /** The color of the tag. Select from default status colors or provide a CSS Color value. */
+        color?: StatusColorOrString | undefined;
+        /** Possible motion to apply to the indicator. */
+        motion?: "highlight" | "pulse" | "spin" | "blink" | "bulge" | "tunnel" | "typing" | undefined;
+        /** ARIA label to use when a custom color is applied */
+        label?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndicatorProps = typeof __propDef.props;
+export type IndicatorEvents = typeof __propDef.events;
+export type IndicatorSlots = typeof __propDef.slots;
+export default class Indicator extends SvelteComponent<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+}
+export {};

package/dist/Display/Popup.svelte

@@ -0,0 +1,111 @@
+<script>import UiContent from "../Layout/UIContent.svelte";
+import { slidefade } from "../utils/transitions.js";
+import { attr } from "../utils/attr.js";
+let {
+  content,
+  trigger,
+  hover = false,
+  shape = "rounded"
+} = $props();
+const id = `po-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
+let isOpen = $state(false);
+function closePopup() {
+  isOpen = false;
+}
+function togglePopup() {
+  isOpen = !isOpen;
+}
+function clickElsewhere(e) {
+  if (isOpen && e.target instanceof HTMLElement && !e.target.closest(".Popup")) {
+    closePopup();
+  }
+}
+let timeoutAmount = 250;
+let timeout;
+function mouseenterTrigger() {
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  if (!isOpen) {
+    isOpen = true;
+  }
+}
+function mouseleave(e) {
+  timeout = setTimeout(closePopup, timeoutAmount);
+}
+function mouseoverContent() {
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+}
+let attrs = $derived.by(() => {
+  return attr({
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": id,
+    onclick: !hover ? togglePopup : void 0,
+    onmouseenter: hover ? mouseenterTrigger : void 0,
+    onmouseleave: hover ? mouseleave : void 0,
+    onfocusin: hover ? mouseenterTrigger : void 0,
+    onblur: hover ? mouseleave : void 0
+  });
+});
+</script>
+
+<svelte:window on:click={clickElsewhere} />
+
+<div class="Popup" class:hover>
+    <div class="Trigger">
+        {@render trigger(attrs)}
+    </div>
+    {#if isOpen}
+        <UiContent>
+            <div
+                {id}
+                class="PopupContainer"
+                transition:slidefade={{duration: 100}}
+                role="dialog"
+                onmouseover={hover ? mouseoverContent : undefined}
+                onfocus={hover ? mouseoverContent : undefined}
+                onfocusin={hover ? mouseoverContent : undefined}
+                onmouseout={hover ? mouseleave : undefined}
+                onblur={hover ? mouseleave : undefined}
+                onfocusout={hover ? mouseleave : undefined}
+            >
+                <div class="PopupContent {shape}">
+                    {@render content(closePopup)}
+                </div>
+            </div>
+        </UiContent>
+    {/if}
+</div>
+
+<style>
+    .Popup, .Trigger {
+        position: relative;
+        display: inline-block;
+    }
+    .PopupContainer {
+        position: absolute;
+        padding-top: 0.5rem;
+    }
+    .Popup.hover .PopupContainer {
+        padding: var(--safe-zone, 1rem);
+        left: calc(-1 * var(--safe-zone, 1rem));
+        top: calc(100% + -0.5 * var(--safe-zone, 1rem));
+    }
+    .PopupContent {
+        background: var(--bg, var(--bg-app));
+        border: var(--border);
+        box-shadow: var(--shadow);
+        z-index: 10000;
+        padding: var(--content-padding, 1rem);
+        opacity: 1;
+        border-radius: var(--border-radius);
+        box-shadow: 0 0.25rem 2rem 0 var(--shadow);
+        left: 0;
+    }
+    .PopupContent.rounded {
+        border-radius: var(--border-radius);
+    }
+</style>

package/dist/Display/Popup.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** The content of the popup */
+        content: Snippet<[close: () => void]>;
+        /** Snippet containing the trigger element */
+        trigger: (this: void, attrs: (node: Element) => void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+        /** Triggers the popup on hover (and keyboard focus) instead of click */
+        hover?: boolean | undefined;
+        /** The shape of the popup */
+        shape?: "rounded" | "sharp" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PopupProps = typeof __propDef.props;
+export type PopupEvents = typeof __propDef.events;
+export type PopupSlots = typeof __propDef.slots;
+export default class Popup extends SvelteComponent<PopupProps, PopupEvents, PopupSlots> {
+}
+export {};

package/dist/Display/Tag.svelte

@@ -0,0 +1,90 @@
+<script>import { isStatusColor } from "../utils/color.js";
+let {
+  code,
+  color = "default",
+  shape = "pill",
+  onclick,
+  href,
+  target,
+  children
+} = $props();
+let isSet = $derived(color ? isStatusColor(color) : true);
+</script>
+
+{#snippet content()}
+    <em>
+        {@render children()}
+    </em>
+{/snippet}
+
+{#if href}
+    <a {href} {target} class:code class="Tag Link {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
+        {@render content()}
+    </a>
+{:else if onclick}
+    <button class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
+        {@render content()}
+    </button>
+{:else}
+    <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
+        {@render content()}
+    </span>
+{/if}
+
+<style>
+    .Tag {
+        display: inline-flex;
+        padding: var(--padding, 0.25em 0.65em);
+        font-weight: var(--font-weight, 600);
+        --bgColor2: var(--bgColor);
+        background: var(--bgColor);
+        border-radius: var(--border-radius);
+        font-size: var(--font-size, 1em);
+        vertical-align: var(--vertical-align, baseline);
+        border: 1px solid color-mix(in srgb, var(--bgColor) 95%, var(--mix-target, black) 5%);
+    }
+    .Tag.rectangle {
+        border-radius: 0;
+    }
+    .Tag.pill {
+        border-radius: 99999px;
+    }
+    .Tag.code {
+        font-family: var(--font-family-mono);
+        padding: var(--padding, 0.15em 0.35em);
+        font-size: 1em;
+        line-height: 1em;
+        background: var(--bg, var(--bg-subtle));
+        color: var(--text);
+        border: var(--border, var(--border-subtle));
+    }
+    em {
+        opacity: 0.75;
+        font-style: normal;
+        color: var(--bgColor2);
+        filter: url(#bwFilter);
+        mix-blend-mode: luminosity;
+        left: 50%;
+        position: relative;
+        display: block;
+        transform: translateX(-50%);
+    }
+    a:hover, button:hover {
+        --bgColor2: color-mix(in srgb, var(--bgColor) 87%, white 13%);
+        background-color: var(--bgColor2);
+        cursor: pointer;
+    }
+    @media (prefers-contrast: more) {
+        .Tag {
+            border: 1px solid color-mix(in srgb, var(--bgColor) 50%, var(--mix-target, black) 50%);
+        }
+        em {
+            opacity: 0.99;
+        }
+    }
+    @media (prefers-contrast: less) {
+        em {
+            opacity: 0.65;
+        }
+    }
+</style>

package/dist/Display/Tag.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+import type { StatusColorOrString } from '../utils/color.js';
+declare const __propDef: {
+    props: {
+        /** Use a mono-spaced font for the tag. */
+        code?: boolean | undefined;
+        /** The color of the tag. */
+        color?: StatusColorOrString | undefined;
+        /** The shape of the tag. */
+        shape?: "rounded" | "pill" | "rectangle" | undefined;
+        /** A function to run when the tag is clicked. */
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        /** A URL to link to. */
+        href?: string | undefined;
+        /** The target of the link. */
+        target?: string | undefined;
+        /** The content of the tag. */
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TagProps = typeof __propDef.props;
+export type TagEvents = typeof __propDef.events;
+export type TagSlots = typeof __propDef.slots;
+export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
+}
+export {};