@dxos/react-ui 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/components/Dialog/AlertDialog.tsx

@@ -23,12 +23,24 @@ import {
   type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
 } from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+import React, {
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+
+import { type DialogSize } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
+import { Column } from '../../primitives';
 import { type ThemedClassName } from '../../util';
 import { ElevationProvider } from '../ElevationProvider';
 
+//
+// Root
+//
+
 type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
@@ -37,22 +49,42 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+//
+// Trigger
+//
+
 type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
 
 const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
 
+//
+// Portal
+//
+
 type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
 
 const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
 
+//
+// Cancel
+//
+
 type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
 
 const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
 
+//
+// Action
+//
+
 type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
 
 const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
 
+//
+// Title
+//
+
 type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -61,14 +93,14 @@ const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwa
 >(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogTitlePrimitive
-      {...props}
-      className={tx('dialog.title', 'dialog--alert__title', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
+    <AlertDialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
   );
 });
 
+//
+// Description
+//
+
 type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -79,15 +111,23 @@ const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> =
   return (
     <AlertDialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog--alert__description', { srOnly }, classNames)}
+      className={tx('dialog.description', { srOnly }, classNames)}
       ref={forwardedRef}
     />
   );
 });
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+
+//
+// Context
+//
+
 const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
 const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
+const ALERT_DIALOG_BODY_NAME = 'AlertDialogBody';
+const ALERT_DIALOG_ACTIONBAR_NAME = 'AlertDialogActionBar';
+
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
   {
@@ -95,6 +135,10 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
+//
+// Overlay
+//
+
 type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
   blockAlign?: 'center' | 'start' | 'end';
 };
@@ -107,17 +151,17 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
   return (
     <AlertDialogOverlayPrimitive
       {...props}
+      data-block-align={blockAlign}
       className={tx(
         'dialog.overlay',
-        'dialog--alert__overlay',
         {},
         classNames,
-        'data-[block-align=start]:justify-center',
-        'data-[block-align=start]:items-start',
-        'data-[block-align=center]:place-content-center',
+        // TODO(burdon): Move to dialog.ts.
+        'data-[h-align=start]:justify-center',
+        'data-[h-align=start]:items-start',
+        'data-[h-align=center]:place-content-center',
       )}
       ref={forwardedRef}
-      data-block-align={blockAlign}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
     </AlertDialogOverlayPrimitive>
@@ -126,35 +170,89 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 
-type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps>;
+//
+// Content
+//
+
+type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps> & { size?: DialogSize };
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
   HTMLDivElement,
   AlertDialogContentProps
->(({ classNames, children, ...props }, forwardedRef) => {
+>(({ classNames, children, size = 'md', ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
   return (
     <AlertDialogContentPrimitive
       {...props}
-      className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
+      className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
       ref={forwardedRef}
     >
-      {children}
+      <Column.Root>{children}</Column.Root>
     </AlertDialogContentPrimitive>
   );
 });
 
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 
+//
+// Body
+//
+
+type AlertDialogBodyProps = PropsWithChildren;
+
+const AlertDialogBody: ForwardRefExoticComponent<AlertDialogBodyProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogBodyProps
+>(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
+
+AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
+
+//
+// ActionBar
+//
+
+type AlertDialogActionBarProps = ThemedClassName<PropsWithChildren>;
+
+const AlertDialogActionBar: ForwardRefExoticComponent<AlertDialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
+
+AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
+
+//
+// AlertDialog
+//
+
 export const AlertDialog = {
   Root: AlertDialogRoot,
   Trigger: AlertDialogTrigger,
   Portal: AlertDialogPortal,
   Overlay: AlertDialogOverlay,
   Content: AlertDialogContent,
+  Body: AlertDialogBody,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
+  ActionBar: AlertDialogActionBar,
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
 };
@@ -165,8 +263,10 @@ export type {
   AlertDialogPortalProps,
   AlertDialogOverlayProps,
   AlertDialogContentProps,
+  AlertDialogBodyProps,
   AlertDialogTitleProps,
   AlertDialogDescriptionProps,
+  AlertDialogActionBarProps,
   AlertDialogCancelProps,
   AlertDialogActionProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -9,6 +9,7 @@ import { faker } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
+import { Input } from '../Input';
 
 import { Dialog, type DialogContentProps } from './Dialog';
 
@@ -18,12 +19,12 @@ type StoryProps = Pick<DialogContentProps, 'size'> &
     description: string;
     openTrigger: string;
     closeTrigger: string;
-    blockAlign: 'center' | 'start';
+    blockAlign: 'start' | 'center';
   }>;
 
 const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
   return (
-    <Dialog.Root defaultOpen>
+    <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
         <Button>{openTrigger}</Button>
       </Dialog.Trigger>
@@ -37,10 +38,18 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
               </Dialog.Close>
             )}
           </Dialog.Header>
-          <Dialog.Description>{description}</Dialog.Description>
-          <Dialog.Close asChild>
-            <Button variant='primary'>{closeTrigger}</Button>
-          </Dialog.Close>
+          <Dialog.Body>
+            <Dialog.Description>{description}</Dialog.Description>
+            <Input.Root>
+              <Input.Label>Value</Input.Label>
+              <Input.TextInput placeholder='Enter value' />
+            </Input.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
         </Dialog.Content>
       </Dialog.Overlay>
     </Dialog.Root>
@@ -48,25 +57,30 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Dialog',
+  title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    chromatic: {
-      disableSnapshot: false,
-    },
-  },
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'start',
+  },
+};
+
 export const Small: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: faker.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -77,7 +91,7 @@ export const Small: Story = {
 export const Medium: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: faker.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -95,3 +109,14 @@ export const Large: Story = {
     size: 'lg',
   },
 };
+
+export const ExtraLarge: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'xl',
+  },
+};

package/src/components/Dialog/Dialog.tsx

@@ -32,8 +32,9 @@ import { useTranslation } from 'react-i18next';
 import { type DialogSize, osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
+import { Column } from '../../primitives';
 import { type ThemedClassName } from '../../util';
-import { IconButton, type IconButtonProps } from '../Button';
+import { IconButton } from '../Button';
 import { ElevationProvider } from '../ElevationProvider';
 
 //
@@ -86,9 +87,9 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
-        ref={forwardedRef}
         data-block-align={blockAlign}
+        className={tx('dialog.overlay', {}, classNames)}
+        ref={forwardedRef}
       >
         <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
       </DialogOverlayPrimitive>
@@ -110,25 +111,20 @@ type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogCon
 };
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, size, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  ({ classNames, children, size = 'md', inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
+        {...props}
         // NOTE: Radix warning unless set to undefined.
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
-        {...props}
-        className={tx(
-          'dialog.content',
-          'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size },
-          classNames,
-        )}
+        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <Column.Root>{children}</Column.Root>
       </DialogContentPrimitive>
     );
   },
@@ -146,16 +142,56 @@ const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTM
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <div
+      <Column.Segment asChild>
+        <div role='heading' {...props} className={tx('dialog.header', { srOnly }, [classNames])} ref={forwardedRef} />
+      </Column.Segment>
+    );
+  },
+);
+
+//
+// CloseIconButton
+//
+
+type DialogCloseIconButtonProps = { label?: string };
+
+const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
+  ({ label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(osTranslations);
+    return (
+      <IconButton
         {...props}
-        role='header'
-        className={tx('dialog.header', 'dialog__header', { srOnly }, classNames)}
+        label={label ?? t('close dialog label')}
+        icon='ph--x--regular'
+        iconOnly
+        size={4}
+        density='fine'
+        variant='ghost'
         ref={forwardedRef}
       />
     );
   },
 );
 
+//
+// Body
+//
+
+type DialogBodyProps = PropsWithChildren;
+
+const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Column.Segment asChild>
+        <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
+          {children}
+        </div>
+      </Column.Segment>
+    );
+  },
+);
+
 //
 // Title
 //
@@ -166,11 +202,7 @@ const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTML
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
+      <DialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -189,44 +221,39 @@ const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRe
   return (
     <DialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
+      className={tx('dialog.description', { srOnly }, classNames)}
       ref={forwardedRef}
     />
   );
 });
 
 //
-// Close
+// ActionBar
 //
 
-type DialogCloseProps = DialogClosePrimitiveProps;
+type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  DialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
 
 //
-// Close Button
+// Close
 //
 
-type DialogCloseIconButtonProps = ThemedClassName<Partial<IconButtonProps>>;
+type DialogCloseProps = DialogClosePrimitiveProps;
 
-const DialogCloseIconButton: ForwardRefExoticComponent<DialogCloseIconButtonProps> = forwardRef<
-  HTMLButtonElement,
-  DialogCloseIconButtonProps
->((props, forwardedRef) => {
-  const { t } = useTranslation(osTranslations);
-  return (
-    <IconButton
-      {...props}
-      label={props.label ?? t('close dialog label')}
-      icon='ph--x--regular'
-      iconOnly
-      size={4}
-      density='fine'
-      variant='ghost'
-      ref={forwardedRef}
-    />
-  );
-});
+const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 
 //
 // Dialog
@@ -239,8 +266,10 @@ export const Dialog = {
   Overlay: DialogOverlay,
   Content: DialogContent,
   Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
   CloseIconButton: DialogCloseIconButton,
 };
@@ -252,8 +281,9 @@ export type {
   DialogOverlayProps,
   DialogContentProps,
   DialogHeaderProps,
+  DialogBodyProps,
   DialogTitleProps,
   DialogDescriptionProps,
+  DialogActionBarProps,
   DialogCloseProps,
-  DialogCloseIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { ErrorBoundary } from '@dxos/react-error-boundary';
+
+import { withLayout, withTheme } from '../../testing';
+
+import { ErrorFallback } from './ErrorFallback';
+import { ThrowError } from './ThrowError';
+
+const BasicStory = () => {
+  return (
+    <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
+      <ThrowError />
+    </ErrorBoundary>
+  );
+};
+
+const StringErrorStory = () => {
+  return <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />;
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/ErrorFallback',
+  component: ErrorFallback,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: BasicStory,
+  play: async () => {
+    // This story intentionally renders an ErrorBoundary fallback; clear the smoke-test error flag.
+    (window as any).__ERROR_BOUNDARY_ERRORS__ = [];
+  },
+};
+
+export const StringError: Story = {
+  render: StringErrorStory,
+};

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+import { type FallbackProps } from 'react-error-boundary';
+
+import { safeStringify } from '@dxos/util';
+
+import { ErrorStack } from './ErrorStack';
+
+export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
+
+/**
+ * Themed fallback component for `ErrorBoundary`.
+ */
+export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const isDev = process.env.NODE_ENV === 'development';
+  const message = error instanceof Error ? error.message : String(error);
+
+  return (
+    <div role='alert' data-testid='error-boundary-fallback' className='flex flex-col p-4 gap-4 overflow-auto'>
+      <h1 className='text-lg text-info-text'>{title ?? 'Runtime Error'}</h1>
+      <p>{message}</p>
+
+      {isDev && error instanceof Error && (
+        <Section
+          title='Stack'
+          onClick={() => {
+            const text = error instanceof Error ? (error.stack ?? error.message) : String(error);
+            void navigator.clipboard.writeText(text);
+          }}
+        >
+          <ErrorStack error={error} />
+        </Section>
+      )}
+
+      {data && (
+        <Section
+          title='Data'
+          onClick={() => {
+            void navigator.clipboard.writeText(JSON.stringify(data, undefined, 2));
+          }}
+        >
+          <pre className='overflow-x-auto text-xs'>{safeStringify(data, undefined, 2)}</pre>
+        </Section>
+      )}
+
+      {children}
+    </div>
+  );
+};
+
+const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: string; onClick?: () => void }>) => {
+  return (
+    <div className='flex flex-col gap-1'>
+      {onClick && (
+        <button
+          type='button'
+          onClick={onClick}
+          className='flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors'
+          title={`Copy ${title}`}
+        >
+          <h2 className='text-xs uppercase text-subdued'>{title}</h2>
+        </button>
+      )}
+      {children}
+    </div>
+  );
+};