cursedbelt 5.103.1 → 5.104.0

package/dist/react/components/ChoiceGroup.d.ts

@@ -16,6 +16,10 @@ export interface ChoiceOption<T extends string = string> {
     image?: ReactNode;
     /** Accessible name for a picture tile whose `label` is not a plain string. */
     'aria-label'?: string;
+    /** `layout='list'` only: a quiet right-aligned fact about the row — a count, "you are here". */
+    trailing?: ReactNode;
+    /** `layout='list'` only: depth in levels of 1rem, so a flattened tree keeps its shape. */
+    indent?: number;
 }
 export interface ChoiceGroupProps<T extends string = string> {
     options: readonly ChoiceOption<T>[];
@@ -37,11 +41,19 @@ export interface ChoiceGroupProps<T extends string = string> {
      * `text` (default): a wrapping row of worded options. `picture`: one strip of
      * square thumbnail tiles, checked by an accent ring — a cover picker, an avatar
      * picker. The strip does not wrap; put the group in a `ScrollArea axis='x'` when
-     * it can be longer than its container.
+     * it can be longer than its container. `list`: full-width stacked rows, each with
+     * a `trailing` slot and an `indent` — a list of moments, a folder tree. Give the
+     * group a height through `className` when it can outgrow its container.
      */
-    layout?: 'text' | 'picture';
+    layout?: 'text' | 'picture' | 'list';
     /** `layout='picture'` tile edge in px. Default 64. */
     tileSize?: number;
+    /**
+     * `layout='list'` only: a double-click or Enter on a row takes it straight to the
+     * action the choice was for, without reaching for the dialog's button. `onChange`
+     * has already reported that row by then.
+     */
+    onConfirm?: (value: T) => void;
     className?: string;
 }
 /**
@@ -54,6 +66,7 @@ export interface ChoiceGroupProps<T extends string = string> {
  *  - a long or data-driven list → `SelectField` / `ChoiceMenu`
  *  - a color → `SwatchPicker`
  *  - one picture out of several (a cover, an avatar) → THIS, `layout='picture'`
+ *  - rows that each carry two lines and a fact, or a tree → THIS, `layout='list'`
  *  - a handful of answers that each need words → THIS
  *
  * ── 🔴 Why this exists: the hidden-radio trap (family, 2026-09-26) ──────────
@@ -74,5 +87,5 @@ export interface ChoiceGroupProps<T extends string = string> {
  * `relative` on the root contains the non-focusable form-bubble input Radix adds
  * inside a `<form>`, so even that is positioned against this group.
  */
-export declare function ChoiceGroup<T extends string = string>({ options, value, onChange, label, 'aria-label': ariaLabel, description, disabled, disabledReason, name, layout, tileSize, className, ...rest }: ChoiceGroupProps<T>): import("react").JSX.Element;
+export declare function ChoiceGroup<T extends string = string>({ options, value, onChange, label, 'aria-label': ariaLabel, description, disabled, disabledReason, name, layout, tileSize, onConfirm, className, ...rest }: ChoiceGroupProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=ChoiceGroup.d.ts.map

package/dist/react/components/ChoiceGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceGroup.d.ts","sourceRoot":"","sources":["../../../src/react/components/ChoiceGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAK9C,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,2CAA2C;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,+EAA+E;IAC/E,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;6FACyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACrD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,QAAgB,EAChB,cAAc,EACd,IAAI,EACJ,MAAe,EACf,QAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA+DrB"}
+{"version":3,"file":"ChoiceGroup.d.ts","sourceRoot":"","sources":["../../../src/react/components/ChoiceGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAK9C,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,2CAA2C;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,+EAA+E;IAC/E,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;6FACyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACrD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,QAAgB,EAChB,cAAc,EACd,IAAI,EACJ,MAAe,EACf,QAAa,EACb,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA4DrB"}

package/dist/react/components/ChoiceGroup.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import { useId } from 'react';
-import { cn } from '../lib/cn.js';
+import { cn, RAW_BUTTON } from '../lib/cn.js';
 import { TAP_TARGET } from '../lib/tapTarget.js';
 import { Tooltip } from './Tooltip.js';
+const ROOT_LAYOUT = { text: 'flex-wrap gap-1.5', picture: 'gap-2', list: 'flex-col gap-0.5' };
+/** Focus, checked and disabled, the same on a chip and on a row. */
+const OPTION_STATES = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-accent data-[state=checked]:bg-accent/10 data-[state=checked]:font-medium disabled:cursor-not-allowed disabled:opacity-50';
 /**
  * Pick ONE of a few options whose labels are sentences — "No — just their own
  * page" / "Yes — they can edit anyone, like you". The options are all visible at
@@ -14,6 +17,7 @@ import { Tooltip } from './Tooltip.js';
  *  - a long or data-driven list → `SelectField` / `ChoiceMenu`
  *  - a color → `SwatchPicker`
  *  - one picture out of several (a cover, an avatar) → THIS, `layout='picture'`
+ *  - rows that each carry two lines and a fact, or a tree → THIS, `layout='list'`
  *  - a handful of answers that each need words → THIS
  *
  * ── 🔴 Why this exists: the hidden-radio trap (family, 2026-09-26) ──────────
@@ -34,13 +38,31 @@ import { Tooltip } from './Tooltip.js';
  * `relative` on the root contains the non-focusable form-bubble input Radix adds
  * inside a `<form>`, so even that is positioned against this group.
  */
-export function ChoiceGroup({ options, value, onChange, label, 'aria-label': ariaLabel, description, disabled = false, disabledReason, name, layout = 'text', tileSize = 64, className, ...rest }) {
+export function ChoiceGroup({ options, value, onChange, label, 'aria-label': ariaLabel, description, disabled = false, disabledReason, name, layout = 'text', tileSize = 64, onConfirm, className, ...rest }) {
     const id = useId();
     const labelId = label != null ? `${id}-label` : undefined;
     const descriptionId = description != null ? `${id}-desc` : undefined;
     const reasonId = disabled && disabledReason != null ? `${id}-reason` : undefined;
     const describedBy = [descriptionId, reasonId].filter(Boolean).join(' ') || undefined;
-    return (_jsxs("div", { ...rest, className: cn('flex min-w-0 flex-col gap-1.5', className), "data-cb-choice-group": '', children: [label != null ? (_jsx("span", { id: labelId, className: cn('text-sm font-medium text-foreground', disabled && 'opacity-60'), children: label })) : null, _jsx(RadioGroup.Root, { "aria-labelledby": labelId, "aria-label": labelId ? undefined : ariaLabel, "aria-describedby": describedBy, value: value ?? '', onValueChange: (next) => onChange(next), disabled: disabled, name: name, className: cn('relative flex min-w-0', layout === 'picture' ? 'gap-2' : 'flex-wrap gap-1.5'), children: options.map((option) => layout === 'picture' ? (_jsx(PictureTile, { option: option, size: tileSize }, option.value)) : (_jsxs(RadioGroup.Item, { value: option.value, disabled: option.disabled, className: cn('flex min-w-0 max-w-full flex-col items-start rounded-md border border-border bg-transparent px-2.5 py-1.5 text-left text-sm text-foreground transition-colors', 'hover:border-accent', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'data-[state=checked]:border-accent data-[state=checked]:bg-accent/10 data-[state=checked]:font-medium', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border', TAP_TARGET), children: [_jsx("span", { className: 'min-w-0 break-words', children: option.label }), option.description != null ? (_jsx("span", { className: 'min-w-0 break-words text-xs font-normal text-muted-foreground', children: option.description })) : null] }, option.value))) }), reasonId ? (_jsx("p", { id: reasonId, className: 'text-xs text-muted-foreground', children: disabledReason })) : null, descriptionId ? (_jsx("p", { id: descriptionId, className: 'text-xs text-muted-foreground', children: description })) : null] }));
+    return (_jsxs("div", { ...rest, className: cn('flex min-w-0 flex-col gap-1.5', className), "data-cb-choice-group": '', children: [label != null ? (_jsx("span", { id: labelId, className: cn('text-sm font-medium text-foreground', disabled && 'opacity-60'), children: label })) : null, _jsx(RadioGroup.Root, { "aria-labelledby": labelId, "aria-label": labelId ? undefined : ariaLabel, "aria-describedby": describedBy, value: value ?? '', onValueChange: (next) => onChange(next), disabled: disabled, name: name, className: cn('relative flex min-w-0', ROOT_LAYOUT[layout]), children: options.map((option) => layout === 'picture' ? (_jsx(PictureTile, { option: option, size: tileSize }, option.value)) : layout === 'list' ? (_jsx(ListRow, { option: option, onConfirm: onConfirm }, option.value)) : (_jsx(RadioGroup.Item, { value: option.value, disabled: option.disabled, className: cn(RAW_BUTTON, 'flex min-w-0 max-w-full flex-col items-start rounded-md border border-border bg-transparent px-2.5 py-1.5 text-left text-sm text-foreground transition-colors', 'hover:border-accent', OPTION_STATES, 'disabled:hover:border-border', TAP_TARGET), children: _jsx(OptionWords, { option: option }) }, option.value))) }), reasonId ? (_jsx("p", { id: reasonId, className: 'text-xs text-muted-foreground', children: disabledReason })) : null, descriptionId ? (_jsx("p", { id: descriptionId, className: 'text-xs text-muted-foreground', children: description })) : null] }));
+}
+/** What keeps `label` and `description` two lines, in a chip and in a row alike. */
+function OptionWords({ option }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: 'min-w-0 max-w-full break-words', children: option.label }), option.description != null ? (_jsx("span", { className: 'min-w-0 max-w-full break-words text-xs font-normal text-muted-foreground', children: option.description })) : null] }));
+}
+/**
+ * One full-width row of a `layout='list'` group: the words on the left, `trailing` on the
+ * right. The indent is padding, not a margin, so a nested row's highlight still spans the list.
+ */
+function ListRow({ option, onConfirm }) {
+    return (_jsxs(RadioGroup.Item, { value: option.value, disabled: option.disabled, 
+        // 0.625rem is the row's own `px-2.5`, which a `padding-inline-start` would otherwise replace.
+        style: option.indent ? { paddingInlineStart: `calc(0.625rem + ${option.indent}rem)` } : undefined, onDoubleClick: onConfirm ? () => onConfirm(option.value) : undefined, onKeyDown: onConfirm
+            ? (event) => {
+                if (event.key === 'Enter')
+                    onConfirm(option.value);
+            }
+            : undefined, className: cn(RAW_BUTTON, 'flex w-full min-w-0 items-center gap-3 rounded-md border border-transparent px-2.5 py-1.5 text-left text-sm text-foreground transition-colors', 'hover:bg-muted', OPTION_STATES, 'disabled:hover:bg-transparent', TAP_TARGET), children: [_jsx("span", { className: 'flex min-w-0 flex-1 flex-col items-start', children: _jsx(OptionWords, { option: option }) }), option.trailing != null ? (_jsx("span", { className: 'shrink-0 text-xs font-normal text-muted-foreground', children: option.trailing })) : null] }));
 }
 /**
  * One square tile of a `layout='picture'` group. Still a Radix radio item — roving
@@ -50,7 +72,7 @@ export function ChoiceGroup({ options, value, onChange, label, 'aria-label': ari
  */
 function PictureTile({ option, size }) {
     const name = option['aria-label'] ?? (typeof option.label === 'string' ? option.label : undefined);
-    const item = (_jsx(RadioGroup.Item, { value: option.value, disabled: option.disabled, "aria-label": option.image != null ? name : undefined, style: { width: size, height: size }, className: cn('flex shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-card text-center text-caption leading-tight text-foreground transition-colors', 'hover:border-accent', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'data-[state=checked]:border-accent data-[state=checked]:ring-2 data-[state=checked]:ring-accent', option.image == null && 'px-1 data-[state=checked]:bg-accent/10', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border'), children: option.image ?? option.label }));
+    const item = (_jsx(RadioGroup.Item, { value: option.value, disabled: option.disabled, "aria-label": option.image != null ? name : undefined, style: { width: size, height: size }, className: cn(RAW_BUTTON, 'flex shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-card text-center text-caption leading-tight text-foreground transition-colors', 'hover:border-accent', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'data-[state=checked]:border-accent data-[state=checked]:ring-2 data-[state=checked]:ring-accent', option.image == null && 'px-1 data-[state=checked]:bg-accent/10', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border'), children: option.image ?? option.label }));
     return option.image != null ? _jsx(Tooltip, { content: option.label, children: item }) : item;
 }
 //# sourceMappingURL=ChoiceGroup.js.map

package/dist/react/components/ChoiceGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceGroup.js","sourceRoot":"","sources":["../../../src/react/components/ChoiceGroup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChoiceGroup.js","sourceRoot":"","sources":["../../../src/react/components/ChoiceGroup.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.103.1",
+	"version": "5.104.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",

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

@@ -76,6 +76,67 @@ describe('ChoiceGroup', () => {
     expect(queryByText('Only curators.')).toBeNull();
   });
 
+  describe("layout='list'", () => {
+    const ROWS: ChoiceOption[] = [
+      { value: 'root', label: 'Holidays', description: 'Holidays', trailing: 'You are here' },
+      { value: 'nested', label: '2019', description: 'Holidays/2019', indent: 2 },
+    ];
+
+    test('each row is a radio holding its two lines and its trailing fact', () => {
+      const { getAllByRole, getByText } = render(
+        <ChoiceGroup layout='list' aria-label='Destination' options={ROWS} value='root' onChange={() => {}} />,
+      );
+      expect(getAllByRole('radio').map((radio) => radio.textContent)).toEqual(['HolidaysHolidaysYou are here', '2019Holidays/2019']);
+      // The trailing fact is a sibling of the words, so it holds the right edge however long they run.
+      expect(getByText('You are here').parentElement?.getAttribute('role')).toBe('radio');
+    });
+
+    test('an indent pads inside the row, on top of its own padding', () => {
+      const { getAllByRole } = render(
+        <ChoiceGroup layout='list' aria-label='Destination' options={ROWS} value='root' onChange={() => {}} />,
+      );
+      const [root, nested] = getAllByRole('radio') as [HTMLElement, HTMLElement];
+      expect(root.style.paddingInlineStart).toBe('');
+      expect(nested.style.paddingInlineStart).toBe('calc(0.625rem + 2rem)');
+    });
+
+    test('a double-click or Enter confirms that row, and an arrow key only chooses', () => {
+      const confirmed: string[] = [];
+      const { getAllByRole } = render(
+        <ChoiceGroup
+          layout='list'
+          aria-label='Destination'
+          options={ROWS}
+          value='root'
+          onChange={() => {}}
+          onConfirm={(next) => confirmed.push(next)}
+        />,
+      );
+      const [root, nested] = getAllByRole('radio') as [HTMLElement, HTMLElement];
+      fireEvent.doubleClick(nested);
+      fireEvent.keyDown(root, { key: 'Enter' });
+      fireEvent.keyDown(root, { key: 'ArrowDown' });
+      expect(confirmed).toEqual(['nested', 'root']);
+    });
+
+    test('with no onConfirm, a double-click is two clicks and nothing throws', () => {
+      const { getAllByRole } = render(
+        <ChoiceGroup layout='list' aria-label='Destination' options={ROWS} value='root' onChange={() => {}} />,
+      );
+      fireEvent.doubleClick(getAllByRole('radio')[1] as HTMLElement);
+      fireEvent.keyDown(getAllByRole('radio')[1] as HTMLElement, { key: 'Enter' });
+    });
+  });
+
+  // RadioGroup.Item IS a `<button>`, so `raw-button-resets-face` cannot see it: a host without
+  // Tailwind's preflight (desk) draws system-ui 13.33px on any option that does not reset itself.
+  test.each(['text', 'picture', 'list'] as const)("layout='%s' resets the browser's button face", (layout) => {
+    const { getAllByRole } = render(
+      <ChoiceGroup layout={layout} aria-label='Which' options={OPTIONS} value='member' onChange={() => {}} />,
+    );
+    for (const radio of getAllByRole('radio')) expect(radio.className).toContain('font-[inherit]');
+  });
+
   describe("layout='picture'", () => {
     const PICTURES: ChoiceOption[] = [
       { value: 'first', label: 'Whichever is first' },

package/src/react/components/ChoiceGroup.tsx

@@ -1,6 +1,6 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import { type ReactNode, useId } from 'react';
-import { cn } from '../lib/cn.js';
+import { cn, RAW_BUTTON } from '../lib/cn.js';
 import { TAP_TARGET } from '../lib/tapTarget.js';
 import { Tooltip } from './Tooltip.js';
 
@@ -21,6 +21,10 @@ export interface ChoiceOption<T extends string = string> {
   image?: ReactNode;
   /** Accessible name for a picture tile whose `label` is not a plain string. */
   'aria-label'?: string;
+  /** `layout='list'` only: a quiet right-aligned fact about the row — a count, "you are here". */
+  trailing?: ReactNode;
+  /** `layout='list'` only: depth in levels of 1rem, so a flattened tree keeps its shape. */
+  indent?: number;
 }
 
 export interface ChoiceGroupProps<T extends string = string> {
@@ -43,14 +47,28 @@ export interface ChoiceGroupProps<T extends string = string> {
    * `text` (default): a wrapping row of worded options. `picture`: one strip of
    * square thumbnail tiles, checked by an accent ring — a cover picker, an avatar
    * picker. The strip does not wrap; put the group in a `ScrollArea axis='x'` when
-   * it can be longer than its container.
+   * it can be longer than its container. `list`: full-width stacked rows, each with
+   * a `trailing` slot and an `indent` — a list of moments, a folder tree. Give the
+   * group a height through `className` when it can outgrow its container.
    */
-  layout?: 'text' | 'picture';
+  layout?: 'text' | 'picture' | 'list';
   /** `layout='picture'` tile edge in px. Default 64. */
   tileSize?: number;
+  /**
+   * `layout='list'` only: a double-click or Enter on a row takes it straight to the
+   * action the choice was for, without reaching for the dialog's button. `onChange`
+   * has already reported that row by then.
+   */
+  onConfirm?: (value: T) => void;
   className?: string;
 }
 
+const ROOT_LAYOUT = { text: 'flex-wrap gap-1.5', picture: 'gap-2', list: 'flex-col gap-0.5' } as const;
+
+/** Focus, checked and disabled, the same on a chip and on a row. */
+const OPTION_STATES =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-accent data-[state=checked]:bg-accent/10 data-[state=checked]:font-medium disabled:cursor-not-allowed disabled:opacity-50';
+
 /**
  * Pick ONE of a few options whose labels are sentences — "No — just their own
  * page" / "Yes — they can edit anyone, like you". The options are all visible at
@@ -61,6 +79,7 @@ export interface ChoiceGroupProps<T extends string = string> {
  *  - a long or data-driven list → `SelectField` / `ChoiceMenu`
  *  - a color → `SwatchPicker`
  *  - one picture out of several (a cover, an avatar) → THIS, `layout='picture'`
+ *  - rows that each carry two lines and a fact, or a tree → THIS, `layout='list'`
  *  - a handful of answers that each need words → THIS
  *
  * ── 🔴 Why this exists: the hidden-radio trap (family, 2026-09-26) ──────────
@@ -93,6 +112,7 @@ export function ChoiceGroup<T extends string = string>({
   name,
   layout = 'text',
   tileSize = 64,
+  onConfirm,
   className,
   ...rest
 }: ChoiceGroupProps<T>) {
@@ -117,31 +137,28 @@ export function ChoiceGroup<T extends string = string>({
         onValueChange={(next) => onChange(next as T)}
         disabled={disabled}
         name={name}
-        className={cn('relative flex min-w-0', layout === 'picture' ? 'gap-2' : 'flex-wrap gap-1.5')}
+        className={cn('relative flex min-w-0', ROOT_LAYOUT[layout])}
       >
         {options.map((option) =>
           layout === 'picture' ? (
             <PictureTile key={option.value} option={option} size={tileSize} />
+          ) : layout === 'list' ? (
+            <ListRow key={option.value} option={option} onConfirm={onConfirm} />
           ) : (
             <RadioGroup.Item
               key={option.value}
               value={option.value}
               disabled={option.disabled}
               className={cn(
+                RAW_BUTTON,
                 'flex min-w-0 max-w-full flex-col items-start rounded-md border border-border bg-transparent px-2.5 py-1.5 text-left text-sm text-foreground transition-colors',
                 'hover:border-accent',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                'data-[state=checked]:border-accent data-[state=checked]:bg-accent/10 data-[state=checked]:font-medium',
-                'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border',
+                OPTION_STATES,
+                'disabled:hover:border-border',
                 TAP_TARGET,
               )}
             >
-              <span className='min-w-0 break-words'>{option.label}</span>
-              {option.description != null ? (
-                <span className='min-w-0 break-words text-xs font-normal text-muted-foreground'>
-                  {option.description}
-                </span>
-              ) : null}
+              <OptionWords option={option} />
             </RadioGroup.Item>
           ),
         )}
@@ -160,6 +177,58 @@ export function ChoiceGroup<T extends string = string>({
   );
 }
 
+/** What keeps `label` and `description` two lines, in a chip and in a row alike. */
+function OptionWords<T extends string>({ option }: { option: ChoiceOption<T> }) {
+  return (
+    <>
+      <span className='min-w-0 max-w-full break-words'>{option.label}</span>
+      {option.description != null ? (
+        <span className='min-w-0 max-w-full break-words text-xs font-normal text-muted-foreground'>
+          {option.description}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * One full-width row of a `layout='list'` group: the words on the left, `trailing` on the
+ * right. The indent is padding, not a margin, so a nested row's highlight still spans the list.
+ */
+function ListRow<T extends string>({ option, onConfirm }: { option: ChoiceOption<T>; onConfirm?: (value: T) => void }) {
+  return (
+    <RadioGroup.Item
+      value={option.value}
+      disabled={option.disabled}
+      // 0.625rem is the row's own `px-2.5`, which a `padding-inline-start` would otherwise replace.
+      style={option.indent ? { paddingInlineStart: `calc(0.625rem + ${option.indent}rem)` } : undefined}
+      onDoubleClick={onConfirm ? () => onConfirm(option.value) : undefined}
+      onKeyDown={
+        onConfirm
+          ? (event) => {
+              if (event.key === 'Enter') onConfirm(option.value);
+            }
+          : undefined
+      }
+      className={cn(
+        RAW_BUTTON,
+        'flex w-full min-w-0 items-center gap-3 rounded-md border border-transparent px-2.5 py-1.5 text-left text-sm text-foreground transition-colors',
+        'hover:bg-muted',
+        OPTION_STATES,
+        'disabled:hover:bg-transparent',
+        TAP_TARGET,
+      )}
+    >
+      <span className='flex min-w-0 flex-1 flex-col items-start'>
+        <OptionWords option={option} />
+      </span>
+      {option.trailing != null ? (
+        <span className='shrink-0 text-xs font-normal text-muted-foreground'>{option.trailing}</span>
+      ) : null}
+    </RadioGroup.Item>
+  );
+}
+
 /**
  * One square tile of a `layout='picture'` group. Still a Radix radio item — roving
  * tabindex, arrow keys and `aria-checked` come from the group, exactly as for a text
@@ -175,6 +244,7 @@ function PictureTile<T extends string>({ option, size }: { option: ChoiceOption<
       aria-label={option.image != null ? name : undefined}
       style={{ width: size, height: size }}
       className={cn(
+        RAW_BUTTON,
         'flex shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-card text-center text-caption leading-tight text-foreground transition-colors',
         'hover:border-accent',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',