@ponchia/ui 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -5,6 +5,104 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.13.0 — 2026-10-01
+
+### Added
+
+- **`ui-prose--blocks`: prose on a block editor's geometry.** A read view that
+  must put every line where a block editor (BlockNote's model) draws it: 3px
+  block padding instead of flow margins, line-height 1.5, headings with an 18px
+  lead and a 1.6/1.3/1.15em scale at weight 600, a 24px list column with disc,
+  circle and square, and the editor's task-row geometry. The px are exposed as
+  `--prose-block`, `--prose-heading-lead` and `--prose-list-column`.
+  `recipes.prose({ blocks: true })` emits it.
+- **`css/blocknote.css`: BlockNote interop.** Maps BlockNote's `--bn-*` theme
+  variables (editor, menus, tooltips, side menu, selection, border, font,
+  radius) to bronto tokens, and its nine text highlights to the categorical
+  identity inks and tints, so the editor follows theme, skins, contrast and the
+  OLED surface. Import the unlayered build after BlockNote's stylesheet. See
+  [BlockNote interop](docs/interop/blocknote.md).
+- **Half spacing steps for dense tool chrome.** `--space-0-5`, `--space-0-75`,
+  `--space-1-5` and `--space-2-5` (2, 3, 6 and 10px at a 16px root), scaled by
+  the density presets with the rest of the scale.
+- **Workspace layers.** `--z-canvas`, `--z-chrome`, `--z-panel`, `--z-modal`,
+  `--z-menu`, `--z-tooltip` and `--z-navigation` name the stack of a tool drawn
+  over a canvas, aliased to the page layers where they mean the same.
+- **Zoom-aware hairlines and focus rings.** A host that scales bronto UI marks
+  the scaled element `[data-ui-zoom]` and sets `--ui-zoom`; inside it `--ui-px`
+  is one screen pixel and `--hairline`, `--focus-ring-width` and
+  `--focus-ring-offset` are re-declared in it.
+
+### Changed
+
+- Every bronto focus ring reads `--focus-ring-width` and `--focus-ring-offset`
+  instead of literal px. At the default zoom they are the same 2px, so nothing
+  moves; inside a `[data-ui-zoom]` surface a ring keeps its on-screen width.
+- The default bundle grows from 92.8 kB / 16.0 kB gzip to 95.8 kB / 16.6 kB:
+  1.9 kB is the block prose variant, the rest the new tokens and the focus-ring
+  variables. Notes are now the main reading surface, so block prose ships in
+  the core prose vocabulary rather than a leaf.
+
+### Internal
+
+- `npm run check` runs every gate and ends with one line naming each gate
+  that failed; `npm run check -- --bail` stops at the first. It was an `&&`
+  chain that stopped at the first failure: since 0.8, 13 of the 20 failed CI
+  runs were the Dependabot dev-dependency group stopping at `check:exports`
+  on TypeScript 7, so no run measured the rest of the group. The gate list is
+  the `check:*` scripts themselves, so `check:chain`, which checked that the
+  hand-kept chain named every gate, is gone.
+- The package contract no longer lists `react/`, `solid/`, `qwik/`,
+  `svelte/` and `vue/` as authored JS directories; the package has none. The
+  list is now read from `tsconfig.dts.json`.
+
+## 0.12.0 — 2026-10-01
+
+### Changed
+
+- **BREAKING: a categorical palette with no accent slot.** `--chart-1..8` are
+  now eight fixed hues — blue, orange, aqua, yellow, magenta, green, violet,
+  red — authored as measured sRGB per theme. Series 1 is no longer
+  `var(--accent)`, so an ordinary first series stops reading as an alert, and
+  the `ACCENT` export of `@ponchia/ui/charts` is removed. The 0.11 set failed
+  the measurable palette checks on the package's own surfaces (Okabe-Ito
+  yellow and the slate outside the lightness band, the slate under the chroma
+  floor). The values come from a consumer that validated and shipped them as a
+  recorded divergence. `CATEGORICAL_HUES` names the slots.
+- **BREAKING: `--chart-seq-*` is one blue hue in five steps.** `--chart-seq-6`
+  is removed. Step 1 sits nearest the surface in both themes.
+- **BREAKING: the static Vega config is frameless.** `brontoVegaConfig()` sets
+  no plot frame, draws a single series in the first categorical hue, keeps a
+  `--panel` gap between adjacent fills and sets readable label sizes. It is now
+  generated from `@ponchia/ui/renderer`'s `vegaConfig()`, so the static and
+  runtime configs share one mapping. `brontoVegaAccent()` returns `--accent`
+  and `brontoVegaNeutral()` returns `--text-dim`.
+- `check:charts` measures what a reader sees: per theme and against the panel,
+  the page and the OLED surfaces, each slot sits inside the OKLCH lightness
+  band and above the chroma floor, and adjacent slots stay apart under
+  simulated protanopia/deuteranopia (ΔE×100 ≥ 6) and normal vision (≥ 15).
+  All-pairs separation and sub-3:1 contrast are reported, not gated; the
+  pattern fill remains the second channel. ADR-0001 step 7 records the
+  amendment.
+
+### Added
+
+- **Categorical identity tokens** in `css/dataviz.css`: `--cat-1..8` (the same
+  hues), `--cat-N-tint` (a 16% wash over `--panel`, so it follows skins and
+  OLED) and `--cat-N-ink` (text that holds 4.5:1 on the panel, the page and its
+  own tint, gated). For tags, participants and user-chosen tints — never
+  status. `charts.json` gains `hues`, `tint` and `ink`.
+- **`@ponchia/ui/renderer`** — the live theme for renderers that cannot read
+  CSS. `readTokens()` resolves the bronto roles a renderer needs (surfaces,
+  inks, lines, accent, status, fonts, categorical set and ramps) to `#rrggbb`
+  or `rgba()` literals, following skins, contrast and the OLED surface.
+  `observeTokens()` calls back when one of them changed. `vegaConfig()` and
+  `xtermTheme()` map tokens to those renderers' configuration; `parseColor()`,
+  `formatColor()` and `resolveColor()` convert any CSS colour, including
+  `oklch()`, `lab()` and `color(display-p3 …)`.
+
+See [the migration guide](docs/migrations/0.11-to-0.12.md).
+
 ## 0.11.0 — 2026-09-09
 
 ### Changed

package/MIGRATIONS.json

@@ -224,6 +224,30 @@
         }
       ],
       "codemod": "No automatic rewrite: review complete consumer tasks and docs/migrations/0.10-to-0.11.md."
+    },
+    {
+      "from": "0.11",
+      "to": "0.12",
+      "summary": "Categorical palette with no accent slot, categorical identity tokens, runtime renderer tokens.",
+      "safe": [],
+      "manual": [
+        {
+          "old": "--chart-1 = var(--accent) / ACCENT from @ponchia/ui/charts",
+          "new": "fixed hues; paint an emphasised mark with var(--accent) or brontoVegaAccent(theme)",
+          "note": "ACCENT is removed. Charts that meant 'the brand' need an explicit accent encoding."
+        },
+        {
+          "old": "--chart-seq-6",
+          "new": "--chart-seq-1..5",
+          "note": "Re-map six-bin sequential figures to five bins."
+        },
+        {
+          "old": "brontoVegaConfig() framed plot, accent default mark",
+          "new": "frameless plot, first categorical hue as the default mark",
+          "note": "A spec's own config still wins; review dashboards that relied on the frame."
+        }
+      ],
+      "codemod": "No automatic rewrite: see docs/migrations/0.11-to-0.12.md."
     }
   ]
 }

package/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/@ponchia/ui?logo=npm)](https://www.npmjs.com/package/@ponchia/ui)
 [![npm provenance](https://img.shields.io/badge/npm-provenance-blue?logo=npm)](https://www.npmjs.com/package/@ponchia/ui#provenance)
 [![runtime deps](https://img.shields.io/badge/runtime%20deps-0-brightgreen)](https://github.com/Ponchia/bronto-ui/blob/main/package.json)
-[![default CSS](https://img.shields.io/badge/default%20CSS-~93kB%20%2F%20~16kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
+[![default CSS](https://img.shields.io/badge/default%20CSS-~96kB%20%2F%20~17kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
 [![CI](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml)
 [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/Ponchia/bronto-ui/badge)](https://scorecard.dev/viewer/?uri=github.com/Ponchia/bronto-ui)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/Ponchia/bronto-ui/blob/main/LICENSE)
@@ -93,12 +93,12 @@ Or drop it in with no build step, straight from a CDN (replace the version only
 when deliberately upgrading across a breaking pre-1.0 minor):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/bronto.css">
 ```
 
 ## Quick start
 
-**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~93 kB raw / ~16 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
+**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~96 kB raw / ~17 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
 
 ```css
 @import '@ponchia/ui';            /* via a bundler */
@@ -171,7 +171,7 @@ Arrows, chevrons, check/close/plus/minus, search/menu/gear, info/warning/bell/lo
 - **Motion & dots** — the dot-matrix motif kit: dot grid, status dots, dot loaders, the orbital spinner, matrix reveal — all reduced-motion aware.
 - **Glyphs** — `@ponchia/ui/glyphs`, a 71-glyph dot-matrix icon set on the `.ui-dotmatrix` primitive (display marks + crisp `solid` inline icons + one-node `.ui-icon` mask rendering).
 - **Colorways** _(opt-in)_ — `data-bronto-skin="amber-crt | phosphor-green | e-ink"`: a root-level recolour of the one accent (OKLCH, per-theme, contrast-gated), never in the default bundle.
-- **Data-viz** _(opt-in)_ — a colourblind-safe chart palette (`--chart-*` + dot-matrix pattern fills, resolved hex in `charts.json`), gated under simulated protan/deutan/tritan vision. Charts only, never UI chrome.
+- **Categorical + data-viz** _(opt-in)_ — eight fixed hues as chart series (`--chart-*`, sequential/diverging ramps, dot-matrix pattern fills) and as categorical identity (`--cat-*` with tint and text ink), measured per theme and surface. Never UI chrome. `@ponchia/ui/renderer` resolves them, with the chrome, for canvas/WebGL/SVG renderers.
 
 Full generated catalog of every class: **[docs/reference.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/reference.md)**. The decision guide (which primitive when): **[docs/usage.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/usage.md)**.
 
@@ -221,7 +221,7 @@ Per-framework getting-started guides + runnable example apps live in the repo:
 
 - **Tokens as data** — `import tokens, { themeColor, cssVars } from '@ponchia/ui/tokens'` (plus authored `tokens.json`, a structured DTCG 2025.10 `tokens.dtcg.json`, `tokens/resolved.json` for concrete values in canvas/SVG/MapLibre, and `tokens/figma.variables.json` for local Figma Variables import/sync scripts).
 - **Consumer contract checker** — after an upgrade, run `npx --no-install bronto-ui-check src` to catch unknown literal `ui-*` classes and unresolved Bronto token references in code, style, and template sources before build or deployment. Comments, generated/vendor directories, and Markdown prose are excluded.
-- **Chart colours for dashboards** — `import charts from '@ponchia/ui/charts.json' with { type: 'json' }` in Node ESM, or the same path through a bundler JSON import (resolved hex per theme; series 1 = your accent) plus the opt-in `@ponchia/ui/css/dataviz.css`.
+- **Chart colours for dashboards** — `import charts from '@ponchia/ui/charts.json' with { type: 'json' }` in Node ESM, or the same path through a bundler JSON import (resolved hex per theme, eight fixed hues) plus the opt-in `@ponchia/ui/css/dataviz.css`; for a live page that switches skin or theme, `@ponchia/ui/renderer` resolves the same palette and chrome at runtime.
 - **Static reports for LLMs** — add `@ponchia/ui/css/report-kit.css` for the complete report vocabulary, or `@ponchia/ui/css/report.css` plus the specific leaves a smaller report needs. Sidecar claim/source contracts can validate against `@ponchia/ui/schemas/report-claims.v1.schema.json`. Full cookbook: `docs/reporting.md`.
 - **Modern-platform motion** — overlays (modal/drawer/popover), toasts and the `<details>` accordion animate **in and out** with zero JS (`@starting-style` + `allow-discrete`, `::details-content` + `interpolate-size`). Progressive-enhancement extras: `.ui-scroll-progress` / `.ui-scroll-reveal` (scroll-driven, no JS) and `.ui-vt` for View Transitions. All degrade to a static end-state and respect `prefers-reduced-motion`. For smooth **cross-document** navigations, add the document-global one-liner to your own top-level (unlayered) CSS: `@view-transition { navigation: auto; }`.
 - **Editor IntelliSense** — point VS Code at the shipped custom-data file so every token autocompletes in `var(--…)`:

package/behaviors/forms.d.ts

@@ -37,7 +37,7 @@ export type FormValidationOpts = {
     /**
      * Event-delegation root; default: `document`.
      */
-    root?: Document | Element | null | undefined;
+    root?: Element | Document | null | undefined;
     /**
      * Localized validation-summary title. A summary/form
      * `data-bronto-error-summary-title` attribute overrides it, and an authored

package/behaviors/internal.d.ts

@@ -21,6 +21,6 @@ export type DelegateOpts = {
      * Event-delegation root; also scopes which controls are queried. Default: `document`.
      * `null` means a scope was requested but is not ready yet, so the behavior no-ops.
      */
-    root?: Document | Element | null | undefined;
+    root?: Element | Document | null | undefined;
 };
 //# sourceMappingURL=internal.d.ts.map

package/classes/classes.json

@@ -1,7 +1,7 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 695,
+    "classes": 696,
     "groups": 187
   },
   "groups": {
@@ -993,6 +993,7 @@
     "ui-prose": {
       "base": "ui-prose",
       "modifiers": [
+        "ui-prose--blocks",
         "ui-prose--compact"
       ],
       "parts": []
@@ -2040,6 +2041,7 @@
     "ui-property__label",
     "ui-property__value",
     "ui-prose",
+    "ui-prose--blocks",
     "ui-prose--compact",
     "ui-provenance",
     "ui-provenance__item",

package/classes/index.d.ts

@@ -241,6 +241,7 @@ export declare const cls: {
   readonly eyebrowSm: 'ui-eyebrow--sm';
   readonly prose: 'ui-prose';
   readonly proseCompact: 'ui-prose--compact';
+  readonly proseBlocks: 'ui-prose--blocks';
   readonly quote: 'ui-quote';
   readonly quoteCite: 'ui-quote__cite';
   readonly container: 'ui-container';
@@ -822,6 +823,7 @@ export interface AvatarOpts {
 }
 export interface ProseOpts {
   compact?: boolean;
+  blocks?: boolean;
 }
 export interface ContainerOpts {
   narrow?: boolean;

package/classes/index.js

@@ -255,6 +255,7 @@ export const cls = Object.freeze({
   eyebrowSm: 'ui-eyebrow--sm',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
+  proseBlocks: 'ui-prose--blocks',
   quote: 'ui-quote',
   quoteCite: 'ui-quote__cite',
   // site shell
@@ -1036,7 +1037,8 @@ export const ui = {
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
-  prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
+  prose: ({ compact, blocks } = {}) =>
+    j(cls.prose, compact && cls.proseCompact, blocks && cls.proseBlocks),
   container: ({ narrow, wide } = {}) =>
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),

package/classes/vscode.css-custom-data.json

@@ -201,6 +201,18 @@
       "name": "--focus-ring",
       "description": "Theme token. Light: `var(--accent)` · Dark: `var(--accent)`"
     },
+    {
+      "name": "--focus-ring-offset",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--focus-ring-width",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--hairline",
+      "description": "Global scale token. Value: `1px`"
+    },
     {
       "name": "--info",
       "description": "Theme token. Light: `#1f63c4` · Dark: `#6fb0e6`"
@@ -285,6 +297,22 @@
       "name": "--shadow-raised",
       "description": "Theme token. Light: `0 0 0 1px var(--line-strong)` · Dark: `0 0 0 1px var(--line-strong)`"
     },
+    {
+      "name": "--space-0-5",
+      "description": "Global scale token. Value: `0.125rem`"
+    },
+    {
+      "name": "--space-0-75",
+      "description": "Global scale token. Value: `0.1875rem`"
+    },
+    {
+      "name": "--space-1-5",
+      "description": "Global scale token. Value: `0.375rem`"
+    },
+    {
+      "name": "--space-2-5",
+      "description": "Global scale token. Value: `0.625rem`"
+    },
     {
       "name": "--space-2xl",
       "description": "Global scale token. Value: `2.5rem`"
@@ -409,6 +437,14 @@
       "name": "--tracking-wider",
       "description": "Global scale token. Value: `0.22em`"
     },
+    {
+      "name": "--ui-px",
+      "description": "Global scale token. Value: `1px`"
+    },
+    {
+      "name": "--ui-zoom",
+      "description": "Global scale token. Value: `1`"
+    },
     {
       "name": "--warning",
       "description": "Theme token. Light: `#806414` · Dark: `#d8bd72`"
@@ -421,10 +457,34 @@
       "name": "--z-base",
       "description": "Global scale token. Value: `0`"
     },
+    {
+      "name": "--z-canvas",
+      "description": "Global scale token. Value: `var(--z-base)`"
+    },
+    {
+      "name": "--z-chrome",
+      "description": "Global scale token. Value: `var(--z-sticky)`"
+    },
+    {
+      "name": "--z-menu",
+      "description": "Global scale token. Value: `var(--z-popover)`"
+    },
+    {
+      "name": "--z-modal",
+      "description": "Global scale token. Value: `var(--z-overlay)`"
+    },
+    {
+      "name": "--z-navigation",
+      "description": "Global scale token. Value: `80`"
+    },
     {
       "name": "--z-overlay",
       "description": "Global scale token. Value: `30`"
     },
+    {
+      "name": "--z-panel",
+      "description": "Global scale token. Value: `25`"
+    },
     {
       "name": "--z-popover",
       "description": "Global scale token. Value: `50`"
@@ -440,6 +500,10 @@
     {
       "name": "--z-toast",
       "description": "Global scale token. Value: `60`"
+    },
+    {
+      "name": "--z-tooltip",
+      "description": "Global scale token. Value: `70`"
     }
   ],
   "atDirectives": [

package/css/base.css

@@ -164,8 +164,8 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 [tabindex]:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Small global helpers reused across apps. */

package/css/blocknote.css

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   blocknote — BlockNote's theme variables, mapped to bronto tokens.
+
+   INTEROP LEAF, opt-in. BlockNote (https://www.blocknotejs.org) themes its
+   editor, menus, side menu, toolbar and text highlights through `--bn-*`
+   custom properties on `.bn-root`, with its own light and dark values. Point
+   them at the bronto tokens and the editor follows the theme, skins, contrast
+   and the OLED surface like the rest of the page.
+
+   BlockNote's stylesheet is unlayered, and an unlayered rule outranks any
+   layered one, so import this leaf's UNLAYERED build, after BlockNote's:
+
+     @import '@blocknote/mantine/style.css';
+     @import '@ponchia/ui/css/unlayered/blocknote.css';
+
+   Text and background highlights are categorical identity (a colour a person
+   chose for a span), so they take `--cat-N-ink` and `--cat-N-tint` from
+   css/dataviz.css. Without that leaf they fall back to the status colours.
+   ========================================================================== */
+
+.bn-root,
+.bn-root[data-color-scheme] {
+  --bn-font-family: var(--sans);
+  --bn-border-radius: var(--radius-lg);
+  --bn-colors-editor-text: var(--text);
+  --bn-colors-editor-background: var(--panel);
+  --bn-colors-menu-text: var(--text);
+  --bn-colors-menu-background: var(--panel-strong);
+  --bn-colors-tooltip-text: var(--text);
+  --bn-colors-tooltip-background: var(--panel-soft);
+  --bn-colors-hovered-text: var(--text);
+  --bn-colors-hovered-background: var(--panel-soft);
+  --bn-colors-selected-text: var(--on-accent);
+  --bn-colors-selected-background: var(--accent);
+  --bn-colors-disabled-text: var(--text-dim);
+  --bn-colors-disabled-background: var(--panel-soft);
+  --bn-colors-shadow: var(--line);
+  --bn-colors-border: var(--line);
+  --bn-colors-side-menu: var(--text-dim);
+
+  /* Highlights: BlockNote's nine names onto the categorical hues. Gray is the
+     neutral ink; brown, which the palette has no hue for, is the orange ink. */
+  --bn-colors-highlights-gray-text: var(--text-dim);
+  --bn-colors-highlights-gray-background: var(--panel-soft);
+  --bn-colors-highlights-brown-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-brown-background: var(--panel-soft);
+  --bn-colors-highlights-red-text: var(--cat-8-ink, var(--danger));
+  --bn-colors-highlights-red-background: var(--cat-8-tint, var(--panel-soft));
+  --bn-colors-highlights-orange-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-orange-background: var(--cat-2-tint, var(--panel-soft));
+  --bn-colors-highlights-yellow-text: var(--cat-4-ink, var(--warning));
+  --bn-colors-highlights-yellow-background: var(--cat-4-tint, var(--panel-soft));
+  --bn-colors-highlights-green-text: var(--cat-6-ink, var(--success));
+  --bn-colors-highlights-green-background: var(--cat-6-tint, var(--panel-soft));
+  --bn-colors-highlights-blue-text: var(--cat-1-ink, var(--info));
+  --bn-colors-highlights-blue-background: var(--cat-1-tint, var(--panel-soft));
+  --bn-colors-highlights-purple-text: var(--cat-7-ink, var(--info));
+  --bn-colors-highlights-purple-background: var(--cat-7-tint, var(--panel-soft));
+  --bn-colors-highlights-pink-text: var(--cat-5-ink, var(--danger));
+  --bn-colors-highlights-pink-background: var(--cat-5-tint, var(--panel-soft));
+}

package/css/clamp.css

@@ -55,8 +55,8 @@
 }
 
 .ui-clamp__toggle:focus-visible + .ui-clamp__body + .ui-clamp__control {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .ui-clamp__less {

package/css/content.css

@@ -308,6 +308,132 @@
   margin-block-start: var(--space-lg);
 }
 
+/* --- Blocks variant — the block editor's geometry ---
+   For a surface that is both read and edited, where the editor is a block
+   editor (BlockNote's model): the read view has to put every line where the
+   editor will draw it, or the text jumps when the surface switches mode.
+   Blocks carry a small padding instead of flow margins; headings a lead above
+   and a 1.6/1.3/1.15em scale at weight 600; lists a fixed marker column with
+   disc, circle and square; a task row the editor's checkbox geometry. The
+   measure is released: a block surface is as wide as its container. The
+   geometry is the editor's own px, exposed so a host can retune it. */
+
+.ui-prose--blocks {
+  --prose-measure: none;
+  --prose-block: 3px;
+  --prose-heading-lead: 18px;
+  --prose-list-column: 24px;
+
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.ui-prose--blocks > *,
+.ui-prose--blocks > * + *,
+.ui-prose--blocks > * + :is(h1, h2, h3, h4, h5, h6),
+.ui-prose--blocks li,
+.ui-prose--blocks li + li,
+.ui-prose--blocks li > *,
+.ui-prose--blocks :is(ul, ol) :is(ul, ol),
+.ui-prose--blocks blockquote > *,
+.ui-prose--blocks blockquote > * + * {
+  margin-block: 0;
+}
+
+.ui-prose--blocks > :not(ul, ol),
+.ui-prose--blocks li {
+  padding-block: var(--prose-block);
+}
+
+/* An item's own block ends before its nested list, as the editor nests it. */
+.ui-prose--blocks li:has(> :is(ul, ol)) {
+  padding-block-end: 0;
+}
+
+.ui-prose--blocks li > :is(ul, ol) {
+  padding-block-start: var(--prose-block);
+}
+
+.ui-prose--blocks :is(h1, h2, h3, h4, h5, h6) {
+  padding-block: var(--prose-heading-lead) var(--prose-block);
+  border: 0;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.ui-prose--blocks h1 {
+  font-size: 1.6em;
+}
+
+.ui-prose--blocks h2 {
+  font-size: 1.3em;
+}
+
+.ui-prose--blocks h3 {
+  font-size: 1.15em;
+}
+
+.ui-prose--blocks :is(ul, ol) {
+  padding-inline-start: var(--prose-list-column);
+}
+
+.ui-prose--blocks ul {
+  list-style: disc;
+}
+
+.ui-prose--blocks ul ul {
+  list-style: circle;
+}
+
+.ui-prose--blocks ul ul ul {
+  list-style: square;
+}
+
+.ui-prose--blocks li::marker {
+  color: inherit;
+}
+
+/* A task row is the editor's: the checkbox centred in a hit area at the text
+   column, the text padded inside the block. A loose list may put the checkbox
+   in the item's paragraph rather than the item. */
+.ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+  margin-inline-start: calc(-1 * var(--prose-list-column));
+  padding-block: 10px;
+  list-style: none;
+}
+
+.ui-prose--blocks :is(li, li > p):has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+}
+
+.ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+  flex: none;
+  inline-size: 20px;
+  block-size: 20px;
+  margin: 2px 6px 0;
+}
+
+@media (pointer: coarse) {
+  .ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+    padding-block: 16px;
+  }
+
+  .ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+    margin-inline: 12px;
+  }
+}
+
+/* A quote is one block: its text on the body's line, its rule at the column. */
+.ui-prose--blocks blockquote {
+  margin-inline: 0;
+}
+
+.ui-prose--blocks blockquote > * {
+  line-height: inherit;
+}
+
 /* ==========================================================================
    ui-quote — pull-quote with attribution. A long-form companion to
    .ui-prose (works inside it or standalone). Emphasis via scale + a