@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/tree/tree-body.svelte

@@ -9,17 +9,15 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateTreeBody(),
-		enter = undefined,
-		exit = undefined,
-		initial = animateTreeBody({ duration: 0 }),
+		fallback = {
+			animate: animateTreeBody(),
+			initial: animateTreeBody({ duration: 0 })
+		},
 		...restProps
 	}: TreeBodyProps<E, B> = $props();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>
@@ -28,12 +26,7 @@
 	{bond}
 	preset="tree.body"
 	class={['border-border pl-4', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
+	{fallback}
 	{...bodyProps}
 >
 	{@render children?.({ tree: bond })}

package/dist/components/tree/tree-header.svelte

@@ -12,17 +12,11 @@
 		class: klass = '',
 		children = undefined,
 		onpointerdown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const headerProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 
@@ -41,12 +35,6 @@
 	{bond}
 	preset="tree.header"
 	class={['border-border cursor-pointer', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	onpointerdown={handlePointerDown}
 	{...headerProps}
 >

package/dist/components/tree/tree-header.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
 import { TreeBond } from './bond.svelte';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: import("../atom").HtmlAtomProps<E, B> & import("./types").TreeHeaderExtendProps & {
+    props: import("../atom").HtmlAtomProps<E, B, import("svelte").Snippet<[]>> & {
         class?: string;
         open?: boolean;
         disabled?: boolean;

package/dist/components/tree/tree-indicator.svelte

@@ -9,17 +9,11 @@
 		open = $bindable(false),
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: TreeIndicatorProps<E, B> = $props();
 
 	const indicatorProps = $derived({
-		...bond?.indicator(),
+		...bond?.indicator().spread,
 		...restProps
 	});
 </script>
@@ -28,12 +22,6 @@
 	{bond}
 	preset="tree.indicator"
 	class={['border-border aspect-square h-fit', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...indicatorProps}
 >
 	{@render children?.({ tree: bond })}

package/dist/components/tree/tree-root.svelte

@@ -1,66 +1,54 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
-	import type { TreeRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		class: klass = '',
-		children = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TreeRootProps<E, B> = $props();
-
-	const bondProps = defineState<TreeBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({ disabled })
-	);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new TreeBondState(() => props);
-		return new TreeBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tree"
-	class={['border-border flex flex-col', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.({ tree: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
+	import type { TreeRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		class: klass = '',
+		children = undefined,
+		factory = _factory,
+		...restProps
+	}: TreeRootProps<E, B> = $props();
+
+	const bondProps = defineState<TreeBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({ disabled })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new TreeBondState(() => props);
+		return new TreeBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tree"
+	class={['border-border flex flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/types.d.ts

@@ -2,12 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
 import type { Factory } from '../../types';
 import type { TreeBond, TreeBondProps } from './bond.svelte';
-/**
- * tree root properties
- */
-export interface TreeRootExtendProps {
-}
-export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeRootExtendProps & {
+export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
     class?: string;
     open?: boolean;
     value?: string;
@@ -18,12 +13,7 @@ export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B exten
         tree: TreeBond;
     }]>;
 };
-/**
- * tree header properties
- */
-export interface TreeHeaderExtendProps {
-}
-export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeHeaderExtendProps & {
+export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
     class?: string;
     open?: boolean;
     disabled?: boolean;
@@ -31,29 +21,15 @@ export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B ext
         tree: TreeBond;
     }]>;
 };
-/**
- * tree body properties
- */
-export interface TreeBodyExtendProps {
-}
-export type TreeBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBodyExtendProps & {
+export type TreeBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
     open?: boolean;
     disabled?: boolean;
     children?: Snippet<[{
         tree?: TreeBond;
     }]>;
 };
-/**
- * tree indicator properties
- */
-export interface TreeIndicatorExtendProps {
-}
-export type TreeIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBondProps & TreeIndicatorExtendProps & {
+export type TreeIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBondProps & {
     children?: Snippet<[{
         tree?: TreeBond;
     }]>;
 };
-/**
- * @deprecated Use TreeRootExtendProps instead
- */
-export type TreeExtendProps = TreeRootExtendProps;

package/dist/components/virtual/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VirtualList } from './virtual-root.svelte';
+export * from './types';

package/dist/components/virtual/index.js

@@ -0,0 +1,2 @@
+export { default as VirtualList } from './virtual-root.svelte';
+export * from './types';

package/dist/components/virtual/types.d.ts

@@ -1,10 +1,5 @@
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom virtual list properties in your application.
- */
-export interface VirtualListViewportExtendProps {
-}
-export interface VirtualListViewportProps<T> extends VirtualListViewportExtendProps {
+export interface VirtualListViewportProps<T> {
     class?: string;
     data: T[];
     itemHeight?: number;

package/dist/constants/motion.d.ts

@@ -0,0 +1,9 @@
+export declare const DURATION: {
+    none: number;
+    quick: number;
+    fast: number;
+    normal: number;
+    smooth: number;
+    slow: number;
+    dragging: number;
+};

package/dist/constants/motion.js

@@ -0,0 +1,9 @@
+export const DURATION = {
+    none: 0,
+    quick: 50,
+    fast: 100,
+    normal: 200,
+    smooth: 300,
+    slow: 400,
+    dragging: 500
+};

package/dist/context/index.d.ts

@@ -1 +1 @@
-export { type PresetModuleName as ModuleName, type Preset, type PresetEntryRecord, type PresetEntry, getPreset, setPreset } from './preset.svelte';
+export { type PresetModuleName as ModuleName, type PresetModuleMap, type Preset, type PresetEntryRecord, type PresetEntry, getPreset, setPreset } from './preset.svelte';

package/dist/context/preset.svelte.d.ts

@@ -2,7 +2,6 @@ import type { ClassValue } from 'svelte/elements';
 import type { Base } from '../components/atom';
 import type { Bond } from '../shared';
 import type { Attachment } from 'svelte/attachments';
-export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.body' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.selections' | 'dropdown.selection' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.content' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'stepper' | 'stepper.header' | 'stepper.body' | 'stepper.footer' | 'stepper.step' | 'stepper.step.indicator' | 'stepper.step.header' | 'stepper.step.body' | 'stepper.step.separator' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
 export interface PresetEntryRecord {
     [key: string]: unknown;
     class?: ClassValue;
@@ -13,8 +12,192 @@ export interface PresetEntryRecord {
     defaults?: Record<string, any>;
     attachments?: Attachment[];
 }
-export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord | (() => PresetEntryRecord);
-export type Preset = Record<PresetModuleName, PresetEntry>;
+/** A single preset entry value — either a record or a deferred factory returning one. */
+export type PresetEntryValue = PresetEntryRecord | (() => PresetEntryRecord);
+/**
+ * A preset entry — invoked with a bond and returns either a single
+ * {@link PresetEntryValue} or an array of them.
+ *
+ * Returning an array makes it easy to layer/merge preset configurations
+ * (e.g. base preset + per-route override + per-component override). Entries
+ * are merged in order, with later entries taking precedence.
+ */
+export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryValue | Array<PresetEntryValue>;
+/**
+ * Registry of all preset slot names → their PresetEntry type.
+ *
+ * Extend this interface via module augmentation to add custom preset slots
+ * in your app or library — with full TypeScript autocomplete:
+ *
+ * @example
+ * ```ts
+ * // my-app/presets.d.ts
+ * declare module '@svelte-atoms/core/context/preset' {
+ *   interface PresetModuleMap {
+ *     'my-badge': PresetEntry;
+ *     'my-badge.icon': PresetEntry;
+ *   }
+ * }
+ * ```
+ */
+export interface PresetModuleMap {
+    accordion: PresetEntry;
+    'accordion.item.body': PresetEntry;
+    'accordion.item.header': PresetEntry;
+    'accordion.item.indicator': PresetEntry;
+    'accordion.item': PresetEntry;
+    'alert.actions': PresetEntry;
+    'alert.close-button': PresetEntry;
+    'alert.content': PresetEntry;
+    'alert.description': PresetEntry;
+    'alert.icon': PresetEntry;
+    alert: PresetEntry;
+    'alert.title': PresetEntry;
+    'card.content': PresetEntry;
+    'card.description': PresetEntry;
+    'card.footer': PresetEntry;
+    'card.header': PresetEntry;
+    'card.body': PresetEntry;
+    'card.media': PresetEntry;
+    card: PresetEntry;
+    'card.subtitle': PresetEntry;
+    'card.title': PresetEntry;
+    'collapsible.body': PresetEntry;
+    'collapsible.header': PresetEntry;
+    'collapsible.indicator': PresetEntry;
+    collapsible: PresetEntry;
+    'combobox.control': PresetEntry;
+    'combobox.trigger': PresetEntry;
+    'combobox.item': PresetEntry;
+    'dialog.close-button': PresetEntry;
+    'dialog.body': PresetEntry;
+    'dialog.content': PresetEntry;
+    'dialog.description': PresetEntry;
+    'dialog.footer': PresetEntry;
+    'dialog.header': PresetEntry;
+    dialog: PresetEntry;
+    'dialog.title': PresetEntry;
+    divider: PresetEntry;
+    'dropdown.placeholder': PresetEntry;
+    'dropdown.query': PresetEntry;
+    'dropdown.trigger': PresetEntry;
+    'dropdown.selections': PresetEntry;
+    'dropdown.selection': PresetEntry;
+    dropdown: PresetEntry;
+    'dropdown.item': PresetEntry;
+    'field.control': PresetEntry;
+    'field.label': PresetEntry;
+    'field.helper-text': PresetEntry;
+    field: PresetEntry;
+    form: PresetEntry;
+    icon: PresetEntry;
+    input: PresetEntry;
+    'input.control': PresetEntry;
+    'input.password': PresetEntry;
+    'input.placeholder': PresetEntry;
+    label: PresetEntry;
+    'layer.inner': PresetEntry;
+    layer: PresetEntry;
+    link: PresetEntry;
+    'list.divider': PresetEntry;
+    'list.group': PresetEntry;
+    'list.item': PresetEntry;
+    'menu.content': PresetEntry;
+    'popover.arrow': PresetEntry;
+    'popover.indicator': PresetEntry;
+    'popover.content': PresetEntry;
+    'popover.trigger': PresetEntry;
+    'portal.inner': PresetEntry;
+    portal: PresetEntry;
+    root: PresetEntry;
+    'root.portals': PresetEntry;
+    'sidebar.content': PresetEntry;
+    sidebar: PresetEntry;
+    'drawer.backdrop': PresetEntry;
+    'drawer.body': PresetEntry;
+    'drawer.content': PresetEntry;
+    'drawer.description': PresetEntry;
+    'drawer.title': PresetEntry;
+    'drawer.footer': PresetEntry;
+    'drawer.header': PresetEntry;
+    drawer: PresetEntry;
+    'stack.root': PresetEntry;
+    'stack.item': PresetEntry;
+    stepper: PresetEntry;
+    'stepper.header': PresetEntry;
+    'stepper.body': PresetEntry;
+    'stepper.footer': PresetEntry;
+    'stepper.step': PresetEntry;
+    'stepper.step.indicator': PresetEntry;
+    'stepper.step.header': PresetEntry;
+    'stepper.step.body': PresetEntry;
+    'stepper.step.separator': PresetEntry;
+    'tabs.body': PresetEntry;
+    'tabs.header': PresetEntry;
+    tabs: PresetEntry;
+    'tab.header': PresetEntry;
+    'tab.body': PresetEntry;
+    'tab.description': PresetEntry;
+    tab: PresetEntry;
+    'tree.body': PresetEntry;
+    'tree.header': PresetEntry;
+    'tree.indicator': PresetEntry;
+    tree: PresetEntry;
+    datagrid: PresetEntry;
+    'datagrid.header': PresetEntry;
+    'datagrid.column': PresetEntry;
+    'datagrid.body': PresetEntry;
+    'datagrid.row': PresetEntry;
+    'datagrid.cell': PresetEntry;
+    'datagrid.footer': PresetEntry;
+    'datagrid.checkbox': PresetEntry;
+    'datagrid.sort-icon': PresetEntry;
+    scrollable: PresetEntry;
+    'scrollable.container': PresetEntry;
+    'scrollable.content': PresetEntry;
+    'scrollable.track': PresetEntry;
+    'scrollable.thumb': PresetEntry;
+    toast: PresetEntry;
+    'toast.title': PresetEntry;
+    'toast.description': PresetEntry;
+    'toast.close': PresetEntry;
+    breadcrumb: PresetEntry;
+    'breadcrumb.item': PresetEntry;
+    'breadcrumb.separator': PresetEntry;
+    badge: PresetEntry;
+    chip: PresetEntry;
+    'chip.close-button': PresetEntry;
+    button: PresetEntry;
+    checkbox: PresetEntry;
+    'checkbox.checkmark': PresetEntry;
+    'checkbox.indeterminate': PresetEntry;
+    radio: PresetEntry;
+    'radio.group': PresetEntry;
+    container: PresetEntry;
+    calendar: PresetEntry;
+    'calendar.day': PresetEntry;
+    'calendar.header': PresetEntry;
+    'calendar.weekday': PresetEntry;
+    'calendar.body': PresetEntry;
+    'datepicker.trigger': PresetEntry;
+    'datepicker.calendar': PresetEntry;
+    'datepicker.years': PresetEntry;
+    'datepicker.months': PresetEntry;
+    'datepicker.header': PresetEntry;
+    progress: PresetEntry;
+    'progress.linear': PresetEntry;
+    'progress.linear.track': PresetEntry;
+    'progress.linear.fill': PresetEntry;
+    'progress.circular': PresetEntry;
+    'progress.circular.track': PresetEntry;
+    'progress.circular.fill': PresetEntry;
+}
+/** All valid preset slot names — derived from PresetModuleMap for extensibility. */
+export type PresetModuleName = keyof PresetModuleMap;
+export type Preset = {
+    [K in PresetModuleName]: PresetModuleMap[K];
+};
 export declare function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
 export declare function getPreset(): Partial<Preset> | undefined;
 export declare function setPreset(preset: Partial<Preset>): Partial<Preset>;
+export declare function mergePreset(callback: (currentPreset: Partial<Preset> | undefined) => Partial<Preset>): Partial<Preset>;

package/dist/context/preset.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { merge } from 'es-toolkit';
+import { mergePresetRecords, resolvePreset } from '../components/atom/utils/preset';
 const CONTEXT_KEY = '@svelte-atoms/context/preset';
 export function getPreset(...args) {
     const context = getContext(CONTEXT_KEY);
@@ -10,6 +10,32 @@ export function getPreset(...args) {
     return context;
 }
 export function setPreset(preset) {
-    const currentPreset = getPreset() || {};
-    return setContext(CONTEXT_KEY, merge(currentPreset, preset));
+    return mergePreset(() => preset);
+}
+export function mergePreset(callback) {
+    const currentPreset = getPreset();
+    const override = callback(currentPreset);
+    const result = { ...currentPreset };
+    const keys = Object.keys(override);
+    for (let i = 0; i < keys.length; i++) {
+        const k = keys[i];
+        const next = override[k];
+        if (!next)
+            continue;
+        const existing = currentPreset?.[k];
+        if (existing) {
+            const e = existing, n = next;
+            result[k] = ((bond, ...args) => {
+                const a = resolvePreset(e(bond, ...args));
+                const b = resolvePreset(n(bond, ...args));
+                if (a && b)
+                    return mergePresetRecords([a, b]);
+                return a ?? b;
+            });
+        }
+        else {
+            result[k] = next;
+        }
+    }
+    return setContext(CONTEXT_KEY, result);
 }

package/dist/runes/color-scheme.svelte.js

@@ -1,14 +1,20 @@
 export function colorScheme() {
-    let scheme = $state(undefined);
-    $effect(() => {
+    let scheme = $state('light');
+    let media;
+    try {
+        media = getMedia();
+        scheme = media.matches ? 'dark' : 'light';
+    }
+    catch (e) { }
+    $effect.pre(() => {
         if (typeof window === 'undefined')
             return;
         const handleChange = (ev) => {
-            scheme = ev.matches ? 'light' : 'dark';
+            scheme = ev.matches ? 'dark' : 'light';
         };
-        const media = window.matchMedia('(prefers-color-scheme: light)');
+        const media = getMedia();
         media.addEventListener('change', handleChange);
-        scheme = media.matches ? 'light' : 'dark';
+        scheme = media.matches ? 'dark' : 'light';
         return () => {
             media.removeEventListener('change', handleChange);
         };
@@ -18,4 +24,10 @@ export function colorScheme() {
             return scheme;
         }
     };
+    function getMedia() {
+        if (media) {
+            return media;
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)');
+    }
 }