lutra 0.0.20 → 0.1.0

package/dist/display/Avatar.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
-const {
-  src,
-  name = "N/A",
-  shape = "circle"
-} = $props();
-const color = stringToColor(name);
-const luminance = hexRelativeLuminance(color);
-const textColor = luminance < 0.5 ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)";
-</script>
-
-<figure class="Avatar {shape}" style="--user-color: {color}; --text-color: {textColor};">
-    {#if src}
-        <img src={src} alt={name} />
-    {:else}
-        <div class="Placeholder">
-            <span>{name[0]}</span>
-        </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: hidden;
-        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);
-    }
-    .Avatar .Placeholder span {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-color);
-        user-select: none;
-    }
-</style>

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

@@ -1,23 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src?: string | undefined;
-        name?: string | undefined;
-        shape?: "circle" | "square" | "rounded" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AvatarProps = typeof __propDef.props;
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        src?: string | undefined;
-        name?: string | undefined;
-        shape?: "circle" | "square" | "rounded" | undefined;
-    }>);
-}
-export {};

package/dist/display/Badge.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">import { isStatusColor } from "../utils/color.js";
-let {
-  count,
-  max = 99,
-  color = "alert",
-  glow = true,
-  outline = true,
-  children
-} = $props();
-let el = $state(null);
-let isSet = $derived(isStatusColor(color));
-let charCount = $derived.by(() => {
-  if (count === void 0)
-    return 0;
-  if (max && count > max)
-    return max.toString().length + 1;
-  return count.toString().length;
-});
-</script>
-
-<div class="BadgeContainer">
-    <div class="BadgeContent">
-        {#if children}
-            {@render children()}
-        {/if}
-    </div>
-    <span class="Badge" class:outline class:glow class:empty={count === undefined} bind:this={el} style="--charCount: {charCount}ch; --bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
-        {#if count && max}
-            <em>
-                {count > max ? `${max}+` : count}
-            </em>
-        {/if}
-    </span>
-</div>
-
-
-<style>
-    .BadgeContainer {
-        position: relative;
-        display: inline-grid;
-        grid-template-columns: fit-content;
-        grid-template-areas: "content";
-        text-rendering: geometricPrecision;
-    }
-    .BadgeContent {
-        grid-area: content;
-    }
-    .Badge {
-        --internalSize: max(calc(var(--size, 0.75rem)), 14px);
-        display: grid;
-        place-items: center;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: calc(1px + var(--top, 0%));
-        right: var(--right, 0%);
-        transform: translate(0.55rem, -50%);
-        background-color: var(--bgColor);
-        padding: 3px 5px 2px 5px;
-        border-radius: 9999px;
-        --h: max(calc(var(--internalSize) * 0.9), 9px);
-        font-size: var(--h);
-        line-height: var(--h);
-        z-index: 100;
-        font-weight: 600;
-        grid-area: content;
-    }
-    .Badge.outline {
-        outline: min(calc(var(--size, 0.75rem) * 0.25), 2px) solid var(--outline-color, var(--bg-app));
-    }
-    .Badge.empty {
-        width: max(0.5rem, 8px);
-        height: max(0.5rem, 8px);
-        min-width: auto;
-        aspect-ratio: 1/1;
-        transform: translate(50%, -50%);
-        padding: 0;
-    }
-    .Badge.glow {
-        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--bgColor) 30%, transparent 70%));
-    }
-    em {
-        opacity: 0.99;
-        font-style: normal;
-        color: var(--bgColor);
-        filter: invert(1) grayscale(1) brightness(1.3) contrast(9000%);
-        mix-blend-mode: luminosity;
-        left: 50%;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
-    }
-</style>

package/dist/display/Badge.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { StatusColorOrString } from "../utils/color.js";
-declare const __propDef: {
-    props: {
-        count?: number | undefined;
-        max?: number | undefined;
-        color?: StatusColorOrString | undefined;
-        glow?: boolean | undefined;
-        outline?: boolean | undefined;
-        children?: ((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 BadgeProps = typeof __propDef.props;
-export type BadgeEvents = typeof __propDef.events;
-export type BadgeSlots = typeof __propDef.slots;
-export default class Badge extends SvelteComponent<BadgeProps, BadgeEvents, BadgeSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        count?: number | undefined;
-        max?: number | undefined;
-        color?: StatusColorOrString | undefined;
-        glow?: boolean | undefined;
-        outline?: boolean | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    }>);
-}
-export {};

package/dist/display/Callout.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">import Icon from "./Icon.svelte";
-import Alert from "../icons/Alert.svelte";
-import Info from "../icons/Info.svelte";
-import Success from "../icons/Success.svelte";
-import Warning from "../icons/Warning.svelte";
-import Error from "../icons/Error.svelte";
-import PageContent from "../layout/PageContent.svelte";
-import Tooltip from "./Tooltip.svelte";
-let {
-  icon,
-  type,
-  contained,
-  rounded,
-  dismissable
-} = $props();
-if (!icon) {
-  switch (type) {
-    case "alert":
-      icon = Alert;
-      break;
-    case "info":
-      icon = Info;
-      break;
-    case "ok":
-      icon = Success;
-      break;
-    case "warn":
-      icon = Warning;
-      break;
-    case "task":
-      icon = Error;
-      break;
-    default:
-      icon = void 0;
-      break;
-  }
-}
-</script>
-
-<div class="Callout {type}" class:hasIcon={!!icon} class:contained class:rounded class:dismissable style="--margin-scale: 0.5;">
-    {#if icon}
-        <Icon {icon} --icon-width="1.5rem" --icon-height="1.5rem" />
-    {/if}
-    <div class="CalloutText">
-        <slot />
-    </div>
-    {#if dismissable}
-        <div class="Dismiss">
-            <Tooltip tip="Dismiss">
-                <button type="button" class="CalloutDismiss" aria-label="Dismiss callout">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 1L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M1 15L15 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </button>
-            </Tooltip>
-        </div>
-    {/if}
-</div>
-
-<style>
-    .Callout {
-        background: var(--bg, var(--bg-subtle));
-        padding: var(--padding, 1rem);
-        display: grid;
-        gap: var(--gap, 1rem);
-        align-items: var(--align-items, start);
-        --text-heading: hsla(240, 10%, 98%);
-        --text: hsla(240, 10%, 95%);
-        --text-subtle: hsla(240, 10%, 90%);
-        color: var(--text-heading);
-    }
-    .Callout.contained {
-        border: var(--border);
-    }
-    .Callout.rounded {
-        border-radius: var(--border-radius);
-    }
-    .Callout.hasIcon {
-        grid-template-columns: auto 1fr;
-    }
-    .Callout.dismissable {
-        grid-template-columns: 1fr auto;
-    }
-    .Callout.dismissable.hasIcon {
-        grid-template-columns: auto 1fr auto;
-    }
-    .CalloutText {
-        font-size: var(--font-size, 1em);
-        line-height: 1.5;
-    }
-    .Callout.info {
-        --bg: var(--status-info);
-    }
-    .Callout.ok {
-        --bg: var(--status-ok);
-    }
-    .Dismiss {
-        margin: -0.75rem;
-    }
-    .CalloutDismiss {
-        background: transparent;
-        border: none;
-        padding: 0.75rem;
-        cursor: pointer;
-    }
-    .CalloutText {
-    }
-</style>

package/dist/display/Callout.svelte.d.ts

@@ -1,36 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-declare const __propDef: {
-    props: {
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        type?: "ok" | "alert" | "warn" | "info" | "task" | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        dismissable?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CalloutProps = typeof __propDef.props;
-export type CalloutEvents = typeof __propDef.events;
-export type CalloutSlots = typeof __propDef.slots;
-export default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<__sveltets_2_PropsWithChildren<{
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        type?: "ok" | "alert" | "warn" | "info" | "task" | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        dismissable?: boolean | undefined;
-    }, {
-        default: {};
-    }>>);
-}
-export {};

package/dist/display/Close.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">let {
-  onclick,
-  position
-} = $props();
-</script>
-
-<button class="Close {position}" {onclick}>
-    <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);
-        cursor: pointer;
-        pointer-events: auto;
-    }
-
-    svg {
-        width: max(1.5rem, 16px);
-        height: max(1.5rem, 16px);
-    }
-
-    .Close:hover {
-        color: var(--text-subtle);
-    }
-
-    .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/display/Close.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        position?: "top left" | "top right" | "bottom left" | "bottom right" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CloseProps = typeof __propDef.props;
-export type CloseEvents = typeof __propDef.events;
-export type CloseSlots = typeof __propDef.slots;
-export default class Close extends SvelteComponent<CloseProps, CloseEvents, CloseSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        position?: "top left" | "top right" | "bottom left" | "bottom right" | undefined;
-    }>);
-}
-export {};

package/dist/display/Code.svelte

@@ -1,195 +0,0 @@
-<script lang="ts">import Copy from "../icons/Copy.svelte";
-import Done from "../icons/Done.svelte";
-import IconButton from "./IconButton.svelte";
-import Tooltip from "./Tooltip.svelte";
-let {
-  code = $bindable(""),
-  highlight,
-  copyable,
-  contained,
-  rounded,
-  lineNumbers,
-  readonly
-} = $props();
-const numberOfLines = $derived(code.split("\n").length);
-let title = $state("Copy");
-let open = $state(false);
-let btnIcon = $state(Copy);
-let el = $state(null);
-let scrollTop = $state(0);
-let scrollLeft = $state(0);
-function copy() {
-  if (!el)
-    return;
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(code);
-  } else {
-    el.focus();
-    el.select();
-    document.execCommand("copy");
-  }
-  btnIcon = Done;
-  title = "Copied!";
-  open = true;
-  setTimeout(() => {
-    btnIcon = Copy;
-    title = "Copy";
-    open = false;
-  }, 1500);
-}
-function onscroll(e) {
-  scrollTop = e.target.scrollTop;
-  scrollLeft = e.target.scrollLeft;
-}
-let codeLines = $derived.by(() => {
-  return (highlight ? highlight(code) : code).split("\n") || [];
-});
-</script>
-
-<div class="Code" class:lineNumbers class:singleLine={numberOfLines === 1} class:rounded class:copyable class:contained class:hasOverlay={highlight}>
-    {#if numberOfLines === 1}
-        <input class="CodeInput" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" {readonly} bind:this={el} bind:value={code} title={copyable ? code : undefined} {onscroll} />
-    {:else}
-        <textarea class="CodeInput" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" {readonly} bind:this={el} bind:value={code} {onscroll}></textarea>
-    {/if}
-    <div class="Overlay" tabindex="-1" aria-hidden="true" style="top: {-scrollTop}px; left: {-scrollLeft}px;">
-        {#each codeLines as line, index}
-            <div class="Line">
-                {#if lineNumbers}
-                    <div class="Number">
-                        <span>{index + 1}</span>
-                    </div>
-                {/if}
-                <div class="Content">
-                    {@html line}
-                </div>
-            </div>
-        {/each}
-    </div>
-    {#if copyable}
-        <Tooltip tip={title} {open}>
-            <IconButton icon={btnIcon} onclick={copy} disabled={open} />
-        </Tooltip>
-    {/if}
-</div>
-
-<style>
-    .Code {
-        display: grid;
-        align-items: start;
-        grid-template-areas: "content";
-    }
-    .Code.lineNumbers {
-        grid-template-columns: auto 1fr;
-        grid-template-areas: "lines content";
-        margin-inline-start: -2rem;
-        width: calc(100% + 2rem);
-    }
-    .CodeInput,
-    .Overlay {
-        font-family: var(--font-family-mono);
-        font-size: var(--font-size, 1em);
-        line-height: 1.5;
-        margin: 0;
-        border: 0;
-        grid-area: content;
-        background: var(--field-bg);
-    }
-    textarea {
-        width: 100%;
-        height: 100%;
-        white-space: pre-wrap;
-        word-break: normal;
-        overflow-wrap: anywhere;
-        direction: ltr;
-        writing-mode: lr;
-        resize: none;
-        z-index: -1;
-    }
-    .Code.lineNumbers textarea {
-        padding-inline-start: 2rem;
-        width: calc(100% - 2rem);
-    }
-    .Code.hasOverlay .CodeInput {
-        color: transparent;
-        caret-color: var(--text);
-    }
-    .Code.rounded,
-    .Code.rounded .CodeInput {
-        border-radius: var(--border-radius);
-    }
-    .Code.singleLine.copyable .CodeInput {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    /**
-     * Contained
-     */
-
-    .Code.contained {
-        border: var(--border);
-    }
-    .Code.contained .CodeInput,
-    .Code.contained .Overlay {
-        height: auto;
-        min-height: auto;
-        padding: var(--padding, 0.5rem 1rem);
-    }
-    .Code.contained:focus-within {
-        outline: var(--focus-outline);
-    }
-    .Code.contained:focus-within .CodeInput {
-        outline: none;
-    }
-    .Code.contained:focus-within:has(:focus:not(.CodeInput)) {
-        outline: none;
-    }
-
-    /**
-     * Single line
-     */
-
-    .Code.singleLine {
-        align-items: center;
-        overflow-inline: clip;
-    }
-    .Code.singleLine.copyable {
-        grid-template-columns: 1fr auto;
-        grid-template-areas: "content button";
-    }
-    .Code.singleLine.copyable .CodeInput,
-    .Code.singleLine.copyable .Overlay {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: var(--padding, 0.35rem 0.75rem);
-    }
-    .Code.singleLine .CodeInput,
-    .Code.singleLine .Overlay {
-        resize: none;
-        line-height: 1;
-    }
-
-    .LineNumbers {
-        grid-area: lines;
-        display: grid;
-        padding-right: 0.5rem;
-        width: 2rem;
-        font-size: var(--font-size, 1em);
-        line-height: 1.5;
-        text-align: end;
-        justify-content: end;
-        font-family: var(--font-family-mono);
-        font-size: var(--font-size, 1em);
-        color: var(--text-subtle);
-        opacity: 0.75;
-    }
-    .Line {
-        display: grid;
-        grid-template-columns: 2rem 1fr;
-    }
-    .Line .Number {
-        text-align: end;
-        padding-inline-end: 0.5rem;
-    }
-</style>

package/dist/display/Code.svelte.d.ts

@@ -1,31 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        code: import("svelte").Bindable<string>;
-        highlight?: ((code: string) => string) | undefined;
-        copyable?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        lineNumbers?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        code: import("svelte").Bindable<string>;
-        highlight?: ((code: string) => string) | undefined;
-        copyable?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        lineNumbers?: boolean | undefined;
-        readonly?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/display/ContextTip.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">import Tooltip from "./Tooltip.svelte";
-import Help from "../icons/Help.svelte";
-import Icon from "./Icon.svelte";
-let {
-  tip
-} = $props();
-</script>
-
-<Tooltip {tip}>
-    <a href="#foo" 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(--text);
-        height: 16px;
-        width: 16px;
-        display: inline-block;
-    }
-    a:focus,
-    a:active {
-    }
-</style>