@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/components/Message/Message.tsx

@@ -5,13 +5,18 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
 import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
+import { Column } from '../Column';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -34,6 +39,42 @@ type MessageContextValue = { titleId?: string; descriptionId: string; valence: M
 
 const MESSAGE_NAME = 'Message';
 
+// CSS custom properties for valence color inheritance — consumed by Button variant='valence'.
+// Extending CSSProperties so entries satisfy the style prop type without a cast at the use site.
+type ValenceCSSVars = CSSProperties & {
+  '--dx-valence-bg': string;
+  '--dx-valence-bg-hover': string;
+  '--dx-valence-text': string;
+};
+
+const valenceVars: Record<MessageValence, ValenceCSSVars> = {
+  success: {
+    '--dx-valence-bg': 'var(--color-success-bg)',
+    '--dx-valence-bg-hover': 'var(--color-success-bg-hover)',
+    '--dx-valence-text': 'var(--color-success-text)',
+  },
+  info: {
+    '--dx-valence-bg': 'var(--color-info-bg)',
+    '--dx-valence-bg-hover': 'var(--color-info-bg-hover)',
+    '--dx-valence-text': 'var(--color-info-text)',
+  },
+  warning: {
+    '--dx-valence-bg': 'var(--color-warning-bg)',
+    '--dx-valence-bg-hover': 'var(--color-warning-bg-hover)',
+    '--dx-valence-text': 'var(--color-warning-text)',
+  },
+  error: {
+    '--dx-valence-bg': 'var(--color-error-bg)',
+    '--dx-valence-bg-hover': 'var(--color-error-bg-hover)',
+    '--dx-valence-text': 'var(--color-error-text)',
+  },
+  neutral: {
+    '--dx-valence-bg': 'var(--color-neutral-bg)',
+    '--dx-valence-bg-hover': 'var(--color-neutral-bg-hover)',
+    '--dx-valence-text': 'var(--color-neutral-text)',
+  },
+};
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
 //
@@ -58,20 +99,21 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Comp = asChild ? Slot : Primitive.div;
 
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Comp
+        <Column.Root
+          asChild={asChild}
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
-          {...props}
-          className={tx('message.root', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
+          {...props}
+          style={{ ...valenceVars[valence], ...(props.style || {}) }}
+          classNames={tx('message.root', { valence, elevation }, classNames)}
           ref={forwardedRef}
         >
           {children}
-        </Comp>
+        </Column.Root>
       </MessageProvider>
     );
   },
@@ -84,23 +126,41 @@ MessageRoot.displayName = MESSAGE_NAME;
 //
 
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
-  asChild?: boolean;
   icon?: string;
+  onClose?: () => void;
 };
 
-const MESSAGE_TITLE_NAME = 'MessageTitle';
+const MESSAGE_TITLE_NAME = 'Message.Title';
 
-const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
+  ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Comp = asChild ? Slot : Primitive.h2;
     const icon = iconProp ?? messageIcons[valence];
     return (
-      <Comp {...props} className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
-        {!icon && valence === 'neutral' ? <div /> : <Icon icon={icon} classNames={tx('message.icon', { valence })} />}
-        <span className={tx('message.title', {}, classNames)}>{children}</span>
-      </Comp>
+      <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} />
+          </div>
+        )}
+        <h2 className={tx('message.title', {}, classNames)} id={titleId}>
+          {children}
+        </h2>
+        {onClose && (
+          <div className={tx('message.close', {})}>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              density='sm'
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </div>
+        )}
+      </Column.Row>
     );
   },
 );
@@ -115,7 +175,7 @@ type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Pri
   asChild?: boolean;
 };
 
-const MESSAGE_CONTENT_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'Message.Content';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {

package/src/{primitives → components}/Panel/Panel.stories.tsx

@@ -5,10 +5,9 @@
 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 { composable, composableProps } from '../../util';
 import { Panel } from './Panel';
 
 const List = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRef) => {
@@ -53,7 +52,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta = {
-  title: 'ui/react-ui-core/primitives/Panel',
+  title: 'ui/react-ui-core/components/Panel',
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {

package/src/components/Panel/Panel.theme.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+type Size = 'lg' | 'md' | 'sm';
+
+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 root: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
+  mx(
+    'dx-container grid grid-cols-[100%] overflow-hidden',
+    // Add uncategorized children to content slot.
+    '[&>*:not([data-slot])]:[grid-area:content]',
+    ...etc,
+  );
+
+const toolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
+
+const content: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
+
+const statusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
+
+export const panelTheme = {
+  root,
+  toolbar,
+  content,
+  statusbar,
+};

package/src/{primitives → components}/Panel/Panel.tsx

@@ -6,10 +6,11 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type CSSProperties } from 'react';
 
-import { composableProps, PanelStyleProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { PanelStyleProps } from '../../theme';
+import { composableProps, slottable } from '../../util';
 
 //
 // Root

package/src/components/Popover/Popover.theme.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type PopoverStyleProps = Partial<{
+  constrainBlock: boolean;
+  constrainInline: boolean;
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'dx-popover-surface border border-separator rounded-sm',
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'menu' }),
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const viewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
+  mx(
+    '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 &&
+      'max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]',
+    constrainInline && 'max-w-(--radix-popover-content-available-width)',
+    ...etc,
+  );
+
+const arrow: ComponentFunction<PopoverStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+export const popoverTheme: Theme<PopoverStyleProps> = {
+  content,
+  viewport,
+  arrow,
+};

package/src/components/Popover/Popover.tsx

@@ -114,7 +114,7 @@ PopoverRoot.displayName = POPOVER_NAME;
 // PopoverAnchor
 //
 
-const ANCHOR_NAME = 'PopoverAnchor';
+const ANCHOR_NAME = 'Popover.Anchor';
 
 type PopoverAnchorElement = ComponentRef<typeof PopperPrimitive.Anchor>;
 type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
@@ -142,7 +142,7 @@ PopoverAnchor.displayName = ANCHOR_NAME;
 // PopoverTrigger
 //
 
-const TRIGGER_NAME = 'PopoverTrigger';
+const TRIGGER_NAME = 'Popover.Trigger';
 
 type PopoverTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
@@ -187,7 +187,7 @@ PopoverTrigger.displayName = TRIGGER_NAME;
 // PopoverVirtualTrigger
 //
 
-const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
+const VIRTUAL_TRIGGER_NAME = 'Popover.VirtualTrigger';
 
 type PopoverVirtualTriggerProps = {
   virtualRef: RefObject<PopoverTriggerElement | null>;
@@ -211,7 +211,7 @@ PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 // PopoverPortal
 //
 
-const PORTAL_NAME = 'PopoverPortal';
+const PORTAL_NAME = 'Popover.Portal';
 
 type PortalContextValue = { forceMount?: true };
 const [PortalProvider, usePortalContext] = createPopoverContext<PortalContextValue>(PORTAL_NAME, {
@@ -252,7 +252,7 @@ PopoverPortal.displayName = PORTAL_NAME;
 // PopoverContent
 //
 
-const CONTENT_NAME = 'PopoverContent';
+const CONTENT_NAME = 'Popover.Content';
 
 type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
   /**
@@ -512,7 +512,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
 // PopoverClose
 //
 
-const CLOSE_NAME = 'PopoverClose';
+const CLOSE_NAME = 'Popover.Close';
 
 type PopoverCloseElement = ComponentRef<typeof Primitive.button>;
 type PopoverCloseProps = PrimitiveButtonProps;
@@ -538,7 +538,7 @@ PopoverClose.displayName = CLOSE_NAME;
 // PopoverArrow
 //
 
-const ARROW_NAME = 'PopoverArrow';
+const ARROW_NAME = 'Popover.Arrow';
 
 type PopoverArrowElement = ComponentRef<typeof PopperPrimitive.Arrow>;
 type PopperArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>>;

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -8,8 +8,8 @@ import { random } from '@dxos/random';
 import { mx } from '@dxos/ui-theme';
 import { ThemedClassName } from '@dxos/ui-types';
 
-import { Column } from '../../primitives';
 import { withLayout, withTheme } from '../../testing';
+import { Column } from '../Column';
 import { Input } from '../Input';
 import { ScrollArea } from './ScrollArea';
 
@@ -48,11 +48,7 @@ const Row = ({ items = 50 }: { items?: number }) => (
 );
 
 const Container = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className={mx('border border-separator rounded-md overflow-hidden', classNames)}>
-      {children}
-    </div>
-  );
+  return <div className={mx('border border-separator rounded-md overflow-hidden', classNames)}>{children}</div>;
 };
 
 export const Vertical = {

package/src/components/ScrollArea/ScrollArea.theme.ts

@@ -0,0 +1,107 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type ScrollAreaStyleProps = {
+  orientation?: AllowedAxis;
+  autoHide?: boolean;
+  /** Balance left/right, top/bottom offset with scrollbar. */
+  centered?: boolean;
+  /** Add default padding. */
+  /** TODO(burdon): Integrate with Column.Root padding. */
+  padding?: boolean;
+  /** Use thin scrollbars. */
+  /** TODO(burdon): Density fine/course. */
+  thin?: boolean;
+  /** Enable snap scrolling. */
+  snap?: boolean;
+};
+
+const root: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
+  mx(
+    // Expand
+    'dx-container',
+
+    orientation === 'vertical' && 'group/scroll-v flex flex-col',
+    orientation === 'horizontal' && 'group/scroll-h flex',
+    // `flex flex-col` is required (as in `vertical`) so the viewport's `flex-1 min-h-0` can
+    // bound its height; without it the viewport grows to content height and only scrolls
+    // horizontally (the root clips the vertical overflow instead of scrolling it).
+    orientation === 'all' && 'group/scroll-all flex flex-col',
+
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+    '[.dx-column-root_&]:col-span-full',
+
+    ...etc,
+  );
+
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+const viewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, centered, padding, snap, autoHide },
+  ...etc
+) => {
+  return mx(
+    'flex-1 min-h-0 w-full',
+
+    // 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',
+
+    '[&::-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',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ],
+
+    ...etc,
+  );
+};
+
+export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
+  root,
+  viewport,
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -7,10 +7,11 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { CSSProperties, useMemo } from 'react';
 
-import { composableProps, scrollbar, slottable } from '@dxos/ui-theme';
 import { type AllowedAxis, type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
+import { scrollbar } from './scrollbar';
 
 //
 // Context
@@ -92,7 +93,7 @@ type ScrollAreaViewportProps = SlottableProps;
 const ScrollAreaViewport = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
-  const density = options.thin ? scrollbar.thin : scrollbar.coarse;
+  const density = options.thin ? scrollbar.md : scrollbar.lg;
   const { className, ...rest } = composableProps(props);
   const { style, ...restWithoutStyle } = rest as { style?: CSSProperties; [key: string]: any };
   const Comp = asChild ? Slot : Primitive.div;

package/src/components/ScrollArea/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './ScrollArea';
+export * from './scrollbar';

package/src/components/ScrollArea/scrollbar.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Scrollbar sizing presets keyed by density tier.
+ */
+export const scrollbar = {
+  sm: {
+    size: 2,
+    padding: 2,
+  },
+  md: {
+    size: 4,
+    padding: 4,
+  },
+  lg: {
+    size: 8,
+    padding: 8,
+  },
+};

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -7,9 +7,9 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { random } from '@dxos/random';
 
-import { Panel } from '../../primitives';
 import { withLayout, withTheme } from '../../testing';
 import { Button } from '../Button';
+import { Panel } from '../Panel';
 import { Toolbar } from '../Toolbar';
 import { ScrollContainer, type ScrollContainerRootProps, type ScrollController } from './ScrollContainer';