cursedbelt 5.96.0 → 5.97.0

package/src/react/components/TagsEditor.tsx

@@ -0,0 +1,140 @@
+/**
+ * One item's tags, edited in place — and carried whole to another. Lifted from photos (forge task
+ * 3773; the owner: "copy some or all tags from one photo to apply to more photos … a copy icon that
+ * copies all of them … highlight the existing tags with my mouse or ⌘A, then ⌘C … ⌘V to paste") so
+ * music tags a track the same way (forge task 3812: "copying tags like photos app does").
+ *
+ * Three ways out, one way in, all through the system clipboard as `a, b, c` (`../lib/tagList.ts`):
+ * - the copy button copies every tag;
+ * - ⌘A in the empty field selects every tag (the field lights up and says so), and ⌘C copies them;
+ * - a mouse selection across some chips, then ⌘C, copies just those — the chips are plain text;
+ * - a paste into the field adds every tag in the text, however the list was separated, at once.
+ */
+import { Copy } from 'lucide-react';
+import { type ClipboardEvent, type ComponentPropsWithoutRef, type KeyboardEvent, useEffect, useState } from 'react';
+import { toast } from '../Toast.js';
+import { cn } from '../lib/cn.js';
+import { mergeTagLists, parseTagList, tagListText } from '../lib/tagList.js';
+import { IconButton } from './IconButton.js';
+import { TagsInput } from './TagsInput.js';
+
+export interface TagsEditorProps
+  extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'aria-label' | 'className' | 'onCopy' | 'onPaste' | 'onKeyDown' | 'onPointerDown'> {
+  value: string[];
+  onChange: (next: string[]) => void;
+  suggestions?: readonly string[];
+  placeholder?: string;
+  'aria-label'?: string;
+  className?: string;
+  /** The app's one spelling rule for a pasted tag (photos lower-cases and folds synonyms). Default: trim. */
+  normalize?: (raw: string) => string;
+  /** What the tags are on, for the copy toast and tooltip: "paste them onto another {item}". Default `item`. */
+  item?: string;
+}
+
+const MOD = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl+';
+
+const tagCount = (n: number): string => `${n.toLocaleString()} ${n === 1 ? 'tag' : 'tags'}`;
+
+/** The chips a text selection touches — a chip is the span whose first child is the tag's text and whose last is its ✕. */
+function selectedChips(container: HTMLElement, selection: Selection | null): string[] {
+  if (!selection || selection.isCollapsed) return [];
+  const picked: string[] = [];
+  for (const span of container.querySelectorAll<HTMLSpanElement>('span')) {
+    const text = span.firstChild;
+    if (!text || text.nodeType !== Node.TEXT_NODE || !span.querySelector('button')) continue;
+    if (selection.containsNode(span, true)) picked.push(text.textContent ?? '');
+  }
+  return picked.filter(Boolean);
+}
+
+export function TagsEditor({
+  value,
+  onChange,
+  suggestions,
+  placeholder = 'Add a tag',
+  'aria-label': ariaLabel = 'Tags',
+  className,
+  normalize,
+  item = 'item',
+  ...rest
+}: TagsEditorProps) {
+  // Every chip selected at once (⌘A on the empty field) — drawn as a ring and a line, since the chips are not selectable text then.
+  const [all, setAll] = useState(false);
+  useEffect(() => {
+    if (all && !value.length) setAll(false);
+  }, [all, value.length]);
+
+  const copied = (count: number): void => {
+    toast.success(`Copied ${tagCount(count)} — paste them onto another ${item}`);
+  };
+  const copyAll = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(tagListText(value));
+      copied(value.length);
+    } catch {
+      toast.error(`Couldn't reach the clipboard — select the tags and press ${MOD}C instead`);
+    }
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+    const target = event.target as HTMLElement;
+    const field = target.tagName === 'INPUT' ? (target as HTMLInputElement) : null;
+    const mod = event.metaKey || event.ctrlKey;
+    if (mod && event.key.toLowerCase() === 'a' && field && !field.value && value.length) {
+      event.preventDefault();
+      setAll(true);
+      return;
+    }
+    if (mod && event.key.toLowerCase() === 'c') return;
+    if (all && event.key !== 'Shift' && event.key !== 'Meta' && event.key !== 'Control') setAll(false);
+  };
+  const onCopy = (event: ClipboardEvent<HTMLDivElement>): void => {
+    const picked = all ? value : selectedChips(event.currentTarget, window.getSelection());
+    if (!picked.length) return;
+    event.clipboardData.setData('text/plain', tagListText(picked));
+    event.preventDefault();
+    copied(picked.length);
+  };
+  const onPaste = (event: ClipboardEvent<HTMLDivElement>): void => {
+    if ((event.target as HTMLElement).tagName !== 'INPUT') return;
+    const pasted = parseTagList(event.clipboardData.getData('text/plain'), normalize);
+    if (!pasted.length) return;
+    event.preventDefault();
+    const next = mergeTagLists(value, pasted);
+    if (next.length !== value.length) onChange(next);
+    else toast.success(`Every pasted tag is on it already`);
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: the keys, copy and paste are the field's inside it; the div only listens as they bubble.
+    <div
+      {...rest}
+      className={cn('flex flex-col gap-1', className)}
+      data-tags-editor=''
+      onKeyDown={onKeyDown}
+      onCopy={onCopy}
+      onPaste={onPaste}
+      onPointerDown={() => all && setAll(false)}
+    >
+      <div className='flex items-start gap-1'>
+        <div className={cn('min-w-0 flex-1 rounded-field', all && 'ring-2 ring-accent ring-offset-2 ring-offset-background')}>
+          <TagsInput value={value} onChange={onChange} placeholder={placeholder} aria-label={ariaLabel} suggestions={suggestions} />
+        </div>
+        <IconButton
+          label='Copy all tags'
+          tooltip={value.length ? `Copy ${tagCount(value.length)} to paste onto another ${item}` : 'No tags to copy yet'}
+          variant='ghost'
+          disabled={!value.length}
+          onClick={() => void copyAll()}
+        >
+          <Copy />
+        </IconButton>
+      </div>
+      {all ? (
+        <p className='text-xs text-accent' aria-live='polite'>
+          All {tagCount(value.length)} selected — {MOD}C copies them
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { promptTags } from '../tagsPrompt.js';
+import { TagsPromptDialog } from './TagsPromptDialog.js';
+
+afterEach(cleanup);
+
+const body = () => document.body;
+const chips = () =>
+  Array.from(body().querySelectorAll<HTMLElement>('[data-tags-editor] span'))
+    .filter((span) => span.querySelector('button'))
+    .map((span) => span.firstChild?.textContent ?? '');
+const field = () => body().querySelector<HTMLInputElement>('[data-tags-editor] input')!;
+
+describe('TagsPromptDialog', () => {
+  test('opens on the tags the item already has, as chips (forge task 3812)', () => {
+    render(<TagsPromptDialog open title='Tag this track' defaultValue={['chill', 'night drive']} onSubmit={() => {}} onCancel={() => {}} />);
+    expect(chips()).toEqual(['chill', 'night drive']);
+  });
+
+  test('several at once, one off, and Save hands back the whole list', () => {
+    let saved: string[] | undefined;
+    render(
+      <TagsPromptDialog
+        open
+        title='Tag this track'
+        defaultValue={['chill']}
+        onSubmit={(tags) => {
+          saved = tags;
+        }}
+        onCancel={() => {}}
+      />,
+    );
+    fireEvent.change(field(), { target: { value: 'loud, summer,' } });
+    expect(chips()).toEqual(['chill', 'loud', 'summer']);
+    fireEvent.click(body().querySelector('[aria-label="Remove chill"]') ?? body().querySelectorAll('[data-tags-editor] span button')[0]!);
+    fireEvent.click(body().querySelector('[data-cb-confirm]') as HTMLElement);
+    expect(saved).toEqual(['loud', 'summer']);
+  });
+
+  test('⌘Enter saves with the word still being typed', () => {
+    let saved: string[] | undefined;
+    render(
+      <TagsPromptDialog
+        open
+        title='Tag'
+        onSubmit={(tags) => {
+          saved = tags;
+        }}
+        onCancel={() => {}}
+      />,
+    );
+    fireEvent.change(field(), { target: { value: 'dub' } });
+    fireEvent.keyDown(field(), { key: 'Enter', metaKey: true });
+    expect(saved).toEqual(['dub']);
+  });
+
+  test('promptTags resolves the list, or null on cancel', async () => {
+    let pending: Promise<string[] | null> | undefined;
+    act(() => {
+      pending = promptTags({ title: 'Tag', defaultValue: ['a'] });
+    });
+    await waitFor(() => expect(chips()).toEqual(['a']));
+    fireEvent.click(body().querySelector('[data-cb-confirm]') as HTMLElement);
+    expect(await pending).toEqual(['a']);
+
+    act(() => {
+      pending = promptTags({ title: 'Tag' });
+    });
+    await waitFor(() => expect(body().querySelector('[data-cb-cancel]')).not.toBeNull());
+    fireEvent.click(body().querySelector('[data-cb-cancel]') as HTMLElement);
+    expect(await pending).toBeNull();
+  });
+});

package/src/react/components/TagsPromptDialog.tsx

@@ -0,0 +1,108 @@
+import { type ReactNode, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { DIALOG_MOTION } from '../lib/overlayMotion.js';
+import { Button } from './Button.js';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog.js';
+import { TagsEditor, type TagsEditorProps } from './TagsEditor.js';
+
+export interface TagsPromptDialogProps extends Pick<TagsEditorProps, 'suggestions' | 'placeholder' | 'normalize' | 'item'> {
+  open: boolean;
+  /** The tags the dialog closed on — the whole list, so a removal is the difference from `defaultValue`. */
+  onSubmit: (tags: string[]) => void | Promise<void>;
+  onCancel: () => void;
+  title: string;
+  message?: ReactNode;
+  /** The tags the item already carries — drawn as chips the moment it opens (forge task 3812:
+   *  *"clicking 'Tag this track' doesn't show existing tags but it should"*). */
+  defaultValue?: readonly string[];
+  confirmLabel?: string;
+  cancelLabel?: string;
+  loading?: boolean;
+  className?: string;
+}
+
+/**
+ * {@link PromptDialog}'s shape with a {@link TagsEditor} for its field: the item's tags as chips,
+ * several added at once (comma/Enter, or a pasted list), × to take one off, the copy button and
+ * ⌘A/⌘C to carry them to another item. For the no-JSX case use `promptTags`
+ * (`cursedbelt/react/tags-prompt`), which mounts it once and resolves to the list or `null`.
+ */
+export function TagsPromptDialog({
+  open,
+  onSubmit,
+  onCancel,
+  title,
+  message,
+  defaultValue = [],
+  confirmLabel = 'Save tags',
+  cancelLabel = 'Cancel',
+  loading = false,
+  className,
+  suggestions,
+  placeholder,
+  normalize,
+  item,
+  ...rest
+}: TagsPromptDialogProps) {
+  const [tags, setTags] = useState<string[]>(() => [...defaultValue]);
+
+  /** A click on Save blurs the field first, which commits its draft; ⌘Enter does not, so it reads the draft from `content`. */
+  const handleSubmit = (content?: HTMLElement) => {
+    if (loading) return;
+    const raw = content?.querySelector<HTMLInputElement>('[data-tags-editor] input')?.value ?? '';
+    const pending = normalize ? normalize(raw) : raw.trim();
+    void onSubmit(pending && !tags.includes(pending) ? [...tags, pending] : tags);
+  };
+
+  return (
+    <Dialog
+      {...rest}
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) onCancel();
+      }}
+    >
+      <DialogContent
+        data-cb-tags-prompt=''
+        className={cn(
+          'fixed top-1/2 left-1/2 flex w-[calc(100vw-2rem)] max-w-[var(--modal-w-sm)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4',
+          'rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-overlay',
+          DIALOG_MOTION,
+          className,
+        )}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          (e.currentTarget as HTMLElement | null)?.querySelector<HTMLInputElement>('[data-tags-editor] input')?.focus();
+        }}
+        onKeyDown={(e) => {
+          // ⌘/Ctrl+Enter saves from the field, where a bare Enter commits the tag being typed.
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            handleSubmit(e.currentTarget);
+          }
+        }}
+      >
+        <div className='flex flex-col gap-1.5'>
+          <DialogTitle className='text-base font-semibold'>{title}</DialogTitle>
+          {message ? <DialogDescription className='text-sm text-muted-foreground'>{message}</DialogDescription> : null}
+        </div>
+        <TagsEditor
+          value={tags}
+          onChange={setTags}
+          {...(suggestions ? { suggestions } : {})}
+          {...(placeholder ? { placeholder } : {})}
+          {...(normalize ? { normalize } : {})}
+          {...(item ? { item } : {})}
+        />
+        <div className='flex justify-end gap-2'>
+          <Button data-cb-cancel variant='secondary' onClick={onCancel} disabled={loading} tooltip={cancelLabel}>
+            {cancelLabel}
+          </Button>
+          <Button data-cb-confirm variant='primary' onClick={() => handleSubmit()} loading={loading} tooltip={confirmLabel}>
+            {confirmLabel}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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/file-tree/FolderViewMenus.tsx

@@ -158,6 +158,7 @@ export function folderViewMenuItems(
       onClick: everywhere,
     });
   }
+  if (!view.tagging) return items;
   const current = view.marks.tags[node.id] ?? [];
   items.push({
     key: 'fv-tags',

package/src/react/file-tree/folderViewTree.spec.tsx

@@ -345,6 +345,21 @@ describe('a row menu of the app\'s own', () => {
     expect(renamed).toBe('home');
   });
 
+  test('🔴 tagging: false takes Tags… off, so the app\'s own item tags what the folder HOLDS (forge task 3813)', () => {
+    render(
+      <Harness
+        options={{ tagging: false }}
+        rowMenu={() => [{ key: 'tag-songs', label: 'Tag the songs in it…' }]}
+      />,
+    );
+    fireEvent.contextMenu(row('Home'));
+    expect(items().map((el) => el.querySelector('.truncate')?.textContent)).toEqual([
+      'Tag the songs in it…',
+      'Hide on this device',
+      'Hide everywhere',
+    ]);
+  });
+
   test('Hide and Tags… go ABOVE a trailing Delete — Delete stays last, under its rule', () => {
     render(
       <Harness

package/src/react/file-tree/useFolderView.ts

@@ -69,6 +69,8 @@ export interface FolderView {
   tags: readonly TagCount[];
   /** Whether "Hide on this device" is offered — false when the device half is not kept. */
   deviceHiding: boolean;
+  /** Whether a folder's menu offers "Tags…" — false when the app tags what is IN a folder instead. */
+  tagging: boolean;
   /** Which of the two lists hide this folder, if any. */
   hiddenIn: (id: string) => HiddenScope | null;
 
@@ -118,6 +120,14 @@ export interface UseFolderViewOptions {
    * `'memory'` is this page only, for an app whose folder ids may not be written to disk.
    */
   device?: 'local' | 'memory';
+  /**
+   * `false` takes "Tags…" off a folder's menu, for an app whose folder tags belong on what the
+   * folder holds — music, where the owner wanted *"the tags to add on a folder [to] apply to all
+   * the tracks in the folder instead of applying to the folder"* (forge task 3813). The app puts
+   * its own item on the folder's `rowMenu`; the dots of marks already kept still draw, so it can
+   * carry them across. Default `true`.
+   */
+  tagging?: boolean;
 }
 
 /** The marks, kept by the app — see {@link UseFolderViewOptions.store}. */
@@ -127,7 +137,7 @@ export interface FolderMarksStore {
   write: (next: string | null) => void;
 }
 
-export function useFolderView({ key, store, device = 'local' }: UseFolderViewOptions): FolderView {
+export function useFolderView({ key, store, device = 'local', tagging = true }: UseFolderViewOptions): FolderView {
   // Hooks run unconditionally; an undefined key is the remembered preference that keeps nothing.
   const [rememberedMarks, rememberMarks] = useRememberedPreference(store ? undefined : key);
   const [rememberedLocal, rememberLocal] = useRememberedPreference(
@@ -186,6 +196,7 @@ export function useFolderView({ key, store, device = 'local' }: UseFolderViewOpt
       local,
       tags,
       deviceHiding,
+      tagging,
       hiddenIn: (id) => hiddenScope(marks, local, id),
       hide: (ids, options) => {
         if (options?.scope === 'device' && deviceHiding) saveLocal(setHidden(latestLocal.current, ids, true));
@@ -218,6 +229,6 @@ export function useFolderView({ key, store, device = 'local' }: UseFolderViewOpt
       closePanel: () => setPanel(null),
       onContextMenu,
     }),
-    [marks, local, tags, deviceHiding, panel, saveMarks, saveLocal, onContextMenu],
+    [marks, local, tags, deviceHiding, tagging, panel, saveMarks, saveLocal, onContextMenu],
   );
 }

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}