lutra 0.1.68 → 0.1.69

package/dist/form/Select.svelte

@@ -6,6 +6,19 @@
 	import { ZodType } from "zod";
 	import FieldContent from "./FieldContent.svelte";
 
+    /**
+     * @description
+     * A styled `<select>` element with a custom dropdown arrow, integrated with the
+     * Lutra form system for validation and error display. Accepts options via props
+     * or as `<option>` children via a snippet.
+     *
+     * @example
+     * <Select name="country" label="Country" options={['US', 'UK', 'DE']} />
+     * <Select name="role" label="Role" options={[
+     *   { value: 'admin', label: 'Administrator' },
+     *   { value: 'user', label: 'User' },
+     * ]} />
+     */
     let {
         autofocus,
         children,
@@ -32,19 +45,19 @@
     }: {
         /** Whether the input should be autofocused. */
         autofocus?: boolean;
-        /** Options for the select element. */
+        /** Options for the select element rendered as a snippet. */
         children?: Snippet;
-        /** Whether the input should be disabled. */
+        /** Whether the select should be disabled. */
         disabled?: boolean;
-        /** Help text to display below the input. */
+        /** Help text to display below the select. */
         help?: string | Snippet;
         /** A random id is generated if not provided. */
         id?: string;
-        /** The label for the input */
+        /** The label for the select. */
         label?: string | Snippet
-        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
         labelTip?: string | Snippet;
-        /** The name of the input element. */
+        /** The name of the select element. */
         name: string;
         /** The onblur event handler */
         onblur?: (e: FocusEvent) => void;
@@ -160,10 +173,10 @@
         width: 100%;
     }
     select {
-        padding-inline-end: calc(1.5em + 10px);
+        padding-inline-end: 2.5em;
         width: 100%;
         appearance: none;
-        border: none !important;
+        border: none;
         border-radius: 0;
         grid-area: select;
         background: none;
@@ -174,11 +187,11 @@
         display: flex;
         align-items: center;
         justify-content: end;
-        padding-inline-end: 0.75em;
+        padding-inline-end: var(--field-padding-inline);
     }
     svg {
         display: block;
-        color: var(--field-text-color, light-dark(black, white));
+        color: var(--field-color);
     }
     select:focus-visible {
         outline: none;

package/dist/form/Select.svelte.d.ts

@@ -2,19 +2,19 @@ import { type Snippet } from "svelte";
 type $$ComponentProps = {
     /** Whether the input should be autofocused. */
     autofocus?: boolean;
-    /** Options for the select element. */
+    /** Options for the select element rendered as a snippet. */
     children?: Snippet;
-    /** Whether the input should be disabled. */
+    /** Whether the select should be disabled. */
     disabled?: boolean;
-    /** Help text to display below the input. */
+    /** Help text to display below the select. */
     help?: string | Snippet;
     /** A random id is generated if not provided. */
     id?: string;
-    /** The label for the input */
+    /** The label for the select. */
     label?: string | Snippet;
-    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+    /** Context tooltip for the label. Renders with a questionmark using ContextTip. */
     labelTip?: string | Snippet;
-    /** The name of the input element. */
+    /** The name of the select element. */
     name: string;
     /** The onblur event handler */
     onblur?: (e: FocusEvent) => void;

package/dist/form/Textarea.svelte

@@ -9,6 +9,16 @@
 	import { getFromObjWithStringPath } from "./form.js";
 	import { ZodType } from "zod";
 
+    /**
+     * @description
+     * A styled textarea component with optional auto-resize, copy-to-clipboard, and
+     * prefix/suffix content. Integrates with the Lutra form system for validation
+     * and error display.
+     *
+     * @example
+     * <Textarea name="bio" label="Biography" placeholder="Tell us about yourself..." />
+     * <Textarea name="notes" label="Notes" autoresize maxlength={500} />
+     */
     let {
         autofocus,
         autocapitalize,
@@ -43,7 +53,7 @@
         prefix,
         readonly,
         required,
-        resize = true,
+        resize,
         shape = 'rounded',
         step,
         style,

package/dist/form/client.svelte.js

@@ -85,8 +85,6 @@ function getTypedValue(el) {
 export function fieldChange(form, name, el, validator, onchange) {
     return async function (e) {
         if (form && form.fields[name]) {
-            console.log('fieldChange', name, el()?.value, form.data[name]);
-            // Update the form data with the new value.
             form.data[name] = getTypedValue(el());
             // if the value is the same as the original value, then the field is not tainted
             form.fields[name].tainted = form.data[name] !== form.originalData[name];

package/dist/state/Persisted.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare class Persisted<T extends string = string> {
+    #private;
+    constructor(key: string, fallback: T, storage?: Storage | undefined);
+    get current(): T;
+    set current(v: T);
+}

package/dist/state/Persisted.svelte.js

@@ -0,0 +1,29 @@
+import { on } from 'svelte/events';
+import { createSubscriber } from 'svelte/reactivity';
+export class Persisted {
+    #key;
+    #storage;
+    #fallback;
+    #version = $state(0);
+    #subscribe = createSubscriber((update) => {
+        return on(window, 'storage', (e) => {
+            if (e.key === this.#key) {
+                update();
+            }
+        });
+    });
+    constructor(key, fallback, storage = typeof localStorage === 'undefined' ? undefined : localStorage) {
+        this.#key = key;
+        this.#fallback = fallback;
+        this.#storage = storage;
+    }
+    get current() {
+        this.#subscribe(); // handle cross-tab updates
+        this.#version; // handle same-tab updates
+        return this.#storage?.getItem(this.#key) ?? this.#fallback;
+    }
+    set current(v) {
+        this.#storage?.setItem(this.#key, v);
+        this.#version += 1;
+    }
+}

package/dist/state/theme.svelte.d.ts

@@ -0,0 +1,7 @@
+declare class Theme {
+    #private;
+    get current(): "light" | "dark";
+    set current(value: 'light' | 'dark');
+}
+export declare const theme: Theme;
+export {};

package/dist/state/theme.svelte.js

@@ -0,0 +1,14 @@
+import { MediaQuery } from 'svelte/reactivity';
+import { Persisted } from './Persisted.svelte';
+class Theme {
+    #preference = new Persisted('lutra.theme', 'system');
+    #query = new MediaQuery('prefers-color-scheme: dark');
+    #system = $derived(this.#query.current ? 'dark' : 'light');
+    get current() {
+        return this.#preference.current === 'system' ? this.#system : this.#preference.current;
+    }
+    set current(value) {
+        this.#preference.current = value === this.#system ? 'system' : value;
+    }
+}
+export const theme = new Theme();

package/dist/types.d.ts

@@ -6,42 +6,25 @@ import { type Snippet } from "svelte";
  * @template T - Tuple of argument types passed to the render function
  */
 export type RenderFn<T extends any[] = []> = (...args: T) => ReturnType<Snippet<T>>;
-export interface LutraConfig {
+export type LutraTheme = 'light' | 'dark' | 'system' | 'invert' | undefined;
+export interface LutraThemeConfig {
     /**
      * The default theme to use.
      */
-    theme?: 'light' | 'dark' | 'auto' | 'inherit';
+    theme?: LutraTheme;
     /**
      * 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: {
+    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"
+    Theme = "lutra.theme"
 }
-export type LutraTheme = 'light' | 'dark' | 'invert' | undefined;
 export type LutraContextTypeMap = {
-    [LutraContext.Theme]: LutraTheme;
-    [LutraContext.Config]: LutraConfig;
-    [LutraContext.SecChPrefersColorScheme]: 'light' | 'dark' | undefined;
+    [LutraContext.Theme]: () => LutraTheme;
 };
 export declare function getContextItem<K extends keyof LutraContextTypeMap>(key: K): LutraContextTypeMap[K] | undefined;

package/dist/types.js

@@ -1,24 +1,7 @@
 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/color.js

@@ -91,7 +91,7 @@ export const isStatusColor = (value) => {
  */
 export function getStatusColorVar(color, fallback) {
     if (isStatusColor(color)) {
-        return `var(--status-${color})`;
+        return `var(--status-${color}-color)`;
     }
-    return color || fallback || "var(--status-default)";
+    return color || fallback || "var(--status-default-color)";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.68",
+	"version": "0.1.69",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",
@@ -36,16 +36,17 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.50.2"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^25.2.0",
+		"@types/node": "^25.2.3",
 		"publint": "^0.3.17",
-		"svelte": "^5.49.1",
+		"svelte": "^5.50.1",
 		"svelte-check": "^4.3.6",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1"

package/dist/config.d.ts

@@ -1,30 +0,0 @@
-export interface LutraConfig {
-    /**
-     * 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;
-}
-export interface LutraRootConfig extends 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;
-    };
-}
-/**
- * Default Lutra config.
- */
-export declare const defaultConfig: LutraConfig;
-export declare const defaultRootConfig: LutraRootConfig;
-export declare const setConfig: (config: Partial<LutraConfig>) => void;

package/dist/config.js

@@ -1,18 +0,0 @@
-/**
- * Default Lutra config.
- */
-export const defaultConfig = {
-    background: true,
-    contained: true,
-};
-export const defaultRootConfig = {
-    theme: 'auto',
-    themeColor: {
-        light: '#fff',
-        dark: '#000',
-    },
-    ...defaultConfig,
-};
-export const setConfig = (config) => {
-    Object.assign(config, config);
-};