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

package/src/theme/components/icon-button.ts

@@ -7,10 +7,13 @@ import type { ComponentFunction, Theme } from '@dxos/ui-types';
 import { mx } from '../../util';
 import { type ButtonStyleProps } from './button';
 
-export type IconButtonStyleProps = ButtonStyleProps & { iconOnly?: boolean };
+export type IconButtonStyleProps = ButtonStyleProps & {
+  iconOnly?: boolean;
+  square?: boolean;
+};
 
-export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly }, ...etc) => {
-  return mx('px-1.5', !iconOnly && 'gap-2', ...etc);
+export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
+  return mx('px-1.5', !iconOnly && 'gap-2', square && 'aspect-square', ...etc);
 };
 
 export const iconButtonTheme: Theme<IconButtonStyleProps> = {

package/src/theme/components/input.ts

@@ -11,7 +11,7 @@ import {
   type Size,
 } from '@dxos/ui-types';
 
-import { coarseBlockSize, coarseDimensions, fineBlockSize, fineDimensions, staticDisabled } from '../../fragments';
+import { densityDimensions, staticDisabled } from '../../fragments';
 import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '../../util';
 
 export type InputStyleProps = Partial<{
@@ -58,24 +58,24 @@ const inputValence = (valence?: MessageValence) => {
 };
 
 const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full bg-transparent text-current placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === 'fine' ? fineBlockSize : coarseBlockSize,
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
   'dx-focus-subdued',
+  densityDimensions(props.density),
   props.disabled && staticDisabled,
 ];
 
 const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
-  props.density === 'fine' ? fineDimensions : coarseDimensions,
+  densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover,
 ];
 
 const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && 'bg-attention-surface',

package/src/theme/components/message.ts

@@ -12,23 +12,23 @@ export type MessageStyleProps = {
 };
 
 export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
-  return mx('grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm', messageValence(valence), etc);
+  return mx('grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm', messageValence(valence), etc);
 };
 
 export const messageHeader: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-span-2 grid grid-cols-subgrid items-center', etc);
+  return mx('col-span-full grid grid-cols-subgrid items-center', etc);
 };
 
 export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-2 gap-trim-sm [&>svg]:inline-block', etc);
+  return mx('col-start-2 truncate', etc);
 };
 
 export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-1', etc);
+  return mx('col-start-1 grid place-items-center', etc);
 };
 
 export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('grid grid-cols-subgrid col-start-2 first:font-medium', etc);
+  return mx('col-start-2 grid grid-cols-subgrid first:font-medium', etc);
 };
 
 export const messageTheme: Theme<MessageStyleProps> = {

package/src/theme/components/popover.ts

@@ -23,7 +23,7 @@ export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation
 
 export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
   mx(
-    'flex flex-col min-h-0 min-w-popover-min-width',
+    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
     (constrainBlock || constrainInline) && 'overflow-hidden',
     constrainBlock && 'max-h-(--radix-popover-content-available-height)',
     constrainBlock &&

package/src/theme/components/scroll-area.ts

@@ -5,6 +5,7 @@
 import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
 
 export const scrollbar = {
   thin: {
@@ -41,8 +42,8 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
     orientation === 'horizontal' && 'group/scroll-h flex',
     orientation === 'all' && 'group/scroll-all',
 
-    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-    '[.dx-column_&]:col-span-full',
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+    '[.dx-column-root_&]:col-span-full',
 
     ...etc,
   );
@@ -51,13 +52,17 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
  * NOTE: The browser reserves space for scrollbars.
  */
 export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
-  { orientation, centered, padding, snap, thin, autoHide },
+  { orientation, centered, padding, snap, autoHide },
   ...etc
 ) => {
   return mx(
-    'h-full w-full',
+    'flex-1 min-h-0 w-full',
 
-    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+
+    orientation === 'vertical' && 'overflow-y-scroll',
     orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
     orientation === 'all' && 'overflow-scroll',
 

package/src/theme/primitives/column.ts

@@ -6,42 +6,66 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type ColumnStyleProps = {
-  fullWidth?: boolean;
-  center?: boolean;
+/**
+ * Column-aware theme utilities.
+ * Components apply these in their theme functions to participate in the Column grid
+ * without importing Column React components.
+ *
+ * CSS custom property cascade:
+ * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
+ * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
+ * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
+ *   or do nothing outside Column / inside ScrollArea.
+ */
+export const withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => '[grid-column:var(--dx-col,auto)]',
+
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+   *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () =>
+    '[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]',
+
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => '[--dx-col:auto]',
 };
 
+export type ColumnStyleProps = {};
+
 const columnRoot: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('dx-column grid', ...etc);
+  return mx('dx-column-root grid', ...etc);
 };
 
 /**
- * Full-width content area that inherits the parent Column.Root's 3-column grid via subgrid.
- * Non-scrolling children default to column 2 (center, between gutters).
- * ScrollArea children span all 3 columns via the existing `[.dx-column_&]:col-span-full` selector.
- * This avoids padding/overflow conflicts — gutters come from the grid, not padding.
+ * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
+ * Uses CSS subgrid to inherit column sizing from the parent Column.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
  */
-const columnContent: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('col-span-full grid grid-cols-subgrid min-h-0 [&>:not(.dx-container)]:col-start-2', ...etc);
+const columnRow: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
 };
 
-const columnViewport: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx(...etc);
+/**
+ * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
+ */
+const columnBleed: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-full grid grid-cols-subgrid min-h-0', ...etc);
 };
 
 /**
- * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
- * Uses CSS subgrid to inherit column sizing from the parent Column.
- * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
- * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ * Center placement: places the element in column 2 (the central track between gutters) of the
+ * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
+ * Safe to nest arbitrary compound components (including those that render `display: contents`).
  */
-const columnRow: ComponentFunction<ColumnStyleProps> = ({ fullWidth, center }, ...etc) => {
-  return mx('col-span-3 grid grid-cols-subgrid', fullWidth ? 'col-span-3' : center && 'col-start-2 col-span-1', ...etc);
+const columnCenter: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
 };
 
 export const columnTheme = {
   root: columnRoot,
-  content: columnContent,
-  viewport: columnViewport,
   row: columnRow,
+  bleed: columnBleed,
+  center: columnCenter,
 };

package/src/util/mx.ts

@@ -89,6 +89,9 @@ export const composableProps = <P extends HTMLElement = HTMLElement>(
   className: mx(defaultClassNames, className, classNames),
 });
 
+/** Symbol used to mark components created by `composable()` or `slottable()`. */
+const COMPOSABLE = Symbol.for('dxos.composable');
+
 /**
  * Factory for slottable components.
  * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
@@ -109,9 +112,6 @@ export const composableProps = <P extends HTMLElement = HTMLElement>(
  * );
  * ```
  */
-/** Symbol used to mark components created by `composable()` or `slottable()`. */
-const COMPOSABLE = Symbol.for('dxos.composable');
-
 export function slottable<E extends HTMLElement, P extends object = {}>(
   render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
 ): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {