@fuzdev/fuz_ui 0.169.0

package/dist/Svg.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+	import {ensure_end} from '@fuzdev/fuz_util/string.js';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	export interface SvgData {
+		/**
+		 * Raw svg markup string that's inserted unsafely as a child of the `svg` element.
+		 * This is an escape hatch for non-`path` markup -
+		 * generally, you should instead use the `paths` property to avoid security/CSP implications.
+		 */
+		raw?: string | null;
+		/**
+		 * List of svg `path` attribute objects. The `d` attribute is required.
+		 */
+		paths?: Array<{d: string} & SvelteHTMLElements['path']> | null;
+		attrs?: SvelteHTMLElements['svg'] | null;
+		fill?: string | null;
+		width?: string | null;
+		height?: string | null;
+		label?: string | null;
+		/**
+		 * Defaults to `"0 0 100 100"`.
+		 */
+		viewBox?: string | null;
+	}
+</script>
+
+<script lang="ts">
+	const {
+		data,
+		fill,
+		size = 'var(--font_size, auto)',
+		width,
+		height,
+		label,
+		inline,
+		shrink = true,
+		attrs,
+	}: {
+		data: SvgData;
+		/**
+		 * Overrides `data.fill`.
+		 */
+		fill?: string | null;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
+		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
+		label?: string;
+		/**
+		 * Renders the SVG as an inline block with spacing appropriate for text. Defaults to `false`.
+		 */
+		inline?: boolean;
+		shrink?: boolean;
+		attrs?: SvelteHTMLElements['svg'];
+	} = $props();
+
+	const final_fill = $derived(fill ?? data.fill ?? 'var(--text_color, #000)'); // can be overridden by each path's `fill` attribute
+	const final_width = $derived(width ?? size); // TODO @many default value? `100%` or omitted or something else?
+	const final_height = $derived(height ?? size); // TODO @many default value? `100%` or omitted or something else?
+
+	// merge `style` so users don't accidentally clobber any style data - maybe support other attrs or somehow clean this up?
+	const style = $derived(
+		data.attrs?.style && attrs?.style
+			? ensure_end(data.attrs.style, ';') + ' ' + attrs.style
+			: (data.attrs?.style ?? attrs?.style),
+	);
+
+	// TODO dont use @html
+</script>
+
+<svg
+	viewBox={data.viewBox ?? '0 0 100 100'}
+	{...data.attrs}
+	{...attrs}
+	aria-label={label ?? data.label}
+	class:display_inline_block={inline}
+	class:position_relative={inline}
+	style:width={final_width}
+	style:height={final_height}
+	style:top={inline ? '0.1em' : undefined}
+	style:flex-shrink={shrink ? 1 : 0}
+	{style}
+>
+	{#if data.raw}{@html data.raw}{/if}<!-- eslint-disable-line svelte/no-at-html-tags -->
+	{#if data.paths}
+		{#each data.paths as path (path)}
+			<path fill={final_fill} {...path} />
+		{/each}
+	{/if}
+</svg>

package/dist/Svg.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface SvgData {
+    /**
+     * Raw svg markup string that's inserted unsafely as a child of the `svg` element.
+     * This is an escape hatch for non-`path` markup -
+     * generally, you should instead use the `paths` property to avoid security/CSP implications.
+     */
+    raw?: string | null;
+    /**
+     * List of svg `path` attribute objects. The `d` attribute is required.
+     */
+    paths?: Array<{
+        d: string;
+    } & SvelteHTMLElements['path']> | null;
+    attrs?: SvelteHTMLElements['svg'] | null;
+    fill?: string | null;
+    width?: string | null;
+    height?: string | null;
+    label?: string | null;
+    /**
+     * Defaults to `"0 0 100 100"`.
+     */
+    viewBox?: string | null;
+}
+type $$ComponentProps = {
+    data: SvgData;
+    /**
+     * Overrides `data.fill`.
+     */
+    fill?: string | null;
+    /**
+     * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+     */
+    size?: string;
+    /**
+     * Sets the `width` of the svg. Overrides `size`.
+     */
+    width?: string;
+    /**
+     * Sets the `height` of the svg. Overrides `size`.
+     */
+    height?: string;
+    label?: string;
+    /**
+     * Renders the SVG as an inline block with spacing appropriate for text. Defaults to `false`.
+     */
+    inline?: boolean;
+    shrink?: boolean;
+    attrs?: SvelteHTMLElements['svg'];
+};
+declare const Svg: import("svelte").Component<$$ComponentProps, {}, "">;
+type Svg = ReturnType<typeof Svg>;
+export default Svg;
+//# sourceMappingURL=Svg.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Svg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Svg.svelte"],"names":[],"mappings":"AAIC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,OAAO;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAClC,CAAC;AAyCH,QAAA,MAAM,GAAG,sDAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/Teleport.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import {onDestroy, type Snippet} from 'svelte';
+
+	const {
+		to,
+		onmove,
+		children,
+	}: {
+		/**
+		 * Defaults to `undefined` to lessen friction with SSR.
+		 * We may want to change this to optionally accept a string selector,
+		 * but that didn't seem to be the best API for the `Dialog`.
+		 */
+		to?: HTMLElement | undefined | null;
+		onmove?: (el: HTMLElement, to: HTMLElement) => void;
+		children: Snippet;
+	} = $props();
+
+	let el: HTMLElement | undefined | null = $state();
+
+	$effect(() => {
+		if (el && to) {
+			move(el, to);
+		}
+	});
+
+	let moved = $state(false);
+
+	const move = (el: HTMLElement, to: HTMLElement): void => {
+		moved = true;
+		to.appendChild(el);
+		onmove?.(el, to);
+	};
+
+	onDestroy(() => {
+		el?.parentNode?.removeChild(el);
+	});
+</script>
+
+<div class="teleport" bind:this={el} hidden={!moved}>
+	{@render children()}
+</div>
+
+<style>
+	.teleport {
+		display: contents;
+	}
+</style>

package/dist/Teleport.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Defaults to `undefined` to lessen friction with SSR.
+     * We may want to change this to optionally accept a string selector,
+     * but that didn't seem to be the best API for the `Dialog`.
+     */
+    to?: HTMLElement | undefined | null;
+    onmove?: (el: HTMLElement, to: HTMLElement) => void;
+    children: Snippet;
+};
+declare const Teleport: import("svelte").Component<$$ComponentProps, {}, "">;
+type Teleport = ReturnType<typeof Teleport>;
+export default Teleport;
+//# sourceMappingURL=Teleport.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Teleport.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Teleport.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACxB;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAuCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ThemeInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import {swallow} from '@fuzdev/fuz_util/dom.js';
+	import type {Theme} from '@fuzdev/fuz_css/theme.js';
+	import {default_themes} from '@fuzdev/fuz_css/themes.js';
+
+	import {themer_context} from './themer.svelte.js';
+
+	const {
+		selected_theme = themer_context.get(),
+		themes = default_themes,
+		enable_editing = false,
+		select = (theme) => {
+			selected_theme.theme = theme;
+		},
+		onselect,
+		onedit,
+	}: {
+		selected_theme?: {theme: Theme};
+		themes?: Array<Theme>;
+		enable_editing?: boolean;
+		select?: ((theme: Theme) => void | boolean) | null;
+		onselect?: (theme: Theme) => void;
+		onedit?: (theme: Theme) => void;
+	} = $props();
+</script>
+
+<menu class="theme_input unstyled">
+	{#each themes as theme (theme.name)}
+		<!-- TODO @many proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
+		{@const selected = theme.name === selected_theme.theme.name}
+		<li class="row" role="none">
+			<button
+				type="button"
+				class="theme_button color_a"
+				role="menuitemradio"
+				aria-label="{theme.name} theme"
+				aria-checked={selected}
+				class:selected
+				onclick={(e) => {
+					swallow(e);
+					if (select?.(theme) !== false) {
+						onselect?.(theme);
+					}
+				}}
+			>
+				{theme.name}
+			</button>
+			{#if enable_editing}
+				<button
+					type="button"
+					class="icon_button plain ml_sm"
+					onclick={(e) => {
+						swallow(e);
+						onedit?.(theme);
+					}}>•••</button
+				>
+			{/if}
+		</li>
+	{/each}
+</menu>
+
+<style>
+	.theme_button {
+		flex: 1;
+		border-radius: 0;
+	}
+	li:first-child .theme_button {
+		border-top-left-radius: var(--border_radius_sm);
+		border-top-right-radius: var(--border_radius_sm);
+	}
+	li:last-child .theme_button {
+		border-bottom-left-radius: var(--border_radius_sm);
+		border-bottom-right-radius: var(--border_radius_sm);
+	}
+</style>

package/dist/ThemeInput.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Theme } from '@fuzdev/fuz_css/theme.js';
+type $$ComponentProps = {
+    selected_theme?: {
+        theme: Theme;
+    };
+    themes?: Array<Theme>;
+    enable_editing?: boolean;
+    select?: ((theme: Theme) => void | boolean) | null;
+    onselect?: (theme: Theme) => void;
+    onedit?: (theme: Theme) => void;
+};
+declare const ThemeInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeInput = ReturnType<typeof ThemeInput>;
+export default ThemeInput;
+//# sourceMappingURL=ThemeInput.svelte.d.ts.map

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

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

package/dist/Themed.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+	let mounted = false;
+</script>
+
+<script lang="ts">
+	import {onMount, type Snippet} from 'svelte';
+	import {render_theme_style, type Theme} from '@fuzdev/fuz_css/theme.js';
+	import {DEFAULT_THEME} from '@fuzdev/fuz_css/themes.js';
+	import {DEV} from 'esm-env';
+
+	import {
+		load_color_scheme as default_load_color_scheme,
+		save_color_scheme as default_save_color_scheme,
+		sync_color_scheme as default_sync_color_scheme,
+		save_theme as default_save_theme,
+		load_theme as default_load_theme,
+		themer_context,
+		Themer,
+	} from './themer.svelte.js';
+	import {effect_with_count} from './rune_helpers.svelte.js';
+
+	const {
+		sync_color_scheme = default_sync_color_scheme,
+		load_color_scheme = default_load_color_scheme,
+		save_color_scheme = default_save_color_scheme,
+		load_theme = default_load_theme,
+		save_theme = default_save_theme,
+		theme_fallback,
+		themer = new Themer(load_theme(theme_fallback), load_color_scheme()),
+		children,
+	}: {
+		sync_color_scheme?: typeof default_sync_color_scheme;
+		load_color_scheme?: typeof default_load_color_scheme;
+		save_color_scheme?: typeof default_save_color_scheme;
+		load_theme?: typeof default_load_theme;
+		save_theme?: typeof default_save_theme;
+		theme_fallback?: Theme | undefined;
+		/**
+		 * A reactive class containing the selected theme and color scheme.
+		 * Defaults to the first default theme.
+		 * The class reference is not reactive
+		 * because it's set in context without a wrapper, use `{#key theme}` if it changes.
+		 * @nonreactive
+		 */
+		themer?: Themer;
+		children: Snippet<[themer: Themer, style: string | null, theme_style_html: string | null]>;
+	} = $props();
+
+	// In dev mode only, warn about misuse of the singleton `Themed`.
+	if (DEV) {
+		onMount(() => {
+			if (mounted) {
+				console.warn('more than one Themed was mounted'); // eslint-disable-line no-console
+			}
+			mounted = true;
+			return () => {
+				mounted = false;
+			};
+		});
+	}
+
+	/**
+	 * `Themed` adds global color scheme and theme support to the page.
+	 * It also sets in the Svelte context a reactive `themer` containing the theme and color scheme.
+	 */
+
+	themer_context.set(themer);
+
+	const selected_theme_name = $derived(themer.theme.name);
+	const style = $derived(
+		selected_theme_name === DEFAULT_THEME.name // TODO @many proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check
+			? null
+			: render_theme_style(themer.theme),
+	);
+	const theme_style_html = $derived(style ? `<style>${style}</style>` : null);
+
+	effect_with_count((count) => {
+		const v = themer.color_scheme;
+		if (count === 1) return;
+		sync_color_scheme(v);
+	});
+	effect_with_count((count) => {
+		const v = themer.color_scheme;
+		if (count === 1) return;
+		save_color_scheme(v); // helper may change, so is separate from `sync_color_scheme`
+	});
+	effect_with_count((count) => {
+		const v = themer.theme;
+		if (count === 1) return;
+		save_theme(v);
+	});
+
+	// TODO @many @html making me nervous
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+<svelte:head>
+	{#if theme_style_html}{@html theme_style_html}{/if}
+</svelte:head>
+
+{@render children(themer, style, theme_style_html)}

package/dist/Themed.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Themed.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Themed.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAU,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAqB,KAAK,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAIxE,OAAO,EACL,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,UAAU,IAAI,kBAAkB,EAChC,UAAU,IAAI,kBAAkB,EAEhC,MAAM,EACN,MAAM,oBAAoB,CAAC;AAG5B,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;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CAC3F,CAAC;AA+EH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/TomeContent.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import {page} from '$app/state';
+	import {resolve} from '$app/paths';
+
+	import TomeHeader from './TomeHeader.svelte';
+	import {tome_context, type Tome} from './tome.js';
+	import {DOCS_PATH_DEFAULT, docs_links_context, docs_slugify} from './docs_helpers.svelte.js';
+	import {intersect} from './intersect.svelte.js';
+
+	const {
+		tome,
+		docs_path = DOCS_PATH_DEFAULT,
+		header,
+		children,
+	}: {
+		tome: Tome;
+		docs_path?: string;
+		header?: Snippet;
+		children: Snippet;
+	} = $props();
+
+	const docs_links = docs_links_context.get();
+
+	tome_context.set(tome); // TODO make reactive?
+
+	const fragment = docs_slugify(tome.name);
+
+	const at_root = $derived(page.url.pathname === resolve(docs_path as any));
+</script>
+
+<section
+	class="tome_content width_upto_md mb_xl9"
+	{@attach intersect(() =>
+		at_root
+			? ({intersecting}) => {
+					if (intersecting) {
+						docs_links.fragments_onscreen.add(fragment);
+					} else {
+						docs_links.fragments_onscreen.delete(fragment);
+					}
+				}
+			: null,
+	)}
+>
+	<header
+		class="mb_xl3 position_sticky top_0"
+		{@attach intersect(() =>
+			at_root
+				? null
+				: ({intersecting}) => {
+						if (intersecting) {
+							docs_links.fragments_onscreen.add(fragment);
+						} else {
+							docs_links.fragments_onscreen.delete(fragment);
+						}
+					},
+		)}
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<TomeHeader />
+		{/if}
+	</header>
+	{@render children()}
+</section>

package/dist/TomeContent.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type Tome } from './tome.js';
+type $$ComponentProps = {
+    tome: Tome;
+    docs_path?: string;
+    header?: Snippet;
+    children: Snippet;
+};
+declare const TomeContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type TomeContent = ReturnType<typeof TomeContent>;
+export default TomeContent;
+//# sourceMappingURL=TomeContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TomeContent.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeContent.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,EAAe,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAIjD,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA4DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/TomeHeader.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import {onDestroy} from 'svelte';
+	import {DEV} from 'esm-env';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {tome_context} from './tome.js';
+	import Hashlink from './Hashlink.svelte';
+	import {docs_links_context, docs_slugify, to_docs_path_info} from './docs_helpers.svelte.js';
+
+	// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+	const props: SvelteHTMLElements['h1'] | SvelteHTMLElements['h2'] = $props();
+
+	const tome = tome_context.get(); // TODO make reactive?
+	if (DEV && !tome) throw Error('TomeHeader expects a tome in context'); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+
+	const docs_links = docs_links_context.get();
+
+	const fragment = docs_slugify(tome.name);
+	const path_slug = docs_slugify(tome.name);
+	const id = docs_links.add(fragment, tome.name, page.url.pathname);
+
+	onDestroy(() => {
+		docs_links.remove(id);
+	});
+
+	const {path, path_is_selected} = $derived(to_docs_path_info(path_slug, page.url.pathname));
+</script>
+
+<svelte:element this={path_is_selected ? 'h1' : 'h2'} {...props} class="tome_header">
+	{#if path_is_selected}
+		{@render content(tome.name)}
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a href={path}>{@render content(tome.name)}</a>
+	{/if}
+	<Hashlink {fragment} />
+</svelte:element>
+
+{#snippet content(name: string)}
+	{name}
+{/snippet}
+
+<style>
+	.tome_header {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: var(--space_xl4);
+	}
+	/* TODO @many how can this be done composably? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
+	.tome_header:hover :global(.hashlink) {
+		opacity: 1;
+	}
+</style>

package/dist/TomeHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const TomeHeader: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type TomeHeader = ReturnType<typeof TomeHeader>;
+export default TomeHeader;
+//# sourceMappingURL=TomeHeader.svelte.d.ts.map

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

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

package/dist/TomeLink.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import {DEV} from 'esm-env';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {get_tome_by_name, to_tome_pathname} from './tome.js';
+	import {DOCS_PATH_DEFAULT} from './docs_helpers.svelte.js';
+
+	const {
+		name,
+		docs_path = DOCS_PATH_DEFAULT,
+		hash,
+		children,
+		class: class_prop = 'chip',
+		...rest
+	}: SvelteHTMLElements['a'] & {
+		name: string; // TODO type, generate from `tomes`?
+		docs_path?: string;
+		hash?: string;
+	} = $props();
+
+	if (DEV) get_tome_by_name(name); // throws if not found
+
+	// TODO add contextmenu behavior
+</script>
+
+<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+<a {...rest} class="tome_link {class_prop}" href={to_tome_pathname(name, docs_path, hash)}
+	>{#if children}{@render children()}{:else}{name}{/if}</a
+>

package/dist/TomeLink.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TomeLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AA2BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}