lutra 0.0.18 → 0.0.20

package/dist/typo/H6.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type H6Props = typeof __propDef.props;
 export type H6Events = typeof __propDef.events;
 export type H6Slots = typeof __propDef.slots;
 export default class H6 extends SvelteComponent<H6Props, H6Events, H6Slots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        hr?: boolean | undefined;
+        subtle?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/typo/P.svelte.d.ts

@@ -2,13 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
-        /** Center the text. */
         center?: boolean | undefined;
-        /** Language of the element */
         lang?: string | undefined;
-        /** Make the text subtle. */
         subtle?: boolean | undefined;
-        /** Make the text strong. */
         strong?: boolean | undefined;
         children: Snippet;
     };
@@ -21,5 +17,14 @@ export type PProps = typeof __propDef.props;
 export type PEvents = typeof __propDef.events;
 export type PSlots = typeof __propDef.slots;
 export default class P extends SvelteComponent<PProps, PEvents, PSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        center?: boolean | undefined;
+        lang?: string | undefined;
+        subtle?: boolean | undefined;
+        strong?: boolean | undefined;
+        children: (this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        };
+    }>);
 }
 export {};

package/dist/utils/StringOrComponentOrSnippet.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">import { isComponent, isSnippet } from "./isSnippet.js";
 let {
-  content
+  content,
+  props
 } = $props();
 </script>
 
 {#if typeof content === 'string'}
     {content}
 {:else if isComponent(content)}
-    <svelte:component this={content} />
+    <svelte:component this={content} {...props} />
 {:else if isSnippet(content)}
     {@render content()}
 {/if}

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

@@ -3,6 +3,7 @@ import type { ComponentType, Snippet } from "svelte";
 declare const __propDef: {
     props: {
         content: string | ComponentType | Snippet;
+        props?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,5 +14,11 @@ export type StringOrComponentOrSnippetProps = typeof __propDef.props;
 export type StringOrComponentOrSnippetEvents = typeof __propDef.events;
 export type StringOrComponentOrSnippetSlots = typeof __propDef.slots;
 export default class StringOrComponentOrSnippet extends SvelteComponent<StringOrComponentOrSnippetProps, StringOrComponentOrSnippetEvents, StringOrComponentOrSnippetSlots> {
+    constructor(options?: import("svelte").ComponentConstructorOptions<{
+        content: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType;
+        props?: Record<string, any> | undefined;
+    }>);
 }
 export {};

package/dist/utils/attr.d.ts

@@ -1,5 +1,5 @@
 /**
- * Node attribute helper. This is used to create a function that will set e.g. aria attributes on an element.
- * @returns {Function} - The function to set the aria attributes. Pass this as `attr(opts)` to a child which can use it with `use:attr`.
+ * 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/utils/attr.js

@@ -1,6 +1,6 @@
 /**
- * Node attribute helper. This is used to create a function that will set e.g. aria attributes on an element.
- * @returns {Function} - The function to set the aria attributes. Pass this as `attr(opts)` to a child which can use it with `use:attr`.
+ * 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) {

package/dist/utils/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/utils/dom.js

@@ -0,0 +1,74 @@
+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/keyboard.svelte.d.ts

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

@@ -1,3 +1,13 @@
+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;
@@ -55,6 +65,12 @@ export function getNextFocusableElement(startingElement, triggerElement, directi
     // 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)
@@ -70,9 +86,12 @@ export function arrowNavigation(el, direction) {
         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;
+/**
+ * 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)

package/dist/utils/transitions.d.ts

@@ -4,6 +4,7 @@
 export declare const popBezier: (t: number) => number;
 export declare const popBezierInverse: (t: number) => number;
 export declare function slidefade(node: Element, params?: {
+    noMargin?: boolean;
     origin?: string;
     x?: number;
     y?: number;

package/dist/utils/transitions.js

@@ -9,7 +9,8 @@ export function slidefade(node, params = {}) {
     const existingTranslateX = transform.match(/translateX\(([^)]+)\)/);
     const existingTranslateY = transform.match(/translateY\(([^)]+)\)/);
     const _x = params.x || 0;
-    const _y = params.y || 0;
+    const _y = params.y || 5;
+    const elHeight = node.clientHeight;
     // 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.
@@ -21,7 +22,13 @@ export function slidefade(node, params = {}) {
         delay: params.delay || 0,
         duration: params.duration || 400,
         easing: params.easing || popBezier,
-        css: (t, u) => `transform-origin: ${origin}; transform: ${transform} translateX(calc(${translateX} * ${u})) translateY(calc(${translateY} * ${u})); scale: ${t / 10 + 0.9}; opacity: ${t};`,
+        css: (t, u) => {
+            let ret = `transform-origin: ${origin}; transform: ${transform} translateX(calc(${translateX} * ${u})) translateY(calc(${translateY} * ${u})); scale: ${t / 10 + 0.9}; opacity: ${t};`;
+            if (params.noMargin) {
+                ret += ` margin-bottom: calc(-1 * ${elHeight || 0}px * ${u});`;
+            }
+            return ret;
+        }
     };
 }
 export function solve_spring(from, velocity, to, _params) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.18",
+	"version": "0.0.20",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",
@@ -62,8 +62,8 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.43.0",
-		"@rollup/browser": "^4.14.1",
+		"@playwright/test": "^1.43.1",
+		"@rollup/browser": "^4.17.2",
 		"@sveltejs/adapter-auto": "^3.2.0",
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
@@ -71,16 +71,16 @@
 		"glob": "^10.3.12",
 		"highlight.js": "^11.9.0",
 		"mdsvex": "^0.11.0",
-		"monaco-editor": "^0.47.0",
+		"monaco-editor": "^0.48.0",
 		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-svelte": "^3.2.3",
 		"publint": "^0.2.7",
 		"svelte": "next",
-		"svelte-check": "^3.6.9",
+		"svelte-check": "^3.7.0",
 		"tslib": "^2.6.2",
 		"typescript": "^5.4.5",
-		"vite": "5.2.8",
-		"vitest": "1.4.0"
+		"vite": "5.2.10",
+		"vitest": "1.5.3"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -88,6 +88,8 @@
 	"dependencies": {
 		"@auth70/bodyguard": "^1.6.2",
 		"@auth70/zodex-esm": "^0.7.3",
-		"zod": "^3.22.4"
+		"blurhash": "^2.0.5",
+		"esm-env": "^1.0.0",
+		"zod": "^3.23.5"
 	}
 }