@fuzdev/fuz_ui 0.209.0 → 0.210.1

package/dist/ApiDeclarationList.svelte

@@ -15,10 +15,10 @@
 
 {#if declarations.length === 0}
 	<section>
-		{#if search_query}
-			<p>No declarations found matching "{search_query}"</p>
+		{#if search_query.trim()}
+			<p class="text_70">No declarations match your search.</p>
 		{:else}
-			<p>No declarations</p>
+			<p class="text_70">No declarations.</p>
 		{/if}
 	</section>
 {:else}

package/dist/ApiModulesList.svelte

@@ -25,7 +25,7 @@
 	<TomeSection>
 		<TomeSectionHeader text="Modules" />
 		{#if modules.length === 0}
-			<p class="color_c">No modules match your search.</p>
+			<p class="text_70">No modules match your search.</p>
 		{:else}
 			<ul class="modules-list">
 				{#each modules as module (module.path)}

package/dist/Card.svelte

@@ -105,7 +105,7 @@
 			--shadow,
 			var(--shadow_inset_bottom_sm)
 				color-mix(
-					in hsl,
+					in oklab,
 					var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40),
 					transparent
 				)
@@ -116,7 +116,7 @@
 			--shadow,
 			var(--shadow_inset_top_sm)
 				color-mix(
-					in hsl,
+					in oklab,
 					var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40),
 					transparent
 				)

package/dist/ColorSchemeInput.svelte

@@ -1,64 +1,26 @@
 <script lang="ts">
-	import { swallow } from '@fuzdev/fuz_util/dom.ts';
 	import { color_schemes, type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
 	import { theme_state_context } from './theme_state.svelte.js';
+	import RadioMenu from './RadioMenu.svelte';
 
 	const get_theme_state = theme_state_context.get();
 
 	const {
 		value = get_theme_state(),
 		...rest
-	}: SvelteHTMLElements['menu'] & {
+	}: OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
 		value?: { color_scheme: ColorScheme };
 	} = $props();
 </script>
 
-<!-- TODO maybe support menubar aria
-https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
-<menu {...rest} class="color-scheme-control unstyled {rest.class}">
-	{#each color_schemes as color_scheme (color_scheme)}
-		{@const selected = color_scheme === value.color_scheme}
-		<button
-			type="button"
-			class={['color-scheme color_a', { selected }]}
-			role="menuitemradio"
-			title={selected
-				? `${color_scheme} color scheme is selected`
-				: `select ${color_scheme} color scheme`}
-			aria-checked={selected}
-			onclick={(e) => {
-				swallow(e);
-				value.color_scheme = color_scheme;
-			}}
-		>
-			<div class="content">{color_scheme}</div>
-		</button>
-	{/each}
-</menu>
-
-<style>
-	.color-scheme-control {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-	}
-	.content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 var(--space_lg);
-	}
-	.color-scheme {
-		border-radius: 0;
-	}
-	.color-scheme:first-child {
-		border-top-left-radius: var(--border_radius, var(--border_radius_md));
-		border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
-	}
-	.color-scheme:last-child {
-		border-top-right-radius: var(--border_radius, var(--border_radius_md));
-		border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
-	}
-</style>
+<RadioMenu
+	{...rest}
+	options={color_schemes}
+	bind:value={value.color_scheme}
+	label={(color_scheme) => color_scheme}
+	title={(color_scheme, selected) =>
+		selected ? `${color_scheme} color scheme is selected` : `select ${color_scheme} color scheme`}
+/>

package/dist/ColorSchemeInput.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 import type { SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = SvelteHTMLElements['menu'] & {
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
     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,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACtC,CAAC;AAmCH,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":"AAGA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACpG,KAAK,CAAC,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACtC,CAAC;AAsBH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/CopyToClipboard.svelte

@@ -69,7 +69,7 @@
 	class={[
 		'copy-to-clipboard',
 		rest.class,
-		{ icon_button: children ? false : icon_button, copied, failed, color_c: failed }
+		{ icon_button: children ? false : icon_button, copied, failed, palette_c: failed }
 	]}
 	onclick={(e) => {
 		onclick?.(e); // before the internal handler, which is async

package/dist/Dialog.svelte

@@ -176,7 +176,7 @@
 	.dialog {
 		--pane_shadow: var(--shadow_bottom_xl)
 			color-mix(
-				in hsl,
+				in oklab,
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_70),
 				transparent
 			);
@@ -196,9 +196,13 @@
 		overflow: auto;
 		overscroll-behavior: contain;
 	}
-	/* the native backdrop is the dim background; fade it in on open */
+	/* the native backdrop is the dim background; fade it in on open. It reads
+		fuz_css's `--backdrop_color` like a plain dialog's does, then its default
+		`--darken_60` for a variable set without it. Older browsers don't let
+		::backdrop inherit custom properties from the page, so the last fallback
+		is that value as a literal */
 	.dialog::backdrop {
-		background-color: var(--dialog_bg, var(--darken_60));
+		background-color: var(--backdrop_color, var(--darken_60, #000000a6));
 		transition: background-color var(--duration_2) ease;
 	}
 	@starting-style {

package/dist/DialogContent.svelte

@@ -68,8 +68,8 @@
 		max_width?: string;
 		/**
 		 * The close button floating just outside the content surface's top-right
-		 * corner. `true` (the default) renders an absolutely-positioned `.sm.plain.icon_button`
-		 * that closes the dialog; `false` removes it. It renders after
+		 * corner. `true` (the default) renders an absolutely-positioned
+		 * `.sized_sm.plain.icon_button` that closes the dialog; `false` removes it. It renders after
 		 * `children`, so a content control (or an `autofocus` element) takes initial
 		 * focus on open rather than the close button.
 		 *
@@ -107,7 +107,7 @@
 	// into the consumer's snippet, which carries its own style scope
 	const close_button_attrs: DialogCloseButtonAttrs = {
 		type: 'button',
-		class: 'sm plain icon_button',
+		class: 'sized_sm plain icon_button',
 		style: 'position: absolute; top: 0; right: 0;',
 		onclick: dialog.close,
 		title: 'close',

package/dist/DialogContent.svelte.d.ts

@@ -33,8 +33,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     max_width?: string;
     /**
      * The close button floating just outside the content surface's top-right
-     * corner. `true` (the default) renders an absolutely-positioned `.sm.plain.icon_button`
-     * that closes the dialog; `false` removes it. It renders after
+     * corner. `true` (the default) renders an absolutely-positioned
+     * `.sized_sm.plain.icon_button` that closes the dialog; `false` removes it. It renders after
      * `children`, so a content control (or an `autofocus` element) takes initial
      * focus on open rather than the close button.
      *

package/dist/DocsFooter.svelte

@@ -64,7 +64,7 @@
 		border: var(--border_width) double var(--border_color);
 	}
 	.logo a:hover {
-		--border_color: var(--color_a_50);
+		--border_color: var(--palette_a_50);
 	}
 	.root-url {
 		/* TODO messy */

package/dist/DocsPrimaryNav.svelte

@@ -45,7 +45,7 @@
 	.scrolled {
 		box-shadow: var(--shadow_bottom_xs)
 			color-mix(
-				in hsl,
+				in oklab,
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
 				transparent
 			);

package/dist/HueInput.svelte

@@ -67,12 +67,12 @@
 
 <style>
 	.hue-input {
-		--outline_color: hsl(var(--hue) 50% 60%);
+		--outline_color: oklch(0.65 0.13 var(--hue));
 		/* TODO @many figure these variables out so they're easily customized (similar pattern in a lot of places) */
-		/* --thumb_background_color: hsl(var(--hue) 50% 50%); */
+		/* --thumb_background_color: oklch(0.6 0.13 var(--hue)); */
 	}
 	.preview {
-		background-color: hsl(var(--hue) 50% 50%);
+		background-color: oklch(0.6 0.13 var(--hue));
 		/* mirror the `min-height: var(--input_height)` that fuz_css gives the sibling inputs,
 		so the preview tracks their height even when `--input_height` is customized */
 		min-height: var(--input_height);
@@ -88,22 +88,14 @@
 	}
 	.minimap-wrapper {
 		padding: 0 var(--input_padding_x);
-		background: hsl(0 50% 50%) 0%;
 	}
 	.minimap {
+		/* sweep the OKLCH hue circle at constant lightness/chroma so the strip
+			matches what the hue knobs actually produce */
 		background: linear-gradient(
-			90deg,
-			hsl(0 50% 50%) 0%,
-			hsl(36 50% 50%) 10%,
-			hsl(72 50% 50%) 20%,
-			hsl(108 50% 50%) 30%,
-			hsl(144 50% 50%) 40%,
-			hsl(180 50% 50%) 50%,
-			hsl(216 50% 50%) 60%,
-			hsl(252 50% 50%) 70%,
-			hsl(288 50% 50%) 80%,
-			hsl(324 50% 50%) 90%,
-			hsl(360 50% 50%) 100%
+			90deg in oklch longer hue,
+			oklch(0.6 0.13 0) 0%,
+			oklch(0.6 0.13 360) 100%
 		);
 		height: var(--space_lg);
 	}

package/dist/LibraryDetail.svelte

@@ -282,16 +282,16 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 	}
 	/* TODO probably add variables/classes for these */
 	.ts {
-		--link_color: var(--color_a_50);
+		--link_color: var(--palette_a_50);
 	}
 	.svelte {
-		--link_color: var(--color_h_50);
+		--link_color: var(--palette_h_50);
 	}
 	.css {
-		--link_color: var(--color_b_50);
+		--link_color: var(--palette_b_50);
 	}
 	.json {
-		--link_color: var(--color_f_50);
+		--link_color: var(--palette_f_50);
 	}
 	/* TODO extract */
 	.declarations {

package/dist/ModuleLink.svelte

@@ -34,7 +34,7 @@
 	// the site-local path if `homepage_url` is unavailable.
 	const url_api = $derived((full && module?.url_api_full) || module?.url_api);
 
-	const color_class = $derived(module_path.endsWith('.svelte') ? 'color_h' : '');
+	const color_class = $derived(module_path.endsWith('.svelte') ? 'palette_h' : '');
 
 	const contextmenu_entries = $derived(module ? create_module_contextmenu(module) : undefined);
 </script>

package/dist/ProjectLinks.svelte

@@ -28,7 +28,7 @@
 	.thumbnail {
 		box-shadow: var(--shadow_bottom_xs)
 			color-mix(
-				in hsl,
+				in oklab,
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
 				transparent
 			);
@@ -36,7 +36,7 @@
 	.thumbnail:hover {
 		box-shadow: var(--shadow_bottom_sm)
 			color-mix(
-				in hsl,
+				in oklab,
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
 				transparent
 			);
@@ -53,7 +53,7 @@
 	.thumbnail:active {
 		box-shadow: var(--shadow_top_xs)
 			color-mix(
-				in hsl,
+				in oklab,
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
 				transparent
 			);

package/dist/RadioMenu.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="T">
+	import { swallow } from '@fuzdev/fuz_util/dom.ts';
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	/**
+	 * A horizontal menu of joined `menuitemradio` buttons with one selected -
+	 * the shape `ColorSchemeInput` takes, and any other few-way pick where the
+	 * options should sit one glance apart rather than behind a `select`.
+	 *
+	 * @module
+	 */
+
+	let {
+		options,
+		value = $bindable(),
+		onselect,
+		label,
+		title,
+		key = (option: T): unknown => label(option),
+		children,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
+		options: Array<T>;
+		/** The selected option, compared by identity; bindable. */
+		value: T;
+		/** Called after a click selects an option. */
+		onselect?: (option: T) => void;
+		/** The display text of an option - also the default `title` and `key` source. */
+		label: (option: T) => string;
+		/** The button title, defaulting to "select X" / "X is selected" from `label`. */
+		title?: (option: T, selected: boolean) => string;
+		/** Keys the options list; defaults to the label. */
+		key?: (option: T) => unknown;
+		/** Custom button content in place of the label text. */
+		children?: Snippet<[option: T, selected: boolean]>;
+	} = $props();
+
+	const title_of = (option: T, selected: boolean): string =>
+		title
+			? title(option, selected)
+			: selected
+				? `${label(option)} is selected`
+				: `select ${label(option)}`;
+</script>
+
+<menu {...rest} class={['radio-menu unstyled', rest.class]}>
+	{#each options as option (key(option))}
+		{@const selected = option === value}
+		<button
+			type="button"
+			class={['radio-menu-item palette_a', { selected }]}
+			role="menuitemradio"
+			title={title_of(option, selected)}
+			aria-checked={selected}
+			onclick={(e) => {
+				swallow(e);
+				value = option;
+				onselect?.(option);
+			}}
+		>
+			<div class="content">
+				{#if children}
+					{@render children(option, selected)}
+				{:else}
+					{label(option)}
+				{/if}
+			</div>
+		</button>
+	{/each}
+</menu>
+
+<style>
+	.radio-menu {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 var(--space_lg);
+	}
+	.radio-menu-item {
+		border-radius: 0;
+	}
+	.radio-menu-item:first-child {
+		border-top-left-radius: var(--border_radius, var(--border_radius_md));
+		border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
+	}
+	.radio-menu-item:last-child {
+		border-top-right-radius: var(--border_radius, var(--border_radius_md));
+		border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
+	}
+</style>

package/dist/RadioMenu.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: OmitStrict<import("svelte/elements").HTMLMenuAttributes, "children" | "title" | "onselect"> & {
+        options: Array<T>;
+        /** The selected option, compared by identity; bindable. */
+        value: T;
+        /** Called after a click selects an option. */
+        onselect?: (option: T) => void;
+        /** The display text of an option - also the default `title` and `key` source. */
+        label: (option: T) => string;
+        /** The button title, defaulting to "select X" / "X is selected" from `label`. */
+        title?: (option: T, selected: boolean) => string;
+        /** Keys the options list; defaults to the label. */
+        key?: (option: T) => unknown;
+        /** Custom button content in place of the label text. */
+        children?: Snippet<[option: T, selected: boolean]>;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioMenu: $$IsomorphicComponent;
+type RadioMenu<T> = InstanceType<typeof RadioMenu<T>>;
+export default RadioMenu;
+//# sourceMappingURL=RadioMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/RadioMenu.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iBAAS,QAAQ,CAAC,CAAC;;iBAMR,KAAK,CAAC,CAAC,CAAC;QACjB,2DAA2D;eACpD,CAAC;QACR,8CAA8C;mBACnC,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI;QAC9B,iFAAiF;eAC1E,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM;QAC5B,iFAAiF;gBACzE,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM;QAChD,oDAAoD;cAC9C,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO;QAC5B,wDAAwD;mBAC7C,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;;;;;;EAoD0E;AAC9H,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}

package/dist/Sparkline.svelte

@@ -125,7 +125,7 @@
 
 <style>
 	svg {
-		background: var(--sparkline_bg, color-mix(in hsl, currentColor 8%, transparent));
+		background: var(--sparkline_bg, color-mix(in oklab, currentColor 8%, transparent));
 		border-radius: var(--border_radius_xs);
 	}
 </style>

package/dist/Spiders.svelte

@@ -15,16 +15,16 @@
 
 	const {
 		spiders = [
-			'var(--color_a_50)',
-			'var(--color_b_50)',
-			'var(--color_c_50)',
-			'var(--color_d_50)',
-			'var(--color_e_50)',
-			'var(--color_f_50)',
-			'var(--color_g_50)',
-			'var(--color_h_50)',
-			'var(--color_i_50)',
-			'var(--color_j_50)'
+			'var(--palette_a_50)',
+			'var(--palette_b_50)',
+			'var(--palette_c_50)',
+			'var(--palette_d_50)',
+			'var(--palette_e_50)',
+			'var(--palette_f_50)',
+			'var(--palette_g_50)',
+			'var(--palette_h_50)',
+			'var(--palette_i_50)',
+			'var(--palette_j_50)'
 		],
 		seed = minute_of_day(),
 		random = create_random_alea(seed),

package/dist/ThemeInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { swallow } from '@fuzdev/fuz_util/dom.ts';
-	import type { Theme } from '@fuzdev/fuz_css/theme.ts';
+	import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 	import { default_themes } from '@fuzdev/fuz_css/themes.ts';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
@@ -35,7 +35,7 @@
 		<li class="row" role="none">
 			<button
 				type="button"
-				class={['theme-button color_a', { selected }]}
+				class={['theme-button palette_a', { selected }]}
 				role="menuitemradio"
 				aria-label="{theme.name} theme"
 				aria-checked={selected}

package/dist/ThemeInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['menu'] & {
     selected_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,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,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;AAqDH,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,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,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;AAqDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/ThemeRoot.svelte

@@ -4,7 +4,8 @@
 
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
-	import { render_theme_style, type Theme } from '@fuzdev/fuz_css/theme.ts';
+	import { render_theme_style } from '@fuzdev/fuz_css/theme.ts';
+	import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 	import { DEFAULT_THEME } from '@fuzdev/fuz_css/themes.ts';
 	import { DEV } from 'esm-env';
 

package/dist/ThemeRoot.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import { type Theme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeRoot.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAI1E,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"}
+{"version":3,"file":"ThemeRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeRoot.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE/C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIzD,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;AAqFH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/alert.js

@@ -1,6 +1,6 @@
 // TODO move to module context?
 export const alert_status_options = {
     inform: { color: 'var(--text_70)', icon: '✻' },
-    help: { color: 'var(--color_b_50)', icon: '➺' },
-    error: { color: 'var(--color_c_50)', icon: '!?' }
+    help: { color: 'var(--palette_b_50)', icon: '➺' },
+    error: { color: 'var(--negative_50)', icon: '!?' }
 };

package/dist/logos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logos.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/logos.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,QAAQ;;;;;;CAgCF,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;CAIN,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;;CAKN,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;CAIL,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAIX,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;CAIR,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,mBAAmB;;;;;;CAQb,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAQX,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAwBP,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;;;;CAWL,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC"}
+{"version":3,"file":"logos.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/logos.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,QAAQ;;;;;;CAgCF,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;CAIN,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;;CAKN,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;CAIL,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAIX,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;CAIR,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,mBAAmB;;;;;;CAQb,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAQX,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAwBP,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;;;;CAWL,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC"}

package/dist/logos.js

@@ -1,18 +1,20 @@
 // TODO these can be optimized during builds, helpers and gen files?
 /*
 
-Logo colors are the midpoint between the light and dark versions of color variant 5:
+Logo colors are frozen brand values, originally derived as the midpoint
+between the light and dark mid-stops of fuz_css's pre-OKLCH palette
+(today's `--palette_X_50`), and deliberately not re-derived since:
 
 ```css
---color_a: #6199d1;
---color_b: #3db33d;
---color_c: #d93636;
---color_d: #8866cc;
---color_e: #d8bc31;
---color_f: #84522a; // TODO this one isn't the midpoint bc fuz_css's color needs tweaking, too light in dark mode
---color_g: #e55d95;
---color_h: #f4672f;
---color_i: #36e2e2;
+#6199d1 (blue, a)
+#3db33d (green, b)
+#d93636 (red, c)
+#8866cc (purple, d)
+#d8bc31 (yellow, e)
+#84522a (brown, f)
+#e55d95 (pink, g)
+#f4672f (orange, h)
+#36e2e2 (cyan, i)
 ```
 */
 export const logo_gro = {
@@ -142,7 +144,7 @@ export const logo_fuz_util = {
     ]
 };
 export const logo_tsv = {
-    label: 'a pixelated orange quill drawing a straight line',
+    label: 'a pixelated orange quill drawing a precise line',
     fill: '#f4672f',
     paths: [
         {

package/dist/projects.js

@@ -8,7 +8,7 @@ export const project_items = [
     { name: 'fuz_app', url: 'https://app.fuz.dev/', logo: logo_fuz_app, description: '[pre-alpha] fullstack app library', glyph: '🗝', color_class: 'color_j_50' },
     { name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'semantic-first CSS framework and design system', glyph: '🌿', color_class: 'color_b_50' },
     { name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_c_50' },
-    { name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Gro, and Fuz', glyph: '❄', color_class: 'color_h_50' },
+    { name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a web app template with TypeScript + SvelteKit + optional Rust for the fuz-stack', glyph: '❄', color_class: 'color_h_50' },
     { name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '🖊️', color_class: 'color_e_50' },
     { name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, Markdown, and more', glyph: '🎨', color_class: 'color_g_50' },
     { name: 'fuz_mastodon', url: 'https://mastodon.fuz.dev/', logo: logo_fuz_mastodon, description: 'Mastodon components and helpers for Svelte, SvelteKit, and Fuz', glyph: '🦣', color_class: 'color_d_50' },

package/dist/theme_state.svelte.d.ts

@@ -1,4 +1,5 @@
-import { type ColorScheme, type Theme } from '@fuzdev/fuz_css/theme.ts';
+import { type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 export interface ThemeStateJson {
     theme: Theme;
     color_scheme: ColorScheme;

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

@@ -1 +1 @@
-{"version":3,"file":"theme_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/theme_state.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAOvF,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAExD,qBAAa,UAAU;IACtB,KAAK,EAAE,KAAK,CAAiB;IAC7B,YAAY,EAAE,WAAW,CAAiB;gBAE9B,OAAO,CAAC,EAAE,iBAAiB;IAUvC,MAAM,IAAI,cAAc;CAMxB;AACD,eAAO,MAAM,mBAAmB;2CAAwB,UAAU;4BAAV,UAAU;uBAAV,UAAU,WAAV,UAAU;CAAG,CAAC;AAEtE,eAAO,MAAM,iBAAiB,GAAI,cAAc,WAAW,GAAG,IAAI,KAAG,IAOpE,CAAC;AAEF,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAC3D,eAAO,MAAM,iBAAiB,cAAc,CAAC;AAE7C,eAAO,MAAM,iBAAiB,GAC7B,cAAc,WAAW,GAAG,IAAI,EAChC,YAA8B,KAC5B,IAEF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC7B,WAAU,WAAoB,EAC9B,YAA8B,KAC5B,WAA4E,CAAC;AAEhF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,GAAG,IAAI,EAAE,YAAuB,KAAG,IAEzE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAU,KAA0B,EAAE,YAAuB,KAAG,KAC3C,CAAC"}
+{"version":3,"file":"theme_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/theme_state.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOzD,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAExD,qBAAa,UAAU;IACtB,KAAK,EAAE,KAAK,CAAiB;IAC7B,YAAY,EAAE,WAAW,CAAiB;gBAE9B,OAAO,CAAC,EAAE,iBAAiB;IAUvC,MAAM,IAAI,cAAc;CAMxB;AACD,eAAO,MAAM,mBAAmB;2CAAwB,UAAU;4BAAV,UAAU;uBAAV,UAAU,WAAV,UAAU;CAAG,CAAC;AAEtE,eAAO,MAAM,iBAAiB,GAAI,cAAc,WAAW,GAAG,IAAI,KAAG,IAOpE,CAAC;AAEF,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAC3D,eAAO,MAAM,iBAAiB,cAAc,CAAC;AAE7C,eAAO,MAAM,iBAAiB,GAC7B,cAAc,WAAW,GAAG,IAAI,EAChC,YAA8B,KAC5B,IAEF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC7B,WAAU,WAAoB,EAC9B,YAA8B,KAC5B,WAA4E,CAAC;AAEhF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,GAAG,IAAI,EAAE,YAAuB,KAAG,IAEzE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAU,KAA0B,EAAE,YAAuB,KAAG,KAC3C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.209.0",
+  "version": "0.210.1",
   "description": "Svelte UI library",
   "tagline": "friendly user zystem",
   "glyph": "🧶",
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@fuzdev/fuz_code": ">=0.46.0",
-    "@fuzdev/fuz_css": ">=0.62.0",
+    "@fuzdev/fuz_css": ">=0.65.0",
     "@fuzdev/fuz_util": ">=0.65.1",
     "@fuzdev/gro": ">=0.204.0",
     "@fuzdev/mdz": ">=0.2.0",
@@ -63,10 +63,10 @@
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/blake3-wasm": "^0.2.0",
-    "@fuzdev/fuz_code": "^0.48.0",
-    "@fuzdev/fuz_css": "^0.64.0",
+    "@fuzdev/fuz_code": "^0.50.0",
+    "@fuzdev/fuz_css": "^0.65.0",
     "@fuzdev/fuz_util": "^0.69.0",
-    "@fuzdev/gro": "^0.212.0",
+    "@fuzdev/gro": "^0.213.0",
     "@fuzdev/mdz": "^0.3.0",
     "@ryanatkn/eslint-config": "^0.12.2",
     "@sveltejs/adapter-static": "^3.0.10",

package/src/lib/alert.ts

@@ -9,6 +9,6 @@ export interface AlertStatusOptions {
 
 export const alert_status_options: Record<AlertStatus, AlertStatusOptions> = {
 	inform: { color: 'var(--text_70)', icon: '✻' },
-	help: { color: 'var(--color_b_50)', icon: '➺' },
-	error: { color: 'var(--color_c_50)', icon: '!?' }
+	help: { color: 'var(--palette_b_50)', icon: '➺' },
+	error: { color: 'var(--negative_50)', icon: '!?' }
 };

package/src/lib/logos.ts

@@ -4,18 +4,20 @@ import type { SvgData } from './svg.ts';
 
 /*
 
-Logo colors are the midpoint between the light and dark versions of color variant 5:
+Logo colors are frozen brand values, originally derived as the midpoint
+between the light and dark mid-stops of fuz_css's pre-OKLCH palette
+(today's `--palette_X_50`), and deliberately not re-derived since:
 
 ```css
---color_a: #6199d1;
---color_b: #3db33d;
---color_c: #d93636;
---color_d: #8866cc;
---color_e: #d8bc31;
---color_f: #84522a; // TODO this one isn't the midpoint bc fuz_css's color needs tweaking, too light in dark mode
---color_g: #e55d95;
---color_h: #f4672f;
---color_i: #36e2e2;
+#6199d1 (blue, a)
+#3db33d (green, b)
+#d93636 (red, c)
+#8866cc (purple, d)
+#d8bc31 (yellow, e)
+#84522a (brown, f)
+#e55d95 (pink, g)
+#f4672f (orange, h)
+#36e2e2 (cyan, i)
 ```
 */
 
@@ -159,7 +161,7 @@ export const logo_fuz_util = {
 } satisfies SvgData;
 
 export const logo_tsv = {
-	label: 'a pixelated orange quill drawing a straight line',
+	label: 'a pixelated orange quill drawing a precise line',
 	fill: '#f4672f',
 	paths: [
 		{

package/src/lib/projects.ts

@@ -34,7 +34,7 @@ export const project_items: Array<ProjectItem> = [
 	{name: 'fuz_app', url: 'https://app.fuz.dev/', logo: logo_fuz_app, description: '[pre-alpha] fullstack app library', glyph: '🗝', color_class: 'color_j_50'},
 	{name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'semantic-first CSS framework and design system', glyph: '🌿', color_class: 'color_b_50'},
 	{name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_c_50'},
-	{name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Gro, and Fuz', glyph: '❄', color_class: 'color_h_50'},
+	{name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a web app template with TypeScript + SvelteKit + optional Rust for the fuz-stack', glyph: '❄', color_class: 'color_h_50'},
 	{name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '🖊️', color_class: 'color_e_50'},
 	{name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, Markdown, and more', glyph: '🎨', color_class: 'color_g_50'},
 	{name: 'fuz_mastodon', url: 'https://mastodon.fuz.dev/', logo: logo_fuz_mastodon, description: 'Mastodon components and helpers for Svelte, SvelteKit, and Fuz', glyph: '🦣', color_class: 'color_d_50'},

package/src/lib/theme_state.svelte.ts

@@ -1,4 +1,5 @@
-import { color_schemes, type ColorScheme, type Theme } from '@fuzdev/fuz_css/theme.ts';
+import { color_schemes, type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 import { default_themes } from '@fuzdev/fuz_css/themes.ts';
 import { BROWSER } from 'esm-env';