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

package/src/primitives/Grid/Grid.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 { 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,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { composableProps, mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
+
+export type GridProps = ComposableProps<HTMLDivElement> & {
+  cols?: number;
+  rows?: number;
+  grow?: boolean;
+};
+
+export const Grid = forwardRef<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/Panel/Panel.stories.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { Panel } from './Panel';
+
+const List = () => {
+  return (
+    <ScrollArea.Root margin role='list'>
+      <ScrollArea.Viewport>
+        {Array.from({ length: 100 }).map((_, i) => (
+          <div key={i} role='listitem' className='p-1 hover:bg-hover-surface'>
+            Item {i}
+          </div>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const DefaultStory = () => {
+  return (
+    <Panel.Root className='dx-article'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root classNames='gap-2'>
+          <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
+          <Input.Root>
+            <Input.TextInput placeholder='Search' />
+          </Input.Root>
+          <Toolbar.IconButton icon='ph--dots-three-vertical--regular' iconOnly label='Menu' />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+
+      <Panel.Content asChild>
+        <List />
+      </Panel.Content>
+
+      <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.Root>
+      </Panel.Statusbar>
+    </Panel.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Panel',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/primitives/Panel/Panel.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { forwardRef } from 'react';
+
+import { composableProps } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+
+//
+// Root
+//
+
+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';
+
+//
+// Toolbar
+//
+
+type ToolbarProps = SlottableProps<HTMLDivElement>;
+
+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>
+  );
+});
+
+Toolbar.displayName = 'Panel.Toolbar';
+
+//
+// Content
+//
+
+type ContentProps = SlottableProps<HTMLDivElement>;
+
+const Content = forwardRef<HTMLDivElement, ContentProps>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} data-slot='content' className={tx('panel.content', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+Content.displayName = 'Panel.Content';
+
+//
+// Statusbar
+//
+
+type StatusbarProps = SlottableProps<HTMLDivElement>;
+
+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>
+  );
+});
+
+Statusbar.displayName = 'Panel.Statusbar';
+
+//
+// Panel
+//
+
+export const Panel = {
+  Root,
+  Toolbar,
+  Content,
+  Statusbar,
+};
+
+export type {
+  RootProps as PanelRootProps,
+  ToolbarProps as PanelToolbarProps,
+  ContentProps as PanelContentProps,
+  StatusbarProps as PanelStatusbarProps,
+};

package/src/primitives/Panel/index.ts

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

package/src/primitives/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Column';
+export * from './Container';
+export * from './Flex';
+export * from './Grid';
+export * from './Panel';

package/src/testing/Loading.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+import React, { useEffect, useState } from 'react';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+export const Loading = ({ data }: LoadingProps) => {
+  const [visible, setVisible] = useState(false);
+  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>
+  );
+};

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,7 +36,7 @@ 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')}>
@@ -47,15 +47,29 @@ 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)}>
+  default: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('p-4', classNames)}>
       {children}
     </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)}>
+  fullscreen: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-base-surface', 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)}>
+        {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)}>
         {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'],
 }: 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} />;
 };

package/src/testing/decorators/withTheme.tsx

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

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/translations.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'toolbar menu label': 'Action menu',
+        'toolbar drag handle label': 'Drag to rearrange',
+        'toolbar close label': 'Close',
+      },
+    },
+  },
+] as const satisfies Resource[];