@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.e00bdcdb52

package/src/primitives/Column/Column.tsx

@@ -4,9 +4,9 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type CSSProperties, forwardRef } from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { composableProps } from '@dxos/ui-theme';
+import { composableProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -17,29 +17,35 @@ import { useThemeContext } from '../../hooks';
 
 const COLUMN_ROOT_NAME = 'Column.Root';
 
-type GutterSize = 'sm' | 'md' | 'lg' | 'rail';
+type GutterSize = 'xs' | 'sm' | 'md' | 'lg';
 
 const gutterSizes: Record<GutterSize, string> = {
+  xs: 'var(--dx-gutter-xs)',
   sm: 'var(--dx-gutter-sm)',
   md: 'var(--dx-gutter-md)',
   lg: 'var(--dx-gutter-lg)',
-  rail: 'var(--dx-rail-item)',
 };
 
-type ColumnRootProps = SlottableProps<HTMLDivElement, { gutter?: GutterSize }>;
+type ColumnRootProps = { gutter?: GutterSize };
 
 /**
- * Creates a vertical channel with left/right gutter columns.
- * The `--gutter` CSS variable is set for nested components (Dialog, ScrollArea, Form.Viewport, etc.).
- * Use `gutter='rail'` for icon-slot row layouts (Card); `gutter='md'` for whitespace layouts (Dialog).
- * Direct children must use Column.Row (spans all 3 cols) or Column.Segment (center col only).
+ * Creates a 3-column CSS grid with left/right gutter columns and a center content column.
+ * Sets `--gutter` and `--dx-col` CSS variables for nested components.
  *
- * NOTE: The theme applies a `dx-column` marker class to this element.
- * ScrollArea.Root detects this via `[.dx-column_&]:col-span-full` to span all 3 grid columns,
- * ensuring scroll content extends under the gutters rather than being confined to the center column.
- * The `--gutter` CSS variable is also consumed by ScrollArea's `margin` option to align scrollbar spacing.
+ * `--dx-col` defaults to `2 / span 1` (center column),
+ * enabling `withColumn` utilities to cascade the correct grid placement to slotted children.
+ *
+ * Direct children participate in the grid in one of several ways:
+ * - **Column.Center** — places element in the center column (col 2). Preferred for plain content.
+ * - **Column.Bleed** — spans all 3 columns gutter-to-gutter. Preferred for `ScrollArea` and
+ *   other content that should ignore the gutters.
+ * - **Column.Row** — 3-col subgrid row (icons in gutters, content in center).
+ *
+ * Use `withColumn.center()` / `withColumn.bleed()` helpers to apply placement on slotted elements.
+ *
+ * Gutter sizes: `'sm'` for compact layouts (Dialog); `'md'` (default); `'lg'` for wider spacing.
  */
-const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
+const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
   ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
@@ -52,6 +58,7 @@ const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
         style={
           {
             '--gutter': gutterSize,
+            '--dx-col': '2 / span 1',
             gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
           } as CSSProperties
         }
@@ -64,7 +71,7 @@ const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
   },
 );
 
-Root.displayName = COLUMN_ROOT_NAME;
+ColumnRoot.displayName = COLUMN_ROOT_NAME;
 
 //
 // Row
@@ -72,14 +79,14 @@ Root.displayName = COLUMN_ROOT_NAME;
 
 const COLUMN_ROW_NAME = 'Column.Row';
 
-type ColumnRowProps = SlottableProps<HTMLDivElement>;
+type ColumnRowProps = {};
 
 /**
  * Spans all 3 columns of the parent Column.Root and uses CSS subgrid to inherit their sizing.
  * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
  * Must be a direct child of Column.Root.
  */
-const Row = forwardRef<HTMLDivElement, ColumnRowProps>(({ children, asChild, role, ...props }, forwardedRef) => {
+const ColumnRow = slottable<HTMLDivElement, ColumnRowProps>(({ children, asChild, role, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
@@ -90,45 +97,69 @@ const Row = forwardRef<HTMLDivElement, ColumnRowProps>(({ children, asChild, rol
   );
 });
 
-Row.displayName = COLUMN_ROW_NAME;
+ColumnRow.displayName = COLUMN_ROW_NAME;
 
 //
-// Segment
+// Bleed
 //
 
-const COLUMN_SEGMENT_NAME = 'Column.Segment';
+const COLUMN_BLEED_NAME = 'Column.Bleed';
 
-type ColumnSegmentProps = SlottableProps<HTMLDivElement>;
+type ColumnBleedProps = SlottableProps;
 
 /**
- * Occupies only the center column (col-2) of the parent Column.Root grid.
- * Use `asChild` to merge grid positioning onto the child element, eliminating the wrapper div.
- * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ * Spans all 3 columns of the parent Column.Root (gutter-to-gutter).
+ * Establishes a CSS subgrid so that grandchildren can participate in the parent column tracks.
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore the gutters.
  */
-const Segment = forwardRef<HTMLDivElement, ColumnSegmentProps>(
-  ({ children, asChild, role, ...props }, forwardedRef) => {
-    const { className, ...rest } = composableProps(props);
-    const Comp = asChild ? Slot : Primitive.div;
-    const { tx } = useThemeContext();
-    // With asChild, merge col-start-2 directly onto the child — no contents wrapper needed.
-    return (
-      <Comp {...rest} role={role ?? 'none'} className={tx('column.segment', {}, className)} ref={forwardedRef}>
-        {asChild ? children : <div className='contents'>{children}</div>}
-      </Comp>
-    );
-  },
-);
+const ColumnBleed = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  return (
+    <Comp {...rest} className={tx('column.bleed', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+ColumnBleed.displayName = COLUMN_BLEED_NAME;
+
+//
+// Center
+//
+
+const COLUMN_CENTER_NAME = 'Column.Center';
+
+type ColumnCenterProps = SlottableProps;
+
+/**
+ * Places its element in column 2 (the center track between gutters) of the parent Column.Root.
+ * Does NOT use subgrid — placement is explicit on this element only, so it is safe to nest
+ * arbitrary compound components (including ones that render `display: contents` wrappers).
+ */
+const ColumnCenter = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  return (
+    <Comp {...rest} className={tx('column.center', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
-Segment.displayName = COLUMN_SEGMENT_NAME;
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
 
 //
 // Column
 //
 
 export const Column = {
-  Root,
-  Row,
-  Segment,
+  Root: ColumnRoot,
+  Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter,
 };
 
-export type { ColumnRootProps, ColumnRowProps, ColumnSegmentProps };
+export type { ColumnRootProps, ColumnRowProps, ColumnBleedProps, ColumnCenterProps };

package/src/primitives/Container/Container.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Container } from './Container';
 
 const DefaultStory = () => (

package/src/primitives/Container/Container.tsx

@@ -2,17 +2,14 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
-
-import { composableProps, mx } from '@dxos/ui-theme';
-import { Slot } from '@radix-ui/react-slot';
-import { SlottableProps } from '@dxos/ui-types';
 import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
 
-export type ContainerProps = SlottableProps<HTMLDivElement>;
+import { composableProps, mx, slottable } from '@dxos/ui-theme';
 
-export const Container = forwardRef<HTMLDivElement, ContainerProps>(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps<HTMLDivElement>(props, { role: 'none' });
+export const Container = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps<HTMLDivElement>(props);
   const Comp = asChild ? Slot : Primitive.div;
   return (
     <Comp {...rest} className={mx('dx-container', className)} ref={forwardedRef}>

package/src/primitives/Flex/Flex.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { type ChromaticPalette } from '@dxos/ui-types';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Flex } from './Flex';
 
 const Cell = ({ label, hue }: { label: string; hue: ChromaticPalette }) => (

package/src/primitives/Flex/Flex.tsx

@@ -2,28 +2,26 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
 
-import { composableProps, mx } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
+import { composableProps, mx, slottable } from '@dxos/ui-theme';
 
-export type FlexProps = ComposableProps<HTMLDivElement> & {
-  column?: boolean;
-  grow?: boolean;
-};
+export type FlexProps = { column?: boolean; grow?: boolean };
 
-export const Flex = forwardRef<HTMLDivElement, FlexProps>(
-  ({ children, role, column, grow, ...props }, forwardedRef) => {
+export const Flex = slottable<HTMLDivElement, FlexProps>(
+  ({ children, asChild, column, grow, ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <div
+      <Comp
         ref={forwardedRef}
         {...rest}
-        role={role ?? 'none'}
         className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', className)}
       >
         {children}
-      </div>
+      </Comp>
     );
   },
 );

package/src/primitives/Grid/Grid.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { type ChromaticPalette } from '@dxos/ui-types';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Grid } from './Grid';
 
 const Cell = ({ label, hue }: { label: string; hue: ChromaticPalette }) => (

package/src/primitives/Grid/Grid.tsx

@@ -2,18 +2,13 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React from 'react';
 
-import { composableProps, mx } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-export type GridProps = ComposableProps<HTMLDivElement> & {
-  cols?: number;
-  rows?: number;
-  grow?: boolean;
-};
+export type GridProps = { cols?: number; rows?: number; grow?: boolean };
 
-export const Grid = forwardRef<HTMLDivElement, GridProps>(
+export const Grid = composable<HTMLDivElement, GridProps>(
   ({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
     return (

package/src/primitives/Panel/Panel.stories.tsx

@@ -5,14 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Input, ScrollArea, Toolbar } from '../../components';
-import { withLayout, withTheme } from '../../testing';
+import { composable, composableProps } from '@dxos/ui-theme';
 
+import { Input, ScrollArea, ScrollAreaRootProps, Toolbar } from '../../components';
+import { withLayout, withTheme } from '../../testing';
 import { Panel } from './Panel';
 
-const List = () => {
+const List = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRef) => {
   return (
-    <ScrollArea.Root margin role='list'>
+    <ScrollArea.Root centered {...composableProps(props, { role: 'list' })} ref={forwardedRef}>
       <ScrollArea.Viewport>
         {Array.from({ length: 100 }).map((_, i) => (
           <div key={i} role='listitem' className='p-1 hover:bg-hover-surface'>
@@ -22,11 +23,11 @@ const List = () => {
       </ScrollArea.Viewport>
     </ScrollArea.Root>
   );
-};
+});
 
 const DefaultStory = () => {
   return (
-    <Panel.Root className='dx-article'>
+    <Panel.Root className='dx-document'>
       <Panel.Toolbar asChild>
         <Toolbar.Root classNames='gap-2'>
           <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
@@ -43,8 +44,8 @@ const DefaultStory = () => {
 
       <Panel.Statusbar asChild>
         <Toolbar.Root classNames='justify-between'>
-          <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' size={4} />
-          <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' size={4} />
+          <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' />
+          <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' />
         </Toolbar.Root>
       </Panel.Statusbar>
     </Panel.Root>

package/src/primitives/Panel/Panel.tsx

@@ -4,9 +4,9 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { forwardRef } from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { composableProps } from '@dxos/ui-theme';
+import { composableProps, PanelStyleProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -18,57 +18,61 @@ import { useThemeContext } from '../../hooks';
 const GRID_TEMPLATE_ROWS = 'auto 1fr auto';
 const GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
 
-type RootProps = SlottableProps<HTMLDivElement>;
-
-const Root = forwardRef<HTMLDivElement, RootProps>(({ children, asChild, role, style, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
-  const { tx } = useThemeContext();
-  return (
-    <Comp
-      {...rest}
-      role={role ?? 'none'}
-      style={{
-        gridTemplateRows: GRID_TEMPLATE_ROWS,
-        gridTemplateAreas: GRID_TEMPLATE_AREAS,
-        ...style,
-      }}
-      className={tx('panel.root', {}, className)}
-      ref={forwardedRef}
-    >
-      {children}
-    </Comp>
-  );
-});
-
-Root.displayName = 'Panel.Root';
+type PanelRootProps = SlottableProps<{ style?: CSSProperties }>;
+
+const PanelRoot = slottable<HTMLDivElement, { style?: CSSProperties }>(
+  ({ children, asChild, role, style, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={{
+          gridTemplateRows: GRID_TEMPLATE_ROWS,
+          gridTemplateAreas: GRID_TEMPLATE_AREAS,
+          ...style,
+        }}
+        className={tx('panel.root', {}, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelRoot.displayName = 'Panel.Root';
 
 //
 // Toolbar
 //
 
-type ToolbarProps = SlottableProps<HTMLDivElement>;
+type PanelToolbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
 
-const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
-  const { tx } = useThemeContext();
-  return (
-    <Comp {...rest} data-slot='toolbar' className={tx('panel.toolbar', {}, className)} ref={forwardedRef}>
-      {children}
-    </Comp>
-  );
-});
+const PanelToolbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='toolbar' className={tx('panel.toolbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
 
-Toolbar.displayName = 'Panel.Toolbar';
+PanelToolbar.displayName = 'Panel.Toolbar';
 
 //
 // Content
 //
 
-type ContentProps = SlottableProps<HTMLDivElement>;
+type PanelContentProps = SlottableProps;
 
-const Content = forwardRef<HTMLDivElement, ContentProps>(({ children, asChild, ...props }, forwardedRef) => {
+const PanelContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
@@ -79,41 +83,38 @@ const Content = forwardRef<HTMLDivElement, ContentProps>(({ children, asChild, .
   );
 });
 
-Content.displayName = 'Panel.Content';
+PanelContent.displayName = 'Panel.Content';
 
 //
 // Statusbar
 //
 
-type StatusbarProps = SlottableProps<HTMLDivElement>;
+type PanelStatusbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
 
-const Statusbar = forwardRef<HTMLDivElement, StatusbarProps>(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
-  const { tx } = useThemeContext();
-  return (
-    <Comp {...rest} data-slot='statusbar' className={tx('panel.statusbar', {}, className)} ref={forwardedRef}>
-      {children}
-    </Comp>
-  );
-});
+const PanelStatusbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='statusbar' className={tx('panel.statusbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
 
-Statusbar.displayName = 'Panel.Statusbar';
+PanelStatusbar.displayName = 'Panel.Statusbar';
 
 //
 // Panel
 //
 
 export const Panel = {
-  Root,
-  Toolbar,
-  Content,
-  Statusbar,
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar,
 };
 
-export type {
-  RootProps as PanelRootProps,
-  ToolbarProps as PanelToolbarProps,
-  ContentProps as PanelContentProps,
-  StatusbarProps as PanelStatusbarProps,
-};
+export type { PanelRootProps, PanelToolbarProps, PanelContentProps, PanelStatusbarProps };

package/src/testing/Loading.tsx

@@ -2,9 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
+import React, { captureOwnerStack, useEffect, useState } from 'react';
+
 import { mx } from '@dxos/ui-theme';
 import { safeStringify } from '@dxos/util';
-import React, { useEffect, useState } from 'react';
+
+import { ErrorStack, parseCaptureOwnerStack } from '../components';
 
 export type LoadingProps = { data?: any };
 
@@ -13,14 +16,32 @@ export type LoadingProps = { data?: any };
  */
 export const Loading = ({ data }: LoadingProps) => {
   const [visible, setVisible] = useState(false);
+  const ownerFrames = parseCaptureOwnerStack(captureOwnerStack());
+
   useEffect(() => {
     const t = setTimeout(() => setVisible(true), 500);
     return () => clearTimeout(t);
   }, []);
+
   return (
-    <div className={mx('flex flex-col opacity-0 transition delay-1000 duration-1000', visible && 'opacity-100')}>
-      <h2 className='uppercase'>Loading</h2>
-      <pre>{safeStringify(data, undefined, 2)}</pre>
+    <div className='w-full p-2'>
+      <div
+        className={mx(
+          'flex flex-col w-full p-2 border-2 border-teal-500 rounded-md',
+          'opacity-0 transition delay-1000 duration-1000',
+          visible && 'opacity-100',
+        )}
+      >
+        <h2 className='uppercase capitalize text-xs'>Loading State</h2>
+        <pre className='text-sm text-description'>{safeStringify(data, undefined, 2)}</pre>
+
+        <h3 className='uppercase capitalize text-xs mt-2'>Owner stack</h3>
+        {ownerFrames && ownerFrames.length > 0 ? (
+          <ErrorStack frames={ownerFrames} />
+        ) : (
+          <p className='text-xs text-subdued'>No owner stack (production build or unsupported context).</p>
+        )}
+      </div>
     </div>
   );
 };

package/src/testing/decorators/withLayout.tsx

@@ -39,7 +39,7 @@ export const withLayout =
       const { layout = 'default', classNames, scroll } = props;
       const Container = layouts[layout] ?? layouts.fullscreen;
       return (
-        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
+        <Container classNames={mx(scroll ? 'overflow-y-auto' : 'overflow-hidden', classNames)}>
           <MemoizedStory />
         </Container>
       );
@@ -54,22 +54,22 @@ const layouts: Record<ContainerType, FC<ContainerProps>> = {
   ),
 
   fullscreen: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-base-surface', classNames)}>
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>
       {children}
     </div>
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-base-surface')}>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>
+    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div role='none' className={mx('flex flex-col bg-base-surface', classNames)}>
         {children}
       </div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-base-surface'>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>
+    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div role='none' className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>
         {children}
       </div>
     </div>

package/src/testing/decorators/withTheme.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { memo } from 'react';
+import React from 'react';
 
 import { defaultTx } from '@dxos/ui-theme';
 import { type ThemeMode } from '@dxos/ui-types';
@@ -14,20 +14,23 @@ import { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components
  * Adds theme decorator.
  */
 export const withTheme =
-  ({ tx = defaultTx, ...props }: Partial<ThemeContextValue> = {}): Decorator =>
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
   (Story, context) => {
     const {
       globals: { theme },
       parameters: { translations },
     } = context;
 
-    // Prevent re-rendering of the story.
-    const MemoizedStory = memo(Story);
-
     return (
-      <ThemeProvider {...props} tx={tx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
+      <ThemeProvider
+        tx={tx}
+        themeMode={theme as ThemeMode}
+        resourceExtensions={translations}
+        noCache={noCache}
+        platform={platform}
+      >
         <Tooltip.Provider>
-          <MemoizedStory />
+          <Story />
         </Tooltip.Provider>
       </ThemeProvider>
     );