@mattisvensson/strapi-plugin-webatlas 0.9.5 → 0.10.0

package/dist/_chunks/{index-ezabqLEP.js → index-BxpDM360.js}

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
 const designSystem = require("@strapi/design-system");
-const ReactDOM = require("react-dom");
 const reactIntl = require("react-intl");
+const ReactDOM = require("react-dom");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -52,6 +52,7 @@ function transformToUrl(input) {
   input = input.replace(/\/+/g, "/");
   input = input.startsWith("/") ? input.slice(1) : input;
   input = input.endsWith("/") ? input.slice(0, -1) : input;
+  input = input.replace(/\//g, "-");
   for (const char in specialCharMap) {
     const regex = new RegExp(char, "g");
     input = input.replace(regex, specialCharMap[char]);
@@ -62,7 +63,7 @@ function transformToUrl(input) {
   input = input.replace(/-+/g, "-");
   return input;
 }
-const version = "0.9.4";
+const version = "0.9.6";
 const keywords = [];
 const type = "commonjs";
 const exports$1 = {
@@ -129,7 +130,7 @@ const peerDependencies = {
   "styled-components": "^6.0.0"
 };
 const description = "A strapi plugin to manage URL routes and navigations.";
-const strapi = {
+const strapi$1 = {
   name: "webatlas",
   displayName: "Webatlas",
   description: "A strapi plugin to manage URL routes and navigations.",
@@ -169,7 +170,7 @@ const pluginPkg = {
   devDependencies,
   peerDependencies,
   description,
-  strapi,
+  strapi: strapi$1,
   name,
   license,
   repository,
@@ -198,7 +199,7 @@ function useApi() {
       const { data } = await get("/content-manager/content-types");
       return data.data;
     } catch (error) {
-      console.warn("Cannot fetch all content types:", error);
+      strapi.log.error("Cannot fetch all content types:", error);
       return [];
     }
   };
@@ -213,7 +214,7 @@ function useApi() {
       const configuredUIDs = new Set(configuredTypes.map((ct) => ct.uid));
       return allContentTypes.filter((ct) => configuredUIDs.has(ct.uid));
     } catch (err) {
-      console.error("Error fetching configured content types:", err);
+      strapi.log.error("Error fetching configured content types:", err);
       return [];
     }
   };
@@ -237,7 +238,7 @@ function useApi() {
               contentType
             };
           } catch (err) {
-            console.warn(`Cannot access entities for ${contentType.uid}:`, err);
+            strapi.log.error(`Cannot access entities for ${contentType.uid}:`, err);
             return null;
           }
         })
@@ -245,7 +246,7 @@ function useApi() {
       entities = entityResults.map((result) => result.status === "fulfilled" ? result.value : null).filter(Boolean);
       return entities;
     } catch (err) {
-      console.error("Error fetching entities:", err);
+      strapi.log.error("Error fetching entities:", err);
       throw err;
     }
   };
@@ -253,16 +254,16 @@ function useApi() {
     const { data } = await get(`/${PLUGIN_ID}/route/related?documentId=${relatedDocumentId}`);
     return data;
   };
-  const getRoutes = async () => {
+  const getRoute = async (documentId) => {
+    const { data } = await get(`/${PLUGIN_ID}/route/${documentId}`);
+    return data;
+  };
+  const getAllRoutes = async () => {
     const { data } = await get(`/${PLUGIN_ID}/route`);
     return data;
   };
-  const updateRoute = async (body, documentId) => {
-    const { data } = await put(`/${PLUGIN_ID}/route?documentId=${documentId}`, {
-      data: {
-        ...body
-      }
-    });
+  const getProhibitedRouteIds = async (documentId) => {
+    const { data } = await get(`/${PLUGIN_ID}/route/prohibitedIds/${documentId ? `${documentId}` : ""}`);
     return data;
   };
   const getNavigation = async ({ documentId, variant } = {}) => {
@@ -300,8 +301,9 @@ function useApi() {
     fetchConfiguredContentTypes,
     fetchAllEntities,
     getRelatedRoute,
-    getRoutes,
-    updateRoute,
+    getRoute,
+    getAllRoutes,
+    getProhibitedRouteIds,
     getNavigation,
     createNavigation,
     deleteNavigation,
@@ -371,6 +373,113 @@ function usePluginConfig() {
   }
   return { config, loading, fetchError, setConfig };
 }
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+async function duplicateCheck({
+  fetchFunction,
+  path,
+  routeDocumentId,
+  withoutTransform = false
+}) {
+  if (!path) throw new Error("URL is required");
+  try {
+    const pathToCheck = withoutTransform ? path : transformToUrl(path);
+    const { data } = await fetchFunction(`/${PLUGIN_ID}/checkUniquePath?path=${pathToCheck}${routeDocumentId ? `&targetRouteDocumentId=${routeDocumentId}` : ""}`);
+    if (!data.uniquePath) {
+      throw new Error("Network response was not ok");
+    }
+    return data.uniquePath;
+  } catch (err) {
+    throw new Error("Failed to check URL uniqueness: " + err.message);
+  }
+}
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+function PathInfo({ validationState, replacement }) {
+  const [color, setColor] = React.useState(null);
+  const [text, setText] = React.useState(null);
+  const { formatMessage } = reactIntl.useIntl();
+  React.useEffect(() => {
+    if (validationState === "initial") return;
+    if (validationState === "checking") {
+      setColor("neutral800");
+      setText(formatMessage({
+        id: getTranslation("components.pathInfo.checking"),
+        defaultMessage: "Checking if path is available..."
+      }));
+    } else if (validationState === "done") {
+      setColor(replacement ? "danger500" : "success500");
+      setText(replacement ? `${formatMessage({
+        id: getTranslation("components.pathInfo.notAvailable"),
+        defaultMessage: "Path is not available. Replaced with"
+      })} "${replacement}".` : formatMessage({
+        id: getTranslation("components.pathInfo.available"),
+        defaultMessage: "Path is available."
+      }));
+    }
+  }, [validationState, replacement, formatMessage]);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: color, children: text }) });
+}
+function OverrideCheckbox({ isOverride, setIsOverride, disabledCondition }) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Flex,
+    {
+      gap: 2,
+      paddingTop: 2,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Checkbox,
+        {
+          id: "path-override-checkbox",
+          checked: isOverride,
+          onCheckedChange: () => setIsOverride(!isOverride),
+          disabled: disabledCondition,
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+            id: getTranslation("components.CMEditViewAside.path.overrideCheckbox"),
+            defaultMessage: "Override automatic path generation"
+          }) })
+        }
+      )
+    }
+  );
+}
+function NewPathInfo() {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+    id: getTranslation("components.CMEditViewAside.path.newPathInfo"),
+    defaultMessage: "A new path will be created upon saving this entry."
+  }) });
+}
+function UidPathDisplay({ path }) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Field.Root,
+    {
+      hint: formatMessage({
+        id: getTranslation("components.CMEditViewAside.path.uidPath.hint"),
+        defaultMessage: "Permanent UID path, cannot be changed"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Field.Input,
+          {
+            value: path,
+            disabled: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+      ]
+    }
+  );
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -3670,70 +3779,132 @@ function Tooltip({ description: description2 }) {
     ) }) })
   ] }) });
 }
-function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-async function duplicateCheck(get, url, routeDocumentId) {
-  if (!url) throw new Error("URL is required");
-  try {
-    const { data } = await get(`/${PLUGIN_ID}/checkUniquePath?path=${transformToUrl(url)}${routeDocumentId ? `&targetRouteDocumentId=${routeDocumentId}` : ""}`);
-    if (!data.uniquePath) {
-      throw new Error("Network response was not ok");
+function PathInput({ path, dispatchPath, isOverride, config }) {
+  const { formatMessage } = reactIntl.useIntl();
+  const displayedPath = isOverride && path.overridePath !== void 0 ? path.overridePath : path.value ?? "";
+  const inputBorder = path.replacement === null ? "" : path.replacement ? "1px solid #ee5e52" : "1px solid #5cb176";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Field.Root,
+    {
+      hint: config.default ? formatMessage({
+        id: getTranslation("components.CMEditViewAside.path.input.start"),
+        defaultMessage: "Edit the"
+      }) + ' "' + config.default + '" ' + formatMessage({
+        id: getTranslation("components.CMEditViewAside.path.input.end"),
+        defaultMessage: "field to generate a path"
+      }) : formatMessage({
+        id: getTranslation("components.CMEditViewAside.path.input.noSourceField"),
+        defaultMessage: "Use the override option to set a custom path"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+          formatMessage({
+            id: getTranslation("components.CMEditViewAside.path.input.label"),
+            defaultMessage: "Path"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { description: formatMessage({
+            id: getTranslation("components.CMEditViewAside.path.input.tooltip"),
+            defaultMessage: "The following characters are valid: A-Z, a-z, 0-9, /, -, _, $, ., +, !, *, ', (, )"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Field.Input,
+          {
+            id: "path-input",
+            value: displayedPath,
+            onChange: (e) => dispatchPath({ type: "SET_OVERRIDEPATH", payload: e.target.value }),
+            disabled: !isOverride,
+            onBlur: (e) => {
+              if (e.target.value === path.prevValue) return;
+              dispatchPath({ type: "DEFAULT", payload: e.target.value });
+            },
+            style: { outline: inputBorder }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+      ]
     }
-    return data.uniquePath;
-  } catch (err) {
-    console.error("Error in duplicateCheck:", err);
-    throw new Error("Failed to check URL uniqueness");
-  }
+  );
 }
-const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
-function PathInfo({ validationState, replacement, setUrlStatus }) {
-  const [color, setColor] = React.useState(null);
-  const [text, setText] = React.useState(null);
+function RouteStructure({ routes, selectedParent, setSelectedParent, canonicalPath, prohibitedRouteIds }) {
   const { formatMessage } = reactIntl.useIntl();
-  React.useEffect(() => {
-    if (validationState === "initial") return;
-    if (validationState === "checking") {
-      setColor("neutral800");
-      setText(formatMessage({
-        id: getTranslation("components.pathInfo.checking"),
-        defaultMessage: "Checking if path is available..."
-      }));
-    } else if (validationState === "done") {
-      setColor(replacement ? "danger500" : "success500");
-      setText(replacement ? `${formatMessage({
-        id: getTranslation("components.pathInfo.notAvailable"),
-        defaultMessage: "Path is not available. Replaced with"
-      })} "${replacement}".` : formatMessage({
-        id: getTranslation("components.pathInfo.available"),
-        defaultMessage: "Path is available."
-      }));
-      if (setUrlStatus) setUrlStatus(replacement ? "invalid" : "valid");
-    }
-  }, [validationState, replacement, formatMessage, setUrlStatus]);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: color, children: text }) });
+  const sortedRoutes = React.useMemo(() => {
+    return [...routes].sort((a, b) => a.title.localeCompare(b.title));
+  }, [routes]);
+  const handleSelectParent = (value) => {
+    const parentRoute = routes.find((route) => route.documentId === value) || null;
+    setSelectedParent(parentRoute);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingBottom: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+        id: getTranslation("components.CMEditViewAside.path.input.parentSelect.label"),
+        defaultMessage: "Place under"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          value: selectedParent?.documentId || "",
+          onValueChange: handleSelectParent,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({
+              id: getTranslation("components.CMEditViewAside.path.input.parentSelect.rootPath"),
+              defaultMessage: "None (root path)"
+            }) }),
+            sortedRoutes.filter((route) => !prohibitedRouteIds?.includes(route.documentId) || route.documentId === selectedParent?.documentId).map(
+              (route) => /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.SingleSelectOption,
+                {
+                  value: route.documentId,
+                  children: route.title
+                },
+                route.documentId
+              )
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { marginTop: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+        formatMessage({
+          id: getTranslation("components.CMEditViewAside.canonicalPath.input.label"),
+          defaultMessage: "Canonical Path"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { description: formatMessage({
+          id: getTranslation("components.CMEditViewAside.canonicalPath.input.tooltip"),
+          defaultMessage: "The path determined by your content's natural hierarchy, independent of where it appears in navigation menus."
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          id: "canonicalPath-input",
+          value: canonicalPath,
+          disabled: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+    ] })
+  ] });
+}
+function getCanonicalPath(selectedParent, sourceFieldValue) {
+  const parentPath = selectedParent ? selectedParent.canonicalPath + "/" : "";
+  return `${parentPath}${transformToUrl(sourceFieldValue)}`;
 }
 function reducer(state, action) {
   switch (action.type) {
     case "DEFAULT":
       return {
         ...state,
-        value: transformToUrl(action.payload),
+        value: action.payload,
         prevValue: state.value,
         needsUrlCheck: true
       };
     case "NO_URL_CHECK":
       return {
         ...state,
-        value: transformToUrl(action.payload),
+        value: action.payload,
         prevValue: state.value,
         needsUrlCheck: false
       };
@@ -3746,16 +3917,22 @@ function reducer(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 };
+      return { ...state, uidPath: action.payload };
+    case "SET_CANONICALPATH":
+      return { ...state, canonicalPath: action.payload };
+    case "SET_OVERRIDEPATH":
+      return { ...state, overridePath: action.payload };
     default:
       throw new Error();
   }
 }
-const Path = ({ config }) => {
+const Panel = ({ config }) => {
   const { form, model } = admin.unstable_useContentManagerContext();
   const { initialValues, values, onChange } = form;
-  const { getRelatedRoute } = useApi();
+  const { getRelatedRoute, getAllRoutes, getProhibitedRouteIds } = useApi();
   const { formatMessage } = reactIntl.useIntl();
   const { get } = admin.useFetchClient();
   const { allowedActions: {
@@ -3775,26 +3952,39 @@ const Path = ({ config }) => {
       conditions: []
     }
   ]);
-  const [routeId, setRouteId] = React.useState();
+  const [route, setRoute] = React.useState(null);
+  const [routes, setRoutes] = React.useState([]);
+  const [prohibitedRouteIds, setProhibitedRouteIds] = React.useState([]);
+  const [selectedParent, setSelectedParent] = React.useState(null);
   const [isOverride, setIsOverride] = React.useState(false);
   const [validationState, setValidationState] = React.useState("initial");
-  const [replacement, setReplacement] = React.useState("");
   const [initialLoadComplete, setInitialLoadComplete] = React.useState(false);
-  const [urlIsValid, setUrlIsValid] = React.useState(null);
   const [path, dispatchPath] = React.useReducer(reducer, {
     needsUrlCheck: false,
     value: "",
     prevValue: "",
-    uIdPath: ""
+    replacement: null,
+    uidPath: "",
+    canonicalPath: "",
+    overridePath: ""
   });
   const hasUserChangedField = React.useRef(false);
   const initialPath = React.useRef("");
-  const prevValueRef = React.useRef(null);
-  const debouncedCheckUrl = React.useCallback(debounce(checkUrl, 250), []);
+  const prevSourceValueRef = React.useRef(null);
+  const sourceFieldValue = React.useMemo(() => {
+    const key = config?.default;
+    if (!key) return "";
+    const currentValue = values[key];
+    if (!currentValue) return "";
+    return currentValue;
+  }, [values, config]);
+  const debouncedCheckPath = React.useCallback(debounce(checkPath, 250), []);
+  const debouncedCheckCanonicalPath = React.useCallback(debounce(checkCanonicalPath, 250), []);
   React.useEffect(() => {
-    onChange("webatlas_path", path.value);
+    if (isOverride) onChange("webatlas_path", path.overridePath);
     onChange("webatlas_override", isOverride);
-  }, [path.value, isOverride]);
+    onChange("webatlas_parent", selectedParent?.documentId || null);
+  }, [path.value, path.overridePath, isOverride, selectedParent]);
   const debouncedValueEffect = React.useMemo(() => debounce((currentValues) => {
     const key = config?.default;
     if (!key) return;
@@ -3803,38 +3993,37 @@ const Path = ({ config }) => {
       dispatchPath({ type: "NO_URL_CHECK", payload: "" });
       return;
     }
-    if (initialLoadComplete && (hasUserChangedField.current || !routeId) && prevValueRef.current !== currentValue && !isOverride) {
-      const path2 = config.pattern ? `${config.pattern}/${currentValue}` : `${currentValue}`;
+    if (initialLoadComplete && (hasUserChangedField.current || !route) && prevSourceValueRef.current !== currentValue && !isOverride) {
+      const path2 = getCanonicalPath(selectedParent, currentValue);
       if (currentValue === initialValues[key]) {
         dispatchPath({ type: "NO_URL_CHECK", payload: path2 });
       } else {
         dispatchPath({ type: "DEFAULT", payload: path2 });
       }
-      prevValueRef.current = currentValue;
+      prevSourceValueRef.current = currentValue;
     }
-  }, 500), [config?.default, config?.pattern, initialValues, isOverride, initialLoadComplete, routeId]);
+  }, 500), [config?.default, initialValues, isOverride, initialLoadComplete, route, selectedParent]);
   React.useEffect(() => {
     const key = config?.default;
     if (!key) return;
     const currentValue = values[key];
     const initialValue = initialValues[key];
-    if (currentValue && !isOverride) {
-      const path2 = config.pattern ? `${config.pattern}/${currentValue}` : `${currentValue}`;
-      onChange("webatlas_path", transformToUrl(path2));
+    if (currentValue !== initialValue && currentValue && !isOverride) {
+      onChange("webatlas_path", transformToUrl(currentValue));
     }
     if (!initialLoadComplete) return;
     if (currentValue !== initialValue) {
       hasUserChangedField.current = true;
     }
     debouncedValueEffect(values);
-  }, [values, debouncedValueEffect, initialLoadComplete]);
+  }, [values, debouncedValueEffect, initialLoadComplete, selectedParent]);
   React.useEffect(() => {
     if (path.needsUrlCheck && path.value) {
-      if (path.uIdPath === path.value || initialPath.current === path.value) return;
-      debouncedCheckUrl(path.value);
+      if (path.uidPath === path.value || initialPath.current === path.value) return;
+      debouncedCheckPath(path.value, route?.documentId || null);
       dispatchPath({ type: "RESET_URL_CHECK_FLAG" });
     }
-  }, [path.needsUrlCheck]);
+  }, [path.needsUrlCheck, path.value, path.uidPath, route]);
   React.useEffect(() => {
     async function getTypes() {
       if (!initialValues.documentId) {
@@ -3842,42 +4031,84 @@ const Path = ({ config }) => {
         return;
       }
       try {
-        const route = await getRelatedRoute(initialValues.documentId);
-        if (!route) return;
-        initialPath.current = initialValues.webatlas_path || route.uidPath;
-        setRouteId(route.id);
-        setIsOverride(route.isOverride || false);
-        dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: route.path || "" });
-        dispatchPath({ type: "SET_UIDPATH", payload: route.uidPath || "" });
+        const route2 = await getRelatedRoute(initialValues.documentId);
+        if (!route2) return;
+        initialPath.current = initialValues.webatlas_path || route2.uidPath;
+        setRoute(route2);
+        setIsOverride(route2.isOverride || false);
+        if (route2.isOverride) {
+          dispatchPath({ type: "SET_OVERRIDEPATH", payload: route2.path || "" });
+        } else {
+          dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: route2.path || "" });
+        }
+        dispatchPath({ type: "SET_UIDPATH", payload: route2.uidPath || "" });
         const key = config?.default;
         if (key) {
-          prevValueRef.current = values[key];
+          prevSourceValueRef.current = values[key];
         }
       } catch (err) {
-        setRouteId(null);
-        console.log(err);
+        setRoute(null);
+        strapi.log.error(err);
       }
       setInitialLoadComplete(true);
     }
     getTypes();
   }, [config]);
+  React.useEffect(() => {
+    if (initialValues.webatlas_parent && routes.length > 0 && !selectedParent) {
+      const parentRoute = routes.find((route2) => route2.documentId === initialValues.webatlas_parent);
+      if (parentRoute) {
+        setSelectedParent(parentRoute);
+        const canonicalPath = getCanonicalPath(parentRoute, sourceFieldValue);
+        dispatchPath({ type: "DEFAULT", payload: canonicalPath });
+      }
+    }
+  }, [initialValues, routes]);
   React.useEffect(() => {
     if (initialValues.webatlas_path) dispatchPath({ type: "NO_URL_CHECK", payload: initialValues.webatlas_path });
     if (initialValues.webatlas_override) setIsOverride(initialValues.webatlas_override);
+    async function fetchAllRoutes() {
+      const allRoutes = await getAllRoutes();
+      setRoutes(allRoutes);
+    }
+    fetchAllRoutes();
   }, []);
-  async function checkUrl(url) {
-    if (!url) return;
+  React.useEffect(() => {
+    async function fetchProhibitedRouteIds() {
+      const prohibitedIds = await getProhibitedRouteIds(route?.documentId);
+      setProhibitedRouteIds(prohibitedIds);
+    }
+    fetchProhibitedRouteIds();
+  }, [route]);
+  React.useEffect(() => {
+    if (!sourceFieldValue) return;
+    const canonicalPath = getCanonicalPath(selectedParent, sourceFieldValue);
+    !isOverride && dispatchPath({ type: "DEFAULT", payload: canonicalPath });
+    dispatchPath({ type: "SET_CANONICALPATH", payload: canonicalPath });
+    debouncedCheckCanonicalPath(canonicalPath, route?.documentId || null);
+    dispatchPath({ type: "RESET_URL_CHECK_FLAG" });
+  }, [selectedParent, sourceFieldValue, route, isOverride]);
+  async function checkCanonicalPath(path2, documentId) {
+    if (!path2) return;
+    try {
+      const result = await duplicateCheck({ fetchFunction: get, path: path2, routeDocumentId: documentId, withoutTransform: true });
+      dispatchPath({ type: "SET_CANONICALPATH", payload: result });
+    } catch (err) {
+      strapi.log.error(err);
+    }
+  }
+  async function checkPath(path2, route2) {
+    if (!path2) return;
     setValidationState("checking");
-    setReplacement("");
+    dispatchPath({ type: "SET_REPLACEMENT", payload: "" });
     try {
-      const data = await duplicateCheck(get, url);
-      if (!data || data === url) return;
+      const data = await duplicateCheck({ fetchFunction: get, path: path2, routeDocumentId: route2, withoutTransform: true });
+      if (!data || data === path2) 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 {
-      setUrlIsValid(null);
       setValidationState("done");
     }
   }
@@ -3896,101 +4127,52 @@ const Path = ({ config }) => {
         {
           direction: "column",
           alignItems: "stretch",
-          gap: 4,
+          gap: 1,
           children: [
+            !route && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NewPathInfo, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { marginTop: 2, marginBottom: 2 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RouteStructure,
+              {
+                canonicalPath: path.canonicalPath,
+                routes,
+                selectedParent,
+                setSelectedParent,
+                prohibitedRouteIds
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { marginTop: 2, marginBottom: 2 }),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-              !routeId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", marginBottom: 2, children: formatMessage({
-                  id: getTranslation("components.CMEditViewAside.path.newPathInfo"),
-                  defaultMessage: "A new path will be created upon saving this entry."
-                }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                designSystem.Field.Root,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PathInput,
                 {
-                  hint: config.default ? formatMessage({
-                    id: getTranslation("components.CMEditViewAside.path.input.start"),
-                    defaultMessage: "Edit the"
-                  }) + ' "' + config.default + '" ' + formatMessage({
-                    id: getTranslation("components.CMEditViewAside.path.input.end"),
-                    defaultMessage: "field to generate a path"
-                  }) : formatMessage({
-                    id: getTranslation("components.CMEditViewAside.path.input.noSourceField"),
-                    defaultMessage: "Use the override option to set a custom path"
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
-                      formatMessage({
-                        id: getTranslation("components.CMEditViewAside.path.input.label"),
-                        defaultMessage: "Path"
-                      }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { description: formatMessage({
-                        id: getTranslation("components.CMEditViewAside.path.input.tooltip"),
-                        defaultMessage: "The following characters are valid: A-Z, a-z, 0-9, /, -, _, $, ., +, !, *, ', (, )"
-                      }) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.Field.Input,
-                      {
-                        id: "path-input",
-                        value: path.value,
-                        onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value }),
-                        disabled: !isOverride,
-                        onBlur: (e) => {
-                          if (e.target.value === path.prevValue) return;
-                          dispatchPath({ type: "DEFAULT", payload: e.target.value });
-                        },
-                        style: { outline: urlIsValid !== null ? urlIsValid === "valid" ? "1px solid #5cb176" : "1px solid #ee5e52" : void 0 }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
-                  ]
+                  path,
+                  dispatchPath,
+                  isOverride,
+                  config
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(PathInfo, { validationState, replacement, setUrlStatus: setUrlIsValid }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Flex,
+              validationState !== "initial" && /* @__PURE__ */ jsxRuntime.jsx(
+                PathInfo,
                 {
-                  gap: 2,
-                  paddingTop: 2,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Checkbox,
-                    {
-                      id: "path-override-checkbox",
-                      checked: isOverride,
-                      onCheckedChange: () => setIsOverride((prev) => !prev),
-                      disabled: !routeId && !canCreate || routeId && !canUpdate,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
-                        id: getTranslation("components.CMEditViewAside.path.overrideCheckbox"),
-                        defaultMessage: "Override automatic path generation"
-                      }) })
-                    }
-                  )
+                  validationState,
+                  replacement: path.replacement
                 }
               )
             ] }),
-            path.uIdPath && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                designSystem.Field.Root,
-                {
-                  hint: formatMessage({
-                    id: getTranslation("components.CMEditViewAside.path.uidPath.hint"),
-                    defaultMessage: "Permanent UID path, cannot be changed"
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.Field.Input,
-                      {
-                        value: path.uIdPath,
-                        disabled: true
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
-                  ]
-                }
-              ) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OverrideCheckbox,
+              {
+                isOverride,
+                setIsOverride,
+                disabledCondition: !canCreate && !canUpdate
+              }
+            ),
+            path.uidPath && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { marginTop: 2, marginBottom: 2 }),
+              /* @__PURE__ */ jsxRuntime.jsx(UidPathDisplay, { path: path.uidPath })
             ] })
           ]
         }
@@ -4005,14 +4187,7 @@ const pluginPermissions = {
   "settings.general": [{ action: `plugin::${PLUGIN_ID}.settings.general`, subject: null }],
   "settings.navigation": [{ action: `plugin::${PLUGIN_ID}.settings.navigation`, subject: null }]
 };
-const CMEditViewAside = ({
-  // activeTab,
-  // collectionType,
-  // document,
-  documentId,
-  // meta,
-  model
-}) => {
+const CMEditViewAside = ({ documentId, model }) => {
   const { contentTypes } = useAllContentTypes();
   const { config } = usePluginConfig();
   const { formatMessage } = reactIntl.useIntl();
@@ -4072,7 +4247,7 @@ const CMEditViewAside = ({
   });
   if (!canAside || !isAllowedContentType || !isActiveContentType || !contentTypeConfig) return null;
   if (!config) {
-    console.error("CMEditViewAside: Plugin is not configured.");
+    strapi.log.error("CMEditViewAside: Plugin is not configured.");
     return null;
   }
   if (isLoading) return {
@@ -4084,37 +4259,31 @@ const CMEditViewAside = ({
   };
   return {
     title: panelTitle,
-    content: /* @__PURE__ */ jsxRuntime.jsx(Path, { config: contentTypeConfig })
+    content: /* @__PURE__ */ jsxRuntime.jsx(Panel, { config: contentTypeConfig })
   };
 };
 const index = {
   register(app) {
     app.addMenuLink({
-      to: `/plugins/${PLUGIN_ID}/paths`,
+      to: `plugins/${PLUGIN_ID}/paths`,
       icon: PathIcon,
       intlLabel: {
         id: `${PLUGIN_ID}.link.paths`,
         defaultMessage: "Paths"
       },
-      Component: async () => {
-        const component = await Promise.resolve().then(() => require("./index-CC073vGB.js"));
-        return { default: component.default };
-      },
+      Component: () => Promise.resolve().then(() => require("./index-d09V61nm.js")),
       permissions: [
         pluginPermissions["page.routes"][0]
       ]
     });
     app.addMenuLink({
-      to: `/plugins/${PLUGIN_ID}/navigation`,
+      to: `plugins/${PLUGIN_ID}/navigation`,
       icon: NavigationIcon,
       intlLabel: {
         id: `${PLUGIN_ID}.link.navigation`,
         defaultMessage: "Navigation"
       },
-      Component: async () => {
-        const component = await Promise.resolve().then(() => require("./index-BkB1x9Sn.js"));
-        return { default: component.default };
-      },
+      Component: () => Promise.resolve().then(() => require("./index-IRSCe8PX.js")),
       permissions: [
         pluginPermissions["page.navigation"][0]
       ]
@@ -4133,13 +4302,8 @@ const index = {
           defaultMessage: "General"
         },
         id: `${PLUGIN_ID}-general`,
-        to: `/settings/${PLUGIN_ID}/general`,
-        Component: async () => {
-          return await Promise.resolve().then(() => require(
-            /* webpackChunkName: "webatlas-settings-general-page" */
-            "./index-BOZDZiAv.js"
-          ));
-        },
+        to: `${PLUGIN_ID}/general`,
+        Component: () => Promise.resolve().then(() => require("./index-BucL4va6.js")),
         permissions: [
           pluginPermissions["settings.general"][0]
         ]
@@ -4153,13 +4317,8 @@ const index = {
           defaultMessage: "Navigation"
         },
         id: `${PLUGIN_ID}-navigation`,
-        to: `/settings/${PLUGIN_ID}/navigation`,
-        Component: async () => {
-          return await Promise.resolve().then(() => require(
-            /* webpackChunkName: "webatlas-settings-navigation-page" */
-            "./index-m2ivL3ht.js"
-          ));
-        },
+        to: `${PLUGIN_ID}/navigation`,
+        Component: () => Promise.resolve().then(() => require("./index-D-vJE_K8.js")),
         permissions: [
           pluginPermissions["settings.navigation"][0]
         ]
@@ -4179,7 +4338,7 @@ const index = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => Promise.resolve().then(() => require("./de-CGXL_3o_.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-DWEd5BXK.js")) }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => Promise.resolve().then(() => require("./de-CqU1FU8C.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-C7I90FwV.js")) }), `./translations/${locale}.json`, 3);
           return { data, locale };
         } catch {
           return { data: {}, locale };
@@ -4198,7 +4357,6 @@ exports.duplicateCheck = duplicateCheck;
 exports.getTranslation = getTranslation;
 exports.index = index;
 exports.pluginPermissions = pluginPermissions;
-exports.transformToUrl = transformToUrl;
 exports.useAllContentTypes = useAllContentTypes;
 exports.useApi = useApi;
 exports.usePluginConfig = usePluginConfig;