pptx-react-viewer 1.0.9 → 1.0.11

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 === React90.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React95.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 = useState80({
+        cachedValue = useState84({
           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]
         );
-        useEffect64(
+        useEffect68(
           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 React90 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState80 = React90.useState, useEffect64 = React90.useEffect, useLayoutEffect7 = React90.useLayoutEffect, useDebugValue = React90.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 !== React90.useSyncExternalStore ? React90.useSyncExternalStore : shim;
+      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;
       "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 React90 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef65 = React90.useRef, useEffect64 = React90.useEffect, useMemo41 = React90.useMemo, useDebugValue = React90.useDebugValue;
+      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;
       exports$1.useSyncExternalStoreWithSelector = function(subscribe3, getSnapshot2, getServerSnapshot2, selector, isEqual) {
-        var instRef = useRef65(null);
+        var instRef = useRef69(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]);
-        useEffect64(
+        useEffect68(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -69742,6 +69742,7 @@ var UNGROUPED_SECTION_ID = "__ungrouped__";
 
 // src/viewer/constants/toolbar.ts
 var TOOLBAR_SECTIONS = [
+  { id: "file", label: "File" },
   { id: "home", label: "Home" },
   { id: "insert", label: "Insert" },
   { id: "text", label: "Text" },
@@ -69749,8 +69750,11 @@ var TOOLBAR_SECTIONS = [
   { id: "arrange", label: "Arrange" },
   { id: "design", label: "Design" },
   { id: "transitions", label: "Transitions" },
+  { id: "animations", label: "Animations" },
+  { id: "slideShow", label: "Slide Show" },
   { id: "review", label: "Review" },
-  { id: "view", label: "View" }
+  { id: "view", label: "View" },
+  { id: "help", label: "Help" }
 ];
 var SHORTCUT_REFERENCE_ITEMS = [
   { action: "Undo", shortcut: "Ctrl/Cmd+Z" },
@@ -85788,6 +85792,7 @@ function AccessibilityPanel({
   reducedMotion,
   onToggleReducedMotion
 }) {
+  const { t: t2 } = reactI18next.useTranslation();
   if (!isOpen) {
     return null;
   }
@@ -85795,31 +85800,27 @@ function AccessibilityPanel({
     "div",
     {
       role: "dialog",
-      "aria-label": "Accessibility Checker",
+      "aria-label": t2("pptx.accessibility.title"),
       className: "absolute top-14 right-3 z-40 w-[min(28rem,calc(100%-1.5rem))] rounded border border-border bg-popover shadow-2xl",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-wide text-foreground", children: "Accessibility Checker" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-wide text-foreground", children: t2("pptx.accessibility.title") }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
-              issues.length,
-              " issue",
-              issues.length !== 1 ? "s" : ""
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: t2("pptx.accessibility.issueCount", { count: issues.length }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: onClose,
-                "aria-label": "Close accessibility panel",
+                "aria-label": t2("pptx.accessibility.closePanel"),
                 className: "rounded px-2 py-1 text-[11px] text-foreground hover:bg-muted hover:text-foreground",
-                children: "Close"
+                children: t2("pptx.accessibility.close")
               }
             )
           ] })
         ] }),
         onToggleReducedMotion !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "reduced-motion-toggle", className: "text-xs text-foreground", children: "Reduce motion" }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "reduced-motion-toggle", className: "text-xs text-foreground", children: t2("pptx.accessibility.reduceMotion") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -85848,9 +85849,9 @@ function AccessibilityPanel({
           "div",
           {
             role: "list",
-            "aria-label": "Accessibility issues",
+            "aria-label": t2("pptx.accessibility.issuesList"),
             className: "max-h-72 overflow-y-auto p-2 space-y-1",
-            children: issues.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", className: "text-center text-xs text-muted-foreground py-4", children: "No accessibility issues found." }) : issues.map((issue, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+            children: issues.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", className: "text-center text-xs text-muted-foreground py-4", children: t2("pptx.accessibility.noIssues") }) : issues.map((issue, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 role: "listitem",
@@ -85862,7 +85863,7 @@ function AccessibilityPanel({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 mt-0.5", "aria-hidden": "true", children: issue.severity === "error" ? "\u25CF" : issue.severity === "warning" ? "\u25B2" : "\u2139" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    issue.severity === "error" ? "Error: " : issue.severity === "warning" ? "Warning: " : "Info: ",
+                    issue.severity === "error" ? t2("pptx.accessibility.error") : issue.severity === "warning" ? t2("pptx.accessibility.warning") : t2("pptx.accessibility.info"),
                     issue.message
                   ] })
                 ]
@@ -85914,22 +85915,32 @@ function ExportProgressModal({
     ) })
   ] }) });
 }
-function formatAutosaveAge(timestamp) {
+function formatAutosaveAge(timestamp, t2) {
   const diff = Date.now() - timestamp;
   const minutes = Math.floor(diff / 6e4);
   if (minutes < 1) {
-    return "just now";
+    return t2("pptx.autosave.justNow");
   }
   if (minutes === 1) {
-    return "1 min ago";
+    return t2("pptx.autosave.oneMinAgo");
   }
-  return `${minutes} min ago`;
+  return t2("pptx.autosave.minutesAgo", { count: minutes });
 }
 function StatusBar({
   slideCount,
   activeSlideIndex,
   isDirty,
-  autosaveStatus
+  autosaveStatus,
+  scale,
+  onZoomIn,
+  onZoomOut,
+  onZoomToFit,
+  isNotesExpanded,
+  onToggleNotes,
+  mode,
+  onSetMode,
+  onToggleSlideSorter,
+  collaborationSlot
 }) {
   const { t: t2 } = reactI18next.useTranslation();
   let statusText;
@@ -85937,7 +85948,7 @@ function StatusBar({
     statusText = t2("pptx.autosave.saving");
   } else if (autosaveStatus?.state === "saved") {
     statusText = t2("pptx.autosave.saved", {
-      time: formatAutosaveAge(autosaveStatus.timestamp)
+      time: formatAutosaveAge(autosaveStatus.timestamp, t2)
     });
   } else if (autosaveStatus?.state === "error") {
     statusText = t2("pptx.autosave.error");
@@ -85946,15 +85957,124 @@ function StatusBar({
   } else {
     statusText = t2("pptx.statusBar.allSaved");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-1 border-t border-border bg-background/50 text-[10px] text-muted-foreground flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: slideCount > 0 ? `Slide ${Math.min(activeSlideIndex + 1, slideCount)} of ${slideCount}` : "No slides" }),
+  const vb = "p-1 rounded-sm transition-colors hover:bg-accent/60 text-muted-foreground active:scale-95 active:opacity-80";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full px-2 py-0.5 border-t border-border bg-secondary/50 text-[10px] text-muted-foreground flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: slideCount > 0 ? t2("pptx.statusBar.slideOf", {
+      current: Math.min(activeSlideIndex + 1, slideCount),
+      total: slideCount
+    }) : t2("pptx.statusBar.noSlides") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-border/40 mx-1 max-md:hidden" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 max-md:hidden text-[10px]", children: t2("pptx.statusBar.language") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-border/60 mx-1 max-md:hidden" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: autosaveStatus?.state === "error" ? "text-red-400" : autosaveStatus?.state === "saving" ? "text-yellow-400" : "",
+        className: cn(
+          "shrink-0 max-md:hidden",
+          autosaveStatus?.state === "error" ? "text-red-400" : autosaveStatus?.state === "saving" ? "text-yellow-400" : ""
+        ),
         children: statusText
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+    onToggleNotes && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleNotes,
+        className: cn(
+          vb,
+          "flex items-center gap-1 text-[10px]",
+          isNotesExpanded && "text-primary"
+        ),
+        title: t2("pptx.statusBar.toggleNotes"),
+        "aria-label": t2("pptx.statusBar.toggleNotes"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuStickyNote, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-md:hidden", children: t2("pptx.notes.title") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-border/60 mx-0.5" }),
+    onSetMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSetMode("edit"),
+          className: cn(vb, mode === "edit" && "text-primary"),
+          title: t2("pptx.statusBar.normalView"),
+          "aria-label": t2("pptx.statusBar.normalView"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMonitor, { className: "w-3.5 h-3.5" })
+        }
+      ),
+      onToggleSlideSorter && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onToggleSlideSorter,
+          className: vb,
+          title: t2("pptx.statusBar.slideSorter"),
+          "aria-label": t2("pptx.statusBar.slideSorter"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuColumns2, { className: "w-3.5 h-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSetMode("present"),
+          className: cn(vb, mode === "present" && "text-primary"),
+          title: t2("pptx.statusBar.slideShow"),
+          "aria-label": t2("pptx.statusBar.slideShow"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPresentation, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
+    collaborationSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-border/40 mx-0.5" }),
+      collaborationSlot
+    ] }),
+    scale !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-border/60 mx-0.5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        onZoomOut && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onZoomOut,
+            className: vb,
+            title: t2("pptx.statusBar.zoomOut"),
+            "aria-label": t2("pptx.statusBar.zoomOut"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMinus, { className: "w-3 h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onZoomToFit,
+            className: "px-1.5 py-0.5 rounded-sm hover:bg-accent/60 text-[10px] text-muted-foreground tabular-nums min-w-[3rem] text-center transition-colors",
+            title: t2("pptx.statusBar.zoomToFit"),
+            children: [
+              Math.round((scale ?? 1) * 100),
+              "%"
+            ]
+          }
+        ),
+        onZoomIn && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onZoomIn,
+            className: vb,
+            title: t2("pptx.statusBar.zoomIn"),
+            "aria-label": t2("pptx.statusBar.zoomIn"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: "w-3 h-3" })
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 function ResizeHandle({
@@ -90770,6 +90890,7 @@ function FindReplacePanel({
   onReplaceAll,
   onClose
 }) {
+  const { t: t2 } = reactI18next.useTranslation();
   const searchInputRef = React10.useRef(null);
   React10.useEffect(() => {
     searchInputRef.current?.focus();
@@ -90802,12 +90923,12 @@ function FindReplacePanel({
     [onClose, onReplace]
   );
   const hasResults = findResults.length > 0;
-  const matchCountLabel = hasResults ? `${findResultIndex + 1} of ${findResults.length}` : findQuery.length > 0 ? "No matches" : "";
+  const matchCountLabel = hasResults ? t2("pptx.findReplace.matchCount", { current: findResultIndex + 1, total: findResults.length }) : findQuery.length > 0 ? t2("pptx.findReplace.noMatches") : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-40 bg-popover border border-border rounded-lg shadow-lg p-3 text-xs text-foreground w-80 backdrop-blur", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-sm inline-flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lu.LuSearch, { className: ic }),
-        "Find & Replace"
+        t2("pptx.findReplace.title")
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -90815,8 +90936,8 @@ function FindReplacePanel({
           type: "button",
           className: btnGhost,
           onClick: onClose,
-          title: "Close (Escape)",
-          "aria-label": "Close find and replace",
+          title: t2("pptx.findReplace.closeEscape"),
+          "aria-label": t2("pptx.findReplace.closeAriaLabel"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: ic })
         }
       )
@@ -90831,9 +90952,9 @@ function FindReplacePanel({
             value: findQuery,
             onChange: (e2) => onSetFindQuery(e2.target.value),
             onKeyDown: handleSearchKeyDown,
-            placeholder: "Find\u2026",
+            placeholder: t2("pptx.findReplace.findPlaceholder"),
             className: "w-full bg-muted border border-border rounded px-2 py-1 pr-7 text-xs text-foreground placeholder-muted-foreground focus:border-primary focus:outline-none",
-            "aria-label": "Search text"
+            "aria-label": t2("pptx.findReplace.searchText")
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -90842,8 +90963,8 @@ function FindReplacePanel({
             type: "button",
             className: `absolute right-1 top-1/2 -translate-y-1/2 p-0.5 rounded transition-colors ${findMatchCase ? "bg-primary/80 text-white" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`,
             onClick: () => onSetFindMatchCase(!findMatchCase),
-            title: "Match case",
-            "aria-label": "Toggle match case",
+            title: t2("pptx.findReplace.matchCase"),
+            "aria-label": t2("pptx.findReplace.toggleMatchCase"),
             "aria-pressed": findMatchCase,
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCaseSensitive, { className: ic })
           }
@@ -90856,8 +90977,8 @@ function FindReplacePanel({
           className: btnGhost,
           onClick: () => onNavigateResult(-1),
           disabled: !hasResults,
-          title: "Previous match (Shift+Enter)",
-          "aria-label": "Previous match",
+          title: t2("pptx.findReplace.previousMatch"),
+          "aria-label": t2("pptx.findReplace.previousMatch"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronUp, { className: ic })
         }
       ),
@@ -90868,8 +90989,8 @@ function FindReplacePanel({
           className: btnGhost,
           onClick: () => onNavigateResult(1),
           disabled: !hasResults,
-          title: "Next match (Enter)",
-          "aria-label": "Next match",
+          title: t2("pptx.findReplace.nextMatch"),
+          "aria-label": t2("pptx.findReplace.nextMatch"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: ic })
         }
       )
@@ -90884,9 +91005,9 @@ function FindReplacePanel({
           value: replaceQuery,
           onChange: (e2) => onSetReplaceQuery(e2.target.value),
           onKeyDown: handleReplaceKeyDown,
-          placeholder: "Replace with\u2026",
+          placeholder: t2("pptx.findReplace.replacePlaceholder"),
           className: "w-full bg-muted border border-border rounded pl-7 pr-2 py-1 text-xs text-foreground placeholder-muted-foreground focus:border-primary focus:outline-none",
-          "aria-label": "Replacement text"
+          "aria-label": t2("pptx.findReplace.replacementText")
         }
       )
     ] }) }),
@@ -90898,8 +91019,8 @@ function FindReplacePanel({
           className: btnAction,
           onClick: onReplace,
           disabled: !hasResults,
-          title: "Replace current match",
-          children: "Replace"
+          title: t2("pptx.findReplace.replaceCurrent"),
+          children: t2("pptx.findReplace.replace")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -90909,8 +91030,8 @@ function FindReplacePanel({
           className: btnAction,
           onClick: onReplaceAll,
           disabled: !hasResults,
-          title: "Replace all matches",
-          children: "Replace All"
+          title: t2("pptx.findReplace.replaceAllMatches"),
+          children: t2("pptx.findReplace.replaceAll")
         }
       )
     ] })
@@ -91319,8 +91440,8 @@ function SlideItemInner({
     {
       ref: slideRef,
       className: cn(
-        "group relative cursor-pointer rounded-lg border-2 p-1 transition-all",
-        isActive ? "border-primary bg-primary/10" : "border-border bg-background/40 hover:border-muted-foreground",
+        "group relative flex items-center gap-1 cursor-pointer py-0.5 px-1 transition-all",
+        isActive && "bg-accent/40 before:absolute before:left-0 before:top-1 before:bottom-1 before:w-[3px] before:bg-primary before:rounded-r",
         isHidden && "opacity-50"
       ),
       draggable: canEdit,
@@ -91330,21 +91451,35 @@ function SlideItemInner({
       onDragOver,
       onDrop: (e2) => onDrop(e2, slideIndex),
       children: [
-        isHidden && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg pointer-events-none bg-[repeating-linear-gradient(135deg,transparent,transparent_4px,rgba(255,255,255,0.04)_4px,rgba(255,255,255,0.04)_8px)]" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded bg-white", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LazyThumbnail, { slide, canvasSize, previewHeight }),
-          (slide.comments?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0.5 right-0.5 flex items-center gap-0.5 rounded bg-amber-500/90 px-1 py-0.5 text-[8px] font-medium text-white leading-none", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lu.LuMessageSquare, { className: "w-2 h-2" }),
-            slide.comments?.length
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px]", isActive ? "text-primary" : "text-muted-foreground"), children: slideIndex + 1 }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            rehearsalTimings && typeof rehearsalTimings[slideIndex] === "number" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-mono text-amber-400/80 tabular-nums", children: formatTimingMs(rehearsalTimings[slideIndex]) }),
-            isHidden && /* @__PURE__ */ jsxRuntime.jsx(lu.LuEyeOff, { className: "w-3 h-3 text-muted-foreground" })
-          ] })
-        ] })
+        /* @__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: cn(
+              "relative flex-1 overflow-hidden border transition-colors bg-white",
+              isActive ? "border-primary/60" : "border-transparent group-hover:border-border/40"
+            ),
+            children: [
+              isHidden && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none z-10 bg-[repeating-linear-gradient(135deg,transparent,transparent_4px,rgba(255,255,255,0.04)_4px,rgba(255,255,255,0.04)_8px)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx(LazyThumbnail, { slide, canvasSize, previewHeight }),
+              (slide.comments?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0.5 right-0.5 flex items-center gap-0.5 rounded bg-amber-500/90 px-1 py-0.5 text-[8px] font-medium text-white leading-none z-10", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lu.LuMessageSquare, { className: "w-2 h-2" }),
+                slide.comments?.length
+              ] }),
+              isHidden && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0.5 right-0.5 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuEyeOff, { className: "w-3 h-3 text-muted-foreground" }) }),
+              rehearsalTimings && typeof rehearsalTimings[slideIndex] === "number" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0.5 left-0.5 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-mono text-amber-400/80 tabular-nums bg-black/50 px-0.5 rounded", children: formatTimingMs(rehearsalTimings[slideIndex]) }) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -91465,7 +91600,7 @@ function SlidesPaneSidebar({
   onSlideContextMenu,
   onMoveSlide,
   onAddSlide,
-  onCollapse,
+  onCollapse: _onCollapse,
   onAddSection,
   onRenameSection,
   onDeleteSection,
@@ -91670,50 +91805,23 @@ function SlidesPaneSidebar({
     {
       role: "navigation",
       "aria-label": "Slides",
-      className: "flex h-full flex-col border-r border-border bg-background/70 backdrop-blur-sm",
+      className: "flex h-full flex-col border-r border-border bg-secondary/30",
       style: panelWidth ? { width: panelWidth, flexShrink: 0 } : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t2("pptx.sections.slides") }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
-              title: t2("pptx.sections.collapsePane"),
-              onClick: onCollapse,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPanelLeftClose, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ] }),
         shouldVirtualize ? renderVirtualized() : renderNonVirtualized(),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/60 px-3 py-2 space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full items-center justify-center gap-1 rounded bg-muted/80 px-2 py-1.5 text-xs text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40",
-              disabled: !canEdit,
-              onClick: onAddSlide,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: "h-3.5 w-3.5" }),
-                t2("pptx.sections.addSlide")
-              ]
-            }
-          ),
-          canEdit && onAddSection && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full items-center justify-center gap-1 rounded bg-muted/50 px-2 py-1 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground",
-              onClick: () => onAddSection(t2("pptx.sections.defaultName"), activeSlideIndex),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: "h-3 w-3" }),
-                t2("pptx.sections.addSection")
-              ]
-            }
-          )
-        ] }),
+        canEdit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/60 px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-center gap-1 rounded-sm px-2 py-1 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-40",
+            disabled: !canEdit,
+            onClick: onAddSlide,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: "h-3 w-3" }),
+              t2("pptx.sections.addSlide")
+            ]
+          }
+        ) }),
         sectionContextMenu && /* @__PURE__ */ jsxRuntime.jsx(
           SectionContextMenu,
           {
@@ -94148,23 +94256,18 @@ var SlideNotesPanel = ({
   });
   const hasNotes = draft.trim().length > 0;
   const slideLabel = activeSlide ? t2("pptx.notes.slideN", { n: activeSlide.slideNumber }) : t2("pptx.notes.noSlide");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-border/60 bg-background/80 select-none", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-border/60 bg-background select-none", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         onClick: onToggle,
-        className: "flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors w-full text-left shrink-0",
+        className: "flex items-center gap-1.5 px-3 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors w-full text-left shrink-0",
         "aria-expanded": isExpanded,
         "aria-controls": "slide-notes-content",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lu.LuStickyNote, { className: "w-3.5 h-3.5 shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tracking-wide uppercase", children: t2("pptx.notes.title") }),
-          !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 truncate max-w-[240px] text-muted-foreground font-normal normal-case", children: [
-            "- ",
-            draft.trim().split("\n")[0]
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronUp, { className: "w-3.5 h-3.5" }) })
+          "Notes",
+          !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "(has notes)" })
         ]
       }
     ),
@@ -96432,15 +96535,14 @@ function SelectionPane({
     }) })
   ] });
 }
-var _b = "inline-flex items-center justify-center px-2.5 py-1.5 max-md:min-h-[44px] max-md:min-w-[44px]";
+var _b = "inline-flex items-center justify-center px-2.5 py-1.5 max-md:min-h-[44px] max-md:min-w-[44px] active:scale-95 active:opacity-80";
 var gB = `${_b} border-r border-border hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed`;
 var gL = `${_b} hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed`;
 var grp = "inline-flex items-center rounded bg-muted text-xs overflow-hidden";
-var pill = "inline-flex items-center gap-1.5 px-2.5 py-1.5 max-md:min-h-[44px] rounded bg-muted hover:bg-accent text-xs transition-colors";
-var sep = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-5 bg-border/60 mx-0.5 max-md:hidden" });
+var pill = "inline-flex items-center gap-1.5 px-2.5 py-1.5 max-md:min-h-[44px] rounded bg-muted hover:bg-accent text-xs transition-colors active:scale-95 active:opacity-80";
+var sep = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px self-stretch bg-border/40 mx-1 max-md:hidden" });
 var ic2 = "w-4 h-4";
 var ics = "w-3.5 h-3.5";
-var MODES = ["edit", "preview", "present"];
 var ALIGN_BTNS = [
   { k: "left", el: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignLeft, { className: ic2 }) },
   { k: "center", el: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignCenter, { className: ic2 }) },
@@ -96559,7 +96661,128 @@ var ATXT = [
   { i: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignRight, { className: ic2 }), t: "Align right" },
   { i: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignJustify, { className: ic2 }), t: "Justify" }
 ];
+var ANIMATION_PRESETS = [
+  {
+    group: "Entrance",
+    items: [
+      { value: "appear", label: "Appear" },
+      { value: "fadeIn", label: "Fade In" },
+      { value: "flyIn", label: "Fly In" }
+    ]
+  },
+  {
+    group: "Emphasis",
+    items: [
+      { value: "pulse", label: "Pulse" },
+      { value: "spin", label: "Spin" }
+    ]
+  },
+  {
+    group: "Exit",
+    items: [
+      { value: "disappear", label: "Disappear" },
+      { value: "fadeOut", label: "Fade Out" }
+    ]
+  }
+];
+function AnimationsSection(p3) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const [previewActive, setPreviewActive] = React10.useState(false);
+  const hasElement = p3.selectedElement !== null;
+  const disabled = !p3.canEdit || !hasElement;
+  const handlePreview = () => {
+    if (disabled) {
+      return;
+    }
+    setPreviewActive(true);
+    setTimeout(() => setPreviewActive(false), 1200);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handlePreview,
+        disabled,
+        className: cn(
+          pill,
+          previewActive ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: t2("pptx.animations.previewTooltip"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlay, { className: ic2 }),
+          t2("pptx.animations.preview")
+        ]
+      }
+    ),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: pill,
+          title: t2("pptx.animations.addTooltip"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lu.LuSparkles, { className: ic2 }),
+            t2("pptx.animations.addAnimation"),
+            /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: "w-3 h-3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 hidden group-hover:flex flex-col w-44 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1", children: ANIMATION_PRESETS.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(React10__namespace.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-1.5 pb-0.5 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider", children: t2(`pptx.animations.group.${group.group.toLowerCase()}`) }),
+        group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+            title: t2("pptx.animations.applyAnimation", {
+              name: t2(`pptx.animations.preset.${item.value}`)
+            }),
+            children: t2(`pptx.animations.preset.${item.value}`)
+          },
+          item.value
+        ))
+      ] }, group.group)) }) })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: pill,
+        title: t2("pptx.animations.removeTooltip"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuTrash2, { className: ic2 }),
+          t2("pptx.animations.remove")
+        ]
+      }
+    ),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleInspector,
+        className: cn(
+          pill,
+          p3.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: t2("pptx.animations.openPanelTooltip"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPanelRight, { className: ic2 }),
+          t2("pptx.animations.animationPanel")
+        ]
+      }
+    )
+  ] });
+}
 function ArrangeSection(p3) {
+  const { t: t2 } = reactI18next.useTranslation();
   const hasSel = Boolean(p3.selectedElement);
   const canMut = hasSel && p3.canEdit;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -96570,21 +96793,21 @@ function ArrangeSection(p3) {
         onClick: () => p3.onAlignElements(a2.k),
         disabled: !canMut,
         className: i3 < arr.length - 1 ? gB : gL,
-        title: `Align ${a2.k}`,
+        title: t2("pptx.arrange.align", { direction: a2.k }),
         children: a2.el
       },
       a2.k
     )) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: p3.onCopy, disabled: !hasSel, className: gB, title: "Copy", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: p3.onCut, disabled: !canMut, className: gB, title: "Cut", children: "Cut" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: p3.onCopy, disabled: !hasSel, className: gB, title: t2("pptx.arrange.copy"), children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: p3.onCut, disabled: !canMut, className: gB, title: t2("pptx.arrange.cut"), children: t2("pptx.arrange.cut") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: p3.onPaste,
           disabled: !p3.clipboardPayload || !p3.canEdit,
           className: gL,
-          title: "Paste",
+          title: t2("pptx.arrange.paste"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuClipboardPaste, { className: ic2 })
         }
       )
@@ -96599,10 +96822,10 @@ function ArrangeSection(p3) {
           pill,
           p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
         ),
-        title: "Format Painter",
+        title: t2("pptx.arrange.formatPainter"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lu.LuPaintbrush, { className: ic2 }),
-          "Format"
+          t2("pptx.arrange.format")
         ]
       }
     ),
@@ -96614,8 +96837,8 @@ function ArrangeSection(p3) {
           onClick: () => p3.onFlip("horizontal"),
           disabled: !canMut,
           className: gB,
-          title: "Flip horizontally",
-          children: "Flip H"
+          title: t2("pptx.arrange.flipHorizontally"),
+          children: t2("pptx.arrange.flipH")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -96625,8 +96848,8 @@ function ArrangeSection(p3) {
           onClick: () => p3.onFlip("vertical"),
           disabled: !canMut,
           className: gL,
-          title: "Flip vertically",
-          children: "Flip V"
+          title: t2("pptx.arrange.flipVertically"),
+          children: t2("pptx.arrange.flipV")
         }
       )
     ] }),
@@ -96637,7 +96860,7 @@ function ArrangeSection(p3) {
           onClick: () => p3.onMoveLayer("backward"),
           disabled: !canMut,
           className: gB,
-          title: "Send backward",
+          title: t2("pptx.arrange.sendBackward"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: ic2 })
         }
       ),
@@ -96647,7 +96870,7 @@ function ArrangeSection(p3) {
           onClick: () => p3.onMoveLayer("forward"),
           disabled: !canMut,
           className: gB,
-          title: "Bring forward",
+          title: t2("pptx.arrange.bringForward"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronUp, { className: ic2 })
         }
       ),
@@ -96657,8 +96880,8 @@ function ArrangeSection(p3) {
           onClick: () => p3.onMoveLayerToEdge("back"),
           disabled: !canMut,
           className: gB,
-          title: "Send to back",
-          children: "Back"
+          title: t2("pptx.arrange.sendToBack"),
+          children: t2("pptx.arrange.back")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -96667,25 +96890,34 @@ function ArrangeSection(p3) {
           onClick: () => p3.onMoveLayerToEdge("front"),
           disabled: !canMut,
           className: gL,
-          title: "Bring to front",
-          children: "Front"
+          title: t2("pptx.arrange.bringToFront"),
+          children: t2("pptx.arrange.front")
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onDuplicate, disabled: !canMut, className: pill, title: "Duplicate", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 }),
-      "Duplicate"
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: p3.onDuplicate,
+        disabled: !canMut,
+        className: pill,
+        title: t2("pptx.arrange.duplicate"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 }),
+          t2("pptx.arrange.duplicate")
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         onClick: p3.onDelete,
         disabled: !canMut,
         className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded bg-red-700/80 hover:bg-red-600 disabled:opacity-40 disabled:cursor-not-allowed text-xs transition-colors",
-        title: "Delete",
+        title: t2("pptx.arrange.delete"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lu.LuTrash2, { className: ic2 }),
-          "Delete"
+          t2("pptx.arrange.delete")
         ]
       }
     )
@@ -96724,12 +96956,91 @@ function DesignSection(p3) {
           "Edit Theme"
         ]
       }
+    ),
+    sep,
+    p3.onOpenDocumentProperties && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: p3.onOpenDocumentProperties,
+        className: pill,
+        title: "Change slide dimensions (16:9, 4:3, custom)",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuMonitor, { className: ics }),
+          "Slide Size"
+        ]
+      }
+    ),
+    p3.onToggleInspector && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: p3.onToggleInspector,
+        className: cn(
+          pill,
+          p3.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: "Open inspector to edit slide background",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPaintBucket, { className: ics }),
+          "Format Background"
+        ]
+      }
     )
   ] });
 }
+var TRANSITION_PRESETS = [
+  { value: "none", label: "None" },
+  { value: "fade", label: "Fade" },
+  { value: "push", label: "Push" },
+  { value: "wipe", label: "Wipe" },
+  { value: "split", label: "Split" },
+  { value: "reveal", label: "Reveal" },
+  { value: "cut", label: "Cut" },
+  { value: "cover", label: "Cover" },
+  { value: "uncover", label: "Uncover" }
+];
 function TransitionsSection(p3) {
+  const [selected, setSelected] = React10__namespace.default.useState("none");
+  const [duration, setDuration] = React10__namespace.default.useState("00.50");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground px-2", children: "Configure transitions in the Inspector panel (Slide tab)." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: pill, title: "Preview transition", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlay, { className: ics }),
+      "Preview"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center gap-0.5 overflow-x-auto max-w-[420px]", children: TRANSITION_PRESETS.map((t2) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setSelected(t2.value),
+        className: cn(
+          "flex-shrink-0 px-2 py-1 max-md:min-h-[44px] rounded border text-[11px] leading-tight transition-colors",
+          selected === t2.value ? "border-primary bg-primary/10 text-primary font-medium" : "border-border bg-muted hover:bg-accent text-foreground"
+        ),
+        title: `${t2.label} transition`,
+        children: t2.label
+      },
+      t2.value
+    )) }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: "Duration:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: duration,
+          onChange: (e2) => setDuration(e2.target.value),
+          className: "w-14 px-1.5 py-1 rounded border border-border bg-muted text-xs text-foreground text-center",
+          title: "Transition duration in seconds"
+        }
+      )
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: pill, title: "Apply transition to all slides", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ics }),
+      "Apply to All"
+    ] }),
+    sep,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -96739,7 +97050,7 @@ function TransitionsSection(p3) {
           pill,
           p3.isInspectorPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
         ),
-        title: "Open Inspector to edit transitions",
+        title: "Open Inspector for full transition options",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lu.LuPanelRight, { className: ic2 }),
           "Inspector"
@@ -96850,6 +97161,321 @@ function DrawSection(p3) {
     ] })
   ] });
 }
+function FileSection(p3) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onSaveAsPpsx, className: pill, title: "Save as Slide Show (.ppsx)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlay, { className: ic2 }),
+      "Save .ppsx"
+    ] }),
+    p3.hasMacros && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onSaveAsPptm, className: pill, title: "Save as Macro-Enabled (.pptm)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileText, { className: ic2 }),
+      "Save .pptm"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onPackageForSharing, className: pill, title: "Package for Sharing", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuFolderOpen, { className: ic2 }),
+      "Package"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onExportPng, className: pill, title: "Export as PNG", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuDownload, { className: ic2 }),
+      "PNG"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onExportPdf, className: pill, title: "Export as PDF", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileText, { className: ic2 }),
+      "PDF"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onExportVideo, className: pill, title: "Export as Video", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuVideo, { className: ic2 }),
+      "Video"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onExportGif, className: pill, title: "Export as GIF", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuImage, { className: ic2 }),
+      "GIF"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onCopySlideAsImage, className: pill, title: "Copy Slide as Image", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 }),
+      "Copy Image"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onPrint, className: pill, title: "Print", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuPrinter, { className: ic2 }),
+      "Print"
+    ] }),
+    sep,
+    p3.onOpenDocumentProperties && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenDocumentProperties, className: pill, title: "Document Properties", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuInfo, { className: ic2 }),
+      "Properties"
+    ] }),
+    p3.onOpenPasswordProtection && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenPasswordProtection, className: pill, title: "Protect Presentation", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuLock, { className: ic2 }),
+      "Protect"
+    ] }),
+    p3.onOpenFontEmbedding && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenFontEmbedding, className: pill, title: "Embed Fonts", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuType, { className: ic2 }),
+      "Fonts"
+    ] }),
+    p3.onOpenDigitalSignatures && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenDigitalSignatures, className: pill, title: "Digital Signatures", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuShieldAlert, { className: ic2 }),
+      "Signatures"
+    ] })
+  ] });
+}
+function extractFontInfo(element2) {
+  const defaults = { fontFamily: "Segoe UI", fontSize: "24" };
+  if (!element2) {
+    return defaults;
+  }
+  if (!pptxViewerCore.hasTextProperties(element2)) {
+    return defaults;
+  }
+  const segStyle = element2.textSegments?.[0]?.style;
+  const textStyle = element2.textStyle;
+  const fontFamily = segStyle?.fontFamily ?? textStyle?.fontFamily ?? defaults.fontFamily;
+  const fontSize = segStyle?.fontSize ?? textStyle?.fontSize;
+  return {
+    fontFamily,
+    fontSize: fontSize !== void 0 && fontSize !== null ? String(fontSize) : defaults.fontSize
+  };
+}
+var COMMON_FONTS = [
+  "Arial",
+  "Calibri",
+  "Cambria",
+  "Comic Sans MS",
+  "Courier New",
+  "Georgia",
+  "Helvetica",
+  "Impact",
+  "Segoe UI",
+  "Tahoma",
+  "Times New Roman",
+  "Trebuchet MS",
+  "Verdana"
+];
+var COMMON_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 54, 60, 72, 96];
+function HomeSection(p3) {
+  const [layoutMenuOpen, setLayoutMenuOpen] = React10.useState(false);
+  const [fontMenuOpen, setFontMenuOpen] = React10.useState(false);
+  const [sizeMenuOpen, setSizeMenuOpen] = React10.useState(false);
+  const [copiedFeedback, setCopiedFeedback] = React10.useState(false);
+  const [cutFeedback, setCutFeedback] = React10.useState(false);
+  const layoutMenuRef = React10.useRef(null);
+  const fontMenuRef = React10.useRef(null);
+  const sizeMenuRef = React10.useRef(null);
+  const { fontFamily, fontSize } = extractFontInfo(p3.selectedElement);
+  const handleNewSlide = React10.useCallback(() => {
+    if (p3.layoutOptions.length > 0) {
+      p3.onInsertSlideFromLayout(p3.layoutOptions[0].path);
+    }
+  }, [p3]);
+  React10.useEffect(() => {
+    if (!layoutMenuOpen) {
+      return;
+    }
+    const handler = (e2) => {
+      if (layoutMenuRef.current && !layoutMenuRef.current.contains(e2.target)) {
+        setLayoutMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [layoutMenuOpen]);
+  React10.useEffect(() => {
+    if (!fontMenuOpen) {
+      return;
+    }
+    const handler = (e2) => {
+      if (fontMenuRef.current && !fontMenuRef.current.contains(e2.target)) {
+        setFontMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [fontMenuOpen]);
+  React10.useEffect(() => {
+    if (!sizeMenuOpen) {
+      return;
+    }
+    const handler = (e2) => {
+      if (sizeMenuRef.current && !sizeMenuRef.current.contains(e2.target)) {
+        setSizeMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [sizeMenuOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: p3.onPaste,
+            disabled: !p3.clipboardPayload || !p3.canEdit,
+            className: gB,
+            title: "Paste",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuClipboardPaste, { className: ic2 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              p3.onCut();
+              setCutFeedback(true);
+              setTimeout(() => setCutFeedback(false), 600);
+            },
+            disabled: !p3.canEdit,
+            className: cn(gB, cutFeedback && "bg-green-600/20 text-green-400"),
+            title: "Cut",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuScissors, { className: ic2 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              p3.onCopy();
+              setCopiedFeedback(true);
+              setTimeout(() => setCopiedFeedback(false), 600);
+            },
+            className: cn(gB, copiedFeedback && "bg-green-600/20 text-green-400"),
+            title: "Copy",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { className: ic2 })
+          }
+        ),
+        p3.onToggleFormatPainter && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: p3.onToggleFormatPainter,
+            disabled: !p3.canEdit,
+            className: cn(
+              gL,
+              p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
+            ),
+            title: "Format Painter",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPaintbrush, { className: ic2 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Clipboard" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex items-center", ref: layoutMenuRef, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleNewSlide,
+            disabled: !p3.canEdit || p3.layoutOptions.length === 0,
+            className: cn(
+              pill,
+              "whitespace-nowrap",
+              p3.layoutOptions.length > 0 ? "rounded-r-none" : ""
+            ),
+            title: "New Slide",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: ic2 }),
+              "New Slide"
+            ]
+          }
+        ),
+        p3.layoutOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !p3.canEdit,
+            className: "inline-flex items-center justify-center self-stretch px-1 rounded-r bg-muted hover:bg-accent text-xs transition-colors border-l border-border/40 active:scale-95 active:opacity-80",
+            title: "Choose layout",
+            onClick: () => setLayoutMenuOpen((v) => !v),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: "w-3 h-3" })
+          }
+        ),
+        layoutMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 flex flex-col w-48 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1 max-h-60 overflow-y-auto", children: p3.layoutOptions.map((lo) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
+            onClick: () => {
+              p3.onInsertSlideFromLayout(lo.path);
+              setLayoutMenuOpen(false);
+            },
+            children: lo.name
+          },
+          lo.path
+        )) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Slides" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: fontMenuRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setFontMenuOpen((v) => !v),
+              className: "inline-flex items-center justify-between px-2 py-1 rounded-sm border border-border/60 bg-background/60 text-[11px] text-foreground min-w-[120px] truncate hover:bg-accent/40 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: fontFamily }),
+                /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: "w-3 h-3 ml-1 shrink-0 text-muted-foreground" })
+              ]
+            }
+          ),
+          fontMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 flex flex-col w-48 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1 max-h-60 overflow-y-auto", children: COMMON_FONTS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
+              style: { fontFamily: f },
+              onClick: () => {
+                p3.onUpdateTextStyle?.({ fontFamily: f });
+                setFontMenuOpen(false);
+              },
+              children: f
+            },
+            f
+          )) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: sizeMenuRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSizeMenuOpen((v) => !v),
+              className: "inline-flex items-center justify-between px-2 py-1 rounded-sm border border-border/60 bg-background/60 text-[11px] text-foreground min-w-[50px] text-center hover:bg-accent/40 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: fontSize }),
+                /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { className: "w-3 h-3 ml-1 shrink-0 text-muted-foreground" })
+              ]
+            }
+          ),
+          sizeMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 flex flex-col w-48 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl py-1 max-h-60 overflow-y-auto", children: COMMON_SIZES.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
+              onClick: () => {
+                p3.onUpdateTextStyle?.({ fontSize: s });
+                setSizeMenuOpen(false);
+              },
+              children: s
+            },
+            s
+          )) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Font" })
+    ] }),
+    sep
+  ] });
+}
 function InsertSection(p3) {
   const { t: t2 } = reactI18next.useTranslation();
   const { canEdit } = p3;
@@ -97208,6 +97834,60 @@ function InsertSection(p3) {
     )
   ] });
 }
+function SlideShowSection(p3) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => p3.onSetMode("present"),
+        className: pill,
+        title: "Start slide show from beginning",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlay, { className: ic2 }),
+          "From Beginning"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onPresent, className: pill, title: "Start slide show from current slide", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlay, { className: ic2 }),
+      "From Current Slide"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onEnterPresenterView, className: pill, title: "Presenter view", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuMonitor, { className: ic2 }),
+      "Presenter View"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onEnterRehearsalMode, className: pill, title: "Rehearse timings", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuClock, { className: ic2 }),
+      "Rehearse Timings"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenSetUpSlideShow, className: pill, title: "Set up slide show", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuSettings, { className: ic2 }),
+      "Set Up Slide Show"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: p3.onOpenBroadcastDialog, className: pill, title: "Broadcast slide show", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lu.LuCast, { className: ic2 }),
+      "Broadcast"
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: p3.onToggleSubtitles,
+        className: cn(
+          pill,
+          p3.showSubtitles ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: "Toggle subtitles",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuCaptions, { className: ic2 }),
+          "Subtitles"
+        ]
+      }
+    )
+  ] });
+}
 var FONT_COLOR_PRESETS = [
   "#000000",
   "#ffffff",
@@ -97220,6 +97900,18 @@ var FONT_COLOR_PRESETS = [
   "#ff69b4",
   "#808080"
 ];
+var HIGHLIGHT_COLOR_PRESETS = [
+  "#ffff00",
+  "#00ff00",
+  "#00ffff",
+  "#ff00ff",
+  "#0000ff",
+  "#ff0000",
+  "#000080",
+  "#008080",
+  "#008000",
+  "#800080"
+];
 function TextSection(p3) {
   const hasSel = Boolean(p3.selectedElement);
   const canMut = hasSel && p3.canEdit;
@@ -97227,7 +97919,9 @@ function TextSection(p3) {
   const isTable = hasSel && p3.selectedElement?.type === "table";
   const canFormat = isTextEl || isTable;
   const currentColor = isTextEl && p3.selectedElement && pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textSegments?.[0]?.style?.color ?? p3.selectedElement.textStyle?.color ?? "#000000" : "#000000";
+  const currentHighlight = isTextEl && p3.selectedElement && pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textSegments?.[0]?.style?.highlightColor ?? p3.selectedElement.textStyle?.highlightColor ?? "#ffff00" : "#ffff00";
   const colorInputRef = React10.useRef(null);
+  const highlightInputRef = React10.useRef(null);
   const handleColorChange = React10.useCallback(
     (color) => {
       if (!canFormat) {
@@ -97237,138 +97931,709 @@ function TextSection(p3) {
     },
     [canFormat, p3]
   );
+  const handleHighlightChange = React10.useCallback(
+    (highlightColor) => {
+      if (!canFormat) {
+        return;
+      }
+      p3.onUpdateTextStyle({ highlightColor });
+    },
+    [canFormat, p3]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: grp, children: FMT.map((b2, i3, a2) => {
-      const handleClick = () => {
-        if (!canFormat || !p3.selectedElement) {
-          return;
-        }
-        const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
-        switch (b2.t) {
-          case "Bold":
-            p3.onUpdateTextStyle({ bold: !ts?.bold });
-            break;
-          case "Italic":
-            p3.onUpdateTextStyle({ italic: !ts?.italic });
-            break;
-          case "Underline":
-            p3.onUpdateTextStyle({
-              underline: !ts?.underline
-            });
-            break;
-          case "Strikethrough":
-            p3.onUpdateTextStyle({
-              strikethrough: !ts?.strikethrough
-            });
-            break;
-        }
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          disabled: !canMut,
-          onMouseDown: (e2) => e2.preventDefault(),
-          onClick: handleClick,
-          className: i3 < a2.length - 1 ? gB : gL,
-          title: b2.t,
-          children: b2.i
-        },
-        b2.t
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: !canMut,
-          onMouseDown: (e2) => e2.preventDefault(),
-          className: pill,
-          title: "Font color",
-          children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: grp, children: FMT.map((b2, i3, a2) => {
+          const handleClick = () => {
+            if (!canFormat || !p3.selectedElement) {
+              return;
+            }
+            const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+            switch (b2.t) {
+              case "Bold":
+                p3.onUpdateTextStyle({ bold: !ts?.bold });
+                break;
+              case "Italic":
+                p3.onUpdateTextStyle({ italic: !ts?.italic });
+                break;
+              case "Underline":
+                p3.onUpdateTextStyle({
+                  underline: !ts?.underline
+                });
+                break;
+              case "Strikethrough":
+                p3.onUpdateTextStyle({
+                  strikethrough: !ts?.strikethrough
+                });
+                break;
+            }
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: handleClick,
+              className: i3 < a2.length - 1 ? gB : gL,
+              title: b2.t,
+              children: b2.i
+            },
+            b2.t
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                const current = ts?.fontSize ?? 18;
+                p3.onUpdateTextStyle({ fontSize: current + 2 });
+              },
+              className: gB,
+              title: "Increase Font Size",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAArrowUp, { className: ic2 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                const current = ts?.fontSize ?? 18;
+                p3.onUpdateTextStyle({ fontSize: Math.max(1, current - 2) });
+              },
+              className: gB,
+              title: "Decrease Font Size",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAArrowDown, { className: ic2 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat) {
+                  return;
+                }
+                p3.onUpdateTextStyle({
+                  bold: false,
+                  italic: false,
+                  underline: false,
+                  strikethrough: false,
+                  highlightColor: void 0
+                });
+              },
+              className: gL,
+              title: "Clear Formatting",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRemoveFormatting, { className: ic2 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              className: pill,
+              title: "Font Color",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: ic2,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 20h12M9.5 4h5L18 16H6L9.5 4z" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-4 h-1 rounded-sm -mt-0.5",
+                    style: { backgroundColor: currentColor }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 hidden group-hover:block pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl p-2 w-36", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1.5 mb-2", children: FONT_COLOR_PRESETS.map((c2) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `w-5 h-5 rounded-full border transition-transform hover:scale-125 ${currentColor?.toLowerCase() === c2 ? "border-primary ring-1 ring-primary" : "border-border"}`,
+                style: { backgroundColor: c2 },
+                onMouseDown: (e2) => e2.preventDefault(),
+                onClick: () => handleColorChange(c2)
+              },
+              c2
+            )) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
+              "button",
               {
-                className: ic2,
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 20h12M9.5 4h5L18 16H6L9.5 4z" })
+                type: "button",
+                className: "w-full text-[10px] text-muted-foreground hover:text-foreground py-1 transition-colors",
+                onMouseDown: (e2) => e2.preventDefault(),
+                onClick: () => colorInputRef.current?.click(),
+                children: "Custom colour..."
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-1 rounded-sm -mt-0.5", style: { backgroundColor: currentColor } })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 hidden group-hover:block pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl p-2 w-36", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1.5 mb-2", children: FONT_COLOR_PRESETS.map((c2) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: `w-5 h-5 rounded-full border transition-transform hover:scale-125 ${currentColor?.toLowerCase() === c2 ? "border-primary ring-1 ring-primary" : "border-border"}`,
-            style: { backgroundColor: c2 },
-            onMouseDown: (e2) => e2.preventDefault(),
-            onClick: () => handleColorChange(c2)
-          },
-          c2
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "w-full text-[10px] text-muted-foreground hover:text-foreground py-1 transition-colors",
-            onMouseDown: (e2) => e2.preventDefault(),
-            onClick: () => colorInputRef.current?.click(),
-            children: "Custom colour\u2026"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: colorInputRef,
-            type: "color",
-            className: "sr-only",
-            value: currentColor,
-            onChange: (e2) => handleColorChange(e2.target.value)
-          }
-        )
-      ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: colorInputRef,
+                type: "color",
+                className: "sr-only",
+                value: currentColor,
+                onChange: (e2) => handleColorChange(e2.target.value)
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              className: pill,
+              title: "Text Highlight Color",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lu.LuHighlighter, { className: ic2 }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-4 h-1 rounded-sm -mt-0.5",
+                    style: { backgroundColor: currentHighlight }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 hidden group-hover:block pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border bg-popover backdrop-blur-lg shadow-2xl p-2 w-36", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1.5 mb-2", children: HIGHLIGHT_COLOR_PRESETS.map((c2) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `w-5 h-5 rounded-full border transition-transform hover:scale-125 ${currentHighlight?.toLowerCase() === c2 ? "border-primary ring-1 ring-primary" : "border-border"}`,
+                style: { backgroundColor: c2 },
+                onMouseDown: (e2) => e2.preventDefault(),
+                onClick: () => handleHighlightChange(c2)
+              },
+              c2
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "w-full text-[10px] text-muted-foreground hover:text-foreground py-1 transition-colors",
+                onMouseDown: (e2) => e2.preventDefault(),
+                onClick: () => highlightInputRef.current?.click(),
+                children: "Custom colour..."
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: highlightInputRef,
+                type: "color",
+                className: "sr-only",
+                value: currentHighlight,
+                onChange: (e2) => handleHighlightChange(e2.target.value)
+              }
+            )
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Font" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: grp, children: ATXT.map((b2, i3, a2) => {
-      const handleClick = () => {
-        if (!canFormat) {
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                p3.onUpdateTextStyle({
+                  listType: ts?.listType === "bullet" ? "none" : "bullet"
+                });
+              },
+              className: gB,
+              title: "Bullet List",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: ic2 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                p3.onUpdateTextStyle({
+                  listType: ts?.listType === "numbered" ? "none" : "numbered"
+                });
+              },
+              className: gL,
+              title: "Numbered List",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuListOrdered, { className: ic2 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                const current = ts?.paragraphMarginLeft ?? 0;
+                p3.onUpdateTextStyle({
+                  paragraphMarginLeft: Math.max(0, current - 24)
+                });
+              },
+              className: gB,
+              title: "Decrease Indent",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuIndentDecrease, { className: ic2 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: () => {
+                if (!canFormat || !p3.selectedElement) {
+                  return;
+                }
+                const ts = pptxViewerCore.hasTextProperties(p3.selectedElement) ? p3.selectedElement.textStyle : void 0;
+                const current = ts?.paragraphMarginLeft ?? 0;
+                p3.onUpdateTextStyle({
+                  paragraphMarginLeft: current + 24
+                });
+              },
+              className: gL,
+              title: "Increase Indent",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuIndentIncrease, { className: ic2 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: grp, children: ATXT.map((b2, i3, a2) => {
+          const handleClick = () => {
+            if (!canFormat) {
+              return;
+            }
+            const alignMap = {
+              "Align left": "left",
+              "Align center": "center",
+              "Align right": "right",
+              Justify: "justify"
+            };
+            const align = alignMap[b2.t];
+            if (align) {
+              p3.onUpdateTextStyle({ align });
+            }
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !canMut,
+              onMouseDown: (e2) => e2.preventDefault(),
+              onClick: handleClick,
+              className: i3 < a2.length - 1 ? gB : gL,
+              title: b2.t,
+              children: b2.i
+            },
+            b2.t
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Paragraph" })
+    ] })
+  ] });
+}
+
+// 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 alignMap = {
-          "Align left": "left",
-          "Align center": "center",
-          "Align right": "right",
-          Justify: "justify"
-        };
-        const align = alignMap[b2.t];
-        if (align) {
-          p3.onUpdateTextStyle({ align });
+        const raw = state2?.presence;
+        if (!raw || typeof raw !== "object") {
+          return;
         }
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        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
         {
-          type: "button",
-          disabled: !canMut,
-          onMouseDown: (e2) => e2.preventDefault(),
-          onClick: handleClick,
-          className: i3 < a2.length - 1 ? gB : gL,
-          title: b2.t,
-          children: b2.i
-        },
-        b2.t
+          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,
@@ -97616,7 +98881,6 @@ function ModeSwitcher({
   mode,
   onSetMode,
   onCloseMasterView,
-  onToggleSlideSorter,
   onEnterPresenterView,
   onEnterRehearsalMode,
   onOpenSetUpSlideShow,
@@ -97625,64 +98889,33 @@ function ModeSwitcher({
   showSubtitles
 }) {
   if (mode === "master") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2 py-1 rounded bg-amber-600/90 text-[11px] text-amber-50", children: "Slide Master View" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-sm bg-amber-600/90 text-[10px] text-amber-50", children: "Master View" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: onCloseMasterView,
-          className: "px-2.5 py-1 rounded bg-muted hover:bg-accent text-[11px] text-foreground transition-colors",
+          className: "px-2 py-0.5 rounded-sm hover:bg-accent text-[10px] text-foreground transition-colors",
           title: "Close master view",
-          children: "Close Master View"
+          children: "Close"
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center rounded bg-muted text-[11px] overflow-hidden", children: [
-    MODES.map(
-      (m2) => m2 === "present" ? /* @__PURE__ */ jsxRuntime.jsx(
-        PresentDropdown,
-        {
-          isActive: mode === m2,
-          onPresent: () => onSetMode(m2),
-          onPresenterView: onEnterPresenterView,
-          onRehearse: onEnterRehearsalMode,
-          onSetUpSlideShow: onOpenSetUpSlideShow,
-          onBroadcast: onOpenBroadcastDialog,
-          onToggleSubtitles,
-          showSubtitles
-        },
-        m2
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSetMode(m2),
-          className: cn(
-            "px-2 py-1 transition-colors border-l border-border first:border-l-0",
-            mode === m2 ? "bg-primary text-primary-foreground" : "hover:bg-accent text-foreground"
-          ),
-          title: `${m2[0].toUpperCase()}${m2.slice(1)} mode`,
-          children: [
-            m2[0].toUpperCase(),
-            m2.slice(1)
-          ]
-        },
-        m2
-      )
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onToggleSlideSorter,
-        className: "px-2 py-1 border-l border-border hover:bg-accent text-foreground transition-colors",
-        title: "Slide sorter",
-        children: "Sorter"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PresentDropdown,
+    {
+      isActive: mode === "present",
+      onPresent: () => onSetMode("present"),
+      onPresenterView: onEnterPresenterView,
+      onRehearse: onEnterRehearsalMode,
+      onSetUpSlideShow: onOpenSetUpSlideShow,
+      onBroadcast: onOpenBroadcastDialog,
+      onToggleSubtitles,
+      showSubtitles
+    }
+  );
 }
 function OverflowMenu(p3) {
   const ovAct = (k2) => {
@@ -97750,14 +98983,12 @@ function OverflowMenu(p3) {
   ] });
 }
 function ToolbarPrimaryRow(p3) {
+  const { t: t2 } = reactI18next.useTranslation();
   const {
     mode,
     canEdit,
-    isNarrowViewport,
     isSidebarCollapsed,
     isInspectorPaneOpen,
-    isCompactToolbarOpen,
-    scale,
     canUndo,
     canRedo,
     undoLabel,
@@ -97765,26 +98996,21 @@ function ToolbarPrimaryRow(p3) {
     findReplaceOpen,
     onToggleSidebar,
     onToggleInspector,
-    onToggleCompactToolbar,
-    onZoomIn,
-    onZoomOut,
-    onZoomToFit,
     onUndo,
     onRedo,
     onToggleFindReplace
   } = p3;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 max-md:gap-0.5 flex-wrap", children: [
+  const collab = useCollaboration();
+  const qab = "p-1 max-md:p-2 max-md:min-h-[40px] max-md:min-w-[40px] rounded-sm transition-colors hover:bg-accent/60 disabled:opacity-40 disabled:cursor-not-allowed active:scale-90 active:opacity-70";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 max-md:gap-0 px-1.5 py-0.5 max-md:px-1", children: [
     mode !== "present" && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         onClick: onToggleSidebar,
-        className: cn(
-          "p-1.5 max-md:p-2.5 max-md:min-h-[44px] max-md:min-w-[44px] rounded transition-colors",
-          !isSidebarCollapsed ? "bg-primary/80 text-primary-foreground" : "bg-muted hover:bg-accent"
-        ),
-        title: "Toggle slides panel",
-        "aria-label": "Toggle slides panel",
+        className: cn(qab, !isSidebarCollapsed ? "text-foreground" : "text-muted-foreground"),
+        title: t2("pptx.toolbar.toggleSlidesPanel"),
+        "aria-label": t2("pptx.toolbar.toggleSlidesPanel"),
         children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPanelLeft, { className: ic2 })
       }
     ),
@@ -97792,77 +99018,84 @@ function ToolbarPrimaryRow(p3) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        onClick: onZoomOut,
-        className: "p-1.5 max-md:p-2.5 max-md:min-h-[44px] max-md:min-w-[44px] rounded bg-muted hover:bg-accent transition-colors",
-        title: "Zoom out",
-        "aria-label": "Zoom out",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuZoomOut, { className: ics })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: onZoomToFit,
-        className: "px-1.5 py-1 max-md:min-h-[44px] rounded bg-muted hover:bg-accent text-[11px] text-muted-foreground tabular-nums min-w-[3rem] text-center transition-colors",
-        title: "Zoom to fit",
-        children: [
-          Math.round(scale * 100),
-          "%"
-        ]
+        type: "button",
+        onClick: onUndo,
+        disabled: !canEdit || !canUndo,
+        className: cn(qab, "text-muted-foreground"),
+        title: undoLabel ? t2("pptx.toolbar.undoAction", { action: undoLabel }) : t2("pptx.toolbar.undo"),
+        "aria-label": t2("pptx.toolbar.undo"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo, { className: ics })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        onClick: onZoomIn,
-        className: "p-1.5 max-md:p-2.5 max-md:min-h-[44px] max-md:min-w-[44px] rounded bg-muted hover:bg-accent transition-colors",
-        title: "Zoom in",
-        "aria-label": "Zoom in",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuZoomIn, { className: ics })
+        type: "button",
+        onClick: onRedo,
+        disabled: !canEdit || !canRedo,
+        className: cn(qab, "text-muted-foreground"),
+        title: redoLabel ? t2("pptx.toolbar.redoAction", { action: redoLabel }) : t2("pptx.toolbar.redo"),
+        "aria-label": t2("pptx.toolbar.redo"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo, { className: ics })
       }
     ),
-    sep,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: grp, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onUndo,
-          disabled: !canEdit || !canUndo,
-          className: gB,
-          title: undoLabel ? `Undo: ${undoLabel}` : "Undo",
-          "aria-label": "Undo",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo, { className: ics })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRedo,
-          disabled: !canEdit || !canRedo,
-          className: gL,
-          title: redoLabel ? `Redo: ${redoLabel}` : "Redo",
-          "aria-label": "Redo",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo, { className: ics })
-        }
-      )
-    ] }),
     (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         onClick: onToggleFindReplace,
         className: cn(
-          "p-1.5 max-md:p-2.5 max-md:min-h-[44px] max-md:min-w-[44px] rounded transition-colors max-md:hidden",
-          findReplaceOpen ? "bg-primary/80 text-primary-foreground" : "bg-muted hover:bg-accent"
+          qab,
+          "max-md:hidden",
+          findReplaceOpen ? "text-foreground" : "text-muted-foreground"
         ),
-        title: "Find & Replace",
-        "aria-label": "Find and Replace",
+        title: t2("pptx.findReplace.title"),
+        "aria-label": t2("pptx.findReplace.title"),
         children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSearch, { className: ics })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-2 max-md:min-w-1" }),
+    (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleComments,
+        className: cn(
+          qab,
+          "max-md:hidden",
+          p3.isCommentsPanelOpen ? "text-foreground" : "text-muted-foreground"
+        ),
+        title: t2("pptx.toolbar.comments"),
+        "aria-label": t2("pptx.toolbar.comments"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuMessageSquare, { className: ics }),
+          (p3.slideCommentCount ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-3.5 h-3.5 rounded-full bg-primary text-[8px] text-primary-foreground leading-none", children: p3.slideCommentCount })
+        ]
+      }
+    ),
+    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",
+            {
+              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,
       {
@@ -97893,40 +99126,80 @@ function ToolbarPrimaryRow(p3) {
       }
     ),
     sep,
-    (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsx(
+    (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        onClick: onToggleInspector,
+        onClick: p3.onOpenShareDialog ?? p3.onPackageForSharing,
         className: cn(
-          "p-1.5 max-md:p-2.5 max-md:min-h-[44px] max-md:min-w-[44px] rounded transition-colors",
-          isInspectorPaneOpen ? "bg-primary/80 text-primary-foreground" : "bg-muted hover:bg-accent"
+          "relative inline-flex items-center gap-1 px-2.5 py-1 rounded-sm text-[11px] font-medium transition-colors",
+          collab && collab.status === "connected" ? "bg-green-600 hover:bg-green-500 text-white" : "bg-primary hover:bg-primary/90 text-primary-foreground"
         ),
-        title: "Toggle inspector panel",
-        "aria-label": "Toggle inspector panel",
+        title: collab && collab.status === "connected" ? t2("pptx.toolbar.sharingUsers", { count: collab.connectedCount }) : t2("pptx.toolbar.share"),
+        "aria-label": t2("pptx.toolbar.share"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuShare2, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-md:hidden", children: collab && collab.status === "connected" ? t2("pptx.toolbar.sharingCount", { count: collab.connectedCount }) : t2("pptx.toolbar.share") })
+        ]
+      }
+    ),
+    (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleInspector,
+        className: cn(qab, isInspectorPaneOpen ? "text-foreground" : "text-muted-foreground"),
+        title: t2("pptx.toolbar.toggleInspector"),
+        "aria-label": t2("pptx.toolbar.toggleInspector"),
         children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPanelRight, { className: ic2 })
       }
     ),
-    !canEdit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2 py-1 rounded bg-amber-600/90 text-[11px] text-amber-50", children: "Read-only" }),
-    /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu, { ...p3 }),
-    isNarrowViewport && (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        onClick: onToggleCompactToolbar,
-        className: cn(
-          "p-1.5 rounded text-[11px] transition-colors",
-          isCompactToolbarOpen ? "bg-primary/80 text-primary-foreground" : "bg-muted hover:bg-accent"
-        ),
-        title: "Toggle editing tools",
-        children: isCompactToolbarOpen ? "Less" : "Tools"
+        onClick: p3.onOpenSettings ?? p3.onToggleShortcuts,
+        className: cn(qab, "text-muted-foreground"),
+        title: t2("pptx.toolbar.settingsShortcuts"),
+        "aria-label": t2("pptx.toolbar.settings"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSettings, { className: ics })
       }
-    )
+    ),
+    !canEdit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-sm bg-amber-600/90 text-[10px] text-amber-50", children: t2("pptx.toolbar.readOnly") }),
+    /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu, { ...p3 })
   ] });
 }
 function ViewSection(p3) {
   const { t: t2 } = reactI18next.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Normal view", children: "Normal" }),
+        p3.onToggleSlideSorter ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onToggleSlideSorter, title: "Slide Sorter view", children: "Slide Sorter" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Slide Sorter view", children: "Slide Sorter" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Reading View", children: "Reading View" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Presentation Views" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: p3.onEnterMasterView,
+          disabled: !p3.canEdit,
+          className: pill,
+          title: "Edit slide masters and layouts",
+          children: "Slide Master"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Master Views" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: p3.onZoomToFit && /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onZoomToFit, title: "Zoom to fit slide in window", children: "Zoom to Fit" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Zoom" })
+    ] }),
+    sep,
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -98019,60 +99292,105 @@ function ViewSection(p3) {
         title: "Toggle spell check",
         children: "Spell"
       }
-    ),
-    sep,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: p3.onEnterMasterView,
-        disabled: !p3.canEdit,
-        className: pill,
-        title: "Edit slide masters and layouts",
-        children: "Slide Master"
-      }
     )
   ] });
 }
 function Toolbar(p3) {
   const { mode, isNarrowViewport, isCompactToolbarOpen, toolbarSection, onSetToolbarSection } = p3;
+  const sFil = toolbarSection === "file";
   const sHome = toolbarSection === "home";
-  const sIns = sHome || toolbarSection === "insert";
+  const sIns = toolbarSection === "insert";
   const sTxt = sHome || toolbarSection === "text";
   const sArr = toolbarSection === "arrange";
   const sDrw = toolbarSection === "draw";
   const sDes = toolbarSection === "design";
   const sTrn = toolbarSection === "transitions";
+  const sAni = toolbarSection === "animations";
+  const sSlw = toolbarSection === "slideShow";
   const sRev = toolbarSection === "review";
   const sViw = toolbarSection === "view";
+  const sHlp = toolbarSection === "help";
+  const showRibbon = mode === "edit" || mode === "master";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: "toolbar",
       "aria-label": "Presentation toolbar",
-      className: "relative z-20 px-2 py-1.5 max-md:px-1 max-md:py-1 border-b border-border bg-background shadow-[0_4px_12px_rgba(0,0,0,0.3)] overflow-visible",
+      className: "relative z-20 border-b border-border bg-secondary/50 overflow-visible",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ToolbarPrimaryRow, { ...p3 }),
-        (mode === "edit" || mode === "master") && /* @__PURE__ */ jsxRuntime.jsxs(
+        showRibbon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border/60 px-1 max-md:overflow-x-auto max-md:scrollbar-none", children: [
+          TOOLBAR_SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSetToolbarSection(s.id),
+              className: cn(
+                "relative px-3.5 py-2 text-[12px] font-medium whitespace-nowrap transition-colors max-md:min-h-[36px] max-md:px-3",
+                toolbarSection === s.id ? s.id === "file" ? "text-primary-foreground bg-primary/80 rounded-sm" : "text-foreground after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2.5px] after:bg-primary" : s.id === "file" ? "text-primary hover:bg-primary/15 rounded-sm" : "text-muted-foreground hover:text-foreground hover:bg-accent/30"
+              ),
+              children: s.label
+            },
+            s.id
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          isNarrowViewport && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: p3.onToggleCompactToolbar,
+              className: cn(
+                "px-2 py-1 rounded text-[11px] transition-colors mr-1",
+                isCompactToolbarOpen ? "bg-primary/80 text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              title: "Toggle ribbon",
+              children: isCompactToolbarOpen ? "Collapse" : "Expand"
+            }
+          )
+        ] }),
+        showRibbon && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex items-center gap-1.5 flex-wrap mt-1.5",
+              "flex items-center gap-1.5 px-2 py-1 max-md:px-1 max-md:py-0.5 overflow-visible flex-nowrap",
               isNarrowViewport && !isCompactToolbarOpen && "hidden"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center rounded-md border border-border/60 bg-muted/50 p-0.5 text-[11px] max-md:overflow-x-auto max-md:max-w-full max-md:scrollbar-none", children: TOOLBAR_SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              sFil && /* @__PURE__ */ jsxRuntime.jsx(
+                FileSection,
                 {
-                  type: "button",
-                  onClick: () => onSetToolbarSection(s.id),
-                  className: cn(
-                    "rounded px-2 py-0.5 transition-colors whitespace-nowrap max-md:min-h-[36px] max-md:px-3",
-                    toolbarSection === s.id ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent"
-                  ),
-                  children: s.label
-                },
-                s.id
-              )) }),
+                  onExportPng: p3.onExportPng,
+                  onExportPdf: p3.onExportPdf,
+                  onExportVideo: p3.onExportVideo,
+                  onExportGif: p3.onExportGif,
+                  onPackageForSharing: p3.onPackageForSharing,
+                  onSaveAsPpsx: p3.onSaveAsPpsx,
+                  onSaveAsPptm: p3.onSaveAsPptm,
+                  hasMacros: p3.hasMacros,
+                  onCopySlideAsImage: p3.onCopySlideAsImage,
+                  onPrint: p3.onPrint,
+                  onOpenDocumentProperties: p3.onOpenDocumentProperties,
+                  onOpenPasswordProtection: p3.onOpenPasswordProtection,
+                  onOpenFontEmbedding: p3.onOpenFontEmbedding,
+                  onOpenDigitalSignatures: p3.onOpenDigitalSignatures
+                }
+              ),
+              sHome && /* @__PURE__ */ jsxRuntime.jsx(
+                HomeSection,
+                {
+                  canEdit: p3.canEdit,
+                  clipboardPayload: p3.clipboardPayload,
+                  formatPainterActive: p3.formatPainterActive,
+                  onCopy: p3.onCopy,
+                  onCut: p3.onCut,
+                  onPaste: p3.onPaste,
+                  onToggleFormatPainter: p3.onToggleFormatPainter,
+                  layoutOptions: p3.layoutOptions,
+                  onInsertSlideFromLayout: p3.onInsertSlideFromLayout,
+                  selectedElement: p3.selectedElement,
+                  onUpdateTextStyle: p3.onUpdateTextStyle
+                }
+              ),
               sIns && /* @__PURE__ */ jsxRuntime.jsx(
                 InsertSection,
                 {
@@ -98135,7 +99453,10 @@ function Toolbar(p3) {
                   onToggleThemeGallery: p3.onToggleThemeGallery,
                   isThemeGalleryOpen: p3.isThemeGalleryOpen,
                   onToggleThemeEditor: p3.onToggleThemeEditor,
-                  isThemeEditorOpen: p3.isThemeEditorOpen
+                  isThemeEditorOpen: p3.isThemeEditorOpen,
+                  onOpenDocumentProperties: p3.onOpenDocumentProperties,
+                  onToggleInspector: p3.onToggleInspector,
+                  isInspectorPaneOpen: p3.isInspectorPaneOpen
                 }
               ),
               sTrn && /* @__PURE__ */ jsxRuntime.jsx(
@@ -98145,6 +99466,33 @@ function Toolbar(p3) {
                   onToggleInspector: p3.onToggleInspector
                 }
               ),
+              sAni && /* @__PURE__ */ jsxRuntime.jsx(
+                AnimationsSection,
+                {
+                  canEdit: p3.canEdit,
+                  selectedElement: p3.selectedElement,
+                  isInspectorPaneOpen: p3.isInspectorPaneOpen,
+                  onToggleInspector: p3.onToggleInspector
+                }
+              ),
+              sSlw && /* @__PURE__ */ jsxRuntime.jsx(
+                SlideShowSection,
+                {
+                  onPresent: () => p3.onSetMode("present"),
+                  onEnterPresenterView: p3.onEnterPresenterView ?? (() => {
+                  }),
+                  onEnterRehearsalMode: p3.onEnterRehearsalMode ?? (() => {
+                  }),
+                  onOpenSetUpSlideShow: p3.onOpenSetUpSlideShow ?? (() => {
+                  }),
+                  onOpenBroadcastDialog: p3.onOpenBroadcastDialog ?? (() => {
+                  }),
+                  onToggleSubtitles: p3.onToggleSubtitles ?? (() => {
+                  }),
+                  showSubtitles: p3.showSubtitles ?? false,
+                  onSetMode: p3.onSetMode
+                }
+              ),
               sRev && /* @__PURE__ */ jsxRuntime.jsx(
                 ReviewSection,
                 {
@@ -98180,7 +99528,29 @@ function Toolbar(p3) {
                   eyedropperActive: p3.eyedropperActive,
                   onToggleEyedropper: p3.onToggleEyedropper
                 }
-              )
+              ),
+              sHlp && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: p3.onToggleShortcuts,
+                    className: pill,
+                    title: "Keyboard shortcuts",
+                    children: "Keyboard Shortcuts"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: p3.onRunAccessibilityCheck,
+                    className: pill,
+                    title: "Accessibility check",
+                    children: "Accessibility"
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -105601,6 +106971,333 @@ function BroadcastDialog({
     ] }) })
   ] });
 }
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+function ShareDialog({
+  open,
+  onClose,
+  activeCollaboration,
+  onStartCollaboration,
+  onStopCollaboration,
+  preconfigured,
+  defaultRoomId,
+  defaultUserName,
+  defaultServerUrl
+}) {
+  const collab = useCollaboration();
+  const isActive = collab !== null && collab.status !== "disconnected" && collab.status !== "error";
+  const { t: t2 } = reactI18next.useTranslation();
+  const [roomId, setRoomId] = React10.useState(defaultRoomId ?? "");
+  const [userName, setUserName] = React10.useState(defaultUserName ?? "");
+  const [serverUrl, setServerUrl] = React10.useState(defaultServerUrl ?? "");
+  const [copied, setCopied] = React10.useState(false);
+  const dialogRef = React10.useRef(null);
+  React10.useEffect(() => {
+    if (activeCollaboration) {
+      setRoomId(activeCollaboration.roomId);
+      setUserName(activeCollaboration.userName);
+      setServerUrl(activeCollaboration.serverUrl);
+    }
+  }, [activeCollaboration]);
+  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 handleCopyRoomId = React10.useCallback(() => {
+    const config = activeCollaboration ?? { roomId, serverUrl };
+    const shareUrl = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}?room=${encodeURIComponent(config.roomId)}&server=${encodeURIComponent(config.serverUrl)}` : config.roomId;
+    void navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      return void 0;
+    });
+  }, [activeCollaboration, roomId, serverUrl]);
+  const handleStartSharing = React10.useCallback(() => {
+    if (!roomId.trim() || !userName.trim()) {
+      return;
+    }
+    onStartCollaboration?.({
+      roomId: roomId.trim(),
+      serverUrl: serverUrl.trim(),
+      userName: userName.trim()
+    });
+  }, [roomId, userName, serverUrl, onStartCollaboration]);
+  const canStart = roomId.trim().length > 0 && userName.trim().length > 0 && serverUrl.trim().length > 0;
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "fixed inset-0 z-[200] bg-black/50",
+        "aria-label": t2("pptx.share.closeDialog"),
+        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",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t2("pptx.share.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.jsx("h2", { className: "text-sm font-semibold text-foreground", children: isActive ? t2("pptx.share.collaborationActive") : t2("pptx.share.title") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "text-muted-foreground hover:text-foreground text-lg leading-none",
+                "aria-label": t2("pptx.share.close"),
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+            ActiveSessionView,
+            {
+              collab,
+              activeCollaboration,
+              copied,
+              onCopyRoomId: handleCopyRoomId,
+              onStopCollaboration
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            StartSessionForm,
+            {
+              roomId,
+              userName,
+              serverUrl,
+              onRoomIdChange: setRoomId,
+              onUserNameChange: setUserName,
+              onServerUrlChange: setServerUrl,
+              preconfigured
+            }
+          ) }),
+          /* @__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: isActive ? t2("pptx.share.close") : t2("pptx.share.cancel")
+              }
+            ),
+            !isActive && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !canStart,
+                onClick: handleStartSharing,
+                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.share.startSharing")
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+function StartSessionForm({
+  roomId,
+  userName,
+  serverUrl,
+  onRoomIdChange,
+  onUserNameChange,
+  onServerUrlChange,
+  preconfigured
+}) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const inputReadOnlyClass = preconfigured ? " opacity-70 cursor-not-allowed" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-muted-foreground leading-relaxed", children: preconfigured ? t2("pptx.share.preconfiguredDescription") : t2("pptx.share.description") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "share-room-id", className: "block text-[12px] font-medium text-foreground", children: t2("pptx.share.sessionName") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "share-room-id",
+          type: "text",
+          value: roomId,
+          onChange: (e2) => onRoomIdChange(e2.target.value),
+          readOnly: preconfigured,
+          placeholder: t2("pptx.share.sessionPlaceholder"),
+          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${inputReadOnlyClass}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground", children: t2("pptx.share.sessionHint") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "share-user-name", className: "block text-[12px] font-medium text-foreground", children: t2("pptx.share.displayName") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "share-user-name",
+          type: "text",
+          value: userName,
+          onChange: (e2) => onUserNameChange(e2.target.value),
+          readOnly: preconfigured,
+          placeholder: t2("pptx.share.namePlaceholder"),
+          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${inputReadOnlyClass}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "share-server-url", className: "block text-[12px] font-medium text-foreground", children: t2("pptx.share.serverLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "share-server-url",
+          type: "text",
+          value: serverUrl,
+          onChange: (e2) => onServerUrlChange(e2.target.value),
+          readOnly: preconfigured,
+          placeholder: t2("pptx.share.serverPlaceholder"),
+          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${inputReadOnlyClass}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-muted-foreground/70 leading-relaxed", children: [
+      "Run",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 rounded bg-muted text-[10px] font-mono", children: "bun run collab" }),
+      " ",
+      "to start the server. Others can join at",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 rounded bg-muted text-[10px] font-mono", children: "?room=SESSION_NAME" })
+    ] })
+  ] });
+}
+function ActiveSessionView({
+  collab,
+  activeCollaboration,
+  copied,
+  onCopyRoomId,
+  onStopCollaboration
+}) {
+  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" });
+  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.collaboration.userCount", { count: collab.connectedCount })
+      ] })
+    ] }),
+    /* @__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.share.shareLink") }),
+      /* @__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: typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}?room=${encodeURIComponent(collab.config.roomId)}&server=${encodeURIComponent(collab.config.serverUrl)}` : collab.config.roomId }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCopyRoomId,
+            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.share.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("p", { className: "text-[11px] text-muted-foreground", children: t2("pptx.share.shareHint") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        t2("pptx.share.room"),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: collab.config.roomId })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        t2("pptx.share.server"),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: collab.config.serverUrl })
+      ] })
+    ] }),
+    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.share.connectedUsers") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded border border-border bg-background divide-y divide-border max-h-[140px] overflow-y-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-semibold text-white shrink-0",
+              style: { backgroundColor: collab.config.userColor ?? "#6366f1" },
+              children: getInitials(activeCollaboration?.userName ?? collab.config.userName)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-foreground truncate", children: activeCollaboration?.userName ?? collab.config.userName }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground ml-auto", children: t2("pptx.share.you") })
+        ] }),
+        collab.remoteUsers.map((user) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-semibold text-white shrink-0",
+              style: { backgroundColor: user.userColor },
+              children: user.userAvatar ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: user.userAvatar,
+                  alt: "",
+                  className: "w-full h-full rounded-full object-cover"
+                }
+              ) : getInitials(user.userName)
+            }
+          ),
+          /* @__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))
+      ] })
+    ] }),
+    onStopCollaboration && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onStopCollaboration,
+        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.share.stopSharing")
+      }
+    )
+  ] });
+}
 
 // src/viewer/components/hyperlink-edit-types.ts
 var ACTION_VERB_MAP = {
@@ -107501,7 +109198,14 @@ function ViewerBottomPanels({
   onUpdateNotes,
   collaborationSlot,
   notesPanelHeight,
-  onResizeBottom
+  onResizeBottom,
+  scale,
+  onZoomIn,
+  onZoomOut,
+  onZoomToFit,
+  mode,
+  onSetMode,
+  onToggleSlideSorter
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     onResizeBottom && !isSlideNotesCollapsed && /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeBottom }),
@@ -107517,18 +109221,25 @@ function ViewerBottomPanels({
         panelHeight: notesPanelHeight
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StatusBar,
-        {
-          slideCount,
-          activeSlideIndex,
-          isDirty,
-          autosaveStatus
-        }
-      ),
-      collaborationSlot
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StatusBar,
+      {
+        slideCount,
+        activeSlideIndex,
+        isDirty,
+        autosaveStatus,
+        scale,
+        onZoomIn,
+        onZoomOut,
+        onZoomToFit,
+        isNotesExpanded: !isSlideNotesCollapsed,
+        onToggleNotes,
+        mode,
+        onSetMode,
+        onToggleSlideSorter,
+        collaborationSlot
+      }
+    )
   ] });
 }
 function ViewerInspector({
@@ -107687,7 +109398,9 @@ function ViewerToolbarSection(props) {
     ops,
     onSetMode,
     onEnterPresenterView,
-    onEnterRehearsalMode
+    onEnterRehearsalMode,
+    onOpenSettings,
+    onOpenShareDialog
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -107766,12 +109479,14 @@ function ViewerToolbarSection(props) {
         onExportVideo: exportHandlers.handleExportVideo,
         onExportGif: exportHandlers.handleExportGif,
         onPackageForSharing: exportHandlers.handlePackageForSharing,
+        onOpenShareDialog,
         onSaveAsPpsx: exportHandlers.handleSaveAsPpsx,
         onSaveAsPptm: exportHandlers.handleSaveAsPptm,
         hasMacros: s.hasMacros,
         onCopySlideAsImage: exportHandlers.handleCopySlideAsImage,
         onPrint: printHandlers.handlePrint,
         onToggleShortcuts: () => s.setIsShortcutHelpOpen((p3) => !p3),
+        onOpenSettings,
         onRunAccessibilityCheck: dialogs.handleRunAccessibilityCheck,
         onToggleSlideSorter: () => s.setShowSlideSorter((p3) => !p3),
         onUpdateTextStyle: ops.updateSelectedTextStyle,
@@ -107801,7 +109516,12 @@ function ViewerToolbarSection(props) {
         onToggleThemeGallery: () => s.setIsThemeGalleryOpen((p3) => !p3),
         isThemeGalleryOpen: s.isThemeGalleryOpen,
         onCompare: propertyHandlers.handleCompare,
-        onToggleComments: () => s.setIsInspectorPaneOpen((p3) => !p3),
+        onToggleComments: () => {
+          s.setSidebarPanelMode("comments");
+          if (!s.isInspectorPaneOpen) {
+            s.setIsInspectorPaneOpen(true);
+          }
+        },
         isCommentsPanelOpen: s.isInspectorPaneOpen,
         slideCommentCount: activeSlide?.comments?.length ?? 0,
         formatPainterActive: s.formatPainterActive,
@@ -109548,7 +111268,7 @@ function ViewerCanvasArea(props) {
   const handleToolbarMouseLeave = React10.useCallback(() => {
     toolbarHoveringRef.current = false;
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("main", { "aria-label": "Slide editor", className: "flex-1 min-w-0 relative flex flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("main", { "aria-label": "Slide editor", className: "flex-1 min-w-0 relative flex flex-col bg-background", children: [
     findReplace.findReplaceOpen && /* @__PURE__ */ jsxRuntime.jsx(
       FindReplacePanel,
       {
@@ -109918,7 +111638,7 @@ var PRESET_THEMES = [
     minorFont: "Gill Sans MT"
   }
 ];
-var COMMON_FONTS = [
+var COMMON_FONTS2 = [
   "Arial",
   "Calibri",
   "Calibri Light",
@@ -110023,15 +111743,15 @@ function ThemeColorSchemeEditor({
             {
               className: THEME_EDITOR_INPUT,
               disabled: !canEdit,
-              value: COMMON_FONTS.includes(majorFont) ? majorFont : "__custom__",
+              value: COMMON_FONTS2.includes(majorFont) ? majorFont : "__custom__",
               onChange: (e2) => {
                 if (e2.target.value !== "__custom__") {
                   onMajorFontChange(e2.target.value);
                 }
               },
               children: [
-                COMMON_FONTS.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f }, f)),
-                !COMMON_FONTS.includes(majorFont) && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "__custom__", children: majorFont })
+                COMMON_FONTS2.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f }, f)),
+                !COMMON_FONTS2.includes(majorFont) && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "__custom__", children: majorFont })
               ]
             }
           )
@@ -110043,15 +111763,15 @@ function ThemeColorSchemeEditor({
             {
               className: THEME_EDITOR_INPUT,
               disabled: !canEdit,
-              value: COMMON_FONTS.includes(minorFont) ? minorFont : "__custom__",
+              value: COMMON_FONTS2.includes(minorFont) ? minorFont : "__custom__",
               onChange: (e2) => {
                 if (e2.target.value !== "__custom__") {
                   onMinorFontChange(e2.target.value);
                 }
               },
               children: [
-                COMMON_FONTS.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f }, f)),
-                !COMMON_FONTS.includes(minorFont) && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "__custom__", children: minorFont })
+                COMMON_FONTS2.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f }, f)),
+                !COMMON_FONTS2.includes(minorFont) && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "__custom__", children: minorFont })
               ]
             }
           )
@@ -110929,403 +112649,293 @@ function ViewerMainContent(props) {
     )
   ] });
 }
-
-// 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;
+function ToggleSwitch({
+  label,
+  enabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2.5 px-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: cn(
+          "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+          enabled ? "bg-primary" : "bg-muted-foreground/30"
+        ),
+        role: "switch",
+        "aria-checked": enabled,
+        "aria-label": label,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+              enabled ? "translate-x-[18px]" : "translate-x-[3px]"
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function SettingsDialog({
+  isOpen,
+  onClose,
+  spellCheckEnabled = false,
+  onSetSpellCheckEnabled,
+  showGrid = false,
+  onSetShowGrid,
+  showRulers = false,
+  onSetShowRulers,
+  snapToGrid = false,
+  onSetSnapToGrid,
+  reducedMotion = false,
+  onToggleReducedMotion
+}) {
+  const [activeTab, setActiveTab] = React10.useState("general");
+  const [autoSave, setAutoSave] = React10.useState(true);
+  const { t: t2 } = reactI18next.useTranslation();
+  const handleKeyDown = React10.useCallback(
+    (e2) => {
+      if (e2.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  React10.useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
     }
-  } 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") {
+  }, [isOpen, handleKeyDown]);
+  if (!isOpen) {
     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
-  };
+  const tabs = [
+    { id: "general", label: t2("pptx.settings.general") },
+    { id: "shortcuts", label: t2("pptx.settings.keyboardShortcuts") }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "fixed inset-0 z-50 bg-black/60",
+        "aria-label": t2("pptx.settings.closeSettings"),
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-auto w-[min(32rem,calc(100%-2rem))] rounded-xl border border-border bg-popover backdrop-blur-xl shadow-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuSettings, { className: "w-5 h-5 text-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground", children: t2("pptx.settings.title") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "p-1 rounded hover:bg-accent transition-colors",
+            "aria-label": t2("pptx.settings.close"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: "w-4 h-4 text-muted-foreground" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-b border-border/60 px-5", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveTab(tab.id),
+          className: cn(
+            "px-3 py-2 text-xs font-medium transition-colors relative",
+            activeTab === tab.id ? "text-primary" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            tab.label,
+            activeTab === tab.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full" })
+          ]
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-4 max-h-[60vh] overflow-y-auto", children: [
+        activeTab === "general" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.autoSave"),
+              enabled: autoSave,
+              onToggle: () => setAutoSave(!autoSave)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.spellCheck"),
+              enabled: spellCheckEnabled,
+              onToggle: () => onSetSpellCheckEnabled?.(!spellCheckEnabled)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.showGrid"),
+              enabled: showGrid,
+              onToggle: () => onSetShowGrid?.(!showGrid)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.showRulers"),
+              enabled: showRulers,
+              onToggle: () => onSetShowRulers?.(!showRulers)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.snapToGrid"),
+              enabled: snapToGrid,
+              onToggle: () => onSetSnapToGrid?.(!snapToGrid)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToggleSwitch,
+            {
+              label: t2("pptx.settings.reducedMotion"),
+              enabled: reducedMotion,
+              onToggle: () => onToggleReducedMotion?.()
+            }
+          )
+        ] }),
+        activeTab === "shortcuts" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: SHORTCUT_REFERENCE_ITEMS.map((shortcut, i3) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-3 rounded px-3 py-2",
+              i3 % 2 === 0 ? "bg-muted/60" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground", children: shortcut.action }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[11px] text-muted-foreground whitespace-nowrap", children: shortcut.shortcut })
+            ]
+          },
+          shortcut.action
+        )) })
+      ] })
+    ] }) })
+  ] });
 }
-var BROADCAST_THROTTLE_MS = 50;
-var STALE_PRESENCE_MS = 3e4;
-function usePresenceTracking({
-  awareness,
-  localClientId,
-  userName,
-  userColor,
-  userAvatar,
-  canvasWidth,
-  canvasHeight
+function useYjsDocumentSync({
+  doc: doc2,
+  slides,
+  setSlides,
+  isConnected
 }) {
-  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;
+  const isApplyingRemoteRef = React10.useRef(false);
+  const lastSyncedRef = React10.useRef("");
+  const hasInitializedRef = React10.useRef(false);
+  const getDocMap = React10.useCallback(() => {
+    if (!doc2 || typeof doc2 !== "object") {
+      return null;
+    }
+    const d = doc2;
+    if (typeof d.getMap !== "function") {
+      return null;
+    }
+    return d.getMap("slides-data");
+  }, [doc2]);
+  React10.useEffect(() => {
+    if (!isConnected || !doc2) {
+      return;
+    }
+    if (isApplyingRemoteRef.current) {
+      return;
+    }
+    if (slides.length === 0) {
+      return;
+    }
+    const map3 = getDocMap();
+    if (!map3) {
+      return;
+    }
+    const serialized = JSON.stringify(slides);
+    if (serialized === lastSyncedRef.current) {
+      return;
+    }
+    lastSyncedRef.current = serialized;
+    const d = doc2;
+    d.transact(() => {
+      const currentCount = map3.get("count");
+      if (currentCount && currentCount > slides.length) {
+        for (let i3 = slides.length; i3 < currentCount; i3++) {
+          map3.delete(`slide-${i3}`);
+        }
       }
-      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;
+      map3.set("count", slides.length);
+      for (let i3 = 0; i3 < slides.length; i3++) {
+        const slideJson = JSON.stringify(slides[i3]);
+        const existing = map3.get(`slide-${i3}`);
+        if (existing !== slideJson) {
+          map3.set(`slide-${i3}`, slideJson);
         }
-        flush();
-      } else if (!pendingBroadcastRef.current) {
-        pendingBroadcastRef.current = setTimeout(() => {
-          pendingBroadcastRef.current = null;
-          flush();
-        }, BROADCAST_THROTTLE_MS - elapsed);
       }
-    },
-    [awareness, userName, userColor, userAvatar]
-  );
+    });
+  }, [doc2, slides, isConnected, getDocMap]);
   React10.useEffect(() => {
-    if (!awareness || localClientId === null) {
+    if (!isConnected || !doc2) {
       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;
+    const map3 = getDocMap();
+    if (!map3) {
+      return;
+    }
+    const handleUpdate = () => {
+      const count = map3.get("count");
+      if (!count || count === 0) {
+        return;
+      }
+      const remoteSlides = [];
+      for (let i3 = 0; i3 < count; i3++) {
+        const slideJson = map3.get(`slide-${i3}`);
+        if (slideJson) {
+          try {
+            remoteSlides.push(JSON.parse(slideJson));
+          } catch {
+          }
         }
-        users.push(sanitized);
-      });
-      setRemoteUsers(users);
-    };
-    awareness.on("change", handleChange);
-    handleChange();
-    return () => {
-      awareness.off("change", handleChange);
-    };
-  }, [awareness, localClientId, canvasWidth, canvasHeight]);
-  React10.useEffect(() => {
-    return () => {
-      if (pendingBroadcastRef.current) {
-        clearTimeout(pendingBroadcastRef.current);
       }
+      if (remoteSlides.length === 0) {
+        return;
+      }
+      const serialized = JSON.stringify(remoteSlides);
+      if (serialized === lastSyncedRef.current) {
+        return;
+      }
+      lastSyncedRef.current = serialized;
+      isApplyingRemoteRef.current = true;
+      setSlides(remoteSlides);
+      requestAnimationFrame(() => {
+        isApplyingRemoteRef.current = false;
+      });
     };
-  }, []);
-  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");
+    map3.observe(handleUpdate);
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      const count = map3.get("count");
+      if (count && count > 0) {
+        handleUpdate();
       }
-      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;
+      map3.unobserve(handleUpdate);
     };
-  }, [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, 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
-  };
-}
-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 getInitials(name) {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) {
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-}
-function AvatarCircle({
-  name,
-  color,
-  avatar,
-  isLocal
-}) {
-  const initials = getInitials(name);
-  const title = isLocal ? `${name} (you)` : name;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "relative w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-semibold text-white border-2 -ml-1 first:ml-0",
-      style: {
-        backgroundColor: color,
-        borderColor: isLocal ? "#fff" : color
-      },
-      title,
-      "aria-label": title,
-      children: avatar ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: avatar,
-          alt: "",
-          className: "w-full h-full rounded-full object-cover",
-          onError: (e2) => {
-            e2.target.style.display = "none";
-          }
-        }
-      ) : initials
-    }
-  );
-}
-function UserAvatarBar({
-  remoteUsers,
-  localUserName,
-  localUserColor,
-  localUserAvatar,
-  status,
-  maxVisible = 5
-}) {
-  if (status === "disconnected" || status === "error") {
-    return null;
-  }
-  const allUsers = [
-    { name: localUserName, color: localUserColor, avatar: localUserAvatar, isLocal: true },
-    ...remoteUsers.map((u2) => ({
-      name: u2.userName,
-      color: u2.userColor,
-      avatar: u2.userAvatar,
-      isLocal: false
-    }))
-  ];
-  const visible = allUsers.slice(0, maxVisible);
-  const overflow = allUsers.length - maxVisible;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-testid": "user-avatar-bar",
-      className: "flex items-center px-2",
-      "aria-label": `${allUsers.length} user${allUsers.length !== 1 ? "s" : ""} connected`,
-      children: [
-        visible.map((user, i3) => /* @__PURE__ */ jsxRuntime.jsx(
-          AvatarCircle,
-          {
-            name: user.name,
-            color: user.color,
-            avatar: user.avatar,
-            isLocal: user.isLocal
-          },
-          user.isLocal ? "local" : `remote-${i3}`
-        )),
-        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-semibold text-gray-300 bg-gray-700 border-2 border-gray-600 -ml-1",
-            title: `${overflow} more user${overflow !== 1 ? "s" : ""}`,
-            children: [
-              "+",
-              overflow
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-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 style = STATUS_STYLES[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-testid": "collaboration-status",
-      className: "flex items-center gap-1.5",
-      "aria-label": `Collaboration: ${style.label}. ${connectedCount} user${connectedCount !== 1 ? "s" : ""} connected.`,
-      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" ? `${connectedCount} user${connectedCount !== 1 ? "s" : ""}` : style.label })
-      ]
-    }
-  );
+  }, [doc2, isConnected, getDocMap, setSlides]);
 }
 function computeGridSpacingPx(presentationGridSpacing) {
   if (presentationGridSpacing) {
@@ -121000,7 +122610,7 @@ function useViewerUIState() {
   const [isCompactToolbarOpen, setIsCompactToolbarOpen] = React10.useState(false);
   const [toolbarSection, setToolbarSection] = React10.useState("home");
   const [isSlidesPaneOpen, setIsSlidesPaneOpen] = React10.useState(true);
-  const [isInspectorPaneOpen, setIsInspectorPaneOpen] = React10.useState(true);
+  const [isInspectorPaneOpen, setIsInspectorPaneOpen] = React10.useState(false);
   const [isSlideNotesCollapsed, setIsSlideNotesCollapsed] = React10.useState(true);
   const [isOverflowMenuOpen, setIsOverflowMenuOpen] = React10.useState(false);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = React10.useState(false);
@@ -121283,13 +122893,18 @@ var PowerPointViewer = React10.forwardRef(
       onDirtyChange,
       onActiveSlideChange,
       theme,
-      collaboration
+      collaboration,
+      onStartCollaboration,
+      onStopCollaboration,
+      shareDefaults
     } = props;
     const themeStyle = useThemeStyle(theme);
     const [content, setContent] = React10.useState(incomingContent);
     React10.useEffect(() => {
       setContent(incomingContent);
     }, [incomingContent]);
+    const [isSettingsOpen, setIsSettingsOpen] = React10.useState(false);
+    const [isShareDialogOpen, setIsShareDialogOpen] = React10.useState(false);
     const { reducedMotion, toggleReducedMotion } = useReducedMotion();
     const state2 = useViewerState();
     const {
@@ -121490,36 +123105,35 @@ var PowerPointViewer = React10.forwardRef(
         ref: containerRef,
         tabIndex: 0,
         style: themeStyle,
+        "data-pptx-viewer": "",
         className: "h-full w-full bg-background text-foreground flex flex-col relative overflow-hidden outline-none",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-purple-500/3 to-transparent z-0" }),
-          mode !== "present" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ViewerToolbarSection,
-              {
-                mode,
-                canEdit,
-                state: state2,
-                selectedElement,
-                activeSlide,
-                zoom,
-                history,
-                findReplace: editorOps.findReplace,
-                manipulation: editorOps.manipulation,
-                insertHandlers: editorOps.insertHandlers,
-                exportHandlers,
-                printHandlers,
-                propertyHandlers,
-                dialogs,
-                slideOps: editorOps.slideOps,
-                ops: editorOps.ops,
-                onSetMode: handleSetMode,
-                onEnterPresenterView: handleEnterPresenterView,
-                onEnterRehearsalMode: handleEnterRehearsalMode
-              }
-            ),
-            collaboration && /* @__PURE__ */ jsxRuntime.jsx(CollaborationToolbarStrip, { collaboration })
-          ] }),
+          mode !== "present" && /* @__PURE__ */ jsxRuntime.jsx(
+            ViewerToolbarSection,
+            {
+              mode,
+              canEdit,
+              state: state2,
+              selectedElement,
+              activeSlide,
+              zoom,
+              history,
+              findReplace: editorOps.findReplace,
+              manipulation: editorOps.manipulation,
+              insertHandlers: editorOps.insertHandlers,
+              exportHandlers,
+              printHandlers,
+              propertyHandlers,
+              dialogs,
+              slideOps: editorOps.slideOps,
+              ops: editorOps.ops,
+              onSetMode: handleSetMode,
+              onEnterPresenterView: handleEnterPresenterView,
+              onEnterRehearsalMode: handleEnterRehearsalMode,
+              onOpenSettings: () => setIsSettingsOpen(true),
+              onOpenShareDialog: () => setIsShareDialogOpen(true)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             ViewerMainContent,
             {
@@ -121569,7 +123183,14 @@ var PowerPointViewer = React10.forwardRef(
               onUpdateNotes: propertyHandlers.handleUpdateNotes,
               collaborationSlot: collaboration ? /* @__PURE__ */ jsxRuntime.jsx(CollaborationStatusStrip, {}) : void 0,
               notesPanelHeight: isMobile ? void 0 : resizablePanels.bottomHeight,
-              onResizeBottom: isMobile ? void 0 : resizablePanels.onResizeBottom
+              onResizeBottom: isMobile ? void 0 : resizablePanels.onResizeBottom,
+              scale: zoom.scale,
+              onZoomIn: zoom.handleZoomIn,
+              onZoomOut: zoom.handleZoomOut,
+              onZoomToFit: zoom.handleZoomToFit,
+              mode,
+              onSetMode: handleSetMode,
+              onToggleSlideSorter: () => state2.setShowSlideSorter((p3) => !p3)
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -121601,6 +123222,37 @@ var PowerPointViewer = React10.forwardRef(
               onDiscardAnnotations: handleDiscardAnnotations
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SettingsDialog,
+            {
+              isOpen: isSettingsOpen,
+              onClose: () => setIsSettingsOpen(false),
+              spellCheckEnabled: state2.spellCheckEnabled,
+              onSetSpellCheckEnabled: state2.setSpellCheckEnabled,
+              showGrid: state2.showGrid,
+              onSetShowGrid: state2.setShowGrid,
+              showRulers: state2.showRulers,
+              onSetShowRulers: state2.setShowRulers,
+              snapToGrid: state2.snapToGrid,
+              onSetSnapToGrid: state2.setSnapToGrid,
+              reducedMotion,
+              onToggleReducedMotion: toggleReducedMotion
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ShareDialog,
+            {
+              open: isShareDialogOpen,
+              onClose: () => setIsShareDialogOpen(false),
+              activeCollaboration: collaboration,
+              onStartCollaboration,
+              onStopCollaboration,
+              preconfigured: Boolean(collaboration),
+              defaultRoomId: shareDefaults?.roomId,
+              defaultUserName: shareDefaults?.userName,
+              defaultServerUrl: shareDefaults?.serverUrl
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             ViewerOverlays,
             {
@@ -121642,36 +123294,21 @@ var PowerPointViewer = React10.forwardRef(
         ]
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(ViewerThemeProvider, { theme, children: collaboration ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ViewerThemeProvider, { theme, children: collaboration ? /* @__PURE__ */ jsxRuntime.jsxs(
       CollaborationProvider,
       {
         config: collaboration,
         canvasWidth: canvasSize.width,
         canvasHeight: canvasSize.height,
-        children: viewerContent
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CollaborationDocumentSync, { slides, setSlides: state2.setSlides }),
+          viewerContent
+        ]
       }
     ) : viewerContent });
   }
 );
 PowerPointViewer.displayName = "PowerPointViewer";
-function CollaborationToolbarStrip({
-  collaboration
-}) {
-  const collab = useCollaboration();
-  if (!collab) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-2 py-0.5 border-b border-border bg-background/30 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-    UserAvatarBar,
-    {
-      remoteUsers: collab.remoteUsers,
-      localUserName: collaboration.userName,
-      localUserColor: collab.config.userColor ?? "#6366f1",
-      localUserAvatar: collaboration.userAvatar,
-      status: collab.status
-    }
-  ) });
-}
 function CollaborationStatusStrip() {
   const collab = useCollaboration();
   if (!collab) {
@@ -121679,6 +123316,19 @@ function CollaborationStatusStrip() {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(CollaborationStatusIndicator, { status: collab.status, connectedCount: collab.connectedCount });
 }
+function CollaborationDocumentSync({
+  slides,
+  setSlides
+}) {
+  const collab = useCollaboration();
+  useYjsDocumentSync({
+    doc: collab?.doc ?? null,
+    slides,
+    setSlides,
+    isConnected: collab?.status === "connected"
+  });
+  return null;
+}
 /*! Bundled license information:
 
 three/build/three.core.js: