@dxos/react-ui 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/dist/lib/node-esm/index.mjs

@@ -4,6 +4,7 @@ import {
   DensityProvider,
   ElevationContext,
   ElevationProvider,
+  ErrorStack,
   ThemeContext,
   ThemeProvider,
   Tooltip,
@@ -11,12 +12,16 @@ import {
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
+  parseCaptureOwnerStack,
   useElevationContext,
   useSafeArea,
   useThemeContext,
   useTooltipContext,
   useTranslation
-} from "./chunk-ENYC4TYH.mjs";
+} from "./chunk-3JSJK2ZY.mjs";
+import {
+  translationKey
+} from "./chunk-XCFLA74M.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -24,7 +29,7 @@ export * from "@dxos/react-hooks";
 export * from "@dxos/ui-types";
 
 // src/components/ThemeProvider/index.ts
-import { isLabel, toLocalizedString } from "@dxos/ui-types";
+import { isLabel, toLocalizedString } from "@dxos/ui-types/translations";
 
 // src/hooks/useDensityContext.ts
 import { useContext } from "react";
@@ -196,12 +201,19 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef4 } from "react";
 
 // src/components/Icon/Icon.tsx
-import React2, { forwardRef as forwardRef2, memo } from "react";
-var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
+import React2, { forwardRef as forwardRef2, memo, useMemo as useMemo3 } from "react";
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const spinDelay = useMemo3(() => synchronized ? `${-(Date.now() % 1e3)}ms` : void 0, [
+    synchronized
+  ]);
   const href = useIconHref(icon);
   return /* @__PURE__ */ React2.createElement("svg", {
     ...props,
+    style: {
+      ...style,
+      animationDelay: spinDelay
+    },
     className: tx("icon.root", {
       size
     }, classNames),
@@ -372,12 +384,13 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef6(({ noTooltip, tooltipSide, ...p
     ref: forwardedRef
   }));
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React6.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", {
-      iconOnly
+      iconOnly,
+      square
     }, classNames),
     ref: forwardedRef
   }, icon && !iconEnd && /* @__PURE__ */ React6.createElement(Icon, {
@@ -457,7 +470,7 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, s
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import DOMPurify from "dompurify";
-import React19, { createContext as createContext3, forwardRef as forwardRef13, useContext as useContext3, useMemo as useMemo4 } from "react";
+import React19, { createContext as createContext3, forwardRef as forwardRef13, useContext as useContext3, useMemo as useMemo5 } from "react";
 import { composable as composable3, composableProps as composableProps7, iconSize, mx as mx6, slottable as slottable6 } from "@dxos/ui-theme";
 
 // src/primitives/Column/Column.tsx
@@ -482,6 +495,7 @@ var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }
     role: role ?? "none",
     style: {
       "--gutter": gutterSize,
+      "--dx-col": "2 / span 1",
       gridTemplateColumns: [
         gutterSize,
         "minmax(0,1fr)",
@@ -496,51 +510,47 @@ var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }
 });
 ColumnRoot.displayName = COLUMN_ROOT_NAME;
 var COLUMN_ROW_NAME = "Column.Row";
-var ColumnRow = slottable(({ children, asChild, role, fullWidth, center, ...props }, forwardedRef) => {
+var ColumnRow = slottable(({ children, asChild, role, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React9.createElement(Comp, {
     ...rest,
     role: role ?? "none",
-    className: tx("column.row", {
-      fullWidth,
-      center
-    }, className),
+    className: tx("column.row", {}, className),
     ref: forwardedRef
   }, children);
 });
 ColumnRow.displayName = COLUMN_ROW_NAME;
-var COLUMN_CONTENT_NAME = "Column.Content";
-var ColumnContent = slottable(({ children, asChild, ...props }, forwardedRef) => {
+var COLUMN_BLEED_NAME = "Column.Bleed";
+var ColumnBleed = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot5 : Primitive5.div;
   return /* @__PURE__ */ React9.createElement(Comp, {
     ...rest,
-    className: tx("column.content", {}, className),
+    className: tx("column.bleed", {}, className),
     ref: forwardedRef
   }, children);
 });
-ColumnContent.displayName = COLUMN_CONTENT_NAME;
-var COLUMN_VIEWPORT_NAME = "Column.Viewport";
-var ColumnViewport = slottable(({ children, asChild, role, ...props }, forwardedRef) => {
+ColumnBleed.displayName = COLUMN_BLEED_NAME;
+var COLUMN_CENTER_NAME = "Column.Center";
+var ColumnCenter = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React9.createElement(ScrollArea.Root, {
+  const Comp = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React9.createElement(Comp, {
     ...rest,
-    className: tx("column.viewport", {}, className),
-    orientation: "vertical",
-    padding: true,
+    className: tx("column.center", {}, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React9.createElement(ScrollArea.Viewport, null, children));
+  }, children);
 });
-ColumnViewport.displayName = COLUMN_VIEWPORT_NAME;
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
 var Column = {
   Root: ColumnRoot,
-  Content: ColumnContent,
-  Viewport: ColumnViewport,
-  Row: ColumnRow
+  Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter
 };
 
 // src/primitives/Container/Container.tsx
@@ -666,7 +676,7 @@ var Panel = {
 import React14, { useCallback as useCallback3, useRef, useState as useState3 } from "react";
 import { mx as mx5 } from "@dxos/ui-theme";
 var cache = /* @__PURE__ */ new Map();
-var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
   const [crossOriginState, setCrossOriginState] = useState3(crossOrigin);
   const [dominantColor, setDominantColor] = useState3(void 0);
   const [imageLoaded, setImageLoaded] = useState3(false);
@@ -705,7 +715,13 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     src
   ]);
   return /* @__PURE__ */ React14.createElement("div", {
-    className: mx5(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames),
+    // `isolate` (`isolation: isolate`) creates a new stacking context so
+    // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+    // the z-10 leaks into the parent's stacking context and elevates the
+    // image above any pseudo-element rings (e.g. Focus.Item's
+    // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+    // the focus ring on a Card containing a Card.Poster.
+    className: mx5(`relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`, classNames),
     style: {
       backgroundColor: dominantColor
     }
@@ -728,7 +744,7 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     crossOrigin: crossOriginState,
     onError: handleImageError,
     onLoad: handleImageLoad,
-    className: "z-10 object-contain transition-opacity duration-500",
+    className: mx5("z-10 transition-opacity duration-500", fit === "cover" ? "w-full h-full object-cover" : "object-contain"),
     style: {
       opacity: imageLoaded ? 1 : 0
     }
@@ -766,7 +782,9 @@ var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) =
       const green = pixels[i + 1];
       const blue = pixels[i + 2];
       const alpha = pixels[i + 3];
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
       const max = Math.max(red, green, blue);
       const min = Math.min(red, green, blue);
       const saturation = max === 0 ? 0 : (max - min) / max;
@@ -794,15 +812,23 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
   const edgePixels = sampleSize * 4 - 4;
   for (let x = 0; x < sampleSize; x++) {
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
   for (let y = 1; y < sampleSize - 1; y++) {
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
   return edgeTransparentPixels / edgePixels > threshold;
 };
@@ -814,20 +840,7 @@ import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import React18, { forwardRef as forwardRef12 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { composable as composable2, composableProps as composableProps6, slottable as slottable5 } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "toolbar-menu.label": "Action menu",
-        "toolbar-drag-handle.label": "Drag to rearrange",
-        "toolbar-close.label": "Close"
-      }
-    }
-  }
-];
+import { translationKey as translationKey2 } from "#translations";
 
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
@@ -927,7 +940,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React16, { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import React16, { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1058,7 +1071,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef10((props, forwardedRef) =>
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef2(false);
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  const computedCollisionBoundary = useMemo3(() => {
+  const computedCollisionBoundary = useMemo4(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
     return closestBoundary ? Array.isArray(collisionBoundary) ? [
       closestBoundary,
@@ -1397,7 +1410,7 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef12(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
@@ -1409,6 +1422,7 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef12(({ variant, densit
     icon,
     label,
     iconOnly,
+    iconClassNames,
     ref: forwardedRef
   }));
 });
@@ -1425,7 +1439,7 @@ var ToolbarSeparator = /* @__PURE__ */ forwardRef12(({ variant = "gap", ...props
   });
 });
 var ToolbarDragHandle = /* @__PURE__ */ forwardRef12(({ testId = "drag-handle", label }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     "data-testid": testId,
     tabIndex: -1,
@@ -1440,7 +1454,7 @@ var ToolbarDragHandle = /* @__PURE__ */ forwardRef12(({ testId = "drag-handle",
   });
 });
 var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef12(({ onClick, label }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     iconOnly: true,
     icon: "ph--x--regular",
@@ -1452,7 +1466,7 @@ var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef12(({ onClick, label }, f
   });
 });
 var ToolbarMenu = ({ context, items }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   return /* @__PURE__ */ React18.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Trigger, {
     disabled: !items?.length,
     asChild: true
@@ -1485,23 +1499,23 @@ var Toolbar = {
 // src/components/Card/Card.tsx
 var CardContext = /* @__PURE__ */ createContext3({});
 var CARD_ROOT_NAME = "Card.Root";
-var CardRoot = slottable6(({ children, id, asChild, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+var CardRoot = composable3(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(Comp, {
+  return /* @__PURE__ */ React19.createElement(Column.Root, {
+    asChild: true,
+    gutter: density === "coarse" ? "lg" : "md",
+    classNames: tx("card.root", {
+      border,
+      fullWidth
+    }, className),
+    role: role ?? "group"
+  }, /* @__PURE__ */ React19.createElement("div", {
     ...rest,
     ...id && {
       "data-object-id": id
     },
-    role: role ?? "group",
-    className: tx("card.root", {
-      border,
-      fullWidth
-    }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(Column.Root, {
-    gutter: density === "coarse" ? "lg" : "md"
   }, children));
 });
 CardRoot.displayName = CARD_ROOT_NAME;
@@ -1565,7 +1579,6 @@ var CardIconBlock = /* @__PURE__ */ forwardRef13(({ classNames, children, paddin
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement("div", {
     ...props,
-    role: "none",
     className: tx("card.icon-block", {
       padding
     }, classNames),
@@ -1600,10 +1613,11 @@ var CardContent = slottable6(({ children, asChild, ...props }, forwardedRef) =>
 });
 CardContent.displayName = CARD_CONTENT_NAME;
 var CARD_ROW_NAME = "Card.Row";
-var CardRow = composable3(({ children, icon, ...props }, forwardedRef) => {
+var CardRow = slottable6(({ children, asChild, icon, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(Column.Row, {
+  return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
     className: tx("card.row", {}, className),
     ref: forwardedRef
@@ -1664,12 +1678,11 @@ CardText.displayName = CARD_TEXT_NAME;
 var CARD_HTML_NAME = "Card.Html";
 var CardHtml = ({ html, variant = "default", ...props }) => {
   const { tx } = useThemeContext();
-  const sanitized = useMemo4(() => DOMPurify.sanitize(html), [
+  const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
     html
   ]);
   return /* @__PURE__ */ React19.createElement("div", {
     ...props,
-    role: "none",
     className: tx("card.text", {
       variant
     }),
@@ -1686,8 +1699,7 @@ var CardPoster = (props) => {
   const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
   if (props.image) {
     return /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
-      className: "col-span-full mb-1"
+      className: "col-span-full"
     }, /* @__PURE__ */ React19.createElement(Image, {
       classNames: [
         tx("card.poster", {}),
@@ -1695,7 +1707,8 @@ var CardPoster = (props) => {
         props.classNames
       ],
       src: props.image,
-      alt: props.alt
+      alt: props.alt,
+      fit: props.fit
     }));
   }
   if (props.icon) {
@@ -1777,21 +1790,234 @@ var Card = {
   Link: CardLink
 };
 
+// src/components/Carousel/Carousel.tsx
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import React20, { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useEffect as useEffect3, useMemo as useMemo6, useState as useState4 } from "react";
+import { mx as mx7 } from "@dxos/ui-theme";
+var CarouselContext = /* @__PURE__ */ createContext4(null);
+var useCarousel = () => {
+  const context = useContext4(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within Carousel.Root");
+  }
+  return context;
+};
+var CarouselRoot = ({ classNames, children, count, autorun = false, intervalMs = 5e3, defaultIndex = 0 }) => {
+  const [index, setIndexState] = useState4(defaultIndex);
+  const [autoAdvance, setAutoAdvance] = useState4(autorun);
+  useEffect3(() => {
+    if (index >= count) {
+      setIndexState(0);
+    }
+  }, [
+    count,
+    index
+  ]);
+  useEffect3(() => {
+    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+      return;
+    }
+    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    return () => clearInterval(handle);
+  }, [
+    autoAdvance,
+    count,
+    intervalMs
+  ]);
+  const setIndex = useCallback5((next2) => {
+    setAutoAdvance(false);
+    setIndexState(next2);
+  }, []);
+  const next = useCallback5(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i + 1) % count);
+  }, [
+    count
+  ]);
+  const prev = useCallback5(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i - 1 + count) % count);
+  }, [
+    count
+  ]);
+  const value = useMemo6(() => ({
+    index,
+    count,
+    setIndex,
+    next,
+    prev
+  }), [
+    index,
+    count,
+    setIndex,
+    next,
+    prev
+  ]);
+  if (count === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React20.createElement(CarouselContext.Provider, {
+    value
+  }, /* @__PURE__ */ React20.createElement("div", {
+    className: mx7("w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center", classNames)
+  }, children));
+};
+CarouselRoot.displayName = "Carousel.Root";
+var CarouselViewport = ({ children, classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next, prev } = useCarousel();
+  const handleKeyDown = useCallback5((event) => {
+    if (count <= 1) {
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      prev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      next();
+    }
+  }, [
+    count,
+    next,
+    prev
+  ]);
+  return /* @__PURE__ */ React20.createElement("div", {
+    // TODO(burdon): Move to ui-theme.
+    className: mx7("relative w-full aspect-video overflow-hidden", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", classNames),
+    tabIndex: 0,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": t("carousel-viewport.label"),
+    onKeyDown: handleKeyDown
+  }, children);
+};
+CarouselViewport.displayName = "Carousel.Viewport";
+var CarouselSlide = ({ children, index, classNames }) => {
+  const { index: active } = useCarousel();
+  if (active !== index) {
+    return null;
+  }
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: mx7("absolute inset-0 w-full h-full bg-baseSurface", classNames)
+  }, children);
+};
+CarouselSlide.displayName = "Carousel.Slide";
+var CarouselPrevious = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, prev } = useCarousel();
+  if (count <= 1) {
+    return /* @__PURE__ */ React20.createElement("div", null);
+  }
+  return /* @__PURE__ */ React20.createElement(IconButton, {
+    classNames,
+    square: true,
+    variant: "ghost",
+    icon: "ph--caret-left--regular",
+    iconOnly: true,
+    label: t("carousel-prev.label"),
+    onClick: prev
+  });
+};
+CarouselPrevious.displayName = "Carousel.Previous";
+var CarouselNext = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next } = useCarousel();
+  if (count <= 1) {
+    return /* @__PURE__ */ React20.createElement("div", null);
+  }
+  return /* @__PURE__ */ React20.createElement(IconButton, {
+    classNames,
+    square: true,
+    variant: "ghost",
+    icon: "ph--caret-right--regular",
+    iconOnly: true,
+    label: t("carousel-next.label"),
+    onClick: next
+  });
+};
+CarouselNext.displayName = "Carousel.Next";
+var CarouselIndicators = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, index, setIndex } = useCarousel();
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: "horizontal",
+    memorizeCurrent: true
+  });
+  if (count <= 1) {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React20.createElement("div", {
+      className: "col-start-2"
+    }, /* @__PURE__ */ React20.createElement("div", {
+      ...arrowNavigationAttrs,
+      className: mx7("flex items-center justify-center", classNames),
+      role: "tablist",
+      "aria-label": t("carousel-indicators.label")
+    }, Array.from({
+      length: count
+    }).map((_, i) => /* @__PURE__ */ React20.createElement(IconButton, {
+      key: i,
+      role: "tab",
+      "aria-selected": i === index,
+      // TODO(burdon): Move to ui-theme.
+      classNames: i === index ? "text-primary-500" : "text-description",
+      icon: i === index ? "ph--circle--fill" : "ph--circle--regular",
+      iconOnly: true,
+      label: t("carousel-go-to.label", {
+        index: i + 1
+      }),
+      onClick: () => setIndex(i),
+      onFocus: () => setIndex(i),
+      size: 3,
+      variant: "ghost"
+    }))))
+  );
+};
+CarouselIndicators.displayName = "Carousel.Indicators";
+var CarouselCaption = ({ children, classNames }) => {
+  const { index } = useCarousel();
+  const content = children(index);
+  if (content == null || content === false || content === "") {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React20.createElement("div", {
+      className: "col-start-2"
+    }, /* @__PURE__ */ React20.createElement("p", {
+      className: mx7("text-center text-description", classNames)
+    }, content))
+  );
+};
+CarouselCaption.displayName = "Carousel.Caption";
+var Carousel = {
+  Root: CarouselRoot,
+  Viewport: CarouselViewport,
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Indicators: CarouselIndicators,
+  Caption: CarouselCaption
+};
+
 // src/components/Clipboard/ClipboardProvider.tsx
-import React20, { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState4 } from "react";
-var ClipboardContext = /* @__PURE__ */ createContext4({
+import React21, { createContext as createContext5, useCallback as useCallback6, useContext as useContext5, useState as useState5 } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext5({
   textValue: "",
   setTextValue: async (_) => {
   }
 });
-var useClipboard = () => useContext4(ClipboardContext);
+var useClipboard = () => useContext5(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = useState4("");
-  const setTextValue = useCallback5(async (nextValue) => {
+  const [textValue, setInternalTextValue] = useState5("");
+  const setTextValue = useCallback6(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React20.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React21.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -1800,14 +2026,14 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // src/components/Clipboard/CopyButton.tsx
-import React21 from "react";
-import { mx as mx7, osTranslations } from "@dxos/ui-theme";
+import React22 from "react";
+import { mx as mx8, osTranslations } from "@dxos/ui-theme";
 var inactiveLabelStyles = "invisible h-px -mb-px overflow-hidden";
 var CopyButton = ({ classNames, value, size = 5, ...props }) => {
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ React21.createElement(Button, {
+  return /* @__PURE__ */ React22.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -1815,20 +2041,18 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React21.createElement("div", {
-    role: "none",
-    className: mx7("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React21.createElement("span", {
+  }, /* @__PURE__ */ React22.createElement("div", {
+    className: mx8("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React22.createElement("span", {
     className: "px-1"
-  }, t("copy.label")), /* @__PURE__ */ React21.createElement(Icon, {
+  }, t("copy.label")), /* @__PURE__ */ React22.createElement(Icon, {
     icon: "ph--copy--regular",
     size
-  })), /* @__PURE__ */ React21.createElement("div", {
-    role: "none",
-    className: mx7("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React21.createElement("span", {
+  })), /* @__PURE__ */ React22.createElement("div", {
+    className: mx8("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React22.createElement("span", {
     className: "px-1"
-  }, t("copy-success.label")), /* @__PURE__ */ React21.createElement(Icon, {
+  }, t("copy-success.label")), /* @__PURE__ */ React22.createElement(Icon, {
     icon: "ph--check--regular",
     size
   })));
@@ -1839,7 +2063,7 @@ var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ..
   const isCopied = textValue === value;
   const label = isCopied ? t("copy-success.label") : props.label ?? t("copy.label");
   const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
-  return /* @__PURE__ */ React21.createElement(IconButton, {
+  return /* @__PURE__ */ React22.createElement(IconButton, {
     iconOnly: true,
     label,
     icon: "ph--copy--regular",
@@ -1862,15 +2086,16 @@ var Clipboard = {
 };
 
 // src/components/Dialog/Dialog.tsx
-import { createContext as createContext5 } from "@radix-ui/react-context";
+import { createContext as createContext6 } from "@radix-ui/react-context";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React22, { forwardRef as forwardRef14 } from "react";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React23, { forwardRef as forwardRef14 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
-import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
-import { slottable as slottable7 } from "@dxos/ui-theme";
-var DialogRoot = (props) => /* @__PURE__ */ React22.createElement(ElevationProvider, {
+import { composableProps as composableProps8, osTranslations as osTranslations2, slottable as slottable7 } from "@dxos/ui-theme";
+var DialogRoot = (props) => /* @__PURE__ */ React23.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React22.createElement(DialogPrimitive.Root, {
+}, /* @__PURE__ */ React23.createElement(DialogPrimitive.Root, {
   // NOTE: Radix warning unless set to undefined.
   // https://www.radix-ui.com/primitives/docs/components/dialog#description
   "aria-describedby": void 0,
@@ -1879,15 +2104,15 @@ var DialogRoot = (props) => /* @__PURE__ */ React22.createElement(ElevationProvi
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
-var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {});
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext6(DIALOG_OVERLAY_NAME, {});
 var DialogOverlay = /* @__PURE__ */ forwardRef14(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React23.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
@@ -1896,7 +2121,7 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var DialogContent = /* @__PURE__ */ forwardRef14(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Content, {
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Content, {
     ...props,
     // NOTE: Radix warning unless set to undefined.
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
@@ -1906,23 +2131,25 @@ var DialogContent = /* @__PURE__ */ forwardRef14(({ classNames, children, size =
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(Column.Root, {
+  }, /* @__PURE__ */ React23.createElement(Column.Root, {
     classNames: "dx-expander",
     gutter: "sm"
   }, children));
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
-var DialogHeader = /* @__PURE__ */ forwardRef14(({ children }, forwardedRef) => {
+var DialogHeader = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(Column.Row, {
-    className: tx("dialog.header"),
-    center: true,
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.header", {}, className),
     ref: forwardedRef
   }, children);
 });
 var DialogCloseIconButton = /* @__PURE__ */ forwardRef14(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation3(osTranslations2);
-  return /* @__PURE__ */ React22.createElement(IconButton, {
+  return /* @__PURE__ */ React23.createElement(IconButton, {
     ...props,
     label: label ?? t("close-dialog.label"),
     icon: "ph--x--regular",
@@ -1933,17 +2160,18 @@ var DialogCloseIconButton = /* @__PURE__ */ forwardRef14(({ label, ...props }, f
   });
 });
 var DialogBody = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(Column.Content, {
-    ...props,
-    asChild,
-    className: tx("dialog.body", {}),
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.body", {}, className),
     ref: forwardedRef
   }, children);
 });
 var DialogTitle = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Title, {
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -1953,7 +2181,7 @@ var DialogTitle = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }
 });
 var DialogDescription = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Description, {
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -1961,15 +2189,15 @@ var DialogDescription = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...p
     ref: forwardedRef
   });
 });
-var DialogActionBar = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
+var DialogActionBar = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(Column.Row, {
-    center: true
-  }, /* @__PURE__ */ React22.createElement("div", {
-    ...props,
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
-  }, children));
+  }, children);
 });
 var DialogClose = DialogPrimitive.Close;
 var Dialog = {
@@ -1989,28 +2217,28 @@ var Dialog = {
 
 // src/components/Dialog/AlertDialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { createContext as createContext6 } from "@radix-ui/react-context";
-import React23, { forwardRef as forwardRef15 } from "react";
-var AlertDialogRoot = (props) => /* @__PURE__ */ React23.createElement(ElevationProvider, {
+import { createContext as createContext7 } from "@radix-ui/react-context";
+import React24, { forwardRef as forwardRef15 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React24.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Root, props));
+}, /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Root, props));
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
 var AlertDialogCancel = AlertDialogPrimitive.Cancel;
 var AlertDialogAction = AlertDialogPrimitive.Action;
 var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
 var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
-var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext7(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
 var AlertDialogOverlay = /* @__PURE__ */ forwardRef15(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React24.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
@@ -2018,7 +2246,7 @@ AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 var AlertDialogContent = /* @__PURE__ */ forwardRef15(({ classNames, children, size = "md", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Content, {
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Content, {
     ...props,
     className: tx("dialog.content", {
       inOverlayLayout,
@@ -2028,7 +2256,7 @@ var AlertDialogContent = /* @__PURE__ */ forwardRef15(({ classNames, children, s
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
     "aria-describedby": void 0,
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(Column.Root, {
+  }, /* @__PURE__ */ React24.createElement(Column.Root, {
     classNames: "dx-expander",
     gutter: "sm"
   }, children));
@@ -2036,7 +2264,7 @@ var AlertDialogContent = /* @__PURE__ */ forwardRef15(({ classNames, children, s
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 var AlertDialogTitle = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Title, {
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -2046,7 +2274,7 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...pr
 });
 var AlertDialogDescription = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Description, {
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -2078,57 +2306,6 @@ import { ErrorBoundary } from "@dxos/react-error-boundary";
 // src/components/ErrorFallback/ErrorFallback.tsx
 import React25 from "react";
 import { safeStringify } from "@dxos/util";
-
-// src/components/ErrorFallback/ErrorStack.tsx
-import ErrorStackParser from "error-stack-parser";
-import React24 from "react";
-import { mx as mx8 } from "@dxos/ui-theme";
-var ErrorStack = ({ error }) => {
-  const frames = ErrorStackParser.parse(error);
-  return /* @__PURE__ */ React24.createElement("div", {
-    className: "font-mono text-sm"
-  }, frames.map((frame, i) => {
-    const isLast = i === frames.length - 1;
-    const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
-    const name = frame.functionName ?? "<anonymous>";
-    return /* @__PURE__ */ React24.createElement("div", {
-      key: i,
-      className: mx8("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface")
-    }, /* @__PURE__ */ React24.createElement("div", {
-      className: "relative"
-    }, /* @__PURE__ */ React24.createElement("div", {
-      className: mx8("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0")
-    }), /* @__PURE__ */ React24.createElement("div", {
-      className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500"
-    })), local ? /* @__PURE__ */ React24.createElement("a", {
-      href: local.href,
-      className: "truncate self-center"
-    }, name) : /* @__PURE__ */ React24.createElement("span", {
-      className: "text-subdued truncate self-center"
-    }, name), /* @__PURE__ */ React24.createElement("span", {
-      className: "text-xs text-subdued truncate self-center"
-    }, local?.fileName ?? ""), /* @__PURE__ */ React24.createElement("span", {
-      className: "text-xs text-subdued text-right self-center"
-    }, local ? `${frame.lineNumber}:${frame.columnNumber}` : ""));
-  }));
-};
-var parseLocalFrame = (fileUrl, line, col) => {
-  try {
-    const { pathname } = new URL(fileUrl);
-    if (!pathname.startsWith("/@fs/")) {
-      return void 0;
-    }
-    const localPath = pathname.slice(4);
-    return {
-      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
-      fileName: pathname.split("/").pop() ?? localPath
-    };
-  } catch {
-    return void 0;
-  }
-};
-
-// src/components/ErrorFallback/ErrorFallback.tsx
 var ErrorFallback = ({ children, error, title, data }) => {
   const isDev = process.env.NODE_ENV === "development";
   const message = error instanceof Error ? error.message : String(error);
@@ -2169,10 +2346,10 @@ var Section = ({ children, title, onClick }) => {
 };
 
 // src/components/ErrorFallback/ThrowError.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 var ThrowError = ({ delay = 1e3, ...props }) => {
-  const [error, setError] = useState5();
-  useEffect3(() => {
+  const [error, setError] = useState6();
+  useEffect4(() => {
     if (delay < 0) {
       return;
     }
@@ -2197,37 +2374,37 @@ var generator = ({ error, delay }) => {
 };
 
 // src/components/Focus/Focus.tsx
-import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
+import { useArrowNavigationGroup as useArrowNavigationGroup2, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
-import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React26, { createContext as createContext7, useCallback as useCallback6, useContext as useContext5, useRef as useRef3, useState as useState6 } from "react";
-import { composableProps as composableProps8, slottable as slottable8 } from "@dxos/ui-theme";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
+import React26, { createContext as createContext8, useCallback as useCallback7, useContext as useContext6, useRef as useRef3, useState as useState7 } from "react";
+import { composableProps as composableProps9, slottable as slottable8 } from "@dxos/ui-theme";
 var FOCUS_STATE_ATTR = "focus-state";
-var FocusContext = /* @__PURE__ */ createContext7({});
-var useFocus = () => useContext5(FocusContext);
+var FocusContext = /* @__PURE__ */ createContext8({});
+var useFocus = () => useContext6(FocusContext);
 var Group3 = slottable8(({ children, asChild, orientation = "vertical", border = false, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot13 : Primitive13.div;
+  const Comp = asChild ? Slot14 : Primitive14.div;
   const { tx } = useThemeContext();
   const rootRef = useRef3(null);
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
-  const arrowNavigationAttrs = useArrowNavigationGroup({
+  const arrowNavigationAttrs = useArrowNavigationGroup2({
     axis: orientation,
     memorizeCurrent: true
   });
   const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
-  const [state, setState] = useState6();
-  const [groupHasFocus, setGroupHasFocus] = useState6(false);
-  const handleFocusIn = useCallback6(() => setGroupHasFocus(true), []);
-  const handleFocusOut = useCallback6((event) => {
+  const [state, setState] = useState7();
+  const [groupHasFocus, setGroupHasFocus] = useState7(false);
+  const handleFocusIn = useCallback7(() => setGroupHasFocus(true), []);
+  const handleFocusOut = useCallback7((event) => {
     const related = event.relatedTarget;
     if (!related || !rootRef.current?.contains(related)) {
       setGroupHasFocus(false);
     }
   }, []);
-  const { className, ...rest } = composableProps8(props);
+  const { className, ...rest } = composableProps9(props);
   return /* @__PURE__ */ React26.createElement(FocusContext.Provider, {
     value: {
       setFocus: setState,
@@ -2249,42 +2426,42 @@ var Group3 = slottable8(({ children, asChild, orientation = "vertical", border =
   }, children));
 });
 var Item4 = slottable8(({ children, asChild, current, border = false, onCurrentChange, onClick, onFocus, onBlur, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot13 : Primitive13.div;
+  const Comp = asChild ? Slot14 : Primitive14.div;
   const { tx } = useThemeContext();
   const focusableGroupAttrs = useFocusableGroup({
     ignoreDefaultKeydown: {
       Enter: true
     }
   });
-  const [focused, setFocused] = useState6(false);
-  const handleClick = useCallback6((event) => {
+  const [focused, setFocused] = useState7(false);
+  const handleClick = useCallback7((event) => {
     onCurrentChange?.();
     onClick?.(event);
   }, [
     onCurrentChange,
     onClick
   ]);
-  const handleKeyDown = useCallback6((event) => {
+  const handleKeyDown = useCallback7((event) => {
     if (event.key === "Enter") {
       onCurrentChange?.();
     }
   }, [
     onCurrentChange
   ]);
-  const handleFocus = useCallback6((event) => {
+  const handleFocus = useCallback7((event) => {
     setFocused(true);
     onFocus?.(event);
   }, [
     onFocus
   ]);
-  const handleBlur = useCallback6((event) => {
+  const handleBlur = useCallback7((event) => {
     setFocused(false);
     onBlur?.(event);
   }, [
     onBlur
   ]);
   const isCurrent = current ?? focused;
-  const { className, ...rest } = composableProps8(props);
+  const { className, ...rest } = composableProps9(props);
   return /* @__PURE__ */ React26.createElement(Comp, {
     ...rest,
     tabIndex: 0,
@@ -2374,11 +2551,11 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ classNames, density: propsDensity
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
-  const density = useDensityContext(propsDensity);
-  const elevation = useElevationContext(propsElevation);
+  const density = useDensityContext(densityProp);
+  const elevation = useElevationContext(elevationProp);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React27.createElement(TextInputPrimitive, {
     ...props,
@@ -2485,11 +2662,11 @@ var Input = {
 };
 
 // src/components/List/List.tsx
-import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
-import { Slot as Slot14 } from "@radix-ui/react-slot";
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
 import React29, { forwardRef as forwardRef17 } from "react";
 import { LIST_ITEM_NAME, LIST_NAME, ListItemCollapsibleContent, List as ListPrimitive, ListItem as ListPrimitiveItem, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, useListContext, useListItemContext } from "@dxos/react-list";
-import { composable as composable4, composableProps as composableProps9 } from "@dxos/ui-theme";
+import { composable as composable4, composableProps as composableProps10 } from "@dxos/ui-theme";
 
 // src/components/List/ListDropIndicator.tsx
 import React28 from "react";
@@ -2515,7 +2692,6 @@ var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React28.createElement("div", {
-    role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
       "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
@@ -2533,7 +2709,7 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
 var List = composable4(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  const { className, ...rest } = composableProps9(props);
+  const { className, ...rest } = composableProps10(props);
   return /* @__PURE__ */ React29.createElement(DensityProvider, {
     density
   }, /* @__PURE__ */ React29.createElement(ListPrimitive, {
@@ -2543,7 +2719,7 @@ var List = composable4(({ children, ...props }, forwardedRef) => {
   }, children));
 });
 var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot14 : Primitive14.div;
+  const Comp = asChild ? Slot15 : Primitive15.div;
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React29.createElement(Comp, {
@@ -2561,7 +2737,6 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React29.createElement("div", {
-    role: "none",
     ...props,
     className: tx("list.item.openTrigger", {
       density
@@ -2707,11 +2882,11 @@ var TreeItem = {
 // src/components/List/Treegrid.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
-import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
-import { Slot as Slot15 } from "@radix-ui/react-slot";
+import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
+import { Slot as Slot16 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React32, { forwardRef as forwardRef19, useCallback as useCallback7 } from "react";
-import { composable as composable5, composableProps as composableProps10 } from "@dxos/ui-theme";
+import React32, { forwardRef as forwardRef19, useCallback as useCallback8 } from "react";
+import { composable as composable5, composableProps as composableProps11 } from "@dxos/ui-theme";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
@@ -2719,12 +2894,12 @@ var TREEGRID_PATH_SEPARATOR = "~";
 var TREEGRID_PARENT_OF_SEPARATOR = " ";
 var TreegridRoot = composable5(({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { className, role: _role, ...rest } = composableProps10(props, {
+  const { className, role: _role, ...rest } = composableProps11(props, {
     classNames
   });
-  const Comp = asChild ? Slot15 : Primitive15.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { findFirstFocusable } = useFocusFinders();
-  const handleKeyDown = useCallback7((event) => {
+  const handleKeyDown = useCallback8((event) => {
     switch (event.key) {
       case "ArrowDown":
       case "ArrowUp": {
@@ -2772,7 +2947,7 @@ var TreegridRoot = composable5(({ asChild, classNames, children, style, gridTemp
 });
 var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot15 : Primitive15.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState3({
@@ -2818,19 +2993,19 @@ var Treegrid = {
 
 // src/components/Main/Main.tsx
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import { createContext as createContext8 } from "@radix-ui/react-context";
+import { createContext as createContext9 } from "@radix-ui/react-context";
 import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
-import { Slot as Slot16 } from "@radix-ui/react-slot";
+import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
+import { Slot as Slot17 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React33, { forwardRef as forwardRef20, useCallback as useCallback9, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import React33, { forwardRef as forwardRef20, useCallback as useCallback10, useEffect as useEffect6, useRef as useRef4, useState as useState9 } from "react";
 import { addEventListener } from "@dxos/async";
 import { log } from "@dxos/log";
 import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
 import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
 
 // src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback8, useEffect as useEffect4, useState as useState7 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect5, useState as useState8 } from "react";
 var useSwipeToDismiss = (ref, {
   onDismiss,
   dismissThreshold = 64,
@@ -2839,22 +3014,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState7(0);
-  const [gestureStartX, setGestureStartX] = useState7(0);
-  const setIdle = useCallback8(() => {
+  const [motionState, setMotionState] = useState8(0);
+  const [gestureStartX, setGestureStartX] = useState8(0);
+  const setIdle = useCallback9(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback8(() => {
+  const setFollowing = useCallback9(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback8(({ screenX }) => {
+  const handlePointerDown = useCallback9(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -2862,7 +3037,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback8(({ screenX }) => {
+  const handlePointerMove = useCallback9(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -2886,12 +3061,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback8(() => {
+  const handlePointerUp = useCallback9(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -2900,7 +3075,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -2909,7 +3084,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -2932,7 +3107,7 @@ var handleOpenAutoFocus = (event) => {
 };
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback9((event) => {
+  const handleKeyDown = useCallback10((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -2959,25 +3134,15 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     ...focusableGroupAttrs
   };
 };
-var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
+var [MainProvider, useMainContext] = createContext9(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (_nextState) => {
-    log.warn("Not initialized", void 0, {
-      F: __dxlog_file,
-      L: 110,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 67, S: void 0 });
   },
   complementarySidebarState: "closed",
   setComplementarySidebarState: (_nextState) => {
-    log.warn("Not initialized", void 0, {
-      F: __dxlog_file,
-      L: 115,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 71, S: void 0 });
   }
 });
 var useSidebars = (consumerName) => {
@@ -2985,22 +3150,22 @@ var useSidebars = (consumerName) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback9(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: useCallback10(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: useCallback9(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback9(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback9(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: useCallback10(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback10(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback10(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback9(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: useCallback10(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: useCallback9(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback9(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback9(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: useCallback10(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback10(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback10(() => setComplementarySidebarState("closed"), [])
   };
 };
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
@@ -3015,9 +3180,9 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     defaultProp: defaultComplementarySidebarState,
     onChange: onComplementarySidebarStateChange
   });
-  const [resizing, setResizing] = useState8(false);
+  const [resizing, setResizing] = useState9(false);
   const resizeInterval = useRef4(null);
-  useEffect5(() => addEventListener(window, "resize", () => {
+  useEffect6(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -3067,7 +3232,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = useCallback9((event) => {
+  const handleKeyDown = useCallback10((event) => {
     const focusGroupParent = event.target.closest("[data-tabster]");
     if (event.key === "Escape" && focusGroupParent) {
       event.preventDefault();
@@ -3078,7 +3243,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root14 = isLg ? Primitive16.div : DialogContent2;
+  const Root14 = isLg ? Primitive17.div : DialogContent2;
   return /* @__PURE__ */ React33.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
@@ -3134,7 +3299,7 @@ MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot16 : role ? Primitive16.div : "main";
+  const Comp = asChild ? Slot17 : role ? Primitive17.div : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
   return /* @__PURE__ */ React33.createElement(Comp, {
     ...handlesFocus && {
@@ -3161,12 +3326,77 @@ var Main = {
   ComplementarySidebar: MainComplementarySidebar
 };
 
+// src/components/MediaPlayer/MediaPlayer.tsx
+import React34 from "react";
+import { mx as mx10 } from "@dxos/ui-theme";
+var VIDEO_EXTENSIONS = [
+  ".mp4",
+  ".webm",
+  ".ogv",
+  ".mov",
+  ".m4v"
+];
+var AUDIO_EXTENSIONS = [
+  ".mp3",
+  ".wav",
+  ".ogg",
+  ".m4a",
+  ".aac",
+  ".flac"
+];
+var detectMediaKind = (src) => {
+  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 void 0;
+};
+var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, loop = false, muted = false, alt, crossOrigin = "anonymous" }) => {
+  const resolved = kind ?? detectMediaKind(src) ?? "video";
+  if (resolved === "audio") {
+    return (
+      // TODO(burdon): Move to ui-theme.
+      /* @__PURE__ */ React34.createElement("audio", {
+        className: mx10("w-full", classNames),
+        src,
+        controls,
+        autoPlay,
+        loop,
+        muted,
+        crossOrigin,
+        "aria-label": alt
+      })
+    );
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React34.createElement("div", {
+      className: mx10("dx-container flex items-center justify-center", classNames)
+    }, /* @__PURE__ */ React34.createElement("video", {
+      className: "aspect-video max-w-full max-h-full",
+      src,
+      controls,
+      autoPlay,
+      loop,
+      muted,
+      crossOrigin,
+      "aria-label": alt
+    }))
+  );
+};
+
 // src/components/Message/Message.tsx
-import { createContext as createContext9 } from "@radix-ui/react-context";
-import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
-import { Slot as Slot17 } from "@radix-ui/react-slot";
-import React34, { forwardRef as forwardRef21 } from "react";
+import { createContext as createContext10 } from "@radix-ui/react-context";
+import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
+import React35, { forwardRef as forwardRef21 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
 import { useId as useId3 } from "@dxos/react-hooks";
+import { translationKey as translationKey3 } from "#translations";
 var messageIcons = {
   success: "ph--check-circle--duotone",
   info: "ph--info--duotone",
@@ -3175,18 +3405,18 @@ var messageIcons = {
   neutral: "ph--info--duotone"
 };
 var MESSAGE_NAME = "Message";
-var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
+var [MessageProvider, useMessageContext] = createContext10(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Comp = asChild ? Slot17 : Primitive17.div;
-  return /* @__PURE__ */ React34.createElement(MessageProvider, {
+  const Comp = asChild ? Slot18 : Primitive18.div;
+  return /* @__PURE__ */ React35.createElement(MessageProvider, {
     titleId,
     descriptionId,
     valence
-  }, /* @__PURE__ */ React34.createElement(Comp, {
+  }, /* @__PURE__ */ React35.createElement(Comp, {
     role: valence === "neutral" ? "paragraph" : "alert",
     ...props,
     className: tx("message.root", {
@@ -3200,32 +3430,38 @@ var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef21(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+  const { t } = useTranslation4(translationKey3);
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Comp = asChild ? Slot17 : Primitive17.h2;
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React34.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React35.createElement("div", {
     className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? /* @__PURE__ */ React34.createElement("div", null) : /* @__PURE__ */ React34.createElement(Icon, {
-    icon,
-    classNames: tx("message.icon", {
+  }, icon && /* @__PURE__ */ React35.createElement("div", {
+    className: tx("message.icon", {
       valence
     })
-  }), /* @__PURE__ */ React34.createElement("span", {
+  }, /* @__PURE__ */ React35.createElement(Icon, {
+    icon
+  })), /* @__PURE__ */ React35.createElement("h2", {
     className: tx("message.title", {}, classNames)
-  }, children));
+  }, children), onClose && /* @__PURE__ */ React35.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("toolbar-close.label"),
+    onClick: onClose
+  }));
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "MessageContent";
 var MessageContent = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Comp = asChild ? Slot17 : Primitive17.p;
-  return /* @__PURE__ */ React34.createElement(Comp, {
+  const Comp = asChild ? Slot18 : Primitive18.p;
+  return /* @__PURE__ */ React35.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
     id: descriptionId,
@@ -3252,11 +3488,11 @@ import * as PopperPrimitive from "@radix-ui/react-popper";
 import { createPopperScope } from "@radix-ui/react-popper";
 import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
 import { Presence } from "@radix-ui/react-presence";
-import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
-import { Slot as Slot18 } from "@radix-ui/react-slot";
+import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
+import { Slot as Slot19 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React35, { forwardRef as forwardRef22, useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import React36, { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef5, useState as useState10 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -3268,24 +3504,24 @@ var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef5(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState9(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState10(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React35.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React35.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React36.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId4(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback10(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback11(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback10(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback10(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback11(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback11(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
@@ -3296,14 +3532,14 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  useEffect6(() => {
+  useEffect7(() => {
     onCustomAnchorAdd();
     return () => onCustomAnchorRemove();
   }, [
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React35.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -3316,8 +3552,8 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
-  const Comp = asChild ? Slot18 : Primitive18.button;
-  const trigger = /* @__PURE__ */ React35.createElement(Comp, {
+  const Comp = asChild ? Slot19 : Primitive19.button;
+  const trigger = /* @__PURE__ */ React36.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -3327,7 +3563,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React35.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React36.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -3338,12 +3574,12 @@ var PopoverVirtualTrigger = (props) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  useEffect6(() => {
+  useEffect7(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React35.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -3356,12 +3592,12 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React35.createElement(PortalProvider, {
+  return /* @__PURE__ */ React36.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React35.createElement(Presence, {
+  }, /* @__PURE__ */ React36.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React35.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React36.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
@@ -3372,12 +3608,12 @@ var PopoverContent = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React35.createElement(Presence, {
+  return /* @__PURE__ */ React36.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React35.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React36.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React35.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React36.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
@@ -3388,16 +3624,16 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
   const contentRef = useRef5(null);
   const composedRefs = useComposedRefs2(forwardedRef, contentRef);
   const isRightClickOutsideRef = useRef5(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React35.createElement(RemoveScroll, {
-    as: Slot18,
+  return /* @__PURE__ */ React36.createElement(RemoveScroll, {
+    as: Slot19,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React35.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React36.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
@@ -3428,7 +3664,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef)
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const hasInteractedOutsideRef = useRef5(false);
   const hasPointerDownOutsideRef = useRef5(false);
-  return /* @__PURE__ */ React35.createElement(PopoverContentImpl, {
+  return /* @__PURE__ */ React36.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -3471,7 +3707,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   useFocusGuards();
-  const computedCollisionBoundary = useMemo5(() => {
+  const computedCollisionBoundary = useMemo7(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
     return closestBoundary ? Array.isArray(collisionBoundary) ? [
       closestBoundary,
@@ -3487,13 +3723,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React35.createElement(FocusScope, {
+  return /* @__PURE__ */ React36.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React35.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React36.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -3501,7 +3737,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React35.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React36.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -3530,7 +3766,7 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React35.createElement(Primitive18.button, {
+  return /* @__PURE__ */ React36.createElement(Primitive19.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -3543,7 +3779,7 @@ var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React35.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", {}, classNames),
@@ -3553,8 +3789,8 @@ var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
 PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot18 : Primitive18.div;
-  return /* @__PURE__ */ React35.createElement(Comp, {
+  const Comp = asChild ? Slot19 : Primitive19.div;
+  return /* @__PURE__ */ React36.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
       constrainInline,
@@ -3577,10 +3813,10 @@ var Popover = {
 };
 
 // src/components/Status/Status.tsx
-import React36, { forwardRef as forwardRef23 } from "react";
+import React37, { forwardRef as forwardRef23 } from "react";
 var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React36.createElement("span", {
+  return /* @__PURE__ */ React37.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", {
@@ -3588,7 +3824,7 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React36.createElement("span", {
+  }, /* @__PURE__ */ React37.createElement("span", {
     role: "none",
     className: tx("status.bar", {
       indeterminate,
@@ -3603,19 +3839,19 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
 });
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { createContext as createContext10 } from "@radix-ui/react-context";
-import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
-import { Slot as Slot19 } from "@radix-ui/react-slot";
-import React37, { useMemo as useMemo6 } from "react";
-import { composableProps as composableProps11, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
+import { createContext as createContext11 } from "@radix-ui/react-context";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
+import React38, { useMemo as useMemo8 } from "react";
+import { composableProps as composableProps12, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
 var SCROLLAREA_NAME = "ScrollArea";
-var [ScrollAreaProvider, useScrollAreaContext] = createContext10(SCROLLAREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createContext11(SCROLLAREA_NAME);
 var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
 var ScrollAreaRoot = slottable9(({ children, asChild, orientation = "vertical", autoHide = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { className, ...rest } = composableProps11(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
-  const options = useMemo6(() => ({
+  const { className, ...rest } = composableProps12(props);
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  const options = useMemo8(() => ({
     orientation,
     autoHide,
     centered,
@@ -3630,7 +3866,7 @@ var ScrollAreaRoot = slottable9(({ children, asChild, orientation = "vertical",
     thin,
     snap
   ]);
-  return /* @__PURE__ */ React37.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React37.createElement(Comp, {
+  return /* @__PURE__ */ React38.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React38.createElement(Comp, {
     ...rest,
     className: tx("scrollArea.root", options, className),
     ref: forwardedRef
@@ -3642,10 +3878,10 @@ var ScrollAreaViewport = slottable9(({ children, asChild, ...props }, forwardedR
   const { tx } = useThemeContext();
   const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
   const density = options.thin ? scrollbar.thin : scrollbar.coarse;
-  const { className, ...rest } = composableProps11(props);
+  const { className, ...rest } = composableProps12(props);
   const { style, ...restWithoutStyle } = rest;
-  const Comp = asChild ? Slot19 : Primitive19.div;
-  return /* @__PURE__ */ React37.createElement(Comp, {
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React38.createElement(Comp, {
     ...restWithoutStyle,
     style: {
       "--scroll-width": `${density.size}px`,
@@ -3663,25 +3899,25 @@ var ScrollArea = {
 };
 
 // src/components/ScrollContainer/ScrollContainer.tsx
-import { createContext as createContext11 } from "@radix-ui/react-context";
-import React38, { forwardRef as forwardRef24, useCallback as useCallback11, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo7, useRef as useRef6, useState as useState10 } from "react";
+import { createContext as createContext12 } from "@radix-ui/react-context";
+import React39, { forwardRef as forwardRef24, useCallback as useCallback12, useEffect as useEffect8, useImperativeHandle, useMemo as useMemo9, useRef as useRef6, useState as useState11 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useMergeRefs } from "@dxos/react-hooks";
-import { composable as composable6, composableProps as composableProps12, slottable as slottable10 } from "@dxos/ui-theme";
-import { mx as mx10 } from "@dxos/ui-theme";
+import { composable as composable6, composableProps as composableProps13, slottable as slottable10 } from "@dxos/ui-theme";
+import { mx as mx11 } from "@dxos/ui-theme";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui/src/components/ScrollContainer/ScrollContainer.tsx";
 var isBottom = (el) => {
   return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
 };
-var [ScrollContainerProvider, useScrollContainerContext] = createContext11("ScrollContainer");
+var [ScrollContainerProvider, useScrollContainerContext] = createContext12("ScrollContainer");
 var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
   const scrollerRef = useRef6(null);
   const autoScrollRef = useRef6(false);
-  const [pinned, setPinned] = useState10(pin);
-  const [overflow, setOverflow] = useState10(false);
+  const [pinned, setPinned] = useState11(pin);
+  const [overflow, setOverflow] = useState11(false);
   const timeoutRef = useRef6(void 0);
-  const scrollToBottom = useCallback11((behavior = behaviorProp) => {
+  const scrollToBottom = useCallback12((behavior = behaviorProp) => {
     if (scrollerRef.current) {
       if (behavior !== "instant") {
         autoScrollRef.current = true;
@@ -3701,20 +3937,12 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
   }, [
     behaviorProp
   ]);
-  const controller = useMemo7(() => ({
+  const controller = useMemo9(() => ({
     get viewport() {
       return scrollerRef.current;
     },
     scrollToTop: () => {
-      invariant(scrollerRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 108,
-        S: void 0,
-        A: [
-          "scrollerRef.current",
-          ""
-        ]
-      });
+      invariant(scrollerRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 54, S: void 0, A: ["scrollerRef.current", ""] });
       scrollerRef.current.scrollTo({
         top: 0,
         behavior: "smooth"
@@ -3730,10 +3958,10 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
   useImperativeHandle(forwardedRef, () => controller, [
     controller
   ]);
-  const setViewport = useCallback11((el) => {
+  const setViewport = useCallback12((el) => {
     scrollerRef.current = el;
   }, []);
-  return /* @__PURE__ */ React38.createElement(ScrollContainerProvider, {
+  return /* @__PURE__ */ React39.createElement(ScrollContainerProvider, {
     pinned,
     overflow,
     controller,
@@ -3744,8 +3972,8 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
 });
 Root10.displayName = "ScrollContainer.Root";
 var Content6 = composable6(({ children, thin, padding, centered, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React38.createElement(ScrollArea.Root, {
-    ...composableProps12(props, {
+  return /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
+    ...composableProps13(props, {
       classNames: "relative"
     }),
     thin,
@@ -3763,7 +3991,7 @@ var Viewport = slottable10(({ children, asChild, ...props }, forwardedRef) => {
     scrollerRef
   ]);
   const { setViewport, setPinned, setOverflow } = useScrollContainerContext(VIEWPORT_NAME);
-  useEffect7(() => {
+  useEffect8(() => {
     const el = scrollerRef.current;
     if (!el) {
       return;
@@ -3775,11 +4003,11 @@ var Viewport = slottable10(({ children, asChild, ...props }, forwardedRef) => {
     setPinned,
     setOverflow
   ]);
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ScrollArea.Viewport, {
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
     asChild,
-    ...composableProps12(props),
+    ...composableProps13(props),
     ref: mergedRef
-  }, children), /* @__PURE__ */ React38.createElement(PinEffect, {
+  }, children), /* @__PURE__ */ React39.createElement(PinEffect, {
     scrollerRef
   }));
 });
@@ -3787,7 +4015,7 @@ Viewport.displayName = VIEWPORT_NAME;
 var PIN_EFFECT_NAME = "ScrollContainer.PinEffect";
 var PinEffect = ({ scrollerRef }) => {
   const { pinned, controller } = useScrollContainerContext(PIN_EFFECT_NAME);
-  useEffect7(() => {
+  useEffect8(() => {
     const viewport = scrollerRef.current;
     if (!pinned || !viewport) {
       return;
@@ -3824,14 +4052,13 @@ var PinEffect = ({ scrollerRef }) => {
 var FADE_NAME = "ScrollContainer.Fade";
 var Fade = () => {
   const { overflow } = useScrollContainerContext(FADE_NAME);
-  return /* @__PURE__ */ React38.createElement("div", {
-    role: "none",
+  return /* @__PURE__ */ React39.createElement("div", {
     "data-visible": overflow,
-    className: mx10(
+    className: mx11(
       // NOTE: Gradients may not be visible with dark reader extensions.
       "z-10 absolute top-0 inset-x-0 h-24 w-full",
       'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
-      "bg-gradient-to-b from-(--surface-bg) to-transparent pointer-events-none"
+      "bg-gradient-to-b from-(--color-base-surface) to-transparent pointer-events-none"
     )
   });
 };
@@ -3839,10 +4066,9 @@ Fade.displayName = FADE_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 var ScrollDownButton = ({ classNames }) => {
   const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
-  return /* @__PURE__ */ React38.createElement("div", {
-    role: "none",
-    className: mx10("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
-  }, /* @__PURE__ */ React38.createElement(IconButton, {
+  return /* @__PURE__ */ React39.createElement("div", {
+    className: mx11("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React39.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
     iconOnly: true,
@@ -3862,23 +4088,23 @@ var ScrollContainer = {
 
 // src/components/Select/Select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React39, { forwardRef as forwardRef25 } from "react";
+import React40, { forwardRef as forwardRef25 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
 var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
 var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React39.createElement(Button, props, /* @__PURE__ */ React39.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React40.createElement(Button, props, /* @__PURE__ */ React40.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React39.createElement("span", {
+  }, children), /* @__PURE__ */ React40.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ React39.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React40.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React39.createElement(Icon, {
+  }, /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }))));
@@ -3887,7 +4113,7 @@ var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collis
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -3900,29 +4126,29 @@ var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collis
 });
 var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React39.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-up--bold"
   }));
 });
 var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React39.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
 var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", {}, classNames),
     ref: forwardedRef
@@ -3930,7 +4156,7 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...p
 });
 var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
@@ -3939,7 +4165,7 @@ var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forward
 var SelectItemText = SelectPrimitive.ItemText;
 var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", {}, classNames),
     ref: forwardedRef
@@ -3947,13 +4173,13 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children,
 });
 var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React39.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React39.createElement("span", {
+  }, /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React40.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ React39.createElement(Icon, {
+  }), /* @__PURE__ */ React40.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
@@ -3961,7 +4187,7 @@ var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
 var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", {}, classNames),
     ref: forwardedRef
@@ -3969,7 +4195,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, fo
 });
 var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", {}, classNames),
     ref: forwardedRef
@@ -3997,10 +4223,10 @@ var Select = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import React40, { forwardRef as forwardRef26 } from "react";
+import React41, { forwardRef as forwardRef26 } from "react";
 var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React40.createElement("div", {
+  return /* @__PURE__ */ React41.createElement("div", {
     ...props,
     className: tx("skeleton.root", {
       variant
@@ -4011,10 +4237,10 @@ var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default",
 
 // src/components/Splitter/Splitter.tsx
 import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
-import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
-import { Slot as Slot20 } from "@radix-ui/react-slot";
-import React41 from "react";
-import { composableProps as composableProps13, slottable as slottable11 } from "@dxos/ui-theme";
+import { Primitive as Primitive21 } from "@radix-ui/react-primitive";
+import { Slot as Slot21 } from "@radix-ui/react-slot";
+import React42 from "react";
+import { composableProps as composableProps14, slottable as slottable11 } from "@dxos/ui-theme";
 var SPLITTER_NAME = "Splitter";
 var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
 var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
@@ -4022,14 +4248,14 @@ var ROOT_NAME = "Splitter.Root";
 var Root12 = slottable11(({ asChild, mode = "top", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { __scopeSplitter, ...rest } = props;
-  const { className, ...restProps } = composableProps13(rest);
-  const Comp = asChild ? Slot20 : Primitive20.div;
-  return /* @__PURE__ */ React41.createElement(SplitterProvider, {
+  const { className, ...restProps } = composableProps14(rest);
+  const Comp = asChild ? Slot21 : Primitive21.div;
+  return /* @__PURE__ */ React42.createElement(SplitterProvider, {
     scope: __scopeSplitter,
     mode,
     ratio,
     transition
-  }, /* @__PURE__ */ React41.createElement(Comp, {
+  }, /* @__PURE__ */ React42.createElement(Comp, {
     ...restProps,
     ref: forwardedRef,
     className: tx("splitter.root", {}, className)
@@ -4040,13 +4266,13 @@ var PANEL_NAME = "Splitter.Panel";
 var Panel2 = slottable11(({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { __scopeSplitter, ...rest } = props;
-  const Comp = asChild ? Slot20 : Primitive20.div;
+  const Comp = asChild ? Slot21 : Primitive21.div;
   const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
-  const { className, ...restProps } = composableProps13(rest);
+  const { className, ...restProps } = composableProps14(rest);
   const isTopPanel = position === "top";
   const topOffset = isTopPanel ? "0%" : mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%`;
   const height = isTopPanel ? mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%` : mode === "bottom" ? "100%" : mode === "top" ? "0%" : `${(1 - ratio) * 100}%`;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...restProps,
     ref: forwardedRef,
     className: tx("splitter.panel", {}, className),
@@ -4065,13 +4291,13 @@ var Splitter = {
 };
 
 // src/components/Tag/Tag.tsx
-import { Primitive as Primitive21 } from "@radix-ui/react-primitive";
-import { Slot as Slot21 } from "@radix-ui/react-slot";
-import React42, { forwardRef as forwardRef27 } from "react";
+import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
+import { Slot as Slot22 } from "@radix-ui/react-slot";
+import React43, { forwardRef as forwardRef27 } from "react";
 var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot21 : Primitive21.span;
-  return /* @__PURE__ */ React42.createElement(Comp, {
+  const Comp = asChild ? Slot22 : Primitive22.span;
+  return /* @__PURE__ */ React43.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
       palette
@@ -4082,14 +4308,14 @@ var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNam
 });
 
 // src/components/Toast/Toast.tsx
-import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
-import { Slot as Slot22 } from "@radix-ui/react-slot";
+import { Primitive as Primitive23 } from "@radix-ui/react-primitive";
+import { Slot as Slot23 } from "@radix-ui/react-slot";
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React43, { forwardRef as forwardRef28 } from "react";
+import React44, { forwardRef as forwardRef28 } from "react";
 var ToastProvider = ToastPrimitive.Provider;
 var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(ToastPrimitive.Viewport, {
+  return /* @__PURE__ */ React44.createElement(ToastPrimitive.Viewport, {
     ...props,
     className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
@@ -4097,18 +4323,18 @@ var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forw
 });
 var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(ToastPrimitive.Root, {
+  return /* @__PURE__ */ React44.createElement(ToastPrimitive.Root, {
     ...props,
     className: tx("toast.root", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React43.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React44.createElement(ElevationProvider, {
     elevation: "toast"
   }, children));
 });
 var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : Primitive22.div;
-  return /* @__PURE__ */ React43.createElement(Comp, {
+  const Comp = asChild ? Slot23 : Primitive23.div;
+  return /* @__PURE__ */ React44.createElement(Comp, {
     ...props,
     className: tx("toast.body", {}, classNames),
     ref: forwardedRef
@@ -4116,8 +4342,8 @@ var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props },
 });
 var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : ToastPrimitive.Title;
-  return /* @__PURE__ */ React43.createElement(Comp, {
+  const Comp = asChild ? Slot23 : ToastPrimitive.Title;
+  return /* @__PURE__ */ React44.createElement(Comp, {
     ...props,
     className: tx("toast.title", {}, classNames),
     ref: forwardedRef
@@ -4125,8 +4351,8 @@ var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }
 });
 var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : ToastPrimitive.Description;
-  return /* @__PURE__ */ React43.createElement(Comp, {
+  const Comp = asChild ? Slot23 : ToastPrimitive.Description;
+  return /* @__PURE__ */ React44.createElement(Comp, {
     ...props,
     className: tx("toast.description", {}, classNames),
     ref: forwardedRef
@@ -4134,8 +4360,8 @@ var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...p
 });
 var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : Primitive22.div;
-  return /* @__PURE__ */ React43.createElement(Comp, {
+  const Comp = asChild ? Slot23 : Primitive23.div;
+  return /* @__PURE__ */ React44.createElement(Comp, {
     ...props,
     className: tx("toast.actions", {}, classNames),
     ref: forwardedRef
@@ -4163,6 +4389,7 @@ export {
   ButtonGroup,
   Callout,
   Card,
+  Carousel,
   Clipboard,
   Column,
   Container,
@@ -4189,6 +4416,7 @@ export {
   List,
   ListItem,
   Main,
+  MediaPlayer,
   Message,
   Panel,
   Popover,
@@ -4220,13 +4448,16 @@ export {
   createPopoverScope,
   createSplitterScope,
   createTooltipScope,
+  detectMediaKind,
   hasIosKeyboard,
   initialSafeArea,
   isLabel,
   messageIcons,
+  parseCaptureOwnerStack,
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
+  useCarousel,
   useClipboard,
   useDensityContext,
   useDropdownMenuContext,