shelving 1.212.0 → 1.213.0

package/extract/Extractor.js

@@ -20,8 +20,6 @@ export function mergeTreeElements(primary, secondary) {
         key: primary.key,
         props: {
             ...primary.props,
-            title: primary.props.title,
-            source: primary.props.source,
             description: primary.props.description ?? secondary.props.description,
             content: _mergeContent(primary.props.content, secondary.props.content),
             children: mergeElements(primary.props.children, secondary.props.children),

package/index.d.ts

@@ -6,7 +6,6 @@
 export * from "./api/index.js";
 export * from "./db/index.js";
 export * from "./error/index.js";
-export * from "./markup/index.js";
 export * from "./schema/index.js";
 export * from "./sequence/index.js";
 export * from "./store/index.js";

package/index.js

@@ -9,7 +9,7 @@ export * from "./error/index.js";
 // export * from "./firestore/client/index.js"; // Not exported.
 // export * from "./firestore/lite/index.js"; // Not exported.
 // export * from "./firestore/server/index.js"; // Not exported.
-export * from "./markup/index.js";
+// export * from "./markup/index.js"; // Not exported — `shelving/markup` now compiles JSX and imports React's JSX runtime.
 // export * from "./react/index.js"; // Not exported.
 export * from "./schema/index.js";
 // export * from "./ui/index.js"; // Not exported — shelving/ui requires a bundler (CSS Modules, JSX) and is consumed as source.

package/markup/render.d.ts

@@ -1,4 +1,4 @@
-import type { Elements } from "../util/element.js";
+import type { ReactNode } from "react";
 import type { MarkupOptions } from "./util/options.js";
 /**
  * Parse a text string as Markdownish syntax and render it as elements.
@@ -8,6 +8,6 @@ import type { MarkupOptions } from "./util/options.js";
  * @param options An options object for the render.
  * @param context The context to render in (defaults to `"block"`).
  *
- * @returns Elements, i.e. either a complete `Element`, `null`, `undefined`, `string`, or an array of zero or more of those.
+ * @returns A React node — an element, a string, `null`, or an array of zero or more of those.
  */
-export declare function renderMarkup(input: string, options: MarkupOptions, context?: string): Elements;
+export declare function renderMarkup(input: string, options: MarkupOptions, context?: string): ReactNode;

package/markup/render.js

@@ -6,7 +6,7 @@
  * @param options An options object for the render.
  * @param context The context to render in (defaults to `"block"`).
  *
- * @returns Elements, i.e. either a complete `Element`, `null`, `undefined`, `string`, or an array of zero or more of those.
+ * @returns A React node — an element, a string, `null`, or an array of zero or more of those.
  */
 export function renderMarkup(input, options, context = "block") {
     const arr = Array.from(_parseString(input, options, context));

package/markup/rule/blockquote.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { BLOCK_CONTENT_REGEXP, createBlockRegExp } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const PREFIX = ">";
@@ -11,9 +11,4 @@ export const BLOCKQUOTE_REGEXP = createBlockRegExp(`${PREFIX}${BLOCK_CONTENT_REG
  * - No spaces can appear before the `>` quote character.
  * - Quote block is only broken by `\n\n` two newline characters.
  */
-export const BLOCKQUOTE_RULE = createMarkupRule(BLOCKQUOTE_REGEXP, ([quote], options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "blockquote",
-    props: { children: renderMarkup(quote.replace(INDENT, ""), options, "block") },
-}), ["block", "list"]);
+export const BLOCKQUOTE_RULE = createMarkupRule(BLOCKQUOTE_REGEXP, ([quote], options, key) => _jsx("blockquote", { children: renderMarkup(quote.replace(INDENT, ""), options, "block") }, key), ["block", "list"]);

package/markup/rule/code.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getRegExp } from "../../util/regexp.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { BLOCK_CONTENT_REGEXP } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const CODE_REGEXP = getRegExp(`(?<fence>\`+)(?<code>${BLOCK_CONTENT_REGEXP})\\k<fence>`);
@@ -10,9 +10,4 @@ const CODE_REGEXP = getRegExp(`(?<fence>\`+)(?<code>${BLOCK_CONTENT_REGEXP})\\k<
  * - Closing characters must exactly match opening characters.
  * - Same as Markdown syntax.
  */
-export const CODE_RULE = createMarkupRule(CODE_REGEXP, ({ groups: { code } }, _options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "code",
-    props: { children: code },
-}), ["inline", "list"], 10);
+export const CODE_RULE = createMarkupRule(CODE_REGEXP, ({ groups: { code } }, _options, key) => _jsx("code", { children: code }, key), ["inline", "list"], 10);

package/markup/rule/fenced.js

@@ -1,4 +1,4 @@
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { BLOCK_CONTENT_REGEXP, BLOCK_START_REGEXP, createBlockRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const FENCE = "`{3,}|~{3,}";
@@ -16,19 +16,4 @@ const FENCED_REGEXP = createBlockRegExp(`(?<code>${BLOCK_CONTENT_REGEXP})`,
  * - If there's no closing fence the code block will run to the end of the current string.
  * - 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(FENCED_REGEXP, ({ groups: { title, code } }, _options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "pre",
-    props: {
-        children: {
-            $$typeof: REACT_ELEMENT_TYPE,
-            type: "code",
-            key: null,
-            props: {
-                title: title?.trim() || undefined,
-                children: code.trim(),
-            },
-        },
-    },
-}), ["block", "list"], 10);
+export const FENCED_RULE = createMarkupRule(FENCED_REGEXP, ({ groups: { title, code } }, _options, key) => (_jsx("pre", { children: _jsx("code", { title: title?.trim() || undefined, children: code.trim() }) }, key)), ["block", "list"], 10);

package/markup/rule/heading.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { createLineRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const HEADING_REGEXP = createLineRegExp(`(?<prefix>#{1,6})(?:${LINE_SPACE_REGEXP}+(?<heading>${LINE_CONTENT_REGEXP}))?`);
@@ -9,9 +9,8 @@ const HEADING_REGEXP = createLineRegExp(`(?<prefix>#{1,6})(?:${LINE_SPACE_REGEXP
  * - `#` must be the first character on the line.
  * - Markdown's underline syntax is not supported (for simplification).
  */
-export const HEADING_RULE = createMarkupRule(HEADING_REGEXP, ({ groups: { prefix, heading = "" } }, options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: `h${prefix.length}`,
-    props: { children: renderMarkup(heading.trim(), options, "inline") },
-}), ["block"]);
+export const HEADING_RULE = createMarkupRule(HEADING_REGEXP, ({ groups: { prefix, heading = "" } }, options, key) => {
+    // The hash count picks the heading level; cast the dynamic tag to the known `h1`–`h6` set.
+    const Heading = `h${prefix.length}`;
+    return _jsx(Heading, { children: renderMarkup(heading.trim(), options, "inline") }, key);
+}, ["block"]);

package/markup/rule/inline.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { createWordRegExp } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 /** Map characters, e.g. `*`, to their coresponding HTML tag, e.g. `strong` */
@@ -18,9 +18,7 @@ const INLINE_REGEXP = createWordRegExp(`(?<wrap>(?<char>[${Object.keys(INLINE_CH
  * - Closing characters must exactly match opening characters.
  * - Different to Markdown: strong is always surrounded by `*asterisks*` and emphasis is always surrounded by `_underscores_` (strong isn't 'double emphasis').
  */
-export const INLINE_RULE = createMarkupRule(INLINE_REGEXP, ({ groups: { char, text } }, options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: INLINE_CHARS[char],
-    props: { children: renderMarkup(text, options, "inline") },
-}), ["inline", "list", "link"]);
+export const INLINE_RULE = createMarkupRule(INLINE_REGEXP, ({ groups: { char, text } }, options, key) => {
+    const Inline = INLINE_CHARS[char];
+    return _jsx(Inline, { children: renderMarkup(text, options, "inline") }, key);
+}, ["inline", "list", "link"]);

package/markup/rule/linebreak.js

@@ -1,4 +1,4 @@
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createMarkupRule } from "../util/rule.js";
 /**
  * Hard linebreak (`<br />` tag).
@@ -10,9 +10,8 @@ import { createMarkupRule } from "../util/rule.js";
  *   - This is more intuitive (a linebreak becomes a linebreak is isn't silently ignored).
  *   - This works better with textareas that wrap text (since manually breaking up long lines is no longer necessary).
  */
-export const LINEBREAK_RULE = createMarkupRule(/[^\n\S]*\n[^\n\S]*/, (_match, _options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "br",
-    props: {},
-}), ["inline", "list", "link"]);
+export const LINEBREAK_RULE = createMarkupRule(/[^\n\S]*\n[^\n\S]*/, (_match, _options, key) => _jsx("br", {}, key), [
+    "inline",
+    "list",
+    "link",
+]);

package/markup/rule/link.js

@@ -1,9 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { formatURI } from "../../util/format.js";
 import { getLink } from "../../util/link.js";
 import { getRegExp } from "../../util/regexp.js";
 import { HTTP_SCHEMES } from "../../util/uri.js";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { createMarkupRule } from "../util/rule.js";
 /** Render `<a href="">` if the link is a valid one, or `<a>` (with no `href`) if it isn't. */
 function renderLinkMarkupRule({ groups: { title, href: unsafeHref } }, options, key) {
@@ -11,12 +11,7 @@ function renderLinkMarkupRule({ groups: { title, href: unsafeHref } }, options,
     const link = getLink(unsafeHref, url, root);
     const href = link && schemes.includes(link.protocol) ? link?.href : undefined;
     const children = title ? renderMarkup(title, options, "link") : link ? formatURI(link) : "";
-    return {
-        key,
-        $$typeof: REACT_ELEMENT_TYPE,
-        type: "a",
-        props: { href, rel, children },
-    };
+    return (_jsx("a", { href: href, rel: rel, children: children }, key));
 }
 export const LINK_REGEXP = getRegExp(/\[(?<title>[^\]\n]*?)\]\((?<href>[^)\n]*?)\)/);
 /**
@@ -27,8 +22,7 @@ export const LINK_REGEXP = getRegExp(/\[(?<title>[^\]\n]*?)\]\((?<href>[^)\n]*?)
  * - If link is not valid (using `new URL(url)` then unparsed text will be returned.
  * - For security only `http://` or `https://` links will work (if invalid the unparsed text will be returned).
  */
-export const LINK_RULE = createMarkupRule(LINK_REGEXP, //
-renderLinkMarkupRule, ["inline", "list"]);
+export const LINK_RULE = createMarkupRule(LINK_REGEXP, renderLinkMarkupRule, ["inline", "list"]);
 export const AUTOLINK_REGEXP = getRegExp(/(?<href>[a-z]{2,}:\S+)(?: +(?:\((?<title>[^)\n]*?)\)))?/);
 /**
  * Autolinked URL starts with `scheme://` (any scheme in `options.schemes`) and matches an unlimited number of non-space characters.
@@ -37,5 +31,4 @@ export const AUTOLINK_REGEXP = getRegExp(/(?<href>[a-z]{2,}:\S+)(?: +(?:\((?<tit
  * - If link is not valid (using `new URL(url)` then unparsed text will be returned.
  * - For security only schemes that appear in `options.schemes` will match (defaults to `http:` and `https:`).
  */
-export const AUTOLINK_RULE = createMarkupRule(AUTOLINK_REGEXP, //
-renderLinkMarkupRule, ["inline", "list"]);
+export const AUTOLINK_RULE = createMarkupRule(AUTOLINK_REGEXP, renderLinkMarkupRule, ["inline", "list"]);

package/markup/rule/ordered.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { BLOCK_CONTENT_REGEXP, BLOCK_SPACE_REGEXP, createBlockRegExp, LINE_SPACE_REGEXP } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const INDENT = /^\t/gm; // Nesting is recognised with tabs only.
@@ -13,27 +13,11 @@ export const ORDERED_REGEXP = createBlockRegExp(`(?<list>${NUMBER}(?:${LINE_SPAC
  * - Second-level list can be created by indenting with `\t` one tab.
  * - Sparse lists are not supported.
  */
-export const ORDERED_RULE = createMarkupRule(ORDERED_REGEXP, ({ groups: { list } }, options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "ol",
-    props: {
-        children: Array.from(_getOrderedItems(list, options)),
-    },
-}), ["block", "list"]);
+export const ORDERED_RULE = createMarkupRule(ORDERED_REGEXP, ({ groups: { list } }, options, key) => _jsx("ol", { children: Array.from(_getOrderedItems(list, options)) }, key), ["block", "list"]);
 /** Parse a markdown list into a set of items elements. */
 function* _getOrderedItems(list, options) {
     let key = 0;
     for (const [_unused, number = "", item = ""] of list.matchAll(ITEM)) {
-        yield {
-            $$typeof: REACT_ELEMENT_TYPE,
-            type: "li",
-            props: {
-                value: Number.parseInt(number, 10),
-                children: renderMarkup(item.replace(INDENT, ""), options, "list"),
-            },
-            key: key.toString(),
-        };
-        key++;
+        yield (_jsx("li", { value: Number.parseInt(number, 10), children: renderMarkup(item.replace(INDENT, ""), options, "list") }, key++));
     }
 }

package/markup/rule/paragraph.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { BLOCK_SPACE_REGEXP, BLOCK_START_REGEXP, createBlockRegExp } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 export const PARAGRAPH_REGEXP = createBlockRegExp("(?<paragraph>(?:(?=\\S)[\\s\\S]*?\\S))", 
@@ -11,9 +11,4 @@ export const PARAGRAPH_REGEXP = createBlockRegExp("(?<paragraph>(?:(?=\\S)[\\s\\
  * - Any run of non-whitespace.
  * - Leading and trailing whitespace is trimmed.
  */
-export const PARAGRAPH_RULE = createMarkupRule(PARAGRAPH_REGEXP, ({ groups: { paragraph } }, options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "p",
-    props: { children: renderMarkup(paragraph, options, "inline") },
-}), ["block"], -10);
+export const PARAGRAPH_RULE = createMarkupRule(PARAGRAPH_REGEXP, ({ groups: { paragraph } }, options, key) => _jsx("p", { children: renderMarkup(paragraph, options, "inline") }, key), ["block"], -10);

package/markup/rule/separator.js

@@ -1,4 +1,4 @@
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createLineRegExp } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const SEPARATOR_REGEXP = createLineRegExp("([-*•+_=])(?: *\\1){2,}");
@@ -9,9 +9,4 @@ const SEPARATOR_REGEXP = createLineRegExp("([-*•+_=])(?: *\\1){2,}");
  * - Character must be the same every time (can't mix)
  * - Might have infinite number of spaces between the characters.
  */
-export const SEPARATOR_RULE = createMarkupRule(SEPARATOR_REGEXP, (_match, _options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "hr",
-    props: {},
-}), ["block"]);
+export const SEPARATOR_RULE = createMarkupRule(SEPARATOR_REGEXP, (_match, _options, key) => _jsx("hr", {}, key), ["block"]);

package/markup/rule/table.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 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.
@@ -41,35 +41,26 @@ function _renderTable(table, options, key) {
         }
     }
     sections.push(section);
-    // First section is `<thead>`; the last is `<tfoot>` when there are 3+ sections; sections in between are each a `<tbody>`.
+    // Build the table with explicit loops — markup elements are static and positional, so the loop index is the natural key.
     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 } };
+    const body = [];
+    for (let s = 0; s < sections.length; s++) {
+        // First section is `<thead>`; the last is `<tfoot>` with 3+ sections; sections in between are each a `<tbody>`.
+        const Section = s === 0 ? "thead" : s === last && last >= 2 ? "tfoot" : "tbody";
+        const Cell = s === 0 ? "th" : "td";
+        const rowLines = sections[s] ?? [];
+        const rows = [];
+        for (let r = 0; r < rowLines.length; r++) {
+            const values = _splitRow(rowLines[r] ?? "");
+            const cells = [];
+            for (let c = 0; c < aligns.length; c++) {
+                cells.push(_jsx(Cell, { align: aligns[c], children: renderMarkup(values[c] ?? "", options, "inline") }, c));
+            }
+            rows.push(_jsx("tr", { children: cells }, r));
+        }
+        body.push(_jsx(Section, { children: rows }, s));
     }
+    return _jsx("table", { children: body }, key);
 }
 /** Split a table row into trimmed cell strings, honouring `\|` escaped pipes. */
 function _splitRow(row) {

package/markup/rule/unordered.d.ts

@@ -1,4 +1,4 @@
-import type { Element } from "../../util/element.js";
+import type { ReactElement } from "react";
 import type { MarkupOptions } from "../util/options.js";
 export declare const UNORDERED_REGEXP: import("../../index.js").NamedRegExp<{
     list?: string;
@@ -13,4 +13,4 @@ export declare const UNORDERED_REGEXP: import("../../index.js").NamedRegExp<{
  */
 export declare const UNORDERED_RULE: import("../util/rule.js").MarkupRule;
 /** Parse a markdown list into a set of items elements. */
-export declare function _getItems(list: string, options: MarkupOptions): Iterable<Element>;
+export declare function _getItems(list: string, options: MarkupOptions): Iterable<ReactElement>;

package/markup/rule/unordered.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderMarkup } from "../render.js";
-import { REACT_ELEMENT_TYPE } from "../util/internal.js";
 import { BLOCK_CONTENT_REGEXP, BLOCK_SPACE_REGEXP, createBlockRegExp, LINE_SPACE_REGEXP } from "../util/regexp.js";
 import { createMarkupRule } from "../util/rule.js";
 const INDENT = /^\t/gm; // Nesting is recognised with tabs only.
@@ -14,26 +14,11 @@ export const UNORDERED_REGEXP = createBlockRegExp(`(?<list>${BULLET}(?:${LINE_SP
  * - List block is ended by `\n\n` two newline characters.
  * - Sparse lists are not supported.
  */
-export const UNORDERED_RULE = createMarkupRule(UNORDERED_REGEXP, ({ groups: { list = "" } }, options, key) => ({
-    key,
-    $$typeof: REACT_ELEMENT_TYPE,
-    type: "ul",
-    props: {
-        children: Array.from(_getItems(list, options)),
-    },
-}), ["block", "list"]);
+export const UNORDERED_RULE = createMarkupRule(UNORDERED_REGEXP, ({ groups: { list = "" } }, options, key) => _jsx("ul", { children: Array.from(_getItems(list, options)) }, key), ["block", "list"]);
 /** Parse a markdown list into a set of items elements. */
 export function* _getItems(list, options) {
     let key = 0;
     for (const [_unused, item = ""] of list.matchAll(ITEM)) {
-        yield {
-            $$typeof: REACT_ELEMENT_TYPE,
-            type: "li",
-            props: {
-                children: renderMarkup(item.replace(INDENT, ""), options, "list"),
-            },
-            key: key.toString(),
-        };
-        key++;
+        yield _jsx("li", { children: renderMarkup(item.replace(INDENT, ""), options, "list") }, key++);
     }
 }

package/markup/util/rule.d.ts

@@ -1,4 +1,4 @@
-import type { Element } from "../../util/element.js";
+import type { ReactElement } from "react";
 import type { NamedRegExp, NamedRegExpExecArray } from "../../util/regexp.js";
 import type { MarkupOptions } from "./options.js";
 export type MarkupContexts = [string, ...string[]];
@@ -6,7 +6,7 @@ export interface MarkupRule {
     /** Regular expression used for matching the rule. */
     regexp: RegExp;
     /** Use the matched data to render an element. */
-    render(match: RegExpExecArray, options: MarkupOptions, key: string): Element;
+    render(match: RegExpExecArray, options: MarkupOptions, key: string): ReactElement;
     /** One or more contexts this rule should render in. */
     contexts: MarkupContexts;
     /** Priority for this rule (higher priority rules override lower priority rules). */
@@ -14,4 +14,4 @@ export interface MarkupRule {
 }
 export type MarkupRules = readonly MarkupRule[];
 /** Helper to make it easier to create typed `MarkupRule` instances using `NamedRegExp` regular expressions. */
-export declare function createMarkupRule<T extends NamedRegExp | RegExp>(regexp: T, render: T extends NamedRegExp<infer X> ? (match: NamedRegExpExecArray<X>, options: MarkupOptions, key: string) => Element : (match: RegExpExecArray, options: MarkupOptions, key: string) => Element, contexts: MarkupContexts, priority?: number): MarkupRule;
+export declare function createMarkupRule<T extends NamedRegExp | RegExp>(regexp: T, render: T extends NamedRegExp<infer X> ? (match: NamedRegExpExecArray<X>, options: MarkupOptions, key: string) => ReactElement : (match: RegExpExecArray, options: MarkupOptions, key: string) => ReactElement, contexts: MarkupContexts, priority?: number): MarkupRule;

package/package.json

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

package/ui/layout/SidebarLayout.d.ts

@@ -11,8 +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.
- * - 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.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - 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,21 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import { useId } from "react";
+import { use, useEffect, useState } from "react";
+import { useStore } from "../../react/useStore.js";
+import { Button } from "../form/Button.js";
+import { NavigationContext } from "../router/NavigationContext.js";
 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.
- * - 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.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }) {
-    // 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]] }));
+    const [open, setOpen] = useState(false);
+    // Close the drawer whenever navigation changes the URL — covers tapping a link inside the sidebar.
+    const href = useStore(use(NavigationContext))?.href;
+    useEffect(() => {
+        if (href)
+            setOpen(false);
+    }, [href]);
+    const sidebarEl = (_jsxs("nav", { className: getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.close, children: _jsx(Button, { plain: true, fit: true, title: "Close menu", onClick: () => setOpen(false), children: _jsx(XMarkIcon, {}) }) }), sidebar] }, "sidebar"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.show, children: _jsx(Button, { plain: true, fit: true, title: "Show menu", onClick: () => setOpen(true), children: _jsx(Bars3Icon, {}) }) }), _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] }));
 }
 export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.module.css

@@ -6,9 +6,8 @@
  * 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.
+ * On narrow viewports the sidebar becomes an off-canvas drawer that slides off the left edge of the
+ * screen; the `.show` / `.close` buttons toggle it (both are hidden entirely on wide viewports).
  */
 
 .main {
@@ -38,38 +37,16 @@
 	margin: 0 auto;
 }
 
-/* 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). */
+/* Wrappers for the menu toggle buttons — hidden on wide viewports, shown on narrow ones (see media query). */
 .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);
-	}
+	margin-bottom: var(--space-xsmall);
 }
 
 /* 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);
+	justify-content: flex-end;
 }
 
 /* On narrow viewports the sidebar becomes an off-canvas drawer that slides in from the left. */
@@ -87,28 +64,12 @@
 		transform: translateX(-100%);
 		transition: transform var(--duration-normal) ease-in-out;
 	}
-	/* Checked checkbox → drawer slides on screen. */
-	.toggle:checked ~ .sidebar {
+	.sidebar.open {
 		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,5 +1,8 @@
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import { type ReactElement, type ReactNode, useId } from "react";
+import { type ReactElement, type ReactNode, use, useEffect, useState } from "react";
+import { useStore } from "../../react/useStore.js";
+import { Button } from "../form/Button.js";
+import { NavigationContext } from "../router/NavigationContext.js";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CSS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
@@ -16,35 +19,41 @@ 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.
- * - 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.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - 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 [open, setOpen] = useState(false);
+
+	// Close the drawer whenever navigation changes the URL — covers tapping a link inside the sidebar.
+	const href = useStore(use(NavigationContext))?.href;
+	useEffect(() => {
+		if (href) setOpen(false);
+	}, [href]);
 
 	const sidebarEl = (
-		<nav key="sidebar" className={SIDEBAR_LAYOUT_CSS.sidebar}>
-			<label htmlFor={id} title="Close menu" className={SIDEBAR_LAYOUT_CSS.close}>
-				<XMarkIcon />
-			</label>
+		<nav key="sidebar" className={getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open)}>
+			<div className={SIDEBAR_LAYOUT_CSS.close}>
+				<Button plain fit title="Close menu" onClick={() => setOpen(false)}>
+					<XMarkIcon />
+				</Button>
+			</div>
 			{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.show}>
+				<Button plain fit title="Show menu" onClick={() => setOpen(true)}>
+					<Bars3Icon />
+				</Button>
+			</div>
 			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
 		</div>
 	);
 	return (
-		<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>
+		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}</main>
 	);
 }
 

package/ui/page/HTML.d.ts

@@ -4,7 +4,7 @@ export interface HTMLProps extends PossibleMeta {
     children: ReactNode;
 }
 /**
- * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body>`.
  * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
 export declare function HTML({ children, ...meta }: HTMLProps): ReactElement;

package/ui/page/HTML.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
 /**
- * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body>`.
  * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
 export function HTML({ children, ...meta }) {
     const merged = requireMeta(meta);
     const { language, root: base, app } = merged;
-    return (_jsxs("html", { lang: language, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), base && _jsx("base", { href: base.href }), app && _jsx("title", { children: app })] }), _jsx("body", { id: "root", children: _jsx(MetaContext, { value: merged, children: children }) })] }));
+    return (_jsxs("html", { lang: language, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), base && _jsx("base", { href: base.href }), app && _jsx("title", { children: app })] }), _jsx("body", { children: _jsx(MetaContext, { value: merged, children: children }) })] }));
 }

package/ui/page/HTML.tsx

@@ -7,7 +7,7 @@ export interface HTMLProps extends PossibleMeta {
 }
 
 /**
- * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body>`.
  * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
 export function HTML({ children, ...meta }: HTMLProps): ReactElement {
@@ -20,7 +20,7 @@ export function HTML({ children, ...meta }: HTMLProps): ReactElement {
 				{base && <base href={base.href} />}
 				{app && <title>{app}</title>}
 			</head>
-			<body id="root">
+			<body>
 				<MetaContext value={merged}>{children}</MetaContext>
 			</body>
 		</html>

package/ui/util/meta.d.ts

@@ -4,7 +4,7 @@ import type { AnyCaller } from "../../util/function.js";
 import { type PossibleLink } from "../../util/link.js";
 import type { Nullish } from "../../util/null.js";
 import { type ImmutableURI, type PossibleURI, type PossibleURIParams } from "../../util/uri.js";
-import { type ImmutableURL } from "../../util/url.js";
+import { type ImmutableURL, type PossibleURL } from "../../util/url.js";
 /** Set of named meta `<meta />` tags in `{ name: content }` format. */
 export type MetaTags = ImmutableDictionary<string | boolean | null | undefined>;
 /** Set of named meta `<link />` tags in `{ rel: href }` format. */
@@ -42,7 +42,9 @@ export interface Meta {
     readonly stylesheets?: MetaAssets | undefined;
 }
 /** Input metadata that can be parsed and converted to proper metadata. */
-export interface PossibleMeta extends Omit<Meta, "url" | "links" | "scripts" | "modules" | "stylesheets"> {
+export interface PossibleMeta extends Omit<Meta, "root" | "url" | "links" | "scripts" | "modules" | "stylesheets"> {
+    /** Base URL for the app — accepts a string or `URL`, resolved with `requireURL()`. */
+    readonly root?: PossibleURL | undefined;
     /**
      * New URL for the page.
      * - Resolved using `requireURL()` if set relative to `root`
@@ -70,11 +72,16 @@ export declare function joinTitles(...titles: (string | undefined)[]): string;
  * - `stylesheets` and `links` hrefs newly set in `meta2` are absolutified against the merged `url`/`base`, so they stay correct no matter where they are later rendered.
  */
 export declare function mergeMeta(meta1: Meta, meta2: PossibleMeta, caller?: AnyCaller): Meta;
+/**
+ * Create a fully-formed `Meta` from a `PossibleMeta`.
+ * - Like `mergeMeta()` but with no previous `Meta` to merge into — initialises meta from scratch.
+ */
+export declare function createMeta(meta: PossibleMeta, caller?: AnyCaller): Meta;
 /**
  * Merge two metadata URLs.
  * - New URL is resolved relative to: current URL, new base URL, current base URL
  */
-export declare function mergeMetaURL(base: ImmutableURL | undefined, current: ImmutableURL | undefined, next: PossibleURI | undefined, params: PossibleURIParams | undefined, caller?: AnyCaller): ImmutableURL | undefined;
+export declare function mergeMetaURL(base: ImmutableURL | undefined, current: ImmutableURL | undefined, next: PossibleURL | undefined, params: PossibleURIParams | undefined, caller?: AnyCaller): ImmutableURL | undefined;
 /**
  * Merge two metadata tags.
  * - New assets are resolved relative to current URL (relative paths) and root URL (absolute paths).

package/ui/util/meta.js

@@ -37,6 +37,13 @@ export function mergeMeta(meta1, meta2, caller = mergeMeta) {
         stylesheets: mergeMetaAssets(meta1.stylesheets, meta2.stylesheets, url, root, caller),
     };
 }
+/**
+ * Create a fully-formed `Meta` from a `PossibleMeta`.
+ * - Like `mergeMeta()` but with no previous `Meta` to merge into — initialises meta from scratch.
+ */
+export function createMeta(meta, caller = createMeta) {
+    return mergeMeta({}, meta, caller);
+}
 /**
  * Merge two metadata URLs.
  * - New URL is resolved relative to: current URL, new base URL, current base URL

package/ui/util/meta.ts

@@ -4,7 +4,7 @@ import type { AnyCaller } from "../../util/function.js";
 import { type PossibleLink, requireLink } from "../../util/link.js";
 import type { Nullish } from "../../util/null.js";
 import { type ImmutableURI, type PossibleURI, type PossibleURIParams, withURIParams } from "../../util/uri.js";
-import { type ImmutableURL, requireURL } from "../../util/url.js";
+import { type ImmutableURL, type PossibleURL, requireURL } from "../../util/url.js";
 
 /** Set of named meta `<meta />` tags in `{ name: content }` format. */
 export type MetaTags = ImmutableDictionary<string | boolean | null | undefined>;
@@ -52,7 +52,10 @@ export interface Meta {
 }
 
 /** Input metadata that can be parsed and converted to proper metadata. */
-export interface PossibleMeta extends Omit<Meta, "url" | "links" | "scripts" | "modules" | "stylesheets"> {
+export interface PossibleMeta extends Omit<Meta, "root" | "url" | "links" | "scripts" | "modules" | "stylesheets"> {
+	/** Base URL for the app — accepts a string or `URL`, resolved with `requireURL()`. */
+	readonly root?: PossibleURL | undefined;
+
 	/**
 	 * New URL for the page.
 	 * - Resolved using `requireURL()` if set relative to `root`
@@ -111,6 +114,14 @@ export function mergeMeta(meta1: Meta, meta2: PossibleMeta, caller: AnyCaller =
 	};
 }
 
+/**
+ * Create a fully-formed `Meta` from a `PossibleMeta`.
+ * - Like `mergeMeta()` but with no previous `Meta` to merge into — initialises meta from scratch.
+ */
+export function createMeta(meta: PossibleMeta, caller: AnyCaller = createMeta): Meta {
+	return mergeMeta({}, meta, caller);
+}
+
 /**
  * Merge two metadata URLs.
  * - New URL is resolved relative to: current URL, new base URL, current base URL
@@ -118,7 +129,7 @@ export function mergeMeta(meta1: Meta, meta2: PossibleMeta, caller: AnyCaller =
 export function mergeMetaURL(
 	base: ImmutableURL | undefined,
 	current: ImmutableURL | undefined,
-	next: PossibleURI | undefined,
+	next: PossibleURL | undefined,
 	params: PossibleURIParams | undefined,
 	caller: AnyCaller = mergeMetaURL,
 ): ImmutableURL | undefined {

package/util/element.d.ts

@@ -2,18 +2,19 @@ import type { ImmutableArray } from "./array.js";
 import type { AbsolutePath } from "./path.js";
 import type { Query } from "./query.js";
 /** Set of valid props for an element. */
-export interface ElementProps {
-    readonly [key: string]: unknown;
+export type ElementProps = {
     readonly children?: Elements;
-}
-/** Element with a type, props, and optional key (compatible with `React.ReactElement`). */
-export interface Element<P extends ElementProps = ElementProps> {
-    readonly [key: string]: unknown;
+};
+/**
+ * Element with a type, props, and optional key (compatible with `React.ReactElement`).
+ * - Declared as a `type`, not an `interface`, so its implicit index signature lets it satisfy `Data` — `queryElements()` runs elements through `queryItems<T extends Data>`.
+ */
+export type Element<P extends ElementProps = ElementProps> = {
     readonly type: string | ((props: P) => Elements | null);
     readonly props: P;
     readonly key: string | null;
     readonly $$typeof?: symbol;
-}
+};
 /** Collection of elements (compatible with `React.ReactNode`). */
 export type Elements<T extends Element = Element> = undefined | null | string | T | Iterable<Elements<T>>;
 /** Props for a tree element — must have a `tree-` prefixed type. */