cursedbelt 5.96.1 → 5.97.0

package/scripts/guardrailsEnforce.ts

@@ -163,6 +163,11 @@
 //     <Name,…>`; with no list the rule is inert rather than guessing. Near spellings count
 //     too (task 2381): `CheckBox`, `StatusBadge`, `Stat`, `ToastStack`.
 //
+//   no-hand-rolled-divider — owner, 2026-10-27: every divider drags as far as the hand takes
+//     it, shutting a pane included. An app imports `react-resizable-panels` only through
+//     cursedbelt's `SplitPane`/`PanelGrid`, and a seam it draws itself (a `separator` role
+//     with a pointer handler) takes its geometry from `reachSize`/`stepSize`. See its block.
+//
 //   no-inline-style — DESIGN.md §3/§4 (task 2381): `style={{…}}` may carry only a CSS
 //     custom property or COMPUTED geometry; a literal size, color or font is a violation.
 //
@@ -3101,6 +3106,61 @@ const noArbitraryLength: Rule = {
 	},
 };
 
+// ── no-hand-rolled-divider (forge task 3839, 2026-10-27) ──────────────────────────
+// The owner: *"For all dividers … that I can drag to size the panes, let me drag them as far as I
+// want including shutting a pane completely … I don't want any panes to block me."* station's
+// Queue capped its task list at 36% (`MasterDetail`'s `max`), and desk's own seams each kept a
+// min and a max of their own, so every app's divider stopped somewhere different and none could
+// be shut.
+//
+// cursedbelt's dividers obey one rule (`src/react/lib/paneReach.ts`): no maximum, and a minimum
+// that is a SNAP — below half of it the pane shuts. `SplitPane`/`PanelGrid` cannot be capped (the
+// props are gone), `PaneSplit` and `useRailResize` call the rule. So in app source:
+//   - importing `react-resizable-panels` directly is a violation — it is how a `maxSize` comes back;
+//   - a seam drawn by hand (`role="separator"` in a file with a pointer or mouse-down handler) is
+//     a violation unless the file imports `reachSize` or `stepSize` from cursedbelt, which is the
+//     whole of what makes a hand-drawn seam obey the rule.
+// A drag that is not a pane divider (a spreadsheet's column-width grip) opts out on the block
+// above with `guardrails-ignore no-hand-rolled-divider: <why>`.
+const RAW_PANELS_IMPORT_RE = /from\s+["']react-resizable-panels["']/g;
+const SEPARATOR_ROLE_RE = /role\s*[=:]\s*\{?\s*["']separator["']/g;
+const SEAM_DRAG_RE = /\bon(?:Pointer|Mouse)Down\b|["'](?:pointer|mouse)down["']/;
+const REACH_IMPORT_RE = /import\s*\{[^}]*\b(?:reachSize|stepSize)\b[^}]*\}\s*from\s*["']cursedbelt\//;
+const DIVIDER_IGNORE_RE = /guardrails-ignore\s+no-hand-rolled-divider\s*:/;
+
+const noHandRolledDivider: Rule = {
+	name: "no-hand-rolled-divider",
+	description:
+		"owner, 2026-10-27 (forge task 3839): every divider drags as far as the hand takes it, shutting a pane included. Split panes are cursedbelt's SplitPane / PanelGrid / MasterDetail / PaneSplit / useRailResize — never react-resizable-panels directly (that is how a maxSize comes back) — and a seam an app draws itself takes its geometry from cursedbelt's reachSize/stepSize (cursedbelt/react/pane-split), so no pane has a maximum and any pane can be shut.",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (extname(normalized) === ".css" || isTestSource(normalized)) return [];
+		const scannable = blankComments(source);
+		const lines = source.split("\n");
+		const optedOut = (line: number) => {
+			const block: string[] = [];
+			for (let i = line - 2; i >= 0 && block.length < 12; i--) {
+				const raw = lines[i] ?? "";
+				if (raw.trim() === "") break;
+				block.push(raw);
+			}
+			return DIVIDER_IGNORE_RE.test(block.join("\n"));
+		};
+		const violations: Violation[] = [];
+		for (const match of scannable.matchAll(RAW_PANELS_IMPORT_RE)) {
+			const line = lineOf(source, match.index ?? 0);
+			if (!optedOut(line)) violations.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });
+		}
+		if (SEAM_DRAG_RE.test(scannable) && !REACH_IMPORT_RE.test(scannable)) {
+			for (const match of scannable.matchAll(SEPARATOR_ROLE_RE)) {
+				const line = lineOf(source, match.index ?? 0);
+				if (!optedOut(line)) violations.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });
+			}
+		}
+		return violations;
+	},
+};
+
 export const RULES: Record<string, Rule> = {
 	[noRawActionButton.name]: noRawActionButton,
 	[rawButtonResetsFace.name]: rawButtonResetsFace,
@@ -3114,6 +3174,7 @@ export const RULES: Record<string, Rule> = {
 	[noRawDataTable.name]: noRawDataTable,
 	[noHandRolledPropertyList.name]: noHandRolledPropertyList,
 	[noRawKbd.name]: noRawKbd,
+	[noHandRolledDivider.name]: noHandRolledDivider,
 	[noTailwindPalette.name]: noTailwindPalette,
 	[themeColoursResolve.name]: themeColoursResolve,
 	[noRawTitleAttr.name]: noRawTitleAttr,

package/src/react/components/PaneSplit.spec.tsx

@@ -48,13 +48,36 @@ describe('PaneSplit', () => {
     expect(sizes[1]).toBeCloseTo(0.48);
   });
 
-  test('Home and End stop at the smallest share a pane may have', () => {
+  // The owner, 2026-10-27: no divider is a wall — a pane can be shut, from either side.
+  test('Home and End shut the pane on either side of the seam', () => {
     const onResize = draw();
     const [, outer] = screen.getAllByRole('separator');
+    expect([outer!.getAttribute('aria-valuemin'), outer!.getAttribute('aria-valuemax')]).toEqual(['0', '100']);
     fireEvent.keyDown(outer!, { key: 'Home' });
     expect(onResize.mock.calls[0]![0]).toEqual([]);
-    expect(onResize.mock.calls[0]![1][0]).toBeCloseTo(0.12);
+    expect(onResize.mock.calls[0]![1]).toEqual([0, 1]);
     fireEvent.keyDown(outer!, { key: 'End' });
-    expect(onResize.mock.calls[1]![1][0]).toBeCloseTo(0.88);
+    expect(onResize.mock.calls[1]![1]).toEqual([1, 0]);
+  });
+
+  test('an arrow from the snap shuts the pane, and the next one opens it at the snap', () => {
+    const onResize = mock();
+    const at = (share: number): PaneSplitNode<{ id: string }> => ({
+      kind: 'split',
+      direction: 'row',
+      sizes: [share, 1 - share],
+      children: [
+        { kind: 'leaf', pane: { id: 'a' } },
+        { kind: 'leaf', pane: { id: 'b' } },
+      ],
+    });
+    const { rerender } = render(<PaneSplit node={at(0.12)} paneKey={(pane) => pane.id} renderPane={(pane) => <section aria-label={pane.id} />} onResize={onResize} />);
+    fireEvent.keyDown(screen.getByRole('separator'), { key: 'ArrowLeft' });
+    expect(onResize.mock.calls[0]![1]).toEqual([0, 1]);
+    rerender(<PaneSplit node={at(0)} paneKey={(pane) => pane.id} renderPane={(pane) => <section aria-label={pane.id} />} onResize={onResize} />);
+    // A shut pane draws nothing, but its seam is still there to bring it back.
+    expect(screen.getByLabelText('a').parentElement!.hasAttribute('data-shut')).toBe(true);
+    fireEvent.keyDown(screen.getByRole('separator'), { key: 'ArrowRight' });
+    expect(onResize.mock.calls[1]![1][0]).toBeCloseTo(0.12);
   });
 });

package/src/react/components/PaneSplit.tsx

@@ -11,7 +11,11 @@
  * and the arithmetic that turns a pointer into a pair of fractions. Unlike `PanelGrid` it owns no
  * sizes and persists nothing, which is what an app that stores its layout as a setting needs.
  *
- * 🔴 **The seam is keyboard-operable.** Arrow keys move it by 2%, Home/End take it to the bounds.
+ * 🔴 **The seam is keyboard-operable.** Arrow keys move it by 2%, Home/End shut the pane either side.
+ *
+ * 🔴 **No seam is a wall** (the owner, 2026-10-27: *"let me drag them as far as I want including
+ * shutting a pane completely"*). `minFraction` is a snap, not a floor: `lib/paneReach.ts` shuts a pane
+ * dragged below half of it, and a shut pane's seam stays at the edge to drag it open again.
  *
  * 🔴 **The hit strip lives inside the seam's own track** — a real flex item, never a bar hung over
  * the boundary. An invisible strip centered on the seam sits over the first pixels of the pane beside
@@ -25,8 +29,12 @@
 
 import type { CSSProperties, JSX, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';
 import { useCallback, useRef } from 'react';
+import { reachSize, stepSize } from '../lib/paneReach.js';
 import './paneSplit.css';
 
+/** The rule every divider obeys — re-exported for a seam an app draws itself (guardrails' `no-hand-rolled-divider`). */
+export { reachSize, stepSize } from '../lib/paneReach.js';
+
 export type PaneSplitDirection = 'row' | 'column';
 
 export type PaneSplitNode<P> =
@@ -43,7 +51,10 @@ export interface PaneSplitProps<P> {
   renderPane: (pane: P) => JSX.Element;
   /** A seam moved: the split at `path` now has these fractions. */
   onResize: (path: PaneSplitPath, sizes: number[]) => void;
-  /** The smallest share of an axis a pane can be dragged down to. Default 0.12. */
+  /**
+   * The snap: a pane dragged below half of this share shuts, and between half and all of it holds
+   * here (`lib/paneReach.ts`). Never a floor — any pane can be shut. Default 0.12.
+   */
   minFraction?: number;
   /** Where `node` sits — only for a tree drawn from below its root. */
   path?: PaneSplitPath;
@@ -79,16 +90,15 @@ function SplitNode<P>({
 
   /** Set the share of the pair either side of seam `index`; only those two panes move. */
   const setShare = useCallback(
-    (index: number, share: number) => {
+    (index: number, bounded: number) => {
       const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
       if (pair <= 0) return;
-      const bounded = Math.min(Math.max(share, minFraction), 1 - minFraction);
       const sizes = [...node.sizes];
       sizes[index] = pair * bounded;
       sizes[index + 1] = pair * (1 - bounded);
       onResize(path, sizes);
     },
-    [node.sizes, minFraction, onResize, path],
+    [node.sizes, onResize, path],
   );
 
   const moveSeam = (index: number, position: number) => {
@@ -100,13 +110,13 @@ function SplitNode<P>({
     const before = node.sizes.slice(0, index).reduce((sum, size) => sum + size, 0);
     const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
     if (pair <= 0) return;
-    setShare(index, (offset - before) / pair);
+    setShare(index, reachSize((offset - before) / pair, minFraction, 1));
   };
 
   const nudgeSeam = (index: number, delta: number) => {
     const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
     if (pair <= 0) return;
-    setShare(index, (node.sizes[index] ?? 0) / pair + delta);
+    setShare(index, stepSize((node.sizes[index] ?? 0) / pair, delta, minFraction, 1));
   };
 
   const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>, index: number) => {
@@ -114,8 +124,8 @@ function SplitNode<P>({
     const forward = node.direction === 'row' ? 'ArrowRight' : 'ArrowDown';
     if (event.key === back) nudgeSeam(index, -0.02);
     else if (event.key === forward) nudgeSeam(index, 0.02);
-    else if (event.key === 'Home') nudgeSeam(index, -1);
-    else if (event.key === 'End') nudgeSeam(index, 1);
+    else if (event.key === 'Home') setShare(index, 0);
+    else if (event.key === 'End') setShare(index, 1);
     else return;
     event.preventDefault();
   };
@@ -138,7 +148,6 @@ function SplitNode<P>({
     if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
   };
 
-  const minPercent = Math.round(minFraction * 100);
   return (
     <div className="cb-panesplit" data-direction={node.direction} ref={frame}>
       {node.children.map((child, index) => (
@@ -149,8 +158,8 @@ function SplitNode<P>({
           seam={{
             direction: node.direction,
             percent: Math.round((node.sizes[index] ?? 0) * 100),
-            min: minPercent,
-            max: 100 - minPercent,
+            min: 0,
+            max: 100,
             onKeyDown: (event) => onKeyDown(event, index),
             onPointerDown: (event) => onPointerDown(event, index),
             onPointerMove,
@@ -178,7 +187,11 @@ interface SeamProps {
 function ChildAndSeam({ last, size, seam, children }: { last: boolean; size: number; seam: SeamProps; children: JSX.Element }): JSX.Element {
   return (
     <>
-      <div className="cb-panesplit__cell" style={{ '--cb-panesplit-share': size } as CSSProperties}>
+      <div
+        className="cb-panesplit__cell"
+        data-shut={size <= 0 ? '' : undefined}
+        style={{ '--cb-panesplit-share': size } as CSSProperties}
+      >
         {children}
       </div>
       {!last && (

package/src/react/components/PanelGrid.tsx

@@ -18,11 +18,11 @@ export interface PanelGridLeaf {
    * this exact confusion collapsed a contact list to ~34px).
    */
   defaultSize?: number | string;
+  /**
+   * The snap, never a floor: dragged below half of this the pane SHUTS, between half and all of it
+   * it holds here. Same rule as `lib/paneReach.ts`, applied by the library's collapsible panel.
+   */
   minSize?: number | string;
-  maxSize?: number | string;
-  /** Panel collapses to `collapsedSize` when dragged below `minSize`. */
-  collapsible?: boolean;
-  collapsedSize?: number | string;
   className?: string;
 }
 
@@ -38,10 +38,9 @@ export interface PanelGridSplit {
   resizable?: boolean;
   /** Divider look for THIS split's dividers (overrides the grid-level setting). */
   separatorVariant?: PanelSeparatorVariant;
-  /** Sizing of this split when it is itself a cell of a parent split. */
+  /** Sizing of this split when it is itself a cell of a parent split (`minSize` is a snap, as on a leaf). */
   defaultSize?: number | string;
   minSize?: number | string;
-  maxSize?: number | string;
   className?: string;
 }
 
@@ -97,7 +96,7 @@ function leavesOf(node: PanelGridNode): PanelGridLeaf[] {
  *   root={{
  *     type: 'split', id: 'row', direction: 'horizontal',
  *     children: [
- *       { id: 'sidebar', content: <Nav />, defaultSize: '240px', minSize: '160px', collapsible: true },
+ *       { id: 'sidebar', content: <Nav />, defaultSize: '240px', minSize: '160px' },
  *       {
  *         type: 'split', id: 'main', direction: 'vertical',
  *         children: [
@@ -110,7 +109,14 @@ function leavesOf(node: PanelGridNode): PanelGridLeaf[] {
  * />
  * ```
  *
- * Keyboard resizing, double-click-to-collapse, hit-target enlargement, and
+ * 🔴 **No divider is a wall** (the owner, 2026-10-27: *"let me drag them as far as I want
+ * including shutting a pane completely … I don't want any panes to block me"*). So there is no
+ * `maxSize` and no `collapsible` to turn off: EVERY cell is collapsible to 0, and its `minSize`
+ * is the snap `lib/paneReach.ts` describes — below half of it the cell shuts, so the cell beside it
+ * can take the whole split. station's Queue capped its task list at 36% and cut off the titles it
+ * was opened to read; that is the bug this removes the means to write.
+ *
+ * Keyboard resizing (Enter shuts/opens a pane), hit-target enlargement, and
  * aria roles come from react-resizable-panels; the divider look comes from
  * `PanelSeparator` (single hairline + invisible wide hotspot — panel content
  * must not draw its own border against a divider).
@@ -295,9 +301,8 @@ function GridCell({
         id={child.id}
         defaultSize={child.defaultSize}
         minSize={child.minSize}
-        maxSize={child.maxSize}
-        collapsible={isSplit(child) ? undefined : child.collapsible}
-        collapsedSize={isSplit(child) ? undefined : child.collapsedSize}
+        collapsible
+        collapsedSize={0}
         className={cn('min-h-0 min-w-0', child.className)}
       >
         {isSplit(child) ? (

package/src/react/components/SplitPane.spec.tsx

@@ -105,15 +105,20 @@ describe('SplitPane', () => {
     window.matchMedia = original;
   });
 
-  test('collapsible panel: both panels still render', () => {
+  // The owner, 2026-10-27: no divider is a wall. There is no way to ASK for one — a cap or an
+  // un-collapsible pane does not type-check — and the drag reaching both edges is proven in a real
+  // browser (`e2e/pane-reach.spec.ts`).
+  test('a pane cannot be capped or made un-shuttable', () => {
     const panels: SplitPaneItem[] = [
-      { id: 'main', content: <div>Main</div> },
-      { id: 'side', content: <div>Side</div>, collapsible: true, collapsedSize: 0 },
+      { id: 'main', content: <div>Main</div>, minSize: '16rem' },
+      // @ts-expect-error — `maxSize` is gone: a pane grows until its neighbor shuts.
+      { id: 'side', content: <div>Side</div>, maxSize: '40%' },
+      // @ts-expect-error — `collapsible` is gone: every pane can be shut.
+      { id: 'third', content: <div>Third</div>, collapsible: false },
     ];
     const { getByText, container } = render(<SplitPane panels={panels} />);
     expect(getByText('Main')).toBeTruthy();
     expect(getByText('Side')).toBeTruthy();
-    // Both panels are in the DOM
-    expect(container.querySelectorAll('[data-panel]').length).toBe(2);
+    expect(container.querySelectorAll('[data-panel]').length).toBe(3);
   });
 });

package/src/react/components/SplitPane.tsx

@@ -12,17 +12,11 @@ export interface SplitPaneItem {
    * number is NOT treated as a percentage (it silently becomes a pixel size).
    */
   defaultSize?: number | string;
-  /** Minimum size constraint. */
-  minSize?: number | string;
-  /** Maximum size constraint. */
-  maxSize?: number | string;
   /**
-   * Panel collapses to `collapsedSize` when dragged below `minSize`.
-   * Collapse-to-edge: set `collapsedSize` to 0 (or omit for the default).
+   * The snap, never a floor: dragged below half of this the pane SHUTS, between half and all of it
+   * it holds here (`lib/paneReach.ts`). There is no maximum and no opting out — see `PanelGrid`.
    */
-  collapsible?: boolean;
-  /** Size when collapsed; defaults to 0. */
-  collapsedSize?: number | string;
+  minSize?: number | string;
   className?: string;
 }
 
@@ -70,9 +64,6 @@ export function SplitPane({
     content: p.content,
     defaultSize: p.defaultSize,
     minSize: p.minSize,
-    maxSize: p.maxSize,
-    collapsible: p.collapsible,
-    collapsedSize: p.collapsedSize,
     className: p.className,
   }));
   return (

package/src/react/components/paneSplit.css

@@ -40,6 +40,14 @@
 		min-height: 0;
 	}
 
+	/* A shut pane (dragged to nothing — `lib/paneReach.ts`) draws nothing and takes no focus; its
+	   content would otherwise spill out of a zero-wide track. The seam beside it is a sibling, so it
+	   stays to drag the pane open again. */
+	.cb-panesplit__cell[data-shut] {
+		visibility: hidden;
+		overflow: hidden;
+	}
+
 	.cb-panesplit__seam {
 		flex: 0 0 auto;
 		position: relative;

package/src/react/filter-rail/FilterRail.spec.tsx

@@ -580,10 +580,14 @@ describe('FilterRail — resizeKey', () => {
     expect(globalThis.localStorage?.getItem('test:rail')).toBeNull();
   });
 
-  test('the width is clamped — it cannot be dragged into a sliver', () => {
-    globalThis.localStorage?.setItem('test:rail', '20');
-    const { container } = render(<FilterRail {...props} resizeKey='test:rail' />);
+  test('a stored sliver is never drawn — it opens at the snap, or shut below half of it', () => {
+    globalThis.localStorage?.setItem('test:rail', '120');
+    const { container, unmount } = render(<FilterRail {...props} resizeKey='test:rail' />);
     expect((container.querySelector('nav') as HTMLElement).style.width).toBe('160px');
+    unmount();
+    globalThis.localStorage?.setItem('test:rail', '20');
+    const shut = render(<FilterRail {...props} resizeKey='test:rail' />);
+    expect((shut.container.querySelector('nav') as HTMLElement).style.width).toBe('0px');
   });
 
   test('no handle while collapsed', () => {

package/src/react/filter-rail/railResize.spec.tsx

@@ -49,13 +49,35 @@ describe('useRailResize + RailResizeHandle', () => {
     expect(aside.style.width).toBe('250px');
   });
 
-  test('a drag past either bound stops at it', () => {
+  // The owner, 2026-10-27: "let me drag them as far as I want including shutting a pane completely".
+  test('no wall: a drag reaches the whole row one way and shuts the rail the other', () => {
     const { aside, handle } = parts(render(<Sidebar resizeKey='t:rail' />).container);
-    fireEvent.pointerDown(handle as HTMLElement, { button: 0, clientX: 0, pointerId: 1 });
-    fireEvent.pointerMove(handle as HTMLElement, { clientX: 5000, pointerId: 1 });
-    expect(aside.style.width).toBe('640px');
-    fireEvent.pointerMove(handle as HTMLElement, { clientX: 10, pointerId: 1 });
+    const h = handle as HTMLElement;
+    // happy-dom lays nothing out, so the row is the window's width.
+    const row = globalThis.innerWidth;
+    fireEvent.pointerDown(h, { button: 0, clientX: 0, pointerId: 1 });
+    fireEvent.pointerMove(h, { clientX: 5000, pointerId: 1 });
+    expect(aside.style.width).toBe(`${row}px`);
+    expect(aside.style.maxWidth).toBe('100%');
+    // Between half the snap and the snap it holds — no sliver of a rail.
+    fireEvent.pointerMove(h, { clientX: 100, pointerId: 1 });
+    expect(aside.style.width).toBe('160px');
+    fireEvent.pointerMove(h, { clientX: 60, pointerId: 1 });
+    fireEvent.pointerUp(h, { clientX: 60, pointerId: 1 });
+    expect(aside.style.width).toBe('0px');
+    expect(aside.style.visibility).toBe('hidden');
+    expect(globalThis.localStorage?.getItem('t:rail')).toBe('0');
+    // Shut, the handle is still there to drag it back, and an arrow opens it at the snap.
+    expect(h.style.visibility).toBe('visible');
+    fireEvent.keyDown(h, { key: 'ArrowRight' });
     expect(aside.style.width).toBe('160px');
+    expect(aside.style.visibility).toBe('');
+  });
+
+  test('a shut rail is remembered shut', () => {
+    globalThis.localStorage?.setItem('t:rail', '0');
+    const { aside } = parts(render(<Sidebar resizeKey='t:rail' />).container);
+    expect(aside.style.width).toBe('0px');
   });
 
   test('a right-button press is not a drag', () => {

package/src/react/filter-rail/railResize.tsx

@@ -13,15 +13,19 @@
  *   reach;
  * - **a `separator` role with real `aria-value*`**, the ARIA splitter pattern;
  * - **double-click resets** to the rail's own default width, and forgets the stored one;
- * - remembered on RELEASE — a drag is one decision, not sixty writes a second.
+ * - remembered on RELEASE — a drag is one decision, not sixty writes a second;
+ * - 🔴 **no wall** (the owner, 2026-10-27): the drag reaches the far side of the row the rail
+ *   shares, and below half of `MIN_RAIL_PX` the rail SHUTS — `lib/paneReach.ts`, the rule every
+ *   cursedbelt divider obeys. A shut rail draws nothing but its handle, at the edge, to drag back.
  *
- * Clamp and storage are `railWidth.ts`, so the width is announced through `preferenceSync`
- * like every other viewer preference.
+ * Storage is `railWidth.ts`, so the width is announced through `preferenceSync` like every other
+ * viewer preference.
  */
 import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, RefObject } from 'react';
 import { useCallback, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
-import { clampRailWidth, MAX_RAIL_PX, MIN_RAIL_PX, readRailWidth, writeRailWidth } from './railWidth.js';
+import { reachSize, stepSize } from '../lib/paneReach.js';
+import { MIN_RAIL_PX, readRailWidth, writeRailWidth } from './railWidth.js';
 
 export interface UseRailResizeOptions {
   /** Where the width is remembered. Absent: not resizable — no handle, no stored width. */
@@ -37,9 +41,15 @@ export interface RailResize<E extends HTMLElement = HTMLElement> {
   railRef: RefObject<E | null>;
   /** Whether a handle is drawn: a `resizeKey` was given and `enabled` is true. */
   active: boolean;
-  /** The dragged width in px, or `null` for "the rail's own default width". Null while inactive. */
+  /** The dragged width in px (0 = shut), or `null` for "the rail's own default width". Null while inactive. */
   width: number | null;
-  /** `{ width }` while there is a dragged width, else `undefined` — spread onto the rail's `style`. */
+  /** Dragged all the way shut. The rail must then draw nothing but the handle — `style` does it. */
+  shut: boolean;
+  /**
+   * Spread onto the rail's `style` — `undefined` at the default width. 🔴 Spread ALL of it, not
+   * just `width`: a shut rail is also borderless and `visibility: hidden` (its content would
+   * otherwise spill out of a zero-wide box), and a wide one is held to its row by `maxWidth`.
+   */
   style: CSSProperties | undefined;
   /** Forget the dragged width (what a double-click on the handle does). */
   reset: () => void;
@@ -50,6 +60,8 @@ export interface RailResize<E extends HTMLElement = HTMLElement> {
     onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
     /** The rail's current rendered width, for `aria-valuenow` before any drag. */
     measure: () => number;
+    /** The width of the row the rail shares — how far it can grow. */
+    room: () => number;
   };
 }
 
@@ -62,6 +74,12 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
   const [dragged, setDragged] = useState<number | null>(() => (resizeKey ? readRailWidth(resizeKey) : null));
   const active = Boolean(resizeKey) && enabled;
   const measure = useCallback(() => railRef.current?.getBoundingClientRect().width ?? MIN_RAIL_PX, []);
+  // The row the rail shares with the page it navigates. A box with no layout (a test DOM, a hidden
+  // tab) measures 0, so the window stands in — never 0, which would make every width "shut".
+  const room = useCallback(() => {
+    const row = railRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
+    return row > 0 ? row : globalThis.innerWidth || MIN_RAIL_PX * 4;
+  }, []);
 
   const onPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLElement>) => {
@@ -69,10 +87,11 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
       const handle = event.currentTarget;
       const startX = event.clientX;
       const startWidth = measure();
+      const total = room();
       let latest = startWidth;
       handle.setPointerCapture?.(event.pointerId);
       const move = (moveEvent: PointerEvent) => {
-        latest = clampRailWidth(startWidth + moveEvent.clientX - startX);
+        latest = Math.round(reachSize(startWidth + moveEvent.clientX - startX, MIN_RAIL_PX, total));
         setDragged(latest);
       };
       const end = () => {
@@ -87,7 +106,7 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
       handle.addEventListener('pointercancel', end);
       event.preventDefault();
     },
-    [resizeKey, measure],
+    [resizeKey, measure, room],
   );
 
   const onKeyDown = useCallback(
@@ -97,11 +116,11 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
       const delta = event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0;
       if (!delta) return;
       event.preventDefault();
-      const next = clampRailWidth((dragged ?? measure()) + delta);
+      const next = Math.round(stepSize(dragged ?? measure(), delta, MIN_RAIL_PX, room()));
       setDragged(next);
       writeRailWidth(resizeKey, next);
     },
-    [resizeKey, dragged, measure],
+    [resizeKey, dragged, measure, room],
   );
 
   const reset = useCallback(() => {
@@ -110,16 +129,27 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
   }, [resizeKey]);
 
   const width = active ? dragged : null;
+  const shut = width === 0;
   return {
     railRef,
     active,
     width,
-    style: width === null ? undefined : { width },
+    shut,
+    style: width === null ? undefined : shut ? SHUT_STYLE : { width, maxWidth: '100%' },
     reset,
-    handle: { label, onPointerDown, onKeyDown, measure },
+    handle: { label, onPointerDown, onKeyDown, measure, room },
   };
 }
 
+/** A shut rail: no width, no padding (a padded box is never narrower than its padding), no border,
+ *  and nothing drawn but the handle, which opts back in. `overflow: visible`, because a rail that
+ *  scrolls itself (`overflow-y-auto`) would clip its handle out of a zero-wide box — still in the
+ *  DOM, never under the pointer; its content is hidden by `visibility` instead. */
+const SHUT_STYLE: CSSProperties = { width: 0, minWidth: 0, padding: 0, borderRightWidth: 0, overflow: 'visible', visibility: 'hidden' };
+/** The shut rail's handle: visible again, and wholly on the page side of the edge, so all 12px of
+ *  it can be grabbed even when the rail sits against the window's edge. */
+const SHUT_HANDLE_STYLE: CSSProperties = { visibility: 'visible', right: -12 };
+
 /**
  * The handle itself — a 12px hotspot centered on the rail's right border. The RAIL must be
  * `position: relative` (the handle is absolutely positioned against it). Renders nothing while
@@ -130,7 +160,7 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
  */
 export function RailResizeHandle({ rail, className, ...rest }: { rail: RailResize; className?: string }) {
   if (!rail.active) return null;
-  const { label, onPointerDown, onKeyDown, measure } = rail.handle;
+  const { label, onPointerDown, onKeyDown, measure, room } = rail.handle;
   return (
     // biome-ignore lint/a11y/useSemanticElements: an <hr> cannot take focus or a drag; a focusable separator is the ARIA splitter pattern.
     <div
@@ -138,9 +168,10 @@ export function RailResizeHandle({ rail, className, ...rest }: { rail: RailResiz
       role='separator'
       aria-orientation='vertical'
       aria-label={`Resize ${label}`}
-      aria-valuemin={MIN_RAIL_PX}
-      aria-valuemax={MAX_RAIL_PX}
+      aria-valuemin={0}
+      aria-valuemax={Math.round(room())}
       aria-valuenow={Math.round(rail.width ?? measure())}
+      {...(rail.shut ? { style: SHUT_HANDLE_STYLE } : {})}
       tabIndex={0}
       data-cb-rail-resize=''
       onPointerDown={onPointerDown}

package/src/react/filter-rail/railWidth.ts

@@ -1,5 +1,5 @@
 /**
- * How wide the person dragged a sidebar — the pure half, so the clamp is testable without a
+ * How wide the person dragged a sidebar — the pure half, so the storage is testable without a
  * pointer.
  *
  * Owner, 2026-09-24: *"the cb filetree sidebars should allow grabbing their right edge and
@@ -13,22 +13,27 @@
  */
 import { announcePreference } from '../media-gallery/preferenceBus.js';
 
-/** Narrower than this and a row is an icon and an ellipsis. */
+/**
+ * Narrower than this and a row is an icon and an ellipsis — so it is the SNAP, not a floor:
+ * dragged below half of it the rail shuts (width 0), between half and all of it it holds here
+ * (`lib/paneReach.ts`). There is no maximum: the owner, 2026-10-27, *"let me drag them as far as
+ * I want including shutting a pane completely"* — a rail grows until the page beside it is shut.
+ */
 export const MIN_RAIL_PX = 160;
-/** Wider than this and the rail is eating the page it navigates. */
-export const MAX_RAIL_PX = 640;
 
+/** A width as stored: whole pixels, and snapped at the bottom like a drag (0 is a shut rail), so a
+ *  sliver written by an older build or by hand is never drawn. No top — `maxWidth` holds it to its row. */
 export const clampRailWidth = (px: number): number =>
-  Math.round(Math.min(MAX_RAIL_PX, Math.max(MIN_RAIL_PX, px)));
+  px < MIN_RAIL_PX / 2 ? 0 : Math.round(Math.max(MIN_RAIL_PX, px));
 
-/** The remembered width, or null for "the rail's default". Wrapped: `localStorage` throws in
- *  a sandboxed iframe and in Safari's private mode. */
+/** The remembered width (0 = shut), or null for "the rail's default". Wrapped: `localStorage`
+ *  throws in a sandboxed iframe and in Safari's private mode. */
 export function readRailWidth(key: string): number | null {
   try {
     const raw = globalThis.localStorage?.getItem(key);
     if (raw == null) return null;
     const stored = Number(raw);
-    return Number.isFinite(stored) && stored > 0 ? clampRailWidth(stored) : null;
+    return raw.trim() !== '' && Number.isFinite(stored) && stored >= 0 ? clampRailWidth(stored) : null;
   } catch {
     return null;
   }

package/src/react/index.ts

@@ -674,6 +674,7 @@ export {
   type SplitPaneItem,
   type SplitPaneProps,
 } from './components/SplitPane.js';
+export { reachSize, stepSize } from './lib/paneReach.js';
 export { Sparkline, type SparklineProps } from './components/Sparkline.js';
 export { StatStrip, type StatStripItem, type StatStripProps } from './components/StatStrip.js';
 export {