cursedbelt 5.81.2 → 5.85.0

package/src/react/components/auth/SignInCard.tsx

@@ -88,6 +88,7 @@ export function SignInCard({
   children,
   footer,
   chrome = 'aurora',
+  ...rest
 }: SignInCardProps) {
   // A refusal plus somewhere else to go: the other account leads, because retrying as the
   // account that was just refused would be refused again.
@@ -105,7 +106,7 @@ export function SignInCard({
     </Button>
   ) : null;
   return (
-    <AuthCard aurora={chrome === 'aurora'} title={title} subtitle={subtitle} logo={logo} footer={footer}>
+    <AuthCard {...rest} aurora={chrome === 'aurora'} title={title} subtitle={subtitle} logo={logo} footer={footer}>
       <div className='flex flex-col gap-4'>
         {refusal ? (
           <Alert tone='warning' title={refusalTitle}>

package/src/react/components/auth/SignupForm.tsx

@@ -62,6 +62,7 @@ export function SignupForm({
   footer,
   notice,
   children,
+  ...rest
 }: SignupFormProps) {
   const hasTerms = terms != null;
   const schema = useMemo(
@@ -98,6 +99,7 @@ export function SignupForm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

package/src/react/components/auth/TotpEntry.tsx

@@ -47,6 +47,7 @@ export function TotpEntry({
   autoSubmit = true,
   footer,
   notice,
+  ...rest
 }: TotpEntryProps) {
   const [recovery, setRecovery] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
@@ -89,6 +90,7 @@ export function TotpEntry({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       formRef={formRef}
       onSubmit={submit}

package/src/react/components/auth/fields.tsx

@@ -36,6 +36,7 @@ export function AuthTextField({
   autoFocus,
   disabled,
   inputMode,
+  ...rest
 }: AuthTextFieldProps) {
   const { register } = useFormContext();
   return (
@@ -45,7 +46,7 @@ export function AuthTextField({
     // on nothing. The browser reachability gate caught it on "Create an
     // account". Reserving the row means the error appears without moving
     // anything.
-    <Field name={name} label={label} description={description} required={required} reserveErrorSpace>
+    <Field {...rest} name={name} label={label} description={description} required={required} reserveErrorSpace>
       <Input
         type={type}
         autoComplete={autoComplete}
@@ -86,10 +87,11 @@ export function AuthPasswordField({
   required,
   autoFocus,
   status,
+  ...rest
 }: AuthPasswordFieldProps) {
   const { control } = useFormContext();
   return (
-    <Field name={name} label={label} description={description} required={required} reserveErrorSpace status={status}>
+    <Field {...rest} name={name} label={label} description={description} required={required} reserveErrorSpace status={status}>
       {(aria) => (
         <Controller
           name={name}

package/src/react/components/calendar/CalendarLegend.tsx

@@ -33,11 +33,12 @@ export function CalendarLegend({
   onToggle,
   'aria-label': ariaLabel = 'Show calendars',
   className,
+  ...rest
 }: CalendarLegendProps) {
   if (calendars.length <= 1) return null;
 
   return (
-    <fieldset aria-label={ariaLabel} className={cn('flex flex-wrap gap-2 border-0 p-0', className)}>
+    <fieldset {...rest} aria-label={ariaLabel} className={cn('flex flex-wrap gap-2 border-0 p-0', className)}>
       {calendars.map((cal) => {
         const isHidden = hidden.has(cal.id);
         const { dot, dotStyle } = calendarColorClasses(cal.color);

package/src/react/components/calendar/DayAgenda.tsx

@@ -45,6 +45,7 @@ export function DayAgenda({
   onSelectOccurrence,
   onAdd,
   className,
+  ...rest
 }: DayAgendaProps) {
   const dayKey = dayKeyOf(dayDate.getTime());
   const occurrences = filterOccurrences(
@@ -55,7 +56,7 @@ export function DayAgenda({
   const hasContent = occurrences.length > 0 || holidays.length > 0;
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div {...rest} className={cn('flex flex-col gap-2', className)}>
       {/* Header */}
       <div className='flex items-center justify-between gap-2'>
         <h2 className='text-sm font-semibold text-foreground'>{fmtDayLong(dayKey)}</h2>

package/src/react/components/calendar/EventChip.tsx

@@ -22,7 +22,7 @@ export interface EventChipProps {
  * Apple Calendar's and Google Calendar's phone month views both drop the time for the title; the
  * time stays in the accessible name and the tooltip, and the week and day views show it.
  */
-export function EventChip({ occurrence, onClick, color }: EventChipProps) {
+export function EventChip({ occurrence, onClick, color, ...rest }: EventChipProps) {
   const { event } = occurrence;
   const resolvedColor = color ?? event.color;
   const { chip, chipStyle } = calendarColorClasses(resolvedColor);
@@ -35,7 +35,7 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
   const label = pending ? `${named} — not yet on your work calendar` : named;
 
   return (
-    <Tooltip content={label} className='block w-full' multiline={pending}>
+    <Tooltip {...rest} content={label} className='block w-full' multiline={pending}>
       <button
         // guardrails-ignore no-raw-action-button: already wrapped in this file's own
         // Tooltip (multiline, for the "pending timeoff" warning) — Button/IconButton

package/src/react/components/calendar/MonthGrid.tsx

@@ -66,13 +66,14 @@ export function MonthGrid({
   dayActionReveal = 'hover',
   renderHoliday,
   className,
+  ...rest
 }: MonthGridProps) {
   const cells = monthMatrix(monthDate.getFullYear(), monthDate.getMonth(), weekStart);
   const today = todayKey();
   const clickable = Boolean(onSelectDay);
 
   return (
-    <Surface asChild level='flat' pad='none' radius='xl' className={cn('overflow-hidden bg-card', className)}>
+    <Surface {...rest} asChild level='flat' pad='none' radius='xl' className={cn('overflow-hidden bg-card', className)}>
     <section
       aria-label='Month calendar'
     >

package/src/react/components/calendar/WeekView.tsx

@@ -54,6 +54,7 @@ export function WeekView({
   onSelectOccurrence,
   onSelectDay,
   className,
+  ...rest
 }: WeekViewProps) {
   const days = weekKeys(weekDate, weekStart);
   const rangeStart = dayStartMs(days[0]!);
@@ -63,7 +64,7 @@ export function WeekView({
   const labels = WEEKDAY_LABELS[weekStart];
 
   return (
-    <Surface level="flat" pad="none" radius="xl" className={cn('overflow-hidden bg-card', className)}>
+    <Surface {...rest} level="flat" pad="none" radius="xl" className={cn('overflow-hidden bg-card', className)}>
       {/* Weekday header with date numbers */}
       {/* The month grid's rules (MonthGrid.tsx): a softened header line and /40 inner rules, so the
           two views of one calendar draw the same grid (forge task 2591). */}

package/src/react/components/fieldErrorText.tsx

@@ -7,9 +7,9 @@ import type { ReactNode } from 'react';
  * label is the checkbox's own) draws this, so its error reads like every other one (forge task
  * 2466 found that checkbox's error with no icon, as a bare red line).
  */
-export function FieldErrorText({ id, children }: { id?: string; children: ReactNode }) {
+export function FieldErrorText({ id, children, ...rest }: { id?: string; children: ReactNode }) {
   return (
-    <p id={id} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
+    <p {...rest} id={id} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
       <AlertCircle className='size-4 shrink-0' aria-hidden />
       {children}
     </p>

package/src/react/components/filterChip.tsx

@@ -13,9 +13,10 @@ export interface ChipProps {
   children: ReactNode;
 }
 
-export function Chip({ active, onClick, children }: ChipProps) {
+export function Chip({ active, onClick, children, ...rest }: ChipProps) {
   return (
     <button
+      {...rest}
       // guardrails-ignore no-raw-action-button: presentational filter-chip toggle —
       // reflects local filter state (aria-pressed), no destructive/mutating intent.
       type='button'

package/src/react/components/layout.tsx

@@ -79,15 +79,15 @@ export function Sidebar({
 }
 
 /** Visual ruler — a thin separator, optionally with a centered label. */
-export function Divider({ label, className }: { label?: string; className?: string }) {
+export function Divider({ label, className, ...rest }: { label?: string; className?: string }) {
   if (label) {
     return (
-      <div className={cn('flex items-center gap-3 text-xs text-muted-foreground', className)}>
+      <div {...rest} className={cn('flex items-center gap-3 text-xs text-muted-foreground', className)}>
         <hr className='flex-1 border-border' />
         {label}
         <hr className='flex-1 border-border' />
       </div>
     );
   }
-  return <hr className={cn('border-border', className)} />;
+  return <hr {...rest} className={cn('border-border', className)} />;
 }

package/src/react/components/sharing/RecipientAvatar.tsx

@@ -30,10 +30,11 @@ export interface RecipientAvatarProps {
  * Avatar for a share {@link ShareRecipient}: a round {@link Avatar} for a user, an
  * accent-tinted square chip with initials for a group. Internal to the sharing kit.
  */
-export function RecipientAvatar({ recipient, size = 'sm', className }: RecipientAvatarProps) {
+export function RecipientAvatar({ recipient, size = 'sm', className, ...rest }: RecipientAvatarProps) {
   if (recipient.kind === 'group') {
     return (
       <span
+        {...rest}
         className={cn(
           'inline-flex shrink-0 items-center justify-center rounded-md',
           'bg-accent/15 font-semibold text-accent-strong',
@@ -49,6 +50,7 @@ export function RecipientAvatar({ recipient, size = 'sm', className }: Recipient
   }
   return (
     <Avatar
+      {...rest}
       name={recipient.name}
       email={recipient.email}
       src={recipient.avatarUrl}

package/src/react/components/sharing/RecipientPicker.tsx

@@ -45,6 +45,7 @@ export function RecipientPicker({
   maxResults = 8,
   emptyMessage = 'No matching people or groups.',
   className,
+  ...rest
 }: RecipientPickerProps) {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<ShareRecipient[]>([]);
@@ -91,7 +92,7 @@ export function RecipientPicker({
   const showDropdown = trimmed !== '';
 
   return (
-    <div className={cn('relative', className)}>
+    <div {...rest} className={cn('relative', className)}>
       <div className='relative'>
         <Search
           className='pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground'

package/src/react/components/sharing/ShareDialog.tsx

@@ -21,11 +21,8 @@ export interface ShareSurfaceProps extends ShareEditorProps {
 
 function ShareBody({
   resourceLabel,
-  editor,
-}: {
-  resourceLabel?: string;
-  editor: ShareEditorProps;
-}) {
+  ...editor
+}: ShareEditorProps & { resourceLabel?: string }) {
   return (
     <>
       {resourceLabel && (
@@ -54,18 +51,6 @@ function ShareFooter({ shareLink, onClose }: { shareLink?: string; onClose: () =
   );
 }
 
-/** Splits {@link ShareSurfaceProps} into the surface controls and the editor props. */
-function splitEditorProps({
-  open: _open,
-  onClose: _onClose,
-  title: _title,
-  resourceLabel: _resourceLabel,
-  shareLink: _shareLink,
-  ...editor
-}: ShareSurfaceProps): ShareEditorProps {
-  return editor;
-}
-
 export type ShareDialogProps = ShareSurfaceProps;
 export type ShareSheetProps = ShareSurfaceProps;
 
@@ -75,8 +60,12 @@ export type ShareSheetProps = ShareSurfaceProps;
  * {@link ShareSheet} (mobile bottom sheet) — {@link ShareControl} picks between them.
  */
 export function ShareDialog(props: ShareDialogProps) {
-  const { open, onClose, title = 'Share', resourceLabel, shareLink } = props;
-  const editor = splitEditorProps(props);
+  // Everything not named here is {@link ShareEditorProps} (the editor's own declared
+  // props, forwarded on) plus whatever the caller added that nothing here names at
+  // all — `rest` carries both, and `ShareEditor`'s own `...rest` is what finally
+  // separates its declared props from a true extra and spreads the latter onto its
+  // root `<div>` (see that file's `resource: _resource` comment).
+  const { open, onClose, title = 'Share', resourceLabel, shareLink, ...rest } = props;
   return (
     <Modal
       open={open}
@@ -86,7 +75,7 @@ export function ShareDialog(props: ShareDialogProps) {
       // guardrails-ignore no-raw-modal-footer: ShareFooter wraps ActionBar internally
       footer={<ShareFooter shareLink={shareLink} onClose={onClose} />}
     >
-      <ShareBody resourceLabel={resourceLabel} editor={editor} />
+      <ShareBody {...rest} resourceLabel={resourceLabel} />
     </Modal>
   );
 }
@@ -96,8 +85,7 @@ export function ShareDialog(props: ShareDialogProps) {
  * {@link ShareEditor} in a bottom {@link Drawer}. Same props as {@link ShareDialog}.
  */
 export function ShareSheet(props: ShareSheetProps) {
-  const { open, onClose, title = 'Share', resourceLabel, shareLink } = props;
-  const editor = splitEditorProps(props);
+  const { open, onClose, title = 'Share', resourceLabel, shareLink, ...rest } = props;
   return (
     <Drawer
       open={open}
@@ -108,7 +96,7 @@ export function ShareSheet(props: ShareSheetProps) {
       // guardrails-ignore no-raw-modal-footer: ShareFooter wraps ActionBar internally
       footer={<ShareFooter shareLink={shareLink} onClose={onClose} />}
     >
-      <ShareBody resourceLabel={resourceLabel} editor={editor} />
+      <ShareBody {...rest} resourceLabel={resourceLabel} />
     </Drawer>
   );
 }

package/src/react/components/sharing/ShareEditor.tsx

@@ -153,6 +153,9 @@ export function ShareEditor({
   onRevoke,
   emptyMessage = 'Not shared with anyone yet.',
   className,
+  // Named so it stays off the root `<div>`: the handlers already carry the resource.
+  resource: _resource,
+  ...rest
 }: ShareEditorProps) {
   const excludeIds = grants.map((g) => g.recipient.id);
   // Groups first, then people (matches RecipientPicker ordering).
@@ -162,7 +165,7 @@ export function ShareEditor({
   ];
 
   return (
-    <div className={cn('space-y-4', className)}>
+    <div {...rest} className={cn('space-y-4', className)}>
       <RecipientPicker loadRecipients={loadRecipients} onPick={onAdd} excludeIds={excludeIds} />
 
       <div>

package/src/react/components/sharing/SharedWithUserDialog.tsx

@@ -125,11 +125,12 @@ export function SharedWithUserDialog({
   onRevoke,
   onOpenItem,
   emptyMessage = 'Nothing shared with them yet.',
+  ...rest
 }: SharedWithUserDialogProps) {
   const subtitle = recipientSubtitle(recipient);
 
   return (
-    <Modal open={open} onClose={onClose} size='md' title='Shared items'>
+    <Modal {...rest} open={open} onClose={onClose} size='md' title='Shared items'>
       <div className='flex items-center gap-3'>
         <RecipientAvatar recipient={recipient} size='md' />
         <div className='min-w-0'>

package/src/react/dashboard-grid/DashboardGrid.tsx

@@ -255,6 +255,7 @@ export function DashboardGrid({
   cols,
   keyboardMoveEnabled = false,
   className,
+  ...rest
 }: DashboardGridProps) {
   const { width, containerRef, mounted } = useContainerWidth({ initialWidth: 1280 });
 
@@ -340,7 +341,7 @@ export function DashboardGrid({
   );
 
   return (
-    <div ref={containerRef} className={cn('w-full', className)}>
+    <div {...rest} ref={containerRef} className={cn('w-full', className)}>
       {mounted && (
         <ResponsiveGridLayout<DashboardBreakpoint>
           width={width}

package/src/react/dashboard-grid/WidgetFrame.tsx

@@ -51,6 +51,7 @@ export function WidgetFrame({
   keyboardLabel,
   children,
   className,
+  ...rest
 }: WidgetFrameProps) {
   const hasHeader =
     title !== undefined ||
@@ -61,6 +62,7 @@ export function WidgetFrame({
 
   return (
     <Surface
+      {...rest}
       level="flat" pad="none" radius="md" className={cn('flex h-full flex-col overflow-hidden', className)}
     >
       {hasHeader && (

package/src/react/deep-link/links.spec.ts

@@ -83,9 +83,23 @@ describe('apply — the collision guarantee', () => {
     expect(links.apply(at, { params: { tab: 'info' } }).params).toEqual({ tab: 'info' });
   });
 
-  test('null removes a key, undefined is ignored', () => {
+  test('null removes a key; so does a key written as undefined; an absent key is left alone', () => {
     const at = links.parse('#/?folder=Main%201&track=75');
-    expect(links.apply(at, { params: { folder: null, track: undefined } }).params).toEqual({ track: '75' });
+    expect(links.apply(at, { params: { folder: null } }).params).toEqual({ track: '75' });
+    expect(links.apply(at, { params: { track: undefined } }).params).toEqual({ folder: 'Main 1' });
+    expect(links.apply(at, { params: {} }).params).toEqual({ folder: 'Main 1', track: '75' });
+  });
+
+  /**
+   * 🔴 The failure path (forge task station-evolution, 2026-10-20): a controlled tab strip that
+   * returns to its first tab with `{ tab: undefined }`. Skipped, the URL kept the old tab and the
+   * strip re-read it, so the first tab could never be reopened — station's Performance and Inbox.
+   */
+  test('🔴 returning to a default tab with { tab: undefined } clears it from the URL', () => {
+    const at = links.parse('#/albums/1?tab=agents');
+    const next = links.apply(at, { params: { tab: undefined } });
+    expect(next.params).toEqual({});
+    expect(links.format(next)).toBe('#/albums/1');
   });
 
   test('foreign keys survive a param change and are dropped on a view change', () => {

package/src/react/deep-link/links.ts

@@ -79,7 +79,16 @@ export interface DeepLinkLocation<V extends string = string> {
 export interface DeepLinkPatch<V extends string = string> {
   view?: V;
   path?: readonly string[];
-  /** Merged into the current params. `null` REMOVES a key; `undefined` is ignored. */
+  /**
+   * Merged into the current params. `null` REMOVES a key, and so does a key written as
+   * `undefined` — `{ tab: undefined }` means "no tab", which is what every caller who wrote it
+   * meant. A key that is simply ABSENT from the patch is left alone.
+   *
+   * 🔴 Until 2026-10-20 an explicit `undefined` was skipped, and that was a bug in every app at
+   * once: station's Performance tabs wrote `{ tab: undefined }` to return to the first tab, the
+   * URL kept `?tab=agents`, the controlled `Tabs` re-read it, and the Trends tab could never be
+   * reopened (forge task station-evolution). Inbox's `?tab=corrections` stuck the same way.
+   */
   params?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   /** Replace the params outright rather than merging. */
   resetParams?: boolean;
@@ -266,14 +275,14 @@ export function defineDeepLinks<V extends string>(options: DeepLinksOptions<V>):
     const merged: Record<string, string> = {};
     if (!patch.resetParams && !changingView) Object.assign(merged, current.params);
     for (const [key, value] of Object.entries(patch.params ?? {})) {
-      if (value === undefined) continue;
       if (!own.has(key)) {
         const message = `[deep-link] view "${view}" does not declare the query key "${key}" — add it to its \`params\` or use a key it owns.`;
         if (isDev()) throw new Error(message);
         console.warn(message);
         continue;
       }
-      if (value === null) delete merged[key];
+      // An explicit `undefined` is a removal too — see `DeepLinkPatch.params`.
+      if (value === null || value === undefined) delete merged[key];
       else merged[key] = String(value);
     }
     return {

package/src/react/deep-link/useDeepLink.tsx

@@ -74,6 +74,7 @@ export interface DeepLinkProviderProps<V extends string> {
   normalize?: boolean;
 }
 
+// no-attribute-forward: a context provider; it renders only its children.
 export function DeepLinkProvider<V extends string>({
   links,
   children,

package/src/react/diff-viewer/DiffViewer.tsx

@@ -94,6 +94,7 @@ export function DiffViewer({
   className,
   style,
   'aria-label': ariaLabel,
+  ...rest
 }: DiffViewerProps) {
   const resolvedTheme = useDiffTheme(theme === 'auto' ? undefined : theme);
 
@@ -111,6 +112,7 @@ export function DiffViewer({
 
   return (
     <section
+      {...rest}
       className={cn(
         'cb-diff-viewer overflow-hidden rounded-md border border-border bg-background text-sm',
         className,

package/src/react/diff-viewer/TextComparePane.tsx

@@ -71,6 +71,7 @@ export function TextComparePane({
   theme = 'auto',
   className,
   style,
+  ...rest
 }: TextComparePaneProps) {
   const comparisons = useMemo<Comparison[]>(() => {
     if (sources.length < 2) return [];
@@ -91,6 +92,7 @@ export function TextComparePane({
   if (sources.length === 0) {
     return (
       <Surface
+        {...rest}
         level="flat" pad="none" radius="md" className={cn('cb-text-compare bg-muted p-4 text-center text-sm text-muted-foreground', className)}
         style={style}
       >
@@ -103,7 +105,7 @@ export function TextComparePane({
   if (sources.length === 1) {
     const only = sources[0];
     return (
-      <div className={cn('cb-text-compare', className)} style={style}>
+      <div {...rest} className={cn('cb-text-compare', className)} style={style}>
         <DiffViewer
           oldValue={only.content}
           newValue={only.content}
@@ -121,7 +123,7 @@ export function TextComparePane({
   }
 
   return (
-    <div className={cn('cb-text-compare flex flex-col gap-4', className)} style={style}>
+    <div {...rest} className={cn('cb-text-compare flex flex-col gap-4', className)} style={style}>
       {comparisons.map(({ key, old, next }) => {
         const stats = diffStats(old.content, next.content);
         return (

package/src/react/disk-usage/DiskUsageRulesEditor.tsx

@@ -25,6 +25,7 @@ export function DiskUsageRulesEditor({
   onSave,
   saving = false,
   className,
+  ...rest
 }: DiskUsageRulesEditorProps) {
   const [opaque, setOpaque] = useState<string[]>(rules.opaque);
   const [skip, setSkip] = useState<string[]>(rules.skip);
@@ -39,7 +40,7 @@ export function DiskUsageRulesEditor({
   const dirty = !sameList(opaque, rules.opaque) || !sameList(skip, rules.skip);
 
   return (
-    <div className={cn('flex flex-col gap-4', className)}>
+    <div {...rest} className={cn('flex flex-col gap-4', className)}>
       <div className='flex flex-col gap-1.5'>
         <label htmlFor={opaqueId} className='text-sm font-medium text-foreground'>
           Size as a whole (don't itemize inside)

package/src/react/disk-usage/DiskUsageScanControls.tsx

@@ -40,6 +40,7 @@ export function DiskUsageScanControls({
   onAddRoot,
   onRemoveRoot,
   className,
+  ...rest
 }: DiskUsageScanControlsProps) {
   const [newRoot, setNewRoot] = useState('');
   const active = status?.active ?? null;
@@ -55,7 +56,7 @@ export function DiskUsageScanControls({
   };
 
   return (
-    <div className={cn('flex flex-col gap-3', className)}>
+    <div {...rest} className={cn('flex flex-col gap-3', className)}>
       <div className='flex flex-wrap items-center gap-2'>
         <SelectField
           aria-label='Scan root'

package/src/react/disk-usage/DiskUsageSummaryTiles.tsx

@@ -21,12 +21,14 @@ export function DiskUsageSummaryTiles({
   volumes,
   lowSpace = [],
   className,
+  ...rest
 }: DiskUsageSummaryTilesProps) {
   const lowMounts = new Set(lowSpace.map((event) => event.volume.mount));
   // No volumes is a state, not a blank strip where the tiles should be (STA-2, forge task 2594).
   if (volumes.length === 0) {
     return (
       <EmptyState
+        {...rest}
         compact
         icon={<HardDrive className='size-4' />}
         title='No volumes reported'
@@ -36,7 +38,7 @@ export function DiskUsageSummaryTiles({
     );
   }
   return (
-    <StatTileGrid minTileWidth='14rem' className={className}>
+    <StatTileGrid {...rest} minTileWidth='14rem' className={className}>
       {volumes.map((volume) => {
         const low = lowMounts.has(volume.mount);
         return (

package/src/react/disk-usage/DiskUsageTree.tsx

@@ -233,6 +233,7 @@ export function DiskUsageTree({
   onExpandedChange,
   className,
   'aria-label': ariaLabel = 'Disk usage',
+  ...rest
 }: DiskUsageTreeProps) {
   const registry = useRef<Registry>(new Map()).current;
   const wrapRef = useRef<HTMLDivElement | null>(null);
@@ -294,7 +295,7 @@ export function DiskUsageTree({
 
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: the tree's rows are the focusable controls; this only hears their Delete and menu keys.
-    <div ref={wrapRef} className={cn('min-w-0', className)} onKeyDown={onKeyDown}>
+    <div {...rest} ref={wrapRef} className={cn('min-w-0', className)} onKeyDown={onKeyDown}>
       <div className='mb-2 flex items-baseline justify-between gap-3 border-b border-border pb-2'>
         <span className='truncate text-sm font-semibold text-foreground'>{root.path}</span>
         <span className='shrink-0 text-sm tabular-nums text-muted-foreground'>

package/src/react/emoji/EmojiAutocomplete.tsx

@@ -31,6 +31,7 @@ export function EmojiAutocomplete({
   onClose,
   maxResults = 8,
   anchorRef,
+  ...rest
 }: EmojiAutocompleteProps) {
   const [hits, setHits] = useState<EmojiSearchHit[]>([]);
   const [active, setActive] = useState(0);
@@ -110,7 +111,7 @@ export function EmojiAutocomplete({
   // from the field's keys — no listbox/option ARIA roles (and the lint churn they
   // bring) needed for a suggestion popup the caret never leaves.
   return (
-    <FloatingPortal>
+    <FloatingPortal {...rest}>
       <div
         // guardrails-ignore no-hand-rolled-surface: a floating-ui popup panel, positioned by its own `floatingStyles`; Popover owns its own frame the same way
         ref={refs.setFloating}

package/src/react/emoji/EmojiPicker.tsx

@@ -147,6 +147,7 @@ export function EmojiPicker({
   trigger,
   open,
   onOpenChange,
+  ...rest
 }: EmojiPickerProps) {
   const panel = (
     <EmojiPanel
@@ -162,6 +163,7 @@ export function EmojiPicker({
 
   return (
     <Popover
+      {...rest}
       trigger={trigger ?? <DefaultTrigger />}
       open={open}
       onOpenChange={(v) => {

package/src/react/engagement/beacon.tsx

@@ -57,6 +57,7 @@ export function useLocationBeacon(options: ReportPlaceOptions = {}): void {
  * {@link useEngagementBeacon} directly when an app really does know its own
  * place ids.
  */
+// no-attribute-forward: renders nothing; it reports engagement.
 export function EngagementBeacon(props: { basePath?: string }): null {
 	useLocationBeacon(props.basePath ? { basePath: props.basePath } : {});
 	return null;