@dxos/react-ui 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

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.tsx

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { mx } from '@dxos/ui-theme';
 
@@ -10,6 +10,17 @@ 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'];
 
@@ -40,43 +51,40 @@ export const detectMediaKind = (src: string): MediaKind | undefined => {
  * Heuristic match for URLs that should render as native `<video>` / `<audio>`
  * (i.e. URLs ending in a recognised media extension).
  *
- * NB: legacy embed URLs (Cloudflare Stream etc. — paths containing `iframe`)
- * serve an HTML player page, **not** a media stream, so they cannot be loaded
- * via `<video>`. Those are detected by {@link isLegacyIframeUrl} and rendered
- * via `<iframe>` instead.
+ * 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 URLs whose pathname has an `/iframe` segment (e.g. Cloudflare Stream embeds). */
-const LEGACY_IFRAME_PATH_PATTERN = /\/iframe(?:[/?#]|$)/i;
+/**
+ * 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 isLegacyIframeUrl = (src: string): boolean => {
-  const pathAndQuery = src.split('#', 1)[0]!;
-  return LEGACY_IFRAME_PATH_PATTERN.test(pathAndQuery);
-};
+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;
-  /** Accessible label for the `<video>` / `<audio>` element. */
-  alt?: string;
   /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
   crossOrigin?: 'anonymous' | 'use-credentials' | '';
-  /** Additional classes applied only when rendering `<img>`. */
-  imgClassNames?: string;
-  /** Additional classes applied only when rendering native media or `<iframe>`. */
-  mediaClassNames?: string;
+  /** 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>`.
- * - Legacy `iframe`-style embed URLs (Cloudflare Stream, oEmbed players) → `<iframe>`.
+ * - 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).
  */
@@ -90,15 +98,15 @@ export const MediaPlayer = ({
   muted = false,
   alt,
   crossOrigin = 'anonymous',
-  imgClassNames,
-  mediaClassNames,
+  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, mediaClassNames)}
+          className={mx('w-full', classNames)}
           src={src}
           controls={controls}
           autoPlay={autoPlay}
@@ -112,7 +120,7 @@ export const MediaPlayer = ({
 
     return (
       <video
-        className={mx('aspect-video max-w-full max-h-full', classNames, mediaClassNames)}
+        className={mx('max-w-full max-h-full aspect-video', fitClass, classNames)}
         src={src}
         controls={controls}
         autoPlay={autoPlay}
@@ -124,30 +132,47 @@ export const MediaPlayer = ({
     );
   }
 
-  if (isLegacyIframeUrl(src)) {
-    return (
-      <iframe
-        src={src}
-        title={alt ?? 'Embedded media'}
-        loading='lazy'
-        className={mx('border-none', classNames, mediaClassNames)}
-        sandbox={DEFAULT_IFRAME_SANDBOX}
-        referrerPolicy='no-referrer'
-        allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;'
-        allowFullScreen
-      />
-    );
+  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'
-      className={mx(classNames, imgClassNames)}
       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/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 onClose={() => console.log('close')}>{title}</Message.Title>}
-      {body && <Message.Content>{body}</Message.Content>}
+      {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,
+};