lutra 0.0.20 → 0.1.0

package/dist/utils/color.js

@@ -1,97 +0,0 @@
-/**
- * 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/utils/defaults.d.ts

@@ -1,4 +0,0 @@
-export type Defaults = {
-    /** Default shape for elements */
-    shape: "sharp" | "rounded";
-};

package/dist/utils/defaults.js

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

package/dist/utils/dom.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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/utils/dom.js

@@ -1,74 +0,0 @@
-import { createId } from "./id.js";
-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 = createId()) {
-    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/utils/hooks.server.d.ts

@@ -1,2 +0,0 @@
-import type { RequestEvent } from "@sveltejs/kit";
-export declare const addAcceptCh: (event: RequestEvent) => void;

package/dist/utils/hooks.server.js

@@ -1,16 +0,0 @@
-const acceptCh = [
-    'Sec-CH-Prefers-Color-Scheme',
-    'Sec-CH-Prefers-Reduced-Transparency',
-    'Sec-CH-Prefers-Reduced-Motion',
-    'Sec-CH-UA-Arch',
-    'Sec-CH-UA-Bitness',
-    'Sec-CH-UA-Mobile',
-    'Sec-CH-UA-Model',
-    'Sec-CH-UA-Platform',
-    'Sec-CH-UA-Platform-Version',
-];
-export const addAcceptCh = (event) => {
-    event.setHeaders({
-        'Accept-CH': acceptCh.join(', ')
-    });
-};

package/dist/utils/id.d.ts

@@ -1 +0,0 @@
-export declare function createId(): string;

package/dist/utils/id.js

@@ -1,3 +0,0 @@
-export function createId() {
-    return 'l-' + Math.random().toString(36).substr(2, 9);
-}

package/dist/utils/index.d.ts

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

@@ -1,5 +0,0 @@
-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/isSnippet.d.ts

@@ -1,5 +0,0 @@
-import type { ComponentType } from "svelte";
-export declare const isSnippet: (object: unknown) => object is (this: void) => typeof import("svelte").SnippetReturn & {
-    _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-};
-export declare const isComponent: (object: unknown) => object is ComponentType;

package/dist/utils/isSnippet.js

@@ -1,6 +0,0 @@
-export const isSnippet = (object) => {
-    return !!object && Object.hasOwn(object, Symbol.for('svelte.snippet'));
-};
-export const isComponent = (object) => {
-    return !isSnippet(object) && typeof object === 'function';
-};

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

@@ -1,22 +0,0 @@
-/**
- * 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/utils/keyboard.svelte.js

@@ -1,161 +0,0 @@
-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();
-        }
-    }
-}