lutra 0.0.33 → 0.1.0

package/dist/display/LineChart.svelte

@@ -1,385 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,116 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,104 +0,0 @@
-<script lang="ts">import Overlay from "../layout/Overlay.svelte";
-import PageContent from "../layout/PageContent.svelte";
-import { removeOverlay } from "../layout/overlays.svelte.js";
-import Close from "./Close.svelte";
-import { createId } from "../utils/id.js";
-import Icon from "./Icon.svelte";
-let {
-  id = createId(),
-  children,
-  title,
-  content,
-  icon,
-  actions
-} = $props();
-function onclick(e) {
-  e.preventDefault();
-  removeOverlay(id);
-}
-</script>
-
-{#snippet notification()}
-    <div class="Notification">
-        {#if !actions}
-            <Close position="top right" {onclick} />
-        {/if}
-        {#if icon}
-            <div class="Icon">
-                <Icon {icon} --vertical-align="text-top" --icon-width="2rem" --icon-height="2rem" />
-            </div>
-        {/if}
-        <div class="Content">
-            <PageContent --margin-scale="0.35">
-                {#if children}
-                    {@render children()}
-                {:else}
-                    {#if title}
-                        <h5>{title}</h5>
-                    {/if}
-                    <p>{content}</p>
-                {/if}
-            </PageContent>
-        </div>
-        {#if actions}
-            <div class="Actions">
-                {@render actions()}
-            </div>
-        {/if}
-    </div>
-{/snippet}
-
-{#if children}
-    <Overlay z={100} layer="notifications" position="bottom right" {id}>
-        {@render notification()}
-    </Overlay>
-{:else}
-    {@render notification()}
-{/if}
-
-<style>
-    .Notification {
-        display: block;
-        pointer-events: none;
-        background: var(--bg-app);
-        border-radius: var(--border-radius);
-        border: var(--border);
-        padding: 0.75rem 1rem;
-        width: 30rem;
-        font-size: 0.85em;
-        display: grid;
-        grid-template-areas: "content";
-        grid-template-columns: 1fr;
-        gap: 1rem;
-        box-shadow: 0 0.5rem 1rem var(--shadow);
-    }
-    .Notification:has(.Icon):has(.Actions) {
-        grid-template-areas: "icon content actions";
-        grid-template-columns: auto 1fr auto;
-    }
-    .Notification:not(:has(.Icon)):has(.Actions) {
-        grid-template-areas: "content actions";
-        grid-template-columns: 1fr auto;
-    }
-    .Notification:has(.Icon):not(:has(.Actions)) {
-        grid-template-areas: "icon content";
-        grid-template-columns: auto 1fr;
-    }
-    .Icon {
-        grid-area: icon;
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        pointer-events: auto;
-    }
-    .Content {
-        grid-area: content;
-    }
-    .Actions {
-        grid-area: actions;
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        pointer-events: auto;
-    }
-</style>