xladmin 0.1.8 → 0.2.8

package/dist/index.js

@@ -45,11 +45,12 @@ function createXLAdminClient(transport) {
         payload != null ? payload : {}
       );
     },
-    async getChoices(slug, fieldName, q, ids) {
+    async getChoices(slug, fieldName, q, ids, options) {
       return await transportGet(
         transport,
         `/xladmin/models/${slug}/fields/${fieldName}/choices/`,
         {
+          signal: options == null ? void 0 : options.signal,
           params: {
             ...q ? { q } : {},
             ...ids && ids.length > 0 ? { ids: ids.join(",") } : {}
@@ -57,11 +58,12 @@ function createXLAdminClient(transport) {
         }
       );
     },
-    async getFilterChoices(slug, filterSlug, q, ids) {
+    async getFilterChoices(slug, filterSlug, q, ids, options) {
       return await transportGet(
         transport,
         `/xladmin/models/${slug}/filters/${filterSlug}/choices/`,
         {
+          signal: options == null ? void 0 : options.signal,
           params: {
             ...q ? { q } : {},
             ...ids && ids.length > 0 ? { ids: ids.join(",") } : {}
@@ -84,22 +86,22 @@ function createFetchXLAdminTransport(config) {
     throw new Error("Fetch API is not available in the current environment.");
   }
   return {
-    get: async (url, options) => await requestJson(fetchImpl, config, "GET", url, void 0, options == null ? void 0 : options.params),
-    post: async (url, body) => await requestJson(fetchImpl, config, "POST", url, body),
-    patch: async (url, body) => await requestJson(fetchImpl, config, "PATCH", url, body),
-    delete: async (url) => {
-      await requestRaw(fetchImpl, config, "DELETE", url);
+    get: async (url, options) => await requestJson(fetchImpl, config, "GET", url, void 0, options == null ? void 0 : options.params, options == null ? void 0 : options.signal),
+    post: async (url, body, options) => await requestJson(fetchImpl, config, "POST", url, body, void 0, options == null ? void 0 : options.signal),
+    patch: async (url, body, options) => await requestJson(fetchImpl, config, "PATCH", url, body, void 0, options == null ? void 0 : options.signal),
+    delete: async (url, options) => {
+      await requestRaw(fetchImpl, config, "DELETE", url, void 0, void 0, options == null ? void 0 : options.signal);
     }
   };
 }
 async function transportGet(transport, url, options) {
   return unwrapTransportResponse(await transport.get(url, options));
 }
-async function transportPost(transport, url, body) {
-  return unwrapTransportResponse(await transport.post(url, body));
+async function transportPost(transport, url, body, options) {
+  return unwrapTransportResponse(await transport.post(url, body, options));
 }
-async function transportPatch(transport, url, body) {
-  return unwrapTransportResponse(await transport.patch(url, body));
+async function transportPatch(transport, url, body, options) {
+  return unwrapTransportResponse(await transport.patch(url, body, options));
 }
 function unwrapTransportResponse(response) {
   if (isWrappedTransportResponse(response)) {
@@ -110,15 +112,16 @@ function unwrapTransportResponse(response) {
 function isWrappedTransportResponse(response) {
   return typeof response === "object" && response !== null && "data" in response;
 }
-async function requestJson(fetchImpl, config, method, url, body, params) {
-  const response = await requestRaw(fetchImpl, config, method, url, body, params);
+async function requestJson(fetchImpl, config, method, url, body, params, signal) {
+  const response = await requestRaw(fetchImpl, config, method, url, body, params, signal);
   return await response.json();
 }
-async function requestRaw(fetchImpl, config, method, url, body, params) {
+async function requestRaw(fetchImpl, config, method, url, body, params, signal) {
   var _a;
   const headers = await resolveHeaders(config.headers);
   const response = await fetchImpl(buildRequestUrl(config.baseUrl, url, params), {
     method,
+    signal,
     credentials: (_a = config.credentials) != null ? _a : "include",
     headers: {
       "Content-Type": "application/json",
@@ -134,6 +137,10 @@ async function requestRaw(fetchImpl, config, method, url, body, params) {
         detail = errorData.detail;
       }
     } catch {
+      const fallbackText = await response.text().catch(() => "");
+      if (fallbackText.trim()) {
+        detail = fallbackText.trim();
+      }
     }
     throw new Error(detail);
   }
@@ -175,9 +182,104 @@ function buildSearchParams(params) {
   return searchParams.toString();
 }
 
+// src/router.tsx
+import { createContext, useContext, useMemo, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+var XLAdminRouterContext = createContext(null);
+var browserRouterInstance = null;
+function XLAdminRouterProvider({ router, children }) {
+  return /* @__PURE__ */ jsx(XLAdminRouterContext.Provider, { value: router, children });
+}
+function createBrowserXLAdminRouter(browserWindow = window) {
+  return {
+    getLocation: () => ({
+      pathname: browserWindow.location.pathname,
+      search: browserWindow.location.search
+    }),
+    subscribe: (listener) => {
+      const handlePopState = () => listener();
+      browserWindow.addEventListener("popstate", handlePopState);
+      return () => {
+        browserWindow.removeEventListener("popstate", handlePopState);
+      };
+    },
+    push: (href) => {
+      browserWindow.history.pushState(browserWindow.history.state, "", href);
+      browserWindow.dispatchEvent(new PopStateEvent("popstate"));
+    },
+    replace: (href) => {
+      browserWindow.history.replaceState(browserWindow.history.state, "", href);
+      browserWindow.dispatchEvent(new PopStateEvent("popstate"));
+    },
+    back: () => {
+      browserWindow.history.back();
+    }
+  };
+}
+function useXLAdminRouter(router) {
+  const contextRouter = useContext(XLAdminRouterContext);
+  return useMemo(() => {
+    if (router) {
+      return router;
+    }
+    if (contextRouter) {
+      return contextRouter;
+    }
+    if (browserRouterInstance === null) {
+      browserRouterInstance = createBrowserXLAdminRouter();
+    }
+    return browserRouterInstance;
+  }, [contextRouter, router]);
+}
+function useXLAdminLocation(router) {
+  const resolvedRouter = useXLAdminRouter(router);
+  const snapshotRef = useRef(null);
+  const getSnapshot = useMemo(() => () => {
+    const nextLocation = resolvedRouter.getLocation();
+    const cachedLocation = snapshotRef.current;
+    if (cachedLocation !== null && cachedLocation.pathname === nextLocation.pathname && cachedLocation.search === nextLocation.search) {
+      return cachedLocation;
+    }
+    snapshotRef.current = nextLocation;
+    return nextLocation;
+  }, [resolvedRouter]);
+  return useSyncExternalStore(
+    resolvedRouter.subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+}
+function buildUrlWithParams(pathname, query, sort, page, filters) {
+  const params = new URLSearchParams();
+  if (query) {
+    params.set("q", query);
+  }
+  if (sort) {
+    params.set("sort", sort);
+  }
+  if (page > 1) {
+    params.set("page", String(page));
+  }
+  for (const [key, value] of Object.entries(filters)) {
+    if (value) {
+      params.set(key, value);
+    }
+  }
+  return params.toString() ? `${pathname}?${params.toString()}` : pathname;
+}
+function handleNavLinkClick(event, { href, onClick, router }) {
+  onClick == null ? void 0 : onClick();
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  router.push(href);
+}
+
 // src/components/FormDialog.tsx
-import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
 import {
+  Alert,
   Box,
   Button,
   Dialog,
@@ -189,8 +291,8 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
 // src/i18n.tsx
-import { createContext, useContext, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var messages = {
   ru: {
     admin_title: "Admin",
@@ -301,7 +403,7 @@ var messages = {
     staff_only: "Only staff users can access the admin."
   }
 };
-var AdminLocaleContext = createContext("ru");
+var AdminLocaleContext = createContext2("ru");
 function normalizeAdminLocale(locale) {
   return locale === "en" ? "en" : "ru";
 }
@@ -314,15 +416,15 @@ function translateAdmin(locale, key, params) {
   });
 }
 function AdminLocaleProvider({ locale, children }) {
-  const normalizedLocale = useMemo(() => normalizeAdminLocale(locale), [locale]);
-  return /* @__PURE__ */ jsx(AdminLocaleContext.Provider, { value: normalizedLocale, children });
+  const normalizedLocale = useMemo2(() => normalizeAdminLocale(locale), [locale]);
+  return /* @__PURE__ */ jsx2(AdminLocaleContext.Provider, { value: normalizedLocale, children });
 }
 function useAdminLocale() {
-  return normalizeAdminLocale(useContext(AdminLocaleContext));
+  return normalizeAdminLocale(useContext2(AdminLocaleContext));
 }
 function useAdminTranslation() {
   const locale = useAdminLocale();
-  return useMemo(() => ((key, params) => translateAdmin(locale, key, params)), [locale]);
+  return useMemo2(() => ((key, params) => translateAdmin(locale, key, params)), [locale]);
 }
 
 // src/utils/adminFields.ts
@@ -475,7 +577,7 @@ function trimAdminValue(value, maxLength) {
 }
 
 // src/components/FieldEditor.tsx
-import { memo, useEffect, useMemo as useMemo2, useState } from "react";
+import { memo, useCallback, useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
 import {
   Autocomplete,
   CircularProgress,
@@ -485,7 +587,93 @@ import {
 } from "@mui/material";
 import { DatePicker, DateTimePicker } from "@mui/x-date-pickers";
 import dayjs from "dayjs";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+
+// src/hooks/useRemoteChoices.ts
+import { useEffect, useRef as useRef2, useState } from "react";
+function useRemoteChoices({
+  enabled,
+  debounceMs = 250,
+  initialItems = [],
+  resetKey,
+  queryKey,
+  load,
+  merge
+}) {
+  const [items, setItems] = useState(initialItems);
+  const [isLoading, setIsLoading] = useState(false);
+  const previousResetKeyRef = useRef2(resetKey);
+  useEffect(() => {
+    if (previousResetKeyRef.current !== resetKey) {
+      previousResetKeyRef.current = resetKey;
+      setItems(initialItems);
+      setIsLoading(false);
+      return;
+    }
+    setItems((currentItems) => {
+      if (areChoiceArraysShallowEqual(currentItems, initialItems)) {
+        return currentItems;
+      }
+      if (currentItems.length > 0 && initialItems.length === 0) {
+        return currentItems;
+      }
+      return initialItems;
+    });
+  }, [initialItems, resetKey]);
+  useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    const controller = new AbortController();
+    const timeoutId = window.setTimeout(() => {
+      setIsLoading(true);
+      load(controller.signal).then((nextItems) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setItems((current) => merge ? merge(current, nextItems) : nextItems);
+      }).catch((reason) => {
+        if (isAbortReason(reason) || controller.signal.aborted) {
+          return;
+        }
+        setItems((current) => current);
+      }).finally(() => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setIsLoading(false);
+      });
+    }, debounceMs);
+    return () => {
+      controller.abort();
+      window.clearTimeout(timeoutId);
+    };
+  }, [debounceMs, enabled, load, merge, queryKey]);
+  return { items, isLoading };
+}
+function areChoiceArraysShallowEqual(left, right) {
+  if (left === right) {
+    return true;
+  }
+  if (left.length !== right.length) {
+    return false;
+  }
+  for (let index = 0; index < left.length; index += 1) {
+    if (!Object.is(left[index], right[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function isAbortReason(reason) {
+  if (reason instanceof DOMException && reason.name === "AbortError") {
+    return true;
+  }
+  return typeof reason === "object" && reason !== null && "name" in reason && reason.name === "AbortError";
+}
+
+// src/components/FieldEditor.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FieldEditor = memo(function FieldEditor2({
   field,
   value,
@@ -496,45 +684,44 @@ var FieldEditor = memo(function FieldEditor2({
 }) {
   var _a, _b, _c, _d;
   const t = useAdminTranslation();
-  const [choices, setChoices] = useState([]);
-  const [searchValue, setSearchValue] = useState("");
-  const [isLoadingChoices, setIsLoadingChoices] = useState(false);
-  const [jsonTextValue, setJsonTextValue] = useState(() => stringifyJsonValue(value));
-  const [jsonError, setJsonError] = useState(null);
-  const selectedIds = useMemo2(() => normalizeSelectedIds(value, field.is_relation_many), [field.is_relation_many, value]);
-  useEffect(() => {
+  const [searchValue, setSearchValue] = useState2("");
+  const [jsonTextValue, setJsonTextValue] = useState2(() => stringifyJsonValue(value));
+  const [jsonError, setJsonError] = useState2(null);
+  const selectedIds = useMemo3(() => normalizeSelectedIds(value, field.is_relation_many), [field.is_relation_many, value]);
+  const loadChoices = useCallback(
+    async (signal) => {
+      const response = await client.getChoices(
+        slug,
+        field.name,
+        searchValue || void 0,
+        selectedIds,
+        { signal }
+      );
+      return response.items;
+    },
+    [client, field.name, searchValue, selectedIds, slug]
+  );
+  const { items: choices, isLoading: isLoadingChoices } = useRemoteChoices({
+    enabled: field.has_choices,
+    debounceMs: 250,
+    initialItems: [],
+    resetKey: `${slug}:${field.name}`,
+    queryKey: `${slug}:${field.name}:${searchValue}:${selectedIds.join(",")}`,
+    load: loadChoices,
+    merge: mergeChoices
+  });
+  useEffect2(() => {
     if (field.input_kind !== "json") {
       return;
     }
     setJsonTextValue(stringifyJsonValue(value));
     setJsonError(null);
   }, [field.input_kind, value]);
-  useEffect(() => {
-    if (!field.has_choices) {
-      setChoices([]);
-      return;
-    }
-    let isMounted = true;
-    setIsLoadingChoices(true);
-    client.getChoices(slug, field.name, searchValue || void 0, selectedIds).then((response) => {
-      if (!isMounted) return;
-      setChoices((current) => mergeChoices(current, response.items));
-    }).catch(() => {
-      if (!isMounted) return;
-      setChoices((current) => current);
-    }).finally(() => {
-      if (!isMounted) return;
-      setIsLoadingChoices(false);
-    });
-    return () => {
-      isMounted = false;
-    };
-  }, [client, field.has_choices, field.name, searchValue, selectedIds, slug]);
   if (field.input_kind === "boolean") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       FormControlLabel,
       {
-        control: /* @__PURE__ */ jsx2(
+        control: /* @__PURE__ */ jsx3(
           Switch,
           {
             checked: Boolean(value),
@@ -547,7 +734,7 @@ var FieldEditor = memo(function FieldEditor2({
     );
   }
   if (field.input_kind === "date") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       DatePicker,
       {
         label: field.label,
@@ -569,13 +756,13 @@ var FieldEditor = memo(function FieldEditor2({
     );
   }
   if (field.input_kind === "datetime") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       DateTimePicker,
       {
         label: field.label,
         disabled: readOnly,
         value: value ? dayjs(String(value)) : null,
-        onChange: (nextValue) => onChange(nextValue ? nextValue.toISOString() : null),
+        onChange: (nextValue) => onChange(nextValue ? nextValue.format("YYYY-MM-DD[T]HH:mm:ss") : null),
         slotProps: {
           popper: { disablePortal: true },
           desktopPaper: buildPickerPaperProps(),
@@ -603,7 +790,7 @@ var FieldEditor = memo(function FieldEditor2({
     });
   }
   if (field.input_kind === "json") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       TextField,
       {
         label: field.label,
@@ -636,7 +823,7 @@ var FieldEditor = memo(function FieldEditor2({
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     TextField,
     {
       label: field.label,
@@ -675,7 +862,7 @@ function renderChoiceEditor({
     };
   });
   if (field.is_relation_many || field.input_kind === "relation-multiple") {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       Autocomplete,
       {
         multiple: true,
@@ -701,36 +888,37 @@ function renderChoiceEditor({
           },
           listbox: { sx: { maxHeight: 240 } }
         },
-        renderInput: (params) => {
+        renderInput: (params) => (() => {
           var _a2;
-          return /* @__PURE__ */ jsx2(
+          const { InputProps, inputProps, ...textFieldParams } = params;
+          return /* @__PURE__ */ jsx3(
             TextField,
             {
-              ...params,
+              ...textFieldParams,
               label: field.label,
               placeholder: searchPlaceholder,
               helperText: (_a2 = field.help_text) != null ? _a2 : void 0,
               slotProps: {
                 input: {
-                  ...params.InputProps,
+                  ...InputProps,
                   endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                    isLoadingChoices ? /* @__PURE__ */ jsx2(CircularProgress, { color: "inherit", size: 16 }) : null,
-                    params.InputProps.endAdornment
+                    isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
+                    InputProps.endAdornment
                   ] })
                 },
                 htmlInput: {
-                  ...params.inputProps,
+                  ...inputProps,
                   autoComplete: "new-password",
                   name: `admin-choice-${field.name}`
                 }
               }
             }
           );
-        }
+        })()
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     Autocomplete,
     {
       options: choices,
@@ -758,32 +946,33 @@ function renderChoiceEditor({
         },
         listbox: { sx: { maxHeight: 240 } }
       },
-      renderInput: (params) => {
+      renderInput: (params) => (() => {
         var _a2;
-        return /* @__PURE__ */ jsx2(
+        const { InputProps, inputProps, ...textFieldParams } = params;
+        return /* @__PURE__ */ jsx3(
           TextField,
           {
-            ...params,
+            ...textFieldParams,
             label: field.label,
             placeholder: searchPlaceholder,
             helperText: (_a2 = field.help_text) != null ? _a2 : void 0,
             slotProps: {
               input: {
-                ...params.InputProps,
+                ...InputProps,
                 endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  isLoadingChoices ? /* @__PURE__ */ jsx2(CircularProgress, { color: "inherit", size: 16 }) : null,
-                  params.InputProps.endAdornment
+                  isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
+                  InputProps.endAdornment
                 ] })
               },
               htmlInput: {
-                ...params.inputProps,
+                ...inputProps,
                 autoComplete: "new-password",
                 name: `admin-choice-${field.name}`
               }
             }
           }
         );
-      }
+      })()
     }
   );
 }
@@ -847,7 +1036,7 @@ function stringifyJsonValue(value) {
 }
 
 // src/components/FormDialog.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function FormDialog({
   open,
   onClose,
@@ -860,27 +1049,43 @@ function FormDialog({
   initialValues,
   itemId
 }) {
-  const [values, setValues] = useState2({});
-  const editableFieldNames = useMemo3(
+  const t = useAdminTranslation();
+  const [values, setValues] = useState3({});
+  const [error, setError] = useState3(null);
+  const [isSaving, setIsSaving] = useState3(false);
+  const editableFieldNames = useMemo4(
     () => mode === "create" ? meta.create_fields : meta.update_fields,
     [meta.create_fields, meta.update_fields, mode]
   );
-  const editableFields = useMemo3(
+  const editableFields = useMemo4(
     () => meta.fields.filter((field) => editableFieldNames.includes(field.name)),
     [editableFieldNames, meta.fields]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setValues(initialValues != null ? initialValues : {});
+    setError(null);
+    setIsSaving(false);
   }, [initialValues, open]);
   const handleSave = async () => {
+    if (isSaving) {
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
     const payload = buildAdminPayload(values, editableFields);
-    if (mode === "create") {
-      await client.createItem(slug, payload);
-    } else if (itemId !== void 0) {
-      await client.patchItem(slug, itemId, payload);
+    try {
+      if (mode === "create") {
+        await client.createItem(slug, payload);
+      } else if (itemId !== void 0) {
+        await client.patchItem(slug, itemId, payload);
+      }
+      onSuccess();
+      onClose();
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : t("object_save_error"));
+    } finally {
+      setIsSaving(false);
     }
-    onSuccess();
-    onClose();
   };
   return /* @__PURE__ */ jsxs2(
     Dialog,
@@ -904,23 +1109,26 @@ function FormDialog({
         }
       },
       children: [
-        /* @__PURE__ */ jsx3(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsx3(DialogContent, { children: /* @__PURE__ */ jsx3(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx3(Box, { sx: { display: "grid", gap: 2, pt: 1 }, children: editableFields.map((field) => /* @__PURE__ */ jsx3(
-          FieldEditor,
-          {
-            field,
-            value: values[field.name],
-            slug,
-            client,
-            onChange: (nextValue) => {
-              setValues((current) => ({ ...current, [field.name]: nextValue }));
-            }
-          },
-          field.name
-        )) }) }) }),
+        /* @__PURE__ */ jsx4(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsx4(DialogContent, { children: /* @__PURE__ */ jsx4(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: meta.locale, children: /* @__PURE__ */ jsxs2(Box, { sx: { display: "grid", gap: 2, pt: 1 }, children: [
+          error ? /* @__PURE__ */ jsx4(Alert, { severity: "error", children: error }) : null,
+          editableFields.map((field) => /* @__PURE__ */ jsx4(
+            FieldEditor,
+            {
+              field,
+              value: values[field.name],
+              slug,
+              client,
+              onChange: (nextValue) => {
+                setValues((current) => ({ ...current, [field.name]: nextValue }));
+              }
+            },
+            field.name
+          ))
+        ] }) }) }),
         /* @__PURE__ */ jsxs2(DialogActions, { children: [
-          /* @__PURE__ */ jsx3(Button, { onClick: onClose, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }),
-          /* @__PURE__ */ jsx3(Button, { variant: "contained", onClick: handleSave, children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })
+          /* @__PURE__ */ jsx4(Button, { onClick: onClose, disabled: isSaving, children: t("cancel") }),
+          /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: () => void handleSave(), disabled: isSaving, children: isSaving ? t("saving") : t("save") })
         ] })
       ]
     }
@@ -928,13 +1136,13 @@ function FormDialog({
 }
 
 // src/components/OverviewPage.tsx
-import { useEffect as useEffect5, useMemo as useMemo5, useState as useState5 } from "react";
-import { Alert as Alert2, Box as Box5, Grid, Paper as Paper3, Skeleton as Skeleton2, Stack as Stack5 } from "@mui/material";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
+import { Alert as Alert3, Box as Box5, Grid, Paper as Paper3, Skeleton as Skeleton2, Stack as Stack5 } from "@mui/material";
 
 // src/hooks/useAdminDocumentTitle.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 function useAdminDocumentTitle(...parts) {
-  useEffect3(() => {
+  useEffect4(() => {
     const title = parts.map((part) => part == null ? void 0 : part.trim()).filter((part) => Boolean(part)).join(" | ");
     if (!title) {
       return;
@@ -944,23 +1152,23 @@ function useAdminDocumentTitle(...parts) {
 }
 
 // src/components/layout/AdminDataContext.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var defaultAdminDataContextValue = {
   locale: "ru",
   models: [],
   blocks: []
 };
-var AdminDataContext = createContext2(defaultAdminDataContextValue);
+var AdminDataContext = createContext3(defaultAdminDataContextValue);
 function AdminDataProvider({ value, children }) {
-  return /* @__PURE__ */ jsx4(AdminDataContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx5(AdminDataContext.Provider, { value, children });
 }
 function useAdminData() {
-  return useContext2(AdminDataContext);
+  return useContext3(AdminDataContext);
 }
 
 // src/components/ModelsBlocks.tsx
-import { memo as memo2, useMemo as useMemo4 } from "react";
+import { memo as memo2, useMemo as useMemo5 } from "react";
 import { Box as Box3, Stack as Stack3, useMediaQuery, useTheme } from "@mui/material";
 
 // src/components/models-blocks/DashboardModelsBlock.tsx
@@ -977,10 +1185,10 @@ import {
 
 // src/components/models-blocks/BlockTitle.tsx
 import { Stack, Typography } from "@mui/material";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function BlockTitle({ block, compact = false }) {
   return /* @__PURE__ */ jsxs3(Stack, { spacing: 0.25, children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       Typography,
       {
         variant: compact ? "subtitle1" : "h6",
@@ -992,7 +1200,7 @@ function BlockTitle({ block, compact = false }) {
         children: block.title
       }
     ),
-    block.description && !compact ? /* @__PURE__ */ jsx5(Typography, { color: "text.secondary", sx: { fontSize: compact ? 12 : 14, lineHeight: 1.3 }, children: block.description }) : null
+    block.description && !compact ? /* @__PURE__ */ jsx6(Typography, { color: "text.secondary", sx: { fontSize: compact ? 12 : 14, lineHeight: 1.3 }, children: block.description }) : null
   ] });
 }
 
@@ -1023,11 +1231,11 @@ function getBlockSurfaceSx(block, variant) {
 }
 
 // src/components/models-blocks/useBlockExpandedState.ts
-import { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4 } from "react";
 var STORAGE_KEY_PREFIX = "xladmin.models-block.expanded";
 function useBlockExpandedState(blockSlug, defaultExpanded) {
-  const [isExpanded, setIsExpanded] = useState3(defaultExpanded);
-  useEffect4(() => {
+  const [isExpanded, setIsExpanded] = useState4(defaultExpanded);
+  useEffect5(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -1038,7 +1246,7 @@ function useBlockExpandedState(blockSlug, defaultExpanded) {
     }
     setIsExpanded(rawValue === "true");
   }, [blockSlug, defaultExpanded]);
-  const updateExpanded = useCallback((nextExpanded) => {
+  const updateExpanded = useCallback2((nextExpanded) => {
     setIsExpanded(nextExpanded);
     if (typeof window !== "undefined") {
       window.localStorage.setItem(getStorageKey(blockSlug), String(nextExpanded));
@@ -1051,14 +1259,23 @@ function getStorageKey(blockSlug) {
 }
 
 // src/components/NavLink.tsx
-import Link from "next/link.js";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function NavLink({ href, children, style, title, onClick }) {
-  return /* @__PURE__ */ jsx6(Link, { href, style, title, onClick, children });
+import { jsx as jsx7 } from "react/jsx-runtime";
+function NavLink({ href, children, style, title, onClick, router }) {
+  const resolvedRouter = useXLAdminRouter(router);
+  return /* @__PURE__ */ jsx7(
+    "a",
+    {
+      href,
+      style,
+      title,
+      onClick: (event) => handleNavLinkClick(event, { href, onClick, router: resolvedRouter }),
+      children
+    }
+  );
 }
 
 // src/components/models-blocks/DashboardModelsBlock.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function DashboardModelsBlock({ block, basePath }) {
   const [isExpanded, setIsExpanded] = useBlockExpandedState(block.slug, block.default_expanded);
   return /* @__PURE__ */ jsxs4(
@@ -1077,10 +1294,10 @@ function DashboardModelsBlock({ block, basePath }) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           AccordionSummary,
           {
-            expandIcon: block.collapsible ? /* @__PURE__ */ jsx7(ExpandMoreIcon, { fontSize: "small" }) : void 0,
+            expandIcon: block.collapsible ? /* @__PURE__ */ jsx8(ExpandMoreIcon, { fontSize: "small" }) : void 0,
             sx: {
               minHeight: "48px",
               pr: 1.75,
@@ -1102,33 +1319,41 @@ function DashboardModelsBlock({ block, basePath }) {
                 mb: 1.05
               }
             },
-            children: /* @__PURE__ */ jsx7(BlockTitle, { block })
+            children: /* @__PURE__ */ jsx8(BlockTitle, { block })
           }
         ),
-        /* @__PURE__ */ jsx7(AccordionDetails, { sx: { px: 1.35, pb: 1.35, pt: 0 }, children: /* @__PURE__ */ jsx7(Stack2, { spacing: 0.5, sx: { px: 0.4 }, children: block.models.map((model) => /* @__PURE__ */ jsx7(NavLink, { href: `${basePath}/${model.slug}`, style: { textDecoration: "none", display: "block" }, children: /* @__PURE__ */ jsx7(
-          ButtonBase,
+        /* @__PURE__ */ jsx8(AccordionDetails, { sx: { px: 1.35, pb: 1.35, pt: 0 }, children: /* @__PURE__ */ jsx8(Stack2, { spacing: 0.5, sx: { px: 0.4 }, children: block.models.map((model) => /* @__PURE__ */ jsx8(
+          NavLink,
           {
-            sx: {
-              width: "100%",
-              textAlign: "left",
-              display: "block",
-              borderRadius: "8px",
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsx7(
-              ListItemButton,
+            href: `${basePath}/${model.slug}`,
+            style: { textDecoration: "none", display: "block" },
+            children: /* @__PURE__ */ jsx8(
+              ButtonBase,
               {
                 sx: {
+                  width: "100%",
+                  textAlign: "left",
+                  display: "block",
                   borderRadius: "8px",
-                  minHeight: 42,
-                  px: 1.25,
-                  py: 0.4
+                  overflow: "hidden"
                 },
-                children: /* @__PURE__ */ jsx7(ListItemText, { primary: model.title })
+                children: /* @__PURE__ */ jsx8(
+                  ListItemButton,
+                  {
+                    sx: {
+                      borderRadius: "8px",
+                      minHeight: 42,
+                      px: 1.25,
+                      py: 0.4
+                    },
+                    children: /* @__PURE__ */ jsx8(ListItemText, { primary: model.title })
+                  }
+                )
               }
             )
-          }
-        ) }, model.slug)) }) })
+          },
+          model.slug
+        )) }) })
       ]
     }
   );
@@ -1146,7 +1371,7 @@ import {
   ListItemText as ListItemText2,
   Paper
 } from "@mui/material";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function SidebarModelsBlock({ block, basePath, activeModelSlug, onModelNavigate }) {
   const [isExpanded, setIsExpanded] = useBlockExpandedState(block.slug, block.default_expanded);
   if (block.collapsible) {
@@ -1166,10 +1391,10 @@ function SidebarModelsBlock({ block, basePath, activeModelSlug, onModelNavigate
           }
         },
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             AccordionSummary2,
             {
-              expandIcon: /* @__PURE__ */ jsx8(ExpandMoreIcon2, { fontSize: "small" }),
+              expandIcon: /* @__PURE__ */ jsx9(ExpandMoreIcon2, { fontSize: "small" }),
               sx: {
                 minHeight: "42px",
                 pr: 1.25,
@@ -1185,10 +1410,10 @@ function SidebarModelsBlock({ block, basePath, activeModelSlug, onModelNavigate
                   my: 0
                 }
               },
-              children: /* @__PURE__ */ jsx8(BlockTitle, { block, compact: true })
+              children: /* @__PURE__ */ jsx9(BlockTitle, { block, compact: true })
             }
           ),
-          /* @__PURE__ */ jsx8(AccordionDetails2, { sx: { p: 0 }, children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(AccordionDetails2, { sx: { p: 0 }, children: /* @__PURE__ */ jsx9(
             SidebarModelsList,
             {
               models: block.models,
@@ -1210,8 +1435,8 @@ function SidebarModelsBlock({ block, basePath, activeModelSlug, onModelNavigate
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx8(Box2, { sx: { px: 1.25, py: 1 }, children: /* @__PURE__ */ jsx8(BlockTitle, { block, compact: true }) }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(Box2, { sx: { px: 1.25, py: 1 }, children: /* @__PURE__ */ jsx9(BlockTitle, { block, compact: true }) }),
+        /* @__PURE__ */ jsx9(
           SidebarModelsList,
           {
             models: block.models,
@@ -1225,16 +1450,16 @@ function SidebarModelsBlock({ block, basePath, activeModelSlug, onModelNavigate
   );
 }
 function SidebarModelsList({ models, basePath, activeModelSlug, onModelNavigate }) {
-  return /* @__PURE__ */ jsx8(List, { dense: true, disablePadding: true, sx: { display: "flex", flexDirection: "column", gap: 0.5, p: 1.35 }, children: models.map((model) => {
+  return /* @__PURE__ */ jsx9(List, { dense: true, disablePadding: true, sx: { display: "flex", flexDirection: "column", gap: 0.5, p: 1.35 }, children: models.map((model) => {
     const href = `${basePath}/${model.slug}`;
     const isActive = activeModelSlug === model.slug;
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       NavLink,
       {
         href,
         style: { textDecoration: "none", display: "block" },
         onClick: () => onModelNavigate == null ? void 0 : onModelNavigate(href),
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           ListItemButton2,
           {
             selected: isActive,
@@ -1253,7 +1478,7 @@ function SidebarModelsList({ models, basePath, activeModelSlug, onModelNavigate
                 backgroundColor: "rgba(255, 255, 255, 0.2)"
               }
             },
-            children: /* @__PURE__ */ jsx8(ListItemText2, { primary: model.title })
+            children: /* @__PURE__ */ jsx9(ListItemText2, { primary: model.title })
           }
         )
       },
@@ -1263,7 +1488,7 @@ function SidebarModelsList({ models, basePath, activeModelSlug, onModelNavigate
 }
 
 // src/components/ModelsBlocks.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ModelsBlocks = memo2(function ModelsBlocks2({
   basePath,
   models,
@@ -1276,7 +1501,7 @@ var ModelsBlocks = memo2(function ModelsBlocks2({
   const theme = useTheme();
   const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
   const isXlUp = useMediaQuery(theme.breakpoints.up("xl"));
-  const normalizedBlocks = useMemo4(() => [
+  const normalizedBlocks = useMemo5(() => [
     ...blocks,
     {
       slug: "all-models",
@@ -1289,12 +1514,12 @@ var ModelsBlocks = memo2(function ModelsBlocks2({
       isAllModels: true
     }
   ], [blocks, models, t, variant]);
-  const dashboardColumns = useMemo4(() => {
+  const dashboardColumns = useMemo5(() => {
     const columnCount = isXlUp ? 3 : isMdUp ? 2 : 1;
     return distributeBlocksByHeight(normalizedBlocks, columnCount);
   }, [isMdUp, isXlUp, normalizedBlocks]);
   if (variant === "sidebar") {
-    return /* @__PURE__ */ jsx9(Stack3, { spacing: 1, children: normalizedBlocks.map((block) => /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(Stack3, { spacing: 1, children: normalizedBlocks.map((block) => /* @__PURE__ */ jsx10(
       SidebarModelsBlock,
       {
         block,
@@ -1305,7 +1530,7 @@ var ModelsBlocks = memo2(function ModelsBlocks2({
       block.slug
     )) });
   }
-  return /* @__PURE__ */ jsx9(Box3, { sx: { display: "flex", gap: 2, alignItems: "flex-start" }, children: dashboardColumns.map((column, columnIndex) => /* @__PURE__ */ jsx9(Box3, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx9(Stack3, { spacing: 2, children: column.map((block) => /* @__PURE__ */ jsx9(DashboardModelsBlock, { block, basePath }, block.slug)) }) }, columnIndex)) });
+  return /* @__PURE__ */ jsx10(Box3, { sx: { display: "flex", gap: 2, alignItems: "flex-start" }, children: dashboardColumns.map((column, columnIndex) => /* @__PURE__ */ jsx10(Box3, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx10(Stack3, { spacing: 2, children: column.map((block) => /* @__PURE__ */ jsx10(DashboardModelsBlock, { block, basePath }, block.slug)) }) }, columnIndex)) });
 });
 function distributeBlocksByHeight(blocks, columnCount) {
   const columns = Array.from({ length: columnCount }, () => []);
@@ -1327,15 +1552,15 @@ function getBlockWeight(block) {
 }
 
 // src/components/layout/MainHeader.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import MenuIcon from "@mui/icons-material/Menu";
 import { Box as Box4 } from "@mui/material";
 import ExpandMoreIcon3 from "@mui/icons-material/ExpandMore";
-import { Alert, Collapse, IconButton, Paper as Paper2, Skeleton, Stack as Stack4, Typography as Typography2 } from "@mui/material";
+import { Alert as Alert2, Collapse, IconButton, Paper as Paper2, Skeleton, Stack as Stack4, Typography as Typography2 } from "@mui/material";
 
 // src/components/layout/ShellContext.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var defaultShellContextValue = {
   isMobile: false,
   openMobileSidebar: () => {
@@ -1345,19 +1570,19 @@ var defaultShellContextValue = {
   startPendingNavigation: () => {
   }
 };
-var ShellContext = createContext3(defaultShellContextValue);
+var ShellContext = createContext4(defaultShellContextValue);
 function ShellContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx10(ShellContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx11(ShellContext.Provider, { value, children });
 }
 function useShellContext() {
-  return useContext3(ShellContext);
+  return useContext4(ShellContext);
 }
 
 // src/components/layout/MainHeader.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var MAIN_HEADER_PADDING_X = 2.5;
 var MAIN_HEADER_PADDING_T = 1.35;
 var MAIN_HEADER_PADDING_B = 1.8;
@@ -1366,7 +1591,7 @@ var MAIN_HEADER_SUBTITLE_HEIGHT = 16;
 function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtitle, actions }) {
   const t = useAdminTranslation();
   const { isMobile, openMobileSidebar } = useShellContext();
-  const [isDetailsOpen, setIsDetailsOpen] = useState4(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState5(false);
   return /* @__PURE__ */ jsxs6(
     Paper2,
     {
@@ -1382,68 +1607,88 @@ function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtit
       },
       children: [
         /* @__PURE__ */ jsxs6(Stack4, { spacing: 0.5, children: [
-          /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 1.5, alignItems: "center", justifyContent: "space-between", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-              isMobile ? /* @__PURE__ */ jsx11(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx11(
-                IconButton,
-                {
-                  "aria-label": t("menu"),
-                  onClick: openMobileSidebar,
-                  size: "small",
-                  sx: { ml: -0.5 },
-                  children: /* @__PURE__ */ jsx11(MenuIcon, { fontSize: "small" })
-                }
-              ) }) : null,
-              beforeTitle ? /* @__PURE__ */ jsx11(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
-              /* @__PURE__ */ jsx11(
-                Typography2,
-                {
-                  variant: "h5",
-                  sx: {
-                    fontWeight: 600,
-                    lineHeight: "2.125rem",
-                    minWidth: 0
-                  },
-                  children: title
-                }
-              )
-            ] }),
-            actions ? /* @__PURE__ */ jsx11(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
-          ] }),
+          /* @__PURE__ */ jsxs6(
+            Stack4,
+            {
+              direction: "row",
+              spacing: 1.5,
+              alignItems: "center",
+              justifyContent: "space-between",
+              sx: { minWidth: 0 },
+              children: [
+                /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
+                  isMobile ? /* @__PURE__ */ jsx12(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx12(
+                    IconButton,
+                    {
+                      "aria-label": t("menu"),
+                      onClick: openMobileSidebar,
+                      size: "small",
+                      sx: { ml: -0.5 },
+                      children: /* @__PURE__ */ jsx12(MenuIcon, { fontSize: "small" })
+                    }
+                  ) }) : null,
+                  beforeTitle ? /* @__PURE__ */ jsx12(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
+                  /* @__PURE__ */ jsx12(
+                    Typography2,
+                    {
+                      variant: "h5",
+                      sx: {
+                        fontWeight: 600,
+                        lineHeight: "2.125rem",
+                        minWidth: 0
+                      },
+                      children: title
+                    }
+                  )
+                ] }),
+                actions ? /* @__PURE__ */ jsx12(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
+              ]
+            }
+          ),
           subtitle && !details ? /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0 }, children: [
-            beforeSubtitle ? /* @__PURE__ */ jsx11(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
-            /* @__PURE__ */ jsx11(Typography2, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
+            beforeSubtitle ? /* @__PURE__ */ jsx12(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
+            /* @__PURE__ */ jsx12(Typography2, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
           ] }) : null,
           details ? /* @__PURE__ */ jsxs6(Stack4, { spacing: 0.5, children: [
-            /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 0.5, alignItems: "center", justifyContent: "space-between", sx: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-                beforeSubtitle ? /* @__PURE__ */ jsx11(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
-                /* @__PURE__ */ jsx11(Typography2, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
-              ] }),
-              /* @__PURE__ */ jsx11(
-                IconButton,
-                {
-                  "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
-                  onClick: () => setIsDetailsOpen((current) => !current),
-                  size: "small",
-                  sx: { mr: -0.5 },
-                  children: /* @__PURE__ */ jsx11(
-                    ExpandMoreIcon3,
+            /* @__PURE__ */ jsxs6(
+              Stack4,
+              {
+                direction: "row",
+                spacing: 0.5,
+                alignItems: "center",
+                justifyContent: "space-between",
+                sx: { minWidth: 0 },
+                children: [
+                  /* @__PURE__ */ jsxs6(Stack4, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
+                    beforeSubtitle ? /* @__PURE__ */ jsx12(Box4, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
+                    /* @__PURE__ */ jsx12(Typography2, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
+                  ] }),
+                  /* @__PURE__ */ jsx12(
+                    IconButton,
                     {
-                      fontSize: "small",
-                      sx: {
-                        transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
-                        transition: "transform 0.2s ease"
-                      }
+                      "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
+                      onClick: () => setIsDetailsOpen((current) => !current),
+                      size: "small",
+                      sx: { mr: -0.5 },
+                      children: /* @__PURE__ */ jsx12(
+                        ExpandMoreIcon3,
+                        {
+                          fontSize: "small",
+                          sx: {
+                            transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.2s ease"
+                          }
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx11(Collapse, { in: isDetailsOpen, children: /* @__PURE__ */ jsx11(Box4, { sx: { pt: 0.5 }, children: details }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx12(Collapse, { in: isDetailsOpen, children: /* @__PURE__ */ jsx12(Box4, { sx: { pt: 0.5 }, children: details }) })
           ] }) : null
         ] }),
-        error ? /* @__PURE__ */ jsx11(Alert, { severity: "error", sx: { mt: 2 }, children: error }) : null
+        error ? /* @__PURE__ */ jsx12(Alert2, { severity: "error", sx: { mt: 2 }, children: error }) : null
       ]
     }
   );
@@ -1452,7 +1697,7 @@ function MainHeaderSkeleton({
   titleWidth = 240,
   subtitleWidth = "40%"
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Paper2,
     {
       sx: {
@@ -1466,7 +1711,7 @@ function MainHeaderSkeleton({
         zIndex: 3
       },
       children: /* @__PURE__ */ jsxs6(Stack4, { spacing: 1, children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           Skeleton,
           {
             variant: "rounded",
@@ -1475,7 +1720,7 @@ function MainHeaderSkeleton({
             sx: { transform: "none" }
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           Skeleton,
           {
             variant: "rounded",
@@ -1490,14 +1735,14 @@ function MainHeaderSkeleton({
 }
 
 // src/components/OverviewPage.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var cachedModelsResponse = null;
 var inFlightModelsRequest = null;
 function OverviewPage({ client, basePath }) {
   const t = useAdminTranslation();
   useAdminDocumentTitle(t("admin_title"), t("overview_title"));
   const adminData = useAdminData();
-  const shellModelsResponse = useMemo5(() => {
+  const shellModelsResponse = useMemo6(() => {
     if (adminData.models.length === 0 && adminData.blocks.length === 0) {
       return null;
     }
@@ -1507,10 +1752,10 @@ function OverviewPage({ client, basePath }) {
       blocks: adminData.blocks
     };
   }, [adminData.blocks, adminData.locale, adminData.models]);
-  const [data, setData] = useState5(shellModelsResponse != null ? shellModelsResponse : cachedModelsResponse);
-  const [error, setError] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(shellModelsResponse === null && cachedModelsResponse === null);
-  useEffect5(() => {
+  const [data, setData] = useState6(shellModelsResponse != null ? shellModelsResponse : cachedModelsResponse);
+  const [error, setError] = useState6(null);
+  const [isLoading, setIsLoading] = useState6(shellModelsResponse === null && cachedModelsResponse === null);
+  useEffect6(() => {
     let isMounted = true;
     if (shellModelsResponse !== null) {
       cachedModelsResponse = shellModelsResponse;
@@ -1550,20 +1795,20 @@ function OverviewPage({ client, basePath }) {
     };
   }, [client, shellModelsResponse, t]);
   if (isLoading && !data) {
-    return /* @__PURE__ */ jsx12(OverviewPageSkeleton, {});
+    return /* @__PURE__ */ jsx13(OverviewPageSkeleton, {});
   }
   if (error || !data) {
-    return /* @__PURE__ */ jsx12(Alert2, { severity: "error", children: error || t("models_load_error") });
+    return /* @__PURE__ */ jsx13(Alert3, { severity: "error", children: error || t("models_load_error") });
   }
   return /* @__PURE__ */ jsxs7(Stack5, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       MainHeader,
       {
         title: t("overview_title"),
         subtitle: t("overview_subtitle")
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       Paper3,
       {
         sx: {
@@ -1574,7 +1819,7 @@ function OverviewPage({ client, basePath }) {
           display: "flex",
           flexDirection: "column"
         },
-        children: /* @__PURE__ */ jsx12(Box5, { sx: { flex: 1, minHeight: 0, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(Box5, { sx: { flex: 1, minHeight: 0, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsx13(
           ModelsBlocks,
           {
             models: data.items,
@@ -1589,8 +1834,8 @@ function OverviewPage({ client, basePath }) {
 }
 function OverviewPageSkeleton() {
   return /* @__PURE__ */ jsxs7(Stack5, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx12(MainHeaderSkeleton, { titleWidth: 220, subtitleWidth: "58%" }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(MainHeaderSkeleton, { titleWidth: 220, subtitleWidth: "58%" }),
+    /* @__PURE__ */ jsx13(
       Paper3,
       {
         sx: {
@@ -1601,9 +1846,9 @@ function OverviewPageSkeleton() {
           display: "flex",
           flexDirection: "column"
         },
-        children: /* @__PURE__ */ jsx12(Box5, { sx: { flex: 1, minHeight: 0, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsx12(Grid, { container: true, spacing: 2, children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ jsx12(Grid, { size: { xs: 12, md: 6, xl: 4 }, children: /* @__PURE__ */ jsx12(Paper3, { sx: { p: 2.5, borderRadius: "10px" }, children: /* @__PURE__ */ jsxs7(Stack5, { spacing: 1, children: [
-          /* @__PURE__ */ jsx12(Skeleton2, { variant: "text", width: "60%", height: 36 }),
-          /* @__PURE__ */ jsx12(Skeleton2, { variant: "text", width: "40%", height: 24 })
+        children: /* @__PURE__ */ jsx13(Box5, { sx: { flex: 1, minHeight: 0, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsx13(Grid, { container: true, spacing: 2, children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ jsx13(Grid, { size: { xs: 12, md: 6, xl: 4 }, children: /* @__PURE__ */ jsx13(Paper3, { sx: { p: 2.5, borderRadius: "10px" }, children: /* @__PURE__ */ jsxs7(Stack5, { spacing: 1, children: [
+          /* @__PURE__ */ jsx13(Skeleton2, { variant: "text", width: "60%", height: 36 }),
+          /* @__PURE__ */ jsx13(Skeleton2, { variant: "text", width: "40%", height: 24 })
         ] }) }) }, index)) }) })
       }
     )
@@ -1611,15 +1856,13 @@ function OverviewPageSkeleton() {
 }
 
 // src/components/ModelPage.tsx
-import { usePathname, useSearchParams } from "next/navigation.js";
-import { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo7, useRef, useState as useState8 } from "react";
 import AddIcon from "@mui/icons-material/Add";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon4 from "@mui/icons-material/ExpandMore";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import {
-  Alert as Alert4,
+  Alert as Alert5,
   Box as Box9,
   Button as Button4,
   Checkbox as Checkbox2,
@@ -1645,8 +1888,19 @@ import {
 import { useTheme as useTheme2 } from "@mui/material/styles";
 
 // src/components/DeletePreviewDialog.tsx
-import { Alert as Alert3, Box as Box6, Button as Button2, CircularProgress as CircularProgress2, Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, Stack as Stack6, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import {
+  Alert as Alert4,
+  Box as Box6,
+  Button as Button2,
+  CircularProgress as CircularProgress2,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogTitle as DialogTitle2,
+  Stack as Stack6,
+  Typography as Typography3
+} from "@mui/material";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function DeletePreviewDialog({
   open,
   title,
@@ -1680,33 +1934,47 @@ function DeletePreviewDialog({
         }
       },
       children: [
-        /* @__PURE__ */ jsx13(DialogTitle2, { children: title }),
+        /* @__PURE__ */ jsx14(DialogTitle2, { children: title }),
         /* @__PURE__ */ jsxs8(DialogContent2, { dividers: true, children: [
           isLoading ? /* @__PURE__ */ jsxs8(Stack6, { spacing: 1.5, alignItems: "center", justifyContent: "center", sx: { minHeight: 180 }, children: [
-            /* @__PURE__ */ jsx13(CircularProgress2, { size: 28, thickness: 4.2, color: "inherit" }),
-            /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", children: t("delete_preview_loading") })
+            /* @__PURE__ */ jsx14(CircularProgress2, { size: 28, thickness: 4.2, color: "inherit" }),
+            /* @__PURE__ */ jsx14(Typography3, { color: "text.secondary", children: t("delete_preview_loading") })
           ] }) : null,
-          !isLoading && error ? /* @__PURE__ */ jsx13(Alert3, { severity: "error", children: error }) : null,
+          !isLoading && error ? /* @__PURE__ */ jsx14(Alert4, { severity: "error", children: error }) : null,
           !isLoading && !error && preview ? /* @__PURE__ */ jsxs8(Stack6, { spacing: 1.5, children: [
-            /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", children: preview.can_delete ? t("delete_preview_hint") : t("delete_preview_blocked_hint") }),
-            !preview.can_delete ? /* @__PURE__ */ jsx13(Alert3, { severity: "warning", children: t("delete_preview_blocked_hint") }) : null,
+            /* @__PURE__ */ jsx14(Typography3, { color: "text.secondary", children: preview.can_delete ? t("delete_preview_hint") : t("delete_preview_blocked_hint") }),
+            !preview.can_delete ? /* @__PURE__ */ jsx14(Alert4, { severity: "warning", children: t("delete_preview_blocked_hint") }) : null,
             /* @__PURE__ */ jsxs8(Stack6, { spacing: 0.5, children: [
-              /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_roots", { count: preview.summary.roots }) }),
-              /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_delete", { count: preview.summary.delete }) }),
-              /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_protect", { count: preview.summary.protect }) }),
-              /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_set_null", { count: preview.summary.set_null }) }),
-              /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_total", { count: preview.summary.total }) })
+              /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_roots", { count: preview.summary.roots }) }),
+              /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_delete", { count: preview.summary.delete }) }),
+              /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_protect", { count: preview.summary.protect }) }),
+              /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_set_null", { count: preview.summary.set_null }) }),
+              /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_total", { count: preview.summary.total }) })
             ] }),
-            preview.summary.delete === 0 && preview.summary.protect === 0 && preview.summary.set_null === 0 ? /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_empty") }) : null,
-            preview.roots.length > 0 ? /* @__PURE__ */ jsx13(Stack6, { spacing: 1, children: preview.roots.map((rootNode, index) => {
+            preview.summary.delete === 0 && preview.summary.protect === 0 && preview.summary.set_null === 0 ? /* @__PURE__ */ jsx14(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_empty") }) : null,
+            preview.roots.length > 0 ? /* @__PURE__ */ jsx14(Stack6, { spacing: 1, children: preview.roots.map((rootNode, index) => {
               var _a;
-              return /* @__PURE__ */ jsx13(DeletePreviewNode, { node: rootNode, depth: 0 }, `${(_a = rootNode.model_slug) != null ? _a : "model"}:${rootNode.id}:${index}`);
-            }) }) : /* @__PURE__ */ jsx13(Typography3, { variant: "body2", color: "text.secondary", children: t("delete_preview_no_selection") })
+              return /* @__PURE__ */ jsx14(
+                DeletePreviewNode,
+                {
+                  node: rootNode,
+                  depth: 0
+                },
+                `${(_a = rootNode.model_slug) != null ? _a : "model"}:${rootNode.id}:${index}`
+              );
+            }) }) : /* @__PURE__ */ jsx14(
+              Typography3,
+              {
+                variant: "body2",
+                color: "text.secondary",
+                children: t("delete_preview_no_selection")
+              }
+            )
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs8(DialogActions2, { children: [
-          /* @__PURE__ */ jsx13(Button2, { onClick: onClose, disabled: isSubmitting, children: t("cancel") }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(Button2, { onClick: onClose, disabled: isSubmitting, children: t("cancel") }),
+          /* @__PURE__ */ jsx14(
             Button2,
             {
               color: "error",
@@ -1733,16 +2001,16 @@ function DeletePreviewNode({ node, depth }) {
       },
       children: [
         /* @__PURE__ */ jsxs8(Stack6, { spacing: 0.25, children: [
-          /* @__PURE__ */ jsx13(Typography3, { sx: { fontWeight: 600 }, children: node.label }),
+          /* @__PURE__ */ jsx14(Typography3, { sx: { fontWeight: 600 }, children: node.label }),
           /* @__PURE__ */ jsxs8(Typography3, { variant: "body2", color: "text.secondary", children: [
             node.model_title,
             node.relation_name ? ` \u2022 ${node.relation_name}` : "",
             ` \u2022 ${getEffectLabel(node.effect, t)}`
           ] })
         ] }),
-        node.children.length > 0 ? /* @__PURE__ */ jsx13(Stack6, { spacing: 0.75, sx: { mt: 1 }, children: node.children.map((childNode, index) => {
+        node.children.length > 0 ? /* @__PURE__ */ jsx14(Stack6, { spacing: 0.75, sx: { mt: 1 }, children: node.children.map((childNode, index) => {
           var _a;
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx14(
             DeletePreviewNode,
             {
               node: childNode,
@@ -1766,10 +2034,19 @@ function getEffectLabel(effect, t) {
 }
 
 // src/components/model-page/ListFiltersBar.tsx
-import { memo as memo3, useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
-import { Button as Button3, CircularProgress as CircularProgress3, Divider, MenuItem, Paper as Paper4, Stack as Stack7, TextField as TextField2, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var inFlightFilterChoicesRequests = /* @__PURE__ */ new Map();
+import { memo as memo3, useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo7, useState as useState7 } from "react";
+import {
+  Autocomplete as Autocomplete2,
+  Button as Button3,
+  CircularProgress as CircularProgress3,
+  Divider,
+  MenuItem,
+  Paper as Paper4,
+  Stack as Stack7,
+  TextField as TextField2,
+  Typography as Typography4
+} from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
   client,
   slug,
@@ -1780,7 +2057,7 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
   debounceMs = 300
 }) {
   const t = useAdminTranslation();
-  const filterGroups = useMemo6(() => {
+  const filterGroups = useMemo7(() => {
     var _a, _b;
     const groupedFilters = /* @__PURE__ */ new Map();
     for (const filter of filters) {
@@ -1799,12 +2076,12 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
     }
     return Array.from(groupedFilters.values());
   }, [filters]);
-  const activeFiltersCount = useMemo6(
+  const activeFiltersCount = useMemo7(
     () => filters.filter((filter) => Boolean(values[filter.slug])).length,
     [filters, values]
   );
   if (filters.length === 0) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Paper4,
     {
       sx: {
@@ -1819,10 +2096,10 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
       children: /* @__PURE__ */ jsxs9(Stack7, { spacing: 1.5, children: [
         /* @__PURE__ */ jsxs9(Stack7, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsxs9(Stack7, { spacing: 0.25, children: [
-            /* @__PURE__ */ jsx14(Typography4, { sx: { fontSize: 15, fontWeight: 700 }, children: t("filters") }),
-            activeFiltersCount > 0 ? /* @__PURE__ */ jsx14(Typography4, { color: "text.secondary", sx: { fontSize: 12 }, children: t("active_filters", { count: activeFiltersCount }) }) : null
+            /* @__PURE__ */ jsx15(Typography4, { sx: { fontSize: 15, fontWeight: 700 }, children: t("filters") }),
+            activeFiltersCount > 0 ? /* @__PURE__ */ jsx15(Typography4, { color: "text.secondary", sx: { fontSize: 12 }, children: t("active_filters", { count: activeFiltersCount }) }) : null
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Button3,
             {
               size: "small",
@@ -1833,8 +2110,8 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx14(Divider, {}),
-        filterGroups.map((group) => /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(Divider, {}),
+        filterGroups.map((group) => /* @__PURE__ */ jsx15(
           FilterGroupSection,
           {
             client,
@@ -1852,10 +2129,10 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
 });
 function FilterGroupSection({ client, slug, group, values, onChange, debounceMs }) {
   return /* @__PURE__ */ jsxs9(Stack7, { spacing: 1, children: [
-    /* @__PURE__ */ jsx14(Typography4, { sx: { fontSize: 13, fontWeight: 700, color: "text.secondary" }, children: group.title }),
-    /* @__PURE__ */ jsx14(Stack7, { spacing: 1, children: group.filters.map((filter) => {
+    /* @__PURE__ */ jsx15(Typography4, { sx: { fontSize: 13, fontWeight: 700, color: "text.secondary" }, children: group.title }),
+    /* @__PURE__ */ jsx15(Stack7, { spacing: 1, children: group.filters.map((filter) => {
       var _a;
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         ListFilterField,
         {
           client,
@@ -1871,52 +2148,44 @@ function FilterGroupSection({ client, slug, group, values, onChange, debounceMs
   ] });
 }
 function ListFilterField({ client, slug, filter, value, onChange, debounceMs }) {
-  var _a;
+  var _a, _b;
   const t = useAdminTranslation();
-  const [draftValue, setDraftValue] = useState6(value);
-  const [options, setOptions] = useState6(filter.options);
-  const [isChoicesLoaded, setIsChoicesLoaded] = useState6(filter.options.length > 0);
-  const [isLoadingChoices, setIsLoadingChoices] = useState6(false);
-  useEffect6(() => {
+  const [draftValue, setDraftValue] = useState7(value);
+  const [searchValue, setSearchValue] = useState7("");
+  const loadChoices = useCallback3(
+    async (signal) => {
+      const response = await client.getFilterChoices(
+        slug,
+        filter.slug,
+        searchValue || void 0,
+        value ? [value] : void 0,
+        { signal }
+      );
+      return response.items.map((item) => ({
+        value: String(item.id),
+        label: item.label
+      }));
+    },
+    [client, filter.slug, searchValue, slug, value]
+  );
+  const { items: options, isLoading: isLoadingChoices } = useRemoteChoices({
+    enabled: filter.has_choices && filter.input_kind === "select",
+    debounceMs,
+    initialItems: filter.options,
+    resetKey: `${slug}:${filter.slug}`,
+    queryKey: `${slug}:${filter.slug}:${searchValue}:${value}`,
+    load: loadChoices
+  });
+  useEffect7(() => {
     setDraftValue(value);
   }, [value]);
-  useEffect6(() => {
-    setOptions(filter.options);
-    setIsChoicesLoaded(filter.options.length > 0);
+  useEffect7(() => {
+    setSearchValue("");
   }, [filter.slug]);
-  useEffect6(() => {
-    if (filter.options.length === 0) {
-      return;
-    }
-    setOptions(filter.options);
-    setIsChoicesLoaded(true);
-  }, [filter.options]);
-  const loadChoices = useCallback2(async () => {
-    if (!filter.has_choices || filter.input_kind !== "select" || isChoicesLoaded) {
+  useEffect7(() => {
+    if (filter.input_kind !== "text") {
       return;
     }
-    const requestKey = `${slug}:${filter.slug}`;
-    const existingRequest = inFlightFilterChoicesRequests.get(requestKey);
-    const request = existingRequest != null ? existingRequest : client.getFilterChoices(slug, filter.slug).then((response) => response.items.map((item) => ({
-      value: String(item.id),
-      label: item.label
-    }))).finally(() => {
-      inFlightFilterChoicesRequests.delete(requestKey);
-    });
-    if (!existingRequest) {
-      inFlightFilterChoicesRequests.set(requestKey, request);
-    }
-    setIsLoadingChoices(true);
-    try {
-      const nextOptions = await request;
-      setOptions(nextOptions);
-      setIsChoicesLoaded(true);
-    } finally {
-      setIsLoadingChoices(false);
-    }
-  }, [client, filter.has_choices, filter.input_kind, filter.slug, isChoicesLoaded, slug]);
-  useEffect6(() => {
-    if (filter.input_kind !== "text") return;
     const timeoutId = window.setTimeout(() => {
       if (draftValue !== value) {
         onChange(filter.slug, draftValue);
@@ -1926,23 +2195,7 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
       window.clearTimeout(timeoutId);
     };
   }, [debounceMs, draftValue, filter.input_kind, filter.slug, onChange, value]);
-  useEffect6(() => {
-    if (!value || !filter.has_choices || filter.input_kind !== "select" || isChoicesLoaded) {
-      return;
-    }
-    let isCancelled = false;
-    void loadChoices().then(() => {
-      if (isCancelled) return;
-    }).catch(() => {
-      if (isCancelled) return;
-      setOptions([]);
-      setIsChoicesLoaded(false);
-    });
-    return () => {
-      isCancelled = true;
-    };
-  }, [filter.has_choices, filter.input_kind, isChoicesLoaded, loadChoices, value]);
-  if (filter.input_kind === "boolean" || filter.input_kind === "select") {
+  if (filter.input_kind === "boolean") {
     return /* @__PURE__ */ jsxs9(
       TextField2,
       {
@@ -1952,27 +2205,66 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
         label: filter.label,
         value,
         onChange: (event) => onChange(filter.slug, event.target.value),
-        slotProps: {
-          select: filter.input_kind === "select" ? { onOpen: () => void loadChoices() } : void 0
-        },
         children: [
-          /* @__PURE__ */ jsx14(MenuItem, { value: "", children: t("all") }),
-          isLoadingChoices ? /* @__PURE__ */ jsx14(MenuItem, { disabled: true, value: "__loading__", children: /* @__PURE__ */ jsxs9(Stack7, { direction: "row", spacing: 1, alignItems: "center", children: [
-            /* @__PURE__ */ jsx14(CircularProgress3, { size: 14, thickness: 5 }),
-            /* @__PURE__ */ jsx14(Typography4, { variant: "body2", children: t("loading") })
-          ] }) }) : null,
-          options.map((option) => /* @__PURE__ */ jsx14(MenuItem, { value: option.value, children: option.label }, `${filter.slug}-${option.value}`))
+          /* @__PURE__ */ jsx15(MenuItem, { value: "", children: t("all") }),
+          filter.options.map((option) => /* @__PURE__ */ jsx15(MenuItem, { value: option.value, children: option.label }, `${filter.slug}-${option.value}`))
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  if (filter.input_kind === "select") {
+    const selectedOption = (_a = options.find((option) => option.value === value)) != null ? _a : value ? {
+      value,
+      label: value
+    } : null;
+    return /* @__PURE__ */ jsx15(
+      Autocomplete2,
+      {
+        options,
+        value: selectedOption,
+        loading: isLoadingChoices,
+        filterOptions: (items) => items,
+        size: "small",
+        disablePortal: true,
+        isOptionEqualToValue: (option, selected) => option.value === selected.value,
+        getOptionLabel: (option) => option.label,
+        onChange: (_, nextValue) => {
+          var _a2;
+          return onChange(filter.slug, (_a2 = nextValue == null ? void 0 : nextValue.value) != null ? _a2 : "");
+        },
+        onInputChange: (_, nextInputValue) => setSearchValue(nextInputValue),
+        renderInput: (params) => (() => {
+          var _a2;
+          const { InputProps, inputProps, ...textFieldParams } = params;
+          return /* @__PURE__ */ jsx15(
+            TextField2,
+            {
+              ...textFieldParams,
+              label: filter.label,
+              placeholder: (_a2 = filter.placeholder) != null ? _a2 : t("search"),
+              slotProps: {
+                input: {
+                  ...InputProps,
+                  endAdornment: /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                    isLoadingChoices ? /* @__PURE__ */ jsx15(CircularProgress3, { color: "inherit", size: 16 }) : null,
+                    InputProps.endAdornment
+                  ] })
+                },
+                htmlInput: inputProps
+              }
+            }
+          );
+        })()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
     TextField2,
     {
       size: "small",
       fullWidth: true,
       label: filter.label,
-      placeholder: (_a = filter.placeholder) != null ? _a : void 0,
+      placeholder: (_b = filter.placeholder) != null ? _b : void 0,
       value: draftValue,
       onChange: (event) => setDraftValue(event.target.value)
     }
@@ -1983,7 +2275,7 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
 import { memo as memo4 } from "react";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { Box as Box7, Checkbox, IconButton as IconButton2, TableCell, TableRow } from "@mui/material";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var ListRow = memo4(function ListRow2({
   row,
   pkField,
@@ -2013,7 +2305,7 @@ var ListRow = memo4(function ListRow2({
         }
       },
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           TableCell,
           {
             padding: "none",
@@ -2025,7 +2317,7 @@ var ListRow = memo4(function ListRow2({
               textAlign: "center",
               px: 1
             },
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx16(
               Checkbox,
               {
                 checked: isSelected,
@@ -2050,7 +2342,7 @@ var ListRow = memo4(function ListRow2({
             textOverflow: "ellipsis"
           };
           if (imageUrl) {
-            return /* @__PURE__ */ jsx15(TableCell, { title: fullFieldValue, sx: { ...commonCellSx, py: 0.75 }, children: /* @__PURE__ */ jsx15(
+            return /* @__PURE__ */ jsx16(TableCell, { title: fullFieldValue, sx: { ...commonCellSx, py: 0.75 }, children: /* @__PURE__ */ jsx16(
               Box7,
               {
                 component: "img",
@@ -2068,7 +2360,7 @@ var ListRow = memo4(function ListRow2({
             ) }, fieldName);
           }
           if (index === 0) {
-            return /* @__PURE__ */ jsx15(
+            return /* @__PURE__ */ jsx16(
               TableCell,
               {
                 title: fullFieldValue,
@@ -2086,7 +2378,7 @@ var ListRow = memo4(function ListRow2({
                     color: "primary.main"
                   }
                 },
-                children: /* @__PURE__ */ jsx15(
+                children: /* @__PURE__ */ jsx16(
                   NavLink,
                   {
                     href: `${basePath}/${slug}/${rowId}`,
@@ -2099,9 +2391,9 @@ var ListRow = memo4(function ListRow2({
               fieldName
             );
           }
-          return /* @__PURE__ */ jsx15(TableCell, { title: fullFieldValue, sx: commonCellSx, children: fieldValue }, fieldName);
+          return /* @__PURE__ */ jsx16(TableCell, { title: fullFieldValue, sx: commonCellSx, children: fieldValue }, fieldName);
         }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           TableCell,
           {
             align: "right",
@@ -2110,7 +2402,7 @@ var ListRow = memo4(function ListRow2({
               minWidth: actionsColumnWidth,
               maxWidth: actionsColumnWidth
             },
-            children: /* @__PURE__ */ jsx15(IconButton2, { size: "small", onClick: (event) => onOpenMenu(event, rowId), children: /* @__PURE__ */ jsx15(MoreVertIcon, { fontSize: "small" }) })
+            children: /* @__PURE__ */ jsx16(IconButton2, { size: "small", onClick: (event) => onOpenMenu(event, rowId), children: /* @__PURE__ */ jsx16(MoreVertIcon, { fontSize: "small" }) })
           }
         )
       ]
@@ -2119,20 +2411,20 @@ var ListRow = memo4(function ListRow2({
 });
 
 // src/components/model-page/SearchField.tsx
-import { memo as memo5, useEffect as useEffect7, useState as useState7 } from "react";
+import { memo as memo5, useEffect as useEffect8, useState as useState8 } from "react";
 import { TextField as TextField3 } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SearchField = memo5(function SearchField2({
   value,
   onCommit,
   debounceMs,
   placeholder
 }) {
-  const [draftValue, setDraftValue] = useState7(value);
-  useEffect7(() => {
+  const [draftValue, setDraftValue] = useState8(value);
+  useEffect8(() => {
     setDraftValue(value);
   }, [value]);
-  useEffect7(() => {
+  useEffect8(() => {
     const timerId = window.setTimeout(() => {
       if (draftValue !== value) {
         onCommit(draftValue);
@@ -2142,7 +2434,7 @@ var SearchField = memo5(function SearchField2({
       window.clearTimeout(timerId);
     };
   }, [debounceMs, draftValue, onCommit, value]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     TextField3,
     {
       size: "small",
@@ -2160,98 +2452,157 @@ var SearchField = memo5(function SearchField2({
   );
 });
 
-// src/components/model-page/Skeletons.tsx
-import { Box as Box8, Paper as Paper5, Skeleton as Skeleton3, Stack as Stack8 } from "@mui/material";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function ModelPageSkeleton() {
-  return /* @__PURE__ */ jsxs11(Stack8, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx17(MainHeaderSkeleton, { titleWidth: 240, subtitleWidth: "38%" }),
-    /* @__PURE__ */ jsx17(Paper5, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs11(Stack8, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
-      /* @__PURE__ */ jsx17(Skeleton3, { variant: "rounded", width: 360, height: 40 }),
-      /* @__PURE__ */ jsx17(Skeleton3, { variant: "rounded", width: 128, height: 40 }),
-      /* @__PURE__ */ jsx17(Box8, { sx: { flex: 1 } }),
-      /* @__PURE__ */ jsx17(Skeleton3, { variant: "rounded", width: 110, height: 24 })
-    ] }) }),
-    /* @__PURE__ */ jsx17(Paper5, { sx: { borderRadius: "10px", flex: 1, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx17(ModelTableSkeleton, {}) })
-  ] });
+// src/components/model-page/useModelPageController.ts
+import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef3, useState as useState9 } from "react";
+
+// src/cache.ts
+var MAX_CACHE_ENTRIES = 100;
+var clientCaches = /* @__PURE__ */ new WeakMap();
+function buildDetailCacheKey(slug, id) {
+  return `detail:${slug}:${id}`;
 }
-function ModelTableSkeleton() {
-  return /* @__PURE__ */ jsx17(Box8, { sx: { height: "100%", overflow: "auto", p: 1.5 }, children: /* @__PURE__ */ jsxs11(Stack8, { spacing: 1, children: [
-    /* @__PURE__ */ jsx17(Skeleton3, { variant: "rounded", width: "100%", height: 42 }),
-    Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx17(Skeleton3, { variant: "rounded", width: "100%", height: 48 }, index))
-  ] }) });
+function buildListCacheKey(slug, params) {
+  const { q, sort, limit, offset, ...filters } = params;
+  return `list:${slug}:${JSON.stringify({
+    q: q != null ? q : null,
+    sort: sort != null ? sort : null,
+    limit: limit != null ? limit : 50,
+    offset: offset != null ? offset : 0,
+    filters: Object.fromEntries(
+      Object.entries(filters).filter(([, value]) => value !== void 0 && value !== null && value !== "").sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+    )
+  })}`;
+}
+function getClientCacheBucket(client) {
+  const existingBucket = clientCaches.get(client);
+  if (existingBucket) {
+    return existingBucket;
+  }
+  const nextBucket = {
+    detailResponseCache: /* @__PURE__ */ new Map(),
+    inFlightDetailRequests: /* @__PURE__ */ new Map(),
+    listResponseCache: /* @__PURE__ */ new Map(),
+    inFlightListRequests: /* @__PURE__ */ new Map(),
+    modelVersions: /* @__PURE__ */ new Map()
+  };
+  clientCaches.set(client, nextBucket);
+  return nextBucket;
+}
+function getModelCacheVersion(client, slug) {
+  var _a;
+  return (_a = getClientCacheBucket(client).modelVersions.get(slug)) != null ? _a : 0;
+}
+function setCachedListResponse(client, key, response) {
+  setBoundedMapEntry(getClientCacheBucket(client).listResponseCache, key, response);
+}
+function setCachedDetailResponse(client, key, response) {
+  setBoundedMapEntry(getClientCacheBucket(client).detailResponseCache, key, response);
+}
+function invalidateModelCache(client, slug) {
+  const bucket = getClientCacheBucket(client);
+  bucket.modelVersions.set(slug, getModelCacheVersion(client, slug) + 1);
+  for (const key of bucket.listResponseCache.keys()) {
+    if (key.startsWith(`list:${slug}:`)) {
+      bucket.listResponseCache.delete(key);
+    }
+  }
+  for (const key of bucket.inFlightListRequests.keys()) {
+    if (key.startsWith(`list:${slug}:`)) {
+      bucket.inFlightListRequests.delete(key);
+    }
+  }
+  for (const key of bucket.detailResponseCache.keys()) {
+    if (key.startsWith(`detail:${slug}:`)) {
+      bucket.detailResponseCache.delete(key);
+    }
+  }
+  for (const key of bucket.inFlightDetailRequests.keys()) {
+    if (key.startsWith(`detail:${slug}:`)) {
+      bucket.inFlightDetailRequests.delete(key);
+    }
+  }
+}
+function setBoundedMapEntry(map, key, value) {
+  if (map.has(key)) {
+    map.delete(key);
+  }
+  map.set(key, value);
+  while (map.size > MAX_CACHE_ENTRIES) {
+    const oldestKey = map.keys().next().value;
+    if (!oldestKey) {
+      break;
+    }
+    map.delete(oldestKey);
+  }
 }
 
-// src/components/ModelPage.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+// src/components/model-page/useModelPageController.ts
 var DEFAULT_PAGE_SIZE = 50;
-var SEARCH_DEBOUNCE_MS = 300;
-var CHECKBOX_COLUMN_WIDTH = 56;
-var ACTIONS_COLUMN_WIDTH = 56;
-var inFlightListRequests = /* @__PURE__ */ new Map();
-var listResponseCache = /* @__PURE__ */ new Map();
-function ModelPage({ client, basePath, slug }) {
+function useModelPageController({
+  client,
+  slug,
+  pathname,
+  locationSearch,
+  router,
+  t
+}) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const locale = useAdminLocale();
-  const t = useAdminTranslation();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const searchParams = useMemo8(() => new URLSearchParams(locationSearch), [locationSearch]);
   const initialQuery = (_a = searchParams.get("q")) != null ? _a : "";
   const initialSort = (_b = searchParams.get("sort")) != null ? _b : "";
   const initialPage = parsePageParam(searchParams.get("page"));
   const initialFilters = extractFilterParams(searchParams);
-  const initialCachedResponse = findCachedListResponse(
-    slug,
-    initialQuery || void 0,
-    initialSort || void 0,
-    DEFAULT_PAGE_SIZE,
-    (initialPage - 1) * DEFAULT_PAGE_SIZE,
-    initialFilters
-  );
-  const [selectedIds, setSelectedIds] = useState8([]);
-  const [createOpen, setCreateOpen] = useState8(false);
-  const [data, setData] = useState8(() => initialCachedResponse);
-  const [error, setError] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(initialCachedResponse === null);
-  const [rowActionMenuAnchor, setRowActionMenuAnchor] = useState8(null);
-  const [rowActionMenuId, setRowActionMenuId] = useState8(null);
-  const [bulkActionMenuAnchor, setBulkActionMenuAnchor] = useState8(null);
-  const [appliedQuery, setAppliedQuery] = useState8(initialQuery);
-  const [sortValue, setSortValue] = useState8(initialSort);
-  const [currentPage, setCurrentPage] = useState8(initialPage);
-  const [pageInput, setPageInput] = useState8(String(initialPage));
-  const [appliedFilters, setAppliedFilters] = useState8(initialFilters);
-  const [deletePreviewOpen, setDeletePreviewOpen] = useState8(false);
-  const [deletePreview, setDeletePreview] = useState8(null);
-  const [deletePreviewError, setDeletePreviewError] = useState8(null);
-  const [isDeletePreviewLoading, setIsDeletePreviewLoading] = useState8(false);
-  const [isDeleteSubmitting, setIsDeleteSubmitting] = useState8(false);
-  const [pendingDeleteIds, setPendingDeleteIds] = useState8([]);
-  const [pendingDeleteMode, setPendingDeleteMode] = useState8("single");
-  const [filtersOpen, setFiltersOpen] = useState8(false);
-  const requestIdRef = useRef(0);
-  const dataRef = useRef(initialCachedResponse);
-  const pageSizeRef = useRef((_c = initialCachedResponse == null ? void 0 : initialCachedResponse.meta.page_size) != null ? _c : DEFAULT_PAGE_SIZE);
-  const theme = useTheme2();
-  const isMobile = useMediaQuery2(theme.breakpoints.down("md"));
-  const sortFields = useMemo7(() => sortValue.split(",").filter(Boolean), [sortValue]);
-  const meta = (_d = data == null ? void 0 : data.meta) != null ? _d : null;
-  const rows = (_e = data == null ? void 0 : data.items) != null ? _e : [];
-  const total = (_f = data == null ? void 0 : data.pagination.total) != null ? _f : 0;
-  const pageSize = (_g = meta == null ? void 0 : meta.page_size) != null ? _g : pageSizeRef.current;
+  const initialCachedResponse = (_c = getClientCacheBucket(client).listResponseCache.get(
+    buildListCacheKey(slug, {
+      q: initialQuery || void 0,
+      sort: initialSort || void 0,
+      limit: DEFAULT_PAGE_SIZE,
+      offset: (initialPage - 1) * DEFAULT_PAGE_SIZE,
+      ...initialFilters
+    })
+  )) != null ? _c : null;
+  const [selectedIds, setSelectedIds] = useState9([]);
+  const [createOpen, setCreateOpen] = useState9(false);
+  const [data, setData] = useState9(() => initialCachedResponse);
+  const [error, setError] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(initialCachedResponse === null);
+  const [rowActionMenuAnchor, setRowActionMenuAnchor] = useState9(null);
+  const [rowActionMenuId, setRowActionMenuId] = useState9(null);
+  const [bulkActionMenuAnchor, setBulkActionMenuAnchor] = useState9(null);
+  const [appliedQuery, setAppliedQuery] = useState9(initialQuery);
+  const [sortValue, setSortValue] = useState9(initialSort);
+  const [currentPage, setCurrentPage] = useState9(initialPage);
+  const [pageInput, setPageInput] = useState9(String(initialPage));
+  const [appliedFilters, setAppliedFilters] = useState9(initialFilters);
+  const [deletePreviewOpen, setDeletePreviewOpen] = useState9(false);
+  const [deletePreview, setDeletePreview] = useState9(null);
+  const [deletePreviewError, setDeletePreviewError] = useState9(null);
+  const [isDeletePreviewLoading, setIsDeletePreviewLoading] = useState9(false);
+  const [isDeleteSubmitting, setIsDeleteSubmitting] = useState9(false);
+  const [pendingDeleteIds, setPendingDeleteIds] = useState9([]);
+  const [pendingDeleteMode, setPendingDeleteMode] = useState9("single");
+  const [filtersOpen, setFiltersOpen] = useState9(false);
+  const requestIdRef = useRef3(0);
+  const dataRef = useRef3(initialCachedResponse);
+  const pageSizeRef = useRef3((_d = initialCachedResponse == null ? void 0 : initialCachedResponse.meta.page_size) != null ? _d : DEFAULT_PAGE_SIZE);
+  const sortFields = useMemo8(() => sortValue.split(",").filter(Boolean), [sortValue]);
+  const meta = (_e = data == null ? void 0 : data.meta) != null ? _e : null;
+  const rows = (_f = data == null ? void 0 : data.items) != null ? _f : [];
+  const total = (_g = data == null ? void 0 : data.pagination.total) != null ? _g : 0;
+  const pageSize = (_h = meta == null ? void 0 : meta.page_size) != null ? _h : pageSizeRef.current;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const fieldMap = useMemo7(
+  const fieldMap = useMemo8(
     () => {
       var _a2;
       return new Map(((_a2 = meta == null ? void 0 : meta.fields) != null ? _a2 : []).map((field) => [field.name, field]));
     },
     [meta == null ? void 0 : meta.fields]
   );
-  const listFields = (_h = meta == null ? void 0 : meta.list_fields) != null ? _h : [];
-  const listFilters = (_i = meta == null ? void 0 : meta.list_filters) != null ? _i : [];
+  const listFields = (_i = meta == null ? void 0 : meta.list_fields) != null ? _i : [];
+  const listFilters = (_j = meta == null ? void 0 : meta.list_filters) != null ? _j : [];
   const hasListFilters = listFilters.length > 0;
-  const bulkActions = (_j = meta == null ? void 0 : meta.bulk_actions) != null ? _j : [];
-  const selectedIdSet = useMemo7(() => new Set(selectedIds.map((item) => String(item))), [selectedIds]);
+  const bulkActions = (_k = meta == null ? void 0 : meta.bulk_actions) != null ? _k : [];
+  const selectedIdSet = useMemo8(() => new Set(selectedIds.map((item) => String(item))), [selectedIds]);
   const allVisibleSelected = rows.length > 0 && rows.every((row) => {
     var _a2;
     return selectedIdSet.has(String(row[(_a2 = meta == null ? void 0 : meta.pk_field) != null ? _a2 : "id"]));
@@ -2260,34 +2611,27 @@ function ModelPage({ client, basePath, slug }) {
     var _a2;
     return selectedIdSet.has(String(row[(_a2 = meta == null ? void 0 : meta.pk_field) != null ? _a2 : "id"]));
   });
-  useAdminDocumentTitle(t("admin_title"), (_k = meta == null ? void 0 : meta.title) != null ? _k : slug);
-  useEffect8(() => {
+  useEffect9(() => {
     dataRef.current = data;
   }, [data]);
-  useEffect8(() => {
+  useEffect9(() => {
     setPageInput(String(currentPage));
   }, [currentPage]);
-  useEffect8(() => {
-    const handlePopState = () => {
-      var _a2, _b2;
-      const params = new URLSearchParams(window.location.search);
-      const nextQuery = (_a2 = params.get("q")) != null ? _a2 : "";
-      const nextSort = (_b2 = params.get("sort")) != null ? _b2 : "";
-      const nextPage = parsePageParam(params.get("page"));
-      const nextFilters = extractFilterParams(params);
-      setAppliedQuery(nextQuery);
-      setSortValue(nextSort);
-      setCurrentPage(nextPage);
-      setPageInput(String(nextPage));
-      setAppliedFilters(nextFilters);
-    };
-    window.addEventListener("popstate", handlePopState);
-    return () => {
-      window.removeEventListener("popstate", handlePopState);
-    };
-  }, []);
-  const loadItems = useCallback3(async () => {
+  useEffect9(() => {
     var _a2, _b2;
+    const nextSearchParams = new URLSearchParams(locationSearch);
+    const nextQuery = (_a2 = nextSearchParams.get("q")) != null ? _a2 : "";
+    const nextSort = (_b2 = nextSearchParams.get("sort")) != null ? _b2 : "";
+    const nextPage = parsePageParam(nextSearchParams.get("page"));
+    const nextFilters = extractFilterParams(nextSearchParams);
+    setAppliedQuery(nextQuery);
+    setSortValue(nextSort);
+    setCurrentPage(nextPage);
+    setPageInput(String(nextPage));
+    setAppliedFilters(nextFilters);
+  }, [locationSearch]);
+  const loadItems = useCallback4(async () => {
+    var _a2;
     const activeRequestId = requestIdRef.current + 1;
     requestIdRef.current = activeRequestId;
     setError(null);
@@ -2298,14 +2642,8 @@ function ModelPage({ client, basePath, slug }) {
       offset: (currentPage - 1) * pageSizeRef.current,
       ...appliedFilters
     };
-    const cachedResponse = findCachedListResponse(
-      slug,
-      requestParams.q,
-      requestParams.sort,
-      (_a2 = requestParams.limit) != null ? _a2 : DEFAULT_PAGE_SIZE,
-      (_b2 = requestParams.offset) != null ? _b2 : 0,
-      appliedFilters
-    );
+    const requestKey = buildListCacheKey(slug, requestParams);
+    const cachedResponse = (_a2 = getClientCacheBucket(client).listResponseCache.get(requestKey)) != null ? _a2 : null;
     if (cachedResponse) {
       setData(cachedResponse);
       setSelectedIds([]);
@@ -2317,7 +2655,7 @@ function ModelPage({ client, basePath, slug }) {
     }
     setIsLoading(true);
     try {
-      const response = await requestListItems(client, slug, requestParams);
+      const response = await requestListItems(client, slug, requestParams, requestKey);
       if (activeRequestId !== requestIdRef.current) {
         return;
       }
@@ -2332,32 +2670,36 @@ function ModelPage({ client, basePath, slug }) {
       }
     }
   }, [appliedFilters, appliedQuery, client, currentPage, slug, sortValue, t]);
-  useEffect8(() => {
+  useEffect9(() => {
     void loadItems();
   }, [loadItems]);
-  const refresh = useCallback3(async () => {
+  const refresh = useCallback4(async () => {
+    invalidateModelCache(client, slug);
     await loadItems();
-  }, [loadItems]);
-  const handleSearchCommit = useCallback3((nextQuery) => {
+  }, [client, loadItems, slug]);
+  const replaceLocation = useCallback4((nextQuery, nextSort, nextPage, nextFilters) => {
+    router.replace(buildUrlWithParams(pathname, nextQuery, nextSort, nextPage, nextFilters));
+  }, [pathname, router]);
+  const handleSearchCommit = useCallback4((nextQuery) => {
     if (nextQuery === appliedQuery) {
       return;
     }
     setAppliedQuery(nextQuery);
     setCurrentPage(1);
     setPageInput("1");
-    replaceUrlParams(pathname, nextQuery, sortValue, 1, appliedFilters);
-  }, [appliedFilters, appliedQuery, pathname, sortValue]);
-  const handlePageChange = useCallback3((nextPage) => {
+    replaceLocation(nextQuery, sortValue, 1, appliedFilters);
+  }, [appliedFilters, appliedQuery, replaceLocation, sortValue]);
+  const handlePageChange = useCallback4((nextPage) => {
     const safePage = Math.min(Math.max(nextPage, 1), totalPages);
     setCurrentPage(safePage);
     setPageInput(String(safePage));
-    replaceUrlParams(pathname, appliedQuery, sortValue, safePage, appliedFilters);
-  }, [appliedFilters, appliedQuery, pathname, sortValue, totalPages]);
-  const handlePageInputCommit = useCallback3(() => {
+    replaceLocation(appliedQuery, sortValue, safePage, appliedFilters);
+  }, [appliedFilters, appliedQuery, replaceLocation, sortValue, totalPages]);
+  const handlePageInputCommit = useCallback4(() => {
     const parsedPage = parsePageParam(pageInput);
     handlePageChange(parsedPage);
   }, [handlePageChange, pageInput]);
-  const toggleSort = useCallback3((fieldName) => {
+  const toggleSort = useCallback4((fieldName) => {
     const nextSortFields = sortFields.filter((item) => item !== fieldName && item !== `-${fieldName}`);
     const currentSort = sortFields.find((item) => item === fieldName || item === `-${fieldName}`);
     if (currentSort === void 0) {
@@ -2371,9 +2713,9 @@ function ModelPage({ client, basePath, slug }) {
     setSortValue(nextSortValue);
     setCurrentPage(1);
     setPageInput("1");
-    replaceUrlParams(pathname, appliedQuery, nextSortValue, 1, appliedFilters);
-  }, [appliedFilters, appliedQuery, pathname, sortFields]);
-  const handleFilterChange = useCallback3((filterSlug, value) => {
+    replaceLocation(appliedQuery, nextSortValue, 1, appliedFilters);
+  }, [appliedFilters, appliedQuery, replaceLocation, sortFields]);
+  const handleFilterChange = useCallback4((filterSlug, value) => {
     const nextFilters = {
       ...appliedFilters,
       [filterSlug]: value
@@ -2384,18 +2726,18 @@ function ModelPage({ client, basePath, slug }) {
     setAppliedFilters(nextFilters);
     setCurrentPage(1);
     setPageInput("1");
-    replaceUrlParams(pathname, appliedQuery, sortValue, 1, nextFilters);
-  }, [appliedFilters, appliedQuery, pathname, sortValue]);
-  const handleResetFilters = useCallback3(() => {
+    replaceLocation(appliedQuery, sortValue, 1, nextFilters);
+  }, [appliedFilters, appliedQuery, replaceLocation, sortValue]);
+  const handleResetFilters = useCallback4(() => {
     if (Object.keys(appliedFilters).length === 0) {
       return;
     }
     setAppliedFilters({});
     setCurrentPage(1);
     setPageInput("1");
-    replaceUrlParams(pathname, appliedQuery, sortValue, 1, {});
-  }, [appliedFilters, appliedQuery, pathname, sortValue]);
-  const openSingleDeletePreview = useCallback3(async (rowId) => {
+    replaceLocation(appliedQuery, sortValue, 1, {});
+  }, [appliedFilters, appliedQuery, replaceLocation, sortValue]);
+  const openSingleDeletePreview = useCallback4(async (rowId) => {
     setPendingDeleteIds([rowId]);
     setPendingDeleteMode("single");
     setDeletePreviewOpen(true);
@@ -2411,7 +2753,7 @@ function ModelPage({ client, basePath, slug }) {
       setIsDeletePreviewLoading(false);
     }
   }, [client, slug, t]);
-  const openBulkDeletePreview = useCallback3(async () => {
+  const openBulkDeletePreview = useCallback4(async () => {
     if (selectedIds.length === 0) {
       return;
     }
@@ -2431,7 +2773,7 @@ function ModelPage({ client, basePath, slug }) {
       setBulkActionMenuAnchor(null);
     }
   }, [client, selectedIds, slug, t]);
-  const handleConfirmDelete = useCallback3(async () => {
+  const handleConfirmDelete = useCallback4(async () => {
     if (pendingDeleteIds.length === 0) {
       return;
     }
@@ -2454,7 +2796,7 @@ function ModelPage({ client, basePath, slug }) {
       setIsDeleteSubmitting(false);
     }
   }, [client, pendingDeleteIds, pendingDeleteMode, refresh, slug, t]);
-  const handleRunNamedBulkAction = useCallback3(async (actionSlug) => {
+  const handleRunNamedBulkAction = useCallback4(async (actionSlug) => {
     if (!actionSlug || selectedIds.length === 0) {
       return;
     }
@@ -2470,12 +2812,12 @@ function ModelPage({ client, basePath, slug }) {
       setError(reason instanceof Error ? reason.message : t("object_action_error"));
     }
   }, [client, openBulkDeletePreview, refresh, selectedIds, slug, t]);
-  const handleRowDelete = useCallback3(async (rowId) => {
+  const handleRowDelete = useCallback4(async (rowId) => {
     setRowActionMenuAnchor(null);
     setRowActionMenuId(null);
     await openSingleDeletePreview(rowId);
   }, [openSingleDeletePreview]);
-  const handleToggleSelection = useCallback3((rowId, checked) => {
+  const handleToggleSelection = useCallback4((rowId, checked) => {
     setSelectedIds((current) => {
       const rowKey = String(rowId);
       if (checked) {
@@ -2487,7 +2829,7 @@ function ModelPage({ client, basePath, slug }) {
       return current.filter((item) => String(item) !== rowKey);
     });
   }, []);
-  const handleToggleAllVisible = useCallback3((checked) => {
+  const handleToggleAllVisible = useCallback4((checked) => {
     if (!meta) {
       return;
     }
@@ -2497,26 +2839,172 @@ function ModelPage({ client, basePath, slug }) {
     }
     setSelectedIds([]);
   }, [meta, rows]);
-  const handleOpenRowMenu = useCallback3((event, rowId) => {
+  const handleOpenRowMenu = useCallback4((event, rowId) => {
     setRowActionMenuAnchor(event.currentTarget);
     setRowActionMenuId(rowId);
   }, []);
-  if (!isLoading && error && !data) {
-    return /* @__PURE__ */ jsx18(Alert4, { severity: "error", children: error });
+  return {
+    allVisibleSelected,
+    appliedFilters,
+    appliedQuery,
+    bulkActionMenuAnchor,
+    bulkActions,
+    createOpen,
+    currentPage,
+    data,
+    deletePreview,
+    deletePreviewError,
+    deletePreviewOpen,
+    error,
+    fieldMap,
+    filtersOpen,
+    handleConfirmDelete,
+    handleFilterChange,
+    handleOpenRowMenu,
+    handlePageChange,
+    handlePageInputCommit,
+    handleResetFilters,
+    handleRowDelete,
+    handleRunNamedBulkAction,
+    handleSearchCommit,
+    handleToggleAllVisible,
+    handleToggleSelection,
+    hasListFilters,
+    hasVisibleSelection,
+    isDeletePreviewLoading,
+    isDeleteSubmitting,
+    isLoading,
+    listFields,
+    listFilters,
+    meta,
+    pageInput,
+    pendingDeleteIds,
+    pendingDeleteMode,
+    refresh,
+    rowActionMenuAnchor,
+    rowActionMenuId,
+    rows,
+    selectedIdSet,
+    selectedIds,
+    setBulkActionMenuAnchor,
+    setCreateOpen,
+    setDeletePreview,
+    setDeletePreviewError,
+    setDeletePreviewOpen,
+    setFiltersOpen,
+    setPageInput,
+    setPendingDeleteIds,
+    setRowActionMenuAnchor,
+    setRowActionMenuId,
+    sortFields,
+    toggleSort,
+    total,
+    totalPages
+  };
+}
+function requestListItems(client, slug, params, requestKey) {
+  const bucket = getClientCacheBucket(client);
+  const cachedResponse = bucket.listResponseCache.get(requestKey);
+  if (cachedResponse) {
+    return Promise.resolve(cachedResponse);
   }
-  if (!data || !meta) {
-    return /* @__PURE__ */ jsx18(ModelPageSkeleton, {});
+  const existingRequest = bucket.inFlightListRequests.get(requestKey);
+  if (existingRequest) {
+    return existingRequest;
   }
-  return /* @__PURE__ */ jsxs12(Stack9, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx18(
+  const cacheVersion = getModelCacheVersion(client, slug);
+  const request = client.getItems(slug, params).then((response) => {
+    if (getModelCacheVersion(client, slug) === cacheVersion) {
+      setCachedListResponse(client, requestKey, response);
+    }
+    return response;
+  }).finally(() => {
+    bucket.inFlightListRequests.delete(requestKey);
+  });
+  bucket.inFlightListRequests.set(requestKey, request);
+  return request;
+}
+function parsePageParam(value) {
+  const parsedValue = Number(value);
+  if (!Number.isFinite(parsedValue) || parsedValue < 1) {
+    return 1;
+  }
+  return Math.floor(parsedValue);
+}
+function extractFilterParams(params) {
+  const result = {};
+  for (const [key, value] of params.entries()) {
+    if (key === "q" || key === "sort" || key === "page") {
+      continue;
+    }
+    if (value) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+// src/components/model-page/Skeletons.tsx
+import { Box as Box8, Paper as Paper5, Skeleton as Skeleton3, Stack as Stack8 } from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function ModelPageSkeleton() {
+  return /* @__PURE__ */ jsxs11(Stack8, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx18(MainHeaderSkeleton, { titleWidth: 240, subtitleWidth: "38%" }),
+    /* @__PURE__ */ jsx18(Paper5, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs11(Stack8, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
+      /* @__PURE__ */ jsx18(Skeleton3, { variant: "rounded", width: 360, height: 40 }),
+      /* @__PURE__ */ jsx18(Skeleton3, { variant: "rounded", width: 128, height: 40 }),
+      /* @__PURE__ */ jsx18(Box8, { sx: { flex: 1 } }),
+      /* @__PURE__ */ jsx18(Skeleton3, { variant: "rounded", width: 110, height: 24 })
+    ] }) }),
+    /* @__PURE__ */ jsx18(Paper5, { sx: { borderRadius: "10px", flex: 1, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx18(ModelTableSkeleton, {}) })
+  ] });
+}
+function ModelTableSkeleton() {
+  return /* @__PURE__ */ jsx18(Box8, { sx: { height: "100%", overflow: "auto", p: 1.5 }, children: /* @__PURE__ */ jsxs11(Stack8, { spacing: 1, children: [
+    /* @__PURE__ */ jsx18(Skeleton3, { variant: "rounded", width: "100%", height: 42 }),
+    Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx18(Skeleton3, { variant: "rounded", width: "100%", height: 48 }, index))
+  ] }) });
+}
+
+// src/components/ModelPage.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var SEARCH_DEBOUNCE_MS = 300;
+var CHECKBOX_COLUMN_WIDTH = 56;
+var ACTIONS_COLUMN_WIDTH = 56;
+function ModelPage({ client, basePath, slug, router }) {
+  var _a, _b;
+  const locale = useAdminLocale();
+  const t = useAdminTranslation();
+  const resolvedRouter = useXLAdminRouter(router);
+  const location = useXLAdminLocation(resolvedRouter);
+  const theme = useTheme2();
+  const isMobile = useMediaQuery2(theme.breakpoints.down("md"));
+  const controller = useModelPageController({
+    client,
+    slug,
+    pathname: location.pathname,
+    locationSearch: location.search,
+    router: resolvedRouter,
+    t
+  });
+  useAdminDocumentTitle(t("admin_title"), (_b = (_a = controller.meta) == null ? void 0 : _a.title) != null ? _b : slug);
+  if (!controller.isLoading && controller.error && !controller.data) {
+    return /* @__PURE__ */ jsx19(Alert5, { severity: "error", children: controller.error });
+  }
+  if (!controller.data || !controller.meta) {
+    return /* @__PURE__ */ jsx19(ModelPageSkeleton, {});
+  }
+  const meta = controller.meta;
+  return /* @__PURE__ */ jsx19(XLAdminRouterProvider, { router: resolvedRouter, children: /* @__PURE__ */ jsxs12(Stack9, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx19(
       MainHeader,
       {
-        title: meta.title,
-        actions: /* @__PURE__ */ jsx18(Tooltip, { title: t("create"), children: /* @__PURE__ */ jsx18(
+        title: controller.meta.title,
+        actions: /* @__PURE__ */ jsx19(Tooltip, { title: t("create"), children: /* @__PURE__ */ jsx19(
           IconButton3,
           {
             "aria-label": t("create"),
-            onClick: () => setCreateOpen(true),
+            onClick: () => controller.setCreateOpen(true),
             sx: {
               width: 30,
               height: 30,
@@ -2527,14 +3015,14 @@ function ModelPage({ client, basePath, slug }) {
                 backgroundColor: "primary.dark"
               }
             },
-            children: /* @__PURE__ */ jsx18(AddIcon, { fontSize: "small" })
+            children: /* @__PURE__ */ jsx19(AddIcon, { fontSize: "small" })
           }
         ) }),
-        subtitle: `${meta.slug} \xB7 ${t("objects_count", { count: total })}`,
-        details: meta.description ? /* @__PURE__ */ jsx18(Typography5, { color: "text.secondary", sx: { fontSize: 14, lineHeight: 1.45 }, children: meta.description }) : void 0
+        subtitle: `${controller.meta.slug} | ${t("objects_count", { count: controller.total })}`,
+        details: controller.meta.description ? /* @__PURE__ */ jsx19(Typography5, { color: "text.secondary", sx: { fontSize: 14, lineHeight: 1.45 }, children: controller.meta.description }) : void 0
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       Paper6,
       {
         sx: {
@@ -2543,61 +3031,61 @@ function ModelPage({ client, basePath, slug }) {
           flexShrink: 0
         },
         children: /* @__PURE__ */ jsxs12(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
-          /* @__PURE__ */ jsx18(Stack9, { direction: { xs: "column", xl: "row" }, spacing: 1.5, sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(Stack9, { direction: { xs: "column", xl: "row" }, spacing: 1.5, sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx19(
             SearchField,
             {
-              value: appliedQuery,
-              onCommit: handleSearchCommit,
+              value: controller.appliedQuery,
+              onCommit: controller.handleSearchCommit,
               debounceMs: SEARCH_DEBOUNCE_MS,
               placeholder: t("search")
             }
           ) }),
-          selectedIds.length > 0 ? /* @__PURE__ */ jsxs12(Stack9, { direction: "row", spacing: 1, sx: { flex: { lg: 1 }, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx18(
+          controller.selectedIds.length > 0 ? /* @__PURE__ */ jsxs12(Stack9, { direction: "row", spacing: 1, sx: { flex: { lg: 1 }, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx19(
               Button4,
               {
                 variant: "outlined",
-                endIcon: /* @__PURE__ */ jsx18(ExpandMoreIcon4, {}),
-                onClick: (event) => setBulkActionMenuAnchor(event.currentTarget),
+                endIcon: /* @__PURE__ */ jsx19(ExpandMoreIcon4, {}),
+                onClick: (event) => controller.setBulkActionMenuAnchor(event.currentTarget),
                 children: t("actions")
               }
             ),
-            /* @__PURE__ */ jsx18(Typography5, { color: "text.secondary", sx: { alignSelf: "center" }, children: t("selected_count", { count: selectedIds.length }) })
+            /* @__PURE__ */ jsx19(Typography5, { color: "text.secondary", sx: { alignSelf: "center" }, children: t("selected_count", { count: controller.selectedIds.length }) })
           ] }) : null,
           /* @__PURE__ */ jsxs12(Stack9, { direction: "row", spacing: 1, alignItems: "center", sx: { marginLeft: "auto" }, children: [
-            isMobile && hasListFilters ? /* @__PURE__ */ jsx18(Tooltip, { title: t("filters"), children: /* @__PURE__ */ jsx18(
+            isMobile && controller.hasListFilters ? /* @__PURE__ */ jsx19(Tooltip, { title: t("filters"), children: /* @__PURE__ */ jsx19(
               IconButton3,
               {
                 size: "small",
                 "aria-label": t("filters"),
-                onClick: () => setFiltersOpen(true),
-                children: /* @__PURE__ */ jsx18(FilterListIcon, { fontSize: "small" })
+                onClick: () => controller.setFiltersOpen(true),
+                children: /* @__PURE__ */ jsx19(FilterListIcon, { fontSize: "small" })
               }
             ) }) : null,
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(
               IconButton3,
               {
                 size: "small",
-                onClick: () => handlePageChange(currentPage - 1),
-                disabled: currentPage <= 1,
+                onClick: () => controller.handlePageChange(controller.currentPage - 1),
+                disabled: controller.currentPage <= 1,
                 sx: { mr: "-5px" },
-                children: /* @__PURE__ */ jsx18(ChevronLeftIcon, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx19(ChevronLeftIcon, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(
               InputBase,
               {
-                value: pageInput,
-                onChange: (event) => setPageInput(event.target.value.replace(/[^\d]/g, "") || "1"),
-                onBlur: handlePageInputCommit,
+                value: controller.pageInput,
+                onChange: (event) => controller.setPageInput(event.target.value.replace(/[^\d]/g, "") || "1"),
+                onBlur: controller.handlePageInputCommit,
                 onKeyDown: (event) => {
                   if (event.key === "Enter") {
-                    handlePageInputCommit();
+                    controller.handlePageInputCommit();
                   }
                 },
                 inputProps: { inputMode: "numeric" },
                 sx: {
-                  width: `${Math.max(String(totalPages).length, String(currentPage).length, 1)}ch`,
+                  width: `${Math.max(String(controller.totalPages).length, String(controller.currentPage).length, 1)}ch`,
                   minWidth: "1ch",
                   mr: 0.5,
                   fontSize: "1rem",
@@ -2621,18 +3109,18 @@ function ModelPage({ client, basePath, slug }) {
                 sx: { minWidth: "auto", fontSize: "1rem", lineHeight: "1rem" },
                 children: [
                   "/ ",
-                  totalPages
+                  controller.totalPages
                 ]
               }
             ),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(
               IconButton3,
               {
                 size: "small",
-                onClick: () => handlePageChange(currentPage + 1),
-                disabled: currentPage >= totalPages,
+                onClick: () => controller.handlePageChange(controller.currentPage + 1),
+                disabled: controller.currentPage >= controller.totalPages,
                 sx: { ml: "-5px" },
-                children: /* @__PURE__ */ jsx18(ChevronRightIcon, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx19(ChevronRightIcon, { fontSize: "small" })
               }
             )
           ] })
@@ -2640,7 +3128,7 @@ function ModelPage({ client, basePath, slug }) {
       }
     ),
     /* @__PURE__ */ jsxs12(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { flex: 1, minHeight: 0 }, children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         Paper6,
         {
           sx: {
@@ -2650,9 +3138,9 @@ function ModelPage({ client, basePath, slug }) {
             minHeight: 0,
             overflow: "hidden"
           },
-          children: isLoading ? /* @__PURE__ */ jsx18(ModelTableSkeleton, {}) : /* @__PURE__ */ jsx18(Box9, { sx: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs12(Table, { stickyHeader: true, size: "small", sx: { tableLayout: "fixed" }, children: [
-            /* @__PURE__ */ jsx18(TableHead, { children: /* @__PURE__ */ jsxs12(TableRow2, { children: [
-              /* @__PURE__ */ jsx18(
+          children: controller.isLoading ? /* @__PURE__ */ jsx19(ModelTableSkeleton, {}) : /* @__PURE__ */ jsx19(Box9, { sx: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs12(Table, { stickyHeader: true, size: "small", sx: { tableLayout: "fixed" }, children: [
+            /* @__PURE__ */ jsx19(TableHead, { children: /* @__PURE__ */ jsxs12(TableRow2, { children: [
+              /* @__PURE__ */ jsx19(
                 TableCell2,
                 {
                   padding: "none",
@@ -2665,22 +3153,22 @@ function ModelPage({ client, basePath, slug }) {
                     textAlign: "center",
                     px: 1
                   },
-                  children: /* @__PURE__ */ jsx18(
+                  children: /* @__PURE__ */ jsx19(
                     Checkbox2,
                     {
-                      checked: allVisibleSelected,
-                      indeterminate: !allVisibleSelected && hasVisibleSelection,
-                      onChange: (_, checked) => handleToggleAllVisible(checked)
+                      checked: controller.allVisibleSelected,
+                      indeterminate: !controller.allVisibleSelected && controller.hasVisibleSelection,
+                      onChange: (_, checked) => controller.handleToggleAllVisible(checked)
                     }
                   )
                 }
               ),
-              listFields.map((fieldName) => {
+              controller.listFields.map((fieldName) => {
                 var _a2, _b2;
-                const field = fieldMap.get(fieldName);
-                const sortDirection = resolveSortDirection(sortFields, fieldName);
+                const field = controller.fieldMap.get(fieldName);
+                const sortDirection = resolveSortDirection(controller.sortFields, fieldName);
                 const isSortable = resolveFieldSortable(field);
-                return /* @__PURE__ */ jsx18(
+                return /* @__PURE__ */ jsx19(
                   TableCell2,
                   {
                     sortDirection: sortDirection != null ? sortDirection : false,
@@ -2692,8 +3180,8 @@ function ModelPage({ client, basePath, slug }) {
                       minWidth: getListFieldWidthPx(field),
                       maxWidth: getListFieldWidthPx(field)
                     },
-                    onClick: isSortable ? () => toggleSort(fieldName) : void 0,
-                    children: isSortable ? /* @__PURE__ */ jsx18(
+                    onClick: isSortable ? () => controller.toggleSort(fieldName) : void 0,
+                    children: isSortable ? /* @__PURE__ */ jsx19(
                       TableSortLabel,
                       {
                         active: Boolean(sortDirection),
@@ -2707,7 +3195,7 @@ function ModelPage({ client, basePath, slug }) {
                         },
                         children: (_a2 = field == null ? void 0 : field.label) != null ? _a2 : fieldName
                       }
-                    ) : /* @__PURE__ */ jsx18(Typography5, { component: "span", sx: {
+                    ) : /* @__PURE__ */ jsx19(Typography5, { component: "span", sx: {
                       fontSize: 14,
                       fontWeight: 700,
                       color: "rgba(255, 255, 255, 0.96)"
@@ -2716,7 +3204,7 @@ function ModelPage({ client, basePath, slug }) {
                   fieldName
                 );
               }),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 TableCell2,
                 {
                   align: "right",
@@ -2729,21 +3217,21 @@ function ModelPage({ client, basePath, slug }) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx18(TableBody, { children: rows.map((row) => {
+            /* @__PURE__ */ jsx19(TableBody, { children: controller.rows.map((row) => {
               const rowId = row[meta.pk_field];
-              return /* @__PURE__ */ jsx18(
+              return /* @__PURE__ */ jsx19(
                 ListRow,
                 {
                   row,
                   pkField: meta.pk_field,
-                  listFields,
+                  listFields: controller.listFields,
                   basePath,
                   slug,
                   locale,
-                  fieldMap,
-                  isSelected: selectedIdSet.has(String(rowId)),
-                  onToggleSelection: handleToggleSelection,
-                  onOpenMenu: handleOpenRowMenu
+                  fieldMap: controller.fieldMap,
+                  isSelected: controller.selectedIdSet.has(String(rowId)),
+                  onToggleSelection: controller.handleToggleSelection,
+                  onOpenMenu: controller.handleOpenRowMenu
                 },
                 String(rowId)
               );
@@ -2751,43 +3239,50 @@ function ModelPage({ client, basePath, slug }) {
           ] }) })
         }
       ),
-      !isMobile && hasListFilters ? /* @__PURE__ */ jsx18(
+      !isMobile && controller.hasListFilters ? /* @__PURE__ */ jsx19(
         ListFiltersSidebar,
         {
           client,
           slug,
-          filters: listFilters,
-          values: appliedFilters,
-          onChange: handleFilterChange,
-          onReset: handleResetFilters,
+          filters: controller.listFilters,
+          values: controller.appliedFilters,
+          onChange: controller.handleFilterChange,
+          onReset: controller.handleResetFilters,
           debounceMs: SEARCH_DEBOUNCE_MS
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       Menu,
       {
-        anchorEl: bulkActionMenuAnchor,
-        open: Boolean(bulkActionMenuAnchor),
-        onClose: () => setBulkActionMenuAnchor(null),
-        children: bulkActions.map((action) => /* @__PURE__ */ jsx18(MenuItem2, { onClick: () => void handleRunNamedBulkAction(action.slug), children: action.label }, action.slug))
+        anchorEl: controller.bulkActionMenuAnchor,
+        open: Boolean(controller.bulkActionMenuAnchor),
+        onClose: () => controller.setBulkActionMenuAnchor(null),
+        children: controller.bulkActions.map((action) => /* @__PURE__ */ jsx19(
+          MenuItem2,
+          {
+            onClick: () => void controller.handleRunNamedBulkAction(action.slug),
+            children: action.label
+          },
+          action.slug
+        ))
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       Menu,
       {
-        anchorEl: rowActionMenuAnchor,
-        open: Boolean(rowActionMenuAnchor),
+        anchorEl: controller.rowActionMenuAnchor,
+        open: Boolean(controller.rowActionMenuAnchor),
         onClose: () => {
-          setRowActionMenuAnchor(null);
-          setRowActionMenuId(null);
+          controller.setRowActionMenuAnchor(null);
+          controller.setRowActionMenuId(null);
         },
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           MenuItem2,
           {
             onClick: () => {
-              if (rowActionMenuId !== null) {
-                void handleRowDelete(rowActionMenuId);
+              if (controller.rowActionMenuId !== null) {
+                void controller.handleRowDelete(controller.rowActionMenuId);
               }
             },
             children: t("delete")
@@ -2795,12 +3290,12 @@ function ModelPage({ client, basePath, slug }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       FormDialog,
       {
-        open: createOpen,
-        onClose: () => setCreateOpen(false),
-        onSuccess: () => void refresh(),
+        open: controller.createOpen,
+        onClose: () => controller.setCreateOpen(false),
+        onSuccess: () => void controller.refresh(),
         title: `${t("create")}: ${meta.title}`,
         slug,
         mode: "create",
@@ -2811,8 +3306,8 @@ function ModelPage({ client, basePath, slug }) {
     /* @__PURE__ */ jsxs12(
       Dialog3,
       {
-        open: filtersOpen,
-        onClose: () => setFiltersOpen(false),
+        open: controller.filtersOpen,
+        onClose: () => controller.setFiltersOpen(false),
         fullWidth: true,
         maxWidth: "xs",
         slotProps: {
@@ -2829,44 +3324,44 @@ function ModelPage({ client, basePath, slug }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsx18(DialogTitle3, { children: t("filters") }),
-          /* @__PURE__ */ jsx18(DialogContent3, { sx: { px: 2, pb: 2 }, children: hasListFilters ? /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(DialogTitle3, { children: t("filters") }),
+          /* @__PURE__ */ jsx19(DialogContent3, { sx: { px: 2, pb: 2 }, children: controller.hasListFilters ? /* @__PURE__ */ jsx19(
             ListFiltersSidebar,
             {
               client,
               slug,
-              filters: listFilters,
-              values: appliedFilters,
-              onChange: handleFilterChange,
-              onReset: handleResetFilters,
+              filters: controller.listFilters,
+              values: controller.appliedFilters,
+              onChange: controller.handleFilterChange,
+              onReset: controller.handleResetFilters,
               debounceMs: SEARCH_DEBOUNCE_MS
             }
           ) : null })
         ]
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       DeletePreviewDialog,
       {
-        open: deletePreviewOpen,
-        title: pendingDeleteMode === "single" ? t("delete_object_title") : t("delete_bulk_title"),
-        preview: deletePreview,
-        error: deletePreviewError,
-        isLoading: isDeletePreviewLoading,
-        isSubmitting: isDeleteSubmitting,
+        open: controller.deletePreviewOpen,
+        title: controller.pendingDeleteMode === "single" ? t("delete_object_title") : t("delete_bulk_title"),
+        preview: controller.deletePreview,
+        error: controller.deletePreviewError,
+        isLoading: controller.isDeletePreviewLoading,
+        isSubmitting: controller.isDeleteSubmitting,
         onClose: () => {
-          if (isDeleteSubmitting) {
+          if (controller.isDeleteSubmitting) {
             return;
           }
-          setDeletePreviewOpen(false);
-          setDeletePreview(null);
-          setDeletePreviewError(null);
-          setPendingDeleteIds([]);
+          controller.setDeletePreviewOpen(false);
+          controller.setDeletePreview(null);
+          controller.setDeletePreviewError(null);
+          controller.setPendingDeleteIds([]);
         },
-        onConfirm: () => void handleConfirmDelete()
+        onConfirm: () => void controller.handleConfirmDelete()
       }
     )
-  ] });
+  ] }) });
 }
 function resolveSortDirection(sortFields, fieldName) {
   if (sortFields.includes(`-${fieldName}`)) return "desc";
@@ -2879,89 +3374,12 @@ function resolveFieldSortable(field) {
   }
   return field.is_sortable && !field.is_relation_many && field.input_kind !== "relation-multiple" && !field.is_virtual;
 }
-function requestListItems(client, slug, params) {
-  const requestKey = buildListRequestKey(slug, params);
-  const cachedResponse = listResponseCache.get(requestKey);
-  if (cachedResponse) {
-    return Promise.resolve(cachedResponse);
-  }
-  const existingRequest = inFlightListRequests.get(requestKey);
-  if (existingRequest) {
-    return existingRequest;
-  }
-  const request = client.getItems(slug, params).then((response) => {
-    listResponseCache.set(requestKey, response);
-    return response;
-  }).finally(() => {
-    inFlightListRequests.delete(requestKey);
-  });
-  inFlightListRequests.set(requestKey, request);
-  return request;
-}
-function buildListRequestKey(slug, params) {
-  const { q, sort, limit, offset, ...filters } = params;
-  return JSON.stringify({
-    slug,
-    q: q != null ? q : null,
-    sort: sort != null ? sort : null,
-    limit: limit != null ? limit : DEFAULT_PAGE_SIZE,
-    offset: offset != null ? offset : 0,
-    filters: Object.fromEntries(
-      Object.entries(filters).filter(([, value]) => value !== void 0 && value !== null && value !== "").sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
-    )
-  });
-}
-function findCachedListResponse(slug, query, sort, limit, offset, filters) {
-  var _a;
-  return (_a = listResponseCache.get(buildListRequestKey(slug, { q: query, sort, limit, offset, ...filters }))) != null ? _a : null;
-}
-function parsePageParam(value) {
-  const parsedValue = Number(value);
-  if (!Number.isFinite(parsedValue) || parsedValue < 1) {
-    return 1;
-  }
-  return Math.floor(parsedValue);
-}
-function extractFilterParams(params) {
-  const result = {};
-  for (const [key, value] of params.entries()) {
-    if (key === "q" || key === "sort" || key === "page") {
-      continue;
-    }
-    if (value) {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-function replaceUrlParams(pathname, query, sort, page, filters) {
-  const params = new URLSearchParams();
-  if (query) {
-    params.set("q", query);
-  }
-  if (sort) {
-    params.set("sort", sort);
-  }
-  if (page > 1) {
-    params.set("page", String(page));
-  }
-  for (const [key, value] of Object.entries(filters)) {
-    if (value) {
-      params.set(key, value);
-    }
-  }
-  const nextPath = pathname != null ? pathname : window.location.pathname;
-  const nextUrl = params.toString() ? `${nextPath}?${params.toString()}` : nextPath;
-  window.history.replaceState(window.history.state, "", nextUrl);
-}
 
 // src/components/ObjectPage.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo8, useState as useState9 } from "react";
-import { usePathname as usePathname2, useRouter } from "next/navigation.js";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import MoreVertIcon2 from "@mui/icons-material/MoreVert";
 import {
-  Alert as Alert5,
+  Alert as Alert6,
   Box as Box12,
   Button as Button5,
   IconButton as IconButton4,
@@ -2979,8 +3397,8 @@ import "dayjs/locale/en.js";
 import "dayjs/locale/ru.js";
 
 // src/components/object-page/ObjectField.tsx
-import { memo as memo6, useCallback as useCallback4 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { memo as memo6, useCallback as useCallback5 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ObjectField = memo6(function ObjectField2({
   field,
   value,
@@ -2988,10 +3406,10 @@ var ObjectField = memo6(function ObjectField2({
   client,
   onFieldChange
 }) {
-  const handleChange = useCallback4((nextValue) => {
+  const handleChange = useCallback5((nextValue) => {
     onFieldChange(field.name, nextValue);
   }, [field.name, onFieldChange]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     FieldEditor,
     {
       field,
@@ -3005,37 +3423,45 @@ var ObjectField = memo6(function ObjectField2({
 
 // src/components/object-page/ObjectPageSkeleton.tsx
 import { Box as Box10, Paper as Paper7, Skeleton as Skeleton4, Stack as Stack10 } from "@mui/material";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function ObjectPageSkeleton() {
   return /* @__PURE__ */ jsxs13(Stack10, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx20(MainHeaderSkeleton, { titleWidth: 420, subtitleWidth: "32%" }),
-    /* @__PURE__ */ jsxs13(Stack10, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { flex: 1, minHeight: 0, alignItems: "stretch" }, children: [
-      /* @__PURE__ */ jsx20(Paper7, { sx: { borderRadius: "10px", flex: 1, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx20(Box10, { sx: { height: "100%", overflow: "auto", p: 2.5 }, children: /* @__PURE__ */ jsx20(Stack10, { spacing: 1.5, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx20(Skeleton4, { variant: "rounded", width: "100%", height: 56 }, index)) }) }) }),
-      /* @__PURE__ */ jsx20(
-        Paper7,
-        {
-          sx: {
-            width: { xs: "100%", lg: 280 },
-            flexShrink: 0,
-            borderRadius: "10px",
-            p: 1.5,
-            alignSelf: "flex-start"
-          },
-          children: /* @__PURE__ */ jsxs13(Stack10, { spacing: 1, children: [
-            /* @__PURE__ */ jsx20(Skeleton4, { variant: "text", width: 90, height: 28 }),
-            /* @__PURE__ */ jsx20(Skeleton4, { variant: "rounded", width: "100%", height: 40 }),
-            /* @__PURE__ */ jsx20(Skeleton4, { variant: "rounded", width: "100%", height: 40 })
-          ] })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx21(MainHeaderSkeleton, { titleWidth: 420, subtitleWidth: "32%" }),
+    /* @__PURE__ */ jsxs13(
+      Stack10,
+      {
+        direction: { xs: "column", lg: "row" },
+        spacing: 1.5,
+        sx: { flex: 1, minHeight: 0, alignItems: "stretch" },
+        children: [
+          /* @__PURE__ */ jsx21(Paper7, { sx: { borderRadius: "10px", flex: 1, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx21(Box10, { sx: { height: "100%", overflow: "auto", p: 2.5 }, children: /* @__PURE__ */ jsx21(Stack10, { spacing: 1.5, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx21(Skeleton4, { variant: "rounded", width: "100%", height: 56 }, index)) }) }) }),
+          /* @__PURE__ */ jsx21(
+            Paper7,
+            {
+              sx: {
+                width: { xs: "100%", lg: 280 },
+                flexShrink: 0,
+                borderRadius: "10px",
+                p: 1.5,
+                alignSelf: "flex-start"
+              },
+              children: /* @__PURE__ */ jsxs13(Stack10, { spacing: 1, children: [
+                /* @__PURE__ */ jsx21(Skeleton4, { variant: "text", width: 90, height: 28 }),
+                /* @__PURE__ */ jsx21(Skeleton4, { variant: "rounded", width: "100%", height: 40 }),
+                /* @__PURE__ */ jsx21(Skeleton4, { variant: "rounded", width: "100%", height: 40 })
+              ] })
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 
 // src/components/object-page/ReadonlyObjectField.tsx
 import { memo as memo7 } from "react";
 import { Box as Box11, Stack as Stack11, TextField as TextField4 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var ReadonlyObjectField = memo7(function ReadonlyObjectField2({
   field,
   value,
@@ -3044,7 +3470,7 @@ var ReadonlyObjectField = memo7(function ReadonlyObjectField2({
   var _a;
   const isMultiline = field.input_kind === "textarea" || field.input_kind === "json" || field.type.toLowerCase().includes("text") || value.includes("\n") || value.length > 120;
   return /* @__PURE__ */ jsxs14(Stack11, { spacing: 1, children: [
-    imageUrl ? /* @__PURE__ */ jsx21(
+    imageUrl ? /* @__PURE__ */ jsx22(
       Box11,
       {
         component: "img",
@@ -3061,7 +3487,7 @@ var ReadonlyObjectField = memo7(function ReadonlyObjectField2({
         }
       }
     ) : null,
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       TextField4,
       {
         label: field.label,
@@ -3077,47 +3503,75 @@ var ReadonlyObjectField = memo7(function ReadonlyObjectField2({
   ] });
 });
 
-// src/components/ObjectPage.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var detailResponseCache = /* @__PURE__ */ new Map();
-var inFlightDetailRequests = /* @__PURE__ */ new Map();
-function ObjectPage({ client, slug, id }) {
-  var _a, _b, _c, _d;
-  const locale = useAdminLocale();
-  const t = useAdminTranslation();
-  const router = useRouter();
-  const pathname = usePathname2();
-  const theme = useTheme3();
-  const isPhone = useMediaQuery3(theme.breakpoints.down("sm"));
-  const cacheKey = `${slug}:${id}`;
-  const [data, setData] = useState9(() => {
+// src/components/object-page/useObjectPageController.ts
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo9, useState as useState10 } from "react";
+
+// src/utils/isDeepEqual.ts
+function isDeepEqual(left, right) {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  if (left instanceof Date && right instanceof Date) {
+    return left.getTime() === right.getTime();
+  }
+  if (Array.isArray(left) && Array.isArray(right)) {
+    if (left.length !== right.length) {
+      return false;
+    }
+    return left.every((item, index) => isDeepEqual(item, right[index]));
+  }
+  if (isPlainObject(left) && isPlainObject(right)) {
+    const leftKeys = Object.keys(left).sort();
+    const rightKeys = Object.keys(right).sort();
+    if (!isDeepEqual(leftKeys, rightKeys)) {
+      return false;
+    }
+    return leftKeys.every((key) => isDeepEqual(left[key], right[key]));
+  }
+  return false;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/components/object-page/useObjectPageController.ts
+function useObjectPageController({
+  client,
+  slug,
+  id,
+  listPath,
+  router,
+  t
+}) {
+  var _a, _b, _c;
+  const cacheKey = buildDetailCacheKey(slug, id);
+  const [data, setData] = useState10(() => {
     var _a2;
-    return (_a2 = detailResponseCache.get(cacheKey)) != null ? _a2 : null;
+    return (_a2 = getClientCacheBucket(client).detailResponseCache.get(cacheKey)) != null ? _a2 : null;
   });
-  const [values, setValues] = useState9(() => {
+  const [values, setValues] = useState10(() => {
     var _a2, _b2;
-    return (_b2 = (_a2 = detailResponseCache.get(cacheKey)) == null ? void 0 : _a2.item) != null ? _b2 : {};
+    return (_b2 = (_a2 = getClientCacheBucket(client).detailResponseCache.get(cacheKey)) == null ? void 0 : _a2.item) != null ? _b2 : {};
   });
-  const [initialValues, setInitialValues] = useState9(() => {
+  const [initialValues, setInitialValues] = useState10(() => {
     var _a2, _b2;
-    return (_b2 = (_a2 = detailResponseCache.get(cacheKey)) == null ? void 0 : _a2.item) != null ? _b2 : {};
+    return (_b2 = (_a2 = getClientCacheBucket(client).detailResponseCache.get(cacheKey)) == null ? void 0 : _a2.item) != null ? _b2 : {};
   });
-  const [error, setError] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(data === null);
-  const [isSaving, setIsSaving] = useState9(false);
-  const [isDeleting, setIsDeleting] = useState9(false);
-  const [activeActionSlug, setActiveActionSlug] = useState9(null);
-  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState9(false);
-  const [deletePreview, setDeletePreview] = useState9(null);
-  const [isDeletePreviewLoading, setIsDeletePreviewLoading] = useState9(false);
-  const [deletePreviewError, setDeletePreviewError] = useState9(null);
-  const [actionsAnchorEl, setActionsAnchorEl] = useState9(null);
-  const listPath = useMemo8(() => pathname.split("/").slice(0, -1).join("/"), [pathname]);
-  const adminRootPath = useMemo8(() => listPath.split("/").slice(0, -1).join("/"), [listPath]);
-  useEffect9(() => {
+  const [error, setError] = useState10(null);
+  const [isLoading, setIsLoading] = useState10(data === null);
+  const [isSaving, setIsSaving] = useState10(false);
+  const [isDeleting, setIsDeleting] = useState10(false);
+  const [activeActionSlug, setActiveActionSlug] = useState10(null);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState10(false);
+  const [deletePreview, setDeletePreview] = useState10(null);
+  const [isDeletePreviewLoading, setIsDeletePreviewLoading] = useState10(false);
+  const [deletePreviewError, setDeletePreviewError] = useState10(null);
+  const [actionsAnchorEl, setActionsAnchorEl] = useState10(null);
+  useEffect10(() => {
     var _a2;
     let isMounted = true;
-    const cachedResponse = detailResponseCache.get(cacheKey);
+    const bucket = getClientCacheBucket(client);
+    const cachedResponse = bucket.detailResponseCache.get(cacheKey);
     if (cachedResponse) {
       setData(cachedResponse);
       setValues(cachedResponse.item);
@@ -3129,10 +3583,13 @@ function ObjectPage({ client, slug, id }) {
     }
     setIsLoading(true);
     setError(null);
-    const request = (_a2 = inFlightDetailRequests.get(cacheKey)) != null ? _a2 : client.getItem(slug, id);
-    inFlightDetailRequests.set(cacheKey, request);
+    const request = (_a2 = bucket.inFlightDetailRequests.get(cacheKey)) != null ? _a2 : client.getItem(slug, id);
+    bucket.inFlightDetailRequests.set(cacheKey, request);
+    const cacheVersion = getModelCacheVersion(client, slug);
     request.then((response) => {
-      detailResponseCache.set(cacheKey, response);
+      if (getModelCacheVersion(client, slug) === cacheVersion) {
+        setCachedDetailResponse(client, cacheKey, response);
+      }
       if (!isMounted) return;
       setData(response);
       setValues(response.item);
@@ -3141,8 +3598,8 @@ function ObjectPage({ client, slug, id }) {
       if (!isMounted) return;
       setError(reason instanceof Error ? reason.message : t("object_load_error"));
     }).finally(() => {
-      if (inFlightDetailRequests.get(cacheKey) === request) {
-        inFlightDetailRequests.delete(cacheKey);
+      if (bucket.inFlightDetailRequests.get(cacheKey) === request) {
+        bucket.inFlightDetailRequests.delete(cacheKey);
       }
       if (!isMounted) return;
       setIsLoading(false);
@@ -3154,25 +3611,25 @@ function ObjectPage({ client, slug, id }) {
   const meta = (_a = data == null ? void 0 : data.meta) != null ? _a : null;
   const detailFields = (_b = meta == null ? void 0 : meta.detail_fields) != null ? _b : [];
   const objectActions = (_c = meta == null ? void 0 : meta.object_actions) != null ? _c : [];
-  const fieldMap = useMemo8(
+  const fieldMap = useMemo9(
     () => {
       var _a2;
       return new Map(((_a2 = meta == null ? void 0 : meta.fields) != null ? _a2 : []).map((field) => [field.name, field]));
     },
     [meta == null ? void 0 : meta.fields]
   );
-  const editableFields = useMemo8(
+  const editableFields = useMemo9(
     () => {
       var _a2;
       return ((_a2 = meta == null ? void 0 : meta.fields) != null ? _a2 : []).filter((field) => meta == null ? void 0 : meta.update_fields.includes(field.name));
     },
     [meta == null ? void 0 : meta.fields, meta == null ? void 0 : meta.update_fields]
   );
-  const editableFieldNames = useMemo8(
+  const editableFieldNames = useMemo9(
     () => new Set(editableFields.map((field) => field.name)),
     [editableFields]
   );
-  const objectTitle = useMemo8(
+  const objectTitle = useMemo9(
     () => {
       var _a2;
       return String((_a2 = data == null ? void 0 : data.item._display) != null ? _a2 : meta ? `${meta.title} #${id}` : id);
@@ -3180,20 +3637,19 @@ function ObjectPage({ client, slug, id }) {
     [data, id, meta]
   );
   const isActionsMenuOpen = actionsAnchorEl !== null;
-  useAdminDocumentTitle(t("admin_title"), (_d = meta == null ? void 0 : meta.title) != null ? _d : slug, objectTitle);
-  const currentPayload = useMemo8(
+  const currentPayload = useMemo9(
     () => buildAdminPayload(values, editableFields),
     [editableFields, values]
   );
-  const initialPayload = useMemo8(
+  const initialPayload = useMemo9(
     () => buildAdminPayload(initialValues, editableFields),
     [editableFields, initialValues]
   );
-  const isDirty = useMemo8(
-    () => JSON.stringify(currentPayload) !== JSON.stringify(initialPayload),
+  const isDirty = useMemo9(
+    () => !isDeepEqual(currentPayload, initialPayload),
     [currentPayload, initialPayload]
   );
-  const handleFieldChange = useCallback5((fieldName, nextValue) => {
+  const handleFieldChange = useCallback6((fieldName, nextValue) => {
     setValues((current) => {
       if (Object.is(current[fieldName], nextValue)) {
         return current;
@@ -3201,7 +3657,7 @@ function ObjectPage({ client, slug, id }) {
       return { ...current, [fieldName]: nextValue };
     });
   }, []);
-  const handleSave = useCallback5(async () => {
+  const handleSave = useCallback6(async () => {
     if (!meta || !isDirty) {
       return;
     }
@@ -3210,7 +3666,8 @@ function ObjectPage({ client, slug, id }) {
     try {
       const response = await client.patchItem(slug, id, currentPayload);
       const nextDetail = { meta, item: response.item };
-      detailResponseCache.set(cacheKey, nextDetail);
+      invalidateModelCache(client, slug);
+      setCachedDetailResponse(client, cacheKey, nextDetail);
       setData(nextDetail);
       setValues(response.item);
       setInitialValues(response.item);
@@ -3220,40 +3677,31 @@ function ObjectPage({ client, slug, id }) {
       setIsSaving(false);
     }
   }, [cacheKey, client, currentPayload, id, isDirty, meta, slug, t]);
-  const handleDelete = useCallback5(async () => {
+  const handleDelete = useCallback6(async () => {
     setIsDeleting(true);
     setError(null);
     try {
       await client.deleteItem(slug, id);
-      detailResponseCache.delete(cacheKey);
+      invalidateModelCache(client, slug);
       router.push(listPath);
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : t("object_delete_error"));
       setIsDeleting(false);
       setDeleteConfirmOpen(false);
     }
-  }, [cacheKey, client, id, listPath, router, slug, t]);
-  const handleNavigateBack = useCallback5(() => {
-    if (typeof window !== "undefined" && document.referrer) {
-      try {
-        const referrerUrl = new URL(document.referrer);
-        if (referrerUrl.origin === window.location.origin && referrerUrl.pathname.startsWith(adminRootPath)) {
-          router.back();
-          return;
-        }
-      } catch {
-      }
-    }
+  }, [client, id, listPath, router, slug, t]);
+  const handleNavigateBack = useCallback6(() => {
     router.push(listPath);
-  }, [adminRootPath, listPath, router]);
-  const handleRunObjectAction = useCallback5(async (actionSlug) => {
+  }, [listPath, router]);
+  const handleRunObjectAction = useCallback6(async (actionSlug) => {
     setActiveActionSlug(actionSlug);
     setError(null);
     try {
       const response = await client.runObjectAction(slug, id, actionSlug);
       const nextDetail = data ? { ...data, item: response.item } : null;
       if (nextDetail) {
-        detailResponseCache.set(cacheKey, nextDetail);
+        invalidateModelCache(client, slug);
+        setCachedDetailResponse(client, cacheKey, nextDetail);
       }
       setData(nextDetail);
       setValues(response.item);
@@ -3264,7 +3712,7 @@ function ObjectPage({ client, slug, id }) {
       setActiveActionSlug(null);
     }
   }, [cacheKey, client, data, id, slug, t]);
-  const handleOpenDeletePreview = useCallback5(async () => {
+  const handleOpenDeletePreview = useCallback6(async () => {
     setActionsAnchorEl(null);
     setDeleteConfirmOpen(true);
     setDeletePreview(null);
@@ -3279,133 +3727,209 @@ function ObjectPage({ client, slug, id }) {
       setIsDeletePreviewLoading(false);
     }
   }, [client, id, slug, t]);
-  if (isLoading && !data) {
-    return /* @__PURE__ */ jsx22(ObjectPageSkeleton, {});
+  return {
+    actionsAnchorEl,
+    activeActionSlug,
+    data,
+    deleteConfirmOpen,
+    deletePreview,
+    deletePreviewError,
+    detailFields,
+    editableFieldNames,
+    error,
+    fieldMap,
+    handleDelete,
+    handleFieldChange,
+    handleNavigateBack,
+    handleOpenDeletePreview,
+    handleRunObjectAction,
+    handleSave,
+    initialValues,
+    isActionsMenuOpen,
+    isDeletePreviewLoading,
+    isDeleting,
+    isDirty,
+    isLoading,
+    isSaving,
+    meta,
+    objectActions,
+    objectTitle,
+    setActionsAnchorEl,
+    setDeleteConfirmOpen,
+    setDeletePreview,
+    setDeletePreviewError,
+    values
+  };
+}
+
+// src/components/ObjectPage.tsx
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function ObjectPage({ client, slug, id, router }) {
+  var _a, _b;
+  const locale = useAdminLocale();
+  const t = useAdminTranslation();
+  const resolvedRouter = useXLAdminRouter(router);
+  const location = useXLAdminLocation(resolvedRouter);
+  const pathname = location.pathname;
+  const theme = useTheme3();
+  const isPhone = useMediaQuery3(theme.breakpoints.down("sm"));
+  const listPath = pathname.split("/").slice(0, -1).join("/");
+  const controller = useObjectPageController({
+    client,
+    slug,
+    id,
+    listPath,
+    router: resolvedRouter,
+    t
+  });
+  useAdminDocumentTitle(t("admin_title"), (_b = (_a = controller.meta) == null ? void 0 : _a.title) != null ? _b : slug, controller.objectTitle);
+  if (controller.isLoading && !controller.data) {
+    return /* @__PURE__ */ jsx23(ObjectPageSkeleton, {});
   }
-  if (error && !data) {
-    return /* @__PURE__ */ jsx22(Alert5, { severity: "error", children: error });
+  if (controller.error && !controller.data) {
+    return /* @__PURE__ */ jsx23(Alert6, { severity: "error", children: controller.error });
   }
-  if (!data || !meta) {
-    return /* @__PURE__ */ jsx22(ObjectPageSkeleton, {});
+  if (!controller.data || !controller.meta) {
+    return /* @__PURE__ */ jsx23(ObjectPageSkeleton, {});
   }
-  return /* @__PURE__ */ jsxs15(LocalizationProvider2, { dateAdapter: AdapterDayjs2, adapterLocale: locale, children: [
+  return /* @__PURE__ */ jsx23(XLAdminRouterProvider, { router: resolvedRouter, children: /* @__PURE__ */ jsxs15(LocalizationProvider2, { dateAdapter: AdapterDayjs2, adapterLocale: locale, children: [
     /* @__PURE__ */ jsxs15(Stack12, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         MainHeader,
         {
-          title: objectTitle,
-          subtitle: meta.slug,
-          beforeSubtitle: /* @__PURE__ */ jsx22(
+          title: controller.objectTitle,
+          subtitle: controller.meta.slug,
+          beforeSubtitle: /* @__PURE__ */ jsx23(
             IconButton4,
             {
               "aria-label": t("back"),
-              onClick: handleNavigateBack,
+              onClick: controller.handleNavigateBack,
               size: "small",
               sx: { ml: -0.5 },
-              children: /* @__PURE__ */ jsx22(ArrowBackIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx23(ArrowBackIcon, { fontSize: "small" })
             }
           ),
-          actions: isPhone ? /* @__PURE__ */ jsx22(
+          actions: isPhone ? /* @__PURE__ */ jsx23(
             IconButton4,
             {
               "aria-label": t("actions"),
-              onClick: (event) => setActionsAnchorEl(event.currentTarget),
+              onClick: (event) => controller.setActionsAnchorEl(event.currentTarget),
               size: "small",
               sx: { mr: -0.5 },
-              children: /* @__PURE__ */ jsx22(MoreVertIcon2, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx23(MoreVertIcon2, { fontSize: "small" })
             }
           ) : void 0,
-          details: meta.description ? /* @__PURE__ */ jsx22(Typography6, { color: "text.secondary", sx: { fontSize: 14, lineHeight: 1.45 }, children: meta.description }) : void 0,
-          error
+          details: controller.meta.description ? /* @__PURE__ */ jsx23(Typography6, { color: "text.secondary", sx: { fontSize: 14, lineHeight: 1.45 }, children: controller.meta.description }) : void 0,
+          error: controller.error
         }
       ),
-      /* @__PURE__ */ jsxs15(Stack12, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { flex: 1, minHeight: 0, alignItems: "stretch" }, children: [
-        /* @__PURE__ */ jsx22(
-          Paper8,
-          {
-            sx: {
-              borderRadius: "10px",
-              flex: 1,
-              minHeight: 0,
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsx22(Box12, { component: "form", autoComplete: "off", sx: { height: "100%", overflow: "auto", p: 2.5 }, children: /* @__PURE__ */ jsx22(Stack12, { spacing: 1.5, children: detailFields.map((fieldName) => {
-              const field = fieldMap.get(fieldName);
-              if (!field) {
-                return null;
-              }
-              if (editableFieldNames.has(fieldName)) {
-                return /* @__PURE__ */ jsx22(
-                  ObjectField,
-                  {
-                    field,
-                    value: values[field.name],
-                    slug,
-                    client,
-                    onFieldChange: handleFieldChange
-                  },
-                  field.name
-                );
-              }
-              return /* @__PURE__ */ jsx22(
-                ReadonlyObjectField,
-                {
-                  field,
-                  value: formatAdminValue(values[field.name], { locale, field, pretty: true }),
-                  imageUrl: field.display_kind === "image" ? resolveAdminMediaUrl(values[field.name], field) : null
+      /* @__PURE__ */ jsxs15(
+        Stack12,
+        {
+          direction: { xs: "column", lg: "row" },
+          spacing: 1.5,
+          sx: { flex: 1, minHeight: 0, alignItems: "stretch" },
+          children: [
+            /* @__PURE__ */ jsx23(
+              Paper8,
+              {
+                sx: {
+                  borderRadius: "10px",
+                  flex: 1,
+                  minHeight: 0,
+                  overflow: "hidden"
                 },
-                field.name
-              );
-            }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsx22(
-          Paper8,
-          {
-            sx: {
-              width: { xs: "100%", lg: 280 },
-              flexShrink: 0,
-              borderRadius: "10px",
-              p: 1.5,
-              alignSelf: "flex-start",
-              position: { lg: "sticky" },
-              top: { lg: 0 },
-              display: isPhone ? "none" : void 0
-            },
-            children: /* @__PURE__ */ jsxs15(Stack12, { spacing: 1, children: [
-              /* @__PURE__ */ jsx22(Typography6, { variant: "subtitle2", color: "text.secondary", children: t("actions") }),
-              isDirty ? /* @__PURE__ */ jsx22(Button5, { variant: "contained", onClick: () => void handleSave(), disabled: isSaving, children: isSaving ? t("saving") : t("save") }) : null,
-              /* @__PURE__ */ jsx22(
-                Button5,
-                {
-                  variant: "outlined",
-                  color: "error",
-                  onClick: () => void handleOpenDeletePreview(),
-                  disabled: isDeleting,
-                  children: t("delete")
-                }
-              ),
-              objectActions.map((action) => /* @__PURE__ */ jsx22(
-                Button5,
-                {
-                  variant: "outlined",
-                  onClick: () => void handleRunObjectAction(action.slug),
-                  disabled: activeActionSlug !== null,
-                  children: activeActionSlug === action.slug ? t("executing") : action.label
+                children: /* @__PURE__ */ jsx23(Box12, { component: "form", autoComplete: "off", sx: { height: "100%", overflow: "auto", p: 2.5 }, children: /* @__PURE__ */ jsx23(Stack12, { spacing: 1.5, children: controller.detailFields.map((fieldName) => {
+                  const field = controller.fieldMap.get(fieldName);
+                  if (!field) {
+                    return null;
+                  }
+                  if (controller.editableFieldNames.has(fieldName)) {
+                    return /* @__PURE__ */ jsx23(
+                      ObjectField,
+                      {
+                        field,
+                        value: controller.values[field.name],
+                        slug,
+                        client,
+                        onFieldChange: controller.handleFieldChange
+                      },
+                      field.name
+                    );
+                  }
+                  return /* @__PURE__ */ jsx23(
+                    ReadonlyObjectField,
+                    {
+                      field,
+                      value: formatAdminValue(controller.values[field.name], {
+                        locale,
+                        field,
+                        pretty: true
+                      }),
+                      imageUrl: field.display_kind === "image" ? resolveAdminMediaUrl(controller.values[field.name], field) : null
+                    },
+                    field.name
+                  );
+                }) }) })
+              }
+            ),
+            /* @__PURE__ */ jsx23(
+              Paper8,
+              {
+                sx: {
+                  width: { xs: "100%", lg: 280 },
+                  flexShrink: 0,
+                  borderRadius: "10px",
+                  p: 1.5,
+                  alignSelf: "flex-start",
+                  position: { lg: "sticky" },
+                  top: { lg: 0 },
+                  display: isPhone ? "none" : void 0
                 },
-                action.slug
-              ))
-            ] })
-          }
-        )
-      ] })
+                children: /* @__PURE__ */ jsxs15(Stack12, { spacing: 1, children: [
+                  /* @__PURE__ */ jsx23(Typography6, { variant: "subtitle2", color: "text.secondary", children: t("actions") }),
+                  controller.isDirty ? /* @__PURE__ */ jsx23(
+                    Button5,
+                    {
+                      variant: "contained",
+                      onClick: () => void controller.handleSave(),
+                      disabled: controller.isSaving,
+                      children: controller.isSaving ? t("saving") : t("save")
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx23(
+                    Button5,
+                    {
+                      variant: "outlined",
+                      color: "error",
+                      onClick: () => void controller.handleOpenDeletePreview(),
+                      disabled: controller.isDeleting,
+                      children: t("delete")
+                    }
+                  ),
+                  controller.objectActions.map((action) => /* @__PURE__ */ jsx23(
+                    Button5,
+                    {
+                      variant: "outlined",
+                      onClick: () => void controller.handleRunObjectAction(action.slug),
+                      disabled: controller.activeActionSlug !== null,
+                      children: controller.activeActionSlug === action.slug ? t("executing") : action.label
+                    },
+                    action.slug
+                  ))
+                ] })
+              }
+            )
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs15(
       Menu2,
       {
-        anchorEl: actionsAnchorEl,
-        open: isActionsMenuOpen,
-        onClose: () => setActionsAnchorEl(null),
+        anchorEl: controller.actionsAnchorEl,
+        open: controller.isActionsMenuOpen,
+        onClose: () => controller.setActionsAnchorEl(null),
         slotProps: {
           paper: {
             sx: {
@@ -3416,67 +3940,66 @@ function ObjectPage({ client, slug, id }) {
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
         children: [
-          isDirty ? /* @__PURE__ */ jsx22(
+          controller.isDirty ? /* @__PURE__ */ jsx23(
             MenuItem3,
             {
               onClick: () => {
-                setActionsAnchorEl(null);
-                void handleSave();
+                controller.setActionsAnchorEl(null);
+                void controller.handleSave();
               },
-              disabled: isSaving,
-              children: isSaving ? t("saving") : t("save")
+              disabled: controller.isSaving,
+              children: controller.isSaving ? t("saving") : t("save")
             }
           ) : null,
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             MenuItem3,
             {
-              onClick: () => void handleOpenDeletePreview(),
-              disabled: isDeleting,
+              onClick: () => void controller.handleOpenDeletePreview(),
+              disabled: controller.isDeleting,
               sx: { color: "error.main" },
               children: t("delete")
             }
           ),
-          objectActions.map((action) => /* @__PURE__ */ jsx22(
+          controller.objectActions.map((action) => /* @__PURE__ */ jsx23(
             MenuItem3,
             {
               onClick: () => {
-                setActionsAnchorEl(null);
-                void handleRunObjectAction(action.slug);
+                controller.setActionsAnchorEl(null);
+                void controller.handleRunObjectAction(action.slug);
               },
-              disabled: activeActionSlug !== null,
-              children: activeActionSlug === action.slug ? t("executing") : action.label
+              disabled: controller.activeActionSlug !== null,
+              children: controller.activeActionSlug === action.slug ? t("executing") : action.label
             },
             action.slug
           ))
         ]
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       DeletePreviewDialog,
       {
-        open: deleteConfirmOpen,
+        open: controller.deleteConfirmOpen,
         title: t("delete_object_title"),
-        preview: deletePreview,
-        error: deletePreviewError,
-        isLoading: isDeletePreviewLoading,
-        isSubmitting: isDeleting,
+        preview: controller.deletePreview,
+        error: controller.deletePreviewError,
+        isLoading: controller.isDeletePreviewLoading,
+        isSubmitting: controller.isDeleting,
         onClose: () => {
-          if (isDeleting) {
+          if (controller.isDeleting) {
             return;
           }
-          setDeleteConfirmOpen(false);
-          setDeletePreview(null);
-          setDeletePreviewError(null);
+          controller.setDeleteConfirmOpen(false);
+          controller.setDeletePreview(null);
+          controller.setDeletePreviewError(null);
         },
-        onConfirm: () => void handleDelete()
+        onConfirm: () => void controller.handleDelete()
       }
     )
-  ] });
+  ] }) });
 }
 
 // src/components/Shell.tsx
-import { useEffect as useEffect10, useMemo as useMemo9, useState as useState10 } from "react";
-import { usePathname as usePathname5 } from "next/navigation.js";
+import { useEffect as useEffect11, useMemo as useMemo10, useState as useState11 } from "react";
 import { Box as Box15, CssBaseline, Drawer, GlobalStyles, Stack as Stack13, useMediaQuery as useMediaQuery4 } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 
@@ -3608,11 +4131,10 @@ var defaultAdminTheme = createTheme({
 });
 
 // src/components/layout/Main.tsx
-import { usePathname as usePathname3 } from "next/navigation.js";
 import { Box as Box13 } from "@mui/material";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function Main({ children }) {
-  const pathname = usePathname3();
+  const { pathname } = useXLAdminLocation();
   const { pendingPath, pendingView } = useShellContext();
   const normalizeAdminPath2 = (path) => {
     const normalizedPath = path.endsWith("/") && path !== "/" ? path.slice(0, -1) : path;
@@ -3633,7 +4155,7 @@ function Main({ children }) {
       },
       children: [
         children,
-        isPendingNavigation ? /* @__PURE__ */ jsx23(
+        isPendingNavigation ? /* @__PURE__ */ jsx24(
           Box13,
           {
             sx: {
@@ -3642,7 +4164,7 @@ function Main({ children }) {
               zIndex: 5,
               backgroundColor: "background.default"
             },
-            children: pendingView === "model" || pendingView === "overview" ? /* @__PURE__ */ jsx23(ModelPageSkeleton, {}) : /* @__PURE__ */ jsx23(ModelPageSkeleton, {})
+            children: pendingView === "model" || pendingView === "overview" ? /* @__PURE__ */ jsx24(ModelPageSkeleton, {}) : /* @__PURE__ */ jsx24(ModelPageSkeleton, {})
           }
         ) : null
       ]
@@ -3652,13 +4174,12 @@ function Main({ children }) {
 
 // src/components/layout/Sidebar.tsx
 import { memo as memo8 } from "react";
-import { usePathname as usePathname4 } from "next/navigation.js";
 import { Box as Box14, ListItemButton as ListItemButton3, Typography as Typography7 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
   var _a;
   const t = useAdminTranslation();
-  const pathname = usePathname4();
+  const { pathname } = useXLAdminLocation();
   const { pendingPath, startPendingNavigation } = useShellContext();
   const effectivePathname = pendingPath != null ? pendingPath : pathname;
   const normalizedBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
@@ -3667,7 +4188,7 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
   const relativePath = matchedBasePath ? effectivePathname.slice(matchedBasePath.length) : "";
   const activeModelSlug = (_a = relativePath.split("/").filter(Boolean)[0]) != null ? _a : null;
   const isOverviewActive = matchedBasePath !== null && (effectivePathname === matchedBasePath || effectivePathname === `${matchedBasePath}/`);
-  return /* @__PURE__ */ jsx24(Box14, { sx: { height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(Box14, { sx: { height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx25(
     Box14,
     {
       sx: {
@@ -3680,13 +4201,13 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
         pl: 0
       },
       children: /* @__PURE__ */ jsxs17(Box14, { sx: { direction: "ltr", pl: 1 }, children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           NavLink,
           {
             href: basePath,
             style: { textDecoration: "none", display: "block" },
             onClick: () => startPendingNavigation(basePath, "overview"),
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               ListItemButton3,
               {
                 selected: isOverviewActive,
@@ -3699,12 +4220,12 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
                     backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.055)"
                   }
                 },
-                children: /* @__PURE__ */ jsx24(Typography7, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
+                children: /* @__PURE__ */ jsx25(Typography7, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           ModelsBlocks,
           {
             models,
@@ -3721,28 +4242,30 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
 });
 
 // src/components/Shell.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function normalizeAdminPath(path) {
   const normalizedPath = path.endsWith("/") && path !== "/" ? path.slice(0, -1) : path;
   return normalizedPath.replace(/^\/(ru|en)(?=\/|$)/, "") || "/";
 }
-function Shell({ client, models, blocks, basePath, locale, children, theme }) {
+function Shell({ client, models, blocks, basePath, locale, children, theme, router }) {
   void client;
   const activeTheme = theme != null ? theme : defaultAdminTheme;
-  const pathname = usePathname5();
+  const resolvedRouter = useXLAdminRouter(router);
+  const location = useXLAdminLocation(resolvedRouter);
+  const pathname = location.pathname;
   const isDesktopSidebar = useMediaQuery4(activeTheme.breakpoints.up("lg"));
-  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState10(false);
-  const [pendingPath, setPendingPath] = useState10(null);
-  const [pendingView, setPendingView] = useState10(null);
-  useEffect10(() => {
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState11(false);
+  const [pendingPath, setPendingPath] = useState11(null);
+  const [pendingView, setPendingView] = useState11(null);
+  useEffect11(() => {
     if (isDesktopSidebar) {
       setIsMobileSidebarOpen(false);
     }
   }, [isDesktopSidebar]);
-  useEffect10(() => {
+  useEffect11(() => {
     setIsMobileSidebarOpen(false);
   }, [pathname]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (pendingPath === null) {
       return;
     }
@@ -3751,7 +4274,7 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
       setPendingView(null);
     }
   }, [pathname, pendingPath]);
-  const shellContextValue = useMemo9(() => ({
+  const shellContextValue = useMemo10(() => ({
     isMobile: !isDesktopSidebar,
     openMobileSidebar: () => setIsMobileSidebarOpen(true),
     pendingPath,
@@ -3764,9 +4287,9 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
       setPendingView(view);
     }
   }), [isDesktopSidebar, pathname, pendingPath, pendingView]);
-  return /* @__PURE__ */ jsx25(ThemeProvider, { theme: activeTheme, children: /* @__PURE__ */ jsx25(AdminLocaleProvider, { locale, children: /* @__PURE__ */ jsx25(AdminDataProvider, { value: { locale: locale === "en" ? "en" : "ru", models, blocks }, children: /* @__PURE__ */ jsxs18(ShellContextProvider, { value: shellContextValue, children: [
-    /* @__PURE__ */ jsx25(CssBaseline, {}),
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(XLAdminRouterProvider, { router: resolvedRouter, children: /* @__PURE__ */ jsx26(ThemeProvider, { theme: activeTheme, children: /* @__PURE__ */ jsx26(AdminLocaleProvider, { locale, children: /* @__PURE__ */ jsx26(AdminDataProvider, { value: { locale: locale === "en" ? "en" : "ru", models, blocks }, children: /* @__PURE__ */ jsxs18(ShellContextProvider, { value: shellContextValue, children: [
+    /* @__PURE__ */ jsx26(CssBaseline, {}),
+    /* @__PURE__ */ jsx26(
       GlobalStyles,
       {
         styles: (muiTheme) => ({
@@ -3805,7 +4328,7 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
         })
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       Box15,
       {
         "data-xladmin-root": "true",
@@ -3823,7 +4346,7 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
             spacing: 0,
             sx: { height: "100%", minHeight: 0, alignItems: "stretch" },
             children: [
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 Box15,
                 {
                   sx: {
@@ -3835,10 +4358,10 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
                     pl: 0,
                     pr: 1
                   },
-                  children: /* @__PURE__ */ jsx25(Sidebar, { models, blocks, basePath })
+                  children: /* @__PURE__ */ jsx26(Sidebar, { models, blocks, basePath })
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 Box15,
                 {
                   sx: {
@@ -3852,7 +4375,7 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
                     py: { xs: 1, sm: 1.5, lg: 2 },
                     pl: { xs: 1, sm: 1.5, lg: 1 }
                   },
-                  children: /* @__PURE__ */ jsx25(Main, { children })
+                  children: /* @__PURE__ */ jsx26(Main, { children })
                 }
               )
             ]
@@ -3860,7 +4383,7 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       Drawer,
       {
         anchor: "left",
@@ -3879,10 +4402,10 @@ function Shell({ client, models, blocks, basePath, locale, children, theme }) {
             }
           }
         },
-        children: /* @__PURE__ */ jsx25(Box15, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx25(Sidebar, { models, blocks, basePath }) })
+        children: /* @__PURE__ */ jsx26(Box15, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx26(Sidebar, { models, blocks, basePath }) })
       }
     )
-  ] }) }) }) });
+  ] }) }) }) }) });
 }
 export {
   AdminLocaleProvider,
@@ -3898,13 +4421,19 @@ export {
   OverviewPage,
   Shell,
   Sidebar,
+  XLAdminRouterProvider,
+  buildUrlWithParams,
   createAxiosXLAdminClient,
+  createBrowserXLAdminRouter,
   createFetchXLAdminClient,
   createFetchXLAdminTransport,
   createXLAdminClient,
   defaultAdminTheme,
+  handleNavLinkClick,
   normalizeAdminLocale,
   translateAdmin,
   useAdminLocale,
-  useAdminTranslation
+  useAdminTranslation,
+  useXLAdminLocation,
+  useXLAdminRouter
 };