@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

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

@@ -1,67 +1,29 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Input } from '../../components';
-import { withTheme } from '../../testing';
+import { withLayout, withTheme } from '../../testing';
+import { Container } from './Container';
 
-import { Container, type ContainerRootProps } from './Container';
+const DefaultStory = () => (
+  <Container asChild>
+    <div className='grid place-items-center border border-red-500'>Hello</div>
+  </Container>
+);
 
-const DefaultStory = (props: ContainerRootProps) => {
-  return (
-    <div className='plb-2 is-[20rem] border border-separator rounded-sm'>
-      <Container.Root {...props}>
-        <Container.Column>
-          <Input.Root>
-            <Input.Label>Label</Input.Label>
-            <Input.TextInput />
-          </Input.Root>
-        </Container.Column>
-      </Container.Root>
-    </div>
-  );
-};
-
-const meta: Meta<typeof Container.Root> = {
+const meta: Meta = {
   title: 'ui/react-ui-core/primitives/Container',
-  component: Container.Root,
+  component: Container,
   render: DefaultStory,
-  decorators: [withTheme()],
-  parameters: {
-    layout: 'centered',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-// TODO(burdon): Requires container.
-export const Default = () => {
-  return (
-    <Container.Root>
-      <Container.Column>Column</Container.Column>
-    </Container.Root>
-  );
-};
-
-export const SM: Story = {
-  args: {
-    variant: 'sm',
-  },
-};
-
-export const MD: Story = {
-  args: {
-    variant: 'md',
-  },
-};
-
-export const LG: Story = {
-  args: {
-    variant: 'lg',
-  },
-};
+export const Default: Story = {};

package/src/primitives/Container/Container.tsx

@@ -1,82 +1,21 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type PropsWithChildren, type Ref, forwardRef } from 'react';
+import React from 'react';
 
-import { type ColumnPadding } from '@dxos/ui-theme';
-import { type SlottableProps } from '@dxos/ui-types';
+import { mx } from '@dxos/ui-theme';
 
-import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 
-// TODO(burdon): Replace Form, Container, Card spacing.
-// TODO(burdon): Scrolling (reconcile with Mosaic Viewport).
-// TODO(burdon): Reconcile AnchoredOverflow.
-
-//
-// Context
-//
-
-type ContainerContext = {
-  variant?: ColumnPadding;
-};
-
-const [ContainerProvider, useContext] = createContext<ContainerContext>('Container');
-
-//
-// Root
-//
-
-type RootProps = PropsWithChildren<Partial<ContainerContext>>;
-
-const Root = ({ variant, children }: RootProps) => {
-  return <ContainerProvider {...{ variant }}>{children}</ContainerProvider>;
-};
-
-//
-// Column
-//
-
-const CONTAINER_COLUMN_NAME = 'Container.Column';
-
-type ColumnProps = SlottableProps<HTMLDivElement> & { variant?: ColumnPadding };
-
-const Column = forwardRef(
-  (
-    { classNames, className, asChild, role = 'none', children, variant, ...props }: ColumnProps,
-    ref: Ref<HTMLDivElement>,
-  ) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    const context = useContext(CONTAINER_COLUMN_NAME);
-    return (
-      <Root
-        {...props}
-        className={tx('container.column', 'container__column', { variant: variant ?? context.variant }, [
-          className,
-          classNames,
-        ])}
-        role={role}
-        ref={ref}
-      >
-        {children}
-      </Root>
-    );
-  },
-);
-
-Column.displayName = CONTAINER_COLUMN_NAME;
-
-//
-// Container
-//
-
-export const Container = {
-  Root,
-  Column,
-};
-
-export type { RootProps as ContainerRootProps, ColumnProps as ContainerColumnProps };
+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}>
+      {children}
+    </Comp>
+  );
+});

package/src/primitives/Container/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './Container';
-export * from './Layout';

package/src/{components → primitives}/DensityProvider/DensityProvider.tsx

@@ -14,7 +14,7 @@ export type DensityProviderProps = PropsWithChildren<{
   density?: Density;
 }>;
 
-export const DensityContext = createContext<DensityContextValue>({ density: 'fine' });
+export const DensityContext = createContext<DensityContextValue>({ density: 'md' });
 
 export const DensityProvider = ({ density, children }: DensityProviderProps) => (
   <DensityContext.Provider value={{ density }}>{children}</DensityContext.Provider>

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 }) => (
+  <div data-hue={hue} className='flex w-full dx-panel p-2 text-sm font-mono border rounded-sm'>
+    {label}
+  </div>
+);
+
+const RowStory = () => (
+  <Flex classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+  </Flex>
+);
+
+const ColumnStory = () => (
+  <Flex column classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+  </Flex>
+);
+
+const GrowStory = () => (
+  <Flex column grow classNames='gap-2 p-2'>
+    <Cell label='Header' hue='yellow' />
+    <Flex grow>
+      <Cell label='Content (grows)' hue='blue' />
+    </Flex>
+    <Cell label='Footer' hue='orange' />
+  </Flex>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Flex',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Row: Story = { render: RowStory };
+export const Column: Story = { render: ColumnStory };
+export const Grow: Story = { render: GrowStory };

package/src/primitives/Flex/Flex.tsx

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

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 }) => (
+  <div data-hue={hue} className='dx-panel p-2 text-sm font-mono border rounded-sm'>
+    {label}
+  </div>
+);
+
+const ColsStory = () => (
+  <Grid cols={3} classNames='gap-2 p-2'>
+    <Cell label='Row 1' hue='red' />
+    <Cell label='Row 2' hue='green' />
+    <Cell label='Row 3' hue='blue' />
+  </Grid>
+);
+
+const RowsStory = () => (
+  <Grid rows={3} classNames='gap-2 p-2'>
+    <Cell label='Row 1' hue='red' />
+    <Cell label='Row 2' hue='green' />
+    <Cell label='Row 3' hue='blue' />
+  </Grid>
+);
+
+const MixedStory = () => (
+  <Grid cols={2} rows={2} classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+    <Cell label='D' hue='yellow' />
+  </Grid>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Grid',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Cols: Story = { render: ColsStory };
+export const Rows: Story = { render: RowsStory };
+export const Mixed: Story = { render: MixedStory };

package/src/primitives/Grid/Grid.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { composable, composableProps } from '../../util';
+
+export type GridProps = { cols?: number; rows?: number; grow?: boolean };
+
+export const Grid = composable<HTMLDivElement, GridProps>(
+  ({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    return (
+      <div
+        ref={forwardedRef}
+        {...rest}
+        role={role ?? 'none'}
+        className={mx('grid overflow-hidden', grow && 'dx-container', className)}
+        style={{
+          gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : undefined,
+          gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : undefined,
+          ...style,
+        }}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/primitives/Grid/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Grid';

package/src/primitives/ThemeProvider/ThemeProvider.stories.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { withLayout, withTheme } from '../../testing';
+import { ThemeProvider } from './ThemeProvider';
+
+const meta = {
+  title: 'ui/react-ui-core/primitives/ThemeProvider',
+  component: ThemeProvider,
+  render: () => {
+    const { themeMode, platform } = useThemeContext();
+    return (
+      <div className='p-4 flex flex-col gap-4'>
+        <h1>ThemeProvider</h1>
+        <pre className='text-sm text-description'>{JSON.stringify({ themeMode, platform }, null, 2)}</pre>
+      </div>
+    );
+  },
+  decorators: [withTheme(), withLayout()],
+} satisfies Meta<typeof ThemeProvider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/{components → primitives}/ThemeProvider/ThemeProvider.tsx

@@ -11,7 +11,6 @@ import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
-
 import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 
 export type ThemeContextValue = {
@@ -40,10 +39,11 @@ export const ThemeProvider = ({
   fallback = null,
   resourceExtensions,
   appNs,
-  tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
+  tx = (_path, _styleProps, ..._options) => undefined,
   themeMode = 'dark',
-  rootDensity = 'fine',
-  ...rest
+  rootDensity = 'md',
+  noCache,
+  platform,
 }: ThemeProviderProps) => {
   useEffect(() => {
     if (document.defaultView) {
@@ -54,9 +54,10 @@ export const ThemeProvider = ({
   }, []);
 
   const safeAreaPadding = useSafeArea();
+  // Destructure all props explicitly so useMemo deps are stable primitives, not a new `rest` object every render.
   const contextValue = useMemo(
-    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, ...rest }),
-    [tx, themeMode, safeAreaPadding, rest],
+    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, noCache, platform }),
+    [tx, themeMode, safeAreaPadding, noCache, platform],
   );
 
   return (
@@ -78,8 +79,8 @@ export const ThemeProvider = ({
 
 const handleInputModalityChange = (isUsingKeyboard: boolean) => {
   if (isUsingKeyboard) {
-    document.body.setAttribute('data-is-keyboard', 'true');
+    document.body.setAttribute('data-w-keyboard', 'true');
   } else {
-    document.body.removeAttribute('data-is-keyboard');
+    document.body.removeAttribute('data-w-keyboard');
   }
 };

package/src/{components → primitives}/ThemeProvider/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types';
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types/translations';
 
 export * from './ThemeProvider';
-export { useTranslation } from './TranslationsProvider';
+export { TranslationsContext, useTranslation } from './TranslationsProvider';

package/src/primitives/index.ts

@@ -2,5 +2,10 @@
 // Copyright 2026 DXOS.org
 //
 
+export * from './DensityProvider';
+export * from './ElevationProvider';
+export * from './ThemeProvider';
+
 export * from './Container';
 export * from './Flex';
+export * from './Grid';

package/src/testing/Loading.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { captureOwnerStack, useEffect, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+
+import { ErrorStack, parseCaptureOwnerStack } from '../components';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+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='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

@@ -10,7 +10,7 @@ import { mx } from '@dxos/ui-theme';
 
 export type ContainerProps = ThemedClassName<PropsWithChildren>;
 
-export type ContainerType = 'fullscreen' | 'column';
+export type ContainerType = 'default' | 'fullscreen' | 'centered' | 'column';
 
 export type WithLayoutProps =
   | FC<ContainerProps>
@@ -36,10 +36,10 @@ export const withLayout =
         </Container>
       );
     } else {
-      const { layout = 'fullscreen', classNames, scroll } = props;
+      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>
       );
@@ -47,17 +47,21 @@ export const withLayout =
   };
 
 const layouts: Record<ContainerType, FC<ContainerProps>> = {
-  fullscreen: ({ children, classNames }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-deckSurface', classNames)}>
-      {children}
+  default: ({ classNames, children }: ContainerProps) => <div className={mx('p-4', classNames)}>{children}</div>,
+
+  fullscreen: ({ classNames, children }: ContainerProps) => (
+    <div className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>{children}</div>
+  ),
+
+  centered: ({ classNames, children }: ContainerProps) => (
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
-  column: ({ children, classNames }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex justify-center overflow-hidden bg-deckSurface'>
-      <div role='none' className={mx('flex flex-col is-[40rem] bg-baseSurface', classNames)}>
-        {children}
-      </div>
+  column: ({ classNames, children }: ContainerProps) => (
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 };

package/src/testing/decorators/withLayoutVariants.tsx

@@ -14,7 +14,7 @@ type Config = {
 };
 
 const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
-  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>
+  <div className={mx('p-4 rounded-sm', surface, surfaceShadow({ elevation }))}>{children}</div>
 );
 
 const Panel = ({
@@ -22,30 +22,27 @@ const Panel = ({
   elevations,
   densities,
   className,
-}: { Story: ComponentType } & Config & { className?: string }) => (
-  <div className={mx('flex flex-col bs-full p-4 gap-4', className)}>
-    {elevations?.map(({ elevation, surface }) =>
-      densities?.map((density) => (
-        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
-          <Story />
-        </Container>
-      )),
-    )}
-  </div>
-);
+}: { Story: ComponentType } & Config & { className?: string }) => {
+  return (
+    <div className={mx('flex flex-col h-full p-8 gap-8', className)}>
+      {elevations?.map(({ elevation, surface }) =>
+        densities?.map((density) => (
+          <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+            <Story />
+          </Container>
+        )),
+      )}
+    </div>
+  );
+};
 
 export const withLayoutVariants = ({
   elevations = [
-    { elevation: 'base', surface: 'bg-baseSurface' },
-    { elevation: 'positioned', surface: 'bg-cardSurface' },
-    { elevation: 'dialog', surface: 'bg-modalSurface' },
+    { elevation: 'dialog', surface: 'bg-modal-surface' },
+    { elevation: 'positioned', surface: 'bg-card-surface' },
+    { elevation: 'base', surface: 'bg-base-surface' },
   ],
-  densities = ['coarse'],
+  densities = ['md'],
 }: Config = {}): Decorator => {
-  return (Story) => (
-    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>
-      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />
-      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />
-    </div>
-  );
+  return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;
 };