lutra 0.0.1

package/dist/utils/attr.d.ts

@@ -0,0 +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`.
+ */
+export declare function attr(opts: Record<string, any>): (node: Element) => void;

package/dist/utils/attr.js

@@ -0,0 +1,21 @@
+/**
+ * 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`.
+ */
+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/utils/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 "default" | "ok" | "alert" | "warn" | "info" | "task";
+/**
+ * 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/utils/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/utils/defaults.d.ts

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

package/dist/utils/defaults.js

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

package/dist/utils/hooks.server.d.ts

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

package/dist/utils/hooks.server.js

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

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

package/dist/utils/id.js

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

package/dist/utils/isSnippet.d.ts

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

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

@@ -0,0 +1,29 @@
+/**
+ * A bezier curve that starts fast and slows down.
+ */
+export declare const popBezier: (t: number) => number;
+export declare const popBezierInverse: (t: number) => number;
+export declare function slidefade(node: Element, params?: {
+    origin?: string;
+    x?: number;
+    y?: number;
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+}): {
+    delay: number;
+    duration: number;
+    easing: (t: number) => number;
+    css: (t: number, u: number) => string;
+};
+/** MIT License github.com/pushkine/ */
+export interface SpringParams {
+    mass?: number;
+    damping?: number;
+    stiffness?: number;
+    soft?: boolean;
+}
+type seconds = number;
+export declare function solve_spring(from: number, velocity: number, to: number, _params: SpringParams): (t: seconds) => number;
+export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+export {};

package/dist/utils/transitions.js

@@ -0,0 +1,66 @@
+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;
+    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};`,
+    };
+}
+export function solve_spring(from, velocity, to, _params) {
+    const params = {
+        mass: _params.mass || 1.0,
+        damping: _params.damping || 10.0,
+        stiffness: _params.stiffness || 100.0,
+        soft: _params.soft || false,
+    };
+    const delta = to - from;
+    if (true === params.soft || 1.0 <= params.damping / (2.0 * Math.sqrt(params.stiffness * params.mass))) {
+        const angular_frequency = -Math.sqrt(params.stiffness / params.mass);
+        const leftover = -angular_frequency * delta - velocity;
+        return (t) => to - (delta + t * leftover) * Math.E ** (t * angular_frequency);
+    }
+    else {
+        const damping_frequency = Math.sqrt(4.0 * params.mass * params.stiffness - params.damping ** 2.0);
+        const leftover = (params.damping * delta - 2.0 * params.mass * velocity) / damping_frequency;
+        const dfm = (0.5 * damping_frequency) / params.mass;
+        const dm = -(0.5 * params.damping) / params.mass;
+        return (t) => to - (Math.cos(t * dfm) * delta + Math.sin(t * dfm) * leftover) * Math.E ** (t * dm);
+    }
+}
+export function cubicBezier(x1, y1, x2, y2) {
+    if (!(x1 >= 0 && x1 <= 1 && x2 >= 0 && x2 <= 1))
+        throw new Error(`CubicBezier x1 & x2 values must be { 0 < x < 1 }, got { x1 : ${x1}, x2: ${x2} }`);
+    const ax = 1.0 - (x2 = 3.0 * (x2 - x1) - (x1 *= 3.0)) - x1, ay = 1.0 - (y2 = 3.0 * (y2 - y1) - (y1 *= 3.0)) - y1;
+    let i = 0, r = 0.0, s = 0.0, d = 0.0, x = 0.0;
+    return (t) => {
+        for (r = t, i = 0; 32 > i; i++)
+            if (1e-5 > Math.abs((x = r * (r * (r * ax + x2) + x1) - t)))
+                return r * (r * (r * ay + y2) + y1);
+            else if (1e-5 > Math.abs((d = r * (r * ax * 3.0 + x2 * 2.0) + x1)))
+                break;
+            else
+                r -= x / d;
+        if ((s = 0.0) > (r = t))
+            return 0;
+        else if ((d = 1.0) < r)
+            return 1;
+        while (d > s)
+            if (1e-5 > Math.abs((x = r * (r * (r * ax + x2) + x1)) - t))
+                break;
+            else
+                t > x ? (s = r) : (d = r), (r = 0.5 * (d - s) + s);
+        return r * (r * (r * ay + y2) + y1);
+    };
+}
+;

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "lutra",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev --host 0.0.0.0",
+		"props": "node read_props.js",
+		"local": "node local",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "npm run props && svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.5.0",
+		"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",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@types/glob": "8.1.0",
+		"glob": "^10.3.10",
+		"highlight.js": "^11.9.0",
+		"mdsvex": "^0.11.0",
+		"monaco-editor": "^0.47.0",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"publint": "^0.2.7",
+		"svelte": "next",
+		"svelte-check": "^3.6.8",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.3",
+		"vite": "5.2.6",
+		"vitest": "1.4.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}