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

package/dist/components/tree/bond.svelte.js

@@ -1,13 +1,64 @@
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
 import { untrack } from 'svelte';
 import { isBrowser } from '../../utils/dom.svelte';
+class TreeRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const props = untrack(() => bond.state?.props);
+        const isOpen = props?.open ?? false;
+        const isDisabled = props?.disabled ?? false;
+        return {
+            ...super.attrs,
+            'aria-labelledby': `tree-header-${bond.id}`,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled
+        };
+    }
+}
+class TreeHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const isButtonElement = isBrowser() ? bond.elements.header instanceof HTMLButtonElement : false;
+        const role = untrack(() => (isButtonElement ? '' : 'button'));
+        const tabindex = !isButtonElement || bond.state.props.disabled ? -1 : 0;
+        return {
+            ...super.attrs,
+            'aria-controls': `tree-body-${bond.id}`,
+            role,
+            tabindex
+        };
+    }
+}
+class TreeBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const bond = this.bond;
+        return {
+            ...super.attrs,
+            role: 'group',
+            'aria-controlled-by': `tree-header-${bond.id}`
+        };
+    }
+}
+class TreeIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+}
 export class TreeBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/tree';
     #parent;
     constructor(s) {
-        super(s);
+        super(s, 'tree');
         this.#parent = TreeBond.get();
     }
     get parent() {
@@ -16,59 +67,17 @@ export class TreeBond extends Bond {
     share() {
         return TreeBond.set(this);
     }
-    root(props = {}) {
-        const isOpen = this.state.props.open ?? false;
-        const isDisabled = this.state.props.disabled ?? false;
-        return {
-            id: `tree-${this.id}`,
-            'aria-labelledby': `tree-header-${this.id}`,
-            'aria-expanded': isOpen,
-            'aria-disabled': isDisabled,
-            'aria-label': props['aria-label'],
-            'data-kind': 'tree',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+    root() {
+        return this.atom('root', () => new TreeRootAtom(this));
     }
-    header(props = {}) {
-        const isButtonElement = isBrowser() ? this.elements.header instanceof HTMLButtonElement : false;
-        const role = untrack(() => {
-            return isButtonElement ? '' : 'button';
-        });
-        const tabindex = !isButtonElement || this.state.props.disabled ? -1 : 0;
-        return {
-            id: `tree-header-${this.id}`,
-            'aria-controls': `tree-body-${this.id}`,
-            'data-kind': 'tree-header',
-            role: role,
-            tabindex: tabindex,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
-        };
+    header() {
+        return this.atom('header', () => new TreeHeaderAtom(this));
     }
-    body(props = {}) {
-        return {
-            id: `tree-body-${this.id}`,
-            'data-kind': 'tree-body',
-            role: 'group',
-            'aria-controlled-by': `tree-header-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
-        };
+    body() {
+        return this.atom('body', () => new TreeBodyAtom(this));
     }
-    indicator(props = {}) {
-        return {
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
-        };
+    indicator() {
+        return this.atom('indicator', () => new TreeIndicatorAtom(this));
     }
     static get() {
         return getContext(TreeBond.CONTEXT_KEY);

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

@@ -19,7 +19,7 @@
 	}: TreeBodyProps<E, B> = $props();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>

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

@@ -22,7 +22,7 @@
 	}: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const headerProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 

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

@@ -19,7 +19,7 @@
 	}: TreeIndicatorProps<E, B> = $props();
 
 	const indicatorProps = $derived({
-		...bond?.indicator(),
+		...bond?.indicator().spread,
 		...restProps
 	});
 </script>

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

@@ -1,66 +1,66 @@
-<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,
+		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().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]}
+	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>

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;
@@ -14,7 +13,175 @@ export interface PresetEntryRecord {
     attachments?: Attachment[];
 }
 export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord | (() => PresetEntryRecord);
-export type Preset = Record<PresetModuleName, PresetEntry>;
+/**
+ * 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.toaster': PresetEntry;
+    'toast.item': PresetEntry;
+    'toast.title': PresetEntry;
+    'toast.description': PresetEntry;
+    'toast.close-button': 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;
+}
+/** 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>;

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)');
+    }
 }