@freighttech/ui 0.13.18

package/dist/backend/AppShell.js

@@ -0,0 +1,1289 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ChevronUp, ChevronDown, PanelLeftClose, PanelLeftOpen, House } from "lucide-react";
+import { Button } from "../primitives/button.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { IconButton as IconButtonV2 } from "../primitives-v2/IconButton.js";
+import { FlashMessages } from "./FlashMessages.js";
+import { QueryProvider } from "../theme/QueryProvider.js";
+import { usePathname, useSearchParams } from "next/navigation";
+import { apiCall } from "./utils/apiCall.js";
+import { LastOperationBanner } from "./operations/LastOperationBanner.js";
+import { ProgressTopBar } from "./progress/ProgressTopBar.js";
+import { UpgradeActionBanner } from "./upgrades/UpgradeActionBanner.js";
+import { PartialIndexBanner } from "./indexes/PartialIndexBanner.js";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { slugifySidebarId } from "@open-mercato/shared/modules/navigation/sidebarPreferences";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { InjectionSpot } from "./injection/InjectionSpot.js";
+import { LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID } from "./injection/mutationEvents.js";
+import { mergeMenuItems } from "./injection/mergeMenuItems.js";
+import { useInjectedMenuItems } from "./injection/useInjectedMenuItems.js";
+import { resolveInjectedIcon } from "./injection/resolveInjectedIcon.js";
+import { useEventBridge } from "./injection/eventBridge.js";
+import { SseEventIndicator } from "./injection/SseEventIndicator.js";
+import { StatusBadgeInjectionSpot } from "./injection/StatusBadgeInjectionSpot.js";
+import { UmesDevToolsPanel } from "./devtools/index.js";
+import {
+  Sidebar as ChromeSidebar
+} from "./Sidebar.js";
+import {
+  BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID,
+  BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID,
+  BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_FOOTER_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID,
+  BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
+  GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
+  GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID
+} from "./injection/spotIds.js";
+function convertInjectedMenuItemToSidebarItem(item, title) {
+  if (!item.href) return null;
+  return {
+    id: item.id,
+    href: item.href,
+    title,
+    defaultTitle: title,
+    icon: resolveInjectedIcon(item.icon) ?? void 0,
+    enabled: true,
+    hidden: false,
+    pageContext: "main"
+  };
+}
+function resolveInjectedMenuLabel(item, t) {
+  if (item.labelKey && item.label) return t(item.labelKey, item.label);
+  if (item.labelKey) return t(item.labelKey, item.id);
+  if (item.label && item.label.includes(".")) return t(item.label, item.id);
+  return item.label ?? item.id;
+}
+function mergeSidebarItemsWithInjected(items, injectedItems, t) {
+  if (injectedItems.length === 0) return items;
+  const builtInById = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    builtInById.set(item.id ?? item.href, item);
+  }
+  const merged = mergeMenuItems(
+    items.map((item) => ({
+      id: item.id ?? item.href
+    })),
+    injectedItems
+  );
+  const result = [];
+  for (const entry of merged) {
+    if (entry.source === "built-in") {
+      const original = builtInById.get(entry.id);
+      if (original) result.push(original);
+      continue;
+    }
+    const translatedLabel = resolveInjectedMenuLabel(
+      { id: entry.id, label: entry.label, labelKey: entry.labelKey },
+      t
+    );
+    const converted = convertInjectedMenuItemToSidebarItem(
+      {
+        id: entry.id,
+        label: translatedLabel,
+        icon: entry.icon,
+        href: entry.href
+      },
+      translatedLabel
+    );
+    if (converted) result.push(converted);
+  }
+  return result;
+}
+function mergeSidebarGroupsWithInjected(groups, injectedItems, t) {
+  if (injectedItems.length === 0) return groups;
+  const injectedByGroup = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const item of injectedItems) {
+    if (item.groupId && item.groupId.trim().length > 0) {
+      const groupItems = injectedByGroup.get(item.groupId) ?? [];
+      groupItems.push(item);
+      injectedByGroup.set(item.groupId, groupItems);
+      continue;
+    }
+    ungrouped.push(item);
+  }
+  const nextGroups = groups.map((group, index) => {
+    const groupId = group.id || resolveGroupKey(group);
+    const groupInjected = [
+      ...injectedByGroup.get(groupId) ?? [],
+      ...index === 0 ? ungrouped : []
+    ];
+    return {
+      ...group,
+      items: mergeSidebarItemsWithInjected(group.items, groupInjected, t)
+    };
+  });
+  const existingIds = new Set(nextGroups.map((group) => group.id || resolveGroupKey(group)));
+  for (const [groupId, items] of injectedByGroup.entries()) {
+    if (existingIds.has(groupId)) continue;
+    const first = items[0];
+    const label = first.groupLabelKey ? t(first.groupLabelKey, first.groupLabel ?? groupId) : first.groupLabel ?? groupId;
+    const groupItems = mergeSidebarItemsWithInjected([], items, t);
+    if (groupItems.length === 0) continue;
+    nextGroups.push({
+      id: groupId,
+      name: label,
+      defaultName: label,
+      items: groupItems
+    });
+  }
+  return nextGroups;
+}
+function mergeSectionGroupsWithInjected(sections, injectedItems, t) {
+  if (injectedItems.length === 0) return sections;
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const item of injectedItems) {
+    const groupId = item.groupId && item.groupId.trim().length > 0 ? item.groupId : "injected";
+    const bucket = byGroup.get(groupId) ?? [];
+    bucket.push(item);
+    byGroup.set(groupId, bucket);
+  }
+  const nextSections = sections.map((section) => {
+    const sectionItems = byGroup.get(section.id) ?? [];
+    if (sectionItems.length === 0) return section;
+    const mergedItems = mergeMenuItems(
+      section.items.map((item) => ({ id: item.id, item })),
+      sectionItems
+    ).flatMap((item) => {
+      if (item.source === "built-in") {
+        const original = section.items.find((entry) => entry.id === item.id);
+        return original ? [original] : [];
+      }
+      if (!item.href) return [];
+      const label = resolveInjectedMenuLabel(item, t);
+      return [{
+        id: item.id,
+        label,
+        href: item.href,
+        icon: resolveInjectedIcon(item.icon) ?? void 0
+      }];
+    });
+    return {
+      ...section,
+      items: mergedItems
+    };
+  });
+  for (const [sectionId, sectionItems] of byGroup.entries()) {
+    const exists = nextSections.some((section) => section.id === sectionId);
+    if (exists) continue;
+    const first = sectionItems[0];
+    const label = first.groupLabelKey ? t(first.groupLabelKey, first.groupLabel ?? sectionId) : first.groupLabel ?? sectionId;
+    const items = sectionItems.flatMap((item) => {
+      if (!item.href) return [];
+      const itemLabel = resolveInjectedMenuLabel(item, t);
+      return [{ id: item.id, label: itemLabel, href: item.href, icon: resolveInjectedIcon(item.icon) ?? void 0 }];
+    });
+    if (items.length === 0) continue;
+    nextSections.push({ id: sectionId, label, items });
+  }
+  return nextSections;
+}
+function resolveGroupKey(group) {
+  if (group.id && group.id.length) return group.id;
+  if (group.defaultName && group.defaultName.length) return slugifySidebarId(group.defaultName);
+  return slugifySidebarId(group.name);
+}
+function resolveItemKey(item) {
+  const candidate = item.id?.trim();
+  if (candidate && candidate.length > 0) return candidate;
+  return item.href;
+}
+const HeaderContext = createContext(null);
+function ApplyBreadcrumb({ breadcrumb, title, titleKey }) {
+  const ctx = useContext(HeaderContext);
+  const t = useT();
+  const resolvedBreadcrumb = React.useMemo(() => {
+    if (!breadcrumb) return void 0;
+    return breadcrumb.map(({ label, labelKey, href }) => {
+      const translated = labelKey ? t(labelKey) : void 0;
+      const finalLabel = translated && translated !== labelKey ? translated : label;
+      return {
+        href,
+        label: finalLabel
+      };
+    });
+  }, [breadcrumb, t]);
+  const resolvedTitle = React.useMemo(() => {
+    if (!titleKey) return title;
+    const translated = t(titleKey);
+    if (translated && translated !== titleKey) return translated;
+    return title;
+  }, [titleKey, title, t]);
+  React.useEffect(() => {
+    ctx?.setBreadcrumb(resolvedBreadcrumb);
+    if (resolvedTitle !== void 0) ctx?.setTitle(resolvedTitle);
+  }, [ctx, resolvedBreadcrumb, resolvedTitle]);
+  return null;
+}
+const DataTableIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "8", x2: "21", y2: "8" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "8", x2: "9", y2: "20" }),
+  /* @__PURE__ */ jsx("line", { x1: "15", y1: "8", x2: "15", y2: "20" })
+] });
+function AppShell({ productName, email, brandId, brandLogo, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, adminNavApi, version, settingsSectionTitle, settingsPathPrefixes = [], settingsSections, profileSections, profileSectionTitle, profilePathPrefixes = [], mobileSidebarSlot }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const t = useT();
+  const locale = useLocale();
+  const { resolvedTheme } = useTheme();
+  const { items: mainSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:main");
+  const { items: settingsSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:settings");
+  const { items: profileSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:profile");
+  const { items: topbarInjectedMenuItems } = useInjectedMenuItems("menu:topbar:actions");
+  useEventBridge();
+  const resolvedProductName = productName ?? t("appShell.productName");
+  const logoSrc = brandLogo ? resolvedTheme === "dark" ? brandLogo.srcDark ?? brandLogo.src : brandLogo.srcLight ?? brandLogo.src : "/open-mercato.svg";
+  const logoAlt = brandLogo?.alt ?? resolvedProductName;
+  const logoWidth = brandLogo?.width ?? 32;
+  const logoHeight = brandLogo?.height ?? 32;
+  const logoName = brandLogo?.name;
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault);
+  const [navGroups, setNavGroups] = React.useState(AppShell.cloneGroups(groups));
+  const [openGroups, setOpenGroups] = React.useState(
+    () => Object.fromEntries(groups.map((g) => [resolveGroupKey(g), true]))
+  );
+  const [customizing, setCustomizing] = React.useState(false);
+  const [customDraft, setCustomDraft] = React.useState(null);
+  const [loadingPreferences, setLoadingPreferences] = React.useState(false);
+  const [savingPreferences, setSavingPreferences] = React.useState(false);
+  const [customizationError, setCustomizationError] = React.useState(null);
+  const [availableRoleTargets, setAvailableRoleTargets] = React.useState([]);
+  const [selectedRoleIds, setSelectedRoleIds] = React.useState([]);
+  const [canApplyToRoles, setCanApplyToRoles] = React.useState(false);
+  const originalNavRef = React.useRef(null);
+  const [headerTitle, setHeaderTitle] = React.useState(currentTitle);
+  const [headerBreadcrumb, setHeaderBreadcrumb] = React.useState(breadcrumb);
+  const effectiveCollapsed = customizing ? false : collapsed;
+  const injectionContext = React.useMemo(
+    () => ({
+      path: pathname ?? "",
+      query: searchParams?.toString() ?? ""
+    }),
+    [pathname, searchParams]
+  );
+  const isOnSettingsPath = React.useMemo(() => {
+    if (!pathname) return false;
+    if (pathname === "/backend/settings") return true;
+    return settingsPathPrefixes.some((prefix) => pathname.startsWith(prefix));
+  }, [pathname, settingsPathPrefixes]);
+  const isOnProfilePath = React.useMemo(() => {
+    if (!pathname) return false;
+    if (pathname === "/backend/profile") return true;
+    return profilePathPrefixes.some((prefix) => pathname.startsWith(prefix));
+  }, [pathname, profilePathPrefixes]);
+  const sidebarMode = isOnSettingsPath ? "settings" : isOnProfilePath ? "profile" : "main";
+  const mainNavGroupsWithInjected = React.useMemo(
+    () => mergeSidebarGroupsWithInjected(navGroups, mainSidebarInjectedMenuItems, t),
+    [mainSidebarInjectedMenuItems, navGroups, t]
+  );
+  React.useEffect(() => {
+    if (!mobileOpen || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [mobileOpen]);
+  React.useEffect(() => {
+    try {
+      const savedOpen = typeof window !== "undefined" ? localStorage.getItem("om:sidebarOpenGroups") : null;
+      if (!savedOpen) return;
+      const parsed = JSON.parse(savedOpen);
+      setOpenGroups((prev) => {
+        const next = { ...prev };
+        for (const group of groups) {
+          const key = resolveGroupKey(group);
+          if (key in parsed) next[key] = !!parsed[key];
+          else if (group.name in parsed) next[key] = !!parsed[group.name];
+        }
+        return next;
+      });
+    } catch {
+    }
+  }, [groups]);
+  const toggleGroup = (groupId) => setOpenGroups((prev) => ({ ...prev, [groupId]: prev[groupId] === false }));
+  const updateDraft = React.useCallback((updater) => {
+    setCustomDraft((prev) => {
+      if (!prev) return prev;
+      const next = updater(prev);
+      if (originalNavRef.current) {
+        setNavGroups(applyCustomizationDraft(originalNavRef.current, next));
+      }
+      return next;
+    });
+  }, []);
+  const startCustomization = React.useCallback(async () => {
+    if (customizing || loadingPreferences) return;
+    setCustomizationError(null);
+    setLoadingPreferences(true);
+    try {
+      const baseSnapshot = filterMainSidebarGroups(AppShell.cloneGroups(navGroups));
+      const call = await apiCall("/api/auth/sidebar/preferences");
+      const data = call.ok ? call.result ?? null : null;
+      const rawSettings = data?.settings;
+      const responseOrder = Array.isArray(rawSettings?.groupOrder) ? rawSettings.groupOrder.map((id) => typeof id === "string" ? id.trim() : "").filter((id) => id.length > 0) : [];
+      const responseGroupLabels = {};
+      if (rawSettings?.groupLabels && typeof rawSettings.groupLabels === "object") {
+        for (const [key, value] of Object.entries(rawSettings.groupLabels)) {
+          if (typeof value !== "string") continue;
+          const trimmedKey = key.trim();
+          if (!trimmedKey) continue;
+          responseGroupLabels[trimmedKey] = value;
+        }
+      }
+      const responseItemLabels = {};
+      if (rawSettings?.itemLabels && typeof rawSettings.itemLabels === "object") {
+        for (const [key, value] of Object.entries(rawSettings.itemLabels)) {
+          if (typeof value !== "string") continue;
+          const trimmedKey = key.trim();
+          if (!trimmedKey) continue;
+          responseItemLabels[trimmedKey] = value;
+        }
+      }
+      const responseHiddenItems = Array.isArray(rawSettings?.hiddenItems) ? rawSettings.hiddenItems.map((itemId) => typeof itemId === "string" ? itemId.trim() : "").filter((itemId) => itemId.length > 0) : [];
+      const canManageRoles = data?.canApplyToRoles === true;
+      setCanApplyToRoles(canManageRoles);
+      if (canManageRoles) {
+        const roles = Array.isArray(data?.roles) ? data.roles.filter((role) => typeof role?.id === "string" && typeof role?.name === "string") : [];
+        const mappedRoles = roles.map((role) => ({
+          id: role.id,
+          name: role.name,
+          hasPreference: role.hasPreference === true
+        }));
+        setAvailableRoleTargets(mappedRoles);
+        setSelectedRoleIds(mappedRoles.filter((role) => role.hasPreference).map((role) => role.id));
+      } else {
+        setAvailableRoleTargets([]);
+        setSelectedRoleIds([]);
+      }
+      const currentIds = baseSnapshot.map((group) => resolveGroupKey(group));
+      const order = mergeGroupOrder(responseOrder, currentIds);
+      const { itemDefaults } = collectSidebarDefaults(baseSnapshot);
+      const hiddenItemIds = {};
+      for (const itemId of responseHiddenItems) {
+        if (!itemDefaults.has(itemId)) continue;
+        hiddenItemIds[itemId] = true;
+      }
+      const draft = {
+        order,
+        groupLabels: { ...responseGroupLabels },
+        itemLabels: { ...responseItemLabels },
+        hiddenItemIds
+      };
+      originalNavRef.current = baseSnapshot;
+      setCustomDraft(draft);
+      setNavGroups(applyCustomizationDraft(baseSnapshot, draft));
+      setCustomizing(true);
+    } catch (error) {
+      console.error("Failed to load sidebar preferences", error);
+      setCustomizationError(t("appShell.sidebarCustomizationLoadError"));
+    } finally {
+      setLoadingPreferences(false);
+    }
+  }, [customizing, loadingPreferences, navGroups, t]);
+  const cancelCustomization = React.useCallback(() => {
+    setCustomizing(false);
+    setCustomDraft(null);
+    setCustomizationError(null);
+    setAvailableRoleTargets([]);
+    setSelectedRoleIds([]);
+    setCanApplyToRoles(false);
+    if (originalNavRef.current) {
+      setNavGroups(AppShell.cloneGroups(originalNavRef.current));
+    }
+    originalNavRef.current = null;
+  }, []);
+  const resetCustomization = React.useCallback(() => {
+    if (!originalNavRef.current) return;
+    const base = AppShell.cloneGroups(originalNavRef.current);
+    const order = base.map((group) => resolveGroupKey(group));
+    const draft = { order, groupLabels: {}, itemLabels: {}, hiddenItemIds: {} };
+    originalNavRef.current = base;
+    setCustomDraft(draft);
+    setNavGroups(applyCustomizationDraft(base, draft));
+    if (canApplyToRoles) {
+      setSelectedRoleIds(availableRoleTargets.filter((role) => role.hasPreference).map((role) => role.id));
+    }
+  }, [availableRoleTargets, canApplyToRoles]);
+  const saveCustomization = React.useCallback(async () => {
+    if (!customDraft) return;
+    setSavingPreferences(true);
+    setCustomizationError(null);
+    try {
+      const baseGroups = originalNavRef.current ?? filterMainSidebarGroups(AppShell.cloneGroups(navGroups));
+      const { groupDefaults, itemDefaults } = collectSidebarDefaults(baseGroups);
+      const sanitizedGroupLabels = {};
+      for (const [key, value] of Object.entries(customDraft.groupLabels)) {
+        const trimmed = value.trim();
+        const base = groupDefaults.get(key);
+        if (!trimmed || !base) continue;
+        if (trimmed !== base) sanitizedGroupLabels[key] = trimmed;
+      }
+      const sanitizedItemLabels = {};
+      for (const [itemId, value] of Object.entries(customDraft.itemLabels)) {
+        const trimmed = value.trim();
+        const base = itemDefaults.get(itemId);
+        if (!trimmed || !base) continue;
+        if (trimmed !== base) sanitizedItemLabels[itemId] = trimmed;
+      }
+      const sanitizedHiddenItems = [];
+      for (const [itemId, hidden] of Object.entries(customDraft.hiddenItemIds)) {
+        if (!hidden) continue;
+        if (!itemDefaults.has(itemId)) continue;
+        sanitizedHiddenItems.push(itemId);
+      }
+      const applyToRolesPayload = canApplyToRoles ? [...selectedRoleIds] : [];
+      const clearRoleIdsPayload = canApplyToRoles ? availableRoleTargets.filter((role) => role.hasPreference && !selectedRoleIds.includes(role.id)).map((role) => role.id) : [];
+      const payload = {
+        groupOrder: customDraft.order,
+        groupLabels: sanitizedGroupLabels,
+        itemLabels: sanitizedItemLabels,
+        hiddenItems: sanitizedHiddenItems
+      };
+      if (canApplyToRoles) {
+        payload.applyToRoles = applyToRolesPayload;
+        payload.clearRoleIds = clearRoleIdsPayload;
+      }
+      const call = await apiCall("/api/auth/sidebar/preferences", {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!call.ok) {
+        setCustomizationError(t("appShell.sidebarCustomizationSaveError"));
+        return;
+      }
+      const data = call.result ?? null;
+      if (data?.canApplyToRoles !== void 0) {
+        setCanApplyToRoles(data.canApplyToRoles === true);
+      }
+      if (Array.isArray(data?.roles)) {
+        const mappedRoles = data.roles.filter((role) => typeof role?.id === "string" && typeof role?.name === "string").map((role) => ({
+          id: role.id,
+          name: role.name,
+          hasPreference: role.hasPreference === true
+        }));
+        setAvailableRoleTargets(mappedRoles);
+        setSelectedRoleIds(mappedRoles.filter((role) => role.hasPreference).map((role) => role.id));
+      }
+      originalNavRef.current = applyCustomizationDraft(baseGroups, customDraft);
+      setNavGroups(AppShell.cloneGroups(originalNavRef.current));
+      setCustomizing(false);
+      setCustomDraft(null);
+      try {
+        window.dispatchEvent(new Event("om:refresh-sidebar"));
+      } catch {
+      }
+    } catch (error) {
+      console.error("Failed to save sidebar preferences", error);
+      setCustomizationError(t("appShell.sidebarCustomizationSaveError"));
+    } finally {
+      setSavingPreferences(false);
+    }
+  }, [customDraft, navGroups, t]);
+  const moveGroup = React.useCallback((groupId, offset) => {
+    updateDraft((draft) => {
+      const order = [...draft.order];
+      const index = order.indexOf(groupId);
+      if (index === -1) return draft;
+      const nextIndex = Math.max(0, Math.min(order.length - 1, index + offset));
+      if (nextIndex === index) return draft;
+      order.splice(index, 1);
+      order.splice(nextIndex, 0, groupId);
+      return { ...draft, order };
+    });
+  }, [updateDraft]);
+  const setGroupLabel = React.useCallback((groupId, value) => {
+    updateDraft((draft) => {
+      const next = { ...draft.groupLabels };
+      if (value.trim().length === 0) delete next[groupId];
+      else next[groupId] = value;
+      return { ...draft, groupLabels: next };
+    });
+  }, [updateDraft]);
+  const setItemLabel = React.useCallback((itemId, value) => {
+    updateDraft((draft) => {
+      const next = { ...draft.itemLabels };
+      if (value.trim().length === 0) delete next[itemId];
+      else next[itemId] = value;
+      return { ...draft, itemLabels: next };
+    });
+  }, [updateDraft]);
+  const setItemHidden = React.useCallback((itemId, hidden) => {
+    updateDraft((draft) => {
+      const next = { ...draft.hiddenItemIds };
+      if (hidden) next[itemId] = true;
+      else delete next[itemId];
+      return { ...draft, hiddenItemIds: next };
+    });
+  }, [updateDraft]);
+  const toggleRoleSelection = React.useCallback((roleId) => {
+    setSelectedRoleIds((prev) => prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]);
+  }, []);
+  React.useEffect(() => {
+    try {
+      localStorage.setItem("om:sidebarCollapsed", collapsed ? "1" : "0");
+    } catch {
+    }
+    try {
+      document.cookie = `om_sidebar_collapsed=${collapsed ? "1" : "0"}; path=/; max-age=31536000; samesite=lax`;
+    } catch {
+    }
+  }, [collapsed]);
+  React.useEffect(() => {
+    try {
+      localStorage.setItem("om:sidebarOpenGroups", JSON.stringify(openGroups));
+    } catch {
+    }
+  }, [openGroups]);
+  React.useEffect(() => {
+    const activeGroup = navGroups.find((g) => g.items.some((i) => pathname?.startsWith(i.href)));
+    if (!activeGroup) return;
+    const key = resolveGroupKey(activeGroup);
+    setOpenGroups((prev) => prev[key] === false ? { ...prev, [key]: true } : prev);
+  }, [pathname, navGroups]);
+  React.useEffect(() => {
+    setHeaderTitle(currentTitle);
+    setHeaderBreadcrumb(breadcrumb);
+  }, [currentTitle, breadcrumb]);
+  const prevPathname = React.useRef(pathname);
+  React.useEffect(() => {
+    if (pathname !== prevPathname.current) {
+      prevPathname.current = pathname;
+      setHeaderTitle(void 0);
+      setHeaderBreadcrumb(void 0);
+    }
+  }, [pathname]);
+  React.useEffect(() => {
+    if (customizing && customDraft && originalNavRef.current) {
+      originalNavRef.current = filterMainSidebarGroups(AppShell.cloneGroups(groups));
+      setNavGroups(applyCustomizationDraft(originalNavRef.current, customDraft));
+      return;
+    }
+    setNavGroups(AppShell.cloneGroups(groups));
+  }, [groups, customizing, customDraft]);
+  React.useEffect(() => {
+    let cancelled = false;
+    function indexIcons(groupsToIndex) {
+      const map = /* @__PURE__ */ new Map();
+      for (const g of groupsToIndex) {
+        for (const i of g.items) {
+          map.set(i.href, i.icon);
+          if (i.children) for (const c of i.children) map.set(c.href, c.icon);
+        }
+      }
+      return map;
+    }
+    function mergePreservingIcons(oldG, newG) {
+      const iconMap = indexIcons(oldG);
+      const merged = newG.map((g) => ({
+        id: g.id,
+        name: g.name,
+        defaultName: g.defaultName,
+        items: g.items.map((i) => ({
+          href: i.href,
+          title: i.title,
+          defaultTitle: i.defaultTitle,
+          enabled: i.enabled,
+          hidden: i.hidden,
+          icon: i.icon ?? iconMap.get(i.href),
+          pageContext: i.pageContext,
+          children: i.children?.map((c) => ({
+            href: c.href,
+            title: c.title,
+            defaultTitle: c.defaultTitle,
+            enabled: c.enabled,
+            hidden: c.hidden,
+            icon: c.icon ?? iconMap.get(c.href),
+            pageContext: c.pageContext
+          }))
+        }))
+      }));
+      return merged;
+    }
+    async function refreshFullNav() {
+      if (!adminNavApi) return;
+      try {
+        const call = await apiCall(adminNavApi, { credentials: "include" });
+        if (!call.ok) return;
+        const data = call.result;
+        if (cancelled) return;
+        const nextGroups = Array.isArray(data?.groups) ? data.groups : [];
+        if (nextGroups.length) setNavGroups((prev) => AppShell.cloneGroups(mergePreservingIcons(prev, nextGroups)));
+      } catch {
+      }
+    }
+    const onFocus = () => refreshFullNav();
+    window.addEventListener("focus", onFocus);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [adminNavApi]);
+  React.useEffect(() => {
+    if (!adminNavApi) return;
+    const api = adminNavApi;
+    let cancelled = false;
+    function indexIcons(groupsToIndex) {
+      const map = /* @__PURE__ */ new Map();
+      for (const g of groupsToIndex) {
+        for (const i of g.items) {
+          map.set(i.href, i.icon);
+          if (i.children) for (const c of i.children) map.set(c.href, c.icon);
+        }
+      }
+      return map;
+    }
+    function mergePreservingIcons(oldG, newG) {
+      const iconMap = indexIcons(oldG);
+      const merged = newG.map((g) => ({
+        id: g.id,
+        name: g.name,
+        defaultName: g.defaultName,
+        items: g.items.map((i) => ({
+          href: i.href,
+          title: i.title,
+          defaultTitle: i.defaultTitle,
+          enabled: i.enabled,
+          hidden: i.hidden,
+          icon: i.icon ?? iconMap.get(i.href),
+          pageContext: i.pageContext,
+          children: i.children?.map((c) => ({
+            href: c.href,
+            title: c.title,
+            defaultTitle: c.defaultTitle,
+            enabled: c.enabled,
+            hidden: c.hidden,
+            icon: c.icon ?? iconMap.get(c.href),
+            pageContext: c.pageContext
+          }))
+        }))
+      }));
+      return merged;
+    }
+    async function refreshFullNav() {
+      try {
+        const call = await apiCall(api, { credentials: "include" });
+        if (!call.ok) return;
+        const data = call.result;
+        if (cancelled) return;
+        const nextGroups = Array.isArray(data?.groups) ? data.groups : [];
+        if (nextGroups.length) setNavGroups((prev) => AppShell.cloneGroups(mergePreservingIcons(prev, nextGroups)));
+      } catch {
+      }
+    }
+    const onRefresh = () => {
+      refreshFullNav();
+    };
+    window.addEventListener("om:refresh-sidebar", onRefresh);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("om:refresh-sidebar", onRefresh);
+    };
+  }, [adminNavApi]);
+  const settingsLinkActive = React.useMemo(() => {
+    if (!pathname) return false;
+    const SETTINGS_PREFIXES = [
+      "/backend/settings",
+      "/backend/config",
+      "/backend/users",
+      "/backend/roles",
+      "/backend/api-keys",
+      "/backend/entities",
+      "/backend/query-indexes",
+      "/backend/definitions",
+      "/backend/instances",
+      "/backend/tasks",
+      "/backend/events",
+      "/backend/rules",
+      "/backend/sets",
+      "/backend/logs",
+      "/backend/directory",
+      "/backend/feature-toggles"
+    ];
+    return SETTINGS_PREFIXES.some((prefix) => pathname.startsWith(prefix));
+  }, [pathname]);
+  const sidebarBrand = React.useMemo(
+    () => ({
+      logo: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: logoSrc,
+          alt: logoAlt,
+          width: logoWidth,
+          height: logoHeight,
+          className: "rounded"
+        }
+      ),
+      title: logoName ?? resolvedProductName,
+      href: "/backend",
+      ariaLabel: t("appShell.goToDashboard")
+    }),
+    [logoSrc, logoAlt, logoWidth, logoHeight, logoName, resolvedProductName, t]
+  );
+  const resolveItemIcon = React.useCallback(
+    (item) => {
+      if (item.icon) return item.icon;
+      if (item.href.includes("/backend/entities/user/") && item.href.endsWith("/records")) {
+        return DataTableIcon;
+      }
+      return void 0;
+    },
+    []
+  );
+  const toChromeItem = React.useCallback(
+    (item) => ({
+      id: resolveItemKey(item),
+      href: item.href,
+      title: item.title,
+      icon: resolveItemIcon(item),
+      enabled: item.enabled,
+      hidden: item.hidden,
+      children: item.children?.map(toChromeItem)
+    }),
+    [resolveItemIcon]
+  );
+  const toChromeSectionItem = React.useCallback(
+    (item) => ({
+      id: item.id,
+      label: item.labelKey ? t(item.labelKey, item.label) : item.label,
+      href: item.href,
+      icon: resolveItemIcon(item),
+      order: item.order,
+      children: item.children?.map(toChromeSectionItem)
+    }),
+    [resolveItemIcon, t]
+  );
+  const toChromeSection = React.useCallback(
+    (section) => ({
+      id: section.id,
+      label: section.labelKey ? t(section.labelKey, section.label) : section.label,
+      order: section.order,
+      items: section.items.map(toChromeSectionItem)
+    }),
+    [t, toChromeSectionItem]
+  );
+  const renderCustomizationEditor = () => {
+    if (!customDraft) {
+      return /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-sidebar-foreground/30 bg-sidebar-accent/50 p-3 text-sm text-sidebar-foreground/70", children: t("appShell.sidebarCustomizationLoading") });
+    }
+    const baseGroupsForDefaults = originalNavRef.current ?? mainNavGroupsWithInjected;
+    const baseGroupMap = /* @__PURE__ */ new Map();
+    for (const group of baseGroupsForDefaults) {
+      baseGroupMap.set(resolveGroupKey(group), group);
+    }
+    const localeLabel = (locale || "").toUpperCase();
+    const orderedGroupIds = mergeGroupOrder(
+      customDraft.order,
+      Array.from(baseGroupMap.keys())
+    );
+    const renderEditableItems = (baseItems, currentItems, depth = 0) => {
+      return baseItems.map((baseItem) => {
+        const itemKey = resolveItemKey(baseItem);
+        const current = currentItems.find((item) => item.href === baseItem.href) ?? baseItem;
+        const placeholder = baseItem.defaultTitle ?? baseItem.title;
+        const value = customDraft.itemLabels[itemKey] ?? "";
+        const hidden = customDraft.hiddenItemIds[itemKey] === true;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex flex-col gap-1 ${hidden ? "opacity-60" : ""}`,
+            style: depth ? { marginLeft: depth * 16 } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-sidebar-foreground/70", children: placeholder }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 accent-sidebar-primary",
+                    checked: !hidden,
+                    onChange: (event) => setItemHidden(itemKey, !event.target.checked),
+                    disabled: savingPreferences,
+                    "aria-label": t("appShell.sidebarCustomizationShowItem"),
+                    title: t("appShell.sidebarCustomizationShowItem")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value,
+                    onChange: (event) => setItemLabel(itemKey, event.target.value),
+                    placeholder,
+                    disabled: savingPreferences,
+                    className: "h-8 flex-1 rounded border border-sidebar-foreground/20 bg-sidebar px-2 text-sm text-sidebar-foreground placeholder:text-sidebar-foreground/50 focus:outline-none focus:ring-2 focus:ring-sidebar-primary disabled:opacity-60"
+                  }
+                )
+              ] }),
+              baseItem.children && baseItem.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: renderEditableItems(baseItem.children, current.children ?? [], depth + 1) }) : null
+            ]
+          },
+          itemKey
+        );
+      });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded border border-dashed border-sidebar-foreground/30 bg-sidebar-accent/50 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: t("appShell.sidebarCustomizationHeading") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: resetCustomization, disabled: savingPreferences, children: t("appShell.sidebarCustomizationReset") }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: cancelCustomization, disabled: savingPreferences, children: t("appShell.sidebarCustomizationCancel") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              className: "bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-90",
+              onClick: saveCustomization,
+              disabled: savingPreferences,
+              children: savingPreferences ? t("appShell.sidebarCustomizationSaving") : t("appShell.sidebarCustomizationSave")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-sidebar-foreground/70", children: t("appShell.sidebarCustomizationHint", { locale: localeLabel }) }),
+      canApplyToRoles ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded border border-sidebar-foreground/20 bg-sidebar-accent p-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: t("appShell.sidebarApplyToRolesTitle") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-sidebar-foreground/70", children: t("appShell.sidebarApplyToRolesDescription") })
+        ] }),
+        availableRoleTargets.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: availableRoleTargets.map((role) => {
+          const checked = selectedRoleIds.includes(role.id);
+          const willClear = role.hasPreference && !checked;
+          return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 rounded border border-sidebar-foreground/20 bg-sidebar px-2 py-1 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "h-4 w-4 accent-sidebar-primary",
+                checked,
+                onChange: () => toggleRoleSelection(role.id),
+                disabled: savingPreferences
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: role.name }),
+            role.hasPreference ? /* @__PURE__ */ jsx("span", { className: `text-xs ${willClear ? "text-destructive" : "text-sidebar-foreground/60"}`, children: willClear ? t("appShell.sidebarRoleWillClear") : t("appShell.sidebarRoleHasPreset") }) : null
+          ] }, role.id);
+        }) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-sidebar-foreground/60", children: t("appShell.sidebarApplyToRolesEmpty") })
+      ] }) : null,
+      customizationError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: customizationError }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: orderedGroupIds.map((groupId, index) => {
+        const baseGroup = baseGroupMap.get(groupId);
+        if (!baseGroup) return null;
+        const currentGroup = navGroups.find((group) => resolveGroupKey(group) === groupId) ?? baseGroup;
+        const placeholder = baseGroup.defaultName ?? baseGroup.name;
+        const value = customDraft.groupLabels[groupId] ?? "";
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded border border-sidebar-foreground/20 bg-sidebar-accent p-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-sidebar-foreground/70", children: t("appShell.sidebarCustomizationGroupLabel") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value,
+                  onChange: (event) => setGroupLabel(groupId, event.target.value),
+                  placeholder,
+                  disabled: savingPreferences,
+                  className: "mt-1 h-8 w-full rounded border border-sidebar-foreground/20 bg-sidebar px-2 text-sm text-sidebar-foreground placeholder:text-sidebar-foreground/50 focus:outline-none focus:ring-2 focus:ring-sidebar-primary disabled:opacity-60"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 self-start", children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "text-sidebar-foreground/70 hover:text-sidebar-foreground",
+                  onClick: () => moveGroup(groupId, -1),
+                  disabled: index === 0 || savingPreferences,
+                  "aria-label": t("appShell.sidebarCustomizationMoveUp"),
+                  children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "text-sidebar-foreground/70 hover:text-sidebar-foreground",
+                  onClick: () => moveGroup(groupId, 1),
+                  disabled: index === orderedGroupIds.length - 1 || savingPreferences,
+                  "aria-label": t("appShell.sidebarCustomizationMoveDown"),
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderEditableItems(baseGroup.items, currentGroup.items) })
+        ] }, groupId);
+      }) })
+    ] });
+  };
+  function renderSidebar(compact, hideHeader) {
+    const hasSettings = sidebarMode === "settings" && !!settingsSections && settingsSections.length > 0;
+    const hasProfile = sidebarMode === "profile" && !!profileSections && profileSections.length > 0;
+    const mode = hasSettings ? "settings" : hasProfile ? "profile" : "main";
+    const shouldRenderInjections = !hideHeader;
+    let chromeGroups;
+    if (mode === "main") {
+      const isSettingsPath = (href) => {
+        if (href === "/backend/settings") return true;
+        return settingsPathPrefixes.some((prefix) => href.startsWith(prefix));
+      };
+      const isMainItem = (item) => {
+        if (item.pageContext && item.pageContext !== "main") return false;
+        if (isSettingsPath(item.href)) return false;
+        return true;
+      };
+      chromeGroups = mainNavGroupsWithInjected.map((g) => ({
+        id: resolveGroupKey(g),
+        name: g.name,
+        items: g.items.filter((item) => isMainItem(item) && item.hidden !== true).map(toChromeItem)
+      })).filter((g) => g.items.length > 0);
+    }
+    let chromeSections;
+    let sectionTitle;
+    if (mode === "settings") {
+      const merged = mergeSectionGroupsWithInjected(
+        settingsSections,
+        settingsSidebarInjectedMenuItems,
+        t
+      );
+      chromeSections = merged.map(toChromeSection);
+      sectionTitle = settingsSectionTitle ?? t("backend.nav.settings", "Settings");
+    } else if (mode === "profile") {
+      const merged = mergeSectionGroupsWithInjected(
+        profileSections,
+        profileSidebarInjectedMenuItems,
+        t
+      );
+      chromeSections = merged.map(toChromeSection);
+      sectionTitle = profileSectionTitle ?? t("backend.nav.profile", "Profile");
+    }
+    const topSlot = shouldRenderInjections ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID, context: injectionContext }) : void 0;
+    const navSlot = shouldRenderInjections && mode === "main" ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID, context: injectionContext }) : void 0;
+    const navFooterSlot = shouldRenderInjections && mode === "main" ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID, context: injectionContext }) : void 0;
+    const footerSlot = shouldRenderInjections ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_SIDEBAR_FOOTER_INJECTION_SPOT_ID, context: injectionContext }) : void 0;
+    const statusBadgesSlot = shouldRenderInjections ? /* @__PURE__ */ jsx(
+      StatusBadgeInjectionSpot,
+      {
+        spotId: GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
+        context: injectionContext
+      }
+    ) : void 0;
+    const isCustomizing = customizing && mode === "main";
+    return /* @__PURE__ */ jsx(
+      ChromeSidebar,
+      {
+        mode,
+        compact,
+        hideHeader,
+        pathname: pathname ?? null,
+        brand: sidebarBrand,
+        onCollapseToggle: void 0,
+        collapseLabel: t(compact ? "appShell.expandSidebar" : "appShell.collapseSidebar"),
+        onItemNavigate: () => setMobileOpen(false),
+        groups: chromeGroups,
+        openGroups,
+        onToggleGroup: toggleGroup,
+        settingsActive: settingsLinkActive,
+        settingsHref: "/backend/settings",
+        settingsLabel: t("backend.nav.settings", "Settings"),
+        customizeLabel: loadingPreferences ? t("appShell.sidebarCustomizationLoading") : t("appShell.customizeSidebar"),
+        customizeAriaLabel: t("appShell.customizeSidebar"),
+        onCustomize: mode === "main" ? startCustomization : void 0,
+        loadingCustomization: loadingPreferences,
+        sections: chromeSections,
+        sectionTitle,
+        backHref: "/backend",
+        backLabel: sectionTitle ?? t("backend.nav.backToMain", "Back"),
+        customizing: isCustomizing,
+        customizationEditor: isCustomizing ? renderCustomizationEditor() : void 0,
+        topSlot,
+        navSlot,
+        navFooterSlot,
+        footerSlot,
+        statusBadgesSlot,
+        className: hideHeader ? "h-full w-full border-r-0" : "min-h-svh"
+      }
+    );
+  }
+  const gridColsClass = "lg:grid-cols-[auto_1fr]";
+  const headerCtxValue = React.useMemo(() => ({
+    setBreadcrumb: setHeaderBreadcrumb,
+    setTitle: setHeaderTitle
+  }), []);
+  const renderedTopbarInjectedActions = React.useMemo(
+    () => topbarInjectedMenuItems.map((item) => {
+      const label = resolveInjectedMenuLabel(item, t);
+      if (item.href) {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: item.href,
+            className: "inline-flex items-center rounded border px-2 py-1 text-xs hover:bg-accent hover:text-accent-foreground",
+            "data-menu-item-id": item.id,
+            children: label
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "h-7 text-xs",
+          "data-menu-item-id": item.id,
+          onClick: () => item.onClick?.(),
+          children: label
+        },
+        item.id
+      );
+    }),
+    [t, topbarInjectedMenuItems]
+  );
+  return /* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsxs(HeaderContext.Provider, { value: headerCtxValue, children: [
+    /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:h-svh lg:overflow-hidden lg:grid lg:grid-rows-1 ${gridColsClass}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative hidden lg:block", children: [
+        renderSidebar(effectiveCollapsed),
+        !customizing && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setCollapsed((c) => !c),
+            "aria-label": t("appShell.toggleSidebar"),
+            title: t("appShell.toggleSidebar"),
+            className: "absolute top-3 right-0 z-30 inline-flex h-7 w-7 -translate-y-px translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-v2-border bg-background text-sidebar-v2-muted shadow-sm transition-colors hover:bg-sidebar-v2-accent hover:text-sidebar-v2-foreground",
+            children: effectiveCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { "aria-hidden": "true", className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0 lg:h-full lg:min-h-0 bg-topbar-v2-bg", children: [
+        /* @__PURE__ */ jsxs("header", { className: "bg-topbar-v2-bg pl-3 pr-3 lg:pl-6 py-2.5 flex items-center justify-between gap-2 text-topbar-v2-icon", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [
+            /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "sm", className: "lg:hidden", "aria-label": t("appShell.openMenu"), onClick: () => setMobileOpen(true), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h18M3 18h18" }) }) }),
+            (() => {
+              const dashboardLabel = t("dashboard.title");
+              const root = [{ label: dashboardLabel, href: "/backend" }];
+              let rest = [];
+              if (headerBreadcrumb && headerBreadcrumb.length) {
+                const first = headerBreadcrumb[0];
+                const dup = first && (first.href === "/backend" || first.label === dashboardLabel || first.label?.toLowerCase() === "dashboard");
+                rest = dup ? headerBreadcrumb.slice(1) : headerBreadcrumb;
+              } else if (headerTitle) {
+                rest = [{ label: headerTitle }];
+              }
+              const items = [...root, ...rest];
+              const lastIndex = items.length - 1;
+              return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 min-w-0", children: items.map((b, i) => {
+                const isLast = i === lastIndex;
+                if (i === 0) {
+                  return /* @__PURE__ */ jsx(
+                    IconButtonV2,
+                    {
+                      asChild: true,
+                      variant: "outline",
+                      size: "sm",
+                      "aria-label": b.label,
+                      title: b.label,
+                      className: "shrink-0 border-topbar-v2-border bg-topbar-v2-field-bg text-topbar-v2-icon enabled:hover:bg-topbar-v2-border",
+                      children: /* @__PURE__ */ jsx(Link, { href: b.href ?? "/backend", children: /* @__PURE__ */ jsx(House, { "aria-hidden": "true", className: "h-4 w-4 text-topbar-v2-icon" }) })
+                    },
+                    i
+                  );
+                }
+                const hiddenOnMobile = !isLast ? "hidden md:inline" : "";
+                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  i > 1 && /* @__PURE__ */ jsx("span", { className: "text-topbar-v2-field-placeholder hidden md:inline", "aria-hidden": "true", children: "/" }),
+                  b.href && !isLast ? /* @__PURE__ */ jsx(Link, { href: b.href, className: `text-label-medium-md text-topbar-v2-icon transition-colors hover:text-topbar-v2-title ${hiddenOnMobile}`, children: b.label }) : /* @__PURE__ */ jsx("span", { className: "text-label-semibold-md text-topbar-v2-title truncate max-w-[45vw] md:max-w-[60vw]", children: b.label })
+                ] }, i);
+              }) });
+            })()
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-2 text-sm shrink-0", children: [
+            /* @__PURE__ */ jsx(
+              StatusBadgeInjectionSpot,
+              {
+                spotId: GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
+                context: injectionContext
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InjectionSpot,
+              {
+                spotId: BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
+                context: injectionContext
+              }
+            ),
+            renderedTopbarInjectedActions,
+            rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ProgressTopBar, { t, className: "sticky top-0 z-10" }),
+        /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 lg:p-6 lg:min-h-0 lg:overflow-y-auto bg-background lg:mx-1.5 lg:mt-1.5 lg:rounded-2xl", children: [
+          /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID, context: injectionContext }),
+          /* @__PURE__ */ jsx(FlashMessages, {}),
+          /* @__PURE__ */ jsx(SseEventIndicator, {}),
+          /* @__PURE__ */ jsx(PartialIndexBanner, {}),
+          /* @__PURE__ */ jsx(UpgradeActionBanner, {}),
+          /* @__PURE__ */ jsx(LastOperationBanner, {}),
+          /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID, context: injectionContext }),
+          /* @__PURE__ */ jsx(
+            InjectionSpot,
+            {
+              spotId: LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID,
+              context: injectionContext
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { id: "om-top-banners", className: "mb-3 space-y-2" }),
+          children,
+          /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID, context: injectionContext })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "bg-topbar-v2-bg px-4 py-3 flex flex-wrap items-center justify-end gap-4", children: [
+          version ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("appShell.version", { version }) }) : null,
+          /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Link, { href: "/terms", className: "transition hover:text-foreground", children: t("common.terms") }),
+            /* @__PURE__ */ jsx(Link, { href: "/privacy", className: "transition hover:text-foreground", children: t("common.privacy") })
+          ] })
+        ] })
+      ] }),
+      mobileOpen && /* @__PURE__ */ jsxs("div", { className: "lg:hidden fixed inset-0 z-50", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40", onClick: () => setMobileOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("aside", { className: "absolute left-0 top-0 flex h-full w-[260px] flex-col overflow-hidden border-r border-sidebar-v2-border bg-sidebar-v2 text-sidebar-v2-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-sidebar-v2-border px-3 py-2", children: [
+            /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2 text-body-medium-sm font-semibold", onClick: () => setMobileOpen(false), "aria-label": t("appShell.goToDashboard"), children: [
+              /* @__PURE__ */ jsx(Image, { src: logoSrc, alt: logoAlt, width: logoWidth > 32 ? logoWidth : 28, height: logoHeight > 32 ? logoHeight : 28, className: "mr-2" }),
+              logoName ?? resolvedProductName
+            ] }),
+            /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "sm", onClick: () => setMobileOpen(false), "aria-label": t("appShell.closeMenu"), children: "\u2715" })
+          ] }),
+          mobileSidebarSlot && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-v2-border px-3 py-2", children: mobileSidebarSlot }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden", children: renderSidebar(false, true) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(UmesDevToolsPanel, {})
+  ] }) });
+}
+AppShell.cloneGroups = function cloneGroups(groups) {
+  const cloneItem = (item) => ({
+    id: item.id,
+    href: item.href,
+    title: item.title,
+    defaultTitle: item.defaultTitle,
+    icon: item.icon,
+    enabled: item.enabled,
+    hidden: item.hidden,
+    pageContext: item.pageContext,
+    children: item.children ? item.children.map((child) => cloneItem(child)) : void 0
+  });
+  return groups.map((group) => ({
+    id: group.id,
+    name: group.name,
+    defaultName: group.defaultName,
+    items: group.items.map((item) => cloneItem(item))
+  }));
+};
+function applyCustomizationDraft(baseGroups, draft) {
+  const clones = AppShell.cloneGroups(baseGroups);
+  const byId = /* @__PURE__ */ new Map();
+  for (const group of clones) {
+    byId.set(resolveGroupKey(group), group);
+  }
+  const orderedIds = mergeGroupOrder(draft.order, Array.from(byId.keys()));
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const id of orderedIds) {
+    if (seen.has(id)) continue;
+    const group = byId.get(id);
+    if (!group) continue;
+    seen.add(id);
+    const baseName = group.defaultName ?? group.name;
+    const override = draft.groupLabels[id]?.trim();
+    result.push({
+      ...group,
+      name: override && override.length > 0 ? override : baseName,
+      items: group.items.map((item) => applyItemDraft(item, draft))
+    });
+  }
+  return result;
+}
+function applyItemDraft(item, draft) {
+  const itemKey = resolveItemKey(item);
+  const baseTitle = item.defaultTitle ?? item.title;
+  const override = draft.itemLabels[itemKey]?.trim();
+  const children = item.children ? item.children.map((child) => applyItemDraft(child, draft)) : void 0;
+  const hidden = draft.hiddenItemIds[itemKey] === true;
+  return {
+    ...item,
+    title: override && override.length > 0 ? override : baseTitle,
+    hidden,
+    children
+  };
+}
+function mergeGroupOrder(preferred, current) {
+  const seen = /* @__PURE__ */ new Set();
+  const merged = [];
+  for (const id of preferred) {
+    const trimmed = id.trim();
+    if (!trimmed || seen.has(trimmed) || !current.includes(trimmed)) continue;
+    seen.add(trimmed);
+    merged.push(trimmed);
+  }
+  for (const id of current) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    merged.push(id);
+  }
+  return merged;
+}
+function collectSidebarDefaults(groups) {
+  const groupDefaults = /* @__PURE__ */ new Map();
+  const itemDefaults = /* @__PURE__ */ new Map();
+  const visitItems = (items) => {
+    for (const item of items) {
+      const key = resolveItemKey(item);
+      const baseTitle = item.defaultTitle ?? item.title;
+      itemDefaults.set(key, baseTitle);
+      itemDefaults.set(item.href, baseTitle);
+      if (item.children && item.children.length > 0) visitItems(item.children);
+    }
+  };
+  for (const group of groups) {
+    const key = resolveGroupKey(group);
+    groupDefaults.set(key, group.defaultName ?? group.name);
+    visitItems(group.items);
+  }
+  return { groupDefaults, itemDefaults };
+}
+function filterMainSidebarGroups(groups) {
+  const isMainItem = (item) => {
+    if (item.pageContext && item.pageContext !== "main") return false;
+    return true;
+  };
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.filter(isMainItem).map((item) => ({
+      ...item,
+      children: item.children?.filter(isMainItem)
+    }))
+  })).filter((group) => group.items.length > 0);
+}
+export {
+  AppShell,
+  ApplyBreadcrumb
+};
+//# sourceMappingURL=AppShell.js.map