@designfever/web-review-kit 0.8.1 → 0.8.2

package/dist/react-shell.js

@@ -4,6 +4,7 @@ import {
   clamp,
   createWebReviewKit,
   getBoundMarkerPoint,
+  getDraftViewportScale,
   getHotkeyActionKey,
   getItemHighlightSelection,
   getNumberedReviewItems,
@@ -15,10 +16,10 @@ import {
   runWithAutoScrollBehavior,
   shouldShowMarkerForScope,
   toHostPoint
-} from "./chunk-4ZP7B7R6.js";
+} from "./chunk-ZWJNUOYV.js";
 
 // src/react-shell.tsx
-import React2 from "react";
+import React3 from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 
 // src/react-shell/style/base.ts
@@ -122,6 +123,9 @@ var reviewShellBaseStyle = `
 	    --df-review-color-accent-contrast: #0f1218;
 	    --df-review-color-accent-soft: rgba(124, 199, 255, 0.12);
 	    --df-review-color-accent-hover: rgba(124, 199, 255, 0.2);
+	    --df-review-color-dom: #d7ff5f;
+	    --df-review-color-dom-contrast: #0f1218;
+	    --df-review-color-dom-soft: rgba(215, 255, 95, 0.16);
 	    --df-review-color-danger: #ff8f61;
 	    --df-review-color-danger-soft: rgba(255, 143, 97, 0.12);
 	    --df-review-color-purple: #b395ff;
@@ -180,6 +184,9 @@ var reviewShellBaseStyle = `
 	    --df-review-accent-contrast: var(--df-review-color-accent-contrast);
 	    --df-review-accent-soft: var(--df-review-color-accent-soft);
 	    --df-review-accent-hover: var(--df-review-color-accent-hover);
+	    --df-review-dom: var(--df-review-color-dom);
+	    --df-review-dom-contrast: var(--df-review-color-dom-contrast);
+	    --df-review-dom-soft: var(--df-review-color-dom-soft);
 	    --df-review-danger: var(--df-review-color-danger);
 	    --df-review-danger-soft: var(--df-review-color-danger-soft);
 	    --df-review-purple: var(--df-review-color-purple);
@@ -219,6 +226,9 @@ var reviewShellBaseStyle = `
 	    --df-review-color-accent-contrast: #ffffff;
 	    --df-review-color-accent-soft: rgba(23, 105, 170, 0.1);
 	    --df-review-color-accent-hover: rgba(23, 105, 170, 0.16);
+	    --df-review-color-dom: #617f00;
+	    --df-review-color-dom-contrast: #ffffff;
+	    --df-review-color-dom-soft: rgba(97, 127, 0, 0.12);
 	    --df-review-color-danger: #b94418;
 	    --df-review-color-danger-soft: rgba(185, 68, 24, 0.1);
 	    --df-review-color-purple: #6543b8;
@@ -2267,7 +2277,7 @@ var reviewShellQaPanelStyle = `
 	    position: relative;
 	    z-index: 600;
 	    display: grid;
-	    grid-template-rows: minmax(0, 1fr) auto;
+	    grid-template-rows: minmax(0, 1fr);
 	    min-width: 0;
 	    min-height: 0;
 	    overflow: hidden;
@@ -2277,8 +2287,11 @@ var reviewShellQaPanelStyle = `
 	  }
 
   .df-review-qa-draft-host {
+    grid-column: 2;
+    grid-row: 1 / span 3;
     position: relative;
-    z-index: 2;
+    z-index: 720;
+    align-self: end;
     display: none;
     justify-self: end;
     width: calc(100% - var(--df-review-space-4));
@@ -2290,11 +2303,6 @@ var reviewShellQaPanelStyle = `
     display: block;
   }
 
-  .df-review-qa-panel[data-has-draft-composer="true"] .df-review-panel-body {
-    opacity: 0.36;
-    pointer-events: none;
-  }
-
 	  .df-review-shell:not(.is-list-visible) .df-review-qa-panel,
   .df-review-qa-panel[aria-hidden="true"] {
 	    visibility: hidden;
@@ -2302,11 +2310,16 @@ var reviewShellQaPanelStyle = `
     pointer-events: none;
 	  }
 
+  .df-review-shell:not(.is-list-visible) .df-review-qa-draft-host {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   .df-review-source-tree-panel {
     grid-column: 2;
     grid-row: 1 / span 3;
     position: relative;
-    z-index: 600;
+    z-index: 900;
     display: grid;
     min-width: 0;
     min-height: 0;
@@ -4320,151 +4333,18 @@ var reviewShellSourceInspectorStyle = `
     position: fixed;
     z-index: 880;
     pointer-events: none;
-    border: 2px solid rgba(124, 199, 255, 0.96);
+    border: 2px solid var(--df-review-dom);
     border-radius: 4px;
     box-shadow:
       0 0 0 1px rgba(15, 18, 24, 0.58),
-      0 0 0 5px rgba(124, 199, 255, 0.16);
-  }
-
-  .df-review-source-outline.is-pinned {
-    border-color: var(--df-review-warning);
-    box-shadow:
-      0 0 0 1px rgba(15, 18, 24, 0.58),
-      0 0 0 5px rgba(243, 183, 95, 0.16);
-  }
-
-  .df-review-source-popover {
-    --df-review-source-popover-line: rgba(226, 233, 245, 0.16);
-    --df-review-source-popover-text: #edf3fb;
-    --df-review-source-popover-muted: rgba(237, 243, 251, 0.68);
-    --df-review-source-popover-subtle: rgba(237, 243, 251, 0.5);
-    --df-review-source-popover-data: #f3b75f;
-    --df-review-source-popover-data-muted: rgba(243, 183, 95, 0.78);
-    --df-review-source-popover-data-subtle: rgba(243, 183, 95, 0.62);
-    --df-review-source-popover-hover: rgba(124, 199, 255, 0.14);
-    position: fixed;
-    z-index: 890;
-    display: grid;
-    width: fit-content;
-    min-width: min(240px, calc(100vw - 24px));
-    max-width: min(440px, calc(100vw - 24px));
-    max-height: 260px;
-    overflow: hidden;
-    border: 1px solid var(--df-review-source-popover-line);
-    border-radius: var(--df-review-radius-md);
-    padding: 6px;
-    color: var(--df-review-source-popover-text);
-    color-scheme: dark;
-    background: rgba(19, 24, 33, 0.96);
-    box-shadow: var(--df-review-shadow-panel);
-    backdrop-filter: blur(10px);
-  }
-
-  .df-review-source-popover-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 1;
-  }
-
-  .df-review-source-popover-close button {
-    display: grid;
-    place-items: center;
-    width: 24px;
-    height: 24px;
-    border: 1px solid transparent;
-    border-radius: var(--df-review-radius-sm);
-    padding: 0;
-    color: var(--df-review-source-popover-subtle);
-    background: transparent;
-    font-size: var(--df-review-font-size-xl);
-    font-weight: var(--df-review-font-weight-normal);
-    line-height: 1;
-  }
-
-  .df-review-source-popover-close button:hover {
-    border-color: var(--df-review-source-popover-line);
-    color: var(--df-review-source-popover-text);
-    background: var(--df-review-source-popover-hover);
-  }
-
-  .df-review-source-candidate-list {
-    display: grid;
-    gap: 0;
-    max-height: min(220px, calc(100vh - 96px));
-    min-height: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding-right: 2px;
-    scrollbar-gutter: stable;
-  }
-
-  .df-review-source-candidate {
-    display: grid;
-    width: 100%;
-    border: 0;
-    border-top: 1px solid transparent;
-    border-radius: var(--df-review-radius-sm);
-    padding: 9px 30px 9px 8px;
-    color: var(--df-review-source-popover-text);
-    background: transparent;
-    text-align: left;
-  }
-
-  .df-review-source-candidate + .df-review-source-candidate {
-    border-top-color: var(--df-review-source-popover-line);
-  }
-
-  .df-review-source-candidate:hover {
-    background: var(--df-review-source-popover-hover);
-  }
-
-  .df-review-source-candidate-main {
-    display: grid;
-    gap: 1px;
-    min-width: 0;
-  }
-
-  .df-review-source-candidate-main strong,
-  .df-review-source-candidate-main small {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .df-review-source-candidate-main strong {
-    font-size: var(--df-review-font-size-xs);
-    font-weight: var(--df-review-font-weight-emphasis);
-    line-height: 1.2;
-  }
-
-  .df-review-source-candidate-main span {
-    overflow-wrap: anywhere;
-    color: var(--df-review-source-popover-muted);
-    font-family: var(--df-review-font-mono);
-    font-size: var(--df-review-font-size-2xs);
-    line-height: 1.24;
-    white-space: normal;
+      0 0 0 5px var(--df-review-dom-soft);
   }
 
-  .df-review-source-candidate-main small {
-    color: var(--df-review-source-popover-subtle);
-    font-family: var(--df-review-font-mono);
-    font-size: var(--df-review-font-size-2xs);
-    line-height: 1.2;
-  }
-
-  .df-review-source-candidate.is-data .df-review-source-candidate-main strong {
-    color: var(--df-review-source-popover-data);
-  }
-
-  .df-review-source-candidate.is-data .df-review-source-candidate-main span {
-    color: var(--df-review-source-popover-data-muted);
-  }
-
-  .df-review-source-candidate.is-data .df-review-source-candidate-main small {
-    color: var(--df-review-source-popover-data-subtle);
+  .df-review-source-outline.is-hover {
+    border-width: 1px;
+    border-color: var(--df-review-dom);
+    opacity: 0.72;
+    box-shadow: 0 0 0 1px rgba(15, 18, 24, 0.48);
   }
 
 `;
@@ -4699,6 +4579,7 @@ var reviewShellSectionOutlineStyle = `
     display: grid;
     border: 1px solid transparent;
     border-radius: var(--df-review-radius-sm);
+    cursor: pointer;
     transition: border-color 140ms ease, background 140ms ease;
   }
 
@@ -4707,15 +4588,26 @@ var reviewShellSectionOutlineStyle = `
     background: var(--df-review-accent-soft);
   }
 
+  .df-review-section-outline-entry-body:has(.df-review-section-outline-name:focus) {
+    outline: 2px solid var(--df-review-dom);
+    outline-offset: 1px;
+  }
+
+  .df-review-section-outline-entry-body.is-selected {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
 
   .df-review-section-outline-row {
     display: grid;
-    grid-template-columns: 18px minmax(0, 1fr) auto;
-    align-items: center;
+    grid-template-columns: 18px minmax(0, 1fr);
+    align-items: start;
     gap: 7px;
     border-radius: var(--df-review-radius-sm);
-    min-height: 42px;
-    padding: 6px 7px 6px 6px;
+    min-height: 62px;
+    padding: 8px 7px 7px 6px;
   }
 
   .df-review-section-outline-toggle {
@@ -4754,6 +4646,20 @@ var reviewShellSectionOutlineStyle = `
     pointer-events: none;
   }
 
+  .df-review-section-outline-main {
+    display: grid;
+    gap: 7px;
+    min-width: 0;
+  }
+
+  .df-review-section-outline-title {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 6px;
+    min-width: 0;
+  }
+
   .df-review-section-outline-name {
     display: grid;
     gap: 2px;
@@ -4765,6 +4671,7 @@ var reviewShellSectionOutlineStyle = `
     background: transparent;
     font-size: var(--df-review-font-size-sm);
     font-weight: var(--df-review-font-weight-normal);
+    line-height: 1.25;
     text-align: left;
     white-space: normal;
     cursor: pointer;
@@ -4772,19 +4679,24 @@ var reviewShellSectionOutlineStyle = `
 
   .df-review-section-outline-name span {
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .df-review-section-outline-name span {
+    overflow-wrap: anywhere;
     color: var(--df-review-section-outline-name-color);
+    white-space: normal;
   }
 
   .df-review-section-outline-name:hover {
     color: var(--df-review-accent);
   }
 
+  .df-review-section-outline-name:focus {
+    outline: 0;
+  }
+
+  .df-review-section-outline-row.is-selected .df-review-section-outline-name span {
+    color: var(--df-review-dom);
+    font-weight: var(--df-review-font-weight-emphasis);
+  }
+
   .df-review-section-outline-meta {
     position: relative;
     display: grid;
@@ -4902,11 +4814,27 @@ var reviewShellSectionOutlineStyle = `
     line-height: 1;
   }
 
-  .df-review-section-outline-links {
+  .df-review-section-outline-action-group {
     display: inline-flex;
     align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .df-review-section-outline-action-group.is-left {
+    justify-content: flex-start;
+  }
+
+  .df-review-section-outline-action-group.is-right {
     justify-content: flex-end;
-    gap: 1px;
+  }
+
+  .df-review-section-outline-actions {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) max-content;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
   }
 
   .df-review-section-outline-divider {
@@ -4949,10 +4877,82 @@ var reviewShellSectionOutlineStyle = `
     height: 16px;
   }
 
+  .df-review-section-outline-link.is-dom-adjust,
+  .df-review-section-outline-link.is-dom-reset {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+  }
+
+  .df-review-section-outline-link.is-dom-adjust svg,
+  .df-review-section-outline-link.is-dom-reset svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .df-review-section-outline-adjust-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    min-width: 0;
+    color: var(--df-review-muted);
+    font-family: var(--df-review-font-mono);
+    font-size: var(--df-review-font-size-2xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .df-review-section-outline-adjust-status > span {
+    color: var(--df-review-subtle);
+  }
+
+  .df-review-section-outline-adjust-status code {
+    display: inline-block;
+    width: 5ch;
+    color: inherit;
+    font: inherit;
+    text-align: right;
+  }
+
   .df-review-section-outline-link:hover {
-    border-color: rgba(124, 199, 255, 0.34);
+    border-color: transparent;
     color: var(--df-review-accent);
-    background: var(--df-review-accent-soft);
+    background: transparent;
+  }
+
+  .df-review-section-outline-link:focus-visible {
+    outline: 2px solid var(--df-review-focus-ring);
+    outline-offset: 1px;
+  }
+
+  .df-review-section-outline-link.is-active,
+  .df-review-section-outline-link.is-copied {
+    color: var(--df-review-accent);
+  }
+
+  .df-review-section-outline-link.is-active {
+    border-color: var(--df-review-accent);
+    color: var(--df-review-accent-contrast);
+    background: var(--df-review-accent);
+  }
+
+  .df-review-section-outline-link.is-dom-adjust:hover,
+  .df-review-section-outline-link.is-dom-reset:hover {
+    color: var(--df-review-dom);
+  }
+
+  .df-review-section-outline-link.is-dom-adjust.is-active {
+    border-color: var(--df-review-dom);
+    color: var(--df-review-dom-contrast);
+    background: var(--df-review-dom);
+  }
+
+  .df-review-section-outline-link.is-copied {
+    border-color: rgba(243, 183, 95, 0.42);
+    color: var(--df-review-warning);
+    background: rgba(243, 183, 95, 0.1);
   }
 
   .df-review-section-outline-link svg {
@@ -5683,18 +5683,29 @@ var __iconNode25 = [
 ];
 var MoveVertical = createLucideIcon("move-vertical", __iconNode25);
 
-// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/network.mjs
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/move.mjs
 var __iconNode26 = [
+  ["path", { d: "M12 2v20", key: "t6zp3m" }],
+  ["path", { d: "m15 19-3 3-3-3", key: "11eu04" }],
+  ["path", { d: "m19 9 3 3-3 3", key: "1mg7y2" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }],
+  ["path", { d: "m5 9-3 3 3 3", key: "j64kie" }],
+  ["path", { d: "m9 5 3-3 3 3", key: "l8vdw6" }]
+];
+var Move = createLucideIcon("move", __iconNode26);
+
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/network.mjs
+var __iconNode27 = [
   ["rect", { x: "16", y: "16", width: "6", height: "6", rx: "1", key: "4q2zg0" }],
   ["rect", { x: "2", y: "16", width: "6", height: "6", rx: "1", key: "8cvhb9" }],
   ["rect", { x: "9", y: "2", width: "6", height: "6", rx: "1", key: "1egb70" }],
   ["path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3", key: "1jsf9p" }],
   ["path", { d: "M12 12V8", key: "2874zd" }]
 ];
-var Network = createLucideIcon("network", __iconNode26);
+var Network = createLucideIcon("network", __iconNode27);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/pencil.mjs
-var __iconNode27 = [
+var __iconNode28 = [
   [
     "path",
     {
@@ -5704,32 +5715,39 @@ var __iconNode27 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-var Pencil = createLucideIcon("pencil", __iconNode27);
+var Pencil = createLucideIcon("pencil", __iconNode28);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/plus.mjs
-var __iconNode28 = [
+var __iconNode29 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode28);
+var Plus = createLucideIcon("plus", __iconNode29);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/rectangle-horizontal.mjs
-var __iconNode29 = [
+var __iconNode30 = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
 ];
-var RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode29);
+var RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode30);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/refresh-cw.mjs
-var __iconNode30 = [
+var __iconNode31 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-var RefreshCw = createLucideIcon("refresh-cw", __iconNode30);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode31);
+
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
+var __iconNode32 = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+];
+var RotateCcw = createLucideIcon("rotate-ccw", __iconNode32);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/ruler.mjs
-var __iconNode31 = [
+var __iconNode33 = [
   [
     "path",
     {
@@ -5742,26 +5760,26 @@ var __iconNode31 = [
   ["path", { d: "m8.5 6.5 2-2", key: "vc6u1g" }],
   ["path", { d: "m17.5 15.5 2-2", key: "wo5hmg" }]
 ];
-var Ruler = createLucideIcon("ruler", __iconNode31);
+var Ruler = createLucideIcon("ruler", __iconNode33);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/scan.mjs
-var __iconNode32 = [
+var __iconNode34 = [
   ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
   ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
   ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
   ["path", { d: "M7 21H5a2 2 0 0 1-2-2v-2", key: "ioqczr" }]
 ];
-var Scan = createLucideIcon("scan", __iconNode32);
+var Scan = createLucideIcon("scan", __iconNode34);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/search.mjs
-var __iconNode33 = [
+var __iconNode35 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-var Search = createLucideIcon("search", __iconNode33);
+var Search = createLucideIcon("search", __iconNode35);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/settings.mjs
-var __iconNode34 = [
+var __iconNode36 = [
   [
     "path",
     {
@@ -5771,17 +5789,17 @@ var __iconNode34 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-var Settings = createLucideIcon("settings", __iconNode34);
+var Settings = createLucideIcon("settings", __iconNode36);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/smartphone.mjs
-var __iconNode35 = [
+var __iconNode37 = [
   ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
   ["path", { d: "M12 18h.01", key: "mhygvu" }]
 ];
-var Smartphone = createLucideIcon("smartphone", __iconNode35);
+var Smartphone = createLucideIcon("smartphone", __iconNode37);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/square-mouse-pointer.mjs
-var __iconNode36 = [
+var __iconNode38 = [
   [
     "path",
     {
@@ -5791,10 +5809,10 @@ var __iconNode36 = [
   ],
   ["path", { d: "M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6", key: "14rsvq" }]
 ];
-var SquareMousePointer = createLucideIcon("square-mouse-pointer", __iconNode36);
+var SquareMousePointer = createLucideIcon("square-mouse-pointer", __iconNode38);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/sun.mjs
-var __iconNode37 = [
+var __iconNode39 = [
   ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -5805,40 +5823,40 @@ var __iconNode37 = [
   ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
   ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
 ];
-var Sun = createLucideIcon("sun", __iconNode37);
+var Sun = createLucideIcon("sun", __iconNode39);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/trash-2.mjs
-var __iconNode38 = [
+var __iconNode40 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-var Trash2 = createLucideIcon("trash-2", __iconNode38);
+var Trash2 = createLucideIcon("trash-2", __iconNode40);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/type.mjs
-var __iconNode39 = [
+var __iconNode41 = [
   ["path", { d: "M12 4v16", key: "1654pz" }],
   ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
   ["path", { d: "M9 20h6", key: "s66wpe" }]
 ];
-var Type = createLucideIcon("type", __iconNode39);
+var Type = createLucideIcon("type", __iconNode41);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/upload.mjs
-var __iconNode40 = [
+var __iconNode42 = [
   ["path", { d: "M12 3v12", key: "1x0j5s" }],
   ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
 ];
-var Upload = createLucideIcon("upload", __iconNode40);
+var Upload = createLucideIcon("upload", __iconNode42);
 
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/x.mjs
-var __iconNode41 = [
+var __iconNode43 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode41);
+var X = createLucideIcon("x", __iconNode43);
 
 // src/react-shell/figma/image.overlay.controller.ts
 import {
@@ -7277,9 +7295,7 @@ var FigmaImagesPanel = ({
                       {
                         "aria-label": `Edit ${imageLabel} label`,
                         className: "df-review-figma-image-icon-button",
-                        "data-review-tooltip": "Edit label",
                         disabled: isMutating,
-                        title: "Edit label",
                         type: "button",
                         onClick: (event) => {
                           event.stopPropagation();
@@ -7298,7 +7314,6 @@ var FigmaImagesPanel = ({
                       {
                         "aria-label": "Delete Figma image",
                         className: "df-review-figma-image-icon-button is-danger",
-                        "data-review-tooltip": "Delete Figma image",
                         disabled: isMutating,
                         type: "button",
                         onClick: (event) => {
@@ -7989,7 +8004,6 @@ var createReviewShellConfig = ({
   });
   const resolvedSourceInspector = resolvedReviewSourceOptions.sourceInspector;
   const resolvedSourceRoot = resolvedReviewSourceOptions.sourceRoot;
-  const isSourceInspectorEnabled = resolvedSourceInspector?.enabled !== false && Boolean(resolvedSourceRoot?.trim());
   return {
     initialPrompt,
     qaPrompt,
@@ -8015,8 +8029,7 @@ var createReviewShellConfig = ({
       sourceRoot: resolvedSourceRoot
     },
     showSourceSelect: normalizedAdapters.sources.length > 1,
-    isSourceInspectorEnabled,
-    isSourceTreeHoverOutlineEnabled: isSourceInspectorEnabled && resolvedSourceInspector?.hoverOutline !== false
+    isSourceTreeHoverOutlineEnabled: resolvedSourceInspector?.hoverOutline !== false
   };
 };
 var ReviewShellConfigContext = createContext4(null);
@@ -9603,7 +9616,11 @@ var ReviewQaPanel = ({
   const listRef = useRef4(null);
   const emptyMessage = isAllQaVisible ? `No ${activeAdapterEntry.label} QA.` : isRemoteSource ? `No ${activeAdapterEntry.label} QA on this page.` : "No QA on this page.";
   useEffect5(() => {
-    if (!isListVisible || !selectedItemId) return;
+    if (!isListVisible) return;
+    if (!selectedItemId) {
+      listRef.current?.querySelector("[data-review-qa-item-id]:focus")?.blur();
+      return;
+    }
     const selectedCard = Array.from(
       listRef.current?.querySelectorAll(
         "[data-review-qa-item-id]"
@@ -9614,90 +9631,87 @@ var ReviewQaPanel = ({
     selectedCard?.scrollIntoView({ block: "center", behavior: "smooth" });
     selectedCard?.focus({ preventScroll: true });
   }, [filteredNumberedActiveItems, isListVisible, selectedItemId]);
-  return /* @__PURE__ */ jsxs9("aside", { className: "df-review-qa-panel", "aria-hidden": !isListVisible, children: [
-    /* @__PURE__ */ jsx13("div", { className: "df-review-panel-body", children: /* @__PURE__ */ jsxs9("section", { className: "df-review-item-list", children: [
-      /* @__PURE__ */ jsx13(
-        QaPanelHeader,
-        {
-          activeItemCount: activeItems.length,
-          activeRemainingItemCount,
-          filteredItemCount: filteredNumberedActiveItems.length,
-          isAllQaVisible,
-          isLoading,
-          label: activeAdapterEntry.label,
-          qaStatusFilters,
-          qaStatusFilterCounts,
-          showSourceSelect,
-          source,
-          sourceEntries,
-          statusOptions: activeAdapterEntry.statusOptions,
-          onChangeReviewSource,
-          onEnableActiveQaStatusFilters,
-          onQaStatusFilterToggle,
-          onRefreshReviewData
-        }
-      ),
-      /* @__PURE__ */ jsxs9(
-        "div",
-        {
-          className: "df-review-list-scroll",
-          ref: listRef,
-          onClick: (event) => {
-            if (event.target === event.currentTarget) {
-              onClearSelectedItem();
+  return /* @__PURE__ */ jsx13("aside", { className: "df-review-qa-panel", "aria-hidden": !isListVisible, children: /* @__PURE__ */ jsx13("div", { className: "df-review-panel-body", children: /* @__PURE__ */ jsxs9("section", { className: "df-review-item-list", children: [
+    /* @__PURE__ */ jsx13(
+      QaPanelHeader,
+      {
+        activeItemCount: activeItems.length,
+        activeRemainingItemCount,
+        filteredItemCount: filteredNumberedActiveItems.length,
+        isAllQaVisible,
+        isLoading,
+        label: activeAdapterEntry.label,
+        qaStatusFilters,
+        qaStatusFilterCounts,
+        showSourceSelect,
+        source,
+        sourceEntries,
+        statusOptions: activeAdapterEntry.statusOptions,
+        onChangeReviewSource,
+        onEnableActiveQaStatusFilters,
+        onQaStatusFilterToggle,
+        onRefreshReviewData
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "df-review-list-scroll",
+        ref: listRef,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            onClearSelectedItem();
+          }
+        },
+        children: [
+          activeItems.length === 0 && /* @__PURE__ */ jsxs9(
+            "p",
+            {
+              className: `df-review-empty${isLoading ? " is-loading" : ""}`,
+              children: [
+                isLoading && /* @__PURE__ */ jsx13("span", { className: "df-review-spinner", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx13("span", { children: isLoading ? `Loading ${activeAdapterEntry.label} QA...` : emptyMessage })
+              ]
             }
-          },
-          children: [
-            activeItems.length === 0 && /* @__PURE__ */ jsxs9(
-              "p",
+          ),
+          activeItems.length > 0 && filteredNumberedActiveItems.length === 0 && /* @__PURE__ */ jsx13("p", { className: "df-review-empty", children: "No QA in this filter." }),
+          filteredNumberedActiveItems.map((numberedItem) => {
+            const { item } = numberedItem;
+            return /* @__PURE__ */ jsx13(
+              QaItemCard,
               {
-                className: `df-review-empty${isLoading ? " is-loading" : ""}`,
-                children: [
-                  isLoading && /* @__PURE__ */ jsx13("span", { className: "df-review-spinner", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx13("span", { children: isLoading ? `Loading ${activeAdapterEntry.label} QA...` : emptyMessage })
-                ]
-              }
-            ),
-            activeItems.length > 0 && filteredNumberedActiveItems.length === 0 && /* @__PURE__ */ jsx13("p", { className: "df-review-empty", children: "No QA in this filter." }),
-            filteredNumberedActiveItems.map((numberedItem) => {
-              const { item } = numberedItem;
-              return /* @__PURE__ */ jsx13(
-                QaItemCard,
-                {
-                  activeAdapterEntry,
-                  fields,
-                  assigneeTitle,
-                  currentPresetScope,
-                  getItemPresetScope,
-                  isOverlayVisible: !hiddenOverlayItemIds.has(item.id),
-                  isMutating: mutatingItemIds.has(item.id),
-                  isRemoteSource,
-                  numberedItem,
-                  remoteAdapterEntry,
-                  copiedPromptKey,
-                  selectedItemId,
-                  onChangeItemAssignee,
-                  onChangeItemStatus,
-                  onClearSelectedItem,
-                  onCopyItemLabel,
-                  onCopyItemLink,
-                  onCopyItemPrompt,
-                  onCopyRemoteIssuePath,
-                  onEditItem,
-                  onRemoveItem,
-                  onRestoreReviewItem,
-                  onSubmitItem,
-                  onToggleItemOverlayVisibility
-                },
-                item.id
-              );
-            })
-          ]
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx13("div", { className: "df-review-qa-draft-host" })
-  ] });
+                activeAdapterEntry,
+                fields,
+                assigneeTitle,
+                currentPresetScope,
+                getItemPresetScope,
+                isOverlayVisible: !hiddenOverlayItemIds.has(item.id),
+                isMutating: mutatingItemIds.has(item.id),
+                isRemoteSource,
+                numberedItem,
+                remoteAdapterEntry,
+                copiedPromptKey,
+                selectedItemId,
+                onChangeItemAssignee,
+                onChangeItemStatus,
+                onClearSelectedItem,
+                onCopyItemLabel,
+                onCopyItemLink,
+                onCopyItemPrompt,
+                onCopyRemoteIssuePath,
+                onEditItem,
+                onRemoveItem,
+                onRestoreReviewItem,
+                onSubmitItem,
+                onToggleItemOverlayVisibility
+              },
+              item.id
+            );
+          })
+        ]
+      }
+    )
+  ] }) }) });
 };
 
 // src/react-shell/qa/use.review.qa.panel.data.ts
@@ -10466,6 +10480,7 @@ var getSectionOutline = (root, options) => {
 function getSectionOutlineRoots(root, options) {
   return Array.from(root.querySelectorAll(SECTION_OUTLINE_ROOT_SELECTOR)).filter(
     (element) => {
+      if (element.closest('[data-dfwr-adjust-preview="true"]')) return false;
       const source = getSourceHintFromElement(element);
       const label = getOutlineLabel(element, source, "");
       return !isSkippedOutlineNode(label, source?.file, options) && !hasSectionOutlineRootAncestor(element, root, options);
@@ -11020,22 +11035,268 @@ var useReviewShellRefs = () => {
   return refs;
 };
 
+// src/react-shell/target/dom-adjustment.layer.ts
+var SOURCE_HIDDEN_ATTRIBUTE = "data-dfwr-move-source-hidden";
+var LAYER_ROOT_ATTRIBUTE = "data-dfwr-move-layer-root";
+var DomAdjustmentLayerManager = class {
+  constructor({
+    document: document2,
+    onClear,
+    renderElement = renderDomElementToCanvas
+  }) {
+    this.layers = /* @__PURE__ */ new Map();
+    this.pending = /* @__PURE__ */ new Map();
+    this.document = document2;
+    this.onClear = onClear;
+    this.renderElement = renderElement;
+    this.root = createLayerRoot(document2);
+    this.style = createLayerStyle(document2);
+    document2.head?.appendChild(this.style);
+    document2.documentElement.appendChild(this.root);
+  }
+  belongsTo(document2) {
+    return this.document === document2;
+  }
+  async create(entryId, label, element, position, viewportScale) {
+    const existing = this.layers.get(entryId);
+    if (existing) {
+      existing.position = position;
+      syncLayerPosition(existing.wrapper, position, viewportScale);
+      return true;
+    }
+    const HTMLElementConstructor = element.ownerDocument.defaultView?.HTMLElement;
+    if (!HTMLElementConstructor || !(element instanceof HTMLElementConstructor)) {
+      return false;
+    }
+    const token = Symbol(entryId);
+    this.pending.set(entryId, token);
+    const rect = element.getBoundingClientRect();
+    const canvas = await this.renderElement(element);
+    if (this.pending.get(entryId) !== token) return false;
+    this.pending.delete(entryId);
+    const wrapper = createLayerWrapper(this.document, entryId, label, canvas);
+    wrapper.style.left = `${roundCss(rect.left + (this.document.defaultView?.scrollX ?? 0))}px`;
+    wrapper.style.top = `${roundCss(rect.top + (this.document.defaultView?.scrollY ?? 0))}px`;
+    wrapper.style.width = `${roundCss(rect.width)}px`;
+    wrapper.style.height = `${roundCss(rect.height)}px`;
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    syncLayerPosition(wrapper, position, viewportScale);
+    const hiddenAttributeValue = element.getAttribute(SOURCE_HIDDEN_ATTRIBUTE);
+    element.setAttribute(SOURCE_HIDDEN_ATTRIBUTE, "true");
+    wrapper.querySelector("button")?.addEventListener("click", () => {
+      this.clear(entryId);
+    });
+    this.root.appendChild(wrapper);
+    this.layers.set(entryId, {
+      element,
+      hiddenAttributeValue,
+      position,
+      wrapper
+    });
+    return true;
+  }
+  adjust(entryId, delta, viewportScale) {
+    const layer = this.layers.get(entryId);
+    if (!layer) return null;
+    layer.position = {
+      x: layer.position.x + (delta.x ?? 0),
+      y: layer.position.y + (delta.y ?? 0)
+    };
+    syncLayerPosition(layer.wrapper, layer.position, viewportScale);
+    return layer.position;
+  }
+  setActive(entryId) {
+    this.layers.forEach(({ wrapper }, id) => {
+      if (id === entryId) {
+        wrapper.dataset.dfwrMoveActive = "true";
+      } else {
+        delete wrapper.dataset.dfwrMoveActive;
+      }
+    });
+  }
+  clear(entryId, notify = true) {
+    this.pending.delete(entryId);
+    const layer = this.layers.get(entryId);
+    if (!layer) {
+      if (notify) this.onClear(entryId);
+      return;
+    }
+    layer.wrapper.remove();
+    if (layer.hiddenAttributeValue === null) {
+      layer.element.removeAttribute(SOURCE_HIDDEN_ATTRIBUTE);
+    } else {
+      layer.element.setAttribute(
+        SOURCE_HIDDEN_ATTRIBUTE,
+        layer.hiddenAttributeValue
+      );
+    }
+    this.layers.delete(entryId);
+    if (notify) this.onClear(entryId);
+  }
+  destroy() {
+    this.pending.clear();
+    [...this.layers.keys()].forEach((entryId) => this.clear(entryId, false));
+    this.root.remove();
+    this.style.remove();
+  }
+};
+async function renderDomElementToCanvas(element) {
+  const html2canvas = (await import("html2canvas")).default;
+  return html2canvas(element, {
+    allowTaint: false,
+    backgroundColor: null,
+    imageTimeout: 5e3,
+    logging: false,
+    removeContainer: true,
+    scale: element.ownerDocument.defaultView?.devicePixelRatio ?? 1,
+    useCORS: true
+  });
+}
+function createLayerRoot(document2) {
+  const root = document2.createElement("div");
+  root.setAttribute(LAYER_ROOT_ATTRIBUTE, "true");
+  root.style.position = "absolute";
+  root.style.inset = "0 auto auto 0";
+  root.style.width = "0";
+  root.style.height = "0";
+  root.style.zIndex = "2147483645";
+  root.style.pointerEvents = "none";
+  return root;
+}
+function createLayerStyle(document2) {
+  const style = document2.createElement("style");
+  style.textContent = `
+    [${SOURCE_HIDDEN_ATTRIBUTE}='true'] {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    [data-dfwr-move-entry-id] {
+      box-sizing: border-box;
+      outline: 1px dashed rgba(215, 255, 95, 0.62);
+      outline-offset: 2px;
+    }
+
+    [data-dfwr-move-entry-id][data-dfwr-move-active='true'] {
+      outline-color: #d7ff5f;
+      outline-width: 2px;
+    }
+  `;
+  return style;
+}
+function createLayerWrapper(document2, entryId, label, canvas) {
+  const wrapper = document2.createElement("div");
+  wrapper.dataset.dfwrMoveEntryId = entryId;
+  wrapper.style.position = "absolute";
+  wrapper.style.transformOrigin = "top left";
+  wrapper.style.pointerEvents = "none";
+  wrapper.style.willChange = "transform";
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.style.display = "block";
+  canvas.style.pointerEvents = "none";
+  const clear = document2.createElement("button");
+  clear.type = "button";
+  clear.title = `Clear ${label} move`;
+  clear.setAttribute("aria-label", `Clear ${label} move`);
+  clear.setAttribute("data-dfwr-source-open-shortcut", "true");
+  clear.style.position = "absolute";
+  clear.style.top = "4px";
+  clear.style.right = "4px";
+  clear.style.width = "22px";
+  clear.style.height = "22px";
+  clear.style.display = "grid";
+  clear.style.placeItems = "center";
+  clear.style.padding = "0";
+  clear.style.border = "1px solid rgba(255, 255, 255, 0.35)";
+  clear.style.borderRadius = "50%";
+  clear.style.background = "rgba(18, 23, 31, 0.88)";
+  clear.style.color = "#edf3fb";
+  clear.style.font = "16px/1 system-ui, sans-serif";
+  clear.style.cursor = "pointer";
+  clear.style.pointerEvents = "auto";
+  const clearIcon = document2.createElement("span");
+  clearIcon.textContent = "\xD7";
+  clearIcon.style.transform = "translateY(-1px)";
+  clear.appendChild(clearIcon);
+  wrapper.append(canvas, clear);
+  return wrapper;
+}
+function syncLayerPosition(wrapper, position, viewportScale) {
+  wrapper.style.transform = `translate(${roundCss(position.x * viewportScale)}px, ${roundCss(position.y * viewportScale)}px)`;
+}
+function roundCss(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+
 // src/react-shell/hooks/use.review.section.outline.ts
+var EMPTY_DOM_ADJUSTMENT_POSITION = {
+  x: 0,
+  y: 0
+};
 var SOURCE_TREE_PANEL_CLOSE_DELAY_MS = 180;
+var getSectionDomAdjustmentKeyDelta = (event) => {
+  const step = event.shiftKey ? 10 : 1;
+  if (event.key === "ArrowLeft") return { x: -step };
+  if (event.key === "ArrowRight") return { x: step };
+  if (event.key === "ArrowUp") return { y: -step };
+  if (event.key === "ArrowDown") return { y: step };
+  return null;
+};
+var isDomAdjustmentEmpty = (position) => position.x === 0 && position.y === 0;
+var isEditableKeyTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  const tagName = target.tagName;
+  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT" || target.isContentEditable;
+};
+var COMPONENT_SELECTION_ACTION_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "summary",
+  "textarea",
+  '[contenteditable="true"]',
+  "[data-dfwr-move-entry-id]",
+  '[role="button"]'
+].join(", ");
+var getClosestElement = (target, selector) => {
+  const element = target;
+  return typeof element?.closest === "function" ? element.closest(selector) : null;
+};
+var findSectionOutlinePathForElement = (entries, element) => {
+  let bestPath = null;
+  const visit = (entry, path) => {
+    const isMatch = entry.element === element || entry.element.contains(element);
+    if (!isMatch) return;
+    const nextPath = [...path, entry];
+    bestPath = nextPath;
+    entry.children.forEach((child) => visit(child, nextPath));
+  };
+  entries.forEach((entry) => visit(entry, []));
+  return bestPath;
+};
 function useReviewSectionOutline({
   onClearSourceInspector,
-  onInitReviewKit
+  onClearSourceSelection,
+  onInitReviewKit,
+  onSelectSourceElement
 }) {
-  const { sectionOutlineOptions, sourceOpenOptions } = useReviewShellConfig();
+  const { reviewViewportPresets, sectionOutlineOptions, sourceOpenOptions } = useReviewShellConfig();
   const { controllerRef, frameScrollRef, iframeRef } = useReviewShellRefs();
   const { canWriteDom } = useReviewShellAdapterState();
   const storeApi = useReviewShellStoreApi();
   const isListVisible = useReviewShellStore((state) => state.isListVisible);
   const sidePanel = useReviewShellStore((state) => state.sidePanel);
   const target = useReviewShellStore((state) => state.target);
+  const size = useReviewShellStore((state) => state.size);
   const targetFrameLoadVersion = useReviewShellStore(
     (state) => state.targetFrameLoadVersion
   );
+  const sourceTreeFocusRequest = useReviewShellStore(
+    (state) => state.sourceTreeFocusRequest
+  );
+  const mode = useReviewShellStore((state) => state.mode);
   const setMode = useReviewShellStore((state) => state.setMode);
   const showToast = useReviewToast();
   const isPanelVisible = isListVisible && sidePanel === "source";
@@ -11047,6 +11308,65 @@ function useReviewSectionOutline({
   );
   const [sectionOutlineMetaVisibility, setSectionOutlineMetaVisibility] = useState6(() => getStoredSourceTreeMetaVisibility());
   const [collapsedSectionOutlineIds, setCollapsedSectionOutlineIds] = useState6(() => /* @__PURE__ */ new Set());
+  const [selectedSectionOutlineId, setSelectedSectionOutlineId] = useState6(null);
+  const [activeDomAdjustmentEntryId, setActiveDomAdjustmentEntryId] = useState6(null);
+  const [domAdjustmentByEntryId, setDomAdjustmentByEntryId] = useState6({});
+  const handledSourceTreeFocusVersionRef = useRef5(0);
+  const domAdjustmentManagerRef = useRef5(null);
+  const domAdjustmentRequestVersionRef = useRef5(0);
+  const clearSectionOutlineSelection = useCallback6(() => {
+    const activeElement = document.activeElement;
+    if (activeElement instanceof HTMLElement && activeElement.closest(".df-review-section-outline-entry-body")) {
+      activeElement.blur();
+    }
+    setSelectedSectionOutlineId(null);
+    onClearSourceSelection();
+  }, [onClearSourceSelection]);
+  const handleDomAdjustmentCleared = useCallback6((entryId) => {
+    setActiveDomAdjustmentEntryId(
+      (current) => current === entryId ? null : current
+    );
+    setDomAdjustmentByEntryId((current) => {
+      if (!current[entryId]) return current;
+      const next = { ...current };
+      delete next[entryId];
+      return next;
+    });
+  }, []);
+  const getDomAdjustmentManager = useCallback6(() => {
+    const frameDocument = iframeRef.current?.contentDocument;
+    if (!frameDocument?.documentElement || !frameDocument.body) return null;
+    const current = domAdjustmentManagerRef.current;
+    if (current?.belongsTo(frameDocument)) return current;
+    current?.destroy();
+    const next = new DomAdjustmentLayerManager({
+      document: frameDocument,
+      onClear: handleDomAdjustmentCleared
+    });
+    domAdjustmentManagerRef.current = next;
+    return next;
+  }, [handleDomAdjustmentCleared, iframeRef]);
+  const domAdjustmentViewportScale = useMemo5(
+    () => getDraftViewportScale(
+      { width: size.width, height: size.height },
+      reviewViewportPresets
+    ).scale,
+    [reviewViewportPresets, size.height, size.width]
+  );
+  const clearActiveDomAdjustment = useCallback6(() => {
+    setActiveDomAdjustmentEntryId(null);
+  }, []);
+  const clearDomAdjustments = useCallback6(() => {
+    domAdjustmentRequestVersionRef.current += 1;
+    domAdjustmentManagerRef.current?.destroy();
+    domAdjustmentManagerRef.current = null;
+    setActiveDomAdjustmentEntryId(null);
+    setDomAdjustmentByEntryId({});
+  }, []);
+  const finishActiveDomAdjustment = useCallback6(() => {
+    if (!activeDomAdjustmentEntryId) return;
+    clearActiveDomAdjustment();
+  }, [activeDomAdjustmentEntryId, clearActiveDomAdjustment]);
   const updateSectionOutlineFilter = useCallback6((nextFilter) => {
     setSectionOutlineFilter(nextFilter);
     writeStoredSourceTreeFilter(nextFilter);
@@ -11083,9 +11403,142 @@ function useReviewSectionOutline({
   }, [sectionOutlineTotalCount]);
   useEffect6(() => {
     onClearSourceInspector();
+    onClearSourceSelection();
     setCollapsedSectionOutlineIds(/* @__PURE__ */ new Set());
+    setSelectedSectionOutlineId(null);
+    clearDomAdjustments();
     setSectionOutline(null);
-  }, [onClearSourceInspector, targetSrc]);
+  }, [
+    clearDomAdjustments,
+    onClearSourceInspector,
+    onClearSourceSelection,
+    targetFrameLoadVersion,
+    targetSrc
+  ]);
+  useEffect6(() => {
+    if (!activeDomAdjustmentEntryId) return void 0;
+    const handleKeyDown = (event) => {
+      if (isEditableKeyTarget(event.target)) return;
+      const delta = getSectionDomAdjustmentKeyDelta(event);
+      if (!delta) return;
+      const position = domAdjustmentManagerRef.current?.adjust(
+        activeDomAdjustmentEntryId,
+        delta,
+        domAdjustmentViewportScale
+      );
+      if (!position) {
+        clearActiveDomAdjustment();
+        return;
+      }
+      setDomAdjustmentByEntryId((current) => ({
+        ...current,
+        [activeDomAdjustmentEntryId]: position
+      }));
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [
+    activeDomAdjustmentEntryId,
+    clearActiveDomAdjustment,
+    domAdjustmentViewportScale
+  ]);
+  useEffect6(() => {
+    if (!activeDomAdjustmentEntryId) return void 0;
+    const finishOnPointerDown = (event) => {
+      if (event.target instanceof Element && event.target.closest(".df-review-section-outline-link.is-dom-adjust")) {
+        return;
+      }
+      finishActiveDomAdjustment();
+    };
+    let frameDocument = null;
+    try {
+      frameDocument = iframeRef.current?.contentDocument ?? null;
+    } catch {
+      frameDocument = null;
+    }
+    window.addEventListener("pointerdown", finishOnPointerDown, true);
+    frameDocument?.addEventListener(
+      "pointerdown",
+      finishOnPointerDown,
+      true
+    );
+    return () => {
+      window.removeEventListener("pointerdown", finishOnPointerDown, true);
+      frameDocument?.removeEventListener(
+        "pointerdown",
+        finishOnPointerDown,
+        true
+      );
+    };
+  }, [
+    activeDomAdjustmentEntryId,
+    finishActiveDomAdjustment,
+    iframeRef
+  ]);
+  useEffect6(() => {
+    domAdjustmentManagerRef.current?.setActive(activeDomAdjustmentEntryId);
+  }, [activeDomAdjustmentEntryId]);
+  useEffect6(() => {
+    if (!selectedSectionOutlineId || mode !== "idle" || activeDomAdjustmentEntryId) {
+      return void 0;
+    }
+    let frameDocument = null;
+    try {
+      frameDocument = iframeRef.current?.contentDocument ?? null;
+    } catch {
+      frameDocument = null;
+    }
+    const clearOnFramePointerDown = (event) => {
+      if (getClosestElement(event.target, COMPONENT_SELECTION_ACTION_SELECTOR)) {
+        return;
+      }
+      clearSectionOutlineSelection();
+    };
+    const clearOnWorkspacePointerDown = (event) => {
+      if (!getClosestElement(event.target, ".df-review-frame-scroll")) return;
+      if (getClosestElement(event.target, COMPONENT_SELECTION_ACTION_SELECTOR)) {
+        return;
+      }
+      clearSectionOutlineSelection();
+    };
+    const clearOnEscape = (event) => {
+      if (event.key === "Escape") clearSectionOutlineSelection();
+    };
+    frameDocument?.addEventListener(
+      "pointerdown",
+      clearOnFramePointerDown,
+      true
+    );
+    frameDocument?.addEventListener("keydown", clearOnEscape, true);
+    window.addEventListener(
+      "pointerdown",
+      clearOnWorkspacePointerDown,
+      true
+    );
+    window.addEventListener("keydown", clearOnEscape, true);
+    return () => {
+      frameDocument?.removeEventListener(
+        "pointerdown",
+        clearOnFramePointerDown,
+        true
+      );
+      frameDocument?.removeEventListener("keydown", clearOnEscape, true);
+      window.removeEventListener(
+        "pointerdown",
+        clearOnWorkspacePointerDown,
+        true
+      );
+      window.removeEventListener("keydown", clearOnEscape, true);
+    };
+  }, [
+    activeDomAdjustmentEntryId,
+    clearSectionOutlineSelection,
+    iframeRef,
+    mode,
+    selectedSectionOutlineId
+  ]);
   const getCurrentSectionOutline = useCallback6(
     () => {
       let frameDocument = null;
@@ -11178,13 +11631,79 @@ function useReviewSectionOutline({
     });
   }, []);
   const scrollToSection = useCallback6((entry) => {
-    scrollElementInTarget(entry.element, "start");
+    scrollElementInTarget(entry.element, "center");
     centerFrameScrollOnElement(
       frameScrollRef.current,
       iframeRef.current,
       entry.element
     );
   }, [frameScrollRef, iframeRef]);
+  const selectSectionOutlinePath = useCallback6(
+    (path) => {
+      const entry = path[path.length - 1];
+      if (!entry) return;
+      setSelectedSectionOutlineId(entry.id);
+      onSelectSourceElement(entry.element);
+      setCollapsedSectionOutlineIds((current) => {
+        const next = new Set(current);
+        path.slice(0, -1).forEach((ancestor) => next.delete(ancestor.id));
+        return next;
+      });
+    },
+    [onSelectSourceElement]
+  );
+  const selectSectionOutlineEntry = useCallback6(
+    (entry) => {
+      finishActiveDomAdjustment();
+      if (selectedSectionOutlineId === entry.id) {
+        clearSectionOutlineSelection();
+        return;
+      }
+      scrollToSection(entry);
+      setSelectedSectionOutlineId(entry.id);
+      onSelectSourceElement(entry.element);
+    },
+    [
+      clearSectionOutlineSelection,
+      finishActiveDomAdjustment,
+      onSelectSourceElement,
+      scrollToSection,
+      selectedSectionOutlineId
+    ]
+  );
+  useEffect6(() => {
+    const request = sourceTreeFocusRequest;
+    if (!request || handledSourceTreeFocusVersionRef.current === request.version || !isPanelVisible) {
+      return;
+    }
+    const entries = sectionOutline ?? getCurrentSectionOutline();
+    if (!entries) return;
+    if (!sectionOutline) {
+      setSectionOutline(entries);
+      setCollapsedSectionOutlineIds(
+        getDefaultCollapsedSectionOutlineIds(entries)
+      );
+      sectionOutlineCountRef.current = getSectionOutlineEntryCount(entries);
+    }
+    const path = findSectionOutlinePathForElement(entries, request.element);
+    if (!path) {
+      handledSourceTreeFocusVersionRef.current = request.version;
+      showToast("Component not found");
+      return;
+    }
+    handledSourceTreeFocusVersionRef.current = request.version;
+    if (sectionOutlineFilter) updateSectionOutlineFilter("");
+    selectSectionOutlinePath(path);
+  }, [
+    getCurrentSectionOutline,
+    isPanelVisible,
+    sectionOutline,
+    sectionOutlineFilter,
+    selectSectionOutlinePath,
+    showToast,
+    sourceTreeFocusRequest,
+    updateSectionOutlineFilter
+  ]);
   const openSectionSource = useCallback6(
     (entry) => {
       const didOpen = openSourceInEditor(entry.source, {
@@ -11223,9 +11742,12 @@ function useReviewSectionOutline({
         showToast("Component has no visible area here");
         return;
       }
+      const position = domAdjustmentByEntryId[entry.id];
+      setSelectedSectionOutlineId(entry.id);
+      onSelectSourceElement(entry.element);
+      clearActiveDomAdjustment();
       onClearSourceInspector();
       const state = storeApi.getState();
-      state.setSidePanel("qa");
       state.setIsListVisible(true);
       let targetWindow = null;
       try {
@@ -11250,6 +11772,9 @@ function useReviewSectionOutline({
         );
         await waitForFrame(targetWindow);
         await controller.startElementReview(entry.element);
+        if (position && !isDomAdjustmentEmpty(position)) {
+          controller.adjustElementSelection(position, { preview: false });
+        }
         await waitForFrame(targetWindow);
         setMode(controller.getMode());
       }).catch(() => {
@@ -11259,15 +11784,95 @@ function useReviewSectionOutline({
     [
       canWriteDom,
       controllerRef,
+      domAdjustmentByEntryId,
       frameScrollRef,
       iframeRef,
       onClearSourceInspector,
       onInitReviewKit,
+      onSelectSourceElement,
+      clearActiveDomAdjustment,
       setMode,
       showToast,
       storeApi
     ]
   );
+  const startSectionDomAdjustment = useCallback6(
+    (entry) => {
+      if (!canWriteDom) {
+        showToast("DOM select unavailable");
+        return;
+      }
+      const rect = entry.element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        showToast("Component has no visible area here");
+        return;
+      }
+      finishActiveDomAdjustment();
+      scrollToSection(entry);
+      setSelectedSectionOutlineId(entry.id);
+      onSelectSourceElement(entry.element);
+      const requestVersion = domAdjustmentRequestVersionRef.current + 1;
+      domAdjustmentRequestVersionRef.current = requestVersion;
+      let targetWindow = null;
+      try {
+        targetWindow = entry.element.ownerDocument.defaultView ?? iframeRef.current?.contentWindow ?? null;
+      } catch {
+        targetWindow = null;
+      }
+      void waitForFrame(targetWindow).then(async () => {
+        const position = domAdjustmentByEntryId[entry.id] ?? EMPTY_DOM_ADJUSTMENT_POSITION;
+        const manager = getDomAdjustmentManager();
+        if (!manager) {
+          showToast("DOM move unavailable");
+          return;
+        }
+        const didCreate = await manager.create(
+          entry.id,
+          entry.label,
+          entry.element,
+          position,
+          domAdjustmentViewportScale
+        );
+        if (!didCreate) {
+          showToast("DOM move unavailable");
+          return;
+        }
+        setDomAdjustmentByEntryId((current) => ({
+          ...current,
+          [entry.id]: position
+        }));
+        if (domAdjustmentRequestVersionRef.current === requestVersion) {
+          setActiveDomAdjustmentEntryId(entry.id);
+        }
+      }).catch(() => {
+        clearActiveDomAdjustment();
+        showToast("DOM move unavailable");
+      });
+    },
+    [
+      canWriteDom,
+      clearActiveDomAdjustment,
+      domAdjustmentByEntryId,
+      domAdjustmentViewportScale,
+      finishActiveDomAdjustment,
+      getDomAdjustmentManager,
+      iframeRef,
+      onSelectSourceElement,
+      scrollToSection,
+      showToast
+    ]
+  );
+  const clearSectionDomAdjustment = useCallback6(
+    (entry) => {
+      const manager = domAdjustmentManagerRef.current;
+      if (manager) {
+        manager.clear(entry.id);
+        return;
+      }
+      handleDomAdjustmentCleared(entry.id);
+    },
+    [handleDomAdjustmentCleared]
+  );
   return {
     canWriteDom,
     collapsedSectionOutlineIds,
@@ -11279,11 +11884,17 @@ function useReviewSectionOutline({
     openSectionSource,
     openSectionUsageSource,
     refreshCurrentSectionOutline,
-    scrollToSection,
     sectionOutline,
     sectionOutlineFilter,
     sectionOutlineMetaVisibility,
     sectionOutlineTotalCount,
+    activeDomAdjustmentEntryId,
+    domAdjustmentByEntryId,
+    clearSectionDomAdjustment,
+    clearSectionOutlineSelection,
+    selectedSectionOutlineId,
+    selectSectionOutlineEntry,
+    startSectionDomAdjustment,
     startSectionDomReview,
     toggleSectionOutlineEntry,
     updateSectionOutlineFilter,
@@ -11292,7 +11903,9 @@ function useReviewSectionOutline({
 }
 
 // src/react-shell/review/section.outline.panel.tsx
+import React from "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var ENTRY_ACTION_SELECTOR = 'a, button, input, select, textarea, [role="button"]';
 var SectionOutlinePanel = ({
   isPanelVisible,
   isFiltering,
@@ -11302,6 +11915,9 @@ var SectionOutlinePanel = ({
   filter,
   entries,
   collapsedIds,
+  selectedEntryId,
+  activeDomAdjustmentEntryId,
+  domAdjustmentByEntryId,
   canWriteDom,
   isFontMetaVisible,
   isMediaMetaVisible,
@@ -11309,7 +11925,10 @@ var SectionOutlinePanel = ({
   onToggleMeta,
   onFilterChange,
   onToggleEntry,
-  onScrollToSection,
+  onSelectEntry,
+  onClearSelection,
+  onClearDomAdjustment,
+  onStartDomAdjustment,
   onOpenData,
   onOpenSource,
   onOpenUsageSource,
@@ -11317,6 +11936,13 @@ var SectionOutlinePanel = ({
   onHoverElement,
   onClearHover
 }) => {
+  const selectedEntryRef = React.useRef(null);
+  React.useEffect(() => {
+    selectedEntryRef.current?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [selectedEntryId]);
   const renderMeta = (entry) => {
     const { metadata } = entry;
     const rows = [];
@@ -11446,6 +12072,17 @@ var SectionOutlinePanel = ({
   const renderEntry = (entry) => {
     const hasChildren = entry.children.length > 0;
     const isCollapsed = !isFiltering && collapsedIds.has(entry.id);
+    const isSelected = selectedEntryId === entry.id;
+    const isDomAdjusting = activeDomAdjustmentEntryId === entry.id;
+    const hasDomAdjustment = Object.prototype.hasOwnProperty.call(
+      domAdjustmentByEntryId,
+      entry.id
+    );
+    const domAdjustmentPosition = domAdjustmentByEntryId[entry.id] ?? {
+      x: 0,
+      y: 0
+    };
+    const shouldShowDomAdjustment = isDomAdjusting || hasDomAdjustment;
     return /* @__PURE__ */ jsxs11(
       "div",
       {
@@ -11454,7 +12091,16 @@ var SectionOutlinePanel = ({
           /* @__PURE__ */ jsxs11(
             "div",
             {
-              className: "df-review-section-outline-entry-body",
+              className: `df-review-section-outline-entry-body${isSelected ? " is-selected" : ""}`,
+              onClick: (event) => {
+                if (event.target instanceof Element && event.target.closest(ENTRY_ACTION_SELECTOR)) {
+                  return;
+                }
+                event.currentTarget.querySelector(
+                  ".df-review-section-outline-name"
+                )?.focus();
+                onSelectEntry(entry);
+              },
               onMouseEnter: () => onHoverElement(entry.element),
               onMouseLeave: onClearHover,
               onMouseOver: () => onHoverElement(entry.element),
@@ -11470,7 +12116,8 @@ var SectionOutlinePanel = ({
                 /* @__PURE__ */ jsxs11(
                   "div",
                   {
-                    className: "df-review-section-outline-row",
+                    ref: isSelected ? selectedEntryRef : void 0,
+                    className: `df-review-section-outline-row${isSelected ? " is-selected" : ""}`,
                     style: { paddingLeft: "6px" },
                     children: [
                       hasChildren ? /* @__PURE__ */ jsx15(
@@ -11491,77 +12138,120 @@ var SectionOutlinePanel = ({
                           className: "df-review-section-outline-toggle is-placeholder"
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
-                        "button",
-                        {
-                          className: "df-review-section-outline-name",
-                          title: entry.filePath,
-                          type: "button",
-                          onClick: () => onScrollToSection(entry),
-                          children: /* @__PURE__ */ jsx15("span", { children: entry.label })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs11("span", { className: "df-review-section-outline-links", children: [
-                        /* @__PURE__ */ jsx15(
-                          "button",
-                          {
-                            "aria-label": `Open ${entry.label} data`,
-                            className: "df-review-section-outline-link",
-                            "data-review-tooltip": "Open data",
-                            title: "Open data",
-                            type: "button",
-                            disabled: !entry.data?.file,
-                            onClick: () => onOpenData(entry),
-                            children: /* @__PURE__ */ jsx15(Database, { "aria-hidden": "true" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          "button",
-                          {
-                            "aria-label": `Open ${entry.label} source`,
-                            className: "df-review-section-outline-link",
-                            "data-review-tooltip": "Open source",
-                            title: "Open source",
-                            type: "button",
-                            disabled: !entry.source?.file,
-                            onClick: () => onOpenSource(entry),
-                            children: /* @__PURE__ */ jsx15(CodeXml, { "aria-hidden": "true" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          "button",
-                          {
-                            "aria-label": `Open ${entry.label} usage`,
-                            className: "df-review-section-outline-link",
-                            "data-review-tooltip": "Open parent usage",
-                            title: "Open parent usage",
-                            type: "button",
-                            disabled: !entry.metadata.usage?.source.file,
-                            onClick: () => onOpenUsageSource(entry),
-                            children: /* @__PURE__ */ jsx15(CornerUpRight, { "aria-hidden": "true" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: "df-review-section-outline-divider",
-                            children: "|"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsxs11("div", { className: "df-review-section-outline-main", children: [
+                        /* @__PURE__ */ jsx15("div", { className: "df-review-section-outline-title", children: /* @__PURE__ */ jsx15(
                           "button",
                           {
-                            "aria-label": `Start DOM QA for ${entry.label}`,
-                            className: "df-review-section-outline-link is-dom-select",
-                            "data-review-tooltip": "DOM select",
-                            title: "DOM select",
+                            className: "df-review-section-outline-name",
+                            title: entry.filePath,
                             type: "button",
-                            disabled: !canWriteDom,
-                            onClick: () => onStartDomReview(entry),
-                            children: /* @__PURE__ */ jsx15(SquareMousePointer, { "aria-hidden": "true" })
+                            onClick: () => onSelectEntry(entry),
+                            children: /* @__PURE__ */ jsx15("span", { children: entry.label })
                           }
-                        )
+                        ) }),
+                        /* @__PURE__ */ jsxs11("div", { className: "df-review-section-outline-actions", children: [
+                          /* @__PURE__ */ jsxs11("span", { className: "df-review-section-outline-action-group is-left", children: [
+                            /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Move ${entry.label} DOM`,
+                                className: `df-review-section-outline-link is-dom-adjust${isDomAdjusting ? " is-active" : ""}`,
+                                "data-review-tooltip": isDomAdjusting ? "Moving DOM" : "Move DOM",
+                                title: isDomAdjusting ? "Moving DOM" : "Move DOM",
+                                type: "button",
+                                disabled: !canWriteDom,
+                                onClick: () => onStartDomAdjustment(entry),
+                                children: /* @__PURE__ */ jsx15(Move, { "aria-hidden": "true" })
+                              }
+                            ),
+                            shouldShowDomAdjustment ? /* @__PURE__ */ jsxs11(
+                              "span",
+                              {
+                                className: "df-review-section-outline-adjust-status",
+                                "aria-label": `DOM adjustment position x ${domAdjustmentPosition.x}, y ${domAdjustmentPosition.y}`,
+                                children: [
+                                  /* @__PURE__ */ jsx15("code", { children: domAdjustmentPosition.x }),
+                                  /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: ":" }),
+                                  /* @__PURE__ */ jsx15("code", { children: domAdjustmentPosition.y })
+                                ]
+                              }
+                            ) : null,
+                            shouldShowDomAdjustment ? /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Clear ${entry.label} DOM adjustment`,
+                                className: "df-review-section-outline-link is-dom-reset",
+                                "data-review-tooltip": "Clear move",
+                                title: "Clear move",
+                                type: "button",
+                                onClick: () => onClearDomAdjustment(entry),
+                                children: /* @__PURE__ */ jsx15(RotateCcw, { "aria-hidden": "true" })
+                              }
+                            ) : null
+                          ] }),
+                          /* @__PURE__ */ jsxs11("span", { className: "df-review-section-outline-action-group is-right", children: [
+                            /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Open ${entry.label} data`,
+                                className: "df-review-section-outline-link",
+                                "data-review-tooltip": "Open data",
+                                title: "Open data",
+                                type: "button",
+                                disabled: !entry.data?.file,
+                                onClick: () => onOpenData(entry),
+                                children: /* @__PURE__ */ jsx15(Database, { "aria-hidden": "true" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Open ${entry.label} source`,
+                                className: "df-review-section-outline-link",
+                                "data-review-tooltip": "Open source",
+                                title: "Open source",
+                                type: "button",
+                                disabled: !entry.source?.file,
+                                onClick: () => onOpenSource(entry),
+                                children: /* @__PURE__ */ jsx15(CodeXml, { "aria-hidden": "true" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Open ${entry.label} usage`,
+                                className: "df-review-section-outline-link",
+                                "data-review-tooltip": "Open parent usage",
+                                title: "Open parent usage",
+                                type: "button",
+                                disabled: !entry.metadata.usage?.source.file,
+                                onClick: () => onOpenUsageSource(entry),
+                                children: /* @__PURE__ */ jsx15(CornerUpRight, { "aria-hidden": "true" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "df-review-section-outline-divider",
+                                children: "|"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "button",
+                              {
+                                "aria-label": `Start DOM QA for ${entry.label}`,
+                                className: "df-review-section-outline-link is-dom-select",
+                                "data-review-tooltip": "DOM QA",
+                                title: "DOM QA",
+                                type: "button",
+                                disabled: !canWriteDom,
+                                onClick: () => onStartDomReview(entry),
+                                children: /* @__PURE__ */ jsx15(SquareMousePointer, { "aria-hidden": "true" })
+                              }
+                            )
+                          ] })
+                        ] })
                       ] })
                     ]
                   }
@@ -11658,7 +12348,18 @@ var SectionOutlinePanel = ({
             )
           ] })
         ] }),
-        entries.length > 0 ? /* @__PURE__ */ jsx15("div", { className: "df-review-section-outline-list", children: entries.map(renderEntry) }) : /* @__PURE__ */ jsx15("div", { className: "df-review-section-outline-empty", children: isFiltering ? "No source matches" : "No sections found" })
+        entries.length > 0 ? /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "df-review-section-outline-list",
+            onPointerDown: (event) => {
+              if (event.target instanceof Element && !event.target.closest(".df-review-section-outline-entry-body")) {
+                onClearSelection();
+              }
+            },
+            children: entries.map(renderEntry)
+          }
+        ) : /* @__PURE__ */ jsx15("div", { className: "df-review-section-outline-empty", children: isFiltering ? "No source matches" : "No sections found" })
       ] })
     }
   );
@@ -11667,16 +12368,19 @@ var SectionOutlinePanel = ({
 // src/react-shell/review/section.outline.container.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
 var SectionOutlineContainer = () => {
-  const { isSourceInspectorEnabled } = useReviewShellConfig();
   const {
     clearSourceInspector,
     clearSourceOutlineHover,
+    clearSourceOutlineSelection,
     initReviewKit,
+    selectSourceOutlineForElement,
     showSourceOutlineForElement
   } = useReviewShellActions();
   const {
+    activeDomAdjustmentEntryId,
     canWriteDom,
     collapsedSectionOutlineIds,
+    domAdjustmentByEntryId,
     filteredSectionOutline,
     filteredSectionOutlineCount,
     isPanelVisible,
@@ -11684,20 +12388,25 @@ var SectionOutlineContainer = () => {
     openSectionData,
     openSectionSource,
     openSectionUsageSource,
-    scrollToSection,
     sectionOutline,
     sectionOutlineFilter,
     sectionOutlineMetaVisibility,
     sectionOutlineTotalCount,
+    selectedSectionOutlineId,
+    selectSectionOutlineEntry,
+    clearSectionOutlineSelection,
+    clearSectionDomAdjustment,
+    startSectionDomAdjustment,
     startSectionDomReview,
     toggleSectionOutlineEntry,
     updateSectionOutlineFilter,
     updateSectionOutlineMetaVisibility
   } = useReviewSectionOutline({
     onClearSourceInspector: clearSourceInspector,
-    onInitReviewKit: initReviewKit
+    onClearSourceSelection: clearSourceOutlineSelection,
+    onInitReviewKit: initReviewKit,
+    onSelectSourceElement: selectSourceOutlineForElement
   });
-  if (!isSourceInspectorEnabled) return null;
   return /* @__PURE__ */ jsx16(
     SectionOutlinePanel,
     {
@@ -11709,6 +12418,9 @@ var SectionOutlineContainer = () => {
       filter: sectionOutlineFilter,
       entries: filteredSectionOutline,
       collapsedIds: collapsedSectionOutlineIds,
+      selectedEntryId: selectedSectionOutlineId,
+      activeDomAdjustmentEntryId,
+      domAdjustmentByEntryId,
       canWriteDom,
       isFontMetaVisible: sectionOutlineMetaVisibility.font,
       isMediaMetaVisible: sectionOutlineMetaVisibility.media,
@@ -11716,7 +12428,10 @@ var SectionOutlineContainer = () => {
       onToggleMeta: updateSectionOutlineMetaVisibility,
       onFilterChange: updateSectionOutlineFilter,
       onToggleEntry: toggleSectionOutlineEntry,
-      onScrollToSection: scrollToSection,
+      onSelectEntry: selectSectionOutlineEntry,
+      onClearSelection: clearSectionOutlineSelection,
+      onClearDomAdjustment: clearSectionDomAdjustment,
+      onStartDomAdjustment: startSectionDomAdjustment,
       onOpenData: openSectionData,
       onOpenSource: openSectionSource,
       onOpenUsageSource: openSectionUsageSource,
@@ -11895,7 +12610,6 @@ var ReviewSideRail = ({
   isFigmaImageManagementEnabled,
   isFigmaImagesPanelVisible,
   isQaPanelVisible,
-  isSourceInspectorEnabled,
   isSourceTreePanelVisible,
   presenceSessionId,
   onOpenAbout,
@@ -11934,7 +12648,7 @@ var ReviewSideRail = ({
         children: /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ListChecks, {}) })
       }
     ),
-    isSourceInspectorEnabled && /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx20(
       "button",
       {
         "aria-controls": "df-review-section-outline",
@@ -12017,7 +12731,6 @@ var ReviewSideRailContainer = () => {
     presenceSessionId
   } = useReviewPresenceState();
   const { isEnabled: isFigmaImageManagementEnabled } = useReviewFigmaImagesState();
-  const { isSourceInspectorEnabled } = useReviewShellConfig();
   const isListVisible = useReviewShellStore((state) => state.isListVisible);
   const sidePanel = useReviewShellStore((state) => state.sidePanel);
   return /* @__PURE__ */ jsx21(
@@ -12027,8 +12740,7 @@ var ReviewSideRailContainer = () => {
       isFigmaImageManagementEnabled,
       isFigmaImagesPanelVisible: isFigmaImageManagementEnabled && isListVisible && sidePanel === "figma-images",
       isQaPanelVisible: isListVisible && sidePanel === "qa",
-      isSourceInspectorEnabled,
-      isSourceTreePanelVisible: isSourceInspectorEnabled && isListVisible && sidePanel === "source",
+      isSourceTreePanelVisible: isListVisible && sidePanel === "source",
       presenceSessionId,
       onOpenAbout: openAbout,
       onOpenInitialPrompt: openInitialPrompt,
@@ -12045,7 +12757,7 @@ import {
   useEffect as useEffect7,
   useRef as useRef6
 } from "react";
-import { jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var getTooltipElements = (root) => Array.from(root.querySelectorAll("[data-review-tooltip]"));
 var restoreNativeTooltipTitles = (root) => {
   getTooltipElements(root).forEach((element) => {
@@ -12110,6 +12822,7 @@ var ReviewShellFrame = ({
         slots.qaPanel,
         slots.figmaImagesPanel,
         slots.sourceTreePanel,
+        /* @__PURE__ */ jsx22("div", { className: "df-review-qa-draft-host" }),
         slots.targetFrame,
         slots.sourceInspector
       ]
@@ -12135,13 +12848,13 @@ var useReviewSettingsState = () => {
 };
 
 // src/react-shell/review/shell.frame.container.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var ReviewShellFrameContainer = ({
   slots
 }) => {
   const { areTooltipsEnabled, effectiveReviewTheme } = useReviewSettingsState();
   const isListVisible = useReviewShellStore((state) => state.isListVisible);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ReviewShellFrame,
     {
       areTooltipsEnabled,
@@ -12156,7 +12869,7 @@ var ReviewShellFrameContainer = ({
 import { useCallback as useCallback8 } from "react";
 
 // src/react-shell/review/modal.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var ReviewModal = ({
   ariaLabel,
   bodyClassName,
@@ -12176,7 +12889,7 @@ var ReviewModal = ({
       className: className ?? "df-review-prompt-modal",
       role: "dialog",
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             "aria-label": `Close ${ariaLabel}`,
@@ -12192,21 +12905,21 @@ var ReviewModal = ({
             children: [
               /* @__PURE__ */ jsxs17("div", { className: "df-review-prompt-header", children: [
                 /* @__PURE__ */ jsxs17("div", { children: [
-                  /* @__PURE__ */ jsx23("strong", { id: titleId, children: title }),
-                  description ? /* @__PURE__ */ jsx23("span", { children: description }) : null
+                  /* @__PURE__ */ jsx24("strong", { id: titleId, children: title }),
+                  description ? /* @__PURE__ */ jsx24("span", { children: description }) : null
                 ] }),
-                /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx24(
                   "button",
                   {
                     "aria-label": `Close ${ariaLabel}`,
                     className: "df-review-modal-close",
                     type: "button",
                     onClick: onClose,
-                    children: /* @__PURE__ */ jsx23(X, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx24(X, { "aria-hidden": "true" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx23("div", { className: bodyClassName ?? "df-review-prompt-body", children })
+              /* @__PURE__ */ jsx24("div", { className: bodyClassName ?? "df-review-prompt-body", children })
             ]
           }
         )
@@ -12216,7 +12929,7 @@ var ReviewModal = ({
 };
 
 // src/react-shell/prompt/modal.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var REVIEW_KIT_VERSION = "0.7.3";
 var SHORTCUT_SECTIONS = [
   {
@@ -12254,7 +12967,7 @@ var SHORTCUT_SECTIONS = [
   }
 ];
 var PromptModal = ({ onClose }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     ReviewModal,
     {
       ariaLabel: "Review help",
@@ -12263,11 +12976,11 @@ var PromptModal = ({ onClose }) => {
       dialogClassName: "df-review-about-dialog",
       title: "df-web-review-kit",
       onClose,
-      children: /* @__PURE__ */ jsx24("div", { className: "df-review-shortcut-groups", children: SHORTCUT_SECTIONS.map((section) => /* @__PURE__ */ jsxs18("section", { className: "df-review-shortcut-group", children: [
-        /* @__PURE__ */ jsx24("strong", { children: section.title }),
-        /* @__PURE__ */ jsx24("div", { className: "df-review-shortcut-list", children: section.items.map((item) => /* @__PURE__ */ jsxs18("div", { className: "df-review-shortcut-row", children: [
-          /* @__PURE__ */ jsx24("span", { className: "df-review-shortcut-keys", children: item.keys.map((key) => /* @__PURE__ */ jsx24("kbd", { children: key }, key)) }),
-          /* @__PURE__ */ jsx24("span", { children: item.label })
+      children: /* @__PURE__ */ jsx25("div", { className: "df-review-shortcut-groups", children: SHORTCUT_SECTIONS.map((section) => /* @__PURE__ */ jsxs18("section", { className: "df-review-shortcut-group", children: [
+        /* @__PURE__ */ jsx25("strong", { children: section.title }),
+        /* @__PURE__ */ jsx25("div", { className: "df-review-shortcut-list", children: section.items.map((item) => /* @__PURE__ */ jsxs18("div", { className: "df-review-shortcut-row", children: [
+          /* @__PURE__ */ jsx25("span", { className: "df-review-shortcut-keys", children: item.keys.map((key) => /* @__PURE__ */ jsx25("kbd", { children: key }, key)) }),
+          /* @__PURE__ */ jsx25("span", { children: item.label })
         ] }, item.label)) })
       ] }, section.title)) })
     }
@@ -12275,14 +12988,14 @@ var PromptModal = ({ onClose }) => {
 };
 
 // src/react-shell/prompt/initial.modal.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var InitialPromptModal = ({
   initialPromptText,
   copiedPromptKey,
   onClose,
   onCopyPrompt
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     ReviewModal,
     {
       ariaLabel: "Initial prompt",
@@ -12298,8 +13011,8 @@ var InitialPromptModal = ({
           children: [
             /* @__PURE__ */ jsxs19("div", { className: "df-review-prompt-block-header", children: [
               /* @__PURE__ */ jsxs19("div", { children: [
-                /* @__PURE__ */ jsx25("strong", { id: "df-review-initial-prompt-title", children: "QA handoff prompt" }),
-                /* @__PURE__ */ jsx25("span", { children: getPromptLengthLabel(initialPromptText) })
+                /* @__PURE__ */ jsx26("strong", { id: "df-review-initial-prompt-title", children: "QA handoff prompt" }),
+                /* @__PURE__ */ jsx26("span", { children: getPromptLengthLabel(initialPromptText) })
               ] }),
               /* @__PURE__ */ jsxs19(
                 "button",
@@ -12308,13 +13021,13 @@ var InitialPromptModal = ({
                   type: "button",
                   onClick: () => onCopyPrompt(initialPromptText, "initial"),
                   children: [
-                    /* @__PURE__ */ jsx25(Copy, { "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx26(Copy, { "aria-hidden": "true" }),
                     copiedPromptKey === "initial" ? "Copied" : "Copy"
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "textarea",
               {
                 readOnly: true,
@@ -12330,7 +13043,7 @@ var InitialPromptModal = ({
 };
 
 // src/react-shell/review/settings.modal.tsx
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var getReviewThemeIcon = (theme) => {
   if (theme === "light") return Sun;
   if (theme === "system") return Monitor;
@@ -12362,7 +13075,7 @@ var ReviewSettingsModal = ({
       className: "df-review-settings-modal",
       role: "dialog",
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           "button",
           {
             "aria-label": "Close settings",
@@ -12387,7 +13100,7 @@ var ReviewSettingsModal = ({
             children: [
               /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-header", children: [
                 /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-title", children: [
-                  /* @__PURE__ */ jsx26("strong", { children: "Settings" }),
+                  /* @__PURE__ */ jsx27("strong", { children: "Settings" }),
                   /* @__PURE__ */ jsxs20("span", { children: [
                     FIGMA_TOKEN_STORAGE_KEY,
                     " / ",
@@ -12399,12 +13112,12 @@ var ReviewSettingsModal = ({
                     REVIEW_TOOLTIP_STORAGE_KEY
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx26("div", { className: "df-review-settings-header-actions", children: /* @__PURE__ */ jsx26("button", { "aria-label": "Close settings", type: "button", onClick: onClose, children: "x" }) })
+                /* @__PURE__ */ jsx27("div", { className: "df-review-settings-header-actions", children: /* @__PURE__ */ jsx27("button", { "aria-label": "Close settings", type: "button", onClick: onClose, children: "x" }) })
               ] }),
               /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-body", children: [
                 /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-row", children: [
-                  /* @__PURE__ */ jsx26("span", { children: "Theme" }),
-                  /* @__PURE__ */ jsx26("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => {
+                  /* @__PURE__ */ jsx27("span", { children: "Theme" }),
+                  /* @__PURE__ */ jsx27("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => {
                     const ThemeIcon = getReviewThemeIcon(option.value);
                     return /* @__PURE__ */ jsxs20(
                       "button",
@@ -12419,8 +13132,8 @@ var ReviewSettingsModal = ({
                           onClearStatus();
                         },
                         children: [
-                          /* @__PURE__ */ jsx26(ThemeIcon, { "aria-hidden": "true" }),
-                          /* @__PURE__ */ jsx26("span", { children: option.label })
+                          /* @__PURE__ */ jsx27(ThemeIcon, { "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx27("span", { children: option.label })
                         ]
                       },
                       option.value
@@ -12428,9 +13141,9 @@ var ReviewSettingsModal = ({
                   }) })
                 ] }),
                 /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-row", children: [
-                  /* @__PURE__ */ jsx26("span", { children: "Tooltips" }),
+                  /* @__PURE__ */ jsx27("span", { children: "Tooltips" }),
                   /* @__PURE__ */ jsxs20("label", { className: "df-review-settings-toggle", children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "input",
                       {
                         "aria-label": "Show tooltips",
@@ -12442,13 +13155,13 @@ var ReviewSettingsModal = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx26("span", { children: "Show" })
+                    /* @__PURE__ */ jsx27("span", { children: "Show" })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-field", children: [
                   /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-label-row", children: [
-                    /* @__PURE__ */ jsx26("label", { htmlFor: "df-review-figma-token", children: "Figma token" }),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27("label", { htmlFor: "df-review-figma-token", children: "Figma token" }),
+                    /* @__PURE__ */ jsx27(
                       "button",
                       {
                         "aria-controls": FIGMA_TOKEN_GUIDE_ID,
@@ -12457,12 +13170,12 @@ var ReviewSettingsModal = ({
                         className: `df-review-settings-help-button${isFigmaTokenGuideOpen ? " is-active" : ""}`,
                         type: "button",
                         onClick: onToggleFigmaTokenGuide,
-                        children: /* @__PURE__ */ jsx26(CircleQuestionMark, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsx27(CircleQuestionMark, { "aria-hidden": "true" })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-token-input", children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "input",
                       {
                         id: "df-review-figma-token",
@@ -12485,34 +13198,34 @@ var ReviewSettingsModal = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "button",
                       {
                         "aria-label": isFigmaTokenVisible ? "Hide Figma token" : "Show Figma token",
                         className: "df-review-settings-token-toggle",
                         type: "button",
                         onClick: onToggleFigmaTokenVisible,
-                        children: isFigmaTokenVisible ? /* @__PURE__ */ jsx26(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx26(Eye, { "aria-hidden": "true" })
+                        children: isFigmaTokenVisible ? /* @__PURE__ */ jsx27(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(Eye, { "aria-hidden": "true" })
                       }
                     )
                   ] }),
-                  isFigmaTokenGuideOpen && /* @__PURE__ */ jsx26(
+                  isFigmaTokenGuideOpen && /* @__PURE__ */ jsx27(
                     "div",
                     {
                       className: "df-review-settings-guide",
                       id: FIGMA_TOKEN_GUIDE_ID,
                       children: /* @__PURE__ */ jsxs20("ol", { children: [
-                        /* @__PURE__ */ jsx26("li", { children: "Figma file browser\uC5D0\uC11C account menu\uB97C \uC5F4\uACE0 Settings\uB85C \uC774\uB3D9" }),
-                        /* @__PURE__ */ jsx26("li", { children: "Security \uD0ED\uC758 Personal access tokens\uB85C \uC774\uB3D9" }),
-                        /* @__PURE__ */ jsx26("li", { children: "Generate new token\uC5D0\uC11C \uC774\uB984\uACFC scope\uB97C \uC815\uD55C \uB4A4 \uC0DD\uC131" }),
-                        /* @__PURE__ */ jsx26("li", { children: "\uC0DD\uC131\uB41C token\uC744 \uBCF5\uC0AC\uD574\uC11C \uC5EC\uAE30\uC5D0 \uBD99\uC5EC\uB123\uAE30" })
+                        /* @__PURE__ */ jsx27("li", { children: "Figma file browser\uC5D0\uC11C account menu\uB97C \uC5F4\uACE0 Settings\uB85C \uC774\uB3D9" }),
+                        /* @__PURE__ */ jsx27("li", { children: "Security \uD0ED\uC758 Personal access tokens\uB85C \uC774\uB3D9" }),
+                        /* @__PURE__ */ jsx27("li", { children: "Generate new token\uC5D0\uC11C \uC774\uB984\uACFC scope\uB97C \uC815\uD55C \uB4A4 \uC0DD\uC131" }),
+                        /* @__PURE__ */ jsx27("li", { children: "\uC0DD\uC131\uB41C token\uC744 \uBCF5\uC0AC\uD574\uC11C \uC5EC\uAE30\uC5D0 \uBD99\uC5EC\uB123\uAE30" })
                       ] })
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs20("label", { className: "df-review-settings-field", children: [
-                  /* @__PURE__ */ jsx26("span", { children: "User ID" }),
-                  /* @__PURE__ */ jsx26("div", { className: "df-review-settings-text-input", children: /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27("span", { children: "User ID" }),
+                  /* @__PURE__ */ jsx27("div", { className: "df-review-settings-text-input", children: /* @__PURE__ */ jsx27(
                     "input",
                     {
                       "aria-label": "Review user ID",
@@ -12527,9 +13240,9 @@ var ReviewSettingsModal = ({
                     }
                   ) })
                 ] }),
-                figmaSettingsStatus && /* @__PURE__ */ jsx26("p", { className: "df-review-settings-status", children: figmaSettingsStatus }),
+                figmaSettingsStatus && /* @__PURE__ */ jsx27("p", { className: "df-review-settings-status", children: figmaSettingsStatus }),
                 /* @__PURE__ */ jsxs20("div", { className: "df-review-settings-actions", children: [
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     "button",
                     {
                       type: "button",
@@ -12542,9 +13255,9 @@ var ReviewSettingsModal = ({
                       children: "Clear"
                     }
                   ),
-                  /* @__PURE__ */ jsx26("span", {}),
-                  /* @__PURE__ */ jsx26("button", { type: "button", onClick: onClose, children: "Cancel" }),
-                  /* @__PURE__ */ jsx26("button", { type: "submit", children: "Save" })
+                  /* @__PURE__ */ jsx27("span", {}),
+                  /* @__PURE__ */ jsx27("button", { type: "button", onClick: onClose, children: "Cancel" }),
+                  /* @__PURE__ */ jsx27("button", { type: "submit", children: "Save" })
                 ] })
               ] })
             ]
@@ -12810,7 +13523,7 @@ function sitemapNodeMatchesSearch(node, searchQuery, getPageTarget) {
 }
 
 // src/react-shell/sitemap/modal.tsx
-import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var getNextSortDirection = (current, key) => {
   if (current.key !== key) return key === "page" ? "asc" : "desc";
   return current.direction === "desc" ? "asc" : "desc";
@@ -12909,7 +13622,7 @@ var SitemapModal = ({
       className: "df-review-sitemap-modal",
       role: "dialog",
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": "Close sitemap",
@@ -12921,7 +13634,7 @@ var SitemapModal = ({
         /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-dialog", children: [
           /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-header", children: [
             /* @__PURE__ */ jsxs21("div", { children: [
-              /* @__PURE__ */ jsx27("strong", { children: "Sitemap" }),
+              /* @__PURE__ */ jsx28("strong", { children: "Sitemap" }),
               /* @__PURE__ */ jsxs21("span", { children: [
                 pages.length,
                 " pages \xB7 ",
@@ -12934,12 +13647,12 @@ var SitemapModal = ({
                 " hold"
               ] })
             ] }),
-            /* @__PURE__ */ jsx27("button", { "aria-label": "Close sitemap", type: "button", onClick: onClose, children: "x" })
+            /* @__PURE__ */ jsx28("button", { "aria-label": "Close sitemap", type: "button", onClick: onClose, children: "x" })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-controls", children: [
             /* @__PURE__ */ jsxs21("label", { className: "df-review-sitemap-search", children: [
-              /* @__PURE__ */ jsx27(Search, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(Search, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx28(
                 "input",
                 {
                   "aria-label": "Search sitemap",
@@ -12951,20 +13664,20 @@ var SitemapModal = ({
                 }
               )
             ] }),
-            trimmedSearchQuery && /* @__PURE__ */ jsx27(
+            trimmedSearchQuery && /* @__PURE__ */ jsx28(
               "button",
               {
                 "aria-label": "Clear sitemap search",
                 className: "df-review-sitemap-search-clear",
                 type: "button",
                 onClick: () => setSearchQuery(""),
-                children: /* @__PURE__ */ jsx27(X, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx28(X, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-search-count", children: trimmedSearchQuery ? `${matchingPageCount} matches` : `${pages.length} pages` })
+            /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-search-count", children: trimmedSearchQuery ? `${matchingPageCount} matches` : `${pages.length} pages` })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-list", style: gridStyle, children: [
-            /* @__PURE__ */ jsx27("div", { className: "df-review-sitemap-table-head", role: "row", children: sortHeaders.map((header) => /* @__PURE__ */ jsxs21(
+            /* @__PURE__ */ jsx28("div", { className: "df-review-sitemap-table-head", role: "row", children: sortHeaders.map((header) => /* @__PURE__ */ jsxs21(
               "button",
               {
                 "aria-label": `Sort sitemap by ${header.title ?? header.label}`,
@@ -12977,7 +13690,7 @@ var SitemapModal = ({
                 type: "button",
                 onClick: () => setSortKey(header.key),
                 children: [
-                  /* @__PURE__ */ jsx27(
+                  /* @__PURE__ */ jsx28(
                     "span",
                     {
                       "aria-hidden": "true",
@@ -12985,7 +13698,7 @@ var SitemapModal = ({
                       children: getSortIndicator(sort, header.key)
                     }
                   ),
-                  /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-sort-label", children: header.label })
+                  /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-sort-label", children: header.label })
                 ]
               },
               header.key
@@ -13000,7 +13713,7 @@ var SitemapModal = ({
                 row.isActive ? "is-active" : "",
                 row.isPage ? "is-clickable" : ""
               ].filter(Boolean).join(" ");
-              const rowContent = /* @__PURE__ */ jsx27(
+              const rowContent = /* @__PURE__ */ jsx28(
                 SitemapRowContent,
                 {
                   depth: row.depth,
@@ -13013,7 +13726,7 @@ var SitemapModal = ({
                   onToggleFolder: () => toggleFolder(row.href)
                 }
               );
-              return /* @__PURE__ */ jsx27(
+              return /* @__PURE__ */ jsx28(
                 "div",
                 {
                   "aria-label": row.isPage ? `${row.href} / ${row.qaCount.status.todo} todo / ${row.qaCount.status.review} review / ${row.qaCount.status.hold} hold / ${row.users.length} online` : `${row.href} group / ${row.qaCount.status.todo} todo / ${row.qaCount.status.review} review / ${row.qaCount.status.hold} hold / ${row.users.length} online`,
@@ -13032,15 +13745,15 @@ var SitemapModal = ({
                 row.href
               );
             }),
-            sitemapRows.length === 0 && /* @__PURE__ */ jsx27("div", { className: "df-review-sitemap-empty", role: "status", children: "No matching pages" }),
-            /* @__PURE__ */ jsx27(
+            sitemapRows.length === 0 && /* @__PURE__ */ jsx28("div", { className: "df-review-sitemap-empty", role: "status", children: "No matching pages" }),
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 "aria-label": `All QA / ${allQaCount.status.todo} todo / ${allQaCount.status.review} review / ${allQaCount.status.hold} hold`,
                 className: `df-review-sitemap-row is-summary${isAllQaVisible ? " is-active" : ""}`,
                 type: "button",
                 onClick: onSelectAllQa,
-                children: /* @__PURE__ */ jsx27(
+                children: /* @__PURE__ */ jsx28(
                   SitemapRowContent,
                   {
                     depth: 0,
@@ -13076,7 +13789,7 @@ var SitemapRowContent = ({
       className: "df-review-sitemap-path",
       style: { "--df-review-sitemap-depth": depth },
       children: [
-        hasChildren ? /* @__PURE__ */ jsx27(
+        hasChildren ? /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-expanded": isExpanded,
@@ -13087,17 +13800,17 @@ var SitemapRowContent = ({
               event.stopPropagation();
               onToggleFolder?.();
             },
-            children: isExpanded ? /* @__PURE__ */ jsx27(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(ChevronRight, { "aria-hidden": "true" })
+            children: isExpanded ? /* @__PURE__ */ jsx28(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx28(ChevronRight, { "aria-hidden": "true" })
           }
-        ) : /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-tree-spacer", "aria-hidden": "true" }),
-        isPage ? /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-page-label", children: label }) : /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-label", children: label })
+        ) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-tree-spacer", "aria-hidden": "true" }),
+        isPage ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-page-label", children: label }) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-label", children: label })
       ]
     }
   ),
-  /* @__PURE__ */ jsx27("span", { className: getCountCellClassName("todo", qaCount.status.todo), children: /* @__PURE__ */ jsx27("strong", { children: qaCount.status.todo }) }),
-  /* @__PURE__ */ jsx27("span", { className: getCountCellClassName("review", qaCount.status.review), children: qaCount.status.review }),
-  /* @__PURE__ */ jsx27("span", { className: getCountCellClassName("hold", qaCount.status.hold), children: qaCount.status.hold }),
-  /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-cell is-online", children: users.length > 0 ? /* @__PURE__ */ jsx27("span", { className: "df-review-sitemap-users", children: users.map((user) => /* @__PURE__ */ jsx27(
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("todo", qaCount.status.todo), children: /* @__PURE__ */ jsx28("strong", { children: qaCount.status.todo }) }),
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("review", qaCount.status.review), children: qaCount.status.review }),
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("hold", qaCount.status.hold), children: qaCount.status.hold }),
+  /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-cell is-online", children: users.length > 0 ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-users", children: users.map((user) => /* @__PURE__ */ jsx28(
     "span",
     {
       className: "df-review-sitemap-user",
@@ -13265,7 +13978,7 @@ var useReviewShellData = () => {
 };
 
 // src/react-shell/review/shell.modals.container.tsx
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var ReviewShellModalsContainer = () => {
   const { initialPrompt, pages } = useReviewShellConfig();
   const {
@@ -13333,7 +14046,7 @@ var ReviewShellModalsContainer = () => {
     [setCopiedPromptKey, showToast]
   );
   return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    isSitemapOpen && /* @__PURE__ */ jsx28(
+    isSitemapOpen && /* @__PURE__ */ jsx29(
       SitemapModal,
       {
         activeRoute,
@@ -13348,7 +14061,7 @@ var ReviewShellModalsContainer = () => {
         onSelectPage: selectPage
       }
     ),
-    isFigmaSettingsOpen && /* @__PURE__ */ jsx28(
+    isFigmaSettingsOpen && /* @__PURE__ */ jsx29(
       ReviewSettingsModal,
       {
         areTooltipsEnabledDraft,
@@ -13369,8 +14082,8 @@ var ReviewShellModalsContainer = () => {
         onToggleFigmaTokenVisible: () => setIsFigmaTokenVisible((current) => !current)
       }
     ),
-    isInitialPromptOpen && /* @__PURE__ */ jsx28(PromptModal, { onClose: () => setIsInitialPromptOpen(false) }),
-    isInitialPromptScriptOpen && /* @__PURE__ */ jsx28(
+    isInitialPromptOpen && /* @__PURE__ */ jsx29(PromptModal, { onClose: () => setIsInitialPromptOpen(false) }),
+    isInitialPromptScriptOpen && /* @__PURE__ */ jsx29(
       InitialPromptModal,
       {
         copiedPromptKey,
@@ -13434,7 +14147,7 @@ var useReviewSourceInspectorState = () => {
 };
 
 // src/react-shell/review/shell.providers.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ReviewShellProviders = ({
   actions,
   children,
@@ -13444,100 +14157,52 @@ var ReviewShellProviders = ({
   ruler,
   settings,
   sourceInspector
-}) => /* @__PURE__ */ jsx29(ReviewShellActionsProvider, { value: actions, children: /* @__PURE__ */ jsx29(ReviewRulerProvider, { value: ruler, children: /* @__PURE__ */ jsx29(ReviewFigmaImagesProvider, { value: figmaImages, children: /* @__PURE__ */ jsx29(ReviewSourceInspectorProvider, { value: sourceInspector, children: /* @__PURE__ */ jsx29(ReviewSettingsProvider, { value: settings, children: /* @__PURE__ */ jsx29(ReviewPresenceProvider, { value: presence, children: /* @__PURE__ */ jsx29(ReviewFigmaOverlayProvider, { value: figmaOverlay, children }) }) }) }) }) }) });
+}) => /* @__PURE__ */ jsx30(ReviewShellActionsProvider, { value: actions, children: /* @__PURE__ */ jsx30(ReviewRulerProvider, { value: ruler, children: /* @__PURE__ */ jsx30(ReviewFigmaImagesProvider, { value: figmaImages, children: /* @__PURE__ */ jsx30(ReviewSourceInspectorProvider, { value: sourceInspector, children: /* @__PURE__ */ jsx30(ReviewSettingsProvider, { value: settings, children: /* @__PURE__ */ jsx30(ReviewPresenceProvider, { value: presence, children: /* @__PURE__ */ jsx30(ReviewFigmaOverlayProvider, { value: figmaOverlay, children }) }) }) }) }) }) });
 
 // src/react-shell/review/source.inspector.overlay.tsx
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var SourceInspectorOverlay = ({
-  state,
-  interactionRef,
-  onClear,
-  onOpenCandidate
+  componentSelectionState,
+  state
 }) => {
-  if (!state) return null;
+  const hoverState = state?.targetElement === componentSelectionState?.targetElement ? null : state;
   return /* @__PURE__ */ jsxs23(Fragment4, { children: [
-    /* @__PURE__ */ jsx30(
+    componentSelectionState ? /* @__PURE__ */ jsx31(
       "div",
       {
-        className: `df-review-source-outline${state.isPinned ? " is-pinned" : ""}`,
+        className: "df-review-source-outline is-component-selection",
         style: {
-          height: `${state.rect.height}px`,
-          left: `${state.rect.left}px`,
-          top: `${state.rect.top}px`,
-          width: `${state.rect.width}px`
+          height: `${componentSelectionState.rect.height}px`,
+          left: `${componentSelectionState.rect.left}px`,
+          top: `${componentSelectionState.rect.top}px`,
+          width: `${componentSelectionState.rect.width}px`
         }
       }
-    ),
-    state.candidates.length > 0 && /* @__PURE__ */ jsxs23(
+    ) : null,
+    hoverState ? /* @__PURE__ */ jsx31(
       "div",
       {
-        className: `df-review-source-popover${state.isPinned ? " is-pinned" : ""}`,
+        className: "df-review-source-outline is-hover",
         style: {
-          left: state.panelRight === null ? `${state.panelLeft}px` : void 0,
-          maxWidth: `${state.panelMaxWidth}px`,
-          right: state.panelRight === null ? void 0 : `${state.panelRight}px`,
-          top: `${state.panelTop}px`
-        },
-        onPointerDown: () => {
-          interactionRef.current = true;
-        },
-        onPointerEnter: () => {
-          interactionRef.current = true;
-        },
-        onPointerLeave: () => {
-          interactionRef.current = false;
-        },
-        onClick: (event) => event.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx30("div", { className: "df-review-source-popover-close", children: /* @__PURE__ */ jsx30(
-            "button",
-            {
-              "aria-label": "Close source candidates",
-              type: "button",
-              onClick: onClear,
-              children: "\xD7"
-            }
-          ) }),
-          /* @__PURE__ */ jsx30("div", { className: "df-review-source-candidate-list", children: state.candidates.map((candidate) => /* @__PURE__ */ jsx30(
-            "button",
-            {
-              className: `df-review-source-candidate is-${candidate.kind}`,
-              type: "button",
-              onClick: (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                onOpenCandidate(candidate);
-              },
-              children: /* @__PURE__ */ jsxs23("span", { className: "df-review-source-candidate-main", children: [
-                /* @__PURE__ */ jsx30("strong", { children: candidate.label }),
-                /* @__PURE__ */ jsx30("span", { children: candidate.filePath }),
-                /* @__PURE__ */ jsx30("small", { children: [candidate.positionLabel || "-:-", candidate.detail].filter(Boolean).join(" \xB7 ") })
-              ] })
-            },
-            candidate.id
-          )) })
-        ]
+          height: `${hoverState.rect.height}px`,
+          left: `${hoverState.rect.left}px`,
+          top: `${hoverState.rect.top}px`,
+          width: `${hoverState.rect.width}px`
+        }
       }
-    )
+    ) : null
   ] });
 };
 
 // src/react-shell/review/source.inspector.overlay.container.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SourceInspectorOverlayContainer = () => {
-  const {
-    clearSourceInspector,
-    openSourceCandidate,
-    sourceInspectorInteractionRef,
-    sourceInspectorState
-  } = useReviewSourceInspectorState();
-  return /* @__PURE__ */ jsx31(
+  const { componentSelectionState, sourceInspectorState } = useReviewSourceInspectorState();
+  return /* @__PURE__ */ jsx32(
     SourceInspectorOverlay,
     {
-      interactionRef: sourceInspectorInteractionRef,
-      state: sourceInspectorState,
-      onClear: clearSourceInspector,
-      onOpenCandidate: openSourceCandidate
+      componentSelectionState,
+      state: sourceInspectorState
     }
   );
 };
@@ -13548,7 +14213,7 @@ import {
 } from "react";
 
 // src/react-shell/review/mode.toolbar.tsx
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var ReviewModeToolbar = ({
   canWriteArea,
   canWriteDom,
@@ -13557,7 +14222,7 @@ var ReviewModeToolbar = ({
 }) => {
   if (!canWriteDom && !canWriteArea) return null;
   return /* @__PURE__ */ jsxs24("div", { className: "df-review-mode", "aria-label": "Add QA", children: [
-    canWriteDom && /* @__PURE__ */ jsx32(
+    canWriteDom && /* @__PURE__ */ jsx33(
       "button",
       {
         "aria-label": "Element",
@@ -13565,11 +14230,11 @@ var ReviewModeToolbar = ({
         "data-review-tooltip": "Element QA",
         type: "button",
         onClick: () => onSetReviewMode("element"),
-        children: /* @__PURE__ */ jsx32(SquareMousePointer, { "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx33(SquareMousePointer, { "aria-hidden": "true" })
       }
     ),
-    canWriteDom && canWriteArea && /* @__PURE__ */ jsx32("span", { className: "df-review-mode-divider", "aria-hidden": "true", children: "|" }),
-    canWriteArea && /* @__PURE__ */ jsx32(
+    canWriteDom && canWriteArea && /* @__PURE__ */ jsx33("span", { className: "df-review-mode-divider", "aria-hidden": "true", children: "|" }),
+    canWriteArea && /* @__PURE__ */ jsx33(
       "button",
       {
         "aria-label": "Area",
@@ -13577,14 +14242,14 @@ var ReviewModeToolbar = ({
         "data-review-tooltip": "Area QA",
         type: "button",
         onClick: () => onSetReviewMode("area"),
-        children: /* @__PURE__ */ jsx32(Scan, { "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx33(Scan, { "aria-hidden": "true" })
       }
     )
   ] });
 };
 
 // src/react-shell/ruler/gutters.tsx
-import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var RulerGutters = () => {
   const size = useReviewShellStore((state) => state.size);
   const {
@@ -13594,7 +14259,7 @@ var RulerGutters = () => {
     rulerUnit
   } = useReviewRulerState();
   return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsx33("div", { className: "df-review-ruler-corner", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx34("div", { className: "df-review-ruler-corner", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs25(
       "div",
       {
@@ -13604,14 +14269,14 @@ var RulerGutters = () => {
         },
         children: [
           /* @__PURE__ */ jsxs25("div", { className: "df-review-ruler-frame-label", children: [
-            /* @__PURE__ */ jsx33("strong", { children: size.label }),
+            /* @__PURE__ */ jsx34("strong", { children: size.label }),
             /* @__PURE__ */ jsxs25("span", { children: [
               size.designWidth,
               size.designHeight ? `x${size.designHeight}` : "",
               rulerUnit
             ] })
           ] }),
-          rulerHover && /* @__PURE__ */ jsx33(
+          rulerHover && /* @__PURE__ */ jsx34(
             "div",
             {
               className: "df-review-ruler-coord is-x",
@@ -13622,14 +14287,14 @@ var RulerGutters = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         className: "df-review-ruler-gutter is-y",
         style: {
           "--df-review-ruler-step-y": `${rulerScaleY * 20}px`
         },
-        children: rulerHover && /* @__PURE__ */ jsx33(
+        children: rulerHover && /* @__PURE__ */ jsx34(
           "div",
           {
             className: "df-review-ruler-coord is-y",
@@ -13643,7 +14308,7 @@ var RulerGutters = () => {
 };
 
 // src/react-shell/ruler/overlay.tsx
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 var RulerOverlay = () => {
   const { iframeRef } = useReviewShellRefs();
   const size = useReviewShellStore((state) => state.size);
@@ -13669,7 +14334,7 @@ var RulerOverlay = () => {
       },
       children: [
         rulerHover && /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "div",
             {
               className: "df-review-ruler-guide is-x",
@@ -13677,7 +14342,7 @@ var RulerOverlay = () => {
               style: { top: `${rulerHover.y}px` }
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "div",
             {
               className: "df-review-ruler-guide is-y",
@@ -13687,7 +14352,7 @@ var RulerOverlay = () => {
           )
         ] }),
         rulerMeasure && (rulerMeasure.width > 0 || rulerMeasure.height > 0) && /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "div",
             {
               className: "df-review-ruler-selection",
@@ -13700,7 +14365,7 @@ var RulerOverlay = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "div",
             {
               className: "df-review-ruler-label",
@@ -14162,7 +14827,7 @@ import {
   useRef as useRef8,
   useState as useState9
 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var OUTSIDE_MARKER_HEIGHT = 22;
 var OUTSIDE_MARKER_CONNECTOR_TOP = 10;
 var OUTSIDE_MARKER_GAP = 6;
@@ -14340,7 +15005,7 @@ var ReviewOutsideMarkers = () => {
     size
   ]);
   if (markers.length === 0) return null;
-  return /* @__PURE__ */ jsx35("div", { className: "df-review-outside-marker-layer", "aria-label": "QA markers", children: markers.map((marker) => {
+  return /* @__PURE__ */ jsx36("div", { className: "df-review-outside-marker-layer", "aria-label": "QA markers", children: markers.map((marker) => {
     const isActive = marker.item.id === selectedItemId;
     const style = {
       top: `${marker.top}px`,
@@ -14349,7 +15014,7 @@ var ReviewOutsideMarkers = () => {
       "--df-review-outside-marker-connector-stem-height": `${marker.connectorStemHeight}px`,
       "--df-review-outside-marker-z-index": isActive ? 2 : 1
     };
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       "button",
       {
         "aria-label": `Focus ${marker.label}`,
@@ -14371,7 +15036,7 @@ var ReviewOutsideMarkers = () => {
 };
 
 // src/react-shell/target/frame.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var ReviewTargetFrame = () => {
   const {
     figmaImageOverlays,
@@ -14382,9 +15047,17 @@ var ReviewTargetFrame = () => {
   const { isRulerAvailable, isRulerVisible } = useReviewRulerState();
   const { canWriteArea, canWriteDom } = useReviewShellAdapterState();
   const mode = useReviewShellStore((state) => state.mode);
+  const frameNavigationVersion = useReviewShellStore(
+    (state) => state.frameNavigationVersion
+  );
+  const frameTarget = useReviewShellStore((state) => state.frameTarget);
   const size = useReviewShellStore((state) => state.size);
   const target = useReviewShellStore((state) => state.target);
   const targetSrc = useMemo9(() => buildTargetSrc(target), [target]);
+  const frameTargetSrc = useMemo9(
+    () => buildTargetSrc(frameTarget),
+    [frameTarget]
+  );
   const showRuler = isRulerVisible && isRulerAvailable;
   const syncTargetFigmaImageOverlays = useTargetFigmaImageOverlays({
     figmaImageOverlays,
@@ -14398,14 +15071,14 @@ var ReviewTargetFrame = () => {
     syncTargetFigmaImageOverlays();
     window.requestAnimationFrame(syncTargetFigmaImageOverlays);
   };
-  return /* @__PURE__ */ jsx36("main", { className: "df-review-stage", children: /* @__PURE__ */ jsxs27("div", { className: "df-review-frame", children: [
-    /* @__PURE__ */ jsx36("div", { className: "df-review-frame-scroll", ref: frameScrollRef, children: /* @__PURE__ */ jsx36("div", { className: "df-review-frame-canvas", children: /* @__PURE__ */ jsx36("div", { className: "df-review-target-stack", children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx37("main", { className: "df-review-stage", children: /* @__PURE__ */ jsxs27("div", { className: "df-review-frame", children: [
+    /* @__PURE__ */ jsx37("div", { className: "df-review-frame-scroll", ref: frameScrollRef, children: /* @__PURE__ */ jsx37("div", { className: "df-review-frame-canvas", children: /* @__PURE__ */ jsx37("div", { className: "df-review-target-stack", children: /* @__PURE__ */ jsxs27(
       "div",
       {
         className: `df-review-device-frame${showRuler ? " is-ruler" : ""}`,
         children: [
-          showRuler && /* @__PURE__ */ jsx36(RulerGutters, {}),
-          /* @__PURE__ */ jsx36(ReviewOutsideMarkers, {}),
+          showRuler && /* @__PURE__ */ jsx37(RulerGutters, {}),
+          /* @__PURE__ */ jsx37(ReviewOutsideMarkers, {}),
           /* @__PURE__ */ jsxs27(
             "div",
             {
@@ -14417,26 +15090,26 @@ var ReviewTargetFrame = () => {
                 minHeight: `${size.height}px`
               },
               children: [
-                /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx37(
                   "iframe",
                   {
                     ref: iframeRef,
                     width: size.width,
                     height: size.height,
-                    src: targetSrc,
+                    src: frameTargetSrc,
                     title: "Review target",
                     onLoad: handleLoadTarget
                   },
-                  targetSrc
+                  `${frameTargetSrc}:${frameNavigationVersion}`
                 ),
-                showRuler && /* @__PURE__ */ jsx36(RulerOverlay, {})
+                showRuler && /* @__PURE__ */ jsx37(RulerOverlay, {})
               ]
             }
           )
         ]
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx36("div", { className: "df-review-frame-actions", children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: "df-review-frame-actions", children: /* @__PURE__ */ jsx37(
       ReviewModeToolbar,
       {
         canWriteArea,
@@ -14452,18 +15125,18 @@ var ReviewTargetFrame = () => {
 import { useState as useState10 } from "react";
 
 // src/react-shell/topbar.tsx
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var ReviewScopeIcon2 = ({ scope }) => {
-  if (scope === "mobile") return /* @__PURE__ */ jsx37(Smartphone, { "aria-hidden": "true" });
-  if (scope === "tablet") return /* @__PURE__ */ jsx37(RectangleHorizontal, { "aria-hidden": "true" });
-  if (scope === "wide") return /* @__PURE__ */ jsx37(Maximize2, { "aria-hidden": "true" });
-  if (scope === "dom") return /* @__PURE__ */ jsx37(SquareMousePointer, { "aria-hidden": "true" });
-  return /* @__PURE__ */ jsx37(Monitor, { "aria-hidden": "true" });
+  if (scope === "mobile") return /* @__PURE__ */ jsx38(Smartphone, { "aria-hidden": "true" });
+  if (scope === "tablet") return /* @__PURE__ */ jsx38(RectangleHorizontal, { "aria-hidden": "true" });
+  if (scope === "wide") return /* @__PURE__ */ jsx38(Maximize2, { "aria-hidden": "true" });
+  if (scope === "dom") return /* @__PURE__ */ jsx38(SquareMousePointer, { "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx38(Monitor, { "aria-hidden": "true" });
 };
 var ViewportPresetIcon = ({
   preset
 }) => {
-  return /* @__PURE__ */ jsx37(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
+  return /* @__PURE__ */ jsx38(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
 };
 var getPresetSelectValue = (preset) => `${preset.label}:${preset.width}x${preset.height}`;
 function getTargetOpenHref(targetSrc) {
@@ -14510,7 +15183,7 @@ var ReviewTopbar = ({
           onApplyTarget();
         },
         children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "button",
             {
               "aria-label": "Open sitemap",
@@ -14519,10 +15192,10 @@ var ReviewTopbar = ({
               "data-review-tooltip-placement": "bottom",
               type: "button",
               onClick: onOpenSitemap,
-              children: /* @__PURE__ */ jsx37(Map2, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx38(Map2, { "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "input",
             {
               "aria-label": "Path",
@@ -14531,7 +15204,7 @@ var ReviewTopbar = ({
             }
           ),
           /* @__PURE__ */ jsxs28("div", { className: "df-review-address-actions", children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               "button",
               {
                 "aria-label": "Refresh target",
@@ -14540,10 +15213,10 @@ var ReviewTopbar = ({
                 "data-review-tooltip-placement": "bottom",
                 title: "Refresh target",
                 type: "submit",
-                children: /* @__PURE__ */ jsx37(RefreshCw, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx38(RefreshCw, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               "button",
               {
                 "aria-label": copyLabel,
@@ -14553,10 +15226,10 @@ var ReviewTopbar = ({
                 title: copyLabel,
                 type: "button",
                 onClick: onCopyCurrentUrl,
-                children: /* @__PURE__ */ jsx37(Copy, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx38(Copy, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               "a",
               {
                 "aria-label": "Open target page",
@@ -14567,7 +15240,7 @@ var ReviewTopbar = ({
                 rel: "noreferrer",
                 target: "_blank",
                 title: "Open target page",
-                children: /* @__PURE__ */ jsx37(ExternalLink, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx38(ExternalLink, { "aria-hidden": "true" })
               }
             )
           ] })
@@ -14576,21 +15249,21 @@ var ReviewTopbar = ({
     ),
     /* @__PURE__ */ jsxs28("div", { className: "df-review-tools", children: [
       /* @__PURE__ */ jsxs28("div", { className: "df-review-tool-controls", children: [
-        /* @__PURE__ */ jsx37("div", { className: "df-review-presets", "aria-label": "Viewport presets", children: viewportPresets.map((preset) => /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsx38("div", { className: "df-review-presets", "aria-label": "Viewport presets", children: viewportPresets.map((preset) => /* @__PURE__ */ jsxs28(
           "button",
           {
             className: preset.label === size.label ? "is-active" : "",
             type: "button",
             onClick: () => onSizeChange(preset),
             children: [
-              /* @__PURE__ */ jsx37(ViewportPresetIcon, { preset }),
-              /* @__PURE__ */ jsx37("span", { className: "df-review-preset-copy", children: /* @__PURE__ */ jsx37("strong", { children: preset.label }) }),
-              /* @__PURE__ */ jsx37("span", { className: "df-review-preset-count", children: presetScopeCounts.get(getViewportPresetKind(preset)) ?? 0 })
+              /* @__PURE__ */ jsx38(ViewportPresetIcon, { preset }),
+              /* @__PURE__ */ jsx38("span", { className: "df-review-preset-copy", children: /* @__PURE__ */ jsx38("strong", { children: preset.label }) }),
+              /* @__PURE__ */ jsx38("span", { className: "df-review-preset-count", children: presetScopeCounts.get(getViewportPresetKind(preset)) ?? 0 })
             ]
           },
           preset.label
         )) }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "select",
           {
             "aria-label": "Viewport preset",
@@ -14600,7 +15273,7 @@ var ReviewTopbar = ({
             children: viewportPresets.map((preset) => {
               const scope = getViewportPresetKind(preset);
               const count = presetScopeCounts.get(scope) ?? 0;
-              return /* @__PURE__ */ jsx37(
+              return /* @__PURE__ */ jsx38(
                 "option",
                 {
                   value: getPresetSelectValue(preset),
@@ -14611,7 +15284,7 @@ var ReviewTopbar = ({
             })
           }
         ),
-        /* @__PURE__ */ jsx37("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
+        /* @__PURE__ */ jsx38("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
         /* @__PURE__ */ jsxs28("span", { className: "df-review-active-size", children: [
           size.width,
           "x",
@@ -14619,7 +15292,7 @@ var ReviewTopbar = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxs28("div", { className: "df-review-overlays", "aria-label": "Target overlays", children: [
-        isRulerAvailable && /* @__PURE__ */ jsx37(
+        isRulerAvailable && /* @__PURE__ */ jsx38(
           "button",
           {
             "aria-label": "Toggle ruler",
@@ -14628,10 +15301,10 @@ var ReviewTopbar = ({
             "data-review-tooltip-placement": "bottom",
             type: "button",
             onClick: onToggleRuler,
-            children: /* @__PURE__ */ jsx37(Ruler, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx38(Ruler, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "button",
           {
             "aria-label": "Toggle grid overlay",
@@ -14640,10 +15313,10 @@ var ReviewTopbar = ({
             "data-review-tooltip-placement": "bottom",
             type: "button",
             onClick: () => onToggleTargetOverlay("grid"),
-            children: /* @__PURE__ */ jsx37(LayoutGrid, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx38(LayoutGrid, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "button",
           {
             "aria-disabled": !isFigmaOverlayAvailable,
@@ -14654,7 +15327,7 @@ var ReviewTopbar = ({
             disabled: !isFigmaOverlayAvailable,
             type: "button",
             onClick: onToggleFigmaOverlay,
-            children: /* @__PURE__ */ jsx37(FigmaMarkIcon, {})
+            children: /* @__PURE__ */ jsx38(FigmaMarkIcon, {})
           }
         )
       ] })
@@ -14663,7 +15336,7 @@ var ReviewTopbar = ({
 };
 
 // src/react-shell/topbar.container.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TopbarContainer = () => {
   const {
     applyTarget,
@@ -14696,7 +15369,7 @@ var TopbarContainer = () => {
   const copyCurrentUrl = () => copyCurrentReviewUrl({
     onCopyLabelChange: setCopyLabel
   });
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     ReviewTopbar,
     {
       draftTarget,
@@ -14723,11 +15396,11 @@ var TopbarContainer = () => {
 };
 
 // src/react-shell/review/toast.container.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var ReviewToastContainer = () => {
   const toastMessage = useReviewShellStore((state) => state.toastMessage);
   if (!toastMessage) return null;
-  return /* @__PURE__ */ jsx39("div", { className: "df-review-copy-toast", role: "status", children: toastMessage });
+  return /* @__PURE__ */ jsx40("div", { className: "df-review-copy-toast", role: "status", children: toastMessage });
 };
 
 // src/react-shell/hooks/use.review.shell.runtime.ts
@@ -15025,7 +15698,7 @@ var bindReviewFrameNavigation = ({
   onSyncShellTarget,
   onSyncTargetViewport
 }) => {
-  const syncRouteFromFrame = () => {
+  const syncRouteFromFrame = (navigation) => {
     const nextTarget = getFrameRouteTarget(targetWindow, reviewPathPrefix);
     const nextRouteKey = getTargetRouteKey(nextTarget, reviewPathPrefix);
     const currentRouteKey = getTargetRouteKey(
@@ -15036,7 +15709,7 @@ var bindReviewFrameNavigation = ({
     if (!pageTargets.has(nextRouteKey)) {
       return;
     }
-    onSyncShellTarget(nextTarget);
+    onSyncShellTarget(nextTarget, navigation);
   };
   const handleClick = (event) => {
     if (event.defaultPrevented || event.button !== 0) return;
@@ -15063,7 +15736,7 @@ var bindReviewFrameNavigation = ({
     if (nextRouteKey === currentRouteKey) return;
     if (!pageTargets.has(nextRouteKey)) return;
     event.preventDefault();
-    onSyncShellTarget(nextTarget);
+    onSyncShellTarget(nextTarget, "hard");
   };
   const handleFrameKeyDown = (event) => {
     if (event.key !== "Escape") return;
@@ -15076,26 +15749,27 @@ var bindReviewFrameNavigation = ({
   const originalReplaceState = history.replaceState.bind(history);
   history.pushState = (...args) => {
     originalPushState(...args);
-    syncRouteFromFrame();
+    syncRouteFromFrame("soft");
   };
   history.replaceState = (...args) => {
     originalReplaceState(...args);
-    syncRouteFromFrame();
+    syncRouteFromFrame("soft");
   };
-  syncRouteFromFrame();
-  targetWindow.addEventListener("popstate", syncRouteFromFrame);
-  targetWindow.addEventListener("hashchange", syncRouteFromFrame);
+  const syncHardRouteFromFrame = () => syncRouteFromFrame("hard");
+  syncRouteFromFrame("soft");
+  targetWindow.addEventListener("popstate", syncHardRouteFromFrame);
+  targetWindow.addEventListener("hashchange", syncHardRouteFromFrame);
   targetWindow.addEventListener("keydown", handleFrameKeyDown, true);
-  targetDocument.addEventListener("click", handleClick, true);
+  targetDocument.addEventListener("click", handleClick);
   targetWindow.addEventListener("scroll", onSyncTargetViewport, true);
   targetWindow.addEventListener("resize", onSyncTargetViewport);
   return () => {
     history.pushState = originalPushState;
     history.replaceState = originalReplaceState;
-    targetWindow.removeEventListener("popstate", syncRouteFromFrame);
-    targetWindow.removeEventListener("hashchange", syncRouteFromFrame);
+    targetWindow.removeEventListener("popstate", syncHardRouteFromFrame);
+    targetWindow.removeEventListener("hashchange", syncHardRouteFromFrame);
     targetWindow.removeEventListener("keydown", handleFrameKeyDown, true);
-    targetDocument.removeEventListener("click", handleClick, true);
+    targetDocument.removeEventListener("click", handleClick);
     targetWindow.removeEventListener("scroll", onSyncTargetViewport, true);
     targetWindow.removeEventListener("resize", onSyncTargetViewport);
   };
@@ -15898,12 +16572,13 @@ var useReviewTargetSync = ({
   onActiveRouteChange,
   onClearSelectedItem,
   onDraftTargetChange,
+  onFrameTargetChange,
   onSyncTargetViewport,
   onTargetChange
 }) => {
   const storeApi = useReviewShellStoreApi();
   const syncShellTarget = useCallback13(
-    (nextTarget) => {
+    (nextTarget, navigation) => {
       const normalizedTarget = normalizeTarget(nextTarget, reviewPathPrefix);
       const nextRouteKey = getTargetRouteKey(
         normalizedTarget,
@@ -15914,6 +16589,9 @@ var useReviewTargetSync = ({
         onTargetChange(normalizedTarget);
         onDraftTargetChange(normalizedTarget);
         onActiveRouteChange(nextRouteKey);
+        if (navigation === "hard") {
+          onFrameTargetChange(normalizedTarget);
+        }
       }
       const { size: currentSize, selectedItemId } = storeApi.getState();
       if (selectedItemId) {
@@ -15931,6 +16609,7 @@ var useReviewTargetSync = ({
       onActiveRouteChange,
       onClearSelectedItem,
       onDraftTargetChange,
+      onFrameTargetChange,
       onTargetChange,
       reviewPathPrefix,
       source,
@@ -16002,15 +16681,29 @@ var useReviewController = ({
   );
   const setActiveRoute = useReviewShellStore((state) => state.setActiveRoute);
   const setDraftTarget = useReviewShellStore((state) => state.setDraftTarget);
+  const navigateFrameTarget = useReviewShellStore(
+    (state) => state.navigateFrameTarget
+  );
+  const setIsListVisible = useReviewShellStore(
+    (state) => state.setIsListVisible
+  );
   const setMode = useReviewShellStore((state) => state.setMode);
   const setSelectedItemId = useReviewShellStore(
     (state) => state.setSelectedItemId
   );
+  const setSidePanel = useReviewShellStore((state) => state.setSidePanel);
   const setSize = useReviewShellStore((state) => state.setSize);
   const setTarget = useReviewShellStore((state) => state.setTarget);
   const setTargetOverlayState = useReviewShellStore(
     (state) => state.setTargetOverlayState
   );
+  const setHardTarget = useCallback14(
+    (nextTarget) => {
+      setTarget(nextTarget);
+      navigateFrameTarget(nextTarget);
+    },
+    [navigateFrameTarget, setTarget]
+  );
   const syncTargetViewport = useCallback14(() => {
     window.dispatchEvent(new Event("resize"));
   }, []);
@@ -16049,8 +16742,20 @@ var useReviewController = ({
     onSelectedItemIdChange: setSelectedItemId,
     onSizeChange: setSize,
     onSyncTargetViewport: syncTargetViewport,
-    onTargetChange: setTarget
+    onTargetChange: setHardTarget
   });
+  const restoreCreatedReviewItem = useCallback14(
+    (item) => {
+      setSidePanel("qa");
+      setIsListVisible(true);
+      restoreReviewItem(item);
+    },
+    [
+      restoreReviewItem,
+      setIsListVisible,
+      setSidePanel
+    ]
+  );
   const { syncShellTarget } = useReviewTargetSync({
     iframeRef,
     reviewPathPrefix,
@@ -16060,6 +16765,7 @@ var useReviewController = ({
     onActiveRouteChange: setActiveRoute,
     onClearSelectedItem: clearSelectedItem,
     onDraftTargetChange: setDraftTarget,
+    onFrameTargetChange: navigateFrameTarget,
     onSyncTargetViewport: syncTargetViewport,
     onTargetChange: setTarget
   });
@@ -16087,7 +16793,7 @@ var useReviewController = ({
     onApplyPendingRestore: applyPendingRestore,
     onCancelReviewMode,
     onCloseRuler,
-    onCreateItem: restoreReviewItem,
+    onCreateItem: restoreCreatedReviewItem,
     onItemsRefresh,
     onModeChange: setMode,
     onRefreshTargetOverlayState: refreshTargetOverlayState,
@@ -16394,6 +17100,7 @@ var useReviewShellActionsValue = ({
   changeReviewSource,
   clearSourceInspector,
   clearSourceOutlineHover,
+  clearSourceOutlineSelection,
   clearSelectedReviewItem,
   getPageTarget,
   initReviewKit,
@@ -16403,6 +17110,7 @@ var useReviewShellActionsValue = ({
   restoreReviewItem,
   selectAllQa,
   selectPage,
+  selectSourceOutlineForElement,
   setIsInitialPromptOpen,
   setIsInitialPromptScriptOpen,
   setReviewMode,
@@ -16419,6 +17127,7 @@ var useReviewShellActionsValue = ({
     changeReviewSource,
     clearSourceInspector,
     clearSourceOutlineHover,
+    clearSourceOutlineSelection,
     clearSelectedReviewItem,
     getPageTarget,
     initReviewKit,
@@ -16430,6 +17139,7 @@ var useReviewShellActionsValue = ({
     restoreReviewItem,
     selectAllQa,
     selectPage,
+    selectSourceOutlineForElement,
     setReviewMode,
     showSourceOutlineForElement,
     toggleFigmaImagesPanel,
@@ -16442,6 +17152,7 @@ var useReviewShellActionsValue = ({
     changeReviewSource,
     clearSourceInspector,
     clearSourceOutlineHover,
+    clearSourceOutlineSelection,
     clearSelectedReviewItem,
     getPageTarget,
     initReviewKit,
@@ -16451,6 +17162,7 @@ var useReviewShellActionsValue = ({
     restoreReviewItem,
     selectAllQa,
     selectPage,
+    selectSourceOutlineForElement,
     setIsInitialPromptOpen,
     setIsInitialPromptScriptOpen,
     setReviewMode,
@@ -16466,7 +17178,23 @@ var useReviewShellActionsValue = ({
 import {
   useEffect as useEffect16
 } from "react";
+var REVIEW_SELECTION_ACTION_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "summary",
+  "textarea",
+  '[contenteditable="true"]',
+  "[data-dfwr-move-entry-id]",
+  '[role="button"]'
+].join(", ");
+var isReviewSelectionAction = (target) => {
+  const element = target;
+  return typeof element?.closest === "function" && Boolean(element.closest(REVIEW_SELECTION_ACTION_SELECTOR));
+};
 var useReviewShellEffects = ({
+  clearSelectedReviewItem,
   frameScrollRef,
   iframeRef,
   isListVisible,
@@ -16474,8 +17202,10 @@ var useReviewShellEffects = ({
   mode,
   pendingInitialItemIdRef,
   restoreReviewItem,
+  selectedItemId,
   size,
   syncTargetViewport,
+  targetFrameLoadVersion,
   targetSrc
 }) => {
   useEffect16(() => {
@@ -16519,6 +17249,60 @@ var useReviewShellEffects = ({
       setTargetFigmaOverlayLocked(targetDocument, false);
     };
   }, [iframeRef, mode, targetSrc]);
+  useEffect16(() => {
+    if (!selectedItemId) return void 0;
+    const frameScroll = frameScrollRef.current;
+    let frameDocument = null;
+    try {
+      frameDocument = iframeRef.current?.contentDocument ?? null;
+    } catch {
+      frameDocument = null;
+    }
+    const clearOnWorkspacePointerDown = (event) => {
+      if (isReviewSelectionAction(event.target)) return;
+      clearSelectedReviewItem();
+    };
+    const clearOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && activeElement.closest("[data-review-qa-item-id]")) {
+        activeElement.blur();
+      }
+      clearSelectedReviewItem();
+    };
+    frameScroll?.addEventListener(
+      "pointerdown",
+      clearOnWorkspacePointerDown,
+      true
+    );
+    frameDocument?.addEventListener(
+      "pointerdown",
+      clearOnWorkspacePointerDown,
+      true
+    );
+    frameDocument?.addEventListener("keydown", clearOnEscape, true);
+    window.addEventListener("keydown", clearOnEscape, true);
+    return () => {
+      frameScroll?.removeEventListener(
+        "pointerdown",
+        clearOnWorkspacePointerDown,
+        true
+      );
+      frameDocument?.removeEventListener(
+        "pointerdown",
+        clearOnWorkspacePointerDown,
+        true
+      );
+      frameDocument?.removeEventListener("keydown", clearOnEscape, true);
+      window.removeEventListener("keydown", clearOnEscape, true);
+    };
+  }, [
+    clearSelectedReviewItem,
+    frameScrollRef,
+    iframeRef,
+    selectedItemId,
+    targetFrameLoadVersion
+  ]);
 };
 
 // src/react-shell/figma.ts
@@ -17322,16 +18106,14 @@ var useReviewShellTransientActions = ({
 };
 var useReviewShellPanelActions = ({
   isFigmaImageManagementEnabled,
-  isSourceInspectorEnabled,
   toggleSidePanel
 }) => {
   const toggleQaPanel = useCallback20(() => {
     toggleSidePanel("qa");
   }, [toggleSidePanel]);
   const toggleSourceTreePanel = useCallback20(() => {
-    if (!isSourceInspectorEnabled) return;
     toggleSidePanel("source");
-  }, [isSourceInspectorEnabled, toggleSidePanel]);
+  }, [toggleSidePanel]);
   const toggleFigmaImagesPanel = useCallback20(() => {
     if (!isFigmaImageManagementEnabled) return;
     toggleSidePanel("figma-images");
@@ -17347,6 +18129,7 @@ var useReviewShellPanelActions = ({
 };
 var useReviewShellModeSetter = ({
   closeRuler,
+  isListVisible,
   mode,
   openSidePanel,
   setControllerReviewMode,
@@ -17356,13 +18139,14 @@ var useReviewShellModeSetter = ({
     const writeMode = getReviewModeWriteMode(nextMode);
     if (writeMode && !writeModes.includes(writeMode)) return;
     closeRuler();
-    if (writeMode && mode !== nextMode) {
+    if (writeMode && mode !== nextMode && !isListVisible) {
       openSidePanel("qa");
     }
     setControllerReviewMode(nextMode);
   },
   [
     closeRuler,
+    isListVisible,
     mode,
     openSidePanel,
     setControllerReviewMode,
@@ -17716,39 +18500,34 @@ import {
   useEffect as useEffect21
 } from "react";
 var getAvailableSidePanel = (sidePanel, {
-  isFigmaImageManagementEnabled,
-  isSourceInspectorEnabled
+  isFigmaImageManagementEnabled
 }) => {
-  if (sidePanel === "source" && !isSourceInspectorEnabled) return "qa";
   if (sidePanel === "figma-images" && !isFigmaImageManagementEnabled) {
     return "qa";
   }
   return sidePanel;
 };
 var useReviewSidePanel = ({
-  isFigmaImageManagementEnabled,
-  isSourceInspectorEnabled
+  isFigmaImageManagementEnabled
 }) => {
   const storeApi = useReviewShellStoreApi();
   const rawSidePanel = useReviewShellStore((state) => state.sidePanel);
   const isListVisible = useReviewShellStore((state) => state.isListVisible);
   const sidePanel = getAvailableSidePanel(rawSidePanel, {
-    isFigmaImageManagementEnabled,
-    isSourceInspectorEnabled
+    isFigmaImageManagementEnabled
   });
   const isQaPanelVisible = isListVisible && sidePanel === "qa";
-  const isSourceTreePanelVisible = isSourceInspectorEnabled && isListVisible && sidePanel === "source";
+  const isSourceTreePanelVisible = isListVisible && sidePanel === "source";
   const isFigmaImagesPanelVisible = isFigmaImageManagementEnabled && isListVisible && sidePanel === "figma-images";
   useEffect21(() => {
     const state = storeApi.getState();
     const availableSidePanel = getAvailableSidePanel(state.sidePanel, {
-      isFigmaImageManagementEnabled,
-      isSourceInspectorEnabled
+      isFigmaImageManagementEnabled
     });
     if (availableSidePanel !== state.sidePanel) {
       state.setSidePanel(availableSidePanel);
     }
-  }, [isFigmaImageManagementEnabled, isSourceInspectorEnabled, storeApi]);
+  }, [isFigmaImageManagementEnabled, storeApi]);
   useEffect21(() => {
     writeStoredReviewSidePanel(sidePanel);
   }, [sidePanel]);
@@ -17760,31 +18539,28 @@ var useReviewSidePanel = ({
       const state = storeApi.getState();
       state.setSidePanel(
         getAvailableSidePanel(nextSidePanel, {
-          isFigmaImageManagementEnabled,
-          isSourceInspectorEnabled
+          isFigmaImageManagementEnabled
         })
       );
       state.setIsListVisible(true);
     },
-    [isFigmaImageManagementEnabled, isSourceInspectorEnabled, storeApi]
+    [isFigmaImageManagementEnabled, storeApi]
   );
   const toggleSidePanel = useCallback23(
     (nextSidePanel) => {
       const state = storeApi.getState();
       const currentSidePanel = getAvailableSidePanel(state.sidePanel, {
-        isFigmaImageManagementEnabled,
-        isSourceInspectorEnabled
+        isFigmaImageManagementEnabled
       });
       const availableSidePanel = getAvailableSidePanel(nextSidePanel, {
-        isFigmaImageManagementEnabled,
-        isSourceInspectorEnabled
+        isFigmaImageManagementEnabled
       });
       state.setSidePanel(availableSidePanel);
       state.setIsListVisible(
         currentSidePanel === availableSidePanel ? !state.isListVisible : true
       );
     },
-    [isFigmaImageManagementEnabled, isSourceInspectorEnabled, storeApi]
+    [isFigmaImageManagementEnabled, storeApi]
   );
   return {
     isFigmaImagesPanelVisible,
@@ -17871,24 +18647,20 @@ function createSourceShortcutStyle(optionAttribute, fontOverlayAttribute) {
 }
 
 // src/react-shell/hooks/use.review.source.inspector.ts
-var SOURCE_PANEL_MAX_WIDTH = 440;
-var SOURCE_PANEL_MIN_WIDTH = 240;
-var SOURCE_PANEL_MAX_HEIGHT = 260;
 function useReviewSourceInspector({
+  frameScrollRef,
   iframeRef,
-  isSourceInspectorEnabled,
   isSourceTreeHoverOutlineEnabled,
   sourceCandidateOptions,
-  sourceOpenOptions,
   targetSrc,
-  onCancelReviewMode
+  onCancelReviewMode,
+  onRequestSourceTreeFocus
 }) {
   const showToast = useReviewToast();
   const sourceShortcutCleanupRef = useRef14(null);
-  const sourceInspectorInteractionRef = useRef14(false);
+  const [componentSelectionState, setComponentSelectionState] = useState17(null);
   const [sourceInspectorState, setSourceInspectorState] = useState17(null);
   const clearSourceInspector = useCallback24(() => {
-    sourceInspectorInteractionRef.current = false;
     setSourceInspectorState(null);
   }, []);
   const getSourceInspectorRect = useCallback24(
@@ -17916,68 +18688,6 @@ function useReviewSourceInspector({
     },
     [iframeRef]
   );
-  const getSourceInspectorPanelPosition = useCallback24(
-    (rect) => {
-      const margin = 12;
-      const gap = 10;
-      const preferredLeft = rect.left + rect.width + gap;
-      const rightSpace = window.innerWidth - preferredLeft - margin;
-      const leftSpace = rect.left - gap - margin;
-      const canOpenRight = rightSpace >= SOURCE_PANEL_MIN_WIDTH;
-      const canOpenLeft = leftSpace >= SOURCE_PANEL_MIN_WIDTH;
-      const left = canOpenRight || !canOpenLeft ? preferredLeft : margin;
-      const right = canOpenRight || !canOpenLeft ? null : Math.max(margin, window.innerWidth - (rect.left - gap));
-      const maxWidth = Math.min(
-        SOURCE_PANEL_MAX_WIDTH,
-        Math.max(
-          SOURCE_PANEL_MIN_WIDTH,
-          canOpenRight ? rightSpace : canOpenLeft ? leftSpace : window.innerWidth - margin * 2
-        )
-      );
-      const top = Math.min(
-        Math.max(margin, rect.top),
-        Math.max(margin, window.innerHeight - SOURCE_PANEL_MAX_HEIGHT - margin)
-      );
-      return { left, maxWidth, right, top };
-    },
-    []
-  );
-  const showSourceInspectorForTarget = useCallback24(
-    (target, isPinned = false) => {
-      const candidates = getSourceCandidates(target, sourceCandidateOptions).map(
-        (candidate) => ({
-          ...candidate,
-          openUrl: getSourceOpenUrl(candidate.source, {
-            ...sourceOpenOptions,
-            omitPosition: !candidate.usesPosition
-          })
-        })
-      );
-      const firstCandidate = candidates[0];
-      const rect = firstCandidate ? getSourceInspectorRect(firstCandidate.element) : null;
-      if (!firstCandidate || !rect) {
-        setSourceInspectorState(null);
-        return [];
-      }
-      const { left, maxWidth, right, top } = getSourceInspectorPanelPosition(rect);
-      setSourceInspectorState({
-        candidates,
-        isPinned,
-        panelLeft: left,
-        panelMaxWidth: maxWidth,
-        panelRight: right,
-        panelTop: top,
-        rect
-      });
-      return candidates;
-    },
-    [
-      getSourceInspectorPanelPosition,
-      getSourceInspectorRect,
-      sourceCandidateOptions,
-      sourceOpenOptions
-    ]
-  );
   const showSourceOutlineForTarget = useCallback24(
     (target) => {
       const firstCandidate = getSourceCandidates(
@@ -17990,13 +18700,8 @@ function useReviewSourceInspector({
         return null;
       }
       setSourceInspectorState({
-        candidates: [],
-        isPinned: false,
-        panelLeft: 0,
-        panelMaxWidth: SOURCE_PANEL_MAX_WIDTH,
-        panelRight: null,
-        panelTop: 0,
-        rect
+        rect,
+        targetElement: firstCandidate.element
       });
       return firstCandidate;
     },
@@ -18007,52 +18712,91 @@ function useReviewSourceInspector({
       if (!isSourceTreeHoverOutlineEnabled) return;
       const rect = getSourceInspectorRect(element);
       if (!rect) {
-        setSourceInspectorState(
-          (current) => current?.isPinned ? current : null
-        );
+        setSourceInspectorState(null);
         return;
       }
-      setSourceInspectorState(
-        (current) => current?.isPinned ? current : {
-          candidates: [],
-          isPinned: false,
-          panelLeft: 0,
-          panelMaxWidth: SOURCE_PANEL_MAX_WIDTH,
-          panelRight: null,
-          panelTop: 0,
-          rect
-        }
-      );
+      setSourceInspectorState({ rect, targetElement: element });
     },
     [getSourceInspectorRect, isSourceTreeHoverOutlineEnabled]
   );
+  const selectSourceOutlineForElement = useCallback24(
+    (element) => {
+      const rect = getSourceInspectorRect(element);
+      setComponentSelectionState(
+        rect ? { rect, targetElement: element } : null
+      );
+    },
+    [getSourceInspectorRect]
+  );
+  const clearSourceOutlineSelection = useCallback24(() => {
+    setComponentSelectionState(null);
+  }, []);
   const clearSourceOutlineHover = useCallback24(() => {
-    setSourceInspectorState((current) => current?.isPinned ? current : null);
+    setSourceInspectorState(null);
   }, []);
-  const openSourceCandidate = useCallback24(
-    (candidate) => {
-      const didOpen = openSourceInEditor(candidate.source, {
-        ...sourceOpenOptions,
-        omitPosition: !candidate.usesPosition
+  const sourceInspectorTargetElement = sourceInspectorState?.targetElement ?? null;
+  const componentSelectionTargetElement = componentSelectionState?.targetElement ?? null;
+  useEffect22(() => {
+    const trackedElement = sourceInspectorTargetElement ?? componentSelectionTargetElement;
+    if (!trackedElement) return void 0;
+    const targetWindow = trackedElement.ownerDocument.defaultView ?? iframeRef.current?.contentWindow ?? null;
+    const frameScroll = frameScrollRef.current;
+    if (!targetWindow) return void 0;
+    let frameId = null;
+    const scheduleUpdate = () => {
+      if (frameId !== null) targetWindow.cancelAnimationFrame(frameId);
+      frameId = targetWindow.requestAnimationFrame(() => {
+        frameId = null;
+        setSourceInspectorState((current) => {
+          if (!current) return current;
+          const rect = getSourceInspectorRect(current.targetElement);
+          if (!rect) return null;
+          return { ...current, rect };
+        });
+        setComponentSelectionState((current) => {
+          if (!current) return current;
+          const rect = getSourceInspectorRect(current.targetElement);
+          if (!rect) return null;
+          return { ...current, rect };
+        });
       });
-      showToast(didOpen ? "Source opened" : "Source root required");
-      clearSourceInspector();
-    },
-    [clearSourceInspector, showToast, sourceOpenOptions]
-  );
+    };
+    targetWindow.addEventListener("scroll", scheduleUpdate, { passive: true });
+    targetWindow.addEventListener("resize", scheduleUpdate);
+    frameScroll?.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    scheduleUpdate();
+    return () => {
+      if (frameId !== null) {
+        targetWindow.cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      targetWindow.removeEventListener("scroll", scheduleUpdate);
+      targetWindow.removeEventListener("resize", scheduleUpdate);
+      frameScroll?.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [
+    componentSelectionTargetElement,
+    frameScrollRef,
+    getSourceInspectorRect,
+    iframeRef,
+    sourceInspectorTargetElement
+  ]);
   const cleanupSourceOpenShortcut = useCallback24(() => {
     sourceShortcutCleanupRef.current?.();
     sourceShortcutCleanupRef.current = null;
   }, []);
   const bindSourceOpenShortcut = useCallback24(() => {
     cleanupSourceOpenShortcut();
+    setComponentSelectionState(null);
     let frameDocument = null;
     try {
       frameDocument = iframeRef.current?.contentDocument ?? null;
     } catch {
       return;
     }
-    if (!frameDocument || !isSourceInspectorEnabled) return;
+    if (!frameDocument) return;
     const frameRoot = frameDocument.head ?? frameDocument.documentElement;
     const frameBody = frameDocument.body ?? frameDocument.documentElement;
     if (!frameRoot || !frameBody) return;
@@ -18072,7 +18816,6 @@ function useReviewSourceInspector({
     let hoveredElement = null;
     let lastSourceTarget = null;
     let isSourceSelecting = false;
-    let isSourcePanelPinned = false;
     const getFontHints = (element) => {
       if (!element) return [];
       const values = [];
@@ -18130,7 +18873,6 @@ function useReviewSourceInspector({
       isSourceSelecting = isSelecting;
       setTargetFigmaSourceSelectLocked(frameDocument, isSelecting);
       if (isSelecting) {
-        isSourcePanelPinned = false;
         frameDocument.documentElement.setAttribute(optionAttribute, "true");
         const candidate = showSourceOutlineForTarget(lastSourceTarget);
         setHoveredElement(candidate?.element ?? hoveredElement);
@@ -18139,48 +18881,63 @@ function useReviewSourceInspector({
       setHoveredElement(null);
       fontOverlay.hidden = true;
       frameDocument.documentElement.removeAttribute(optionAttribute);
-      if (!isSourcePanelPinned && !sourceInspectorInteractionRef.current) {
-        clearSourceInspector();
-      }
+      clearSourceInspector();
     };
-    const handleMouseMove = (event) => {
-      if (isSourcePanelPinned) return;
+    const handleTargetPointerMove = (event) => {
       lastSourceTarget = event.target;
-      const candidates = getSourceCandidates(event.target, sourceCandidateOptions);
+      const candidates = getSourceCandidates(
+        event.target,
+        sourceCandidateOptions
+      );
       const sourceElement = candidates[0]?.element ?? null;
       if (event.altKey && !isSourceSelecting) {
         setSourceSelecting(true);
       }
-      if (isSourceSelecting && !isSourcePanelPinned) {
+      if (isSourceSelecting) {
         showSourceOutlineForTarget(event.target);
       }
       setHoveredElement(isSourceSelecting ? sourceElement : null);
     };
-    const handleClick = (event) => {
+    const selectSourceTreeEntry = (event) => {
       if (!isSourceSelecting && !event.altKey) return;
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
-      const candidates = showSourceInspectorForTarget(event.target, true);
-      if (!candidates.length) {
+      const candidates = getSourceCandidates(
+        event.target,
+        sourceCandidateOptions
+      );
+      const candidate = candidates.filter((item) => item.kind !== "data").sort((a, b) => a.depth - b.depth)[0] ?? candidates[0];
+      if (!candidate) {
         showToast("Source hint not found");
-        isSourcePanelPinned = false;
         setSourceSelecting(false);
         return;
       }
-      isSourcePanelPinned = true;
+      onRequestSourceTreeFocus?.(candidate.element);
       setSourceSelecting(false);
     };
+    const handleClick = (event) => {
+      selectSourceTreeEntry(event);
+    };
     const isOptionKeyEvent = (event) => event.key === "Alt" || event.code === "AltLeft" || event.code === "AltRight" || event.altKey;
+    const getActiveDomSelectButton = () => {
+      const activeElement = document.activeElement;
+      return activeElement instanceof HTMLButtonElement && activeElement.matches(
+        ".df-review-section-outline-link.is-dom-select"
+      ) ? activeElement : null;
+    };
+    const blurDomSelectButton = () => {
+      getActiveDomSelectButton()?.blur();
+    };
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
-        isSourcePanelPinned = false;
+        onCancelReviewMode();
         setSourceSelecting(false);
         clearSourceInspector();
+        blurDomSelectButton();
         return;
       }
       if (!isOptionKeyEvent(event)) return;
-      if (isSourcePanelPinned) return;
       onCancelReviewMode();
       setSourceSelecting(true);
     };
@@ -18188,39 +18945,63 @@ function useReviewSourceInspector({
       if (isOptionKeyEvent(event) || !event.altKey) setSourceSelecting(false);
     };
     const handleBlur = () => {
-      isSourcePanelPinned = false;
       setSourceSelecting(false);
     };
     const handleWindowPointerDown = (event) => {
-      const target = event.target;
-      if (target instanceof Element && target.closest(".df-review-source-popover")) {
-        sourceInspectorInteractionRef.current = true;
+      setSourceSelecting(false);
+      const activeElement = getActiveDomSelectButton();
+      if (!activeElement || event.composedPath().includes(activeElement)) {
         return;
       }
-      isSourcePanelPinned = false;
-      sourceInspectorInteractionRef.current = false;
-      setSourceSelecting(false);
-      clearSourceInspector();
+      const isComposerClick = event.composedPath().some((target) => {
+        if (!(target instanceof Element)) return false;
+        return Boolean(
+          target.closest(".df-review-qa-draft-host, .dfwr-dom-popover")
+        );
+      });
+      if (isComposerClick) return;
+      onCancelReviewMode();
+      activeElement.blur();
     };
-    frameDocument.addEventListener("mousemove", handleMouseMove, true);
+    frameDocument.addEventListener("mousemove", handleTargetPointerMove, true);
+    frameDocument.addEventListener("pointermove", handleTargetPointerMove, true);
     frameDocument.addEventListener("click", handleClick, true);
     frameDocument.addEventListener("keydown", handleKeyDown, true);
     frameDocument.addEventListener("keyup", handleKeyUp, true);
+    frameDocument.addEventListener(
+      "pointerdown",
+      handleWindowPointerDown,
+      true
+    );
     window.addEventListener("keydown", handleKeyDown, true);
     window.addEventListener("keyup", handleKeyUp, true);
     window.addEventListener("blur", handleBlur);
     window.addEventListener("pointerdown", handleWindowPointerDown, true);
     sourceShortcutCleanupRef.current = () => {
-      frameDocument.removeEventListener("mousemove", handleMouseMove, true);
+      frameDocument.removeEventListener(
+        "mousemove",
+        handleTargetPointerMove,
+        true
+      );
+      frameDocument.removeEventListener(
+        "pointermove",
+        handleTargetPointerMove,
+        true
+      );
       frameDocument.removeEventListener("click", handleClick, true);
       frameDocument.removeEventListener("keydown", handleKeyDown, true);
       frameDocument.removeEventListener("keyup", handleKeyUp, true);
+      frameDocument.removeEventListener(
+        "pointerdown",
+        handleWindowPointerDown,
+        true
+      );
       window.removeEventListener("keydown", handleKeyDown, true);
       window.removeEventListener("keyup", handleKeyUp, true);
       window.removeEventListener("blur", handleBlur);
       window.removeEventListener("pointerdown", handleWindowPointerDown, true);
-      isSourcePanelPinned = false;
       setSourceSelecting(false);
+      blurDomSelectButton();
       style.remove();
       fontOverlay.remove();
     };
@@ -18229,11 +19010,10 @@ function useReviewSourceInspector({
     clearSourceInspector,
     cleanupSourceOpenShortcut,
     iframeRef,
-    isSourceInspectorEnabled,
+    onRequestSourceTreeFocus,
     showToast,
     sourceCandidateOptions,
-    showSourceOutlineForTarget,
-    showSourceInspectorForTarget
+    showSourceOutlineForTarget
   ]);
   useEffect22(() => {
     return cleanupSourceOpenShortcut;
@@ -18246,9 +19026,10 @@ function useReviewSourceInspector({
     bindSourceOpenShortcut,
     clearSourceInspector,
     clearSourceOutlineHover,
-    openSourceCandidate,
+    clearSourceOutlineSelection,
+    componentSelectionState,
+    selectSourceOutlineForElement,
     showSourceOutlineForElement,
-    sourceInspectorInteractionRef,
     sourceInspectorState
   };
 }
@@ -18288,6 +19069,7 @@ var useReviewTargetNavigation = ({
     ) : currentSize;
     const nextAdapter = sourceEntries.find((entry) => entry.label === nextSource) ?? activeAdapterEntry;
     const isCurrentTarget = state.target === normalizedTarget && source === nextSource && currentSize.width === nextSize.width && currentSize.height === nextSize.height;
+    const shouldNavigateFrame = state.target !== normalizedTarget || state.frameTarget !== normalizedTarget;
     if (parsedInput.itemId) {
       const item = await nextAdapter.adapter.get(parsedInput.itemId);
       if (item) {
@@ -18304,8 +19086,11 @@ var useReviewTargetNavigation = ({
     state.setDraftTarget(normalizedTarget);
     state.setSize(nextSize);
     state.setTarget(normalizedTarget);
+    if (shouldNavigateFrame) {
+      state.navigateFrameTarget(normalizedTarget);
+    }
     updateShellUrl(normalizedTarget, nextSize, nextSource);
-    if (isCurrentTarget) onReloadTargetFrame();
+    if (isCurrentTarget && !shouldNavigateFrame) onReloadTargetFrame();
   }, [
     activeAdapterEntry,
     onClearSelectedItem,
@@ -18326,10 +19111,14 @@ var useReviewTargetNavigation = ({
       );
       onClearSelectedItem();
       const state = storeApi.getState();
+      const shouldNavigateFrame = state.target !== normalizedTarget || state.frameTarget !== normalizedTarget;
       state.setIsAllQaVisible(false);
       state.setActiveRoute(normalizedRoute);
       state.setDraftTarget(normalizedTarget);
       state.setTarget(normalizedTarget);
+      if (shouldNavigateFrame) {
+        state.navigateFrameTarget(normalizedTarget);
+      }
       updateShellUrl(normalizedTarget, state.size, source);
       state.setIsSitemapOpen(false);
     },
@@ -18413,11 +19202,10 @@ var useReviewShellRuntime = ({
   const isItemEditing = useReviewShellStore(
     (state) => Boolean(state.editingItem)
   );
+  const selectedItemId = useReviewShellStore((state) => state.selectedItemId);
   const {
-    isSourceInspectorEnabled,
     isSourceTreeHoverOutlineEnabled,
-    sourceCandidateOptions,
-    sourceOpenOptions
+    sourceCandidateOptions
   } = useReviewShellConfig();
   const {
     figmaImagesController,
@@ -18434,8 +19222,7 @@ var useReviewShellRuntime = ({
     openSidePanel,
     toggleSidePanel
   } = useReviewSidePanel({
-    isFigmaImageManagementEnabled,
-    isSourceInspectorEnabled
+    isFigmaImageManagementEnabled
   });
   const {
     activeItems,
@@ -18476,6 +19263,15 @@ var useReviewShellRuntime = ({
     setIsSitemapOpen,
     setMode
   });
+  const requestSourceTreeFocus = useCallback26(
+    (element) => {
+      const state = storeApi.getState();
+      state.setSidePanel("source");
+      state.setIsListVisible(true);
+      state.setSourceTreeFocusRequest(element);
+    },
+    [storeApi]
+  );
   const reviewSettings = useReviewSettings({
     defaultReviewUserId: activeAdapterEntry.defaultUserId,
     onCancelReviewMode: cancelReviewMode,
@@ -18572,12 +19368,14 @@ var useReviewShellRuntime = ({
   });
   const setReviewMode = useReviewShellModeSetter({
     closeRuler,
+    isListVisible,
     mode,
     openSidePanel,
     setControllerReviewMode,
     writeModes: activeAdapterEntry.writeModes
   });
   useReviewShellEffects({
+    clearSelectedReviewItem,
     frameScrollRef,
     iframeRef,
     isListVisible,
@@ -18585,23 +19383,27 @@ var useReviewShellRuntime = ({
     mode,
     pendingInitialItemIdRef,
     restoreReviewItem,
+    selectedItemId,
     size,
     syncTargetViewport,
+    targetFrameLoadVersion,
     targetSrc
   });
   const sourceInspector = useReviewSourceInspector({
+    frameScrollRef,
     iframeRef,
-    isSourceInspectorEnabled,
     isSourceTreeHoverOutlineEnabled,
     sourceCandidateOptions,
-    sourceOpenOptions,
     targetSrc,
-    onCancelReviewMode: cancelReviewMode
+    onCancelReviewMode: cancelReviewMode,
+    onRequestSourceTreeFocus: requestSourceTreeFocus
   });
   const {
     bindSourceOpenShortcut,
     clearSourceInspector,
     clearSourceOutlineHover,
+    clearSourceOutlineSelection,
+    selectSourceOutlineForElement,
     showSourceOutlineForElement
   } = sourceInspector;
   const {
@@ -18610,7 +19412,6 @@ var useReviewShellRuntime = ({
     toggleSourceTreePanel
   } = useReviewShellPanelActions({
     isFigmaImageManagementEnabled,
-    isSourceInspectorEnabled,
     toggleSidePanel
   });
   const figmaOverlayState = useReviewShellFigmaOverlay({
@@ -18650,6 +19451,7 @@ var useReviewShellRuntime = ({
     changeReviewSource,
     clearSourceInspector,
     clearSourceOutlineHover,
+    clearSourceOutlineSelection,
     clearSelectedReviewItem,
     getPageTarget,
     initReviewKit,
@@ -18659,6 +19461,7 @@ var useReviewShellRuntime = ({
     restoreReviewItem,
     selectAllQa,
     selectPage,
+    selectSourceOutlineForElement,
     setIsInitialPromptOpen,
     setIsInitialPromptScriptOpen,
     setReviewMode,
@@ -18751,6 +19554,8 @@ var getInitialTargetSliceState = (config) => {
   return {
     activeRoute: getTargetRouteKey(target, config.reviewPathPrefix),
     draftTarget: target,
+    frameNavigationVersion: 0,
+    frameTarget: target,
     size: getInitialSize(config.viewportPresets),
     source,
     target,
@@ -18762,6 +19567,10 @@ var getInitialTargetSliceState = (config) => {
 };
 var createTargetSlice = (initialState) => (set) => ({
   ...initialState,
+  navigateFrameTarget: (frameTarget) => set((state) => ({
+    frameNavigationVersion: state.frameNavigationVersion + 1,
+    frameTarget
+  })),
   setActiveRoute: (activeRoute) => set({ activeRoute }),
   setDraftTarget: (draftTarget) => set({ draftTarget }),
   setSize: (size) => set({ size }),
@@ -18777,6 +19586,7 @@ var createUiSlice = (set) => ({
   isInitialPromptScriptOpen: false,
   isSitemapOpen: false,
   mode: "idle",
+  sourceTreeFocusRequest: null,
   targetFrameLoadVersion: 0,
   toastMessage: "",
   bumpTargetFrameLoadVersion: () => set((state) => ({
@@ -18798,6 +19608,12 @@ var createUiSlice = (set) => ({
     isSitemapOpen: resolveSetStateAction(value, state.isSitemapOpen)
   })),
   setMode: (mode) => set({ mode }),
+  setSourceTreeFocusRequest: (element) => set((state) => ({
+    sourceTreeFocusRequest: element ? {
+      element,
+      version: (state.sourceTreeFocusRequest?.version ?? 0) + 1
+    } : null
+  })),
   setToastMessage: (value) => set((state) => ({
     toastMessage: resolveSetStateAction(value, state.toastMessage)
   }))
@@ -18812,7 +19628,7 @@ var createReviewShellStore = (init) => createStore()((...args) => ({
 }));
 
 // src/react-shell/review/shell.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var ReviewShell = (props) => {
   const config = useMemo18(
     () => createReviewShellConfig(props),
@@ -18832,36 +19648,36 @@ var ReviewShell = (props) => {
     () => createReviewShellStore({ target: getInitialTargetSliceState(config) })
   );
   const [refs] = useState18(createReviewShellRefs);
-  return /* @__PURE__ */ jsx40(ReviewShellConfigProvider, { value: config, children: /* @__PURE__ */ jsx40(ReviewShellStoreProvider, { value: store, children: /* @__PURE__ */ jsx40(ReviewShellRefsProvider, { value: refs, children: /* @__PURE__ */ jsx40(ReviewShellContent, { ...props }) }) }) });
+  return /* @__PURE__ */ jsx41(ReviewShellConfigProvider, { value: config, children: /* @__PURE__ */ jsx41(ReviewShellStoreProvider, { value: store, children: /* @__PURE__ */ jsx41(ReviewShellRefsProvider, { value: refs, children: /* @__PURE__ */ jsx41(ReviewShellContent, { ...props }) }) }) });
 };
 var ReviewShellContent = (props) => {
   const runtime = useReviewShellRuntime(props);
-  return /* @__PURE__ */ jsx40(ReviewShellProviders, { ...runtime, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(ReviewShellProviders, { ...runtime, children: /* @__PURE__ */ jsx41(
     ReviewShellFrameContainer,
     {
       slots: {
-        topbar: /* @__PURE__ */ jsx40(TopbarContainer, {}),
-        modals: /* @__PURE__ */ jsx40(ReviewShellModalsContainer, {}),
-        toast: /* @__PURE__ */ jsx40(ReviewToastContainer, {}),
-        sideRail: /* @__PURE__ */ jsx40(ReviewSideRailContainer, {}),
-        qaPanel: /* @__PURE__ */ jsx40(QaPanelContainer, {}),
-        figmaImagesPanel: /* @__PURE__ */ jsx40(FigmaImagesPanelContainer, {}),
-        sourceTreePanel: /* @__PURE__ */ jsx40(SectionOutlineContainer, {}),
-        targetFrame: /* @__PURE__ */ jsx40(ReviewTargetFrame, {}),
-        sourceInspector: /* @__PURE__ */ jsx40(SourceInspectorOverlayContainer, {})
+        topbar: /* @__PURE__ */ jsx41(TopbarContainer, {}),
+        modals: /* @__PURE__ */ jsx41(ReviewShellModalsContainer, {}),
+        toast: /* @__PURE__ */ jsx41(ReviewToastContainer, {}),
+        sideRail: /* @__PURE__ */ jsx41(ReviewSideRailContainer, {}),
+        qaPanel: /* @__PURE__ */ jsx41(QaPanelContainer, {}),
+        figmaImagesPanel: /* @__PURE__ */ jsx41(FigmaImagesPanelContainer, {}),
+        sourceTreePanel: /* @__PURE__ */ jsx41(SectionOutlineContainer, {}),
+        targetFrame: /* @__PURE__ */ jsx41(ReviewTargetFrame, {}),
+        sourceInspector: /* @__PURE__ */ jsx41(SourceInspectorOverlayContainer, {})
       }
     }
   ) });
 };
 
 // src/react-shell/figma/dev-overlay.tsx
-import React, {
+import React2, {
   useEffect as useEffect23,
   useMemo as useMemo19,
   useState as useState19
 } from "react";
 import { createRoot } from "react-dom/client";
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var FIGMA_DEV_OVERLAY_ROOT_ID = "df-review-figma-dev-overlay-root";
 var FIGMA_DEV_OVERLAY_MOUNT_ID = "df-review-figma-dev-overlay-mount";
 var mountFigmaDevOverlay = (options) => {
@@ -18882,7 +19698,7 @@ var mountFigmaDevOverlay = (options) => {
   document.body.appendChild(host);
   const root = createRoot(mountNode);
   root.render(
-    /* @__PURE__ */ jsx41(React.StrictMode, { children: /* @__PURE__ */ jsx41(FigmaDevOverlayWidget, { ...options }) })
+    /* @__PURE__ */ jsx42(React2.StrictMode, { children: /* @__PURE__ */ jsx42(FigmaDevOverlayWidget, { ...options }) })
   );
   return {
     destroy() {
@@ -19003,13 +19819,13 @@ var FigmaDevOverlayWidget = ({
       children: [
         isPanelOpen && /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-panel", children: [
           /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-panel-header", children: [
-            /* @__PURE__ */ jsx41("strong", { children: "Figma" }),
-            /* @__PURE__ */ jsx41("span", { children: matchedViewportMatch ? `${matchedViewportMatch.label} \xB7 ${matchedViewportMatch.rangeLabel}` : `${viewport.width}px` })
+            /* @__PURE__ */ jsx42("strong", { children: "Figma" }),
+            /* @__PURE__ */ jsx42("span", { children: matchedViewportMatch ? `${matchedViewportMatch.label} \xB7 ${matchedViewportMatch.rangeLabel}` : `${viewport.width}px` })
           ] }),
           selectedImage && /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-selected-controls", children: [
             /* @__PURE__ */ jsxs29("label", { className: "df-review-figma-dev-opacity-control", children: [
-              /* @__PURE__ */ jsx41("span", { children: "Opacity" }),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx42("span", { children: "Opacity" }),
+              /* @__PURE__ */ jsx42(
                 "input",
                 {
                   "aria-label": `${selectedImageLabel} overlay opacity`,
@@ -19022,11 +19838,11 @@ var FigmaDevOverlayWidget = ({
                   onInput: (event) => updateSelectedImageOpacity(event.currentTarget.value)
                 }
               ),
-              /* @__PURE__ */ jsx41("strong", { children: selectedOpacityPercent })
+              /* @__PURE__ */ jsx42("strong", { children: selectedOpacityPercent })
             ] }),
             /* @__PURE__ */ jsxs29("label", { className: "df-review-figma-dev-y-control", children: [
-              /* @__PURE__ */ jsx41(MoveVertical, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx42(MoveVertical, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx42(
                 "input",
                 {
                   "aria-label": `${selectedImageLabel} overlay Y offset`,
@@ -19056,11 +19872,11 @@ var FigmaDevOverlayWidget = ({
               )
             ] })
           ] }),
-          error && /* @__PURE__ */ jsx41("p", { className: "df-review-figma-dev-status", children: error }),
+          error && /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-status", children: error }),
           !matchedViewport ? /* @__PURE__ */ jsxs29("p", { className: "df-review-figma-dev-empty", children: [
             "No Figma layers for this viewport.",
             viewportBoundaries ? ` Mobile ${viewportBoundaries.mobileRangeLabel} / Full width ${viewportBoundaries.fullWidthRangeLabel}` : ""
-          ] }) : isLoading ? /* @__PURE__ */ jsx41("p", { className: "df-review-figma-dev-status", children: "Loading..." }) : images.length === 0 ? /* @__PURE__ */ jsx41("p", { className: "df-review-figma-dev-empty", children: "No Figma layers for this viewport." }) : /* @__PURE__ */ jsx41("div", { className: "df-review-figma-dev-list", children: images.map((image, index) => {
+          ] }) : isLoading ? /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-status", children: "Loading..." }) : images.length === 0 ? /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-empty", children: "No Figma layers for this viewport." }) : /* @__PURE__ */ jsx42("div", { className: "df-review-figma-dev-list", children: images.map((image, index) => {
             const imageLabel = getFigmaImageLabel(image, index);
             const overlayState = imageOverlayStates[image.id] ?? DEFAULT_FIGMA_IMAGE_LAYER_STATE;
             return /* @__PURE__ */ jsxs29(
@@ -19076,7 +19892,7 @@ var FigmaDevOverlayWidget = ({
                   setSelectedImageId(image.id);
                 },
                 children: [
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     FigmaImageLayerStateButtons,
                     {
                       imageLabel,
@@ -19089,8 +19905,8 @@ var FigmaDevOverlayWidget = ({
                     }
                   ),
                   /* @__PURE__ */ jsxs29("span", { className: "df-review-figma-dev-row-main", children: [
-                    /* @__PURE__ */ jsx41("strong", { children: imageLabel }),
-                    /* @__PURE__ */ jsx41("small", { children: formatFigmaImageDate(image.updatedAt) })
+                    /* @__PURE__ */ jsx42("strong", { children: imageLabel }),
+                    /* @__PURE__ */ jsx42("small", { children: formatFigmaImageDate(image.updatedAt) })
                   ] })
                 ]
               },
@@ -19098,7 +19914,7 @@ var FigmaDevOverlayWidget = ({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx41("div", { className: "df-review-figma-dev-bar", children: /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsx42("div", { className: "df-review-figma-dev-bar", children: /* @__PURE__ */ jsxs29(
           "button",
           {
             "aria-expanded": isPanelOpen,
@@ -19108,8 +19924,8 @@ var FigmaDevOverlayWidget = ({
             type: "button",
             onClick: () => setIsPanelOpen((isOpen) => !isOpen),
             children: [
-              /* @__PURE__ */ jsx41(FigmaMarkIcon, {}),
-              /* @__PURE__ */ jsx41("span", { className: "df-review-figma-dev-button-count", children: images.length })
+              /* @__PURE__ */ jsx42(FigmaMarkIcon, {}),
+              /* @__PURE__ */ jsx42("span", { className: "df-review-figma-dev-button-count", children: images.length })
             ]
           }
         ) })
@@ -19700,7 +20516,7 @@ var createSupabasePresenceAdapter = ({
 });
 
 // src/react-shell.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var mountReviewShell = (options) => {
   if (typeof document === "undefined" || !document.head) return;
   const { rootId = "root", ...shellProps } = options;
@@ -19711,7 +20527,7 @@ var mountReviewShell = (options) => {
   root.style.height = "100%";
   root.style.margin = "0";
   createRoot2(root).render(
-    /* @__PURE__ */ jsx42(React2.StrictMode, { children: /* @__PURE__ */ jsx42(ReviewShell, { ...shellProps }) })
+    /* @__PURE__ */ jsx43(React3.StrictMode, { children: /* @__PURE__ */ jsx43(ReviewShell, { ...shellProps }) })
   );
 };
 export {
@@ -19760,11 +20576,13 @@ lucide-react/dist/esm/icons/maximize-2.mjs:
 lucide-react/dist/esm/icons/monitor.mjs:
 lucide-react/dist/esm/icons/moon.mjs:
 lucide-react/dist/esm/icons/move-vertical.mjs:
+lucide-react/dist/esm/icons/move.mjs:
 lucide-react/dist/esm/icons/network.mjs:
 lucide-react/dist/esm/icons/pencil.mjs:
 lucide-react/dist/esm/icons/plus.mjs:
 lucide-react/dist/esm/icons/rectangle-horizontal.mjs:
 lucide-react/dist/esm/icons/refresh-cw.mjs:
+lucide-react/dist/esm/icons/rotate-ccw.mjs:
 lucide-react/dist/esm/icons/ruler.mjs:
 lucide-react/dist/esm/icons/scan.mjs:
 lucide-react/dist/esm/icons/search.mjs: