lutra 0.0.33 → 0.1.4

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+export interface LutraConfig {
+    /**
+     * The default theme to use.
+     */
+    theme?: 'light' | 'dark' | 'auto' | 'inherit';
+    /**
+     * Theme color for the theme-color meta tag. Only used in the root theme.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+     */
+    themeColor: {
+        light?: string;
+        dark?: string;
+    };
+    /**
+     * Whether to show a background color or image on the components.
+     */
+    background?: boolean;
+    /**
+     * Whether to use a contained layout (with borders and rounded corners).
+     */
+    contained?: boolean;
+}
+/**
+ * Default Lutra config.
+ */
+export declare const defaultConfig: LutraConfig;
+export declare const setConfig: (config: Partial<LutraConfig>) => void;
+export declare enum LutraContext {
+    Theme = "lutra.theme",
+    Config = "lutra.config",
+    SecChPrefersColorScheme = "sec-ch-prefers-color-scheme"
+}
+export type LutraTheme = 'light' | 'dark' | 'invert' | undefined;
+export type LutraContextTypeMap = {
+    [LutraContext.Theme]: LutraTheme;
+    [LutraContext.Config]: LutraConfig;
+    [LutraContext.SecChPrefersColorScheme]: 'light' | 'dark' | undefined;
+};
+export declare function getContextItem<K extends keyof LutraContextTypeMap>(key: K): LutraContextTypeMap[K] | undefined;

package/dist/types.js

@@ -0,0 +1,25 @@
+import { getContext } from "svelte";
+/**
+ * Default Lutra config.
+ */
+export const defaultConfig = {
+    theme: undefined,
+    themeColor: {
+        light: '#fff',
+        dark: '#000',
+    },
+    background: true,
+    contained: true,
+};
+export const setConfig = (config) => {
+    Object.assign(config, config);
+};
+export var LutraContext;
+(function (LutraContext) {
+    LutraContext["Theme"] = "lutra.theme";
+    LutraContext["Config"] = "lutra.config";
+    LutraContext["SecChPrefersColorScheme"] = "sec-ch-prefers-color-scheme";
+})(LutraContext || (LutraContext = {}));
+export function getContextItem(key) {
+    return getContext(key);
+}

package/dist/util/StringOrComponent.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Component } from "svelte";
+    let {
+        content,
+        props,
+    }: {
+        content: string | Component | undefined;
+        props?: Record<string, any>;
+    } = $props();
+
+    let Content = content as Component;
+</script>
+
+{#if content}
+    {#if typeof content === 'string'}
+        {content}
+    {:else if Content}
+        <Content {...props} />
+    {/if}
+{/if}

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/{utils → util}/dom.js

@@ -1,4 +1,3 @@
-import { createId } from "./id.js";
 let initialElements = {};
 let initialStyles = {};
 /**
@@ -7,7 +6,7 @@ let initialStyles = {};
  * @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()) {
+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") {

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/package.json

@@ -1,102 +1,58 @@
 {
 	"name": "lutra",
-	"version": "0.0.33",
+	"version": "0.1.4",
 	"scripts": {
-		"dev": "vite dev --host 0.0.0.0",
-		"props": "node read_props.js",
-		"local": "node local",
+		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint && npm run props",
+		"package": "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"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./display": {
-			"types": "./dist/display/index.d.ts",
-			"svelte": "./dist/display/index.js"
-		},
-		"./form": {
-			"types": "./dist/form/index.d.ts",
-			"svelte": "./dist/form/index.js",
-			"import": "./dist/form/index.js"
-		},
-		"./form/types": {
-			"types": "./dist/form/types.d.ts",
-			"import": "./dist/form/types.js"
-		},
-		"./icons": {
-			"types": "./dist/icons/index.d.ts",
-			"svelte": "./dist/icons/index.js"
-		},
-		"./layout": {
-			"types": "./dist/layout/index.d.ts",
-			"svelte": "./dist/layout/index.js"
-		},
-		"./nav": {
-			"types": "./dist/nav/index.d.ts",
-			"svelte": "./dist/nav/index.js"
-		},
-		"./typo": {
-			"types": "./dist/typo/index.d.ts",
-			"svelte": "./dist/typo/index.js"
-		},
-		"./utils": {
-			"types": "./dist/utils/index.d.ts",
-			"svelte": "./dist/utils/index.js"
-		},
-		"./utils/*": "./dist/utils/*"
+		"./themes/DefaultTheme.css": {
+			"import": "./dist/css/themes/DefaultTheme.css",
+			"require": "./dist/css/themes/DefaultTheme.css"
+		}
 	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.5.0",
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.46.1",
-		"@rollup/browser": "^4.21.2",
-		"@sveltejs/adapter-auto": "^3.2.4",
-		"@sveltejs/package": "^2.3.4",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@types/glob": "8.1.0",
-		"@types/ws": "^8.5.12",
-		"glob": "^11.0.0",
-		"highlight.js": "^11.10.0",
-		"mdsvex": "^0.12.3",
-		"monaco-editor": "^0.51.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.10",
-		"svelte": "5.0.0-next.243",
-		"svelte-check": "^4.0.0",
-		"tslib": "^2.7.0",
-		"typescript": "^5.5.4",
-		"vite": "5.4.3",
-		"vitest": "2.0.5"
+		"@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.38.1",
+		"svelte-check": "^4.3.1",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.2"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
 	"dependencies": {
-		"@auth70/bodyguard": "^1.6.2",
-		"@auth70/zodex-esm": "^0.7.3",
+		"@auth70/bodyguard": "^1.7.1",
 		"blurhash": "^2.0.5",
 		"browser-image-compression": "^2.0.2",
-		"esm-env": "^1.0.0",
-		"ws": "^8.18.0",
-		"zod": "^3.23.8"
+		"esm-env": "^1.2.2",
+		"marked": "16.2.0",
+		"zod": "^4.0.17",
+		"zodex": "^4.0.0"
 	}
 }

package/dist/display/Avatar.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
-let {
-  src,
-  name = "N/A",
-  shape = "circle"
-} = $props();
-const color = stringToColor(name);
-const luminance = hexRelativeLuminance(color);
-const textColor = luminance < 0.5 ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)";
-</script>
-
-<figure class="Avatar {shape}" style="--user-color: {color}; --text-color: {textColor};">
-    {#if src}
-        <img src={src} alt={name} />
-    {:else}
-        <div class="Placeholder">
-            <span>{name[0]}</span>
-        </div>
-    {/if}
-</figure>
-
-<style>
-    .Avatar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        block-size: var(--size, 3rem);
-        inline-size: var(--size, 3rem);
-        overflow: hidden;
-        background-color: var(--user-color);
-        mask-image: var(--mask-image, none);
-        mask-size: 100% 100%;
-        mask-repeat: no-repeat;
-        -webkit-mask-image: var(--mask-image, none);
-        -webkit-mask-size: 100% 100%;
-        -webkit-mask-repeat: no-repeat;
-    }
-    .Avatar.circle { border-radius: 50%; }
-    .Avatar.square { border-radius: 0; }
-    .Avatar.rounded { border-radius: var(--border-radius); }
-    .Avatar img {
-        block-size: 100%;
-        inline-size: 100%;
-        object-fit: cover;
-    }
-    .Avatar .Placeholder {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        block-size: 100%;
-        inline-size: 100%;
-        background-color: var(--user-color);
-    }
-    .Avatar .Placeholder span {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-color);
-        user-select: none;
-    }
-</style>

package/dist/display/Avatar.svelte.d.ts

@@ -1,19 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
-    src?: string;
-    name?: string;
-    shape?: "circle" | "square" | "rounded";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Avatar = InstanceType<typeof Avatar>;
-export default Avatar;

package/dist/display/Badge.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">import { isStatusColor } from "../utils/color.js";
-let {
-  count,
-  max = 99,
-  color = "alert",
-  glow = true,
-  outline = true,
-  children
-} = $props();
-let el = $state(null);
-let isSet = $derived(isStatusColor(color));
-let charCount = $derived.by(() => {
-  if (count === void 0) return 0;
-  if (max && count > max) return max.toString().length + 1;
-  return count.toString().length;
-});
-</script>
-
-<div class="BadgeContainer">
-    <div class="BadgeContent">
-        {#if children}
-            {@render children()}
-        {/if}
-    </div>
-    <span class="Badge" class:outline class:glow class:empty={count === undefined} bind:this={el} style="--charCount: {charCount}ch; --bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
-        {#if count && max}
-            <em>
-                {count > max ? `${max}+` : count}
-            </em>
-        {/if}
-    </span>
-</div>
-
-
-<style>
-    .BadgeContainer {
-        position: relative;
-        display: inline-grid;
-        grid-template-columns: fit-content;
-        grid-template-areas: "content";
-        text-rendering: geometricPrecision;
-    }
-    .BadgeContent {
-        grid-area: content;
-    }
-    .Badge {
-        --internalSize: max(calc(var(--size, 0.75rem)), 14px);
-        display: grid;
-        place-items: center;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: calc(1px + var(--top, 0%));
-        right: var(--right, 0%);
-        transform: translate(0.55rem, -50%);
-        background-color: var(--bgColor);
-        padding: 3px 5px 2px 5px;
-        border-radius: 9999px;
-        --h: max(calc(var(--internalSize) * 0.9), 9px);
-        font-size: var(--h);
-        line-height: var(--h);
-        z-index: 100;
-        font-weight: 600;
-        grid-area: content;
-    }
-    .Badge.outline {
-        outline: min(calc(var(--size, 0.75rem) * 0.25), 2px) solid var(--outline-color, var(--bg-app));
-    }
-    .Badge.empty {
-        width: max(0.5rem, 8px);
-        height: max(0.5rem, 8px);
-        min-width: auto;
-        aspect-ratio: 1/1;
-        transform: translate(50%, -50%);
-        padding: 0;
-    }
-    .Badge.glow {
-        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--bgColor) 30%, transparent 70%));
-    }
-    em {
-        opacity: 0.99;
-        font-style: normal;
-        color: var(--bgColor);
-        filter: invert(1) grayscale(1) brightness(1.3) contrast(9000%);
-        mix-blend-mode: luminosity;
-        left: 50%;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
-    }
-</style>

package/dist/display/Badge.svelte.d.ts

@@ -1,30 +0,0 @@
-import type { Snippet } from "svelte";
-import type { StatusColorOrString } from "../utils/color.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const Badge: $$__sveltets_2_IsomorphicComponent<{
-    /** Count to display in the badge. */
-    count?: number;
-    /** The maximum count to display. */
-    max?: number;
-    /** The color of the tag. */
-    color?: StatusColorOrString;
-    /** Whether to add a glow to the badge. */
-    glow?: boolean;
-    /** Whether to add an outline to the badge. */
-    outline?: boolean;
-    /** The content to display inside the badge. */
-    children?: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Badge = InstanceType<typeof Badge>;
-export default Badge;

package/dist/display/Callout.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">import Icon from "./Icon.svelte";
-import Alert from "../icons/IconAlert.svelte";
-import Info from "../icons/IconInfo.svelte";
-import Success from "../icons/IconSuccess.svelte";
-import Warning from "../icons/IconWarning.svelte";
-import Error from "../icons/IconError.svelte";
-import Tooltip from "./Tooltip.svelte";
-let {
-  icon,
-  type,
-  contained,
-  rounded,
-  dismissable,
-  children
-} = $props();
-if (!icon) {
-  switch (type) {
-    case "alert":
-      icon = Alert;
-      break;
-    case "info":
-      icon = Info;
-      break;
-    case "ok":
-      icon = Success;
-      break;
-    case "warn":
-      icon = Warning;
-      break;
-    case "task":
-      icon = Error;
-      break;
-    default:
-      icon = void 0;
-      break;
-  }
-}
-</script>
-
-<div class="Callout {type}" class:hasIcon={!!icon} class:contained class:rounded class:dismissable style="--margin-scale: 0.5;">
-    {#if icon}
-        <Icon {icon} --icon-width="1.5rem" --icon-height="1.5rem" />
-    {/if}
-    <div class="CalloutText">
-        {@render children()}
-    </div>
-    {#if dismissable}
-        <div class="Dismiss">
-            <Tooltip tip="Dismiss">
-                <button type="button" class="CalloutDismiss" aria-label="Dismiss callout">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 1L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M1 15L15 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </button>
-            </Tooltip>
-        </div>
-    {/if}
-</div>
-
-<style>
-    .Callout {
-        background: var(--bg, var(--bg-subtle));
-        padding: var(--padding, 1rem);
-        display: grid;
-        gap: var(--gap, 1rem);
-        align-items: var(--align-items, start);
-        --text-heading: hsla(240, 10%, 98%);
-        --text: hsla(240, 10%, 95%);
-        --text-subtle: hsla(240, 10%, 90%);
-        color: var(--text-heading);
-    }
-    .Callout.contained {
-        border: var(--border);
-    }
-    .Callout.rounded {
-        border-radius: var(--border-radius);
-    }
-    .Callout.hasIcon {
-        grid-template-columns: auto 1fr;
-    }
-    .Callout.dismissable {
-        grid-template-columns: 1fr auto;
-    }
-    .Callout.dismissable.hasIcon {
-        grid-template-columns: auto 1fr auto;
-    }
-    .CalloutText {
-        font-size: var(--font-size, 1em);
-        line-height: 1.5;
-    }
-    .Callout.info {
-        --bg: var(--status-info);
-    }
-    .Callout.ok {
-        --bg: var(--status-ok);
-    }
-    .Dismiss {
-        margin: -0.75rem;
-    }
-    .CalloutDismiss {
-        background: transparent;
-        border: none;
-        padding: 0.75rem;
-        cursor: pointer;
-    }
-    .CalloutText {
-    }
-</style>