cursedbelt 5.82.0 → 5.85.0

package/src/react/components/IsolatedFrame.tsx

@@ -79,6 +79,7 @@ export function IsolatedFrame({
   className,
   frameRef,
   onFrameLoad,
+  ...rest
 }: IsolatedFrameProps) {
   const hasContent = Boolean(src || srcDoc);
   const sourceKey = src ?? srcDoc;
@@ -137,7 +138,7 @@ export function IsolatedFrame({
 
   if (mode === 'fullscreen') {
     return (
-      <Modal open onClose={() => onClose?.()} size='full' title={title} scrollBody={false}>
+      <Modal {...rest} open onClose={() => onClose?.()} size='full' title={title} scrollBody={false}>
         <div className={cn('min-h-0 flex-1', className)}>{frame}</div>
       </Modal>
     );
@@ -145,7 +146,7 @@ export function IsolatedFrame({
 
   if (mode === 'mobile') {
     return (
-      <ScrollArea className={cn('h-full w-full', className)}>
+      <ScrollArea {...rest} className={cn('h-full w-full', className)}>
         <div className='flex min-h-full w-full items-start justify-center p-4'>
           <div
             // The bezel: a rounded, overflow-hidden device frame at a fixed logical
@@ -165,5 +166,5 @@ export function IsolatedFrame({
   }
 
   // desktop
-  return <div className={cn('h-full w-full', className)}>{frame}</div>;
+  return <div {...rest} className={cn('h-full w-full', className)}>{frame}</div>;
 }

package/src/react/components/JsonEditor.tsx

@@ -82,6 +82,7 @@ export const JsonEditor = ({
   classNames,
   styles,
   unstyled,
+  ...rest
 }: JsonEditorProps) => {
   // Hold `parse`/`onResult` in refs so the memo + effect depend ONLY on `value`.
   // This keeps `result` referentially stable per `value` even when the parent
@@ -123,6 +124,7 @@ export const JsonEditor = ({
 
   return (
     <div
+      {...rest}
       className={resolveClass('flex flex-col gap-2', classNames?.root ?? className, unstyled)}
       style={resolveStyle({}, styles?.root ?? style, unstyled)}
     >

package/src/react/components/KanbanBoard.tsx

@@ -79,6 +79,7 @@ export function KanbanBoard<T>({
   emptyText = 'Nothing here yet',
   'aria-label': ariaLabel,
   className,
+  ...rest
 }: KanbanBoardProps<T>) {
   const containers = useMemo(() => columns.map((c) => ({ id: c.id, items: [...c.items] })), [columns]);
   const onDrop = useCallback(
@@ -133,7 +134,7 @@ export function KanbanBoard<T>({
   };
 
   return (
-    <ContainerContext>
+    <ContainerContext {...rest}>
       <div className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-2', className)} data-cb-kanban-frame>
         <nav aria-label={`${ariaLabel}: columns`} data-cb-kanban-tray className='min-w-0 md:hidden'>
           <ScrollArea

package/src/react/components/KeyBadge.tsx

@@ -33,19 +33,23 @@ export interface KeyBadgeProps {
  *
  * Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
  */
-export function KeyBadge({ children, description, uppercase, className }: KeyBadgeProps) {
-  const badge = (
-    <span
-      className={cn('cbfk-key', description === undefined && className)}
-      data-uppercase={uppercase ? 'true' : undefined}
-    >
-      {children}
-    </span>
-  );
-  if (description === undefined) return badge;
+export function KeyBadge({ children, description, uppercase, className, ...rest }: KeyBadgeProps) {
+  if (description === undefined) {
+    return (
+      <span
+        {...rest}
+        className={cn('cbfk-key', className)}
+        data-uppercase={uppercase ? 'true' : undefined}
+      >
+        {children}
+      </span>
+    );
+  }
   return (
-    <p className={cn('cbfk-keyline', className)}>
-      {badge}
+    <p {...rest} className={cn('cbfk-keyline', className)}>
+      <span className='cbfk-key' data-uppercase={uppercase ? 'true' : undefined}>
+        {children}
+      </span>
       <span>{description}</span>
     </p>
   );

package/src/react/components/Lightbox.tsx

@@ -20,9 +20,10 @@ export interface LightboxProps {
  *
  * Outside-click and Escape both close (no discard guard — a lightbox is never dirty).
  */
-export function Lightbox({ open, onClose, children, caption }: LightboxProps) {
+export function Lightbox({ open, onClose, children, caption, ...rest }: LightboxProps) {
   return (
     <Dialog
+      {...rest}
       open={open}
       onOpenChange={(v) => {
         if (!v) onClose();

package/src/react/components/ListToolbar.tsx

@@ -114,6 +114,7 @@ export function ListToolbar({
   view,
   actions,
   className,
+  ...rest
 }: ListToolbarProps) {
   const showSearch = search !== undefined && onSearchChange !== undefined;
   const showChips = chips !== undefined && chips.length > 0 && onChipChange !== undefined;
@@ -121,6 +122,7 @@ export function ListToolbar({
 
   return (
     <div
+      {...rest}
       className={cn(
         'flex flex-wrap items-center gap-x-3 gap-y-2',
         // From `sm:` a row WITH chips never wraps: the chips are the one item that can give way

package/src/react/components/LogViewer.tsx

@@ -145,6 +145,7 @@ export function LogViewer({
   onSelectLine,
   selectedLine = null,
   className,
+  ...rest
 }: LogViewerProps) {
   const [filter, setFilter] = useState('');
   const [following, setFollowing] = useState(followDefault);
@@ -213,7 +214,7 @@ export function LogViewer({
     !hasStrip || title != null || (exitCode !== null && exitCode !== 0) || typeof durationMs === 'number' || filterable;
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div {...rest} className={cn('flex flex-col gap-2', className)}>
       {toolbarRow && (
       <div className="flex flex-wrap items-center gap-2">
         {title && <span className="cb-meta-label">{title}</span>}

package/src/react/components/Menu.tsx

@@ -59,10 +59,10 @@ export function Menu({ children, className, ...rest }: MenuProps) {
   };
   return (
     <div
+      {...rest}
       role='menu'
       tabIndex={-1}
       data-cb-menu=''
-      aria-label={rest['aria-label']}
       onKeyDown={onKeyDown}
       className={cn('flex flex-col gap-px outline-none', className)}
     >
@@ -119,13 +119,14 @@ export function MenuItem({
   hint,
   className,
   children,
+  ...rest
 }: MenuItemProps) {
   const hintId = useId();
   const reason = unavailableReason?.trim() || undefined;
   const refused = reason !== undefined && !disabled;
   const choice = selected !== undefined;
   return (
-    <Tooltip content={reason ?? title} side='right' multiline>
+    <Tooltip {...rest} content={reason ?? title} side='right' multiline>
       {/* The role and aria-checked are one condition: "menuitem" pairs with no aria-checked and
           "menuitemradio" with a real boolean. The linter checks the union of both branches. */}
       {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: see the comment above */}
@@ -188,9 +189,10 @@ export function MenuItem({
 }
 
 /** A small uppercase heading over a group of items. */
-export function MenuLabel({ children, className }: { children: ReactNode; className?: string }) {
+export function MenuLabel({ children, className, ...rest }: { children: ReactNode; className?: string }) {
   return (
     <div
+      {...rest}
       data-cb-menu-label=''
       className={cn('px-2 pt-2 pb-1 font-bold text-muted-foreground text-xs uppercase tracking-wider', className)}
     >
@@ -199,7 +201,7 @@ export function MenuLabel({ children, className }: { children: ReactNode; classN
   );
 }
 
-export function MenuSeparator({ className }: { className?: string }) {
+export function MenuSeparator({ className, ...rest }: { className?: string }) {
   // biome-ignore lint/a11y/useSemanticElements: an <hr> inside role=menu is not a menu separator to AT; role=separator is.
-  return <div role='separator' className={cn('my-1 h-px bg-border', className)} />;
+  return <div {...rest} role='separator' className={cn('my-1 h-px bg-border', className)} />;
 }

package/src/react/components/MeterList.tsx

@@ -83,9 +83,9 @@ export interface MeterListProps {
  * On narrow screens the bar drops under the label block (two-line row) instead
  * of crushing the label — no horizontal scrolling, targets stay ≥44px tall.
  */
-export function MeterList({ items, flat = false, labelWidth = 'default', className }: MeterListProps) {
-  const list = (
-    <div className={cn('flex flex-col divide-y divide-border', className)}>
+export function MeterList({ items, flat = false, labelWidth = 'default', className, ...rest }: MeterListProps) {
+  const rows = (
+    <>
       {items.map((item) => {
         const interactive = item.onClick !== undefined;
         const pct =
@@ -160,12 +160,17 @@ export function MeterList({ items, flat = false, labelWidth = 'default', classNa
           </div>
         );
       })}
-    </div>
+    </>
   );
-  if (flat) return list;
+  if (flat)
+    return (
+      <div {...rest} className={cn('flex flex-col divide-y divide-border', className)}>
+        {rows}
+      </div>
+    );
   return (
-    <Surface level='flat' pad='sm' radius='lg'>
-      {list}
+    <Surface {...rest} level='flat' pad='sm' radius='lg'>
+      <div className={cn('flex flex-col divide-y divide-border', className)}>{rows}</div>
     </Surface>
   );
 }

package/src/react/components/Modal.tsx

@@ -173,6 +173,7 @@ export function Modal({
   aside,
   asideWidth = 'sm',
   className,
+  ...rest
 }: ModalProps) {
   const { guardedClose, discardOverlay, isConfirming, cancelDiscard } = useDiscardGuard({
     open,
@@ -191,6 +192,7 @@ export function Modal({
 
   return (
     <Dialog
+      {...rest}
       open={open}
       onOpenChange={(v) => {
         if (!v) guardedClose();

package/src/react/components/MultiSelectField.tsx

@@ -41,9 +41,11 @@ export function MultiSelectField({
   'aria-describedby': ariaDescribedBy,
   className,
   size = 'md',
+  ...rest
 }: MultiSelectFieldProps) {
   return (
     <ComboboxField
+      {...rest}
       multiple
       value={value}
       onChange={onChange}

package/src/react/components/OnlineDot.tsx

@@ -13,10 +13,10 @@ export interface OnlineDotProps {
  * A small presence dot: green (`bg-success`) when the user is online, muted gray
  * otherwise. Pair with the app's own presence/WebSocket hook to drive `online`.
  */
-export function OnlineDot({ online, className, label }: OnlineDotProps) {
+export function OnlineDot({ online, className, label, ...rest }: OnlineDotProps) {
   const text = label ?? (online ? 'Online' : 'Offline');
   return (
-    <Tooltip content={text}>
+    <Tooltip {...rest} content={text}>
       <span
         aria-label={text}
         role='img'

package/src/react/components/OtpInput.tsx

@@ -58,6 +58,7 @@ export function OtpInput({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   className,
+  ...rest
 }: OtpInputProps) {
   const reactId = useId();
   const baseId = id ?? reactId;
@@ -132,7 +133,7 @@ export function OtpInput({
 
   return (
     // biome-ignore lint/a11y/useSemanticElements: a labeled group of code boxes, not a form fieldset
-    <div className={cn('flex items-center gap-2', className)} role='group' aria-label={ariaLabel}>
+    <div {...rest} className={cn('flex items-center gap-2', className)} role='group' aria-label={ariaLabel}>
       {chars.map((char, i) => (
         <input
           // guardrails-ignore no-raw-inputs: this IS the specialized Field-family OTP

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

@@ -34,6 +34,7 @@ describe('PageContainer width — LAY-1, the page type picks the width (task 246
     ['form', '640', 'max-w-[var(--page-w-form)]'],
     ['dashboard', '1152', 'max-w-[var(--page-w-dashboard)]'],
     ['wide', '1536', 'max-w-[var(--page-w-wide)]'],
+    ['fluid', '2304', 'max-w-[var(--page-w-fluid)]'],
     ['prose', '800', 'max-w-[var(--reading-width)]'],
   ] as const)('%s → %spx through its token', (width, px, cls) => {
     const { container } = render(<PageContainer width={width}>x</PageContainer>);

package/src/react/components/Page.tsx

@@ -24,6 +24,14 @@ const PAGE_WIDTH = {
   dashboard: { px: 1152, className: 'max-w-[var(--page-w-dashboard)]' },
   /** History tables and library grids, the pages that need it — 1536px. */
   wide: { px: 1536, className: 'max-w-[var(--page-w-wide)]' },
+  /**
+   * Dense operational data that is read ACROSS — a console's graph groups, a quota matrix, a
+   * task's text beside its list — 2304px: the screen up to a 2560 monitor less its gutters, so a
+   * wide display shows more rather than a wider margin. The owner, 2026-10-20 (forge task
+   * station-evolution): *"use all space wisely, expand content on a widescreen"*. Prose and forms
+   * never take it (LAY-1 keeps their measure); a page that is one table or chart group may.
+   */
+  fluid: { px: 2304, className: 'max-w-[var(--page-w-fluid)]' },
   /** Prose — the same 800px `--reading-width` as {@link ReadableColumn}. */
   prose: { px: 800, className: 'max-w-[var(--reading-width)]' },
 } as const;
@@ -152,11 +160,13 @@ export function PageHeader({
   sticky = false,
   level = 1,
   className,
+  ...rest
 }: PageHeaderProps) {
   const Heading = level === 2 ? 'h2' : 'h1';
   const inContainer = useContext(InPageContainer);
   return (
     <Split
+      {...rest}
       className={cn(
         // Wrap on narrow screens so the actions drop below the title instead of
         // pushing off-viewport (phone-overflow bug class).

package/src/react/components/PageGuideButton.tsx

@@ -52,7 +52,7 @@ function loadPageGuide(): Promise<PageGuidePopoverComponent> {
 type Early = 'none' | 'focus' | 'press';
 
 /** The "Guide" button and its popover. */
-export function PageGuideButton({ children, label = 'Guide', className }: PageGuideButtonProps) {
+export function PageGuideButton({ children, label = 'Guide', className, ...rest }: PageGuideButtonProps) {
   // `() => loadedImpl`: a component IS a function, and `useState(fn)` would call it.
   const [Impl, setImpl] = useState<PageGuidePopoverComponent | null>(() => loadedImpl);
   // State, not a ref, so the render that swaps the real trigger in reads the latest.
@@ -78,7 +78,7 @@ export function PageGuideButton({ children, label = 'Guide', className }: PageGu
 
   if (Impl) {
     return (
-      <Impl label={label} className={className} initialOpen={early === 'press'} initialFocus={early === 'focus'}>
+      <Impl {...rest} label={label} className={className} initialOpen={early === 'press'} initialFocus={early === 'focus'}>
         {children}
       </Impl>
     );
@@ -86,6 +86,7 @@ export function PageGuideButton({ children, label = 'Guide', className }: PageGu
   // The same button the popover renders, so nothing moves or changes when it is swapped in.
   return (
     <Button
+      {...rest}
       variant='ghost'
       size='sm'
       tooltip='How this page works'

package/src/react/components/PageGuidePopover.tsx

@@ -18,7 +18,7 @@ export interface PageGuidePopoverProps extends PageGuideButtonProps {
  * The guide's popover — Radix Popover and its positioning engine. Loaded by
  * `PageGuideButton.tsx`, which says why it is a chunk of its own.
  */
-export function PageGuidePopover({ children, label, className, initialOpen = false, initialFocus = false }: PageGuidePopoverProps) {
+export function PageGuidePopover({ children, label, className, initialOpen = false, initialFocus = false, ...rest }: PageGuidePopoverProps) {
   const [open, setOpen] = useState(initialOpen);
   const trigger = useRef<HTMLButtonElement | null>(null);
   // Once, on mount: the swap from the placeholder must not drop a keyboard user's place.
@@ -28,6 +28,7 @@ export function PageGuidePopover({ children, label, className, initialOpen = fal
   }, []);
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       label={label}

package/src/react/components/PanelGrid.tsx

@@ -123,13 +123,14 @@ export function PanelGrid({
   separatorVariant = 'line',
   mobileStack = true,
   className,
+  ...rest
 }: PanelGridProps) {
   const isMobile = useMediaQuery('(max-width: 639px)');
   const flatLeaves = useMemo(() => leavesOf(root), [root]);
 
   if (mobileStack && isMobile) {
     return (
-      <div className={cn('flex flex-col', className)}>
+      <div {...rest} className={cn('flex flex-col', className)}>
         {flatLeaves.map((leaf) => (
           <div key={leaf.id} className={cn('min-h-0', leaf.className)}>
             {leaf.content}
@@ -141,6 +142,7 @@ export function PanelGrid({
 
   return (
     <GridSplit
+      {...rest}
       node={root}
       storageKey={storageKey}
       disabled={disabled}

package/src/react/components/PanelSeparator.tsx

@@ -42,11 +42,13 @@ export function PanelSeparator({
   variant = 'line',
   withHandle = true,
   className,
+  ...rest
 }: PanelSeparatorProps) {
   const isH = direction === 'horizontal';
   const isGutter = variant === 'gutter';
   return (
     <Separator
+      {...rest}
       disabled={disabled}
       className={cn(
         'group/sep relative shrink-0 transition-colors',

package/src/react/components/PathText.tsx

@@ -79,6 +79,7 @@ export function PathText({
   editorLabel = 'Open in editor',
   busy = false,
   className,
+  ...rest
 }: PathTextProps): JSX.Element {
   const idx = path.lastIndexOf(separator);
   // Keep the separator with the head so the tail is the bare basename.
@@ -87,6 +88,7 @@ export function PathText({
 
   return (
     <span
+      {...rest}
       // The chip's PAINT (`CODE_CHIP_CLASS`), not the chip component: a path has its
       // own head/tail layout for the middle ellipsis, and `CodeChip` takes a plain
       // string so that `copyable` has something to copy.

package/src/react/components/PointerDrag.tsx

@@ -238,10 +238,11 @@ export interface DragGhostProps {
 }
 
 /** The dragged thing, lifted and following the pointer. Renders nothing while nothing is dragged. */
-export function DragGhost({ drag, children, className }: DragGhostProps) {
+export function DragGhost({ drag, children, className, ...rest }: DragGhostProps) {
   if (!drag) return null;
   return (
     <div
+      {...rest}
       aria-hidden
       className={className ? `cb-dragghost ${className}` : 'cb-dragghost'}
       data-testid="drag-ghost"

package/src/react/components/Popover.tsx

@@ -117,6 +117,7 @@ export function Popover({
   autoFocus = true,
   label,
   role,
+  ...rest
 }: PopoverProps) {
   const container = useFloatingContainer();
   const showArrow = arrow ?? !unstyled;
@@ -166,6 +167,7 @@ export function Popover({
 
   const content = (
     <RPopover.Content
+      {...rest}
       align={align}
       side={side}
       sideOffset={sideOffset}
@@ -219,6 +221,6 @@ export function Popover({
  * Wrap a control inside a {@link Popover}'s panel so pressing it also closes the panel —
  * for an uncontrolled popover whose items should dismiss it.
  */
-export function PopoverClose({ children }: { children: ReactNode }) {
-  return <RPopover.Close asChild>{children}</RPopover.Close>;
+export function PopoverClose(props: { children: ReactNode }) {
+  return <RPopover.Close asChild {...props} />;
 }

package/src/react/components/Progress.tsx

@@ -32,12 +32,14 @@ export function Progress({
   'aria-label': ariaLabel,
   indicatorClassName,
   className,
+  ...rest
 }: ProgressProps) {
   const clamped =
     value == null ? null : Math.min(max, Math.max(0, Number.isFinite(value) ? value : 0));
   const pct = clamped == null ? null : max > 0 ? (clamped / max) * 100 : 0;
   return (
     <RadixProgress.Root
+      {...rest}
       value={clamped}
       max={max}
       aria-label={ariaLabel}
@@ -91,6 +93,7 @@ export function ProgressRing({
   children,
   indicatorClassName,
   className,
+  ...rest
 }: ProgressRingProps) {
   const clamped = Math.min(max, Math.max(0, Number.isFinite(value) ? value : 0));
   const radius = (diameter - strokeWidth) / 2;
@@ -98,6 +101,7 @@ export function ProgressRing({
   const ratio = max > 0 ? clamped / max : 0;
   return (
     <div
+      {...rest}
       role='progressbar'
       aria-valuenow={clamped}
       aria-valuemin={0}

package/src/react/components/PromptDialog.tsx

@@ -42,6 +42,7 @@ export function PromptDialog({
   cancelLabel = 'Cancel',
   loading = false,
   className,
+  ...rest
 }: PromptDialogProps) {
   const [value, setValue] = useState(defaultValue);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -52,6 +53,7 @@ export function PromptDialog({
 
   return (
     <Dialog
+      {...rest}
       open={open}
       onOpenChange={(v) => {
         if (!v) onCancel();

package/src/react/components/PropertyPicker.tsx

@@ -112,6 +112,12 @@ export function PropertyPicker(props: PropertyPickerProps) {
     shortcutScope,
     disabled,
     className,
+    // Named so they stay off the trigger button: the discriminated union's own shape,
+    // read via `props.multiple`/`props.value`/`props.onChange` below, never off this object.
+    multiple: _multiple,
+    value: _value,
+    onChange: _onChange,
+    ...rest
   } = props;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -180,6 +186,7 @@ export function PropertyPicker(props: PropertyPickerProps) {
       label={name}
       trigger={
         <Button
+          {...rest}
           type='button'
           variant='ghost'
           size='sm'

package/src/react/components/QueryBoundary.tsx

@@ -48,6 +48,7 @@ const toError = (e: unknown): Error =>
  * state is an `<Alert tone="error">`; pass `errorFallback` (node or `(error) =>
  * node`) to customize.
  */
+// no-attribute-forward: a Suspense and error boundary around its children, with no element of its own.
 export const QueryBoundary = ({
   query,
   queries,

package/src/react/components/RatingField.tsx

@@ -33,6 +33,7 @@ export function RatingField({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   className,
+  ...rest
 }: RatingFieldProps) {
   const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
@@ -50,6 +51,7 @@ export function RatingField({
 
   return (
     <div
+      {...rest}
       id={id}
       role='radiogroup'
       aria-invalid={ariaInvalid}

package/src/react/components/ReactionBar.tsx

@@ -28,9 +28,9 @@ export interface ReactionBarProps {
  *
  * Works on any social subject; wire it up with app-specific query/mutation hooks.
  */
-export function ReactionBar({ emojis = [], myReaction, onReact, className }: ReactionBarProps) {
+export function ReactionBar({ emojis = [], myReaction, onReact, className, ...rest }: ReactionBarProps) {
   return (
-    <div className={cn('flex flex-wrap items-center gap-1', className)}>
+    <div {...rest} className={cn('flex flex-wrap items-center gap-1', className)}>
       {emojis.map((g) => {
         const mine = myReaction === g.emoji;
         return (

package/src/react/components/ReactionPicker.tsx

@@ -32,9 +32,10 @@ function AddReactionTrigger() {
  * Drop it anywhere a `+` emoji reaction button is needed. For the ReactionBar the
  * trigger is built in; for custom placements pass your own `trigger`.
  */
-export function ReactionPicker({ onPick, trigger, open, onOpenChange }: ReactionPickerProps) {
+export function ReactionPicker({ onPick, trigger, open, onOpenChange, ...rest }: ReactionPickerProps) {
   return (
     <EmojiPicker
+      {...rest}
       onSelect={onPick}
       trigger={trigger ?? <AddReactionTrigger />}
       open={open}

package/src/react/components/RenderField.tsx

@@ -16,10 +16,11 @@ export interface RenderFieldProps {
  * id/aria down via its render-prop child (cloneElement can't reach a control created
  * deeper in a render function).
  */
-export function RenderField({ spec }: RenderFieldProps) {
+export function RenderField({ spec, ...rest }: RenderFieldProps) {
   const { control } = useFormContext();
   return (
     <Field
+      {...rest}
       name={spec.key}
       label={spec.label}
       hint={spec.hint}

package/src/react/components/ResponsiveWorkbench.tsx

@@ -127,6 +127,7 @@ export function ResponsiveWorkbench({
   mobilePanels = 'drawers',
   mobileSwipeOpens,
   className,
+  ...rest
 }: ResponsiveWorkbenchProps) {
   const isDesktop = useWorkbenchBreakpoint(breakpoint);
   const [leftOpen, setLeftOpen] = useOpenState(leftOpenProp, onLeftOpenChange, defaultLeftOpen);
@@ -142,7 +143,7 @@ export function ResponsiveWorkbench({
   return (
     // A workbench spans the screen by design — LAY-1's `full` row (canvas, studio, workbench),
     // declared so the audit does not read it as an unbounded page (forge task 2594).
-    <div data-cb-page-width='full' className={cn('relative flex min-h-0 flex-1 flex-col overflow-hidden', className)}>
+    <div {...rest} data-cb-page-width='full' className={cn('relative flex min-h-0 flex-1 flex-col overflow-hidden', className)}>
       <div className='flex min-h-0 flex-1 overflow-hidden'>
         {left &&
           (isDesktop ? (

package/src/react/components/RevealAction.tsx

@@ -44,6 +44,7 @@ export function RevealAction({
   onOpenChange,
   icon,
   className,
+  ...rest
 }: RevealActionProps) {
   const [uncontrolled, setUncontrolled] = useState(defaultOpen);
   const open = controlled ?? uncontrolled;
@@ -59,6 +60,7 @@ export function RevealAction({
   if (!open) {
     return (
       <button
+        {...rest}
         // guardrails-ignore no-raw-action-button: a disclosure door — it reveals a control,
         // mutates nothing, and must draw without Tailwind.
         type='button'
@@ -77,7 +79,7 @@ export function RevealAction({
   }
 
   return (
-    <div ref={region} className={className}>
+    <div {...rest} ref={region} className={className}>
       {children}
     </div>
   );