@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/AppShell.js

@@ -0,0 +1,902 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Separator } from "../primitives/separator.js";
+import { FlashMessages } from "./FlashMessages.js";
+import { usePathname } from "next/navigation";
+import { apiCall } from "./utils/apiCall.js";
+import { LanguageSwitcher } from "../frontend/LanguageSwitcher.js";
+import { ThemeToggle } from "../theme/ThemeToggle.js";
+import { LastOperationBanner } from "./operations/LastOperationBanner.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";
+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);
+}
+const HeaderContext = React.createContext(null);
+function ApplyBreadcrumb({ breadcrumb, title, titleKey }) {
+  const ctx = React.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 DefaultIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("path", { d: "M8 6h13M8 12h13M8 18h13" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 6h.01M3 12h.01M3 18h.01" })
+] });
+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" })
+] });
+const CustomizeIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.05.05a2 2 0 1 1-2.83 2.83l-.05-.05A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82l-.05.05a2 2 0 1 1-2.83-2.83l.05-.05A1.65 1.65 0 0 0 9 15a1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.05.05a2 2 0 1 1-2.83-2.83l.05-.05A1.65 1.65 0 0 0 4.6 9 1.65 1.65 0 0 0 4 8a1.65 1.65 0 0 0-.6-1.82l-.05-.05a2 2 0 1 1 2.83-2.83l.05.05A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-.6 1.65 1.65 0 0 0 .33-1.82l.05-.05a2 2 0 1 1 2.83 2.83l-.05.05A1.65 1.65 0 0 0 15 9a1.65 1.65 0 0 0 1 .6 1.65 1.65 0 0 0 1.82-.33l.05-.05a2 2 0 1 1 2.83 2.83l-.05.05A1.65 1.65 0 0 0 19.4 15z" })
+] });
+function Chevron({ open }) {
+  return /* @__PURE__ */ jsx("svg", { className: `transition-transform ${open ? "rotate-180" : ""}`, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) });
+}
+function AppShell({ productName, email, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, adminNavApi, version }) {
+  const pathname = usePathname();
+  const t = useT();
+  const locale = useLocale();
+  const resolvedProductName = productName ?? t("appShell.productName");
+  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 expandedSidebarWidth = customizing ? "320px" : "240px";
+  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] }));
+  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 = 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((href) => typeof href === "string" ? href.trim() : "").filter((href) => href.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 href of responseHiddenItems) {
+        if (!itemDefaults.has(href)) continue;
+        hiddenItemIds[href] = 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 ?? 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 [href, value] of Object.entries(customDraft.itemLabels)) {
+        const trimmed = value.trim();
+        const base = itemDefaults.get(href);
+        if (!trimmed || !base) continue;
+        if (trimmed !== base) sanitizedItemLabels[href] = trimmed;
+      }
+      const sanitizedHiddenItems = [];
+      for (const [href, hidden] of Object.entries(customDraft.hiddenItemIds)) {
+        if (!hidden) continue;
+        if (!itemDefaults.has(href)) continue;
+        sanitizedHiddenItems.push(href);
+      }
+      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((href, value) => {
+    updateDraft((draft) => {
+      const next = { ...draft.itemLabels };
+      if (value.trim().length === 0) delete next[href];
+      else next[href] = value;
+      return { ...draft, itemLabels: next };
+    });
+  }, [updateDraft]);
+  const setItemHidden = React.useCallback((href, hidden) => {
+    updateDraft((draft) => {
+      const next = { ...draft.hiddenItemIds };
+      if (hidden) next[href] = true;
+      else delete next[href];
+      return { ...draft, hiddenItemIds: next };
+    });
+  }, [updateDraft]);
+  const toggleRoleSelection = React.useCallback((roleId) => {
+    setSelectedRoleIds((prev) => prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]);
+  }, []);
+  const asideWidth = effectiveCollapsed ? "72px" : expandedSidebarWidth;
+  const asideClassesBase = `border-r bg-background/60 py-4 min-h-svh overflow-y-auto`;
+  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]);
+  React.useEffect(() => {
+    if (customizing && customDraft && originalNavRef.current) {
+      originalNavRef.current = 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),
+          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)
+          }))
+        }))
+      }));
+      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) => ({
+        name: g.name,
+        items: g.items.map((i) => ({
+          href: i.href,
+          title: i.title,
+          enabled: i.enabled,
+          hidden: i.hidden,
+          icon: i.icon ?? iconMap.get(i.href),
+          children: i.children?.map((c) => ({
+            href: c.href,
+            title: c.title,
+            enabled: c.enabled,
+            hidden: c.hidden,
+            icon: c.icon ?? iconMap.get(c.href)
+          }))
+        }))
+      }));
+      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]);
+  function renderSidebar(compact, hideHeader) {
+    const isMobileVariant = !!hideHeader;
+    const baseGroupsForDefaults = originalNavRef.current ?? navGroups;
+    const baseGroupMap = /* @__PURE__ */ new Map();
+    for (const group of baseGroupsForDefaults) {
+      baseGroupMap.set(resolveGroupKey(group), group);
+    }
+    const localeLabel = (locale || "").toUpperCase();
+    const orderedGroupIds = customDraft ? mergeGroupOrder(customDraft.order, Array.from(baseGroupMap.keys())) : navGroups.map((group) => resolveGroupKey(group));
+    const lastVisibleGroupIndex = (() => {
+      for (let idx = navGroups.length - 1; idx >= 0; idx -= 1) {
+        if (navGroups[idx].items.some((item) => item.hidden !== true)) return idx;
+      }
+      return -1;
+    })();
+    const renderEditableItems = (baseItems, currentItems, depth = 0) => {
+      if (!customDraft) return null;
+      return baseItems.map((baseItem) => {
+        const current = currentItems.find((item) => item.href === baseItem.href) ?? baseItem;
+        const placeholder = baseItem.defaultTitle ?? baseItem.title;
+        const value = customDraft.itemLabels[baseItem.href] ?? "";
+        const hidden = customDraft.hiddenItemIds[baseItem.href] === 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-muted-foreground", children: placeholder }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 accent-foreground",
+                    checked: !hidden,
+                    onChange: (event) => setItemHidden(baseItem.href, !event.target.checked),
+                    disabled: savingPreferences,
+                    "aria-label": t("appShell.sidebarCustomizationShowItem"),
+                    title: t("appShell.sidebarCustomizationShowItem")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value,
+                    onChange: (event) => setItemLabel(baseItem.href, event.target.value),
+                    placeholder,
+                    disabled: savingPreferences,
+                    className: "h-8 flex-1 rounded border bg-background px-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring 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
+            ]
+          },
+          baseItem.href
+        );
+      });
+    };
+    const customizationEditor = customizing ? customDraft ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded border border-dashed bg-muted/20 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",
+            {
+              type: "button",
+              className: "h-8 rounded border px-3 text-sm",
+              onClick: resetCustomization,
+              disabled: savingPreferences,
+              children: t("appShell.sidebarCustomizationReset")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "h-8 rounded border px-3 text-sm",
+              onClick: cancelCustomization,
+              disabled: savingPreferences,
+              children: t("appShell.sidebarCustomizationCancel")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "h-8 rounded bg-foreground px-3 text-sm font-medium text-background disabled:opacity-60",
+              onClick: saveCustomization,
+              disabled: savingPreferences,
+              children: savingPreferences ? t("appShell.sidebarCustomizationSaving") : t("appShell.sidebarCustomizationSave")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("appShell.sidebarCustomizationHint", { locale: localeLabel }) }),
+      canApplyToRoles ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background/70 p-3 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: t("appShell.sidebarApplyToRolesTitle") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", 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 bg-background px-2 py-1 text-sm shadow-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "h-4 w-4 accent-foreground",
+                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-muted-foreground"}`, children: willClear ? t("appShell.sidebarRoleWillClear") : t("appShell.sidebarRoleHasPreset") }) : null
+          ] }, role.id);
+        }) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", 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 bg-background p-3 shadow-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: `flex ${compact ? "flex-col gap-2" : "items-center gap-2"}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", 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 bg-background px-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-60"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 self-start", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "h-8 w-8 rounded border text-muted-foreground hover:text-foreground disabled:opacity-40",
+                  onClick: () => moveGroup(groupId, -1),
+                  disabled: index === 0 || savingPreferences,
+                  "aria-label": t("appShell.sidebarCustomizationMoveUp"),
+                  children: "\u25B2"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "h-8 w-8 rounded border text-muted-foreground hover:text-foreground disabled:opacity-40",
+                  onClick: () => moveGroup(groupId, 1),
+                  disabled: index === orderedGroupIds.length - 1 || savingPreferences,
+                  "aria-label": t("appShell.sidebarCustomizationMoveDown"),
+                  children: "\u25BC"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderEditableItems(baseGroup.items, currentGroup.items) })
+        ] }, groupId);
+      }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed bg-muted/20 p-3 text-sm text-muted-foreground", children: t("appShell.sidebarCustomizationLoading") }) : null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-full gap-3", children: [
+      !hideHeader && /* @__PURE__ */ jsx("div", { className: `flex items-center ${compact ? "justify-center" : "justify-between"} mb-2`, children: /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2", "aria-label": t("appShell.goToDashboard"), children: [
+        /* @__PURE__ */ jsx(Image, { src: "/open-mercato.svg", alt: resolvedProductName, width: 32, height: 32, className: "rounded m-4" }),
+        !compact && /* @__PURE__ */ jsx("div", { className: "text-m font-semibold", children: resolvedProductName })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto pr-1", children: customizing ? customizationEditor : /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: navGroups.map((g, gi) => {
+        const groupId = resolveGroupKey(g);
+        const open = openGroups[groupId] !== false;
+        const visibleItems = g.items.filter((item) => item.hidden !== true);
+        if (visibleItems.length === 0) return null;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleGroup(groupId),
+              className: `w-full ${compact ? "px-0 justify-center" : "px-2 justify-between"} flex items-center text-xs uppercase text-muted-foreground/90 py-2`,
+              "aria-expanded": open,
+              children: [
+                !compact && /* @__PURE__ */ jsx("span", { children: g.name }),
+                !compact && /* @__PURE__ */ jsx(Chevron, { open })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-1" : ""}`, children: visibleItems.map((i) => {
+            const childItems = (i.children ?? []).filter((child) => child.hidden !== true);
+            const showChildren = !!pathname && childItems.length > 0 && pathname.startsWith(i.href);
+            const hasActiveChild = !!(pathname && childItems.some((c) => pathname.startsWith(c.href)));
+            const isParentActive = pathname === i.href || showChildren && !hasActiveChild;
+            const base = compact ? "w-10 h-10 justify-center" : "px-2 py-1 gap-2";
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: i.href,
+                  className: `relative text-sm rounded inline-flex items-center ${base} ${isParentActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${i.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                  "aria-disabled": i.enabled === false,
+                  title: compact ? i.title : void 0,
+                  onClick: () => setMobileOpen(false),
+                  children: [
+                    isParentActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
+                    /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: i.icon ?? DefaultIcon }),
+                    !compact && /* @__PURE__ */ jsx("span", { children: i.title })
+                  ]
+                }
+              ),
+              showChildren ? /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-4" : ""}`, children: childItems.map((c) => {
+                const childActive = pathname?.startsWith(c.href);
+                const childBase = compact ? "w-10 h-8 justify-center" : "px-2 py-1 gap-2";
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: c.href,
+                    className: `relative text-sm rounded inline-flex items-center ${childBase} ${childActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${c.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                    "aria-disabled": c.enabled === false,
+                    title: compact ? c.title : void 0,
+                    onClick: () => setMobileOpen(false),
+                    children: [
+                      childActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
+                      /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: c.icon ?? (c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon) }),
+                      !compact && /* @__PURE__ */ jsx("span", { children: c.title })
+                    ]
+                  },
+                  c.href
+                );
+              }) }) : null
+            ] }, i.href);
+          }) }),
+          gi !== lastVisibleGroupIndex && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-dotted" })
+        ] }, groupId);
+      }) }) }),
+      !customizing && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: startCustomization,
+          className: `mt-auto inline-flex items-center justify-center gap-2 rounded border hover:bg-accent hover:text-accent-foreground disabled:opacity-60 ${compact || isMobileVariant ? "h-10 w-10 p-0" : "h-9 px-3 text-sm font-medium"}`,
+          disabled: loadingPreferences,
+          "aria-label": t("appShell.customizeSidebar"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: CustomizeIcon }),
+            !(compact || isMobileVariant) && /* @__PURE__ */ jsx("span", { children: loadingPreferences ? t("appShell.sidebarCustomizationLoading") : t("appShell.customizeSidebar") })
+          ]
+        }
+      )
+    ] });
+  }
+  const gridColsClass = customizing ? "lg:grid-cols-[320px_1fr]" : effectiveCollapsed ? "lg:grid-cols-[72px_1fr]" : "lg:grid-cols-[240px_1fr]";
+  const headerCtxValue = React.useMemo(() => ({
+    setBreadcrumb: setHeaderBreadcrumb,
+    setTitle: setHeaderTitle
+  }), []);
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: headerCtxValue, children: /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:grid ${gridColsClass}`, children: [
+    /* @__PURE__ */ jsx("aside", { className: `${asideClassesBase} ${effectiveCollapsed ? "px-2" : "px-3"} hidden lg:block`, style: { width: asideWidth }, children: renderSidebar(effectiveCollapsed) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0", children: [
+      /* @__PURE__ */ jsxs("header", { className: "border-b bg-background/60 px-3 lg:px-4 py-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "lg:hidden rounded border px-2 py-1", "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" }) }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hidden lg:inline-flex rounded border px-2 py-1 disabled:opacity-60",
+              "aria-label": t("appShell.toggleSidebar"),
+              onClick: () => setCollapsed((c) => !c),
+              disabled: customizing,
+              children: /* @__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" }),
+                /* @__PURE__ */ jsx("path", { d: "M9 4v16" })
+              ] })
+            }
+          ),
+          (() => {
+            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];
+            return /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-2 text-sm", children: items.map((b, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
+              b.href ? /* @__PURE__ */ jsx(Link, { href: b.href, className: "text-muted-foreground hover:text-foreground", children: b.label }) : /* @__PURE__ */ jsx("span", { className: "font-medium truncate max-w-[60vw]", children: b.label })
+            ] }, i)) });
+          })()
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm w-full lg:w-auto lg:justify-end", children: [
+          /* @__PURE__ */ jsx(ThemeToggle, {}),
+          /* @__PURE__ */ jsx(Separator, { className: "w-px h-5 mx-1" }),
+          rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 lg:p-6", children: [
+        /* @__PURE__ */ jsx(FlashMessages, {}),
+        /* @__PURE__ */ jsx(PartialIndexBanner, {}),
+        /* @__PURE__ */ jsx(UpgradeActionBanner, {}),
+        /* @__PURE__ */ jsx(LastOperationBanner, {}),
+        children
+      ] }),
+      /* @__PURE__ */ jsxs("footer", { className: "border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/50 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") })
+        ] }),
+        /* @__PURE__ */ jsx(LanguageSwitcher, {})
+      ] })
+    ] }),
+    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) }),
+      /* @__PURE__ */ jsxs("aside", { className: "absolute left-0 top-0 h-full w-[260px] bg-background border-r p-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2 text-sm font-semibold", onClick: () => setMobileOpen(false), "aria-label": t("appShell.goToDashboard"), children: [
+            /* @__PURE__ */ jsx(Image, { src: "/open-mercato.svg", alt: resolvedProductName, width: 28, height: 28, className: "rounded" }),
+            resolvedProductName
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "rounded border px-2 py-1", onClick: () => setMobileOpen(false), "aria-label": t("appShell.closeMenu"), children: "\u2715" })
+        ] }),
+        renderSidebar(false, true)
+      ] })
+    ] })
+  ] }) });
+}
+AppShell.cloneGroups = function cloneGroups(groups) {
+  const cloneItem = (item) => ({
+    href: item.href,
+    title: item.title,
+    defaultTitle: item.defaultTitle,
+    icon: item.icon,
+    enabled: item.enabled,
+    hidden: item.hidden,
+    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 baseTitle = item.defaultTitle ?? item.title;
+  const override = draft.itemLabels[item.href]?.trim();
+  const children = item.children ? item.children.map((child) => applyItemDraft(child, draft)) : void 0;
+  const hidden = draft.hiddenItemIds[item.href] === 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 baseTitle = item.defaultTitle ?? item.title;
+      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 };
+}
+export {
+  AppShell,
+  ApplyBreadcrumb
+};
+//# sourceMappingURL=AppShell.js.map