diff --git a/packages/ui/test/rail-bounds.test.mjs b/packages/ui/test/rail-bounds.test.mjs
new file mode 100644
index 0000000..7b49071
--- /dev/null
+++ b/packages/ui/test/rail-bounds.test.mjs
@@ -0,0 +1,57 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, it } from 'node:test'
+
+// `app.html` re-implements the rail's clamp. It has to: it runs before first paint, before anything
+// is bundled, and the whole point of it is that a rail the reader widened to 320px is never drawn at
+// 246 and then jumped. The duplication is only safe while the copies agree — move `RAIL_MAX` to 520
+// in `rail.svelte.ts` alone and the jump comes back at hydration, silently, and only for the readers
+// who had resized. So the numbers are read back out of the three files that hold them and compared.
+//
+// This lives in the node tests rather than beside `rail.test.ts` because `src/` is a browser project
+// with no `node:*` types; the values are parsed from the source rather than imported for the same
+// reason — `rail.svelte.ts` is a runes module and needs the Svelte compiler to be run at all.
+
+const src = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'src')
+const read = (name) => readFileSync(resolve(src, name), 'utf8')
+
+/** A `export const NAME = 123` from the module that owns the rules. */
+function constant(source, name) {
+ const found = new RegExp(`export const ${name} = (\\d+)`).exec(source)
+ assert.ok(found, `rail.svelte.ts no longer exports ${name}`)
+ return Number(found[1])
+}
+
+describe('the pre-paint rail width', () => {
+ const html = read('app.html')
+ const rules = read('lib/rail.svelte.ts')
+ const css = read('app.css')
+ const script = html.slice(html.indexOf('radial:rail-width'))
+
+ it('reads the key the module writes', () => {
+ assert.match(rules, /const KEY = 'radial:rail-width'/)
+ assert.match(html, /localStorage\.getItem\('radial:rail-width'\)/)
+ })
+
+ it('clamps with the bounds the module owns', () => {
+ const min = constant(rules, 'RAIL_MIN')
+ const max = constant(rules, 'RAIL_MAX')
+ const pane = constant(rules, 'PANE_MIN')
+ assert.ok(script.includes(`Math.max(${min}, Math.min(${max}, shell - ${pane}))`))
+ assert.ok(script.includes(`Math.max(${min}, Math.round(width))`))
+ })
+
+ it('measures the shell the way the stylesheet draws it', () => {
+ // `PANE_MIN` is a rule about `.app`, not about the window: under `?frame` the shell is narrower
+ // than the window by the desk's padding on both sides. After hydration `RailResizer` observes the
+ // real element; this early there is no layout, so the same geometry is computed from the numbers
+ // in the stylesheet — and must keep being the numbers in the stylesheet.
+ const padding = Number(/:root\[data-frame\] body \{ padding: (\d+)px/.exec(css)?.[1])
+ const width = Number(/:root\[data-frame\] \.app \{\s*width: min\((\d+)px/.exec(css)?.[1])
+ assert.ok(padding > 0, 'the framed desk no longer pads the body')
+ assert.ok(width > 0, 'the framed shell no longer has a fixed maximum')
+ assert.ok(script.includes(`framed ? Math.min(${width}, innerWidth - ${padding * 2}) : innerWidth`))
+ })
+})
diff --git a/packages/ui/test/rail-focus-ring.test.mjs b/packages/ui/test/rail-focus-ring.test.mjs
new file mode 100644
index 0000000..257d0d8
--- /dev/null
+++ b/packages/ui/test/rail-focus-ring.test.mjs
@@ -0,0 +1,39 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, it } from 'node:test'
+
+// Two files hold one decision between them. The grip takes focus when it is dragged — otherwise the
+// arrow keys it advertises are only reachable by tabbing the length of the rail — and a scripted
+// `focus()` is precisely the case a UA may read as keyboard-driven, so `:focus-visible` can leave a
+// ring down the edge of a rail somebody has just dragged. `RailResizer` therefore says whether the
+// focus came from the keyboard and `app.css` draws the ring only when it did. Remove either half and
+// the ring is back on every drag, quietly and only under the pointer. So they are checked against
+// each other.
+
+const src = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'src')
+const read = (name) => readFileSync(resolve(src, name), 'utf8')
+
+describe('the grip focus ring', () => {
+ const css = read('app.css')
+ const component = read('lib/components/RailResizer.svelte')
+
+ it('is drawn from the attribute the component sets', () => {
+ assert.match(component, /data-ring=\{/)
+ assert.match(css, /\.rail-resize\[data-ring\][\s,][^{}]*\{[^}]*outline: 2px/)
+ })
+
+ it('is the only thing that draws it', () => {
+ assert.ok(css.includes('.rail-resize:not([data-ring]):focus-visible { outline: 0; }'))
+ // The opt-out above is the whole point; a rule that paints the grip from `:focus-visible` alone
+ // would put the drag's ring back beside it. (Selectors spanning lines — the shared ring rule the
+ // first test reads — do not match, which is right: that one is keyed on the attribute.)
+ for (const selector of css.match(/[^\n{}]*\.rail-resize[^\n{}]*:focus-visible[^\n{}]*/g) ?? []) {
+ assert.ok(
+ selector.includes(':not([data-ring])'),
+ `\`${selector.trim()}\` gives the grip a ring the pointer can trip`,
+ )
+ }
+ })
+})