@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/components/Dialog/Dialog.tsx

@@ -14,14 +14,15 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
-import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName, composableProps, slottable } from '../../util';
 import { IconButton } from '../Button';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 
 //
 // Root
@@ -40,13 +41,15 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+DialogRoot.displayName = 'Dialog.Root';
+
 //
 // Trigger
 //
 
 type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger;
 
 //
 // Portal
@@ -54,13 +57,13 @@ const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Tri
 
 type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal;
 
 //
 // Overlay
 //
 
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
+const DIALOG_OVERLAY_NAME = 'Dialog.Overlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
@@ -96,7 +99,7 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 // Content
 //
 
-const DIALOG_CONTENT_NAME = 'DialogContent';
+const DIALOG_CONTENT_NAME = 'Dialog.Content';
 
 type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
@@ -151,20 +154,35 @@ const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props },
   );
 });
 
+DialogHeader.displayName = 'Dialog.Header';
+
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-type DialogCloseIconButtonProps = { label?: string };
+type DialogActionIconButtonAction = 'close' | 'delete';
+
+type DialogActionIconButtonProps = { action: DialogActionIconButtonAction; label?: string };
+
+const DIALOG_ACTION_ICONS: Record<DialogActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const DIALOG_ACTION_LABEL_KEYS: Record<DialogActionIconButtonAction, string> = {
+  // Preserves the legacy `close-dialog.label` translation key for backward compat.
+  close: 'close-dialog.label',
+  delete: 'toolbar-delete.label',
+};
 
-const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
-  ({ label, ...props }, forwardedRef) => {
+const DialogActionIconButton = forwardRef<HTMLButtonElement, DialogActionIconButtonProps>(
+  ({ action, label, ...props }, forwardedRef) => {
     const { t } = useTranslation(osTranslations);
     return (
       <IconButton
         {...props}
-        label={label ?? t('close-dialog.label')}
-        icon='ph--x--regular'
+        label={label ?? t(DIALOG_ACTION_LABEL_KEYS[action])}
+        icon={DIALOG_ACTION_ICONS[action]}
         iconOnly
         size={4}
         variant='ghost'
@@ -174,6 +192,8 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
   },
 );
 
+DialogActionIconButton.displayName = 'Dialog.ActionIconButton';
+
 //
 // Body
 //
@@ -191,6 +211,8 @@ const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, f
   );
 });
 
+DialogBody.displayName = 'Dialog.Body';
+
 //
 // Title
 //
@@ -206,6 +228,8 @@ const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   },
 );
 
+DialogTitle.displayName = 'Dialog.Title';
+
 //
 // Description
 //
@@ -225,6 +249,8 @@ const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProp
   },
 );
 
+DialogDescription.displayName = 'Dialog.Description';
+
 //
 // ActionBar
 //
@@ -242,13 +268,15 @@ const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props
   );
 });
 
+DialogActionBar.displayName = 'Dialog.ActionBar';
+
 //
 // Close
 //
 
 type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -266,7 +294,7 @@ export const Dialog = {
   Description: DialogDescription,
   ActionBar: DialogActionBar,
   Close: DialogClose,
-  CloseIconButton: DialogCloseIconButton,
+  ActionIconButton: DialogActionIconButton,
 };
 
 export type {
@@ -281,5 +309,6 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
-  DialogCloseIconButtonProps,
+  DialogActionIconButtonAction,
+  DialogActionIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -7,6 +7,10 @@ import { type FallbackProps } from 'react-error-boundary';
 
 import { safeStringify } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
+import { useTranslation } from '../../primitives';
+import { IconButton } from '../Button';
 import { ErrorStack } from './ErrorStack';
 
 export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
@@ -15,6 +19,7 @@ export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'>
  * Themed fallback component for `ErrorBoundary`.
  */
 export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const { t } = useTranslation(translationKey);
   const isDev = process.env.NODE_ENV === 'development';
   const message = error instanceof Error ? error.message : String(error);
 
@@ -55,14 +60,15 @@ const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: strin
   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>
+        <div>
+          <IconButton
+            classNames='text-xs uppercase'
+            label={title ?? 'Copy'}
+            icon='ph--clipboard-text--regular'
+            size={5}
+            onClick={onClick}
+          />
+        </div>
       )}
       {children}
     </div>

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -56,7 +56,7 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
         const local = frame.fileName
           ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber)
           : undefined;
-        const name = frame.functionName ?? '<anonymous>';
+        const functionName = frame.functionName ?? '<anonymous>';
         return (
           <div
             key={i}
@@ -75,14 +75,15 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
               />
               <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}
+                {functionName}
               </a>
             ) : (
-              <span className='text-subdued truncate self-center'>{name}</span>
+              <span className='text-subdued truncate self-center'>{functionName}</span>
             )}
-            <span className='text-xs text-subdued truncate self-center'>{local?.fileName ?? ''}</span>
+            <span className='text-xs text-subdued truncate self-center truncate'>{local?.fileName ?? ''}</span>
             <span className='text-xs text-subdued text-right self-center'>
               {local ? `${frame.lineNumber}:${frame.columnNumber}` : ''}
             </span>
@@ -103,10 +104,15 @@ const parseLocalFrame = (fileUrl: string, line?: number, col?: number): LocalFra
     if (!pathname.startsWith('/@fs/')) {
       return undefined;
     }
-    const localPath = pathname.slice(4); // /@fs/Users/... → /Users/...
+
+    const FILE_PREFIX = '/@fs';
+    const localPath = pathname.slice(FILE_PREFIX.length); // /@fs/Users/... → /Users/...
+    const PKG_PREFIX = '/packages/';
+    const i = localPath.indexOf(PKG_PREFIX);
+    const path = i === -1 ? localPath : localPath.substring(i + PKG_PREFIX.length);
     return {
       href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
-      fileName: pathname.split('/').pop() ?? localPath,
+      fileName: path,
     };
   } catch {
     return undefined;

package/src/components/Focus/Focus.theme.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type FocusStyleProps = {
+  border?: boolean;
+};
+
+/**
+ * Focus ring styles shared by Focus.Group and Focus.Item.
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
+ * (inset box-shadow alone is obscured by children with backgrounds).
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
+ */
+const ring: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'dx-ring-pseudo outline-hidden',
+    'focus:after:ring-focus-ring-subtle',
+    'data-[focus-state=active]:after:ring-focus-ring-subtle',
+    'data-[focus-state=error]:after:ring-rose-500',
+    border && 'border border-separator',
+    ...etc,
+  );
+
+export const focusTheme: Theme<FocusStyleProps> = {
+  group: ring,
+  item: ring,
+};

package/src/components/Focus/Focus.tsx

@@ -21,10 +21,10 @@ import React, {
   useState,
 } from 'react';
 
-import { composableProps, slottable } from '@dxos/ui-theme';
 import { type Axis } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 
 //
 // Context

package/src/components/Icon/Icon.theme.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { getSize, mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+export type IconStyleProps = {
+  size?: Size;
+};
+
+export type IconBlockStyleProps = {
+  compact?: boolean;
+  /** Constrain to a square (1:1) slot rather than the default rail-item width. */
+  square?: boolean;
+};
+
+/**
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
+ */
+const root: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
+  return mx(
+    'shrink-0 text-[var(--icons-color,currentColor)]',
+    size
+      ? getSize(size)
+      : '[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]',
+    etc,
+  );
+};
+
+/**
+ * Static slot sized to `--dx-rail-item` so a wrapped `Icon` lines up with an `IconButton iconOnly`.
+ */
+const block: ComponentFunction<IconBlockStyleProps> = ({ compact, square }, ...etc) =>
+  mx(
+    'grid place-items-center [&>img]:max-w-[1.5rem]',
+    square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
+    compact ? '' : 'h-[var(--dx-rail-item)]',
+    ...etc,
+  );
+
+export const iconTheme: Theme<IconStyleProps & IconBlockStyleProps> = {
+  root,
+  block,
+};

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo, useMemo } from 'react';
 
 import { type Size } from '@dxos/ui-types';
 
@@ -13,18 +13,25 @@ import { type ThemedClassName } from '../../util';
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
+  synchronized?: boolean;
 };
 
 /**
  * The Icon's size can be set directly or inherited from the `--dx-icon-size` CSS variable.
  */
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const spinDelay = useMemo(() => (synchronized ? `${-(Date.now() % 1_000)}ms` : undefined), [synchronized]);
     const href = useIconHref(icon);
 
     return (
-      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
+      <svg
+        {...props}
+        style={{ ...style, animationDelay: spinDelay }}
+        className={tx('icon.root', { size }, classNames)}
+        ref={forwardedRef}
+      >
         <use href={href} />
       </svg>
     );

package/src/components/Icon/IconBlock.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { IconBlockStyleProps } from './Icon.theme';
+
+export type IconBlockProps = ThemedClassName<ComponentPropsWithRef<'div'> & PropsWithChildren<IconBlockStyleProps>>;
+
+/**
+ * Static layout slot sized to `--dx-rail-item` (the same square that an `IconButton iconOnly`
+ * occupies). Use whenever a decorative `<Icon>` needs to share a row, column, or grid track with
+ * interactive `IconButton`s without drifting by a pixel.
+ *
+ * Defaults `aria-hidden='true'` — the slot wraps decorative chrome by default. Pass
+ * `aria-hidden={false}` when the slot's contents convey meaning that isn't already labelled
+ * elsewhere in the row.
+ */
+export const IconBlock = forwardRef<HTMLDivElement, IconBlockProps>(
+  ({ classNames, children, compact, square, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div
+        aria-hidden='true'
+        {...props}
+        className={tx('icon.block', { compact, square }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+IconBlock.displayName = 'IconBlock';

package/src/components/Icon/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Icon';
+export * from './IconBlock';

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

@@ -15,7 +15,7 @@ const seed = Math.random();
 random.seed(seed);
 
 const meta = {
-  title: 'ui/react-ui-mosaic/Image',
+  title: 'ui/react-ui-core/components/Image',
   component: Image,
   render: (args) => (
     <div className='absolute inset-0 flex justify-center items-center'>

package/src/components/Image/Image.tsx

@@ -13,16 +13,23 @@ export type ImageProps = ThemedClassName<
   {
     src: string;
     alt?: string;
+    fit?: 'contain' | 'cover';
+    /**
+     * Image CORS mode (sets the `<img crossorigin>` attribute). Omitted by default: cross-origin
+     * images load without a CORS request (no console errors), but the dominant-color sampler can't
+     * read their pixels off the canvas (the browser taints it). Opt in with `'anonymous'` when the
+     * image host sends CORS headers and you want the dominant-color gradient.
+     */
     crossOrigin?: 'anonymous' | 'use-credentials' | '';
   } & ColorOptions
 >;
 
-// TODO(burdon): Option for neutral background color.
 export const Image = ({
   classNames,
   src,
   alt = '',
-  crossOrigin = 'anonymous',
+  fit = 'contain',
+  crossOrigin,
   sampleSize = 64,
   contrast = 0.9,
 }: ImageProps) => {
@@ -68,7 +75,16 @@ export const Image = ({
 
   return (
     <div
-      className={mx(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames)}
+      // `isolate` (`isolation: isolate`) creates a new stacking context so
+      // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+      // the z-10 leaks into the parent's stacking context and elevates the
+      // image above any pseudo-element rings (e.g. Focus.Item's
+      // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+      // the focus ring on a Card containing a Card.Poster.
+      className={mx(
+        `relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`,
+        classNames,
+      )}
       style={{
         backgroundColor: dominantColor,
       }}
@@ -94,7 +110,10 @@ export const Image = ({
         crossOrigin={crossOriginState}
         onError={handleImageError}
         onLoad={handleImageLoad}
-        className='z-10 object-contain transition-opacity duration-500'
+        className={mx(
+          'z-10 transition-opacity duration-500',
+          fit === 'cover' ? 'w-full h-full object-cover' : 'object-contain',
+        )}
         style={{
           opacity: imageLoaded ? 1 : 0,
         }}
@@ -162,7 +181,9 @@ const extractDominantColor = (
       const alpha = pixels[i + 3];
 
       // Skip transparent pixels.
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
 
       // Calculate saturation to weight vibrant colors more.
       const max = Math.max(red, green, blue);
@@ -202,21 +223,29 @@ const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold:
   for (let x = 0; x < sampleSize; x++) {
     // Top edge.
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Bottom edge.
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   for (let y = 1; y < sampleSize - 1; y++) {
     // Left edge.
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Right edge.
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   return edgeTransparentPixels / edgePixels > threshold;