@dxos/react-ui 0.9.0 → 0.9.1-main.c7dcc2e112

package/dist/lib/node-esm/index.mjs

@@ -54,10 +54,10 @@ import {
   useTooltipContext,
   useTranslation,
   withColumn
-} from "./chunk-TTEL2FP2.mjs";
+} from "./chunk-LLVUYLAM.mjs";
 import {
   translationKey
-} from "./chunk-FPVTVXND.mjs";
+} from "./chunk-OJYUPUCY.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -484,7 +484,7 @@ var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext2(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, children, density: densityProp, elevation: elevationProp, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, children, density: densityProp, elevation: elevationProp, variant = "default", asChild, caretDown, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   const { tx } = useThemeContext();
   const elevation = useElevationContext(elevationProp);
@@ -506,7 +506,10 @@ var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, ch
     ...props.disabled && {
       disabled: true
     }
-  }, children);
+  }, caretDown && !asChild ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, children, /* @__PURE__ */ React9.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  })) : children);
 }));
 Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
@@ -526,65 +529,192 @@ var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsEleva
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // src/components/Button/IconButton.tsx
-import React10, { forwardRef as forwardRef8 } from "react";
-var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React10.createElement(IconOnlyButton, {
+import React11, { forwardRef as forwardRef9 } from "react";
+
+// src/components/Tooltip/TextTooltip.tsx
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import React10, { forwardRef as forwardRef8, useCallback as useCallback3, useRef } from "react";
+var TextTooltip = /* @__PURE__ */ forwardRef8(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
+  const content = useRef(null);
+  const ref = useComposedRefs(content, forwardedRef);
+  const handleInteract = useCallback3((event) => {
+    if (onlyWhenTruncating && content.current) {
+      const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
+      if (!element || element.scrollWidth <= element.offsetWidth) {
+        event.preventDefault();
+      }
+    }
+  }, [
+    onlyWhenTruncating,
+    truncateQuery
+  ]);
+  return /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+    asChild,
+    ...props,
+    content: text,
+    side,
+    onInteract: handleInteract,
+    ref
+  }, children);
+});
+
+// src/components/Button/IconButton.tsx
+var IconButton = /* @__PURE__ */ forwardRef9((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React11.createElement(IconOnlyButton, {
   ...props,
   ref: forwardedRef
-}) : /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+}) : /* @__PURE__ */ React11.createElement(LabelledIconButton, {
   ...props,
   ref: forwardedRef
 }));
-var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
   if (noTooltip) {
-    return /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+    return /* @__PURE__ */ React11.createElement(LabelledIconButton, {
       ...props,
       ref: forwardedRef
     });
   }
-  return /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React11.createElement(Tooltip.Trigger, {
     asChild: true,
     content: props.label,
     side: tooltipSide
-  }, /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+  }, /* @__PURE__ */ React11.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
   }));
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ size, icon, iconOnly, square, iconEnd, iconClassNames, label, noTooltip: _, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(Button, {
+  return /* @__PURE__ */ React11.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", {
       iconOnly,
       square
     }, classNames),
     ref: forwardedRef
-  }, icon && !iconEnd && /* @__PURE__ */ React10.createElement(Icon, {
+  }, icon && !iconEnd && /* @__PURE__ */ React11.createElement(Icon, {
     icon,
     size,
     classNames: iconClassNames
-  }), /* @__PURE__ */ React10.createElement("span", {
+  }), /* @__PURE__ */ React11.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label), icon && iconEnd && /* @__PURE__ */ React10.createElement(Icon, {
+  }, label), icon && iconEnd && /* @__PURE__ */ React11.createElement(Icon, {
     icon,
     size,
     classNames: iconClassNames
-  }), caretDown && /* @__PURE__ */ React10.createElement(Icon, {
-    size: 3,
-    icon: "ph--caret-down--bold"
   }));
 });
 
+// src/components/Button/SystemIconButton.tsx
+import React13, { forwardRef as forwardRef11 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { translationKey as translationKey2 } from "#translations";
+
+// src/components/Button/ToggleIconButton.tsx
+import React12, { forwardRef as forwardRef10 } from "react";
+import { mx as mx6 } from "@dxos/ui-theme";
+var ToggleIconButton = /* @__PURE__ */ forwardRef10(({ active, icon, activeIcon, iconClassNames, ...props }, forwardedRef) => /* @__PURE__ */ React12.createElement(IconButton, {
+  ...props,
+  ref: forwardedRef,
+  icon: active && activeIcon ? activeIcon : icon,
+  iconClassNames: activeIcon ? iconClassNames : mx6("transition-transform", active && "rotate-90", iconClassNames)
+}));
+
+// src/components/Button/SystemIconButton.tsx
+var StarIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+    ...props,
+    active,
+    icon: "ph--star--regular",
+    activeIcon: "ph--star--fill",
+    label: label ?? t(active ? "system-button.unstar.label" : "system-button.star.label"),
+    ref: forwardedRef
+  });
+});
+StarIconButton.displayName = "SystemIconButton.Star";
+var BookmarkIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+    ...props,
+    active,
+    icon: "ph--bookmark-simple--regular",
+    activeIcon: "ph--bookmark-simple--fill",
+    label: label ?? t(active ? "system-button.unbookmark.label" : "system-button.bookmark.label"),
+    ref: forwardedRef
+  });
+});
+BookmarkIconButton.displayName = "SystemIconButton.Bookmark";
+var ExpanderIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+    ...props,
+    active,
+    icon: "ph--caret-right--regular",
+    label: label ?? t(active ? "system-button.collapse.label" : "system-button.expand.label"),
+    ref: forwardedRef
+  });
+});
+ExpanderIconButton.displayName = "SystemIconButton.Expander";
+var AddIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(IconButton, {
+    ...props,
+    icon: "ph--plus--regular",
+    label: label ?? t("system-button.add.label"),
+    ref: forwardedRef
+  });
+});
+AddIconButton.displayName = "SystemIconButton.Add";
+var DeleteIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(IconButton, {
+    ...props,
+    icon: "ph--trash--regular",
+    label: label ?? t("system-button.delete.label"),
+    ref: forwardedRef
+  });
+});
+DeleteIconButton.displayName = "SystemIconButton.Delete";
+var EditIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(IconButton, {
+    ...props,
+    icon: "ph--pen--regular",
+    label: label ?? t("system-button.edit.label"),
+    ref: forwardedRef
+  });
+});
+EditIconButton.displayName = "SystemIconButton.Edit";
+var CloseIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React13.createElement(IconButton, {
+    ...props,
+    icon: "ph--x--regular",
+    label: label ?? t("system-button.close.label"),
+    ref: forwardedRef
+  });
+});
+CloseIconButton.displayName = "SystemIconButton.Close";
+var SystemIconButton = {
+  Star: StarIconButton,
+  Bookmark: BookmarkIconButton,
+  Expander: ExpanderIconButton,
+  Add: AddIconButton,
+  Delete: DeleteIconButton,
+  Edit: EditIconButton,
+  Close: CloseIconButton
+};
+
 // src/components/Button/Toggle.tsx
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import React11, { forwardRef as forwardRef9 } from "react";
-var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React11.createElement(TogglePrimitive.Root, {
+import React14, { forwardRef as forwardRef12 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef12(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React14.createElement(TogglePrimitive.Root, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ React11.createElement(Button, {
+  }, /* @__PURE__ */ React14.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
@@ -592,22 +722,22 @@ var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedCh
 
 // src/components/Button/ToggleGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React12, { forwardRef as forwardRef10 } from "react";
-var ToggleGroup = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement(ToggleGroupPrimitive.Root, {
+import React15, { forwardRef as forwardRef13 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Root, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React15.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement(ToggleGroupPrimitive.Item, {
+var ToggleGroupItem = /* @__PURE__ */ forwardRef13(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Button, {
+  }, /* @__PURE__ */ React15.createElement(Button, {
     variant,
     elevation,
     density,
@@ -616,11 +746,11 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, densit
     ref: forwardedRef
   }));
 });
-var ToggleGroupIconItem = /* @__PURE__ */ forwardRef10(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement(ToggleGroupPrimitive.Item, {
+var ToggleGroupIconItem = /* @__PURE__ */ forwardRef13(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(IconButton, {
+  }, /* @__PURE__ */ React15.createElement(IconButton, {
     variant,
     elevation,
     density,
@@ -634,7 +764,7 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef10(({ variant, label, icon,
 
 // src/components/Calendar/Calendar.tsx
 import { CalendarDate, parseDate } from "@internationalized/date";
-import React13, { forwardRef as forwardRef11 } from "react";
+import React16, { forwardRef as forwardRef14 } from "react";
 import { Button as RACButton, Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading, RangeCalendar as RACRangeCalendar } from "react-aria-components";
 var toCalendarDate = (date) => {
   if (!date) {
@@ -650,7 +780,7 @@ var fromCalendarDate = (value) => {
 };
 var CalendarShell = ({ classNames, className, isDisabled, forwardedRef, children }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     ref: forwardedRef,
     className: tx("calendar.root", {}, classNames, className) ?? void 0,
     "aria-disabled": isDisabled || void 0
@@ -658,38 +788,38 @@ var CalendarShell = ({ classNames, className, isDisabled, forwardedRef, children
 };
 var CalendarChrome = () => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement("header", {
+  return /* @__PURE__ */ React16.createElement("header", {
     className: tx("calendar.nav", {}) ?? void 0
-  }, /* @__PURE__ */ React13.createElement(RACButton, {
+  }, /* @__PURE__ */ React16.createElement(RACButton, {
     slot: "previous",
     className: tx("calendar.button_previous", {}) ?? void 0
-  }, /* @__PURE__ */ React13.createElement(Icon, {
+  }, /* @__PURE__ */ React16.createElement(Icon, {
     size: 4,
     icon: "ph--caret-left--regular"
-  })), /* @__PURE__ */ React13.createElement(RACHeading, {
+  })), /* @__PURE__ */ React16.createElement(RACHeading, {
     className: tx("calendar.caption_label", {}) ?? void 0
-  }), /* @__PURE__ */ React13.createElement(RACButton, {
+  }), /* @__PURE__ */ React16.createElement(RACButton, {
     slot: "next",
     className: tx("calendar.button_next", {}) ?? void 0
-  }, /* @__PURE__ */ React13.createElement(Icon, {
+  }, /* @__PURE__ */ React16.createElement(Icon, {
     size: 4,
     icon: "ph--caret-right--regular"
   })));
 };
 var CalendarGridContent = () => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(RACCalendarGrid, {
+  return /* @__PURE__ */ React16.createElement(RACCalendarGrid, {
     className: tx("calendar.month_grid", {}) ?? void 0
-  }, /* @__PURE__ */ React13.createElement(RACCalendarGridHeader, {
+  }, /* @__PURE__ */ React16.createElement(RACCalendarGridHeader, {
     className: tx("calendar.weekdays", {}) ?? void 0
-  }, (day) => /* @__PURE__ */ React13.createElement(RACCalendarHeaderCell, {
+  }, (day) => /* @__PURE__ */ React16.createElement(RACCalendarHeaderCell, {
     className: tx("calendar.weekday", {}) ?? void 0
-  }, day)), /* @__PURE__ */ React13.createElement(RACCalendarGridBody, null, (date) => /* @__PURE__ */ React13.createElement(RACCalendarCell, {
+  }, day)), /* @__PURE__ */ React16.createElement(RACCalendarGridBody, null, (date) => /* @__PURE__ */ React16.createElement(RACCalendarCell, {
     date,
     className: tx("calendar.day", {}) ?? void 0
   })));
 };
-var CalendarRoot = /* @__PURE__ */ forwardRef11((props, forwardedRef) => {
+var CalendarRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { classNames, className, isDisabled, minValue, maxValue, defaultMonth } = props;
   const defaultFocused = toCalendarDate(defaultMonth) ?? void 0;
   if (props.mode === "range") {
@@ -717,12 +847,12 @@ var CalendarRoot = /* @__PURE__ */ forwardRef11((props, forwardedRef) => {
         }
       }
     };
-    return /* @__PURE__ */ React13.createElement(CalendarShell, {
+    return /* @__PURE__ */ React16.createElement(CalendarShell, {
       classNames,
       className,
       isDisabled,
       forwardedRef
-    }, /* @__PURE__ */ React13.createElement(RACRangeCalendar, racProps2, /* @__PURE__ */ React13.createElement(CalendarChrome, null), /* @__PURE__ */ React13.createElement(CalendarGridContent, null)));
+    }, /* @__PURE__ */ React16.createElement(RACRangeCalendar, racProps2, /* @__PURE__ */ React16.createElement(CalendarChrome, null), /* @__PURE__ */ React16.createElement(CalendarGridContent, null)));
   }
   const racProps = {
     isDisabled,
@@ -732,12 +862,12 @@ var CalendarRoot = /* @__PURE__ */ forwardRef11((props, forwardedRef) => {
     value: toCalendarDate(props.selected),
     onChange: (next) => props.onSelect?.(fromCalendarDate(next))
   };
-  return /* @__PURE__ */ React13.createElement(CalendarShell, {
+  return /* @__PURE__ */ React16.createElement(CalendarShell, {
     classNames,
     className,
     isDisabled,
     forwardedRef
-  }, /* @__PURE__ */ React13.createElement(RACCalendar, racProps, /* @__PURE__ */ React13.createElement(CalendarChrome, null), /* @__PURE__ */ React13.createElement(CalendarGridContent, null)));
+  }, /* @__PURE__ */ React16.createElement(RACCalendar, racProps, /* @__PURE__ */ React16.createElement(CalendarChrome, null), /* @__PURE__ */ React16.createElement(CalendarGridContent, null)));
 });
 CalendarRoot.displayName = "Calendar.Root";
 var Calendar = {
@@ -745,16 +875,18 @@ var Calendar = {
 };
 
 // src/components/Card/Card.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { Slot as Slot11 } from "@radix-ui/react-slot";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
 import DOMPurify from "dompurify";
-import React20, { forwardRef as forwardRef16, useId as useId3, useMemo as useMemo5 } from "react";
+import React21, { forwardRef as forwardRef17, useId as useId3, useMemo as useMemo5 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
 import { iconSize } from "@dxos/ui-theme";
+import { translationKey as translationKey3 } from "#translations";
 
 // src/components/Column/Column.tsx
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React14 from "react";
+import React17 from "react";
 var COLUMN_ROOT_NAME = "Column.Root";
 var gutterSizes = {
   xs: "var(--dx-gutter-xs)",
@@ -767,7 +899,7 @@ var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }
   const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
   const gutterSize = gutterSizes[gutter];
-  return /* @__PURE__ */ React14.createElement(Comp, {
+  return /* @__PURE__ */ React17.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     style: {
@@ -792,7 +924,7 @@ var ColumnRow = slottable(({ children, asChild, role, ...props }, forwardedRef)
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(Comp, {
+  return /* @__PURE__ */ React17.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     className: tx("column.row", {}, className),
@@ -805,7 +937,7 @@ var ColumnBleed = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React14.createElement(Comp, {
+  return /* @__PURE__ */ React17.createElement(Comp, {
     ...rest,
     className: tx("column.bleed", {}, className),
     ref: forwardedRef
@@ -817,33 +949,51 @@ var ColumnCenter = slottable(({ children, asChild, ...props }, forwardedRef) =>
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React14.createElement(Comp, {
+  return /* @__PURE__ */ React17.createElement(Comp, {
     ...rest,
     className: tx("column.center", {}, className),
     ref: forwardedRef
   }, children);
 });
 ColumnCenter.displayName = COLUMN_CENTER_NAME;
+var COLUMN_BLOCK_NAME = "Column.Block";
+var ColumnBlock = slottable(({ children, asChild, end, compact, square, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React17.createElement(Comp, {
+    ...rest,
+    "data-slot": end ? "end" : "start",
+    className: tx("column.block", {
+      end,
+      compact,
+      square
+    }, className),
+    ref: forwardedRef
+  }, children);
+});
+ColumnBlock.displayName = COLUMN_BLOCK_NAME;
 var Column = {
   Root: ColumnRoot,
   Row: ColumnRow,
+  Block: ColumnBlock,
   Bleed: ColumnBleed,
   Center: ColumnCenter
 };
 
 // src/components/Image/Image.tsx
-import React15, { useCallback as useCallback3, useRef, useState as useState3 } from "react";
-import { mx as mx6 } from "@dxos/ui-theme";
+import React18, { useCallback as useCallback4, useRef as useRef2, useState as useState3 } from "react";
+import { mx as mx7 } from "@dxos/ui-theme";
 var cache = /* @__PURE__ */ new Map();
 var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin, 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 canvasRef = useRef2(null);
   const handleImageError = () => {
     setCrossOriginState(void 0);
   };
-  const handleImageLoad = useCallback3(({ target }) => {
+  const handleImageLoad = useCallback4(({ target }) => {
     const rgb = cache.get(src);
     if (rgb) {
       setDominantColor(rgb);
@@ -873,37 +1023,37 @@ var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin, sampleSi
     contrast,
     src
   ]);
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React18.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: mx6(`relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`, classNames),
+    className: mx7(`relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`, classNames),
     style: {
       backgroundColor: dominantColor
     }
-  }, /* @__PURE__ */ React15.createElement("canvas", {
+  }, /* @__PURE__ */ React18.createElement("canvas", {
     ref: canvasRef,
     style: {
       display: "none"
     },
     "aria-hidden": "true"
-  }), /* @__PURE__ */ React15.createElement("div", {
+  }), /* @__PURE__ */ React18.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__ */ React15.createElement("img", {
+  }), /* @__PURE__ */ React18.createElement("img", {
     src,
     alt,
     crossOrigin: crossOriginState,
     onError: handleImageError,
     onLoad: handleImageLoad,
-    className: mx6("z-10 transition-opacity duration-500", fit === "cover" ? "w-full h-full object-cover" : "object-contain"),
+    className: mx7("z-10 transition-opacity duration-500", fit === "cover" ? "w-full h-full object-cover" : "object-contain"),
     style: {
       opacity: imageLoaded ? 1 : 0
     }
@@ -992,27 +1142,19 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
   return edgeTransparentPixels / edgePixels > threshold;
 };
 
-// src/components/Toolbar/Toolbar.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React19, { forwardRef as forwardRef15 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { translationKey as translationKey2 } from "#translations";
-
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React16, { forwardRef as forwardRef12 } from "react";
+import React19, { forwardRef as forwardRef15 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef15(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -1022,18 +1164,18 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, c
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Comp = asChild ? Slot8 : Primitive8.div;
-  return /* @__PURE__ */ React16.createElement(Comp, {
+  return /* @__PURE__ */ React19.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", {}, classNames),
     ref: forwardedRef
@@ -1041,33 +1183,33 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, f
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", {}, classNames),
     ref: forwardedRef
@@ -1098,7 +1240,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React17, { forwardRef as forwardRef13, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import React20, { forwardRef as forwardRef16, useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1107,24 +1249,24 @@ 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 triggerRef = useRef3(null);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React17.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ React20.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
     triggerId: useId2(),
     triggerRef,
     contentId: useId2(),
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback4(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback5(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ React17.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ React20.createElement(MenuPrimitive.Root, {
     ...menuScope,
     dir,
     modal,
@@ -1134,14 +1276,14 @@ var DropdownMenuRoot = ({ __scopeDropdownMenu, children, dir, modal = true, open
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenu.Trigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React17.createElement(Primitive9.button, {
+  }, /* @__PURE__ */ React20.createElement(Primitive9.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1195,7 +1337,7 @@ var DropdownMenuVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1205,29 +1347,29 @@ var PORTAL_NAME = "DropdownMenu.Portal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef16(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Comp = asChild ? Slot9 : Primitive9.div;
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React20.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var CONTENT_NAME = "DropdownMenu.Content";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef16((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 hasInteractedOutsideRef = useRef3(false);
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   const computedCollisionBoundary = useMemo4(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
@@ -1245,7 +1387,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) =>
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Content, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
@@ -1287,10 +1429,10 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) =>
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenu.Group";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1298,11 +1440,11 @@ var DropdownMenuGroup = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenu.Label";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", {}, classNames),
@@ -1311,11 +1453,11 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13((props, forwardedRef)
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenu.Item";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1324,11 +1466,11 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenu.CheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", {}, classNames),
@@ -1337,10 +1479,10 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13((props, forwardedRef
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenu.RadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1348,11 +1490,11 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef13((props, forwardedRef)
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenu.RadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1361,10 +1503,10 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) =
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenu.ItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1372,11 +1514,11 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef13((props, forwardedRe
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenu.Separator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", {}, classNames),
@@ -1385,11 +1527,11 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13((props, forwardedRef) =
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenu.Arrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", {}, classNames),
@@ -1405,17 +1547,17 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenu.SubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1423,10 +1565,10 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef13((props, forwardedRef)
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenu.SubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1466,148 +1608,48 @@ var DropdownMenu = {
 };
 var useDropdownMenuMenuScope = useMenuScope;
 
-// src/components/Separator/Separator.tsx
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import React18, { forwardRef as forwardRef14 } from "react";
-var Separator3 = /* @__PURE__ */ forwardRef14(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(SeparatorPrimitive.Root, {
-    ...props,
-    orientation,
-    className: tx("separator.root", {
-      orientation,
-      subdued
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-
-// src/components/Toolbar/Toolbar.tsx
-var ToolbarRoot = composable(({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
-  const { className, role, ...rest } = composableProps(props);
+// src/components/Card/Card.tsx
+var CARD_ROOT_NAME = "Card.Root";
+var CardRoot = composable(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React21.createElement(Column.Root, {
+    asChild: true,
+    gutter: density === "lg" ? "lg" : density === "sm" || density === "xs" ? "sm" : "md",
+    classNames: tx("card.root", {
+      border,
+      fullWidth
+    }, className),
+    role: role ?? "group"
+  }, /* @__PURE__ */ React21.createElement("div", {
     ...rest,
-    ...role !== "none" && {
-      role
+    ...id && {
+      "data-object-id": id
     },
-    orientation,
-    "data-arrow-keys": orientation === "vertical" ? "up down" : "left right",
-    className: tx("toolbar.root", {
-      density,
-      disabled,
-      layoutManaged
-    }, className),
     ref: forwardedRef
-  }, children);
+  }, children));
 });
-ToolbarRoot.displayName = "Toolbar.Root";
-var ToolbarText = slottable(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot10 : Primitive10.div;
+CardRoot.displayName = CARD_ROOT_NAME;
+var CARD_HEADER_NAME = "Card.Header";
+var CardHeader = slottable(({ children, asChild, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(Comp, {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot10 : "header";
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
-    className: tx("toolbar.text", {}, className),
+    style: {
+      ...iconSize(5),
+      ...style
+    },
+    className: tx("card.header", {}, className),
     ref: forwardedRef
   }, children);
 });
-ToolbarText.displayName = "Toolbar.Text";
-var ToolbarButton = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(Button, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-ToolbarButton.displayName = "Toolbar.Button";
-var ToolbarIconButton = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(IconButton, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-ToolbarIconButton.displayName = "Toolbar.IconButton";
-var ToolbarToggle = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(Toggle, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-ToolbarToggle.displayName = "Toolbar.Toggle";
-var ToolbarLink = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Link, {
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(Link, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-ToolbarLink.displayName = "Toolbar.Link";
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef15(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
-    ...props,
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(ButtonGroup, {
-    classNames,
-    children,
-    elevation,
-    ref: forwardedRef
-  }));
-});
-ToolbarToggleGroup2.displayName = "Toolbar.ToggleGroup";
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef15(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.ToolbarToggleItem, {
-    ...props,
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(Button, {
-    variant,
-    density,
-    elevation,
-    classNames,
-    children,
-    ref: forwardedRef
-  }));
-});
-ToolbarToggleGroupItem.displayName = "Toolbar.ToggleGroupItem";
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef15(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ToolbarPrimitive.ToolbarToggleItem, {
-    ...props,
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(IconButton, {
-    variant,
-    density,
-    elevation,
-    classNames,
-    icon,
-    label,
-    iconOnly,
-    iconClassNames,
-    ref: forwardedRef
-  }));
-});
-ToolbarToggleGroupIconItem.displayName = "Toolbar.ToggleGroupIconItem";
-var ToolbarSeparator = /* @__PURE__ */ forwardRef15(({ variant = "gap", ...props }, forwardedRef) => {
-  return variant === "line" ? /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Separator, {
-    asChild: true
-  }, /* @__PURE__ */ React19.createElement(Separator3, {
-    orientation: "vertical",
-    ...props,
-    ref: forwardedRef
-  })) : /* @__PURE__ */ React19.createElement(ToolbarPrimitive.Separator, {
-    className: "grow",
-    ref: forwardedRef
-  });
-});
-ToolbarSeparator.displayName = "Toolbar.Separator";
-var ToolbarDragHandle = /* @__PURE__ */ forwardRef15(({ testId = "drag-handle", label }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React19.createElement(ToolbarIconButton, {
+CardHeader.displayName = CARD_HEADER_NAME;
+var CARD_DRAG_HANDLE_NAME = "Card.DragHandle";
+var CardDragHandle = /* @__PURE__ */ forwardRef17(({ testId = "drag-handle", label }, forwardedRef) => {
+  const { t } = useTranslation3(translationKey3);
+  return /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(IconButton, {
     "data-testid": testId,
     tabIndex: -1,
     noTooltip: true,
@@ -1615,147 +1657,78 @@ var ToolbarDragHandle = /* @__PURE__ */ forwardRef15(({ testId = "drag-handle",
     icon: "ph--dots-six-vertical--regular",
     variant: "ghost",
     label: label ?? t("toolbar-drag-handle.label"),
-    classNames: "dx-focus-ring-none cursor-pointer",
+    classNames: "dx-focus-ring-none cursor-pointer text-base-fg",
     disabled: !forwardedRef,
     ref: forwardedRef
-  });
+  }));
 });
-ToolbarDragHandle.displayName = "Toolbar.DragHandle";
-var TOOLBAR_ACTION_ICONS = {
+CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
+var CARD_ACTION_ICON_BUTTON_NAME = "Card.ActionIconButton";
+var CARD_ACTION_ICONS = {
   close: "ph--x--regular",
   delete: "ph--trash--regular"
 };
-var TOOLBAR_ACTION_LABEL_KEYS = {
+var CARD_ACTION_LABEL_KEYS = {
   close: "toolbar-close.label",
   delete: "toolbar-delete.label"
 };
-var ToolbarActionIconButton = /* @__PURE__ */ forwardRef15(({ action, onClick, label }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React19.createElement(ToolbarIconButton, {
+var CardActionIconButton = /* @__PURE__ */ forwardRef17(({ action, onClick, label }, forwardedRef) => {
+  const { t } = useTranslation3(translationKey3);
+  return /* @__PURE__ */ React21.createElement(CardBlock, {
+    end: true
+  }, /* @__PURE__ */ React21.createElement(IconButton, {
     iconOnly: true,
-    icon: TOOLBAR_ACTION_ICONS[action],
+    icon: CARD_ACTION_ICONS[action],
     variant: "ghost",
-    label: label ?? t(TOOLBAR_ACTION_LABEL_KEYS[action]),
+    label: label ?? t(CARD_ACTION_LABEL_KEYS[action]),
     classNames: "cursor-pointer",
     onClick,
     ref: forwardedRef
-  });
+  }));
 });
-ToolbarActionIconButton.displayName = "Toolbar.ActionIconButton";
-function ToolbarMenu({ context, items }) {
-  const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React19.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React19.createElement(DropdownMenu.Trigger, {
+CardActionIconButton.displayName = CARD_ACTION_ICON_BUTTON_NAME;
+var CARD_MENU_NAME = "Card.Menu";
+function CardMenu({ context, items }) {
+  const { t } = useTranslation3(translationKey3);
+  return /* @__PURE__ */ React21.createElement(CardBlock, {
+    end: true
+  }, /* @__PURE__ */ React21.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Trigger, {
     disabled: !items?.length,
     asChild: true
-  }, /* @__PURE__ */ React19.createElement(ToolbarIconButton, {
+  }, /* @__PURE__ */ React21.createElement(IconButton, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     label: t("toolbar-menu.label")
-  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React19.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React19.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React19.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React19.createElement(DropdownMenu.Item, {
-    key: index,
-    onSelect: () => onSelect(context)
-  }, label))), /* @__PURE__ */ React19.createElement(DropdownMenu.Arrow, null))));
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React21.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => (
+    // `context` is the generic payload threaded to each handler; the cast is the
+    // generic boundary (T may be `void`, so `context` is typed `T | undefined`).
+    /* @__PURE__ */ React21.createElement(DropdownMenu.Item, {
+      key: index,
+      onSelect: () => onSelect(context)
+    }, label)
+  ))), /* @__PURE__ */ React21.createElement(DropdownMenu.Arrow, null)))));
 }
-ToolbarMenu.displayName = "Toolbar.Menu";
-var Toolbar = {
-  Root: ToolbarRoot,
-  Text: ToolbarText,
-  Button: ToolbarButton,
-  IconButton: ToolbarIconButton,
-  Link: ToolbarLink,
-  Toggle: ToolbarToggle,
-  ToggleGroup: ToolbarToggleGroup2,
-  ToggleGroupItem: ToolbarToggleGroupItem,
-  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
-  Separator: ToolbarSeparator,
-  DragHandle: ToolbarDragHandle,
-  ActionIconButton: ToolbarActionIconButton,
-  Menu: ToolbarMenu
-};
-
-// src/components/Card/Card.tsx
-var CARD_ROOT_NAME = "Card.Root";
-var CardRoot = composable(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
+CardMenu.displayName = CARD_MENU_NAME;
+var CARD_BLOCK_NAME = "Card.Block";
+var CardBlock = composable(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(Column.Root, {
-    asChild: true,
-    gutter: density === "lg" ? "lg" : density === "sm" || density === "xs" ? "sm" : "md",
-    classNames: tx("card.root", {
-      border,
-      fullWidth
-    }, className),
-    role: role ?? "group"
-  }, /* @__PURE__ */ React20.createElement("div", {
+  const { className, ...rest } = composableProps(props);
+  return /* @__PURE__ */ React21.createElement(Column.Block, {
     ...rest,
-    ...id && {
-      "data-object-id": id
-    },
-    ref: forwardedRef
-  }, children));
-});
-CardRoot.displayName = CARD_ROOT_NAME;
-var CARD_HEADER_NAME = "Card.Header";
-var CardHeader = composable(({ children, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(Toolbar.Root, {
-    ...props,
-    style: iconSize(5),
-    classNames: [
-      tx("card.header", {}),
-      classNames
-    ],
+    classNames: tx("card.block", {}, className),
     ref: forwardedRef
   }, children);
 });
-CardHeader.displayName = CARD_HEADER_NAME;
-var CARD_DRAG_HANDLE_NAME = "Card.DragHandle";
-var CardDragHandle = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
-  return /* @__PURE__ */ React20.createElement(CardIconBlock, null, /* @__PURE__ */ React20.createElement(Toolbar.DragHandle, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
-var CARD_ACTION_ICON_BUTTON_NAME = "Card.ActionIconButton";
-var CardActionIconButton = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
-  return /* @__PURE__ */ React20.createElement(CardIconBlock, null, /* @__PURE__ */ React20.createElement(Toolbar.ActionIconButton, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-CardActionIconButton.displayName = CARD_ACTION_ICON_BUTTON_NAME;
-var CARD_MENU_NAME = "Card.Menu";
-function CardMenu({ context, items, ...props }) {
-  return /* @__PURE__ */ React20.createElement(CardIconBlock, null, /* @__PURE__ */ React20.createElement(Toolbar.Menu, {
-    ...props,
-    context,
-    items: items ?? []
-  }));
-}
-CardMenu.displayName = CARD_MENU_NAME;
-var CARD_ICON_NAME = "Card.Icon";
-function CardIcon(props) {
-  return /* @__PURE__ */ React20.createElement(CardIconBlock, null, /* @__PURE__ */ React20.createElement(Icon, props));
-}
-CardIcon.displayName = CARD_ICON_NAME;
-var CARD_ICON_BLOCK_NAME = "Card.IconBlock";
-var CardIconBlock = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
-  return /* @__PURE__ */ React20.createElement(IconBlock, {
-    ...props,
-    ref: forwardedRef
-  });
-});
-CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
+CardBlock.displayName = CARD_BLOCK_NAME;
 var CARD_TITLE_NAME = "Card.Title";
 var CardTitle = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props, {
     role: "heading"
   });
-  const Comp = asChild ? Slot11 : Primitive11.div;
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  const Comp = asChild ? Slot10 : Primitive10.div;
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
     className: tx("card.title", {}, className),
     ref: forwardedRef
@@ -1765,9 +1738,9 @@ CardTitle.displayName = CARD_TITLE_NAME;
 var CARD_BODY_NAME = "Card.Body";
 var CardBody = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+  const Comp = asChild ? Slot10 : Primitive10.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
     className: tx("card.body", {}, className),
     ref: forwardedRef
@@ -1777,53 +1750,52 @@ CardBody.displayName = CARD_BODY_NAME;
 var CARD_SECTION_NAME = "Card.Section";
 var CardSection = slottable(({ children, asChild, title, role, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
+  const Comp = asChild ? Slot10 : Primitive10.div;
   const { tx } = useThemeContext();
   const titleId = useId3();
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
     role: role ?? (title ? "group" : "none"),
     "aria-labelledby": title ? titleId : void 0,
     className: tx("card.section", {}, className),
     ref: forwardedRef
-  }, title && /* @__PURE__ */ React20.createElement("div", {
+  }, title && /* @__PURE__ */ React21.createElement("div", {
     id: titleId,
     className: tx("card.section-title", {})
   }, title), children);
 });
 CardSection.displayName = CARD_SECTION_NAME;
 var CARD_ROW_NAME = "Card.Row";
-var CardRow = slottable(({ children, asChild, icon: iconProp, fullWidth, ...props }, forwardedRef) => {
+var CardRow = slottable(({ children, asChild, fullWidth, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
-  const icon = typeof iconProp === "string" ? /* @__PURE__ */ React20.createElement(CardIcon, {
-    classNames: "text-subdued",
-    icon: iconProp,
-    size: 4
-  }) : iconProp ? iconProp : /* @__PURE__ */ React20.createElement("div", null);
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  const Comp = asChild ? Slot10 : Primitive10.div;
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
+    style: {
+      ...iconSize(4),
+      ...style
+    },
     className: tx("card.row", {
       fullWidth
     }, className),
     ref: forwardedRef
-  }, !fullWidth && icon, children);
+  }, children);
 });
 CardRow.displayName = CARD_ROW_NAME;
 var CARD_TEXT_NAME = "Card.Text";
 var CardText = slottable(({ children, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot11 : Primitive11.div;
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  const Comp = asChild ? Slot10 : Primitive10.div;
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     className: tx("card.text", {
       variant
     }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React20.createElement("span", {
+  }, /* @__PURE__ */ React21.createElement("span", {
     className: tx("card.text-span", {
       variant,
       truncate
@@ -1837,7 +1809,7 @@ function CardHtml({ html = "", variant = "default", ...props }) {
   const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
     html
   ]);
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     ...props,
     className: tx("card.text", {
       variant
@@ -1850,13 +1822,11 @@ function CardHtml({ html = "", variant = "default", ...props }) {
 }
 CardHtml.displayName = CARD_HTML_NAME;
 var CARD_POSTER_NAME = "Card.Poster";
-function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, ...imageProps }) {
+function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, fit = "cover", ...imageProps }) {
   const { tx } = useThemeContext();
   const aspect = aspectProp === "auto" ? "aspect-auto" : "aspect-video";
   if (image) {
-    return /* @__PURE__ */ React20.createElement("div", {
-      className: "col-span-full"
-    }, /* @__PURE__ */ React20.createElement(Image, {
+    return /* @__PURE__ */ React21.createElement(Image, {
       classNames: [
         tx("card.poster", {}),
         aspect,
@@ -1864,18 +1834,19 @@ function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, ...image
       ],
       src: image,
       alt,
+      fit,
       ...imageProps
-    }));
+    });
   }
   if (icon) {
-    return /* @__PURE__ */ React20.createElement("div", {
+    return /* @__PURE__ */ React21.createElement("div", {
       role: "image",
       className: tx("card.poster-icon", {}, [
         aspect,
         classNames
       ]),
       "aria-label": alt
-    }, /* @__PURE__ */ React20.createElement(Icon, {
+    }, /* @__PURE__ */ React21.createElement(Icon, {
       icon,
       size: 10
     }));
@@ -1885,52 +1856,55 @@ CardPoster.displayName = CARD_POSTER_NAME;
 var CARD_ACTION_NAME = "Card.Action";
 function CardAction({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(Button, {
+  return /* @__PURE__ */ React21.createElement(Button, {
     variant: "ghost",
     classNames: tx("card.action", {}),
     onClick
-  }, icon ? /* @__PURE__ */ React20.createElement(CardIcon, {
-    classNames: "text-subdued",
+  }, icon && /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(Icon, {
     icon,
     size: 4
-  }) : /* @__PURE__ */ React20.createElement("div", null), /* @__PURE__ */ React20.createElement("span", {
-    className: tx("card.action-label", {}, !actionIcon ? "col-span-2" : void 0)
-  }, label), actionIcon && /* @__PURE__ */ React20.createElement(CardIcon, {
+  })), /* @__PURE__ */ React21.createElement("span", {
+    className: tx("card.action-label", {})
+  }, label), actionIcon && /* @__PURE__ */ React21.createElement(CardBlock, {
+    end: true
+  }, /* @__PURE__ */ React21.createElement(Icon, {
     icon: actionIcon,
     size: 4
-  }));
+  })));
 }
 CardAction.displayName = CARD_ACTION_NAME;
 var CARD_LINK_NAME = "Card.Link";
 function CardLink({ label, href }) {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement("a", {
+  return /* @__PURE__ */ React21.createElement("a", {
     className: tx("card.link", {}),
     "data-variant": "ghost",
     href,
     target: "_blank",
     rel: "noreferrer"
-  }, /* @__PURE__ */ React20.createElement(CardIcon, {
-    classNames: "text-subdued",
-    icon: "ph--link--regular"
-  }), /* @__PURE__ */ React20.createElement("span", {
+  }, /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(Icon, {
+    icon: "ph--link--regular",
+    size: 4
+  })), /* @__PURE__ */ React21.createElement("span", {
     className: tx("card.link-label", {})
-  }, label), /* @__PURE__ */ React20.createElement(CardIcon, {
-    classNames: "invisible group-hover:visible",
-    icon: "ph--arrow-square-out--regular"
-  }));
+  }, label), /* @__PURE__ */ React21.createElement(CardBlock, {
+    end: true,
+    classNames: "invisible group-hover:visible"
+  }, /* @__PURE__ */ React21.createElement(Icon, {
+    icon: "ph--arrow-square-out--regular",
+    size: 4
+  })));
 }
 CardLink.displayName = CARD_LINK_NAME;
 var Card = {
   Root: CardRoot,
   // Header
   Header: CardHeader,
-  // Header parts
-  IconBlock: CardIconBlock,
+  // Header / row parts
+  Block: CardBlock,
   DragHandle: CardDragHandle,
   ActionIconButton: CardActionIconButton,
   Menu: CardMenu,
-  Icon: CardIcon,
   Title: CardTitle,
   // Body
   Body: CardBody,
@@ -1947,12 +1921,12 @@ var Card = {
 // src/components/Carousel/Carousel.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { createContext as createContext3 } from "@radix-ui/react-context";
-import React22, { useCallback as useCallback5, useEffect as useEffect3, useState as useState5 } from "react";
-import { mx as mx8 } from "@dxos/ui-theme";
+import React23, { useCallback as useCallback6, useEffect as useEffect3, useState as useState5 } from "react";
+import { mx as mx9 } from "@dxos/ui-theme";
 
 // src/components/MediaPlayer/MediaPlayer.tsx
-import React21, { useState as useState4 } from "react";
-import { mx as mx7 } from "@dxos/ui-theme";
+import React22, { useState as useState4 } from "react";
+import { mx as mx8 } from "@dxos/ui-theme";
 var FIT_CLASS = {
   cover: "object-cover",
   contain: "object-contain",
@@ -1995,8 +1969,8 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
   if (isEmbedUrl(src)) {
     const resolved = kind ?? detectMediaKind(src) ?? "video";
     if (resolved === "audio") {
-      return /* @__PURE__ */ React21.createElement("audio", {
-        className: mx7("w-full", classNames),
+      return /* @__PURE__ */ React22.createElement("audio", {
+        className: mx8("w-full", classNames),
         src,
         controls,
         autoPlay,
@@ -2006,8 +1980,8 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
         "aria-label": alt
       });
     }
-    return /* @__PURE__ */ React21.createElement("video", {
-      className: mx7("max-w-full max-h-full aspect-video", fitClass, classNames),
+    return /* @__PURE__ */ React22.createElement("video", {
+      className: mx8("max-w-full max-h-full aspect-video", fitClass, classNames),
       src,
       controls,
       autoPlay,
@@ -2018,15 +1992,15 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
     });
   }
   if (isCloudflareStreamEmbed(src)) {
-    return /* @__PURE__ */ React21.createElement(IframePlayer, {
+    return /* @__PURE__ */ React22.createElement(IframePlayer, {
       key: src,
       classNames,
       src,
       alt
     });
   }
-  return /* @__PURE__ */ React21.createElement("img", {
-    className: mx7(fitClass, classNames),
+  return /* @__PURE__ */ React22.createElement("img", {
+    className: mx8(fitClass, classNames),
     src,
     alt: alt ?? "",
     loading: "lazy",
@@ -2037,13 +2011,13 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
 };
 var IframePlayer = ({ src, alt, classNames }) => {
   const [loaded, setLoaded] = useState4(false);
-  return /* @__PURE__ */ React21.createElement("div", {
-    className: mx7("relative bg-baseSurface", classNames)
-  }, /* @__PURE__ */ React21.createElement("iframe", {
+  return /* @__PURE__ */ React22.createElement("div", {
+    className: mx8("relative bg-baseSurface", classNames)
+  }, /* @__PURE__ */ React22.createElement("iframe", {
     src,
     title: alt ?? "Embedded media",
     loading: "lazy",
-    className: mx7("border-none w-full h-full transition-opacity duration-150", loaded ? "opacity-100" : "opacity-0"),
+    className: mx8("border-none w-full h-full transition-opacity duration-150", loaded ? "opacity-100" : "opacity-0"),
     style: {
       colorScheme: "dark"
     },
@@ -2081,17 +2055,17 @@ var CarouselRoot = ({ children, count, autorun = false, intervalMs = 5e3, defaul
     count,
     intervalMs
   ]);
-  const setIndex = useCallback5((next2) => {
+  const setIndex = useCallback6((next2) => {
     setAutoAdvance(false);
     setIndexState(next2);
   }, []);
-  const next = useCallback5(() => {
+  const next = useCallback6(() => {
     setAutoAdvance(false);
     setIndexState((i) => (i + 1) % count);
   }, [
     count
   ]);
-  const prev = useCallback5(() => {
+  const prev = useCallback6(() => {
     setAutoAdvance(false);
     setIndexState((i) => (i - 1 + count) % count);
   }, [
@@ -2100,7 +2074,7 @@ var CarouselRoot = ({ children, count, autorun = false, intervalMs = 5e3, defaul
   if (count === 0) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement(CarouselProvider, {
+  return /* @__PURE__ */ React23.createElement(CarouselProvider, {
     index,
     count,
     setIndex,
@@ -2115,7 +2089,7 @@ var CarouselContent = composable(({ children, ...props }, forwardedRef) => (
   // its content height. With no parent height constraint, the `1fr` row simply tracks
   // row-1 content — preserving the existing aspect-video behaviour for unbounded use.
   // TODO(burdon): Move to Carousel.theme.ts
-  /* @__PURE__ */ React22.createElement("div", {
+  /* @__PURE__ */ React23.createElement("div", {
     ...composableProps(props, {
       classNames: "w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center"
     }),
@@ -2126,7 +2100,7 @@ CarouselContent.displayName = "Carousel.Content";
 var CarouselViewport = ({ children, classNames }) => {
   const { t } = useTranslation(translationKey);
   const { count, next, prev } = useCarousel();
-  const handleKeyDown = useCallback5((event) => {
+  const handleKeyDown = useCallback6((event) => {
     if (count <= 1) {
       return;
     }
@@ -2142,9 +2116,9 @@ var CarouselViewport = ({ children, classNames }) => {
     next,
     prev
   ]);
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     // TODO(burdon): Move to ui-theme.
-    className: mx8("relative w-full aspect-video overflow-hidden", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", classNames),
+    className: mx9("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",
@@ -2158,9 +2132,9 @@ var CarouselSlide = ({ index, classNames, src, kind, alt, controls, autoPlay, lo
   if (active !== index) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement("div", {
-    className: mx8("absolute inset-0 w-full h-full bg-baseSurface", classNames)
-  }, /* @__PURE__ */ React22.createElement(MediaPlayer, {
+  return /* @__PURE__ */ React23.createElement("div", {
+    className: mx9("absolute inset-0 w-full h-full bg-baseSurface", classNames)
+  }, /* @__PURE__ */ React23.createElement(MediaPlayer, {
     src,
     kind,
     alt,
@@ -2177,10 +2151,10 @@ var CarouselPrevious = ({ classNames }) => {
   const { t } = useTranslation(translationKey);
   const { count, prev } = useCarousel();
   if (count <= 1) {
-    return /* @__PURE__ */ React22.createElement("div", null);
+    return /* @__PURE__ */ React23.createElement("div", null);
   }
-  return /* @__PURE__ */ React22.createElement(IconButton, {
-    classNames: mx8("self-center", classNames),
+  return /* @__PURE__ */ React23.createElement(IconButton, {
+    classNames: mx9("self-center", classNames),
     square: true,
     variant: "ghost",
     icon: "ph--caret-left--regular",
@@ -2194,10 +2168,10 @@ var CarouselNext = ({ classNames }) => {
   const { t } = useTranslation(translationKey);
   const { count, next } = useCarousel();
   if (count <= 1) {
-    return /* @__PURE__ */ React22.createElement("div", null);
+    return /* @__PURE__ */ React23.createElement("div", null);
   }
-  return /* @__PURE__ */ React22.createElement(IconButton, {
-    classNames: mx8("self-center", classNames),
+  return /* @__PURE__ */ React23.createElement(IconButton, {
+    classNames: mx9("self-center", classNames),
     square: true,
     variant: "ghost",
     icon: "ph--caret-right--regular",
@@ -2217,16 +2191,16 @@ var CarouselIndicators = ({ classNames }) => {
   if (count <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     className: "col-start-2 overflow-hidden"
-  }, /* @__PURE__ */ React22.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     ...arrowNavigationAttrs,
-    className: mx8("flex items-center justify-center", classNames),
+    className: mx9("flex items-center justify-center", classNames),
     role: "tablist",
     "aria-label": t("carousel-indicators.label")
   }, Array.from({
     length: count
-  }).map((_, i) => /* @__PURE__ */ React22.createElement(IconButton, {
+  }).map((_, i) => /* @__PURE__ */ React23.createElement(IconButton, {
     key: i,
     role: "tab",
     "aria-selected": i === index,
@@ -2251,10 +2225,10 @@ var CarouselCaption = ({ children, classNames }) => {
   }
   return (
     // TODO(burdon): Move to ui-theme.
-    /* @__PURE__ */ React22.createElement("div", {
+    /* @__PURE__ */ React23.createElement("div", {
       className: "col-start-2"
-    }, /* @__PURE__ */ React22.createElement("p", {
-      className: mx8("text-center text-description", classNames)
+    }, /* @__PURE__ */ React23.createElement("p", {
+      className: mx9("text-center text-description", classNames)
     }, content))
   );
 };
@@ -2271,7 +2245,7 @@ var Carousel = {
 };
 
 // src/components/Clipboard/ClipboardProvider.tsx
-import React23, { createContext as createContext4, useCallback as useCallback6, useContext as useContext3, useState as useState6 } from "react";
+import React24, { createContext as createContext4, useCallback as useCallback7, useContext as useContext3, useState as useState6 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -2280,11 +2254,11 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 var useClipboard = () => useContext3(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
   const [textValue, setInternalTextValue] = useState6("");
-  const setTextValue = useCallback6(async (nextValue) => {
+  const setTextValue = useCallback7(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React23.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React24.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -2293,14 +2267,14 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // src/components/Clipboard/CopyButton.tsx
-import React24 from "react";
-import { mx as mx9, osTranslations } from "@dxos/ui-theme";
+import React25 from "react";
+import { mx as mx10, 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__ */ React24.createElement(Button, {
+  return /* @__PURE__ */ React25.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -2308,18 +2282,18 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React24.createElement("div", {
-    className: mx9("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React24.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: mx10("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React25.createElement("span", {
     className: "px-1"
-  }, t("copy.label")), /* @__PURE__ */ React24.createElement(Icon, {
+  }, t("copy.label")), /* @__PURE__ */ React25.createElement(Icon, {
     icon: "ph--copy--regular",
     size
-  })), /* @__PURE__ */ React24.createElement("div", {
-    className: mx9("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React24.createElement("span", {
+  })), /* @__PURE__ */ React25.createElement("div", {
+    className: mx10("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React25.createElement("span", {
     className: "px-1"
-  }, t("copy-success.label")), /* @__PURE__ */ React24.createElement(Icon, {
+  }, t("copy-success.label")), /* @__PURE__ */ React25.createElement(Icon, {
     icon: "ph--check--regular",
     size
   })));
@@ -2330,7 +2304,7 @@ var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ..
   const isCopied = textValue === value;
   const label = isCopied ? t("copy-success.label") : props.label ?? t("copy.label");
   const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
-  return /* @__PURE__ */ React24.createElement(IconButton, {
+  return /* @__PURE__ */ React25.createElement(IconButton, {
     iconOnly: true,
     label,
     icon: "ph--copy--regular",
@@ -2355,11 +2329,11 @@ var Clipboard = {
 // src/components/DatePicker/DatePicker.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
 import { format as formatDate } from "date-fns";
-import React26, { forwardRef as forwardRef18, useCallback as useCallback8, useState as useState8 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback9, useState as useState8 } from "react";
 
 // src/components/Popover/Popover.tsx
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
@@ -2369,11 +2343,11 @@ 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 Primitive12 } from "@radix-ui/react-primitive";
-import { Slot as Slot12 } from "@radix-ui/react-slot";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React25, { forwardRef as forwardRef17, useCallback as useCallback7, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState7 } from "react";
+import React26, { forwardRef as forwardRef18, useCallback as useCallback8, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef4, useState as useState7 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope2(POPOVER_NAME, [
@@ -2384,31 +2358,31 @@ var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
-  const triggerRef = useRef3(null);
+  const triggerRef = useRef4(null);
   const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
   const [open = false, setOpen] = useControllableState2({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React25.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React26.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId4(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback7(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback7(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback7(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback8(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback8(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "Popover.Anchor";
-var PopoverAnchor = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -2420,7 +2394,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2428,13 +2402,13 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "Popover.Trigger";
-var PopoverTrigger = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverTrigger = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { __scopePopover, asChild, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  const Comp = asChild ? Slot12 : Primitive12.button;
-  const trigger = /* @__PURE__ */ React25.createElement(Comp, {
+  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+  const Comp = asChild ? Slot11 : Primitive11.button;
+  const trigger = /* @__PURE__ */ React26.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2444,7 +2418,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2460,7 +2434,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2473,48 +2447,48 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React25.createElement(PortalProvider, {
+  return /* @__PURE__ */ React26.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React25.createElement(Presence, {
+  }, /* @__PURE__ */ React26.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React25.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React26.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "Popover.Content";
-var PopoverContent = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React25.createElement(Presence, {
+  return /* @__PURE__ */ React26.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React25.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React26.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React25.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React26.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const contentRef = useRef3(null);
-  const composedRefs = useComposedRefs(forwardedRef, contentRef);
-  const isRightClickOutsideRef = useRef3(false);
+  const contentRef = useRef4(null);
+  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef4(false);
   useEffect4(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React25.createElement(RemoveScroll, {
-    as: Slot12,
+  return /* @__PURE__ */ React26.createElement(RemoveScroll, {
+    as: Slot11,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React25.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React26.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
@@ -2541,11 +2515,11 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef17((props, forwardedRef) =>
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const hasInteractedOutsideRef = useRef3(false);
-  const hasPointerDownOutsideRef = useRef3(false);
-  return /* @__PURE__ */ React25.createElement(PopoverContentImpl, {
+  const hasInteractedOutsideRef = useRef4(false);
+  const hasPointerDownOutsideRef = useRef4(false);
+  return /* @__PURE__ */ React26.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2580,7 +2554,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef17((props, forwardedRef)
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef18((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);
@@ -2604,13 +2578,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React25.createElement(FocusScope, {
+  return /* @__PURE__ */ React26.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React25.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React26.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2618,7 +2592,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React25.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React26.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -2644,10 +2618,10 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   })));
 });
 var CLOSE_NAME = "Popover.Close";
-var PopoverClose = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React25.createElement(Primitive12.button, {
+  return /* @__PURE__ */ React26.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2656,11 +2630,11 @@ var PopoverClose = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "Popover.Arrow";
-var PopoverArrow = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", {}, classNames),
@@ -2668,10 +2642,10 @@ var PopoverArrow = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot12 : Primitive12.div;
-  return /* @__PURE__ */ React25.createElement(Comp, {
+  const Comp = asChild ? Slot11 : Primitive11.div;
+  return /* @__PURE__ */ React26.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
       constrainInline,
@@ -2700,7 +2674,7 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
   const [internalOpen, setInternalOpen] = useState8(defaultOpen ?? false);
   const controlled = value !== void 0 || onValueChange !== void 0;
   const resolvedValue = controlled ? value : internalValue;
-  const setValue = useCallback8((next) => {
+  const setValue = useCallback9((next) => {
     if (!controlled) {
       setInternalValue(next);
     }
@@ -2710,7 +2684,7 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
     onValueChange
   ]);
   const resolvedOpen = open ?? internalOpen;
-  const handleOpenChange = useCallback8((next) => {
+  const handleOpenChange = useCallback9((next) => {
     if (open === void 0) {
       setInternalOpen(next);
     }
@@ -2719,14 +2693,14 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
     open,
     onOpenChange
   ]);
-  return /* @__PURE__ */ React26.createElement(DatePickerProvider, {
+  return /* @__PURE__ */ React27.createElement(DatePickerProvider, {
     mode,
     value: resolvedValue,
     setValue,
     withTime,
     open: resolvedOpen,
     onOpenChange: handleOpenChange
-  }, /* @__PURE__ */ React26.createElement(Popover.Root, {
+  }, /* @__PURE__ */ React27.createElement(Popover.Root, {
     open: resolvedOpen,
     onOpenChange: handleOpenChange
   }, children));
@@ -2747,36 +2721,36 @@ var formatValue = (mode, value, fmt) => {
     }
   }
 };
-var DatePickerTrigger = /* @__PURE__ */ forwardRef18(({ classNames, format: fmt = "PPP", placeholder, icon = true, children, ...props }, forwardedRef) => {
+var DatePickerTrigger = /* @__PURE__ */ forwardRef19(({ classNames, format: fmt = "PPP", placeholder, icon = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation(translationKey);
   const { mode, value } = useDatePickerContext("DatePickerTrigger");
   const placeholderText = placeholder ?? t(`date-picker.placeholder.${mode}.label`);
   const label = formatValue(mode, value, fmt) ?? placeholderText;
   const hasValue = label !== placeholderText;
-  return /* @__PURE__ */ React26.createElement(Popover.Trigger, {
+  return /* @__PURE__ */ React27.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React26.createElement("button", {
+  }, /* @__PURE__ */ React27.createElement("button", {
     ref: forwardedRef,
     type: "button",
     ...props,
     className: tx("datePicker.trigger", {
       hasValue
     }, classNames) ?? void 0
-  }, children ?? /* @__PURE__ */ React26.createElement(React26.Fragment, null, icon && /* @__PURE__ */ React26.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React27.createElement(React27.Fragment, null, icon && /* @__PURE__ */ React27.createElement(Icon, {
     size: 4,
     icon: "ph--calendar--regular"
   }), label)));
 });
 DatePickerTrigger.displayName = "DatePickerTrigger";
-var DatePickerContent = /* @__PURE__ */ forwardRef18(({ classNames, children, ...props }, forwardedRef) => {
+var DatePickerContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(Popover.Portal, null, /* @__PURE__ */ React26.createElement(Popover.Content, {
+  return /* @__PURE__ */ React27.createElement(Popover.Portal, null, /* @__PURE__ */ React27.createElement(Popover.Content, {
     ref: forwardedRef,
     align: "start",
     sideOffset: 4,
     ...props
-  }, /* @__PURE__ */ React26.createElement("div", {
+  }, /* @__PURE__ */ React27.createElement("div", {
     className: tx("datePicker.content", {}, classNames)
   }, children)));
 });
@@ -2796,7 +2770,7 @@ var DatePickerCalendar = ({ classNames } = {}) => {
   const { mode, value, setValue, withTime, onOpenChange } = useDatePickerContext("DatePickerCalendar");
   if (mode === "single") {
     const date = value;
-    return /* @__PURE__ */ React26.createElement(Calendar.Root, {
+    return /* @__PURE__ */ React27.createElement(Calendar.Root, {
       mode: "single",
       classNames,
       selected: date,
@@ -2810,7 +2784,7 @@ var DatePickerCalendar = ({ classNames } = {}) => {
     });
   }
   const range = value;
-  return /* @__PURE__ */ React26.createElement(Calendar.Root, {
+  return /* @__PURE__ */ React27.createElement(Calendar.Root, {
     mode: "range",
     classNames,
     selected: range,
@@ -2841,14 +2815,14 @@ var DatePicker = {
 // 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 React27, { forwardRef as forwardRef19 } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import React28, { forwardRef as forwardRef20 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
 import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
-var DialogRoot = (props) => /* @__PURE__ */ React27.createElement(ElevationProvider, {
+var DialogRoot = (props) => /* @__PURE__ */ React28.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React27.createElement(DialogPrimitive.Root, {
+}, /* @__PURE__ */ React28.createElement(DialogPrimitive.Root, {
   // NOTE: Radix warning unless set to undefined.
   // https://www.radix-ui.com/primitives/docs/components/dialog#description
   "aria-describedby": void 0,
@@ -2859,23 +2833,23 @@ var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DIALOG_OVERLAY_NAME = "Dialog.Overlay";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext6(DIALOG_OVERLAY_NAME, {});
-var DialogOverlay = /* @__PURE__ */ forwardRef19(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef20(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(DialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React27.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React28.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 var DIALOG_CONTENT_NAME = "Dialog.Content";
-var DialogContent = /* @__PURE__ */ forwardRef19(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React27.createElement(DialogPrimitive.Content, {
+  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Content, {
     ...props,
     // NOTE: Radix warning unless set to undefined.
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
@@ -2885,7 +2859,7 @@ var DialogContent = /* @__PURE__ */ forwardRef19(({ classNames, children, size =
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React27.createElement(Column.Root, {
+  }, /* @__PURE__ */ React28.createElement(Column.Root, {
     classNames: "dx-expander",
     gutter: "sm"
   }, children));
@@ -2893,9 +2867,9 @@ var DialogContent = /* @__PURE__ */ forwardRef19(({ classNames, children, size =
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 var DialogHeader = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot13 : Primitive13.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(Comp, {
+  return /* @__PURE__ */ React28.createElement(Comp, {
     ...rest,
     className: tx("dialog.header", {}, className),
     ref: forwardedRef
@@ -2911,9 +2885,9 @@ var DIALOG_ACTION_LABEL_KEYS = {
   close: "close-dialog.label",
   delete: "toolbar-delete.label"
 };
-var DialogActionIconButton = /* @__PURE__ */ forwardRef19(({ action, label, ...props }, forwardedRef) => {
-  const { t } = useTranslation3(osTranslations2);
-  return /* @__PURE__ */ React27.createElement(IconButton, {
+var DialogActionIconButton = /* @__PURE__ */ forwardRef20(({ action, label, ...props }, forwardedRef) => {
+  const { t } = useTranslation4(osTranslations2);
+  return /* @__PURE__ */ React28.createElement(IconButton, {
     ...props,
     label: label ?? t(DIALOG_ACTION_LABEL_KEYS[action]),
     icon: DIALOG_ACTION_ICONS[action],
@@ -2926,18 +2900,18 @@ var DialogActionIconButton = /* @__PURE__ */ forwardRef19(({ action, label, ...p
 DialogActionIconButton.displayName = "Dialog.ActionIconButton";
 var DialogBody = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot13 : Primitive13.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(Comp, {
+  return /* @__PURE__ */ React28.createElement(Comp, {
     ...rest,
     className: tx("dialog.body", {}, className),
     ref: forwardedRef
   }, children);
 });
 DialogBody.displayName = "Dialog.Body";
-var DialogTitle = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(DialogPrimitive.Title, {
+  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -2946,9 +2920,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }
   });
 });
 DialogTitle.displayName = "Dialog.Title";
-var DialogDescription = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(DialogPrimitive.Description, {
+  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -2959,9 +2933,9 @@ var DialogDescription = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...p
 DialogDescription.displayName = "Dialog.Description";
 var DialogActionBar = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className: classNames, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot13 : Primitive13.div;
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(Comp, {
+  return /* @__PURE__ */ React28.createElement(Comp, {
     ...rest,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
@@ -2987,10 +2961,10 @@ var Dialog = {
 // src/components/Dialog/AlertDialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { createContext as createContext7 } from "@radix-ui/react-context";
-import React28, { forwardRef as forwardRef20 } from "react";
-var AlertDialogRoot = (props) => /* @__PURE__ */ React28.createElement(ElevationProvider, {
+import React29, { forwardRef as forwardRef21 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React29.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React28.createElement(AlertDialogPrimitive.Root, props));
+}, /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Root, props));
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
 var AlertDialogCancel = AlertDialogPrimitive.Cancel;
@@ -3000,37 +2974,37 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialog.Content";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext7(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef20(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef21(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(AlertDialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React29.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size = "md", ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef21(({ classNames, children, size = "md", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React28.createElement(AlertDialogPrimitive.Content, {
+  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Content, {
     ...props,
     className: tx("dialog.content", {
       inOverlayLayout,
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(Column.Root, {
+  }, /* @__PURE__ */ React29.createElement(Column.Root, {
     classNames: "dx-expander",
     gutter: "sm"
   }, children));
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(AlertDialogPrimitive.Title, {
+  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -3038,9 +3012,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(AlertDialogPrimitive.Description, {
+  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -3070,40 +3044,40 @@ var AlertDialog = {
 import { ErrorBoundary } from "@dxos/react-error-boundary";
 
 // src/components/ErrorFallback/ErrorFallback.tsx
-import React29 from "react";
+import React30 from "react";
 import { safeStringify } from "@dxos/util";
-import { translationKey as translationKey3 } from "#translations";
+import { translationKey as translationKey4 } from "#translations";
 var ErrorFallback = ({ children, error, title, data }) => {
-  const { t } = useTranslation(translationKey3);
+  const { t } = useTranslation(translationKey4);
   const isDev = process.env.NODE_ENV === "development";
   const message = error instanceof Error ? error.message : String(error);
-  return /* @__PURE__ */ React29.createElement("div", {
+  return /* @__PURE__ */ React30.createElement("div", {
     role: "alert",
     "data-testid": "error-boundary-fallback",
     className: "flex flex-col p-4 gap-4 overflow-auto"
-  }, /* @__PURE__ */ React29.createElement("h1", {
+  }, /* @__PURE__ */ React30.createElement("h1", {
     className: "text-lg text-info-text"
-  }, title ?? "Runtime Error"), /* @__PURE__ */ React29.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React29.createElement(Section, {
+  }, title ?? "Runtime Error"), /* @__PURE__ */ React30.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React30.createElement(Section, {
     title: "Stack",
     onClick: () => {
       const text = error instanceof Error ? error.stack ?? error.message : String(error);
       void navigator.clipboard.writeText(text);
     }
-  }, /* @__PURE__ */ React29.createElement(ErrorStack, {
+  }, /* @__PURE__ */ React30.createElement(ErrorStack, {
     error
-  })), data && /* @__PURE__ */ React29.createElement(Section, {
+  })), data && /* @__PURE__ */ React30.createElement(Section, {
     title: "Data",
     onClick: () => {
       void navigator.clipboard.writeText(JSON.stringify(data, void 0, 2));
     }
-  }, /* @__PURE__ */ React29.createElement("pre", {
+  }, /* @__PURE__ */ React30.createElement("pre", {
     className: "overflow-x-auto text-xs"
   }, safeStringify(data, void 0, 2))), children);
 };
 var Section = ({ children, title, onClick }) => {
-  return /* @__PURE__ */ React29.createElement("div", {
+  return /* @__PURE__ */ React30.createElement("div", {
     className: "flex flex-col gap-1"
-  }, onClick && /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement(IconButton, {
+  }, onClick && /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement(IconButton, {
     classNames: "text-xs uppercase",
     label: title ?? "Copy",
     icon: "ph--clipboard-text--regular",
@@ -3142,17 +3116,17 @@ var generator = ({ error, delay }) => {
 
 // src/components/Focus/Focus.tsx
 import { useArrowNavigationGroup as useArrowNavigationGroup2, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
-import { useComposedRefs as useComposedRefs2 } 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 React30, { createContext as createContext8, useCallback as useCallback9, useContext as useContext4, useRef as useRef4, useState as useState10 } from "react";
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React31, { createContext as createContext8, useCallback as useCallback10, useContext as useContext4, useRef as useRef5, useState as useState10 } from "react";
 var FOCUS_STATE_ATTR = "focus-state";
 var FocusContext = /* @__PURE__ */ createContext8({});
 var useFocus = () => useContext4(FocusContext);
 var Group3 = slottable(({ children, asChild, orientation = "vertical", border = false, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot14 : Primitive14.div;
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
-  const rootRef = useRef4(null);
+  const rootRef = useRef5(null);
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
@@ -3163,20 +3137,20 @@ var Group3 = slottable(({ children, asChild, orientation = "vertical", border =
   const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
   const [state, setState] = useState10();
   const [groupHasFocus, setGroupHasFocus] = useState10(false);
-  const handleFocusIn = useCallback9(() => setGroupHasFocus(true), []);
-  const handleFocusOut = useCallback9((event) => {
+  const handleFocusIn = useCallback10(() => setGroupHasFocus(true), []);
+  const handleFocusOut = useCallback10((event) => {
     const related = event.relatedTarget;
     if (!related || !rootRef.current?.contains(related)) {
       setGroupHasFocus(false);
     }
   }, []);
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React30.createElement(FocusContext.Provider, {
+  return /* @__PURE__ */ React31.createElement(FocusContext.Provider, {
     value: {
       setFocus: setState,
       groupHasFocus
     }
-  }, /* @__PURE__ */ React30.createElement(Comp, {
+  }, /* @__PURE__ */ React31.createElement(Comp, {
     ...rest,
     tabIndex: 0,
     className: tx("focus.group", {
@@ -3188,11 +3162,11 @@ var Group3 = slottable(({ children, asChild, orientation = "vertical", border =
     },
     onBlur: handleFocusOut,
     onFocus: handleFocusIn,
-    ref: useComposedRefs2(rootRef, forwardedRef)
+    ref: useComposedRefs3(rootRef, forwardedRef)
   }, children));
 });
 var Item4 = slottable(({ children, asChild, current, border = false, onCurrentChange, onClick, onFocus, onBlur, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot14 : Primitive14.div;
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
   const focusableGroupAttrs = useFocusableGroup({
     ignoreDefaultKeydown: {
@@ -3200,27 +3174,27 @@ var Item4 = slottable(({ children, asChild, current, border = false, onCurrentCh
     }
   });
   const [focused, setFocused] = useState10(false);
-  const handleClick = useCallback9((event) => {
+  const handleClick = useCallback10((event) => {
     onCurrentChange?.();
     onClick?.(event);
   }, [
     onCurrentChange,
     onClick
   ]);
-  const handleKeyDown = useCallback9((event) => {
+  const handleKeyDown = useCallback10((event) => {
     if (event.key === "Enter") {
       onCurrentChange?.();
     }
   }, [
     onCurrentChange
   ]);
-  const handleFocus = useCallback9((event) => {
+  const handleFocus = useCallback10((event) => {
     setFocused(true);
     onFocus?.(event);
   }, [
     onFocus
   ]);
-  const handleBlur = useCallback9((event) => {
+  const handleBlur = useCallback10((event) => {
     setFocused(false);
     onBlur?.(event);
   }, [
@@ -3228,7 +3202,7 @@ var Item4 = slottable(({ children, asChild, current, border = false, onCurrentCh
   ]);
   const isCurrent = current ?? focused;
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React30.createElement(Comp, {
+  return /* @__PURE__ */ React31.createElement(Comp, {
     ...rest,
     tabIndex: 0,
     className: tx("focus.item", {
@@ -3252,16 +3226,16 @@ var Focus = {
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { createContext as createContext9 } from "@radix-ui/react-context";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React32, { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect6, useRef as useRef5, useState as useState12 } from "react";
-import { useTranslation as useTranslation4 } from "react-i18next";
+import React33, { forwardRef as forwardRef23, useCallback as useCallback12, useEffect as useEffect6, useRef as useRef6, useState as useState12 } from "react";
+import { useTranslation as useTranslation5 } from "react-i18next";
 import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME as INPUT_NAME2, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext as useInputContext2 } from "@dxos/react-input";
-import { mx as mx10 } from "@dxos/ui-theme";
-import { translationKey as translationKey4 } from "#translations";
+import { mx as mx11 } from "@dxos/ui-theme";
+import { translationKey as translationKey5 } from "#translations";
 
 // src/components/Input/SegmentedInput.tsx
 import { CalendarDate as CalendarDate2, CalendarDateTime, parseDate as parseDate2, parseDateTime, parseTime } from "@internationalized/date";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React31, { forwardRef as forwardRef21, useCallback as useCallback10, useState as useState11 } from "react";
+import React32, { forwardRef as forwardRef22, useCallback as useCallback11, useState as useState11 } from "react";
 import { DateField, DateInput, DateSegment, TimeField } from "react-aria-components";
 import { INPUT_NAME, useInputContext } from "@dxos/react-input";
 var tryParse = (parser, value) => {
@@ -3285,19 +3259,19 @@ var BIDI_FORMAT_RE = /^[‪-‮⁦-⁩]+$/;
 var renderSegment = (segment) => {
   if (segment.type === "literal") {
     if (BIDI_FORMAT_RE.test(segment.text)) {
-      return /* @__PURE__ */ React31.createElement("span", {
+      return /* @__PURE__ */ React32.createElement("span", {
         "aria-hidden": true,
         className: "select-none w-[2ch] first:hidden last:hidden"
       });
     }
     if (segment.text.includes(",")) {
-      return /* @__PURE__ */ React31.createElement("span", {
+      return /* @__PURE__ */ React32.createElement("span", {
         "aria-hidden": true,
         className: "select-none"
       }, " ");
     }
   }
-  return /* @__PURE__ */ React31.createElement(DateSegment, {
+  return /* @__PURE__ */ React32.createElement(DateSegment, {
     segment,
     className: segmentClass
   });
@@ -3319,7 +3293,7 @@ var useFieldChrome = ({ __inputScope, density: densityProp, elevation: elevation
 };
 var PickerWrapper = ({ pickerValue, onPickerChange, withTime, disabled = false, children, calendar }) => {
   const [open, setOpen] = useState11(false);
-  const openPicker = useCallback10(() => {
+  const openPicker = useCallback11(() => {
     if (!disabled) {
       setOpen(true);
     }
@@ -3327,18 +3301,18 @@ var PickerWrapper = ({ pickerValue, onPickerChange, withTime, disabled = false,
     disabled
   ]);
   useInputTrigger(disabled ? void 0 : openPicker);
-  return /* @__PURE__ */ React31.createElement(DatePicker.Root, {
+  return /* @__PURE__ */ React32.createElement(DatePicker.Root, {
     mode: "single",
     withTime,
     value: pickerValue,
     onValueChange: disabled ? void 0 : onPickerChange,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React31.createElement(Popover.Anchor, {
+  }, /* @__PURE__ */ React32.createElement(Popover.Anchor, {
     asChild: true
-  }, children), /* @__PURE__ */ React31.createElement(DatePicker.Content, null, calendar));
+  }, children), /* @__PURE__ */ React32.createElement(DatePicker.Content, null, calendar));
 };
-var SegmentedDate = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedDate = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3359,7 +3333,7 @@ var SegmentedDate = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, de
     granularity: "day",
     shouldForceLeadingZeros: true
   };
-  const field = /* @__PURE__ */ React31.createElement(DateField, fieldProps, /* @__PURE__ */ React31.createElement(DateInput, {
+  const field = /* @__PURE__ */ React32.createElement(DateField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3380,16 +3354,16 @@ var SegmentedDate = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, de
       validationValence
     }, fieldClass, classNames)
   }, renderSegment));
-  return /* @__PURE__ */ React31.createElement(PickerWrapper, {
+  return /* @__PURE__ */ React32.createElement(PickerWrapper, {
     pickerValue: parsed ? new Date(parsed.year, parsed.month - 1, parsed.day) : void 0,
     onPickerChange: (next) => setStringValue(next ? formatCalendarDate(toCalendarDate2(next)) : ""),
     withTime: false,
     disabled,
-    calendar: /* @__PURE__ */ React31.createElement(DatePicker.Calendar, null)
+    calendar: /* @__PURE__ */ React32.createElement(DatePicker.Calendar, null)
   }, field);
 });
 SegmentedDate.displayName = "Input.SegmentedDate";
-var SegmentedTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3411,7 +3385,7 @@ var SegmentedTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, de
     hourCycle,
     shouldForceLeadingZeros: true
   };
-  return /* @__PURE__ */ React31.createElement(TimeField, fieldProps, /* @__PURE__ */ React31.createElement(DateInput, {
+  return /* @__PURE__ */ React32.createElement(TimeField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3434,7 +3408,7 @@ var SegmentedTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, de
   }, renderSegment));
 });
 SegmentedTime.displayName = "Input.SegmentedTime";
-var SegmentedDateTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedDateTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3456,7 +3430,7 @@ var SegmentedDateTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames
     hourCycle,
     shouldForceLeadingZeros: true
   };
-  const field = /* @__PURE__ */ React31.createElement(DateField, fieldProps, /* @__PURE__ */ React31.createElement(DateInput, {
+  const field = /* @__PURE__ */ React32.createElement(DateField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3477,12 +3451,12 @@ var SegmentedDateTime = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames
       validationValence
     }, fieldClass, classNames)
   }, renderSegment));
-  return /* @__PURE__ */ React31.createElement(PickerWrapper, {
+  return /* @__PURE__ */ React32.createElement(PickerWrapper, {
     pickerValue: parsed ? new Date(parsed.year, parsed.month - 1, parsed.day, parsed.hour, parsed.minute) : void 0,
     onPickerChange: (next) => setStringValue(next ? formatCalendarDateTime(new CalendarDateTime(next.getFullYear(), next.getMonth() + 1, next.getDate(), next.getHours(), next.getMinutes())) : ""),
     withTime: true,
     disabled,
-    calendar: /* @__PURE__ */ React31.createElement(DatePicker.Calendar, null)
+    calendar: /* @__PURE__ */ React32.createElement(DatePicker.Calendar, null)
   }, field);
 });
 SegmentedDateTime.displayName = "Input.SegmentedDateTime";
@@ -3507,10 +3481,10 @@ var useInputTrigger = (handler) => {
     handler
   ]);
 };
-var Root10 = (props) => {
-  const handlerRef = useRef5(null);
+var Root8 = (props) => {
+  const handlerRef = useRef6(null);
   const [hasTrigger, setHasTrigger] = useState12(false);
-  const registerTrigger = useCallback11((handler) => {
+  const registerTrigger = useCallback12((handler) => {
     handlerRef.current = handler;
     setHasTrigger(true);
     return () => {
@@ -3520,23 +3494,23 @@ var Root10 = (props) => {
       }
     };
   }, []);
-  const trigger = useCallback11(() => {
+  const trigger = useCallback12(() => {
     handlerRef.current?.();
   }, []);
-  return /* @__PURE__ */ React32.createElement(InputTriggerProvider, {
+  return /* @__PURE__ */ React33.createElement(InputTriggerProvider, {
     registerTrigger,
     trigger,
     hasTrigger
-  }, /* @__PURE__ */ React32.createElement(InputRoot, props));
+  }, /* @__PURE__ */ React33.createElement(InputRoot, props));
 };
-Root10.displayName = "Input.Root";
-var TriggerIcon = /* @__PURE__ */ forwardRef22(({ classNames, icon = "ph--calendar--regular", "aria-label": ariaLabel, label, ...props }, forwardedRef) => {
-  const { t } = useTranslation4(translationKey4);
+Root8.displayName = "Input.Root";
+var TriggerIcon = /* @__PURE__ */ forwardRef23(({ classNames, icon = "ph--calendar--regular", "aria-label": ariaLabel, label, ...props }, forwardedRef) => {
+  const { t } = useTranslation5(translationKey5);
   const ctx = useInputTriggerContext("Input.TriggerIcon");
   if (!ctx.hasTrigger) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(IconButton, {
+  return /* @__PURE__ */ React33.createElement(IconButton, {
     ref: forwardedRef,
     variant: "ghost",
     icon,
@@ -3549,9 +3523,9 @@ var TriggerIcon = /* @__PURE__ */ forwardRef22(({ classNames, icon = "ph--calend
   });
 });
 TriggerIcon.displayName = "Input.TriggerIcon";
-var Label3 = /* @__PURE__ */ forwardRef22(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Label3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React33.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", {
       srOnly
@@ -3560,9 +3534,9 @@ var Label3 = /* @__PURE__ */ forwardRef22(({ classNames, children, srOnly, ...pr
   }, children);
 });
 Label3.displayName = "Input.Label";
-var Description3 = /* @__PURE__ */ forwardRef22(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Description3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React33.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", {
       srOnly
@@ -3571,10 +3545,10 @@ var Description3 = /* @__PURE__ */ forwardRef22(({ classNames, children, srOnly,
   }, children);
 });
 Description3.displayName = "Input.Description";
-var Validation = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React32.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React33.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", {
       srOnly,
@@ -3584,9 +3558,9 @@ var Validation = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, child
   }, children);
 });
 Validation.displayName = "Input.Validation";
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef22(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React33.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", {
       srOnly
@@ -3595,12 +3569,12 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef22(({ classNames, child
   }, children);
 });
 DescriptionAndValidation.displayName = "Input.DescriptionAndValidation";
-var PinInput = /* @__PURE__ */ forwardRef22(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef23(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  return /* @__PURE__ */ React32.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React33.createElement(PinInputPrimitive, {
     ...props,
     ...props.autoFocus && !hasIosKeyboard2 && {
       autoFocus: true
@@ -3617,13 +3591,13 @@ var PinInput = /* @__PURE__ */ forwardRef22(({ classNames, density: propsDensity
   });
 });
 PinInput.displayName = "Input.PinInput";
-var TextInput = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef23(({ __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 } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React32.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React33.createElement(TextInputPrimitive, {
     ...props,
     "data-1p-ignore": noAutoFill,
     className: tx("input.input", {
@@ -3640,13 +3614,13 @@ var TextInput = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, densit
   });
 });
 TextInput.displayName = "Input.TextInput";
-var TextArea = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef23(({ __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 } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React32.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React33.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.textArea", {
       variant,
@@ -3662,7 +3636,7 @@ var TextArea = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Checkbox = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState4({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -3670,7 +3644,7 @@ var Checkbox = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, checked
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext2(INPUT_NAME2, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(CheckboxPrimitive.Root, {
+  return /* @__PURE__ */ React33.createElement(CheckboxPrimitive.Root, {
     ...props,
     checked,
     onCheckedChange,
@@ -3684,7 +3658,7 @@ var Checkbox = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, checked
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React32.createElement(Icon, {
+  }, /* @__PURE__ */ React33.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
     classNames: tx("input.checkboxIndicator", {
       size,
@@ -3693,16 +3667,16 @@ var Checkbox = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, checked
   }));
 });
 Checkbox.displayName = "Input.Checkbox";
-var Switch = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState4({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React32.createElement("input", {
+  return /* @__PURE__ */ React33.createElement("input", {
     type: "checkbox",
-    className: mx10("dx-checkbox--switch dx-focus-ring", classNames),
+    className: mx11("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -3722,7 +3696,7 @@ var Time = SegmentedTime;
 var Date2 = SegmentedDate;
 var DateTime = SegmentedDateTime;
 var Input = {
-  Root: Root10,
+  Root: Root8,
   TriggerIcon,
   PinInput,
   TextInput,
@@ -3739,13 +3713,13 @@ var Input = {
 };
 
 // src/components/List/List.tsx
-import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
-import { Slot as Slot15 } from "@radix-ui/react-slot";
-import React34, { forwardRef as forwardRef23 } from "react";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
+import React35, { forwardRef as forwardRef24 } from "react";
 import { LIST_ITEM_NAME, LIST_NAME, ListItemCollapsibleContent, List as ListPrimitive, ListItem as ListPrimitiveItem, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, useListContext, useListItemContext } from "@dxos/react-list";
 
 // src/components/List/ListDropIndicator.tsx
-import React33 from "react";
+import React34 from "react";
 var edgeToOrientationMap = {
   top: "horizontal",
   bottom: "horizontal",
@@ -3767,7 +3741,7 @@ var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React34.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize}px`,
       "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
@@ -3786,19 +3760,19 @@ var List = composable(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React34.createElement(DensityProvider, {
+  return /* @__PURE__ */ React35.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React34.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React35.createElement(ListPrimitive, {
     ...rest,
     className: tx("list.root", {}, className),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef23(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot15 : Primitive15.div;
+var ListItemEndcap = /* @__PURE__ */ forwardRef24(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot14 : Primitive14.div;
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement(Comp, {
+  return /* @__PURE__ */ React35.createElement(Comp, {
     ...!asChild && {
       role: "none"
     },
@@ -3812,44 +3786,44 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef23(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement("div", {
+  return /* @__PURE__ */ React35.createElement("div", {
     ...props,
     className: tx("list.item.openTrigger", {
       density
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef23(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React34.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React35.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", {
       density
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React34.createElement("span", null, children));
+  }, /* @__PURE__ */ React35.createElement("span", null, children));
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef23(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef24(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-  return /* @__PURE__ */ React34.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React35.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React34.createElement(Icon, {
+  }, children || /* @__PURE__ */ React35.createElement(Icon, {
     size: 3,
     icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
     classNames: tx("list.item.openTriggerIcon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React34.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React35.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", {
       density,
@@ -3869,10 +3843,10 @@ var ListItem = {
 };
 
 // src/components/List/Tree.tsx
-import React36, { forwardRef as forwardRef24 } from "react";
+import React37, { forwardRef as forwardRef25 } from "react";
 
 // src/components/List/TreeDropIndicator.tsx
-import React35 from "react";
+import React36 from "react";
 var edgeToOrientationMap2 = {
   "reorder-above": "sibling",
   "reorder-below": "sibling",
@@ -3902,7 +3876,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   if (isBlocked) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement("div", {
+  return /* @__PURE__ */ React36.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -3917,22 +3891,22 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
 };
 
 // src/components/List/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
-  return /* @__PURE__ */ React36.createElement(List, {
+var TreeRoot = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef24(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef25(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React36.createElement(List, {
+  return /* @__PURE__ */ React37.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
-  return /* @__PURE__ */ React36.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -3958,10 +3932,10 @@ var TreeItem = {
 // src/components/List/Treegrid.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
-import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
-import { Slot as Slot16 } from "@radix-ui/react-slot";
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
-import React37, { forwardRef as forwardRef25, useCallback as useCallback12 } from "react";
+import React38, { forwardRef as forwardRef26, useCallback as useCallback13 } from "react";
 var TREEGRID_ROW_NAME = "Treegrid.Row";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope3(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
@@ -3972,9 +3946,9 @@ var TreegridRoot = composable(({ asChild, classNames, children, style, gridTempl
   const { className, role: _role, ...rest } = composableProps(props, {
     classNames
   });
-  const Comp = asChild ? Slot16 : Primitive16.div;
+  const Comp = asChild ? Slot15 : Primitive15.div;
   const { findFirstFocusable } = useFocusFinders();
-  const handleKeyDown = useCallback12((event) => {
+  const handleKeyDown = useCallback13((event) => {
     switch (event.key) {
       case "ArrowDown":
       case "ArrowUp": {
@@ -4008,7 +3982,7 @@ var TreegridRoot = composable(({ asChild, classNames, children, style, gridTempl
     findFirstFocusable,
     onKeyDownProp
   ]);
-  return /* @__PURE__ */ React37.createElement(Comp, {
+  return /* @__PURE__ */ React38.createElement(Comp, {
     role: "treegrid",
     ...rest,
     className: tx("treegrid.root", {}, className),
@@ -4020,9 +3994,9 @@ var TreegridRoot = composable(({ asChild, classNames, children, style, gridTempl
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef25(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef26(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot16 : Primitive16.div;
+  const Comp = asChild ? Slot15 : Primitive15.div;
   const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState5({
@@ -4030,11 +4004,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef25(({ __treegridRowScope, asChild, c
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
   });
-  return /* @__PURE__ */ React37.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React38.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React37.createElement(Comp, {
+  }, /* @__PURE__ */ React38.createElement(Comp, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", {
@@ -4049,9 +4023,9 @@ var TreegridRow = /* @__PURE__ */ forwardRef25(({ __treegridRowScope, asChild, c
     ref: forwardedRef
   }, children));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef25(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef26(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement("div", {
+  return /* @__PURE__ */ React38.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", {
       indent
@@ -4070,17 +4044,17 @@ var Treegrid = {
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { createContext as createContext10 } 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 { Primitive as Primitive16 } from "@radix-ui/react-primitive";
+import { Slot as Slot16 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
-import React38, { forwardRef as forwardRef26, useCallback as useCallback14, useEffect as useEffect8, useRef as useRef6, useState as useState14 } from "react";
+import React39, { forwardRef as forwardRef27, useCallback as useCallback15, useEffect as useEffect8, useRef as useRef7, useState as useState14 } from "react";
 import { addEventListener } from "@dxos/async";
 import { log as log2 } 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 useCallback13, useEffect as useEffect7, useState as useState13 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect7, useState as useState13 } from "react";
 var useSwipeToDismiss = (ref, {
   onDismiss,
   dismissThreshold = 64,
@@ -4091,20 +4065,20 @@ var useSwipeToDismiss = (ref, {
   const $root = ref.current;
   const [motionState, setMotionState] = useState13(0);
   const [gestureStartX, setGestureStartX] = useState13(0);
-  const setIdle = useCallback13(() => {
+  const setIdle = useCallback14(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback13(() => {
+  const setFollowing = useCallback14(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback13(({ screenX }) => {
+  const handlePointerDown = useCallback14(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -4112,7 +4086,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback13(({ screenX }) => {
+  const handlePointerMove = useCallback14(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -4136,7 +4110,7 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback13(() => {
+  const handlePointerUp = useCallback14(() => {
     setIdle();
   }, [
     setIdle
@@ -4183,7 +4157,7 @@ var handleOpenAutoFocus = (event) => {
 };
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback14((event) => {
+  const handleKeyDown = useCallback15((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -4226,22 +4200,22 @@ var useSidebars = (consumerName) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback14(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: useCallback15(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: useCallback14(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback14(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback14(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: useCallback15(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback15(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback15(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback14(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: useCallback15(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: useCallback14(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback14(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback14(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: useCallback15(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback15(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback15(() => setComplementarySidebarState("closed"), [])
   };
 };
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
@@ -4257,7 +4231,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     onChange: onComplementarySidebarStateChange
   });
   const [resizing, setResizing] = useState14(false);
-  const resizeInterval = useRef6(null);
+  const resizeInterval = useRef7(null);
   useEffect8(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
@@ -4268,7 +4242,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
       resizeInterval.current = null;
     }, 3e3);
   }), []);
-  return /* @__PURE__ */ React38.createElement(MainProvider, {
+  return /* @__PURE__ */ React39.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -4278,11 +4252,11 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React38.createElement("div", {
+  return /* @__PURE__ */ React39.createElement("div", {
     ...props,
     onClick: () => {
       setNavigationSidebarState("collapsed");
@@ -4299,16 +4273,16 @@ var MainOverlay = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwar
   });
 });
 MainOverlay.displayName = MAIN_OVERLAY_NAME;
-var MainSidebar = /* @__PURE__ */ forwardRef26(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef27(({ 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 = useRef6(null);
+  const noopRef = useRef7(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = useCallback14((event) => {
+  const handleKeyDown = useCallback15((event) => {
     const focusGroupParent = event.target.closest("[data-tabster]");
     if (event.key === "Escape" && focusGroupParent) {
       event.preventDefault();
@@ -4319,14 +4293,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef26(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root13 = isLg ? Primitive17.div : DialogContent2;
-  return /* @__PURE__ */ React38.createElement(DialogRoot2, {
+  const Root13 = isLg ? Primitive16.div : DialogContent2;
+  return /* @__PURE__ */ React39.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
-  }, !isLg && /* @__PURE__ */ React38.createElement(DialogTitle2, {
+  }, !isLg && /* @__PURE__ */ React39.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React38.createElement(Root13, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React39.createElement(Root13, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -4344,10 +4318,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef26(({ classNames, children, swipeToD
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React38.createElement(MainSidebar, {
+  return /* @__PURE__ */ React39.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: navigationSidebarState,
@@ -4358,10 +4332,10 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef26((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React38.createElement(MainSidebar, {
+  return /* @__PURE__ */ React39.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: complementarySidebarState,
@@ -4372,12 +4346,12 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef26((props, forwardedRef
   });
 });
 MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef26(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef27(({ 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 Comp = asChild ? Slot16 : role ? Primitive16.div : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React38.createElement(Comp, {
+  return /* @__PURE__ */ React39.createElement(Comp, {
     ...handlesFocus && {
       ...mover
     },
@@ -4404,12 +4378,12 @@ var Main = {
 
 // src/components/Message/Message.tsx
 import { createContext as createContext11 } from "@radix-ui/react-context";
-import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
-import { Slot as Slot18 } from "@radix-ui/react-slot";
-import React39, { forwardRef as forwardRef27 } from "react";
-import { useTranslation as useTranslation5 } from "react-i18next";
+import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
+import { Slot as Slot17 } from "@radix-ui/react-slot";
+import React40, { forwardRef as forwardRef28 } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
 import { useId as useId5 } from "@dxos/react-hooks";
-import { translationKey as translationKey5 } from "#translations";
+import { translationKey as translationKey6 } from "#translations";
 var messageIcons = {
   success: "ph--check-circle--duotone",
   info: "ph--info--duotone",
@@ -4446,16 +4420,16 @@ var valenceVars = {
   }
 };
 var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef27(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef28(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId5("message__title", propsTitleId);
   const descriptionId = useId5("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  return /* @__PURE__ */ React39.createElement(MessageProvider, {
+  return /* @__PURE__ */ React40.createElement(MessageProvider, {
     titleId,
     descriptionId,
     valence
-  }, /* @__PURE__ */ React39.createElement(Column.Root, {
+  }, /* @__PURE__ */ React40.createElement(Column.Root, {
     asChild,
     role: valence === "neutral" ? "paragraph" : "alert",
     "aria-labelledby": titleId,
@@ -4474,26 +4448,22 @@ var MessageRoot = /* @__PURE__ */ forwardRef27(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "Message.Title";
-var MessageTitle = /* @__PURE__ */ forwardRef27(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
-  const { t } = useTranslation5(translationKey5);
+var MessageTitle = /* @__PURE__ */ forwardRef28(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+  const { t } = useTranslation6(translationKey6);
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React39.createElement(Column.Row, {
+  return /* @__PURE__ */ React40.createElement(Column.Row, {
     classNames: tx("message.header", {}, classNames),
     ref: forwardedRef
-  }, icon && /* @__PURE__ */ React39.createElement("div", {
-    className: tx("message.icon", {
-      valence
-    })
-  }, /* @__PURE__ */ React39.createElement(Icon, {
+  }, icon && /* @__PURE__ */ React40.createElement(Column.Block, null, /* @__PURE__ */ React40.createElement(Icon, {
     icon
-  })), /* @__PURE__ */ React39.createElement("h2", {
+  })), /* @__PURE__ */ React40.createElement("h2", {
     className: tx("message.title", {}, classNames),
     id: titleId
-  }, children), onClose && /* @__PURE__ */ React39.createElement("div", {
-    className: tx("message.close", {})
-  }, /* @__PURE__ */ React39.createElement(IconButton, {
+  }, children), onClose && /* @__PURE__ */ React40.createElement(Column.Block, {
+    end: true
+  }, /* @__PURE__ */ React40.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
@@ -4504,11 +4474,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef27(({ classNames, children, icon: i
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "Message.Content";
-var MessageContent = /* @__PURE__ */ forwardRef27(({ asChild, classNames, children, ...props }, forwardedRef) => {
+var MessageContent = /* @__PURE__ */ forwardRef28(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Comp = asChild ? Slot18 : Primitive18.p;
-  return /* @__PURE__ */ React39.createElement(Comp, {
+  const Comp = asChild ? Slot17 : Primitive17.p;
+  return /* @__PURE__ */ React40.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
     id: descriptionId,
@@ -4524,16 +4494,16 @@ var Message = {
 var Callout = Message;
 
 // src/components/Panel/Panel.tsx
-import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
-import { Slot as Slot19 } from "@radix-ui/react-slot";
-import React40 from "react";
+import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
+import React41 from "react";
 var GRID_TEMPLATE_ROWS = "auto 1fr auto";
 var GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
 var PanelRoot = slottable(({ children, asChild, role, style, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  return /* @__PURE__ */ React41.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     style: {
@@ -4548,9 +4518,9 @@ var PanelRoot = slottable(({ children, asChild, role, style, ...props }, forward
 PanelRoot.displayName = "Panel.Root";
 var PanelToolbar = slottable(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  return /* @__PURE__ */ React41.createElement(Comp, {
     ...rest,
     "data-slot": "toolbar",
     className: tx("panel.toolbar", {
@@ -4562,9 +4532,9 @@ var PanelToolbar = slottable(({ children, asChild, size, ...props }, forwardedRe
 PanelToolbar.displayName = "Panel.Toolbar";
 var PanelContent = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  return /* @__PURE__ */ React41.createElement(Comp, {
     ...rest,
     "data-slot": "content",
     className: tx("panel.content", {}, className),
@@ -4574,9 +4544,9 @@ var PanelContent = slottable(({ children, asChild, ...props }, forwardedRef) =>
 PanelContent.displayName = "Panel.Content";
 var PanelStatusbar = slottable(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  return /* @__PURE__ */ React41.createElement(Comp, {
     ...rest,
     "data-slot": "statusbar",
     className: tx("panel.statusbar", {
@@ -4595,9 +4565,9 @@ var Panel = {
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { createContext as createContext12 } from "@radix-ui/react-context";
-import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
-import { Slot as Slot20 } from "@radix-ui/react-slot";
-import React41, { useMemo as useMemo7 } from "react";
+import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
+import { Slot as Slot19 } from "@radix-ui/react-slot";
+import React42, { useMemo as useMemo7 } from "react";
 
 // src/components/ScrollArea/scrollbar.ts
 var scrollbar = {
@@ -4622,7 +4592,7 @@ var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
 var ScrollAreaRoot = slottable(({ children, asChild, orientation = "vertical", autoHide = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot20 : Primitive20.div;
+  const Comp = asChild ? Slot19 : Primitive19.div;
   const options = useMemo7(() => ({
     orientation,
     autoHide,
@@ -4638,7 +4608,7 @@ var ScrollAreaRoot = slottable(({ children, asChild, orientation = "vertical", a
     thin,
     snap
   ]);
-  return /* @__PURE__ */ React41.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React42.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React42.createElement(Comp, {
     ...rest,
     className: tx("scrollArea.root", options, className),
     ref: forwardedRef
@@ -4652,8 +4622,8 @@ var ScrollAreaViewport = slottable(({ children, asChild, ...props }, forwardedRe
   const density = options.thin ? scrollbar.md : scrollbar.lg;
   const { className, ...rest } = composableProps(props);
   const { style, ...restWithoutStyle } = rest;
-  const Comp = asChild ? Slot20 : Primitive20.div;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  const Comp = asChild ? Slot19 : Primitive19.div;
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...restWithoutStyle,
     style: {
       "--scroll-width": `${density.size}px`,
@@ -4672,23 +4642,23 @@ var ScrollArea = {
 
 // src/components/ScrollContainer/ScrollContainer.tsx
 import { createContext as createContext13 } from "@radix-ui/react-context";
-import React42, { forwardRef as forwardRef28, useCallback as useCallback15, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo8, useRef as useRef7, useState as useState15 } from "react";
+import React43, { forwardRef as forwardRef29, useCallback as useCallback16, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo8, useRef as useRef8, useState as useState15 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useMergeRefs } from "@dxos/react-hooks";
-import { mx as mx11 } from "@dxos/ui-theme";
+import { mx as mx12 } from "@dxos/ui-theme";
 var __dxlog_file3 = "/__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] = createContext13("ScrollContainer");
-var ScrollContainerRoot = /* @__PURE__ */ forwardRef28(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
-  const scrollerRef = useRef7(null);
-  const autoScrollRef = useRef7(false);
+var ScrollContainerRoot = /* @__PURE__ */ forwardRef29(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
+  const scrollerRef = useRef8(null);
+  const autoScrollRef = useRef8(false);
   const [pinned, setPinned] = useState15(pin);
   const [overflow, setOverflow] = useState15(false);
-  const timeoutRef = useRef7(void 0);
-  const scrollToBottom = useCallback15((behavior = behaviorProp) => {
+  const timeoutRef = useRef8(void 0);
+  const scrollToBottom = useCallback16((behavior = behaviorProp) => {
     if (scrollerRef.current) {
       if (behavior !== "instant") {
         autoScrollRef.current = true;
@@ -4729,10 +4699,10 @@ var ScrollContainerRoot = /* @__PURE__ */ forwardRef28(({ children, pin, behavio
   useImperativeHandle(forwardedRef, () => controller, [
     controller
   ]);
-  const setViewport = useCallback15((el) => {
+  const setViewport = useCallback16((el) => {
     scrollerRef.current = el;
   }, []);
-  return /* @__PURE__ */ React42.createElement(ScrollContainerProvider, {
+  return /* @__PURE__ */ React43.createElement(ScrollContainerProvider, {
     pinned,
     overflow,
     controller,
@@ -4743,7 +4713,7 @@ var ScrollContainerRoot = /* @__PURE__ */ forwardRef28(({ children, pin, behavio
 });
 ScrollContainerRoot.displayName = "ScrollContainer.Root";
 var ScrollContainerContent = composable(({ children, thin, padding, centered, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React42.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React43.createElement(ScrollArea.Root, {
     ...composableProps(props, {
       classNames: "relative isolate"
     }),
@@ -4756,7 +4726,7 @@ var ScrollContainerContent = composable(({ children, thin, padding, centered, ..
 ScrollContainerContent.displayName = "ScrollContainer.Content";
 var VIEWPORT_NAME = "ScrollContainer.Viewport";
 var ScrollContainerViewport = slottable(({ children, asChild, ...props }, forwardedRef) => {
-  const scrollerRef = useRef7(null);
+  const scrollerRef = useRef8(null);
   const mergedRef = useMergeRefs([
     forwardedRef,
     scrollerRef
@@ -4774,11 +4744,11 @@ var ScrollContainerViewport = slottable(({ children, asChild, ...props }, forwar
     setPinned,
     setOverflow
   ]);
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(ScrollArea.Viewport, {
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(ScrollArea.Viewport, {
     asChild,
     ...composableProps(props),
     ref: mergedRef
-  }, children), /* @__PURE__ */ React42.createElement(ScrollContainerPinEffect, {
+  }, children), /* @__PURE__ */ React43.createElement(ScrollContainerPinEffect, {
     scrollerRef
   }));
 });
@@ -4823,9 +4793,9 @@ var ScrollContainerPinEffect = ({ scrollerRef }) => {
 var FADE_NAME = "ScrollContainer.Fade";
 function ScrollContainerFade() {
   const { overflow } = useScrollContainerContext(FADE_NAME);
-  return /* @__PURE__ */ React42.createElement("div", {
+  return /* @__PURE__ */ React43.createElement("div", {
     "data-visible": overflow,
-    className: mx11(
+    className: mx12(
       // 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',
@@ -4837,9 +4807,9 @@ ScrollContainerFade.displayName = FADE_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 function ScrollContainerScrollDownButton({ classNames }) {
   const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
-  return /* @__PURE__ */ React42.createElement("div", {
-    className: mx11("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
-  }, /* @__PURE__ */ React42.createElement(IconButton, {
+  return /* @__PURE__ */ React43.createElement("div", {
+    className: mx12("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React43.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
     iconOnly: true,
@@ -4859,35 +4829,35 @@ var ScrollContainer = {
 
 // src/components/Select/Select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React43, { forwardRef as forwardRef29 } from "react";
+import React44, { forwardRef as forwardRef30 } 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__ */ forwardRef29(({ children, placeholder, classNames, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef30(({ children, placeholder, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React43.createElement(Button, {
+  }, /* @__PURE__ */ React44.createElement(Button, {
     ...props,
     classNames: tx("select.triggerButton", {}, classNames)
-  }, /* @__PURE__ */ React43.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React44.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React43.createElement(SelectPrimitive.Icon, {
+  }, children), /* @__PURE__ */ React44.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React43.createElement(Icon, {
+  }, /* @__PURE__ */ React44.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }))));
 });
 SelectTriggerButton.displayName = "Select.TriggerButton";
-var SelectContent = /* @__PURE__ */ forwardRef29(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef30(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -4899,42 +4869,42 @@ var SelectContent = /* @__PURE__ */ forwardRef29(({ classNames, children, collis
   }, children);
 });
 SelectContent.displayName = "Select.Content";
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React43.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React44.createElement(Icon, {
     size: 3,
     icon: "ph--caret-up--bold"
   }));
 });
 SelectScrollUpButton2.displayName = "Select.ScrollUpButton";
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React43.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React44.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
 SelectScrollDownButton2.displayName = "Select.ScrollDownButton";
-var SelectViewport2 = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 SelectViewport2.displayName = "Select.Viewport";
-var SelectItem = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
@@ -4942,24 +4912,24 @@ var SelectItem = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forward
 });
 SelectItem.displayName = "Select.Item";
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 SelectItemIndicator.displayName = "Select.ItemIndicator";
-var SelectOption = /* @__PURE__ */ forwardRef29(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef30(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React43.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React43.createElement("span", {
+  }, /* @__PURE__ */ React44.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React44.createElement("span", {
     className: "grow"
-  }), /* @__PURE__ */ React43.createElement(Icon, {
+  }), /* @__PURE__ */ React44.createElement(Icon, {
     size: 3,
     icon: "ph--check--regular"
   }));
@@ -4967,18 +4937,18 @@ var SelectOption = /* @__PURE__ */ forwardRef29(({ children, classNames, ...prop
 SelectOption.displayName = "Select.Option";
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", {}, classNames),
     ref: forwardedRef
   });
 });
 SelectSeparator.displayName = "Select.Separator";
-var SelectArrow = /* @__PURE__ */ forwardRef29(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React43.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", {}, classNames),
     ref: forwardedRef
@@ -5006,11 +4976,27 @@ var Select = {
   Arrow: SelectArrow
 };
 
+// src/components/Separator/Separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import React45, { forwardRef as forwardRef31 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef31(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React45.createElement(SeparatorPrimitive.Root, {
+    ...props,
+    orientation,
+    className: tx("separator.root", {
+      orientation,
+      subdued
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
 // src/components/Skeleton/Skeleton.tsx
-import React44, { forwardRef as forwardRef30 } from "react";
-var Skeleton = /* @__PURE__ */ forwardRef30(({ classNames, variant = "default", ...props }, forwardedRef) => {
+import React46, { forwardRef as forwardRef32 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement("div", {
+  return /* @__PURE__ */ React46.createElement("div", {
     ...props,
     className: tx("skeleton.root", {
       variant
@@ -5021,9 +5007,9 @@ var Skeleton = /* @__PURE__ */ forwardRef30(({ classNames, variant = "default",
 
 // 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 React45 from "react";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
+import React47 from "react";
 var SPLITTER_NAME = "Splitter";
 var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
 var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
@@ -5032,13 +5018,13 @@ var SplitterRoot = slottable(({ asChild, mode = "top", ratio = 0.5, transition =
   const { tx } = useThemeContext();
   const { __scopeSplitter, ...rest } = props;
   const { className, ...restProps } = composableProps(rest);
-  const Comp = asChild ? Slot21 : Primitive21.div;
-  return /* @__PURE__ */ React45.createElement(SplitterProvider, {
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React47.createElement(SplitterProvider, {
     scope: __scopeSplitter,
     mode,
     ratio,
     transition
-  }, /* @__PURE__ */ React45.createElement(Comp, {
+  }, /* @__PURE__ */ React47.createElement(Comp, {
     ...restProps,
     ref: forwardedRef,
     className: tx("splitter.root", {}, className)
@@ -5049,13 +5035,13 @@ var PANEL_NAME = "Splitter.Panel";
 var SplitterPanel = slottable(({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { __scopeSplitter, ...rest } = props;
-  const Comp = asChild ? Slot21 : Primitive21.div;
+  const Comp = asChild ? Slot20 : Primitive20.div;
   const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
   const { className, ...restProps } = composableProps(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__ */ React45.createElement(Comp, {
+  return /* @__PURE__ */ React47.createElement(Comp, {
     ...restProps,
     ref: forwardedRef,
     className: tx("splitter.panel", {}, className),
@@ -5074,10 +5060,10 @@ var Splitter = {
 };
 
 // src/components/Status/Status.tsx
-import React46, { forwardRef as forwardRef31 } from "react";
-var Status = /* @__PURE__ */ forwardRef31(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+import React48, { forwardRef as forwardRef33 } from "react";
+var Status = /* @__PURE__ */ forwardRef33(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React46.createElement("span", {
+  return /* @__PURE__ */ React48.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", {
@@ -5085,7 +5071,7 @@ var Status = /* @__PURE__ */ forwardRef31(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React46.createElement("span", {
+  }, /* @__PURE__ */ React48.createElement("span", {
     role: "none",
     className: tx("status.bar", {
       indeterminate,
@@ -5100,13 +5086,13 @@ var Status = /* @__PURE__ */ forwardRef31(({ classNames, children, progress = 0,
 });
 
 // src/components/Tag/Tag.tsx
-import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
-import { Slot as Slot22 } from "@radix-ui/react-slot";
-import React47, { forwardRef as forwardRef32 } from "react";
-var Tag = /* @__PURE__ */ forwardRef32(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive21 } from "@radix-ui/react-primitive";
+import { Slot as Slot21 } from "@radix-ui/react-slot";
+import React49, { forwardRef as forwardRef34 } from "react";
+var Tag = /* @__PURE__ */ forwardRef34(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot22 : Primitive22.span;
-  return /* @__PURE__ */ React47.createElement(Comp, {
+  const Comp = asChild ? Slot21 : Primitive21.span;
+  return /* @__PURE__ */ React49.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
       palette
@@ -5118,72 +5104,71 @@ var Tag = /* @__PURE__ */ forwardRef32(({ asChild, palette = "neutral", classNam
 
 // src/components/Toast/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React48, { forwardRef as forwardRef33 } from "react";
-import { useTranslation as useTranslation6 } from "react-i18next";
-import { translationKey as translationKey6 } from "#translations";
+import React50, { forwardRef as forwardRef35 } from "react";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { translationKey as translationKey7 } from "#translations";
 var ToastProvider = ToastPrimitive.Provider;
-var ToastViewport = /* @__PURE__ */ forwardRef33(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef35(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement(ToastPrimitive.Viewport, {
+  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Viewport, {
     ...props,
     className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
   });
 });
 ToastViewport.displayName = "Toast.Viewport";
-var ToastRoot = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement(ToastPrimitive.Root, {
+  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Root, {
     ...props,
     className: tx("toast.root", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React48.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React50.createElement(ElevationProvider, {
     elevation: "toast"
-  }, /* @__PURE__ */ React48.createElement(Column.Root, {
+  }, /* @__PURE__ */ React50.createElement(Column.Root, {
     classNames: tx("toast.grid", {})
   }, children)));
 });
 ToastRoot.displayName = "Toast.Root";
-var ToastTitle = /* @__PURE__ */ forwardRef33(({ classNames, children, icon, onClose, ...props }, forwardedRef) => {
-  const { t } = useTranslation6(translationKey6);
+var ToastTitle = /* @__PURE__ */ forwardRef35(({ classNames, children, icon, onClose, ...props }, forwardedRef) => {
+  const { t } = useTranslation7(translationKey7);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement(Column.Row, {
+  return /* @__PURE__ */ React50.createElement(Column.Row, {
     classNames: tx("toast.header", {})
-  }, icon && /* @__PURE__ */ React48.createElement("div", {
-    className: tx("toast.icon", {})
-  }, /* @__PURE__ */ React48.createElement(Icon, {
+  }, icon && /* @__PURE__ */ React50.createElement(Column.Block, null, /* @__PURE__ */ React50.createElement(Icon, {
     icon,
     size: 5
-  })), /* @__PURE__ */ React48.createElement(ToastPrimitive.Title, {
+  })), /* @__PURE__ */ React50.createElement(ToastPrimitive.Title, {
     ...props,
     className: tx("toast.title", {}, classNames),
     ref: forwardedRef
-  }, children), onClose && /* @__PURE__ */ React48.createElement(IconButton, {
+  }, children), onClose && /* @__PURE__ */ React50.createElement(Column.Block, {
+    end: true
+  }, /* @__PURE__ */ React50.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
     label: t("toolbar-close.label"),
-    classNames: tx("toast.close", {}),
     onClick: onClose
-  }));
+  })));
 });
 ToastTitle.displayName = "Toast.Title";
-var ToastDescription = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement(ToastPrimitive.Description, {
+  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Description, {
     ...props,
     className: tx("toast.description", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 ToastDescription.displayName = "Toast.Description";
-var ToastActions = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement(Column.Center, {
+  return /* @__PURE__ */ React50.createElement(Column.Center, {
     classNames: tx("toast.actions", {}, classNames),
     ref: forwardedRef,
     ...props
-  }, /* @__PURE__ */ React48.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React50.createElement(DensityProvider, {
     density: "sm"
   }, children));
 });
@@ -5200,6 +5185,204 @@ var Toast = {
   Action: ToastAction,
   Close: ToastClose
 };
+
+// src/components/Toolbar/Toolbar.tsx
+import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
+import { Slot as Slot22 } from "@radix-ui/react-slot";
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import React51, { forwardRef as forwardRef36 } from "react";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { translationKey as translationKey8 } from "#translations";
+var ToolbarRoot = composable(({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
+  const { className, role, ...rest } = composableProps(props);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React51.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);
+});
+ToolbarRoot.displayName = "Toolbar.Root";
+var ToolbarText = slottable(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot22 : Primitive22.div;
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React51.createElement(Comp, {
+    ...rest,
+    className: tx("toolbar.text", {}, className),
+    ref: forwardedRef
+  }, children);
+});
+ToolbarText.displayName = "Toolbar.Text";
+var ToolbarButton = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+ToolbarButton.displayName = "Toolbar.Button";
+var ToolbarIconButton = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(IconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+ToolbarIconButton.displayName = "Toolbar.IconButton";
+var ToolbarToggle = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(Toggle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+ToolbarToggle.displayName = "Toolbar.Toggle";
+var ToolbarLink = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Link, {
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(Link, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+ToolbarLink.displayName = "Toolbar.Link";
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef36(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(ButtonGroup, {
+    classNames,
+    children,
+    elevation,
+    ref: forwardedRef
+  }));
+});
+ToolbarToggleGroup2.displayName = "Toolbar.ToggleGroup";
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef36(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(Button, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+ToolbarToggleGroupItem.displayName = "Toolbar.ToggleGroupItem";
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef36(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    iconClassNames,
+    ref: forwardedRef
+  }));
+});
+ToolbarToggleGroupIconItem.displayName = "Toolbar.ToggleGroupIconItem";
+var ToolbarSeparator = /* @__PURE__ */ forwardRef36(({ variant = "gap", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(Separator4, {
+    orientation: "vertical",
+    ...props,
+    ref: forwardedRef
+  })) : /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Separator, {
+    className: "grow",
+    ref: forwardedRef
+  });
+});
+ToolbarSeparator.displayName = "Toolbar.Separator";
+var ToolbarDragHandle = /* @__PURE__ */ forwardRef36(({ testId = "drag-handle", label }, forwardedRef) => {
+  const { t } = useTranslation8(translationKey8);
+  return /* @__PURE__ */ React51.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
+  });
+});
+ToolbarDragHandle.displayName = "Toolbar.DragHandle";
+var TOOLBAR_ACTION_ICONS = {
+  close: "ph--x--regular",
+  delete: "ph--trash--regular"
+};
+var TOOLBAR_ACTION_LABEL_KEYS = {
+  close: "toolbar-close.label",
+  delete: "toolbar-delete.label"
+};
+var ToolbarActionIconButton = /* @__PURE__ */ forwardRef36(({ action, onClick, label }, forwardedRef) => {
+  const { t } = useTranslation8(translationKey8);
+  return /* @__PURE__ */ React51.createElement(ToolbarIconButton, {
+    iconOnly: true,
+    icon: TOOLBAR_ACTION_ICONS[action],
+    variant: "ghost",
+    label: label ?? t(TOOLBAR_ACTION_LABEL_KEYS[action]),
+    classNames: "cursor-pointer",
+    onClick,
+    ref: forwardedRef
+  });
+});
+ToolbarActionIconButton.displayName = "Toolbar.ActionIconButton";
+function ToolbarMenu({ context, items }) {
+  const { t } = useTranslation8(translationKey8);
+  return /* @__PURE__ */ React51.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Trigger, {
+    disabled: !items?.length,
+    asChild: true
+  }, /* @__PURE__ */ React51.createElement(ToolbarIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("toolbar-menu.label")
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React51.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React51.createElement(DropdownMenu.Item, {
+    key: index,
+    onSelect: () => onSelect(context)
+  }, label))), /* @__PURE__ */ React51.createElement(DropdownMenu.Arrow, null))));
+}
+ToolbarMenu.displayName = "Toolbar.Menu";
+var Toolbar = {
+  Root: ToolbarRoot,
+  Text: ToolbarText,
+  Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
+  Link: ToolbarLink,
+  Toggle: ToolbarToggle,
+  ToggleGroup: ToolbarToggleGroup2,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator,
+  DragHandle: ToolbarDragHandle,
+  ActionIconButton: ToolbarActionIconButton,
+  Menu: ToolbarMenu
+};
 export {
   AlertDialog,
   Avatar,
@@ -5249,13 +5432,15 @@ export {
   SegmentedDateTime,
   SegmentedTime,
   Select,
-  Separator3 as Separator,
+  Separator4 as Separator,
   Skeleton,
   Splitter,
   Status,
+  SystemIconButton,
   TREEGRID_PARENT_OF_SEPARATOR,
   TREEGRID_PATH_SEPARATOR,
   Tag,
+  TextTooltip,
   ThemeContext,
   ThemeProvider,
   ThrowError,
@@ -5264,6 +5449,7 @@ export {
   ToggleGroup,
   ToggleGroupIconItem,
   ToggleGroupItem,
+  ToggleIconButton,
   Toolbar,
   Tooltip,
   Trans,