@designfever/web-review-kit 0.7.0 → 0.7.1

package/dist/index.d.cts

@@ -16,9 +16,11 @@ declare const REVIEW_WORKFLOW_STATUS_OPTIONS: Array<{
 declare function normalizeReviewItemStatus(status: ReviewItemStatus | undefined): ReviewWorkflowStatus;
 
 declare const DEFAULT_REVIEW_FIGMA_IMAGE_STORE_ENDPOINT = "/__dfwr/figma-images";
+type ReviewFigmaImageTokenProvider = string | null | undefined | (() => string | null | undefined);
 type ReviewFigmaImageStoreClientOptions = {
     endpoint?: string;
     fetch?: typeof fetch;
+    token?: ReviewFigmaImageTokenProvider;
     clientRender?: boolean | ReviewFigmaImageClientRenderOptions;
 };
 type ReviewFigmaImageClientRenderOptions = {

package/dist/index.d.ts

@@ -16,9 +16,11 @@ declare const REVIEW_WORKFLOW_STATUS_OPTIONS: Array<{
 declare function normalizeReviewItemStatus(status: ReviewItemStatus | undefined): ReviewWorkflowStatus;
 
 declare const DEFAULT_REVIEW_FIGMA_IMAGE_STORE_ENDPOINT = "/__dfwr/figma-images";
+type ReviewFigmaImageTokenProvider = string | null | undefined | (() => string | null | undefined);
 type ReviewFigmaImageStoreClientOptions = {
     endpoint?: string;
     fetch?: typeof fetch;
+    token?: ReviewFigmaImageTokenProvider;
     clientRender?: boolean | ReviewFigmaImageClientRenderOptions;
 };
 type ReviewFigmaImageClientRenderOptions = {

package/dist/index.js

@@ -30,7 +30,7 @@ import {
   readReviewFigmaToken,
   requireReviewFigmaNodeRef,
   requireReviewFigmaToken
-} from "./chunk-AB5B6O77.js";
+} from "./chunk-2ZLU5FTD.js";
 
 // src/adapters/supabase.ts
 var DEFAULT_SUPABASE_REVIEW_TABLE = "review_items";

package/dist/react-shell.cjs

@@ -5573,7 +5573,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);
@@ -5748,7 +5751,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",
@@ -6048,12 +6051,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) => {
@@ -17547,15 +17551,18 @@ var useReviewFigmaImages = ({
 // src/react-shell/hooks/use.review.settings.ts
 var import_react20 = require("react");
 var useReviewSettings = ({
+  defaultReviewUserId = "",
   onCancelReviewMode,
   onCloseInitialPrompt,
   onCloseSitemap,
   onReloadTargetFrame
 }) => {
   const [figmaTokenDraft, setFigmaTokenDraft] = (0, import_react20.useState)(getStoredFigmaToken);
-  const [reviewUserId, setReviewUserId] = (0, import_react20.useState)(getStoredReviewUserId);
+  const [reviewUserId, setReviewUserId] = (0, import_react20.useState)(
+    () => getStoredReviewUserId(defaultReviewUserId)
+  );
   const [reviewUserIdDraft, setReviewUserIdDraft] = (0, import_react20.useState)(
-    getStoredReviewUserId
+    () => getStoredReviewUserId(defaultReviewUserId)
   );
   const [reviewTheme, setReviewTheme] = (0, import_react20.useState)(getStoredReviewTheme);
   const [reviewThemeDraft, setReviewThemeDraft] = (0, import_react20.useState)(getStoredReviewTheme);
@@ -17576,7 +17583,7 @@ var useReviewSettings = ({
     onCloseSitemap();
     onCloseInitialPrompt();
     setFigmaTokenDraft(getStoredFigmaToken());
-    setReviewUserIdDraft(getStoredReviewUserId());
+    setReviewUserIdDraft(getStoredReviewUserId(defaultReviewUserId));
     setReviewThemeDraft(reviewTheme);
     setFigmaSettingsStatus("");
     setIsFigmaTokenVisible(false);
@@ -17586,6 +17593,7 @@ var useReviewSettings = ({
     onCancelReviewMode,
     onCloseInitialPrompt,
     onCloseSitemap,
+    defaultReviewUserId,
     reviewTheme
   ]);
   const saveReviewSettings = (0, import_react20.useCallback)(
@@ -17612,6 +17620,12 @@ var useReviewSettings = ({
     },
     [closeFigmaSettings, onReloadTargetFrame]
   );
+  (0, import_react20.useEffect)(() => {
+    if (getStoredReviewUserId()) return;
+    const nextDefaultUserId = defaultReviewUserId.trim();
+    setReviewUserId(nextDefaultUserId);
+    setReviewUserIdDraft(nextDefaultUserId);
+  }, [defaultReviewUserId]);
   (0, import_react20.useEffect)(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const query = window.matchMedia("(prefers-color-scheme: light)");
@@ -18012,6 +18026,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),
@@ -18026,6 +18041,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: [],
@@ -18048,6 +18064,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, {
@@ -18064,6 +18081,7 @@ function normalizeShellAdapter(adapterConfig) {
     statusOptions,
     assigneeTitle,
     assigneeOptions,
+    defaultUserId,
     updateStatus,
     updateAssignee,
     syncSubmission: adapterConfig.syncSubmission,
@@ -18620,8 +18638,10 @@ var ReviewShell = ({
   });
   const sourceShortcutCleanupRef = (0, import_react24.useRef)(null);
   const sourceInspectorInteractionRef = (0, import_react24.useRef)(false);
+  const sectionOutlineCountRef = (0, import_react24.useRef)(0);
   const [sourceInspectorState, setSourceInspectorState] = (0, import_react24.useState)(null);
   const [sectionOutline, setSectionOutline] = (0, import_react24.useState)(null);
+  const [targetFrameLoadVersion, setTargetFrameLoadVersion] = (0, import_react24.useState)(0);
   const [sectionOutlineFilter, setSectionOutlineFilter] = (0, import_react24.useState)(
     () => getStoredSourceTreeFilter()
   );
@@ -18723,6 +18743,9 @@ var ReviewShell = ({
     [filteredSectionOutline]
   );
   const isSectionOutlineFiltering = sectionOutlineFilterTerms.length > 0;
+  (0, import_react24.useEffect)(() => {
+    sectionOutlineCountRef.current = sectionOutlineTotalCount;
+  }, [sectionOutlineTotalCount]);
   const {
     activeItems,
     activeRemainingItemCount,
@@ -18874,6 +18897,7 @@ var ReviewShell = ({
     setReviewThemeDraft,
     setReviewUserIdDraft
   } = useReviewSettings({
+    defaultReviewUserId: activeAdapterEntry.defaultUserId,
     onCancelReviewMode: cancelReviewMode,
     onCloseInitialPrompt: closePromptModal,
     onCloseSitemap: closeSitemap,
@@ -19303,32 +19327,78 @@ var ReviewShell = ({
   const setSectionOutlineWithDefaultCollapse = (0, import_react24.useCallback)(
     (nextSectionOutline) => {
       setSectionOutline(nextSectionOutline);
+      sectionOutlineCountRef.current = getSectionOutlineEntryCount(nextSectionOutline);
       setCollapsedSectionOutlineIds(
         getDefaultCollapsedSectionOutlineIds(nextSectionOutline)
       );
     },
     []
   );
+  const refreshCurrentSectionOutline = (0, import_react24.useCallback)(
+    (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]
+  );
   (0, import_react24.useEffect)(() => {
     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
+  ]);
+  (0, import_react24.useEffect)(() => {
+    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 = (0, import_react24.useCallback)(() => {
@@ -19342,16 +19412,12 @@ var ReviewShell = ({
       return;
     }
     setSidePanel("source");
-    const nextSectionOutline = getCurrentSectionOutline();
-    if (nextSectionOutline) {
-      setSectionOutlineWithDefaultCollapse(nextSectionOutline);
-    }
+    refreshCurrentSectionOutline(true);
     setIsListVisible(true);
   }, [
-    getCurrentSectionOutline,
     isListVisible,
     isSourceInspectorEnabled,
-    setSectionOutlineWithDefaultCollapse,
+    refreshCurrentSectionOutline,
     setIsListVisible,
     sidePanel
   ]);
@@ -19658,6 +19724,7 @@ var ReviewShell = ({
     return cleanupSourceOpenShortcut;
   }, [cleanupSourceOpenShortcut]);
   const loadTargetFrame = (0, import_react24.useCallback)(() => {
+    setTargetFrameLoadVersion((currentVersion) => currentVersion + 1);
     initReviewKit();
     refreshTargetFigmaConfig();
     setTargetFigmaOverlayLocked(
@@ -19666,20 +19733,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
   ]);
   (0, import_react24.useEffect)(() => {