react-x11 2.52.0 → 2.54.0

package/docs/ecosystem/icons.md

@@ -1,28 +1,27 @@
 # Icons
 
 react-x11 has a real `<svg>` host, so icons get further than most DOM
-libraries — which is exactly why the failures here are unusual. Two renderer
-facts shape every entry on this page:
-
-1. **ntk's `SvgView` ignores presentation attributes on the root `<svg>`
-   element.** Inheritance starts from its own defaults, so an icon that puts
-   `fill="none" stroke="currentColor" stroke-width="2"` on the root renders
-   as solid black blobs — wrong glyphs, not just the wrong colour. Moving
-   those attributes onto an inner `<g>` fixes it, because `<g>` does
-   inherit.
+libraries. Two renderer facts shape every entry on this page:
+
+1. **ntk's `SvgView`, which rasterizes `<svg>`, ignores presentation
+   attributes on the root element.** Inheritance starts from its own
+   defaults, so an icon with `fill="none" stroke="currentColor"
+stroke-width="2"` on the root renders as solid black blobs — wrong
+   glyphs, not just the wrong colour. Moving those attributes onto an inner
+   `<g>`, which does inherit, fixes it.
 2. **Flat style props on `<svg>` throw.** `<svg width={24}>` is
    `react-x11: <svg width=…> is a style property — pass it in style`. Size
    with `style={{ width: 24 }}`; the `viewBox` keeps the aspect ratio.
 
 Fact 2 is why `lucide-react`, `@tabler/icons-react` and
-`@phosphor-icons/react` cannot work at all — see the
-[negative-results register](../ecosystem.md#render-time). `@heroicons/react`
-is the exception, and it is documented below.
+`@phosphor-icons/react` cannot work
+([register](../ecosystem.md#render-time)); `@heroicons/react` is the
+exception.
 
 ## The `iconSource` wrapper {#iconsource}
 
 Four of the packages below ship whole SVG _strings_ with paint attributes on
-the root. They all need the same twelve lines, so write it once:
+the root. They all need the same twelve lines:
 
 ```js
 // icon-source.js — re-root an icon's paint attributes onto a <g> so they
@@ -41,14 +40,11 @@ export function iconSource(svgText, color = '#000') {
 }
 ```
 
-`SvgView` maps `currentColor` to the inherited `color`, which defaults to
-`#000` — so the `color` attribute on the `<g>` is what makes recolouring
-work. Note that `svgText.replaceAll('currentColor', color)` on its own is
-_not_ enough: it fixes the colour but not the dropped `fill="none"`, so
-stroke icons still paint as filled blobs.
-
-Cache the wrapped strings per (name, style, colour); parsing per mount is
-avoidable work.
+`currentColor` resolves to the inherited `color`, which defaults to `#000`,
+so the `color` attribute on the `<g>` is what makes recolouring work.
+`svgText.replaceAll('currentColor', color)` alone is _not_ enough: it fixes
+the colour but not the dropped `fill="none"`, so stroke icons still paint as
+filled blobs. Cache the wrapped strings per (name, style, colour).
 
 ## Iconify {#iconify}
 
@@ -56,14 +52,11 @@ avoidable work.
 
 Iconify publishes every major icon set as JSON data — `@iconify-json/tabler`,
 `@iconify-json/mdi`, `@iconify-json/ph`, `@iconify-json/lucide`,
-`@iconify-json/heroicons` — plus `@iconify/utils`, a framework-free toolkit
-that looks an icon up and builds SVG markup from it.
-
-This is the highest-leverage route: one pipeline, 200,000+ icons across every
-set, no React wrapper to fight. It is also the only string-SVG route that
-needs **no re-rooting adapter**, because `iconToSVG` returns the icon body
-separately from the root attributes, and the paint attributes live inside the
-body rather than on the root.
+`@iconify-json/heroicons` — plus `@iconify/utils`, which looks an icon up and
+builds SVG markup from it. The highest-leverage route: one pipeline, 200,000+
+icons, and the only string-SVG route that needs **no re-rooting adapter**,
+because `iconToSVG` returns the body separately from the root attributes and
+the paint attributes live inside the body.
 
 ```jsx
 import { getIconData, iconToSVG, iconToHTML, replaceIDs } from '@iconify/utils';
@@ -86,10 +79,9 @@ function Icon({ name, size = 24, color }) {
 // <Icon name="settings" size={16} color="#0891b2" />
 ```
 
-- `replaceIDs` matters for icons containing gradients or clip paths;
-  duplicate `id`s across two mounted icons would collide inside one
-  rasterized document. Harmless across separate `<svg>` nodes, but free to
-  keep.
+- `replaceIDs` matters for icons with gradients or clip paths, whose `id`s
+  would collide inside one rasterized document. Harmless across separate
+  `<svg>` nodes, but free to keep.
 - Pick per-set packages (`@iconify-json/tabler` is about 5,000 icons in one
   JSON) rather than the monolithic `@iconify/json`, which is all 200,000+ and
   roughly 100 MB.
@@ -100,11 +92,10 @@ function Icon({ name, size = 24, color }) {
 
 **Out of the box — size it with `style`.** @heroicons/react@2.2.0.
 
-The exception among the `*-react` icon packages. Heroicons' React components
-size themselves with a Tailwind class name rather than flat `width`/`height`
-attributes, so react-x11's `<svg>` host accepts them and the path paints. Do
-not lump this one in with lucide-react, `@tabler/icons-react` or
-`@phosphor-icons/react`, all three of which throw.
+The exception among the `*-react` icon packages: its components size
+themselves with a Tailwind class name rather than flat `width`/`height`
+attributes, so the `<svg>` host accepts them. lucide-react,
+`@tabler/icons-react` and `@phosphor-icons/react` all throw.
 
 ```jsx
 import { BeakerIcon } from '@heroicons/react/24/solid';
@@ -114,25 +105,20 @@ import { BeakerIcon } from '@heroicons/react/24/solid';
 </box>;
 ```
 
-The `className` it sets is ignored by the renderer, so you must pass
-`style={{ width, height }}` yourself — an icon with no size will lay out at
-its natural size or collapse, depending on the surrounding flex box.
-
-There is no recolour channel through the component, so if you need a themed
-icon use the asset package below, or `@iconify-json/heroicons`.
+The renderer ignores the `className`, so pass `style={{ width, height }}`
+yourself — an icon with no size lays out at its natural size or collapses,
+depending on the surrounding flex box. There is no recolour channel; for a
+themed icon use the asset package below, or `@iconify-json/heroicons`.
 
 ## `lucide` {#lucide}
 
 **Adapter, ~10 lines.** lucide@1.28.0.
 
-Lucide's core package. Alongside the DOM-oriented `createIcons`, every icon
-is exported as plain data: an array of `[tag, attrs]` pairs. No DOM, no
-React, tree-shakeable per icon.
-
-This is the best-fitting icon package for react-x11, because the data shape
-skips string parsing entirely — each pair becomes a JSX child of `<svg>`,
-which react-x11 serializes through `SvgChildNode` (camelCase to kebab
-attributes) into ntk's `SvgView`.
+Lucide's core package exports every icon as plain data — an array of
+`[tag, attrs]` pairs — alongside the DOM-oriented `createIcons`.
+Tree-shakeable per icon, and the best fit for react-x11: no string parsing,
+each pair becomes a JSX child of `<svg>` (camelCase props serialize as
+kebab-case attributes).
 
 ```jsx
 import { createElement } from 'react';
@@ -160,8 +146,7 @@ function Icon({ icon, size = 24, color = '#000', strokeWidth = 2 }) {
 // <Icon icon={theme === 'dark' ? Sun : House} color={accent} />
 ```
 
-Prop changes on SVG children invalidate and repaint correctly — swapping
-`icon` or `color` in state re-renders the icon.
+Swapping `icon` or `color` in state repaints the icon.
 
 - Omitting the `<g>` and putting `stroke`/`fill` on the `<svg>` silently
   renders black filled blobs.
@@ -175,10 +160,9 @@ Prop changes on SVG children invalidate and repaint correctly — swapping
 
 **Adapter — the [`iconSource` wrapper](#iconsource).** lucide-static@1.28.0.
 
-The framework-free build of Lucide: every icon is a named export that is just
-an SVG markup string. 24×24 viewBox, stroke-based, `stroke="currentColor"`
-with round caps and joins — all on the root element, which is why it needs
-the wrapper.
+Every Lucide icon as a named export holding an SVG markup string: 24×24,
+stroke-based, `stroke="currentColor"` with round caps and joins — all on the
+root element, hence the wrapper.
 
 ```jsx
 import * as lucide from 'lucide-static';
@@ -192,25 +176,23 @@ const Icon = ({ name, size = 24, color = '#000' }) => (
 // <Icon name="Sun" size={16} color="#eab308" />
 ```
 
-Use the `lucide` data package above where you can; reach for this one when
-you want the markup string itself (asset pipelines, caching a pre-built
-sheet).
+Prefer the `lucide` data package; use this one when you want the markup
+string itself (asset pipelines, a pre-built sheet).
 
 ## `react-icons` {#react-icons}
 
 **Adapter, ~15 lines.** react-icons@5.7.0.
 
-The standard React icon aggregator — Font Awesome, Material, Lucide,
-Bootstrap, Simple Icons and about fifty more, tens of thousands of icons
-behind one API. Out of the box it throws, because `IconBase` always sets
-`height`/`width` (default `"1em"`) as flat props on `<svg>`.
+The React icon aggregator — Font Awesome, Material, Lucide, Bootstrap,
+Simple Icons and about fifty more behind one API. Unadapted it throws,
+because `IconBase` always sets `height`/`width` (default `"1em"`) as flat
+props on `<svg>`.
 
-The adapter sidesteps `IconBase` entirely. An icon component called with
-empty props returns the `IconBase` element, whose props carry exactly what is
-needed: `attr` (the set's root attributes — `viewBox`, and for stroke-based
-sets the paint attributes) and `children` (the icon's paths as ready-made
-React elements). Re-rooting those attributes onto an inner `<g>` handles
-fact 1 above.
+The adapter sidesteps `IconBase`. An icon component called with empty props
+returns the `IconBase` element, whose props carry `attr` (the set's root
+attributes — `viewBox`, and for stroke sets the paint attributes) and
+`children` (the paths as React elements). Re-rooting `attr` onto an inner
+`<g>` handles fact 1.
 
 ```jsx
 import { FaHeart } from 'react-icons/fa';
@@ -239,25 +221,23 @@ function RIcon({ icon: I, size = 24, color = '#000' }) {
 // <RIcon icon={LuHouse} color="#2563eb" />   stroke-based
 ```
 
-- `I({})` inside render leans on each icon being a plain function component
-  wrapping `GenIcon`. That has been react-icons' shape since v4, but it is an
-  internal one — if it changes, prefer `lucide` or the Iconify pipeline,
-  which have no such seam.
+- `I({})` relies on each icon being a plain function component wrapping
+  `GenIcon` — react-icons' shape since v4, but an internal one. `lucide` and
+  the Iconify pipeline have no such seam.
 - `IconContext` (global size/colour config) is bypassed; pass props instead.
-- The `title` prop emits an SVG `<title>` child, and there is no tooltip or
-  assistive-technology surface behind a rasterized SVG. Omit it.
-- react-icons is heavy on disk — every set is bundled. If you only need one
-  style, `lucide` or `@iconify-json/<set>` is a much smaller install.
+- The `title` prop emits an SVG `<title>` child, which reaches no tooltip or
+  assistive technology from a rasterized SVG. Omit it.
+- react-icons bundles every set and is heavy on disk; for one style,
+  `lucide` or `@iconify-json/<set>` is a much smaller install.
 
 ## `@tabler/icons` {#tabler-icons}
 
 **Adapter — the [`iconSource` wrapper](#iconsource).** @tabler/icons@3.46.0.
 
-The framework-free Tabler package: 5,000+ MIT icons as SVG files under
-`icons/outline/` (stroke-based, 24×24) and `icons/filled/`, with an `exports`
-map that resolves file paths directly. It also ships
-`tabler-nodes-outline.json`/`-filled.json` — per-icon node arrays, the same
-idea as `lucide`'s data exports.
+5,000+ MIT icons as SVG files under `icons/outline/` (stroke-based, 24×24)
+and `icons/filled/`, with an `exports` map that resolves file paths, plus
+`tabler-nodes-outline.json`/`-filled.json` — per-icon node arrays like
+`lucide`'s data exports.
 
 ```jsx
 import fs from 'node:fs';
@@ -280,30 +260,25 @@ const Icon = ({ name, style, size = 24, color = '#000' }) => (
 // <Icon name="settings" style="filled" size={16} />
 ```
 
-Honestly, though: **prefer `@iconify-json/tabler` + `@iconify/utils`**, which
-serves identical art with no adapter at all. This package earns its place
-when you want the files themselves (design pipelines, asset preprocessing) or
-the JSON node arrays.
+**Prefer `@iconify-json/tabler` + `@iconify/utils`**: identical art, no
+adapter. Use this package when you want the files themselves or the JSON
+node arrays.
 
-- Outline icons start with a `<path stroke="none" d="M0 0h24v24H0z"
-fill="none"/>` bounds rect; it inherits nothing and paints nothing.
-  Harmless.
-- `@tabler/icons-react` throws. See the
-  [register](../ecosystem.md#render-time).
+- Outline icons start with a
+  `<path stroke="none" d="M0 0h24v24H0z" fill="none"/>` bounds rect, which
+  paints nothing. Harmless.
+- `@tabler/icons-react` throws ([register](../ecosystem.md#render-time)).
 
 ## `@phosphor-icons/core` {#phosphor-icons}
 
 **Adapter — the [`iconSource` wrapper](#iconsource).**
 @phosphor-icons/core@2.1.1.
 
-Phosphor's framework-free package: raw SVG files under
-`assets/<weight>/<name>.svg` for six weights (`thin`, `light`, `regular`,
-`bold`, `fill`, `duotone`), 256×256 viewBox, fill-based.
-
-Because Phosphor is fill-based, the raw file _does_ render legible black
-glyphs — the default fill happens to match — so the wrapper is only
-mandatory for colour. The `duotone` weight relies on per-path opacity, which
-survives fine either way.
+Raw SVG files under `assets/<weight>/<name>.svg` for six weights (`thin`,
+`light`, `regular`, `bold`, `fill`, `duotone`), 256×256 viewBox,
+fill-based. Because the default fill matches, the raw file renders legible
+black glyphs; the wrapper is only needed for colour. `duotone`'s per-path
+opacity survives either way.
 
 ```jsx
 import fs from 'node:fs';
@@ -331,19 +306,17 @@ const Icon = ({ name, weight, size = 24, color = '#000' }) => (
 ```
 
 - Non-`regular` weights use suffixed filenames
-  (`assets/bold/house-bold.svg`); the helper above accounts for it.
+  (`assets/bold/house-bold.svg`); the helper above handles it.
 - `@iconify-json/ph` serves the same set with no adapter and no filesystem
   access. Prefer it unless you want the files.
-- `@phosphor-icons/react` throws. See the
-  [register](../ecosystem.md#render-time).
+- `@phosphor-icons/react` throws ([register](../ecosystem.md#render-time)).
 
 ## `heroicons` (the asset package) {#heroicons-assets}
 
 **Adapter — the [`iconSource` wrapper](#iconsource).** heroicons@2.2.0.
 
-The Tailwind-house set as plain SVG files: `24/outline/*.svg` (stroke-based),
-`24/solid/`, `20/solid/` and `16/solid/`. No JS at all — the `heroicons` npm
-package is just the files.
+The Tailwind set as plain SVG files, no JS: `24/outline/*.svg`
+(stroke-based), `24/solid/`, `20/solid/` and `16/solid/`.
 
 ```jsx
 import fs from 'node:fs';
@@ -366,22 +339,18 @@ const Icon = ({ name, style, size = 24, color = '#000' }) => (
 // <Icon name="home" style="24/solid" color="#0ea5e9" />
 ```
 
-Use this rather than `@heroicons/react` when you need to recolour — the React
-components render fine but give you no colour channel. `heroicons` has no JS
-index, so enumerate the directory if you need a picker.
-
-**Prefer `@iconify-json/heroicons`** through the [Iconify](#iconify)
-pipeline: it is the same art, with no adapter and no filesystem access. Reach
-for the asset package when you specifically want the files.
+Use this rather than `@heroicons/react` when you need to recolour. There is
+no JS index, so enumerate the directory for a picker. **Prefer
+`@iconify-json/heroicons`** through the [Iconify](#iconify) pipeline — same
+art, no adapter, no filesystem access — unless you want the files.
 
 ## `feather-icons` {#feather-icons}
 
 **Adapter, ~5 lines.** feather-icons@4.29.2.
 
-The classic 24×24 stroke set, 287 icons. Feather exposes `.contents` — the
-inner SVG markup, without a root element — which makes the adapter a template
-literal instead of a regex: build the root and the `<g>` yourself and fact 1
-never applies.
+The classic 24×24 stroke set, 287 icons. `.contents` is the inner SVG
+markup without a root element, so the adapter is a template literal: build
+the root and the `<g>` yourself and fact 1 never applies.
 
 ```jsx
 import feather from 'feather-icons';
@@ -399,12 +368,10 @@ const Icon = ({ name, size = 24, color, strokeWidth }) => (
 // <Icon name="alert-circle" color="#f59e0b" />
 ```
 
-- **Prefer Lucide.** Feather is in maintenance mode upstream — no new icons
-  in years. Lucide is its actively-developed fork with five times the
-  coverage and the same visual language. Reach for Feather only if you are
-  matching an existing design.
-- Raw `feather.icons.x.toSvg()` into `<svg source>` renders wrong, because
-  `toSvg()` puts every paint attribute on the root. `toSvg({ color })` sets
-  `color` on the root too, where it is equally ignored. Always go through
-  `.contents`.
+- **Prefer Lucide**, Feather's actively developed fork with five times the
+  coverage and the same look; Feather has had no new icons in years. Use it
+  only to match an existing design.
+- `feather.icons.x.toSvg()` into `<svg source>` renders wrong: `toSvg()`
+  puts every paint attribute, and `toSvg({ color })`'s `color`, on the root,
+  where they are ignored. Always go through `.contents`.
 - `feather.replace()` (the DOM `<i data-feather>` swapper) is browser-only.

package/docs/ecosystem/layout.md

@@ -1,31 +1,25 @@
 # Layout and positioning
 
 Layout itself is yoga's job — see [styling](../styling.md). The two packages
-here cover the parts yoga does not: placing a popup relative to a trigger
-across screen edges, and rendering a long list without building a node per
-row.
-
-Both are the _core_ half of a library whose React wrapper is DOM-bound. That
-is the recurring shape in this section of the ecosystem: the algorithm is
-portable, the wrapper is not, and the core is published separately precisely
-so that non-DOM hosts can use it.
+here cover what yoga does not: placing a popup relative to a trigger across
+screen edges, and rendering a long list without a node per row. Both are the
+_core_ half of a library whose React wrapper is DOM-bound; the core is
+published separately so non-DOM hosts can use it.
 
 ## `@floating-ui/core` {#floating-ui}
 
 **Adapter, ~35 lines (a platform object).** @floating-ui/core@1.8.0.
 
-The positioning engine underneath Floating UI, published without any DOM
-code. You hand `computePosition` a `platform` object — `getElementRects`,
-`getDimensions`, `getClippingRect`, `isRTL` — and get back the full
-middleware pipeline (`offset`, `flip`, `shift`, `size`, `arrow`,
-`autoPlacement`, `hide`) with the placement vocabulary every web developer
-already knows.
+Floating UI's positioning engine without DOM code. Hand `computePosition` a
+`platform` object — `getElementRects`, `getDimensions`, `getClippingRect`,
+`isRTL` — and get the full middleware pipeline (`offset`, `flip`, `shift`,
+`size`, `arrow`, `autoPlacement`, `hide`) and its placement vocabulary.
 
-The seam is exactly where `anchorRect()` already works: a drawn node's
-`node.abs` rect plus the owning window's screen origin gives the reference
-rect in screen coordinates, `screenOf(node)` gives the clipping rect, and the
-popup-to-be is just `{width, height}`. The result's `{x, y, placement}` drops
-straight into `<popup x y>`.
+As in the built-in `anchorRect()`, a drawn node's `node.abs` rect plus the
+window's screen origin is the reference rect in screen coordinates,
+`screenOf(node)` gives the clipping rect, and the popup-to-be is just
+`{width, height}`. The result's `{x, y, placement}` drops straight into
+`<popup x y>`.
 
 ```jsx
 import { computePosition, offset, flip, shift } from '@floating-ui/core';
@@ -78,40 +72,37 @@ const { x, y, placement } = await computePosition(
 // -> <popup x={x} y={y}> ; placement tells you which side won
 ```
 
-What this buys over the built-in `anchorRect` is middleware composition
-(`shift` with padding, `size` to clamp long menus, `arrow`) and alignment
-fallback — `flip` with `crossAxis: 'alignment'` switches `bottom-start` to
-`bottom-end` when that is what fits. `anchorRect`'s `placement`, `align` and
-`offset` options map 1:1 onto `placement` plus the `offset()` middleware.
+Over `anchorRect` this adds middleware composition (`shift` with padding,
+`size` to clamp long menus, `arrow`) and alignment fallback — `flip` with
+`crossAxis: 'alignment'` switches `bottom-start` to `bottom-end` when that
+fits. `anchorRect`'s `placement`, `align` and `offset` options map 1:1 onto
+`placement` plus the `offset()` middleware.
 
-- `computePosition` is async — `await` it, even though this platform is fully
+- `computePosition` is async — `await` it, though this platform is
   synchronous.
 - `getClippingRect` above is screen 0's full rect, the same single-monitor
-  simplification `screenOf` has today. On a dual-head X display, popups clamp
-  to the bounding box of both monitors.
-- **`@floating-ui/dom` and `@floating-ui/react` are not usable** — they are
-  the DOM platform and DOM interactions respectively. Only `core` and its
-  `@floating-ui/utils` dependency belong in an X11 app.
-- The safe-polygon hover logic in `anchor.js` has no equivalent in `core`;
-  that lives in `@floating-ui/react`'s `useHover`, which is DOM-bound. Keep
-  the built-in one.
+  simplification as `screenOf`. On a dual-head X display, popups clamp to
+  the bounding box of both monitors.
+- **`@floating-ui/dom` and `@floating-ui/react` are not usable** (DOM
+  platform and DOM interactions). Only `core` and its `@floating-ui/utils`
+  dependency belong in an X11 app.
+- Safe-polygon hover lives in `@floating-ui/react`'s DOM-bound `useHover`,
+  not in `core`; keep react-x11's built-in one.
 
 ## `@tanstack/virtual-core` {#tanstack-virtual}
 
 **Adapter, ~40 lines.** @tanstack/virtual-core@3.17.7.
 
-The virtualization engine behind `useVirtualizer`: given a count, an
-`estimateSize`, the viewport rect and the scroll offset, it computes which
-items are visible (`getVirtualItems()`), the total scrollable size
-(`getTotalSize()`), and offsets for `scrollToIndex`. All DOM touchpoints are
-constructor options, which is what makes this work.
+The engine behind `useVirtualizer`: from a count, an `estimateSize`, the
+viewport rect and the scroll offset it computes the visible items
+(`getVirtualItems()`), the total size (`getTotalSize()`), and offsets for
+`scrollToIndex`. Every DOM touchpoint is a constructor option.
 
 **Do not import `@tanstack/react-virtual`.** Its first line is
-`import { flushSync } from "react-dom"`. Without react-dom installed it fails
-to resolve; _with_ react-dom installed it silently flushes into the wrong
-reconciler — see the
-[silent-failures table](../ecosystem.md#silent-failures). Everything the
-React wrapper adds is the hook below.
+`import { flushSync } from "react-dom"`: without react-dom it fails to
+resolve; _with_ it, it silently flushes into the wrong reconciler
+([silent failures](../ecosystem.md#silent-failures)). The hook below is
+everything the React wrapper adds.
 
 Three seams wire to a scrolling `<box>`:
 
@@ -121,9 +112,9 @@ Three seams wire to a scrolling `<box>`:
 - `observeElementOffset` → `<box onScroll>` (`scrollY`);
 - `scrollToFn` → `ref.scrollTo(offset)`.
 
-One non-obvious requirement: `getScrollElement()` must return something with
-`scrollHeight`/`clientHeight`, because virtual-core duck-types Element vs
-Window with `'scrollHeight' in el`. A getter shim over the scroll box node's
+`getScrollElement()` must return something with
+`scrollHeight`/`clientHeight` (virtual-core duck-types Element vs Window
+with `'scrollHeight' in el`); a getter shim over the node's
 `contentHeight`/`abs.height` satisfies it.
 
 ```jsx
@@ -207,10 +198,9 @@ function BigList() {
 - **First paint shows zero rows.** Layout runs on the frame clock after the
   mount commit, `onViewport` reports a tick later, and the list fills in on
   the next frame. Fine interactively; tests must tick a few times.
-- `estimateSize` is the only measurement. Dynamic per-item measurement
-  (`measureElement`) is built on `ResizeObserver` and
-  `getBoundingClientRect`. For variable-height rows, pass exact sizes:
-  `estimateSize: (i) => heights[i]`.
+- `estimateSize` is the only measurement; `measureElement` is built on
+  `ResizeObserver` and `getBoundingClientRect`. For variable-height rows
+  pass exact sizes: `estimateSize: (i) => heights[i]`.
 - `_didMount`/`_willUpdate` are underscored but are the documented pattern
-  for custom framework adapters — the official React, Vue and Svelte adapters
-  call exactly these.
+  for custom adapters — the official React, Vue and Svelte adapters call
+  exactly these.

package/docs/ecosystem/routing.md

@@ -1,25 +1,17 @@
 # Routing
 
-There is no URL bar and no `history` object, so every router on this page
-runs on an in-memory location. That is not a workaround — both libraries ship
-a first-party memory backend, because both already support React Native and
-testing.
-
-What consistently does not survive is the _link_ element. `<Link>` renders an
-`<a>` host in both routers, and there is no `<a>` here. Navigate imperatively
-from a `<box onClick>` instead; that is two lines and it is all you lose.
-
-Also worth saying up front: a desktop app usually wants stack or tab
-navigation semantics rather than URL paths. These libraries give you the
-matching machinery, not a back stack — build that on top if you need it.
+There is no URL bar and no `history` object, so both routers here run on
+their first-party in-memory location. What does not survive is `<Link>`,
+which renders an `<a>` host in both; navigate from a `<box onClick>`
+instead. These libraries give you matching, not a back stack — build stack
+or tab navigation on top if you need it.
 
 ## wouter {#wouter}
 
 **Out of the box — with `wouter/memory-location`.** wouter@3.10.0.
 
 A 2 kB router: `<Router>`, `<Route>`, `<Switch>`, `useLocation`, pattern
-params. Location sources are pluggable hooks and the package ships a
-non-browser one, so there is no adapter to write.
+params, and a pluggable location hook with a non-browser one shipped.
 
 ```jsx
 import React from 'react';
@@ -66,13 +58,12 @@ const App = () => (
 - **Always mount the memory hook at the top.** A `<Route>` outside a
   `<Router hook={...}>` falls back to `useBrowserLocation` and crashes
   immediately with `ReferenceError: location is not defined`.
-- **`<Link>` does not work.** It renders an `<a>` host element.
-  `<Link asChild>` avoids the `<a>` but still does not navigate: its click
-  guard checks `event.button !== 0`, and react-x11's synthetic
-  `MouseEvent.button` is the X button number, which is `1` for left.
-- `useLocation()[1]` gives you the same `navigate` from inside components;
-  the module-level one from `memoryLocation` is just more convenient with a
-  single router.
+- **`<Link>` does not work**: it renders an `<a>`. `<Link asChild>` avoids
+  the `<a>` but does not navigate, because its click guard checks
+  `event.button !== 0` and react-x11's `MouseEvent.button` is the X button
+  number, `1` for left.
+- `useLocation()[1]` is the same `navigate` from inside components; the
+  module-level one is handier with a single router.
 - `useHashLocation` and `useBrowserLocation` are browser-only. Everything
   else — matching, params, nesting, `useRoute` — is pure.
 - `memoryLocation({ record: true })` keeps a `history` array, which is the
@@ -85,8 +76,7 @@ react-router 7.18.2.
 
 The router core — `useRoutes`, `useNavigate`, `useParams`, `useLocation`,
 loaders, actions — is DOM-free. Import from `react-router`, not
-`react-router-dom`; the DOM package re-exports the core plus the browser
-entry points, and the browser entry points are exactly what fails.
+`react-router-dom`, whose browser entry points are what fails.
 
 ```jsx
 import React from 'react';
@@ -131,16 +121,15 @@ function About() {
 );
 ```
 
-- **`BrowserRouter` and `HashRouter` both fail** — they call
-  `createBrowserHistory`, which needs `window.history`. The error is
+- **`BrowserRouter` and `HashRouter` fail** — `createBrowserHistory` needs
+  `window.history`. The error is
   `react-x11: uncaught error ReferenceError: document is not defined` at
-  `getUrlBasedHistory`, and note that `render()` does not throw: react-x11
-  logs it and the window count stays 0.
+  `getUrlBasedHistory`; `render()` does not throw, react-x11 logs it and the
+  window count stays 0.
 - **`<Link>`, `<NavLink>` and `<Form>` all render `<a>`/`<form>` hosts** and
   cannot work. Use `useNavigate()` on a `<box onClick>`.
 - A `<Link>` with a bare string child hits the raw-text error before the
   element error: `react-x11: raw text "go" must be wrapped in a <text>
 element`. Both are in the
   [register](../ecosystem.md#render-time).
-- If you do not need loaders and actions, wouter above is the smaller
-  dependency by a wide margin.
+- Without loaders and actions, wouter is the much smaller dependency.