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

package/dist/chunks/{index-C22k0MUW.es.js → index-C-t9SDCr.es.js}

@@ -1,4 +1,4 @@
-import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, F as Fragment, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as Plugin, j as PluginKey, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$2, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as replaceStep$1, y as canJoin, z as joinPoint, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName, O as TrackInsertMarkName, Q as TrackFormatMarkName, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as resolveParagraphProperties, a0 as resolveDocxFontFamily, a1 as _getReferencedTableStyles, a2 as resolveTableCellProperties, a3 as decodeRPrFromMarks, a4 as carbonCopy, a5 as calculateResolvedParagraphProperties, a6 as encodeCSSFromPPr, a7 as encodeCSSFromRPr, a8 as generateOrderedListIndex, a9 as docxNumberingHelpers, aa as InputRule, ab as insertNewRelationship, ac as kebabCase$1, ad as getUnderlineCssString, ae as handleClipboardPaste } from "./SuperConverter-Cyd0kGmJ.es.js";
+import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, F as Fragment, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as Plugin, j as PluginKey, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$2, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as replaceStep$1, y as canJoin, z as joinPoint, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName, O as TrackInsertMarkName, Q as TrackFormatMarkName, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as resolveParagraphProperties, a0 as resolveDocxFontFamily, a1 as _getReferencedTableStyles, a2 as resolveTableCellProperties, a3 as decodeRPrFromMarks, a4 as carbonCopy, a5 as calculateResolvedParagraphProperties, a6 as encodeCSSFromPPr, a7 as encodeCSSFromRPr, a8 as generateOrderedListIndex, a9 as docxNumberingHelpers, aa as InputRule, ab as insertNewRelationship, ac as kebabCase$1, ad as getUnderlineCssString, ae as handleClipboardPaste } from "./SuperConverter-Dx95dNlr.es.js";
 import { j as twipsToInches, m as inchesToTwips, p as ptToTwips, d as linesToTwips, f as twipsToLines, k as pixelsToTwips, z as resolveOpcTargetPath, B as Buffer$3, D as getArrayBufferFromUrl, h as halfPointToPoints, c as twipsToPixels$2, E as convertSizeToCSS, F as inchesToPixels } from "./helpers-BqdwtJE0.es.js";
 import { p as process$1$2, r as ref, b as computed, c as createElementBlock, F as Fragment$1, U as renderList, O as withModifiers, o as openBlock, Q as normalizeClass, M as toDisplayString, i as createCommentVNode, a as createBaseVNode, V as createApp, e as onMounted, f as onUnmounted, u as unref, S as withDirectives, Y as vModelText, D as nextTick, N as normalizeStyle, B as watch, Z as withKeys, _ as createTextVNode, g as createVNode, h as h$1, $ as readonly, E as getCurrentInstance, l as onBeforeUnmount, s as reactive, m as onBeforeMount, j as inject, a0 as onActivated, a1 as onDeactivated, a2 as Comment, d as defineComponent, k as provide, q as Teleport, t as toRef, a3 as renderSlot, a4 as isVNode, K as shallowRef, w as watchEffect, J as global$2, T as Transition, a5 as mergeProps, a6 as vShow, a7 as cloneVNode, a8 as Text$2, x as markRaw, P as createBlock, L as withCtx, a9 as useCssVars, W as resolveDynamicComponent, aa as normalizeProps, ab as guardReactiveProps } from "./vue-DiPLN5sT.es.js";
 import "./jszip.min-BCZQ7Wq2.es.js";
@@ -976,7 +976,7 @@ const DEFAULT_ENDPOINT = "https://ingest.superdoc.dev/v1/collect";
 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";
   }
@@ -17051,7 +17051,7 @@ const canUseDOM = () => {
     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) {
@@ -19465,8 +19465,7 @@ class Editor extends EventEmitter {
         "docProps/custom.xml": String(customXml),
         "word/_rels/document.xml.rels": String(rels),
         "word/numbering.xml": String(numbering),
-        // Replace & with & in styles.xml as DOCX viewers can't handle it
-        "word/styles.xml": String(styles).replace(/&/gi, "&"),
+        "word/styles.xml": String(styles),
         ...updatedHeadersFooters,
         ...coreXml ? { "docProps/core.xml": String(coreXml) } : {}
       };
@@ -19856,7 +19855,7 @@ class Editor extends EventEmitter {
    * 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");
@@ -20034,6 +20033,300 @@ class Editor extends EventEmitter {
     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(element) {
+  if (!element) return null;
+  let current = element.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((v) => v.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 meta = tr.getMeta(SlashMenuPluginKey);
+          const disabled = isMenuDisabled();
+          if (disabled) {
+            if (value.open) {
+              editor.emit("slashMenu:close");
+            }
+            return ensureStateShape({ disabled: true });
+          }
+          if (!meta) {
+            if (value.disabled !== disabled) {
+              return ensureStateShape({ ...value, disabled });
+            }
+            return value;
+          }
+          switch (meta.type) {
+            case "open": {
+              if (typeof meta.pos !== "number" || meta.pos < 0 || meta.pos > tr.doc.content.size) {
+                console.warn("SlashMenu: Invalid position", meta.pos);
+                return ensureStateShape(value);
+              }
+              let left2 = 0;
+              let top2 = 0;
+              let isContextMenu = false;
+              if (typeof meta.clientX === "number" && typeof meta.clientY === "number") {
+                left2 = meta.clientX;
+                top2 = meta.clientY;
+                isContextMenu = true;
+              } else {
+                const relativePoint = getSurfaceRelativePoint(editor, meta);
+                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: meta.pos,
+                menuPosition
+              };
+              editor.emit("slashMenu:open", { menuPosition });
+              return ensureStateShape(newState);
+            }
+            case "select": {
+              return ensureStateShape({ ...value, selected: meta.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") {
@@ -25067,21 +25360,21 @@ const SDT_CONTAINER_STYLES = `
 
 /* 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;
@@ -25095,7 +25388,9 @@ const SDT_CONTAINER_STYLES = `
   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;
 }
 
@@ -25124,6 +25419,13 @@ const SDT_CONTAINER_STYLES = `
   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;
@@ -25135,21 +25437,15 @@ const SDT_CONTAINER_STYLES = `
   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;
@@ -25162,6 +25458,17 @@ const SDT_CONTAINER_STYLES = `
   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 {
@@ -25207,7 +25514,7 @@ const FIELD_ANNOTATION_STYLES = `
 .superdoc-layout .annotation *::selection {
   background: transparent;
 }
-  
+
 .superdoc-layout .annotation::-moz-selection,
 .superdoc-layout .annotation *::-moz-selection  {
   background: transparent;
@@ -25359,7 +25666,16 @@ const DOM_CLASS_NAMES = {
    * 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"
 };
 const DEFAULT_ALLOWED_PROTOCOLS = ["http", "https", "mailto", "tel", "sms"];
 const OPTIONAL_PROTOCOLS = ["ftp", "sftp", "irc"];
@@ -25764,6 +26080,11 @@ function applySdtContainerStyling(doc2, container, sdt, containerSdt, boundaryOp
   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`;
   }
@@ -25776,6 +26097,19 @@ function applySdtContainerStyling(doc2, container, sdt, containerSdt, boundaryOp
     container.appendChild(labelEl);
   }
 }
+function shouldRebuildForSdtBoundary(element, boundary) {
+  if (!boundary) {
+    return element.dataset.sdtContainerStart !== void 0;
+  }
+  const startAttr = element.dataset.sdtContainerStart;
+  const endAttr = element.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;
@@ -27254,6 +27588,65 @@ function assertFragmentPmPositions(fragment, _context) {
   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;
@@ -27962,6 +28355,7 @@ class DomPainter {
     this.onScrollHandler = null;
     this.onWindowScrollHandler = null;
     this.onResizeHandler = null;
+    this.sdtHover = new SdtGroupedHover();
     this.activeCommentId = null;
     this.options = options;
     this.layoutMode = options.layoutMode ?? "vertical";
@@ -28227,6 +28621,7 @@ class DomPainter {
       };
       win.addEventListener("resize", this.onResizeHandler);
     }
+    this.sdtHover.bind(mount2);
   }
   computeVirtualMetrics() {
     if (!this.currentLayout) return;
@@ -28369,6 +28764,7 @@ class DomPainter {
     }
     this.changedBlocks.clear();
     this.processedLayoutVersion = this.layoutVersion;
+    this.sdtHover.reapply();
   }
   updateSpacers(start2, end2) {
     if (!this.topSpacerEl || !this.bottomSpacerEl) return;
@@ -28653,6 +29049,7 @@ class DomPainter {
     this.onScrollHandler = null;
     this.onWindowScrollHandler = null;
     this.onResizeHandler = null;
+    this.sdtHover.destroy();
     this.layoutVersion = 0;
     this.processedLayoutVersion = -1;
   }
@@ -28714,7 +29111,9 @@ class DomPainter {
       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);
@@ -30800,6 +31199,43 @@ class DomPainter {
         }
         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;
@@ -30831,7 +31267,7 @@ class DomPainter {
           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;
         }
@@ -30847,7 +31283,7 @@ class DomPainter {
             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;
@@ -30870,7 +31306,7 @@ class DomPainter {
             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;
@@ -30905,7 +31341,7 @@ class DomPainter {
             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);
@@ -30917,9 +31353,13 @@ class DomPainter {
               this.doc.body.removeChild(measureEl);
             }
             cumulativeX = baseX + width;
+            if (geoSdtWrapper) {
+              geoSdtMaxRight = Math.max(geoSdtMaxRight, xPos + width);
+            }
           }
         });
       }
+      closeGeoSdtWrapper();
     } else {
       let currentInlineSdtWrapper = null;
       let currentInlineSdtId = null;
@@ -30931,12 +31371,12 @@ class DomPainter {
         }
       };
       runsForLine.forEach((run) => {
-        const runSdt = run.sdt;
-        const isInlineSdt = runSdt?.type === "structuredContent" && runSdt?.scope === "inline";
-        const runSdtId = isInlineSdt && runSdt?.id ? String(runSdt.id) : null;
+        const resolved = this.resolveRunSdtId(run);
+        const runSdtId = resolved?.sdtId ?? null;
         if (runSdtId !== currentInlineSdtId) {
           closeCurrentWrapper();
         }
+        let elem = null;
         if (run.kind === "tab") {
           const tabEl = this.doc.createElement("span");
           tabEl.classList.add("superdoc-tab");
@@ -30957,39 +31397,20 @@ class DomPainter {
           if (run.pmStart != null) tabEl.dataset.pmStart = String(run.pmStart);
           if (run.pmEnd != null) tabEl.dataset.pmEnd = String(run.pmEnd);
           tabEl.dataset.layoutEpoch = String(this.layoutEpoch);
-          el.appendChild(tabEl);
-          return;
+          elem = tabEl;
+        } else {
+          elem = this.renderRun(run, context, trackedConfig);
         }
-        const elem = this.renderRun(run, 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 (run.pmStart != null) {
-              if (!wrapperPmStart || run.pmStart < parseInt(wrapperPmStart, 10)) {
-                currentInlineSdtWrapper.dataset.pmStart = String(run.pmStart);
-              }
-            }
-            if (run.pmEnd != null) {
-              if (!wrapperPmEnd || run.pmEnd > parseInt(wrapperPmEnd, 10)) {
-                currentInlineSdtWrapper.dataset.pmEnd = String(run.pmEnd);
-              }
             }
+            this.expandSdtWrapperPmRange(currentInlineSdtWrapper, run.pmStart, run.pmEnd);
             currentInlineSdtWrapper.appendChild(elem);
           } else {
             el.appendChild(elem);
@@ -31166,6 +31587,7 @@ class DomPainter {
       "sdtScope",
       "sdtTag",
       "sdtAlias",
+      "lockMode",
       "sdtSectionTitle",
       "sdtSectionType",
       "sdtSectionLocked",
@@ -31190,6 +31612,49 @@ class DomPainter {
       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(run) {
+    const sdt = run.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.
@@ -31217,6 +31682,7 @@ class DomPainter {
       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);
@@ -31305,17 +31771,6 @@ const computeSdtBoundaries = (fragments, blockLookup) => {
   }
   return boundaries;
 };
-const shouldRebuildForSdtBoundary = (element, boundary) => {
-  if (!boundary) return false;
-  const startAttr = element.dataset.sdtContainerStart;
-  const endAttr = element.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}`;
@@ -40760,6 +41215,7 @@ function normalizeStructuredContentMetadata(nodeType, attrs) {
     id: toNullableString(attrs.id),
     tag: toOptionalString(attrs.tag),
     alias: toOptionalString(attrs.alias),
+    lockMode: attrs.lockMode,
     sdtPr: attrs.sdtPr
   };
 }
@@ -41584,7 +42040,8 @@ function tabNodeToRun({
   positions,
   tabOrdinal,
   paragraphAttrs,
-  inheritedMarks
+  inheritedMarks,
+  sdtMetadata
 }) {
   const pos = positions.get(node);
   if (!pos) return null;
@@ -41600,6 +42057,9 @@ function tabNodeToRun({
     indent,
     leader: node.attrs?.leader ?? null
   };
+  if (sdtMetadata) {
+    run.sdt = sdtMetadata;
+  }
   const marks = [...node.marks ?? [], ...inheritedMarks ?? []];
   if (marks.length > 0) {
     applyMarksToRun(run, marks);
@@ -64184,7 +64644,8 @@ class PresentationEditor extends EventEmitter {
     }
     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 = "";
@@ -66421,300 +66882,6 @@ const processAiHighlights = (editor, doc2, highlightColor, customClass = null) =
   });
   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(element) {
-  if (!element) return null;
-  let current = element.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((v) => v.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 meta = tr.getMeta(SlashMenuPluginKey);
-          const disabled = isMenuDisabled();
-          if (disabled) {
-            if (value.open) {
-              editor.emit("slashMenu:close");
-            }
-            return ensureStateShape({ disabled: true });
-          }
-          if (!meta) {
-            if (value.disabled !== disabled) {
-              return ensureStateShape({ ...value, disabled });
-            }
-            return value;
-          }
-          switch (meta.type) {
-            case "open": {
-              if (typeof meta.pos !== "number" || meta.pos < 0 || meta.pos > tr.doc.content.size) {
-                console.warn("SlashMenu: Invalid position", meta.pos);
-                return ensureStateShape(value);
-              }
-              let left2 = 0;
-              let top2 = 0;
-              let isContextMenu = false;
-              if (typeof meta.clientX === "number" && typeof meta.clientY === "number") {
-                left2 = meta.clientX;
-                top2 = meta.clientY;
-                isContextMenu = true;
-              } else {
-                const relativePoint = getSurfaceRelativePoint(editor, meta);
-                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: meta.pos,
-                menuPosition
-              };
-              editor.emit("slashMenu:open", { menuPosition });
-              return ensureStateShape(newState);
-            }
-            case "select": {
-              return ensureStateShape({ ...value, selected: meta.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;
@@ -66854,6 +67021,20 @@ class StructuredContentViewBase {
     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;
@@ -66909,10 +67090,12 @@ class StructuredContentInlineView extends StructuredContentViewBase {
     element.prepend(dragHandle);
     element.addEventListener("dragstart", (e) => this.onDragStart(e));
     this.root = element;
+    this.updateContentEditability();
   }
   updateView() {
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
     updateDOMAttributes(this.dom, { ...domAttrs });
+    this.updateContentEditability();
   }
   update(node, decorations, innerDecorations) {
     const result = super.update(node, decorations, innerDecorations);
@@ -66921,6 +67104,157 @@ class StructuredContentInlineView extends StructuredContentViewBase {
     return true;
   }
 }
+const STRUCTURED_CONTENT_LOCK_KEY = new PluginKey("structuredContentLock");
+function collectSDTNodes(doc2) {
+  const sdtNodes = [];
+  doc2.descendants((node, pos) => {
+    if (node.type.name === "structuredContent" || node.type.name === "structuredContentBlock") {
+      sdtNodes.push({
+        type: node.type.name,
+        lockMode: node.attrs.lockMode,
+        pos,
+        end: pos + node.nodeSize
+      });
+    }
+  });
+  return sdtNodes;
+}
+function checkLockViolation(sdtNodes, from3, to) {
+  for (const sdt of sdtNodes) {
+    const overlaps = from3 < sdt.end && to > sdt.pos;
+    if (!overlaps) continue;
+    const containsSDT = from3 <= sdt.pos && to >= sdt.end;
+    const insideSDT = from3 >= sdt.pos && to <= sdt.end;
+    const crossesStart = from3 < sdt.pos && to > sdt.pos && to < sdt.end;
+    const crossesEnd = from3 > sdt.pos && from3 < 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: from3, 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 = from3;
+        let affectedTo = to;
+        if (from3 === to) {
+          if (isBackspace && from3 > 0) {
+            affectedFrom = from3 - 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, from3, to, _text) {
+        const sdtNodes = STRUCTURED_CONTENT_LOCK_KEY.getState(view.state);
+        if (sdtNodes.length === 0) {
+          return false;
+        }
+        const result = checkLockViolation(sdtNodes, from3, 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 d = $pos.depth; d > 0; d--) {
+        const node = $pos.node(d);
+        if (node.type.name === "structuredContent") {
+          const sdtStart = $pos.before(d);
+          const contentFrom = $pos.start(d);
+          const contentTo = $pos.end(d);
+          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$1.create({
@@ -66966,6 +67300,14 @@ const StructuredContent = Node$1.create({
           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
       }
@@ -66983,6 +67325,9 @@ const StructuredContent = Node$1.create({
       0
     ];
   },
+  addPmPlugins() {
+    return [createStructuredContentLockPlugin(), createStructuredContentSelectPlugin()];
+  },
   addNodeView() {
     return (props) => {
       return new StructuredContentInlineView({ ...props });
@@ -67017,10 +67362,12 @@ class StructuredContentBlockView extends StructuredContentViewBase {
     element.prepend(dragHandle);
     element.addEventListener("dragstart", (e) => this.onDragStart(e));
     this.root = element;
+    this.updateContentEditability();
   }
   updateView() {
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
     updateDOMAttributes(this.dom, { ...domAttrs });
+    this.updateContentEditability();
   }
   update(node, decorations, innerDecorations) {
     const result = super.update(node, decorations, innerDecorations);
@@ -67073,6 +67420,14 @@ const StructuredContentBlock = Node$1.create({
           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
       }
@@ -86349,18 +86704,25 @@ const _hoisted_3$8 = {
 };
 const _hoisted_4$4 = {
   key: 3,
-  class: "link-input-wrapper"
+  class: "link-title"
 };
-const _hoisted_5$2 = { class: "input-row text-input-row" };
-const _hoisted_6$1 = ["onKeydown"];
-const _hoisted_7$1 = { class: "input-row url-input-row" };
-const _hoisted_8$1 = ["innerHTML"];
-const _hoisted_9 = ["onKeydown"];
-const _hoisted_10 = ["innerHTML"];
-const _hoisted_11 = { class: "input-row link-buttons" };
-const _hoisted_12 = ["innerHTML"];
-const _hoisted_13 = {
+const _hoisted_5$2 = {
   key: 4,
+  class: "link-input-wrapper"
+};
+const _hoisted_6$1 = { class: "input-row text-input-row" };
+const _hoisted_7$1 = ["readonly"];
+const _hoisted_8$1 = { class: "input-row url-input-row" };
+const _hoisted_9 = ["innerHTML"];
+const _hoisted_10 = ["readonly", "onKeydown"];
+const _hoisted_11 = ["innerHTML"];
+const _hoisted_12 = {
+  key: 0,
+  class: "input-row link-buttons"
+};
+const _hoisted_13 = ["innerHTML"];
+const _hoisted_14 = {
+  key: 5,
   class: "input-row go-to-anchor clickable"
 };
 const _sfc_main$j = {
@@ -86454,6 +86816,7 @@ const _sfc_main$j = {
     });
     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");
     };
@@ -86479,6 +86842,7 @@ const _sfc_main$j = {
       if (props.showInput) focusInput();
     });
     const handleSubmit = () => {
+      if (isViewingMode.value) return;
       const editor = props.editor;
       if (!editor) return;
       if (!rawUrl.value) {
@@ -86509,36 +86873,38 @@ const _sfc_main$j = {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["link-input-ctn", { "high-contrast": unref(isHighContrastMode2) }])
       }, [
-        isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, "Page anchor")) : isEditing.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, "Edit link")) : (openBlock(), createElementBlock("div", _hoisted_3$8, "Add link")),
-        __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
-          createBaseVNode("div", _hoisted_5$2, [
-            _cache[4] || (_cache[4] = createBaseVNode("div", { class: "input-icon text-input-icon" }, "T", -1)),
+        isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, "Page anchor")) : isViewingMode.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, "Link details")) : isEditing.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, "Edit link")) : (openBlock(), createElementBlock("div", _hoisted_4$4, "Add link")),
+        __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+          createBaseVNode("div", _hoisted_6$1, [
+            _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) => text.value = $event),
-              onKeydown: withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"])
-            }, null, 40, _hoisted_6$1), [
+              readonly: isViewingMode.value,
+              onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => !isViewingMode.value && handleSubmit, ["stop", "prevent"]), ["enter"]))
+            }, null, 40, _hoisted_7$1), [
               [vModelText, text.value]
             ])
           ]),
-          createBaseVNode("div", _hoisted_7$1, [
+          createBaseVNode("div", _hoisted_8$1, [
             createBaseVNode("div", {
               class: "input-icon",
               innerHTML: unref(toolbarIcons).linkInput
-            }, null, 8, _hoisted_8$1),
+            }, null, 8, _hoisted_9),
             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), [
+            }, null, 42, _hoisted_10), [
               [vModelText, rawUrl.value]
             ]),
             createBaseVNode("div", {
@@ -86546,9 +86912,9 @@ const _sfc_main$j = {
               innerHTML: unref(toolbarIcons).openLink,
               onClick: openLink,
               "data-item": "btn-link-open"
-            }, null, 10, _hoisted_10)
+            }, null, 10, _hoisted_11)
           ]),
-          createBaseVNode("div", _hoisted_11, [
+          !isViewingMode.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
             isEditing.value ? (openBlock(), createElementBlock("button", {
               key: 0,
               class: "remove-btn",
@@ -86558,25 +86924,25 @@ const _sfc_main$j = {
               createBaseVNode("div", {
                 class: "remove-btn__icon",
                 innerHTML: unref(toolbarIcons).removeLink
-              }, null, 8, _hoisted_12),
-              _cache[5] || (_cache[5] = createTextVNode(" Remove ", -1))
+              }, null, 8, _hoisted_13),
+              _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, [
+          ])) : createCommentVNode("", true)
+        ])) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
           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$j, [["__scopeId", "data-v-f64d35e8"]]);
+const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-198fc596"]]);
 const _hoisted_1$f = ["aria-label", "onClick", "onKeydown"];
 const _hoisted_2$a = ["innerHTML"];
 const _hoisted_3$7 = ["innerHTML"];