@dxos/react-ui 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

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

@@ -16,7 +16,7 @@ import {
   useThemeContext,
   useTooltipContext,
   useTranslation
-} from "./chunk-2NHEX4AD.mjs";
+} from "./chunk-JKHQSGNU.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -69,21 +69,21 @@ var useVisualViewport = (deps) => {
 // src/components/AnchoredOverflow/AnchoredOverflow.tsx
 var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React.createElement(Root6, {
+  const Root8 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React.createElement(Root8, {
     role: "none",
     ...props,
-    className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
+    className: tx("anchoredOverflow.root", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React.createElement(Root6, {
+  const Root8 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React.createElement(Root8, {
     role: "none",
     ...props,
-    className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
+    className: tx("anchoredOverflow.anchor", {}, classNames),
     ref: forwardedRef
   }, children);
 });
@@ -124,27 +124,27 @@ var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props },
   });
 });
 var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root6 = asChild ? Slot2 : Primitive2.span;
+  const Root8 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React2.createElement(Root6, {
+  return /* @__PURE__ */ React2.createElement(Root8, {
     ...props,
     id: labelId,
     ref: forwardedRef,
-    className: tx("avatar.label", "avatar__label", {
+    className: tx("avatar.label", {
       srOnly
     }, classNames)
   });
 });
 var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root6 = asChild ? Slot2 : Primitive2.span;
+  const Root8 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React2.createElement(Root6, {
+  return /* @__PURE__ */ React2.createElement(Root8, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
-    className: tx("avatar.description", "avatar__description", {
+    className: tx("avatar.description", {
       srOnly
     }, classNames)
   });
@@ -168,7 +168,7 @@ var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames,
   const href = useIconHref(icon);
   return /* @__PURE__ */ React3.createElement("svg", {
     ...props,
-    className: tx("icon.root", "icon", {
+    className: tx("icon.root", {
       size
     }, classNames),
     ref: forwardedRef
@@ -183,10 +183,10 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef4 } from "react";
 var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot3 : Primitive3.a;
-  return /* @__PURE__ */ React4.createElement(Root6, {
+  const Root8 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React4.createElement(Root8, {
     ...props,
-    className: tx("link.root", "link", {
+    className: tx("link.root", {
       variant
     }, classNames),
     ref: forwardedRef
@@ -196,48 +196,48 @@ var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props
 // src/components/Breadcrumb/Breadcrumb.tsx
 var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React5.createElement(Root6, {
+  const Root8 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React5.createElement(Root8, {
     role: "navigation",
     ...props,
-    className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
+    className: tx("breadcrumb.root", {}, classNames),
     ref: forwardedRef
   });
 });
 var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot4 : Primitive4.ol;
-  return /* @__PURE__ */ React5.createElement(Root6, {
+  const Root8 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React5.createElement(Root8, {
     role: "list",
     ...props,
-    className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
+    className: tx("breadcrumb.list", {}, classNames),
     ref: forwardedRef
   });
 });
 var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot4 : Primitive4.li;
-  return /* @__PURE__ */ React5.createElement(Root6, {
+  const Root8 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React5.createElement(Root8, {
     role: "listitem",
     ...props,
-    className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
+    className: tx("breadcrumb.listItem", {}, classNames),
     ref: forwardedRef
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
-  const Root6 = asChild ? Slot4 : Link;
-  return /* @__PURE__ */ React5.createElement(Root6, {
+  const Root8 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React5.createElement(Root8, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot4 : "h1";
-  return /* @__PURE__ */ React5.createElement(Root6, {
+  const Root8 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React5.createElement(Root8, {
     ...props,
     "aria-current": "page",
-    className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
+    className: tx("breadcrumb.current", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -247,7 +247,7 @@ var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
     role: "separator",
     "aria-hidden": "true",
     ...props,
-    className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
+    className: tx("breadcrumb.separator", {}, classNames)
   }, children ?? /* @__PURE__ */ React5.createElement(Icon, {
     icon: "ph--dot--bold"
   }));
@@ -276,14 +276,14 @@ var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ classNames, ch
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root6 = asChild ? Slot5 : Primitive5.button;
-  return /* @__PURE__ */ React6.createElement(Root6, {
+  const Root8 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React6.createElement(Root8, {
     ref,
     ...props,
     "data-variant": variant,
     "data-density": density,
     "data-props": inGroup ? "grouped" : "",
-    className: tx("button.root", "button", {
+    className: tx("button.root", {
       variant,
       inGroup,
       disabled: props.disabled,
@@ -299,11 +299,11 @@ Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root6 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React6.createElement(Root6, {
+  const Root8 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React6.createElement(Root8, {
     role: "none",
     ...props,
-    className: tx("button.group", "button-group", {
+    className: tx("button.group", {
       elevation
     }, classNames),
     ref: forwardedRef
@@ -342,7 +342,7 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef7(({ size = 5, icon, iconOnly
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React7.createElement(Button, {
     ...props,
-    classNames: tx("iconButton.root", "iconButton", {
+    classNames: tx("iconButton.root", {
       iconOnly
     }, classNames),
     ref: forwardedRef
@@ -567,7 +567,7 @@ var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, blockA
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React12.createElement(DialogOverlayPrimitive, {
     ...props,
-    className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
+    className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef,
     "data-block-align": blockAlign
   }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider, {
@@ -584,7 +584,7 @@ var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, size,
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
     "aria-describedby": void 0,
     ...props,
-    className: tx("dialog.content", "dialog", {
+    className: tx("dialog.content", {
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
       size
     }, classNames),
@@ -597,17 +597,25 @@ var DialogHeader = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props
   return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     role: "header",
-    className: tx("dialog.header", "dialog__header", {
+    className: tx("dialog.header", {
       srOnly
     }, classNames),
     ref: forwardedRef
   });
 });
+var DialogBody = /* @__PURE__ */ forwardRef10(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    className: tx("dialog.body"),
+    ref: forwardedRef
+  }, children);
+});
 var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React12.createElement(DialogTitlePrimitive, {
     ...props,
-    className: tx("dialog.title", "dialog__title", {
+    className: tx("dialog.title", {
       srOnly
     }, classNames),
     ref: forwardedRef
@@ -617,12 +625,20 @@ var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...p
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React12.createElement(DialogDescriptionPrimitive, {
     ...props,
-    className: tx("dialog.description", "dialog__description", {
+    className: tx("dialog.description", {
       srOnly
     }, classNames),
     ref: forwardedRef
   });
 });
+var DialogActionBar = /* @__PURE__ */ forwardRef10(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    className: tx("dialog.actionbar", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
 var DialogClose = DialogClosePrimitive;
 var DialogCloseIconButton = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
   const { t } = useTranslation2(osTranslations2);
@@ -644,8 +660,10 @@ var Dialog = {
   Overlay: DialogOverlay,
   Content: DialogContent,
   Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
   CloseIconButton: DialogCloseIconButton
 };
@@ -665,7 +683,7 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...pr
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(AlertDialogTitlePrimitive, {
     ...props,
-    className: tx("dialog.title", "dialog--alert__title", {
+    className: tx("dialog.title", {
       srOnly
     }, classNames),
     ref: forwardedRef
@@ -675,7 +693,7 @@ var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly,
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
-    className: tx("dialog.description", "dialog--alert__description", {
+    className: tx("dialog.description", {
       srOnly
     }, classNames),
     ref: forwardedRef
@@ -683,6 +701,7 @@ var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly,
 });
 var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
 var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var ALERT_DIALOG_ACTIONBAR_NAME = "AlertDialogActionBar";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext5(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
@@ -690,7 +709,7 @@ var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, b
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(AlertDialogOverlayPrimitive, {
     ...props,
-    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+    className: tx("dialog.overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
     ref: forwardedRef,
     "data-block-align": blockAlign
   }, /* @__PURE__ */ React13.createElement(OverlayLayoutProvider2, {
@@ -703,13 +722,22 @@ var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, .
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React13.createElement(AlertDialogContentPrimitive, {
     ...props,
-    className: tx("dialog.content", "dialog--alert", {
+    className: tx("dialog.content", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
   }, children);
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+var AlertDialogActionBar = /* @__PURE__ */ forwardRef11(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement("div", {
+    ...props,
+    className: tx("dialog.actionbar", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
 var AlertDialog = {
   Root: AlertDialogRoot,
   Trigger: AlertDialogTrigger,
@@ -718,6 +746,7 @@ var AlertDialog = {
   Content: AlertDialogContent,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
+  ActionBar: AlertDialogActionBar,
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction
 };
@@ -732,7 +761,7 @@ var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...pro
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(LabelPrimitive, {
     ...props,
-    className: tx("input.label", "input__label", {
+    className: tx("input.label", {
       srOnly
     }, classNames),
     ref: forwardedRef
@@ -742,7 +771,7 @@ var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children,
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(DescriptionPrimitive, {
     ...props,
-    className: tx("input.description", "input__description", {
+    className: tx("input.description", {
       srOnly
     }, classNames),
     ref: forwardedRef
@@ -753,7 +782,7 @@ var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, className
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React14.createElement(ValidationPrimitive, {
     ...props,
-    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
+    className: tx("input.validation", {
       srOnly,
       validationValence
     }, classNames),
@@ -764,25 +793,25 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, className
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(DescriptionAndValidationPrimitive, {
     ...props,
-    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
+    className: tx("input.descriptionAndValidation", {
       srOnly
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  const segmentClassName = useCallback4(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = useCallback4(({ focused, validationValence }) => tx("input.input", {
     variant: "static",
     focused,
     disabled: props.disabled,
     density,
     elevation,
     validationValence
-  }, propsSegmentClassName), [
+  }, propsSegmentClassName) || "", [
     tx,
     props.disabled,
     elevation,
@@ -795,23 +824,22 @@ var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation:
     ...props.autoFocus && !hasIosKeyboard2 && {
       autoFocus: true
     },
-    inputClassName: tx("input.inputWithSegments", "input input--pin", {
+    inputClassName: tx("input.inputWithSegments", {
       disabled: props.disabled
-    }, inputClassName),
+    }, inputClassName) || "",
     ref: forwardedRef
   });
 });
 var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
-  const themeContextValue = useThemeContext();
+  const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  const { tx } = themeContextValue;
   return /* @__PURE__ */ React14.createElement(TextInputPrimitive, {
     ...props,
     "data-1p-ignore": noAutoFill,
-    className: tx("input.input", "input", {
+    className: tx("input.input", {
       variant,
       disabled: props.disabled,
       density,
@@ -832,7 +860,7 @@ var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React14.createElement(TextAreaPrimitive, {
     ...props,
-    className: tx("input.input", "input--text-area", {
+    className: tx("input.input", {
       variant,
       disabled: props.disabled,
       density,
@@ -863,13 +891,13 @@ var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsCheck
       "aria-invalid": "true",
       "aria-errormessage": errorMessageId
     },
-    className: tx("input.checkbox", "input--checkbox", {
+    className: tx("input.checkbox", {
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React14.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
-    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+    classNames: tx("input.checkboxIndicator", {
       size,
       checked
     })
@@ -963,20 +991,20 @@ var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, for
     density
   }, /* @__PURE__ */ React16.createElement(ListPrimitive, {
     ...props,
-    className: tx("list.root", "list", {}, classNames),
+    className: tx("list.root", {}, classNames),
     ref: forwardedRef
   }, children));
 });
 var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root6 = asChild ? Slot6 : "div";
+  const Root8 = asChild ? Slot6 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(Root6, {
+  return /* @__PURE__ */ React16.createElement(Root8, {
     ...!asChild && {
       role: "none"
     },
     ...props,
-    className: tx("list.item.endcap", "list__listItem__endcap", {
+    className: tx("list.item.endcap", {
       density
     }, classNames),
     ref: forwardedRef
@@ -988,7 +1016,7 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
+    className: tx("list.item.openTrigger", {
       density
     }, classNames)
   });
@@ -998,7 +1026,7 @@ var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...p
   const density = useDensityContext();
   return /* @__PURE__ */ React16.createElement(ListPrimitiveItemHeading, {
     ...props,
-    className: tx("list.item.heading", "list__listItem__heading", {
+    className: tx("list.item.heading", {
       density
     }, classNames),
     ref: forwardedRef
@@ -1010,14 +1038,14 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, class
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   return /* @__PURE__ */ React16.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
+    className: tx("list.item.openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
   }, children || /* @__PURE__ */ React16.createElement(Icon, {
     size: 3,
     icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
-    classNames: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
+    classNames: tx("list.item.openTriggerIcon", {})
   }));
 });
 var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
@@ -1025,7 +1053,7 @@ var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...prop
   const density = useDensityContext();
   return /* @__PURE__ */ React16.createElement(ListPrimitiveItem, {
     ...props,
-    className: tx("list.item.root", "list__listItem", {
+    className: tx("list.item.root", {
       density,
       collapsible: props.collapsible
     }, classNames),
@@ -1143,7 +1171,7 @@ var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
 var TreegridRoot = /* @__PURE__ */ forwardRef15(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot7 : Primitive6.div;
+  const Root8 = asChild ? Slot7 : Primitive6.div;
   const { findFirstFocusable } = useFocusFinders();
   const handleKeyDown = useCallback5((event) => {
     switch (event.key) {
@@ -1178,21 +1206,21 @@ var TreegridRoot = /* @__PURE__ */ forwardRef15(({ asChild, classNames, children
   }, [
     findFirstFocusable
   ]);
-  return /* @__PURE__ */ React19.createElement(Root6, {
+  return /* @__PURE__ */ React19.createElement(Root8, {
     role: "treegrid",
-    onKeyDown: handleKeyDown,
     ...props,
-    className: tx("treegrid.root", "treegrid", {}, classNames),
+    className: tx("treegrid.root", {}, classNames),
     style: {
       ...style,
       gridTemplateColumns
     },
+    onKeyDown: handleKeyDown,
     ref: forwardedRef
   }, children);
 });
 var TreegridRow = /* @__PURE__ */ forwardRef15(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot7 : Primitive6.div;
+  const Root8 = asChild ? Slot7 : Primitive6.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState2({
@@ -1204,10 +1232,10 @@ var TreegridRow = /* @__PURE__ */ forwardRef15(({ __treegridRowScope, asChild, c
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React19.createElement(Root6, {
+  }, /* @__PURE__ */ React19.createElement(Root8, {
     role: "row",
     "aria-level": level,
-    className: tx("treegrid.row", "treegrid__row", {
+    className: tx("treegrid.row", {
       level
     }, classNames),
     ...parentOf && {
@@ -1223,7 +1251,7 @@ var TreegridCell = /* @__PURE__ */ forwardRef15(({ classNames, children, indent,
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement("div", {
     role: "gridcell",
-    className: tx("treegrid.cell", "treegrid__cell", {
+    className: tx("treegrid.cell", {
       indent
     }, classNames),
     ...props,
@@ -1248,6 +1276,7 @@ import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
 import React20, { forwardRef as forwardRef16, useCallback as useCallback7, useEffect as useEffect3, useRef, useState as useState5 } from "react";
+import { addEventListener } from "@dxos/async";
 import { log } from "@dxos/log";
 import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
 
@@ -1346,9 +1375,12 @@ var useSwipeToDismiss = (ref, {
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
 var MAIN_NAME = "Main";
 var MAIN_ROOT_NAME = "MainRoot";
+var MAIN_OVERLAY_NAME = "MainOverlay";
 var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
 var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
-var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
   const handleKeyDown = useCallback7((event) => {
@@ -1372,9 +1404,9 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     }
   });
   return {
-    onKeyDown: handleKeyDown,
     [landmarkAttr]: landmark,
     tabIndex: 0,
+    onKeyDown: handleKeyDown,
     ...focusableGroupAttrs
   };
 };
@@ -1382,25 +1414,25 @@ var [MainProvider, useMainContext] = createContext6(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (_nextState) => {
-    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+    log.warn("Not initialized", void 0, {
       F: __dxlog_file,
-      L: 92,
+      L: 111,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
   complementarySidebarState: "closed",
   setComplementarySidebarState: (_nextState) => {
-    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+    log.warn("Not initialized", void 0, {
       F: __dxlog_file,
-      L: 97,
+      L: 116,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
-var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
+var useSidebars = (consumerName) => {
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(consumerName);
   return {
     navigationSidebarState,
     setNavigationSidebarState,
@@ -1422,8 +1454,7 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
     closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
   };
 };
-var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg");
   const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState3({
     prop: propsNavigationSidebarState,
@@ -1437,7 +1468,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   });
   const [resizing, setResizing] = useState5(false);
   const resizeInterval = useRef(null);
-  const handleResize = useCallback7(() => {
+  useEffect3(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -1445,14 +1476,8 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     resizeInterval.current = setTimeout(() => {
       setResizing(false);
       resizeInterval.current = null;
-    }, resizeDebounce);
-  }, []);
-  useEffect3(() => {
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [
-    handleResize
-  ]);
+    }, 3e3);
+  }), []);
   return /* @__PURE__ */ React20.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
@@ -1463,9 +1488,27 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
-var handleOpenAutoFocus = (event) => {
-  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
-};
+var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement("div", {
+    ...props,
+    onClick: () => {
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
+    },
+    className: tx("main.overlay", {
+      isLg,
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
+    }, classNames),
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
+    "aria-hidden": "true",
+    ref: forwardedRef
+  });
+});
+MainOverlay.displayName = MAIN_OVERLAY_NAME;
 var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { tx } = useThemeContext();
@@ -1486,28 +1529,28 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root6 = isLg ? Primitive7.div : DialogContent2;
+  const Root8 = isLg ? Primitive7.div : DialogContent2;
   return /* @__PURE__ */ React20.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
   }, !isLg && /* @__PURE__ */ React20.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React20.createElement(Root6, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React20.createElement(Root8, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
       onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
     },
+    ...state === "closed" && {
+      inert: true
+    },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
     "data-state": state,
     "data-resizing": resizing ? "true" : "false",
-    className: tx("main.sidebar", "main__sidebar", {}, classNames),
+    className: tx("main.sidebar", {}, classNames),
     onKeyDownCapture: handleKeyDown,
-    ...state === "closed" && {
-      inert: true
-    },
     ref
   }, children));
 });
@@ -1538,13 +1581,13 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef
     ref: forwardedRef
   });
 });
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot8 : role ? "div" : "main";
+  const Root8 = asChild ? Slot8 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React20.createElement(Root6, {
+  return /* @__PURE__ */ React20.createElement(Root8, {
     role,
     ...handlesFocus && {
       ...mover
@@ -1553,7 +1596,7 @@ var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, h
     "data-sidebar-inline-start-state": navigationSidebarState,
     "data-sidebar-inline-end-state": complementarySidebarState,
     "data-handles-focus": handlesFocus,
-    className: tx("main.content", "main", {
+    className: tx("main.content", {
       bounce,
       handlesFocus
     }, classNames),
@@ -1561,30 +1604,10 @@ var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, h
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery("lg");
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement("div", {
-    onClick: () => {
-      setNavigationSidebarState("collapsed");
-      setComplementarySidebarState("collapsed");
-    },
-    ...props,
-    className: tx("main.overlay", "main__overlay", {
-      isLg,
-      inlineStartSidebarOpen: navigationSidebarState,
-      inlineEndSidebarOpen: complementarySidebarState
-    }, classNames),
-    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
-    "aria-hidden": "true",
-    ref: forwardedRef
-  });
-});
 var Main = {
   Root: MainRoot,
-  Content: MainContent,
   Overlay: MainOverlay,
+  Content: MainContent,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar
 };
@@ -1627,7 +1650,7 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef17(({ classNames, children, c
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
-    className: tx("menu.content", "menu", {
+    className: tx("menu.content", {
       elevation
     }, classNames),
     ref: forwardedRef
@@ -1635,10 +1658,10 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef17(({ classNames, children, c
 });
 var ContextMenuViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot9 : Primitive8.div;
-  return /* @__PURE__ */ React21.createElement(Root6, {
+  const Root8 = asChild ? Slot9 : Primitive8.div;
+  return /* @__PURE__ */ React21.createElement(Root8, {
     ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
@@ -1646,7 +1669,7 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, f
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    className: tx("menu.arrow", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1656,7 +1679,7 @@ var ContextMenuItem = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, fo
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Item, {
     ...props,
-    className: tx("menu.item", "menu__item", {}, classNames),
+    className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1664,7 +1687,7 @@ var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef17(({ classNames, ...pro
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1672,7 +1695,7 @@ var ContextMenuSeparator = /* @__PURE__ */ forwardRef17(({ classNames, ...props
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Separator, {
     ...props,
-    className: tx("menu.separator", "menu__item", {}, classNames),
+    className: tx("menu.separator", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1680,7 +1703,7 @@ var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef17(({ classNames, ...props
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Label, {
     ...props,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    className: tx("menu.groupLabel", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1825,10 +1848,10 @@ var DropdownMenuPortal = (props) => {
 DropdownMenuPortal.displayName = PORTAL_NAME;
 var DropdownMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot10 : Primitive9.div;
-  return /* @__PURE__ */ React22.createElement(Root6, {
+  const Root8 = asChild ? Slot10 : Primitive9.div;
+  return /* @__PURE__ */ React22.createElement(Root8, {
     ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
@@ -1881,7 +1904,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef18((props, forwardedRef) =>
       }
     }),
     "data-arrow-keys": "up down",
-    className: tx("menu.content", "menu", {
+    className: tx("menu.content", {
       elevation
     }, classNames),
     style: {
@@ -1917,7 +1940,7 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef18((props, forwardedRef)
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    className: tx("menu.groupLabel", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1930,7 +1953,7 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
-    className: tx("menu.item", "menu__item", {}, classNames),
+    className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1943,7 +1966,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef18((props, forwardedRef
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1967,7 +1990,7 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef18((props, forwardedRef) =
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
-    className: tx("menu.item", "menu__item", {}, classNames),
+    className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1991,7 +2014,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef18((props, forwardedRef) =
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
-    className: tx("menu.separator", "menu__item", {}, classNames),
+    className: tx("menu.separator", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2004,7 +2027,7 @@ var DropdownMenuArrow = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   return /* @__PURE__ */ React22.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    className: tx("menu.arrow", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2098,15 +2121,15 @@ var MessageRoot = /* @__PURE__ */ forwardRef19(({ asChild, valence = "neutral",
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root6 = asChild ? Slot11 : Primitive10.div;
+  const Root8 = asChild ? Slot11 : Primitive10.div;
   return /* @__PURE__ */ React23.createElement(MessageProvider, {
     titleId,
     descriptionId,
     valence
-  }, /* @__PURE__ */ React23.createElement(Root6, {
+  }, /* @__PURE__ */ React23.createElement(Root8, {
     role: valence === "neutral" ? "paragraph" : "alert",
     ...props,
-    className: tx("message.root", "message", {
+    className: tx("message.root", {
       valence,
       elevation
     }, classNames),
@@ -2120,29 +2143,31 @@ var MESSAGE_TITLE_NAME = "MessageTitle";
 var MessageTitle = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root6 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React23.createElement(Root6, {
+  const Root8 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React23.createElement(Root8, {
     ...props,
-    className: tx("message.title", "message__title", {}, classNames),
+    className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? null : /* @__PURE__ */ React23.createElement(Icon, {
+  }, !icon && valence === "neutral" ? /* @__PURE__ */ React23.createElement("div", null) : /* @__PURE__ */ React23.createElement(Icon, {
     size: 5,
     icon: icon ?? messageIcons[valence],
-    classNames: tx("message.icon", "message__icon", {
+    classNames: tx("message.icon", {
       valence
     })
-  }), /* @__PURE__ */ React23.createElement("span", null, children));
+  }), /* @__PURE__ */ React23.createElement("span", {
+    className: tx("message.title", {}, classNames)
+  }, children));
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "MessageContent";
 var MessageContent = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Root6 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React23.createElement(Root6, {
+  const Root8 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React23.createElement(Root8, {
     ...props,
-    className: tx("message.content", "message__content", {}, classNames),
+    className: tx("message.content", {}, classNames),
     id: descriptionId,
     ref: forwardedRef
   }, children);
@@ -2424,7 +2449,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
     ...contentProps,
     collisionPadding: safeCollisionPadding,
     collisionBoundary: computedCollisionBoundary,
-    className: tx("popover.content", "popover", {
+    className: tx("popover.content", {
       elevation
     }, classNames),
     ref: forwardedRef,
@@ -2461,17 +2486,17 @@ var PopoverArrow = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   return /* @__PURE__ */ React24.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
-    className: tx("popover.arrow", "popover__arrow", {}, classNames),
+    className: tx("popover.arrow", {}, classNames),
     ref: forwardedRef
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React24.createElement(Root6, {
+  const Root8 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React24.createElement(Root8, {
     ...props,
-    className: tx("popover.viewport", "popover__viewport", {
+    className: tx("popover.viewport", {
       constrainInline,
       constrainBlock
     }, classNames),
@@ -2498,14 +2523,14 @@ var Status = /* @__PURE__ */ forwardRef21(({ classNames, children, progress = 0,
   return /* @__PURE__ */ React25.createElement("span", {
     role: "status",
     ...props,
-    className: tx("status.root", "status", {
+    className: tx("status.root", {
       indeterminate,
       variant
     }, classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React25.createElement("span", {
     role: "none",
-    className: tx("status.bar", "status__bar", {
+    className: tx("status.bar", {
       indeterminate,
       variant
     }, classNames),
@@ -2518,80 +2543,59 @@ var Status = /* @__PURE__ */ forwardRef21(({ classNames, children, progress = 0,
 });
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { Corner as ScrollAreaPrimitiveCorner, Root as ScrollAreaPrimitiveRoot, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Viewport as ScrollAreaPrimitiveViewport } from "@radix-ui/react-scroll-area";
+import { createContext as createContext8 } from "@radix-ui/react-context";
 import React26, { forwardRef as forwardRef22 } from "react";
-import { mx as mx4 } from "@dxos/ui-theme";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var SCROLLAREA_NAME = "ScrollArea";
+var [ScrollAreaProvider, useScrollAreaContext] = createContext8(SCROLLAREA_NAME);
+var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef22(({ classNames, className, children, orientation = "vertical", autoHide = true, margin = true, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ScrollAreaPrimitiveRoot, {
-    ...props,
-    className: tx("scrollArea.root", "scroll-area", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ScrollAreaPrimitiveViewport, {
-    ...props,
-    className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef22(({ classNames, variant = "fine", ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ScrollAreaPrimitiveScrollbar, {
-    "data-variant": variant,
-    ...props,
-    className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ScrollAreaPrimitiveThumb, {
+  const options = {
+    orientation,
+    autoHide,
+    margin,
+    padding,
+    thin,
+    snap
+  };
+  return /* @__PURE__ */ React26.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React26.createElement("div", {
     ...props,
-    className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
+    className: tx("scrollArea.root", options, [
+      className,
+      classNames
+    ]),
     ref: forwardedRef
-  });
+  }, children));
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+ScrollAreaRoot.displayName = SCROLLAREA_ROOT_NAME;
+var SCROLLAREA_VIEWPORT_NAME = "ScrollArea.Viewport";
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ScrollAreaPrimitiveCorner, {
+  const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
+  return /* @__PURE__ */ React26.createElement("div", {
     ...props,
-    className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
+    className: tx("scrollArea.viewport", options, classNames),
     ref: forwardedRef
-  });
+  }, children);
 });
-var ScrollAreaExpander = ({ classNames, children }) => {
-  return /* @__PURE__ */ React26.createElement("div", {
-    role: "none",
-    className: mx4("relative bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ React26.createElement("div", {
-    role: "none",
-    className: "absolute inset-0 overflow-hidden"
-  }, children));
-};
+ScrollAreaViewport.displayName = SCROLLAREA_VIEWPORT_NAME;
 var ScrollArea = {
   Root: ScrollAreaRoot,
-  Viewport: ScrollAreaViewport,
-  Scrollbar: ScrollAreaScrollbar,
-  Thumb: ScrollAreaThumb,
-  Corner: ScrollAreaCorner,
-  Expander: ScrollAreaExpander
+  Viewport: ScrollAreaViewport
 };
 
 // src/components/ScrollContainer/ScrollContainer.tsx
-import { createContext as createContext8 } from "@radix-ui/react-context";
+import { createContext as createContext9 } from "@radix-ui/react-context";
 import React27, { forwardRef as forwardRef23, useCallback as useCallback10, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef4, useState as useState7 } from "react";
-import { addEventListener, combine } from "@dxos/async";
+import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
-import { mx as mx5 } from "@dxos/ui-theme";
+import { mx as mx4 } 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] = createContext8("ScrollContainer");
+var [ScrollContainerProvider, useScrollContainerContext] = createContext9("ScrollContainer");
 var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, behavior: behaviorProp = "smooth" }, forwardedRef) => {
   const scrollerRef = useRef4(null);
   const autoScrollRef = useRef4(false);
@@ -2621,7 +2625,7 @@ var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, beh
     scrollToTop: () => {
       invariant(scrollerRef.current, void 0, {
         F: __dxlog_file2,
-        L: 94,
+        L: 95,
         S: void 0,
         A: [
           "scrollerRef.current",
@@ -2650,11 +2654,11 @@ var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, beh
     }
     return combine(
       // Check if user scrolls.
-      addEventListener(scrollerRef.current, "wheel", () => {
+      addEventListener2(scrollerRef.current, "wheel", () => {
         setPinned(isBottom(scrollerRef.current));
       }),
       // Check if scrolls.
-      addEventListener(scrollerRef.current, "scroll", () => {
+      addEventListener2(scrollerRef.current, "scroll", () => {
         setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
       })
     );
@@ -2668,21 +2672,24 @@ var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, beh
   }, fade && /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     "data-visible": overflow,
-    className: mx5(
+    className: mx4(
       // NOTE: Gradients may not be visible with dark reader extensions.
       "z-10 absolute block-start-0 inset-inline-0 bs-24 is-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__ */ React27.createElement("div", {
-    className: mx5("flex flex-col min-bs-0 overflow-y-auto scrollbar-thin", classNames),
+  }), /* @__PURE__ */ React27.createElement(ScrollArea.Root, {
+    classNames: mx4("min-bs-0", classNames),
+    thin: true
+  }, /* @__PURE__ */ React27.createElement(ScrollArea.Viewport, {
     ref: scrollerRef
-  }, children)));
+  }, children))));
 });
 Root3.displayName = "ScrollContainer.Root";
+var VIEWPORT_NAME = "ScrollContainer.Viewport";
 var Viewport = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const contentRef = useForwardedRef2(forwardedRef);
-  const { pinned, scrollToBottom } = useScrollContainerContext(Viewport.displayName);
+  const { pinned, scrollToBottom } = useScrollContainerContext(VIEWPORT_NAME);
   useEffect6(() => {
     if (!pinned || !contentRef.current) {
       return;
@@ -2696,17 +2703,18 @@ var Viewport = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props },
     scrollToBottom
   ]);
   return /* @__PURE__ */ React27.createElement("div", {
-    className: mx5("is-full", classNames),
+    className: mx4("is-full", classNames),
     ...props,
     ref: contentRef
   }, children);
 });
-Viewport.displayName = "ScrollContainer.Viewport";
+Viewport.displayName = VIEWPORT_NAME;
+var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 var ScrollDownButton = ({ classNames }) => {
-  const { pinned, scrollToBottom } = useScrollContainerContext(ScrollDownButton.displayName);
+  const { pinned, scrollToBottom } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
   return /* @__PURE__ */ React27.createElement("div", {
     role: "none",
-    className: mx5("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+    className: mx4("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
   }, /* @__PURE__ */ React27.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
@@ -2716,7 +2724,7 @@ var ScrollDownButton = ({ classNames }) => {
     onClick: () => scrollToBottom()
   }));
 };
-ScrollDownButton.displayName = "ScrollContainer.ScrollDownButton";
+ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 var ScrollContainer = {
   Root: Root3,
   Viewport,
@@ -2754,7 +2762,7 @@ var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collis
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
-    className: tx("select.content", "select__content", {
+    className: tx("select.content", {
       elevation
     }, classNames),
     position: "popper",
@@ -2765,7 +2773,7 @@ var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
-    className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
+    className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
   }, children ?? /* @__PURE__ */ React28.createElement(Icon, {
     size: 3,
@@ -2776,7 +2784,7 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, childr
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
-    className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
+    className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
   }, children ?? /* @__PURE__ */ React28.createElement(Icon, {
     size: 3,
@@ -2787,7 +2795,7 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...p
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectViewport, {
     ...props,
-    className: tx("select.viewport", "select__viewport", {}, classNames),
+    className: tx("select.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
@@ -2795,7 +2803,7 @@ var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forward
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
     ...props,
-    className: tx("select.item", "option", {}, classNames),
+    className: tx("select.item", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2804,7 +2812,7 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children,
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
-    className: tx("select.itemIndicator", "option__indicator", {}, classNames),
+    className: tx("select.itemIndicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
@@ -2812,7 +2820,7 @@ var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...prop
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
     ...props,
-    className: tx("select.item", "option", {}, classNames),
+    className: tx("select.item", {}, classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React28.createElement("span", {
     className: "grow is-1"
@@ -2826,7 +2834,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, fo
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.Separator, {
     ...props,
-    className: tx("select.separator", "select__separator", {}, classNames),
+    className: tx("select.separator", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2834,7 +2842,7 @@ var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwar
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(SelectPrimitive.Arrow, {
     ...props,
-    className: tx("select.arrow", "select__arrow", {}, classNames),
+    className: tx("select.arrow", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2867,7 +2875,7 @@ var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "hori
   return /* @__PURE__ */ React29.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
-    className: tx("separator.root", "separator", {
+    className: tx("separator.root", {
       orientation,
       subdued
     }, classNames),
@@ -2875,16 +2883,76 @@ var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "hori
   });
 });
 
+// src/components/Skeleton/Skeleton.tsx
+import React30, { forwardRef as forwardRef26 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default", ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React30.createElement("div", {
+    ...props,
+    className: tx("skeleton.root", {
+      variant
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Splitter/Splitter.tsx
+import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
+import React31, { forwardRef as forwardRef27 } from "react";
+import { mx as mx5 } 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 Root5 = /* @__PURE__ */ forwardRef27(({ __scopeSplitter, classNames, mode = "upper", ratio = 0.5, transition = 250, children, ...rootProps }, forwardedRef) => {
+  return /* @__PURE__ */ React31.createElement(SplitterProvider, {
+    scope: __scopeSplitter,
+    mode,
+    ratio,
+    transition
+  }, /* @__PURE__ */ React31.createElement("div", {
+    role: "none",
+    ...rootProps,
+    ref: forwardedRef,
+    className: mx5("relative bs-full overflow-hidden", classNames)
+  }, children));
+});
+Root5.displayName = ROOT_NAME;
+var PANEL_NAME = "Splitter.Panel";
+var Panel = /* @__PURE__ */ forwardRef27(({ __scopeSplitter, classNames, children, position, style, ...panelProps }, forwardedRef) => {
+  const context = useSplitterContext(PANEL_NAME, __scopeSplitter);
+  const { mode, ratio, transition } = context;
+  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}%`;
+  return /* @__PURE__ */ React31.createElement("div", {
+    ...panelProps,
+    ref: forwardedRef,
+    className: mx5("absolute inset-inline-0 flex flex-col overflow-hidden", classNames),
+    style: {
+      top,
+      height,
+      transition: `top ${transition}ms, height ${transition}ms ease-out`,
+      ...style
+    }
+  }, children);
+});
+Panel.displayName = PANEL_NAME;
+var Splitter = {
+  Root: Root5,
+  Panel
+};
+
 // src/components/Tag/Tag.tsx
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React30, { forwardRef as forwardRef26 } from "react";
-var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+import React32, { forwardRef as forwardRef28 } from "react";
+var Tag = /* @__PURE__ */ forwardRef28(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React30.createElement(Root6, {
+  const Root8 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React32.createElement(Root8, {
     ...props,
-    className: tx("tag.root", "dx-tag", {
+    className: tx("tag.root", {
       palette
     }, classNames),
     "data-hue": palette,
@@ -2896,58 +2964,58 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNam
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot14 } 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 React31, { forwardRef as forwardRef27 } from "react";
+import React33, { forwardRef as forwardRef29 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(ToastViewportPrimitive, {
-    className: tx("toast.viewport", "toast-viewport", {}, classNames),
+  return /* @__PURE__ */ React33.createElement(ToastViewportPrimitive, {
+    className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React33.createElement(ToastRootPrimitive, {
     ...props,
-    className: tx("toast.root", "toast", {}, classNames),
+    className: tx("toast.root", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React33.createElement(ElevationProvider, {
     elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React31.createElement(Root6, {
+  const Root8 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React33.createElement(Root8, {
     ...props,
-    className: tx("toast.body", "toast__body", {}, classNames),
+    className: tx("toast.body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React31.createElement(Root6, {
+  const Root8 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React33.createElement(Root8, {
     ...props,
-    className: tx("toast.title", "toast__title", {}, classNames),
+    className: tx("toast.title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React31.createElement(Root6, {
+  const Root8 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React33.createElement(Root8, {
     ...props,
-    className: tx("toast.description", "toast__description", {}, classNames),
+    className: tx("toast.description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root6 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React31.createElement(Root6, {
+  const Root8 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React33.createElement(Root8, {
     ...props,
-    className: tx("toast.actions", "toast__actions", {}, classNames),
+    className: tx("toast.actions", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -2967,75 +3035,76 @@ var Toast = {
 
 // src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React32, { Fragment, forwardRef as forwardRef28 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props }, forwardedRef) => {
+import React34, { Fragment, forwardRef as forwardRef30 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef30(({ classNames, children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const InnerRoot = textBlockWidthProp ? "div" : Fragment;
   const innerRootProps = textBlockWidthProp ? {
     role: "none",
-    className: tx("toolbar.inner", "toolbar", {
+    className: tx("toolbar.inner", {
       layoutManaged
     }, classNames)
   } : {};
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Root, {
     ...props,
     "data-arrow-keys": props.orientation === "vertical" ? "up down" : "left right",
-    className: tx("toolbar.root", "toolbar", {
-      layoutManaged,
-      disabled
+    className: tx("toolbar.root", {
+      density,
+      disabled,
+      layoutManaged
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React32.createElement(InnerRoot, innerRootProps, children));
+  }, /* @__PURE__ */ React34.createElement(InnerRoot, innerRootProps, children));
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Button, {
+  }, /* @__PURE__ */ React34.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Button, {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(IconButton, {
+  }, /* @__PURE__ */ React34.createElement(IconButton, {
     ...props,
     noTooltip: true,
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Button, {
+var ToolbarToggle = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Toggle, {
+  }, /* @__PURE__ */ React34.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Link, {
+  }, /* @__PURE__ */ React34.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef30(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React34.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef30(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Button, {
+  }, /* @__PURE__ */ React34.createElement(Button, {
     variant,
     density,
     elevation,
@@ -3044,11 +3113,11 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef30(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(IconButton, {
+  }, /* @__PURE__ */ React34.createElement(IconButton, {
     variant,
     density,
     elevation,
@@ -3059,13 +3128,13 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, densit
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = /* @__PURE__ */ forwardRef28(({ variant = "line", ...props }, forwardedRef) => {
-  return variant === "line" ? /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Separator, {
+var ToolbarSeparator = /* @__PURE__ */ forwardRef30(({ variant = "line", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Separator4, {
+  }, /* @__PURE__ */ React34.createElement(Separator4, {
     ...props,
     ref: forwardedRef
-  })) : /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Separator, {
+  })) : /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Separator, {
     className: "grow",
     ref: forwardedRef
   });
@@ -3081,6 +3150,78 @@ var Toolbar = {
   ToggleGroupIconItem: ToolbarToggleGroupIconItem,
   Separator: ToolbarSeparator
 };
+
+// src/primitives/Container/Container.tsx
+import { createContext as createContext10 } from "@radix-ui/react-context";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
+import React35, { forwardRef as forwardRef31 } from "react";
+var [ContainerProvider, useContext4] = createContext10("Container");
+var Root7 = ({ variant, children }) => {
+  return /* @__PURE__ */ React35.createElement(ContainerProvider, {
+    variant
+  }, children);
+};
+var CONTAINER_COLUMN_NAME = "Container.Column";
+var Column = /* @__PURE__ */ forwardRef31(({ classNames, className, asChild, role = "none", children, variant, ...props }, ref) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot15 : Primitive14.div;
+  const context = useContext4(CONTAINER_COLUMN_NAME);
+  return /* @__PURE__ */ React35.createElement(Root8, {
+    ...props,
+    className: tx("container.column", {
+      variant: variant ?? context.variant
+    }, [
+      className,
+      classNames
+    ]),
+    role,
+    ref
+  }, children);
+});
+Column.displayName = CONTAINER_COLUMN_NAME;
+var Container = {
+  Root: Root7,
+  Column
+};
+
+// src/primitives/Container/Layout.tsx
+import React36, { forwardRef as forwardRef32, useMemo as useMemo6 } from "react";
+import { mx as mx6 } from "@dxos/ui-theme";
+var Main2 = /* @__PURE__ */ forwardRef32(({ classNames, children, role, toolbar, statusbar }, forwardedRef) => {
+  const style = useMemo6(() => ({
+    gridTemplateRows: [
+      toolbar && "var(--toolbar-size)",
+      "1fr",
+      statusbar && "var(--statusbar-size)"
+    ].filter(Boolean).join(" ")
+  }), [
+    toolbar,
+    statusbar
+  ]);
+  return /* @__PURE__ */ React36.createElement("div", {
+    ref: forwardedRef,
+    role: role ?? "none",
+    style,
+    className: mx6("bs-full is-full grid grid-cols-[100%] overflow-hidden", toolbar && [
+      "[.dx-main-mobile-layout_&>.dx-toolbar]:pli-3 [&>.dx-toolbar]:relative",
+      "[&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator"
+    ], classNames)
+  }, children);
+});
+var Layout = {
+  Main: Main2
+};
+
+// src/primitives/Flex/Flex.tsx
+import React37 from "react";
+import { mx as mx7 } from "@dxos/ui-theme";
+var Flex = ({ children, classNames, role, column, grow }) => {
+  return /* @__PURE__ */ React37.createElement("div", {
+    role: role ?? "none",
+    className: mx7("flex", column && "flex-col", grow && "flex-1 overflow-hidden", classNames)
+  }, children);
+};
 export {
   AlertDialog,
   AnchoredOverflow,
@@ -3091,6 +3232,7 @@ export {
   ButtonGroup,
   Callout,
   Clipboard,
+  Container,
   ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,
@@ -3098,11 +3240,13 @@ export {
   DropdownMenu,
   ElevationContext,
   ElevationProvider,
+  Flex,
   Icon,
   IconButton,
   Input,
   LIST_ITEM_NAME,
   LIST_NAME,
+  Layout,
   Link,
   List,
   ListItem,
@@ -3113,6 +3257,8 @@ export {
   ScrollContainer,
   Select,
   Separator4 as Separator,
+  Skeleton,
+  Splitter,
   Status,
   Tag,
   ThemeContext,
@@ -3130,6 +3276,7 @@ export {
   Treegrid,
   createDropdownMenuScope,
   createPopoverScope,
+  createSplitterScope,
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,