@arpproject/recrate 0.1.24 → 0.1.25

package/dist/crate-builder/editor-state.d.ts

@@ -70,6 +70,7 @@ export declare class EditorState {
      */
     update(newState: State): void;
     updateNavigationState(navigationState: NavigationState): void;
+    updateNavigationStateForId(id: string, navigationState: NavigationState): void;
     getNavigationState(id?: string): NavigationState | undefined;
     prune(validIds: Set<string>): void;
     /**

package/dist/recrate.es.js

@@ -67477,6 +67477,31 @@ let EditorState$1 = class EditorState {
       }
     });
   }
+  updateNavigationStateForId(id2, navigationState) {
+    var _a2, _b;
+    if (!id2) return;
+    for (let i = this.history.length - 1; i >= 0; i -= 1) {
+      const entry = this.history[i];
+      if ((entry == null ? void 0 : entry.id) !== id2) continue;
+      this.history[i] = {
+        ...entry,
+        navigationState: {
+          ...entry.navigationState ?? {},
+          ...navigationState,
+          tabStates: {
+            ...((_a2 = entry.navigationState) == null ? void 0 : _a2.tabStates) ?? {},
+            ...navigationState.tabStates ?? {}
+          },
+          uiState: {
+            ...((_b = entry.navigationState) == null ? void 0 : _b.uiState) ?? {},
+            ...navigationState.uiState ?? {}
+          }
+        }
+      };
+      this.persist();
+      return;
+    }
+  }
   getNavigationState(id2) {
     var _a2;
     if (!id2) {
@@ -110655,15 +110680,25 @@ const RenderEntity = forwardRef((props, ref) => {
   const editorPanelRef = useRef(null);
   const navigationRestoreReadyRef = useRef(false);
   const pendingRestoredTabRef = useRef(null);
+  const restoreInProgressRef = useRef(false);
+  const debugScroll = (...args) => console.log("[recrate-scroll-debug]", ...args);
   const getVisibleContextMarkers = (selector, dataAttribute) => {
     const source = activeContentRef.current;
     if (!source) return [];
     return Array.from(source.querySelectorAll(selector)).map((node2) => node2.getAttribute(dataAttribute)).filter((value) => Boolean(value));
   };
   const captureViewContext = (tabName = activeTab, explicitScrollTop) => {
-    var _a3, _b2, _c2, _d2;
+    var _a3, _b2, _c2, _d2, _e3, _f2, _g2, _h2;
     const entityId = contextEntity == null ? void 0 : contextEntity["@id"];
-    if (!entityId || ((_a3 = state.editorState.latest()) == null ? void 0 : _a3.id) !== entityId) return;
+    if (!entityId) return;
+    if (restoreInProgressRef.current && typeof explicitScrollTop !== "number") {
+      debugScroll("capture.skipped-during-restore", {
+        entityId,
+        tabName,
+        latestId: (_a3 = state.editorState.latest()) == null ? void 0 : _a3.id
+      });
+      return;
+    }
     const previous = state.editorState.getNavigationState(entityId) ?? {};
     const scrollTop = typeof explicitScrollTop === "number" ? explicitScrollTop : ((_b2 = activeContentRef.current) == null ? void 0 : _b2.scrollTop) ?? ((_d2 = (_c2 = previous.tabStates) == null ? void 0 : _c2[tabName]) == null ? void 0 : _d2.scrollTop) ?? 0;
     const nextTabState = {
@@ -110671,7 +110706,20 @@ const RenderEntity = forwardRef((props, ref) => {
       expandedSections: getVisibleContextMarkers('[aria-expanded="true"],[data-expanded="true"]', "data-section-id"),
       selectedItems: getVisibleContextMarkers('[aria-selected="true"],[data-selected="true"]', "data-item-id")
     };
-    state.editorState.updateNavigationState({
+    debugScroll("capture", {
+      entityId,
+      tabName,
+      latestId: (_e3 = state.editorState.latest()) == null ? void 0 : _e3.id,
+      explicitScrollTop,
+      scrollTop,
+      previousScrollTop: ((_g2 = (_f2 = previous.tabStates) == null ? void 0 : _f2[tabName]) == null ? void 0 : _g2.scrollTop) ?? null,
+      viewport: activeContentRef.current ? {
+        clientHeight: activeContentRef.current.clientHeight,
+        scrollHeight: activeContentRef.current.scrollHeight,
+        currentScrollTop: activeContentRef.current.scrollTop
+      } : null
+    });
+    const navigationState = {
       activeTab: tabName,
       tabStates: { [tabName]: nextTabState },
       uiState: {
@@ -110681,7 +110729,12 @@ const RenderEntity = forwardRef((props, ref) => {
         iconView,
         tabPaneWidth
       }
-    });
+    };
+    if (((_h2 = state.editorState.latest()) == null ? void 0 : _h2.id) === entityId) {
+      state.editorState.updateNavigationState(navigationState);
+    } else {
+      state.editorState.updateNavigationStateForId(entityId, navigationState);
+    }
   };
   const computeScrollViewportHeight = useMemo$1(() => debounce(() => {
     var _a3, _b2;
@@ -110769,6 +110822,15 @@ const RenderEntity = forwardRef((props, ref) => {
     const tabNames = layout.tabs.map((tab) => tab.name);
     const fallbackTab = tabNames.includes("about") ? "about" : tabNames[0] ?? "about";
     const restoredTab = layout.renderTabs && (navState == null ? void 0 : navState.activeTab) && tabNames.includes(navState.activeTab) ? navState.activeTab : fallbackTab;
+    debugScroll("init", {
+      entityId: entity2["@id"],
+      latestId: latestEntry == null ? void 0 : latestEntry.id,
+      isCurrentHistoryEntity,
+      renderTabs: layout.renderTabs,
+      tabNames,
+      restoredTab,
+      navState
+    });
     pendingRestoredTabRef.current = restoredTab;
     setActiveTab(restoredTab);
     if (typeof ((_a3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _a3.showAddPanel) === "boolean") setShowAddPanel(navState.uiState.showAddPanel);
@@ -110789,6 +110851,11 @@ const RenderEntity = forwardRef((props, ref) => {
     init2({ entity: entityObj });
   };
   const handleLoadEntityWithContext = (params) => {
+    debugScroll("navigate", {
+      fromEntityId: contextEntity == null ? void 0 : contextEntity["@id"],
+      activeTab,
+      params
+    });
     captureViewContext(activeTab);
     onLoadEntity(params);
   };
@@ -110814,19 +110881,58 @@ const RenderEntity = forwardRef((props, ref) => {
     const viewport = activeContentRef.current;
     if (!viewport) return;
     const restoreTarget = ((_c2 = (_b2 = (_a3 = state.editorState.getNavigationState(contextEntity["@id"])) == null ? void 0 : _a3.tabStates) == null ? void 0 : _b2[activeTab]) == null ? void 0 : _c2.scrollTop) ?? 0;
+    debugScroll("restore.start", {
+      entityId: contextEntity["@id"],
+      activeTab,
+      restoreTarget,
+      viewport: {
+        clientHeight: viewport.clientHeight,
+        scrollHeight: viewport.scrollHeight,
+        scrollTop: viewport.scrollTop
+      }
+    });
     let cancelled = false;
     let rafId = 0;
     let timerId = 0;
     let attempts = 0;
-    const maxAttempts = 12;
+    const maxAttempts = 40;
+    const previousInlineScrollBehavior = viewport.style.scrollBehavior;
+    restoreInProgressRef.current = true;
+    viewport.style.scrollBehavior = "auto";
     const attemptRestore = () => {
       if (cancelled) return;
       attempts += 1;
       const maxScrollable = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
       const target = Math.min(restoreTarget, maxScrollable);
-      viewport.scrollTop = target;
-      const done = Math.abs(viewport.scrollTop - target) <= 1;
+      viewport.scrollTo({ top: target, behavior: "auto" });
+      const contentReady = restoreTarget <= maxScrollable || restoreTarget === 0;
+      const done = contentReady && Math.abs(viewport.scrollTop - target) <= 1;
+      debugScroll("restore.attempt", {
+        entityId: contextEntity["@id"],
+        activeTab,
+        attempts,
+        restoreTarget,
+        maxScrollable,
+        target,
+        actualScrollTop: viewport.scrollTop,
+        clientHeight: viewport.clientHeight,
+        scrollHeight: viewport.scrollHeight,
+        contentReady,
+        done
+      });
       if (done || attempts >= maxAttempts) {
+        restoreInProgressRef.current = false;
+        viewport.style.scrollBehavior = previousInlineScrollBehavior;
+        debugScroll("restore.stop", {
+          entityId: contextEntity["@id"],
+          activeTab,
+          attempts,
+          restoreTarget,
+          finalScrollTop: viewport.scrollTop,
+          maxScrollable,
+          contentReady,
+          done
+        });
         return;
       }
       timerId = window.setTimeout(() => {
@@ -110838,6 +110944,8 @@ const RenderEntity = forwardRef((props, ref) => {
     viewport.addEventListener("scroll", handleScroll, { passive: true });
     return () => {
       cancelled = true;
+      restoreInProgressRef.current = false;
+      viewport.style.scrollBehavior = previousInlineScrollBehavior;
       if (navigationRestoreReadyRef.current) {
         captureViewContext(activeTab, viewport.scrollTop);
       }
@@ -110850,10 +110958,16 @@ const RenderEntity = forwardRef((props, ref) => {
     const pendingTab = pendingRestoredTabRef.current;
     if (!(contextEntity == null ? void 0 : contextEntity["@id"])) return;
     if (pendingTab) {
+      debugScroll("restore.pending-tab", {
+        entityId: contextEntity["@id"],
+        pendingTab,
+        activeTab
+      });
       if (activeTab !== pendingTab) {
         return;
       }
       navigationRestoreReadyRef.current = true;
+      restoreInProgressRef.current = true;
       pendingRestoredTabRef.current = null;
       setScrollRestoreNonce((prev2) => prev2 + 1);
       return;
@@ -111180,7 +111294,7 @@ const RenderEntity = forwardRef((props, ref) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "flex-1 overflow-y-auto scroll-smooth min-h-0 p-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "describo-editor-scroll flex-1 overflow-y-auto scroll-smooth min-h-0 p-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row space-x-2 my-2 p-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
@@ -111268,7 +111382,7 @@ const RenderEntity = forwardRef((props, ref) => {
             tabBarStyle: { width: "100%" }
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "describo-editor-scroll h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row space-x-2 my-2 p-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
@@ -111350,7 +111464,7 @@ const RenderEntity = forwardRef((props, ref) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "describo-editor-scroll h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
           !((_m = state.configuration) == null ? void 0 : _m.readonly) && ((_n = tabs.find((t22) => t22.name === activeTab)) == null ? void 0 : _n.missingRequiredData) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600 float-right mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -119780,7 +119894,7 @@ var EmotionCacheContext = /* @__PURE__ */ React.createContext(
   }) : null
 );
 var CacheProvider = EmotionCacheContext.Provider;
-const version = "0.1.24";
+const version = "0.1.25";
 const pkg = {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arpproject/recrate",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "main": "./dist/recrate.es.js",
   "module": "./dist/recrate.es.js",