@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

package/src/components/Main/Main.tsx

@@ -25,21 +25,23 @@ import React, {
 import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
-import { type MainStyleProps } 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 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-is-keyboard') && event.preventDefault();
+  !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
 };
 
 //
@@ -224,6 +226,42 @@ const MainRoot = ({
 
 MainRoot.displayName = MAIN_ROOT_NAME;
 
+//
+// Overlay
+//
+
+type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children' | 'onClick'>>;
+
+const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery('lg');
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
+    useMainContext(MAIN_OVERLAY_NAME);
+  const { tx } = useThemeContext();
+  return (
+    <div
+      {...props}
+      onClick={() => {
+        setNavigationSidebarState('collapsed');
+        setComplementarySidebarState('collapsed');
+      }}
+      className={tx(
+        'main.overlay',
+        {
+          isLg,
+          inlineStartSidebarOpen: navigationSidebarState,
+          inlineEndSidebarOpen: complementarySidebarState,
+        },
+        classNames,
+      )}
+      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
+      aria-hidden='true'
+      ref={forwardedRef}
+    />
+  );
+});
+
+MainOverlay.displayName = MAIN_OVERLAY_NAME;
+
 //
 // Sidebar
 //
@@ -233,7 +271,7 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   state?: SidebarState;
   resizing?: boolean;
   onStateChange?: (nextState: SidebarState) => void;
-  side: 'inline-start' | 'inline-end';
+  side: 'w-start' | 'w-end';
   label: Label;
 };
 
@@ -244,7 +282,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   ) => {
     const [isLg] = useMediaQuery('lg');
     const { tx } = useThemeContext();
-    const { t } = useTranslation();
+    const { t } = useTranslation(osTranslations);
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
 
@@ -276,10 +314,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...(state === 'closed' && { inert: true })}
           {...props}
-          data-side={side === 'inline-end' ? 'ie' : 'is'}
+          data-side={side === 'w-end' ? 'ie' : 'is'}
           data-state={state}
           data-resizing={resizing ? 'true' : 'false'}
-          className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
+          className={tx('main.sidebar', {}, classNames)}
           onKeyDownCapture={handleKeyDown}
           ref={ref}
         >
@@ -307,7 +345,7 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
       state={navigationSidebarState}
       onStateChange={setNavigationSidebarState}
       resizing={resizing}
-      side='inline-start'
+      side='w-start'
       ref={forwardedRef}
     />
   );
@@ -333,7 +371,7 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
       state={complementarySidebarState}
       onStateChange={setComplementarySidebarState}
       resizing={resizing}
-      side='inline-end'
+      side='w-end'
       ref={forwardedRef}
     />
   );
@@ -356,67 +394,40 @@ const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
   ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainContentProps, forwardedRef) => {
     const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : role ? 'div' : 'main';
+    const Comp = asChild ? Slot : role ? Primitive.div : 'main';
     const mover = useLandmarkMover(props.onKeyDown, '1');
 
     return (
-      <Root
-        role={role}
+      <Comp
         {...(handlesFocus && { ...mover })}
         {...props}
-        data-sidebar-inline-start-state={navigationSidebarState}
-        data-sidebar-inline-end-state={complementarySidebarState}
+        role={role}
+        data-sidebar-left-state={navigationSidebarState}
+        data-sidebar-right-state={complementarySidebarState}
         data-handles-focus={handlesFocus}
-        className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
+        className={tx('main.content', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
-MainContent.displayName = MAIN_NAME;
+MainContent.displayName = MAIN_CONTENT_NAME;
 
-type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children' | 'onClick'>>;
-
-const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery('lg');
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
-    useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  return (
-    <div
-      {...props}
-      onClick={() => {
-        setNavigationSidebarState('collapsed');
-        setComplementarySidebarState('collapsed');
-      }}
-      className={tx(
-        'main.overlay',
-        'main__overlay',
-        {
-          isLg,
-          inlineStartSidebarOpen: navigationSidebarState,
-          inlineEndSidebarOpen: complementarySidebarState,
-        },
-        classNames,
-      )}
-      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
-      aria-hidden='true'
-      ref={forwardedRef}
-    />
-  );
-});
+//
+// Main
+//
 
 export const Main = {
   Root: MainRoot,
-  Content: MainContent,
   Overlay: MainOverlay,
+  Content: MainContent,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
 };
 
 export { useMainContext, useSidebars, useLandmarkMover };
 
-export type { MainRootProps, MainContentProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
+export type { MainRootProps, MainOverlayProps, MainContentProps, MainNavigationSidebarProps, SidebarState };

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,178 @@
+//
+// 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;
+  /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
+  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 = 'anonymous',
+  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

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { ContextMenu } from './ContextMenu';
 
 const DefaultStory = () => {

package/src/components/Menu/ContextMenu.tsx

@@ -36,7 +36,7 @@ const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
         {...props}
         data-arrow-keys='up down'
         collisionPadding={safeCollisionPadding}
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -52,11 +52,11 @@ type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pri
 const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -65,13 +65,7 @@ type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArr
 
 const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ContextMenuPrimitive.Arrow
-      {...props}
-      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
-      ref={forwardedRef}
-    />
-  );
+  return <ContextMenuPrimitive.Arrow {...props} className={tx('menu.arrow', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
@@ -87,13 +81,7 @@ type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItem
 const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
-    return (
-      <ContextMenuPrimitive.Item
-        {...props}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <ContextMenuPrimitive.Item {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -103,11 +91,7 @@ const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxIt
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.CheckboxItem
-        {...props}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.CheckboxItem {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -118,11 +102,7 @@ const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProp
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Separator
-        {...props}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Separator {...props} className={tx('menu.separator', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -133,11 +113,7 @@ const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelPr
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Label
-        {...props}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Label {...props} className={tx('menu.groupLabel', {}, classNames)} ref={forwardedRef} />
     );
   },
 );

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

@@ -7,7 +7,6 @@ import React, { useRef, useState } from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { DropdownMenu } from './DropdownMenu';
 
 const DefaultStory = () => {