shelving 1.264.0 → 1.264.2

package/ui/inline/Inserted.md

@@ -5,7 +5,7 @@ Inserted text — renders an `<ins>` element to mark content that has been added
 **Things to know:**
 
 - Use `Inserted` for content genuinely added to a document (edits, diffs, new prices), and `<Deleted>` for content removed — they pair up.
-- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="blue"`, …) recolours the underline. The base tint defaults to `--color-green`.
+- It colours itself directly from `--color-green` rather than the tint ladder, so an insertion stays a consistent green even inside a tinted region; change it with `--inserted-color`.
 - Inside `<Prose>` a raw `<ins>` picks up the same styling, so Markdown-rendered insertions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## Styling
 
-`Inserted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-green`. Override `--inserted-tint` to recolour from the base, or set each property directly.
+`Inserted` colours its text directly from `--color-green` (not the tint ladder), so insertions stay a consistent green regardless of the surrounding tint. Override `--inserted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--inserted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-green)` |
-| `--inserted-color` | Text colour | `var(--tint-50)` |
+| `--inserted-color` | Text colour | `var(--color-green)` |
 | `--inserted-decoration` | Text decoration | `underline var(--stroke-normal)` |
 | `--inserted-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-green`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.
+**Global tokens it reads:** `--color-green`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Inserted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.inserted,
 	.prose ins {
-		--tint-50: var(--inserted-tint, var(--color-green));
-
 		/* Style */
-		color: var(--inserted-color, var(--tint-50));
+		color: var(--inserted-color, var(--color-green));
 		text-decoration: var(--inserted-decoration, underline var(--stroke-normal));
 
 		/* Text */

package/ui/inline/Link.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { type ClickableProps } from "../form/Clickable.js";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type TypographyVariants } from "../style/Typography.js";
 /**
  * Props for `Link` — `ClickableProps` (`href` for navigation or `onClick` for actions) plus colour and typography variants.

package/ui/inline/Link.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Clickable } from "../form/Clickable.js";
+import { Clickable } from "../button/Clickable.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";

package/ui/inline/Link.md

@@ -31,12 +31,11 @@ import { Link } from "shelving/ui";
 
 ## Styling
 
-`Link` drives its colour through the tint ladder, so the `color` variant (`color="purple"`, `color="red"`, …) recolours the link. By default the `50` tint resolves to the global `--color-link` token.
+`Link` colours itself from the global `--color-link` token by default. Inside a tinted scope (`color=` / `status=` on an ancestor) `--color-link` resolves to `inherit`, so links adopt the surrounding tinted text colour. Override `--link-color` to set it directly.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--link-tint` | Base tint (`--tint-50`) the link colour derives from | `var(--color-link)` |
-| `--link-color` | Text colour | `var(--tint-50)` |
+| `--link-color` | Text colour | `var(--color-link)` |
 | `--link-weight` | Font weight | `var(--weight-strong)` |
 
 **Global tokens it reads:** `--color-link`, `--weight-strong`, and `--stroke-normal` (the underline thickness).

package/ui/inline/Link.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.link,
 	.prose a {
-		--tint-50: var(--link-tint, var(--color-link));
-
 		/* Style */
-		color: var(--link-color, var(--tint-50));
+		color: var(--link-color, var(--color-link));
 		text-decoration: none;
 		cursor: inherit;
 

package/ui/inline/Link.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { Clickable, type ClickableProps } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";

package/ui/inline/Mark.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import MARK_CSS from "./Mark.module.css";
@@ -12,5 +11,5 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  */
 export function Mark({ children, ...props }) {
     return (_jsx("mark", { className: getClass(MARK_CLASS, //
-        TINT_CLASS, getTypographyClass(props)), children: children }));
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Mark.md

@@ -1,6 +1,6 @@
 # Mark
 
-Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a yellow background by default.
+Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a translucent yellow background by default.
 
 **Things to know:**
 
@@ -20,15 +20,15 @@ import { Mark } from "shelving/ui";
 
 ## Styling
 
-`Mark` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the background and the `00` tint the text. By default the base tint resolves to `--color-yellow`; override `--mark-tint` to recolour the whole pill, or `--mark-background` / `--mark-color` to set the two faces independently.
+`Mark` highlights with a translucent wash of `--color-yellow` — `color-mix(…, transparent)`, so the text underneath stays legible — with the text painted from `--tint-00`. Override `--mark-tint` to change the highlight hue, `--mark-background` to replace the fill outright, or `--mark-color` for the text.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--mark-tint` | Base tint (`--tint-50`) the pill derives from | `var(--color-yellow)` |
-| `--mark-background` | Background fill | `var(--tint-50)` |
+| `--mark-tint` | Highlight hue, mixed 50% with `transparent` for the background | `var(--color-yellow)` |
+| `--mark-background` | Background fill | `color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent)` |
 | `--mark-color` | Text colour | `var(--tint-00)` |
 | `--mark-padding` | Inline padding | `var(--space-xxsmall)` |
 | `--mark-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--mark-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder steps `--tint-50` / `--tint-00`.
+**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder step `--tint-00`.

package/ui/inline/Mark.module.css

@@ -1,4 +1,5 @@
 @import "../style/layers.css";
+@import "../style/Color.module.css";
 @import "../style/Radius.module.css";
 @import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
@@ -6,8 +7,6 @@
 @layer components {
 	.mark,
 	.prose mark {
-		--tint-50: var(--mark-tint, var(--color-yellow));
-
 		/* Box */
 		display: inline-block;
 		padding-inline: var(--mark-padding, var(--space-xxsmall));
@@ -15,7 +14,7 @@
 		vertical-align: baseline;
 
 		/* Style */
-		background: var(--mark-background, var(--tint-80));
+		background-color: var(--mark-background, color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent));
 		color: var(--mark-color, var(--tint-00));
 
 		/* Text */

package/ui/inline/Mark.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
@@ -25,7 +24,6 @@ export function Mark({ children, ...props }: MarkProps): ReactElement {
 		<mark
 			className={getClass(
 				MARK_CLASS, //
-				TINT_CLASS,
 				getTypographyClass(props),
 			)}
 		>

package/ui/{form → input}/ArrayInput.js

@@ -5,7 +5,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Column } from "../block/Column.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 export function ArrayInput({ name, 

package/ui/{form → input}/ArrayInput.tsx

@@ -6,7 +6,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Column } from "../block/Column.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";

package/ui/{form → input}/ButtonInput.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type FlexVariants } from "../style/Flex.js";
-import { type ClickableProps } from "./Clickable.js";
 import { type InputProps, type InputVariants } from "./Input.js";
 /**
  * Props for `ButtonInput`, a clickable element styled to match form inputs.

package/ui/{form → input}/ButtonInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
+import { Clickable } from "../button/Clickable.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { Clickable } from "./Clickable.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**

package/ui/{form → input}/ButtonInput.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { Clickable, type ClickableProps } from "./Clickable.js";
 import { getInputClass, type InputProps, type InputVariants } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 

package/ui/{form → input}/ButtonPopover.d.ts

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 import { type ReactElement } from "react";
-import { type ButtonVariants } from "./Button.js";
+import { type ButtonVariants } from "../button/Button.js";
 import { type PopoverChildren } from "./Popover.js";
 /**
  * Props for `ButtonPopover`, a button that toggles an adjacent popover.

package/ui/{form → input}/ButtonPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 import { useState } from "react";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { Popover } from "./Popover.js";
 /**
  * A button that, when clicked, shows a popover next to it when clicked or focused.

package/ui/{form → input}/ButtonPopover.tsx

@@ -2,7 +2,7 @@
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 
 import { type ReactElement, useState } from "react";
-import { Button, type ButtonVariants } from "./Button.js";
+import { Button, type ButtonVariants } from "../button/Button.js";
 import { Popover, type PopoverChildren } from "./Popover.js";
 
 /**

package/ui/{form → input}/DictionaryInput.js

@@ -5,7 +5,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 import { TextInput } from "./TextInput.js";

package/ui/{form → input}/DictionaryInput.tsx

@@ -7,7 +7,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";

package/ui/{form → input}/SchemaInput.js

@@ -17,13 +17,13 @@ import { getNumber } from "../../util/number.js";
 import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
+import { Field } from "../form/Field.js";
 import { ArrayInput } from "./ArrayInput.js";
 import { CheckboxInput } from "./CheckboxInput.js";
 import { ChoiceRadioInputs } from "./ChoiceRadioInputs.js";
 import { DataInput } from "./DataInput.js";
 import { DateInput } from "./DateInput.js";
 import { DictionaryInput } from "./DictionaryInput.js";
-import { Field } from "./Field.js";
 import { NumberInput } from "./NumberInput.js";
 import { SelectInput } from "./SelectInput.js";
 import { TextInput } from "./TextInput.js";

package/ui/{form → input}/SchemaInput.test.tsx

@@ -1,8 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { StringSchema } from "../../schema/index.js";
-import { PASSTHROUGH } from "../../util/function.js";
-import { StringSchemaInput } from "./SchemaInput.js";
+import { StringSchema } from "shelving/schema";
+import { StringSchemaInput } from "shelving/ui";
+import { PASSTHROUGH } from "shelving/util/function";
 
 describe("StringSchemaInput", () => {
 	test("formats the initial value to its clean sanitized value", () => {

package/ui/{form → input}/SchemaInput.tsx

@@ -19,6 +19,7 @@ import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import type { ValidatorType } from "../../util/validate.js";
+import { Field } from "../form/Field.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { ArrayInput } from "./ArrayInput.js";
 import { CheckboxInput } from "./CheckboxInput.js";
@@ -26,7 +27,6 @@ import { ChoiceRadioInputs } from "./ChoiceRadioInputs.js";
 import { DataInput } from "./DataInput.js";
 import { DateInput } from "./DateInput.js";
 import { DictionaryInput } from "./DictionaryInput.js";
-import { Field } from "./Field.js";
 import type { ValueInputProps } from "./Input.js";
 import { NumberInput } from "./NumberInput.js";
 import { SelectInput } from "./SelectInput.js";

package/ui/{form → input}/TextInput.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
-import { type InputVariants, type ValueInputProps } from "./Input.js";
+import { type InputVariants, type ValueInputProps } from "../input/Input.js";
 type TextFormatter = (str: string) => string;
 /**
  * Props for `TextInput`, a single- or multi-line text input bound to a `string` value.

package/ui/{form → input}/TextInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PASSTHROUGH } from "../../util/function.js";
+import { getInputClass } from "../input/Input.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
  * Text input bound to a `string` value, rendered as an `<input>` or a `<textarea>` when `rows > 1`.

package/ui/{form → input}/TextInput.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
 import { PASSTHROUGH } from "../../util/function.js";
+import { getInputClass, type InputVariants, type ValueInputProps } from "../input/Input.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
 type TextFormatter = (str: string) => string;

package/ui/input/index.d.ts

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/input/index.js

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/input/index.ts

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/layout/CenteredLayout.d.ts

@@ -1,16 +1,14 @@
 import type { ReactElement } from "react";
+import type { IndentVariants } from "../style/Indent.js";
+import type { PaddingVariants } from "../style/Padding.js";
+import type { WidthVariants } from "../style/Width.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<CenteredLayout>` — optional `children` and a `fullWidth` flag to drop the max-width.
  *
  * @see https://shelving.cc/ui/CenteredLayoutProps
  */
-export interface CenteredLayoutProps extends OptionalChildProps {
-    /**
-     * Drop the narrow max-width and let content fill the width.
-     * @default false
-     */
-    fullWidth?: boolean;
+export interface CenteredLayoutProps extends WidthVariants, PaddingVariants, IndentVariants, OptionalChildProps {
 }
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
@@ -19,4 +17,4 @@ export interface CenteredLayoutProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export declare function CenteredLayout({ children, fullWidth }: CenteredLayoutProps): ReactElement;
+export declare function CenteredLayout({ children, ...props }: CenteredLayoutProps): ReactElement;

package/ui/layout/CenteredLayout.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteCache } from "../router/RouteCache.js";
-import { getModuleClass } from "../util/css.js";
-import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
+import { getBlockClass } from "../style/Block.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import LAYOUT_CSS from "./CenteredLayout.module.css";
+const LAYOUT_MAIN_CLASS = getModuleClass(LAYOUT_CSS, "main");
+const LAYOUT_INNER_CLASS = getModuleClass(LAYOUT_CSS, "inner");
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
@@ -9,8 +12,9 @@ import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export function CenteredLayout({ children, fullWidth = false }) {
+export function CenteredLayout({ children, ...props }) {
     // Wrap the scrolling `<main>` in `<RouteCache>` so recently-visited pages stay mounted but hidden,
     // keeping their scroll position and state intact across back/forward navigation.
-    return (_jsx(RouteCache, { children: _jsx("main", { className: getModuleClass(CENTERED_LAYOUT_CSS, "main"), children: _jsx("div", { className: getModuleClass(CENTERED_LAYOUT_CSS, "mainInner"), style: fullWidth ? { maxWidth: "none" } : undefined, children: children }) }) }));
+    return (_jsx(RouteCache, { children: _jsx("main", { className: LAYOUT_MAIN_CLASS, children: _jsx("div", { className: getClass(LAYOUT_INNER_CLASS, //
+                getBlockClass(props)), children: children }) }) }));
 }

package/ui/layout/CenteredLayout.md

@@ -27,6 +27,13 @@ Layouts compose naturally as `<Router>` route values — wrap a group of routes
 
 ## Styling
 
-This layout exposes no own `--centered-layout-*` hooks. The inner column is capped at the global `--width-narrow` token (dropped when `fullWidth` is set), and the outer element owns its scroll, padding, and safe-area behaviour directly — reading the layout hooks `--layout-space`, `--layout-padding`, `--layout-body-bg`, and `--layout-inset-top` / `-bottom` / `-left` / `-right`.
+| Variable | Styles | Default |
+|---|---|---|
+| `--centered-layout-width` | Max width of the centred column | `var(--width-narrow)` |
+| `--centered-layout-space` | Top/bottom padding of the scroll area | `var(--space-normal)` |
+| `--centered-layout-padding` | 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 |
 
-**Global tokens it reads** — `--width-narrow`.
+The max-width cap is dropped entirely when `fullWidth` is set. The outer element owns its scroll, padding, and safe-area behaviour directly — it also reads the `--layout-inset-top` / `-bottom` / `-left` / `-right` hooks owned by `Layout.ts` (`useSafeKeyboardArea()` writes `--layout-inset-bottom`).
+
+**Global tokens it reads** — `--width-narrow` and `--space-normal`.

package/ui/layout/CenteredLayout.module.css

@@ -1,24 +1,7 @@
 @import "../style/layers.css";
 @import "../style/Space.module.css";
-@import "../style/Tint.module.css";
 @import "../style/Width.module.css";
 
-/* Low-priority padding defaults live in `@layer defaults` so consumers can override them */
-/* with normal-specificity selectors without needing `:where()` tricks. */
-@layer defaults {
-	.main {
-		/* Top/bottom use `layout-space` and left/right use `layout-padding`, plus safe-area additions. */
-		padding: var(--layout-space, var(--space-normal)) var(--layout-padding, var(--space-normal));
-		padding-top: calc(var(--layout-space, var(--space-normal)) + max(var(--layout-inset-top, 0px), env(safe-area-inset-top, 0px)));
-		padding-bottom: calc(var(--layout-space, var(--space-normal)) + max(var(--layout-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)));
-		padding-left: calc(var(--layout-padding, var(--space-normal)) + max(var(--layout-inset-left, 0px), env(safe-area-inset-left, 0px)));
-		padding-right: calc(var(--layout-padding, var(--space-normal)) + max(var(--layout-inset-right, 0px), env(safe-area-inset-right, 0px)));
-
-		/* Grow to fill the body. */
-		flex: 1;
-	}
-}
-
 @layer components {
 	/*
 	 * Lock the document and let `.main` own the page scroll.
@@ -51,11 +34,22 @@
 		position: fixed;
 		inset: 0;
 
-		/* Layout-specific bg hook. */
-		background: var(--layout-body-bg, var(--tint-100));
+		/* 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);
 	}
 
 	.main {
+		/* Box */
+		border-top: env(safe-area-inset-top, 0px) solid transparent;
+		border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
+		border-left: env(safe-area-inset-left, 0px) solid transparent;
+		border-right: env(safe-area-inset-right, 0px) solid transparent;
+		padding-block: var(--centered-layout-padding, var(--space-normal));
+		padding-inline: var(--centered-layout-indent, var(--space-normal));
+
+		/* Grow to fill the body. */
+		flex: 1;
+
 		/* Content — a flex column whose inner column centres itself with `margin: auto` (both axes). */
 		display: flex;
 		flex-direction: column;
@@ -70,9 +64,9 @@
 		scroll-behavior: smooth;
 	}
 
-	.mainInner {
-		width: 100%;
-		max-width: var(--width-narrow);
+	.inner {
+		width: var(--centered-layout-width, var(--width-narrow));
+		max-width: 100%;
 		margin: auto;
 	}
 }

package/ui/layout/CenteredLayout.tsx

@@ -1,21 +1,22 @@
 import type { ReactElement } from "react";
 import { RouteCache } from "../router/RouteCache.js";
-import { getModuleClass } from "../util/css.js";
+import { getBlockClass } from "../style/Block.js";
+import type { IndentVariants } from "../style/Indent.js";
+import type { PaddingVariants } from "../style/Padding.js";
+import type { WidthVariants } from "../style/Width.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
-import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
+import LAYOUT_CSS from "./CenteredLayout.module.css";
+
+const LAYOUT_MAIN_CLASS = getModuleClass(LAYOUT_CSS, "main");
+const LAYOUT_INNER_CLASS = getModuleClass(LAYOUT_CSS, "inner");
 
 /**
  * Props for `<CenteredLayout>` — optional `children` and a `fullWidth` flag to drop the max-width.
  *
  * @see https://shelving.cc/ui/CenteredLayoutProps
  */
-export interface CenteredLayoutProps extends OptionalChildProps {
-	/**
-	 * Drop the narrow max-width and let content fill the width.
-	 * @default false
-	 */
-	fullWidth?: boolean;
-}
+export interface CenteredLayoutProps extends WidthVariants, PaddingVariants, IndentVariants, OptionalChildProps {}
 
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
@@ -24,13 +25,18 @@ export interface CenteredLayoutProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export function CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement {
+export function CenteredLayout({ children, ...props }: CenteredLayoutProps): ReactElement {
 	// Wrap the scrolling `<main>` in `<RouteCache>` so recently-visited pages stay mounted but hidden,
 	// keeping their scroll position and state intact across back/forward navigation.
 	return (
 		<RouteCache>
-			<main className={getModuleClass(CENTERED_LAYOUT_CSS, "main")}>
-				<div className={getModuleClass(CENTERED_LAYOUT_CSS, "mainInner")} style={fullWidth ? { maxWidth: "none" } : undefined}>
+			<main className={LAYOUT_MAIN_CLASS}>
+				<div
+					className={getClass(
+						LAYOUT_INNER_CLASS, //
+						getBlockClass(props),
+					)}
+				>
 					{children}
 				</div>
 			</main>

package/ui/layout/Layout.d.ts

@@ -7,4 +7,4 @@
  * @todo This can be removed once Safari iOS supports interactive-widget viewport property. https://caniuse.com/mdn-html_elements_meta_name_viewport_interactive-widget
  * @see https://shelving.cc/ui/useSafeKeyboardArea
  */
-export declare function useSafeKeyboardArea(): (() => void) | undefined;
+export declare function useSafeKeyboardArea(): void;