@dxos/plugin-thread 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

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

@@ -0,0 +1,1124 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  useDebugMode,
+  useOnEditAnalytics,
+  useStatus
+} from "./chunk-YN2Y7GPW.mjs";
+import {
+  getMessageMetadata
+} from "./chunk-ABUFOZVX.mjs";
+import {
+  ThreadCapabilities
+} from "./chunk-QYAVWNVM.mjs";
+import {
+  meta
+} from "./chunk-GPPP2MZ3.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/ResponsiveContainer.tsx
+import React3 from "react";
+import { mx as mx2 } from "@dxos/ui-theme";
+var ResponsiveContainer = ({ children }) => {
+  return (
+    // Outer container that takes full size of parent.
+    /* @__PURE__ */ React3.createElement("div", {
+      role: "none",
+      className: "relative flex w-full h-full"
+    }, /* @__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("relative w-full h-full", 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(ResponsiveContainer, 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("relative w-full h-full 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",
+    size: 4
+  }), /* @__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 flex flex-col grow overflow-hidden"
+  }, 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/CommentsContainer.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/CommentsThreadContainer.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 mx8 } from "@dxos/ui-theme";
+
+// src/components/command-extension.ts
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@dxos/ui-editor";
+import { mx as mx6 } from "@dxos/ui-theme";
+var parser = StreamLanguage.define({
+  startState: () => ({
+    count: 0
+  }),
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    if (state.count === 1 && stream.match(/^(\/\w+)/)) {
+      return "tagName";
+    }
+    stream.next();
+    return null;
+  }
+});
+var styles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx6("dx-tag dx-tag--indigo text-base-surface-text font-medium")
+  }
+]);
+var command = [
+  parser,
+  syntaxHighlighting(styles)
+];
+
+// src/components/MessageContainer.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 mx7 } from "@dxos/ui-theme";
+var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pe-2";
+var buttonClassNames = "p-1! transition-opacity";
+var MessageContainer = ({ 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: mx7("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/CommentsThreadContainer.tsx
+var CommentsThreadContainer = ({ 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: mx8("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(MessageContainer, {
+    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/CommentsContainer.tsx
+var CommentsContainer = ({ 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(CommentsThreadContainer, {
+      key: threadId,
+      anchor,
+      current: currentId === threadId,
+      ...props
+    });
+  }));
+};
+
+export {
+  Call,
+  command,
+  MessageContainer,
+  CommentsContainer
+};
+//# sourceMappingURL=chunk-IQUV7DR6.mjs.map