@dxos/react-ui 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Dialog/Dialog.tsx

@@ -2,24 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { createContext } from '@radix-ui/react-context';
-import {
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  Root as DialogRootPrimitive,
-  type DialogProps as DialogRootPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-} from '@radix-ui/react-dialog';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
@@ -32,19 +16,20 @@ 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';
 
 //
 // Root
 //
 
-type DialogRootProps = DialogRootPrimitiveProps;
+type DialogRootProps = DialogPrimitive.DialogProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <DialogRootPrimitive {...props} />
+    <DialogPrimitive.Root {...props} />
   </ElevationProvider>
 );
 
@@ -52,17 +37,17 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
 // Trigger
 //
 
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
+const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
 
 //
 // Portal
 //
 
-type DialogPortalProps = DialogPortalPrimitiveProps;
+type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
+const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
 
 //
 // Overlay
@@ -77,21 +62,23 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   {},
 );
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
+type DialogOverlayProps = ThemedClassName<
+  DialogPrimitive.DialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
 
     return (
-      <DialogOverlayPrimitive
+      <DialogPrimitive.Overlay
         {...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>
+      </DialogPrimitive.Overlay>
     );
   },
 );
@@ -104,32 +91,27 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
 const DIALOG_CONTENT_NAME = 'DialogContent';
 
-type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContentPrimitive>> & {
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
   inOverlayLayout?: boolean;
 };
 
 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
+      <DialogPrimitive.Content
+        {...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}
-      </DialogContentPrimitive>
+        <Column.Root gutter='md'>{children}</Column.Root>
+      </DialogPrimitive.Content>
     );
   },
 );
@@ -146,31 +128,67 @@ 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
 //
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
 
 const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
+      <DialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -179,54 +197,49 @@ const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTML
 // Description
 //
 
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
 
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
+const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps> = forwardRef<
   HTMLParagraphElement,
   DialogDescriptionProps
 >(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <DialogDescriptionPrimitive
+    <DialogPrimitive.Description
       {...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 = DialogPrimitive.DialogCloseProps;
 
-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> = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -239,8 +252,10 @@ export const Dialog = {
   Overlay: DialogOverlay,
   Content: DialogContent,
   Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
   CloseIconButton: DialogCloseIconButton,
 };
@@ -252,8 +267,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>
+  );
+};

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import ErrorStackParser from 'error-stack-parser';
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+type LocalFrame = { href: string; fileName: string };
+
+/**
+ * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
+ */
+export const ErrorStack = ({ error }: { error: Error }) => {
+  const frames = ErrorStackParser.parse(error);
+
+  return (
+    <div className='font-mono text-sm'>
+      {frames.map((frame, i) => {
+        const isLast = i === frames.length - 1;
+        const local = frame.fileName
+          ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber)
+          : undefined;
+        const name = frame.functionName ?? '<anonymous>';
+        return (
+          <div
+            key={i}
+            className={mx(
+              'grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2',
+              local && 'cursor-pointer hover:bg-hover-surface',
+            )}
+          >
+            {/* Tree connector: vertical line full-height + horizontal branch at midpoint */}
+            <div className='relative'>
+              <div
+                className={mx(
+                  'absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500',
+                  isLast ? 'top-0 h-1/2' : 'inset-y-0',
+                )}
+              />
+              <div className='absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500' />
+            </div>
+            {local ? (
+              <a href={local.href} className='truncate self-center'>
+                {name}
+              </a>
+            ) : (
+              <span className='text-subdued truncate self-center'>{name}</span>
+            )}
+            <span className='text-xs text-subdued truncate self-center'>{local?.fileName ?? ''}</span>
+            <span className='text-xs text-subdued text-right self-center'>
+              {local ? `${frame.lineNumber}:${frame.columnNumber}` : ''}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * Parses a Vite `/@fs/` URL into a `vscode://` deep link and short filename.
+ * Returns undefined if the URL cannot be resolved to a local file.
+ */
+const parseLocalFrame = (fileUrl: string, line?: number, col?: number): LocalFrame | undefined => {
+  try {
+    const { pathname } = new URL(fileUrl);
+    if (!pathname.startsWith('/@fs/')) {
+      return undefined;
+    }
+    const localPath = pathname.slice(4); // /@fs/Users/... → /Users/...
+    return {
+      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
+      fileName: pathname.split('/').pop() ?? localPath,
+    };
+  } catch {
+    return undefined;
+  }
+};

package/src/components/ErrorFallback/ThrowError.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+export type ThrowErrorProps = {
+  error?: () => Error;
+  delay?: number;
+};
+
+/**
+ * Use this to debug the error boundary.
+ */
+export const ThrowError = ({ delay = 1_000, ...props }: ThrowErrorProps) => {
+  const [error, setError] = useState<Error>();
+  useEffect(() => {
+    if (delay < 0) {
+      return;
+    }
+
+    const t = setTimeout(() => {
+      setError(generator({ delay, ...props }));
+    }, delay);
+    return () => clearTimeout(t);
+  }, [delay, generator]);
+
+  if (error) {
+    throw error;
+  }
+
+  return null;
+};
+
+const generator = ({ error, delay }: ThrowErrorProps) => {
+  return error?.() ?? new Error(`Error generated after ${delay}ms`);
+};

package/src/components/ErrorFallback/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ErrorBoundary, type ErrorBoundaryProps, type FallbackProps } from '@dxos/react-error-boundary';
+
+export * from './ErrorFallback';
+export * from './ErrorStack';
+export * from './ThrowError';

package/src/components/Icon/Icon.stories.tsx

@@ -60,9 +60,9 @@ const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Icon',
+  title: 'ui/react-ui-core/components/Icon',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Icon/Icon.tsx

@@ -16,11 +16,12 @@ export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.s
 };
 
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
+
     return (
-      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
         <use href={href} />
       </svg>
     );

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { faker } from '@dxos/random';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { Image } from './Image';
+
+const seed = Math.random();
+
+faker.seed(seed);
+
+const meta = {
+  title: 'ui/react-ui-mosaic/Image',
+  component: Image,
+  render: (args) => (
+    <div className='absolute inset-0 flex justify-center items-center'>
+      <Image {...args} />
+    </div>
+  ),
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: faker.image.url(),
+  },
+};
+
+const classNames = 'h-[12rem] w-[18rem]';
+
+/**
+ * Access to image at 'https://dxos.network/dxos-logotype-blue.png'
+ * from origin 'http://localhost:9009' has been blocked by CORS policy:
+ * No 'Access-Control-Allow-Origin' header is present on the requested resource.
+ */
+export const Cors: Story = {
+  args: {
+    src: 'https://dxos.network/dxos-logotype-blue.png',
+    classNames,
+  },
+};
+
+export const Corners: Story = {
+  args: {
+    src: 'https://picsum.photos/seed/picsum/200/200',
+    classNames,
+  },
+};
+
+export const SVG: Story = {
+  args: {
+    src: 'https://dxos.network/bg-kube.svg',
+    classNames,
+  },
+};
+
+export const Many: Story = {
+  args: {
+    src: 'https://dxos.network/bg-kube.svg',
+  },
+  render: () => {
+    const images = useMemo(
+      () => Array.from({ length: 9 }, (_, i) => `https://picsum.photos/seed/${seed + i}/500/500`),
+      [],
+    );
+    return (
+      <div className='w-[60rem] grid grid-cols-3 grid-rows-3 gap-8'>
+        {images.map((src, i) => (
+          <Image key={i} src={src} classNames={classNames} />
+        ))}
+      </div>
+    );
+  },
+};