@designfever/web-review-kit 0.4.1 → 0.5.0

package/dist/react-shell.cjs

@@ -101,10 +101,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;
@@ -121,7 +121,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;
@@ -295,7 +295,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%;
@@ -304,7 +304,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 {
@@ -323,20 +323,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;
@@ -349,6 +335,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);
@@ -366,7 +353,6 @@ function ensureReviewShellStyle() {
 	  }
 
 		  .df-review-address button,
-		  .df-review-side-toggle,
 		  .df-review-presets button,
 		  .df-review-overlay-button,
 			  .df-review-mode-button,
@@ -375,6 +361,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);
@@ -382,12 +369,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,
@@ -488,12 +474,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 {
@@ -507,7 +494,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 {
@@ -535,7 +522,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 {
@@ -571,7 +558,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;
   }
@@ -669,7 +656,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;
   }
 
@@ -681,7 +668,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;
   }
 
@@ -696,14 +683,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 {
@@ -736,7 +723,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;
   }
@@ -808,12 +795,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 {
@@ -823,7 +811,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 {
@@ -849,7 +837,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 {
@@ -861,17 +849,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);
@@ -1016,7 +1019,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;
 		  }
 
@@ -1032,7 +1035,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 {
@@ -1098,7 +1101,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 {
@@ -1151,7 +1154,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;
   }
@@ -1175,13 +1178,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;
 			  }
@@ -1193,7 +1197,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 {
@@ -1227,13 +1231,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 {
@@ -1272,7 +1276,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;
 			  }
@@ -1291,13 +1295,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 {
@@ -1326,14 +1330,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;
 			  }
 
@@ -1363,8 +1367,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);
@@ -1376,28 +1381,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;
@@ -1422,7 +1449,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;
   }
@@ -1448,6 +1475,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,
@@ -1455,8 +1483,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;
@@ -1464,6 +1494,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;
@@ -1499,33 +1595,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);
@@ -1533,49 +1642,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 {
@@ -1593,11 +1819,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;
@@ -1614,14 +1863,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 {
@@ -1629,143 +1880,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;
@@ -1775,16 +1959,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);
@@ -1795,11 +1981,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);
   }
@@ -1832,19 +2018,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;
 			  }
@@ -1925,6 +2111,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;
   }
 
@@ -1972,7 +2159,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;
   }
@@ -2039,7 +2226,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;
   }
 
@@ -2052,7 +2239,7 @@ function ensureReviewShellStyle() {
     cursor: pointer;
     outline: 0;
     font-size: var(--df-review-font-size-xs);
-    font-weight: 750;
+    font-weight: 500;
     text-transform: none;
   }
 
@@ -2277,7 +2464,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;
@@ -2449,6 +2636,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;
@@ -2460,7 +2650,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);
@@ -2486,7 +2676,7 @@ function ensureReviewShellStyle() {
     color: var(--df-review-source-popover-subtle);
     background: transparent;
     font-size: 16px;
-    font-weight: 800;
+    font-weight: 500;
     line-height: 1;
   }
 
@@ -2510,22 +2700,26 @@ function ensureReviewShellStyle() {
   .df-review-source-candidate {
     display: grid;
     width: 100%;
-    min-height: 54px;
     border: 0;
+    border-top: 1px solid transparent;
     border-radius: var(--df-review-radius-sm);
-    padding: 6px 30px 6px 8px;
+    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: 2px;
+    gap: 1px;
     min-width: 0;
   }
 
@@ -2538,7 +2732,8 @@ function ensureReviewShellStyle() {
 
   .df-review-source-candidate-main strong {
     font-size: var(--df-review-font-size-xs);
-    font-weight: 900;
+    font-weight: 600;
+    line-height: 1.2;
   }
 
   .df-review-source-candidate-main span {
@@ -2546,7 +2741,7 @@ function ensureReviewShellStyle() {
     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;
+    line-height: 1.24;
     white-space: normal;
   }
 
@@ -2554,6 +2749,335 @@ function ensureReviewShellStyle() {
     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;
+    cursor: pointer;
+    transition: border-color 140ms ease, background 140ms ease,
+      color 140ms ease, opacity 140ms ease;
+  }
+
+  .df-review-section-outline-link.is-dom-select {
+    width: 26px;
+    min-width: 26px;
+    padding: 0;
+  }
+
+  .df-review-section-outline-link.is-dom-select svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .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-section-outline-link svg {
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+  }
+
+  .df-review-section-outline-link:disabled {
+    color: var(--df-review-subtle);
+    cursor: not-allowed;
+    opacity: 0.42;
+  }
+
+  .df-review-section-outline-link:disabled:hover {
+    border-color: transparent;
+    color: var(--df-review-subtle);
+    background: transparent;
+  }
+
+  .df-review-section-outline-children {
+    display: grid;
+  }
+
+  .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 {
@@ -2650,13 +3174,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;
   }
 
@@ -2669,7 +3193,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;
@@ -2747,7 +3271,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;
@@ -2760,12 +3284,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 {
@@ -2774,7 +3298,7 @@ function ensureReviewShellStyle() {
 	    }
 
 	    .df-review-tools {
-	      flex-wrap: wrap;
+	      flex-wrap: nowrap;
 	    }
 
 	    .df-review-tool-controls {
@@ -2804,11 +3328,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);
   }
 }
@@ -2931,31 +3463,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",
     {
@@ -2973,10 +3533,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",
     {
@@ -2986,54 +3546,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",
     {
@@ -3044,27 +3609,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",
     {
@@ -3074,25 +3651,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",
     {
@@ -3105,19 +3682,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",
     {
@@ -3127,17 +3711,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",
     {
@@ -3147,35 +3731,249 @@ 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",
     {
-      d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",
-      key: "1dfntj"
-    }
-  ],
-  ["path", { d: "M15 3v5a1 1 0 0 0 1 1h5", key: "6s6qgf" }]
-];
-var StickyNote = createLucideIcon("sticky-note", __iconNode23);
-
-// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/upload.mjs
-var __iconNode24 = [
-  ["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);
+      d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",
+      key: "1dfntj"
+    }
+  ],
+  ["path", { d: "M15 3v5a1 1 0 0 0 1 1h5", key: "6s6qgf" }]
+];
+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 __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", __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 __iconNode33 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode33);
+
+// src/core/geometry.ts
+function rectanglesIntersect(a, b) {
+  return a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
+}
+function getPointSelection(point) {
+  return {
+    left: point.x,
+    top: point.y,
+    width: 1,
+    height: 1
+  };
+}
+function toViewportSelection(selection) {
+  return {
+    left: selection.x,
+    top: selection.y,
+    width: selection.width,
+    height: selection.height
+  };
+}
+function toPublicSelection(selection) {
+  return {
+    x: Math.round(selection.left),
+    y: Math.round(selection.top),
+    width: Math.round(selection.width),
+    height: Math.round(selection.height)
+  };
+}
+function getSelectionCenter(selection) {
+  if ("left" in selection) {
+    return {
+      x: selection.left + selection.width / 2,
+      y: selection.top + selection.height / 2
+    };
+  }
+  return {
+    x: selection.x + selection.width / 2,
+    y: selection.y + selection.height / 2
+  };
+}
+function isRelativeSelection(value) {
+  if (!value || typeof value !== "object") return false;
+  const selection = value;
+  return typeof selection.x === "number" && typeof selection.y === "number" && typeof selection.width === "number" && typeof selection.height === "number";
+}
+function getViewportSize(environment) {
+  const targetWindow = environment?.window ?? window;
+  return {
+    width: targetWindow.innerWidth,
+    height: targetWindow.innerHeight
+  };
+}
+function isPointInViewport(point, environment) {
+  const viewport = getViewportSize(environment);
+  return point.x >= 0 && point.y >= 0 && point.x <= viewport.width && point.y <= viewport.height;
+}
+function isSelectionInViewport(selection, environment) {
+  const viewport = getViewportSize(environment);
+  return rectanglesIntersect(selection, {
+    left: 0,
+    top: 0,
+    width: viewport.width,
+    height: viewport.height
+  });
+}
+function clampPoint(point, environment) {
+  const viewport = getViewportSize(environment);
+  return {
+    x: clamp(point.x, 0, viewport.width),
+    y: clamp(point.y, 0, viewport.height)
+  };
+}
+function getPopoverPosition(point, environment, options) {
+  const bounds = getPopoverBounds(environment);
+  const margin = 12;
+  const width = Math.min(
+    options?.width ?? 320,
+    Math.max(240, bounds.width - margin * 2)
+  );
+  const estimatedHeight = options?.estimatedHeight ?? 178;
+  const offset = options?.offset ?? 12;
+  return {
+    left: clamp(
+      point.x + offset,
+      bounds.left + margin,
+      bounds.left + bounds.width - width - margin
+    ),
+    top: clamp(
+      point.y + offset,
+      bounds.top + margin,
+      bounds.top + bounds.height - estimatedHeight - margin
+    )
+  };
+}
+function getPopoverBounds(environment) {
+  if (!environment) {
+    return {
+      left: 0,
+      top: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  return environment.overlayRect;
+}
+function toHostPoint(point, environment) {
+  if (!environment) return point;
+  return {
+    x: point.x + environment.viewportRect.left,
+    y: point.y + environment.viewportRect.top
+  };
+}
+function toHostSelection(selection, environment) {
+  return {
+    left: selection.left + environment.viewportRect.left,
+    top: selection.top + environment.viewportRect.top,
+    width: selection.width,
+    height: selection.height
+  };
+}
+function toTargetPoint(point, environment) {
+  if (!environment) return point;
+  return {
+    x: point.x - environment.viewportRect.left,
+    y: point.y - environment.viewportRect.top
+  };
+}
+function toTargetPointFromHostEvent(event, environment) {
+  return toTargetPoint(
+    {
+      x: event.clientX,
+      y: event.clientY
+    },
+    environment
+  );
+}
+function placeLayerOverTarget(layer, environment) {
+  layer.style.left = `${environment.viewportRect.left}px`;
+  layer.style.top = `${environment.viewportRect.top}px`;
+  layer.style.width = `${environment.viewportRect.width}px`;
+  layer.style.height = `${environment.viewportRect.height}px`;
+  layer.style.right = "auto";
+  layer.style.bottom = "auto";
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function roundRatio(value) {
+  return Math.round(value * 1e4) / 1e4;
+}
+function roundPoint(point) {
+  return {
+    x: Math.round(point.x),
+    y: Math.round(point.y)
+  };
+}
 
-// node_modules/.pnpm/lucide-react@1.20.0_react@19.2.7/node_modules/lucide-react/dist/esm/icons/x.mjs
-var __iconNode25 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-var X = createLucideIcon("x", __iconNode25);
+// src/core/scroll.ts
+function waitForNextFrame(environment) {
+  return new Promise((resolve) => {
+    (environment?.window ?? window).requestAnimationFrame(() => resolve());
+  });
+}
+function runWithAutoScrollBehavior(targetDocument, callback) {
+  const elements = [
+    targetDocument.documentElement,
+    targetDocument.body
+  ].filter((element) => Boolean(element));
+  const previousValues = elements.map((element) => element.style.scrollBehavior);
+  elements.forEach((element) => {
+    element.style.scrollBehavior = "auto";
+  });
+  try {
+    callback();
+  } finally {
+    elements.forEach((element, index) => {
+      element.style.scrollBehavior = previousValues[index] ?? "";
+    });
+  }
+}
+function setDocumentScrollInstantly(environment, position) {
+  const scrollElement = environment.document.scrollingElement;
+  if (scrollElement) {
+    scrollElement.scrollLeft = Math.max(0, Math.round(position.x));
+    scrollElement.scrollTop = Math.max(0, Math.round(position.y));
+    return;
+  }
+  environment.window.scrollTo(
+    Math.max(0, Math.round(position.x)),
+    Math.max(0, Math.round(position.y))
+  );
+}
 
 // src/react-shell/constants.ts
 var REVIEW_QA_FILTERS = [
@@ -3684,6 +4482,11 @@ var getSystemReviewTheme = () => {
 
 // src/react-shell/review/settings.modal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var getReviewThemeIcon = (theme) => {
+  if (theme === "light") return Sun;
+  if (theme === "system") return Monitor;
+  return Moon;
+};
 var ReviewSettingsModal = ({
   figmaTokenDraft,
   reviewUserIdDraft,
@@ -3743,20 +4546,28 @@ var ReviewSettingsModal = ({
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "df-review-settings-body", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "df-review-settings-row", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Theme" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "df-review-settings-theme-options", children: REVIEW_THEME_OPTIONS.map((option) => {
+                    const ThemeIcon = getReviewThemeIcon(option.value);
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)(ThemeIcon, { "aria-hidden": "true" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: option.label })
+                        ]
                       },
-                      children: option.label
-                    },
-                    option.value
-                  )) })
+                      option.value
+                    );
+                  }) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "df-review-settings-field", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "df-review-settings-label-row", children: [
@@ -4607,7 +5418,7 @@ var getReviewItemRestoreScrollPosition = (targetWindow, targetDocument, item, an
     top: item.scroll?.y ?? 0
   });
 };
-var setDocumentScrollInstantly = (targetWindow, targetDocument, position) => {
+var setDocumentScrollInstantly2 = (targetWindow, targetDocument, position) => {
   const scrollElement = targetDocument.scrollingElement;
   if (scrollElement) {
     scrollElement.scrollLeft = position.left;
@@ -4948,6 +5759,33 @@ var QaPanelHeader = ({
           }
         )
       ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "select",
+        {
+          "aria-label": "QA status filter",
+          className: "df-review-status-filter-select",
+          value: qaStatusFilter,
+          onChange: (event) => onQaStatusFilterChange(
+            event.currentTarget.value
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "all", children: `All status (${qaStatusFilterCounts.get("all") ?? 0})` }),
+            statusFilterOptions.map((statusOption) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: statusOption.value, children: `${statusOption.label} (${qaStatusFilterCounts.get(statusOption.value) ?? 0})` }, statusOption.value))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "df-review-list-title", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "df-review-list-meta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: isAllQaVisible ? `${label} QA \xB7 All pages` : `${label} QA` }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "strong",
+          {
+            title: `${activeRemainingItemCount} remaining of ${activeItemCount}`,
+            children: !hasActiveFilter ? `${activeRemainingItemCount}/${activeItemCount}` : `${filteredItemCount}/${activeItemCount}`
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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;
@@ -4964,25 +5802,6 @@ var QaPanelHeader = ({
           filter.key
         );
       }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "df-review-list-title", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: isAllQaVisible ? `${label} QA \xB7 All pages` : `${label} QA` }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { title: `${activeRemainingItemCount} remaining of ${activeItemCount}`, children: !hasActiveFilter ? `${activeRemainingItemCount}/${activeItemCount}` : `${filteredItemCount}/${activeItemCount}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "select",
-        {
-          "aria-label": "QA status filter",
-          className: "df-review-status-filter-select",
-          value: qaStatusFilter,
-          onChange: (event) => onQaStatusFilterChange(
-            event.currentTarget.value
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "all", children: `All status (${qaStatusFilterCounts.get("all") ?? 0})` }),
-            statusFilterOptions.map((statusOption) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: statusOption.value, children: `${statusOption.label} (${qaStatusFilterCounts.get(statusOption.value) ?? 0})` }, statusOption.value))
-          ]
-        }
-      )
     ] })
   ] });
 };
@@ -5108,7 +5927,6 @@ var ReviewQaPanel = ({
 // src/react-shell/presence/overlay.tsx
 var import_react6 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var COLLAPSED_USER_COUNT = 1;
 var getPresenceName = (user) => user.displayName || user.userId;
 var PresenceOverlay = ({
   presenceSessionId,
@@ -5116,18 +5934,31 @@ var PresenceOverlay = ({
 }) => {
   const [isExpanded, setIsExpanded] = (0, import_react6.useState)(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__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       "aria-label": `Review presence, ${users.length} online`,
       className: `df-review-presence-overlay${isExpanded ? " is-expanded" : ""}`,
       children: [
-        visibleUsers.map((user) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "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__ */ (0, import_jsx_runtime11.jsx)(UserRound, { "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "df-review-presence-badge", children: users.length })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "df-review-presence-list", role: "list", children: users.map((user) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             className: `df-review-presence-chip${user.sessionId === presenceSessionId ? " is-self" : ""}`,
+            role: "listitem",
             style: {
               "--df-review-presence-color": user.color
             },
@@ -5135,21 +5966,7 @@ var PresenceOverlay = ({
             children: getPresenceName(user)
           },
           user.sessionId
-        )),
-        hiddenUserCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          "button",
-          {
-            "aria-label": `Show ${hiddenUserCount} more online reviewers`,
-            "aria-expanded": isExpanded,
-            className: "df-review-presence-more",
-            type: "button",
-            onClick: () => setIsExpanded(true),
-            children: [
-              "+",
-              hiddenUserCount
-            ]
-          }
-        )
+        )) })
       ]
     }
   );
@@ -5166,28 +5983,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();
@@ -5226,6 +6188,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(
@@ -5241,7 +6215,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();
@@ -5251,7 +6225,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,
@@ -5260,6 +6234,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
   };
@@ -5283,7 +6258,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;
 }
@@ -5774,6 +6749,7 @@ var ViewportPresetIcon = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
 };
+var getPresetSelectValue = (preset) => `${preset.label}:${preset.width}x${preset.height}`;
 var ReviewTopbar = ({
   draftTarget,
   copyLabel,
@@ -5794,6 +6770,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__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "df-review-topbar", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "form",
@@ -5843,6 +6826,27 @@ var ReviewTopbar = ({
           },
           preset.label
         )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "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__ */ (0, import_jsx_runtime16.jsx)(
+                "option",
+                {
+                  value: getPresetSelectValue(preset),
+                  children: `${preset.label} (${count})`
+                },
+                getPresetSelectValue(preset)
+              );
+            })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "df-review-active-size", children: [
           size.width,
@@ -5904,6 +6908,64 @@ var ReviewTopbar = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Settings, { "aria-hidden": "true" })
           }
         )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { className: "df-review-overlays-menu", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { "aria-label": "Open target tools", title: "Tools", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Ellipsis, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "df-review-overlays-popover", "aria-label": "Target tools", children: [
+          isRulerAvailable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              "aria-label": "Toggle ruler",
+              className: `df-review-overlay-button is-ruler${isRulerVisible ? " is-active" : ""}`,
+              type: "button",
+              onClick: onToggleRuler,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Ruler, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              "aria-label": "Toggle grid overlay",
+              className: `df-review-overlay-button is-grid${targetOverlayState.grid ? " is-active" : ""}`,
+              type: "button",
+              onClick: () => onToggleTargetOverlay("grid"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LayoutGrid, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "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__ */ (0, import_jsx_runtime16.jsx)(Image, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              "aria-label": "Open initial prompt",
+              className: "df-review-overlay-button is-prompt",
+              type: "button",
+              onClick: onOpenInitialPrompt,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleQuestionMark, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              "aria-label": "Open settings",
+              className: "df-review-overlay-button is-settings",
+              type: "button",
+              onClick: onOpenSettings,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Settings, { "aria-hidden": "true" })
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -5914,7 +6976,7 @@ var import_react11 = require("react");
 
 // src/react-shell/hooks/use.review.item.restore.ts
 var import_react7 = require("react");
-function runWithAutoScrollBehavior(targetDocument, callback) {
+function runWithAutoScrollBehavior2(targetDocument, callback) {
   const elements = [
     targetDocument?.documentElement,
     targetDocument?.body
@@ -6015,8 +7077,8 @@ var useReviewItemRestore = ({
         isCurrentRestore
       );
       if (!isCurrentRestore()) return false;
-      runWithAutoScrollBehavior(targetDocument, () => {
-        setDocumentScrollInstantly(
+      runWithAutoScrollBehavior2(targetDocument, () => {
+        setDocumentScrollInstantly2(
           targetWindow,
           targetDocument,
           getReviewItemRestoreScrollPosition(
@@ -6190,163 +7252,6 @@ function normalizeStoredReviewItem(value) {
   };
 }
 
-// src/core/geometry.ts
-function rectanglesIntersect(a, b) {
-  return a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
-}
-function getPointSelection(point) {
-  return {
-    left: point.x,
-    top: point.y,
-    width: 1,
-    height: 1
-  };
-}
-function toViewportSelection(selection) {
-  return {
-    left: selection.x,
-    top: selection.y,
-    width: selection.width,
-    height: selection.height
-  };
-}
-function toPublicSelection(selection) {
-  return {
-    x: Math.round(selection.left),
-    y: Math.round(selection.top),
-    width: Math.round(selection.width),
-    height: Math.round(selection.height)
-  };
-}
-function getSelectionCenter(selection) {
-  if ("left" in selection) {
-    return {
-      x: selection.left + selection.width / 2,
-      y: selection.top + selection.height / 2
-    };
-  }
-  return {
-    x: selection.x + selection.width / 2,
-    y: selection.y + selection.height / 2
-  };
-}
-function isRelativeSelection(value) {
-  if (!value || typeof value !== "object") return false;
-  const selection = value;
-  return typeof selection.x === "number" && typeof selection.y === "number" && typeof selection.width === "number" && typeof selection.height === "number";
-}
-function getViewportSize(environment) {
-  const targetWindow = environment?.window ?? window;
-  return {
-    width: targetWindow.innerWidth,
-    height: targetWindow.innerHeight
-  };
-}
-function isPointInViewport(point, environment) {
-  const viewport = getViewportSize(environment);
-  return point.x >= 0 && point.y >= 0 && point.x <= viewport.width && point.y <= viewport.height;
-}
-function isSelectionInViewport(selection, environment) {
-  const viewport = getViewportSize(environment);
-  return rectanglesIntersect(selection, {
-    left: 0,
-    top: 0,
-    width: viewport.width,
-    height: viewport.height
-  });
-}
-function clampPoint(point, environment) {
-  const viewport = getViewportSize(environment);
-  return {
-    x: clamp(point.x, 0, viewport.width),
-    y: clamp(point.y, 0, viewport.height)
-  };
-}
-function getPopoverPosition(point, environment, options) {
-  const bounds = getPopoverBounds(environment);
-  const margin = 12;
-  const width = Math.min(
-    options?.width ?? 320,
-    Math.max(240, bounds.width - margin * 2)
-  );
-  const estimatedHeight = options?.estimatedHeight ?? 178;
-  const offset = options?.offset ?? 12;
-  return {
-    left: clamp(
-      point.x + offset,
-      bounds.left + margin,
-      bounds.left + bounds.width - width - margin
-    ),
-    top: clamp(
-      point.y + offset,
-      bounds.top + margin,
-      bounds.top + bounds.height - estimatedHeight - margin
-    )
-  };
-}
-function getPopoverBounds(environment) {
-  if (!environment) {
-    return {
-      left: 0,
-      top: 0,
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-  }
-  return environment.overlayRect;
-}
-function toHostPoint(point, environment) {
-  if (!environment) return point;
-  return {
-    x: point.x + environment.viewportRect.left,
-    y: point.y + environment.viewportRect.top
-  };
-}
-function toHostSelection(selection, environment) {
-  return {
-    left: selection.left + environment.viewportRect.left,
-    top: selection.top + environment.viewportRect.top,
-    width: selection.width,
-    height: selection.height
-  };
-}
-function toTargetPoint(point, environment) {
-  if (!environment) return point;
-  return {
-    x: point.x - environment.viewportRect.left,
-    y: point.y - environment.viewportRect.top
-  };
-}
-function toTargetPointFromHostEvent(event, environment) {
-  return toTargetPoint(
-    {
-      x: event.clientX,
-      y: event.clientY
-    },
-    environment
-  );
-}
-function placeLayerOverTarget(layer, environment) {
-  layer.style.left = `${environment.viewportRect.left}px`;
-  layer.style.top = `${environment.viewportRect.top}px`;
-  layer.style.width = `${environment.viewportRect.width}px`;
-  layer.style.height = `${environment.viewportRect.height}px`;
-  layer.style.right = "auto";
-  layer.style.bottom = "auto";
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), Math.max(min, max));
-}
-function roundRatio(value) {
-  return Math.round(value * 1e4) / 1e4;
-}
-function roundPoint(point) {
-  return {
-    x: Math.round(point.x),
-    y: Math.round(point.y)
-  };
-}
-
 // src/core/dom.anchor.ts
 var COMMON_ANCHOR_ATTRIBUTES = [
   "data-testid",
@@ -6383,6 +7288,20 @@ function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", enviro
     source: getDomSourceHint(target)
   };
 }
+function getDomAnchorFromElement(target, configuredAttribute = "data-qa-id", environment) {
+  if (target.ownerDocument !== environment.document) return void 0;
+  const candidates = createAnchorCandidates(target, configuredAttribute);
+  const primary = candidates[0];
+  if (!primary) return void 0;
+  return {
+    ...primary,
+    candidates,
+    htmlSnippet: getElementHtmlSnippet(
+      getAnchorSourceElement(target, primary, configuredAttribute) ?? target
+    ),
+    source: getDomSourceHint(target)
+  };
+}
 function getElementViewportSelection(anchor, environment, preferredSelection) {
   const element = getAnchorElement(anchor, environment, preferredSelection);
   if (!element) return void 0;
@@ -7201,59 +8120,23 @@ function getPointHighlightSelection(item, environment) {
   if (!point) return void 0;
   const size = 16;
   return {
-    viewport: {
-      left: point.viewport.x - size / 2,
-      top: point.viewport.y - size / 2,
-      width: size,
-      height: size
-    },
-    isBound: point.isBound
-  };
-}
-function getVisibleHighlightSelection(candidates, environment) {
-  return candidates.find(
-    (candidate) => Boolean(candidate && isSelectionInViewport(candidate.viewport, environment))
-  );
-}
-function isDomReviewItem(item) {
-  return item.scope === "dom" || item.kind === "note" && Boolean(item.anchor && getItemSelection(item));
-}
-
-// src/core/scroll.ts
-function waitForNextFrame(environment) {
-  return new Promise((resolve) => {
-    (environment?.window ?? window).requestAnimationFrame(() => resolve());
-  });
-}
-function runWithAutoScrollBehavior2(targetDocument, callback) {
-  const elements = [
-    targetDocument.documentElement,
-    targetDocument.body
-  ].filter((element) => Boolean(element));
-  const previousValues = elements.map((element) => element.style.scrollBehavior);
-  elements.forEach((element) => {
-    element.style.scrollBehavior = "auto";
-  });
-  try {
-    callback();
-  } finally {
-    elements.forEach((element, index) => {
-      element.style.scrollBehavior = previousValues[index] ?? "";
-    });
-  }
+    viewport: {
+      left: point.viewport.x - size / 2,
+      top: point.viewport.y - size / 2,
+      width: size,
+      height: size
+    },
+    isBound: point.isBound
+  };
 }
-function setDocumentScrollInstantly2(environment, position) {
-  const scrollElement = environment.document.scrollingElement;
-  if (scrollElement) {
-    scrollElement.scrollLeft = Math.max(0, Math.round(position.x));
-    scrollElement.scrollTop = Math.max(0, Math.round(position.y));
-    return;
-  }
-  environment.window.scrollTo(
-    Math.max(0, Math.round(position.x)),
-    Math.max(0, Math.round(position.y))
+function getVisibleHighlightSelection(candidates, environment) {
+  return candidates.find(
+    (candidate) => Boolean(candidate && isSelectionInViewport(candidate.viewport, environment))
   );
 }
+function isDomReviewItem(item) {
+  return item.scope === "dom" || item.kind === "note" && Boolean(item.anchor && getItemSelection(item));
+}
 
 // src/core/overlay.style.ts
 function createStyleElement() {
@@ -7915,6 +8798,12 @@ function createStyleElement() {
       outline-offset: 1px;
     }
 
+    @media (hover: none) and (pointer: coarse) {
+      .dfwr-textarea {
+        font-size: 16px;
+      }
+    }
+
     .dfwr-adjust-panel {
       display: grid;
       gap: 4px;
@@ -9621,6 +10510,7 @@ function createWebReviewKit(options) {
     close: () => app.close(),
     toggle: () => app.toggle(),
     setMode: (mode) => app.setMode(mode),
+    startElementReview: (element, comment) => app.startElementReview(element, comment),
     getMode: () => app.getMode(),
     highlightItem: (itemId) => app.highlightItem(itemId),
     setHiddenItemIds: (itemIds) => app.setHiddenItemIds(itemIds),
@@ -9751,6 +10641,16 @@ var WebReviewKitApp = class {
     this.areaDraft = void 0;
     this.render();
   }
+  async startElementReview(element, comment) {
+    if (!this.isOpen) {
+      this.isOpen = true;
+    }
+    this.setModeState("element");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.isSelectingArea = false;
+    await this.bindElementDraftToElement(element, comment);
+  }
   getMode() {
     return this.mode;
   }
@@ -9959,6 +10859,47 @@ var WebReviewKitApp = class {
     this.noteDraft = draft;
     this.render();
   }
+  async bindElementDraftToElement(element, comment) {
+    const environment = this.getEnvironment();
+    if (!environment || element.ownerDocument !== environment.document) return;
+    const viewport = getViewportSize(environment);
+    const draft = await this.withOverlayHidden(() => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return void 0;
+      const selection = {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height
+      };
+      const anchor = getDomAnchorFromElement(
+        element,
+        this.options.anchors?.attribute,
+        environment
+      );
+      const markerPoint = { x: selection.left, y: selection.top };
+      const marker = {
+        viewport: roundPoint(markerPoint),
+        relative: anchor ? getRelativePoint(markerPoint, anchor, environment) : void 0
+      };
+      const reviewSelection = {
+        viewport: toPublicSelection(selection),
+        relative: anchor ? getRelativeSelection(selection, anchor, environment) : void 0
+      };
+      const previewElement = "style" in element ? element : void 0;
+      return {
+        viewport,
+        anchor,
+        marker,
+        selection: reviewSelection,
+        comment,
+        previewElement
+      };
+    });
+    if (!draft) return;
+    this.noteDraft = draft;
+    this.render();
+  }
   async createAreaDraft(selection) {
     const environment = this.getEnvironment();
     if (!environment) return;
@@ -10044,8 +10985,8 @@ var WebReviewKitApp = class {
     if (!environment) return;
     const scroll = item.scroll;
     if (scroll) {
-      runWithAutoScrollBehavior2(environment.document, () => {
-        setDocumentScrollInstantly2(environment, scroll);
+      runWithAutoScrollBehavior(environment.document, () => {
+        setDocumentScrollInstantly(environment, scroll);
       });
       await waitForNextFrame(environment);
     }
@@ -10063,6 +11004,8 @@ function createNoopController() {
     },
     setMode() {
     },
+    async startElementReview() {
+    },
     getMode() {
       return "idle";
     },
@@ -11466,8 +12409,18 @@ var useReviewShellData = ({
     [qaStatusFilter, scopeFilteredNumberedActiveItems]
   );
   const hiddenOverlayItemIdList = (0, import_react16.useMemo)(
-    () => 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 = (0, import_react16.useMemo)(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -12201,6 +13154,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,
@@ -12272,7 +13331,11 @@ var ReviewShell = ({
   });
   const sourceShortcutCleanupRef = (0, import_react19.useRef)(null);
   const sourceInspectorInteractionRef = (0, import_react19.useRef)(false);
+  const [sidePanel, setSidePanel] = (0, import_react19.useState)("qa");
   const [sourceInspectorState, setSourceInspectorState] = (0, import_react19.useState)(null);
+  const [sectionOutline, setSectionOutline] = (0, import_react19.useState)(null);
+  const [sectionOutlineFilter, setSectionOutlineFilter] = (0, import_react19.useState)("");
+  const [collapsedSectionOutlineIds, setCollapsedSectionOutlineIds] = (0, import_react19.useState)(() => /* @__PURE__ */ new Set());
   const [isAllQaVisible, setIsAllQaVisible] = (0, import_react19.useState)(false);
   const sourceOpenOptions = (0, import_react19.useMemo)(
     () => ({
@@ -12281,7 +13344,42 @@ var ReviewShell = ({
     }),
     [sourceInspector, sourceRoot]
   );
+  const sourceCandidateOptions = (0, import_react19.useMemo)(
+    () => ({
+      ignore: sourceInspector?.ignore,
+      includePlacer: sourceInspector?.includePlacer
+    }),
+    [sourceInspector]
+  );
+  const sectionOutlineOptions = (0, import_react19.useMemo)(
+    () => ({
+      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 = (0, import_react19.useMemo)(
+    () => getSectionOutlineFilterTerms(sectionOutlineFilter),
+    [sectionOutlineFilter]
+  );
+  const filteredSectionOutline = (0, import_react19.useMemo)(
+    () => sectionOutline ? filterSectionOutlineEntries(sectionOutline, sectionOutlineFilterTerms) : [],
+    [sectionOutline, sectionOutlineFilterTerms]
+  );
+  const sectionOutlineTotalCount = (0, import_react19.useMemo)(
+    () => getSectionOutlineEntryCount(sectionOutline ?? []),
+    [sectionOutline]
+  );
+  const filteredSectionOutlineCount = (0, import_react19.useMemo)(
+    () => getSectionOutlineEntryCount(filteredSectionOutline),
+    [filteredSectionOutline]
+  );
+  const isSectionOutlineFiltering = sectionOutlineFilterTerms.length > 0;
   const {
     activeItems,
     activeRemainingItemCount,
@@ -12617,6 +13715,12 @@ var ReviewShell = ({
     sourceInspectorInteractionRef.current = false;
     setSourceInspectorState(null);
   }, []);
+  (0, import_react19.useEffect)(() => {
+    clearSourceInspector();
+    setSectionOutlineFilter("");
+    setCollapsedSectionOutlineIds(/* @__PURE__ */ new Set());
+    setSectionOutline(null);
+  }, [clearSourceInspector, targetSrc]);
   const getSourceInspectorRect = (0, import_react19.useCallback)(
     (element) => {
       const frame = iframeRef.current;
@@ -12670,13 +13774,15 @@ var ReviewShell = ({
   );
   const showSourceInspectorForTarget = (0, import_react19.useCallback)(
     (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) {
@@ -12698,12 +13804,16 @@ var ReviewShell = ({
     [
       getSourceInspectorPanelPosition,
       getSourceInspectorRect,
+      sourceCandidateOptions,
       sourceOpenOptions
     ]
   );
   const showSourceOutlineForTarget = (0, import_react19.useCallback)(
     (target2) => {
-      const firstCandidate = getSourceCandidates(target2)[0];
+      const firstCandidate = getSourceCandidates(
+        target2,
+        sourceCandidateOptions
+      )[0];
       const rect = firstCandidate ? getSourceInspectorRect(firstCandidate.element) : null;
       if (!firstCandidate || !rect) {
         setSourceInspectorState(null);
@@ -12720,8 +13830,35 @@ var ReviewShell = ({
       });
       return firstCandidate;
     },
-    [getSourceInspectorRect]
+    [getSourceInspectorRect, sourceCandidateOptions]
+  );
+  const showSourceOutlineForElement = (0, import_react19.useCallback)(
+    (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 = (0, import_react19.useCallback)(() => {
+    setSourceInspectorState((current) => current?.isPinned ? current : null);
+  }, []);
   const openSourceCandidate = (0, import_react19.useCallback)(
     (candidate) => {
       const didOpen = openSourceInEditor(candidate.source, {
@@ -12733,6 +13870,153 @@ var ReviewShell = ({
     },
     [clearSourceInspector, showToast, sourceOpenOptions]
   );
+  const getCurrentSectionOutline = (0, import_react19.useCallback)(
+    () => {
+      let frameDocument = null;
+      try {
+        frameDocument = iframeRef.current?.contentDocument ?? null;
+      } catch {
+        frameDocument = null;
+      }
+      return frameDocument ? getSectionOutline(frameDocument, sectionOutlineOptions) : [];
+    },
+    [iframeRef, sectionOutlineOptions]
+  );
+  const setSectionOutlineWithDefaultCollapse = (0, import_react19.useCallback)(
+    (nextSectionOutline) => {
+      setSectionOutline(nextSectionOutline);
+      setCollapsedSectionOutlineIds(
+        getDefaultCollapsedSectionOutlineIds(nextSectionOutline)
+      );
+    },
+    []
+  );
+  (0, import_react19.useEffect)(() => {
+    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 = (0, import_react19.useCallback)(() => {
+    setSidePanel("qa");
+    setIsListVisible((current) => sidePanel === "qa" ? !current : true);
+  }, [setIsListVisible, sidePanel]);
+  const toggleSourceTreePanel = (0, import_react19.useCallback)(() => {
+    if (!isSourceInspectorEnabled) return;
+    if (sidePanel === "source" && isListVisible) {
+      setIsListVisible(false);
+      return;
+    }
+    setSidePanel("source");
+    setSectionOutlineWithDefaultCollapse(getCurrentSectionOutline());
+    setIsListVisible(true);
+  }, [
+    getCurrentSectionOutline,
+    isListVisible,
+    isSourceInspectorEnabled,
+    setSectionOutlineWithDefaultCollapse,
+    setIsListVisible,
+    sidePanel
+  ]);
+  const toggleSectionOutlineEntry = (0, import_react19.useCallback)((entryId) => {
+    setCollapsedSectionOutlineIds((current) => {
+      const next = new Set(current);
+      if (next.has(entryId)) {
+        next.delete(entryId);
+      } else {
+        next.add(entryId);
+      }
+      return next;
+    });
+  }, []);
+  const scrollToSection = (0, import_react19.useCallback)((entry) => {
+    scrollElementInTarget(entry.element, "start");
+    centerFrameScrollOnElement(
+      frameScrollRef.current,
+      iframeRef.current,
+      entry.element
+    );
+  }, [frameScrollRef, iframeRef]);
+  const openSectionSource = (0, import_react19.useCallback)(
+    (entry) => {
+      const didOpen = openSourceInEditor(entry.source, {
+        ...sourceOpenOptions,
+        omitPosition: true
+      });
+      showToast(didOpen ? "Source opened" : "Source root required");
+    },
+    [showToast, sourceOpenOptions]
+  );
+  const openSectionData = (0, import_react19.useCallback)(
+    (entry) => {
+      const didOpen = openSourceInEditor(entry.data, sourceOpenOptions);
+      showToast(didOpen ? "Data opened" : "Data hint not found");
+    },
+    [showToast, sourceOpenOptions]
+  );
+  const startSectionDomReview = (0, import_react19.useCallback)(
+    (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 = (0, import_react19.useCallback)(() => {
     sourceShortcutCleanupRef.current?.();
     sourceShortcutCleanupRef.current = null;
@@ -12780,7 +14064,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;
       }
 
@@ -12797,7 +14081,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;
@@ -12898,8 +14182,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);
@@ -12933,6 +14218,7 @@ var ReviewShell = ({
         return;
       }
       if (!isOptionKeyEvent(event)) return;
+      if (isSourcePanelPinned) return;
       cancelReviewMode();
       setSourceSelecting(true);
     };
@@ -12983,6 +14269,7 @@ var ReviewShell = ({
     iframeRef,
     isSourceInspectorEnabled,
     showToast,
+    sourceCandidateOptions,
     showSourceOutlineForTarget,
     showSourceInspectorForTarget
   ]);
@@ -12997,12 +14284,19 @@ var ReviewShell = ({
       mode === "element"
     );
     bindSourceOpenShortcut();
+    if (sidePanel === "source" && isListVisible) {
+      setSectionOutlineWithDefaultCollapse(getCurrentSectionOutline());
+    }
   }, [
     bindSourceOpenShortcut,
+    getCurrentSectionOutline,
     iframeRef,
     initReviewKit,
+    isListVisible,
     mode,
-    refreshTargetFigmaConfig
+    refreshTargetFigmaConfig,
+    setSectionOutlineWithDefaultCollapse,
+    sidePanel
   ]);
   (0, import_react19.useEffect)(() => {
     const frame = window.requestAnimationFrame(bindSourceOpenShortcut);
@@ -13083,6 +14377,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__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: `df-review-section-outline-item is-depth-${entry.depth}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            "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__ */ (0, import_jsx_runtime17.jsx)(
+                  "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__ */ (0, import_jsx_runtime17.jsx)(ChevronDown, { "aria-hidden": "true" })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "df-review-section-outline-toggle is-placeholder"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "button",
+                  {
+                    className: "df-review-section-outline-name",
+                    type: "button",
+                    onClick: () => scrollToSection(entry),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: entry.label })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "df-review-section-outline-links", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "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__ */ (0, import_jsx_runtime17.jsx)(Database, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "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__ */ (0, import_jsx_runtime17.jsx)(CodeXml, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "df-review-section-outline-divider",
+                      children: "|"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "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__ */ (0, import_jsx_runtime17.jsx)(SquareMousePointer, { "aria-hidden": "true" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          hasChildren && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-section-outline-children", children: entry.children.map(renderSectionOutlineEntry) })
+        ]
+      },
+      entry.id
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
@@ -13113,13 +14513,6 @@ var ReviewShell = ({
             onOpenSettings: openFigmaSettings
           }
         ),
-        currentPagePresenceUsers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-presence-row", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          PresenceOverlay,
-          {
-            presenceSessionId,
-            users: currentPagePresenceUsers
-          }
-        ) }),
         isSitemapOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           SitemapModal,
           {
@@ -13172,19 +14565,40 @@ var ReviewShell = ({
           }
         ),
         toastMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-copy-toast", role: "status", children: toastMessage }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-side-rail", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          "button",
-          {
-            "aria-label": isListVisible ? "Hide QA list" : "Show QA list",
-            className: "df-review-side-toggle",
-            type: "button",
-            onClick: () => setIsListVisible((current) => !current),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GripVertical, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "QA" })
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df-review-side-rail", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "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__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FileText, {}) })
+            }
+          ),
+          isSourceInspectorEnabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "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__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Search, {}) })
+            }
+          ),
+          currentPagePresenceUsers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            PresenceOverlay,
+            {
+              presenceSessionId,
+              users: currentPagePresenceUsers
+            }
+          )
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ReviewQaPanel,
           {
@@ -13195,7 +14609,7 @@ var ReviewShell = ({
             filteredNumberedActiveItems,
             getItemPresetScope,
             hiddenOverlayItemIds,
-            isListVisible,
+            isListVisible: isQaPanelVisible,
             isAllQaVisible,
             isRemoteSource,
             copiedPromptKey,
@@ -13223,6 +14637,49 @@ var ReviewShell = ({
             onToggleItemOverlayVisibility: toggleItemOverlayVisibility
           }
         ),
+        isSourceInspectorEnabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "aside",
+          {
+            className: "df-review-source-tree-panel",
+            "aria-hidden": !isSourceTreePanelVisible,
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: "df-review-section-outline", className: "df-review-section-outline", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df-review-section-outline-head", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "Source Tree" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("small", { children: isSectionOutlineFiltering ? `${filteredSectionOutlineCount} / ${sectionOutlineTotalCount} results` : `${sectionOutline?.length ?? 0} roots` })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df-review-section-outline-filter", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Search, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "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__ */ (0, import_jsx_runtime17.jsx)(
+                    "button",
+                    {
+                      "aria-label": "Clear source tree filter",
+                      className: "df-review-section-outline-filter-clear",
+                      type: "button",
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => setSectionOutlineFilter(""),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(X, { "aria-hidden": "true" })
+                    }
+                  )
+                ] })
+              ] }),
+              filteredSectionOutline.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-section-outline-list", children: filteredSectionOutline.map(renderSectionOutlineEntry) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-section-outline-empty", children: isSectionOutlineFiltering ? "No source matches" : "No sections found" })
+            ] })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ReviewTargetFrame,
           {
@@ -13294,7 +14751,7 @@ var ReviewShell = ({
                 /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "df-review-source-candidate-list", children: sourceInspectorState.candidates.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "button",
                   {
-                    className: "df-review-source-candidate",
+                    className: `df-review-source-candidate is-${candidate.kind}`,
                     type: "button",
                     onClick: (event) => {
                       event.preventDefault();
@@ -13304,7 +14761,7 @@ var ReviewShell = ({
                     children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "df-review-source-candidate-main", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: candidate.label }),
                       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: candidate.filePath }),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("small", { children: candidate.positionLabel || (candidate.usesPosition ? "" : "file only") })
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("small", { children: candidate.positionLabel || "-:-" })
                     ] })
                   },
                   candidate.id
@@ -13528,12 +14985,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:
@@ -13541,16 +15002,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:
   (**