shelving 1.255.0 → 1.256.0

package/ui/style/Gap.module.css

@@ -2,29 +2,69 @@
 @import "Space.module.css";
 
 @layer variants {
-	/* Gap variants — sets `gap` directly. Used by flex/grid layouts and by Lists/Definitions for the spacing between their items. */
-	.none {
+	/* Named. */
+	.gap-none {
 		gap: 0;
 	}
-	.xxsmall {
+	.gap-paragraph {
+		gap: var(--space-paragraph);
+	}
+	.gap-section {
+		gap: var(--space-section);
+	}
+
+	/* Scale. */
+	.gap-xxsmall {
 		gap: var(--space-xxsmall);
 	}
-	.xsmall {
+	.gap-xsmall {
 		gap: var(--space-xsmall);
 	}
-	.small {
+	.gap-small {
 		gap: var(--space-small);
 	}
-	.normal {
+	.gap-normal {
 		gap: var(--space-normal);
 	}
-	.large {
+	.gap-large {
 		gap: var(--space-large);
 	}
-	.xlarge {
+	.gap-xlarge {
 		gap: var(--space-xlarge);
 	}
-	.xxlarge {
+	.gap-xxlarge {
 		gap: var(--space-xxlarge);
 	}
+
+	/* Numeric. */
+	.gap-1x {
+		gap: calc(var(--space-normal) * 1);
+	}
+	.gap-2x {
+		gap: calc(var(--space-normal) * 2);
+	}
+	.gap-3x {
+		gap: calc(var(--space-normal) * 3);
+	}
+	.gap-4x {
+		gap: calc(var(--space-normal) * 4);
+	}
+	.gap-5x {
+		gap: calc(var(--space-normal) * 5);
+	}
+	.gap-6x {
+		gap: calc(var(--space-normal) * 6);
+	}
+	.gap-7x {
+		gap: calc(var(--space-normal) * 7);
+	}
+	.gap-8x {
+		gap: calc(var(--space-normal) * 8);
+	}
+	.gap-9x {
+		gap: calc(var(--space-normal) * 9);
+	}
+	.gap-10x {
+		gap: calc(var(--space-normal) * 10);
+	}
 }

package/ui/style/Gap.tsx

@@ -1,12 +1,6 @@
 import { getModuleClass } from "../util/css.js";
 import GAP_CSS from "./Gap.module.css";
-
-/**
- * Allowed values for gap spacing for components that support `GapVariants`
- *
- * @see https://shelving.cc/ui/GapValue
- */
-export type GapValue = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
+import type { SpaceValue } from "./Space.js";
 
 /**
  * Variant props for the gap between a component's children, e.g. `gap="large"`.
@@ -15,7 +9,7 @@ export type GapValue = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "lar
  */
 export interface GapVariants {
 	/** Gap between child elements. */
-	gap?: GapValue | undefined;
+	gap?: SpaceValue | undefined;
 }
 
 /**
@@ -27,5 +21,5 @@ export interface GapVariants {
  * @see https://shelving.cc/ui/getGapClass
  */
 export function getGapClass({ gap }: GapVariants): string | undefined {
-	return gap && getModuleClass(GAP_CSS, gap);
+	return gap && getModuleClass(GAP_CSS, `gap-${gap}`);
 }

package/ui/style/Indent.module.css

@@ -2,10 +2,18 @@
 @import "Space.module.css";
 
 @layer variants {
-	/* Inline-padding ("indent") variants — left + right padding to keep content off the edges. */
+	/* Named. */
 	.indent-none {
 		padding-inline: 0;
 	}
+	.indent-paragraph {
+		padding-inline: var(--space-paragraph);
+	}
+	.indent-section {
+		padding-inline: var(--space-section);
+	}
+
+	/* Scale. */
 	.indent-xxsmall {
 		padding-inline: var(--space-xxsmall);
 	}
@@ -28,7 +36,7 @@
 		padding-inline: var(--space-xxlarge);
 	}
 
-	/* Numeric inline-padding multiples of `--space-normal` (`1x` … `10x`). */
+	/* Numeric. */
 	.indent-1x {
 		padding-inline: calc(var(--space-normal) * 1);
 	}

package/ui/style/Padding.d.ts

@@ -1,9 +1,4 @@
-/**
- * Allowed values for padding for components that support `PaddingVariants`
- *
- * @see https://shelving.cc/ui/PaddingVariant
- */
-export type PaddingVariant = "none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x";
+import type { SpaceValue } from "./Space.js";
 /**
  * Variant props for the block-padding (top + bottom) of a component, e.g. `padding="large"`.
  *
@@ -11,7 +6,7 @@ export type PaddingVariant = "none" | "xxsmall" | "xsmall" | "small" | "normal"
  */
 export interface PaddingVariants {
     /** Block-padding (top + bottom) of the element. */
-    padding?: PaddingVariant | undefined;
+    padding?: SpaceValue | undefined;
 }
 /**
  * Get the block-padding class for a component from its `padding` variant prop.

package/ui/style/Padding.module.css

@@ -2,10 +2,18 @@
 @import "Space.module.css";
 
 @layer variants {
-	/* Block-padding variants. */
+	/* Named. */
 	.padding-none {
 		padding-block: 0;
 	}
+	.padding-paragraph {
+		padding-block: var(--space-paragraph);
+	}
+	.padding-section {
+		padding-block: var(--space-section);
+	}
+
+	/* Scale. */
 	.padding-xxsmall {
 		padding-block: var(--space-xxsmall);
 	}
@@ -28,7 +36,7 @@
 		padding-block: var(--space-xxlarge);
 	}
 
-	/* Numeric block-padding multiples of `--space-normal` (`1x` … `10x`). */
+	/* Numeric. */
 	.padding-1x {
 		padding-block: calc(var(--space-normal) * 1);
 	}

package/ui/style/Padding.tsx

@@ -1,30 +1,6 @@
 import { getModuleClass } from "../util/css.js";
 import PADDING_CSS from "./Padding.module.css";
-
-/**
- * Allowed values for padding for components that support `PaddingVariants`
- *
- * @see https://shelving.cc/ui/PaddingVariant
- */
-export type PaddingVariant =
-	| "none"
-	| "xxsmall"
-	| "xsmall"
-	| "small"
-	| "normal"
-	| "large"
-	| "xlarge"
-	| "xxlarge"
-	| "1x"
-	| "2x"
-	| "3x"
-	| "4x"
-	| "5x"
-	| "6x"
-	| "7x"
-	| "8x"
-	| "9x"
-	| "10x";
+import type { SpaceValue } from "./Space.js";
 
 /**
  * Variant props for the block-padding (top + bottom) of a component, e.g. `padding="large"`.
@@ -33,7 +9,7 @@ export type PaddingVariant =
  */
 export interface PaddingVariants {
 	/** Block-padding (top + bottom) of the element. */
-	padding?: PaddingVariant | undefined;
+	padding?: SpaceValue | undefined;
 }
 
 /**

package/ui/style/Space.module.css

@@ -18,10 +18,18 @@
 }
 
 @layer variants {
-	/* Block-space variants — opt-in margin-block modifiers for any block-level component. */
+	/* Named. */
 	.space-none {
 		margin-block: 0;
 	}
+	.space-paragraph {
+		margin-block: var(--space-paragraph);
+	}
+	.space-section {
+		margin-block: var(--space-section);
+	}
+
+	/* Scale. */
 	.space-xxsmall {
 		margin-block: var(--space-xxsmall);
 	}
@@ -44,7 +52,7 @@
 		margin-block: var(--space-xxlarge);
 	}
 
-	/* Numeric block-space multiples of `--space-normal` (`1x` … `10x`). */
+	/* Numeric. */
 	.space-1x {
 		margin-block: calc(var(--space-normal) * 1);
 	}
@@ -75,11 +83,4 @@
 	.space-10x {
 		margin-block: calc(var(--space-normal) * 10);
 	}
-
-	.space-section {
-		margin-block: var(--space-section);
-	}
-	.space-paragraph {
-		margin-block: var(--space-paragraph);
-	}
 }

package/ui/tree/TreeApp.d.ts

@@ -11,8 +11,11 @@ export interface TreeAppProps extends PossibleMeta {
     /** The tree elements to display. */
     tree: TreeElement;
     /**
-     * Additional routes.
+     * Override the sidebar for the tree app.
+     * @default <TreeSidebar />
      */
+    sidebar?: ReactElement | undefined;
+    /** Additional routes. */
     routes?: Routes | undefined;
 }
 /**
@@ -21,7 +24,6 @@ export interface TreeAppProps extends PossibleMeta {
  * - Wraps `<App>` with error catching and a sidebar layout.
  * - The sidebar shows a `<TreeSidebar>` (root as a home link + a menu of its children).
  * - `/` renders the root via `<TreePage>`; `/**` catches every deeper path and feeds the full sub-path into `<TreePage>`.
- * - URLs that don't match a tree element fall through to a `<Router>` carrying the built-in `<TreeIndexPage>` (`/all`) plus any extra `routes`.
  * - Element rendering uses the default mappings on `<TreePage>`, `<TreeMenu>`, `<TreeCards>`.
  *   Override by wrapping with `<TreePageMapping>`, `<TreeMenuMapping>`, or `<TreeCardMapping>`.
  *
@@ -30,4 +32,4 @@ export interface TreeAppProps extends PossibleMeta {
  * @example <TreeApp tree={tree} title="Docs" />
  * @see https://shelving.cc/ui/TreeApp
  */
-export declare function TreeApp({ tree, routes: extraRoutes, ...meta }: TreeAppProps): ReactElement;
+export declare function TreeApp({ tree, routes, sidebar, ...meta }: TreeAppProps): ReactElement;

package/ui/tree/TreeApp.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { App } from "../app/App.js";
 import { SidebarLayout } from "../layout/SidebarLayout.js";
 import { PageCatcher } from "../misc/Catcher.js";
+import { Navigation } from "../router/Navigation.js";
 import { Router } from "../router/Router.js";
-import { TREE_INDEX_PATH, TreeIndexPage } from "./TreeIndexPage.js";
 import { TreeRouter } from "./TreeRouter.js";
 import { TreeSidebar } from "./TreeSidebar.js";
 /**
@@ -12,7 +12,6 @@ import { TreeSidebar } from "./TreeSidebar.js";
  * - Wraps `<App>` with error catching and a sidebar layout.
  * - The sidebar shows a `<TreeSidebar>` (root as a home link + a menu of its children).
  * - `/` renders the root via `<TreePage>`; `/**` catches every deeper path and feeds the full sub-path into `<TreePage>`.
- * - URLs that don't match a tree element fall through to a `<Router>` carrying the built-in `<TreeIndexPage>` (`/all`) plus any extra `routes`.
  * - Element rendering uses the default mappings on `<TreePage>`, `<TreeMenu>`, `<TreeCards>`.
  *   Override by wrapping with `<TreePageMapping>`, `<TreeMenuMapping>`, or `<TreeCardMapping>`.
  *
@@ -21,8 +20,7 @@ import { TreeSidebar } from "./TreeSidebar.js";
  * @example <TreeApp tree={tree} title="Docs" />
  * @see https://shelving.cc/ui/TreeApp
  */
-export function TreeApp({ tree, routes: extraRoutes, ...meta }) {
-    // URLs that don't resolve to a tree element fall through to this router: the built-in index page plus any extra routes.
-    const fallback = _jsx(Router, { routes: { [TREE_INDEX_PATH]: TreeIndexPage, ...extraRoutes } });
-    return (_jsx(App, { ...meta, children: _jsx(PageCatcher, { children: _jsx(SidebarLayout, { sidebar: _jsx(TreeSidebar, { tree: tree }), children: _jsx(TreeRouter, { tree: tree, fallback: fallback }) }) }) }));
+export function TreeApp({ tree, routes, sidebar = _jsx(TreeSidebar, { tree: tree }), ...meta }) {
+    const fallback = routes && _jsx(Router, { routes: routes });
+    return (_jsx(App, { ...meta, children: _jsx(Navigation, { children: _jsx(PageCatcher, { children: _jsx(SidebarLayout, { sidebar: sidebar, children: _jsx(TreeRouter, { tree: tree, fallback: fallback }) }) }) }) }));
 }

package/ui/tree/TreeApp.tsx

@@ -3,10 +3,10 @@ import type { TreeElement } from "../../util/index.js";
 import { App } from "../app/App.js";
 import { SidebarLayout } from "../layout/SidebarLayout.js";
 import { PageCatcher } from "../misc/Catcher.js";
+import { Navigation } from "../router/Navigation.js";
 import { Router } from "../router/Router.js";
 import type { Routes } from "../router/Routes.js";
 import type { PossibleMeta } from "../util/index.js";
-import { TREE_INDEX_PATH, TreeIndexPage } from "./TreeIndexPage.js";
 import { TreeRouter } from "./TreeRouter.js";
 import { TreeSidebar } from "./TreeSidebar.js";
 
@@ -19,8 +19,11 @@ export interface TreeAppProps extends PossibleMeta {
 	/** The tree elements to display. */
 	tree: TreeElement;
 	/**
-	 * Additional routes.
+	 * Override the sidebar for the tree app.
+	 * @default <TreeSidebar />
 	 */
+	sidebar?: ReactElement | undefined;
+	/** Additional routes. */
 	routes?: Routes | undefined;
 }
 
@@ -30,7 +33,6 @@ export interface TreeAppProps extends PossibleMeta {
  * - Wraps `<App>` with error catching and a sidebar layout.
  * - The sidebar shows a `<TreeSidebar>` (root as a home link + a menu of its children).
  * - `/` renders the root via `<TreePage>`; `/**` catches every deeper path and feeds the full sub-path into `<TreePage>`.
- * - URLs that don't match a tree element fall through to a `<Router>` carrying the built-in `<TreeIndexPage>` (`/all`) plus any extra `routes`.
  * - Element rendering uses the default mappings on `<TreePage>`, `<TreeMenu>`, `<TreeCards>`.
  *   Override by wrapping with `<TreePageMapping>`, `<TreeMenuMapping>`, or `<TreeCardMapping>`.
  *
@@ -39,16 +41,17 @@ export interface TreeAppProps extends PossibleMeta {
  * @example <TreeApp tree={tree} title="Docs" />
  * @see https://shelving.cc/ui/TreeApp
  */
-export function TreeApp({ tree, routes: extraRoutes, ...meta }: TreeAppProps): ReactElement {
-	// URLs that don't resolve to a tree element fall through to this router: the built-in index page plus any extra routes.
-	const fallback = <Router routes={{ [TREE_INDEX_PATH]: TreeIndexPage, ...extraRoutes }} />;
+export function TreeApp({ tree, routes, sidebar = <TreeSidebar tree={tree} />, ...meta }: TreeAppProps): ReactElement {
+	const fallback = routes && <Router routes={routes} />;
 	return (
 		<App {...meta}>
-			<PageCatcher>
-				<SidebarLayout sidebar={<TreeSidebar tree={tree} />}>
-					<TreeRouter tree={tree} fallback={fallback} />
-				</SidebarLayout>
-			</PageCatcher>
+			<Navigation>
+				<PageCatcher>
+					<SidebarLayout sidebar={sidebar}>
+						<TreeRouter tree={tree} fallback={fallback} />
+					</SidebarLayout>
+				</PageCatcher>
+			</Navigation>
 		</App>
 	);
 }

package/ui/tree/TreePage.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Block } from "../block/Block.js";
+import { Panel } from "../block/Panel.js";
 import { Prose } from "../block/Prose.js";
-import { Header, Section } from "../block/Section.js";
+import { Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "./TreeCards.js";
@@ -18,5 +19,5 @@ import { TreeMarkup } from "./TreeMarkup.js";
  * @see https://shelving.cc/ui/TreePage
  */
 export function TreePage({ title, name, description, content, children }) {
-    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { indent: "normal", children: [_jsx(Header, { children: _jsx(Title, { children: title ?? name }) }), _jsx(Section, { children: content && (_jsx(Prose, { children: _jsx(TreeMarkup, { children: content }) })) }), _jsx(Section, { children: _jsx(TreeCards, { children: children }) })] }) }));
+    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { children: [_jsx(Panel, { children: _jsx(Title, { center: true, children: title ?? name }) }), _jsxs(Block, { indent: "normal", padding: "section", children: [content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(TreeMarkup, { children: content }) }) })), _jsx(Section, { children: _jsx(TreeCards, { children: children }) })] })] }) }));
 }

package/ui/tree/TreePage.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
 import type { TreeElementProps } from "../../util/tree.js";
 import { Block } from "../block/Block.js";
+import { Panel } from "../block/Panel.js";
 import { Prose } from "../block/Prose.js";
-import { Header, Section } from "../block/Section.js";
+import { Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "./TreeCards.js";
@@ -22,20 +23,22 @@ import { TreeMarkup } from "./TreeMarkup.js";
 export function TreePage({ title, name, description, content, children }: TreeElementProps): ReactNode {
 	return (
 		<Page title={title ?? name} description={description}>
-			<Block indent="normal">
-				<Header>
-					<Title>{title ?? name}</Title>
-				</Header>
-				<Section>
+			<Block>
+				<Panel>
+					<Title center>{title ?? name}</Title>
+				</Panel>
+				<Block indent="normal" padding="section">
 					{content && (
-						<Prose>
-							<TreeMarkup>{content}</TreeMarkup>
-						</Prose>
+						<Section>
+							<Prose>
+								<TreeMarkup>{content}</TreeMarkup>
+							</Prose>
+						</Section>
 					)}
-				</Section>
-				<Section>
-					<TreeCards>{children}</TreeCards>
-				</Section>
+					<Section>
+						<TreeCards>{children}</TreeCards>
+					</Section>
+				</Block>
 			</Block>
 		</Page>
 	);

package/ui/tree/TreeSidebar.d.ts

@@ -1,12 +1,13 @@
 import { type ReactNode } from "react";
 import type { AbsolutePath } from "../../util/path.js";
 import { type TreeElement } from "../../util/tree.js";
+import type { OptionalChildProps } from "../util/index.js";
 /**
  * Props for the `TreeSidebar` component — the root tree element plus its URL path.
  *
  * @see https://shelving.cc/ui/TreeSidebarProps
  */
-export interface TreeSidebarProps {
+export interface TreeSidebarProps extends OptionalChildProps {
     /** Root element of the tree. */
     readonly tree: TreeElement;
     /** URL path of the root — defaults to `/`. Children are rendered with `path + their.name`. */
@@ -15,7 +16,6 @@ export interface TreeSidebarProps {
 /**
  * Sidebar built from a tree element, in three sections separated by dividers.
  *
- * - **Top:** a "Home" link to the root and an "All elements" link to the `<TreeIndexPage>` (`/all`).
  * - **Middle:** a `<TextInput>` search-as-you-type filter.
  * - **Bottom:** the root's children as a `<TreeMenuMapper>` — swapped for a flat ranked list of results (capped at 20) while the search holds a query.
  *
@@ -26,4 +26,4 @@ export interface TreeSidebarProps {
  * @example <TreeSidebar tree={tree} />
  * @see https://shelving.cc/ui/TreeSidebar
  */
-export declare function TreeSidebar({ tree, path }: TreeSidebarProps): ReactNode;
+export declare function TreeSidebar({ tree, path, children }: TreeSidebarProps): ReactNode;

package/ui/tree/TreeSidebar.js

@@ -5,12 +5,10 @@ import { flattenTree, searchTree } from "../../util/tree.js";
 import { Divider } from "../block/Divider.js";
 import { TextInput } from "../form/TextInput.js";
 import { Menu, MenuItem } from "../menu/Menu.js";
-import { TREE_INDEX_PATH } from "./TreeIndexPage.js";
 import { matchMenuElement, TreeMenuMapper } from "./TreeMenu.js";
 /**
  * Sidebar built from a tree element, in three sections separated by dividers.
  *
- * - **Top:** a "Home" link to the root and an "All elements" link to the `<TreeIndexPage>` (`/all`).
  * - **Middle:** a `<TextInput>` search-as-you-type filter.
  * - **Bottom:** the root's children as a `<TreeMenuMapper>` — swapped for a flat ranked list of results (capped at 20) while the search holds a query.
  *
@@ -21,11 +19,11 @@ import { matchMenuElement, TreeMenuMapper } from "./TreeMenu.js";
  * @example <TreeSidebar tree={tree} />
  * @see https://shelving.cc/ui/TreeSidebar
  */
-export function TreeSidebar({ tree, path = "/" }) {
+export function TreeSidebar({ tree, path = "/", children }) {
     const [query, setQuery] = useState("");
     const trimmed = query.trim();
     // Flatten once so search results carry a canonical `path` (and a unique `key`) for their links (the sidebar sits outside the router's `<TreeProvider>`).
     const root = useMemo(() => flattenTree(tree).get("/") ?? tree, [tree]);
     const results = trimmed ? searchTree(root, trimmed, { limit: 20 }) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs(Menu, { children: [_jsx(MenuItem, { href: path, children: "Home" }), _jsx(MenuItem, { href: TREE_INDEX_PATH, children: "All elements" })] }), _jsx(Divider, {}), _jsx(TextInput, { name: "search", title: "Search", placeholder: "Search\u2026", value: query, onValue: v => setQuery(v ?? "") }), _jsx(Divider, {}), _jsx(Menu, { children: results ? (results.map(el => (_jsx(MenuItem, { href: el.props.path ?? path, children: el.props.title ?? el.props.name }, el.key)))) : (_jsx(TreeMenuMapper, { path: path, children: filterElements(tree.props.children, matchMenuElement) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { children: _jsx(MenuItem, { href: path, children: "Home" }) }), children, _jsx(Divider, {}), _jsx(TextInput, { name: "search", title: "Search", placeholder: "Search\u2026", value: query, onValue: v => setQuery(v ?? "") }), _jsx(Divider, {}), _jsx(Menu, { children: results ? (results.map(el => (_jsx(MenuItem, { href: el.props.path ?? path, children: el.props.title ?? el.props.name }, el.key)))) : (_jsx(TreeMenuMapper, { path: path, children: filterElements(tree.props.children, matchMenuElement) })) })] }));
 }

package/ui/tree/TreeSidebar.tsx

@@ -5,7 +5,7 @@ import { flattenTree, searchTree, type TreeElement } from "../../util/tree.js";
 import { Divider } from "../block/Divider.js";
 import { TextInput } from "../form/TextInput.js";
 import { Menu, MenuItem } from "../menu/Menu.js";
-import { TREE_INDEX_PATH } from "./TreeIndexPage.js";
+import type { OptionalChildProps } from "../util/index.js";
 import { matchMenuElement, TreeMenuMapper } from "./TreeMenu.js";
 
 /**
@@ -13,7 +13,7 @@ import { matchMenuElement, TreeMenuMapper } from "./TreeMenu.js";
  *
  * @see https://shelving.cc/ui/TreeSidebarProps
  */
-export interface TreeSidebarProps {
+export interface TreeSidebarProps extends OptionalChildProps {
 	/** Root element of the tree. */
 	readonly tree: TreeElement;
 	/** URL path of the root — defaults to `/`. Children are rendered with `path + their.name`. */
@@ -23,7 +23,6 @@ export interface TreeSidebarProps {
 /**
  * Sidebar built from a tree element, in three sections separated by dividers.
  *
- * - **Top:** a "Home" link to the root and an "All elements" link to the `<TreeIndexPage>` (`/all`).
  * - **Middle:** a `<TextInput>` search-as-you-type filter.
  * - **Bottom:** the root's children as a `<TreeMenuMapper>` — swapped for a flat ranked list of results (capped at 20) while the search holds a query.
  *
@@ -34,7 +33,7 @@ export interface TreeSidebarProps {
  * @example <TreeSidebar tree={tree} />
  * @see https://shelving.cc/ui/TreeSidebar
  */
-export function TreeSidebar({ tree, path = "/" as AbsolutePath }: TreeSidebarProps): ReactNode {
+export function TreeSidebar({ tree, path = "/", children }: TreeSidebarProps): ReactNode {
 	const [query, setQuery] = useState("");
 	const trimmed = query.trim();
 
@@ -46,8 +45,8 @@ export function TreeSidebar({ tree, path = "/" as AbsolutePath }: TreeSidebarPro
 		<>
 			<Menu>
 				<MenuItem href={path}>Home</MenuItem>
-				<MenuItem href={TREE_INDEX_PATH}>All elements</MenuItem>
 			</Menu>
+			{children}
 			<Divider />
 			<TextInput name="search" title="Search" placeholder="Search…" value={query} onValue={v => setQuery(v ?? "")} />
 			<Divider />

package/ui/tree/index.d.ts

@@ -1,10 +1,10 @@
+export * from "../docs/DocumentationSearchPage.js";
 export * from "./TreeApp.js";
 export * from "./TreeBreadcrumbs.js";
 export * from "./TreeButton.js";
 export * from "./TreeCard.js";
 export * from "./TreeCards.js";
 export * from "./TreeContext.js";
-export * from "./TreeIndexPage.js";
 export * from "./TreeLink.js";
 export * from "./TreeMarkup.js";
 export * from "./TreeMenu.js";

package/ui/tree/index.js

@@ -1,10 +1,10 @@
+export * from "../docs/DocumentationSearchPage.js";
 export * from "./TreeApp.js";
 export * from "./TreeBreadcrumbs.js";
 export * from "./TreeButton.js";
 export * from "./TreeCard.js";
 export * from "./TreeCards.js";
 export * from "./TreeContext.js";
-export * from "./TreeIndexPage.js";
 export * from "./TreeLink.js";
 export * from "./TreeMarkup.js";
 export * from "./TreeMenu.js";

package/ui/tree/index.ts

@@ -1,10 +1,10 @@
+export * from "../docs/DocumentationSearchPage.js";
 export * from "./TreeApp.js";
 export * from "./TreeBreadcrumbs.js";
 export * from "./TreeButton.js";
 export * from "./TreeCard.js";
 export * from "./TreeCards.js";
 export * from "./TreeContext.js";
-export * from "./TreeIndexPage.js";
 export * from "./TreeLink.js";
 export * from "./TreeMarkup.js";
 export * from "./TreeMenu.js";

package/ui/docs/DocumentationHomePage.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import type { TreeElementProps } from "../../util/tree.js";
-/**
- * Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.
- * - The whole page sits in a single `color="red"` `<Block>`, so the hero panel, prose, and child cards all pick up the red tint.
- * - The hero is a `padding="5x"` `<Panel>` with the package name centred as a `<Title>`.
- * - Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.
- *
- * @kind component
- * @returns A `<Page>` with a coloured hero panel followed by the module listing.
- * @example <DocumentationHomePage {...root.props} />
- * @see https://shelving.cc/ui/DocumentationHomePage
- */
-export declare function DocumentationHomePage({ title, name, description, content, children }: TreeElementProps): ReactNode;

package/ui/docs/DocumentationHomePage.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Block } from "../block/Block.js";
-import { Panel } from "../block/Panel.js";
-import { Prose } from "../block/Prose.js";
-import { Section } from "../block/Section.js";
-import { Title } from "../block/Title.js";
-import { Page } from "../page/Page.js";
-import { TreeCards } from "../tree/TreeCards.js";
-import { TreeMarkup } from "../tree/TreeMarkup.js";
-/**
- * Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.
- * - The whole page sits in a single `color="red"` `<Block>`, so the hero panel, prose, and child cards all pick up the red tint.
- * - The hero is a `padding="5x"` `<Panel>` with the package name centred as a `<Title>`.
- * - Below the hero it renders any absorbed prose content, then the root's children (the modules) as a stack of cards.
- *
- * @kind component
- * @returns A `<Page>` with a coloured hero panel followed by the module listing.
- * @example <DocumentationHomePage {...root.props} />
- * @see https://shelving.cc/ui/DocumentationHomePage
- */
-export function DocumentationHomePage({ title, name, description, content, children }) {
-    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: "red", children: [_jsx(Panel, { padding: "5x", children: _jsx(Title, { center: true, children: title ?? name }) }), _jsxs(Block, { indent: "normal", children: [content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(TreeMarkup, { children: content }) }) })), _jsx(Section, { children: _jsx(TreeCards, { children: children }) })] })] }) }));
-}