lutra 0.1.68 → 0.1.70

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.70",
 	"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);
-};