shelving 1.210.0 → 1.212.0

package/markup/rule/index.d.ts

@@ -17,7 +17,6 @@ export declare const MARKUP_RULES_INLINE: MarkupRules;
  *   - Hard because you have to capture the entire list including `\n\n`, so there's no obvious place to end it.
  *   - If there are breaks then any sub-lines need to be indented by two or more spaces otherwise it will break the list.
  *   - Make reference lists support this loose format too.
- * @todo [ ] Default rules support tables using `|` pipe syntax.
  * @todo [ ] Default rules support todo lists using `- [x]` syntax.
  * @todo [ ] Default rules support new reference syntax (combines reference lists/sidenotes/footnotes/reference and produces <dl> syntax).
  *   - All of these can be the same because reference links and Extended Markdown footnotes are basically the same.
@@ -44,4 +43,5 @@ export * from "./link.js";
 export * from "./ordered.js";
 export * from "./paragraph.js";
 export * from "./separator.js";
+export * from "./table.js";
 export * from "./unordered.js";

package/markup/rule/index.js

@@ -8,6 +8,7 @@ import { AUTOLINK_RULE, LINK_RULE } from "./link.js";
 import { ORDERED_RULE } from "./ordered.js";
 import { PARAGRAPH_RULE } from "./paragraph.js";
 import { SEPARATOR_RULE } from "./separator.js";
+import { TABLE_RULE } from "./table.js";
 import { UNORDERED_RULE } from "./unordered.js";
 /** Markup rules that work in a block context. */
 export const MARKUP_RULES_BLOCK = [
@@ -17,6 +18,7 @@ export const MARKUP_RULES_BLOCK = [
     UNORDERED_RULE,
     ORDERED_RULE,
     BLOCKQUOTE_RULE,
+    TABLE_RULE,
     PARAGRAPH_RULE,
 ];
 /** Markup rules that work in an inline context. */
@@ -34,7 +36,6 @@ export const MARKUP_RULES_INLINE = [CODE_RULE, LINK_RULE, AUTOLINK_RULE, INLINE_
  *   - Hard because you have to capture the entire list including `\n\n`, so there's no obvious place to end it.
  *   - If there are breaks then any sub-lines need to be indented by two or more spaces otherwise it will break the list.
  *   - Make reference lists support this loose format too.
- * @todo [ ] Default rules support tables using `|` pipe syntax.
  * @todo [ ] Default rules support todo lists using `- [x]` syntax.
  * @todo [ ] Default rules support new reference syntax (combines reference lists/sidenotes/footnotes/reference and produces <dl> syntax).
  *   - All of these can be the same because reference links and Extended Markdown footnotes are basically the same.
@@ -61,4 +62,5 @@ export * from "./link.js";
 export * from "./ordered.js";
 export * from "./paragraph.js";
 export * from "./separator.js";
+export * from "./table.js";
 export * from "./unordered.js";

package/markup/rule/table.d.ts

@@ -0,0 +1,13 @@
+/** Regular expression matching a table block: a header row, a delimiter row, then any number of pipe rows. */
+export declare const TABLE_REGEXP: import("../../index.js").NamedRegExp<{
+    table: string;
+}>;
+/**
+ * Table.
+ * - Markdown-style pipe table: a header row, a `|---|` delimiter row, then body rows.
+ * - Cells are pipe-separated; outer pipes are optional and whitespace around cells is trimmed.
+ * - Extra `|---|` delimiter rows split the table into sections: the first section becomes `<thead>`, the last becomes `<tfoot>` (only when there are three or more sections), and every section in between becomes its own `<tbody>`.
+ * - Column count and per-column alignment (`:--` left, `--:` right, `:-:` centered) come from the first delimiter row; ragged rows are padded or truncated to that count.
+ * - Cell content is rendered as inline markup; write `\|` for a literal pipe inside a cell.
+ */
+export declare const TABLE_RULE: import("../util/rule.js").MarkupRule;

package/markup/rule/table.js

@@ -0,0 +1,92 @@
+import { renderMarkup } from "../render.js";
+import { REACT_ELEMENT_TYPE } from "../util/internal.js";
+import { createBlockRegExp, LINE_SPACE_REGEXP } from "../util/regexp.js";
+import { createMarkupRule } from "../util/rule.js";
+// Constants.
+const _SPACE = `${LINE_SPACE_REGEXP}*`; // Run of line whitespace (never crosses a newline).
+const _CELL = `${_SPACE}:?-+:?${_SPACE}`; // Delimiter-row cell: one or more dashes with optional `:` alignment markers.
+const _DELIMITER_SOURCE = `${_SPACE}\\|?(?:${_CELL}\\|)+(?:${_CELL})?${_SPACE}`; // Delimiter row: pipe-separated dash cells.
+const _DELIMITER = new RegExp(`^${_DELIMITER_SOURCE}$`, "u"); // Tests whether a single line is a delimiter row.
+const _ROW = "[^\\n]*\\|[^\\n]*"; // Any line containing at least one pipe.
+const _SPLIT = /(?<!\\)\|/; // Splits a row into cells on unescaped pipes.
+/** Regular expression matching a table block: a header row, a delimiter row, then any number of pipe rows. */
+export const TABLE_REGEXP = createBlockRegExp(`(?<table>${_ROW}\\n${_DELIMITER_SOURCE}(?:\\n${_ROW})*)`);
+/**
+ * Table.
+ * - Markdown-style pipe table: a header row, a `|---|` delimiter row, then body rows.
+ * - Cells are pipe-separated; outer pipes are optional and whitespace around cells is trimmed.
+ * - Extra `|---|` delimiter rows split the table into sections: the first section becomes `<thead>`, the last becomes `<tfoot>` (only when there are three or more sections), and every section in between becomes its own `<tbody>`.
+ * - Column count and per-column alignment (`:--` left, `--:` right, `:-:` centered) come from the first delimiter row; ragged rows are padded or truncated to that count.
+ * - Cell content is rendered as inline markup; write `\|` for a literal pipe inside a cell.
+ */
+export const TABLE_RULE = createMarkupRule(TABLE_REGEXP, ({ groups: { table } }, options, key) => _renderTable(table, options, key), [
+    "block",
+]);
+/** Render a matched table block into a `<table>` element. */
+function _renderTable(table, options, key) {
+    const lines = table.split("\n");
+    // Column count and alignment come from the first delimiter row — always line 1, guaranteed by `TABLE_REGEXP`.
+    const aligns = _splitRow(lines[1] ?? "").map(_getAlign);
+    // Split lines into sections at delimiter rows. Line 0 is the header and is never treated as a delimiter.
+    const sections = [];
+    let section = [lines[0] ?? ""];
+    for (let i = 1; i < lines.length; i++) {
+        const line = lines[i] ?? "";
+        if (_DELIMITER.test(line)) {
+            sections.push(section);
+            section = [];
+        }
+        else {
+            section.push(line);
+        }
+    }
+    sections.push(section);
+    // First section is `<thead>`; the last is `<tfoot>` when there are 3+ sections; sections in between are each a `<tbody>`.
+    const last = sections.length - 1;
+    const children = sections.map((rows, s) => {
+        const type = s === 0 ? "thead" : s === last && last >= 2 ? "tfoot" : "tbody";
+        return {
+            $$typeof: REACT_ELEMENT_TYPE,
+            type,
+            key: `${type}-${s}`,
+            props: { children: Array.from(_renderRows(rows, s === 0 ? "th" : "td", aligns, options)) },
+        };
+    });
+    return { key, $$typeof: REACT_ELEMENT_TYPE, type: "table", props: { children } };
+}
+/** Render the rows of one section into `<tr>` elements of `<th>` or `<td>` cells. */
+function* _renderRows(rows, cell, aligns, options) {
+    let r = 0;
+    for (const row of rows) {
+        const values = _splitRow(row);
+        const cells = aligns.map((align, c) => {
+            const children = renderMarkup(values[c] ?? "", options, "inline");
+            return {
+                $$typeof: REACT_ELEMENT_TYPE,
+                type: cell,
+                key: c.toString(),
+                props: align ? { align, children } : { children },
+            };
+        });
+        yield { $$typeof: REACT_ELEMENT_TYPE, type: "tr", key: (r++).toString(), props: { children: cells } };
+    }
+}
+/** Split a table row into trimmed cell strings, honouring `\|` escaped pipes. */
+function _splitRow(row) {
+    let line = row.trim();
+    if (line.startsWith("|"))
+        line = line.slice(1);
+    if (line.endsWith("|"))
+        line = line.slice(0, -1);
+    return line.split(_SPLIT).map(cell => cell.trim().replaceAll("\\|", "|"));
+}
+/** Get the alignment of a delimiter-row cell, or `undefined` for the default (left). */
+function _getAlign(cell) {
+    const start = cell.startsWith(":");
+    const end = cell.endsWith(":");
+    if (start && end)
+        return "center";
+    if (end)
+        return "right";
+    return undefined;
+}

package/package.json

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

package/ui/layout/Layout.module.css

@@ -15,7 +15,7 @@ html:has(.layout) {
 	width: 100vw;
 	width: 100dvw;
 	overflow: hidden;
-	overflow-wrap: anywhere;
+	overflow-wrap: break-word; /* Break overlong words only as a last resort; `anywhere` would also break mid-word to fit narrow table/flex columns. */
 	overscroll-behavior: none;
 }
 

package/ui/layout/SidebarLayout.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 export interface SidebarLayoutProps {
     /** Content rendered in the fixed-width side column. */
@@ -11,7 +11,8 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export declare function SidebarLayout({ sidebar, children, right }: SidebarLayoutProps): ReactElement;

package/ui/layout/SidebarLayout.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useId } from "react";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CSS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }) {
-    const sidebarEl = (_jsx("nav", { className: SIDEBAR_LAYOUT_CSS.sidebar, children: sidebar }, "sidebar"));
-    const contentEl = (_jsx("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children }) }, "content"));
-    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: right ? [contentEl, sidebarEl] : [sidebarEl, contentEl] }));
+    // Ties the toggle checkbox to its `<label>` buttons — `useId()` is stable during static (non-hydrated) rendering.
+    const id = useId();
+    const sidebarEl = (_jsxs("nav", { className: SIDEBAR_LAYOUT_CSS.sidebar, children: [_jsx("label", { htmlFor: id, title: "Close menu", className: SIDEBAR_LAYOUT_CSS.close, children: _jsx(XMarkIcon, {}) }), sidebar] }, "sidebar"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("label", { htmlFor: id, title: "Show menu", className: SIDEBAR_LAYOUT_CSS.show, children: _jsx(Bars3Icon, {}) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, "content"));
+    return (_jsxs("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: [_jsx("input", { type: "checkbox", id: id, className: SIDEBAR_LAYOUT_CSS.toggle, "aria-label": "Show or hide menu" }), right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]] }));
 }
 export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.module.css

@@ -5,6 +5,10 @@
  * here we override its block-level behaviour so the sidebar and content each scroll independently.
  * The inner `.content` element reuses the `.layout` class too so it picks up the standard
  * layout padding, safe-area insets, and `overflow: hidden auto` scroll behaviour.
+ *
+ * On narrow viewports the sidebar becomes an off-canvas drawer: it slides off the left edge of the
+ * screen and is toggled by the hidden `.toggle` checkbox via its `.show` / `.close` `<label>` buttons.
+ * Driving the drawer with a checkbox + CSS means it works even when the page ships no client-side JS.
  */
 
 .main {
@@ -34,14 +38,77 @@
 	margin: 0 auto;
 }
 
-/* On narrow viewports collapse to a single column with the sidebar above. */
+/* Toggle checkbox — hidden entirely on wide viewports (see media query for the narrow-viewport state). */
+.toggle {
+	display: none;
+}
+
+/* Menu toggle buttons — hidden by default, only shown on narrow viewports (see media query below). */
+.show,
+.close {
+	display: none;
+	width: fit-content;
+	margin: 0;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-small);
+	border-radius: var(--radius-xsmall);
+	color: var(--color-text);
+	cursor: pointer;
+
+	& svg {
+		width: var(--size-icon);
+		height: var(--size-icon);
+	}
+
+	&:hover {
+		background: var(--color-surface);
+	}
+}
+
+/* The close button sits at the top of the sidebar, aligned to its trailing edge. */
+.close {
+	margin-inline-start: auto;
+	margin-bottom: var(--space-xsmall);
+}
+
+/* On narrow viewports the sidebar becomes an off-canvas drawer that slides in from the left. */
 @media (max-width: 48rem) {
 	.main {
 		grid-template-columns: 1fr;
 	}
 	.sidebar {
-		border-right: none;
-		border-bottom: 1px solid var(--color-border);
-		max-height: 50vh;
+		position: fixed;
+		z-index: 100;
+		inset-block: 0;
+		left: 0;
+		width: var(--sidebar-layout-width, 17.5rem);
+		max-width: 85vw;
+		transform: translateX(-100%);
+		transition: transform var(--duration-normal) ease-in-out;
+	}
+	/* Checked checkbox → drawer slides on screen. */
+	.toggle:checked ~ .sidebar {
+		transform: translateX(0);
+		box-shadow: 0 0 1.5rem var(--color-overlay);
+	}
+	/* Keep the checkbox visually hidden but still focusable for keyboard users. */
+	.toggle {
+		display: block;
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+	}
+	.show,
+	.close {
+		display: flex;
+	}
+	/* Forward the checkbox's keyboard focus ring to whichever toggle button is on screen. */
+	.toggle:focus-visible ~ .content .show,
+	.toggle:focus-visible ~ .sidebar .close {
+		outline: var(--stroke-focus) solid var(--color-focus);
+		outline-offset: 2px;
 	}
 }

package/ui/layout/SidebarLayout.tsx

@@ -1,4 +1,5 @@
-import type { ReactElement, ReactNode } from "react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { type ReactElement, type ReactNode, useId } from "react";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CSS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
@@ -15,22 +16,35 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement {
+	// Ties the toggle checkbox to its `<label>` buttons — `useId()` is stable during static (non-hydrated) rendering.
+	const id = useId();
+
 	const sidebarEl = (
 		<nav key="sidebar" className={SIDEBAR_LAYOUT_CSS.sidebar}>
+			<label htmlFor={id} title="Close menu" className={SIDEBAR_LAYOUT_CSS.close}>
+				<XMarkIcon />
+			</label>
 			{sidebar}
 		</nav>
 	);
 	const contentEl = (
 		<div key="content" className={getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content)}>
+			<label htmlFor={id} title="Show menu" className={SIDEBAR_LAYOUT_CSS.show}>
+				<Bars3Icon />
+			</label>
 			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
 		</div>
 	);
 	return (
-		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}</main>
+		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>
+			<input type="checkbox" id={id} className={SIDEBAR_LAYOUT_CSS.toggle} aria-label="Show or hide menu" />
+			{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}
+		</main>
 	);
 }