@arpproject/recrate 0.1.26 → 0.1.27

package/dist/recrate.es.js

@@ -110714,6 +110714,11 @@ const findTabForProperty = (tabs, property) => tabs.find((tab) => {
   return (_a2 = tab == null ? void 0 : tab.inputs) == null ? void 0 : _a2.some((input) => (input == null ? void 0 : input.name) === property);
 }) ?? tabs.find((tab) => ["overflow", "other"].includes(String((tab == null ? void 0 : tab.name) || "").toLowerCase()));
 const getPendingAddedProfileStorageKey = (entityId) => `recrate.pending-added-profile-tab.${entityId}`;
+const DEFAULT_TAB_PANE_WIDTH = 240;
+const ICON_TAB_PANE_WIDTH = 80;
+const MIN_LABEL_TAB_PANE_WIDTH = 100;
+const MAX_LABEL_TAB_PANE_WIDTH = 250;
+const clampLabelTabPaneWidth = (width) => Math.max(MIN_LABEL_TAB_PANE_WIDTH, Math.min(MAX_LABEL_TAB_PANE_WIDTH, Math.round(width)));
 const readPendingAddedProfileTabKeys = (entityId) => {
   if (typeof window === "undefined") return null;
   try {
@@ -110748,7 +110753,7 @@ const clearPendingAddedProfileTabKeys = (entityId) => {
   }
 };
 const RenderEntity = forwardRef((props, ref) => {
-  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
+  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m;
   const { entity, onLoadEntity, onSaveCrate, onSaveEntityTemplate, onWarning, onError, onAddNewProfileRequest, onRemoveProfile } = props;
   const state = useStateStore();
   const profileManager = useContext(ProfileManagerContext);
@@ -110768,14 +110773,15 @@ const RenderEntity = forwardRef((props, ref) => {
   const [hoveredTabKey, setHoveredTabKey] = useState(null);
   const initialTabPaneWidth = useMemo$1(() => {
     const raw = localStorage.getItem("recrate.verticalTabWidth");
-    const n2 = raw ? parseInt(raw, 10) : 240;
-    return Math.max(100, Math.min(250, isNaN(n2) ? 240 : n2));
+    const n2 = raw ? parseInt(raw, 10) : DEFAULT_TAB_PANE_WIDTH;
+    return clampLabelTabPaneWidth(isNaN(n2) ? DEFAULT_TAB_PANE_WIDTH : n2);
   }, []);
   const [tabPaneWidth, setTabPaneWidth] = useState(initialTabPaneWidth);
+  const labelTabPaneWidthRef = useRef(initialTabPaneWidth);
   const persistTabWidth = useMemo$1(() => debounce((w2) => {
-    const minClamp = iconView ? 80 : 100;
-    const maxClamp = 250;
-    const clamped = Math.max(minClamp, Math.min(maxClamp, Math.round(w2)));
+    if (iconView) return;
+    const clamped = clampLabelTabPaneWidth(w2);
+    labelTabPaneWidthRef.current = clamped;
     localStorage.setItem("recrate.verticalTabWidth", String(clamped));
   }, 200), [iconView]);
   const [scrollViewportHeight, setScrollViewportHeight] = useState(0);
@@ -111027,8 +111033,18 @@ const RenderEntity = forwardRef((props, ref) => {
     if (typeof ((_b2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _b2.showAddPanel) === "boolean") setShowAddPanel(navState.uiState.showAddPanel);
     if (typeof ((_c2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _c2.reverseSidebarVisible) === "boolean") setReverseSidebarVisible(navState.uiState.reverseSidebarVisible);
     if (typeof ((_d2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _d2.highlightRequiredProperties) === "boolean") setHighlightRequiredProperties(navState.uiState.highlightRequiredProperties);
-    if (typeof ((_e3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _e3.iconView) === "boolean") setIconView(navState.uiState.iconView);
-    if (typeof ((_f2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _f2.tabPaneWidth) === "number") setTabPaneWidth(navState.uiState.tabPaneWidth);
+    if (typeof ((_e3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _e3.iconView) === "boolean") {
+      setIconView(navState.uiState.iconView);
+    }
+    if (typeof ((_f2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _f2.tabPaneWidth) === "number") {
+      if (navState.uiState.iconView) {
+        setTabPaneWidth(ICON_TAB_PANE_WIDTH);
+      } else {
+        const restoredWidth = clampLabelTabPaneWidth(navState.uiState.tabPaneWidth);
+        labelTabPaneWidthRef.current = restoredWidth;
+        setTabPaneWidth(restoredWidth);
+      }
+    }
     if (isCurrentHistoryEntity) {
       if (layout.renderTabs) {
         state.editorState.update({ id: entity2["@id"], tab: nextActiveTab });
@@ -111441,13 +111457,14 @@ const RenderEntity = forwardRef((props, ref) => {
   };
   const toggleIconView = () => {
     if (!iconView) {
+      labelTabPaneWidthRef.current = clampLabelTabPaneWidth(tabPaneWidth);
       setIconView(true);
-      setTabPaneWidth(80);
-      localStorage.setItem("recrate.verticalTabWidth", "80");
+      setTabPaneWidth(ICON_TAB_PANE_WIDTH);
     } else {
+      const restoredWidth = clampLabelTabPaneWidth(labelTabPaneWidthRef.current || DEFAULT_TAB_PANE_WIDTH);
       setIconView(false);
-      setTabPaneWidth(250);
-      localStorage.setItem("recrate.verticalTabWidth", "250");
+      setTabPaneWidth(restoredWidth);
+      localStorage.setItem("recrate.verticalTabWidth", String(restoredWidth));
     }
   };
   const addProfileTabLabel = /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip2, { title: t2("add_profile_button_tooltip"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -111667,7 +111684,7 @@ const RenderEntity = forwardRef((props, ref) => {
         setTabPaneWidth(w2);
         persistTabWidth(w2);
       }, children: [
-        ((_e2 = state.configuration) == null ? void 0 : _e2.tabLocation) === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-r border-slate-200", children: [
+        ((_e2 = state.configuration) == null ? void 0 : _e2.tabLocation) === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? ICON_TAB_PANE_WIDTH : MIN_LABEL_TAB_PANE_WIDTH, maxSize: iconView ? ICON_TAB_PANE_WIDTH : MAX_LABEL_TAB_PANE_WIDTH, preferredSize: iconView ? ICON_TAB_PANE_WIDTH : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-r border-slate-200", children: [
           renderProfileActionRail(),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) }),
@@ -111728,11 +111745,11 @@ const RenderEntity = forwardRef((props, ref) => {
             return null;
           })
         ] }) }),
-        ((_g = state.configuration) == null ? void 0 : _g.tabLocation) === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-l border-slate-200", children: [
+        ((_g = state.configuration) == null ? void 0 : _g.tabLocation) === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? ICON_TAB_PANE_WIDTH : MIN_LABEL_TAB_PANE_WIDTH, maxSize: iconView ? ICON_TAB_PANE_WIDTH : MAX_LABEL_TAB_PANE_WIDTH, preferredSize: iconView ? ICON_TAB_PANE_WIDTH : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-l border-slate-200", children: [
           renderProfileActionRail(),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) })
-      ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: contentContainerRef, className: "flex min-h-0 overflow-hidden", style: {
+      ] }, `untabbed-${(_h = state.configuration) == null ? void 0 : _h.tabLocation}-${iconView ? "icon" : "label"}`) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: contentContainerRef, className: "flex min-h-0 overflow-hidden", style: {
         flexDirection: "column",
         height: scrollViewportHeight ? `${scrollViewportHeight}px` : "calc(100vh - 200px)"
       }, children: [
@@ -111757,7 +111774,7 @@ const RenderEntity = forwardRef((props, ref) => {
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(EntityId, { entity: contextEntity, onUpdate: handleUpdateEntity })
               }
             ),
-            !((_h = state.configuration) == null ? void 0 : _h.readonly) && missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            !((_i = state.configuration) == null ? void 0 : _i.readonly) && missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded",
@@ -111812,12 +111829,12 @@ const RenderEntity = forwardRef((props, ref) => {
         setTabPaneWidth(w2);
         persistTabWidth(w2);
       }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? ICON_TAB_PANE_WIDTH : MIN_LABEL_TAB_PANE_WIDTH, maxSize: iconView ? ICON_TAB_PANE_WIDTH : MAX_LABEL_TAB_PANE_WIDTH, preferredSize: iconView ? ICON_TAB_PANE_WIDTH : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full", children: [
           renderProfileTabRail(),
           /* @__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: "describo-editor-scroll h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
-          !((_i = state.configuration) == null ? void 0 : _i.readonly) && ((_j = tabs.find((t22) => t22.name === activeTab)) == null ? void 0 : _j.missingRequiredData) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600 float-right mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !((_j = state.configuration) == null ? void 0 : _j.readonly) && ((_k = tabs.find((t22) => t22.name === activeTab)) == null ? void 0 : _k.missingRequiredData) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600 float-right mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded text-sm",
@@ -111841,7 +111858,7 @@ const RenderEntity = forwardRef((props, ref) => {
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(EntityName, { entity: contextEntity, onUpdate: handleUpdateEntity })
               }
             ),
-            (_k = tabs.find((tab) => tab.name === "about")) == null ? void 0 : _k.inputs.map((input) => {
+            (_l = tabs.find((tab) => tab.name === "about")) == null ? void 0 : _l.inputs.map((input) => {
               if (!["@id", "@type", "name", "@reverse"].includes(input.name)) {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "div",
@@ -111908,7 +111925,7 @@ const RenderEntity = forwardRef((props, ref) => {
             return null;
           })
         ] }) })
-      ] }) })
+      ] }, `tabbed-${(_m = state.configuration) == null ? void 0 : _m.tabLocation}-${iconView ? "icon" : "label"}`) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Drawer2,
@@ -120255,7 +120272,7 @@ var EmotionCacheContext = /* @__PURE__ */ React.createContext(
   }) : null
 );
 var CacheProvider = EmotionCacheContext.Provider;
-const version = "0.1.25";
+const version = "0.1.27";
 const pkg = {
   version
 };

package/package.json

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