cursedbelt 5.96.0 → 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/scripts/styleAreas.ts

@@ -288,6 +288,8 @@ export const AREAS: readonly Area[] = [
 			'components/SwatchPicker.tsx',
 			'components/TagStrip.tsx',
 			'components/TagsInput.tsx',
+			// TagsInput's chips with the copy button and ⌘A/⌘C/⌘V (forge task 3812, lifted from photos).
+			'components/TagsEditor.tsx',
 		],
 	},
 	{ name: 'file-tree', why: 'the flat (non-nested) file list and its row chrome', roots: ['file-tree'] },
@@ -355,6 +357,9 @@ export const AREAS: readonly Area[] = [
 			'components/DiscardConfirmDialog.tsx',
 			'components/ImpactDialog.tsx',
 			'components/PromptDialog.tsx',
+			// PromptDialog's twin for a list of tags, and its imperative `promptTags` (forge task 3812).
+			'components/TagsPromptDialog.tsx',
+			'tagsPrompt.tsx',
 			'components/ElsewhereNotice.tsx',
 			'components/AddItemsMenu.tsx',
 		],

package/src/looks.spec.ts

@@ -126,6 +126,40 @@ describe('looks.css', () => {
     }
     expect(new Set(LOOKS.map((l) => l.id)).size).toBe(LOOKS.length);
   });
+
+  test('highlighted text reads in every look and scheme, and the highlight can be seen on the card', () => {
+    // theme.css's `::selection`: the accent mixed into the card, the text in the foreground. Without
+    // it the browser's light highlight sat under a dark scheme's light text (desk, obsidian, 2026-10-27).
+    const plain = THEME.replace(/\/\*[\s\S]*?\*\//g, '');
+    const rule = /(?:^|\})\s*::selection\s*\{([^{}]*)\}/.exec(plain)?.[1] ?? '';
+    const mix = /background-color:\s*color-mix\(in srgb, var\(--accent\) (\d+)%, var\(--card\)\)/.exec(rule);
+    expect(mix, 'theme.css has no `::selection` mixing the accent into the card — the browser highlight is back').not.toBeNull();
+    expect(rule).toMatch(/(?:^|[\s;])color:\s*var\(--foreground\)/);
+    const share = Number(mix?.[1]) / 100;
+    // The belt's own accent in each scheme; an app that rebrands it answers for its own.
+    const accent = { light: declarationsOf(THEME, ':root')?.get('--accent'), dark: declarationsOf(THEME, '.dark')?.get('--accent') };
+    const rgb = (hex: string) => [16, 8, 0].map((shift) => (Number.parseInt(hex.slice(1), 16) >> shift) & 255);
+    const failures: string[] = [];
+    for (const look of LOOKS) {
+      for (const scheme of ['light', 'dark'] as const) {
+        const decls =
+          look.id === 'aurora'
+            ? scheme === 'light'
+              ? auroraLight
+              : auroraDark
+            : (declarationsOf(LOOKS_CSS, scheme === 'light' ? lightSelector(look.id) : darkSelector(look.id)) as Decls);
+        const card = decls.get('--card') as string;
+        const painted = `#${rgb(accent[scheme] as string)
+          .map((c, i) => Math.round(c * share + (rgb(card)[i] as number) * (1 - share)).toString(16).padStart(2, '0'))
+          .join('')}`;
+        const text = contrast(decls.get('--foreground') as string, painted);
+        if (text < 4.5) failures.push(`${look.id}/${scheme}: selected text is ${text.toFixed(2)}:1 (< 4.5)`);
+        const seen = contrast(painted, card);
+        if (seen < 1.4) failures.push(`${look.id}/${scheme}: the highlight is ${seen.toFixed(2)}:1 on the card (< 1.4, invisible)`);
+      }
+    }
+    expect(failures).toEqual([]);
+  });
 });
 
 /**

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

@@ -135,6 +135,29 @@ describe('AppShell', () => {
     expect(q(icon as HTMLElement, '[data-cb-rail-head] [data-cb-command-trigger]')).not.toBeNull();
   });
 
+  test('🔴 a worded capture on the sidebar ⌘K row makes the trigger the square search button — the field had ~50px left (photos, 2026-10-27)', () => {
+    const head = (capture: boolean) => {
+      const { container } = render(
+        <AppShell nav={station} navHeader={<span data-brand=''>Photos</span>} onOpenCommand={() => {}} commandLabel='Search the archive…' {...(capture ? { onCapture: () => {}, captureLabel: 'Upload' } : {})}>
+          x
+        </AppShell>,
+      );
+      const full = qa(container, '[data-cb-nav-rail]')[1] as HTMLElement;
+      const trigger = q(full, '[data-cb-rail-head] [data-cb-command-trigger]');
+      cleanup();
+      return trigger;
+    };
+    // Alone on its row, the trigger is the worded field…
+    const field = head(false);
+    expect(field?.getAttribute('aria-label')).toBeNull();
+    expect(field?.className).toContain('flex-1');
+    // …beside "+ Upload" it is the square, named by its words, so the row fits the 240px rail.
+    const square = head(true);
+    expect(square?.getAttribute('aria-label')).toBe('Search the archive…');
+    expect(square?.className).toContain('w-10');
+    expect(square?.className).not.toContain('flex-1');
+  });
+
   test('a 2–5-place shell has no sidebar, so its header stays at every width', () => {
     const { container } = render(<AppShell nav={nav}>x</AppShell>);
     expect(q(container, '[data-cb-appheader]')?.className).not.toContain('md:hidden');

package/src/react/components/AppShell.tsx

@@ -392,12 +392,17 @@ function Shell({
       </IconButton>
     ) : null;
   const hasCommandRow = (collapsed: boolean) => Boolean(openCommand || (!collapsed && (onCapture || commandBarExtra)));
+  // A worded capture on the ⌘K row takes the field's room: in a 240px sidebar the fold, the field
+  // and "+ Upload" left the field ~50px, its placeholder cut to a sliver under the button (photos,
+  // 1440, 2026-10-27). With capture there the trigger is the square search button, Linear's sidebar
+  // head (a search icon beside the worded compose); the palette and ⌘K are unchanged.
+  const squareCommand = (collapsed: boolean) => collapsed || Boolean(onCapture);
   const railCommand = (collapsed: boolean) => {
     if (!hasCommandRow(collapsed)) return null;
     const bar = (
       <CommandBar
         className={collapsed ? 'flex-col' : 'w-full min-w-0 flex-wrap'}
-        compact={collapsed}
+        compact={squareCommand(collapsed)}
         onCapture={collapsed ? undefined : onCapture}
         captureLabel={captureLabel}
         onOpenCommand={openCommand}

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

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ConfirmDialog } from './ConfirmDialog.js';
+
+afterEach(cleanup);
+
+const noop = () => {};
+
+describe('ConfirmDialog message', () => {
+  test('a sentence is a <p>, and it describes the dialog', () => {
+    render(<ConfirmDialog message='Gone for good.' onCancel={noop} onConfirm={noop} open title='Delete?' />);
+    const message = screen.getByText('Gone for good.');
+    expect(message.tagName).toBe('P');
+    expect(screen.getByRole('dialog').getAttribute('aria-describedby')).toBe(message.id);
+  });
+
+  test('a list (or a field) is a <div> — never block content inside a <p>', () => {
+    render(
+      <ConfirmDialog
+        message={
+          <div data-testid='body'>
+            <strong>Why it needs a better copy</strong>
+            <ul>
+              <li>Poor sound</li>
+            </ul>
+          </div>
+        }
+        onCancel={noop}
+        onConfirm={noop}
+        open
+        title='Mark it?'
+      />,
+    );
+    const body = screen.getByTestId('body');
+    expect(body.closest('p')).toBeNull();
+    // Still the dialog's description, so a screen reader reads it with the title.
+    const description = body.parentElement as HTMLElement;
+    expect(description.tagName).toBe('DIV');
+    expect(screen.getByRole('dialog').getAttribute('aria-describedby')).toBe(description.id);
+  });
+});

package/src/react/components/ConfirmDialog.tsx

@@ -77,8 +77,18 @@ export function ConfirmDialog({
             {title}
           </DialogTitle>
           {message ? (
-            <DialogDescription className='text-sm text-muted-foreground'>
-              {message}
+            // Text is a sentence, so a <p>. Anything else — a field, a checkbox, a list — is a
+            // <div>: a <p> may hold phrasing content only, and React warns at the first <div> a
+            // caller's message draws inside one (music's bad-copy reason field, forge task 3811).
+            <DialogDescription
+              asChild={typeof message !== 'string' && typeof message !== 'number'}
+              className='text-sm text-muted-foreground'
+            >
+              {typeof message === 'string' || typeof message === 'number' ? (
+                message
+              ) : (
+                <div>{message}</div>
+              )}
             </DialogDescription>
           ) : null}
         </div>

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 (