lutra 0.0.20 → 0.0.33

package/dist/display/LineChart.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">import { onMount } from "svelte";
+import { makeScale, getShortKValue, catmullRomToSVG, catmullRomBase, catmullRomGetY, getSVGSize } from "./chart.js";
+let {
+  contained,
+  rounded,
+  tension = 0.1,
+  data = {
+    labels: [],
+    values: []
+  },
+  options = {
+    yValues: 8
+  }
+} = $props();
+if (!options?.yValues) {
+  options.yValues = 5;
+}
+let svg;
+let mouseX = $state(0);
+let withinBounds = $state(false);
+const colors = ["#881177", "#aa3355", "#cc6666", "#ee9944", "#eedd00", "#99dd55", "#44aa88", "#22ccbb", "#00bbcc", "#0099cc", "#3366bb"];
+const colorSets = [
+  ["#881177", "#aa3355"],
+  ["#cc6666", "#ee9944"],
+  ["#eedd00", "#99dd55"],
+  ["#44aa88", "#22ccbb"],
+  ["#00bbcc", "#0099cc"],
+  ["#3366bb", "#3366bb"]
+];
+const scaledValues = makeScale(data.values, options.yValues);
+const maxScaledValue = Math.max(...scaledValues);
+const coords = data.values?.map((value, index) => ({
+  x: index * (100 / (data.labels.length - 1)),
+  y: 100 - value * 100 / maxScaledValue
+}));
+const pointsData = catmullRomBase(coords || [], tension);
+function generatePath() {
+  const d = catmullRomToSVG(pointsData, tension, coords[0]);
+  let path2 = `M` + d;
+  return path2;
+}
+const path = generatePath();
+function handleMouseMove(event) {
+  const rect = svg.getBoundingClientRect();
+  const styles = window.getComputedStyle(svg);
+  const leftPadding = parseFloat(styles.paddingLeft);
+  const rightPadding = parseFloat(styles.paddingRight);
+  const padding = leftPadding + rightPadding;
+  const width = rect.width - padding;
+  if (event.clientX > rect.left && event.clientX < rect.right) {
+    withinBounds = true;
+  } else {
+    withinBounds = false;
+  }
+  mouseX = event.clientX - svg.getBoundingClientRect().left;
+}
+let dotY = $derived.by(() => {
+  if (mouseX) {
+    return getYAtIndex(findClosestValueIndex(mouseX));
+  }
+  return 0;
+});
+function handleMouseOut(event) {
+  if (event.composedPath().includes(svg)) {
+    withinBounds = true;
+  } else {
+    withinBounds = false;
+  }
+}
+function getYAtIndex(index) {
+  const { innerWidth, innerHeight, padding, height } = getSVGSize(svg);
+  const heightPaddingRatio = innerHeight / height;
+  const ret = catmullRomGetY(pointsData, tension, (getXatIndex(index) - padding.left) / innerWidth * 100, heightPaddingRatio);
+  return ret;
+}
+function getXatIndex(index) {
+  const { innerWidth, innerHeight, padding } = getSVGSize(svg);
+  return index / (data.labels.length - 1) * innerWidth + padding.left;
+}
+function findClosestValueIndex(x) {
+  const { innerWidth, innerHeight, padding } = getSVGSize(svg);
+  let index = Math.round((x - padding.left) / innerWidth * (data.labels.length - 1));
+  if (index < 0) {
+    index = 0;
+  }
+  if (index > data.labels.length - 1) {
+    index = data.labels.length - 1;
+  }
+  return index;
+}
+</script>
+
+<div class="ChartContainer" class:contained class:rounded>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_mouse_events_have_key_events -->
+    <div class="Chart" style="--items: {data.labels.length};" onmousemove={handleMouseMove} onmouseout={handleMouseOut}>
+        <svg bind:this={svg} viewBox={`0 0 100 100`} preserveAspectRatio="none">
+            <defs>
+                <linearGradient id="myGradient" x1="0%" x2="0%" y1="0%" y2="100%" gradientTransform="matrix(1, 0, 0, 1.5, 0, 0)">
+                    <stop offset="0%" stop-color="#0099cc"/>
+                    <stop offset="100%" stop-color="#0099cc" stop-opacity="0"/>
+                </linearGradient>
+            </defs>
+            <g class="Curve">
+                <path
+                    stroke="#0099cc"
+                    stroke-width="2"
+                    fill="none"
+                    d={path}
+                />
+            </g>
+            <g class="Curve2">
+                <path
+                    fill="url(#myGradient)"
+                    fill-rule="nonzero"
+                    d={path+`L 100 100 L 0 100 Z`}
+                />
+            </g>
+        </svg>
+        <div class="X Axis">
+            <div class="Labels">
+                {#each data.labels as label, i}
+                    <span style="left: calc(
+                        ({i * (100 / (data.labels.length - 1))}%)
+                    )">
+                        {label}
+                    </span>
+                {/each}
+            </div>
+        </div>
+        <div class="Y Axis">
+            <div class="Labels">
+                {#each scaledValues as maxValue, index}
+                    <span style="bottom: calc(
+                        ({index * (100 / scaledValues.length + ((options.yValues || 5) - scaledValues.length + 1))}%)
+                    )">
+                        {getShortKValue(maxValue)}
+                    </span>
+                {/each}
+            </div>
+        </div>
+        <div class="Lines">
+            <div class="Y">
+                {#each scaledValues as maxValue, index}
+                    <span style="bottom: calc(
+                        ({index * (100 / scaledValues.length + ((options.yValues || 5) - scaledValues.length + 1))}%)
+                    )">
+                    </span>
+                {/each}
+            </div>
+            <div class="X">
+                {#each data.labels as label, index}
+                    <span style="left: calc((
+                        ({index * (100 / (data.labels.length - 1))}%)
+                    )"
+                        class:hover={withinBounds && findClosestValueIndex(mouseX) == index}
+                    >
+                    </span>
+                {/each}
+            </div>
+        </div>
+        {#if withinBounds}
+            <div class="InteractiveDot">
+                <div class="Dot" class:last={findClosestValueIndex(mouseX) >= data.labels.length / 2} style="left: calc({getXatIndex(findClosestValueIndex(mouseX))}px - var(--interactive-dot-size) / 2); top: calc({dotY}% - var(--interactive-dot-size) / 2);"> 
+                    <div class="DotValue">
+                        <span>{data.labels[findClosestValueIndex(mouseX)] ? data.labels[findClosestValueIndex(mouseX)] : ''}</span>
+                        {data.values[findClosestValueIndex(mouseX)] || 0}
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .ChartContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    .ChartContainer.contained {
+        padding: 1rem 1rem 2rem 3rem;
+        border: var(--border);
+    }
+    .ChartContainer.rounded {
+        border-radius: var(--border-radius);
+    }
+    .Chart {
+        --chart-padding: 1rem;
+        --dot-size: 0.5rem;
+        --interactive-dot-size: 1rem;
+        --dot-hitbox: calc(100% / var(--items)) / 2;
+        --border-alpha: color-mix(in srgb, var(--border-color) 70%, transparent);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        user-select: none;
+    }
+    svg {
+        background: var(--bg);
+        padding-left: calc(var(--chart-padding));
+        padding-right: calc(var(--chart-padding));
+        padding-top: calc(var(--chart-padding));
+        padding-bottom: calc(var(--chart-padding));
+		overflow: visible;
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    .Curve2 {
+        opacity: 0.65;
+    }
+	svg * {
+		vector-effect: non-scaling-stroke;
+	}
+
+    /* dots */
+    .InteractiveDot {
+        padding: var(--chart-padding) 0 var(--chart-padding) 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: stretch;
+    }
+    .Dot {
+        position: relative;
+        left: calc((-1 * var(--dot-hitbox) + var(--dot-size) / 2) - 2px);
+        width: var(--dot-size);
+        height: var(--dot-size);
+        background: orange;
+        border-radius: 50%;
+        border: var(--border-subtle);
+        outline: 0px;
+        opacity: 0;
+    }
+    .InteractiveDot .Dot {
+        opacity: 1;
+        width: var(--interactive-dot-size);
+        height: var(--interactive-dot-size);
+        transition: left 0.15s ease-out, top 0.15s ease-out;
+    }
+    .InteractiveDot {
+        pointer-events: none;
+    }
+    .DotValue {
+        position: absolute;
+        top: calc(-1 * var(--dot-size) / 2 + 0.25rem + 2px);
+        left: calc(var(--dot-size) + 1rem);
+        background: var(--bg-app);
+        transform: translateY(-50%);
+        color: var(--text);
+        padding: 0.75rem 1rem;
+        border: var(--border);
+        border-radius: var(--border-radius);
+        box-shadow: 0px 0.5rem 1rem var(--shadow);
+        white-space: nowrap;
+        transition: all 0.2s;
+        font-size: 1.5rem;
+        line-height: 2rem;
+        font-weight: 500;
+    }
+    .DotValue span {
+        font-size: 0.9rem;
+        line-height: 1.4rem;
+        font-weight: 400;
+        display: block;
+    }
+
+    /* Axis */
+    .Axis {
+        position: absolute;
+        top: 0;
+        pointer-events: none;
+        transition: opacity 0.4s;
+    }
+    .X.Axis {
+        bottom: 0;
+        top: auto;
+        width: 100%;
+        height: auto;
+    }
+
+    .Y.Axis {
+        height: 100%;
+    }
+
+    .Lines {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+    .InteractiveDot {
+        visibility: hidden;
+    }
+
+    .Chart:hover .InteractiveDot {
+        visibility: visible;
+    }
+
+    .Lines .X, .Lines .Y {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .Lines .Y {
+        top: var(--chart-padding);
+        height: calc(100% - 2 * var(--chart-padding));
+    }
+    .Lines .X {
+        left: var(--chart-padding);
+        width: calc(100% - 2 * var(--chart-padding));
+    }
+
+    .Lines .X span {
+        display: block;
+        position: absolute;
+        left: var(--chart-padding);
+        height: 100%;
+        border-left: 1px dotted var(--border-alpha);
+        transform: translateX(-50%);
+    }
+
+    .Lines .Y span {
+        display: block;
+        position: absolute;
+        width: 100%;
+        border-top: 1px dotted var(--border-alpha);
+    }
+
+    .Chart:hover .Lines .X span.hover {
+        border-left-style: solid;
+        border-left-color: orange;
+        border-left-width: 3px;
+        outline: 1px solid var(--bg);
+    }
+
+    .Axis .Labels {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .X.Axis .Labels {
+        left: var(--chart-padding);
+        width: calc(100% - 2 * var(--chart-padding));
+        pointer-events: none;
+    }
+
+    .Y.Axis .Labels {
+        top: calc((var(--chart-padding) * 2) - 0.075rem);
+        height: calc(100% - 2 * var(--chart-padding));
+        pointer-events: none;
+    }
+
+    .Axis span {
+        font-size: 0.65rem;
+        line-height: 1rem;
+        color: var(--text-lighter);
+        position: absolute;
+        line-height: 1;
+    }
+
+    .Y.Axis .Labels span {
+        left: -0.5rem;
+        transform: translate(-100%,-100%);
+    }
+
+    .X.Axis .Labels span {
+        top: 0.5rem;
+        transform: translate(-50%,0);
+        white-space: nowrap;
+        text-align: center;
+    }
+
+</style>

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

@@ -0,0 +1,24 @@
+import { type ChartData } from './chart.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 LineChart: $$__sveltets_2_IsomorphicComponent<{
+    contained?: boolean;
+    rounded?: boolean;
+    tension?: number;
+    data: ChartData;
+    options?: {
+        yValues?: number;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type LineChart = InstanceType<typeof LineChart>;
+export default LineChart;

package/dist/display/LoadingIndicator.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { navigating } from "$app/stores";
+</script>
+
+<div class="LoadingIndicator" class:visible={$navigating}>
+</div>
+
+<style>
+    .LoadingIndicator {
+        position: fixed;
+        height: 8px;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        z-index: 10000000;
+        background-image: linear-gradient(to right,#817,#a35,#c66,#e94,#ed0,#9d5,#4d8,#2cb,#0bc,#09c,#36b,#639,#817);
+        background-size: 200% 100%;
+        opacity: 0;
+        transition: opacity 0.2s ease-in;
+        pointer-events: none;
+    }
+    .LoadingIndicator.visible {
+        opacity: 1;
+        animation: stripe 2s linear infinite;
+    }
+    @keyframes stripe {
+        0% {
+            background-position: 0 0;
+        }
+        100% {
+            background-position: 200% 0;
+        }
+    }
+</style>

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

@@ -0,0 +1,15 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const LoadingIndicator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LoadingIndicator = InstanceType<typeof LoadingIndicator>;
+export default LoadingIndicator;

package/dist/display/Modal.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">import UiContent from "../layout/UIContent.svelte";
+import { slidefade } from "../utils/transitions.js";
+import { attr } from "../utils/attr.js";
+let {
+  contained,
+  content,
+  buttons,
+  trigger,
+  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 closeModal() {
+  document.getElementById(id).hidePopover();
+  isOpen = false;
+}
+function toggleModal() {
+  isOpen = !isOpen;
+}
+function clickElsewhere(e) {
+  if (e.target instanceof HTMLElement && !e.target.closest(".ModalContent")) {
+    closeModal();
+  }
+}
+$effect(() => {
+  if (isOpen) {
+    document.getElementsByTagName("html")[0].style.overflow = "hidden";
+  } else {
+    document.getElementsByTagName("html")[0].style.overflow = "auto";
+  }
+});
+let attrs = $derived.by(() => {
+  return attr({
+    id: `trigger-${id}`,
+    popovertarget: id,
+    onclick: toggleModal
+  });
+});
+</script>
+
+<div class="Modal">
+    <div class="Trigger">
+        {@render trigger(attrs)}
+    </div>
+    {#if isOpen}
+        <UiContent>
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div {id} onclick={clickElsewhere} popover="auto" class="ModalContainer">
+                <div class="ModalContent {shape}" class:contained>
+                    <div class="ModalContentInside">
+                        {@render content(closeModal)}
+                        {#if buttons}
+                            <div class="ModalActions">
+                                {@render buttons(closeModal)}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </UiContent>
+    {/if}
+</div>
+
+<style>
+    .Modal, .Trigger {
+        position: relative;
+        display: inline-block;
+    }
+    .ModalContainer {
+        border: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: var(--bg-overlay);
+        backdrop-filter: var(--overlay-filter);
+        overflow-y: auto;
+    }
+    .ModalContent {
+        background: var(--bg, var(--bg-app));
+        box-shadow: var(--shadow);
+        opacity: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0.25rem 1rem 0 var(--shadow);
+    }
+    .ModalContentInsize {
+        container-type: inline-size;
+    }
+    .ModalContent.rounded {
+        border-radius: var(--border-radius);
+    }
+    .ModalContent.contained {
+        border: var(--border);
+    }
+    .ModalActions {
+        display: flex;
+        gap: 1rem;
+        border-top: var(--border);
+        justify-content: flex-end;
+        padding: 1rem;
+        background: var(--bg-subtle) linear-gradient(0deg, transparent, 95%, color-mix(in hsl, transparent 95%, var(--mix-target)));
+    }
+    [popover] {
+        animation: fadeIn 0.2s;
+    }
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+</style>

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

@@ -0,0 +1,27 @@
+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 Modal: $$__sveltets_2_IsomorphicComponent<{
+    /** Whether the modal should be contained with a border */
+    contained?: boolean;
+    /** The content of the modal */
+    content: Snippet<[close: () => void]>;
+    /** Snippet containing the trigger element */
+    trigger: Snippet<[attrs: (node: Element) => void]>;
+    /** Buttons to be displayed in the modal */
+    buttons?: Snippet<[close: () => void]>;
+    /** The shape of the modal */
+    shape?: "rounded" | "sharp";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

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

@@ -1,42 +1,23 @@
-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;
-    }>);
+import type { Snippet, Component } 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 Notification: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    children?: Snippet;
+    title?: string;
+    content?: string;
+    icon?: string | Snippet | Component;
+    actions?: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Notification = InstanceType<typeof Notification>;
+export default Notification;

package/dist/display/Panel.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+let {
+  children,
+  z
+} = $props();
+const prevZ = getContext("ltr.z") ?? 0;
+const currentZ = Number.isInteger(z) ? z : prevZ + 1;
+setContext("ltr.z", currentZ);
+</script>
+
+<div class="Panel" style="--z: {currentZ};">
+    Z: {currentZ}
+    {@render children()}
+</div>
+
+<style>
+    .Panel {
+        background: var(--bg-panel);
+        border: var(--border);
+        padding: 2rem;
+        position: relative;
+    }
+</style>