@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/dist/lib/browser/{chunk-T6YPS45E.mjs → chunk-HUZZ56DW.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;
 };
 
@@ -57,7 +57,7 @@ import { useContext as useContext4 } from "react";
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { useEffect, createContext, useState as useState2, Suspense, useContext as useContext3 } from "react";
+import React, { Suspense, createContext, useContext as useContext3, useEffect, useState as useState2 } from "react";
 import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
@@ -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);
+  useViewportResize2(handleResize, deps);
   return {
     width,
     height
@@ -267,23 +267,44 @@ var Avatar = {
 };
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import { Dot } from "@phosphor-icons/react";
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React5, { forwardRef as forwardRef4 } from "react";
+import React6, { forwardRef as forwardRef5 } from "react";
 
-// src/components/Link/Link.tsx
+// 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 = 4, ...props }, forwardedRef) => {
+  var _effect = _useSignals4();
+  try {
+    const { tx } = useThemeContext();
+    const href = useIconHref(icon);
+    return /* @__PURE__ */ React4.createElement("svg", {
+      ...props,
+      className: tx("icon.root", "icon", {
+        size
+      }, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React4.createElement("use", {
+      href
+    }));
+  } finally {
+    _effect.f();
+  }
+}));
+
+// src/components/Link/Link.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React4, { forwardRef as forwardRef3 } from "react";
-var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
+import React5, { forwardRef as forwardRef4 } from "react";
+var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot3 : Primitive3.a;
-    return /* @__PURE__ */ React4.createElement(Root7, {
+    return /* @__PURE__ */ React5.createElement(Root7, {
       ...props,
       className: tx("link.root", "link", {
         variant
@@ -296,12 +317,12 @@ var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props
 });
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals5();
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot4 : Primitive4.div;
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    return /* @__PURE__ */ React6.createElement(Root7, {
       role: "navigation",
       ...props,
       className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -311,12 +332,12 @@ var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
     _effect.f();
   }
 });
-var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals5();
+var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot4 : Primitive4.ol;
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    return /* @__PURE__ */ React6.createElement(Root7, {
       role: "list",
       ...props,
       className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -326,12 +347,12 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
     _effect.f();
   }
 });
-var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals5();
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot4 : Primitive4.li;
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    return /* @__PURE__ */ React6.createElement(Root7, {
       role: "listitem",
       ...props,
       className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -341,11 +362,11 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...
     _effect.f();
   }
 });
-var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
-  var _effect = _useSignals5();
+var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
   try {
     const Root7 = asChild ? Slot4 : Link;
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    return /* @__PURE__ */ React6.createElement(Root7, {
       ...props,
       ref: forwardedRef
     });
@@ -353,12 +374,12 @@ var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forward
     _effect.f();
   }
 });
-var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals5();
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot4 : "h1";
-    return /* @__PURE__ */ React5.createElement(Root7, {
+    return /* @__PURE__ */ React6.createElement(Root7, {
       ...props,
       "aria-current": "page",
       className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -369,16 +390,16 @@ var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...p
   }
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals6();
   try {
     const { tx } = useThemeContext();
-    return /* @__PURE__ */ React5.createElement(Primitive4.span, {
+    return /* @__PURE__ */ React6.createElement(Primitive4.span, {
       role: "separator",
       "aria-hidden": "true",
       ...props,
       className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-    }, children ?? /* @__PURE__ */ React5.createElement(Dot, {
-      weight: "bold"
+    }, children ?? /* @__PURE__ */ React6.createElement(Icon, {
+      icon: "ph--dot--bold"
     }));
   } finally {
     _effect.f();
@@ -394,25 +415,25 @@ var Breadcrumb = {
 };
 
 // src/components/Buttons/Button.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+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";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React6, { forwardRef as forwardRef5, memo } from "react";
+import React7, { forwardRef as forwardRef6, memo as memo2 } from "react";
 var BUTTON_GROUP_NAME = "ButtonGroup";
 var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef5(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
-  var _effect = _useSignals6();
+var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+  var _effect = _useSignals7();
   try {
     const { inGroup } = useButtonGroupContext(BUTTON_NAME);
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
     const density = useDensityContext(propsDensity);
     const Root7 = asChild ? Slot5 : Primitive5.button;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    return /* @__PURE__ */ React7.createElement(Root7, {
       ref,
       ...props,
       "data-variant": variant,
@@ -434,20 +455,20 @@ var Button = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef5(({ classNames, chi
   }
 }));
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
-  var _effect = _useSignals6();
+var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals7();
   try {
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
     const Root7 = asChild ? Slot5 : Primitive5.div;
-    return /* @__PURE__ */ React6.createElement(Root7, {
+    return /* @__PURE__ */ React7.createElement(Root7, {
       role: "none",
       ...props,
       className: tx("button.group", "button-group", {
         elevation
       }, classNames),
       ref: forwardedRef
-    }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
+    }, /* @__PURE__ */ React7.createElement(ButtonGroupProvider, {
       inGroup: true
     }, children));
   } finally {
@@ -460,28 +481,6 @@ ButtonGroup.displayName = BUTTON_GROUP_NAME;
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import React9, { forwardRef as forwardRef8 } from "react";
 
-// src/components/Icon/Icon.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { forwardRef as forwardRef6, memo as memo2 } from "react";
-var Icon = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ icon, classNames, size, ...props }, forwardedRef) => {
-  var _effect = _useSignals7();
-  try {
-    const { tx } = useThemeContext();
-    const href = useIconHref(icon);
-    return /* @__PURE__ */ React7.createElement("svg", {
-      ...props,
-      className: tx("icon.root", "icon", {
-        size
-      }, classNames),
-      ref: forwardedRef
-    }, /* @__PURE__ */ React7.createElement("use", {
-      href
-    }));
-  } finally {
-    _effect.f();
-  }
-}));
-
 // src/components/Tooltip/Tooltip.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import { composeEventHandlers } from "@radix-ui/primitive";
@@ -1137,7 +1136,7 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, la
         iconOnly
       }, classNames),
       ref: forwardedRef
-    }, /* @__PURE__ */ React9.createElement(Icon, {
+    }, icon && /* @__PURE__ */ React9.createElement(Icon, {
       icon,
       size,
       classNames: iconClassNames
@@ -1189,7 +1188,7 @@ var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedCh
 
 // src/components/Buttons/ToggleGroup.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
+import { ToggleGroupItem as ToggleGroupItemPrimitive, ToggleGroup as ToggleGroupPrimitive } from "@radix-ui/react-toggle-group";
 import React11, { forwardRef as forwardRef10 } from "react";
 var ToggleGroup = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
   var _effect = _useSignals11();
@@ -1224,6 +1223,26 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, densit
     _effect.f();
   }
 });
+var ToggleGroupIconItem = /* @__PURE__ */ forwardRef10(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    return /* @__PURE__ */ React11.createElement(ToggleGroupItemPrimitive, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React11.createElement(IconButton, {
+      variant,
+      elevation,
+      density,
+      classNames,
+      label,
+      icon,
+      size,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
 
 // src/components/Clipboard/ClipboardProvider.tsx
 import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
@@ -1256,18 +1275,103 @@ var ClipboardProvider = ({ children }) => {
 // src/components/Clipboard/CopyButton.tsx
 import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
 import React16 from "react";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // src/components/ThemeProvider/ThemeProvider.tsx
 import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
 import { createKeyborg } from "keyborg";
-import React15, { createContext as createContext7, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React15, { createContext as createContext7, useEffect as useEffect4, useMemo as useMemo3 } from "react";
+
+// src/util/domino.ts
+import { mx as mx2 } from "@dxos/react-ui-theme";
+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;
+  }
+  text(value) {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key, value) {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  attributes(attr) {
+    Object.entries(attr).filter(([_, value]) => value !== void 0).map(([key, value]) => this._el.setAttribute(key, value));
+    return this;
+  }
+  style(styles) {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  children(...children) {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event, handler) {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build() {
+    return this._el;
+  }
+};
 
 // src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
   return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
 };
 
+// src/util/usePx.ts
+import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo2, useState as useState6 } from "react";
+var getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+var usePx = (rem) => {
+  const [fontSize, setFontSize] = useState6(() => {
+    if (typeof document !== "undefined") {
+      return getDocumentElementFontSize();
+    }
+    return 16;
+  });
+  const updateFontSize = useCallback5(() => {
+    setFontSize(getDocumentElementFontSize());
+  }, []);
+  useEffect3(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(updateFontSize);
+    resizeObserver.observe(document.documentElement);
+    const mediaQueryList = window.matchMedia("all");
+    const handleMediaChange = () => {
+      updateFontSize();
+    };
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", handleMediaChange);
+    } else {
+      mediaQueryList.addListener(handleMediaChange);
+    }
+    return () => {
+      resizeObserver.disconnect();
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", handleMediaChange);
+      } else {
+        mediaQueryList.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
+  return useMemo2(() => rem * fontSize, [
+    fontSize
+  ]);
+};
+
 // src/components/DensityProvider/DensityProvider.tsx
 import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import React13, { createContext as createContext5 } from "react";
@@ -1311,7 +1415,7 @@ var ThemeContext = /* @__PURE__ */ createContext7(void 0);
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
   var _effect = _useSignals15();
   try {
-    useEffect3(() => {
+    useEffect4(() => {
       if (document.defaultView) {
         const kb = createKeyborg(document.defaultView);
         kb.subscribe(handleInputModalityChange);
@@ -1319,7 +1423,7 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       }
     }, []);
     const safeAreaPadding = useSafeArea();
-    const contextValue = useMemo2(() => ({
+    const contextValue = useMemo3(() => ({
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard(),
@@ -1372,7 +1476,7 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
       "data-testid": "copy-invitation"
     }, /* @__PURE__ */ React16.createElement("div", {
       role: "none",
-      className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+      className: mx3("flex gap-1 items-center", isCopied && inactiveLabelStyles)
     }, /* @__PURE__ */ React16.createElement("span", {
       className: "pli-1"
     }, t("copy label")), /* @__PURE__ */ React16.createElement(Icon, {
@@ -1380,7 +1484,7 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
       size
     })), /* @__PURE__ */ React16.createElement("div", {
       role: "none",
-      className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+      className: mx3("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
     }, /* @__PURE__ */ React16.createElement("span", {
       className: "pli-1"
     }, t("copy success label")), /* @__PURE__ */ React16.createElement(Icon, {
@@ -1427,7 +1531,7 @@ var Clipboard = {
 // src/components/Dialogs/Dialog.tsx
 import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext8 } from "@radix-ui/react-context";
-import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
+import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, Root as DialogRootPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "@radix-ui/react-dialog";
 import React17, { forwardRef as forwardRef11 } from "react";
 var DialogRoot = (props) => {
   var _effect = _useSignals17();
@@ -1525,7 +1629,7 @@ var Dialog = {
 
 // src/components/Dialogs/AlertDialog.tsx
 import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
-import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
+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";
 import React18, { forwardRef as forwardRef12 } from "react";
 var AlertDialogRoot = (props) => {
@@ -1627,9 +1731,9 @@ var AlertDialog = {
 import { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
 import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef13, 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";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import React19, { forwardRef as forwardRef13, useCallback as useCallback6 } from "react";
+import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext } from "@dxos/react-input";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   var _effect = _useSignals19();
   try {
@@ -1699,7 +1803,7 @@ var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation:
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
-    const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+    const segmentClassName = useCallback6(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
       variant: "static",
       focused,
       disabled: props.disabled,
@@ -1781,7 +1885,7 @@ var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density
     _effect.f();
   }
 });
-var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals19();
   try {
     const [checked, onCheckedChange] = useControllableState2({
@@ -1827,7 +1931,7 @@ var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
     return /* @__PURE__ */ React19.createElement("input", {
       type: "checkbox",
-      className: mx3("dx-checkbox--switch dx-focus-ring", classNames),
+      className: mx4("dx-checkbox--switch dx-focus-ring", classNames),
       checked,
       onChange: (event) => {
         onCheckedChange(event.target.checked);
@@ -1860,10 +1964,9 @@ var Input = {
 
 // src/components/Lists/List.tsx
 import { useSignals as _useSignals21 } from "@preact-signals/safe-react/tracking";
-import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import React21, { forwardRef as forwardRef14 } from "react";
-import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
+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
 import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
@@ -1984,16 +2087,16 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, class
     const { tx } = useThemeContext();
     const density = useDensityContext();
     const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Icon3 = open ? CaretDown : CaretRight;
     return /* @__PURE__ */ React21.createElement(ListPrimitiveItemOpenTrigger, {
       ...props,
       className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
         density
       }, classNames),
       ref: forwardedRef
-    }, children || /* @__PURE__ */ React21.createElement(Icon3, {
-      weight: "bold",
-      className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
+    }, children || /* @__PURE__ */ React21.createElement(Icon, {
+      size: 3,
+      icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
+      classNames: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
     }));
   } finally {
     _effect.f();
@@ -2137,12 +2240,12 @@ var TreeItem = {
 
 // src/components/Lists/Treegrid.tsx
 import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
-import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
+import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React24, { forwardRef as forwardRef16 } from "react";
+import React24, { forwardRef as forwardRef16, useCallback as useCallback7 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
@@ -2153,14 +2256,43 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
   try {
     const { tx } = useThemeContext();
     const Root7 = asChild ? Slot7 : Primitive7.div;
-    const arrowNavigationAttrs = useArrowNavigationGroup({
-      axis: "vertical",
-      tabbable: false,
-      circular: true
-    });
+    const { findFirstFocusable } = useFocusFinders();
+    const handleKeyDown = useCallback7((event) => {
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp": {
+          const direction = event.key === "ArrowDown" ? "down" : "up";
+          const target = event.target;
+          const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
+          if (!ancestorWithArrowKeys) {
+            const currentRow = target.closest('[role="row"]');
+            if (currentRow) {
+              const treegrid = currentRow.closest('[role="treegrid"]');
+              if (treegrid) {
+                const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
+                const currentIndex = rows.indexOf(currentRow);
+                const nextIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
+                const targetRow = rows[nextIndex];
+                if (targetRow) {
+                  const firstFocusable = findFirstFocusable(targetRow);
+                  if (firstFocusable) {
+                    event.preventDefault();
+                    firstFocusable.focus();
+                  }
+                }
+              }
+            }
+          }
+          break;
+        }
+      }
+      props.onKeyDown?.(event);
+    }, [
+      findFirstFocusable
+    ]);
     return /* @__PURE__ */ React24.createElement(Root7, {
       role: "treegrid",
-      ...arrowNavigationAttrs,
+      onKeyDown: handleKeyDown,
       ...props,
       className: tx("treegrid.root", "treegrid", {}, classNames),
       style: {
@@ -2185,15 +2317,6 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
       onChange: propsOnOpenChange,
       defaultProp: defaultOpen
     });
-    const focusableGroupAttrs = useFocusableGroup({
-      tabBehavior: "limited"
-    });
-    const arrowGroupAttrs = useArrowNavigationGroup({
-      axis: "horizontal",
-      tabbable: false,
-      circular: false,
-      memorizeCurrent: false
-    });
     return /* @__PURE__ */ React24.createElement(TreegridRowProvider, {
       open,
       onOpenChange,
@@ -2208,16 +2331,10 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
         "aria-expanded": open,
         "aria-owns": parentOf
       },
-      tabIndex: 0,
-      ...focusableGroupAttrs,
       ...props,
       id,
       ref: forwardedRef
-    }, /* @__PURE__ */ React24.createElement("div", {
-      role: "none",
-      className: "contents",
-      ...arrowGroupAttrs
-    }, children)));
+    }, children));
   } finally {
     _effect.f();
   }
@@ -2250,17 +2367,18 @@ var Treegrid = {
 
 // src/components/Main/Main.tsx
 import { useSignals as _useSignals25 } from "@preact-signals/safe-react/tracking";
+import { useFocusableGroup } from "@fluentui/react-tabster";
 import { createContext as createContext10 } from "@radix-ui/react-context";
-import { Root as DialogRoot2, DialogContent as DialogContent2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
+import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React25, { forwardRef as forwardRef17, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState7 } from "react";
+import React25, { forwardRef as forwardRef17, useCallback as useCallback9, useEffect as useEffect6, useRef as useRef2, useState as useState8 } from "react";
 import { log } from "@dxos/log";
-import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
+import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
 
 // src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect5, useState as useState7 } from "react";
 var useSwipeToDismiss = (ref, {
   onDismiss,
   dismissThreshold = 64,
@@ -2269,22 +2387,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState6(0);
-  const [gestureStartX, setGestureStartX] = useState6(0);
-  const setIdle = useCallback6(() => {
+  const [motionState, setMotionState] = useState7(0);
+  const [gestureStartX, setGestureStartX] = useState7(0);
+  const setIdle = useCallback8(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback6(() => {
+  const setFollowing = useCallback8(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback6(({ screenX }) => {
+  const handlePointerDown = useCallback8(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -2292,7 +2410,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback6(({ screenX }) => {
+  const handlePointerMove = useCallback8(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -2316,12 +2434,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback6(() => {
+  const handlePointerUp = useCallback8(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -2330,7 +2448,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -2339,7 +2457,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -2359,7 +2477,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback7((event) => {
+  const handleKeyDown = useCallback9((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -2373,12 +2491,12 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
   }, [
     propsOnKeyDown
   ]);
-  const focusableGroupAttrs = window ? {} : {
+  const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited",
     ignoreDefaultKeydown: {
       Tab: true
     }
-  };
+  });
   return {
     onKeyDown: handleKeyDown,
     [landmarkAttr]: landmark,
@@ -2389,19 +2507,19 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
-  setNavigationSidebarState: (nextState) => {
+  setNavigationSidebarState: (_nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 82,
+      L: 92,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
   complementarySidebarState: "closed",
-  setComplementarySidebarState: (nextState) => {
+  setComplementarySidebarState: (_nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 87,
+      L: 97,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2412,31 +2530,29 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: useCallback9(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: useCallback9(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback9(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback9(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: useCallback9(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: useCallback9(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback9(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback9(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
   var _effect = _useSignals25();
   try {
-    const [isLg] = useMediaQuery("lg", {
-      ssr: false
-    });
+    const [isLg] = useMediaQuery("lg");
     const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
       prop: propsNavigationSidebarState,
       defaultProp: defaultNavigationSidebarState,
@@ -2447,9 +2563,9 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
       defaultProp: defaultComplementarySidebarState,
       onChange: onComplementarySidebarStateChange
     });
-    const [resizing, setResizing] = useState7(false);
+    const [resizing, setResizing] = useState8(false);
     const resizeInterval = useRef2(null);
-    const handleResize = useCallback7(() => {
+    const handleResize = useCallback9(() => {
       setResizing(true);
       if (resizeInterval.current) {
         clearTimeout(resizeInterval.current);
@@ -2459,7 +2575,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
         resizeInterval.current = null;
       }, resizeDebounce);
     }, []);
-    useEffect5(() => {
+    useEffect6(() => {
       window.addEventListener("resize", handleResize);
       return () => window.removeEventListener("resize", handleResize);
     }, [
@@ -2484,9 +2600,7 @@ var handleOpenAutoFocus = (event) => {
 var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   var _effect = _useSignals25();
   try {
-    const [isLg] = useMediaQuery("lg", {
-      ssr: false
-    });
+    const [isLg] = useMediaQuery("lg");
     const { tx } = useThemeContext();
     const { t } = useTranslation();
     const ref = useForwardedRef(forwardedRef);
@@ -2494,9 +2608,12 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
       onDismiss: () => onStateChange?.("closed")
     });
-    const handleKeyDown = useCallback7((event) => {
-      if (event.key === "Escape") {
-        event.target.closest("[data-tabster]")?.focus();
+    const handleKeyDown = useCallback9((event) => {
+      const focusGroupParent = event.target.closest("[data-tabster]");
+      if (event.key === "Escape" && focusGroupParent) {
+        event.preventDefault();
+        event.stopPropagation();
+        focusGroupParent.focus();
       }
       props.onKeyDown?.(event);
     }, [
@@ -2520,9 +2637,9 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
       "data-state": state,
       "data-resizing": resizing ? "true" : "false",
       className: tx("main.sidebar", "main__sidebar", {}, classNames),
-      onKeyDown: handleKeyDown,
+      onKeyDownCapture: handleKeyDown,
       ...state === "closed" && {
-        inert: "true"
+        inert: true
       },
       ref
     }, children));
@@ -2598,9 +2715,7 @@ MainContent.displayName = MAIN_NAME;
 var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals25();
   try {
-    const [isLg] = useMediaQuery("lg", {
-      ssr: false
-    });
+    const [isLg] = useMediaQuery("lg");
     const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
     return /* @__PURE__ */ React25.createElement("div", {
@@ -2638,7 +2753,7 @@ import { Slot as Slot9 } from "@radix-ui/react-slot";
 import React26, { forwardRef as forwardRef18 } from "react";
 
 // src/hooks/useSafeCollisionPadding.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var propIsNumber = (prop) => Number.isFinite(prop);
 var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
 var safePadding = (propsPadding, safePadding2, side) => {
@@ -2646,7 +2761,7 @@ var safePadding = (propsPadding, safePadding2, side) => {
 };
 var useSafeCollisionPadding = (collisionPadding) => {
   const { safeAreaPadding } = useThemeContext();
-  return useMemo3(() => ({
+  return useMemo4(() => ({
     top: safePadding(collisionPadding, safeAreaPadding, "top"),
     right: safePadding(collisionPadding, safeAreaPadding, "right"),
     bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
@@ -2669,6 +2784,7 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef18(({ classNames, children, c
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Content, {
       ...props,
+      "data-arrow-keys": "up down",
       collisionPadding: safeCollisionPadding,
       className: tx("menu.content", "menu", {
         elevation
@@ -2786,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, { useRef as useRef3, useCallback as useCallback8, forwardRef as forwardRef19, useEffect as useEffect6 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect7, useRef as useRef3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -2811,7 +2927,7 @@ var DropdownMenuRoot = (props) => {
       contentId: useId3(),
       open,
       onOpenChange: setOpen,
-      onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
+      onOpenToggle: useCallback10(() => setOpen((prevOpen) => !prevOpen), [
         setOpen
       ]),
       modal
@@ -2848,6 +2964,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) =>
       disabled,
       ...triggerProps,
       ref: composeRefs(forwardedRef, context.triggerRef),
+      "data-arrow-keys": "down",
       onPointerDown: composeEventHandlers2(props.onPointerDown, (event) => {
         if (!disabled && event.button === 0 && event.ctrlKey === false) {
           context.onOpenToggle();
@@ -2890,7 +3007,7 @@ var DropdownMenuVirtualTrigger = (props) => {
     const { __scopeDropdownMenu, virtualRef } = props;
     const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    useEffect6(() => {
+    useEffect7(() => {
       if (virtualRef.current) {
         context.triggerRef.current = virtualRef.current;
       }
@@ -2966,6 +3083,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) =>
           hasInteractedOutsideRef.current = true;
         }
       }),
+      "data-arrow-keys": "up down",
       className: tx("menu.content", "menu", {
         elevation
       }, classNames),
@@ -3076,11 +3194,13 @@ var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   var _effect = _useSignals27();
   try {
-    const { __scopeDropdownMenu, ...radioItemProps } = props;
+    const { __scopeDropdownMenu, classNames, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioItem, {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Item, {
       ...menuScope,
-      ...radioItemProps,
+      ...itemProps,
+      className: tx("menu.item", "menu__item", {}, classNames),
       ref: forwardedRef
     });
   } finally {
@@ -3334,7 +3454,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, useRef as useRef4, useCallback as useCallback9, useState as useState8, useEffect as useEffect7 } from "react";
+import React29, { forwardRef as forwardRef21, useCallback as useCallback11, useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
@@ -3348,7 +3468,7 @@ var PopoverRoot = (props) => {
     const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
     const popperScope = usePopperScope2(__scopePopover);
     const triggerRef = useRef4(null);
-    const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
+    const [hasCustomAnchor, setHasCustomAnchor] = useState9(false);
     const [open = false, setOpen] = useControllableState6({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -3360,12 +3480,12 @@ var PopoverRoot = (props) => {
       triggerRef,
       open,
       onOpenChange: setOpen,
-      onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
+      onOpenToggle: useCallback11(() => setOpen((prevOpen) => !prevOpen), [
         setOpen
       ]),
       hasCustomAnchor,
-      onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
-      onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
+      onCustomAnchorAdd: useCallback11(() => setHasCustomAnchor(true), []),
+      onCustomAnchorRemove: useCallback11(() => setHasCustomAnchor(false), []),
       modal
     }, children));
   } finally {
@@ -3381,7 +3501,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
     const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
     const popperScope = usePopperScope2(__scopePopover);
     const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-    useEffect7(() => {
+    useEffect8(() => {
       onCustomAnchorAdd();
       return () => onCustomAnchorRemove();
     }, [
@@ -3432,7 +3552,7 @@ var PopoverVirtualTrigger = (props) => {
     const { __scopePopover, virtualRef } = props;
     const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
     const popperScope = usePopperScope2(__scopePopover);
-    useEffect7(() => {
+    useEffect8(() => {
       if (virtualRef.current) {
         context.triggerRef.current = virtualRef.current;
       }
@@ -3497,7 +3617,7 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) =>
     const contentRef = useRef4(null);
     const composedRefs = useComposedRefs2(forwardedRef, contentRef);
     const isRightClickOutsideRef = useRef4(false);
-    useEffect7(() => {
+    useEffect8(() => {
       const content = contentRef.current;
       if (content) {
         return hideOthers(content);
@@ -3618,7 +3738,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
       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)",
@@ -3731,7 +3851,7 @@ var Status = /* @__PURE__ */ forwardRef22(({ classNames, children, progress = 0,
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { useSignals as _useSignals31 } from "@preact-signals/safe-react/tracking";
-import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
+import { Corner as ScrollAreaPrimitiveCorner, Root as ScrollAreaPrimitiveRoot, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Viewport as ScrollAreaPrimitiveViewport } from "@radix-ui/react-scroll-area";
 import React31, { forwardRef as forwardRef23 } from "react";
 var ScrollAreaRoot = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals31();
@@ -3809,7 +3929,6 @@ var ScrollArea = {
 
 // src/components/Select/Select.tsx
 import { useSignals as _useSignals32 } from "@preact-signals/safe-react/tracking";
-import { CaretDown as CaretDown2, CaretUp } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import React32, { forwardRef as forwardRef24 } from "react";
 var SelectRoot = SelectPrimitive.Root;
@@ -3820,7 +3939,6 @@ var SelectPortal = SelectPrimitive.Portal;
 var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder, ...props }, forwardedRef) => {
   var _effect = _useSignals32();
   try {
-    const { tx } = useThemeContext();
     return /* @__PURE__ */ React32.createElement(SelectPrimitive.Trigger, {
       asChild: true,
       ref: forwardedRef
@@ -3830,9 +3948,9 @@ var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder,
       className: "w-1 flex-1"
     }), /* @__PURE__ */ React32.createElement(SelectPrimitive.Icon, {
       asChild: true
-    }, /* @__PURE__ */ React32.createElement(CaretDown2, {
-      className: tx("select.triggerIcon", "select__trigger__icon", {}),
-      weight: "bold"
+    }, /* @__PURE__ */ React32.createElement(Icon, {
+      size: 3,
+      icon: "ph--caret-down--bold"
     }))));
   } finally {
     _effect.f();
@@ -3846,6 +3964,7 @@ var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collis
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return /* @__PURE__ */ React32.createElement(SelectPrimitive.Content, {
       ...props,
+      "data-arrow-keys": "up down",
       collisionPadding: safeCollisionPadding,
       className: tx("select.content", "select__content", {
         elevation
@@ -3865,8 +3984,9 @@ var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children
       ...props,
       className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
       ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React32.createElement(CaretUp, {
-      weight: "bold"
+    }, children ?? /* @__PURE__ */ React32.createElement(Icon, {
+      size: 3,
+      icon: "ph--caret-up--bold"
     }));
   } finally {
     _effect.f();
@@ -3880,8 +4000,9 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, childr
       ...props,
       className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
       ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React32.createElement(CaretDown2, {
-      weight: "bold"
+    }, children ?? /* @__PURE__ */ React32.createElement(Icon, {
+      size: 3,
+      icon: "ph--caret-down--bold"
     }));
   } finally {
     _effect.f();
@@ -4042,7 +4163,7 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNam
 import { useSignals as _useSignals35 } 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 { 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 { 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";
 var ToastProvider = ToastProviderPrimitive;
 var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
@@ -4145,18 +4266,27 @@ var Toast = {
 // src/components/Toolbar/Toolbar.tsx
 import { useSignals as _useSignals36 } 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) => {
+import React36, { Fragment, forwardRef as forwardRef28 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutManaged, textBlockWidth: textBlockWidthParam, disabled, ...props }, forwardedRef) => {
   var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
+    const InnerRoot = textBlockWidthParam ? "div" : Fragment;
+    const innerRootProps = textBlockWidthParam ? {
+      role: "none",
+      className: tx("toolbar.inner", "toolbar", {
+        layoutManaged
+      }, classNames)
+    } : {};
     return /* @__PURE__ */ React36.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__ */ React36.createElement(InnerRoot, innerRootProps, children));
   } finally {
     _effect.f();
   }
@@ -4316,13 +4446,13 @@ export {
   AnchoredOverflow,
   useAvatarContext,
   Avatar,
+  Icon,
   Link,
   Breadcrumb,
   BUTTON_GROUP_NAME,
   useButtonGroupContext,
   Button,
   ButtonGroup,
-  Icon,
   createTooltipScope,
   useTooltipContext,
   Tooltip,
@@ -4330,8 +4460,11 @@ export {
   Toggle,
   ToggleGroup,
   ToggleGroupItem,
+  ToggleGroupIconItem,
   useClipboard,
+  Domino,
   hasIosKeyboard,
+  usePx,
   DensityContext,
   DensityProvider,
   ElevationContext,
@@ -4342,8 +4475,8 @@ export {
   Dialog,
   AlertDialog,
   Input,
-  LIST_NAME,
   LIST_ITEM_NAME,
+  LIST_NAME,
   useListContext,
   useListItemContext,
   List,
@@ -4373,4 +4506,4 @@ export {
   Toast,
   Toolbar
 };
-//# sourceMappingURL=chunk-T6YPS45E.mjs.map
+//# sourceMappingURL=chunk-HUZZ56DW.mjs.map