pptx-react-viewer 1.0.11 → 1.0.12

package/dist/index.js

@@ -43328,7 +43328,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       function useSyncExternalStore$2(subscribe3, getSnapshot2) {
-        didWarnOld18Alpha || void 0 === React95.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React96.startTransition || (didWarnOld18Alpha = true, console.error(
           "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
         ));
         var value = getSnapshot2();
@@ -43338,7 +43338,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState84({
+        cachedValue = useState85({
           inst: { value, getSnapshot: getSnapshot2 }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -43350,7 +43350,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe3, value, getSnapshot2]
         );
-        useEffect68(
+        useEffect71(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe3(function() {
@@ -43376,8 +43376,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot2();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React95 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState84 = React95.useState, useEffect68 = React95.useEffect, useLayoutEffect7 = React95.useLayoutEffect, useDebugValue = React95.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      exports$1.useSyncExternalStore = void 0 !== React95.useSyncExternalStore ? React95.useSyncExternalStore : shim;
+      var React96 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState85 = React96.useState, useEffect71 = React96.useEffect, useLayoutEffect7 = React96.useLayoutEffect, useDebugValue = React96.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports$1.useSyncExternalStore = void 0 !== React96.useSyncExternalStore ? React96.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
   }
@@ -43400,9 +43400,9 @@ var require_with_selector_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React95 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef69 = React95.useRef, useEffect68 = React95.useEffect, useMemo41 = React95.useMemo, useDebugValue = React95.useDebugValue;
+      var React96 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef72 = React96.useRef, useEffect71 = React96.useEffect, useMemo41 = React96.useMemo, useDebugValue = React96.useDebugValue;
       exports$1.useSyncExternalStoreWithSelector = function(subscribe3, getSnapshot2, getServerSnapshot2, selector, isEqual) {
-        var instRef = useRef69(null);
+        var instRef = useRef72(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
@@ -43443,7 +43443,7 @@ var require_with_selector_development = __commonJS({
           [getSnapshot2, getServerSnapshot2, selector, isEqual]
         );
         var value = useSyncExternalStore3(subscribe3, instRef[0], instRef[1]);
-        useEffect68(
+        useEffect71(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -91128,6 +91128,542 @@ function useVirtualizedSlides({
     scrollToIndex
   };
 }
+
+// src/viewer/hooks/collaboration/sanitize.ts
+var ROOM_ID_REGEX = /^[a-zA-Z0-9_-]{1,128}$/;
+function validateRoomId(roomId) {
+  if (!ROOM_ID_REGEX.test(roomId)) {
+    throw new Error(
+      `Invalid collaboration room ID: "${roomId}". Must be 1-128 alphanumeric characters, hyphens, or underscores.`
+    );
+  }
+  return roomId;
+}
+function sanitizeUserName(name) {
+  if (typeof name !== "string") {
+    return "Anonymous";
+  }
+  const stripped = name.replace(/<[^>]*>/g, "");
+  const trimmed = stripped.trim().slice(0, 64);
+  return trimmed || "Anonymous";
+}
+function clampCursorPosition(value, min2, max2) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return 0;
+  }
+  const margin = 20;
+  return Math.max(min2 - margin, Math.min(max2 + margin, value));
+}
+var HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
+function sanitizeColor(color, fallback = "#6366f1") {
+  if (typeof color !== "string") {
+    return fallback;
+  }
+  return HEX_COLOR_REGEX.test(color) ? color : fallback;
+}
+function sanitizeAvatarUrl(url) {
+  if (typeof url !== "string") {
+    return void 0;
+  }
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === "https:" || parsed.protocol === "http:" || parsed.protocol === "data:") {
+      return url;
+    }
+  } catch {
+  }
+  return void 0;
+}
+function sanitizeSlideIndex(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return 0;
+  }
+  return Math.max(0, Math.floor(value));
+}
+function sanitizePresence(raw, canvasWidth, canvasHeight) {
+  if (typeof raw.clientId !== "number") {
+    return null;
+  }
+  return {
+    clientId: raw.clientId,
+    userName: sanitizeUserName(raw.userName),
+    userAvatar: sanitizeAvatarUrl(raw.userAvatar),
+    userColor: sanitizeColor(raw.userColor),
+    activeSlideIndex: sanitizeSlideIndex(raw.activeSlideIndex),
+    cursorX: clampCursorPosition(raw.cursorX, 0, canvasWidth),
+    cursorY: clampCursorPosition(raw.cursorY, 0, canvasHeight),
+    lastUpdated: typeof raw.lastUpdated === "string" ? raw.lastUpdated : (/* @__PURE__ */ new Date()).toISOString(),
+    selectedElementId: typeof raw.selectedElementId === "string" ? raw.selectedElementId.slice(0, 128) : void 0,
+    role: raw.role === "broadcaster" || raw.role === "viewer" || raw.role === "collaborator" ? raw.role : void 0
+  };
+}
+var BROADCAST_THROTTLE_MS = 50;
+var STALE_PRESENCE_MS = 3e4;
+function usePresenceTracking({
+  awareness,
+  localClientId,
+  userName,
+  userColor,
+  userAvatar,
+  role,
+  canvasWidth,
+  canvasHeight
+}) {
+  const [remoteUsers, setRemoteUsers] = React10.useState([]);
+  const lastBroadcastRef = React10.useRef(0);
+  const pendingBroadcastRef = React10.useRef(null);
+  const latestLocalState = React10.useRef({});
+  const broadcastPresence = React10.useCallback(
+    (update2) => {
+      if (!awareness) {
+        return;
+      }
+      Object.assign(latestLocalState.current, update2);
+      const now = Date.now();
+      const elapsed = now - lastBroadcastRef.current;
+      const flush = () => {
+        const state2 = {
+          ...latestLocalState.current,
+          userName,
+          userColor,
+          userAvatar,
+          role,
+          lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        awareness.setLocalStateField("presence", state2);
+        lastBroadcastRef.current = Date.now();
+      };
+      if (elapsed >= BROADCAST_THROTTLE_MS) {
+        if (pendingBroadcastRef.current) {
+          clearTimeout(pendingBroadcastRef.current);
+          pendingBroadcastRef.current = null;
+        }
+        flush();
+      } else if (!pendingBroadcastRef.current) {
+        pendingBroadcastRef.current = setTimeout(() => {
+          pendingBroadcastRef.current = null;
+          flush();
+        }, BROADCAST_THROTTLE_MS - elapsed);
+      }
+    },
+    [awareness, userName, userColor, userAvatar, role]
+  );
+  React10.useEffect(() => {
+    if (!awareness) {
+      return;
+    }
+    awareness.setLocalStateField("presence", {
+      userName,
+      userColor,
+      userAvatar,
+      role,
+      activeSlideIndex: 0,
+      cursorX: 0,
+      cursorY: 0,
+      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }, [awareness, userName, userColor, userAvatar, role]);
+  React10.useEffect(() => {
+    if (!awareness || localClientId === null) {
+      return;
+    }
+    const handleChange = () => {
+      const now = Date.now();
+      const states = awareness.getStates();
+      const users = [];
+      states.forEach((state2, cid) => {
+        if (cid === localClientId) {
+          return;
+        }
+        const raw = state2?.presence;
+        if (!raw || typeof raw !== "object") {
+          return;
+        }
+        const sanitized = sanitizePresence({ ...raw, clientId: cid }, canvasWidth, canvasHeight);
+        if (!sanitized) {
+          return;
+        }
+        const updatedAt = new Date(sanitized.lastUpdated).getTime();
+        if (Number.isNaN(updatedAt) || now - updatedAt > STALE_PRESENCE_MS) {
+          return;
+        }
+        users.push(sanitized);
+      });
+      setRemoteUsers(users);
+    };
+    awareness.on("change", handleChange);
+    awareness.on("update", handleChange);
+    handleChange();
+    return () => {
+      awareness.off("change", handleChange);
+      awareness.off("update", handleChange);
+    };
+  }, [awareness, localClientId, canvasWidth, canvasHeight]);
+  React10.useEffect(() => {
+    if (!awareness) {
+      return;
+    }
+    const interval = setInterval(() => {
+      awareness.setLocalStateField("presence", {
+        ...latestLocalState.current,
+        userName,
+        userColor,
+        userAvatar,
+        role,
+        lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }, 1e4);
+    return () => clearInterval(interval);
+  }, [awareness, userName, userColor, userAvatar, role]);
+  React10.useEffect(() => {
+    return () => {
+      if (pendingBroadcastRef.current) {
+        clearTimeout(pendingBroadcastRef.current);
+      }
+    };
+  }, []);
+  return { remoteUsers, broadcastPresence };
+}
+function useYjsProvider({ config }) {
+  const [status, setStatus] = React10.useState("disconnected");
+  const [awareness, setAwareness] = React10.useState(null);
+  const [doc2, setDoc] = React10.useState(null);
+  const [clientId, setClientId] = React10.useState(null);
+  const cleanupRef = React10.useRef(null);
+  const init = React10.useCallback(async () => {
+    const roomId = validateRoomId(config.roomId);
+    setStatus("connecting");
+    try {
+      const [Y, { WebsocketProvider: WebsocketProvider2 }] = await Promise.all([Promise.resolve().then(() => (init_yjs(), yjs_exports)), Promise.resolve().then(() => (init_y_websocket(), y_websocket_exports))]);
+      const yDoc = new Y.Doc();
+      const provider = new WebsocketProvider2(
+        config.serverUrl,
+        roomId,
+        yDoc,
+        // eslint-disable-line @typescript-eslint/no-explicit-any
+        {
+          params: config.authToken ? { token: config.authToken } : void 0
+        }
+      );
+      const handleStatus = (event) => {
+        if (event.status === "connected") {
+          setStatus("connected");
+        } else if (event.status === "disconnected") {
+          setStatus("disconnected");
+        }
+      };
+      provider.on("status", handleStatus);
+      if (provider.wsconnected) {
+        setStatus("connected");
+      }
+      setDoc(yDoc);
+      setAwareness(provider.awareness);
+      setClientId(provider.awareness.clientID);
+      cleanupRef.current = () => {
+        provider.off("status", handleStatus);
+        provider.destroy();
+        yDoc.destroy();
+        setDoc(null);
+        setAwareness(null);
+        setClientId(null);
+        setStatus("disconnected");
+      };
+    } catch (err) {
+      console.warn(
+        "[pptx-viewer] Collaboration packages not available:",
+        err instanceof Error ? err.message : err
+      );
+      setStatus("error");
+    }
+  }, [config.roomId, config.serverUrl, config.authToken]);
+  React10.useEffect(() => {
+    init();
+    return () => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
+  }, [init]);
+  return { status, awareness, doc: doc2, clientId };
+}
+
+// src/viewer/hooks/collaboration/useCollaborativeState.ts
+function useCollaborativeState({
+  config,
+  canvasWidth,
+  canvasHeight
+}) {
+  const userColor = sanitizeColor(config.userColor, "#6366f1");
+  const { status, awareness, doc: doc2, clientId } = useYjsProvider({ config });
+  const { remoteUsers, broadcastPresence } = usePresenceTracking({
+    awareness,
+    localClientId: clientId,
+    userName: config.userName,
+    userColor,
+    userAvatar: config.userAvatar,
+    role: config.role,
+    canvasWidth,
+    canvasHeight
+  });
+  const connectedCount = status === "connected" ? remoteUsers.length + 1 : remoteUsers.length;
+  return {
+    status,
+    remoteUsers,
+    broadcastPresence,
+    connectedCount,
+    config,
+    doc: doc2
+  };
+}
+var CollaborationContext = React10.createContext(null);
+function useCollaboration() {
+  return React10.useContext(CollaborationContext);
+}
+function CollaborationProvider({
+  config,
+  canvasWidth,
+  canvasHeight,
+  children
+}) {
+  const value = useCollaborativeState({
+    config,
+    canvasWidth,
+    canvasHeight
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(CollaborationContext.Provider, { value, children });
+}
+function RemoteUserCursors({
+  remoteUsers,
+  activeSlideIndex,
+  canvasWidth,
+  canvasHeight
+}) {
+  const visibleUsers = remoteUsers.filter((u2) => u2.activeSlideIndex === activeSlideIndex);
+  if (visibleUsers.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "data-testid": "remote-user-cursors",
+      "data-export-ignore": "true",
+      className: "absolute inset-0 pointer-events-none",
+      style: { zIndex: 9999 },
+      width: canvasWidth,
+      height: canvasHeight,
+      viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
+      "aria-hidden": "true",
+      children: visibleUsers.map((user) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          transform: `translate(${user.cursorX}, ${user.cursorY})`,
+          "data-testid": `remote-cursor-${user.clientId}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M0 0 L0 16 L4.5 12.5 L8 20 L10.5 19 L7 11.5 L12 11 Z",
+                fill: user.userColor,
+                stroke: "#fff",
+                strokeWidth: 1,
+                opacity: 0.9
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(14, 18)", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  rx: 3,
+                  ry: 3,
+                  x: -2,
+                  y: -10,
+                  width: Math.min(user.userName.length * 7 + 8, 150),
+                  height: 16,
+                  fill: user.userColor,
+                  opacity: 0.85
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  fill: "#fff",
+                  fontSize: 10,
+                  fontFamily: "system-ui, sans-serif",
+                  fontWeight: 500,
+                  dominantBaseline: "central",
+                  y: -2,
+                  x: 2,
+                  children: user.userName.length > 20 ? `${user.userName.slice(0, 18)}...` : user.userName
+                }
+              )
+            ] })
+          ]
+        },
+        user.clientId
+      ))
+    }
+  );
+}
+var STATUS_STYLES = {
+  connected: {
+    dot: "bg-green-400",
+    text: "text-green-400",
+    label: "Connected"
+  },
+  connecting: {
+    dot: "bg-yellow-400 animate-pulse",
+    text: "text-yellow-400",
+    label: "Connecting..."
+  },
+  disconnected: {
+    dot: "bg-gray-500",
+    text: "text-gray-500",
+    label: "Disconnected"
+  },
+  error: {
+    dot: "bg-red-400",
+    text: "text-red-400",
+    label: "Connection error"
+  }
+};
+function CollaborationStatusIndicator({
+  status,
+  connectedCount
+}) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const style = STATUS_STYLES[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "collaboration-status",
+      className: "flex items-center gap-1.5",
+      "aria-label": t2("pptx.collaboration.statusAriaLabel", {
+        status: t2(`pptx.collaboration.status.${status}`),
+        count: connectedCount
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-block w-2 h-2 rounded-full ${style.dot}`, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] ${style.text}`, children: status === "connected" ? t2("pptx.collaboration.userCount", { count: connectedCount }) : t2(`pptx.collaboration.status.${status}`) })
+      ]
+    }
+  );
+}
+function CollaborationCursorOverlay({
+  activeSlideIndex,
+  canvasWidth,
+  canvasHeight,
+  selectedElementId
+}) {
+  const collab = useCollaboration();
+  const containerRef = React10.useRef(null);
+  const prevSelectionRef = React10.useRef(selectedElementId);
+  React10.useEffect(() => {
+    if (!collab || selectedElementId === prevSelectionRef.current) {
+      return;
+    }
+    prevSelectionRef.current = selectedElementId;
+    collab.broadcastPresence({
+      selectedElementId: selectedElementId ?? void 0,
+      activeSlideIndex
+    });
+  }, [collab, selectedElementId, activeSlideIndex]);
+  React10.useEffect(() => {
+    if (!collab) {
+      return;
+    }
+    const parent = containerRef.current?.parentElement;
+    if (!parent) {
+      return;
+    }
+    const handler = (e2) => {
+      const rect = parent.getBoundingClientRect();
+      const x2 = (e2.clientX - rect.left) / rect.width * canvasWidth;
+      const y = (e2.clientY - rect.top) / rect.height * canvasHeight;
+      collab.broadcastPresence({
+        cursorX: x2,
+        cursorY: y,
+        activeSlideIndex
+      });
+    };
+    parent.addEventListener("pointermove", handler);
+    return () => parent.removeEventListener("pointermove", handler);
+  }, [collab, canvasWidth, canvasHeight, activeSlideIndex]);
+  if (!collab) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-testid": "collab-pointer-tracker",
+      "data-export-ignore": "true",
+      style: { display: "contents" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RemoteUserCursors,
+        {
+          remoteUsers: collab.remoteUsers,
+          activeSlideIndex,
+          canvasWidth,
+          canvasHeight
+        }
+      )
+    }
+  );
+}
+function RemoteSelectionOverlay({
+  elements,
+  activeSlideIndex
+}) {
+  const collab = useCollaboration();
+  if (!collab) {
+    return null;
+  }
+  const elementMap = /* @__PURE__ */ new Map();
+  for (const el of elements) {
+    elementMap.set(el.id, el);
+  }
+  const selections = [];
+  for (const user of collab.remoteUsers) {
+    if (user.activeSlideIndex === activeSlideIndex && user.selectedElementId) {
+      const el = elementMap.get(user.selectedElementId);
+      if (el) {
+        selections.push({
+          userName: user.userName,
+          userColor: user.userColor,
+          element: el
+        });
+      }
+    }
+  }
+  if (selections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selections.map((sel) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": `remote-selection-${sel.element.id}`,
+      "data-export-ignore": "true",
+      className: "absolute pointer-events-none",
+      style: {
+        left: sel.element.x,
+        top: sel.element.y,
+        width: sel.element.width,
+        height: sel.element.height,
+        zIndex: 9997,
+        border: `2px solid ${sel.userColor}`,
+        borderRadius: 2
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "absolute -top-5 left-0 px-1 py-0.5 text-[9px] font-medium text-white rounded-sm whitespace-nowrap leading-none",
+          style: { backgroundColor: sel.userColor },
+          children: sel.userName
+        }
+      )
+    },
+    `remote-sel-${sel.element.id}`
+  )) });
+}
 function SectionContextMenu({
   state: state2,
   sectionGroups,
@@ -91409,6 +91945,7 @@ function SlideItemInner({
   canvasSize,
   canEdit,
   rehearsalTimings,
+  presenceUsers,
   onSelectSlide,
   onSlideContextMenu,
   onAddSection,
@@ -91451,16 +91988,27 @@ function SlideItemInner({
       onDragOver,
       onDrop: (e2) => onDrop(e2, slideIndex),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "text-[10px] tabular-nums w-5 text-right shrink-0 select-none",
-              isActive ? "text-primary font-medium" : "text-muted-foreground"
-            ),
-            children: slideIndex + 1
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5 w-5 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-[10px] tabular-nums text-right select-none w-full",
+                isActive ? "text-primary font-medium" : "text-muted-foreground"
+              ),
+              children: slideIndex + 1
+            }
+          ),
+          presenceUsers && presenceUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-px", children: presenceUsers.slice(0, 4).map((u2, i3) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "w-[6px] h-[6px] rounded-full",
+              style: { backgroundColor: u2.userColor },
+              title: u2.userName
+            },
+            i3
+          )) })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -91610,8 +92158,26 @@ function SlidesPaneSidebar({
   panelWidth
 }) {
   const { t: t2 } = reactI18next.useTranslation();
+  const collab = useCollaboration();
   const slideRefs = React10.useRef(/* @__PURE__ */ new Map());
   const renameInputRef = React10.useRef(null);
+  const slidePresenceMap = React10.useMemo(() => {
+    if (!collab || collab.remoteUsers.length === 0) {
+      return void 0;
+    }
+    const map3 = /* @__PURE__ */ new Map();
+    for (const user of collab.remoteUsers) {
+      const idx = user.activeSlideIndex;
+      const existing = map3.get(idx);
+      const entry = { userName: user.userName, userColor: user.userColor };
+      if (existing) {
+        existing.push(entry);
+      } else {
+        map3.set(idx, [entry]);
+      }
+    }
+    return map3;
+  }, [collab]);
   const estimatedItemHeight = React10.useMemo(
     () => estimateSlideItemHeight(canvasSize.width, canvasSize.height),
     [canvasSize.width, canvasSize.height]
@@ -91733,6 +92299,7 @@ function SlidesPaneSidebar({
               canvasSize,
               canEdit,
               rehearsalTimings,
+              presenceUsers: slidePresenceMap?.get(item.slideIndex),
               onSelectSlide,
               onSlideContextMenu,
               onAddSection,
@@ -91786,6 +92353,7 @@ function SlidesPaneSidebar({
             canvasSize,
             canEdit,
             rehearsalTimings,
+            presenceUsers: slidePresenceMap?.get(idx),
             onSelectSlide,
             onSlideContextMenu,
             onAddSection,
@@ -96552,16 +97120,31 @@ var ALIGN_BTNS = [
   { k: "bottom", el: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: ic2 }) }
 ];
 var DRAW_TOOLS = [
-  { id: "select", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMoveRight, { className: ic2 }), t: "Select" },
-  { id: "pen", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPencil, { className: ic2 }), t: "Pen" },
+  {
+    id: "select",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMoveRight, { className: ic2 }),
+    t: "Select",
+    ac: "bg-primary text-primary-foreground"
+  },
+  {
+    id: "pen",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPencil, { className: ic2 }),
+    t: "Pen",
+    ac: "bg-primary text-primary-foreground"
+  },
   {
     id: "highlighter",
     icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuType, { className: ic2 }),
     t: "Highlighter",
     ac: "bg-yellow-600 text-white"
   },
-  { id: "eraser", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMinus, { className: ic2 }), t: "Eraser" },
-  { id: "freeform", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSpline, { className: ic2 }), t: "Freeform" }
+  { id: "eraser", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMinus, { className: ic2 }), t: "Eraser", ac: "bg-red-600 text-white" },
+  {
+    id: "freeform",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSpline, { className: ic2 }),
+    t: "Freeform",
+    ac: "bg-primary text-primary-foreground"
+  }
 ];
 var OV = [
   {
@@ -96767,7 +97350,7 @@ function AnimationsSection(p3) {
       "button",
       {
         type: "button",
-        onClick: p3.onToggleInspector,
+        onClick: p3.onOpenAnimationPanel ?? p3.onToggleInspector,
         className: cn(
           pill,
           p3.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
@@ -98294,347 +98877,6 @@ function TextSection(p3) {
     ] })
   ] });
 }
-
-// src/viewer/hooks/collaboration/sanitize.ts
-var ROOM_ID_REGEX = /^[a-zA-Z0-9_-]{1,128}$/;
-function validateRoomId(roomId) {
-  if (!ROOM_ID_REGEX.test(roomId)) {
-    throw new Error(
-      `Invalid collaboration room ID: "${roomId}". Must be 1-128 alphanumeric characters, hyphens, or underscores.`
-    );
-  }
-  return roomId;
-}
-function sanitizeUserName(name) {
-  if (typeof name !== "string") {
-    return "Anonymous";
-  }
-  const stripped = name.replace(/<[^>]*>/g, "");
-  const trimmed = stripped.trim().slice(0, 64);
-  return trimmed || "Anonymous";
-}
-function clampCursorPosition(value, min2, max2) {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return 0;
-  }
-  const margin = 20;
-  return Math.max(min2 - margin, Math.min(max2 + margin, value));
-}
-var HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
-function sanitizeColor(color, fallback = "#6366f1") {
-  if (typeof color !== "string") {
-    return fallback;
-  }
-  return HEX_COLOR_REGEX.test(color) ? color : fallback;
-}
-function sanitizeAvatarUrl(url) {
-  if (typeof url !== "string") {
-    return void 0;
-  }
-  try {
-    const parsed = new URL(url);
-    if (parsed.protocol === "https:" || parsed.protocol === "http:" || parsed.protocol === "data:") {
-      return url;
-    }
-  } catch {
-  }
-  return void 0;
-}
-function sanitizeSlideIndex(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return 0;
-  }
-  return Math.max(0, Math.floor(value));
-}
-function sanitizePresence(raw, canvasWidth, canvasHeight) {
-  if (typeof raw.clientId !== "number") {
-    return null;
-  }
-  return {
-    clientId: raw.clientId,
-    userName: sanitizeUserName(raw.userName),
-    userAvatar: sanitizeAvatarUrl(raw.userAvatar),
-    userColor: sanitizeColor(raw.userColor),
-    activeSlideIndex: sanitizeSlideIndex(raw.activeSlideIndex),
-    cursorX: clampCursorPosition(raw.cursorX, 0, canvasWidth),
-    cursorY: clampCursorPosition(raw.cursorY, 0, canvasHeight),
-    lastUpdated: typeof raw.lastUpdated === "string" ? raw.lastUpdated : (/* @__PURE__ */ new Date()).toISOString(),
-    selectedElementId: typeof raw.selectedElementId === "string" ? raw.selectedElementId.slice(0, 128) : void 0
-  };
-}
-var BROADCAST_THROTTLE_MS = 50;
-var STALE_PRESENCE_MS = 3e4;
-function usePresenceTracking({
-  awareness,
-  localClientId,
-  userName,
-  userColor,
-  userAvatar,
-  canvasWidth,
-  canvasHeight
-}) {
-  const [remoteUsers, setRemoteUsers] = React10.useState([]);
-  const lastBroadcastRef = React10.useRef(0);
-  const pendingBroadcastRef = React10.useRef(null);
-  const latestLocalState = React10.useRef({});
-  const broadcastPresence = React10.useCallback(
-    (update2) => {
-      if (!awareness) {
-        return;
-      }
-      Object.assign(latestLocalState.current, update2);
-      const now = Date.now();
-      const elapsed = now - lastBroadcastRef.current;
-      const flush = () => {
-        const state2 = {
-          ...latestLocalState.current,
-          userName,
-          userColor,
-          userAvatar,
-          lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-        };
-        awareness.setLocalStateField("presence", state2);
-        lastBroadcastRef.current = Date.now();
-      };
-      if (elapsed >= BROADCAST_THROTTLE_MS) {
-        if (pendingBroadcastRef.current) {
-          clearTimeout(pendingBroadcastRef.current);
-          pendingBroadcastRef.current = null;
-        }
-        flush();
-      } else if (!pendingBroadcastRef.current) {
-        pendingBroadcastRef.current = setTimeout(() => {
-          pendingBroadcastRef.current = null;
-          flush();
-        }, BROADCAST_THROTTLE_MS - elapsed);
-      }
-    },
-    [awareness, userName, userColor, userAvatar]
-  );
-  React10.useEffect(() => {
-    if (!awareness) {
-      return;
-    }
-    awareness.setLocalStateField("presence", {
-      userName,
-      userColor,
-      userAvatar,
-      activeSlideIndex: 0,
-      cursorX: 0,
-      cursorY: 0,
-      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-    });
-  }, [awareness, userName, userColor, userAvatar]);
-  React10.useEffect(() => {
-    if (!awareness || localClientId === null) {
-      return;
-    }
-    const handleChange = () => {
-      const now = Date.now();
-      const states = awareness.getStates();
-      const users = [];
-      states.forEach((state2, cid) => {
-        if (cid === localClientId) {
-          return;
-        }
-        const raw = state2?.presence;
-        if (!raw || typeof raw !== "object") {
-          return;
-        }
-        const sanitized = sanitizePresence({ ...raw, clientId: cid }, canvasWidth, canvasHeight);
-        if (!sanitized) {
-          return;
-        }
-        const updatedAt = new Date(sanitized.lastUpdated).getTime();
-        if (Number.isNaN(updatedAt) || now - updatedAt > STALE_PRESENCE_MS) {
-          return;
-        }
-        users.push(sanitized);
-      });
-      setRemoteUsers(users);
-    };
-    awareness.on("change", handleChange);
-    awareness.on("update", handleChange);
-    handleChange();
-    return () => {
-      awareness.off("change", handleChange);
-      awareness.off("update", handleChange);
-    };
-  }, [awareness, localClientId, canvasWidth, canvasHeight]);
-  React10.useEffect(() => {
-    if (!awareness) {
-      return;
-    }
-    const interval = setInterval(() => {
-      awareness.setLocalStateField("presence", {
-        ...latestLocalState.current,
-        userName,
-        userColor,
-        userAvatar,
-        lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-      });
-    }, 1e4);
-    return () => clearInterval(interval);
-  }, [awareness, userName, userColor, userAvatar]);
-  React10.useEffect(() => {
-    return () => {
-      if (pendingBroadcastRef.current) {
-        clearTimeout(pendingBroadcastRef.current);
-      }
-    };
-  }, []);
-  return { remoteUsers, broadcastPresence };
-}
-function useYjsProvider({ config }) {
-  const [status, setStatus] = React10.useState("disconnected");
-  const [awareness, setAwareness] = React10.useState(null);
-  const [doc2, setDoc] = React10.useState(null);
-  const [clientId, setClientId] = React10.useState(null);
-  const cleanupRef = React10.useRef(null);
-  const init = React10.useCallback(async () => {
-    const roomId = validateRoomId(config.roomId);
-    setStatus("connecting");
-    try {
-      const [Y, { WebsocketProvider: WebsocketProvider2 }] = await Promise.all([Promise.resolve().then(() => (init_yjs(), yjs_exports)), Promise.resolve().then(() => (init_y_websocket(), y_websocket_exports))]);
-      const yDoc = new Y.Doc();
-      const provider = new WebsocketProvider2(
-        config.serverUrl,
-        roomId,
-        yDoc,
-        // eslint-disable-line @typescript-eslint/no-explicit-any
-        {
-          params: config.authToken ? { token: config.authToken } : void 0
-        }
-      );
-      const handleStatus = (event) => {
-        if (event.status === "connected") {
-          setStatus("connected");
-        } else if (event.status === "disconnected") {
-          setStatus("disconnected");
-        }
-      };
-      provider.on("status", handleStatus);
-      if (provider.wsconnected) {
-        setStatus("connected");
-      }
-      setDoc(yDoc);
-      setAwareness(provider.awareness);
-      setClientId(provider.awareness.clientID);
-      cleanupRef.current = () => {
-        provider.off("status", handleStatus);
-        provider.destroy();
-        yDoc.destroy();
-        setDoc(null);
-        setAwareness(null);
-        setClientId(null);
-        setStatus("disconnected");
-      };
-    } catch (err) {
-      console.warn(
-        "[pptx-viewer] Collaboration packages not available:",
-        err instanceof Error ? err.message : err
-      );
-      setStatus("error");
-    }
-  }, [config.roomId, config.serverUrl, config.authToken]);
-  React10.useEffect(() => {
-    init();
-    return () => {
-      cleanupRef.current?.();
-      cleanupRef.current = null;
-    };
-  }, [init]);
-  return { status, awareness, doc: doc2, clientId };
-}
-
-// src/viewer/hooks/collaboration/useCollaborativeState.ts
-function useCollaborativeState({
-  config,
-  canvasWidth,
-  canvasHeight
-}) {
-  const userColor = sanitizeColor(config.userColor, "#6366f1");
-  const { status, awareness, doc: doc2, clientId } = useYjsProvider({ config });
-  const { remoteUsers, broadcastPresence } = usePresenceTracking({
-    awareness,
-    localClientId: clientId,
-    userName: config.userName,
-    userColor,
-    userAvatar: config.userAvatar,
-    canvasWidth,
-    canvasHeight
-  });
-  const connectedCount = status === "connected" ? remoteUsers.length + 1 : remoteUsers.length;
-  return {
-    status,
-    remoteUsers,
-    broadcastPresence,
-    connectedCount,
-    config,
-    doc: doc2
-  };
-}
-var CollaborationContext = React10.createContext(null);
-function useCollaboration() {
-  return React10.useContext(CollaborationContext);
-}
-function CollaborationProvider({
-  config,
-  canvasWidth,
-  canvasHeight,
-  children
-}) {
-  const value = useCollaborativeState({
-    config,
-    canvasWidth,
-    canvasHeight
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(CollaborationContext.Provider, { value, children });
-}
-var STATUS_STYLES = {
-  connected: {
-    dot: "bg-green-400",
-    text: "text-green-400",
-    label: "Connected"
-  },
-  connecting: {
-    dot: "bg-yellow-400 animate-pulse",
-    text: "text-yellow-400",
-    label: "Connecting..."
-  },
-  disconnected: {
-    dot: "bg-gray-500",
-    text: "text-gray-500",
-    label: "Disconnected"
-  },
-  error: {
-    dot: "bg-red-400",
-    text: "text-red-400",
-    label: "Connection error"
-  }
-};
-function CollaborationStatusIndicator({
-  status,
-  connectedCount
-}) {
-  const { t: t2 } = reactI18next.useTranslation();
-  const style = STATUS_STYLES[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-testid": "collaboration-status",
-      className: "flex items-center gap-1.5",
-      "aria-label": t2("pptx.collaboration.statusAriaLabel", {
-        status: t2(`pptx.collaboration.status.${status}`),
-        count: connectedCount
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-block w-2 h-2 rounded-full ${style.dot}`, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] ${style.text}`, children: status === "connected" ? t2("pptx.collaboration.userCount", { count: connectedCount }) : t2(`pptx.collaboration.status.${status}`) })
-      ]
-    }
-  );
-}
 function CustomShowsControls({
   customShows,
   activeCustomShowId,
@@ -99073,29 +99315,38 @@ function ToolbarPrimaryRow(p3) {
         ]
       }
     ),
-    collab && (collab.status === "connected" || collab.status === "connecting") && collab.remoteUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-1.5 mx-1", children: [
-      collab.remoteUsers.slice(0, 4).map((user) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "w-6 h-6 rounded-full border-2 border-background flex items-center justify-center text-[8px] font-semibold text-white shrink-0",
-          style: { backgroundColor: user.userColor },
-          title: user.userName,
-          children: user.userAvatar ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+    collab && (collab.status === "connected" || collab.status === "connecting") && collab.remoteUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onOpenShareDialog,
+        className: "flex items-center -space-x-1.5 mx-1 rounded-sm px-1 py-0.5 hover:bg-accent/60 transition-colors cursor-pointer",
+        title: t2("pptx.toolbar.sharingUsers", { count: collab.connectedCount }),
+        children: [
+          collab.remoteUsers.slice(0, 4).map((user) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              src: user.userAvatar,
-              alt: user.userName,
-              className: "w-full h-full rounded-full object-cover"
-            }
-          ) : user.userName.slice(0, 2).toUpperCase()
-        },
-        user.clientId
-      )),
-      collab.remoteUsers.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-6 h-6 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[8px] text-muted-foreground shrink-0", children: [
-        "+",
-        collab.remoteUsers.length - 4
-      ] })
-    ] }),
+              className: "w-6 h-6 rounded-full border-2 border-background flex items-center justify-center text-[8px] font-semibold text-white shrink-0",
+              style: { backgroundColor: user.userColor },
+              title: user.userName,
+              children: user.userAvatar ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: user.userAvatar,
+                  alt: user.userName,
+                  className: "w-full h-full rounded-full object-cover"
+                }
+              ) : user.userName.slice(0, 2).toUpperCase()
+            },
+            user.clientId
+          )),
+          collab.remoteUsers.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-6 h-6 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[8px] text-muted-foreground shrink-0", children: [
+            "+",
+            collab.remoteUsers.length - 4
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ModeSwitcher,
       {
@@ -99472,7 +99723,8 @@ function Toolbar(p3) {
                   canEdit: p3.canEdit,
                   selectedElement: p3.selectedElement,
                   isInspectorPaneOpen: p3.isInspectorPaneOpen,
-                  onToggleInspector: p3.onToggleInspector
+                  onToggleInspector: p3.onToggleInspector,
+                  onOpenAnimationPanel: p3.onOpenAnimationPanel
                 }
               ),
               sSlw && /* @__PURE__ */ jsxRuntime.jsx(
@@ -106917,9 +107169,75 @@ function SetUpSlideShowDialog({
 }
 function BroadcastDialog({
   open,
-  onClose
+  onClose,
+  onStartBroadcast,
+  onStopBroadcast,
+  onStartPresenting,
+  defaultRoomId,
+  defaultUserName,
+  defaultServerUrl
 }) {
   const { t: t2 } = reactI18next.useTranslation();
+  const collab = useCollaboration();
+  const isBroadcasting = collab !== null && collab.status !== "disconnected" && collab.status !== "error" && collab.config.role === "broadcaster";
+  const [roomId, setRoomId] = React10.useState("");
+  const [userName, setUserName] = React10.useState("");
+  const [serverUrl, setServerUrl] = React10.useState("");
+  const [copied, setCopied] = React10.useState(false);
+  const dialogRef = React10.useRef(null);
+  React10.useEffect(() => {
+    if (open && !isBroadcasting) {
+      const broadcastRoom = defaultRoomId ? `broadcast-${defaultRoomId}` : `broadcast-${Math.random().toString(36).slice(2, 10)}`;
+      setRoomId(broadcastRoom);
+      setUserName(defaultUserName ?? "");
+      setServerUrl(defaultServerUrl ?? "ws://localhost:1234");
+    }
+  }, [open, isBroadcasting, defaultRoomId, defaultUserName, defaultServerUrl]);
+  React10.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function handleKeyDown(e2) {
+      if (e2.key === "Escape") {
+        onClose();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  React10.useEffect(() => {
+    if (open && dialogRef.current) {
+      dialogRef.current.focus();
+    }
+  }, [open]);
+  const broadcastUrl = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}?broadcast=${encodeURIComponent(isBroadcasting ? collab.config.roomId : roomId)}&server=${encodeURIComponent(isBroadcasting ? collab.config.serverUrl : serverUrl)}` : roomId;
+  const handleCopyUrl = React10.useCallback(() => {
+    void navigator.clipboard.writeText(broadcastUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      return void 0;
+    });
+  }, [broadcastUrl]);
+  const handleStartBroadcast = React10.useCallback(() => {
+    if (!roomId.trim() || !userName.trim()) {
+      return;
+    }
+    onStartBroadcast?.({
+      roomId: roomId.trim(),
+      serverUrl: serverUrl.trim(),
+      userName: userName.trim(),
+      role: "broadcaster"
+    });
+    setTimeout(() => {
+      onStartPresenting?.();
+    }, 100);
+    onClose();
+  }, [roomId, userName, serverUrl, onStartBroadcast, onStartPresenting, onClose]);
+  const handleStopBroadcast = React10.useCallback(() => {
+    onStopBroadcast?.();
+    onClose();
+  }, [onStopBroadcast, onClose]);
+  const canStart = roomId.trim().length > 0 && userName.trim().length > 0 && serverUrl.trim().length > 0;
   if (!open) {
     return null;
   }
@@ -106933,42 +107251,225 @@ function BroadcastDialog({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[201] flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-auto w-[380px] rounded-xl border border-border bg-background shadow-2xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground", children: t2("pptx.broadcast.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[201] flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t2("pptx.broadcast.title"),
+        tabIndex: -1,
+        className: "pointer-events-auto w-full max-w-md rounded-xl border border-border bg-popover text-foreground shadow-2xl outline-none",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-sm font-semibold text-foreground flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lu.LuCast, { className: "w-4 h-4" }),
+              isBroadcasting ? t2("pptx.broadcast.broadcasting") : t2("pptx.broadcast.title")
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "text-muted-foreground hover:text-foreground text-lg leading-none",
+                "aria-label": "Close",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children: isBroadcasting ? /* @__PURE__ */ jsxRuntime.jsx(
+            ActiveBroadcastView,
+            {
+              collab,
+              broadcastUrl,
+              copied,
+              onCopyUrl: handleCopyUrl,
+              onStopBroadcast: handleStopBroadcast
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            StartBroadcastForm,
+            {
+              roomId,
+              userName,
+              serverUrl,
+              onRoomIdChange: setRoomId,
+              onUserNameChange: setUserName,
+              onServerUrlChange: setServerUrl
+            }
+          ) }),
+          !isBroadcasting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 px-5 py-3 border-t border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "px-3 py-1.5 rounded bg-muted hover:bg-accent text-[12px] text-foreground transition-colors",
+                children: t2("common.close")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !canStart,
+                onClick: handleStartBroadcast,
+                className: "px-3 py-1.5 rounded bg-primary hover:bg-primary/90 text-[12px] text-primary-foreground transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+                children: t2("pptx.broadcast.startBroadcast")
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function StartBroadcastForm({
+  roomId,
+  userName,
+  serverUrl,
+  onRoomIdChange,
+  onUserNameChange,
+  onServerUrlChange
+}) {
+  const { t: t2 } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-muted-foreground leading-relaxed", children: t2("pptx.broadcast.description") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "broadcast-room-id",
+          className: "block text-[12px] font-medium text-foreground",
+          children: t2("pptx.broadcast.sessionName")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "broadcast-room-id",
+          type: "text",
+          value: roomId,
+          onChange: (e2) => onRoomIdChange(e2.target.value),
+          placeholder: "broadcast-abc123",
+          className: "w-full px-3 py-1.5 rounded border border-border bg-background text-foreground text-[13px] placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "broadcast-user-name",
+          className: "block text-[12px] font-medium text-foreground",
+          children: t2("pptx.broadcast.displayName")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "broadcast-user-name",
+          type: "text",
+          value: userName,
+          onChange: (e2) => onUserNameChange(e2.target.value),
+          placeholder: "Presenter",
+          className: "w-full px-3 py-1.5 rounded border border-border bg-background text-foreground text-[13px] placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "broadcast-server-url",
+          className: "block text-[12px] font-medium text-foreground",
+          children: t2("pptx.broadcast.serverLabel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "broadcast-server-url",
+          type: "text",
+          value: serverUrl,
+          onChange: (e2) => onServerUrlChange(e2.target.value),
+          placeholder: "ws://localhost:1234",
+          className: "w-full px-3 py-1.5 rounded border border-border bg-background text-foreground text-[13px] placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground/70 leading-relaxed", children: t2("pptx.broadcast.hint") })
+  ] });
+}
+function ActiveBroadcastView({
+  collab,
+  broadcastUrl,
+  copied,
+  onCopyUrl,
+  onStopBroadcast
+}) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const statusColor = collab.status === "connected" ? "text-green-400" : collab.status === "connecting" ? "text-yellow-400" : "text-red-400";
+  const statusIcon = collab.status === "connected" || collab.status === "connecting" ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuWifi, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuWifiOff, { className: "w-4 h-4" });
+  const viewerCount = collab.remoteUsers.filter((u2) => u2.role === "viewer").length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusColor, children: statusIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-foreground capitalize", children: collab.status }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[12px] text-muted-foreground ml-auto flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lu.LuUsers, { className: "w-3.5 h-3.5" }),
+        t2("pptx.broadcast.viewerCount", { count: viewerCount })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[12px] font-medium text-foreground", children: t2("pptx.broadcast.viewerLink") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-3 py-1.5 rounded border border-border bg-background text-[11px] text-foreground select-all font-mono truncate", children: broadcastUrl }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            onClick: onClose,
-            className: "text-muted-foreground hover:text-foreground text-lg leading-none",
-            "aria-label": "Close",
-            children: "\xD7"
+            onClick: onCopyUrl,
+            className: "flex items-center gap-1 px-2.5 py-1.5 rounded border border-border bg-muted hover:bg-accent text-[12px] text-foreground transition-colors shrink-0",
+            title: t2("pptx.broadcast.copyLink"),
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { className: "w-3.5 h-3.5 text-green-400" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t2("pptx.share.copied") })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t2("pptx.share.copyUrl") })
+            ] })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-muted-foreground leading-relaxed", children: t2("pptx.broadcast.description") }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 px-5 py-3 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground", children: t2("pptx.broadcast.shareHint") })
+    ] }),
+    collab.remoteUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[12px] font-medium text-foreground", children: t2("pptx.broadcast.viewers") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded border border-border bg-background divide-y divide-border max-h-[120px] overflow-y-auto", children: collab.remoteUsers.map((user) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          "div",
           {
-            type: "button",
-            onClick: onClose,
-            className: "px-3 py-1.5 rounded bg-muted hover:bg-accent text-[12px] text-foreground transition-colors",
-            children: t2("common.close")
+            className: "w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-semibold text-white shrink-0",
+            style: { backgroundColor: user.userColor },
+            children: user.userName.slice(0, 2).toUpperCase()
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            disabled: true,
-            className: "px-3 py-1.5 rounded bg-primary/40 text-[12px] text-white/50 cursor-not-allowed",
-            children: t2("pptx.broadcast.startBroadcast")
-          }
-        )
-      ] })
-    ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-foreground truncate", children: user.userName }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground ml-auto", children: [
+          "Slide ",
+          user.activeSlideIndex + 1
+        ] })
+      ] }, user.clientId)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onStopBroadcast,
+        className: "w-full px-3 py-2 rounded border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 text-[12px] text-red-400 font-medium transition-colors",
+        children: t2("pptx.broadcast.stopBroadcast")
+      }
+    )
   ] });
 }
 function getInitials(name) {
@@ -108552,7 +109053,8 @@ function useDrawingOverlay({
   drawingWidth,
   isDrawingRef,
   onAddInkElement,
-  onAddFreeformShape
+  onAddFreeformShape,
+  onEraseInkElement
 }) {
   const isDrawing = activeTool !== "select";
   const [currentStrokePoints, setCurrentStrokePoints] = React10.useState(
@@ -108601,6 +109103,7 @@ function useDrawingOverlay({
             continue;
           }
           if (pt2.x >= el.x - HIT_RADIUS && pt2.x <= el.x + el.width + HIT_RADIUS && pt2.y >= el.y - HIT_RADIUS && pt2.y <= el.y + el.height + HIT_RADIUS) {
+            onEraseInkElement?.(el.id);
             break;
           }
         }
@@ -108619,7 +109122,7 @@ function useDrawingOverlay({
         isDrawingRef.current = true;
       }
     },
-    [activeTool, activeSlide, pointerToCanvasCoords, isDrawingRef]
+    [activeTool, activeSlide, pointerToCanvasCoords, isDrawingRef, onEraseInkElement]
   );
   const handleDrawPointerMove = React10.useCallback(
     (e2) => {
@@ -108689,6 +109192,9 @@ function useDrawingOverlay({
             i3 === 0 ? { type: "moveTo", pt: scaledPt } : { type: "lineTo", pt: scaledPt }
           );
         }
+        if (segments.length > 2) {
+          segments.push({ type: "close" });
+        }
         const freeformShape = {
           id: `shape-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
           type: "shape",
@@ -108698,7 +109204,7 @@ function useDrawingOverlay({
           height: h2,
           shapeType: "custom",
           shapeStyle: {
-            fillColor: drawingColor,
+            fillColor: "transparent",
             strokeColor: drawingColor,
             strokeWidth: drawingWidth
           },
@@ -108848,6 +109354,7 @@ function SlideCanvas({
   isDrawingRef,
   onAddInkElement,
   onAddFreeformShape,
+  onEraseInkElement,
   onActionClick,
   onHyperlinkClick,
   comments,
@@ -108933,7 +109440,8 @@ function SlideCanvas({
     drawingWidth,
     isDrawingRef,
     onAddInkElement,
-    onAddFreeformShape
+    onAddFreeformShape,
+    onEraseInkElement
   });
   const rulerOffset = showRulers ? RULER_THICKNESS : 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -109429,6 +109937,10 @@ function ViewerToolbarSection(props) {
         onSetMode,
         onToggleSidebar: () => s.setIsSlidesPaneOpen((p3) => !p3),
         onToggleInspector: () => s.setIsInspectorPaneOpen((p3) => !p3),
+        onOpenAnimationPanel: () => {
+          s.setIsInspectorPaneOpen(true);
+          s.setSidebarPanelMode("properties");
+        },
         onToggleCompactToolbar: () => s.setIsCompactToolbarOpen((p3) => !p3),
         onSetToolbarSection: s.setToolbarSection,
         onZoomIn: zoom.handleZoomIn,
@@ -111100,13 +111612,6 @@ function ViewerDialogGroup(props) {
         slideCount: slides.length
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BroadcastDialog,
-      {
-        open: dialogs.isBroadcastDialogOpen,
-        onClose: () => dialogs.setIsBroadcastDialogOpen(false)
-      }
-    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       PrintDialog,
       {
@@ -111349,6 +111854,7 @@ function ViewerCanvasArea(props) {
         isDrawingRef: s.isDrawingRef,
         onAddInkElement: insertHandlers.handleAddInkElement,
         onAddFreeformShape: insertHandlers.handleAddFreeformShape,
+        onEraseInkElement: insertHandlers.handleEraseInkElement,
         onActionClick: handleActionClick,
         onHyperlinkClick: handleHyperlinkClick,
         allSlides: mode === "present" ? slides : void 0,
@@ -111356,6 +111862,24 @@ function ViewerCanvasArea(props) {
         sourceSlideIndex: mode === "present" ? activeSlideIndex : void 0,
         fieldContext,
         tableStyleContext,
+        collaborationOverlay: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RemoteSelectionOverlay,
+            {
+              elements: effectiveSlide?.elements ?? [],
+              activeSlideIndex
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CollaborationCursorOverlay,
+            {
+              activeSlideIndex,
+              canvasWidth: canvasSize.width,
+              canvasHeight: canvasSize.height,
+              selectedElementId: s.selectedElementId
+            }
+          )
+        ] }),
         comments: activeSlide?.comments,
         showCommentMarkers: s.sidebarPanelMode === "comments",
         onCommentMarkerClick: () => s.setSidebarPanelMode("comments"),
@@ -112937,6 +113461,37 @@ function useYjsDocumentSync({
     };
   }, [doc2, isConnected, getDocMap, setSlides]);
 }
+function useBroadcastFollower({
+  collab,
+  activeSlideIndex,
+  setActiveSlideIndex,
+  slideCount
+}) {
+  const lastBroadcasterSlide = React10.useRef(-1);
+  React10.useEffect(() => {
+    if (!collab) {
+      return;
+    }
+    if (collab.config.role !== "viewer") {
+      return;
+    }
+    const broadcaster = collab.remoteUsers.find((u2) => u2.role === "broadcaster");
+    if (!broadcaster) {
+      return;
+    }
+    const targetSlide = broadcaster.activeSlideIndex;
+    if (targetSlide < 0 || targetSlide >= slideCount) {
+      return;
+    }
+    if (targetSlide === lastBroadcasterSlide.current) {
+      return;
+    }
+    lastBroadcasterSlide.current = targetSlide;
+    if (targetSlide !== activeSlideIndex) {
+      setActiveSlideIndex(targetSlide);
+    }
+  }, [collab, activeSlideIndex, setActiveSlideIndex, slideCount]);
+}
 function computeGridSpacingPx(presentationGridSpacing) {
   if (presentationGridSpacing) {
     const px2 = Math.round(presentationGridSpacing.cx / EMU_PER_PX);
@@ -115277,6 +115832,17 @@ function useInsertElements(input) {
     }
     addElement(shape);
   };
+  const handleEraseInkElement = (elementId) => {
+    if (!activeSlide) {
+      return;
+    }
+    ops.updateSlides(
+      (prev) => prev.map(
+        (s, i3) => i3 === activeSlideIndex ? { ...s, elements: s.elements.filter((el) => el.id !== elementId) } : s
+      )
+    );
+    history.markDirty();
+  };
   return {
     handleAddTextBox,
     handleAddShape,
@@ -115284,6 +115850,7 @@ function useInsertElements(input) {
     ...structured,
     handleAddInkElement,
     handleAddFreeformShape,
+    handleEraseInkElement,
     ...fileHandlers
   };
 }
@@ -116113,7 +116680,8 @@ function useEditorOperations(input) {
     selectedElementIds,
     canvasSize,
     dialogs,
-    presentation
+    presentation,
+    userName
   } = input;
   const ops = useElementOperations({
     activeSlide,
@@ -116147,6 +116715,7 @@ function useEditorOperations(input) {
   const comments = useComments({
     slides,
     canEdit,
+    userName,
     selectedElementId: state2.selectedElementId,
     onUpdateSlides: ops.updateSlides,
     onMarkDirty: history.markDirty
@@ -122893,6 +123462,7 @@ var PowerPointViewer = React10.forwardRef(
       onDirtyChange,
       onActiveSlideChange,
       theme,
+      authorName,
       collaboration,
       onStartCollaboration,
       onStopCollaboration,
@@ -123050,7 +123620,8 @@ var PowerPointViewer = React10.forwardRef(
       selectedElementIds,
       canvasSize,
       dialogs,
-      presentation
+      presentation,
+      userName: authorName ?? collaboration?.userName
     });
     const {
       exportHandlers,
@@ -123253,6 +123824,19 @@ var PowerPointViewer = React10.forwardRef(
               defaultServerUrl: shareDefaults?.serverUrl
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BroadcastDialog,
+            {
+              open: dialogs.isBroadcastDialogOpen,
+              onClose: () => dialogs.setIsBroadcastDialogOpen(false),
+              onStartBroadcast: onStartCollaboration,
+              onStopBroadcast: onStopCollaboration,
+              onStartPresenting: () => handleSetMode("present"),
+              defaultRoomId: shareDefaults?.roomId,
+              defaultUserName: shareDefaults?.userName,
+              defaultServerUrl: shareDefaults?.serverUrl
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             ViewerOverlays,
             {
@@ -123302,6 +123886,14 @@ var PowerPointViewer = React10.forwardRef(
         canvasHeight: canvasSize.height,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CollaborationDocumentSync, { slides, setSlides: state2.setSlides }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BroadcastFollowerSync,
+            {
+              activeSlideIndex,
+              setActiveSlideIndex: state2.setActiveSlideIndex,
+              slideCount: slides.length
+            }
+          ),
           viewerContent
         ]
       }
@@ -123329,6 +123921,20 @@ function CollaborationDocumentSync({
   });
   return null;
 }
+function BroadcastFollowerSync({
+  activeSlideIndex,
+  setActiveSlideIndex,
+  slideCount
+}) {
+  const collab = useCollaboration();
+  useBroadcastFollower({
+    collab,
+    activeSlideIndex,
+    setActiveSlideIndex,
+    slideCount
+  });
+  return null;
+}
 /*! Bundled license information:
 
 three/build/three.core.js: