shelving 1.225.0 → 1.227.0

package/markup/rule/fenced.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createMarkupRule } from "../MarkupRule.js";
 import { BLOCK_CONTENT_REGEXP, BLOCK_START_REGEXP, createBlockRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../util/regexp.js";
 const FENCE = "`{3,}|~{3,}";
@@ -12,4 +12,8 @@ const FENCE = "`{3,}|~{3,}";
  * - Markdown-style four-space indent syntax is not supported (only fenced code since it's less confusing and more common).
  */
 export const FENCED_RULE = createMarkupRule(createBlockRegExp(`(?<code>${BLOCK_CONTENT_REGEXP})`, `${BLOCK_START_REGEXP}(?<fence>${FENCE}) *(?<title>${LINE_CONTENT_REGEXP})\n`, // Starts with the fence
-`(?:${LINE_SPACE_REGEXP}*\n\\k<fence>(?:\\s*\\n)?|$)`), (key, { title, code }) => (_jsx("pre", { children: _jsx("code", { title: title?.trim() || undefined, children: code.trim() }) }, key)), ["block", "list"], 10);
+`(?:${LINE_SPACE_REGEXP}*\n\\k<fence>(?:\\s*\\n)?|$)`), (key, { title, code }) => {
+    const caption = title?.trim();
+    // Scrollable region pattern: focusable, labelled <figure> wraps the code block so keyboard users can arrow-scroll wide lines.
+    return caption ? (_jsxs("figure", { tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: [_jsx("figcaption", { children: caption }), _jsx("pre", { children: _jsx("code", { children: code.trim() }) })] }, key)) : (_jsx("figure", { tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: _jsx("pre", { children: _jsx("code", { children: code.trim() }) }) }, key));
+}, ["block", "list"], 10);

package/markup/rule/table.js

@@ -53,7 +53,8 @@ export const TABLE_RULE = createMarkupRule(createBlockRegExp(`(?<table>${_ROW}\\
         }
         body.push(_jsx(Section, { children: rows }, s));
     }
-    return _jsx("table", { children: body }, key);
+    // Scrollable region pattern: focusable, labelled <figure> wraps the table so keyboard users can arrow-scroll wide columns.
+    return (_jsx("figure", { tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: _jsx("table", { children: body }) }, key));
 }, ["block"]);
 /** Split a table row into trimmed cell strings, honouring `\|` escaped pipes. */
 function _splitRow(row) {

package/package.json

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

package/ui/app/App.module.css

@@ -56,6 +56,10 @@
 	--space-xlarge: calc(var(--space) * 2); /* 32px */
 	--space-xxlarge: calc(var(--space) * 3); /* 48px */
 
+	/* Semantic spacings */
+	/* Gap between sibling sections/blocks and the top margin of titles/headings, so the rhythm stays consistent whether a heading is wrapped in a Section or rendered bare. */
+	--spacing-section: 2rem;
+
 	/* Radii */
 	--radius: 1rem;
 	--radius-xxsmall: calc(var(--radius) * 0.25); /* 4px */

package/ui/block/Block.d.ts

@@ -1,8 +1,31 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
 export declare const BLOCK_CLASS: string | undefined;
-/** Variants for elements. */
 export interface BlockProps extends OptionalChildProps {
+    /** Constrain the block to narrow width. */
+    narrow?: boolean | undefined;
+    /** Constrain the block to wide width. */
+    wide?: boolean | undefined;
+    /** Use larger block spacing. */
+    spacious?: boolean | undefined;
+    /** Mark as a keyboard-focusable horizontal scroll region — adds `tabindex="0"`, `role="region"`, an `aria-label`, and `overflow-x: auto`. */
+    scrollable?: boolean | undefined;
 }
-/** A single `<div>` element with element spacing. */
-export declare function Block({ children }: BlockProps): ReactElement;
+/** Plain `<div>` block with block-level spacing. Base building block; use a semantic variant (`<Section>`, `<Figure>`, etc.) when the element matters. */
+export declare function Block(props: BlockProps): ReactElement;
+/** `<section>` block with block-level spacing. */
+export declare function Section(props: BlockProps): ReactElement;
+/** `<header>` block with block-level spacing. */
+export declare function Header(props: BlockProps): ReactElement;
+/** `<footer>` block with block-level spacing. */
+export declare function Footer(props: BlockProps): ReactElement;
+/** `<nav>` block with block-level spacing. */
+export declare function Nav(props: BlockProps): ReactElement;
+/** `<aside>` block with block-level spacing. */
+export declare function Aside(props: BlockProps): ReactElement;
+/** `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content. */
+export declare function Figure(props: BlockProps): ReactElement;
+export interface CaptionProps extends OptionalChildProps {
+}
+/** `<figcaption>` block — caption text for a `<Figure>`. */
+export declare function Caption({ children }: CaptionProps): ReactElement;

package/ui/block/Block.js

@@ -1,8 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
-import BLOCK_CSS from "./Block.module.css";
-export const BLOCK_CLASS = getModuleClass(BLOCK_CSS, "block");
-/** A single `<div>` element with element spacing. */
-export function Block({ children }) {
-    return _jsx("div", { className: BLOCK_CSS.element, children: children });
+import styles from "./Block.module.css";
+export const BLOCK_CLASS = getModuleClass(styles, "block");
+function renderBlock(Component, { children, ...variants }) {
+    const className = getModuleClass(styles, "block", variants);
+    return variants.scrollable ? (_jsx(Component, { className: className, tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: children })) : (_jsx(Component, { className: className, children: children }));
+}
+/** Plain `<div>` block with block-level spacing. Base building block; use a semantic variant (`<Section>`, `<Figure>`, etc.) when the element matters. */
+export function Block(props) {
+    return renderBlock("div", props);
+}
+/** `<section>` block with block-level spacing. */
+export function Section(props) {
+    return renderBlock("section", props);
+}
+/** `<header>` block with block-level spacing. */
+export function Header(props) {
+    return renderBlock("header", props);
+}
+/** `<footer>` block with block-level spacing. */
+export function Footer(props) {
+    return renderBlock("footer", props);
+}
+/** `<nav>` block with block-level spacing. */
+export function Nav(props) {
+    return renderBlock("nav", props);
+}
+/** `<aside>` block with block-level spacing. */
+export function Aside(props) {
+    return renderBlock("aside", props);
+}
+/** `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content. */
+export function Figure(props) {
+    return renderBlock("figure", props);
+}
+/** `<figcaption>` block — caption text for a `<Figure>`. */
+export function Caption({ children }) {
+    return _jsx("figcaption", { className: getModuleClass(styles, "caption"), children: children });
 }

package/ui/block/Block.module.css

@@ -1,12 +1,96 @@
 .block {
 	/* Box */
-	margin: var(--element-spacing, var(--space-small)) 0;
+	position: relative;
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--block-spacing, var(--spacing-section));
 
 	/* Psuedo-classes */
 	&:first-child {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 	&:last-child {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
+
+	/* Variants */
+	&.narrow {
+		margin-inline: auto;
+		max-width: var(--block-width-narrow, var(--width-narrow));
+	}
+	&.wide {
+		margin-inline: auto;
+		max-width: var(--block-width-wide, var(--width-wide));
+	}
+	&.spacious {
+		margin-block: var(--block-spacious-spacing, var(--space-xxlarge));
+	}
+}
+
+/* Plain semantic blocks inside prose pick up the same spacing as a <Block>. */
+.prose :where(section, article, aside, nav, header, footer, figure) {
+	margin-inline: 0;
+	margin-block: var(--block-spacing, var(--spacing-section));
+
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}
+
+/* Scrollable region — keyboard-focusable horizontal scroll container. Targets both the .scrollable variant and any prose element marked `role="region" tabindex="0"` (e.g. Markdown fenced/table output). */
+.scrollable,
+.prose [role="region"][tabindex="0"] {
+	overflow-x: auto;
+	overscroll-behavior-x: contain;
+
+	&:focus-visible {
+		outline: var(--focus-stroke, var(--stroke-thick)) solid var(--focus-color, var(--color-accent));
+		outline-offset: var(--focus-offset, var(--space-xxsmall));
+	}
+
+	/* Stretch the inner block to fill the scroll container so short content still spans the width. */
+	> :is(table, pre) {
+		min-width: 100%;
+	}
+
+	/* Force long lines so they trigger horizontal scroll instead of wrapping; grow the box with the content (`width: max-content`) so the pre's own right-side padding survives at scroll-end. */
+	> pre {
+		width: max-content;
+		white-space: pre;
+		overflow-wrap: normal;
+	}
+
+	/* Caption stays pinned to the left during horizontal scroll. Spacing/typography come from the shared figcaption rule below. */
+	> :is(.caption, figcaption) {
+		position: sticky;
+		left: 0;
+	}
+}
+
+.caption,
+.prose figcaption {
+	display: block;
+	margin-block: var(--caption-gap, var(--space-xsmall));
+	font-size: var(--caption-font-size, var(--size-small));
+	color: var(--caption-color, var(--color-quiet));
+
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}
+
+/* Captions have tighter margins than most block elements, so zero the abutting margin of any neighbouring sibling — otherwise margin collapse would let the bigger neighbour margin win, drifting the caption away from its content. */
+.caption + *,
+.prose figcaption + * {
+	margin-block-start: 0;
+}
+:has(+ .caption),
+.prose :has(+ figcaption) {
+	margin-block-end: 0;
 }

package/ui/block/Block.tsx

@@ -1,14 +1,72 @@
 import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
-import BLOCK_CSS from "./Block.module.css";
+import styles from "./Block.module.css";
 
-export const BLOCK_CLASS = getModuleClass(BLOCK_CSS, "block");
+export const BLOCK_CLASS = getModuleClass(styles, "block");
 
-/** Variants for elements. */
-export interface BlockProps extends OptionalChildProps {}
+export interface BlockProps extends OptionalChildProps {
+	/** Constrain the block to narrow width. */
+	narrow?: boolean | undefined;
+	/** Constrain the block to wide width. */
+	wide?: boolean | undefined;
+	/** Use larger block spacing. */
+	spacious?: boolean | undefined;
+	/** Mark as a keyboard-focusable horizontal scroll region — adds `tabindex="0"`, `role="region"`, an `aria-label`, and `overflow-x: auto`. */
+	scrollable?: boolean | undefined;
+}
+
+type BlockElement = "div" | "section" | "header" | "footer" | "nav" | "aside" | "figure";
+
+function renderBlock(Component: BlockElement, { children, ...variants }: BlockProps): ReactElement {
+	const className = getModuleClass(styles, "block", variants);
+	return variants.scrollable ? (
+		<Component className={className} tabIndex={0} role="region" aria-label="Scrollable region">
+			{children}
+		</Component>
+	) : (
+		<Component className={className}>{children}</Component>
+	);
+}
+
+/** Plain `<div>` block with block-level spacing. Base building block; use a semantic variant (`<Section>`, `<Figure>`, etc.) when the element matters. */
+export function Block(props: BlockProps): ReactElement {
+	return renderBlock("div", props);
+}
+
+/** `<section>` block with block-level spacing. */
+export function Section(props: BlockProps): ReactElement {
+	return renderBlock("section", props);
+}
+
+/** `<header>` block with block-level spacing. */
+export function Header(props: BlockProps): ReactElement {
+	return renderBlock("header", props);
+}
+
+/** `<footer>` block with block-level spacing. */
+export function Footer(props: BlockProps): ReactElement {
+	return renderBlock("footer", props);
+}
+
+/** `<nav>` block with block-level spacing. */
+export function Nav(props: BlockProps): ReactElement {
+	return renderBlock("nav", props);
+}
+
+/** `<aside>` block with block-level spacing. */
+export function Aside(props: BlockProps): ReactElement {
+	return renderBlock("aside", props);
+}
+
+/** `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content. */
+export function Figure(props: BlockProps): ReactElement {
+	return renderBlock("figure", props);
+}
+
+export interface CaptionProps extends OptionalChildProps {}
 
-/** A single `<div>` element with element spacing. */
-export function Block({ children }: BlockProps): ReactElement {
-	return <div className={BLOCK_CSS.element}>{children}</div>;
+/** `<figcaption>` block — caption text for a `<Figure>`. */
+export function Caption({ children }: CaptionProps): ReactElement {
+	return <figcaption className={getModuleClass(styles, "caption")}>{children}</figcaption>;
 }

package/ui/block/Heading.module.css

@@ -4,8 +4,7 @@
 	display: block;
 	inline-size: 100%;
 	margin-inline: 0;
-	/* `em` top margin scales with font-size, so larger headings get proportionally more space above them. */
-	margin-block-start: var(--heading-spacing-before, 1.5em);
+	margin-block-start: var(--heading-spacing-before, var(--spacing-section));
 	margin-block-end: var(--heading-spacing, var(--space-normal));
 
 	/* Style */

package/ui/block/Preformatted.d.ts

@@ -7,6 +7,6 @@ export interface PreformattedProps extends OptionalChildProps {
 /**
  * Preformatted block of text — rendered as `<pre>`.
  * - Defaults to wrapping long lines (`white-space: pre-wrap`) so code fits the container width while preserving newlines and indentation within wrapped lines.
- * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables).
+ * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables). Wrap in a `<Figure scrollable>` (or any `scrollable` block) to add horizontal scrolling.
  */
 export declare function Preformatted({ children, ...variants }: PreformattedProps): ReactElement;

package/ui/block/Preformatted.js

@@ -4,7 +4,7 @@ import styles from "./Preformatted.module.css";
 /**
  * Preformatted block of text — rendered as `<pre>`.
  * - Defaults to wrapping long lines (`white-space: pre-wrap`) so code fits the container width while preserving newlines and indentation within wrapped lines.
- * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables).
+ * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables). Wrap in a `<Figure scrollable>` (or any `scrollable` block) to add horizontal scrolling.
  */
 export function Preformatted({ children, ...variants }) {
     return _jsx("pre", { className: getModuleClass(styles, "preformatted", variants), children: children });

package/ui/block/Preformatted.module.css

@@ -30,6 +30,5 @@
 	&.nowrap {
 		white-space: pre;
 		overflow-wrap: normal;
-		overflow-x: auto;
 	}
 }

package/ui/block/Preformatted.tsx

@@ -11,7 +11,7 @@ export interface PreformattedProps extends OptionalChildProps {
 /**
  * Preformatted block of text — rendered as `<pre>`.
  * - Defaults to wrapping long lines (`white-space: pre-wrap`) so code fits the container width while preserving newlines and indentation within wrapped lines.
- * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables).
+ * - Pass `nowrap` to restore strict `<pre>` behaviour when exact whitespace matters (ASCII art, fixed-column tables). Wrap in a `<Figure scrollable>` (or any `scrollable` block) to add horizontal scrolling.
  */
 export function Preformatted({ children, ...variants }: PreformattedProps): ReactElement {
 	return <pre className={getModuleClass(styles, "preformatted", variants)}>{children}</pre>;

package/ui/block/Prose.js

@@ -11,10 +11,10 @@ import subscriptStyles from "../inline/Subscript.module.css";
 import superscriptStyles from "../inline/Superscript.module.css";
 import { getClass } from "../util/css.js";
 import addressStyles from "./Address.module.css";
+import blockStyles from "./Block.module.css";
 import blockquoteStyles from "./Blockquote.module.css";
 import definitionsStyles from "./Definitions.module.css";
 import dividerStyles from "./Divider.module.css";
-import figureStyles from "./Figure.module.css";
 import headingStyles from "./Heading.module.css";
 import imageStyles from "./Image.module.css";
 import listStyles from "./List.module.css";
@@ -22,7 +22,7 @@ import paragraphStyles from "./Paragraph.module.css";
 import preformattedStyles from "./Preformatted.module.css";
 import subheadingStyles from "./Subheading.module.css";
 import tableStyles from "./Table.module.css";
-const PROSE_STYLES = getClass(paragraphStyles.prose, headingStyles.prose, subheadingStyles.prose, addressStyles.prose, blockquoteStyles.prose, codeStyles.prose, definitionsStyles.prose, deletedStyles.prose, emphasisStyles.prose, figureStyles.prose, imageStyles.prose, insertedStyles.prose, listStyles.prose, linkStyles.prose, markStyles.prose, preformattedStyles.prose, smallStyles.prose, strongStyles.prose, subscriptStyles.prose, superscriptStyles.prose, tableStyles.prose, dividerStyles.prose);
+const PROSE_STYLES = getClass(paragraphStyles.prose, headingStyles.prose, subheadingStyles.prose, addressStyles.prose, blockStyles.prose, blockquoteStyles.prose, codeStyles.prose, definitionsStyles.prose, deletedStyles.prose, emphasisStyles.prose, imageStyles.prose, insertedStyles.prose, listStyles.prose, linkStyles.prose, markStyles.prose, preformattedStyles.prose, smallStyles.prose, strongStyles.prose, subscriptStyles.prose, superscriptStyles.prose, tableStyles.prose, dividerStyles.prose);
 /** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
 export function Prose({ children }) {
     return _jsx("div", { className: PROSE_STYLES, children: children });

package/ui/block/Prose.tsx

@@ -12,10 +12,10 @@ import superscriptStyles from "../inline/Superscript.module.css";
 import { getClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import addressStyles from "./Address.module.css";
+import blockStyles from "./Block.module.css";
 import blockquoteStyles from "./Blockquote.module.css";
 import definitionsStyles from "./Definitions.module.css";
 import dividerStyles from "./Divider.module.css";
-import figureStyles from "./Figure.module.css";
 import headingStyles from "./Heading.module.css";
 import imageStyles from "./Image.module.css";
 import listStyles from "./List.module.css";
@@ -29,12 +29,12 @@ const PROSE_STYLES = getClass(
 	headingStyles.prose,
 	subheadingStyles.prose,
 	addressStyles.prose,
+	blockStyles.prose,
 	blockquoteStyles.prose,
 	codeStyles.prose,
 	definitionsStyles.prose,
 	deletedStyles.prose,
 	emphasisStyles.prose,
-	figureStyles.prose,
 	imageStyles.prose,
 	insertedStyles.prose,
 	listStyles.prose,

package/ui/block/Subheading.module.css

@@ -4,8 +4,7 @@
 	display: block;
 	inline-size: 100%;
 	margin-inline: 0;
-	/* `em` top margin scales with font-size, so larger headings get proportionally more space above them. */
-	margin-block-start: var(--subheading-spacing-before, 1.5em);
+	margin-block-start: var(--subheading-spacing-before, var(--spacing-section));
 	margin-block-end: var(--subheading-spacing, var(--space-normal));
 
 	/* Style */

package/ui/block/Table.d.ts

@@ -1,4 +1,9 @@
+import type { ReactElement } from "react";
 import type { ChildProps } from "../util/props.js";
 export interface TableProps extends ChildProps {
 }
-export declare function Table({ children }: TableProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Table block — rendered as `<table>`.
+ * - Wrap in a `<Figure scrollable>` (or any `scrollable` block) if the table may exceed the container width on small screens.
+ */
+export declare function Table({ children }: TableProps): ReactElement;

package/ui/block/Table.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./Table.module.css";
+/**
+ * Table block — rendered as `<table>`.
+ * - Wrap in a `<Figure scrollable>` (or any `scrollable` block) if the table may exceed the container width on small screens.
+ */
 export function Table({ children }) {
-    return (_jsx("div", { className: styles.wrap, children: _jsx("table", { className: styles.table, children: children }) }));
+    return _jsx("table", { className: styles.table, children: children });
 }

package/ui/block/Table.module.css

@@ -58,28 +58,3 @@
 		font-size: var(--table-label-size, var(--size-small));
 	}
 }
-
-.wrap {
-	/* Box */
-	display: block;
-	margin-block: var(--table-spacing, var(--space-normal));
-	margin-inline: calc(var(--space-normal) * -1);
-	padding-inline: var(--space-normal);
-
-	/* Contents */
-	overflow-x: auto;
-	white-space: nowrap;
-
-	/* Psuedo-classes */
-	&:first-child {
-		margin-block-start: 0;
-	}
-	&:last-child {
-		margin-block-end: 0;
-	}
-
-	/* Children */
-	.table {
-		min-width: 100%;
-	}
-}

package/ui/block/Table.tsx

@@ -1,12 +1,13 @@
+import type { ReactElement } from "react";
 import type { ChildProps } from "../util/props.js";
 import styles from "./Table.module.css";
 
 export interface TableProps extends ChildProps {}
 
-export function Table({ children }: TableProps) {
-	return (
-		<div className={styles.wrap}>
-			<table className={styles.table}>{children}</table>
-		</div>
-	);
+/**
+ * Table block — rendered as `<table>`.
+ * - Wrap in a `<Figure scrollable>` (or any `scrollable` block) if the table may exceed the container width on small screens.
+ */
+export function Table({ children }: TableProps): ReactElement {
+	return <table className={styles.table}>{children}</table>;
 }

package/ui/block/Title.module.css

@@ -4,8 +4,7 @@
 	display: block;
 	inline-size: 100%;
 	margin-inline: 0;
-	/* `em` top margin scales with font-size, so larger headings get proportionally more space above them. */
-	margin-block-start: var(--title-spacing-before, 1.5em);
+	margin-block-start: var(--title-spacing-before, var(--spacing-section));
 	margin-block-end: var(--title-spacing, var(--space-normal));
 
 	/* Style */

package/ui/block/index.d.ts

@@ -4,7 +4,6 @@ export * from "./Blockquote.js";
 export * from "./Card.js";
 export * from "./Definitions.js";
 export * from "./Divider.js";
-export * from "./Figure.js";
 export * from "./Flex.js";
 export * from "./Heading.js";
 export * from "./Image.js";
@@ -12,7 +11,6 @@ export * from "./List.js";
 export * from "./Paragraph.js";
 export * from "./Preformatted.js";
 export * from "./Prose.js";
-export * from "./Section.js";
 export * from "./Subheading.js";
 export * from "./Table.js";
 export * from "./Title.js";

package/ui/block/index.js

@@ -4,7 +4,6 @@ export * from "./Blockquote.js";
 export * from "./Card.js";
 export * from "./Definitions.js";
 export * from "./Divider.js";
-export * from "./Figure.js";
 export * from "./Flex.js";
 export * from "./Heading.js";
 export * from "./Image.js";
@@ -12,7 +11,6 @@ export * from "./List.js";
 export * from "./Paragraph.js";
 export * from "./Preformatted.js";
 export * from "./Prose.js";
-export * from "./Section.js";
 export * from "./Subheading.js";
 export * from "./Table.js";
 export * from "./Title.js";

package/ui/block/index.ts

@@ -4,7 +4,6 @@ export * from "./Blockquote.js";
 export * from "./Card.js";
 export * from "./Definitions.js";
 export * from "./Divider.js";
-export * from "./Figure.js";
 export * from "./Flex.js";
 export * from "./Heading.js";
 export * from "./Image.js";
@@ -12,7 +11,6 @@ export * from "./List.js";
 export * from "./Paragraph.js";
 export * from "./Preformatted.js";
 export * from "./Prose.js";
-export * from "./Section.js";
 export * from "./Subheading.js";
 export * from "./Table.js";
 export * from "./Title.js";

package/ui/docs/DirectoryPage.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { DirectoryElementProps } from "../../util/element.js";
+import { type DirectoryElementProps } from "../../util/element.js";
 import type { AbsolutePath } from "../../util/path.js";
 interface DirectoryPageProps extends DirectoryElementProps {
     /** Site-root-relative path of this page — threaded down so child cards build correct hrefs. */

package/ui/docs/DirectoryPage.js

@@ -1,4 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { walkElements } from "../../util/element.js";
+import { Heading } from "../block/Heading.js";
 import { Prose } from "../block/Prose.js";
 import { Title } from "../block/Title.js";
 import { Markup } from "../misc/Markup.js";
@@ -6,5 +8,6 @@ import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
 /** Page renderer for a `tree-directory` element — shows title, content, and child cards. */
 export function DirectoryPage({ path, title, name, description, content, children }) {
-    return (_jsxs(Page, { title: title ?? name, description: description, children: [_jsx(Title, { children: title ?? name }), content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })), _jsx(TreeCards, { path: path, children: children })] }));
+    const cards = Array.from(walkElements(children));
+    return (_jsxs(Page, { title: title ?? name, description: description, children: [_jsx(Title, { children: title ?? name }), content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })), cards.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { children: "Modules" }), _jsx(TreeCards, { path: path, children: cards })] }))] }));
 }

package/ui/docs/DirectoryPage.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import type { DirectoryElementProps } from "../../util/element.js";
+import { type DirectoryElementProps, walkElements } from "../../util/element.js";
 import type { AbsolutePath } from "../../util/path.js";
+import { Heading } from "../block/Heading.js";
 import { Prose } from "../block/Prose.js";
 import { Title } from "../block/Title.js";
 import { Markup } from "../misc/Markup.js";
@@ -14,6 +15,7 @@ interface DirectoryPageProps extends DirectoryElementProps {
 
 /** Page renderer for a `tree-directory` element — shows title, content, and child cards. */
 export function DirectoryPage({ path, title, name, description, content, children }: DirectoryPageProps): ReactNode {
+	const cards = Array.from(walkElements(children));
 	return (
 		<Page title={title ?? name} description={description}>
 			<Title>{title ?? name}</Title>
@@ -22,7 +24,12 @@ export function DirectoryPage({ path, title, name, description, content, childre
 					<Markup>{content}</Markup>
 				</Prose>
 			)}
-			<TreeCards path={path}>{children}</TreeCards>
+			{cards.length > 0 && (
+				<>
+					<Heading>Modules</Heading>
+					<TreeCards path={path}>{cards}</TreeCards>
+				</>
+			)}
 		</Page>
 	);
 }

package/ui/docs/DocumentationPage.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { queryElements } from "../../util/element.js";
+import { Section } from "../block/Block.js";
 import { Definition, Definitions } from "../block/Definitions.js";
 import { Flex } from "../block/Flex.js";
 import { Heading } from "../block/Heading.js";
 import { Preformatted } from "../block/Preformatted.js";
 import { Prose } from "../block/Prose.js";
-import { Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
 import { Code } from "../inline/Code.js";
 import { Markup } from "../misc/Markup.js";

package/ui/docs/DocumentationPage.tsx

@@ -2,12 +2,12 @@ import type { ReactNode } from "react";
 import { type DocumentationElementProps, type Element, queryElements, type TreeElement } from "../../util/element.js";
 import type { AbsolutePath } from "../../util/path.js";
 import type { Query } from "../../util/query.js";
+import { Section } from "../block/Block.js";
 import { Definition, Definitions } from "../block/Definitions.js";
 import { Flex } from "../block/Flex.js";
 import { Heading } from "../block/Heading.js";
 import { Preformatted } from "../block/Preformatted.js";
 import { Prose } from "../block/Prose.js";
-import { Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
 import { Code } from "../inline/Code.js";
 import { Markup } from "../misc/Markup.js";

package/ui/form/FormFooter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Footer } from "../block/Block.js";
 import { Flex } from "../block/Flex.js";
-import { Footer } from "../block/Section.js";
 import { FormMessage } from "./FormMessage.js";
 import { SubmitButton } from "./SubmitButton.js";
 /**

package/ui/form/FormFooter.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
+import { Footer } from "../block/Block.js";
 import { Flex } from "../block/Flex.js";
-import { Footer } from "../block/Section.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { FormMessage } from "./FormMessage.js";
 import { SubmitButton } from "./SubmitButton.js";

package/ui/inline/Code.module.css

@@ -1,5 +1,5 @@
 .code,
-.prose :is(code, kbd, samp, var) {
+.prose :is(code, kbd, samp, var):not(pre *) {
 	/* Box */
 	display: inline-block;
 	padding-inline: 0.375rem;

package/ui/block/Figure.d.ts

@@ -1,6 +0,0 @@
-import type { ReactElement, ReactNode } from "react";
-import type { OptionalChildProps } from "../util/props.js";
-export interface FigureProps extends OptionalChildProps {
-    caption?: ReactNode;
-}
-export declare function Figure({ children, caption }: FigureProps): ReactElement;

package/ui/block/Figure.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from "./Figure.module.css";
-export function Figure({ children, caption }) {
-    return (_jsxs("figure", { className: styles.figure, children: [children, caption && _jsx("figcaption", { className: styles.caption, children: caption })] }));
-}

package/ui/block/Figure.module.css

@@ -1,27 +0,0 @@
-.figure,
-.prose figure {
-	/* Box */
-	position: relative;
-	display: block;
-	margin-inline: 0;
-	margin-block: var(--figure-spacing, var(--space-normal));
-
-	/* Psuedo-classes */
-	&:first-child {
-		margin-block-start: 0;
-	}
-	&:last-child {
-		margin-block-end: 0;
-	}
-}
-
-.caption,
-.prose figcaption {
-	/* Box */
-	display: block;
-	margin-block-start: var(--caption-gap, var(--space-normal));
-
-	/* Style */
-	font-size: var(--caption-font-size, var(--size-small));
-	color: var(--caption-color, var(--color-quiet));
-}

package/ui/block/Figure.tsx

@@ -1,16 +0,0 @@
-import type { ReactElement, ReactNode } from "react";
-import type { OptionalChildProps } from "../util/props.js";
-import styles from "./Figure.module.css";
-
-export interface FigureProps extends OptionalChildProps {
-	caption?: ReactNode;
-}
-
-export function Figure({ children, caption }: FigureProps): ReactElement {
-	return (
-		<figure className={styles.figure}>
-			{children}
-			{caption && <figcaption className={styles.caption}>{caption}</figcaption>}
-		</figure>
-	);
-}

package/ui/block/Section.d.ts

@@ -1,28 +0,0 @@
-import type { ReactElement } from "react";
-import type { OptionalChildProps } from "../util/props.js";
-export interface SectionProps extends OptionalChildProps {
-    /** Constrain the section to narrow width (defaults to full-width). */
-    narrow?: boolean;
-    /** Constrain the section to wide width (defaults to full-width). */
-    wide?: boolean;
-    /** Constrain the section to spacious spacing (defaults to full-width). */
-    spacious?: boolean;
-}
-export interface HeaderProps extends SectionProps {
-}
-/** A single HTML `<header>` with correct spacing. */
-export declare function Header(props: HeaderProps): ReactElement;
-/** A single HTML `<section>` with correct spacing. */
-export declare function Section(props: SectionProps): ReactElement;
-export interface NavProps extends SectionProps {
-}
-/** A single HTML `<nav>` with correct spacing. */
-export declare function Nav(props: NavProps): ReactElement;
-export interface AsideProps extends SectionProps {
-}
-/** A single HTML `<aside>` with correct spacing. */
-export declare function Aside(props: AsideProps): ReactElement;
-export interface FooterProps extends SectionProps {
-}
-/** A single HTML `<footer>` with correct spacing. */
-export declare function Footer(props: FooterProps): ReactElement;

package/ui/block/Section.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
-import styles from "./Section.module.css";
-function renderSection(Component, { children, ...variants }) {
-    return _jsx(Component, { className: getModuleClass(styles, "section", variants), children: children });
-}
-/** A single HTML `<header>` with correct spacing. */
-export function Header(props) {
-    return renderSection("header", props);
-}
-/** A single HTML `<section>` with correct spacing. */
-export function Section(props) {
-    return renderSection("section", props);
-}
-/** A single HTML `<nav>` with correct spacing. */
-export function Nav(props) {
-    return renderSection("nav", props);
-}
-/** A single HTML `<aside>` with correct spacing. */
-export function Aside(props) {
-    return renderSection("aside", props);
-}
-/** A single HTML `<footer>` with correct spacing. */
-export function Footer(props) {
-    return renderSection("footer", props);
-}

package/ui/block/Section.module.css

@@ -1,28 +0,0 @@
-.section {
-	/* Box */
-	position: relative;
-	display: block;
-	margin-inline: 0;
-	margin-block: var(--section-spacing, var(--space-normal));
-
-	/* Psuedo-classes */
-	&:first-child {
-		margin-block-start: 0;
-	}
-	&:last-child {
-		margin-block-end: 0;
-	}
-
-	/* Variants */
-	&.narrow {
-		margin-inline: auto;
-		max-width: var(--section-width-narrow, var(--width-narrow));
-	}
-	&.wide {
-		margin-inline: auto;
-		max-width: var(--section-width-wide, var(--width-wide));
-	}
-	&.spacious {
-		margin-block: var(--paragraph-spacious-spacing, var(--space-xxlarge));
-	}
-}

package/ui/block/Section.tsx

@@ -1,53 +0,0 @@
-import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
-import styles from "./Section.module.css";
-
-export interface SectionProps extends OptionalChildProps {
-	/** Constrain the section to narrow width (defaults to full-width). */
-	narrow?: boolean;
-	/** Constrain the section to wide width (defaults to full-width). */
-	wide?: boolean;
-	/** Constrain the section to spacious spacing (defaults to full-width). */
-	spacious?: boolean;
-}
-
-function renderSection(
-	Component: "header" | "footer" | "nav" | "section" | "aside",
-	{ children, ...variants }: SectionProps,
-): ReactElement {
-	return <Component className={getModuleClass(styles, "section", variants)}>{children}</Component>;
-}
-
-export interface HeaderProps extends SectionProps {}
-
-/** A single HTML `<header>` with correct spacing. */
-export function Header(props: HeaderProps): ReactElement {
-	return renderSection("header", props);
-}
-
-/** A single HTML `<section>` with correct spacing. */
-export function Section(props: SectionProps): ReactElement {
-	return renderSection("section", props);
-}
-
-export interface NavProps extends SectionProps {}
-
-/** A single HTML `<nav>` with correct spacing. */
-export function Nav(props: NavProps): ReactElement {
-	return renderSection("nav", props);
-}
-
-export interface AsideProps extends SectionProps {}
-
-/** A single HTML `<aside>` with correct spacing. */
-export function Aside(props: AsideProps): ReactElement {
-	return renderSection("aside", props);
-}
-
-export interface FooterProps extends SectionProps {}
-
-/** A single HTML `<footer>` with correct spacing. */
-export function Footer(props: FooterProps): ReactElement {
-	return renderSection("footer", props);
-}