@dxos/react-ui 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/browser/chunk-5Y5JI6KC.mjs

@@ -0,0 +1,4355 @@
+// packages/ui/react-ui/src/hooks/useDensityContext.ts
+import { useContext as useContext6 } from "react";
+
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React2, { forwardRef } from "react";
+
+// packages/ui/react-ui/src/hooks/useElevationContext.ts
+import { useContext } from "react";
+var useElevationContext = (propsElevation) => {
+  const { elevation } = useContext(ElevationContext);
+  return propsElevation ?? elevation;
+};
+
+// packages/ui/react-ui/src/hooks/useThemeContext.ts
+import { useContext as useContext2 } from "react";
+import { raise } from "@dxos/debug";
+var useThemeContext = () => useContext2(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
+
+// packages/ui/react-ui/src/hooks/useIconHref.ts
+var ICONS_URL = "/icons.svg";
+var useIconHref = (icon) => {
+  const { noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
+  return icon ? `${url}#${icon}` : void 0;
+};
+
+// 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 { 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 { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
+var initialLng = "en-US";
+var initialNs = "dxos-common";
+var initialDtLocale = dtLocaleEnUs;
+var isLabel = (o) => typeof o === "string" || Array.isArray(o) && o.length === 2 && typeof o[0] === "string" && !!o[1] && typeof o[1] === "object" && "ns" in o[1] && typeof o[1].ns === "string";
+var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
+var resources = {
+  [initialLng]: {
+    [initialNs]: {
+      "loading translations": "Loading translations\u2026"
+    }
+  }
+};
+void i18Next.use(initReactI18next).init({
+  resources,
+  lng: initialLng,
+  defaultNS: initialNs,
+  interpolation: {
+    escapeValue: false
+  }
+});
+var TranslationsContext = /* @__PURE__ */ createContext({
+  appNs: initialNs,
+  dtLocale: initialDtLocale
+});
+var useTranslation = (...args) => {
+  const result = useI18NextTranslation(...args);
+  const { dtLocale } = useContext3(TranslationsContext);
+  return {
+    ...result,
+    dtLocale
+  };
+};
+var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
+  var _effect = _useSignals();
+  try {
+    const [loaded, setLoaded] = useState2(false);
+    useEffect(() => {
+      setLoaded(false);
+      if (resourceExtensions && resourceExtensions.length) {
+        resourceExtensions.forEach((resource) => {
+          Object.keys(resource).forEach((language) => {
+            Object.keys(resource[language]).forEach((ns) => {
+              i18Next.addResourceBundle(language, ns, resource[language][ns]);
+            });
+          });
+        });
+      }
+      setLoaded(true);
+    }, [
+      resourceExtensions
+    ]);
+    return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
+      value: {
+        appNs: appNs ?? initialNs,
+        dtLocale: dtLocale ?? initialDtLocale
+      }
+    }, /* @__PURE__ */ React.createElement(Suspense, {
+      fallback
+    }, loaded ? children : fallback));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/src/hooks/useTranslationsContext.ts
+var useTranslationsContext = () => useContext4(TranslationsContext);
+
+// packages/ui/react-ui/src/hooks/useVisualViewport.ts
+import { useCallback as useCallback2, useState as useState3 } from "react";
+import { useResize as useResize2 } from "@dxos/react-hooks";
+var useVisualViewport = (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
+  };
+};
+
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
+var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot : Primitive.div;
+    return /* @__PURE__ */ React2.createElement(Root7, {
+      role: "none",
+      ...props,
+      className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot : Primitive.div;
+    return /* @__PURE__ */ React2.createElement(Root7, {
+      role: "none",
+      ...props,
+      className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var AnchoredOverflow = {
+  Root: AnchoredOverflowRoot,
+  Anchor: AnchoredOverflowAnchor
+};
+
+// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import "@dxos/lit-ui/dx-avatar.pcss";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React3, { forwardRef as forwardRef2 } from "react";
+import { DxAvatar } from "@dxos/lit-ui/react";
+import { useId } from "@dxos/react-hooks";
+import { mx } from "@dxos/react-ui-theme";
+var AVATAR_NAME = "Avatar";
+var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
+var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
+  var _effect = _useSignals3();
+  try {
+    const labelId = useId("avatar__label", propsLabelId);
+    const descriptionId = useId("avatar__description", propsDescriptionId);
+    return /* @__PURE__ */ React3.createElement(AvatarProvider, {
+      labelId,
+      descriptionId
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    const href = useIconHref(icon);
+    const { labelId, descriptionId } = useAvatarContext("AvatarContent");
+    return /* @__PURE__ */ React3.createElement(DxAvatar, {
+      ...props,
+      icon: href,
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId,
+      rootClassName: mx(classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    const Root7 = asChild ? Slot2 : Primitive2.span;
+    const { tx } = useThemeContext();
+    const { labelId } = useAvatarContext("AvatarLabel");
+    return /* @__PURE__ */ React3.createElement(Root7, {
+      ...props,
+      id: labelId,
+      ref: forwardedRef,
+      className: tx("avatar.label", "avatar__label", {
+        srOnly
+      }, classNames)
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    const Root7 = asChild ? Slot2 : Primitive2.span;
+    const { tx } = useThemeContext();
+    const { descriptionId } = useAvatarContext("AvatarDescription");
+    return /* @__PURE__ */ React3.createElement(Root7, {
+      ...props,
+      id: descriptionId,
+      ref: forwardedRef,
+      className: tx("avatar.description", "avatar__description", {
+        srOnly
+      }, classNames)
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Avatar = {
+  Root: AvatarRoot,
+  Content: AvatarContent,
+  Label: AvatarLabel,
+  Description: AvatarDescription
+};
+
+// packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import { Dot } from "@phosphor-icons/react";
+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";
+
+// packages/ui/react-ui/src/components/Link/Link.tsx
+import { useSignals as _useSignals4 } 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();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot3 : Primitive3.a;
+    return /* @__PURE__ */ React4.createElement(Root7, {
+      ...props,
+      className: tx("link.root", "link", {
+        variant
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot4 : Primitive4.div;
+    return /* @__PURE__ */ React5.createElement(Root7, {
+      role: "navigation",
+      ...props,
+      className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot4 : Primitive4.ol;
+    return /* @__PURE__ */ React5.createElement(Root7, {
+      role: "list",
+      ...props,
+      className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot4 : Primitive4.li;
+    return /* @__PURE__ */ React5.createElement(Root7, {
+      role: "listitem",
+      ...props,
+      className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
+  try {
+    const Root7 = asChild ? Slot4 : Link;
+    return /* @__PURE__ */ React5.createElement(Root7, {
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals5();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot4 : "h1";
+    return /* @__PURE__ */ React5.createElement(Root7, {
+      ...props,
+      "aria-current": "page",
+      className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
+  var _effect = _useSignals5();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React5.createElement(Primitive4.span, {
+      role: "separator",
+      "aria-hidden": "true",
+      ...props,
+      className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
+    }, children ?? /* @__PURE__ */ React5.createElement(Dot, {
+      weight: "bold"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  ListItem: BreadcrumbListItem,
+  Link: BreadcrumbLink,
+  Current: BreadcrumbCurrent,
+  Separator: BreadcrumbSeparator
+};
+
+// packages/ui/react-ui/src/components/Buttons/Button.tsx
+import { useSignals as _useSignals6 } 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";
+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();
+  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, {
+      ref,
+      ...props,
+      "data-variant": variant,
+      "data-density": density,
+      "data-props": inGroup ? "grouped" : "",
+      className: tx("button.root", "button", {
+        variant,
+        inGroup,
+        disabled: props.disabled,
+        density,
+        elevation
+      }, classNames),
+      ...props.disabled && {
+        disabled: true
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+}));
+Button.displayName = BUTTON_NAME;
+var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals6();
+  try {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext(propsElevation);
+    const Root7 = asChild ? Slot5 : Primitive5.div;
+    return /* @__PURE__ */ React6.createElement(Root7, {
+      role: "none",
+      ...props,
+      className: tx("button.group", "button-group", {
+        elevation
+      }, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
+      inGroup: true
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+ButtonGroup.displayName = BUTTON_GROUP_NAME;
+
+// packages/ui/react-ui/src/components/Buttons/IconButton.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import React9, { forwardRef as forwardRef8 } from "react";
+
+// packages/ui/react-ui/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();
+  }
+}));
+
+// packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope } from "@radix-ui/react-context";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { useId as useId2 } from "@radix-ui/react-id";
+import * as PopperPrimitive from "@radix-ui/react-popper";
+import { createPopperScope } from "@radix-ui/react-popper";
+import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
+import { Presence } from "@radix-ui/react-presence";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slottable } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
+import React8, { forwardRef as forwardRef7, useCallback as useCallback3, useEffect as useEffect2, useMemo, useRef, useState as useState4 } from "react";
+var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
+  createPopperScope
+]);
+var usePopperScope = createPopperScope();
+var DEFAULT_DELAY_DURATION = 700;
+var TOOLTIP_OPEN = "tooltip.open";
+var TOOLTIP_NAME = "Tooltip";
+var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
+var TooltipProvider = (props) => {
+  var _effect = _useSignals8();
+  try {
+    const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
+    const isOpenDelayedRef = useRef(true);
+    const isPointerInTransitRef = useRef(false);
+    const skipDelayTimerRef = useRef(0);
+    useEffect2(() => {
+      const skipDelayTimer = skipDelayTimerRef.current;
+      return () => window.clearTimeout(skipDelayTimer);
+    }, []);
+    const popperScope = usePopperScope(__scopeTooltip);
+    const [trigger, setTrigger] = useState4(null);
+    const [content, setContent] = useState4("");
+    const [side, setSide] = useState4(void 0);
+    const triggerRef = useRef(trigger);
+    const handleTriggerChange = useCallback3((nextTrigger) => {
+      setTrigger(nextTrigger);
+      triggerRef.current = nextTrigger;
+      setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
+      setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
+    }, []);
+    const contentId = useId2();
+    const openTimerRef = useRef(0);
+    const wasOpenDelayedRef = useRef(false);
+    const handleOpenChange = useCallback3((open2) => {
+      if (open2) {
+        window.clearTimeout(skipDelayTimerRef.current);
+        isOpenDelayedRef.current = false;
+        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+      } else {
+        window.clearTimeout(skipDelayTimerRef.current);
+        skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
+      }
+      onOpenChange?.(open2);
+    }, [
+      skipDelayDuration,
+      onOpenChange
+    ]);
+    const [open = false, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: handleOpenChange
+    });
+    const stateAttribute = useMemo(() => {
+      return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
+    }, [
+      open
+    ]);
+    const handleOpen = useCallback3(() => {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = 0;
+      wasOpenDelayedRef.current = false;
+      setOpen(true);
+    }, [
+      setOpen
+    ]);
+    const handleClose = useCallback3(() => {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = 0;
+      setOpen(false);
+    }, [
+      setOpen
+    ]);
+    const handleDelayedOpen = useCallback3(() => {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = window.setTimeout(() => {
+        wasOpenDelayedRef.current = true;
+        setOpen(true);
+        openTimerRef.current = 0;
+      }, delayDuration);
+    }, [
+      delayDuration,
+      setOpen
+    ]);
+    useEffect2(() => {
+      return () => {
+        if (openTimerRef.current) {
+          window.clearTimeout(openTimerRef.current);
+          openTimerRef.current = 0;
+        }
+      };
+    }, []);
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    return /* @__PURE__ */ React8.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React8.createElement(TooltipContextProvider, {
+      scope: __scopeTooltip,
+      contentId,
+      open,
+      stateAttribute,
+      trigger,
+      onTriggerChange: handleTriggerChange,
+      onTriggerEnter: useCallback3(() => {
+        if (isOpenDelayedRef.current) {
+          handleDelayedOpen();
+        } else {
+          handleOpen();
+        }
+      }, [
+        isOpenDelayedRef,
+        handleDelayedOpen,
+        handleOpen
+      ]),
+      onTriggerLeave: useCallback3(() => {
+        if (disableHoverableContent) {
+          handleClose();
+        } else {
+          window.clearTimeout(openTimerRef.current);
+          openTimerRef.current = 0;
+        }
+      }, [
+        handleClose,
+        disableHoverableContent
+      ]),
+      onOpen: handleOpen,
+      onClose: handleClose,
+      disableHoverableContent,
+      isPointerInTransitRef,
+      onPointerInTransitChange: useCallback3((inTransit) => {
+        isPointerInTransitRef.current = inTransit;
+      }, [])
+    }, /* @__PURE__ */ React8.createElement(TooltipContent, {
+      side,
+      className: tx("tooltip.content", "tooltip", {
+        elevation
+      })
+    }, content, /* @__PURE__ */ React8.createElement(TooltipArrow, {
+      className: tx("tooltip.arrow", "tooltip__arrow")
+    })), /* @__PURE__ */ React8.createElement(TooltipVirtualTrigger, {
+      virtualRef: triggerRef
+    }), children));
+  } finally {
+    _effect.f();
+  }
+};
+TooltipProvider.displayName = TOOLTIP_NAME;
+var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
+  var _effect = _useSignals8();
+  try {
+    const popperScope = usePopperScope(__scopeTooltip);
+    return /* @__PURE__ */ React8.createElement(PopperPrimitive.Anchor, {
+      asChild: true,
+      ...popperScope,
+      virtualRef
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var TRIGGER_NAME = "TooltipTrigger";
+var TooltipTrigger = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
+  var _effect = _useSignals8();
+  try {
+    const {
+      __scopeTooltip,
+      onInteract,
+      // TODO(thure): Pass `delayDuration` into the context.
+      delayDuration: _delayDuration,
+      side,
+      content,
+      ...triggerProps
+    } = props;
+    const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
+    const ref = useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const isPointerDownRef = useRef(false);
+    const hasPointerMoveOpenedRef = useRef(false);
+    const handlePointerUp = useCallback3(() => isPointerDownRef.current = false, []);
+    useEffect2(() => {
+      return () => document.removeEventListener("pointerup", handlePointerUp);
+    }, [
+      handlePointerUp
+    ]);
+    return /* @__PURE__ */ React8.createElement(Primitive6.button, {
+      // We purposefully avoid adding `type=button` here because tooltip triggers are also
+      // commonly anchors and the anchor `type` attribute signifies MIME type.
+      "aria-describedby": context.open ? context.contentId : void 0,
+      "data-state": context.stateAttribute,
+      "data-tooltip-content": content,
+      "data-tooltip-side": side,
+      ...triggerProps,
+      ref: composedRefs,
+      onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+        if (event.pointerType === "touch") {
+          return;
+        }
+        if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
+          onInteract?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          context.onTriggerChange(ref.current);
+          context.onTriggerEnter();
+          hasPointerMoveOpenedRef.current = true;
+        }
+      }),
+      onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
+        context.onTriggerLeave();
+        hasPointerMoveOpenedRef.current = false;
+      }),
+      onPointerDown: composeEventHandlers(props.onPointerDown, () => {
+        if (context.open) {
+          context.onClose();
+        }
+        isPointerDownRef.current = true;
+        document.addEventListener("pointerup", handlePointerUp, {
+          once: true
+        });
+      }),
+      onFocus: props.onFocus,
+      onBlur: composeEventHandlers(props.onBlur, context.onClose),
+      onClick: composeEventHandlers(props.onClick, context.onClose)
+    });
+  } finally {
+    _effect.f();
+  }
+});
+TooltipTrigger.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "TooltipPortal";
+var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+var TooltipPortal = (props) => {
+  var _effect = _useSignals8();
+  try {
+    const { __scopeTooltip, forceMount, children, container } = props;
+    const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+    return /* @__PURE__ */ React8.createElement(PortalProvider, {
+      scope: __scopeTooltip,
+      forceMount
+    }, /* @__PURE__ */ React8.createElement(Presence, {
+      present: forceMount || context.open
+    }, /* @__PURE__ */ React8.createElement(PortalPrimitive, {
+      asChild: true,
+      container
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+TooltipPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "TooltipContent";
+var TooltipContent = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
+  var _effect = _useSignals8();
+  try {
+    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
+    const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
+    const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+    return /* @__PURE__ */ React8.createElement(Presence, {
+      present: forceMount || context.open
+    }, context.disableHoverableContent ? /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
+      side,
+      ...contentProps,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ React8.createElement(TooltipContentHoverable, {
+      side,
+      ...contentProps,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var TooltipContentHoverable = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
+  var _effect = _useSignals8();
+  try {
+    const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+    const ref = useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const [pointerGraceArea, setPointerGraceArea] = useState4(null);
+    const { trigger, onClose } = context;
+    const content = ref.current;
+    const { onPointerInTransitChange } = context;
+    const handleRemoveGraceArea = useCallback3(() => {
+      setPointerGraceArea(null);
+      onPointerInTransitChange(false);
+    }, [
+      onPointerInTransitChange
+    ]);
+    const handleCreateGraceArea = useCallback3((event, hoverTarget) => {
+      const currentTarget = event.currentTarget;
+      const exitPoint = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+      const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+      const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+      const graceArea = getHull([
+        ...paddedExitPoints,
+        ...hoverTargetPoints
+      ]);
+      setPointerGraceArea(graceArea);
+      onPointerInTransitChange(true);
+    }, [
+      onPointerInTransitChange
+    ]);
+    useEffect2(() => {
+      return () => handleRemoveGraceArea();
+    }, [
+      handleRemoveGraceArea
+    ]);
+    useEffect2(() => {
+      if (trigger && content) {
+        const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
+        const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
+        trigger.addEventListener("pointerleave", handleTriggerLeave);
+        content.addEventListener("pointerleave", handleContentLeave);
+        return () => {
+          trigger.removeEventListener("pointerleave", handleTriggerLeave);
+          content.removeEventListener("pointerleave", handleContentLeave);
+        };
+      }
+    }, [
+      trigger,
+      content,
+      handleCreateGraceArea,
+      handleRemoveGraceArea
+    ]);
+    useEffect2(() => {
+      if (pointerGraceArea) {
+        const handleTrackPointerGrace = (event) => {
+          const target = event.target;
+          const pointerPosition = {
+            x: event.clientX,
+            y: event.clientY
+          };
+          const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
+          const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
+          if (hasEnteredTarget) {
+            handleRemoveGraceArea();
+          } else if (isPointerOutsideGraceArea) {
+            handleRemoveGraceArea();
+            onClose();
+          }
+        };
+        document.addEventListener("pointermove", handleTrackPointerGrace);
+        return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
+      }
+    }, [
+      trigger,
+      content,
+      pointerGraceArea,
+      onClose,
+      handleRemoveGraceArea
+    ]);
+    return /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
+      ...props,
+      ref: composedRefs
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
+  isInside: false
+});
+var TooltipContentImpl = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
+  var _effect = _useSignals8();
+  try {
+    const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
+    const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
+    const popperScope = usePopperScope(__scopeTooltip);
+    const { onClose } = context;
+    useEffect2(() => {
+      document.addEventListener(TOOLTIP_OPEN, onClose);
+      return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
+    }, [
+      onClose
+    ]);
+    useEffect2(() => {
+      if (context.trigger) {
+        const handleScroll = (event) => {
+          const target = event.target;
+          if (target?.contains(context.trigger)) {
+            onClose();
+          }
+        };
+        window.addEventListener("scroll", handleScroll, {
+          capture: true
+        });
+        return () => window.removeEventListener("scroll", handleScroll, {
+          capture: true
+        });
+      }
+    }, [
+      context.trigger,
+      onClose
+    ]);
+    return /* @__PURE__ */ React8.createElement(DismissableLayer, {
+      asChild: true,
+      disableOutsidePointerEvents: false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside: (event) => event.preventDefault(),
+      onDismiss: onClose
+    }, /* @__PURE__ */ React8.createElement(PopperPrimitive.Content, {
+      "data-state": context.stateAttribute,
+      ...popperScope,
+      ...contentProps,
+      ref: forwardedRef,
+      style: {
+        ...contentProps.style,
+        // re-namespace exposed content custom properties
+        ...{
+          "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    }, /* @__PURE__ */ React8.createElement(Slottable, null, children), /* @__PURE__ */ React8.createElement(VisuallyHiddenContentContextProvider, {
+      scope: __scopeTooltip,
+      isInside: true
+    }, /* @__PURE__ */ React8.createElement(VisuallyHiddenPrimitive.Root, {
+      id: context.contentId,
+      role: "tooltip"
+    }, ariaLabel || children))));
+  } finally {
+    _effect.f();
+  }
+});
+TooltipContent.displayName = CONTENT_NAME;
+var ARROW_NAME = "TooltipArrow";
+var TooltipArrow = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
+  var _effect = _useSignals8();
+  try {
+    const { __scopeTooltip, ...arrowProps } = props;
+    const popperScope = usePopperScope(__scopeTooltip);
+    const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
+    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React8.createElement(PopperPrimitive.Arrow, {
+      ...popperScope,
+      ...arrowProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+TooltipArrow.displayName = ARROW_NAME;
+var getExitSideFromRect = (point, rect) => {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return "left";
+    case right:
+      return "right";
+    case top:
+      return "top";
+    case bottom:
+      return "bottom";
+    default:
+      throw new Error("unreachable");
+  }
+};
+var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
+  const paddedExitPoints = [];
+  switch (exitSide) {
+    case "top":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "bottom":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      });
+      break;
+    case "left":
+      paddedExitPoints.push({
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "right":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      });
+      break;
+  }
+  return paddedExitPoints;
+};
+var getPointsFromRect = (rect) => {
+  const { top, right, bottom, left } = rect;
+  return [
+    {
+      x: left,
+      y: top
+    },
+    {
+      x: right,
+      y: top
+    },
+    {
+      x: right,
+      y: bottom
+    },
+    {
+      x: left,
+      y: bottom
+    }
+  ];
+};
+var isPointInPolygon = (point, polygon) => {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) {
+      inside = !inside;
+    }
+  }
+  return inside;
+};
+var getHull = (points) => {
+  const newPoints = points.slice();
+  newPoints.sort((a, b) => {
+    if (a.x < b.x) {
+      return -1;
+    } else if (a.x > b.x) {
+      return 1;
+    } else if (a.y < b.y) {
+      return -1;
+    } else if (a.y > b.y) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  return getHullPresorted(newPoints);
+};
+var getHullPresorted = (points) => {
+  if (points.length <= 1) {
+    return points.slice();
+  }
+  const upperHull = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    while (upperHull.length >= 2) {
+      const q = upperHull[upperHull.length - 1];
+      const r = upperHull[upperHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
+        upperHull.pop();
+      } else {
+        break;
+      }
+    }
+    upperHull.push(p);
+  }
+  upperHull.pop();
+  const lowerHull = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (lowerHull.length >= 2) {
+      const q = lowerHull[lowerHull.length - 1];
+      const r = lowerHull[lowerHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
+        lowerHull.pop();
+      } else {
+        break;
+      }
+    }
+    lowerHull.push(p);
+  }
+  lowerHull.pop();
+  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
+    return upperHull;
+  } else {
+    return upperHull.concat(lowerHull);
+  }
+};
+var Tooltip = {
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger
+};
+
+// packages/ui/react-ui/src/components/Buttons/IconButton.tsx
+var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    if (noTooltip) {
+      return /* @__PURE__ */ React9.createElement(LabelledIconButton, {
+        ...props,
+        ref: forwardedRef
+      });
+    }
+    return /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
+      asChild: true,
+      content: props.label,
+      side: tooltipSide
+    }, /* @__PURE__ */ React9.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React9.createElement(Button, {
+      ...props,
+      classNames: tx("iconButton.root", "iconButton", {}, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React9.createElement(Icon, {
+      icon,
+      size,
+      classNames: iconClassNames
+    }), /* @__PURE__ */ React9.createElement("span", {
+      className: iconOnly ? "sr-only" : void 0
+    }, label), caretDown && /* @__PURE__ */ React9.createElement(Icon, {
+      size: 3,
+      icon: "ph--caret-down--bold"
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
+      ...props,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/src/components/Buttons/Toggle.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
+import React10, { forwardRef as forwardRef9 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  var _effect = _useSignals10();
+  try {
+    return /* @__PURE__ */ React10.createElement(TogglePrimitive, {
+      defaultPressed,
+      pressed,
+      onPressedChange,
+      asChild: true
+    }, /* @__PURE__ */ React10.createElement(Button, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/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 React11, { forwardRef as forwardRef10 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    return /* @__PURE__ */ React11.createElement(ToggleGroupPrimitive, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React11.createElement(ButtonGroup, {
+      classNames,
+      children,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    return /* @__PURE__ */ React11.createElement(ToggleGroupItemPrimitive, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React11.createElement(Button, {
+      variant,
+      elevation,
+      density,
+      classNames,
+      children,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
+import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import React12, { createContext as createContext4, useCallback as useCallback4, useContext as useContext5, useState as useState5 } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext4({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboard = () => useContext5(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  var _effect = _useSignals12();
+  try {
+    const [textValue, setInternalTextValue] = useState5("");
+    const setTextValue = useCallback4(async (nextValue) => {
+      await navigator.clipboard.writeText(nextValue);
+      return setInternalTextValue(nextValue);
+    }, []);
+    return /* @__PURE__ */ React12.createElement(ClipboardContext.Provider, {
+      value: {
+        textValue,
+        setTextValue
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/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";
+
+// packages/ui/react-ui/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";
+
+// packages/ui/react-ui/src/util/hasIosKeyboard.ts
+var hasIosKeyboard = () => {
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};
+
+// packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
+import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
+import React13, { createContext as createContext5 } from "react";
+var DensityContext = /* @__PURE__ */ createContext5({
+  density: "fine"
+});
+var DensityProvider = ({ density, children }) => {
+  var _effect = _useSignals13();
+  try {
+    return /* @__PURE__ */ React13.createElement(DensityContext.Provider, {
+      value: {
+        density
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
+import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
+import React14, { createContext as createContext6 } from "react";
+var ElevationContext = /* @__PURE__ */ createContext6({
+  elevation: "base"
+});
+var ElevationProvider = ({ elevation, children }) => {
+  var _effect = _useSignals14();
+  try {
+    return /* @__PURE__ */ React14.createElement(ElevationContext.Provider, {
+      value: {
+        elevation
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+
+// 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 }) => {
+  var _effect = _useSignals15();
+  try {
+    useEffect3(() => {
+      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__ */ React15.createElement(ThemeContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React15.createElement(TranslationsProvider, {
+      fallback,
+      resourceExtensions,
+      appNs
+    }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
+      elevation: "base"
+    }, /* @__PURE__ */ React15.createElement(DensityProvider, {
+      density: rootDensity
+    }, children))));
+  } finally {
+    _effect.f();
+  }
+};
+var handleInputModalityChange = (isUsingKeyboard) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute("data-is-keyboard", "true");
+  } else {
+    document.body.removeAttribute("data-is-keyboard");
+  }
+};
+
+// packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
+var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
+var CopyButton = ({ value, classNames, iconProps, ...props }) => {
+  var _effect = _useSignals16();
+  try {
+    const { t } = useTranslation("os");
+    const { textValue, setTextValue } = useClipboard();
+    const isCopied = textValue === value;
+    return /* @__PURE__ */ React16.createElement(Button, {
+      ...props,
+      classNames: [
+        "inline-flex flex-col justify-center",
+        classNames
+      ],
+      onClick: () => setTextValue(value),
+      "data-testid": "copy-invitation"
+    }, /* @__PURE__ */ React16.createElement("div", {
+      role: "none",
+      className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+    }, /* @__PURE__ */ React16.createElement("span", {
+      className: "pli-1"
+    }, t("copy label")), /* @__PURE__ */ React16.createElement(Icon, {
+      icon: "ph--copy--regular",
+      size: 5,
+      ...iconProps
+    })), /* @__PURE__ */ React16.createElement("div", {
+      role: "none",
+      className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+    }, /* @__PURE__ */ React16.createElement("span", {
+      className: "pli-1"
+    }, t("copy success label")), /* @__PURE__ */ React16.createElement(Icon, {
+      icon: "ph--check--regular",
+      size: 5,
+      ...iconProps
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, iconProps, variant, ...props }) => {
+  var _effect = _useSignals16();
+  try {
+    const { t } = useTranslation("os");
+    const { textValue, setTextValue } = useClipboard();
+    const isCopied = textValue === value;
+    const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
+    const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
+    return /* @__PURE__ */ React16.createElement(IconButton, {
+      iconOnly: true,
+      label,
+      icon: "ph--copy--regular",
+      size: 5,
+      variant,
+      classNames: [
+        "inline-flex flex-col justify-center",
+        classNames
+      ],
+      onClick: () => setTextValue(value).then(onOpen),
+      "data-testid": "copy-invitation"
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/src/components/Clipboard/index.ts
+var Clipboard = {
+  Button: CopyButton,
+  IconButton: CopyButtonIconOnly,
+  Provider: ClipboardProvider
+};
+
+// packages/ui/react-ui/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 React17, { forwardRef as forwardRef11 } from "react";
+var DialogRoot = (props) => {
+  var _effect = _useSignals17();
+  try {
+    return /* @__PURE__ */ React17.createElement(ElevationProvider, {
+      elevation: "dialog"
+    }, /* @__PURE__ */ React17.createElement(DialogRootPrimitive, props));
+  } finally {
+    _effect.f();
+  }
+};
+var DialogTrigger = DialogTriggerPrimitive;
+var DialogPortal = DialogPortalPrimitive;
+var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals17();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React17.createElement(DialogTitlePrimitive, {
+      ...props,
+      className: tx("dialog.title", "dialog__title", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals17();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React17.createElement(DialogDescriptionPrimitive, {
+      ...props,
+      className: tx("dialog.description", "dialog__description", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var DialogClose = DialogClosePrimitive;
+var DIALOG_OVERLAY_NAME = "DialogOverlay";
+var DIALOG_CONTENT_NAME = "DialogContent";
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {});
+var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  var _effect = _useSignals17();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React17.createElement(DialogOverlayPrimitive, {
+      ...props,
+      className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
+      ref: forwardedRef,
+      "data-block-align": blockAlign
+    }, /* @__PURE__ */ React17.createElement(OverlayLayoutProvider, {
+      inOverlayLayout: true
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  var _effect = _useSignals17();
+  try {
+    const { tx } = useThemeContext();
+    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+    return /* @__PURE__ */ React17.createElement(DialogContentPrimitive, {
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      "aria-describedby": void 0,
+      ...props,
+      className: tx("dialog.content", "dialog", {
+        inOverlayLayout: propsInOverlayLayout || inOverlayLayout
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+};
+
+// packages/ui/react-ui/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 { createContext as createContext9 } from "@radix-ui/react-context";
+import React18, { forwardRef as forwardRef12 } from "react";
+var AlertDialogRoot = (props) => {
+  var _effect = _useSignals18();
+  try {
+    return /* @__PURE__ */ React18.createElement(ElevationProvider, {
+      elevation: "dialog"
+    }, /* @__PURE__ */ React18.createElement(AlertDialogRootPrimitive, props));
+  } finally {
+    _effect.f();
+  }
+};
+var AlertDialogTrigger = AlertDialogTriggerPrimitive;
+var AlertDialogPortal = AlertDialogPortalPrimitive;
+var AlertDialogCancel = AlertDialogCancelPrimitive;
+var AlertDialogAction = AlertDialogActionPrimitive;
+var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals18();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React18.createElement(AlertDialogTitlePrimitive, {
+      ...props,
+      className: tx("dialog.title", "dialog--alert__title", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals18();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React18.createElement(AlertDialogDescriptionPrimitive, {
+      ...props,
+      className: tx("dialog.description", "dialog--alert__description", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
+var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext9(ALERT_DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  var _effect = _useSignals18();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React18.createElement(AlertDialogOverlayPrimitive, {
+      ...props,
+      className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+      ref: forwardedRef,
+      "data-block-align": blockAlign
+    }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider2, {
+      inOverlayLayout: true
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals18();
+  try {
+    const { tx } = useThemeContext();
+    const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
+    return /* @__PURE__ */ React18.createElement(AlertDialogContentPrimitive, {
+      ...props,
+      className: tx("dialog.content", "dialog--alert", {
+        inOverlayLayout
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+var AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+};
+
+// packages/ui/react-ui/src/components/Input/Input.tsx
+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";
+var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React19.createElement(LabelPrimitive, {
+      ...props,
+      className: tx("input.label", "input__label", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React19.createElement(DescriptionPrimitive, {
+      ...props,
+      className: tx("input.description", "input__description", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { tx } = useThemeContext();
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+    return /* @__PURE__ */ React19.createElement(ValidationPrimitive, {
+      ...props,
+      className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
+        srOnly,
+        validationValence
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React19.createElement(DescriptionAndValidationPrimitive, {
+      ...props,
+      className: tx("input.descriptionAndValidation", "input__description-and-validation", {
+        srOnly
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+    const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+      variant: "static",
+      focused,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, propsSegmentClassName), [
+      tx,
+      props.disabled,
+      elevation,
+      propsElevation,
+      density
+    ]);
+    return /* @__PURE__ */ React19.createElement(PinInputPrimitive, {
+      ...props,
+      segmentClassName,
+      ...props.autoFocus && !hasIosKeyboard2 && {
+        autoFocus: true
+      },
+      inputClassName: tx("input.inputWithSegments", "input input--pin", {
+        disabled: props.disabled
+      }, inputClassName),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+    const themeContextValue = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+    const { tx } = themeContextValue;
+    return /* @__PURE__ */ React19.createElement(TextInputPrimitive, {
+      ...props,
+      className: tx("input.input", "input", {
+        variant,
+        disabled: props.disabled,
+        density,
+        elevation,
+        validationValence
+      }, classNames),
+      ...props.autoFocus && !hasIosKeyboard2 && {
+        autoFocus: true
+      },
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+    return /* @__PURE__ */ React19.createElement(TextAreaPrimitive, {
+      ...props,
+      className: tx("input.input", "input--text-area", {
+        variant,
+        disabled: props.disabled,
+        density,
+        elevation,
+        validationValence
+      }, classNames),
+      ...props.autoFocus && !hasIosKeyboard2 && {
+        autoFocus: true
+      },
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const [checked, onCheckedChange] = useControllableState2({
+      prop: propsChecked,
+      defaultProp: propsDefaultChecked,
+      onChange: propsOnCheckedChange
+    });
+    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React19.createElement(CheckboxPrimitive, {
+      ...props,
+      checked,
+      onCheckedChange,
+      id,
+      "aria-describedby": descriptionId,
+      ...validationValence === "error" && {
+        "aria-invalid": "true",
+        "aria-errormessage": errorMessageId
+      },
+      className: tx("input.checkbox", "input--checkbox", {
+        size
+      }, "shrink-0", classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React19.createElement(Icon, {
+      icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+      classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+        size,
+        checked
+      })
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals19();
+  try {
+    const [checked, onCheckedChange] = useControllableState2({
+      prop: propsChecked,
+      defaultProp: propsDefaultChecked ?? false,
+      onChange: propsOnCheckedChange
+    });
+    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),
+      checked,
+      onChange: (event) => {
+        onCheckedChange(event.target.checked);
+      },
+      id,
+      "aria-describedby": descriptionId,
+      ...props,
+      ...validationValence === "error" && {
+        "aria-invalid": "true",
+        "aria-errormessage": errorMessageId
+      },
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Input = {
+  Root: InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label,
+  Description,
+  Validation,
+  DescriptionAndValidation
+};
+
+// packages/ui/react-ui/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";
+
+// packages/ui/react-ui/src/components/Lists/ListDropIndicator.tsx
+import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
+import React20 from "react";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
+  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  right: "right-[--line-offset] before:right-[--offset-terminal]",
+  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
+  left: "left-[--line-offset] before:left-[--offset-terminal]"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
+  var _effect = _useSignals20();
+  try {
+    const orientation = edgeToOrientationMap[edge];
+    return /* @__PURE__ */ React20.createElement("div", {
+      role: "none",
+      style: {
+        "--line-thickness": `${strokeSize}px`,
+        "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+        "--line-inset": `${lineInset}px`,
+        "--terminal-size": `${terminalSize}px`,
+        "--terminal-radius": `${terminalSize / 2}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]}`
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/src/components/Lists/List.tsx
+var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals21();
+  try {
+    const { tx } = useThemeContext();
+    const density = useDensityContext(props.density);
+    return /* @__PURE__ */ React21.createElement(DensityProvider, {
+      density
+    }, /* @__PURE__ */ React21.createElement(ListPrimitive, {
+      ...props,
+      className: tx("list.root", "list", {}, classNames),
+      ref: forwardedRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  var _effect = _useSignals21();
+  try {
+    const Root7 = asChild ? Slot6 : "div";
+    const density = useDensityContext();
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React21.createElement(Root7, {
+      ...!asChild && {
+        role: "none"
+      },
+      ...props,
+      className: tx("list.item.endcap", "list__listItem__endcap", {
+        density
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var MockListItemOpenTrigger = ({ classNames, ...props }) => {
+  var _effect = _useSignals21();
+  try {
+    const density = useDensityContext();
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React21.createElement("div", {
+      role: "none",
+      ...props,
+      className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
+        density
+      }, classNames)
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals21();
+  try {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    return /* @__PURE__ */ React21.createElement(ListPrimitiveItemHeading, {
+      ...props,
+      className: tx("list.item.heading", "list__listItem__heading", {
+        density
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals21();
+  try {
+    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", {})
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals21();
+  try {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    return /* @__PURE__ */ React21.createElement(ListPrimitiveItem, {
+      ...props,
+      className: tx("list.item.root", "list__listItem", {
+        density,
+        collapsible: props.collapsible
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var ListItem = {
+  Root: ListItemRoot,
+  Endcap: ListItemEndcap,
+  Heading: ListItemHeading,
+  OpenTrigger: ListItemOpenTrigger,
+  CollapsibleContent: ListItemCollapsibleContent,
+  MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator
+};
+
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+import { useSignals as _useSignals23 } from "@preact-signals/safe-react/tracking";
+import React23, { forwardRef as forwardRef15 } from "react";
+
+// packages/ui/react-ui/src/components/Lists/TreeDropIndicator.tsx
+import { useSignals as _useSignals22 } from "@preact-signals/safe-react/tracking";
+import React22 from "react";
+var edgeToOrientationMap2 = {
+  "reorder-above": "sibling",
+  "reorder-below": "sibling",
+  "make-child": "child",
+  reparent: "child"
+};
+var orientationStyles2 = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
+  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
+  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
+  "make-child": "border-accentSurface",
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: ""
+};
+var strokeSize2 = 2;
+var terminalSize2 = 8;
+var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
+var TreeDropIndicator = ({ instruction, gap = 0 }) => {
+  var _effect = _useSignals22();
+  try {
+    const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
+    const isBlocked = instruction.type === "instruction-blocked";
+    const desiredInstruction = isBlocked ? instruction.desired : instruction;
+    const orientation = edgeToOrientationMap2[desiredInstruction.type];
+    if (isBlocked) {
+      return null;
+    }
+    return /* @__PURE__ */ React22.createElement("div", {
+      style: {
+        "--line-thickness": `${strokeSize2}px`,
+        "--line-offset": `${lineOffset}`,
+        "--terminal-size": `${terminalSize2}px`,
+        "--terminal-radius": `${terminalSize2 / 2}px`,
+        "--negative-terminal-size": `-${terminalSize2}px`,
+        "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
+        "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
+      },
+      className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+  var _effect = _useSignals23();
+  try {
+    return /* @__PURE__ */ React23.createElement(List, {
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
+  var _effect = _useSignals23();
+  try {
+    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
+    return /* @__PURE__ */ React23.createElement(List, {
+      ...props,
+      "aria-labelledby": headingId,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+  var _effect = _useSignals23();
+  try {
+    return /* @__PURE__ */ React23.createElement(ListItem.Root, {
+      role: "treeitem",
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var TreeItemHeading = ListItem.Heading;
+var TreeItemOpenTrigger = ListItem.OpenTrigger;
+var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
+var TreeItemBody = ListItem.CollapsibleContent;
+var Tree = {
+  Root: TreeRoot,
+  Branch: TreeBranch
+};
+var TreeItem = {
+  Root: TreeItemRoot,
+  Heading: TreeItemHeading,
+  Body: TreeItemBody,
+  OpenTrigger: TreeItemOpenTrigger,
+  MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator
+};
+
+// packages/ui/react-ui/src/components/Lists/Treegrid.tsx
+import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
+import { useArrowNavigationGroup, useFocusableGroup } 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";
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var PATH_SEPARATOR = "~";
+var PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+  var _effect = _useSignals24();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot7 : Primitive7.div;
+    const arrowNavigationAttrs = useArrowNavigationGroup({
+      axis: "vertical",
+      tabbable: false,
+      circular: true
+    });
+    return /* @__PURE__ */ React24.createElement(Root7, {
+      role: "treegrid",
+      ...arrowNavigationAttrs,
+      ...props,
+      className: tx("treegrid.root", "treegrid", {}, classNames),
+      style: {
+        ...style,
+        gridTemplateColumns
+      },
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  var _effect = _useSignals24();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot7 : Primitive7.div;
+    const pathParts = id.split(PATH_SEPARATOR);
+    const level = pathParts.length - 1;
+    const [open, onOpenChange] = useControllableState3({
+      prop: propsOpen,
+      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,
+      scope: __treegridRowScope
+    }, /* @__PURE__ */ React24.createElement(Root7, {
+      role: "row",
+      "aria-level": level,
+      className: tx("treegrid.row", "treegrid__row", {
+        level
+      }, classNames),
+      ...parentOf && {
+        "aria-expanded": open,
+        "aria-owns": parentOf
+      },
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      ...props,
+      id,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React24.createElement("div", {
+      role: "none",
+      className: "contents",
+      ...arrowGroupAttrs
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+});
+var TreegridCell = /* @__PURE__ */ forwardRef16(({ classNames, children, indent, ...props }, forwardedRef) => {
+  var _effect = _useSignals24();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React24.createElement("div", {
+      role: "gridcell",
+      className: tx("treegrid.cell", "treegrid__cell", {
+        indent
+      }, classNames),
+      ...props,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+  PARENT_OF_SEPARATOR,
+  PATH_SEPARATOR,
+  createTreegridRowScope,
+  useTreegridRowContext
+};
+
+// packages/ui/react-ui/src/components/Main/Main.tsx
+import { useSignals as _useSignals25 } from "@preact-signals/safe-react/tracking";
+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 { 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 { log } from "@dxos/log";
+import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
+
+// packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+var useSwipeToDismiss = (ref, {
+  onDismiss,
+  dismissThreshold = 64,
+  debounceThreshold = 8,
+  offset = 0
+  /* side = 'inline-start' */
+}) => {
+  const $root = ref.current;
+  const [motionState, setMotionState] = useState6(0);
+  const [gestureStartX, setGestureStartX] = useState6(0);
+  const setIdle = useCallback6(() => {
+    setMotionState(0);
+    $root?.style.removeProperty("inset-inline-start");
+    $root?.style.setProperty("transition-duration", "200ms");
+  }, [
+    $root
+  ]);
+  const setFollowing = useCallback6(() => {
+    setMotionState(2);
+    $root?.style.setProperty("transition-duration", "0ms");
+  }, [
+    $root
+  ]);
+  const handlePointerDown = useCallback6(({ screenX }) => {
+    if (motionState === 0) {
+      setMotionState(1);
+      setGestureStartX(screenX);
+    }
+  }, [
+    motionState
+  ]);
+  const handlePointerMove = useCallback6(({ screenX }) => {
+    if ($root) {
+      const delta = Math.min(screenX - gestureStartX, 0);
+      switch (motionState) {
+        case 2:
+          if (Math.abs(delta) > dismissThreshold) {
+            setIdle();
+            onDismiss?.();
+          } else {
+            $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
+          }
+          break;
+        case 1:
+          if (Math.abs(delta) > debounceThreshold) {
+            setFollowing();
+          }
+          break;
+      }
+    }
+  }, [
+    $root,
+    motionState,
+    gestureStartX
+  ]);
+  const handlePointerUp = useCallback6(() => {
+    setIdle();
+  }, [
+    setIdle
+  ]);
+  useEffect4(() => {
+    $root?.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      $root?.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [
+    $root,
+    handlePointerDown
+  ]);
+  useEffect4(() => {
+    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [
+    $root,
+    handlePointerMove
+  ]);
+  useEffect4(() => {
+    $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.documentElement.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [
+    $root,
+    handlePointerUp
+  ]);
+};
+
+// packages/ui/react-ui/src/components/Main/Main.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
+var MAIN_ROOT_NAME = "MainRoot";
+var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
+var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
+var MAIN_NAME = "Main";
+var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var landmarkAttr = "data-main-landmark";
+var useLandmarkMover = (propsOnKeyDown, landmark) => {
+  const handleKeyDown = useCallback7((event) => {
+    const target = event.target;
+    if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
+      event.preventDefault();
+      const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
+      const l = landmarks.length;
+      const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
+      const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
+      document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
+    }
+    propsOnKeyDown?.(event);
+  }, [
+    propsOnKeyDown
+  ]);
+  const focusableGroupAttrs = window ? {} : {
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  };
+  return {
+    onKeyDown: handleKeyDown,
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    ...focusableGroupAttrs
+  };
+};
+var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
+  resizing: false,
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
+    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 82,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  },
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
+    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 87,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+});
+var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
+  return {
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
+    ]),
+    openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
+    ]),
+    openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback7(() => 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 [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
+      prop: propsNavigationSidebarState,
+      defaultProp: defaultNavigationSidebarState,
+      onChange: onNavigationSidebarStateChange
+    });
+    const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
+      prop: propsComplementarySidebarState,
+      defaultProp: defaultComplementarySidebarState,
+      onChange: onComplementarySidebarStateChange
+    });
+    const [resizing, setResizing] = useState7(false);
+    const resizeInterval = useRef2(null);
+    const handleResize = useCallback7(() => {
+      setResizing(true);
+      if (resizeInterval.current) {
+        clearTimeout(resizeInterval.current);
+      }
+      resizeInterval.current = setTimeout(() => {
+        setResizing(false);
+        resizeInterval.current = null;
+      }, resizeDebounce);
+    }, []);
+    useEffect5(() => {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, [
+      handleResize
+    ]);
+    return /* @__PURE__ */ React25.createElement(MainProvider, {
+      ...props,
+      navigationSidebarState,
+      setNavigationSidebarState,
+      complementarySidebarState,
+      setComplementarySidebarState,
+      resizing
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+MainRoot.displayName = MAIN_ROOT_NAME;
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
+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 { tx } = useThemeContext();
+    const { t } = useTranslation();
+    const ref = useForwardedRef(forwardedRef);
+    const noopRef = useRef2(null);
+    useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+      onDismiss: () => onStateChange?.("closed")
+    });
+    const handleKeyDown = useCallback7((event) => {
+      if (event.key === "Escape") {
+        event.target.closest("[data-tabster]")?.focus();
+      }
+      props.onKeyDown?.(event);
+    }, [
+      props.onKeyDown
+    ]);
+    const Root7 = isLg ? Primitive8.div : DialogContent2;
+    return /* @__PURE__ */ React25.createElement(DialogRoot2, {
+      open: state !== "closed",
+      "aria-label": toLocalizedString(label, t),
+      modal: false
+    }, !isLg && /* @__PURE__ */ React25.createElement(DialogTitle2, {
+      className: "sr-only"
+    }, toLocalizedString(label, t)), /* @__PURE__ */ React25.createElement(Root7, {
+      ...!isLg && {
+        forceMount: true,
+        tabIndex: -1,
+        onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+      },
+      ...props,
+      "data-side": side === "inline-end" ? "ie" : "is",
+      "data-state": state,
+      "data-resizing": resizing ? "true" : "false",
+      className: tx("main.sidebar", "main__sidebar", {}, classNames),
+      onKeyDown: handleKeyDown,
+      ...state === "closed" && {
+        inert: "true"
+      },
+      ref
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  var _effect = _useSignals25();
+  try {
+    const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+    const mover = useLandmarkMover(props.onKeyDown, "0");
+    return /* @__PURE__ */ React25.createElement(MainSidebar, {
+      ...mover,
+      ...props,
+      state: navigationSidebarState,
+      onStateChange: setNavigationSidebarState,
+      resizing,
+      side: "inline-start",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  var _effect = _useSignals25();
+  try {
+    const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+    const mover = useLandmarkMover(props.onKeyDown, "2");
+    return /* @__PURE__ */ React25.createElement(MainSidebar, {
+      ...mover,
+      ...props,
+      state: complementarySidebarState,
+      onStateChange: setComplementarySidebarState,
+      resizing,
+      side: "inline-end",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  var _effect = _useSignals25();
+  try {
+    const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot8 : role ? "div" : "main";
+    const mover = useLandmarkMover(props.onKeyDown, "1");
+    return /* @__PURE__ */ React25.createElement(Root7, {
+      role,
+      ...handlesFocus && {
+        ...mover
+      },
+      ...props,
+      "data-sidebar-inline-start-state": navigationSidebarState,
+      "data-sidebar-inline-end-state": complementarySidebarState,
+      "data-handles-focus": handlesFocus,
+      className: tx("main.content", "main", {
+        bounce,
+        handlesFocus
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+MainContent.displayName = MAIN_NAME;
+var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals25();
+  try {
+    const [isLg] = useMediaQuery("lg", {
+      ssr: false
+    });
+    const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React25.createElement("div", {
+      onClick: () => {
+        setNavigationSidebarState("collapsed");
+        setComplementarySidebarState("collapsed");
+      },
+      ...props,
+      className: tx("main.overlay", "main__overlay", {
+        isLg,
+        inlineStartSidebarOpen: navigationSidebarState,
+        inlineEndSidebarOpen: complementarySidebarState
+      }, classNames),
+      "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
+      "aria-hidden": "true",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Main = {
+  Root: MainRoot,
+  Content: MainContent,
+  Overlay: MainOverlay,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar
+};
+
+// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
+import { useSignals as _useSignals26 } from "@preact-signals/safe-react/tracking";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import React26, { forwardRef as forwardRef18 } from "react";
+
+// packages/ui/react-ui/src/hooks/useSafeCollisionPadding.ts
+import { useMemo as useMemo3 } 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 useMemo3(() => ({
+    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/Menus/ContextMenu.tsx
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef18(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Content, {
+      ...props,
+      collisionPadding: safeCollisionPadding,
+      className: tx("menu.content", "menu", {
+        elevation
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot9 : Primitive9.div;
+    return /* @__PURE__ */ React26.createElement(Root7, {
+      ...props,
+      className: tx("menu.viewport", "menu__viewport", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Arrow, {
+      ...props,
+      className: tx("menu.arrow", "menu__arrow", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Item, {
+      ...props,
+      className: tx("menu.item", "menu__item", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.CheckboxItem, {
+      ...props,
+      className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Separator, {
+      ...props,
+      className: tx("menu.separator", "menu__item", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals26();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Label, {
+      ...props,
+      className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ContextMenu2 = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel
+};
+
+// packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
+import { useSignals as _useSignals27 } from "@preact-signals/safe-react/tracking";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
+import { useId as useId3 } from "@radix-ui/react-id";
+import * as MenuPrimitive from "@radix-ui/react-menu";
+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";
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(DROPDOWN_MENU_NAME, [
+  createMenuScope
+]);
+var useMenuScope = createMenuScope();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenuRoot = (props) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const triggerRef = useRef3(null);
+    const [open = false, setOpen] = useControllableState5({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ React27.createElement(DropdownMenuProvider, {
+      scope: __scopeDropdownMenu,
+      triggerId: useId3(),
+      triggerRef,
+      contentId: useId3(),
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
+        setOpen
+      ]),
+      modal
+    }, /* @__PURE__ */ React27.createElement(MenuPrimitive.Root, {
+      ...menuScope,
+      open,
+      onOpenChange: setOpen,
+      dir,
+      modal
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME2 = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+    const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
+      asChild: true,
+      ...menuScope
+    }, /* @__PURE__ */ React27.createElement(Primitive10.button, {
+      type: "button",
+      id: context.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? context.contentId : void 0,
+      "data-state": context.open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      disabled,
+      ...triggerProps,
+      ref: composeRefs(forwardedRef, context.triggerRef),
+      onPointerDown: composeEventHandlers2(props.onPointerDown, (event) => {
+        if (!disabled && event.button === 0 && event.ctrlKey === false) {
+          context.onOpenToggle();
+          if (!context.open) {
+            event.preventDefault();
+          }
+        }
+      }),
+      onKeyDown: composeEventHandlers2(props.onKeyDown, (event) => {
+        if (disabled) {
+          return;
+        }
+        if ([
+          "Enter",
+          " "
+        ].includes(event.key)) {
+          context.onOpenToggle();
+        }
+        if (event.key === "ArrowDown") {
+          context.onOpenChange(true);
+        }
+        if ([
+          "Enter",
+          " ",
+          "ArrowDown"
+        ].includes(event.key)) {
+          event.preventDefault();
+        }
+      })
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuTrigger.displayName = TRIGGER_NAME2;
+var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
+var DropdownMenuVirtualTrigger = (props) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, virtualRef } = props;
+    const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    useEffect6(() => {
+      if (virtualRef.current) {
+        context.triggerRef.current = virtualRef.current;
+      }
+    });
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
+      ...menuScope,
+      virtualRef
+    });
+  } finally {
+    _effect.f();
+  }
+};
+DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
+var PORTAL_NAME2 = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...portalProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Portal, {
+      ...menuScope,
+      ...portalProps
+    });
+  } finally {
+    _effect.f();
+  }
+};
+DropdownMenuPortal.displayName = PORTAL_NAME2;
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot10 : Primitive10.div;
+    return /* @__PURE__ */ React27.createElement(Root7, {
+      ...props,
+      className: tx("menu.viewport", "menu__viewport", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CONTENT_NAME2 = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { tx } = useThemeContext();
+    const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
+    const elevation = useElevationContext();
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const hasInteractedOutsideRef = useRef3(false);
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Content, {
+      id: context.contentId,
+      "aria-labelledby": context.triggerId,
+      ...menuScope,
+      ...contentProps,
+      collisionPadding: safeCollisionPadding,
+      ref: forwardedRef,
+      onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
+        if (!hasInteractedOutsideRef.current) {
+          context.triggerRef.current?.focus();
+        }
+        hasInteractedOutsideRef.current = false;
+        event.preventDefault();
+      }),
+      onInteractOutside: composeEventHandlers2(props.onInteractOutside, (event) => {
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (!context.modal || isRightClick) {
+          hasInteractedOutsideRef.current = true;
+        }
+      }),
+      className: tx("menu.content", "menu", {
+        elevation
+      }, classNames),
+      style: {
+        ...props.style,
+        // re-namespace exposed content custom properties
+        ...{
+          "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuContent.displayName = CONTENT_NAME2;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...groupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Group, {
+      ...menuScope,
+      ...groupProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Label, {
+      ...menuScope,
+      ...labelProps,
+      className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Item, {
+      ...menuScope,
+      ...itemProps,
+      className: tx("menu.item", "menu__item", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.CheckboxItem, {
+      ...menuScope,
+      ...checkboxItemProps,
+      className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...radioGroupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioGroup, {
+      ...menuScope,
+      ...radioGroupProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...radioItemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioItem, {
+      ...menuScope,
+      ...radioItemProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.ItemIndicator, {
+      ...menuScope,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Separator, {
+      ...menuScope,
+      ...separatorProps,
+      className: tx("menu.separator", "menu__item", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME2 = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Arrow, {
+      ...menuScope,
+      ...arrowProps,
+      className: tx("menu.arrow", "menu__arrow", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuArrow.displayName = ARROW_NAME2;
+var DropdownMenuSub = (props) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const [open = false, setOpen] = useControllableState5({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.Sub, {
+      ...menuScope,
+      open,
+      onOpenChange: setOpen
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...subTriggerProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.SubTrigger, {
+      ...menuScope,
+      ...subTriggerProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  var _effect = _useSignals27();
+  try {
+    const { __scopeDropdownMenu, ...subContentProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ React27.createElement(MenuPrimitive.SubContent, {
+      ...menuScope,
+      ...subContentProps,
+      ref: forwardedRef,
+      style: {
+        ...props.style,
+        // re-namespace exposed content custom properties
+        ...{
+          "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    });
+  } finally {
+    _effect.f();
+  }
+});
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+var DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  VirtualTrigger: DropdownMenuVirtualTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Group: DropdownMenuGroup,
+  GroupLabel: DropdownMenuGroupLabel,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  Arrow: DropdownMenuArrow,
+  Sub: DropdownMenuSub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent
+};
+var useDropdownMenuMenuScope = useMenuScope;
+
+// packages/ui/react-ui/src/components/Message/Message.tsx
+import { useSignals as _useSignals28 } from "@preact-signals/safe-react/tracking";
+import { createContext as createContext11 } from "@radix-ui/react-context";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React28, { forwardRef as forwardRef20 } from "react";
+import { useId as useId4 } from "@dxos/react-hooks";
+var MESSAGE_NAME = "Message";
+var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
+var MessageRoot = /* @__PURE__ */ forwardRef20(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals28();
+  try {
+    const { tx } = useThemeContext();
+    const titleId = useId4("message__title", propsTitleId);
+    const descriptionId = useId4("message__description", propsDescriptionId);
+    const elevation = useElevationContext(propsElevation);
+    const Root7 = asChild ? Slot11 : Primitive11.div;
+    return /* @__PURE__ */ React28.createElement(MessageProvider, {
+      titleId,
+      descriptionId
+    }, /* @__PURE__ */ React28.createElement(Root7, {
+      ...props,
+      className: tx("message.root", "message", {
+        valence,
+        elevation
+      }, className),
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      ref: forwardedRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+MessageRoot.displayName = MESSAGE_NAME;
+var MESSAGE_TITLE_NAME = "MessageTitle";
+var MessageTitle = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals28();
+  try {
+    const { tx } = useThemeContext();
+    const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
+    const Root7 = asChild ? Slot11 : Primitive11.h2;
+    return /* @__PURE__ */ React28.createElement(Root7, {
+      ...props,
+      className: tx("message.title", "message__title", {}, className),
+      id: titleId,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+MessageTitle.displayName = MESSAGE_TITLE_NAME;
+var MESSAGE_BODY_NAME = "MessageBody";
+var MessageBody = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals28();
+  try {
+    const { tx } = useThemeContext();
+    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+    const Root7 = asChild ? Slot11 : Primitive11.p;
+    return /* @__PURE__ */ React28.createElement(Root7, {
+      ...props,
+      className: tx("message.body", "message__body", {}, className),
+      id: descriptionId,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+MessageBody.displayName = MESSAGE_BODY_NAME;
+var Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Body: MessageBody
+};
+
+// packages/ui/react-ui/src/components/Popover/Popover.tsx
+import { useSignals as _useSignals29 } from "@preact-signals/safe-react/tracking";
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
+import { DismissableLayer as DismissableLayer2 } from "@radix-ui/react-dismissable-layer";
+import { useFocusGuards } from "@radix-ui/react-focus-guards";
+import { FocusScope } from "@radix-ui/react-focus-scope";
+import { useId as useId5 } from "@radix-ui/react-id";
+import * as PopperPrimitive2 from "@radix-ui/react-popper";
+import { createPopperScope as createPopperScope2 } from "@radix-ui/react-popper";
+import { Portal as PortalPrimitive2 } from "@radix-ui/react-portal";
+import { Presence as Presence2 } from "@radix-ui/react-presence";
+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 { RemoveScroll } from "react-remove-scroll";
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
+  createPopperScope2
+]);
+var usePopperScope2 = createPopperScope2();
+var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+var PopoverRoot = (props) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
+    const popperScope = usePopperScope2(__scopePopover);
+    const triggerRef = useRef4(null);
+    const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
+    const [open = false, setOpen] = useControllableState6({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ React29.createElement(PopoverProvider, {
+      scope: __scopePopover,
+      contentId: useId5(),
+      triggerRef,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
+        setOpen
+      ]),
+      hasCustomAnchor,
+      onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
+      onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
+      modal
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+PopoverRoot.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, ...anchorProps } = props;
+    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+    const popperScope = usePopperScope2(__scopePopover);
+    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+    useEffect7(() => {
+      onCustomAnchorAdd();
+      return () => onCustomAnchorRemove();
+    }, [
+      onCustomAnchorAdd,
+      onCustomAnchorRemove
+    ]);
+    return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+      ...popperScope,
+      ...anchorProps,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME3 = "PopoverTrigger";
+var PopoverTrigger = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, ...triggerProps } = props;
+    const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
+    const popperScope = usePopperScope2(__scopePopover);
+    const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+    const trigger = /* @__PURE__ */ React29.createElement(Primitive12.button, {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onClick: composeEventHandlers3(props.onClick, context.onOpenToggle)
+    });
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+      asChild: true,
+      ...popperScope
+    }, trigger);
+  } finally {
+    _effect.f();
+  }
+});
+PopoverTrigger.displayName = TRIGGER_NAME3;
+var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
+var PopoverVirtualTrigger = (props) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, virtualRef } = props;
+    const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
+    const popperScope = usePopperScope2(__scopePopover);
+    useEffect7(() => {
+      if (virtualRef.current) {
+        context.triggerRef.current = virtualRef.current;
+      }
+    });
+    return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+      ...popperScope,
+      virtualRef
+    });
+  } finally {
+    _effect.f();
+  }
+};
+PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
+var PORTAL_NAME3 = "PopoverPortal";
+var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
+  forceMount: void 0
+});
+var PopoverPortal = (props) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, forceMount, children, container } = props;
+    const context = usePopoverContext(PORTAL_NAME3, __scopePopover);
+    return /* @__PURE__ */ React29.createElement(PortalProvider2, {
+      scope: __scopePopover,
+      forceMount
+    }, /* @__PURE__ */ React29.createElement(Presence2, {
+      present: forceMount || context.open
+    }, /* @__PURE__ */ React29.createElement(PortalPrimitive2, {
+      asChild: true,
+      container
+    }, children)));
+  } finally {
+    _effect.f();
+  }
+};
+PopoverPortal.displayName = PORTAL_NAME3;
+var CONTENT_NAME3 = "PopoverContent";
+var PopoverContent = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
+    return /* @__PURE__ */ React29.createElement(Presence2, {
+      present: forceMount || context.open
+    }, context.modal ? /* @__PURE__ */ React29.createElement(PopoverContentModal, {
+      ...contentProps,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ React29.createElement(PopoverContentNonModal, {
+      ...contentProps,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+PopoverContent.displayName = CONTENT_NAME3;
+var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
+    const contentRef = useRef4(null);
+    const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+    const isRightClickOutsideRef = useRef4(false);
+    useEffect7(() => {
+      const content = contentRef.current;
+      if (content) {
+        return hideOthers(content);
+      }
+    }, []);
+    return /* @__PURE__ */ React29.createElement(RemoveScroll, {
+      as: Slot12,
+      allowPinchZoom: true
+    }, /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
+      ...props,
+      ref: composedRefs,
+      // we make sure we're not trapping once it's been closed
+      // (closed !== unmounted when animating out)
+      trapFocus: context.open,
+      disableOutsidePointerEvents: true,
+      onCloseAutoFocus: composeEventHandlers3(props.onCloseAutoFocus, (event) => {
+        event.preventDefault();
+        if (!isRightClickOutsideRef.current) {
+          context.triggerRef.current?.focus();
+        }
+      }),
+      onPointerDownOutside: composeEventHandlers3(props.onPointerDownOutside, (event) => {
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        isRightClickOutsideRef.current = isRightClick;
+      }, {
+        checkForDefaultPrevented: false
+      }),
+      // When focus is trapped, a `focusout` event may still happen.
+      // We make sure we don't trigger our `onDismiss` in such case.
+      onFocusOutside: composeEventHandlers3(props.onFocusOutside, (event) => event.preventDefault(), {
+        checkForDefaultPrevented: false
+      })
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
+    const hasInteractedOutsideRef = useRef4(false);
+    const hasPointerDownOutsideRef = useRef4(false);
+    return /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        props.onCloseAutoFocus?.(event);
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef.current) {
+            context.triggerRef.current?.focus();
+          }
+          event.preventDefault();
+        }
+        hasInteractedOutsideRef.current = false;
+        hasPointerDownOutsideRef.current = false;
+      },
+      onInteractOutside: (event) => {
+        props.onInteractOutside?.(event);
+        if (!event.defaultPrevented) {
+          hasInteractedOutsideRef.current = true;
+          if (event.detail.originalEvent.type === "pointerdown") {
+            hasPointerDownOutsideRef.current = true;
+          }
+        }
+        const target = event.target;
+        const targetIsTrigger = context.triggerRef.current?.contains(target);
+        if (targetIsTrigger) {
+          event.preventDefault();
+        }
+        if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+          event.preventDefault();
+        }
+      }
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
+    const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
+    const popperScope = usePopperScope2(__scopePopover);
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    useFocusGuards();
+    return /* @__PURE__ */ React29.createElement(FocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: trapFocus,
+      onMountAutoFocus: onOpenAutoFocus,
+      onUnmountAutoFocus: onCloseAutoFocus
+    }, /* @__PURE__ */ React29.createElement(DismissableLayer2, {
+      asChild: true,
+      disableOutsidePointerEvents,
+      onInteractOutside,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onDismiss: () => context.onOpenChange(false)
+    }, /* @__PURE__ */ React29.createElement(PopperPrimitive2.Content, {
+      "data-state": getState(context.open),
+      role: "dialog",
+      id: context.contentId,
+      ...popperScope,
+      ...contentProps,
+      collisionPadding: safeCollisionPadding,
+      className: tx("popover.content", "popover", {
+        elevation
+      }, classNames),
+      ref: forwardedRef,
+      style: {
+        ...contentProps.style,
+        // 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)",
+          "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    })));
+  } finally {
+    _effect.f();
+  }
+});
+var CLOSE_NAME = "PopoverClose";
+var PopoverClose = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, ...closeProps } = props;
+    const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+    return /* @__PURE__ */ React29.createElement(Primitive12.button, {
+      type: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onClick: composeEventHandlers3(props.onClick, () => context.onOpenChange(false))
+    });
+  } finally {
+    _effect.f();
+  }
+});
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME3 = "PopoverArrow";
+var PopoverArrow = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { __scopePopover, classNames, ...arrowProps } = props;
+    const popperScope = usePopperScope2(__scopePopover);
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Arrow, {
+      ...popperScope,
+      ...arrowProps,
+      className: tx("popover.arrow", "popover__arrow", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+PopoverArrow.displayName = ARROW_NAME3;
+var PopoverViewport = /* @__PURE__ */ forwardRef21(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals29();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot12 : Primitive12.div;
+    return /* @__PURE__ */ React29.createElement(Root7, {
+      ...props,
+      className: tx("popover.viewport", "popover__viewport", {
+        constrainInline,
+        constrainBlock
+      }, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var getState = (open) => open ? "open" : "closed";
+var Popover = {
+  Root: PopoverRoot,
+  Anchor: PopoverAnchor,
+  Trigger: PopoverTrigger,
+  VirtualTrigger: PopoverVirtualTrigger,
+  Portal: PopoverPortal,
+  Content: PopoverContent,
+  Close: PopoverClose,
+  Arrow: PopoverArrow,
+  Viewport: PopoverViewport
+};
+
+// packages/ui/react-ui/src/components/Status/Status.tsx
+import { useSignals as _useSignals30 } from "@preact-signals/safe-react/tracking";
+import React30, { forwardRef as forwardRef22 } from "react";
+var Status = /* @__PURE__ */ forwardRef22(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+  var _effect = _useSignals30();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React30.createElement("span", {
+      role: "status",
+      ...props,
+      className: tx("status.root", "status", {
+        indeterminate,
+        variant
+      }, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React30.createElement("span", {
+      role: "none",
+      className: tx("status.bar", "status__bar", {
+        indeterminate,
+        variant
+      }, classNames),
+      ...!indeterminate && {
+        style: {
+          width: `${Math.round(progress * 100)}%`
+        }
+      }
+    }), children);
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/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 React31, { forwardRef as forwardRef23 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals31();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveRoot, {
+      ...props,
+      className: tx("scrollArea.root", "scroll-area", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals31();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveViewport, {
+      ...props,
+      className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef23(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+  var _effect = _useSignals31();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveScrollbar, {
+      "data-variant": variant,
+      ...props,
+      className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals31();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveThumb, {
+      ...props,
+      className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals31();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveCorner, {
+      ...props,
+      className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Corner: ScrollAreaCorner
+};
+
+// packages/ui/react-ui/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;
+var SelectTrigger = SelectPrimitive.Trigger;
+var SelectValue = SelectPrimitive.Value;
+var SelectIcon = SelectPrimitive.Icon;
+var SelectPortal = SelectPrimitive.Portal;
+var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Trigger, {
+      asChild: true,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React32.createElement(Button, props, /* @__PURE__ */ React32.createElement(SelectPrimitive.Value, {
+      placeholder
+    }, children), /* @__PURE__ */ React32.createElement("span", {
+      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"
+    }))));
+  } finally {
+    _effect.f();
+  }
+});
+var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Content, {
+      ...props,
+      collisionPadding: safeCollisionPadding,
+      className: tx("select.content", "select__content", {
+        elevation
+      }, classNames),
+      position: "popper",
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollUpButton, {
+      ...props,
+      className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
+      ref: forwardedRef
+    }, children ?? /* @__PURE__ */ React32.createElement(CaretUp, {
+      weight: "bold"
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollDownButton, {
+      ...props,
+      className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
+      ref: forwardedRef
+    }, children ?? /* @__PURE__ */ React32.createElement(CaretDown2, {
+      weight: "bold"
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectViewport, {
+      ...props,
+      className: tx("select.viewport", "select__viewport", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
+      ...props,
+      className: tx("select.item", "option", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var SelectItemText = SelectPrimitive.ItemText;
+var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemIndicator, {
+      ...props,
+      className: tx("select.itemIndicator", "option__indicator", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
+      ...props,
+      className: tx("select.item", "option", {}, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React32.createElement("span", {
+      className: "grow w-1"
+    }), /* @__PURE__ */ React32.createElement(Icon, {
+      icon: "ph--check--regular"
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Separator, {
+      ...props,
+      className: tx("select.separator", "select__separator", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals32();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React32.createElement(SelectPrimitive.Arrow, {
+      ...props,
+      className: tx("select.arrow", "select__arrow", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  TriggerButton: SelectTriggerButton,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Portal: SelectPortal,
+  Content: SelectContent,
+  ScrollUpButton: SelectScrollUpButton2,
+  ScrollDownButton: SelectScrollDownButton2,
+  Viewport: SelectViewport2,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  ItemIndicator: SelectItemIndicator,
+  Option: SelectOption,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  Arrow: SelectArrow
+};
+
+// packages/ui/react-ui/src/components/Separator/Separator.tsx
+import { useSignals as _useSignals33 } from "@preact-signals/safe-react/tracking";
+import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
+import React33, { forwardRef as forwardRef25 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
+  var _effect = _useSignals33();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React33.createElement(SeparatorPrimitive, {
+      orientation,
+      ...props,
+      className: tx("separator.root", "separator", {
+        orientation
+      }, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/src/components/Tag/Tag.tsx
+import { useSignals as _useSignals34 } from "@preact-signals/safe-react/tracking";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React34, { forwardRef as forwardRef26 } from "react";
+var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals34();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot13 : Primitive13.span;
+    return /* @__PURE__ */ React34.createElement(Root7, {
+      ...props,
+      className: tx("tag.root", "dx-tag", {
+        palette
+      }, classNames),
+      "data-hue": palette,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/ui/react-ui/src/components/Toast/Toast.tsx
+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 React35, { forwardRef as forwardRef27 } from "react";
+var ToastProvider = ToastProviderPrimitive;
+var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React35.createElement(ToastViewportPrimitive, {
+      className: tx("toast.viewport", "toast-viewport", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React35.createElement(ToastRootPrimitive, {
+      ...props,
+      className: tx("toast.root", "toast", {}, classNames),
+      ref: forwardedRef
+    }, /* @__PURE__ */ React35.createElement(ElevationProvider, {
+      elevation: "toast"
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot14 : Primitive14.div;
+    return /* @__PURE__ */ React35.createElement(Root7, {
+      ...props,
+      className: tx("toast.body", "toast__body", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot14 : ToastTitlePrimitive;
+    return /* @__PURE__ */ React35.createElement(Root7, {
+      ...props,
+      className: tx("toast.title", "toast__title", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot14 : ToastDescriptionPrimitive;
+    return /* @__PURE__ */ React35.createElement(Root7, {
+      ...props,
+      className: tx("toast.description", "toast__description", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals35();
+  try {
+    const { tx } = useThemeContext();
+    const Root7 = asChild ? Slot14 : Primitive14.div;
+    return /* @__PURE__ */ React35.createElement(Root7, {
+      ...props,
+      className: tx("toast.actions", "toast__actions", {}, classNames),
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ToastAction = ToastActionPrimitive;
+var ToastClose = ToastClosePrimitive;
+var Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Body: ToastBody,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  Action: ToastAction,
+  Close: ToastClose
+};
+
+// packages/ui/react-ui/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, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    const { tx } = useThemeContext();
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Root, {
+      ...props,
+      className: tx("toolbar.root", "toolbar", {}, classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(Button, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(IconButton, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(Toggle, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Link, {
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(Link, {
+      ...props,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(ButtonGroup, {
+      classNames,
+      children,
+      elevation,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(Button, {
+      variant,
+      density,
+      elevation,
+      classNames,
+      children,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+      ...props,
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(IconButton, {
+      variant,
+      density,
+      elevation,
+      classNames,
+      icon,
+      label,
+      iconOnly,
+      ref: forwardedRef
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+var ToolbarSeparator = /* @__PURE__ */ forwardRef28(({ variant = "line", ...props }, forwardedRef) => {
+  var _effect = _useSignals36();
+  try {
+    return variant === "line" ? /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
+      asChild: true
+    }, /* @__PURE__ */ React36.createElement(Separator4, {
+      ...props,
+      ref: forwardedRef
+    })) : /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
+      className: "grow",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
+  Link: ToolbarLink,
+  Toggle: ToolbarToggle,
+  ToggleGroup: ToolbarToggleGroup2,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
+};
+
+// packages/ui/react-ui/src/hooks/useDensityContext.ts
+var useDensityContext = (propsDensity) => {
+  const { density } = useContext6(DensityContext);
+  return propsDensity ?? density;
+};
+
+export {
+  useDensityContext,
+  useElevationContext,
+  useThemeContext,
+  useIconHref,
+  initialSafeArea,
+  useSafeArea,
+  isLabel,
+  toLocalizedString,
+  useTranslation,
+  useTranslationsContext,
+  useVisualViewport,
+  AnchoredOverflow,
+  useAvatarContext,
+  Avatar,
+  Link,
+  Breadcrumb,
+  BUTTON_GROUP_NAME,
+  useButtonGroupContext,
+  Button,
+  ButtonGroup,
+  Icon,
+  createTooltipScope,
+  useTooltipContext,
+  Tooltip,
+  IconButton,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  useClipboard,
+  hasIosKeyboard,
+  DensityContext,
+  DensityProvider,
+  ElevationContext,
+  ElevationProvider,
+  ThemeContext,
+  ThemeProvider,
+  Clipboard,
+  Dialog,
+  AlertDialog,
+  Input,
+  LIST_NAME,
+  LIST_ITEM_NAME,
+  useListContext,
+  useListItemContext,
+  List,
+  ListItem,
+  Tree,
+  TreeItem,
+  Treegrid,
+  useLandmarkMover,
+  useMainContext,
+  useSidebars,
+  Main,
+  ContextMenu2 as ContextMenu,
+  createDropdownMenuScope,
+  useDropdownMenuContext,
+  DropdownMenu,
+  useDropdownMenuMenuScope,
+  Message,
+  createPopoverScope,
+  Popover,
+  Status,
+  ScrollArea,
+  Select,
+  Separator4 as Separator,
+  Tag,
+  Toast,
+  Toolbar
+};
+//# sourceMappingURL=chunk-5Y5JI6KC.mjs.map