@dxos/react-ui 0.8.3 → 0.8.4-main.1068cf700f

package/dist/lib/browser/index.mjs

@@ -1,80 +1,3212 @@
 import {
-  AlertDialog,
-  AnchoredOverflow,
-  Avatar,
-  BUTTON_GROUP_NAME,
-  Breadcrumb,
-  Button,
-  ButtonGroup,
-  Callout,
-  Clipboard,
-  ContextMenu,
   DensityContext,
   DensityProvider,
-  Dialog,
-  DropdownMenu,
   ElevationContext,
   ElevationProvider,
-  Icon,
-  IconButton,
-  Input,
-  LIST_ITEM_NAME,
-  LIST_NAME,
-  Link,
-  List,
-  ListItem,
-  Main,
-  Message,
-  Popover,
-  ScrollArea,
-  Select,
-  Separator,
-  Status,
-  Tag,
   ThemeContext,
   ThemeProvider,
-  Toast,
-  Toggle,
-  ToggleGroup,
-  ToggleGroupItem,
-  Toolbar,
   Tooltip,
-  Tree,
-  TreeItem,
-  Treegrid,
-  createDropdownMenuScope,
-  createPopoverScope,
+  TranslationsContext,
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
-  isLabel,
-  messageIcons,
-  toLocalizedString,
-  useAvatarContext,
-  useButtonGroupContext,
-  useClipboard,
-  useDensityContext,
-  useDropdownMenuContext,
-  useDropdownMenuMenuScope,
   useElevationContext,
-  useIconHref,
-  useLandmarkMover,
-  useListContext,
-  useListItemContext,
-  useMainContext,
   useSafeArea,
-  useSidebars,
   useThemeContext,
   useTooltipContext,
-  useTranslation,
-  useTranslationsContext,
-  useVisualViewport
-} from "./chunk-WXW6KSRL.mjs";
+  useTranslation
+} from "./chunk-6DTBPJE4.mjs";
 
-// packages/ui/react-ui/src/index.ts
+// src/index.ts
 import { Trans } from "react-i18next";
 export * from "@dxos/react-hooks";
-export * from "@dxos/react-ui-types";
+export * from "@dxos/ui-types";
+
+// src/components/AnchoredOverflow/AnchoredOverflow.tsx
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { forwardRef } from "react";
+
+// src/hooks/useDensityContext.ts
+import { useContext } from "react";
+var useDensityContext = (propsDensity) => {
+  const { density } = useContext(DensityContext);
+  return propsDensity ?? density;
+};
+
+// 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;
+};
+
+// src/hooks/useTranslationsContext.ts
+import { useContext as useContext2 } from "react";
+var useTranslationsContext = () => useContext2(TranslationsContext);
+
+// src/hooks/useVisualViewport.ts
+import { useCallback, useState } from "react";
+import { useViewportResize } from "@dxos/react-hooks";
+var useVisualViewport = (deps) => {
+  const [width, setWidth] = useState(null);
+  const [height, setHeight] = useState(null);
+  const handleResize = useCallback(() => {
+    if (window.visualViewport) {
+      setWidth(window.visualViewport.width);
+      setHeight(window.visualViewport.height);
+    }
+  }, []);
+  useViewportResize(handleResize, deps);
+  return {
+    width,
+    height
+  };
+};
+
+// src/components/AnchoredOverflow/AnchoredOverflow.tsx
+var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React.createElement(Root8, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.root", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React.createElement(Root8, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.anchor", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflow = {
+  Root: AnchoredOverflowRoot,
+  Anchor: AnchoredOverflowAnchor
+};
+
+// src/components/Avatars/Avatar.tsx
+import "@dxos/lit-ui/dx-avatar.pcss";
+import { createContext } from "@radix-ui/react-context";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React2, { forwardRef as forwardRef2 } from "react";
+import { DxAvatar } from "@dxos/lit-ui/react";
+import { useId } from "@dxos/react-hooks";
+import { mx } from "@dxos/ui-theme";
+var AVATAR_NAME = "Avatar";
+var [AvatarProvider, useAvatarContext] = createContext(AVATAR_NAME);
+var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
+  const labelId = useId("avatar__label", propsLabelId);
+  const descriptionId = useId("avatar__description", propsDescriptionId);
+  return /* @__PURE__ */ React2.createElement(AvatarProvider, {
+    labelId,
+    descriptionId
+  }, children);
+};
+var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props }, forwardedRef) => {
+  const href = useIconHref(icon);
+  const { labelId, descriptionId } = useAvatarContext("AvatarContent");
+  return /* @__PURE__ */ React2.createElement(DxAvatar, {
+    ...props,
+    icon: href,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    rootClassName: mx(classNames),
+    ref: forwardedRef
+  });
+});
+var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root8 = asChild ? Slot2 : Primitive2.span;
+  const { tx } = useThemeContext();
+  const { labelId } = useAvatarContext("AvatarLabel");
+  return /* @__PURE__ */ React2.createElement(Root8, {
+    ...props,
+    id: labelId,
+    ref: forwardedRef,
+    className: tx("avatar.label", {
+      srOnly
+    }, classNames)
+  });
+});
+var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root8 = asChild ? Slot2 : Primitive2.span;
+  const { tx } = useThemeContext();
+  const { descriptionId } = useAvatarContext("AvatarDescription");
+  return /* @__PURE__ */ React2.createElement(Root8, {
+    ...props,
+    id: descriptionId,
+    ref: forwardedRef,
+    className: tx("avatar.description", {
+      srOnly
+    }, classNames)
+  });
+});
+var Avatar = {
+  Root: AvatarRoot,
+  Content: AvatarContent,
+  Label: AvatarLabel,
+  Description: AvatarDescription
+};
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React5, { forwardRef as forwardRef5 } from "react";
+
+// src/components/Icon/Icon.tsx
+import React3, { forwardRef as forwardRef3, memo } from "react";
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const href = useIconHref(icon);
+  return /* @__PURE__ */ React3.createElement("svg", {
+    ...props,
+    className: tx("icon.root", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement("use", {
+    href
+  }));
+}));
+
+// src/components/Link/Link.tsx
+import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef4 } from "react";
+var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React4.createElement(Root8, {
+    ...props,
+    className: tx("link.root", {
+      variant
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React5.createElement(Root8, {
+    role: "navigation",
+    ...props,
+    className: tx("breadcrumb.root", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React5.createElement(Root8, {
+    role: "list",
+    ...props,
+    className: tx("breadcrumb.list", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React5.createElement(Root8, {
+    role: "listitem",
+    ...props,
+    className: tx("breadcrumb.listItem", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
+  const Root8 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React5.createElement(Root8, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React5.createElement(Root8, {
+    ...props,
+    "aria-current": "page",
+    className: tx("breadcrumb.current", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React5.createElement(Primitive4.span, {
+    role: "separator",
+    "aria-hidden": "true",
+    ...props,
+    className: tx("breadcrumb.separator", {}, classNames)
+  }, children ?? /* @__PURE__ */ React5.createElement(Icon, {
+    icon: "ph--dot--bold"
+  }));
+};
+var Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  ListItem: BreadcrumbListItem,
+  Link: BreadcrumbLink,
+  Current: BreadcrumbCurrent,
+  Separator: BreadcrumbSeparator
+};
+
+// src/components/Button/Button.tsx
+import { createContext as createContext2 } 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 forwardRef6, memo as memo2 } from "react";
+var BUTTON_GROUP_NAME = "ButtonGroup";
+var BUTTON_NAME = "Button";
+var [ButtonGroupProvider, useButtonGroupContext] = createContext2(BUTTON_GROUP_NAME, {
+  inGroup: false
+});
+var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+  const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const density = useDensityContext(propsDensity);
+  const Root8 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React6.createElement(Root8, {
+    ref,
+    ...props,
+    "data-variant": variant,
+    "data-density": density,
+    "data-props": inGroup ? "grouped" : "",
+    className: tx("button.root", {
+      variant,
+      inGroup,
+      disabled: props.disabled,
+      density,
+      elevation
+    }, classNames),
+    ...props.disabled && {
+      disabled: true
+    }
+  }, children);
+}));
+Button.displayName = BUTTON_NAME;
+var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const Root8 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React6.createElement(Root8, {
+    role: "none",
+    ...props,
+    className: tx("button.group", {
+      elevation
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
+    inGroup: true
+  }, children));
+});
+ButtonGroup.displayName = BUTTON_GROUP_NAME;
+
+// src/components/Button/IconButton.tsx
+import React7, { forwardRef as forwardRef7 } from "react";
+var IconButton = /* @__PURE__ */ forwardRef7((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React7.createElement(IconOnlyButton, {
+  ...props,
+  ref: forwardedRef
+}) : /* @__PURE__ */ React7.createElement(LabelledIconButton, {
+  ...props,
+  ref: forwardedRef
+}));
+var IconOnlyButton = /* @__PURE__ */ forwardRef7(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
+  if (noTooltip) {
+    return /* @__PURE__ */ React7.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  }
+  return /* @__PURE__ */ React7.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: props.label,
+    side: tooltipSide
+  }, /* @__PURE__ */ React7.createElement(LabelledIconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var LabelledIconButton = /* @__PURE__ */ forwardRef7(({ size = 5, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React7.createElement(Button, {
+    ...props,
+    classNames: tx("iconButton.root", {
+      iconOnly
+    }, classNames),
+    ref: forwardedRef
+  }, icon && !iconEnd && /* @__PURE__ */ React7.createElement(Icon, {
+    icon,
+    size,
+    classNames: iconClassNames
+  }), /* @__PURE__ */ React7.createElement("span", {
+    className: iconOnly ? "sr-only" : void 0
+  }, label), icon && iconEnd && /* @__PURE__ */ React7.createElement(Icon, {
+    icon,
+    size,
+    classNames: iconClassNames
+  }), caretDown && /* @__PURE__ */ React7.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
+});
+
+// src/components/Button/Toggle.tsx
+import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
+import React8, { forwardRef as forwardRef8 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef8(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement(TogglePrimitive, {
+    defaultPressed,
+    pressed,
+    onPressedChange,
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+
+// src/components/Button/ToggleGroup.tsx
+import { ToggleGroupItem as ToggleGroupItemPrimitive, ToggleGroup as ToggleGroupPrimitive } from "@radix-ui/react-toggle-group";
+import React9, { forwardRef as forwardRef9 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(ToggleGroupPrimitive, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(ButtonGroup, {
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToggleGroupItem = /* @__PURE__ */ forwardRef9(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(ToggleGroupItemPrimitive, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button, {
+    variant,
+    elevation,
+    density,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToggleGroupIconItem = /* @__PURE__ */ forwardRef9(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(ToggleGroupItemPrimitive, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(IconButton, {
+    variant,
+    elevation,
+    density,
+    classNames,
+    label,
+    icon,
+    size,
+    ref: forwardedRef
+  }));
+});
+
+// src/components/Clipboard/ClipboardProvider.tsx
+import React10, { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useState as useState2 } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext3({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboard = () => useContext3(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = useState2("");
+  const setTextValue = useCallback2(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ React10.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+
+// src/components/Clipboard/CopyButton.tsx
+import React11 from "react";
+import { mx as mx2, osTranslations } from "@dxos/ui-theme";
+
+// src/components/ThemeProvider/index.ts
+import { isLabel, toLocalizedString } from "@dxos/ui-types";
+
+// src/util/usePx.ts
+import { useCallback as useCallback3, useEffect, useMemo, useState as useState3 } from "react";
+var getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+var usePx = (rem) => {
+  const [fontSize, setFontSize] = useState3(() => {
+    if (typeof document !== "undefined") {
+      return getDocumentElementFontSize();
+    }
+    return 16;
+  });
+  const updateFontSize = useCallback3(() => {
+    setFontSize(getDocumentElementFontSize());
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(updateFontSize);
+    resizeObserver.observe(document.documentElement);
+    const mediaQueryList = window.matchMedia("all");
+    const handleMediaChange = () => {
+      updateFontSize();
+    };
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", handleMediaChange);
+    } else {
+      mediaQueryList.addListener(handleMediaChange);
+    }
+    return () => {
+      resizeObserver.disconnect();
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", handleMediaChange);
+      } else {
+        mediaQueryList.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
+  return useMemo(() => rem * fontSize, [
+    fontSize
+  ]);
+};
+
+// src/components/Clipboard/CopyButton.tsx
+var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
+var CopyButton = ({ classNames, value, size = 5, ...props }) => {
+  const { t } = useTranslation(osTranslations);
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ React11.createElement(Button, {
+    ...props,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "pli-1"
+  }, t("copy label")), /* @__PURE__ */ React11.createElement(Icon, {
+    icon: "ph--copy--regular",
+    size
+  })), /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "pli-1"
+  }, t("copy success label")), /* @__PURE__ */ React11.createElement(Icon, {
+    icon: "ph--check--regular",
+    size
+  })));
+};
+var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ...props }) => {
+  const { t } = useTranslation(osTranslations);
+  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__ */ React11.createElement(IconButton, {
+    iconOnly: true,
+    label,
+    icon: "ph--copy--regular",
+    size,
+    variant,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value).then(onOpen),
+    "data-testid": "copy-invitation"
+  });
+};
+
+// src/components/Clipboard/index.ts
+var Clipboard = {
+  Button: CopyButton,
+  IconButton: CopyButtonIconOnly,
+  Provider: ClipboardProvider
+};
+
+// src/components/Dialog/Dialog.tsx
+import { createContext as createContext4 } from "@radix-ui/react-context";
+import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, Root as DialogRootPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "@radix-ui/react-dialog";
+import React12, { forwardRef as forwardRef10 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
+var DialogRoot = (props) => /* @__PURE__ */ React12.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React12.createElement(DialogRootPrimitive, props));
+var DialogTrigger = DialogTriggerPrimitive;
+var DialogPortal = DialogPortalPrimitive;
+var DIALOG_OVERLAY_NAME = "DialogOverlay";
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext4(DIALOG_OVERLAY_NAME, {});
+var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", {}, classNames),
+    ref: forwardedRef,
+    "data-block-align": blockAlign
+  }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider, {
+    inOverlayLayout: true
+  }, children));
+});
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+var DIALOG_CONTENT_NAME = "DialogContent";
+var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, size, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React12.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", {
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+var DialogHeader = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    role: "header",
+    className: tx("dialog.header", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogBody = /* @__PURE__ */ forwardRef10(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    className: tx("dialog.body"),
+    ref: forwardedRef
+  }, children);
+});
+var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogActionBar = /* @__PURE__ */ forwardRef10(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement("div", {
+    ...props,
+    className: tx("dialog.actionbar", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DialogClose = DialogClosePrimitive;
+var DialogCloseIconButton = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { t } = useTranslation2(osTranslations2);
+  return /* @__PURE__ */ React12.createElement(IconButton, {
+    ...props,
+    label: props.label ?? t("close dialog label"),
+    icon: "ph--x--regular",
+    iconOnly: true,
+    size: 4,
+    density: "fine",
+    variant: "ghost",
+    ref: forwardedRef
+  });
+});
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  ActionBar: DialogActionBar,
+  Close: DialogClose,
+  CloseIconButton: DialogCloseIconButton
+};
+
+// src/components/Dialog/AlertDialog.tsx
+import { AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, Root as AlertDialogRootPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive } from "@radix-ui/react-alert-dialog";
+import { createContext as createContext5 } from "@radix-ui/react-context";
+import React13, { forwardRef as forwardRef11 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React13.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React13.createElement(AlertDialogRootPrimitive, props));
+var AlertDialogTrigger = AlertDialogTriggerPrimitive;
+var AlertDialogPortal = AlertDialogPortalPrimitive;
+var AlertDialogCancel = AlertDialogCancelPrimitive;
+var AlertDialogAction = AlertDialogActionPrimitive;
+var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
+var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext5(ALERT_DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+    ref: forwardedRef,
+    "data-block-align": blockAlign
+  }, /* @__PURE__ */ React13.createElement(OverlayLayoutProvider2, {
+    inOverlayLayout: true
+  }, children));
+});
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React13.createElement(AlertDialogContentPrimitive, {
+    ...props,
+    className: tx("dialog.content", {
+      inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+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
+};
+
+// src/components/Input/Input.tsx
+import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React14, { forwardRef as forwardRef12, useCallback as useCallback4 } from "react";
+import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext } from "@dxos/react-input";
+import { mx as mx3 } from "@dxos/ui-theme";
+var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(LabelPrimitive, {
+    ...props,
+    className: tx("input.label", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(DescriptionPrimitive, {
+    ...props,
+    className: tx("input.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React14.createElement(ValidationPrimitive, {
+    ...props,
+    className: tx("input.validation", {
+      srOnly,
+      validationValence
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(DescriptionAndValidationPrimitive, {
+    ...props,
+    className: tx("input.descriptionAndValidation", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const segmentClassName = useCallback4(({ focused, validationValence }) => tx("input.input", {
+    variant: "static",
+    focused,
+    disabled: props.disabled,
+    density,
+    elevation,
+    validationValence
+  }, propsSegmentClassName) || "", [
+    tx,
+    props.disabled,
+    elevation,
+    propsElevation,
+    density
+  ]);
+  return /* @__PURE__ */ React14.createElement(PinInputPrimitive, {
+    ...props,
+    segmentClassName,
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    inputClassName: tx("input.inputWithSegments", {
+      disabled: props.disabled
+    }, inputClassName) || "",
+    ref: forwardedRef
+  });
+});
+var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React14.createElement(TextInputPrimitive, {
+    ...props,
+    "data-1p-ignore": noAutoFill,
+    className: tx("input.input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React14.createElement(TextAreaPrimitive, {
+    ...props,
+    className: tx("input.input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, "-mbe-labelSpacingBlock", classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(CheckboxPrimitive, {
+    ...props,
+    checked,
+    onCheckedChange,
+    id,
+    "aria-describedby": descriptionId,
+    ...validationValence === "error" && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    },
+    className: tx("input.checkbox", {
+      size
+    }, "shrink-0", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", {
+      size,
+      checked
+    })
+  }));
+});
+var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked ?? false,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React14.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
+  });
+});
+var Input = {
+  Root: InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label,
+  Description,
+  Validation,
+  DescriptionAndValidation
+};
+
+// src/components/List/List.tsx
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React16, { forwardRef as forwardRef13 } from "react";
+import { LIST_ITEM_NAME, LIST_NAME, ListItemCollapsibleContent, List as ListPrimitive, ListItem as ListPrimitiveItem, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, useListContext, useListItemContext } from "@dxos/react-list";
+
+// src/components/List/ListDropIndicator.tsx
+import React15 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: "is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  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 }) => {
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React15.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]}`
+  });
+};
+
+// src/components/List/List.tsx
+var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(props.density);
+  return /* @__PURE__ */ React16.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ React16.createElement(ListPrimitive, {
+    ...props,
+    className: tx("list.root", {}, classNames),
+    ref: forwardedRef
+  }, children));
+});
+var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root8 = asChild ? Slot6 : "div";
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(Root8, {
+    ...!asChild && {
+      role: "none"
+    },
+    ...props,
+    className: tx("list.item.endcap", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var MockListItemOpenTrigger = ({ classNames, ...props }) => {
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement("div", {
+    role: "none",
+    ...props,
+    className: tx("list.item.openTrigger", {
+      density
+    }, classNames)
+  });
+};
+var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemHeading, {
+    ...props,
+    className: tx("list.item.heading", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemOpenTrigger, {
+    ...props,
+    className: tx("list.item.openTrigger", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children || /* @__PURE__ */ React16.createElement(Icon, {
+    size: 3,
+    icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
+    classNames: tx("list.item.openTriggerIcon", {})
+  }));
+});
+var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItem, {
+    ...props,
+    className: tx("list.item.root", {
+      density,
+      collapsible: props.collapsible
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItem = {
+  Root: ListItemRoot,
+  Endcap: ListItemEndcap,
+  Heading: ListItemHeading,
+  OpenTrigger: ListItemOpenTrigger,
+  CollapsibleContent: ListItemCollapsibleContent,
+  MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator
+};
+
+// src/components/List/Tree.tsx
+import React18, { forwardRef as forwardRef14 } from "react";
+
+// src/components/List/TreeDropIndicator.tsx
+import React17 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 }) => {
+  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__ */ React17.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]}`
+  });
+};
+
+// src/components/List/Tree.tsx
+var TreeRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(List, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var TreeBranch = /* @__PURE__ */ forwardRef14(({ __listScope, ...props }, forwardedRef) => {
+  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
+  return /* @__PURE__ */ React18.createElement(List, {
+    ...props,
+    "aria-labelledby": headingId,
+    ref: forwardedRef
+  });
+});
+var TreeItemRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ListItem.Root, {
+    role: "treeitem",
+    ...props,
+    ref: forwardedRef
+  });
+});
+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
+};
+
+// src/components/List/Treegrid.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React19, { forwardRef as forwardRef15, useCallback as useCallback5 } from "react";
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var PATH_SEPARATOR = "~";
+var PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = /* @__PURE__ */ forwardRef15(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot7 : Primitive6.div;
+  const { findFirstFocusable } = useFocusFinders();
+  const handleKeyDown = useCallback5((event) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        const direction = event.key === "ArrowDown" ? "down" : "up";
+        const target = event.target;
+        const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
+        if (!ancestorWithArrowKeys) {
+          const currentRow = target.closest('[role="row"]');
+          if (currentRow) {
+            const treegrid = currentRow.closest('[role="treegrid"]');
+            if (treegrid) {
+              const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
+              const currentIndex = rows.indexOf(currentRow);
+              const nextIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
+              const targetRow = rows[nextIndex];
+              if (targetRow) {
+                const firstFocusable = findFirstFocusable(targetRow);
+                if (firstFocusable) {
+                  event.preventDefault();
+                  firstFocusable.focus();
+                }
+              }
+            }
+          }
+        }
+        break;
+      }
+    }
+    props.onKeyDown?.(event);
+  }, [
+    findFirstFocusable
+  ]);
+  return /* @__PURE__ */ React19.createElement(Root8, {
+    role: "treegrid",
+    ...props,
+    className: tx("treegrid.root", {}, classNames),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
+    onKeyDown: handleKeyDown,
+    ref: forwardedRef
+  }, children);
+});
+var TreegridRow = /* @__PURE__ */ forwardRef15(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot7 : Primitive6.div;
+  const pathParts = id.split(PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = useControllableState2({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
+  });
+  return /* @__PURE__ */ React19.createElement(TreegridRowProvider, {
+    open,
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ React19.createElement(Root8, {
+    role: "row",
+    "aria-level": level,
+    className: tx("treegrid.row", {
+      level
+    }, classNames),
+    ...parentOf && {
+      "aria-expanded": open,
+      "aria-owns": parentOf
+    },
+    ...props,
+    id,
+    ref: forwardedRef
+  }, children));
+});
+var TreegridCell = /* @__PURE__ */ forwardRef15(({ classNames, children, indent, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "gridcell",
+    className: tx("treegrid.cell", {
+      indent
+    }, classNames),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+  PARENT_OF_SEPARATOR,
+  PATH_SEPARATOR,
+  createTreegridRowScope,
+  useTreegridRowContext
+};
+
+// src/components/Main/Main.tsx
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { createContext as createContext6 } from "@radix-ui/react-context";
+import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React20, { forwardRef as forwardRef16, useCallback as useCallback7, useEffect as useEffect3, useRef, useState as useState5 } from "react";
+import { addEventListener } from "@dxos/async";
+import { log } from "@dxos/log";
+import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
+
+// src/components/Main/useSwipeToDismiss.ts
+import { useCallback as useCallback6, useEffect as useEffect2, useState as useState4 } from "react";
+var useSwipeToDismiss = (ref, {
+  onDismiss,
+  dismissThreshold = 64,
+  debounceThreshold = 8,
+  offset = 0
+  /* side = 'inline-start' */
+}) => {
+  const $root = ref.current;
+  const [motionState, setMotionState] = useState4(0);
+  const [gestureStartX, setGestureStartX] = useState4(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
+  ]);
+  useEffect2(() => {
+    $root?.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      $root?.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [
+    $root,
+    handlePointerDown
+  ]);
+  useEffect2(() => {
+    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [
+    $root,
+    handlePointerMove
+  ]);
+  useEffect2(() => {
+    $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.documentElement.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [
+    $root,
+    handlePointerUp
+  ]);
+};
+
+// src/components/Main/Main.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
+var MAIN_NAME = "Main";
+var MAIN_ROOT_NAME = "MainRoot";
+var MAIN_OVERLAY_NAME = "MainOverlay";
+var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
+var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
+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 = useFocusableGroup({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  });
+  return {
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    ...focusableGroupAttrs
+  };
+};
+var [MainProvider, useMainContext] = createContext6(MAIN_NAME, {
+  resizing: false,
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (_nextState) => {
+    log.warn("Not initialized", void 0, {
+      F: __dxlog_file,
+      L: 111,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  },
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (_nextState) => {
+    log.warn("Not initialized", void 0, {
+      F: __dxlog_file,
+      L: 116,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+});
+var useSidebars = (consumerName) => {
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = 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 MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
+  const [isLg] = useMediaQuery("lg");
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState3({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
+  });
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState3({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
+  });
+  const [resizing, setResizing] = useState5(false);
+  const resizeInterval = useRef(null);
+  useEffect3(() => addEventListener(window, "resize", () => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, 3e3);
+  }), []);
+  return /* @__PURE__ */ React20.createElement(MainProvider, {
+    ...props,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
+    resizing
+  }, children);
+};
+MainRoot.displayName = MAIN_ROOT_NAME;
+var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement("div", {
+    ...props,
+    onClick: () => {
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
+    },
+    className: tx("main.overlay", {
+      isLg,
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
+    }, classNames),
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
+    "aria-hidden": "true",
+    ref: forwardedRef
+  });
+});
+MainOverlay.displayName = MAIN_OVERLAY_NAME;
+var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  const ref = useForwardedRef(forwardedRef);
+  const noopRef = useRef(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => onStateChange?.("closed")
+  });
+  const handleKeyDown = useCallback7((event) => {
+    const focusGroupParent = event.target.closest("[data-tabster]");
+    if (event.key === "Escape" && focusGroupParent) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusGroupParent.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
+  const Root8 = isLg ? Primitive7.div : DialogContent2;
+  return /* @__PURE__ */ React20.createElement(DialogRoot2, {
+    open: state !== "closed",
+    "aria-label": toLocalizedString(label, t),
+    modal: false
+  }, !isLg && /* @__PURE__ */ React20.createElement(DialogTitle2, {
+    className: "sr-only"
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React20.createElement(Root8, {
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+    },
+    ...state === "closed" && {
+      inert: true
+    },
+    ...props,
+    "data-side": side === "inline-end" ? "ie" : "is",
+    "data-state": state,
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.sidebar", {}, classNames),
+    onKeyDownCapture: handleKeyDown,
+    ref
+  }, children));
+});
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
+  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
+    resizing,
+    side: "inline-start",
+    ref: forwardedRef
+  });
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
+  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
+    resizing,
+    side: "inline-end",
+    ref: forwardedRef
+  });
+});
+MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot8 : role ? "div" : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
+  return /* @__PURE__ */ React20.createElement(Root8, {
+    role,
+    ...handlesFocus && {
+      ...mover
+    },
+    ...props,
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
+    "data-handles-focus": handlesFocus,
+    className: tx("main.content", {
+      bounce,
+      handlesFocus
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+MainContent.displayName = MAIN_NAME;
+var Main = {
+  Root: MainRoot,
+  Overlay: MainOverlay,
+  Content: MainContent,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar
+};
+
+// src/components/Menu/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import React21, { forwardRef as forwardRef17 } from "react";
+
+// src/hooks/useSafeCollisionPadding.ts
+import { useMemo as useMemo2 } 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 useMemo2(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
+  ]);
+};
+
+// src/components/Menu/ContextMenu.tsx
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef17(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Content, {
+    ...props,
+    "data-arrow-keys": "up down",
+    collisionPadding: safeCollisionPadding,
+    className: tx("menu.content", {
+      elevation
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot9 : Primitive8.div;
+  return /* @__PURE__ */ React21.createElement(Root8, {
+    ...props,
+    className: tx("menu.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Arrow, {
+    ...props,
+    className: tx("menu.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Item, {
+    ...props,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.CheckboxItem, {
+    ...props,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Separator, {
+    ...props,
+    className: tx("menu.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(ContextMenuPrimitive.Label, {
+    ...props,
+    className: tx("menu.groupLabel", {}, classNames),
+    ref: forwardedRef
+  });
+});
+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
+};
+
+// src/components/Menu/DropdownMenu.tsx
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
+import { useId as useId2 } from "@radix-ui/react-id";
+import * as MenuPrimitive from "@radix-ui/react-menu";
+import { createMenuScope } from "@radix-ui/react-menu";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
+import React22, { forwardRef as forwardRef18, useCallback as useCallback8, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2 } from "react";
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope2(DROPDOWN_MENU_NAME, [
+  createMenuScope
+]);
+var useMenuScope = createMenuScope();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenuRoot = (props) => {
+  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = useRef2(null);
+  const [open = false, setOpen] = useControllableState4({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React22.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: useId2(),
+    triggerRef,
+    contentId: useId2(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ React22.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen,
+    dir,
+    modal
+  }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ React22.createElement(Primitive9.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),
+    "data-arrow-keys": "down",
+    onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+      if (!disabled && event.button === 0 && event.ctrlKey === false) {
+        context.onOpenToggle();
+        if (!context.open) {
+          event.preventDefault();
+        }
+      }
+    }),
+    onKeyDown: composeEventHandlers(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();
+      }
+    })
+  }));
+});
+DropdownMenuTrigger.displayName = TRIGGER_NAME;
+var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
+var DropdownMenuVirtualTrigger = (props) => {
+  const { __scopeDropdownMenu, virtualRef } = props;
+  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  useEffect4(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Anchor, {
+    ...menuScope,
+    virtualRef
+  });
+};
+DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
+var PORTAL_NAME = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
+  });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot10 : Primitive9.div;
+  return /* @__PURE__ */ React22.createElement(Root8, {
+    ...props,
+    className: tx("menu.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
+  const { tx } = useThemeContext();
+  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const elevation = useElevationContext();
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const hasInteractedOutsideRef = useRef2(false);
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  const computedCollisionBoundary = useMemo3(() => {
+    const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+    return closestBoundary ? Array.isArray(collisionBoundary) ? [
+      closestBoundary,
+      ...collisionBoundary
+    ] : collisionBoundary ? [
+      closestBoundary,
+      collisionBoundary
+    ] : [
+      closestBoundary
+    ] : collisionBoundary;
+  }, [
+    context.open,
+    collisionBoundary,
+    context.triggerRef.current
+  ]);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    collisionBoundary: computedCollisionBoundary,
+    collisionPadding: safeCollisionPadding,
+    ref: forwardedRef,
+    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+      if (!hasInteractedOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+      hasInteractedOutsideRef.current = false;
+      event.preventDefault();
+    }),
+    onInteractOutside: composeEventHandlers(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;
+      }
+    }),
+    "data-arrow-keys": "up down",
+    className: tx("menu.content", {
+      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)"
+      }
+    }
+  });
+});
+DropdownMenuContent.displayName = CONTENT_NAME;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Label, {
+    ...menuScope,
+    ...labelProps,
+    className: tx("menu.groupLabel", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.CheckboxItem, {
+    ...menuScope,
+    ...checkboxItemProps,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
+    className: tx("menu.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Arrow, {
+    ...menuScope,
+    ...arrowProps,
+    className: tx("menu.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuArrow.displayName = ARROW_NAME;
+var DropdownMenuSub = (props) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = useControllableState4({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React22.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)"
+      }
+    }
+  });
+});
+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;
+
+// src/components/Message/Message.tsx
+import { createContext as createContext7 } from "@radix-ui/react-context";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React23, { forwardRef as forwardRef19 } from "react";
+import { useId as useId3 } from "@dxos/react-hooks";
+var messageIcons = {
+  success: "ph--check-circle--duotone",
+  info: "ph--info--duotone",
+  warning: "ph--warning--duotone",
+  error: "ph--warning-circle--duotone",
+  neutral: "ph--info--duotone"
+};
+var MESSAGE_NAME = "Message";
+var [MessageProvider, useMessageContext] = createContext7(MESSAGE_NAME);
+var MessageRoot = /* @__PURE__ */ forwardRef19(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const titleId = useId3("message__title", propsTitleId);
+  const descriptionId = useId3("message__description", propsDescriptionId);
+  const elevation = useElevationContext(propsElevation);
+  const Root8 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React23.createElement(MessageProvider, {
+    titleId,
+    descriptionId,
+    valence
+  }, /* @__PURE__ */ React23.createElement(Root8, {
+    role: valence === "neutral" ? "paragraph" : "alert",
+    ...props,
+    className: tx("message.root", {
+      valence,
+      elevation
+    }, classNames),
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    ref: forwardedRef
+  }, children));
+});
+MessageRoot.displayName = MESSAGE_NAME;
+var MESSAGE_TITLE_NAME = "MessageTitle";
+var MessageTitle = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
+  const Root8 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React23.createElement(Root8, {
+    ...props,
+    className: tx("message.title", {}, classNames),
+    id: titleId,
+    ref: forwardedRef
+  }, !icon && valence === "neutral" ? null : /* @__PURE__ */ React23.createElement(Icon, {
+    size: 5,
+    icon: icon ?? messageIcons[valence],
+    classNames: tx("message.icon", {
+      valence
+    })
+  }), /* @__PURE__ */ React23.createElement("span", null, children));
+});
+MessageTitle.displayName = MESSAGE_TITLE_NAME;
+var MESSAGE_CONTENT_NAME = "MessageContent";
+var MessageContent = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
+  const Root8 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React23.createElement(Root8, {
+    ...props,
+    className: tx("message.content", {}, classNames),
+    id: descriptionId,
+    ref: forwardedRef
+  }, children);
+});
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+var Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent
+};
+var Callout = Message;
+
+// src/components/Popover/Popover.tsx
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { useFocusGuards } from "@radix-ui/react-focus-guards";
+import { FocusScope } from "@radix-ui/react-focus-scope";
+import { useId as useId4 } 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 Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
+import { hideOthers } from "aria-hidden";
+import React24, { forwardRef as forwardRef20, useCallback as useCallback9, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
+  createPopperScope
+]);
+var usePopperScope = createPopperScope();
+var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+var PopoverRoot = (props) => {
+  const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const triggerRef = useRef3(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState6(false);
+  const [open = false, setOpen] = useControllableState5({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React24.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React24.createElement(PopoverProvider, {
+    scope: __scopePopover,
+    contentId: useId4(),
+    triggerRef,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    hasCustomAnchor,
+    onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
+    modal
+  }, children));
+};
+PopoverRoot.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...anchorProps } = props;
+  const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+  useEffect5(() => {
+    onCustomAnchorAdd();
+    return () => onCustomAnchorRemove();
+  }, [
+    onCustomAnchorAdd,
+    onCustomAnchorRemove
+  ]);
+  return /* @__PURE__ */ React24.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    ...anchorProps,
+    ref: forwardedRef
+  });
+});
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME2 = "PopoverTrigger";
+var PopoverTrigger = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...triggerProps } = props;
+  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ React24.createElement(Primitive11.button, {
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context.open,
+    "aria-controls": context.contentId,
+    "data-state": getState(context.open),
+    ...triggerProps,
+    ref: composedTriggerRef,
+    onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
+  });
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React24.createElement(PopperPrimitive.Anchor, {
+    asChild: true,
+    ...popperScope
+  }, trigger);
+});
+PopoverTrigger.displayName = TRIGGER_NAME2;
+var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
+var PopoverVirtualTrigger = (props) => {
+  const { __scopePopover, virtualRef } = props;
+  const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  useEffect5(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React24.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    virtualRef
+  });
+};
+PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
+var PORTAL_NAME2 = "PopoverPortal";
+var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
+  forceMount: void 0
+});
+var PopoverPortal = (props) => {
+  const { __scopePopover, forceMount, children, container } = props;
+  const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
+  return /* @__PURE__ */ React24.createElement(PortalProvider, {
+    scope: __scopePopover,
+    forceMount
+  }, /* @__PURE__ */ React24.createElement(Presence, {
+    present: forceMount || context.open
+  }, /* @__PURE__ */ React24.createElement(PortalPrimitive, {
+    asChild: true,
+    container
+  }, children)));
+};
+PopoverPortal.displayName = PORTAL_NAME2;
+var CONTENT_NAME2 = "PopoverContent";
+var PopoverContent = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  return /* @__PURE__ */ React24.createElement(Presence, {
+    present: forceMount || context.open
+  }, context.modal ? /* @__PURE__ */ React24.createElement(PopoverContentModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }) : /* @__PURE__ */ React24.createElement(PopoverContentNonModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }));
+});
+PopoverContent.displayName = CONTENT_NAME2;
+var PopoverContentModal = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const contentRef = useRef3(null);
+  const composedRefs = useComposedRefs(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef3(false);
+  useEffect5(() => {
+    const content = contentRef.current;
+    if (content) {
+      return hideOthers(content);
+    }
+  }, []);
+  return /* @__PURE__ */ React24.createElement(RemoveScroll, {
+    as: Slot12,
+    allowPinchZoom: true
+  }, /* @__PURE__ */ React24.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: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
+      event.preventDefault();
+      if (!isRightClickOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+    }),
+    onPointerDownOutside: composeEventHandlers2(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: composeEventHandlers2(props.onFocusOutside, (event) => event.preventDefault(), {
+      checkForDefaultPrevented: false
+    })
+  }));
+});
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const hasInteractedOutsideRef = useRef3(false);
+  const hasPointerDownOutsideRef = useRef3(false);
+  return /* @__PURE__ */ React24.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();
+      }
+    }
+  });
+});
+var PopoverContentImpl = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  useFocusGuards();
+  const computedCollisionBoundary = useMemo4(() => {
+    const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+    return closestBoundary ? Array.isArray(collisionBoundary) ? [
+      closestBoundary,
+      ...collisionBoundary
+    ] : collisionBoundary ? [
+      closestBoundary,
+      collisionBoundary
+    ] : [
+      closestBoundary
+    ] : collisionBoundary;
+  }, [
+    context.open,
+    collisionBoundary,
+    context.triggerRef.current
+  ]);
+  return /* @__PURE__ */ React24.createElement(FocusScope, {
+    asChild: true,
+    loop: true,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: onCloseAutoFocus
+  }, /* @__PURE__ */ React24.createElement(DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onDismiss: () => context.onOpenChange(false)
+  }, /* @__PURE__ */ React24.createElement(PopperPrimitive.Content, {
+    "data-state": getState(context.open),
+    role: "dialog",
+    id: context.contentId,
+    ...popperScope,
+    ...contentProps,
+    collisionPadding: safeCollisionPadding,
+    collisionBoundary: computedCollisionBoundary,
+    className: tx("popover.content", {
+      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)"
+      }
+    }
+  })));
+});
+var CLOSE_NAME = "PopoverClose";
+var PopoverClose = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...closeProps } = props;
+  const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+  return /* @__PURE__ */ React24.createElement(Primitive11.button, {
+    type: "button",
+    ...closeProps,
+    ref: forwardedRef,
+    onClick: composeEventHandlers2(props.onClick, () => context.onOpenChange(false))
+  });
+});
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME2 = "PopoverArrow";
+var PopoverArrow = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, classNames, ...arrowProps } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React24.createElement(PopperPrimitive.Arrow, {
+    ...popperScope,
+    ...arrowProps,
+    className: tx("popover.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+PopoverArrow.displayName = ARROW_NAME2;
+var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React24.createElement(Root8, {
+    ...props,
+    className: tx("popover.viewport", {
+      constrainInline,
+      constrainBlock
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+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
+};
+
+// src/components/Status/Status.tsx
+import React25, { forwardRef as forwardRef21 } from "react";
+var Status = /* @__PURE__ */ forwardRef21(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement("span", {
+    role: "status",
+    ...props,
+    className: tx("status.root", {
+      indeterminate,
+      variant
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React25.createElement("span", {
+    role: "none",
+    className: tx("status.bar", {
+      indeterminate,
+      variant
+    }, classNames),
+    ...!indeterminate && {
+      style: {
+        width: `${Math.round(progress * 100)}%`
+      }
+    }
+  }), children);
+});
+
+// src/components/ScrollArea/ScrollArea.tsx
+import { createContext as createContext8 } from "@radix-ui/react-context";
+import React26, { forwardRef as forwardRef22 } from "react";
+var SCROLLAREA_NAME = "ScrollArea";
+var [ScrollAreaProvider, useScrollAreaContext] = createContext8(SCROLLAREA_NAME);
+var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef22(({ className, classNames, children, orientation = "vertical", autoHide = true, margin = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const options = {
+    orientation,
+    autoHide,
+    margin,
+    padding,
+    thin,
+    snap
+  };
+  return /* @__PURE__ */ React26.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React26.createElement("div", {
+    ...props,
+    className: tx("scrollArea.root", options, [
+      className,
+      classNames
+    ]),
+    ref: forwardedRef
+  }, children));
+});
+ScrollAreaRoot.displayName = SCROLLAREA_ROOT_NAME;
+var SCROLLAREA_VIEWPORT_NAME = "ScrollArea.Viewport";
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
+  return /* @__PURE__ */ React26.createElement("div", {
+    ...props,
+    className: tx("scrollArea.viewport", options, classNames),
+    ref: forwardedRef
+  }, children);
+});
+ScrollAreaViewport.displayName = SCROLLAREA_VIEWPORT_NAME;
+var ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport
+};
+
+// src/components/ScrollContainer/ScrollContainer.tsx
+import { createContext as createContext9 } from "@radix-ui/react-context";
+import React27, { forwardRef as forwardRef23, useCallback as useCallback10, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef4, useState as useState7 } from "react";
+import { addEventListener as addEventListener2, combine } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
+import { mx as mx4 } from "@dxos/ui-theme";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui/src/components/ScrollContainer/ScrollContainer.tsx";
+var isBottom = (el) => {
+  return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
+};
+var [ScrollContainerProvider, useScrollContainerContext] = createContext9("ScrollContainer");
+var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, behavior: behaviorProp = "smooth" }, forwardedRef) => {
+  const scrollerRef = useRef4(null);
+  const autoScrollRef = useRef4(false);
+  const [overflow, setOverflow] = useState7(false);
+  const [pinned, setPinned] = useState7(pin);
+  const timeoutRef = useRef4(void 0);
+  const scrollToBottom = useCallback10((behavior = behaviorProp) => {
+    if (scrollerRef.current) {
+      autoScrollRef.current = true;
+      scrollerRef.current.classList.add("scrollbar-none");
+      scrollerRef.current.scrollTo({
+        top: scrollerRef.current.scrollHeight,
+        behavior
+      });
+      clearTimeout(timeoutRef.current);
+      if (behavior !== "instant") {
+        timeoutRef.current = setTimeout(() => {
+          scrollerRef.current?.classList.remove("scrollbar-none");
+          autoScrollRef.current = false;
+        }, 500);
+      }
+      setPinned(true);
+    }
+  }, []);
+  const controller = useMemo5(() => ({
+    viewport: scrollerRef.current,
+    scrollToTop: () => {
+      invariant(scrollerRef.current, void 0, {
+        F: __dxlog_file2,
+        L: 95,
+        S: void 0,
+        A: [
+          "scrollerRef.current",
+          ""
+        ]
+      });
+      scrollerRef.current.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+      setPinned(false);
+    },
+    scrollToBottom: () => {
+      scrollToBottom("smooth");
+    }
+  }), [
+    scrollToBottom,
+    scrollerRef.current
+  ]);
+  useImperativeHandle(forwardedRef, () => controller, [
+    controller
+  ]);
+  useEffect6(() => {
+    if (!scrollerRef.current) {
+      return;
+    }
+    return combine(
+      // Check if user scrolls.
+      addEventListener2(scrollerRef.current, "wheel", () => {
+        setPinned(isBottom(scrollerRef.current));
+      }),
+      // Check if scrolls.
+      addEventListener2(scrollerRef.current, "scroll", () => {
+        setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
+      })
+    );
+  }, []);
+  return /* @__PURE__ */ React27.createElement(ScrollContainerProvider, {
+    pinned,
+    controller,
+    scrollToBottom
+  }, /* @__PURE__ */ React27.createElement("div", {
+    className: "relative grid flex-1 min-bs-0 overflow-hidden"
+  }, fade && /* @__PURE__ */ React27.createElement("div", {
+    role: "none",
+    "data-visible": overflow,
+    className: mx4(
+      // NOTE: Gradients may not be visible with dark reader extensions.
+      "z-10 absolute block-start-0 inset-inline-0 bs-24 is-full",
+      'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
+      "bg-gradient-to-b from-[--surface-bg] to-transparent pointer-events-none"
+    )
+  }), /* @__PURE__ */ React27.createElement(ScrollArea.Root, {
+    classNames: mx4("min-bs-0", classNames),
+    ref: scrollerRef,
+    thin: true
+  }, /* @__PURE__ */ React27.createElement(ScrollArea.Viewport, null, children))));
+});
+Root3.displayName = "ScrollContainer.Root";
+var VIEWPORT_NAME = "ScrollContainer.Viewport";
+var Viewport = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+  const contentRef = useForwardedRef2(forwardedRef);
+  const { pinned, scrollToBottom } = useScrollContainerContext(VIEWPORT_NAME);
+  useEffect6(() => {
+    if (!pinned || !contentRef.current) {
+      return;
+    }
+    scrollToBottom();
+    const resizeObserver = new ResizeObserver(() => scrollToBottom());
+    resizeObserver.observe(contentRef.current);
+    return () => resizeObserver.disconnect();
+  }, [
+    pinned,
+    scrollToBottom
+  ]);
+  return /* @__PURE__ */ React27.createElement("div", {
+    className: mx4("is-full", classNames),
+    ...props,
+    ref: contentRef
+  }, children);
+});
+Viewport.displayName = VIEWPORT_NAME;
+var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
+var ScrollDownButton = ({ classNames }) => {
+  const { pinned, scrollToBottom } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
+  return /* @__PURE__ */ React27.createElement("div", {
+    role: "none",
+    className: mx4("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React27.createElement(IconButton, {
+    variant: "primary",
+    icon: "ph--arrow-down--regular",
+    iconOnly: true,
+    size: 4,
+    label: "Scroll down",
+    onClick: () => scrollToBottom()
+  }));
+};
+ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+var ScrollContainer = {
+  Root: Root3,
+  Viewport,
+  ScrollDownButton
+};
+
+// src/components/Select/Select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import React28, { 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) => {
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React28.createElement(Button, props, /* @__PURE__ */ React28.createElement(SelectPrimitive.Value, {
+    placeholder
+  }, children), /* @__PURE__ */ React28.createElement("span", {
+    className: "is-1 flex-1"
+  }), /* @__PURE__ */ React28.createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /* @__PURE__ */ React28.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }))));
+});
+var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Content, {
+    ...props,
+    "data-arrow-keys": "up down",
+    collisionPadding: safeCollisionPadding,
+    className: tx("select.content", {
+      elevation
+    }, classNames),
+    position: "popper",
+    ref: forwardedRef
+  }, children);
+});
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollUpButton, {
+    ...props,
+    className: tx("select.scrollButton", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React28.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-up--bold"
+  }));
+});
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollDownButton, {
+    ...props,
+    className: tx("select.scrollButton", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React28.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
+});
+var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectViewport, {
+    ...props,
+    className: tx("select.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectItemText = SelectPrimitive.ItemText;
+var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemIndicator, {
+    ...props,
+    className: tx("select.itemIndicator", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React28.createElement("span", {
+    className: "grow is-1"
+  }), /* @__PURE__ */ React28.createElement(Icon, {
+    icon: "ph--check--regular"
+  }));
+});
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Separator, {
+    ...props,
+    className: tx("select.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Arrow, {
+    ...props,
+    className: tx("select.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+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
+};
+
+// src/components/Separator/Separator.tsx
+import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
+import React29, { forwardRef as forwardRef25 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React29.createElement(SeparatorPrimitive, {
+    orientation,
+    ...props,
+    className: tx("separator.root", {
+      orientation,
+      subdued
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Skeleton/Skeleton.tsx
+import React30, { forwardRef as forwardRef26 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default", ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React30.createElement("div", {
+    ...props,
+    className: tx("skeleton.root", {
+      variant
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Splitter/Splitter.tsx
+import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
+import React31, { forwardRef as forwardRef27 } from "react";
+import { mx as mx5 } from "@dxos/ui-theme";
+var SPLITTER_NAME = "Splitter";
+var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
+var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
+var ROOT_NAME = "Splitter.Root";
+var Root5 = /* @__PURE__ */ forwardRef27(({ __scopeSplitter, classNames, mode = "upper", ratio = 0.5, transition = 250, children, ...rootProps }, forwardedRef) => {
+  return /* @__PURE__ */ React31.createElement(SplitterProvider, {
+    scope: __scopeSplitter,
+    mode,
+    ratio,
+    transition
+  }, /* @__PURE__ */ React31.createElement("div", {
+    role: "none",
+    ...rootProps,
+    ref: forwardedRef,
+    className: mx5("relative bs-full overflow-hidden", classNames)
+  }, children));
+});
+Root5.displayName = ROOT_NAME;
+var PANEL_NAME = "Splitter.Panel";
+var Panel = /* @__PURE__ */ forwardRef27(({ __scopeSplitter, classNames, children, position, style, ...panelProps }, forwardedRef) => {
+  const context = useSplitterContext(PANEL_NAME, __scopeSplitter);
+  const { mode, ratio, transition } = context;
+  const isUpper = position === "upper";
+  const top = isUpper ? "0%" : mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%`;
+  const height = isUpper ? mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%` : mode === "lower" ? "100%" : mode === "upper" ? "0%" : `${(1 - ratio) * 100}%`;
+  return /* @__PURE__ */ React31.createElement("div", {
+    ...panelProps,
+    ref: forwardedRef,
+    className: mx5("absolute inset-inline-0 flex flex-col overflow-hidden", classNames),
+    style: {
+      top,
+      height,
+      transition: `top ${transition}ms, height ${transition}ms ease-out`,
+      ...style
+    }
+  }, children);
+});
+Panel.displayName = PANEL_NAME;
+var Splitter = {
+  Root: Root5,
+  Panel
+};
+
+// src/components/Tag/Tag.tsx
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React32, { forwardRef as forwardRef28 } from "react";
+var Tag = /* @__PURE__ */ forwardRef28(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React32.createElement(Root8, {
+    ...props,
+    className: tx("tag.root", {
+      palette
+    }, classNames),
+    "data-hue": palette,
+    ref: forwardedRef
+  });
+});
+
+// src/components/Toast/Toast.tsx
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
+import { ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastProvider as ToastProviderPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastViewport as ToastViewportPrimitive } from "@radix-ui/react-toast";
+import React33, { forwardRef as forwardRef29 } from "react";
+var ToastProvider = ToastProviderPrimitive;
+var ToastViewport = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React33.createElement(ToastViewportPrimitive, {
+    className: tx("toast.viewport", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastRoot = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React33.createElement(ToastRootPrimitive, {
+    ...props,
+    className: tx("toast.root", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React33.createElement(ElevationProvider, {
+    elevation: "toast"
+  }, children));
+});
+var ToastBody = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React33.createElement(Root8, {
+    ...props,
+    className: tx("toast.body", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastTitle = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React33.createElement(Root8, {
+    ...props,
+    className: tx("toast.title", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastDescription = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React33.createElement(Root8, {
+    ...props,
+    className: tx("toast.description", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastActions = /* @__PURE__ */ forwardRef29(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React33.createElement(Root8, {
+    ...props,
+    className: tx("toast.actions", {}, classNames),
+    ref: forwardedRef
+  });
+});
+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
+};
+
+// src/components/Toolbar/Toolbar.tsx
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import React34, { Fragment, forwardRef as forwardRef30 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef30(({ classNames, children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const InnerRoot = textBlockWidthProp ? "div" : Fragment;
+  const innerRootProps = textBlockWidthProp ? {
+    role: "none",
+    className: tx("toolbar.inner", {
+      layoutManaged
+    }, classNames)
+  } : {};
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Root, {
+    ...props,
+    "data-arrow-keys": props.orientation === "vertical" ? "up down" : "left right",
+    className: tx("toolbar.root", {
+      density,
+      disabled,
+      layoutManaged
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React34.createElement(InnerRoot, innerRootProps, children));
+});
+var ToolbarButton = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarIconButton = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(IconButton, {
+    ...props,
+    noTooltip: true,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggle = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(Toggle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarLink = /* @__PURE__ */ forwardRef30((props, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Link, {
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(Link, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef30(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(ButtonGroup, {
+    classNames,
+    children,
+    elevation,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef30(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(Button, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef30(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React34.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    ref: forwardedRef
+  }));
+});
+var ToolbarSeparator = /* @__PURE__ */ forwardRef30(({ variant = "line", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React34.createElement(Separator4, {
+    ...props,
+    ref: forwardedRef
+  })) : /* @__PURE__ */ React34.createElement(ToolbarPrimitive.Separator, {
+    className: "grow",
+    ref: forwardedRef
+  });
+});
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
+  Link: ToolbarLink,
+  Toggle: ToolbarToggle,
+  ToggleGroup: ToolbarToggleGroup2,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
+};
+
+// src/primitives/Container/Container.tsx
+import { createContext as createContext10 } from "@radix-ui/react-context";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
+import React35, { forwardRef as forwardRef31 } from "react";
+var [ContainerProvider, useContext4] = createContext10("Container");
+var Root7 = ({ variant, children }) => {
+  return /* @__PURE__ */ React35.createElement(ContainerProvider, {
+    variant
+  }, children);
+};
+var CONTAINER_COLUMN_NAME = "Container.Column";
+var Column = /* @__PURE__ */ forwardRef31(({ classNames, className, asChild, role = "none", children, variant, ...props }, ref) => {
+  const { tx } = useThemeContext();
+  const Root8 = asChild ? Slot15 : Primitive14.div;
+  const context = useContext4(CONTAINER_COLUMN_NAME);
+  return /* @__PURE__ */ React35.createElement(Root8, {
+    ...props,
+    className: tx("container.column", {
+      variant: variant ?? context.variant
+    }, [
+      className,
+      classNames
+    ]),
+    role,
+    ref
+  }, children);
+});
+Column.displayName = CONTAINER_COLUMN_NAME;
+var Container = {
+  Root: Root7,
+  Column
+};
+
+// src/primitives/Container/Layout.tsx
+import React36, { forwardRef as forwardRef32, useMemo as useMemo6 } from "react";
+import { mx as mx6 } from "@dxos/ui-theme";
+var Main2 = /* @__PURE__ */ forwardRef32(({ classNames, children, role, toolbar, statusbar }, forwardedRef) => {
+  const style = useMemo6(() => ({
+    gridTemplateRows: [
+      toolbar && "var(--toolbar-size)",
+      "1fr",
+      statusbar && "var(--statusbar-size)"
+    ].filter(Boolean).join(" ")
+  }), [
+    toolbar,
+    statusbar
+  ]);
+  return /* @__PURE__ */ React36.createElement("div", {
+    ref: forwardedRef,
+    role: role ?? "none",
+    style,
+    className: mx6("bs-full is-full grid grid-cols-[100%] overflow-hidden", toolbar && [
+      "[.dx-main-mobile-layout_&>.dx-toolbar]:pli-3 [&>.dx-toolbar]:relative",
+      "[&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator"
+    ], classNames)
+  }, children);
+});
+var Layout = {
+  Main: Main2
+};
+
+// src/primitives/Flex/Flex.tsx
+import React37 from "react";
+import { mx as mx7 } from "@dxos/ui-theme";
+var Flex = ({ children, classNames, role, column, grow }) => {
+  return /* @__PURE__ */ React37.createElement("div", {
+    role: role ?? "none",
+    className: mx7("flex", column && "flex-col", grow && "flex-1 overflow-hidden", classNames)
+  }, children);
+};
 export {
   AlertDialog,
   AnchoredOverflow,
@@ -85,18 +3217,21 @@ export {
   ButtonGroup,
   Callout,
   Clipboard,
-  ContextMenu,
+  Container,
+  ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,
   Dialog,
   DropdownMenu,
   ElevationContext,
   ElevationProvider,
+  Flex,
   Icon,
   IconButton,
   Input,
   LIST_ITEM_NAME,
   LIST_NAME,
+  Layout,
   Link,
   List,
   ListItem,
@@ -104,8 +3239,11 @@ export {
   Message,
   Popover,
   ScrollArea,
+  ScrollContainer,
   Select,
-  Separator,
+  Separator4 as Separator,
+  Skeleton,
+  Splitter,
   Status,
   Tag,
   ThemeContext,
@@ -113,6 +3251,7 @@ export {
   Toast,
   Toggle,
   ToggleGroup,
+  ToggleGroupIconItem,
   ToggleGroupItem,
   Toolbar,
   Tooltip,
@@ -122,6 +3261,7 @@ export {
   Treegrid,
   createDropdownMenuScope,
   createPopoverScope,
+  createSplitterScope,
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
@@ -140,7 +3280,9 @@ export {
   useListContext,
   useListItemContext,
   useMainContext,
+  usePx,
   useSafeArea,
+  useScrollContainerContext,
   useSidebars,
   useThemeContext,
   useTooltipContext,