lutra 0.0.19 → 0.0.33

package/dist/display/chart.js

@@ -0,0 +1,212 @@
+export function scale(domain, range) {
+    const m = (range[1] - range[0]) / (domain[1] - domain[0]);
+    return (num) => range[0] + m * (num - domain[0]);
+}
+export function makeScale(numbers, itemsToReturn) {
+    const min = 0;
+    const max = Math.max(...numbers);
+    const interval = Math.ceil(max / itemsToReturn);
+    const getRoundedInterval = (value) => {
+        const power = Math.floor(Math.log10(value));
+        const factor = Math.pow(10, power);
+        if (value / factor <= 2) {
+            return 2 * factor;
+        }
+        else if (value / factor <= 5) {
+            return 5 * factor;
+        }
+        else {
+            return 10 * factor;
+        }
+    };
+    const roundedInterval = getRoundedInterval(interval);
+    const maxOutputValue = Math.ceil(max / roundedInterval) * roundedInterval;
+    const outputLength = maxOutputValue / roundedInterval + 1;
+    const output = new Array(outputLength)
+        .fill(0)
+        .map((_, index) => index * roundedInterval);
+    return output;
+}
+export function getShortKValue(num) {
+    if (num >= 1000000) {
+        const shortMValue = (num / 1000000).toFixed(1);
+        if (shortMValue.endsWith('.0')) {
+            return shortMValue.slice(0, -2) + 'M';
+        }
+        else {
+            return shortMValue + 'M';
+        }
+    }
+    else if (num >= 1000) {
+        const shortKValue = (num / 1000).toFixed(1);
+        if (shortKValue.endsWith('.0')) {
+            return shortKValue.slice(0, -2) + 'K';
+        }
+        else {
+            return shortKValue + 'K';
+        }
+    }
+    else {
+        return num.toString();
+    }
+}
+/**
+* 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 function catmullRomBase(data, alpha) {
+    if (alpha == 0 || alpha === undefined) {
+        throw new Error('Alpha value must be greater than 0');
+    }
+    else {
+        let pointsData = [];
+        var p0, p1, p2, p3, bp1, bp2, d1, d2, d3, A, B, N, M;
+        var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
+        var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
+        var length = data.length;
+        for (var i = 0; i < length - 1; i++) {
+            p0 = i == 0 ? data[0] : data[i - 1];
+            p1 = data[i];
+            p2 = data[i + 1];
+            p3 = i + 2 < length ? data[i + 2] : p2;
+            d1 = Math.sqrt(Math.pow(p0.x - p1.x, 2) + Math.pow(p0.y - p1.y, 2));
+            d2 = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+            d3 = Math.sqrt(Math.pow(p2.x - p3.x, 2) + Math.pow(p2.y - p3.y, 2));
+            // Catmull-Rom to Cubic Bezier conversion matrix
+            // A = 2d1^2a + 3d1^a * d2^a + d3^2a
+            // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+            // [   0             1            0          0          ]
+            // [   -d2^2a /N     A/N          d1^2a /N   0          ]
+            // [   0             d3^2a /M     B/M        -d2^2a /M  ]
+            // [   0             0            1          0          ]
+            d3powA = Math.pow(d3, alpha);
+            d3pow2A = Math.pow(d3, 2 * alpha);
+            d2powA = Math.pow(d2, alpha);
+            d2pow2A = Math.pow(d2, 2 * alpha);
+            d1powA = Math.pow(d1, alpha);
+            d1pow2A = Math.pow(d1, 2 * alpha);
+            A = 2 * d1pow2A + 3 * d1powA * d2powA + d2pow2A;
+            B = 2 * d3pow2A + 3 * d3powA * d2powA + d2pow2A;
+            N = 3 * d1powA * (d1powA + d2powA);
+            if (N > 0) {
+                N = 1 / N;
+            }
+            M = 3 * d3powA * (d3powA + d2powA);
+            if (M > 0) {
+                M = 1 / M;
+            }
+            bp1 = {
+                x: (-d2pow2A * p0.x + A * p1.x + d1pow2A * p2.x) * N,
+                y: (-d2pow2A * p0.y + A * p1.y + d1pow2A * p2.y) * N
+            };
+            bp2 = {
+                x: (d3pow2A * p1.x + B * p2.x - d2pow2A * p3.x) * M,
+                y: (d3pow2A * p1.y + B * p2.y - d2pow2A * p3.y) * M
+            };
+            if (bp1.x == 0 && bp1.y == 0) {
+                bp1 = p1;
+            }
+            if (bp2.x == 0 && bp2.y == 0) {
+                bp2 = p2;
+            }
+            //d += 'C' + bp1.x + ',' + bp1.y + ' ' + bp2.x + ',' + bp2.y + ' ' + p2.x + ',' + p2.y + ' ';
+            pointsData.push({
+                p1: p1,
+                p2: p2,
+                bp1: bp1,
+                bp2: bp2
+            });
+        }
+        return pointsData;
+    }
+}
+;
+/**
+* Returns the SVG path for Catmull-Rom spline interpolation
+*/
+export function catmullRomToSVG(pointsData, alpha, firstValue) {
+    //const pointsData = catmullRomBase(data, alpha);
+    if (!pointsData)
+        return false;
+    let d = Math.round(firstValue.x) + ',' + Math.round(firstValue.y) + ' ';
+    //let d = '';
+    pointsData.forEach(({ p1, p2, bp1, bp2 }) => {
+        d += 'C' + bp1.x + ',' + bp1.y + ' ' + bp2.x + ',' + bp2.y + ' ' + p2.x + ',' + p2.y + ' ';
+    });
+    return d;
+}
+/**
+* Returns the Y coordinate for the given X value on the Catmull-Rom spline
+*/
+export function catmullRomGetY(pointsData, alpha, xValue, yPadding) {
+    if (!pointsData)
+        return false;
+    // Find the minimum and maximum Y values
+    let minY = pointsData[0].p1.y;
+    let maxY = pointsData[0].p1.y;
+    for (const { p1, p2, bp1, bp2 } of pointsData) {
+        minY = Math.min(minY, p1.y, p2.y, bp1.y, bp2.y);
+        maxY = Math.max(maxY, p1.y, p2.y, bp1.y, bp2.y);
+    }
+    // Calculate the range and padding for Y values
+    const yRange = maxY - minY;
+    const yOffset = minY + yPadding * yRange / 2;
+    const yScale = 1 - yPadding;
+    let resultY;
+    for (let i = 0; i < pointsData.length; i++) {
+        const { p1, p2, bp1, bp2 } = pointsData[i];
+        // Scale Y coordinates of the points based on the yPadding
+        const scaledP1 = { ...p1, y: yOffset + (p1.y - minY) * yScale };
+        const scaledP2 = { ...p2, y: yOffset + (p2.y - minY) * yScale };
+        const scaledBp1 = { ...bp1, y: yOffset + (bp1.y - minY) * yScale };
+        const scaledBp2 = { ...bp2, y: yOffset + (bp2.y - minY) * yScale };
+        if (xValue >= p1.x && xValue <= p2.x) {
+            // Use the de Casteljau's algorithm to find the Y coordinate for the given X value
+            const t = (xValue - p1.x) / (p2.x - p1.x);
+            const q0 = lerp(scaledP1, scaledBp1, t);
+            const q1 = lerp(scaledBp1, scaledBp2, t);
+            const q2 = lerp(scaledBp2, scaledP2, t);
+            const r0 = lerp(q0, q1, t);
+            const r1 = lerp(q1, q2, t);
+            const resultPoint = lerp(r0, r1, t);
+            // Rescale the resulting Y coordinate back to its original range
+            resultY = minY + (resultPoint.y - yOffset) / yScale;
+            break;
+        }
+    }
+    return resultY;
+}
+/**
+* Linear interpolation helper function
+*/
+export function lerp(point1, point2, t) {
+    return {
+        x: point1.x + (point2.x - point1.x) * t,
+        y: point1.y + (point2.y - point1.y) * t,
+    };
+}
+export function getSVGSize(svg) {
+    const rect = svg.getBoundingClientRect();
+    const styles = window.getComputedStyle(svg);
+    const padding = {
+        left: parseFloat(styles.paddingLeft),
+        right: parseFloat(styles.paddingRight),
+        top: parseFloat(styles.paddingTop),
+        bottom: parseFloat(styles.paddingBottom),
+    };
+    const innerWidth = rect.width - padding.left - padding.right;
+    const innerHeight = rect.height - padding.top - padding.bottom;
+    return {
+        innerWidth: innerWidth,
+        innerHeight: innerHeight,
+        width: rect.width,
+        height: rect.height,
+        padding: padding,
+    };
+}

package/dist/display/index.d.ts

@@ -1,14 +1,24 @@
 export { default as Avatar } from './Avatar.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Callout } from './Callout.svelte';
+export { default as Close } from './Close.svelte';
 export { default as Code } from './Code.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
 export { default as Details } from './Details.svelte';
 export { default as Hero } from './Hero.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Indicator } from './Indicator.svelte';
+export { default as Inset } from './Inset.svelte';
+export { default as Notification } from './Notification.svelte';
 export { default as Popup } from './Popup.svelte';
-export { default as Tag } from './Tag.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';
+export { default as Modal } from './Modal.svelte';
 export { default as Table } from './Table.svelte';
+export { default as Tag } from './Tag.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export * from './chart.js';
+export * from './notifications.svelte.js';

package/dist/display/index.js

@@ -1,14 +1,24 @@
 export { default as Avatar } from './Avatar.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Callout } from './Callout.svelte';
+export { default as Close } from './Close.svelte';
 export { default as Code } from './Code.svelte';
 export { default as ContextTip } from './ContextTip.svelte';
 export { default as Details } from './Details.svelte';
 export { default as Hero } from './Hero.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Indicator } from './Indicator.svelte';
+export { default as Inset } from './Inset.svelte';
+export { default as Notification } from './Notification.svelte';
 export { default as Popup } from './Popup.svelte';
-export { default as Tag } from './Tag.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';
+export { default as Modal } from './Modal.svelte';
 export { default as Table } from './Table.svelte';
+export { default as Tag } from './Tag.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export * from './chart.js';
+export * from './notifications.svelte.js';

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

@@ -1,11 +1,11 @@
 import { type OverlayPosition } from "../layout/overlays.svelte.js";
-import type { ComponentType, Snippet } from "svelte";
+import type { Component, Snippet } from "svelte";
 /**
  * Add a notification to the screen.
  * @param {object} opts - The options for the notification.
  * @param {string} opts.content - The content of the notification.
  * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
+ * @param {Snippet | Component} opts.icon - The icon of the notification.
  * @param {string} opts.title - The title of the notification.
  * @param {string} opts.stack - Group notifications together by named stacks.
  * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
@@ -14,7 +14,7 @@ import type { ComponentType, Snippet } from "svelte";
 export declare function addNotification(opts: {
     content: string;
     position?: OverlayPosition;
-    icon?: Snippet | ComponentType;
+    icon?: Snippet | Component;
     title?: string;
     stack?: string;
     autoClose?: number;

package/dist/display/notifications.svelte.js

@@ -6,7 +6,7 @@ import NotificationSvelte from "./Notification.svelte";
  * @param {object} opts - The options for the notification.
  * @param {string} opts.content - The content of the notification.
  * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | ComponentType} opts.icon - The icon of the notification.
+ * @param {Snippet | Component} opts.icon - The icon of the notification.
  * @param {string} opts.title - The title of the notification.
  * @param {string} opts.stack - Group notifications together by named stacks.
  * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
@@ -20,7 +20,7 @@ export function addNotification(opts) {
         content: NotificationSvelte,
         props: { id, ...opts },
         stack: opts.stack,
-        position: opts.position || "top right",
+        position: opts.position || "bottom right",
         layer: "notifications",
     });
     if (opts.autoClose) {

package/dist/form/Button.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">import Icon from "../display/Icon.svelte";
+import { getContext } from "svelte";
 let {
   href,
   type = "button",
+  class: className,
+  size = "md",
+  kind = "default",
   disabled = false,
   icon,
   onclick,
   children
 } = $props();
+const form = getContext("form");
 </script>
 
 {#if href}
-    <a class="Button Link button" {href} {onclick}>
+    <a class="Button Link button {size} {kind} {className}" {href} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}
         {@render children()}
     </a>
 {:else}
-    <button class="Button button" type={type} disabled={disabled} {onclick}>
+    <button class="Button button {size} {kind} {className}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}

package/dist/form/Button.svelte.d.ts

@@ -1,36 +1,26 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType, Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        href?: string | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
-        disabled?: boolean | undefined;
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        href?: string | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
-        disabled?: boolean | undefined;
-        icon?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | ComponentType | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+import { type Component, 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;
 }
-export {};
+declare const Button: $$__sveltets_2_IsomorphicComponent<{
+    href?: string;
+    type?: "button" | "submit" | "reset";
+    kind?: "default" | "outlined" | "secondary" | "warn";
+    size?: "sm" | "md" | "lg" | "xl";
+    class?: string;
+    disabled?: boolean;
+    icon?: string | Snippet | Component;
+    onclick?: (event: MouseEvent) => void;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/form/FieldActions.svelte

@@ -1,10 +1,17 @@
-<script lang="ts">let {
+<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
+let {
   align = "end",
-  children
+  children,
+  info
 } = $props();
 </script>
 
-<div class="FieldActions {align}">
+<div class="FieldActions {align}" class:hasInfo={!!info}>
+    {#if info}
+        <div class="Info">
+            <StringOrSnippet content={info} />
+        </div>
+    {/if}
     <div class="Actions">
         {@render children()}
     </div>
@@ -17,6 +24,9 @@
         padding: calc(1.5em * var(--fcc)) calc(3em * var(--fcc));
         grid-column: 1 / -1;
         grid-template-columns: subgrid;
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+        align-items: center;
     }
     .Actions {
         display: flex;
@@ -38,8 +48,20 @@
         justify-content: end;
         grid-column: 1 / -1;
     }
+    .FieldActions.hasInfo .Actions {
+        grid-column: 2 / -1;
+    }
     @container (max-width: 480px) {
+        .FieldActions {
+            justify-content: center;
+            gap: 1rem;
+        }
+        .Info {
+            order: 1;
+            text-align: center;
+        }
         .Actions {
+            order: -1;
             flex-direction: column;
         }
     }

package/dist/form/FieldActions.svelte.d.ts

@@ -1,24 +1,20 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        align?: "middle" | "justified" | "start" | "end" | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldActionsProps = typeof __propDef.props;
-export type FieldActionsEvents = typeof __propDef.events;
-export type FieldActionsSlots = typeof __propDef.slots;
-export default class FieldActions extends SvelteComponent<FieldActionsProps, FieldActionsEvents, FieldActionsSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        align?: "middle" | "justified" | "start" | "end" | 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 FieldActions: $$__sveltets_2_IsomorphicComponent<{
+    align?: "justified" | "start" | "middle" | "end";
+    children: Snippet;
+    info?: string | Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FieldActions = InstanceType<typeof FieldActions>;
+export default FieldActions;

package/dist/form/FieldContainer.svelte

@@ -16,11 +16,11 @@
         column-gap: 3em;
         grid-template-columns: minmax(25ch, 35%) minmax(min-content, 1fr);
         border-radius: var(--border-radius);
+        background: var(--bg, var(--form-bg));
     }
     .FieldContainer.contained {
         border: var(--border);
         gap: 0;
-        overflow: clip;
     }
     .FieldContainer :global(.FieldSection:has(+ .FieldActions)) {
         margin-bottom: 0;

package/dist/form/FieldContainer.svelte.d.ts

@@ -1,24 +1,19 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        contained?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldContainerProps = typeof __propDef.props;
-export type FieldContainerEvents = typeof __propDef.events;
-export type FieldContainerSlots = typeof __propDef.slots;
-export default class FieldContainer extends SvelteComponent<FieldContainerProps, FieldContainerEvents, FieldContainerSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        contained?: 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 FieldContainer: $$__sveltets_2_IsomorphicComponent<{
+    contained?: boolean;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FieldContainer = InstanceType<typeof FieldContainer>;
+export default FieldContainer;