@designfever/web-review-kit 0.8.2 → 0.8.4

package/dist/react-shell.js

@@ -5,10 +5,12 @@ import {
   createWebReviewKit,
   getBoundMarkerPoint,
   getDraftViewportScale,
+  getErrorMessage,
   getHotkeyActionKey,
   getItemHighlightSelection,
   getNumberedReviewItems,
   getReviewViewportScope,
+  isEditableEventTarget,
   isHotkey,
   isPointInViewport,
   normalizeReviewItemStatus,
@@ -16,7 +18,7 @@ import {
   runWithAutoScrollBehavior,
   shouldShowMarkerForScope,
   toHostPoint
-} from "./chunk-ZWJNUOYV.js";
+} from "./chunk-FWN7RQCW.js";
 
 // src/react-shell.tsx
 import React3 from "react";
@@ -452,6 +454,11 @@ var reviewShellSitemapStyle = `
 				    padding: 18px;
   }
 
+  /* \uB2EB\uC544\uB3C4 unmount \uD558\uC9C0 \uC54A\uACE0 \uC228\uAE34\uB2E4. visibility \uB294 \uB9AC\uC2A4\uD2B8 \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uBCF4\uC874\uD55C\uB2E4. */
+  .df-review-sitemap-modal.is-hidden {
+    visibility: hidden;
+  }
+
 	  .df-review-sitemap-backdrop {
 	    position: absolute;
 	    inset: 0;
@@ -504,7 +511,7 @@ var reviewShellSitemapStyle = `
 	    font-weight: var(--df-review-font-weight-normal);
 	  }
 
-  .df-review-sitemap-header button {
+  .df-review-sitemap-header > button {
     display: grid;
     place-items: center;
 	    width: 34px;
@@ -518,11 +525,36 @@ var reviewShellSitemapStyle = `
 	    font-weight: var(--df-review-font-weight-normal);
 	  }
 
-	  .df-review-sitemap-header button:hover {
+	  .df-review-sitemap-header > button:hover {
 	    border-color: var(--df-review-accent);
 	    background: var(--df-review-control-hover);
 	  }
 
+  /* \uD5E4\uB354 \uC694\uC57D \uCE74\uC6B4\uD2B8\uB97C \uADF8\uB300\uB85C status filter \uD1A0\uAE00\uB85C \uC4F4\uB2E4. */
+  .df-review-sitemap-summary-filter {
+    display: inline;
+    border: 0;
+    padding: 0;
+    background: none;
+    color: var(--df-review-muted);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .df-review-sitemap-summary-filter:hover,
+  .df-review-sitemap-summary-filter:focus-visible {
+    color: var(--df-review-text);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    outline: none;
+  }
+
+  .df-review-sitemap-summary-filter.is-active {
+    color: var(--df-review-accent);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
   .df-review-sitemap-controls {
     display: flex;
     align-items: center;
@@ -2301,6 +2333,8 @@ var reviewShellQaPanelStyle = `
 
   .df-review-qa-draft-host[data-has-draft-composer="true"] {
     display: block;
+    /* Source Tree \uD328\uB110(z 900) \uC704\uB85C \uC62C\uB824 draft composer \uAC00 \uAC00\uB824\uC9C0\uC9C0 \uC54A\uAC8C \uD55C\uB2E4. */
+    z-index: 950;
   }
 
 	  .df-review-shell:not(.is-list-visible) .df-review-qa-panel,
@@ -5317,7 +5351,7 @@ function ensureReviewShellStyle() {
 // src/react-shell/review/shell.tsx
 import {
   useMemo as useMemo18,
-  useState as useState18
+  useState as useState19
 } from "react";
 
 // src/react-shell/store/store.context.tsx
@@ -6190,11 +6224,140 @@ function getReviewFigmaImageErrorMessage(error) {
   return error instanceof Error ? error.message : "Figma image request failed.";
 }
 
-// src/react-shell/figma/image.overlay.controller.ts
+// src/react-shell/figma/image.overlay.state.ts
+var STORAGE_KEY_PREFIX = "df-review-figma-image-overlay-state:";
+var STORAGE_VERSION = 2;
+var DEFAULT_MODE = "normal";
 var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY = 0.48;
-var REVIEW_FIGMA_IMAGE_OVERLAY_STORAGE_KEY_PREFIX = "df-review-figma-image-overlay-state:";
-var REVIEW_FIGMA_IMAGE_OVERLAY_STORAGE_VERSION = 2;
-var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_MODE = "normal";
+var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE = {
+  selectedImageId: null,
+  imageStates: {},
+  lastVisibleImageIds: []
+};
+var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE = {
+  isVisible: false,
+  opacity: DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY,
+  isLocked: false,
+  mode: DEFAULT_MODE,
+  offsetY: 0
+};
+function createReviewFigmaImageOverlayStorageKey(target) {
+  return `${STORAGE_KEY_PREFIX}${createReviewFigmaImageTargetKey(target)}`;
+}
+function readStoredReviewFigmaImageOverlayState(storageKey) {
+  if (typeof window === "undefined") {
+    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
+  }
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    if (!value) return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
+    return normalizeReviewFigmaImageOverlayState(JSON.parse(value));
+  } catch {
+    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
+  }
+}
+function writeStoredReviewFigmaImageOverlayState(storageKey, state) {
+  if (typeof window === "undefined") return;
+  try {
+    if (isDefaultReviewFigmaImageOverlayState(state)) {
+      window.localStorage.removeItem(storageKey);
+      return;
+    }
+    window.localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        version: STORAGE_VERSION,
+        ...state
+      })
+    );
+  } catch {
+    return;
+  }
+}
+function normalizeReviewFigmaImageOverlayMode(value) {
+  return value === "invert" ? "invert" : DEFAULT_MODE;
+}
+function normalizeReviewFigmaImageOverlayOffsetY(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
+  return Math.round(value);
+}
+function clampReviewFigmaImageOverlayOpacity(value) {
+  if (!Number.isFinite(value)) return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY;
+  return Math.min(1, Math.max(0, value));
+}
+function getReviewFigmaImageOverlayItemState(state, imageId) {
+  return imageId ? state.imageStates[imageId] ?? DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE : DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE;
+}
+function updateSelectedReviewFigmaImageOverlayItemState(state, updater) {
+  return state.selectedImageId ? updateReviewFigmaImageOverlayItemState(
+    state.imageStates,
+    state.selectedImageId,
+    updater
+  ) : state.imageStates;
+}
+function updateReviewFigmaImageOverlayItemState(imageStates, imageId, updater) {
+  return {
+    ...imageStates,
+    [imageId]: updater(
+      imageStates[imageId] ?? DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE
+    )
+  };
+}
+function normalizeReviewFigmaImageOverlayState(value) {
+  if (!value || typeof value !== "object") {
+    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
+  }
+  const state = value;
+  const selectedImageId = typeof state.selectedImageId === "string" ? state.selectedImageId : null;
+  const lastVisibleImageIds = Array.isArray(state.lastVisibleImageIds) ? state.lastVisibleImageIds.filter(
+    (imageId) => typeof imageId === "string"
+  ) : [];
+  const imageStates = normalizeReviewFigmaImageOverlayItemStateRecord(
+    state.imageStates
+  );
+  if (Object.keys(imageStates).length === 0 && selectedImageId) {
+    imageStates[selectedImageId] = normalizeReviewFigmaImageOverlayItemState(
+      state
+    );
+  }
+  return {
+    selectedImageId,
+    imageStates,
+    lastVisibleImageIds
+  };
+}
+function normalizeReviewFigmaImageOverlayItemStateRecord(value) {
+  if (!value || typeof value !== "object") return {};
+  return Object.fromEntries(
+    Object.entries(value).flatMap(([imageId, itemState]) => {
+      if (!imageId || typeof itemState !== "object") return [];
+      return [
+        [
+          imageId,
+          normalizeReviewFigmaImageOverlayItemState(
+            itemState
+          )
+        ]
+      ];
+    })
+  );
+}
+function normalizeReviewFigmaImageOverlayItemState(value) {
+  return {
+    isVisible: value.isVisible === true,
+    opacity: clampReviewFigmaImageOverlayOpacity(
+      typeof value.opacity === "number" ? value.opacity : DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY
+    ),
+    isLocked: value.isLocked === true,
+    mode: normalizeReviewFigmaImageOverlayMode(value.mode),
+    offsetY: normalizeReviewFigmaImageOverlayOffsetY(value.offsetY)
+  };
+}
+function isDefaultReviewFigmaImageOverlayState(state) {
+  return state.selectedImageId === null && Object.keys(state.imageStates).length === 0 && state.lastVisibleImageIds.length === 0;
+}
+
+// src/react-shell/figma/image.overlay.controller.ts
 var useReviewFigmaImageOverlayController = ({
   images,
   isLoading,
@@ -6213,8 +6376,12 @@ var useReviewFigmaImageOverlayController = ({
     (updater) => {
       setStateContainer((currentContainer) => {
         const currentState = currentContainer.storageKey === storageKey ? currentContainer.state : readStoredReviewFigmaImageOverlayState(storageKey);
+        const nextState = updater(currentState);
+        if (currentContainer.storageKey === storageKey && nextState === currentState) {
+          return currentContainer;
+        }
         return {
-          state: updater(currentState),
+          state: nextState,
           storageKey
         };
       });
@@ -6254,7 +6421,7 @@ var useReviewFigmaImageOverlayController = ({
       const lastVisibleImageIds = currentState.lastVisibleImageIds.filter(
         (imageId) => nextImageIds.has(imageId)
       );
-      if (selectedImageId === currentState.selectedImageId && imageStates === currentState.imageStates && lastVisibleImageIds.length === currentState.lastVisibleImageIds.length) {
+      if (selectedImageId === currentState.selectedImageId && Object.keys(imageStates).length === Object.keys(currentState.imageStates).length && lastVisibleImageIds.length === currentState.lastVisibleImageIds.length) {
         return currentState;
       }
       return {
@@ -6451,78 +6618,54 @@ var useReviewFigmaImageOverlayController = ({
       };
     });
   }, [images, updateState]);
+  const updateSelectedOverlayState = useCallback2(
+    (updater) => {
+      updateState((currentState) => ({
+        ...currentState,
+        imageStates: updateSelectedReviewFigmaImageOverlayItemState(
+          currentState,
+          updater
+        )
+      }));
+    },
+    [updateState]
+  );
   const setOverlayOpacity = useCallback2((opacity) => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          opacity: clampReviewFigmaImageOverlayOpacity(opacity)
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      opacity: clampReviewFigmaImageOverlayOpacity(opacity)
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const setOverlayLocked = useCallback2((isLocked) => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          isLocked
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      isLocked
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const toggleOverlayLocked = useCallback2(() => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          isLocked: !itemState.isLocked
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      isLocked: !itemState.isLocked
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const setOverlayMode = useCallback2((mode) => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          mode: normalizeReviewFigmaImageOverlayMode(mode)
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      mode: normalizeReviewFigmaImageOverlayMode(mode)
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const toggleOverlayMode = useCallback2(() => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          mode: itemState.mode === "invert" ? "normal" : "invert"
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      mode: itemState.mode === "invert" ? "normal" : "invert"
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const setOverlayOffsetY = useCallback2((offsetY) => {
-    updateState((currentState) => ({
-      ...currentState,
-      imageStates: updateSelectedReviewFigmaImageOverlayItemState(
-        currentState,
-        (itemState) => ({
-          ...itemState,
-          offsetY: normalizeReviewFigmaImageOverlayOffsetY(offsetY)
-        })
-      )
+    updateSelectedOverlayState((itemState) => ({
+      ...itemState,
+      offsetY: normalizeReviewFigmaImageOverlayOffsetY(offsetY)
     }));
-  }, [updateState]);
+  }, [updateSelectedOverlayState]);
   const resetOverlay = useCallback2(() => {
     updateState((currentState) => ({
       ...currentState,
@@ -6563,137 +6706,6 @@ var useReviewFigmaImageOverlayController = ({
     toggleOverlayVisible
   };
 };
-function createReviewFigmaImageOverlayStorageKey(target) {
-  return `${REVIEW_FIGMA_IMAGE_OVERLAY_STORAGE_KEY_PREFIX}${createReviewFigmaImageTargetKey(target)}`;
-}
-function readStoredReviewFigmaImageOverlayState(storageKey) {
-  if (typeof window === "undefined") {
-    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
-  }
-  try {
-    const value = window.localStorage.getItem(storageKey);
-    if (!value) return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
-    return normalizeReviewFigmaImageOverlayState(JSON.parse(value));
-  } catch {
-    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
-  }
-}
-function writeStoredReviewFigmaImageOverlayState(storageKey, state) {
-  if (typeof window === "undefined") return;
-  if (isDefaultReviewFigmaImageOverlayState(state)) {
-    try {
-      window.localStorage.removeItem(storageKey);
-    } catch {
-      return;
-    }
-    return;
-  }
-  try {
-    window.localStorage.setItem(
-      storageKey,
-      JSON.stringify({
-        version: REVIEW_FIGMA_IMAGE_OVERLAY_STORAGE_VERSION,
-        ...state
-      })
-    );
-  } catch {
-    return;
-  }
-}
-var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE = {
-  selectedImageId: null,
-  imageStates: {},
-  lastVisibleImageIds: []
-};
-var DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE = {
-  isVisible: false,
-  opacity: DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY,
-  isLocked: false,
-  mode: DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_MODE,
-  offsetY: 0
-};
-function normalizeReviewFigmaImageOverlayState(value) {
-  if (!value || typeof value !== "object") {
-    return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_STATE;
-  }
-  const state = value;
-  const selectedImageId = typeof state.selectedImageId === "string" ? state.selectedImageId : null;
-  const lastVisibleImageIds = Array.isArray(state.lastVisibleImageIds) ? state.lastVisibleImageIds.filter(
-    (imageId) => typeof imageId === "string"
-  ) : [];
-  const imageStates = normalizeReviewFigmaImageOverlayItemStateRecord(
-    state.imageStates
-  );
-  if (Object.keys(imageStates).length === 0 && selectedImageId) {
-    imageStates[selectedImageId] = normalizeReviewFigmaImageOverlayItemState(
-      state
-    );
-  }
-  return {
-    selectedImageId,
-    imageStates,
-    lastVisibleImageIds
-  };
-}
-function normalizeReviewFigmaImageOverlayItemStateRecord(value) {
-  if (!value || typeof value !== "object") return {};
-  return Object.fromEntries(
-    Object.entries(value).flatMap(([imageId, itemState]) => {
-      if (!imageId || typeof itemState !== "object") return [];
-      return [
-        [
-          imageId,
-          normalizeReviewFigmaImageOverlayItemState(
-            itemState
-          )
-        ]
-      ];
-    })
-  );
-}
-function normalizeReviewFigmaImageOverlayItemState(value) {
-  return {
-    isVisible: value.isVisible === true,
-    opacity: clampReviewFigmaImageOverlayOpacity(
-      typeof value.opacity === "number" ? value.opacity : DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY
-    ),
-    isLocked: value.isLocked === true,
-    mode: normalizeReviewFigmaImageOverlayMode(value.mode),
-    offsetY: normalizeReviewFigmaImageOverlayOffsetY(value.offsetY)
-  };
-}
-function normalizeReviewFigmaImageOverlayMode(value) {
-  return value === "invert" ? "invert" : DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_MODE;
-}
-function normalizeReviewFigmaImageOverlayOffsetY(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
-  return Math.round(value);
-}
-function clampReviewFigmaImageOverlayOpacity(value) {
-  if (!Number.isFinite(value)) return DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_OPACITY;
-  return Math.min(1, Math.max(0, value));
-}
-function isDefaultReviewFigmaImageOverlayState(state) {
-  return state.selectedImageId === null && Object.keys(state.imageStates).length === 0 && state.lastVisibleImageIds.length === 0;
-}
-function getReviewFigmaImageOverlayItemState(state, imageId) {
-  return imageId ? state.imageStates[imageId] ?? DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE : DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE;
-}
-function updateSelectedReviewFigmaImageOverlayItemState(state, updater) {
-  return state.selectedImageId ? updateReviewFigmaImageOverlayItemState(
-    state.imageStates,
-    state.selectedImageId,
-    updater
-  ) : state.imageStates;
-}
-function updateReviewFigmaImageOverlayItemState(imageStates, imageId, updater) {
-  return {
-    ...imageStates,
-    [imageId]: updater(
-      imageStates[imageId] ?? DEFAULT_REVIEW_FIGMA_IMAGE_OVERLAY_ITEM_STATE
-    )
-  };
-}
 
 // src/react-shell/figma/image-panel.utils.ts
 var DEFAULT_FIGMA_IMAGE_LAYER_STATE = {
@@ -7551,11 +7563,19 @@ var updateShellUrl = (target, size, source) => {
   }
   url.searchParams.delete("item");
   url.searchParams.delete("panel");
-  window.history.replaceState(null, "", `${url.pathname}${url.search}`);
+  window.history.replaceState(
+    null,
+    "",
+    `${url.pathname}${url.search}${url.hash}`
+  );
 };
 var updateShellUrlForItem = (target, size, itemId, source) => {
   const url = getShellUrlForItem(target, size, itemId, source);
-  window.history.replaceState(null, "", `${url.pathname}${url.search}`);
+  window.history.replaceState(
+    null,
+    "",
+    `${url.pathname}${url.search}${url.hash}`
+  );
 };
 var getShellUrlForItem = (target, size, itemId, source) => {
   const url = new URL(window.location.href);
@@ -9732,6 +9752,26 @@ var REVIEW_QA_STATUS_FILTER_VALUES = /* @__PURE__ */ new Set([
   "hold",
   "done"
 ]);
+var readStorage = (key) => {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+var writeStorage = (key, value) => {
+  if (typeof window === "undefined") return;
+  try {
+    if (value === null) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, value);
+    }
+  } catch {
+    return;
+  }
+};
 var normalizeReviewTheme = (value) => value === "light" || value === "system" || value === "dark" ? value : DEFAULT_REVIEW_THEME;
 var normalizeReviewSidePanel = (value) => {
   if (value === "qa" || value === "source" || value === "figma-images") {
@@ -9770,100 +9810,35 @@ var normalizeStoredSourceTreeMetaVisibility = (value) => {
     className: typeof metaVisibility.className === "boolean" ? metaVisibility.className : DEFAULT_SOURCE_TREE_META_VISIBILITY.className
   };
 };
-var getStoredFigmaToken = () => {
-  if (typeof window === "undefined") return "";
-  try {
-    return window.localStorage.getItem(FIGMA_TOKEN_STORAGE_KEY) ?? "";
-  } catch {
-    return "";
-  }
-};
+var getStoredFigmaToken = () => readStorage(FIGMA_TOKEN_STORAGE_KEY) ?? "";
 var writeStoredFigmaToken = (token) => {
-  if (typeof window === "undefined") return;
-  try {
-    if (token) {
-      window.localStorage.setItem(FIGMA_TOKEN_STORAGE_KEY, token);
-    } else {
-      window.localStorage.removeItem(FIGMA_TOKEN_STORAGE_KEY);
-    }
-  } catch {
-    return;
-  }
+  writeStorage(FIGMA_TOKEN_STORAGE_KEY, token || null);
 };
 var getStoredReviewUserId = (fallback = "") => {
   const normalizedFallback = fallback.trim();
-  if (typeof window === "undefined") return normalizedFallback;
-  try {
-    return window.localStorage.getItem(REVIEW_USER_ID_STORAGE_KEY)?.trim() || normalizedFallback;
-  } catch {
-    return normalizedFallback;
-  }
+  return readStorage(REVIEW_USER_ID_STORAGE_KEY)?.trim() || normalizedFallback;
 };
 var writeStoredReviewUserId = (userId) => {
-  if (typeof window === "undefined") return;
-  try {
-    if (userId) {
-      window.localStorage.setItem(REVIEW_USER_ID_STORAGE_KEY, userId);
-    } else {
-      window.localStorage.removeItem(REVIEW_USER_ID_STORAGE_KEY);
-    }
-  } catch {
-    return;
-  }
-};
-var getStoredReviewTheme = () => {
-  if (typeof window === "undefined") return DEFAULT_REVIEW_THEME;
-  try {
-    return normalizeReviewTheme(
-      window.localStorage.getItem(REVIEW_THEME_STORAGE_KEY)
-    );
-  } catch {
-    return DEFAULT_REVIEW_THEME;
-  }
+  writeStorage(REVIEW_USER_ID_STORAGE_KEY, userId || null);
 };
+var getStoredReviewTheme = () => normalizeReviewTheme(readStorage(REVIEW_THEME_STORAGE_KEY));
 var writeStoredReviewTheme = (theme) => {
-  if (typeof window === "undefined") return;
-  try {
-    if (theme === DEFAULT_REVIEW_THEME) {
-      window.localStorage.removeItem(REVIEW_THEME_STORAGE_KEY);
-    } else {
-      window.localStorage.setItem(REVIEW_THEME_STORAGE_KEY, theme);
-    }
-  } catch {
-    return;
-  }
+  writeStorage(
+    REVIEW_THEME_STORAGE_KEY,
+    theme === DEFAULT_REVIEW_THEME ? null : theme
+  );
 };
 var getStoredReviewTooltipsEnabled = () => {
-  if (typeof window === "undefined") return DEFAULT_REVIEW_TOOLTIPS_ENABLED;
-  try {
-    const value = window.localStorage.getItem(REVIEW_TOOLTIP_STORAGE_KEY);
-    return value === null ? DEFAULT_REVIEW_TOOLTIPS_ENABLED : value !== "false";
-  } catch {
-    return DEFAULT_REVIEW_TOOLTIPS_ENABLED;
-  }
+  const value = readStorage(REVIEW_TOOLTIP_STORAGE_KEY);
+  return value === null ? DEFAULT_REVIEW_TOOLTIPS_ENABLED : value !== "false";
 };
 var writeStoredReviewTooltipsEnabled = (isEnabled) => {
-  if (typeof window === "undefined") return;
-  try {
-    if (isEnabled === DEFAULT_REVIEW_TOOLTIPS_ENABLED) {
-      window.localStorage.removeItem(REVIEW_TOOLTIP_STORAGE_KEY);
-    } else {
-      window.localStorage.setItem(REVIEW_TOOLTIP_STORAGE_KEY, "false");
-    }
-  } catch {
-    return;
-  }
-};
-var getStoredReviewSidePanel = () => {
-  if (typeof window === "undefined") return "qa";
-  try {
-    return normalizeStoredReviewSidePanel(
-      window.localStorage.getItem(REVIEW_SIDE_PANEL_STORAGE_KEY)
-    );
-  } catch {
-    return "qa";
-  }
+  writeStorage(
+    REVIEW_TOOLTIP_STORAGE_KEY,
+    isEnabled === DEFAULT_REVIEW_TOOLTIPS_ENABLED ? null : "false"
+  );
 };
+var getStoredReviewSidePanel = () => normalizeStoredReviewSidePanel(readStorage(REVIEW_SIDE_PANEL_STORAGE_KEY));
 var getInitialReviewSidePanel = () => {
   if (typeof window === "undefined") return null;
   try {
@@ -9875,106 +9850,49 @@ var getInitialReviewSidePanel = () => {
   }
 };
 var writeStoredReviewSidePanel = (sidePanel) => {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(
-      REVIEW_SIDE_PANEL_STORAGE_KEY,
-      normalizeStoredReviewSidePanel(sidePanel)
-    );
-  } catch {
-    return;
-  }
+  writeStorage(
+    REVIEW_SIDE_PANEL_STORAGE_KEY,
+    normalizeStoredReviewSidePanel(sidePanel)
+  );
 };
 var getStoredReviewSidePanelVisible = () => {
-  if (typeof window === "undefined") return true;
-  try {
-    const value = window.localStorage.getItem(
-      REVIEW_SIDE_PANEL_VISIBLE_STORAGE_KEY
-    );
-    return value === null ? true : value === "true";
-  } catch {
-    return true;
-  }
+  const value = readStorage(REVIEW_SIDE_PANEL_VISIBLE_STORAGE_KEY);
+  return value === null ? true : value === "true";
 };
 var writeStoredReviewSidePanelVisible = (isVisible) => {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(
-      REVIEW_SIDE_PANEL_VISIBLE_STORAGE_KEY,
-      isVisible ? "true" : "false"
-    );
-  } catch {
-    return;
-  }
-};
-var getStoredReviewQaStatusFilters = () => {
-  if (typeof window === "undefined") return getDefaultReviewQaStatusFilters();
-  try {
-    return normalizeStoredReviewQaStatusFilters(
-      window.localStorage.getItem(REVIEW_QA_STATUS_FILTER_STORAGE_KEY)
-    );
-  } catch {
-    return getDefaultReviewQaStatusFilters();
-  }
+  writeStorage(
+    REVIEW_SIDE_PANEL_VISIBLE_STORAGE_KEY,
+    isVisible ? "true" : "false"
+  );
 };
+var getStoredReviewQaStatusFilters = () => normalizeStoredReviewQaStatusFilters(
+  readStorage(REVIEW_QA_STATUS_FILTER_STORAGE_KEY)
+);
 var writeStoredReviewQaStatusFilters = (filters) => {
-  if (typeof window === "undefined") return;
-  try {
-    const normalizedFilters = normalizeReviewQaStatusFilters(filters);
-    if (isDefaultReviewQaStatusFilters(normalizedFilters)) {
-      window.localStorage.removeItem(REVIEW_QA_STATUS_FILTER_STORAGE_KEY);
-    } else {
-      window.localStorage.setItem(
-        REVIEW_QA_STATUS_FILTER_STORAGE_KEY,
-        JSON.stringify(normalizedFilters)
-      );
-    }
-  } catch {
-    return;
-  }
-};
-var getStoredSourceTreeFilter = () => {
-  if (typeof window === "undefined") return "";
-  try {
-    return window.localStorage.getItem(REVIEW_SOURCE_TREE_FILTER_STORAGE_KEY) ?? "";
-  } catch {
-    return "";
-  }
+  const normalizedFilters = normalizeReviewQaStatusFilters(filters);
+  writeStorage(
+    REVIEW_QA_STATUS_FILTER_STORAGE_KEY,
+    isDefaultReviewQaStatusFilters(normalizedFilters) ? null : JSON.stringify(normalizedFilters)
+  );
 };
+var getStoredSourceTreeFilter = () => readStorage(REVIEW_SOURCE_TREE_FILTER_STORAGE_KEY) ?? "";
 var writeStoredSourceTreeFilter = (filter) => {
-  if (typeof window === "undefined") return;
-  try {
-    if (filter) {
-      window.localStorage.setItem(REVIEW_SOURCE_TREE_FILTER_STORAGE_KEY, filter);
-    } else {
-      window.localStorage.removeItem(REVIEW_SOURCE_TREE_FILTER_STORAGE_KEY);
-    }
-  } catch {
-    return;
-  }
+  writeStorage(REVIEW_SOURCE_TREE_FILTER_STORAGE_KEY, filter || null);
 };
 var getStoredSourceTreeMetaVisibility = () => {
-  if (typeof window === "undefined") return DEFAULT_SOURCE_TREE_META_VISIBILITY;
+  const value = readStorage(REVIEW_SOURCE_TREE_META_STORAGE_KEY);
+  if (!value) return DEFAULT_SOURCE_TREE_META_VISIBILITY;
   try {
-    const value = window.localStorage.getItem(
-      REVIEW_SOURCE_TREE_META_STORAGE_KEY
-    );
-    if (!value) return DEFAULT_SOURCE_TREE_META_VISIBILITY;
     return normalizeStoredSourceTreeMetaVisibility(JSON.parse(value));
   } catch {
     return DEFAULT_SOURCE_TREE_META_VISIBILITY;
   }
 };
 var writeStoredSourceTreeMetaVisibility = (metaVisibility) => {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(
-      REVIEW_SOURCE_TREE_META_STORAGE_KEY,
-      JSON.stringify(normalizeStoredSourceTreeMetaVisibility(metaVisibility))
-    );
-  } catch {
-    return;
-  }
+  writeStorage(
+    REVIEW_SOURCE_TREE_META_STORAGE_KEY,
+    JSON.stringify(normalizeStoredSourceTreeMetaVisibility(metaVisibility))
+  );
 };
 var getSystemReviewTheme = () => {
   if (typeof window === "undefined" || !window.matchMedia) return "dark";
@@ -10784,7 +10702,7 @@ function createSourceCandidate(element, source, depth, kind, context) {
   const column = getSourcePosition(source.column);
   const position = line ? `:${line}${column ? `:${column}` : ""}` : "";
   return {
-    id: `${kind}:${getSourceCandidateKey(source)}:${repeatInfo?.index ?? 0}:${depth}`,
+    id: `${kind}:${getSourceCandidateDedupeKey(source)}:${repeatInfo?.index ?? 0}:${depth}`,
     depth,
     element,
     filePath: getDisplaySourcePath(source.file) ?? fileName,
@@ -10814,16 +10732,6 @@ function takeVisibleSourceCandidates(candidates) {
   }
   return visible;
 }
-function getSourceCandidateKey(source) {
-  return [
-    source.file,
-    source.component,
-    source.line,
-    source.column,
-    source.sectionId,
-    source.sectionIndex
-  ].filter(Boolean).join("|");
-}
 function getSourceCandidateDedupeKey(source) {
   return [
     source.file,
@@ -11244,11 +11152,6 @@ var getSectionDomAdjustmentKeyDelta = (event) => {
   return null;
 };
 var isDomAdjustmentEmpty = (position) => position.x === 0 && position.y === 0;
-var isEditableKeyTarget = (target) => {
-  if (!(target instanceof HTMLElement)) return false;
-  const tagName = target.tagName;
-  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT" || target.isContentEditable;
-};
 var COMPONENT_SELECTION_ACTION_SELECTOR = [
   "a",
   "button",
@@ -11418,7 +11321,7 @@ function useReviewSectionOutline({
   useEffect6(() => {
     if (!activeDomAdjustmentEntryId) return void 0;
     const handleKeyDown = (event) => {
-      if (isEditableKeyTarget(event.target)) return;
+      if (isEditableEventTarget(event)) return;
       const delta = getSectionDomAdjustmentKeyDelta(event);
       if (!delta) return;
       const position = domAdjustmentManagerRef.current?.adjust(
@@ -12866,7 +12769,7 @@ var ReviewShellFrameContainer = ({
 };
 
 // src/react-shell/review/shell.modals.container.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/react-shell/review/modal.tsx
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -13270,11 +13173,12 @@ var ReviewSettingsModal = ({
 
 // src/react-shell/sitemap/modal.tsx
 import {
+  Fragment as Fragment3,
   useMemo as useMemo6,
   useState as useState8
 } from "react";
 
-// src/react-shell/sitemap/tree.ts
+// src/react-shell/sitemap/count.ts
 var WORKFLOW_STATUSES = [
   "todo",
   "doing",
@@ -13298,33 +13202,11 @@ var createEmptySitemapQaCount = () => ({
   viewport: {}
 });
 var createSitemapViewportColumn = (preset, index) => ({
+  // 크기가 같은 preset도 별도 열로 유지될 수 있게 순서를 key에 포함한다.
   key: `${index}:${preset.width}x${preset.height}`,
   label: preset.label,
   title: `${preset.label} ${preset.width}x${preset.height}`
 });
-var normalizeSitemapHref = (href) => {
-  const [path = "/"] = href.split(/[?#]/);
-  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
-  return normalizedPath || "/";
-};
-var getSitemapSegments = (href) => normalizeSitemapHref(href).split("/").map((segment) => segment.trim()).filter(Boolean);
-var createSitemapNode = (href, label, isPage = false) => ({
-  href,
-  label,
-  isPage,
-  children: /* @__PURE__ */ new Map()
-});
-var mergeSitemapUsers = (users) => {
-  const userByKey = /* @__PURE__ */ new Map();
-  users.forEach((user) => {
-    const key = user.sessionId || user.userId;
-    const currentUser = userByKey.get(key);
-    if (!currentUser || Date.parse(user.updatedAt) >= Date.parse(currentUser.updatedAt)) {
-      userByKey.set(key, user);
-    }
-  });
-  return Array.from(userByKey.values());
-};
 var addSitemapQaCounts = (first, second) => ({
   total: first.total + second.total,
   remaining: first.remaining + second.remaining,
@@ -13362,9 +13244,37 @@ var addSitemapQaCounts = (first, second) => ({
     {}
   )
 });
+
+// src/react-shell/sitemap/tree.ts
+var SITEMAP_STATUS_FILTERS = ["todo", "review", "hold"];
+var normalizeSitemapHref = (href) => {
+  const [path = "/"] = href.split(/[?#]/);
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  return normalizedPath || "/";
+};
+var getSitemapSegments = (href) => normalizeSitemapHref(href).split("/").map((segment) => segment.trim()).filter(Boolean);
+var createSitemapNode = (href, label, isPage = false) => ({
+  href,
+  label,
+  isPage,
+  children: /* @__PURE__ */ new Map()
+});
+var mergeSitemapUsers = (users) => {
+  const userByKey = /* @__PURE__ */ new Map();
+  users.forEach((user) => {
+    const key = user.sessionId || user.userId;
+    const currentUser = userByKey.get(key);
+    if (!currentUser || Date.parse(user.updatedAt) >= Date.parse(currentUser.updatedAt)) {
+      userByKey.set(key, user);
+    }
+  });
+  return Array.from(userByKey.values());
+};
 var createSitemapRows = (pages, activeRoute, pageQaCounts, pagePresenceUsers, getPageTarget, options = {}) => {
   const collapsedFolderHrefs = options.collapsedFolderHrefs ?? /* @__PURE__ */ new Set();
   const searchQuery = normalizeSitemapSearchQuery(options.searchQuery);
+  const statusFilters = options.statusFilters ?? /* @__PURE__ */ new Set();
+  const isStatusFiltering = statusFilters.size > 0;
   const sortKey = options.sortKey ?? "page";
   const sortDirection = options.sortDirection ?? "asc";
   const root = createSitemapNode("/", "/", false);
@@ -13418,23 +13328,25 @@ var createSitemapRows = (pages, activeRoute, pageQaCounts, pagePresenceUsers, ge
       node,
       directCount,
       directUsers,
+      // folder는 하위 page 합계, 실제 page는 자신의 수치를 별도로 보존한다.
       count: node.isPage ? addSitemapQaCounts(directCount, childAggregate.count) : childAggregate.count,
       users: mergeSitemapUsers([...directUsers, ...childAggregate.users]),
       children
     };
   };
-  const getSortValue = (summary) => {
-    if (sortKey === "page") return summary.node.label;
-    if (sortKey === "todo") return summary.count.status.todo;
-    if (sortKey === "review") return summary.count.status.review;
-    if (sortKey === "hold") return summary.count.status.hold;
-    if (sortKey === "online") return summary.users.length;
+  const getSortValueFor = (label, count, users) => {
+    if (sortKey === "page") return label;
+    if (sortKey === "todo") return count.status.todo;
+    if (sortKey === "review") return count.status.review;
+    if (sortKey === "hold") return count.status.hold;
+    if (sortKey === "online") return users.length;
     if (sortKey.startsWith("viewport:")) {
       const viewportKey = sortKey.slice("viewport:".length);
-      return summary.count.viewport[viewportKey]?.remaining ?? 0;
+      return count.viewport[viewportKey]?.remaining ?? 0;
     }
     return 0;
   };
+  const getSortValue = (summary) => getSortValueFor(summary.node.label, summary.count, summary.users);
   const sortSummaries = (summaries) => {
     return [...summaries].sort((a, b) => {
       const firstValue = getSortValue(a);
@@ -13455,6 +13367,53 @@ var createSitemapRows = (pages, activeRoute, pageQaCounts, pagePresenceUsers, ge
     }
     return summary.children.some(summaryMatchesSearch);
   };
+  const countMatchesStatusFilters = (count) => Array.from(statusFilters).some((status) => count.status[status] > 0);
+  if (isStatusFiltering) {
+    const flatEntries = [];
+    const collectMatchingPages = (node) => {
+      if (node.isPage) {
+        const directCount = getDirectCount(node);
+        if (countMatchesStatusFilters(directCount) && (!searchQuery || sitemapNodeMatchesSearch(node, searchQuery, getPageTarget))) {
+          flatEntries.push({
+            node,
+            count: directCount,
+            users: getDirectUsers(node)
+          });
+        }
+      }
+      node.children.forEach(collectMatchingPages);
+    };
+    collectMatchingPages(root);
+    return flatEntries.sort((a, b) => {
+      const firstValue = getSortValueFor(
+        normalizeSitemapHref(a.node.href),
+        a.count,
+        a.users
+      );
+      const secondValue = getSortValueFor(
+        normalizeSitemapHref(b.node.href),
+        b.count,
+        b.users
+      );
+      const valueDiff = typeof firstValue === "string" && typeof secondValue === "string" ? firstValue.localeCompare(secondValue) : Number(firstValue) - Number(secondValue);
+      if (valueDiff !== 0) {
+        return sortDirection === "asc" ? valueDiff : -valueDiff;
+      }
+      const remainingDiff = b.count.remaining - a.count.remaining;
+      if (remainingDiff !== 0) return remainingDiff;
+      return a.node.href.localeCompare(b.node.href);
+    }).map((entry) => ({
+      href: entry.node.href,
+      label: normalizeSitemapHref(entry.node.href),
+      depth: 0,
+      hasChildren: false,
+      isExpanded: false,
+      isPage: true,
+      isActive: getPageTarget(entry.node.href) === activeRoute,
+      qaCount: entry.count,
+      users: entry.users
+    }));
+  }
   const rows = [];
   const appendSummaryRows = (summary, depth) => {
     const { node } = summary;
@@ -13522,8 +13481,70 @@ function sitemapNodeMatchesSearch(node, searchQuery, getPageTarget) {
   ].join(" ").toLowerCase().includes(searchQuery);
 }
 
-// src/react-shell/sitemap/modal.tsx
+// src/react-shell/sitemap/row.tsx
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var getCountCellClassName = (status, count) => [
+  "df-review-sitemap-cell",
+  `is-${status}`,
+  count === 0 ? "is-zero" : ""
+].filter(Boolean).join(" ");
+var SitemapRowContent = ({
+  depth,
+  hasChildren,
+  isExpanded,
+  isPage,
+  label,
+  qaCount,
+  users,
+  onToggleFolder
+}) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+  /* @__PURE__ */ jsxs21(
+    "span",
+    {
+      className: "df-review-sitemap-path",
+      style: { "--df-review-sitemap-depth": depth },
+      children: [
+        hasChildren ? /* @__PURE__ */ jsx28(
+          "button",
+          {
+            "aria-expanded": isExpanded,
+            "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${label}`,
+            className: "df-review-sitemap-tree-toggle",
+            type: "button",
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleFolder?.();
+            },
+            children: isExpanded ? /* @__PURE__ */ jsx28(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx28(ChevronRight, { "aria-hidden": "true" })
+          }
+        ) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-tree-spacer", "aria-hidden": "true" }),
+        isPage ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-page-label", children: label }) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-label", children: label })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("todo", qaCount.status.todo), children: /* @__PURE__ */ jsx28("strong", { children: qaCount.status.todo }) }),
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("review", qaCount.status.review), children: qaCount.status.review }),
+  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("hold", qaCount.status.hold), children: qaCount.status.hold }),
+  /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-cell is-online", children: users.length > 0 ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-users", children: users.map((user) => /* @__PURE__ */ jsx28(
+    "span",
+    {
+      className: "df-review-sitemap-user",
+      style: {
+        "--df-review-presence-color": user.color
+      },
+      children: user.userId
+    },
+    user.sessionId
+  )) }) : null })
+] });
+
+// src/react-shell/sitemap/modal.tsx
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var STATUS_FILTER_LABELS = {
+  todo: "Todo",
+  review: "Review",
+  hold: "Hold"
+};
 var getNextSortDirection = (current, key) => {
   if (current.key !== key) return key === "page" ? "asc" : "desc";
   return current.direction === "desc" ? "asc" : "desc";
@@ -13532,11 +13553,6 @@ var getSortIndicator = (sort, key) => {
   if (sort.key !== key) return "";
   return sort.direction === "desc" ? "\u2193" : "\u2191";
 };
-var getCountCellClassName = (status, count) => [
-  "df-review-sitemap-cell",
-  `is-${status}`,
-  count === 0 ? "is-zero" : ""
-].filter(Boolean).join(" ");
 var mergePresenceUsers = (users) => {
   const userByKey = /* @__PURE__ */ new Map();
   users.forEach((user) => {
@@ -13549,6 +13565,7 @@ var mergePresenceUsers = (users) => {
   return Array.from(userByKey.values());
 };
 var SitemapModal = ({
+  isOpen,
   pages,
   activeRoute,
   allQaCount,
@@ -13568,7 +13585,11 @@ var SitemapModal = ({
     () => /* @__PURE__ */ new Set()
   );
   const [searchQuery, setSearchQuery] = useState8("");
+  const [statusFilters, setStatusFilters] = useState8(
+    () => /* @__PURE__ */ new Set()
+  );
   const trimmedSearchQuery = searchQuery.trim();
+  const isFiltering = Boolean(trimmedSearchQuery) || statusFilters.size > 0;
   const allQaUsers = useMemo6(
     () => mergePresenceUsers(Array.from(pagePresenceUsers.values()).flat()),
     [pagePresenceUsers]
@@ -13583,7 +13604,8 @@ var SitemapModal = ({
       collapsedFolderHrefs,
       searchQuery: trimmedSearchQuery,
       sortKey: sort.key,
-      sortDirection: sort.direction
+      sortDirection: sort.direction,
+      statusFilters
     }
   );
   const matchingPageCount = sitemapRows.filter((row) => row.isPage).length;
@@ -13603,6 +13625,17 @@ var SitemapModal = ({
       direction: getNextSortDirection(current, key)
     }));
   };
+  const toggleStatusFilter = (status) => {
+    setStatusFilters((currentFilters) => {
+      const nextFilters = new Set(currentFilters);
+      if (nextFilters.has(status)) {
+        nextFilters.delete(status);
+      } else {
+        nextFilters.add(status);
+      }
+      return nextFilters;
+    });
+  };
   const toggleFolder = (href) => {
     setCollapsedFolderHrefs((currentHrefs) => {
       const nextHrefs = new Set(currentHrefs);
@@ -13614,15 +13647,15 @@ var SitemapModal = ({
       return nextHrefs;
     });
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       "aria-label": "Sitemap",
       "aria-modal": "true",
-      className: "df-review-sitemap-modal",
+      className: `df-review-sitemap-modal${isOpen ? "" : " is-hidden"}`,
       role: "dialog",
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           "button",
           {
             "aria-label": "Close sitemap",
@@ -13631,28 +13664,39 @@ var SitemapModal = ({
             onClick: onClose
           }
         ),
-        /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-dialog", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-header", children: [
-            /* @__PURE__ */ jsxs21("div", { children: [
-              /* @__PURE__ */ jsx28("strong", { children: "Sitemap" }),
-              /* @__PURE__ */ jsxs21("span", { children: [
+        /* @__PURE__ */ jsxs22("div", { className: "df-review-sitemap-dialog", children: [
+          /* @__PURE__ */ jsxs22("div", { className: "df-review-sitemap-header", children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsx29("strong", { children: "Sitemap" }),
+              /* @__PURE__ */ jsxs22("span", { children: [
                 pages.length,
-                " pages \xB7 ",
-                allQaCount.status.todo,
-                " todo \xB7",
-                " ",
-                allQaCount.status.review,
-                " review \xB7 ",
-                allQaCount.status.hold,
-                " hold"
+                " pages",
+                SITEMAP_STATUS_FILTERS.map((status) => /* @__PURE__ */ jsxs22(Fragment3, { children: [
+                  " \xB7 ",
+                  /* @__PURE__ */ jsxs22(
+                    "button",
+                    {
+                      "aria-pressed": statusFilters.has(status),
+                      className: `df-review-sitemap-summary-filter${statusFilters.has(status) ? " is-active" : ""}`,
+                      title: `Show pages with ${STATUS_FILTER_LABELS[status]} QA`,
+                      type: "button",
+                      onClick: () => toggleStatusFilter(status),
+                      children: [
+                        allQaCount.status[status],
+                        " ",
+                        status
+                      ]
+                    }
+                  )
+                ] }, status))
               ] })
             ] }),
-            /* @__PURE__ */ jsx28("button", { "aria-label": "Close sitemap", type: "button", onClick: onClose, children: "x" })
+            /* @__PURE__ */ jsx29("button", { "aria-label": "Close sitemap", type: "button", onClick: onClose, children: "x" })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-controls", children: [
-            /* @__PURE__ */ jsxs21("label", { className: "df-review-sitemap-search", children: [
-              /* @__PURE__ */ jsx28(Search, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsxs22("div", { className: "df-review-sitemap-controls", children: [
+            /* @__PURE__ */ jsxs22("label", { className: "df-review-sitemap-search", children: [
+              /* @__PURE__ */ jsx29(Search, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx29(
                 "input",
                 {
                   "aria-label": "Search sitemap",
@@ -13664,20 +13708,20 @@ var SitemapModal = ({
                 }
               )
             ] }),
-            trimmedSearchQuery && /* @__PURE__ */ jsx28(
+            trimmedSearchQuery && /* @__PURE__ */ jsx29(
               "button",
               {
                 "aria-label": "Clear sitemap search",
                 className: "df-review-sitemap-search-clear",
                 type: "button",
                 onClick: () => setSearchQuery(""),
-                children: /* @__PURE__ */ jsx28(X, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx29(X, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-search-count", children: trimmedSearchQuery ? `${matchingPageCount} matches` : `${pages.length} pages` })
+            /* @__PURE__ */ jsx29("span", { className: "df-review-sitemap-search-count", children: isFiltering ? `${matchingPageCount} matches` : `${pages.length} pages` })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: "df-review-sitemap-list", style: gridStyle, children: [
-            /* @__PURE__ */ jsx28("div", { className: "df-review-sitemap-table-head", role: "row", children: sortHeaders.map((header) => /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22("div", { className: "df-review-sitemap-list", style: gridStyle, children: [
+            /* @__PURE__ */ jsx29("div", { className: "df-review-sitemap-table-head", role: "row", children: sortHeaders.map((header) => /* @__PURE__ */ jsxs22(
               "button",
               {
                 "aria-label": `Sort sitemap by ${header.title ?? header.label}`,
@@ -13690,7 +13734,7 @@ var SitemapModal = ({
                 type: "button",
                 onClick: () => setSortKey(header.key),
                 children: [
-                  /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29(
                     "span",
                     {
                       "aria-hidden": "true",
@@ -13698,7 +13742,7 @@ var SitemapModal = ({
                       children: getSortIndicator(sort, header.key)
                     }
                   ),
-                  /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-sort-label", children: header.label })
+                  /* @__PURE__ */ jsx29("span", { className: "df-review-sitemap-sort-label", children: header.label })
                 ]
               },
               header.key
@@ -13713,7 +13757,7 @@ var SitemapModal = ({
                 row.isActive ? "is-active" : "",
                 row.isPage ? "is-clickable" : ""
               ].filter(Boolean).join(" ");
-              const rowContent = /* @__PURE__ */ jsx28(
+              const rowContent = /* @__PURE__ */ jsx29(
                 SitemapRowContent,
                 {
                   depth: row.depth,
@@ -13726,7 +13770,7 @@ var SitemapModal = ({
                   onToggleFolder: () => toggleFolder(row.href)
                 }
               );
-              return /* @__PURE__ */ jsx28(
+              return /* @__PURE__ */ jsx29(
                 "div",
                 {
                   "aria-label": row.isPage ? `${row.href} / ${row.qaCount.status.todo} todo / ${row.qaCount.status.review} review / ${row.qaCount.status.hold} hold / ${row.users.length} online` : `${row.href} group / ${row.qaCount.status.todo} todo / ${row.qaCount.status.review} review / ${row.qaCount.status.hold} hold / ${row.users.length} online`,
@@ -13745,15 +13789,15 @@ var SitemapModal = ({
                 row.href
               );
             }),
-            sitemapRows.length === 0 && /* @__PURE__ */ jsx28("div", { className: "df-review-sitemap-empty", role: "status", children: "No matching pages" }),
-            /* @__PURE__ */ jsx28(
+            sitemapRows.length === 0 && /* @__PURE__ */ jsx29("div", { className: "df-review-sitemap-empty", role: "status", children: "No matching pages" }),
+            /* @__PURE__ */ jsx29(
               "button",
               {
                 "aria-label": `All QA / ${allQaCount.status.todo} todo / ${allQaCount.status.review} review / ${allQaCount.status.hold} hold`,
                 className: `df-review-sitemap-row is-summary${isAllQaVisible ? " is-active" : ""}`,
                 type: "button",
                 onClick: onSelectAllQa,
-                children: /* @__PURE__ */ jsx28(
+                children: /* @__PURE__ */ jsx29(
                   SitemapRowContent,
                   {
                     depth: 0,
@@ -13773,55 +13817,6 @@ var SitemapModal = ({
     }
   );
 };
-var SitemapRowContent = ({
-  depth,
-  hasChildren,
-  isExpanded,
-  isPage,
-  label,
-  qaCount,
-  users,
-  onToggleFolder
-}) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
-  /* @__PURE__ */ jsxs21(
-    "span",
-    {
-      className: "df-review-sitemap-path",
-      style: { "--df-review-sitemap-depth": depth },
-      children: [
-        hasChildren ? /* @__PURE__ */ jsx28(
-          "button",
-          {
-            "aria-expanded": isExpanded,
-            "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${label}`,
-            className: "df-review-sitemap-tree-toggle",
-            type: "button",
-            onClick: (event) => {
-              event.stopPropagation();
-              onToggleFolder?.();
-            },
-            children: isExpanded ? /* @__PURE__ */ jsx28(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx28(ChevronRight, { "aria-hidden": "true" })
-          }
-        ) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-tree-spacer", "aria-hidden": "true" }),
-        isPage ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-page-label", children: label }) : /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-label", children: label })
-      ]
-    }
-  ),
-  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("todo", qaCount.status.todo), children: /* @__PURE__ */ jsx28("strong", { children: qaCount.status.todo }) }),
-  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("review", qaCount.status.review), children: qaCount.status.review }),
-  /* @__PURE__ */ jsx28("span", { className: getCountCellClassName("hold", qaCount.status.hold), children: qaCount.status.hold }),
-  /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-cell is-online", children: users.length > 0 ? /* @__PURE__ */ jsx28("span", { className: "df-review-sitemap-users", children: users.map((user) => /* @__PURE__ */ jsx28(
-    "span",
-    {
-      className: "df-review-sitemap-user",
-      style: {
-        "--df-review-presence-color": user.color
-      },
-      children: user.userId
-    },
-    user.sessionId
-  )) }) : null })
-] });
 
 // src/react-shell/hooks/use.review.shell.data.ts
 import { useCallback as useCallback7, useMemo as useMemo7 } from "react";
@@ -13978,7 +13973,7 @@ var useReviewShellData = () => {
 };
 
 // src/react-shell/review/shell.modals.container.tsx
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var ReviewShellModalsContainer = () => {
   const { initialPrompt, pages } = useReviewShellConfig();
   const {
@@ -14035,6 +14030,10 @@ var ReviewShellModalsContainer = () => {
     (state) => state.setIsSitemapOpen
   );
   const showToast = useReviewToast();
+  const [hasSitemapOpened, setHasSitemapOpened] = useState9(false);
+  useEffect8(() => {
+    if (isSitemapOpen) setHasSitemapOpened(true);
+  }, [isSitemapOpen]);
   const initialPromptText = initialPrompt.trim();
   const copyInitialPrompt = useCallback8(
     (value, key) => copyReviewPrompt({
@@ -14045,10 +14044,11 @@ var ReviewShellModalsContainer = () => {
     }),
     [setCopiedPromptKey, showToast]
   );
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    isSitemapOpen && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    hasSitemapOpened && /* @__PURE__ */ jsx30(
       SitemapModal,
       {
+        isOpen: isSitemapOpen,
         activeRoute,
         allQaCount,
         getPageTarget,
@@ -14061,7 +14061,7 @@ var ReviewShellModalsContainer = () => {
         onSelectPage: selectPage
       }
     ),
-    isFigmaSettingsOpen && /* @__PURE__ */ jsx29(
+    isFigmaSettingsOpen && /* @__PURE__ */ jsx30(
       ReviewSettingsModal,
       {
         areTooltipsEnabledDraft,
@@ -14082,8 +14082,8 @@ var ReviewShellModalsContainer = () => {
         onToggleFigmaTokenVisible: () => setIsFigmaTokenVisible((current) => !current)
       }
     ),
-    isInitialPromptOpen && /* @__PURE__ */ jsx29(PromptModal, { onClose: () => setIsInitialPromptOpen(false) }),
-    isInitialPromptScriptOpen && /* @__PURE__ */ jsx29(
+    isInitialPromptOpen && /* @__PURE__ */ jsx30(PromptModal, { onClose: () => setIsInitialPromptOpen(false) }),
+    isInitialPromptScriptOpen && /* @__PURE__ */ jsx30(
       InitialPromptModal,
       {
         copiedPromptKey,
@@ -14147,7 +14147,7 @@ var useReviewSourceInspectorState = () => {
 };
 
 // src/react-shell/review/shell.providers.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ReviewShellProviders = ({
   actions,
   children,
@@ -14157,17 +14157,17 @@ var ReviewShellProviders = ({
   ruler,
   settings,
   sourceInspector
-}) => /* @__PURE__ */ jsx30(ReviewShellActionsProvider, { value: actions, children: /* @__PURE__ */ jsx30(ReviewRulerProvider, { value: ruler, children: /* @__PURE__ */ jsx30(ReviewFigmaImagesProvider, { value: figmaImages, children: /* @__PURE__ */ jsx30(ReviewSourceInspectorProvider, { value: sourceInspector, children: /* @__PURE__ */ jsx30(ReviewSettingsProvider, { value: settings, children: /* @__PURE__ */ jsx30(ReviewPresenceProvider, { value: presence, children: /* @__PURE__ */ jsx30(ReviewFigmaOverlayProvider, { value: figmaOverlay, children }) }) }) }) }) }) });
+}) => /* @__PURE__ */ jsx31(ReviewShellActionsProvider, { value: actions, children: /* @__PURE__ */ jsx31(ReviewRulerProvider, { value: ruler, children: /* @__PURE__ */ jsx31(ReviewFigmaImagesProvider, { value: figmaImages, children: /* @__PURE__ */ jsx31(ReviewSourceInspectorProvider, { value: sourceInspector, children: /* @__PURE__ */ jsx31(ReviewSettingsProvider, { value: settings, children: /* @__PURE__ */ jsx31(ReviewPresenceProvider, { value: presence, children: /* @__PURE__ */ jsx31(ReviewFigmaOverlayProvider, { value: figmaOverlay, children }) }) }) }) }) }) });
 
 // src/react-shell/review/source.inspector.overlay.tsx
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 var SourceInspectorOverlay = ({
   componentSelectionState,
   state
 }) => {
   const hoverState = state?.targetElement === componentSelectionState?.targetElement ? null : state;
-  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
-    componentSelectionState ? /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+    componentSelectionState ? /* @__PURE__ */ jsx32(
       "div",
       {
         className: "df-review-source-outline is-component-selection",
@@ -14179,7 +14179,7 @@ var SourceInspectorOverlay = ({
         }
       }
     ) : null,
-    hoverState ? /* @__PURE__ */ jsx31(
+    hoverState ? /* @__PURE__ */ jsx32(
       "div",
       {
         className: "df-review-source-outline is-hover",
@@ -14195,10 +14195,10 @@ var SourceInspectorOverlay = ({
 };
 
 // src/react-shell/review/source.inspector.overlay.container.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SourceInspectorOverlayContainer = () => {
   const { componentSelectionState, sourceInspectorState } = useReviewSourceInspectorState();
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     SourceInspectorOverlay,
     {
       componentSelectionState,
@@ -14213,7 +14213,7 @@ import {
 } from "react";
 
 // src/react-shell/review/mode.toolbar.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var ReviewModeToolbar = ({
   canWriteArea,
   canWriteDom,
@@ -14221,8 +14221,8 @@ var ReviewModeToolbar = ({
   onSetReviewMode
 }) => {
   if (!canWriteDom && !canWriteArea) return null;
-  return /* @__PURE__ */ jsxs24("div", { className: "df-review-mode", "aria-label": "Add QA", children: [
-    canWriteDom && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs25("div", { className: "df-review-mode", "aria-label": "Add QA", children: [
+    canWriteDom && /* @__PURE__ */ jsx34(
       "button",
       {
         "aria-label": "Element",
@@ -14230,11 +14230,11 @@ var ReviewModeToolbar = ({
         "data-review-tooltip": "Element QA",
         type: "button",
         onClick: () => onSetReviewMode("element"),
-        children: /* @__PURE__ */ jsx33(SquareMousePointer, { "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx34(SquareMousePointer, { "aria-hidden": "true" })
       }
     ),
-    canWriteDom && canWriteArea && /* @__PURE__ */ jsx33("span", { className: "df-review-mode-divider", "aria-hidden": "true", children: "|" }),
-    canWriteArea && /* @__PURE__ */ jsx33(
+    canWriteDom && canWriteArea && /* @__PURE__ */ jsx34("span", { className: "df-review-mode-divider", "aria-hidden": "true", children: "|" }),
+    canWriteArea && /* @__PURE__ */ jsx34(
       "button",
       {
         "aria-label": "Area",
@@ -14242,14 +14242,14 @@ var ReviewModeToolbar = ({
         "data-review-tooltip": "Area QA",
         type: "button",
         onClick: () => onSetReviewMode("area"),
-        children: /* @__PURE__ */ jsx33(Scan, { "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx34(Scan, { "aria-hidden": "true" })
       }
     )
   ] });
 };
 
 // src/react-shell/ruler/gutters.tsx
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 var RulerGutters = () => {
   const size = useReviewShellStore((state) => state.size);
   const {
@@ -14258,9 +14258,9 @@ var RulerGutters = () => {
     rulerScaleY,
     rulerUnit
   } = useReviewRulerState();
-  return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsx34("div", { className: "df-review-ruler-corner", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(Fragment6, { children: [
+    /* @__PURE__ */ jsx35("div", { className: "df-review-ruler-corner", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs26(
       "div",
       {
         className: "df-review-ruler-gutter is-x",
@@ -14268,15 +14268,15 @@ var RulerGutters = () => {
           "--df-review-ruler-step-x": `${rulerScaleX * 20}px`
         },
         children: [
-          /* @__PURE__ */ jsxs25("div", { className: "df-review-ruler-frame-label", children: [
-            /* @__PURE__ */ jsx34("strong", { children: size.label }),
-            /* @__PURE__ */ jsxs25("span", { children: [
+          /* @__PURE__ */ jsxs26("div", { className: "df-review-ruler-frame-label", children: [
+            /* @__PURE__ */ jsx35("strong", { children: size.label }),
+            /* @__PURE__ */ jsxs26("span", { children: [
               size.designWidth,
               size.designHeight ? `x${size.designHeight}` : "",
               rulerUnit
             ] })
           ] }),
-          rulerHover && /* @__PURE__ */ jsx34(
+          rulerHover && /* @__PURE__ */ jsx35(
             "div",
             {
               className: "df-review-ruler-coord is-x",
@@ -14287,14 +14287,14 @@ var RulerGutters = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: "df-review-ruler-gutter is-y",
         style: {
           "--df-review-ruler-step-y": `${rulerScaleY * 20}px`
         },
-        children: rulerHover && /* @__PURE__ */ jsx34(
+        children: rulerHover && /* @__PURE__ */ jsx35(
           "div",
           {
             className: "df-review-ruler-coord is-y",
@@ -14308,7 +14308,7 @@ var RulerGutters = () => {
 };
 
 // src/react-shell/ruler/overlay.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var RulerOverlay = () => {
   const { iframeRef } = useReviewShellRefs();
   const size = useReviewShellStore((state) => state.size);
@@ -14319,7 +14319,7 @@ var RulerOverlay = () => {
     rulerMeasureLabel,
     rulerOverlayRef
   } = useReviewRulerState();
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: rulerOverlayRef,
@@ -14333,8 +14333,8 @@ var RulerOverlay = () => {
         );
       },
       children: [
-        rulerHover && /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          /* @__PURE__ */ jsx35(
+        rulerHover && /* @__PURE__ */ jsxs27(Fragment7, { children: [
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: "df-review-ruler-guide is-x",
@@ -14342,7 +14342,7 @@ var RulerOverlay = () => {
               style: { top: `${rulerHover.y}px` }
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: "df-review-ruler-guide is-y",
@@ -14351,8 +14351,8 @@ var RulerOverlay = () => {
             }
           )
         ] }),
-        rulerMeasure && (rulerMeasure.width > 0 || rulerMeasure.height > 0) && /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          /* @__PURE__ */ jsx35(
+        rulerMeasure && (rulerMeasure.width > 0 || rulerMeasure.height > 0) && /* @__PURE__ */ jsxs27(Fragment7, { children: [
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: "df-review-ruler-selection",
@@ -14365,7 +14365,7 @@ var RulerOverlay = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: "df-review-ruler-label",
@@ -14389,7 +14389,7 @@ var RulerOverlay = () => {
 };
 
 // src/react-shell/target/figma.image.overlay.ts
-import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef7 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef7 } from "react";
 
 // src/react-shell/target/target.ts
 var HIDE_SCROLLBAR_STYLE_ID = "df-review-hide-scrollbar";
@@ -14491,13 +14491,6 @@ var setTargetFigmaSourceSelectLocked = (targetDocument, locked) => {
     locked
   );
 };
-var isEditableEventTarget = (event) => {
-  const path = event.composedPath?.() ?? [];
-  const element = path[0] ?? event.target;
-  if (!element || typeof element.tagName !== "string") return false;
-  const tag = element.tagName;
-  return tag === "INPUT" || tag === "TEXTAREA" || element.isContentEditable === true;
-};
 var TRUE_STORAGE_VALUES = /* @__PURE__ */ new Set([
   "1",
   "true",
@@ -14608,10 +14601,10 @@ var useTargetFigmaImageOverlays = ({
     size,
     targetSrc
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     syncTargetFigmaImageOverlays();
   }, [syncTargetFigmaImageOverlays]);
-  useEffect8(() => {
+  useEffect9(() => {
     return () => {
       if (!targetDocumentRef.current) return;
       removeTargetFigmaImageOverlays(targetDocumentRef.current);
@@ -14822,12 +14815,12 @@ function normalizeTargetFigmaImageOffsetY(value) {
 
 // src/react-shell/target/outside.markers.tsx
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo8,
   useRef as useRef8,
-  useState as useState9
+  useState as useState10
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var OUTSIDE_MARKER_HEIGHT = 22;
 var OUTSIDE_MARKER_CONNECTOR_TOP = 10;
 var OUTSIDE_MARKER_GAP = 6;
@@ -14941,9 +14934,9 @@ var ReviewOutsideMarkers = () => {
     (state) => state.setIsListVisible
   );
   const setSidePanel = useReviewShellStore((state) => state.setSidePanel);
-  const [layoutVersion, setLayoutVersion] = useState9(0);
+  const [layoutVersion, setLayoutVersion] = useState10(0);
   const frameUpdateRef = useRef8(null);
-  useEffect9(() => {
+  useEffect10(() => {
     const targetWindow = iframeRef.current?.contentWindow;
     const frameScroll = frameScrollRef.current;
     if (!targetWindow) return void 0;
@@ -15005,7 +14998,7 @@ var ReviewOutsideMarkers = () => {
     size
   ]);
   if (markers.length === 0) return null;
-  return /* @__PURE__ */ jsx36("div", { className: "df-review-outside-marker-layer", "aria-label": "QA markers", children: markers.map((marker) => {
+  return /* @__PURE__ */ jsx37("div", { className: "df-review-outside-marker-layer", "aria-label": "QA markers", children: markers.map((marker) => {
     const isActive = marker.item.id === selectedItemId;
     const style = {
       top: `${marker.top}px`,
@@ -15014,7 +15007,7 @@ var ReviewOutsideMarkers = () => {
       "--df-review-outside-marker-connector-stem-height": `${marker.connectorStemHeight}px`,
       "--df-review-outside-marker-z-index": isActive ? 2 : 1
     };
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "button",
       {
         "aria-label": `Focus ${marker.label}`,
@@ -15036,7 +15029,7 @@ var ReviewOutsideMarkers = () => {
 };
 
 // src/react-shell/target/frame.tsx
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var ReviewTargetFrame = () => {
   const {
     figmaImageOverlays,
@@ -15071,15 +15064,15 @@ var ReviewTargetFrame = () => {
     syncTargetFigmaImageOverlays();
     window.requestAnimationFrame(syncTargetFigmaImageOverlays);
   };
-  return /* @__PURE__ */ jsx37("main", { className: "df-review-stage", children: /* @__PURE__ */ jsxs27("div", { className: "df-review-frame", children: [
-    /* @__PURE__ */ jsx37("div", { className: "df-review-frame-scroll", ref: frameScrollRef, children: /* @__PURE__ */ jsx37("div", { className: "df-review-frame-canvas", children: /* @__PURE__ */ jsx37("div", { className: "df-review-target-stack", children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx38("main", { className: "df-review-stage", children: /* @__PURE__ */ jsxs28("div", { className: "df-review-frame", children: [
+    /* @__PURE__ */ jsx38("div", { className: "df-review-frame-scroll", ref: frameScrollRef, children: /* @__PURE__ */ jsx38("div", { className: "df-review-frame-canvas", children: /* @__PURE__ */ jsx38("div", { className: "df-review-target-stack", children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: `df-review-device-frame${showRuler ? " is-ruler" : ""}`,
         children: [
-          showRuler && /* @__PURE__ */ jsx37(RulerGutters, {}),
-          /* @__PURE__ */ jsx37(ReviewOutsideMarkers, {}),
-          /* @__PURE__ */ jsxs27(
+          showRuler && /* @__PURE__ */ jsx38(RulerGutters, {}),
+          /* @__PURE__ */ jsx38(ReviewOutsideMarkers, {}),
+          /* @__PURE__ */ jsxs28(
             "div",
             {
               className: "df-review-device",
@@ -15090,7 +15083,7 @@ var ReviewTargetFrame = () => {
                 minHeight: `${size.height}px`
               },
               children: [
-                /* @__PURE__ */ jsx37(
+                /* @__PURE__ */ jsx38(
                   "iframe",
                   {
                     ref: iframeRef,
@@ -15102,14 +15095,14 @@ var ReviewTargetFrame = () => {
                   },
                   `${frameTargetSrc}:${frameNavigationVersion}`
                 ),
-                showRuler && /* @__PURE__ */ jsx37(RulerOverlay, {})
+                showRuler && /* @__PURE__ */ jsx38(RulerOverlay, {})
               ]
             }
           )
         ]
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx37("div", { className: "df-review-frame-actions", children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className: "df-review-frame-actions", children: /* @__PURE__ */ jsx38(
       ReviewModeToolbar,
       {
         canWriteArea,
@@ -15122,21 +15115,21 @@ var ReviewTargetFrame = () => {
 };
 
 // src/react-shell/topbar.container.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/react-shell/topbar.tsx
-import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var ReviewScopeIcon2 = ({ scope }) => {
-  if (scope === "mobile") return /* @__PURE__ */ jsx38(Smartphone, { "aria-hidden": "true" });
-  if (scope === "tablet") return /* @__PURE__ */ jsx38(RectangleHorizontal, { "aria-hidden": "true" });
-  if (scope === "wide") return /* @__PURE__ */ jsx38(Maximize2, { "aria-hidden": "true" });
-  if (scope === "dom") return /* @__PURE__ */ jsx38(SquareMousePointer, { "aria-hidden": "true" });
-  return /* @__PURE__ */ jsx38(Monitor, { "aria-hidden": "true" });
+  if (scope === "mobile") return /* @__PURE__ */ jsx39(Smartphone, { "aria-hidden": "true" });
+  if (scope === "tablet") return /* @__PURE__ */ jsx39(RectangleHorizontal, { "aria-hidden": "true" });
+  if (scope === "wide") return /* @__PURE__ */ jsx39(Maximize2, { "aria-hidden": "true" });
+  if (scope === "dom") return /* @__PURE__ */ jsx39(SquareMousePointer, { "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx39(Monitor, { "aria-hidden": "true" });
 };
 var ViewportPresetIcon = ({
   preset
 }) => {
-  return /* @__PURE__ */ jsx38(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
+  return /* @__PURE__ */ jsx39(ReviewScopeIcon2, { scope: getViewportPresetKind(preset) });
 };
 var getPresetSelectValue = (preset) => `${preset.label}:${preset.width}x${preset.height}`;
 function getTargetOpenHref(targetSrc) {
@@ -15173,8 +15166,8 @@ var ReviewTopbar = ({
     );
     if (nextPreset) onSizeChange(nextPreset);
   };
-  return /* @__PURE__ */ jsxs28("header", { className: "df-review-topbar", children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("header", { className: "df-review-topbar", children: [
+    /* @__PURE__ */ jsxs29(
       "form",
       {
         className: "df-review-address",
@@ -15183,7 +15176,7 @@ var ReviewTopbar = ({
           onApplyTarget();
         },
         children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "button",
             {
               "aria-label": "Open sitemap",
@@ -15192,10 +15185,10 @@ var ReviewTopbar = ({
               "data-review-tooltip-placement": "bottom",
               type: "button",
               onClick: onOpenSitemap,
-              children: /* @__PURE__ */ jsx38(Map2, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx39(Map2, { "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "input",
             {
               "aria-label": "Path",
@@ -15203,8 +15196,8 @@ var ReviewTopbar = ({
               onChange: (event) => onDraftTargetChange(event.target.value)
             }
           ),
-          /* @__PURE__ */ jsxs28("div", { className: "df-review-address-actions", children: [
-            /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsxs29("div", { className: "df-review-address-actions", children: [
+            /* @__PURE__ */ jsx39(
               "button",
               {
                 "aria-label": "Refresh target",
@@ -15213,10 +15206,10 @@ var ReviewTopbar = ({
                 "data-review-tooltip-placement": "bottom",
                 title: "Refresh target",
                 type: "submit",
-                children: /* @__PURE__ */ jsx38(RefreshCw, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx39(RefreshCw, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(
               "button",
               {
                 "aria-label": copyLabel,
@@ -15226,10 +15219,10 @@ var ReviewTopbar = ({
                 title: copyLabel,
                 type: "button",
                 onClick: onCopyCurrentUrl,
-                children: /* @__PURE__ */ jsx38(Copy, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx39(Copy, { "aria-hidden": "true" })
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(
               "a",
               {
                 "aria-label": "Open target page",
@@ -15240,30 +15233,30 @@ var ReviewTopbar = ({
                 rel: "noreferrer",
                 target: "_blank",
                 title: "Open target page",
-                children: /* @__PURE__ */ jsx38(ExternalLink, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx39(ExternalLink, { "aria-hidden": "true" })
               }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs28("div", { className: "df-review-tools", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "df-review-tool-controls", children: [
-        /* @__PURE__ */ jsx38("div", { className: "df-review-presets", "aria-label": "Viewport presets", children: viewportPresets.map((preset) => /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29("div", { className: "df-review-tools", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "df-review-tool-controls", children: [
+        /* @__PURE__ */ jsx39("div", { className: "df-review-presets", "aria-label": "Viewport presets", children: viewportPresets.map((preset) => /* @__PURE__ */ jsxs29(
           "button",
           {
             className: preset.label === size.label ? "is-active" : "",
             type: "button",
             onClick: () => onSizeChange(preset),
             children: [
-              /* @__PURE__ */ jsx38(ViewportPresetIcon, { preset }),
-              /* @__PURE__ */ jsx38("span", { className: "df-review-preset-copy", children: /* @__PURE__ */ jsx38("strong", { children: preset.label }) }),
-              /* @__PURE__ */ jsx38("span", { className: "df-review-preset-count", children: presetScopeCounts.get(getViewportPresetKind(preset)) ?? 0 })
+              /* @__PURE__ */ jsx39(ViewportPresetIcon, { preset }),
+              /* @__PURE__ */ jsx39("span", { className: "df-review-preset-copy", children: /* @__PURE__ */ jsx39("strong", { children: preset.label }) }),
+              /* @__PURE__ */ jsx39("span", { className: "df-review-preset-count", children: presetScopeCounts.get(getViewportPresetKind(preset)) ?? 0 })
             ]
           },
           preset.label
         )) }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "select",
           {
             "aria-label": "Viewport preset",
@@ -15273,7 +15266,7 @@ var ReviewTopbar = ({
             children: viewportPresets.map((preset) => {
               const scope = getViewportPresetKind(preset);
               const count = presetScopeCounts.get(scope) ?? 0;
-              return /* @__PURE__ */ jsx38(
+              return /* @__PURE__ */ jsx39(
                 "option",
                 {
                   value: getPresetSelectValue(preset),
@@ -15284,15 +15277,15 @@ var ReviewTopbar = ({
             })
           }
         ),
-        /* @__PURE__ */ jsx38("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
-        /* @__PURE__ */ jsxs28("span", { className: "df-review-active-size", children: [
+        /* @__PURE__ */ jsx39("span", { className: "df-review-tool-divider", "aria-hidden": "true", children: "|" }),
+        /* @__PURE__ */ jsxs29("span", { className: "df-review-active-size", children: [
           size.width,
           "x",
           size.height
         ] })
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "df-review-overlays", "aria-label": "Target overlays", children: [
-        isRulerAvailable && /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsxs29("div", { className: "df-review-overlays", "aria-label": "Target overlays", children: [
+        isRulerAvailable && /* @__PURE__ */ jsx39(
           "button",
           {
             "aria-label": "Toggle ruler",
@@ -15301,10 +15294,10 @@ var ReviewTopbar = ({
             "data-review-tooltip-placement": "bottom",
             type: "button",
             onClick: onToggleRuler,
-            children: /* @__PURE__ */ jsx38(Ruler, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx39(Ruler, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "button",
           {
             "aria-label": "Toggle grid overlay",
@@ -15313,10 +15306,10 @@ var ReviewTopbar = ({
             "data-review-tooltip-placement": "bottom",
             type: "button",
             onClick: () => onToggleTargetOverlay("grid"),
-            children: /* @__PURE__ */ jsx38(LayoutGrid, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx39(LayoutGrid, { "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "button",
           {
             "aria-disabled": !isFigmaOverlayAvailable,
@@ -15327,7 +15320,7 @@ var ReviewTopbar = ({
             disabled: !isFigmaOverlayAvailable,
             type: "button",
             onClick: onToggleFigmaOverlay,
-            children: /* @__PURE__ */ jsx38(FigmaMarkIcon, {})
+            children: /* @__PURE__ */ jsx39(FigmaMarkIcon, {})
           }
         )
       ] })
@@ -15336,7 +15329,7 @@ var ReviewTopbar = ({
 };
 
 // src/react-shell/topbar.container.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TopbarContainer = () => {
   const {
     applyTarget,
@@ -15365,11 +15358,11 @@ var TopbarContainer = () => {
     (state) => state.setIsSitemapOpen
   );
   const setSize = useReviewShellStore((state) => state.setSize);
-  const [copyLabel, setCopyLabel] = useState10("Copy URL");
+  const [copyLabel, setCopyLabel] = useState11("Copy URL");
   const copyCurrentUrl = () => copyCurrentReviewUrl({
     onCopyLabelChange: setCopyLabel
   });
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     ReviewTopbar,
     {
       draftTarget,
@@ -15396,11 +15389,11 @@ var TopbarContainer = () => {
 };
 
 // src/react-shell/review/toast.container.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var ReviewToastContainer = () => {
   const toastMessage = useReviewShellStore((state) => state.toastMessage);
   if (!toastMessage) return null;
-  return /* @__PURE__ */ jsx40("div", { className: "df-review-copy-toast", role: "status", children: toastMessage });
+  return /* @__PURE__ */ jsx41("div", { className: "df-review-copy-toast", role: "status", children: toastMessage });
 };
 
 // src/react-shell/hooks/use.review.shell.runtime.ts
@@ -15410,7 +15403,7 @@ import {
 } from "react";
 
 // src/react-shell/hooks/use.review.command.key.ts
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect11, useState as useState12 } from "react";
 var isCommandModifierKeyEvent = (event) => event.key === "Meta" || event.code === "MetaLeft" || event.code === "MetaRight";
 var isCommandKeyDownEvent = (event) => isCommandModifierKeyEvent(event) || event.metaKey;
 function useReviewCommandKey({
@@ -15418,8 +15411,8 @@ function useReviewCommandKey({
   targetFrameLoadVersion,
   targetSrc
 }) {
-  const [isCommandKeyPressed, setIsCommandKeyPressed] = useState11(false);
-  useEffect10(() => {
+  const [isCommandKeyPressed, setIsCommandKeyPressed] = useState12(false);
+  useEffect11(() => {
     const targetDocument = iframeRef.current?.contentDocument;
     const targetWindow = iframeRef.current?.contentWindow;
     const setCommandKeyPressed = (pressed) => {
@@ -15682,7 +15675,7 @@ function highlightControllerItem(item, controller, isCurrent) {
 // src/react-shell/hooks/use.review.kit.lifecycle.ts
 import {
   useCallback as useCallback11,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useRef as useRef9
 } from "react";
 
@@ -15805,7 +15798,7 @@ async function captureIframeViewport(frame, input) {
       );
     } catch (error) {
       throw new Error(
-        `Selected region capture failed: ${getUnknownErrorMessage(error)}`
+        `Selected region capture failed: ${getCaptureErrorMessage(error)}`
       );
     }
   }
@@ -15818,7 +15811,7 @@ async function captureIframeViewport(frame, input) {
       input
     );
   } catch (error) {
-    errors.push(`html2canvas: ${getUnknownErrorMessage(error)}`);
+    errors.push(`html2canvas: ${getCaptureErrorMessage(error)}`);
   }
   const svg = createViewportSvg(targetDocument, targetWindow, viewport, input);
   const svgFile = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
@@ -15832,7 +15825,7 @@ async function captureIframeViewport(frame, input) {
       input
     );
   } catch (error) {
-    errors.push(`svg-canvas: ${getUnknownErrorMessage(error)}`);
+    errors.push(`svg-canvas: ${getCaptureErrorMessage(error)}`);
   }
   return {
     file: svgFile,
@@ -15861,6 +15854,7 @@ async function createHtml2CanvasCapture(targetDocument, targetWindow, viewport,
     onclone: (documentClone) => {
       normalizeUnsupportedCaptureStyles(documentClone);
       normalizeUnsupportedCaptureColors(documentClone);
+      normalizeZeroSizeCaptureGradients(documentClone);
     },
     removeContainer: true,
     scale,
@@ -16060,6 +16054,19 @@ function normalizeUnsupportedCaptureColors(documentClone) {
     }
   });
 }
+function normalizeZeroSizeCaptureGradients(documentClone) {
+  const view = documentClone.defaultView;
+  if (!view) return;
+  documentClone.documentElement.querySelectorAll("*").forEach(
+    (element) => {
+      const backgroundImage = view.getComputedStyle(element).backgroundImage;
+      if (!backgroundImage.includes("gradient(")) return;
+      const bounds = element.getBoundingClientRect();
+      if (bounds.width > 0 && bounds.height > 0) return;
+      element.style.setProperty("background-image", "none", "important");
+    }
+  );
+}
 function hasUnsupportedColorFunction(value) {
   return /okl(?:ch|ab)\(|color-mix\(/i.test(value);
 }
@@ -16268,12 +16275,8 @@ function createMarkerSvg(x, y) {
 function formatCaptureTimestamp(timestamp) {
   return timestamp.replace(/[^0-9A-Za-z]+/g, "-").replace(/^-|-$/g, "");
 }
-function getUnknownErrorMessage(error) {
-  if (error instanceof Error) return error.message;
-  if (error && typeof error === "object" && "message" in error && typeof error.message === "string") {
-    return error.message;
-  }
-  return "Capture was saved as SVG fallback.";
+function getCaptureErrorMessage(error) {
+  return getErrorMessage(error, "Capture was saved as SVG fallback.");
 }
 
 // src/react-shell/hooks/review.kit.target.ts
@@ -16456,13 +16459,13 @@ var useReviewKitLifecycle = ({
     },
     [controllerRef, onModeChange]
   );
-  useEffect11(() => destroyReviewKit, [destroyReviewKit]);
-  useEffect11(() => {
+  useEffect12(() => destroyReviewKit, [destroyReviewKit]);
+  useEffect12(() => {
     const frameDocument = iframeRef.current?.contentDocument;
     if (!frameDocument || frameDocument.readyState !== "complete") return;
     initReviewKit();
   }, [iframeRef, initReviewKit]);
-  useEffect11(() => {
+  useEffect12(() => {
     hiddenOverlayItemIdListRef.current = hiddenOverlayItemIdList;
     controllerRef.current?.setHiddenItemIds(hiddenOverlayItemIdList);
   }, [controllerRef, hiddenOverlayItemIdList]);
@@ -16475,7 +16478,7 @@ var useReviewKitLifecycle = ({
 };
 
 // src/react-shell/hooks/use.review.target.overlay.ts
-import { useCallback as useCallback12, useEffect as useEffect12, useRef as useRef10 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13, useRef as useRef10 } from "react";
 var TARGET_OVERLAY_REFRESH_DELAYS = [80, 240, 600];
 var useReviewTargetOverlay = ({
   iframeRef,
@@ -16546,11 +16549,11 @@ var useReviewTargetOverlay = ({
     },
     [dispatchTargetOverlayHotkey, updateTargetOverlayState]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (isFigmaOverlayAvailable || !targetOverlayState.figma) return;
     closeTargetOverlay("figma");
   }, [closeTargetOverlay, isFigmaOverlayAvailable, targetOverlayState.figma]);
-  useEffect12(() => clearRefreshTimers, [clearRefreshTimers]);
+  useEffect13(() => clearRefreshTimers, [clearRefreshTimers]);
   return {
     closeTargetOverlay,
     refreshTargetOverlayState,
@@ -16561,7 +16564,7 @@ var useReviewTargetOverlay = ({
 // src/react-shell/hooks/use.review.target.sync.ts
 import {
   useCallback as useCallback13,
-  useEffect as useEffect13
+  useEffect as useEffect14
 } from "react";
 var useReviewTargetSync = ({
   iframeRef,
@@ -16616,10 +16619,10 @@ var useReviewTargetSync = ({
       storeApi
     ]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     onActiveRouteChange(getTargetRouteKey(target, reviewPathPrefix));
   }, [onActiveRouteChange, reviewPathPrefix, target]);
-  useEffect13(() => {
+  useEffect14(() => {
     const { target: currentTarget, selectedItemId } = storeApi.getState();
     if (selectedItemId) {
       updateShellUrlForItem(currentTarget, size, selectedItemId, source);
@@ -16817,17 +16820,17 @@ var useReviewController = ({
 // src/react-shell/hooks/use.review.ruler.ts
 import {
   useCallback as useCallback16,
-  useEffect as useEffect15,
-  useState as useState13
+  useEffect as useEffect16,
+  useState as useState14
 } from "react";
 
 // src/react-shell/hooks/use.review.ruler.drag.ts
 import {
   useCallback as useCallback15,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useMemo as useMemo11,
   useRef as useRef11,
-  useState as useState12
+  useState as useState13
 } from "react";
 
 // src/react-shell/ruler/ruler.ts
@@ -16861,10 +16864,10 @@ var useReviewRulerDrag = ({
   const rulerDragRectRef = useRef11(null);
   const isRulerDraggingRef = useRef11(false);
   const sizeRef = useRef11(size);
-  const [rulerStart, setRulerStart] = useState12(null);
-  const [rulerPoint, setRulerPoint] = useState12(null);
-  const [rulerHover, setRulerHover] = useState12(null);
-  const [isRulerDragging, setIsRulerDragging] = useState12(false);
+  const [rulerStart, setRulerStart] = useState13(null);
+  const [rulerPoint, setRulerPoint] = useState13(null);
+  const [rulerHover, setRulerHover] = useState13(null);
+  const [isRulerDragging, setIsRulerDragging] = useState13(false);
   const rulerMeasure = useMemo11(
     () => getRulerMeasure(rulerStart, rulerPoint),
     [rulerPoint, rulerStart]
@@ -16896,10 +16899,10 @@ var useReviewRulerDrag = ({
     },
     []
   );
-  useEffect14(() => {
+  useEffect15(() => {
     sizeRef.current = size;
   }, [size]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isRulerVisible || !isRulerAvailable) return void 0;
     const getRulerEventClientPoint = (event) => {
       const frame2 = iframeRef.current;
@@ -17013,7 +17016,7 @@ var useReviewRulerDrag = ({
     isRulerVisible,
     startRulerDrag
   ]);
-  useEffect14(() => {
+  useEffect15(() => {
     clearRulerMeasure();
   }, [clearRulerMeasure, size.height, size.width, targetSrc]);
   return {
@@ -17034,7 +17037,7 @@ var useReviewRuler = ({
   onCancelReviewMode,
   onCloseTransientPanels
 }) => {
-  const [isRulerVisible, setIsRulerVisible] = useState13(false);
+  const [isRulerVisible, setIsRulerVisible] = useState14(false);
   const isRulerAvailable = ruler?.enabled !== false && typeof size.designWidth === "number" && size.designWidth > 0;
   const rulerUnit = ruler?.unit ?? "px";
   const rulerScaleX = isRulerAvailable && size.designWidth ? size.width / size.designWidth : 1;
@@ -17073,7 +17076,7 @@ var useReviewRuler = ({
     onCancelReviewMode,
     onCloseTransientPanels
   ]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!isRulerVisible || isRulerAvailable) return;
     closeRuler();
   }, [closeRuler, isRulerAvailable, isRulerVisible]);
@@ -17176,7 +17179,7 @@ var useReviewShellActionsValue = ({
 
 // src/react-shell/hooks/use.review.shell.effects.ts
 import {
-  useEffect as useEffect16
+  useEffect as useEffect17
 } from "react";
 var REVIEW_SELECTION_ACTION_SELECTOR = [
   "a",
@@ -17208,7 +17211,7 @@ var useReviewShellEffects = ({
   targetFrameLoadVersion,
   targetSrc
 }) => {
-  useEffect16(() => {
+  useEffect17(() => {
     const itemId = pendingInitialItemIdRef.current;
     if (!itemId) return;
     const item = items.find(
@@ -17217,7 +17220,7 @@ var useReviewShellEffects = ({
     if (!item) return;
     restoreReviewItem(item);
   }, [items, pendingInitialItemIdRef, restoreReviewItem]);
-  useEffect16(() => {
+  useEffect17(() => {
     const frameScroll = frameScrollRef.current;
     if (!frameScroll) return void 0;
     const centerFrameScroll = () => {
@@ -17242,14 +17245,14 @@ var useReviewShellEffects = ({
     syncTargetViewport,
     targetSrc
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     const targetDocument = iframeRef.current?.contentDocument;
     setTargetFigmaOverlayLocked(targetDocument, mode === "element");
     return () => {
       setTargetFigmaOverlayLocked(targetDocument, false);
     };
   }, [iframeRef, mode, targetSrc]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!selectedItemId) return void 0;
     const frameScroll = frameScrollRef.current;
     let frameDocument = null;
@@ -17513,10 +17516,10 @@ import { useMemo as useMemo16 } from "react";
 // src/react-shell/hooks/use.review.presence.ts
 import {
   useCallback as useCallback18,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo15,
   useRef as useRef12,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/react-shell/presence/presence.ts
@@ -17733,8 +17736,8 @@ var useReviewPresence = ({
   source
 }) => {
   const presenceSessionRef = useRef12(null);
-  const [presenceUsers, setPresenceUsers] = useState14([]);
-  const [presenceSessionVersion, setPresenceSessionVersion] = useState14(0);
+  const [presenceUsers, setPresenceUsers] = useState15([]);
+  const [presenceSessionVersion, setPresenceSessionVersion] = useState15(0);
   const presenceSessionId = useMemo15(getReviewPresenceSessionId, []);
   const normalizedReviewUserId = reviewUserId.trim();
   const presenceDisplayName = getReviewPresenceDisplayName(
@@ -17815,7 +17818,7 @@ var useReviewPresence = ({
   );
   const getCurrentPresenceStateRef = useRef12(getCurrentPresenceState);
   getCurrentPresenceStateRef.current = getCurrentPresenceState;
-  useEffect17(() => {
+  useEffect18(() => {
     if (!presence || !normalizedReviewUserId) {
       const session = presenceSessionRef.current;
       presenceSessionRef.current = null;
@@ -17865,7 +17868,7 @@ var useReviewPresence = ({
     presenceSessionId,
     projectId
   ]);
-  useEffect17(() => {
+  useEffect18(() => {
     const session = presenceSessionRef.current;
     if (!session || !normalizedReviewUserId) return;
     void session.update(getCurrentPresenceState());
@@ -17923,7 +17926,7 @@ var useReviewShellPresenceState = ({
 };
 
 // src/react-shell/hooks/use.review.settings.ts
-import { useCallback as useCallback19, useEffect as useEffect18, useState as useState15 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect19, useState as useState16 } from "react";
 var useReviewSettings = ({
   defaultReviewUserId = "",
   onCancelReviewMode,
@@ -17931,26 +17934,26 @@ var useReviewSettings = ({
   onCloseSitemap,
   onReloadTargetFrame
 }) => {
-  const [figmaTokenDraft, setFigmaTokenDraft] = useState15(getStoredFigmaToken);
-  const [reviewUserId, setReviewUserId] = useState15(
+  const [figmaTokenDraft, setFigmaTokenDraft] = useState16(getStoredFigmaToken);
+  const [reviewUserId, setReviewUserId] = useState16(
     () => getStoredReviewUserId(defaultReviewUserId)
   );
-  const [reviewUserIdDraft, setReviewUserIdDraft] = useState15(
+  const [reviewUserIdDraft, setReviewUserIdDraft] = useState16(
     () => getStoredReviewUserId(defaultReviewUserId)
   );
-  const [reviewTheme, setReviewTheme] = useState15(getStoredReviewTheme);
-  const [reviewThemeDraft, setReviewThemeDraft] = useState15(getStoredReviewTheme);
-  const [areTooltipsEnabled, setAreTooltipsEnabled] = useState15(
+  const [reviewTheme, setReviewTheme] = useState16(getStoredReviewTheme);
+  const [reviewThemeDraft, setReviewThemeDraft] = useState16(getStoredReviewTheme);
+  const [areTooltipsEnabled, setAreTooltipsEnabled] = useState16(
     getStoredReviewTooltipsEnabled
   );
-  const [areTooltipsEnabledDraft, setAreTooltipsEnabledDraft] = useState15(
+  const [areTooltipsEnabledDraft, setAreTooltipsEnabledDraft] = useState16(
     getStoredReviewTooltipsEnabled
   );
-  const [systemReviewTheme, setSystemReviewTheme] = useState15(getSystemReviewTheme);
-  const [figmaSettingsStatus, setFigmaSettingsStatus] = useState15("");
-  const [isFigmaSettingsOpen, setIsFigmaSettingsOpen] = useState15(false);
-  const [isFigmaTokenVisible, setIsFigmaTokenVisible] = useState15(false);
-  const [isFigmaTokenGuideOpen, setIsFigmaTokenGuideOpen] = useState15(false);
+  const [systemReviewTheme, setSystemReviewTheme] = useState16(getSystemReviewTheme);
+  const [figmaSettingsStatus, setFigmaSettingsStatus] = useState16("");
+  const [isFigmaSettingsOpen, setIsFigmaSettingsOpen] = useState16(false);
+  const [isFigmaTokenVisible, setIsFigmaTokenVisible] = useState16(false);
+  const [isFigmaTokenGuideOpen, setIsFigmaTokenGuideOpen] = useState16(false);
   const effectiveReviewTheme = reviewTheme === "system" ? systemReviewTheme : reviewTheme;
   const closeFigmaSettings = useCallback19(() => {
     setIsFigmaSettingsOpen(false);
@@ -18005,13 +18008,13 @@ var useReviewSettings = ({
     },
     [closeFigmaSettings, onReloadTargetFrame]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (getStoredReviewUserId()) return;
     const nextDefaultUserId = defaultReviewUserId.trim();
     setReviewUserId(nextDefaultUserId);
     setReviewUserIdDraft(nextDefaultUserId);
   }, [defaultReviewUserId]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const query = window.matchMedia("(prefers-color-scheme: light)");
     const syncSystemTheme = () => {
@@ -18025,7 +18028,7 @@ var useReviewSettings = ({
     query.addListener(syncSystemTheme);
     return () => query.removeListener(syncSystemTheme);
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     document.body.classList.toggle(
       "df-review-theme-light",
       effectiveReviewTheme === "light"
@@ -18179,7 +18182,7 @@ var useReviewShellLoadTargetFrame = ({
 ]);
 
 // src/react-shell/hooks/use.review.shell.hotkeys.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 var useReviewShellHotkeys = ({
   isRailHotkeyBlocked,
   isFigmaSettingsOpen,
@@ -18208,7 +18211,7 @@ var useReviewShellHotkeys = ({
   const setIsSitemapOpen = useReviewShellStore(
     (state) => state.setIsSitemapOpen
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (mode === "idle" && !isRulerVisible && !isInitialPromptOpen && !isSitemapOpen && !isFigmaSettingsOpen) {
       return;
     }
@@ -18252,7 +18255,7 @@ var useReviewShellHotkeys = ({
     setIsInitialPromptOpen,
     setIsSitemapOpen
   ]);
-  useEffect19(() => {
+  useEffect20(() => {
     const handleHotkey = (event) => {
       if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
         return;
@@ -18285,7 +18288,7 @@ var useReviewShellHotkeys = ({
     onToggleRuler,
     onToggleTargetOverlay
   ]);
-  useEffect19(() => {
+  useEffect20(() => {
     const handleRailHotkey = (event) => {
       if (isRailHotkeyBlocked || isEditableEventTarget(event)) return;
       const actions = [
@@ -18312,7 +18315,7 @@ var useReviewShellHotkeys = ({
 // src/react-shell/hooks/use.review.shell.refresh.ts
 import {
   useCallback as useCallback21,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useRef as useRef13
 } from "react";
 var useReviewShellRefresh = ({
@@ -18364,13 +18367,13 @@ var useReviewShellRefresh = ({
     }),
     [localAdapterEntry, projectId, remoteAdapterEntry, storeApi]
   );
-  useEffect20(() => {
+  useEffect21(() => {
     void refreshItems();
   }, [refreshItems]);
-  useEffect20(() => {
+  useEffect21(() => {
     void refreshSitemapItems();
   }, [refreshSitemapItems]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!isSitemapOpen) return;
     void refreshSitemapItems();
   }, [isSitemapOpen, refreshSitemapItems]);
@@ -18471,7 +18474,7 @@ var useReviewShellState = () => {
 // src/react-shell/hooks/use.review.shell.target.figma.ts
 import {
   useCallback as useCallback22,
-  useState as useState16
+  useState as useState17
 } from "react";
 var useReviewShellTargetFigma = ({
   iframeRef,
@@ -18479,7 +18482,7 @@ var useReviewShellTargetFigma = ({
   isViewportFigmaOverlayAvailable,
   targetSrc
 }) => {
-  const [targetFigmaState, setTargetFigmaState] = useState16(null);
+  const [targetFigmaState, setTargetFigmaState] = useState17(null);
   const targetFigmaConfig = targetFigmaState?.targetSrc === targetSrc ? targetFigmaState.config : null;
   const isFigmaOverlayAvailable = !isFigmaImageManagementEnabled && isViewportFigmaOverlayAvailable && Boolean(targetFigmaConfig);
   const refreshTargetFigmaConfig = useCallback22(() => {
@@ -18497,7 +18500,7 @@ var useReviewShellTargetFigma = ({
 // src/react-shell/hooks/use.review.side.panel.ts
 import {
   useCallback as useCallback23,
-  useEffect as useEffect21
+  useEffect as useEffect22
 } from "react";
 var getAvailableSidePanel = (sidePanel, {
   isFigmaImageManagementEnabled
@@ -18519,7 +18522,7 @@ var useReviewSidePanel = ({
   const isQaPanelVisible = isListVisible && sidePanel === "qa";
   const isSourceTreePanelVisible = isListVisible && sidePanel === "source";
   const isFigmaImagesPanelVisible = isFigmaImageManagementEnabled && isListVisible && sidePanel === "figma-images";
-  useEffect21(() => {
+  useEffect22(() => {
     const state = storeApi.getState();
     const availableSidePanel = getAvailableSidePanel(state.sidePanel, {
       isFigmaImageManagementEnabled
@@ -18528,10 +18531,10 @@ var useReviewSidePanel = ({
       state.setSidePanel(availableSidePanel);
     }
   }, [isFigmaImageManagementEnabled, storeApi]);
-  useEffect21(() => {
+  useEffect22(() => {
     writeStoredReviewSidePanel(sidePanel);
   }, [sidePanel]);
-  useEffect21(() => {
+  useEffect22(() => {
     writeStoredReviewSidePanelVisible(isListVisible);
   }, [isListVisible]);
   const openSidePanel = useCallback23(
@@ -18574,7 +18577,7 @@ var useReviewSidePanel = ({
 };
 
 // src/react-shell/hooks/use.review.source.inspector.ts
-import { useCallback as useCallback24, useEffect as useEffect22, useRef as useRef14, useState as useState17 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect23, useRef as useRef14, useState as useState18 } from "react";
 
 // src/react-shell/review/source.shortcut.style.ts
 function createSourceShortcutStyle(optionAttribute, fontOverlayAttribute) {
@@ -18658,8 +18661,8 @@ function useReviewSourceInspector({
 }) {
   const showToast = useReviewToast();
   const sourceShortcutCleanupRef = useRef14(null);
-  const [componentSelectionState, setComponentSelectionState] = useState17(null);
-  const [sourceInspectorState, setSourceInspectorState] = useState17(null);
+  const [componentSelectionState, setComponentSelectionState] = useState18(null);
+  const [sourceInspectorState, setSourceInspectorState] = useState18(null);
   const clearSourceInspector = useCallback24(() => {
     setSourceInspectorState(null);
   }, []);
@@ -18736,7 +18739,7 @@ function useReviewSourceInspector({
   }, []);
   const sourceInspectorTargetElement = sourceInspectorState?.targetElement ?? null;
   const componentSelectionTargetElement = componentSelectionState?.targetElement ?? null;
-  useEffect22(() => {
+  useEffect23(() => {
     const trackedElement = sourceInspectorTargetElement ?? componentSelectionTargetElement;
     if (!trackedElement) return void 0;
     const targetWindow = trackedElement.ownerDocument.defaultView ?? iframeRef.current?.contentWindow ?? null;
@@ -19015,10 +19018,10 @@ function useReviewSourceInspector({
     sourceCandidateOptions,
     showSourceOutlineForTarget
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     return cleanupSourceOpenShortcut;
   }, [cleanupSourceOpenShortcut]);
-  useEffect22(() => {
+  useEffect23(() => {
     const frame = window.requestAnimationFrame(bindSourceOpenShortcut);
     return () => window.cancelAnimationFrame(frame);
   }, [bindSourceOpenShortcut, targetSrc]);
@@ -19628,7 +19631,7 @@ var createReviewShellStore = (init) => createStore()((...args) => ({
 }));
 
 // src/react-shell/review/shell.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var ReviewShell = (props) => {
   const config = useMemo18(
     () => createReviewShellConfig(props),
@@ -19644,27 +19647,27 @@ var ReviewShell = (props) => {
       props.sourceRoot
     ]
   );
-  const [store] = useState18(
+  const [store] = useState19(
     () => createReviewShellStore({ target: getInitialTargetSliceState(config) })
   );
-  const [refs] = useState18(createReviewShellRefs);
-  return /* @__PURE__ */ jsx41(ReviewShellConfigProvider, { value: config, children: /* @__PURE__ */ jsx41(ReviewShellStoreProvider, { value: store, children: /* @__PURE__ */ jsx41(ReviewShellRefsProvider, { value: refs, children: /* @__PURE__ */ jsx41(ReviewShellContent, { ...props }) }) }) });
+  const [refs] = useState19(createReviewShellRefs);
+  return /* @__PURE__ */ jsx42(ReviewShellConfigProvider, { value: config, children: /* @__PURE__ */ jsx42(ReviewShellStoreProvider, { value: store, children: /* @__PURE__ */ jsx42(ReviewShellRefsProvider, { value: refs, children: /* @__PURE__ */ jsx42(ReviewShellContent, { ...props }) }) }) });
 };
 var ReviewShellContent = (props) => {
   const runtime = useReviewShellRuntime(props);
-  return /* @__PURE__ */ jsx41(ReviewShellProviders, { ...runtime, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(ReviewShellProviders, { ...runtime, children: /* @__PURE__ */ jsx42(
     ReviewShellFrameContainer,
     {
       slots: {
-        topbar: /* @__PURE__ */ jsx41(TopbarContainer, {}),
-        modals: /* @__PURE__ */ jsx41(ReviewShellModalsContainer, {}),
-        toast: /* @__PURE__ */ jsx41(ReviewToastContainer, {}),
-        sideRail: /* @__PURE__ */ jsx41(ReviewSideRailContainer, {}),
-        qaPanel: /* @__PURE__ */ jsx41(QaPanelContainer, {}),
-        figmaImagesPanel: /* @__PURE__ */ jsx41(FigmaImagesPanelContainer, {}),
-        sourceTreePanel: /* @__PURE__ */ jsx41(SectionOutlineContainer, {}),
-        targetFrame: /* @__PURE__ */ jsx41(ReviewTargetFrame, {}),
-        sourceInspector: /* @__PURE__ */ jsx41(SourceInspectorOverlayContainer, {})
+        topbar: /* @__PURE__ */ jsx42(TopbarContainer, {}),
+        modals: /* @__PURE__ */ jsx42(ReviewShellModalsContainer, {}),
+        toast: /* @__PURE__ */ jsx42(ReviewToastContainer, {}),
+        sideRail: /* @__PURE__ */ jsx42(ReviewSideRailContainer, {}),
+        qaPanel: /* @__PURE__ */ jsx42(QaPanelContainer, {}),
+        figmaImagesPanel: /* @__PURE__ */ jsx42(FigmaImagesPanelContainer, {}),
+        sourceTreePanel: /* @__PURE__ */ jsx42(SectionOutlineContainer, {}),
+        targetFrame: /* @__PURE__ */ jsx42(ReviewTargetFrame, {}),
+        sourceInspector: /* @__PURE__ */ jsx42(SourceInspectorOverlayContainer, {})
       }
     }
   ) });
@@ -19672,12 +19675,12 @@ var ReviewShellContent = (props) => {
 
 // src/react-shell/figma/dev-overlay.tsx
 import React2, {
-  useEffect as useEffect23,
+  useEffect as useEffect24,
   useMemo as useMemo19,
-  useState as useState19
+  useState as useState20
 } from "react";
 import { createRoot } from "react-dom/client";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 var FIGMA_DEV_OVERLAY_ROOT_ID = "df-review-figma-dev-overlay-root";
 var FIGMA_DEV_OVERLAY_MOUNT_ID = "df-review-figma-dev-overlay-mount";
 var mountFigmaDevOverlay = (options) => {
@@ -19698,7 +19701,7 @@ var mountFigmaDevOverlay = (options) => {
   document.body.appendChild(host);
   const root = createRoot(mountNode);
   root.render(
-    /* @__PURE__ */ jsx42(React2.StrictMode, { children: /* @__PURE__ */ jsx42(FigmaDevOverlayWidget, { ...options }) })
+    /* @__PURE__ */ jsx43(React2.StrictMode, { children: /* @__PURE__ */ jsx43(FigmaDevOverlayWidget, { ...options }) })
   );
   return {
     destroy() {
@@ -19748,9 +19751,9 @@ var FigmaDevOverlayWidget = ({
     store: matchedViewport ? figmaImageStore : null,
     viewport: activeViewport
   });
-  const [isPanelOpen, setIsPanelOpen] = useState19(false);
-  const [isWidgetVisible, setIsWidgetVisible] = useState19(false);
-  const [offsetYDraftByImageId, setOffsetYDraftByImageId] = useState19({});
+  const [isPanelOpen, setIsPanelOpen] = useState20(false);
+  const [isWidgetVisible, setIsWidgetVisible] = useState20(false);
+  const [offsetYDraftByImageId, setOffsetYDraftByImageId] = useState20({});
   const selectedImage = selectedImageId ? images.find((image) => image.id === selectedImageId) ?? null : null;
   const selectedImageIndex = selectedImage ? images.indexOf(selectedImage) : -1;
   const selectedImageLabel = selectedImage ? getFigmaImageLabel(selectedImage, selectedImageIndex) : "Figma layer";
@@ -19764,7 +19767,7 @@ var FigmaDevOverlayWidget = ({
     }),
     [imageOverlayStates, images]
   );
-  useEffect23(() => {
+  useEffect24(() => {
     if (!isWidgetVisible || !matchedViewport) {
       removeTargetFigmaImageOverlays(document);
       return;
@@ -19781,15 +19784,15 @@ var FigmaDevOverlayWidget = ({
     matchedViewport,
     setImageOverlayOffsetY
   ]);
-  useEffect23(
+  useEffect24(
     () => () => {
       removeTargetFigmaImageOverlays(document);
     },
     []
   );
-  useEffect23(() => {
+  useEffect24(() => {
     const handleKeyDown = (event) => {
-      if (!isHotkey(event, "Shift+F") || isEditableFigmaDevOverlayEventTarget(event)) {
+      if (!isHotkey(event, "Shift+F") || isEditableEventTarget(event)) {
         return;
       }
       event.preventDefault();
@@ -19811,21 +19814,21 @@ var FigmaDevOverlayWidget = ({
       setImageOverlayOpacity(selectedImage.id, opacityPercent / 100);
     }
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "aside",
     {
       "aria-label": "Figma overlay",
       className: `df-review-figma-dev-widget${isPanelOpen ? " is-open" : ""}${isAnyImageOverlayVisible ? " is-active" : ""}`,
       children: [
-        isPanelOpen && /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-panel", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-panel-header", children: [
-            /* @__PURE__ */ jsx42("strong", { children: "Figma" }),
-            /* @__PURE__ */ jsx42("span", { children: matchedViewportMatch ? `${matchedViewportMatch.label} \xB7 ${matchedViewportMatch.rangeLabel}` : `${viewport.width}px` })
+        isPanelOpen && /* @__PURE__ */ jsxs30("div", { className: "df-review-figma-dev-panel", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "df-review-figma-dev-panel-header", children: [
+            /* @__PURE__ */ jsx43("strong", { children: "Figma" }),
+            /* @__PURE__ */ jsx43("span", { children: matchedViewportMatch ? `${matchedViewportMatch.label} \xB7 ${matchedViewportMatch.rangeLabel}` : `${viewport.width}px` })
           ] }),
-          selectedImage && /* @__PURE__ */ jsxs29("div", { className: "df-review-figma-dev-selected-controls", children: [
-            /* @__PURE__ */ jsxs29("label", { className: "df-review-figma-dev-opacity-control", children: [
-              /* @__PURE__ */ jsx42("span", { children: "Opacity" }),
-              /* @__PURE__ */ jsx42(
+          selectedImage && /* @__PURE__ */ jsxs30("div", { className: "df-review-figma-dev-selected-controls", children: [
+            /* @__PURE__ */ jsxs30("label", { className: "df-review-figma-dev-opacity-control", children: [
+              /* @__PURE__ */ jsx43("span", { children: "Opacity" }),
+              /* @__PURE__ */ jsx43(
                 "input",
                 {
                   "aria-label": `${selectedImageLabel} overlay opacity`,
@@ -19838,11 +19841,11 @@ var FigmaDevOverlayWidget = ({
                   onInput: (event) => updateSelectedImageOpacity(event.currentTarget.value)
                 }
               ),
-              /* @__PURE__ */ jsx42("strong", { children: selectedOpacityPercent })
+              /* @__PURE__ */ jsx43("strong", { children: selectedOpacityPercent })
             ] }),
-            /* @__PURE__ */ jsxs29("label", { className: "df-review-figma-dev-y-control", children: [
-              /* @__PURE__ */ jsx42(MoveVertical, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx42(
+            /* @__PURE__ */ jsxs30("label", { className: "df-review-figma-dev-y-control", children: [
+              /* @__PURE__ */ jsx43(MoveVertical, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx43(
                 "input",
                 {
                   "aria-label": `${selectedImageLabel} overlay Y offset`,
@@ -19872,14 +19875,14 @@ var FigmaDevOverlayWidget = ({
               )
             ] })
           ] }),
-          error && /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-status", children: error }),
-          !matchedViewport ? /* @__PURE__ */ jsxs29("p", { className: "df-review-figma-dev-empty", children: [
+          error && /* @__PURE__ */ jsx43("p", { className: "df-review-figma-dev-status", children: error }),
+          !matchedViewport ? /* @__PURE__ */ jsxs30("p", { className: "df-review-figma-dev-empty", children: [
             "No Figma layers for this viewport.",
             viewportBoundaries ? ` Mobile ${viewportBoundaries.mobileRangeLabel} / Full width ${viewportBoundaries.fullWidthRangeLabel}` : ""
-          ] }) : isLoading ? /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-status", children: "Loading..." }) : images.length === 0 ? /* @__PURE__ */ jsx42("p", { className: "df-review-figma-dev-empty", children: "No Figma layers for this viewport." }) : /* @__PURE__ */ jsx42("div", { className: "df-review-figma-dev-list", children: images.map((image, index) => {
+          ] }) : isLoading ? /* @__PURE__ */ jsx43("p", { className: "df-review-figma-dev-status", children: "Loading..." }) : images.length === 0 ? /* @__PURE__ */ jsx43("p", { className: "df-review-figma-dev-empty", children: "No Figma layers for this viewport." }) : /* @__PURE__ */ jsx43("div", { className: "df-review-figma-dev-list", children: images.map((image, index) => {
             const imageLabel = getFigmaImageLabel(image, index);
             const overlayState = imageOverlayStates[image.id] ?? DEFAULT_FIGMA_IMAGE_LAYER_STATE;
-            return /* @__PURE__ */ jsxs29(
+            return /* @__PURE__ */ jsxs30(
               "article",
               {
                 className: `df-review-figma-dev-row${image.id === selectedImageId ? " is-active" : ""}`,
@@ -19892,7 +19895,7 @@ var FigmaDevOverlayWidget = ({
                   setSelectedImageId(image.id);
                 },
                 children: [
-                  /* @__PURE__ */ jsx42(
+                  /* @__PURE__ */ jsx43(
                     FigmaImageLayerStateButtons,
                     {
                       imageLabel,
@@ -19904,9 +19907,9 @@ var FigmaDevOverlayWidget = ({
                       onToggleVisible: () => toggleImageOverlayVisible(image.id)
                     }
                   ),
-                  /* @__PURE__ */ jsxs29("span", { className: "df-review-figma-dev-row-main", children: [
-                    /* @__PURE__ */ jsx42("strong", { children: imageLabel }),
-                    /* @__PURE__ */ jsx42("small", { children: formatFigmaImageDate(image.updatedAt) })
+                  /* @__PURE__ */ jsxs30("span", { className: "df-review-figma-dev-row-main", children: [
+                    /* @__PURE__ */ jsx43("strong", { children: imageLabel }),
+                    /* @__PURE__ */ jsx43("small", { children: formatFigmaImageDate(image.updatedAt) })
                   ] })
                 ]
               },
@@ -19914,7 +19917,7 @@ var FigmaDevOverlayWidget = ({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx42("div", { className: "df-review-figma-dev-bar", children: /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsx43("div", { className: "df-review-figma-dev-bar", children: /* @__PURE__ */ jsxs30(
           "button",
           {
             "aria-expanded": isPanelOpen,
@@ -19924,8 +19927,8 @@ var FigmaDevOverlayWidget = ({
             type: "button",
             onClick: () => setIsPanelOpen((isOpen) => !isOpen),
             children: [
-              /* @__PURE__ */ jsx42(FigmaMarkIcon, {}),
-              /* @__PURE__ */ jsx42("span", { className: "df-review-figma-dev-button-count", children: images.length })
+              /* @__PURE__ */ jsx43(FigmaMarkIcon, {}),
+              /* @__PURE__ */ jsx43("span", { className: "df-review-figma-dev-button-count", children: images.length })
             ]
           }
         ) })
@@ -19934,10 +19937,10 @@ var FigmaDevOverlayWidget = ({
   );
 };
 function useCurrentPageUrl(pageUrl, reviewPathPrefix) {
-  const [currentPageUrl, setCurrentPageUrl] = useState19(
+  const [currentPageUrl, setCurrentPageUrl] = useState20(
     () => getFigmaDevOverlayPageUrl(pageUrl, reviewPathPrefix)
   );
-  useEffect23(() => {
+  useEffect24(() => {
     const updatePageUrl = () => {
       setCurrentPageUrl(getFigmaDevOverlayPageUrl(pageUrl, reviewPathPrefix));
     };
@@ -19950,16 +19953,9 @@ function useCurrentPageUrl(pageUrl, reviewPathPrefix) {
   }, [pageUrl, reviewPathPrefix]);
   return currentPageUrl;
 }
-function isEditableFigmaDevOverlayEventTarget(event) {
-  const path = event.composedPath?.() ?? [];
-  const element = path[0] ?? event.target;
-  if (!element || typeof element.tagName !== "string") return false;
-  const tagName = element.tagName;
-  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT" || element.isContentEditable === true;
-}
 function useCurrentViewport() {
-  const [viewport, setViewport] = useState19(getCurrentViewportSize);
-  useEffect23(() => {
+  const [viewport, setViewport] = useState20(getCurrentViewportSize);
+  useEffect24(() => {
     const updateViewport = () => setViewport(getCurrentViewportSize());
     window.addEventListener("resize", updateViewport);
     window.addEventListener("orientationchange", updateViewport);
@@ -20516,7 +20512,7 @@ var createSupabasePresenceAdapter = ({
 });
 
 // src/react-shell.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var mountReviewShell = (options) => {
   if (typeof document === "undefined" || !document.head) return;
   const { rootId = "root", ...shellProps } = options;
@@ -20527,7 +20523,7 @@ var mountReviewShell = (options) => {
   root.style.height = "100%";
   root.style.margin = "0";
   createRoot2(root).render(
-    /* @__PURE__ */ jsx43(React3.StrictMode, { children: /* @__PURE__ */ jsx43(ReviewShell, { ...shellProps }) })
+    /* @__PURE__ */ jsx44(React3.StrictMode, { children: /* @__PURE__ */ jsx44(ReviewShell, { ...shellProps }) })
   );
 };
 export {