@firecms/core 3.0.0-canary.203 → 3.0.0-canary.205

package/dist/index.es.js

@@ -3683,7 +3683,7 @@ function useCollectionFetch(t0) {
         }
         setDataLoading(false);
         setDataLoadingError(void 0);
-        setData(entities.map(_temp$t));
+        setData(entities.map(_temp$s));
         setNoMoreToLoad(!itemCount || entities.length < itemCount);
       };
       const onError = (error) => {
@@ -3766,7 +3766,7 @@ function useCollectionFetch(t0) {
 }
 function _temp2$e() {
 }
-function _temp$t(e_0) {
+function _temp$s(e_0) {
   return {
     ...e_0
   };
@@ -3831,7 +3831,7 @@ function useEntityFetch(t0) {
         setEntity(CACHE[`${path}/${entityId}`]);
         setDataLoading(false);
         setDataLoadingError(void 0);
-        return _temp$s;
+        return _temp$r;
       } else {
         if (entityId && path && collection) {
           if (dataSource.listenEntity) {
@@ -3899,7 +3899,7 @@ function _temp3$4() {
 }
 function _temp2$d() {
 }
-function _temp$s() {
+function _temp$r() {
 }
 async function saveEntityWithCallbacks({
   collection,
@@ -4749,7 +4749,7 @@ function useBuildLocalConfigurationPersistence() {
     t0 = $[0];
   }
   const configCache = useRef(t0);
-  const getCollectionFromStorage = _temp$r;
+  const getCollectionFromStorage = _temp$q;
   let t1;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = (path) => {
@@ -4872,7 +4872,7 @@ function useBuildLocalConfigurationPersistence() {
   }
   return t11;
 }
-function _temp$r(storageKey) {
+function _temp$q(storageKey) {
   const item = localStorage.getItem(storageKey);
   return item ? JSON.parse(item) : {};
 }
@@ -5165,7 +5165,7 @@ function ImagePreview(t0) {
   }
   let t9;
   if ($[16] !== url) {
-    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "small", onClick: _temp$q, children: t8 }) });
+    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "small", onClick: _temp$p, children: t8 }) });
     $[16] = url;
     $[17] = t9;
   } else {
@@ -5199,7 +5199,7 @@ function ImagePreview(t0) {
   }
   return t11;
 }
-function _temp$q(e_0) {
+function _temp$p(e_0) {
   return e_0.stopPropagation();
 }
 function UrlComponentPreview(t0) {
@@ -5232,7 +5232,7 @@ function UrlComponentPreview(t0) {
     }
     let t3;
     if ($[2] !== url) {
-      t3 = /* @__PURE__ */ jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$p, target: "_blank", children: [
+      t3 = /* @__PURE__ */ jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$o, target: "_blank", children: [
         t2,
         url
       ] });
@@ -5363,7 +5363,7 @@ function UrlComponentPreview(t0) {
 function _temp2$c(e_0) {
   return e_0.stopPropagation();
 }
-function _temp$p(e) {
+function _temp$o(e) {
   e.preventDefault();
 }
 function VideoPreview(t0) {
@@ -5497,7 +5497,7 @@ function SkeletonPropertyComponent(t0) {
         if (Array.isArray(arrayProperty.of)) {
           let t1;
           if ($[6] !== arrayProperty.of) {
-            t1 = arrayProperty.of.map(_temp$o);
+            t1 = arrayProperty.of.map(_temp$n);
             $[6] = arrayProperty.of;
             $[7] = t1;
           } else {
@@ -5635,7 +5635,7 @@ function SkeletonPropertyComponent(t0) {
   }
   return content || null;
 }
-function _temp$o(p, i) {
+function _temp$n(p, i) {
   return renderGenericArrayCell(p, i);
 }
 function renderMap(property, size) {
@@ -6799,7 +6799,7 @@ function KeyValuePreview(t0) {
   }
   let t1;
   if ($[1] !== value) {
-    t1 = Object.entries(value).map(_temp$n);
+    t1 = Object.entries(value).map(_temp$m);
     $[1] = value;
     $[2] = t1;
   } else {
@@ -6815,7 +6815,7 @@ function KeyValuePreview(t0) {
   }
   return t2;
 }
-function _temp$n(t0) {
+function _temp$m(t0) {
   const [key, childValue] = t0;
   return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
@@ -7561,7 +7561,7 @@ function VirtualTableSelect(props) {
       console.trace("onChange");
       if (valueType === "number") {
         if (multiple) {
-          const newValue = updatedValue.map(_temp$m);
+          const newValue = updatedValue.map(_temp$l);
           updateValue(newValue);
         } else {
           updateValue(parseFloat(updatedValue));
@@ -7616,7 +7616,7 @@ function VirtualTableSelect(props) {
 function _temp2$b(v_0) {
   return v_0.toString();
 }
-function _temp$m(v) {
+function _temp$l(v) {
   return parseFloat(v);
 }
 function VirtualTableNumberInput(props) {
@@ -8159,7 +8159,7 @@ function StorageUpload$1(t0) {
   const snackbarContext = useSnackbarController();
   let t1;
   if ($[0] !== storage.acceptedFiles) {
-    t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$l).reduce(_temp2$a, {}) : void 0;
+    t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$k).reduce(_temp2$a, {}) : void 0;
     $[0] = storage.acceptedFiles;
     $[1] = t1;
   } else {
@@ -8388,7 +8388,7 @@ function _temp2$a(a, b) {
     ...b
   };
 }
-function _temp$l(e) {
+function _temp$k(e) {
   return {
     [e]: []
   };
@@ -8495,7 +8495,7 @@ const TableReferenceFieldInternal = React__default.memo(function TableReferenceF
   let t1;
   if ($[2] !== updateValue) {
     t1 = (entities) => {
-      updateValue(entities.map(_temp$k));
+      updateValue(entities.map(_temp$j));
     };
     $[2] = updateValue;
     $[3] = t1;
@@ -8656,7 +8656,7 @@ const TableReferenceFieldInternal = React__default.memo(function TableReferenceF
   }
   return t10;
 }, equal);
-function _temp$k(e) {
+function _temp$j(e) {
   return getReferenceFrom(e);
 }
 function _temp2$9(ref) {
@@ -9792,7 +9792,7 @@ function CollectionTableToolbar(t0) {
   }
   let t6;
   if ($[6] !== t3 || $[7] !== t4) {
-    t6 = /* @__PURE__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$i, children: t5 }) });
     $[6] = t3;
     $[7] = t4;
     $[8] = t6;
@@ -9879,7 +9879,7 @@ function CollectionTableToolbar(t0) {
 function _temp2$8(size_0) {
   return /* @__PURE__ */ jsx(SelectItem, { value: size_0, className: "w-12 font-medium text-center", children: size_0.toUpperCase() }, size_0);
 }
-function _temp$j(v_0) {
+function _temp$i(v_0) {
   return /* @__PURE__ */ jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
 }
 function getTableCellAlignment(property) {
@@ -10988,7 +10988,7 @@ const SafeLinkRenderer = (t0) => {
   let t1;
   if ($[0] !== text) {
     const urlRegex = /https?:\/\/[^\s]+/g;
-    t1 = text.replace(urlRegex, _temp$i);
+    t1 = text.replace(urlRegex, _temp$h);
     $[0] = text;
     $[1] = t1;
   } else {
@@ -11007,7 +11007,7 @@ const SafeLinkRenderer = (t0) => {
   }
   return t2;
 };
-function _temp$i(url) {
+function _temp$h(url) {
   return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
 }
 const operationLabels$2 = {
@@ -11215,7 +11215,7 @@ function StringNumberFilterField(t0) {
   }
   let t6;
   if ($[16] !== operation || $[17] !== t4 || $[18] !== t5) {
-    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$h, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$g, children: t5 }) });
     $[16] = operation;
     $[17] = t4;
     $[18] = t5;
@@ -11339,7 +11339,7 @@ function _temp3$3(e_1) {
 function _temp2$7(op_1) {
   return /* @__PURE__ */ jsx(SelectItem, { value: op_1, children: operationLabels$1[op_1] }, op_1);
 }
-function _temp$h(op_0) {
+function _temp$g(op_0) {
   return operationLabels$1[op_0];
 }
 function BooleanFilterField(t0) {
@@ -11478,7 +11478,7 @@ function DateTimeFilterField(t0) {
   }
   let t6;
   if ($[13] !== operation || $[14] !== t4 || $[15] !== t5) {
-    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$g, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$f, children: t5 }) });
     $[13] = operation;
     $[14] = t4;
     $[15] = t5;
@@ -11567,7 +11567,7 @@ function DateTimeFilterField(t0) {
 function _temp2$6(op_1) {
   return /* @__PURE__ */ jsx(SelectItem, { value: op_1, children: operationLabels[op_1] }, op_1);
 }
-function _temp$g(op_0) {
+function _temp$f(op_0) {
   return operationLabels[op_0];
 }
 const SelectableTable = React__default.memo(
@@ -12274,7 +12274,7 @@ function useTableSearchHelper(t0) {
     const searchBlocked = t12;
     let t2;
     if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-      t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$f);
+      t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$e);
       $[15] = customizationController.plugins;
       $[16] = dataSource?.initTextSearch;
       $[17] = t2;
@@ -12366,7 +12366,7 @@ function useTableSearchHelper(t0) {
   }
   return t1;
 }
-function _temp$f(p_0) {
+function _temp$e(p_0) {
   return Boolean(p_0.collectionView?.onTextSearchClick);
 }
 function DeleteEntityDialog({
@@ -12916,7 +12916,7 @@ function NavigationCard(t0) {
   }
   let t3;
   if ($[3] !== actions) {
-    t3 = /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", onClick: _temp$e, children: actions });
+    t3 = /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", onClick: _temp$d, children: actions });
     $[3] = actions;
     $[4] = t3;
   } else {
@@ -13002,7 +13002,7 @@ function NavigationCard(t0) {
   }
   return t11;
 }
-function _temp$e(event) {
+function _temp$d(event) {
   event.preventDefault();
   event.stopPropagation();
 }
@@ -13294,7 +13294,7 @@ function FavouritesView(t0) {
     T0 = Collapse;
     t4 = favouriteCollections.length > 0;
     t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
-    t3 = favouriteCollections.map(_temp$d);
+    t3 = favouriteCollections.map(_temp$c);
     $[2] = navigationController.topLevelNavigation?.navigationEntries;
     $[3] = t1;
     $[4] = T0;
@@ -13328,7 +13328,7 @@ function FavouritesView(t0) {
   }
   return t6;
 }
-function _temp$d(entry_0) {
+function _temp$c(entry_0) {
   return /* @__PURE__ */ jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
 }
 const scrollsMap = {};
@@ -13425,7 +13425,7 @@ function DefaultHomePage(t0) {
       } else {
         const searchResult = fuse.current?.search(value);
         if (searchResult) {
-          setFilteredUrls(searchResult.map(_temp$c));
+          setFilteredUrls(searchResult.map(_temp$b));
         }
       }
     };
@@ -13703,7 +13703,7 @@ function _temp3$2(e_1) {
 function _temp2$5(entry) {
   return entry.group;
 }
-function _temp$c(e_0) {
+function _temp$b(e_0) {
   return e_0.item.url;
 }
 function EntityCollectionViewActions(t0) {
@@ -15481,7 +15481,7 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
   }
   let t7;
   if ($[18] !== breadcrumbs.breadcrumbs) {
-    t7 = breadcrumbs.breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$b) }) });
+    t7 = breadcrumbs.breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$a) }) });
     $[18] = breadcrumbs.breadcrumbs;
     $[19] = t7;
   } else {
@@ -15593,7 +15593,7 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
   }
   return t14;
 };
-function _temp$b(breadcrumb, index) {
+function _temp$a(breadcrumb, index) {
   return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
     /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "/" }),
     /* @__PURE__ */ jsx(Link, { className: "visited:text-inherit visited:dark:text-inherit block", to: breadcrumb.url, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: breadcrumb.title }) }, index)
@@ -15963,7 +15963,7 @@ function SearchIconsView(t0) {
       } else {
         const searchResult = iconsSearch.search(value);
         const limited = searchResult.slice(0, 50);
-        setKeys(limited.map(_temp$a));
+        setKeys(limited.map(_temp$9));
       }
     }, UPDATE_SEARCH_INDEX_WAIT_MS);
     $[0] = t3;
@@ -16030,7 +16030,7 @@ function SearchIconsView(t0) {
   }
   return t8;
 }
-function _temp$a(e) {
+function _temp$9(e) {
   return e.item.key;
 }
 function FieldCaption(t0) {
@@ -16296,6 +16296,7 @@ function EntityForm({
   onEntityChange,
   openEntityMode = "full_screen",
   formex: formexProp,
+  Builder,
   EntityFormActionsComponent = EntityFormActions,
   showDefaultActions = true,
   showEntityPath = true,
@@ -16610,48 +16611,53 @@ function EntityForm({
     }
   }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
   const formFieldKeys = getFormFieldKeys(resolvedCollection);
-  const formFields = () => /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
-    const property_0 = resolvedCollection.properties[key_1];
-    if (property_0) {
-      const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
-      const disabled = !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
-      const hidden = isHidden(property_0);
-      if (hidden) return null;
-      const widthPercentage = property_0.widthPercentage ?? 100;
-      const cmsFormFieldProps = {
-        propertyKey: key_1,
-        disabled,
-        property: property_0,
-        includeDescription: property_0.description || property_0.longDescription,
-        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-        context: formContext,
-        partOfArray: false,
-        minimalistView: false,
-        autoFocus: false
-      };
-      return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
-    }
-    const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
-    if (additionalField && entity) {
-      const Builder = additionalField.Builder;
-      if (!Builder && !additionalField.value) {
-        throw new Error("When using additional fields you need to provide a Builder or a value");
+  const formFields = () => {
+    if (Builder) {
+      return /* @__PURE__ */ jsx(Builder, { collection, entity, modifiedValues: formex.values, formContext });
+    }
+    return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
+      const property_0 = resolvedCollection.properties[key_1];
+      if (property_0) {
+        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
+        const disabled = !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
+        const hidden = isHidden(property_0);
+        if (hidden) return null;
+        const widthPercentage = property_0.widthPercentage ?? 100;
+        const cmsFormFieldProps = {
+          propertyKey: key_1,
+          disabled,
+          property: property_0,
+          includeDescription: property_0.description || property_0.longDescription,
+          underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+          context: formContext,
+          partOfArray: false,
+          minimalistView: false,
+          autoFocus: false
+        };
+        return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
       }
-      const child = Builder ? /* @__PURE__ */ jsx(Builder, { entity, context }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: additionalField.value?.({
-        entity,
-        context
-      })?.toString() });
-      return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-        /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
-        /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
-      ] }, `additional_${key_1}`);
-    }
-    console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
-    return null;
-  }).filter(Boolean) });
+      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
+      if (additionalField && entity) {
+        const Builder_0 = additionalField.Builder;
+        if (!Builder_0 && !additionalField.value) {
+          throw new Error("When using additional fields you need to provide a Builder or a value");
+        }
+        const child = Builder_0 ? /* @__PURE__ */ jsx(Builder_0, { entity, context }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: additionalField.value?.({
+          entity,
+          context
+        })?.toString() });
+        return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+          /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
+        ] }, `additional_${key_1}`);
+      }
+      console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+      return null;
+    }).filter(Boolean) });
+  };
   const formRef = useRef(null);
   const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
+    !Builder && /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
       /* @__PURE__ */ jsx(Typography, { className: "py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0"), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
       showEntityPath && /* @__PURE__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
         entity?.path ?? path,
@@ -16660,7 +16666,7 @@ function EntityForm({
       ] }) })
     ] }),
     children,
-    !collection.hideIdFromForm && /* @__PURE__ */ jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
+    !Builder && !collection.hideIdFromForm && /* @__PURE__ */ jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
     entityId && formContext && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
       formFields(),
       /* @__PURE__ */ jsx(ErrorFocus, { containerRef: formRef })
@@ -16670,7 +16676,20 @@ function EntityForm({
   useEffect(() => {
     if (entityId && onIdChange) onIdChange(entityId);
   }, [entityId, onIdChange]);
-  return /* @__PURE__ */ jsx(FormLayoutInner, { className, id: `form_${path}`, pluginActions, forceActionsAtTheBottom, EntityFormActionsComponent, formContext, showDefaultActions, children: formView });
+  const disabled_0 = formex.isSubmitting || !formex.dirty && status === "existing";
+  if (!resolvedCollection || !path) {
+    throw Error("INTERNAL: Collection and path must be defined in form context");
+  }
+  const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: disabled_0, status, pluginActions, openEntityMode, showDefaultActions });
+  return /* @__PURE__ */ jsx(Formex, { value: formContext.formex, children: /* @__PURE__ */ jsxs("form", { onSubmit: formContext.formex.handleSubmit, onReset: () => formex.resetForm({
+    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)
+  }), noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
+    /* @__PURE__ */ jsx("div", { id: `form_${path}`, className: cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxs("div", { className: cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
+      formContext.formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) }),
+      formView
+    ] }) }),
+    dialogActions
+  ] }) });
 }
 function getInitialEntityValues(collection, path, status, entity, propertyConfigs) {
   const resolvedCollection = resolveCollection({
@@ -16711,150 +16730,6 @@ function yupToFormErrors(yupError) {
   }
   return errors;
 }
-function FormLayoutInner(t0) {
-  const $ = c(43);
-  const {
-    id,
-    formContext,
-    children,
-    className,
-    forceActionsAtTheBottom,
-    pluginActions,
-    EntityFormActionsComponent,
-    showDefaultActions
-  } = t0;
-  const formex = formContext.formex;
-  const collection = formContext.collection;
-  const path = formContext.path;
-  const entity = formContext.entity;
-  const savingError = formContext.savingError;
-  const status = formContext.status;
-  const openEntityMode = formContext.openEntityMode;
-  const disabled = formex.isSubmitting || !formex.dirty && status === "existing";
-  const customizationController = useCustomizationController();
-  if (!collection || !path) {
-    throw Error("INTERNAL: Collection and path must be defined in form context");
-  }
-  const t1 = forceActionsAtTheBottom ? "bottom" : "side";
-  let t2;
-  if ($[0] !== pluginActions) {
-    t2 = pluginActions ?? [];
-    $[0] = pluginActions;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== EntityFormActionsComponent || $[3] !== collection || $[4] !== disabled || $[5] !== entity || $[6] !== formex || $[7] !== openEntityMode || $[8] !== path || $[9] !== savingError || $[10] !== showDefaultActions || $[11] !== status || $[12] !== t1 || $[13] !== t2) {
-    t3 = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection, path, entity, layout: t1, savingError, formex, disabled, status, pluginActions: t2, openEntityMode, showDefaultActions });
-    $[2] = EntityFormActionsComponent;
-    $[3] = collection;
-    $[4] = disabled;
-    $[5] = entity;
-    $[6] = formex;
-    $[7] = openEntityMode;
-    $[8] = path;
-    $[9] = savingError;
-    $[10] = showDefaultActions;
-    $[11] = status;
-    $[12] = t1;
-    $[13] = t2;
-    $[14] = t3;
-  } else {
-    t3 = $[14];
-  }
-  const dialogActions = t3;
-  const t4 = formContext.formex;
-  const t5 = formContext.formex.handleSubmit;
-  let t6;
-  if ($[15] !== collection || $[16] !== customizationController.propertyConfigs || $[17] !== entity || $[18] !== formex || $[19] !== path || $[20] !== status) {
-    t6 = () => formex.resetForm({
-      values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)
-    });
-    $[15] = collection;
-    $[16] = customizationController.propertyConfigs;
-    $[17] = entity;
-    $[18] = formex;
-    $[19] = path;
-    $[20] = status;
-    $[21] = t6;
-  } else {
-    t6 = $[21];
-  }
-  let t7;
-  if ($[22] !== className) {
-    t7 = cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className);
-    $[22] = className;
-    $[23] = t7;
-  } else {
-    t7 = $[23];
-  }
-  let t8;
-  let t9;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit");
-    t9 = cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10");
-    $[24] = t8;
-    $[25] = t9;
-  } else {
-    t8 = $[24];
-    t9 = $[25];
-  }
-  let t10;
-  if ($[26] !== formContext.formex.dirty) {
-    t10 = formContext.formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) });
-    $[26] = formContext.formex.dirty;
-    $[27] = t10;
-  } else {
-    t10 = $[27];
-  }
-  let t11;
-  if ($[28] !== children || $[29] !== t10) {
-    t11 = /* @__PURE__ */ jsxs("div", { className: t9, children: [
-      t10,
-      children
-    ] });
-    $[28] = children;
-    $[29] = t10;
-    $[30] = t11;
-  } else {
-    t11 = $[30];
-  }
-  let t12;
-  if ($[31] !== id || $[32] !== t11) {
-    t12 = /* @__PURE__ */ jsx("div", { id, className: t8, children: t11 });
-    $[31] = id;
-    $[32] = t11;
-    $[33] = t12;
-  } else {
-    t12 = $[33];
-  }
-  let t13;
-  if ($[34] !== dialogActions || $[35] !== formContext.formex.handleSubmit || $[36] !== t12 || $[37] !== t6 || $[38] !== t7) {
-    t13 = /* @__PURE__ */ jsxs("form", { onSubmit: t5, onReset: t6, noValidate: true, className: t7, children: [
-      t12,
-      dialogActions
-    ] });
-    $[34] = dialogActions;
-    $[35] = formContext.formex.handleSubmit;
-    $[36] = t12;
-    $[37] = t6;
-    $[38] = t7;
-    $[39] = t13;
-  } else {
-    t13 = $[39];
-  }
-  let t14;
-  if ($[40] !== formContext.formex || $[41] !== t13) {
-    t14 = /* @__PURE__ */ jsx(Formex, { value: t4, children: t13 });
-    $[40] = formContext.formex;
-    $[41] = t13;
-    $[42] = t14;
-  } else {
-    t14 = $[42];
-  }
-  return t14;
-}
 function useOnAutoSave(autoSave, formex, lastSavedValues, save) {
   if (!autoSave) return;
   useEffect(() => {
@@ -17430,7 +17305,7 @@ function StorageItemPreview(t0) {
   }
   let t5;
   if ($[14] !== placeholder) {
-    t5 = placeholder && /* @__PURE__ */ jsx("div", { onClick: _temp$9, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
+    t5 = placeholder && /* @__PURE__ */ jsx("div", { onClick: _temp$8, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx(DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
     $[14] = placeholder;
     $[15] = t5;
   } else {
@@ -17453,7 +17328,7 @@ function StorageItemPreview(t0) {
   }
   return t6;
 }
-function _temp$9(e) {
+function _temp$8(e) {
   return e.stopPropagation();
 }
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -17636,7 +17511,7 @@ function FileDropComponent(t0) {
   const snackbarContext = useSnackbarController();
   let t1;
   if ($[0] !== storage.acceptedFiles) {
-    t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$8).reduce(_temp2$4, {}) : void 0;
+    t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$7).reduce(_temp2$4, {}) : void 0;
     $[0] = storage.acceptedFiles;
     $[1] = t1;
   } else {
@@ -17852,7 +17727,7 @@ function _temp2$4(a, b) {
     ...b
   };
 }
-function _temp$8(e) {
+function _temp$7(e) {
   return {
     [e]: []
   };
@@ -18817,7 +18692,7 @@ function MapFieldBinding(t0) {
     } else {
       t42 = $[20];
     }
-    t3 = Object.entries(mapProperties).filter(_temp$7).map(t42);
+    t3 = Object.entries(mapProperties).filter(_temp$6).map(t42);
     $[6] = autoFocus;
     $[7] = context;
     $[8] = disabled;
@@ -18887,7 +18762,7 @@ function MapFieldBinding(t0) {
   }
   return t10;
 }
-function _temp$7(t0) {
+function _temp$6(t0) {
   const [, property_0] = t0;
   return !isHidden(property_0);
 }
@@ -20010,7 +19885,7 @@ function BlockEntry(t0) {
   const property = t4;
   let t5;
   if ($[9] !== properties) {
-    t5 = Object.entries(properties).map(_temp$6);
+    t5 = Object.entries(properties).map(_temp$5);
     $[9] = properties;
     $[10] = t5;
   } else {
@@ -20101,7 +19976,7 @@ function BlockEntry(t0) {
   }
   return t11;
 }
-function _temp$6(t0) {
+function _temp$5(t0) {
   const [key, property_0] = t0;
   return {
     id: key,
@@ -21171,6 +21046,16 @@ function resolveEntityView(entityView, contextEntityViews) {
     return entityView;
   }
 }
+function resolvedSelectedEntityView(customViews, customizationController, selectedTab) {
+  const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
+  const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
+  const selectedSecondaryForm = customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab);
+  return {
+    resolvedEntityViews,
+    selectedEntityView,
+    selectedSecondaryForm
+  };
+}
 function getNavigationEntriesFromPath(props) {
   const {
     path,
@@ -21749,52 +21634,6 @@ function EntityEditView(t0) {
   }
   return t5;
 }
-function SecondaryForm(t0) {
-  const $ = c(12);
-  const {
-    collection,
-    className,
-    customView,
-    entity,
-    formContext,
-    forceActionsAtTheBottom
-  } = t0;
-  if (!customView.Builder) {
-    console.error("customView.Builder is not defined");
-    return null;
-  }
-  let t1;
-  if ($[0] !== collection || $[1] !== customView.Builder || $[2] !== entity || $[3] !== formContext) {
-    t1 = formContext && /* @__PURE__ */ jsx(customView.Builder, { collection, entity, modifiedValues: formContext.formex.values ?? entity?.values, formContext });
-    $[0] = collection;
-    $[1] = customView.Builder;
-    $[2] = entity;
-    $[3] = formContext;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  let t2;
-  if ($[5] !== t1) {
-    t2 = /* @__PURE__ */ jsx(ErrorBoundary, { children: t1 });
-    $[5] = t1;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] !== className || $[8] !== forceActionsAtTheBottom || $[9] !== formContext || $[10] !== t2) {
-    t3 = /* @__PURE__ */ jsx(FormLayoutInner, { className, forceActionsAtTheBottom, formContext, EntityFormActionsComponent: EntityEditViewFormActions, children: t2 });
-    $[7] = className;
-    $[8] = forceActionsAtTheBottom;
-    $[9] = formContext;
-    $[10] = t2;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  return t3;
-}
 function EntityEditViewInner({
   path,
   entityId,
@@ -21831,33 +21670,28 @@ function EntityEditViewInner({
       setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
     }
   }, [selectedTabProp]);
-  const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
   const subcollections = (collection.subcollections ?? []).filter((c2) => !c2.hideFromNavigation);
   const subcollectionsCount = subcollections?.length ?? 0;
   const customViews = collection.entityViews;
   const customViewsCount = customViews?.length ?? 0;
   const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
-  const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
-  const selectedEntityView = resolvedEntityViews.find((e_0) => e_0.key === selectedTab);
+  const {
+    resolvedEntityViews,
+    selectedEntityView,
+    selectedSecondaryForm
+  } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
   const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
-  const secondaryForms = formContext && customViews && resolvedEntityViews.filter((e_1) => e_1.includeActions).map((customView) => {
-    if (!customView || !formContext) return null;
-    if (!customView.Builder) {
-      console.error("customView.Builder is not defined");
-      return null;
-    }
-    return /* @__PURE__ */ jsx(SecondaryForm, { className: selectedTab !== customView.key ? "hidden" : "", customView, formContext, collection, forceActionsAtTheBottom: !largeLayout || layout === "side_panel" || customView.includeActions === "bottom", entity: usedEntity }, `custom_view_${customView.key}`);
-  }).filter(Boolean);
-  const customViewsView = customViews && resolvedEntityViews.filter((e_2) => !e_2.includeActions).map((customView_0) => {
-    if (!customView_0) return null;
-    const Builder = customView_0.Builder;
+  const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
+  const customViewsView = customViews && resolvedEntityViews.filter((e) => !e.includeActions).map((customView) => {
+    if (!customView) return null;
+    const Builder = customView.Builder;
     if (!Builder) {
       console.error("customView.Builder is not defined");
       return null;
     }
     return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
-      "hidden": selectedTab !== customView_0.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
+      "hidden": selectedTab !== customView.key
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
   }).filter(Boolean);
   const globalLoading = dataLoading && !usedEntity;
   const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
@@ -21896,7 +21730,7 @@ function EntityEditViewInner({
     };
     onSaved?.(res);
     formProps?.onSaved?.(res);
-  } });
+  }, Builder: selectedSecondaryForm?.Builder });
   const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
   const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
@@ -21914,7 +21748,6 @@ function EntityEditViewInner({
       ] })
     ] }),
     globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView,
-    secondaryForms,
     customViewsView,
     subCollectionsViews
   ] });
@@ -22025,16 +21858,19 @@ function EntitySidePanel(props) {
 }
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
-function getEntityViewWidth(props, small) {
+function getEntityViewWidth(props, small, customizationController) {
   if (small) return CONTAINER_FULL_WIDTH;
-  const mainViewSelected = !props.selectedTab;
+  const {
+    selectedSecondaryForm
+  } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+  const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
   let resolvedWidth;
   if (props.width) {
     resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
   } else if (props.collection?.sideDialogWidth) {
     resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
   }
-  if (!mainViewSelected) {
+  if (!shouldUseSmallLayout) {
     return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`;
   } else {
     if (resolvedWidth) {
@@ -22086,194 +21922,81 @@ function getNestedPropertiesDepth(property, accumulator = 0) {
   }
 }
 const useBuildSideEntityController = (navigation, sideDialogsController) => {
-  const $ = c(44);
   const location = useLocation();
   const initialised = useRef(false);
+  const customizationController = useCustomizationController();
   const smallLayout = !useLargeLayout();
-  let t0;
-  if ($[0] !== location.hash || $[1] !== location.pathname || $[2] !== navigation || $[3] !== sideDialogsController || $[4] !== smallLayout) {
-    t0 = () => {
-      const newFlag = location.hash === `#${NEW_URL_HASH}`;
-      const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
-      if (!navigation.loading) {
-        if ((newFlag || sideFlag) && navigation.isUrlCollectionPath(location.pathname)) {
-          const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
-          const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
-          for (let i = 0; i < panelsFromUrl.length; i++) {
-            const props = panelsFromUrl[i];
-            if (i === 0) {
-              sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-            } else {
-              sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-            }
-          }
+  useEffect(() => {
+    const newFlag = location.hash === `#${NEW_URL_HASH}`;
+    const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+    if (!navigation.loading) {
+      if ((newFlag || sideFlag) && navigation.isUrlCollectionPath(location.pathname)) {
+        const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
+        const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
+        for (let i = 0; i < panelsFromUrl.length; i++) {
+          const props = panelsFromUrl[i];
+          if (i === 0) sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+          else sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
         }
-        initialised.current = true;
       }
-    };
-    $[0] = location.hash;
-    $[1] = location.pathname;
-    $[2] = navigation;
-    $[3] = sideDialogsController;
-    $[4] = smallLayout;
-    $[5] = t0;
-  } else {
-    t0 = $[5];
-  }
-  let t1;
-  if ($[6] !== navigation.loading) {
-    t1 = [navigation.loading];
-    $[6] = navigation.loading;
-    $[7] = t1;
-  } else {
-    t1 = $[7];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[8] !== sideDialogsController.sidePanels) {
-    t2 = sideDialogsController.sidePanels.map(_temp$5);
-    $[8] = sideDialogsController.sidePanels;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  const currentPanelKeys = t2;
-  let t3;
-  if ($[10] !== currentPanelKeys || $[11] !== location.hash || $[12] !== location.pathname || $[13] !== navigation || $[14] !== sideDialogsController || $[15] !== smallLayout) {
-    t3 = () => {
-      if (initialised.current) {
-        const sideFlag_0 = location.hash === `#${SIDE_URL_HASH}`;
-        if (sideFlag_0) {
-          const entityOrCollectionPath_0 = navigation.urlPathToDataPath(location.pathname);
-          const panelsFromUrl_0 = buildSidePanelsFromUrl(entityOrCollectionPath_0, navigation.collections ?? [], false);
-          if (panelsFromUrl_0.length <= currentPanelKeys.length) {
-            return;
-          }
-          const lastPanel = panelsFromUrl_0[panelsFromUrl_0.length - 1];
-          const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
-          const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : void 0;
-          if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
-            sideDialogsController.replace(panelProps);
-          }
+      initialised.current = true;
+    }
+  }, [navigation.loading]);
+  const currentPanelKeys = sideDialogsController.sidePanels.map((p) => p.key);
+  useEffect(() => {
+    if (initialised.current) {
+      const sideFlag_0 = location.hash === `#${SIDE_URL_HASH}`;
+      if (sideFlag_0) {
+        const entityOrCollectionPath_0 = navigation.urlPathToDataPath(location.pathname);
+        const panelsFromUrl_0 = buildSidePanelsFromUrl(entityOrCollectionPath_0, navigation.collections ?? [], false);
+        if (panelsFromUrl_0.length <= currentPanelKeys.length) {
+          return;
         }
-      }
-    };
-    $[10] = currentPanelKeys;
-    $[11] = location.hash;
-    $[12] = location.pathname;
-    $[13] = navigation;
-    $[14] = sideDialogsController;
-    $[15] = smallLayout;
-    $[16] = t3;
-  } else {
-    t3 = $[16];
-  }
-  let t4;
-  if ($[17] !== currentPanelKeys || $[18] !== location.hash || $[19] !== location.pathname) {
-    t4 = [location.pathname, location.hash, currentPanelKeys];
-    $[17] = currentPanelKeys;
-    $[18] = location.hash;
-    $[19] = location.pathname;
-    $[20] = t4;
-  } else {
-    t4 = $[20];
-  }
-  useEffect(t3, t4);
-  let t5;
-  if ($[21] !== navigation.buildUrlCollectionPath || $[22] !== navigation.resolveIdsFrom || $[23] !== sideDialogsController || $[24] !== smallLayout) {
-    t5 = () => {
-      const updatedSidePanels = sideDialogsController.sidePanels.map((sidePanelProps) => {
-        if (sidePanelProps.additional) {
-          return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
+        const lastPanel = panelsFromUrl_0[panelsFromUrl_0.length - 1];
+        const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+        const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : void 0;
+        if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
+          sideDialogsController.replace(panelProps);
         }
-        return sidePanelProps;
-      });
-      sideDialogsController.setSidePanels(updatedSidePanels);
-    };
-    $[21] = navigation.buildUrlCollectionPath;
-    $[22] = navigation.resolveIdsFrom;
-    $[23] = sideDialogsController;
-    $[24] = smallLayout;
-    $[25] = t5;
-  } else {
-    t5 = $[25];
-  }
-  let t6;
-  if ($[26] !== smallLayout) {
-    t6 = [smallLayout];
-    $[26] = smallLayout;
-    $[27] = t6;
-  } else {
-    t6 = $[27];
-  }
-  useEffect(t5, t6);
-  let t7;
-  if ($[28] !== sideDialogsController) {
-    t7 = () => {
-      sideDialogsController.close();
-    };
-    $[28] = sideDialogsController;
-    $[29] = t7;
-  } else {
-    t7 = $[29];
-  }
-  const close = t7;
-  let t8;
-  if ($[30] !== navigation.buildUrlCollectionPath || $[31] !== navigation.resolveIdsFrom || $[32] !== sideDialogsController || $[33] !== smallLayout) {
-    t8 = (props_0) => {
-      if (props_0.copy && !props_0.entityId) {
-        throw Error("If you want to copy an entity you need to provide an entityId");
       }
-      const defaultSelectedView = resolveDefaultSelectedView(props_0.collection ? props_0.collection.defaultSelectedView : void 0, {
-        status: props_0.copy ? "copy" : props_0.entityId ? "existing" : "new",
-        entityId: props_0.entityId
-      });
-      sideDialogsController.open(propsToSidePanel({
-        selectedTab: defaultSelectedView,
-        ...props_0
-      }, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-    };
-    $[30] = navigation.buildUrlCollectionPath;
-    $[31] = navigation.resolveIdsFrom;
-    $[32] = sideDialogsController;
-    $[33] = smallLayout;
-    $[34] = t8;
-  } else {
-    t8 = $[34];
-  }
-  const open = t8;
-  let t9;
-  if ($[35] !== navigation.buildUrlCollectionPath || $[36] !== navigation.resolveIdsFrom || $[37] !== sideDialogsController || $[38] !== smallLayout) {
-    t9 = (props_1) => {
-      if (props_1.copy && !props_1.entityId) {
-        throw Error("If you want to copy an entity you need to provide an entityId");
+    }
+  }, [location.pathname, location.hash, currentPanelKeys]);
+  useEffect(() => {
+    const updatedSidePanels = sideDialogsController.sidePanels.map((sidePanelProps) => {
+      if (sidePanelProps.additional) {
+        return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
       }
-      sideDialogsController.replace(propsToSidePanel(props_1, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
-    };
-    $[35] = navigation.buildUrlCollectionPath;
-    $[36] = navigation.resolveIdsFrom;
-    $[37] = sideDialogsController;
-    $[38] = smallLayout;
-    $[39] = t9;
-  } else {
-    t9 = $[39];
-  }
-  const replace = t9;
-  let t10;
-  if ($[40] !== close || $[41] !== open || $[42] !== replace) {
-    t10 = {
-      close,
-      open,
-      replace
-    };
-    $[40] = close;
-    $[41] = open;
-    $[42] = replace;
-    $[43] = t10;
-  } else {
-    t10 = $[43];
-  }
-  return t10;
+      return sidePanelProps;
+    });
+    sideDialogsController.setSidePanels(updatedSidePanels);
+  }, [smallLayout]);
+  const close = useCallback(() => {
+    sideDialogsController.close();
+  }, [sideDialogsController]);
+  const open = useCallback((props_0) => {
+    if (props_0.copy && !props_0.entityId) {
+      throw Error("If you want to copy an entity you need to provide an entityId");
+    }
+    const defaultSelectedView = resolveDefaultSelectedView(props_0.collection ? props_0.collection.defaultSelectedView : void 0, {
+      status: props_0.copy ? "copy" : props_0.entityId ? "existing" : "new",
+      entityId: props_0.entityId
+    });
+    sideDialogsController.open(propsToSidePanel({
+      selectedTab: defaultSelectedView,
+      ...props_0
+    }, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+  }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
+  const replace = useCallback((props_1) => {
+    if (props_1.copy && !props_1.entityId) {
+      throw Error("If you want to copy an entity you need to provide an entityId");
+    }
+    sideDialogsController.replace(propsToSidePanel(props_1, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+  }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
+  return {
+    close,
+    open,
+    replace
+  };
 };
 function buildSidePanelsFromUrl(path, collections, newFlag) {
   const navigationViewsForPath = getNavigationEntriesFromPath({
@@ -22313,7 +22036,7 @@ function buildSidePanelsFromUrl(path, collections, newFlag) {
   }
   return sidePanel ? [sidePanel] : [];
 }
-const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout) => {
+const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout, customizationController) => {
   const collectionPath = removeInitialAndTrailingSlashes(props.path);
   const newPath = props.entityId ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`) : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
   const resolvedPath = resolveIdsFrom(props.path);
@@ -22322,7 +22045,7 @@ const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLa
     path: resolvedPath,
     formProps: props.formProps
   };
-  const entityViewWidth = getEntityViewWidth(props, smallLayout);
+  const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
   return {
     key: `${props.path}/${props.entityId}`,
     component: /* @__PURE__ */ jsx(EntitySidePanel, { ...resolvedPanelProps }),
@@ -22333,9 +22056,6 @@ const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLa
     additional: props
   };
 };
-function _temp$5(p) {
-  return p.key;
-}
 function useBuildSideDialogsController() {
   const $ = c(24);
   const location = useLocation();
@@ -24221,7 +23941,6 @@ export {
   FireCMSRouter,
   FormEntry,
   FormLayout,
-  FormLayoutInner,
   GeoPoint,
   IconForView,
   ImagePreview,
@@ -24378,6 +24097,7 @@ export {
   resolvePropertyEnum,
   resolveStorageFilenameString,
   resolveStoragePathString,
+  resolvedSelectedEntityView,
   sanitizeData,
   saveEntityWithCallbacks,
   segmentsToStrippedPath,