@designfever/web-review-kit 0.7.0 → 0.7.1

package/dist/react-shell.d.cts

@@ -69,6 +69,7 @@ type ReviewShellSyncSubmissionInput = {
 type ReviewShellAdapter = {
     label: ReviewSource;
     pageId?: string;
+    defaultUserId?: string;
     get: WebReviewKitAdapter['get'];
     list: WebReviewKitAdapter['list'];
     create?: WebReviewKitAdapter['create'];
@@ -87,6 +88,7 @@ type ReviewShellAdapterMap = {
     local: WebReviewKitAdapter;
     remote?: WebReviewKitAdapter | null;
     remotePageId?: string;
+    defaultUserId?: string;
 };
 type ReviewShellAdapters = ReviewShellAdapterMap | ReviewShellAdapter[];
 type ReviewPresenceStatus = 'idle' | 'reviewing' | 'editing';

package/dist/react-shell.d.ts

@@ -69,6 +69,7 @@ type ReviewShellSyncSubmissionInput = {
 type ReviewShellAdapter = {
     label: ReviewSource;
     pageId?: string;
+    defaultUserId?: string;
     get: WebReviewKitAdapter['get'];
     list: WebReviewKitAdapter['list'];
     create?: WebReviewKitAdapter['create'];
@@ -87,6 +88,7 @@ type ReviewShellAdapterMap = {
     local: WebReviewKitAdapter;
     remote?: WebReviewKitAdapter | null;
     remotePageId?: string;
+    defaultUserId?: string;
 };
 type ReviewShellAdapters = ReviewShellAdapterMap | ReviewShellAdapter[];
 type ReviewPresenceStatus = 'idle' | 'reviewing' | 'editing';

package/dist/react-shell.js

@@ -5527,7 +5527,10 @@ var buildTargetSrc = (target) => {
   return `${url.pathname}${url.search}${url.hash}`;
 };
 var getFrameRouteTarget = (targetWindow, reviewPathPrefix) => {
-  return normalizeTarget(targetWindow.location.pathname, reviewPathPrefix);
+  return normalizeTarget(
+    `${targetWindow.location.pathname}${targetWindow.location.search}${targetWindow.location.hash}`,
+    reviewPathPrefix
+  );
 };
 var updateShellUrl = (target, size, source) => {
   const url = new URL(window.location.href);
@@ -5702,7 +5705,7 @@ var ABOUT_SECTIONS = [
   },
   {
     title: "Figma token",
-    body: "Add a browser-safe Figma token in Settings only when the host page already supports the Figma overlay helper. The package stores it in localStorage as figma-token and does not own a server-side Figma integration."
+    body: "Project owners can set FIGMA_TOKEN on the server. Reviewers who cannot change env can add a browser-local Figma token in Settings; it is stored as figma-token and used only as an image-store fallback."
   },
   {
     title: "User ID",
@@ -6002,12 +6005,13 @@ var writeStoredFigmaToken = (token) => {
     return;
   }
 };
-var getStoredReviewUserId = () => {
-  if (typeof window === "undefined") return "";
+var getStoredReviewUserId = (fallback = "") => {
+  const normalizedFallback = fallback.trim();
+  if (typeof window === "undefined") return normalizedFallback;
   try {
-    return window.localStorage.getItem(REVIEW_USER_ID_STORAGE_KEY) ?? "";
+    return window.localStorage.getItem(REVIEW_USER_ID_STORAGE_KEY)?.trim() || normalizedFallback;
   } catch {
-    return "";
+    return normalizedFallback;
   }
 };
 var writeStoredReviewUserId = (userId) => {
@@ -12955,15 +12959,18 @@ var useReviewFigmaImages = ({
 // src/react-shell/hooks/use.review.settings.ts
 import { useCallback as useCallback13, useEffect as useEffect11, useState as useState10 } from "react";
 var useReviewSettings = ({
+  defaultReviewUserId = "",
   onCancelReviewMode,
   onCloseInitialPrompt,
   onCloseSitemap,
   onReloadTargetFrame
 }) => {
   const [figmaTokenDraft, setFigmaTokenDraft] = useState10(getStoredFigmaToken);
-  const [reviewUserId, setReviewUserId] = useState10(getStoredReviewUserId);
+  const [reviewUserId, setReviewUserId] = useState10(
+    () => getStoredReviewUserId(defaultReviewUserId)
+  );
   const [reviewUserIdDraft, setReviewUserIdDraft] = useState10(
-    getStoredReviewUserId
+    () => getStoredReviewUserId(defaultReviewUserId)
   );
   const [reviewTheme, setReviewTheme] = useState10(getStoredReviewTheme);
   const [reviewThemeDraft, setReviewThemeDraft] = useState10(getStoredReviewTheme);
@@ -12984,7 +12991,7 @@ var useReviewSettings = ({
     onCloseSitemap();
     onCloseInitialPrompt();
     setFigmaTokenDraft(getStoredFigmaToken());
-    setReviewUserIdDraft(getStoredReviewUserId());
+    setReviewUserIdDraft(getStoredReviewUserId(defaultReviewUserId));
     setReviewThemeDraft(reviewTheme);
     setFigmaSettingsStatus("");
     setIsFigmaTokenVisible(false);
@@ -12994,6 +13001,7 @@ var useReviewSettings = ({
     onCancelReviewMode,
     onCloseInitialPrompt,
     onCloseSitemap,
+    defaultReviewUserId,
     reviewTheme
   ]);
   const saveReviewSettings = useCallback13(
@@ -13020,6 +13028,12 @@ var useReviewSettings = ({
     },
     [closeFigmaSettings, onReloadTargetFrame]
   );
+  useEffect11(() => {
+    if (getStoredReviewUserId()) return;
+    const nextDefaultUserId = defaultReviewUserId.trim();
+    setReviewUserId(nextDefaultUserId);
+    setReviewUserIdDraft(nextDefaultUserId);
+  }, [defaultReviewUserId]);
   useEffect11(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const query = window.matchMedia("(prefers-color-scheme: light)");
@@ -13424,6 +13438,7 @@ function normalizeLegacyAdapterMap(adapters) {
     statusOptions: [...REVIEW_WORKFLOW_STATUS_OPTIONS],
     assigneeTitle: DEFAULT_ASSIGNEE_TITLE,
     assigneeOptions: [],
+    defaultUserId: adapters.defaultUserId?.trim() ?? "",
     updateStatus: ({ id, status }) => adapters.local.update(id, { status }),
     updateAssignee: ({ id, assigneeId, assigneeName }) => adapters.local.update(id, { assigneeId, assigneeName }),
     syncSubmission: ({ id, patch }) => adapters.local.update(id, patch),
@@ -13438,6 +13453,7 @@ function normalizeLegacyAdapterMap(adapters) {
     statusOptions: [...REVIEW_WORKFLOW_STATUS_OPTIONS],
     assigneeTitle: DEFAULT_ASSIGNEE_TITLE,
     assigneeOptions: [],
+    defaultUserId: adapters.defaultUserId?.trim() ?? "",
     updateStatus: ({ id, status }) => adapters.remote?.update(id, { status }) ?? Promise.reject(new Error("Remote adapter is not available.")),
     updateAssignee: ({ id, assigneeId, assigneeName }) => adapters.remote?.update(id, { assigneeId, assigneeName }) ?? Promise.reject(new Error("Remote adapter is not available.")),
     writeModes: [],
@@ -13460,6 +13476,7 @@ function normalizeShellAdapter(adapterConfig) {
   };
   const assigneeTitle = adapterConfig.assigneeTitle?.trim() || DEFAULT_ASSIGNEE_TITLE;
   const assigneeOptions = [...adapterConfig.assigneeOptions ?? []];
+  const defaultUserId = adapterConfig.defaultUserId?.trim() ?? "";
   const updateAdapter = adapterConfig.update;
   const updateStatus = adapterConfig.updateStatus ? adapterConfig.updateStatus : updateAdapter ? ({ id, status }) => updateAdapter(id, { status }) : void 0;
   const updateAssignee = adapterConfig.updateAssignee ? adapterConfig.updateAssignee : updateAdapter ? ({ id, assigneeId, assigneeName, assigneeOption }) => updateAdapter(id, {
@@ -13476,6 +13493,7 @@ function normalizeShellAdapter(adapterConfig) {
     statusOptions,
     assigneeTitle,
     assigneeOptions,
+    defaultUserId,
     updateStatus,
     updateAssignee,
     syncSubmission: adapterConfig.syncSubmission,
@@ -14032,8 +14050,10 @@ var ReviewShell = ({
   });
   const sourceShortcutCleanupRef = useRef8(null);
   const sourceInspectorInteractionRef = useRef8(false);
+  const sectionOutlineCountRef = useRef8(0);
   const [sourceInspectorState, setSourceInspectorState] = useState13(null);
   const [sectionOutline, setSectionOutline] = useState13(null);
+  const [targetFrameLoadVersion, setTargetFrameLoadVersion] = useState13(0);
   const [sectionOutlineFilter, setSectionOutlineFilter] = useState13(
     () => getStoredSourceTreeFilter()
   );
@@ -14135,6 +14155,9 @@ var ReviewShell = ({
     [filteredSectionOutline]
   );
   const isSectionOutlineFiltering = sectionOutlineFilterTerms.length > 0;
+  useEffect13(() => {
+    sectionOutlineCountRef.current = sectionOutlineTotalCount;
+  }, [sectionOutlineTotalCount]);
   const {
     activeItems,
     activeRemainingItemCount,
@@ -14286,6 +14309,7 @@ var ReviewShell = ({
     setReviewThemeDraft,
     setReviewUserIdDraft
   } = useReviewSettings({
+    defaultReviewUserId: activeAdapterEntry.defaultUserId,
     onCancelReviewMode: cancelReviewMode,
     onCloseInitialPrompt: closePromptModal,
     onCloseSitemap: closeSitemap,
@@ -14715,32 +14739,78 @@ var ReviewShell = ({
   const setSectionOutlineWithDefaultCollapse = useCallback15(
     (nextSectionOutline) => {
       setSectionOutline(nextSectionOutline);
+      sectionOutlineCountRef.current = getSectionOutlineEntryCount(nextSectionOutline);
       setCollapsedSectionOutlineIds(
         getDefaultCollapsedSectionOutlineIds(nextSectionOutline)
       );
     },
     []
   );
+  const refreshCurrentSectionOutline = useCallback15(
+    (resetCollapse = false) => {
+      const nextSectionOutline = getCurrentSectionOutline();
+      if (!nextSectionOutline) return false;
+      setSectionOutline(nextSectionOutline);
+      const nextCount = getSectionOutlineEntryCount(nextSectionOutline);
+      const shouldResetCollapse = resetCollapse || sectionOutlineCountRef.current === 0;
+      sectionOutlineCountRef.current = nextCount;
+      if (shouldResetCollapse) {
+        setCollapsedSectionOutlineIds(
+          getDefaultCollapsedSectionOutlineIds(nextSectionOutline)
+        );
+      }
+      return true;
+    },
+    [getCurrentSectionOutline]
+  );
   useEffect13(() => {
     if (sidePanel !== "source" || !isListVisible) return void 0;
     const refreshSectionOutline = () => {
-      const nextSectionOutline = getCurrentSectionOutline();
-      if (!nextSectionOutline) return;
-      setSectionOutlineWithDefaultCollapse(nextSectionOutline);
+      refreshCurrentSectionOutline(true);
     };
     const animationFrame = window.requestAnimationFrame(refreshSectionOutline);
     const firstTimeout = window.setTimeout(refreshSectionOutline, 120);
     const secondTimeout = window.setTimeout(refreshSectionOutline, 500);
+    const thirdTimeout = window.setTimeout(refreshSectionOutline, 1200);
     return () => {
       window.cancelAnimationFrame(animationFrame);
       window.clearTimeout(firstTimeout);
       window.clearTimeout(secondTimeout);
+      window.clearTimeout(thirdTimeout);
     };
   }, [
-    getCurrentSectionOutline,
     isListVisible,
-    setSectionOutlineWithDefaultCollapse,
+    refreshCurrentSectionOutline,
     sidePanel,
+    targetFrameLoadVersion,
+    targetSrc
+  ]);
+  useEffect13(() => {
+    if (sidePanel !== "source" || !isListVisible) return void 0;
+    const frameDocument = iframeRef.current?.contentDocument;
+    const body = frameDocument?.body;
+    if (!body) return void 0;
+    let refreshTimeout = null;
+    const scheduleRefresh = () => {
+      if (refreshTimeout) window.clearTimeout(refreshTimeout);
+      refreshTimeout = window.setTimeout(() => {
+        refreshTimeout = null;
+        refreshCurrentSectionOutline(false);
+      }, 80);
+    };
+    const observer = new MutationObserver(scheduleRefresh);
+    observer.observe(body, { childList: true, subtree: true });
+    scheduleRefresh();
+    return () => {
+      if (refreshTimeout) window.clearTimeout(refreshTimeout);
+      observer.disconnect();
+    };
+  }, [
+    iframeRef,
+    isListVisible,
+    refreshCurrentSectionOutline,
+    sidePanel,
+    targetFrameLoadVersion,
     targetSrc
   ]);
   const toggleQaPanel = useCallback15(() => {
@@ -14754,16 +14824,12 @@ var ReviewShell = ({
       return;
     }
     setSidePanel("source");
-    const nextSectionOutline = getCurrentSectionOutline();
-    if (nextSectionOutline) {
-      setSectionOutlineWithDefaultCollapse(nextSectionOutline);
-    }
+    refreshCurrentSectionOutline(true);
     setIsListVisible(true);
   }, [
-    getCurrentSectionOutline,
     isListVisible,
     isSourceInspectorEnabled,
-    setSectionOutlineWithDefaultCollapse,
+    refreshCurrentSectionOutline,
     setIsListVisible,
     sidePanel
   ]);
@@ -15070,6 +15136,7 @@ var ReviewShell = ({
     return cleanupSourceOpenShortcut;
   }, [cleanupSourceOpenShortcut]);
   const loadTargetFrame = useCallback15(() => {
+    setTargetFrameLoadVersion((currentVersion) => currentVersion + 1);
     initReviewKit();
     refreshTargetFigmaConfig();
     setTargetFigmaOverlayLocked(
@@ -15078,20 +15145,16 @@ var ReviewShell = ({
     );
     bindSourceOpenShortcut();
     if (sidePanel === "source" && isListVisible) {
-      const nextSectionOutline = getCurrentSectionOutline();
-      if (nextSectionOutline) {
-        setSectionOutlineWithDefaultCollapse(nextSectionOutline);
-      }
+      refreshCurrentSectionOutline(true);
     }
   }, [
     bindSourceOpenShortcut,
-    getCurrentSectionOutline,
     iframeRef,
     initReviewKit,
     isListVisible,
     mode,
     refreshTargetFigmaConfig,
-    setSectionOutlineWithDefaultCollapse,
+    refreshCurrentSectionOutline,
     sidePanel
   ]);
   useEffect13(() => {