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

package/src/components/List/Treegrid.tsx

@@ -15,14 +15,13 @@ import React, {
   useCallback,
 } from 'react';
 
-import { composable, composableProps } from '@dxos/ui-theme';
-
 import { useThemeContext } from '../../hooks';
+import { composable, composableProps } from '../../util';
 import { type ThemedClassName } from '../../util';
 
 // TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
 
-const TREEGRID_ROW_NAME = 'TreegridRow';
+const TREEGRID_ROW_NAME = 'Treegrid.Row';
 
 type TreegridRowScopedProps<P> = P & { __treegridRowScope?: Scope };
 
@@ -41,7 +40,7 @@ export const TREEGRID_PATH_SEPARATOR = '~';
 export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
 
 type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  gridTemplateColumns: CSSProperties['gridTemplateColumns'];
+  gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
   asChild?: boolean;
 };
 

package/src/components/Main/Main.theme.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mainPaddingTransitions } from './constants';
+
+const padding = 'dx-main-content-padding';
+
+export type MainStyleProps = Partial<{
+  bounce: boolean;
+  handlesFocus: boolean;
+}>;
+
+const content: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
+  mx(padding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
+
+const sidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
+
+const overlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
+
+export const mainTheme = {
+  content,
+  sidebar,
+  overlay,
+};

package/src/components/Main/Main.tsx

@@ -25,18 +25,20 @@ import React, {
 import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
-import { type MainStyleProps, osTranslations } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
+import { type Label, toLocalizedString, useTranslation } from '../../primitives';
+import { type MainStyleProps } from '../../theme';
 import { type ThemedClassName } from '../../util';
-import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
 const MAIN_NAME = 'Main';
-const MAIN_ROOT_NAME = 'MainRoot';
-const MAIN_OVERLAY_NAME = 'MainOverlay';
-const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
-const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
+const MAIN_ROOT_NAME = 'Main.Root';
+const MAIN_OVERLAY_NAME = 'Main.Overlay';
+const MAIN_CONTENT_NAME = 'Main.Content';
+const NAVIGATION_SIDEBAR_NAME = 'Main.NavigationSidebar';
+const COMPLEMENTARY_SIDEBAR_NAME = 'Main.ComplementarySidebar';
 
 const handleOpenAutoFocus = (event: Event) => {
   !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
@@ -412,7 +414,7 @@ const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
   },
 );
 
-MainContent.displayName = MAIN_NAME;
+MainContent.displayName = MAIN_CONTENT_NAME;
 
 //
 // Main

package/src/components/Main/constants.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
+export const mainIntrinsicSize = 'dx-main-intrinsic-size';

package/src/components/Main/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Main';
+export * from './constants';

package/src/components/MediaPlayer/MediaPlayer.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { MediaPlayer } from './MediaPlayer';
+
+const meta = {
+  title: 'ui/react-ui-core/components/MediaPlayer',
+  component: MediaPlayer,
+  decorators: [withTheme()],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof MediaPlayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Video: Story = {
+  args: {
+    // TODO(burdon): CORS issue.
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/downloads/default.mp4',
+    classNames: 'max-w-[640px]',
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const ExplicitKind: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    kind: 'audio',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/iframe?poster=https%3A%2F%2Fcustomer-5rxcjpyab08avpmn.cloudflarestream.com%2Ff58459bcdf3a6f3e93644a4e0f39b22a%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600',
+    classNames: 'min-w-[480px]',
+  },
+};

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -0,0 +1,182 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemedClassName } from '../../util';
+
+export type MediaKind = 'video' | 'audio';
+
+export type MediaFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+/** Static map to keep Tailwind's class scanner happy (no dynamic `object-${fit}`). */
+const FIT_CLASS: Record<MediaFit, string> = {
+  cover: 'object-cover',
+  contain: 'object-contain',
+  fill: 'object-fill',
+  none: 'object-none',
+  'scale-down': 'object-scale-down',
+};
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/** iframe sandbox flags compatible with typical oEmbed-style players. */
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation';
+
+/**
+ * Best-effort detection of `video` vs `audio` from a media URL.
+ * Inspects the pathname's extension (ignoring query/hash). Returns `undefined`
+ * when the URL doesn't look like a recognised media file — callers should
+ * default to 'video' or render a fallback (e.g. iframe / img).
+ */
+export const detectMediaKind = (src: string): MediaKind | undefined => {
+  // Strip query and hash, then take the last path segment's extension.
+  const pathname = src.split(/[?#]/, 1)[0]!;
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'video';
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'audio';
+  }
+
+  return undefined;
+};
+
+/**
+ * Heuristic match for URLs that should render as native `<video>` / `<audio>`
+ * (i.e. URLs ending in a recognised media extension).
+ *
+ * NB: Cloudflare Stream embed URLs serve an HTML player page, **not** a media
+ * stream, so they cannot be loaded via `<video>`. Those are detected by
+ * {@link isCloudflareStreamEmbed} and rendered via `<iframe>` instead.
+ */
+export const isEmbedUrl = (src: string): boolean => detectMediaKind(src) !== undefined;
+
+/**
+ * Match Cloudflare Stream `/iframe` embed URLs of the form
+ * `https://customer-<code>.cloudflarestream.com/<32-hex-uid>/iframe[?…]`.
+ */
+const CLOUDFLARE_STREAM_IFRAME_PATTERN =
+  /^https:\/\/[a-z0-9-]+\.cloudflarestream\.com\/[a-f0-9]{32}\/iframe(?:[/?#]|$)/i;
+
+const isCloudflareStreamEmbed = (src: string): boolean => CLOUDFLARE_STREAM_IFRAME_PATTERN.test(src);
+
+export type MediaPlayerProps = ThemedClassName<{
+  src: string;
+  alt?: string;
+  /** Override auto-detection. When omitted, `detectMediaKind(src)` is used and falls back to 'video'. */
+  kind?: MediaKind;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  /**
+   * CORS mode for `<video>`/`<audio>`. Omitted by default — plain playback needs no CORS, and
+   * forcing it breaks sources whose response/redirect lacks `access-control-allow-origin` (e.g.
+   * Cloudflare Stream's signed MP4 redirect). Set 'anonymous' only when reading frames into a canvas.
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /** CSS `object-fit` for `<img>` and `<video>`. Ignored for `<iframe>`/`<audio>`. Defaults to 'cover'. */
+  fit?: MediaFit;
+}>;
+
+/**
+ * Renders a media URL using the appropriate element:
+ * - Direct media URLs (mp4, mp3, …) → native `<video>` / `<audio>`.
+ * - Cloudflare Stream `/iframe` embed URLs → `<iframe>`.
+ * - Everything else → `<img>` that hides itself on load failure (broken images
+ *   are common in feeds and the placeholder is uglier than nothing).
+ */
+export const MediaPlayer = ({
+  classNames,
+  src,
+  kind,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  alt,
+  crossOrigin,
+  fit = 'cover',
+}: MediaPlayerProps) => {
+  const fitClass = FIT_CLASS[fit];
+  if (isEmbedUrl(src)) {
+    const resolved = kind ?? detectMediaKind(src) ?? 'video';
+    if (resolved === 'audio') {
+      return (
+        <audio
+          className={mx('w-full', classNames)}
+          src={src}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          crossOrigin={crossOrigin}
+          aria-label={alt}
+        />
+      );
+    }
+
+    return (
+      <video
+        className={mx('max-w-full max-h-full aspect-video', fitClass, classNames)}
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    );
+  }
+
+  if (isCloudflareStreamEmbed(src)) {
+    return <IframePlayer key={src} classNames={classNames} src={src} alt={alt} />;
+  }
+
+  return (
+    <img
+      className={mx(fitClass, classNames)}
+      src={src}
+      alt={alt ?? ''}
+      loading='lazy'
+      onError={(event) => {
+        event.currentTarget.style.display = 'none';
+      }}
+    />
+  );
+};
+
+type IframePlayerProps = ThemedClassName<{
+  src: string;
+  alt?: string;
+}>;
+
+const IframePlayer = ({ src, alt, classNames }: IframePlayerProps) => {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <div className={mx('relative bg-baseSurface', classNames)}>
+      <iframe
+        src={src}
+        title={alt ?? 'Embedded media'}
+        loading='lazy'
+        className={mx(
+          'border-none w-full h-full transition-opacity duration-150',
+          loaded ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{ colorScheme: 'dark' }}
+        sandbox={DEFAULT_IFRAME_SANDBOX}
+        referrerPolicy='no-referrer'
+        allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;'
+        allowFullScreen
+        onLoad={() => setLoaded(true)}
+      />
+    </div>
+  );
+};

package/src/components/MediaPlayer/index.ts

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

package/src/components/Menu/ContextMenu.stories.tsx

@@ -103,7 +103,4 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  parameters: {
-    chromatic: { delay: 1600 },
-  },
 };

package/src/components/Menu/DropdownMenu.stories.tsx

@@ -103,9 +103,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  parameters: {
-    chromatic: { delay: 1600 },
-  },
 };
 
 export const VirtualTrigger = {

package/src/components/Menu/DropdownMenu.tsx

@@ -107,7 +107,7 @@ DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 // DropdownMenuTrigger
 //
 
-const TRIGGER_NAME = 'DropdownMenuTrigger';
+const TRIGGER_NAME = 'DropdownMenu.Trigger';
 
 type DropdownMenuTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
@@ -172,7 +172,7 @@ DropdownMenuTrigger.displayName = TRIGGER_NAME;
 // DropdownMenuVirtualTrigger
 //
 
-const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
+const VIRTUAL_TRIGGER_NAME = 'DropdownMenu.VirtualTrigger';
 
 type DropdownMenuVirtualTriggerProps = {
   virtualRef: RefObject<DropdownMenuTriggerElement | null>;
@@ -196,7 +196,7 @@ DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 // DropdownMenuPortal
 //
 
-const PORTAL_NAME = 'DropdownMenuPortal';
+const PORTAL_NAME = 'DropdownMenu.Portal';
 
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
 type DropdownMenuPortalProps = MenuPortalProps;
@@ -233,7 +233,7 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
 // DropdownMenuContent
 //
 
-const CONTENT_NAME = 'DropdownMenuContent';
+const CONTENT_NAME = 'DropdownMenu.Content';
 
 type DropdownMenuContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
@@ -312,7 +312,7 @@ DropdownMenuContent.displayName = CONTENT_NAME;
 // DropdownMenuGroup
 //
 
-const GROUP_NAME = 'DropdownMenuGroup';
+const GROUP_NAME = 'DropdownMenu.Group';
 
 type DropdownMenuGroupElement = ComponentRef<typeof MenuPrimitive.Group>;
 type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
@@ -332,7 +332,7 @@ DropdownMenuGroup.displayName = GROUP_NAME;
 // DropdownMenuLabel
 //
 
-const LABEL_NAME = 'DropdownMenuLabel';
+const LABEL_NAME = 'DropdownMenu.Label';
 
 type DropdownMenuLabelElement = ComponentRef<typeof MenuPrimitive.Label>;
 type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
@@ -360,7 +360,7 @@ DropdownMenuGroupLabel.displayName = LABEL_NAME;
 // DropdownMenuItem
 //
 
-const ITEM_NAME = 'DropdownMenuItem';
+const ITEM_NAME = 'DropdownMenu.Item';
 
 type DropdownMenuItemElement = ComponentRef<typeof MenuPrimitive.Item>;
 type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
@@ -388,7 +388,7 @@ DropdownMenuItem.displayName = ITEM_NAME;
 // DropdownMenuCheckboxItem
 //
 
-const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
+const CHECKBOX_ITEM_NAME = 'DropdownMenu.CheckboxItem';
 
 type DropdownMenuCheckboxItemElement = ComponentRef<typeof MenuPrimitive.CheckboxItem>;
 type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
@@ -416,7 +416,7 @@ DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 // DropdownMenuRadioGroup
 //
 
-const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
+const RADIO_GROUP_NAME = 'DropdownMenu.RadioGroup';
 
 type DropdownMenuRadioGroupElement = ComponentRef<typeof MenuPrimitive.RadioGroup>;
 type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
@@ -436,7 +436,7 @@ DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 // DropdownMenuRadioItem
 //
 
-const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
+const RADIO_ITEM_NAME = 'DropdownMenu.RadioItem';
 
 type DropdownMenuRadioItemElement = ComponentRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
@@ -464,7 +464,7 @@ DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 // DropdownMenuItemIndicator
 //
 
-const INDICATOR_NAME = 'DropdownMenuItemIndicator';
+const INDICATOR_NAME = 'DropdownMenu.ItemIndicator';
 
 type DropdownMenuItemIndicatorElement = ComponentRef<typeof MenuPrimitive.ItemIndicator>;
 type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
@@ -484,7 +484,7 @@ DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 // DropdownMenuSeparator
 //
 
-const SEPARATOR_NAME = 'DropdownMenuSeparator';
+const SEPARATOR_NAME = 'DropdownMenu.Separator';
 
 type DropdownMenuSeparatorElement = ComponentRef<typeof MenuPrimitive.Separator>;
 type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
@@ -512,7 +512,7 @@ DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 // DropdownMenuArrow
 //
 
-const ARROW_NAME = 'DropdownMenuArrow';
+const ARROW_NAME = 'DropdownMenu.Arrow';
 
 type DropdownMenuArrowElement = ComponentRef<typeof MenuPrimitive.Arrow>;
 type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
@@ -567,7 +567,7 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
 // DropdownMenuSubTrigger
 //
 
-const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
+const SUB_TRIGGER_NAME = 'DropdownMenu.SubTrigger';
 
 type DropdownMenuSubTriggerElement = ComponentRef<typeof MenuPrimitive.SubTrigger>;
 type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
@@ -587,7 +587,7 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 // DropdownMenuSubContent
 //
 
-const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
+const SUB_CONTENT_NAME = 'DropdownMenu.SubContent';
 
 type DropdownMenuSubContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;

package/src/components/Menu/Menu.theme.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { dataDisabled } from '@dxos/ui-theme';
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type MenuStyleProps = Partial<{
+  constrainBlockSize: boolean;
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'dx-popover-surface w-48 rounded-sm md:w-56 border border-separator',
+    surfaceZIndex({ elevation, level: 'menu' }),
+    surfaceShadow({ elevation: 'positioned' }),
+    ...etc,
+  );
+
+const viewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto', ...etc);
+
+const item: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
+    dataDisabled,
+    ...etc,
+  );
+
+const separator: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('my-1 mx-2 h-px bg-separator', ...etc);
+
+const groupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('text-description', 'select-none px-2 py-2', ...etc);
+
+const arrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+export const menuTheme: Theme<MenuStyleProps> = {
+  content,
+  viewport,
+  item,
+  separator,
+  groupLabel,
+  arrow,
+};

package/src/components/Message/Message.stories.tsx

@@ -9,6 +9,7 @@ import { random } from '@dxos/random';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { Button } from '../Button';
 import { Message } from './Message';
 
 random.seed(123);
@@ -17,13 +18,21 @@ type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
+  button?: boolean;
 };
 
-const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
+const DefaultStory = ({ valence, title, body, button }: DefaultStoryProps) => (
   <div className='w-[30rem]'>
     <Message.Root valence={valence}>
-      {title && <Message.Title>{title}</Message.Title>}
-      {body && <Message.Content>{body}</Message.Content>}
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
+      {body && (
+        <Message.Content asChild classNames='gap-2'>
+          <div>
+            <p>{body}</p>
+            {button && <Button>Test</Button>}
+          </div>
+        </Message.Content>
+      )}
     </Message.Root>
   </div>
 );
@@ -51,15 +60,44 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     valence: 'neutral',
-    title: 'Alert title',
+    title: 'Default',
     body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    valence: 'success',
+    title: 'Success',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Info: Story = {
+  args: {
+    valence: 'info',
+    title: 'Info',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    valence: 'warning',
+    title: 'Warning',
+    body: random.lorem.paragraphs(1),
+    button: true,
   },
 };
 
 export const Error: Story = {
   args: {
     valence: 'error',
-    title: 'Error title',
+    title: 'Error',
     body: random.lorem.paragraphs(1),
+    button: true,
   },
 };

package/src/components/Message/Message.theme.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, messageValence } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
+
+export type MessageStyleProps = {
+  valence?: MessageValence;
+  elevation?: Elevation;
+};
+
+const root: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
+  return mx('p-1 rounded-sm', messageValence(valence), etc);
+};
+
+const header: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('items-center', etc);
+};
+
+const title: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 overflow-hidden truncate', etc);
+};
+
+const icon: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-1 grid place-items-center', etc);
+};
+
+const close: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-3', etc);
+};
+
+const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 flex flex-col first:font-medium pb-1.5', etc);
+};
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root,
+  header,
+  icon,
+  title,
+  close,
+  content,
+};