@dxos/react-ui 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/src/primitives/Column/Column.stories.tsx

@@ -0,0 +1,182 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input, ScrollArea } from '../../components';
+import { withLayout, withTheme } from '../../testing';
+import { Flex } from '../Flex';
+import { Column } from './Column';
+
+const List = () => {
+  return (
+    <ScrollArea.Root centered>
+      <ScrollArea.Viewport>
+        {Array.from({ length: 100 }).map((_, i) => (
+          <Input.Root key={i}>
+            <Input.TextInput value={`Item ${i}`} readOnly />
+          </Input.Root>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const DefaultStory = () => {
+  return (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Row center>
+        <h1 className='p-1 bg-blue-500 text-black'>Header</h1>
+      </Column.Row>
+
+      <Column.Row>
+        <div className='p-1 bg-blue-500'>A</div>
+        <div className='p-1 bg-red-500'>B</div>
+        <div className='p-1 bg-blue-500'>C</div>
+      </Column.Row>
+
+      <Column.Row asChild center>
+        <div className='py-2'>
+          <Input.Root>
+            <Input.TextInput placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Column.Row>
+
+      <Column.Viewport asChild>
+        <div className='flex flex-col gap-2'>
+          {Array.from({ length: 100 }).map((_, i) => (
+            <Input.Root key={i}>
+              <Input.TextInput value={`Item ${i}`} readOnly />
+            </Input.Root>
+          ))}
+        </div>
+      </Column.Viewport>
+
+      <Column.Row asChild center>
+        <Flex column>
+          <h1 className='p-1 bg-red-500 text-black'>Section with overflow</h1>
+          <pre className='p-1 text-xs text-subdued overflow-auto'>{new Error().stack}</pre>
+        </Flex>
+      </Column.Row>
+
+      <Column.Row center>
+        <div className='p-1 bg-green-500 text-black'>Footer</div>
+      </Column.Row>
+    </Column.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Column',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const InputList = ({ items = 50 }: { items?: number }) => (
+  <div className='flex flex-col gap-2'>
+    {Array.from({ length: items }).map((_, index) => (
+      <Input.Root key={index}>
+        <Input.TextInput value={`Item ${index + 1}`} readOnly />
+      </Input.Root>
+    ))}
+  </div>
+);
+
+export const WithScrollArea = {
+  decorators: [withLayout({ layout: 'column' })],
+  render: () => (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Row center>
+        <h2 className='py-3'>Header</h2>
+      </Column.Row>
+      <ScrollArea.Root padding centered orientation='vertical' classNames='col-span-full'>
+        <ScrollArea.Viewport>
+          <InputList items={30} />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <Column.Row center>
+        <h2 className='py-3'>Footer</h2>
+      </Column.Row>
+    </Column.Root>
+  ),
+};
+
+/**
+ * Column.Content provides gutter padding for non-scrolling content.
+ * Compare with Column.Row which uses subgrid for gutter alignment.
+ */
+export const WithContent: Story = {
+  decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  render: () => (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Row center>
+        <h2 className='py-3'>Header (Column.Row)</h2>
+      </Column.Row>
+      <Column.Content>
+        <p className='py-2'>This text is inside Column.Content. It gets gutter padding automatically.</p>
+        <Input.Root>
+          <Input.Label>Name</Input.Label>
+          <Input.TextInput placeholder='Enter name' />
+        </Input.Root>
+      </Column.Content>
+      <Column.Row center>
+        <h2 className='py-3'>Footer (Column.Row)</h2>
+      </Column.Row>
+    </Column.Root>
+  ),
+};
+
+/**
+ * Column.Content with a nested ScrollArea.
+ * The ScrollArea breaks out of Content's gutter padding via `--gutter-offset`
+ * and applies its own asymmetric padding (accounting for scrollbar width).
+ */
+export const ContentWithScrollArea: Story = {
+  decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  render: () => (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Row center>
+        <h2 className='py-3'>Header (Column.Row)</h2>
+      </Column.Row>
+      <Column.Content>
+        <ScrollArea.Root orientation='vertical' padding thin>
+          <ScrollArea.Viewport>
+            <InputList items={30} />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Column.Content>
+      <Column.Row center>
+        <h2 className='py-3'>Footer (Column.Row)</h2>
+      </Column.Row>
+    </Column.Root>
+  ),
+};
+
+export const Experimental = {
+  render: () => {
+    return (
+      <div className='grid grid-cols-[2rem_1fr_2rem]'>
+        <div className='col-span-full grid grid-cols-subgrid'>
+          <div className='bg-red-surface'>A</div>
+          <div className='bg-green-surface'>B</div>
+          <div className='bg-blue-surface'>C</div>
+        </div>
+        <div className='col-span-full grid grid-cols-subgrid col-start-2'>
+          <div className='bg-green-surface'>B</div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/primitives/Column/Column.tsx

@@ -0,0 +1,169 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type CSSProperties } from 'react';
+
+import { type ColumnStyleProps, composableProps, slottable } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { ScrollArea, type ScrollAreaRootProps } from '../../components';
+import { useThemeContext } from '../../hooks';
+
+//
+// Root
+//
+
+const COLUMN_ROOT_NAME = 'Column.Root';
+
+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)',
+};
+
+type ColumnRootProps = { gutter?: GutterSize };
+
+/**
+ * Creates a 3-column CSS grid with left/right gutter columns and a center content column.
+ * Sets the `--gutter` CSS variable for nested components.
+ *
+ * Direct children participate in the grid in one of three ways:
+ * - **Column.Row** — 3-col subgrid row (icons in gutters, content in center).
+ * - **Column.Content** — spans full width; re-applies gutters as `px-[var(--gutter)]` padding.
+ *   Sets `--gutter-offset` so nested ScrollAreas can break out of the padding.
+ * - **Column.Viewport** — spans full width; delegates gutters to ScrollArea.
+ *
+ * Gutter sizes: `'sm'` for compact layouts (Dialog); `'md'` (default); `'lg'` for wider spacing.
+ */
+const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
+  ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    const gutterSize = gutterSizes[gutter];
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={
+          {
+            '--gutter': gutterSize,
+            gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
+          } as CSSProperties
+        }
+        className={tx('column.root', { gutter }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColumnRoot.displayName = COLUMN_ROOT_NAME;
+
+//
+// Row
+//
+
+const COLUMN_ROW_NAME = 'Column.Row';
+
+type ColumnRowProps = ColumnStyleProps;
+
+/**
+ * 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 ColumnRow = slottable<HTMLDivElement, ColumnRowProps>(
+  ({ children, asChild, role, fullWidth, center, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        className={tx('column.row', { fullWidth, center }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColumnRow.displayName = COLUMN_ROW_NAME;
+
+//
+// Content
+//
+
+const COLUMN_CONTENT_NAME = 'Column.Content';
+
+type ColumnContentProps = SlottableProps;
+
+/**
+ * Full-width content area that inherits Column.Root's 3-column grid via CSS subgrid.
+ * Non-scrolling children default to the center column (between gutters).
+ * ScrollArea children span all 3 columns via `[.dx-column_&]:col-span-full`.
+ */
+const ColumnContent = 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.content', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+ColumnContent.displayName = COLUMN_CONTENT_NAME;
+
+//
+// Viewport
+//
+
+const COLUMN_VIEWPORT_NAME = 'Column.Viewport';
+
+type ColumnViewportProps = Pick<ScrollAreaRootProps, 'thin'>;
+
+const ColumnViewport = slottable<HTMLDivElement, ColumnViewportProps>(
+  ({ children, asChild, role, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { className, ...rest } = composableProps(props);
+    return (
+      <ScrollArea.Root
+        {...rest}
+        className={tx('column.viewport', {}, className)}
+        orientation='vertical'
+        padding
+        ref={forwardedRef}
+      >
+        <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+ColumnViewport.displayName = COLUMN_VIEWPORT_NAME;
+
+//
+// Column
+//
+
+export const Column = {
+  Root: ColumnRoot,
+  Content: ColumnContent,
+  Viewport: ColumnViewport,
+  Row: ColumnRow,
+};
+
+export type { ColumnRootProps, ColumnContentProps, ColumnViewportProps, ColumnRowProps };

package/src/primitives/Column/index.ts

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

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

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withLayout, withTheme } from '../../testing';
+import { Container } from './Container';
+
+const DefaultStory = () => (
+  <Container asChild>
+    <div className='grid place-items-center border border-red-500'>Hello</div>
+  </Container>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Container',
+  component: Container,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/primitives/Container/Container.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+
+import { composableProps, mx, slottable } from '@dxos/ui-theme';
+
+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

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

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

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+
+import { composableProps, mx, slottable } from '@dxos/ui-theme';
+
+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/Flex/index.ts

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

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,30 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+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/Panel/Panel.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+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 = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRef) => {
+  return (
+    <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'>
+            Item {i}
+          </div>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+const DefaultStory = () => {
+  return (
+    <Panel.Root className='dx-document'>
+      <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' />
+          <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' />
+        </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 = {};