@dxos/react-ui 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

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

@@ -18,7 +18,7 @@ import {
   useThemeContext,
   useTooltipContext,
   useTranslation
-} from "./chunk-QUD5P3RU.mjs";
+} from "./chunk-3JSJK2ZY.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -26,7 +26,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";
@@ -374,12 +374,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, {
@@ -484,6 +485,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)",
@@ -498,51 +500,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
@@ -668,7 +666,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);
@@ -707,7 +705,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
     }
@@ -730,7 +734,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
     }
@@ -768,7 +772,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;
@@ -796,15 +802,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;
 };
@@ -816,20 +830,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 } from "#translations";
 
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
@@ -1503,6 +1504,7 @@ var CardRoot = slottable6(({ children, id, asChild, role, border = true, fullWid
     }, className),
     ref: forwardedRef
   }, /* @__PURE__ */ React19.createElement(Column.Root, {
+    classNames: "overflow-hidden",
     gutter: density === "coarse" ? "lg" : "md"
   }, children));
 });
@@ -1602,10 +1604,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
@@ -1697,7 +1700,8 @@ var CardPoster = (props) => {
         props.classNames
       ],
       src: props.image,
-      alt: props.alt
+      alt: props.alt,
+      fit: props.fit
     }));
   }
   if (props.icon) {
@@ -1866,10 +1870,11 @@ var Clipboard = {
 // src/components/Dialog/Dialog.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
 import React22, { 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";
+import { composableProps as composableProps8, osTranslations as osTranslations2, slottable as slottable7 } from "@dxos/ui-theme";
 var DialogRoot = (props) => /* @__PURE__ */ React22.createElement(ElevationProvider, {
   elevation: "dialog"
 }, /* @__PURE__ */ React22.createElement(DialogPrimitive.Root, {
@@ -1914,11 +1919,13 @@ var DialogContent = /* @__PURE__ */ forwardRef14(({ classNames, children, size =
   }, 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__ */ React22.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.header", {}, className),
     ref: forwardedRef
   }, children);
 });
@@ -1935,11 +1942,12 @@ 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__ */ React22.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.body", {}, className),
     ref: forwardedRef
   }, children);
 });
@@ -1963,15 +1971,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__ */ React22.createElement(Comp, {
+    ...rest,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
-  }, children));
+  }, children);
 });
 var DialogClose = DialogPrimitive.Close;
 var Dialog = {
@@ -2150,15 +2158,15 @@ var generator = ({ error, delay }) => {
 // src/components/Focus/Focus.tsx
 import { useArrowNavigationGroup, 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 { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
 import React25, { 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 { 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 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({
@@ -2178,7 +2186,7 @@ var Group3 = slottable8(({ children, asChild, orientation = "vertical", border =
       setGroupHasFocus(false);
     }
   }, []);
-  const { className, ...rest } = composableProps8(props);
+  const { className, ...rest } = composableProps9(props);
   return /* @__PURE__ */ React25.createElement(FocusContext.Provider, {
     value: {
       setFocus: setState,
@@ -2200,7 +2208,7 @@ 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: {
@@ -2235,7 +2243,7 @@ var Item4 = slottable8(({ children, asChild, current, border = false, onCurrentC
     onBlur
   ]);
   const isCurrent = current ?? focused;
-  const { className, ...rest } = composableProps8(props);
+  const { className, ...rest } = composableProps9(props);
   return /* @__PURE__ */ React25.createElement(Comp, {
     ...rest,
     tabIndex: 0,
@@ -2325,11 +2333,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__ */ React26.createElement(TextInputPrimitive, {
     ...props,
@@ -2436,11 +2444,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 React28, { 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 React27 from "react";
@@ -2484,7 +2492,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__ */ React28.createElement(DensityProvider, {
     density
   }, /* @__PURE__ */ React28.createElement(ListPrimitive, {
@@ -2494,7 +2502,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__ */ React28.createElement(Comp, {
@@ -2658,11 +2666,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 React31, { forwardRef as forwardRef19, useCallback as useCallback7 } from "react";
-import { composable as composable5, composableProps as composableProps10 } from "@dxos/ui-theme";
+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);
@@ -2670,10 +2678,10 @@ 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) => {
     switch (event.key) {
@@ -2723,7 +2731,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({
@@ -2771,8 +2779,8 @@ var Treegrid = {
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { createContext as createContext8 } 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 React32, { forwardRef as forwardRef20, useCallback as useCallback9, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
 import { addEventListener } from "@dxos/async";
@@ -2914,21 +2922,11 @@ var [MainProvider, useMainContext] = createContext8(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) => {
@@ -3029,7 +3027,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root14 = isLg ? Primitive16.div : DialogContent2;
+  const Root14 = isLg ? Primitive17.div : DialogContent2;
   return /* @__PURE__ */ React32.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
@@ -3085,7 +3083,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__ */ React32.createElement(Comp, {
     ...handlesFocus && {
@@ -3114,10 +3112,12 @@ var Main = {
 
 // 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 { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
 import React33, { forwardRef as forwardRef21 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
 import { useId as useId3 } from "@dxos/react-hooks";
+import { translationKey as translationKey2 } from "#translations";
 var messageIcons = {
   success: "ph--check-circle--duotone",
   info: "ph--info--duotone",
@@ -3132,7 +3132,7 @@ var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence = "neutral",
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Comp = asChild ? Slot17 : Primitive17.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   return /* @__PURE__ */ React33.createElement(MessageProvider, {
     titleId,
     descriptionId,
@@ -3151,31 +3151,39 @@ 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(translationKey2);
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Comp = asChild ? Slot17 : Primitive17.h2;
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React33.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React33.createElement("div", {
+    role: "none",
     className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? /* @__PURE__ */ React33.createElement("div", null) : /* @__PURE__ */ React33.createElement(Icon, {
-    icon,
-    classNames: tx("message.icon", {
+  }, icon && /* @__PURE__ */ React33.createElement("div", {
+    role: "none",
+    className: tx("message.icon", {
       valence
     })
-  }), /* @__PURE__ */ React33.createElement("span", {
+  }, /* @__PURE__ */ React33.createElement(Icon, {
+    icon
+  })), /* @__PURE__ */ React33.createElement("h2", {
     className: tx("message.title", {}, classNames)
-  }, children));
+  }, children), onClose && /* @__PURE__ */ React33.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;
+  const Comp = asChild ? Slot18 : Primitive18.p;
   return /* @__PURE__ */ React33.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
@@ -3203,8 +3211,8 @@ 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 React34, { forwardRef as forwardRef22, useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
@@ -3267,7 +3275,7 @@ 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 Comp = asChild ? Slot19 : Primitive19.button;
   const trigger = /* @__PURE__ */ React34.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
@@ -3346,7 +3354,7 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
     }
   }, []);
   return /* @__PURE__ */ React34.createElement(RemoveScroll, {
-    as: Slot18,
+    as: Slot19,
     allowPinchZoom: true
   }, /* @__PURE__ */ React34.createElement(PopoverContentImpl, {
     ...props,
@@ -3481,7 +3489,7 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React34.createElement(Primitive18.button, {
+  return /* @__PURE__ */ React34.createElement(Primitive19.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -3504,7 +3512,7 @@ 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;
+  const Comp = asChild ? Slot19 : Primitive19.div;
   return /* @__PURE__ */ React34.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
@@ -3555,17 +3563,17 @@ 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 { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
 import React36, { useMemo as useMemo6 } from "react";
-import { composableProps as composableProps11, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
+import { composableProps as composableProps12, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
 var SCROLLAREA_NAME = "ScrollArea";
 var [ScrollAreaProvider, useScrollAreaContext] = createContext10(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 { className, ...rest } = composableProps12(props);
+  const Comp = asChild ? Slot20 : Primitive20.div;
   const options = useMemo6(() => ({
     orientation,
     autoHide,
@@ -3593,9 +3601,9 @@ 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;
+  const Comp = asChild ? Slot20 : Primitive20.div;
   return /* @__PURE__ */ React36.createElement(Comp, {
     ...restWithoutStyle,
     style: {
@@ -3619,7 +3627,7 @@ import React37, { forwardRef as forwardRef24, useCallback as useCallback11, useE
 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 { composable as composable6, composableProps as composableProps13, slottable as slottable10 } from "@dxos/ui-theme";
 import { mx as mx9 } from "@dxos/ui-theme";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui/src/components/ScrollContainer/ScrollContainer.tsx";
 var isBottom = (el) => {
@@ -3657,15 +3665,7 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
       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"
@@ -3696,7 +3696,7 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
 Root10.displayName = "ScrollContainer.Root";
 var Content6 = composable6(({ children, thin, padding, centered, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
-    ...composableProps12(props, {
+    ...composableProps13(props, {
       classNames: "relative"
     }),
     thin,
@@ -3728,7 +3728,7 @@ var Viewport = slottable10(({ children, asChild, ...props }, forwardedRef) => {
   ]);
   return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
     asChild,
-    ...composableProps12(props),
+    ...composableProps13(props),
     ref: mergedRef
   }, children), /* @__PURE__ */ React37.createElement(PinEffect, {
     scrollerRef
@@ -3962,10 +3962,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 { Primitive as Primitive21 } from "@radix-ui/react-primitive";
+import { Slot as Slot21 } from "@radix-ui/react-slot";
 import React40 from "react";
-import { composableProps as composableProps13, slottable as slottable11 } from "@dxos/ui-theme";
+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);
@@ -3973,8 +3973,8 @@ 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;
+  const { className, ...restProps } = composableProps14(rest);
+  const Comp = asChild ? Slot21 : Primitive21.div;
   return /* @__PURE__ */ React40.createElement(SplitterProvider, {
     scope: __scopeSplitter,
     mode,
@@ -3991,9 +3991,9 @@ 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}%`;
@@ -4016,12 +4016,12 @@ 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 { Primitive as Primitive22 } from "@radix-ui/react-primitive";
+import { Slot as Slot22 } from "@radix-ui/react-slot";
 import React41, { forwardRef as forwardRef27 } from "react";
 var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot21 : Primitive21.span;
+  const Comp = asChild ? Slot22 : Primitive22.span;
   return /* @__PURE__ */ React41.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
@@ -4033,8 +4033,8 @@ 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 React42, { forwardRef as forwardRef28 } from "react";
 var ToastProvider = ToastPrimitive.Provider;
@@ -4058,7 +4058,7 @@ var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }
 });
 var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : Primitive22.div;
+  const Comp = asChild ? Slot23 : Primitive23.div;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.body", {}, classNames),
@@ -4067,7 +4067,7 @@ var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props },
 });
 var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : ToastPrimitive.Title;
+  const Comp = asChild ? Slot23 : ToastPrimitive.Title;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.title", {}, classNames),
@@ -4076,7 +4076,7 @@ var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }
 });
 var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : ToastPrimitive.Description;
+  const Comp = asChild ? Slot23 : ToastPrimitive.Description;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.description", {}, classNames),
@@ -4085,7 +4085,7 @@ var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...p
 });
 var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : Primitive22.div;
+  const Comp = asChild ? Slot23 : Primitive23.div;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.actions", {}, classNames),