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

package/dist/lib/node-esm/{chunk-YTLZCZ2M.mjs → chunk-NGKLIKP3.mjs}

@@ -1,8 +1,34 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
+// src/components/DensityProvider/DensityProvider.tsx
+import React, { createContext } from "react";
+var DensityContext = /* @__PURE__ */ createContext({
+  density: "fine"
+});
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React.createElement(DensityContext.Provider, {
+  value: {
+    density
+  }
+}, children);
+
+// src/components/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/hooks/useElevationContext.ts
 import { useContext as useContext3 } from "react";
 
+// src/components/ThemeProvider/ThemeProvider.tsx
+import { createKeyborg } from "keyborg";
+import React4, { createContext as createContext4, useEffect as useEffect2, useMemo } from "react";
+
 // src/hooks/useThemeContext.ts
 import { useContext } from "react";
 import { raise } from "@dxos/debug";
@@ -34,7 +60,7 @@ var useSafeArea = () => {
 // src/components/ThemeProvider/TranslationsProvider.tsx
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { Suspense, createContext, useContext as useContext2, useEffect, useState as useState2 } from "react";
+import React3, { Suspense, createContext as createContext3, useContext as useContext2, useEffect, useState as useState2 } from "react";
 import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
@@ -54,7 +80,7 @@ void i18Next.use(initReactI18next).init({
     escapeValue: false
   }
 });
-var TranslationsContext = /* @__PURE__ */ createContext({
+var TranslationsContext = /* @__PURE__ */ createContext3({
   appNs: initialNs,
   dtLocale: initialDtLocale
 });
@@ -83,16 +109,66 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
   }, [
     resourceExtensions
   ]);
-  return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
+  return /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
     value: {
       appNs: appNs ?? initialNs,
       dtLocale: dtLocale ?? initialDtLocale
     }
-  }, /* @__PURE__ */ React.createElement(Suspense, {
+  }, /* @__PURE__ */ React3.createElement(Suspense, {
     fallback
   }, loaded ? children : fallback));
 };
 
+// src/util/hasIosKeyboard.ts
+var hasIosKeyboard = () => {
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};
+
+// src/components/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 = "fine", 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";
@@ -107,7 +183,7 @@ 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 React2, { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
+import React5, { forwardRef, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -121,20 +197,20 @@ var TooltipProvider = (props) => {
   const isOpenDelayedRef = useRef(true);
   const isPointerInTransitRef = useRef(false);
   const skipDelayTimerRef = useRef(0);
-  useEffect2(() => {
+  useEffect3(() => {
     const skipDelayTimer = skipDelayTimerRef.current;
     return () => window.clearTimeout(skipDelayTimer);
   }, []);
   const popperScope = usePopperScope(__scopeTooltip);
   const [trigger, setTrigger] = useState3(null);
-  const [content, setContent] = useState3("");
+  const [content, setContent] = useState3(null);
   const [side, setSide] = useState3(void 0);
   const triggerRef = useRef(trigger);
-  const handleTriggerChange = useCallback2((nextTrigger) => {
+  const handleTriggerChange = useCallback2((nextTrigger, nextContent, nextSide) => {
     setTrigger(nextTrigger);
     triggerRef.current = nextTrigger;
-    setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
-    setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
+    setContent(nextContent ?? null);
+    setSide(nextSide);
   }, []);
   const contentId = useId();
   const openTimerRef = useRef(0);
@@ -158,7 +234,7 @@ var TooltipProvider = (props) => {
     defaultProp: defaultOpen,
     onChange: handleOpenChange
   });
-  const stateAttribute = useMemo(() => {
+  const stateAttribute = useMemo2(() => {
     return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
   }, [
     open
@@ -189,7 +265,7 @@ var TooltipProvider = (props) => {
     delayDuration,
     setOpen
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (openTimerRef.current) {
         window.clearTimeout(openTimerRef.current);
@@ -199,7 +275,7 @@ var TooltipProvider = (props) => {
   }, []);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
-  return /* @__PURE__ */ React2.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React2.createElement(TooltipContextProvider, {
+  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React5.createElement(TooltipContextProvider, {
     scope: __scopeTooltip,
     contentId,
     open,
@@ -235,21 +311,21 @@ var TooltipProvider = (props) => {
     onPointerInTransitChange: useCallback2((inTransit) => {
       isPointerInTransitRef.current = inTransit;
     }, [])
-  }, /* @__PURE__ */ React2.createElement(TooltipContent, {
+  }, /* @__PURE__ */ React5.createElement(TooltipContent, {
     side,
-    className: tx("tooltip.content", "tooltip", {
+    className: tx("tooltip.content", {
       elevation
     })
-  }, content, /* @__PURE__ */ React2.createElement(TooltipArrow, {
-    className: tx("tooltip.arrow", "tooltip__arrow")
-  })), /* @__PURE__ */ React2.createElement(TooltipVirtualTrigger, {
+  }, content, /* @__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__ */ React2.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope,
     virtualRef
@@ -272,18 +348,16 @@ var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const isPointerDownRef = useRef(false);
   const hasPointerMoveOpenedRef = useRef(false);
   const handlePointerUp = useCallback2(() => isPointerDownRef.current = false, []);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => document.removeEventListener("pointerup", handlePointerUp);
   }, [
     handlePointerUp
   ]);
-  return /* @__PURE__ */ React2.createElement(Primitive.button, {
+  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,
-    "data-tooltip-content": content,
-    "data-tooltip-side": side,
     ...triggerProps,
     ref: composedRefs,
     onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
@@ -295,7 +369,7 @@ var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         if (event.defaultPrevented) {
           return;
         }
-        context.onTriggerChange(ref.current);
+        context.onTriggerChange(ref.current, content, side);
         context.onTriggerEnter();
         hasPointerMoveOpenedRef.current = true;
       }
@@ -326,12 +400,12 @@ var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
 var TooltipPortal = (props) => {
   const { __scopeTooltip, forceMount, children, container } = props;
   const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
-  return /* @__PURE__ */ React2.createElement(PortalProvider, {
+  return /* @__PURE__ */ React5.createElement(PortalProvider, {
     scope: __scopeTooltip,
     forceMount
-  }, /* @__PURE__ */ React2.createElement(Presence, {
+  }, /* @__PURE__ */ React5.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React2.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React5.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
@@ -342,13 +416,13 @@ 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__ */ React2.createElement(Presence, {
+  return /* @__PURE__ */ React5.createElement(Presence, {
     present: forceMount || context.open
-  }, context.disableHoverableContent ? /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
+  }, context.disableHoverableContent ? /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
     side,
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React2.createElement(TooltipContentHoverable, {
+  }) : /* @__PURE__ */ React5.createElement(TooltipContentHoverable, {
     side,
     ...contentProps,
     ref: forwardedRef
@@ -386,12 +460,12 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
   }, [
     onPointerInTransitChange
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => handleRemoveGraceArea();
   }, [
     handleRemoveGraceArea
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (trigger && content) {
       const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
       const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
@@ -408,7 +482,7 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
     handleCreateGraceArea,
     handleRemoveGraceArea
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (pointerGraceArea) {
       const handleTrackPointerGrace = (event) => {
         const target = event.target;
@@ -435,7 +509,7 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
     onClose,
     handleRemoveGraceArea
   ]);
-  return /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
+  return /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
     ...props,
     ref: composedRefs
   });
@@ -448,13 +522,13 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
   const popperScope = usePopperScope(__scopeTooltip);
   const { onClose } = context;
-  useEffect2(() => {
+  useEffect3(() => {
     document.addEventListener(TOOLTIP_OPEN, onClose);
     return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
   }, [
     onClose
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (context.trigger) {
       const handleScroll = (event) => {
         const target = event.target;
@@ -473,14 +547,14 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     context.trigger,
     onClose
   ]);
-  return /* @__PURE__ */ React2.createElement(DismissableLayer, {
+  return /* @__PURE__ */ React5.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents: false,
     onEscapeKeyDown,
     onPointerDownOutside,
     onFocusOutside: (event) => event.preventDefault(),
     onDismiss: onClose
-  }, /* @__PURE__ */ React2.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React5.createElement(PopperPrimitive.Content, {
     "data-state": context.stateAttribute,
     ...popperScope,
     ...contentProps,
@@ -496,10 +570,10 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
       }
     }
-  }, /* @__PURE__ */ React2.createElement(Slottable, null, children), /* @__PURE__ */ React2.createElement(VisuallyHiddenContentContextProvider, {
+  }, /* @__PURE__ */ React5.createElement(Slottable, null, children), /* @__PURE__ */ React5.createElement(VisuallyHiddenContentContextProvider, {
     scope: __scopeTooltip,
     isInside: true
-  }, /* @__PURE__ */ React2.createElement(VisuallyHiddenPrimitive.Root, {
+  }, /* @__PURE__ */ React5.createElement(VisuallyHiddenPrimitive.Root, {
     id: context.contentId,
     role: "tooltip"
   }, ariaLabel || children))));
@@ -510,7 +584,7 @@ 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__ */ React2.createElement(PopperPrimitive.Arrow, {
+  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React5.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     ref: forwardedRef
@@ -675,77 +749,73 @@ var Tooltip = {
   Trigger: TooltipTrigger
 };
 
-// src/components/ThemeProvider/ThemeProvider.tsx
-import { createKeyborg } from "keyborg";
-import React5, { createContext as createContext4, useEffect as useEffect3, useMemo as useMemo2 } from "react";
-
-// src/util/hasIosKeyboard.ts
-var hasIosKeyboard = () => {
-  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
-};
-
-// src/components/DensityProvider/DensityProvider.tsx
-import React3, { createContext as createContext2 } from "react";
-var DensityContext = /* @__PURE__ */ createContext2({
-  density: "fine"
-});
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React3.createElement(DensityContext.Provider, {
-  value: {
-    density
-  }
-}, children);
-
-// src/components/ElevationProvider/ElevationProvider.tsx
-import React4, { createContext as createContext3 } from "react";
-var ElevationContext = /* @__PURE__ */ createContext3({
-  elevation: "base"
-});
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React4.createElement(ElevationContext.Provider, {
-  value: {
-    elevation
+// src/components/ErrorFallback/ErrorStack.tsx
+import ErrorStackParser from "error-stack-parser";
+import React6 from "react";
+import { mx } from "@dxos/ui-theme";
+var parseCaptureOwnerStack = (stack) => {
+  if (stack == null || stack.length === 0) {
+    return null;
   }
-}, children);
-
-// src/components/ThemeProvider/ThemeProvider.tsx
-var ThemeContext = /* @__PURE__ */ createContext4(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
-  useEffect3(() => {
-    if (document.defaultView) {
-      const kb = createKeyborg(document.defaultView);
-      kb.subscribe(handleInputModalityChange);
-      return () => kb.unsubscribe(handleInputModalityChange);
+  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;
     }
-  }, []);
-  const safeAreaPadding = useSafeArea();
-  const contextValue = useMemo2(() => ({
-    tx,
-    themeMode,
-    hasIosKeyboard: hasIosKeyboard(),
-    safeAreaPadding,
-    ...rest
-  }), [
-    tx,
-    themeMode,
-    safeAreaPadding,
-    rest
-  ]);
-  return /* @__PURE__ */ React5.createElement(ThemeContext.Provider, {
-    value: contextValue
-  }, /* @__PURE__ */ React5.createElement(TranslationsProvider, {
-    fallback,
-    resourceExtensions,
-    appNs
-  }, /* @__PURE__ */ React5.createElement(ElevationProvider, {
-    elevation: "base"
-  }, /* @__PURE__ */ React5.createElement(DensityProvider, {
-    density: rootDensity
-  }, children))));
+  }
 };
-var handleInputModalityChange = (isUsingKeyboard) => {
-  if (isUsingKeyboard) {
-    document.body.setAttribute("data-is-keyboard", "true");
-  } else {
-    document.body.removeAttribute("data-is-keyboard");
+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((frame, i) => {
+    const isLast = i === frames.length - 1;
+    const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
+    const name = frame.functionName ?? "<anonymous>";
+    return /* @__PURE__ */ React6.createElement("div", {
+      key: i,
+      className: mx("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: mx("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"
+    }, name) : /* @__PURE__ */ React6.createElement("span", {
+      className: "text-subdued truncate self-center"
+    }, name), /* @__PURE__ */ React6.createElement("span", {
+      className: "text-xs text-subdued truncate self-center"
+    }, local?.fileName ?? ""), /* @__PURE__ */ React6.createElement("span", {
+      className: "text-xs text-subdued text-right self-center"
+    }, local ? `${frame.lineNumber}:${frame.columnNumber}` : ""));
+  }));
+};
+var parseLocalFrame = (fileUrl, line, col) => {
+  try {
+    const { pathname } = new URL(fileUrl);
+    if (!pathname.startsWith("/@fs/")) {
+      return void 0;
+    }
+    const localPath = pathname.slice(4);
+    return {
+      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
+      fileName: pathname.split("/").pop() ?? localPath
+    };
+  } catch {
+    return void 0;
   }
 };
 
@@ -756,21 +826,23 @@ var useElevationContext = (propsElevation) => {
 };
 
 export {
+  DensityContext,
+  DensityProvider,
+  ElevationContext,
+  ElevationProvider,
   useElevationContext,
   useThemeContext,
   initialSafeArea,
   useSafeArea,
   TranslationsContext,
   useTranslation,
+  hasIosKeyboard,
+  ThemeContext,
+  ThemeProvider,
   createTooltipScope,
   useTooltipContext,
   Tooltip,
-  hasIosKeyboard,
-  DensityContext,
-  DensityProvider,
-  ElevationContext,
-  ElevationProvider,
-  ThemeContext,
-  ThemeProvider
+  parseCaptureOwnerStack,
+  ErrorStack
 };
-//# sourceMappingURL=chunk-YTLZCZ2M.mjs.map
+//# sourceMappingURL=chunk-NGKLIKP3.mjs.map