lutra 0.0.19 → 0.0.33

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

@@ -0,0 +1,19 @@
+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 Panel: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+    z?: 0 | 1 | 2 | 3;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Panel = InstanceType<typeof Panel>;
+export default Panel;

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

@@ -1,30 +1,25 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        content: Snippet<[close: () => void]>;
-        trigger: Snippet<[attrs: (node: Element) => void]>;
-        hover?: boolean | undefined;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        content: (this: void, close: () => void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        trigger: (this: void, attrs: (node: Element) => void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        hover?: boolean | undefined;
-        shape?: "rounded" | "sharp" | 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 Popup: $$__sveltets_2_IsomorphicComponent<{
+    /** The content of the popup */
+    content: Snippet<[close: () => void]>;
+    /** Snippet containing the trigger element */
+    trigger: Snippet<[attrs: (node: Element) => void]>;
+    /** Triggers the popup on hover (and keyboard focus) instead of click */
+    hover?: boolean;
+    /** The shape of the popup */
+    shape?: "rounded" | "sharp";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Popup = InstanceType<typeof Popup>;
+export default Popup;

package/dist/{data → display}/Stat.svelte

@@ -8,26 +8,22 @@ let {
   color,
   formatter
 } = $props();
+let Prefix = prefix;
+let Suffix = suffix;
 let colorVar = $derived(getStatusColorVar(color, "var(--bg-app)"));
 let _value = $derived.by(() => {
   if (typeof value === "number" && formatter?.constructor === Intl.NumberFormat) {
-    console.log("value is number and formatter is object");
     return formatter.format(value);
   } else if (value instanceof Date && formatter?.constructor === Intl.DateTimeFormat) {
-    console.log("value is date and formatter is object");
     return formatter.format(value);
   } else if (typeof value === "number") {
-    console.log("value is number");
     return value.toLocaleString();
   } else if (typeof value === "string") {
-    console.log("value is string");
     return value;
   } else if (value instanceof Date) {
-    console.log("value is date");
     return value.toLocaleDateString();
   }
   if (typeof formatter === "function") {
-    console.log("formatter is function");
     return formatter(value);
   }
   return value;
@@ -35,9 +31,6 @@ let _value = $derived.by(() => {
 </script>
 
 <section class="Stat" style="--bgColor: {colorVar};">
-    {#if title}
-        <header>{title}</header>
-    {/if}
     <main>
         {#if prefix}
             {#if typeof prefix === "string"}
@@ -45,7 +38,7 @@ let _value = $derived.by(() => {
             {:else if isSnippet(prefix)}
                 {@render prefix()}
             {:else}
-                <svlte:component this={prefix} />
+                <Prefix />
             {/if}
         {/if}
         {_value}
@@ -55,10 +48,13 @@ let _value = $derived.by(() => {
             {:else if isSnippet(suffix)}
                 {@render suffix()}
             {:else}
-                <svlte:component this={suffix} />
+                <Suffix />
             {/if}
         {/if}
     </main>
+    {#if title}
+        <header>{title}</header>
+    {/if}
 </section>
 
 <style>
@@ -68,22 +64,18 @@ let _value = $derived.by(() => {
         align-items: center;
         gap: 0.75rem;
         padding: 1rem;
-        margin-inline: -1rem;
-        margin-block: -1rem;
         background-color: var(--bgColor);
     }
     header {
         font-size: max(0.9em, 11px);
         font-weight: 500;
         opacity: 0.75;
-        color: var(--bgColor);
-        filter: url(#bwFilter);
+        color: var(--color, var(--text));
     }
     main {
         font-size: 1.5em;
         opacity: 0.95;
         font-weight: 700;
-        color: var(--bgColor);
-        filter: url(#bwFilter);
+        color: var(--color, var(--text));
     }
 </style>

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

@@ -0,0 +1,30 @@
+import type { Component, Snippet } from "svelte";
+import { type StatusColorOrString } from "../utils/color.js";
+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 Stat: $$__sveltets_2_IsomorphicComponent<{
+    /** The title of the stat. */
+    title?: string;
+    /** The value to display. */
+    value?: number | string | Date;
+    /** The prefix to display before the value. Can be a string, a URL, a Snippet, or a Svelte component. */
+    prefix?: string | Snippet | Component;
+    /** The suffix to display after the value. Can be a string, a URL, a Snippet, or a Svelte component. */
+    suffix?: string | Snippet | Component;
+    /** The color of the stat. */
+    color?: StatusColorOrString;
+    /** A function to format the value. Can be an [Intl.NumberFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat), an [Intl.DateTimeFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), or a function that takes in a value and returns a string. */
+    formatter?: ((value: number | string | Date | undefined) => string) | Intl.NumberFormat | Intl.DateTimeFormat;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Stat = InstanceType<typeof Stat>;
+export default Stat;

package/dist/display/Table.svelte

@@ -9,16 +9,20 @@
 } = $props();
 </script>
 
-<table
-    class:colored
+<div
+    class="table-container"
+    class:hang
     class:contained
     class:rounded
-    class:hang
-    class:fullWidth
-    class:hoverable
 >
-    {@render children()}
-</table>
-
-<style>
-</style>
+    <table
+        class:colored
+        class:contained
+        class:rounded
+        class:hang
+        class:fullWidth
+        class:hoverable
+    >
+        {@render children()}
+    </table>
+</div>

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

@@ -1,34 +1,24 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        colored?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        hang?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        colored?: boolean | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        hang?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        fullWidth?: 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 Table: $$__sveltets_2_IsomorphicComponent<{
+    colored?: boolean;
+    contained?: boolean;
+    rounded?: boolean;
+    hang?: boolean;
+    hoverable?: boolean;
+    fullWidth?: boolean;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Table = InstanceType<typeof Table>;
+export default Table;

package/dist/display/TablePaginator.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">let {
+  total,
+  perPage,
+  perPageOptions = [50, 100, 250],
+  currentPage,
+  onPageChange
+} = $props();
+</script>
+
+<div class="TablePaginator">
+    <div class="TablePaginator__PerPage">
+        <label for="perPage">Per Page</label>
+        <select
+            id="perPage"
+            onchange={() => onPageChange(1)}
+        >
+            {#each perPageOptions as option}
+                <option value={option}>{option}</option>
+            {/each}
+        </select>
+    </div>
+    <div class="TablePaginator__Page">
+        <button
+            disabled={currentPage === 1}
+            onclick={() => onPageChange(currentPage - 1)}
+        >
+            Previous
+        </button>
+        <span>Page {currentPage} of {Math.ceil(total / perPage)}</span>
+        <button
+            disabled={currentPage === Math.ceil(total / perPage)}
+            onclick={() => onPageChange(currentPage + 1)}
+        >
+            Next
+        </button>
+    </div>
+</div>
+
+<style>
+    .TablePaginator {
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: 1em;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .TablePaginator > * {
+        display: flex;
+        align-items: center;
+    }
+</style>

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

@@ -0,0 +1,21 @@
+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 TablePaginator: $$__sveltets_2_IsomorphicComponent<{
+    total: number;
+    perPage: number;
+    perPageOptions?: number[];
+    currentPage: number;
+    onPageChange: (page: number) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TablePaginator = InstanceType<typeof TablePaginator>;
+export default TablePaginator;

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

@@ -1,35 +1,32 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 import type { StatusColorOrString } from '../utils/color.js';
-declare const __propDef: {
-    props: {
-        code?: boolean | undefined;
-        color?: StatusColorOrString | undefined;
-        shape?: "rounded" | "pill" | "rectangle" | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        href?: string | undefined;
-        target?: string | undefined;
-        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> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        code?: boolean | undefined;
-        color?: StatusColorOrString | undefined;
-        shape?: "rounded" | "pill" | "rectangle" | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        href?: string | undefined;
-        target?: string | 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 Tag: $$__sveltets_2_IsomorphicComponent<{
+    /** Use a mono-spaced font for the tag. */
+    code?: boolean;
+    /** The color of the tag. */
+    color?: StatusColorOrString;
+    /** The shape of the tag. */
+    shape?: "rounded" | "pill" | "rectangle";
+    /** A function to run when the tag is clicked. */
+    onclick?: (event: MouseEvent) => void;
+    /** A URL to link to. */
+    href?: string;
+    /** The target of the link. */
+    target?: string;
+    /** The content of the tag. */
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Tag = InstanceType<typeof Tag>;
+export default Tag;

package/dist/display/Tooltip.svelte

@@ -5,12 +5,13 @@ let {
   open
 } = $props();
 const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
+let offsetX = $state(0);
 </script>
 
 <span class="Tooltip" class:open>
     <span class="TooltipContainer" role="tooltip">
         <Theme theme="invert">
-            <span class="TooltipContent" id={id}>
+            <span class="TooltipContent" id={id} style="left: {offsetX}px;">
                 {#if typeof tip === "string"}
                     {@html tip}
                 {:else}
@@ -51,7 +52,7 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
     }
     .TooltipContent {
         background-color: var(--bg-app);
-        padding: 0.125rem 0.35rem;
+        padding: 0.35rem 0.5rem;
         border-radius: calc(var(--border-radius));
         border-top: var(--border-subtle);
         border-left: var(--border-subtle);
@@ -60,8 +61,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
         font-size: max(0.75rem, 11px);
         line-height: 1.35;
         font-weight: 500;
-        color: var(--text);
-        max-width: clamp(5ch, 100%, 35ch);
+        color: var(--text-heading);
+        max-width: clamp(25ch, 100%, 25ch);
         width: max-content;
     }
     .TooltipContent :global(code) {

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

@@ -1,28 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        children: Snippet;
-        tip: string | Snippet;
-        open?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
-    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\"";
-        };
-        tip: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        });
-        open?: 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 Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    /** Content to trigger the tooltip */
+    children: Snippet;
+    /** The content of the tooltip */
+    tip: string | Snippet;
+    /** Open the tooltip on render (cannot be closed) */
+    open?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/display/chart.d.ts

@@ -0,0 +1,78 @@
+export interface ChartDataSet {
+    values: number[];
+}
+export interface ChartData {
+    labels: string[];
+    values: number[];
+}
+export declare function scale(domain: number[], range: number[]): (num: number) => number;
+export declare function makeScale(numbers: number[], itemsToReturn: number): number[];
+export declare function getShortKValue(num: number): string;
+export type PointData = {
+    p1: {
+        x: number;
+        y: number;
+    };
+    p2: {
+        x: number;
+        y: number;
+    };
+    bp1: {
+        x: number;
+        y: number;
+    };
+    bp2: {
+        x: number;
+        y: number;
+    };
+};
+/**
+* Interpolates a Catmull-Rom Spline through a series of x/y points
+* Converts the CR Spline to Cubic Beziers for use with SVG items
+*
+* If 'alpha' is 0.5 then the 'Centripetal' variant is used
+* If 'alpha' is 1 then the 'Chordal' variant is used
+*
+* @param  {Array} data - Array of points, each point in object literal holding x/y values
+* @return {String} d - SVG string with cubic bezier curves representing the Catmull-Rom Spline
+*/
+export declare function catmullRomBase(data: {
+    x: number;
+    y: number;
+}[], alpha: number): PointData[];
+/**
+* Returns the SVG path for Catmull-Rom spline interpolation
+*/
+export declare function catmullRomToSVG(pointsData: PointData[], alpha: number, firstValue: {
+    x: number;
+    y: number;
+}): string | false;
+/**
+* Returns the Y coordinate for the given X value on the Catmull-Rom spline
+*/
+export declare function catmullRomGetY(pointsData: PointData[], alpha: number, xValue: number, yPadding: number): number | false | undefined;
+/**
+* Linear interpolation helper function
+*/
+export declare function lerp(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}, t: number): {
+    x: number;
+    y: number;
+};
+export declare function getSVGSize(svg: SVGSVGElement): {
+    innerWidth: number;
+    innerHeight: number;
+    width: number;
+    height: number;
+    padding: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+};