npm - @designfever/web-review-kit - Versions diffs - 0.4.1 → 0.5.0 - Mend

@designfever/web-review-kit 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +19 -4
package/dist/{chunk-6L2KJ7XL.js → chunk-TWCSIBMY.js} +77 -1
package/dist/chunk-TWCSIBMY.js.map +1 -0
package/dist/index.cjs +74 -0
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +2 -2
package/dist/index.d.ts +2 -2
package/dist/index.js +1 -1
package/dist/react-shell.cjs +2086 -621
package/dist/react-shell.cjs.map +1 -1
package/dist/react-shell.d.cts +19 -1
package/dist/react-shell.d.ts +19 -1
package/dist/react-shell.js +1838 -445
package/dist/react-shell.js.map +1 -1
package/dist/{types-D_qYtwTs.d.cts → types-RvVa5ns-.d.cts} +1 -0
package/dist/{types-D_qYtwTs.d.ts → types-RvVa5ns-.d.ts} +1 -0
package/dist/vite.cjs +50 -0
package/dist/vite.cjs.map +1 -1
package/dist/vite.d.cts +17 -1
package/dist/vite.d.ts +17 -1
package/dist/vite.js +49 -0
package/dist/vite.js.map +1 -1
package/docs/installation.md +17 -3
package/docs/release-notes-0.5.0.md +134 -0
package/package.json +1 -1
package/dist/chunk-6L2KJ7XL.js.map +0 -1

package/dist/react-shell.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import {
   REVIEW_WORKFLOW_STATUS_OPTIONS,
+  clamp,
   createWebReviewKit,
   getNumberedReviewItems,
-  normalizeReviewItemStatus
-} from "./chunk-6L2KJ7XL.js";
+  normalizeReviewItemStatus,
+  runWithAutoScrollBehavior
+} from "./chunk-TWCSIBMY.js";
 // src/react-shell.tsx
 import React2 from "react";
@@ -68,10 +70,10 @@ function ensureReviewShellStyle() {
 	    --df-review-font-size-lg: 14px;
 	    --df-review-font-size-xl: 15px;
 	    --df-review-font-size-2xl: 18px;
-	    --df-review-font-weight-medium: 650;
-	    --df-review-font-weight-bold: 700;
-	    --df-review-font-weight-strong: 800;
-	    --df-review-font-weight-heavy: 900;
+	    --df-review-font-weight-medium: 400;
+	    --df-review-font-weight-bold: 500;
+	    --df-review-font-weight-strong: 500;
+	    --df-review-font-weight-heavy: 600;
 	    --df-review-line-height-tight: 1.25;
 	    --df-review-line-height-base: 1.42;
 	    --df-review-line-height-relaxed: 1.55;
@@ -88,7 +90,7 @@ function ensureReviewShellStyle() {
 	    --df-review-space-8: 32px;
 	    --df-review-control-height-sm: 32px;
 	    --df-review-control-height-md: 34px;
-	    --df-review-control-height-lg: 38px;
+	    --df-review-control-height-lg: 34px;
 	    --df-review-radius-xs: 3px;
 	    --df-review-radius-sm: 6px;
 	    --df-review-radius-md: 8px;
@@ -262,7 +264,7 @@ function ensureReviewShellStyle() {
   .df-review-shell {
     --df-review-frame-gutter-x: var(--df-review-space-4);
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 0 32px;
+    grid-template-columns: minmax(0, 1fr) 0 48px;
     grid-template-rows: auto auto minmax(0, 1fr);
     width: 100%;
     height: 100%;
@@ -271,7 +273,7 @@ function ensureReviewShellStyle() {
   }
   .df-review-shell.is-list-visible {
-    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px) 32px;
+    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px) 48px;
   }
 	  .df-review-topbar {
@@ -290,20 +292,6 @@ function ensureReviewShellStyle() {
 	    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025);
 	  }
-  .df-review-presence-row {
-    grid-column: 1;
-    grid-row: 2;
-    position: relative;
-    z-index: 590;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    min-width: 0;
-    padding: var(--df-review-space-2) var(--df-review-frame-gutter-x);
-    border-bottom: 1px solid var(--df-review-line-soft);
-    background: var(--df-review-panel);
-  }
 		  .df-review-address {
 		    display: grid;
 		    grid-template-columns: auto minmax(160px, 1fr) auto auto;
@@ -316,6 +304,7 @@ function ensureReviewShellStyle() {
   .df-review-address input {
 	    width: 100%;
+	    height: var(--df-review-control-height-md);
 	    min-height: var(--df-review-control-height-md);
 	    border: 1px solid var(--df-review-line);
 	    border-radius: var(--df-review-radius-sm);
@@ -333,7 +322,6 @@ function ensureReviewShellStyle() {
 	  }
 		  .df-review-address button,
-		  .df-review-side-toggle,
 		  .df-review-presets button,
 		  .df-review-overlay-button,
 			  .df-review-mode-button,
@@ -342,6 +330,7 @@ function ensureReviewShellStyle() {
 			  .df-review-settings-actions button,
 			  .df-review-prompt-block-header button,
 			  .df-review-item-actions button {
+		    height: var(--df-review-control-height-md);
 		    min-height: var(--df-review-control-height-md);
 		    border: 1px solid var(--df-review-line);
 		    border-radius: var(--df-review-radius-sm);
@@ -349,12 +338,11 @@ function ensureReviewShellStyle() {
 	    box-shadow: var(--df-review-shadow-control);
 	    color: var(--df-review-text);
 	    font-size: var(--df-review-font-size-sm);
-	    font-weight: 700;
+	    font-weight: 500;
 	    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
 	  }
 		  .df-review-address button:hover,
-	  .df-review-side-toggle:hover,
 		  .df-review-presets button:hover,
 		  .df-review-overlay-button:hover,
 		  .df-review-mode-button:hover,
@@ -455,12 +443,13 @@ function ensureReviewShellStyle() {
   .df-review-sitemap-header strong {
     font-size: var(--df-review-font-size-lg);
+    font-weight: 600;
   }
 	  .df-review-sitemap-header span {
 	    color: var(--df-review-muted);
 	    font-size: var(--df-review-font-size-sm);
-	    font-weight: 700;
+	    font-weight: 500;
 	  }
   .df-review-sitemap-header button {
@@ -474,7 +463,7 @@ function ensureReviewShellStyle() {
 	    background: var(--df-review-control);
 	    color: var(--df-review-text);
 	    font-size: var(--df-review-font-size-md);
-	    font-weight: 800;
+	    font-weight: 500;
 	  }
 	  .df-review-sitemap-header button:hover {
@@ -502,7 +491,7 @@ function ensureReviewShellStyle() {
     background: var(--df-review-control);
     box-shadow: var(--df-review-shadow-control);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 850;
+    font-weight: 600;
   }
   .df-review-sitemap-list {
@@ -538,7 +527,7 @@ function ensureReviewShellStyle() {
       0 1px 0 var(--df-review-line);
     color: var(--df-review-muted);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 720;
+    font-weight: 500;
     letter-spacing: 0.03em;
     text-transform: uppercase;
   }
@@ -636,7 +625,7 @@ function ensureReviewShellStyle() {
     overflow-wrap: anywhere;
     color: var(--df-review-text);
     font-size: var(--df-review-font-size-md);
-    font-weight: 650;
+    font-weight: 400;
     line-height: 1.35;
   }
@@ -648,7 +637,7 @@ function ensureReviewShellStyle() {
     flex: 0 0 auto;
     color: var(--df-review-muted);
     font-family: var(--df-review-font-mono);
-    font-weight: 500;
+    font-weight: 400;
     white-space: pre;
   }
@@ -663,14 +652,14 @@ function ensureReviewShellStyle() {
     color: var(--df-review-muted);
     font-size: var(--df-review-font-size-sm);
     font-variant-numeric: tabular-nums;
-    font-weight: 650;
+    font-weight: 400;
     line-height: 1;
     text-align: right;
   }
   .df-review-sitemap-cell.is-total {
     color: var(--df-review-accent);
-    font-weight: 760;
+    font-weight: 500;
   }
   .df-review-sitemap-cell.is-total strong {
@@ -703,7 +692,7 @@ function ensureReviewShellStyle() {
     background: var(--df-review-chip-bg);
     color: var(--df-review-text);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+    font-weight: 600;
     line-height: 1.1;
     white-space: nowrap;
   }
@@ -775,12 +764,13 @@ function ensureReviewShellStyle() {
 		  .df-review-settings-header strong {
 		    color: var(--df-review-text);
 		    font-size: var(--df-review-font-size-lg);
+        font-weight: 600;
 		  }
 		  .df-review-settings-header span {
 		    color: var(--df-review-muted);
 		    font-size: var(--df-review-font-size-xs);
-		    font-weight: 800;
+		    font-weight: 500;
 		  }
 		  .df-review-settings-header button {
@@ -790,7 +780,7 @@ function ensureReviewShellStyle() {
 		    min-width: 34px;
 		    padding: 0;
 		    font-size: var(--df-review-font-size-md);
-		    font-weight: 800;
+		    font-weight: 500;
 		  }
 		  .df-review-settings-body {
@@ -816,7 +806,7 @@ function ensureReviewShellStyle() {
 		  .df-review-settings-label-row label {
 		    color: var(--df-review-muted);
 		    font-size: var(--df-review-font-size-sm);
-		    font-weight: 800;
+		    font-weight: 500;
 		  }
 		  .df-review-settings-theme-options {
@@ -828,17 +818,32 @@ function ensureReviewShellStyle() {
 		  }
 		  .df-review-settings-theme-option {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 7px;
 		    min-height: 30px;
 		    border: 1px solid var(--df-review-line);
 		    border-radius: var(--df-review-radius-sm);
-		    padding: 0 10px;
+		    padding: 0 11px;
 		    color: var(--df-review-muted);
 		    background: var(--df-review-control);
 		    box-shadow: var(--df-review-shadow-control);
 		    font-size: var(--df-review-font-size-sm);
-		    font-weight: 800;
+		    font-weight: 500;
 		  }
+      .df-review-settings-theme-option svg {
+        width: 15px;
+        height: 15px;
+        flex: 0 0 auto;
+        stroke-width: 2.2;
+      }
+      .df-review-settings-theme-option span {
+        color: inherit;
+      }
 		  .df-review-settings-theme-option:hover {
 		    border-color: var(--df-review-accent);
 		    background: var(--df-review-control-hover);
@@ -983,7 +988,7 @@ function ensureReviewShellStyle() {
 		    background: var(--df-review-chip-bg);
 		    color: var(--df-review-muted);
 		    font-size: var(--df-review-font-size-xs);
-		    font-weight: 700;
+		    font-weight: 500;
 		    line-height: 1.55;
 		  }
@@ -999,7 +1004,7 @@ function ensureReviewShellStyle() {
 		    margin: 0;
 		    color: var(--df-review-accent);
 		    font-size: var(--df-review-font-size-sm);
-		    font-weight: 800;
+		    font-weight: 500;
 		  }
 		  .df-review-settings-actions {
@@ -1065,7 +1070,7 @@ function ensureReviewShellStyle() {
     margin: 0;
     color: var(--df-review-danger);
     font-size: var(--df-review-font-size-sm);
-    font-weight: 800;
+    font-weight: 500;
   }
   .df-review-edit-actions {
@@ -1118,7 +1123,7 @@ function ensureReviewShellStyle() {
     box-shadow: var(--df-review-shadow-modal);
     color: var(--df-review-text);
     font-size: var(--df-review-font-size-sm);
-    font-weight: 800;
+    font-weight: 500;
     line-height: 1.25;
     pointer-events: none;
   }
@@ -1142,13 +1147,14 @@ function ensureReviewShellStyle() {
 			  .df-review-prompt-header strong {
 			    color: var(--df-review-text);
 			    font-size: var(--df-review-font-size-lg);
+          font-weight: 600;
 			  }
 			  .df-review-prompt-header span {
 			    overflow: hidden;
 			    color: var(--df-review-muted);
 			    font-size: var(--df-review-font-size-xs);
-			    font-weight: 800;
+			    font-weight: 500;
 			    text-overflow: ellipsis;
 			    white-space: nowrap;
 			  }
@@ -1160,7 +1166,7 @@ function ensureReviewShellStyle() {
 			    min-width: 34px;
 			    padding: 0;
 			    font-size: var(--df-review-font-size-md);
-			    font-weight: 800;
+			    font-weight: 500;
 			  }
 			  .df-review-prompt-body {
@@ -1194,13 +1200,13 @@ function ensureReviewShellStyle() {
 			  .df-review-prompt-block-header strong {
 			    color: var(--df-review-text);
 			    font-size: var(--df-review-font-size-sm);
-			    font-weight: 900;
+			    font-weight: 600;
 			  }
 			  .df-review-prompt-block-header span {
 			    color: var(--df-review-muted);
 			    font-size: var(--df-review-font-size-xs);
-			    font-weight: 800;
+			    font-weight: 500;
 			  }
 			  .df-review-prompt-block-header button {
@@ -1239,7 +1245,7 @@ function ensureReviewShellStyle() {
 			    color: var(--df-review-text);
 			    font-family: var(--df-review-font-mono);
 			    font-size: var(--df-review-font-size-xs);
-			    font-weight: 600;
+			    font-weight: 400;
 			    line-height: 1.5;
 			    white-space: pre;
 			  }
@@ -1258,13 +1264,13 @@ function ensureReviewShellStyle() {
 			  .df-review-prompt-section-header strong {
 			    color: var(--df-review-text);
 			    font-size: var(--df-review-font-size-md);
-			    font-weight: 900;
+			    font-weight: 600;
 			  }
 			  .df-review-prompt-section-header span {
 			    color: var(--df-review-muted);
 			    font-size: var(--df-review-font-size-xs);
-			    font-weight: 800;
+			    font-weight: 500;
 			  }
 			  .df-review-prompt-about {
@@ -1293,14 +1299,14 @@ function ensureReviewShellStyle() {
 			  .df-review-prompt-about-grid strong {
 			    color: var(--df-review-text);
 			    font-size: var(--df-review-font-size-sm);
-			    font-weight: 900;
+			    font-weight: 600;
 			  }
 			  .df-review-prompt-about-grid p {
 			    margin: 0;
 			    color: var(--df-review-muted);
 			    font-size: var(--df-review-font-size-sm);
-			    font-weight: 700;
+			    font-weight: 500;
 			    line-height: 1.55;
 			  }
@@ -1330,8 +1336,9 @@ function ensureReviewShellStyle() {
 	    display: flex;
 	    align-items: center;
 	    gap: var(--df-review-space-1-5);
-	    min-height: calc(var(--df-review-control-height-lg) + 6px);
-	    padding: 3px;
+	    height: var(--df-review-control-height-md);
+	    min-height: var(--df-review-control-height-md);
+	    padding: 0;
 	    border: 1px solid var(--df-review-line-soft);
 	    border-radius: var(--df-review-radius-md);
 	    background: var(--df-review-card);
@@ -1343,28 +1350,50 @@ function ensureReviewShellStyle() {
 		    align-items: center;
 		    color: var(--df-review-line);
 		    font-size: var(--df-review-font-size-2xl);
-		    font-weight: 700;
+		    font-weight: 500;
 	    line-height: 1;
 		    user-select: none;
 	  }
-		  .df-review-active-size {
+  .df-review-active-size {
 		    flex: 0 0 auto;
 		    display: inline-flex;
 		    align-items: center;
-		    min-height: var(--df-review-control-height-lg);
+		    min-height: var(--df-review-control-height-md);
 		    color: var(--df-review-muted);
 		    font-size: var(--df-review-font-size-sm);
 		    font-variant-numeric: tabular-nums;
-	    font-weight: 800;
+	    font-weight: 500;
 	    line-height: 1;
 	  }
+  .df-review-preset-select {
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+    height: var(--df-review-control-height-md);
+    min-height: var(--df-review-control-height-md);
+    min-width: 154px;
+    border: 1px solid var(--df-review-line-soft);
+    border-radius: var(--df-review-radius-md);
+    padding: 0 42px 0 14px;
+    color: var(--df-review-text);
+    background-color: var(--df-review-control);
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23d7deea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-position: right 14px center;
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    box-shadow: var(--df-review-shadow-control);
+    font-size: var(--df-review-font-size-sm);
+    font-weight: 500;
+  }
 	  .df-review-presets button {
 	    display: inline-flex;
 	    align-items: center;
     gap: 7px;
-    min-height: var(--df-review-control-height-lg);
+    height: var(--df-review-control-height-md);
+    min-height: var(--df-review-control-height-md);
     padding: 0 11px 0 9px;
     border-color: transparent;
     background: transparent;
@@ -1389,7 +1418,7 @@ function ensureReviewShellStyle() {
     background: var(--df-review-line-soft);
     color: var(--df-review-muted);
     font-size: var(--df-review-font-size-2xs);
-    font-weight: 800;
+    font-weight: 500;
     line-height: 16px;
     text-align: center;
   }
@@ -1415,6 +1444,7 @@ function ensureReviewShellStyle() {
   .df-review-preset-copy strong {
     color: var(--df-review-text);
     font-size: var(--df-review-font-size-sm);
+    font-weight: 500;
   }
 	  .df-review-overlay-button,
@@ -1422,8 +1452,10 @@ function ensureReviewShellStyle() {
     position: relative;
     display: inline-grid;
     place-items: center;
-	    width: 38px;
-	    min-width: 38px;
+	    width: var(--df-review-control-height-md);
+	    min-width: var(--df-review-control-height-md);
+	    height: var(--df-review-control-height-md);
+	    min-height: var(--df-review-control-height-md);
 	    padding: 0;
 	    border-color: transparent;
 	    background: transparent;
@@ -1431,6 +1463,72 @@ function ensureReviewShellStyle() {
 	    color: var(--df-review-muted);
 	  }
+  .df-review-overlays-menu {
+    position: relative;
+    display: none;
+    flex: 0 0 auto;
+  }
+  .df-review-overlays-menu summary {
+    display: grid;
+    place-items: center;
+    width: var(--df-review-control-height-md);
+    min-width: var(--df-review-control-height-md);
+    height: var(--df-review-control-height-md);
+    border: 1px solid var(--df-review-line-soft);
+    border-radius: var(--df-review-radius-md);
+    padding: 0;
+    color: var(--df-review-muted);
+    background: var(--df-review-card);
+    box-shadow: var(--df-review-shadow-control);
+    cursor: pointer;
+  }
+  .df-review-overlays-menu summary::-webkit-details-marker {
+    display: none;
+  }
+  .df-review-overlays-menu summary::marker {
+    content: '';
+  }
+  .df-review-overlays-menu summary:hover,
+  .df-review-overlays-menu[open] summary {
+    border-color: var(--df-review-accent);
+    background: var(--df-review-control-hover);
+    color: var(--df-review-accent);
+  }
+  .df-review-overlays-menu summary svg {
+    width: 20px;
+    height: 20px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.9;
+  }
+  .df-review-overlays-popover {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    z-index: 700;
+    display: none;
+    align-items: center;
+    gap: var(--df-review-space-1-5);
+    min-height: var(--df-review-control-height-md);
+    padding: 0;
+    border: 1px solid var(--df-review-line-soft);
+    border-radius: var(--df-review-radius-md);
+    background: var(--df-review-card);
+    box-shadow: var(--df-review-shadow-modal);
+  }
+  .df-review-overlays-menu[open] .df-review-overlays-popover {
+    display: flex;
+  }
   .df-review-overlay-button svg,
   .df-review-mode-button svg {
     width: 18px;
@@ -1466,33 +1564,46 @@ function ensureReviewShellStyle() {
 	  @container (max-width: 1040px) {
 	    .df-review-tools {
-	      flex-direction: column;
-	      align-items: stretch;
-	      justify-content: flex-start;
+	      flex-direction: row;
+	      align-items: center;
+	      justify-content: space-between;
 	    }
 	    .df-review-tool-controls {
-	      width: 100%;
+	      flex: 1 1 auto;
+	      width: auto;
+        min-width: 0;
+        flex-wrap: nowrap;
 	    }
 	    .df-review-presets {
-	      flex-wrap: wrap;
+	      display: none;
+	    }
+      .df-review-preset-select {
+        display: block;
+        flex: 0 1 190px;
+        width: clamp(154px, 26vw, 190px);
 	    }
 	    .df-review-overlays {
-	      width: 100%;
-	      justify-content: flex-start;
+	      display: none;
 	    }
+      .df-review-overlays-menu {
+        display: block;
+      }
 	  }
 	  .df-review-side-rail {
 	    grid-column: 3;
 	    grid-row: 1 / span 3;
 	    position: relative;
-	    z-index: 600;
+	    z-index: 640;
 	    display: flex;
+	    flex-direction: column;
 	    align-items: stretch;
-	    justify-content: center;
+	    justify-content: flex-start;
 	    min-width: 0;
 	    min-height: 0;
 	    border-left: 1px solid var(--df-review-line);
@@ -1500,49 +1611,166 @@ function ensureReviewShellStyle() {
 	  }
   .df-review-side-toggle {
+    position: relative;
+    flex: 0 0 58px;
     display: grid;
-    grid-template-rows: 28px auto;
-    align-items: start;
-    justify-items: center;
-    gap: 8px;
+    place-items: center;
     width: 100%;
-    min-height: 100%;
+    min-height: 58px;
     border: 0;
 	    border-radius: 0;
-	    padding: 10px 0;
+	    padding: 0;
 	    background: transparent;
 	    color: var(--df-review-muted);
+    transition: color 140ms ease, background 140ms ease;
 	  }
 	  .df-review-side-toggle:hover {
-	    background: var(--df-review-accent-soft);
 	    color: var(--df-review-text);
 	  }
+  .df-review-side-toggle.is-active {
+    color: var(--df-review-accent);
+  }
+  .df-review-side-toggle.is-active::after {
+    position: absolute;
+    top: 12px;
+    right: 0;
+    bottom: 12px;
+    width: 3px;
+    border-radius: 3px 0 0 3px;
+    background: var(--df-review-accent);
+    content: '';
+  }
+  .df-review-side-toggle:focus-visible {
+    outline: 0;
+    color: var(--df-review-text);
+  }
+  .df-review-side-toggle:focus-visible span {
+    border-radius: 6px;
+    outline: 2px solid var(--df-review-focus-ring);
+    outline-offset: 3px;
+  }
   .df-review-side-toggle span {
     display: grid;
     place-items: center;
-	    width: 20px;
-	    height: 24px;
+	    width: 30px;
+	    height: 30px;
 	    line-height: 1;
 	  }
 	  .df-review-side-toggle svg {
-	    width: 18px;
-	    height: 18px;
+	    width: 30px;
+	    height: 30px;
 	    fill: none;
 	    stroke: currentColor;
 	    stroke-linecap: round;
-	    stroke-width: 2;
+	    stroke-width: 1.55;
 	  }
-  .df-review-side-toggle strong {
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-    color: inherit;
-    font-size: var(--df-review-font-size-2xs);
-    font-weight: 900;
-    letter-spacing: 0.08em;
+  .df-review-presence-overlay {
+    position: relative;
+    margin-top: auto;
+  }
+  .df-review-presence-button {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 100%;
+    min-height: 58px;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    color: var(--df-review-muted);
+    background: transparent;
+  }
+  .df-review-presence-button:hover,
+  .df-review-presence-button[aria-expanded="true"] {
+    color: var(--df-review-text);
+  }
+  .df-review-presence-button:focus-visible {
+    outline: 0;
+  }
+  .df-review-presence-button:focus-visible svg {
+    border-radius: 6px;
+    outline: 2px solid var(--df-review-focus-ring);
+    outline-offset: 3px;
+  }
+  .df-review-presence-button svg {
+    width: 30px;
+    height: 30px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.55;
+  }
+  .df-review-presence-badge {
+    position: absolute;
+    top: 10px;
+    right: 7px;
+    display: grid;
+    place-items: center;
+    min-width: 17px;
+    height: 17px;
+    border: 1px solid var(--df-review-side-rail);
+    border-radius: var(--df-review-radius-pill);
+    padding: 0 4px;
+    color: #17202c;
+    background: var(--df-review-accent);
+    font-size: var(--df-review-font-size-3xs);
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
+  }
+  .df-review-presence-list {
+    position: absolute;
+    right: calc(100% + 8px);
+    bottom: 8px;
+    display: grid;
+    gap: 5px;
+    min-width: 132px;
+    max-width: 220px;
+    border: 1px solid var(--df-review-line);
+    border-radius: var(--df-review-radius-md);
+    padding: 8px;
+    background: var(--df-review-panel);
+    box-shadow: var(--df-review-shadow-modal);
+  }
+  .df-review-presence-chip {
+    --df-review-presence-color: var(--df-review-accent);
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 24px;
+    border-left: 2px solid var(--df-review-presence-color);
+    border-radius: var(--df-review-radius-sm);
+    padding: 0 8px;
+    color: var(--df-review-text);
+    background: var(--df-review-control);
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
+    line-height: 1.1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .df-review-presence-chip.is-self {
+    color: var(--df-review-accent);
+    background: var(--df-review-accent-soft);
   }
 	  .df-review-qa-panel {
@@ -1560,11 +1788,34 @@ function ensureReviewShellStyle() {
 	      linear-gradient(180deg, var(--df-review-panel), var(--df-review-bg));
 	  }
-	  .df-review-shell:not(.is-list-visible) .df-review-qa-panel {
+	  .df-review-shell:not(.is-list-visible) .df-review-qa-panel,
+  .df-review-qa-panel[aria-hidden="true"] {
 	    visibility: hidden;
 	    border-left: 0;
+    pointer-events: none;
 	  }
+  .df-review-source-tree-panel {
+    grid-column: 2;
+    grid-row: 1 / span 3;
+    position: relative;
+    z-index: 600;
+    display: grid;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-left: 1px solid var(--df-review-line-soft);
+    background:
+      linear-gradient(180deg, var(--df-review-panel), var(--df-review-bg));
+  }
+  .df-review-shell:not(.is-list-visible) .df-review-source-tree-panel,
+  .df-review-source-tree-panel[aria-hidden="true"] {
+    visibility: hidden;
+    border-left: 0;
+    pointer-events: none;
+  }
 	  .df-review-panel-body {
 	    display: grid;
 	    min-width: 0;
@@ -1581,14 +1832,16 @@ function ensureReviewShellStyle() {
 			  .df-review-list-header {
 			    display: grid;
-			    grid-template-rows: auto auto;
+			    grid-template-rows:
+      var(--df-review-control-height-md)
+      var(--df-review-control-height-md);
 			    gap: var(--df-review-space-2);
 			    padding: var(--df-review-space-3) var(--df-review-frame-gutter-x);
 			    border-bottom: 1px solid var(--df-review-line-soft);
 			    background: var(--df-review-card);
 			    color: var(--df-review-muted);
 			    font-size: var(--df-review-font-size-sm);
-			    font-weight: 800;
+			    font-weight: 500;
 			  }
 			  .df-review-list-toolbar {
@@ -1596,143 +1849,76 @@ function ensureReviewShellStyle() {
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     gap: 8px;
+    min-height: var(--df-review-control-height-md);
     min-width: 0;
   }
 			  .df-review-list-title {
-			    display: flex;
+			    display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
 			    align-items: center;
 			    gap: 8px;
+          min-height: var(--df-review-control-height-md);
 		    min-width: 0;
 		  }
-		  .df-review-list-title span {
+  .df-review-list-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+		  .df-review-list-meta span {
 		    min-width: 0;
 		    overflow: hidden;
 		    text-overflow: ellipsis;
 		    white-space: nowrap;
 		  }
-		  .df-review-list-title strong {
-		    flex: 0 0 auto;
-		    color: var(--df-review-muted);
-		    font-size: var(--df-review-font-size-xs);
-		    font-variant-numeric: tabular-nums;
-		  }
+			  .df-review-list-meta strong {
+			    flex: 0 0 auto;
+			    color: var(--df-review-muted);
+			    font-size: var(--df-review-font-size-xs);
+			    font-variant-numeric: tabular-nums;
+          font-weight: 500;
+			  }
-  .df-review-presence-overlay {
+  .df-review-list-controls {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 5px;
-    max-width: 100%;
-    pointer-events: none;
-  }
-  .df-review-presence-row .df-review-presence-overlay {
-    width: 100%;
-    max-width: 1440px;
-    margin: 0 auto;
+    gap: 4px;
   }
-  .df-review-presence-chip {
-    --df-review-presence-color: var(--df-review-accent);
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-    max-width: min(220px, calc(100% - 20px));
-    min-height: 24px;
-    border: 1px solid rgba(15, 23, 42, 0.12);
-    border-radius: var(--df-review-radius-pill);
-    padding: 0 8px;
-    color: #17202c;
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
-    font-size: var(--df-review-font-size-2xs);
-    font-weight: 900;
-    line-height: 1.1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    backdrop-filter: blur(8px);
+  .df-review-source-select,
+  .df-review-status-filter-select {
+    height: var(--df-review-control-height-md);
+    min-height: var(--df-review-control-height-md);
+    border: 1px solid var(--df-review-line-soft);
+    border-radius: var(--df-review-radius-sm);
+    padding: 0 24px 0 8px;
+    color: var(--df-review-text);
+    background: var(--df-review-control);
+    box-shadow: var(--df-review-shadow-control);
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
   }
-  .df-review-presence-row .df-review-presence-chip {
-    max-width: none;
+  .df-review-source-select {
+    width: 104px;
   }
-  .df-review-presence-chip.is-self {
-    border-color: var(--df-review-presence-color);
-    box-shadow:
-      inset 0 0 0 1px var(--df-review-presence-color),
-      0 8px 22px rgba(15, 23, 42, 0.14);
-  }
-  .df-review-presence-more {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 28px;
-    min-height: 24px;
-    border: 1px solid rgba(15, 23, 42, 0.12);
-    border-radius: var(--df-review-radius-pill);
-    padding: 0 8px;
-    color: #17202c;
-    background: rgba(255, 255, 255, 0.92);
-    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--df-review-font-size-2xs);
-    font-weight: 900;
-    line-height: 1;
-    pointer-events: auto;
-    backdrop-filter: blur(8px);
-  }
-  .df-review-presence-more:hover {
-    border-color: rgba(0, 102, 255, 0.42);
-    color: #005be8;
-    background: rgba(255, 255, 255, 0.98);
-  }
-  .df-review-list-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .df-review-source-select,
-  .df-review-status-filter-select {
-    min-height: 30px;
-    border: 1px solid var(--df-review-line-soft);
-    border-radius: var(--df-review-radius-sm);
-    padding: 0 24px 0 8px;
-    color: var(--df-review-text);
-    background: var(--df-review-control);
-    box-shadow: var(--df-review-shadow-control);
-    font-size: var(--df-review-font-size-xs);
-    font-weight: 800;
-  }
-  .df-review-source-select {
-    width: 104px;
-  }
-  .df-review-status-filter-select {
-    width: 124px;
-  }
-  .df-review-list-title .df-review-status-filter-select {
-    margin-left: auto;
+  .df-review-status-filter-select {
+    width: 124px;
   }
   .df-review-source-refresh {
     position: relative;
 		    display: inline-grid;
 		    place-items: center;
-		    width: 30px;
-		    min-width: 30px;
-		    height: 30px;
+		    width: var(--df-review-control-height-md);
+		    min-width: var(--df-review-control-height-md);
+		    height: var(--df-review-control-height-md);
 		    border: 1px solid var(--df-review-line-soft);
 		    border-radius: var(--df-review-radius-sm);
 		    padding: 0;
@@ -1742,16 +1928,18 @@ function ensureReviewShellStyle() {
 		  }
 		  .df-review-source-refresh svg {
-		    width: 14px;
-		    height: 14px;
+		    width: 16px;
+		    height: 16px;
 		  }
 			  .df-review-filter-tabs {
     display: flex;
     align-items: center;
-    gap: 2px;
-    height: 30px;
-    padding: 2px;
+    justify-self: end;
+    gap: var(--df-review-space-1-5);
+    height: var(--df-review-control-height-md);
+    min-height: var(--df-review-control-height-md);
+    padding: 0;
     border: 1px solid var(--df-review-line-soft);
     border-radius: var(--df-review-radius-md);
     background: var(--df-review-card);
@@ -1762,11 +1950,11 @@ function ensureReviewShellStyle() {
     position: relative;
     display: grid;
     place-items: center;
-    width: 26px;
-    min-width: 26px;
-    height: 26px;
+    width: var(--df-review-control-height-md);
+    min-width: var(--df-review-control-height-md);
+    height: var(--df-review-control-height-md);
     border: 0;
-    border-radius: 5px;
+    border-radius: var(--df-review-radius-sm);
     background: transparent;
     color: var(--df-review-subtle);
   }
@@ -1799,19 +1987,19 @@ function ensureReviewShellStyle() {
 		  }
 				  .df-review-filter-icon svg {
-				    width: 15px;
-				    height: 15px;
+				    width: 18px;
+				    height: 18px;
 		    fill: none;
 		    stroke: currentColor;
 		    stroke-linecap: round;
 		    stroke-linejoin: round;
-			    stroke-width: 2;
+			    stroke-width: 1.9;
 			  }
 			  .df-review-filter-count {
 			    color: currentColor;
 			    font-size: var(--df-review-font-size-3xs);
-			    font-weight: 900;
+			    font-weight: 600;
 			    font-variant-numeric: tabular-nums;
 			    line-height: 1;
 			  }
@@ -1892,6 +2080,7 @@ function ensureReviewShellStyle() {
   .df-review-item-main strong {
     overflow-wrap: anywhere;
     font-size: var(--df-review-font-size-md);
+    font-weight: 500;
     line-height: 1.35;
   }
@@ -1939,7 +2128,7 @@ function ensureReviewShellStyle() {
     border-radius: var(--df-review-radius-pill);
     padding: 0 7px;
     font-size: var(--df-review-font-size-2xs);
-    font-weight: 900;
+    font-weight: 600;
     line-height: 1;
     text-transform: uppercase;
   }
@@ -2006,7 +2195,7 @@ function ensureReviewShellStyle() {
     border-radius: var(--df-review-radius-sm);
     padding: 0 11px;
     font-size: var(--df-review-font-size-xs);
-    font-weight: 750;
+    font-weight: 500;
     text-transform: none;
   }
@@ -2019,7 +2208,7 @@ function ensureReviewShellStyle() {
     cursor: pointer;
     outline: 0;
     font-size: var(--df-review-font-size-xs);
-    font-weight: 750;
+    font-weight: 500;
     text-transform: none;
   }
@@ -2244,7 +2433,7 @@ function ensureReviewShellStyle() {
 		  .df-review-item-submit-button span {
 		    font-size: var(--df-review-font-size-xs);
-		    font-weight: 750;
+		    font-weight: 500;
 		    line-height: 1;
 		    text-transform: none;
 		    white-space: nowrap;
@@ -2416,6 +2605,9 @@ function ensureReviewShellStyle() {
     --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;
@@ -2427,7 +2619,7 @@ function ensureReviewShellStyle() {
     overflow: hidden;
     border: 1px solid var(--df-review-source-popover-line);
     border-radius: var(--df-review-radius-md);
-    padding: 8px 6px 6px;
+    padding: 6px;
     color: var(--df-review-source-popover-text);
     color-scheme: dark;
     background: rgba(19, 24, 33, 0.96);
@@ -2450,77 +2642,411 @@ function ensureReviewShellStyle() {
     border: 1px solid transparent;
     border-radius: var(--df-review-radius-sm);
     padding: 0;
-    color: var(--df-review-source-popover-subtle);
+    color: var(--df-review-source-popover-subtle);
+    background: transparent;
+    font-size: 16px;
+    font-weight: 500;
+    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: 600;
+    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;
+  }
+  .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-section-outline {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    border: 0;
+    border-radius: 0;
+    color: var(--df-review-text);
+    background: transparent;
+    box-shadow: none;
+    overflow: hidden;
+  }
+  .df-review-section-outline-head {
+    display: grid;
+    grid-template-rows:
+      var(--df-review-control-height-md)
+      var(--df-review-control-height-md);
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding: var(--df-review-space-3) var(--df-review-frame-gutter-x);
+    border-bottom: 1px solid var(--df-review-line-soft);
+    background: var(--df-review-card);
+    color: var(--df-review-muted);
+  }
+  .df-review-section-outline-head span {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+  .df-review-section-outline-head strong {
+    overflow: hidden;
+    color: var(--df-review-text);
+    font-size: var(--df-review-font-size-lg);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .df-review-section-outline-head small {
+    overflow: hidden;
+    color: var(--df-review-muted);
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .df-review-section-outline-filter {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr) auto;
+    align-items: center;
+    align-self: stretch;
+    gap: 8px;
+    min-width: 0;
+    height: var(--df-review-control-height-md);
+    min-height: var(--df-review-control-height-md);
+    border: 1px solid var(--df-review-line-soft);
+    border-radius: var(--df-review-radius-md);
+    padding: 0 7px 0 11px;
+    color: var(--df-review-muted);
+    background: var(--df-review-control);
+    box-shadow: var(--df-review-shadow-control);
+  }
+  .df-review-section-outline-filter:focus-within {
+    border-color: var(--df-review-accent);
+    box-shadow: inset 0 0 0 1px var(--df-review-accent-hover);
+  }
+  .df-review-section-outline-filter svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.9;
+  }
+  .df-review-section-outline-filter input {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    color: var(--df-review-text);
+    background: transparent;
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
+    outline: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .df-review-section-outline-filter input::placeholder {
+    color: var(--df-review-subtle);
+  }
+  .df-review-section-outline-filter input::-webkit-search-cancel-button,
+  .df-review-section-outline-filter input::-webkit-search-decoration {
+    display: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .df-review-section-outline-filter-clear {
+    display: inline-grid;
+    place-items: center;
+    width: var(--df-review-control-height-md);
+    height: var(--df-review-control-height-md);
+    border: 0;
+    border-radius: var(--df-review-radius-sm);
+    padding: 0;
+    color: var(--df-review-muted);
+    background: transparent;
+    cursor: pointer;
+  }
+  .df-review-section-outline-filter-clear:hover,
+  .df-review-section-outline-filter-clear:focus-visible {
+    color: var(--df-review-text);
+    background: var(--df-review-accent-soft);
+    outline: 0;
+  }
+  .df-review-section-outline-list {
+    display: grid;
+    align-content: start;
+    gap: 2px;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 8px 1px 8px 15px;
+    scrollbar-gutter: stable;
+  }
+  .df-review-section-outline-item {
+    display: grid;
+  }
+  .df-review-section-outline-item.is-depth-1:not(:last-child) {
+    margin-bottom: 7px;
+    padding-bottom: 7px;
+    border-bottom: 1px solid var(--df-review-line-soft);
+  }
+  .df-review-section-outline-row {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 5px;
+    border-radius: var(--df-review-radius-sm);
+    padding: 7px 6px;
+  }
+  .df-review-section-outline-row:hover {
+    background: var(--df-review-accent-soft);
+  }
+  .df-review-section-outline-toggle {
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    border: 0;
+    border-radius: var(--df-review-radius-sm);
+    padding: 0;
+    color: var(--df-review-muted);
+    background: transparent;
+  }
+  .df-review-section-outline-toggle:hover {
+    color: var(--df-review-text);
+    background: var(--df-review-accent-soft);
+  }
+  .df-review-section-outline-toggle svg {
+    width: 13px;
+    height: 13px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2.4;
+    transition: transform 120ms ease;
+  }
+  .df-review-section-outline-toggle.is-collapsed svg {
+    transform: rotate(-90deg);
+  }
+  .df-review-section-outline-toggle.is-placeholder {
+    pointer-events: none;
+  }
+  .df-review-section-outline-name {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+    overflow: visible;
+    border: 0;
+    padding: 0;
+    color: var(--df-review-text);
+    background: transparent;
+    font-size: var(--df-review-font-size-sm);
+    font-weight: 500;
+    text-align: left;
+    white-space: normal;
+    cursor: pointer;
+  }
+  .df-review-section-outline-name span,
+  .df-review-section-outline-name small {
+    overflow: visible;
+    overflow-wrap: anywhere;
+    text-overflow: clip;
+    white-space: normal;
+  }
+  .df-review-section-outline-name small {
+    color: var(--df-review-muted);
+    font-family: var(--df-review-font-mono);
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
+  }
+  .df-review-section-outline-name:hover {
+    color: var(--df-review-accent);
+  }
+  .df-review-section-outline-links {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+  }
+  .df-review-section-outline-divider {
+    color: var(--df-review-subtle);
+    font-size: var(--df-review-font-size-xs);
+    line-height: 1;
+    user-select: none;
+  }
+  .df-review-section-outline-link {
+    display: inline-grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    border: 1px solid transparent;
+    border-radius: var(--df-review-radius-sm);
+    padding: 0;
+    color: var(--df-review-muted);
     background: transparent;
-    font-size: 16px;
-    font-weight: 800;
-    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);
+    cursor: pointer;
+    transition: border-color 140ms ease, background 140ms ease,
+      color 140ms ease, opacity 140ms ease;
   }
-  .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-section-outline-link.is-dom-select {
+    width: 26px;
+    min-width: 26px;
+    padding: 0;
   }
-  .df-review-source-candidate {
-    display: grid;
-    width: 100%;
-    min-height: 54px;
-    border: 0;
-    border-radius: var(--df-review-radius-sm);
-    padding: 6px 30px 6px 8px;
-    color: var(--df-review-source-popover-text);
-    background: transparent;
-    text-align: left;
+  .df-review-section-outline-link.is-dom-select svg {
+    width: 16px;
+    height: 16px;
   }
-  .df-review-source-candidate:hover {
-    background: var(--df-review-source-popover-hover);
+  .df-review-section-outline-link:hover {
+    border-color: rgba(124, 199, 255, 0.34);
+    color: var(--df-review-accent);
+    background: var(--df-review-accent-soft);
   }
-  .df-review-source-candidate-main {
-    display: grid;
-    gap: 2px;
-    min-width: 0;
+  .df-review-section-outline-link svg {
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
   }
-  .df-review-source-candidate-main strong,
-  .df-review-source-candidate-main small {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .df-review-section-outline-link:disabled {
+    color: var(--df-review-subtle);
+    cursor: not-allowed;
+    opacity: 0.42;
   }
-  .df-review-source-candidate-main strong {
-    font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+  .df-review-section-outline-link:disabled:hover {
+    border-color: transparent;
+    color: var(--df-review-subtle);
+    background: transparent;
   }
-  .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.25;
-    white-space: normal;
+  .df-review-section-outline-children {
+    display: grid;
   }
-  .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);
+  .df-review-section-outline-empty {
+    padding: 14px 12px 16px;
+    color: var(--df-review-muted);
+    font-size: var(--df-review-font-size-xs);
+    font-weight: 500;
   }
   .df-review-device-frame {
@@ -2617,13 +3143,13 @@ function ensureReviewShellStyle() {
   .df-review-ruler-frame-label strong {
     color: var(--df-review-color-ruler-label-text);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+    font-weight: 600;
   }
   .df-review-ruler-frame-label span {
     color: var(--df-review-color-ruler-label-text);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+    font-weight: 600;
     opacity: 0.78;
   }
@@ -2636,7 +3162,7 @@ function ensureReviewShellStyle() {
     background: var(--df-review-color-ruler-coord-bg);
     color: var(--df-review-color-ruler-coord-text);
     font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+    font-weight: 600;
     line-height: 1;
     white-space: nowrap;
     pointer-events: none;
@@ -2714,7 +3240,7 @@ function ensureReviewShellStyle() {
     color: var(--df-review-color-ruler-popover-text);
     font-family: var(--df-review-font-mono);
     font-size: var(--df-review-font-size-lg);
-    font-weight: 900;
+    font-weight: 600;
     line-height: 1;
     white-space: nowrap;
     letter-spacing: -0.02em;
@@ -2727,12 +3253,12 @@ function ensureReviewShellStyle() {
 	  @media (max-width: 860px) {
 	    .df-review-shell,
 	    .df-review-shell.is-list-visible {
-	      grid-template-columns: minmax(0, 1fr) 0 32px;
+	      grid-template-columns: minmax(0, 1fr) 0 48px;
 	      grid-template-rows: auto auto minmax(0, 1fr);
 	    }
 	    .df-review-shell.is-list-visible {
-	      grid-template-columns: minmax(0, 1fr) minmax(260px, 70vw) 32px;
+	      grid-template-columns: minmax(0, 1fr) minmax(260px, 70vw) 48px;
 	    }
 	    .df-review-qa-panel {
@@ -2741,7 +3267,7 @@ function ensureReviewShellStyle() {
 	    }
 	    .df-review-tools {
-	      flex-wrap: wrap;
+	      flex-wrap: nowrap;
 	    }
 	    .df-review-tool-controls {
@@ -2771,11 +3297,19 @@ function ensureReviewShellStyle() {
 		      max-height: calc(100vh - 270px);
 		    }
-	    .df-review-panel-body {
-	      min-height: 0;
-	    }
-  }
-    `;
+		    .df-review-panel-body {
+		      min-height: 0;
+		    }
+	  }
+    @media (hover: none) and (pointer: coarse) {
+      .df-review-edit-textarea textarea,
+      .df-review-preset-select,
+      .df-review-prompt-block textarea {
+        font-size: 16px;
+      }
+    }
+	    `;
     document.head.append(style);
   }
 }
@@ -2904,31 +3438,59 @@ var __iconNode = [
 ];
 var Bot = createLucideIcon("bot", __iconNode);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/chevron-down.mjs
+var __iconNode2 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode2);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/circle-question-mark.mjs
-var __iconNode2 = [
+var __iconNode3 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-var CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode2);
+var CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode3);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/code-xml.mjs
+var __iconNode4 = [
+  ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
+  ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
+  ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
+];
+var CodeXml = createLucideIcon("code-xml", __iconNode4);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/copy.mjs
-var __iconNode3 = [
+var __iconNode5 = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-var Copy = createLucideIcon("copy", __iconNode3);
+var Copy = createLucideIcon("copy", __iconNode5);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/database.mjs
+var __iconNode6 = [
+  ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
+  ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
+  ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
+];
+var Database = createLucideIcon("database", __iconNode6);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/ellipsis.mjs
+var __iconNode7 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+var Ellipsis = createLucideIcon("ellipsis", __iconNode7);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/external-link.mjs
-var __iconNode4 = [
+var __iconNode8 = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-var ExternalLink = createLucideIcon("external-link", __iconNode4);
+var ExternalLink = createLucideIcon("external-link", __iconNode8);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/eye-off.mjs
-var __iconNode5 = [
+var __iconNode9 = [
   [
     "path",
     {
@@ -2946,10 +3508,10 @@ var __iconNode5 = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-var EyeOff = createLucideIcon("eye-off", __iconNode5);
+var EyeOff = createLucideIcon("eye-off", __iconNode9);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/eye.mjs
-var __iconNode6 = [
+var __iconNode10 = [
   [
     "path",
     {
@@ -2959,54 +3521,59 @@ var __iconNode6 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-var Eye = createLucideIcon("eye", __iconNode6);
+var Eye = createLucideIcon("eye", __iconNode10);
-// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/grip-vertical.mjs
-var __iconNode7 = [
-  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
-  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
-  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
-  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
-  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
-  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/file-text.mjs
+var __iconNode11 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-var GripVertical = createLucideIcon("grip-vertical", __iconNode7);
+var FileText = createLucideIcon("file-text", __iconNode11);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/image.mjs
-var __iconNode8 = [
+var __iconNode12 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-var Image = createLucideIcon("image", __iconNode8);
+var Image = createLucideIcon("image", __iconNode12);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/layout-grid.mjs
-var __iconNode9 = [
+var __iconNode13 = [
   ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
   ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
   ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
   ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
 ];
-var LayoutGrid = createLucideIcon("layout-grid", __iconNode9);
+var LayoutGrid = createLucideIcon("layout-grid", __iconNode13);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/link-2.mjs
-var __iconNode10 = [
+var __iconNode14 = [
   ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
   ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
   ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
 ];
-var Link2 = createLucideIcon("link-2", __iconNode10);
+var Link2 = createLucideIcon("link-2", __iconNode14);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/list-filter.mjs
-var __iconNode11 = [
+var __iconNode15 = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-var ListFilter = createLucideIcon("list-filter", __iconNode11);
+var ListFilter = createLucideIcon("list-filter", __iconNode15);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/map.mjs
-var __iconNode12 = [
+var __iconNode16 = [
   [
     "path",
     {
@@ -3017,27 +3584,39 @@ var __iconNode12 = [
   ["path", { d: "M15 5.764v15", key: "1pn4in" }],
   ["path", { d: "M9 3.236v15", key: "1uimfh" }]
 ];
-var Map2 = createLucideIcon("map", __iconNode12);
+var Map2 = createLucideIcon("map", __iconNode16);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/maximize-2.mjs
-var __iconNode13 = [
+var __iconNode17 = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "m21 3-7 7", key: "1l2asr" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
 ];
-var Maximize2 = createLucideIcon("maximize-2", __iconNode13);
+var Maximize2 = createLucideIcon("maximize-2", __iconNode17);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/monitor.mjs
-var __iconNode14 = [
+var __iconNode18 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-var Monitor = createLucideIcon("monitor", __iconNode14);
+var Monitor = createLucideIcon("monitor", __iconNode18);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/moon.mjs
+var __iconNode19 = [
+  [
+    "path",
+    {
+      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+      key: "kfwtm"
+    }
+  ]
+];
+var Moon = createLucideIcon("moon", __iconNode19);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/pencil.mjs
-var __iconNode15 = [
+var __iconNode20 = [
   [
     "path",
     {
@@ -3047,25 +3626,25 @@ var __iconNode15 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-var Pencil = createLucideIcon("pencil", __iconNode15);
+var Pencil = createLucideIcon("pencil", __iconNode20);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/rectangle-horizontal.mjs
-var __iconNode16 = [
+var __iconNode21 = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
 ];
-var RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode16);
+var RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode21);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/refresh-cw.mjs
-var __iconNode17 = [
+var __iconNode22 = [
   ["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", __iconNode17);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode22);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/ruler.mjs
-var __iconNode18 = [
+var __iconNode23 = [
   [
     "path",
     {
@@ -3078,19 +3657,26 @@ var __iconNode18 = [
   ["path", { d: "m8.5 6.5 2-2", key: "vc6u1g" }],
   ["path", { d: "m17.5 15.5 2-2", key: "wo5hmg" }]
 ];
-var Ruler = createLucideIcon("ruler", __iconNode18);
+var Ruler = createLucideIcon("ruler", __iconNode23);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/scan.mjs
-var __iconNode19 = [
+var __iconNode24 = [
   ["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", __iconNode19);
+var Scan = createLucideIcon("scan", __iconNode24);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/search.mjs
+var __iconNode25 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+var Search = createLucideIcon("search", __iconNode25);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/settings.mjs
-var __iconNode20 = [
+var __iconNode26 = [
   [
     "path",
     {
@@ -3100,17 +3686,17 @@ var __iconNode20 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-var Settings = createLucideIcon("settings", __iconNode20);
+var Settings = createLucideIcon("settings", __iconNode26);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/smartphone.mjs
-var __iconNode21 = [
+var __iconNode27 = [
   ["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", __iconNode21);
+var Smartphone = createLucideIcon("smartphone", __iconNode27);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/square-mouse-pointer.mjs
-var __iconNode22 = [
+var __iconNode28 = [
   [
     "path",
     {
@@ -3120,10 +3706,10 @@ var __iconNode22 = [
   ],
   ["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", __iconNode22);
+var SquareMousePointer = createLucideIcon("square-mouse-pointer", __iconNode28);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/sticky-note.mjs
-var __iconNode23 = [
+var __iconNode29 = [
   [
     "path",
     {
@@ -3133,22 +3719,43 @@ var __iconNode23 = [
   ],
   ["path", { d: "M15 3v5a1 1 0 0 0 1 1h5", key: "6s6qgf" }]
 ];
-var StickyNote = createLucideIcon("sticky-note", __iconNode23);
+var StickyNote = createLucideIcon("sticky-note", __iconNode29);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/sun.mjs
+var __iconNode30 = [
+  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["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", __iconNode30);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/upload.mjs
-var __iconNode24 = [
+var __iconNode31 = [
   ["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", __iconNode24);
+var Upload = createLucideIcon("upload", __iconNode31);
+// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/user-round.mjs
+var __iconNode32 = [
+  ["circle", { cx: "12", cy: "8", r: "5", key: "1hypcn" }],
+  ["path", { d: "M20 21a8 8 0 0 0-16 0", key: "rfgkzh" }]
+];
+var UserRound = createLucideIcon("user-round", __iconNode32);
 // node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/x.mjs
-var __iconNode25 = [
+var __iconNode33 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode25);
+var X = createLucideIcon("x", __iconNode33);
 // src/react-shell/constants.ts
 var REVIEW_QA_FILTERS = [
@@ -3657,6 +4264,11 @@ var getSystemReviewTheme = () => {
 // src/react-shell/review/settings.modal.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var getReviewThemeIcon = (theme) => {
+  if (theme === "light") return Sun;
+  if (theme === "system") return Monitor;
+  return Moon;
+};
 var ReviewSettingsModal = ({
   figmaTokenDraft,
   reviewUserIdDraft,
@@ -3716,20 +4328,28 @@ var ReviewSettingsModal = ({
               /* @__PURE__ */ jsxs2("div", { className: "df-review-settings-body", children: [
                 /* @__PURE__ */ jsxs2("div", { className: "df-review-settings-row", children: [
                   /* @__PURE__ */ jsx2("span", { children: "Theme" }),
-                  /* @__PURE__ */ jsx2("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      "aria-pressed": reviewThemeDraft === option.value,
-                      className: `df-review-settings-theme-option${reviewThemeDraft === option.value ? " is-active" : ""}`,
-                      type: "button",
-                      onClick: () => {
-                        onReviewThemeDraftChange(normalizeReviewTheme(option.value));
-                        onClearStatus();
+                  /* @__PURE__ */ jsx2("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => {
+                    const ThemeIcon = getReviewThemeIcon(option.value);
+                    return /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        "aria-pressed": reviewThemeDraft === option.value,
+                        className: `df-review-settings-theme-option${reviewThemeDraft === option.value ? " is-active" : ""}`,
+                        type: "button",
+                        onClick: () => {
+                          onReviewThemeDraftChange(
+                            normalizeReviewTheme(option.value)
+                          );
+                          onClearStatus();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2(ThemeIcon, { "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx2("span", { children: option.label })
+                        ]
                       },
-                      children: option.label
-                    },
-                    option.value
-                  )) })
+                      option.value
+                    );
+                  }) })
                 ] }),
                 /* @__PURE__ */ jsxs2("div", { className: "df-review-settings-field", children: [
                   /* @__PURE__ */ jsxs2("div", { className: "df-review-settings-label-row", children: [
@@ -4907,6 +5527,33 @@ var QaPanelHeader = ({
           }
         )
       ] }),
+      /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          "aria-label": "QA status filter",
+          className: "df-review-status-filter-select",
+          value: qaStatusFilter,
+          onChange: (event) => onQaStatusFilterChange(
+            event.currentTarget.value
+          ),
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "all", children: `All status (${qaStatusFilterCounts.get("all") ?? 0})` }),
+            statusFilterOptions.map((statusOption) => /* @__PURE__ */ jsx9("option", { value: statusOption.value, children: `${statusOption.label} (${qaStatusFilterCounts.get(statusOption.value) ?? 0})` }, statusOption.value))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "df-review-list-title", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "df-review-list-meta", children: [
+        /* @__PURE__ */ jsx9("span", { children: isAllQaVisible ? `${label} QA \xB7 All pages` : `${label} QA` }),
+        /* @__PURE__ */ jsx9(
+          "strong",
+          {
+            title: `${activeRemainingItemCount} remaining of ${activeItemCount}`,
+            children: !hasActiveFilter ? `${activeRemainingItemCount}/${activeItemCount}` : `${filteredItemCount}/${activeItemCount}`
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx9("div", { className: "df-review-filter-tabs", "aria-label": "QA filters", children: REVIEW_QA_FILTERS.map((filter) => {
         const count = qaFilterCounts.get(filter.key) ?? 0;
         const isActive = qaFilter === filter.key;
@@ -4923,25 +5570,6 @@ var QaPanelHeader = ({
           filter.key
         );
       }) })
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "df-review-list-title", children: [
-      /* @__PURE__ */ jsx9("span", { children: isAllQaVisible ? `${label} QA \xB7 All pages` : `${label} QA` }),
-      /* @__PURE__ */ jsx9("strong", { title: `${activeRemainingItemCount} remaining of ${activeItemCount}`, children: !hasActiveFilter ? `${activeRemainingItemCount}/${activeItemCount}` : `${filteredItemCount}/${activeItemCount}` }),
-      /* @__PURE__ */ jsxs7(
-        "select",
-        {
-          "aria-label": "QA status filter",
-          className: "df-review-status-filter-select",
-          value: qaStatusFilter,
-          onChange: (event) => onQaStatusFilterChange(
-            event.currentTarget.value
-          ),
-          children: [
-            /* @__PURE__ */ jsx9("option", { value: "all", children: `All status (${qaStatusFilterCounts.get("all") ?? 0})` }),
-            statusFilterOptions.map((statusOption) => /* @__PURE__ */ jsx9("option", { value: statusOption.value, children: `${statusOption.label} (${qaStatusFilterCounts.get(statusOption.value) ?? 0})` }, statusOption.value))
-          ]
-        }
-      )
     ] })
   ] });
 };
@@ -5067,7 +5695,6 @@ var ReviewQaPanel = ({
 // src/react-shell/presence/overlay.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var COLLAPSED_USER_COUNT = 1;
 var getPresenceName = (user) => user.displayName || user.userId;
 var PresenceOverlay = ({
   presenceSessionId,
@@ -5075,18 +5702,31 @@ var PresenceOverlay = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState3(false);
   if (users.length === 0) return null;
-  const visibleUsers = isExpanded ? users : users.slice(0, COLLAPSED_USER_COUNT);
-  const hiddenUserCount = users.length - visibleUsers.length;
   return /* @__PURE__ */ jsxs9(
     "div",
     {
       "aria-label": `Review presence, ${users.length} online`,
       className: `df-review-presence-overlay${isExpanded ? " is-expanded" : ""}`,
       children: [
-        visibleUsers.map((user) => /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            "aria-label": `Show online reviewers, ${users.length} online`,
+            "aria-expanded": isExpanded,
+            className: "df-review-presence-button",
+            type: "button",
+            onClick: () => setIsExpanded((current) => !current),
+            children: [
+              /* @__PURE__ */ jsx11(UserRound, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx11("span", { className: "df-review-presence-badge", children: users.length })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx11("div", { className: "df-review-presence-list", role: "list", children: users.map((user) => /* @__PURE__ */ jsx11(
           "span",
           {
             className: `df-review-presence-chip${user.sessionId === presenceSessionId ? " is-self" : ""}`,
+            role: "listitem",
             style: {
               "--df-review-presence-color": user.color
             },
@@ -5094,21 +5734,7 @@ var PresenceOverlay = ({
             children: getPresenceName(user)
           },
           user.sessionId
-        )),
-        hiddenUserCount > 0 && /* @__PURE__ */ jsxs9(
-          "button",
-          {
-            "aria-label": `Show ${hiddenUserCount} more online reviewers`,
-            "aria-expanded": isExpanded,
-            className: "df-review-presence-more",
-            type: "button",
-            onClick: () => setIsExpanded(true),
-            children: [
-              "+",
-              hiddenUserCount
-            ]
-          }
-        )
+        )) })
       ]
     }
   );
@@ -5125,28 +5751,173 @@ var SOURCE_SELECTOR = [
   "[data-section-index]",
   "[data-section-id]"
 ].join(", ");
-var getSourceCandidates = (target) => {
+var SECTION_OUTLINE_ROOT_SELECTOR = [
+  "[data-wrk-source-component]",
+  "header[data-wrk-source-file]",
+  "footer[data-wrk-source-file]",
+  '[role="banner"][data-wrk-source-file]',
+  '[role="contentinfo"][data-wrk-source-file]'
+].join(", ");
+var matchesIgnore = (file, patterns) => {
+  const normalized = file.replace(/\\/g, "/");
+  return patterns.some(
+    (pattern) => typeof pattern === "string" ? normalized.includes(pattern) : pattern.test(normalized)
+  );
+};
+var getSourceCandidates = (target, options) => {
   const startElement = getEventElement(target);
   if (!startElement) return [];
   const candidates = [];
   const seen = /* @__PURE__ */ new Set();
+  const add = (element2, source, depth2, kind) => {
+    if (!source?.file) return;
+    const key = getSourceFileCompareKey(source.file);
+    if (!addSourceFileCompareKey(seen, key)) return;
+    candidates.push(createSourceCandidate(element2, source, depth2, kind));
+  };
   let element = startElement;
   let depth = 0;
   while (element && element.nodeType === 1) {
-    const source = getSourceHintFromElement(element);
-    if (source?.file) {
-      const key = getSourceCandidateKey(source);
-      if (!seen.has(key)) {
-        seen.add(key);
-        candidates.push(createSourceCandidate(element, source, depth));
-      }
-    }
+    add(element, getSourceHintFromElement(element), depth, "source");
+    add(element, getDataHintFromElement(element), 0, "data");
     if (element === element.ownerDocument.documentElement) break;
     element = element.parentElement;
     depth += 1;
   }
-  return candidates.slice(0, 8);
-};
+  const ignore = options?.ignore;
+  const visible = candidates.filter(
+    (candidate) => !isCoreOutlineNode(candidate.label, candidate.source.file) && !(ignore?.length && matchesIgnore(candidate.source.file ?? "", ignore))
+  );
+  return visible.slice(0, 8);
+};
+var getSectionOutline = (root, options) => {
+  const maxDepth = options?.maxDepth ?? 9;
+  return getSectionOutlineRoots(root, options).map((element, index) => {
+    const source = getSourceHintFromElement(element);
+    const label = getOutlineLabel(element, source, "section");
+    const seen = /* @__PURE__ */ new Set();
+    if (source?.file) {
+      addSourceFileCompareKey(seen, getOutlineSourceKey(source));
+    }
+    return {
+      id: `${label}-${index}`,
+      label,
+      depth: 1,
+      filePath: getDisplaySourcePath(source?.file) ?? label,
+      element,
+      source,
+      data: getDataHintFromElement(element),
+      children: getSectionOutlineChildren(
+        element,
+        2,
+        maxDepth,
+        seen,
+        options
+      )
+    };
+  });
+};
+function getSectionOutlineRoots(root, options) {
+  return Array.from(root.querySelectorAll(SECTION_OUTLINE_ROOT_SELECTOR)).filter(
+    (element) => {
+      const source = getSourceHintFromElement(element);
+      const label = getOutlineLabel(element, source, "");
+      return !isSkippedOutlineNode(label, source?.file, options);
+    }
+  );
+}
+function getSectionOutlineChildren(parent, depth, maxDepth, seen, options) {
+  if (depth > maxDepth) return [];
+  const entries = [];
+  for (const child of Array.from(parent.children)) {
+    const source = getSourceHintFromElement(child);
+    const label = getOutlineLabel(child, source, child.tagName.toLowerCase());
+    const sourceKey = source?.file ? getOutlineSourceKey(source) : "";
+    const isNewSource = Boolean(sourceKey) && !hasEquivalentSourceFileKey(seen, sourceKey);
+    if (shouldStopOutlineBranch(label, source?.file, options)) continue;
+    if (isHiddenOutlineNode(label, source?.file, options)) {
+      entries.push(
+        ...getSectionOutlineChildren(child, depth, maxDepth, seen, options)
+      );
+      continue;
+    }
+    if (source?.file && isNewSource) {
+      const childSeen = new Set(seen);
+      addSourceFileCompareKey(childSeen, sourceKey);
+      entries.push({
+        id: `${sourceKey}-${getElementOutlinePath(child)}-${entries.length}`,
+        label,
+        depth,
+        filePath: getDisplaySourcePath(source.file) ?? source.file,
+        element: child,
+        source,
+        data: getDataHintFromElement(child),
+        children: getSectionOutlineChildren(
+          child,
+          depth + 1,
+          maxDepth,
+          childSeen,
+          options
+        )
+      });
+      continue;
+    }
+    entries.push(
+      ...getSectionOutlineChildren(child, depth, maxDepth, seen, options)
+    );
+  }
+  return entries;
+}
+function getElementOutlinePath(element) {
+  const indices = [];
+  let current = element;
+  while (current?.parentElement) {
+    indices.unshift(Array.from(current.parentElement.children).indexOf(current));
+    current = current.parentElement;
+  }
+  return indices.join("-");
+}
+function getOutlineSourceKey(source) {
+  return getSourceFileCompareKey(source.file);
+}
+function getSourceFileCompareKey(file) {
+  return file?.trim().replace(/\\/g, "/") ?? "";
+}
+function addSourceFileCompareKey(seen, key) {
+  if (!key || hasEquivalentSourceFileKey(seen, key)) return false;
+  seen.add(key);
+  return true;
+}
+function hasEquivalentSourceFileKey(seen, key) {
+  for (const seenKey of seen) {
+    if (isEquivalentSourceFileKey(seenKey, key)) return true;
+  }
+  return false;
+}
+function isEquivalentSourceFileKey(a, b) {
+  return a === b || a.endsWith(`/${b}`) || b.endsWith(`/${a}`);
+}
+function getOutlineLabel(element, source, fallback) {
+  return source?.component?.trim() || getComponentNameFromSourceFile(source?.file) || element.id.trim() || fallback;
+}
+function isHiddenOutlineNode(label, file, options) {
+  const ignore = options?.ignore;
+  const isIgnoredSource = file && ignore?.length ? matchesIgnore(file, ignore) : false;
+  return isCoreOutlineNode(label, file) || isIgnoredSource;
+}
+function shouldStopOutlineBranch(label, file, options) {
+  return !options?.includePlacer && isPlacerOutlineNode(label, file);
+}
+function isSkippedOutlineNode(label, file, options) {
+  return shouldStopOutlineBranch(label, file, options) || isHiddenOutlineNode(label, file, options);
+}
+function isCoreOutlineNode(label, file) {
+  const text = `${label} ${file ?? ""}`.toLowerCase();
+  return text.includes("core.section") || text.includes("core.content") || text.includes("core.column") || ["coresection", "corecontent", "corecolumn"].includes(label.toLowerCase());
+}
+function isPlacerOutlineNode(label, file) {
+  return `${label} ${file ?? ""}`.toLowerCase().includes("placer");
+}
 var getSourceOpenUrl = (source, options) => {
   const normalizedOptions = normalizeSourceOpenOptions(options);
   const file = source?.file?.trim();
@@ -5185,6 +5956,18 @@ var openSourceInEditor = (source, options) => {
   window.open(url, "_blank", "noreferrer");
   return true;
 };
+function getDataHintFromElement(element) {
+  const file = getSourceAttribute(element, "data-wrk-data-file");
+  if (!file) return void 0;
+  return {
+    component: void 0,
+    file,
+    line: getSourceAttribute(element, "data-wrk-data-line"),
+    column: void 0,
+    sectionId: void 0,
+    sectionIndex: void 0
+  };
+}
 function getSourceHintFromElement(element) {
   const source = {
     component: getSourceAttribute(
@@ -5200,7 +5983,7 @@ function getSourceHintFromElement(element) {
   };
   return Object.values(source).some(Boolean) ? source : void 0;
 }
-function createSourceCandidate(element, source, depth) {
+function createSourceCandidate(element, source, depth, kind) {
   const confidence = getSourceConfidence(source, depth);
   const fileName = source.file?.split(/[\\/]/).pop() ?? source.file ?? "source";
   const component = source.component?.trim();
@@ -5210,7 +5993,7 @@ function createSourceCandidate(element, source, depth) {
   const column = getSourcePosition(source.column);
   const position = line ? `:${line}${column ? `:${column}` : ""}` : "";
   return {
-    id: getSourceCandidateKey(source),
+    id: `${kind}:${getSourceCandidateKey(source)}`,
     depth,
     element,
     filePath: getDisplaySourcePath(source.file) ?? fileName,
@@ -5219,6 +6002,7 @@ function createSourceCandidate(element, source, depth) {
     positionLabel: line ? `${line}:${column ?? 1}` : "",
     confidence,
     confidenceLabel: confidence >= 0.82 ? "high" : confidence >= 0.58 ? "medium" : "low",
+    kind,
     usesPosition: confidence >= 0.72 && Boolean(line),
     source
   };
@@ -5242,7 +6026,7 @@ function getDisplaySourcePath(file) {
   const normalizedFile = file?.trim().replace(/\\/g, "/");
   if (!normalizedFile) return void 0;
   const sourceRootMatch = normalizedFile.match(
-    /(?:^|\/)((?:dev\/)?src\/.+|app\/.+|pages\/.+|components\/.+)$/
+    /(?:^|\/)((?:dev\/)?src\/.+|app\/.+|pages?\/.+|components\/.+)$/
   );
   return sourceRootMatch?.[1] ?? normalizedFile;
 }
@@ -5733,6 +6517,7 @@ var ViewportPresetIcon = ({
 }) => {
   return /* @__PURE__ */ jsx16(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
 };
+var getPresetSelectValue = (preset) => `${preset.label}:${preset.width}x${preset.height}`;
 var ReviewTopbar = ({
   draftTarget,
   copyLabel,
@@ -5753,6 +6538,13 @@ var ReviewTopbar = ({
   onOpenInitialPrompt,
   onOpenSettings
 }) => {
+  const selectedPresetValue = getPresetSelectValue(size);
+  const handlePresetSelectChange = (event) => {
+    const nextPreset = viewportPresets.find(
+      (preset) => getPresetSelectValue(preset) === event.currentTarget.value
+    );
+    if (nextPreset) onSizeChange(nextPreset);
+  };
   return /* @__PURE__ */ jsxs14("header", { className: "df-review-topbar", children: [
     /* @__PURE__ */ jsxs14(
       "form",
@@ -5802,6 +6594,27 @@ var ReviewTopbar = ({
           },
           preset.label
         )) }),
+        /* @__PURE__ */ jsx16(
+          "select",
+          {
+            "aria-label": "Viewport preset",
+            className: "df-review-preset-select",
+            value: selectedPresetValue,
+            onChange: handlePresetSelectChange,
+            children: viewportPresets.map((preset) => {
+              const scope = getViewportPresetKind(preset);
+              const count = presetScopeCounts.get(scope) ?? 0;
+              return /* @__PURE__ */ jsx16(
+                "option",
+                {
+                  value: getPresetSelectValue(preset),
+                  children: `${preset.label} (${count})`
+                },
+                getPresetSelectValue(preset)
+              );
+            })
+          }
+        ),
         /* @__PURE__ */ jsx16("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
         /* @__PURE__ */ jsxs14("span", { className: "df-review-active-size", children: [
           size.width,
@@ -5863,6 +6676,64 @@ var ReviewTopbar = ({
             children: /* @__PURE__ */ jsx16(Settings, { "aria-hidden": "true" })
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxs14("details", { className: "df-review-overlays-menu", children: [
+        /* @__PURE__ */ jsx16("summary", { "aria-label": "Open target tools", title: "Tools", children: /* @__PURE__ */ jsx16(Ellipsis, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs14("div", { className: "df-review-overlays-popover", "aria-label": "Target tools", children: [
+          isRulerAvailable && /* @__PURE__ */ jsx16(
+            "button",
+            {
+              "aria-label": "Toggle ruler",
+              className: `df-review-overlay-button is-ruler${isRulerVisible ? " is-active" : ""}`,
+              type: "button",
+              onClick: onToggleRuler,
+              children: /* @__PURE__ */ jsx16(Ruler, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              "aria-label": "Toggle grid overlay",
+              className: `df-review-overlay-button is-grid${targetOverlayState.grid ? " is-active" : ""}`,
+              type: "button",
+              onClick: () => onToggleTargetOverlay("grid"),
+              children: /* @__PURE__ */ jsx16(LayoutGrid, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              "aria-disabled": !isFigmaOverlayAvailable,
+              "aria-label": isFigmaOverlayAvailable ? "Toggle Figma overlay" : FIGMA_OVERLAY_UNAVAILABLE_MESSAGE,
+              className: `df-review-overlay-button is-figma${targetOverlayState.figma ? " is-active" : ""}${isFigmaOverlayAvailable ? "" : " is-disabled"}`,
+              disabled: !isFigmaOverlayAvailable,
+              type: "button",
+              onClick: () => onToggleTargetOverlay("figma"),
+              children: /* @__PURE__ */ jsx16(Image, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx16("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              "aria-label": "Open initial prompt",
+              className: "df-review-overlay-button is-prompt",
+              type: "button",
+              onClick: onOpenInitialPrompt,
+              children: /* @__PURE__ */ jsx16(CircleQuestionMark, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              "aria-label": "Open settings",
+              className: "df-review-overlay-button is-settings",
+              type: "button",
+              onClick: onOpenSettings,
+              children: /* @__PURE__ */ jsx16(Settings, { "aria-hidden": "true" })
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -5877,7 +6748,7 @@ import {
 import {
   useCallback
 } from "react";
-function runWithAutoScrollBehavior(targetDocument, callback) {
+function runWithAutoScrollBehavior2(targetDocument, callback) {
   const elements = [
     targetDocument?.documentElement,
     targetDocument?.body
@@ -5978,7 +6849,7 @@ var useReviewItemRestore = ({
         isCurrentRestore
       );
       if (!isCurrentRestore()) return false;
-      runWithAutoScrollBehavior(targetDocument, () => {
+      runWithAutoScrollBehavior2(targetDocument, () => {
         setDocumentScrollInstantly(
           targetWindow,
           targetDocument,
@@ -7464,8 +8335,18 @@ var useReviewShellData = ({
     [qaStatusFilter, scopeFilteredNumberedActiveItems]
   );
   const hiddenOverlayItemIdList = useMemo5(
-    () => Array.from(hiddenOverlayItemIds),
-    [hiddenOverlayItemIds]
+    () => {
+      const nextHiddenItemIds = new Set(hiddenOverlayItemIds);
+      if (qaStatusFilter !== "all") {
+        activeItems.forEach((item) => {
+          if (normalizeReviewItemStatus(item.status) !== qaStatusFilter) {
+            nextHiddenItemIds.add(item.id);
+          }
+        });
+      }
+      return Array.from(nextHiddenItemIds);
+    },
+    [activeItems, hiddenOverlayItemIds, qaStatusFilter]
   );
   const qaFilterCounts = useMemo5(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -8203,6 +9084,112 @@ var getReviewModeWriteMode = (mode) => {
 var SOURCE_PANEL_MAX_WIDTH = 440;
 var SOURCE_PANEL_MIN_WIDTH = 240;
 var SOURCE_PANEL_MAX_HEIGHT = 260;
+var SOURCE_TREE_PANEL_CLOSE_DELAY_MS = 180;
+var waitForFrame = (targetWindow) => new Promise((resolve) => {
+  (targetWindow ?? window).requestAnimationFrame(() => resolve());
+});
+var waitForMs = (ms) => new Promise((resolve) => {
+  window.setTimeout(resolve, ms);
+});
+var getScrollElement = (targetDocument) => targetDocument.scrollingElement;
+var scrollElementInTarget = (element, block) => {
+  const targetWindow = element.ownerDocument.defaultView;
+  if (!targetWindow) return;
+  const targetDocument = element.ownerDocument;
+  const scrollElement = getScrollElement(targetDocument);
+  const rect = element.getBoundingClientRect();
+  const currentLeft = scrollElement?.scrollLeft ?? targetWindow.scrollX;
+  const currentTop = scrollElement?.scrollTop ?? targetWindow.scrollY;
+  const clientWidth = scrollElement?.clientWidth ?? targetWindow.innerWidth;
+  const clientHeight = scrollElement?.clientHeight ?? targetWindow.innerHeight;
+  const scrollWidth = scrollElement?.scrollWidth ?? targetDocument.documentElement.scrollWidth;
+  const scrollHeight = scrollElement?.scrollHeight ?? targetDocument.documentElement.scrollHeight;
+  const nextLeft = clamp(
+    currentLeft + rect.left + rect.width / 2 - clientWidth / 2,
+    0,
+    Math.max(0, scrollWidth - clientWidth)
+  );
+  const nextTop = block === "center" ? clamp(
+    currentTop + rect.top + rect.height / 2 - clientHeight / 2,
+    0,
+    Math.max(0, scrollHeight - clientHeight)
+  ) : clamp(
+    currentTop + rect.top,
+    0,
+    Math.max(0, scrollHeight - clientHeight)
+  );
+  runWithAutoScrollBehavior(targetDocument, () => {
+    if (scrollElement) {
+      scrollElement.scrollLeft = Math.round(nextLeft);
+      scrollElement.scrollTop = Math.round(nextTop);
+      return;
+    }
+    targetWindow.scrollTo(Math.round(nextLeft), Math.round(nextTop));
+  });
+};
+var centerFrameScrollOnElement = (frameScroll, frame, element) => {
+  if (!frameScroll || !frame) return;
+  const frameScrollRect = frameScroll.getBoundingClientRect();
+  const frameRect = frame.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  const elementHostCenterX = frameRect.left + elementRect.left + elementRect.width / 2;
+  const elementHostCenterY = frameRect.top + elementRect.top + elementRect.height / 2;
+  const visibleCenterX = frameScrollRect.left + frameScrollRect.width / 2;
+  const visibleCenterY = frameScrollRect.top + frameScrollRect.height / 2;
+  const nextLeft = clamp(
+    frameScroll.scrollLeft + elementHostCenterX - visibleCenterX,
+    0,
+    Math.max(0, frameScroll.scrollWidth - frameScroll.clientWidth)
+  );
+  const nextTop = clamp(
+    frameScroll.scrollTop + elementHostCenterY - visibleCenterY,
+    0,
+    Math.max(0, frameScroll.scrollHeight - frameScroll.clientHeight)
+  );
+  const previousScrollBehavior = frameScroll.style.scrollBehavior;
+  frameScroll.style.scrollBehavior = "auto";
+  frameScroll.scrollLeft = Math.round(nextLeft);
+  frameScroll.scrollTop = Math.round(nextTop);
+  frameScroll.style.scrollBehavior = previousScrollBehavior;
+};
+var getSectionOutlineFilterTerms = (value) => value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+var getSectionOutlineEntryCount = (entries) => entries.reduce(
+  (count, entry) => count + 1 + getSectionOutlineEntryCount(entry.children),
+  0
+);
+var DEFAULT_COLLAPSED_ROOT_LABELS = /* @__PURE__ */ new Set(["FrameHeader", "FrameFooter"]);
+var getDefaultCollapsedSectionOutlineIds = (entries) => {
+  const collapsedIds = /* @__PURE__ */ new Set();
+  const visit = (entry) => {
+    const shouldCollapseRoot = entry.depth === 1 && DEFAULT_COLLAPSED_ROOT_LABELS.has(entry.label);
+    if ((entry.depth >= 2 || shouldCollapseRoot) && entry.children.length > 0) {
+      collapsedIds.add(entry.id);
+    }
+    entry.children.forEach(visit);
+  };
+  entries.forEach(visit);
+  return collapsedIds;
+};
+var matchesSectionOutlineFilter = (entry, terms) => {
+  if (terms.length === 0) return true;
+  const text = [
+    entry.label,
+    entry.filePath,
+    entry.source?.file,
+    entry.data?.file
+  ].filter(Boolean).join(" ").toLowerCase();
+  return terms.every((term) => text.includes(term));
+};
+var filterSectionOutlineEntries = (entries, terms) => {
+  if (terms.length === 0) return entries;
+  return entries.flatMap((entry) => {
+    const children = filterSectionOutlineEntries(entry.children, terms);
+    if (!matchesSectionOutlineFilter(entry, terms) && children.length === 0) {
+      return [];
+    }
+    return [{ ...entry, children }];
+  });
+};
 var ReviewShell = ({
   projectId,
   pages,
@@ -8274,7 +9261,11 @@ var ReviewShell = ({
   });
   const sourceShortcutCleanupRef = useRef5(null);
   const sourceInspectorInteractionRef = useRef5(false);
+  const [sidePanel, setSidePanel] = useState10("qa");
   const [sourceInspectorState, setSourceInspectorState] = useState10(null);
+  const [sectionOutline, setSectionOutline] = useState10(null);
+  const [sectionOutlineFilter, setSectionOutlineFilter] = useState10("");
+  const [collapsedSectionOutlineIds, setCollapsedSectionOutlineIds] = useState10(() => /* @__PURE__ */ new Set());
   const [isAllQaVisible, setIsAllQaVisible] = useState10(false);
   const sourceOpenOptions = useMemo7(
     () => ({
@@ -8283,7 +9274,42 @@ var ReviewShell = ({
     }),
     [sourceInspector, sourceRoot]
   );
+  const sourceCandidateOptions = useMemo7(
+    () => ({
+      ignore: sourceInspector?.ignore,
+      includePlacer: sourceInspector?.includePlacer
+    }),
+    [sourceInspector]
+  );
+  const sectionOutlineOptions = useMemo7(
+    () => ({
+      includePlacer: sourceInspector?.includePlacer,
+      ignore: sourceInspector?.ignore,
+      maxDepth: sourceInspector?.maxDepth
+    }),
+    [sourceInspector]
+  );
   const isSourceInspectorEnabled = sourceInspector?.enabled !== false;
+  const isSourceTreeHoverOutlineEnabled = sourceInspector?.hoverOutline !== false;
+  const isQaPanelVisible = isListVisible && sidePanel === "qa";
+  const isSourceTreePanelVisible = isSourceInspectorEnabled && isListVisible && sidePanel === "source";
+  const sectionOutlineFilterTerms = useMemo7(
+    () => getSectionOutlineFilterTerms(sectionOutlineFilter),
+    [sectionOutlineFilter]
+  );
+  const filteredSectionOutline = useMemo7(
+    () => sectionOutline ? filterSectionOutlineEntries(sectionOutline, sectionOutlineFilterTerms) : [],
+    [sectionOutline, sectionOutlineFilterTerms]
+  );
+  const sectionOutlineTotalCount = useMemo7(
+    () => getSectionOutlineEntryCount(sectionOutline ?? []),
+    [sectionOutline]
+  );
+  const filteredSectionOutlineCount = useMemo7(
+    () => getSectionOutlineEntryCount(filteredSectionOutline),
+    [filteredSectionOutline]
+  );
+  const isSectionOutlineFiltering = sectionOutlineFilterTerms.length > 0;
   const {
     activeItems,
     activeRemainingItemCount,
@@ -8619,6 +9645,12 @@ var ReviewShell = ({
     sourceInspectorInteractionRef.current = false;
     setSourceInspectorState(null);
   }, []);
+  useEffect10(() => {
+    clearSourceInspector();
+    setSectionOutlineFilter("");
+    setCollapsedSectionOutlineIds(/* @__PURE__ */ new Set());
+    setSectionOutline(null);
+  }, [clearSourceInspector, targetSrc]);
   const getSourceInspectorRect = useCallback11(
     (element) => {
       const frame = iframeRef.current;
@@ -8672,13 +9704,15 @@ var ReviewShell = ({
   );
   const showSourceInspectorForTarget = useCallback11(
     (target2, isPinned = false) => {
-      const candidates = getSourceCandidates(target2).map((candidate) => ({
-        ...candidate,
-        openUrl: getSourceOpenUrl(candidate.source, {
-          ...sourceOpenOptions,
-          omitPosition: !candidate.usesPosition
+      const candidates = getSourceCandidates(target2, 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) {
@@ -8700,12 +9734,16 @@ var ReviewShell = ({
     [
       getSourceInspectorPanelPosition,
       getSourceInspectorRect,
+      sourceCandidateOptions,
       sourceOpenOptions
     ]
   );
   const showSourceOutlineForTarget = useCallback11(
     (target2) => {
-      const firstCandidate = getSourceCandidates(target2)[0];
+      const firstCandidate = getSourceCandidates(
+        target2,
+        sourceCandidateOptions
+      )[0];
       const rect = firstCandidate ? getSourceInspectorRect(firstCandidate.element) : null;
       if (!firstCandidate || !rect) {
         setSourceInspectorState(null);
@@ -8722,8 +9760,35 @@ var ReviewShell = ({
       });
       return firstCandidate;
     },
-    [getSourceInspectorRect]
+    [getSourceInspectorRect, sourceCandidateOptions]
+  );
+  const showSourceOutlineForElement = useCallback11(
+    (element) => {
+      if (!isSourceTreeHoverOutlineEnabled) return;
+      const rect = getSourceInspectorRect(element);
+      if (!rect) {
+        setSourceInspectorState(
+          (current) => current?.isPinned ? current : null
+        );
+        return;
+      }
+      setSourceInspectorState(
+        (current) => current?.isPinned ? current : {
+          candidates: [],
+          isPinned: false,
+          panelLeft: 0,
+          panelMaxWidth: SOURCE_PANEL_MAX_WIDTH,
+          panelRight: null,
+          panelTop: 0,
+          rect
+        }
+      );
+    },
+    [getSourceInspectorRect, isSourceTreeHoverOutlineEnabled]
   );
+  const clearSourceOutlineHover = useCallback11(() => {
+    setSourceInspectorState((current) => current?.isPinned ? current : null);
+  }, []);
   const openSourceCandidate = useCallback11(
     (candidate) => {
       const didOpen = openSourceInEditor(candidate.source, {
@@ -8735,6 +9800,153 @@ var ReviewShell = ({
     },
     [clearSourceInspector, showToast, sourceOpenOptions]
   );
+  const getCurrentSectionOutline = useCallback11(
+    () => {
+      let frameDocument = null;
+      try {
+        frameDocument = iframeRef.current?.contentDocument ?? null;
+      } catch {
+        frameDocument = null;
+      }
+      return frameDocument ? getSectionOutline(frameDocument, sectionOutlineOptions) : [];
+    },
+    [iframeRef, sectionOutlineOptions]
+  );
+  const setSectionOutlineWithDefaultCollapse = useCallback11(
+    (nextSectionOutline) => {
+      setSectionOutline(nextSectionOutline);
+      setCollapsedSectionOutlineIds(
+        getDefaultCollapsedSectionOutlineIds(nextSectionOutline)
+      );
+    },
+    []
+  );
+  useEffect10(() => {
+    if (sidePanel !== "source" || !isListVisible) return void 0;
+    const refreshSectionOutline = () => {
+      setSectionOutlineWithDefaultCollapse(getCurrentSectionOutline());
+    };
+    const animationFrame = window.requestAnimationFrame(refreshSectionOutline);
+    const firstTimeout = window.setTimeout(refreshSectionOutline, 120);
+    const secondTimeout = window.setTimeout(refreshSectionOutline, 500);
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      window.clearTimeout(firstTimeout);
+      window.clearTimeout(secondTimeout);
+    };
+  }, [
+    getCurrentSectionOutline,
+    isListVisible,
+    setSectionOutlineWithDefaultCollapse,
+    sidePanel,
+    targetSrc
+  ]);
+  const toggleQaPanel = useCallback11(() => {
+    setSidePanel("qa");
+    setIsListVisible((current) => sidePanel === "qa" ? !current : true);
+  }, [setIsListVisible, sidePanel]);
+  const toggleSourceTreePanel = useCallback11(() => {
+    if (!isSourceInspectorEnabled) return;
+    if (sidePanel === "source" && isListVisible) {
+      setIsListVisible(false);
+      return;
+    }
+    setSidePanel("source");
+    setSectionOutlineWithDefaultCollapse(getCurrentSectionOutline());
+    setIsListVisible(true);
+  }, [
+    getCurrentSectionOutline,
+    isListVisible,
+    isSourceInspectorEnabled,
+    setSectionOutlineWithDefaultCollapse,
+    setIsListVisible,
+    sidePanel
+  ]);
+  const toggleSectionOutlineEntry = useCallback11((entryId) => {
+    setCollapsedSectionOutlineIds((current) => {
+      const next = new Set(current);
+      if (next.has(entryId)) {
+        next.delete(entryId);
+      } else {
+        next.add(entryId);
+      }
+      return next;
+    });
+  }, []);
+  const scrollToSection = useCallback11((entry) => {
+    scrollElementInTarget(entry.element, "start");
+    centerFrameScrollOnElement(
+      frameScrollRef.current,
+      iframeRef.current,
+      entry.element
+    );
+  }, [frameScrollRef, iframeRef]);
+  const openSectionSource = useCallback11(
+    (entry) => {
+      const didOpen = openSourceInEditor(entry.source, {
+        ...sourceOpenOptions,
+        omitPosition: true
+      });
+      showToast(didOpen ? "Source opened" : "Source root required");
+    },
+    [showToast, sourceOpenOptions]
+  );
+  const openSectionData = useCallback11(
+    (entry) => {
+      const didOpen = openSourceInEditor(entry.data, sourceOpenOptions);
+      showToast(didOpen ? "Data opened" : "Data hint not found");
+    },
+    [showToast, sourceOpenOptions]
+  );
+  const startSectionDomReview = useCallback11(
+    (entry) => {
+      if (!canWriteDom) {
+        showToast("DOM QA unavailable");
+        return;
+      }
+      clearSourceInspector();
+      setIsListVisible(false);
+      let targetWindow = null;
+      try {
+        targetWindow = entry.element.ownerDocument.defaultView ?? iframeRef.current?.contentWindow ?? null;
+      } catch {
+        targetWindow = null;
+      }
+      void waitForMs(SOURCE_TREE_PANEL_CLOSE_DELAY_MS).then(async () => {
+        initReviewKit();
+        await waitForFrame(targetWindow);
+        const controller = controllerRef.current;
+        if (!controller) {
+          showToast("DOM QA unavailable");
+          return;
+        }
+        scrollElementInTarget(entry.element, "center");
+        await waitForFrame(targetWindow);
+        centerFrameScrollOnElement(
+          frameScrollRef.current,
+          iframeRef.current,
+          entry.element
+        );
+        await waitForFrame(targetWindow);
+        await controller.startElementReview(entry.element);
+        await waitForFrame(targetWindow);
+        setMode(controller.getMode());
+      }).catch(() => {
+        setMode(controllerRef.current?.getMode() ?? "idle");
+      });
+    },
+    [
+      canWriteDom,
+      clearSourceInspector,
+      controllerRef,
+      frameScrollRef,
+      iframeRef,
+      initReviewKit,
+      setIsListVisible,
+      setMode,
+      showToast
+    ]
+  );
   const cleanupSourceOpenShortcut = useCallback11(() => {
     sourceShortcutCleanupRef.current?.();
     sourceShortcutCleanupRef.current = null;
@@ -8782,7 +9994,7 @@ var ReviewShell = ({
         background: rgba(15, 23, 42, 0.86) !important;
         box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
         content: "Source select" !important;
-        font: 700 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+        font: 500 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
         pointer-events: none !important;
       }
@@ -8799,7 +10011,7 @@ var ReviewShell = ({
         color: #ffffff !important;
         background: rgba(15, 23, 42, 0.9) !important;
         box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
-        font: 800 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
+        font: 500 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
         overflow-wrap: anywhere !important;
         pointer-events: none !important;
         white-space: normal !important;
@@ -8900,8 +10112,9 @@ var ReviewShell = ({
       }
     };
     const handleMouseMove = (event) => {
+      if (isSourcePanelPinned) return;
       lastSourceTarget = event.target;
-      const candidates = getSourceCandidates(event.target);
+      const candidates = getSourceCandidates(event.target, sourceCandidateOptions);
       const sourceElement = candidates[0]?.element ?? null;
       if (event.altKey && !isSourceSelecting) {
         setSourceSelecting(true);
@@ -8935,6 +10148,7 @@ var ReviewShell = ({
         return;
       }
       if (!isOptionKeyEvent(event)) return;
+      if (isSourcePanelPinned) return;
       cancelReviewMode();
       setSourceSelecting(true);
     };
@@ -8985,6 +10199,7 @@ var ReviewShell = ({
     iframeRef,
     isSourceInspectorEnabled,
     showToast,
+    sourceCandidateOptions,
     showSourceOutlineForTarget,
     showSourceInspectorForTarget
   ]);
@@ -8999,12 +10214,19 @@ var ReviewShell = ({
       mode === "element"
     );
     bindSourceOpenShortcut();
+    if (sidePanel === "source" && isListVisible) {
+      setSectionOutlineWithDefaultCollapse(getCurrentSectionOutline());
+    }
   }, [
     bindSourceOpenShortcut,
+    getCurrentSectionOutline,
     iframeRef,
     initReviewKit,
+    isListVisible,
     mode,
-    refreshTargetFigmaConfig
+    refreshTargetFigmaConfig,
+    setSectionOutlineWithDefaultCollapse,
+    sidePanel
   ]);
   useEffect10(() => {
     const frame = window.requestAnimationFrame(bindSourceOpenShortcut);
@@ -9085,6 +10307,112 @@ var ReviewShell = ({
     onRefreshReviewData: refreshReviewData2,
     onToast: showToast
   });
+  const renderSectionOutlineEntry = (entry) => {
+    const hasChildren = entry.children.length > 0;
+    const isCollapsed = !isSectionOutlineFiltering && collapsedSectionOutlineIds.has(entry.id);
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: `df-review-section-outline-item is-depth-${entry.depth}`,
+        children: [
+          /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              className: "df-review-section-outline-row",
+              style: { paddingLeft: `${Math.max(0, entry.depth - 1) * 12 + 6}px` },
+              onMouseEnter: () => showSourceOutlineForElement(entry.element),
+              onMouseLeave: clearSourceOutlineHover,
+              onMouseOver: () => showSourceOutlineForElement(entry.element),
+              onMouseOut: (event) => {
+                if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) {
+                  return;
+                }
+                clearSourceOutlineHover();
+              },
+              onPointerEnter: () => showSourceOutlineForElement(entry.element),
+              onPointerLeave: clearSourceOutlineHover,
+              children: [
+                hasChildren ? /* @__PURE__ */ jsx17(
+                  "button",
+                  {
+                    "aria-label": isCollapsed ? `Expand ${entry.label}` : `Collapse ${entry.label}`,
+                    "aria-expanded": !isCollapsed,
+                    className: `df-review-section-outline-toggle${isCollapsed ? " is-collapsed" : ""}`,
+                    type: "button",
+                    onClick: () => toggleSectionOutlineEntry(entry.id),
+                    children: /* @__PURE__ */ jsx17(ChevronDown, { "aria-hidden": "true" })
+                  }
+                ) : /* @__PURE__ */ jsx17(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "df-review-section-outline-toggle is-placeholder"
+                  }
+                ),
+                /* @__PURE__ */ jsx17(
+                  "button",
+                  {
+                    className: "df-review-section-outline-name",
+                    type: "button",
+                    onClick: () => scrollToSection(entry),
+                    children: /* @__PURE__ */ jsx17("span", { children: entry.label })
+                  }
+                ),
+                /* @__PURE__ */ jsxs15("span", { className: "df-review-section-outline-links", children: [
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      "aria-label": `Open ${entry.label} data`,
+                      className: "df-review-section-outline-link",
+                      title: "Open data",
+                      type: "button",
+                      disabled: !entry.data?.file,
+                      onClick: () => openSectionData(entry),
+                      children: /* @__PURE__ */ jsx17(Database, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      "aria-label": `Open ${entry.label} source`,
+                      className: "df-review-section-outline-link",
+                      title: "Open source",
+                      type: "button",
+                      disabled: !entry.source?.file,
+                      onClick: () => openSectionSource(entry),
+                      children: /* @__PURE__ */ jsx17(CodeXml, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "df-review-section-outline-divider",
+                      children: "|"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      "aria-label": `Start DOM QA for ${entry.label}`,
+                      className: "df-review-section-outline-link is-dom-select",
+                      title: "DOM select",
+                      type: "button",
+                      disabled: !canWriteDom,
+                      onClick: () => startSectionDomReview(entry),
+                      children: /* @__PURE__ */ jsx17(SquareMousePointer, { "aria-hidden": "true" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          hasChildren && !isCollapsed && /* @__PURE__ */ jsx17("div", { className: "df-review-section-outline-children", children: entry.children.map(renderSectionOutlineEntry) })
+        ]
+      },
+      entry.id
+    );
+  };
   return /* @__PURE__ */ jsxs15(
     "div",
     {
@@ -9115,13 +10443,6 @@ var ReviewShell = ({
             onOpenSettings: openFigmaSettings
           }
         ),
-        currentPagePresenceUsers.length > 0 && /* @__PURE__ */ jsx17("div", { className: "df-review-presence-row", children: /* @__PURE__ */ jsx17(
-          PresenceOverlay,
-          {
-            presenceSessionId,
-            users: currentPagePresenceUsers
-          }
-        ) }),
         isSitemapOpen && /* @__PURE__ */ jsx17(
           SitemapModal,
           {
@@ -9174,19 +10495,40 @@ var ReviewShell = ({
           }
         ),
         toastMessage && /* @__PURE__ */ jsx17("div", { className: "df-review-copy-toast", role: "status", children: toastMessage }),
-        /* @__PURE__ */ jsx17("div", { className: "df-review-side-rail", children: /* @__PURE__ */ jsxs15(
-          "button",
-          {
-            "aria-label": isListVisible ? "Hide QA list" : "Show QA list",
-            className: "df-review-side-toggle",
-            type: "button",
-            onClick: () => setIsListVisible((current) => !current),
-            children: [
-              /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx17(GripVertical, {}) }),
-              /* @__PURE__ */ jsx17("strong", { children: "QA" })
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsxs15("div", { className: "df-review-side-rail", children: [
+          /* @__PURE__ */ jsx17(
+            "button",
+            {
+              "aria-label": isQaPanelVisible ? "Hide QA list" : "Show QA list",
+              "aria-pressed": isQaPanelVisible,
+              className: `df-review-side-toggle${isQaPanelVisible ? " is-active" : ""}`,
+              type: "button",
+              onClick: toggleQaPanel,
+              title: "QA",
+              children: /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx17(FileText, {}) })
+            }
+          ),
+          isSourceInspectorEnabled && /* @__PURE__ */ jsx17(
+            "button",
+            {
+              "aria-controls": "df-review-section-outline",
+              "aria-label": isSourceTreePanelVisible ? "Hide source tree" : "Show source tree",
+              "aria-pressed": isSourceTreePanelVisible,
+              className: `df-review-side-toggle${isSourceTreePanelVisible ? " is-active" : ""}`,
+              type: "button",
+              onClick: toggleSourceTreePanel,
+              title: "Source Tree",
+              children: /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx17(Search, {}) })
+            }
+          ),
+          currentPagePresenceUsers.length > 0 && /* @__PURE__ */ jsx17(
+            PresenceOverlay,
+            {
+              presenceSessionId,
+              users: currentPagePresenceUsers
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx17(
           ReviewQaPanel,
           {
@@ -9197,7 +10539,7 @@ var ReviewShell = ({
             filteredNumberedActiveItems,
             getItemPresetScope,
             hiddenOverlayItemIds,
-            isListVisible,
+            isListVisible: isQaPanelVisible,
             isAllQaVisible,
             isRemoteSource,
             copiedPromptKey,
@@ -9225,6 +10567,49 @@ var ReviewShell = ({
             onToggleItemOverlayVisibility: toggleItemOverlayVisibility
           }
         ),
+        isSourceInspectorEnabled && /* @__PURE__ */ jsx17(
+          "aside",
+          {
+            className: "df-review-source-tree-panel",
+            "aria-hidden": !isSourceTreePanelVisible,
+            children: /* @__PURE__ */ jsxs15("div", { id: "df-review-section-outline", className: "df-review-section-outline", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "df-review-section-outline-head", children: [
+                /* @__PURE__ */ jsxs15("span", { children: [
+                  /* @__PURE__ */ jsx17("strong", { children: "Source Tree" }),
+                  /* @__PURE__ */ jsx17("small", { children: isSectionOutlineFiltering ? `${filteredSectionOutlineCount} / ${sectionOutlineTotalCount} results` : `${sectionOutline?.length ?? 0} roots` })
+                ] }),
+                /* @__PURE__ */ jsxs15("div", { className: "df-review-section-outline-filter", children: [
+                  /* @__PURE__ */ jsx17(Search, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx17(
+                    "input",
+                    {
+                      "aria-label": "Filter source tree",
+                      type: "text",
+                      value: sectionOutlineFilter,
+                      placeholder: "Filter",
+                      autoComplete: "off",
+                      enterKeyHint: "search",
+                      spellCheck: false,
+                      onChange: (event) => setSectionOutlineFilter(event.currentTarget.value)
+                    }
+                  ),
+                  sectionOutlineFilter && /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      "aria-label": "Clear source tree filter",
+                      className: "df-review-section-outline-filter-clear",
+                      type: "button",
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => setSectionOutlineFilter(""),
+                      children: /* @__PURE__ */ jsx17(X, { "aria-hidden": "true" })
+                    }
+                  )
+                ] })
+              ] }),
+              filteredSectionOutline.length > 0 ? /* @__PURE__ */ jsx17("div", { className: "df-review-section-outline-list", children: filteredSectionOutline.map(renderSectionOutlineEntry) }) : /* @__PURE__ */ jsx17("div", { className: "df-review-section-outline-empty", children: isSectionOutlineFiltering ? "No source matches" : "No sections found" })
+            ] })
+          }
+        ),
         /* @__PURE__ */ jsx17(
           ReviewTargetFrame,
           {
@@ -9296,7 +10681,7 @@ var ReviewShell = ({
                 /* @__PURE__ */ jsx17("div", { className: "df-review-source-candidate-list", children: sourceInspectorState.candidates.map((candidate) => /* @__PURE__ */ jsx17(
                   "button",
                   {
-                    className: "df-review-source-candidate",
+                    className: `df-review-source-candidate is-${candidate.kind}`,
                     type: "button",
                     onClick: (event) => {
                       event.preventDefault();
@@ -9306,7 +10691,7 @@ var ReviewShell = ({
                     children: /* @__PURE__ */ jsxs15("span", { className: "df-review-source-candidate-main", children: [
                       /* @__PURE__ */ jsx17("strong", { children: candidate.label }),
                       /* @__PURE__ */ jsx17("span", { children: candidate.filePath }),
-                      /* @__PURE__ */ jsx17("small", { children: candidate.positionLabel || (candidate.usesPosition ? "" : "file only") })
+                      /* @__PURE__ */ jsx17("small", { children: candidate.positionLabel || "-:-" })
                     ] })
                   },
                   candidate.id
@@ -9529,12 +10914,16 @@ lucide-react/dist/esm/context.mjs:
 lucide-react/dist/esm/Icon.mjs:
 lucide-react/dist/esm/createLucideIcon.mjs:
 lucide-react/dist/esm/icons/bot.mjs:
+lucide-react/dist/esm/icons/chevron-down.mjs:
 lucide-react/dist/esm/icons/circle-question-mark.mjs:
+lucide-react/dist/esm/icons/code-xml.mjs:
 lucide-react/dist/esm/icons/copy.mjs:
+lucide-react/dist/esm/icons/database.mjs:
+lucide-react/dist/esm/icons/ellipsis.mjs:
 lucide-react/dist/esm/icons/external-link.mjs:
 lucide-react/dist/esm/icons/eye-off.mjs:
 lucide-react/dist/esm/icons/eye.mjs:
-lucide-react/dist/esm/icons/grip-vertical.mjs:
+lucide-react/dist/esm/icons/file-text.mjs:
 lucide-react/dist/esm/icons/image.mjs:
 lucide-react/dist/esm/icons/layout-grid.mjs:
 lucide-react/dist/esm/icons/link-2.mjs:
@@ -9542,16 +10931,20 @@ lucide-react/dist/esm/icons/list-filter.mjs:
 lucide-react/dist/esm/icons/map.mjs:
 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/pencil.mjs:
 lucide-react/dist/esm/icons/rectangle-horizontal.mjs:
 lucide-react/dist/esm/icons/refresh-cw.mjs:
 lucide-react/dist/esm/icons/ruler.mjs:
 lucide-react/dist/esm/icons/scan.mjs:
+lucide-react/dist/esm/icons/search.mjs:
 lucide-react/dist/esm/icons/settings.mjs:
 lucide-react/dist/esm/icons/smartphone.mjs:
 lucide-react/dist/esm/icons/square-mouse-pointer.mjs:
 lucide-react/dist/esm/icons/sticky-note.mjs:
+lucide-react/dist/esm/icons/sun.mjs:
 lucide-react/dist/esm/icons/upload.mjs:
+lucide-react/dist/esm/icons/user-round.mjs:
 lucide-react/dist/esm/icons/x.mjs:
 lucide-react/dist/esm/lucide-react.mjs:
   (**