diff --git a/.github/scripts/risk-assess.mjs b/.github/scripts/risk-assess.mjs
index 508f0d2c11..2d8348018d 100644
--- a/.github/scripts/risk-assess.mjs
+++ b/.github/scripts/risk-assess.mjs
@@ -18,14 +18,11 @@
  */
 
 import { execSync } from 'node:child_process';
-import { writeFileSync, readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
+import { writeFileSync } from 'node:fs';
 
 // Allow running inside a Claude Code session
 delete process.env.CLAUDECODE;
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 const REPO = process.env.REPO || 'superdoc-dev/superdoc';
 
 /** Extract the first valid JSON object containing "level" from text. */
@@ -62,11 +59,6 @@ function run(cmd) {
   return execSync(cmd, { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }).trim();
 }
 
-function getPRInfo(pr) {
-  const json = run(`gh pr view ${pr} --repo ${REPO} --json title,files,changedFiles`);
-  return JSON.parse(json);
-}
-
 function getPRDiff(pr) {
   return run(`gh pr diff ${pr} --repo ${REPO}`);
 }
@@ -353,7 +345,6 @@ async function main() {
   }
 
   const forceDeep = flags.has('--deep');
-  const dryRun = flags.has('--dry-run');
   const repoRoot = process.env.REPO_ROOT || run('git rev-parse --show-toplevel');
 
   const results = [];
diff --git a/demos/__tests__/smoke.spec.ts b/demos/__tests__/smoke.spec.ts
index fb3e003774..72172785e9 100644
--- a/demos/__tests__/smoke.spec.ts
+++ b/demos/__tests__/smoke.spec.ts
@@ -8,8 +8,11 @@ test('demo loads without errors', async ({ page }) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  // Block telemetry requests during tests
-  await page.route('**/ingest.superdoc.dev/**', (route) => route.abort());
+  // Disable telemetry during tests by stubbing the ingest endpoint.
+  // Using fulfill (instead of abort) avoids browser console errors.
+  await page.route('**/ingest.superdoc.dev/**', (route) =>
+    route.fulfill({ status: 204, contentType: 'application/json', body: '{}' }),
+  );
 
   await page.goto('/');
   await expect(page.locator('body')).toBeVisible();
diff --git a/demos/grading-papers/app/grading/[id]/page.tsx b/demos/grading-papers/app/grading/[id]/page.tsx
index b38c49455a..d83142fdd2 100644
--- a/demos/grading-papers/app/grading/[id]/page.tsx
+++ b/demos/grading-papers/app/grading/[id]/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import 'superdoc/style.css'
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, use  } from "react"
 import { useRouter } from "next/navigation"
 import { ChevronLeft, Save, Send, Download, Printer, Menu, Bell, Search } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -13,7 +13,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Slider } from "@/components/ui/slider"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { SuperDoc } from "superdoc"
-import { use } from 'react';
 import { docMap } from './_doc-links';
 
 export default function GradingPage({ params }: { params: Promise<{ id: string }> }) {
diff --git a/demos/slack-redlining/cloud-function/server.js b/demos/slack-redlining/cloud-function/server.js
index b9c1673ace..b9f49cdae4 100644
--- a/demos/slack-redlining/cloud-function/server.js
+++ b/demos/slack-redlining/cloud-function/server.js
@@ -2,9 +2,8 @@ import fs from "fs";
 import { readFile, unlink } from "fs/promises";
 import express from "express";
 import https from "https";
-import path from "path";
+import path, { dirname } from "path";
 import { fileURLToPath } from "url";
-import { dirname } from "path";
 import {
   getAIResponse,
   generateUploadDownloadUrls,
diff --git a/demos/vue/src/components/DocumentEditor.vue b/demos/vue/src/components/DocumentEditor.vue
index a2f0bb27b7..97371526c5 100644
--- a/demos/vue/src/components/DocumentEditor.vue
+++ b/demos/vue/src/components/DocumentEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="document-editor">
-    <div :key="documentKey" class="editor-container">
+    <div class="editor-container">
       <div id="superdoc-toolbar" class="toolbar"></div>
       <div id="superdoc" class="editor"></div>
     </div>
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { SuperDoc } from 'superdoc';
 import 'superdoc/style.css';
 
@@ -27,11 +27,11 @@ const emit = defineEmits(['editor-ready', 'editor-error']);
 
 // Use ref to track the editor instance
 const editor = ref(null);
-const documentKey = ref(0);
 
 // Function to safely destroy editor
 const destroyEditor = () => {
   if (editor.value) {
+    editor.value.destroy();
     editor.value = null;
   }
 };
@@ -39,11 +39,11 @@ const destroyEditor = () => {
 // Function to initialize editor
 const initializeEditor = async () => {
   try {
-    // Ensure cleanup of previous instance
+    // Ensure cleanup of previous instance before re-initializing.
     destroyEditor();
-    
-    // Increment key to force re-render
-    documentKey.value++;
+
+    // Wait one tick so the container refs stay stable during remount scenarios.
+    await nextTick();
 
     // Create new editor instance
     editor.value = new SuperDoc({
@@ -68,14 +68,14 @@ const initializeEditor = async () => {
 
 // Watch for changes in props that should trigger re-initialization
 watch(
-  () => [props.documentId, props.initialData, props.readOnly],
+  () => [props.initialData, props.readOnly],
   () => {
-    initializeEditor();
+    void initializeEditor();
   }
 );
 
 onMounted(() => {
-  initializeEditor();
+  void initializeEditor();
 });
 
 onUnmounted(() => {
@@ -110,4 +110,4 @@ onUnmounted(() => {
   margin-top: 10px;
   min-height: 400px; /* Ensure editor has minimum height */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/demos/word-addin/src/taskpane/taskpane.js b/demos/word-addin/src/taskpane/taskpane.js
index 0ff323fdb9..8db404f244 100644
--- a/demos/word-addin/src/taskpane/taskpane.js
+++ b/demos/word-addin/src/taskpane/taskpane.js
@@ -5,7 +5,7 @@
 
 /* eslint-disable prettier/prettier */
 /* global document, Office, Word */
-/* eslint-disable no-use-before-define */
+ 
 
 import SERVER_DOMAIN from '../server-domain.js';
 
diff --git a/e2e-tests/test-data/structured-content/sdt-basic.docx b/e2e-tests/test-data/structured-content/sdt-basic.docx
new file mode 100644
index 0000000000..cb164a8838
Binary files /dev/null and b/e2e-tests/test-data/structured-content/sdt-basic.docx differ
diff --git a/e2e-tests/tests/visuals/layout-engine.spec.js b/e2e-tests/tests/visuals/layout-engine.spec.js
index 514b71466e..c0876ee0a9 100644
--- a/e2e-tests/tests/visuals/layout-engine.spec.js
+++ b/e2e-tests/tests/visuals/layout-engine.spec.js
@@ -42,5 +42,70 @@ if (!shouldRun) {
         });
       });
     });
+
+    const loadStructuredContentDocument = async (page) => {
+      const superEditor = await goToPageAndWaitForEditor(page, { layout: 1 });
+      const fileInput = page.locator('input[type="file"]');
+
+      await fileInput.setInputFiles('./test-data/structured-content/sdt-basic.docx');
+
+      await page.waitForFunction(() => window.superdoc !== undefined && window.editor !== undefined, null, {
+        polling: 100,
+        timeout: 10_000,
+      });
+
+      await page.waitForFunction(() => {
+        const toolbar = document.querySelector('#toolbar');
+        return toolbar && toolbar.children.length > 0;
+      });
+
+      return superEditor;
+    };
+
+    test('structured content: inline selection (sdt-basic.docx)', async ({ page }) => {
+      const superEditor = await loadStructuredContentDocument(page);
+      const inlineStructuredContent = page.locator('.superdoc-structured-content-inline').first();
+
+      await expect(inlineStructuredContent).toBeVisible();
+      await inlineStructuredContent.scrollIntoViewIfNeeded();
+      await inlineStructuredContent.hover();
+      await inlineStructuredContent.click({ force: true });
+      await expect(inlineStructuredContent).toHaveClass(/ProseMirror-selectednode/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll('.superdoc-structured-content-block.sdt-group-hover').length === 0;
+      });
+      const inlineEditorBox = await superEditor.boundingBox();
+      if (inlineEditorBox) {
+        await page.mouse.move(inlineEditorBox.x - 10, inlineEditorBox.y - 10);
+      }
+
+      await expect(superEditor).toHaveScreenshot();
+    });
+
+    test('structured content: block selection (sdt-basic.docx)', async ({ page }) => {
+      const superEditor = await loadStructuredContentDocument(page);
+      const blockStructuredContent = page.locator('.superdoc-structured-content-block').first();
+
+      await expect(blockStructuredContent).toBeVisible();
+      await blockStructuredContent.scrollIntoViewIfNeeded();
+      await blockStructuredContent.hover();
+      await blockStructuredContent.click({ force: true });
+      await expect(blockStructuredContent).toHaveClass(/ProseMirror-selectednode/);
+      const blockEditorBox = await superEditor.boundingBox();
+      if (blockEditorBox) {
+        await page.mouse.move(blockEditorBox.x - 10, blockEditorBox.y - 10);
+      }
+      await page.waitForFunction(
+        () => {
+          const block = document.querySelector('.superdoc-structured-content-block');
+          if (block?.matches(':hover')) return false;
+          return document.querySelectorAll('.superdoc-structured-content-block.sdt-group-hover').length === 0;
+        },
+        null,
+        { timeout: 2_000 },
+      );
+
+      await expect(superEditor).toHaveScreenshot();
+    });
   });
 }
diff --git a/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-block-selection-sdt-basic-docx-1-chromium-linux.png b/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-block-selection-sdt-basic-docx-1-chromium-linux.png
new file mode 100644
index 0000000000..5fdfeefa8d
Binary files /dev/null and b/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-block-selection-sdt-basic-docx-1-chromium-linux.png differ
diff --git a/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-inline-selection-sdt-basic-docx-1-chromium-linux.png b/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-inline-selection-sdt-basic-docx-1-chromium-linux.png
new file mode 100644
index 0000000000..7a28a2a954
Binary files /dev/null and b/e2e-tests/tests/visuals/layout-engine.spec.js-snapshots/layout-engine-visuals-layout-1-structured-content-inline-selection-sdt-basic-docx-1-chromium-linux.png differ
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 608f24c937..e799d10f08 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -35,6 +35,9 @@ export default [
       // Examples (different environments and coding styles)
       'examples/**',
       '**/examples/**',
+      // Demos (different environments and dependency sets)
+      'demos/**',
+      '**/demos/**',
       // Config files (CommonJS/different environments)
       '**/*.config.js',
       '**/*.cjs',
diff --git a/packages/layout-engine/painters/dom/src/index.test.ts b/packages/layout-engine/painters/dom/src/index.test.ts
index 207c1ae388..1a9ebb27af 100644
--- a/packages/layout-engine/painters/dom/src/index.test.ts
+++ b/packages/layout-engine/painters/dom/src/index.test.ts
@@ -2414,6 +2414,89 @@ describe('DomPainter', () => {
     expect(fragmentAfter?.textContent).toContain('world!!!');
   });
 
+  it('updates structured-content lock metadata when lockMode changes via setData', () => {
+    const lockedBlock: FlowBlock = {
+      kind: 'paragraph',
+      id: 'lock-mode-block',
+      runs: [{ text: 'Protected text', fontFamily: 'Arial', fontSize: 16, pmStart: 0, pmEnd: 14 }],
+      attrs: {
+        sdt: {
+          type: 'structuredContent',
+          scope: 'block',
+          id: 'sc-lock-mode-1',
+          alias: 'Protected Control',
+          lockMode: 'unlocked',
+        },
+      },
+    };
+
+    const lockedMeasure: Measure = {
+      kind: 'paragraph',
+      lines: [
+        {
+          fromRun: 0,
+          fromChar: 0,
+          toRun: 0,
+          toChar: 14,
+          width: 140,
+          ascent: 12,
+          descent: 4,
+          lineHeight: 20,
+        },
+      ],
+      totalHeight: 20,
+    };
+
+    const lockedLayout: Layout = {
+      pageSize: { w: 400, h: 500 },
+      pages: [
+        {
+          number: 1,
+          fragments: [
+            {
+              kind: 'para',
+              blockId: 'lock-mode-block',
+              fromLine: 0,
+              toLine: 1,
+              x: 20,
+              y: 30,
+              width: 300,
+              pmStart: 0,
+              pmEnd: 14,
+            },
+          ],
+        },
+      ],
+    };
+
+    const painter = createDomPainter({ blocks: [lockedBlock], measures: [lockedMeasure] });
+    painter.paint(lockedLayout, mount);
+
+    const fragmentBefore = mount.querySelector('.superdoc-fragment') as HTMLElement;
+    expect(fragmentBefore.dataset.lockMode).toBe('unlocked');
+
+    const updatedLockedBlock: FlowBlock = {
+      kind: 'paragraph',
+      id: 'lock-mode-block',
+      runs: [{ text: 'Protected text', fontFamily: 'Arial', fontSize: 16, pmStart: 0, pmEnd: 14 }],
+      attrs: {
+        sdt: {
+          type: 'structuredContent',
+          scope: 'block',
+          id: 'sc-lock-mode-1',
+          alias: 'Protected Control',
+          lockMode: 'contentLocked',
+        },
+      },
+    };
+
+    painter.setData?.([updatedLockedBlock], [lockedMeasure]);
+    painter.paint(lockedLayout, mount);
+
+    const fragmentAfter = mount.querySelector('.superdoc-fragment') as HTMLElement;
+    expect(fragmentAfter.dataset.lockMode).toBe('contentLocked');
+  });
+
   it('updates fragment positions in virtualized mode when layout changes without block diffs', () => {
     const painter = createDomPainter({
       blocks: [block],
diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts
index dde9ba26fb..cb6b4ef03c 100644
--- a/packages/layout-engine/painters/dom/src/renderer.ts
+++ b/packages/layout-engine/painters/dom/src/renderer.ts
@@ -790,6 +790,7 @@ export class DomPainter {
   private footerProvider?: PageDecorationProvider;
   private totalPages = 0;
   private linkIdCounter = 0; // Counter for generating unique link IDs
+  private sdtLabelsRendered = new Set<string>(); // Tracks SDT labels rendered across pages
 
   /**
    * WeakMap storing tooltip data for hyperlink elements before DOM insertion.
@@ -1012,6 +1013,7 @@ export class DomPainter {
       throw new Error('DomPainter.paint requires a DOM-like document');
     }
     this.doc = doc;
+    this.sdtLabelsRendered.clear(); // Reset SDT label tracking for new render cycle
 
     // Simple transaction gate: only use position mapping optimization for single-step transactions.
     // Complex transactions (paste, multi-step replace, etc.) fall back to full rebuild.
@@ -1309,6 +1311,9 @@ export class DomPainter {
     this.updateSpacersForMountedPages(mounted);
     this.clearGapSpacers();
 
+    // Reset SDT label tracking so remounted start fragments get their labels back.
+    this.sdtLabelsRendered.clear();
+
     // Remove pages that are no longer needed
     for (const [idx, state] of this.pageIndexToState.entries()) {
       if (!needed.has(idx)) {
@@ -1479,7 +1484,7 @@ export class DomPainter {
       pageNumberText: page.numberText,
     };
 
-    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup);
+    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup, this.sdtLabelsRendered);
 
     page.fragments.forEach((fragment, index) => {
       const sdtBoundary = sdtBoundaries.get(index);
@@ -1791,7 +1796,7 @@ export class DomPainter {
 
     const existing = new Map(state.fragments.map((frag) => [frag.key, frag]));
     const nextFragments: FragmentDomState[] = [];
-    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup);
+    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup, this.sdtLabelsRendered);
 
     const contextBase: FragmentRenderContext = {
       pageNumber: page.number,
@@ -1937,7 +1942,7 @@ export class DomPainter {
       section: 'body',
     };
 
-    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup);
+    const sdtBoundaries = computeSdtBoundaries(page.fragments, this.blockLookup, this.sdtLabelsRendered);
     const fragmentStates: FragmentDomState[] = page.fragments.map((fragment, index) => {
       const sdtBoundary = sdtBoundaries.get(index);
       const fragmentEl = this.renderFragment(fragment, contextBase, sdtBoundary);
@@ -3514,6 +3519,7 @@ export class DomPainter {
       renderDrawingContent: renderDrawingContentForTableCell,
       applyFragmentFrame: applyFragmentFrameWithSection,
       applySdtDataset: this.applySdtDataset.bind(this),
+      applyContainerSdtDataset: this.applyContainerSdtDataset.bind(this),
       applyStyles,
     });
   }
@@ -5443,9 +5449,45 @@ const getFragmentSdtContainerKey = (fragment: Fragment, blockLookup: BlockLookup
   return null;
 };
 
+const getFragmentHeight = (fragment: Fragment, blockLookup: BlockLookup): number => {
+  if (fragment.kind === 'table' || fragment.kind === 'image' || fragment.kind === 'drawing') {
+    return fragment.height;
+  }
+
+  const lookup = blockLookup.get(fragment.blockId);
+  if (!lookup) return 0;
+
+  if (fragment.kind === 'para' && lookup.measure.kind === 'paragraph') {
+    const measure = lookup.measure;
+    const lines = fragment.lines ?? measure.lines.slice(fragment.fromLine, fragment.toLine);
+    if (lines.length === 0) return 0;
+    let totalHeight = 0;
+    for (const line of lines) {
+      totalHeight += line.lineHeight ?? 0;
+    }
+    return totalHeight;
+  }
+
+  if (fragment.kind === 'list-item' && lookup.measure.kind === 'list') {
+    const listMeasure = lookup.measure as ListMeasure;
+    const item = listMeasure.items.find((it) => it.itemId === fragment.itemId);
+    if (!item) return 0;
+    const lines = item.paragraph.lines.slice(fragment.fromLine, fragment.toLine);
+    if (lines.length === 0) return 0;
+    let totalHeight = 0;
+    for (const line of lines) {
+      totalHeight += line.lineHeight ?? 0;
+    }
+    return totalHeight;
+  }
+
+  return 0;
+};
+
 const computeSdtBoundaries = (
   fragments: readonly Fragment[],
   blockLookup: BlockLookup,
+  sdtLabelsRendered: Set<string>,
 ): Map<number, SdtBoundaryOptions> => {
   const boundaries = new Map<number, SdtBoundaryOptions>();
   const containerKeys = fragments.map((fragment) => getFragmentSdtContainerKey(fragment, blockLookup));
@@ -5471,10 +5513,31 @@ const computeSdtBoundaries = (
 
     for (let k = i; k <= j; k += 1) {
       const fragment = fragments[k];
+      const isStart = k === i;
+      const isEnd = k === j;
+
+      let paddingBottomOverride: number | undefined;
+      if (!isEnd) {
+        const nextFragment = fragments[k + 1];
+        const currentHeight = getFragmentHeight(fragment, blockLookup);
+        const currentBottom = fragment.y + currentHeight;
+        const gapToNext = nextFragment.y - currentBottom;
+        if (gapToNext > 0) {
+          paddingBottomOverride = gapToNext;
+        }
+      }
+
+      const showLabel = isStart && !sdtLabelsRendered.has(currentKey);
+      if (showLabel) {
+        sdtLabelsRendered.add(currentKey);
+      }
+
       boundaries.set(k, {
-        isStart: k === i,
-        isEnd: k === j,
+        isStart,
+        isEnd,
         widthOverride: groupRight - fragment.x,
+        paddingBottomOverride,
+        showLabel,
       });
     }
 
@@ -5570,6 +5633,24 @@ const fragmentSignature = (fragment: Fragment, lookup: BlockLookup): string => {
   return base;
 };
 
+const getSdtMetadataId = (metadata: SdtMetadata | null | undefined): string => {
+  if (!metadata) return '';
+  if ('id' in metadata && metadata.id != null) {
+    return String(metadata.id);
+  }
+  return '';
+};
+
+const getSdtMetadataLockMode = (metadata: SdtMetadata | null | undefined): string => {
+  if (!metadata) return '';
+  return metadata.type === 'structuredContent' ? (metadata.lockMode ?? '') : '';
+};
+
+const getSdtMetadataVersion = (metadata: SdtMetadata | null | undefined): string => {
+  if (!metadata) return '';
+  return [metadata.type, getSdtMetadataLockMode(metadata), getSdtMetadataId(metadata)].join(':');
+};
+
 /**
  * Type guard to validate list marker attributes structure.
  *
@@ -5766,8 +5847,12 @@ const deriveBlockVersion = (block: FlowBlock): string => {
         ].join(':')
       : '';
 
-    // Combine marker version, runs version, and paragraph attrs version
-    const parts = [markerVersion, runsVersion, paragraphAttrsVersion].filter(Boolean);
+    // Include SDT metadata so lock-mode (and other SDT property) changes invalidate the cache.
+    const sdtAttrs = (block.attrs as ParagraphAttrs | undefined)?.sdt;
+    const sdtVersion = getSdtMetadataVersion(sdtAttrs);
+
+    // Combine marker version, runs version, paragraph attrs version, and SDT version
+    const parts = [markerVersion, runsVersion, paragraphAttrsVersion, sdtVersion].filter(Boolean);
     return parts.join('|');
   }
 
@@ -5776,6 +5861,8 @@ const deriveBlockVersion = (block: FlowBlock): string => {
   }
 
   if (block.kind === 'image') {
+    const imgSdt = (block as ImageBlock).attrs?.sdt;
+    const imgSdtVersion = getSdtMetadataVersion(imgSdt);
     return [
       block.src ?? '',
       block.width ?? '',
@@ -5783,6 +5870,7 @@ const deriveBlockVersion = (block: FlowBlock): string => {
       block.alt ?? '',
       block.title ?? '',
       resolveBlockClipPath(block),
+      imgSdtVersion,
     ].join('|');
   }
 
@@ -5975,6 +6063,12 @@ const deriveBlockVersion = (block: FlowBlock): string => {
       if (tblAttrs.cellSpacing !== undefined) {
         hash = hashNumber(hash, tblAttrs.cellSpacing);
       }
+      // Include SDT metadata so lock-mode changes invalidate the cache.
+      if (tblAttrs.sdt) {
+        hash = hashString(hash, tblAttrs.sdt.type);
+        hash = hashString(hash, getSdtMetadataLockMode(tblAttrs.sdt));
+        hash = hashString(hash, getSdtMetadataId(tblAttrs.sdt));
+      }
     }
 
     return [block.id, tableBlock.rows.length, hash.toString(16)].join('|');
diff --git a/packages/layout-engine/painters/dom/src/styles.ts b/packages/layout-engine/painters/dom/src/styles.ts
index db789fa7ae..c711b85f18 100644
--- a/packages/layout-engine/painters/dom/src/styles.ts
+++ b/packages/layout-engine/painters/dom/src/styles.ts
@@ -358,10 +358,27 @@ const SDT_CONTAINER_STYLES = `
   padding: 1px;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid #629be7;
+  border: 1px solid transparent;
   position: relative;
 }
 
+.superdoc-structured-content-block:not(.ProseMirror-selectednode):hover {
+  background-color: #f2f2f2;
+  border-color: transparent;
+}
+
+/* Group hover (JavaScript-coordinated) */
+.superdoc-structured-content-block.sdt-group-hover:not(.ProseMirror-selectednode),
+.superdoc-structured-content-block.sdt-hover:not(.ProseMirror-selectednode) {
+  background-color: #f2f2f2;
+  border-color: transparent;
+}
+
+.superdoc-structured-content-block.ProseMirror-selectednode {
+  border-color: #629be7;
+  outline: none;
+}
+
 /* Structured content drag handle/label - positioned above */
 .superdoc-structured-content__label {
   font-size: 11px;
@@ -382,7 +399,9 @@ const SDT_CONTAINER_STYLES = `
   box-sizing: border-box;
   z-index: 10;
   display: none;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: pointer;
+  user-select: none;
 }
 
 .superdoc-structured-content__label span {
@@ -392,9 +411,8 @@ const SDT_CONTAINER_STYLES = `
   text-overflow: ellipsis;
 }
 
-/* Hover effect for block structured content (via event delegation class).
- * Shows label on hover — border reveal is handled by the lock-mode hover rule below. */
-.superdoc-structured-content-block.sdt-hover .superdoc-structured-content__label {
+.superdoc-structured-content-block.ProseMirror-selectednode .superdoc-structured-content__label,
+.superdoc-structured-content-block.sdt-hover:not(.ProseMirror-selectednode) .superdoc-structured-content__label {
   display: inline-flex;
 }
 
@@ -435,12 +453,23 @@ const SDT_CONTAINER_STYLES = `
   padding: 1px;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid #629be7;
+  border: 1px solid transparent;
   position: relative;
   display: inline;
   z-index: 10;
 }
 
+/* Hover effect for inline structured content */
+.superdoc-structured-content-inline:not(.ProseMirror-selectednode):hover {
+  background-color: #f2f2f2;
+  border-color: transparent;
+}
+
+.superdoc-structured-content-inline.ProseMirror-selectednode {
+  border-color: #629be7;
+  outline: none;
+  background-color: transparent;
+}
 /* Inline structured content label - shown on hover */
 .superdoc-structured-content-inline__label {
   position: absolute;
@@ -455,20 +484,26 @@ const SDT_CONTAINER_STYLES = `
   white-space: nowrap;
   z-index: 100;
   display: none;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: pointer;
+  user-select: none;
 }
 
-.superdoc-structured-content-inline:hover .superdoc-structured-content-inline__label {
+.superdoc-structured-content-inline.ProseMirror-selectednode .superdoc-structured-content-inline__label {
   display: block;
 }
 
+.superdoc-structured-content-inline:not(.ProseMirror-selectednode):hover .superdoc-structured-content-inline__label {
+  display: none;
+}
+
 /* Hover highlight for SDT containers.
- * Blue border is always visible (set in base rules above).
  * Hover adds background highlight and z-index boost.
  * Block SDTs use .sdt-hover class (event delegation for multi-fragment coordination).
- * Inline SDTs use :hover (single element, no coordination needed). */
-.superdoc-structured-content-block[data-lock-mode].sdt-hover,
-.superdoc-structured-content-inline[data-lock-mode]:hover {
+ * Inline SDTs use :hover (single element, no coordination needed).
+ * Hover is suppressed when the node is selected (SD-1584). */
+.superdoc-structured-content-block[data-lock-mode].sdt-hover:not(.ProseMirror-selectednode),
+.superdoc-structured-content-inline[data-lock-mode]:hover:not(.ProseMirror-selectednode) {
   background-color: rgba(98, 155, 231, 0.08);
   z-index: 9999999;
 }
@@ -481,6 +516,11 @@ const SDT_CONTAINER_STYLES = `
   padding: 0;
 }
 
+.presentation-editor--viewing .superdoc-structured-content-block:hover {
+  background: none;
+  border: none;
+}
+
 .presentation-editor--viewing .superdoc-structured-content-inline:hover {
   background: none;
   border: none;
diff --git a/packages/layout-engine/painters/dom/src/table/renderTableFragment.ts b/packages/layout-engine/painters/dom/src/table/renderTableFragment.ts
index 9f3a8383c9..df872c5669 100644
--- a/packages/layout-engine/painters/dom/src/table/renderTableFragment.ts
+++ b/packages/layout-engine/painters/dom/src/table/renderTableFragment.ts
@@ -47,6 +47,8 @@ export type TableRenderDependencies = {
   applyFragmentFrame: (el: HTMLElement, fragment: Fragment) => void;
   /** Function to apply SDT metadata as data attributes */
   applySdtDataset: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  /** Function to apply container SDT metadata as data attributes */
+  applyContainerSdtDataset?: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
   /** Function to apply CSS styles to an element */
   applyStyles: ApplyStylesFn;
 };
@@ -123,6 +125,7 @@ export const renderTableFragment = (deps: TableRenderDependencies): HTMLElement
     renderDrawingContent,
     applyFragmentFrame,
     applySdtDataset,
+    applyContainerSdtDataset,
     applyStyles,
   } = deps;
 
@@ -174,6 +177,7 @@ export const renderTableFragment = (deps: TableRenderDependencies): HTMLElement
   applyFragmentFrame(container, fragment);
   container.style.height = `${fragment.height}px`;
   applySdtDataset(container, block.attrs?.sdt);
+  applyContainerSdtDataset?.(container, block.attrs?.containerSdt);
 
   // Apply SDT container styling (document sections, structured content blocks)
   applySdtContainerStyling(doc, container, block.attrs?.sdt, block.attrs?.containerSdt, sdtBoundary);
diff --git a/packages/layout-engine/painters/dom/src/utils/sdt-helpers.ts b/packages/layout-engine/painters/dom/src/utils/sdt-helpers.ts
index 507acbe225..511fbda2e7 100644
--- a/packages/layout-engine/painters/dom/src/utils/sdt-helpers.ts
+++ b/packages/layout-engine/painters/dom/src/utils/sdt-helpers.ts
@@ -9,20 +9,7 @@
 import type { SdtMetadata, StructuredContentLockMode } from '@superdoc/contracts';
 
 /**
- * Type guard for StructuredContentMetadata with specific properties.
- *
- * Validates that the metadata object has the expected structure for structured content
- * and narrows the type to allow safe property access.
- *
- * @param sdt - The SDT metadata to check
- * @returns True if the metadata is a structured content object with valid properties
- *
- * @example
- * ```typescript
- * if (isStructuredContentMetadata(block.attrs?.sdt)) {
- *   console.log(sdt.alias); // Type-safe access
- * }
- * ```
+ * Type guard for StructuredContentMetadata.
  */
 export function isStructuredContentMetadata(sdt: SdtMetadata | null | undefined): sdt is {
   type: 'structuredContent';
@@ -36,20 +23,7 @@ export function isStructuredContentMetadata(sdt: SdtMetadata | null | undefined)
 }
 
 /**
- * Type guard for DocumentSectionMetadata with specific properties.
- *
- * Validates that the metadata object has the expected structure for document sections
- * and narrows the type to allow safe property access.
- *
- * @param sdt - The SDT metadata to check
- * @returns True if the metadata is a document section object with valid properties
- *
- * @example
- * ```typescript
- * if (isDocumentSectionMetadata(block.attrs?.sdt)) {
- *   console.log(sdt.title); // Type-safe access
- * }
- * ```
+ * Type guard for DocumentSectionMetadata.
  */
 export function isDocumentSectionMetadata(
   sdt: SdtMetadata | null | undefined,
@@ -135,10 +109,7 @@ export function getSdtContainerConfig(sdt: SdtMetadata | null | undefined): SdtC
 }
 
 /**
- * Return the SDT metadata that should drive container styling.
- *
- * Prefers the primary `sdt` when it resolves to a container type, otherwise
- * falls back to `containerSdt` (e.g., docPart paragraphs inside a documentSection).
+ * Returns the SDT metadata for container styling, preferring `sdt` over `containerSdt`.
  */
 export function getSdtContainerMetadata(
   sdt?: SdtMetadata | null,
@@ -150,9 +121,7 @@ export function getSdtContainerMetadata(
 }
 
 /**
- * Returns a stable key for a block-level SDT container, or null if unavailable.
- *
- * The key is used to detect consecutive fragments that belong to the same SDT.
+ * Returns a stable key for grouping consecutive fragments in the same SDT container.
  */
 export function getSdtContainerKey(sdt?: SdtMetadata | null, containerSdt?: SdtMetadata | null): string | null {
   const metadata = getSdtContainerMetadata(sdt, containerSdt);
@@ -190,6 +159,10 @@ export type SdtBoundaryOptions = {
   isEnd?: boolean;
   /** Optional width override for the SDT container element */
   widthOverride?: number;
+  /** Optional padding bottom override for filling gaps between fragments */
+  paddingBottomOverride?: number;
+  /** Whether to show the label (overrides isStart check if provided) */
+  showLabel?: boolean;
 };
 
 /**
@@ -211,6 +184,7 @@ export type SdtBoundaryOptions = {
  * - Data attributes for continuation detection (`data-sdt-container-start/end`)
  * - Overflow visible to allow labels to appear above content
  * - Label/tooltip element created and appended to container when isStart=true
+ * - Padding bottom applied if paddingBottomOverride is provided (for filling gaps)
  *
  * **Label Element Structure:**
  * ```html
@@ -244,7 +218,6 @@ export function applySdtContainerStyling(
   containerSdt?: SdtMetadata | null | undefined,
   boundaryOptions?: SdtBoundaryOptions,
 ): void {
-  // Try primary sdt first, fall back to containerSdt
   let config = getSdtContainerConfig(sdt);
   if (!config && containerSdt) {
     config = getSdtContainerConfig(containerSdt);
@@ -254,7 +227,6 @@ export function applySdtContainerStyling(
   const isStart = boundaryOptions?.isStart ?? config.isStart;
   const isEnd = boundaryOptions?.isEnd ?? config.isEnd;
 
-  // Apply container class and data attributes
   container.classList.add(config.className);
   container.dataset.sdtContainerStart = String(isStart);
   container.dataset.sdtContainerEnd = String(isEnd);
@@ -270,8 +242,13 @@ export function applySdtContainerStyling(
     container.style.width = `${boundaryOptions.widthOverride}px`;
   }
 
-  // Only create label on the first fragment of a multi-fragment container
-  if (isStart) {
+  if (boundaryOptions?.paddingBottomOverride != null && boundaryOptions.paddingBottomOverride > 0) {
+    container.style.paddingBottom = `${boundaryOptions.paddingBottomOverride}px`;
+  }
+
+  const shouldShowLabel = boundaryOptions?.showLabel ?? isStart;
+
+  if (shouldShowLabel) {
     const labelEl = doc.createElement('div');
     labelEl.className = config.labelClassName;
     const labelText = doc.createElement('span');
diff --git a/packages/layout-engine/painters/dom/src/utils/sdt-hover.ts b/packages/layout-engine/painters/dom/src/utils/sdt-hover.ts
index ce758ca047..99f4b0afd0 100644
--- a/packages/layout-engine/painters/dom/src/utils/sdt-hover.ts
+++ b/packages/layout-engine/painters/dom/src/utils/sdt-hover.ts
@@ -39,7 +39,12 @@ export class SdtGroupedHover {
       this.hoveredSdtId = sdtId;
 
       if (sdtId) {
-        sdtElementsById(mount, sdtId).forEach((el) => el.classList.add(HOVER_CLASS));
+        sdtElementsById(mount, sdtId).forEach((el) => {
+          // Suppress hover styling when the node is selected (SD-1584).
+          if (!el.classList.contains('ProseMirror-selectednode')) {
+            el.classList.add(HOVER_CLASS);
+          }
+        });
       }
     };
 
@@ -57,7 +62,11 @@ export class SdtGroupedHover {
   /** Re-apply hover class after render. New/rebuilt elements lose the class. */
   reapply(): void {
     if (this.hoveredSdtId && this.mount) {
-      sdtElementsById(this.mount, this.hoveredSdtId).forEach((el) => el.classList.add(HOVER_CLASS));
+      sdtElementsById(this.mount, this.hoveredSdtId).forEach((el) => {
+        if (!el.classList.contains('ProseMirror-selectednode')) {
+          el.classList.add(HOVER_CLASS);
+        }
+      });
     }
   }
 
diff --git a/packages/layout-engine/painters/dom/src/virtualization.test.ts b/packages/layout-engine/painters/dom/src/virtualization.test.ts
index e0903a73a7..add592c219 100644
--- a/packages/layout-engine/painters/dom/src/virtualization.test.ts
+++ b/packages/layout-engine/painters/dom/src/virtualization.test.ts
@@ -146,6 +146,87 @@ describe('DomPainter virtualization (vertical)', () => {
     expect(firstIndexAfter).toBeGreaterThanOrEqual(firstIndexBefore);
   });
 
+  it('restores block SDT label when a virtualized start fragment remounts', () => {
+    Object.defineProperty(mount, 'clientHeight', { value: 600, configurable: true });
+    Object.defineProperty(mount, 'scrollHeight', { value: 12000, configurable: true });
+
+    const sdtBlock: FlowBlock = {
+      kind: 'paragraph',
+      id: 'virtual-sdt-block',
+      runs: [{ text: 'Virtual SDT', fontFamily: 'Arial', fontSize: 16, pmStart: 0, pmEnd: 11 }],
+      attrs: {
+        sdt: {
+          type: 'structuredContent',
+          scope: 'block',
+          id: 'virtual-sdt-1',
+          alias: 'Virtual Block Control',
+        },
+      },
+    };
+
+    const sdtMeasure: Measure = {
+      kind: 'paragraph',
+      lines: [
+        {
+          fromRun: 0,
+          fromChar: 0,
+          toRun: 0,
+          toChar: 11,
+          width: 90,
+          ascent: 12,
+          descent: 4,
+          lineHeight: 20,
+        },
+      ],
+      totalHeight: 20,
+    };
+
+    const sdtLayout: Layout = {
+      pageSize: { w: 400, h: 500 },
+      pages: Array.from({ length: 6 }, (_, i) => ({
+        number: i + 1,
+        fragments: [
+          {
+            kind: 'para',
+            blockId: 'virtual-sdt-block',
+            fromLine: 0,
+            toLine: 1,
+            x: 24,
+            y: 24,
+            width: 220,
+            pmStart: 0,
+            pmEnd: 11,
+          },
+        ],
+      })),
+    };
+
+    const painter = createDomPainter({
+      blocks: [sdtBlock],
+      measures: [sdtMeasure],
+      virtualization: { enabled: true, window: 1, overscan: 0, gap: 72, paddingTop: 0 },
+    });
+
+    painter.paint(sdtLayout, mount);
+
+    const labelBefore = mount.querySelector(
+      '.superdoc-page[data-page-index="0"] .superdoc-structured-content__label',
+    ) as HTMLElement | null;
+    expect(labelBefore).toBeTruthy();
+
+    mount.scrollTop = 3 * (500 + 72);
+    mount.dispatchEvent(new Event('scroll'));
+    expect(mount.querySelector('.superdoc-page[data-page-index="0"]')).toBeNull();
+
+    mount.scrollTop = 0;
+    mount.dispatchEvent(new Event('scroll'));
+
+    const remountedLabel = mount.querySelector(
+      '.superdoc-page[data-page-index="0"] .superdoc-structured-content__label',
+    ) as HTMLElement | null;
+    expect(remountedLabel).toBeTruthy();
+  });
+
   it('handles window size larger than total pages', () => {
     const painter = createDomPainter({
       blocks: [block],
diff --git a/packages/super-editor/src/assets/styles/extensions/structured-content.css b/packages/super-editor/src/assets/styles/extensions/structured-content.css
index d0fe5a5911..4fbd438271 100644
--- a/packages/super-editor/src/assets/styles/extensions/structured-content.css
+++ b/packages/super-editor/src/assets/styles/extensions/structured-content.css
@@ -3,7 +3,7 @@
   padding: 1px;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid #629be7;
+  border: 1px solid transparent;
   position: relative;
 }
 
@@ -12,6 +12,18 @@
   display: inline-block;
 }
 
+/* Hover (not selected): light grey background, no handle */
+.sd-structured-content:not(.ProseMirror-selectednode):hover,
+.sd-structured-content-block:not(.ProseMirror-selectednode):hover {
+  background-color: #f2f2f2;
+}
+
+/* Selected: border + handle visible */
+.sd-structured-content.ProseMirror-selectednode,
+.sd-structured-content-block.ProseMirror-selectednode {
+  border-color: #629be7;
+}
+
 .sd-structured-content-draggable {
   font-size: 10px;
   align-items: center;
@@ -41,8 +53,9 @@
   text-overflow: ellipsis;
 }
 
-.sd-structured-content:hover .sd-structured-content-draggable,
-.sd-structured-content-block:hover .sd-structured-content-draggable {
+/* Handle only visible when selected */
+.sd-structured-content.ProseMirror-selectednode .sd-structured-content-draggable,
+.sd-structured-content-block.ProseMirror-selectednode .sd-structured-content-draggable {
   display: inline-flex;
 }
 
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.test.js b/packages/super-editor/src/components/toolbar/LinkInput.test.js
index afcdb35445..8196b1b569 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.test.js
+++ b/packages/super-editor/src/components/toolbar/LinkInput.test.js
@@ -70,8 +70,12 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
           doc: {
             resolve: vi.fn(() => ({
               parent: { inlineContent: true },
-              min: vi.fn(function (other) { return this; }),
-              max: vi.fn(function (other) { return this; }),
+              min: vi.fn(function (other) {
+                return this;
+              }),
+              max: vi.fn(function (other) {
+                return this;
+              }),
             })),
           },
         },
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index b7e020259d..b375027067 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -222,7 +222,14 @@ const handleRemove = () => {
       <!-- Text input -->
       <div class="input-row text-input-row">
         <div class="input-icon text-input-icon">T</div>
-        <input type="text" name="text" placeholder="Text" v-model="text" :readonly="isViewingMode" @keydown.enter.stop.prevent="!isViewingMode && handleSubmit" />
+        <input
+          type="text"
+          name="text"
+          placeholder="Text"
+          v-model="text"
+          :readonly="isViewingMode"
+          @keydown.enter.stop.prevent="!isViewingMode && handleSubmit"
+        />
       </div>
 
       <!-- URL input -->
diff --git a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
index e1b615a364..7a93018b02 100644
--- a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
+++ b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
@@ -312,6 +312,18 @@ export class PresentationEditor extends EventEmitter {
     element: HTMLElement;
     pmStart: number;
   } | null = null;
+  #lastSelectedStructuredContentBlock: {
+    id: string | null;
+    elements: HTMLElement[];
+  } | null = null;
+  #lastSelectedStructuredContentInline: {
+    id: string | null;
+    elements: HTMLElement[];
+  } | null = null;
+  #lastHoveredStructuredContentBlock: {
+    id: string | null;
+    elements: HTMLElement[];
+  } | null = null;
 
   // Remote cursor/presence state management
   /** Manager for remote cursor rendering and awareness subscriptions */
@@ -399,6 +411,11 @@ export class PresentationEditor extends EventEmitter {
     this.#painterHost.className = 'presentation-editor__pages';
     this.#painterHost.style.transformOrigin = 'top left';
     this.#viewportHost.appendChild(this.#painterHost);
+
+    // Add event listeners for structured content hover coordination
+    this.#painterHost.addEventListener('mouseover', this.#handleStructuredContentBlockMouseEnter);
+    this.#painterHost.addEventListener('mouseout', this.#handleStructuredContentBlockMouseLeave);
+
     const win = this.#visibleHost?.ownerDocument?.defaultView ?? window;
     this.#domIndexObserverManager = new DomPositionIndexObserverManager({
       windowRoot: win,
@@ -3349,6 +3366,243 @@ export class PresentationEditor extends EventEmitter {
     this.#setSelectedFieldAnnotationClass(element, pmStart);
   }
 
+  #clearSelectedStructuredContentBlockClass() {
+    if (!this.#lastSelectedStructuredContentBlock) return;
+    this.#lastSelectedStructuredContentBlock.elements.forEach((element) => {
+      element.classList.remove('ProseMirror-selectednode');
+    });
+    this.#lastSelectedStructuredContentBlock = null;
+  }
+
+  #setSelectedStructuredContentBlockClass(elements: HTMLElement[], id: string | null) {
+    if (
+      this.#lastSelectedStructuredContentBlock &&
+      this.#lastSelectedStructuredContentBlock.id === id &&
+      this.#lastSelectedStructuredContentBlock.elements.length === elements.length &&
+      this.#lastSelectedStructuredContentBlock.elements.every((el) => elements.includes(el))
+    ) {
+      return;
+    }
+
+    this.#clearSelectedStructuredContentBlockClass();
+    elements.forEach((element) => element.classList.add('ProseMirror-selectednode'));
+    this.#lastSelectedStructuredContentBlock = { id, elements };
+  }
+
+  #syncSelectedStructuredContentBlockClass(selection: Selection | null | undefined) {
+    if (!selection) {
+      this.#clearSelectedStructuredContentBlockClass();
+      return;
+    }
+
+    let node: ProseMirrorNode | null = null;
+    let id: string | null = null;
+
+    if (selection instanceof NodeSelection) {
+      if (selection.node?.type?.name !== 'structuredContentBlock') {
+        this.#clearSelectedStructuredContentBlockClass();
+        return;
+      }
+      node = selection.node;
+    } else {
+      const $pos = selection.$from;
+      for (let depth = $pos.depth; depth > 0; depth--) {
+        const candidate = $pos.node(depth);
+        if (candidate.type?.name === 'structuredContentBlock') {
+          node = candidate;
+          break;
+        }
+      }
+      if (!node) {
+        this.#clearSelectedStructuredContentBlockClass();
+        return;
+      }
+    }
+
+    if (!this.#painterHost) {
+      this.#clearSelectedStructuredContentBlockClass();
+      return;
+    }
+
+    const rawId = (node.attrs as { id?: unknown } | null | undefined)?.id;
+    id = rawId != null ? String(rawId) : null;
+    let elements: HTMLElement[] = [];
+
+    if (id) {
+      const escapedId = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+      elements = Array.from(
+        this.#painterHost.querySelectorAll(`.superdoc-structured-content-block[data-sdt-id="${escapedId}"]`),
+      ) as HTMLElement[];
+    }
+
+    if (elements.length === 0) {
+      const elementAtPos = this.getElementAtPos(selection.from, { fallbackToCoords: true });
+      const container = elementAtPos?.closest?.('.superdoc-structured-content-block') as HTMLElement | null;
+      if (container) {
+        elements = [container];
+      }
+    }
+
+    if (elements.length === 0) {
+      this.#clearSelectedStructuredContentBlockClass();
+      return;
+    }
+
+    this.#setSelectedStructuredContentBlockClass(elements, id);
+  }
+
+  #handleStructuredContentBlockMouseEnter = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    const block = target.closest('.superdoc-structured-content-block');
+
+    if (!block || !(block instanceof HTMLElement)) return;
+
+    // Don't show hover effect if already selected
+    if (block.classList.contains('ProseMirror-selectednode')) return;
+
+    const rawId = block.dataset.sdtId;
+    if (!rawId) return;
+
+    this.#setHoveredStructuredContentBlockClass(rawId);
+  };
+
+  #handleStructuredContentBlockMouseLeave = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    const block = target.closest('.superdoc-structured-content-block') as HTMLElement | null;
+
+    if (!block) return;
+
+    const relatedTarget = event.relatedTarget as HTMLElement | null;
+    if (
+      relatedTarget &&
+      block.dataset.sdtId &&
+      relatedTarget.closest(`.superdoc-structured-content-block[data-sdt-id="${block.dataset.sdtId}"]`)
+    ) {
+      return;
+    }
+
+    this.#clearHoveredStructuredContentBlockClass();
+  };
+
+  #clearHoveredStructuredContentBlockClass() {
+    if (!this.#lastHoveredStructuredContentBlock) return;
+    this.#lastHoveredStructuredContentBlock.elements.forEach((element) => {
+      element.classList.remove('sdt-group-hover');
+    });
+    this.#lastHoveredStructuredContentBlock = null;
+  }
+
+  #setHoveredStructuredContentBlockClass(id: string) {
+    if (this.#lastHoveredStructuredContentBlock?.id === id) return;
+
+    this.#clearHoveredStructuredContentBlockClass();
+
+    if (!this.#painterHost) return;
+
+    const escapedId = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+    const elements = Array.from(
+      this.#painterHost.querySelectorAll(`.superdoc-structured-content-block[data-sdt-id="${escapedId}"]`),
+    ) as HTMLElement[];
+
+    if (elements.length === 0) return;
+
+    elements.forEach((element) => {
+      if (!element.classList.contains('ProseMirror-selectednode')) {
+        element.classList.add('sdt-group-hover');
+      }
+    });
+
+    this.#lastHoveredStructuredContentBlock = { id, elements };
+  }
+
+  #clearSelectedStructuredContentInlineClass() {
+    if (!this.#lastSelectedStructuredContentInline) return;
+    this.#lastSelectedStructuredContentInline.elements.forEach((element) => {
+      element.classList.remove('ProseMirror-selectednode');
+    });
+    this.#lastSelectedStructuredContentInline = null;
+  }
+
+  #setSelectedStructuredContentInlineClass(elements: HTMLElement[], id: string | null) {
+    if (
+      this.#lastSelectedStructuredContentInline &&
+      this.#lastSelectedStructuredContentInline.id === id &&
+      this.#lastSelectedStructuredContentInline.elements.length === elements.length &&
+      this.#lastSelectedStructuredContentInline.elements.every((el) => elements.includes(el))
+    ) {
+      return;
+    }
+
+    this.#clearSelectedStructuredContentInlineClass();
+    elements.forEach((element) => element.classList.add('ProseMirror-selectednode'));
+    this.#lastSelectedStructuredContentInline = { id, elements };
+  }
+
+  #syncSelectedStructuredContentInlineClass(selection: Selection | null | undefined) {
+    if (!selection) {
+      this.#clearSelectedStructuredContentInlineClass();
+      return;
+    }
+
+    let node: ProseMirrorNode | null = null;
+    let id: string | null = null;
+    let pos: number | null = null;
+
+    if (selection instanceof NodeSelection) {
+      if (selection.node?.type?.name !== 'structuredContent') {
+        this.#clearSelectedStructuredContentInlineClass();
+        return;
+      }
+      node = selection.node;
+      pos = selection.from;
+    } else {
+      const $pos = selection.$from;
+      for (let depth = $pos.depth; depth > 0; depth--) {
+        const candidate = $pos.node(depth);
+        if (candidate.type?.name === 'structuredContent') {
+          node = candidate;
+          pos = $pos.before(depth);
+          break;
+        }
+      }
+      if (!node || pos == null) {
+        this.#clearSelectedStructuredContentInlineClass();
+        return;
+      }
+    }
+
+    if (!this.#painterHost) {
+      this.#clearSelectedStructuredContentInlineClass();
+      return;
+    }
+
+    const rawId = (node.attrs as { id?: unknown } | null | undefined)?.id;
+    id = rawId != null ? String(rawId) : null;
+    let elements: HTMLElement[] = [];
+
+    if (id) {
+      const escapedId = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+      elements = Array.from(
+        this.#painterHost.querySelectorAll(`.superdoc-structured-content-inline[data-sdt-id="${escapedId}"]`),
+      ) as HTMLElement[];
+    }
+
+    if (elements.length === 0) {
+      const elementAtPos = this.getElementAtPos(pos, { fallbackToCoords: true });
+      const container = elementAtPos?.closest?.('.superdoc-structured-content-inline') as HTMLElement | null;
+      if (container) {
+        elements = [container];
+      }
+    }
+
+    if (elements.length === 0) {
+      this.#clearSelectedStructuredContentInlineClass();
+      return;
+    }
+
+    this.#setSelectedStructuredContentInlineClass(elements, id);
+  }
+
   /**
    * Updates the visual cursor/selection overlay to match the current editor selection.
    *
@@ -3423,6 +3677,8 @@ export class PresentationEditor extends EventEmitter {
     if (!selection) {
       try {
         this.#clearSelectedFieldAnnotationClass();
+        this.#clearSelectedStructuredContentBlockClass();
+        this.#clearSelectedStructuredContentInlineClass();
         this.#localSelectionLayer.innerHTML = '';
       } catch (error) {
         if (process.env.NODE_ENV === 'development') {
@@ -3446,6 +3702,8 @@ export class PresentationEditor extends EventEmitter {
     }
 
     this.#syncSelectedFieldAnnotationClass(selection);
+    this.#syncSelectedStructuredContentBlockClass(selection);
+    this.#syncSelectedStructuredContentInlineClass(selection);
 
     // Ensure selection endpoints remain mounted under virtualization so DOM-first
     // caret/selection rendering stays available during cross-page selection.
diff --git a/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts b/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
index c48fd08232..8441d849d3 100644
--- a/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
+++ b/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
@@ -69,6 +69,13 @@ export type LayoutState = {
   measures: Measure[];
 };
 
+type StructuredContentSelection = {
+  node: ProseMirrorNode;
+  pos: number;
+  start: number;
+  end: number;
+};
+
 /**
  * Dependencies injected from PresentationEditor.
  */
@@ -890,6 +897,43 @@ export class EditorInputManager {
       event.preventDefault();
     }
 
+    const inlineStructuredContentLabel = target?.closest?.(
+      '.superdoc-structured-content-inline__label',
+    ) as HTMLElement | null;
+    if (inlineStructuredContentLabel && doc) {
+      const resolved = this.#resolveStructuredContentInlineFromElement(doc, inlineStructuredContentLabel);
+      if (resolved) {
+        try {
+          const tr = editor.state.tr.setSelection(TextSelection.create(doc, resolved.start, resolved.end));
+          editor.view?.dispatch(tr);
+        } catch {}
+
+        this.#callbacks.scheduleSelectionUpdate?.();
+        this.#focusEditor();
+        return;
+      }
+    }
+
+    const structuredContentLabel = target?.closest?.('.superdoc-structured-content__label') as HTMLElement | null;
+    if (structuredContentLabel && doc) {
+      const resolved = this.#resolveStructuredContentBlockFromElement(doc, structuredContentLabel);
+      if (resolved) {
+        try {
+          const contentRange = this.#findStructuredContentBlockContentRange(resolved);
+          const selection =
+            contentRange != null
+              ? TextSelection.create(doc, contentRange.from, contentRange.to)
+              : NodeSelection.create(editor.state.doc, resolved.pos);
+          const tr = editor.state.tr.setSelection(selection);
+          editor.view?.dispatch(tr);
+        } catch {}
+
+        this.#callbacks.scheduleSelectionUpdate?.();
+        this.#focusEditor();
+        return;
+      }
+    }
+
     // Handle click outside text content
     if (!rawHit) {
       this.#focusEditorAtFirstPosition();
@@ -994,9 +1038,16 @@ export class EditorInputManager {
     // Set selection for single click
     if (!handledByDepth) {
       try {
-        let nextSelection: Selection = TextSelection.create(doc, hit.pos);
-        if (!nextSelection.$from.parent.inlineContent) {
-          nextSelection = Selection.near(doc.resolve(hit.pos), 1);
+        // SD-1584: clicking inside a block SDT selects the node (NodeSelection).
+        const sdtBlock = clickDepth === 1 ? this.#findStructuredContentBlockAtPos(doc, hit.pos) : null;
+        let nextSelection: Selection;
+        if (sdtBlock) {
+          nextSelection = NodeSelection.create(doc, sdtBlock.pos);
+        } else {
+          nextSelection = TextSelection.create(doc, hit.pos);
+          if (!nextSelection.$from.parent.inlineContent) {
+            nextSelection = Selection.near(doc.resolve(hit.pos), 1);
+          }
         }
         const tr = editor.state.tr.setSelection(nextSelection);
         // Preserve stored marks (e.g., formatting selected from toolbar before clicking)
@@ -1268,6 +1319,148 @@ export class EditorInputManager {
     }
   }
 
+  #findStructuredContentBlockAtPos(doc: ProseMirrorNode, pos: number): StructuredContentSelection | null {
+    if (!Number.isFinite(pos)) return null;
+
+    const $pos = doc.resolve(pos);
+    for (let depth = $pos.depth; depth > 0; depth--) {
+      const node = $pos.node(depth);
+      if (node.type?.name === 'structuredContentBlock') {
+        return {
+          node,
+          pos: $pos.before(depth),
+          start: $pos.start(depth),
+          end: $pos.end(depth),
+        };
+      }
+    }
+
+    return null;
+  }
+
+  #findStructuredContentBlockById(doc: ProseMirrorNode, id: string): StructuredContentSelection | null {
+    let found: StructuredContentSelection | null = null;
+    doc.descendants((node, pos) => {
+      if (node.type?.name !== 'structuredContentBlock') return true;
+      const nodeId = (node.attrs as { id?: unknown } | null | undefined)?.id;
+      if (String(nodeId ?? '') !== id) return true;
+
+      found = {
+        node,
+        pos,
+        start: pos + 1,
+        end: pos + node.nodeSize - 1,
+      };
+      return false;
+    });
+    return found;
+  }
+
+  #findStructuredContentInlineAtPos(doc: ProseMirrorNode, pos: number): StructuredContentSelection | null {
+    if (!Number.isFinite(pos)) return null;
+
+    const $pos = doc.resolve(pos);
+    for (let depth = $pos.depth; depth > 0; depth--) {
+      const node = $pos.node(depth);
+      if (node.type?.name === 'structuredContent') {
+        return {
+          node,
+          pos: $pos.before(depth),
+          start: $pos.start(depth),
+          end: $pos.end(depth),
+        };
+      }
+    }
+
+    return null;
+  }
+
+  #findStructuredContentInlineById(doc: ProseMirrorNode, id: string): StructuredContentSelection | null {
+    let found: StructuredContentSelection | null = null;
+    doc.descendants((node, pos) => {
+      if (node.type?.name !== 'structuredContent') return true;
+      const nodeId = (node.attrs as { id?: unknown } | null | undefined)?.id;
+      if (String(nodeId ?? '') !== id) return true;
+
+      found = {
+        node,
+        pos,
+        start: pos + 1,
+        end: pos + node.nodeSize - 1,
+      };
+      return false;
+    });
+    return found;
+  }
+
+  #resolveStructuredContentBlockFromElement(
+    doc: ProseMirrorNode,
+    element: HTMLElement,
+  ): StructuredContentSelection | null {
+    const container = element.closest?.('.superdoc-structured-content-block') as HTMLElement | null;
+    if (!container) return null;
+
+    const sdtId = container.dataset?.sdtId;
+    if (sdtId) {
+      const match = this.#findStructuredContentBlockById(doc, sdtId);
+      if (match) return match;
+    }
+
+    const containerSdtId = container.dataset?.sdtContainerId;
+    if (containerSdtId) {
+      const match = this.#findStructuredContentBlockById(doc, containerSdtId);
+      if (match) return match;
+    }
+
+    const pmStartRaw = container.dataset?.pmStart;
+    const pmStart = pmStartRaw != null ? Number(pmStartRaw) : NaN;
+    if (Number.isFinite(pmStart)) {
+      return this.#findStructuredContentBlockAtPos(doc, pmStart);
+    }
+
+    return null;
+  }
+
+  #resolveStructuredContentInlineFromElement(
+    doc: ProseMirrorNode,
+    element: HTMLElement,
+  ): StructuredContentSelection | null {
+    const container = element.closest?.('.superdoc-structured-content-inline') as HTMLElement | null;
+    if (!container) return null;
+
+    const sdtId = container.dataset?.sdtId;
+    if (sdtId) {
+      const match = this.#findStructuredContentInlineById(doc, sdtId);
+      if (match) return match;
+    }
+
+    const pmStartRaw = container.dataset?.pmStart;
+    const pmStart = pmStartRaw != null ? Number(pmStartRaw) : NaN;
+    if (Number.isFinite(pmStart)) {
+      return this.#findStructuredContentInlineAtPos(doc, pmStart);
+    }
+
+    return null;
+  }
+
+  #findStructuredContentBlockContentRange(resolved: StructuredContentSelection): { from: number; to: number } | null {
+    let from: number | null = null;
+    let to: number | null = null;
+    resolved.node.descendants((child, pos) => {
+      if (!child.isTextblock) return true;
+      const basePos = resolved.pos + 1 + pos;
+      const childFrom = basePos + 1;
+      const childTo = basePos + child.nodeSize - 1;
+      if (from == null) {
+        from = childFrom;
+      }
+      to = childTo;
+      return true;
+    });
+    if (from == null || to == null) return null;
+    return { from, to };
+  }
+
   #handleClickWithoutLayout(event: PointerEvent, isDraggableAnnotation: boolean): void {
     if (!isDraggableAnnotation) {
       event.preventDefault();
diff --git a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
index ce85deabbb..4efa2e87ab 100644
--- a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
+++ b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
@@ -160,7 +160,14 @@ vi.mock('../../Editor', () => {
       getJSON: vi.fn(() => ({ type: 'doc', content: [] })),
       isEditable: true,
       state: {
-        selection: { from: 0, to: 0 },
+        selection: {
+          from: 0,
+          to: 0,
+          $from: {
+            depth: 0,
+            node: vi.fn(),
+          },
+        },
         doc: {
           nodeSize: 100,
           content: {
@@ -2970,7 +2977,14 @@ describe('PresentationEditor', () => {
         // Wait for initial render to complete so timers/RAF have settled.
         await new Promise((resolve) => setTimeout(resolve, 100));
 
-        mockEditorInstance.state.selection = { from: 5, to: 5 };
+        mockEditorInstance.state.selection = {
+          from: 5,
+          to: 5,
+          $from: {
+            depth: 0,
+            node: vi.fn(),
+          },
+        };
 
         const onCalls = mockEditorInstance.on as unknown as Mock;
         const selectionUpdateCall = onCalls.mock.calls.find((call) => call[0] === 'selectionUpdate');
@@ -3003,7 +3017,14 @@ describe('PresentationEditor', () => {
 
         await new Promise((resolve) => setTimeout(resolve, 100));
 
-        mockEditorInstance.state.selection = { from: 1, to: 6 };
+        mockEditorInstance.state.selection = {
+          from: 1,
+          to: 6,
+          $from: {
+            depth: 0,
+            node: vi.fn(),
+          },
+        };
         (mockEditorInstance.state.doc as unknown as { textBetween?: () => string }).textBetween = () => 'Hello world';
 
         const onCalls = mockEditorInstance.on as unknown as Mock;
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-select-plugin.js b/packages/super-editor/src/extensions/structured-content/structured-content-select-plugin.js
index fa6fa1eeec..5d45b75afb 100644
--- a/packages/super-editor/src/extensions/structured-content/structured-content-select-plugin.js
+++ b/packages/super-editor/src/extensions/structured-content/structured-content-select-plugin.js
@@ -1,4 +1,4 @@
-import { Plugin, TextSelection  } from 'prosemirror-state';
+import { Plugin, TextSelection } from 'prosemirror-state';
 
 /**
  * Select-all-on-click plugin for inline StructuredContent nodes.