lutra 0.0.20 → 0.1.0

package/dist/display/Indicator.svelte

@@ -1,352 +0,0 @@
-<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>
-
-<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

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type StatusColorOrString } from "../utils/color.js";
-declare const __propDef: {
-    props: {
-        color?: StatusColorOrString | undefined;
-        motion?: "highlight" | "pulse" | "spin" | "blink" | "bulge" | "tunnel" | "typing" | undefined;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        color?: StatusColorOrString | undefined;
-        motion?: "highlight" | "pulse" | "spin" | "blink" | "bulge" | "tunnel" | "typing" | undefined;
-        label?: string | undefined;
-    }>);
-}
-export {};

package/dist/display/Inset.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">let {
-  children
-} = $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/display/Inset.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InsetProps = typeof __propDef.props;
-export type InsetEvents = typeof __propDef.events;
-export type InsetSlots = typeof __propDef.slots;
-export default class Inset extends SvelteComponent<InsetProps, InsetEvents, InsetSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
-}
-export {};

package/dist/display/Notification.svelte

@@ -1,104 +0,0 @@
-<script lang="ts">import Overlay from "../layout/Overlay.svelte";
-import PageContent from "../layout/PageContent.svelte";
-import { removeOverlay } from "../layout/overlays.svelte.js";
-import Close from "./Close.svelte";
-import { createId } from "../utils/id.js";
-import Icon from "./Icon.svelte";
-let {
-  id = createId(),
-  children,
-  title,
-  content,
-  icon,
-  actions
-} = $props();
-function onclick(e) {
-  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: var(--bg-app);
-        border-radius: var(--border-radius);
-        border: var(--border);
-        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);
-    }
-    .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/display/Notification.svelte.d.ts

@@ -1,42 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        title?: string | undefined;
-        content?: string | undefined;
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NotificationProps = typeof __propDef.props;
-export type NotificationEvents = typeof __propDef.events;
-export type NotificationSlots = typeof __propDef.slots;
-export default class Notification extends SvelteComponent<NotificationProps, NotificationEvents, NotificationSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        id?: string | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        title?: string | undefined;
-        content?: string | undefined;
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    }>);
-}
-export {};

package/dist/display/Popup.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">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>