@fuzdev/fuz_ui 0.179.0 → 0.181.0

package/dist/ApiIndex.svelte

@@ -2,12 +2,11 @@
 	import {library_context, type Library} from './library.svelte.js';
 	import {get_tome_by_name, type Tome} from './tome.js';
 	import TomeContent from './TomeContent.svelte';
-	import TomeSection from './TomeSection.svelte';
 	import TomeLink from './TomeLink.svelte';
-	import TomeSectionHeader from './TomeSectionHeader.svelte';
 	import DocsSearch from './DocsSearch.svelte';
+	import ApiModulesList from './ApiModulesList.svelte';
 	import ApiDeclarationList from './ApiDeclarationList.svelte';
-	import {create_declaration_search} from './api_search.svelte.js';
+	import {create_api_search} from './api_search.svelte.js';
 
 	const {
 		library = library_context.get(),
@@ -31,7 +30,7 @@
 		minimal?: boolean;
 	} = $props();
 
-	const search = $derived(create_declaration_search(library));
+	const search = $derived(create_api_search(library));
 </script>
 
 <svelte:head>
@@ -44,22 +43,24 @@
 			<p>Browse the full <TomeLink name="api" /> docs.</p>
 		</section>
 	{:else}
-		<TomeSection>
-			<TomeSectionHeader text="Declarations" />
+		<section>
+			<p>{library.package_json.description}</p>
 
-			<section>
-				<p>{library.package_json.description}</p>
+			{#if search.modules.all.length + search.declarations.all.length > 1}
+				<DocsSearch
+					module_count={search.modules.all.length}
+					declaration_count={search.declarations.all.length}
+					filtered_module_count={search.query.trim() ? search.modules.filtered.length : undefined}
+					filtered_declaration_count={search.query.trim()
+						? search.declarations.filtered.length
+						: undefined}
+					bind:search_query={search.query}
+				/>
+			{/if}
+		</section>
 
-				{#if search.all.length > 1}
-					<DocsSearch
-						total_count={search.all.length}
-						result_count={search.filtered.length}
-						bind:search_query={search.query}
-					/>
-				{/if}
-			</section>
+		<ApiModulesList modules={search.modules.filtered} search_query={search.query} />
 
-			<ApiDeclarationList declarations={search.filtered} search_query={search.query} />
-		</TomeSection>
+		<ApiDeclarationList declarations={search.declarations.filtered} search_query={search.query} />
 	{/if}
 </TomeContent>

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

@@ -1 +1 @@
-{"version":3,"file":"ApiIndex.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiIndex.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AASrD,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAiDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ApiIndex.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiIndex.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAQrD,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAgDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ApiModule.svelte

@@ -75,8 +75,8 @@
 				{#if search.all.length > 1}
 					<DocsSearch
 						placeholder="search declarations in this module..."
-						total_count={search.all.length}
-						result_count={search.filtered.length}
+						declaration_count={search.all.length}
+						filtered_declaration_count={search.query.trim() ? search.filtered.length : undefined}
 						bind:search_query={search.query}
 					/>
 				{/if}

package/dist/ApiModulesList.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type {Module} from './module.svelte.js';
+	import ModuleLink from './ModuleLink.svelte';
+	import TomeSection from './TomeSection.svelte';
+	import TomeSectionHeader from './TomeSectionHeader.svelte';
+
+	const {
+		modules,
+		search_query = '',
+	}: {
+		/**
+		 * The modules to display.
+		 */
+		modules: Array<Module>;
+		/**
+		 * The current search query for highlighting.
+		 */
+		search_query?: string;
+	} = $props();
+
+	const has_search = $derived(search_query.trim().length > 0);
+</script>
+
+{#if modules.length > 0 || has_search}
+	<TomeSection>
+		<TomeSectionHeader text="Modules" />
+		{#if modules.length === 0}
+			<p class="color_c">No modules match your search.</p>
+		{:else}
+			<ul class="modules_list">
+				{#each modules as module (module.path)}
+					<li>
+						<ModuleLink module_path={module.path} />
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</TomeSection>
+{/if}
+
+<style>
+	.modules_list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space_xs);
+		padding: 0;
+		list-style: none;
+	}
+	.modules_list li {
+		margin: 0;
+	}
+</style>

package/dist/ApiModulesList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Module } from './module.svelte.js';
+type $$ComponentProps = {
+    /**
+     * The modules to display.
+     */
+    modules: Array<Module>;
+    /**
+     * The current search query for highlighting.
+     */
+    search_query?: string;
+};
+declare const ApiModulesList: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApiModulesList = ReturnType<typeof ApiModulesList>;
+export default ApiModulesList;
+//# sourceMappingURL=ApiModulesList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModulesList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiModulesList.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAK9C,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAoCH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Card.svelte

@@ -76,7 +76,7 @@
 		align-items: center;
 		padding: var(--space_lg);
 		width: var(--card_width);
-		background-color: var(--fg_1);
+		background-color: var(--fg_10);
 		border-radius: var(--border_radius, var(--border_radius_md));
 		text-decoration: none;
 		text-align: left;
@@ -93,14 +93,22 @@
 		box-shadow: var(
 			--shadow,
 			var(--shadow_inset_bottom_sm)
-				color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
+				color-mix(
+					in hsl,
+					var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40),
+					transparent
+				)
 		);
 	}
 	.link:active {
 		box-shadow: var(
 			--shadow,
 			var(--shadow_inset_top_sm)
-				color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
+				color-mix(
+					in hsl,
+					var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40),
+					transparent
+				)
 		);
 	}
 	.link.selected .content,

package/dist/ContextmenuSeparator.svelte

@@ -10,7 +10,7 @@
 	.contextmenu_separator {
 		height: var(--border_width);
 		margin: var(--spacing_xs) var(--spacing_sm);
-		background-color: var(--border_color_1);
+		background-color: var(--border_color_10);
 		list-style: none;
 	}
 </style>

package/dist/ContextmenuSubmenu.svelte

@@ -103,7 +103,7 @@
 	menu {
 		z-index: var(--contextmenu_depth);
 		position: absolute;
-		/* TODO this is a hack to avoid the pixel gap, probably change to 0 after adding transparent bg hitbox */
+		/* TODO this is a hack to avoid the pixel gap, probably change to 0 after adding transparent surface hitbox */
 		left: -1px;
 		top: 0;
 		max-width: var(--contextmenu_width);

package/dist/Dialog.svelte

@@ -166,7 +166,11 @@
 <style>
 	.dialog {
 		--pane_shadow: var(--shadow_bottom_xl)
-			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_5), transparent);
+			color-mix(
+				in hsl,
+				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_70),
+				transparent
+			);
 		position: fixed;
 		inset: 0;
 		overflow: auto;
@@ -177,7 +181,7 @@
 	}
 
 	.dialog_wrapper {
-		position: relative; /* for the bg */
+		position: relative; /* for the surface */
 		min-height: 100%;
 		display: flex;
 		align-items: center;
@@ -193,7 +197,7 @@
 		z-index: 0;
 		opacity: 0;
 		transition: opacity var(--duration_3) ease;
-		background-color: var(--dialog_bg, var(--darken_6));
+		background-color: var(--dialog_bg, var(--darken_60));
 	}
 	.ready .dialog_bg {
 		opacity: 1;

package/dist/DocsFooter.svelte

@@ -56,7 +56,7 @@
 		border: var(--border_width) double var(--border_color);
 	}
 	.logo a:hover {
-		--border_color: var(--color_a_5);
+		--border_color: var(--color_a_50);
 	}
 	.root_url {
 		/* TODO messy */

package/dist/DocsList.svelte

@@ -33,12 +33,12 @@
 
 	/* TODO should be fixed upstream in fuz_css */
 	.docs_list :global(a.highlighted) {
-		background-color: var(--bg_4);
+		background-color: var(--fg_10);
 	}
 	.docs_list :global(a:hover) {
-		background-color: var(--bg_5);
+		background-color: var(--fg_10);
 	}
 	.docs_list :global(a:is(:active, .selected)) {
-		background-color: var(--bg_7);
+		background-color: var(--fg_20);
 	}
 </style>

package/dist/DocsPrimaryNav.svelte

@@ -47,7 +47,7 @@
 		position: sticky;
 		top: 0;
 		z-index: 10;
-		background-color: var(--bg);
+		background-color: var(--shade_00);
 		height: var(--docs_primary_nav_height);
 		transition: box-shadow var(--duration_2);
 		box-shadow: none;
@@ -55,7 +55,11 @@
 
 	.scrolled {
 		box-shadow: var(--shadow_bottom_xs)
-			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_1), transparent);
+			color-mix(
+				in hsl,
+				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
+				transparent
+			);
 	}
 
 	.background {
@@ -63,7 +67,7 @@
 		z-index: -1;
 		width: 100%;
 		height: 100%;
-		background-color: var(--fg_1);
+		background-color: var(--shade_10);
 	}
 
 	.content {

package/dist/DocsSearch.svelte

@@ -2,25 +2,61 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	let {
-		placeholder = 'search declarations and modules...',
-		total_count,
-		result_count,
+		placeholder = 'search modules and declarations...',
+		module_count,
+		declaration_count,
+		filtered_module_count,
+		filtered_declaration_count,
 		search_query = $bindable(),
 		...rest
 	}: SvelteHTMLElements['input'] & {
 		placeholder?: string;
-		total_count: number;
-		result_count?: number;
+		/**
+		 * Total number of modules.
+		 */
+		module_count?: number;
+		/**
+		 * Total number of declarations.
+		 */
+		declaration_count?: number;
+		/**
+		 * Number of modules after filtering.
+		 */
+		filtered_module_count?: number;
+		/**
+		 * Number of declarations after filtering.
+		 */
+		filtered_declaration_count?: number;
 		search_query: string;
 	} = $props();
 
-	const total_text = $derived(
-		total_count === 1 ? `${total_count} declaration` : `${total_count} declarations`,
-	);
-	const result_text = $derived(
-		result_count === 1 ? `${result_count} match found` : `${result_count} matches found`,
-	);
 	const has_search = $derived(search_query.trim().length > 0);
+
+	const total_text = $derived.by(() => {
+		const parts: Array<string> = [];
+		if (module_count !== undefined) {
+			parts.push(module_count === 1 ? '1 module' : `${module_count} modules`);
+		}
+		if (declaration_count !== undefined) {
+			parts.push(declaration_count === 1 ? '1 declaration' : `${declaration_count} declarations`);
+		}
+		return parts.join(' · ');
+	});
+
+	const result_text = $derived.by(() => {
+		const parts: Array<string> = [];
+		if (filtered_module_count !== undefined) {
+			parts.push(filtered_module_count === 1 ? '1 module' : `${filtered_module_count} modules`);
+		}
+		if (filtered_declaration_count !== undefined) {
+			parts.push(
+				filtered_declaration_count === 1
+					? '1 declaration'
+					: `${filtered_declaration_count} declarations`,
+			);
+		}
+		return parts.join(' · ');
+	});
 </script>
 
 <label class="display:block position:relative">
@@ -41,8 +77,9 @@
 </label>
 
 <p>
-	{total_text}
-	{#if has_search && result_count !== undefined}
-		· {result_text}
+	{#if has_search && result_text}
+		{result_text} found
+	{:else if total_text}
+		{total_text}
 	{/if}
 </p>

package/dist/DocsSearch.svelte.d.ts

@@ -1,8 +1,22 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['input'] & {
     placeholder?: string;
-    total_count: number;
-    result_count?: number;
+    /**
+     * Total number of modules.
+     */
+    module_count?: number;
+    /**
+     * Total number of declarations.
+     */
+    declaration_count?: number;
+    /**
+     * Number of modules after filtering.
+     */
+    filtered_module_count?: number;
+    /**
+     * Number of declarations after filtering.
+     */
+    filtered_declaration_count?: number;
     search_query: string;
 };
 declare const DocsSearch: import("svelte").Component<$$ComponentProps, {}, "search_query">;

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

@@ -1 +1 @@
-{"version":3,"file":"DocsSearch.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSearch.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAwCH,QAAA,MAAM,UAAU,kEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsSearch.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSearch.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AA+DH,QAAA,MAAM,UAAU,kEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/DocsSecondaryNav.svelte

@@ -37,7 +37,7 @@
 		margin-bottom: 0;
 		overflow: auto;
 		scrollbar-width: thin;
-		background-color: var(--fg_1);
+		background-color: var(--shade_10);
 	}
 
 	.sidebar nav {

package/dist/DocsTertiaryNav.svelte

@@ -2,10 +2,9 @@
 	import {page} from '$app/state';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import DocsModulesList from './DocsModulesList.svelte';
 	import DocsPageLinks from './DocsPageLinks.svelte';
 	import {to_tome_pathname, Tome} from './tome.js';
-	import {docs_links_context, DOCS_API_PATH} from './docs_helpers.svelte.js';
+	import {docs_links_context} from './docs_helpers.svelte.js';
 	import {library_context} from './library.svelte.js';
 	import TomeLink from './TomeLink.svelte';
 	import ModuleLink from './ModuleLink.svelte';
@@ -47,9 +46,6 @@
 	const docs_links = docs_links_context.get();
 
 	const should_show_page_links = $derived(docs_links.docs_links.length > 0);
-
-	const at_api_root = $derived(page.url.pathname === DOCS_API_PATH);
-	const at_module = $derived(page.url.pathname.startsWith(DOCS_API_PATH + '/'));
 </script>
 
 <!-- TODO probably add a `nav` wrapper? around which? -->
@@ -57,9 +53,6 @@
 	{#if should_show_page_links}
 		<DocsPageLinks {sidebar} expand_width />
 	{/if}
-	{#if at_api_root || at_module}
-		<DocsModulesList expand_width />
-	{/if}
 	{#if tomes_related_to_selected.length}
 		<section class="related_section">
 			<h4 class="mb_sm">related tomes</h4>
@@ -106,7 +99,7 @@
 		); /* needed with `overflow: auto` to avoid cutting off outline */
 		overflow: auto;
 		scrollbar-width: thin;
-		background-color: var(--fg_1);
+		background-color: var(--shade_10);
 	}
 
 	/* sync this breakpoint with `/docs/+layout` */

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

@@ -1 +1 @@
-{"version":3,"file":"DocsTertiaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsTertiaryNav.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIxD,OAAO,EAAmB,IAAI,EAAC,MAAM,WAAW,CAAC;AAOhD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+FH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DocsTertiaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsTertiaryNav.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAmB,IAAI,EAAC,MAAM,WAAW,CAAC;AAOhD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAwFH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/HueInput.svelte

@@ -79,7 +79,7 @@
 		flex-direction: row;
 		align-items: center;
 		font-weight: 700;
-		color: var(--bg);
+		color: var(--shade_00);
 		padding-left: var(--space_xl);
 		border-top-left-radius: var(--border_radius, var(--border_radius_md));
 		border-top-right-radius: var(--border_radius, var(--border_radius_md));
@@ -121,6 +121,6 @@
 		border-radius: var(--border_radius, var(--border_radius_md));
 		/* TODO why is this necessary? */
 		height: var(--input_height);
-		color: var(--bg);
+		color: var(--shade_00);
 	}
 </style>

package/dist/LibraryDetail.svelte

@@ -267,25 +267,25 @@
 	}
 	.module {
 		margin-bottom: var(--space_xs);
-		--link_color: var(--text_color_3);
+		--link_color: var(--text_70);
 	}
 	.module_content {
-		background-color: var(--bg_3);
+		background-color: var(--shade_30);
 		border-radius: var(--border_radius_sm);
 		padding: var(--space_xs);
 	}
 	/* TODO probably add variables/classes for these */
 	.ts {
-		--link_color: var(--color_a_5);
+		--link_color: var(--color_a_50);
 	}
 	.svelte {
-		--link_color: var(--color_h_5);
+		--link_color: var(--color_h_50);
 	}
 	.css {
-		--link_color: var(--color_b_5);
+		--link_color: var(--color_b_50);
 	}
 	.json {
-		--link_color: var(--color_f_5);
+		--link_color: var(--color_f_50);
 	}
 	/* TODO extract */
 	.declarations {

package/dist/LibrarySummary.svelte

@@ -31,7 +31,7 @@
 
 <div class="library_summary">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
-	<header class="box">
+	<header class="box mb_lg">
 		{#if repo_name}
 			{@render repo_name(library.repo_name)}
 		{:else}
@@ -55,10 +55,10 @@
 		{#if motto}
 			{@render motto(package_json.motto, package_json.glyph)}
 		{:else}
-			<blockquote class="px_xl">
+			<p class="panel py_md px_xl">
 				{package_json.motto}
 				{package_json.glyph}
-			</blockquote>
+			</p>
 		{/if}
 	{/if}
 	{#if package_json.description}
@@ -78,7 +78,7 @@
 		{#if homepage_url}
 			{@render homepage_url(library.homepage_url)}
 		{:else}
-			<div class="homepage_url">
+			<div class="mb_lg">
 				<!-- eslint-disable svelte/no-navigation-without-resolve -->
 				<a
 					class="chip"
@@ -89,7 +89,7 @@
 			</div>
 		{/if}
 	{/if}
-	<div class="links">
+	<p class="display:flex gap_xs2">
 		{#if library.repo_url}
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			<a class="chip" href={library.repo_url}>repo</a>
@@ -102,12 +102,14 @@
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			<a class="chip" href={library.npm_url}>npm</a>
 		{/if}
-	</div>
+	</p>
 	{#if library.npm_url}
 		{#if npm_url}
 			{@render npm_url(library.npm_url)}
 		{:else}
-			<blockquote class="npm_url">npm i -D {package_json.name}</blockquote>
+			<p class="panel py_md px_xl font_family_mono text-align:center">
+				npm i -D {package_json.name}
+			</p>
 		{/if}
 	{/if}
 	<!-- TODO more details behind a `<details>`, including author -->
@@ -123,16 +125,6 @@
 		align-items: center;
 		max-width: var(--max_width, var(--distance_sm));
 	}
-	header {
-		margin-bottom: var(--space_lg);
-	}
-	.links {
-		display: flex;
-		margin-bottom: var(--space_lg);
-	}
-	.homepage_url {
-		margin-bottom: var(--space_lg);
-	}
 	.repo_name {
 		font-family: var(--font_family_serif);
 		font-size: var(--font_size_xl2);
@@ -140,12 +132,4 @@
 		text-align: center;
 		margin-bottom: var(--space_lg);
 	}
-	.npm_url {
-		font-family: var(--font_family_mono);
-		text-align: center;
-	}
-	.chip {
-		margin-left: var(--space_xs2);
-		margin-right: var(--space_xs2);
-	}
 </style>

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;AAyGH,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,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"}

package/dist/MdzNodeView.svelte

@@ -84,10 +84,10 @@
 
 {#snippet render_unregistered_tag(name: string, children: Array<MdzNode>)}
 	{#if children.length > 0}
-		<code class="color_c_5">&lt;{name}&gt;</code>{@render render_children(children)}<code
-			class="color_c_5">&lt;/{name}&gt;</code
+		<code class="color_c_50">&lt;{name}&gt;</code>{@render render_children(children)}<code
+			class="color_c_50">&lt;/{name}&gt;</code
 		>
 	{:else}
-		<code class="color_c_5">&lt;{name} /&gt;</code>
+		<code class="color_c_50">&lt;{name} /&gt;</code>
 	{/if}
 {/snippet}

package/dist/ModuleLink.svelte

@@ -22,6 +22,8 @@
 
 	const module = $derived(library.lookup_module(module_path));
 
+	const color_class = $derived(module_path.endsWith('.svelte') ? 'color_h' : '');
+
 	const contextmenu_entries = $derived(module ? create_module_contextmenu(module) : undefined);
 
 	// TODO @many support full https:// url variants - automatic detection? library prop?
@@ -31,7 +33,7 @@
 	<!-- eslint-disable svelte/no-navigation-without-resolve -->
 	<a
 		{...rest}
-		class="module_link {class_prop}"
+		class="module_link {class_prop} {color_class}"
 		href={module.url_api + (hash ? ensure_start(hash, '#') : '')}
 		{@attach contextmenu_attachment(contextmenu_entries)}
 	>

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

@@ -1 +1 @@
-{"version":3,"file":"ModuleLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ModuleLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAOvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AA+CH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ModuleLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ModuleLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAOvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAiDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/ProjectLinks.svelte

@@ -24,14 +24,14 @@
 	// TODO ideally this wouldn't duplicate metadata like descriptions, but adding fuz_gitops to this repo is heavy
 	// prettier-ignore
 	const project_items: Array<ProjectItem> = [
-		{name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_c_5'},
-		{name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'CSS framework and design system', glyph: '🌿', color_class: 'color_b_5'},
-		{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, Fuz, and Gro', glyph: '❄', color_class: 'color_h_5'},
-		{name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, SvelteKit', glyph: '🎨', color_class: 'color_g_5'},
-		{name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '🖊️', color_class: 'color_e_5'},
-		{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_5'},
-		{name: 'fuz_gitops', url: 'https://gitops.fuz.dev/', logo: logo_fuz_gitops, description: 'a tool for managing many repos', glyph: '🪄', color_class: 'color_a_5'},
-		{name: 'fuz_util', url: 'https://util.fuz.dev/', logo: logo_fuz_util, description: 'utility belt for JS', glyph: '🦕', color_class: 'color_f_5'},
+		{name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_c_50'},
+		{name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'CSS framework and design system', glyph: '🌿', color_class: 'color_b_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, Fuz, and Gro', glyph: '❄', color_class: 'color_h_50'},
+		{name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, SvelteKit', glyph: '🎨', color_class: 'color_g_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_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'},
+		{name: 'fuz_gitops', url: 'https://gitops.fuz.dev/', logo: logo_fuz_gitops, description: 'a tool for managing many repos', glyph: '🪄', color_class: 'color_a_50'},
+		{name: 'fuz_util', url: 'https://util.fuz.dev/', logo: logo_fuz_util, description: 'utility belt for JS', glyph: '🦕', color_class: 'color_f_50'},
 	];
 </script>
 
@@ -44,11 +44,11 @@
 
 {#snippet package_thumbnail(project_item: ProjectItem)}
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-	<a class="thumbnail row bg px_md py_xs border_radius_sm mb_lg" href={project_item.url}
+	<a class="thumbnail row shade_00 px_md py_xs border_radius_sm mb_lg" href={project_item.url}
 		><Svg shrink={false} data={project_item.logo} size="var(--icon_size_lg)" />
 		<div class="pl_lg width_atmost_sm">
 			<div class="thumbnail_name {project_item.color_class}">{project_item.name}</div>
-			<div class="thumbnail_description font_size_md text_color_3 font-weight:500">
+			<div class="thumbnail_description font_size_md text_70 font-weight:500">
 				{project_item.description}
 				{project_item.glyph}
 			</div>
@@ -59,11 +59,19 @@
 <style>
 	.thumbnail {
 		box-shadow: var(--shadow_bottom_xs)
-			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_1), transparent);
+			color-mix(
+				in hsl,
+				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
+				transparent
+			);
 	}
 	.thumbnail:hover {
 		box-shadow: var(--shadow_bottom_sm)
-			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_1), transparent);
+			color-mix(
+				in hsl,
+				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
+				transparent
+			);
 
 		/* show the underline only on the name, not the description */
 		text-decoration: none;
@@ -76,6 +84,10 @@
 	}
 	.thumbnail:active {
 		box-shadow: var(--shadow_top_xs)
-			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_1), transparent);
+			color-mix(
+				in hsl,
+				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30),
+				transparent
+			);
 	}
 </style>

package/dist/Spiders.svelte

@@ -14,16 +14,16 @@
 
 	const {
 		spiders = [
-			'var(--color_a_5)',
-			'var(--color_b_5)',
-			'var(--color_c_5)',
-			'var(--color_d_5)',
-			'var(--color_e_5)',
-			'var(--color_f_5)',
-			'var(--color_g_5)',
-			'var(--color_h_5)',
-			'var(--color_i_5)',
-			'var(--color_j_5)',
+			'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)',
 		],
 		seed = minute_of_day(),
 		random = create_random_alea(seed),

package/dist/StyleVariableButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {default_variables} from '@fuzdev/fuz_css/variables.js';
+
+	import {selected_variable_context} from './style_variable_helpers.svelte.js';
+
+	const {
+		name,
+		inline = false,
+		plain = true,
+		children,
+		...rest
+	}: SvelteHTMLElements['button'] & {
+		name: string; // TODO type? generate from `tomes`? or keep extensible?
+		inline?: boolean;
+		plain?: boolean;
+	} = $props();
+
+	// TODO add contextmenu behavior
+
+	const variable = $derived.by(() => {
+		const v = default_variables.find((v) => v.name === name);
+		if (!v) throw new Error(`cannot find variable named "${name}"`);
+		return v;
+	});
+
+	const selected_variable = selected_variable_context.get();
+</script>
+
+<button
+	type="button"
+	{...rest}
+	class:inline
+	class:plain
+	onclick={() => (selected_variable.value = variable)}
+	>{#if children}{@render children()}{:else}<span class="font_family_mono">{name}</span
+		>{/if}</button
+>
+
+<style>
+	button {
+		min-height: var(--input_height_sm);
+	}
+</style>

package/dist/StyleVariableButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['button'] & {
+    name: string;
+    inline?: boolean;
+    plain?: boolean;
+};
+declare const StyleVariableButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type StyleVariableButton = ReturnType<typeof StyleVariableButton>;
+export default StyleVariableButton;
+//# sourceMappingURL=StyleVariableButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyleVariableButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/StyleVariableButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAgCH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/Svg.svelte

@@ -100,7 +100,6 @@
 	.inline {
 		display: inline-block;
 		position: relative;
-		/* TODO idk about this, but vertical align doesnt seem quite right either */
-		top: 0.1em;
+		vertical-align: middle;
 	}
 </style>

package/dist/TomeSection.svelte

@@ -39,9 +39,14 @@
 	// Provide own section ID to direct children (header) via context
 	section_id_context.set(section_id);
 
-	let fragment: string;
+	let fragment: string | undefined;
 
 	register_section_header_context.set((f) => {
+		if (DEV && fragment !== undefined) {
+			throw Error(
+				`TomeSection already has header "${fragment}", cannot add "${f}". Did you forget to wrap a TomeSectionHeader in its own TomeSection?`,
+			);
+		}
 		fragment = f;
 		return parent_section_id; // Return parent section ID to header
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"TomeSection.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeSection.svelte"],"names":[],"mappings":"AAKC,MAAM,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;AAC7E,eAAO,MAAM,+BAA+B;;;;CAA0C,CAAC;AACvF,eAAO,MAAM,qBAAqB;;;CAA0B,CAAC;AAC7D,eAAO,MAAM,kBAAkB;;;;CAAuC,CAAC;AAGxE,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACxD,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyDH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TomeSection.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeSection.svelte"],"names":[],"mappings":"AAKC,MAAM,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;AAC7E,eAAO,MAAM,+BAA+B;;;;CAA0C,CAAC;AACvF,eAAO,MAAM,qBAAqB;;;CAA0B,CAAC;AAC7D,eAAO,MAAM,kBAAkB;;;;CAAuC,CAAC;AAGxE,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACxD,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA8DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/alert.js

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

package/dist/api_search.svelte.d.ts

@@ -1,14 +1,26 @@
 import type { Declaration } from './declaration.svelte.js';
 import type { Library } from './library.svelte.js';
+import type { Module } from './module.svelte.js';
 export interface DeclarationSearchState {
     query: string;
     all: Array<Declaration>;
     filtered: Array<Declaration>;
 }
+export interface ApiSearchState {
+    query: string;
+    modules: {
+        all: Array<Module>;
+        filtered: Array<Module>;
+    };
+    declarations: {
+        all: Array<Declaration>;
+        filtered: Array<Declaration>;
+    };
+}
 /**
- * Creates search state for the API index page (all declarations across all modules).
+ * Creates unified search state for the API index page (modules and declarations).
  */
-export declare const create_declaration_search: (library: Library) => DeclarationSearchState;
+export declare const create_api_search: (library: Library) => ApiSearchState;
 /**
  * Creates search state for module-specific declaration lists.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"api_search.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/api_search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,sBAAsB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,yBAAyB,GAAI,SAAS,OAAO,KAAG,sBAwB5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gCAAgC,GAC5C,cAAc,KAAK,CAAC,WAAW,CAAC,KAC9B,sBAyCF,CAAC"}
+{"version":3,"file":"api_search.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/api_search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,sBAAsB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACR,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KACxB,CAAC;IACF,YAAY,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QACxB,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;CACF;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,KAAG,cA8CpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gCAAgC,GAC5C,cAAc,KAAK,CAAC,WAAW,CAAC,KAC9B,sBAyCF,CAAC"}

package/dist/api_search.svelte.js

@@ -1,11 +1,24 @@
 /**
- * Creates search state for the API index page (all declarations across all modules).
+ * Creates unified search state for the API index page (modules and declarations).
  */
-export const create_declaration_search = (library) => {
+export const create_api_search = (library) => {
     let query = $state('');
-    const all = $derived(library.declarations);
-    const filtered = $derived.by(() => {
-        const items = query.trim() ? library.search_declarations(query) : all;
+    // Module filtering
+    const all_modules = $derived(library.modules_sorted);
+    const filtered_modules = $derived.by(() => {
+        if (!query.trim())
+            return all_modules;
+        const terms = query.trim().toLowerCase().split(/\s+/);
+        return all_modules.filter((m) => {
+            const path_lower = m.path.toLowerCase();
+            const comment_lower = m.module_comment?.toLowerCase() ?? '';
+            return terms.every((term) => path_lower.includes(term) || comment_lower.includes(term));
+        });
+    });
+    // Declaration filtering
+    const all_declarations = $derived(library.declarations);
+    const filtered_declarations = $derived.by(() => {
+        const items = query.trim() ? library.search_declarations(query) : all_declarations;
         return items.sort((a, b) => a.name.localeCompare(b.name));
     });
     return {
@@ -15,11 +28,21 @@ export const create_declaration_search = (library) => {
         set query(v) {
             query = v;
         },
-        get all() {
-            return all;
+        modules: {
+            get all() {
+                return all_modules;
+            },
+            get filtered() {
+                return filtered_modules;
+            },
         },
-        get filtered() {
-            return filtered;
+        declarations: {
+            get all() {
+                return all_declarations;
+            },
+            get filtered() {
+                return filtered_declarations;
+            },
         },
     };
 };

package/dist/declaration.svelte.d.ts

@@ -12,7 +12,7 @@ export declare class Declaration {
      */
     module_path: string;
     name: string;
-    kind: "function" | "class" | "type" | "json" | "variable" | "constructor" | "component" | "css";
+    kind: "function" | "class" | "type" | "constructor" | "json" | "variable" | "component" | "css";
     /**
      * GitHub source URL with line number.
      */

package/dist/library.svelte.d.ts

@@ -86,7 +86,7 @@ export declare class Library {
             declarations?: {
                 [x: string]: unknown;
                 name: string;
-                kind: "function" | "class" | "type" | "json" | "variable" | "constructor" | "component" | "css";
+                kind: "function" | "class" | "type" | "constructor" | "json" | "variable" | "component" | "css";
                 doc_comment?: string | undefined;
                 type_signature?: string | undefined;
                 modifiers?: string[] | undefined;

package/dist/style_variable_helpers.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { StyleVariable } from '@fuzdev/fuz_css/variable.js';
+export declare class SelectedStyleVariable {
+    value: StyleVariable | null;
+    constructor(initial?: StyleVariable | null);
+}
+export declare const selected_variable_context: {
+    get: () => SelectedStyleVariable;
+    set: (value?: SelectedStyleVariable | undefined) => SelectedStyleVariable;
+};
+//# sourceMappingURL=style_variable_helpers.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style_variable_helpers.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/style_variable_helpers.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAK/D,qBAAa,qBAAqB;IACjC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAa;gBAE5B,OAAO,GAAE,aAAa,GAAG,IAAW;CAGhD;AAED,eAAO,MAAM,yBAAyB;;;CAAwD,CAAC"}

package/dist/style_variable_helpers.svelte.js

@@ -0,0 +1,9 @@
+import { create_context } from './context_helpers.js';
+// TODO maybe change this to a generic wrapper class for any value?
+export class SelectedStyleVariable {
+    value = $state();
+    constructor(initial = null) {
+        this.value = initial;
+    }
+}
+export const selected_variable_context = create_context(() => new SelectedStyleVariable(null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.179.0",
+  "version": "0.181.0",
   "description": "Svelte UI library",
   "motto": "friendly user zystem",
   "glyph": "🧶",
@@ -34,9 +34,9 @@
     "node": ">=22.15"
   },
   "peerDependencies": {
-    "@fuzdev/fuz_code": ">=0.40.0",
-    "@fuzdev/fuz_css": ">=0.44.1",
-    "@fuzdev/fuz_util": ">=0.45.3",
+    "@fuzdev/fuz_code": ">=0.41.0",
+    "@fuzdev/fuz_css": ">=0.45.0",
+    "@fuzdev/fuz_util": ">=0.48.2",
     "@jridgewell/trace-mapping": "^0.3",
     "@ryanatkn/gro": ">=0.186.0",
     "@sveltejs/kit": "^2.47.3",
@@ -61,16 +61,16 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
-    "@fuzdev/fuz_code": "^0.40.0",
-    "@fuzdev/fuz_css": "^0.44.1",
-    "@fuzdev/fuz_util": "^0.45.3",
+    "@fuzdev/fuz_code": "^0.41.0",
+    "@fuzdev/fuz_css": "^0.46.0",
+    "@fuzdev/fuz_util": "^0.48.3",
     "@jridgewell/trace-mapping": "^0.3.31",
     "@ryanatkn/eslint-config": "^0.9.0",
-    "@ryanatkn/gro": "^0.186.0",
+    "@ryanatkn/gro": "^0.190.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/node": "^24.10.1",
     "@webref/css": "^8.2.0",
     "eslint": "^9.39.1",
@@ -79,8 +79,8 @@
     "jsdom": "^27.2.0",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
-    "svelte": "^5.46.1",
-    "svelte-check": "^4.3.5",
+    "svelte": "^5.49.1",
+    "svelte-check": "^4.3.6",
     "svelte2tsx": "^0.7.46",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",

package/src/lib/alert.ts

@@ -8,7 +8,7 @@ export interface AlertStatusOptions {
 }
 
 export const alert_status_options: Record<AlertStatus, AlertStatusOptions> = {
-	inform: {color: 'var(--text_color_3)', icon: '✻'},
-	help: {color: 'var(--color_b_5)', icon: '➺'},
-	error: {color: 'var(--color_c_5)', icon: '!?'},
+	inform: {color: 'var(--text_70)', icon: '✻'},
+	help: {color: 'var(--color_b_50)', icon: '➺'},
+	error: {color: 'var(--color_c_50)', icon: '!?'},
 };

package/src/lib/api_search.svelte.ts

@@ -1,5 +1,6 @@
 import type {Declaration} from './declaration.svelte.js';
 import type {Library} from './library.svelte.js';
+import type {Module} from './module.svelte.js';
 
 export interface DeclarationSearchState {
 	query: string;
@@ -7,16 +8,40 @@ export interface DeclarationSearchState {
 	filtered: Array<Declaration>;
 }
 
+export interface ApiSearchState {
+	query: string;
+	modules: {
+		all: Array<Module>;
+		filtered: Array<Module>;
+	};
+	declarations: {
+		all: Array<Declaration>;
+		filtered: Array<Declaration>;
+	};
+}
+
 /**
- * Creates search state for the API index page (all declarations across all modules).
+ * Creates unified search state for the API index page (modules and declarations).
  */
-export const create_declaration_search = (library: Library): DeclarationSearchState => {
+export const create_api_search = (library: Library): ApiSearchState => {
 	let query = $state('');
 
-	const all = $derived(library.declarations);
+	// Module filtering
+	const all_modules = $derived(library.modules_sorted);
+	const filtered_modules = $derived.by(() => {
+		if (!query.trim()) return all_modules;
+		const terms = query.trim().toLowerCase().split(/\s+/);
+		return all_modules.filter((m) => {
+			const path_lower = m.path.toLowerCase();
+			const comment_lower = m.module_comment?.toLowerCase() ?? '';
+			return terms.every((term) => path_lower.includes(term) || comment_lower.includes(term));
+		});
+	});
 
-	const filtered = $derived.by(() => {
-		const items = query.trim() ? library.search_declarations(query) : all;
+	// Declaration filtering
+	const all_declarations = $derived(library.declarations);
+	const filtered_declarations = $derived.by(() => {
+		const items = query.trim() ? library.search_declarations(query) : all_declarations;
 		return items.sort((a, b) => a.name.localeCompare(b.name));
 	});
 
@@ -27,11 +52,21 @@ export const create_declaration_search = (library: Library): DeclarationSearchSt
 		set query(v: string) {
 			query = v;
 		},
-		get all() {
-			return all;
+		modules: {
+			get all() {
+				return all_modules;
+			},
+			get filtered() {
+				return filtered_modules;
+			},
 		},
-		get filtered() {
-			return filtered;
+		declarations: {
+			get all() {
+				return all_declarations;
+			},
+			get filtered() {
+				return filtered_declarations;
+			},
 		},
 	};
 };

package/src/lib/style_variable_helpers.svelte.ts

@@ -0,0 +1,14 @@
+import type {StyleVariable} from '@fuzdev/fuz_css/variable.js';
+
+import {create_context} from './context_helpers.js';
+
+// TODO maybe change this to a generic wrapper class for any value?
+export class SelectedStyleVariable {
+	value: StyleVariable | null = $state()!;
+
+	constructor(initial: StyleVariable | null = null) {
+		this.value = initial;
+	}
+}
+
+export const selected_variable_context = create_context(() => new SelectedStyleVariable(null));

package/dist/DocsModulesList.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import {page} from '$app/state';
-	import type {SvelteHTMLElements} from 'svelte/elements';
-
-	import DocsList from './DocsList.svelte';
-	import {library_context} from './library.svelte.js';
-
-	const {
-		expand_width = false,
-		...rest
-	}: SvelteHTMLElements['div'] & {
-		expand_width?: boolean;
-	} = $props();
-
-	const library = library_context.get();
-</script>
-
-<DocsList {...rest} {expand_width} class="modules_list">
-	<h4 class="mb_sm">modules</h4>
-	<ul class="unstyled">
-		{#each library.modules_sorted as module (module.path)}
-			<li>
-				<!-- eslint-disable svelte/no-navigation-without-resolve -->
-				<a
-					class="menu_item"
-					href={module.url_api}
-					class:selected={module.url_api === page.url.pathname}
-				>
-					<div class="ellipsis">{module.path}</div>
-				</a>
-			</li>
-		{/each}
-	</ul>
-</DocsList>

package/dist/DocsModulesList.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = SvelteHTMLElements['div'] & {
-    expand_width?: boolean;
-};
-declare const DocsModulesList: import("svelte").Component<$$ComponentProps, {}, "">;
-type DocsModulesList = ReturnType<typeof DocsModulesList>;
-export default DocsModulesList;
-//# sourceMappingURL=DocsModulesList.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DocsModulesList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsModulesList.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAgCH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}