lutra 0.0.20 → 0.0.33

package/dist/display/Avatar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
-const {
+let {
   src,
   name = "N/A",
   shape = "circle"

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

@@ -1,23 +1,19 @@
-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;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    src?: string;
+    name?: string;
+    shape?: "circle" | "square" | "rounded";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/dist/display/Badge.svelte

@@ -10,10 +10,8 @@ let {
 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;
+  if (count === void 0) return 0;
+  if (max && count > max) return max.toString().length + 1;
   return count.toString().length;
 });
 </script>

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

@@ -1,34 +1,30 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } 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;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Badge: $$__sveltets_2_IsomorphicComponent<{
+    /** Count to display in the badge. */
+    count?: number;
+    /** The maximum count to display. */
+    max?: number;
+    /** The color of the tag. */
+    color?: StatusColorOrString;
+    /** Whether to add a glow to the badge. */
+    glow?: boolean;
+    /** Whether to add an outline to the badge. */
+    outline?: boolean;
+    /** The content to display inside the badge. */
+    children?: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;

package/dist/display/Callout.svelte

@@ -1,17 +1,17 @@
 <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 Alert from "../icons/IconAlert.svelte";
+import Info from "../icons/IconInfo.svelte";
+import Success from "../icons/IconSuccess.svelte";
+import Warning from "../icons/IconWarning.svelte";
+import Error from "../icons/IconError.svelte";
 import Tooltip from "./Tooltip.svelte";
 let {
   icon,
   type,
   contained,
   rounded,
-  dismissable
+  dismissable,
+  children
 } = $props();
 if (!icon) {
   switch (type) {
@@ -42,7 +42,7 @@ if (!icon) {
         <Icon {icon} --icon-width="1.5rem" --icon-height="1.5rem" />
     {/if}
     <div class="CalloutText">
-        <slot />
+        {@render children()}
     </div>
     {#if dismissable}
         <div class="Dismiss">

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

@@ -1,36 +1,28 @@
-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: {};
-    }>>);
+import type { Component, Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Callout: $$__sveltets_2_IsomorphicComponent<{
+    /** The icon to display. If not specified, it will default to the type. */
+    icon?: string | Component;
+    /** The type of callout. If not specified and no icon is provided, no icon will be displayed. */
+    type?: "alert" | "info" | "ok" | "warn" | "task";
+    /** Whether to contain the element in a box. */
+    contained?: boolean;
+    /** Whether to round the corners of the element. */
+    rounded?: boolean;
+    /** Whether the callout is dismissable. */
+    dismissable?: boolean;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Callout = InstanceType<typeof Callout>;
+export default Callout;

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

@@ -1,21 +1,18 @@
-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;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Close: $$__sveltets_2_IsomorphicComponent<{
+    onclick?: (e: MouseEvent) => void;
+    position?: "top left" | "top right" | "bottom left" | "bottom right";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Close = InstanceType<typeof Close>;
+export default Close;

package/dist/display/Code.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import Copy from "../icons/Copy.svelte";
-import Done from "../icons/Done.svelte";
+<script lang="ts">import Copy from "../icons/IconCopy.svelte";
+import Done from "../icons/IconDone.svelte";
 import IconButton from "./IconButton.svelte";
 import Tooltip from "./Tooltip.svelte";
 let {
@@ -8,6 +8,7 @@ let {
   copyable,
   contained,
   rounded,
+  singleLine,
   lineNumbers,
   readonly
 } = $props();
@@ -19,8 +20,7 @@ let el = $state(null);
 let scrollTop = $state(0);
 let scrollLeft = $state(0);
 function copy() {
-  if (!el)
-    return;
+  if (!el) return;
   if (navigator.clipboard) {
     navigator.clipboard.writeText(code);
   } else {
@@ -38,6 +38,7 @@ function copy() {
   }, 1500);
 }
 function onscroll(e) {
+  console.log("scrolling");
   scrollTop = e.target.scrollTop;
   scrollLeft = e.target.scrollLeft;
 }
@@ -46,26 +47,28 @@ let codeLines = $derived.by(() => {
 });
 </script>
 
-<div class="Code" class:lineNumbers class:singleLine={numberOfLines === 1} class:rounded class:copyable class:contained class:hasOverlay={highlight}>
-    {#if numberOfLines === 1}
+<div class="Code" class:lineNumbers class:singleLine class:rounded class:copyable class:contained class:hasOverlay={highlight}>
+    {#if singleLine}
         <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>
+    {#if highlight}
+        <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>
-                {/if}
-                <div class="Content">
-                    {@html line}
                 </div>
-            </div>
-        {/each}
-    </div>
+            {/each}
+        </div>
+    {/if}
     {#if copyable}
         <Tooltip tip={title} {open}>
             <IconButton icon={btnIcon} onclick={copy} disabled={open} />
@@ -77,6 +80,7 @@ let codeLines = $derived.by(() => {
     .Code {
         display: grid;
         align-items: start;
+        grid-template-columns: 1fr;
         grid-template-areas: "content";
     }
     .Code.lineNumbers {
@@ -94,6 +98,7 @@ let codeLines = $derived.by(() => {
         border: 0;
         grid-area: content;
         background: var(--field-bg);
+        scrollbar-width: thin;
     }
     textarea {
         width: 100%;
@@ -105,6 +110,7 @@ let codeLines = $derived.by(() => {
         writing-mode: lr;
         resize: none;
         z-index: -1;
+        scrollbar-width: thin;
     }
     .Code.lineNumbers textarea {
         padding-inline-start: 2rem;
@@ -170,21 +176,10 @@ let codeLines = $derived.by(() => {
         line-height: 1;
     }
 
-    .LineNumbers {
-        grid-area: lines;
+    .Line {
         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 {
+    .Code.lineNumbers .Line {
         display: grid;
         grid-template-columns: 2rem 1fr;
     }

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

@@ -1,31 +1,32 @@
-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;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Code: $$__sveltets_2_IsomorphicComponent<{
+    /** The code to display. */
+    code: string;
+    /** A function to highlight parts of the code. */
+    highlight?: (code: string) => string;
+    /** Whether the code is copyable. */
+    copyable?: boolean;
+    /** Whether to contain the element in a box. */
+    contained?: boolean;
+    /** Whether to round the corners of the element. */
+    rounded?: boolean;
+    /** Whether the code is a single line. */
+    singleLine?: boolean;
+    /** Whether to show line numbers. */
+    lineNumbers?: boolean;
+    /** Whether the code is readonly. */
+    readonly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "code">;
+type Code = InstanceType<typeof Code>;
+export default Code;

package/dist/display/ContextTip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import Tooltip from "./Tooltip.svelte";
-import Help from "../icons/Help.svelte";
+import Help from "../icons/IconHelp.svelte";
 import Icon from "./Icon.svelte";
 let {
   tip
@@ -7,7 +7,7 @@ let {
 </script>
 
 <Tooltip {tip}>
-    <a href="#foo" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+    <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>
@@ -20,7 +20,4 @@ let {
         width: 16px;
         display: inline-block;
     }
-    a:focus,
-    a:active {
-    }
 </style>

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

@@ -1,22 +1,18 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        tip: string | Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ContextTipProps = typeof __propDef.props;
-export type ContextTipEvents = typeof __propDef.events;
-export type ContextTipSlots = typeof __propDef.slots;
-export default class ContextTip extends SvelteComponent<ContextTipProps, ContextTipEvents, ContextTipSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        tip: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ContextTip: $$__sveltets_2_IsomorphicComponent<{
+    tip: string | Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ContextTip = InstanceType<typeof ContextTip>;
+export default ContextTip;

package/dist/display/DataList.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
+let {
+  items
+} = $props();
+</script>
+
+<div class="data-list">
+    {#each items as { label, value }, i}
+        <div class="data-list-item">
+            <div class="data-list-item-label">{label}</div>
+            <div class="data-list-item-value">
+                <StringOrSnippet content={value} />
+            </div>
+        </div>
+    {/each}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const DataList: $$__sveltets_2_IsomorphicComponent<{
+    items: {
+        label: string;
+        value: string | Snippet;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type DataList = InstanceType<typeof DataList>;
+export default DataList;

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

@@ -1,32 +1,27 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        summary: string | Snippet;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        open?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DetailsProps = typeof __propDef.props;
-export type DetailsEvents = typeof __propDef.events;
-export type DetailsSlots = typeof __propDef.slots;
-export default class Details extends SvelteComponent<DetailsProps, DetailsEvents, DetailsSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        summary: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        open?: boolean | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Details: $$__sveltets_2_IsomorphicComponent<{
+    /** The summary of the element. Can be a string or a snippet. */
+    summary: string | Snippet;
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+    /** Whether the details are open. */
+    open?: boolean;
+    /** The content of the element. */
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Details = InstanceType<typeof Details>;
+export default Details;