@dxos/react-ui 0.7.5-main.499c70c → 0.7.5-main.5ae2ba8

package/dist/lib/browser/index.mjs

@@ -22,13 +22,36 @@ var useElevationContext = (propsElevation) => {
   return propsElevation ?? elevation;
 };
 
+// packages/ui/react-ui/src/hooks/useSafeArea.ts
+import { useCallback, useState } from "react";
+import { useResize } from "@dxos/react-hooks";
+var initialSafeArea = {
+  top: NaN,
+  right: NaN,
+  bottom: NaN,
+  left: NaN
+};
+var useSafeArea = () => {
+  const [padding, setPadding] = useState(initialSafeArea);
+  const handleResize = useCallback(() => {
+    setPadding({
+      top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
+      right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
+      bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
+      left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
+    });
+  }, []);
+  useResize(handleResize);
+  return padding;
+};
+
 // packages/ui/react-ui/src/hooks/useTranslationsContext.ts
 import { useContext as useContext4 } from "react";
 
 // packages/ui/react-ui/src/components/ThemeProvider/TranslationsProvider.tsx
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { useEffect, createContext, useState, Suspense, useContext as useContext3 } from "react";
+import React, { useEffect, createContext, useState as useState2, Suspense, useContext as useContext3 } from "react";
 import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
@@ -63,7 +86,7 @@ var useTranslation = (...args) => {
   };
 };
 var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
-  const [loaded, setLoaded] = useState(false);
+  const [loaded, setLoaded] = useState2(false);
   useEffect(() => {
     setLoaded(false);
     if (resourceExtensions && resourceExtensions.length) {
@@ -98,21 +121,18 @@ import { raise } from "@dxos/debug";
 var useThemeContext = () => useContext5(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
 
 // packages/ui/react-ui/src/hooks/useVisualViewport.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useState as useState3 } from "react";
+import { useResize as useResize2 } from "@dxos/react-hooks";
 var useVisualViewport = (deps) => {
-  const [width, setWidth] = useState2(null);
-  const [height, setHeight] = useState2(null);
-  useEffect2(() => {
-    const handleResize = () => {
-      if (window.visualViewport) {
-        setWidth(window.visualViewport.width);
-        setHeight(window.visualViewport.height);
-      }
-    };
-    window.visualViewport?.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.visualViewport?.removeEventListener("resize", handleResize);
-  }, deps ?? []);
+  const [width, setWidth] = useState3(null);
+  const [height, setHeight] = useState3(null);
+  const handleResize = useCallback2(() => {
+    if (window.visualViewport) {
+      setWidth(window.visualViewport.width);
+      setHeight(window.visualViewport.height);
+    }
+  }, []);
+  useResize2(handleResize);
   return {
     width,
     height
@@ -233,16 +253,12 @@ var AvatarFrame = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props
     y: ringGap + ringWidth,
     rx
   }))), variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
-    className: hue ? tx("hue.fill", "avatar__frame__circle", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
     cx: "50%",
     cy: "50%",
-    r
+    r,
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)"
   }) : /* @__PURE__ */ React4.createElement("rect", {
-    className: hue ? tx("hue.fill", "avatar__frame__rect", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)",
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     width: 2 * r,
@@ -572,11 +588,33 @@ var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsEleva
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-import React10, { forwardRef as forwardRef9 } from "react";
+import React10, { forwardRef as forwardRef9, useState as useState4 } from "react";
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
 import React9, { forwardRef as forwardRef8 } from "react";
+
+// packages/ui/react-ui/src/hooks/useSafeCollisionPadding.ts
+import { useMemo } from "react";
+var propIsNumber = (prop) => Number.isFinite(prop);
+var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
+var safePadding = (propsPadding, safePadding2, side) => {
+  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
+};
+var useSafeCollisionPadding = (collisionPadding) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
+  ]);
+};
+
+// packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
@@ -589,13 +627,14 @@ var TooltipArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwar
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef8(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   return /* @__PURE__ */ React9.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
-    collisionPadding: 8,
     ...props,
+    collisionPadding: safeCollisionPadding,
     className: tx("tooltip.content", "tooltip", {
       elevation
     }, classNames),
@@ -612,20 +651,40 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
-  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, zIndex && {
-    style: {
-      zIndex
-    }
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
+  if (noTooltip) {
+    return /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  }
+  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, {
+    ...zIndex && {
+      style: {
+        zIndex
+      }
+    },
+    side: tooltipSide
   }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ React10.createElement(Tooltip.Root, null, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip?.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React10.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
   })), tooltipPortal ? /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React10.createElement(Button, {
     ...props,
@@ -637,7 +696,10 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, la
     classNames: iconClassNames
   }), /* @__PURE__ */ React10.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label));
+  }, label), caretDown && /* @__PURE__ */ React10.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
 });
 var IconButton = /* @__PURE__ */ forwardRef9((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React10.createElement(IconOnlyButton, {
   ...props,
@@ -690,7 +752,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, densit
 });
 
 // packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
-import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState3 } from "react";
+import React13, { createContext as createContext4, useCallback as useCallback3, useContext as useContext6, useState as useState5 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -698,8 +760,8 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 });
 var useClipboard = () => useContext6(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = useState3("");
-  const setTextValue = useCallback(async (nextValue) => {
+  const [textValue, setInternalTextValue] = useState5("");
+  const setTextValue = useCallback3(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
@@ -712,12 +774,12 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
-import React17, { useState as useState4 } from "react";
+import React17, { useState as useState6 } from "react";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React16, { createContext as createContext7, useEffect as useEffect3 } from "react";
+import React16, { createContext as createContext7, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -749,20 +811,28 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React15.cre
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 var ThemeContext = /* @__PURE__ */ createContext7(void 0);
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
-  useEffect3(() => {
+  useEffect2(() => {
     if (document.defaultView) {
       const kb = createKeyborg(document.defaultView);
       kb.subscribe(handleInputModalityChange);
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
+  const safeAreaPadding = useSafeArea();
+  const contextValue = useMemo2(() => ({
+    tx,
+    themeMode,
+    hasIosKeyboard: hasIosKeyboard(),
+    safeAreaPadding,
+    ...rest
+  }), [
+    tx,
+    themeMode,
+    safeAreaPadding,
+    rest
+  ]);
   return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
-    value: {
-      tx,
-      themeMode,
-      hasIosKeyboard: hasIosKeyboard(),
-      ...rest
-    }
+    value: contextValue
   }, /* @__PURE__ */ React16.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
@@ -819,8 +889,8 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t("copy success label") : t("copy label");
-  const [open, setOpen] = useState4(false);
+  const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
+  const [open, setOpen] = useState6(false);
   return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
     delayDuration: 1500,
     open,
@@ -893,7 +963,7 @@ var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockA
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React18.createElement(DialogOverlayPrimitive, {
     ...props,
-    className: tx("dialog.overlay", "dialog__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", "dialog__overlay", {}, classNames),
     ref: forwardedRef,
     "data-block-align": blockAlign
   }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider, {
@@ -901,13 +971,13 @@ var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockA
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React18.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
-      inOverlayLayout
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
   }, children);
@@ -1004,12 +1074,13 @@ import React20, { forwardRef as forwardRef14 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Content, {
-    collisionPadding: 8,
     ...props,
+    collisionPadding: safeCollisionPadding,
     className: tx("menu.content", "menu", {
       elevation
     }, classNames),
@@ -1092,7 +1163,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React21, { useRef, useCallback as useCallback2, forwardRef as forwardRef15, useEffect as useEffect4 } from "react";
+import React21, { useRef, useCallback as useCallback4, forwardRef as forwardRef15, useEffect as useEffect3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1115,7 +1186,7 @@ var DropdownMenuRoot = (props) => {
     contentId: useId3(),
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback2(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback4(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
@@ -1184,7 +1255,7 @@ var DropdownMenuVirtualTrigger = (props) => {
   const { __scopeDropdownMenu, virtualRef } = props;
   const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  useEffect4(() => {
+  useEffect3(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
@@ -1216,17 +1287,19 @@ var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild,
 });
 var CONTENT_NAME = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+  const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
   const elevation = useElevationContext();
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef(false);
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   return /* @__PURE__ */ React21.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
     ...contentProps,
+    collisionPadding: safeCollisionPadding,
     ref: forwardedRef,
     onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
       if (!hasInteractedOutsideRef.current) {
@@ -1441,7 +1514,7 @@ var useDropdownMenuMenuScope = useMenuScope;
 // packages/ui/react-ui/src/components/Input/Input.tsx
 import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React22, { forwardRef as forwardRef16, useCallback as useCallback3 } from "react";
+import React22, { forwardRef as forwardRef16, useCallback as useCallback5 } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
 var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -1490,7 +1563,7 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation:
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  const segmentClassName = useCallback3(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
     variant: "static",
     focused,
     disabled: props.disabled,
@@ -1598,7 +1671,7 @@ var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React22.createElement("input", {
     type: "checkbox",
-    className: "ch-checkbox--switch ch-focus-ring",
+    className: "dx-checkbox--switch dx-focus-ring",
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -1641,8 +1714,8 @@ var edgeToOrientationMap = {
   right: "vertical"
 };
 var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
+  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]"
 };
 var edgeStyles = {
   top: "top-[--line-offset] before:top-[--offset-terminal]",
@@ -1653,17 +1726,17 @@ var edgeStyles = {
 var strokeSize = 2;
 var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var ListDropIndicator = ({ edge, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
       "--terminal-size": `${terminalSize}px`,
       "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
+      "--terminal-inset": `${terminalInset}px`,
       "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
     },
     className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
@@ -1943,18 +2016,17 @@ var Treegrid = {
 
 // packages/ui/react-ui/src/components/Main/Main.tsx
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContext as createContext10 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React28, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
+import React28, { forwardRef as forwardRef20, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState8 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState7 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1969,22 +2041,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState5(0);
-  const [gestureStartX, setGestureStartX] = useState5(0);
-  const setIdle = useCallback4(() => {
+  const [motionState, setMotionState] = useState7(0);
+  const [gestureStartX, setGestureStartX] = useState7(0);
+  const setIdle = useCallback6(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback4(() => {
+  const setFollowing = useCallback6(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback4(({ screenX }) => {
+  const handlePointerDown = useCallback6(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -1992,7 +2064,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback4(({ screenX }) => {
+  const handlePointerMove = useCallback6(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -2016,12 +2088,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback4(() => {
+  const handlePointerUp = useCallback6(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -2030,7 +2102,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -2039,7 +2111,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -2059,7 +2131,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback5((event) => {
+  const handleKeyDown = useCallback7((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -2088,72 +2160,66 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   resizing: false,
-  navigationSidebarOpen: false,
-  setNavigationSidebarOpen: (nextOpen) => {
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 80,
+      L: 81,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
-  complementarySidebarOpen: false,
-  setComplementarySidebarOpen: (nextOpen) => {
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 85,
+      L: 86,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
 var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
   return {
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    toggleNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
-      navigationSidebarOpen,
-      setNavigationSidebarOpen
-    ]),
-    openNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(true), [
-      setNavigationSidebarOpen
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
     ]),
-    closeNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(false), [
-      setNavigationSidebarOpen
+    openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
     ]),
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
-    toggleComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
-      complementarySidebarOpen,
-      setComplementarySidebarOpen
-    ]),
-    openComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(true), [
-      setComplementarySidebarOpen
-    ]),
-    closeComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(false), [
-      setComplementarySidebarOpen
-    ])
+    openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState4({
-    prop: propsNavigationSidebarOpen,
-    defaultProp: defaultNavigationSidebarOpen,
-    onChange: onNavigationSidebarOpenChange
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState4({
-    prop: propsComplementarySidebarOpen,
-    defaultProp: defaultComplementarySidebarOpen,
-    onChange: onComplementarySidebarOpenChange
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
   });
-  const [resizing, setResizing] = useState6(false);
+  const [resizing, setResizing] = useState8(false);
   const resizeInterval = useRef2(null);
-  const handleResize = useCallback5(() => {
+  const handleResize = useCallback7(() => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -2163,7 +2229,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
       resizeInterval.current = null;
     }, resizeDebounce);
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [
@@ -2171,10 +2237,10 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   ]);
   return /* @__PURE__ */ React28.createElement(MainProvider, {
     ...props,
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
     resizing
   }, children);
 };
@@ -2182,7 +2248,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -2190,9 +2256,9 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   const ref = useForwardedRef(forwardedRef);
   const noopRef = useRef2(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => setOpen(false)
+    onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = useCallback5((event) => {
+  const handleKeyDown = useCallback7((event) => {
     if (event.key === "Escape") {
       event.target.closest("[data-tabster]")?.focus();
     }
@@ -2202,7 +2268,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
   return /* @__PURE__ */ React28.createElement(DialogRoot2, {
-    open,
+    open: state !== "closed",
     modal: false
   }, /* @__PURE__ */ React28.createElement(Root5, {
     ...!isLg && {
@@ -2212,24 +2278,24 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": open ? "open" : "closed",
+    "data-state": state,
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDown: handleKeyDown,
-    ...!open && {
+    ...state === "closed" && {
       inert: "true"
     },
     ref
   }, children));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: navigationSidebarOpen,
-    setOpen: setNavigationSidebarOpen,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
     resizing,
     side: "inline-start",
     ref: forwardedRef
@@ -2237,13 +2303,13 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) =
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: complementarySidebarOpen,
-    setOpen: setComplementarySidebarOpen,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
     resizing,
     side: "inline-end",
     ref: forwardedRef
@@ -2251,7 +2317,7 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -2261,8 +2327,8 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
       ...mover
     },
     ...props,
-    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
-    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
     className: tx("main.content", "main", {
       bounce,
       handlesFocus
@@ -2275,55 +2341,30 @@ var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwar
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement("div", {
     onClick: () => {
-      setNavigationSidebarOpen(false);
-      setComplementarySidebarOpen(false);
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
     },
     ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
-      inlineStartSidebarOpen: navigationSidebarOpen,
-      inlineEndSidebarOpen: complementarySidebarOpen
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
     }, classNames),
-    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
     "aria-hidden": "true",
     ref: forwardedRef
   });
 });
-var MainNotch = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = useRef2(null);
-  const ref = useComposedRefs(forwardedRef, notchElement);
-  const handleKeyDown = useCallback5((event) => {
-    switch (event.key) {
-      case "Escape":
-        props?.onKeyDown?.(event);
-        notchElement.current?.focus();
-    }
-  }, [
-    props?.onKeyDown
-  ]);
-  const mover = useLandmarkMover(handleKeyDown, "3");
-  return /* @__PURE__ */ React28.createElement("div", {
-    role: "toolbar",
-    ...mover,
-    ...props,
-    "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
-    className: tx("main.notch", "main__notch", {}, classNames),
-    ref
-  });
-});
 var Main = {
   Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar,
-  Notch: MainNotch
+  ComplementarySidebar: MainComplementarySidebar
 };
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
@@ -2389,7 +2430,7 @@ var Message = {
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
@@ -2403,7 +2444,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState7, useEffect as useEffect7 } from "react";
+import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback8, useState as useState9, useEffect as useEffect6 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -2415,7 +2456,7 @@ var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef3(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState9(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -2427,12 +2468,12 @@ var PopoverRoot = (props) => {
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback6(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback6(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback6(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback8(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback8(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
@@ -2443,7 +2484,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  useEffect7(() => {
+  useEffect6(() => {
     onCustomAnchorAdd();
     return () => onCustomAnchorRemove();
   }, [
@@ -2462,7 +2503,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
   const trigger = /* @__PURE__ */ React30.createElement(Primitive11.button, {
     type: "button",
     "aria-haspopup": "dialog",
@@ -2484,7 +2525,7 @@ var PopoverVirtualTrigger = (props) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  useEffect7(() => {
+  useEffect6(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
@@ -2532,9 +2573,9 @@ PopoverContent.displayName = CONTENT_NAME2;
 var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const contentRef = useRef3(null);
-  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+  const composedRefs = useComposedRefs(forwardedRef, contentRef);
   const isRightClickOutsideRef = useRef3(false);
-  useEffect7(() => {
+  useEffect6(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
@@ -2611,11 +2652,12 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef)
   });
 });
 var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
-  const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, classNames, ...contentProps } = props;
+  const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   useFocusGuards();
   return /* @__PURE__ */ React30.createElement(FocusScope, {
     asChild: true,
@@ -2637,6 +2679,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     id: context.contentId,
     ...popperScope,
     ...contentProps,
+    collisionPadding: safeCollisionPadding,
     className: tx("popover.content", "popover", {
       elevation
     }, classNames),
@@ -2807,11 +2850,13 @@ var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder,
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   return /* @__PURE__ */ React33.createElement(SelectPrimitive.Content, {
     ...props,
+    collisionPadding: safeCollisionPadding,
     className: tx("select.content", "select__content", {
       elevation
     }, classNames),
@@ -2917,30 +2962,32 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React34 from "react";
-var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
+import React34, { forwardRef as forwardRef26 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React34.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
       orientation
-    }, classNames)
+    }, classNames),
+    ref: forwardedRef
   });
-};
+});
 
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React35, { forwardRef as forwardRef26 } from "react";
-var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import React35, { forwardRef as forwardRef27 } from "react";
+var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
   return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
-    className: tx("tag.root", "tag", {
+    className: tx("tag.root", "dx-tag", {
       palette
     }, classNames),
+    "data-hue": palette,
     ref: forwardedRef
   });
 });
@@ -2949,16 +2996,16 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
-import React36, { forwardRef as forwardRef27 } from "react";
+import React36, { forwardRef as forwardRef28 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React36.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React36.createElement(ToastRootPrimitive, {
     ...props,
@@ -2968,7 +3015,7 @@ var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }
     elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
   return /* @__PURE__ */ React36.createElement(Root5, {
@@ -2977,7 +3024,7 @@ var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props },
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
   return /* @__PURE__ */ React36.createElement(Root5, {
@@ -2986,7 +3033,7 @@ var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
   return /* @__PURE__ */ React36.createElement(Root5, {
@@ -2995,7 +3042,7 @@ var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...p
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
   return /* @__PURE__ */ React36.createElement(Root5, {
@@ -3020,8 +3067,8 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React37, { forwardRef as forwardRef28 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+import React37, { forwardRef as forwardRef29 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Root, {
     ...props,
@@ -3029,7 +3076,7 @@ var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+var ToolbarButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React37.createElement(Button, {
@@ -3037,7 +3084,15 @@ var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggle = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React37.createElement(Toggle, {
@@ -3045,7 +3100,7 @@ var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+var ToolbarLink = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Link, {
     asChild: true
   }, /* @__PURE__ */ React37.createElement(Link, {
@@ -3053,7 +3108,7 @@ var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef29(({ classNames, children, elevation, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
@@ -3064,7 +3119,7 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
@@ -3077,26 +3132,42 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Separator4, {
-    orientation: "vertical",
-    ...props
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    ref: forwardedRef
   }));
-};
-var ToolbarExpander = () => /* @__PURE__ */ React37.createElement("div", {
-  className: "grow"
+});
+var ToolbarSeparator = /* @__PURE__ */ forwardRef29(({ variant = "line", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(Separator4, {
+    ...props,
+    ref: forwardedRef
+  })) : /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    className: "grow",
+    ref: forwardedRef
+  });
 });
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup2,
   ToggleGroupItem: ToolbarToggleGroupItem,
-  Separator: ToolbarSeparator,
-  Expander: ToolbarExpander
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
 };
 export {
   AlertDialog,
@@ -3147,6 +3218,7 @@ export {
   createDropdownMenuScope,
   createPopoverScope,
   hasIosKeyboard,
+  initialSafeArea,
   isLabel,
   toLocalizedString,
   useAvatarContext,
@@ -3156,9 +3228,11 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,
+  useSafeArea,
   useSidebars,
   useThemeContext,
   useTranslation,