@dxos/react-ui 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

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

@@ -18,7 +18,7 @@ import {
   useThemeContext,
   useTooltipContext,
   useTranslation
-} from "./chunk-QUD5P3RU.mjs";
+} from "./chunk-3JSJK2ZY.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -26,7 +26,7 @@ export * from "@dxos/react-hooks";
 export * from "@dxos/ui-types";
 
 // src/components/ThemeProvider/index.ts
-import { isLabel, toLocalizedString } from "@dxos/ui-types";
+import { isLabel, toLocalizedString } from "@dxos/ui-types/translations";
 
 // src/hooks/useDensityContext.ts
 import { useContext } from "react";
@@ -198,12 +198,19 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef4 } from "react";
 
 // src/components/Icon/Icon.tsx
-import React2, { forwardRef as forwardRef2, memo } from "react";
-var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
+import React2, { forwardRef as forwardRef2, memo, useMemo as useMemo3 } from "react";
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const spinDelay = useMemo3(() => synchronized ? `${-(Date.now() % 1e3)}ms` : void 0, [
+    synchronized
+  ]);
   const href = useIconHref(icon);
   return /* @__PURE__ */ React2.createElement("svg", {
     ...props,
+    style: {
+      ...style,
+      animationDelay: spinDelay
+    },
     className: tx("icon.root", {
       size
     }, classNames),
@@ -374,12 +381,13 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef6(({ noTooltip, tooltipSide, ...p
     ref: forwardedRef
   }));
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef6(({ size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React6.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", {
-      iconOnly
+      iconOnly,
+      square
     }, classNames),
     ref: forwardedRef
   }, icon && !iconEnd && /* @__PURE__ */ React6.createElement(Icon, {
@@ -459,7 +467,7 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, s
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import DOMPurify from "dompurify";
-import React19, { createContext as createContext3, forwardRef as forwardRef13, useContext as useContext3, useMemo as useMemo4 } from "react";
+import React19, { createContext as createContext3, forwardRef as forwardRef13, useContext as useContext3, useMemo as useMemo5 } from "react";
 import { composable as composable3, composableProps as composableProps7, iconSize, mx as mx6, slottable as slottable6 } from "@dxos/ui-theme";
 
 // src/primitives/Column/Column.tsx
@@ -771,7 +779,9 @@ var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) =
       const green = pixels[i + 1];
       const blue = pixels[i + 2];
       const alpha = pixels[i + 3];
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
       const max = Math.max(red, green, blue);
       const min = Math.min(red, green, blue);
       const saturation = max === 0 ? 0 : (max - min) / max;
@@ -799,15 +809,23 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
   const edgePixels = sampleSize * 4 - 4;
   for (let x = 0; x < sampleSize; x++) {
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
   for (let y = 1; y < sampleSize - 1; y++) {
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
   return edgeTransparentPixels / edgePixels > threshold;
 };
@@ -819,20 +837,7 @@ import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import React18, { forwardRef as forwardRef12 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { composable as composable2, composableProps as composableProps6, slottable as slottable5 } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "toolbar-menu.label": "Action menu",
-        "toolbar-drag-handle.label": "Drag to rearrange",
-        "toolbar-close.label": "Close"
-      }
-    }
-  }
-];
+import { translationKey } from "#translations";
 
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
@@ -932,7 +937,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React16, { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import React16, { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1063,7 +1068,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef10((props, forwardedRef) =>
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef2(false);
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  const computedCollisionBoundary = useMemo3(() => {
+  const computedCollisionBoundary = useMemo4(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
     return closestBoundary ? Array.isArray(collisionBoundary) ? [
       closestBoundary,
@@ -1490,23 +1495,23 @@ var Toolbar = {
 // src/components/Card/Card.tsx
 var CardContext = /* @__PURE__ */ createContext3({});
 var CARD_ROOT_NAME = "Card.Root";
-var CardRoot = slottable6(({ children, id, asChild, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+var CardRoot = composable3(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps7(props);
-  const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(Comp, {
+  return /* @__PURE__ */ React19.createElement(Column.Root, {
+    asChild: true,
+    gutter: density === "coarse" ? "lg" : "md",
+    classNames: tx("card.root", {
+      border,
+      fullWidth
+    }, className),
+    role: role ?? "group"
+  }, /* @__PURE__ */ React19.createElement("div", {
     ...rest,
     ...id && {
       "data-object-id": id
     },
-    role: role ?? "group",
-    className: tx("card.root", {
-      border,
-      fullWidth
-    }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(Column.Root, {
-    gutter: density === "coarse" ? "lg" : "md"
   }, children));
 });
 CardRoot.displayName = CARD_ROOT_NAME;
@@ -1570,7 +1575,6 @@ var CardIconBlock = /* @__PURE__ */ forwardRef13(({ classNames, children, paddin
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React19.createElement("div", {
     ...props,
-    role: "none",
     className: tx("card.icon-block", {
       padding
     }, classNames),
@@ -1670,12 +1674,11 @@ CardText.displayName = CARD_TEXT_NAME;
 var CARD_HTML_NAME = "Card.Html";
 var CardHtml = ({ html, variant = "default", ...props }) => {
   const { tx } = useThemeContext();
-  const sanitized = useMemo4(() => DOMPurify.sanitize(html), [
+  const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
     html
   ]);
   return /* @__PURE__ */ React19.createElement("div", {
     ...props,
-    role: "none",
     className: tx("card.text", {
       variant
     }),
@@ -1692,7 +1695,6 @@ var CardPoster = (props) => {
   const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
   if (props.image) {
     return /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
       className: "col-span-full"
     }, /* @__PURE__ */ React19.createElement(Image, {
       classNames: [
@@ -1823,7 +1825,6 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
   }, /* @__PURE__ */ React21.createElement("div", {
-    role: "none",
     className: mx7("flex gap-1 items-center", isCopied && inactiveLabelStyles)
   }, /* @__PURE__ */ React21.createElement("span", {
     className: "px-1"
@@ -1831,7 +1832,6 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     icon: "ph--copy--regular",
     size
   })), /* @__PURE__ */ React21.createElement("div", {
-    role: "none",
     className: mx7("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
   }, /* @__PURE__ */ React21.createElement("span", {
     className: "px-1"
@@ -2475,7 +2475,6 @@ var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React27.createElement("div", {
-    role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
       "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
@@ -2521,7 +2520,6 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement("div", {
-    role: "none",
     ...props,
     className: tx("list.item.openTrigger", {
       density
@@ -2923,21 +2921,11 @@ var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (_nextState) => {
-    log.warn("Not initialized", void 0, {
-      F: __dxlog_file,
-      L: 110,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 67, S: void 0 });
   },
   complementarySidebarState: "closed",
   setComplementarySidebarState: (_nextState) => {
-    log.warn("Not initialized", void 0, {
-      F: __dxlog_file,
-      L: 115,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    log.warn("Not initialized", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 71, S: void 0 });
   }
 });
 var useSidebars = (consumerName) => {
@@ -3126,7 +3114,9 @@ import { createContext as createContext9 } from "@radix-ui/react-context";
 import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
 import { Slot as Slot18 } from "@radix-ui/react-slot";
 import React33, { forwardRef as forwardRef21 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
 import { useId as useId3 } from "@dxos/react-hooks";
+import { translationKey as translationKey2 } from "#translations";
 var messageIcons = {
   success: "ph--check-circle--duotone",
   info: "ph--info--duotone",
@@ -3160,24 +3150,30 @@ var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef21(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+  const { t } = useTranslation4(translationKey2);
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Comp = asChild ? Slot18 : Primitive18.h2;
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React33.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React33.createElement("div", {
     className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? /* @__PURE__ */ React33.createElement("div", null) : /* @__PURE__ */ React33.createElement(Icon, {
-    icon,
-    classNames: tx("message.icon", {
+  }, icon && /* @__PURE__ */ React33.createElement("div", {
+    className: tx("message.icon", {
       valence
     })
-  }), /* @__PURE__ */ React33.createElement("span", {
+  }, /* @__PURE__ */ React33.createElement(Icon, {
+    icon
+  })), /* @__PURE__ */ React33.createElement("h2", {
     className: tx("message.title", {}, classNames)
-  }, children));
+  }, children), onClose && /* @__PURE__ */ React33.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("toolbar-close.label"),
+    onClick: onClose
+  }));
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "MessageContent";
@@ -3216,7 +3212,7 @@ import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
 import { Slot as Slot19 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React34, { forwardRef as forwardRef22, useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import React34, { forwardRef as forwardRef22, useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState9 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -3431,7 +3427,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   useFocusGuards();
-  const computedCollisionBoundary = useMemo5(() => {
+  const computedCollisionBoundary = useMemo6(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
     return closestBoundary ? Array.isArray(collisionBoundary) ? [
       closestBoundary,
@@ -3566,7 +3562,7 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
 import { createContext as createContext10 } from "@radix-ui/react-context";
 import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
 import { Slot as Slot20 } from "@radix-ui/react-slot";
-import React36, { useMemo as useMemo6 } from "react";
+import React36, { useMemo as useMemo7 } from "react";
 import { composableProps as composableProps12, scrollbar, slottable as slottable9 } from "@dxos/ui-theme";
 var SCROLLAREA_NAME = "ScrollArea";
 var [ScrollAreaProvider, useScrollAreaContext] = createContext10(SCROLLAREA_NAME);
@@ -3575,7 +3571,7 @@ var ScrollAreaRoot = slottable9(({ children, asChild, orientation = "vertical",
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps12(props);
   const Comp = asChild ? Slot20 : Primitive20.div;
-  const options = useMemo6(() => ({
+  const options = useMemo7(() => ({
     orientation,
     autoHide,
     centered,
@@ -3624,7 +3620,7 @@ var ScrollArea = {
 
 // src/components/ScrollContainer/ScrollContainer.tsx
 import { createContext as createContext11 } from "@radix-ui/react-context";
-import React37, { forwardRef as forwardRef24, useCallback as useCallback11, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo7, useRef as useRef6, useState as useState10 } from "react";
+import React37, { forwardRef as forwardRef24, useCallback as useCallback11, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo8, useRef as useRef6, useState as useState10 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useMergeRefs } from "@dxos/react-hooks";
@@ -3661,20 +3657,12 @@ var Root10 = /* @__PURE__ */ forwardRef24(({ children, pin, behavior: behaviorPr
   }, [
     behaviorProp
   ]);
-  const controller = useMemo7(() => ({
+  const controller = useMemo8(() => ({
     get viewport() {
       return scrollerRef.current;
     },
     scrollToTop: () => {
-      invariant(scrollerRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 108,
-        S: void 0,
-        A: [
-          "scrollerRef.current",
-          ""
-        ]
-      });
+      invariant(scrollerRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 54, S: void 0, A: ["scrollerRef.current", ""] });
       scrollerRef.current.scrollTo({
         top: 0,
         behavior: "smooth"
@@ -3785,13 +3773,12 @@ var FADE_NAME = "ScrollContainer.Fade";
 var Fade = () => {
   const { overflow } = useScrollContainerContext(FADE_NAME);
   return /* @__PURE__ */ React37.createElement("div", {
-    role: "none",
     "data-visible": overflow,
     className: mx9(
       // NOTE: Gradients may not be visible with dark reader extensions.
       "z-10 absolute top-0 inset-x-0 h-24 w-full",
       'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
-      "bg-gradient-to-b from-(--surface-bg) to-transparent pointer-events-none"
+      "bg-gradient-to-b from-(--color-base-surface) to-transparent pointer-events-none"
     )
   });
 };
@@ -3800,7 +3787,6 @@ var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 var ScrollDownButton = ({ classNames }) => {
   const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
   return /* @__PURE__ */ React37.createElement("div", {
-    role: "none",
     className: mx9("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
   }, /* @__PURE__ */ React37.createElement(IconButton, {
     variant: "primary",