superdoc 1.12.0-next.11 → 1.12.0-next.13

package/dist/superdoc.umd.js

@@ -13908,6 +13908,10 @@
     const id = sdtPr?.elements?.find((el) => el.name === "w:id");
     const tag = sdtPr?.elements?.find((el) => el.name === "w:tag");
     const alias = sdtPr?.elements?.find((el) => el.name === "w:alias");
+    const lockTag = sdtPr?.elements?.find((el) => el.name === "w:lock");
+    const lockValue = lockTag?.attributes?.["w:val"];
+    const validModes = ["unlocked", "sdtLocked", "contentLocked", "sdtContentLocked"];
+    const lockMode = validModes.includes(lockValue) ? lockValue : "unlocked";
     if (!sdtContent) {
       return null;
     }
@@ -13929,6 +13933,7 @@
         id: id?.attributes?.["w:val"] || null,
         tag: tag?.attributes?.["w:val"] || null,
         alias: alias?.attributes?.["w:val"] || null,
+        lockMode,
         sdtPr
       }
     };
@@ -30649,13 +30654,19 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       type: "element",
       attributes: { "w:val": attrs.tag }
     };
+    const lock = {
+      name: "w:lock",
+      type: "element",
+      attributes: { "w:val": attrs.lockMode }
+    };
     const resultElements = [];
     if (attrs.id) resultElements.push(id);
     if (attrs.alias) resultElements.push(alias);
     if (attrs.tag) resultElements.push(tag);
+    if (attrs.lockMode && attrs.lockMode !== "unlocked") resultElements.push(lock);
     if (attrs.sdtPr) {
       const elements = attrs.sdtPr.elements || [];
-      const elementsToExclude = ["w:id", "w:alias", "w:tag"];
+      const elementsToExclude = ["w:id", "w:alias", "w:tag", "w:lock"];
       const restElements = elements.filter((el) => !elementsToExclude.includes(el.name));
       const result2 = {
         name: "w:sdtPr",
@@ -34367,7 +34378,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   const COMMUNITY_LICENSE_KEY = "community-and-eval-agplv3";
   function getSuperdocVersion() {
     try {
-      return true ? "1.12.0-next.11" : "unknown";
+      return true ? "1.12.0-next.13" : "unknown";
     } catch {
       return "unknown";
     }
@@ -36643,7 +36654,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     #replaceSpecialCharacters(text2) {
       if (text2 === void 0 || text2 === null) return text2;
-      return String(text2).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+      return String(text2).replace(/&(?!#\d+;|#x[0-9a-fA-F]+;|(?:amp|lt|gt|quot|apos);)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
     }
     /**
      * Recursively generates XML string representation from a JSON node structure.
@@ -37639,7 +37650,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     static getStoredSuperdocVersion(docx) {
       return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
     }
-    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.12.0-next.11") {
+    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.12.0-next.13") {
       return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
     }
     /**
@@ -65116,7 +65127,7 @@ ${err.toString()}`);
       return false;
     }
   };
-  const summaryVersion = "1.12.0-next.11";
+  const summaryVersion = "1.12.0-next.13";
   const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
   const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
   function mapAttributes(attrs) {
@@ -67531,8 +67542,7 @@ ${err.toString()}`);
           "docProps/custom.xml": String(customXml),
           "word/_rels/document.xml.rels": String(rels),
           "word/numbering.xml": String(numbering),
-          // Replace & with &amp; in styles.xml as DOCX viewers can't handle it
-          "word/styles.xml": String(styles).replace(/&/gi, "&amp;"),
+          "word/styles.xml": String(styles),
           ...updatedHeadersFooters,
           ...coreXml ? { "docProps/core.xml": String(coreXml) } : {}
         };
@@ -67922,7 +67932,7 @@ ${err.toString()}`);
      * Process collaboration migrations
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "1.12.0-next.11");
+      console.debug("[checkVersionMigrations] Current editor version", "1.12.0-next.13");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -68100,6 +68110,300 @@ ${err.toString()}`);
       this.#renderer?.initDevTools?.(this);
     }
   }
+  function getEditorSurfaceElement(editor) {
+    if (!editor) return null;
+    if (typeof editor.hitTest === "function" && editor.element instanceof HTMLElement) {
+      return editor.element;
+    }
+    return editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element ?? null;
+  }
+  function getSurfaceRelativePoint(editor, eventLocation = {}) {
+    const surface = getEditorSurfaceElement(editor);
+    if (!surface) return null;
+    const rect = surface.getBoundingClientRect();
+    let left2;
+    let top2;
+    if (typeof eventLocation.clientX === "number" && typeof eventLocation.clientY === "number") {
+      left2 = eventLocation.clientX - rect.left;
+      top2 = eventLocation.clientY - rect.top;
+    } else if (editor?.state?.selection) {
+      const selectionFrom = editor.state.selection.from;
+      const coords = editor.coordsAtPos?.(selectionFrom);
+      if (coords) {
+        left2 = coords.left - rect.left;
+        top2 = coords.top - rect.top;
+      }
+    }
+    if (!Number.isFinite(left2) || !Number.isFinite(top2)) {
+      return null;
+    }
+    return { left: left2, top: top2 };
+  }
+  function findContainingBlockAncestor(element2) {
+    if (!element2) return null;
+    let current = element2.parentElement;
+    while (current && current !== document.body && current !== document.documentElement) {
+      try {
+        const style2 = window.getComputedStyle(current);
+        const transform = style2.transform;
+        const filter = style2.filter;
+        const backdropFilter = style2.backdropFilter || style2.webkitBackdropFilter;
+        const perspective = style2.perspective;
+        const willChange = style2.willChange;
+        const contain = style2.contain;
+        if (transform && transform !== "none") {
+          return current;
+        }
+        if (filter && filter !== "none") {
+          return current;
+        }
+        if (backdropFilter && backdropFilter !== "none") {
+          return current;
+        }
+        if (perspective && perspective !== "none") {
+          return current;
+        }
+        if (willChange && willChange !== "auto") {
+          const values = willChange.split(",").map((v2) => v2.trim());
+          if (values.includes("transform") || values.includes("perspective")) {
+            return current;
+          }
+        }
+        if (contain && /paint|layout|strict|content/.test(contain)) {
+          return current;
+        }
+      } catch (error) {
+        console.warn("SlashMenu: Failed to get computed style for element", current, error);
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  const SlashMenuPluginKey = new PluginKey("slashMenu");
+  const MENU_OFFSET_X = 100;
+  const MENU_OFFSET_Y = 28;
+  const CONTEXT_MENU_OFFSET_X = 10;
+  const CONTEXT_MENU_OFFSET_Y = 10;
+  const SLASH_COOLDOWN_MS = 5e3;
+  const SlashMenu = Extension.create({
+    name: "slashMenu",
+    /**
+     * Initialize default options for the SlashMenu extension
+     * @returns {SlashMenuOptions} Empty options object (configuration is inherited from editor options)
+     */
+    addOptions() {
+      return {};
+    },
+    addPmPlugins() {
+      const editor = this.editor;
+      if (editor.options?.isHeadless) {
+        return [];
+      }
+      let slashCooldown = false;
+      let slashCooldownTimeout = null;
+      const isMenuDisabled = () => Boolean(editor.options?.disableContextMenu);
+      const ensureStateShape = (value = {}) => ({
+        open: false,
+        selected: null,
+        anchorPos: null,
+        menuPosition: null,
+        disabled: isMenuDisabled(),
+        ...value
+      });
+      const slashMenuPlugin = new Plugin({
+        key: SlashMenuPluginKey,
+        state: {
+          init: () => ensureStateShape(),
+          /**
+           * Apply transaction to update plugin state
+           * Handles state transitions based on transaction metadata:
+           * - 'open': Opens menu at specified position or cursor location
+           * - 'select': Updates the selected menu item
+           * - 'close': Closes the menu and clears anchor position
+           * - 'updatePosition': Triggers menu position recalculation (no-op in apply)
+           *
+           * @param {import('prosemirror-state').Transaction} tr - The transaction
+           * @param {SlashMenuState} value - Previous plugin state
+           * @returns {SlashMenuState} New plugin state
+           */
+          apply(tr, value) {
+            const meta2 = tr.getMeta(SlashMenuPluginKey);
+            const disabled = isMenuDisabled();
+            if (disabled) {
+              if (value.open) {
+                editor.emit("slashMenu:close");
+              }
+              return ensureStateShape({ disabled: true });
+            }
+            if (!meta2) {
+              if (value.disabled !== disabled) {
+                return ensureStateShape({ ...value, disabled });
+              }
+              return value;
+            }
+            switch (meta2.type) {
+              case "open": {
+                if (typeof meta2.pos !== "number" || meta2.pos < 0 || meta2.pos > tr.doc.content.size) {
+                  console.warn("SlashMenu: Invalid position", meta2.pos);
+                  return ensureStateShape(value);
+                }
+                let left2 = 0;
+                let top2 = 0;
+                let isContextMenu = false;
+                if (typeof meta2.clientX === "number" && typeof meta2.clientY === "number") {
+                  left2 = meta2.clientX;
+                  top2 = meta2.clientY;
+                  isContextMenu = true;
+                } else {
+                  const relativePoint = getSurfaceRelativePoint(editor, meta2);
+                  if (relativePoint) {
+                    const surface = editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element;
+                    if (surface) {
+                      try {
+                        const rect = surface.getBoundingClientRect();
+                        left2 = rect.left + relativePoint.left;
+                        top2 = rect.top + relativePoint.top;
+                      } catch (error) {
+                        console.warn("SlashMenu: Failed to get surface bounds", error);
+                        return ensureStateShape(value);
+                      }
+                    }
+                  }
+                }
+                const menuSurface = editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element;
+                const containingBlock = findContainingBlockAncestor(menuSurface);
+                if (containingBlock) {
+                  try {
+                    const cbRect = containingBlock.getBoundingClientRect();
+                    left2 -= cbRect.left;
+                    top2 -= cbRect.top;
+                    left2 += containingBlock.scrollLeft || 0;
+                    top2 += containingBlock.scrollTop || 0;
+                  } catch (error) {
+                    console.warn("SlashMenu: Failed to adjust for containing block", error);
+                  }
+                }
+                const offsetX = isContextMenu ? CONTEXT_MENU_OFFSET_X : MENU_OFFSET_X;
+                const offsetY = isContextMenu ? CONTEXT_MENU_OFFSET_Y : MENU_OFFSET_Y;
+                const menuPosition = {
+                  left: `${left2 + offsetX}px`,
+                  top: `${top2 + offsetY}px`
+                };
+                const newState = {
+                  ...value,
+                  open: true,
+                  anchorPos: meta2.pos,
+                  menuPosition
+                };
+                editor.emit("slashMenu:open", { menuPosition });
+                return ensureStateShape(newState);
+              }
+              case "select": {
+                return ensureStateShape({ ...value, selected: meta2.id });
+              }
+              case "close": {
+                editor.emit("slashMenu:close");
+                return ensureStateShape({ ...value, open: false, anchorPos: null });
+              }
+              default:
+                return ensureStateShape({ ...value, disabled });
+            }
+          }
+        },
+        /**
+         * Create view plugin to handle window event listeners
+         * @param {import('prosemirror-view').EditorView} editorView - The ProseMirror editor view
+         * @returns {Object} View plugin with destroy method
+         */
+        view(editorView) {
+          const updatePosition2 = () => {
+            if (isMenuDisabled()) return;
+            const state = SlashMenuPluginKey.getState(editorView.state);
+            if (state.open) {
+              editorView.dispatch(
+                editorView.state.tr.setMeta(SlashMenuPluginKey, {
+                  type: "updatePosition"
+                })
+              );
+            }
+          };
+          window.addEventListener("scroll", updatePosition2, true);
+          window.addEventListener("resize", updatePosition2);
+          return {
+            destroy() {
+              window.removeEventListener("scroll", updatePosition2, true);
+              window.removeEventListener("resize", updatePosition2);
+              if (slashCooldownTimeout) {
+                clearTimeout(slashCooldownTimeout);
+                slashCooldownTimeout = null;
+              }
+            }
+          };
+        },
+        props: {
+          /**
+           * Handle keyboard events to open/close the slash menu
+           * - '/': Opens menu at cursor if conditions are met (in paragraph, after space/start)
+           * - 'Escape' or 'ArrowLeft': Closes menu and restores cursor position
+           *
+           * @param {import('prosemirror-view').EditorView} view - The ProseMirror editor view
+           * @param {KeyboardEvent} event - The keyboard event
+           * @returns {boolean} True if the event was handled, false otherwise
+           */
+          handleKeyDown(view, event) {
+            if (isMenuDisabled()) {
+              return false;
+            }
+            const pluginState = this.getState(view.state);
+            if (event.key === "/" && slashCooldown) {
+              return false;
+            }
+            if (event.key === "/" && !pluginState.open) {
+              const { $cursor } = view.state.selection;
+              if (!$cursor) return false;
+              const isParagraph = $cursor.parent.type.name === "paragraph";
+              if (!isParagraph) return false;
+              const textBefore = $cursor.parent.textContent.slice(0, $cursor.parentOffset);
+              const isEmptyOrAfterSpace = !textBefore || textBefore.endsWith(" ");
+              if (!isEmptyOrAfterSpace) return false;
+              event.preventDefault();
+              slashCooldown = true;
+              if (slashCooldownTimeout) clearTimeout(slashCooldownTimeout);
+              slashCooldownTimeout = setTimeout(() => {
+                slashCooldown = false;
+                slashCooldownTimeout = null;
+              }, SLASH_COOLDOWN_MS);
+              view.dispatch(
+                view.state.tr.setMeta(SlashMenuPluginKey, {
+                  type: "open",
+                  pos: $cursor.pos
+                })
+              );
+              return true;
+            }
+            if (pluginState.open && (event.key === "Escape" || event.key === "ArrowLeft")) {
+              const { anchorPos } = pluginState;
+              view.dispatch(
+                view.state.tr.setMeta(SlashMenuPluginKey, {
+                  type: "close"
+                })
+              );
+              if (anchorPos !== null) {
+                const tr = view.state.tr.setSelection(
+                  view.state.selection.constructor.near(view.state.doc.resolve(anchorPos))
+                );
+                view.dispatch(tr);
+                view.focus();
+              }
+              return true;
+            }
+            return false;
+          }
+        }
+      });
+      return [slashMenuPlugin];
+    }
+  });
   let readFromCache;
   let addToCache;
   if (typeof WeakMap != "undefined") {
@@ -73133,21 +73437,21 @@ ${o}
 
 /* Structured content drag handle/label - positioned above */
 .superdoc-structured-content__label {
-  font-size: 10px;
+  font-size: 11px;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 2px;
   top: -19px;
   width: calc(100% - 4px);
-  max-width: 110px;
+  max-width: 130px;
   min-width: 0;
   height: 18px;
   padding: 0 4px;
   border: 1px solid #629be7;
   border-bottom: none;
   border-radius: 6px 6px 0 0;
-  background-color: #629be7dd;
+  background-color: #629be7ee;
   box-sizing: border-box;
   z-index: 10;
   display: none;
@@ -73161,7 +73465,9 @@ ${o}
   text-overflow: ellipsis;
 }
 
-.superdoc-structured-content-block:hover .superdoc-structured-content__label {
+/* Hover effect for block structured content (via event delegation class).
+ * Shows label on hover — border reveal is handled by the lock-mode hover rule below. */
+.superdoc-structured-content-block.sdt-hover .superdoc-structured-content__label {
   display: inline-flex;
 }
 
@@ -73190,6 +73496,13 @@ ${o}
   border-bottom: none;
 }
 
+/* Collapse double borders between adjacent SDT blocks */
+.superdoc-structured-content-block + .superdoc-structured-content-block {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 /* Structured Content Inline - Inline wrapper with blue border */
 .superdoc-structured-content-inline {
   padding: 1px;
@@ -73201,21 +73514,15 @@ ${o}
   z-index: 10;
 }
 
-/* Hover effect for inline structured content */
-.superdoc-structured-content-inline:hover {
-  background-color: rgba(98, 155, 231, 0.15);
-  border-color: #4a8ad9;
-}
-
 /* Inline structured content label - shown on hover */
 .superdoc-structured-content-inline__label {
   position: absolute;
   bottom: calc(100% + 2px);
   left: 50%;
   transform: translateX(-50%);
-  font-size: 10px;
-  padding: 2px 6px;
-  background-color: #629be7dd;
+  font-size: 11px;
+  padding: 0 4px;
+  background-color: #629be7ee;
   color: white;
   border-radius: 4px;
   white-space: nowrap;
@@ -73228,6 +73535,17 @@ ${o}
   display: block;
 }
 
+/* Hover highlight for SDT containers.
+ * Blue border is always visible (set in base rules above).
+ * Hover adds background highlight and z-index boost.
+ * Block SDTs use .sdt-hover class (event delegation for multi-fragment coordination).
+ * Inline SDTs use :hover (single element, no coordination needed). */
+.superdoc-structured-content-block[data-lock-mode].sdt-hover,
+.superdoc-structured-content-inline[data-lock-mode]:hover {
+  background-color: rgba(98, 155, 231, 0.08);
+  z-index: 9999999;
+}
+
 /* Viewing mode: remove structured content affordances */
 .presentation-editor--viewing .superdoc-structured-content-block,
 .presentation-editor--viewing .superdoc-structured-content-inline {
@@ -73273,7 +73591,7 @@ ${o}
 .superdoc-layout .annotation *::selection {
   background: transparent;
 }
-  
+
 .superdoc-layout .annotation::-moz-selection,
 .superdoc-layout .annotation *::-moz-selection  {
   background: transparent;
@@ -73425,7 +73743,16 @@ ${o}
      * within this wrapper should be used for character-level positioning, not the
      * wrapper itself.
      */
-    INLINE_SDT_WRAPPER: "superdoc-structured-content-inline"
+    INLINE_SDT_WRAPPER: "superdoc-structured-content-inline",
+    /**
+     * Class name for block-level structured content containers.
+     */
+    BLOCK_SDT: "superdoc-structured-content-block",
+    /**
+     * Class name added to block SDT fragments on hover via event delegation.
+     * Applied/removed by SdtGroupedHover to highlight all fragments of the same SDT.
+     */
+    SDT_HOVER: "sdt-hover"
   };
   var define_process_default$8 = { env: {} };
   const DEFAULT_ALLOWED_PROTOCOLS = ["http", "https", "mailto", "tel", "sms"];
@@ -73831,6 +74158,11 @@ ${o}
     container.dataset.sdtContainerStart = String(isStart);
     container.dataset.sdtContainerEnd = String(isEnd);
     container.style.overflow = "visible";
+    if (isStructuredContentMetadata(sdt)) {
+      container.dataset.lockMode = sdt.lockMode || "unlocked";
+    } else if (isStructuredContentMetadata(containerSdt)) {
+      container.dataset.lockMode = containerSdt.lockMode || "unlocked";
+    }
     if (boundaryOptions?.widthOverride != null) {
       container.style.width = `${boundaryOptions.widthOverride}px`;
     }
@@ -73843,6 +74175,19 @@ ${o}
       container.appendChild(labelEl);
     }
   }
+  function shouldRebuildForSdtBoundary(element2, boundary) {
+    if (!boundary) {
+      return element2.dataset.sdtContainerStart !== void 0;
+    }
+    const startAttr = element2.dataset.sdtContainerStart;
+    const endAttr = element2.dataset.sdtContainerEnd;
+    const expectedStart = String(boundary.isStart ?? true);
+    const expectedEnd = String(boundary.isEnd ?? true);
+    if (startAttr === void 0 || endAttr === void 0) {
+      return true;
+    }
+    return startAttr !== expectedStart || endAttr !== expectedEnd;
+  }
   const TWIPS_PER_INCH$4 = 1440;
   const PX_PER_INCH$3 = 96;
   const PX_PER_PT = 96 / 72;
@@ -75322,6 +75667,65 @@ ${o}
     const hasPmEnd = fragment.pmEnd != null;
     globalValidationStats.record(hasPmStart, hasPmEnd);
   }
+  const SDT_BLOCK_SELECTOR = `.${DOM_CLASS_NAMES.BLOCK_SDT}[data-sdt-id]`;
+  const HOVER_CLASS = DOM_CLASS_NAMES.SDT_HOVER;
+  function sdtElementsById(root2, sdtId) {
+    return root2.querySelectorAll(`.${DOM_CLASS_NAMES.BLOCK_SDT}[data-sdt-id="${sdtId}"]`);
+  }
+  class SdtGroupedHover {
+    constructor() {
+      this.hoveredSdtId = null;
+      this.mount = null;
+      this.onMouseOver = null;
+      this.onMouseLeave = null;
+    }
+    /** Attach hover listeners to the mount element. Safe to call again on remount. */
+    bind(mount2) {
+      this.destroy();
+      this.mount = mount2;
+      this.onMouseOver = (e) => {
+        const target = e.target.closest?.(SDT_BLOCK_SELECTOR);
+        const sdtId = target?.dataset.sdtId ?? null;
+        if (sdtId === this.hoveredSdtId) return;
+        if (this.hoveredSdtId) {
+          sdtElementsById(mount2, this.hoveredSdtId).forEach((el) => el.classList.remove(HOVER_CLASS));
+        }
+        this.hoveredSdtId = sdtId;
+        if (sdtId) {
+          sdtElementsById(mount2, sdtId).forEach((el) => el.classList.add(HOVER_CLASS));
+        }
+      };
+      this.onMouseLeave = () => {
+        if (this.hoveredSdtId) {
+          sdtElementsById(mount2, this.hoveredSdtId).forEach((el) => el.classList.remove(HOVER_CLASS));
+          this.hoveredSdtId = null;
+        }
+      };
+      mount2.addEventListener("mouseover", this.onMouseOver);
+      mount2.addEventListener("mouseleave", this.onMouseLeave);
+    }
+    /** Re-apply hover class after render. New/rebuilt elements lose the class. */
+    reapply() {
+      if (this.hoveredSdtId && this.mount) {
+        sdtElementsById(this.mount, this.hoveredSdtId).forEach((el) => el.classList.add(HOVER_CLASS));
+      }
+    }
+    /** Remove listeners and reset state. */
+    destroy() {
+      if (this.mount) {
+        if (this.onMouseOver) {
+          this.mount.removeEventListener("mouseover", this.onMouseOver);
+        }
+        if (this.onMouseLeave) {
+          this.mount.removeEventListener("mouseleave", this.onMouseLeave);
+        }
+      }
+      this.mount = null;
+      this.onMouseOver = null;
+      this.onMouseLeave = null;
+      this.hoveredSdtId = null;
+    }
+  }
   const DEFAULT_PPI = 96;
   const DEFAULT_RULER_HEIGHT = 25;
   const TICK_SPACING_PX = DEFAULT_PPI / 8;
@@ -76030,6 +76434,7 @@ ${o}
       this.onScrollHandler = null;
       this.onWindowScrollHandler = null;
       this.onResizeHandler = null;
+      this.sdtHover = new SdtGroupedHover();
       this.activeCommentId = null;
       this.options = options;
       this.layoutMode = options.layoutMode ?? "vertical";
@@ -76295,6 +76700,7 @@ ${o}
         };
         win.addEventListener("resize", this.onResizeHandler);
       }
+      this.sdtHover.bind(mount2);
     }
     computeVirtualMetrics() {
       if (!this.currentLayout) return;
@@ -76437,6 +76843,7 @@ ${o}
       }
       this.changedBlocks.clear();
       this.processedLayoutVersion = this.layoutVersion;
+      this.sdtHover.reapply();
     }
     updateSpacers(start2, end2) {
       if (!this.topSpacerEl || !this.bottomSpacerEl) return;
@@ -76721,6 +77128,7 @@ ${o}
       this.onScrollHandler = null;
       this.onWindowScrollHandler = null;
       this.onResizeHandler = null;
+      this.sdtHover.destroy();
       this.layoutVersion = 0;
       this.processedLayoutVersion = -1;
     }
@@ -76782,7 +77190,9 @@ ${o}
         if (current) {
           existing.delete(key2);
           const sdtBoundaryMismatch = shouldRebuildForSdtBoundary(current.element, sdtBoundary);
-          const needsRebuild = this.changedBlocks.has(fragment.blockId) || current.signature !== fragmentSignature(fragment, this.blockLookup) || sdtBoundaryMismatch;
+          const newPmStart = fragment.pmStart;
+          const mappingUnreliable = this.currentMapping != null && newPmStart != null && current.element.dataset.pmStart != null && this.currentMapping.map(Number(current.element.dataset.pmStart)) !== newPmStart;
+          const needsRebuild = this.changedBlocks.has(fragment.blockId) || current.signature !== fragmentSignature(fragment, this.blockLookup) || sdtBoundaryMismatch || mappingUnreliable;
           if (needsRebuild) {
             const replacement = this.renderFragment(fragment, contextBase, sdtBoundary);
             pageEl.replaceChild(replacement, current.element);
@@ -78868,6 +79278,43 @@ ${o}
           }
           return void 0;
         };
+        let geoSdtWrapper = null;
+        let geoSdtId = null;
+        let geoSdtWrapperLeft = 0;
+        let geoSdtMaxRight = 0;
+        const closeGeoSdtWrapper = () => {
+          if (geoSdtWrapper) {
+            geoSdtWrapper.style.width = `${geoSdtMaxRight - geoSdtWrapperLeft}px`;
+            el.appendChild(geoSdtWrapper);
+            geoSdtWrapper = null;
+            geoSdtId = null;
+          }
+        };
+        const appendToLineGeo = (elem, runForSdt, elemLeftPx, elemWidthPx) => {
+          const resolved = this.resolveRunSdtId(runForSdt);
+          const thisRunSdtId = resolved?.sdtId ?? null;
+          if (thisRunSdtId !== geoSdtId) {
+            closeGeoSdtWrapper();
+          }
+          if (resolved && this.doc) {
+            if (!geoSdtWrapper) {
+              geoSdtWrapper = this.createInlineSdtWrapper(resolved.sdt);
+              geoSdtId = thisRunSdtId;
+              geoSdtWrapperLeft = elemLeftPx;
+              geoSdtMaxRight = elemLeftPx;
+              geoSdtWrapper.style.position = "absolute";
+              geoSdtWrapper.style.left = `${elemLeftPx}px`;
+              geoSdtWrapper.style.top = "0px";
+              geoSdtWrapper.style.height = `${line.lineHeight}px`;
+            }
+            elem.style.left = `${elemLeftPx - geoSdtWrapperLeft}px`;
+            geoSdtMaxRight = Math.max(geoSdtMaxRight, elemLeftPx + elemWidthPx);
+            this.expandSdtWrapperPmRange(geoSdtWrapper, runForSdt.pmStart, runForSdt.pmEnd);
+            geoSdtWrapper.appendChild(elem);
+          } else {
+            el.appendChild(elem);
+          }
+        };
         for (let runIndex = line.fromRun; runIndex <= line.toRun; runIndex += 1) {
           const baseRun = block.runs[runIndex];
           if (!baseRun) continue;
@@ -78899,7 +79346,7 @@ ${o}
             if (baseRun.pmStart != null) tabEl.dataset.pmStart = String(baseRun.pmStart);
             if (baseRun.pmEnd != null) tabEl.dataset.pmEnd = String(baseRun.pmEnd);
             tabEl.dataset.layoutEpoch = String(this.layoutEpoch);
-            el.appendChild(tabEl);
+            appendToLineGeo(tabEl, baseRun, tabStartX + indentOffset, actualTabWidth);
             cumulativeX = tabEndX;
             continue;
           }
@@ -78915,7 +79362,7 @@ ${o}
               const segWidth = (runSegments2 && runSegments2[0]?.width !== void 0 ? runSegments2[0].width : elem.offsetWidth) ?? 0;
               elem.style.position = "absolute";
               elem.style.left = `${segX}px`;
-              el.appendChild(elem);
+              appendToLineGeo(elem, baseRun, segX, segWidth);
               cumulativeX = baseSegX + segWidth;
             }
             continue;
@@ -78938,7 +79385,7 @@ ${o}
               const segWidth = (runSegments2 && runSegments2[0]?.width !== void 0 ? runSegments2[0].width : 0) ?? 0;
               elem.style.position = "absolute";
               elem.style.left = `${segX}px`;
-              el.appendChild(elem);
+              appendToLineGeo(elem, baseRun, segX, segWidth);
               cumulativeX = baseSegX + segWidth;
             }
             continue;
@@ -78973,7 +79420,7 @@ ${o}
               const xPos = baseX + indentOffset;
               elem.style.position = "absolute";
               elem.style.left = `${xPos}px`;
-              el.appendChild(elem);
+              appendToLineGeo(elem, segmentRun, xPos, segment.width ?? 0);
               let width = segment.width ?? 0;
               if (width <= 0 && this.doc) {
                 const measureEl = elem.cloneNode(true);
@@ -78985,9 +79432,13 @@ ${o}
                 this.doc.body.removeChild(measureEl);
               }
               cumulativeX = baseX + width;
+              if (geoSdtWrapper) {
+                geoSdtMaxRight = Math.max(geoSdtMaxRight, xPos + width);
+              }
             }
           });
         }
+        closeGeoSdtWrapper();
       } else {
         let currentInlineSdtWrapper = null;
         let currentInlineSdtId = null;
@@ -78999,12 +79450,12 @@ ${o}
           }
         };
         runsForLine.forEach((run2) => {
-          const runSdt = run2.sdt;
-          const isInlineSdt = runSdt?.type === "structuredContent" && runSdt?.scope === "inline";
-          const runSdtId = isInlineSdt && runSdt?.id ? String(runSdt.id) : null;
+          const resolved = this.resolveRunSdtId(run2);
+          const runSdtId = resolved?.sdtId ?? null;
           if (runSdtId !== currentInlineSdtId) {
             closeCurrentWrapper();
           }
+          let elem = null;
           if (run2.kind === "tab") {
             const tabEl = this.doc.createElement("span");
             tabEl.classList.add("superdoc-tab");
@@ -79025,39 +79476,20 @@ ${o}
             if (run2.pmStart != null) tabEl.dataset.pmStart = String(run2.pmStart);
             if (run2.pmEnd != null) tabEl.dataset.pmEnd = String(run2.pmEnd);
             tabEl.dataset.layoutEpoch = String(this.layoutEpoch);
-            el.appendChild(tabEl);
-            return;
+            elem = tabEl;
+          } else {
+            elem = this.renderRun(run2, context, trackedConfig);
           }
-          const elem = this.renderRun(run2, context, trackedConfig);
           if (elem) {
             if (styleId) {
               elem.setAttribute("styleid", styleId);
             }
-            if (isInlineSdt && runSdtId && this.doc) {
+            if (resolved && this.doc) {
               if (!currentInlineSdtWrapper) {
-                currentInlineSdtWrapper = this.doc.createElement("span");
-                currentInlineSdtWrapper.className = DOM_CLASS_NAMES.INLINE_SDT_WRAPPER;
-                currentInlineSdtWrapper.dataset.layoutEpoch = String(this.layoutEpoch);
+                currentInlineSdtWrapper = this.createInlineSdtWrapper(resolved.sdt);
                 currentInlineSdtId = runSdtId;
-                this.applySdtDataset(currentInlineSdtWrapper, runSdt);
-                const alias = runSdt?.alias || "Inline content";
-                const labelEl = this.doc.createElement("span");
-                labelEl.className = `${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}__label`;
-                labelEl.textContent = alias;
-                currentInlineSdtWrapper.appendChild(labelEl);
-              }
-              const wrapperPmStart = currentInlineSdtWrapper.dataset.pmStart;
-              const wrapperPmEnd = currentInlineSdtWrapper.dataset.pmEnd;
-              if (run2.pmStart != null) {
-                if (!wrapperPmStart || run2.pmStart < parseInt(wrapperPmStart, 10)) {
-                  currentInlineSdtWrapper.dataset.pmStart = String(run2.pmStart);
-                }
-              }
-              if (run2.pmEnd != null) {
-                if (!wrapperPmEnd || run2.pmEnd > parseInt(wrapperPmEnd, 10)) {
-                  currentInlineSdtWrapper.dataset.pmEnd = String(run2.pmEnd);
-                }
               }
+              this.expandSdtWrapperPmRange(currentInlineSdtWrapper, run2.pmStart, run2.pmEnd);
               currentInlineSdtWrapper.appendChild(elem);
             } else {
               el.appendChild(elem);
@@ -79234,6 +79666,7 @@ ${o}
         "sdtScope",
         "sdtTag",
         "sdtAlias",
+        "lockMode",
         "sdtSectionTitle",
         "sdtSectionType",
         "sdtSectionLocked",
@@ -79258,6 +79691,49 @@ ${o}
         el.dataset[key2] = String(value);
       }
     }
+    /**
+     * Resolve the inline SDT id from a run, or null if the run is not inside an inline SDT.
+     */
+    resolveRunSdtId(run2) {
+      const sdt = run2.sdt;
+      if (sdt?.type === "structuredContent" && sdt?.scope === "inline" && sdt?.id) {
+        return { sdtId: String(sdt.id), sdt };
+      }
+      return null;
+    }
+    /**
+     * Create an inline SDT wrapper `<span>` with className, layoutEpoch, dataset, and label.
+     * Shared by both the geometry and run-based rendering paths.
+     */
+    createInlineSdtWrapper(sdt) {
+      const wrapper = this.doc.createElement("span");
+      wrapper.className = DOM_CLASS_NAMES.INLINE_SDT_WRAPPER;
+      wrapper.dataset.layoutEpoch = String(this.layoutEpoch);
+      this.applySdtDataset(wrapper, sdt);
+      const alias = sdt?.alias || "Inline content";
+      const labelEl = this.doc.createElement("span");
+      labelEl.className = `${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}__label`;
+      labelEl.textContent = alias;
+      wrapper.appendChild(labelEl);
+      return wrapper;
+    }
+    /**
+     * Expand the PM position range tracked on an SDT wrapper to include a new run's range.
+     */
+    expandSdtWrapperPmRange(wrapper, pmStart, pmEnd) {
+      if (pmStart != null) {
+        const cur = wrapper.dataset.pmStart;
+        if (!cur || pmStart < parseInt(cur, 10)) {
+          wrapper.dataset.pmStart = String(pmStart);
+        }
+      }
+      if (pmEnd != null) {
+        const cur = wrapper.dataset.pmEnd;
+        if (!cur || pmEnd > parseInt(cur, 10)) {
+          wrapper.dataset.pmEnd = String(pmEnd);
+        }
+      }
+    }
     /**
      * Applies SDT (Structured Document Tag) metadata to an element's dataset as data-sdt-* attributes.
      * Supports field annotations, structured content, document sections, and doc parts.
@@ -79285,6 +79761,7 @@ ${o}
         this.setDatasetString(el, "sdtScope", metadata.scope);
         this.setDatasetString(el, "sdtTag", metadata.tag);
         this.setDatasetString(el, "sdtAlias", metadata.alias);
+        this.setDatasetString(el, "lockMode", metadata.lockMode || "unlocked");
       } else if (metadata.type === "documentSection") {
         this.setDatasetString(el, "sdtSectionTitle", metadata.title);
         this.setDatasetString(el, "sdtSectionType", metadata.sectionType);
@@ -79373,17 +79850,6 @@ ${o}
     }
     return boundaries;
   };
-  const shouldRebuildForSdtBoundary = (element2, boundary) => {
-    if (!boundary) return false;
-    const startAttr = element2.dataset.sdtContainerStart;
-    const endAttr = element2.dataset.sdtContainerEnd;
-    const expectedStart = String(boundary.isStart ?? true);
-    const expectedEnd = String(boundary.isEnd ?? true);
-    if (startAttr === void 0 || endAttr === void 0) {
-      return true;
-    }
-    return startAttr !== expectedStart || endAttr !== expectedEnd;
-  };
   const fragmentKey = (fragment) => {
     if (fragment.kind === "para") {
       return `para:${fragment.blockId}:${fragment.fromLine}:${fragment.toLine}`;
@@ -88779,6 +89245,7 @@ ${o}
       id: toNullableString(attrs.id),
       tag: toOptionalString(attrs.tag),
       alias: toOptionalString(attrs.alias),
+      lockMode: attrs.lockMode,
       sdtPr: attrs.sdtPr
     };
   }
@@ -89603,7 +90070,8 @@ ${o}
     positions,
     tabOrdinal,
     paragraphAttrs,
-    inheritedMarks
+    inheritedMarks,
+    sdtMetadata
   }) {
     const pos = positions.get(node2);
     if (!pos) return null;
@@ -89619,6 +90087,9 @@ ${o}
       indent: indent2,
       leader: node2.attrs?.leader ?? null
     };
+    if (sdtMetadata) {
+      run2.sdt = sdtMetadata;
+    }
     const marks = [...node2.marks ?? [], ...inheritedMarks ?? []];
     if (marks.length > 0) {
       applyMarksToRun(run2, marks);
@@ -112184,7 +112655,8 @@ ${o}
       }
       const activeEditor = this.getActiveEditor();
       const hasFocus = activeEditor?.view?.hasFocus?.() ?? false;
-      if (!hasFocus) {
+      const slashMenuOpen = activeEditor?.state ? !!SlashMenuPluginKey.getState(activeEditor.state)?.open : false;
+      if (!hasFocus && !slashMenuOpen) {
         try {
           this.#clearSelectedFieldAnnotationClass();
           this.#localSelectionLayer.innerHTML = "";
@@ -114406,300 +114878,6 @@ ${o}
     });
     return { decorations };
   };
-  function getEditorSurfaceElement(editor) {
-    if (!editor) return null;
-    if (typeof editor.hitTest === "function" && editor.element instanceof HTMLElement) {
-      return editor.element;
-    }
-    return editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element ?? null;
-  }
-  function getSurfaceRelativePoint(editor, eventLocation = {}) {
-    const surface = getEditorSurfaceElement(editor);
-    if (!surface) return null;
-    const rect = surface.getBoundingClientRect();
-    let left2;
-    let top2;
-    if (typeof eventLocation.clientX === "number" && typeof eventLocation.clientY === "number") {
-      left2 = eventLocation.clientX - rect.left;
-      top2 = eventLocation.clientY - rect.top;
-    } else if (editor?.state?.selection) {
-      const selectionFrom = editor.state.selection.from;
-      const coords = editor.coordsAtPos?.(selectionFrom);
-      if (coords) {
-        left2 = coords.left - rect.left;
-        top2 = coords.top - rect.top;
-      }
-    }
-    if (!Number.isFinite(left2) || !Number.isFinite(top2)) {
-      return null;
-    }
-    return { left: left2, top: top2 };
-  }
-  function findContainingBlockAncestor(element2) {
-    if (!element2) return null;
-    let current = element2.parentElement;
-    while (current && current !== document.body && current !== document.documentElement) {
-      try {
-        const style2 = window.getComputedStyle(current);
-        const transform = style2.transform;
-        const filter = style2.filter;
-        const backdropFilter = style2.backdropFilter || style2.webkitBackdropFilter;
-        const perspective = style2.perspective;
-        const willChange = style2.willChange;
-        const contain = style2.contain;
-        if (transform && transform !== "none") {
-          return current;
-        }
-        if (filter && filter !== "none") {
-          return current;
-        }
-        if (backdropFilter && backdropFilter !== "none") {
-          return current;
-        }
-        if (perspective && perspective !== "none") {
-          return current;
-        }
-        if (willChange && willChange !== "auto") {
-          const values = willChange.split(",").map((v2) => v2.trim());
-          if (values.includes("transform") || values.includes("perspective")) {
-            return current;
-          }
-        }
-        if (contain && /paint|layout|strict|content/.test(contain)) {
-          return current;
-        }
-      } catch (error) {
-        console.warn("SlashMenu: Failed to get computed style for element", current, error);
-      }
-      current = current.parentElement;
-    }
-    return null;
-  }
-  const SlashMenuPluginKey = new PluginKey("slashMenu");
-  const MENU_OFFSET_X = 100;
-  const MENU_OFFSET_Y = 28;
-  const CONTEXT_MENU_OFFSET_X = 10;
-  const CONTEXT_MENU_OFFSET_Y = 10;
-  const SLASH_COOLDOWN_MS = 5e3;
-  const SlashMenu = Extension.create({
-    name: "slashMenu",
-    /**
-     * Initialize default options for the SlashMenu extension
-     * @returns {SlashMenuOptions} Empty options object (configuration is inherited from editor options)
-     */
-    addOptions() {
-      return {};
-    },
-    addPmPlugins() {
-      const editor = this.editor;
-      if (editor.options?.isHeadless) {
-        return [];
-      }
-      let slashCooldown = false;
-      let slashCooldownTimeout = null;
-      const isMenuDisabled = () => Boolean(editor.options?.disableContextMenu);
-      const ensureStateShape = (value = {}) => ({
-        open: false,
-        selected: null,
-        anchorPos: null,
-        menuPosition: null,
-        disabled: isMenuDisabled(),
-        ...value
-      });
-      const slashMenuPlugin = new Plugin({
-        key: SlashMenuPluginKey,
-        state: {
-          init: () => ensureStateShape(),
-          /**
-           * Apply transaction to update plugin state
-           * Handles state transitions based on transaction metadata:
-           * - 'open': Opens menu at specified position or cursor location
-           * - 'select': Updates the selected menu item
-           * - 'close': Closes the menu and clears anchor position
-           * - 'updatePosition': Triggers menu position recalculation (no-op in apply)
-           *
-           * @param {import('prosemirror-state').Transaction} tr - The transaction
-           * @param {SlashMenuState} value - Previous plugin state
-           * @returns {SlashMenuState} New plugin state
-           */
-          apply(tr, value) {
-            const meta2 = tr.getMeta(SlashMenuPluginKey);
-            const disabled = isMenuDisabled();
-            if (disabled) {
-              if (value.open) {
-                editor.emit("slashMenu:close");
-              }
-              return ensureStateShape({ disabled: true });
-            }
-            if (!meta2) {
-              if (value.disabled !== disabled) {
-                return ensureStateShape({ ...value, disabled });
-              }
-              return value;
-            }
-            switch (meta2.type) {
-              case "open": {
-                if (typeof meta2.pos !== "number" || meta2.pos < 0 || meta2.pos > tr.doc.content.size) {
-                  console.warn("SlashMenu: Invalid position", meta2.pos);
-                  return ensureStateShape(value);
-                }
-                let left2 = 0;
-                let top2 = 0;
-                let isContextMenu = false;
-                if (typeof meta2.clientX === "number" && typeof meta2.clientY === "number") {
-                  left2 = meta2.clientX;
-                  top2 = meta2.clientY;
-                  isContextMenu = true;
-                } else {
-                  const relativePoint = getSurfaceRelativePoint(editor, meta2);
-                  if (relativePoint) {
-                    const surface = editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element;
-                    if (surface) {
-                      try {
-                        const rect = surface.getBoundingClientRect();
-                        left2 = rect.left + relativePoint.left;
-                        top2 = rect.top + relativePoint.top;
-                      } catch (error) {
-                        console.warn("SlashMenu: Failed to get surface bounds", error);
-                        return ensureStateShape(value);
-                      }
-                    }
-                  }
-                }
-                const menuSurface = editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element;
-                const containingBlock = findContainingBlockAncestor(menuSurface);
-                if (containingBlock) {
-                  try {
-                    const cbRect = containingBlock.getBoundingClientRect();
-                    left2 -= cbRect.left;
-                    top2 -= cbRect.top;
-                    left2 += containingBlock.scrollLeft || 0;
-                    top2 += containingBlock.scrollTop || 0;
-                  } catch (error) {
-                    console.warn("SlashMenu: Failed to adjust for containing block", error);
-                  }
-                }
-                const offsetX = isContextMenu ? CONTEXT_MENU_OFFSET_X : MENU_OFFSET_X;
-                const offsetY = isContextMenu ? CONTEXT_MENU_OFFSET_Y : MENU_OFFSET_Y;
-                const menuPosition = {
-                  left: `${left2 + offsetX}px`,
-                  top: `${top2 + offsetY}px`
-                };
-                const newState = {
-                  ...value,
-                  open: true,
-                  anchorPos: meta2.pos,
-                  menuPosition
-                };
-                editor.emit("slashMenu:open", { menuPosition });
-                return ensureStateShape(newState);
-              }
-              case "select": {
-                return ensureStateShape({ ...value, selected: meta2.id });
-              }
-              case "close": {
-                editor.emit("slashMenu:close");
-                return ensureStateShape({ ...value, open: false, anchorPos: null });
-              }
-              default:
-                return ensureStateShape({ ...value, disabled });
-            }
-          }
-        },
-        /**
-         * Create view plugin to handle window event listeners
-         * @param {import('prosemirror-view').EditorView} editorView - The ProseMirror editor view
-         * @returns {Object} View plugin with destroy method
-         */
-        view(editorView) {
-          const updatePosition2 = () => {
-            if (isMenuDisabled()) return;
-            const state = SlashMenuPluginKey.getState(editorView.state);
-            if (state.open) {
-              editorView.dispatch(
-                editorView.state.tr.setMeta(SlashMenuPluginKey, {
-                  type: "updatePosition"
-                })
-              );
-            }
-          };
-          window.addEventListener("scroll", updatePosition2, true);
-          window.addEventListener("resize", updatePosition2);
-          return {
-            destroy() {
-              window.removeEventListener("scroll", updatePosition2, true);
-              window.removeEventListener("resize", updatePosition2);
-              if (slashCooldownTimeout) {
-                clearTimeout(slashCooldownTimeout);
-                slashCooldownTimeout = null;
-              }
-            }
-          };
-        },
-        props: {
-          /**
-           * Handle keyboard events to open/close the slash menu
-           * - '/': Opens menu at cursor if conditions are met (in paragraph, after space/start)
-           * - 'Escape' or 'ArrowLeft': Closes menu and restores cursor position
-           *
-           * @param {import('prosemirror-view').EditorView} view - The ProseMirror editor view
-           * @param {KeyboardEvent} event - The keyboard event
-           * @returns {boolean} True if the event was handled, false otherwise
-           */
-          handleKeyDown(view, event) {
-            if (isMenuDisabled()) {
-              return false;
-            }
-            const pluginState = this.getState(view.state);
-            if (event.key === "/" && slashCooldown) {
-              return false;
-            }
-            if (event.key === "/" && !pluginState.open) {
-              const { $cursor } = view.state.selection;
-              if (!$cursor) return false;
-              const isParagraph = $cursor.parent.type.name === "paragraph";
-              if (!isParagraph) return false;
-              const textBefore = $cursor.parent.textContent.slice(0, $cursor.parentOffset);
-              const isEmptyOrAfterSpace = !textBefore || textBefore.endsWith(" ");
-              if (!isEmptyOrAfterSpace) return false;
-              event.preventDefault();
-              slashCooldown = true;
-              if (slashCooldownTimeout) clearTimeout(slashCooldownTimeout);
-              slashCooldownTimeout = setTimeout(() => {
-                slashCooldown = false;
-                slashCooldownTimeout = null;
-              }, SLASH_COOLDOWN_MS);
-              view.dispatch(
-                view.state.tr.setMeta(SlashMenuPluginKey, {
-                  type: "open",
-                  pos: $cursor.pos
-                })
-              );
-              return true;
-            }
-            if (pluginState.open && (event.key === "Escape" || event.key === "ArrowLeft")) {
-              const { anchorPos } = pluginState;
-              view.dispatch(
-                view.state.tr.setMeta(SlashMenuPluginKey, {
-                  type: "close"
-                })
-              );
-              if (anchorPos !== null) {
-                const tr = view.state.tr.setSelection(
-                  view.state.selection.constructor.near(view.state.doc.resolve(anchorPos))
-                );
-                view.dispatch(tr);
-                view.focus();
-              }
-              return true;
-            }
-            return false;
-          }
-        }
-      });
-      return [slashMenuPlugin];
-    }
-  });
   class StructuredContentViewBase {
     node;
     view;
@@ -114839,6 +115017,20 @@ ${o}
       dragHandle.append(textElement);
       return dragHandle;
     }
+    isContentLocked() {
+      const lockMode = this.node.attrs.lockMode;
+      return lockMode === "contentLocked" || lockMode === "sdtContentLocked";
+    }
+    isSdtLocked() {
+      const lockMode = this.node.attrs.lockMode;
+      return lockMode === "sdtLocked" || lockMode === "sdtContentLocked";
+    }
+    updateContentEditability() {
+      if (this.dom) {
+        this.dom.classList.toggle("sd-structured-content--content-locked", this.isContentLocked());
+        this.dom.classList.toggle("sd-structured-content--sdt-locked", this.isSdtLocked());
+      }
+    }
     onDragStart(event) {
       const { view } = this.editor;
       const target = event.target;
@@ -114894,10 +115086,12 @@ ${o}
       element2.prepend(dragHandle);
       element2.addEventListener("dragstart", (e) => this.onDragStart(e));
       this.root = element2;
+      this.updateContentEditability();
     }
     updateView() {
       const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
       updateDOMAttributes(this.dom, { ...domAttrs });
+      this.updateContentEditability();
     }
     update(node2, decorations, innerDecorations) {
       const result = super.update(node2, decorations, innerDecorations);
@@ -114906,6 +115100,157 @@ ${o}
       return true;
     }
   }
+  const STRUCTURED_CONTENT_LOCK_KEY = new PluginKey("structuredContentLock");
+  function collectSDTNodes(doc2) {
+    const sdtNodes = [];
+    doc2.descendants((node2, pos) => {
+      if (node2.type.name === "structuredContent" || node2.type.name === "structuredContentBlock") {
+        sdtNodes.push({
+          type: node2.type.name,
+          lockMode: node2.attrs.lockMode,
+          pos,
+          end: pos + node2.nodeSize
+        });
+      }
+    });
+    return sdtNodes;
+  }
+  function checkLockViolation(sdtNodes, from2, to) {
+    for (const sdt of sdtNodes) {
+      const overlaps = from2 < sdt.end && to > sdt.pos;
+      if (!overlaps) continue;
+      const containsSDT = from2 <= sdt.pos && to >= sdt.end;
+      const insideSDT = from2 >= sdt.pos && to <= sdt.end;
+      const crossesStart = from2 < sdt.pos && to > sdt.pos && to < sdt.end;
+      const crossesEnd = from2 > sdt.pos && from2 < sdt.end && to > sdt.end;
+      const wouldDamageWrapper = containsSDT || crossesStart || crossesEnd;
+      const wouldModifyContent = insideSDT && !containsSDT;
+      const isSdtLocked = sdt.lockMode === "sdtLocked" || sdt.lockMode === "sdtContentLocked";
+      const isContentLocked = sdt.lockMode === "contentLocked" || sdt.lockMode === "sdtContentLocked";
+      if (isSdtLocked && wouldDamageWrapper) {
+        return { blocked: true, reason: `Cannot delete SDT wrapper (${sdt.lockMode})` };
+      }
+      if (isContentLocked && wouldModifyContent) {
+        return { blocked: true, reason: `Cannot modify content (${sdt.lockMode})` };
+      }
+    }
+    return { blocked: false };
+  }
+  function createStructuredContentLockPlugin() {
+    return new Plugin({
+      key: STRUCTURED_CONTENT_LOCK_KEY,
+      state: {
+        init(_2, editorState) {
+          return collectSDTNodes(editorState.doc);
+        },
+        apply(tr, cachedSDTNodes, _oldState, newState) {
+          if (!tr.docChanged) return cachedSDTNodes;
+          return collectSDTNodes(newState.doc);
+        }
+      },
+      props: {
+        /**
+         * Intercept key events BEFORE any transaction is created.
+         * This prevents the browser selection from getting out of sync.
+         */
+        handleKeyDown(view, event) {
+          const { state } = view;
+          const { selection } = state;
+          const { from: from2, to } = selection;
+          const isDelete = event.key === "Delete";
+          const isBackspace = event.key === "Backspace";
+          const isCut = (event.metaKey || event.ctrlKey) && event.key === "x";
+          if (!isDelete && !isBackspace && !isCut) {
+            return false;
+          }
+          const sdtNodes = STRUCTURED_CONTENT_LOCK_KEY.getState(state);
+          if (sdtNodes.length === 0) {
+            return false;
+          }
+          let affectedFrom = from2;
+          let affectedTo = to;
+          if (from2 === to) {
+            if (isBackspace && from2 > 0) {
+              affectedFrom = from2 - 1;
+            } else if (isDelete && to < state.doc.content.size) {
+              affectedTo = to + 1;
+            }
+          }
+          const result = checkLockViolation(sdtNodes, affectedFrom, affectedTo);
+          if (result.blocked) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        /**
+         * Handle text input (typing) for content-locked nodes
+         */
+        handleTextInput(view, from2, to, _text) {
+          const sdtNodes = STRUCTURED_CONTENT_LOCK_KEY.getState(view.state);
+          if (sdtNodes.length === 0) {
+            return false;
+          }
+          const result = checkLockViolation(sdtNodes, from2, to);
+          if (result.blocked) {
+            return true;
+          }
+          return false;
+        }
+      },
+      /**
+       * Safety net: filter transactions that slip through
+       * (e.g., programmatic changes, paste, drag-drop)
+       */
+      filterTransaction(tr, state) {
+        if (!tr.docChanged) {
+          return true;
+        }
+        const sdtNodes = STRUCTURED_CONTENT_LOCK_KEY.getState(state);
+        if (sdtNodes.length === 0) {
+          return true;
+        }
+        for (const step of tr.steps) {
+          if (step.from === void 0 || step.to === void 0) {
+            continue;
+          }
+          const result = checkLockViolation(sdtNodes, step.from, step.to);
+          if (result.blocked) {
+            return false;
+          }
+        }
+        return true;
+      }
+    });
+  }
+  function createStructuredContentSelectPlugin() {
+    return new Plugin({
+      appendTransaction(transactions, oldState, newState) {
+        const { selection } = newState;
+        if (!selection.empty) return null;
+        if (oldState.selection.eq(newState.selection)) return null;
+        if (transactions.some((tr) => tr.docChanged)) return null;
+        const $pos = selection.$from;
+        for (let d2 = $pos.depth; d2 > 0; d2--) {
+          const node2 = $pos.node(d2);
+          if (node2.type.name === "structuredContent") {
+            const sdtStart = $pos.before(d2);
+            const contentFrom = $pos.start(d2);
+            const contentTo = $pos.end(d2);
+            if (contentFrom === contentTo) return null;
+            const old$pos = oldState.selection.$from;
+            for (let od = old$pos.depth; od > 0; od--) {
+              if (old$pos.node(od).type.name === "structuredContent" && old$pos.before(od) === sdtStart) {
+                return null;
+              }
+            }
+            return newState.tr.setSelection(TextSelection$1.create(newState.doc, contentFrom, contentTo));
+          }
+        }
+        return null;
+      }
+    });
+  }
   const structuredContentClass = "sd-structured-content";
   const structuredContentInnerClass = "sd-structured-content__content";
   const StructuredContent = Node$3.create({
@@ -114951,6 +115296,14 @@ ${o}
             return { "data-alias": attrs.alias };
           }
         },
+        lockMode: {
+          default: "unlocked",
+          parseDOM: (elem) => elem.getAttribute("data-lock-mode") || "unlocked",
+          renderDOM: (attrs) => {
+            if (!attrs.lockMode || attrs.lockMode === "unlocked") return {};
+            return { "data-lock-mode": attrs.lockMode };
+          }
+        },
         sdtPr: {
           rendered: false
         }
@@ -114968,6 +115321,9 @@ ${o}
         0
       ];
     },
+    addPmPlugins() {
+      return [createStructuredContentLockPlugin(), createStructuredContentSelectPlugin()];
+    },
     addNodeView() {
       return (props) => {
         return new StructuredContentInlineView({ ...props });
@@ -115002,10 +115358,12 @@ ${o}
       element2.prepend(dragHandle);
       element2.addEventListener("dragstart", (e) => this.onDragStart(e));
       this.root = element2;
+      this.updateContentEditability();
     }
     updateView() {
       const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
       updateDOMAttributes(this.dom, { ...domAttrs });
+      this.updateContentEditability();
     }
     update(node2, decorations, innerDecorations) {
       const result = super.update(node2, decorations, innerDecorations);
@@ -115058,6 +115416,14 @@ ${o}
             return { "data-alias": attrs.alias };
           }
         },
+        lockMode: {
+          default: "unlocked",
+          parseDOM: (elem) => elem.getAttribute("data-lock-mode") || "unlocked",
+          renderDOM: (attrs) => {
+            if (!attrs.lockMode || attrs.lockMode === "unlocked") return {};
+            return { "data-lock-mode": attrs.lockMode };
+          }
+        },
         sdtPr: {
           rendered: false
         }
@@ -134384,18 +134750,25 @@ ${o}
   };
   const _hoisted_4$9 = {
     key: 3,
-    class: "link-input-wrapper"
+    class: "link-title"
   };
-  const _hoisted_5$5 = { class: "input-row text-input-row" };
-  const _hoisted_6$3 = ["onKeydown"];
-  const _hoisted_7$3 = { class: "input-row url-input-row" };
-  const _hoisted_8$3 = ["innerHTML"];
-  const _hoisted_9$2 = ["onKeydown"];
-  const _hoisted_10$1 = ["innerHTML"];
-  const _hoisted_11$1 = { class: "input-row link-buttons" };
-  const _hoisted_12$1 = ["innerHTML"];
-  const _hoisted_13$1 = {
+  const _hoisted_5$5 = {
     key: 4,
+    class: "link-input-wrapper"
+  };
+  const _hoisted_6$3 = { class: "input-row text-input-row" };
+  const _hoisted_7$3 = ["readonly"];
+  const _hoisted_8$3 = { class: "input-row url-input-row" };
+  const _hoisted_9$2 = ["innerHTML"];
+  const _hoisted_10$1 = ["readonly", "onKeydown"];
+  const _hoisted_11$1 = ["innerHTML"];
+  const _hoisted_12$1 = {
+    key: 0,
+    class: "input-row link-buttons"
+  };
+  const _hoisted_13$1 = ["innerHTML"];
+  const _hoisted_14$1 = {
+    key: 5,
     class: "input-row go-to-anchor clickable"
   };
   const _sfc_main$D = {
@@ -134489,6 +134862,7 @@ ${o}
       });
       const isEditing = computed(() => !isAnchor.value && !!getLinkHrefAtSelection());
       const isDisabled2 = computed(() => !validUrl.value);
+      const isViewingMode = computed(() => props.editor?.options?.documentMode === "viewing");
       const openLink = () => {
         window.open(url.value, "_blank");
       };
@@ -134514,6 +134888,7 @@ ${o}
         if (props.showInput) focusInput();
       });
       const handleSubmit = () => {
+        if (isViewingMode.value) return;
         const editor = props.editor;
         if (!editor) return;
         if (!rawUrl.value) {
@@ -134544,36 +134919,38 @@ ${o}
         return openBlock(), createElementBlock("div", {
           class: normalizeClass(["link-input-ctn", { "high-contrast": unref(isHighContrastMode2) }])
         }, [
-          isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, "Page anchor")) : isEditing.value ? (openBlock(), createElementBlock("div", _hoisted_2$l, "Edit link")) : (openBlock(), createElementBlock("div", _hoisted_3$g, "Add link")),
-          __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
-            createBaseVNode("div", _hoisted_5$5, [
-              _cache[4] || (_cache[4] = createBaseVNode("div", { class: "input-icon text-input-icon" }, "T", -1)),
+          isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, "Page anchor")) : isViewingMode.value ? (openBlock(), createElementBlock("div", _hoisted_2$l, "Link details")) : isEditing.value ? (openBlock(), createElementBlock("div", _hoisted_3$g, "Edit link")) : (openBlock(), createElementBlock("div", _hoisted_4$9, "Add link")),
+          __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+            createBaseVNode("div", _hoisted_6$3, [
+              _cache[5] || (_cache[5] = createBaseVNode("div", { class: "input-icon text-input-icon" }, "T", -1)),
               withDirectives(createBaseVNode("input", {
                 type: "text",
                 name: "text",
                 placeholder: "Text",
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text2.value = $event),
-                onKeydown: withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"])
-              }, null, 40, _hoisted_6$3), [
+                readonly: isViewingMode.value,
+                onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => !isViewingMode.value && handleSubmit, ["stop", "prevent"]), ["enter"]))
+              }, null, 40, _hoisted_7$3), [
                 [vModelText, text2.value]
               ])
             ]),
-            createBaseVNode("div", _hoisted_7$3, [
+            createBaseVNode("div", _hoisted_8$3, [
               createBaseVNode("div", {
                 class: "input-icon",
                 innerHTML: unref(toolbarIcons).linkInput
-              }, null, 8, _hoisted_8$3),
+              }, null, 8, _hoisted_9$2),
               withDirectives(createBaseVNode("input", {
                 type: "text",
                 name: "link",
                 placeholder: "Type or paste a link",
                 class: normalizeClass({ error: urlError.value }),
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => rawUrl.value = $event),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rawUrl.value = $event),
+                readonly: isViewingMode.value,
                 onKeydown: [
                   withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"]),
-                  _cache[2] || (_cache[2] = ($event) => urlError.value = false)
+                  _cache[3] || (_cache[3] = ($event) => urlError.value = false)
                 ]
-              }, null, 42, _hoisted_9$2), [
+              }, null, 42, _hoisted_10$1), [
                 [vModelText, rawUrl.value]
               ]),
               createBaseVNode("div", {
@@ -134581,9 +134958,9 @@ ${o}
                 innerHTML: unref(toolbarIcons).openLink,
                 onClick: openLink,
                 "data-item": "btn-link-open"
-              }, null, 10, _hoisted_10$1)
+              }, null, 10, _hoisted_11$1)
             ]),
-            createBaseVNode("div", _hoisted_11$1, [
+            !isViewingMode.value ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
               isEditing.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 class: "remove-btn",
@@ -134593,25 +134970,25 @@ ${o}
                 createBaseVNode("div", {
                   class: "remove-btn__icon",
                   innerHTML: unref(toolbarIcons).removeLink
-                }, null, 8, _hoisted_12$1),
-                _cache[5] || (_cache[5] = createTextVNode(" Remove ", -1))
+                }, null, 8, _hoisted_13$1),
+                _cache[6] || (_cache[6] = createTextVNode(" Remove ", -1))
               ])) : createCommentVNode("", true),
               createBaseVNode("button", {
                 class: normalizeClass(["submit-btn", { "disable-btn": isDisabled2.value }]),
                 onClick: handleSubmit,
                 "data-item": "btn-link-apply"
               }, " Apply ", 2)
-            ])
-          ])) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
+            ])) : createCommentVNode("", true)
+          ])) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
             createBaseVNode("a", {
-              onClick: _cache[3] || (_cache[3] = withModifiers((...args) => __props.goToAnchor && __props.goToAnchor(...args), ["stop", "prevent"]))
+              onClick: _cache[4] || (_cache[4] = withModifiers((...args) => __props.goToAnchor && __props.goToAnchor(...args), ["stop", "prevent"]))
             }, "Go to " + toDisplayString(rawUrl.value.startsWith("#_") ? rawUrl.value.substring(2) : rawUrl.value), 1)
           ])) : createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-f64d35e8"]]);
+  const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-198fc596"]]);
   const _hoisted_1$x = ["aria-label", "onClick", "onKeydown"];
   const _hoisted_2$k = ["innerHTML"];
   const _hoisted_3$f = ["innerHTML"];
@@ -171448,7 +171825,7 @@ js: import "konva/skia-backend";
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "1.12.0-next.11";
+      this.version = "1.12.0-next.13";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;