@xipkg/calls-compactview 0.1.54 → 0.1.56

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { useDraggable, PointerSensor, useSensors, useSensor, DndContext, TouchSe
 import { useRoom, useCallsNavigation, useCalls } from '@xipkg/calls-providers';
 import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 import { CSS } from '@dnd-kit/utilities';
-import { useTracks, usePersistentUserChoices, useLocalParticipant, useTrackToggle, useAudioWaveform } from '@livekit/components-react';
+import { useTracks, usePersistentUserChoices, useLocalParticipant, useTrackToggle, useAudioWaveform, ScreenShareIcon } from '@livekit/components-react';
 import { Track, RemoteTrackPublication } from 'livekit-client';
 import { applyPinsFirst, useCallStore } from '@xipkg/calls-store';
 import { useScreenShareCleanup, useSortedTracks, useClassroomPins, useVideoBlur, useDeviceMenuGroups, useSyncModeToOthers, useParticipantJoinSync, useParticipantSounds } from '@xipkg/calls-hooks';
@@ -15,7 +15,7 @@ import { Button } from '@xipkg/button';
 import { ArrowLeft, ArrowRight, Account, SoundTwo, Users, External, ChevronUp, WhiteBoard, Maximize, MicrophoneOff, RedLine, ChevronBottom, ArrowUp } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { useTranslation } from 'react-i18next';
-import { ParticipantTile, DevicesBar, LessonRecordButton, ScreenShareButton, DisconnectButton, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator } from '@xipkg/calls-ui';
+import { ParticipantTile, DevicesBar, LessonRecordButton, ScreenShareButton, DisconnectButton, ScreenShareStageToggle, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator, VideoTrack, ScreenShareZoom } from '@xipkg/calls-ui';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@xipkg/tooltip';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem } from '@xipkg/dropdown';
 import { useChatStore, Chat, ChatButton } from '@xipkg/calls-chat';
@@ -232,8 +232,13 @@ var useCompactNavigation = () => {
   const baseSorted = useSortedTracks(participants, 1);
   const { pins } = useClassroomPins();
   const sorted = useMemo(() => applyPinsFirst(baseSorted, pins), [baseSorted, pins]);
-  const currentParticipant = sorted[currentParticipantIndex] || null;
-  const totalParticipants = sorted.length;
+  const screenShareStageIdentity = useCallStore((state) => state.screenShareStageIdentity);
+  const visibleSorted = useMemo(() => {
+    if (!screenShareStageIdentity) return sorted;
+    return sorted.filter((trackRef) => trackRef.source !== Track.Source.ScreenShare);
+  }, [screenShareStageIdentity, sorted]);
+  const currentParticipant = visibleSorted[currentParticipantIndex] || null;
+  const totalParticipants = visibleSorted.length;
   const canGoNext = currentParticipantIndex < totalParticipants - 1;
   const canGoPrev = currentParticipantIndex > 0;
   const goToNext = () => {
@@ -262,9 +267,13 @@ var useCompactNavigation = () => {
       setCurrentParticipantIndex(0);
     }
   }, [pinsKey, pins.length]);
+  useEffect(() => {
+    if (!screenShareStageIdentity) return;
+    setCurrentParticipantIndex(0);
+  }, [screenShareStageIdentity]);
   return {
     currentParticipant,
-    participants: sorted,
+    participants: visibleSorted,
     currentIndex: currentParticipantIndex,
     totalParticipants,
     canGoNext,
@@ -554,7 +563,8 @@ function CompactCallCollapsedBar({
   participant,
   audioTrack,
   onExpand,
-  className
+  className,
+  style
 }) {
   const { t } = useTranslation("calls");
   const { bars } = useAudioWaveform(audioTrack ?? void 0, {
@@ -565,6 +575,7 @@ function CompactCallCollapsedBar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      style,
       className: cn(
         "bg-background-surface border-border-default flex items-center gap-2 rounded-2xl border px-2 py-2 shadow-lg",
         className
@@ -620,50 +631,70 @@ function CompactNavigationControls({
   onPrev,
   onNext,
   currentIndex,
-  totalParticipants
+  totalParticipants,
+  persistent = false
 }) {
   const { t } = useTranslation("calls");
+  const hoverOnly = persistent ? "" : "sm:opacity-0 sm:group-hover:opacity-100";
   if (totalParticipants <= 1) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("div", { className: "bg-background-subtle/80 flex gap-1 rounded-full px-2 py-1 backdrop-blur-sm transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: Array.from({ length: totalParticipants }, (_, index) => /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(
+      "div",
       {
-        type: "button",
-        onClick: () => {
-        },
-        className: `h-1.5 w-1.5 rounded-full transition-colors ${index === currentIndex ? "bg-text-primary" : "bg-text-primary/40 hover:bg-text-primary/70"}`,
-        "aria-label": t("compactView.participant", { index: index + 1 })
-      },
-      index
-    )) }) }),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 left-2 -translate-y-1/2 transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        disabled: !canPrev,
-        onClick: onPrev,
-        className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        children: [
-          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.prevParticipant") })
-        ]
+        className: `bg-background-subtle/80 flex gap-1 rounded-full px-2 py-1 backdrop-blur-sm transition-opacity duration-200 ${hoverOnly}`,
+        children: Array.from({ length: totalParticipants }, (_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+            },
+            className: `h-1.5 w-1.5 rounded-full transition-colors ${index === currentIndex ? "bg-text-primary" : "bg-text-primary/40 hover:bg-text-primary/70"}`,
+            "aria-label": t("compactView.participant", { index: index + 1 })
+          },
+          index
+        ))
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 right-2 -translate-y-1/2 transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        type: "button",
-        disabled: !canNext,
-        onClick: onNext,
-        className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        children: [
-          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.nextParticipant") })
-        ]
+        className: `pointer-events-auto absolute top-1/2 left-2 -translate-y-1/2 transition-opacity duration-200 ${hoverOnly}`,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canPrev,
+            onClick: onPrev,
+            className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.prevParticipant") })
+            ]
+          }
+        )
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `pointer-events-auto absolute top-1/2 right-2 -translate-y-1/2 transition-opacity duration-200 ${hoverOnly}`,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canNext,
+            onClick: onNext,
+            className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.nextParticipant") })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 function CompactMultiViewControls({
@@ -718,7 +749,9 @@ function CompactCallVideoArea({
   multiCanNext,
   onMultiPrev,
   onMultiNext,
-  onAudioExpand
+  onAudioExpand,
+  tileWidth,
+  tileHeight
 }) {
   const { t } = useTranslation("calls");
   const pip = usePiP();
@@ -764,9 +797,9 @@ function CompactCallVideoArea({
         !isMobile && compactViewMode === "expanded" && "h-auto"
       ),
       style: isMobile ? void 0 : {
-        width: COMPACT_PANEL_WIDTH_PX,
+        width: tileWidth != null ? "100%" : COMPACT_PANEL_WIDTH_PX,
         touchAction: "none",
-        ...compactViewMode === "basic" ? { height: TILE_HEIGHT_16_9_PX } : {}
+        ...compactViewMode === "basic" ? { height: tileHeight ?? TILE_HEIGHT_16_9_PX } : {}
       },
       children: [
         isMobile ? currentParticipant ? /* @__PURE__ */ jsx("div", { className: "relative h-full min-h-0 w-full min-w-0", children: /* @__PURE__ */ jsx(
@@ -821,6 +854,7 @@ function CompactCallVideoArea({
           }
         ) }) : emptyState,
         showPinPiPOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1", children: [
+          overlayTrackRef.source === Track.Source.ScreenShare ? /* @__PURE__ */ jsx(ScreenShareStageToggle, { trackRef: overlayTrackRef, inline: true }) : null,
           /* @__PURE__ */ jsx(ParticipantPinToggle, { trackRef: overlayTrackRef, inline: true }),
           showPiPButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -855,7 +889,8 @@ function CompactCallVideoArea({
             onPrev,
             onNext,
             currentIndex,
-            totalParticipants
+            totalParticipants,
+            persistent: tileHeight != null
           }
         )
       ]
@@ -871,9 +906,11 @@ function CompactCallBottomBar({
   showBackToBoardButton,
   onBackToBoard,
   onMaximize,
-  isTutor
+  isTutor,
+  stageCompact = false
 }) {
   const { t } = useTranslation("calls");
+  const screenShareStage = useCallStore((state) => state.screenShareStageIdentity);
   const nextViewMode = getNextCompactViewMode(compactViewMode);
   const viewModeToggleMeta = {
     expanded: { Icon: Users, label: t("compactView.mode.expanded") },
@@ -885,110 +922,125 @@ function CompactCallBottomBar({
     "bg-background-surface border-border-default flex items-center justify-center rounded-2xl border p-1",
     withOutShadows ? "" : "shadow-lg"
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-[40px] shrink-0 flex-row pb-[max(0px,env(safe-area-inset-bottom))]", children: [
-    /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
-      DevicesBar,
-      {
-        className: "h-[32px] w-[32px]",
-        microTrack: devices.microTrack,
-        microEnabled: devices.microEnabled,
-        microTrackToggle: devices.microTrackToggle,
-        videoTrack: devices.videoTrack,
-        videoEnabled: devices.videoEnabled,
-        videoTrackToggle: devices.videoTrackToggle
-      }
-    ) }),
-    !isMobile && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "icon",
-          variant: "none",
-          onClick: onViewModeToggle,
-          className: "hover:bg-background-page text-text-primary h-8 w-8 rounded-xl p-0",
-          "aria-label": viewModeToggleMeta.label,
-          children: /* @__PURE__ */ jsx(ViewModeIcon, { className: "h-6 w-6" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: viewModeToggleMeta.label })
-    ] }) }),
-    showBackToBoardButton && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "icon",
-          variant: "primary",
-          className: "h-8 w-8 rounded-xl p-0",
-          onClick: onBackToBoard,
-          "aria-label": t("compactView.toBoardAria"),
-          children: /* @__PURE__ */ jsx(WhiteBoard, { className: "fill-action-primary-text h-6 w-6" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.toBoardTooltip") })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
-      /* @__PURE__ */ jsx(LessonRecordButton, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx(ChatButton, { className: "h-8 w-8 min-w-8 rounded-xl" }),
-      /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8 min-w-8" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
-      isTutor ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-10 shrink-0 flex-row",
+        stageCompact ? "max-w-full [scrollbar-width:none] overflow-x-auto [&::-webkit-scrollbar]:hidden [&>*]:shrink-0" : "pb-[max(0px,env(safe-area-inset-bottom))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
+          DevicesBar,
+          {
+            className: "h-[32px] w-[32px]",
+            microTrack: devices.microTrack,
+            microEnabled: devices.microEnabled,
+            microTrackToggle: devices.microTrackToggle,
+            videoTrack: devices.videoTrack,
+            videoEnabled: devices.videoEnabled,
+            videoTrackToggle: devices.videoTrackToggle
+          }
+        ) }),
+        !isMobile && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             Button,
             {
               size: "icon",
               variant: "none",
-              className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
-              children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+              onClick: onViewModeToggle,
+              className: "hover:bg-background-page text-text-primary h-8 w-8 rounded-xl p-0",
+              "aria-label": viewModeToggleMeta.label,
+              children: /* @__PURE__ */ jsx(ViewModeIcon, { className: "h-6 w-6" })
             }
-          ) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
-        ] }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "z-1000 min-w-[200px]", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-text-secondary text-sm", children: t("compactView.returnMenuLabel") }),
-          /* @__PURE__ */ jsx(
-            DropdownMenuItem,
-            {
-              onClick: () => onMaximize(false),
-              className: "text-text-primary cursor-pointer text-sm",
-              children: t("compactView.returnOnlyMe")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DropdownMenuItem,
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: viewModeToggleMeta.label })
+        ] }) }),
+        showBackToBoardButton && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
             {
-              onClick: () => onMaximize(true),
-              className: "text-text-primary cursor-pointer text-sm",
-              children: t("compactView.returnEveryone")
+              size: "icon",
+              variant: "primary",
+              className: "h-8 w-8 rounded-xl p-0",
+              onClick: onBackToBoard,
+              "aria-label": t("compactView.toBoardAria"),
+              children: /* @__PURE__ */ jsx(WhiteBoard, { className: "fill-action-primary-text h-6 w-6" })
             }
-          )
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.toBoardTooltip") })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
+          /* @__PURE__ */ jsx(LessonRecordButton, { className: "h-8 w-8" }),
+          /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-8 w-8" }),
+          /* @__PURE__ */ jsx(ChatButton, { className: "h-8 w-8 min-w-8 rounded-xl" }),
+          /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8 min-w-8" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
+          !screenShareStage && (isTutor ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "icon",
+                  variant: "none",
+                  className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
+                  children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "z-1000 min-w-[200px]", children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-text-secondary text-sm", children: t("compactView.returnMenuLabel") }),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  onClick: () => onMaximize(false),
+                  className: "text-text-primary cursor-pointer text-sm",
+                  children: t("compactView.returnOnlyMe")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  onClick: () => onMaximize(true),
+                  className: "text-text-primary cursor-pointer text-sm",
+                  children: t("compactView.returnEveryone")
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: "none",
+                onClick: () => onMaximize(false),
+                className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
+                children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
+          ] })),
+          /* @__PURE__ */ jsx(DisconnectButton, { className: "h-[32px] w-[32px] rounded-xl" })
         ] })
-      ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "icon",
-            variant: "none",
-            onClick: () => onMaximize(false),
-            className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
-            children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
-      ] }),
-      /* @__PURE__ */ jsx(DisconnectButton, { className: "h-[32px] w-[32px] rounded-xl" })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
-var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
+var CompactCall = ({
+  saveUserChoices = true,
+  withOutShadows = false,
+  freeDrag = false,
+  stageFrame = null
+}) => {
   const isMobile = usePhoneLayout();
+  const lockCompactModes = stageFrame?.lockCompactModes === true;
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: "draggable-call",
-    disabled: isMobile
+    id: freeDrag ? "screen-share-stage-compact" : "draggable-call",
+    disabled: freeDrag ? false : isMobile
   });
-  const style = isMobile ? void 0 : { transform: CSS.Translate.toString(transform) };
+  const style = !freeDrag && isMobile ? void 0 : { transform: CSS.Translate.toString(transform) };
   const { saveAudioInputEnabled, saveVideoInputEnabled } = usePersistentUserChoices({
     preventSave: !saveUserChoices
   });
@@ -1121,22 +1173,29 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
     "div",
     {
       ref: setNodeRef,
+      ...freeDrag ? listeners : {},
       style: {
         ...style,
-        ...isMobile ? {} : { width: COMPACT_PANEL_WIDTH_PX, touchAction: "none" }
+        ...isMobile && !freeDrag ? {} : {
+          width: stageFrame?.width ?? COMPACT_PANEL_WIDTH_PX,
+          touchAction: "none",
+          maxWidth: "100%"
+        }
       },
-      className: `compact-call-container flex flex-col ${isMobile ? "w-full" : "touch-none [&_video]:touch-none"}`,
+      className: `compact-call-container flex flex-col ${isMobile && !freeDrag ? "w-full" : "touch-none [&_video]:touch-none"} ${freeDrag ? "cursor-grab active:cursor-grabbing" : ""}`,
       children: [
         /* @__PURE__ */ jsx(
           CompactCallVideoArea,
           {
-            isMobile,
             isCollapsed,
             onCollapsedChange: setIsCollapsed,
             withOutShadows,
-            dragAttributes: attributes,
-            dragListeners: listeners,
-            compactViewMode,
+            dragAttributes: freeDrag ? void 0 : attributes,
+            dragListeners: freeDrag ? void 0 : listeners,
+            compactViewMode: lockCompactModes ? "basic" : compactViewMode,
+            tileWidth: stageFrame?.width,
+            tileHeight: stageFrame?.tileHeight,
+            isMobile: stageFrame ? false : isMobile,
             currentParticipant,
             currentAudioTrack: currentAudioTrack ?? null,
             totalParticipants,
@@ -1176,7 +1235,8 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
                 deviceGroups: cameraGroups
               }
             },
-            isMobile,
+            isMobile: lockCompactModes || isMobile && stageFrame == null,
+            stageCompact: lockCompactModes,
             compactViewMode,
             onViewModeToggle: () => setCompactViewMode(getNextCompactViewMode(compactViewMode)),
             showBackToBoardButton: !!showBackToBoardButton,
@@ -1189,6 +1249,340 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
     }
   );
 };
+
+// src/ui/stageLayout.ts
+var EDGE_PX2 = 12;
+var CONTROLS_PX = 48;
+var EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+function viewportBox() {
+  const viewport = window.visualViewport;
+  return {
+    width: viewport?.width ?? window.innerWidth,
+    height: viewport?.height ?? window.innerHeight,
+    offsetLeft: viewport?.offsetLeft ?? 0,
+    offsetTop: viewport?.offsetTop ?? 0
+  };
+}
+function readSafeInsets() {
+  if (typeof document === "undefined") return EMPTY_INSETS;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)";
+  document.body.appendChild(probe);
+  const style = getComputedStyle(probe);
+  const insets = {
+    top: Number.parseFloat(style.paddingTop) || 0,
+    right: Number.parseFloat(style.paddingRight) || 0,
+    bottom: Number.parseFloat(style.paddingBottom) || 0,
+    left: Number.parseFloat(style.paddingLeft) || 0
+  };
+  probe.remove();
+  return insets;
+}
+function computeStageFrame() {
+  const box = viewportBox();
+  const insets = readSafeInsets();
+  const landscape = box.width > box.height;
+  const handheld = box.width <= 720 || box.height <= 500;
+  if (!handheld) {
+    const width2 = 400;
+    return {
+      handheld: false,
+      landscape,
+      lockCompactModes: false,
+      width: width2,
+      tileHeight: Math.round(width2 * 9 / 16),
+      insets
+    };
+  }
+  const maxWidth = Math.max(220, box.width - insets.left - insets.right - EDGE_PX2 * 2);
+  const width = Math.min(400, maxWidth);
+  const naturalTile = Math.round(width * 9 / 16);
+  const maxPanel = box.height * 0.36;
+  const tileHeight = landscape ? naturalTile : Math.max(84, Math.min(naturalTile, Math.floor(maxPanel - CONTROLS_PX)));
+  return { handheld: true, landscape, lockCompactModes: !landscape, width, tileHeight, insets };
+}
+function sameStageFrame(left, right) {
+  return left.handheld === right.handheld && left.landscape === right.landscape && left.lockCompactModes === right.lockCompactModes && left.width === right.width && left.tileHeight === right.tileHeight && left.insets.top === right.insets.top && left.insets.right === right.insets.right && left.insets.bottom === right.insets.bottom && left.insets.left === right.insets.left;
+}
+function clampStagePosition(x, y, width, height, insets) {
+  const box = viewportBox();
+  const minX = box.offsetLeft + insets.left + 8;
+  const minY = box.offsetTop + insets.top + 8;
+  const maxX = Math.max(minX, box.offsetLeft + box.width - insets.right - width - 8);
+  const maxY = Math.max(minY, box.offsetTop + box.height - insets.bottom - height - 8);
+  return {
+    x: Math.min(Math.max(minX, x), maxX),
+    y: Math.min(Math.max(minY, y), maxY)
+  };
+}
+function defaultStagePosition(frame) {
+  const box = viewportBox();
+  const panelHeight = frame.tileHeight + CONTROLS_PX + 8;
+  if (!frame.handheld) {
+    return clampStagePosition(
+      EDGE_PX2 + frame.insets.left,
+      EDGE_PX2 + frame.insets.top,
+      frame.width,
+      panelHeight,
+      frame.insets
+    );
+  }
+  const y = box.offsetTop + box.height - frame.insets.bottom - EDGE_PX2 - panelHeight;
+  const x = frame.landscape ? box.offsetLeft + frame.insets.left + EDGE_PX2 : box.offsetLeft + (box.width - frame.width) / 2;
+  return clampStagePosition(x, y, frame.width, panelHeight, frame.insets);
+}
+function stagePanelHeight(frame) {
+  return frame.tileHeight + CONTROLS_PX + 8;
+}
+var STAGE_GONE_MS = 500;
+function initialStageFrame() {
+  if (typeof window === "undefined") {
+    return {
+      handheld: false,
+      landscape: false,
+      lockCompactModes: false,
+      width: 400,
+      tileHeight: 225,
+      insets: { top: 0, right: 0, bottom: 0, left: 0 }
+    };
+  }
+  return computeStageFrame();
+}
+var ScreenShareStage = ({ identity }) => {
+  const { t } = useTranslation("calls");
+  const updateStore = useCallStore((state) => state.updateStore);
+  const closePiP = usePiP()?.closePiP;
+  const overlayRef = useRef(null);
+  const panelRef = useRef(null);
+  const movedRef = useRef(false);
+  const landscapeRef = useRef(null);
+  const [frame, setFrame] = useState(initialStageFrame);
+  const [position, setPosition] = useState(() => defaultStagePosition(initialStageFrame()));
+  const tracks = useTracks([{ source: Track.Source.ScreenShare, withPlaceholder: false }], {
+    onlySubscribed: false
+  });
+  const track = tracks.find((item) => item.participant.identity === identity) ?? null;
+  const publication = track?.publication;
+  const hasTrack = Boolean(publication);
+  const sensors = useSensors(
+    useSensor(CompactPointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(CompactTouchSensor, { activationConstraint: { distance: 8 } })
+  );
+  useEffect(() => {
+    closePiP?.();
+  }, [closePiP]);
+  useEffect(() => {
+    if (!(publication instanceof RemoteTrackPublication) || publication.isSubscribed) return;
+    publication.setSubscribed(true);
+  }, [publication]);
+  useEffect(() => {
+    if (hasTrack) return void 0;
+    const timeoutId = window.setTimeout(() => {
+      if (useCallStore.getState().screenShareStageIdentity === identity) {
+        useCallStore.getState().updateStore("screenShareStageIdentity", null);
+      }
+    }, STAGE_GONE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [hasTrack, identity]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      updateStore("screenShareStageIdentity", null);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [updateStore]);
+  useEffect(() => {
+    const portalNode = overlayRef.current;
+    if (!portalNode) return void 0;
+    const hidden = [];
+    Array.from(document.body.children).forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      if (node === portalNode || node.contains(portalNode)) return;
+      if (node.hasAttribute("data-sonner-toaster")) return;
+      if (node.hasAttribute("inert")) return;
+      node.setAttribute("inert", "");
+      hidden.push(node);
+    });
+    const { body, documentElement } = document;
+    const previousBodyOverflow = body.style.overflow;
+    const previousHtmlOverflow = documentElement.style.overflow;
+    body.style.overflow = "hidden";
+    documentElement.style.overflow = "hidden";
+    portalNode?.focus();
+    return () => {
+      hidden.forEach((node) => node.removeAttribute("inert"));
+      body.style.overflow = previousBodyOverflow;
+      documentElement.style.overflow = previousHtmlOverflow;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const sync = () => {
+      const next = computeStageFrame();
+      setFrame((prev) => sameStageFrame(prev, next) ? prev : next);
+      const flipped = landscapeRef.current !== null && landscapeRef.current !== next.landscape;
+      landscapeRef.current = next.landscape;
+      if (flipped) movedRef.current = false;
+      setPosition((prev) => {
+        if (!movedRef.current) {
+          const placed = defaultStagePosition(next);
+          if (placed.x === prev.x && placed.y === prev.y) return prev;
+          return placed;
+        }
+        const node2 = panelRef.current;
+        const clamped = clampStagePosition(
+          prev.x,
+          prev.y,
+          node2?.offsetWidth ?? next.width,
+          node2?.offsetHeight ?? stagePanelHeight(next),
+          next.insets
+        );
+        if (clamped.x === prev.x && clamped.y === prev.y) return prev;
+        return clamped;
+      });
+    };
+    sync();
+    const viewport = window.visualViewport;
+    window.addEventListener("resize", sync);
+    window.addEventListener("orientationchange", sync);
+    viewport?.addEventListener("resize", sync);
+    viewport?.addEventListener("scroll", sync);
+    const node = panelRef.current;
+    const observer = new ResizeObserver(sync);
+    if (node) observer.observe(node);
+    return () => {
+      window.removeEventListener("resize", sync);
+      window.removeEventListener("orientationchange", sync);
+      viewport?.removeEventListener("resize", sync);
+      viewport?.removeEventListener("scroll", sync);
+      observer.disconnect();
+    };
+  }, []);
+  const handleDragEnd = (event) => {
+    movedRef.current = true;
+    const node = panelRef.current;
+    const current = computeStageFrame();
+    setPosition((prev) => {
+      const next = clampStagePosition(
+        prev.x + event.delta.x,
+        prev.y + event.delta.y,
+        node?.offsetWidth ?? current.width,
+        node?.offsetHeight ?? stagePanelHeight(current),
+        current.insets
+      );
+      if (next.x === prev.x && next.y === prev.y) return prev;
+      return next;
+    });
+  };
+  if (typeof document === "undefined") return null;
+  const sharerName = track?.participant.name;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t("participant.stageTitle"),
+        tabIndex: -1,
+        className: "screen-share-stage fixed inset-0 z-[2100] bg-black outline-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
+            track && publication ? frame.handheld ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(
+              VideoTrack,
+              {
+                trackRef: track,
+                manageSubscription: false,
+                className: "h-full w-full bg-black object-contain"
+              }
+            ) }) : /* @__PURE__ */ jsx(ScreenShareZoom, { trackRef: track, className: "rounded-none", children: /* @__PURE__ */ jsx(
+              VideoTrack,
+              {
+                trackRef: track,
+                manageSubscription: false,
+                className: "h-full w-full bg-black object-contain"
+              }
+            ) }) : null,
+            track ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-background-surface/80 pointer-events-none absolute z-20 flex h-6 max-w-[calc(100%-96px)] items-center gap-1.5 rounded-lg px-1.5 py-1 backdrop-blur",
+                style: frame.handheld ? {
+                  top: "max(12px, env(safe-area-inset-top))",
+                  left: "max(12px, env(safe-area-inset-left))"
+                } : {
+                  bottom: "max(16px, env(safe-area-inset-bottom))",
+                  left: "max(16px, env(safe-area-inset-left))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ScreenShareIcon, { style: { marginRight: "0.25rem" } }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs-base-size text-text-primary truncate leading-[16px]", children: [
+                    t("participant.screenSharePrefix"),
+                    sharerName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\xA0",
+                      sharerName
+                    ] }) : null
+                  ] })
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "absolute z-40 flex items-center gap-1",
+                style: {
+                  top: "max(12px, env(safe-area-inset-top))",
+                  right: "max(12px, env(safe-area-inset-right))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ScreenShareStageToggle, { trackRef: track ?? void 0, inline: true }),
+                  track ? /* @__PURE__ */ jsx(ParticipantPinToggle, { trackRef: track, inline: true }) : null
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors,
+              onDragEnd: handleDragEnd,
+              modifiers: [restrictToWindowEdges],
+              autoScroll: false,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: panelRef,
+                  className: "absolute z-30 w-max",
+                  style: { left: position.x, top: position.y },
+                  children: /* @__PURE__ */ jsx(
+                    CompactCall,
+                    {
+                      freeDrag: true,
+                      stageFrame: frame.handheld ? {
+                        width: frame.width,
+                        tileHeight: frame.tileHeight,
+                        lockCompactModes: frame.lockCompactModes
+                      } : null
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Chat,
+            {
+              forceSheet: frame.handheld,
+              compactPositionStyle: frame.handheld ? void 0 : { top: 56, right: 16, bottom: 16, zIndex: 20 }
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
 var useCompactDragActive = () => {
   const [isDragging, setIsDragging] = useState(false);
   useDndMonitor({
@@ -1216,7 +1610,7 @@ var DroppableCorner = ({ id, style }) => {
     {
       ref: setNodeRef,
       style,
-      className: `pointer-events-none absolute z-100 size-1/3 transition-all duration-200 ${isDragging ? "bg-status-info-background/20 ring-border-selected rounded-lg ring-2" : ""}`
+      className: `pointer-events-none absolute z-20 size-1/3 transition-all duration-200 ${isDragging ? "bg-status-info-background/20 ring-border-selected rounded-lg ring-2" : ""}`
     }
   );
 };
@@ -1268,47 +1662,48 @@ var Compact = ({ children, hideOverlay = false }) => {
   const isBoardPage = navigation.pathnameIncludes("/board");
   const insets = useBoardChromeInsets(isBoardPage);
   const mobileContentMarginTop = hideOverlay || !isMobile ? 0 : (headerHeight > 0 ? headerHeight : COMPACT_MOBILE_OVERLAY_FALLBACK_PX) + COMPACT_MOBILE_CONTENT_GAP_PX;
-  const container = /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `relative flex h-dvh flex-col bg-transparent`,
-      "data-board-chrome-aware": "",
-      children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        !hideOverlay && /* @__PURE__ */ jsx("div", { ref: headerRef, className: "fixed top-2 right-0 left-0 z-10 w-full px-2", children: /* @__PURE__ */ jsx(CompactCall, { withOutShadows: true }) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex min-h-0 flex-1 flex-col",
-            style: { marginTop: mobileContentMarginTop },
-            children
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        !hideOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DroppableAreas, { insets }),
-          /* @__PURE__ */ jsx(Chat, { compactPositionStyle: chatPositionStyle(activeCorner, insets) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute z-100 transition-all duration-500 ease-out",
-              style: cornerStyle(activeCorner, insets),
-              children: /* @__PURE__ */ jsx(CompactCall, {})
-            }
-          )
-        ] }),
+  const container = /* @__PURE__ */ jsx("div", { className: `relative flex h-dvh flex-col bg-transparent`, "data-board-chrome-aware": "", children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideOverlay && /* @__PURE__ */ jsx("div", { ref: headerRef, className: "fixed top-2 right-0 left-0 z-10 w-full px-2", children: /* @__PURE__ */ jsx(CompactCall, { withOutShadows: true }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex min-h-0 flex-1 flex-col",
+        style: { marginTop: mobileContentMarginTop },
         children
-      ] })
-    }
-  );
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DroppableAreas, { insets }),
+      /* @__PURE__ */ jsx(Chat, { compactPositionStyle: chatPositionStyle(activeCorner, insets) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute z-20 transition-all duration-500 ease-out",
+          style: cornerStyle(activeCorner, insets),
+          children: /* @__PURE__ */ jsx(CompactCall, {})
+        }
+      )
+    ] }),
+    children
+  ] }) });
   return /* @__PURE__ */ jsx(DndContext, { sensors, onDragEnd: handleDragEnd, modifiers: [restrictToWindowEdges], children: container });
 };
 var CompactViewInner = ({ children }) => {
   const { mode, token } = useCallStore();
+  const screenShareStageIdentity = useCallStore((state) => state.screenShareStageIdentity);
+  const isStarted = useCallStore((state) => state.isStarted);
   const { room } = useRoom();
   const pip = usePiP();
   const isPiPActive = !!pip?.isPiPActive;
   useParticipantJoinSync();
   useParticipantSounds();
+  useEffect(() => {
+    if (!screenShareStageIdentity) return;
+    if (!room || !token || !isStarted) {
+      useCallStore.getState().updateStore("screenShareStageIdentity", null);
+    }
+  }, [isStarted, room, screenShareStageIdentity, token]);
   const navigation = useCallsNavigation();
   const { updateStore: updateChatStore } = useChatStore();
   useEffect(() => {
@@ -1333,14 +1728,17 @@ var CompactViewInner = ({ children }) => {
       /* @__PURE__ */ jsx(PermissionsDialog, {})
     ] });
   }
+  const stageLayer = screenShareStageIdentity && room && token && isStarted ? /* @__PURE__ */ jsx(ScreenShareStage, { identity: screenShareStageIdentity }, screenShareStageIdentity) : null;
   if (mode === "full") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       contentWrapper,
+      stageLayer,
       /* @__PURE__ */ jsx(PermissionsDialog, {})
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Compact, { hideOverlay: isPiPActive, children }),
+    /* @__PURE__ */ jsx(Compact, { hideOverlay: isPiPActive || Boolean(screenShareStageIdentity), children }),
+    stageLayer,
     /* @__PURE__ */ jsx(PermissionsDialog, {})
   ] });
 };