shelving 1.225.0 → 1.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.225.0",
+	"version": "1.226.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.module.css

@@ -1,6 +1,6 @@
 .block {
 	/* Box */
-	margin: var(--element-spacing, var(--space-small)) 0;
+	margin: var(--element-spacing, var(--spacing-section)) 0;
 
 	/* Psuedo-classes */
 	&:first-child {

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/Section.module.css

@@ -3,7 +3,7 @@
 	position: relative;
 	display: block;
 	margin-inline: 0;
-	margin-block: var(--section-spacing, var(--space-normal));
+	margin-block: var(--section-spacing, var(--spacing-section));
 
 	/* Psuedo-classes */
 	&:first-child {

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/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/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>
 	);
 }