shelving 1.242.1 → 1.243.0

package/extract/TypescriptExtractor.js

@@ -56,9 +56,9 @@ function _mergeOverloads(existing, next) {
         // Keep first content encountered; fill in if `existing` had none.
         content: a.content ?? b.content,
         // Append incoming entries, skipping any already present (by field identity), preserving insertion order.
-        // Identity: signatures/examples/throws by rendered string; params by (name, type, description, optional); returns by (type, description).
+        // Identity: signatures/examples/throws by rendered string; params by (name, type, description, optional, default); returns by (type, description).
         signatures: _concatUnique(a.signatures, b.signatures, s => s),
-        params: _concatUnique(a.params, b.params, p => `${p.name}\0${p.type}\0${p.description}\0${p.optional}`),
+        params: _concatUnique(a.params, b.params, p => `${p.name}\0${p.type}\0${p.description}\0${p.optional}\0${p.default}`),
         returns: _concatUnique(a.returns, b.returns, r => `${r.type}\0${r.description}`),
         throws: _concatUnique(a.throws, b.throws, t => `${t.type}\0${t.description}`),
         examples: _concatUnique(a.examples, b.examples, e => e.description ?? ""),
@@ -260,7 +260,8 @@ function _getParams(statement, source, jsDocParams) {
         const type = p.type?.getText(source);
         const optional = !!p.questionToken || !!p.initializer;
         const description = jsDocParams?.find(d => d.name === name)?.description;
-        return { name, type, description, optional };
+        const def = p.initializer?.getText(source);
+        return { name, type, description, optional, default: def };
     });
     return params.length ? params : undefined;
 }
@@ -279,9 +280,10 @@ function _getConstructorParams(statement, source, classJsDocParams) {
             const optional = !!p.questionToken || !!p.initializer;
             // Constructor-level `@param` wins over the class-level `@param` on collision.
             const description = ctorJsDocParams?.find(d => d.name === name)?.description ?? classJsDocParams?.find(d => d.name === name)?.description;
-            return { name, type, description, optional };
+            const def = p.initializer?.getText(source);
+            return { name, type, description, optional, default: def };
         });
-        params = _concatUnique(params, next, p => `${p.name}\0${p.type}\0${p.description}\0${p.optional}`);
+        params = _concatUnique(params, next, p => `${p.name}\0${p.type}\0${p.description}\0${p.optional}\0${p.default}`);
     }
     return params?.length ? params : undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.242.1",
+	"version": "1.243.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/README.md

@@ -10,7 +10,7 @@ The `ui` module exists so an app never hand-rolls the same form field, card, or
 
 A few conventions run through every component:
 
-- **Styling props are for one-off overrides.** Visual options are props on the component — enumerated props for the scales (`color="red"`, `size="large"`, `space="none"`) and boolean props for on/off variants (`<Button strong>`, `<Section narrow>`, `<Flex wrap>`). Each maps to a class in a CSS Module. Reach for them when a component needs to look different in *one place* — the way the docs site tints its accents purple — not as the way to dress a whole app. You never pass `style` or raw `className`.
+- **Styling props are for one-off overrides.** Visual options are props on the component — enumerated props for the scales (`color="red"`, `size="large"`, `space="none"`, `width="narrow"`) and boolean props for on/off variants (`<Button strong>`, `<Title center>`, `<Flex wrap>`). Each maps to a class in a CSS Module. Reach for them when a component needs to look different in *one place* — the way the docs site tints its accents purple — not as the way to dress a whole app. You never pass `style` or raw `className`.
 - **Composition.** Higher-level components — a `*Page`, a `*Card` — take their identity from library components like [`Card`](/ui/Card), [`Section`](/ui/Section), [`Button`](/ui/Button), and [`Tag`](/ui/Tag) rather than shipping their own styling.
 - **Sentence case.** Titles, headings, and button labels capitalise only the first word.
 - **Theme with CSS.** An app-wide custom look is a CSS file, not a wall of props. Write a `theme.css` that overrides the base design-token variables (and, where needed, per-component hooks) at `:root`, and import it after the library styles. The recommended workflow is to spend time tuning those variables to match your design — see [Theming](#theming) below.

package/ui/app/App.md

@@ -15,7 +15,7 @@ function HelloApp() {
   return (
     <App app="My app">
       <CenteredLayout>
-        <Section narrow>
+        <Section width="narrow">
           <Title>Hello</Title>
           <Paragraph>Welcome to the app.</Paragraph>
         </Section>

package/ui/block/Block.d.ts

@@ -34,7 +34,7 @@ export declare function getBlockClass(variants: BlockProps): string;
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).
  *
  * @example <Block><Paragraph>Hello</Paragraph></Block>
- * @example <Block as="aside" narrow><Paragraph>Sidebar</Paragraph></Block>
+ * @example <Block as="aside" width="narrow"><Paragraph>Sidebar</Paragraph></Block>
  * @see https://dhoulb.github.io/shelving/ui/block/Block/Block
  */
 export declare function Block({ as: Component, children, ...props }: BlockProps): ReactElement;

package/ui/block/Block.js

@@ -25,7 +25,7 @@ export function getBlockClass(variants) {
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).
  *
  * @example <Block><Paragraph>Hello</Paragraph></Block>
- * @example <Block as="aside" narrow><Paragraph>Sidebar</Paragraph></Block>
+ * @example <Block as="aside" width="narrow"><Paragraph>Sidebar</Paragraph></Block>
  * @see https://dhoulb.github.io/shelving/ui/block/Block/Block
  */
 export function Block({ as: Component = "div", children, ...props }) {

package/ui/block/Block.tsx

@@ -52,7 +52,7 @@ export function getBlockClass(variants: BlockProps): string {
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).
  *
  * @example <Block><Paragraph>Hello</Paragraph></Block>
- * @example <Block as="aside" narrow><Paragraph>Sidebar</Paragraph></Block>
+ * @example <Block as="aside" width="narrow"><Paragraph>Sidebar</Paragraph></Block>
  * @see https://dhoulb.github.io/shelving/ui/block/Block/Block
  */
 export function Block({ as: Component = "div", children, ...props }: BlockProps): ReactElement {

package/ui/block/Image.d.ts

@@ -15,7 +15,7 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  *
  * @param props The image `src`, optional `alt` text, plus space and width variants.
  * @returns Rendered `<img>` element.
- * @example <Image src="/logo.png" alt="Logo" width="medium" />
+ * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://dhoulb.github.io/shelving/ui/block/Image/Image
  */
 export declare function Image({ src, alt, ...variants }: ImageProps): ReactElement;

package/ui/block/Image.js

@@ -9,7 +9,7 @@ const IMAGE_CLASS = getModuleClass(styles, "image");
  *
  * @param props The image `src`, optional `alt` text, plus space and width variants.
  * @returns Rendered `<img>` element.
- * @example <Image src="/logo.png" alt="Logo" width="medium" />
+ * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://dhoulb.github.io/shelving/ui/block/Image/Image
  */
 export function Image({ src, alt, ...variants }) {

package/ui/block/Image.tsx

@@ -21,7 +21,7 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  *
  * @param props The image `src`, optional `alt` text, plus space and width variants.
  * @returns Rendered `<img>` element.
- * @example <Image src="/logo.png" alt="Logo" width="medium" />
+ * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://dhoulb.github.io/shelving/ui/block/Image/Image
  */
 export function Image({ src, alt, ...variants }: ImageProps): ReactElement {

package/ui/block/Panel.d.ts

@@ -27,7 +27,7 @@ export interface PanelProps extends ColorVariants, PaddingVariants, StatusVarian
  * @kind component
  * @param props Colour, padding, status, and typography variants plus `children`.
  * @returns Rendered full-width panel region.
- * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
+ * @example <Panel><Block width="narrow"><Title>Welcome</Title></Block></Panel>
  * @example <Panel padding="xlarge" color="primary"><Title>Welcome</Title></Panel>
  * @see https://dhoulb.github.io/shelving/ui/block/Panel/Panel
  */

package/ui/block/Panel.js

@@ -16,7 +16,7 @@ const PANEL_CLASS = getModuleClass(PANEL_CSS, "panel");
  * @kind component
  * @param props Colour, padding, status, and typography variants plus `children`.
  * @returns Rendered full-width panel region.
- * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
+ * @example <Panel><Block width="narrow"><Title>Welcome</Title></Block></Panel>
  * @example <Panel padding="xlarge" color="primary"><Title>Welcome</Title></Panel>
  * @see https://dhoulb.github.io/shelving/ui/block/Panel/Panel
  */

package/ui/block/Panel.md

@@ -4,7 +4,7 @@ A full-width vertical region that paints the current surface colour. Use panels
 
 **Things to know:**
 
-- A panel always spans the full width of its container. To constrain the content inside, compose a [`Block`](/ui/Block) `narrow` (or `wide`) within it.
+- A panel always spans the full width of its container. To constrain the content inside, compose a [`Block`](/ui/Block) `width="narrow"` (or `width="wide"`) within it.
 - Block margin is always zero so panels stack flush; control the vertical breathing room with the `padding` variant (`<Panel padding="large">`, `<Panel padding="none">`). Inline padding is fixed.
 - `color=` / `status=` move the tint anchor for the whole panel scope, so the surface, border, and text re-derive together and cascade into nested content.
 - The top and bottom borders are dropped on the first and last panel so the page doesn't gain stray edge lines.
@@ -17,12 +17,12 @@ A full-width vertical region that paints the current surface colour. Use panels
 import { Panel, Block, Title, Paragraph } from "shelving/ui";
 
 <Panel as="header" color="primary">
-  <Block narrow>
+  <Block width="narrow">
     <Title>Welcome</Title>
   </Block>
 </Panel>
 <Panel padding="large">
-  <Block narrow>
+  <Block width="narrow">
     <Paragraph>Each panel is a full-width band; the inner block constrains the content.</Paragraph>
   </Block>
 </Panel>

package/ui/block/Panel.tsx

@@ -33,7 +33,7 @@ export interface PanelProps extends ColorVariants, PaddingVariants, StatusVarian
  * @kind component
  * @param props Colour, padding, status, and typography variants plus `children`.
  * @returns Rendered full-width panel region.
- * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
+ * @example <Panel><Block width="narrow"><Title>Welcome</Title></Block></Panel>
  * @example <Panel padding="xlarge" color="primary"><Title>Welcome</Title></Panel>
  * @see https://dhoulb.github.io/shelving/ui/block/Panel/Panel
  */

package/ui/block/Section.d.ts

@@ -76,7 +76,7 @@ export declare function Nav(props: SectionProps): ReactElement;
  * @kind component
  * @param props Colour, space, typography, and width variants plus optional `as` override and `children`.
  * @returns Rendered `<aside>` element.
- * @example <Aside narrow><Paragraph>Sidebar</Paragraph></Aside>
+ * @example <Aside width="narrow"><Paragraph>Sidebar</Paragraph></Aside>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Aside
  */
 export declare function Aside(props: SectionProps): ReactElement;

package/ui/block/Section.js

@@ -77,7 +77,7 @@ export function Nav(props) {
  * @kind component
  * @param props Colour, space, typography, and width variants plus optional `as` override and `children`.
  * @returns Rendered `<aside>` element.
- * @example <Aside narrow><Paragraph>Sidebar</Paragraph></Aside>
+ * @example <Aside width="narrow"><Paragraph>Sidebar</Paragraph></Aside>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Aside
  */
 export function Aside(props) {

package/ui/block/Section.md

@@ -6,7 +6,7 @@ A landmark content region — renders a `<section>` with block-level spacing and
 
 - Pick the component whose HTML element matches the semantic meaning rather than reaching for a generic [`Block`](/ui/Block). `<Section>` is a `<section>`, `<Nav>` a `<nav>`, `<Figure>` a `<figure>`, and so on.
 - Every section centres its content and caps the line length so text never touches the viewport edges. Nested sections relax that cap so they can fill their parent.
-- Pass `narrow` / `wide` / `full` to constrain or unconstrain the width, and the usual `color` / `space` / typography variants to retint and respace.
+- Sections default to the `--width-normal` content width, so most of the time you set no width at all. Pass `width="narrow"` / `"wide"` / `"full"` (or `"fit"`) to change that, and the usual `color` / `space` / typography variants to retint and respace.
 - Pair [`Figure`](/ui/Section) with [`Caption`](/ui/Caption) for a `<figure>` / `<figcaption>` pair.
 
 ## Usage
@@ -16,7 +16,7 @@ A landmark content region — renders a `<section>` with block-level spacing and
 ```tsx
 import { Section, Heading, Definitions } from "shelving/ui";
 
-<Section narrow>
+<Section width="narrow">
   <Heading>Account details</Heading>
   <Definitions>
     <dt>Name</dt><dd>Alice Smith</dd>
@@ -42,11 +42,11 @@ import { Header, Nav, Footer } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--section-width` | Content width | `100%` |
+| `--section-width` | Content width | `var(--width-normal)` (55rem) |
 | `--section-indent` | Inline gutter kept on each side so text doesn't touch the edges | `var(--space-normal)` (16px) |
 | `--section-space` | Outer block margin (top + bottom) | `var(--space-section)` (2rem) |
 
-**Global tokens it reads:** [`--space-normal`](/ui/getSpaceClass) and [`--space-section`](/ui/getSpaceClass). The `narrow` / `wide` / `full` width variants come from the shared [`ui`](/ui) styling system.
+**Global tokens it reads:** [`--space-normal`](/ui/getSpaceClass), [`--space-section`](/ui/getSpaceClass), and [`--width-normal`](/ui/getWidthClass) (the default content width). The `width` variant (`narrow` / `normal` / `wide` / `full` / `fit`) comes from the shared [`ui`](/ui) styling system.
 
 ## See also
 

package/ui/block/Section.module.css

@@ -1,5 +1,6 @@
 @import "../style/layers.css";
 @import "../style/Space.module.css";
+@import "../style/Width.module.css";
 
 @layer components {
 	.prose :where(section, article, aside, nav, header, footer, figure),
@@ -9,7 +10,7 @@
 		display: block;
 		box-sizing: border-box;
 		max-inline-size: calc(100% - (var(--section-indent, var(--space-normal)) * 2)); /* Stop text touching the sides. */
-		inline-size: var(--section-width, 100%);
+		inline-size: var(--section-width, var(--width-normal)); /* Default to the normal content width; override with the `width` variant. */
 		margin-inline: auto;
 		margin-block: var(--section-space, var(--space-section));
 

package/ui/block/Section.tsx

@@ -105,7 +105,7 @@ export function Nav(props: SectionProps): ReactElement {
  * @kind component
  * @param props Colour, space, typography, and width variants plus optional `as` override and `children`.
  * @returns Rendered `<aside>` element.
- * @example <Aside narrow><Paragraph>Sidebar</Paragraph></Aside>
+ * @example <Aside width="narrow"><Paragraph>Sidebar</Paragraph></Aside>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Aside
  */
 export function Aside(props: SectionProps): ReactElement {

package/ui/block/Table.js

@@ -4,7 +4,7 @@ import { getSpaceClass } from "../style/Space.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import TABLE_CSS from "./Table.module.css";
-const TABLE_CLASS = getModuleClass(TABLE_CSS, "divider");
+const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
 /**
  * Table block — rendered as `<table>`.
  * - Wrap in a `<Scroll horizontal>` if the table may exceed the container width on small screens.

package/ui/block/Table.tsx

@@ -6,7 +6,7 @@ import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
 import TABLE_CSS from "./Table.module.css";
 
-const TABLE_CLASS = getModuleClass(TABLE_CSS, "divider");
+const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
 
 /**
  * Props for `Table` — colour, space, and typography variants plus `children`.

package/ui/block/Title.md

@@ -26,7 +26,7 @@ import { Title, Paragraph } from "shelving/ui";
 import { Panel, Block, Title } from "shelving/ui";
 
 <Panel as="header" color="primary">
-  <Block narrow>
+  <Block width="narrow">
     <Title>Welcome</Title>
   </Block>
 </Panel>

package/ui/docs/DocumentationHomePage.js

@@ -20,5 +20,5 @@ import { TreeCards } from "../tree/TreeCards.js";
  * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationHomePage/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 }) }), content && (_jsx(Section, { wide: true, children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), _jsx(Section, { wide: true, children: _jsx(TreeCards, { children: 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 }) }), content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), _jsx(Section, { children: _jsx(TreeCards, { children: children }) })] }) }));
 }

package/ui/docs/DocumentationHomePage.tsx

@@ -29,13 +29,13 @@ export function DocumentationHomePage({ title, name, description, content, child
 					<Title center>{title ?? name}</Title>
 				</Panel>
 				{content && (
-					<Section wide>
+					<Section>
 						<Prose>
 							<Markup>{content}</Markup>
 						</Prose>
 					</Section>
 				)}
-				<Section wide>
+				<Section>
 					<TreeCards>{children}</TreeCards>
 				</Section>
 			</Block>

package/ui/docs/DocumentationPage.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { DocumentationElementProps } from "../../util/tree.js";
 /**
  * Page renderer for a `tree-documentation` element — the full detail page for a documented symbol.

package/ui/docs/DocumentationPage.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
 import { walkElements } from "../../util/element.js";
 import { Block } from "../block/Block.js";
-import { Definitions } from "../block/Definitions.js";
 import { Heading } from "../block/Heading.js";
-import { Label } from "../block/Label.js";
 import { Panel } from "../block/Panel.js";
 import { Preformatted } from "../block/Preformatted.js";
 import { Prose } from "../block/Prose.js";
 import { Header, Section } from "../block/Section.js";
+import { Table } from "../block/Table.js";
 import { Title } from "../block/Title.js";
 import { Code } from "../inline/Code.js";
 import { Markup } from "../misc/Markup.js";
 import { Page } from "../page/Page.js";
 import { Row } from "../style/Flex.js";
+import { Scroll } from "../style/Scroll.js";
 import { TreeBreadcrumbs } from "../tree/TreeBreadcrumbs.js";
 import { TreeCards } from "../tree/TreeCards.js";
 import { DocumentationButtons } from "./DocumentationButtons.js";
@@ -37,7 +36,7 @@ const KIND_SECTIONS = {
 function _renderSections(elements) {
     return Object.entries(KIND_SECTIONS).map(([kind, label]) => {
         const group = elements.filter(el => el.props.kind === kind);
-        return group.length ? (_jsxs(Section, { wide: true, children: [_jsx(Heading, { children: label }), _jsx(TreeCards, { children: group })] }, kind)) : null;
+        return group.length ? (_jsxs(Section, { children: [_jsx(Heading, { children: label }), _jsx(TreeCards, { children: group })] }, kind)) : null;
     });
 }
 /**
@@ -69,5 +68,5 @@ function DocumentationChildren({ elements }) {
  * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationPage/DocumentationPage
  */
 export function DocumentationPage({ title, name, kind = "unknown", description, content, signatures, params, returns, throws, examples, children, ...props }) {
-    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: getDocumentationKindColor(kind), children: [_jsx(Panel, { children: _jsxs(Header, { wide: true, children: [_jsx(TreeBreadcrumbs, {}), _jsx(Title, { children: _jsxs(Row, { left: true, wrap: true, children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind, size: "normal" })] }) }), _jsx(DocumentationButtons, { ...props })] }) }), signatures?.length || params?.length || returns?.length || throws?.length ? (_jsxs(Section, { wide: true, children: [_jsx(DocumentationSignatures, { signatures: signatures }), params?.length && (_jsxs(Section, { wide: true, children: [_jsx(Label, { children: "Parameters" }), _jsx(Definitions, { children: params.map(({ name, type = DEFAULT_TYPE, description = "", optional }) => (_jsxs(Fragment, { children: [_jsx("dt", { children: _jsxs(Code, { size: "normal", children: [name, optional ? "?" : "", ": ", type] }) }), _jsx("dd", { children: description })] }, `${name}-${type}-${description}`))) })] })), returns?.length && (_jsxs(Section, { wide: true, children: [_jsx(Label, { children: "Returns" }), _jsx(Definitions, { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs(Fragment, { children: [_jsx("dt", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("dd", { children: description })] }, `${type}-${description}`))) })] })), throws?.length && (_jsxs(Section, { wide: true, children: [_jsx(Label, { children: "Throws" }), _jsx(Definitions, { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs(Fragment, { children: [_jsx("dt", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("dd", { children: description })] }, `${type}-${description}`))) })] }))] })) : null, content && (_jsx(Section, { wide: true, children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), examples?.length && (_jsxs(Section, { wide: true, children: [_jsx(Heading, { children: "Examples" }), examples.map(({ description }) => (_jsx(Preformatted, { children: description }, description)))] })), _jsx(DocumentationChildren, { elements: children })] }) }));
+    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: getDocumentationKindColor(kind), children: [_jsx(Panel, { children: _jsxs(Header, { children: [_jsx(TreeBreadcrumbs, {}), _jsx(Title, { children: _jsxs(Row, { left: true, wrap: true, children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind, size: "normal" })] }) }), _jsx(DocumentationButtons, { ...props })] }) }), signatures?.length || params?.length || returns?.length || throws?.length ? (_jsxs(Section, { children: [_jsx(DocumentationSignatures, { signatures: signatures }), params?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Parameter" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description = "", default: def }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: name }) }), _jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: def ? _jsx(Code, { size: "normal", children: def }) : "-" }), _jsx("td", { children: description })] }, `${name}-${type}-${description}`))) })] }) }) })), returns?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Return" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) })), throws?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Throws" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) }))] })) : null, content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), examples?.length && (_jsxs(Section, { children: [_jsx(Heading, { children: "Examples" }), examples.map(({ description }) => (_jsx(Preformatted, { children: description }, description)))] })), _jsx(DocumentationChildren, { elements: children })] }) }));
 }

package/ui/docs/DocumentationPage.md

@@ -6,7 +6,7 @@ The full detail page for a documented symbol — the default renderer for `tree-
 
 - Above the title it renders an ancestor trail via [`TreeBreadcrumbs`](/ui/TreeBreadcrumbs), so it needs a [`TreeProvider`](/ui/TreeProvider) above it to resolve the ancestors.
 - The title carries a [`DocumentationKind`](/ui/DocumentationKind) tag, and below it [`DocumentationButtons`](/ui/DocumentationButtons) lists the symbol's relations (`member of`, `extends`, `implements`) as links.
-- It renders the signature(s) via [`DocumentationSignatures`](/ui/DocumentationSignatures) (one block per overload, each carrying the symbol's name), then prose content, then conditional `Parameters` / `Returns` / `Throws` / `Examples` sections — each only appears when it has entries.
+- It renders the signature(s) via [`DocumentationSignatures`](/ui/DocumentationSignatures) (one block per overload, each carrying the symbol's name), then prose content, then conditional `Parameters` / `Returns` / `Throws` / `Examples` sections — each only appears when it has entries. Parameters render as a [`Table`](/ui/Table) (`Parameter` / `Type` / `Default` / `Description` columns, a `-` standing in where a parameter has no default); Returns and Throws render as two-column tables (`Return` / `Throws` plus `Description`), with the type in the first column.
 - Child symbols follow, grouped by `kind` into card sections (`Components`, `Functions`, `Classes`, `Interfaces`, `Types`, `Constants`, `Methods`, `Properties`) rendered as [`DocumentationCard`](/ui/DocumentationCard)s inside a [`TreeCards`](/ui/TreeCards) listing. A new documented kind needs an entry in `KIND_SECTIONS` here (and a colour in [`DocumentationKind`](/ui/DocumentationKind)).
 
 ## Usage

package/ui/docs/DocumentationPage.test.tsx

@@ -42,6 +42,32 @@ describe("DocumentationPage", () => {
 		expect(html).not.toContain("Interfaces");
 	});
 
+	test("renders parameters as a table with a default column, hyphenating params without a default", () => {
+		const html = render(
+			<DocumentationPage
+				path="/makeThing"
+				name="makeThing"
+				kind="function"
+				params={[
+					{ name: "name", type: "string", description: "The name." },
+					{ name: "required", type: "boolean", description: "Whether required.", optional: true, default: "false" },
+				]}
+				returns={[{ type: "Thing", description: "The new thing." }]}
+			/>,
+			"./makeThing",
+		);
+		// Parameters table headers — name, type, default, description in separate columns.
+		expect(html).toContain("<th>Parameter</th>");
+		expect(html).toContain("<th>Type</th>");
+		expect(html).toContain("<th>Default</th>");
+		// A param with a default renders it; one without gets a hyphen.
+		expect(html).toContain("false");
+		expect(html).toContain("<td>-</td>");
+		// Returns table headers.
+		expect(html).toContain("<th>Return</th>");
+		expect(html).toContain("The new thing.");
+	});
+
 	test("groups static members into their own sections, before instance sections", () => {
 		const html = render(
 			<DocumentationPage path="/Color" name="Color" kind="class">

package/ui/docs/DocumentationPage.tsx

@@ -1,19 +1,19 @@
-import { Fragment, type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { walkElements } from "../../util/element.js";
 import type { DocumentationElementProps, TreeElement, TreeElements } from "../../util/tree.js";
 import { Block } from "../block/Block.js";
-import { Definitions } from "../block/Definitions.js";
 import { Heading } from "../block/Heading.js";
-import { Label } from "../block/Label.js";
 import { Panel } from "../block/Panel.js";
 import { Preformatted } from "../block/Preformatted.js";
 import { Prose } from "../block/Prose.js";
 import { Header, Section } from "../block/Section.js";
+import { Table } from "../block/Table.js";
 import { Title } from "../block/Title.js";
 import { Code } from "../inline/Code.js";
 import { Markup } from "../misc/Markup.js";
 import { Page } from "../page/Page.js";
 import { Row } from "../style/Flex.js";
+import { Scroll } from "../style/Scroll.js";
 import { TreeBreadcrumbs } from "../tree/TreeBreadcrumbs.js";
 import { TreeCards } from "../tree/TreeCards.js";
 import { DocumentationButtons } from "./DocumentationButtons.js";
@@ -41,7 +41,7 @@ function _renderSections(elements: readonly TreeElement[]): ReactNode {
 	return Object.entries(KIND_SECTIONS).map(([kind, label]) => {
 		const group = elements.filter(el => (el.props as DocumentationElementProps).kind === kind);
 		return group.length ? (
-			<Section wide key={kind}>
+			<Section key={kind}>
 				<Heading>{label}</Heading>
 				<TreeCards>{group}</TreeCards>
 			</Section>
@@ -97,7 +97,7 @@ export function DocumentationPage({
 		<Page title={title ?? name} description={description}>
 			<Block color={getDocumentationKindColor(kind)}>
 				<Panel>
-					<Header wide>
+					<Header>
 						<TreeBreadcrumbs />
 						<Title>
 							<Row left wrap>
@@ -109,67 +109,97 @@ export function DocumentationPage({
 					</Header>
 				</Panel>
 				{signatures?.length || params?.length || returns?.length || throws?.length ? (
-					<Section wide>
+					<Section>
 						<DocumentationSignatures signatures={signatures} />
 						{params?.length && (
-							<Section wide>
-								<Label>Parameters</Label>
-								<Definitions>
-									{params.map(({ name, type = DEFAULT_TYPE, description = "", optional }) => (
-										<Fragment key={`${name}-${type}-${description}`}>
-											<dt>
-												<Code size="normal">
-													{name}
-													{optional ? "?" : ""}: {type}
-												</Code>
-											</dt>
-											<dd>{description}</dd>
-										</Fragment>
-									))}
-								</Definitions>
+							<Section>
+								<Scroll horizontal>
+									<Table>
+										<thead>
+											<tr>
+												<th>Parameter</th>
+												<th>Type</th>
+												<th>Default</th>
+												<th>Description</th>
+											</tr>
+										</thead>
+										<tbody>
+											{params.map(({ name, type = DEFAULT_TYPE, description = "", default: def }) => (
+												<tr key={`${name}-${type}-${description}`}>
+													<td>
+														<Code size="normal">{name}</Code>
+													</td>
+													<td>
+														<Code size="normal">{type}</Code>
+													</td>
+													<td>{def ? <Code size="normal">{def}</Code> : "-"}</td>
+													<td>{description}</td>
+												</tr>
+											))}
+										</tbody>
+									</Table>
+								</Scroll>
 							</Section>
 						)}
 						{returns?.length && (
-							<Section wide>
-								<Label>Returns</Label>
-								<Definitions>
-									{returns.map(({ type = DEFAULT_TYPE, description = "" }) => (
-										<Fragment key={`${type}-${description}`}>
-											<dt>
-												<Code size="normal">{type}</Code>
-											</dt>
-											<dd>{description}</dd>
-										</Fragment>
-									))}
-								</Definitions>
+							<Section>
+								<Scroll horizontal>
+									<Table>
+										<thead>
+											<tr>
+												<th>Return</th>
+												<th>Description</th>
+											</tr>
+										</thead>
+										<tbody>
+											{returns.map(({ type = DEFAULT_TYPE, description = "" }) => (
+												<tr key={`${type}-${description}`}>
+													<td>
+														<Code size="normal">{type}</Code>
+													</td>
+													<td>{description}</td>
+												</tr>
+											))}
+										</tbody>
+									</Table>
+								</Scroll>
 							</Section>
 						)}
 						{throws?.length && (
-							<Section wide>
-								<Label>Throws</Label>
-								<Definitions>
-									{throws.map(({ type = DEFAULT_TYPE, description = "" }) => (
-										<Fragment key={`${type}-${description}`}>
-											<dt>
-												<Code size="normal">{type}</Code>
-											</dt>
-											<dd>{description}</dd>
-										</Fragment>
-									))}
-								</Definitions>
+							<Section>
+								<Scroll horizontal>
+									<Table>
+										<thead>
+											<tr>
+												<th>Throws</th>
+												<th>Description</th>
+											</tr>
+										</thead>
+										<tbody>
+											{throws.map(({ type = DEFAULT_TYPE, description = "" }) => (
+												<tr key={`${type}-${description}`}>
+													<td>
+														<Code size="normal">{type}</Code>
+													</td>
+													<td>{description}</td>
+												</tr>
+											))}
+										</tbody>
+									</Table>
+								</Scroll>
 							</Section>
 						)}
 					</Section>
 				) : null}
 				{content && (
-					<Section wide>
+					<Section>
 						<Prose>
 							<Markup>{content}</Markup>
 						</Prose>
 					</Section>
 				)}
 				{examples?.length && (
-					<Section wide>
+					<Section>
 						<Heading>Examples</Heading>
 						{examples.map(({ description }) => (
 							<Preformatted key={description}>{description}</Preformatted>

package/ui/form/Input.d.ts

@@ -2,8 +2,8 @@ import type { ReactElement } from "react";
 import { type WidthVariants } from "../style/Width.js";
 import type { ChildProps } from "../util/props.js";
 /**
- * Styling variants shared by every form input — currently the width variants (`narrow`, `wide`, `full`, `fit`).
- * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput fit>` to shrink to its content).
+ * Styling variants shared by every form input — currently the `width` variant (`width="narrow"`, `"normal"`, `"wide"`, `"full"`, `"fit"`).
+ * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput width="fit">` to shrink to its content).
  * - Designed to grow: new cross-cutting input styling props (e.g. spacing) should be added here so every input picks them up consistently.
  *
  * @see https://dhoulb.github.io/shelving/ui/form/Input/InputVariants

package/ui/form/Input.tsx

@@ -7,8 +7,8 @@ import type { ChildProps } from "../util/props.js";
 import INPUT_CSS from "./Input.module.css";
 
 /**
- * Styling variants shared by every form input — currently the width variants (`narrow`, `wide`, `full`, `fit`).
- * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput fit>` to shrink to its content).
+ * Styling variants shared by every form input — currently the `width` variant (`width="narrow"`, `"normal"`, `"wide"`, `"full"`, `"fit"`).
+ * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput width="fit">` to shrink to its content).
  * - Designed to grow: new cross-cutting input styling props (e.g. spacing) should be added here so every input picks them up consistently.
  *
  * @see https://dhoulb.github.io/shelving/ui/form/Input/InputVariants

package/ui/layout/CenteredLayout.md

@@ -15,7 +15,7 @@ import { CenteredLayout, Section } from "shelving/ui";
 function LoginPage() {
   return (
     <CenteredLayout>
-      <Section narrow>
+      <Section width="narrow">
         <LoginForm/>
       </Section>
     </CenteredLayout>

package/ui/style/Scroll.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 import type { ChildProps } from "../util/index.js";
-import type { WidthVariants } from "./Width.js";
 /**
  * Variant props selecting which scroll axes are enabled on an element.
  *
@@ -22,16 +21,16 @@ export interface ScrollProps {
  */
 export declare function getScrollClass({ horizontal, vertical }: ScrollProps): string;
 /**
- * Props for the `Scroll` component — children plus scroll-axis and width variants.
+ * Props for the `Scroll` component — children plus scroll-axis variants.
  *
  * @see https://dhoulb.github.io/shelving/ui/style/Scroll/ScrollComponentProps
  */
-export interface ScrollComponentProps extends ChildProps, ScrollProps, WidthVariants {
+export interface ScrollComponentProps extends ChildProps, ScrollProps {
 }
 /**
  * Wrap children in a scrollable container with horizontal and/or vertical scrolling enabled.
  *
- * @param props Children plus scroll-axis and width variant props.
+ * @param props Children plus scroll-axis variant props.
  * @returns A `<div>` element with the computed scroll class.
  * @example <Scroll horizontal>{wideContent}</Scroll>
  * @see https://dhoulb.github.io/shelving/ui/style/Scroll/Scroll

package/ui/style/Scroll.js

@@ -18,7 +18,7 @@ export function getScrollClass({ horizontal, vertical }) {
 /**
  * Wrap children in a scrollable container with horizontal and/or vertical scrolling enabled.
  *
- * @param props Children plus scroll-axis and width variant props.
+ * @param props Children plus scroll-axis variant props.
  * @returns A `<div>` element with the computed scroll class.
  * @example <Scroll horizontal>{wideContent}</Scroll>
  * @see https://dhoulb.github.io/shelving/ui/style/Scroll/Scroll

package/ui/style/Scroll.tsx

@@ -2,7 +2,6 @@ import type { ReactElement } from "react";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/index.js";
 import SCROLLABLE_CSS from "./Scroll.module.css";
-import type { WidthVariants } from "./Width.js";
 
 const SCROLL_HORIZONTAL_CLASS = getModuleClass(SCROLLABLE_CSS, "horizontal");
 
@@ -36,16 +35,16 @@ export function getScrollClass({ horizontal, vertical }: ScrollProps): string {
 }
 
 /**
- * Props for the `Scroll` component — children plus scroll-axis and width variants.
+ * Props for the `Scroll` component — children plus scroll-axis variants.
  *
  * @see https://dhoulb.github.io/shelving/ui/style/Scroll/ScrollComponentProps
  */
-export interface ScrollComponentProps extends ChildProps, ScrollProps, WidthVariants {}
+export interface ScrollComponentProps extends ChildProps, ScrollProps {}
 
 /**
  * Wrap children in a scrollable container with horizontal and/or vertical scrolling enabled.
  *
- * @param props Children plus scroll-axis and width variant props.
+ * @param props Children plus scroll-axis variant props.
  * @returns A `<div>` element with the computed scroll class.
  * @example <Scroll horizontal>{wideContent}</Scroll>
  * @see https://dhoulb.github.io/shelving/ui/style/Scroll/Scroll

package/ui/style/Width.d.ts

@@ -1,30 +1,27 @@
 /**
- * Variant props that constrain (or unconstrain) a block-level component's max-width, e.g. `narrow`.
+ * Enumerated max-inline-size constraints selectable via the `width` variant prop.
+ * - `narrow` / `normal` / `wide` — fixed max-widths from the `--width-*` tokens.
+ * - `full` — take the full available width, removing any default max-width constraint.
+ * - `fit` — shrink to fit the content's intrinsic width (`fit-content`).
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Width/WidthVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Width/UIWidth
  */
-export interface WidthVariants {
-    /** Constrain to narrow max-width (`--width-narrow`). */
-    narrow?: boolean | undefined;
-    /** Constrain to wide max-width (`--width-wide`). */
-    wide?: boolean | undefined;
-    /** Take the full available width — removes any default max-width constraint. */
-    full?: boolean | undefined;
-    /** Shrink to fit the content's intrinsic width (`fit-content`). */
-    fit?: boolean | undefined;
-}
+export type UIWidth = "narrow" | "normal" | "wide" | "full" | "fit";
 /**
- * Enumerated width modifier names — the boolean keys of `WidthVariants`.
+ * Variant props that constrain (or unconstrain) a block-level component's max-width, e.g. `width="narrow"`.
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Width/UIWidth
+ * @see https://dhoulb.github.io/shelving/ui/style/Width/WidthVariants
  */
-export type UIWidth = keyof WidthVariants;
+export interface WidthVariants {
+    /** Max-inline-size constraint of the element. */
+    width?: UIWidth | undefined;
+}
 /**
- * Get the max-width class for a component from its width variant props.
+ * Get the max-width class for a component from its `width` variant prop.
  *
- * @param width Width variant props selecting the max-width constraint.
- * @returns The width class string, or `undefined` when no width variant is set.
- * @example getWidthClass({ narrow: true }) // "narrow"
+ * @param variants Variant props containing the optional `width` constraint.
+ * @returns The width class string, or `undefined` when no `width` is set.
+ * @example getWidthClass({ width: "narrow" }) // "narrow"
  * @see https://dhoulb.github.io/shelving/ui/style/Width/getWidthClass
  */
-export declare function getWidthClass(width: WidthVariants): string | undefined;
+export declare function getWidthClass({ width }: WidthVariants): string | undefined;

package/ui/style/Width.js

@@ -1,13 +1,13 @@
 import { getModuleClass } from "../util/css.js";
 import WIDTH_CSS from "./Width.module.css";
 /**
- * Get the max-width class for a component from its width variant props.
+ * Get the max-width class for a component from its `width` variant prop.
  *
- * @param width Width variant props selecting the max-width constraint.
- * @returns The width class string, or `undefined` when no width variant is set.
- * @example getWidthClass({ narrow: true }) // "narrow"
+ * @param variants Variant props containing the optional `width` constraint.
+ * @returns The width class string, or `undefined` when no `width` is set.
+ * @example getWidthClass({ width: "narrow" }) // "narrow"
  * @see https://dhoulb.github.io/shelving/ui/style/Width/getWidthClass
  */
-export function getWidthClass(width) {
-    return getModuleClass(WIDTH_CSS, width);
+export function getWidthClass({ width }) {
+    return width && getModuleClass(WIDTH_CSS, width);
 }

package/ui/style/Width.module.css

@@ -3,11 +3,13 @@
 @layer defaults {
 	:root {
 		/* Semantic widths */
-		--width-narrow: 22.5rem;
-		--width-wide: 33.75rem;
+		--width-narrow: 35rem;
+		--width-normal: 55rem;
+		--width-wide: 75rem;
 	}
 
 	.narrow,
+	.normal,
 	.wide,
 	.full,
 	.fit {
@@ -22,6 +24,9 @@
 	.narrow {
 		inline-size: var(--width-narrow);
 	}
+	.normal {
+		inline-size: var(--width-normal);
+	}
 	.wide {
 		inline-size: var(--width-wide);
 	}

package/ui/style/Width.tsx

@@ -2,36 +2,33 @@ import { getModuleClass } from "../util/css.js";
 import WIDTH_CSS from "./Width.module.css";
 
 /**
- * Variant props that constrain (or unconstrain) a block-level component's max-width, e.g. `narrow`.
+ * Enumerated max-inline-size constraints selectable via the `width` variant prop.
+ * - `narrow` / `normal` / `wide` — fixed max-widths from the `--width-*` tokens.
+ * - `full` — take the full available width, removing any default max-width constraint.
+ * - `fit` — shrink to fit the content's intrinsic width (`fit-content`).
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Width/WidthVariants
+ * @see https://dhoulb.github.io/shelving/ui/style/Width/UIWidth
  */
-export interface WidthVariants {
-	/** Constrain to narrow max-width (`--width-narrow`). */
-	narrow?: boolean | undefined;
-	/** Constrain to wide max-width (`--width-wide`). */
-	wide?: boolean | undefined;
-	/** Take the full available width — removes any default max-width constraint. */
-	full?: boolean | undefined;
-	/** Shrink to fit the content's intrinsic width (`fit-content`). */
-	fit?: boolean | undefined;
-}
+export type UIWidth = "narrow" | "normal" | "wide" | "full" | "fit";
 
 /**
- * Enumerated width modifier names — the boolean keys of `WidthVariants`.
+ * Variant props that constrain (or unconstrain) a block-level component's max-width, e.g. `width="narrow"`.
  *
- * @see https://dhoulb.github.io/shelving/ui/style/Width/UIWidth
+ * @see https://dhoulb.github.io/shelving/ui/style/Width/WidthVariants
  */
-export type UIWidth = keyof WidthVariants;
+export interface WidthVariants {
+	/** Max-inline-size constraint of the element. */
+	width?: UIWidth | undefined;
+}
 
 /**
- * Get the max-width class for a component from its width variant props.
+ * Get the max-width class for a component from its `width` variant prop.
  *
- * @param width Width variant props selecting the max-width constraint.
- * @returns The width class string, or `undefined` when no width variant is set.
- * @example getWidthClass({ narrow: true }) // "narrow"
+ * @param variants Variant props containing the optional `width` constraint.
+ * @returns The width class string, or `undefined` when no `width` is set.
+ * @example getWidthClass({ width: "narrow" }) // "narrow"
  * @see https://dhoulb.github.io/shelving/ui/style/Width/getWidthClass
  */
-export function getWidthClass(width: WidthVariants): string | undefined {
-	return getModuleClass(WIDTH_CSS, width);
+export function getWidthClass({ width }: WidthVariants): string | undefined {
+	return width && getModuleClass(WIDTH_CSS, width);
 }

package/ui/style/getWidthClass.md

@@ -1,8 +1,8 @@
 # getWidthClass
 
-The width variant props (`narrow`, `wide`, `full`, `fit`) constrain a block-level component's max-inline-size — `<Section narrow>`, `<Card wide>`. They're **overrides** for one-off layout; for an app-wide change, retune the width variables below in a theme file.
+The `width` variant prop (`"narrow"`, `"normal"`, `"wide"`, `"full"`, `"fit"`) constrains a block-level component's max-inline-size — `<Card width="narrow">`, `<Block width="wide">`. It's an **override** for one-off layout; for an app-wide change, retune the width variables below in a theme file. `Section` already defaults to the `--width-normal` constraint, so most pages never set `width` at all.
 
-`getWidthClass({ narrow, wide, full })` maps the boolean props to a width class. The `narrow` and `wide` constraints read the variables below.
+`getWidthClass({ width })` maps the prop to a width class. The `narrow`, `normal`, and `wide` constraints read the variables below; `full` takes the full available width and `fit` shrinks to the content.
 
 ## Theme variables
 
@@ -10,8 +10,9 @@ The following `:root` variables are defined by this module and can be overridden
 
 | Variable | Default | Used for |
 |---|---|---|
-| `--width-narrow` | `22.5rem` | The `narrow` constraint — single-column forms, dialogs. |
-| `--width-wide` | `33.75rem` | The `wide` constraint — readable prose measure. |
+| `--width-narrow` | `35rem` | The `narrow` constraint — single-column forms, dialogs. |
+| `--width-normal` | `55rem` | The `normal` constraint — standard content column. |
+| `--width-wide` | `75rem` | The `wide` constraint — readable prose measure. |
 
 ## See also
 

package/ui/tree/TreeIndexPage.js

@@ -51,5 +51,5 @@ export function TreeIndexPage() {
     const filter = selected.length ? { kind: selected } : undefined;
     // Each element's `key` is its unique canonical path (stamped by `flattenTree()`), so this flat cross-tree listing reconciles correctly.
     const cards = root ? searchTree(root, trimmed, { limit: trimmed ? 20 : INDEX_LIMIT, filter }) : [];
-    return (_jsxs(Page, { title: INDEX_TITLE, description: INDEX_DESCRIPTION, children: [_jsx(Header, { wide: true, children: _jsx(Title, { children: INDEX_TITLE }) }), _jsxs(Section, { wide: true, children: [_jsx(TextInput, { name: "search", title: "Search", placeholder: "Search\u2026", value: query, onValue: v => setQuery(v ?? "") }), !!kinds.length && (_jsx(Row, { left: true, wrap: true, children: kinds.map(kind => (_jsx(CheckboxInput, { name: kind, fit: true, value: selected.includes(kind), onValue: () => setSelected(s => toggleArrayItem(s, kind)), children: _jsx(DocumentationKind, { kind: kind }) }, kind))) }))] }), _jsx(Section, { wide: true, children: _jsx(TreeCards, { children: cards }) })] }));
+    return (_jsxs(Page, { title: INDEX_TITLE, description: INDEX_DESCRIPTION, children: [_jsx(Header, { children: _jsx(Title, { children: INDEX_TITLE }) }), _jsxs(Section, { children: [_jsx(TextInput, { name: "search", title: "Search", placeholder: "Search\u2026", value: query, onValue: v => setQuery(v ?? "") }), !!kinds.length && (_jsx(Row, { left: true, wrap: true, children: kinds.map(kind => (_jsx(CheckboxInput, { name: kind, width: "fit", value: selected.includes(kind), onValue: () => setSelected(s => toggleArrayItem(s, kind)), children: _jsx(DocumentationKind, { kind: kind }) }, kind))) }))] }), _jsx(Section, { children: _jsx(TreeCards, { children: cards }) })] }));
 }

package/ui/tree/TreeIndexPage.tsx

@@ -64,10 +64,10 @@ export function TreeIndexPage(): ReactNode {
 
 	return (
 		<Page title={INDEX_TITLE} description={INDEX_DESCRIPTION}>
-			<Header wide>
+			<Header>
 				<Title>{INDEX_TITLE}</Title>
 			</Header>
-			<Section wide>
+			<Section>
 				<TextInput name="search" title="Search" placeholder="Search…" value={query} onValue={v => setQuery(v ?? "")} />
 				{!!kinds.length && (
 					<Row left wrap>
@@ -75,7 +75,7 @@ export function TreeIndexPage(): ReactNode {
 							<CheckboxInput
 								key={kind}
 								name={kind}
-								fit
+								width="fit"
 								value={selected.includes(kind)}
 								onValue={() => setSelected(s => toggleArrayItem(s, kind))}
 							>
@@ -85,7 +85,7 @@ export function TreeIndexPage(): ReactNode {
 					</Row>
 				)}
 			</Section>
-			<Section wide>
+			<Section>
 				<TreeCards>{cards}</TreeCards>
 			</Section>
 		</Page>

package/ui/tree/TreePage.js

@@ -17,5 +17,5 @@ import { TreeCards } from "./TreeCards.js";
  * @see https://dhoulb.github.io/shelving/ui/tree/TreePage/TreePage
  */
 export function TreePage({ title, name, description, content, children }) {
-    return (_jsxs(Page, { title: title ?? name, description: description, children: [_jsx(Header, { wide: true, children: _jsx(Title, { children: title ?? name }) }), _jsx(Section, { wide: true, children: content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })) }), _jsx(Section, { wide: true, children: _jsx(TreeCards, { children: children }) })] }));
+    return (_jsxs(Page, { title: title ?? name, description: description, children: [_jsx(Header, { children: _jsx(Title, { children: title ?? name }) }), _jsx(Section, { children: content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })) }), _jsx(Section, { children: _jsx(TreeCards, { children: children }) })] }));
 }

package/ui/tree/TreePage.tsx

@@ -21,17 +21,17 @@ import { TreeCards } from "./TreeCards.js";
 export function TreePage({ title, name, description, content, children }: TreeElementProps): ReactNode {
 	return (
 		<Page title={title ?? name} description={description}>
-			<Header wide>
+			<Header>
 				<Title>{title ?? name}</Title>
 			</Header>
-			<Section wide>
+			<Section>
 				{content && (
 					<Prose>
 						<Markup>{content}</Markup>
 					</Prose>
 				)}
 			</Section>
-			<Section wide>
+			<Section>
 				<TreeCards>{children}</TreeCards>
 			</Section>
 		</Page>

package/util/tree.d.ts

@@ -77,6 +77,8 @@ export interface DocumentationParam {
     readonly type?: string | undefined;
     readonly description?: string | undefined;
     readonly optional?: boolean | undefined;
+    /** Default-value expression from the parameter's initializer (e.g. `"false"`, `"{}"`), or `undefined` when the parameter has none. */
+    readonly default?: string | undefined;
 }
 /**
  * A single `@returns` entry — multiple allowed to document union return types separately.