@dxos/react-ui 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/dist/lib/browser/{chunk-B7HPXBP2.mjs → chunk-N5GDJTT2.mjs}

@@ -29,7 +29,7 @@ var useIconHref = (icon) => {
 
 // src/hooks/useSafeArea.ts
 import { useCallback, useState } from "react";
-import { useResize } from "@dxos/react-hooks";
+import { useViewportResize } from "@dxos/react-hooks";
 var initialSafeArea = {
   top: NaN,
   right: NaN,
@@ -46,7 +46,7 @@ var useSafeArea = () => {
       left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
     });
   }, []);
-  useResize(handleResize);
+  useViewportResize(handleResize);
   return padding;
 };
 
@@ -128,7 +128,7 @@ var useTranslationsContext = () => useContext4(TranslationsContext);
 
 // src/hooks/useVisualViewport.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
-import { useResize as useResize2 } from "@dxos/react-hooks";
+import { useViewportResize as useViewportResize2 } from "@dxos/react-hooks";
 var useVisualViewport = (deps) => {
   const [width, setWidth] = useState3(null);
   const [height, setHeight] = useState3(null);
@@ -138,7 +138,7 @@ var useVisualViewport = (deps) => {
       setHeight(window.visualViewport.height);
     }
   }, []);
-  useResize2(handleResize, deps);
+  useViewportResize2(handleResize, deps);
   return {
     width,
     height
@@ -150,8 +150,8 @@ var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, ch
   var _effect = _useSignals2();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot : Primitive.div;
-    return /* @__PURE__ */ React2.createElement(Root7, {
+    const Root8 = asChild ? Slot : Primitive.div;
+    return /* @__PURE__ */ React2.createElement(Root8, {
       role: "none",
       ...props,
       className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
@@ -165,8 +165,8 @@ var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames,
   var _effect = _useSignals2();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot : Primitive.div;
-    return /* @__PURE__ */ React2.createElement(Root7, {
+    const Root8 = asChild ? Slot : Primitive.div;
+    return /* @__PURE__ */ React2.createElement(Root8, {
       role: "none",
       ...props,
       className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
@@ -226,10 +226,10 @@ var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props },
 var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals3();
   try {
-    const Root7 = asChild ? Slot2 : Primitive2.span;
+    const Root8 = asChild ? Slot2 : Primitive2.span;
     const { tx } = useThemeContext();
     const { labelId } = useAvatarContext("AvatarLabel");
-    return /* @__PURE__ */ React3.createElement(Root7, {
+    return /* @__PURE__ */ React3.createElement(Root8, {
       ...props,
       id: labelId,
       ref: forwardedRef,
@@ -244,10 +244,10 @@ var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ..
 var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals3();
   try {
-    const Root7 = asChild ? Slot2 : Primitive2.span;
+    const Root8 = asChild ? Slot2 : Primitive2.span;
     const { tx } = useThemeContext();
     const { descriptionId } = useAvatarContext("AvatarDescription");
-    return /* @__PURE__ */ React3.createElement(Root7, {
+    return /* @__PURE__ */ React3.createElement(Root8, {
       ...props,
       id: descriptionId,
       ref: forwardedRef,
@@ -275,7 +275,7 @@ import React6, { forwardRef as forwardRef5 } from "react";
 // src/components/Icon/Icon.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4, { forwardRef as forwardRef3, memo } from "react";
-var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames, size, ...props }, forwardedRef) => {
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
   var _effect = _useSignals4();
   try {
     const { tx } = useThemeContext();
@@ -303,8 +303,8 @@ var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props
   var _effect = _useSignals5();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot3 : Primitive3.a;
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    const Root8 = asChild ? Slot3 : Primitive3.a;
+    return /* @__PURE__ */ React5.createElement(Root8, {
       ...props,
       className: tx("link.root", "link", {
         variant
@@ -321,8 +321,8 @@ var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...prop
   var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot4 : Primitive4.div;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    const Root8 = asChild ? Slot4 : Primitive4.div;
+    return /* @__PURE__ */ React6.createElement(Root8, {
       role: "navigation",
       ...props,
       className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -336,8 +336,8 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...prop
   var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot4 : Primitive4.ol;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    const Root8 = asChild ? Slot4 : Primitive4.ol;
+    return /* @__PURE__ */ React6.createElement(Root8, {
       role: "list",
       ...props,
       className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -351,8 +351,8 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...
   var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot4 : Primitive4.li;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    const Root8 = asChild ? Slot4 : Primitive4.li;
+    return /* @__PURE__ */ React6.createElement(Root8, {
       role: "listitem",
       ...props,
       className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -365,8 +365,8 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...
 var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
   var _effect = _useSignals6();
   try {
-    const Root7 = asChild ? Slot4 : Link;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    const Root8 = asChild ? Slot4 : Link;
+    return /* @__PURE__ */ React6.createElement(Root8, {
       ...props,
       ref: forwardedRef
     });
@@ -378,8 +378,8 @@ var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...p
   var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot4 : "h1";
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    const Root8 = asChild ? Slot4 : "h1";
+    return /* @__PURE__ */ React6.createElement(Root8, {
       ...props,
       "aria-current": "page",
       className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -414,7 +414,7 @@ var Breadcrumb = {
   Separator: BreadcrumbSeparator
 };
 
-// src/components/Buttons/Button.tsx
+// src/components/Button/Button.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
@@ -432,8 +432,8 @@ var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ classNames, ch
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
     const density = useDensityContext(propsDensity);
-    const Root7 = asChild ? Slot5 : Primitive5.button;
-    return /* @__PURE__ */ React7.createElement(Root7, {
+    const Root8 = asChild ? Slot5 : Primitive5.button;
+    return /* @__PURE__ */ React7.createElement(Root8, {
       ref,
       ...props,
       "data-variant": variant,
@@ -460,8 +460,8 @@ var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsEleva
   try {
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
-    const Root7 = asChild ? Slot5 : Primitive5.div;
-    return /* @__PURE__ */ React7.createElement(Root7, {
+    const Root8 = asChild ? Slot5 : Primitive5.div;
+    return /* @__PURE__ */ React7.createElement(Root8, {
       role: "none",
       ...props,
       className: tx("button.group", "button-group", {
@@ -477,7 +477,7 @@ var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsEleva
 });
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
-// src/components/Buttons/IconButton.tsx
+// src/components/Button/IconButton.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import React9, { forwardRef as forwardRef8 } from "react";
 
@@ -1104,8 +1104,22 @@ var Tooltip = {
   Trigger: TooltipTrigger
 };
 
-// src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+// src/components/Button/IconButton.tsx
+var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
+      ...props,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
   var _effect = _useSignals9();
   try {
     if (noTooltip) {
@@ -1126,7 +1140,7 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = t
     _effect.f();
   }
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size = 5, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
   var _effect = _useSignals9();
   try {
     const { tx } = useThemeContext();
@@ -1150,22 +1164,8 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, la
     _effect.f();
   }
 });
-var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
-      ...props,
-      ref: forwardedRef
-    }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
-      ...props,
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
 
-// src/components/Buttons/Toggle.tsx
+// src/components/Button/Toggle.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
 import React10, { forwardRef as forwardRef9 } from "react";
@@ -1186,7 +1186,7 @@ var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedCh
   }
 });
 
-// src/components/Buttons/ToggleGroup.tsx
+// src/components/Button/ToggleGroup.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import { ToggleGroupItem as ToggleGroupItemPrimitive, ToggleGroup as ToggleGroupPrimitive } from "@radix-ui/react-toggle-group";
 import React11, { forwardRef as forwardRef10 } from "react";
@@ -1284,23 +1284,14 @@ import React15, { createContext as createContext7, useEffect as useEffect4, useM
 
 // src/util/domino.ts
 import { mx as mx2 } from "@dxos/react-ui-theme";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var Domino = class _Domino {
   static of(tag) {
     return new _Domino(tag);
   }
+  _el;
+  constructor(tag) {
+    this._el = document.createElement(tag);
+  }
   classNames(...classNames) {
     this._el.className = mx2(classNames);
     return this;
@@ -1313,12 +1304,12 @@ var Domino = class _Domino {
     this._el.dataset[key] = value;
     return this;
   }
-  style(styles) {
-    Object.assign(this._el.style, styles);
+  attributes(attr) {
+    Object.entries(attr).filter(([_, value]) => value !== void 0).map(([key, value]) => this._el.setAttribute(key, value));
     return this;
   }
-  attr(key, value) {
-    this._el[key] = value;
+  style(styles) {
+    Object.assign(this._el.style, styles);
     return this;
   }
   children(...children) {
@@ -1332,10 +1323,6 @@ var Domino = class _Domino {
   build() {
     return this._el;
   }
-  constructor(tag) {
-    _define_property(this, "_el", void 0);
-    this._el = document.createElement(tag);
-  }
 };
 
 // src/util/hasIosKeyboard.ts
@@ -1541,7 +1528,7 @@ var Clipboard = {
   Provider: ClipboardProvider
 };
 
-// src/components/Dialogs/Dialog.tsx
+// src/components/Dialog/Dialog.tsx
 import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext8 } 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";
@@ -1640,7 +1627,7 @@ var Dialog = {
   Close: DialogClose
 };
 
-// src/components/Dialogs/AlertDialog.tsx
+// src/components/Dialog/AlertDialog.tsx
 import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
 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 { createContext as createContext9 } from "@radix-ui/react-context";
@@ -1975,13 +1962,13 @@ var Input = {
   DescriptionAndValidation
 };
 
-// src/components/Lists/List.tsx
+// src/components/List/List.tsx
 import { useSignals as _useSignals21 } from "@preact-signals/safe-react/tracking";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import React21, { forwardRef as forwardRef14 } 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";
 
-// src/components/Lists/ListDropIndicator.tsx
+// src/components/List/ListDropIndicator.tsx
 import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
 import React20 from "react";
 var edgeToOrientationMap = {
@@ -1992,7 +1979,7 @@ var edgeToOrientationMap = {
 };
 var orientationStyles = {
   horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
-  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
+  vertical: "is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
 };
 var edgeStyles = {
   top: "top-[--line-offset] before:top-[--offset-terminal]",
@@ -2025,7 +2012,7 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
   }
 };
 
-// src/components/Lists/List.tsx
+// src/components/List/List.tsx
 var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   var _effect = _useSignals21();
   try {
@@ -2045,10 +2032,10 @@ var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, for
 var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
   var _effect = _useSignals21();
   try {
-    const Root7 = asChild ? Slot6 : "div";
+    const Root8 = asChild ? Slot6 : "div";
     const density = useDensityContext();
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React21.createElement(Root7, {
+    return /* @__PURE__ */ React21.createElement(Root8, {
       ...!asChild && {
         role: "none"
       },
@@ -2142,11 +2129,11 @@ var ListItem = {
   DropIndicator: ListDropIndicator
 };
 
-// src/components/Lists/Tree.tsx
+// src/components/List/Tree.tsx
 import { useSignals as _useSignals23 } from "@preact-signals/safe-react/tracking";
 import React23, { forwardRef as forwardRef15 } from "react";
 
-// src/components/Lists/TreeDropIndicator.tsx
+// src/components/List/TreeDropIndicator.tsx
 import { useSignals as _useSignals22 } from "@preact-signals/safe-react/tracking";
 import React22 from "react";
 var edgeToOrientationMap2 = {
@@ -2197,7 +2184,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   }
 };
 
-// src/components/Lists/Tree.tsx
+// src/components/List/Tree.tsx
 var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   var _effect = _useSignals23();
   try {
@@ -2251,7 +2238,7 @@ var TreeItem = {
   DropIndicator: TreeDropIndicator
 };
 
-// src/components/Lists/Treegrid.tsx
+// src/components/List/Treegrid.tsx
 import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
@@ -2268,7 +2255,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
   var _effect = _useSignals24();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot7 : Primitive7.div;
+    const Root8 = asChild ? Slot7 : Primitive7.div;
     const { findFirstFocusable } = useFocusFinders();
     const handleKeyDown = useCallback7((event) => {
       switch (event.key) {
@@ -2303,7 +2290,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
     }, [
       findFirstFocusable
     ]);
-    return /* @__PURE__ */ React24.createElement(Root7, {
+    return /* @__PURE__ */ React24.createElement(Root8, {
       role: "treegrid",
       onKeyDown: handleKeyDown,
       ...props,
@@ -2322,7 +2309,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
   var _effect = _useSignals24();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot7 : Primitive7.div;
+    const Root8 = asChild ? Slot7 : Primitive7.div;
     const pathParts = id.split(PATH_SEPARATOR);
     const level = pathParts.length - 1;
     const [open, onOpenChange] = useControllableState3({
@@ -2334,7 +2321,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
       open,
       onOpenChange,
       scope: __treegridRowScope
-    }, /* @__PURE__ */ React24.createElement(Root7, {
+    }, /* @__PURE__ */ React24.createElement(Root8, {
       role: "row",
       "aria-level": level,
       className: tx("treegrid.row", "treegrid__row", {
@@ -2483,10 +2470,10 @@ var useSwipeToDismiss = (ref, {
 
 // src/components/Main/Main.tsx
 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 NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
 var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
-var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
@@ -2632,14 +2619,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
     }, [
       props.onKeyDown
     ]);
-    const Root7 = isLg ? Primitive8.div : DialogContent2;
+    const Root8 = isLg ? Primitive8.div : DialogContent2;
     return /* @__PURE__ */ React25.createElement(DialogRoot2, {
       open: state !== "closed",
       "aria-label": toLocalizedString(label, t),
       modal: false
     }, !isLg && /* @__PURE__ */ React25.createElement(DialogTitle2, {
       className: "sr-only"
-    }, toLocalizedString(label, t)), /* @__PURE__ */ React25.createElement(Root7, {
+    }, toLocalizedString(label, t)), /* @__PURE__ */ React25.createElement(Root8, {
       ...!isLg && {
         forceMount: true,
         tabIndex: -1,
@@ -2703,9 +2690,9 @@ var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, h
   try {
     const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot8 : role ? "div" : "main";
+    const Root8 = asChild ? Slot8 : role ? "div" : "main";
     const mover = useLandmarkMover(props.onKeyDown, "1");
-    return /* @__PURE__ */ React25.createElement(Root7, {
+    return /* @__PURE__ */ React25.createElement(Root8, {
       role,
       ...handlesFocus && {
         ...mover
@@ -2812,8 +2799,8 @@ var ContextMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, c
   var _effect = _useSignals26();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot9 : Primitive9.div;
-    return /* @__PURE__ */ React26.createElement(Root7, {
+    const Root8 = asChild ? Slot9 : Primitive9.div;
+    return /* @__PURE__ */ React26.createElement(Root8, {
       ...props,
       className: tx("menu.viewport", "menu__viewport", {}, classNames),
       ref: forwardedRef
@@ -2915,7 +2902,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
-import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect7, useRef as useRef3 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -3053,8 +3040,8 @@ var DropdownMenuViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild,
   var _effect = _useSignals27();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot10 : Primitive10.div;
-    return /* @__PURE__ */ React27.createElement(Root7, {
+    const Root8 = asChild ? Slot10 : Primitive10.div;
+    return /* @__PURE__ */ React27.createElement(Root8, {
       ...props,
       className: tx("menu.viewport", "menu__viewport", {}, classNames),
       ref: forwardedRef
@@ -3067,18 +3054,35 @@ var CONTENT_NAME2 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   var _effect = _useSignals27();
   try {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef3(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    const computedCollisionBoundary = useMemo5(() => {
+      const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+      return closestBoundary ? Array.isArray(collisionBoundary) ? [
+        closestBoundary,
+        ...collisionBoundary
+      ] : collisionBoundary ? [
+        closestBoundary,
+        collisionBoundary
+      ] : [
+        closestBoundary
+      ] : collisionBoundary;
+    }, [
+      context.open,
+      collisionBoundary,
+      context.triggerRef.current
+    ]);
     return /* @__PURE__ */ React27.createElement(MenuPrimitive.Content, {
       id: context.contentId,
       "aria-labelledby": context.triggerId,
       ...menuScope,
       ...contentProps,
+      collisionBoundary: computedCollisionBoundary,
       collisionPadding: safeCollisionPadding,
       ref: forwardedRef,
       onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
@@ -3380,12 +3384,12 @@ var MessageRoot = /* @__PURE__ */ forwardRef20(({ asChild, valence = "neutral",
     const titleId = useId4("message__title", propsTitleId);
     const descriptionId = useId4("message__description", propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Root7 = asChild ? Slot11 : Primitive11.div;
+    const Root8 = asChild ? Slot11 : Primitive11.div;
     return /* @__PURE__ */ React28.createElement(MessageProvider, {
       titleId,
       descriptionId,
       valence
-    }, /* @__PURE__ */ React28.createElement(Root7, {
+    }, /* @__PURE__ */ React28.createElement(Root8, {
       role: valence === "neutral" ? "paragraph" : "alert",
       ...props,
       className: tx("message.root", "message", {
@@ -3407,8 +3411,8 @@ var MessageTitle = /* @__PURE__ */ forwardRef20(({ asChild, classNames, children
   try {
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Root7 = asChild ? Slot11 : Primitive11.h2;
-    return /* @__PURE__ */ React28.createElement(Root7, {
+    const Root8 = asChild ? Slot11 : Primitive11.h2;
+    return /* @__PURE__ */ React28.createElement(Root8, {
       ...props,
       className: tx("message.title", "message__title", {}, classNames),
       id: titleId,
@@ -3431,8 +3435,8 @@ var MessageContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, childr
   try {
     const { tx } = useThemeContext();
     const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-    const Root7 = asChild ? Slot11 : Primitive11.p;
-    return /* @__PURE__ */ React28.createElement(Root7, {
+    const Root8 = asChild ? Slot11 : Primitive11.p;
+    return /* @__PURE__ */ React28.createElement(Root8, {
       ...props,
       className: tx("message.content", "message__content", {}, classNames),
       id: descriptionId,
@@ -3467,7 +3471,7 @@ import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React29, { forwardRef as forwardRef21, useCallback as useCallback11, useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
+import React29, { forwardRef as forwardRef21, useCallback as useCallback11, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef4, useState as useState9 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
@@ -3717,13 +3721,29 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef)
 var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   var _effect = _useSignals29();
   try {
-    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
+    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
     const popperScope = usePopperScope2(__scopePopover);
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     useFocusGuards();
+    const computedCollisionBoundary = useMemo6(() => {
+      const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+      return closestBoundary ? Array.isArray(collisionBoundary) ? [
+        closestBoundary,
+        ...collisionBoundary
+      ] : collisionBoundary ? [
+        closestBoundary,
+        collisionBoundary
+      ] : [
+        closestBoundary
+      ] : collisionBoundary;
+    }, [
+      context.open,
+      collisionBoundary,
+      context.triggerRef.current
+    ]);
     return /* @__PURE__ */ React29.createElement(FocusScope, {
       asChild: true,
       loop: true,
@@ -3745,13 +3765,14 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
       ...popperScope,
       ...contentProps,
       collisionPadding: safeCollisionPadding,
+      collisionBoundary: computedCollisionBoundary,
       className: tx("popover.content", "popover", {
         elevation
       }, classNames),
       ref: forwardedRef,
       style: {
         ...contentProps.style,
-        // re-namespace exposed content custom properties
+        // Re-namespace exposed content custom properties.
         ...{
           "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
           "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
@@ -3804,8 +3825,8 @@ var PopoverViewport = /* @__PURE__ */ forwardRef21(({ classNames, asChild, const
   var _effect = _useSignals29();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot12 : Primitive12.div;
-    return /* @__PURE__ */ React29.createElement(Root7, {
+    const Root8 = asChild ? Slot12 : Primitive12.div;
+    return /* @__PURE__ */ React29.createElement(Root8, {
       ...props,
       className: tx("popover.viewport", "popover__viewport", {
         constrainInline,
@@ -3940,28 +3961,190 @@ var ScrollArea = {
   Corner: ScrollAreaCorner
 };
 
-// src/components/Select/Select.tsx
+// src/components/ScrollContainer/ScrollContainer.tsx
 import { useSignals as _useSignals32 } from "@preact-signals/safe-react/tracking";
+import { useState as useState10 } from "@preact-signals/safe-react/react";
+import { createContext as createContext12 } from "@radix-ui/react-context";
+import React32, { forwardRef as forwardRef24, useCallback as useCallback12, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo7, useRef as useRef5 } from "react";
+import { addEventListener, combine } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
+import { mx as mx5 } from "@dxos/react-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] = createContext12("ScrollContainer");
+var Root5 = /* @__PURE__ */ forwardRef24(({ children, classNames, pin, fade }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const scrollerRef = useRef5(null);
+    const autoScrollRef = useRef5(false);
+    const [overflow, setOverflow] = useState10(false);
+    const [pinned, setPinned] = useState10(pin);
+    const timeoutRef = useRef5(void 0);
+    const scrollToBottom = useCallback12((behavior = "instant") => {
+      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") {
+          timeoutRef.current = setTimeout(() => {
+            scrollerRef.current?.classList.remove("scrollbar-none");
+            autoScrollRef.current = false;
+          }, 500);
+        }
+        setPinned(true);
+      }
+    }, []);
+    const controller = useMemo7(() => ({
+      viewport: scrollerRef.current,
+      scrollToTop: () => {
+        invariant(scrollerRef.current, void 0, {
+          F: __dxlog_file2,
+          L: 92,
+          S: void 0,
+          A: [
+            "scrollerRef.current",
+            ""
+          ]
+        });
+        scrollerRef.current.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+        setPinned(false);
+      },
+      scrollToBottom: () => {
+        scrollToBottom("smooth");
+      }
+    }), [
+      scrollToBottom,
+      scrollerRef.current
+    ]);
+    useImperativeHandle(forwardedRef, () => controller, [
+      controller
+    ]);
+    useEffect9(() => {
+      if (!scrollerRef.current) {
+        return;
+      }
+      return combine(
+        // Check if user scrolls.
+        addEventListener(scrollerRef.current, "wheel", () => {
+          setPinned(isBottom(scrollerRef.current));
+        }),
+        // Check if scrolls.
+        addEventListener(scrollerRef.current, "scroll", () => {
+          setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
+        })
+      );
+    }, []);
+    return /* @__PURE__ */ React32.createElement(ScrollContainerProvider, {
+      pinned,
+      controller,
+      scrollToBottom
+    }, /* @__PURE__ */ React32.createElement("div", {
+      className: "relative grid flex-1 min-bs-0 overflow-hidden"
+    }, fade && /* @__PURE__ */ React32.createElement("div", {
+      role: "none",
+      "data-visible": overflow,
+      className: mx5(
+        // 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__ */ React32.createElement("div", {
+      className: mx5("flex flex-col min-bs-0 overflow-y-auto scrollbar-thin", classNames),
+      ref: scrollerRef
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+});
+Root5.displayName = "ScrollContainer.Root";
+var Viewport = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const contentRef = useForwardedRef2(forwardedRef);
+    const { pinned, scrollToBottom } = useScrollContainerContext(Viewport.displayName);
+    useEffect9(() => {
+      if (!pinned || !contentRef.current) {
+        return;
+      }
+      const resizeObserver = new ResizeObserver(() => scrollToBottom());
+      scrollToBottom("instant");
+      resizeObserver.observe(contentRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [
+      pinned,
+      scrollToBottom
+    ]);
+    return /* @__PURE__ */ React32.createElement("div", {
+      className: mx5("is-full", classNames),
+      ...props,
+      ref: contentRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+Viewport.displayName = "ScrollContainer.Viewport";
+var ScrollDownButton = ({ classNames }) => {
+  var _effect = _useSignals32();
+  try {
+    const { pinned, scrollToBottom } = useScrollContainerContext(ScrollDownButton.displayName);
+    return /* @__PURE__ */ React32.createElement("div", {
+      role: "none",
+      className: mx5("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+    }, /* @__PURE__ */ React32.createElement(IconButton, {
+      variant: "primary",
+      icon: "ph--arrow-down--regular",
+      iconOnly: true,
+      size: 4,
+      label: "Scroll down",
+      onClick: () => scrollToBottom()
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+ScrollDownButton.displayName = "ScrollContainer.ScrollDownButton";
+var ScrollContainer = {
+  Root: Root5,
+  Viewport,
+  ScrollDownButton
+};
+
+// src/components/Select/Select.tsx
+import { useSignals as _useSignals33 } from "@preact-signals/safe-react/tracking";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React32, { forwardRef as forwardRef24 } from "react";
+import React33, { 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__ */ forwardRef24(({ children, placeholder, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Trigger, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Trigger, {
       asChild: true,
       ref: forwardedRef
-    }, /* @__PURE__ */ React32.createElement(Button, props, /* @__PURE__ */ React32.createElement(SelectPrimitive.Value, {
+    }, /* @__PURE__ */ React33.createElement(Button, props, /* @__PURE__ */ React33.createElement(SelectPrimitive.Value, {
       placeholder
-    }, children), /* @__PURE__ */ React32.createElement("span", {
-      className: "w-1 flex-1"
-    }), /* @__PURE__ */ React32.createElement(SelectPrimitive.Icon, {
+    }, children), /* @__PURE__ */ React33.createElement("span", {
+      className: "is-1 flex-1"
+    }), /* @__PURE__ */ React33.createElement(SelectPrimitive.Icon, {
       asChild: true
-    }, /* @__PURE__ */ React32.createElement(Icon, {
+    }, /* @__PURE__ */ React33.createElement(Icon, {
       size: 3,
       icon: "ph--caret-down--bold"
     }))));
@@ -3969,13 +4152,13 @@ var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder,
     _effect.f();
   }
 });
-var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Content, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Content, {
       ...props,
       "data-arrow-keys": "up down",
       collisionPadding: safeCollisionPadding,
@@ -3989,15 +4172,15 @@ var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collis
     _effect.f();
   }
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollUpButton, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollUpButton, {
       ...props,
       className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
       ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React32.createElement(Icon, {
+    }, children ?? /* @__PURE__ */ React33.createElement(Icon, {
       size: 3,
       icon: "ph--caret-up--bold"
     }));
@@ -4005,15 +4188,15 @@ var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children
     _effect.f();
   }
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollDownButton, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollDownButton, {
       ...props,
       className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
       ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React32.createElement(Icon, {
+    }, children ?? /* @__PURE__ */ React33.createElement(Icon, {
       size: 3,
       icon: "ph--caret-down--bold"
     }));
@@ -4021,11 +4204,11 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, childr
     _effect.f();
   }
 });
-var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectViewport, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectViewport, {
       ...props,
       className: tx("select.viewport", "select__viewport", {}, classNames),
       ref: forwardedRef
@@ -4034,11 +4217,11 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, child
     _effect.f();
   }
 });
-var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
       ...props,
       className: tx("select.item", "option", {}, classNames),
       ref: forwardedRef
@@ -4048,11 +4231,11 @@ var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forward
   }
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemIndicator, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemIndicator, {
       ...props,
       className: tx("select.itemIndicator", "option__indicator", {}, classNames),
       ref: forwardedRef
@@ -4061,17 +4244,17 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children,
     _effect.f();
   }
 });
-var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
       ...props,
       className: tx("select.item", "option", {}, classNames),
       ref: forwardedRef
-    }, /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React32.createElement("span", {
-      className: "grow w-1"
-    }), /* @__PURE__ */ React32.createElement(Icon, {
+    }, /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React33.createElement("span", {
+      className: "grow is-1"
+    }), /* @__PURE__ */ React33.createElement(Icon, {
       icon: "ph--check--regular"
     }));
   } finally {
@@ -4080,11 +4263,11 @@ var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...prop
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Separator, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Separator, {
       ...props,
       className: tx("select.separator", "select__separator", {}, classNames),
       ref: forwardedRef
@@ -4093,11 +4276,11 @@ var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, fo
     _effect.f();
   }
 });
-var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals32();
+var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Arrow, {
+    return /* @__PURE__ */ React33.createElement(SelectPrimitive.Arrow, {
       ...props,
       className: tx("select.arrow", "select__arrow", {}, classNames),
       ref: forwardedRef
@@ -4128,14 +4311,14 @@ var Select = {
 };
 
 // src/components/Separator/Separator.tsx
-import { useSignals as _useSignals33 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals34 } from "@preact-signals/safe-react/tracking";
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React33, { forwardRef as forwardRef25 } from "react";
-var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
-  var _effect = _useSignals33();
+import React34, { forwardRef as forwardRef26 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+  var _effect = _useSignals34();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React33.createElement(SeparatorPrimitive, {
+    return /* @__PURE__ */ React34.createElement(SeparatorPrimitive, {
       orientation,
       ...props,
       className: tx("separator.root", "separator", {
@@ -4150,16 +4333,16 @@ var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "hori
 });
 
 // src/components/Tag/Tag.tsx
-import { useSignals as _useSignals34 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals35 } from "@preact-signals/safe-react/tracking";
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React34, { forwardRef as forwardRef26 } from "react";
-var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals34();
+import React35, { forwardRef as forwardRef27 } from "react";
+var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot13 : Primitive13.span;
-    return /* @__PURE__ */ React34.createElement(Root7, {
+    const Root8 = asChild ? Slot13 : Primitive13.span;
+    return /* @__PURE__ */ React35.createElement(Root8, {
       ...props,
       className: tx("tag.root", "dx-tag", {
         palette
@@ -4173,17 +4356,17 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNam
 });
 
 // src/components/Toast/Toast.tsx
-import { useSignals as _useSignals35 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals36 } from "@preact-signals/safe-react/tracking";
 import { Primitive as Primitive14 } 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 React35, { forwardRef as forwardRef27 } from "react";
+import React36, { forwardRef as forwardRef28 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React35.createElement(ToastViewportPrimitive, {
+    return /* @__PURE__ */ React36.createElement(ToastViewportPrimitive, {
       className: tx("toast.viewport", "toast-viewport", {}, classNames),
       ref: forwardedRef
     });
@@ -4191,27 +4374,27 @@ var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forw
     _effect.f();
   }
 });
-var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React35.createElement(ToastRootPrimitive, {
+    return /* @__PURE__ */ React36.createElement(ToastRootPrimitive, {
       ...props,
       className: tx("toast.root", "toast", {}, classNames),
       ref: forwardedRef
-    }, /* @__PURE__ */ React35.createElement(ElevationProvider, {
+    }, /* @__PURE__ */ React36.createElement(ElevationProvider, {
       elevation: "toast"
     }, children));
   } finally {
     _effect.f();
   }
 });
-var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot14 : Primitive14.div;
-    return /* @__PURE__ */ React35.createElement(Root7, {
+    const Root8 = asChild ? Slot14 : Primitive14.div;
+    return /* @__PURE__ */ React36.createElement(Root8, {
       ...props,
       className: tx("toast.body", "toast__body", {}, classNames),
       ref: forwardedRef
@@ -4220,12 +4403,12 @@ var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props },
     _effect.f();
   }
 });
-var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot14 : ToastTitlePrimitive;
-    return /* @__PURE__ */ React35.createElement(Root7, {
+    const Root8 = asChild ? Slot14 : ToastTitlePrimitive;
+    return /* @__PURE__ */ React36.createElement(Root8, {
       ...props,
       className: tx("toast.title", "toast__title", {}, classNames),
       ref: forwardedRef
@@ -4234,12 +4417,12 @@ var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }
     _effect.f();
   }
 });
-var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot14 : ToastDescriptionPrimitive;
-    return /* @__PURE__ */ React35.createElement(Root7, {
+    const Root8 = asChild ? Slot14 : ToastDescriptionPrimitive;
+    return /* @__PURE__ */ React36.createElement(Root8, {
       ...props,
       className: tx("toast.description", "toast__description", {}, classNames),
       ref: forwardedRef
@@ -4248,12 +4431,12 @@ var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...p
     _effect.f();
   }
 });
-var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals35();
+var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    const Root7 = asChild ? Slot14 : Primitive14.div;
-    return /* @__PURE__ */ React35.createElement(Root7, {
+    const Root8 = asChild ? Slot14 : Primitive14.div;
+    return /* @__PURE__ */ React36.createElement(Root8, {
       ...props,
       className: tx("toast.actions", "toast__actions", {}, classNames),
       ref: forwardedRef
@@ -4277,31 +4460,39 @@ var Toast = {
 };
 
 // src/components/Toolbar/Toolbar.tsx
-import { useSignals as _useSignals36 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals37 } from "@preact-signals/safe-react/tracking";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React36, { forwardRef as forwardRef28 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
-  var _effect = _useSignals36();
+import React37, { Fragment, forwardRef as forwardRef29 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef29(({ classNames, children, layoutManaged, textBlockWidth: textBlockWidthParam, disabled, ...props }, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Root, {
+    const InnerRoot = textBlockWidthParam ? "div" : Fragment;
+    const innerRootProps = textBlockWidthParam ? {
+      role: "none",
+      className: tx("toolbar.inner", "toolbar", {
+        layoutManaged
+      }, classNames)
+    } : {};
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Root, {
       ...props,
       "data-arrow-keys": props.orientation === "vertical" ? "up down" : "left right",
       className: tx("toolbar.root", "toolbar", {
-        layoutManaged
+        layoutManaged,
+        disabled
       }, classNames),
       ref: forwardedRef
-    }, children);
+    }, /* @__PURE__ */ React37.createElement(InnerRoot, innerRootProps, children));
   } finally {
     _effect.f();
   }
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(Button, {
+    }, /* @__PURE__ */ React37.createElement(Button, {
       ...props,
       ref: forwardedRef
     }));
@@ -4309,12 +4500,12 @@ var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     _effect.f();
   }
 });
-var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarIconButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(IconButton, {
+    }, /* @__PURE__ */ React37.createElement(IconButton, {
       ...props,
       ref: forwardedRef
     }));
@@ -4322,12 +4513,12 @@ var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     _effect.f();
   }
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarToggle = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(Toggle, {
+    }, /* @__PURE__ */ React37.createElement(Toggle, {
       ...props,
       ref: forwardedRef
     }));
@@ -4335,12 +4526,12 @@ var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     _effect.f();
   }
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarLink = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Link, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Link, {
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(Link, {
+    }, /* @__PURE__ */ React37.createElement(Link, {
       ...props,
       ref: forwardedRef
     }));
@@ -4348,13 +4539,13 @@ var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     _effect.f();
   }
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef29(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
       ...props,
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(ButtonGroup, {
+    }, /* @__PURE__ */ React37.createElement(ButtonGroup, {
       classNames,
       children,
       elevation,
@@ -4364,13 +4555,13 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children,
     _effect.f();
   }
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
       ...props,
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(Button, {
+    }, /* @__PURE__ */ React37.createElement(Button, {
       variant,
       density,
       elevation,
@@ -4382,13 +4573,13 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
     _effect.f();
   }
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
       ...props,
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(IconButton, {
+    }, /* @__PURE__ */ React37.createElement(IconButton, {
       variant,
       density,
       elevation,
@@ -4402,15 +4593,15 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, densit
     _effect.f();
   }
 });
-var ToolbarSeparator = /* @__PURE__ */ forwardRef28(({ variant = "line", ...props }, forwardedRef) => {
-  var _effect = _useSignals36();
+var ToolbarSeparator = /* @__PURE__ */ forwardRef29(({ variant = "line", ...props }, forwardedRef) => {
+  var _effect = _useSignals37();
   try {
-    return variant === "line" ? /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
+    return variant === "line" ? /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
       asChild: true
-    }, /* @__PURE__ */ React36.createElement(Separator4, {
+    }, /* @__PURE__ */ React37.createElement(Separator4, {
       ...props,
       ref: forwardedRef
-    })) : /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
+    })) : /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
       className: "grow",
       ref: forwardedRef
     });
@@ -4505,10 +4696,12 @@ export {
   Popover,
   Status,
   ScrollArea,
+  useScrollContainerContext,
+  ScrollContainer,
   Select,
   Separator4 as Separator,
   Tag,
   Toast,
   Toolbar
 };
-//# sourceMappingURL=chunk-B7HPXBP2.mjs.map
+//# sourceMappingURL=chunk-N5GDJTT2.mjs.map