diff --git a/blocks/canvas/editor-utils/blocks.js b/blocks/canvas/editor-utils/blocks.js
index 40f228505..608998742 100644
--- a/blocks/canvas/editor-utils/blocks.js
+++ b/blocks/canvas/editor-utils/blocks.js
@@ -1,4 +1,4 @@
-import { DOMParser as PMDOMParser } from 'da-y-wrapper';
+import { DOMParser as PMDOMParser, NodeSelection } from 'da-y-wrapper';
 
 const NON_BLOCK_TABLE_NAMES = new Set(['metadata', 'section metadata', 'section-metadata']);
 
@@ -44,6 +44,18 @@ export function getActiveBlockIndex(view) {
   return -1;
 }
 
+// Shared by every single-node move; adjusts insertPos for the shift the delete causes,
+// and selects the moved node at its new position.
+function spliceNode(view, from, insertPos) {
+  const adjustedInsertPos = insertPos > from.pos ? insertPos - from.size : insertPos;
+  if (adjustedInsertPos === from.pos) return;
+  const tr = view.state.tr
+    .delete(from.pos, from.pos + from.size)
+    .insert(adjustedInsertPos, from.node);
+  tr.setSelection(NodeSelection.create(tr.doc, adjustedInsertPos));
+  view.dispatch(tr);
+}
+
 export function moveBlock(view, fromIndex, toIndex, dropPosition) {
   if (!view) return;
   if (isSamePosition(fromIndex, toIndex, dropPosition)) return;
@@ -60,20 +72,14 @@ export function moveBlock(view, fromIndex, toIndex, dropPosition) {
 
   if (!fromBlockNode || !toBlockNode) return;
 
-  const fromBlockSize = fromBlockNode.nodeSize;
-  const toBlockSize = toBlockNode.nodeSize;
-
   const insertPos = dropPosition === 'before'
     ? toBlockPos
-    : toBlockPos + toBlockSize;
-  const adjustedInsertPos = insertPos > fromBlockPos
-    ? insertPos - fromBlockSize
-    : insertPos;
-
-  view.dispatch(
-    view.state.tr
-      .delete(fromBlockPos, fromBlockPos + fromBlockSize)
-      .insert(adjustedInsertPos, fromBlockNode),
+    : toBlockPos + toBlockNode.nodeSize;
+
+  spliceNode(
+    view,
+    { pos: fromBlockPos, size: fromBlockNode.nodeSize, node: fromBlockNode },
+    insertPos,
   );
 }
 
@@ -87,6 +93,21 @@ export function deleteBlock(view, blockIndex) {
   view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
 }
 
+// proseIndex sits inside the node's content, not at its own start; depth-1 recovers
+// the whole node regardless of kind or nesting (e.g. a blockquote's nested paragraph).
+export function getContentItemRange(doc, child) {
+  const pos = doc.resolve(child.proseIndex).before(1);
+  const node = doc.nodeAt(pos);
+  return node ? { pos, size: node.nodeSize, node } : null;
+}
+
+export function deleteContentItem(view, child) {
+  if (!view) return;
+  const range = getContentItemRange(view.state.doc, child);
+  if (!range) return;
+  view.dispatch(view.state.tr.delete(range.pos, range.pos + range.size));
+}
+
 function getSectionStartOffset(view, sectionIndex) {
   const { doc, schema } = view.state;
   if (sectionIndex === 0) return 0;
@@ -160,10 +181,99 @@ export function moveSection(view, fromSectionIndex, toSectionIndex, dropPosition
 
   const hrNode = schema.nodes.horizontal_rule.create();
   const newNodes = [];
+  let movedSectionStart;
   reordered.forEach((sectionNodes, i) => {
     if (i > 0) newNodes.push(hrNode);
+    if (sectionNodes === moved) {
+      movedSectionStart = newNodes.reduce((size, node) => size + node.nodeSize, 0);
+    }
     newNodes.push(...sectionNodes);
   });
 
-  view.dispatch(view.state.tr.replaceWith(0, doc.content.size, newNodes));
+  const tr = view.state.tr.replaceWith(0, doc.content.size, newNodes);
+  if (movedSectionStart != null && moved.length) {
+    tr.setSelection(NodeSelection.create(tr.doc, movedSectionStart));
+  }
+  view.dispatch(tr);
+}
+
+// Counterpart to getSectionStartOffset — the hr position bounding the previous section.
+function getSectionEndOffset(view, sectionIndex) {
+  if (sectionIndex === 0) return 0;
+  const { doc, schema } = view.state;
+  let hrCount = 0;
+  let result = 0;
+  doc.forEach((node, offset) => {
+    if (node.type === schema.nodes.horizontal_rule) {
+      hrCount += 1;
+      if (hrCount === sectionIndex) result = offset;
+    }
+  });
+  return result;
+}
+
+export function moveContentItem(view, fromChild, target, dropPosition) {
+  if (!view) return;
+  const { doc } = view.state;
+  const from = getContentItemRange(doc, fromChild);
+  if (!from) return;
+
+  let insertPos;
+  if (target.type === 'content') {
+    const to = getContentItemRange(doc, target.child);
+    if (!to || to.pos === from.pos) return;
+    insertPos = dropPosition === 'before' ? to.pos : to.pos + to.size;
+  } else if (target.type === 'block') {
+    const positions = getBlockPositions(view);
+    if (target.blockIndex >= positions.length) return;
+    const toPos = positions[target.blockIndex];
+    const toNode = doc.nodeAt(toPos);
+    if (!toNode) return;
+    insertPos = dropPosition === 'before' ? toPos : toPos + toNode.nodeSize;
+  } else if (target.type === 'section') {
+    // before the header = last item of the previous section, after = first of this one
+    insertPos = dropPosition === 'before'
+      ? getSectionEndOffset(view, target.sectionIndex)
+      : getSectionStartOffset(view, target.sectionIndex);
+  } else {
+    return;
+  }
+
+  spliceNode(view, from, insertPos);
+}
+
+function getBlockRange(view, blockIndex) {
+  const { doc } = view.state;
+  const positions = getBlockPositions(view);
+  if (blockIndex >= positions.length) return null;
+  const pos = positions[blockIndex];
+  const node = doc.nodeAt(pos);
+  return node ? { pos, size: node.nodeSize, node } : null;
+}
+
+// Reverse of moveContentItem's 'content' target — a block landing next to a content item.
+export function moveBlockToContentItem(view, blockIndex, targetChild, dropPosition) {
+  if (!view) return;
+  const from = getBlockRange(view, blockIndex);
+  if (!from) return;
+
+  const to = getContentItemRange(view.state.doc, targetChild);
+  if (!to) return;
+  const insertPos = dropPosition === 'before' ? to.pos : to.pos + to.size;
+
+  spliceNode(view, from, insertPos);
+}
+
+// Reverse of moveContentItem's 'section' target — a lone block landing at the boundary
+// of a section with no blocks to anchor on.
+export function moveBlockToSection(view, blockIndex, sectionIndex, dropPosition) {
+  if (!view) return;
+  const from = getBlockRange(view, blockIndex);
+  if (!from) return;
+
+  const insertPos = dropPosition === 'before'
+    ? getSectionEndOffset(view, sectionIndex)
+    : getSectionStartOffset(view, sectionIndex);
+
+  spliceNode(view, from, insertPos);
 }
diff --git a/blocks/canvas/editor-utils/editor-utils.js b/blocks/canvas/editor-utils/editor-utils.js
index 42bf61e5b..6b7ca0225 100644
--- a/blocks/canvas/editor-utils/editor-utils.js
+++ b/blocks/canvas/editor-utils/editor-utils.js
@@ -133,6 +133,8 @@ const EDITABLES = [
   { selector: 'p', nodeName: 'P' },
   { selector: 'ol', nodeName: 'OL' },
   { selector: 'ul', nodeName: 'UL' },
+  { selector: 'pre', nodeName: 'PRE' },
+  { selector: 'blockquote', nodeName: 'BLOCKQUOTE' },
 ];
 const EDITABLE_SELECTORS = EDITABLES.map((edit) => edit.selector).join(', ');
 
@@ -261,22 +263,106 @@ export function getInstrumentedHTML(view) {
 
 const SKIP_BLOCK_CLASSES = new Set(['default-content-wrapper', 'metadata', 'block-marker']);
 
+function hasDefaultContent(el) {
+  if (el.textContent?.trim()) return true;
+  return el.matches?.('img') || !!el.querySelector?.('img');
+}
+
+function getDefaultContentProseIndex(el, kind) {
+  // A <p> wrapping an image keeps its own data-prose-index, but only the nested
+  // data-image-index resolves to the image node (prose2aem leaves the <p> unless the
+  // image is the section's sole child), so for kind 'image' it must win.
+  if (kind === 'image') {
+    const nestedImage = el.querySelector('[data-image-index]');
+    if (nestedImage) return Number(nestedImage.getAttribute('data-image-index'));
+  }
+  const own = el.getAttribute('data-prose-index') ?? el.getAttribute('data-image-index');
+  if (own != null) return Number(own);
+  const nested = el.querySelector('[data-prose-index], [data-image-index]');
+  if (!nested) return undefined;
+  const attr = nested.getAttribute('data-prose-index') ?? nested.getAttribute('data-image-index');
+  return attr != null ? Number(attr) : undefined;
+}
+
+function firstLineText(el) {
+  const clone = el.cloneNode(true);
+  clone.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
+  return clone.textContent.trim().split('\n')[0].trim();
+}
+
+function getContentSnippet(el, kind) {
+  if (kind === 'list') return firstLineText(el.querySelector(':scope > li') ?? el);
+  if (kind === 'quote') return firstLineText(el.querySelector(':scope > p') ?? el);
+  return firstLineText(el);
+}
+
+function getDefaultContentKind(el) {
+  const tag = el.tagName;
+  if (/^H[1-6]$/.test(tag)) return { kind: 'heading', level: Number(tag[1]) };
+  if (tag === 'OL') return { kind: 'list', ordered: true };
+  if (tag === 'UL') return { kind: 'list', ordered: false };
+  if (tag === 'PRE') return { kind: 'code' };
+  if (tag === 'BLOCKQUOTE') return { kind: 'quote' };
+  if (el.textContent?.trim()) return { kind: 'paragraph' };
+  // A text-less <p> wraps only an image, as does a bare <picture>/<img> — but a text-less
+  // <p> with no image at all is just an empty paragraph, not an image wrapper.
+  if (el.matches?.('img') || el.querySelector?.('img')) return { kind: 'image' };
+  return { kind: 'paragraph' };
+}
+
 export function parseSections(htmlText) {
   const doc = new DOMParser().parseFromString(htmlText, 'text/html');
   const container = doc.querySelector('main') ?? doc.body;
   let flatIndex = 0;
   return Array.from(container.querySelectorAll(':scope > div'), (section, sectionIndex) => {
     const blocks = [];
-    Array.from(section.querySelectorAll(':scope > div[class]')).forEach((el) => {
-      const name = el.classList[0];
-      if (!name || SKIP_BLOCK_CLASSES.has(name)) return;
-      const rawProseIndex = el.getAttribute('data-block-index');
-      const proseIndex = rawProseIndex != null ? Number(rawProseIndex) : undefined;
-      const innerText = el.textContent?.trim() ?? '';
-      blocks.push({ name, blockIndex: flatIndex, proseIndex, innerText });
-      flatIndex += 1;
+    const items = [];
+    let currentRun = [];
+
+    const flushRun = () => {
+      if (currentRun.length) {
+        items.push({
+          type: 'content',
+          proseIndex: getDefaultContentProseIndex(currentRun[0]),
+          innerText: currentRun.map((el) => el.textContent.trim()).filter(Boolean).join(' '),
+          children: currentRun.map((el) => {
+            const kindInfo = getDefaultContentKind(el);
+            return {
+              type: 'content',
+              ...kindInfo,
+              proseIndex: getDefaultContentProseIndex(el, kindInfo.kind),
+              innerText: el.textContent.trim(),
+              snippet: getContentSnippet(el, kindInfo.kind),
+            };
+          }),
+        });
+      }
+      currentRun = [];
+    };
+
+    Array.from(section.children).forEach((el) => {
+      const name = el.tagName === 'DIV' ? el.classList[0] : undefined;
+      const isBlock = name && !SKIP_BLOCK_CLASSES.has(name);
+
+      if (isBlock) {
+        flushRun();
+        const rawProseIndex = el.getAttribute('data-block-index');
+        const proseIndex = rawProseIndex != null ? Number(rawProseIndex) : undefined;
+        const innerText = el.textContent?.trim() ?? '';
+        const block = { name, blockIndex: flatIndex, proseIndex, innerText };
+        blocks.push(block);
+        items.push({ type: 'block', ...block });
+        flatIndex += 1;
+        return;
+      }
+
+      // Skip empty nodes — prose2aem doesn't always strip them (e.g. an empty <h2> can
+      // survive serialization) — so they neither break nor join a run.
+      if (hasDefaultContent(el)) currentRun.push(el);
     });
-    return { sectionIndex, blocks };
+    flushRun();
+
+    return { sectionIndex, blocks, items };
   });
 }
 
@@ -333,6 +419,21 @@ export const editorSelectChange = (() => {
   };
 })();
 
+// Event observable — no replay on subscribe. See docs/canvas-events.md.
+// Carries a raw ProseMirror position, not a block index, for the outline's default-content entries.
+export const editorProseSelectChange = (() => {
+  const listeners = new Set();
+  return {
+    emit(detail) {
+      listeners.forEach((fn) => fn(detail));
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+  };
+})();
+
 export function updateDocument(ctx) {
   if (ctx.suppressRerender) return undefined;
   const body = getInstrumentedHTML(ctx.view);
diff --git a/blocks/canvas/editor-utils/prose-diff.js b/blocks/canvas/editor-utils/prose-diff.js
index fe8a9259a..7c7df61fa 100644
--- a/blocks/canvas/editor-utils/prose-diff.js
+++ b/blocks/canvas/editor-utils/prose-diff.js
@@ -54,6 +54,7 @@ export function findChangedNodes(oldDoc, newDoc) {
         pos,
         oldAttrs: oldNode.attrs,
         newAttrs: newNode.attrs,
+        nodeType: newNode.type.name,
       });
     }
 
@@ -103,6 +104,12 @@ export function findChangedNodes(oldDoc, newDoc) {
 
 export const EDITABLE_TYPES = ['heading', 'paragraph', 'ordered_list', 'bullet_list'];
 
+function changedNodeType(change) {
+  if (change.type === 'attrs') return change.nodeType;
+  if (change.type === 'replaced') return change.newNode?.type.name ?? change.oldNode?.type.name;
+  return undefined;
+}
+
 export function findCommonEditableAncestor(view, changes, prevState) {
   if (changes.length === 0) return null;
 
@@ -163,7 +170,15 @@ export function createTrackingPlugin(rerenderPage, updateCursors, getEditor, onS
             const changes = findChangedNodes(prevState.doc, view.state.doc);
 
             if (changes.length > 0) {
-              const commonEditable = findCommonEditableAncestor(view, changes, prevState);
+              // Only an EDITABLE_TYPES node changing its own attrs/type (heading level,
+              // list-type swap) needs a full outline re-parse; the same change on e.g. an
+              // image's src does not, so it takes the in-place text sync instead.
+              const identityChanged = changes.some((c) => (
+                (c.type === 'attrs' || c.type === 'replaced') && EDITABLE_TYPES.includes(changedNodeType(c))
+              ));
+              const commonEditable = identityChanged
+                ? null
+                : findCommonEditableAncestor(view, changes, prevState);
 
               if (commonEditable) {
                 getEditor?.({ cursorOffset: commonEditable.pos + 1 });
diff --git a/blocks/canvas/ew-editor-doc/ew-editor-doc.js b/blocks/canvas/ew-editor-doc/ew-editor-doc.js
index 425224868..f567ed6b3 100644
--- a/blocks/canvas/ew-editor-doc/ew-editor-doc.js
+++ b/blocks/canvas/ew-editor-doc/ew-editor-doc.js
@@ -1,9 +1,9 @@
 import { LitElement, html, nothing } from 'da-lit';
-import { yUndo, yRedo, NodeSelection } from 'da-y-wrapper';
+import { yUndo, yRedo, NodeSelection, TextSelection } from 'da-y-wrapper';
 import { getNx } from '../../../scripts/utils.js';
 import {
   updateDocument, updateCursors, getInstrumentedHTML,
-  editorHtmlChange, editorSelectChange, getEditor,
+  editorHtmlChange, editorSelectChange, editorProseSelectChange, getEditor,
 } from '../editor-utils/editor-utils.js';
 import { getActiveBlockIndex, getBlockPositions } from '../editor-utils/blocks.js';
 import {
@@ -13,7 +13,7 @@ import {
   editorDocRenderPhase,
 } from './utils/ctx.js';
 import { subscribeCollabUserList } from './utils/awareness-users.js';
-import { describeDocSelection, applyHighlight, SEL_BLOCK, selectedNodePayload } from './utils/selection.js';
+import { describeDocSelection, applyHighlight, SEL_BLOCK, selectedNodePayload, activeContentProseIndex } from './utils/selection.js';
 import {
   prefetchWysiwygCookiesIfSignedIn,
   wireQuickEditControllerPort,
@@ -29,6 +29,16 @@ import { hideSelectionToolbar, setSelectionToolbarCtx } from '../editor-utils/se
 import { createExtensionsBridgePlugin } from '../editor-utils/extensions-bridge.js';
 import { MESSAGE_TYPES } from '../utils/quick-edit-messages.js';
 
+// Maps ew-page-outline's default-content `kind` to the PM node type(s) it can back,
+// so a matching node at proseIndex can be selected as a whole (see _scrollDocToProseIndex).
+const CONTENT_KIND_NODE_NAMES = {
+  paragraph: ['paragraph'],
+  heading: ['heading'],
+  list: ['bullet_list', 'ordered_list'],
+  code: ['code_block'],
+  quote: ['blockquote'],
+};
+
 const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 const { CHAT_EVENT } = await import(`${getNx()}/blocks/chat/constants.js`);
 
@@ -120,11 +130,54 @@ export class EwEditorDoc extends LitElement {
     view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
   }
 
-  _broadcastSelectedNode(scrollIntoView = false) {
+  // TextSelection.near is the fallback for a drifted/mid-node proseIndex. A kind match
+  // selects a NodeSelection instead, for the block-style highlight. Either way, broadcasts
+  // the raw proseIndex, since that's what layout-view's data-prose-index carries.
+  _scrollDocToProseIndex(proseIndex, kind) {
+    if (proseIndex == null || proseIndex < 0) return;
+    const { view } = this._proseContext ?? {};
+    if (!view) return;
+    const { doc } = view.state;
+    if (proseIndex > doc.content.size) return;
+
+    // The dispatch below runs the tracking plugin's onSelectionChange synchronously, which
+    // would otherwise broadcast its own (null, for non-image/table selections) node payload
+    // an instant before the correct one just below overwrites it.
+    this._suppressAutoBroadcast = true;
+    if (kind === 'image' && doc.nodeAt(proseIndex)?.type.name === 'image') {
+      const sel = NodeSelection.create(doc, proseIndex);
+      view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+      this._suppressAutoBroadcast = false;
+      this._broadcastSelectedNode(true);
+      return;
+    }
+
+    // Non-image content's proseIndex is one position inside the node's own start
+    // (see activeContentProseIndex in utils/selection.js) — step back one for the anchor.
+    const nodeStart = proseIndex - 1;
+    const nodeNames = CONTENT_KIND_NODE_NAMES[kind];
+    if (nodeStart >= 0 && nodeNames?.includes(doc.nodeAt(nodeStart)?.type.name)) {
+      const sel = NodeSelection.create(doc, nodeStart);
+      view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+      this._suppressAutoBroadcast = false;
+      this._broadcastSelectedNode(true, { anchorType: 'content', proseIndex });
+      return;
+    }
+
+    const sel = TextSelection.near(doc.resolve(proseIndex));
+    view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+    this._suppressAutoBroadcast = false;
+    this._broadcastSelectedNode(true, { anchorType: 'content', proseIndex });
+  }
+
+  // overrideNode lets content navigation (a TextSelection selectedNodePayload can't
+  // classify) broadcast an explicit anchorType/proseIndex instead of a derived one.
+  _broadcastSelectedNode(scrollIntoView = false, overrideNode = undefined) {
+    if (this._suppressAutoBroadcast && overrideNode === undefined) return;
     const port = this._controllerCtx?.port;
     const { view } = this._proseContext ?? {};
     if (!port || !view) return;
-    const node = selectedNodePayload(view);
+    const node = overrideNode !== undefined ? overrideNode : selectedNodePayload(view);
     const key = node ? `${node.anchorType}:${node.proseIndex}` : 'null';
     const forceScroll = scrollIntoView && Boolean(node);
     if (!forceScroll && key === this._lastBroadcastNodeKey) return;
@@ -171,7 +224,6 @@ export class EwEditorDoc extends LitElement {
       port: this.quickEditPort,
       iframe: this._wysiwygIframe,
       suppressRerender: false,
-      lastBlockIndex: undefined,
       owner: org,
       repo,
       path: controllerPathnameFromEditorCtx(this.ctx),
@@ -248,6 +300,7 @@ export class EwEditorDoc extends LitElement {
             (data) => { if (this._controllerCtx) getEditor(data, this._controllerCtx); },
             (pmView) => {
               const blockIndex = getActiveBlockIndex(pmView);
+              const proseIndex = activeContentProseIndex(pmView);
               const { kind, ...descriptor } = describeDocSelection(pmView);
               const selKey = `${descriptor.selFrom}|${descriptor.selTo}|${kind}`;
               if (blockIndex === this._lastDocBlockIndex && selKey === this._lastDocSelKey) return;
@@ -255,6 +308,7 @@ export class EwEditorDoc extends LitElement {
               this._lastDocSelKey = selKey;
               editorSelectChange.emit({
                 blockIndex,
+                proseIndex,
                 source: 'doc',
                 explicit: descriptor.selectionType === SEL_BLOCK,
                 ...descriptor,
@@ -309,6 +363,8 @@ export class EwEditorDoc extends LitElement {
         this._scrollDocToBlock(blockIndex);
         if (source === 'outline') this._broadcastSelectedNode(true);
       });
+    this._unsubscribeProseSelect = editorProseSelectChange
+      .subscribe(({ proseIndex, kind }) => this._scrollDocToProseIndex(proseIndex, kind));
     this._onCanvasHighlight = (e) => this._applyHighlight(e.detail);
     document.addEventListener(CHAT_EVENT.HIGHLIGHT_SELECTION, this._onCanvasHighlight);
   }
@@ -322,6 +378,7 @@ export class EwEditorDoc extends LitElement {
     this.parentElement?.removeEventListener('nx-wysiwyg-port-ready', this._onWysiwygPortReady);
     document.removeEventListener(CHAT_EVENT.HIGHLIGHT_SELECTION, this._onCanvasHighlight);
     this._unsubscribeSelect?.();
+    this._unsubscribeProseSelect?.();
     this._teardown();
     setSelectionToolbarCtx();
     super.disconnectedCallback();
diff --git a/blocks/canvas/ew-editor-doc/utils/selection.js b/blocks/canvas/ew-editor-doc/utils/selection.js
index dee1d2775..6dca0d935 100644
--- a/blocks/canvas/ew-editor-doc/utils/selection.js
+++ b/blocks/canvas/ew-editor-doc/utils/selection.js
@@ -68,6 +68,23 @@ export function selectedNodePayload(view) {
   return null;
 }
 
+// Mirrors data-prose-index/getDefaultContentProseIndex: non-image content is indexed
+// one position *inside* its own start (posAtDOM(el, 0)), since da-nx's inline-editor
+// bootstrap depends on that exact value as its cursorOffset (see prose-diff.js/da-nx's
+// prose.js). Images use their own start directly; tables are excluded (tracked via blockIndex).
+export function activeContentProseIndex(view) {
+  const sel = view?.state?.selection;
+  if (!sel) return undefined;
+  if (sel instanceof NodeSelection) {
+    const name = sel.node?.type?.name;
+    if (name === 'table') return undefined;
+    return name === 'image' ? sel.from : sel.from + 1;
+  }
+  const { $from } = sel;
+  if ($from.depth < 1) return undefined;
+  return $from.node(1).type.name === 'table' ? undefined : $from.before(1) + 1;
+}
+
 export function applyHighlight(view, { selFrom, selTo, selectionType } = {}) {
   if (!view || typeof selFrom !== 'number' || typeof selTo !== 'number') return;
   const { doc } = view.state;
diff --git a/blocks/canvas/ew-editor-wysiwyg/utils/handlers.js b/blocks/canvas/ew-editor-wysiwyg/utils/handlers.js
index 37b6a59fe..4fe644e1d 100644
--- a/blocks/canvas/ew-editor-wysiwyg/utils/handlers.js
+++ b/blocks/canvas/ew-editor-wysiwyg/utils/handlers.js
@@ -5,8 +5,6 @@ import {
   NX_QUICK_EDIT_IFRAME_SELECTION_META,
   NX_QUICK_EDIT_CLEAR_IFRAME_SELECTION_ORIGIN_META,
 } from '../../editor-utils/selection-toolbar.js';
-import { editorSelectChange } from '../../editor-utils/editor-utils.js';
-import { getActiveBlockIndex } from '../../editor-utils/blocks.js';
 
 export function handleCursorMove({ cursorOffset, textCursorOffset }, ctx) {
   const { view, wsProvider } = ctx;
@@ -59,6 +57,9 @@ export function handleCursorMove({ cursorOffset, textCursorOffset }, ctx) {
     }
 
     ctx.suppressRerender = true;
+    // dispatch() already triggers createTrackingPlugin's hook, which emits editorSelectChange
+    // with the full payload (incl. proseIndex) — a second, blockIndex-only emit here would
+    // clobber that and collapse the outline.
     view.dispatch(tr.scrollIntoView());
     ctx.suppressRerender = false;
     const tb = getSelectionToolbar();
@@ -66,11 +67,6 @@ export function handleCursorMove({ cursorOffset, textCursorOffset }, ctx) {
       tb.view = view;
       tb.show();
     }
-    const blockIndex = getActiveBlockIndex(view);
-    if (blockIndex !== ctx.lastBlockIndex) {
-      ctx.lastBlockIndex = blockIndex;
-      editorSelectChange.emit({ blockIndex, source: 'wysiwyg' });
-    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Error moving cursor:', error);
diff --git a/blocks/canvas/ew-page-outline/ew-page-outline.css b/blocks/canvas/ew-page-outline/ew-page-outline.css
index 926fb37f6..5910f491a 100644
--- a/blocks/canvas/ew-page-outline/ew-page-outline.css
+++ b/blocks/canvas/ew-page-outline/ew-page-outline.css
@@ -106,6 +106,11 @@
   border-bottom: 2px solid var(--s2-blue-600, #147af3);
 }
 
+/* Blocks have no chevron — indent to align with expandable content-item labels */
+.block-item:not(.content-item) {
+  padding-inline-start: calc(var(--s2-spacing-300) + 1rem);
+}
+
 .block-empty {
   cursor: default;
 }
@@ -116,6 +121,70 @@
   font-weight: 400;
 }
 
+.content-group {
+  margin: 0;
+  padding: 0;
+}
+
+.content-item:not(.content-child) {
+  cursor: pointer;
+}
+
+.content-item[aria-expanded]::before {
+  content: '›';
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1rem;
+  text-align: center;
+  transition: transform 0.15s;
+}
+
+.content-item[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.content-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.content-child {
+  padding-inline-start: var(--s2-spacing-500);
+  min-height: 44px;
+}
+
+.content-label {
+  font-weight: 400;
+  font-style: italic;
+  color: var(--s2-gray-700);
+}
+
+.selected .content-label {
+  color: var(--s2-blue-900);
+}
+
+.content-label-stack {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.content-snippet {
+  font-size: var(--s2-body-size-xs, 0.75rem);
+  font-weight: 400;
+  color: var(--s2-gray-600);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected .content-snippet {
+  color: var(--s2-blue-800);
+}
+
 .block-name {
   flex: 1;
   overflow: hidden;
diff --git a/blocks/canvas/ew-page-outline/ew-page-outline.js b/blocks/canvas/ew-page-outline/ew-page-outline.js
index cebfda450..f58194530 100644
--- a/blocks/canvas/ew-page-outline/ew-page-outline.js
+++ b/blocks/canvas/ew-page-outline/ew-page-outline.js
@@ -1,13 +1,17 @@
 import { LitElement, html, nothing } from 'da-lit';
 import { getNx } from '../../../scripts/utils.js';
 import { treeKeydown } from '../utils/tree-nav.js';
-import { editorHtmlChange, editorSelectChange, parseSections } from '../editor-utils/editor-utils.js';
+import { editorHtmlChange, editorSelectChange, editorProseSelectChange, parseSections } from '../editor-utils/editor-utils.js';
 import { getExtensionsBridge } from '../editor-utils/extensions-bridge.js';
 import {
   deleteBlock,
+  deleteContentItem,
   deleteSection,
   insertBlockAtSectionStart,
   moveBlock,
+  moveBlockToContentItem,
+  moveBlockToSection,
+  moveContentItem,
   moveSection,
 } from '../editor-utils/blocks.js';
 import { fetchExtensions } from '../ew-panel-extensions/helpers.js';
@@ -23,6 +27,7 @@ const style = await loadStyle(import.meta.url);
 const OUTLINE_TYPES = {
   SECTION: 'section',
   BLOCK: 'block',
+  CONTENT: 'content',
 };
 
 const DROP_POSITIONS = {
@@ -30,13 +35,39 @@ const DROP_POSITIONS = {
   AFTER: 'after',
 };
 
+function contentChildEqual(child, other) {
+  return child.proseIndex === other.proseIndex && child.innerText === other.innerText
+    && child.kind === other.kind && child.level === other.level && child.ordered === other.ordered;
+}
+
+function contentChildLabel(child) {
+  switch (child.kind) {
+    case 'heading': return `Heading ${child.level}`;
+    case 'list': return child.ordered ? 'Numbered list' : 'Bullet list';
+    case 'image': return 'Image';
+    case 'code': return 'Code block';
+    case 'quote': return 'Blockquote';
+    default: return 'Paragraph';
+  }
+}
+
+function itemsEqual(item, other) {
+  if (!other || item.type !== other.type) return false;
+  if (item.type === 'block') return item.blockIndex === other.blockIndex && item.name === other.name;
+  if (item.proseIndex !== other.proseIndex || item.innerText !== other.innerText) return false;
+  const children = item.children ?? [];
+  const otherChildren = other.children ?? [];
+  return children.length === otherChildren.length
+    && children.every((child, i) => contentChildEqual(child, otherChildren[i]));
+}
+
 function sectionsEqual(a, b) {
   if (!a || !b || a.length !== b.length) return false;
   return a.every((sec, i) => {
     const other = b[i];
     return sec.sectionIndex === other.sectionIndex
-      && sec.blocks.length === other.blocks.length
-      && sec.blocks.every((blk, j) => blk.name === other.blocks[j].name);
+      && sec.items.length === other.items.length
+      && sec.items.every((item, j) => itemsEqual(item, other.items[j]));
   });
 }
 
@@ -44,27 +75,39 @@ class EwPageOutline extends LitElement {
   static properties = {
     _sections: { state: true },
     _selectedBlockIndex: { state: true },
+    _selectedProseIndex: { state: true },
     _hashState: { state: true },
     _hasBlockLibrary: { state: true },
+    _expandedContent: { state: true },
   };
 
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [style];
+    this._expandedContent = new Set();
     this._unsubHash = hashChange.subscribe((state) => { this._hashState = state; });
     this._unsubscribeHtml = editorHtmlChange.subscribe((aemHtml) => {
       if (aemHtml.trim()) {
         const next = parseSections(aemHtml);
-        if (!sectionsEqual(next, this._sections)) this._sections = next;
+        if (!sectionsEqual(next, this._sections)) {
+          this._sections = next;
+          // A structural edit is the only time proseIndex-keyed expansion state can go
+          // stale (positions shift), so this is the one point where it's safe to drop —
+          // selection changes never do (see _expandRunForProse).
+          this._expandedContent = new Set();
+        }
       } else {
         this._sections = undefined;
         this._selectedBlockIndex = undefined;
+        this._selectedProseIndex = undefined;
       }
     });
     this._unsubscribeSelect = editorSelectChange
-      .subscribe(({ blockIndex, source }) => {
+      .subscribe(({ blockIndex, proseIndex, source }) => {
         if (source === 'outline') return;
         this._selectedBlockIndex = blockIndex;
+        this._selectedProseIndex = proseIndex;
+        if (proseIndex != null) this._expandRunForProse(proseIndex);
       });
   }
 
@@ -85,6 +128,7 @@ class EwPageOutline extends LitElement {
     if (this._prevSelectedPath !== undefined && sp !== this._prevSelectedPath) {
       this._sections = undefined;
       this._selectedBlockIndex = undefined;
+      this._selectedProseIndex = undefined;
     }
     this._prevSelectedPath = sp;
 
@@ -105,9 +149,54 @@ class EwPageOutline extends LitElement {
 
   _select(blockIndex) {
     this._selectedBlockIndex = blockIndex;
+    this._selectedProseIndex = undefined;
     editorSelectChange.emit({ blockIndex, source: 'outline' });
   }
 
+  _selectProse(proseIndex, kind) {
+    this._selectedProseIndex = proseIndex;
+    this._selectedBlockIndex = undefined;
+    this._expandRunForProse(proseIndex);
+    editorProseSelectChange.emit({ proseIndex, kind });
+  }
+
+  _toggleContentGroup(key) {
+    const next = new Set(this._expandedContent);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    this._expandedContent = next;
+  }
+
+  // Selection never collapses anything — it only ensures the run holding the new
+  // selection is visible, adding it alongside whatever's already expanded. Expansion is
+  // only ever cleared wholesale on a reparse (see the editorHtmlChange subscription).
+  _expandRunForProse(proseIndex) {
+    const runKey = this._findRunKeyForProseIndex(proseIndex);
+    if (runKey == null) return;
+    this._expandedContent = new Set(this._expandedContent).add(runKey);
+  }
+
+  _findRunKeyForProseIndex(proseIndex) {
+    const sections = this._sections ?? [];
+    for (const [secIdx, sec] of sections.entries()) {
+      for (const [itemIdx, item] of sec.items.entries()) {
+        if (item.type === 'content') {
+          const hasChild = item.children.some((child) => child.proseIndex === proseIndex);
+          if (hasChild) return item.proseIndex;
+
+          // A node invisible in the outline (e.g. a fresh empty paragraph from pressing
+          // Enter) still belongs to this run if its position falls between the run's own
+          // start and whatever comes next — the next item in this section, the next
+          // section's first item, or unbounded if this is the very last item overall.
+          const nextItem = sec.items[itemIdx + 1] ?? sections[secIdx + 1]?.items[0];
+          const upperBound = nextItem ? nextItem.proseIndex : Infinity;
+          if (proseIndex >= item.proseIndex && proseIndex < upperBound) return item.proseIndex;
+        }
+      }
+    }
+    return undefined;
+  }
+
   _clearDropIndicator() {
     this.shadowRoot.querySelector('[data-drop-position]')?.removeAttribute('data-drop-position');
   }
@@ -135,11 +224,12 @@ class EwPageOutline extends LitElement {
   }
 
   _onSectionDragOver(e, sec) {
+    const type = this._dragging?.type;
     const rect = e.currentTarget.getBoundingClientRect();
     const dropPosition = e.clientY < rect.top + rect.height / 2
       ? DROP_POSITIONS.BEFORE : DROP_POSITIONS.AFTER;
 
-    if (this._dragging?.type === OUTLINE_TYPES.SECTION) {
+    if (type === OUTLINE_TYPES.SECTION) {
       if (this._dragging.index === sec.sectionIndex) return;
       e.preventDefault();
 
@@ -148,20 +238,42 @@ class EwPageOutline extends LitElement {
         : e.currentTarget;
 
       this._setDropIndicator(el, { sectionIndex: sec.sectionIndex, dropPosition });
+    } else if (type === OUTLINE_TYPES.CONTENT) {
+      // Bubbles here from anywhere unclaimed in the section; only the header is before/after-aware.
+      e.preventDefault();
+      const headerEl = e.currentTarget.querySelector('[data-section-header]');
+      const onHeader = headerEl?.contains(e.target);
+      const contentDropPosition = onHeader ? dropPosition : DROP_POSITIONS.AFTER;
+      this._setDropIndicator(
+        headerEl,
+        { sectionIndex: sec.sectionIndex, dropPosition: contentDropPosition },
+      );
     } else {
-      if (!sec.blocks.length) return;
       if (sec.blocks.some((b) => b.blockIndex === this._dragging?.index)) return;
-      const { blockIndex } = sec.blocks[sec.blocks.length - 1];
-      e.preventDefault();
+      if (sec.blocks.length) {
+        const { blockIndex } = sec.blocks[sec.blocks.length - 1];
+        e.preventDefault();
+
+        const lastBlockEl = this.shadowRoot.querySelector(`[data-block-index="${blockIndex}"]`);
+        if (!lastBlockEl) return;
+        this._setDropIndicator(lastBlockEl, { blockIndex, dropPosition: DROP_POSITIONS.AFTER });
+        return;
+      }
 
-      const lastBlockEl = this.shadowRoot.querySelector(`[data-block-index="${blockIndex}"]`);
-      if (!lastBlockEl) return;
-      this._setDropIndicator(lastBlockEl, { blockIndex, dropPosition: DROP_POSITIONS.AFTER });
+      // No blocks to anchor on — fall back to the section boundary itself.
+      e.preventDefault();
+      const headerEl = e.currentTarget.querySelector('[data-section-header]');
+      this._setDropIndicator(
+        headerEl,
+        { sectionIndex: sec.sectionIndex, dropPosition: DROP_POSITIONS.AFTER },
+      );
     }
   }
 
   _onBlockDragOver(e, blockIndex) {
-    if (this._dragging?.type !== OUTLINE_TYPES.BLOCK || this._dragging.index === blockIndex) return;
+    const type = this._dragging?.type;
+    if (![OUTLINE_TYPES.BLOCK, OUTLINE_TYPES.CONTENT].includes(type)) return;
+    if (type === OUTLINE_TYPES.BLOCK && this._dragging.index === blockIndex) return;
     e.preventDefault();
     e.stopPropagation();
     const rect = e.currentTarget.getBoundingClientRect();
@@ -170,6 +282,33 @@ class EwPageOutline extends LitElement {
     this._setDropIndicator(e.currentTarget, { blockIndex, dropPosition });
   }
 
+  _onContentDragOver(e, child) {
+    const type = this._dragging?.type;
+    if (![OUTLINE_TYPES.CONTENT, OUTLINE_TYPES.BLOCK].includes(type)) return;
+    const isSameChild = type === OUTLINE_TYPES.CONTENT
+      && this._dragging.index.proseIndex === child.proseIndex;
+    if (isSameChild) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const dropPosition = e.clientY < rect.top + rect.height / 2
+      ? DROP_POSITIONS.BEFORE : DROP_POSITIONS.AFTER;
+    this._setDropIndicator(e.currentTarget, { contentChild: child, dropPosition });
+  }
+
+  _onContentGroupDragOver(e, item) {
+    if (![OUTLINE_TYPES.CONTENT, OUTLINE_TYPES.BLOCK].includes(this._dragging?.type)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const dropPosition = e.clientY < rect.top + rect.height / 2
+      ? DROP_POSITIONS.BEFORE : DROP_POSITIONS.AFTER;
+    const targetChild = dropPosition === DROP_POSITIONS.BEFORE
+      ? item.children[0]
+      : item.children[item.children.length - 1];
+    this._setDropIndicator(e.currentTarget, { contentChild: targetChild, dropPosition });
+  }
+
   _onDrop = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -177,7 +316,20 @@ class EwPageOutline extends LitElement {
     this._clearDragState();
     if (!_dropTarget || !_dragging) return;
     const { view } = getExtensionsBridge();
-    if (_dropTarget.blockIndex != null) {
+
+    if (_dragging.type === OUTLINE_TYPES.CONTENT) {
+      let target;
+      if (_dropTarget.contentChild) target = { type: 'content', child: _dropTarget.contentChild };
+      else if (_dropTarget.blockIndex != null) target = { type: 'block', blockIndex: _dropTarget.blockIndex };
+      else if (_dropTarget.sectionIndex != null) target = { type: 'section', sectionIndex: _dropTarget.sectionIndex };
+      else return;
+      moveContentItem(view, _dragging.index, target, _dropTarget.dropPosition);
+    } else if (_dragging.type === OUTLINE_TYPES.BLOCK && _dropTarget.contentChild) {
+      const { contentChild, dropPosition } = _dropTarget;
+      moveBlockToContentItem(view, _dragging.index, contentChild, dropPosition);
+    } else if (_dragging.type === OUTLINE_TYPES.BLOCK && _dropTarget.sectionIndex != null) {
+      moveBlockToSection(view, _dragging.index, _dropTarget.sectionIndex, _dropTarget.dropPosition);
+    } else if (_dropTarget.blockIndex != null) {
       if (_dragging.type !== OUTLINE_TYPES.BLOCK) return;
       moveBlock(view, _dragging.index, _dropTarget.blockIndex, _dropTarget.dropPosition);
     } else if (_dropTarget.sectionIndex != null) {
@@ -197,7 +349,18 @@ class EwPageOutline extends LitElement {
     }
   };
 
-  _onTreeKeydown = (e) => treeKeydown(e, this.shadowRoot);
+  _onTreeKeydown = (e) => {
+    const item = this.shadowRoot.activeElement;
+    if (item?.matches('.content-item[aria-expanded]')) {
+      const expanded = item.getAttribute('aria-expanded') === 'true';
+      if ((e.key === 'ArrowRight' && !expanded) || (e.key === 'ArrowLeft' && expanded)) {
+        e.preventDefault();
+        item.click();
+        return;
+      }
+    }
+    treeKeydown(e, this.shadowRoot);
+  };
 
   async _openAddBlockModal(e, sectionIndex) {
     e.stopPropagation();
@@ -210,6 +373,19 @@ class EwPageOutline extends LitElement {
     openBlockLibraryModal({ onInsert });
   }
 
+  // Array position (not proseIndex) of the run holding this child, so a delete can find
+  // it again afterward without comparing positions across the edit (see _onDelete).
+  _findRunLocation(proseIndex) {
+    for (const [sectionIndex, sec] of (this._sections ?? []).entries()) {
+      const itemIndex = sec.items.findIndex(
+        (item) => item.type === 'content'
+          && item.children.some((child) => child.proseIndex === proseIndex),
+      );
+      if (itemIndex !== -1) return { sectionIndex, itemIndex };
+    }
+    return undefined;
+  }
+
   _onDelete(e, type, index) {
     e.stopPropagation();
     e.preventDefault();
@@ -217,14 +393,24 @@ class EwPageOutline extends LitElement {
     if (!view) return;
     if (type === OUTLINE_TYPES.BLOCK) {
       deleteBlock(view, index);
+    } else if (type === OUTLINE_TYPES.CONTENT) {
+      const location = this._findRunLocation(index.proseIndex);
+      deleteContentItem(view, index);
+      // A content-child delete never reorders/merges runs, only shrinks or removes the
+      // deleted-from one — so the same array position still identifies it, if it survived.
+      const survivingRun = location
+        && this._sections?.[location.sectionIndex]?.items[location.itemIndex];
+      if (survivingRun?.type === 'content') this._expandRunForProse(survivingRun.proseIndex);
     } else {
       deleteSection(view, index);
     }
   }
 
   _renderDeleteButton(type, index) {
-    const label = type === OUTLINE_TYPES.SECTION
-      ? `Delete section ${index + 1}` : 'Delete block';
+    let noun = 'block';
+    if (type === OUTLINE_TYPES.SECTION) noun = `section ${index + 1}`;
+    else if (type === OUTLINE_TYPES.CONTENT) noun = contentChildLabel(index).toLowerCase();
+    const label = `Delete ${noun}`;
     return html`
       <button type="button" class="action-btn delete-btn" draggable="false"
               aria-label="${label}"
@@ -236,6 +422,44 @@ class EwPageOutline extends LitElement {
       </button>`;
   }
 
+  _renderContentGroup(item, isFirst) {
+    const key = item.proseIndex;
+    const expanded = this._expandedContent?.has(key);
+    return html`
+      <li class="content-group" role="none">
+        <div class="block-item content-item" role="treeitem"
+             tabindex="${isFirst ? '0' : '-1'}"
+             aria-expanded="${expanded}"
+             @click=${() => this._toggleContentGroup(key)}
+             @dragover=${(e) => this._onContentGroupDragOver(e, item)}
+             @drop=${this._onDrop}>
+          <span class="block-name content-label">Default content</span>
+        </div>
+        ${expanded ? html`
+          <ul class="content-children" role="group">
+            ${item.children.map((child) => html`
+              <li class="block-item content-item content-child ${this._selectedProseIndex === child.proseIndex ? 'selected' : ''}"
+                  role="treeitem" tabindex="-1"
+                  aria-selected="${this._selectedProseIndex === child.proseIndex}"
+                  draggable="true"
+                  @dragstart=${(e) => this._onDragStart(e, OUTLINE_TYPES.CONTENT, child)}
+                  @dragover=${(e) => this._onContentDragOver(e, child)}
+                  @drop=${this._onDrop}
+                  @dragend=${this._onDragEnd}
+                  @click=${(e) => { e.stopPropagation(); this._selectProse(child.proseIndex, child.kind); }}>
+                <span class="content-label-stack">
+                  <span class="block-name content-label">${contentChildLabel(child)}</span>
+                  ${child.snippet ? html`<span class="content-snippet">${child.snippet}</span>` : nothing}
+                </span>
+                ${this._renderDeleteButton(OUTLINE_TYPES.CONTENT, child)}
+                <svg aria-hidden="true" class="icon drag" viewBox="0 0 20 20">
+                  <use href="${DRAG_ICON_SRC}#icon"></use>
+                </svg>
+              </li>`)}
+          </ul>` : nothing}
+      </li>`;
+  }
+
   _renderSection(sec, isFirstSection) {
     return html`
       <li class="outline-section" role="none"
@@ -263,28 +487,30 @@ class EwPageOutline extends LitElement {
         </div>
         <ul class="block-list" role="group"
             aria-label="Blocks in section ${sec.sectionIndex + 1}">
-          ${sec.blocks.length === 0
+          ${sec.items.length === 0
         ? html`<li class="block-item block-empty"
                     role="treeitem" tabindex="-1">
-                <span class="empty-label">No blocks</span>
+                <span class="empty-label">Empty section</span>
               </li>`
-        : sec.blocks.map(({ name, blockIndex }, blockIdx) => html`
-            <li class="block-item ${this._selectedBlockIndex === blockIndex ? 'selected' : ''}" role="treeitem"
-                data-block-index="${blockIndex}"
-                tabindex="${isFirstSection && blockIdx === 0 ? '0' : '-1'}"
-                aria-selected="${this._selectedBlockIndex === blockIndex}"
+        : sec.items.map((item, itemIdx) => (item.type === 'block'
+          ? html`
+            <li class="block-item ${this._selectedBlockIndex === item.blockIndex ? 'selected' : ''}" role="treeitem"
+                data-block-index="${item.blockIndex}"
+                tabindex="${isFirstSection && itemIdx === 0 ? '0' : '-1'}"
+                aria-selected="${this._selectedBlockIndex === item.blockIndex}"
                 draggable="true"
-                @dragstart=${(e) => this._onDragStart(e, OUTLINE_TYPES.BLOCK, blockIndex)}
-                @dragover=${(e) => this._onBlockDragOver(e, blockIndex)}
+                @dragstart=${(e) => this._onDragStart(e, OUTLINE_TYPES.BLOCK, item.blockIndex)}
+                @dragover=${(e) => this._onBlockDragOver(e, item.blockIndex)}
                 @drop=${this._onDrop}
                 @dragend=${this._onDragEnd}
-                @click=${() => this._select(blockIndex)}>
-              <span class="block-name">${name}</span>
-              ${this._renderDeleteButton(OUTLINE_TYPES.BLOCK, blockIndex)}
+                @click=${() => this._select(item.blockIndex)}>
+              <span class="block-name">${item.name}</span>
+              ${this._renderDeleteButton(OUTLINE_TYPES.BLOCK, item.blockIndex)}
               <svg aria-hidden="true" class="icon drag" viewBox="0 0 20 20">
                 <use href="${DRAG_ICON_SRC}#icon"></use>
               </svg>
-            </li>`)}
+            </li>`
+          : this._renderContentGroup(item, isFirstSection && itemIdx === 0)))}
         </ul>
       </li>`;
   }
diff --git a/test/unit/blocks/canvas/editor-utils/blocks.test.js b/test/unit/blocks/canvas/editor-utils/blocks.test.js
new file mode 100644
index 000000000..736218206
--- /dev/null
+++ b/test/unit/blocks/canvas/editor-utils/blocks.test.js
@@ -0,0 +1,438 @@
+import { NodeSelection } from 'da-y-wrapper';
+import { expect } from '@esm-bundle/chai';
+import { setNx } from '../../../../../scripts/utils.js';
+import {
+  getContentItemRange,
+  deleteContentItem,
+  deleteBlock,
+  moveContentItem,
+  moveBlockToContentItem,
+  moveBlockToSection,
+  moveBlock,
+  moveSection,
+} from '../../../../../blocks/canvas/editor-utils/blocks.js';
+import { makeView, makeRealView } from '../test-helpers.js';
+
+setNx('/test/fixtures/nx', { hostname: 'example.com' });
+
+let getInstrumentedHTML;
+let parseSections;
+
+before(async () => {
+  ({ getInstrumentedHTML, parseSections } = await import('../../../../../blocks/canvas/editor-utils/editor-utils.js'));
+});
+
+// Real pipeline, not a hand-picked node position — that mismatch is what masked the bug.
+function childrenOf(view) {
+  const html = getInstrumentedHTML(view);
+  const sections = parseSections(html);
+  return sections.flatMap((section) => section.items.flatMap((item) => item.children ?? []));
+}
+
+function docTypes(doc) {
+  const types = [];
+  doc.forEach((n) => types.push(n.type.name));
+  return types;
+}
+
+function tableJSON(name, contentText = 'content') {
+  const cell = (text) => ({
+    type: 'table_cell',
+    content: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
+  });
+  return {
+    type: 'table',
+    content: [
+      { type: 'table_row', content: [cell(name)] },
+      { type: 'table_row', content: [cell(contentText)] },
+    ],
+  };
+}
+
+describe('getContentItemRange', () => {
+  const cases = [
+    ['paragraph', { type: 'paragraph', content: [{ type: 'text', text: 'Para text' }] }, 'paragraph', 'Para text'],
+    ['heading', { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'Heading text' }] }, 'heading', 'Heading text'],
+    ['code block', { type: 'code_block', content: [{ type: 'text', text: 'const x = 1;' }] }, 'code_block', 'const x = 1;'],
+    ['quote', { type: 'blockquote', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Some wisdom' }] }] }, 'blockquote', 'Some wisdom'],
+    ['multi-item list', {
+      type: 'bullet_list',
+      content: [
+        { type: 'list_item', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'One' }] }] },
+        { type: 'list_item', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Two' }] }] },
+      ],
+    }, 'bullet_list', 'OneTwo'],
+  ];
+
+  cases.forEach(([label, nodeJSON, expectedType, expectedText]) => {
+    it(`resolves a ${label} child to its whole node, not an inner fragment`, () => {
+      const view = makeRealView({ type: 'doc', content: [nodeJSON] });
+      const [child] = childrenOf(view);
+      const range = getContentItemRange(view.state.doc, child);
+      expect(range.pos).to.equal(0);
+      expect(range.node.type.name).to.equal(expectedType);
+      expect(range.node.textContent).to.equal(expectedText);
+    });
+  });
+
+  it('resolves an image child to its wrapping <p>, not just the inline image node', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'image', attrs: { src: 'x.png' } }] }],
+    });
+    const [child] = childrenOf(view);
+    const range = getContentItemRange(view.state.doc, child);
+    expect(range.pos).to.equal(0);
+    expect(range.node.type.name).to.equal('paragraph');
+  });
+});
+
+describe('deleteContentItem', () => {
+  it('removes a paragraph child entirely', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Keep me' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'Delete me' }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.innerText === 'Delete me');
+    deleteContentItem(view, child);
+
+    expect(view.state.doc.childCount).to.equal(1);
+    expect(view.state.doc.firstChild.textContent).to.equal('Keep me');
+  });
+
+  it('removes the whole code block, not just its text', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Keep me' }] },
+        { type: 'code_block', content: [{ type: 'text', text: 'const x = 1;' }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.kind === 'code');
+    deleteContentItem(view, child);
+
+    expect(view.state.doc.childCount).to.equal(1);
+    expect(view.state.doc.firstChild.textContent).to.equal('Keep me');
+  });
+
+  it('removes the whole blockquote, not just its inner paragraph text', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Keep me' }] },
+        { type: 'blockquote', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Wisdom' }] }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.kind === 'quote');
+    deleteContentItem(view, child);
+
+    expect(view.state.doc.childCount).to.equal(1);
+    expect(view.state.doc.firstChild.textContent).to.equal('Keep me');
+  });
+
+  it('removes the whole wrapping <p> for an image child — no orphaned empty paragraph', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Keep me' }] },
+        { type: 'paragraph', content: [{ type: 'image', attrs: { src: 'x.png' } }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.kind === 'image');
+    deleteContentItem(view, child);
+
+    expect(view.state.doc.childCount).to.equal(1);
+    expect(view.state.doc.firstChild.textContent).to.equal('Keep me');
+  });
+
+  it('leaves selection to PM\'s own mapping rather than selecting a sibling (matches deleteBlock)', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'C' }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.innerText === 'B');
+    deleteContentItem(view, child);
+
+    const { selection, doc } = view.state;
+    expect(selection).to.not.be.instanceOf(NodeSelection);
+    expect(doc.childCount).to.equal(2);
+  });
+});
+
+describe('moveContentItem', () => {
+  it('moves a whole code block relative to another content child (content target)', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'code_block', content: [{ type: 'text', text: 'const x = 1;' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+    const [codeChild, paraChild] = childrenOf(view);
+
+    moveContentItem(view, codeChild, { type: 'content', child: paraChild }, 'after');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['paragraph', 'code_block']);
+    expect(doc.lastChild.textContent).to.equal('const x = 1;');
+  });
+
+  it('moves a whole quote before a block without merging into it (block target)', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        tableJSON('hero'),
+        { type: 'blockquote', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Wisdom' }] }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.kind === 'quote');
+
+    moveContentItem(view, child, { type: 'block', blockIndex: 0 }, 'before');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['blockquote', 'table']);
+    expect(doc.firstChild.textContent).to.equal('Wisdom');
+  });
+
+  it('moves a whole multi-item list into a section with no default content yet (section target)', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        {
+          type: 'bullet_list',
+          content: [
+            { type: 'list_item', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'One' }] }] },
+            { type: 'list_item', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Two' }] }] },
+          ],
+        },
+        { type: 'horizontal_rule' },
+        tableJSON('hero'),
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.kind === 'list');
+
+    moveContentItem(view, child, { type: 'section', sectionIndex: 1 }, 'after');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['horizontal_rule', 'bullet_list', 'table']);
+    expect(doc.child(1).textContent).to.equal('OneTwo');
+  });
+
+  it('lands right before a section header — last item of the previous section', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'horizontal_rule' },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.innerText === 'B');
+
+    moveContentItem(view, child, { type: 'section', sectionIndex: 1 }, 'before');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['paragraph', 'paragraph', 'horizontal_rule']);
+    expect(doc.child(1).textContent).to.equal('B');
+  });
+
+  it('does not dispatch when the drop position is a no-op', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+    const [a, b] = childrenOf(view);
+    const before = view.state;
+
+    moveContentItem(view, a, { type: 'content', child: b }, 'before');
+
+    expect(view.state).to.equal(before);
+  });
+
+  it('selects the moved item at its new position', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+    const [a, b] = childrenOf(view);
+
+    moveContentItem(view, a, { type: 'content', child: b }, 'after');
+
+    const { selection } = view.state;
+    expect(selection).to.be.instanceOf(NodeSelection);
+    expect(selection.node.textContent).to.equal('A');
+    expect(docTypes(view.state.doc)).to.deep.equal(['paragraph', 'paragraph']);
+    expect(view.state.doc.lastChild.textContent).to.equal('A');
+  });
+});
+
+describe('moveBlockToContentItem', () => {
+  it('moves a block before a content child, landing as a sibling in doc order', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Loose para' }] },
+        tableJSON('hero'),
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.innerText === 'Loose para');
+
+    moveBlockToContentItem(view, 0, child, 'before');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['table', 'paragraph']);
+    expect(doc.firstChild.firstChild.firstChild.textContent).to.equal('hero');
+  });
+
+  it('moves a block after a content child', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        tableJSON('hero'),
+        { type: 'paragraph', content: [{ type: 'text', text: 'Loose para' }] },
+      ],
+    });
+    const child = childrenOf(view).find((c) => c.innerText === 'Loose para');
+
+    moveBlockToContentItem(view, 0, child, 'after');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['paragraph', 'table']);
+  });
+});
+
+describe('moveBlockToSection', () => {
+  it('moves a block into a section that has no blocks (including a wholly empty one)', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [{ type: 'horizontal_rule' }, tableJSON('hero')],
+    });
+
+    moveBlockToSection(view, 0, 0, 'after');
+
+    expect(docTypes(view.state.doc)).to.deep.equal(['table', 'horizontal_rule']);
+  });
+
+  it('lands right before a section header — last item of the previous section', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [tableJSON('hero'), { type: 'horizontal_rule' }, tableJSON('cards')],
+    });
+
+    moveBlockToSection(view, 1, 1, 'before');
+
+    const { doc } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['table', 'table', 'horizontal_rule']);
+    const names = [];
+    doc.descendants((n) => {
+      if (n.type.name === 'table') names.push(n.firstChild.firstChild.textContent);
+    });
+    expect(names).to.deep.equal(['hero', 'cards']);
+  });
+});
+
+describe('moveBlock (regression coverage for the shared splice helper)', () => {
+  it('reorders two blocks', () => {
+    const view = makeView({
+      type: 'doc',
+      content: [tableJSON('hero'), tableJSON('cards')],
+    });
+    moveBlock(view, 0, 1, 'after');
+
+    const names = [];
+    view.state.doc.descendants((n) => {
+      if (n.type.name === 'table') names.push(n.firstChild.firstChild.textContent);
+    });
+    expect(names).to.deep.equal(['cards', 'hero']);
+  });
+
+  it('drops a block before another one', () => {
+    const view = makeView({
+      type: 'doc',
+      content: [tableJSON('hero'), tableJSON('cards'), tableJSON('columns')],
+    });
+    moveBlock(view, 2, 0, 'before');
+
+    const names = [];
+    view.state.doc.descendants((n) => {
+      if (n.type.name === 'table') names.push(n.firstChild.firstChild.textContent);
+    });
+    expect(names).to.deep.equal(['columns', 'hero', 'cards']);
+  });
+
+  it('selects the moved block at its new position', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [tableJSON('hero'), tableJSON('cards')],
+    });
+    moveBlock(view, 0, 1, 'after');
+
+    const { selection } = view.state;
+    expect(selection).to.be.instanceOf(NodeSelection);
+    expect(selection.node.type.name).to.equal('table');
+    expect(selection.node.firstChild.firstChild.textContent).to.equal('hero');
+  });
+});
+
+describe('moveSection', () => {
+  it('selects the first node of the moved section at its new position', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'horizontal_rule' },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+
+    moveSection(view, 0, 1, 'after');
+
+    const { doc, selection } = view.state;
+    expect(docTypes(doc)).to.deep.equal(['paragraph', 'horizontal_rule', 'paragraph']);
+    // Section 0 (containing 'A') is the one being moved, to land after section 1 ('B').
+    expect(doc.firstChild.textContent).to.equal('B');
+    expect(selection).to.be.instanceOf(NodeSelection);
+    expect(selection.node.textContent).to.equal('A');
+  });
+
+  it('does not throw when the moved section is empty', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'horizontal_rule' },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+
+    expect(() => moveSection(view, 0, 1, 'after')).to.not.throw();
+    // Pre-existing behavior: moving an empty section still leaves its separating hr.
+    expect(docTypes(view.state.doc)).to.deep.equal(['paragraph', 'horizontal_rule']);
+  });
+});
+
+describe('deleteBlock (no deliberate selection change)', () => {
+  it('leaves selection to PM\'s own mapping rather than selecting a sibling', () => {
+    const view = makeRealView({
+      type: 'doc',
+      content: [tableJSON('hero'), tableJSON('cards')],
+    });
+
+    deleteBlock(view, 0);
+
+    expect(view.state.selection).to.not.be.instanceOf(NodeSelection);
+    expect(docTypes(view.state.doc)).to.deep.equal(['table']);
+  });
+});
diff --git a/test/unit/blocks/canvas/editor-utils/editor-utils.test.js b/test/unit/blocks/canvas/editor-utils/editor-utils.test.js
index ad4484854..9e3947e2e 100644
--- a/test/unit/blocks/canvas/editor-utils/editor-utils.test.js
+++ b/test/unit/blocks/canvas/editor-utils/editor-utils.test.js
@@ -5,11 +5,13 @@ setNx('/test/fixtures/nx', { hostname: 'example.com' });
 
 let getPreviewOrigin;
 let fetchWysiwygBranch;
+let parseSections;
 
 before(async () => {
   const mod = await import('../../../../../blocks/canvas/editor-utils/editor-utils.js');
   getPreviewOrigin = mod.getPreviewOrigin;
   fetchWysiwygBranch = mod.fetchWysiwygBranch;
+  parseSections = mod.parseSections;
 });
 
 describe('getPreviewOrigin', () => {
@@ -119,3 +121,156 @@ describe('fetchWysiwygBranch', () => {
     expect(branch).to.equal('valid');
   });
 });
+
+describe('parseSections', () => {
+  it('collects a single block and mirrors it in items (unchanged behavior)', () => {
+    const html = `<main><div>
+      <div class="hero" data-block-index="0">Hero content</div>
+    </div></main>`;
+    const [section] = parseSections(html);
+    expect(section.blocks).to.deep.equal([
+      { name: 'hero', blockIndex: 0, proseIndex: 0, innerText: 'Hero content' },
+    ]);
+    expect(section.items).to.deep.equal([
+      { type: 'block', name: 'hero', blockIndex: 0, proseIndex: 0, innerText: 'Hero content' },
+    ]);
+  });
+
+  it('returns empty blocks and items for a section with nothing in it', () => {
+    const html = '<main><div></div></main>';
+    const [section] = parseSections(html);
+    expect(section.blocks).to.deep.equal([]);
+    expect(section.items).to.deep.equal([]);
+  });
+
+  it('produces separate default-content entries before and after a block', () => {
+    const html = `<main><div>
+      <p data-prose-index="1">Intro text</p>
+      <div class="hero" data-block-index="5">Hero</div>
+      <p data-prose-index="20">Outro text</p>
+    </div></main>`;
+    const [section] = parseSections(html);
+    expect(section.items.map((i) => i.type)).to.deep.equal(['content', 'block', 'content']);
+    expect(section.items[0]).to.deep.equal({
+      type: 'content',
+      proseIndex: 1,
+      innerText: 'Intro text',
+      children: [{ type: 'content', kind: 'paragraph', proseIndex: 1, innerText: 'Intro text', snippet: 'Intro text' }],
+    });
+    expect(section.items[2]).to.deep.equal({
+      type: 'content',
+      proseIndex: 20,
+      innerText: 'Outro text',
+      children: [{ type: 'content', kind: 'paragraph', proseIndex: 20, innerText: 'Outro text', snippet: 'Outro text' }],
+    });
+  });
+
+  it('groups consecutive loose children into a single content entry, listing each child', () => {
+    const html = `<main><div>
+      <h2 data-prose-index="1">Title</h2>
+      <p data-prose-index="5">Para one</p>
+      <p data-prose-index="12">Para two</p>
+    </div></main>`;
+    const [section] = parseSections(html);
+    expect(section.items).to.deep.equal([{
+      type: 'content',
+      proseIndex: 1,
+      innerText: 'Title Para one Para two',
+      children: [
+        {
+          type: 'content', kind: 'heading', level: 2, proseIndex: 1, innerText: 'Title', snippet: 'Title',
+        },
+        { type: 'content', kind: 'paragraph', proseIndex: 5, innerText: 'Para one', snippet: 'Para one' },
+        { type: 'content', kind: 'paragraph', proseIndex: 12, innerText: 'Para two', snippet: 'Para two' },
+      ],
+    }]);
+  });
+
+  it('classifies ordered/unordered lists and images', () => {
+    const html = `<main><div>
+      <ol data-prose-index="1"><li>one</li></ol>
+      <ul data-prose-index="5"><li>two</li></ul>
+      <picture><img data-image-index="9" src="x.png"></picture>
+    </div></main>`;
+    const [section] = parseSections(html);
+    const [{ children }] = section.items;
+    expect(children.map((c) => c.kind)).to.deep.equal(['list', 'list', 'image']);
+    expect(children[0].ordered).to.equal(true);
+    expect(children[1].ordered).to.equal(false);
+  });
+
+  it('classifies a top-level <blockquote> as a quote, not an image', () => {
+    const html = `<main><div>
+      <blockquote data-prose-index="1">Some wisdom</blockquote>
+    </div></main>`;
+    const [section] = parseSections(html);
+    const [{ children }] = section.items;
+    expect(children.map((c) => c.kind)).to.deep.equal(['quote']);
+    expect(children[0].proseIndex).to.equal(1);
+  });
+
+  it('classifies a <p>-wrapped image as image, not paragraph (prose2aem only unwraps the <p> when the image is the section\'s sole child), and reads the nested image index rather than the <p>\'s own', () => {
+    // getInstrumentedHTML stamps data-prose-index on every outermost <p>, including
+    // one that only wraps a <picture> — so a realistic fixture must include it too.
+    const html = `<main><div>
+      <h2 data-prose-index="1">Title</h2>
+      <p data-prose-index="4"><picture><img data-image-index="5" src="x.png"></picture></p>
+      <p data-prose-index="9">Caption text</p>
+    </div></main>`;
+    const [section] = parseSections(html);
+    const [{ children }] = section.items;
+    expect(children.map((c) => c.kind)).to.deep.equal(['heading', 'image', 'paragraph']);
+    expect(children[1].proseIndex).to.equal(5);
+  });
+
+  it('keeps a paragraph with mixed text and an inline image classified as paragraph', () => {
+    const html = `<main><div>
+      <p data-prose-index="1">Some text <img data-image-index="3" src="x.png"> more text</p>
+    </div></main>`;
+    const [section] = parseSections(html);
+    const [{ children }] = section.items;
+    expect(children[0].kind).to.equal('paragraph');
+  });
+
+  it('classifies a <pre> as a code block', () => {
+    const html = `<main><div>
+      <h2 data-prose-index="1">Title</h2>
+      <pre data-prose-index="5"><code>const x = 1;</code></pre>
+    </div></main>`;
+    const [section] = parseSections(html);
+    const [{ children }] = section.items;
+    expect(children.map((c) => c.kind)).to.deep.equal(['heading', 'code']);
+    expect(children[1]).to.deep.equal({ type: 'content', kind: 'code', proseIndex: 5, innerText: 'const x = 1;', snippet: 'const x = 1;' });
+  });
+
+  it('reads proseIndex from data-image-index on a loose image', () => {
+    const html = `<main><div>
+      <picture><img data-image-index="7" src="x.png"></picture>
+    </div></main>`;
+    const [section] = parseSections(html);
+    expect(section.items).to.deep.equal([{
+      type: 'content',
+      proseIndex: 7,
+      innerText: '',
+      children: [{ type: 'content', kind: 'image', proseIndex: 7, innerText: '', snippet: '' }],
+    }]);
+  });
+
+  it('handles multiple sections independently', () => {
+    const html = `<main>
+      <div><p data-prose-index="1">Section one text</p></div>
+      <div><div class="cards" data-block-index="0">Cards</div></div>
+    </main>`;
+    const sections = parseSections(html);
+    expect(sections).to.have.length(2);
+    expect(sections[0].items).to.deep.equal([{
+      type: 'content',
+      proseIndex: 1,
+      innerText: 'Section one text',
+      children: [{ type: 'content', kind: 'paragraph', proseIndex: 1, innerText: 'Section one text', snippet: 'Section one text' }],
+    }]);
+    expect(sections[1].items).to.deep.equal([
+      { type: 'block', name: 'cards', blockIndex: 0, proseIndex: 0, innerText: 'Cards' },
+    ]);
+  });
+});
diff --git a/test/unit/blocks/canvas/editor-utils/prose-diff.test.js b/test/unit/blocks/canvas/editor-utils/prose-diff.test.js
index 46aeebfdf..e334cb5bd 100644
--- a/test/unit/blocks/canvas/editor-utils/prose-diff.test.js
+++ b/test/unit/blocks/canvas/editor-utils/prose-diff.test.js
@@ -10,6 +10,11 @@ function docWithParagraph(text) {
   return schema.nodes.doc.create(null, para);
 }
 
+function docWithHeading(text, level = 2) {
+  const heading = schema.nodes.heading.create({ level }, schema.text(text));
+  return schema.nodes.doc.create(null, heading);
+}
+
 function setup() {
   let rerenderCalls = 0;
   let getEditorCalls = 0;
@@ -56,3 +61,66 @@ describe('createTrackingPlugin — trackingPluginKey skip flag', () => {
     expect(counts()).to.deep.equal({ rerenderCalls: 1, getEditorCalls: 0 });
   });
 });
+
+function setupHeading(level = 2) {
+  let rerenderCalls = 0;
+  let getEditorCalls = 0;
+  const plugin = createTrackingPlugin(
+    () => { rerenderCalls += 1; },
+    undefined,
+    () => { getEditorCalls += 1; },
+    undefined,
+  );
+  const prevState = EditorState.create({ schema, doc: docWithHeading('Title', level), plugins: [plugin] });
+  return { plugin, prevState, counts: () => ({ rerenderCalls, getEditorCalls }) };
+}
+
+describe('createTrackingPlugin — block identity changes', () => {
+  it('changing a heading\'s level calls rerenderPage, not getEditor (outline needs a full re-parse)', () => {
+    const { plugin, prevState, counts } = setupHeading(2);
+    const tr = prevState.tr.setNodeMarkup(0, undefined, { level: 3 });
+    const nextState = prevState.apply(tr);
+
+    plugin.spec.view().update({ state: nextState }, prevState);
+
+    expect(counts()).to.deep.equal({ rerenderCalls: 1, getEditorCalls: 0 });
+  });
+
+  it('a plain text edit inside a heading still takes the lightweight getEditor path', () => {
+    const { plugin, prevState, counts } = setupHeading(2);
+    const tr = prevState.tr.insertText('!', 1);
+    const nextState = prevState.apply(tr);
+
+    plugin.spec.view().update({ state: nextState }, prevState);
+
+    expect(counts()).to.deep.equal({ rerenderCalls: 0, getEditorCalls: 1 });
+  });
+});
+
+function setupImage(src) {
+  let rerenderCalls = 0;
+  let getEditorCalls = 0;
+  const plugin = createTrackingPlugin(
+    () => { rerenderCalls += 1; },
+    undefined,
+    () => { getEditorCalls += 1; },
+    undefined,
+  );
+  const para = schema.nodes.paragraph.create(null, schema.nodes.image.create({ src }));
+  const doc = schema.nodes.doc.create(null, para);
+  const prevState = EditorState.create({ schema, doc, plugins: [plugin] });
+  return { plugin, prevState, counts: () => ({ rerenderCalls, getEditorCalls }) };
+}
+
+describe('createTrackingPlugin — attrs changes outside EDITABLE_TYPES', () => {
+  it('changing an image\'s attrs (e.g. src) takes the lightweight getEditor path, not a full rerenderPage', () => {
+    const { plugin, prevState, counts } = setupImage('/a.png');
+    const imagePos = 1;
+    const tr = prevState.tr.setNodeMarkup(imagePos, undefined, { src: '/b.png' });
+    const nextState = prevState.apply(tr);
+
+    plugin.spec.view().update({ state: nextState }, prevState);
+
+    expect(counts()).to.deep.equal({ rerenderCalls: 0, getEditorCalls: 1 });
+  });
+});
diff --git a/test/unit/blocks/canvas/ew-editor-doc/ew-editor-doc.test.js b/test/unit/blocks/canvas/ew-editor-doc/ew-editor-doc.test.js
new file mode 100644
index 000000000..257395d23
--- /dev/null
+++ b/test/unit/blocks/canvas/ew-editor-doc/ew-editor-doc.test.js
@@ -0,0 +1,126 @@
+/* eslint-disable no-underscore-dangle */
+import { expect } from '@esm-bundle/chai';
+import { NodeSelection, TextSelection } from 'da-y-wrapper';
+import { setNx } from '../../../../../scripts/utils.js';
+import { createTestEditor, destroyEditor } from '../../edit/prose/test-helpers.js';
+
+setNx('/test/fixtures/nx', { hostname: 'example.com' });
+
+before(async () => {
+  await import('../../../../../blocks/canvas/ew-editor-doc/ew-editor-doc.js');
+});
+
+// Wraps view.dispatch so tests can assert the guarded early-returns in
+// _scrollDocToProseIndex skip dispatching, while still applying transactions that do.
+function spyDispatch(view) {
+  const calls = [];
+  const original = view.dispatch.bind(view);
+  view.dispatch = (tr) => {
+    calls.push(tr);
+    original(tr);
+  };
+  return calls;
+}
+
+// Replaces the default doc with a text paragraph + an image paragraph, mirroring a real page.
+function buildDoc(view) {
+  const { schema } = view.state;
+  const textPara = schema.nodes.paragraph.create(null, schema.text('hello world'));
+  const imagePara = schema.nodes.paragraph.create(null, schema.nodes.image.create({ src: '/x.png' }));
+  const { content } = schema.nodes.doc.create(null, [textPara, imagePara]);
+  view.dispatch(view.state.tr.replaceWith(0, view.state.doc.content.size, content));
+
+  let imagePos = -1;
+  view.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'image') imagePos = pos;
+  });
+  return { imagePos };
+}
+
+describe('EwEditorDoc — _scrollDocToProseIndex', () => {
+  let editor;
+  let el;
+  let imagePos;
+
+  beforeEach(async () => {
+    editor = await createTestEditor();
+    ({ imagePos } = buildDoc(editor.view));
+    el = document.createElement('ew-editor-doc');
+  });
+
+  afterEach(() => {
+    destroyEditor(editor);
+  });
+
+  it('selects the image node with a NodeSelection and broadcasts when kind is image and the node at proseIndex is an image', () => {
+    const dispatchCalls = spyDispatch(editor.view);
+    const broadcastCalls = [];
+    el._broadcastSelectedNode = (...args) => broadcastCalls.push(args);
+    el._proseContext = { view: editor.view };
+
+    el._scrollDocToProseIndex(imagePos, 'image');
+
+    expect(dispatchCalls).to.have.lengthOf(1);
+    expect(editor.view.state.selection).to.be.instanceOf(NodeSelection);
+    expect(editor.view.state.selection.from).to.equal(imagePos);
+    expect(broadcastCalls).to.deep.equal([[true]]);
+  });
+
+  it('selects the paragraph node with a NodeSelection and broadcasts the raw content anchor when proseIndex is one past the node start', () => {
+    const dispatchCalls = spyDispatch(editor.view);
+    const broadcastCalls = [];
+    el._broadcastSelectedNode = (...args) => broadcastCalls.push(args);
+    el._proseContext = { view: editor.view };
+
+    // proseIndex 1 mirrors the real data-prose-index/posAtDOM convention: one position
+    // inside the paragraph's own start (0), not the start itself.
+    el._scrollDocToProseIndex(1, 'paragraph');
+
+    expect(dispatchCalls).to.have.lengthOf(1);
+    expect(editor.view.state.selection).to.be.instanceOf(NodeSelection);
+    expect(editor.view.state.selection.from).to.equal(0);
+    expect(broadcastCalls).to.deep.equal([[true, { anchorType: 'content', proseIndex: 1 }]]);
+  });
+
+  it('falls back to a TextSelection near proseIndex when it lands mid-node and broadcasts a content anchor', () => {
+    const dispatchCalls = spyDispatch(editor.view);
+    const broadcastCalls = [];
+    el._broadcastSelectedNode = (...args) => broadcastCalls.push(args);
+    el._proseContext = { view: editor.view };
+
+    el._scrollDocToProseIndex(3, 'paragraph');
+
+    expect(dispatchCalls).to.have.lengthOf(1);
+    expect(editor.view.state.selection).to.be.instanceOf(TextSelection);
+    expect(broadcastCalls).to.deep.equal([[true, { anchorType: 'content', proseIndex: 3 }]]);
+  });
+
+  describe('guards', () => {
+    it('does nothing when proseIndex is null', () => {
+      const dispatchCalls = spyDispatch(editor.view);
+      el._proseContext = { view: editor.view };
+
+      el._scrollDocToProseIndex(null, 'text');
+
+      expect(dispatchCalls).to.have.lengthOf(0);
+    });
+
+    it('does nothing when proseIndex is negative', () => {
+      const dispatchCalls = spyDispatch(editor.view);
+      el._proseContext = { view: editor.view };
+
+      el._scrollDocToProseIndex(-1, 'text');
+
+      expect(dispatchCalls).to.have.lengthOf(0);
+    });
+
+    it('does nothing when proseIndex exceeds the document size', () => {
+      const dispatchCalls = spyDispatch(editor.view);
+      el._proseContext = { view: editor.view };
+
+      el._scrollDocToProseIndex(editor.view.state.doc.content.size + 10, 'text');
+
+      expect(dispatchCalls).to.have.lengthOf(0);
+    });
+  });
+});
diff --git a/test/unit/blocks/canvas/ew-editor-doc/utils/selection.test.js b/test/unit/blocks/canvas/ew-editor-doc/utils/selection.test.js
index 04fcb3220..0017f27a0 100644
--- a/test/unit/blocks/canvas/ew-editor-doc/utils/selection.test.js
+++ b/test/unit/blocks/canvas/ew-editor-doc/utils/selection.test.js
@@ -5,6 +5,7 @@ import {
   describeDocSelection,
   applyHighlight,
   selectedNodePayload,
+  activeContentProseIndex,
   SEL_BLOCK,
   SEL_ITEM,
   SEL_TEXT,
@@ -195,3 +196,70 @@ describe('selectedNodePayload', () => {
     expect(selectedNodePayload(editor.view)).to.deep.equal({ anchorType: 'image', proseIndex: imgPos, src: '/x.png' });
   });
 });
+
+describe('activeContentProseIndex', () => {
+  let editor;
+  beforeEach(async () => { editor = await createTestEditor(); });
+  afterEach(() => { destroyEditor(editor); });
+
+  // Expected value is the paragraph's own start (0) + 1, matching the data-prose-index/
+  // cursorOffset convention (see the comment on activeContentProseIndex).
+  it('returns the paragraph start + 1 for a text selection inside it', () => {
+    editor.view.dispatch(editor.view.state.tr.insertText('hello'));
+    const sel = TextSelection.create(editor.view.state.doc, 3, 3);
+    editor.view.dispatch(editor.view.state.tr.setSelection(sel));
+    expect(activeContentProseIndex(editor.view)).to.equal(1);
+  });
+
+  it('returns the node position + 1 for a NodeSelection on the paragraph itself', () => {
+    const { state } = editor.view;
+    editor.view.dispatch(state.tr.insertText('hello'));
+    const sel = NodeSelection.create(editor.view.state.doc, 0);
+    editor.view.dispatch(editor.view.state.tr.setSelection(sel));
+    expect(activeContentProseIndex(editor.view)).to.equal(1);
+  });
+
+  it('returns undefined for a table NodeSelection', () => {
+    const { state } = editor.view;
+    const { schema } = state;
+    const para = schema.nodes.paragraph.create(null, schema.text('cards'));
+    const cell = schema.nodes.table_cell.create({ colspan: 2, colwidth: null }, para);
+    const row = schema.nodes.table_row.create(null, cell);
+    const table = schema.nodes.table.create(null, row);
+    editor.view.dispatch(state.tr.replaceWith(0, state.doc.content.size, table));
+    const sel = NodeSelection.create(editor.view.state.doc, 0);
+    editor.view.dispatch(editor.view.state.tr.setSelection(sel));
+    expect(activeContentProseIndex(editor.view)).to.equal(undefined);
+  });
+
+  it('returns undefined for a text selection inside a table cell', () => {
+    const { state } = editor.view;
+    const { schema } = state;
+    const para = schema.nodes.paragraph.create(null, schema.text('cards'));
+    const cell = schema.nodes.table_cell.create({ colspan: 2, colwidth: null }, para);
+    const row = schema.nodes.table_row.create(null, cell);
+    const table = schema.nodes.table.create(null, row);
+    editor.view.dispatch(state.tr.replaceWith(0, state.doc.content.size, table));
+    let paraPos = -1;
+    editor.view.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'paragraph' && paraPos < 0) paraPos = pos;
+    });
+    const sel = TextSelection.create(editor.view.state.doc, paraPos + 1);
+    editor.view.dispatch(editor.view.state.tr.setSelection(sel));
+    expect(activeContentProseIndex(editor.view)).to.equal(undefined);
+  });
+
+  it('returns the node position for an image NodeSelection (images are outline content-children too)', () => {
+    const { state } = editor.view;
+    const { schema } = state;
+    const para = schema.nodes.paragraph.create(null, schema.nodes.image.create({ src: '/x.png' }));
+    editor.view.dispatch(state.tr.replaceWith(0, state.doc.content.size, para));
+    let imgPos = -1;
+    editor.view.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'image') imgPos = pos;
+    });
+    const sel = NodeSelection.create(editor.view.state.doc, imgPos);
+    editor.view.dispatch(editor.view.state.tr.setSelection(sel));
+    expect(activeContentProseIndex(editor.view)).to.equal(imgPos);
+  });
+});
diff --git a/test/unit/blocks/canvas/ew-page-outline/ew-page-outline.test.js b/test/unit/blocks/canvas/ew-page-outline/ew-page-outline.test.js
new file mode 100644
index 000000000..53c5c83be
--- /dev/null
+++ b/test/unit/blocks/canvas/ew-page-outline/ew-page-outline.test.js
@@ -0,0 +1,471 @@
+/* eslint-disable no-underscore-dangle */
+import { expect } from '@esm-bundle/chai';
+import { EditorState, EditorView } from 'da-y-wrapper';
+import { getSchema } from 'da-parser';
+import { setNx } from '../../../../../scripts/utils.js';
+import { makeRealView } from '../test-helpers.js';
+import { createTrackingPlugin } from '../../../../../blocks/canvas/editor-utils/prose-diff.js';
+
+setNx('/test/fixtures/nx', { hostname: 'example.com' });
+
+let editorHtmlChange;
+let editorProseSelectChange;
+let editorSelectChange;
+let getExtensionsBridge;
+let getInstrumentedHTML;
+let parseSections;
+
+before(async () => {
+  await import('../../../../../blocks/canvas/ew-page-outline/ew-page-outline.js');
+  const editorUtils = await import('../../../../../blocks/canvas/editor-utils/editor-utils.js');
+  ({ editorHtmlChange, editorProseSelectChange, editorSelectChange } = editorUtils);
+  ({ getInstrumentedHTML, parseSections } = editorUtils);
+  ({ getExtensionsBridge } = await import('../../../../../blocks/canvas/editor-utils/extensions-bridge.js'));
+});
+
+// Real pipeline, not a hand-picked node position — matches what the outline actually does.
+function childrenOf(view) {
+  const html = getInstrumentedHTML(view);
+  const sections = parseSections(html);
+  return sections.flatMap((section) => section.items.flatMap((item) => item.children ?? []));
+}
+
+function docSeq(doc) {
+  const seq = [];
+  doc.forEach((n) => seq.push(n.type.name === 'horizontal_rule' ? 'hr' : n.textContent));
+  return seq;
+}
+
+// Unlike makeRealView, wires the real tracking plugin so a delete/insert dispatched
+// through it auto-emits editorHtmlChange exactly like the production editor does —
+// needed to test that a reparse-driven expansion reset/re-expand actually happens.
+function makeTrackedView(json) {
+  const schema = getSchema();
+  const doc = schema.nodeFromJSON(json);
+  const dom = document.createElement('div');
+  document.body.appendChild(dom);
+  let view;
+  const plugins = [createTrackingPlugin(() => editorHtmlChange.emit(getInstrumentedHTML(view)))];
+  const state = EditorState.create({ schema, doc, plugins });
+  view = new EditorView(dom, { state });
+  return view;
+}
+
+async function createOutline() {
+  const el = document.createElement('ew-page-outline');
+  // _checkBlockLibrary fires once a hash with org/site is set — no-op it so this
+  // test doesn't reach the network.
+  el._checkBlockLibrary = async () => {};
+  document.body.appendChild(el);
+  await el.updateComplete;
+  el._hashState = { org: 'org', site: 'site', path: 'page' };
+  await el.updateComplete;
+  return el;
+}
+
+const contentGroupItem = (proseIndex, children) => ({
+  type: 'content',
+  proseIndex,
+  innerText: children.map((c) => c.innerText).filter(Boolean).join(' '),
+  children,
+});
+
+describe('ew-page-outline — expandable default content', () => {
+  let el;
+
+  beforeEach(async () => {
+    el = await createOutline();
+    el._sections = [{
+      sectionIndex: 0,
+      blocks: [],
+      items: [
+        contentGroupItem(1, [
+          {
+            type: 'content', kind: 'heading', level: 2, proseIndex: 1, innerText: 'Title', snippet: 'Title',
+          },
+          { type: 'content', kind: 'paragraph', proseIndex: 5, innerText: 'Para one', snippet: 'Para one' },
+          { type: 'content', kind: 'image', proseIndex: 9, innerText: '', snippet: '' },
+          {
+            type: 'content', kind: 'list', ordered: true, proseIndex: 12, innerText: 'one two', snippet: 'one two',
+          },
+          { type: 'content', kind: 'code', proseIndex: 15, innerText: 'const x = 1;', snippet: 'const x = 1;' },
+        ]),
+      ],
+    }];
+    await el.updateComplete;
+  });
+
+  afterEach(() => { el.remove(); });
+
+  it('renders a single collapsed "Default content" row with no children visible', () => {
+    const header = el.shadowRoot.querySelector('.content-item');
+    expect(header).to.exist;
+    expect(header.textContent.trim()).to.equal('Default content');
+    expect(header.getAttribute('aria-expanded')).to.equal('false');
+    expect(el.shadowRoot.querySelector('.content-children')).to.be.null;
+  });
+
+  it('expands to list every consecutive item on header click, then collapses again', async () => {
+    const header = el.shadowRoot.querySelector('.content-item');
+    header.click();
+    await el.updateComplete;
+
+    expect(header.getAttribute('aria-expanded')).to.equal('true');
+    const children = [...el.shadowRoot.querySelectorAll('.content-child')];
+    expect(children).to.have.lengthOf(5);
+    expect(children.map((c) => c.textContent.replace(/\s+/g, ' ').trim())).to.deep.equal([
+      'Heading 2 Title', 'Paragraph Para one', 'Image', 'Numbered list one two', 'Code block const x = 1;',
+    ]);
+
+    header.click();
+    await el.updateComplete;
+    expect(header.getAttribute('aria-expanded')).to.equal('false');
+    expect(el.shadowRoot.querySelector('.content-children')).to.be.null;
+  });
+
+  it('emits editorProseSelectChange with the child\'s own proseIndex and kind on click', async () => {
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+
+    let received;
+    const unsub = editorProseSelectChange.subscribe((detail) => { received = detail; });
+    const paragraphChild = [...el.shadowRoot.querySelectorAll('.content-child')][1];
+    paragraphChild.click();
+    unsub();
+
+    expect(received).to.deep.equal({ proseIndex: 5, kind: 'paragraph' });
+  });
+
+  it('emits the image kind for an image child, enabling layout-view NodeSelection', async () => {
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+
+    let received;
+    const unsub = editorProseSelectChange.subscribe((detail) => { received = detail; });
+    const imageChild = [...el.shadowRoot.querySelectorAll('.content-child')][2];
+    imageChild.click();
+    unsub();
+
+    expect(received).to.deep.equal({ proseIndex: 9, kind: 'image' });
+  });
+
+  it('marks a clicked content child as selected, and leaves its run expanded when a block is selected instead', async () => {
+    el._sections[0].blocks = [{ name: 'hero', blockIndex: 0 }];
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+
+    const paragraphChild = [...el.shadowRoot.querySelectorAll('.content-child')][1];
+    paragraphChild.click();
+    await el.updateComplete;
+
+    expect(paragraphChild.classList.contains('selected')).to.be.true;
+    expect(paragraphChild.getAttribute('aria-selected')).to.equal('true');
+
+    el._select(0);
+    await el.updateComplete;
+
+    // Selecting a block no longer collapses anything — the run stays expanded and its
+    // children stay rendered, just no longer marked selected.
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+    expect(paragraphChild.classList.contains('selected')).to.be.false;
+    expect(el.shadowRoot.querySelectorAll('.content-child')).to.have.lengthOf(5);
+  });
+
+  it('highlights a content child when the doc selection (not just an outline click) lands on it, and leaves it expanded on a later block selection', async () => {
+    editorSelectChange.emit({ blockIndex: -1, proseIndex: 5, source: 'doc' });
+    await el.updateComplete;
+
+    // A collapsed run expands additively to reveal a new selection, with no manual click needed.
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+    const paragraphChild = [...el.shadowRoot.querySelectorAll('.content-child')][1];
+    expect(paragraphChild.classList.contains('selected')).to.be.true;
+
+    editorSelectChange.emit({ blockIndex: 0, proseIndex: undefined, source: 'doc' });
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+    expect(paragraphChild.classList.contains('selected')).to.be.false;
+    expect(el.shadowRoot.querySelectorAll('.content-child')).to.have.lengthOf(5);
+  });
+
+  it('expands a run when the selection lands between two of its children, not on one exactly', async () => {
+    // Simulates pressing Enter mid-paragraph: the new empty node has no row of its own
+    // (filtered out of parseSections), but its proseIndex (7) falls between the
+    // surrounding real children (5 and 9), so it should still resolve to their run.
+    editorSelectChange.emit({ blockIndex: -1, proseIndex: 7, source: 'doc' });
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+  });
+
+  it('does not let an unmatched proseIndex leak expansion into a neighboring run', async () => {
+    el._sections = [
+      {
+        sectionIndex: 0,
+        blocks: [],
+        items: [contentGroupItem(1, [
+          { type: 'content', kind: 'paragraph', proseIndex: 1, innerText: 'One', snippet: 'One' },
+        ])],
+      },
+      {
+        sectionIndex: 1,
+        blocks: [],
+        items: [contentGroupItem(20, [
+          { type: 'content', kind: 'paragraph', proseIndex: 20, innerText: 'Two', snippet: 'Two' },
+        ])],
+      },
+    ];
+    await el.updateComplete;
+
+    // Group headers only — `.content-item` also matches rendered content-child rows.
+    const headers = () => el.shadowRoot.querySelectorAll('.content-group > .content-item');
+
+    // proseIndex 10 sits after section 0's only child (1) but well before section 1's
+    // (20) — with no next item in section 0 to bound it, it's attributed to section 0's
+    // run (the trailing/unbounded case a fresh Enter-created node at the end lands in).
+    editorSelectChange.emit({ blockIndex: -1, proseIndex: 10, source: 'doc' });
+    await el.updateComplete;
+
+    expect(headers()[0].getAttribute('aria-expanded')).to.equal('true');
+    expect(headers()[1].getAttribute('aria-expanded')).to.equal('false');
+
+    // proseIndex 25, past section 1's only child with nothing after it, resolves there.
+    editorSelectChange.emit({ blockIndex: -1, proseIndex: 25, source: 'doc' });
+    await el.updateComplete;
+
+    expect(headers()[1].getAttribute('aria-expanded')).to.equal('true');
+  });
+
+  it('resets expansion only when a structural edit actually changes the sections', async () => {
+    // Drives _sections through the real editorHtmlChange/parseSections pipeline (rather
+    // than the manual fixture in beforeEach) so re-emitting identical HTML is guaranteed
+    // to parse to a sectionsEqual result.
+    const initialHtml = `<main><div>
+      <h2 data-prose-index="1">Title</h2>
+      <p data-prose-index="5">Para one</p>
+    </div></main>`;
+    editorHtmlChange.emit(initialHtml);
+    await el.updateComplete;
+
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+
+    editorHtmlChange.emit(initialHtml);
+    await el.updateComplete;
+
+    // Same HTML reparses to an equal section tree — sectionsEqual holds, expansion survives.
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+
+    const changedHtml = `<main><div>
+      <h2 data-prose-index="1">Title</h2>
+    </div></main>`;
+    editorHtmlChange.emit(changedHtml);
+    await el.updateComplete;
+
+    // Structural change (a child removed) — sectionsEqual fails, expansion resets.
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('false');
+  });
+
+  it('expands and collapses the focused group header with ArrowRight/ArrowLeft', async () => {
+    const header = el.shadowRoot.querySelector('.content-item');
+    header.focus();
+
+    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    await el.updateComplete;
+    expect(header.getAttribute('aria-expanded')).to.equal('true');
+    expect(el.shadowRoot.querySelector('.content-children')).to.exist;
+
+    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    await el.updateComplete;
+    expect(header.getAttribute('aria-expanded')).to.equal('false');
+    expect(el.shadowRoot.querySelector('.content-children')).to.be.null;
+  });
+});
+
+describe('ew-page-outline — content drag & delete', () => {
+  let el;
+  let bridge;
+
+  beforeEach(async () => {
+    el = await createOutline();
+    bridge = getExtensionsBridge();
+  });
+
+  afterEach(() => {
+    el.remove();
+    bridge.view = null;
+  });
+
+  it('deletes a content child via its delete button', async () => {
+    bridge.view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Keep me' }] },
+        { type: 'code_block', content: [{ type: 'text', text: 'const x = 1;' }] },
+      ],
+    });
+    const child = childrenOf(bridge.view).find((c) => c.kind === 'code');
+
+    el._sections = [{
+      sectionIndex: 0,
+      blocks: [],
+      items: [contentGroupItem(child.proseIndex, [child])],
+    }];
+    await el.updateComplete;
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+
+    el.shadowRoot.querySelector('.content-child .delete-btn').click();
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['Keep me']);
+  });
+
+  it('keeps a run expanded after deleting one of its children', async () => {
+    bridge.view = makeTrackedView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+
+    editorHtmlChange.emit(getInstrumentedHTML(bridge.view));
+    await el.updateComplete;
+
+    el.shadowRoot.querySelector('.content-item').click();
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+
+    el.shadowRoot.querySelectorAll('.content-child .delete-btn')[0].click();
+    await el.updateComplete;
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['B']);
+    // No sibling-select workaround needed — the run survived the reparse-driven reset
+    // because _onDelete re-expands it by array position (see _findRunLocation).
+    expect(el.shadowRoot.querySelector('.content-item').getAttribute('aria-expanded')).to.equal('true');
+  });
+
+  it('reorders content children via drop onto another content child', () => {
+    bridge.view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'A' }] },
+        { type: 'paragraph', content: [{ type: 'text', text: 'B' }] },
+      ],
+    });
+    const [childA, childB] = childrenOf(bridge.view);
+
+    el._dragging = { type: 'content', index: childA };
+    el._dropTarget = { contentChild: childB, dropPosition: 'after' };
+    el._onDrop({ preventDefault() {}, stopPropagation() {} });
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['B', 'A']);
+  });
+
+  it('routes a content drop onto a section header through moveContentItem', () => {
+    bridge.view = makeRealView({
+      type: 'doc',
+      content: [
+        { type: 'blockquote', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Move me' }] }] },
+        { type: 'horizontal_rule' },
+        { type: 'paragraph', content: [{ type: 'text', text: 'Existing' }] },
+      ],
+    });
+    const child = childrenOf(bridge.view).find((c) => c.kind === 'quote');
+
+    el._dragging = { type: 'content', index: child };
+    el._dropTarget = { sectionIndex: 1, dropPosition: 'after' };
+    el._onDrop({ preventDefault() {}, stopPropagation() {} });
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['hr', 'Move me', 'Existing']);
+  });
+
+  it('routes a block dropped onto a content child through moveBlockToContentItem', () => {
+    bridge.view = makeRealView({
+      type: 'doc',
+      content: [
+        {
+          type: 'table',
+          content: [
+            {
+              type: 'table_row',
+              content: [{ type: 'table_cell', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'hero' }] }] }],
+            },
+          ],
+        },
+        { type: 'paragraph', content: [{ type: 'text', text: 'Loose para' }] },
+      ],
+    });
+    const child = childrenOf(bridge.view).find((c) => c.innerText === 'Loose para');
+
+    el._dragging = { type: 'block', index: 0 };
+    el._dropTarget = { contentChild: child, dropPosition: 'after' };
+    el._onDrop({ preventDefault() {}, stopPropagation() {} });
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['Loose para', 'hero']);
+  });
+
+  it('routes a block dropped onto an empty section through moveBlockToSection', () => {
+    const tableNode = (name) => ({
+      type: 'table',
+      content: [{
+        type: 'table_row',
+        content: [{ type: 'table_cell', content: [{ type: 'paragraph', content: [{ type: 'text', text: name }] }] }],
+      }],
+    });
+    bridge.view = makeRealView({
+      type: 'doc',
+      content: [{ type: 'horizontal_rule' }, tableNode('hero')],
+    });
+
+    el._dragging = { type: 'block', index: 0 };
+    el._dropTarget = { sectionIndex: 0, dropPosition: 'after' };
+    el._onDrop({ preventDefault() {}, stopPropagation() {} });
+
+    expect(docSeq(bridge.view.state.doc)).to.deep.equal(['hero', 'hr']);
+  });
+
+  it('accepts a block drag over a content child/group (sets a drop indicator, not just content drags)', () => {
+    const child = { kind: 'paragraph', proseIndex: 1 };
+    el._dragging = { type: 'block', index: 0 };
+
+    const rect = { top: 0, height: 20 };
+    const fakeEvent = (clientY) => ({
+      preventDefault() {},
+      stopPropagation() {},
+      currentTarget: { getBoundingClientRect: () => rect, dataset: {} },
+      clientY,
+    });
+
+    el._onContentDragOver(fakeEvent(15), child);
+    expect(el._dropTarget).to.deep.equal({ contentChild: child, dropPosition: 'after' });
+  });
+
+  it('dropping on a group header before/after targets the first/last child', () => {
+    const item = {
+      proseIndex: 1,
+      children: [
+        { kind: 'paragraph', proseIndex: 1, innerText: 'first' },
+        { kind: 'paragraph', proseIndex: 5, innerText: 'last' },
+      ],
+    };
+    el._dragging = { type: 'content', index: { kind: 'paragraph', proseIndex: 99 } };
+
+    const rect = { top: 0, height: 20 };
+    const fakeEvent = (clientY) => ({
+      preventDefault() {},
+      stopPropagation() {},
+      currentTarget: { getBoundingClientRect: () => rect, dataset: {} },
+      clientY,
+    });
+
+    el._onContentGroupDragOver(fakeEvent(5), item);
+    expect(el._dropTarget.contentChild).to.deep.equal(item.children[0]);
+    expect(el._dropTarget.dropPosition).to.equal('before');
+
+    el._onContentGroupDragOver(fakeEvent(15), item);
+    expect(el._dropTarget.contentChild).to.deep.equal(item.children[1]);
+    expect(el._dropTarget.dropPosition).to.equal('after');
+  });
+});
diff --git a/test/unit/blocks/canvas/test-helpers.js b/test/unit/blocks/canvas/test-helpers.js
new file mode 100644
index 000000000..9381a6f0a
--- /dev/null
+++ b/test/unit/blocks/canvas/test-helpers.js
@@ -0,0 +1,35 @@
+import { EditorState, EditorView } from 'da-y-wrapper';
+import { getSchema } from 'da-parser';
+
+const schema = getSchema();
+
+export function makeView(json) {
+  const doc = schema.nodeFromJSON(json);
+  let state = EditorState.create({ schema, doc });
+  return {
+    get state() { return state; },
+    dispatch(tr) { state = state.apply(tr); },
+  };
+}
+
+// Needed wherever a test goes through getInstrumentedHTML, which relies on view.posAtDOM/view.dom.
+export function makeRealView(json) {
+  const doc = schema.nodeFromJSON(json);
+  const state = EditorState.create({ schema, doc });
+  const dom = document.createElement('div');
+  document.body.appendChild(dom);
+  const view = new EditorView(dom, {
+    state,
+    dispatchTransaction(tr) { view.updateState(view.state.apply(tr)); },
+  });
+  return view;
+}
+
+// avoids fragile hand-computed offsets once more than one node's size is involved
+export function posOf(doc, match) {
+  let result;
+  doc.forEach((node, offset) => {
+    if (result === undefined && match(node)) result = offset;
+  });
+  return result;
+}