@dxos/plugin-thread 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/dist/lib/node-esm/chunk-7XQLXMX7.mjs

@@ -1,1816 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  useDebugMode,
-  useOnEditAnalytics,
-  useStatus
-} from "./chunk-KRBZBJRI.mjs";
-import {
-  getMessageMetadata
-} from "./chunk-ABUFOZVX.mjs";
-import {
-  ThreadCapabilities,
-  ThreadOperation,
-  meta
-} from "./chunk-WMWUXWAS.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/react";
-
-// 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("is-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/react";
-
-// 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 is-full bs-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-bs-full max-is-full is-auto bs-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 = "is-[2560px] bs-[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 is-full bs-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 && "bs-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 bs-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-bs-full max-is-full is-auto bs-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 is-full bs-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-bs-1 rounded", 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 plb-0.5 truncate rounded", pinned ? "pli-2" : "pli-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-bs-1 rounded", 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 { useAppGraph, useCapability as useCapability2 } from "@dxos/app-framework/react";
-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-modalSurface 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-callActive"
-      },
-      off: {
-        icon: "ph--microphone-slash--duotone",
-        label: t("mic on"),
-        onClick: () => call.turnAudioOn(),
-        classNames: [
-          joined && "bg-callAlert"
-        ]
-      }
-    }
-  }), /* @__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 is-[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),
-        classNames: [
-          joined && "bg-callAlert"
-        ]
-      },
-      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-callActive" : 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/CallDebugPanel.tsx
-import { WebRTCStats } from "@peermetrics/webrtc-stats";
-import React10, { useEffect as useEffect6, useMemo as useMemo4, useState as useState4 } from "react";
-import { truncateKey } from "@dxos/debug";
-import { JsonView, Panel } from "@dxos/devtools";
-import { log } from "@dxos/log";
-import { IconButton as IconButton3, Input, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/CallDebugPanel.tsx";
-var CallDebugPanel = ({ state }) => {
-  const { t } = useTranslation3(meta.id);
-  const [open, setOpen] = useState4(false);
-  const handleToggle = () => setOpen(!open);
-  const [showServiceHistory, setShowServiceHistory] = useState4(false);
-  const handleToggleServiceHistory = () => setShowServiceHistory(!showServiceHistory);
-  const handleCopyRaw = async () => {
-    await navigator.clipboard.writeText(JSON.stringify({
-      users: state?.call?.users,
-      stats
-    }, null, 2));
-  };
-  const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState4(false);
-  const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
-  const webrtcStats = useMemo4(() => new WebRTCStats({
-    getStatsInterval: 1e3
-  }), []);
-  const [stats, setStats] = useState4();
-  useEffect6(() => {
-    const pc = state?.media.peer?.session?.peerConnection;
-    const handleStats = (stats2) => {
-      setStats(stats2.data);
-    };
-    let added = false;
-    if (pc && showDetailedWebRTCStats) {
-      webrtcStats.addConnection({
-        pc,
-        peerId: 1,
-        connectionId: "1"
-      });
-      webrtcStats.on("stats", handleStats);
-      added = true;
-    }
-    return () => {
-      try {
-        if (pc && added) {
-          webrtcStats.removeConnection({
-            pc
-          });
-          webrtcStats.removeListener("stats", handleStats);
-        }
-      } catch (error) {
-        log.error("error removing webrtc stats", {
-          error,
-          pc,
-          peerId: 1,
-          connectionId: "1"
-        }, {
-          F: __dxlog_file2,
-          L: 60,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    };
-  }, [
-    state?.media.peer?.session?.peerConnection,
-    showDetailedWebRTCStats
-  ]);
-  const rows = useMemo4(() => getCallStatusTable(state), [
-    state?.call.users,
-    state?.media.pulledAudioTracks
-  ]);
-  return /* @__PURE__ */ React10.createElement(Panel, {
-    id: "meeting-status",
-    icon: "ph--video-conference--regular",
-    open,
-    onToggle: handleToggle,
-    title: t("meeting status title"),
-    info: /* @__PURE__ */ React10.createElement("div", {
-      className: "flex items-center gap-2"
-    }, " ", state?.call.joined ? "Active" : "Inactive"),
-    maxHeight: 0
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "flex flex-col is-full text-xs"
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-    checked: showDetailedWebRTCStats,
-    onCheckedChange: handleShowDetailedWebRTCStats
-  }), /* @__PURE__ */ React10.createElement(Input.Label, null, t("show webrtc stats title")))), /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-    checked: showServiceHistory,
-    onCheckedChange: handleToggleServiceHistory
-  }), /* @__PURE__ */ React10.createElement(Input.Label, null, t("show calls history title")))), /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(IconButton3, {
-    icon: "ph--copy--regular",
-    label: "copy raw",
-    onClick: handleCopyRaw
-  })), /* @__PURE__ */ React10.createElement(Table, {
-    rows
-  }), showDetailedWebRTCStats && /* @__PURE__ */ React10.createElement(JsonView, {
-    data: {
-      stats
-    }
-  }), showServiceHistory && /* @__PURE__ */ React10.createElement(JsonView, {
-    data: {
-      history: state?.media.peer?.history.get()
-    }
-  })));
-};
-var getCallStatusTable = (state) => {
-  if (!state || !state.call?.users) {
-    return [];
-  }
-  const self = state.call.self;
-  const users = state.call.users.filter((user) => user.id !== self.id).map((user) => {
-    const isOk = {
-      audio: user.tracks?.audio && state.media.pulledAudioTracks[user.tracks?.audio]?.ctx.disposed === false,
-      video: user.tracks?.video && state.media.pulledVideoStreams[user.tracks?.video]?.ctx.disposed === false,
-      screenshare: user.tracks?.screenshare && state.media.pulledVideoStreams[user.tracks?.screenshare]?.ctx.disposed === false
-    };
-    return {
-      ...user,
-      isOk
-    };
-  });
-  return [
-    [
-      "users",
-      state.call.users.length ?? 0
-    ],
-    [
-      "*self* " + (self?.name ?? truncateKey(self.id, 8)),
-      self?.tracks?.audio && state.media.pushedAudioTrack ? "AUD \u2705" : "AUD \u274C",
-      self?.tracks?.video && state.media.pushedVideoTrack ? "VID \u2705" : "VID \u274C",
-      self?.tracks?.screenshareEnabled ? self.tracks.screenshareEnabled && state.media.pushedScreenshareTrack ? "SCR \u2705" : "SCR \u274C" : void 0
-    ],
-    ...users.map((user) => [
-      user.name ?? truncateKey(user.id, 8),
-      user.isOk.audio ? "AUD \u2705" : "AUD \u274C",
-      user.isOk.video ? "VID \u2705" : "VID \u274C",
-      user.tracks?.screenshareEnabled ? user.isOk.screenshare ? "SCR \u2705" : "SCR \u274C" : void 0
-    ]),
-    [
-      "ICE",
-      state.media.peer?.session?.peerConnection.iceConnectionState ?? "no connection"
-    ]
-  ];
-};
-(function(Unit2) {
-  Unit2.KB = (n) => ((n ?? 0) / 1e3).toFixed(2);
-})(Unit || (Unit = {}));
-var Table = ({ rows }) => {
-  return /* @__PURE__ */ React10.createElement("div", {
-    className: "is-full text-xs font-mono"
-  }, rows.map(([prefix, label, value, unit], i) => /* @__PURE__ */ React10.createElement("div", {
-    key: i,
-    className: "grid grid-cols-[3fr_1fr_1fr_1fr]"
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, prefix), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, label), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, value), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, unit))));
-};
-var Unit;
-
-// src/components/ChatContainer.tsx
-import React12, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo5, useRef as useRef4, useState as useState6 } from "react";
-import { Obj as Obj2, Ref as Ref2 } from "@dxos/echo";
-import { useMembers } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { Icon as Icon3, ScrollArea, useThemeContext as useThemeContext2, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { StackItem } from "@dxos/react-ui-stack";
-import { MessageTextbox, Thread as ThreadComponent, threadLayout } from "@dxos/react-ui-thread";
-import { Message } from "@dxos/types";
-import { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener } from "@dxos/ui-editor";
-import { mx as mx8 } from "@dxos/ui-theme";
-import { isNonNullable } from "@dxos/util";
-
-// 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-baseText font-medium")
-  }
-]);
-var command = [
-  parser,
-  syntaxHighlighting(styles)
-];
-
-// src/components/MessageContainer.tsx
-import { EditorView } from "@codemirror/view";
-import React11, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect7, useRef as useRef3, useState as useState5 } from "react";
-import { Surface } from "@dxos/app-framework/react";
-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 IconButton4, useOnTransition, useThemeContext, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { useTextEditor } from "@dxos/react-ui-editor";
-import { Card } from "@dxos/react-ui-mosaic";
-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 pie-2";
-var buttonClassNames = "!p-1 transition-opacity";
-var MessageContainer = ({ message: messageOrRef, members, editable = false, onDelete, onAcceptProposal }) => {
-  const { t } = useTranslation4(meta.id);
-  const [message, updateMessage] = useObject(messageOrRef);
-  const identity = useIdentity();
-  const [editing, setEditing] = useState5(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__ */ React11.createElement(MessageRoot, {
-    ...messageMetadata,
-    classNames: [
-      hoverableControls,
-      hoverableFocusedWithinControls
-    ]
-  }, /* @__PURE__ */ React11.createElement(MessageHeading, {
-    authorName: messageMetadata.authorName,
-    timestamp: messageMetadata.timestamp
-  }, /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    className: buttonGroupClassNames
-  }, userIsAuthor && editable && /* @__PURE__ */ React11.createElement(IconButton4, {
-    "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__ */ React11.createElement(IconButton4, {
-    "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__ */ React11.createElement(IconButton4, {
-    "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__ */ React11.createElement(TextboxBlock, {
-    block: textBlock,
-    isAuthor: userIsAuthor,
-    editing,
-    onSave: handleTextBlockChange
-  }), proposalBlock && /* @__PURE__ */ React11.createElement(ProposalBlock, {
-    block: proposalBlock
-  }), Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React11.createElement(MessagePart, {
-    key: index,
-    part: reference
-  })));
-};
-var MessagePart = ({ part }) => {
-  return /* @__PURE__ */ React11.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
-  ]);
-  useEffect7(() => {
-    editing && view?.focus();
-  }, [
-    editing,
-    view
-  ]);
-  return /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    ref: parentRef,
-    className: "mie-4",
-    ...focusAttributes
-  });
-};
-var ProposalBlock = ({ block }) => {
-  return /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
-    className: "mie-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__ */ React11.createElement(Card.Root, {
-    className: mx7("grid col-span-3 plb-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(Surface, {
-    role: "card-content",
-    limit: 1,
-    data: {
-      subject
-    },
-    fallback: title
-  }));
-});
-
-// src/components/ChatContainer.tsx
-var ChatContainer = ({ classNames, space, thread, context, current, autoFocusTextbox }) => {
-  const { t } = useTranslation5(meta.id);
-  const id = Obj2.getDXN(thread).toString();
-  const identity = useIdentity2();
-  const members = useMembers(space?.id);
-  const activity = useStatus(space, id);
-  const [_count, _setCount] = useState6(0);
-  const rerenderEditor = () => _setCount((count) => count + 1);
-  const [autoFocus, setAutoFocus] = useState6(autoFocusTextbox);
-  const threadScrollRef = useRef4(null);
-  const { themeMode } = useThemeContext2();
-  const textboxMetadata = getMessageMetadata(id, identity);
-  const messageRef = useRef4("");
-  const extensions = useMemo5(() => [
-    createBasicExtensions2({
-      placeholder: t("message placeholder")
-    }),
-    createThemeExtensions2({
-      themeMode
-    }),
-    listener({
-      onChange: ({ text }) => messageRef.current = text
-    }),
-    command
-  ], [
-    themeMode,
-    _count
-  ]);
-  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
-    behavior,
-    block: "end"
-  }), 10);
-  useLayoutEffect2(() => {
-    scrollToEnd("instant");
-  }, []);
-  const handleCreate = () => {
-    if (!messageRef.current?.length) {
-      return false;
-    }
-    Obj2.change(thread, (t2) => {
-      t2.messages.push(Ref2.make(Obj2.make(Message.Message, {
-        created: (/* @__PURE__ */ new Date()).toISOString(),
-        sender: {
-          identityDid: identity.did
-        },
-        blocks: [
-          {
-            _tag: "text",
-            text: messageRef.current
-          }
-        ],
-        properties: context ? {
-          context: Ref2.make(context)
-        } : void 0
-      })));
-    });
-    messageRef.current = "";
-    setAutoFocus(true);
-    scrollToEnd("smooth");
-    rerenderEditor();
-    return true;
-  };
-  return /* @__PURE__ */ React12.createElement(ThreadComponent.Root, {
-    current,
-    id,
-    classNames: [
-      "bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden",
-      "transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0",
-      classNames
-    ]
-  }, /* @__PURE__ */ React12.createElement(ScrollArea.Root, {
-    classNames: "col-span-2"
-  }, /* @__PURE__ */ React12.createElement(ScrollArea.Viewport, {
-    classNames: "overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]"
-  }, /* @__PURE__ */ React12.createElement("div", {
-    role: "none",
-    className: mx8(threadLayout, "place-self-end")
-  }, thread.messages.map((message) => message.target).filter(isNonNullable).map((message) => /* @__PURE__ */ React12.createElement(MessageContainer, {
-    key: message.id,
-    message,
-    members
-  }))), /* @__PURE__ */ React12.createElement("div", {
-    role: "none",
-    className: "bs-px -mbs-px",
-    ref: threadScrollRef
-  })), /* @__PURE__ */ React12.createElement(ScrollArea.Scrollbar, null, /* @__PURE__ */ React12.createElement(ScrollArea.Thumb, null))), /* @__PURE__ */ React12.createElement(MessageTextbox, {
-    extensions,
-    autoFocus,
-    onSend: handleCreate,
-    ...textboxMetadata
-  }), /* @__PURE__ */ React12.createElement(ThreadComponent.Status, {
-    activity
-  }, t("activity message")));
-};
-var ChatContainer_default = ChatContainer;
-
-// src/components/ChannelContainer.tsx
-import { Atom, useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
-import React13, { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo6, useState as useState7 } from "react";
-import { useCapabilities, useCapability as useCapability4 } from "@dxos/app-framework/react";
-import { Context } from "@dxos/context";
-import { failUndefined } from "@dxos/debug";
-import { Obj as Obj3 } from "@dxos/echo";
-import { log as log2 } from "@dxos/log";
-import { useClient } from "@dxos/react-client";
-import { getSpace } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
-import { ElevationProvider, Input as Input2, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { ControlGroup, ControlGroupButton, ControlItemInput } from "@dxos/react-ui-form";
-import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from "@dxos/react-ui-menu";
-import { useSoundEffect } from "@dxos/react-ui-sfx";
-import { StackItem as StackItem2 } from "@dxos/react-ui-stack";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/ChannelContainer.tsx";
-var ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }) => {
-  const space = getSpace(channel);
-  const callManager = useCapability4(ThreadCapabilities.CallManager);
-  const joined = useAtomValue4(callManager.joinedAtom);
-  const currentRoomId = useAtomValue4(callManager.roomIdAtom);
-  const attendableId = channel ? Obj3.getDXN(channel).toString() : void 0;
-  const roomId = roomIdProp ?? attendableId ?? failUndefined();
-  const identity = useIdentity3();
-  const isNamed = !!identity?.profile?.displayName;
-  const joinSound = useSoundEffect("JoinCall");
-  const leaveSound = useSoundEffect("LeaveCall");
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
-  useEffect8(() => {
-    const ctx = new Context(void 0, {
-      F: __dxlog_file3,
-      L: 55
-    });
-    callManager.left.on(ctx, (roomId2) => {
-      extensions.forEach((extension) => {
-        void extension.onLeave?.(roomId2);
-      });
-    });
-    callManager.callStateUpdated.on(ctx, (state) => {
-      extensions.forEach((extension) => {
-        void extension.onCallStateUpdated?.(state);
-      });
-    });
-    callManager.mediaStateUpdated.on(ctx, (state) => {
-      extensions.forEach((extension) => {
-        void extension.onMediaStateUpdated?.(state);
-      });
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [
-    callManager,
-    extensions
-  ]);
-  const handleJoin = useCallback3(async () => {
-    if (!roomId || !channel) {
-      return;
-    }
-    if (joined) {
-      await callManager.leave();
-    }
-    try {
-      void joinSound.play();
-      callManager.setRoomId(roomId);
-      await callManager.join();
-      await Promise.all(extensions.map((extension) => extension.onJoin?.({
-        channel,
-        roomId
-      })));
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file3,
-        L: 99,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  }, [
-    extensions,
-    channel,
-    roomId,
-    joined
-  ]);
-  const handleLeave = useCallback3(async () => {
-    try {
-      void leaveSound.play();
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file3,
-        L: 111,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    } finally {
-      void callManager.turnAudioOff();
-      void callManager.turnVideoOff();
-      void callManager.turnScreenshareOff();
-      void callManager.leave();
-    }
-  }, [
-    extensions,
-    roomId
-  ]);
-  const isJoined = joined && currentRoomId === roomId;
-  return /* @__PURE__ */ React13.createElement(StackItem2.Content, {
-    classNames: isJoined && "bs-full",
-    toolbar: !isJoined
-  }, isJoined && !isNamed && /* @__PURE__ */ React13.createElement(DisplayNameMissing, null), isJoined && isNamed && /* @__PURE__ */ React13.createElement(Call.Root, null, /* @__PURE__ */ React13.createElement(Call.Grid, {
-    fullscreen
-  }), /* @__PURE__ */ React13.createElement(Call.Toolbar, {
-    channel,
-    onLeave: handleLeave
-  })), !isJoined && channel && channel.defaultThread.target && space && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ChannelToolbar, {
-    attendableId,
-    role,
-    onJoinCall: handleJoin
-  }), /* @__PURE__ */ React13.createElement(ChatContainer_default, {
-    space,
-    thread: channel.defaultThread.target,
-    classNames: "container-max-width"
-  })));
-};
-var DisplayNameMissing = () => {
-  const { t } = useTranslation6(meta.id);
-  const client = useClient();
-  const [displayName, setDisplayName] = useState7("");
-  const handleChange = useCallback3((event) => setDisplayName(event.target.value), []);
-  const handleSave = useCallback3(() => client.halo.updateProfile({
-    displayName
-  }), [
-    client,
-    displayName
-  ]);
-  return /* @__PURE__ */ React13.createElement(ControlGroup, {
-    classNames: "p-4 place-content-center"
-  }, /* @__PURE__ */ React13.createElement(ControlItemInput, {
-    title: t("display name label"),
-    description: t("display name description")
-  }, /* @__PURE__ */ React13.createElement(Input2.TextInput, {
-    value: displayName,
-    onChange: handleChange,
-    placeholder: t("display name input placeholder"),
-    classNames: "md:min-is-64"
-  })), /* @__PURE__ */ React13.createElement(ControlGroupButton, {
-    disabled: !displayName,
-    onClick: handleSave
-  }, t("set display name label")));
-};
-var useChannelToolbarActions = (onJoinCall) => {
-  const creator = useMemo6(() => Atom.make(() => {
-    return {
-      nodes: [
-        createMenuItemGroup("root", {
-          label: [
-            "channel toolbar title",
-            {
-              ns: meta.id
-            }
-          ]
-        }),
-        createMenuAction("video-call", () => onJoinCall?.(), {
-          label: [
-            "start video call label",
-            {
-              ns: meta.id
-            }
-          ],
-          icon: "ph--video-camera--regular",
-          type: "video-call"
-        })
-      ],
-      edges: [
-        {
-          source: "root",
-          target: "video-call"
-        }
-      ]
-    };
-  }), []);
-  return useMenuActions(creator);
-};
-var ChannelToolbar = ({ attendableId, role, onJoinCall }) => {
-  const menuProps = useChannelToolbarActions(onJoinCall);
-  return /* @__PURE__ */ React13.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React13.createElement(MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ React13.createElement(ToolbarMenu, {
-    textBlockWidth: true
-  })));
-};
-
-// src/components/CallSidebar.tsx
-import { useAtomValue as useAtomValue5 } from "@effect-atom/atom-react";
-import React14 from "react";
-import { useCapability as useCapability5 } from "@dxos/app-framework/react";
-var CallSidebar = () => {
-  const call = useCapability5(ThreadCapabilities.CallManager);
-  const roomId = useAtomValue5(call.roomIdAtom);
-  return /* @__PURE__ */ React14.createElement(ChannelContainer, {
-    subject: void 0,
-    roomId
-  });
-};
-
-// src/components/ThreadCompanion.tsx
-import { useAtomValue as useAtomValue6 } from "@effect-atom/atom-react";
-import React18, { useCallback as useCallback5, useMemo as useMemo8 } from "react";
-import { Common } from "@dxos/app-framework";
-import { useCapabilities as useCapabilities2, useCapability as useCapability6, useOperationInvoker } from "@dxos/app-framework/react";
-import { Filter, Obj as Obj6, Query, Relation as Relation3 } from "@dxos/echo";
-import { Ref as Ref3, useQuery } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity5 } from "@dxos/react-client/halo";
-import { useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { useAttended } from "@dxos/react-ui-attention";
-import { Layout } from "@dxos/react-ui-mosaic";
-import { Tabs } from "@dxos/react-ui-tabs";
-import { AnchoredTo, Thread } from "@dxos/types";
-import { mx as mx10 } from "@dxos/ui-theme";
-
-// src/components/CommentsContainer.tsx
-import React16, { useEffect as useEffect9 } from "react";
-import { Obj as Obj5, Relation as Relation2 } from "@dxos/echo";
-import { Callout, Icon as Icon4, Trans, useTranslation as useTranslation8 } from "@dxos/react-ui";
-
-// src/components/CommentsThreadContainer.tsx
-import React15, { useCallback as useCallback4, useMemo as useMemo7, useRef as useRef5, useState as useState8 } from "react";
-import { Obj as Obj4, Relation } from "@dxos/echo";
-import { useObject as useObject2 } from "@dxos/echo-react";
-import { getSpace as getSpace2, useMembers as useMembers2 } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity4 } from "@dxos/react-client/halo";
-import { IconButton as IconButton5, Tag, Tooltip, useThemeContext as useThemeContext3, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { MessageTextbox as MessageTextbox2, Thread as ThreadComponent2 } from "@dxos/react-ui-thread";
-import { createBasicExtensions as createBasicExtensions3, createThemeExtensions as createThemeExtensions3, listener as listener2 } from "@dxos/ui-editor";
-import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx9 } from "@dxos/ui-theme";
-var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
-  const { themeMode } = useThemeContext3();
-  const { t } = useTranslation7(meta.id);
-  const identity = useIdentity4();
-  const space = getSpace2(anchor);
-  const members = useMembers2(space?.id);
-  const detached = !anchor.anchor;
-  const thread = Relation.getSource(anchor);
-  const [messages] = useObject2(thread, "messages");
-  const activity = useStatus(space, Obj4.getDXN(thread).toString());
-  const threadScrollRef = useRef5(null);
-  const textboxMetadata = getMessageMetadata(Obj4.getDXN(thread).toString(), identity);
-  const [state, setState] = useState8({});
-  const messageRef = useRef5("");
-  const extensions = useMemo7(() => [
-    createBasicExtensions3({
-      placeholder: t("message placeholder")
-    }),
-    createThemeExtensions3({
-      themeMode
-    }),
-    listener2({
-      onChange: ({ text }) => messageRef.current = text
-    }),
-    command
-  ], [
-    state
-  ]);
-  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
-    behavior,
-    block: "end"
-  }), 10);
-  const handleAttend = useCallback4(() => onAttend?.(anchor), [
-    onAttend,
-    anchor
-  ]);
-  const handleResolve = useCallback4(() => onResolve?.(anchor), [
-    onResolve,
-    anchor
-  ]);
-  const handleMessageDelete = useCallback4((id) => onMessageDelete?.(anchor, id), [
-    onMessageDelete,
-    anchor
-  ]);
-  const handleThreadDelete = useCallback4(() => onThreadDelete?.(anchor), [
-    onThreadDelete,
-    anchor
-  ]);
-  const handleAcceptProposal = useCallback4((id) => onAcceptProposal?.(anchor, id), [
-    onAcceptProposal,
-    anchor
-  ]);
-  const handleComment = useCallback4(() => {
-    if (!messageRef.current) {
-      return false;
-    }
-    onComment?.(anchor, messageRef.current);
-    messageRef.current = "";
-    scrollToEnd("instant");
-    setState({});
-    return true;
-  }, [
-    anchor,
-    identity
-  ]);
-  return /* @__PURE__ */ React15.createElement(ThreadComponent2.Root, {
-    id: Obj4.getDXN(thread).toString(),
-    classNames: "pbs-2 border-be border-subduedSeparator last:border-none",
-    current,
-    onClickCapture: handleAttend,
-    onFocusCapture: handleAttend
-  }, /* @__PURE__ */ React15.createElement("div", {
-    role: "none",
-    className: mx9("col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]", hoverableControls2, hoverableFocusedWithinControls2)
-  }, detached ? /* @__PURE__ */ React15.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: t("detached thread label"),
-    side: "top"
-  }, /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, {
-    detached: true
-  }, thread.name)) : /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, null, thread.name), /* @__PURE__ */ React15.createElement("div", {
-    role: "none",
-    className: buttonGroupClassNames
-  }, thread.status === "staged" && /* @__PURE__ */ React15.createElement(Tag, {
-    palette: "neutral"
-  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React15.createElement(IconButton5, {
-    "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__ */ React15.createElement(IconButton5, {
-    "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__ */ React15.createElement(MessageContainer, {
-    key: ref.dxn.toString(),
-    editable: true,
-    message: ref,
-    members,
-    onDelete: handleMessageDelete,
-    onAcceptProposal: handleAcceptProposal
-  })), /* @__PURE__ */ React15.createElement(MessageTextbox2, {
-    extensions,
-    onSend: handleComment,
-    ...textboxMetadata
-  }), /* @__PURE__ */ React15.createElement(ThreadComponent2.Status, {
-    activity
-  }, t("activity message")), /* @__PURE__ */ React15.createElement("div", {
-    role: "none",
-    className: "bs-px -mbs-px",
-    ref: threadScrollRef
-  }));
-};
-
-// src/components/CommentsContainer.tsx
-var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }) => {
-  const { t } = useTranslation8(meta.id);
-  const filteredAnchors = showResolvedThreads ? anchors.filter((anchor) => !!Relation2.getSource(anchor)) : anchors.filter((anchor) => {
-    const thread = Relation2.getSource(anchor);
-    return thread && thread.status !== "resolved";
-  });
-  useEffect9(() => {
-    if (currentId) {
-      document.getElementById(currentId)?.scrollIntoView({
-        behavior: "smooth",
-        block: "end"
-      });
-    }
-  }, [
-    currentId
-  ]);
-  if (filteredAnchors.length === 0) {
-    return /* @__PURE__ */ React16.createElement("div", {
-      role: "none",
-      className: "plb-cardSpacingBlock pli-cardSpacingInline"
-    }, /* @__PURE__ */ React16.createElement(Callout.Root, null, /* @__PURE__ */ React16.createElement(Callout.Title, null, /* @__PURE__ */ React16.createElement(Trans, {
-      t,
-      i18nKey: "no comments message",
-      components: {
-        commentIcon: /* @__PURE__ */ React16.createElement(Icon4, {
-          icon: "ph--chat-text--regular",
-          size: 4,
-          classNames: "inline-block"
-        })
-      }
-    }))));
-  }
-  return /* @__PURE__ */ React16.createElement("div", null, filteredAnchors.map((anchor) => {
-    const thread = Relation2.getSource(anchor);
-    const threadId = Obj5.getDXN(thread).toString();
-    return /* @__PURE__ */ React16.createElement(CommentsThreadContainer, {
-      key: threadId,
-      anchor,
-      current: currentId === threadId,
-      ...props
-    });
-  }));
-};
-
-// src/components/ThreadSettings.tsx
-import React17 from "react";
-import { useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { ControlPage } from "@dxos/react-ui-form";
-var ThreadSettings = ({ settings: _settings }) => {
-  const { t: _t } = useTranslation9(meta.id);
-  return /* @__PURE__ */ React17.createElement(ControlPage, null);
-};
-
-// src/components/ThreadCompanion.tsx
-var initialViewState = {
-  showResolvedThreads: false
-};
-var ThreadCompanion = ({ subject }) => {
-  const { t } = useTranslation10(meta.id);
-  const { invokePromise } = useOperationInvoker();
-  const identity = useIdentity5();
-  const subjectId = Obj6.getDXN(subject).toString();
-  const registry = useCapability6(Common.Capability.AtomRegistry);
-  const stateAtom = useCapability6(ThreadCapabilities.State);
-  const viewStoreAtom = useCapability6(ThreadCapabilities.ViewState);
-  const state = useAtomValue6(stateAtom);
-  const viewStore = useAtomValue6(viewStoreAtom);
-  const drafts = state.drafts[subjectId];
-  const viewState = useMemo8(() => {
-    if (!viewStore[subjectId]) {
-      registry.set(viewStoreAtom, {
-        ...viewStore,
-        [subjectId]: {
-          ...initialViewState
-        }
-      });
-      return initialViewState;
-    }
-    return viewStore[subjectId];
-  }, [
-    viewStore,
-    subjectId,
-    registry,
-    viewStoreAtom
-  ]);
-  const { showResolvedThreads } = viewState;
-  const onChangeViewState = useCallback5((nextValue) => {
-    registry.set(viewStoreAtom, {
-      ...registry.get(viewStoreAtom),
-      [subjectId]: {
-        ...registry.get(viewStoreAtom)[subjectId],
-        showResolvedThreads: nextValue === "all"
-      }
-    });
-  }, [
-    registry,
-    viewStoreAtom,
-    subjectId
-  ]);
-  const anchorSorts = useCapabilities2(Common.Capability.AnchorSort);
-  const sort = useMemo8(() => anchorSorts.find(({ key }) => key === Obj6.getTypename(subject))?.sort, [
-    anchorSorts,
-    subject
-  ]);
-  const db = Obj6.getDatabase(subject);
-  const objectsAnchoredTo = useQuery(db, Query.select(Filter.id(subject.id)).targetOf(AnchoredTo.AnchoredTo));
-  const anchors = objectsAnchoredTo.toSorted((a, b) => sort?.(a, b) ?? 0).filter((anchor) => Obj6.instanceOf(Thread.Thread, Relation3.getSource(anchor))).concat(drafts ?? []);
-  const attended = useAttended();
-  const handleAttend = useCallback5((anchor) => {
-    const thread = Relation3.getSource(anchor);
-    const threadId = Obj6.getDXN(thread).toString();
-    if (state.current !== threadId) {
-      registry.set(stateAtom, {
-        ...registry.get(stateAtom),
-        current: threadId
-      });
-      void invokePromise(Common.LayoutOperation.ScrollIntoView, {
-        subject: Obj6.getDXN(subject).toString(),
-        cursor: anchor.anchor,
-        ref: threadId
-      });
-    }
-  }, [
-    state.current,
-    invokePromise,
-    subject,
-    registry,
-    stateAtom
-  ]);
-  const handleComment = useCallback5(async (anchor, text) => {
-    await invokePromise(ThreadOperation.AddMessage, {
-      anchor,
-      subject,
-      sender: {
-        identityDid: identity?.did
-      },
-      text
-    });
-    const thread = Relation3.getSource(anchor);
-    registry.set(stateAtom, {
-      ...registry.get(stateAtom),
-      current: Obj6.getDXN(thread).toString()
-    });
-  }, [
-    invokePromise,
-    identity,
-    subject,
-    registry,
-    stateAtom
-  ]);
-  const handleResolve = useCallback5((anchor) => invokePromise(ThreadOperation.ToggleResolved, {
-    thread: Relation3.getSource(anchor)
-  }), [
-    invokePromise
-  ]);
-  const handleThreadDelete = useCallback5((anchor) => invokePromise(ThreadOperation.Delete, {
-    anchor,
-    subject
-  }), [
-    invokePromise,
-    subject
-  ]);
-  const handleMessageDelete = useCallback5((anchor, messageId) => invokePromise(ThreadOperation.DeleteMessage, {
-    anchor,
-    subject,
-    messageId
-  }), [
-    invokePromise,
-    subject
-  ]);
-  const handleAcceptProposal = useCallback5(async (anchor, messageId) => {
-    const thread = Relation3.getSource(anchor);
-    const messageIndex = thread.messages.findIndex(Ref3.hasObjectId(messageId));
-    const message = thread.messages[messageIndex]?.target;
-    const proposal = message?.blocks.find((block) => block._tag === "proposal");
-    if (!proposal || !anchor.anchor) {
-      return;
-    }
-    await invokePromise(Common.CollaborationOperation.AcceptProposal, {
-      subject,
-      anchor: anchor.anchor,
-      proposal
-    });
-    await invokePromise(ThreadOperation.ToggleResolved, {
-      thread
-    });
-  }, [
-    invokePromise,
-    subject
-  ]);
-  const comments = /* @__PURE__ */ React18.createElement(CommentsContainer, {
-    anchors,
-    currentId: attended.includes(subjectId) ? state.current : void 0,
-    showResolvedThreads,
-    onAttend: handleAttend,
-    onComment: handleComment,
-    onResolve: handleResolve,
-    onMessageDelete: handleMessageDelete,
-    onThreadDelete: handleThreadDelete,
-    onAcceptProposal: handleAcceptProposal
-  });
-  return /* @__PURE__ */ React18.createElement(Layout.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React18.createElement(Tabs.Root, {
-    value: showResolvedThreads ? "all" : "unresolved",
-    orientation: "horizontal",
-    classNames: [
-      'contents [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:overflow-y-auto [&_[role="tabpanel"]]:scrollbar-thin'
-    ],
-    onValueChange: onChangeViewState
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tablist, {
-    classNames: mx10("bg-toolbarSurface border-be border-subduedSeparator")
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tab, {
-    value: "unresolved",
-    classNames: "text-sm"
-  }, t("show unresolved label")), /* @__PURE__ */ React18.createElement(Tabs.Tab, {
-    value: "all",
-    classNames: "text-sm"
-  }, t("show all label"))), /* @__PURE__ */ React18.createElement("div", {
-    className: "overflow-y-auto"
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tabpanel, {
-    value: "all"
-  }, showResolvedThreads && comments), /* @__PURE__ */ React18.createElement(Tabs.Tabpanel, {
-    value: "unresolved"
-  }, !showResolvedThreads && comments))));
-};
-
-export {
-  Call,
-  CallDebugPanel,
-  ChatContainer,
-  ChannelContainer,
-  CallSidebar,
-  ThreadCompanion,
-  ThreadSettings
-};
-//# sourceMappingURL=chunk-7XQLXMX7.mjs.map