@fuzdev/fuz_ui 0.169.0

package/dist/DocsFooter.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import {format_url, type Url} from '@fuzdev/fuz_util/url.js';
+	import type {Snippet} from 'svelte';
+
+	import type {Library} from './library.svelte.js';
+	import Svg from './Svg.svelte';
+	import {github_logo} from './logos.js';
+
+	const {
+		library,
+		root_url = null,
+		logo,
+		logo_header,
+		logo_footer,
+		children,
+	}: {
+		library: Library;
+		root_url?: Url | null;
+		logo?: Snippet;
+		logo_header?: Snippet;
+		logo_footer?: Snippet;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<footer class="box">
+	{@render children?.()}
+	<div class="logo box panel p_lg shadow_inset_xs">
+		{@render logo_header?.()}
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a href={library.repo_url} rel="me" title="source code on GitHub"
+			>{#if logo}{@render logo()}{:else}<Svg
+					data={github_logo}
+					size="var(--icon_size_lg)"
+				/>{/if}</a
+		>
+		{@render logo_footer?.()}
+	</div>
+	{#if root_url}
+		<div class="root_url">
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a href={root_url}>{format_url(root_url)}</a>
+		</div>
+	{/if}
+</footer>
+
+<style>
+	/* TODO probably extract */
+	.logo a {
+		--border_width: var(--border_width_4);
+		--border_color: transparent;
+		text-decoration: none;
+		display: flex;
+		border-radius: 50%;
+		border: var(--border_width) double var(--border_color);
+	}
+	.logo a:hover {
+		--border_color: var(--color_a_5);
+	}
+	.root_url {
+		/* TODO messy */
+		margin-top: var(--space_md);
+	}
+</style>

package/dist/DocsFooter.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Url } from '@fuzdev/fuz_util/url.js';
+import type { Snippet } from 'svelte';
+import type { Library } from './library.svelte.js';
+type $$ComponentProps = {
+    library: Library;
+    root_url?: Url | null;
+    logo?: Snippet;
+    logo_header?: Snippet;
+    logo_footer?: Snippet;
+    children?: Snippet;
+};
+declare const DocsFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsFooter = ReturnType<typeof DocsFooter>;
+export default DocsFooter;
+//# sourceMappingURL=DocsFooter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsFooter.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsFooter.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,GAAG,EAAC,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAIhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuCH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/DocsLink.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import ModuleLink from './ModuleLink.svelte';
+	import DeclarationLink from './DeclarationLink.svelte';
+	import {library_context} from './library.svelte.js';
+	import type {Declaration} from './declaration.svelte.js';
+	import type {Module} from './module.svelte.js';
+
+	const {
+		reference,
+		display_text,
+		children: children_prop,
+	}: {
+		reference: string;
+		display_text?: string | null;
+		children?: Snippet<[Declaration | undefined, Module | undefined]>;
+	} = $props();
+	const library = library_context.get();
+
+	// Try to find as declaration first, then module
+	const declaration = $derived(library.lookup_declaration(reference));
+	const module = $derived(declaration ? declaration.module : library.lookup_module(reference));
+</script>
+
+{#if declaration}
+	<DeclarationLink name={reference}>
+		{@render children()}
+	</DeclarationLink>
+{:else if module}
+	<ModuleLink module_path={module.path}>
+		{@render children()}
+	</ModuleLink>
+{:else}
+	<code>{@render children()}</code>
+{/if}
+
+{#snippet children()}{#if children_prop}{@render children_prop(
+			declaration,
+			module,
+		)}{:else}{display_text ?? reference}{/if}{/snippet}

package/dist/DocsLink.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { Declaration } from './declaration.svelte.js';
+import type { Module } from './module.svelte.js';
+type $$ComponentProps = {
+    reference: string;
+    display_text?: string | null;
+    children?: Snippet<[Declaration | undefined, Module | undefined]>;
+};
+declare const DocsLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsLink = ReturnType<typeof DocsLink>;
+export default DocsLink;
+//# sourceMappingURL=DocsLink.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAClE,CAAC;AAyCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/DocsList.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	const {
+		expand_width = false,
+		margin = true,
+		class: class_prop,
+		children,
+	}: {
+		expand_width?: boolean;
+		margin?: boolean;
+		class?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<div class="docs_list {class_prop}" class:expand_width class:margin>
+	{@render children()}
+</div>
+
+<style>
+	.docs_list {
+		width: var(--docs_menu_width);
+		min-width: var(--docs_menu_width);
+	}
+	.docs_list.expand_width {
+		width: 100%;
+		max-width: var(--distance_md);
+	}
+	.docs_list.margin {
+		margin: var(--space_xl6) 0;
+	}
+
+	/* TODO should be fixed upstream in moss */
+	.docs_list :global(a.highlighted) {
+		background-color: var(--bg_4);
+	}
+	.docs_list :global(a:hover) {
+		background-color: var(--bg_5);
+	}
+	.docs_list :global(a:is(:active, .selected)) {
+		background-color: var(--bg_7);
+	}
+</style>

package/dist/DocsList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    expand_width?: boolean;
+    margin?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const DocsList: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsList = ReturnType<typeof DocsList>;
+export default DocsList;
+//# sourceMappingURL=DocsList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsList.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEnC,KAAK,gBAAgB,GAAI;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAoBH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/DocsMenu.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import {slide} from 'svelte/transition';
+	import type {Snippet} from 'svelte';
+
+	import DocsList from './DocsList.svelte';
+	import {to_tome_pathname, type Tome} from './tome.js';
+	import DocsMenuHeader from './DocsMenuHeader.svelte';
+
+	const {
+		tomes,
+		children,
+		expand_width = false,
+	}: {
+		tomes: Array<Tome>;
+		children?: Snippet<[category: string]>;
+		expand_width?: boolean;
+	} = $props();
+
+	const tomes_by_category = $derived(
+		tomes.reduce<Record<string, Array<Tome>>>((result, c) => {
+			(result[c.category] ??= []).push(c);
+			return result;
+		}, {}),
+	);
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+
+<DocsList {expand_width} margin={false} class="docs_menu">
+	<ul class="unstyled">
+		{#each Object.entries(tomes_by_category) as [category, tomes] (category)}
+			<li class="category">
+				{#if children}{@render children(category)}{:else}<DocsMenuHeader>{category}</DocsMenuHeader
+					>{/if}
+				<ul class="unstyled">
+					{#each tomes as item (item)}
+						{@const pathname = to_tome_pathname(item)}
+						<li role="none" transition:slide>
+							<a class="menu_item" href={pathname} class:selected={pathname === page.url.pathname}
+								><div class="ellipsis">{item.name}</div></a
+							>
+						</li>
+					{/each}
+				</ul>
+			</li>
+		{/each}
+	</ul>
+</DocsList>
+
+<style>
+	.category {
+		margin: var(--space_xl6) 0;
+	}
+</style>

package/dist/DocsMenu.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type Tome } from './tome.js';
+type $$ComponentProps = {
+    tomes: Array<Tome>;
+    children?: Snippet<[category: string]>;
+    expand_width?: boolean;
+};
+declare const DocsMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsMenu = ReturnType<typeof DocsMenu>;
+export default DocsMenu;
+//# sourceMappingURL=DocsMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsMenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsMenu.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAgDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/DocsMenuHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		class: class_prop,
+		children,
+		...rest
+	}: SvelteHTMLElements['h4'] & {
+		// TODO maybe add an optional `selected` status? if any children are selected
+		children: Snippet;
+	} = $props();
+</script>
+
+<h4 {...rest} class="mb_sm {class_prop}">{@render children()}</h4>

package/dist/DocsMenuHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['h4'] & {
+    children: Snippet;
+};
+declare const DocsMenuHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsMenuHeader = ReturnType<typeof DocsMenuHeader>;
+export default DocsMenuHeader;
+//# sourceMappingURL=DocsMenuHeader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsMenuHeader.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsMenuHeader.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,IAAI,CAAC,GAAG;IAEnD,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAgBH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/DocsModulesList.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import {page} from '$app/state';
+
+	import DocsList from './DocsList.svelte';
+	import {library_context} from './library.svelte.js';
+
+	const {
+		expand_width = false,
+	}: {
+		expand_width?: boolean;
+	} = $props();
+
+	const library = library_context.get();
+</script>
+
+<DocsList {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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    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

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

package/dist/DocsPageLinks.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import {slide} from 'svelte/transition';
+
+	import DocsList from './DocsList.svelte';
+	import {docs_links_context} from './docs_helpers.svelte.js';
+
+	const {
+		sidebar = true,
+		expand_width = false,
+	}: {
+		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
+		expand_width?: boolean;
+	} = $props();
+
+	const docs_links = docs_links_context.get();
+
+	const hash = $derived(page.url.hash.slice(1));
+</script>
+
+<DocsList {expand_width} class="docs_page_links">
+	<h4 class="mb_sm">on this page</h4>
+	{#if sidebar}
+		<div class="sidebar_wrapper">{@render content()}</div>
+	{:else}
+		{@render content()}
+	{/if}
+</DocsList>
+
+{#snippet content()}
+	<nav aria-label="on this page" class="width_100">
+		<ul class="unstyled">
+			{#each docs_links.docs_links as item (item.id)}
+				<li
+					role="none"
+					transition:slide
+					class:pl_xl={item.depth === 2}
+					class:pl_xl2={item.depth === 3}
+					class:pl_xl3={item.depth >= 4}
+				>
+					<a
+						class="menu_item"
+						href="#{item.fragment}"
+						class:selected={item.fragment === hash}
+						class:highlighted={docs_links.fragments_onscreen.has(item.fragment)}
+						><div class="ellipsis">{item.text}</div></a
+					>
+				</li>
+			{/each}
+		</ul>
+	</nav>
+{/snippet}
+
+<style>
+	/* this is needed because `.docs_page_links` needs to be a block to collapse the vertical margin */
+	.sidebar_wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+</style>

package/dist/DocsPageLinks.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    sidebar?: boolean;
+    expand_width?: boolean;
+};
+declare const DocsPageLinks: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsPageLinks = ReturnType<typeof DocsPageLinks>;
+export default DocsPageLinks;
+//# sourceMappingURL=DocsPageLinks.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsPageLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsPageLinks.svelte"],"names":[],"mappings":"AASC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA2CH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/DocsPrimaryNav.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import {is_iframed} from '@fuzdev/fuz_util/dom.js';
+	import type {Snippet} from 'svelte';
+	import {scrollY} from 'svelte/reactivity/window';
+
+	import type {Library} from './library.svelte.js';
+	import Breadcrumb from './Breadcrumb.svelte';
+
+	const {
+		library,
+		breadcrumb_children,
+		children,
+	}: {
+		library: Library;
+		breadcrumb_children?: Snippet<[is_primary_nav: boolean]>;
+		children?: Snippet;
+	} = $props();
+
+	const iframed = is_iframed();
+	const enabled = !iframed;
+
+	const scrolled = $derived(scrollY.current && scrollY.current > 0);
+</script>
+
+{#if enabled}
+	<div class="docs_primary_nav" class:scrolled>
+		<div class="background" aria-hidden="true"></div>
+		<div class="content">
+			<nav aria-label="Primary nav">
+				<Breadcrumb>
+					{#if breadcrumb_children}
+						{@render breadcrumb_children(true)}
+					{:else}
+						{library.package_json.glyph ?? '🏠'}
+					{/if}
+				</Breadcrumb>
+			</nav>
+			{@render children?.()}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.docs_primary_nav {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background-color: var(--bg);
+		height: var(--docs_primary_nav_height);
+		transition: box-shadow var(--duration_2);
+		box-shadow: none;
+	}
+
+	.scrolled {
+		box-shadow: var(--shadow_bottom_xs)
+			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_1), transparent);
+	}
+
+	.background {
+		position: absolute;
+		z-index: -1;
+		width: 100%;
+		height: 100%;
+		background-color: var(--fg_1);
+	}
+
+	.content {
+		max-width: 1300px;
+		height: 100%;
+		margin: 0 auto;
+		display: flex;
+	}
+
+	nav {
+		--font_size: var(--font_size_xl);
+		height: 100%;
+		display: flex;
+		flex: 1;
+		padding-left: var(--space_md);
+	}
+
+	/* sync this breakpoint with `Docs` */
+	@media (max-width: 800px) {
+		nav {
+			--font_size: var(--font_size_lg);
+		}
+	}
+	@media (max-width: 550px) {
+		nav {
+			--font_size: var(--font_size_md);
+		}
+	}
+</style>

package/dist/DocsPrimaryNav.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Library } from './library.svelte.js';
+type $$ComponentProps = {
+    library: Library;
+    breadcrumb_children?: Snippet<[is_primary_nav: boolean]>;
+    children?: Snippet;
+};
+declare const DocsPrimaryNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsPrimaryNav = ReturnType<typeof DocsPrimaryNav>;
+export default DocsPrimaryNav;
+//# sourceMappingURL=DocsPrimaryNav.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsPrimaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsPrimaryNav.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,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2CH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/DocsSearch.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	let {
+		placeholder = 'search declarations and modules...',
+		total_count,
+		result_count,
+		search_query = $bindable(),
+		...rest
+	}: SvelteHTMLElements['input'] & {
+		placeholder?: string;
+		total_count: number;
+		result_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);
+</script>
+
+<label class="display_block position_relative">
+	<input {...rest} type="search" {placeholder} bind:value={search_query} />
+	{#if has_search}
+		<button
+			type="button"
+			class="plain icon_button position_absolute right_0 top_0"
+			onclick={() => {
+				search_query = '';
+			}}
+			title="clear search"
+			aria-label="clear search"
+		>
+			🗙
+		</button>
+	{/if}
+</label>
+
+<p>
+	{total_text}
+	{#if has_search && result_count !== undefined}
+		· {result_text}
+	{/if}
+</p>

package/dist/DocsSearch.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['input'] & {
+    placeholder?: string;
+    total_count: number;
+    result_count?: number;
+    search_query: string;
+};
+declare const DocsSearch: import("svelte").Component<$$ComponentProps, {}, "search_query">;
+type DocsSearch = ReturnType<typeof DocsSearch>;
+export default DocsSearch;
+//# sourceMappingURL=DocsSearch.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/DocsSecondaryNav.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import DocsMenu from './DocsMenu.svelte';
+	import {Tome} from './tome.js';
+
+	const {
+		tomes,
+		sidebar = true,
+	}: {
+		tomes: Array<Tome>;
+		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
+	} = $props();
+
+	const expand_width = $derived(!sidebar);
+</script>
+
+<aside class="docs_secondary_nav unstyled" class:sidebar>
+	<nav aria-label="Secondary nav">
+		<DocsMenu {tomes} {expand_width} />
+	</nav>
+</aside>
+
+<style>
+	.docs_secondary_nav {
+		/* TODO @many lots of duplicate code between `DocsSecondaryNav` and `DocsTertiaryNav` */
+		position: fixed;
+		left: 0;
+		top: var(--docs_primary_nav_height);
+		z-index: 1;
+		width: var(--docs_sidebar_width);
+		height: calc(100% - var(--docs_primary_nav_height));
+		padding: var(
+			--docs_secondary_nav_padding
+		); /* needed with `overflow: auto` to avoid cutting off outline */
+		margin-bottom: 0;
+		overflow: auto;
+		scrollbar-width: thin;
+		background-color: var(--fg_1);
+	}
+
+	.sidebar nav {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	/* sync this breakpoint with `Docs` */
+	@media (max-width: 800px) {
+		.docs_secondary_nav {
+			position: static;
+			background-color: initial;
+			align-items: initial;
+			overflow: initial;
+		}
+	}
+	/* TODO @many dialog navs  */
+	.docs_secondary_nav:not(.sidebar) {
+		position: static;
+		background-color: initial;
+		align-items: initial;
+		overflow: initial;
+		display: block; /* collapse margin */
+	}
+</style>