@dxos/ui-theme 0.8.4-main.c85a9c8dae → 0.8.4-main.e00bdcdb52

package/src/theme/components/input.ts

@@ -11,23 +11,8 @@ import {
   type Size,
 } from '@dxos/ui-types';
 
-import {
-  coarseBlockSize,
-  coarseDimensions,
-  computeSize,
-  fineBlockSize,
-  fineDimensions,
-  focusRing,
-  getSize,
-  getSizeHeight,
-  getSizeWidth,
-  sizeValue,
-  staticDisabled,
-  staticFocusRing,
-  subduedFocus,
-  textValence,
-} from '../../fragments';
-import { mx } from '../../util';
+import { densityDimensions, staticDisabled } from '../../fragments';
+import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '../../util';
 
 export type InputStyleProps = Partial<{
   variant: 'default' | 'subdued' | 'static';
@@ -73,30 +58,30 @@ 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,
-  subduedFocus,
+  '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',
   inputValence(props.validationValence),
   props.disabled && staticDisabled,
-  props.focused && staticFocusRing,
+  props.focused && 'dx-focus-static',
 ];
 
 const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
@@ -106,28 +91,28 @@ const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
       ? mx(...sharedStaticInputStyles(props), ...etc)
       : mx(
           ...sharedDefaultInputStyles(props),
-          !props.disabled && focusRing,
+          !props.disabled && 'dx-focus-ring',
           inputValence(props.validationValence),
           ...etc,
         );
 
-const inputTextArea: ComponentFunction<InputStyleProps> = (props, ...etc) => inputInput(props, ...['-mb-1.5', ...etc]);
+const inputTextArea: ComponentFunction<InputStyleProps> = (props, ...etc) => inputInput(props, ...etc);
 
 const inputCheckbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
   mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
 
 const inputCheckboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
-  mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
+  mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
 
 const inputSwitch: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
   mx(
-    getSizeHeight(size),
-    getSizeWidth(computeSize(sizeValue(size) * 1.75, 9)),
+    getHeight(size),
+    getWidth(snapSize(sizeValue(size) * 1.75, 9)),
     booleanInputSurface,
     !disabled && booleanInputSurfaceHover,
     // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
     'cursor-pointer shrink-0 rounded-full px-1 mx-1 relative',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/link.ts

@@ -4,7 +4,6 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { focusRing } from '../../fragments';
 import { mx } from '../../util';
 
 export type LinkStyleProps = {
@@ -17,7 +16,7 @@ export const linkRoot: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc)
     variant === 'neutral'
       ? 'text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90'
       : 'text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/list.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
-import { densityBlockSize, focusRing, getSize, ghostHover } from '../../fragments';
-import { mx } from '../../util';
+import { densityBlockSize, ghostHover } from '../../fragments';
+import { getSize, mx } from '../../util';
 
 export type ListStyleProps = Partial<{
   density: Density;
@@ -21,13 +21,13 @@ export const listItemEndcap: ComponentFunction<ListStyleProps> = ({ density }, .
   mx(density === 'fine' ? getSize(8) : getSize(10), 'shrink-0 flex items-center justify-center', ...etc);
 
 export const listItemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx(densityBlockSize(density), 'flex items-center', ...etc);
+  mx(densityBlockSize(density), 'flex items-center overflow-hidden [&>span]:truncate', ...etc);
 
 export const listItemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) =>
   mx(getSize(5), 'mt-2.5', ...etc);
 
 export const listItemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, focusRing, ...etc);
+  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, 'dx-focus-ring', ...etc);
 
 export const listItemOpenTriggerIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => {
   return mx(getSize(5), ...etc);

package/src/theme/components/menu.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { dataDisabled, subduedFocus, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { dataDisabled } from '../../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type MenuStyleProps = Partial<{
   constrainBlockSize: boolean;
@@ -26,8 +26,8 @@ export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc)
 export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
   mx(
     'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
-    'data-[highlighted]:bg-hover-surface',
-    subduedFocus,
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
     dataDisabled,
     ...etc,
   );

package/src/theme/components/message.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
 
-import { messageValence } from '../../fragments';
-import { mx } from '../../util';
+import { mx, messageValence } from '../../util';
 
 export type MessageStyleProps = {
   valence?: MessageValence;
@@ -21,7 +20,7 @@ export const messageHeader: ComponentFunction<MessageStyleProps> = (_, etc) => {
 };
 
 export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-2 text-lg gap-trim-sm [&>svg]:inline-block', etc);
+  return mx('col-start-2 gap-trim-sm [&>svg]:inline-block', etc);
 };
 
 export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {

package/src/theme/components/popover.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { focusRing, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type PopoverStyleProps = Partial<{
   constrainBlock: boolean;
@@ -18,15 +17,15 @@ export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation
     'dx-modal-surface border border-separator rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 
 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',
-    // Ensures it respects available height from Radix (or 100dvh).
+    constrainBlock && 'max-h-(--radix-popover-content-available-height)',
     constrainBlock &&
       'max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]',
     constrainInline && 'max-w-(--radix-popover-content-available-width)',

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

@@ -5,12 +5,24 @@
 import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
+
+export const scrollbar = {
+  thin: {
+    size: 4,
+    padding: 4,
+  },
+  coarse: {
+    size: 8,
+    padding: 8,
+  },
+};
 
 export type ScrollAreaStyleProps = {
   orientation?: AllowedAxis;
   autoHide?: boolean;
-  /** Balance left/right, top/bottom "margin" with scrollbar. */
-  margin?: boolean;
+  /** Balance left/right, top/bottom offset with scrollbar. */
+  centered?: boolean;
   /** Add default padding. */
   /** TODO(burdon): Integrate with Column.Root padding. */
   padding?: boolean;
@@ -21,29 +33,17 @@ export type ScrollAreaStyleProps = {
   snap?: boolean;
 };
 
-export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation, margin, thin }, ...etc) =>
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
   mx(
-    'overflow-hidden',
-
-    orientation === 'vertical' && 'group/scroll-v dx-container',
-    orientation === 'horizontal' && 'group/scroll-h dx-container',
-    orientation === 'all' && 'group/scroll-all dx-container',
-
-    // TODO(burdon): Audit composition.
-    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-    '[.dx-column_&]:col-span-full',
-
-    // NOTE: Uses --gutter CSS variable
-    // If contained within Column.Root grid, the gutter is set by that component.
-    margin && [
-      orientation === 'vertical' &&
-        (thin
-          ? 'pl-[var(--gutter,4px)] pr-[calc(var(--gutter,4px)-4px)]'
-          : 'pl-[var(--gutter,8px)] pr-[calc(var(--gutter,8px)-8px)]'),
-      orientation === 'horizontal' && (thin ? 'py-[var(--gutter,4px)]' : 'py-[var(--gutter,8px)]'),
-      orientation === 'all' &&
-        (thin ? 'pl-[var(--gutter,4px)] py-[var(--gutter,8px)]' : 'pl-[var(--gutter,8px)] py-[var(--gutter,8px)]'),
-    ],
+    // Expand
+    'dx-container',
+
+    orientation === 'vertical' && 'group/scroll-v flex flex-col',
+    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-root marker).
+    '[.dx-column-root_&]:col-span-full',
 
     ...etc,
   );
@@ -52,24 +52,47 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
  * NOTE: The browser reserves space for scrollbars.
  */
 export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
-  { orientation, autoHide, padding, snap, thin },
+  { orientation, centered, padding, snap, autoHide },
   ...etc
-) =>
-  mx(
-    'h-full w-full',
+) => {
+  return mx(
+    'flex-1 min-h-0 w-full',
 
-    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
-    orientation === 'horizontal' && 'flex overflow-x-scroll',
-    orientation === 'all' && 'overflow-scroll',
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
 
-    thin
-      ? '[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar]:h-[4px]'
-      : '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:h-[8px]',
+    orientation === 'vertical' && 'overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
+    orientation === 'all' && 'overflow-scroll',
 
     '[&::-webkit-scrollbar-corner]:bg-transparent',
     '[&::-webkit-scrollbar-track]:bg-transparent',
     '[&::-webkit-scrollbar-thumb]:rounded-none',
 
+    '[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]',
+
+    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
+    // If centered, left padding compensates for scrollbar width so content is visually centered.
+    (orientation === 'vertical' || orientation === 'all') &&
+      (padding
+        ? [
+            centered ? 'pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]' : 'pl-[var(--gutter,0)]',
+            'pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]',
+          ]
+        : centered && 'pl-[var(--scroll-width)]'),
+
+    (orientation === 'horizontal' || orientation === 'all') &&
+      (padding
+        ? [centered && 'pt-[calc(var(--scroll-width)+var(--scroll-padding))]', 'pb-[var(--scroll-padding)]']
+        : centered && 'pt-[var(--scroll-width)]'),
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
     autoHide
       ? [
           orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
@@ -82,20 +105,9 @@ export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
           orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
         ],
 
-    padding && [
-      orientation === 'vertical' && 'px-[4px]',
-      orientation === 'horizontal' && 'pb-[4px]',
-      orientation === 'all' && 'pl-[4px] pb-[4px]',
-    ],
-
-    snap && [
-      orientation === 'vertical' && 'snap-y snap-mandatory',
-      orientation === 'horizontal' && 'snap-x snap-mandatory',
-      orientation === 'all' && 'snap-both snap-mandatory',
-    ],
-
     ...etc,
   );
+};
 
 export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
   root: scrollAreaRoot,

package/src/theme/components/select.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { ghostHighlighted, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type SelectStyleProps = Partial<{
   elevation: Elevation;
@@ -28,7 +27,7 @@ export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc)
     'flex items-center min-h-[2rem] px-3 py-1 gap-2',
     'text-base-surface-text leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
-    ghostHighlighted,
+    'dx-highlighted',
     ...etc,
   );
 

package/src/theme/components/status.ts

@@ -7,21 +7,21 @@ import type { ComponentFunction, Theme } from '@dxos/ui-types';
 import { mx } from '../../util';
 
 export type StatusStyleProps = {
-  indeterminate?: boolean;
   variant?: 'default' | 'main-bottom';
+  indeterminate?: boolean;
 };
 
 export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
   mx(
-    'h-1 relative bg-hover-overlay rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block',
+    'h-1 relative rounded-full overflow-hidden',
+    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
     ...etc,
   );
 
-export const statusBar: ComponentFunction<StatusStyleProps> = ({ indeterminate, variant = 'default' }, ...etc) =>
+export const statusBar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
   mx(
     'absolute inset-y-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-accent-surface' : 'bg-un-accent',
+    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
     indeterminate ? 'animate-progress-indeterminate' : 'start-0',
     ...etc,
   );

package/src/theme/components/toast.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { focusRing, surfaceShadow } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow } from '../../util';
 
 export type ToastStyleProps = Partial<{
   srOnly: boolean;
@@ -28,7 +27,7 @@ export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
     'radix-swipe-end:animate-toast-swipe-out',
     'translate-x-radix-toast-swipe-move-x',
     'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/toolbar.ts

@@ -4,7 +4,6 @@
 
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
-import { textBlockWidth } from '../../fragments';
 import { mx } from '../../util';
 
 export type ToolbarStyleProps = Partial<{
@@ -26,16 +25,11 @@ export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, dis
   );
 };
 
-export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && ['flex gap-1', textBlockWidth], ...etc);
-};
-
 export const toolbarText: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
-  return mx('grow truncate items-center', textBlockWidth, ...etc);
+  return mx('px-2 grow truncate items-center', ...etc);
 };
 
 export const toolbarTheme: Theme<ToolbarStyleProps> = {
   root: toolbarRoot,
-  inner: toolbarInner,
   text: toolbarText,
 };

package/src/theme/components/tooltip.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;

package/src/theme/components/treegrid.ts

@@ -25,7 +25,7 @@ const levelStyles = new Map<number, string>([
 export const treegridRoot: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
 
 export const treegridRow: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
-  mx('contents', levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
 
 export const treegridCell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) =>
   mx(indent && 'indent', ...etc);

package/src/theme/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './components';
+export * from './primitives';
 export * from './theme';

package/src/theme/primitives/column.ts

@@ -6,25 +6,66 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-const columnRoot: ComponentFunction<Record<string, any>> = (_, ...etc) => mx('dx-column w-full min-w-0 grid', ...etc);
+/**
+ * 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-root grid', ...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.
  */
-const columnRow: ComponentFunction<Record<string, any>> = (_, ...etc) =>
-  mx('col-span-3 grid grid-cols-subgrid', ...etc);
+const columnRow: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
+};
 
 /**
- * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
- * Occupies only the center column (col-2) of the parent Column.Root grid.
+ * 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);
+};
+
+/**
+ * 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 columnSegment: ComponentFunction<Record<string, any>> = (_, ...etc) =>
-  mx('col-start-2 col-span-1 min-w-0', ...etc);
+const columnCenter: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
+};
 
 export const columnTheme = {
   root: columnRoot,
   row: columnRow,
-  segment: columnSegment,
+  bleed: columnBleed,
+  center: columnCenter,
 };

package/src/theme/primitives/panel.ts

@@ -6,38 +6,34 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type PanelProps = {};
+type Size = 'lg' | 'md' | 'sm';
 
-const panelRoot: ComponentFunction<PanelProps> = (_, ...etc) =>
+export type PanelStyleProps = {
+  size?: Size;
+};
+
+const sizes: Record<Size, string> = {
+  lg: 'h-(--dx-topbar-size)',
+  md: 'h-(--dx-toolbar-size)',
+  sm: 'h-(--dx-statusbar-size)',
+};
+
+const panelRoot: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
   mx(
     // prettier-ignore
-    'h-full w-full grid grid-cols-[100%] overflow-hidden',
+    'dx-container grid grid-cols-[100%] overflow-hidden',
+    // Add uncategorized children to content slot.
     '[&>*:not([data-slot])]:[grid-area:content]',
     ...etc,
   );
 
-const panelToolbar: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:toolbar]',
-    'border-b border-subdued-separator relative',
-    '[.dx-main-mobile-layout_&]:px-3',
-    ...etc,
-  );
+const panelToolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
 
-const panelContent: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:content] overflow-hidden min-h-0',
-    ...etc,
-  );
+const panelContent: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
 
-const panelStatusbar: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:statusbar]',
-    ...etc,
-  );
+const panelStatusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
 
 export const panelTheme = {
   root: panelRoot,

package/src/theme/theme.ts

@@ -11,6 +11,7 @@ import {
   buttonTheme,
   cardTheme,
   dialogTheme,
+  focusTheme,
   iconButtonTheme,
   iconTheme,
   inputTheme,
@@ -53,6 +54,7 @@ export const defaultTheme: Theme<Record<string, any>> = {
   button: buttonTheme,
   card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,

package/src/typings.d.ts

@@ -5,3 +5,6 @@
 declare module 'fast-glob';
 declare module 'tailwindcss/stubs/config.full.js';
 declare module 'tailwindcss-radix';
+
+/** Virtual CSS entry from ThemePlugin (`virtualFileId: '@dxos-theme'`). */
+declare module '@dxos-theme';

package/src/util/index.ts

@@ -2,5 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './elevation';
 export * from './hash-styles';
 export * from './mx';
+export * from './size';
+export * from './valence';