@dxos/react-ui 0.8.4-main.66e292d → 0.8.4-main.69d29f4

package/dist/lib/node-esm/chunk-SP7VQH72.mjs

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