@dxos/react-ui 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

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

@@ -7,10 +7,8 @@ import React from 'react';
 
 import { Input, ScrollArea } from '../../components';
 import { withLayout, withTheme } from '../../testing';
-import { Flex } from '../Flex';
 import { Column } from './Column';
 
-// TODO(burdon): Content is clipped!
 const List = () => {
   return (
     <ScrollArea.Root centered>
@@ -28,9 +26,9 @@ const List = () => {
 const DefaultStory = () => {
   return (
     <Column.Root classNames='overflow-hidden' gutter='md'>
-      <Column.Row center>
+      <Column.Center>
         <h1 className='p-1 bg-blue-500 text-black'>Header</h1>
-      </Column.Row>
+      </Column.Center>
 
       <Column.Row>
         <div className='p-1 bg-blue-500'>A</div>
@@ -38,34 +36,36 @@ const DefaultStory = () => {
         <div className='p-1 bg-blue-500'>C</div>
       </Column.Row>
 
-      <Column.Row asChild center>
-        <div className='py-2'>
+      <Column.Center asChild>
+        <div>
           <Input.Root>
             <Input.TextInput placeholder='Search' />
           </Input.Root>
         </div>
-      </Column.Row>
+      </Column.Center>
 
-      <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>
+      <ScrollArea.Root orientation='vertical' padding>
+        <ScrollArea.Viewport>
+          <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>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
 
-      <Column.Row asChild center>
-        <Flex column>
+      <Column.Center asChild>
+        <div className='flex flex-col'>
           <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>
+        </div>
+      </Column.Center>
 
-      <Column.Row center>
+      <Column.Center>
         <div className='p-1 bg-green-500 text-black'>Footer</div>
-      </Column.Row>
+      </Column.Center>
     </Column.Root>
   );
 };
@@ -99,68 +99,66 @@ 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'>
+      <Column.Center>
+        <h2>Header</h2>
+      </Column.Center>
+      <ScrollArea.Root padding centered orientation='vertical'>
         <ScrollArea.Viewport>
           <InputList items={30} />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
-      <Column.Row center>
-        <h2 className='py-3'>Footer</h2>
-      </Column.Row>
+      <Column.Center>
+        <h2>Footer</h2>
+      </Column.Center>
     </Column.Root>
   ),
 };
 
 /**
- * Column.Content provides gutter padding for non-scrolling content.
- * Compare with Column.Row which uses subgrid for gutter alignment.
+ * Column.Center places a single element in the center column of the parent grid.
+ * Preferred for centered content — safe to nest
+ * compound components (Form.Root, Editor.Root, etc.) that render `display: contents`.
  */
-export const WithContent: Story = {
-  decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+export const WithCenter: Story = {
+  decorators: [withLayout({ 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>
+    <Column.Root gutter='md'>
+      <Column.Center>
+        <h2>Header (Column.Center)</h2>
+      </Column.Center>
+      <Column.Center classNames='flex flex-col'>
+        <p>This text is inside Column.Center. It sits in the central column between the gutters.</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.Center>
+      <Column.Center>
+        <h2>Footer (Column.Center)</h2>
+      </Column.Center>
     </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).
+ * ScrollArea auto-bleeds inside Column.Root (via [.dx-column_&]:col-span-full).
+ * No Column.Bleed wrapper needed.
  */
-export const ContentWithScrollArea: Story = {
+export const WithScrollAreaAutoBleed: 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.Center>
+        <h2>Header (Column.Center)</h2>
+      </Column.Center>
+      <ScrollArea.Root orientation='vertical' padding thin>
+        <ScrollArea.Viewport>
+          <InputList items={30} />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <Column.Center>
+        <h2>Footer (Column.Center)</h2>
+      </Column.Center>
     </Column.Root>
   ),
 };

package/src/primitives/Column/Column.tsx

@@ -6,10 +6,9 @@ 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 { composableProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
-import { ScrollArea, type ScrollAreaRootProps } from '../../components';
 import { useThemeContext } from '../../hooks';
 
 //
@@ -31,13 +30,18 @@ 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.
+ * Sets `--gutter` and `--dx-col` CSS variables for nested components.
  *
- * Direct children participate in the grid in one of three ways:
+ * `--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).
- * - **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.
+ *
+ * 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.
  */
@@ -54,6 +58,7 @@ const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
         style={
           {
             '--gutter': gutterSize,
+            '--dx-col': '2 / span 1',
             gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
           } as CSSProperties
         }
@@ -74,86 +79,77 @@ ColumnRoot.displayName = COLUMN_ROOT_NAME;
 
 const COLUMN_ROW_NAME = 'Column.Row';
 
-type ColumnRowProps = ColumnStyleProps;
+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 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>
-    );
-  },
-);
+const ColumnRow = slottable<HTMLDivElement, ColumnRowProps>(({ children, asChild, role, ...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', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 ColumnRow.displayName = COLUMN_ROW_NAME;
 
 //
-// Content
+// Bleed
 //
 
-const COLUMN_CONTENT_NAME = 'Column.Content';
+const COLUMN_BLEED_NAME = 'Column.Bleed';
 
-type ColumnContentProps = SlottableProps;
+type ColumnBleedProps = 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`.
+ * 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 ColumnContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+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.content', {}, className)} ref={forwardedRef}>
+    <Comp {...rest} className={tx('column.bleed', {}, className)} ref={forwardedRef}>
       {children}
     </Comp>
   );
 });
 
-ColumnContent.displayName = COLUMN_CONTENT_NAME;
+ColumnBleed.displayName = COLUMN_BLEED_NAME;
 
 //
-// Viewport
+// Center
 //
 
-const COLUMN_VIEWPORT_NAME = 'Column.Viewport';
+const COLUMN_CENTER_NAME = 'Column.Center';
 
-type ColumnViewportProps = Pick<ScrollAreaRootProps, 'thin'>;
+type ColumnCenterProps = SlottableProps;
 
-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>
-    );
-  },
-);
+/**
+ * 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>
+  );
+});
 
-ColumnViewport.displayName = COLUMN_VIEWPORT_NAME;
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
 
 //
 // Column
@@ -161,9 +157,9 @@ ColumnViewport.displayName = COLUMN_VIEWPORT_NAME;
 
 export const Column = {
   Root: ColumnRoot,
-  Content: ColumnContent,
-  Viewport: ColumnViewport,
   Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter,
 };
 
-export type { ColumnRootProps, ColumnContentProps, ColumnViewportProps, ColumnRowProps };
+export type { ColumnRootProps, ColumnRowProps, ColumnBleedProps, ColumnCenterProps };

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>
       );