cursedbelt 5.55.2 → 5.58.0

package/src/react/code-editor/lineAbove.ts

@@ -0,0 +1,35 @@
+import { moveLineDown, moveLineUp } from '@codemirror/commands';
+import { EditorSelection, type StateCommand } from '@codemirror/state';
+import type { KeyBinding } from '@codemirror/view';
+
+/**
+ * ⇧⌘↵ — a blank line ABOVE each cursor's line, keeping that line's indentation, the caret on it.
+ * VS Code's "Insert Line Above"; CodeMirror's `defaultKeymap` has the line below (`Mod-Enter`,
+ * `insertBlankLine`) and the delete (`Shift-Mod-k`) but not this one. The `<textarea>` half of the
+ * same three keys is `cursedbelt/react/line-keys`.
+ */
+export const insertBlankLineAbove: StateCommand = ({ state, dispatch }) => {
+  if (state.readOnly) return false;
+  const changes = state.changeByRange((range) => {
+    const line = state.doc.lineAt(range.from);
+    const indent = /^[ \t]*/.exec(line.text)?.[0] ?? '';
+    return {
+      changes: { from: line.from, insert: `${indent}${state.lineBreak}` },
+      range: EditorSelection.cursor(line.from + indent.length),
+    };
+  });
+  dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));
+  return true;
+};
+
+/**
+ * The line keys `CodeEditor` adds IN FRONT of `defaultKeymap`: ⇧⌘↵ above, and ⌘↑ / ⌘↓ moving the
+ * line — the owner's chord (2026-10-05), which in `defaultKeymap` is the Mac's jump to the top or
+ * bottom. ⌥↑ / ⌥↓, VS Code's own move, is already in `defaultKeymap`, and so is ⇧⌘↑ (select to
+ * the top), which stays. The same keys in a `<textarea>` are `cursedbelt/react/line-keys`.
+ */
+export const lineKeyBindings: readonly KeyBinding[] = [
+  { key: 'Shift-Mod-Enter', run: insertBlankLineAbove },
+  { key: 'Mod-ArrowUp', run: moveLineUp },
+  { key: 'Mod-ArrowDown', run: moveLineDown },
+];

package/src/react/companion-link/CompanionLinkStatus.tsx

@@ -1,6 +1,7 @@
 import { formatTimeAgo } from 'cwip/format';
 import { Accordion } from '../components/Accordion.js';
 import { Badge } from '../components/Badge.js';
+import { Property, PropertyList } from '../components/PropertyList.js';
 import { Skeleton } from '../components/Skeleton.js';
 import { StatusPill } from '../components/StatusPill.js';
 import { cn } from '../lib/cn.js';
@@ -86,18 +87,15 @@ export function CompanionLinkStatus({ view, loaded, now = Date.now(), className
   );
 
   const detail = (
-    <dl className='grid grid-cols-2 gap-x-4 gap-y-1 text-xs'>
-      <dt className='text-muted-foreground'>Connection</dt>
-      <dd className='text-right font-medium'>{CONNECTION_LABEL[view.connection]}</dd>
-      <dt className='text-muted-foreground'>Last heard</dt>
-      <dd className='text-right'>{view.connection === 'never' ? '—' : heard}</dd>
-      <dt className='text-muted-foreground'>Mirror cursor</dt>
-      <dd className='text-right cb-code'>{view.haveUp}</dd>
-      <dt className='text-muted-foreground'>Command backlog</dt>
-      <dd className='text-right'>{view.backlog}</dd>
-      <dt className='text-muted-foreground'>Synced channels</dt>
-      <dd className='text-right'>{view.channels.length}</dd>
-    </dl>
+    <PropertyList density='compact'>
+      <Property label='Connection'>{CONNECTION_LABEL[view.connection]}</Property>
+      <Property label='Last heard'>{view.connection === 'never' ? '—' : heard}</Property>
+      <Property label='Mirror cursor' mono>
+        {view.haveUp}
+      </Property>
+      <Property label='Command backlog'>{String(view.backlog)}</Property>
+      <Property label='Synced channels'>{String(view.channels.length)}</Property>
+    </PropertyList>
   );
 
   return (

package/src/react/components/Accordion.tsx

@@ -1,5 +1,5 @@
 import * as RadixAccordion from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
 
@@ -67,9 +67,10 @@ export function Accordion({
           <RadixAccordion.Header>
             {/* Disabled = muted ink, as SelectableRow: half-opacity faded the chevron and the
                 divider-adjacent text into the surface (forge task 2594). */}
-            <RadixAccordion.Trigger className='group flex w-full items-center justify-between gap-2 py-3 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'>
-              {item.trigger}
-              <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180' />
+            <RadixAccordion.Trigger className='group flex w-full items-center justify-start gap-2 py-3 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'>
+              {/* The arrow leads (FRM-18), and the trigger takes the rest of the row. */}
+              <ChevronRight aria-hidden className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90' />
+              <span className='min-w-0 flex-1'>{item.trigger}</span>
             </RadixAccordion.Trigger>
           </RadixAccordion.Header>
           <RadixAccordion.Content

package/src/react/components/Badge.capsule.spec.ts

@@ -160,7 +160,7 @@ describe('Badge — every tone is a visible capsule (DESIGN.md §3, task 2286)',
 
   test('🔴 the check can go red: the pre-fix neutral (a bare --muted fill) is invisible on the dark raised card', () => {
     const found = invisibleCapsules({ neutral: 'bg-muted text-muted-foreground' });
-    expect(found).toContain('neutral (fill --muted) on dark --card-raised: ΔE00 5.3');
+    expect(found).toContain('neutral (fill --muted) on dark --card-raised: ΔE00 3.4');
   });
 
   test('a border it draws is scored instead of its fill — and a border that is itself invisible fails', () => {

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

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { Badge, type BadgeTone } from './Badge.js';
+import { BADGE_DOT, BADGE_TONE, Badge, type BadgeTone } from './Badge.js';
 
 afterEach(cleanup);
 
@@ -79,4 +79,25 @@ describe('Badge — title is a themed tooltip, never the OS one', () => {
     expect(container.querySelector('[title]')).toBeNull();
     expect(container.textContent).toContain('disabled');
   });
+
+  // 🔴 The owner's 2026-10-05 comparison: a solid PROD/STAGE capsule on every tree row read as
+  // "competing focal points" beside Linear. `dot` carries the same fact without a fill.
+  test("appearance='dot' draws a hue dot beside plain text — no fill, no edge, no capsule", () => {
+    const { getByText } = render(
+      <Badge appearance='dot' tone='error'>
+        Prod
+      </Badge>,
+    );
+    const badge = getByText('Prod');
+    expect(badge.getAttribute('data-appearance')).toBe('dot');
+    expect(badge.className).not.toMatch(/(^|\s)(bg-|border|rounded-full|px-)/);
+    expect(badge.className).toContain('text-muted-foreground');
+    const dot = badge.querySelector('span[aria-hidden="true"]');
+    expect(dot?.className).toContain('bg-destructive');
+    expect(dot?.className).toContain('size-2');
+  });
+
+  test('every tone has a dot, so a tone cannot ship without one', () => {
+    for (const tone of Object.keys(BADGE_TONE) as BadgeTone[]) expect(BADGE_DOT[tone]).toMatch(/^bg-/);
+  });
 });

package/src/react/components/Badge.tsx

@@ -70,22 +70,77 @@ export const BADGE_TONE = {
 
 export type BadgeTone = keyof typeof BADGE_TONE;
 
+/**
+ * The dot each tone draws under `appearance='dot'` — the tone's own hue, at full strength, on a
+ * mark 8px across. Typed against `BadgeTone` so a tone added above cannot ship without one.
+ */
+export const BADGE_DOT: Record<BadgeTone, string> = {
+  default: 'bg-muted-foreground',
+  neutral: 'bg-muted-foreground',
+  outline: 'bg-muted-foreground',
+  primary: 'bg-accent-solid',
+  accent: 'bg-accent',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  error: 'bg-destructive',
+  destructive: 'bg-destructive',
+  emerald: 'bg-tone-emerald-fg',
+  sky: 'bg-tone-sky-fg',
+  cyan: 'bg-tone-cyan-fg',
+  amber: 'bg-tone-amber-fg',
+  purple: 'bg-tone-purple-fg',
+  rose: 'bg-tone-rose-fg',
+  orange: 'bg-tone-orange-fg',
+  slate: 'bg-tone-slate-fg',
+  lime: 'bg-tone-lime-fg',
+  teal: 'bg-tone-teal-fg',
+  violet: 'bg-tone-violet-fg',
+  fuchsia: 'bg-tone-fuchsia-fg',
+};
+
+/**
+ * `filled` is the capsule. `dot` is Linear's: a small dot in the tone's hue and the word in
+ * ordinary text, with no fill and no edge.
+ *
+ * 🔴 Reach for `dot` when the badge REPEATS — one per row of a list or a tree. The owner's
+ * 2026-10-05 comparison lost on exactly this: desk's Components tree drew a solid red `PROD` or
+ * orange `STAGE` capsule on every row, and the judge read them as "competing focal points". A
+ * filled capsule is the loudest thing in a row, so a column of them outranks the names beside
+ * it; a column of dots carries the same fact and lets the names lead (DAT-4: status pills are
+ * rationed). One filled capsule in a header is still right.
+ */
+export type BadgeAppearance = 'filled' | 'dot';
+
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /** Semantic or categorical tone (default `default`). */
   tone?: BadgeTone;
+  /** `filled` (default) is the capsule; `dot` is a hue dot beside plain text. See {@link BadgeAppearance}. */
+  appearance?: BadgeAppearance;
 }
 
-export function Badge({ tone = 'default', className, title, ...props }: BadgeProps) {
-  const pill = (
-    <span
-      className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
-        BADGE_TONE[tone],
-        className,
-      )}
-      {...props}
-    />
-  );
+export function Badge({ tone = 'default', appearance = 'filled', className, title, children, ...props }: BadgeProps) {
+  const pill =
+    appearance === 'dot' ? (
+      <span
+        data-appearance='dot'
+        className={cn('inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground', className)}
+        {...props}
+      >
+        <span aria-hidden='true' className={cn('size-2 flex-none rounded-full', BADGE_DOT[tone])} />
+        {children}
+      </span>
+    ) : (
+      <span
+        className={cn(
+          'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
+          BADGE_TONE[tone],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
   // 🔴 `title` becomes a THEMED tooltip, never the OS one (2026-08-23, OPT unit 36).
   //
   // `BadgeProps extends HTMLAttributes<HTMLSpanElement>`, so `title` type-checked

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

@@ -26,10 +26,11 @@ describe('Button', () => {
   test('default variant is secondary (neutral filled outline), size md', () => {
     const { getByRole } = render(<Button tooltip='Hi'>Hi</Button>);
     const cls = getByRole('button').className;
-    // Secondary = card bg + hairline + raised shadow (real button presence, not a
-    // bare accent outline that reads as a static tag — STANDARDS §4c/§4d).
-    expect(cls).toContain('border-border-strong');
-    expect(cls).toContain('bg-card');
+    // Secondary = a muted FILL + the quiet hairline + raised shadow: real button presence
+    // without the full-strength outline that read as a row of boxes beside Linear (task 2822).
+    expect(cls).toContain('border-border');
+    expect(cls).not.toContain('border-border-strong');
+    expect(cls).toContain('bg-muted');
     expect(cls).toContain('shadow-raised');
     expect(cls).toContain('h-[var(--control-h-md)]'); // md, the shared control-height token
   });

package/src/react/components/Button.tsx

@@ -50,7 +50,7 @@ export const buttonVariants = cva(
     variants: {
       // The 3-weight action taxonomy (task cbux-42, STANDARDS.md §4c):
       //   primary     — the ONE solid hero action per view.
-      //   secondary   — outline; the everyday supporting action.
+      //   secondary   — filled neutral, hairline edge; the everyday supporting action.
       //   tertiary    — low-contrast text/icon weight for row utilities and
       //                 toolbars ("ghost" is the legacy alias — same rendering,
       //                 both stay valid; new code should say what it means).
@@ -73,8 +73,14 @@ export const buttonVariants = cva(
         // not an actionable button (owner UX teardown 2026-07-15 §4). The accent
         // stays reserved for `primary`, so the one hero action per view keeps its
         // pull while every supporting action still has real button presence.
+        // 🔴 A FILLED neutral with a hairline edge since 5.58.0 — Linear's secondary. It was
+        // `border-border-strong bg-card`: the card's own ground inside a full-strength 3:1
+        // outline, so a toolbar of them was a row of bright boxes ("stark block borders", the
+        // judge's words when desk lost to Linear on 2026-10-05, task 2822). The fill carries the
+        // presence now and the edge is the quiet `--border`; a labelled button is identified by
+        // its label and fill, so the 3:1 non-text floor that FIELD borders hold does not apply.
         secondary:
-          'border border-border-strong bg-card text-foreground shadow-raised hover:bg-muted focus-visible:ring-accent',
+          'border border-border bg-muted text-foreground shadow-raised hover:bg-border focus-visible:ring-accent',
         tertiary: 'text-foreground hover:bg-muted focus-visible:ring-accent',
         ghost: 'text-foreground hover:bg-muted focus-visible:ring-accent',
         link: 'h-auto px-0 py-0 text-accent underline-offset-4 hover:underline focus-visible:ring-accent',

package/src/react/components/Collapsible.tsx

@@ -1,5 +1,5 @@
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
-import { ChevronDown } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
 import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
@@ -54,10 +54,11 @@ export function Collapsible({
           // guardrails-ignore no-raw-action-button: this IS the Collapsible section-toggle
           // primitive — its own trigger is necessarily a raw <button> (Radix Trigger asChild).
           type='button'
-          className={cn(RAW_BUTTON, `group flex w-full items-center justify-between gap-2 py-2 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`)}
+          className={cn(RAW_BUTTON, `group flex w-full items-center justify-start gap-2 py-2 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`)}
         >
-          {trigger}
-          <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180' />
+          {/* The arrow leads (FRM-18), and the trigger takes the rest of the row. */}
+          <ChevronRight aria-hidden className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90' />
+          <span className='min-w-0 flex-1'>{trigger}</span>
         </button>
       </RadixCollapsible.Trigger>
       <RadixCollapsible.Content

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

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { Accordion } from './Accordion.js';
+import { Collapsible } from './Collapsible.js';
+import { DisclosureButton } from './DisclosureButton.js';
+
+afterEach(cleanup);
+
+/** FRM-18: the arrow LEADS — the trigger's first child is the chevron, the label comes after. */
+function arrowLeads(button: HTMLElement, label: string): void {
+  const first = button.firstElementChild;
+  expect(first?.tagName.toLowerCase()).toBe('svg');
+  expect(first?.getAttribute('class') ?? '').toContain('lucide-chevron-right');
+  expect(button.textContent).toBe(label);
+}
+
+describe('disclosure arrows sit on the leading edge (FRM-18, forge task 2802)', () => {
+  test('DisclosureButton: chevron first, turned down when open', () => {
+    const view = render(
+      <DisclosureButton open={false} onToggle={() => {}}>
+        Advanced
+      </DisclosureButton>,
+    );
+    const button = view.getByRole('button', { name: 'Advanced' });
+    arrowLeads(button, 'Advanced');
+    expect(button.firstElementChild?.getAttribute('class') ?? '').not.toContain('rotate-90');
+    view.rerender(
+      <DisclosureButton open onToggle={() => {}}>
+        Advanced
+      </DisclosureButton>,
+    );
+    expect(button.firstElementChild?.getAttribute('class') ?? '').toContain('rotate-90');
+  });
+
+  test('Collapsible and Accordion triggers lead with the chevron too', () => {
+    const view = render(
+      <>
+        <Collapsible trigger='Options'>
+          <p>body</p>
+        </Collapsible>
+        <Accordion items={[{ value: 'a', trigger: 'Billing', content: 'x' }]} />
+      </>,
+    );
+    arrowLeads(view.getByRole('button', { name: 'Options' }), 'Options');
+    arrowLeads(view.getByRole('button', { name: 'Billing' }), 'Billing');
+  });
+});

package/src/react/components/DisclosureButton.tsx

@@ -1,8 +1,11 @@
 // Simple disclosure/collapse primitives — a rotating-chevron arrow and a button
-// wrapper that pairs children with the arrow. Used anywhere a lightweight toggle
+// wrapper that pairs the arrow with children. Used anywhere a lightweight toggle
 // trigger is needed without the full Radix Collapsible overhead.
+//
+// The arrow LEADS (design law FRM-18, the owner's rule): a right-pointing chevron before the
+// label that turns to point down when open — Finder's, Notion's and VS Code's disclosure.
 
-import { ChevronDown } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
 import { RAW_BUTTON } from '../lib/cn.js';
@@ -12,13 +15,14 @@ export interface DisclosureArrowProps {
   className?: string;
 }
 
-/** A chevron that rotates 180° when `open` is true. */
+/** A right-pointing chevron that turns 90° to point down when `open` is true. */
 export function DisclosureArrow({ open, className }: DisclosureArrowProps) {
   return (
-    <ChevronDown
+    <ChevronRight
+      aria-hidden
       className={cn(
         'size-4 shrink-0 transition-transform duration-200',
-        open && 'rotate-180',
+        open && 'rotate-90',
         className,
       )}
     />
@@ -37,7 +41,7 @@ export interface DisclosureButtonProps {
   classNames?: DisclosureButtonClassNames;
 }
 
-/** A button that reveals content on toggle — renders children + a {@link DisclosureArrow}. */
+/** A button that reveals content on toggle — a leading {@link DisclosureArrow}, then children. */
 export function DisclosureButton({
   open,
   onToggle,
@@ -59,8 +63,8 @@ export function DisclosureButton({
       aria-expanded={open}
       onClick={onToggle}
     >
-      {children}
       <DisclosureArrow open={open} className={classNames?.arrow} />
+      {children}
     </button>
   );
 }

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

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { Button } from './Button.js';
+import { EditorPage } from './EditorPage.js';
+import { Input } from './Input.js';
+import { Switch } from './Switch.js';
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+});
+
+function Page(props: { onBack?: () => void; storageKey?: string; isDirty?: boolean }) {
+  return (
+    <EditorPage
+      title='New template'
+      backLabel='Templates'
+      onBack={props.onBack ?? (() => {})}
+      isDirty={props.isDirty}
+      storageKey={props.storageKey}
+      actions={<Button tooltip='Save the template'>Save</Button>}
+      preview={<p>the card</p>}
+      previewLabel='Card'
+      previewTools={<Switch label='Show names' />}
+    >
+      <Input aria-label='Name' />
+    </EditorPage>
+  );
+}
+
+describe('EditorPage', () => {
+  test('a page, not a dialog box: the form, the preview and the actions are all on it at once', () => {
+    const view = render(<Page />);
+    expect(view.getByRole('dialog', { name: 'New template' })).toBeTruthy();
+    expect(view.getByLabelText('Name')).toBeTruthy();
+    expect(view.getByRole('region', { name: 'Card' }).textContent).toContain('the card');
+    expect(view.getByRole('button', { name: 'Save' })).toBeTruthy();
+    expect(view.getByLabelText('Show names')).toBeTruthy();
+  });
+
+  test('the form is quiet by default — Linear’s look, inside .cbfk-quiet', () => {
+    const view = render(<Page />);
+    expect(view.getByLabelText('Name').closest('.cbfk-quiet')).not.toBeNull();
+  });
+
+  test('Back and Escape both leave', () => {
+    let left = 0;
+    const view = render(<Page onBack={() => { left += 1; }} />);
+    fireEvent.click(view.getByRole('button', { name: 'Templates' }));
+    fireEvent.keyDown(view.getByLabelText('Name'), { key: 'Escape' });
+    expect(left).toBe(2);
+  });
+
+  test('Escape on an open disclosure still leaves; on an open popup trigger it is the popup’s', () => {
+    let left = 0;
+    const view = render(
+      <EditorPage title='New' onBack={() => { left += 1; }} preview={null}>
+        <Button tooltip='Fold the row' aria-expanded>Row settings</Button>
+        <Button tooltip='Pick one' aria-haspopup='listbox' aria-expanded>Language</Button>
+      </EditorPage>,
+    );
+    fireEvent.keyDown(view.getByRole('button', { name: 'Language' }), { key: 'Escape' });
+    expect(left).toBe(0);
+    fireEvent.keyDown(view.getByRole('button', { name: 'Row settings' }), { key: 'Escape' });
+    expect(left).toBe(1);
+  });
+
+  test('with unsaved edits, Back and Escape ask first — Keep editing stays, Discard leaves', () => {
+    let left = 0;
+    const view = render(<Page isDirty onBack={() => { left += 1; }} />);
+    fireEvent.click(view.getByRole('button', { name: 'Templates' }));
+    expect(left).toBe(0);
+    expect(view.getByRole('dialog', { name: 'Discard changes?' })).toBeTruthy();
+    fireEvent.keyDown(view.getByRole('dialog', { name: 'Discard changes?' }), { key: 'Escape' });
+    expect(view.queryByRole('dialog', { name: 'Discard changes?' })).toBeNull();
+    fireEvent.keyDown(view.getByLabelText('Name'), { key: 'Escape' });
+    expect(left).toBe(0);
+    fireEvent.click(view.getByRole('button', { name: 'Discard changes' }));
+    expect(left).toBe(1);
+  });
+
+  test('the divider moves by keyboard within its limits and the split is kept', () => {
+    const view = render(<Page storageKey='test-split' />);
+    const divider = view.getByRole('separator');
+    expect(divider.getAttribute('aria-valuenow')).toBe('50');
+    fireEvent.keyDown(divider, { key: 'ArrowRight' });
+    expect(divider.getAttribute('aria-valuenow')).toBe('52');
+    fireEvent.keyDown(divider, { key: 'End' });
+    expect(divider.getAttribute('aria-valuenow')).toBe('75');
+    fireEvent.keyDown(divider, { key: 'ArrowRight', shiftKey: true });
+    expect(divider.getAttribute('aria-valuenow')).toBe('75');
+    expect(localStorage.getItem('test-split')).toBe('0.75');
+    cleanup();
+    const again = render(<Page storageKey='test-split' />);
+    expect(again.getByRole('separator').getAttribute('aria-valuenow')).toBe('75');
+  });
+
+  test('on a phone one side shows at a time — the switch says which', () => {
+    const view = render(<Page />);
+    const root = view.getByRole('dialog');
+    expect(root.getAttribute('data-mode')).toBe('edit');
+    fireEvent.click(view.getByRole('tab', { name: 'Card' }));
+    expect(root.getAttribute('data-mode')).toBe('preview');
+    expect(view.getByRole('tab', { name: 'Card' }).getAttribute('aria-selected')).toBe('true');
+  });
+});