@fuzdev/fuz_ui 0.169.0

package/dist/Details.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {slide} from 'svelte/transition';
+
+	// TODO it may be possible to cleanly add the transition with eager rendering by intercepting the open user action
+	// in this case, lazy rendering is probably the better default to retain `ctrl+f` functionality
+
+	/**
+	 * Like `details` but renders children lazily by default.
+	 */
+
+	let {
+		open = $bindable(),
+		eager,
+		summary_attrs,
+		summary,
+		children,
+		...rest
+	}: SvelteHTMLElements['details'] & {
+		open?: boolean;
+		/**
+		 * Children are lazily rendered by default,
+		 * enabling transitions and improving performance, sometimes significantly.
+		 * Pass `true` to render children eagerly to gain
+		 * `ctrl+f` functionality while trading away the benefits.
+		 * Consider a `<details>` element instead of making this component eager.
+		 */
+		eager?: boolean;
+		summary: string | Snippet;
+		summary_attrs?: SvelteHTMLElements['summary'];
+		children: Snippet;
+	} = $props();
+
+	// TODO why doesn't the slide out work?
+</script>
+
+<details {...rest} bind:open>
+	<summary {...summary_attrs}>
+		{#if typeof summary === 'string'}
+			{summary}
+		{:else}
+			{@render summary()}
+		{/if}
+	</summary>
+	{#if eager}
+		{@render children()}
+	{:else if open}
+		<div transition:slide>{@render children()}</div>
+	{/if}
+</details>

package/dist/Details.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['details'] & {
+    open?: boolean;
+    /**
+     * Children are lazily rendered by default,
+     * enabling transitions and improving performance, sometimes significantly.
+     * Pass `true` to render children eagerly to gain
+     * `ctrl+f` functionality while trading away the benefits.
+     * Consider a `<details>` element instead of making this component eager.
+     */
+    eager?: boolean;
+    summary: string | Snippet;
+    summary_attrs?: SvelteHTMLElements['summary'];
+    children: Snippet;
+};
+declare const Details: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Details = ReturnType<typeof Details>;
+export default Details;
+//# sourceMappingURL=Details.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Details.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA0CH,QAAA,MAAM,OAAO,0DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/Dialog.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import {is_editable, swallow} from '@fuzdev/fuz_util/dom.js';
+	import {wait} from '@fuzdev/fuz_util/async.js';
+
+	import Teleport from './Teleport.svelte';
+	import type {DialogLayout} from './dialog.js';
+
+	// TODO use `<dialog>` here instead of `Teleport`
+	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+
+	/*
+
+	This component is a singleton that mounts to a #dialog container element added to the body,
+	using a `Teleport` component to avoid ancestor-caused style issues like overflow and z-index.
+	It adds `.dialog` to the body when mounted to fix scrolling behavior,
+	and adds padding to the body to adjust for any scrollbars.
+	It uses a CSS custom property for this to avoid the high complexity of trying to
+	correctly revert any preexisting values for overflow and padding on the body.
+	We don't want to add restrictions to what users can do to the body on their own!
+
+	*/
+
+	const {
+		container,
+		layout = 'centered',
+		index = 0,
+		active = true,
+		content_selector = '.pane',
+		onclose,
+		children,
+	}: {
+		// TODO maybe change this API away from an element to a selector? or remove the API completely?
+		container?: HTMLElement;
+		/**
+		 * @default 'centered'
+		 */
+		layout?: DialogLayout;
+		/**
+		 * index 0 is under 1 is under 2 etc -- the topmost dialog is the last in the array
+		 * @default 0
+		 */
+		index?: number;
+		/**
+		 * @default true
+		 */
+		active?: boolean;
+		/**
+		 * If provided, prevents clicks that would close the dialog
+		 * from bubbling past any elements matching this selector.
+		 * @default '.pane'
+		 */
+		content_selector?: string | null;
+		onclose?: () => void;
+		children: Snippet<[close: (e?: Event) => void]>;
+	} = $props();
+
+	const ROOT_SELECTOR = 'body'; // TODO make configurable
+	const CONTAINER_ID = 'fuz_dialog';
+
+	let container_el: HTMLElement | undefined = $state();
+	$effect(() => {
+		update_container_el(container);
+	});
+
+	const update_container_el = (container: HTMLElement | undefined): void => {
+		if (container) {
+			container_el = container;
+		} else {
+			const found = document.getElementById(CONTAINER_ID);
+			if (found) {
+				container_el = found;
+			} else {
+				const root_el = document.querySelector(ROOT_SELECTOR);
+				if (!root_el) {
+					throw Error(`Cannot find dialog root element with selector '${ROOT_SELECTOR}'`);
+				}
+				container_el = document.createElement('div');
+				container_el.id = CONTAINER_ID;
+				container_el.style.display = 'contents';
+				root_el.appendChild(container_el);
+			}
+		}
+	};
+
+	let dialog_el: HTMLElement | undefined = $state();
+	let content_el: HTMLElement | undefined = $state();
+
+	const close = (e?: Event) => {
+		if (e) swallow(e);
+		onclose?.();
+	};
+
+	// TODO hook into a ui input system
+	const on_window_keydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape' && !is_editable(e.target)) {
+			// apply hotkey only for the top-most dialog
+			const parent_el = dialog_el?.parentElement;
+			const parents = parent_el?.parentElement?.children;
+			const index = Array.prototype.indexOf.call(parents, parent_el);
+			if (!parents || index === parents.length - 1 || index === -1) {
+				close(e);
+			}
+		}
+	};
+
+	// The dialog isn't "ready" until the teleport moves it.
+	// Rendering the the dialog's children only once it's ready fixes things like `autofocus`.
+	let ready = $state(false);
+</script>
+
+<svelte:window onkeydown={active ? on_window_keydown : undefined} />
+
+<!--
+	The `tabindex` and `el.focus()` fix scrolling with the keyboard,
+	needed because SvelteKit puts `tabindex` on the body,
+	but there's more that needs to be done for accessibility, like focus capture.
+	For more see: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
+	and https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+-->
+<Teleport
+	to={container_el}
+	onmove={async () => {
+		await wait(); // TODO this is a hack to get animations working, `Teleport` now mounts synchronously?!
+		ready = true;
+		dialog_el?.focus(); // TODO make this more declarative? probably want to focus only after moving though, not on mount, which makes an action trickier
+	}}
+>
+	<div
+		class="dialog"
+		class:ready
+		class:layout_page={layout === 'page'}
+		role="dialog"
+		aria-modal="true"
+		bind:this={dialog_el}
+		tabindex="-1"
+		style:z-index={100 + index}
+	>
+		<div class="dialog_layout">
+			<div
+				class="dialog_wrapper"
+				role="none"
+				onmousedown={(e) => {
+					// Close if clicking outside `content_el` but inside the wrapper
+					const target = e.target as Element;
+					if (
+						content_el &&
+						(content_el === target ||
+							!content_el.contains(target) ||
+							(content_selector && !target.closest(content_selector)))
+					) {
+						close(e);
+					}
+				}}
+			>
+				<div class="dialog_bg" aria-hidden="true"></div>
+				<div class="dialog_content" bind:this={content_el}>
+					<!-- mount the content only after teleporting to avoid issues -->
+					{#if ready}{@render children(close)}{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</Teleport>
+
+<style>
+	.dialog {
+		--pane_shadow: var(--shadow_bottom_xl)
+			color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_5), transparent);
+		position: fixed;
+		inset: 0;
+		overflow: auto;
+		/* this simplifies the code a lot but doesn't prevent scrolling
+		the underlying content when the dialog doesn't overflow, even when `overflow: scroll`
+		TODO check if this behaves as desired after switching to use the `dialog` element */
+		overscroll-behavior: contain;
+	}
+
+	.dialog_wrapper {
+		position: relative; /* for the bg */
+		min-height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.layout_page .dialog_wrapper {
+		align-items: start;
+	}
+
+	.dialog_bg {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		opacity: 0;
+		transition: opacity var(--duration_3) ease;
+		background-color: var(--dialog_bg, var(--darken_6));
+	}
+	.ready .dialog_bg {
+		opacity: 1;
+	}
+
+	.dialog_layout {
+		height: 100%;
+		/* makes the content overflow downwards instead of upwards+downwards because it's centered */
+		max-height: 100%;
+	}
+
+	.dialog_content {
+		width: 100%;
+		transform: scale(0.99);
+		transition: transform var(--duration_1) ease;
+		padding: 40px;
+	}
+	.ready .dialog_content {
+		transform: scale(1);
+	}
+</style>

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { DialogLayout } from './dialog.js';
+type $$ComponentProps = {
+    container?: HTMLElement;
+    /**
+     * @default 'centered'
+     */
+    layout?: DialogLayout;
+    /**
+     * index 0 is under 1 is under 2 etc -- the topmost dialog is the last in the array
+     * @default 0
+     */
+    index?: number;
+    /**
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * If provided, prevents clicks that would close the dialog
+     * from bubbling past any elements matching this selector.
+     * @default '.pane'
+     */
+    content_selector?: string | null;
+    onclose?: () => void;
+    children: Snippet<[close: (e?: Event) => void]>;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;
+//# sourceMappingURL=Dialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Dialog.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAE7C,KAAK,gBAAgB,GAAI;IAExB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;CAChD,CAAC;AA4HH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Dialogs.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import type {DialogParams} from './dialog.js';
+	import Dialog from './Dialog.svelte';
+
+	// TODO this is experimental
+
+	const {
+		dialogs,
+		onclose,
+		children,
+	}: {
+		dialogs: Array<DialogParams>;
+		onclose?: () => void;
+		children?: Snippet<[dialog: DialogParams]>;
+	} = $props();
+</script>
+
+{#each dialogs as dialog, index (dialog)}<Dialog
+		{onclose}
+		{...dialog.dialog_props}
+		{index}
+		active={index === dialogs.length - 1}
+		>{#if children}{@render children(dialog)}{:else}<dialog.Component
+				{...dialog.props}
+			/>{/if}</Dialog
+	>{/each}

package/dist/Dialogs.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { DialogParams } from './dialog.js';
+type $$ComponentProps = {
+    dialogs: Array<DialogParams>;
+    onclose?: () => void;
+    children?: Snippet<[dialog: DialogParams]>;
+};
+declare const Dialogs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dialogs = ReturnType<typeof Dialogs>;
+export default Dialogs;
+//# sourceMappingURL=Dialogs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialogs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Dialogs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAG7C,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;CAC3C,CAAC;AAoBH,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/Docs.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import {onNavigate} from '$app/navigation';
+	import {innerWidth} from 'svelte/reactivity/window';
+	import {page} from '$app/state';
+
+	import type {Library} from './library.svelte.js';
+	import Breadcrumb from './Breadcrumb.svelte';
+	import {Tome, tomes_context} from './tome.js';
+	import DocsPrimaryNav from './DocsPrimaryNav.svelte';
+	import DocsSecondaryNav from './DocsSecondaryNav.svelte';
+	import DocsTertiaryNav from './DocsTertiaryNav.svelte';
+	import Dialog from './Dialog.svelte';
+	import DocsFooter from './DocsFooter.svelte';
+	import {DocsLinks, docs_links_context} from './docs_helpers.svelte.js';
+
+	const {
+		tomes,
+		library,
+		breadcrumb_children,
+		children,
+	}: {
+		tomes: Array<Tome>;
+		library: Library;
+		breadcrumb_children?: Snippet<[is_primary_nav: boolean]>;
+		children: Snippet;
+	} = $props();
+
+	// TODO this API is messy, inconsistent usage of props/context
+	const tomes_by_name = new Map(tomes.map((t) => [t.name, t]));
+	tomes_context.set(tomes_by_name);
+
+	// TODO @many dialog navs - this is messy to satisfy SSR with the current design that puts the secondary nav in a dialog
+	const TERTIARY_NAV_BREAKPOINT = 1000;
+	const SECONDARY_NAV_BREAKPOINT = 800;
+
+	const docs_menu_width = '180px';
+
+	let show_secondary_nav_dialog = $state(false);
+	const toggle_secondary_nav_dialog = (show?: boolean): void => {
+		show_secondary_nav_dialog = show ?? !show_secondary_nav_dialog;
+	};
+
+	docs_links_context.set(new DocsLinks());
+
+	onNavigate(() => {
+		show_secondary_nav_dialog = false;
+	});
+</script>
+
+<svelte:window onhashchange={() => (show_secondary_nav_dialog = false)} />
+
+<div class="docs" style:--docs_menu_width={docs_menu_width}>
+	<DocsPrimaryNav {library} {breadcrumb_children}>
+		<div class="nav_dialog_toggle">
+			<button class="plain" type="button" onclick={() => toggle_secondary_nav_dialog()}>menu</button
+			>
+		</div>
+	</DocsPrimaryNav>
+	<!-- TODO @many dialog navs -->
+	{#if !innerWidth.current || innerWidth.current > SECONDARY_NAV_BREAKPOINT}
+		<div class="secondary_nav_wrapper">
+			<DocsSecondaryNav {tomes} />
+		</div>
+	{/if}
+	<main>
+		{#key page.url.pathname}
+			{@render children()}
+		{/key}
+		<!-- TODO @many dialog navs -->
+		{#if !innerWidth.current || innerWidth.current > TERTIARY_NAV_BREAKPOINT}
+			<DocsTertiaryNav {tomes} {tomes_by_name} />
+		{/if}
+		<section class="box">
+			<DocsFooter {library}>
+				<div class="mb_xl5">
+					<Breadcrumb>
+						{#if breadcrumb_children}
+							{@render breadcrumb_children(false)}
+						{:else}
+							{library.package_json.glyph ?? '🏠'}
+						{/if}
+					</Breadcrumb>
+				</div>
+			</DocsFooter>
+		</section>
+	</main>
+</div>
+<!-- TODO @many dialog navs - instead of a dialog, probably use a popover (new component) -->
+<!-- TODO this is messy rendering `DocsSecondaryNav` twice to handle responsive states with SSR correctly -->
+{#if show_secondary_nav_dialog && innerWidth.current && innerWidth.current <= TERTIARY_NAV_BREAKPOINT}
+	<Dialog onclose={() => (show_secondary_nav_dialog = false)}>
+		<div class="pane" style:--docs_menu_width={docs_menu_width}>
+			<div class="p_xl pb_0">
+				<Breadcrumb>
+					{#if breadcrumb_children}
+						{@render breadcrumb_children(false)}
+					{:else}
+						{library.package_json.glyph ?? '🏠'}
+					{/if}
+				</Breadcrumb>
+			</div>
+			<div class="px_lg pb_xl">
+				<DocsSecondaryNav {tomes} sidebar={false} />
+				<DocsTertiaryNav {tomes} {tomes_by_name} sidebar={false} />
+			</div>
+		</div>
+	</Dialog>
+{/if}
+
+<style>
+	.docs {
+		--docs_primary_nav_height: 60px;
+		--docs_secondary_nav_padding: var(--space_md); /* also used by the tertiary nav */
+		--docs_content_padding: var(--space_xl5);
+		--docs_content_max_width: calc(var(--distance_md) + var(--docs_content_padding) * 2);
+		/* TODO this is broken for scrollbars, so we add `+ 10px` as a messy safeguard (there may be `+ 1px` needed for scaling issues too) */
+		--docs_sidebar_width: max(
+			calc(var(--docs_menu_width) + 10px + var(--docs_secondary_nav_padding) * 2),
+			calc((100% - var(--docs_content_max_width)) / 2)
+		);
+		display: contents;
+	}
+
+	main {
+		position: relative;
+		min-height: calc(100vh - var(--docs_primary_nav_height));
+		width: calc(100% - var(--docs_sidebar_width) * 2);
+		max-width: var(--docs_content_max_width);
+		padding: var(--docs_content_padding);
+		padding-top: 0;
+		margin: 0 auto;
+		overflow: hidden; /* TODO maybe heavy handed */
+	}
+
+	.secondary_nav_wrapper {
+		display: contents;
+	}
+
+	.nav_dialog_toggle {
+		display: none;
+	}
+	.nav_dialog_toggle button {
+		padding-left: var(--space_xl3);
+		padding-right: var(--space_xl3);
+		border-radius: 0;
+	}
+
+	/* sync this breakpoint with `DocsTertiaryNav` and `TomeSectionHeader` */
+	@media (max-width: 1000px) {
+		main {
+			--docs_content_padding: var(--space_xl);
+			/* handle the moved `DocsTertiaryNav` */
+			width: calc(100% - var(--docs_sidebar_width));
+			margin-right: 0;
+		}
+
+		.nav_dialog_toggle {
+			display: contents;
+		}
+	}
+
+	/* sync this breakpoint with `DocsPrimaryNav`, `DocsSecondaryNav`, and `TomeSectionHeader` */
+	@media (max-width: 800px) {
+		main {
+			/* handle the moved `DocsSecondaryNav` */
+			width: 100%;
+			margin-left: 0;
+		}
+
+		.secondary_nav_wrapper {
+			display: none;
+		}
+	}
+
+	section {
+		padding: var(--space_xl2);
+	}
+</style>

package/dist/Docs.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAC,IAAI,EAAgB,MAAM,WAAW,CAAC;AAQ7C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA6GH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/DocsContent.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import type {Library} from './library.svelte.js';
+	import type {Tome} from './tome.js';
+	import LibrarySummary from './LibrarySummary.svelte';
+
+	const {
+		tomes,
+		library,
+		repo_name,
+		content,
+		header,
+	}: {
+		tomes: Array<Tome>;
+		library: Library;
+		repo_name?: Snippet<[repo_name: string]>;
+		content?: Snippet;
+		header?: Snippet;
+	} = $props();
+</script>
+
+<div class="width_upto_md">
+	{#if header}
+		{@render header()}
+	{:else}
+		<div class="box mb_xl5">
+			<LibrarySummary {library} {repo_name} />
+		</div>
+	{/if}
+	<div>
+		{#if content}
+			{@render content()}
+		{:else}
+			{#each tomes as tome (tome)}
+				<tome.Component />
+			{/each}
+		{/if}
+	</div>
+</div>

package/dist/DocsContent.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { Library } from './library.svelte.js';
+import type { Tome } from './tome.js';
+type $$ComponentProps = {
+    tomes: Array<Tome>;
+    library: Library;
+    repo_name?: Snippet<[repo_name: string]>;
+    content?: Snippet;
+    header?: Snippet;
+};
+declare const DocsContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsContent = ReturnType<typeof DocsContent>;
+export default DocsContent;
+//# sourceMappingURL=DocsContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsContent.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsContent.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAGnC,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAsCH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}