@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/dist/lib/browser/index.mjs

@@ -3,6 +3,7 @@ import {
   DensityProvider,
   ElevationContext,
   ElevationProvider,
+  ErrorStack,
   ThemeContext,
   ThemeProvider,
   Tooltip,
@@ -10,12 +11,13 @@ import {
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
+  parseCaptureOwnerStack,
   useElevationContext,
   useSafeArea,
   useThemeContext,
   useTooltipContext,
   useTranslation
-} from "./chunk-2FKSMWNY.mjs";
+} from "./chunk-BDBC6H6V.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -23,13 +25,13 @@ 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";
-var useDensityContext = (propsDensity) => {
+var useDensityContext = (densityProp) => {
   const { density } = useContext(DensityContext);
-  return propsDensity ?? density;
+  return densityProp ?? density;
 };
 
 // src/hooks/useIconHref.ts
@@ -40,6 +42,26 @@ var useIconHref = (icon) => {
   return icon ? `${url}#${icon}` : void 0;
 };
 
+// src/hooks/useSafeCollisionPadding.ts
+import { useMemo } from "react";
+var propIsNumber = (prop) => Number.isFinite(prop);
+var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
+var safePadding = (propsPadding, safePadding2, side) => {
+  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
+};
+var useSafeCollisionPadding = (collisionPadding) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
+  ]);
+};
+
 // src/hooks/useTranslationsContext.ts
 import { useContext as useContext2 } from "react";
 var useTranslationsContext = () => useContext2(TranslationsContext);
@@ -64,7 +86,7 @@ var useVisualViewport = (deps) => {
 };
 
 // src/util/usePx.ts
-import { useCallback as useCallback2, useEffect, useMemo, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 var getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
 var usePx = (rem) => {
   const [fontSize, setFontSize] = useState2(() => {
@@ -100,17 +122,17 @@ var usePx = (rem) => {
       }
     };
   }, []);
-  return useMemo(() => rem * fontSize, [
+  return useMemo2(() => rem * fontSize, [
     fontSize
   ]);
 };
 
 // src/components/Avatars/Avatar.tsx
-import "@dxos/lit-ui/dx-avatar.pcss";
 import { createContext } from "@radix-ui/react-context";
 import { Primitive } from "@radix-ui/react-primitive";
 import { Slot } from "@radix-ui/react-slot";
 import React, { forwardRef } from "react";
+import "@dxos/lit-ui/dx-avatar.pcss";
 import { DxAvatar } from "@dxos/lit-ui/react";
 import { useId } from "@dxos/react-hooks";
 import { mx } from "@dxos/ui-theme";
@@ -175,12 +197,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 = 4, ...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),
@@ -284,11 +313,11 @@ var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext2(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classNames, children, density: densityProp, elevation: elevationProp, variant = "default", asChild, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   const { tx } = useThemeContext();
-  const elevation = useElevationContext(propsElevation);
-  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(elevationProp);
+  const density = useDensityContext(densityProp);
   const Comp = asChild ? Slot4 : Primitive4.button;
   return /* @__PURE__ */ React5.createElement(Comp, {
     ref,
@@ -351,12 +380,13 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef6(({ noTooltip, tooltipSide, ...p
     ref: forwardedRef
   }));
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size = 5, 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, {
@@ -376,10 +406,10 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size = 5, icon, iconOnly
 });
 
 // src/components/Button/Toggle.tsx
-import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
 import React7, { forwardRef as forwardRef7 } from "react";
 var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement(TogglePrimitive, {
+  return /* @__PURE__ */ React7.createElement(TogglePrimitive.Root, {
     defaultPressed,
     pressed,
     onPressedChange,
@@ -391,10 +421,10 @@ var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedCh
 });
 
 // src/components/Button/ToggleGroup.tsx
-import { ToggleGroupItem as ToggleGroupItemPrimitive, ToggleGroup as ToggleGroupPrimitive } from "@radix-ui/react-toggle-group";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React8, { forwardRef as forwardRef8 } from "react";
 var ToggleGroup = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive, {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Root, {
     ...props,
     asChild: true
   }, /* @__PURE__ */ React8.createElement(ButtonGroup, {
@@ -404,7 +434,7 @@ var ToggleGroup = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props
   }));
 });
 var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(ToggleGroupItemPrimitive, {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
   }, /* @__PURE__ */ React8.createElement(Button, {
@@ -417,7 +447,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density
   }));
 });
 var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(ToggleGroupItemPrimitive, {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
   }, /* @__PURE__ */ React8.createElement(IconButton, {
@@ -433,24 +463,25 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, s
 });
 
 // src/components/Card/Card.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React19, { createContext as createContext3, forwardRef as forwardRef18, useContext as useContext3 } from "react";
-import { composableProps as composableProps7, mx as mx6 } from "@dxos/ui-theme";
+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 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
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React9, { forwardRef as forwardRef9 } from "react";
-import { composableProps } from "@dxos/ui-theme";
+import React9 from "react";
+import { composableProps, slottable } from "@dxos/ui-theme";
 var COLUMN_ROOT_NAME = "Column.Root";
 var gutterSizes = {
+  xs: "var(--dx-gutter-xs)",
   sm: "var(--dx-gutter-sm)",
   md: "var(--dx-gutter-md)",
-  lg: "var(--dx-gutter-lg)",
-  rail: "var(--dx-rail-item)"
+  lg: "var(--dx-gutter-lg)"
 };
-var Root = /* @__PURE__ */ forwardRef9(({ children, asChild, role, gutter = "md", ...props }, forwardedRef) => {
+var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
@@ -460,6 +491,7 @@ var Root = /* @__PURE__ */ forwardRef9(({ children, asChild, role, gutter = "md"
     role: role ?? "none",
     style: {
       "--gutter": gutterSize,
+      "--dx-col": "2 / span 1",
       gridTemplateColumns: [
         gutterSize,
         "minmax(0,1fr)",
@@ -472,9 +504,9 @@ var Root = /* @__PURE__ */ forwardRef9(({ children, asChild, role, gutter = "md"
     ref: forwardedRef
   }, children);
 });
-Root.displayName = COLUMN_ROOT_NAME;
+ColumnRoot.displayName = COLUMN_ROOT_NAME;
 var COLUMN_ROW_NAME = "Column.Row";
-var Row = /* @__PURE__ */ forwardRef9(({ children, asChild, role, ...props }, forwardedRef) => {
+var ColumnRow = slottable(({ children, asChild, role, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
@@ -485,37 +517,45 @@ var Row = /* @__PURE__ */ forwardRef9(({ children, asChild, role, ...props }, fo
     ref: forwardedRef
   }, children);
 });
-Row.displayName = COLUMN_ROW_NAME;
-var COLUMN_SEGMENT_NAME = "Column.Segment";
-var Segment = /* @__PURE__ */ forwardRef9(({ children, asChild, role, ...props }, forwardedRef) => {
+ColumnRow.displayName = COLUMN_ROW_NAME;
+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.bleed", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+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);
+  const Comp = asChild ? Slot5 : Primitive5.div;
   return /* @__PURE__ */ React9.createElement(Comp, {
     ...rest,
-    role: role ?? "none",
-    className: tx("column.segment", {}, className),
+    className: tx("column.center", {}, className),
     ref: forwardedRef
-  }, asChild ? children : /* @__PURE__ */ React9.createElement("div", {
-    className: "contents"
-  }, children));
+  }, children);
 });
-Segment.displayName = COLUMN_SEGMENT_NAME;
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
 var Column = {
-  Root,
-  Row,
-  Segment
+  Root: ColumnRoot,
+  Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter
 };
 
 // src/primitives/Container/Container.tsx
-import React10, { forwardRef as forwardRef10 } from "react";
-import { composableProps as composableProps2, mx as mx2 } from "@dxos/ui-theme";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-var Container = /* @__PURE__ */ forwardRef10(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps2(props, {
-    role: "none"
-  });
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React10 from "react";
+import { composableProps as composableProps2, mx as mx2, slottable as slottable2 } from "@dxos/ui-theme";
+var Container = slottable2(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps2(props);
   const Comp = asChild ? Slot6 : Primitive6.div;
   return /* @__PURE__ */ React10.createElement(Comp, {
     ...rest,
@@ -525,22 +565,24 @@ var Container = /* @__PURE__ */ forwardRef10(({ children, asChild, ...props }, f
 });
 
 // src/primitives/Flex/Flex.tsx
-import React11, { forwardRef as forwardRef11 } from "react";
-import { composableProps as composableProps3, mx as mx3 } from "@dxos/ui-theme";
-var Flex = /* @__PURE__ */ forwardRef11(({ children, role, column, grow, ...props }, forwardedRef) => {
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React11 from "react";
+import { composableProps as composableProps3, mx as mx3, slottable as slottable3 } from "@dxos/ui-theme";
+var Flex = slottable3(({ children, asChild, column, grow, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps3(props);
-  return /* @__PURE__ */ React11.createElement("div", {
+  const Comp = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React11.createElement(Comp, {
     ref: forwardedRef,
     ...rest,
-    role: role ?? "none",
     className: mx3("flex", column && "flex-col", grow && "flex-1 overflow-hidden", className)
   }, children);
 });
 
 // src/primitives/Grid/Grid.tsx
-import React12, { forwardRef as forwardRef12 } from "react";
-import { composableProps as composableProps4, mx as mx4 } from "@dxos/ui-theme";
-var Grid = /* @__PURE__ */ forwardRef12(({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
+import React12 from "react";
+import { composable, composableProps as composableProps4, mx as mx4 } from "@dxos/ui-theme";
+var Grid = composable(({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps4(props);
   return /* @__PURE__ */ React12.createElement("div", {
     ref: forwardedRef,
@@ -556,15 +598,15 @@ var Grid = /* @__PURE__ */ forwardRef12(({ children, style, role, cols, rows, gr
 });
 
 // src/primitives/Panel/Panel.tsx
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React13, { forwardRef as forwardRef13 } from "react";
-import { composableProps as composableProps5 } from "@dxos/ui-theme";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import React13 from "react";
+import { composableProps as composableProps5, slottable as slottable4 } from "@dxos/ui-theme";
 var GRID_TEMPLATE_ROWS = "auto 1fr auto";
 var GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
-var Root2 = /* @__PURE__ */ forwardRef13(({ children, asChild, role, style, ...props }, forwardedRef) => {
+var PanelRoot = slottable4(({ children, asChild, role, style, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps5(props);
-  const Comp = asChild ? Slot7 : Primitive7.div;
+  const Comp = asChild ? Slot8 : Primitive8.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(Comp, {
     ...rest,
@@ -578,22 +620,24 @@ var Root2 = /* @__PURE__ */ forwardRef13(({ children, asChild, role, style, ...p
     ref: forwardedRef
   }, children);
 });
-Root2.displayName = "Panel.Root";
-var Toolbar = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+PanelRoot.displayName = "Panel.Root";
+var PanelToolbar = slottable4(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps5(props);
-  const Comp = asChild ? Slot7 : Primitive7.div;
+  const Comp = asChild ? Slot8 : Primitive8.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(Comp, {
     ...rest,
     "data-slot": "toolbar",
-    className: tx("panel.toolbar", {}, className),
+    className: tx("panel.toolbar", {
+      size
+    }, className),
     ref: forwardedRef
   }, children);
 });
-Toolbar.displayName = "Panel.Toolbar";
-var Content = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+PanelToolbar.displayName = "Panel.Toolbar";
+var PanelContent = slottable4(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps5(props);
-  const Comp = asChild ? Slot7 : Primitive7.div;
+  const Comp = asChild ? Slot8 : Primitive8.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(Comp, {
     ...rest,
@@ -602,31 +646,33 @@ var Content = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, for
     ref: forwardedRef
   }, children);
 });
-Content.displayName = "Panel.Content";
-var Statusbar = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+PanelContent.displayName = "Panel.Content";
+var PanelStatusbar = slottable4(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps5(props);
-  const Comp = asChild ? Slot7 : Primitive7.div;
+  const Comp = asChild ? Slot8 : Primitive8.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(Comp, {
     ...rest,
     "data-slot": "statusbar",
-    className: tx("panel.statusbar", {}, className),
+    className: tx("panel.statusbar", {
+      size
+    }, className),
     ref: forwardedRef
   }, children);
 });
-Statusbar.displayName = "Panel.Statusbar";
+PanelStatusbar.displayName = "Panel.Statusbar";
 var Panel = {
-  Root: Root2,
-  Toolbar,
-  Content,
-  Statusbar
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar
 };
 
 // src/components/Image/Image.tsx
 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);
@@ -665,7 +711,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
     }
@@ -688,7 +740,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
     }
@@ -726,7 +778,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;
@@ -754,72 +808,45 @@ 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;
 };
 
 // src/components/Toolbar/Toolbar.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React18, { Fragment, forwardRef as forwardRef17 } from "react";
+import React18, { forwardRef as forwardRef12 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import { composableProps as composableProps6 } 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 { composable as composable2, composableProps as composableProps6, slottable as slottable5 } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React15, { forwardRef as forwardRef14 } from "react";
-
-// src/hooks/useSafeCollisionPadding.ts
-import { useMemo as useMemo2 } from "react";
-var propIsNumber = (prop) => Number.isFinite(prop);
-var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
-var safePadding = (propsPadding, safePadding2, side) => {
-  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
-};
-var useSafeCollisionPadding = (collisionPadding) => {
-  const { safeAreaPadding } = useThemeContext();
-  return useMemo2(() => ({
-    top: safePadding(collisionPadding, safeAreaPadding, "top"),
-    right: safePadding(collisionPadding, safeAreaPadding, "right"),
-    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
-    left: safePadding(collisionPadding, safeAreaPadding, "left")
-  }), [
-    collisionPadding,
-    safeAreaPadding
-  ]);
-};
-
-// src/components/Menu/ContextMenu.tsx
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import React15, { forwardRef as forwardRef9 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef9(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
@@ -833,16 +860,16 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, c
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef9(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot8 : Primitive8.div;
+  const Comp = asChild ? Slot9 : Primitive9.div;
   return /* @__PURE__ */ React15.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
@@ -852,7 +879,7 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, f
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Item, {
     ...props,
@@ -860,7 +887,7 @@ var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, fo
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
@@ -868,7 +895,7 @@ var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...pro
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Separator, {
     ...props,
@@ -876,7 +903,7 @@ var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Label, {
     ...props,
@@ -906,18 +933,17 @@ import { createContextScope } from "@radix-ui/react-context";
 import { useId as useId2 } from "@radix-ui/react-id";
 import * as MenuPrimitive from "@radix-ui/react-menu";
 import { createMenuScope } from "@radix-ui/react-menu";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot9 } from "@radix-ui/react-slot";
+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 forwardRef15, 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
 ]);
 var useMenuScope = createMenuScope();
 var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
-var DropdownMenuRoot = (props) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+var DropdownMenuRoot = ({ __scopeDropdownMenu, children, dir, modal = true, open: openProp, defaultOpen, onOpenChange }) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef2(null);
   const [open = false, setOpen] = useControllableState({
@@ -938,22 +964,22 @@ var DropdownMenuRoot = (props) => {
     modal
   }, /* @__PURE__ */ React16.createElement(MenuPrimitive.Root, {
     ...menuScope,
-    open,
-    onOpenChange: setOpen,
     dir,
-    modal
+    modal,
+    open,
+    onOpenChange: setOpen
   }, children));
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React16.createElement(Primitive9.button, {
+  }, /* @__PURE__ */ React16.createElement(Primitive10.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1023,9 +1049,9 @@ var DropdownMenuPortal = (props) => {
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef10(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot9 : Primitive9.div;
+  const Comp = asChild ? Slot10 : Primitive10.div;
   return /* @__PURE__ */ React16.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
@@ -1033,7 +1059,7 @@ var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild,
   }, children);
 });
 var CONTENT_NAME = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
@@ -1041,7 +1067,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((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,
@@ -1099,7 +1125,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.Group, {
@@ -1110,7 +1136,7 @@ var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1123,7 +1149,7 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1136,7 +1162,7 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1149,7 +1175,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.RadioGroup, {
@@ -1160,7 +1186,7 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1173,7 +1199,7 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.ItemIndicator, {
@@ -1184,7 +1210,7 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRe
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1197,7 +1223,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
@@ -1224,7 +1250,7 @@ var DropdownMenuSub = (props) => {
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.SubTrigger, {
@@ -1235,7 +1261,7 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ React16.createElement(MenuPrimitive.SubContent, {
@@ -1279,13 +1305,13 @@ var DropdownMenu = {
 var useDropdownMenuMenuScope = useMenuScope;
 
 // src/components/Separator/Separator.tsx
-import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React17, { forwardRef as forwardRef16 } from "react";
-var Separator3 = /* @__PURE__ */ forwardRef16(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import React17, { forwardRef as forwardRef11 } from "react";
+var Separator3 = /* @__PURE__ */ forwardRef11(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(SeparatorPrimitive, {
-    orientation,
+  return /* @__PURE__ */ React17.createElement(SeparatorPrimitive.Root, {
     ...props,
+    orientation,
     className: tx("separator.root", {
       orientation,
       subdued
@@ -1295,18 +1321,14 @@ var Separator3 = /* @__PURE__ */ forwardRef16(({ classNames, orientation = "hori
 });
 
 // src/components/Toolbar/Toolbar.tsx
-var ToolbarRoot = /* @__PURE__ */ forwardRef17(({ children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, orientation, ...props }, forwardedRef) => {
-  const { className, dir: _, ...rest } = composableProps6(props);
+var ToolbarRoot = composable2(({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
+  const { className, role, ...rest } = composableProps6(props);
   const { tx } = useThemeContext();
-  const InnerRoot = textBlockWidthProp ? "div" : Fragment;
-  const innerRootProps = textBlockWidthProp ? {
-    role: "none",
-    className: tx("toolbar.inner", {
-      layoutManaged
-    }, className)
-  } : {};
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Root, {
     ...rest,
+    ...role !== "none" && {
+      role
+    },
     orientation,
     "data-arrow-keys": orientation === "vertical" ? "up down" : "left right",
     className: tx("toolbar.root", {
@@ -1315,11 +1337,11 @@ var ToolbarRoot = /* @__PURE__ */ forwardRef17(({ children, density, disabled, l
       layoutManaged
     }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(InnerRoot, innerRootProps, children));
+  }, children);
 });
-var ToolbarText = /* @__PURE__ */ forwardRef17(({ children, asChild, ...props }, forwardedRef) => {
+var ToolbarText = slottable5(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps6(props);
-  const Comp = asChild ? Slot10 : Primitive10.div;
+  const Comp = asChild ? Slot11 : Primitive11.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
@@ -1327,7 +1349,7 @@ var ToolbarText = /* @__PURE__ */ forwardRef17(({ children, asChild, ...props },
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var ToolbarButton = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React18.createElement(Button, {
@@ -1335,7 +1357,7 @@ var ToolbarButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarIconButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React18.createElement(IconButton, {
@@ -1344,7 +1366,7 @@ var ToolbarIconButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var ToolbarToggle = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React18.createElement(Toggle, {
@@ -1352,7 +1374,7 @@ var ToolbarToggle = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var ToolbarLink = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Link, {
     asChild: true
   }, /* @__PURE__ */ React18.createElement(Link, {
@@ -1360,7 +1382,7 @@ var ToolbarLink = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef17(({ classNames, children, elevation, ...props }, forwardedRef) => {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef12(({ classNames, children, elevation, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
@@ -1371,7 +1393,7 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef17(({ classNames, children,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef17(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
@@ -1384,7 +1406,7 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef17(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef17(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
@@ -1399,10 +1421,11 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef17(({ variant, densit
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = /* @__PURE__ */ forwardRef17(({ variant = "gap", ...props }, forwardedRef) => {
+var ToolbarSeparator = /* @__PURE__ */ forwardRef12(({ variant = "gap", ...props }, forwardedRef) => {
   return variant === "line" ? /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
     asChild: true
   }, /* @__PURE__ */ React18.createElement(Separator3, {
+    orientation: "vertical",
     ...props,
     ref: forwardedRef
   })) : /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
@@ -1410,30 +1433,29 @@ var ToolbarSeparator = /* @__PURE__ */ forwardRef17(({ variant = "gap", ...props
     ref: forwardedRef
   });
 });
-var ToolbarDragHandle = /* @__PURE__ */ forwardRef17(({ testId = "drag-handle", label }, forwardedRef) => {
+var ToolbarDragHandle = /* @__PURE__ */ forwardRef12(({ testId = "drag-handle", label }, forwardedRef) => {
   const { t } = useTranslation2(translationKey);
   return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     "data-testid": testId,
+    tabIndex: -1,
     noTooltip: true,
     iconOnly: true,
     icon: "ph--dots-six-vertical--regular",
     variant: "ghost",
-    label: label ?? t("toolbar drag handle label"),
-    classNames: "cursor-pointer",
-    size: 5,
+    label: label ?? t("toolbar-drag-handle.label"),
+    classNames: "dx-focus-ring-none cursor-pointer",
     disabled: !forwardedRef,
     ref: forwardedRef
   });
 });
-var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef17(({ onClick, label }, forwardedRef) => {
+var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef12(({ onClick, label }, forwardedRef) => {
   const { t } = useTranslation2(translationKey);
   return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     iconOnly: true,
     icon: "ph--x--regular",
     variant: "ghost",
-    label: label ?? t("toolbar close label"),
+    label: label ?? t("toolbar-close.label"),
     classNames: "cursor-pointer",
-    size: 5,
     onClick,
     ref: forwardedRef
   });
@@ -1447,13 +1469,13 @@ var ToolbarMenu = ({ context, items }) => {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
-    label: t("toolbar menu label")
+    label: t("toolbar-menu.label")
   })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React18.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React18.createElement(DropdownMenu.Item, {
     key: index,
     onSelect: () => onSelect(context)
   }, label))), /* @__PURE__ */ React18.createElement(DropdownMenu.Arrow, null))));
 };
-var Toolbar2 = {
+var Toolbar = {
   Root: ToolbarRoot,
   Text: ToolbarText,
   Button: ToolbarButton,
@@ -1471,84 +1493,140 @@ var Toolbar2 = {
 
 // src/components/Card/Card.tsx
 var CardContext = /* @__PURE__ */ createContext3({});
-var CardRoot = /* @__PURE__ */ forwardRef18(({ children, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
+var CARD_ROOT_NAME = "Card.Root";
+var CardRoot = composable3(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot11 : Primitive11.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: "rail"
   }, children));
 });
-var CardToolbar = /* @__PURE__ */ forwardRef18(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+CardRoot.displayName = CARD_ROOT_NAME;
+var CARD_TOOLBAR_NAME = "Card.Toolbar";
+var CardToolbar = composable3(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(Toolbar2.Root, {
+  return /* @__PURE__ */ React19.createElement(Toolbar.Root, {
     ...props,
+    style: iconSize(5),
     classNames: [
-      tx("card.toolbar", {
-        coarse: density !== "fine"
-      }),
+      tx("card.toolbar", {}),
       classNames
     ],
     ref: forwardedRef
   }, children);
 });
-var CardMenu = ({ context, items }) => {
+CardToolbar.displayName = CARD_TOOLBAR_NAME;
+var CARD_DRAG_HANDLE_NAME = "Card.DragHandle";
+var CardDragHandle = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.DragHandle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
+var CARD_CLOSE_ICON_BUTTON_NAME = "Card.CloseIconButton";
+var CloseIconButton = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.CloseIconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+CloseIconButton.displayName = CARD_CLOSE_ICON_BUTTON_NAME;
+var CARD_MENU_NAME = "Card.Menu";
+var CardMenu = ({ context, items, ...props }) => {
   const { menuItems } = useContext3(CardContext) ?? {};
   const combinedItems = [
     ...items ?? [],
     ...menuItems ?? []
   ];
-  return /* @__PURE__ */ React19.createElement(Toolbar2.Menu, {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.Menu, {
+    ...props,
     context,
     items: combinedItems
-  });
+  }));
 };
-var CardTitle = /* @__PURE__ */ forwardRef18(({ children, asChild, role, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+CardMenu.displayName = CARD_MENU_NAME;
+var CARD_ICON_NAME = "Card.Icon";
+var CardIcon = (props) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, null, /* @__PURE__ */ React19.createElement(Icon, props));
+};
+CardIcon.displayName = CARD_ICON_NAME;
+var CARD_ICON_BLOCK_NAME = "Card.IconBlock";
+var CardIconBlock = /* @__PURE__ */ forwardRef13(({ classNames, children, padding, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement("div", {
+    ...props,
+    className: tx("card.icon-block", {
+      padding
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
+var CARD_TITLE_NAME = "Card.Title";
+var CardTitle = slottable6(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps7(props, {
+    role: "heading"
+  });
+  const Comp = asChild ? Slot12 : Primitive12.div;
   return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
-    role: role ?? "heading",
     className: tx("card.title", {}, className),
     ref: forwardedRef
   }, children);
 });
-var CardContent = /* @__PURE__ */ forwardRef18(({ children, role, ...props }, forwardedRef) => {
+CardTitle.displayName = CARD_TITLE_NAME;
+var CARD_CONTENT_NAME = "Card.Content";
+var CardContent = slottable6(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement("div", {
-    ...props,
-    role: role ?? "none",
-    className: tx("card.content", {}),
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    className: tx("card.content", {}, className),
     ref: forwardedRef
   }, children);
 });
-var CardRow = /* @__PURE__ */ forwardRef18(({ children, role, icon, ...props }, forwardedRef) => {
+CardContent.displayName = CARD_CONTENT_NAME;
+var CARD_ROW_NAME = "Card.Row";
+var CardRow = slottable6(({ children, asChild, icon, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  return /* @__PURE__ */ React19.createElement(Column.Row, {
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
-    role: role ?? "none",
-    classNames: className,
+    className: tx("card.row", {}, className),
     ref: forwardedRef
   }, icon && /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "text-subdued",
-    icon
-  }) || /* @__PURE__ */ React19.createElement("div", null), children, /* @__PURE__ */ React19.createElement("div", null));
+    icon,
+    size: 4
+  }) || /* @__PURE__ */ React19.createElement("div", null), children);
 });
-var CardSection = /* @__PURE__ */ forwardRef18(({ children, asChild, role, ...props }, forwardedRef) => {
+CardRow.displayName = CARD_ROW_NAME;
+var CARD_SECTION_NAME = "Card.Section";
+var CardSection = slottable6(({ children, asChild, role, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
     role: role ?? "none",
@@ -1556,9 +1634,11 @@ var CardSection = /* @__PURE__ */ forwardRef18(({ children, asChild, role, ...pr
     ref: forwardedRef
   }, children);
 });
-var CardHeading = /* @__PURE__ */ forwardRef18(({ children, asChild, role, variant = "default", ...props }, forwardedRef) => {
+CardSection.displayName = CARD_SECTION_NAME;
+var CARD_HEADING_NAME = "Card.Heading";
+var CardHeading = slottable6(({ children, asChild, role, variant = "default", ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
@@ -1569,9 +1649,11 @@ var CardHeading = /* @__PURE__ */ forwardRef18(({ children, asChild, role, varia
     ref: forwardedRef
   }, children);
 });
-var CardText = /* @__PURE__ */ forwardRef18(({ children, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
+CardHeading.displayName = CARD_HEADING_NAME;
+var CARD_TEXT_NAME = "Card.Text";
+var CardText = slottable6(({ children, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement(Comp, {
     ...rest,
@@ -1587,13 +1669,32 @@ var CardText = /* @__PURE__ */ forwardRef18(({ children, asChild, role, truncate
     })
   }, children));
 });
+CardText.displayName = CARD_TEXT_NAME;
+var CARD_HTML_NAME = "Card.Html";
+var CardHtml = ({ html, variant = "default", ...props }) => {
+  const { tx } = useThemeContext();
+  const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
+    html
+  ]);
+  return /* @__PURE__ */ React19.createElement("div", {
+    ...props,
+    className: tx("card.text", {
+      variant
+    }),
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: sanitized
+    }
+  });
+};
+CardHtml.displayName = CARD_HTML_NAME;
+var CARD_POSTER_NAME = "Card.Poster";
 var CardPoster = (props) => {
   const { tx } = useThemeContext();
   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", {}),
@@ -1601,7 +1702,8 @@ var CardPoster = (props) => {
         props.classNames
       ],
       src: props.image,
-      alt: props.alt
+      alt: props.alt,
+      fit: props.fit
     }));
   }
   if (props.icon) {
@@ -1618,6 +1720,8 @@ var CardPoster = (props) => {
     }));
   }
 };
+CardPoster.displayName = CARD_POSTER_NAME;
+var CARD_ACTION_NAME = "Card.Action";
 var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement(Button, {
@@ -1626,13 +1730,17 @@ var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClic
     onClick
   }, icon ? /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "text-subdued",
-    icon
+    icon,
+    size: 4
   }) : /* @__PURE__ */ React19.createElement("div", null), /* @__PURE__ */ React19.createElement("span", {
     className: tx("card.action-label", {}, !actionIcon ? "col-span-2" : void 0)
   }, label), actionIcon && /* @__PURE__ */ React19.createElement(CardIcon, {
-    icon: actionIcon
+    icon: actionIcon,
+    size: 4
   }));
 };
+CardAction.displayName = CARD_ACTION_NAME;
+var CARD_LINK_NAME = "Card.Link";
 var CardLink = ({ label, href }) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement("a", {
@@ -1651,42 +1759,27 @@ var CardLink = ({ label, href }) => {
     icon: "ph--arrow-square-out--regular"
   }));
 };
-var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React19.createElement(CardIconBlock, null, /* @__PURE__ */ React19.createElement(Icon, {
-    ...props,
-    size: toolbar ? 5 : 4
-  }));
-};
-var CardIconBlock = ({ classNames, children, role, ...props }) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement("div", {
-    ...props,
-    role: role ?? "none",
-    className: tx("card.icon-block", {}, classNames)
-  }, children);
-};
+CardLink.displayName = CARD_LINK_NAME;
 var Card = {
   Root: CardRoot,
   // Toolbar
   Toolbar: CardToolbar,
-  ToolbarIconButton: Toolbar2.IconButton,
-  ToolbarSeparator: Toolbar2.Separator,
-  DragHandle: /* @__PURE__ */ forwardRef18((props, ref) => /* @__PURE__ */ React19.createElement(Toolbar2.DragHandle, {
-    testId: "card-drag-handle",
-    ...props,
-    ref
-  })),
-  CloseIconButton: Toolbar2.CloseIconButton,
-  Title: CardTitle,
+  ToolbarIconButton: Toolbar.IconButton,
+  ToolbarSeparator: Toolbar.Separator,
+  // Toolbar blocks
+  IconBlock: CardIconBlock,
+  DragHandle: CardDragHandle,
+  CloseIconButton,
   Menu: CardMenu,
   Icon: CardIcon,
-  IconBlock: CardIconBlock,
+  Title: CardTitle,
   // Content
   Content: CardContent,
   Row: CardRow,
   Section: CardSection,
   Heading: CardHeading,
   Text: CardText,
+  Html: CardHtml,
   Poster: CardPoster,
   Action: CardAction,
   Link: CardLink
@@ -1731,19 +1824,17 @@ 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", {
     className: "px-1"
-  }, t("copy label")), /* @__PURE__ */ React21.createElement(Icon, {
+  }, t("copy.label")), /* @__PURE__ */ React21.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", {
     className: "px-1"
-  }, t("copy success label")), /* @__PURE__ */ React21.createElement(Icon, {
+  }, t("copy-success.label")), /* @__PURE__ */ React21.createElement(Icon, {
     icon: "ph--check--regular",
     size
   })));
@@ -1752,7 +1843,7 @@ var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ..
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
+  const label = isCopied ? t("copy-success.label") : props.label ?? t("copy.label");
   const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
   return /* @__PURE__ */ React21.createElement(IconButton, {
     iconOnly: true,
@@ -1778,20 +1869,27 @@ var Clipboard = {
 
 // src/components/Dialog/Dialog.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
-import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, Root as DialogRootPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "@radix-ui/react-dialog";
-import React22, { forwardRef as forwardRef19 } from "react";
+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 { 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(DialogRootPrimitive, props));
-var DialogTrigger = DialogTriggerPrimitive;
-var DialogPortal = DialogPortalPrimitive;
+}, /* @__PURE__ */ React22.createElement(DialogPrimitive.Root, {
+  // NOTE: Radix warning unless set to undefined.
+  // https://www.radix-ui.com/primitives/docs/components/dialog#description
+  "aria-describedby": void 0,
+  ...props
+}));
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {});
-var DialogOverlay = /* @__PURE__ */ forwardRef19(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef14(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
@@ -1802,64 +1900,60 @@ var DialogOverlay = /* @__PURE__ */ forwardRef19(({ classNames, children, blockA
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 var DIALOG_CONTENT_NAME = "DialogContent";
-var DialogContent = /* @__PURE__ */ forwardRef19(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+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(DialogContentPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Content, {
     ...props,
     // NOTE: Radix warning unless set to undefined.
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
     "aria-describedby": void 0,
     className: tx("dialog.content", {
-      inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
-      size
+      size,
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(Column.Root, null, children));
+  }, /* @__PURE__ */ React22.createElement(Column.Root, {
+    classNames: "dx-expander",
+    gutter: "sm"
+  }, children));
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
-var DialogHeader = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, 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.Segment, {
-    asChild: true
-  }, /* @__PURE__ */ React22.createElement("div", {
-    role: "heading",
-    ...props,
-    className: tx("dialog.header", {
-      srOnly
-    }, [
-      classNames
-    ]),
+  return /* @__PURE__ */ React22.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.header", {}, className),
     ref: forwardedRef
-  }));
+  }, children);
 });
-var DialogCloseIconButton = /* @__PURE__ */ forwardRef19(({ label, ...props }, forwardedRef) => {
+var DialogCloseIconButton = /* @__PURE__ */ forwardRef14(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation3(osTranslations2);
   return /* @__PURE__ */ React22.createElement(IconButton, {
     ...props,
-    label: label ?? t("close dialog label"),
+    label: label ?? t("close-dialog.label"),
     icon: "ph--x--regular",
     iconOnly: true,
     size: 4,
-    density: "fine",
     variant: "ghost",
     ref: forwardedRef
   });
 });
-var DialogBody = /* @__PURE__ */ forwardRef19(({ children, ...props }, forwardedRef) => {
+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.Segment, {
-    asChild: true
-  }, /* @__PURE__ */ React22.createElement("div", {
-    role: "none",
-    ...props,
-    className: tx("dialog.body"),
+  return /* @__PURE__ */ React22.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.body", {}, className),
     ref: forwardedRef
-  }, children));
+  }, children);
 });
-var DialogTitle = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -1867,9 +1961,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -1877,17 +1971,17 @@ var DialogDescription = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...p
     ref: forwardedRef
   });
 });
-var DialogActionBar = /* @__PURE__ */ forwardRef19(({ 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.Segment, {
-    asChild: true
-  }, /* @__PURE__ */ React22.createElement("div", {
-    ...props,
+  return /* @__PURE__ */ React22.createElement(Comp, {
+    ...rest,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
-  }, children));
+  }, children);
 });
-var DialogClose = DialogClosePrimitive;
+var DialogClose = DialogPrimitive.Close;
 var Dialog = {
   Root: DialogRoot,
   Trigger: DialogTrigger,
@@ -1904,109 +1998,86 @@ var Dialog = {
 };
 
 // src/components/Dialog/AlertDialog.tsx
-import { AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, Root as AlertDialogRootPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive } from "@radix-ui/react-alert-dialog";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { createContext as createContext6 } from "@radix-ui/react-context";
-import React23, { forwardRef as forwardRef20 } from "react";
+import React23, { forwardRef as forwardRef15 } from "react";
 var AlertDialogRoot = (props) => /* @__PURE__ */ React23.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React23.createElement(AlertDialogRootPrimitive, props));
-var AlertDialogTrigger = AlertDialogTriggerPrimitive;
-var AlertDialogPortal = AlertDialogPortalPrimitive;
-var AlertDialogCancel = AlertDialogCancelPrimitive;
-var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogTitlePrimitive, {
-    ...props,
-    className: tx("dialog.title", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-var AlertDialogDescription = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogDescriptionPrimitive, {
-    ...props,
-    className: tx("dialog.description", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
+}, /* @__PURE__ */ React23.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 ALERT_DIALOG_BODY_NAME = "AlertDialogBody";
-var ALERT_DIALOG_ACTIONBAR_NAME = "AlertDialogActionBar";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef20(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef15(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
-    className: tx(
-      "dialog.overlay",
-      {},
-      classNames,
-      // TODO(burdon): Move to dialog.ts.
-      "data-[h-align=start]:justify-center",
-      "data-[h-align=start]:items-start",
-      "data-[h-align=center]:place-content-center"
-    ),
+    className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React23.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size = "md", ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef15(({ classNames, children, size = "md", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React23.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Content, {
     ...props,
     className: tx("dialog.content", {
       inOverlayLayout,
       size
     }, classNames),
+    // NOTE: Radix warning unless set to undefined.
+    // https://www.radix-ui.com/primitives/docs/components/dialog#description
+    "aria-describedby": void 0,
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(Column.Root, null, children));
+  }, /* @__PURE__ */ React23.createElement(Column.Root, {
+    classNames: "dx-expander",
+    gutter: "sm"
+  }, children));
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
-var AlertDialogBody = /* @__PURE__ */ forwardRef20(({ children, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(Column.Segment, {
-    asChild: true
-  }, /* @__PURE__ */ React23.createElement("div", {
-    role: "none",
+  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Title, {
     ...props,
-    className: tx("dialog.body"),
+    className: tx("dialog.title", {
+      srOnly
+    }, classNames),
     ref: forwardedRef
-  }, children));
+  });
 });
-AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
-var AlertDialogActionBar = /* @__PURE__ */ forwardRef20(({ children, classNames, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(Column.Segment, {
-    asChild: true
-  }, /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React23.createElement(AlertDialogPrimitive.Description, {
     ...props,
-    className: tx("dialog.actionbar", {}, classNames),
+    className: tx("dialog.description", {
+      srOnly
+    }, classNames),
     ref: forwardedRef
-  }, children));
+  });
 });
-AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
 var AlertDialog = {
   Root: AlertDialogRoot,
   Trigger: AlertDialogTrigger,
   Portal: AlertDialogPortal,
   Overlay: AlertDialogOverlay,
   Content: AlertDialogContent,
-  Body: AlertDialogBody,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
-  ActionBar: AlertDialogActionBar,
+  ActionBar: Dialog.ActionBar,
+  CloseIconButton: Dialog.CloseIconButton,
+  // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction
 };
@@ -2015,94 +2086,43 @@ var AlertDialog = {
 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
+import { safeStringify } from "@dxos/util";
 var ErrorFallback = ({ children, error, title, data }) => {
   const isDev = true;
   const message = error instanceof Error ? error.message : String(error);
-  return /* @__PURE__ */ React25.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     role: "alert",
     "data-testid": "error-boundary-fallback",
     className: "flex flex-col p-4 gap-4 overflow-auto"
-  }, /* @__PURE__ */ React25.createElement("h1", {
+  }, /* @__PURE__ */ React24.createElement("h1", {
     className: "text-lg text-info-text"
-  }, title ?? "Runtime Error"), /* @__PURE__ */ React25.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React25.createElement(Section, {
+  }, title ?? "Runtime Error"), /* @__PURE__ */ React24.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React24.createElement(Section, {
     title: "Stack",
     onClick: () => {
       const text = error instanceof Error ? error.stack ?? error.message : String(error);
       void navigator.clipboard.writeText(text);
     }
-  }, /* @__PURE__ */ React25.createElement(ErrorStack, {
+  }, /* @__PURE__ */ React24.createElement(ErrorStack, {
     error
-  })), data && /* @__PURE__ */ React25.createElement(Section, {
+  })), data && /* @__PURE__ */ React24.createElement(Section, {
     title: "Data",
     onClick: () => {
       void navigator.clipboard.writeText(JSON.stringify(data, void 0, 2));
     }
-  }, /* @__PURE__ */ React25.createElement("pre", {
+  }, /* @__PURE__ */ React24.createElement("pre", {
     className: "overflow-x-auto text-xs"
   }, safeStringify(data, void 0, 2))), children);
 };
 var Section = ({ children, title, onClick }) => {
-  return /* @__PURE__ */ React25.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: "flex flex-col gap-1"
-  }, onClick && /* @__PURE__ */ React25.createElement("button", {
+  }, onClick && /* @__PURE__ */ React24.createElement("button", {
     type: "button",
     onClick,
     className: "flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors",
     title: `Copy ${title}`
-  }, /* @__PURE__ */ React25.createElement("h2", {
+  }, /* @__PURE__ */ React24.createElement("h2", {
     className: "text-xs uppercase text-subdued"
   }, title)), children);
 };
@@ -2135,13 +2155,122 @@ var generator = ({ error, delay }) => {
   return error?.() ?? new Error(`Error generated after ${delay}ms`);
 };
 
+// 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 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 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 ? Slot14 : Primitive14.div;
+  const { tx } = useThemeContext();
+  const rootRef = useRef3(null);
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    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 related = event.relatedTarget;
+    if (!related || !rootRef.current?.contains(related)) {
+      setGroupHasFocus(false);
+    }
+  }, []);
+  const { className, ...rest } = composableProps9(props);
+  return /* @__PURE__ */ React25.createElement(FocusContext.Provider, {
+    value: {
+      setFocus: setState,
+      groupHasFocus
+    }
+  }, /* @__PURE__ */ React25.createElement(Comp, {
+    ...rest,
+    tabIndex: 0,
+    className: tx("focus.group", {
+      border
+    }, className),
+    ...tabsterAttrs,
+    ...state && {
+      [`data-${FOCUS_STATE_ATTR}`]: state
+    },
+    onBlur: handleFocusOut,
+    onFocus: handleFocusIn,
+    ref: useComposedRefs(rootRef, forwardedRef)
+  }, children));
+});
+var Item4 = slottable8(({ children, asChild, current, border = false, onCurrentChange, onClick, onFocus, onBlur, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot14 : Primitive14.div;
+  const { tx } = useThemeContext();
+  const focusableGroupAttrs = useFocusableGroup({
+    ignoreDefaultKeydown: {
+      Enter: true
+    }
+  });
+  const [focused, setFocused] = useState6(false);
+  const handleClick = useCallback6((event) => {
+    onCurrentChange?.();
+    onClick?.(event);
+  }, [
+    onCurrentChange,
+    onClick
+  ]);
+  const handleKeyDown = useCallback6((event) => {
+    if (event.key === "Enter") {
+      onCurrentChange?.();
+    }
+  }, [
+    onCurrentChange
+  ]);
+  const handleFocus = useCallback6((event) => {
+    setFocused(true);
+    onFocus?.(event);
+  }, [
+    onFocus
+  ]);
+  const handleBlur = useCallback6((event) => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [
+    onBlur
+  ]);
+  const isCurrent = current ?? focused;
+  const { className, ...rest } = composableProps9(props);
+  return /* @__PURE__ */ React25.createElement(Comp, {
+    ...rest,
+    tabIndex: 0,
+    className: tx("focus.item", {
+      border
+    }, className),
+    ...focusableGroupAttrs,
+    "aria-current": isCurrent || void 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ref: forwardedRef
+  }, children);
+});
+var Focus = {
+  Group: Group3,
+  Item: Item4
+};
+
 // src/components/Input/Input.tsx
-import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React26, { forwardRef as forwardRef21 } from "react";
+import React26, { forwardRef as forwardRef16 } from "react";
 import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext } from "@dxos/react-input";
-import { mx as mx9 } from "@dxos/ui-theme";
-var Label3 = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+import { mx as mx8 } from "@dxos/ui-theme";
+var Label3 = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React26.createElement(LabelPrimitive, {
     ...props,
@@ -2151,7 +2280,7 @@ var Label3 = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...pr
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Description3 = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React26.createElement(DescriptionPrimitive, {
     ...props,
@@ -2161,7 +2290,7 @@ var Description = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React26.createElement(ValidationPrimitive, {
@@ -2173,7 +2302,7 @@ var Validation = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, child
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React26.createElement(DescriptionAndValidationPrimitive, {
     ...props,
@@ -2183,7 +2312,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef21(({ classNames, child
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef21(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef16(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -2204,11 +2333,11 @@ var PinInput = /* @__PURE__ */ forwardRef21(({ classNames, density: propsDensity
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef21(({ __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,
@@ -2226,7 +2355,7 @@ var TextInput = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -2247,7 +2376,7 @@ var TextArea = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -2255,7 +2384,7 @@ var Checkbox = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React26.createElement(CheckboxPrimitive.Root, {
     ...props,
     checked,
     onCheckedChange,
@@ -2277,7 +2406,7 @@ var Checkbox = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked
     })
   }));
 });
-var Switch = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
@@ -2286,7 +2415,7 @@ var Switch = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked:
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React26.createElement("input", {
     type: "checkbox",
-    className: mx9("dx-checkbox--switch dx-focus-ring", classNames),
+    className: mx8("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -2309,16 +2438,17 @@ var Input = {
   Checkbox,
   Switch,
   Label: Label3,
-  Description,
+  Description: Description3,
   Validation,
   DescriptionAndValidation
 };
 
 // src/components/List/List.tsx
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
-import { Slot as Slot12 } from "@radix-ui/react-slot";
-import React28, { forwardRef as forwardRef22 } from "react";
+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 composableProps10 } from "@dxos/ui-theme";
 
 // src/components/List/ListDropIndicator.tsx
 import React27 from "react";
@@ -2344,7 +2474,6 @@ var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React27.createElement("div", {
-    role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
       "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
@@ -2359,19 +2488,20 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
 };
 
 // src/components/List/List.tsx
-var List = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var List = composable4(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
+  const { className, ...rest } = composableProps10(props);
   return /* @__PURE__ */ React28.createElement(DensityProvider, {
     density
   }, /* @__PURE__ */ React28.createElement(ListPrimitive, {
-    ...props,
-    className: tx("list.root", {}, classNames),
+    ...rest,
+    className: tx("list.root", {}, className),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef22(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot12 : Primitive12.div;
+var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot15 : Primitive15.div;
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(Comp, {
@@ -2389,14 +2519,13 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement("div", {
-    role: "none",
     ...props,
     className: tx("list.item.openTrigger", {
       density
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef22(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   return /* @__PURE__ */ React28.createElement(ListPrimitiveItemHeading, {
@@ -2405,9 +2534,9 @@ var ListItemHeading = /* @__PURE__ */ forwardRef22(({ children, classNames, ...p
       density
     }, classNames),
     ref: forwardedRef
-  }, children);
+  }, /* @__PURE__ */ React28.createElement("span", null, children));
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef22(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
@@ -2423,7 +2552,7 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef22(({ __listItemScope, class
     classNames: tx("list.item.openTriggerIcon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   return /* @__PURE__ */ React28.createElement(ListPrimitiveItem, {
@@ -2446,7 +2575,7 @@ var ListItem = {
 };
 
 // src/components/List/Tree.tsx
-import React30, { forwardRef as forwardRef23 } from "react";
+import React30, { forwardRef as forwardRef18 } from "react";
 
 // src/components/List/TreeDropIndicator.tsx
 import React29 from "react";
@@ -2494,13 +2623,13 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
 };
 
 // src/components/List/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
+var TreeRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   return /* @__PURE__ */ React30.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef23(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef18(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
   return /* @__PURE__ */ React30.createElement(List, {
     ...props,
@@ -2508,7 +2637,7 @@ var TreeBranch = /* @__PURE__ */ forwardRef23(({ __listScope, ...props }, forwar
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
+var TreeItemRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   return /* @__PURE__ */ React30.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
@@ -2535,20 +2664,24 @@ 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 Primitive13 } from "@radix-ui/react-primitive";
-import { Slot as Slot13 } 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 forwardRef24, useCallback as useCallback6 } from "react";
+import React31, { forwardRef as forwardRef19, useCallback as useCallback7 } 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);
-var PATH_SEPARATOR = "~";
-var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ forwardRef24(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+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 Comp = asChild ? Slot13 : Primitive13.div;
+  const { className, role: _role, ...rest } = composableProps11(props, {
+    classNames
+  });
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { findFirstFocusable } = useFocusFinders();
-  const handleKeyDown = useCallback6((event) => {
+  const handleKeyDown = useCallback7((event) => {
     switch (event.key) {
       case "ArrowDown":
       case "ArrowUp": {
@@ -2577,14 +2710,15 @@ var TreegridRoot = /* @__PURE__ */ forwardRef24(({ asChild, classNames, children
         break;
       }
     }
-    props.onKeyDown?.(event);
+    onKeyDownProp?.(event);
   }, [
-    findFirstFocusable
+    findFirstFocusable,
+    onKeyDownProp
   ]);
   return /* @__PURE__ */ React31.createElement(Comp, {
     role: "treegrid",
-    ...props,
-    className: tx("treegrid.root", {}, classNames),
+    ...rest,
+    className: tx("treegrid.root", {}, className),
     style: {
       ...style,
       gridTemplateColumns
@@ -2593,10 +2727,10 @@ var TreegridRoot = /* @__PURE__ */ forwardRef24(({ asChild, classNames, children
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef24(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot13 : Primitive13.div;
-  const pathParts = id.split(PATH_SEPARATOR);
+  const Comp = asChild ? Slot16 : Primitive16.div;
+  const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState3({
     prop: propsOpen,
@@ -2622,7 +2756,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef24(({ __treegridRowScope, asChild, c
     ref: forwardedRef
   }, children));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef24(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef19(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React31.createElement("div", {
     role: "gridcell",
@@ -2636,28 +2770,24 @@ var TreegridCell = /* @__PURE__ */ forwardRef24(({ classNames, children, indent,
 var Treegrid = {
   Root: TreegridRoot,
   Row: TreegridRow,
-  Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext
+  Cell: TreegridCell
 };
 
 // src/components/Main/Main.tsx
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { createContext as createContext7 } from "@radix-ui/react-context";
+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 Primitive14 } from "@radix-ui/react-primitive";
-import { Slot as Slot14 } 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 forwardRef25, useCallback as useCallback8, useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
+import React32, { forwardRef as forwardRef20, useCallback as useCallback9, useEffect as useEffect5, useRef as useRef4, useState as useState8 } 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 useCallback7, useEffect as useEffect4, useState as useState6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect4, useState as useState7 } from "react";
 var useSwipeToDismiss = (ref, {
   onDismiss,
   dismissThreshold = 64,
@@ -2666,22 +2796,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState6(0);
-  const [gestureStartX, setGestureStartX] = useState6(0);
-  const setIdle = useCallback7(() => {
+  const [motionState, setMotionState] = useState7(0);
+  const [gestureStartX, setGestureStartX] = useState7(0);
+  const setIdle = useCallback8(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback7(() => {
+  const setFollowing = useCallback8(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback7(({ screenX }) => {
+  const handlePointerDown = useCallback8(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -2689,7 +2819,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback7(({ screenX }) => {
+  const handlePointerMove = useCallback8(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -2713,7 +2843,7 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback7(() => {
+  const handlePointerUp = useCallback8(() => {
     setIdle();
   }, [
     setIdle
@@ -2759,7 +2889,7 @@ var handleOpenAutoFocus = (event) => {
 };
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback8((event) => {
+  const handleKeyDown = useCallback9((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -2773,7 +2903,7 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
   }, [
     propsOnKeyDown
   ]);
-  const focusableGroupAttrs = useFocusableGroup({
+  const focusableGroupAttrs = useFocusableGroup2({
     tabBehavior: "limited",
     ignoreDefaultKeydown: {
       Tab: true
@@ -2786,25 +2916,15 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     ...focusableGroupAttrs
   };
 };
-var [MainProvider, useMainContext] = createContext7(MAIN_NAME, {
+var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (_nextState) => {
-    log.warn("Not initialized", void 0, {
-      F: __dxlog_file,
-      L: 111,
-      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: 116,
-      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) => {
@@ -2812,22 +2932,22 @@ var useSidebars = (consumerName) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback8(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: useCallback9(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: useCallback8(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback8(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback8(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: useCallback9(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback9(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback9(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback8(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: useCallback9(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: useCallback8(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback8(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback8(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: useCallback9(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback9(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback9(() => setComplementarySidebarState("closed"), [])
   };
 };
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
@@ -2842,8 +2962,8 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     defaultProp: defaultComplementarySidebarState,
     onChange: onComplementarySidebarStateChange
   });
-  const [resizing, setResizing] = useState7(false);
-  const resizeInterval = useRef3(null);
+  const [resizing, setResizing] = useState8(false);
+  const resizeInterval = useRef4(null);
   useEffect5(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
@@ -2864,7 +2984,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
   const { tx } = useThemeContext();
@@ -2885,16 +3005,16 @@ var MainOverlay = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwar
   });
 });
 MainOverlay.displayName = MAIN_OVERLAY_NAME;
-var MainSidebar = /* @__PURE__ */ forwardRef25(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { tx } = useThemeContext();
   const { t } = useTranslation(osTranslations3);
   const ref = useForwardedRef(forwardedRef);
-  const noopRef = useRef3(null);
+  const noopRef = useRef4(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = useCallback8((event) => {
+  const handleKeyDown = useCallback9((event) => {
     const focusGroupParent = event.target.closest("[data-tabster]");
     if (event.key === "Escape" && focusGroupParent) {
       event.preventDefault();
@@ -2905,14 +3025,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef25(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root9 = isLg ? Primitive14.div : DialogContent2;
+  const Root14 = isLg ? Primitive17.div : DialogContent2;
   return /* @__PURE__ */ React32.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
   }, !isLg && /* @__PURE__ */ React32.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React32.createElement(Root9, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React32.createElement(Root14, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2930,7 +3050,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef25(({ classNames, children, swipeToD
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ React32.createElement(MainSidebar, {
@@ -2944,7 +3064,7 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ React32.createElement(MainSidebar, {
@@ -2958,17 +3078,17 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef
   });
 });
 MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef25(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot14 : role ? Primitive14.div : "main";
+  const Comp = asChild ? Slot17 : role ? Primitive17.div : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
   return /* @__PURE__ */ React32.createElement(Comp, {
-    role,
     ...handlesFocus && {
       ...mover
     },
     ...props,
+    role,
     "data-sidebar-left-state": navigationSidebarState,
     "data-sidebar-right-state": complementarySidebarState,
     "data-handles-focus": handlesFocus,
@@ -2989,11 +3109,13 @@ var Main = {
 };
 
 // src/components/Message/Message.tsx
-import { createContext as createContext8 } from "@radix-ui/react-context";
-import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
-import { Slot as Slot15 } from "@radix-ui/react-slot";
-import React33, { forwardRef as forwardRef26 } from "react";
+import { createContext as createContext9 } from "@radix-ui/react-context";
+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",
@@ -3002,13 +3124,13 @@ var messageIcons = {
   neutral: "ph--info--duotone"
 };
 var MESSAGE_NAME = "Message";
-var [MessageProvider, useMessageContext] = createContext8(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef26(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var [MessageProvider, useMessageContext] = createContext9(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 ? Slot15 : Primitive15.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   return /* @__PURE__ */ React33.createElement(MessageProvider, {
     titleId,
     descriptionId,
@@ -3027,32 +3149,37 @@ var MessageRoot = /* @__PURE__ */ forwardRef26(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef26(({ 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 ? Slot15 : Primitive15.h2;
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React33.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React33.createElement("div", {
     className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? /* @__PURE__ */ React33.createElement("div", null) : /* @__PURE__ */ React33.createElement(Icon, {
-    size: 5,
-    icon,
-    classNames: tx("message.icon", {
+  }, icon && /* @__PURE__ */ React33.createElement("div", {
+    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__ */ forwardRef26(({ asChild, classNames, children, ...props }, forwardedRef) => {
+var MessageContent = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Comp = asChild ? Slot15 : Primitive15.p;
+  const Comp = asChild ? Slot18 : Primitive18.p;
   return /* @__PURE__ */ React33.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
@@ -3070,7 +3197,7 @@ var Callout = Message;
 
 // src/components/Popover/Popover.tsx
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
@@ -3080,11 +3207,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 Primitive16 } from "@radix-ui/react-primitive";
-import { Slot as Slot16 } 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 forwardRef27, useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState8 } from "react";
+import React34, { forwardRef as forwardRef22, useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState9 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -3095,8 +3222,8 @@ var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
-  const triggerRef = useRef4(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
+  const triggerRef = useRef5(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState9(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -3108,18 +3235,18 @@ var PopoverRoot = (props) => {
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback10(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback10(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback10(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -3139,12 +3266,12 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "PopoverTrigger";
-var PopoverTrigger = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, asChild, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  const Comp = asChild ? Slot16 : Primitive16.button;
+  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+  const Comp = asChild ? Slot19 : Primitive19.button;
   const trigger = /* @__PURE__ */ React34.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
@@ -3196,7 +3323,7 @@ var PopoverPortal = (props) => {
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "PopoverContent";
-var PopoverContent = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+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);
@@ -3211,11 +3338,11 @@ var PopoverContent = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const contentRef = useRef4(null);
-  const composedRefs = useComposedRefs(forwardedRef, contentRef);
-  const isRightClickOutsideRef = useRef4(false);
+  const contentRef = useRef5(null);
+  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef5(false);
   useEffect6(() => {
     const content = contentRef.current;
     if (content) {
@@ -3223,7 +3350,7 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) =>
     }
   }, []);
   return /* @__PURE__ */ React34.createElement(RemoveScroll, {
-    as: Slot16,
+    as: Slot19,
     allowPinchZoom: true
   }, /* @__PURE__ */ React34.createElement(PopoverContentImpl, {
     ...props,
@@ -3252,10 +3379,10 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) =>
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const hasInteractedOutsideRef = useRef4(false);
-  const hasPointerDownOutsideRef = useRef4(false);
+  const hasInteractedOutsideRef = useRef5(false);
+  const hasPointerDownOutsideRef = useRef5(false);
   return /* @__PURE__ */ React34.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
@@ -3291,7 +3418,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef27((props, forwardedRef)
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -3299,7 +3426,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   useFocusGuards();
-  const computedCollisionBoundary = useMemo4(() => {
+  const computedCollisionBoundary = useMemo6(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
     return closestBoundary ? Array.isArray(collisionBoundary) ? [
       closestBoundary,
@@ -3355,10 +3482,10 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   })));
 });
 var CLOSE_NAME = "PopoverClose";
-var PopoverClose = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React34.createElement(Primitive16.button, {
+  return /* @__PURE__ */ React34.createElement(Primitive19.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -3367,7 +3494,7 @@ var PopoverClose = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "PopoverArrow";
-var PopoverArrow = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
@@ -3379,9 +3506,9 @@ var PopoverArrow = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ forwardRef27(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot16 : Primitive16.div;
+  const Comp = asChild ? Slot19 : Primitive19.div;
   return /* @__PURE__ */ React34.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
@@ -3405,8 +3532,8 @@ var Popover = {
 };
 
 // src/components/Status/Status.tsx
-import React35, { forwardRef as forwardRef28 } from "react";
-var Status = /* @__PURE__ */ forwardRef28(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+import React35, { forwardRef as forwardRef23 } from "react";
+var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React35.createElement("span", {
     role: "status",
@@ -3431,26 +3558,33 @@ var Status = /* @__PURE__ */ forwardRef28(({ classNames, children, progress = 0,
 });
 
 // src/components/ScrollArea/ScrollArea.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 React36, { forwardRef as forwardRef29 } from "react";
-import { composableProps as composableProps8 } from "@dxos/ui-theme";
+import { createContext as createContext10 } from "@radix-ui/react-context";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
+import React36, { useMemo as useMemo7 } from "react";
+import { composableProps as composableProps12, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
 var SCROLLAREA_NAME = "ScrollArea";
-var [ScrollAreaProvider, useScrollAreaContext] = createContext9(SCROLLAREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createContext10(SCROLLAREA_NAME);
 var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef29(({ children, asChild, orientation = "vertical", autoHide = true, margin = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps8(props);
-  const Comp = asChild ? Slot17 : Primitive17.div;
+var ScrollAreaRoot = slottable9(({ children, asChild, orientation = "vertical", autoHide = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const options = {
+  const { className, ...rest } = composableProps12(props);
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  const options = useMemo7(() => ({
     orientation,
     autoHide,
-    margin,
+    centered,
     padding,
     thin,
     snap
-  };
+  }), [
+    orientation,
+    autoHide,
+    centered,
+    padding,
+    thin,
+    snap
+  ]);
   return /* @__PURE__ */ React36.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React36.createElement(Comp, {
     ...rest,
     className: tx("scrollArea.root", options, className),
@@ -3459,12 +3593,21 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef29(({ children, asChild, orientat
 });
 ScrollAreaRoot.displayName = SCROLLAREA_ROOT_NAME;
 var SCROLLAREA_VIEWPORT_NAME = "ScrollArea.Viewport";
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+var ScrollAreaViewport = slottable9(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
-  return /* @__PURE__ */ React36.createElement("div", {
-    ...props,
-    className: tx("scrollArea.viewport", options, classNames),
+  const density = options.thin ? scrollbar.thin : scrollbar.coarse;
+  const { className, ...rest } = composableProps12(props);
+  const { style, ...restWithoutStyle } = rest;
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React36.createElement(Comp, {
+    ...restWithoutStyle,
+    style: {
+      "--scroll-width": `${density.size}px`,
+      "--scroll-padding": `${density.padding}px`,
+      ...style
+    },
+    className: tx("scrollArea.viewport", options, className),
     ref: forwardedRef
   }, children);
 });
@@ -3475,161 +3618,202 @@ var ScrollArea = {
 };
 
 // src/components/ScrollContainer/ScrollContainer.tsx
-import { createContext as createContext10 } from "@radix-ui/react-context";
-import React37, { forwardRef as forwardRef30, useCallback as useCallback10, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import { createContext as createContext11 } from "@radix-ui/react-context";
+import React37, { forwardRef as forwardRef24, useCallback as useCallback11, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo8, useRef as useRef6, useState as useState10 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
-import { mx as mx10 } from "@dxos/ui-theme";
+import { useMergeRefs } from "@dxos/react-hooks";
+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) => {
   return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
 };
-var [ScrollContainerProvider, useScrollContainerContext] = createContext10("ScrollContainer");
-var Root6 = /* @__PURE__ */ forwardRef30(({ children, classNames, pin, fade, behavior: behaviorProp = "smooth" }, forwardedRef) => {
-  const scrollerRef = useRef5(null);
-  const autoScrollRef = useRef5(false);
-  const [overflow, setOverflow] = useState9(false);
-  const [pinned, setPinned] = useState9(pin);
-  const timeoutRef = useRef5(void 0);
-  const scrollToBottom = useCallback10((behavior = behaviorProp) => {
+var [ScrollContainerProvider, useScrollContainerContext] = createContext11("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 timeoutRef = useRef6(void 0);
+  const scrollToBottom = useCallback11((behavior = behaviorProp) => {
     if (scrollerRef.current) {
-      autoScrollRef.current = true;
-      scrollerRef.current.classList.add("scrollbar-none");
-      scrollerRef.current.scrollTo({
-        top: scrollerRef.current.scrollHeight,
-        behavior
-      });
-      clearTimeout(timeoutRef.current);
       if (behavior !== "instant") {
+        autoScrollRef.current = true;
+        scrollerRef.current.classList.add("scrollbar-none");
+        clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => {
           scrollerRef.current?.classList.remove("scrollbar-none");
           autoScrollRef.current = false;
         }, 500);
       }
+      scrollerRef.current.scrollTo({
+        top: scrollerRef.current.scrollHeight,
+        behavior
+      });
       setPinned(true);
     }
-  }, []);
-  const controller = useMemo5(() => ({
-    viewport: scrollerRef.current,
+  }, [
+    behaviorProp
+  ]);
+  const controller = useMemo8(() => ({
+    get viewport() {
+      return scrollerRef.current;
+    },
     scrollToTop: () => {
-      invariant(scrollerRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 95,
-        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"
       });
       setPinned(false);
     },
-    scrollToBottom: () => {
-      scrollToBottom("smooth");
+    scrollToBottom: (behavior = "smooth") => {
+      scrollToBottom(behavior);
     }
   }), [
-    scrollToBottom,
-    scrollerRef.current
+    scrollToBottom
   ]);
   useImperativeHandle(forwardedRef, () => controller, [
     controller
   ]);
-  useEffect7(() => {
-    if (!scrollerRef.current) {
-      return;
-    }
-    return combine(
-      // Check if user scrolls.
-      addEventListener2(scrollerRef.current, "wheel", () => {
-        setPinned(isBottom(scrollerRef.current));
-      }),
-      // Check if scrolls.
-      addEventListener2(scrollerRef.current, "scroll", () => {
-        setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
-      })
-    );
+  const setViewport = useCallback11((el) => {
+    scrollerRef.current = el;
   }, []);
   return /* @__PURE__ */ React37.createElement(ScrollContainerProvider, {
     pinned,
+    overflow,
     controller,
-    scrollToBottom
-  }, /* @__PURE__ */ React37.createElement("div", {
-    className: "relative grid dx-container overflow-hidden"
-  }, fade && /* @__PURE__ */ React37.createElement("div", {
-    role: "none",
-    "data-visible": overflow,
-    className: mx10(
-      // 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"
-    )
-  }), /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
-    classNames: mx10("min-h-0", classNames),
-    thin: true
-  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
-    ref: scrollerRef
-  }, children))));
-});
-Root6.displayName = "ScrollContainer.Root";
+    setViewport,
+    setPinned,
+    setOverflow
+  }, children);
+});
+Root10.displayName = "ScrollContainer.Root";
+var Content6 = composable6(({ children, thin, padding, centered, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
+    ...composableProps13(props, {
+      classNames: "relative"
+    }),
+    thin,
+    padding,
+    centered,
+    ref: forwardedRef
+  }, children);
+});
+Content6.displayName = "ScrollContainer.Content";
 var VIEWPORT_NAME = "ScrollContainer.Viewport";
-var Viewport = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
-  const contentRef = useForwardedRef2(forwardedRef);
-  const { pinned, scrollToBottom } = useScrollContainerContext(VIEWPORT_NAME);
+var Viewport = slottable10(({ children, asChild, ...props }, forwardedRef) => {
+  const scrollerRef = useRef6(null);
+  const mergedRef = useMergeRefs([
+    forwardedRef,
+    scrollerRef
+  ]);
+  const { setViewport, setPinned, setOverflow } = useScrollContainerContext(VIEWPORT_NAME);
   useEffect7(() => {
-    if (!pinned || !contentRef.current) {
+    const el = scrollerRef.current;
+    if (!el) {
       return;
     }
-    scrollToBottom();
-    const resizeObserver = new ResizeObserver(() => scrollToBottom());
-    resizeObserver.observe(contentRef.current);
-    return () => resizeObserver.disconnect();
+    setViewport(el);
+    return combine(addEventListener2(el, "wheel", () => setPinned(isBottom(el))), addEventListener2(el, "scroll", () => setOverflow((el.scrollTop ?? 0) > 0)), () => setViewport(null));
   }, [
-    pinned,
-    scrollToBottom
+    setViewport,
+    setPinned,
+    setOverflow
   ]);
-  return /* @__PURE__ */ React37.createElement("div", {
-    className: mx10("w-full", classNames),
-    ...props,
-    ref: contentRef
-  }, children);
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
+    asChild,
+    ...composableProps13(props),
+    ref: mergedRef
+  }, children), /* @__PURE__ */ React37.createElement(PinEffect, {
+    scrollerRef
+  }));
 });
 Viewport.displayName = VIEWPORT_NAME;
+var PIN_EFFECT_NAME = "ScrollContainer.PinEffect";
+var PinEffect = ({ scrollerRef }) => {
+  const { pinned, controller } = useScrollContainerContext(PIN_EFFECT_NAME);
+  useEffect7(() => {
+    const viewport = scrollerRef.current;
+    if (!pinned || !viewport) {
+      return;
+    }
+    controller?.scrollToBottom("instant");
+    const resizeObserver = new ResizeObserver(() => controller?.scrollToBottom("smooth"));
+    Array.from(viewport.children).forEach((child) => {
+      resizeObserver.observe(child);
+    });
+    const mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            resizeObserver.observe(node);
+          }
+        });
+      });
+      controller?.scrollToBottom("smooth");
+    });
+    mutationObserver.observe(viewport, {
+      childList: true
+    });
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [
+    pinned,
+    controller,
+    scrollerRef
+  ]);
+  return null;
+};
+var FADE_NAME = "ScrollContainer.Fade";
+var Fade = () => {
+  const { overflow } = useScrollContainerContext(FADE_NAME);
+  return /* @__PURE__ */ React37.createElement("div", {
+    "data-visible": overflow,
+    className: mx9(
+      // 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-(--color-base-surface) to-transparent pointer-events-none"
+    )
+  });
+};
+Fade.displayName = FADE_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 var ScrollDownButton = ({ classNames }) => {
-  const { pinned, scrollToBottom } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
+  const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
   return /* @__PURE__ */ React37.createElement("div", {
-    role: "none",
-    className: mx10("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+    className: mx9("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
   }, /* @__PURE__ */ React37.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
     iconOnly: true,
     size: 4,
     label: "Scroll down",
-    onClick: () => scrollToBottom()
+    onClick: () => controller?.scrollToBottom()
   }));
 };
 ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 var ScrollContainer = {
-  Root: Root6,
+  Root: Root10,
+  Content: Content6,
   Viewport,
+  Fade,
   ScrollDownButton
 };
 
 // src/components/Select/Select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React38, { forwardRef as forwardRef31 } from "react";
+import React38, { 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__ */ forwardRef31(({ children, placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
@@ -3644,7 +3828,7 @@ var SelectTriggerButton = /* @__PURE__ */ forwardRef31(({ children, placeholder,
     icon: "ph--caret-down--bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef31(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
@@ -3659,7 +3843,7 @@ var SelectContent = /* @__PURE__ */ forwardRef31(({ classNames, children, collis
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
@@ -3670,7 +3854,7 @@ var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef31(({ classNames, children
     icon: "ph--caret-up--bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
@@ -3681,7 +3865,7 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef31(({ classNames, childr
     icon: "ph--caret-down--bold"
   }));
 });
-var SelectViewport2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectViewport, {
     ...props,
@@ -3689,7 +3873,7 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...p
     ref: forwardedRef
   }, children);
 });
-var SelectItem = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.Item, {
     ...props,
@@ -3698,7 +3882,7 @@ var SelectItem = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forward
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
@@ -3706,7 +3890,7 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef31(({ classNames, children,
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef31(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.Item, {
     ...props,
@@ -3720,7 +3904,7 @@ var SelectOption = /* @__PURE__ */ forwardRef31(({ children, classNames, ...prop
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.Separator, {
     ...props,
@@ -3728,7 +3912,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, fo
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React38.createElement(SelectPrimitive.Arrow, {
     ...props,
@@ -3758,8 +3942,8 @@ var Select = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import React39, { forwardRef as forwardRef32 } from "react";
-var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default", ...props }, forwardedRef) => {
+import React39, { forwardRef as forwardRef26 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React39.createElement("div", {
     ...props,
@@ -3772,47 +3956,47 @@ var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default",
 
 // src/components/Splitter/Splitter.tsx
 import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
-import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
-import { Slot as Slot18 } from "@radix-ui/react-slot";
-import React40, { forwardRef as forwardRef33 } from "react";
-import { composableProps as composableProps9 } from "@dxos/ui-theme";
+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 composableProps14, slottable as slottable11 } from "@dxos/ui-theme";
 var SPLITTER_NAME = "Splitter";
 var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
 var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
 var ROOT_NAME = "Splitter.Root";
-var Root8 = /* @__PURE__ */ forwardRef33(({ __scopeSplitter, asChild, mode = "upper", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps9(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
+var Root12 = slottable11(({ asChild, mode = "top", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const { __scopeSplitter, ...rest } = props;
+  const { className, ...restProps } = composableProps14(rest);
+  const Comp = asChild ? Slot21 : Primitive21.div;
   return /* @__PURE__ */ React40.createElement(SplitterProvider, {
     scope: __scopeSplitter,
     mode,
     ratio,
     transition
   }, /* @__PURE__ */ React40.createElement(Comp, {
-    role: "none",
-    ...rest,
+    ...restProps,
     ref: forwardedRef,
     className: tx("splitter.root", {}, className)
   }, children));
 });
-Root8.displayName = ROOT_NAME;
+Root12.displayName = ROOT_NAME;
 var PANEL_NAME = "Splitter.Panel";
-var Panel2 = /* @__PURE__ */ forwardRef33(({ __scopeSplitter, asChild, children, position, style, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps9(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
-  const { mode, ratio, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
+var Panel2 = slottable11(({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const isUpper = position === "upper";
-  const top = isUpper ? "0%" : mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%`;
-  const height = isUpper ? mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%` : mode === "lower" ? "100%" : mode === "upper" ? "0%" : `${(1 - ratio) * 100}%`;
+  const { __scopeSplitter, ...rest } = props;
+  const Comp = asChild ? Slot21 : Primitive21.div;
+  const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
+  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__ */ React40.createElement(Comp, {
-    role: "none",
-    ...rest,
+    ...restProps,
     ref: forwardedRef,
     className: tx("splitter.panel", {}, className),
     style: {
-      top,
+      top: topOffset,
       height,
       transition: `top ${transition}ms, height ${transition}ms ease-out`,
       ...style
@@ -3821,17 +4005,17 @@ var Panel2 = /* @__PURE__ */ forwardRef33(({ __scopeSplitter, asChild, children,
 });
 Panel2.displayName = PANEL_NAME;
 var Splitter = {
-  Root: Root8,
+  Root: Root12,
   Panel: Panel2
 };
 
 // src/components/Tag/Tag.tsx
-import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
-import { Slot as Slot19 } from "@radix-ui/react-slot";
-import React41, { forwardRef as forwardRef34 } from "react";
-var Tag = /* @__PURE__ */ forwardRef34(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+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 ? Slot19 : Primitive19.span;
+  const Comp = asChild ? Slot22 : Primitive22.span;
   return /* @__PURE__ */ React41.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
@@ -3843,21 +4027,22 @@ var Tag = /* @__PURE__ */ forwardRef34(({ asChild, palette = "neutral", classNam
 });
 
 // src/components/Toast/Toast.tsx
-import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
-import { Slot as Slot20 } from "@radix-ui/react-slot";
-import { ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastProvider as ToastProviderPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastViewport as ToastViewportPrimitive } from "@radix-ui/react-toast";
-import React42, { forwardRef as forwardRef35 } from "react";
-var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef35(({ classNames, ...props }, forwardedRef) => {
+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;
+var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React42.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React42.createElement(ToastPrimitive.Viewport, {
+    ...props,
     className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React42.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React42.createElement(ToastPrimitive.Root, {
     ...props,
     className: tx("toast.root", {}, classNames),
     ref: forwardedRef
@@ -3865,44 +4050,44 @@ var ToastRoot = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }
     elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot20 : Primitive20.div;
+  const Comp = asChild ? Slot23 : Primitive23.div;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot20 : ToastTitlePrimitive;
+  const Comp = asChild ? Slot23 : ToastPrimitive.Title;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot20 : ToastDescriptionPrimitive;
+  const Comp = asChild ? Slot23 : ToastPrimitive.Description;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot20 : Primitive20.div;
+  const Comp = asChild ? Slot23 : Primitive23.div;
   return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.actions", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastAction = ToastActionPrimitive;
-var ToastClose = ToastClosePrimitive;
+var ToastAction = ToastPrimitive.Action;
+var ToastClose = ToastPrimitive.Close;
 var Toast = {
   Provider: ToastProvider,
   Viewport: ToastViewport,
@@ -3937,6 +4122,7 @@ export {
   ErrorFallback,
   ErrorStack,
   Flex,
+  Focus,
   Grid,
   Icon,
   IconButton,
@@ -3958,6 +4144,8 @@ export {
   Skeleton,
   Splitter,
   Status,
+  TREEGRID_PARENT_OF_SEPARATOR,
+  TREEGRID_PATH_SEPARATOR,
   Tag,
   ThemeContext,
   ThemeProvider,
@@ -3967,7 +4155,7 @@ export {
   ToggleGroup,
   ToggleGroupIconItem,
   ToggleGroupItem,
-  Toolbar2 as Toolbar,
+  Toolbar,
   Tooltip,
   Trans,
   Tree,
@@ -3981,6 +4169,7 @@ export {
   initialSafeArea,
   isLabel,
   messageIcons,
+  parseCaptureOwnerStack,
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
@@ -3989,6 +4178,7 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useFocus,
   useIconHref,
   useLandmarkMover,
   useListContext,
@@ -3996,6 +4186,7 @@ export {
   useMainContext,
   usePx,
   useSafeArea,
+  useSafeCollisionPadding,
   useScrollContainerContext,
   useSidebars,
   useThemeContext,