@dxos/react-ui 0.10.0 → 0.11.1

package/src/components/Main/MainContext.ts

@@ -0,0 +1,126 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { createContext } from '@radix-ui/react-context';
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type KeyboardEvent,
+  type SetStateAction,
+  useCallback,
+} from 'react';
+
+import { log } from '@dxos/log';
+
+export const MAIN_NAME = 'Main';
+
+// Kept out of `Main.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+//
+// Landmark
+//
+
+const landmarkAttr = 'data-main-landmark';
+
+/**
+ * Facilitates moving focus between landmarks.
+ * Ref https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role
+ */
+export const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKeyDown'], landmark: string) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      const target = event.target as HTMLDivElement;
+      if (event.target === event.currentTarget && event.key === 'Tab' && target.hasAttribute(landmarkAttr)) {
+        event.preventDefault();
+        const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`))
+          .map((el) => (el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)!) : NaN))
+          .sort();
+        const l = landmarks.length;
+        const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)!));
+        const nextLandmark = landmarks[(cursor + l + (event.getModifierState('Shift') ? -1 : 1)) % l];
+        (document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`) as HTMLDivElement | null)?.focus();
+      }
+      propsOnKeyDown?.(event);
+    },
+    [propsOnKeyDown],
+  );
+
+  // TODO(thure): This was disconnected once before in #8818;
+  //  if this should change again to support the browser extension, please ensure the change doesn’t break web, desktop and mobile.
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
+
+  return {
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    ...focusableGroupAttrs,
+  };
+};
+
+//
+// Context
+//
+
+// TODO(burdon): Define collapsed state.
+export type SidebarState = 'expanded' | 'collapsed' | 'closed';
+
+export type MainContextValue = {
+  resizing: boolean;
+
+  // Navigation
+  navigationSidebarState: SidebarState;
+  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+
+  // Complementary
+  complementarySidebarState: SidebarState;
+  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+};
+
+export const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
+  resizing: false,
+
+  navigationSidebarState: 'closed',
+  setNavigationSidebarState: (_nextState) => {
+    log.warn('Not initialized');
+  },
+
+  complementarySidebarState: 'closed',
+  setComplementarySidebarState: (_nextState) => {
+    log.warn('Not initialized');
+  },
+});
+
+export const useSidebars = (consumerName: string) => {
+  const {
+    navigationSidebarState,
+    setNavigationSidebarState,
+
+    complementarySidebarState,
+    setComplementarySidebarState,
+  } = useMainContext(consumerName);
+
+  return {
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: useCallback(
+      () => setNavigationSidebarState(navigationSidebarState === 'expanded' ? 'closed' : 'expanded'),
+      [navigationSidebarState, setNavigationSidebarState],
+    ),
+    openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
+    collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
+    closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
+
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: useCallback(
+      () => setComplementarySidebarState(complementarySidebarState === 'expanded' ? 'closed' : 'expanded'),
+      [complementarySidebarState, setComplementarySidebarState],
+    ),
+    openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
+    collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
+    closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
+  };
+};

package/src/components/Main/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export { useLandmarkMover, useMainContext, useSidebars } from './MainContext';
+
 export * from './Main';
 export * from './constants';

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -7,8 +7,7 @@ import React, { useState } from 'react';
 import { mx } from '@dxos/ui-theme';
 
 import { type ThemedClassName } from '../../util';
-
-export type MediaKind = 'video' | 'audio';
+import { type MediaKind, detectMediaKind, isEmbedUrl } from './media-kind';
 
 export type MediaFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 
@@ -21,42 +20,9 @@ const FIT_CLASS: Record<MediaFit, string> = {
   '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[?…]`.
@@ -105,7 +71,8 @@ export const MediaPlayer = ({
   fit = 'cover',
 }: MediaPlayerProps) => {
   const fitClass = FIT_CLASS[fit];
-  if (isEmbedUrl(src)) {
+  // An explicit `kind` forces native playback even for extensionless URLs (e.g. `blob:`/`data:`).
+  if (kind || isEmbedUrl(src)) {
     const resolved = kind ?? detectMediaKind(src) ?? 'video';
     if (resolved === 'audio') {
       return (
@@ -123,16 +90,18 @@ export const MediaPlayer = ({
     }
 
     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}
-      />
+      <div className={mx('grid place-items-center', classNames)}>
+        <video
+          className={mx('max-w-full max-h-full aspect-video', fitClass)}
+          src={src}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          crossOrigin={crossOrigin}
+          aria-label={alt}
+        />
+      </div>
     );
   }
 
@@ -161,7 +130,7 @@ type IframePlayerProps = ThemedClassName<{
 const IframePlayer = ({ src, alt, classNames }: IframePlayerProps) => {
   const [loaded, setLoaded] = useState(false);
   return (
-    <div className={mx('relative bg-baseSurface', classNames)}>
+    <div className={mx('relative bg-base-surface', classNames)}>
       <iframe
         src={src}
         title={alt ?? 'Embedded media'}

package/src/components/MediaPlayer/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2026 DXOS.org
 //
 
+export { type MediaKind, detectMediaKind, isEmbedUrl } from './media-kind';
+
 export * from './MediaPlayer';

package/src/components/MediaPlayer/media-kind.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// Kept out of `MediaPlayer.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export type MediaKind = 'video' | 'audio';
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/**
+ * 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;

package/src/components/Menu/DropdownMenu.tsx

@@ -6,11 +6,8 @@
 
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { composeRefs } from '@radix-ui/react-compose-refs';
-import { createContextScope } from '@radix-ui/react-context';
-import type { Scope } from '@radix-ui/react-context';
 import { useId } from '@radix-ui/react-id';
 import * as MenuPrimitive from '@radix-ui/react-menu';
-import { createMenuScope } from '@radix-ui/react-menu';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -31,6 +28,13 @@ import React, {
 
 import { useElevationContext, useSafeCollisionPadding, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import {
+  DROPDOWN_MENU_NAME,
+  DropdownMenuProvider,
+  type DropdownMenuScopedProps,
+  useDropdownMenuContext,
+  useMenuScope,
+} from './DropdownMenuContext';
 
 type Direction = 'ltr' | 'rtl';
 
@@ -38,25 +42,6 @@ type Direction = 'ltr' | 'rtl';
 // DropdownMenu
 //
 
-const DROPDOWN_MENU_NAME = 'DropdownMenu';
-
-type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
-const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope: (scope?: Scope) => any = createMenuScope();
-
-type DropdownMenuContextValue = {
-  triggerId: string;
-  triggerRef: RefObject<HTMLButtonElement | null>;
-  contentId: string;
-  open: boolean;
-  onOpenChange(open: boolean): void;
-  onOpenToggle(): void;
-  modal: boolean;
-};
-
-const [DropdownMenuProvider, useDropdownMenuContext] =
-  createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
-
 type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
   modal?: boolean;
@@ -73,7 +58,7 @@ const DropdownMenuRoot = ({
   open: openProp,
   defaultOpen,
   onOpenChange,
-}: ScopedProps<DropdownMenuRootProps>) => {
+}: DropdownMenuScopedProps<DropdownMenuRootProps>) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [open = false, setOpen] = useControllableState({
@@ -113,7 +98,7 @@ type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
 type DropdownMenuTriggerProps = PrimitiveButtonProps;
 
 const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
-  (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
@@ -177,7 +162,7 @@ type DropdownMenuVirtualTriggerProps = {
   virtualRef: RefObject<DropdownMenuTriggerElement | null>;
 };
 
-const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
+const DropdownMenuVirtualTrigger = (props: DropdownMenuScopedProps<DropdownMenuVirtualTriggerProps>) => {
   const { __scopeDropdownMenu, virtualRef } = props;
   const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
@@ -200,7 +185,7 @@ const PORTAL_NAME = 'DropdownMenu.Portal';
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
 type DropdownMenuPortalProps = MenuPortalProps;
 
-const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
+const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: DropdownMenuScopedProps<DropdownMenuPortalProps>) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;
@@ -239,7 +224,7 @@ type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrim
 type DropdownMenuContentProps = Omit<MenuContentProps, 'onEntryFocus'>;
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuContentProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
@@ -318,7 +303,7 @@ type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
 type DropdownMenuGroupProps = MenuGroupProps;
 
 const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
-  (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;
@@ -338,7 +323,7 @@ type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimit
 type DropdownMenuLabelProps = MenuLabelProps;
 
 const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
-  (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...labelProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -366,7 +351,7 @@ type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimiti
 type DropdownMenuItemProps = MenuItemProps;
 
 const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
-  (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuItemProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -394,7 +379,7 @@ type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof Men
 type DropdownMenuCheckboxItemProps = MenuCheckboxItemProps;
 
 const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
-  (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -422,7 +407,7 @@ type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGr
 type DropdownMenuRadioGroupProps = MenuRadioGroupProps;
 
 const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
-  (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
     const { __scopeDropdownMenu, ...radioGroupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;
@@ -442,7 +427,7 @@ type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioIte
 type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
 const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
-  (props: ScopedProps<DropdownMenuRadioItemProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuRadioItemProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -470,7 +455,7 @@ type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Item
 type DropdownMenuItemIndicatorProps = MenuItemIndicatorProps;
 
 const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
-  (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;
@@ -490,7 +475,7 @@ type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPr
 type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
-  (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -518,7 +503,7 @@ type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimit
 type DropdownMenuArrowProps = MenuArrowProps;
 
 const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
-  (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
     const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
@@ -546,7 +531,7 @@ type DropdownMenuSubProps = {
   onOpenChange?(open: boolean): void;
 };
 
-const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMenuSubProps>) => {
+const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: DropdownMenuScopedProps<DropdownMenuSubProps>) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const [open = false, setOpen] = useControllableState({
@@ -573,7 +558,7 @@ type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrig
 type DropdownMenuSubTriggerProps = MenuSubTriggerProps;
 
 const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
-  (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
     const { __scopeDropdownMenu, ...subTriggerProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     return <MenuPrimitive.SubTrigger {...menuScope} {...subTriggerProps} ref={forwardedRef} />;
@@ -593,7 +578,7 @@ type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubCont
 type DropdownMenuSubContentProps = MenuSubContentProps;
 
 const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
-  (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
+  (props: DropdownMenuScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
     const { __scopeDropdownMenu, ...subContentProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
 
@@ -645,11 +630,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-type DropdownMenuScope = Scope;
-
-const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
-
-export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
+// Type-only re-export (erased, so it does not affect the refresh boundary): keeps the inferred
+// types of downstream composites nameable across package boundaries.
+export type { DropdownMenuScopedProps } from './DropdownMenuContext';
 
 export type {
   DropdownMenuArrowProps,

package/src/components/Menu/DropdownMenuContext.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Scope, createContextScope } from '@radix-ui/react-context';
+import { createMenuScope } from '@radix-ui/react-menu';
+import { type RefObject } from 'react';
+
+// Kept out of `DropdownMenu.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export const DROPDOWN_MENU_NAME = 'DropdownMenu';
+
+export type DropdownMenuScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
+export const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
+  createMenuScope,
+]);
+export const useMenuScope: (scope?: Scope) => any = createMenuScope();
+
+export type DropdownMenuScope = Scope;
+
+export const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
+
+export type DropdownMenuContextValue = {
+  triggerId: string;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+  contentId: string;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onOpenToggle(): void;
+  modal: boolean;
+};
+
+export const [DropdownMenuProvider, useDropdownMenuContext] =
+  createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);

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

@@ -13,7 +13,7 @@ export type MenuStyleProps = Partial<{
 
 const content: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'dx-popover-surface w-48 rounded-sm md:w-56 border border-separator',
+    'dx-popover-surface w-48 md:w-56 border border-separator rounded-sm',
     surfaceZIndex({ elevation, level: 'menu' }),
     surfaceShadow({ elevation: 'positioned' }),
     ...etc,
@@ -24,7 +24,7 @@ const viewport: ComponentFunction<MenuStyleProps> = (_props, ...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',
+    'flex cursor-pointer select-none items-center gap-2 rounded-xs min-h-(--dx-control) px-(--dx-control-pad) py-1 text-sm',
     'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
     'dx-focus-subdued',
     dataDisabled,
@@ -34,7 +34,7 @@ const item: ComponentFunction<MenuStyleProps> = (_props, ...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);
+  mx('text-description', 'select-none px-(--dx-control-pad) py-1', ...etc);
 
 const arrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
 

package/src/components/Menu/index.ts

@@ -3,4 +3,6 @@
 //
 
 export * from './ContextMenu';
+export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope } from './DropdownMenuContext';
+
 export * from './DropdownMenu';

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

@@ -19,23 +19,30 @@ type StoryArgs = {
   title: string;
   body: string;
   button?: boolean;
+  /** Wrap the title/body in `Message.Content` so the message carries its own inset. */
+  padded?: boolean;
 };
 
-const DefaultStory = ({ valence, title, body, button }: StoryArgs) => (
-  <div className='w-[30rem]'>
-    <Message.Root valence={valence}>
-      {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>
-);
+const DefaultStory = ({ valence, title, body, button, padded }: StoryArgs) => {
+  const Wrapper = padded ? Message.Content : React.Fragment;
+  return (
+    <div className='w-[30rem]'>
+      <Message.Root valence={valence}>
+        <Wrapper>
+          {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
+          {body && (
+            <Message.Body asChild classNames='gap-2'>
+              <div>
+                <p>{body}</p>
+                {button && <Button>Test</Button>}
+              </div>
+            </Message.Body>
+          )}
+        </Wrapper>
+      </Message.Root>
+    </div>
+  );
+};
 
 const meta = {
   title: 'ui/react-ui-core/components/Message',
@@ -101,3 +108,13 @@ export const Error: Story = {
     button: true,
   },
 };
+
+export const Padded: Story = {
+  args: {
+    valence: 'neutral',
+    title: 'Padded',
+    body: random.lorem.paragraphs(1),
+    button: true,
+    padded: true,
+  },
+};

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

@@ -14,6 +14,11 @@ const root: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
   return mx('p-1 rounded-sm', messageValence(valence), etc);
 };
 
+// Subgrid rather than a plain block so a nested `Message.Title` row still reaches the root's gutters.
+const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-span-full grid grid-cols-subgrid p-trim-md', etc);
+};
+
 const header: ComponentFunction<MessageStyleProps> = (_, etc) => {
   return mx('items-center', etc);
 };
@@ -22,13 +27,14 @@ const title: ComponentFunction<MessageStyleProps> = (_, etc) => {
   return mx('col-start-2 overflow-hidden truncate', etc);
 };
 
-const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+const body: ComponentFunction<MessageStyleProps> = (_, etc) => {
   return mx('col-start-2 flex flex-col first:font-medium pb-1.5', etc);
 };
 
 export const messageTheme: Theme<MessageStyleProps> = {
   root,
+  content,
   header,
   title,
-  content,
+  body,
 };