@fuzdev/fuz_ui 0.187.1 → 0.189.0

package/README.md

@@ -59,10 +59,10 @@ import '@fuzdev/fuz_css/theme.css'; // or bring your own
 import '$routes/fuz.css';
 
 // then import Fuz Svelte components:
-import Themed from '@fuzdev/fuz_ui/Themed.svelte';
+import ThemeRoot from '@fuzdev/fuz_ui/ThemeRoot.svelte';
 
 // and Fuz TypeScript modules:
-import {type Theme, themer_context} from '@fuzdev/fuz_ui/themer.svelte.js';
+import {type Theme, theme_state_context} from '@fuzdev/fuz_ui/theme_state.svelte.js';
 ```
 
 See [the library](https://ui.fuz.dev/docs) for more.

package/dist/ColorSchemeInput.svelte

@@ -3,10 +3,12 @@
 	import {color_schemes, type ColorScheme} from '@fuzdev/fuz_css/theme.js';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {themer_context} from './themer.svelte.js';
+	import {theme_state_context} from './theme_state.svelte.js';
+
+	const get_theme_state = theme_state_context.get();
 
 	const {
-		value = themer_context.get(),
+		value = get_theme_state(),
 		...rest
 	}: SvelteHTMLElements['menu'] & {
 		value?: {color_scheme: ColorScheme};

package/dist/ColorSchemeInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AACzE,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE;QAAC,YAAY,EAAE,WAAW,CAAA;KAAC,CAAC;CACpC,CAAC;AAiCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AACzE,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE;QAAC,YAAY,EAAE,WAAW,CAAA;KAAC,CAAC;CACpC,CAAC;AAmCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ContextmenuEntry.svelte

@@ -17,9 +17,11 @@
 		disabled?: boolean;
 	} = $props();
 
-	const contextmenu = contextmenu_context.get();
+	const get_contextmenu = contextmenu_context.get();
+	const contextmenu = $derived(get_contextmenu());
 
-	const entry = contextmenu.add_entry(
+	// add_entry registers on the current instance at init — not reactive to contextmenu getter changes
+	const entry = get_contextmenu().add_entry(
 		() => run,
 		() => disabled_prop,
 	);

package/dist/ContextmenuEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyDH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2DH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ContextmenuLinkEntry.svelte

@@ -20,13 +20,15 @@
 		external_rel?: string;
 	} = $props();
 
-	const contextmenu = contextmenu_context.get();
+	const get_contextmenu = contextmenu_context.get();
+	const contextmenu = $derived(get_contextmenu());
 
 	let anchor_el: HTMLAnchorElement | undefined = $state();
 
 	// Register with state management for keyboard navigation
 	// When activated via keyboard, programmatically click the anchor to trigger navigation
-	const entry = contextmenu.add_entry(
+	// add_entry registers on the current instance at init — not reactive to contextmenu getter changes
+	const entry = get_contextmenu().add_entry(
 		() => () => {
 			if (anchor_el) anchor_el.click();
 		},

package/dist/ContextmenuLinkEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAgFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAkFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ContextmenuRoot.svelte

@@ -55,14 +55,6 @@
 		separator_entry = separator_entry_default,
 		children,
 	}: {
-		/**
-		 * The `contextmenu` prop is not reactive because that's a rare corner case and
-		 * it's easier to put the `contextmenu` directly in the context
-		 * rather than wrapping with a store or other reactivity.
-		 * If you need to change the contextmenu prop for some reason, use a `{#key contextmenu}` block:
-		 * https://svelte.dev/docs#template-syntax-key
-		 * @nonreactive
-		 */
 		contextmenu?: ContextmenuState;
 		/**
 		 * The number of pixels to offset from the pointer X position when opened.
@@ -117,7 +109,7 @@
 		children: Snippet;
 	} = $props();
 
-	contextmenu_context.set(contextmenu);
+	contextmenu_context.set(() => contextmenu);
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 

package/dist/ContextmenuRoot.svelte.d.ts

@@ -4,14 +4,6 @@ import ContextmenuLinkEntry from './ContextmenuLinkEntry.svelte';
 import ContextmenuTextEntry from './ContextmenuTextEntry.svelte';
 import ContextmenuSeparator from './ContextmenuSeparator.svelte';
 type $$ComponentProps = {
-    /**
-     * The `contextmenu` prop is not reactive because that's a rare corner case and
-     * it's easier to put the `contextmenu` directly in the context
-     * rather than wrapping with a store or other reactivity.
-     * If you need to change the contextmenu prop for some reason, use a `{#key contextmenu}` block:
-     * https://svelte.dev/docs#template-syntax-key
-     * @nonreactive
-     */
     contextmenu?: ContextmenuState;
     /**
      * The number of pixels to offset from the pointer X position when opened.

package/dist/ContextmenuRoot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuRoot.svelte"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpD,OAAO,EAGL,gBAAgB,EAGhB,MAAM,+BAA+B,CAAC;AACxC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AAahE,KAAK,gBAAgB,GAAI;IACxB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChF,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsOH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ContextmenuRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuRoot.svelte"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpD,OAAO,EAGL,gBAAgB,EAGhB,MAAM,+BAA+B,CAAC;AACxC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AAahE,KAAK,gBAAgB,GAAI;IACxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChF,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsOH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ContextmenuRootForSafariCompatibility.svelte

@@ -61,14 +61,6 @@
 		separator_entry = separator_entry_default,
 		children,
 	}: {
-		/**
-		 * The `contextmenu` prop is not reactive because that's a rare corner case and
-		 * it's easier to put the `contextmenu` directly in the context
-		 * rather than wrapping with a store or other reactivity.
-		 * If you need to change the contextmenu prop for some reason, use a `{#key contextmenu}` block:
-		 * https://svelte.dev/docs#template-syntax-key
-		 * @nonreactive
-		 */
 		contextmenu?: ContextmenuState;
 		/**
 		 * The number of pixels the pointer can be moved without canceling `longpress`.
@@ -131,7 +123,7 @@
 		children: Snippet;
 	} = $props();
 
-	contextmenu_context.set(contextmenu);
+	contextmenu_context.set(() => contextmenu);
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 

package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts

@@ -4,14 +4,6 @@ import ContextmenuLinkEntry from './ContextmenuLinkEntry.svelte';
 import ContextmenuTextEntry from './ContextmenuTextEntry.svelte';
 import ContextmenuSeparator from './ContextmenuSeparator.svelte';
 type $$ComponentProps = {
-    /**
-     * The `contextmenu` prop is not reactive because that's a rare corner case and
-     * it's easier to put the `contextmenu` directly in the context
-     * rather than wrapping with a store or other reactivity.
-     * If you need to change the contextmenu prop for some reason, use a `{#key contextmenu}` block:
-     * https://svelte.dev/docs#template-syntax-key
-     * @nonreactive
-     */
     contextmenu?: ContextmenuState;
     /**
      * The number of pixels the pointer can be moved without canceling `longpress`.

package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuRootForSafariCompatibility.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuRootForSafariCompatibility.svelte"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpD,OAAO,EAGL,gBAAgB,EAGhB,MAAM,+BAA+B,CAAC;AACxC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AAehE,KAAK,gBAAgB,GAAI;IACxB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChF,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAoXH,QAAA,MAAM,qCAAqC,sDAAwC,CAAC;AACpF,KAAK,qCAAqC,GAAG,UAAU,CAAC,OAAO,qCAAqC,CAAC,CAAC;AACtG,eAAe,qCAAqC,CAAC"}
+{"version":3,"file":"ContextmenuRootForSafariCompatibility.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuRootForSafariCompatibility.svelte"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpD,OAAO,EAGL,gBAAgB,EAGhB,MAAM,+BAA+B,CAAC;AACxC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AAehE,KAAK,gBAAgB,GAAI;IACxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3E;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChF,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAoXH,QAAA,MAAM,qCAAqC,sDAAwC,CAAC;AACpF,KAAK,qCAAqC,GAAG,UAAU,CAAC,OAAO,qCAAqC,CAAC,CAAC;AACtG,eAAe,qCAAqC,CAAC"}

package/dist/ContextmenuSubmenu.svelte

@@ -15,13 +15,15 @@
 		children: Snippet;
 	} = $props();
 
-	const contextmenu = contextmenu_context.get();
+	const get_contextmenu = contextmenu_context.get();
+	const contextmenu = $derived(get_contextmenu());
 
-	const submenu = contextmenu.add_submenu();
+	// add_submenu registers on the current instance at init — not reactive to contextmenu getter changes
+	const submenu = get_contextmenu().add_submenu();
 
-	const {layout} = contextmenu;
+	const {layout} = $derived(contextmenu);
 
-	const selected = $derived(submenu.selected);
+	const {selected} = $derived(submenu);
 
 	let el: HTMLElement | undefined = $state();
 

package/dist/ContextmenuSubmenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuSubmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuSubmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAMnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAkFH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ContextmenuSubmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuSubmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAMnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAoFH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/Docs.svelte

@@ -27,8 +27,8 @@
 	} = $props();
 
 	// TODO this API is messy, inconsistent usage of props/context
-	const tomes_by_name = new Map(tomes.map((t) => [t.name, t]));
-	tomes_context.set(tomes_by_name);
+	const tomes_by_name = $derived(new Map(tomes.map((t) => [t.name, t])));
+	tomes_context.set(() => tomes_by_name);
 
 	// TODO @many dialog navs - this is messy to satisfy SSR with the current design that puts the secondary nav in a dialog
 	const TERTIARY_NAV_BREAKPOINT = 1000;

package/dist/LibraryDetail.svelte

@@ -19,7 +19,7 @@
 		library,
 		repo_name,
 		description,
-		motto,
+		tagline,
 		npm_url,
 		homepage_url,
 		children,
@@ -27,7 +27,7 @@
 		library: Library;
 		repo_name?: Snippet<[repo_name: string]>;
 		description?: Snippet<[description: string]>;
-		motto?: Snippet<[description: string]>;
+		tagline?: Snippet<[description: string]>;
 		npm_url?: Snippet<[npm_url: string]>;
 		homepage_url?: Snippet<[homepage_url: string]>;
 		children?: Snippet<[library: Library]>;
@@ -68,11 +68,11 @@
 						<div class="description">{package_json.description}</div>
 					{/if}
 				{/if}
-				{#if package_json.motto}
-					{#if motto}
-						{@render motto(package_json.motto)}
+				{#if package_json.tagline}
+					{#if tagline}
+						{@render tagline(package_json.tagline)}
 					{:else}
-						<div class="motto">{package_json.motto}</div>
+						<div class="tagline">{package_json.tagline}</div>
 					{/if}
 				{/if}
 				{#if library.npm_url}
@@ -245,7 +245,7 @@
 	.description {
 		margin-bottom: var(--space_lg);
 	}
-	.motto {
+	.tagline {
 		margin-bottom: var(--space_lg);
 	}
 	.properties {

package/dist/LibraryDetail.svelte.d.ts

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     library: Library;
     repo_name?: Snippet<[repo_name: string]>;
     description?: Snippet<[description: string]>;
-    motto?: Snippet<[description: string]>;
+    tagline?: Snippet<[description: string]>;
     npm_url?: Snippet<[npm_url: string]>;
     homepage_url?: Snippet<[homepage_url: string]>;
     children?: Snippet<[library: Library]>;

package/dist/LibraryDetail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAYhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAuKH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAYhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAuKH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/LibrarySummary.svelte

@@ -10,7 +10,7 @@
 		library,
 		repo_name,
 		logo,
-		motto,
+		tagline,
 		description,
 		npm_url,
 		homepage_url,
@@ -19,7 +19,7 @@
 		library: Library;
 		repo_name?: Snippet<[repo_name: string]>;
 		logo?: Snippet<[logo_url: string, logo_alt: string]>;
-		motto?: Snippet<[motto: string, glyph?: string]>;
+		tagline?: Snippet<[tagline: string, glyph?: string]>;
 		description?: Snippet<[description: string, glyph?: string]>;
 		npm_url?: Snippet<[npm_url: string]>;
 		homepage_url?: Snippet<[homepage_url: string]>;
@@ -51,12 +51,12 @@
 			{/if}
 		{/if}
 	</header>
-	{#if package_json.motto}
-		{#if motto}
-			{@render motto(package_json.motto, package_json.glyph)}
+	{#if package_json.tagline}
+		{#if tagline}
+			{@render tagline(package_json.tagline, package_json.glyph)}
 		{:else}
 			<p class="panel py_md px_xl">
-				{package_json.motto}
+				{package_json.tagline}
 				{package_json.glyph}
 			</p>
 		{/if}
@@ -67,7 +67,7 @@
 		{:else}
 			<p class="text-align:center">
 				{package_json.description}
-				{#if !package_json.motto}
+				{#if !package_json.tagline}
 					{package_json.glyph}
 				{/if}
 			</p>

package/dist/LibrarySummary.svelte.d.ts

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     library: Library;
     repo_name?: Snippet<[repo_name: string]>;
     logo?: Snippet<[logo_url: string, logo_alt: string]>;
-    motto?: Snippet<[motto: string, glyph?: string]>;
+    tagline?: Snippet<[tagline: string, glyph?: string]>;
     description?: Snippet<[description: string, glyph?: string]>;
     npm_url?: Snippet<[npm_url: string]>;
     homepage_url?: Snippet<[homepage_url: string]>;

package/dist/LibrarySummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibrarySummary.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibrarySummary.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAGhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2GH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LibrarySummary.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibrarySummary.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAGhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2GH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Redirect.svelte

@@ -2,8 +2,7 @@
 	import {page} from '$app/state';
 	import {strip_start} from '@fuzdev/fuz_util/string.js';
 	import {goto} from '$app/navigation';
-	import type {Snippet} from 'svelte';
-	import {BROWSER} from 'esm-env';
+	import {onMount, type Snippet} from 'svelte';
 
 	const {
 		host = '',
@@ -12,26 +11,25 @@
 		children,
 	}: {
 		/**
-		 * The target host to redirect to. Defaults to the current `location.host`.
-		 * @nonreactive
+		 * The target host to redirect to. Defaults to `''` (relative URL).
 		 */
 		host?: string;
 		/**
 		 * The target path to redirect to. Defaults to the current `location.pathname`.
-		 * @nonreactive
 		 */
 		path?: string;
 		/**
 		 * Should the redirect happen automatically without user input? Defaults to `true`.
-		 * @nonreactive
 		 */
 		auto?: boolean;
 		children?: Snippet<[url: string]>;
 	} = $props();
 
-	const url = host + path;
+	const url = $derived(host + path);
 
-	if (auto && BROWSER) void goto(url, {replaceState: true}); // eslint-disable-line svelte/no-navigation-without-resolve
+	onMount(() => {
+		if (auto) void goto(url, {replaceState: true}); // eslint-disable-line svelte/no-navigation-without-resolve
+	});
 </script>
 
 <svelte:head>

package/dist/Redirect.svelte.d.ts

@@ -1,18 +1,15 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     /**
-     * The target host to redirect to. Defaults to the current `location.host`.
-     * @nonreactive
+     * The target host to redirect to. Defaults to `''` (relative URL).
      */
     host?: string;
     /**
      * The target path to redirect to. Defaults to the current `location.pathname`.
-     * @nonreactive
      */
     path?: string;
     /**
      * Should the redirect happen automatically without user input? Defaults to `true`.
-     * @nonreactive
      */
     auto?: boolean;
     children?: Snippet<[url: string]>;

package/dist/Redirect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Redirect.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Redirect.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGnC,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;CAClC,CAAC;AA+BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Redirect.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Redirect.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAU,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAE5C,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;CAClC,CAAC;AAgCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ThemeInput.svelte

@@ -4,10 +4,12 @@
 	import {default_themes} from '@fuzdev/fuz_css/themes.js';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {themer_context} from './themer.svelte.js';
+	import {theme_state_context} from './theme_state.svelte.js';
+
+	const get_theme_state = theme_state_context.get();
 
 	const {
-		selected_theme = themer_context.get(),
+		selected_theme = get_theme_state(),
 		themes = default_themes,
 		enable_editing = false,
 		select = (theme) => {

package/dist/ThemeInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAC,KAAK,EAAE,KAAK,CAAA;KAAC,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAiDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAC,KAAK,EAAE,KAAK,CAAA;KAAC,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAmDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/{Themed.svelte → ThemeRoot.svelte}

@@ -14,9 +14,9 @@
 		sync_color_scheme as default_sync_color_scheme,
 		save_theme as default_save_theme,
 		load_theme as default_load_theme,
-		themer_context,
-		Themer,
-	} from './themer.svelte.js';
+		theme_state_context,
+		ThemeState,
+	} from './theme_state.svelte.js';
 	import {effect_with_count} from './rune_helpers.svelte.js';
 
 	const {
@@ -26,8 +26,10 @@
 		load_theme = default_load_theme,
 		save_theme = default_save_theme,
 		theme_fallback,
-		// TODO make reactive? by passing getters as options?
-		themer = new Themer({theme: load_theme(theme_fallback), color_scheme: load_color_scheme()}),
+		theme_state = new ThemeState({
+			theme: load_theme(theme_fallback),
+			color_scheme: load_color_scheme(),
+		}),
 		children,
 	}: {
 		sync_color_scheme?: typeof default_sync_color_scheme;
@@ -39,19 +41,18 @@
 		/**
 		 * A reactive class containing the selected theme and color scheme.
 		 * Defaults to the first default theme.
-		 * The class reference is not reactive
-		 * because it's set in context without a wrapper, use `{#key theme}` if it changes.
-		 * @nonreactive
 		 */
-		themer?: Themer;
-		children: Snippet<[themer: Themer, style: string | null, theme_style_html: string | null]>;
+		theme_state?: ThemeState;
+		children: Snippet<
+			[theme_state: ThemeState, style: string | null, theme_style_html: string | null]
+		>;
 	} = $props();
 
-	// In dev mode only, warn about misuse of the singleton `Themed`.
+	// In dev mode only, warn about misuse of the singleton `ThemeRoot`.
 	if (DEV) {
 		onMount(() => {
 			if (mounted) {
-				console.warn('more than one Themed was mounted'); // eslint-disable-line no-console
+				console.warn('more than one ThemeRoot was mounted'); // eslint-disable-line no-console
 			}
 			mounted = true;
 			return () => {
@@ -61,34 +62,34 @@
 	}
 
 	/**
-	 * `Themed` adds global color scheme and theme support to the page.
-	 * It also sets in the Svelte context a reactive `themer` containing the theme and color scheme.
+	 * `ThemeRoot` adds global color scheme and theme support to the page.
+	 * It also sets in the Svelte context a reactive `theme_state` containing the theme and color scheme.
 	 *
 	 * @module
 	 */
 
-	themer_context.set(themer);
+	theme_state_context.set(() => theme_state);
 
-	const selected_theme_name = $derived(themer.theme.name);
+	const selected_theme_name = $derived(theme_state.theme.name);
 	const style = $derived(
 		selected_theme_name === DEFAULT_THEME.name // TODO @many proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check
 			? null
-			: render_theme_style(themer.theme),
+			: render_theme_style(theme_state.theme),
 	);
 	const theme_style_html = $derived(style ? `<style>${style}</style>` : null);
 
 	effect_with_count((count) => {
-		const v = themer.color_scheme;
+		const v = theme_state.color_scheme;
 		if (count === 1) return;
 		sync_color_scheme(v);
 	});
 	effect_with_count((count) => {
-		const v = themer.color_scheme;
+		const v = theme_state.color_scheme;
 		if (count === 1) return;
 		save_color_scheme(v); // helper may change, so is separate from `sync_color_scheme`
 	});
 	effect_with_count((count) => {
-		const v = themer.theme;
+		const v = theme_state.theme;
 		if (count === 1) return;
 		save_theme(v);
 	});
@@ -101,4 +102,4 @@
 	{#if theme_style_html}{@html theme_style_html}{/if}
 </svelte:head>
 
-{@render children(themer, style, theme_style_html)}
+{@render children(theme_state, style, theme_style_html)}

package/dist/{Themed.svelte.d.ts → ThemeRoot.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import { type Theme } from '@fuzdev/fuz_css/theme.js';
-import { load_color_scheme as default_load_color_scheme, save_color_scheme as default_save_color_scheme, sync_color_scheme as default_sync_color_scheme, save_theme as default_save_theme, load_theme as default_load_theme, Themer } from './themer.svelte.js';
+import { load_color_scheme as default_load_color_scheme, save_color_scheme as default_save_color_scheme, sync_color_scheme as default_sync_color_scheme, save_theme as default_save_theme, load_theme as default_load_theme, ThemeState } from './theme_state.svelte.js';
 type $$ComponentProps = {
     sync_color_scheme?: typeof default_sync_color_scheme;
     load_color_scheme?: typeof default_load_color_scheme;
@@ -11,14 +11,15 @@ type $$ComponentProps = {
     /**
      * A reactive class containing the selected theme and color scheme.
      * Defaults to the first default theme.
-     * The class reference is not reactive
-     * because it's set in context without a wrapper, use `{#key theme}` if it changes.
-     * @nonreactive
      */
-    themer?: Themer;
-    children: Snippet<[themer: Themer, style: string | null, theme_style_html: string | null]>;
+    theme_state?: ThemeState;
+    children: Snippet<[
+        theme_state: ThemeState,
+        style: string | null,
+        theme_style_html: string | null
+    ]>;
 };
-declare const Themed: import("svelte").Component<$$ComponentProps, {}, "">;
-type Themed = ReturnType<typeof Themed>;
-export default Themed;
-//# sourceMappingURL=Themed.svelte.d.ts.map
+declare const ThemeRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeRoot = ReturnType<typeof ThemeRoot>;
+export default ThemeRoot;
+//# sourceMappingURL=ThemeRoot.svelte.d.ts.map

package/dist/ThemeRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeRoot.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAU,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAqB,KAAK,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAIxE,OAAO,EACL,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,UAAU,IAAI,kBAAkB,EAChC,UAAU,IAAI,kBAAkB,EAEhC,UAAU,EACV,MAAM,yBAAyB,CAAC;AAGjC,KAAK,gBAAgB,GAAI;IACxB,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,QAAQ,EAAE,OAAO,CAChB;QAAC,WAAW,EAAE,UAAU;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI;QAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI;KAAC,CAChF,CAAC;CACF,CAAC;AAoFH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/TomeContent.svelte

@@ -22,7 +22,7 @@
 
 	const docs_links = docs_links_context.get();
 
-	tome_context.set(tome); // TODO make reactive?
+	tome_context.set(() => tome);
 
 	const fragment = $derived(docs_slugify(tome.name));
 

package/dist/TomeHeader.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import {page} from '$app/state';
-	import {onDestroy} from 'svelte';
 	import {DEV} from 'esm-env';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
@@ -11,17 +10,17 @@
 	// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
 	const props: SvelteHTMLElements['h1'] | SvelteHTMLElements['h2'] = $props();
 
-	const tome = tome_context.get(); // TODO make reactive?
-	if (DEV && !tome) throw Error('TomeHeader expects a tome in context'); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+	const get_tome = tome_context.get();
+	if (DEV && !get_tome) throw Error('TomeHeader expects a tome in context'); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+	const tome = $derived(get_tome());
 
 	const docs_links = docs_links_context.get();
 
-	const fragment = docs_slugify(tome.name);
-	const path_slug = docs_slugify(tome.name);
-	const id = docs_links.add(fragment, tome.name, page.url.pathname);
-
-	onDestroy(() => {
-		docs_links.remove(id);
+	const fragment = $derived(docs_slugify(tome.name));
+	const path_slug = $derived(docs_slugify(tome.name));
+	$effect(() => {
+		const id = docs_links.add(fragment, tome.name, page.url.pathname);
+		return () => docs_links.remove(id);
 	});
 
 	const {path, path_is_selected} = $derived(to_docs_path_info(path_slug, page.url.pathname));

package/dist/TomeHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TomeHeader.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeHeader.svelte"],"names":[],"mappings":"AA4DA,QAAA,MAAM,UAAU,kGAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TomeHeader.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeHeader.svelte"],"names":[],"mappings":"AA0DA,QAAA,MAAM,UAAU,kGAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}