lutra 0.0.13 → 0.0.15

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+export { attr } from './attr.js';
+export { stringToColor, hexToRgb, hexRelativeLuminance, relativeLuminanceW3C, StatusColors, isStatusColor, getStatusColorVar } from './color.js';
+export type { Defaults } from './defaults.js';
+export { createId } from './id.js';
+export { isSnippet, isComponent } from './isSnippet.js';
+export type { StatusColor, StatusColorOrString } from './color.js';
+export { popBezier, popBezierInverse, slidefade, solve_spring, cubicBezier } from './transitions.js';
+export type { SpringParams } from './transitions.js';

package/dist/utils/index.js

@@ -0,0 +1,5 @@
+export { attr } from './attr.js';
+export { stringToColor, hexToRgb, hexRelativeLuminance, relativeLuminanceW3C, StatusColors, isStatusColor, getStatusColorVar } from './color.js';
+export { createId } from './id.js';
+export { isSnippet, isComponent } from './isSnippet.js';
+export { popBezier, popBezierInverse, slidefade, solve_spring, cubicBezier } from './transitions.js';

package/dist/utils/keyboard.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function getNextFocusableElement(startingElement: HTMLElement | null, triggerElement: HTMLElement | null, direction: "next" | "previous"): HTMLElement | null;
+export declare function arrowNavigation(el: HTMLElement | null, direction: "up" | "down"): void;
+export declare function matchOnType(el: HTMLElement | null, e: KeyboardEvent): void;

package/dist/utils/keyboard.svelte.js

@@ -0,0 +1,142 @@
+export function getNextFocusableElement(startingElement, triggerElement, direction) {
+    if (!startingElement)
+        return null;
+    // Define selectors for focusable elements
+    const focusableSelectors = 'a, button, textarea, input, select';
+    // Get all focusable elements
+    const allFocusableElements = Array.from(document.querySelectorAll(focusableSelectors)).filter(el => !el.disabled && el.tabIndex >= 0);
+    console.log('allFocusableElements', allFocusableElements);
+    // Filter out elements inside the startingElement
+    const focusableElements = allFocusableElements.filter(el => !triggerElement.contains(el) && el !== startingElement);
+    console.log('focusableElements', focusableElements);
+    // Find the index of the starting element among all focusable elements
+    let startingIndex = allFocusableElements.indexOf(triggerElement);
+    console.log('startingIndex', startingIndex);
+    if (startingIndex === -1) {
+        // If the starting element is not focusable or not found, consider the document's active element if it's focusable.
+        const activeElement = document.activeElement;
+        if (activeElement && allFocusableElements.includes(activeElement)) {
+            startingIndex = allFocusableElements.indexOf(activeElement);
+        }
+        else {
+            // No valid starting point found
+            return null;
+        }
+    }
+    // Determine the next index based on the direction, skipping children of startingElement
+    let nextIndex = -1;
+    if (direction === 'next') {
+        for (let i = startingIndex + 1; i < allFocusableElements.length; i++) {
+            if (focusableElements.includes(allFocusableElements[i])) {
+                nextIndex = focusableElements.indexOf(allFocusableElements[i]);
+                break;
+            }
+        }
+    }
+    else {
+        for (let i = startingIndex - 1; i >= 0; i--) {
+            if (focusableElements.includes(allFocusableElements[i])) {
+                nextIndex = focusableElements.indexOf(allFocusableElements[i]);
+                break;
+            }
+        }
+    }
+    // If no next element is found in the direction, wrap around.
+    if (nextIndex === -1) {
+        if (direction === 'next') {
+            // Wrap to the first element in the list
+            nextIndex = 0;
+        }
+        else {
+            // Wrap to the last element in the list
+            nextIndex = focusableElements.length - 1;
+        }
+    }
+    // Return the next focusable element, or null if none are found
+    return focusableElements[nextIndex] || null;
+}
+export function arrowNavigation(el, direction) {
+    const items = el?.querySelectorAll("a, button, input, textarea, select");
+    if (!items)
+        return;
+    const index = Array.from(items).findIndex((el) => el === document.activeElement);
+    if (index === -1) {
+        items[0].focus();
+    }
+    else if (direction === "down" && index < items.length - 1) {
+        items[index + 1].focus();
+    }
+    else if (direction === "up" && index > 0) {
+        items[index - 1].focus();
+    }
+}
+const ignoreKeys = ['backspace', 'tab', 'shift', 'control', 'alt', 'meta', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'home', 'end', 'pageup', 'pagedown', 'escape', 'capslock', 'numlock', 'scrolllock', 'pause', 'contextmenu', 'printscreen', 'help', 'clear', 'os', 'f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f12', 'insert', 'delete', 'enter', 'space', 'escape'];
+let keyMemory = $state("");
+let timeout;
+export function matchOnType(el, e) {
+    const items = el?.querySelectorAll("a, button, label");
+    if (!items)
+        return;
+    const index = Array.from(items).findIndex((el) => el === document.activeElement);
+    const search = e.key.toLowerCase();
+    if (timeout)
+        clearTimeout(timeout);
+    function removeUls() {
+        items.forEach((el) => {
+            const contentEl = el.querySelector("span.Content") ?? el.querySelector("label");
+            if (contentEl) {
+                contentEl.innerHTML = contentEl.textContent;
+            }
+        });
+    }
+    const currentlyFocusedElement = document.activeElement;
+    // return if the key is not a letter or number
+    if (ignoreKeys.includes(search) || currentlyFocusedElement.tagName === "INPUT" || currentlyFocusedElement.tagName === "TEXTAREA") {
+        keyMemory = '';
+        removeUls();
+        return;
+    }
+    // clear the memory after 1 second
+    timeout = setTimeout(() => {
+        keyMemory = '';
+        removeUls();
+    }, 1000);
+    // only add if the last key is not the same
+    if (keyMemory[keyMemory.length - 1] !== search) {
+        keyMemory += search;
+    }
+    const matches = Array.from(items).filter((el) => {
+        const text = el.textContent?.trim().toLowerCase();
+        return text?.startsWith(keyMemory);
+    });
+    if (matches.length) {
+        // add underline to the matched text
+        matches.forEach((el) => {
+            const contentEl = el.querySelector("span.Content, label");
+            const text = contentEl?.textContent?.trim();
+            if (text) {
+                const index = text.toLowerCase().indexOf(keyMemory);
+                const first = text.slice(0, index);
+                const last = text.slice(index + keyMemory.length);
+                const middle = text.slice(index, index + keyMemory.length);
+                contentEl.innerHTML = `${first}<u>${middle}</u>${last}`;
+            }
+        });
+        if (keyMemory.length === 1) {
+            // if this element is already focused, move to the next one if memory is at one character
+            const nextMatches = Array.from(items).filter((el) => el.textContent?.trim().toLowerCase().startsWith(keyMemory));
+            if (nextMatches) {
+                const nextIndex = nextMatches.findIndex((el) => el === document.activeElement);
+                if (nextIndex < nextMatches.length - 1) {
+                    nextMatches[nextIndex + 1].focus();
+                }
+                else {
+                    nextMatches[0].focus();
+                }
+            }
+        }
+        else {
+            matches[0].focus();
+        }
+    }
+}

package/dist/utils/transitions.js

@@ -1,20 +1,27 @@
-import { cubicOut } from 'svelte/easing';
-let visibleDoubleElements = false;
 /**
  * A bezier curve that starts fast and slows down.
  */
 export const popBezier = cubicBezier(0.25, 0.25, 0.75, 1);
 export const popBezierInverse = cubicBezier(0.75, 0.75, 0.25, 0);
 export function slidefade(node, params = {}) {
-    const existingTransform = getComputedStyle(node).transform.replace('none', '');
-    const existingMarginTop = getComputedStyle(node).paddingTop;
-    const x = params.x || -5;
-    const y = params.y || -5;
+    const origin = params.origin || "top left";
+    const transform = getComputedStyle(node).transform.replace('none', '');
+    const existingTranslateX = transform.match(/translateX\(([^)]+)\)/);
+    const existingTranslateY = transform.match(/translateY\(([^)]+)\)/);
+    const _x = params.x || 0;
+    const _y = params.y || 0;
+    // If the origin is top left, we want to move the element to the right and down, so we need to invert the x and y values.
+    // If the origin is top right, we want to move the element to the left and down, so we need to invert the y value.
+    // etc.
+    const x = origin.indexOf('left') > -1 ? -1 * _x : _x;
+    const y = origin.indexOf('top') > -1 ? -1 * _y : _y;
+    const translateX = `${existingTranslateX ? existingTranslateX[1] : '0px'} + ${x}px`;
+    const translateY = `${existingTranslateY ? existingTranslateY[1] : '0px'} + ${y}px`;
     return {
         delay: params.delay || 0,
         duration: params.duration || 400,
         easing: params.easing || popBezier,
-        css: (t, u) => `transform-origin: ${params.origin || "top left"}; transform: ${existingTransform}; scale: ${t / 10 + 0.9}; padding-top: calc(${existingMarginTop} + ${y * u}px); opacity: ${t};`,
+        css: (t, u) => `transform-origin: ${origin}; transform: ${transform} translateX(calc(${translateX} * ${u})) translateY(calc(${translateY} * ${u})); scale: ${t / 10 + 0.9}; opacity: ${t};`,
     };
 }
 export function solve_spring(from, velocity, to, _params) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",
@@ -25,10 +25,6 @@
 			"types": "./dist/data/index.d.ts",
 			"svelte": "./dist/data/index.js"
 		},
-		"./datatable": {
-			"types": "./dist/datatable/index.d.ts",
-			"svelte": "./dist/datatable/index.js"
-		},
 		"./display": {
 			"types": "./dist/display/index.d.ts",
 			"svelte": "./dist/display/index.js"
@@ -66,13 +62,13 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.42.1",
-		"@rollup/browser": "^4.13.0",
-		"@sveltejs/adapter-auto": "^3.1.1",
-		"@sveltejs/package": "^2.3.0",
+		"@playwright/test": "^1.43.0",
+		"@rollup/browser": "^4.14.0",
+		"@sveltejs/adapter-auto": "^3.2.0",
+		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/glob": "8.1.0",
-		"glob": "^10.3.10",
+		"glob": "^10.3.12",
 		"highlight.js": "^11.9.0",
 		"mdsvex": "^0.11.0",
 		"monaco-editor": "^0.47.0",
@@ -80,10 +76,10 @@
 		"prettier-plugin-svelte": "^3.2.2",
 		"publint": "^0.2.7",
 		"svelte": "next",
-		"svelte-check": "^3.6.8",
+		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
-		"typescript": "^5.4.3",
-		"vite": "5.2.6",
+		"typescript": "^5.4.4",
+		"vite": "5.2.8",
 		"vitest": "1.4.0"
 	},
 	"svelte": "./dist/index.js",

package/dist/datatable/DataTable.svelte

@@ -1,31 +0,0 @@
-<script>import UiContent from "../layout/UIContent.svelte";
-import { setContext } from "svelte";
-let {
-  columns,
-  contained,
-  children
-} = $props();
-</script>
-
-<UiContent>
-    <section class="DataTable" class:contained style="--dtc: {contained ? 1 : 0}; --dtcols: {columns};">
-        {@render children()}
-    </section>
-</UiContent>
-
-<style>
-    section {
-        container-type: inline-size;
-        display: grid;
-        grid-template-columns: repeat(var(--dtcols), minmax(min-content, 1fr));
-        border-radius: var(--border-radius);
-        font-size: var(--font-size, 1em);
-        margin-inline: calc((var(--dtc) - 1) * 1em);
-        width: calc(100% + (var(--dtc) - 1 * 2em));
-        overflow-x: auto;
-    }
-    section.contained {
-        border: var(--border);
-        border-radius: var(--border-radius);
-    }
-</style>

package/dist/datatable/DataTable.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        columns: number;
-        /** The number of columns to display the data in. */
-        contained?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
-export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
-}
-export {};

package/dist/datatable/DataTableColumn.svelte

@@ -1,20 +0,0 @@
-<script>import { getContext } from "svelte";
-let {
-  children
-} = $props();
-const { header } = getContext("DataTableRow");
-if (header) {
-  getContext("DataTableColumns").addColumn();
-}
-</script>
-
-<div class="DataTableColumn">
-    {#if children}
-        {@render children()}
-    {/if}
-</div>
-
-<style>
-    .DataTableColumn {
-    }
-</style>

package/dist/datatable/DataTableColumn.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        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 DataTableColumnProps = typeof __propDef.props;
-export type DataTableColumnEvents = typeof __propDef.events;
-export type DataTableColumnSlots = typeof __propDef.slots;
-export default class DataTableColumn extends SvelteComponent<DataTableColumnProps, DataTableColumnEvents, DataTableColumnSlots> {
-}
-export {};

package/dist/datatable/DataTableRow.svelte

@@ -1,59 +0,0 @@
-<script>import { setContext } from "svelte";
-let {
-  children,
-  actions,
-  header = false
-} = $props();
-setContext("DataTableRow", { header });
-</script>
-
-<svelte:element this={header ? "header" : "section"} class="DataTableRow" class:header>
-    {@render children()}
-    {#if actions}
-        <div class="Actions">
-            {@render actions()}
-        </div>
-    {/if}
-</svelte:element>
-
-<style>
-    .DataTableRow {
-        display: grid;
-        grid-template-columns: subgrid;
-        grid-column: 1 / -1;
-        gap: 1.5em;
-        align-items: center;
-        width: 100%;
-        padding: 0.75em 1em;
-        position: relative;
-    }
-    .DataTableRow:hover {
-        background: var(--bg-subtle);
-    }
-    .DataTableRow:has(.Actions) {
-        padding-right: 0;
-    }
-    .DataTableRow :global(> *) {
-        white-space: nowrap;
-    }
-    .DataTableRow.header {
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
-    }
-    section:not(:first-child) {
-        border-top: var(--border);
-    }
-    .Actions {
-        display: flex;
-        gap: 0.75em;
-        justify-self: end;
-        position: sticky;
-        top: 0;
-        right: 0;
-        padding-left: 0.75em;
-        padding-right: calc(1em * var(--dtc));
-        background: var(--bg-app);
-    }
-    .DataTableRow:hover .Actions {
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
-    }
-</style>

package/dist/datatable/DataTableRow.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        header?: boolean | undefined;
-        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableRowProps = typeof __propDef.props;
-export type DataTableRowEvents = typeof __propDef.events;
-export type DataTableRowSlots = typeof __propDef.slots;
-export default class DataTableRow extends SvelteComponent<DataTableRowProps, DataTableRowEvents, DataTableRowSlots> {
-}
-export {};

package/dist/datatable/index.d.ts

@@ -1,3 +0,0 @@
-export { default as DataTable } from './DataTable.svelte';
-export { default as DataTableColumn } from './DataTableColumn.svelte';
-export { default as DataTableRow } from './DataTableRow.svelte';

package/dist/datatable/index.js

@@ -1,3 +0,0 @@
-export { default as DataTable } from './DataTable.svelte';
-export { default as DataTableColumn } from './DataTableColumn.svelte';
-export { default as DataTableRow } from './DataTableRow.svelte';

package/dist/form/server.d.ts

@@ -1,21 +0,0 @@
-import { Bodyguard } from "@auth70/bodyguard";
-import type { ActionFailure, RequestEvent } from "@sveltejs/kit";
-import type { z, ZodType } from "zod";
-export declare const bodyguard: Bodyguard;
-export type Issue = {
-    message: string;
-    path: string[];
-    field: string;
-};
-export declare class FormError extends Error {
-    issues: Issue[];
-    constructor(issues: Issue[], message?: string);
-}
-export declare function formHandler<T, Z extends ZodType<any, any>>(event: RequestEvent, schema: Z, onSuccess: (data: z.infer<Z>) => Promise<T>, { castNumbers, castBooleans, }?: {
-    castNumbers?: boolean;
-    castBooleans?: boolean;
-}): Promise<T | ActionFailure<{
-    issues: any;
-}> | ActionFailure<{
-    message: any;
-}>>;

package/dist/form/server.js

@@ -1,48 +0,0 @@
-import { Bodyguard } from "@auth70/bodyguard";
-import { fail } from "@sveltejs/kit";
-export const bodyguard = new Bodyguard();
-export class FormError extends Error {
-    issues;
-    constructor(issues, message = 'Form error') {
-        super(message);
-        this.issues = issues;
-    }
-}
-export async function formHandler(event, schema, onSuccess, { castNumbers, castBooleans, } = {
-    castNumbers: false,
-    castBooleans: false,
-}) {
-    const data = await bodyguard.softForm(event.request, schema.parse, {
-        castNumbers: castNumbers || false,
-        castBooleans: castBooleans || false,
-    });
-    if (!data.success) {
-        try {
-            const issues = JSON.parse(data.error);
-            console.error('[lutra] Bodyguard failed:', data);
-            return fail(400, {
-                issues,
-            });
-        }
-        catch (err) {
-            console.error('[lutra] Bodyguard failed:', data);
-            return fail(400, {
-                issues: data.error
-            });
-        }
-    }
-    try {
-        return Promise.resolve(onSuccess(data.value));
-    }
-    catch (err) {
-        console.error('[lutra] Error in form handler:', err);
-        if (err?.issues) {
-            return fail(400, {
-                issues: err?.issues ?? [],
-            });
-        }
-        return fail(500, {
-            message: err.message
-        });
-    }
-}