lutra 0.1.0 → 0.1.4

package/dist/util/StringOrComponent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from "svelte";
+type $$ComponentProps = {
+    content: string | Component | undefined;
+    props?: Record<string, any>;
+};
+declare const StringOrComponent: Component<$$ComponentProps, {}, "">;
+type StringOrComponent = ReturnType<typeof StringOrComponent>;
+export default StringOrComponent;

package/dist/util/StringOrSnippet.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        props,
+        content,
+    }: {
+        props?: Record<string, any>;
+        content?: string | Snippet<[Record<string, any> | undefined]>;
+    } = $props();
+</script>
+
+{#if typeof content === 'string'}
+    {content}
+{:else if content}
+    {@render content(props)}
+{/if}

package/dist/util/StringOrSnippet.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    props?: Record<string, any>;
+    content?: string | Snippet<[Record<string, any> | undefined]>;
+};
+declare const StringOrSnippet: import("svelte").Component<$$ComponentProps, {}, "">;
+type StringOrSnippet = ReturnType<typeof StringOrSnippet>;
+export default StringOrSnippet;

package/dist/util/attr.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Node attribute helper. This is used to create a function that will set e.g. onclick, aria, etc. attributes on an element.
+ * @returns {Function} - The function to set the attributes. Pass this as `attr(opts)` to a child which can use it with `use:attr`.
+ */
+export declare function attr(opts: Record<string, any>): (node: Element) => void;

package/dist/util/attr.js

@@ -0,0 +1,21 @@
+/**
+ * Node attribute helper. This is used to create a function that will set e.g. onclick, aria, etc. attributes on an element.
+ * @returns {Function} - The function to set the attributes. Pass this as `attr(opts)` to a child which can use it with `use:attr`.
+ */
+export function attr(opts) {
+    return function (node) {
+        for (const [key, value] of Object.entries(opts)) {
+            if (key.startsWith('on')) {
+                node.addEventListener(key.slice(2).toLowerCase(), value);
+            }
+            else {
+                if (value === false) {
+                    node.removeAttribute(key);
+                }
+                else {
+                    node.setAttribute(key, value);
+                }
+            }
+        }
+    };
+}

package/dist/util/color.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Convert a string to a color
+ * @param {string} str - The string to convert
+ * @returns {string} The color
+ */
+export declare function stringToColor(str: string): string;
+/**
+ * Convert a hex color to rgb
+ * @param {string} hex - The hex color
+ * @returns {number[]} The rgb color
+ */
+export declare function hexToRgb(hex: string): number[];
+/**
+ * Get the relative luminance of a color from a hex color
+ * @param {string} hex - The hex color
+ * @returns {number} The relative luminance
+ */
+export declare function hexRelativeLuminance(hex: string): number;
+/**
+ * Get the relative luminance of a color according to the W3C
+ * @param {number} R8bit - The red value
+ * @param {number} G8bit - The green value
+ * @param {number} B8bit - The blue value
+ * @returns
+ */
+export declare function relativeLuminanceW3C(R8bit: number, G8bit: number, B8bit: number): number;
+/**
+ * Status colors
+ */
+export declare const StatusColors: {
+    readonly default: "default";
+    readonly ok: "ok";
+    readonly alert: "alert";
+    readonly warn: "warn";
+    readonly info: "info";
+    readonly task: "task";
+};
+export type StatusColor = keyof typeof StatusColors;
+export type StatusColorOrString = StatusColor | (string & {});
+/**
+ * Check if the value is a valid StatusColor
+ * @param {string} value - The value to check
+ * @returns {boolean} - If the value is a valid StatusColor
+ */
+export declare const isStatusColor: (value?: string) => value is StatusColor;
+/**
+ * Get the CSS variable for a status color
+ * @param {StatusColorOrString} color - The status color
+ * @returns {string} - The CSS variable for the status color
+ */
+export declare function getStatusColorVar(color?: StatusColorOrString, fallback?: string): string;

package/dist/util/color.js

@@ -0,0 +1,97 @@
+/**
+ * Convert a string to a color
+ * @param {string} str - The string to convert
+ * @returns {string} The color
+ */
+export function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xFF;
+        color += ('00' + value.toString(16)).substr(-2);
+    }
+    return color;
+}
+/**
+ * Convert a hex color to rgb
+ * @param {string} hex - The hex color
+ * @returns {number[]} The rgb color
+ */
+export function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) {
+        throw new Error('Invalid hex color');
+    }
+    return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+    ];
+}
+/**
+ * Get the relative luminance of a color from a hex color
+ * @param {string} hex - The hex color
+ * @returns {number} The relative luminance
+ */
+export function hexRelativeLuminance(hex) {
+    const rgb = hexToRgb(hex);
+    return relativeLuminanceW3C(rgb[0], rgb[1], rgb[2]);
+}
+/**
+ * Get the relative luminance of a color according to the W3C
+ * @param {number} R8bit - The red value
+ * @param {number} G8bit - The green value
+ * @param {number} B8bit - The blue value
+ * @returns
+ */
+export function relativeLuminanceW3C(R8bit, G8bit, B8bit) {
+    var RsRGB = R8bit / 255;
+    var GsRGB = G8bit / 255;
+    var BsRGB = B8bit / 255;
+    var R = (RsRGB <= 0.03928) ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+    var G = (GsRGB <= 0.03928) ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+    var B = (BsRGB <= 0.03928) ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+    // For the sRGB colorspace, the relative luminance of a color is defined as: 
+    var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+    return L;
+}
+/**
+ * Status colors
+ */
+export const StatusColors = {
+    default: "default",
+    ok: "ok",
+    alert: "alert",
+    warn: "warn",
+    info: "info",
+    task: "task"
+};
+/**
+ * Check if the value is a valid StatusColor
+ * @param {string} value - The value to check
+ * @returns {boolean} - If the value is a valid StatusColor
+ */
+export const isStatusColor = (value) => {
+    if (!value)
+        return false;
+    return Object.keys(StatusColors).includes(value);
+};
+/**
+ * Get the CSS variable for a status color
+ * @param {StatusColorOrString} color - The status color
+ * @returns {string} - The CSS variable for the status color
+ */
+export function getStatusColorVar(color, fallback) {
+    if (isStatusColor(color)) {
+        return `var(--status-${color})`;
+    }
+    return color || fallback || "var(--status-default)";
+}

package/dist/util/dom.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Find the containing block of a given element. The containing block is the nearest ancestor element that is a containing block for positioned elements.
+ * @param {HTMLElement | null} element - The element to find the containing block for.
+ * @returns {HTMLElement | null} - The containing block element, or null if none is found.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
+ */
+export declare function findContainingBlock(element: HTMLElement | null, id?: string): HTMLElement | null;
+export declare function findAllContainingBlocks(element: HTMLElement | null): HTMLElement[];
+/**
+ * Get the total offset of an element, including all its containing blocks.
+ */
+export declare function getPossiblyContainedPosition(element: HTMLElement | null): {
+    left: number;
+    top: number;
+};

package/dist/util/dom.js

@@ -0,0 +1,73 @@
+let initialElements = {};
+let initialStyles = {};
+/**
+ * Find the containing block of a given element. The containing block is the nearest ancestor element that is a containing block for positioned elements.
+ * @param {HTMLElement | null} element - The element to find the containing block for.
+ * @returns {HTMLElement | null} - The containing block element, or null if none is found.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
+ */
+export function findContainingBlock(element, id = crypto.randomUUID()) {
+    const elementToLookAt = element?.parentElement;
+    // Base case for recursion: if the element is the body or null, return null as no containing block was found
+    if (!elementToLookAt || !element || element.tagName === "BODY" || elementToLookAt.tagName === "BODY") {
+        return null;
+    }
+    if (!initialElements[id]) {
+        initialElements[id] = element;
+        initialStyles[id] = getComputedStyle(element);
+    }
+    // Get computed styles of the current element
+    const style = getComputedStyle(elementToLookAt);
+    // Check for properties that make this element a containing block for positioned elements
+    if ((style.position !== 'static' && (initialStyles[id].position === 'fixed' ||
+        initialStyles[id].position === 'absolute' ||
+        initialStyles[id].position === 'sticky')) ||
+        (style.transform !== 'none' && style.transform !== undefined) ||
+        style.perspective !== 'none' && style.perspective !== undefined ||
+        style.filter !== 'none' && style.filter !== undefined ||
+        style.willChange === 'transform' || style.willChange === 'perspective' ||
+        style.willChange === 'filter' || // Firefox specific for filters
+        (style.contain.includes('layout') || style.contain.includes('paint') || style.contain.includes('strict') || style.contain.includes('content')) ||
+        style.containerType !== 'normal' ||
+        (style.backdropFilter !== 'none' && style.backdropFilter !== undefined)) {
+        delete initialElements[id];
+        delete initialStyles[id];
+        return element;
+    }
+    // Recurse up the DOM tree if no containing block found
+    return findContainingBlock(elementToLookAt, id);
+}
+export function findAllContainingBlocks(element) {
+    let currentElement = findContainingBlock(element);
+    if (!currentElement)
+        return [];
+    const blocks = [currentElement];
+    let i = 0;
+    while (currentElement !== null && currentElement.tagName !== 'BODY' && i < 50) {
+        const block = findContainingBlock(currentElement.parentElement);
+        if (block) {
+            blocks.push(block.parentElement);
+        }
+        currentElement = block;
+        i++;
+    }
+    return blocks;
+}
+/**
+ * Get the total offset of an element, including all its containing blocks.
+ */
+export function getPossiblyContainedPosition(element) {
+    const blocks = findAllContainingBlocks(element);
+    let left = 0;
+    let top = 0;
+    for (const block of blocks) {
+        const rect = block.getBoundingClientRect();
+        console.log('block', block, rect);
+        left += rect.left;
+        top += rect.top;
+    }
+    return {
+        left: left,
+        top: top
+    };
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Get the next focusable element in the specified direction
+ * @param {HTMLElement | null} startingElement - The element to start the search from.
+ * @param {HTMLElement | null} triggerElement - The element that triggered the search.
+ * @param {string} direction - The direction to search in, either 'next' or 'previous'.
+ * @returns {HTMLElement | null} - The next focusable element, or null if none are found.
+ */
+export declare function getNextFocusableElement(startingElement: HTMLElement | null, triggerElement: HTMLElement | null, direction: "next" | "previous"): HTMLElement | null;
+/**
+ * Navigate through a list of elements using the arrow keys
+ * @param {HTMLElement | null} el - The element containing the list of elements to navigate.
+ * @param {string} direction - The direction to navigate in, either 'up' or 'down'.
+ * @returns {void}
+ */
+export declare function arrowNavigation(el: HTMLElement | null, direction: "up" | "down"): void;
+/**
+ * Match the key pressed to the first letter of an element in the list
+ * @param {HTMLElement | null} el - The element containing the list of elements to search through.
+ * @param {KeyboardEvent} e - The keyboard event to match the key from.
+ * @returns {void}
+ */
+export declare function matchOnType(el: HTMLElement | null, e: KeyboardEvent): void;

package/dist/util/keyboard.svelte.js

@@ -0,0 +1,161 @@
+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;
+/**
+ * Get the next focusable element in the specified direction
+ * @param {HTMLElement | null} startingElement - The element to start the search from.
+ * @param {HTMLElement | null} triggerElement - The element that triggered the search.
+ * @param {string} direction - The direction to search in, either 'next' or 'previous'.
+ * @returns {HTMLElement | null} - The next focusable element, or null if none are found.
+ */
+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;
+}
+/**
+ * Navigate through a list of elements using the arrow keys
+ * @param {HTMLElement | null} el - The element containing the list of elements to navigate.
+ * @param {string} direction - The direction to navigate in, either 'up' or 'down'.
+ * @returns {void}
+ */
+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();
+    }
+}
+/**
+ * Match the key pressed to the first letter of an element in the list
+ * @param {HTMLElement | null} el - The element containing the list of elements to search through.
+ * @param {KeyboardEvent} e - The keyboard event to match the key from.
+ * @returns {void}
+ */
+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/util/locale.d.ts

@@ -0,0 +1 @@
+export declare function getLocaleFirstDayOfWeek(): number;

package/dist/util/locale.js

@@ -0,0 +1,47 @@
+export function getLocaleFirstDayOfWeek() {
+    // Returns 0..6 where 0 = Sunday, 1 = Monday
+    try {
+        if (typeof Intl !== "undefined") {
+            const LocaleCtor = Intl.Locale;
+            const resolvedLocale = typeof Intl.DateTimeFormat !== "undefined"
+                ? new Intl.DateTimeFormat(undefined).resolvedOptions().locale
+                : undefined;
+            const navigatorPrimary = (typeof navigator !== "undefined" && navigator.languages && navigator.languages.length > 0)
+                ? navigator.languages[0]
+                : (typeof navigator !== "undefined" ? navigator.language : undefined);
+            const languageTag = resolvedLocale || navigatorPrimary || "en-US";
+            let region;
+            let first;
+            if (LocaleCtor) {
+                const loc = new LocaleCtor(languageTag);
+                region = loc.region;
+                const weekInfo = loc.weekInfo;
+                if (weekInfo && typeof weekInfo.firstDay === "number") {
+                    // Intl Locale weekInfo uses 1..7 where 1 = Monday, 7 = Sunday
+                    first = weekInfo.firstDay % 7; // 7 -> 0 (Sunday), 1 -> 1 (Monday)
+                }
+            }
+            else {
+                // Try to infer region from language tag
+                const parts = typeof languageTag === "string" ? languageTag.split("-") : [];
+                region = parts.length >= 2 ? parts[1] : undefined;
+            }
+            const tz = typeof Intl.DateTimeFormat !== "undefined"
+                ? new Intl.DateTimeFormat(undefined).resolvedOptions().timeZone
+                : undefined;
+            // If first is explicitly Sunday but timezone/region suggests Europe, prefer Monday
+            if (first === 0 && ((tz && typeof tz === "string" && tz.startsWith("Europe/")) || (region && region !== "US"))) {
+                return 1;
+            }
+            if (typeof first === "number")
+                return first;
+            if (region === "US")
+                return 0; // Sunday for US
+            if (tz && typeof tz === "string" && tz.startsWith("Europe/"))
+                return 1; // Monday for Europe
+            return 1; // default Monday for others
+        }
+    }
+    catch { }
+    return 1; // fallback Monday
+}

package/dist/util/settings.d.ts

@@ -0,0 +1,4 @@
+export type LutraSettings = {
+    contained: boolean;
+    rounded: boolean;
+};

package/dist/util/settings.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.0",
+	"version": "0.1.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -25,25 +25,34 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./themes/DefaultTheme.css": {
+			"import": "./dist/css/themes/DefaultTheme.css",
+			"require": "./dist/css/themes/DefaultTheme.css"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.21.1",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@types/node": "^22.15.24",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.31.1",
+		"@sveltejs/package": "^2.4.1",
+		"@sveltejs/vite-plugin-svelte": "^6.1.2",
+		"@types/node": "^24.3.0",
 		"publint": "^0.3.12",
-		"svelte": "^5.33.9",
-		"svelte-check": "^4.2.1",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.5"
+		"svelte": "^5.38.1",
+		"svelte-check": "^4.3.1",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.2"
 	},
 	"dependencies": {
+		"@auth70/bodyguard": "^1.7.1",
+		"blurhash": "^2.0.5",
+		"browser-image-compression": "^2.0.2",
 		"esm-env": "^1.2.2",
-		"marked": "^15.0.12"
+		"marked": "16.2.0",
+		"zod": "^4.0.17",
+		"zodex": "^4.0.0"
 	}
 }

package/dist/css/0-layers.css

@@ -1 +0,0 @@
-@layer l-base, base-overrides, l-typo, typo-overrides, l-layout, layout-overrides, l-media, media-overrides, misc;