shelving 1.265.0 → 1.267.0

package/markup/rule/heading.d.ts

@@ -3,6 +3,7 @@
  * - `#` 1-6 hashes, then one or more spaces, then the title.
  * - `#` must be the first character on the line.
  * - Markdown's underline syntax is not supported (for simplification).
+ * - Each heading gets a `getSlug()` `id` derived from its text, so same-page `#anchor` links resolve to it (e.g. `## React integration` becomes `id="react-integration"`). An all-punctuation heading that slugs to nothing gets no `id`.
  *
  * @example new MarkupParser({ rules: [HEADING_RULE] }).parse("# Title")
  * @see https://shelving.cc/markup/HEADING_RULE

package/markup/rule/heading.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getSlug } from "../../util/string.js";
 import { createMarkupRule } from "../MarkupRule.js";
 import { createLineRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../util/regexp.js";
 /**
@@ -6,6 +7,7 @@ import { createLineRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../uti
  * - `#` 1-6 hashes, then one or more spaces, then the title.
  * - `#` must be the first character on the line.
  * - Markdown's underline syntax is not supported (for simplification).
+ * - Each heading gets a `getSlug()` `id` derived from its text, so same-page `#anchor` links resolve to it (e.g. `## React integration` becomes `id="react-integration"`). An all-punctuation heading that slugs to nothing gets no `id`.
  *
  * @example new MarkupParser({ rules: [HEADING_RULE] }).parse("# Title")
  * @see https://shelving.cc/markup/HEADING_RULE
@@ -13,5 +15,7 @@ import { createLineRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../uti
 export const HEADING_RULE = createMarkupRule(createLineRegExp(`(?<prefix>#{1,6})(?:${LINE_SPACE_REGEXP}+(?<heading>${LINE_CONTENT_REGEXP}))?`), (key, { prefix, heading = "" }, parser) => {
     // 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: parser.parse(heading.trim(), "inline") }, key);
+    const title = heading.trim();
+    // Slug the raw title (before inline parsing) for the `id`, so `#anchor` fragment links land on the heading.
+    return (_jsx(Heading, { id: getSlug(title), children: parser.parse(title, "inline") }, key));
 }, ["block"]);

package/package.json

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

package/ui/layout/CenteredLayout.md

@@ -33,8 +33,9 @@ Layouts compose naturally as `<Router>` route values — wrap a group of routes
 | `--centered-layout-width` | Width of the centred column (capped at 100%) | `var(--width-narrow)` |
 | `--centered-layout-padding` | Block (top/bottom) padding of the scroll area | `var(--space-normal)` |
 | `--centered-layout-indent` | Inline (left/right) padding of the scroll area | `var(--space-normal)` |
-| `--centered-layout-background` | Page background while the layout is mounted | Unset — the `body` default from `Typography.module.css` shows |
+| `--centered-layout-background` | Page background while the layout is mounted | `var(--tint-100)` (white) |
+| `--centered-layout-color` | Text colour for the layout | `var(--tint-00)` (black) |
 
 The column width and the scroll-area padding can also be set per-instance via the `width`, `padding`, and `indent` variant props. The outer element owns its scroll, padding, and safe-area behaviour directly — safe-area insets are applied as transparent borders so they stack with (rather than replace) the padding.
 
-**Global tokens it reads** — `--width-narrow` and `--space-normal`.
+**Global tokens it reads** — `--width-narrow`, `--space-normal`, `--tint-100`, and `--tint-00`.

package/ui/layout/CenteredLayout.module.css

@@ -1,5 +1,6 @@
 @import "../style/layers.css";
 @import "../style/Space.module.css";
+@import "../style/Tint.module.css";
 @import "../style/Width.module.css";
 
 @layer components {
@@ -34,8 +35,9 @@
 		position: fixed;
 		inset: 0;
 
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the body default from Typography.module.css shows. */
-		background: var(--centered-layout-background);
+		/* Page background + text colour; fall back to the themed page defaults (--tint-100 / --tint-00) when the hooks are unset. */
+		background: var(--centered-layout-background, var(--tint-100));
+		color: var(--centered-layout-color, var(--tint-00));
 	}
 
 	.main {

package/ui/layout/SidebarLayout.md

@@ -48,11 +48,12 @@ useEffect(useSafeKeyboardArea, []);
 | Variable | Styles | Default |
 |---|---|---|
 | `--sidebar-layout-width` | Width of the side column (and drawer) | `17.5rem` |
-| `--sidebar-layout-background` | Page background while the layout is mounted | Unset — the `body` default from `Typography.module.css` shows |
-| `--sidebar-layout-sidebar-background` | Sidebar column fill | Unset — the page background shows |
-| `--sidebar-layout-content-background` | Main content column fill | Unset — the page background shows |
+| `--sidebar-layout-background` | Page background while the layout is mounted (also fills the content column) | `var(--tint-100)` (white) |
+| `--sidebar-layout-color` | Text colour for the layout (set on `body`, inherited by the content column) | `var(--tint-00)` (black) |
+| `--sidebar-layout-sidebar-background` | Sidebar column fill | `var(--tint-90)` (one shade darker than the page) |
+| `--sidebar-layout-sidebar-color` | Sidebar column text colour | `var(--tint-00)` (black) |
 | `--sidebar-layout-border` | Divider between sidebar and content | `var(--stroke-normal) solid var(--tint-80)` |
 
 The sidebar and content columns own their own scroll behaviour directly (this layout no longer composes a shared `.layout` class). `useSafeKeyboardArea()` still writes `--layout-inset-bottom` for layouts that pad to the safe area.
 
-**Global tokens it reads** — `--tint-80`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.
+**Global tokens it reads** — `--tint-00` / `--tint-80` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.

package/ui/layout/SidebarLayout.module.css

@@ -50,8 +50,10 @@
 		inset: 0;
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the body default from Typography.module.css shows. */
-		background: var(--sidebar-layout-background);
+		/* Page background + text colour; fall back to the themed page defaults (--tint-100 / --tint-00) when the hooks are unset.
+		 * `color` inherits, so this one rule sets the text colour for the whole layout (including `.content`). */
+		background: var(--sidebar-layout-background, var(--tint-100));
+		color: var(--sidebar-layout-color, var(--tint-00));
 	}
 
 	.main {
@@ -75,8 +77,10 @@
 		padding: var(--space-normal);
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
-		background: var(--sidebar-layout-sidebar-background);
+		/* Sidebar fill + text colour; fall back to the themed defaults (--tint-90 / --tint-00) when the hooks are unset.
+		 * The sidebar defaults one shade darker than the page (--tint-90 vs --tint-100) so it reads as a distinct column. */
+		background: var(--sidebar-layout-sidebar-background, var(--tint-90));
+		color: var(--sidebar-layout-sidebar-color, var(--tint-00));
 	}
 
 	.content {
@@ -93,8 +97,8 @@
 		scroll-behavior: smooth;
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
-		background: var(--sidebar-layout-content-background);
+		/* Shares the page background hook; text colour is inherited from the `body` rule above (no `color` here on purpose). */
+		background: var(--sidebar-layout-background, var(--tint-100));
 	}
 
 	/* Wrapper for the menu toggle button — hidden on wide viewports, shown on narrow ones (see media query). */