@ni/spright-components 6.20.3 → 6.21.0

package/dist/all-components-bundle.js

@@ -10094,12 +10094,12 @@
   /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
   /*!
-  * tabbable 6.4.0
+  * tabbable 6.5.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
   */
   // NOTE: separate `:not()` selectors has broader browser support than the newer
   //  `:not([inert], [inert] *)` (Feb 2023)
-  var candidateSelectors = ['input:not([inert]):not([inert] *)', 'select:not([inert]):not([inert] *)', 'textarea:not([inert]):not([inert] *)', 'a[href]:not([inert]):not([inert] *)', 'button:not([inert]):not([inert] *)', '[tabindex]:not(slot):not([inert]):not([inert] *)', 'audio[controls]:not([inert]):not([inert] *)', 'video[controls]:not([inert]):not([inert] *)', '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', 'details>summary:first-of-type:not([inert]):not([inert] *)', 'details:not([inert]):not([inert] *)'];
+  var candidateSelectors = ['input:not([inert]):not([inert] *)', 'select:not([inert]):not([inert] *)', 'textarea:not([inert]):not([inert] *)', 'a[href]:not([inert]):not([inert] *)', 'area[href]:not([inert]):not([inert] *)', 'button:not([inert]):not([inert] *)', '[tabindex]:not(slot):not([inert]):not([inert] *)', 'audio[controls]:not([inert]):not([inert] *)', 'video[controls]:not([inert]):not([inert] *)', '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', 'details>summary:first-of-type:not([inert]):not([inert] *)', 'details:not([inert]):not([inert] *)'];
   var NoElement = typeof Element === 'undefined';
   var matches$1 = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
   var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
@@ -10204,7 +10204,9 @@
     //  (this is legacy behavior from a very long way back)
     // NOTE: we check this regardless of `displayCheck="none"` because this is a
     //  _visibility_ check, not a _display_ check
-    if (getComputedStyle(node).visibility === 'hidden') {
+    var _getComputedStyle = getComputedStyle(node),
+      visibility = _getComputedStyle.visibility;
+    if (visibility === 'hidden' || visibility === 'collapse') {
       return true;
     }
     var isDirectSummary = matches$1.call(node, 'details>summary:first-of-type');
@@ -28862,8 +28864,11 @@ so this becomes the fallback color for the slot */ ''}
           if (!childA.sameMarkup(childB))
               return pos;
           if (childA.isText && childA.text != childB.text) {
-              for (let j = 0; childA.text[j] == childB.text[j]; j++)
+              let tA = childA.text, tB = childB.text, j = 0;
+              for (; tA[j] == tB[j]; j++)
                   pos++;
+              if (j && j < tA.length && j < tB.length && surrogateHigh(tA.charCodeAt(j - 1)) && surrogateLow(tA.charCodeAt(j)))
+                  pos--;
               return pos;
           }
           if (childA.content.size || childB.content.size) {
@@ -28887,12 +28892,17 @@ so this becomes the fallback color for the slot */ ''}
           if (!childA.sameMarkup(childB))
               return { a: posA, b: posB };
           if (childA.isText && childA.text != childB.text) {
-              let same = 0, minSize = Math.min(childA.text.length, childB.text.length);
-              while (same < minSize && childA.text[childA.text.length - same - 1] == childB.text[childB.text.length - same - 1]) {
-                  same++;
+              let tA = childA.text, tB = childB.text, iA = tA.length, iB = tB.length;
+              while (iA > 0 && iB > 0 && tA[iA - 1] == tB[iB - 1]) {
+                  iA--;
+                  iB--;
                   posA--;
                   posB--;
               }
+              if (iA && iB && iA < tA.length && surrogateHigh(tA.charCodeAt(iA - 1)) && surrogateLow(tA.charCodeAt(iA))) {
+                  posA++;
+                  posB++;
+              }
               return { a: posA, b: posB };
           }
           if (childA.content.size || childB.content.size) {
@@ -28904,6 +28914,8 @@ so this becomes the fallback color for the slot */ ''}
           posB -= size;
       }
   }
+  function surrogateLow(ch) { return ch >= 0xDC00 && ch < 0xE000; }
+  function surrogateHigh(ch) { return ch >= 0xD800 && ch < 0xDC00; }
 
   /**
   A fragment represents a node's collection of child nodes.
@@ -29584,7 +29596,8 @@ so this becomes the fallback color for the slot */ ''}
           addNode($end.nodeBefore, target);
   }
   function close(node, content) {
-      node.type.checkContent(content);
+      if (!node.type.validContent(content))
+          throw new ReplaceError("Invalid content for node " + node.type.name);
       return node.copy(content);
   }
   function replaceThreeWay($from, $start, $end, $to, depth) {
@@ -30895,13 +30908,12 @@ so this becomes the fallback color for the slot */ ''}
       return built;
   }
   function checkAttrs(attrs, values, type, name) {
-      for (let name in values)
-          if (!(name in attrs))
-              throw new RangeError(`Unsupported attribute ${name} for ${type} of type ${name}`);
-      for (let name in attrs) {
-          let attr = attrs[name];
-          if (attr.validate)
-              attr.validate(values[name]);
+      for (let attr in values)
+          if (!(attr in attrs))
+              throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
+      for (let attr in attrs) {
+          if (attrs[attr].validate)
+              attrs[attr].validate(values[attr]);
       }
   }
   function initAttrs(typeName, attrs) {
@@ -38554,14 +38566,14 @@ so this becomes the fallback color for the slot */ ''}
       syncNodeSelection(view, sel);
       if (!editorOwnsSelection(view))
           return;
-      // The delayed drag selection causes issues with Cell Selections
-      // in Safari. And the drag selection delay is to workarond issues
-      // which only present in Chrome.
-      if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && chrome) {
+      // Need to delay selection normalization during a native selection
+      // drag on Chrome, or it will cause further dragging to glitch.
+      let mouseDown = view.input.mouseDown;
+      if (!force && chrome && mouseDown) {
           let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection;
           if (domSel.anchorNode && curSel.anchorNode &&
-              isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, curSel.anchorNode, curSel.anchorOffset)) {
-              view.input.mouseDown.delayedSelectionSync = true;
+              isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, curSel.anchorNode, curSel.anchorOffset) &&
+              mouseDown.delaySelUpdate()) {
               view.domObserver.setCurSelection();
               return;
           }
@@ -39413,6 +39425,8 @@ so this becomes the fallback color for the slot */ ''}
       view.input.lastSelectionTime = Date.now();
   }
   function destroyInput(view) {
+      if (view.input.mouseDown)
+          view.input.mouseDown.done();
       view.domObserver.stop();
       for (let type in view.input.eventHandlers)
           view.dom.removeEventListener(type, view.input.eventHandlers[type]);
@@ -39451,7 +39465,7 @@ so this becomes the fallback color for the slot */ ''}
   editHandlers.keydown = (view, _event) => {
       let event = _event;
       view.input.shiftKey = event.keyCode == 16 || event.shiftKey;
-      if (inOrNearComposition(view, event))
+      if (inOrNearComposition(view))
           return;
       view.input.lastKeyCode = event.keyCode;
       view.input.lastKeyCodeTime = Date.now();
@@ -39489,7 +39503,7 @@ so this becomes the fallback color for the slot */ ''}
   };
   editHandlers.keypress = (view, _event) => {
       let event = _event;
-      if (inOrNearComposition(view, event) || !event.charCode ||
+      if (inOrNearComposition(view) || !event.charCode ||
           event.ctrlKey && !event.altKey || mac$2 && event.metaKey)
           return;
       if (view.someProp("handleKeyPress", f => f(view, event))) {
@@ -39583,26 +39597,28 @@ so this becomes the fallback color for the slot */ ''}
   function defaultTripleClick(view, inside, event) {
       if (event.button != 0)
           return false;
-      let doc = view.state.doc;
-      if (inside == -1) {
-          if (doc.inlineContent) {
-              updateSelection(view, TextSelection.create(doc, 0, doc.content.size));
-              return true;
-          }
+      let selection = selectionForTripleClick(view, inside, true), doc = view.state.doc;
+      if (!selection)
           return false;
-      }
+      updateSelection(view, selection);
+      if (selection instanceof TextSelection && doc.eq(view.state.doc))
+          view.input.mouseDown = new TripleClickDrag(view, selection);
+      return true;
+  }
+  function selectionForTripleClick(view, inside, selectNodes) {
+      let doc = view.state.doc;
+      if (inside == -1)
+          return doc.inlineContent ? TextSelection.create(doc, 0, doc.content.size) : null;
       let $pos = doc.resolve(inside);
       for (let i = $pos.depth + 1; i > 0; i--) {
           let node = i > $pos.depth ? $pos.nodeAfter : $pos.node(i);
           let nodePos = $pos.before(i);
           if (node.inlineContent)
-              updateSelection(view, TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size));
-          else if (NodeSelection.isSelectable(node))
-              updateSelection(view, NodeSelection.create(doc, nodePos));
-          else
-              continue;
-          return true;
+              return TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size);
+          else if (selectNodes && NodeSelection.isSelectable(node))
+              return NodeSelection.create(doc, nodePos);
       }
+      return null;
   }
   function forceDOMFlush(view) {
       return endComposition(view);
@@ -39621,13 +39637,13 @@ so this becomes the fallback color for the slot */ ''}
               type = "tripleClick";
       }
       view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type, button: event.button };
+      if (view.input.mouseDown)
+          view.input.mouseDown.done();
       let pos = view.posAtCoords(eventCoords(event));
       if (!pos)
           return;
       if (type == "singleClick") {
-          if (view.input.mouseDown)
-              view.input.mouseDown.done();
-          view.input.mouseDown = new MouseDown(view, pos, event, !!flushed);
+          view.input.mouseDown = new LeftMouseDown(view, pos, event, !!flushed);
       }
       else if ((type == "doubleClick" ? handleDoubleClick : handleTripleClick)(view, pos.pos, pos.inside, event)) {
           event.preventDefault();
@@ -39637,13 +39653,34 @@ so this becomes the fallback color for the slot */ ''}
       }
   };
   class MouseDown {
-      constructor(view, pos, event, flushed) {
+      constructor(view) {
           this.view = view;
+          this.mightDrag = null;
+          view.root.addEventListener("mouseup", this.up = this.up.bind(this));
+          view.root.addEventListener("mousemove", this.move = this.move.bind(this));
+      }
+      up(event) {
+          this.done();
+      }
+      move(event) {
+          if (event.buttons == 0)
+              this.done();
+      }
+      done() {
+          this.view.root.removeEventListener("mouseup", this.up);
+          this.view.root.removeEventListener("mousemove", this.move);
+          if (this.view.input.mouseDown == this)
+              this.view.input.mouseDown = null;
+      }
+      delaySelUpdate() { return false; }
+  }
+  class LeftMouseDown extends MouseDown {
+      constructor(view, pos, event, flushed) {
+          super(view);
           this.pos = pos;
           this.event = event;
           this.flushed = flushed;
           this.delayedSelectionSync = false;
-          this.mightDrag = null;
           this.startDoc = view.state.doc;
           this.selectNode = !!event[selectNodeModifier];
           this.allowDefault = event.shiftKey;
@@ -39681,13 +39718,10 @@ so this becomes the fallback color for the slot */ ''}
                   }, 20);
               this.view.domObserver.start();
           }
-          view.root.addEventListener("mouseup", this.up = this.up.bind(this));
-          view.root.addEventListener("mousemove", this.move = this.move.bind(this));
           setSelectionOrigin(view, "pointer");
       }
       done() {
-          this.view.root.removeEventListener("mouseup", this.up);
-          this.view.root.removeEventListener("mousemove", this.move);
+          super.done();
           if (this.mightDrag && this.target) {
               this.view.domObserver.stop();
               if (this.mightDrag.addAttr)
@@ -39697,8 +39731,10 @@ so this becomes the fallback color for the slot */ ''}
               this.view.domObserver.start();
           }
           if (this.delayedSelectionSync)
-              setTimeout(() => selectionToDOM(this.view));
-          this.view.input.mouseDown = null;
+              setTimeout(() => {
+                  if (!this.view.isDestroyed)
+                      selectionToDOM(this.view);
+              });
       }
       up(event) {
           this.done();
@@ -39737,14 +39773,41 @@ so this becomes the fallback color for the slot */ ''}
       move(event) {
           this.updateAllowDefault(event);
           setSelectionOrigin(this.view, "pointer");
-          if (event.buttons == 0)
-              this.done();
+          super.move(event);
       }
       updateAllowDefault(event) {
           if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 ||
               Math.abs(this.event.y - event.clientY) > 4))
               this.allowDefault = true;
       }
+      delaySelUpdate() {
+          if (!this.allowDefault)
+              return false;
+          this.delayedSelectionSync = true;
+          return true;
+      }
+  }
+  class TripleClickDrag extends MouseDown {
+      constructor(view, startSelection) {
+          super(view);
+          this.startSelection = startSelection;
+          this.startDoc = view.state.doc;
+      }
+      move(event) {
+          if (event.buttons == 0 || this.view.isDestroyed || !this.view.state.doc.eq(this.startDoc)) {
+              this.done();
+              return;
+          }
+          event.preventDefault();
+          setSelectionOrigin(this.view, "pointer");
+          let pos = this.view.posAtCoords(eventCoords(event));
+          let target = pos && selectionForTripleClick(this.view, pos.inside, false);
+          if (!target)
+              return;
+          let { doc } = this.view.state, start = this.startSelection;
+          let [anchor, head] = target.from < start.from ? [start.to, target.from] : [start.from, target.to];
+          updateSelection(this.view, TextSelection.create(doc, anchor, head));
+      }
   }
   handlers.touchstart = view => {
       view.input.lastTouch = Date.now();
@@ -39769,7 +39832,7 @@ so this becomes the fallback color for the slot */ ''}
       // This guards against the case where compositionend is triggered without the keyboard
       // (e.g. character confirmation may be done with the mouse), and keydown is triggered
       // afterwards- we wouldn't want to ignore the keydown event in this case.
-      if (safari && Math.abs(event.timeStamp - view.input.compositionEndedAt) < 500) {
+      if (safari && Math.abs(Date.now() - view.input.compositionEndedAt) < 500) {
           view.input.compositionEndedAt = -2e8;
           return true;
       }
@@ -39828,7 +39891,7 @@ so this becomes the fallback color for the slot */ ''}
   editHandlers.compositionend = (view, event) => {
       if (view.composing) {
           view.input.composing = false;
-          view.input.compositionEndedAt = event.timeStamp;
+          view.input.compositionEndedAt = Date.now();
           view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
           view.input.compositionNode = null;
           if (view.input.badSafariComposition)
@@ -39847,7 +39910,7 @@ so this becomes the fallback color for the slot */ ''}
   function clearComposition(view) {
       if (view.composing) {
           view.input.composing = false;
-          view.input.compositionEndedAt = timestampFromCustomEvent();
+          view.input.compositionEndedAt = Date.now();
       }
       while (view.input.compositionNodes.length > 0)
           view.input.compositionNodes.pop().markParentsDirty();
@@ -39873,11 +39936,6 @@ so this becomes the fallback color for the slot */ ''}
       }
       return textBefore || textAfter;
   }
-  function timestampFromCustomEvent() {
-      let event = document.createEvent("Event");
-      event.initEvent("event", true, true);
-      return event.timeStamp;
-  }
   /**
   @internal
   */
@@ -41034,7 +41092,10 @@ so this becomes the fallback color for the slot */ ''}
                   }
               }
           }
-          if (added.some(n => n.nodeName == "BR") && (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
+          if (added.some(n => n.nodeName == "BR") &&
+              (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46 ||
+                  chrome && (view.composing || view.input.compositionEndedAt > Date.now() - 50) &&
+                      mutations.some(m => m.type == "childList" && m.removedNodes.length))) {
               // Browsers sometimes insert a bogus break node if you
               // backspace out the last bit of text before an inline-flex node (#1552)
               for (let node of added)
@@ -41590,38 +41651,28 @@ so this becomes the fallback color for the slot */ ''}
       return end;
   }
   function findDiff(a, b, pos, preferredPos, preferredSide) {
-      let start = a.findDiffStart(b, pos);
+      let start = a.findDiffStart(b, pos), lenA = pos + a.size, lenB = pos + b.size;
       if (start == null)
           return null;
-      let { a: endA, b: endB } = a.findDiffEnd(b, pos + a.size, pos + b.size);
+      let { a: endA, b: endB } = a.findDiffEnd(b, lenA, lenB);
       if (preferredSide == "end") {
           let adjust = Math.max(0, start - Math.min(endA, endB));
           preferredPos -= endA + adjust - start;
       }
-      if (endA < start && a.size < b.size) {
+      if (endA < start && lenA < lenB) {
           let move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
           start -= move;
-          if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1)))
-              start += move ? 1 : -1;
           endB = start + (endB - endA);
           endA = start;
       }
       else if (endB < start) {
           let move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
           start -= move;
-          if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1)))
-              start += move ? 1 : -1;
           endA = start + (endA - endB);
           endB = start;
       }
       return { start, endA, endB };
   }
-  function isSurrogatePair(str) {
-      if (str.length != 2)
-          return false;
-      let a = str.charCodeAt(0), b = str.charCodeAt(1);
-      return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF;
-  }
   /**
   An editor view manages the DOM structure that represents an
   editable document. Its state and behavior are determined by its
@@ -41813,9 +41864,10 @@ so this becomes the fallback color for the slot */ ''}
               // a DOM selection change and the "selectionchange" event for it
               // can cause a spurious DOM selection update, disrupting mouse
               // drag selection.
+              let mouseDown = this.input.mouseDown;
               if (forceSelUpdate ||
-                  !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
-                      anchorInRightPlace(this))) {
+                  !(mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
+                      anchorInRightPlace(this) && mouseDown.delaySelUpdate())) {
                   selectionToDOM(this, forceSelUpdate);
               }
               else {
@@ -42741,7 +42793,9 @@ so this becomes the fallback color for the slot */ ''}
   function getNodeType(nameOrType, schema) {
     if (typeof nameOrType === "string") {
       if (!schema.nodes[nameOrType]) {
-        throw Error(`There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`);
+        throw Error(
+          `There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`
+        );
       }
       return schema.nodes[nameOrType];
     }
@@ -42900,7 +42954,9 @@ so this becomes the fallback color for the slot */ ''}
   function getMarkType(nameOrType, schema) {
     if (typeof nameOrType === "string") {
       if (!schema.marks[nameOrType]) {
-        throw Error(`There is no mark type named '${nameOrType}'. Maybe you forgot to add the extension?`);
+        throw Error(
+          `There is no mark type named '${nameOrType}'. Maybe you forgot to add the extension?`
+        );
       }
       return schema.marks[nameOrType];
     }
@@ -42957,9 +43013,17 @@ so this becomes the fallback color for the slot */ ''}
     const minPos = selectionAtStart.from;
     const maxPos = selectionAtEnd.to;
     if (position === "all") {
-      return TextSelection.create(doc, minMax(0, minPos, maxPos), minMax(doc.content.size, minPos, maxPos));
+      return TextSelection.create(
+        doc,
+        minMax(0, minPos, maxPos),
+        minMax(doc.content.size, minPos, maxPos)
+      );
     }
-    return TextSelection.create(doc, minMax(position, minPos, maxPos), minMax(position, minPos, maxPos));
+    return TextSelection.create(
+      doc,
+      minMax(position, minPos, maxPos),
+      minMax(position, minPos, maxPos)
+    );
   }
 
   // src/utilities/isAndroid.ts
@@ -42969,7 +43033,9 @@ so this becomes the fallback color for the slot */ ''}
 
   // src/utilities/isiOS.ts
   function isiOS() {
-    return ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes(navigator.platform) || // iPad on iOS 13 detection
+    return ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes(
+      navigator.platform
+    ) || // iPad on iOS 13 detection
     navigator.userAgent.includes("Mac") && "ontouchend" in document;
   }
 
@@ -43032,7 +43098,11 @@ so this becomes the fallback color for the slot */ ''}
 
   // src/commands/insertContent.ts
   var insertContent = (value, options) => ({ tr, commands }) => {
-    return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value, options);
+    return commands.insertContentAt(
+      { from: tr.selection.from, to: tr.selection.to },
+      value,
+      options
+    );
   };
 
   // src/utilities/elementFromString.ts
@@ -43050,7 +43120,9 @@ so this becomes the fallback color for the slot */ ''}
   };
   function elementFromString(value) {
     if (typeof window === "undefined") {
-      throw new Error("[tiptap error]: there is no window object available, so this function cannot be used");
+      throw new Error(
+        "[tiptap error]: there is no window object available, so this function cannot be used"
+      );
     }
     const wrappedValue = `<body>${value}</body>`;
     const html = new window.DOMParser().parseFromString(wrappedValue, "text/html").body;
@@ -43115,9 +43187,15 @@ so this becomes the fallback color for the slot */ ''}
           })
         });
         if (options.slice) {
-          DOMParser.fromSchema(contentCheckSchema).parseSlice(elementFromString(content), options.parseOptions);
+          DOMParser.fromSchema(contentCheckSchema).parseSlice(
+            elementFromString(content),
+            options.parseOptions
+          );
         } else {
-          DOMParser.fromSchema(contentCheckSchema).parse(elementFromString(content), options.parseOptions);
+          DOMParser.fromSchema(contentCheckSchema).parse(
+            elementFromString(content),
+            options.parseOptions
+          );
         }
         if (options.errorOnInvalidContent && hasInvalidContent) {
           throw new Error("[tiptap error]: Invalid HTML content", {
@@ -43487,7 +43565,11 @@ so this becomes the fallback color for the slot */ ''}
             if (markType === mark.type) {
               canReset = true;
               if (dispatch) {
-                tr.addMark(pos, pos + node.nodeSize, markType.create(deleteProps(mark.attrs, attributes)));
+                tr.addMark(
+                  pos,
+                  pos + node.nodeSize,
+                  markType.create(deleteProps(mark.attrs, attributes))
+                );
               }
             }
           });
@@ -43656,7 +43738,11 @@ so this becomes the fallback color for the slot */ ''}
         options: extension.options,
         storage: extension.storage
       };
-      const addExtensions = getExtensionField(extension, "addExtensions", context);
+      const addExtensions = getExtensionField(
+        extension,
+        "addExtensions",
+        context
+      );
       if (addExtensions) {
         return [extension, ...flattenExtensions(addExtensions())];
       }
@@ -43694,7 +43780,9 @@ so this becomes the fallback color for the slot */ ''}
 
   // src/helpers/splitExtensions.ts
   function splitExtensions(extensions) {
-    const baseExtensions = extensions.filter((extension) => extension.type === "extension");
+    const baseExtensions = extensions.filter(
+      (extension) => extension.type === "extension"
+    );
     const nodeExtensions = extensions.filter((extension) => extension.type === "node");
     const markExtensions = extensions.filter((extension) => extension.type === "mark");
     return {
@@ -43770,11 +43858,7 @@ so this becomes the fallback color for the slot */ ''}
         options: extension.options,
         storage: extension.storage
       };
-      const addAttributes = getExtensionField(
-        extension,
-        "addAttributes",
-        context
-      );
+      const addAttributes = getExtensionField(extension, "addAttributes", context);
       if (!addAttributes) {
         return;
       }
@@ -43874,10 +43958,15 @@ so this becomes the fallback color for the slot */ ''}
         if (key === "class") {
           const valueClasses = value ? String(value).split(" ") : [];
           const existingClasses = mergedAttributes[key] ? mergedAttributes[key].split(" ") : [];
-          const insertClasses = valueClasses.filter((valueClass) => !existingClasses.includes(valueClass));
+          const insertClasses = valueClasses.filter(
+            (valueClass) => !existingClasses.includes(valueClass)
+          );
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(" ");
         } else if (key === "style") {
-          const styleMap = new Map([...parseStyleEntries(mergedAttributes[key]), ...parseStyleEntries(value)]);
+          const styleMap = new Map([
+            ...parseStyleEntries(mergedAttributes[key]),
+            ...parseStyleEntries(value)
+          ]);
           mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join("; ");
         } else {
           mergedAttributes[key] = value;
@@ -43973,7 +44062,9 @@ so this becomes the fallback color for the slot */ ''}
     const topNode = (_a = nodeExtensions.find((extension) => getExtensionField(extension, "topNode"))) == null ? void 0 : _a.name;
     const nodes = Object.fromEntries(
       nodeExtensions.map((extension) => {
-        const extensionAttributes = allAttributes.filter((attribute) => attribute.type === extension.name);
+        const extensionAttributes = allAttributes.filter(
+          (attribute) => attribute.type === extension.name
+        );
         const context = {
           name: extension.name,
           options: extension.options,
@@ -43981,7 +44072,11 @@ so this becomes the fallback color for the slot */ ''}
           editor
         };
         const extraNodeFields = extensions.reduce((fields, e) => {
-          const extendNodeSchema = getExtensionField(e, "extendNodeSchema", context);
+          const extendNodeSchema = getExtensionField(
+            e,
+            "extendNodeSchema",
+            context
+          );
           return {
             ...fields,
             ...extendNodeSchema ? extendNodeSchema(extension) : {}
@@ -43989,36 +44084,62 @@ so this becomes the fallback color for the slot */ ''}
         }, {});
         const schema = cleanUpSchemaItem({
           ...extraNodeFields,
-          content: callOrReturn(getExtensionField(extension, "content", context)),
+          content: callOrReturn(
+            getExtensionField(extension, "content", context)
+          ),
           marks: callOrReturn(getExtensionField(extension, "marks", context)),
           group: callOrReturn(getExtensionField(extension, "group", context)),
           inline: callOrReturn(getExtensionField(extension, "inline", context)),
           atom: callOrReturn(getExtensionField(extension, "atom", context)),
-          selectable: callOrReturn(getExtensionField(extension, "selectable", context)),
-          draggable: callOrReturn(getExtensionField(extension, "draggable", context)),
+          selectable: callOrReturn(
+            getExtensionField(extension, "selectable", context)
+          ),
+          draggable: callOrReturn(
+            getExtensionField(extension, "draggable", context)
+          ),
           code: callOrReturn(getExtensionField(extension, "code", context)),
-          whitespace: callOrReturn(getExtensionField(extension, "whitespace", context)),
+          whitespace: callOrReturn(
+            getExtensionField(extension, "whitespace", context)
+          ),
           linebreakReplacement: callOrReturn(
-            getExtensionField(extension, "linebreakReplacement", context)
+            getExtensionField(
+              extension,
+              "linebreakReplacement",
+              context
+            )
+          ),
+          defining: callOrReturn(
+            getExtensionField(extension, "defining", context)
+          ),
+          isolating: callOrReturn(
+            getExtensionField(extension, "isolating", context)
           ),
-          defining: callOrReturn(getExtensionField(extension, "defining", context)),
-          isolating: callOrReturn(getExtensionField(extension, "isolating", context)),
           attrs: Object.fromEntries(extensionAttributes.map(buildAttributeSpec))
         });
-        const parseHTML = callOrReturn(getExtensionField(extension, "parseHTML", context));
+        const parseHTML = callOrReturn(
+          getExtensionField(extension, "parseHTML", context)
+        );
         if (parseHTML) {
           schema.parseDOM = parseHTML.map(
             (parseRule) => injectExtensionAttributesToParseRule(parseRule, extensionAttributes)
           );
         }
-        const renderHTML = getExtensionField(extension, "renderHTML", context);
+        const renderHTML = getExtensionField(
+          extension,
+          "renderHTML",
+          context
+        );
         if (renderHTML) {
           schema.toDOM = (node) => renderHTML({
             node,
             HTMLAttributes: getRenderedAttributes(node, extensionAttributes)
           });
         }
-        const renderText = getExtensionField(extension, "renderText", context);
+        const renderText = getExtensionField(
+          extension,
+          "renderText",
+          context
+        );
         if (renderText) {
           schema.toText = renderText;
         }
@@ -44027,7 +44148,9 @@ so this becomes the fallback color for the slot */ ''}
     );
     const marks = Object.fromEntries(
       markExtensions.map((extension) => {
-        const extensionAttributes = allAttributes.filter((attribute) => attribute.type === extension.name);
+        const extensionAttributes = allAttributes.filter(
+          (attribute) => attribute.type === extension.name
+        );
         const context = {
           name: extension.name,
           options: extension.options,
@@ -44035,7 +44158,11 @@ so this becomes the fallback color for the slot */ ''}
           editor
         };
         const extraMarkFields = extensions.reduce((fields, e) => {
-          const extendMarkSchema = getExtensionField(e, "extendMarkSchema", context);
+          const extendMarkSchema = getExtensionField(
+            e,
+            "extendMarkSchema",
+            context
+          );
           return {
             ...fields,
             ...extendMarkSchema ? extendMarkSchema(extension) : {}
@@ -44043,20 +44170,32 @@ so this becomes the fallback color for the slot */ ''}
         }, {});
         const schema = cleanUpSchemaItem({
           ...extraMarkFields,
-          inclusive: callOrReturn(getExtensionField(extension, "inclusive", context)),
-          excludes: callOrReturn(getExtensionField(extension, "excludes", context)),
+          inclusive: callOrReturn(
+            getExtensionField(extension, "inclusive", context)
+          ),
+          excludes: callOrReturn(
+            getExtensionField(extension, "excludes", context)
+          ),
           group: callOrReturn(getExtensionField(extension, "group", context)),
-          spanning: callOrReturn(getExtensionField(extension, "spanning", context)),
+          spanning: callOrReturn(
+            getExtensionField(extension, "spanning", context)
+          ),
           code: callOrReturn(getExtensionField(extension, "code", context)),
           attrs: Object.fromEntries(extensionAttributes.map(buildAttributeSpec))
         });
-        const parseHTML = callOrReturn(getExtensionField(extension, "parseHTML", context));
+        const parseHTML = callOrReturn(
+          getExtensionField(extension, "parseHTML", context)
+        );
         if (parseHTML) {
           schema.parseDOM = parseHTML.map(
             (parseRule) => injectExtensionAttributesToParseRule(parseRule, extensionAttributes)
           );
         }
-        const renderHTML = getExtensionField(extension, "renderHTML", context);
+        const renderHTML = getExtensionField(
+          extension,
+          "renderHTML",
+          context
+        );
         if (renderHTML) {
           schema.toDOM = (mark) => renderHTML({
             mark,
@@ -44310,16 +44449,20 @@ so this becomes the fallback color for the slot */ ''}
   var getTextContentFromNodes = ($from, maxMatch = 500) => {
     let textBefore = "";
     const sliceEndPos = $from.parentOffset;
-    $from.parent.nodesBetween(Math.max(0, sliceEndPos - maxMatch), sliceEndPos, (node, pos, parent, index) => {
-      var _a, _b;
-      const chunk = ((_b = (_a = node.type.spec).toText) == null ? void 0 : _b.call(_a, {
-        node,
-        pos,
-        parent,
-        index
-      })) || node.textContent || "%leaf%";
-      textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
-    });
+    $from.parent.nodesBetween(
+      Math.max(0, sliceEndPos - maxMatch),
+      sliceEndPos,
+      (node, pos, parent, index) => {
+        var _a, _b;
+        const chunk = ((_b = (_a = node.type.spec).toText) == null ? void 0 : _b.call(_a, {
+          node,
+          pos,
+          parent,
+          index
+        })) || node.textContent || "%leaf%";
+        textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
+      }
+    );
     return textBefore;
   };
 
@@ -44690,7 +44833,11 @@ so this becomes the fallback color for the slot */ ''}
     const { selection, doc } = tr;
     const { $from, $to } = selection;
     const extensionAttributes = editor.extensionManager.attributes;
-    const newAttributes = getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs);
+    const newAttributes = getSplittedAttributes(
+      extensionAttributes,
+      $from.node().type.name,
+      $from.node().attrs
+    );
     if (selection instanceof NodeSelection && selection.node.isBlock) {
       if (!$from.parentOffset || !canSplit(doc, $from.pos)) {
         return false;
@@ -44769,7 +44916,7 @@ so this becomes the fallback color for the slot */ ''}
           wrap = Fragment.from($from.node(d).copy(wrap));
         }
         const depthAfter = (
-          // eslint-disable-next-line no-nested-ternary
+          // oxlint-disable-next-line no-nested-ternary
           $from.indexAfter(-1) < $from.node(-2).childCount ? 1 : $from.indexAfter(-2) < $from.node(-3).childCount ? 2 : 3
         );
         const newNextTypeAttributes2 = {
@@ -44998,15 +45145,22 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   // src/commands/unsetAllMarks.ts
-  var unsetAllMarks = () => ({ tr, dispatch }) => {
+  var unsetAllMarks = (options = {}) => ({ tr, dispatch, editor }) => {
+    const { ignoreClearable = false } = options;
     const { selection } = tr;
     const { empty, ranges } = selection;
     if (empty) {
       return true;
     }
+    const { nonClearableMarks } = editor.extensionManager;
     if (dispatch) {
+      const clearableMarkTypes = Object.values(editor.schema.marks).filter(
+        (markType) => ignoreClearable || !nonClearableMarks.includes(markType.name)
+      );
       ranges.forEach((range) => {
-        tr.removeMark(range.$from.pos, range.$to.pos);
+        for (const markType of clearableMarkTypes) {
+          tr.removeMark(range.$from.pos, range.$to.pos, markType);
+        }
       });
     }
     return true;
@@ -45241,7 +45395,9 @@ so this becomes the fallback color for the slot */ ''}
     result.data = inputRuleMatch.data;
     if (inputRuleMatch.replaceWith) {
       if (!inputRuleMatch.text.includes(inputRuleMatch.replaceWith)) {
-        console.warn('[tiptap warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".');
+        console.warn(
+          '[tiptap warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".'
+        );
       }
       result.push(inputRuleMatch.replaceWith);
     }
@@ -45449,7 +45605,7 @@ so this becomes the fallback color for the slot */ ''}
           getExtensionField(this, "addOptions", {
             name: this.name
           })
-        ) || {}
+        )
       };
     }
     get storage() {
@@ -45459,7 +45615,7 @@ so this becomes the fallback color for the slot */ ''}
             name: this.name,
             options: this.options
           })
-        ) || {}
+        )
       };
     }
     configure(options = {}) {
@@ -45553,7 +45709,9 @@ so this becomes the fallback color for the slot */ ''}
       result.data = pasteRuleMatch.data;
       if (pasteRuleMatch.replaceWith) {
         if (!pasteRuleMatch.text.includes(pasteRuleMatch.replaceWith)) {
-          console.warn('[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".');
+          console.warn(
+            '[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".'
+          );
         }
         result.push(pasteRuleMatch.replaceWith);
       }
@@ -45695,7 +45853,10 @@ so this becomes the fallback color for the slot */ ''}
                   setTimeout(() => {
                     const selection = dragFromOtherEditor.state.selection;
                     if (selection) {
-                      dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to });
+                      dragFromOtherEditor.commands.deleteRange({
+                        from: selection.from,
+                        to: selection.to
+                      });
                     }
                   }, 10);
                 }
@@ -45760,6 +45921,7 @@ so this becomes the fallback color for the slot */ ''}
   var ExtensionManager = class {
     constructor(extensions, editor) {
       this.splittableMarks = [];
+      this.nonClearableMarks = [];
       this.editor = editor;
       this.baseExtensions = extensions;
       this.extensions = resolveExtensions(extensions);
@@ -45779,7 +45941,11 @@ so this becomes the fallback color for the slot */ ''}
           editor: this.editor,
           type: getSchemaTypeByName(extension.name, this.schema)
         };
-        const addCommands = getExtensionField(extension, "addCommands", context);
+        const addCommands = getExtensionField(
+          extension,
+          "addCommands",
+          context
+        );
         if (!addCommands) {
           return commands;
         }
@@ -45824,7 +45990,11 @@ so this becomes the fallback color for the slot */ ''}
         }
         const keyMapPlugin = keymap(defaultBindings);
         plugins.push(keyMapPlugin);
-        const addInputRules = getExtensionField(extension, "addInputRules", context);
+        const addInputRules = getExtensionField(
+          extension,
+          "addInputRules",
+          context
+        );
         if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
           const rules = addInputRules();
           if (rules && rules.length) {
@@ -45836,7 +46006,11 @@ so this becomes the fallback color for the slot */ ''}
             plugins.push(...inputPlugins);
           }
         }
-        const addPasteRules = getExtensionField(extension, "addPasteRules", context);
+        const addPasteRules = getExtensionField(
+          extension,
+          "addPasteRules",
+          context
+        );
         if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
           const rules = addPasteRules();
           if (rules && rules.length) {
@@ -45873,7 +46047,9 @@ so this becomes the fallback color for the slot */ ''}
       const { nodeExtensions } = splitExtensions(this.extensions);
       return Object.fromEntries(
         nodeExtensions.filter((extension) => !!getExtensionField(extension, "addNodeView")).map((extension) => {
-          const extensionAttributes = this.attributes.filter((attribute) => attribute.type === extension.name);
+          const extensionAttributes = this.attributes.filter(
+            (attribute) => attribute.type === extension.name
+          );
           const context = {
             name: extension.name,
             options: extension.options,
@@ -45881,7 +46057,11 @@ so this becomes the fallback color for the slot */ ''}
             editor,
             type: getNodeType(extension.name, this.schema)
           };
-          const addNodeView = getExtensionField(extension, "addNodeView", context);
+          const addNodeView = getExtensionField(
+            extension,
+            "addNodeView",
+            context
+          );
           if (!addNodeView) {
             return [];
           }
@@ -45975,7 +46155,9 @@ so this becomes the fallback color for the slot */ ''}
       const { markExtensions } = splitExtensions(this.extensions);
       return Object.fromEntries(
         markExtensions.filter((extension) => !!getExtensionField(extension, "addMarkView")).map((extension) => {
-          const extensionAttributes = this.attributes.filter((attribute) => attribute.type === extension.name);
+          const extensionAttributes = this.attributes.filter(
+            (attribute) => attribute.type === extension.name
+          );
           const context = {
             name: extension.name,
             options: extension.options,
@@ -45983,7 +46165,11 @@ so this becomes the fallback color for the slot */ ''}
             editor,
             type: getMarkType(extension.name, this.schema)
           };
-          const addMarkView = getExtensionField(extension, "addMarkView", context);
+          const addMarkView = getExtensionField(
+            extension,
+            "addMarkView",
+            context
+          );
           if (!addMarkView) {
             return [];
           }
@@ -46047,7 +46233,7 @@ so this becomes the fallback color for the slot */ ''}
         extensions.map((extension) => [extension.name, extension.storage])
       );
       extensions.forEach((extension) => {
-        var _a;
+        var _a, _b;
         const context = {
           name: extension.name,
           options: extension.options,
@@ -46060,8 +46246,18 @@ so this becomes the fallback color for the slot */ ''}
           if (keepOnSplit) {
             this.splittableMarks.push(extension.name);
           }
+          const clearable = (_b = callOrReturn(
+            getExtensionField(extension, "clearable", context)
+          )) != null ? _b : true;
+          if (!clearable) {
+            this.nonClearableMarks.push(extension.name);
+          }
         }
-        const onBeforeCreate = getExtensionField(extension, "onBeforeCreate", context);
+        const onBeforeCreate = getExtensionField(
+          extension,
+          "onBeforeCreate",
+          context
+        );
         const onCreate = getExtensionField(extension, "onCreate", context);
         const onUpdate = getExtensionField(extension, "onUpdate", context);
         const onSelectionUpdate = getExtensionField(
@@ -46069,7 +46265,11 @@ so this becomes the fallback color for the slot */ ''}
           "onSelectionUpdate",
           context
         );
-        const onTransaction = getExtensionField(extension, "onTransaction", context);
+        const onTransaction = getExtensionField(
+          extension,
+          "onTransaction",
+          context
+        );
         const onFocus = getExtensionField(extension, "onFocus", context);
         const onBlur = getExtensionField(extension, "onBlur", context);
         const onDestroy = getExtensionField(extension, "onDestroy", context);
@@ -46160,15 +46360,16 @@ so this becomes the fallback color for the slot */ ''}
               const { editor } = this;
               const { state, schema } = editor;
               const { doc, selection } = state;
-              const { ranges } = selection;
-              const from = Math.min(...ranges.map((range2) => range2.$from.pos));
-              const to = Math.max(...ranges.map((range2) => range2.$to.pos));
               const textSerializers = getTextSerializersFromSchema(schema);
-              const range = { from, to };
-              return getTextBetween(doc, range, {
-                ...this.options.blockSeparator !== void 0 ? { blockSeparator: this.options.blockSeparator } : {},
+              const { blockSeparator } = this.options;
+              const options = {
+                ...blockSeparator !== void 0 ? { blockSeparator } : {},
                 textSerializers
-              });
+              };
+              const sortedRanges = [...selection.ranges].sort((a, b) => a.$from.pos - b.$from.pos);
+              return sortedRanges.map(
+                ({ $from, $to }) => getTextBetween(doc, { from: $from.pos, to: $to.pos }, options)
+              ).join(blockSeparator != null ? blockSeparator : "\n\n");
             }
           }
         })
@@ -46194,28 +46395,35 @@ so this becomes the fallback color for the slot */ ''}
         if ((_d = (_c2 = (_b2 = (_a2 = this.editor.options.coreExtensionOptions) == null ? void 0 : _a2.delete) == null ? void 0 : _b2.filterTransaction) == null ? void 0 : _c2.call(_b2, transaction)) != null ? _d : transaction.getMeta("y-sync$")) {
           return;
         }
-        const nextTransaction = combineTransactionSteps(transaction.before, [transaction, ...appendedTransactions]);
+        const nextTransaction = combineTransactionSteps(transaction.before, [
+          transaction,
+          ...appendedTransactions
+        ]);
         const changes = getChangedRanges(nextTransaction);
         changes.forEach((change) => {
           if (nextTransaction.mapping.mapResult(change.oldRange.from).deletedAfter && nextTransaction.mapping.mapResult(change.oldRange.to).deletedBefore) {
-            nextTransaction.before.nodesBetween(change.oldRange.from, change.oldRange.to, (node, from) => {
-              const to = from + node.nodeSize - 2;
-              const isFullyWithinRange = change.oldRange.from <= from && to <= change.oldRange.to;
-              this.editor.emit("delete", {
-                type: "node",
-                node,
-                from,
-                to,
-                newFrom: nextTransaction.mapping.map(from),
-                newTo: nextTransaction.mapping.map(to),
-                deletedRange: change.oldRange,
-                newRange: change.newRange,
-                partial: !isFullyWithinRange,
-                editor: this.editor,
-                transaction,
-                combinedTransform: nextTransaction
-              });
-            });
+            nextTransaction.before.nodesBetween(
+              change.oldRange.from,
+              change.oldRange.to,
+              (node, from) => {
+                const to = from + node.nodeSize - 2;
+                const isFullyWithinRange = change.oldRange.from <= from && to <= change.oldRange.to;
+                this.editor.emit("delete", {
+                  type: "node",
+                  node,
+                  from,
+                  to,
+                  newFrom: nextTransaction.mapping.map(from),
+                  newTo: nextTransaction.mapping.map(to),
+                  deletedRange: change.oldRange,
+                  newRange: change.newRange,
+                  partial: !isFullyWithinRange,
+                  editor: this.editor,
+                  transaction,
+                  combinedTransform: nextTransaction
+                });
+              }
+            );
           }
         });
         const mapping = nextTransaction.mapping;
@@ -46395,7 +46603,9 @@ so this becomes the fallback color for the slot */ ''}
               return;
             }
             const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
-            const ignoreTr = transactions.some((transaction) => transaction.getMeta("preventClearDocument"));
+            const ignoreTr = transactions.some(
+              (transaction) => transaction.getMeta("preventClearDocument")
+            );
             if (!docChanges || ignoreTr) {
               return;
             }
@@ -46564,7 +46774,9 @@ so this becomes the fallback color for the slot */ ''}
       let to = this.to;
       if (this.isBlock) {
         if (this.content.size === 0) {
-          console.error(`You can\u2019t set content on a block node. Tried to set content on ${this.name} at ${this.pos}`);
+          console.error(
+            `You can\u2019t set content on a block node. Tried to set content on ${this.name} at ${this.pos}`
+          );
           return;
         }
         from = this.from + 1;
@@ -46635,7 +46847,12 @@ so this becomes the fallback color for the slot */ ''}
         if (!isBlock && !isInline && $pos.depth <= this.depth) {
           return;
         }
-        const childNodePos = new _NodePos($pos, this.editor, isBlock, isBlock || isInline ? node : null);
+        const childNodePos = new _NodePos(
+          $pos,
+          this.editor,
+          isBlock,
+          isBlock || isInline ? node : null
+        );
         if (isBlock) {
           childNodePos.actualDepth = this.depth + 1;
         }
@@ -46686,7 +46903,9 @@ so this becomes the fallback color for the slot */ ''}
           return;
         }
         if (childPos.node.type.name === selector) {
-          const doesAllAttributesMatch = attrKeys.every((key) => attributes[key] === childPos.node.attrs[key]);
+          const doesAllAttributesMatch = attrKeys.every(
+            (key) => attributes[key] === childPos.node.attrs[key]
+          );
           if (doesAllAttributesMatch) {
             nodes.push(childPos);
           }
@@ -46783,7 +47002,7 @@ img.ProseMirror-separator {
 
   // src/utilities/createStyleTag.ts
   function createStyleTag(style2, nonce, suffix) {
-    const tiptapStyleTag = document.querySelector(`style[data-tiptap-style${""}]`);
+    const tiptapStyleTag = document.querySelector(`style[data-tiptap-style${suffix ? `-${suffix}` : ""}]`);
     if (tiptapStyleTag !== null) {
       return tiptapStyleTag;
     }
@@ -46791,7 +47010,7 @@ img.ProseMirror-separator {
     if (nonce) {
       styleNode.setAttribute("nonce", nonce);
     }
-    styleNode.setAttribute(`data-tiptap-style${""}`, "");
+    styleNode.setAttribute(`data-tiptap-style${suffix ? `-${suffix}` : ""}`, "");
     styleNode.innerHTML = style2;
     document.getElementsByTagName("head")[0].appendChild(styleNode);
     return styleNode;
@@ -47150,7 +47369,9 @@ img.ProseMirror-separator {
           errorOnInvalidContent: this.options.enableContentCheck
         });
       } catch (e) {
-        if (!(e instanceof Error) || !["[tiptap error]: Invalid JSON content", "[tiptap error]: Invalid HTML content"].includes(e.message)) {
+        if (!(e instanceof Error) || !["[tiptap error]: Invalid JSON content", "[tiptap error]: Invalid HTML content"].includes(
+          e.message
+        )) {
           throw e;
         }
         this.emit("contentError", {
@@ -47160,7 +47381,9 @@ img.ProseMirror-separator {
             if ("collaboration" in this.storage && typeof this.storage.collaboration === "object" && this.storage.collaboration) {
               this.storage.collaboration.isDisabled = true;
             }
-            this.options.extensions = this.options.extensions.filter((extension) => extension.name !== "collaboration");
+            this.options.extensions = this.options.extensions.filter(
+              (extension) => extension.name !== "collaboration"
+            );
             this.createExtensionManager();
           }
         });
@@ -47278,7 +47501,7 @@ img.ProseMirror-separator {
         this.emit("focus", {
           editor: this,
           event: focus2.event,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          // oxlint-disable-next-lineno-non-null-assertion
           transaction: mostRecentFocusTr
         });
       }
@@ -47286,7 +47509,7 @@ img.ProseMirror-separator {
         this.emit("blur", {
           editor: this,
           event: blur2.event,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          // oxlint-disable-next-lineno-non-null-assertion
           transaction: mostRecentFocusTr
         });
       }
@@ -47804,7 +48027,9 @@ ${renderedContent}
           return index !== void 0 ? index : -1;
         },
         tokenize(src, _tokens, _lexer) {
-          const tokenPattern = selfClosing ? new RegExp(`^\\[${escapedShortcode}\\s*([^\\]]*)\\]`) : new RegExp(`^\\[${escapedShortcode}\\s*([^\\]]*)\\]([\\s\\S]*?)\\[\\/${escapedShortcode}\\]`);
+          const tokenPattern = selfClosing ? new RegExp(`^\\[${escapedShortcode}\\s*([^\\]]*)\\]`) : new RegExp(
+            `^\\[${escapedShortcode}\\s*([^\\]]*)\\]([\\s\\S]*?)\\[\\/${escapedShortcode}\\]`
+          );
           const match = src.match(tokenPattern);
           if (!match) {
             return void 0;
@@ -48100,7 +48325,9 @@ ${indentedChild}`;
               const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
               return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
                 if (dispatch && marks && keepMarks) {
-                  const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+                  const filteredMarks = marks.filter(
+                    (mark) => splittableMarks.includes(mark.type.name)
+                  );
                   tr.ensureMarks(filteredMarks);
                 }
                 return true;
@@ -58286,7 +58513,7 @@ ${indentedChild}`;
                           href: {},
                           rel: { default: 'noopener noreferrer' },
                           // Adding `class` here is a workaround to render two mentions without a whitespace as display names
-                          // This attribute can be removed when the below issue is resolved
+                          // For more details on this behavior, refer to the issue below:
                           // https://github.com/ni/nimble/issues/1707
                           class: { default: '' }
                       },
@@ -58325,7 +58552,7 @@ ${indentedChild}`;
                                       : null,
                                   rel: node.attrs.rel,
                                   // Adding `class` here is a workaround to render two mentions without a whitespace as display names
-                                  // This attribute can be removed when the below issue is resolved
+                                  // For more details on this behavior, refer to the issue below:
                                   // https://github.com/ni/nimble/issues/1707
                                   class: href,
                                   'underline-hidden': _a$4.startsWithHttpOrHttps(href)
@@ -58871,7 +59098,9 @@ ${indentedChild}`;
     }
     const { children, ...rest } = attributes != null ? attributes : {};
     if (tag === "svg") {
-      throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
+      throw new Error(
+        "SVG elements are not supported in the JSX syntax, use the array syntax instead"
+      );
     }
     return [tag, rest, children];
   };
@@ -60842,7 +61071,9 @@ ${indentedChild}`;
       key: new PluginKey("autolink"),
       appendTransaction: (transactions, oldState, newState) => {
         const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
-        const preventAutolink = transactions.some((transaction) => transaction.getMeta("preventAutolink"));
+        const preventAutolink = transactions.some(
+          (transaction) => transaction.getMeta("preventAutolink")
+        );
         if (!docChanges || preventAutolink) {
           return;
         }
@@ -60850,7 +61081,11 @@ ${indentedChild}`;
         const transform = combineTransactionSteps(oldState.doc, [...transactions]);
         const changes = getChangedRanges(transform);
         changes.forEach(({ newRange }) => {
-          const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, (node) => node.isTextblock);
+          const nodesInChangedRanges = findChildrenInRange(
+            newState.doc,
+            newRange,
+            (node) => node.isTextblock
+          );
           let textBlock;
           let textBeforeWhitespace;
           if (nodesInChangedRanges.length > 1) {
@@ -60867,7 +61102,12 @@ ${indentedChild}`;
               return;
             }
             textBlock = nodesInChangedRanges[0];
-            textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, void 0, " ");
+            textBeforeWhitespace = newState.doc.textBetween(
+              textBlock.pos,
+              newRange.to,
+              void 0,
+              " "
+            );
           }
           if (textBlock && textBeforeWhitespace) {
             const wordsBeforeWhitespace = textBeforeWhitespace.split(UNICODE_WHITESPACE_REGEX).filter(Boolean);
@@ -60879,7 +61119,9 @@ ${indentedChild}`;
             if (!lastWordBeforeSpace) {
               return false;
             }
-            const linksBeforeSpace = tokenize(lastWordBeforeSpace).map((t) => t.toObject(options.defaultProtocol));
+            const linksBeforeSpace = tokenize(lastWordBeforeSpace).map(
+              (t) => t.toObject(options.defaultProtocol)
+            );
             if (!isValidLinkStructure(linksBeforeSpace)) {
               return false;
             }
@@ -60893,7 +61135,9 @@ ${indentedChild}`;
               }
               return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
             }).filter((link) => options.validate(link.value)).filter((link) => options.shouldAutoLink(link.value)).forEach((link) => {
-              if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+              if (getMarksBetween(link.from, link.to, newState.doc).some(
+                (item) => item.mark.type === options.type
+              )) {
                 return;
               }
               tr.addMark(
@@ -60991,7 +61235,18 @@ ${indentedChild}`;
     });
   }
   function isAllowedUri(uri, protocols) {
-    const allowedProtocols = ["http", "https", "ftp", "ftps", "mailto", "tel", "callto", "sms", "cid", "xmpp"];
+    const allowedProtocols = [
+      "http",
+      "https",
+      "ftp",
+      "ftps",
+      "mailto",
+      "tel",
+      "callto",
+      "sms",
+      "cid",
+      "xmpp"
+    ];
     if (protocols) {
       protocols.forEach((protocol) => {
         const nextProtocol = typeof protocol === "string" ? protocol : protocol.scheme;
@@ -61002,7 +61257,7 @@ ${indentedChild}`;
     }
     return !uri || uri.replace(UNICODE_WHITESPACE_REGEX_GLOBAL, "").match(
       new RegExp(
-        // eslint-disable-next-line no-useless-escape
+        // oxlint-disable-next-line no-useless-escape
         `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
         "i"
       )
@@ -61016,7 +61271,9 @@ ${indentedChild}`;
     onCreate() {
       if (this.options.validate && !this.options.shouldAutoLink) {
         this.options.shouldAutoLink = this.options.validate;
-        console.warn("The `validate` option is deprecated. Rename to the `shouldAutoLink` option instead.");
+        console.warn(
+          "The `validate` option is deprecated. Rename to the `shouldAutoLink` option instead."
+        );
       }
       this.options.protocols.forEach((protocol) => {
         if (typeof protocol === "string") {
@@ -61323,6 +61580,109 @@ ${indentedChild}`;
       return [inputRule];
     }
   });
+
+  // src/helpers/getBranchingNestedListAtCursor.ts
+  var getBranchingNestedListAtCursor = (state, itemName, wrapperNames) => {
+    const { selection } = state;
+    if (!selection.empty) {
+      return null;
+    }
+    const { $from } = selection;
+    if (!$from.parent.isTextblock) {
+      return null;
+    }
+    if ($from.parentOffset !== $from.parent.content.size) {
+      return null;
+    }
+    let listItemDepth = -1;
+    for (let depth = $from.depth; depth > 0; depth -= 1) {
+      if ($from.node(depth).type.name === itemName) {
+        listItemDepth = depth;
+        break;
+      }
+    }
+    if (listItemDepth < 0) {
+      return null;
+    }
+    const listItem = $from.node(listItemDepth);
+    const indexInListItem = $from.index(listItemDepth);
+    if (indexInListItem + 1 >= listItem.childCount) {
+      return null;
+    }
+    const nextChild = listItem.child(indexInListItem + 1);
+    if (!wrapperNames.includes(nextChild.type.name)) {
+      return null;
+    }
+    const itemType = state.schema.nodes[itemName];
+    let hasBranching = false;
+    nextChild.forEach((child) => {
+      if (child.type === itemType && child.childCount > 1) {
+        hasBranching = true;
+      }
+    });
+    if (!hasBranching) {
+      return null;
+    }
+    const nodeAfter = state.doc.resolve($from.after()).nodeAfter;
+    if (!nodeAfter || !wrapperNames.includes(nodeAfter.type.name)) {
+      return null;
+    }
+    const items = [];
+    nodeAfter.forEach((child) => {
+      items.push(child);
+    });
+    if (items.length === 0) {
+      return null;
+    }
+    return {
+      listItemDepth,
+      nestedList: nodeAfter,
+      nestedListPos: $from.after(),
+      insertPos: $from.after(listItemDepth),
+      items
+    };
+  };
+
+  // src/helpers/hoistBranchingNestedList.ts
+  var hoistBranchingNestedList = (state, dispatch, itemName, wrapperNames) => {
+    const context = getBranchingNestedListAtCursor(state, itemName, wrapperNames);
+    if (!context) {
+      return false;
+    }
+    const { selection } = state;
+    const { nestedList, nestedListPos, insertPos, items } = context;
+    const tr = state.tr;
+    tr.delete(nestedListPos, nestedListPos + nestedList.nodeSize);
+    const mappedInsertPos = tr.mapping.map(insertPos);
+    tr.insert(mappedInsertPos, Fragment.from(items));
+    tr.setSelection(selection.map(tr.doc, tr.mapping));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+
+  // src/helpers/handleDeleteBranchingNestedList.ts
+  var handleDeleteBranchingNestedList = (editor, itemName, wrapperNames) => {
+    return hoistBranchingNestedList(editor.state, editor.view.dispatch, itemName, wrapperNames);
+  };
+
+  // src/helpers/createBranchingListDeleteKeymap.ts
+  var createBranchingListDeleteKeymap = (itemName, wrapperNames) => {
+    return Extension.create({
+      name: `${itemName}BranchingDeleteKeymap`,
+      priority: 101,
+      addKeyboardShortcuts() {
+        const handleDelete2 = () => handleDeleteBranchingNestedList(this.editor, itemName, wrapperNames);
+        return {
+          Delete: handleDelete2,
+          "Mod-Delete": handleDelete2
+        };
+      }
+    });
+  };
+
+  // src/item/list-item.ts
   function isSameLineOrderedListToken(token) {
     var _a, _b;
     const nestedToken = (_a = token.tokens) == null ? void 0 : _a[0];
@@ -61437,6 +61797,14 @@ ${indentedChild}`;
         ctx
       );
     },
+    addExtensions() {
+      return [
+        createBranchingListDeleteKeymap(this.name, [
+          this.options.bulletListTypeName,
+          this.options.orderedListTypeName
+        ])
+      ];
+    },
     addKeyboardShortcuts() {
       return {
         Enter: () => this.editor.commands.splitListItem(this.name),
@@ -61501,33 +61869,6 @@ ${indentedChild}`;
     return true;
   };
 
-  // src/keymap/listHelpers/hasListItemBefore.ts
-  var hasListItemBefore = (typeOrName, state) => {
-    var _a;
-    const { $anchor } = state.selection;
-    const $targetPos = state.doc.resolve($anchor.pos - 2);
-    if ($targetPos.index() === 0) {
-      return false;
-    }
-    if (((_a = $targetPos.nodeBefore) == null ? void 0 : _a.type.name) !== typeOrName) {
-      return false;
-    }
-    return true;
-  };
-  var listItemHasSubList = (typeOrName, state, node) => {
-    if (!node) {
-      return false;
-    }
-    const nodeType = getNodeType(typeOrName, state.schema);
-    let hasSubList = false;
-    node.descendants((child) => {
-      if (child.type === nodeType) {
-        hasSubList = true;
-      }
-    });
-    return hasSubList;
-  };
-
   // src/keymap/listHelpers/handleBackspace.ts
   var handleBackspace = (editor, name, parentListTypes) => {
     if (editor.commands.undoInputRule()) {
@@ -61558,16 +61899,6 @@ ${indentedChild}`;
     if (!isAtStartOfNode(editor.state)) {
       return false;
     }
-    const listItemPos = findListItemPos(name, editor.state);
-    if (!listItemPos) {
-      return false;
-    }
-    const $prev = editor.state.doc.resolve(listItemPos.$pos.pos - 2);
-    const prevNode = $prev.node(listItemPos.depth);
-    const previousListItemHasSubList = listItemHasSubList(name, editor.state, prevNode);
-    if (hasListItemBefore(name, editor.state) && !previousListItemHasSubList) {
-      return editor.commands.joinItemBackward();
-    }
     return editor.chain().liftListItem(name).run();
   };
 
@@ -61633,6 +61964,33 @@ ${indentedChild}`;
     return true;
   };
 
+  // src/keymap/listHelpers/hasListItemBefore.ts
+  var hasListItemBefore = (typeOrName, state) => {
+    var _a;
+    const { $anchor } = state.selection;
+    const $targetPos = state.doc.resolve($anchor.pos - 2);
+    if ($targetPos.index() === 0) {
+      return false;
+    }
+    if (((_a = $targetPos.nodeBefore) == null ? void 0 : _a.type.name) !== typeOrName) {
+      return false;
+    }
+    return true;
+  };
+  var listItemHasSubList = (typeOrName, state, node) => {
+    if (!node) {
+      return false;
+    }
+    const nodeType = getNodeType(typeOrName, state.schema);
+    let hasSubList = false;
+    node.descendants((child) => {
+      if (child.type === nodeType) {
+        hasSubList = true;
+      }
+    });
+    return hasSubList;
+  };
+
   // src/keymap/list-keymap.ts
   var ListKeymap = Extension.create({
     name: "listKeymap",
@@ -61709,7 +62067,14 @@ ${indentedChild}`;
   var INDENTED_LINE_REGEX = /^\s/;
   function isBlockContentLine(line) {
     const trimmedLine = line.trimStart();
-    return /^[-+*]\s+/.test(trimmedLine) || /^\d+\.\s+/.test(trimmedLine) || /^>\s?/.test(trimmedLine) || /^```/.test(trimmedLine) || /^~~~/.test(trimmedLine);
+    return (
+      // oxlint-disable-next-line prefer-string-starts-ends-with
+      /^[-+*]\s+/.test(trimmedLine) || // oxlint-disable-next-line prefer-string-starts-ends-with
+      /^\d+\.\s+/.test(trimmedLine) || // oxlint-disable-next-line prefer-string-starts-ends-with
+      /^>\s?/.test(trimmedLine) || // oxlint-disable-next-line prefer-string-starts-ends-with
+      /^```/.test(trimmedLine) || // oxlint-disable-next-line prefer-string-starts-ends-with
+      /^~~~/.test(trimmedLine)
+    );
   }
   function splitItemContent(contentLines) {
     const paragraphLines = [];
@@ -62085,6 +62450,12 @@ ${indentedChild}`;
       const prefix = `- [${checkedChar}] `;
       return renderNestedMarkdownContent(node, h, prefix);
     },
+    addExtensions() {
+      if (!this.options.nested) {
+        return [];
+      }
+      return [createBranchingListDeleteKeymap(this.name, [this.options.taskListTypeName])];
+    },
     addKeyboardShortcuts() {
       const shortcuts = {
         Enter: () => this.editor.commands.splitListItem(this.name),
@@ -62223,7 +62594,11 @@ ${indentedChild}`;
       ];
     },
     renderHTML({ HTMLAttributes }) {
-      return ["ul", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }), 0];
+      return [
+        "ul",
+        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }),
+        0
+      ];
     },
     parseMarkdown: (token, h) => {
       return h.createNode("taskList", {}, h.parseChildren(token.items || []));
@@ -62360,7 +62735,14 @@ ${indentedChild}`;
   // src/suggestion.ts
   function findSuggestionMatch(config) {
     var _a;
-    const { char, allowSpaces: allowSpacesOption, allowToIncludeChar, allowedPrefixes, startOfLine, $position } = config;
+    const {
+      char,
+      allowSpaces: allowSpacesOption,
+      allowToIncludeChar,
+      allowedPrefixes,
+      startOfLine,
+      $position
+    } = config;
     const allowSpaces = allowSpacesOption && !allowToIncludeChar;
     const escapedChar = escapeForRegEx(char);
     const suffix = new RegExp(`\\s${escapedChar}$`);
@@ -62493,7 +62875,11 @@ ${indentedChild}`;
           text: (state == null ? void 0 : state.text) || null,
           items: [],
           command: (commandProps) => {
-            return command({ editor, range: (state == null ? void 0 : state.range) || { from: 0, to: 0 }, props: commandProps });
+            return command({
+              editor,
+              range: (state == null ? void 0 : state.range) || { from: 0, to: 0 },
+              props: commandProps
+            });
           },
           decorationNode,
           clientRect: clientRectFor(view, decorationNode)
@@ -62523,7 +62909,9 @@ ${indentedChild}`;
               return;
             }
             const state = handleExit && !handleStart ? prev : next;
-            const decorationNode = view.dom.querySelector(`[data-decoration-id="${state.decorationId}"]`);
+            const decorationNode = view.dom.querySelector(
+              `[data-decoration-id="${state.decorationId}"]`
+            );
             props = {
               editor,
               range: state.range,
@@ -62875,7 +63263,11 @@ ${indentedChild}`;
         suggestion
       });
       if (typeof html === "string") {
-        return ["span", mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes), html];
+        return [
+          "span",
+          mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+          html
+        ];
       }
       return html;
     },
@@ -64208,6 +64600,9 @@ ${indentedChild}`;
       };
     }
   });
+  var DEFAULT_DATA_ATTRIBUTE = "placeholder";
+  var PLUGIN_KEY = new PluginKey("tiptap__placeholder");
+  var VIEWPORT_OVERSCAN_PX = 200;
   function createPlaceholderDecoration(options) {
     const {
       editor,
@@ -64234,6 +64629,96 @@ ${indentedChild}`;
     });
   }
 
+  // src/placeholder/utils/buildPlaceholderDecorations.ts
+  function resolveEmptyNodeClass(emptyNodeClass, props) {
+    return typeof emptyNodeClass === "function" ? emptyNodeClass(props) : emptyNodeClass;
+  }
+  function buildPlaceholderDecorations({
+    editor,
+    options,
+    dataAttribute,
+    doc,
+    selection
+  }) {
+    var _a, _b;
+    const active = editor.isEditable || !options.showOnlyWhenEditable;
+    if (!active) {
+      return null;
+    }
+    const { anchor } = selection;
+    const decorations = [];
+    const isEmptyDoc = editor.isEmpty;
+    const useResolvedPath = options.showOnlyCurrent && !options.includeChildren;
+    if (useResolvedPath) {
+      const resolved = doc.resolve(anchor);
+      const node = resolved.depth > 0 ? resolved.node(1) : resolved.nodeAfter;
+      const nodeStart = resolved.depth > 0 ? resolved.before(1) : anchor;
+      if (node && node.type.isTextblock && isNodeEmpty(node)) {
+        const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize;
+        decorations.push(
+          createPlaceholderDecoration({
+            editor,
+            isEmptyDoc,
+            dataAttribute,
+            hasAnchor,
+            placeholder: options.placeholder,
+            classes: {
+              emptyEditor: options.emptyEditorClass,
+              emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
+                editor,
+                node,
+                pos: nodeStart,
+                hasAnchor
+              })
+            },
+            node,
+            pos: nodeStart
+          })
+        );
+      }
+    } else {
+      const pluginState = PLUGIN_KEY.getState(editor.state);
+      const from = (_a = pluginState == null ? void 0 : pluginState.topPos) != null ? _a : 0;
+      const to = (_b = pluginState == null ? void 0 : pluginState.bottomPos) != null ? _b : doc.content.size;
+      doc.nodesBetween(from, to, (node, pos) => {
+        const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+        const isEmpty = !node.isLeaf && isNodeEmpty(node);
+        if (!node.type.isTextblock) {
+          return options.includeChildren;
+        }
+        if ((hasAnchor || !options.showOnlyCurrent) && isEmpty) {
+          decorations.push(
+            createPlaceholderDecoration({
+              editor,
+              isEmptyDoc,
+              dataAttribute,
+              hasAnchor,
+              placeholder: options.placeholder,
+              classes: {
+                emptyEditor: options.emptyEditorClass,
+                emptyNode: resolveEmptyNodeClass(options.emptyNodeClass, {
+                  editor,
+                  node,
+                  pos,
+                  hasAnchor
+                })
+              },
+              node,
+              pos
+            })
+          );
+        }
+        return options.includeChildren;
+      });
+    }
+    return DecorationSet.create(doc, decorations);
+  }
+
+  // src/placeholder/utils/preparePlaceholderAttribute.ts
+  function preparePlaceholderAttribute(attr) {
+    return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+  }
+
   // src/placeholder/utils/findScrollParent.ts
   function isScrollable(el) {
     const style = getComputedStyle(el);
@@ -64274,8 +64759,8 @@ ${indentedChild}`;
   }) {
     const editorRect = view.dom.getBoundingClientRect();
     const containerRect = scrollContainer ? getContainerRect(scrollContainer) : { top: 0, bottom: window.innerHeight };
-    const visibleTop = Math.max(editorRect.top, containerRect.top);
-    const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom);
+    const visibleTop = Math.max(editorRect.top, containerRect.top) - VIEWPORT_OVERSCAN_PX;
+    const visibleBottom = Math.min(editorRect.bottom, containerRect.bottom) + VIEWPORT_OVERSCAN_PX;
     if (visibleTop >= visibleBottom) {
       return { top: 0, bottom: doc.content.size };
     }
@@ -64289,33 +64774,97 @@ ${indentedChild}`;
     };
   }
 
-  // src/placeholder/utils/throttle.ts
-  function throttle(fn, delay) {
-    let timer = null;
-    const call = ((...args) => {
-      if (timer) {
+  // src/placeholder/utils/viewportTracking.ts
+  var viewportPluginState = {
+    /**
+     * Initialises the viewport state with no known positions.
+     * @returns The initial viewport state.
+     */
+    init() {
+      return { topPos: null, bottomPos: null };
+    },
+    /**
+     * Updates the viewport state from incoming transactions.
+     * @param tr - The transaction being applied.
+     * @param prev - The previous viewport state.
+     * @returns The next viewport state.
+     */
+    apply(tr, prev) {
+      const meta = tr.getMeta(PLUGIN_KEY);
+      if (meta == null ? void 0 : meta.positions) {
+        return { topPos: meta.positions.top, bottomPos: meta.positions.bottom };
+      }
+      if (!tr.docChanged) {
+        return prev;
+      }
+      return {
+        topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,
+        bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null
+      };
+    }
+  };
+  function createViewportPluginView(view) {
+    const scrollContainer = findScrollParent(view.dom);
+    const computeAndDispatch = () => {
+      const positions = getViewportBoundaryPositions({
+        view,
+        doc: view.state.doc,
+        scrollContainer
+      });
+      const prev = PLUGIN_KEY.getState(view.state);
+      if ((prev == null ? void 0 : prev.topPos) === positions.top && (prev == null ? void 0 : prev.bottomPos) === positions.bottom) {
         return;
       }
-      fn(...args);
-      timer = setTimeout(() => {
-        timer = null;
-      }, delay);
-    });
-    const cancel = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
+      const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions });
+      view.dispatch(tr);
+    };
+    let frame = null;
+    let lastCompute = 0;
+    const MIN_SCROLL_INTERVAL = 150;
+    const scheduleFrame = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        const now = performance.now();
+        if (now - lastCompute >= MIN_SCROLL_INTERVAL) {
+          lastCompute = now;
+          computeAndDispatch();
+        } else {
+          scheduleFrame();
+        }
+      });
+    };
+    scrollContainer.addEventListener("scroll", scheduleFrame, { passive: true });
+    computeAndDispatch();
+    return {
+      update(_view, prevState) {
+        if (view.state.doc.content.size !== prevState.doc.content.size) {
+          scheduleFrame();
+        }
+      },
+      destroy: () => {
+        if (frame !== null) {
+          cancelAnimationFrame(frame);
+        }
+        scrollContainer.removeEventListener("scroll", scheduleFrame);
       }
     };
-    return { call, cancel };
   }
 
-  // src/placeholder/placeholder.ts
-  var DEFAULT_DATA_ATTRIBUTE = "placeholder";
-  function preparePlaceholderAttribute(attr) {
-    return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+  // src/placeholder/plugins/PlaceholderPlugin.ts
+  function createPlaceholderPlugin({ editor, options }) {
+    const dataAttribute = options.dataAttribute ? `data-${preparePlaceholderAttribute(options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
+    return new Plugin({
+      key: PLUGIN_KEY,
+      state: viewportPluginState,
+      view: createViewportPluginView,
+      props: {
+        decorations: ({ doc, selection }) => buildPlaceholderDecorations({ editor, options, dataAttribute, doc, selection })
+      }
+    });
   }
-  var PLUGIN_KEY = new PluginKey("tiptap__placeholder");
+
+  // src/placeholder/placeholder.ts
   var Placeholder = Extension.create({
     name: "placeholder",
     addOptions() {
@@ -64330,134 +64879,16 @@ ${indentedChild}`;
       };
     },
     addProseMirrorPlugins() {
-      const dataAttribute = this.options.dataAttribute ? `data-${preparePlaceholderAttribute(this.options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
-      return [
-        new Plugin({
-          state: {
-            init() {
-              return {
-                // null means "no viewport info yet" — decoration callback falls
-                // back to full document scan until the scroll handler fires.
-                topPos: null,
-                bottomPos: null
-              };
-            },
-            apply(tr, prev) {
-              const meta = tr.getMeta(PLUGIN_KEY);
-              if (meta == null ? void 0 : meta.positions) {
-                return {
-                  topPos: meta.positions.top,
-                  bottomPos: meta.positions.bottom
-                };
-              }
-              if (!tr.docChanged) {
-                return prev;
-              }
-              return {
-                topPos: prev.topPos !== null ? tr.mapping.map(prev.topPos) : null,
-                bottomPos: prev.bottomPos !== null ? tr.mapping.map(prev.bottomPos) : null
-              };
-            }
-          },
-          key: PLUGIN_KEY,
-          view(view) {
-            const scrollContainer = findScrollParent(view.dom);
-            const computeAndDispatch = () => {
-              const positions = getViewportBoundaryPositions({
-                view,
-                doc: view.state.doc,
-                scrollContainer
-              });
-              const prev = PLUGIN_KEY.getState(view.state);
-              if (prev.topPos === positions.top && prev.bottomPos === positions.bottom) {
-                return;
-              }
-              const tr = view.state.tr.setMeta(PLUGIN_KEY, { positions }).setMeta("tiptap__viewportUpdate", true);
-              view.dispatch(tr);
-            };
-            const { call: throttledUpdate, cancel: cancelThrottle } = throttle(computeAndDispatch, 250);
-            const scrollParent = scrollContainer;
-            scrollParent.addEventListener("scroll", throttledUpdate, { passive: true });
-            computeAndDispatch();
-            return {
-              update(_, prevState) {
-                if (view.state.doc.content.size !== prevState.doc.content.size) {
-                  computeAndDispatch();
-                }
-              },
-              destroy: () => {
-                cancelThrottle();
-                scrollParent.removeEventListener("scroll", throttledUpdate);
-              }
-            };
-          },
-          props: {
-            decorations: ({ doc, selection }) => {
-              var _a, _b;
-              const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
-              if (!active) {
-                return null;
-              }
-              const { anchor } = selection;
-              const decorations = [];
-              const isEmptyDoc = this.editor.isEmpty;
-              const useResolvedPath = this.options.showOnlyCurrent && !this.options.includeChildren;
-              if (useResolvedPath) {
-                const resolved = doc.resolve(anchor);
-                if (resolved.depth > 0) {
-                  const node = resolved.node(1);
-                  const nodeStart = resolved.before(1);
-                  if (node.type.isTextblock && isNodeEmpty(node)) {
-                    const hasAnchor = anchor >= nodeStart && anchor <= nodeStart + node.nodeSize;
-                    const decoration = createPlaceholderDecoration({
-                      node,
-                      dataAttribute,
-                      hasAnchor,
-                      placeholder: this.options.placeholder,
-                      classes: {
-                        emptyEditor: this.options.emptyEditorClass,
-                        emptyNode: this.options.emptyNodeClass
-                      },
-                      editor: this.editor,
-                      isEmptyDoc,
-                      pos: resolved.before(1)
-                    });
-                    decorations.push(decoration);
-                  }
-                }
-              } else {
-                const pluginState = PLUGIN_KEY.getState(this.editor.state);
-                const from = (_a = pluginState.topPos) != null ? _a : 0;
-                const to = (_b = pluginState.bottomPos) != null ? _b : doc.content.size;
-                doc.nodesBetween(from, to, (node, pos) => {
-                  const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
-                  const isEmpty = !node.isLeaf && isNodeEmpty(node);
-                  if (!node.type.isTextblock) {
-                    return this.options.includeChildren;
-                  }
-                  if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
-                    const decoration = createPlaceholderDecoration({
-                      classes: { emptyEditor: this.options.emptyEditorClass, emptyNode: this.options.emptyNodeClass },
-                      editor: this.editor,
-                      isEmptyDoc,
-                      dataAttribute,
-                      hasAnchor,
-                      placeholder: this.options.placeholder,
-                      node,
-                      pos
-                    });
-                    decorations.push(decoration);
-                  }
-                  return this.options.includeChildren;
-                });
-              }
-              return DecorationSet.create(doc, decorations);
-            }
-          }
-        })
-      ];
+      return [createPlaceholderPlugin({ editor: this.editor, options: this.options })];
     }
   });
+  var selectionStyle = `.ProseMirror:not(.ProseMirror-focused) *::selection {
+  background: transparent;
+}
+
+.ProseMirror:not(.ProseMirror-focused) *::-moz-selection {
+  background: transparent;
+}`;
   Extension.create({
     name: "selection",
     addOptions() {
@@ -64467,6 +64898,9 @@ ${indentedChild}`;
     },
     addProseMirrorPlugins() {
       const { editor, options } = this;
+      if (editor.options.injectCSS && typeof document !== "undefined") {
+        createStyleTag(selectionStyle, editor.options.injectNonce, "selection");
+      }
       return [
         new Plugin({
           key: new PluginKey("selection"),
@@ -64487,7 +64921,10 @@ ${indentedChild}`;
     }
   });
   var skipTrailingNodeMeta = "skipTrailingNode";
-  function nodeEqualsType({ types, node }) {
+  function nodeEqualsType({
+    types,
+    node
+  }) {
     return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
   }
   Extension.create({
@@ -64672,7 +65109,7 @@ ${indentedChild}`;
               rel: 'noopener noreferrer',
               target: null,
               // Adding `class` here is a workaround to render two mentions without a whitespace as display names
-              // This attribute can be removed when the below issue is resolved
+              // For more details on this behavior, refer to the issue below:
               // https://github.com/ni/nimble/issues/1707
               class: ''
           },
@@ -71146,6 +71583,12 @@ ${indentedChild}`;
       canLoadChildren: 'can-load-children',
       loadingChildren: 'loading-children'
   };
+  /**
+   * The possible pin locations for a table column.
+   */
+  const TableColumnPinLocation = {
+      left: 'left'
+  };
   /**
    * The possible directions a table column can be sorted in.
    */
@@ -71486,6 +71929,9 @@ ${indentedChild}`;
   __decorate([
       observable
   ], ColumnInternals.prototype, "currentSortDirection", void 0);
+  __decorate([
+      observable
+  ], ColumnInternals.prototype, "pinLocation", void 0);
   function isColumnInternalsProperty(changedProperty, ...args) {
       for (const arg of args) {
           if (changedProperty === arg) {
@@ -71559,6 +72005,7 @@ ${indentedChild}`;
           this.idFieldNameNotConfigured = false;
           this.invalidColumnConfiguration = false;
           this.invalidParentIdConfiguration = false;
+          this.invalidPinnedColumnConfiguration = false;
           this.recordIds = new Set();
       }
       getValidity() {
@@ -71572,7 +72019,8 @@ ${indentedChild}`;
               duplicateGroupIndex: this.duplicateGroupIndex,
               idFieldNameNotConfigured: this.idFieldNameNotConfigured,
               invalidColumnConfiguration: this.invalidColumnConfiguration,
-              invalidParentIdConfiguration: this.invalidParentIdConfiguration
+              invalidParentIdConfiguration: this.invalidParentIdConfiguration,
+              invalidPinnedColumnConfiguration: this.invalidPinnedColumnConfiguration
           };
       }
       isValid() {
@@ -71655,6 +72103,12 @@ ${indentedChild}`;
           this.invalidColumnConfiguration = columns.some(x => !x.columnInternals.validator.isColumnValid);
           return !this.invalidColumnConfiguration;
       }
+      validatePinnedColumnConfigurations(columns) {
+          this.invalidPinnedColumnConfiguration = columns.some(x => x.columnInternals.pinLocation === TableColumnPinLocation.left
+              && (x.columnInternals.pixelWidth === undefined
+                  || !x.columnInternals.resizingDisabled));
+          return !this.invalidPinnedColumnConfiguration;
+      }
       getPresentRecordIds(requestedRecordIds) {
           return requestedRecordIds.filter(id => this.recordIds.has(id));
       }
@@ -71714,12 +72168,7 @@ focus outline in that case.
     .header-row-container {
         position: sticky;
         top: 0;
-    }
-
-    .header-row {
         display: flex;
-        background: ${applicationBackgroundColor};
-        position: relative;
         width: fit-content;
         min-width: max(
             100%,
@@ -71728,8 +72177,16 @@ focus outline in that case.
                     var(--ni-private-table-header-container-margin-right)
             )
         );
+    }
+
+    .header-row {
+        display: flex;
+        background: ${applicationBackgroundColor};
+        position: relative;
+        width: fit-content;
         left: var(--ni-private-table-scroll-x);
         align-items: center;
+        flex: 1;
     }
 
     .header-row-action-container {
@@ -71781,6 +72238,17 @@ focus outline in that case.
         overflow: hidden;
     }
 
+    .pinned-columns-header-container {
+        display: grid;
+        grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);
+        position: sticky;
+        left: 0;
+        align-self: stretch;
+        background: ${applicationBackgroundColor};
+        z-index: ${ZIndexLevels.zIndex1};
+        box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+
     .column-divider {
         border-left: var(--ni-private-column-divider-width) solid
             ${popupBorderColor};
@@ -71881,6 +72349,10 @@ focus outline in that case.
         ${accessiblyHidden}
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
+            .pinned-columns-header-container {
+                box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
+
             .table-row-container::before {
                 content: '';
                 width: 100%;
@@ -72062,7 +72534,7 @@ focus outline in that case.
         position: absolute;
     }
 
-    :host([selectable]:not([selected])[allow-hover]:hover)::before {
+    :host([selectable][allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
 
@@ -72135,6 +72607,46 @@ focus outline in that case.
         width: ${mediumPadding};
     }
 
+    .pinned-cell-container {
+        display: grid;
+        grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);
+        position: sticky;
+        left: 0;
+        background: ${applicationBackgroundColor};
+        z-index: ${ZIndexLevels.zIndex1};
+        box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+
+    :host([selectable][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${applicationBackgroundColor};
+    }
+
+    :host([selected]) .pinned-cell-container {
+        background: linear-gradient(${fillSelectedColor}, ${fillSelectedColor}),
+            ${applicationBackgroundColor};
+    }
+
+    :host([selected][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(
+                ${fillHoverSelectedColor},
+                ${fillHoverSelectedColor}
+            ),
+            ${applicationBackgroundColor};
+    }
+
+    :host(${focusVisible}) .pinned-cell-container {
+        box-shadow:
+            inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+            inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+    ${'' /* Pushing the pinned-cell-container to a higher z-index for breakpoint menu behavior (not required by table directly) */}
+    :host([menu-open]) .pinned-cell-container {
+        z-index: ${ZIndexLevels.zIndex1000};
+    }
+
     .cell-container {
         display: grid;
         width: 100%;
@@ -72210,6 +72722,42 @@ focus outline in that case.
             :host([selected][allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.2)};
             }
+
+            .pinned-cell-container {
+                box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
+
+            :host([selectable][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host([selected]) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.25)},
+                        ${hexToRgbaCssColor(White, 0.25)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host([selected][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.2)},
+                        ${hexToRgbaCssColor(White, 0.2)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host(${focusVisible}) .pinned-cell-container {
+                box-shadow:
+                    inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+                    inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
         `));
 
   const styles$y = css `
@@ -72360,6 +72908,37 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
+  const rowCellTemplate = html `
+    <${tableCellTag}
+        class="cell"
+        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
+        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
+        :column="${x => x}"
+        column-id="${x => x.columnId}"
+        :recordId="${(_, c) => c.parent.recordId}"
+        ?has-action-menu="${x => !!x.actionMenuSlot}"
+        action-menu-label="${x => x.actionMenuLabel}"
+        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
+        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
+        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
+    >
+
+        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
+            <slot
+                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
+                slot="cellActionMenu"
+            ></slot>
+        `)}
+
+        ${repeat(x => x.columnInternals.slotNames, html `
+            <slot
+                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+            ></slot>
+        `)}
+    </${tableCellTag}>
+`;
   const template$z = html `
     <template 
         role="row"
@@ -72367,6 +72946,14 @@ focus outline in that case.
         aria-expanded=${x => x.expanded}
         style="--ni-private-table-row-indent-level: ${x => x.nestingLevel};"
     >
+        <span class="pinned-cell-container">
+            ${repeat(x => x.columns, html `
+                ${when(x => !x.columnHidden && x.columnInternals.pinLocation === TableColumnPinLocation.left, html `
+                    ${rowCellTemplate}
+                `)}
+            `, { recycle: false, positioning: true })}
+        </span>
+
         ${when(x => !x.rowOperationGridCellHidden, html `
             <span role="gridcell" class="row-operations-container">
                 ${when(x => x.showSelectionCheckbox, html `
@@ -72384,7 +72971,7 @@ focus outline in that case.
                 `)}
             </span>
         `)}
-        <span class="row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}"></span>
+        <span class="row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}  ${x => (x.showSelectionCheckbox ? 'selectable' : '')}"></span>
         ${when(x => x.isParentRow, html `
             ${when(x => x.loading, html `
                 <span class="spinner-container">
@@ -72415,36 +73002,8 @@ focus outline in that case.
             class="cell-container ${x => (x.isNestedParent ? 'nested-parent' : '')}"
         >
             ${repeat(x => x.columns, html `
-                ${when(x => !x.columnHidden, html `
-                    <${tableCellTag}
-                        class="cell"
-                        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
-                        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
-                        :column="${x => x}"
-                        column-id="${x => x.columnId}"
-                        :recordId="${(_, c) => c.parent.recordId}"
-                        ?has-action-menu="${x => !!x.actionMenuSlot}"
-                        action-menu-label="${x => x.actionMenuLabel}"
-                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
-                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
-                        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
-                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
-                    >
-
-                        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
-                            <slot
-                                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
-                                slot="cellActionMenu"
-                            ></slot>
-                        `)}
-
-                        ${repeat(x => x.columnInternals.slotNames, html `
-                            <slot
-                                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
-                                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
-                            ></slot>
-                        `)}
-                    </${tableCellTag}>
+                ${when(x => !x.columnHidden && x.columnInternals.pinLocation !== TableColumnPinLocation.left, html `
+                    ${rowCellTemplate}
                 `)}
             `, { recycle: false, positioning: true })}
         </span>
@@ -72627,8 +73186,9 @@ focus outline in that case.
           this.updateCellIndentLevels();
       }
       updateCellIndentLevels() {
+          const firstNonPinnedIndex = this.columns.findIndex(col => col.columnInternals.pinLocation !== TableColumnPinLocation.left);
           this.cellIndentLevels = this.columns.map((_, i) => {
-              return i === 0 ? this.nestingLevel : 0;
+              return i === firstNonPinnedIndex ? this.nestingLevel : 0;
           });
       }
       removeColumnObservers() {
@@ -72770,6 +73330,7 @@ focus outline in that case.
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
         grid-template-columns:
+            calc(var(--ni-private-table-group-row-pinned-column-offset))
             calc(
                 ${controlHeight} *
                     (var(--ni-private-table-group-row-indent-level) + 1)
@@ -72779,6 +73340,7 @@ focus outline in that case.
 
     :host([selectable]) {
         grid-template-columns:
+            calc(var(--ni-private-table-group-row-pinned-column-offset))
             ${controlHeight}
             calc(
                 ${controlHeight} *
@@ -72805,6 +73367,37 @@ focus outline in that case.
         outline-offset: calc(-2 * ${borderWidth});
     }
 
+    :host([has-pinned-columns]) .pinned-column-spacer {
+        display: block;
+        height: 100%;
+        position: sticky;
+        left: 0;
+        background: ${tableRowBorderColor};
+        z-index: ${ZIndexLevels.zIndex1};
+    }
+
+    :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${tableRowBorderColor};
+    }
+
+    :host([has-pinned-columns]${focusVisible}) .pinned-column-spacer {
+        box-shadow: inset 2px -2px 0 ${borderHoverColor};
+    }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    :host([has-pinned-columns]) .checkbox-container {
+        position: relative;
+    }
+
+    :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${tableRowBorderColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${mediumPadding} + ${standardPadding} * 2 *
@@ -72830,10 +73423,6 @@ focus outline in that case.
         ${userSelectNone}
     }
 
-    .checkbox-container {
-        display: flex;
-    }
-
     .selection-checkbox {
         margin-left: ${standardPadding};
     }
@@ -72845,10 +73434,66 @@ focus outline in that case.
             :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.05)};
             }
+
+            :host([has-pinned-columns]) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([has-pinned-columns]) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
         `), themeBehavior(Theme.dark, css `
             :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.1)};
             }
+
+            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
         `));
 
   const template$y = html `
@@ -72856,8 +73501,13 @@ focus outline in that case.
         role="row"
         @click=${x => x.onGroupExpandToggle()}
         aria-expanded=${x => x.expanded}
-        style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};"
+        style="
+            --ni-private-table-group-row-indent-level: ${x => x.nestingLevel};
+            --ni-private-table-group-row-pinned-column-offset: ${x => x.pinnedColumnOffset}px;
+        "
     >
+        <span class="pinned-column-spacer"></span>
+
         ${when(x => x.selectable, html `
             <span role="gridcell" class="checkbox-container">
                 <${checkboxTag}
@@ -72900,6 +73550,11 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           this.nestingLevel = 0;
+          this.pinnedColumnOffset = 0;
+          /**
+           * @internal
+           */
+          this.hasPinnedColumns = false;
           this.expanded = false;
           this.selectable = false;
           this.selectionState = TableRowSelectionState.notSelected;
@@ -72957,6 +73612,9 @@ focus outline in that case.
               cells: []
           };
       }
+      pinnedColumnOffsetChanged() {
+          this.hasPinnedColumns = this.pinnedColumnOffset > 0;
+      }
       selectionStateChanged() {
           this.setSelectionCheckboxState();
       }
@@ -72979,6 +73637,12 @@ focus outline in that case.
   __decorate([
       observable
   ], TableGroupRow.prototype, "nestingLevel", void 0);
+  __decorate([
+      observable
+  ], TableGroupRow.prototype, "pinnedColumnOffset", void 0);
+  __decorate([
+      attr({ attribute: 'has-pinned-columns', mode: 'boolean' })
+  ], TableGroupRow.prototype, "hasPinnedColumns", void 0);
   __decorate([
       observable
   ], TableGroupRow.prototype, "resolvedRowIndex", void 0);
@@ -73014,6 +73678,21 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
+  const tableHeaderTemplate = html `
+    <${tableHeaderTag}
+        class="header"
+        ${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
+        sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
+        ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+        ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
+        @keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
+        @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
+        :alignment="${x => x.columnInternals.headerAlignment}"
+        :isGrouped="${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled) || undefined}"
+    >
+        <slot name="${x => x.slot}"></slot>
+    </${tableHeaderTag}>
+`;
   const template$x = html `
     <template
         role="treegrid"
@@ -73031,8 +73710,14 @@ focus outline in that case.
             --ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
             --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
             --ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
+            --ni-private-table-pinned-columns-row-grid-columns: ${x => x.pinnedColumnsGridTemplateColumns};
             ">
             <div role="rowgroup" class="header-row-container">
+                <div class="pinned-columns-header-container">
+                    ${repeat(x => x.pinnedColumns, html `
+                        ${tableHeaderTemplate}
+                        `, { positioning: true })}
+                </div>
                 <div class="header-row" role="row">
                     <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
                         ${when(x => x.showRowOperationColumn, html `
@@ -73085,19 +73770,7 @@ focus outline in that case.
                                         @pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event, c.index)}">
                                     </div>
                                 `)}
-                                    <${tableHeaderTag}
-                                        class="header"
-                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
-                                        sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
-                                        ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
-                                        ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
-                                        @keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
-                                        @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
-                                        :alignment="${x => x.columnInternals.headerAlignment}"
-                                        :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
-                                    >
-                                        <slot name="${x => x.slot}"></slot>
-                                    </${tableHeaderTag}>
+                                ${tableHeaderTemplate}
                                 ${when((_, c) => c.index < c.length - 1, html `
                                     <div
                                         class="
@@ -73130,6 +73803,7 @@ focus outline in that case.
                                     :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
                                     ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                    :pinnedColumnOffset="${(_, c) => c.parent.pinnedColumnOffset}"
                                     :immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
                                     :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
                                     ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
@@ -73389,6 +74063,11 @@ focus outline in that case.
     return horizontal ? el.scrollLeft * (isRtl && -1 || 1) : el.scrollTop;
   });
   const measureElement = (element, entry, instance) => {
+    if (instance.options.useCachedMeasurements) {
+      const index = instance.indexFromElement(element);
+      const key = instance.options.getItemKey(index);
+      return instance.itemSizeCache.get(key) ?? instance.options.estimateSize(index);
+    }
     if (entry == null ? void 0 : entry.borderBoxSize) {
       const box = entry.borderBoxSize[0];
       if (box) {
@@ -73398,6 +74077,14 @@ focus outline in that case.
         return size;
       }
     }
+    if (!entry) {
+      const index = instance.indexFromElement(element);
+      const key = instance.options.getItemKey(index);
+      const cachedSize = instance.itemSizeCache.get(key);
+      if (cachedSize !== void 0) {
+        return cachedSize;
+      }
+    }
     return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
   };
   const scrollWithAdjustments = (offset, {
@@ -73524,7 +74211,8 @@ focus outline in that case.
           isRtl: false,
           useScrollendEvent: false,
           useAnimationFrameWithResizeObserver: false,
-          laneAssignmentMode: "estimate"
+          laneAssignmentMode: "estimate",
+          useCachedMeasurements: false
         };
         for (const key in opts2) {
           const v = opts2[key];
@@ -73533,6 +74221,7 @@ focus outline in that case.
         const prevOptions = this.options;
         let anchor = null;
         let followOnAppend = null;
+        let edgeKeysChanged = false;
         if (prevOptions !== void 0 && prevOptions.enabled && merged.enabled && merged.anchorTo === "end" && this.scrollElement !== null) {
           const prevCount = prevOptions.count;
           const nextCount = merged.count;
@@ -73542,6 +74231,7 @@ focus outline in that case.
           const didCountChange = nextCount !== prevCount;
           const didEdgeKeysChange = didCountChange || prevCount > 0 && nextCount > 0 && (merged.getItemKey(0) !== prevFirstKey || merged.getItemKey(nextCount - 1) !== prevLastKey);
           if (didEdgeKeysChange) {
+            edgeKeysChanged = true;
             const item = prevCount > 0 ? this.getVirtualItemForOffset(this.getScrollOffset()) ?? measurements[0] : null;
             if (item) {
               anchor = [item.key, this.getScrollOffset() - item.start];
@@ -73553,11 +74243,38 @@ focus outline in that case.
           }
         }
         this.options = merged;
-        if (anchor || followOnAppend) {
+        if (edgeKeysChanged) {
+          this.pendingMin = 0;
+          this.itemSizeCacheVersion++;
+        }
+        let anchorResolved = false;
+        let anchorDelta = 0;
+        if (anchor && this.scrollOffset !== null) {
+          const [anchorKey, anchorOffset] = anchor;
+          const newMeasurements = this.getMeasurements();
+          const { count, getItemKey } = this.options;
+          let idx = 0;
+          while (idx < count && getItemKey(idx) !== anchorKey) {
+            idx++;
+          }
+          if (idx < count) {
+            const anchorItem = newMeasurements[idx];
+            if (anchorItem) {
+              const newOffset = anchorItem.start + anchorOffset;
+              if (newOffset !== this.scrollOffset) {
+                anchorDelta = newOffset - this.scrollOffset;
+                this.scrollOffset = newOffset;
+                anchorResolved = true;
+              }
+            }
+          }
+        }
+        if (anchorResolved || followOnAppend) {
           this.pendingScrollAnchor = [
-            (anchor == null ? void 0 : anchor[0]) ?? null,
-            (anchor == null ? void 0 : anchor[1]) ?? 0,
-            followOnAppend
+            anchorResolved ? anchor[0] : null,
+            anchorResolved ? anchor[1] : 0,
+            followOnAppend,
+            anchorDelta
           ];
         }
       };
@@ -73694,19 +74411,17 @@ focus outline in that case.
         const anchor = this.pendingScrollAnchor;
         this.pendingScrollAnchor = null;
         if (anchor && this.scrollElement && this.options.enabled) {
-          const [key, offset, followOnAppend] = anchor;
-          if (key !== null) {
-            const { count, getItemKey } = this.options;
-            let index = 0;
-            while (index < count && getItemKey(index) !== key) {
-              index++;
-            }
-            const item = index < count ? this.getMeasurements()[index] : void 0;
-            if (item) {
-              const delta = item.start + offset - this.getScrollOffset();
-              if (!approxEqual(delta, 0)) {
-                this.applyScrollAdjustment(delta);
+          const [key, _offset, followOnAppend, anchorDelta] = anchor;
+          if (key !== null && !followOnAppend) {
+            if (isIOSWebKit() && (this.isScrolling || this._iosTouching || this._iosJustTouchEnded)) {
+              if (anchorDelta !== 0) {
+                this._iosDeferredAdjustment += anchorDelta;
               }
+            } else {
+              this._scrollToOffset(this.getScrollOffset(), {
+                adjustments: void 0,
+                behavior: void 0
+              });
             }
           }
           if (followOnAppend) {
@@ -74074,13 +74789,13 @@ focus outline in that case.
             delta,
             this
           ) : (
-            // Default: adjust scrollTop only when the resize is an above-
-            // viewport item AND we're not actively scrolling backward.
-            // Adjusting during backward scroll fights the user's scroll
-            // direction and produces the "items jump while scrolling up"
-            // jank reported across many issues. Users who want the old
-            // behavior can pass shouldAdjustScrollPositionOnItemSizeChange.
-            itemStart < this.getScrollOffset() + this.scrollAdjustments && this.scrollDirection !== "backward"
+            // Default: adjust when the resize is an above-viewport item.
+            // First measurement (!has(key)): always adjust — the item
+            // has never been sized, so the estimate→actual delta must
+            // be compensated regardless of scroll direction.
+            // Re-measurement (has(key)): skip during backward scroll
+            // to avoid the "items jump while scrolling up" cascade.
+            itemStart < this.getScrollOffset() + this.scrollAdjustments && (!this.itemSizeCache.has(key) || this.scrollDirection !== "backward")
           ));
           if (this.pendingMin === null || index < this.pendingMin) {
             this.pendingMin = index;
@@ -74673,7 +75388,7 @@ focus outline in that case.
           };
       }
       getGridTemplateColumns() {
-          return this.getVisibleColumns()
+          return this.getUnpinnedVisibleColumns()
               .map(column => {
               const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
               if (currentPixelWidth !== undefined) {
@@ -74699,7 +75414,7 @@ focus outline in that case.
           this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);
           this.dragStart = dragStart;
           this.currentTotalDelta = 0;
-          this.visibleColumns = this.getVisibleColumns();
+          this.visibleColumns = this.getUnpinnedVisibleColumns();
           this.setColumnsToFixedSize();
           this.initialTableScrollableWidth = this.table.viewport.scrollWidth;
           this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
@@ -74770,7 +75485,7 @@ focus outline in that case.
        */
       getFirstLeftResizableColumnIndex(columnIndex) {
           const visibleColumns = this.visibleColumns.length === 0
-              ? this.getVisibleColumns()
+              ? this.getUnpinnedVisibleColumns()
               : this.visibleColumns;
           for (let i = columnIndex; i >= 0; i--) {
               const column = visibleColumns[i];
@@ -74790,7 +75505,7 @@ focus outline in that case.
        */
       getFirstRightResizableColumnIndex(columnIndex) {
           const visibleColumns = this.visibleColumns.length === 0
-              ? this.getVisibleColumns()
+              ? this.getUnpinnedVisibleColumns()
               : this.visibleColumns;
           for (let i = columnIndex; i < visibleColumns.length; i++) {
               const column = visibleColumns[i];
@@ -74887,8 +75602,9 @@ focus outline in that case.
               }
           }
       }
-      getVisibleColumns() {
-          return this.table.columns.filter(column => !column.columnHidden);
+      getUnpinnedVisibleColumns() {
+          return this.table.columns.filter(column => !column.columnHidden
+              && column.columnInternals.pinLocation !== TableColumnPinLocation.left);
       }
       getLeftColumnIndexFromDivider(dividerIndex) {
           return Math.floor(dividerIndex / 2);
@@ -74924,7 +75640,8 @@ focus outline in that case.
       'columnDefinition',
       'actionMenuSlots',
       'selectionMode',
-      'actionMenusPreserveSelection'
+      'actionMenusPreserveSelection',
+      'columnPinned'
   ];
   /**
    * Helper class to track what updates are needed to the table based on configuration
@@ -74983,6 +75700,7 @@ focus outline in that case.
           return (this.isTracked('columnSortDisabled')
               || this.isTracked('columnDefinition')
               || this.isTracked('columnHidden')
+              || this.isTracked('columnPinned')
               || this.isTracked('selectionMode')
               || this.isTracked('actionMenuSlots'));
       }
@@ -75014,6 +75732,10 @@ focus outline in that case.
               this.track('columnWidths');
               this.track('columnHidden');
           }
+          else if (isColumnInternalsProperty(changedColumnProperty, 'pinLocation')) {
+              this.track('columnWidths');
+              this.track('columnPinned');
+          }
           else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
               this.track('actionMenuSlots');
           }
@@ -76715,6 +77437,34 @@ focus outline in that case.
           }
           return '';
       }
+      /**
+       * @internal
+       */
+      get pinnedColumnOffset() {
+          let offset = 0;
+          for (const column of this.pinnedColumns) {
+              const resolvedPixelWidth = this.getPinnedColumnResolvedPixelWidth(column);
+              if (resolvedPixelWidth !== undefined) {
+                  const coercedPixelWidth = Math.max(column.columnInternals.minPixelWidth, resolvedPixelWidth);
+                  offset += coercedPixelWidth;
+              }
+          }
+          return offset;
+      }
+      /**
+       * @internal
+       */
+      get pinnedColumnsGridTemplateColumns() {
+          return this.pinnedColumns.map(column => {
+              const resolvedPixelWidth = this.getPinnedColumnResolvedPixelWidth(column);
+              if (resolvedPixelWidth !== undefined) {
+                  const coercedPixelWidth = Math.max(column.columnInternals.minPixelWidth, resolvedPixelWidth);
+                  return `${coercedPixelWidth}px`;
+              }
+              return '';
+          })
+              .join(' ');
+      }
       /**
        * @internal
        */
@@ -76765,6 +77515,10 @@ focus outline in that case.
            * @internal
            */
           this.visibleColumns = [];
+          /**
+           * @internal
+           */
+          this.pinnedColumns = [];
           /**
            * @internal
            * This value determines the size of the viewport area when a user has created horizontal scrollable
@@ -77117,7 +77871,10 @@ focus outline in that case.
           }
           if (this.tableUpdateTracker.updateColumnWidths) {
               this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
-              this.visibleColumns = this.columns.filter(column => !column.columnHidden);
+              this.visibleColumns = this.columns.filter(column => !column.columnHidden
+                  && column.columnInternals.pinLocation !== TableColumnPinLocation.left);
+              this.pinnedColumns = this.columns.filter(column => !column.columnHidden
+                  && column.columnInternals.pinLocation === TableColumnPinLocation.left);
           }
           if (this.tableUpdateTracker.requiresKeyboardFocusReset) {
               this.keyboardNavigationManager.resetFocusState();
@@ -77195,6 +77952,10 @@ focus outline in that case.
           this.observeColumns();
           this.tableUpdateTracker.trackColumnInstancesChanged();
       }
+      getPinnedColumnResolvedPixelWidth(column) {
+          const { currentPixelWidth } = column.columnInternals;
+          return currentPixelWidth;
+      }
       updateRequestedSlotsForOpeningActionMenu(openActionMenuRecordId) {
           for (const actionMenuSlot of this.actionMenuSlots) {
               this.requestedSlots.set(actionMenuSlot, {
@@ -77369,6 +78130,7 @@ focus outline in that case.
           this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.columnInternals.currentSortIndex));
           this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
           this.tableValidator.validateColumnConfigurations(this.columns);
+          this.tableValidator.validatePinnedColumnConfigurations(this.columns);
           if (this.dataHierarchyManager) {
               this.validateWithData(this.dataHierarchyManager.getAllRecords());
           }
@@ -77641,12 +78403,21 @@ focus outline in that case.
   __decorate([
       volatile
   ], Table$1.prototype, "collapseButtonVisibility", null);
+  __decorate([
+      volatile
+  ], Table$1.prototype, "pinnedColumnOffset", null);
+  __decorate([
+      volatile
+  ], Table$1.prototype, "pinnedColumnsGridTemplateColumns", null);
   __decorate([
       observable
   ], Table$1.prototype, "firstSortedColumn", void 0);
   __decorate([
       observable
   ], Table$1.prototype, "visibleColumns", void 0);
+  __decorate([
+      observable
+  ], Table$1.prototype, "pinnedColumns", void 0);
   __decorate([
       observable
   ], Table$1.prototype, "tableScrollableMinWidth", void 0);
@@ -78945,6 +79716,23 @@ focus outline in that case.
 
   const template$s = html `${template$w}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinPinnableColumnAPI(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to allow pinning
+       * a fixed-width column within a table.
+       */
+      class PinnableColumn extends base {
+          /** @internal */
+          pinLocationChanged() {
+              this.columnInternals.pinLocation = this.pinLocation;
+          }
+      }
+      attr({ attribute: 'pin-location' })(PinnableColumn.prototype, 'pinLocation');
+      return PinnableColumn;
+  }
+
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
       'duplicateMappingKey',
@@ -79333,7 +80121,7 @@ focus outline in that case.
    * Table column that maps number, boolean, or string values to an icon, a spinner,
    * text, or an icon/spinner with text.
    */
-  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinSortableColumnAPI((TableColumnEnumBase)))) {
+  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinPinnableColumnAPI(mixinSortableColumnAPI((TableColumnEnumBase))))) {
       minPixelWidthChanged() {
           if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
               this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
@@ -99290,6 +100078,7 @@ focus outline in that case.
     ${display('flex')}
 
     :host {
+        height: 480px;
         flex-direction: column;
         background: ${applicationBackgroundColor};
     }
@@ -99337,12 +100126,28 @@ focus outline in that case.
         flex: 1;
         display: flex;
         flex-direction: column;
-        justify-content: flex-start;
         row-gap: 32px;
         padding: ${mediumPadding} ${standardPadding} ${mediumPadding}
             ${standardPadding};
         background: ${sectionBackgroundImage};
         overflow-y: auto;
+        overflow-anchor: none;
+    }
+
+    .messages-history,
+    .messages-anchored {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        row-gap: 32px;
+    }
+
+    .messages-history.region-empty {
+        display: none;
+    }
+
+    .messages-anchored.anchor-active {
+        min-height: 100%;
     }
 
     :host([appearance='overlay']) .messages {
@@ -99366,7 +100171,14 @@ focus outline in that case.
 <div class="start ${x => (x.startEmpty ? 'start-empty' : '')}">
     <slot name="start" ${slotted({ property: 'slottedStartElements' })}></slot>
 </div>
-<div class="messages"><slot></slot></div>
+<div class="messages" ${ref('messagesContainer')}>
+    <div class="messages-history ${x => (x.historyEmpty ? 'region-empty' : '')}">
+        <slot name="history" ${slotted({ property: 'slottedHistoryMessages' })}></slot>
+    </div>
+    <div class="messages-anchored ${x => (x.autoScrollManager.anchorActive ? 'anchor-active' : '')}" ${ref('anchoredContainer')}>
+        <slot ${slotted({ property: 'slottedMessages' })}></slot>
+    </div>
+</div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
     </slot>
@@ -99383,6 +100195,262 @@ focus outline in that case.
   const ChatConversationAppearance = {
       default: undefined};
 
+  /**
+   * Internal state for a chat message
+   * @internal
+   */
+  class ChatMessageInternals {
+      constructor(host, options) {
+          /**
+           * True when this message is the one the conversation anchors to while
+           * auto-scrolling.
+           */
+          this.isScrollAnchor = false;
+          this.host = host;
+          this.anchorOnInsert = options?.anchorOnInsert ?? false;
+      }
+      get slot() {
+          return this.slotName;
+      }
+      set slot(value) {
+          if (value === this.slotName) {
+              return;
+          }
+          this.slotName = value;
+          if (value === undefined) {
+              this.host.removeAttribute('slot');
+          }
+          else {
+              this.host.setAttribute('slot', value);
+          }
+      }
+      static elementHasMessageInternals(element) {
+          return element.messageInternals instanceof ChatMessageInternals;
+      }
+  }
+  __decorate([
+      observable
+  ], ChatMessageInternals.prototype, "isScrollAnchor", void 0);
+
+  // Distance from the bottom (px) within which the conversation is considered "at the bottom".
+  const scrollingPixelThreshold = 10;
+  // Slot name for messages that precede the current turn's anchor message.
+  const historySlotName = 'history';
+  /**
+   * Manages auto-scroll behavior for the chat conversation:
+   * - Splits messages into `default` and `history` slots so the top message of the
+   *   `default` slot becomes the anchor: it is moved to the top of the viewport and scrolled to on insert
+   * - Implements auto scroll when at the bottom of the window as content is added until the user scrolls away
+   * @internal
+   */
+  class AutoScrollManager {
+      get isActive() {
+          return this.resizeObserver !== undefined;
+      }
+      constructor(conversation) {
+          this.conversation = conversation;
+          /**
+           * Whether auto-scroll is currently following new content. Set to false when
+           * the user scrolls away from the bottom and back to true when they return.
+           */
+          this.autoScrollEngaged = true;
+          /**
+           * Whether the anchored region is reserving a viewport of space
+           */
+          this.anchorActive = false;
+          this.scrollUpdatePending = false;
+          this.pendingAnchorInsert = false;
+          this.previousMessages = [];
+          this.onScroll = () => {
+              const container = this.conversation.messagesContainer;
+              if (this.programmaticScrollTarget !== undefined) {
+                  // The programmatic scroll always targets the bottom, so treat it as
+                  // settled once we reach that target or the bottom itself.
+                  const reachedTarget = Math.abs(container.scrollTop - this.programmaticScrollTarget) <= 1;
+                  const reachedBottom = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+                  if (reachedTarget || reachedBottom) {
+                      this.programmaticScrollTarget = undefined;
+                  }
+                  return;
+              }
+              this.autoScrollEngaged = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+          };
+          this.conversationNotifier = Observable.getNotifier(this.conversation);
+      }
+      connect() {
+          this.autoScrollEngaged = true;
+          this.previousMessages = this.getOrderedMessages();
+          this.conversationNotifier.subscribe(this, 'slottedMessages');
+          this.conversationNotifier.subscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.addEventListener('scroll', this.onScroll, { passive: true });
+          this.resizeObserver = new ResizeObserver(() => {
+              this.onContentSizeChanged();
+          });
+          // Observe the anchored region for streamed content growth and the scroll
+          // viewport so the conversation stays pinned when its height changes.
+          this.resizeObserver.observe(this.conversation.anchoredContainer);
+          this.resizeObserver.observe(this.conversation.messagesContainer);
+          this.repartition(this.previousMessages);
+      }
+      disconnect() {
+          this.conversationNotifier.unsubscribe(this, 'slottedMessages');
+          this.conversationNotifier.unsubscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.removeEventListener('scroll', this.onScroll);
+          this.resizeObserver?.disconnect();
+          this.resizeObserver = undefined;
+          this.setScrollAnchorMessage(undefined);
+          this.clearSlotAssignments();
+          this.anchorActive = false;
+          this.previousMessages = [];
+      }
+      handleChange(source, args) {
+          if (source === this.conversation
+              && (args === 'slottedMessages' || args === 'slottedHistoryMessages')) {
+              this.onMessagesChanged();
+          }
+      }
+      onMessagesChanged() {
+          const current = this.getOrderedMessages();
+          const previousSet = new Set(this.previousMessages);
+          const addedMessages = current.filter(message => !previousSet.has(message));
+          this.previousMessages = current;
+          this.repartition(current);
+          if (addedMessages.length === 0) {
+              return;
+          }
+          const hasAnchorMessage = addedMessages.some(message => message.messageInternals.anchorOnInsert);
+          this.scheduleScrollUpdate(hasAnchorMessage);
+      }
+      repartition(messages) {
+          const anchorIndex = this.findLatestAnchorIndex(messages);
+          messages.forEach((message, index) => {
+              message.messageInternals.slot = anchorIndex >= 0 && index < anchorIndex
+                  ? historySlotName
+                  : undefined;
+          });
+          this.anchorActive = anchorIndex >= 0;
+      }
+      clearSlotAssignments() {
+          for (const message of this.getOrderedMessages()) {
+              message.messageInternals.slot = undefined;
+          }
+      }
+      scheduleScrollUpdate(hasAnchorMessage) {
+          this.pendingAnchorInsert = this.pendingAnchorInsert || hasAnchorMessage;
+          if (this.scrollUpdatePending) {
+              return;
+          }
+          this.scrollUpdatePending = true;
+          requestAnimationFrame(() => {
+              this.scrollUpdatePending = false;
+              const anchorInsert = this.pendingAnchorInsert;
+              this.pendingAnchorInsert = false;
+              if (anchorInsert) {
+                  this.anchorToLastInsertedMessage();
+              }
+              else if (this.autoScrollEngaged) {
+                  this.followContent();
+              }
+          });
+      }
+      /**
+       * Pins the most recently inserted anchor message near the top of the
+       * viewport.
+       */
+      anchorToLastInsertedMessage() {
+          const message = this.getLastAnchorMessage();
+          if (message === undefined) {
+              return;
+          }
+          this.setScrollAnchorMessage(message);
+          this.autoScrollEngaged = true;
+          this.smoothScrollTo(this.getMaxScrollTop());
+      }
+      followContent() {
+          this.instantScrollTo(this.getMaxScrollTop());
+      }
+      onContentSizeChanged() {
+          // Reacts to streamed content growth and viewport height changes.
+          // While a pending or in-progress anchor insert owns positioning, let its
+          // smooth scroll settle instead of competing with an instant follow.
+          if (this.pendingAnchorInsert
+              || this.programmaticScrollTarget !== undefined) {
+              return;
+          }
+          if (this.autoScrollEngaged) {
+              this.followContent();
+          }
+      }
+      getDistanceFromBottom() {
+          const { scrollTop, scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return scrollHeight - scrollTop - clientHeight;
+      }
+      getMaxScrollTop() {
+          const { scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return Math.max(0, scrollHeight - clientHeight);
+      }
+      smoothScrollTo(scrollTop) {
+          const container = this.conversation.messagesContainer;
+          if (Math.abs(container.scrollTop - scrollTop) <= 1) {
+              // No movement is needed, so `scrollTo` would not emit a scroll event
+              // to clear the programmatic guard. Snap to the exact target and
+              // leave the guard clear so streamed content keeps being followed.
+              this.programmaticScrollTarget = undefined;
+              container.scrollTop = scrollTop;
+              return;
+          }
+          this.programmaticScrollTarget = scrollTop;
+          container.scrollTo({
+              top: scrollTop,
+              behavior: 'smooth'
+          });
+      }
+      instantScrollTo(scrollTop) {
+          this.conversation.messagesContainer.scrollTop = scrollTop;
+      }
+      setScrollAnchorMessage(message) {
+          if (this.scrollAnchorMessage === message) {
+              return;
+          }
+          if (this.scrollAnchorMessage !== undefined) {
+              this.scrollAnchorMessage.messageInternals.isScrollAnchor = false;
+          }
+          this.scrollAnchorMessage = message;
+          if (message !== undefined) {
+              message.messageInternals.isScrollAnchor = true;
+          }
+      }
+      getLastAnchorMessage() {
+          const messages = this.getOrderedMessages();
+          const index = this.findLatestAnchorIndex(messages);
+          return index >= 0 ? messages[index] : undefined;
+      }
+      findLatestAnchorIndex(messages) {
+          for (let i = messages.length - 1; i >= 0; i--) {
+              const message = messages[i];
+              if (message?.messageInternals.anchorOnInsert) {
+                  return i;
+              }
+          }
+          return -1;
+      }
+      getOrderedMessages() {
+          const messages = [];
+          for (const child of Array.from(this.conversation.children)) {
+              if (ChatMessageInternals.elementHasMessageInternals(child)) {
+                  messages.push(child);
+              }
+          }
+          return messages;
+      }
+  }
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "autoScrollEngaged", void 0);
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "anchorActive", void 0);
+
   /**
    * A Spright component for displaying a series of chat messages
    */
@@ -99390,6 +100458,15 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           this.appearance = ChatConversationAppearance.default;
+          this.autoScroll = false;
+          /**
+           * Manages auto-scroll behavior. Always present; its observers are registered
+           * while the conversation is connected and `autoScroll` is enabled.
+           * @internal
+           */
+          this.autoScrollManager = new AutoScrollManager(this);
+          /** @internal */
+          this.historyEmpty = true;
           /** @internal */
           this.inputEmpty = true;
           /** @internal */
@@ -99399,6 +100476,31 @@ focus outline in that case.
           /** @internal */
           this.endEmpty = true;
       }
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.connect();
+          }
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.disconnect();
+          }
+      }
+      autoScrollChanged() {
+          if (this.$fastController.isConnected) {
+              if (this.autoScroll) {
+                  this.autoScrollManager.connect();
+              }
+              else {
+                  this.autoScrollManager.disconnect();
+              }
+          }
+      }
+      slottedHistoryMessagesChanged(_prev, next) {
+          this.historyEmpty = next === undefined || next.length === 0;
+      }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
       }
@@ -99415,6 +100517,18 @@ focus outline in that case.
   __decorate([
       attr
   ], ChatConversation.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'auto-scroll', mode: 'boolean' })
+  ], ChatConversation.prototype, "autoScroll", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedHistoryMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "historyEmpty", void 0);
   __decorate([
       observable
   ], ChatConversation.prototype, "inputEmpty", void 0);
@@ -100074,6 +101188,8 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+          /** @internal */
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
@@ -100140,6 +101256,13 @@ focus outline in that case.
    * A Spright component for displaying an outbound chat message
    */
   class ChatMessageOutbound extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this, {
+              anchorOnInsert: true
+          });
+      }
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
@@ -100187,6 +101310,11 @@ focus outline in that case.
    * A Spright component for displaying an system chat message
    */
   class ChatMessageSystem extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+      }
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',