@dxos/plugin-thread 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

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

@@ -1,1094 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  getMessageMetadata
-} from "./chunk-ABUFOZVX.mjs";
-import {
-  command
-} from "./chunk-A3SWGVF3.mjs";
-import {
-  useDebugMode,
-  useOnEditAnalytics,
-  useStatus
-} from "./chunk-EYWLIDLC.mjs";
-import {
-  ThreadCapabilities
-} from "./chunk-6ZJGXE4F.mjs";
-import {
-  meta
-} from "./chunk-JZI7AFD6.mjs";
-
-// src/components/Call/Call.tsx
-import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
-import React9 from "react";
-import { useCapability as useCapability3 } from "@dxos/app-framework/ui";
-
-// src/components/Media/AudioStream.tsx
-import React, { useEffect, useRef } from "react";
-var AudioStream = ({ tracks }) => {
-  const mediaStreamRef = useRef(new MediaStream());
-  const ref = useRef(null);
-  useEffect(() => {
-    const audio = ref.current;
-    if (!audio) {
-      return;
-    }
-    const mediaStream = mediaStreamRef.current;
-    audio.srcObject = mediaStream;
-  }, []);
-  const resetSrcObject = () => {
-    const audio = ref.current;
-    const mediaStream = mediaStreamRef.current;
-    if (!audio || !mediaStream) {
-      return;
-    }
-    audio.addEventListener("canplay", () => audio.play(), {
-      once: true
-    });
-    audio.srcObject = mediaStream;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("audio", {
-    ref,
-    autoPlay: true
-  }), tracks.map((track) => /* @__PURE__ */ React.createElement(AudioTrack, {
-    key: track.id,
-    track,
-    mediaStream: mediaStreamRef.current,
-    resetSrcObject
-  })));
-};
-var AudioTrack = ({ track, mediaStream, resetSrcObject }) => {
-  useEffect(() => {
-    const currentTrack = track;
-    mediaStream.addTrack(currentTrack);
-    resetSrcObject();
-    return () => {
-      mediaStream.removeTrack(currentTrack);
-      resetSrcObject();
-    };
-  }, [
-    track,
-    mediaStream
-  ]);
-  return null;
-};
-
-// src/components/Media/VideoObject.tsx
-import React2, { forwardRef, memo, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { mx } from "@dxos/ui-theme";
-var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
-  const internalRef = useRef2(null);
-  useEffect2(() => {
-    const video = internalRef.current;
-    if (video && videoStream) {
-      video.srcObject = videoStream;
-      video.setAttribute("autoplay", "true");
-      video.setAttribute("playsinline", "true");
-    }
-  }, [
-    videoStream,
-    internalRef.current
-  ]);
-  return /* @__PURE__ */ React2.createElement("video", {
-    className: mx("w-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
-    ref: (v) => {
-      internalRef.current = v;
-      if (ref === null) {
-        return;
-      }
-      if (typeof ref === "function") {
-        ref(v);
-      } else {
-        ref.current = v;
-      }
-    },
-    ...rest
-  });
-}));
-VideoObject.displayName = "VideoObject";
-
-// src/components/Participant/Participant.tsx
-import { useAtomValue } from "@effect-atom/atom-react";
-import React6, { memo as memo2, useMemo as useMemo2 } from "react";
-import { useCapability } from "@dxos/app-framework/ui";
-
-// src/components/ResponsiveGrid/ResponsivePanel.tsx
-import React3 from "react";
-import { mx as mx2 } from "@dxos/ui-theme";
-var ResponsivePanel = ({ children }) => {
-  return (
-    // Outer container that takes full size of parent.
-    /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: "dx-expander relative flex"
-    }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: "absolute inset-0 flex justify-center items-center"
-    }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: mx2("max-h-full max-w-full w-auto h-auto aspect-video")
-    }, children)))
-  );
-};
-
-// src/components/ResponsiveGrid/ResponsiveGrid.tsx
-import React4, { useCallback, useEffect as useEffect3, useLayoutEffect, useMemo, useState } from "react";
-import { useResizeDetector } from "react-resize-detector";
-import { invariant } from "@dxos/invariant";
-import { mx as mx3 } from "@dxos/ui-theme";
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveGrid.tsx";
-var ASPECT_RATIO = 16 / 9;
-var MIN_GALLERY_HEIGHT = 250;
-var DEFAULT_GAP = 8;
-var maxImageSize = "w-[2560px] h-[1440px]";
-var defaultGetId = (item) => item.id;
-var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = defaultGetId, items, pinned, autoHideGallery = false, debug, onPinnedChange }) => {
-  const { width: containerWidth = 0, height: containerHeight = 0, ref: containerRef } = useResizeDetector({
-    refreshRate: 100
-  });
-  const [dividerHeight, setDividerHeight] = useState(0);
-  useEffect3(() => {
-    if (containerWidth && containerHeight) {
-      const { height: height2 } = fitAspectRatio(containerWidth, containerHeight, ASPECT_RATIO);
-      setDividerHeight(Math.min(height2, containerHeight - MIN_GALLERY_HEIGHT));
-    }
-  }, [
-    containerWidth,
-    containerHeight
-  ]);
-  const pinnedItem = useMemo(() => items.find((item) => getId2(item) === pinned), [
-    items,
-    pinned
-  ]);
-  const mainItems = useMemo(() => items.filter((item) => getId2(item) !== pinned), [
-    items,
-    pinned
-  ]);
-  const hideGallery = autoHideGallery && pinnedItem !== void 0;
-  const [{ time, columns, cellWidth }, setLayout] = useState({
-    time: 0,
-    columns: 0,
-    cellWidth: 0
-  });
-  const { width = 0, height = 0, ref: gridContainerRef } = useResizeDetector({
-    refreshRate: 200
-  });
-  useEffect3(() => {
-    if (containerHeight && width && height) {
-      const layout = calculateLayout(width, height, mainItems.length, gap);
-      setLayout({
-        time: Date.now(),
-        ...layout
-      });
-    }
-  }, [
-    containerHeight,
-    width,
-    height,
-    mainItems.length,
-    gap,
-    pinned
-  ]);
-  const [bounds, setBounds] = useState([]);
-  useLayoutEffect(() => {
-    if (!hideGallery && !gridContainerRef.current || !containerHeight) {
-      return;
-    }
-    const t = setTimeout(() => {
-      setBounds(items.filter((item) => !hideGallery || item === pinnedItem).map((item) => {
-        invariant(containerRef.current, void 0, {
-          F: __dxlog_file,
-          L: 117,
-          S: void 0,
-          A: [
-            "containerRef.current",
-            ""
-          ]
-        });
-        const el = containerRef.current.querySelector(`[data-grid-item="${getId2(item)}"]`);
-        if (!el) {
-          return null;
-        }
-        const bounds2 = getRelativeBounds(containerRef.current, el);
-        return [
-          item,
-          bounds2
-        ];
-      }).filter((item) => item !== null));
-    });
-    return () => clearTimeout(t);
-  }, [
-    containerHeight,
-    items,
-    pinnedItem,
-    hideGallery,
-    time
-  ]);
-  const handleClick = useCallback((item) => onPinnedChange?.(getId2(item) === pinned ? void 0 : getId2(item)), [
-    pinned,
-    onPinnedChange
-  ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref: containerRef,
-    className: mx3("dx-expander relative", classNames)
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "absolute inset-0 flex flex-col grow gap-2"
-  }, pinnedItem && /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "h-full"),
-    style: hideGallery ? {} : {
-      height: dividerHeight
-    }
-  }, /* @__PURE__ */ React4.createElement(SoloItem, {
-    id: getId2(pinnedItem),
-    debug
-  })), !hideGallery && /* @__PURE__ */ React4.createElement("div", {
-    ref: gridContainerRef,
-    className: "flex grow-[1] overflow-hidden justify-center items-center",
-    style: hideGallery ? {} : {
-      minHeight: MIN_GALLERY_HEIGHT
-    }
-  }, mainItems.length === 1 && /* @__PURE__ */ React4.createElement("div", {
-    style: {
-      width: cellWidth
-    },
-    className: "flex h-full"
-  }, /* @__PURE__ */ React4.createElement(SoloItem, {
-    id: getId2(mainItems[0]),
-    debug
-  })), mainItems.length > 1 && columns > 0 && /* @__PURE__ */ React4.createElement("div", {
-    role: "grid",
-    style: {
-      display: "grid",
-      gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
-      gap: `${gap}px`
-    }
-  }, mainItems.map((item) => /* @__PURE__ */ React4.createElement("div", {
-    key: getId2(item),
-    "data-grid-item": getId2(item),
-    className: mx3("aspect-video max-h-full max-w-full w-auto h-auto", debug && "border border-primary-500")
-  }))))), /* @__PURE__ */ React4.createElement("div", {
-    className: mx3(debug && "opacity-10")
-  }, bounds.map(([item, bounds2]) => /* @__PURE__ */ React4.createElement(Cell, {
-    key: getId2(item),
-    classNames: "absolute transition-all duration-500",
-    item,
-    style: bounds2,
-    pinned: getId2(item) === pinned,
-    onClick: items.length > 1 ? handleClick : void 0
-  }))));
-};
-var SoloItem = ({ debug, id }) => {
-  return /* @__PURE__ */ React4.createElement(ResponsivePanel, null, /* @__PURE__ */ React4.createElement("div", {
-    "data-grid-item": id,
-    className: mx3("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
-  }, /* @__PURE__ */ React4.createElement("img", {
-    alt: "placeholder video",
-    className: mx3("opacity-0", maxImageSize)
-  })));
-};
-var getRelativeBounds = (container, el) => {
-  const containerRect = container.getBoundingClientRect();
-  const elementRect = el.getBoundingClientRect();
-  return {
-    top: elementRect.top - containerRect.top,
-    left: elementRect.left - containerRect.left,
-    width: elementRect.width,
-    height: elementRect.height
-  };
-};
-var calculateLayout = (containerWidth, containerHeight, count, gap, aspectRatio = ASPECT_RATIO) => {
-  if (count === 0) {
-    return {
-      columns: 1,
-      cellWidth: 1
-    };
-  }
-  let minWastedSpace = Infinity;
-  let bestColumns = 1;
-  let cellWidth = 0;
-  for (let rows = 1; rows <= count; rows++) {
-    const cols = Math.ceil(count / rows);
-    const { width: itemWidth, height: itemHeight } = fitItemsToGrid(containerWidth, containerHeight, cols, rows, aspectRatio, gap);
-    const usedWidth = itemWidth * cols + gap * cols - 1;
-    const usedHeight = itemHeight * rows + gap * rows - 1;
-    const wastedSpace = containerWidth * containerHeight - usedWidth * usedHeight;
-    if (wastedSpace < minWastedSpace) {
-      minWastedSpace = wastedSpace;
-      bestColumns = cols;
-      cellWidth = itemWidth;
-    }
-  }
-  return {
-    columns: bestColumns,
-    cellWidth
-  };
-};
-var fitItemsToGrid = (outerWidth, outerHeight, numCols, numRows, aspectRatio, gap) => {
-  const availableWidth = outerWidth - gap * (numCols - 1);
-  const availableHeight = outerHeight - gap * (numRows - 1);
-  const maxCellWidth = availableWidth / numCols;
-  const maxCellHeight = availableHeight / numRows;
-  return fitAspectRatio(maxCellWidth, maxCellHeight, aspectRatio);
-};
-var fitAspectRatio = (outerWidth, outerHeight, aspectRatio) => {
-  if (outerWidth <= 0 || outerHeight <= 0 || aspectRatio <= 0) {
-    return {
-      width: 0,
-      height: 0
-    };
-  }
-  let width = outerWidth;
-  let height = width / aspectRatio;
-  if (height > outerHeight) {
-    height = outerHeight;
-    width = height * aspectRatio;
-  }
-  return {
-    width,
-    height
-  };
-};
-
-// src/components/ResponsiveGrid/ResponsiveGridItem.tsx
-import React5, { useEffect as useEffect4, useState as useState2 } from "react";
-import { Icon, IconButton, useTranslation } from "@dxos/react-ui";
-import { Waveform } from "@dxos/react-ui-sfx";
-import { groupHoverControlItemWithTransition, mx as mx4 } from "@dxos/ui-theme";
-var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinned, screenshare, video, mute, wave, speaking, onClick }) => {
-  const { t } = useTranslation(meta.id);
-  const iconProps = {
-    wave: {
-      icon: "ph--hand-waving--duotone",
-      label: t("icon wave"),
-      classNames: "animate-pulse bg-orange-500"
-    },
-    mute: {
-      icon: "ph--microphone-slash--regular",
-      label: t("icon muted")
-    }
-  };
-  const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : void 0;
-  const [speakingIndicator, setSpeakingIndicator] = useState2(speaking);
-  useEffect4(() => {
-    if (speaking) {
-      setSpeakingIndicator(true);
-    } else {
-      const timeout = setTimeout(() => {
-        setSpeakingIndicator(false);
-      }, 1e3);
-      return () => clearTimeout(timeout);
-    }
-  }, [
-    speaking
-  ]);
-  return /* @__PURE__ */ React5.createElement("div", {
-    className: mx4("dx-expander relative group", "rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500", speakingIndicator ? "outline-green-500" : !video && "outline-separator", classNames),
-    style
-  }, children, onClick && /* @__PURE__ */ React5.createElement("div", {
-    className: "z-10 absolute top-1 right-1 flex"
-  }, /* @__PURE__ */ React5.createElement(IconButton, {
-    classNames: mx4("p-1 min-h-1 rounded-sm", groupHoverControlItemWithTransition),
-    iconOnly: true,
-    icon: pinned ? "ph--x--regular" : "ph--arrows-out--regular",
-    size: pinned ? 5 : 4,
-    label: pinned ? t("icon unpin") : t("icon pin"),
-    onClick: () => onClick?.(item)
-  })), name && /* @__PURE__ */ React5.createElement("div", {
-    className: "z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center"
-  }, screenshare && /* @__PURE__ */ React5.createElement(Icon, {
-    icon: "ph--broadcast--regular",
-    size: pinned ? 5 : 4
-  }), /* @__PURE__ */ React5.createElement("div", {
-    className: mx4("bg-neutral-800 text-neutral-100 py-0.5 truncate rounded-sm", pinned ? "px-2" : "px-1 text-xs")
-  }, name)), /* @__PURE__ */ React5.createElement("div", {
-    className: "z-10 absolute bottom-1 left-1 flex"
-  }, speaking && /* @__PURE__ */ React5.createElement(Waveform, {
-    active: true,
-    size: pinned ? 5 : 4
-  }) || props && /* @__PURE__ */ React5.createElement(IconButton, {
-    classNames: mx4("p-1 min-h-1 rounded-sm", props?.classNames),
-    icon: props?.icon,
-    label: props?.label,
-    size: pinned ? 5 : 4,
-    iconOnly: true
-  })));
-};
-
-// src/components/Participant/Participant.tsx
-var SCREENSHARE_SUFFIX = "_screenshare";
-var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const self = useAtomValue(call.selfAtom);
-  const media = useAtomValue(call.mediaAtom);
-  const isSelf = self.id !== void 0 && user.id !== void 0 && user.id.startsWith(self.id);
-  const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
-  const pulledVideoStream = useMemo2(() => {
-    if (isSelf) {
-      return void 0;
-    }
-    const trackName = isScreenshare && user.tracks?.screenshareEnabled ? user.tracks?.screenshare : !isScreenshare && user.tracks?.videoEnabled ? user.tracks?.video : void 0;
-    return trackName ? media.pulledVideoStreams[trackName]?.stream : void 0;
-  }, [
-    isSelf,
-    isScreenshare,
-    media.pulledVideoStreams,
-    user.tracks?.screenshare,
-    user.tracks?.video,
-    user.tracks?.screenshareEnabled,
-    user.tracks?.videoEnabled
-  ]);
-  const videoStream = useMemo2(() => {
-    if (isSelf) {
-      return isScreenshare ? media.screenshareVideoStream : media.videoStream;
-    }
-    return pulledVideoStream;
-  }, [
-    isSelf,
-    isScreenshare,
-    media.videoStream,
-    media.screenshareVideoStream,
-    pulledVideoStream
-  ]);
-  return /* @__PURE__ */ React6.createElement(ResponsiveGridItem, {
-    ...props,
-    item: user,
-    name: user.name,
-    self: isSelf,
-    screenshare: !!media.screenshareVideoStream,
-    video: media.videoEnabled,
-    mute: user ? !user.tracks?.audioEnabled : false,
-    wave: user.raisedHand,
-    speaking: user.speaking,
-    debug
-  }, /* @__PURE__ */ React6.createElement(VideoObject, {
-    videoStream,
-    flip: isSelf && !isScreenshare,
-    contain: !!isScreenshare,
-    classNames: "rounded-md"
-  }));
-});
-Participant.displayName = "Participant";
-
-// src/components/Participant/ParticipantGrid.tsx
-import React7, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
-var getId = (user) => user.id;
-var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
-  const [pinned, setPinned] = useState3();
-  const allUsers = useMemo3(() => {
-    const allUsers2 = [];
-    users.forEach((user) => {
-      if (!user.joined) {
-        return;
-      }
-      allUsers2.push({
-        ...user,
-        isSelf: user.id === self.id
-      });
-      if (user.tracks?.screenshareEnabled) {
-        const screenshare = {
-          ...user,
-          id: user.id + SCREENSHARE_SUFFIX,
-          tracks: {
-            ...user.tracks,
-            video: user.tracks.screenshare,
-            videoEnabled: user.tracks.screenshareEnabled
-          }
-        };
-        allUsers2.push(screenshare);
-      }
-    });
-    return allUsers2;
-  }, [
-    self,
-    users
-  ]);
-  useEffect5(() => {
-    if (pinned) {
-      if (!allUsers.find((user) => user.id === pinned)) {
-        setPinned(void 0);
-      }
-    }
-  }, [
-    pinned,
-    allUsers
-  ]);
-  const sortedUsers = allUsers.sort((a, b) => {
-    if (a.isSelf) {
-      return 1;
-    } else if (b.isSelf) {
-      return -1;
-    } else if (a.tracks?.screenshareEnabled) {
-      return -1;
-    } else if (b.tracks?.screenshareEnabled) {
-      return 1;
-    } else {
-      return 0;
-    }
-  });
-  return /* @__PURE__ */ React7.createElement(ResponsiveGrid, {
-    classNames,
-    Cell: Participant,
-    debug,
-    getId,
-    items: sortedUsers,
-    pinned,
-    autoHideGallery: fullscreen,
-    onPinnedChange: setPinned
-  });
-};
-
-// src/components/Call/Toolbar.tsx
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React8 from "react";
-import { useCapability as useCapability2 } from "@dxos/app-framework/ui";
-import { useAppGraph } from "@dxos/app-toolkit/ui";
-import { Obj } from "@dxos/echo";
-import { Node, useActionRunner } from "@dxos/plugin-graph";
-import { useActions, useNode } from "@dxos/plugin-graph";
-import { Icon as Icon2, IconButton as IconButton2, Toolbar as NaturalToolbar, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { groupHoverControlItemWithTransition as groupHoverControlItemWithTransition2, mx as mx5 } from "@dxos/ui-theme";
-var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
-  const { t } = useTranslation2(meta.id);
-  const { graph } = useAppGraph();
-  const runAction = useActionRunner();
-  const call = useCapability2(ThreadCapabilities.CallManager);
-  const media = useAtomValue2(call.mediaAtom);
-  const joined = useAtomValue2(call.joinedAtom);
-  const raisedHand = useAtomValue2(call.raisedHandAtom);
-  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
-  const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === "toolbar");
-  const isScreensharing = media.screenshareTrack !== void 0;
-  const canSharescreen = typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getDisplayMedia !== void 0;
-  return /* @__PURE__ */ React8.createElement("div", {
-    className: mx5("z-20 flex justify-center m-8", autoHideControls && groupHoverControlItemWithTransition2)
-  }, /* @__PURE__ */ React8.createElement(NaturalToolbar.Root, {
-    classNames: [
-      "p-2 bg-modal-surface rounded-md shadow-md",
-      classNames
-    ]
-  }, /* @__PURE__ */ React8.createElement(ToggleButton, {
-    active: media.audioEnabled,
-    state: {
-      on: {
-        icon: "ph--microphone--regular",
-        label: t("mic off"),
-        onClick: () => call.turnAudioOff(),
-        classNames: "bg-call-active"
-      },
-      off: {
-        icon: "ph--microphone-slash--duotone",
-        label: t("mic on"),
-        onClick: () => call.turnAudioOn()
-      }
-    }
-  }), /* @__PURE__ */ React8.createElement(ToggleButton, {
-    active: media.videoEnabled,
-    state: {
-      on: {
-        icon: "ph--video-camera--regular",
-        label: t("camera off"),
-        onClick: () => call.turnVideoOff()
-      },
-      off: {
-        icon: "ph--video-camera-slash--duotone",
-        label: t("camera on"),
-        onClick: () => call.turnVideoOn()
-      }
-    }
-  }), participants !== void 0 && /* @__PURE__ */ React8.createElement("div", {
-    className: "flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued"
-  }, /* @__PURE__ */ React8.createElement(Icon2, {
-    icon: "ph--users--regular"
-  }), /* @__PURE__ */ React8.createElement("div", null, participants)) || /* @__PURE__ */ React8.createElement(NaturalToolbar.Separator, {
-    variant: "gap"
-  }), joined && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(ToggleButton, {
-    disabled: !canSharescreen,
-    active: isScreensharing,
-    state: {
-      on: {
-        icon: "ph--monitor--regular",
-        label: t("screenshare off"),
-        onClick: () => call.turnScreenshareOff()
-      },
-      off: {
-        icon: "ph--monitor-arrow-up--duotone",
-        label: t("screenshare on"),
-        onClick: () => call.turnScreenshareOn()
-      }
-    }
-  }), actions.filter((action) => Node.isAction(action)).map((action) => /* @__PURE__ */ React8.createElement(IconButton2, {
-    key: action.id,
-    ...defaultButtonProps,
-    icon: action.properties.icon,
-    label: toLocalizedString(action.properties.label, t),
-    classNames: action.properties.classNames,
-    onClick: () => node && void runAction(action, {
-      parent: node
-    })
-  })), /* @__PURE__ */ React8.createElement(ToggleButton, {
-    active: raisedHand,
-    state: {
-      on: {
-        icon: "ph--hand-waving--regular",
-        label: t("lower hand"),
-        onClick: () => call.setRaisedHand(false)
-      },
-      off: {
-        icon: "ph--hand-palm--duotone",
-        label: t("raise hand"),
-        onClick: () => call.setRaisedHand(true)
-      }
-    }
-  })), joined ? /* @__PURE__ */ React8.createElement(IconButton2, {
-    variant: "destructive",
-    icon: "ph--phone-x--regular",
-    label: t("leave call"),
-    onClick: onLeave
-  }) : /* @__PURE__ */ React8.createElement(IconButton2, {
-    variant: "primary",
-    icon: "ph--phone-incoming--regular",
-    label: t("join call"),
-    onClick: onJoin
-  })));
-};
-Toolbar.displayName = "MeetingToolbar";
-var defaultButtonProps = {
-  size: 5,
-  iconOnly: true
-};
-var ToggleButton = ({ active, state }) => /* @__PURE__ */ React8.createElement(IconButton2, {
-  ...defaultButtonProps,
-  classNames: [
-    active ? state.on.classNames ?? "bg-call-active" : state.off.classNames
-  ],
-  icon: active ? state.on.icon : state.off.icon,
-  label: active ? state.on.label : state.off.label,
-  onClick: active ? state.on.onClick : state.off.onClick
-});
-
-// src/components/Call/Call.tsx
-var CallRoot = ({ children }) => {
-  return /* @__PURE__ */ React9.createElement("div", {
-    className: "relative dx-container flex flex-col"
-  }, children);
-};
-CallRoot.displayName = "CallRoot";
-var CallAudio = () => {
-  const call = useCapability3(ThreadCapabilities.CallManager);
-  const audioTracksToPlay = useAtomValue3(call.audioTracksToPlayAtom);
-  return /* @__PURE__ */ React9.createElement(AudioStream, {
-    tracks: audioTracksToPlay
-  });
-};
-CallAudio.displayName = "CallAudio";
-var CallGrid = ({ fullscreen }) => {
-  const debug = useDebugMode();
-  const call = useCapability3(ThreadCapabilities.CallManager);
-  const self = useAtomValue3(call.selfAtom);
-  const users = useAtomValue3(call.usersAtom);
-  return /* @__PURE__ */ React9.createElement("div", {
-    className: "grid grow p-4 dark:bg-neutral-900"
-  }, /* @__PURE__ */ React9.createElement(ParticipantGrid, {
-    self,
-    users,
-    debug,
-    fullscreen
-  }));
-};
-CallGrid.displayName = "CallGrid";
-var CallToolbar = (props) => {
-  return /* @__PURE__ */ React9.createElement("div", {
-    className: "absolute bottom-0 left-0 right-0 flex justify-center"
-  }, /* @__PURE__ */ React9.createElement(Toolbar, {
-    isInRoom: true,
-    ...props
-  }));
-};
-CallToolbar.displayName = "CallToolbar";
-var Call = {
-  Root: CallRoot,
-  Grid: CallGrid,
-  Audio: CallAudio,
-  Toolbar: CallToolbar
-};
-
-// src/components/CommentsPanel/CommentsPanel.tsx
-import React12, { useEffect as useEffect7 } from "react";
-import { Obj as Obj3, Relation as Relation2 } from "@dxos/echo";
-import { Icon as Icon3, Message, Trans, useTranslation as useTranslation5 } from "@dxos/react-ui";
-
-// src/components/CommentsPanel/CommentsThread.tsx
-import React11, { useCallback as useCallback3, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
-import { Obj as Obj2, Relation } from "@dxos/echo";
-import { useObject as useObject2 } from "@dxos/echo-react";
-import { getSpace, useMembers } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { IconButton as IconButton4, Tag, Tooltip, useThemeContext as useThemeContext2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { MessageTextbox, Thread as ThreadComponent } from "@dxos/react-ui-thread";
-import { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener } from "@dxos/ui-editor";
-import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx7 } from "@dxos/ui-theme";
-
-// src/components/MessagePanel/MessagePanel.tsx
-import { EditorView } from "@codemirror/view";
-import React10, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
-import { Surface } from "@dxos/app-framework/ui";
-import { Ref } from "@dxos/echo";
-import { useObject } from "@dxos/echo-react";
-import { PublicKey } from "@dxos/react-client";
-import { useIdentity } from "@dxos/react-client/halo";
-import { IconButton as IconButton3, useOnTransition, useThemeContext, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Card } from "@dxos/react-ui";
-import { useTextEditor } from "@dxos/react-ui-editor";
-import { MessageHeading, MessageRoot } from "@dxos/react-ui-thread";
-import { createBasicExtensions, createThemeExtensions } from "@dxos/ui-editor";
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/ui-theme";
-var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pe-2";
-var buttonClassNames = "p-1! transition-opacity";
-var MessagePanel = ({ message: messageOrRef, members, editable = false, onDelete, onAcceptProposal }) => {
-  const { t } = useTranslation3(meta.id);
-  const [message, updateMessage] = useObject(messageOrRef);
-  const identity = useIdentity();
-  const [editing, setEditing] = useState4(false);
-  const textBlockIndex = message?.blocks.findIndex((block) => block._tag === "text") ?? -1;
-  const handleEdit = useCallback2(() => setEditing((editing2) => !editing2), []);
-  const handleDelete = useCallback2(() => message && onDelete?.(message.id), [
-    message,
-    onDelete
-  ]);
-  const handleAcceptProposal = useCallback2(() => message && onAcceptProposal?.(message.id), [
-    message,
-    onAcceptProposal
-  ]);
-  const handleTextBlockChange = useCallback2((newText) => {
-    updateMessage((m) => {
-      const targetBlock = m.blocks[textBlockIndex];
-      if (targetBlock && targetBlock._tag === "text") {
-        targetBlock.text = newText;
-      }
-    });
-  }, [
-    updateMessage,
-    textBlockIndex
-  ]);
-  const textBlock = message && textBlockIndex !== -1 ? message.blocks[textBlockIndex] : void 0;
-  useOnEditAnalytics(message, textBlock, !!editing);
-  if (!message) {
-    return null;
-  }
-  const senderIdentity = members.find((member) => message.sender.identityDid && member.identity.did === message.sender.identityDid || message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey))?.identity;
-  const messageMetadata = getMessageMetadata(message.id, senderIdentity);
-  const userIsAuthor = identity?.did === messageMetadata.authorId;
-  const proposalBlock = message.blocks.find((block) => block._tag === "proposal");
-  const references = message.blocks.filter((block) => block._tag === "reference").map((block) => block.reference);
-  return /* @__PURE__ */ React10.createElement(MessageRoot, {
-    ...messageMetadata,
-    classNames: [
-      hoverableControls,
-      hoverableFocusedWithinControls
-    ]
-  }, /* @__PURE__ */ React10.createElement(MessageHeading, {
-    authorName: messageMetadata.authorName,
-    timestamp: messageMetadata.timestamp
-  }, /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: buttonGroupClassNames
-  }, userIsAuthor && editable && /* @__PURE__ */ React10.createElement(IconButton3, {
-    "data-testid": editing ? "thread.message.save" : "thread.message.edit",
-    variant: "ghost",
-    icon: editing ? "ph--check--regular" : "ph--pencil-simple--regular",
-    iconOnly: true,
-    label: t(editing ? "save message label" : "edit message label"),
-    classNames: [
-      buttonClassNames,
-      hoverableControlItem
-    ],
-    onClick: handleEdit
-  }), proposalBlock && onAcceptProposal && /* @__PURE__ */ React10.createElement(IconButton3, {
-    "data-testid": "thread.message.accept",
-    variant: "ghost",
-    icon: "ph--check--regular",
-    iconOnly: true,
-    label: t("accept proposal label"),
-    classNames: [
-      buttonClassNames,
-      hoverableControlItem
-    ],
-    onClick: handleAcceptProposal
-  }), onDelete && /* @__PURE__ */ React10.createElement(IconButton3, {
-    "data-testid": "thread.message.delete",
-    variant: "ghost",
-    icon: "ph--x--regular",
-    iconOnly: true,
-    label: t("delete message label"),
-    classNames: [
-      buttonClassNames,
-      hoverableControlItem
-    ],
-    onClick: handleDelete
-  }))), textBlock && /* @__PURE__ */ React10.createElement(TextboxBlock, {
-    block: textBlock,
-    isAuthor: userIsAuthor,
-    editing,
-    onSave: handleTextBlockChange
-  }), proposalBlock && /* @__PURE__ */ React10.createElement(ProposalBlock, {
-    block: proposalBlock
-  }), Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React10.createElement(MessagePart, {
-    key: index,
-    part: reference
-  })));
-};
-var MessagePart = ({ part }) => {
-  return /* @__PURE__ */ React10.createElement(MessageBlockObjectTile, {
-    subject: part
-  });
-};
-var TextboxBlock = ({ block, isAuthor, editing, onSave }) => {
-  const { themeMode } = useThemeContext();
-  const inMemoryContentRef = useRef3(block.text);
-  const handleDocumentChange = useCallback2((newState) => {
-    inMemoryContentRef.current = newState;
-  }, []);
-  const saveDocumentChange = useCallback2(() => {
-    onSave?.(inMemoryContentRef.current);
-  }, [
-    onSave
-  ]);
-  useOnTransition(editing, true, false, saveDocumentChange);
-  const { parentRef, focusAttributes, view } = useTextEditor(() => ({
-    initialValue: block.text,
-    extensions: [
-      createBasicExtensions({
-        readOnly: !isAuthor || !editing
-      }),
-      createThemeExtensions({
-        themeMode
-      }),
-      command,
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          handleDocumentChange(update.state.doc.toString());
-        }
-      })
-    ]
-  }), [
-    block.text,
-    editing,
-    isAuthor,
-    themeMode,
-    handleDocumentChange
-  ]);
-  useEffect6(() => {
-    editing && view?.focus();
-  }, [
-    editing,
-    view
-  ]);
-  return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    ref: parentRef,
-    className: "me-4",
-    ...focusAttributes
-  });
-};
-var ProposalBlock = ({ block }) => {
-  return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "me-4 italic"
-  }, block.text);
-};
-var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwardedRef) => {
-  let title = subject.name ?? subject.title ?? subject.type ?? "Object";
-  if (typeof title !== "string") {
-    title = title?.content ?? "";
-  }
-  return /* @__PURE__ */ React10.createElement(Card.Root, {
-    className: mx6("grid col-span-3 py-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React10.createElement(Surface.Surface, {
-    role: "card--content",
-    limit: 1,
-    data: {
-      subject
-    },
-    fallback: title
-  }));
-});
-
-// src/components/CommentsPanel/CommentsThread.tsx
-var CommentsThread = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
-  const { themeMode } = useThemeContext2();
-  const { t } = useTranslation4(meta.id);
-  const identity = useIdentity2();
-  const space = getSpace(anchor);
-  const members = useMembers(space?.id);
-  const detached = !anchor.anchor;
-  const thread = Relation.getSource(anchor);
-  const [messages] = useObject2(thread, "messages");
-  const activity = useStatus(space, Obj2.getDXN(thread).toString());
-  const threadScrollRef = useRef4(null);
-  const textboxMetadata = getMessageMetadata(Obj2.getDXN(thread).toString(), identity);
-  const [state, setState] = useState5({});
-  const messageRef = useRef4("");
-  const extensions = useMemo4(() => [
-    createBasicExtensions2({
-      placeholder: t("message placeholder")
-    }),
-    createThemeExtensions2({
-      themeMode
-    }),
-    listener({
-      onChange: ({ text }) => messageRef.current = text
-    }),
-    command
-  ], [
-    state
-  ]);
-  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
-    behavior,
-    block: "end"
-  }), 10);
-  const handleAttend = useCallback3(() => onAttend?.(anchor), [
-    onAttend,
-    anchor
-  ]);
-  const handleResolve = useCallback3(() => onResolve?.(anchor), [
-    onResolve,
-    anchor
-  ]);
-  const handleMessageDelete = useCallback3((id) => onMessageDelete?.(anchor, id), [
-    onMessageDelete,
-    anchor
-  ]);
-  const handleThreadDelete = useCallback3(() => onThreadDelete?.(anchor), [
-    onThreadDelete,
-    anchor
-  ]);
-  const handleAcceptProposal = useCallback3((id) => onAcceptProposal?.(anchor, id), [
-    onAcceptProposal,
-    anchor
-  ]);
-  const handleComment = useCallback3(() => {
-    if (!messageRef.current) {
-      return false;
-    }
-    onComment?.(anchor, messageRef.current);
-    messageRef.current = "";
-    scrollToEnd("instant");
-    setState({});
-    return true;
-  }, [
-    anchor,
-    identity
-  ]);
-  return /* @__PURE__ */ React11.createElement(ThreadComponent.Root, {
-    id: Obj2.getDXN(thread).toString(),
-    classNames: "pt-2 border-b border-subdued-separator last:border-none",
-    current,
-    onClickCapture: handleAttend,
-    onFocusCapture: handleAttend
-  }, /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    className: mx7("col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]", hoverableControls2, hoverableFocusedWithinControls2)
-  }, detached ? /* @__PURE__ */ React11.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: t("detached thread label"),
-    side: "top"
-  }, /* @__PURE__ */ React11.createElement(ThreadComponent.Header, {
-    detached: true
-  }, thread.name)) : /* @__PURE__ */ React11.createElement(ThreadComponent.Header, null, thread.name), /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    className: buttonGroupClassNames
-  }, thread.status === "staged" && /* @__PURE__ */ React11.createElement(Tag, {
-    palette: "neutral"
-  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React11.createElement(IconButton4, {
-    "data-testid": "thread.resolve",
-    variant: "ghost",
-    icon: thread?.status === "resolved" ? "ph--check--fill" : "ph--check--regular",
-    iconOnly: true,
-    label: t("resolve thread label"),
-    classNames: [
-      buttonClassNames,
-      thread?.status !== "resolved" && hoverableControlItem2
-    ],
-    onClick: handleResolve
-  }), onThreadDelete && /* @__PURE__ */ React11.createElement(IconButton4, {
-    "data-testid": "thread.delete",
-    variant: "ghost",
-    icon: "ph--x--regular",
-    iconOnly: true,
-    label: t("delete thread label"),
-    classNames: [
-      buttonClassNames,
-      hoverableControlItem2
-    ],
-    onClick: handleThreadDelete
-  }))), messages?.map((ref) => /* @__PURE__ */ React11.createElement(MessagePanel, {
-    key: ref.dxn.toString(),
-    editable: true,
-    message: ref,
-    members,
-    onDelete: handleMessageDelete,
-    onAcceptProposal: handleAcceptProposal
-  })), /* @__PURE__ */ React11.createElement(MessageTextbox, {
-    extensions,
-    onSend: handleComment,
-    ...textboxMetadata
-  }), /* @__PURE__ */ React11.createElement(ThreadComponent.Status, {
-    activity
-  }, t("activity message")), /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    className: "h-px -mt-px",
-    ref: threadScrollRef
-  }));
-};
-
-// src/components/CommentsPanel/CommentsPanel.tsx
-var CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }) => {
-  const { t } = useTranslation5(meta.id);
-  const filteredAnchors = showResolvedThreads ? anchors.filter((anchor) => !!Relation2.getSource(anchor)) : anchors.filter((anchor) => {
-    const thread = Relation2.getSource(anchor);
-    return thread && thread.status !== "resolved";
-  });
-  useEffect7(() => {
-    if (currentId) {
-      document.getElementById(currentId)?.scrollIntoView({
-        behavior: "smooth",
-        block: "end"
-      });
-    }
-  }, [
-    currentId
-  ]);
-  if (filteredAnchors.length === 0) {
-    return /* @__PURE__ */ React12.createElement("div", {
-      role: "none",
-      className: "p-form-padding"
-    }, /* @__PURE__ */ React12.createElement(Message.Root, null, /* @__PURE__ */ React12.createElement(Message.Title, null, /* @__PURE__ */ React12.createElement(Trans, {
-      t,
-      i18nKey: "no comments message",
-      components: {
-        commentIcon: /* @__PURE__ */ React12.createElement(Icon3, {
-          icon: "ph--chat-text--regular",
-          size: 4,
-          classNames: "w-block"
-        })
-      }
-    }))));
-  }
-  return /* @__PURE__ */ React12.createElement("div", null, filteredAnchors.map((anchor) => {
-    const thread = Relation2.getSource(anchor);
-    const threadId = Obj3.getDXN(thread).toString();
-    return /* @__PURE__ */ React12.createElement(CommentsThread, {
-      key: threadId,
-      anchor,
-      current: currentId === threadId,
-      ...props
-    });
-  }));
-};
-
-export {
-  Call,
-  MessagePanel,
-  CommentsPanel
-};
-//# sourceMappingURL=chunk-GRA2YL5N.mjs.map