cursedbelt 5.82.0 → 5.85.0

package/src/react/components/Wizard/ReviewStep.tsx

@@ -43,6 +43,7 @@ export function ReviewStep<T extends FieldValues>({
   form,
   fieldSpecs,
   displayValue,
+  ...rest
 }: ReviewStepProps<T>) {
   const values = form.getValues();
   const labelFor = (key: string): ReactNode => {
@@ -55,7 +56,7 @@ export function ReviewStep<T extends FieldValues>({
   };
 
   return (
-    <Stack gap={6}>
+    <Stack {...rest} gap={6}>
       {steps.map((s) => (
         <Surface key={s.id} level='flat' pad='sm'>
           <Section title={s.title}>

package/src/react/components/Wizard/Stepper.tsx

@@ -54,10 +54,12 @@ export function Stepper({
   compact,
   'aria-label': ariaLabel = 'Form steps',
   className,
+  ...rest
 }: StepperProps) {
   const inert = readOnly || !onJump;
   return (
     <nav
+      {...rest}
       aria-label={ariaLabel}
       data-cb-stepper=''
       // ScrollArea always renders a plain <div> that owns its own ref/style/data-attrs

package/src/react/components/Wizard/Wizard.tsx

@@ -54,6 +54,7 @@ export function Wizard<T extends FieldValues>({
   extraActions,
   labels,
   className,
+  ...rest
 }: WizardProps<T>) {
   // Lazy initializer: load any saved draft synchronously on first render and seed the
   // form with it directly — no defaults-then-reset flash, no mount effect to lint around.
@@ -175,7 +176,7 @@ export function Wizard<T extends FieldValues>({
   }
 
   return (
-    <FormProvider {...form}>
+    <FormProvider {...rest} {...form}>
       <form
         noValidate
         data-cb-wizard=''

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

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { ExternalLink } from './ExternalLink.js';
+import { KeyBadge } from './KeyBadge.js';
+import { MeterList } from './MeterList.js';
+import { StatStrip } from './StatStrip.js';
+import { StatTile } from './StatTile.js';
+
+afterEach(cleanup);
+
+/**
+ * 🔴 The roots the 3451 codemod could not edit blindly — conditional, variable and call roots —
+ * each forward a `data-testid` on EVERY branch they render (forge task 3452). The AST check
+ * (`scripts/attributesForwarded.ts`) proves a rest is spread; this proves it reaches the DOM.
+ */
+describe('a data-testid reaches the DOM on every branch', () => {
+  test('KeyBadge — alone, and wrapped with its description', () => {
+    expect(render(<KeyBadge data-testid='bare'>K</KeyBadge>).getByTestId('bare').textContent).toBe('K');
+    const wrapped = render(
+      <KeyBadge data-testid='described' description='what it does'>
+        K
+      </KeyBadge>,
+    ).getByTestId('described');
+    expect(wrapped.textContent).toContain('what it does');
+  });
+
+  test('ExternalLink — a URL, and a value that is not one', () => {
+    expect(render(<ExternalLink data-testid='link' url='https://example.com' />).getByTestId('link').tagName).toBe('A');
+    expect(render(<ExternalLink data-testid='not-a-link' url='not a url' />).getByTestId('not-a-link').tagName).not.toBe('A');
+  });
+
+  test('MeterList — flat and on its surface', () => {
+    const items = [{ label: 'CPU', value: '3%' }];
+    expect(render(<MeterList data-testid='flat' flat items={items} />).getByTestId('flat').textContent).toContain('CPU');
+    expect(render(<MeterList data-testid='surface' items={items} />).getByTestId('surface').textContent).toContain('CPU');
+  });
+
+  test('StatStrip and StatTile', () => {
+    expect(render(<StatStrip data-testid='strip' items={[{ label: 'Tasks', value: 3 }]} />).getByTestId('strip').textContent).toContain('Tasks');
+    expect(render(<StatTile data-testid='tile' label='Tasks' value={3} />).getByTestId('tile').textContent).toContain('Tasks');
+  });
+});

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

@@ -52,9 +52,11 @@ export function AuthCard({
   aurora = false,
   children,
   className,
+  ...rest
 }: AuthCardProps) {
   return (
     <div
+      {...rest}
       className={cn(
         'flex w-full flex-col items-center justify-center gap-6 p-4',
         // The page colour belongs to the full-screen page only. Embedded, the card sits on its

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

@@ -52,6 +52,7 @@ export function AuthForm<Values extends FieldValues>({
   children,
   formRef,
   className,
+  ...rest
 }: AuthFormProps<Values>) {
   const rootError = form.formState.errors.root?.message as string | undefined;
 
@@ -72,7 +73,7 @@ export function AuthForm<Values extends FieldValues>({
   });
 
   return (
-    <FormProvider {...form}>
+    <FormProvider {...rest} {...form}>
       <form
         ref={formRef}
         onSubmit={submit}

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

@@ -73,6 +73,7 @@ export function LoginForm({
   footer,
   notice,
   children,
+  ...rest
 }: LoginFormProps) {
   const schema = useMemo(
     () =>
@@ -94,6 +95,7 @@ export function LoginForm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -37,6 +37,7 @@ export function PasswordResetConfirm({
   showStrength = true,
   footer,
   notice,
+  ...rest
 }: PasswordResetConfirmProps) {
   const schema = useMemo(
     () =>
@@ -60,6 +61,7 @@ export function PasswordResetConfirm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -40,6 +40,7 @@ export function PasswordResetRequest({
   footer,
   notice,
   defaultValues,
+  ...rest
 }: PasswordResetRequestProps) {
   const [submitted, setSubmitted] = useState(false);
   const schema = z.object({ email: z.string().min(1, 'Email is required') });
@@ -49,7 +50,7 @@ export function PasswordResetRequest({
 
   if (submitted) {
     return (
-      <div className='flex flex-col gap-4'>
+      <div {...rest} className='flex flex-col gap-4'>
         {successContent ?? (
           <Alert tone='success' title='Check your email'>
             If an account exists for that address, we've sent a link to reset your password.
@@ -73,6 +74,7 @@ export function PasswordResetRequest({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={() => {

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

@@ -30,6 +30,7 @@ export function PasswordSetFields({
   passwordName = 'newPassword',
   confirmName = 'confirmPassword',
   autoFocus,
+  ...rest
 }: PasswordSetFieldsProps) {
   const { watch } = useFormContext();
   const password = watch(passwordName) as string;
@@ -37,6 +38,7 @@ export function PasswordSetFields({
   return (
     <>
       <AuthPasswordField
+        {...rest}
         name={passwordName}
         label={passwordLabel}
         autoComplete='new-password'

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

@@ -35,6 +35,7 @@ export function PasswordStrengthMeter({
   value,
   minLength = 8,
   className,
+  ...rest
 }: PasswordStrengthMeterProps) {
   const { score, level, fraction } = scorePasswordStrength(value, minLength);
   if (!value) return null;
@@ -43,7 +44,7 @@ export function PasswordStrengthMeter({
   // ONE line (forge task 2466): it sits in a field's error slot (`Field status`), which is one
   // line of `text-sm` tall, so the bars and the word share a row rather than stacking.
   return (
-    <div className={cn('flex min-h-[1lh] items-center gap-3 text-sm', className)}>
+    <div {...rest} className={cn('flex min-h-[1lh] items-center gap-3 text-sm', className)}>
       <div className='flex flex-1 gap-1' aria-hidden>
         {[0, 1, 2, 3].map((i) => (
           <span

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

@@ -47,6 +47,7 @@ export function RegisterForm({
   footer,
   notice,
   children,
+  ...rest
 }: RegisterFormProps) {
   const schema = useMemo(
     () =>
@@ -72,6 +73,7 @@ export function RegisterForm({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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

@@ -47,6 +47,7 @@ export function SetInitialPassword({
   defaultValues,
   footer,
   notice,
+  ...rest
 }: SetInitialPasswordProps) {
   const lockedEmail = defaultValues?.email != null && defaultValues.email !== '';
   const lockedTemp = defaultValues?.tempPassword != null && defaultValues.tempPassword !== '';
@@ -84,6 +85,7 @@ export function SetInitialPassword({
 
   return (
     <AuthForm
+      {...rest}
       form={form}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

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 && (