@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

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

@@ -0,0 +1,1600 @@
+// 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 i18Next from "i18next";
+import React3, { Suspense, createContext as createContext3, useContext, useEffect, useState } from "react";
+import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
+var initialLng = "en-US";
+var initialNs = "dxos-common";
+var initialDtLocale = dtLocaleEnUs;
+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__ */ 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) {
+      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__ */ 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-foreground 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/Input/constants.ts
+var inputTextLabel = "py-1 text-sm text-description";
+
+// 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 { mx as mx3, getSize, getHeight } 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-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "bg-card-surface border border-separator dark:border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
+var header = (_, ...etc) => mx7("dx-card__header dx-density-md bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]", ...etc);
+var title = (_props, ...etc) => mx7("dx-card__title grow truncate", ...etc);
+var body = (_props, ...etc) => mx7("dx-card__body contents pb-1 last:pb-0", ...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]", ...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__acztion col-span-3 !grid grid-cols-subgrid p-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 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", ...etc);
+var row = ({ fullWidth }, ...etc) => mx7("dx-card__row", fullWidth ? "col-span-full" : "col-span-3 grid grid-cols-subgrid", ...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 iconBlock = ({ padding: padding2 }, ...etc) => mx7("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", padding2 && "[&>*]:p-1", ...etc);
+var cardTheme = {
+  root: root5,
+  header,
+  title,
+  body,
+  row,
+  section,
+  "section-title": sectionTitle,
+  text,
+  "text-span": textSpan,
+  poster,
+  "poster-icon": posterIcon,
+  action,
+  "action-label": actionLabel,
+  link,
+  "link-label": linkLabel,
+  "icon-block": iconBlock
+};
+
+// 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", ...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,
+  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", 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 iconTheme = {
+  root: root7
+};
+
+// src/components/Input/Input.theme.ts
+import { densityDimensions, staticDisabled } from "@dxos/ui-theme";
+import { getSize as getSize3, getHeight as getHeight2, getWidth, mx as mx12, snapSize, sizeValue, textValence } from "@dxos/ui-theme";
+var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator";
+var textInputSurfaceHover = "hover:bg-focus-surface";
+var booleanInputSurface = "shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-surface aria-[checked=mixed]:bg-accent-surface";
+var booleanInputSurfaceHover = "hover:bg-un-accent-hover hover:aria-checked:bg-accent-surface-hover hover:aria-[checked=mixed]:bg-accent-surface-hover";
+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-foreground 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-foreground 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 = 5 }, ...etc) => mx12("dx-checkbox dx-focus-ring", getSize3(size), ...etc);
+var checkboxIndicator = ({ size = 5, checked }, ...etc) => mx12(getSize3(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
+var switchRoot = ({ size = 5, disabled }, ...etc) => mx12(
+  getHeight2(size),
+  getWidth(snapSize(sizeValue(size) * 1.75, 9)),
+  booleanInputSurface,
+  !disabled && booleanInputSurfaceHover,
+  // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
+  "cursor-pointer shrink-0 rounded-full px-1 mx-1 relative",
+  "dx-focus-ring",
+  ...etc
+);
+var switchThumb = ({ size = 5 }, ...etc) => mx12(getSize3(size === "px" ? "px" : size - 2), "block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]", ...etc);
+var withSegmentsInput = (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 font-mono", 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-foreground 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", inputTextLabel, 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(inputTextLabel, 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-foreground hover:bg-hover-surface", "dx-focus-ring", ...etc);
+var inputTheme = {
+  input,
+  textArea,
+  inputWithSegments: withSegmentsInput,
+  segment,
+  checkbox,
+  checkboxIndicator,
+  label: label2,
+  description: description3,
+  switch: switchRoot,
+  switchThumb,
+  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/List/List.theme.ts
+import { densityBlockSize, ghostHover } from "@dxos/ui-theme";
+import { getSize as getSize4, mx as mx14 } from "@dxos/ui-theme";
+var root9 = (_, ...etc) => mx14(...etc);
+var item = ({ collapsible }, ...etc) => mx14(!collapsible && "flex", ...etc);
+var itemEndcap = ({ density }, ...etc) => mx14(density === "lg" ? getSize4(10) : density === "sm" ? getSize4(7) : density === "xs" ? getSize4(6) : getSize4(8), "shrink-0 flex items-center justify-center", ...etc);
+var itemHeading = ({ density }, ...etc) => mx14(densityBlockSize(density), "flex items-center overflow-hidden [&>span]:truncate", ...etc);
+var itemDragHandleIcon = (_props, ...etc) => mx14(getSize4(5), "mt-2.5", ...etc);
+var itemOpenTrigger = ({ density }, ...etc) => mx14("w-5 rounded-sm flex justify-center items-center", densityBlockSize(density), ghostHover, "dx-focus-ring", ...etc);
+var itemOpenTriggerIcon = (_props, ...etc) => {
+  return mx14(getSize4(5), ...etc);
+};
+var listTheme = {
+  root: root9,
+  item: {
+    root: item,
+    endcap: itemEndcap,
+    heading: itemHeading,
+    dragHandleIcon: itemDragHandleIcon,
+    openTrigger: itemOpenTrigger,
+    openTriggerIcon: itemOpenTriggerIcon
+  }
+};
+
+// src/components/List/Treegrid.theme.ts
+import { mx as mx15 } from "@dxos/ui-theme";
+var levelStyles = /* @__PURE__ */ new Map([
+  [
+    1,
+    "[&>.indent:first-of-type]:pl-0 font-medium"
+  ],
+  [
+    2,
+    "[&>.indent:first-of-type]:pl-0"
+  ],
+  [
+    3,
+    "[&>.indent:first-of-type]:pl-1"
+  ],
+  [
+    4,
+    "[&>.indent:first-of-type]:pl-2"
+  ],
+  [
+    5,
+    "[&>.indent:first-of-type]:pl-3"
+  ],
+  [
+    6,
+    "[&>.indent:first-of-type]:pl-4"
+  ],
+  [
+    7,
+    "[&>.indent:first-of-type]:pl-5"
+  ],
+  [
+    8,
+    "[&>.indent:first-of-type]:pl-6"
+  ]
+]);
+var root10 = (_, ...etc) => mx15("grid", ...etc);
+var row3 = ({ level = 1 }, ...etc) => mx15(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+var cell = ({ indent }, ...etc) => mx15(indent && "indent", ...etc);
+var treegridTheme = {
+  root: root10,
+  row: row3,
+  cell
+};
+
+// src/components/Main/Main.theme.ts
+import { mx as mx16 } from "@dxos/ui-theme";
+var padding = "dx-main-content-padding";
+var content2 = ({ bounce }, ...etc) => mx16(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
+var sidebar = (_, ...etc) => mx16("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
+var overlay2 = (_, ...etc) => mx16("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 mx17, surfaceShadow as surfaceShadow2, surfaceZIndex as surfaceZIndex2 } from "@dxos/ui-theme";
+var content3 = ({ elevation }, ...etc) => mx17("dx-modal-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex2({
+  elevation,
+  level: "menu"
+}), surfaceShadow2({
+  elevation: "positioned"
+}), ...etc);
+var viewport = (_props, ...etc) => mx17("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
+var item2 = (_props, ...etc) => mx17("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) => mx17("my-1 mx-2 h-px bg-separator", ...etc);
+var groupLabel2 = (_props, ...etc) => mx17("text-description", "select-none px-2 py-2", ...etc);
+var arrow = (_props, ...etc) => mx17("fill-separator", ...etc);
+var menuTheme = {
+  content: content3,
+  viewport,
+  item: item2,
+  separator: separator2,
+  groupLabel: groupLabel2,
+  arrow
+};
+
+// src/components/Message/Message.theme.ts
+import { mx as mx18, messageValence } from "@dxos/ui-theme";
+var root11 = ({ valence: valence2 }, etc) => {
+  return mx18("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence2), etc);
+};
+var header3 = (_, etc) => {
+  return mx18("col-span-full grid grid-cols-subgrid items-center", etc);
+};
+var title3 = (_, etc) => {
+  return mx18("col-start-2 overflow-hidden truncate", etc);
+};
+var icon = (_, etc) => {
+  return mx18("col-start-1 grid place-items-center", etc);
+};
+var content4 = (_, etc) => {
+  return mx18("col-start-2 grid grid-cols-subgrid inline first:font-medium", etc);
+};
+var messageTheme = {
+  root: root11,
+  header: header3,
+  icon,
+  title: title3,
+  content: content4
+};
+
+// src/components/Panel/Panel.theme.ts
+import { mx as mx19 } from "@dxos/ui-theme";
+var sizes = {
+  lg: "h-(--dx-topbar-size)",
+  md: "h-(--dx-toolbar-size)",
+  sm: "h-(--dx-statusbar-size)"
+};
+var root12 = (_, ...etc) => mx19(
+  // prettier-ignore
+  "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) => mx19("[grid-area:toolbar]", "shrink-0", sizes[size], ...etc);
+var content5 = (_, ...etc) => mx19("[grid-area:content] min-h-0", ...etc);
+var statusbar = ({ size = "md" }, ...etc) => mx19("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
+var panelTheme = {
+  root: root12,
+  toolbar,
+  content: content5,
+  statusbar
+};
+
+// src/components/Popover/Popover.theme.ts
+import { mx as mx20, surfaceShadow as surfaceShadow3, surfaceZIndex as surfaceZIndex3 } from "@dxos/ui-theme";
+var content6 = ({ elevation }, ...etc) => mx20("dx-modal-surface border border-separator rounded-sm", surfaceShadow3({
+  elevation: "positioned"
+}), surfaceZIndex3({
+  elevation,
+  level: "menu"
+}), "dx-focus-ring", ...etc);
+var viewport2 = ({ constrainBlock, constrainInline }, ...etc) => mx20("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) => mx20("fill-separator", ...etc);
+var popoverTheme = {
+  content: content6,
+  viewport: viewport2,
+  arrow: arrow2
+};
+
+// src/components/ScrollArea/ScrollArea.theme.ts
+import { mx as mx21 } from "@dxos/ui-theme";
+var root13 = ({ orientation }, ...etc) => mx21(
+  // Expand
+  "dx-container",
+  orientation === "vertical" && "group/scroll-v flex flex-col",
+  orientation === "horizontal" && "group/scroll-h flex",
+  orientation === "all" && "group/scroll-all",
+  // 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 mx21(
+    "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: root13,
+  viewport: viewport3
+};
+
+// src/components/Select/Select.theme.ts
+import { mx as mx22, surfaceShadow as surfaceShadow4, surfaceZIndex as surfaceZIndex4 } from "@dxos/ui-theme";
+var content7 = ({ elevation }, ...etc) => {
+  return mx22("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) => mx22("grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
+var viewport4 = (_props, ...etc) => mx22(...etc);
+var item3 = (_props, ...etc) => mx22("flex items-center min-h-[2rem] px-2.5 py-1 gap-2", "text-base-foreground leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
+var itemIndicator = (_props, ...etc) => mx22("items-center", ...etc);
+var arrow3 = (_props, ...etc) => mx22("fill-separator", ...etc);
+var separator3 = (_props, ...etc) => mx22("self-stretch border-b my-1 border-separator", ...etc);
+var scrollButton = (_props, ...etc) => mx22("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
+var selectTheme = {
+  content: content7,
+  triggerButton,
+  viewport: viewport4,
+  item: item3,
+  itemIndicator,
+  arrow: arrow3,
+  separator: separator3,
+  scrollButton
+};
+
+// src/components/Separator/Separator.theme.ts
+import { mx as mx23 } from "@dxos/ui-theme";
+var root14 = ({ orientation, subdued }, ...etc) => mx23("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
+var separatorTheme = {
+  root: root14
+};
+
+// src/components/Skeleton/Skeleton.theme.ts
+import { mx as mx24 } from "@dxos/ui-theme";
+var root15 = ({ variant = "default" }, ...etc) => mx24("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
+var skeletonTheme = {
+  root: root15
+};
+
+// src/components/Splitter/Splitter.theme.ts
+import { mx as mx25 } from "@dxos/ui-theme";
+var root16 = (_props, ...etc) => mx25("relative h-full overflow-hidden", ...etc);
+var panel = (_props, ...etc) => mx25("absolute inset-x-0 flex flex-col overflow-hidden", ...etc);
+var splitterTheme = {
+  root: root16,
+  panel
+};
+
+// src/components/Status/Status.theme.ts
+import { mx as mx26 } from "@dxos/ui-theme";
+var root17 = ({ variant = "default" }, ...etc) => mx26("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) => mx26("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: root17,
+  bar
+};
+
+// src/components/Tag/Tag.theme.ts
+import { mx as mx27 } from "@dxos/ui-theme";
+var root18 = (_, ...etc) => mx27("dx-tag", ...etc);
+var tagTheme = {
+  root: root18
+};
+
+// src/components/Toast/Toast.theme.ts
+import { mx as mx28, surfaceShadow as surfaceShadow5 } from "@dxos/ui-theme";
+var viewport5 = (_props, ...etc) => mx28(
+  // TODO(burdon): block-end should take into account status bar.
+  "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)+1rem)] md:left-auto md:w-full md:max-w-sm",
+  "rounded-md flex flex-col gap-2",
+  ...etc
+);
+var root19 = (_props, ...etc) => mx28("dx-modal-surface rounded-md flex p-2 gap-2", 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 body3 = (_props, ...etc) => mx28("grow flex flex-col gap-1 justify-center pl-2", ...etc);
+var actions = (_props, ...etc) => mx28("shrink-0 flex flex-col gap-1 justify-center", ...etc);
+var title4 = ({ srOnly }, ...etc) => mx28("shrink-0 font-medium", srOnly && "sr-only", ...etc);
+var description4 = ({ srOnly }, ...etc) => mx28("text-description", "shrink-0", srOnly && "sr-only", ...etc);
+var toastTheme = {
+  viewport: viewport5,
+  root: root19,
+  body: body3,
+  title: title4,
+  description: description4,
+  actions
+};
+
+// src/components/Toolbar/Toolbar.theme.ts
+import { mx as mx29 } 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 root20 = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx29("bg-toolbar-surface dx-toolbar", 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 mx29("px-2 grow truncate items-center", ...etc);
+};
+var toolbarTheme = {
+  root: root20,
+  text: text2
+};
+
+// src/components/Tooltip/Tooltip.theme.ts
+import { mx as mx30 } from "@dxos/ui-theme";
+var arrow4 = (_props, ...etc) => mx30("fill-inverse-surface", ...etc);
+var tooltipTheme = {
+  content: tooltipContent,
+  arrow: arrow4
+};
+
+// src/components/Calendar/Calendar.theme.ts
+import { mx as mx31 } from "@dxos/ui-theme";
+var root21 = (_p, ...etc) => mx31("relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-foreground", ...etc);
+var nav = (_p, ...etc) => mx31("flex items-center justify-between pb-1", ...etc);
+var caption_label = (_p, ...etc) => mx31("flex-1 text-center text-sm font-medium", ...etc);
+var button_previous = (_p, ...etc) => mx31("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) => mx31("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) => mx31("w-full border-collapse", ...etc);
+var weekdays = (_p, ...etc) => mx31("", ...etc);
+var weekday = (_p, ...etc) => mx31("w-9 h-7 text-xs font-thin text-description", ...etc);
+var day = (_p, ...etc) => mx31(
+  "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",
+  "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: root21,
+  nav,
+  caption_label,
+  button_previous,
+  button_next,
+  month_grid,
+  weekdays,
+  weekday,
+  day
+};
+
+// src/components/DatePicker/DatePicker.theme.ts
+import { mx as mx32 } from "@dxos/ui-theme";
+var trigger = ({ hasValue }, ...etc) => mx32("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "bg-input-surface text-base-foreground", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
+var content8 = (_p, ...etc) => mx32("flex flex-col gap-2 p-2", ...etc);
+var timeField = (_p, ...etc) => mx32("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,
+  list: listTheme,
+  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,
+  treegrid: treegridTheme
+};
+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,
+  inputTextLabel,
+  mainPaddingTransitions,
+  mainIntrinsicSize,
+  bindTheme,
+  avatarTheme,
+  breadcrumbTheme,
+  buttonTheme,
+  iconButtonTheme,
+  cardTheme,
+  columnTheme,
+  dialogTheme,
+  focusTheme,
+  iconTheme,
+  inputTheme,
+  linkTheme,
+  listTheme,
+  treegridTheme,
+  mainTheme,
+  menuTheme,
+  messageTheme,
+  panelTheme,
+  popoverTheme,
+  scrollAreaTheme,
+  selectTheme,
+  separatorTheme,
+  skeletonTheme,
+  splitterTheme,
+  statusTheme,
+  tagTheme,
+  toastTheme,
+  toolbarTheme,
+  tooltipTheme,
+  defaultTheme,
+  defaultTx
+};
+//# sourceMappingURL=chunk-FFPB5LWE.mjs.map