pptx-react-viewer 1.1.6 → 1.1.7

package/dist/index.js

@@ -43598,7 +43598,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 === React100.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React103.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();
@@ -43608,7 +43608,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 = useState86({
+        cachedValue = useState89({
           inst: { value, getSnapshot: getSnapshot2 }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -43620,7 +43620,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe3, value, getSnapshot2]
         );
-        useEffect72(
+        useEffect73(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe3(function() {
@@ -43646,8 +43646,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 React100 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState86 = React100.useState, useEffect72 = React100.useEffect, useLayoutEffect7 = React100.useLayoutEffect, useDebugValue = React100.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 !== React100.useSyncExternalStore ? React100.useSyncExternalStore : shim;
+      var React103 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState89 = React103.useState, useEffect73 = React103.useEffect, useLayoutEffect7 = React103.useLayoutEffect, useDebugValue = React103.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 !== React103.useSyncExternalStore ? React103.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
   }
@@ -43670,9 +43670,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 React100 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef73 = React100.useRef, useEffect72 = React100.useEffect, useMemo41 = React100.useMemo, useDebugValue = React100.useDebugValue;
+      var React103 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef74 = React103.useRef, useEffect73 = React103.useEffect, useMemo41 = React103.useMemo, useDebugValue = React103.useDebugValue;
       exports$1.useSyncExternalStoreWithSelector = function(subscribe3, getSnapshot2, getServerSnapshot2, selector, isEqual) {
-        var instRef = useRef73(null);
+        var instRef = useRef74(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
@@ -43713,7 +43713,7 @@ var require_with_selector_development = __commonJS({
           [getSnapshot2, getServerSnapshot2, selector, isEqual]
         );
         var value = useSyncExternalStore3(subscribe3, instRef[0], instRef[1]);
-        useEffect72(
+        useEffect73(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -75535,9 +75535,9 @@ function renderImageAlphaSvgFilter(element2) {
   const primitives = [];
   let resultIdx = 0;
   let inputRef = "SourceGraphic";
-  const next = (jsx229) => {
+  const next = (jsx235) => {
     const result = `r${resultIdx++}`;
-    primitives.push(jsx229(inputRef, result));
+    primitives.push(jsx235(inputRef, result));
     inputRef = result;
   };
   if (typeof e2.alphaModFix === "number") {
@@ -79578,8 +79578,8 @@ function renderTableElement(element2, textStyle, options) {
                 {
                   style: rowHeight ? { height: rowHeight } : void 0,
                   children: cells.map((cell, cellIndex) => {
-                    const isHMerged = cell["@_hMerge"] === "1" || cell["@_hMerge"] === true;
-                    const isVMerged = cell["@_vMerge"] === "1" || cell["@_vMerge"] === true;
+                    const isHMerged = cell["@_hMerge"] === "1";
+                    const isVMerged = cell["@_vMerge"] === "1";
                     if (isHMerged || isVMerged) {
                       return null;
                     }
@@ -85588,6 +85588,15 @@ function copyFormatFromElement(element2) {
   }
   return result;
 }
+function definedEntries(obj) {
+  const out = {};
+  for (const key in obj) {
+    if (obj[key] !== void 0) {
+      out[key] = obj[key];
+    }
+  }
+  return out;
+}
 function applyFormatToElement(element2, format) {
   let updated = { ...element2 };
   if (format.shapeStyle && pptxViewerCore.hasShapeProperties(updated)) {
@@ -85595,7 +85604,7 @@ function applyFormatToElement(element2, format) {
       ...updated,
       shapeStyle: {
         ...updated.shapeStyle,
-        ...format.shapeStyle
+        ...definedEntries(format.shapeStyle)
       }
     };
   }
@@ -85604,12 +85613,18 @@ function applyFormatToElement(element2, format) {
       ...updated,
       textStyle: {
         ...updated.textStyle,
-        ...format.textStyle
+        ...definedEntries(format.textStyle)
       }
     };
   }
   return updated;
 }
+function hasCopyableFormat(element2) {
+  if (!element2) {
+    return false;
+  }
+  return pptxViewerCore.hasShapeProperties(element2) || pptxViewerCore.hasTextProperties(element2);
+}
 
 // src/viewer/utils/animation-preview.ts
 var PRESET_TO_EFFECT = {
@@ -86958,8 +86973,8 @@ function ThumbnailTable({
           {
             style: rowHeight ? { height: rowHeight } : void 0,
             children: cells.map((cell, ci) => {
-              const isHMerged = cell["@_hMerge"] === "1" || cell["@_hMerge"] === true;
-              const isVMerged = cell["@_vMerge"] === "1" || cell["@_vMerge"] === true;
+              const isHMerged = cell["@_hMerge"] === "1";
+              const isVMerged = cell["@_vMerge"] === "1";
               if (isHMerged || isVMerged) {
                 return null;
               }
@@ -92050,11 +92065,16 @@ function usePresenceTracking({
         if (cid === localClientId) {
           return;
         }
-        const raw = state2?.presence;
+        const stateRecord = state2;
+        const raw = stateRecord?.presence;
         if (!raw || typeof raw !== "object") {
           return;
         }
-        const sanitized = sanitizePresence({ ...raw, clientId: cid }, canvasWidth, canvasHeight);
+        const sanitized = sanitizePresence(
+          { ...raw, clientId: cid },
+          canvasWidth,
+          canvasHeight
+        );
         if (!sanitized) {
           return;
         }
@@ -92122,15 +92142,9 @@ function useYjsProvider({ config }) {
     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 provider = new WebsocketProvider2(config.serverUrl, roomId, yDoc, {
+        params: config.authToken ? { token: config.authToken } : void 0
+      });
       let connected = false;
       const handleStatus = (event) => {
         if (event.status === "connected") {
@@ -95696,90 +95710,101 @@ 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 select-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        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: [
-          "Notes",
-          !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "(has notes)" })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id: "slide-notes-content",
-        className: "px-3 pb-2 overflow-y-auto",
-        style: { maxHeight: panelHeight ?? EXPANDED_MAX_HEIGHT + 40 },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground mb-1", children: slideLabel }),
-          canEdit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NotesToolbar,
-              {
-                isRichEditEnabled,
-                showLinkPopover,
-                savedSelectionText: savedSelectionRef.current?.text ?? "",
-                hasAllSlides: allSlides !== void 0 && allSlides.length > 0,
-                onApplyRichCommand: applyRichCommand,
-                onToggleBulletList: toggleBulletList,
-                onToggleNumberedList: toggleNumberedList,
-                onIndent: handleIndent,
-                onOutdent: handleOutdent,
-                onLinkButtonClick: handleLinkButtonClick,
-                onInsertLink: handleInsertLink,
-                onCloseLinkPopover: () => setShowLinkPopover(false),
-                onPrintClick: () => setShowPrintDialog(true),
-                onToggleRichEdit: () => setIsRichEditEnabled((prev) => !prev)
-              }
-            ),
-            isRichEditEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ref: richEditorRef,
-                contentEditable: true,
-                suppressContentEditableWarning: true,
-                onInput: handleRichInput,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDownRich,
-                onClick: handleEditorClick,
-                className: "w-full overflow-y-auto rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors whitespace-pre-wrap",
-                style: { maxHeight: EXPANDED_MAX_HEIGHT - 8, minHeight: 72 }
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                ref: textareaRef,
-                name: "slide-notes",
-                value: draft,
-                onChange: handlePlainChange,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDownPlain,
-                placeholder: t2("pptx.notes.clickToAddNotes"),
-                rows: 4,
-                className: "w-full resize-none rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors",
-                style: { maxHeight: EXPANDED_MAX_HEIGHT - 8 }
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "w-full rounded-md border border-border/30 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground overflow-y-auto whitespace-pre-wrap",
-              style: { maxHeight: EXPANDED_MAX_HEIGHT - 32, minHeight: 60 },
-              children: hasNotes ? renderRichNotesSegments(draftSegments) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: t2("pptx.notes.noNotes") })
-            }
-          )
-        ]
-      }
-    ),
-    showPrintDialog && allSlides && /* @__PURE__ */ jsxRuntime.jsx(NotesPrintDialog, { slides: allSlides, onClose: () => setShowPrintDialog(false) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border-t border-border/60 bg-background select-none",
+        // On mobile, hide the entire notes strip when collapsed — the
+        // MobileBottomBar's Notes button is the entry point instead.
+        !isExpanded && "max-md:hidden"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            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 max-md:hidden",
+            "aria-expanded": isExpanded,
+            "aria-controls": "slide-notes-content",
+            children: [
+              "Notes",
+              !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "(has notes)" })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: "slide-notes-content",
+            className: "px-3 pb-2 overflow-y-auto",
+            style: { maxHeight: panelHeight ?? EXPANDED_MAX_HEIGHT + 40 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground mb-1", children: slideLabel }),
+              canEdit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NotesToolbar,
+                  {
+                    isRichEditEnabled,
+                    showLinkPopover,
+                    savedSelectionText: savedSelectionRef.current?.text ?? "",
+                    hasAllSlides: allSlides !== void 0 && allSlides.length > 0,
+                    onApplyRichCommand: applyRichCommand,
+                    onToggleBulletList: toggleBulletList,
+                    onToggleNumberedList: toggleNumberedList,
+                    onIndent: handleIndent,
+                    onOutdent: handleOutdent,
+                    onLinkButtonClick: handleLinkButtonClick,
+                    onInsertLink: handleInsertLink,
+                    onCloseLinkPopover: () => setShowLinkPopover(false),
+                    onPrintClick: () => setShowPrintDialog(true),
+                    onToggleRichEdit: () => setIsRichEditEnabled((prev) => !prev)
+                  }
+                ),
+                isRichEditEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: richEditorRef,
+                    contentEditable: true,
+                    suppressContentEditableWarning: true,
+                    onInput: handleRichInput,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDownRich,
+                    onClick: handleEditorClick,
+                    className: "w-full overflow-y-auto rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors whitespace-pre-wrap",
+                    style: { maxHeight: EXPANDED_MAX_HEIGHT - 8, minHeight: 72 }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    name: "slide-notes",
+                    value: draft,
+                    onChange: handlePlainChange,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDownPlain,
+                    placeholder: t2("pptx.notes.clickToAddNotes"),
+                    rows: 4,
+                    className: "w-full resize-none rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors",
+                    style: { maxHeight: EXPANDED_MAX_HEIGHT - 8 }
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-full rounded-md border border-border/30 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground overflow-y-auto whitespace-pre-wrap",
+                  style: { maxHeight: EXPANDED_MAX_HEIGHT - 32, minHeight: 60 },
+                  children: hasNotes ? renderRichNotesSegments(draftSegments) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: t2("pptx.notes.noNotes") })
+                }
+              )
+            ]
+          }
+        ),
+        showPrintDialog && allSlides && /* @__PURE__ */ jsxRuntime.jsx(NotesPrintDialog, { slides: allSlides, onClose: () => setShowPrintDialog(false) })
+      ]
+    }
+  );
 };
 var DB_NAME = "pptx-viewer-autosave";
 var DB_VERSION = 1;
@@ -98316,7 +98341,8 @@ function ArrangeSection(p3) {
       {
         type: "button",
         onClick: p3.onToggleFormatPainter,
-        disabled: !p3.canEdit,
+        disabled: !p3.canEdit || p3.canActivateFormatPainter === false && !p3.formatPainterActive,
+        "data-testid": "format-painter-toggle",
         className: cn(
           pill,
           p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
@@ -98768,7 +98794,8 @@ function HomeSection(p3) {
   const { fontFamily, fontSize } = extractFontInfo(p3.selectedElement);
   const handleNewSlide = React10.useCallback(() => {
     if (p3.layoutOptions.length > 0) {
-      p3.onInsertSlideFromLayout(p3.layoutOptions[0].path);
+      const first = p3.layoutOptions[0];
+      p3.onInsertSlideFromLayout(first.path, first.name);
     }
   }, [p3]);
   React10.useEffect(() => {
@@ -98855,7 +98882,8 @@ function HomeSection(p3) {
           {
             type: "button",
             onClick: p3.onToggleFormatPainter,
-            disabled: !p3.canEdit,
+            disabled: !p3.canEdit || p3.canActivateFormatPainter === false && !p3.formatPainterActive,
+            "data-testid": "format-painter-toggle",
             className: cn(
               gL,
               p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
@@ -98905,7 +98933,7 @@ function HomeSection(p3) {
             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);
+              p3.onInsertSlideFromLayout(lo.path, lo.name);
               setLayoutMenuOpen(false);
             },
             children: lo.name
@@ -99805,6 +99833,561 @@ function TextSection(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",
+      {
+        onClick: () => p3.onSetEditTemplateMode(!p3.editTemplateMode),
+        disabled: !p3.canEdit,
+        className: cn(
+          pill,
+          p3.editTemplateMode ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
+        ),
+        title: "Toggle template/master element editing",
+        children: p3.editTemplateMode ? "Templates On" : "Templates Off"
+      }
+    ),
+    p3.onToggleSelectionPane && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleSelectionPane,
+        className: cn(
+          pill,
+          p3.isSelectionPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: "Selection Pane",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: ic2 }),
+          "Selection"
+        ]
+      }
+    ),
+    p3.onToggleEyedropper && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleEyedropper,
+        disabled: !p3.canEdit,
+        className: cn(
+          pill,
+          p3.eyedropperActive ? "bg-purple-600 hover:bg-purple-500 text-purple-50" : ""
+        ),
+        title: "Eyedropper \u2014 sample a colour from the slide",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPipette, { className: ic2 }),
+          "Eyedropper"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetShowGrid(!p3.showGrid),
+        className: cn(pill, p3.showGrid ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.toggleGrid"),
+        children: t2("pptx.grid.grid")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetShowRulers(!p3.showRulers),
+        className: cn(pill, p3.showRulers ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.ruler.toggleRulers"),
+        children: t2("pptx.ruler.rulers")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSnapToGrid(!p3.snapToGrid),
+        className: cn(pill, p3.snapToGrid ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.snapToGrid"),
+        children: t2("pptx.grid.snapToGrid")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSnapToShape(!p3.snapToShape),
+        className: cn(pill, p3.snapToShape ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.snapToShape"),
+        children: t2("pptx.grid.snapToShape")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("h"), className: pill, title: "Add horizontal guide", children: "H Guide" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("v"), className: pill, title: "Add vertical guide", children: "V Guide" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSpellCheckEnabled(!p3.spellCheckEnabled),
+        className: cn(pill, p3.spellCheckEnabled ? "bg-primary text-primary-foreground" : ""),
+        title: "Toggle spell check",
+        children: "Spell"
+      }
+    )
+  ] });
+}
+function MobileSheet({
+  open,
+  onClose,
+  title,
+  children,
+  heightFraction = 0.6,
+  fullScreen = false,
+  className,
+  headerRight
+}) {
+  const sheetRef = React10.useRef(null);
+  const [dragY, setDragY] = React10.useState(0);
+  const dragStartRef = React10.useRef(null);
+  const onPointerDown = React10.useCallback((e2) => {
+    dragStartRef.current = e2.clientY;
+    e2.target.setPointerCapture?.(e2.pointerId);
+  }, []);
+  const onPointerMove = React10.useCallback((e2) => {
+    if (dragStartRef.current === null) {
+      return;
+    }
+    const delta = e2.clientY - dragStartRef.current;
+    setDragY(Math.max(0, delta));
+  }, []);
+  const onPointerUp = React10.useCallback(
+    (e2) => {
+      if (dragStartRef.current === null) {
+        return;
+      }
+      const delta = e2.clientY - dragStartRef.current;
+      dragStartRef.current = null;
+      e2.target.releasePointerCapture?.(e2.pointerId);
+      if (delta > 120) {
+        onClose();
+      }
+      setDragY(0);
+    },
+    [onClose]
+  );
+  React10.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleKey = (e2) => {
+      if (e2.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) {
+    return null;
+  }
+  const heightStyle = fullScreen ? { height: "calc(100dvh - env(safe-area-inset-top))" } : { height: `${Math.round(heightFraction * 100)}dvh` };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex flex-col justify-end md:hidden",
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close",
+            className: "absolute inset-0 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-150",
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: sheetRef,
+            className: cn(
+              "relative bg-background border-t border-border rounded-t-2xl shadow-2xl flex flex-col overflow-hidden",
+              "animate-in slide-in-from-bottom duration-200",
+              className
+            ),
+            style: {
+              ...heightStyle,
+              transform: dragY > 0 ? `translateY(${dragY}px)` : void 0,
+              transition: dragStartRef.current === null ? "transform 150ms ease-out" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center pt-2 pb-1 cursor-grab active:cursor-grabbing touch-none",
+                  onPointerDown,
+                  onPointerMove,
+                  onPointerUp,
+                  onPointerCancel: onPointerUp,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" })
+                }
+              ),
+              (title || headerRight) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pb-2 border-b border-border/60", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground truncate", children: title }),
+                headerRight
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var MENU_ITEMS = [
+  { key: "home", label: "Home", icon: lu.LuClipboardCopy },
+  { key: "insert", label: "Insert", icon: lu.LuPlus },
+  { key: "text", label: "Text", icon: lu.LuType },
+  { key: "draw", label: "Draw", icon: lu.LuPaintbrush },
+  { key: "arrange", label: "Arrange", icon: lu.LuShapes },
+  { key: "design", label: "Design", icon: lu.LuLayoutGrid },
+  { key: "transitions", label: "Transitions", icon: lu.LuSparkles },
+  { key: "animations", label: "Animations", icon: lu.LuWand },
+  { key: "slideShow", label: "Slide Show", icon: lu.LuPresentation },
+  { key: "review", label: "Review", icon: lu.LuTextCursorInput },
+  { key: "view", label: "View", icon: lu.LuSettings },
+  { key: "file", label: "File", icon: lu.LuFile }
+];
+function MobileMenuSheet(props) {
+  const { open, onClose } = props;
+  const [active, setActive] = React10.useState("home");
+  return /* @__PURE__ */ jsxRuntime.jsx(MobileSheet, { open, onClose, fullScreen: true, title: "Menu", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-background border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto px-3 py-2 scrollbar-none", children: MENU_ITEMS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActive(active === key ? null : key),
+        className: cn(
+          "inline-flex items-center gap-1.5 shrink-0 px-3 py-2 rounded-full text-[12px] font-medium border transition-colors min-h-[36px]",
+          active === key ? "bg-primary text-primary-foreground border-primary" : "border-border text-muted-foreground hover:text-foreground hover:bg-accent/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }),
+          label
+        ]
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsx(MobileSectionBody, { active, ...props }) })
+  ] }) });
+}
+function MobileSectionBody({
+  active,
+  ...p3
+}) {
+  const wrap = "flex flex-wrap items-center gap-2";
+  switch (active) {
+    case "home":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        HomeSection,
+        {
+          canEdit: p3.canEdit,
+          clipboardPayload: p3.clipboardPayload,
+          formatPainterActive: p3.formatPainterActive,
+          canActivateFormatPainter: p3.canActivateFormatPainter,
+          onCopy: p3.onCopy,
+          onCut: p3.onCut,
+          onPaste: p3.onPaste,
+          onToggleFormatPainter: p3.onToggleFormatPainter,
+          layoutOptions: p3.layoutOptions,
+          onInsertSlideFromLayout: p3.onInsertSlideFromLayout,
+          selectedElement: p3.selectedElement,
+          onUpdateTextStyle: p3.onUpdateTextStyle
+        }
+      ) });
+    case "insert":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        InsertSection,
+        {
+          canEdit: p3.canEdit,
+          newShapeType: p3.newShapeType,
+          onSetNewShapeType: p3.onSetNewShapeType,
+          onAddTextBox: p3.onAddTextBox,
+          onAddShape: p3.onAddShape,
+          onAddTable: p3.onAddTable,
+          onAddSmartArt: p3.onAddSmartArt,
+          onAddEquation: p3.onAddEquation,
+          onAddActionButton: p3.onAddActionButton,
+          onInsertField: p3.onInsertField,
+          onOpenImagePicker: p3.onOpenImagePicker,
+          onOpenMediaPicker: p3.onOpenMediaPicker
+        }
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          tableEditorState: p3.tableEditorState,
+          onUpdateTextStyle: p3.onUpdateTextStyle
+        }
+      ) });
+    case "draw":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DrawSection,
+        {
+          activeTool: p3.activeTool,
+          drawingColor: p3.drawingColor,
+          drawingWidth: p3.drawingWidth,
+          onSetActiveTool: p3.onSetActiveTool,
+          onSetDrawingColor: p3.onSetDrawingColor,
+          onSetDrawingWidth: p3.onSetDrawingWidth
+        }
+      ) });
+    case "arrange":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ArrangeSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          clipboardPayload: p3.clipboardPayload,
+          onAlignElements: p3.onAlignElements,
+          onCopy: p3.onCopy,
+          onCut: p3.onCut,
+          onPaste: p3.onPaste,
+          onFlip: p3.onFlip,
+          onMoveLayer: p3.onMoveLayer,
+          onMoveLayerToEdge: p3.onMoveLayerToEdge,
+          onDuplicate: p3.onDuplicate,
+          onDelete: p3.onDelete,
+          formatPainterActive: p3.formatPainterActive,
+          onToggleFormatPainter: p3.onToggleFormatPainter,
+          canActivateFormatPainter: p3.canActivateFormatPainter
+        }
+      ) });
+    case "design":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DesignSection,
+        {
+          canEdit: p3.canEdit,
+          onToggleThemeGallery: p3.onToggleThemeGallery,
+          isThemeGalleryOpen: p3.isThemeGalleryOpen,
+          onToggleThemeEditor: p3.onToggleThemeEditor,
+          isThemeEditorOpen: p3.isThemeEditorOpen,
+          onOpenDocumentProperties: p3.onOpenDocumentProperties,
+          onToggleInspector: p3.onToggleInspector,
+          isInspectorPaneOpen: p3.isInspectorPaneOpen
+        }
+      ) });
+    case "transitions":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TransitionsSection,
+        {
+          isInspectorPaneOpen: p3.isInspectorPaneOpen,
+          onToggleInspector: p3.onToggleInspector
+        }
+      ) });
+    case "animations":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        AnimationsSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          isInspectorPaneOpen: p3.isInspectorPaneOpen,
+          onToggleInspector: p3.onToggleInspector,
+          onOpenAnimationPanel: p3.onOpenAnimationPanel,
+          onAddAnimation: p3.onAddAnimation,
+          onRemoveAnimation: p3.onRemoveAnimation
+        }
+      ) });
+    case "slideShow":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__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
+        }
+      ) });
+    case "review":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ReviewSection,
+        {
+          canEdit: p3.canEdit,
+          spellCheckEnabled: p3.spellCheckEnabled,
+          onSetSpellCheckEnabled: p3.onSetSpellCheckEnabled,
+          onToggleComments: p3.onToggleComments,
+          isCommentsPanelOpen: p3.isCommentsPanelOpen,
+          slideCommentCount: p3.slideCommentCount,
+          onCompare: p3.onCompare
+        }
+      ) });
+    case "view":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ViewSection,
+        {
+          canEdit: p3.canEdit,
+          editTemplateMode: p3.editTemplateMode,
+          onSetEditTemplateMode: p3.onSetEditTemplateMode,
+          spellCheckEnabled: p3.spellCheckEnabled,
+          onSetSpellCheckEnabled: p3.onSetSpellCheckEnabled,
+          showGrid: p3.showGrid,
+          showRulers: p3.showRulers,
+          snapToGrid: p3.snapToGrid,
+          snapToShape: p3.snapToShape,
+          onSetShowGrid: p3.onSetShowGrid,
+          onSetShowRulers: p3.onSetShowRulers,
+          onSetSnapToGrid: p3.onSetSnapToGrid,
+          onSetSnapToShape: p3.onSetSnapToShape,
+          onAddGuide: p3.onAddGuide,
+          onEnterMasterView: p3.onEnterMasterView,
+          isSelectionPaneOpen: p3.isSelectionPaneOpen,
+          onToggleSelectionPane: p3.onToggleSelectionPane,
+          eyedropperActive: p3.eyedropperActive,
+          onToggleEyedropper: p3.onToggleEyedropper
+        }
+      ) });
+    case "file":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        FileSection,
+        {
+          onExportPng: p3.onExportPng,
+          onExportPdf: p3.onExportPdf,
+          onExportVideo: p3.onExportVideo,
+          onExportGif: p3.onExportGif,
+          onPackageForSharing: p3.onPackageForSharing,
+          onSaveAsPptx: p3.onSaveAsPptx,
+          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
+        }
+      ) });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-sm text-muted-foreground py-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { className: "w-5 h-5 inline-block opacity-50" }),
+        " Select a section above"
+      ] });
+  }
+}
+function MobileToolbar(props) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const { mode, canUndo, canRedo, onUndo, onRedo, onSetMode } = props;
+  const [menuOpen, setMenuOpen] = React10.useState(false);
+  const showEdit = mode === "edit" || mode === "master";
+  const btn = "inline-flex items-center justify-center min-w-[44px] min-h-[44px] rounded-md text-foreground/80 hover:bg-accent/60 disabled:opacity-40 disabled:cursor-not-allowed active:scale-95 transition-transform";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Toolbar",
+      className: "relative z-20 flex items-center gap-1 px-2 py-1 border-b border-border bg-secondary/50 min-h-[52px] pt-[max(env(safe-area-inset-top),0px)]",
+      children: [
+        showEdit && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMenuOpen(true),
+            className: btn,
+            title: "Menu",
+            "aria-label": "Menu",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMenu, { className: "w-5 h-5" })
+          }
+        ),
+        showEdit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onUndo,
+              disabled: !canUndo,
+              className: btn,
+              title: t2("pptx.toolbar.undo"),
+              "aria-label": t2("pptx.toolbar.undo"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRedo,
+              disabled: !canRedo,
+              className: btn,
+              title: t2("pptx.toolbar.redo"),
+              "aria-label": t2("pptx.toolbar.redo"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSetMode("present"),
+            className: cn(btn, "text-primary"),
+            title: t2("pptx.toolbar.present"),
+            "aria-label": t2("pptx.toolbar.present"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPresentation, { className: "w-5 h-5" })
+          }
+        ),
+        showEdit && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: props.onOpenShareDialog ?? props.onPackageForSharing,
+            className: cn(btn, "bg-primary text-primary-foreground hover:bg-primary/90 px-3"),
+            title: t2("pptx.toolbar.share"),
+            "aria-label": t2("pptx.toolbar.share"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuShare2, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MobileMenuSheet, { open: menuOpen, onClose: () => setMenuOpen(false), ...props })
+      ]
+    }
+  );
+}
 function CustomShowsControls({
   customShows,
   activeCustomShowId,
@@ -100233,7 +100816,7 @@ function ToolbarPrimaryRow(p3) {
         onClick: p3.onToggleComments,
         className: cn(
           qab,
-          "max-md:hidden",
+          "relative max-md:hidden",
           p3.isCommentsPanelOpen ? "text-foreground" : "text-muted-foreground"
         ),
         title: t2("pptx.toolbar.comments"),
@@ -100349,134 +100932,11 @@ function ToolbarPrimaryRow(p3) {
     /* @__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",
-      {
-        onClick: () => p3.onSetEditTemplateMode(!p3.editTemplateMode),
-        disabled: !p3.canEdit,
-        className: cn(
-          pill,
-          p3.editTemplateMode ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
-        ),
-        title: "Toggle template/master element editing",
-        children: p3.editTemplateMode ? "Templates On" : "Templates Off"
-      }
-    ),
-    p3.onToggleSelectionPane && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: p3.onToggleSelectionPane,
-        className: cn(
-          pill,
-          p3.isSelectionPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
-        ),
-        title: "Selection Pane",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: ic2 }),
-          "Selection"
-        ]
-      }
-    ),
-    p3.onToggleEyedropper && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: p3.onToggleEyedropper,
-        disabled: !p3.canEdit,
-        className: cn(
-          pill,
-          p3.eyedropperActive ? "bg-purple-600 hover:bg-purple-500 text-purple-50" : ""
-        ),
-        title: "Eyedropper \u2014 sample a colour from the slide",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPipette, { className: ic2 }),
-          "Eyedropper"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetShowGrid(!p3.showGrid),
-        className: cn(pill, p3.showGrid ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.toggleGrid"),
-        children: t2("pptx.grid.grid")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetShowRulers(!p3.showRulers),
-        className: cn(pill, p3.showRulers ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.ruler.toggleRulers"),
-        children: t2("pptx.ruler.rulers")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSnapToGrid(!p3.snapToGrid),
-        className: cn(pill, p3.snapToGrid ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.snapToGrid"),
-        children: t2("pptx.grid.snapToGrid")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSnapToShape(!p3.snapToShape),
-        className: cn(pill, p3.snapToShape ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.snapToShape"),
-        children: t2("pptx.grid.snapToShape")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("h"), className: pill, title: "Add horizontal guide", children: "H Guide" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("v"), className: pill, title: "Add vertical guide", children: "V Guide" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSpellCheckEnabled(!p3.spellCheckEnabled),
-        className: cn(pill, p3.spellCheckEnabled ? "bg-primary text-primary-foreground" : ""),
-        title: "Toggle spell check",
-        children: "Spell"
-      }
-    )
-  ] });
-}
 function Toolbar(p3) {
   const { mode, isNarrowViewport, isCompactToolbarOpen, toolbarSection, onSetToolbarSection } = p3;
+  if (isNarrowViewport && mode !== "present") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MobileToolbar, { ...p3 });
+  }
   const sFil = toolbarSection === "file";
   const sHome = toolbarSection === "home";
   const sIns = toolbarSection === "insert";
@@ -100562,6 +101022,7 @@ function Toolbar(p3) {
                   canEdit: p3.canEdit,
                   clipboardPayload: p3.clipboardPayload,
                   formatPainterActive: p3.formatPainterActive,
+                  canActivateFormatPainter: p3.canActivateFormatPainter,
                   onCopy: p3.onCopy,
                   onCut: p3.onCut,
                   onPaste: p3.onPaste,
@@ -100625,7 +101086,8 @@ function Toolbar(p3) {
                   onDuplicate: p3.onDuplicate,
                   onDelete: p3.onDelete,
                   formatPainterActive: p3.formatPainterActive,
-                  onToggleFormatPainter: p3.onToggleFormatPainter
+                  onToggleFormatPainter: p3.onToggleFormatPainter,
+                  canActivateFormatPainter: p3.canActivateFormatPainter
                 }
               ),
               sDes && /* @__PURE__ */ jsxRuntime.jsx(
@@ -106338,181 +106800,194 @@ function InspectorPane(props) {
     const fallback = themeOptions[0]?.path ?? "";
     setSelectedThemePath((previous) => previous || fallback);
   }, [slideMasters, themeOptions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        // Shared styles
-        "bg-background flex flex-col text-xs text-foreground shadow-xl",
-        // Mobile: absolute bottom sheet overlay
-        "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:w-full max-md:max-h-[60vh] max-md:rounded-t-xl max-md:border-t max-md:border-border max-md:z-30",
-        "max-md:transition-transform max-md:duration-200 max-md:ease-in-out",
-        isOpen ? "max-md:translate-y-0" : "max-md:translate-y-full",
-        // Desktop: flow-based flex child (takes space from canvas)
-        "md:h-full md:border-l md:border-border",
-        !panelWidth && "md:w-72"
-      ),
-      style: panelWidth ? { width: panelWidth } : void 0,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 rounded bg-muted p-0.5", children: INSPECTOR_TABS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              title: label,
-              className: cn(
-                "flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors",
-                activeTab === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-              ),
-              onClick: () => onSetActiveTab(key),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: label })
-              ]
-            },
-            key
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              title: t2("common.close"),
-              className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: "w-4 h-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
-          activeTab === "elements" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEADING, "mb-2"), children: t2("pptx.inspector.layerOrder") }),
-            activeSlide ? [...activeSlide.elements || []].reverse().map((el, ri) => {
-              const idx = (activeSlide.elements || []).length - 1 - ri;
-              const sel = selectedElement?.id === el.id || selectedElementIds.includes(el.id);
-              const label = (pptxViewerCore.hasTextProperties(el) ? (el.text || "").slice(0, 24) : void 0) || el.type;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  title: `${el.type} \u2014 ${el.id}`,
-                  className: cn(
-                    "flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors",
-                    sel ? "bg-primary/30 text-primary" : "hover:bg-muted text-foreground"
-                  ),
-                  onClick: () => onSelectElement(el.id),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground w-4 text-right", children: idx + 1 }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label })
-                  ]
-                },
-                el.id
-              );
-            }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground italic", children: t2("pptx.inspector.noSlideSelected") })
-          ] }),
-          activeTab === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: hasSelection && selectedElement ? /* @__PURE__ */ jsxRuntime.jsx(
-            ElementInspectorBody,
-            {
-              selectedElement,
-              canEdit,
-              slides,
-              tableEditorState,
-              mediaDataUrls,
-              onUpdateElement,
-              onUpdateElementStyle,
-              onUpdateTextStyle,
-              onMoveLayer
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t2("common.close"),
+        onClick: onClose,
+        className: "md:hidden fixed inset-0 z-20 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-150"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          // Shared styles
+          "bg-background flex flex-col text-xs text-foreground shadow-xl",
+          // Mobile: absolute bottom sheet overlay sized via dvh so it
+          // adapts to the on-screen keyboard / dynamic browser chrome.
+          "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:w-full max-md:max-h-[75dvh] max-md:rounded-t-2xl max-md:border-t max-md:border-border max-md:z-30 max-md:pb-[max(env(safe-area-inset-bottom),0px)]",
+          "max-md:transition-transform max-md:duration-200 max-md:ease-in-out",
+          isOpen ? "max-md:translate-y-0" : "max-md:translate-y-full",
+          // Desktop: flow-based flex child (takes space from canvas)
+          "md:h-full md:border-l md:border-border",
+          !panelWidth && "md:w-72"
+        ),
+        style: panelWidth ? { width: panelWidth } : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden flex items-center justify-center pt-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 rounded bg-muted p-0.5", children: INSPECTOR_TABS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                title: label,
+                className: cn(
+                  "flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors",
+                  activeTab === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                ),
+                onClick: () => onSetActiveTab(key),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: label })
+                ]
+              },
+              key
+            )) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              PresentationPropertiesPanel,
+              "button",
               {
-                canEdit,
-                canvasSize,
-                presentationProperties,
-                onUpdatePresentationProperties,
-                notesMaster,
-                handoutMaster,
-                notesCanvasSize,
-                coreProperties,
-                appProperties,
-                customProperties,
-                themeOptions,
-                selectedThemePath,
-                setSelectedThemePath,
-                onApplyTheme,
-                onUpdateCoreProperties,
-                onUpdateAppProperties,
-                onUpdateCustomProperties,
-                tagCollections,
-                onUpdateTagCollections,
-                onUpdateCanvasSize,
-                activeSlide,
-                theme,
-                onUpdateSlide
+                type: "button",
+                onClick: onClose,
+                title: t2("common.close"),
+                className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: "w-4 h-4" })
               }
-            ),
-            activeSlide && /* @__PURE__ */ jsxRuntime.jsx(
-              SlideBackgroundPanel,
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
+            activeTab === "elements" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEADING, "mb-2"), children: t2("pptx.inspector.layerOrder") }),
+              activeSlide ? [...activeSlide.elements || []].reverse().map((el, ri) => {
+                const idx = (activeSlide.elements || []).length - 1 - ri;
+                const sel = selectedElement?.id === el.id || selectedElementIds.includes(el.id);
+                const label = (pptxViewerCore.hasTextProperties(el) ? (el.text || "").slice(0, 24) : void 0) || el.type;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    title: `${el.type} \u2014 ${el.id}`,
+                    className: cn(
+                      "flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors",
+                      sel ? "bg-primary/30 text-primary" : "hover:bg-muted text-foreground"
+                    ),
+                    onClick: () => onSelectElement(el.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground w-4 text-right", children: idx + 1 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label })
+                    ]
+                  },
+                  el.id
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground italic", children: t2("pptx.inspector.noSlideSelected") })
+            ] }),
+            activeTab === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: hasSelection && selectedElement ? /* @__PURE__ */ jsxRuntime.jsx(
+              ElementInspectorBody,
               {
-                activeSlide,
+                selectedElement,
                 canEdit,
-                onUpdateSlide,
-                editTemplateMode,
-                slideMasters,
-                onSetTemplateBackground,
-                onGetTemplateBackgroundColor
+                slides,
+                tableEditorState,
+                mediaDataUrls,
+                onUpdateElement,
+                onUpdateElementStyle,
+                onUpdateTextStyle,
+                onMoveLayer
               }
-            )
-          ] }) }),
-          activeTab === "comments" && /* @__PURE__ */ jsxRuntime.jsx(
-            InspectorCommentsSection,
-            {
-              comments,
-              canEdit,
-              activeSlide,
-              selectedElement,
-              editingCommentId,
-              commentEditDraft,
-              commentDraft,
-              replyingToCommentId: replyingToCommentId ?? null,
-              replyDraftByCommentId: replyDraftByCommentId ?? {},
-              onSetCommentDraft,
-              onAddComment,
-              onDeleteComment,
-              onStartEditComment,
-              onSaveEditComment,
-              onCancelEditComment,
-              onSetCommentEditDraft,
-              onToggleCommentResolved,
-              onStartReply,
-              onCancelReply,
-              onReplyDraftChange,
-              onSubmitReply,
-              onSelectElement
-            }
-          )
-        ] }),
-        hasSelection && selectedElement && activeSlide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeAnim }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "border-t border-border p-3 overflow-y-auto flex-shrink-0",
-              style: { height: animPanelHeight },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                AnimationPanel,
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PresentationPropertiesPanel,
                 {
-                  selectedElement,
-                  activeSlide,
                   canEdit,
+                  canvasSize,
+                  presentationProperties,
+                  onUpdatePresentationProperties,
+                  notesMaster,
+                  handoutMaster,
+                  notesCanvasSize,
+                  coreProperties,
+                  appProperties,
+                  customProperties,
+                  themeOptions,
+                  selectedThemePath,
+                  setSelectedThemePath,
+                  onApplyTheme,
+                  onUpdateCoreProperties,
+                  onUpdateAppProperties,
+                  onUpdateCustomProperties,
+                  tagCollections,
+                  onUpdateTagCollections,
+                  onUpdateCanvasSize,
+                  activeSlide,
+                  theme,
                   onUpdateSlide
                 }
+              ),
+              activeSlide && /* @__PURE__ */ jsxRuntime.jsx(
+                SlideBackgroundPanel,
+                {
+                  activeSlide,
+                  canEdit,
+                  onUpdateSlide,
+                  editTemplateMode,
+                  slideMasters,
+                  onSetTemplateBackground,
+                  onGetTemplateBackgroundColor
+                }
               )
-            }
-          )
-        ] })
-      ]
-    }
-  );
+            ] }) }),
+            activeTab === "comments" && /* @__PURE__ */ jsxRuntime.jsx(
+              InspectorCommentsSection,
+              {
+                comments,
+                canEdit,
+                activeSlide,
+                selectedElement,
+                editingCommentId,
+                commentEditDraft,
+                commentDraft,
+                replyingToCommentId: replyingToCommentId ?? null,
+                replyDraftByCommentId: replyDraftByCommentId ?? {},
+                onSetCommentDraft,
+                onAddComment,
+                onDeleteComment,
+                onStartEditComment,
+                onSaveEditComment,
+                onCancelEditComment,
+                onSetCommentEditDraft,
+                onToggleCommentResolved,
+                onStartReply,
+                onCancelReply,
+                onReplyDraftChange,
+                onSubmitReply,
+                onSelectElement
+              }
+            )
+          ] }),
+          hasSelection && selectedElement && activeSlide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeAnim }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "border-t border-border p-3 overflow-y-auto flex-shrink-0",
+                style: { height: animPanelHeight },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AnimationPanel,
+                  {
+                    selectedElement,
+                    activeSlide,
+                    canEdit,
+                    onUpdateSlide
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 function buildPathD(points) {
   if (points.length === 0) {
@@ -110646,7 +111121,8 @@ function ViewerBottomPanels({
   onZoomToFit,
   mode,
   onSetMode,
-  onToggleSlideSorter
+  onToggleSlideSorter,
+  hideStatusBar = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     onResizeBottom && !isSlideNotesCollapsed && /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeBottom }),
@@ -110662,7 +111138,7 @@ function ViewerBottomPanels({
         panelHeight: notesPanelHeight
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    !hideStatusBar && /* @__PURE__ */ jsxRuntime.jsx(
       StatusBar,
       {
         slideCount,
@@ -110819,6 +111295,45 @@ function ViewerInspector({
     }
   );
 }
+
+// src/viewer/hooks/useScopedLayoutOptions.ts
+function scopeLayoutOptionsToActiveSlide(options, activeSlide) {
+  if (!activeSlide?.layoutPath) {
+    return options;
+  }
+  const hasAnyMasterInfo = options.some((o3) => o3.masterPath);
+  if (!hasAnyMasterInfo) {
+    return options;
+  }
+  const activeOption = options.find((o3) => o3.path === activeSlide.layoutPath);
+  const activeMaster = activeOption?.masterPath;
+  if (!activeMaster) {
+    return options;
+  }
+  const scoped = options.filter((o3) => o3.masterPath === activeMaster);
+  const seen = /* @__PURE__ */ new Map();
+  for (const opt of scoped) {
+    const isActive = opt.path === activeSlide.layoutPath;
+    const existing = seen.get(opt.name);
+    if (!existing || isActive) {
+      seen.set(opt.name, opt);
+    }
+  }
+  const chosen = new Set(Array.from(seen.values()).map((o3) => o3.path));
+  const result = [];
+  const usedNames = /* @__PURE__ */ new Set();
+  for (const opt of scoped) {
+    if (!chosen.has(opt.path)) {
+      continue;
+    }
+    if (usedNames.has(opt.name)) {
+      continue;
+    }
+    usedNames.add(opt.name);
+    result.push(opt);
+  }
+  return result;
+}
 function ViewerToolbarSection(props) {
   const {
     mode,
@@ -110888,6 +111403,10 @@ function ViewerToolbarSection(props) {
     },
     [activeSlide, propertyHandlers]
   );
+  const scopedLayoutOptions = React10__namespace.default.useMemo(
+    () => scopeLayoutOptionsToActiveSlide(s.layoutOptions, activeSlide),
+    [s.layoutOptions, activeSlide]
+  );
   const handleApplyTransitionToAll = React10.useCallback(() => {
     const transition = activeSlide?.transition;
     if (!transition) {
@@ -110994,7 +111513,7 @@ function ViewerToolbarSection(props) {
         onUpdateTextStyle: ops.updateSelectedTextStyle,
         isOverflowMenuOpen: s.isOverflowMenuOpen,
         onSetOverflowMenuOpen: s.setIsOverflowMenuOpen,
-        layoutOptions: s.layoutOptions,
+        layoutOptions: scopedLayoutOptions,
         onInsertSlideFromLayout: slideOps.handleInsertSlideFromLayout,
         customShows: s.customShows,
         activeCustomShowId: s.activeCustomShowId,
@@ -111027,6 +111546,7 @@ function ViewerToolbarSection(props) {
         isCommentsPanelOpen: s.isInspectorPaneOpen,
         slideCommentCount: activeSlide?.comments?.length ?? 0,
         formatPainterActive: s.formatPainterActive,
+        canActivateFormatPainter: hasCopyableFormat(selectedElement),
         onToggleFormatPainter: onToggleFormatPainterProp ?? (() => s.setFormatPainterActive((p3) => !p3)),
         isSelectionPaneOpen: s.isSelectionPaneOpen,
         onToggleSelectionPane: () => s.setIsSelectionPaneOpen((p3) => !p3),
@@ -114175,6 +114695,166 @@ function ViewerMainContent(props) {
     )
   ] });
 }
+function MobileBottomBar({
+  onOpenSlides,
+  onOpenInsert,
+  onOpenInspector,
+  onOpenComments,
+  onToggleNotes,
+  activeSheet,
+  commentCount
+}) {
+  const actions = [
+    {
+      key: "slides",
+      label: "Slides",
+      icon: lu.LuLayers,
+      onClick: onOpenSlides
+    },
+    {
+      key: "insert",
+      label: "Insert",
+      icon: lu.LuPlus,
+      onClick: onOpenInsert
+    },
+    {
+      key: "inspector",
+      label: "Format",
+      icon: lu.LuSettings2,
+      onClick: onOpenInspector
+    },
+    {
+      key: "comments",
+      label: "Comments",
+      icon: lu.LuMessageSquare,
+      onClick: onOpenComments,
+      badge: commentCount
+    },
+    {
+      key: "notes",
+      label: "Notes",
+      icon: lu.LuStickyNote,
+      onClick: onToggleNotes
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Editor actions",
+      className: "md:hidden flex items-stretch justify-around border-t border-border bg-secondary/80 backdrop-blur supports-[backdrop-filter]:bg-secondary/60 pb-[max(env(safe-area-inset-bottom),0px)]",
+      children: actions.map(({ key, label, icon: Icon, onClick, badge }) => {
+        const active = activeSheet === key;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: cn(
+              "relative flex flex-col items-center justify-center gap-0.5 flex-1 min-h-[56px] py-1.5 text-[10px] font-medium transition-colors active:scale-95",
+              active ? "text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-pressed": active,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              badge !== void 0 && badge > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1 right-1/4 flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-primary text-[9px] font-semibold text-primary-foreground", children: badge > 99 ? "99+" : badge }),
+              active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 rounded-full bg-primary" })
+            ]
+          },
+          key
+        );
+      })
+    }
+  );
+}
+function MobileSlidesSheet({
+  open,
+  onClose,
+  ...sidebar
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MobileSheet, { open, onClose, heightFraction: 0.7, title: "Slides", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(SlidesPaneSidebar, { ...sidebar }) }) });
+}
+function MobileChromeOverlay(props) {
+  const {
+    state: s,
+    editorOps,
+    presentation,
+    slides,
+    activeSlideIndex,
+    canvasSize,
+    slideSectionGroups,
+    canEdit,
+    commentCount
+  } = props;
+  const activeSheet = s.isSlidesPaneOpen ? "slides" : s.isInspectorPaneOpen ? s.sidebarPanelMode === "comments" ? "comments" : "inspector" : !s.isSlideNotesCollapsed ? "notes" : null;
+  const closeAllSheets = () => {
+    s.setIsSlidesPaneOpen(false);
+    s.setIsInspectorPaneOpen(false);
+    s.setIsSlideNotesCollapsed(true);
+  };
+  const openSheet = (which) => {
+    closeAllSheets();
+    switch (which) {
+      case "slides":
+        s.setIsSlidesPaneOpen(true);
+        break;
+      case "inspector":
+        s.setSidebarPanelMode("properties");
+        s.setIsInspectorPaneOpen(true);
+        break;
+      case "comments":
+        s.setSidebarPanelMode("comments");
+        s.setIsInspectorPaneOpen(true);
+        break;
+      case "notes":
+        s.setIsSlideNotesCollapsed(false);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileSlidesSheet,
+      {
+        open: s.isSlidesPaneOpen,
+        onClose: () => s.setIsSlidesPaneOpen(false),
+        slides,
+        activeSlideIndex,
+        canvasSize,
+        sectionGroups: slideSectionGroups,
+        isOpen: true,
+        canEdit,
+        onSelectSlide: (index) => {
+          s.setActiveSlideIndex(index);
+          s.setIsSlidesPaneOpen(false);
+        },
+        onSlideContextMenu: editorOps.slideOps.handleSlideContextMenu,
+        onMoveSlide: editorOps.slideOps.handleMoveSlide,
+        onAddSlide: editorOps.slideOps.handleAddSlide,
+        onCollapse: () => s.setIsSlidesPaneOpen(false),
+        onAddSection: editorOps.sectionOps.addSection,
+        onRenameSection: editorOps.sectionOps.renameSection,
+        onDeleteSection: editorOps.sectionOps.deleteSection,
+        onMoveSectionUp: editorOps.sectionOps.moveSectionUp,
+        onMoveSectionDown: editorOps.sectionOps.moveSectionDown,
+        rehearsalTimings: Object.keys(presentation.recordedTimings).length > 0 ? presentation.recordedTimings : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileBottomBar,
+      {
+        activeSheet,
+        commentCount,
+        onOpenSlides: () => s.isSlidesPaneOpen ? s.setIsSlidesPaneOpen(false) : openSheet("slides"),
+        onOpenInsert: () => {
+          editorOps.insertHandlers.handleAddTextBox();
+        },
+        onOpenInspector: () => s.isInspectorPaneOpen && s.sidebarPanelMode !== "comments" ? s.setIsInspectorPaneOpen(false) : openSheet("inspector"),
+        onOpenComments: () => s.isInspectorPaneOpen && s.sidebarPanelMode === "comments" ? s.setIsInspectorPaneOpen(false) : openSheet("comments"),
+        onToggleNotes: () => !s.isSlideNotesCollapsed ? s.setIsSlideNotesCollapsed(true) : openSheet("notes")
+      }
+    )
+  ] });
+}
 function ToggleSwitch({
   label,
   enabled,
@@ -114367,14 +115047,10 @@ function useYjsDocumentSync({
   const lastSyncedRef = React10.useRef("");
   const hasInitializedRef = React10.useRef(false);
   const getDocMap = React10.useCallback(() => {
-    if (!doc2 || typeof doc2 !== "object") {
+    if (!doc2) {
       return null;
     }
-    const d = doc2;
-    if (typeof d.getMap !== "function") {
-      return null;
-    }
-    return d.getMap("slides-data");
+    return doc2.getMap("slides-data");
   }, [doc2]);
   React10.useEffect(() => {
     if (!isConnected || !doc2) {
@@ -114395,10 +115071,9 @@ function useYjsDocumentSync({
       return;
     }
     lastSyncedRef.current = serialized;
-    const d = doc2;
-    d.transact(() => {
+    doc2.transact(() => {
       const currentCount = map3.get("count");
-      if (currentCount && currentCount > slides.length) {
+      if (typeof currentCount === "number" && currentCount > slides.length) {
         for (let i3 = slides.length; i3 < currentCount; i3++) {
           map3.delete(`slide-${i3}`);
         }
@@ -114423,13 +115098,13 @@ function useYjsDocumentSync({
     }
     const handleUpdate = () => {
       const count = map3.get("count");
-      if (!count || count === 0) {
+      if (typeof count !== "number" || count === 0) {
         return;
       }
       const remoteSlides = [];
       for (let i3 = 0; i3 < count; i3++) {
         const slideJson = map3.get(`slide-${i3}`);
-        if (slideJson) {
+        if (typeof slideJson === "string") {
           try {
             remoteSlides.push(JSON.parse(slideJson));
           } catch {
@@ -114454,7 +115129,7 @@ function useYjsDocumentSync({
     if (!hasInitializedRef.current) {
       hasInitializedRef.current = true;
       const count = map3.get("count");
-      if (count && count > 0) {
+      if (typeof count === "number" && count > 0) {
         handleUpdate();
       }
     }
@@ -115015,13 +115690,14 @@ function useCanvasInteractions(input) {
     if (e2.button !== 0) {
       return;
     }
-    if (!selectedElementIdSet.has(elementId)) {
+    const wasSelected = selectedElementIdSet.has(elementId);
+    if (!wasSelected) {
       ops.applySelection(elementId);
       justSelectedRef.current = true;
     } else {
       justSelectedRef.current = false;
     }
-    const ids = effectiveSelectedIds.length ? effectiveSelectedIds : [elementId];
+    const ids = !wasSelected ? [elementId] : effectiveSelectedIds.length ? effectiveSelectedIds : [elementId];
     const startPositions = {};
     const domEls = /* @__PURE__ */ new Map();
     for (const id2 of ids) {
@@ -117058,8 +117734,14 @@ function useSectionOperations(input) {
 }
 
 // src/viewer/hooks/useSlideManagement.ts
+function insertSlideFromLayoutUpdater(slides, activeIndex, draft) {
+  const next = [...slides];
+  const insertAt = Math.max(0, Math.min(activeIndex + 1, next.length));
+  next.splice(insertAt, 0, draft);
+  return next;
+}
 function useSlideManagement(input) {
-  const { slides, activeSlideIndex, setActiveSlideIndex, ops, history } = input;
+  const { slides, activeSlideIndex, setActiveSlideIndex, ops, history, handlerRef } = input;
   const handleAddSlide = () => {
     const newSlide = {
       id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
@@ -117158,8 +117840,42 @@ function useSlideManagement(input) {
     });
     history.markDirty();
   };
-  const handleInsertSlideFromLayout = (_layoutPath) => {
-    handleAddSlide();
+  const handleInsertSlideFromLayout = (layoutPath, layoutName) => {
+    const insertAt = activeSlideIndex + 1;
+    const draft = {
+      id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+      rId: "",
+      slideNumber: slides.length + 1,
+      elements: [],
+      layoutPath,
+      ...layoutName ? { layoutName } : {}
+    };
+    let inserted = [];
+    ops.updateSlides((prev) => {
+      inserted = insertSlideFromLayoutUpdater(prev, activeSlideIndex, draft);
+      return inserted;
+    });
+    setActiveSlideIndex(insertAt);
+    history.markDirty();
+    const handler = handlerRef?.current;
+    if (handler) {
+      void handler.applyLayoutToSlide(insertAt, layoutPath, inserted).then(
+        (updated) => {
+          ops.updateSlides((prev) => {
+            if (prev[insertAt]?.id !== draft.id) {
+              return prev;
+            }
+            const next = [...prev];
+            next[insertAt] = updated;
+            return next;
+          });
+          return void 0;
+        },
+        () => {
+          return void 0;
+        }
+      );
+    }
   };
   return {
     handleAddSlide,
@@ -117695,7 +118411,8 @@ function useEditorOperations(input) {
     canvasSize,
     dialogs,
     presentation,
-    userName
+    userName,
+    handlerRef
   } = input;
   const ops = useElementOperations({
     activeSlide,
@@ -117797,7 +118514,8 @@ function useEditorOperations(input) {
     activeSlideIndex,
     setActiveSlideIndex: state2.setActiveSlideIndex,
     ops,
-    history
+    history,
+    handlerRef
   });
   const tableOps = useTableOperations({
     selectedElement,
@@ -117826,21 +118544,34 @@ function useEditorOperations(input) {
   );
   const copiedFormatRef = React10.useRef(null);
   const prevFormatPainterRef = React10.useRef(false);
+  const { formatPainterActive, setFormatPainterActive, elementLookup } = state2;
   React10.useEffect(() => {
-    if (state2.formatPainterActive && !prevFormatPainterRef.current && selectedElement) {
+    if (formatPainterActive && !prevFormatPainterRef.current && selectedElement) {
       copiedFormatRef.current = copyFormatFromElement(selectedElement);
-    } else if (!state2.formatPainterActive) {
+    } else if (!formatPainterActive) {
       copiedFormatRef.current = null;
     }
-    prevFormatPainterRef.current = state2.formatPainterActive;
-  }, [state2.formatPainterActive, selectedElement]);
+    prevFormatPainterRef.current = formatPainterActive;
+  }, [formatPainterActive, selectedElement]);
+  React10.useEffect(() => {
+    if (!formatPainterActive) {
+      return;
+    }
+    const onKey = (e2) => {
+      if (e2.key === "Escape") {
+        setFormatPainterActive(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [formatPainterActive, setFormatPainterActive]);
   const formatPainterCanvasHandlers = React10.useMemo(
     () => ({
       ...canvasHandlers,
       handleElementClick: (elementId, e2) => {
-        if (state2.formatPainterActive && copiedFormatRef.current) {
+        if (formatPainterActive && copiedFormatRef.current) {
           e2.stopPropagation();
-          const element2 = state2.elementLookup.get(elementId);
+          const element2 = elementLookup.get(elementId);
           if (element2) {
             const updated = applyFormatToElement(element2, copiedFormatRef.current);
             const updates = {};
@@ -117853,14 +118584,21 @@ function useEditorOperations(input) {
             ops.updateElementById(elementId, updates);
           }
           copiedFormatRef.current = null;
-          state2.setFormatPainterActive(false);
+          setFormatPainterActive(false);
           ops.applySelection(elementId);
           return;
         }
         canvasHandlers.handleElementClick(elementId, e2);
+      },
+      handleCanvasMouseDown: (e2) => {
+        if (formatPainterActive) {
+          setFormatPainterActive(false);
+          return;
+        }
+        canvasHandlers.handleCanvasMouseDown(e2);
       }
     }),
-    [canvasHandlers, ops, state2]
+    [canvasHandlers, ops, formatPainterActive, setFormatPainterActive, elementLookup]
   );
   return {
     ops: combinedOps,
@@ -119999,21 +120737,35 @@ function useViewerDialogs(input) {
     null
   );
   const [embedFontsEnabled, setEmbedFontsEnabled] = React10.useState(false);
-  const [isNarrowViewport, setIsNarrowViewport] = React10.useState(false);
+  const [isNarrowViewport, setIsNarrowViewport] = React10.useState(
+    () => typeof window !== "undefined" ? window.innerWidth < 768 : false
+  );
   React10.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        setIsNarrowViewport(entry.contentRect.width < 768);
+    const handleWindow = () => setIsNarrowViewport(window.innerWidth < 768);
+    let observer = null;
+    let raf = 0;
+    const attach2 = () => {
+      const el = containerRef.current;
+      if (!el) {
+        raf = requestAnimationFrame(attach2);
+        return;
       }
-    });
-    observer.observe(el);
-    setIsNarrowViewport(el.clientWidth < 768);
-    return () => observer.disconnect();
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setIsNarrowViewport(entry.contentRect.width < 768);
+        }
+      });
+      observer.observe(el);
+      setIsNarrowViewport(el.clientWidth < 768);
+    };
+    attach2();
+    window.addEventListener("resize", handleWindow);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer?.disconnect();
+      window.removeEventListener("resize", handleWindow);
+    };
   }, []);
   React10.useEffect(() => {
     if (isDirty && hasDigitalSignatures && !signatureStripAcknowledgedRef.current) {
@@ -124485,7 +125237,9 @@ function useViewerCoreState(_input) {
 function useViewerUIState() {
   const [isCompactToolbarOpen, setIsCompactToolbarOpen] = React10.useState(false);
   const [toolbarSection, setToolbarSection] = React10.useState("home");
-  const [isSlidesPaneOpen, setIsSlidesPaneOpen] = React10.useState(true);
+  const [isSlidesPaneOpen, setIsSlidesPaneOpen] = React10.useState(
+    () => typeof window === "undefined" ? true : window.innerWidth >= 768
+  );
   const [isInspectorPaneOpen, setIsInspectorPaneOpen] = React10.useState(false);
   const [isSlideNotesCollapsed, setIsSlideNotesCollapsed] = React10.useState(true);
   const [isOverflowMenuOpen, setIsOverflowMenuOpen] = React10.useState(false);
@@ -124928,7 +125682,8 @@ var PowerPointViewer = React10.forwardRef(
       canvasSize,
       dialogs,
       presentation,
-      userName: authorName ?? collaboration?.userName
+      userName: authorName ?? collaboration?.userName,
+      handlerRef: actionSoundHandlerRef
     });
     const {
       exportHandlers,
@@ -125051,7 +125806,7 @@ var PowerPointViewer = React10.forwardRef(
             {
               activeSlide,
               allSlides: slides,
-              isSlideNotesCollapsed: isMobile || state2.isSlideNotesCollapsed,
+              isSlideNotesCollapsed: state2.isSlideNotesCollapsed,
               canEdit,
               slideCount: slides.length,
               activeSlideIndex,
@@ -125068,7 +125823,22 @@ var PowerPointViewer = React10.forwardRef(
               onZoomToFit: zoom.handleZoomToFit,
               mode,
               onSetMode: handleSetMode,
-              onToggleSlideSorter: () => state2.setShowSlideSorter((p3) => !p3)
+              onToggleSlideSorter: () => state2.setShowSlideSorter((p3) => !p3),
+              hideStatusBar: isMobile
+            }
+          ),
+          mode !== "present" && isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            MobileChromeOverlay,
+            {
+              state: state2,
+              editorOps,
+              presentation,
+              slides,
+              activeSlideIndex,
+              canvasSize,
+              slideSectionGroups,
+              canEdit,
+              commentCount: activeSlide?.comments?.length ?? 0
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(