@arpproject/recrate 0.1.22 → 0.1.23

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

@@ -1,5 +1,17 @@
+interface NavigationTabState {
+    scrollTop?: number;
+    expandedSections?: string[];
+    selectedItems?: string[];
+}
+interface NavigationState {
+    activeTab?: string;
+    tabStates?: Record<string, NavigationTabState>;
+    uiState?: Record<string, any>;
+}
 interface State {
     id: string;
+    tab?: string;
+    navigationState?: NavigationState;
     [key: string]: any;
 }
 /**
@@ -14,9 +26,8 @@ export declare class EditorState {
     history: State[];
     current: number;
     constructor();
-    /**
-     * Reset the internal state
-     */
+    private hydrate;
+    private persist;
     reset(): void;
     /**
      * Push a new state onto the history stack
@@ -47,6 +58,9 @@ export declare class EditorState {
      * @param {Object} an object to be merged into the current entry
      */
     update(newState: State): void;
+    updateNavigationState(navigationState: NavigationState): void;
+    getNavigationState(id?: string): NavigationState | undefined;
+    prune(validIds: Set<string>): void;
     /**
      * Delete a property from the current entry
      *

package/dist/recrate.es.js

@@ -67349,17 +67349,39 @@ function useStore(api2, selector = identity) {
   React__default.useDebugValue(slice2);
   return slice2;
 }
+const STORAGE_KEY = "recrate.editor-state.v1";
 let EditorState$1 = class EditorState {
   constructor() {
-    this.history = [];
-    this.current = 0;
+    const hydrated = this.hydrate();
+    this.history = (hydrated == null ? void 0 : hydrated.history) ?? [];
+    this.current = (hydrated == null ? void 0 : hydrated.current) ?? 0;
+  }
+  hydrate() {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = window.sessionStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+      const data = JSON.parse(raw);
+      if (!Array.isArray(data == null ? void 0 : data.history)) return null;
+      return {
+        history: data.history,
+        current: Math.max(0, Math.min(Number(data.current) || 0, data.history.length - 1))
+      };
+    } catch {
+      return null;
+    }
+  }
+  persist() {
+    if (typeof window === "undefined") return;
+    try {
+      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ history: this.history, current: this.current }));
+    } catch {
+    }
   }
-  /**
-   * Reset the internal state
-   */
   reset() {
     this.history = [];
     this.current = 0;
+    this.persist();
   }
   /**
    * Push a new state onto the history stack
@@ -67378,6 +67400,7 @@ let EditorState$1 = class EditorState {
     }
     this.history = [...this.history, { id: id2 }];
     this.current = this.history.length - 1;
+    this.persist();
   }
   /**
    * Go back through the state
@@ -67385,6 +67408,7 @@ let EditorState$1 = class EditorState {
   back() {
     if (this.current === 0) return;
     this.current -= 1;
+    this.persist();
   }
   /**
    * Go forward through the state
@@ -67392,6 +67416,7 @@ let EditorState$1 = class EditorState {
   forward() {
     if (this.current === this.history.length - 1) return;
     this.current += 1;
+    this.persist();
   }
   /**
    * Return the current entry
@@ -67412,6 +67437,44 @@ let EditorState$1 = class EditorState {
    */
   update(newState) {
     this.history[this.current] = { ...this.history[this.current], ...newState };
+    this.persist();
+  }
+  updateNavigationState(navigationState) {
+    var _a2, _b;
+    const latest = this.latest();
+    if (!latest) return;
+    this.update({
+      ...latest,
+      navigationState: {
+        ...latest.navigationState ?? {},
+        ...navigationState,
+        tabStates: {
+          ...((_a2 = latest.navigationState) == null ? void 0 : _a2.tabStates) ?? {},
+          ...navigationState.tabStates ?? {}
+        },
+        uiState: {
+          ...((_b = latest.navigationState) == null ? void 0 : _b.uiState) ?? {},
+          ...navigationState.uiState ?? {}
+        }
+      }
+    });
+  }
+  getNavigationState(id2) {
+    var _a2;
+    if (!id2) {
+      return (_a2 = this.latest()) == null ? void 0 : _a2.navigationState;
+    }
+    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;
+      if (entry.navigationState) return entry.navigationState;
+    }
+    return void 0;
+  }
+  prune(validIds) {
+    this.history = this.history.filter((entry) => validIds.has(entry.id));
+    this.current = this.history.length === 0 ? 0 : Math.min(this.current, this.history.length - 1);
+    this.persist();
   }
   /**
    * Delete a property from the current entry
@@ -67421,6 +67484,7 @@ let EditorState$1 = class EditorState {
    */
   deleteFromState({ property }) {
     delete this.history[this.current][property];
+    this.persist();
   }
   /**
    * Replace an id in the state
@@ -67435,13 +67499,8 @@ let EditorState$1 = class EditorState {
   replaceId({ id: id2, newId }) {
     this.history = this.history.slice(0, -1);
     this.current = this.history.length - 1;
-    this.history = this.history.map((e3, i) => {
-      if (e3.id === id2) {
-        return { ...e3, id: newId };
-      } else {
-        return e3;
-      }
-    });
+    this.history = this.history.map((e3) => e3.id === id2 ? { ...e3, id: newId } : e3);
+    this.persist();
   }
 };
 const createStateStore = () => createStore((set2) => ({
@@ -106637,6 +106696,7 @@ const RenderControls = ({
   var _a2, _b, _c, _d, _e2, _f;
   const { t: t2 } = useTranslation();
   const state = useStateStore();
+  const debugNav = (...args) => console.log("[recrate-nav-debug][controls]", ...args);
   const [dialogs, setDialogs] = useState({
     previewCrate: false,
     editContext: false,
@@ -106666,17 +106726,25 @@ const RenderControls = ({
   const canGoForward = state.editorState.canForward();
   const handleBack = () => {
     if (!canGoBack) return;
+    const before = state.editorState.latest();
+    debugNav("back.click", { currentEntity: entity["@id"], before });
     onBack();
     const latest = state.editorState.latest();
+    debugNav("back.afterPointerMove", { latest });
     if (latest == null ? void 0 : latest.id) {
+      debugNav("back.loadEntity", { id: latest.id, updateState: false });
       onLoadEntity({ id: latest.id, updateState: false });
     }
   };
   const handleForward = () => {
     if (!canGoForward) return;
+    const before = state.editorState.latest();
+    debugNav("forward.click", { currentEntity: entity["@id"], before });
     onForward();
     const latest = state.editorState.latest();
+    debugNav("forward.afterPointerMove", { latest });
     if (latest == null ? void 0 : latest.id) {
+      debugNav("forward.loadEntity", { id: latest.id, updateState: false });
       onLoadEntity({ id: latest.id, updateState: false });
     }
   };
@@ -110558,9 +110626,47 @@ const RenderEntity = forwardRef((props, ref) => {
     localStorage.setItem("recrate.verticalTabWidth", String(clamped));
   }, 200), [iconView]);
   const [scrollViewportHeight, setScrollViewportHeight] = useState(0);
+  const [scrollRestoreNonce, setScrollRestoreNonce] = useState(0);
   const contentContainerRef = useRef(null);
   const activeContentRef = useRef(null);
   const editorPanelRef = useRef(null);
+  const navigationRestoreReadyRef = useRef(false);
+  const pendingRestoredTabRef = useRef(null);
+  const debugNav = (...args) => console.log("[recrate-nav-debug][shell2]", ...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, _e3;
+    const entityId = contextEntity == null ? void 0 : contextEntity["@id"];
+    if (!entityId || ((_a3 = state.editorState.latest()) == null ? void 0 : _a3.id) !== entityId) 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 = {
+      scrollTop,
+      expandedSections: getVisibleContextMarkers('[aria-expanded="true"],[data-expanded="true"]', "data-section-id"),
+      selectedItems: getVisibleContextMarkers('[aria-selected="true"],[data-selected="true"]', "data-item-id")
+    };
+    debugNav("captureViewContext", {
+      entityId,
+      tabName,
+      scrollTop,
+      latestId: (_e3 = state.editorState.latest()) == null ? void 0 : _e3.id
+    });
+    state.editorState.updateNavigationState({
+      activeTab: tabName,
+      tabStates: { [tabName]: nextTabState },
+      uiState: {
+        showAddPanel,
+        reverseSidebarVisible,
+        highlightRequiredProperties,
+        iconView,
+        tabPaneWidth
+      }
+    });
+  };
   const computeScrollViewportHeight = useMemo$1(() => debounce(() => {
     var _a3, _b2;
     const containerRect = (_a3 = contentContainerRef.current) == null ? void 0 : _a3.getBoundingClientRect();
@@ -110615,6 +110721,16 @@ const RenderEntity = forwardRef((props, ref) => {
     }
   }));
   useEffect(() => {
+    navigationRestoreReadyRef.current = false;
+    debugNav("entity.effect.start", {
+      incomingEntityId: entity == null ? void 0 : entity["@id"],
+      previousContextEntityId: contextEntity == null ? void 0 : contextEntity["@id"],
+      activeTab,
+      latest: state.editorState.latest()
+    });
+    if ((contextEntity == null ? void 0 : contextEntity["@id"]) && (entity == null ? void 0 : entity["@id"]) && contextEntity["@id"] !== entity["@id"]) {
+      captureViewContext(activeTab);
+    }
     setExtraProperties([]);
     init2({ entity });
   }, [entity]);
@@ -110625,10 +110741,10 @@ const RenderEntity = forwardRef((props, ref) => {
     }
   }, [profileManager == null ? void 0 : profileManager.$key]);
   const init2 = ({ entity: entity2 }) => {
+    var _a3, _b2, _c2, _d2, _e3;
     if (!entity2["@id"]) return;
-    if (entity2["@id"] !== contextEntity["@id"]) {
-      window.scrollTo(0, 0);
-    }
+    const latestEntry = state.editorState.latest();
+    const isCurrentHistoryEntity = (latestEntry == null ? void 0 : latestEntry.id) === entity2["@id"];
     const layout = applyLayout({
       configuration: state.configuration,
       profileManager,
@@ -110639,24 +110755,153 @@ const RenderEntity = forwardRef((props, ref) => {
     setRenderTabs(layout.renderTabs);
     setMissingRequiredData(layout.missingRequiredData);
     setTabs(layout.tabs);
-    if (layout.renderTabs) {
-      state.editorState.update({ id: entity2["@id"], tab: activeTab });
-    } else {
-      state.editorState.deleteFromState({ property: "tab" });
+    const navState = isCurrentHistoryEntity ? latestEntry == null ? void 0 : latestEntry.navigationState : state.editorState.getNavigationState(entity2["@id"]);
+    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;
+    debugNav("init.restoreDecision", {
+      entityId: entity2["@id"],
+      latestEntry,
+      isCurrentHistoryEntity,
+      navActiveTab: navState == null ? void 0 : navState.activeTab,
+      tabNames,
+      restoredTab,
+      fallbackTab
+    });
+    pendingRestoredTabRef.current = restoredTab;
+    setActiveTab(restoredTab);
+    if (typeof ((_a3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _a3.showAddPanel) === "boolean") setShowAddPanel(navState.uiState.showAddPanel);
+    if (typeof ((_b2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _b2.reverseSidebarVisible) === "boolean") setReverseSidebarVisible(navState.uiState.reverseSidebarVisible);
+    if (typeof ((_c2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _c2.highlightRequiredProperties) === "boolean") setHighlightRequiredProperties(navState.uiState.highlightRequiredProperties);
+    if (typeof ((_d2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _d2.iconView) === "boolean") setIconView(navState.uiState.iconView);
+    if (typeof ((_e3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _e3.tabPaneWidth) === "number") setTabPaneWidth(navState.uiState.tabPaneWidth);
+    if (isCurrentHistoryEntity) {
+      if (layout.renderTabs) {
+        state.editorState.update({ id: entity2["@id"], tab: restoredTab });
+      } else {
+        state.editorState.deleteFromState({ property: "tab" });
+      }
     }
+    debugNav("init.deferReadyUntilTabCommit", {
+      entityId: entity2["@id"],
+      restoredTab
+    });
   };
   const refresh = () => {
     const entityObj = crateManager.getEntity({ id: entity["@id"], link: false, materialise: false });
     init2({ entity: entityObj });
   };
+  const handleLoadEntityWithContext = (params) => {
+    debugNav("handleLoadEntityWithContext", {
+      fromEntityId: contextEntity == null ? void 0 : contextEntity["@id"],
+      activeTab,
+      params,
+      latest: state.editorState.latest()
+    });
+    captureViewContext(activeTab);
+    onLoadEntity(params);
+  };
   const saveTabToState = (tabName) => {
-    state.editorState.update({ id: entity["@id"], tab: tabName });
+    var _a3;
+    const activeEntityId = contextEntity == null ? void 0 : contextEntity["@id"];
+    const latestId = (_a3 = state.editorState.latest()) == null ? void 0 : _a3.id;
+    if (!activeEntityId || latestId !== activeEntityId) {
+      debugNav("saveTabToState.skip", { tabName, activeEntityId, latestId });
+      return;
+    }
+    debugNav("saveTabToState.apply", { tabName, activeEntityId });
+    state.editorState.update({ id: activeEntityId, tab: tabName });
+    state.editorState.updateNavigationState({ activeTab: tabName });
   };
   useEffect(() => {
     if (entity == null ? void 0 : entity["@id"]) {
       refresh();
     }
   }, [extraProperties]);
+  useEffect(() => {
+    var _a3, _b2, _c2;
+    if (!navigationRestoreReadyRef.current) return;
+    if (!(contextEntity == null ? void 0 : contextEntity["@id"])) return;
+    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;
+    debugNav("scroll.restore.start", {
+      entityId: contextEntity["@id"],
+      activeTab,
+      restoreTarget,
+      latest: state.editorState.latest()
+    });
+    let cancelled = false;
+    let rafId = 0;
+    let timerId = 0;
+    let attempts = 0;
+    const maxAttempts = 12;
+    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;
+      debugNav("scroll.restore.attempt", {
+        entityId: contextEntity["@id"],
+        activeTab,
+        attempt: attempts,
+        restoreTarget,
+        maxScrollable,
+        appliedScrollTop: viewport.scrollTop
+      });
+      const done = Math.abs(viewport.scrollTop - target) <= 1;
+      if (done || attempts >= maxAttempts) {
+        debugNav("scroll.restore.applied", {
+          entityId: contextEntity["@id"],
+          activeTab,
+          attempts,
+          restoreTarget,
+          appliedScrollTop: viewport.scrollTop
+        });
+        return;
+      }
+      timerId = window.setTimeout(() => {
+        rafId = window.requestAnimationFrame(attemptRestore);
+      }, 35);
+    };
+    rafId = window.requestAnimationFrame(attemptRestore);
+    const handleScroll = () => captureViewContext(activeTab, viewport.scrollTop);
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      cancelled = true;
+      if (navigationRestoreReadyRef.current) {
+        captureViewContext(activeTab, viewport.scrollTop);
+      }
+      viewport.removeEventListener("scroll", handleScroll);
+      window.cancelAnimationFrame(rafId);
+      window.clearTimeout(timerId);
+    };
+  }, [activeTab, contextEntity == null ? void 0 : contextEntity["@id"], renderTabs, tabs.length, scrollRestoreNonce]);
+  useEffect(() => {
+    const pendingTab = pendingRestoredTabRef.current;
+    if (!(contextEntity == null ? void 0 : contextEntity["@id"])) return;
+    if (pendingTab) {
+      if (activeTab !== pendingTab) {
+        debugNav("restore.waitingForCommittedTab", {
+          entityId: contextEntity["@id"],
+          pendingTab,
+          activeTab
+        });
+        return;
+      }
+      navigationRestoreReadyRef.current = true;
+      pendingRestoredTabRef.current = null;
+      setScrollRestoreNonce((prev2) => prev2 + 1);
+      debugNav("restore.tabCommitted", {
+        entityId: contextEntity["@id"],
+        activeTab
+      });
+      return;
+    }
+    if (!navigationRestoreReadyRef.current) return;
+    captureViewContext(activeTab);
+  }, [activeTab, showAddPanel, reverseSidebarVisible, highlightRequiredProperties, iconView, tabPaneWidth, contextEntity == null ? void 0 : contextEntity["@id"]]);
   const handleAddPropertyPlaceholder = (property) => {
     try {
       const newExtraProperties = [...extraProperties, property];
@@ -110711,7 +110956,7 @@ const RenderEntity = forwardRef((props, ref) => {
         ...data
       });
       if (updatedEntity["@id"] !== entity["@id"]) {
-        onLoadEntity({ id: updatedEntity["@id"] });
+        handleLoadEntityWithContext({ id: updatedEntity["@id"] });
       } else {
         refresh();
       }
@@ -110816,7 +111061,7 @@ const RenderEntity = forwardRef((props, ref) => {
   const handleDeleteEntity = (data) => {
     try {
       crateManager.deleteEntity({ id: data.id });
-      onLoadEntity({ id: "./" });
+      handleLoadEntityWithContext({ id: "./" });
       onSaveCrate();
     } catch (error2) {
       onError();
@@ -110929,7 +111174,7 @@ const RenderEntity = forwardRef((props, ref) => {
           RenderControls,
           {
             entity: contextEntity,
-            onLoadEntity,
+            onLoadEntity: handleLoadEntityWithContext,
             onBack: () => state.editorState.back(),
             onForward: () => state.editorState.forward(),
             onAddPropertyPlaceholder: handleAddPropertyPlaceholder,
@@ -110998,7 +111243,7 @@ const RenderEntity = forwardRef((props, ref) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `my-2 p-2 describo-property describo-property-name-name ${savedProperty === "name" ? "bg-green-200 rounded p-1 my-1" : ""}`,
+              className: `my-2 p-2 describo-property describo-property-name-name ${savedProperty === "name" ? "bg-green-200 rounded" : ""}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(EntityName, { entity: contextEntity, onUpdate: handleUpdateEntity })
             }
           ),
@@ -111016,7 +111261,7 @@ const RenderEntity = forwardRef((props, ref) => {
                       values: Array.isArray(contextEntity[property]) ? contextEntity[property] : [contextEntity[property]],
                       highlightRequired: highlightRequiredProperties,
                       savedProperty: savedProperty === property,
-                      onLoadEntity,
+                      onLoadEntity: handleLoadEntityWithContext,
                       onCreateEntity: handleCreateEntity,
                       onLinkEntity: handleLinkEntity,
                       onUnlinkEntity: handleUnlinkEntity,
@@ -111104,7 +111349,7 @@ const RenderEntity = forwardRef((props, ref) => {
                       values: Array.isArray(contextEntity[property]) ? contextEntity[property] : [contextEntity[property]],
                       highlightRequired: highlightRequiredProperties,
                       savedProperty: savedProperty === property,
-                      onLoadEntity,
+                      onLoadEntity: handleLoadEntityWithContext,
                       onCreateEntity: handleCreateEntity,
                       onLinkEntity: handleLinkEntity,
                       onUnlinkEntity: handleUnlinkEntity,
@@ -111134,6 +111379,7 @@ const RenderEntity = forwardRef((props, ref) => {
               className: "describo-tabs-vertical-center-add",
               activeKey: activeTab,
               onChange: (key) => {
+                captureViewContext(activeTab);
                 setActiveTab(key);
                 saveTabToState(key);
               },
@@ -111180,7 +111426,7 @@ const RenderEntity = forwardRef((props, ref) => {
                     values: Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]],
                     highlightRequired: highlightRequiredProperties,
                     savedProperty: savedProperty === input.name,
-                    onLoadEntity,
+                    onLoadEntity: handleLoadEntityWithContext,
                     onCreateEntity: handleCreateEntity,
                     onLinkEntity: handleLinkEntity,
                     onUnlinkEntity: handleUnlinkEntity,
@@ -111209,7 +111455,7 @@ const RenderEntity = forwardRef((props, ref) => {
                           values: Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]],
                           highlightRequired: highlightRequiredProperties,
                           savedProperty: savedProperty === input.name,
-                          onLoadEntity,
+                          onLoadEntity: handleLoadEntityWithContext,
                           onCreateEntity: handleCreateEntity,
                           onLinkEntity: handleLinkEntity,
                           onUnlinkEntity: handleUnlinkEntity,
@@ -111242,7 +111488,7 @@ const RenderEntity = forwardRef((props, ref) => {
           {
             entity: contextEntity,
             onLoadEntity: (data) => {
-              onLoadEntity(data);
+              handleLoadEntityWithContext(data);
               setReverseSidebarVisible(false);
             }
           },
@@ -119575,7 +119821,7 @@ var EmotionCacheContext = /* @__PURE__ */ React.createContext(
   }) : null
 );
 var CacheProvider = EmotionCacheContext.Provider;
-const version = "0.1.22";
+const version = "0.1.23";
 const pkg = {
   version
 };
@@ -119712,8 +119958,7 @@ function DescriboCrateBuilderInner(props) {
       const validIds = new Set(
         graph.filter((entry) => entry && typeof entry === "object" && typeof entry["@id"] === "string").map((entry) => String(entry["@id"]))
       );
-      state.editorState.history = state.editorState.history.filter((entry) => validIds.has(entry.id));
-      state.editorState.current = state.editorState.history.length === 0 ? 0 : Math.min(state.editorState.current, state.editorState.history.length - 1);
+      state.editorState.prune(validIds);
       const candidateIds = [(_a2 = state.editorState.latest()) == null ? void 0 : _a2.id, entityId, "./"];
       let nextEntity = null;
       for (const candidateId of candidateIds) {

package/package.json

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