cursedbelt 5.103.0 → 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/dist/scripts/guardrailsEnforce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guardrailsEnforce.d.ts","sourceRoot":"","sources":["../../scripts/guardrailsEnforce.ts"],"names":[],"mappings":";AAsQA,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB;;;sEAGkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,IAAI;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CACzD;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CA6B9D;AA2yCD,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAE3D;AAoHD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAIpE;AA+6BD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAEpF;AAID,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAoBhE;AAyKD,kGAAkG;AAClG,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAatE;AAqDD,UAAU,MAAM;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AA0BD,+FAA+F;AAC/F,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAgBpD;AAID,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAO5E;AAiJD,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAoCtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAiE,CAAC;AAEtH,0EAA0E;AAC1E,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAAwE,CAAC;AAShH,eAAO,MAAM,uBAAuB,aAAkD,CAAC;AAGvF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AAED;2FAC2F;AAC3F,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CA+C3F;AAED,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAgHhC,wBAAgB,0BAA0B,CAAC,SAAS,GAAE,MAAwB,GAAG,MAAM,EAAE,CAyBxF"}
+{"version":3,"file":"guardrailsEnforce.d.ts","sourceRoot":"","sources":["../../scripts/guardrailsEnforce.ts"],"names":[],"mappings":";AAsQA,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB;;;sEAGkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,IAAI;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CACzD;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CA6B9D;AAm1CD,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAE3D;AAoHD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAIpE;AA+6BD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAEpF;AAID,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAoBhE;AAyKD,kGAAkG;AAClG,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAatE;AAqDD,UAAU,MAAM;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AA0BD,+FAA+F;AAC/F,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAgBpD;AAID,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAO5E;AAiJD,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAoCtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAiE,CAAC;AAEtH,0EAA0E;AAC1E,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAAwE,CAAC;AAShH,eAAO,MAAM,uBAAuB,aAAkD,CAAC;AAGvF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AAED;2FAC2F;AAC3F,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CA+C3F;AAED,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAgHhC,wBAAgB,0BAA0B,CAAC,SAAS,GAAE,MAAwB,GAAG,MAAM,EAAE,CAyBxF"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.103.0",
+	"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/scripts/guardrailsEnforce.spec.ts

@@ -77,9 +77,41 @@ describe('no-raw-action-button', () => {
   test('a CLOSED or self-closing group earlier in the file exempts nothing after it', () => {
     const closed = `<Tabs value={t}><TabsList /></Tabs>\n<button role="tab">Loose</button>`;
     expect(check('no-raw-action-button', closed)).toHaveLength(1);
-    const selfClosed = `<RadioGroup options={o} />\n<button role="radio">Loose</button>`;
+    const selfClosed = `<SegmentedControl options={o} />\n<button role="radio">Loose</button>`;
     expect(check('no-raw-action-button', selfClosed)).toHaveLength(1);
   });
+
+  // Task 4098: the type argument's `>` ended the tag, so the real `/>` went unread and the
+  // control stayed open for the rest of the file. Desk's rewind list passed on exactly this.
+  test('🔴 a self-closing GENERIC group exempts nothing after it', () => {
+    const union = `<SegmentedControl<"a" | "b"> value={v} onChange={set} options={o} />
+      <button role="radio">Loose</button>`;
+    expect(check('no-raw-action-button', union)).toHaveLength(1);
+    const multiline = `<SegmentedControl<
+        Record<string, "a" | "b">
+      >
+        value={v}
+        onChange={(next) => set(next)}
+      />
+      <button role="tab">Loose</button>`;
+    expect(check('no-raw-action-button', multiline)).toHaveLength(1);
+    const functionType = `<Tabs<(next: string) => void> value={t} />\n<button role="switch">Loose</button>`;
+    expect(check('no-raw-action-button', functionType)).toHaveLength(1);
+  });
+
+  test('a group the belt does not ship exempts nothing, whatever an app names it', () => {
+    const source = `<RadioGroup value={v}>
+      <button role="radio">A</button>
+    </RadioGroup>`;
+    expect(check('no-raw-action-button', source)).toHaveLength(1);
+  });
+
+  test('a generic group left OPEN still exempts its own part', () => {
+    const source = `<SegmentedControl<"a" | "b"> value={v}>
+      <button role="radio" aria-checked={v === 'a'}>A</button>
+    </SegmentedControl>`;
+    expect(check('no-raw-action-button', source)).toHaveLength(0);
+  });
 });
 
 // Filed 2026-09-15 after three false positives in three repos, all one defect: the tag
@@ -122,11 +154,11 @@ describe('opening-tag extraction (comment-aware)', () => {
   });
 
   test('a prose angle bracket does not hide a role="radio" below it', () => {
-    const source = `<RadioGroup value={v}><button
+    const source = `<SegmentedControl value={v}><button
       /* A radio-like list rather than a <select>. */
       role="radio"
       aria-checked={selected}
-    >Move here</button></RadioGroup>`;
+    >Move here</button></SegmentedControl>`;
     expect(check('no-raw-action-button', source)).toHaveLength(0);
   });
 
@@ -206,12 +238,12 @@ describe('a presentational marker must be an ATTRIBUTE, not prose about one', ()
   });
 
   test('the REAL attributes still pass silently, prose and all', () => {
-    const source = `<RadioGroup value={v}><button
+    const source = `<SegmentedControl value={v}><button
       // A radio-like list: \`role="radio"\` + \`aria-checked\` says so to a screen reader.
       role="radio"
       aria-checked={selected}
       type="button"
-    >Move here</button></RadioGroup>`;
+    >Move here</button></SegmentedControl>`;
     expect(check('no-raw-action-button', source)).toHaveLength(0);
   });
 

package/scripts/guardrailsEnforce.ts

@@ -210,8 +210,8 @@
 //
 // A presentational ARIA role/attribute on the tag (role="tab" | "switch" | "radio" |
 // "menuitemradio" | "presentation", or aria-selected) exempts a `<button>` from
-// `no-raw-action-button` ONLY inside a belt `Tabs`/`TabsList`/`SegmentedControl`/
-// `RadioGroup`/`ToggleGroup` (task 2381 — a bare marker was the loophole; see the rule).
+// `no-raw-action-button` ONLY inside a belt `Tabs`/`TabsList`/`SegmentedControl`
+// (task 2381 — a bare marker was the loophole; see the rule).
 //
 // 🔴 Every opt-out is COUNTED (`opt-out-count`) and must lead with its cause
 // (`opt-out-needs-cause`): `guardrails-ignore <rule>: <cause> — <six+ words of why>`, the
@@ -356,6 +356,38 @@ interface OpeningTag {
 	readonly code: string;
 }
 
+function endOfTagName(source: string, startIndex: number): number {
+	const name = /<[\w$.:-]+/y;
+	name.lastIndex = startIndex;
+	return name.test(source) ? name.lastIndex : startIndex;
+}
+
+/** The index past a JSX type argument at `index` (`<SegmentedControl<"a" | "b"> …`), or
+ *  `index` when none opens there or it never closes. Its `>` is not the end of the tag: read
+ *  as one, a self-closing generic control looked OPEN, and with no `</SegmentedControl>` to
+ *  shut it every role-marked button below it passed `no-raw-action-button` (forge task 4098).
+ *  The `>` of a `=>` inside a function type closes nothing. */
+function endOfTypeArguments(source: string, index: number): number {
+	if (source[index] !== "<") return index;
+	let depth = 0;
+	let i = index;
+	while (i < source.length) {
+		const ch = source[i];
+		if (ch === '"' || ch === "'" || ch === "`") {
+			i = skipQuoted(source, i);
+			continue;
+		}
+		if (source.slice(i, i + 2) === "=>") {
+			i += 2;
+			continue;
+		}
+		if (ch === "<") depth++;
+		else if (ch === ">" && --depth === 0) return i + 1;
+		i++;
+	}
+	return index;
+}
+
 /** Read from a `<button` (or similar) match to the end of its opening tag, tolerating
  *  `{...}` JS expressions in attribute values that may themselves contain `>`
  *  (`onClick={() => …}`, which works because that `>` sits inside braces).
@@ -372,6 +404,12 @@ function readOpeningTag(source: string, startIndex: number): OpeningTag {
 	let i = startIndex;
 	let braceDepth = 0;
 	let code = "";
+	const nameEnd = endOfTagName(source, startIndex);
+	const typeEnd = endOfTypeArguments(source, nameEnd);
+	if (typeEnd > nameEnd) {
+		code = source.slice(startIndex, nameEnd) + blank(source.slice(nameEnd, typeEnd));
+		i = typeEnd;
+	}
 	while (i < source.length) {
 		const two = source.slice(i, i + 2);
 		if (two === "//") {
@@ -754,14 +792,16 @@ const PRESENTATIONAL_MARKER_RE =
 // Task 2381: a role marker used to exempt ANY raw button, so the cheapest way past this rule
 // was `role="switch"` — `apps/family/src/App.tsx:1786-1800` (`EditModeToggle`) says in its
 // own comment the marker is there to satisfy it, beside the belt's `Switch`. A marker now
-// exempts only a button INSIDE a belt group that owns that role (`Tabs`, `SegmentedControl`,
-// `RadioGroup`, `ToggleGroup`) — the one place a raw button with it is the group's own part.
-// Anywhere else it is `Switch` / `Tabs` / `SegmentedControl` / `RadioGroup`, or an opt-out
+// exempts only a button INSIDE a belt group that owns that role (`Tabs`, `SegmentedControl`)
+// — the one place a raw button with it is the group's own part. `ChoiceGroup` takes no
+// children, so nothing can sit inside it, and a `RadioGroup` or `ToggleGroup` is no belt
+// component: naming them only exempted whatever an app happened to call that (forge task 4098).
+// Anywhere else it is `Switch` / `Tabs` / `SegmentedControl` / `ChoiceGroup`, or an opt-out
 // with its cause.
 const BELT_OWN_SRC = `${join(import.meta.dir, "..", "src")}/`;
 const isBeltOwnSource = (filePath: string) =>
 	resolve(filePath).startsWith(BELT_OWN_SRC) || /(^|\/)(?:packages|libs)\/cursedbelt\/src\//.test(filePath.replace(/\\/g, "/"));
-const BELT_CHOICE_GROUPS = ["Tabs", "TabsList", "SegmentedControl", "RadioGroup", "ToggleGroup"];
+const BELT_CHOICE_GROUPS = ["Tabs", "TabsList", "SegmentedControl"];
 
 /** Is `index` inside an open (not yet closed) belt choice-group element in this file? */
 function insideBeltChoiceGroup(scannable: string, index: number): boolean {
@@ -778,7 +818,7 @@ function insideBeltChoiceGroup(scannable: string, index: number): boolean {
 const noRawActionButton: Rule = {
 	name: "no-raw-action-button",
 	description:
-		'DESIGN.md §2 (Component Architecture): no hand-rolled <button> — use the cursedbelt Button family; a toggle is `Switch`, a tab `Tabs`, a choice `SegmentedControl`/`RadioGroup`. A role marker exempts a button only inside one of those groups.',
+		'DESIGN.md §2 (Component Architecture): no hand-rolled <button> — use the cursedbelt Button family; a toggle is `Switch`, a tab `Tabs`, a choice `SegmentedControl`/`ChoiceGroup`. A role marker exempts a button only inside `Tabs` or `SegmentedControl`.',
 	check(filePath, source) {
 		const violations: Violation[] = [];
 		const scannable = blankNonMarkupText(source, filePath);

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',