@mattisvensson/strapi-plugin-webatlas 0.9.6 → 0.10.0

package/dist/_chunks/{index-BOtvXSPU.js → index-IRSCe8PX.js}

@@ -7,7 +7,7 @@ const designSystem = require("@strapi/design-system");
 const React = require("react");
 const ReactDOM = require("react-dom");
 const reactIntl = require("react-intl");
-const index = require("./index-COfk3YSm.js");
+const index = require("./index-BxpDM360.js");
 const admin = require("@strapi/strapi/admin");
 const FullLoader = require("./FullLoader-Cmsf8xS6.js");
 const symbols = require("@strapi/icons/symbols");
@@ -35,7 +35,7 @@ const useAllEntities = () => {
   return { entities, loading, error };
 };
 function createTempNavItemObject({
-  parentId,
+  actionItemParentId,
   entityRoute,
   selectedNavigation,
   navItemState,
@@ -44,6 +44,12 @@ function createTempNavItemObject({
   path,
   type = "internal"
 }) {
+  const clientModifications = {
+    type: "create",
+    route: entityRoute?.documentId ?? null,
+    parent: actionItemParentId ?? null,
+    navigation: selectedNavigation?.documentId ?? null
+  };
   const tempNavItem = {
     id: Math.floor(Math.random() * -1e6),
     // Temporary negative ID
@@ -53,25 +59,23 @@ function createTempNavItemObject({
     depth: 0,
     status: null,
     order: 0,
-    parent: parentId ? { documentId: parentId } : null,
+    parent: actionItemParentId ? { documentId: actionItemParentId } : null,
     items: [],
-    isNew: {
-      route: entityRoute?.documentId ?? null,
-      parent: parentId ?? null,
-      navigation: selectedNavigation?.documentId ?? null
-    },
+    clientModifications: { ...clientModifications },
+    initialClientModifications: { ...clientModifications },
     route: {
       active: navItemState.active || false,
       createdAt: (/* @__PURE__ */ new Date()).toISOString(),
       documentId: "",
       path: path?.value || "",
+      canonicalPath: "",
       id: 0,
       type,
       isOverride: navItemState.isOverride || false,
-      relatedContentType: selectedContentType ? JSON.stringify(selectedContentType.contentType) : "",
+      relatedContentType: selectedContentType ? selectedContentType.contentType.uid : "",
       relatedDocumentId: selectedEntity ? selectedEntity.documentId : "",
       relatedId: selectedEntity ? selectedEntity.id : 0,
-      slug: path?.value || "",
+      slug: path?.slug || "",
       title: navItemState.title || "",
       uidPath: path?.uidPath || "",
       updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -80,6 +84,56 @@ function createTempNavItemObject({
   };
   return tempNavItem;
 }
+function findParentNavItem({
+  navigationItems,
+  targetItem,
+  onlyInternalItems = false
+}) {
+  if (!navigationItems || !Array.isArray(navigationItems)) return null;
+  if (!targetItem || typeof targetItem.depth !== "number" || targetItem.depth <= 0) return null;
+  const targetIndex = navigationItems.findIndex(
+    (navItem) => navItem.documentId === targetItem.documentId
+  );
+  if (targetIndex === -1) return null;
+  for (let i = targetIndex - 1; i >= 0; i--) {
+    const candidate = navigationItems[i];
+    if (candidate.depth === 0) {
+      if (onlyInternalItems && candidate.route.type !== "internal") {
+        return null;
+      }
+      return candidate;
+    }
+    if (candidate.clientModifications?.type === "delete" || typeof candidate.depth === "number" && candidate.depth >= targetItem.depth || onlyInternalItems && candidate.route.type !== "internal") {
+      continue;
+    }
+    return candidate;
+  }
+  return null;
+}
+function buildBreadcrumbString({
+  navigationItems,
+  targetItem,
+  includeTarget = true
+}) {
+  if (!navigationItems || !Array.isArray(navigationItems)) return null;
+  if (!targetItem || typeof targetItem.depth !== "number") return null;
+  if (targetItem.depth <= 0) return targetItem.route.title;
+  const targetIndex = navigationItems.findIndex(
+    (navItem) => navItem.documentId === targetItem.documentId
+  );
+  if (targetIndex === -1) return null;
+  const parts = [];
+  for (let i = targetIndex - 1; i >= 0; i--) {
+    const candidate = navigationItems[i];
+    if (candidate.clientModifications?.type === "delete") continue;
+    parts.unshift(candidate.route.title);
+    if (typeof candidate.depth === "number" && candidate.depth === 0) break;
+  }
+  if (includeTarget) {
+    parts.push(targetItem.route.title);
+  }
+  return parts.join(" > ");
+}
 function EmptyBox({ msg }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(symbols.EmptyDocuments, { width: "10rem", height: "6rem" }),
@@ -102,11 +156,17 @@ function Delete({ variant, item, onDelete }) {
         await deleteNavigation(item.documentId);
         onDelete(item);
       } else if (variant === "ItemDelete") {
-        const editedItem = { ...item, deleted: true };
+        const editedItem = {
+          ...item,
+          clientModifications: {
+            ...item.clientModifications,
+            type: "delete"
+          }
+        };
         onDelete(editedItem);
       }
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
     }
     setModalType(closeModalState.current);
   };
@@ -243,7 +303,7 @@ function NavCreate() {
       navigate(`/plugins/${index.PLUGIN_ID}/navigation/${data.documentId}`);
       setModalType("");
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
       toggleNotification({
         type: "danger",
         message: formatMessage({
@@ -298,7 +358,7 @@ function NavEdit({ item, onEdit }) {
       setModalType("NavOverview");
       onEdit({ ...item, name, visible });
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
       toggleNotification({
         type: "danger",
         message: formatMessage({
@@ -439,12 +499,10 @@ function NavOverview({ navigations, setActionItem }) {
     }
   );
 }
-function itemStateReducer(navItemState, action) {
+function navItemStateReducer(navItemState, action) {
   switch (action.type) {
     case "SET_TITLE":
       return { ...navItemState, title: action.payload };
-    case "SET_SLUG":
-      return { ...navItemState, slug: action.payload };
     case "SET_ACTIVE":
       return { ...navItemState, active: action.payload };
     case "SET_OVERRIDE":
@@ -458,14 +516,14 @@ function pathReducer(state, action) {
     case "DEFAULT":
       return {
         ...state,
-        value: index.transformToUrl(action.payload),
+        value: action.payload,
         prevValue: state.value,
         needsUrlCheck: true
       };
     case "NO_URL_CHECK":
       return {
         ...state,
-        value: index.transformToUrl(action.payload),
+        value: action.payload,
         prevValue: state.value,
         needsUrlCheck: false
       };
@@ -478,8 +536,14 @@ function pathReducer(state, action) {
       };
     case "RESET_URL_CHECK_FLAG":
       return { ...state, needsUrlCheck: false };
+    case "SET_REPLACEMENT":
+      return { ...state, replacement: action.payload };
     case "SET_UIDPATH":
       return { ...state, uidPath: action.payload };
+    case "SET_SLUG":
+      return { ...state, slug: action.payload };
+    case "SET_CANONICALPATH":
+      return { ...state, canonicalPath: action.payload };
     case "SET_INITIALPATH":
       return { ...state, initialPath: action.payload };
     default:
@@ -487,61 +551,64 @@ function pathReducer(state, action) {
   }
 }
 function useModalSharedLogic() {
-  const [availableEntities, setAvailableEntities] = React.useState([]);
-  const [selectedEntity, setSelectedEntity] = React.useState();
   const [selectedContentType, setSelectedContentType] = React.useState();
-  const [entityRoute, setEntityRoute] = React.useState();
-  const [replacement, setReplacement] = React.useState("");
   const [validationState, setValidationState] = React.useState("initial");
   const { entities } = useAllEntities();
-  const { updateRoute, getRelatedRoute } = index.useApi();
   const { get } = admin.useFetchClient();
+  const availableEntities = React.useMemo(() => {
+    if (!entities) return [];
+    return entities;
+  }, [entities]);
   const initialState = React.useRef({
     title: "",
     slug: "",
     active: true,
-    internal: true,
+    type: "internal",
     isOverride: false
   });
-  const [navItemState, dispatchItemState] = React.useReducer(itemStateReducer, initialState.current);
-  const [path, dispatchPath] = React.useReducer(pathReducer, { needsUrlCheck: false });
+  const [navItemState, dispatchNavItemState] = React.useReducer(navItemStateReducer, initialState.current);
+  const [path, dispatchPath] = React.useReducer(pathReducer, {
+    needsUrlCheck: false,
+    value: "",
+    prevValue: "",
+    slug: "",
+    replacement: null,
+    uidPath: "",
+    canonicalPath: "",
+    initialPath: ""
+  });
   const debouncedCheckUrl = React.useCallback(index.debounce(checkUrl, 500), []);
   const { modalType, setModalType } = React.useContext(ModalContext);
   const { selectedNavigation } = React.useContext(SelectedNavigationContext);
-  async function checkUrl(url, routeDocumentId) {
+  async function checkUrl({
+    url,
+    routeDocumentId,
+    withoutTransform = false
+  }) {
     if (!url) return;
     setValidationState("checking");
-    setReplacement("");
+    dispatchPath({ type: "SET_REPLACEMENT", payload: "" });
     try {
-      const data = await index.duplicateCheck(get, url, routeDocumentId);
+      const data = await index.duplicateCheck({ fetchFunction: get, path: url, routeDocumentId, withoutTransform });
       if (!data || data === url) return;
       dispatchPath({ type: "NO_URL_CHECK", payload: data });
-      setReplacement(data);
+      dispatchPath({ type: "SET_REPLACEMENT", payload: data });
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
     } finally {
       setValidationState("done");
     }
   }
-  const modalSharedLogic2 = {
+  const modalSharedLogic = {
     availableEntities,
-    setAvailableEntities,
-    selectedEntity,
-    setSelectedEntity,
     selectedContentType,
     setSelectedContentType,
-    entityRoute,
-    setEntityRoute,
     entities,
-    updateRoute,
-    getRelatedRoute,
-    replacement,
-    setReplacement,
     validationState,
     setValidationState,
     initialState,
     navItemState,
-    dispatchItemState,
+    dispatchNavItemState,
     path,
     dispatchPath,
     debouncedCheckUrl,
@@ -549,7 +616,7 @@ function useModalSharedLogic() {
     setModalType,
     selectedNavigation
   };
-  return modalSharedLogic2;
+  return modalSharedLogic;
 }
 function withModalSharedLogic(Component) {
   return function WrappedComponent(props) {
@@ -567,39 +634,39 @@ function ExternalItemComponent(props) {
   const {
     variant,
     navItemState,
-    dispatchItemState,
+    dispatchNavItemState,
     path,
     dispatchPath,
     setModalType,
     selectedNavigation
   } = props;
-  const parentId = isExternalCreateProps(props) ? props.parentId : void 0;
+  const actionItemParentId = isExternalCreateProps(props) ? props.actionItemParentId : void 0;
   const onCreate = isExternalCreateProps(props) ? props.onCreate : void 0;
   const onSave = isExternalEditProps(props) ? props.onSave : void 0;
   const item = isExternalEditProps(props) ? props.item : void 0;
   const { formatMessage } = reactIntl.useIntl();
   React.useEffect(() => {
     if (variant !== "ExternalEdit" || !item) return;
-    dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
-    dispatchItemState({ type: "SET_ACTIVE", payload: item.route.active });
+    dispatchNavItemState({ type: "SET_TITLE", payload: item.route.title });
+    dispatchNavItemState({ type: "SET_ACTIVE", payload: item.route.active });
     dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.path });
-  }, [variant, item, dispatchItemState, dispatchPath]);
+  }, [variant, item, dispatchNavItemState, dispatchPath]);
   const handleConfirm = async () => {
     try {
       if (!path || path.value?.trim() === "" || !navItemState.title || navItemState.title?.trim() === "" || !selectedNavigation) return;
       if (variant === "ExternalEdit" && item && onSave) {
         onSave({
           ...item,
-          update: {
+          clientModifications: {
+            ...item.clientModifications,
+            type: "update",
             title: navItemState.title,
-            path: path.value
-            // internal: false,
-            // active: navItemState.active,
+            slug: path.value
           }
         });
       } else if (onCreate) {
         const newItem = createTempNavItemObject({
-          parentId,
+          actionItemParentId,
           entityRoute: null,
           selectedNavigation,
           navItemState,
@@ -612,7 +679,7 @@ function ExternalItemComponent(props) {
       }
       setModalType("");
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -642,7 +709,7 @@ function ExternalItemComponent(props) {
               }),
               name: "title",
               value: navItemState.title || "",
-              onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
+              onChange: (e) => dispatchNavItemState({ type: "SET_TITLE", payload: e.target.value }),
               required: true
             }
           )
@@ -671,10 +738,79 @@ function ExternalItemComponent(props) {
   );
 }
 const ExternalItem = withModalSharedLogic(ExternalItemComponent);
-function ItemDetails({ navItemState, dispatchItemState, path, dispatchPath, validationState, replacement }) {
+function Warning({ main, info }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "warning", minWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: main })
+    ] }),
+    info && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: info })
+  ] }) }) });
+}
+function ItemDetails({
+  navItemState,
+  dispatchNavItemState,
+  path,
+  dispatchPath,
+  validationState,
+  parentNavItem,
+  navigationItems,
+  navigations,
+  debouncedCheckUrl,
+  item,
+  route,
+  modalVariant
+}) {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+  const breadcrumbString = React.useMemo(() => {
+    if (!navigationItems) return null;
+    const targetItem = item || parentNavItem;
+    if (!targetItem || typeof targetItem.depth !== "number") return null;
+    return buildBreadcrumbString({ navigationItems, targetItem, includeTarget: modalVariant === "create" });
+  }, [parentNavItem, navigationItems, item, modalVariant]);
+  const navigationWhereRouteExists = React.useMemo(() => {
+    if (!navigations || !route) return false;
+    return navigations.find((nav) => nav.items.some((r) => r.route.documentId === route.documentId || r.route.relatedContentType === route.relatedContentType && r.route.relatedDocumentId === route.relatedDocumentId));
+  }, [navigations, route, navigationItems]);
+  React.useEffect(() => {
+    if (path.needsUrlCheck && path.value) {
+      if (path.uidPath === path.value || path.initialPath === path.value) return;
+      debouncedCheckUrl({ url: path.value, routeDocumentId: route.documentId, withoutTransform: true });
+      dispatchPath({ type: "RESET_URL_CHECK_FLAG" });
+    }
+  }, [path.needsUrlCheck, route.documentId]);
+  React.useEffect(() => {
+    if (!path.slug) return;
+    const parentPath = parentNavItem?.clientModifications?.path || parentNavItem?.route.path || "";
+    const newPath = parentPath ? `${parentPath}/${path.slug}` : path.slug;
+    dispatchPath({ type: "DEFAULT", payload: newPath });
+  }, [path.slug, parentNavItem]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+    path.canonicalPath !== path.value && /* @__PURE__ */ jsxRuntime.jsx(
+      Warning,
+      {
+        main: formatMessage({
+          id: index.getTranslation("modal.item.canonicalPathMismatch"),
+          defaultMessage: "Warning: Canonical Path does not match navigation path"
+        })
+      }
+    ),
+    navigationWhereRouteExists && /* @__PURE__ */ jsxRuntime.jsx(
+      Warning,
+      {
+        main: formatMessage({
+          id: index.getTranslation("modal.item.routeAlreadyUsed"),
+          defaultMessage: 'Warning: This route is already used in the navigation "{navigationName}"'
+        }, {
+          navigationName: navigationWhereRouteExists.name
+        }),
+        info: formatMessage({
+          id: index.getTranslation("modal.item.routeAlreadyUsed.info"),
+          defaultMessage: "Changing the path for this item will also update the path in the existing item."
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { required: true, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
         id: index.getTranslation("modal.item.titleField.label"),
         defaultMessage: "Title"
@@ -682,17 +818,65 @@ function ItemDetails({ navItemState, dispatchItemState, path, dispatchPath, vali
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Field.Input,
         {
-          placeholder: formatMessage({
-            id: index.getTranslation("modal.item.titleField.placeholder"),
-            defaultMessage: "e.g. About us"
-          }),
           name: "title",
           value: navItemState?.title || "",
-          onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
+          onChange: (e) => dispatchNavItemState({ type: "SET_TITLE", payload: e.target.value }),
           required: true
         }
       )
     ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+        formatMessage({
+          id: index.getTranslation("modal.item.canonicalPathField.label"),
+          defaultMessage: "Canonical Path"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { description: formatMessage({
+          id: index.getTranslation("modal.item.canonicalPathField.tooltip"),
+          defaultMessage: "Based on content hierarchy"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          name: "canonicalPath",
+          value: route.canonicalPath || "",
+          disabled: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { required: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+        id: index.getTranslation("modal.item.slugField.label"),
+        defaultMessage: "Slug"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          name: "slug",
+          value: path.slug,
+          onChange: (e) => dispatchPath({ type: "SET_SLUG", payload: e.target.value }),
+          onBlur: (e) => {
+            dispatchPath({ type: "SET_SLUG", payload: e.target.value });
+          }
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+        id: index.getTranslation("modal.item.navigationPosition.label"),
+        defaultMessage: "Navigation Position"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          name: "navigationPosition",
+          value: breadcrumbString || "Root",
+          disabled: true
+        }
+      )
+    ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
@@ -702,110 +886,77 @@ function ItemDetails({ navItemState, dispatchItemState, path, dispatchPath, vali
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Field.Input,
           {
-            required: true,
-            placeholder: formatMessage({
-              id: index.getTranslation("modal.item.pathField.placeholder"),
-              defaultMessage: "e.g. about/"
-            }),
-            name: "slug",
-            value: path?.value || "",
-            onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value }),
-            onBlur: (e) => {
-              if (e.target.value === path.prevValue) return;
-              dispatchPath({ type: "DEFAULT", payload: e.target.value });
-            }
+            name: "path",
+            value: path.value,
+            disabled: true
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.PathInfo, { validationState, replacement })
+      /* @__PURE__ */ jsxRuntime.jsx(index.PathInfo, { validationState, replacement: path.replacement })
     ] }) })
-  ] }) });
+  ] });
 }
 function ItemCreateComponent({
   availableEntities,
-  setAvailableEntities,
-  selectedEntity,
-  setSelectedEntity,
   selectedContentType,
   setSelectedContentType,
-  entityRoute,
-  setEntityRoute,
-  entities,
-  getRelatedRoute,
-  replacement,
   validationState,
-  initialState,
   navItemState,
-  dispatchItemState,
+  dispatchNavItemState,
   path,
   dispatchPath,
   debouncedCheckUrl,
   setModalType,
   selectedNavigation,
-  parentId,
-  onCreate
+  actionItemParent,
+  onCreate,
+  navigationItems,
+  navigations
 }) {
-  const [loading, setLoading] = React.useState(false);
+  const [route, setRoute] = React.useState(null);
+  const [entity, setEntity] = React.useState(null);
   const [loadingRoute, setLoadingRoute] = React.useState(true);
   const { formatMessage } = reactIntl.useIntl();
-  React.useEffect(() => {
-    if (!entities) return;
-    setAvailableEntities(entities);
-  }, [entities]);
-  React.useEffect(() => {
-    if (path.needsUrlCheck && path.value) {
-      if (path.uidPath === path.value || path.initialPath === path.value) return;
-      debouncedCheckUrl(path.value, entityRoute?.documentId);
-      dispatchPath({ type: "RESET_URL_CHECK_FLAG" });
-    }
-  }, [path.needsUrlCheck, entityRoute?.documentId]);
+  const { getRelatedRoute } = index.useApi();
   React.useEffect(() => {
     async function fetchRoute() {
-      if (!selectedContentType?.contentType || !selectedEntity?.documentId) return setLoadingRoute(false);
+      if (!selectedContentType?.contentType || !entity?.documentId) return setLoadingRoute(false);
       setLoadingRoute(true);
       try {
-        const route = await getRelatedRoute(selectedEntity.documentId);
-        if (!route) throw new Error("No route found for the selected entity");
-        dispatchPath({ type: "NO_URL_CHECK", payload: route.path });
-        dispatchPath({ type: "SET_UIDPATH", payload: route.uidPath });
-        dispatchPath({ type: "SET_INITIALPATH", payload: route.path });
-        dispatchItemState({ type: "SET_TITLE", payload: route.title });
-        dispatchItemState({ type: "SET_ACTIVE", payload: route.active });
-        dispatchItemState({ type: "SET_OVERRIDE", payload: route.isOverride });
-        initialState.current = {
-          title: route.title,
-          slug: route.path,
-          active: route.active,
-          isOverride: route.isOverride
-        };
-        setEntityRoute(route);
+        const relatedRoute = await getRelatedRoute(entity.documentId);
+        if (!relatedRoute) throw new Error("No route found for the selected entity");
+        dispatchPath({ type: "NO_URL_CHECK", payload: relatedRoute.path });
+        dispatchPath({ type: "SET_SLUG", payload: relatedRoute.slug });
+        dispatchPath({ type: "SET_INITIALPATH", payload: relatedRoute.path });
+        dispatchPath({ type: "SET_CANONICALPATH", payload: relatedRoute.canonicalPath });
+        dispatchNavItemState({ type: "SET_TITLE", payload: relatedRoute.title });
+        dispatchNavItemState({ type: "SET_ACTIVE", payload: relatedRoute.active });
+        dispatchNavItemState({ type: "SET_OVERRIDE", payload: relatedRoute.isOverride });
+        setRoute(relatedRoute);
       } catch (err) {
-        console.log(err);
+        strapi.log.error(err);
       } finally {
         setLoadingRoute(false);
       }
     }
     fetchRoute();
-  }, [selectedEntity]);
+  }, [entity]);
   const addItem = async () => {
     try {
-      setLoading(true);
-      if (!selectedContentType?.contentType || !selectedEntity?.documentId || !path || !path.value?.trim() || !navItemState.title || !navItemState.title?.trim() || !selectedNavigation || !entityRoute) return;
+      if (!selectedContentType?.contentType || !entity?.documentId || !path || !path.value?.trim() || !navItemState.title || !navItemState.title?.trim() || !selectedNavigation || !route) return;
       const newItem = createTempNavItemObject({
-        parentId,
-        entityRoute,
+        actionItemParentId: actionItemParent?.documentId,
+        entityRoute: route,
         selectedNavigation,
         navItemState,
-        selectedEntity,
+        selectedEntity: entity,
         selectedContentType,
         path
       });
       onCreate(newItem);
       setModalType("");
     } catch (err) {
-      console.log(err);
-    } finally {
-      setLoading(false);
+      strapi.log.error(err);
     }
   };
   if (availableEntities && availableEntities.length === 0) {
@@ -828,11 +979,10 @@ function ItemCreateComponent({
       titleText: formatMessage({ id: index.getTranslation("modal.internalItem.titleText.create"), defaultMessage: "Add new navigation item" }),
       loadingText: formatMessage({ id: index.getTranslation("modal.internalItem.loadingText.create"), defaultMessage: "Creating" }),
       onConfirm: addItem,
-      loading,
       modalToOpen: "",
       currentModalType: "ItemCreate",
       currentModalMode: "create",
-      disabled: !selectedContentType?.contentType || !selectedEntity?.documentId || !path || !path.value?.trim() || !navItemState.title || !navItemState.title?.trim(),
+      disabled: !selectedContentType?.contentType || !entity?.documentId || !path || !path.value?.trim() || !path.slug?.trim() || !navItemState.title || !navItemState.title?.trim(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
@@ -852,7 +1002,7 @@ function ItemCreateComponent({
                   const [contentType] = availableEntities.filter((group) => group.contentType.label === value);
                   if (contentType) {
                     setSelectedContentType(contentType);
-                    setSelectedEntity(null);
+                    setEntity(null);
                   }
                 },
                 disabled: availableEntities && availableEntities.length === 0,
@@ -868,39 +1018,40 @@ function ItemCreateComponent({
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.SingleSelect,
               {
-                value: selectedEntity ? selectedEntity.id : "",
+                value: entity ? entity.documentId : "",
                 placeholder: formatMessage({
                   id: index.getTranslation("modal.internalItem.entity.placeholder"),
                   defaultMessage: "Select an entity"
                 }),
                 onChange: (value) => {
                   const flatEntities = availableEntities.flatMap((group) => group.entities);
-                  const route = flatEntities.find((route2) => route2.id === Number(value));
-                  if (route) setSelectedEntity(route);
+                  const route2 = flatEntities.find((route3) => route3.documentId === value);
+                  if (route2) setEntity(route2);
                 },
                 disabled: !selectedContentType || selectedContentType?.entities && selectedContentType?.entities.length === 0,
                 children: selectedContentType && selectedContentType.entities?.map(
-                  (entity) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelectOption, { value: entity.id, children: [
-                    entity.id,
-                    " - ",
-                    entity[selectedContentType.contentType.default]
-                  ] }, entity.id)
+                  (entity2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: entity2.documentId, children: entity2[selectedContentType.contentType.default] }, entity2.id)
                 )
               }
             )
           ] }) }) })
         ] }),
-        selectedEntity && selectedContentType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        entity && selectedContentType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
-          loadingRoute ? /* @__PURE__ */ jsxRuntime.jsx(FullLoader.FullLoader, { height: 50 }) : /* @__PURE__ */ jsxRuntime.jsx(
+          loadingRoute || !route ? /* @__PURE__ */ jsxRuntime.jsx(FullLoader.FullLoader, { height: 50 }) : /* @__PURE__ */ jsxRuntime.jsx(
             ItemDetails,
             {
               navItemState,
-              dispatchItemState,
+              dispatchNavItemState,
               path,
               dispatchPath,
               validationState,
-              replacement
+              parentNavItem: actionItemParent,
+              navigationItems,
+              navigations,
+              debouncedCheckUrl,
+              route,
+              modalVariant: "create"
             }
           )
         ] })
@@ -6400,23 +6551,35 @@ function ItemEditComponent({
   selectedContentType,
   setSelectedContentType,
   entities,
-  replacement,
   validationState,
   initialState,
   navItemState,
-  dispatchItemState,
+  dispatchNavItemState,
   path,
   dispatchPath,
   debouncedCheckUrl,
   setModalType,
+  navigationItems,
   onEdit
 }) {
   const { formatMessage } = reactIntl.useIntl();
+  const parentNavItem = React.useMemo(() => {
+    return findParentNavItem({
+      navigationItems,
+      targetItem: item,
+      onlyInternalItems: true
+    });
+  }, [navigationItems, item]);
   React.useEffect(() => {
-    dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.path });
-    dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
-    dispatchItemState({ type: "SET_SLUG", payload: item.route.slug });
-    dispatchItemState({ type: "SET_ACTIVE", payload: item.route.active });
+    const parentPath = parentNavItem?.clientModifications?.path || parentNavItem?.route.path || "";
+    const initialPath = `${parentPath}/${item.route.slug}`;
+    dispatchPath({ type: "DEFAULT", payload: initialPath });
+    dispatchPath({ type: "SET_SLUG", payload: item.route.slug });
+    dispatchPath({ type: "SET_INITIALPATH", payload: initialPath });
+    dispatchPath({ type: "SET_CANONICALPATH", payload: item.route.canonicalPath });
+    dispatchNavItemState({ type: "SET_TITLE", payload: item.route.title });
+    dispatchNavItemState({ type: "SET_ACTIVE", payload: item.route.active });
+    dispatchNavItemState({ type: "SET_OVERRIDE", payload: item.route.isOverride });
     const initialValues = {
       title: item.route.title,
       active: item.route.active,
@@ -6424,8 +6587,7 @@ function ItemEditComponent({
       slug: item.route.slug
     };
     initialState.current = initialValues;
-    dispatchPath({ type: "SET_INITIALPATH", payload: item.route.path });
-  }, []);
+  }, [navigationItems, item, parentNavItem]);
   React.useEffect(() => {
     if (!entities) return;
     const contentType = entities.find((group) => group.contentType.uid === item.route.relatedContentType);
@@ -6434,38 +6596,27 @@ function ItemEditComponent({
   React.useEffect(() => {
     if (path.needsUrlCheck && path.value) {
       if (path.uidPath === path.value || path.initialPath === path.value) return;
-      debouncedCheckUrl(path.value, item.route.documentId);
+      debouncedCheckUrl({ url: path.value, routeDocumentId: item.route.documentId });
       dispatchPath({ type: "RESET_URL_CHECK_FLAG" });
     }
   }, [path.needsUrlCheck, item.route.documentId]);
-  const debouncedValueEffect = React.useMemo(
-    () => index.debounce((path2) => {
-      dispatchPath({ type: "DEFAULT", payload: path2 });
-    }, 500),
-    []
-  );
-  const handlePathChange = (newPath) => {
-    if (newPath === path.prevValue) return;
-    dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: newPath });
-    if (newPath === "") return;
-    debouncedValueEffect(newPath);
-  };
   const updateItem = async () => {
     try {
       if (lodashExports.isEqual(navItemState, initialState.current) && path.value === path.initialPath) return;
       const isOverride = path.value !== item.route.path ? true : navItemState.isOverride;
       onEdit({
         ...item,
-        update: {
+        clientModifications: {
+          type: "update",
           title: navItemState.title,
-          slug: navItemState.slug,
+          slug: path.slug,
           path: path.value,
           isOverride
         }
       });
       setModalType("");
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
     }
   };
   if (!selectedContentType) return null;
@@ -6510,53 +6661,25 @@ function ItemEditComponent({
             )
           ] }) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 8, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
-              id: index.getTranslation("modal.item.titleField.label"),
-              defaultMessage: "Title"
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Field.Input,
-              {
-                placeholder: formatMessage({
-                  id: index.getTranslation("modal.item.titleField.placeholder"),
-                  defaultMessage: "e.g. About us"
-                }),
-                name: "title",
-                value: navItemState.title || "",
-                onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
-                required: true
-              }
-            )
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
-                id: index.getTranslation("modal.item.pathField.label"),
-                defaultMessage: "Path"
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Field.Input,
-                {
-                  placeholder: formatMessage({
-                    id: index.getTranslation("modal.item.pathField.placeholder"),
-                    defaultMessage: "e.g. about/"
-                  }),
-                  value: path.value || "",
-                  onChange: (e) => handlePathChange(e.target.value),
-                  onBlur: (e) => {
-                    if (e.target.value === path.prevValue) return;
-                    dispatchPath({ type: "DEFAULT", payload: e.target.value });
-                  },
-                  required: true
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(index.PathInfo, { validationState, replacement })
-          ] }) })
-        ] }) })
+        item && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ItemDetails,
+            {
+              navItemState,
+              dispatchNavItemState,
+              path,
+              dispatchPath,
+              validationState,
+              parentNavItem,
+              navigationItems,
+              debouncedCheckUrl,
+              item,
+              route: item.route,
+              modalVariant: "edit"
+            }
+          )
+        ] })
       ]
     }
   );
@@ -6572,40 +6695,37 @@ function WrapperItemComponent(props) {
   const {
     variant,
     navItemState,
-    dispatchItemState,
+    dispatchNavItemState,
     dispatchPath,
     setModalType,
     selectedNavigation
   } = props;
-  const parentId = isWrapperCreateProps(props) ? props.parentId : void 0;
+  const actionItemParentId = isWrapperCreateProps(props) ? props.actionItemParentId : void 0;
   const onCreate = isWrapperCreateProps(props) ? props.onCreate : void 0;
   const onSave = isWrapperEditProps(props) ? props.onSave : void 0;
   const item = isWrapperEditProps(props) ? props.item : void 0;
   const { formatMessage } = reactIntl.useIntl();
   React.useEffect(() => {
     if (variant !== "WrapperEdit" || !item) return;
-    dispatchItemState({ type: "SET_TITLE", payload: item.route.title });
-    dispatchItemState({ type: "SET_ACTIVE", payload: item.route.active });
+    dispatchNavItemState({ type: "SET_TITLE", payload: item.route.title });
+    dispatchNavItemState({ type: "SET_ACTIVE", payload: item.route.active });
     dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: item.route.path });
   }, []);
   const onConfirm = async () => {
     try {
       if (!navItemState.title || !selectedNavigation) return;
-      const data = {
-        title: navItemState.title,
-        active: navItemState.active,
-        type: "wrapper"
-      };
       if (variant === "WrapperEdit" && item && onSave) {
         onSave({
           ...item,
-          update: {
-            ...data
+          clientModifications: {
+            ...item.clientModifications,
+            type: "update",
+            title: navItemState.title
           }
         });
       } else if (onCreate) {
         const newItem = createTempNavItemObject({
-          parentId,
+          actionItemParentId,
           entityRoute: null,
           selectedNavigation,
           navItemState,
@@ -6617,7 +6737,7 @@ function WrapperItemComponent(props) {
       }
       setModalType("");
     } catch (err) {
-      console.log(err);
+      strapi.log.error(err);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6646,7 +6766,7 @@ function WrapperItemComponent(props) {
             }),
             name: "title",
             value: navItemState.title || "",
-            onChange: (e) => dispatchItemState({ type: "SET_TITLE", payload: e.target.value }),
+            onChange: (e) => dispatchNavItemState({ type: "SET_TITLE", payload: e.target.value }),
             required: true
           }
         )
@@ -6689,7 +6809,98 @@ function getMaxDepth({ previousItem, maxDepthValue }) {
 function getDragDepth(offset, indentationWidth2) {
   return Math.round(offset / indentationWidth2);
 }
-function RouteIcon({ type, color = "neutral800" }) {
+function RouteItemMenu({
+  item,
+  depth,
+  maxDepth,
+  handleEdit,
+  handleAddChildren,
+  handleDelete,
+  handleRestore
+}) {
+  const { formatMessage } = reactIntl.useIntl();
+  const viewEntityTo = item.route.relatedContentType && item.route.relatedDocumentId ? `/content-manager/collection-types/${item.route.relatedContentType}/${item.route.relatedDocumentId}` : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SimpleMenu, { label: "Item actions", tag: designSystem.IconButton, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.More, {}), children: [
+    (item.clientModifications?.type === "delete" || item.clientModifications?.type === "update") && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleRestore(), children: formatMessage({
+      id: index.getTranslation("restore.metadata"),
+      defaultMessage: "Restore Metadata"
+    }) }) }),
+    item.clientModifications?.type !== "delete" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleEdit(), children: formatMessage({
+        id: index.getTranslation("edit"),
+        defaultMessage: "Edit"
+      }) }),
+      item.route.type === "internal" && viewEntityTo && /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.MenuItem,
+        {
+          isLink: true,
+          as: reactRouterDom.Link,
+          to: viewEntityTo,
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+            id: index.getTranslation("navigation.page.navItem.viewEntity"),
+            defaultMessage: "View Entity"
+          }) })
+        }
+      ),
+      depth !== void 0 && depth < maxDepth && /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleAddChildren(), children: formatMessage({
+        id: index.getTranslation("navigation.page.navItem.addChildren"),
+        defaultMessage: "Add children"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleDelete(), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: formatMessage({
+        id: index.getTranslation("delete"),
+        defaultMessage: "Delete"
+      }) }) })
+    ] })
+  ] });
+}
+function RouteItemStatus({
+  item,
+  isUpdated = false
+}) {
+  if (!item) return null;
+  const { formatMessage } = reactIntl.useIntl();
+  if (item.clientModifications?.type === "create")
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Badge,
+      {
+        backgroundColor: "success100",
+        textColor: "success600",
+        borderColor: "success200",
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+          id: index.getTranslation("new"),
+          defaultMessage: "New"
+        }) })
+      }
+    );
+  if (item.clientModifications?.type === "update" || isUpdated)
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Badge,
+      {
+        backgroundColor: "warning100",
+        textColor: "warning600",
+        borderColor: "warning200",
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+          id: index.getTranslation("updated"),
+          defaultMessage: "Updated"
+        }) })
+      }
+    );
+  if (item.clientModifications?.type === "delete")
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Badge,
+      {
+        backgroundColor: "danger100",
+        textColor: "danger600",
+        borderColor: "danger200",
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+          id: index.getTranslation("deleted"),
+          defaultMessage: "Deleted"
+        }) })
+      }
+    );
+  return null;
+}
+function RouteItemIcon({ type, color = "neutral800" }) {
   switch (type) {
     case "external":
       return /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, { color });
@@ -6701,20 +6912,8 @@ function RouteIcon({ type, color = "neutral800" }) {
       return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "16px", height: "16px" });
   }
 }
-const RouteItem = React.forwardRef(({
-  item,
-  setParentId,
-  setActionItem,
-  setNavigationItems,
-  ghost,
-  depth,
-  maxDepth,
-  style,
-  wrapperRef,
-  handleProps
-}, ref) => {
-  if (!item || !item.route) return null;
-  const { setModalType } = React.useContext(ModalContext);
+function RouteItemBadge({ item }) {
+  if (item.route.type !== "internal" || !item.status) return null;
   const { formatMessage } = reactIntl.useIntl();
   const itemStatusOptions = {
     published: {
@@ -6722,25 +6921,119 @@ const RouteItem = React.forwardRef(({
         id: index.getTranslation("published"),
         defaultMessage: "Published"
       }),
-      variant: "primary"
+      backgroundColor: "success100",
+      textColor: "success600",
+      borderColor: "success200"
     },
     draft: {
       status: formatMessage({
         id: index.getTranslation("draft"),
         defaultMessage: "Draft"
       }),
-      variant: "secondary"
+      backgroundColor: "secondary100",
+      textColor: "secondary600",
+      borderColor: "secondary200"
     },
     modified: {
       status: formatMessage({
         id: index.getTranslation("modified"),
         defaultMessage: "Modified"
       }),
-      variant: "alternative"
+      backgroundColor: "alternative100",
+      textColor: "alternative600",
+      borderColor: "alternative200"
     }
   };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Badge,
+    {
+      backgroundColor: itemStatusOptions[item.status].backgroundColor,
+      textColor: itemStatusOptions[item.status].textColor,
+      borderColor: itemStatusOptions[item.status].borderColor,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: itemStatusOptions[item.status].status })
+    }
+  );
+}
+const RouteItem = React.forwardRef(({
+  item,
+  initialItem,
+  setActionItemParent,
+  setActionItem,
+  setNavigationItems,
+  ghost,
+  depth,
+  maxDepth,
+  style,
+  wrapperRef,
+  handleProps,
+  navigationItems
+}, ref) => {
+  const { setModalType } = React.useContext(ModalContext);
+  const parentNavItem = React.useMemo(() => findParentNavItem({
+    navigationItems,
+    targetItem: item,
+    onlyInternalItems: true
+  }), [navigationItems, item]);
+  const hasStructureChanges = React.useMemo(() => {
+    if (!initialItem) return false;
+    return initialItem.order !== item.order || initialItem.depth !== item.depth;
+  }, [initialItem, item.order, item.depth]);
+  const isUpdated = item.clientModifications?.type === "update" || hasStructureChanges;
+  const itemPath = React.useMemo(() => {
+    if (!item.route) return "";
+    if (item.route.type !== "internal") return item.route.path;
+    const parentPath = parentNavItem ? `${parentNavItem.clientModifications?.path || parentNavItem.route.path}/` : "";
+    const itemSlug = item.clientModifications?.slug || item.route.slug;
+    return `${parentPath}${itemSlug}`;
+  }, [item, parentNavItem, isUpdated]);
+  const updateNavItem = (navItems) => {
+    if (!navItems) return navItems;
+    return navItems.map((navItem) => {
+      if (navItem.documentId === item.documentId) {
+        if (navItem.clientModifications?.path === itemPath) {
+          return navItem;
+        }
+        return {
+          ...navItem,
+          clientModifications: navItem.clientModifications ? {
+            ...navItem.clientModifications,
+            path: itemPath
+          } : {
+            type: "update",
+            path: itemPath,
+            autoGenerated: true
+          }
+        };
+      }
+      return navItem;
+    });
+  };
+  const removeNavItemModifications = (navItems) => {
+    if (!navItems) return navItems;
+    return navItems.map((navItem) => {
+      if (navItem.documentId === item.documentId) {
+        const { clientModifications, ...rest } = navItem;
+        return rest;
+      }
+      return navItem;
+    });
+  };
+  React.useEffect(() => {
+    if (item.route?.type !== "internal") return;
+    const shouldSyncPath = item.clientModifications?.path !== itemPath && (item.clientModifications?.type === "update" || itemPath !== item.route.path);
+    if (shouldSyncPath) {
+      setNavigationItems(updateNavItem);
+    }
+  }, [itemPath, item.documentId, item.route?.type, item.route?.path, item.clientModifications?.type, item.clientModifications?.path, setNavigationItems]);
+  React.useEffect(() => {
+    if (item.route?.type !== "internal") return;
+    const canBeRemoved = item.clientModifications?.autoGenerated && item.route.path === itemPath && !hasStructureChanges;
+    if (canBeRemoved) {
+      setNavigationItems(removeNavItemModifications);
+    }
+  }, [itemPath, item.documentId, item.route?.type, item.route?.path, item.clientModifications?.autoGenerated, hasStructureChanges, setNavigationItems]);
   const handleAddChildren = () => {
-    setParentId(item.documentId);
+    setActionItemParent(item);
     setModalType("ItemCreate");
   };
   const handleEdit = () => {
@@ -6758,8 +7051,8 @@ const RouteItem = React.forwardRef(({
     setNavigationItems(
       (navItems) => navItems?.map((navItem) => {
         if (navItem.documentId === item.documentId) {
-          delete navItem.update;
-          delete navItem.deleted;
+          const { clientModifications: _, ...rest } = navItem;
+          return navItem.initialClientModifications ? { ...rest, clientModifications: navItem.initialClientModifications } : rest;
         }
         return navItem;
       })
@@ -6767,9 +7060,10 @@ const RouteItem = React.forwardRef(({
   };
   const elStyle = {
     marginLeft: depth !== void 0 ? depth * 48 : 0,
-    opacity: ghost || item.deleted ? 0.5 : 1,
+    opacity: ghost || item.clientModifications?.type === "delete" ? 0.5 : 1,
     ...style
   };
+  if (!item || !item.route) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Box,
     {
@@ -6778,8 +7072,8 @@ const RouteItem = React.forwardRef(({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Box,
         {
-          background: item.route?.active ? "neutral0" : "neutral100",
-          borderColor: "neutral150",
+          background: "neutral0",
+          borderColor: item.clientModifications?.type === "delete" ? "danger500" : "neutral150",
           hasRadius: true,
           paddingBottom: 4,
           paddingLeft: 4,
@@ -6798,49 +7092,30 @@ const RouteItem = React.forwardRef(({
                   background: "neutral150"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(RouteIcon, { type: item.route.type }),
+              /* @__PURE__ */ jsxRuntime.jsx(RouteItemIcon, { type: item.route.type }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: item.update?.title ? item.update.title : item.route.title }),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral400", children: [
-                  item.route.type === "internal" && "/",
-                  item.update?.path ? item.update.path : item.route.path
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: item.clientModifications?.title ? item.clientModifications.title : item.route.title }),
+                itemPath && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral400", children: [
+                  "/",
+                  itemPath
                 ] })
               ] }),
-              item.isNew && !item.deleted && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { variant: "alternative", size: "S", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
-                id: index.getTranslation("new"),
-                defaultMessage: "New"
-              }) }) }),
-              item.update && !item.deleted && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { variant: "alternative", size: "S", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
-                id: index.getTranslation("updated"),
-                defaultMessage: "Updated"
-              }) }) }),
-              item.deleted && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { size: "S", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "danger500", children: formatMessage({
-                id: index.getTranslation("deleted"),
-                defaultMessage: "Deleted"
-              }) }) })
+              /* @__PURE__ */ jsxRuntime.jsx(RouteItemStatus, { item, isUpdated: hasStructureChanges })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "row", gap: 4, children: [
-              item.route.type === "internal" && item.status && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { variant: itemStatusOptions[item.status].variant, size: "S", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: itemStatusOptions[item.status].status }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SimpleMenu, { label: "Item actions", tag: designSystem.IconButton, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.More, {}), children: [
-                !item.deleted && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleEdit(), children: formatMessage({
-                    id: index.getTranslation("edit"),
-                    defaultMessage: "Edit"
-                  }) }),
-                  depth !== void 0 && depth < maxDepth && /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleAddChildren(), children: formatMessage({
-                    id: index.getTranslation("navigation.page.navItem.addChildren"),
-                    defaultMessage: "Add children"
-                  }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleDelete(), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: formatMessage({
-                    id: index.getTranslation("delete"),
-                    defaultMessage: "Delete"
-                  }) }) })
-                ] }),
-                (item.deleted || item.update) && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: () => handleRestore(), children: formatMessage({
-                  id: index.getTranslation("restore"),
-                  defaultMessage: "Restore"
-                }) }) })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsx(RouteItemBadge, { item }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RouteItemMenu,
+                {
+                  item,
+                  depth,
+                  maxDepth,
+                  handleEdit,
+                  handleAddChildren,
+                  handleDelete,
+                  handleRestore
+                }
+              )
             ] })
           ] })
         }
@@ -7909,7 +8184,7 @@ const Navigation = () => {
   const [navigationItems, setNavigationItems] = React.useState();
   const initialNavigationItemsRef = React.useRef(null);
   const [actionItem, setActionItem] = React.useState();
-  const [parentId, setParentId] = React.useState();
+  const [actionItemParent, setActionItemParent] = React.useState(null);
   const { getNavigation, updateNavigationItemStructure } = index.useApi();
   const [isSavingNavigation, setIsSavingNavigation] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
@@ -7939,7 +8214,7 @@ const Navigation = () => {
                 const { data: data2 } = await get(`/content-manager/collection-types/${ct}/${id}`);
                 return { ...item, status: data2.data.status };
               } catch (err) {
-                console.error(err);
+                strapi.log.error(err);
                 return item;
               }
             })
@@ -7963,7 +8238,7 @@ const Navigation = () => {
       cachedNavigations.current = updatedNavigations;
       switchNavigation(selectedNav, updatedNavigations);
     } catch (error) {
-      console.error("Error fetching navigations: ", error);
+      strapi.log.error("Error fetching navigations: ", error);
       toggleNotification({
         type: "danger",
         message: formatMessage({
@@ -8005,17 +8280,27 @@ const Navigation = () => {
   React.useEffect(() => {
     if (modalType === "NavOverview" || modalType === "") {
       setActionItem(void 0);
-      setParentId(void 0);
+      setActionItemParent(null);
     }
   }, [modalType]);
+  React.useEffect(() => {
+    if (!selectedNavigation || !navigationItems) return;
+    setNavigations(navigations.map((nav) => {
+      if (nav.documentId !== selectedNavigation.documentId) return nav;
+      return {
+        ...nav,
+        items: navigationItems
+      };
+    }));
+  }, [setNavigations, navigationItems, selectedNavigation]);
   React.useEffect(() => {
     if (!activeId || !navigationItems) return;
     const item = navigationItems.find(({ id }) => id === activeId);
     setActiveItem(item);
   }, [navigationItems, activeId]);
   function handleSoftAddedItem(newItem) {
-    if (newItem.isNew?.parent) {
-      const parentIndex = navigationItems?.findIndex((item) => item.documentId === newItem.isNew?.parent);
+    if (newItem.clientModifications?.parent) {
+      const parentIndex = navigationItems?.findIndex((item) => item.documentId === newItem.clientModifications?.parent);
       if (parentIndex !== void 0 && parentIndex >= 0) {
         const parentDepth = navigationItems ? navigationItems[parentIndex].depth || 0 : 0;
         newItem.depth = parentDepth + 1;
@@ -8043,7 +8328,7 @@ const Navigation = () => {
         })
       });
     } catch (e) {
-      console.error(e);
+      strapi.log.error(e);
       toggleNotification({
         type: "danger",
         message: formatMessage({
@@ -8145,28 +8430,34 @@ const Navigation = () => {
           onDragCancel: () => handleDragCancel(),
           measuring,
           children: /* @__PURE__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: navigationItems, strategy: sortable.verticalListSortingStrategy, children: [
-            navigationItems.map((item, index2) => config?.navigation.maxDepth && /* @__PURE__ */ jsxRuntime.jsx(
-              SortableRouteItem,
-              {
-                item,
-                setParentId,
-                setActionItem,
-                setNavigationItems,
-                indentationWidth,
-                depth: item.id === activeId && projected ? projected.depth : item.depth,
-                maxDepth: config.navigation.maxDepth
-              },
-              item.documentId || index2
-            )),
+            navigationItems.map((item, index2) => {
+              const initialItem = initialNavigationItemsRef.current?.find((i) => i.documentId === item.documentId);
+              return config?.navigation.maxDepth && /* @__PURE__ */ jsxRuntime.jsx(
+                SortableRouteItem,
+                {
+                  item,
+                  initialItem,
+                  setActionItemParent,
+                  setActionItem,
+                  setNavigationItems,
+                  indentationWidth,
+                  depth: item.id === activeId && projected ? projected.depth : item.depth,
+                  maxDepth: config.navigation.maxDepth,
+                  navigationItems
+                },
+                item.documentId || index2
+              );
+            }),
             ReactDOM.createPortal(
               /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeId && activeItem ? config?.navigation.maxDepth && /* @__PURE__ */ jsxRuntime.jsx(
                 SortableRouteItem,
                 {
                   item: activeItem,
-                  setParentId,
+                  setActionItemParent,
                   setActionItem,
                   setNavigationItems,
-                  maxDepth: config.navigation.maxDepth
+                  maxDepth: config.navigation.maxDepth,
+                  navigationItems
                 }
               ) : null }),
               document.body
@@ -8226,7 +8517,9 @@ const Navigation = () => {
     modalType === "ItemCreate" && /* @__PURE__ */ jsxRuntime.jsx(
       ItemCreate,
       {
-        parentId,
+        actionItemParent,
+        navigationItems: navigationItems || [],
+        navigations,
         onCreate: (newItem) => {
           handleSoftAddedItem(newItem);
         }
@@ -8248,6 +8541,7 @@ const Navigation = () => {
       ItemEdit,
       {
         item: actionItem,
+        navigationItems: navigationItems || [],
         onEdit: (editedItem) => {
           setNavigationItems(
             (items) => items?.map((item) => item.id === editedItem.id ? editedItem : item)
@@ -8259,7 +8553,7 @@ const Navigation = () => {
       ExternalItem,
       {
         variant: modalType,
-        parentId,
+        actionItemParentId: actionItemParent?.documentId,
         onCreate: (newItem) => {
           handleSoftAddedItem(newItem);
         }
@@ -8281,7 +8575,7 @@ const Navigation = () => {
       WrapperItem,
       {
         variant: modalType,
-        parentId,
+        actionItemParentId: actionItemParent?.documentId,
         onCreate: (newItem) => {
           handleSoftAddedItem(newItem);
         }