@dxos/react-ui 0.10.0 → 0.11.1

package/dist/lib/browser/chunk-GTHV4WYK.mjs

@@ -1,1499 +0,0 @@
-// src/primitives/DensityProvider/DensityProvider.tsx
-import React, { createContext } from "react";
-var DensityContext = /* @__PURE__ */ createContext({
-  density: "md"
-});
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React.createElement(DensityContext.Provider, {
-  value: {
-    density
-  }
-}, children);
-
-// src/primitives/ElevationProvider/ElevationProvider.tsx
-import React2, { createContext as createContext2 } from "react";
-var ElevationContext = /* @__PURE__ */ createContext2({
-  elevation: "base"
-});
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React2.createElement(ElevationContext.Provider, {
-  value: {
-    elevation
-  }
-}, children);
-
-// src/util/mobile.ts
-var hasIosKeyboard = () => {
-  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
-};
-
-// src/primitives/ThemeProvider/TranslationsProvider.tsx
-import { enUS as dtLocaleEnUs } from "date-fns/locale";
-import React3, { Suspense, createContext as createContext3, useContext, useEffect, useState } from "react";
-import { I18nextProvider, useTranslation as useI18NextTranslation } from "react-i18next";
-import { addResources, i18n } from "@dxos/i18n";
-var initialNs = "dxos-common";
-var initialDtLocale = dtLocaleEnUs;
-var TranslationsContext = /* @__PURE__ */ createContext3({
-  appNs: initialNs,
-  dtLocale: initialDtLocale
-});
-var useTranslation = (...args) => {
-  const result = useI18NextTranslation(...args);
-  const { dtLocale } = useContext(TranslationsContext);
-  return {
-    ...result,
-    dtLocale
-  };
-};
-var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    setLoaded(false);
-    if (resourceExtensions && resourceExtensions.length) {
-      addResources(resourceExtensions);
-    }
-    setLoaded(true);
-  }, [
-    resourceExtensions
-  ]);
-  return /* @__PURE__ */ React3.createElement(I18nextProvider, {
-    i18n
-  }, /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
-    value: {
-      appNs: appNs ?? initialNs,
-      dtLocale: dtLocale ?? initialDtLocale
-    }
-  }, /* @__PURE__ */ React3.createElement(Suspense, {
-    fallback
-  }, loaded ? children : fallback)));
-};
-
-// src/primitives/ThemeProvider/ThemeProvider.tsx
-import { createKeyborg } from "keyborg";
-import React4, { createContext as createContext4, useEffect as useEffect2, useMemo } from "react";
-
-// src/hooks/useElevationContext.ts
-import { useContext as useContext2 } from "react";
-var useElevationContext = (propsElevation) => {
-  const { elevation } = useContext2(ElevationContext);
-  return propsElevation ?? elevation;
-};
-
-// src/hooks/useThemeContext.ts
-import { useContext as useContext3 } from "react";
-import { raise } from "@dxos/debug";
-var useThemeContext = () => useContext3(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
-
-// src/hooks/useSafeArea.ts
-import { useCallback, useState as useState2 } from "react";
-import { useViewportResize } from "@dxos/react-hooks";
-var initialSafeArea = {
-  top: NaN,
-  right: NaN,
-  bottom: NaN,
-  left: NaN
-};
-var useSafeArea = () => {
-  const [padding2, setPadding] = useState2(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 padding2;
-};
-
-// src/primitives/ThemeProvider/ThemeProvider.tsx
-var ThemeContext = /* @__PURE__ */ createContext4(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, _styleProps, ..._options) => void 0, themeMode = "dark", rootDensity = "md", noCache, platform }) => {
-  useEffect2(() => {
-    if (document.defaultView) {
-      const kb = createKeyborg(document.defaultView);
-      kb.subscribe(handleInputModalityChange);
-      return () => kb.unsubscribe(handleInputModalityChange);
-    }
-  }, []);
-  const safeAreaPadding = useSafeArea();
-  const contextValue = useMemo(() => ({
-    tx,
-    themeMode,
-    hasIosKeyboard: hasIosKeyboard(),
-    safeAreaPadding,
-    noCache,
-    platform
-  }), [
-    tx,
-    themeMode,
-    safeAreaPadding,
-    noCache,
-    platform
-  ]);
-  return /* @__PURE__ */ React4.createElement(ThemeContext.Provider, {
-    value: contextValue
-  }, /* @__PURE__ */ React4.createElement(TranslationsProvider, {
-    fallback,
-    resourceExtensions,
-    appNs
-  }, /* @__PURE__ */ React4.createElement(ElevationProvider, {
-    elevation: "base"
-  }, /* @__PURE__ */ React4.createElement(DensityProvider, {
-    density: rootDensity
-  }, children))));
-};
-var handleInputModalityChange = (isUsingKeyboard) => {
-  if (isUsingKeyboard) {
-    document.body.setAttribute("data-w-keyboard", "true");
-  } else {
-    document.body.removeAttribute("data-w-keyboard");
-  }
-};
-
-// src/components/Tooltip/Tooltip.tsx
-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 } 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 } 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 React5, { forwardRef, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState3 } 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) => {
-  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);
-  useEffect3(() => {
-    const skipDelayTimer = skipDelayTimerRef.current;
-    return () => window.clearTimeout(skipDelayTimer);
-  }, []);
-  const popperScope = usePopperScope(__scopeTooltip);
-  const [trigger2, setTrigger] = useState3(null);
-  const [content9, setContent] = useState3(null);
-  const [side, setSide] = useState3(void 0);
-  const triggerRef = useRef(trigger2);
-  const handleTriggerChange = useCallback2((nextTrigger, nextContent, nextSide) => {
-    setTrigger(nextTrigger);
-    triggerRef.current = nextTrigger;
-    setContent(nextContent ?? null);
-    setSide(nextSide);
-  }, []);
-  const contentId = useId();
-  const openTimerRef = useRef(0);
-  const wasOpenDelayedRef = useRef(false);
-  const handleOpenChange = useCallback2((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 = useMemo2(() => {
-    return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
-  }, [
-    open
-  ]);
-  const handleOpen = useCallback2(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = 0;
-    wasOpenDelayedRef.current = false;
-    setOpen(true);
-  }, [
-    setOpen
-  ]);
-  const handleClose = useCallback2(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = 0;
-    setOpen(false);
-  }, [
-    setOpen
-  ]);
-  const handleDelayedOpen = useCallback2(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = window.setTimeout(() => {
-      wasOpenDelayedRef.current = true;
-      setOpen(true);
-      openTimerRef.current = 0;
-    }, delayDuration);
-  }, [
-    delayDuration,
-    setOpen
-  ]);
-  useEffect3(() => {
-    return () => {
-      if (openTimerRef.current) {
-        window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = 0;
-      }
-    };
-  }, []);
-  const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React5.createElement(TooltipContextProvider, {
-    scope: __scopeTooltip,
-    contentId,
-    open,
-    stateAttribute,
-    trigger: trigger2,
-    onTriggerChange: handleTriggerChange,
-    onTriggerEnter: useCallback2(() => {
-      if (isOpenDelayedRef.current) {
-        handleDelayedOpen();
-      } else {
-        handleOpen();
-      }
-    }, [
-      isOpenDelayedRef,
-      handleDelayedOpen,
-      handleOpen
-    ]),
-    onTriggerLeave: useCallback2(() => {
-      if (disableHoverableContent) {
-        handleClose();
-      } else {
-        window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = 0;
-      }
-    }, [
-      handleClose,
-      disableHoverableContent
-    ]),
-    onOpen: handleOpen,
-    onClose: handleClose,
-    disableHoverableContent,
-    isPointerInTransitRef,
-    onPointerInTransitChange: useCallback2((inTransit) => {
-      isPointerInTransitRef.current = inTransit;
-    }, [])
-  }, /* @__PURE__ */ React5.createElement(TooltipContent, {
-    side,
-    className: tx("tooltip.content", {
-      elevation
-    })
-  }, content9, /* @__PURE__ */ React5.createElement(TooltipArrow, {
-    className: tx("tooltip.arrow")
-  })), /* @__PURE__ */ React5.createElement(TooltipVirtualTrigger, {
-    virtualRef: triggerRef
-  }), children));
-};
-TooltipProvider.displayName = TOOLTIP_NAME;
-var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
-  const popperScope = usePopperScope(__scopeTooltip);
-  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Anchor, {
-    asChild: true,
-    ...popperScope,
-    virtualRef
-  });
-};
-var TRIGGER_NAME = "Tooltip.Trigger";
-var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const {
-    __scopeTooltip,
-    onInteract,
-    // TODO(thure): Pass `delayDuration` into the context.
-    delayDuration: _delayDuration,
-    side,
-    content: content9,
-    ...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 = useCallback2(() => isPointerDownRef.current = false, []);
-  useEffect3(() => {
-    return () => document.removeEventListener("pointerup", handlePointerUp);
-  }, [
-    handlePointerUp
-  ]);
-  return /* @__PURE__ */ React5.createElement(Primitive.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,
-    ...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, content9, side);
-        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)
-  });
-});
-TooltipTrigger.displayName = TRIGGER_NAME;
-var PORTAL_NAME = "Tooltip.Portal";
-var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
-  forceMount: void 0
-});
-var TooltipPortal = (props) => {
-  const { __scopeTooltip, forceMount, children, container } = props;
-  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
-  return /* @__PURE__ */ React5.createElement(PortalProvider, {
-    scope: __scopeTooltip,
-    forceMount
-  }, /* @__PURE__ */ React5.createElement(Presence, {
-    present: forceMount || context.open
-  }, /* @__PURE__ */ React5.createElement(PortalPrimitive, {
-    asChild: true,
-    container
-  }, children)));
-};
-TooltipPortal.displayName = PORTAL_NAME;
-var CONTENT_NAME = "Tooltip.Content";
-var TooltipContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
-  const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
-  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
-  return /* @__PURE__ */ React5.createElement(Presence, {
-    present: forceMount || context.open
-  }, context.disableHoverableContent ? /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
-    side,
-    ...contentProps,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React5.createElement(TooltipContentHoverable, {
-    side,
-    ...contentProps,
-    ref: forwardedRef
-  }));
-});
-var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
-  const ref = useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const [pointerGraceArea, setPointerGraceArea] = useState3(null);
-  const { trigger: trigger2, onClose } = context;
-  const content9 = ref.current;
-  const { onPointerInTransitChange } = context;
-  const handleRemoveGraceArea = useCallback2(() => {
-    setPointerGraceArea(null);
-    onPointerInTransitChange(false);
-  }, [
-    onPointerInTransitChange
-  ]);
-  const handleCreateGraceArea = useCallback2((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
-  ]);
-  useEffect3(() => {
-    return () => handleRemoveGraceArea();
-  }, [
-    handleRemoveGraceArea
-  ]);
-  useEffect3(() => {
-    if (trigger2 && content9) {
-      const handleTriggerLeave = (event) => handleCreateGraceArea(event, content9);
-      const handleContentLeave = (event) => handleCreateGraceArea(event, trigger2);
-      trigger2.addEventListener("pointerleave", handleTriggerLeave);
-      content9.addEventListener("pointerleave", handleContentLeave);
-      return () => {
-        trigger2.removeEventListener("pointerleave", handleTriggerLeave);
-        content9.removeEventListener("pointerleave", handleContentLeave);
-      };
-    }
-  }, [
-    trigger2,
-    content9,
-    handleCreateGraceArea,
-    handleRemoveGraceArea
-  ]);
-  useEffect3(() => {
-    if (pointerGraceArea) {
-      const handleTrackPointerGrace = (event) => {
-        const target = event.target;
-        const pointerPosition = {
-          x: event.clientX,
-          y: event.clientY
-        };
-        const hasEnteredTarget = trigger2?.contains(target) || content9?.contains(target);
-        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
-        if (hasEnteredTarget) {
-          handleRemoveGraceArea();
-        } else if (isPointerOutsideGraceArea) {
-          handleRemoveGraceArea();
-          onClose();
-        }
-      };
-      document.addEventListener("pointermove", handleTrackPointerGrace);
-      return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
-    }
-  }, [
-    trigger2,
-    content9,
-    pointerGraceArea,
-    onClose,
-    handleRemoveGraceArea
-  ]);
-  return /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
-    ...props,
-    ref: composedRefs
-  });
-});
-var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
-  isInside: false
-});
-var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
-  const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
-  const popperScope = usePopperScope(__scopeTooltip);
-  const { onClose } = context;
-  useEffect3(() => {
-    document.addEventListener(TOOLTIP_OPEN, onClose);
-    return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
-  }, [
-    onClose
-  ]);
-  useEffect3(() => {
-    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__ */ React5.createElement(DismissableLayer, {
-    asChild: true,
-    disableOutsidePointerEvents: false,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside: (event) => event.preventDefault(),
-    onDismiss: onClose
-  }, /* @__PURE__ */ React5.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__ */ React5.createElement(Slottable, null, children), /* @__PURE__ */ React5.createElement(VisuallyHiddenContentContextProvider, {
-    scope: __scopeTooltip,
-    isInside: true
-  }, /* @__PURE__ */ React5.createElement(VisuallyHiddenPrimitive.Root, {
-    id: context.contentId,
-    role: "tooltip"
-  }, ariaLabel || children))));
-});
-TooltipContent.displayName = CONTENT_NAME;
-var ARROW_NAME = "Tooltip.Arrow";
-var TooltipArrow = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const { __scopeTooltip, ...arrowProps } = props;
-  const popperScope = usePopperScope(__scopeTooltip);
-  const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
-  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React5.createElement(PopperPrimitive.Arrow, {
-    ...popperScope,
-    ...arrowProps,
-    ref: forwardedRef
-  });
-});
-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, padding2 = 5) => {
-  const paddedExitPoints = [];
-  switch (exitSide) {
-    case "top":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding2,
-        y: exitPoint.y + padding2
-      }, {
-        x: exitPoint.x + padding2,
-        y: exitPoint.y + padding2
-      });
-      break;
-    case "bottom":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding2,
-        y: exitPoint.y - padding2
-      }, {
-        x: exitPoint.x + padding2,
-        y: exitPoint.y - padding2
-      });
-      break;
-    case "left":
-      paddedExitPoints.push({
-        x: exitPoint.x + padding2,
-        y: exitPoint.y - padding2
-      }, {
-        x: exitPoint.x + padding2,
-        y: exitPoint.y + padding2
-      });
-      break;
-    case "right":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding2,
-        y: exitPoint.y - padding2
-      }, {
-        x: exitPoint.x - padding2,
-        y: exitPoint.y + padding2
-      });
-      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/Tooltip/tooltipContent.ts
-import { mx, surfaceShadow, surfaceZIndex } from "@dxos/ui-theme";
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm", surfaceShadow({
-  elevation: "positioned"
-}), surfaceZIndex({
-  elevation,
-  level: "tooltip"
-}), ...etc);
-
-// src/components/Column/withColumn.ts
-var withColumn = {
-  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
-  center: () => "[grid-column:var(--dx-col,auto)]",
-  /** Propagates the Column grid to children via subgrid. No-op outside Column.
-  *  Direct children default to center column unless they are a dx-container (ScrollArea). */
-  propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
-  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
-  consumed: () => "[--dx-col:auto]"
-};
-
-// src/components/ErrorFallback/ErrorStack.tsx
-import ErrorStackParser from "error-stack-parser";
-import React6 from "react";
-import { mx as mx2 } from "@dxos/ui-theme";
-var parseCaptureOwnerStack = (stack) => {
-  if (stack == null || stack.length === 0) {
-    return null;
-  }
-  const err = new Error();
-  err.stack = stack;
-  try {
-    return ErrorStackParser.parse(err);
-  } catch {
-    err.stack = `Error
-${stack}`;
-    try {
-      return ErrorStackParser.parse(err);
-    } catch {
-      return null;
-    }
-  }
-};
-var ErrorStack = ({ error, frames: framesProp }) => {
-  const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
-  if (frames.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React6.createElement("div", {
-    className: "font-mono text-sm"
-  }, frames.map((frame2, i) => {
-    const isLast = i === frames.length - 1;
-    const local = frame2.fileName ? parseLocalFrame(frame2.fileName, frame2.lineNumber, frame2.columnNumber) : void 0;
-    const functionName = frame2.functionName ?? "<anonymous>";
-    return /* @__PURE__ */ React6.createElement("div", {
-      key: i,
-      className: mx2("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface")
-    }, /* @__PURE__ */ React6.createElement("div", {
-      className: "relative"
-    }, /* @__PURE__ */ React6.createElement("div", {
-      className: mx2("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0")
-    }), /* @__PURE__ */ React6.createElement("div", {
-      className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500"
-    })), local ? /* @__PURE__ */ React6.createElement("a", {
-      href: local.href,
-      className: "truncate self-center"
-    }, functionName) : /* @__PURE__ */ React6.createElement("span", {
-      className: "text-subdued truncate self-center"
-    }, functionName), /* @__PURE__ */ React6.createElement("span", {
-      className: "text-xs text-subdued truncate self-center truncate"
-    }, local?.fileName ?? ""), /* @__PURE__ */ React6.createElement("span", {
-      className: "text-xs text-subdued text-right self-center"
-    }, local ? `${frame2.lineNumber}:${frame2.columnNumber}` : ""));
-  }));
-};
-var parseLocalFrame = (fileUrl, line, col) => {
-  try {
-    const { pathname } = new URL(fileUrl);
-    if (!pathname.startsWith("/@fs/")) {
-      return void 0;
-    }
-    const FILE_PREFIX = "/@fs";
-    const localPath = pathname.slice(FILE_PREFIX.length);
-    const PKG_PREFIX = "/packages/";
-    const i = localPath.indexOf(PKG_PREFIX);
-    const path = i === -1 ? localPath : localPath.substring(i + PKG_PREFIX.length);
-    return {
-      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
-      fileName: path
-    };
-  } catch {
-    return void 0;
-  }
-};
-
-// src/components/Main/constants.ts
-var mainPaddingTransitions = "dx-main-content-padding-transitions";
-var mainIntrinsicSize = "dx-main-intrinsic-size";
-
-// src/theme/bindTheme.ts
-import { getDeep } from "@dxos/util";
-var bindTheme = (theme) => {
-  return (path, styleProps, ...etc) => {
-    const result = getDeep(theme, path.split("."));
-    return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
-  };
-};
-
-// src/components/Avatars/Avatar.theme.ts
-import { getHeight, getSize, mx as mx3 } from "@dxos/ui-theme";
-var root = ({ size = 10, inGroup }, ...etc) => mx3("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
-var label = ({ srOnly }, ...etc) => mx3(srOnly && "sr-only", ...etc);
-var description = ({ srOnly }, ...etc) => mx3("text-description", srOnly && "sr-only", ...etc);
-var frame = ({ variant }, ...etc) => mx3("h-full w-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
-var statusIcon = ({ status, size = 3 }, ...etc) => mx3("absolute bottom-0 end-0", getSize(size), status === "inactive" ? "text-amber-400 dark:text-amber-300" : status === "active" ? "text-emerald-400 dark:text-emerald-300" : "text-neutral-400 dark:text-neutral-300", ...etc);
-var ring = ({ status, variant, animation }, ...etc) => mx3("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded-sm", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-emerald-400 dark:border-emerald-400" : status === "error" ? "border-rose-400 dark:border-rose-500" : status === "warning" ? "border-amber-400 dark:border-amber-500" : status === "inactive" ? "border-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
-var fallbackText = (_props, ...etc) => mx3("fill-white", ...etc);
-var group = (_props, ...etc) => mx3("inline-flex items-center", ...etc);
-var groupLabel = ({ size, srOnly }, ...etc) => mx3(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getHeight(size), ...etc);
-var groupDescription = ({ srOnly }, ...etc) => mx3(srOnly ? "sr-only" : "text-description", ...etc);
-var avatarTheme = {
-  root,
-  label,
-  description,
-  statusIcon,
-  frame,
-  ring,
-  fallbackText,
-  group,
-  groupLabel,
-  groupDescription
-};
-
-// src/components/Breadcrumb/Breadcrumb.theme.ts
-import { mx as mx4 } from "@dxos/ui-theme";
-var root2 = (_props, ...etc) => mx4("shrink-0 flex items-center", ...etc);
-var list = (_props, ...etc) => mx4("contents", ...etc);
-var listItem = (_props, ...etc) => mx4("contents", ...etc);
-var current = (_props, ...etc) => mx4(...etc);
-var separator = (_props, ...etc) => mx4("opacity-50", ...etc);
-var breadcrumbTheme = {
-  root: root2,
-  list,
-  listItem,
-  current,
-  separator
-};
-
-// src/components/Button/Button.theme.ts
-import { mx as mx5 } from "@dxos/ui-theme";
-var root3 = (_props, ...etc) => {
-  return mx5("dx-button dx-focus-ring group gap-1 [&_span]:truncate", ...etc);
-};
-var group2 = (_props, ...etc) => {
-  return mx5("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
-};
-var buttonTheme = {
-  root: root3,
-  group: group2
-};
-
-// src/components/Button/IconButton.theme.ts
-import { mx as mx6 } from "@dxos/ui-theme";
-var root4 = ({ iconOnly, square }, ...etc) => {
-  return mx6("px-1.5", !iconOnly && "gap-1.5", square && "aspect-square", ...etc);
-};
-var iconButtonTheme = {
-  root: root4
-};
-
-// src/components/Card/Card.theme.ts
-import { mx as mx7 } from "@dxos/ui-theme";
-var root5 = ({ border, fullWidth }, ...etc) => mx7("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var header = (_, ...etc) => mx7("dx-card__header col-span-3 grid grid-cols-subgrid items-center", "[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2", ...etc);
-var title = (_props, ...etc) => mx7("dx-card__title grow truncate", ...etc);
-var body = (_props, ...etc) => mx7("dx-card__body contents", ...etc);
-var block = (_props, ...etc) => mx7("dx-card__block", ...etc);
-var text = ({ variant = "default", truncate: _truncate }, ...etc) => mx7("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
-var textSpan = ({ variant = "default", truncate }, ...etc) => mx7(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
-var poster = (_props, ...etc) => mx7("dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none", ...etc);
-var posterIcon = (_props, ...etc) => mx7("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
-var action = (_props, ...etc) => mx7("dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden", ...etc);
-var actionLabel = (_props, ...etc) => mx7("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
-var link = (_props, ...etc) => mx7("dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
-var linkLabel = (_props, ...etc) => mx7("dx-card__link-label min-w-0 flex-1 truncate text-sm!", ...etc);
-var row = ({ fullWidth }, ...etc) => mx7("dx-card__row overflow-hidden", fullWidth ? "col-span-full" : (
-  // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
-  // block children, whose inner nodes are not grid items of this row.
-  "col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2"
-), ...etc);
-var section = (_props, ...etc) => mx7("dx-card__section col-span-full grid grid-cols-subgrid", ...etc);
-var sectionTitle = (_props, ...etc) => mx7("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
-var cardTheme = {
-  root: root5,
-  header,
-  title,
-  body,
-  block,
-  row,
-  section,
-  "section-title": sectionTitle,
-  text,
-  "text-span": textSpan,
-  poster,
-  "poster-icon": posterIcon,
-  action,
-  "action-label": actionLabel,
-  link,
-  "link-label": linkLabel
-};
-
-// src/components/Column/Column.theme.ts
-import { mx as mx8 } from "@dxos/ui-theme";
-var root6 = (_, ...etc) => {
-  return mx8("dx-column-root grid", ...etc);
-};
-var row2 = (_, ...etc) => {
-  return mx8("col-span-3 grid grid-cols-subgrid", "[&>*:not(.dx-gutter)]:col-start-2", ...etc);
-};
-var block2 = ({ end, compact, square }, ...etc) => mx8("dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]", end ? "col-start-3" : "col-start-1", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
-var bleed = (_, ...etc) => {
-  return mx8("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
-};
-var center = (_, ...etc) => {
-  return mx8(withColumn.center(), "min-h-0", ...etc);
-};
-var columnTheme = {
-  root: root6,
-  row: row2,
-  block: block2,
-  bleed,
-  center
-};
-
-// src/components/Dialog/Dialog.theme.ts
-import { mx as mx9 } from "@dxos/ui-theme";
-var sizeMap = {
-  sm: "md:max-w-[24rem]",
-  md: "md:max-w-[32rem]!",
-  lg: "md:max-w-[40rem]!",
-  xl: "md:max-w-[60rem]!"
-};
-var overlay = (_props, ...etc) => mx9("dx-dialog__overlay", ...etc);
-var content = ({ inOverlayLayout, size = "md" }, ...etc) => {
-  return mx9("@container", "dx-dialog__content dx-focus-ring dx-modal-surface py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
-};
-var header2 = (_props, ...etc) => mx9("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
-var body2 = (_props, ...etc) => mx9("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
-var actionBar = (_props, ...etc) => mx9("dx-dialog__actionbar flex items-center pt-4 gap-2", withColumn.center(), ...etc);
-var title2 = ({ srOnly }, ...etc) => mx9("dx-dialog__title", srOnly && "sr-only", ...etc);
-var description2 = ({ srOnly }, ...etc) => mx9("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
-var dialogTheme = {
-  overlay,
-  content,
-  header: header2,
-  body: body2,
-  actionbar: actionBar,
-  title: title2,
-  description: description2
-};
-
-// src/components/Focus/Focus.theme.ts
-import { mx as mx10 } from "@dxos/ui-theme";
-var ring2 = ({ border }, ...etc) => mx10("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
-var focusTheme = {
-  group: ring2,
-  item: ring2
-};
-
-// src/components/Icon/Icon.theme.ts
-import { getSize as getSize2, mx as mx11 } from "@dxos/ui-theme";
-var root7 = ({ size }, etc) => {
-  return mx11("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize2(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
-};
-var block3 = ({ compact, square }, ...etc) => mx11("grid place-items-center shrink-0 [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
-var iconTheme = {
-  root: root7,
-  block: block3
-};
-
-// src/components/Input/Input.theme.ts
-import { densityDimensions, staticDisabled } from "@dxos/ui-theme";
-import { getSize as getSize3, mx as mx12, sizeValue, snapSize, textValence } from "@dxos/ui-theme";
-var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-input-separator focus:border-separator";
-var textInputSurfaceHover = "hover:bg-focus-surface";
-var valence = (valence2) => {
-  switch (valence2) {
-    case "success":
-      return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
-    case "info":
-      return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
-    case "warning":
-      return "shadow-amber-500/50 dark:shadow-amber-600/50";
-    case "error":
-      return "shadow-rose-500/50 dark:shadow-rose-600/50";
-  }
-};
-var sharedSubduedInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full bg-transparent text-current placeholder-placeholder",
-  "dx-focus-subdued",
-  densityDimensions(props.density),
-  props.disabled && staticDisabled
-];
-var sharedDefaultInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-fg rounded-xs placeholder-placeholder",
-  textInputSurfaceFocus,
-  densityDimensions(props.density),
-  props.disabled ? staticDisabled : textInputSurfaceHover
-];
-var sharedStaticInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-fg rounded-xs placeholder-placeholder",
-  textInputSurfaceFocus,
-  textInputSurfaceHover,
-  props.focused && "bg-attention-surface",
-  valence(props.validationValence),
-  props.disabled && staticDisabled,
-  props.focused && "dx-focus-static"
-];
-var input = (props, ...etc) => props.variant === "subdued" ? mx12(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx12(...sharedStaticInputStyles(props), ...etc) : mx12(...sharedDefaultInputStyles(props), !props.disabled && "dx-focus-ring", valence(props.validationValence), ...etc);
-var textArea = (props, ...etc) => input(props, ...etc);
-var checkbox = ({ size = 4 }, ...etc) => mx12("dx-checkbox dx-focus-ring", getSize3(size), ...etc);
-var checkboxIndicator = ({ size = 4, checked }, ...etc) => mx12(getSize3(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
-var switch_ = (_props, ...etc) => mx12("dx-checkbox--switch dx-focus-ring", ...etc);
-var pin = (props, ...etc) => mx12("font-mono selection:bg-transparent mx-auto", props.density === "lg" ? "text-lg" : props.density === "sm" ? "text-sm" : props.density === "xs" ? "text-xs" : "text-base pointer-fine:text-sm", props.disabled && "cursor-not-allowed", ...etc);
-var segment = (props, ...etc) => mx12("flex items-center justify-center tabular-nums", props.density === "lg" ? "size-12 rounded-xs" : props.density === "sm" ? "size-7 rounded-xs" : props.density === "xs" ? "size-6 rounded-xs" : "size-10 pointer-fine:size-8 rounded-xs", "bg-input-surface text-base-fg transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", valence(props.validationValence), props.disabled && staticDisabled, ...etc);
-var label2 = (props, ...etc) => mx12("block text-sm text-description", props.srOnly && "sr-only", ...etc);
-var description3 = (props, ...etc) => mx12("text-description", props.srOnly && "sr-only", ...etc);
-var descriptionAndValidation = (props, ...etc) => mx12("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
-var validation = (props, ...etc) => mx12("text-sm text-description", props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
-var triggerIcon = (_p, ...etc) => mx12("shrink-0 inline-flex items-center justify-center size-7 rounded-xs", "bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface", "dx-focus-ring", ...etc);
-var block4 = (props, ...etc) => mx12("grid place-items-center w-[var(--dx-rail-item)] h-[var(--dx-rail-item)]", ...etc);
-var inputTheme = {
-  input,
-  textArea,
-  pin,
-  segment,
-  label: label2,
-  description: description3,
-  checkbox,
-  checkboxIndicator,
-  switch: switch_,
-  block: block4,
-  validation,
-  descriptionAndValidation,
-  triggerIcon
-};
-
-// src/components/Link/Link.theme.ts
-import { mx as mx13 } from "@dxos/ui-theme";
-var root8 = ({ variant }, ...etc) => mx13("dx-link", ...etc);
-var linkTheme = {
-  root: root8
-};
-
-// src/components/Main/Main.theme.ts
-import { mx as mx14 } from "@dxos/ui-theme";
-var padding = "dx-main-content-padding";
-var content2 = ({ bounce }, ...etc) => mx14(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
-var sidebar = (_, ...etc) => mx14("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
-var overlay2 = (_, ...etc) => mx14("dx-main-overlay", ...etc);
-var mainTheme = {
-  content: content2,
-  sidebar,
-  overlay: overlay2
-};
-
-// src/components/Menu/Menu.theme.ts
-import { dataDisabled } from "@dxos/ui-theme";
-import { mx as mx15, surfaceShadow as surfaceShadow2, surfaceZIndex as surfaceZIndex2 } from "@dxos/ui-theme";
-var content3 = ({ elevation }, ...etc) => mx15("dx-popover-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex2({
-  elevation,
-  level: "menu"
-}), surfaceShadow2({
-  elevation: "positioned"
-}), ...etc);
-var viewport = (_props, ...etc) => mx15("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
-var item = (_props, ...etc) => mx15("flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
-var separator2 = (_props, ...etc) => mx15("my-1 mx-2 h-px bg-separator", ...etc);
-var groupLabel2 = (_props, ...etc) => mx15("text-description", "select-none px-2 py-2", ...etc);
-var arrow = (_props, ...etc) => mx15("fill-separator", ...etc);
-var menuTheme = {
-  content: content3,
-  viewport,
-  item,
-  separator: separator2,
-  groupLabel: groupLabel2,
-  arrow
-};
-
-// src/components/Message/Message.theme.ts
-import { messageValence, mx as mx16 } from "@dxos/ui-theme";
-var root9 = ({ valence: valence2 }, etc) => {
-  return mx16("p-1 rounded-sm", messageValence(valence2), etc);
-};
-var header3 = (_, etc) => {
-  return mx16("items-center", etc);
-};
-var title3 = (_, etc) => {
-  return mx16("col-start-2 overflow-hidden truncate", etc);
-};
-var content4 = (_, etc) => {
-  return mx16("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
-};
-var messageTheme = {
-  root: root9,
-  header: header3,
-  title: title3,
-  content: content4
-};
-
-// src/components/Panel/Panel.theme.ts
-import { mx as mx17 } from "@dxos/ui-theme";
-var sizes = {
-  lg: "h-(--dx-topbar-size)",
-  md: "h-(--dx-toolbar-size)",
-  sm: "h-(--dx-statusbar-size)"
-};
-var root10 = (_, ...etc) => mx17(
-  "dx-container grid grid-cols-[100%] overflow-hidden",
-  // Add uncategorized children to content slot.
-  "[&>*:not([data-slot])]:[grid-area:content]",
-  ...etc
-);
-var toolbar = ({ size = "md" }, ...etc) => mx17("[grid-area:toolbar]", "shrink-0", "bg-toolbar-surface", sizes[size], ...etc);
-var content5 = (_, ...etc) => mx17("[grid-area:content] min-h-0", ...etc);
-var statusbar = ({ size = "md" }, ...etc) => mx17("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
-var panelTheme = {
-  root: root10,
-  toolbar,
-  content: content5,
-  statusbar
-};
-
-// src/components/Popover/Popover.theme.ts
-import { mx as mx18, surfaceShadow as surfaceShadow3, surfaceZIndex as surfaceZIndex3 } from "@dxos/ui-theme";
-var content6 = ({ elevation }, ...etc) => mx18("dx-popover-surface overflow-hidden border border-separator rounded-sm", surfaceShadow3({
-  elevation: "positioned"
-}), surfaceZIndex3({
-  elevation,
-  level: "menu"
-}), "dx-focus-ring", ...etc);
-var viewport2 = ({ constrainBlock, constrainInline }, ...etc) => mx18("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
-var arrow2 = (_props, ...etc) => mx18("fill-separator", ...etc);
-var popoverTheme = {
-  content: content6,
-  viewport: viewport2,
-  arrow: arrow2
-};
-
-// src/components/ScrollArea/ScrollArea.theme.ts
-import { mx as mx19 } from "@dxos/ui-theme";
-var root11 = ({ orientation }, ...etc) => mx19(
-  // Expand
-  "dx-container",
-  orientation === "vertical" && "group/scroll-v flex flex-col",
-  orientation === "horizontal" && "group/scroll-h flex",
-  // `flex flex-col` is required (as in `vertical`) so the viewport's `flex-1 min-h-0` can
-  // bound its height; without it the viewport grows to content height and only scrolls
-  // horizontally (the root clips the vertical overflow instead of scrolling it).
-  orientation === "all" && "group/scroll-all flex flex-col",
-  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
-  "[.dx-column-root_&]:col-span-full",
-  ...etc
-);
-var viewport3 = ({ orientation, centered, padding: padding2, snap, autoHide }, ...etc) => {
-  return mx19(
-    "flex-1 min-h-0 w-full",
-    // Reset --dx-col so nested components don't try to grid-position themselves.
-    // ScrollArea has already consumed --gutter for padding.
-    withColumn.consumed(),
-    orientation === "vertical" && "overflow-y-scroll",
-    orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain",
-    orientation === "all" && "overflow-scroll",
-    "[&::-webkit-scrollbar-corner]:bg-transparent",
-    "[&::-webkit-scrollbar-track]:bg-transparent",
-    "[&::-webkit-scrollbar-thumb]:rounded-none",
-    "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]",
-    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
-    // If centered, left padding compensates for scrollbar width so content is visually centered.
-    (orientation === "vertical" || orientation === "all") && (padding2 ? [
-      centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]",
-      "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"
-    ] : centered && "pl-[var(--scroll-width)]"),
-    (orientation === "horizontal" || orientation === "all") && (padding2 ? [
-      centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]",
-      "pb-[var(--scroll-padding)]"
-    ] : centered && "pt-[var(--scroll-width)]"),
-    snap && [
-      orientation === "vertical" && "snap-y snap-mandatory",
-      orientation === "horizontal" && "snap-x snap-mandatory",
-      orientation === "all" && "snap-both snap-mandatory"
-    ],
-    autoHide ? [
-      orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-    ] : [
-      orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-    ],
-    ...etc
-  );
-};
-var scrollAreaTheme = {
-  root: root11,
-  viewport: viewport3
-};
-
-// src/components/Select/Select.theme.ts
-import { mx as mx20, surfaceShadow as surfaceShadow4, surfaceZIndex as surfaceZIndex4 } from "@dxos/ui-theme";
-var content7 = ({ elevation }, ...etc) => {
-  return mx20("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow4({
-    elevation: "positioned"
-  }), surfaceZIndex4({
-    elevation,
-    level: "menu"
-  }), ...etc);
-};
-var triggerButton = (_props, ...etc) => mx20("bg-input-surface grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
-var viewport4 = (_props, ...etc) => mx20(...etc);
-var item2 = (_props, ...etc) => mx20("flex items-center min-h-[2rem] px-2.5 py-1 gap-2", "text-base-fg leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
-var itemIndicator = (_props, ...etc) => mx20("items-center", ...etc);
-var arrow3 = (_props, ...etc) => mx20("fill-separator", ...etc);
-var separator3 = (_props, ...etc) => mx20("self-stretch border-b my-1 border-separator", ...etc);
-var scrollButton = (_props, ...etc) => mx20("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
-var selectTheme = {
-  content: content7,
-  triggerButton,
-  viewport: viewport4,
-  item: item2,
-  itemIndicator,
-  arrow: arrow3,
-  separator: separator3,
-  scrollButton
-};
-
-// src/components/Separator/Separator.theme.ts
-import { mx as mx21 } from "@dxos/ui-theme";
-var root12 = ({ orientation, subdued }, ...etc) => mx21("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
-var separatorTheme = {
-  root: root12
-};
-
-// src/components/Skeleton/Skeleton.theme.ts
-import { mx as mx22 } from "@dxos/ui-theme";
-var root13 = ({ variant = "default" }, ...etc) => mx22("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
-var skeletonTheme = {
-  root: root13
-};
-
-// src/components/Splitter/Splitter.theme.ts
-import { mx as mx23 } from "@dxos/ui-theme";
-var root14 = ({ orientation }, ...etc) => mx23("relative flex w-full h-full overflow-hidden", orientation === "vertical" ? "flex-col" : "flex-row", ...etc);
-var panel = (_props, ...etc) => mx23("relative grid overflow-hidden min-w-0 min-h-0", ...etc);
-var handle = ({ orientation }, ...etc) => mx23("group absolute z-10 touch-none select-none", "before:absolute before:block before:bg-separator", "before:transition-colors before:duration-100 before:ease-in-out hover:before:bg-focus-ring-subtle focus-visible:before:bg-focus-ring-subtle active:before:bg-focus-ring-subtle", orientation === "vertical" ? "h-[7px] cursor-row-resize before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-px" : "w-[7px] cursor-col-resize before:inset-y-0 before:left-1/2 before:-translate-x-1/2 before:w-px", ...etc);
-var splitterTheme = {
-  root: root14,
-  panel,
-  handle
-};
-
-// src/components/Status/Status.theme.ts
-import { mx as mx24 } from "@dxos/ui-theme";
-var root15 = ({ variant = "default" }, ...etc) => mx24("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block bg-base-surface", ...etc);
-var bar = ({ variant = "default", indeterminate }, ...etc) => mx24("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
-var statusTheme = {
-  root: root15,
-  bar
-};
-
-// src/components/Tag/Tag.theme.ts
-import { mx as mx25 } from "@dxos/ui-theme";
-var root16 = (_, ...etc) => mx25("dx-tag", ...etc);
-var tagTheme = {
-  root: root16
-};
-
-// src/components/Toast/Toast.theme.ts
-import { mx as mx26, surfaceShadow as surfaceShadow5 } from "@dxos/ui-theme";
-var viewport5 = (_props, ...etc) => mx26("z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)]", "inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)]", "w-auto md:end-[calc(env(safe-area-inset-right)+4rem)] md:left-auto md:w-full md:max-w-sm", "rounded-md flex flex-col gap-2", ...etc);
-var root17 = (_props, ...etc) => mx26("dx-popover-surface rounded-md p-1", surfaceShadow5({
-  elevation: "toast"
-}), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
-var grid = (_props, ...etc) => mx26("gap-y-1 pbe-1", ...etc);
-var header4 = (_props, ...etc) => mx26("items-center", ...etc);
-var title4 = (_props, ...etc) => mx26("col-start-2 truncate font-medium", ...etc);
-var description4 = (_props, ...etc) => mx26("col-start-2 overflow-hidden text-description", ...etc);
-var actions = (_props, ...etc) => mx26("flex gap-2 mbs-1", ...etc);
-var toastTheme = {
-  viewport: viewport5,
-  root: root17,
-  grid,
-  header: header4,
-  title: title4,
-  description: description4,
-  actions
-};
-
-// src/components/Toolbar/Toolbar.theme.ts
-import { mx as mx27 } from "@dxos/ui-theme";
-var layout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
-var root18 = ({ density, disabled, layoutManaged }, ...etc) => {
-  return mx27("bg-toolbar-surface dx-toolbar shadow-sm", density === "lg" && "h-(--dx-rail-size) px-3!", density === "sm" && "h-7 px-2!", density === "xs" && "h-6 px-1!", disabled && "*:opacity-20", !layoutManaged && layout, ...etc);
-};
-var text2 = (_, ...etc) => {
-  return mx27("px-2 grow truncate items-center", ...etc);
-};
-var toolbarTheme = {
-  root: root18,
-  text: text2
-};
-
-// src/components/Tooltip/Tooltip.theme.ts
-import { mx as mx28 } from "@dxos/ui-theme";
-var arrow4 = (_props, ...etc) => mx28("fill-inverse-surface", ...etc);
-var tooltipTheme = {
-  content: tooltipContent,
-  arrow: arrow4
-};
-
-// src/components/Calendar/Calendar.theme.ts
-import { mx as mx29 } from "@dxos/ui-theme";
-var root19 = (_p, ...etc) => mx29("relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg", ...etc);
-var nav = (_p, ...etc) => mx29("flex items-center justify-between pb-1", ...etc);
-var caption_label = (_p, ...etc) => mx29("flex-1 text-center text-sm font-medium", ...etc);
-var button_previous = (_p, ...etc) => mx29("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
-var button_next = (_p, ...etc) => mx29("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
-var month_grid = (_p, ...etc) => mx29("w-full border-collapse", ...etc);
-var weekdays = (_p, ...etc) => mx29("", ...etc);
-var weekday = (_p, ...etc) => mx29("w-9 h-7 text-xs font-thin text-description", ...etc);
-var day = (_p, ...etc) => mx29(
-  "relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer",
-  "outline-none",
-  "data-[hovered]:bg-hover-surface",
-  "data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500",
-  // Highlight today (overridden by the selected style below when today is also the selected day).
-  "data-[today]:text-orange-500 data-[today]:font-medium",
-  "data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500",
-  "data-[outside-month]:text-description/40",
-  "data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent",
-  "data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed",
-  // Range selection visual layer.
-  "data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm",
-  "data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500",
-  ...etc
-);
-var calendarTheme = {
-  root: root19,
-  nav,
-  caption_label,
-  button_previous,
-  button_next,
-  month_grid,
-  weekdays,
-  weekday,
-  day
-};
-
-// src/components/DatePicker/DatePicker.theme.ts
-import { mx as mx30 } from "@dxos/ui-theme";
-var trigger = ({ hasValue }, ...etc) => mx30("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "bg-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
-var content8 = (_p, ...etc) => mx30("flex flex-col gap-2 p-2", ...etc);
-var timeField = (_p, ...etc) => mx30("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
-var datePickerTheme = {
-  trigger,
-  content: content8,
-  timeField
-};
-
-// src/theme/defaultTheme.ts
-var defaultTheme = {
-  themeName: () => "default",
-  //
-  // Primitives
-  //
-  column: columnTheme,
-  panel: panelTheme,
-  //
-  // Components
-  //
-  avatar: avatarTheme,
-  breadcrumb: breadcrumbTheme,
-  button: buttonTheme,
-  calendar: calendarTheme,
-  card: cardTheme,
-  datePicker: datePickerTheme,
-  dialog: dialogTheme,
-  focus: focusTheme,
-  icon: iconTheme,
-  iconButton: iconButtonTheme,
-  input: inputTheme,
-  link: linkTheme,
-  main: mainTheme,
-  message: messageTheme,
-  menu: menuTheme,
-  popover: popoverTheme,
-  scrollArea: scrollAreaTheme,
-  select: selectTheme,
-  separator: separatorTheme,
-  skeleton: skeletonTheme,
-  splitter: splitterTheme,
-  status: statusTheme,
-  tag: tagTheme,
-  toast: toastTheme,
-  toolbar: toolbarTheme,
-  tooltip: tooltipTheme
-};
-var defaultTx = bindTheme(defaultTheme);
-
-export {
-  DensityContext,
-  DensityProvider,
-  ElevationContext,
-  ElevationProvider,
-  hasIosKeyboard,
-  TranslationsContext,
-  useTranslation,
-  ThemeContext,
-  ThemeProvider,
-  useElevationContext,
-  useThemeContext,
-  initialSafeArea,
-  useSafeArea,
-  createTooltipScope,
-  useTooltipContext,
-  Tooltip,
-  tooltipContent,
-  withColumn,
-  parseCaptureOwnerStack,
-  ErrorStack,
-  mainPaddingTransitions,
-  mainIntrinsicSize,
-  bindTheme,
-  avatarTheme,
-  breadcrumbTheme,
-  buttonTheme,
-  iconButtonTheme,
-  cardTheme,
-  columnTheme,
-  dialogTheme,
-  focusTheme,
-  iconTheme,
-  inputTheme,
-  linkTheme,
-  mainTheme,
-  menuTheme,
-  messageTheme,
-  panelTheme,
-  popoverTheme,
-  scrollAreaTheme,
-  selectTheme,
-  separatorTheme,
-  skeletonTheme,
-  splitterTheme,
-  statusTheme,
-  tagTheme,
-  toastTheme,
-  toolbarTheme,
-  tooltipTheme,
-  defaultTheme,
-  defaultTx
-};
-//# sourceMappingURL=chunk-GTHV4WYK.mjs.map