@dxos/react-ui 0.8.4-main.72ec0f3 → 0.8.4-main.765dc60934

package/dist/lib/browser/index.mjs

@@ -1,105 +1,4413 @@
 import {
-  AlertDialog,
-  AnchoredOverflow,
-  Avatar,
-  BUTTON_GROUP_NAME,
-  Breadcrumb,
-  Button,
-  ButtonGroup,
-  Callout,
-  Clipboard,
-  ContextMenu,
   DensityContext,
   DensityProvider,
-  Dialog,
-  Domino,
-  DropdownMenu,
   ElevationContext,
   ElevationProvider,
-  Icon,
-  IconButton,
-  Input,
-  LIST_ITEM_NAME,
-  LIST_NAME,
-  Link,
-  List,
-  ListItem,
-  Main,
-  Message,
-  Popover,
-  ScrollArea,
-  ScrollContainer,
-  Select,
-  Separator,
-  Status,
-  Tag,
+  ErrorStack,
   ThemeContext,
   ThemeProvider,
-  Toast,
-  Toggle,
-  ToggleGroup,
-  ToggleGroupIconItem,
-  ToggleGroupItem,
-  Toolbar,
   Tooltip,
-  Tree,
-  TreeItem,
-  Treegrid,
-  createDropdownMenuScope,
-  createPopoverScope,
+  TranslationsContext,
   createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
-  isLabel,
-  messageIcons,
-  toLocalizedString,
-  useAvatarContext,
-  useButtonGroupContext,
-  useClipboard,
-  useDensityContext,
-  useDropdownMenuContext,
-  useDropdownMenuMenuScope,
+  parseCaptureOwnerStack,
   useElevationContext,
-  useIconHref,
-  useLandmarkMover,
-  useListContext,
-  useListItemContext,
-  useMainContext,
-  usePx,
   useSafeArea,
-  useScrollContainerContext,
-  useSidebars,
   useThemeContext,
   useTooltipContext,
-  useTranslation,
-  useTranslationsContext,
-  useVisualViewport
-} from "./chunk-53MI2QCM.mjs";
+  useTranslation
+} from "./chunk-BDBC6H6V.mjs";
+import {
+  translationKey
+} from "./chunk-A5QCIG5R.mjs";
 
 // 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/ThemeProvider/index.ts
+import { isLabel, toLocalizedString } from "@dxos/ui-types/translations";
+
+// src/hooks/useDensityContext.ts
+import { useContext } from "react";
+var useDensityContext = (densityProp) => {
+  const { density } = useContext(DensityContext);
+  return densityProp ?? 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/useSafeCollisionPadding.ts
+import { useMemo } from "react";
+var propIsNumber = (prop) => Number.isFinite(prop);
+var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
+var safePadding = (propsPadding, safePadding2, side) => {
+  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
+};
+var useSafeCollisionPadding = (collisionPadding) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
+  ]);
+};
+
+// 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/util/usePx.ts
+import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+var getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+var usePx = (rem) => {
+  const [fontSize, setFontSize] = useState2(() => {
+    if (typeof document !== "undefined") {
+      return getDocumentElementFontSize();
+    }
+    return 16;
+  });
+  const updateFontSize = useCallback2(() => {
+    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 useMemo2(() => rem * fontSize, [
+    fontSize
+  ]);
+};
+
+// src/components/Avatars/Avatar.tsx
+import { createContext } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { forwardRef } from "react";
+import "@dxos/lit-ui/dx-avatar.pcss";
+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__ */ React.createElement(AvatarProvider, {
+    labelId,
+    descriptionId
+  }, children);
+};
+var AvatarContent = /* @__PURE__ */ forwardRef(({ icon, classNames, ...props }, forwardedRef) => {
+  const href = useIconHref(icon);
+  const { labelId, descriptionId } = useAvatarContext("AvatarContent");
+  return /* @__PURE__ */ React.createElement(DxAvatar, {
+    ...props,
+    icon: href,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    rootClassName: mx(classNames),
+    ref: forwardedRef
+  });
+});
+var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : Primitive.span;
+  const { tx } = useThemeContext();
+  const { labelId } = useAvatarContext("AvatarLabel");
+  return /* @__PURE__ */ React.createElement(Comp, {
+    ...props,
+    id: labelId,
+    ref: forwardedRef,
+    className: tx("avatar.label", {
+      srOnly
+    }, classNames)
+  });
+});
+var AvatarDescription = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : Primitive.span;
+  const { tx } = useThemeContext();
+  const { descriptionId } = useAvatarContext("AvatarDescription");
+  return /* @__PURE__ */ React.createElement(Comp, {
+    ...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 Primitive3 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef4 } from "react";
+
+// src/components/Icon/Icon.tsx
+import React2, { forwardRef as forwardRef2, memo, useMemo as useMemo3 } from "react";
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const spinDelay = useMemo3(() => synchronized ? `${-(Date.now() % 1e3)}ms` : void 0, [
+    synchronized
+  ]);
+  const href = useIconHref(icon);
+  return /* @__PURE__ */ React2.createElement("svg", {
+    ...props,
+    style: {
+      ...style,
+      animationDelay: spinDelay
+    },
+    className: tx("icon.root", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement("use", {
+    href
+  }));
+}));
+
+// src/components/Link/Link.tsx
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React3, { forwardRef as forwardRef3 } from "react";
+var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot2 : Primitive2.a;
+  return /* @__PURE__ */ React3.createElement(Comp, {
+    ...props,
+    className: tx("link.root", {
+      variant
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot3 : Primitive3.div;
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    role: "navigation",
+    ...props,
+    className: tx("breadcrumb.root", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot3 : Primitive3.ol;
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    role: "list",
+    ...props,
+    className: tx("breadcrumb.list", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot3 : Primitive3.li;
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    role: "listitem",
+    ...props,
+    className: tx("breadcrumb.listItem", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot3 : Link;
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot3 : "h1";
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
+    "aria-current": "page",
+    className: tx("breadcrumb.current", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React4.createElement(Primitive3.span, {
+    role: "separator",
+    "aria-hidden": "true",
+    ...props,
+    className: tx("breadcrumb.separator", {}, classNames)
+  }, children ?? /* @__PURE__ */ React4.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 Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React5, { forwardRef as forwardRef5, 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__ */ forwardRef5(({ classNames, children, density: densityProp, elevation: elevationProp, variant = "default", asChild, ...props }, ref) => {
+  const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(elevationProp);
+  const density = useDensityContext(densityProp);
+  const Comp = asChild ? Slot4 : Primitive4.button;
+  return /* @__PURE__ */ React5.createElement(Comp, {
+    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__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const Comp = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React5.createElement(Comp, {
+    role: "none",
+    ...props,
+    className: tx("button.group", {
+      elevation
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement(ButtonGroupProvider, {
+    inGroup: true
+  }, children));
+});
+ButtonGroup.displayName = BUTTON_GROUP_NAME;
+
+// src/components/Button/IconButton.tsx
+import React6, { forwardRef as forwardRef6 } from "react";
+var IconButton = /* @__PURE__ */ forwardRef6((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React6.createElement(IconOnlyButton, {
+  ...props,
+  ref: forwardedRef
+}) : /* @__PURE__ */ React6.createElement(LabelledIconButton, {
+  ...props,
+  ref: forwardedRef
+}));
+var IconOnlyButton = /* @__PURE__ */ forwardRef6(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
+  if (noTooltip) {
+    return /* @__PURE__ */ React6.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  }
+  return /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: props.label,
+    side: tooltipSide
+  }, /* @__PURE__ */ React6.createElement(LabelledIconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React6.createElement(Button, {
+    ...props,
+    classNames: tx("iconButton.root", {
+      iconOnly,
+      square
+    }, classNames),
+    ref: forwardedRef
+  }, icon && !iconEnd && /* @__PURE__ */ React6.createElement(Icon, {
+    icon,
+    size,
+    classNames: iconClassNames
+  }), /* @__PURE__ */ React6.createElement("span", {
+    className: iconOnly ? "sr-only" : void 0
+  }, label), icon && iconEnd && /* @__PURE__ */ React6.createElement(Icon, {
+    icon,
+    size,
+    classNames: iconClassNames
+  }), caretDown && /* @__PURE__ */ React6.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
+});
+
+// src/components/Button/Toggle.tsx
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import React7, { forwardRef as forwardRef7 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement(TogglePrimitive.Root, {
+    defaultPressed,
+    pressed,
+    onPressedChange,
+    asChild: true
+  }, /* @__PURE__ */ React7.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+
+// src/components/Button/ToggleGroup.tsx
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import React8, { forwardRef as forwardRef8 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Root, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(ButtonGroup, {
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Item, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Button, {
+    variant,
+    elevation,
+    density,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive.Item, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(IconButton, {
+    variant,
+    elevation,
+    density,
+    classNames,
+    label,
+    icon,
+    size,
+    ref: forwardedRef
+  }));
+});
+
+// src/components/Card/Card.tsx
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import DOMPurify from "dompurify";
+import React19, { createContext as createContext3, forwardRef as forwardRef13, useContext as useContext3, useMemo as useMemo5 } from "react";
+import { composable as composable3, composableProps as composableProps7, iconSize, mx as mx6, slottable as slottable6 } from "@dxos/ui-theme";
+
+// src/primitives/Column/Column.tsx
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React9 from "react";
+import { composableProps, slottable } from "@dxos/ui-theme";
+var COLUMN_ROOT_NAME = "Column.Root";
+var gutterSizes = {
+  xs: "var(--dx-gutter-xs)",
+  sm: "var(--dx-gutter-sm)",
+  md: "var(--dx-gutter-md)",
+  lg: "var(--dx-gutter-lg)"
+};
+var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
+  const { tx } = useThemeContext();
+  const gutterSize = gutterSizes[gutter];
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    style: {
+      "--gutter": gutterSize,
+      "--dx-col": "2 / span 1",
+      gridTemplateColumns: [
+        gutterSize,
+        "minmax(0,1fr)",
+        gutterSize
+      ].join(" ")
+    },
+    className: tx("column.root", {
+      gutter
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+ColumnRoot.displayName = COLUMN_ROOT_NAME;
+var COLUMN_ROW_NAME = "Column.Row";
+var ColumnRow = slottable(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    className: tx("column.row", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+ColumnRow.displayName = COLUMN_ROW_NAME;
+var COLUMN_BLEED_NAME = "Column.Bleed";
+var ColumnBleed = slottable(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
+    className: tx("column.bleed", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+ColumnBleed.displayName = COLUMN_BLEED_NAME;
+var COLUMN_CENTER_NAME = "Column.Center";
+var ColumnCenter = slottable(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
+    className: tx("column.center", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
+var Column = {
+  Root: ColumnRoot,
+  Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter
+};
+
+// src/primitives/Container/Container.tsx
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React10 from "react";
+import { composableProps as composableProps2, mx as mx2, slottable as slottable2 } from "@dxos/ui-theme";
+var Container = slottable2(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps2(props);
+  const Comp = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React10.createElement(Comp, {
+    ...rest,
+    className: mx2("dx-container", className),
+    ref: forwardedRef
+  }, children);
+});
+
+// src/primitives/Flex/Flex.tsx
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React11 from "react";
+import { composableProps as composableProps3, mx as mx3, slottable as slottable3 } from "@dxos/ui-theme";
+var Flex = slottable3(({ children, asChild, column, grow, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps3(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React11.createElement(Comp, {
+    ref: forwardedRef,
+    ...rest,
+    className: mx3("flex", column && "flex-col", grow && "flex-1 overflow-hidden", className)
+  }, children);
+});
+
+// src/primitives/Grid/Grid.tsx
+import React12 from "react";
+import { composable, composableProps as composableProps4, mx as mx4 } from "@dxos/ui-theme";
+var Grid = composable(({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps4(props);
+  return /* @__PURE__ */ React12.createElement("div", {
+    ref: forwardedRef,
+    ...rest,
+    role: role ?? "none",
+    className: mx4("grid overflow-hidden", grow && "dx-container", className),
+    style: {
+      gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : void 0,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0,
+      ...style
+    }
+  }, children);
+});
+
+// src/primitives/Panel/Panel.tsx
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import React13 from "react";
+import { composableProps as composableProps5, slottable as slottable4 } from "@dxos/ui-theme";
+var GRID_TEMPLATE_ROWS = "auto 1fr auto";
+var GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
+var PanelRoot = slottable4(({ children, asChild, role, style, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot8 : Primitive8.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    style: {
+      gridTemplateRows: GRID_TEMPLATE_ROWS,
+      gridTemplateAreas: GRID_TEMPLATE_AREAS,
+      ...style
+    },
+    className: tx("panel.root", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+PanelRoot.displayName = "Panel.Root";
+var PanelToolbar = slottable4(({ children, asChild, size, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot8 : Primitive8.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
+    "data-slot": "toolbar",
+    className: tx("panel.toolbar", {
+      size
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+PanelToolbar.displayName = "Panel.Toolbar";
+var PanelContent = slottable4(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot8 : Primitive8.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
+    "data-slot": "content",
+    className: tx("panel.content", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+PanelContent.displayName = "Panel.Content";
+var PanelStatusbar = slottable4(({ children, asChild, size, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot8 : Primitive8.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
+    "data-slot": "statusbar",
+    className: tx("panel.statusbar", {
+      size
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+PanelStatusbar.displayName = "Panel.Statusbar";
+var Panel = {
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar
+};
+
+// src/components/Image/Image.tsx
+import React14, { useCallback as useCallback3, useRef, useState as useState3 } from "react";
+import { mx as mx5 } from "@dxos/ui-theme";
+var cache = /* @__PURE__ */ new Map();
+var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+  const [crossOriginState, setCrossOriginState] = useState3(crossOrigin);
+  const [dominantColor, setDominantColor] = useState3(void 0);
+  const [imageLoaded, setImageLoaded] = useState3(false);
+  const canvasRef = useRef(null);
+  const handleImageError = () => {
+    setCrossOriginState(void 0);
+  };
+  const handleImageLoad = useCallback3(({ target }) => {
+    const rgb = cache.get(src);
+    if (rgb) {
+      setDominantColor(rgb);
+      setImageLoaded(true);
+      return;
+    }
+    const img = target;
+    if (!canvasRef.current) {
+      return;
+    }
+    try {
+      const color = extractDominantColor(canvasRef.current, img, {
+        sampleSize,
+        contrast
+      });
+      if (color) {
+        const rgb2 = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+        cache.set(src, rgb2);
+        setDominantColor(rgb2);
+      }
+    } catch {
+      setCrossOriginState(void 0);
+    }
+    setImageLoaded(true);
+  }, [
+    sampleSize,
+    contrast,
+    src
+  ]);
+  return /* @__PURE__ */ React14.createElement("div", {
+    // `isolate` (`isolation: isolate`) creates a new stacking context so
+    // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+    // the z-10 leaks into the parent's stacking context and elevates the
+    // image above any pseudo-element rings (e.g. Focus.Item's
+    // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+    // the focus ring on a Card containing a Card.Poster.
+    className: mx5(`relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`, classNames),
+    style: {
+      backgroundColor: dominantColor
+    }
+  }, /* @__PURE__ */ React14.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      display: "none"
+    },
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ React14.createElement("div", {
+    className: "absolute inset-0 pointer-events-none",
+    style: {
+      background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
+      transition: "opacity 0.7s ease-in-out",
+      opacity: 0.5
+    }
+  }), /* @__PURE__ */ React14.createElement("img", {
+    src,
+    alt,
+    crossOrigin: crossOriginState,
+    onError: handleImageError,
+    onLoad: handleImageLoad,
+    className: mx5("z-10 transition-opacity duration-500", fit === "cover" ? "w-full h-full object-cover" : "object-contain"),
+    style: {
+      opacity: imageLoaded ? 1 : 0
+    }
+  }));
+};
+var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+  const cornerSize = Math.floor(sampleSize * 0.125);
+  for (let y = 0; y < sampleSize; y++) {
+    for (let x = 0; x < sampleSize; x++) {
+      const isInTopLeft = x < cornerSize && y < cornerSize;
+      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
+      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
+      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
+      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
+        continue;
+      }
+      const i = (y * sampleSize + x) * 4;
+      const red = pixels[i];
+      const green = pixels[i + 1];
+      const blue = pixels[i + 2];
+      const alpha = pixels[i + 3];
+      if (alpha === 0) {
+        continue;
+      }
+      const max = Math.max(red, green, blue);
+      const min = Math.min(red, green, blue);
+      const saturation = max === 0 ? 0 : (max - min) / max;
+      const weight = 1 + saturation * 2;
+      r += red * weight;
+      g += green * weight;
+      b += blue * weight;
+      totalWeight += weight;
+    }
+  }
+  if (totalWeight > 0) {
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [
+      r,
+      g,
+      b
+    ];
+  }
+  return null;
+};
+var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4;
+  for (let x = 0; x < sampleSize; x++) {
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+  }
+  for (let y = 1; y < sampleSize - 1; y++) {
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+  }
+  return edgeTransparentPixels / edgePixels > threshold;
+};
+
+// src/components/Toolbar/Toolbar.tsx
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import React18, { forwardRef as forwardRef12 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { composable as composable2, composableProps as composableProps6, slottable as slottable5 } from "@dxos/ui-theme";
+import { translationKey as translationKey2 } from "#translations";
+
+// src/components/Menu/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import React15, { forwardRef as forwardRef9 } from "react";
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef9(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Content, {
+    ...props,
+    "data-arrow-keys": "up down",
+    collisionPadding: safeCollisionPadding,
+    className: tx("menu.content", {
+      elevation
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuViewport = /* @__PURE__ */ forwardRef9(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot9 : Primitive9.div;
+  return /* @__PURE__ */ React15.createElement(Comp, {
+    ...props,
+    className: tx("menu.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuArrow = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Arrow, {
+    ...props,
+    className: tx("menu.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Item, {
+    ...props,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.CheckboxItem, {
+    ...props,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Separator, {
+    ...props,
+    className: tx("menu.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.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 } 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 Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React16, { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
+  createMenuScope
+]);
+var useMenuScope = createMenuScope();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenuRoot = ({ __scopeDropdownMenu, children, dir, modal = true, open: openProp, defaultOpen, onOpenChange }) => {
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = useRef2(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React16.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: useId2(),
+    triggerRef,
+    contentId: useId2(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback4(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ React16.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    dir,
+    modal,
+    open,
+    onOpenChange: setOpen
+  }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ React16.createElement(Primitive10.button, {
+    type: "button",
+    id: context.triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": context.open,
+    "aria-controls": context.open ? context.contentId : void 0,
+    "data-state": context.open ? "open" : "closed",
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    ...triggerProps,
+    ref: composeRefs(forwardedRef, context.triggerRef),
+    "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);
+  useEffect2(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React16.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__ */ React16.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
+  });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef10(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot10 : Primitive10.div;
+  return /* @__PURE__ */ React16.createElement(Comp, {
+    ...props,
+    className: tx("menu.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ forwardRef10((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 = 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__ */ React16.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__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Label, {
+    ...menuScope,
+    ...labelProps,
+    className: tx("menu.groupLabel", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.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__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
+    className: tx("menu.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
+    className: tx("menu.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.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] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef10((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React16.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/Separator/Separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import React17, { forwardRef as forwardRef11 } from "react";
+var Separator3 = /* @__PURE__ */ forwardRef11(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React17.createElement(SeparatorPrimitive.Root, {
+    ...props,
+    orientation,
+    className: tx("separator.root", {
+      orientation,
+      subdued
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// src/components/Toolbar/Toolbar.tsx
+var ToolbarRoot = composable2(({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
+  const { className, role, ...rest } = composableProps6(props);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Root, {
+    ...rest,
+    ...role !== "none" && {
+      role
+    },
+    orientation,
+    "data-arrow-keys": orientation === "vertical" ? "up down" : "left right",
+    className: tx("toolbar.root", {
+      density,
+      disabled,
+      layoutManaged
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+var ToolbarText = slottable5(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps6(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React18.createElement(Comp, {
+    ...rest,
+    className: tx("toolbar.text", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+var ToolbarButton = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarIconButton = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(IconButton, {
+    ...props,
+    noTooltip: true,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggle = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(Toggle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarLink = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Link, {
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(Link, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef12(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(ButtonGroup, {
+    classNames,
+    children,
+    elevation,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(Button, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef12(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    iconClassNames,
+    ref: forwardedRef
+  }));
+});
+var ToolbarSeparator = /* @__PURE__ */ forwardRef12(({ variant = "gap", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(Separator3, {
+    orientation: "vertical",
+    ...props,
+    ref: forwardedRef
+  })) : /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
+    className: "grow",
+    ref: forwardedRef
+  });
+});
+var ToolbarDragHandle = /* @__PURE__ */ forwardRef12(({ testId = "drag-handle", label }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
+    "data-testid": testId,
+    tabIndex: -1,
+    noTooltip: true,
+    iconOnly: true,
+    icon: "ph--dots-six-vertical--regular",
+    variant: "ghost",
+    label: label ?? t("toolbar-drag-handle.label"),
+    classNames: "dx-focus-ring-none cursor-pointer",
+    disabled: !forwardedRef,
+    ref: forwardedRef
+  });
+});
+var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef12(({ onClick, label }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    variant: "ghost",
+    label: label ?? t("toolbar-close.label"),
+    classNames: "cursor-pointer",
+    onClick,
+    ref: forwardedRef
+  });
+});
+var ToolbarMenu = ({ context, items }) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React18.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Trigger, {
+    disabled: !items?.length,
+    asChild: true
+  }, /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("toolbar-menu.label")
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React18.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React18.createElement(DropdownMenu.Item, {
+    key: index,
+    onSelect: () => onSelect(context)
+  }, label))), /* @__PURE__ */ React18.createElement(DropdownMenu.Arrow, null))));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Text: ToolbarText,
+  Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
+  Link: ToolbarLink,
+  Toggle: ToolbarToggle,
+  ToggleGroup: ToolbarToggleGroup2,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator,
+  DragHandle: ToolbarDragHandle,
+  CloseIconButton: ToolbarCloseIconButton,
+  Menu: ToolbarMenu
+};
+
+// src/components/Card/Card.tsx
+var CardContext = /* @__PURE__ */ createContext3({});
+var CARD_ROOT_NAME = "Card.Root";
+var CardRoot = composable3(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Column.Root, {
+    asChild: true,
+    gutter: density === "coarse" ? "lg" : "md",
+    classNames: tx("card.root", {
+      border,
+      fullWidth
+    }, className),
+    role: role ?? "group"
+  }, /* @__PURE__ */ React19.createElement("div", {
+    ...rest,
+    ...id && {
+      "data-object-id": id
+    },
+    ref: forwardedRef
+  }, children));
+});
+CardRoot.displayName = CARD_ROOT_NAME;
+var CARD_TOOLBAR_NAME = "Card.Toolbar";
+var CardToolbar = composable3(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Toolbar.Root, {
+    ...props,
+    style: iconSize(5),
+    classNames: [
+      tx("card.toolbar", {}),
+      classNames
+    ],
+    ref: forwardedRef
+  }, children);
+});
+CardToolbar.displayName = CARD_TOOLBAR_NAME;
+var CARD_DRAG_HANDLE_NAME = "Card.DragHandle";
+var CardDragHandle = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.DragHandle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
+var CARD_CLOSE_ICON_BUTTON_NAME = "Card.CloseIconButton";
+var CloseIconButton = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.CloseIconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+CloseIconButton.displayName = CARD_CLOSE_ICON_BUTTON_NAME;
+var CARD_MENU_NAME = "Card.Menu";
+var CardMenu = ({ context, items, ...props }) => {
+  const { menuItems } = useContext3(CardContext) ?? {};
+  const combinedItems = [
+    ...items ?? [],
+    ...menuItems ?? []
+  ];
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, {
+    padding: true
+  }, /* @__PURE__ */ React19.createElement(Toolbar.Menu, {
+    ...props,
+    context,
+    items: combinedItems
+  }));
+};
+CardMenu.displayName = CARD_MENU_NAME;
+var CARD_ICON_NAME = "Card.Icon";
+var CardIcon = (props) => {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, null, /* @__PURE__ */ React19.createElement(Icon, props));
+};
+CardIcon.displayName = CARD_ICON_NAME;
+var CARD_ICON_BLOCK_NAME = "Card.IconBlock";
+var CardIconBlock = /* @__PURE__ */ forwardRef13(({ classNames, children, padding, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement("div", {
+    ...props,
+    className: tx("card.icon-block", {
+      padding
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
+var CARD_TITLE_NAME = "Card.Title";
+var CardTitle = slottable6(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps7(props, {
+    role: "heading"
+  });
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    className: tx("card.title", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+CardTitle.displayName = CARD_TITLE_NAME;
+var CARD_CONTENT_NAME = "Card.Content";
+var CardContent = slottable6(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    className: tx("card.content", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+CardContent.displayName = CARD_CONTENT_NAME;
+var CARD_ROW_NAME = "Card.Row";
+var CardRow = slottable6(({ children, asChild, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    className: tx("card.row", {}, className),
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React19.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon,
+    size: 4
+  }) || /* @__PURE__ */ React19.createElement("div", null), children);
+});
+CardRow.displayName = CARD_ROW_NAME;
+var CARD_SECTION_NAME = "Card.Section";
+var CardSection = slottable6(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    className: mx6("col-span-full", className),
+    ref: forwardedRef
+  }, children);
+});
+CardSection.displayName = CARD_SECTION_NAME;
+var CARD_HEADING_NAME = "Card.Heading";
+var CardHeading = slottable6(({ children, asChild, role, variant = "default", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    role: role ?? "heading",
+    className: tx("card.heading", {
+      variant
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+CardHeading.displayName = CARD_HEADING_NAME;
+var CARD_TEXT_NAME = "Card.Text";
+var CardText = slottable6(({ children, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot12 : Primitive12.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    className: tx("card.text", {
+      variant
+    }, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React19.createElement("span", {
+    className: tx("card.text-span", {
+      variant,
+      truncate
+    })
+  }, children));
+});
+CardText.displayName = CARD_TEXT_NAME;
+var CARD_HTML_NAME = "Card.Html";
+var CardHtml = ({ html, variant = "default", ...props }) => {
+  const { tx } = useThemeContext();
+  const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
+    html
+  ]);
+  return /* @__PURE__ */ React19.createElement("div", {
+    ...props,
+    className: tx("card.text", {
+      variant
+    }),
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: sanitized
+    }
+  });
+};
+CardHtml.displayName = CARD_HTML_NAME;
+var CARD_POSTER_NAME = "Card.Poster";
+var CardPoster = (props) => {
+  const { tx } = useThemeContext();
+  const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+  if (props.image) {
+    return /* @__PURE__ */ React19.createElement("div", {
+      className: "col-span-full"
+    }, /* @__PURE__ */ React19.createElement(Image, {
+      classNames: [
+        tx("card.poster", {}),
+        aspect,
+        props.classNames
+      ],
+      src: props.image,
+      alt: props.alt,
+      fit: props.fit
+    }));
+  }
+  if (props.icon) {
+    return /* @__PURE__ */ React19.createElement("div", {
+      role: "image",
+      className: tx("card.poster-icon", {}, [
+        aspect,
+        props.classNames
+      ]),
+      "aria-label": props.alt
+    }, /* @__PURE__ */ React19.createElement(Icon, {
+      icon: props.icon,
+      size: 10
+    }));
+  }
+};
+CardPoster.displayName = CARD_POSTER_NAME;
+var CARD_ACTION_NAME = "Card.Action";
+var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(Button, {
+    variant: "ghost",
+    classNames: tx("card.action", {}),
+    onClick
+  }, icon ? /* @__PURE__ */ React19.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon,
+    size: 4
+  }) : /* @__PURE__ */ React19.createElement("div", null), /* @__PURE__ */ React19.createElement("span", {
+    className: tx("card.action-label", {}, !actionIcon ? "col-span-2" : void 0)
+  }, label), actionIcon && /* @__PURE__ */ React19.createElement(CardIcon, {
+    icon: actionIcon,
+    size: 4
+  }));
+};
+CardAction.displayName = CARD_ACTION_NAME;
+var CARD_LINK_NAME = "Card.Link";
+var CardLink = ({ label, href }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement("a", {
+    className: tx("card.link", {}),
+    "data-variant": "ghost",
+    href,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /* @__PURE__ */ React19.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon: "ph--link--regular"
+  }), /* @__PURE__ */ React19.createElement("span", {
+    className: tx("card.link-label", {})
+  }, label), /* @__PURE__ */ React19.createElement(CardIcon, {
+    classNames: "invisible group-hover:visible",
+    icon: "ph--arrow-square-out--regular"
+  }));
+};
+CardLink.displayName = CARD_LINK_NAME;
+var Card = {
+  Root: CardRoot,
+  // Toolbar
+  Toolbar: CardToolbar,
+  ToolbarIconButton: Toolbar.IconButton,
+  ToolbarSeparator: Toolbar.Separator,
+  // Toolbar blocks
+  IconBlock: CardIconBlock,
+  DragHandle: CardDragHandle,
+  CloseIconButton,
+  Menu: CardMenu,
+  Icon: CardIcon,
+  Title: CardTitle,
+  // Content
+  Content: CardContent,
+  Row: CardRow,
+  Section: CardSection,
+  Heading: CardHeading,
+  Text: CardText,
+  Html: CardHtml,
+  Poster: CardPoster,
+  Action: CardAction,
+  Link: CardLink
+};
+
+// src/components/Carousel/Carousel.tsx
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import React20, { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useEffect as useEffect3, useMemo as useMemo6, useState as useState4 } from "react";
+import { mx as mx7 } from "@dxos/ui-theme";
+var CarouselContext = /* @__PURE__ */ createContext4(null);
+var useCarousel = () => {
+  const context = useContext4(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within Carousel.Root");
+  }
+  return context;
+};
+var CarouselRoot = ({ classNames, children, count, autorun = false, intervalMs = 5e3, defaultIndex = 0 }) => {
+  const [index, setIndexState] = useState4(defaultIndex);
+  const [autoAdvance, setAutoAdvance] = useState4(autorun);
+  useEffect3(() => {
+    if (index >= count) {
+      setIndexState(0);
+    }
+  }, [
+    count,
+    index
+  ]);
+  useEffect3(() => {
+    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+      return;
+    }
+    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    return () => clearInterval(handle);
+  }, [
+    autoAdvance,
+    count,
+    intervalMs
+  ]);
+  const setIndex = useCallback5((next2) => {
+    setAutoAdvance(false);
+    setIndexState(next2);
+  }, []);
+  const next = useCallback5(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i + 1) % count);
+  }, [
+    count
+  ]);
+  const prev = useCallback5(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i - 1 + count) % count);
+  }, [
+    count
+  ]);
+  const value = useMemo6(() => ({
+    index,
+    count,
+    setIndex,
+    next,
+    prev
+  }), [
+    index,
+    count,
+    setIndex,
+    next,
+    prev
+  ]);
+  if (count === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React20.createElement(CarouselContext.Provider, {
+    value
+  }, /* @__PURE__ */ React20.createElement("div", {
+    className: mx7("w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center", classNames)
+  }, children));
+};
+CarouselRoot.displayName = "Carousel.Root";
+var CarouselViewport = ({ children, classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next, prev } = useCarousel();
+  const handleKeyDown = useCallback5((event) => {
+    if (count <= 1) {
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      prev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      next();
+    }
+  }, [
+    count,
+    next,
+    prev
+  ]);
+  return /* @__PURE__ */ React20.createElement("div", {
+    // TODO(burdon): Move to ui-theme.
+    className: mx7("relative w-full aspect-video overflow-hidden", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", classNames),
+    tabIndex: 0,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": t("carousel-viewport.label"),
+    onKeyDown: handleKeyDown
+  }, children);
+};
+CarouselViewport.displayName = "Carousel.Viewport";
+var CarouselSlide = ({ children, index, classNames }) => {
+  const { index: active } = useCarousel();
+  if (active !== index) {
+    return null;
+  }
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: mx7("absolute inset-0 w-full h-full bg-baseSurface", classNames)
+  }, children);
+};
+CarouselSlide.displayName = "Carousel.Slide";
+var CarouselPrevious = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, prev } = useCarousel();
+  if (count <= 1) {
+    return /* @__PURE__ */ React20.createElement("div", null);
+  }
+  return /* @__PURE__ */ React20.createElement(IconButton, {
+    classNames,
+    square: true,
+    variant: "ghost",
+    icon: "ph--caret-left--regular",
+    iconOnly: true,
+    label: t("carousel-prev.label"),
+    onClick: prev
+  });
+};
+CarouselPrevious.displayName = "Carousel.Previous";
+var CarouselNext = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next } = useCarousel();
+  if (count <= 1) {
+    return /* @__PURE__ */ React20.createElement("div", null);
+  }
+  return /* @__PURE__ */ React20.createElement(IconButton, {
+    classNames,
+    square: true,
+    variant: "ghost",
+    icon: "ph--caret-right--regular",
+    iconOnly: true,
+    label: t("carousel-next.label"),
+    onClick: next
+  });
+};
+CarouselNext.displayName = "Carousel.Next";
+var CarouselIndicators = ({ classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { count, index, setIndex } = useCarousel();
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: "horizontal",
+    memorizeCurrent: true
+  });
+  if (count <= 1) {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React20.createElement("div", {
+      className: "col-start-2"
+    }, /* @__PURE__ */ React20.createElement("div", {
+      ...arrowNavigationAttrs,
+      className: mx7("flex items-center justify-center", classNames),
+      role: "tablist",
+      "aria-label": t("carousel-indicators.label")
+    }, Array.from({
+      length: count
+    }).map((_, i) => /* @__PURE__ */ React20.createElement(IconButton, {
+      key: i,
+      role: "tab",
+      "aria-selected": i === index,
+      // TODO(burdon): Move to ui-theme.
+      classNames: i === index ? "text-primary-500" : "text-description",
+      icon: i === index ? "ph--circle--fill" : "ph--circle--regular",
+      iconOnly: true,
+      label: t("carousel-go-to.label", {
+        index: i + 1
+      }),
+      onClick: () => setIndex(i),
+      onFocus: () => setIndex(i),
+      size: 3,
+      variant: "ghost"
+    }))))
+  );
+};
+CarouselIndicators.displayName = "Carousel.Indicators";
+var CarouselCaption = ({ children, classNames }) => {
+  const { index } = useCarousel();
+  const content = children(index);
+  if (content == null || content === false || content === "") {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React20.createElement("div", {
+      className: "col-start-2"
+    }, /* @__PURE__ */ React20.createElement("p", {
+      className: mx7("text-center text-description", classNames)
+    }, content))
+  );
+};
+CarouselCaption.displayName = "Carousel.Caption";
+var Carousel = {
+  Root: CarouselRoot,
+  Viewport: CarouselViewport,
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Indicators: CarouselIndicators,
+  Caption: CarouselCaption
+};
+
+// src/components/Clipboard/ClipboardProvider.tsx
+import React21, { createContext as createContext5, useCallback as useCallback6, useContext as useContext5, useState as useState5 } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext5({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboard = () => useContext5(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = useState5("");
+  const setTextValue = useCallback6(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ React21.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+
+// src/components/Clipboard/CopyButton.tsx
+import React22 from "react";
+import { mx as mx8, osTranslations } from "@dxos/ui-theme";
+var inactiveLabelStyles = "invisible h-px -mb-px overflow-hidden";
+var CopyButton = ({ classNames, value, size = 5, ...props }) => {
+  const { t } = useTranslation(osTranslations);
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ React22.createElement(Button, {
+    ...props,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React22.createElement("div", {
+    className: mx8("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React22.createElement("span", {
+    className: "px-1"
+  }, t("copy.label")), /* @__PURE__ */ React22.createElement(Icon, {
+    icon: "ph--copy--regular",
+    size
+  })), /* @__PURE__ */ React22.createElement("div", {
+    className: mx8("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React22.createElement("span", {
+    className: "px-1"
+  }, t("copy-success.label")), /* @__PURE__ */ React22.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__ */ React22.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 createContext6 } from "@radix-ui/react-context";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React23, { forwardRef as forwardRef14 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { composableProps as composableProps8, osTranslations as osTranslations2, slottable as slottable7 } from "@dxos/ui-theme";
+var DialogRoot = (props) => /* @__PURE__ */ React23.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React23.createElement(DialogPrimitive.Root, {
+  // NOTE: Radix warning unless set to undefined.
+  // https://www.radix-ui.com/primitives/docs/components/dialog#description
+  "aria-describedby": void 0,
+  ...props
+}));
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DIALOG_OVERLAY_NAME = "DialogOverlay";
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext6(DIALOG_OVERLAY_NAME, {});
+var DialogOverlay = /* @__PURE__ */ forwardRef14(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Overlay, {
+    ...props,
+    "data-block-align": blockAlign,
+    className: tx("dialog.overlay", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React23.createElement(OverlayLayoutProvider, {
+    inOverlayLayout: true
+  }, children));
+});
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+var DIALOG_CONTENT_NAME = "DialogContent";
+var DialogContent = /* @__PURE__ */ forwardRef14(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Content, {
+    ...props,
+    // NOTE: Radix warning unless set to undefined.
+    // https://www.radix-ui.com/primitives/docs/components/dialog#description
+    "aria-describedby": void 0,
+    className: tx("dialog.content", {
+      size,
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React23.createElement(Column.Root, {
+    classNames: "dx-expander",
+    gutter: "sm"
+  }, children));
+});
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+var DialogHeader = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.header", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+var DialogCloseIconButton = /* @__PURE__ */ forwardRef14(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation3(osTranslations2);
+  return /* @__PURE__ */ React23.createElement(IconButton, {
+    ...props,
+    label: label ?? t("close-dialog.label"),
+    icon: "ph--x--regular",
+    iconOnly: true,
+    size: 4,
+    variant: "ghost",
+    ref: forwardedRef
+  });
+});
+var DialogBody = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.body", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+var DialogTitle = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Title, {
+    ...props,
+    className: tx("dialog.title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogDescription = /* @__PURE__ */ forwardRef14(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(DialogPrimitive.Description, {
+    ...props,
+    className: tx("dialog.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogActionBar = slottable7(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot13 : Primitive13.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(Comp, {
+    ...rest,
+    className: tx("dialog.actionbar", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DialogClose = DialogPrimitive.Close;
+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 * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { createContext as createContext7 } from "@radix-ui/react-context";
+import React24, { forwardRef as forwardRef15 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React24.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Root, props));
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogCancel = AlertDialogPrimitive.Cancel;
+var AlertDialogAction = AlertDialogPrimitive.Action;
+var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
+var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext7(ALERT_DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef15(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Overlay, {
+    ...props,
+    "data-block-align": blockAlign,
+    className: tx("dialog.overlay", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React24.createElement(OverlayLayoutProvider2, {
+    inOverlayLayout: true
+  }, children));
+});
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+var AlertDialogContent = /* @__PURE__ */ forwardRef15(({ classNames, children, size = "md", ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Content, {
+    ...props,
+    className: tx("dialog.content", {
+      inOverlayLayout,
+      size
+    }, classNames),
+    // NOTE: Radix warning unless set to undefined.
+    // https://www.radix-ui.com/primitives/docs/components/dialog#description
+    "aria-describedby": void 0,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React24.createElement(Column.Root, {
+    classNames: "dx-expander",
+    gutter: "sm"
+  }, children));
+});
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+var AlertDialogTitle = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Title, {
+    ...props,
+    className: tx("dialog.title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var AlertDialogDescription = /* @__PURE__ */ forwardRef15(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React24.createElement(AlertDialogPrimitive.Description, {
+    ...props,
+    className: tx("dialog.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  ActionBar: Dialog.ActionBar,
+  CloseIconButton: Dialog.CloseIconButton,
+  // AlertDialog-specific dismissal.
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+};
+
+// src/components/ErrorFallback/index.ts
+import { ErrorBoundary } from "@dxos/react-error-boundary";
+
+// src/components/ErrorFallback/ErrorFallback.tsx
+import React25 from "react";
+import { safeStringify } from "@dxos/util";
+var ErrorFallback = ({ children, error, title, data }) => {
+  const isDev = true;
+  const message = error instanceof Error ? error.message : String(error);
+  return /* @__PURE__ */ React25.createElement("div", {
+    role: "alert",
+    "data-testid": "error-boundary-fallback",
+    className: "flex flex-col p-4 gap-4 overflow-auto"
+  }, /* @__PURE__ */ React25.createElement("h1", {
+    className: "text-lg text-info-text"
+  }, title ?? "Runtime Error"), /* @__PURE__ */ React25.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React25.createElement(Section, {
+    title: "Stack",
+    onClick: () => {
+      const text = error instanceof Error ? error.stack ?? error.message : String(error);
+      void navigator.clipboard.writeText(text);
+    }
+  }, /* @__PURE__ */ React25.createElement(ErrorStack, {
+    error
+  })), data && /* @__PURE__ */ React25.createElement(Section, {
+    title: "Data",
+    onClick: () => {
+      void navigator.clipboard.writeText(JSON.stringify(data, void 0, 2));
+    }
+  }, /* @__PURE__ */ React25.createElement("pre", {
+    className: "overflow-x-auto text-xs"
+  }, safeStringify(data, void 0, 2))), children);
+};
+var Section = ({ children, title, onClick }) => {
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: "flex flex-col gap-1"
+  }, onClick && /* @__PURE__ */ React25.createElement("button", {
+    type: "button",
+    onClick,
+    className: "flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors",
+    title: `Copy ${title}`
+  }, /* @__PURE__ */ React25.createElement("h2", {
+    className: "text-xs uppercase text-subdued"
+  }, title)), children);
+};
+
+// src/components/ErrorFallback/ThrowError.tsx
+import { useEffect as useEffect4, useState as useState6 } from "react";
+var ThrowError = ({ delay = 1e3, ...props }) => {
+  const [error, setError] = useState6();
+  useEffect4(() => {
+    if (delay < 0) {
+      return;
+    }
+    const t = setTimeout(() => {
+      setError(generator({
+        delay,
+        ...props
+      }));
+    }, delay);
+    return () => clearTimeout(t);
+  }, [
+    delay,
+    generator
+  ]);
+  if (error) {
+    throw error;
+  }
+  return null;
+};
+var generator = ({ error, delay }) => {
+  return error?.() ?? new Error(`Error generated after ${delay}ms`);
+};
+
+// src/components/Focus/Focus.tsx
+import { useArrowNavigationGroup as useArrowNavigationGroup2, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
+import React26, { createContext as createContext8, useCallback as useCallback7, useContext as useContext6, useRef as useRef3, useState as useState7 } from "react";
+import { composableProps as composableProps9, slottable as slottable8 } from "@dxos/ui-theme";
+var FOCUS_STATE_ATTR = "focus-state";
+var FocusContext = /* @__PURE__ */ createContext8({});
+var useFocus = () => useContext6(FocusContext);
+var Group3 = slottable8(({ children, asChild, orientation = "vertical", border = false, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot14 : Primitive14.div;
+  const { tx } = useThemeContext();
+  const rootRef = useRef3(null);
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  const arrowNavigationAttrs = useArrowNavigationGroup2({
+    axis: orientation,
+    memorizeCurrent: true
+  });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+  const [state, setState] = useState7();
+  const [groupHasFocus, setGroupHasFocus] = useState7(false);
+  const handleFocusIn = useCallback7(() => setGroupHasFocus(true), []);
+  const handleFocusOut = useCallback7((event) => {
+    const related = event.relatedTarget;
+    if (!related || !rootRef.current?.contains(related)) {
+      setGroupHasFocus(false);
+    }
+  }, []);
+  const { className, ...rest } = composableProps9(props);
+  return /* @__PURE__ */ React26.createElement(FocusContext.Provider, {
+    value: {
+      setFocus: setState,
+      groupHasFocus
+    }
+  }, /* @__PURE__ */ React26.createElement(Comp, {
+    ...rest,
+    tabIndex: 0,
+    className: tx("focus.group", {
+      border
+    }, className),
+    ...tabsterAttrs,
+    ...state && {
+      [`data-${FOCUS_STATE_ATTR}`]: state
+    },
+    onBlur: handleFocusOut,
+    onFocus: handleFocusIn,
+    ref: useComposedRefs(rootRef, forwardedRef)
+  }, children));
+});
+var Item4 = slottable8(({ children, asChild, current, border = false, onCurrentChange, onClick, onFocus, onBlur, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot14 : Primitive14.div;
+  const { tx } = useThemeContext();
+  const focusableGroupAttrs = useFocusableGroup({
+    ignoreDefaultKeydown: {
+      Enter: true
+    }
+  });
+  const [focused, setFocused] = useState7(false);
+  const handleClick = useCallback7((event) => {
+    onCurrentChange?.();
+    onClick?.(event);
+  }, [
+    onCurrentChange,
+    onClick
+  ]);
+  const handleKeyDown = useCallback7((event) => {
+    if (event.key === "Enter") {
+      onCurrentChange?.();
+    }
+  }, [
+    onCurrentChange
+  ]);
+  const handleFocus = useCallback7((event) => {
+    setFocused(true);
+    onFocus?.(event);
+  }, [
+    onFocus
+  ]);
+  const handleBlur = useCallback7((event) => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [
+    onBlur
+  ]);
+  const isCurrent = current ?? focused;
+  const { className, ...rest } = composableProps9(props);
+  return /* @__PURE__ */ React26.createElement(Comp, {
+    ...rest,
+    tabIndex: 0,
+    className: tx("focus.item", {
+      border
+    }, className),
+    ...focusableGroupAttrs,
+    "aria-current": isCurrent || void 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ref: forwardedRef
+  }, children);
+});
+var Focus = {
+  Group: Group3,
+  Item: Item4
+};
+
+// src/components/Input/Input.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React27, { forwardRef as forwardRef16 } 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 mx9 } from "@dxos/ui-theme";
+var Label3 = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement(LabelPrimitive, {
+    ...props,
+    className: tx("input.label", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Description3 = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement(DescriptionPrimitive, {
+    ...props,
+    className: tx("input.description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React27.createElement(ValidationPrimitive, {
+    ...props,
+    className: tx("input.validation", {
+      srOnly,
+      validationValence
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef16(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement(DescriptionAndValidationPrimitive, {
+    ...props,
+    className: tx("input.descriptionAndValidation", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var PinInput = /* @__PURE__ */ forwardRef16(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  return /* @__PURE__ */ React27.createElement(PinInputPrimitive, {
+    ...props,
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    className: tx("input.inputWithSegments", {
+      disabled: props.disabled
+    }, classNames) || "",
+    segmentClassName: tx("input.segment", {
+      disabled: props.disabled,
+      density,
+      elevation
+    }) || "",
+    ref: forwardedRef
+  });
+});
+var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(densityProp);
+  const elevation = useElevationContext(elevationProp);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React27.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__ */ forwardRef16(({ __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__ */ React27.createElement(TextAreaPrimitive, {
+    ...props,
+    className: tx("input.textArea", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState2({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement(CheckboxPrimitive.Root, {
+    ...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__ */ React27.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", {
+      size,
+      checked
+    })
+  }));
+});
+var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState2({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked ?? false,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React27.createElement("input", {
+    type: "checkbox",
+    className: mx9("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: Label3,
+  Description: Description3,
+  Validation,
+  DescriptionAndValidation
+};
+
+// src/components/List/List.tsx
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
+import React29, { forwardRef as forwardRef17 } 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";
+import { composable as composable4, composableProps as composableProps10 } from "@dxos/ui-theme";
+
+// src/components/List/ListDropIndicator.tsx
+import React28 from "react";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-(--line-thickness) left-[calc(var(--line-inset)+var(--terminal-radius))] right-(--line-inset) before:left-(--terminal-inset)",
+  vertical: "w-(--line-thickness) top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-(--line-inset) before:top-(--terminal-inset)"
+};
+var edgeStyles = {
+  top: "top-(--line-offset) before:top-(--offset-terminal)",
+  right: "right-(--line-offset) before:right-(--offset-terminal)",
+  bottom: "bottom-(--line-offset) before:bottom-(--offset-terminal)",
+  left: "left-(--line-offset) before:left-(--offset-terminal)"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React28.createElement("div", {
+    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-accent-surface before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
+  });
+};
+
+// src/components/List/List.tsx
+var List = composable4(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(props.density);
+  const { className, ...rest } = composableProps10(props);
+  return /* @__PURE__ */ React29.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ React29.createElement(ListPrimitive, {
+    ...rest,
+    className: tx("list.root", {}, className),
+    ref: forwardedRef
+  }, children));
+});
+var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot15 : Primitive15.div;
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React29.createElement(Comp, {
+    ...!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__ */ React29.createElement("div", {
+    ...props,
+    className: tx("list.item.openTrigger", {
+      density
+    }, classNames)
+  });
+};
+var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React29.createElement(ListPrimitiveItemHeading, {
+    ...props,
+    className: tx("list.item.heading", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React29.createElement("span", null, children));
+});
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  return /* @__PURE__ */ React29.createElement(ListPrimitiveItemOpenTrigger, {
+    ...props,
+    className: tx("list.item.openTrigger", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children || /* @__PURE__ */ React29.createElement(Icon, {
+    size: 3,
+    icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
+    classNames: tx("list.item.openTriggerIcon", {})
+  }));
+});
+var ListItemRoot = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React29.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 React31, { forwardRef as forwardRef18 } from "react";
+
+// src/components/List/TreeDropIndicator.tsx
+import React30 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: "h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-surface before:left-(--negative-terminal-size)",
+  child: "inset-0 border-[length:var(--line-thickness)] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "top-(--line-offset) before:top-(--offset-terminal)",
+  "reorder-below": "bottom-(--line-offset) before:bottom-(--offset-terminal)",
+  "make-child": "border-accent-surface",
+  // 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__ */ React30.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:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
+  });
+};
+
+// src/components/List/Tree.tsx
+var TreeRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  return /* @__PURE__ */ React31.createElement(List, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var TreeBranch = /* @__PURE__ */ forwardRef18(({ __listScope, ...props }, forwardedRef) => {
+  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
+  return /* @__PURE__ */ React31.createElement(List, {
+    ...props,
+    "aria-labelledby": headingId,
+    ref: forwardedRef
+  });
+});
+var TreeItemRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  return /* @__PURE__ */ React31.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 as createContextScope2 } from "@radix-ui/react-context";
+import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
+import { Slot as Slot16 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React32, { forwardRef as forwardRef19, useCallback as useCallback8 } from "react";
+import { composable as composable5, composableProps as composableProps11 } from "@dxos/ui-theme";
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var TREEGRID_PATH_SEPARATOR = "~";
+var TREEGRID_PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = composable5(({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, role: _role, ...rest } = composableProps11(props, {
+    classNames
+  });
+  const Comp = asChild ? Slot16 : Primitive16.div;
+  const { findFirstFocusable } = useFocusFinders();
+  const handleKeyDown = useCallback8((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;
+      }
+    }
+    onKeyDownProp?.(event);
+  }, [
+    findFirstFocusable,
+    onKeyDownProp
+  ]);
+  return /* @__PURE__ */ React32.createElement(Comp, {
+    role: "treegrid",
+    ...rest,
+    className: tx("treegrid.root", {}, className),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
+    onKeyDown: handleKeyDown,
+    ref: forwardedRef
+  }, children);
+});
+var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot16 : Primitive16.div;
+  const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = useControllableState3({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
+  });
+  return /* @__PURE__ */ React32.createElement(TreegridRowProvider, {
+    open,
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ React32.createElement(Comp, {
+    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__ */ forwardRef19(({ classNames, children, indent, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React32.createElement("div", {
+    role: "gridcell",
+    className: tx("treegrid.cell", {
+      indent
+    }, classNames),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell
+};
+
+// src/components/Main/Main.tsx
+import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { createContext as createContext9 } from "@radix-ui/react-context";
+import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
+import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
+import { Slot as Slot17 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
+import React33, { forwardRef as forwardRef20, useCallback as useCallback10, useEffect as useEffect6, useRef as useRef4, useState as useState9 } from "react";
+import { addEventListener } from "@dxos/async";
+import { log } from "@dxos/log";
+import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
+import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
+
+// src/components/Main/useSwipeToDismiss.ts
+import { useCallback as useCallback9, useEffect as useEffect5, useState as useState8 } from "react";
+var useSwipeToDismiss = (ref, {
+  onDismiss,
+  dismissThreshold = 64,
+  debounceThreshold = 8,
+  offset = 0
+  /* side = 'inline-start' */
+}) => {
+  const $root = ref.current;
+  const [motionState, setMotionState] = useState8(0);
+  const [gestureStartX, setGestureStartX] = useState8(0);
+  const setIdle = useCallback9(() => {
+    setMotionState(0);
+    $root?.style.removeProperty("inset-inline-start");
+    $root?.style.setProperty("transition-duration", "200ms");
+  }, [
+    $root
+  ]);
+  const setFollowing = useCallback9(() => {
+    setMotionState(2);
+    $root?.style.setProperty("transition-duration", "0ms");
+  }, [
+    $root
+  ]);
+  const handlePointerDown = useCallback9(({ screenX }) => {
+    if (motionState === 0) {
+      setMotionState(1);
+      setGestureStartX(screenX);
+    }
+  }, [
+    motionState
+  ]);
+  const handlePointerMove = useCallback9(({ 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 = useCallback9(() => {
+    setIdle();
+  }, [
+    setIdle
+  ]);
+  useEffect5(() => {
+    $root?.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      $root?.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [
+    $root,
+    handlePointerDown
+  ]);
+  useEffect5(() => {
+    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [
+    $root,
+    handlePointerMove
+  ]);
+  useEffect5(() => {
+    $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-w-keyboard") && event.preventDefault();
+};
+var landmarkAttr = "data-main-landmark";
+var useLandmarkMover = (propsOnKeyDown, landmark) => {
+  const handleKeyDown = useCallback10((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 = useFocusableGroup2({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  });
+  return {
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    ...focusableGroupAttrs
+  };
+};
+var [MainProvider, useMainContext] = createContext9(MAIN_NAME, {
+  resizing: false,
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (_nextState) => {
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 67, S: void 0 });
+  },
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (_nextState) => {
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 71, S: void 0 });
+  }
+});
+var useSidebars = (consumerName) => {
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(consumerName);
+  return {
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: useCallback10(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
+    ]),
+    openNavigationSidebar: useCallback10(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback10(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback10(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: useCallback10(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
+    ]),
+    openComplementarySidebar: useCallback10(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback10(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback10(() => 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] = useControllableState4({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
+  });
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
+  });
+  const [resizing, setResizing] = useState9(false);
+  const resizeInterval = useRef4(null);
+  useEffect6(() => addEventListener(window, "resize", () => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, 3e3);
+  }), []);
+  return /* @__PURE__ */ React33.createElement(MainProvider, {
+    ...props,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
+    resizing
+  }, children);
+};
+MainRoot.displayName = MAIN_ROOT_NAME;
+var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React33.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__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { tx } = useThemeContext();
+  const { t } = useTranslation(osTranslations3);
+  const ref = useForwardedRef(forwardedRef);
+  const noopRef = useRef4(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => onStateChange?.("closed")
+  });
+  const handleKeyDown = useCallback10((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 Root14 = isLg ? Primitive17.div : DialogContent2;
+  return /* @__PURE__ */ React33.createElement(DialogRoot2, {
+    open: state !== "closed",
+    "aria-label": toLocalizedString(label, t),
+    modal: false
+  }, !isLg && /* @__PURE__ */ React33.createElement(DialogTitle2, {
+    className: "sr-only"
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React33.createElement(Root14, {
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+    },
+    ...state === "closed" && {
+      inert: true
+    },
+    ...props,
+    "data-side": side === "w-end" ? "ie" : "is",
+    "data-state": state,
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.sidebar", {}, classNames),
+    onKeyDownCapture: handleKeyDown,
+    ref
+  }, children));
+});
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
+  return /* @__PURE__ */ React33.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
+    resizing,
+    side: "w-start",
+    ref: forwardedRef
+  });
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
+  return /* @__PURE__ */ React33.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
+    resizing,
+    side: "w-end",
+    ref: forwardedRef
+  });
+});
+MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot17 : role ? Primitive17.div : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
+  return /* @__PURE__ */ React33.createElement(Comp, {
+    ...handlesFocus && {
+      ...mover
+    },
+    ...props,
+    role,
+    "data-sidebar-left-state": navigationSidebarState,
+    "data-sidebar-right-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/MediaPlayer/MediaPlayer.tsx
+import React34 from "react";
+import { mx as mx10 } from "@dxos/ui-theme";
+var VIDEO_EXTENSIONS = [
+  ".mp4",
+  ".webm",
+  ".ogv",
+  ".mov",
+  ".m4v"
+];
+var AUDIO_EXTENSIONS = [
+  ".mp3",
+  ".wav",
+  ".ogg",
+  ".m4a",
+  ".aac",
+  ".flac"
+];
+var detectMediaKind = (src) => {
+  const pathname = src.split(/[?#]/, 1)[0];
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return "video";
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return "audio";
+  }
+  return void 0;
+};
+var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, loop = false, muted = false, alt, crossOrigin = "anonymous" }) => {
+  const resolved = kind ?? detectMediaKind(src) ?? "video";
+  if (resolved === "audio") {
+    return (
+      // TODO(burdon): Move to ui-theme.
+      /* @__PURE__ */ React34.createElement("audio", {
+        className: mx10("w-full", classNames),
+        src,
+        controls,
+        autoPlay,
+        loop,
+        muted,
+        crossOrigin,
+        "aria-label": alt
+      })
+    );
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    /* @__PURE__ */ React34.createElement("div", {
+      className: mx10("dx-container flex items-center justify-center", classNames)
+    }, /* @__PURE__ */ React34.createElement("video", {
+      className: "aspect-video max-w-full max-h-full",
+      src,
+      controls,
+      autoPlay,
+      loop,
+      muted,
+      crossOrigin,
+      "aria-label": alt
+    }))
+  );
+};
+
+// src/components/Message/Message.tsx
+import { createContext as createContext10 } from "@radix-ui/react-context";
+import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
+import React35, { forwardRef as forwardRef21 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { useId as useId3 } from "@dxos/react-hooks";
+import { translationKey as translationKey3 } from "#translations";
+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] = createContext10(MESSAGE_NAME);
+var MessageRoot = /* @__PURE__ */ forwardRef21(({ 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 Comp = asChild ? Slot18 : Primitive18.div;
+  return /* @__PURE__ */ React35.createElement(MessageProvider, {
+    titleId,
+    descriptionId,
+    valence
+  }, /* @__PURE__ */ React35.createElement(Comp, {
+    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__ */ forwardRef21(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+  const { t } = useTranslation4(translationKey3);
+  const { tx } = useThemeContext();
+  const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
+  const icon = iconProp ?? messageIcons[valence];
+  return /* @__PURE__ */ React35.createElement("div", {
+    className: tx("message.header", {}, classNames),
+    id: titleId,
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React35.createElement("div", {
+    className: tx("message.icon", {
+      valence
+    })
+  }, /* @__PURE__ */ React35.createElement(Icon, {
+    icon
+  })), /* @__PURE__ */ React35.createElement("h2", {
+    className: tx("message.title", {}, classNames)
+  }, children), onClose && /* @__PURE__ */ React35.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("toolbar-close.label"),
+    onClick: onClose
+  }));
+});
+MessageTitle.displayName = MESSAGE_TITLE_NAME;
+var MESSAGE_CONTENT_NAME = "MessageContent";
+var MessageContent = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
+  const Comp = asChild ? Slot18 : Primitive18.p;
+  return /* @__PURE__ */ React35.createElement(Comp, {
+    ...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 as useComposedRefs2 } 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 Primitive19 } from "@radix-ui/react-primitive";
+import { Slot as Slot19 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
+import { hideOthers } from "aria-hidden";
+import React36, { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef5, useState as useState10 } 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 = useRef5(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState10(false);
+  const [open = false, setOpen] = useControllableState5({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React36.createElement(PopoverProvider, {
+    scope: __scopePopover,
+    contentId: useId4(),
+    triggerRef,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback11(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    hasCustomAnchor,
+    onCustomAnchorAdd: useCallback11(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback11(() => setHasCustomAnchor(false), []),
+    modal
+  }, children));
+};
+PopoverRoot.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  const { __scopePopover, ...anchorProps } = props;
+  const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+  useEffect7(() => {
+    onCustomAnchorAdd();
+    return () => onCustomAnchorRemove();
+  }, [
+    onCustomAnchorAdd,
+    onCustomAnchorRemove
+  ]);
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    ...anchorProps,
+    ref: forwardedRef
+  });
+});
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME2 = "PopoverTrigger";
+var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  const { __scopePopover, asChild, ...triggerProps } = props;
+  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+  const Comp = asChild ? Slot19 : Primitive19.button;
+  const trigger = /* @__PURE__ */ React36.createElement(Comp, {
+    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__ */ React36.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);
+  useEffect7(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React36.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__ */ React36.createElement(PortalProvider, {
+    scope: __scopePopover,
+    forceMount
+  }, /* @__PURE__ */ React36.createElement(Presence, {
+    present: forceMount || context.open
+  }, /* @__PURE__ */ React36.createElement(PortalPrimitive, {
+    asChild: true,
+    container
+  }, children)));
+};
+PopoverPortal.displayName = PORTAL_NAME2;
+var CONTENT_NAME2 = "PopoverContent";
+var PopoverContent = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  return /* @__PURE__ */ React36.createElement(Presence, {
+    present: forceMount || context.open
+  }, context.modal ? /* @__PURE__ */ React36.createElement(PopoverContentModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }) : /* @__PURE__ */ React36.createElement(PopoverContentNonModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }));
+});
+PopoverContent.displayName = CONTENT_NAME2;
+var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const contentRef = useRef5(null);
+  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef5(false);
+  useEffect7(() => {
+    const content = contentRef.current;
+    if (content) {
+      return hideOthers(content);
+    }
+  }, []);
+  return /* @__PURE__ */ React36.createElement(RemoveScroll, {
+    as: Slot19,
+    allowPinchZoom: true
+  }, /* @__PURE__ */ React36.createElement(PopoverContentImpl, {
+    ...props,
+    ref: composedRefs,
+    // 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__ */ forwardRef22((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const hasInteractedOutsideRef = useRef5(false);
+  const hasPointerDownOutsideRef = useRef5(false);
+  return /* @__PURE__ */ React36.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__ */ forwardRef22((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 = useMemo7(() => {
+    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__ */ React36.createElement(FocusScope, {
+    asChild: true,
+    loop: true,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: onCloseAutoFocus
+  }, /* @__PURE__ */ React36.createElement(DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onDismiss: () => context.onOpenChange(false)
+  }, /* @__PURE__ */ React36.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__ */ forwardRef22((props, forwardedRef) => {
+  const { __scopePopover, ...closeProps } = props;
+  const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+  return /* @__PURE__ */ React36.createElement(Primitive19.button, {
+    type: "button",
+    ...closeProps,
+    ref: forwardedRef,
+    onClick: composeEventHandlers2(props.onClick, () => context.onOpenChange(false))
+  });
+});
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME2 = "PopoverArrow";
+var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  const { __scopePopover, classNames, ...arrowProps } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React36.createElement(PopperPrimitive.Arrow, {
+    ...popperScope,
+    ...arrowProps,
+    className: tx("popover.arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+PopoverArrow.displayName = ARROW_NAME2;
+var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot19 : Primitive19.div;
+  return /* @__PURE__ */ React36.createElement(Comp, {
+    ...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 React37, { forwardRef as forwardRef23 } from "react";
+var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React37.createElement("span", {
+    role: "status",
+    ...props,
+    className: tx("status.root", {
+      indeterminate,
+      variant
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React37.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 createContext11 } from "@radix-ui/react-context";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
+import React38, { useMemo as useMemo8 } from "react";
+import { composableProps as composableProps12, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
+var SCROLLAREA_NAME = "ScrollArea";
+var [ScrollAreaProvider, useScrollAreaContext] = createContext11(SCROLLAREA_NAME);
+var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
+var ScrollAreaRoot = slottable9(({ children, asChild, orientation = "vertical", autoHide = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps12(props);
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  const options = useMemo8(() => ({
+    orientation,
+    autoHide,
+    centered,
+    padding,
+    thin,
+    snap
+  }), [
+    orientation,
+    autoHide,
+    centered,
+    padding,
+    thin,
+    snap
+  ]);
+  return /* @__PURE__ */ React38.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React38.createElement(Comp, {
+    ...rest,
+    className: tx("scrollArea.root", options, className),
+    ref: forwardedRef
+  }, children));
+});
+ScrollAreaRoot.displayName = SCROLLAREA_ROOT_NAME;
+var SCROLLAREA_VIEWPORT_NAME = "ScrollArea.Viewport";
+var ScrollAreaViewport = slottable9(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
+  const density = options.thin ? scrollbar.thin : scrollbar.coarse;
+  const { className, ...rest } = composableProps12(props);
+  const { style, ...restWithoutStyle } = rest;
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React38.createElement(Comp, {
+    ...restWithoutStyle,
+    style: {
+      "--scroll-width": `${density.size}px`,
+      "--scroll-padding": `${density.padding}px`,
+      ...style
+    },
+    className: tx("scrollArea.viewport", options, className),
+    ref: forwardedRef
+  }, children);
+});
+ScrollAreaViewport.displayName = SCROLLAREA_VIEWPORT_NAME;
+var ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport
+};
+
+// src/components/ScrollContainer/ScrollContainer.tsx
+import { createContext as createContext12 } from "@radix-ui/react-context";
+import React39, { forwardRef as forwardRef24, useCallback as useCallback12, useEffect as useEffect8, useImperativeHandle, useMemo as useMemo9, useRef as useRef6, useState as useState11 } from "react";
+import { addEventListener as addEventListener2, combine } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { useMergeRefs } from "@dxos/react-hooks";
+import { composable as composable6, composableProps as composableProps13, slottable as slottable10 } from "@dxos/ui-theme";
+import { mx as mx11 } 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] = createContext12("ScrollContainer");
+var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
+  const scrollerRef = useRef6(null);
+  const autoScrollRef = useRef6(false);
+  const [pinned, setPinned] = useState11(pin);
+  const [overflow, setOverflow] = useState11(false);
+  const timeoutRef = useRef6(void 0);
+  const scrollToBottom = useCallback12((behavior = behaviorProp) => {
+    if (scrollerRef.current) {
+      if (behavior !== "instant") {
+        autoScrollRef.current = true;
+        scrollerRef.current.classList.add("scrollbar-none");
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          scrollerRef.current?.classList.remove("scrollbar-none");
+          autoScrollRef.current = false;
+        }, 500);
+      }
+      scrollerRef.current.scrollTo({
+        top: scrollerRef.current.scrollHeight,
+        behavior
+      });
+      setPinned(true);
+    }
+  }, [
+    behaviorProp
+  ]);
+  const controller = useMemo9(() => ({
+    get viewport() {
+      return scrollerRef.current;
+    },
+    scrollToTop: () => {
+      invariant(scrollerRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 54, S: void 0, A: ["scrollerRef.current", ""] });
+      scrollerRef.current.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+      setPinned(false);
+    },
+    scrollToBottom: (behavior = "smooth") => {
+      scrollToBottom(behavior);
+    }
+  }), [
+    scrollToBottom
+  ]);
+  useImperativeHandle(forwardedRef, () => controller, [
+    controller
+  ]);
+  const setViewport = useCallback12((el) => {
+    scrollerRef.current = el;
+  }, []);
+  return /* @__PURE__ */ React39.createElement(ScrollContainerProvider, {
+    pinned,
+    overflow,
+    controller,
+    setViewport,
+    setPinned,
+    setOverflow
+  }, children);
+});
+Root10.displayName = "ScrollContainer.Root";
+var Content6 = composable6(({ children, thin, padding, centered, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
+    ...composableProps13(props, {
+      classNames: "relative"
+    }),
+    thin,
+    padding,
+    centered,
+    ref: forwardedRef
+  }, children);
+});
+Content6.displayName = "ScrollContainer.Content";
+var VIEWPORT_NAME = "ScrollContainer.Viewport";
+var Viewport = slottable10(({ children, asChild, ...props }, forwardedRef) => {
+  const scrollerRef = useRef6(null);
+  const mergedRef = useMergeRefs([
+    forwardedRef,
+    scrollerRef
+  ]);
+  const { setViewport, setPinned, setOverflow } = useScrollContainerContext(VIEWPORT_NAME);
+  useEffect8(() => {
+    const el = scrollerRef.current;
+    if (!el) {
+      return;
+    }
+    setViewport(el);
+    return combine(addEventListener2(el, "wheel", () => setPinned(isBottom(el))), addEventListener2(el, "scroll", () => setOverflow((el.scrollTop ?? 0) > 0)), () => setViewport(null));
+  }, [
+    setViewport,
+    setPinned,
+    setOverflow
+  ]);
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
+    asChild,
+    ...composableProps13(props),
+    ref: mergedRef
+  }, children), /* @__PURE__ */ React39.createElement(PinEffect, {
+    scrollerRef
+  }));
+});
+Viewport.displayName = VIEWPORT_NAME;
+var PIN_EFFECT_NAME = "ScrollContainer.PinEffect";
+var PinEffect = ({ scrollerRef }) => {
+  const { pinned, controller } = useScrollContainerContext(PIN_EFFECT_NAME);
+  useEffect8(() => {
+    const viewport = scrollerRef.current;
+    if (!pinned || !viewport) {
+      return;
+    }
+    controller?.scrollToBottom("instant");
+    const resizeObserver = new ResizeObserver(() => controller?.scrollToBottom("smooth"));
+    Array.from(viewport.children).forEach((child) => {
+      resizeObserver.observe(child);
+    });
+    const mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            resizeObserver.observe(node);
+          }
+        });
+      });
+      controller?.scrollToBottom("smooth");
+    });
+    mutationObserver.observe(viewport, {
+      childList: true
+    });
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [
+    pinned,
+    controller,
+    scrollerRef
+  ]);
+  return null;
+};
+var FADE_NAME = "ScrollContainer.Fade";
+var Fade = () => {
+  const { overflow } = useScrollContainerContext(FADE_NAME);
+  return /* @__PURE__ */ React39.createElement("div", {
+    "data-visible": overflow,
+    className: mx11(
+      // NOTE: Gradients may not be visible with dark reader extensions.
+      "z-10 absolute top-0 inset-x-0 h-24 w-full",
+      'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
+      "bg-gradient-to-b from-(--color-base-surface) to-transparent pointer-events-none"
+    )
+  });
+};
+Fade.displayName = FADE_NAME;
+var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
+var ScrollDownButton = ({ classNames }) => {
+  const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
+  return /* @__PURE__ */ React39.createElement("div", {
+    className: mx11("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React39.createElement(IconButton, {
+    variant: "primary",
+    icon: "ph--arrow-down--regular",
+    iconOnly: true,
+    size: 4,
+    label: "Scroll down",
+    onClick: () => controller?.scrollToBottom()
+  }));
+};
+ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+var ScrollContainer = {
+  Root: Root10,
+  Content: Content6,
+  Viewport,
+  Fade,
+  ScrollDownButton
+};
+
+// src/components/Select/Select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import React40, { forwardRef as forwardRef25 } from "react";
+var SelectRoot = SelectPrimitive.Root;
+var SelectTrigger = SelectPrimitive.Trigger;
+var SelectValue = SelectPrimitive.Value;
+var SelectIcon = SelectPrimitive.Icon;
+var SelectPortal = SelectPrimitive.Portal;
+var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React40.createElement(Button, props, /* @__PURE__ */ React40.createElement(SelectPrimitive.Value, {
+    placeholder
+  }, children), /* @__PURE__ */ React40.createElement("span", {
+    className: "w-1 flex-1"
+  }), /* @__PURE__ */ React40.createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /* @__PURE__ */ React40.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }))));
+});
+var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React40.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__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollUpButton, {
+    ...props,
+    className: tx("select.scrollButton", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-up--bold"
+  }));
+});
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollDownButton, {
+    ...props,
+    className: tx("select.scrollButton", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
+});
+var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectViewport, {
+    ...props,
+    className: tx("select.viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectItemText = SelectPrimitive.ItemText;
+var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemIndicator, {
+    ...props,
+    className: tx("select.itemIndicator", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React40.createElement("span", {
+    className: "grow w-1"
+  }), /* @__PURE__ */ React40.createElement(Icon, {
+    icon: "ph--check--regular"
+  }));
+});
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Separator, {
+    ...props,
+    className: tx("select.separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React40.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/Skeleton/Skeleton.tsx
+import React41, { forwardRef as forwardRef26 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef26(({ classNames, variant = "default", ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React41.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 { Primitive as Primitive21 } from "@radix-ui/react-primitive";
+import { Slot as Slot21 } from "@radix-ui/react-slot";
+import React42 from "react";
+import { composableProps as composableProps14, slottable as slottable11 } 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 Root12 = slottable11(({ asChild, mode = "top", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { __scopeSplitter, ...rest } = props;
+  const { className, ...restProps } = composableProps14(rest);
+  const Comp = asChild ? Slot21 : Primitive21.div;
+  return /* @__PURE__ */ React42.createElement(SplitterProvider, {
+    scope: __scopeSplitter,
+    mode,
+    ratio,
+    transition
+  }, /* @__PURE__ */ React42.createElement(Comp, {
+    ...restProps,
+    ref: forwardedRef,
+    className: tx("splitter.root", {}, className)
+  }, children));
+});
+Root12.displayName = ROOT_NAME;
+var PANEL_NAME = "Splitter.Panel";
+var Panel2 = slottable11(({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { __scopeSplitter, ...rest } = props;
+  const Comp = asChild ? Slot21 : Primitive21.div;
+  const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
+  const { className, ...restProps } = composableProps14(rest);
+  const isTopPanel = position === "top";
+  const topOffset = isTopPanel ? "0%" : mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%`;
+  const height = isTopPanel ? mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%` : mode === "bottom" ? "100%" : mode === "top" ? "0%" : `${(1 - ratio) * 100}%`;
+  return /* @__PURE__ */ React42.createElement(Comp, {
+    ...restProps,
+    ref: forwardedRef,
+    className: tx("splitter.panel", {}, className),
+    style: {
+      top: topOffset,
+      height,
+      transition: `top ${transition}ms, height ${transition}ms ease-out`,
+      ...style
+    }
+  }, children);
+});
+Panel2.displayName = PANEL_NAME;
+var Splitter = {
+  Root: Root12,
+  Panel: Panel2
+};
+
+// src/components/Tag/Tag.tsx
+import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
+import { Slot as Slot22 } from "@radix-ui/react-slot";
+import React43, { forwardRef as forwardRef27 } from "react";
+var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot22 : Primitive22.span;
+  return /* @__PURE__ */ React43.createElement(Comp, {
+    ...props,
+    className: tx("tag.root", {
+      palette
+    }, classNames),
+    "data-hue": palette,
+    ref: forwardedRef
+  });
+});
+
+// src/components/Toast/Toast.tsx
+import { Primitive as Primitive23 } from "@radix-ui/react-primitive";
+import { Slot as Slot23 } from "@radix-ui/react-slot";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import React44, { forwardRef as forwardRef28 } from "react";
+var ToastProvider = ToastPrimitive.Provider;
+var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React44.createElement(ToastPrimitive.Viewport, {
+    ...props,
+    className: tx("toast.viewport", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React44.createElement(ToastPrimitive.Root, {
+    ...props,
+    className: tx("toast.root", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React44.createElement(ElevationProvider, {
+    elevation: "toast"
+  }, children));
+});
+var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot23 : Primitive23.div;
+  return /* @__PURE__ */ React44.createElement(Comp, {
+    ...props,
+    className: tx("toast.body", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot23 : ToastPrimitive.Title;
+  return /* @__PURE__ */ React44.createElement(Comp, {
+    ...props,
+    className: tx("toast.title", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot23 : ToastPrimitive.Description;
+  return /* @__PURE__ */ React44.createElement(Comp, {
+    ...props,
+    className: tx("toast.description", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Comp = asChild ? Slot23 : Primitive23.div;
+  return /* @__PURE__ */ React44.createElement(Comp, {
+    ...props,
+    className: tx("toast.actions", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastAction = ToastPrimitive.Action;
+var ToastClose = ToastPrimitive.Close;
+var Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Body: ToastBody,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  Action: ToastAction,
+  Close: ToastClose
+};
 export {
   AlertDialog,
-  AnchoredOverflow,
   Avatar,
   BUTTON_GROUP_NAME,
   Breadcrumb,
   Button,
   ButtonGroup,
   Callout,
+  Card,
+  Carousel,
   Clipboard,
-  ContextMenu,
+  Column,
+  Container,
+  ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,
   Dialog,
-  Domino,
   DropdownMenu,
   ElevationContext,
   ElevationProvider,
+  ErrorBoundary,
+  ErrorFallback,
+  ErrorStack,
+  Flex,
+  Focus,
+  Grid,
   Icon,
   IconButton,
+  Image,
   Input,
   LIST_ITEM_NAME,
   LIST_NAME,
@@ -107,16 +4415,23 @@ export {
   List,
   ListItem,
   Main,
+  MediaPlayer,
   Message,
+  Panel,
   Popover,
   ScrollArea,
   ScrollContainer,
   Select,
-  Separator,
+  Separator3 as Separator,
+  Skeleton,
+  Splitter,
   Status,
+  TREEGRID_PARENT_OF_SEPARATOR,
+  TREEGRID_PATH_SEPARATOR,
   Tag,
   ThemeContext,
   ThemeProvider,
+  ThrowError,
   Toast,
   Toggle,
   ToggleGroup,
@@ -130,19 +4445,24 @@ export {
   Treegrid,
   createDropdownMenuScope,
   createPopoverScope,
+  createSplitterScope,
   createTooltipScope,
+  detectMediaKind,
   hasIosKeyboard,
   initialSafeArea,
   isLabel,
   messageIcons,
+  parseCaptureOwnerStack,
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
+  useCarousel,
   useClipboard,
   useDensityContext,
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useFocus,
   useIconHref,
   useLandmarkMover,
   useListContext,
@@ -150,6 +4470,7 @@ export {
   useMainContext,
   usePx,
   useSafeArea,
+  useSafeCollisionPadding,
   useScrollContainerContext,
   useSidebars,
   useThemeContext,