@open-mercato/ui 0.6.8-develop.7072.1.19c2a8bbe0 → 0.6.8-develop.7076.1.13d0af067b

package/dist/backend/AppShell.js

@@ -267,6 +267,12 @@ function resolveItemKey(item) {
   if (candidate && candidate.length > 0) return candidate;
   return item.href;
 }
+function sidebarBlockPadding(compact) {
+  return `${compact ? "px-2" : "px-3"} transition-[padding] duration-200 ease-out`;
+}
+function sidebarInjectionWrapper(compact) {
+  return `${sidebarBlockPadding(compact)} empty:hidden`;
+}
 function SerializedIcon({ markup }) {
   return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", dangerouslySetInnerHTML: { __html: markup } });
 }
@@ -546,8 +552,9 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   function renderSectionSidebar(sections, title, compact, hideHeader, hideSearch) {
     const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
     const lastVisibleIndex = sortedSections.length - 1;
+    const blockPadding = sidebarBlockPadding(compact);
     return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
-      !hideHeader && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
+      !hideHeader && /* @__PURE__ */ jsx("div", { className: `mb-2 ${blockPadding}`, children: /* @__PURE__ */ jsxs(
         Link,
         {
           href: "/backend",
@@ -559,7 +566,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           ]
         }
       ) }),
-      !compact && !hideSearch && /* @__PURE__ */ jsx(
+      !compact && !hideSearch && /* @__PURE__ */ jsx("div", { className: blockPadding, children: /* @__PURE__ */ jsx(
         SearchInput,
         {
           value: navQuery,
@@ -569,8 +576,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           clearLabel: t("appShell.searchNavClear", "Clear search"),
           className: "mb-2"
         }
-      ),
-      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: `flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? "-ml-2 pl-2" : "-ml-3 pl-3"}`, children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: sortedSections.map((section, sectionIndex) => {
+      ) }),
+      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: "flex flex-1 flex-col gap-3 overflow-x-hidden overflow-y-auto scrollbar-hide", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: sortedSections.map((section, sectionIndex) => {
         const sectionNavQueryActive = hideSearch ? false : navQueryActive;
         const matchesItemQuery = (item) => {
           if (!sectionNavQueryActive) return true;
@@ -627,29 +634,38 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             showChildren ? childItems.map((child) => renderSectionItem(child, depth + 1)) : null
           ] }, item.id);
         };
-        return /* @__PURE__ */ jsxs("div", { children: [
-          !compact && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "muted",
-              onClick: () => toggleGroup(sectionKey),
-              className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
-              "aria-expanded": open,
-              children: [
-                /* @__PURE__ */ jsx("span", { children: sectionLabel }),
-                /* @__PURE__ */ jsx(Chevron, { open })
-              ]
-            }
-          ),
-          (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: sortedItems.map((item) => renderSectionItem(item)) }),
-          sectionIndex !== lastVisibleIndex && /* @__PURE__ */ jsx("div", { className: `my-2 border-t ${compact ? "-ml-2 -mr-3" : "-ml-3 -mr-4"}` })
-        ] }, section.id);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${blockPadding} ${sectionIndex !== lastVisibleIndex ? "border-b pb-2" : ""}`,
+            "data-sidebar-group": "true",
+            children: [
+              !compact && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "muted",
+                  onClick: () => toggleGroup(sectionKey),
+                  className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
+                  "aria-expanded": open,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: sectionLabel }),
+                    /* @__PURE__ */ jsx(Chevron, { open })
+                  ]
+                }
+              ),
+              (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: sortedItems.map((item) => renderSectionItem(item)) })
+            ]
+          },
+          section.id
+        );
       }) }) })
     ] });
   }
   function renderSidebar(compact, hideHeader, forceMainOnly) {
+    const blockPadding = sidebarBlockPadding(compact);
+    const injectionWrapper = sidebarInjectionWrapper(compact);
     if (!isChromeReady && isChromeLoading) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-full gap-3", "data-testid": "backend-chrome-loading", children: [
+      return /* @__PURE__ */ jsxs("div", { className: `flex min-h-full flex-col gap-3 ${blockPadding}`, "data-testid": "backend-chrome-loading", children: [
         !hideHeader ? /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
           Link,
           {
@@ -662,7 +678,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 pr-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("div", { className: "h-8 rounded bg-muted/50" }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2 pl-1", children: [
@@ -710,7 +726,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     const isMobileVariant = !!hideHeader;
     const shouldRenderSidebarInjectionSpots = !isMobileVariant;
     return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
-      !hideHeader && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
+      !hideHeader && /* @__PURE__ */ jsx("div", { className: `mb-2 ${blockPadding}`, children: /* @__PURE__ */ jsxs(
         Link,
         {
           href: "/backend",
@@ -722,14 +738,14 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           ]
         }
       ) }),
-      shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+      shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx("div", { className: injectionWrapper, "data-sidebar-injection-wrapper": "true", children: /* @__PURE__ */ jsx(
         InjectionSpot,
         {
           spotId: BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID,
           context: injectionContext
         }
-      ) : null,
-      !compact && /* @__PURE__ */ jsx(
+      ) }) : null,
+      !compact && /* @__PURE__ */ jsx("div", { className: blockPadding, children: /* @__PURE__ */ jsx(
         SearchInput,
         {
           value: navQuery,
@@ -739,8 +755,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           clearLabel: t("appShell.searchNavClear", "Clear search"),
           className: "mb-2"
         }
-      ),
-      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: `flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? "-ml-2 pl-2" : "-ml-3 pl-3"}`, children: (() => {
+      ) }),
+      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: "flex flex-1 flex-col gap-3 overflow-x-hidden overflow-y-auto scrollbar-hide", children: (() => {
         const isSettingsPath = (href) => {
           if (href === "/backend/settings") return true;
           return resolvedSettingsPathPrefixes.some((prefix) => href.startsWith(prefix));
@@ -761,13 +777,13 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           return -1;
         })();
         return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-2", "data-testid": "sidebar", children: [
-          shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+          shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx("div", { className: injectionWrapper, "data-sidebar-injection-wrapper": "true", children: /* @__PURE__ */ jsx(
             InjectionSpot,
             {
               spotId: BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID,
               context: injectionContext
             }
-          ) : null,
+          ) }) : null,
           mainGroups.map((g, gi) => {
             const groupId = resolveGroupKey(g);
             const open = navQueryActive ? true : openGroups[groupId] !== false;
@@ -779,87 +795,94 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               return itemChildren.some((c) => matchesQuery(c.title));
             });
             if (visibleItems.length === 0) return null;
-            return /* @__PURE__ */ jsxs("div", { children: [
-              !compact && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "muted",
-                  onClick: () => toggleGroup(groupId),
-                  className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
-                  "aria-expanded": open,
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: g.name }),
-                    /* @__PURE__ */ jsx(Chevron, { open })
-                  ]
-                }
-              ),
-              (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: visibleItems.map((i) => {
-                const allChildItems = (i.children ?? []).filter((child) => child.hidden !== true);
-                const matchingChildItems = navQueryActive ? allChildItems.filter((c) => matchesQuery(c.title)) : allChildItems;
-                const childItems = navQueryActive ? matchingChildItems : allChildItems;
-                const showChildren = navQueryActive ? matchingChildItems.length > 0 : !!pathname && allChildItems.length > 0 && pathname.startsWith(i.href);
-                const hasActiveChild = !!(pathname && allChildItems.some((c) => pathname.startsWith(c.href)));
-                const isParentActive = pathname === i.href || !navQueryActive && showChildren && !hasActiveChild;
-                const base = compact ? "w-10 h-10 justify-center" : "w-full px-3 py-2 gap-2";
-                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  /* @__PURE__ */ jsxs(
-                    Link,
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${blockPadding} ${gi !== mainLastVisibleGroupIndex ? "border-b pb-2" : ""}`,
+                "data-sidebar-group": "true",
+                children: [
+                  !compact && /* @__PURE__ */ jsxs(
+                    Button,
                     {
-                      href: i.href,
-                      className: `relative text-sm font-medium rounded-lg inline-flex items-center ${base} ${isParentActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${i.enabled === false ? "pointer-events-none opacity-50" : ""}`,
-                      "aria-disabled": i.enabled === false,
-                      title: compact ? i.title : void 0,
-                      "data-menu-item-id": i.id ?? i.href,
-                      onClick: () => setMobileOpen(false),
+                      variant: "muted",
+                      onClick: () => toggleGroup(groupId),
+                      className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
+                      "aria-expanded": open,
                       children: [
-                        isParentActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
-                        /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
-                          i.icon,
-                          i.iconName,
-                          i.iconMarkup,
-                          DefaultIcon
-                        ) }),
-                        !compact && /* @__PURE__ */ jsx("span", { children: i.title })
+                        /* @__PURE__ */ jsx("span", { children: g.name }),
+                        /* @__PURE__ */ jsx(Chevron, { open })
                       ]
                     }
                   ),
-                  showChildren ? /* @__PURE__ */ jsxs("div", { className: `relative flex flex-col ${compact ? "items-center" : ""} gap-1`, children: [
-                    !compact && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute left-1.5 top-1 bottom-1 w-px bg-border" }),
-                    childItems.map((c) => {
-                      const childActive = pathname?.startsWith(c.href);
-                      const childBase = compact ? "w-10 h-8 justify-center" : "w-full pl-5 pr-3 py-2 gap-2";
-                      return /* @__PURE__ */ jsxs(
+                  (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: visibleItems.map((i) => {
+                    const allChildItems = (i.children ?? []).filter((child) => child.hidden !== true);
+                    const matchingChildItems = navQueryActive ? allChildItems.filter((c) => matchesQuery(c.title)) : allChildItems;
+                    const childItems = navQueryActive ? matchingChildItems : allChildItems;
+                    const showChildren = navQueryActive ? matchingChildItems.length > 0 : !!pathname && allChildItems.length > 0 && pathname.startsWith(i.href);
+                    const hasActiveChild = !!(pathname && allChildItems.some((c) => pathname.startsWith(c.href)));
+                    const isParentActive = pathname === i.href || !navQueryActive && showChildren && !hasActiveChild;
+                    const base = compact ? "w-10 h-10 justify-center" : "w-full px-3 py-2 gap-2";
+                    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
                         Link,
                         {
-                          href: c.href,
-                          className: `relative text-sm font-medium rounded-lg inline-flex items-center ${childBase} ${childActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${c.enabled === false ? "pointer-events-none opacity-50" : ""}`,
-                          "aria-disabled": c.enabled === false,
-                          title: compact ? c.title : void 0,
-                          "data-menu-item-id": c.id ?? c.href,
+                          href: i.href,
+                          className: `relative text-sm font-medium rounded-lg inline-flex items-center ${base} ${isParentActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${i.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                          "aria-disabled": i.enabled === false,
+                          title: compact ? i.title : void 0,
+                          "data-menu-item-id": i.id ?? i.href,
                           onClick: () => setMobileOpen(false),
                           children: [
-                            childActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
+                            isParentActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
                             /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
-                              c.icon,
-                              c.iconName,
-                              c.iconMarkup,
-                              c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon
+                              i.icon,
+                              i.iconName,
+                              i.iconMarkup,
+                              DefaultIcon
                             ) }),
-                            !compact && /* @__PURE__ */ jsx("span", { children: c.title })
+                            !compact && /* @__PURE__ */ jsx("span", { children: i.title })
                           ]
-                        },
-                        c.href
-                      );
-                    })
-                  ] }) : null
-                ] }, i.href);
-              }) }),
-              gi !== mainLastVisibleGroupIndex && /* @__PURE__ */ jsx("div", { className: `my-2 border-t ${compact ? "-ml-2 -mr-3" : "-ml-3 -mr-4"}` })
-            ] }, groupId);
+                        }
+                      ),
+                      showChildren ? /* @__PURE__ */ jsxs("div", { className: `relative flex flex-col ${compact ? "items-center" : ""} gap-1`, children: [
+                        !compact && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute left-1.5 top-1 bottom-1 w-px bg-border" }),
+                        childItems.map((c) => {
+                          const childActive = pathname?.startsWith(c.href);
+                          const childBase = compact ? "w-10 h-8 justify-center" : "w-full pl-5 pr-3 py-2 gap-2";
+                          return /* @__PURE__ */ jsxs(
+                            Link,
+                            {
+                              href: c.href,
+                              className: `relative text-sm font-medium rounded-lg inline-flex items-center ${childBase} ${childActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${c.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                              "aria-disabled": c.enabled === false,
+                              title: compact ? c.title : void 0,
+                              "data-menu-item-id": c.id ?? c.href,
+                              onClick: () => setMobileOpen(false),
+                              children: [
+                                childActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
+                                /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
+                                  c.icon,
+                                  c.iconName,
+                                  c.iconMarkup,
+                                  c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon
+                                ) }),
+                                !compact && /* @__PURE__ */ jsx("span", { children: c.title })
+                              ]
+                            },
+                            c.href
+                          );
+                        })
+                      ] }) : null
+                    ] }, i.href);
+                  }) })
+                ]
+              },
+              groupId
+            );
           })
         ] }) });
       })() }),
-      /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 bg-background pb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: `sticky bottom-0 bg-background pb-1 ${injectionWrapper}`, "data-sidebar-injection-wrapper": "true", children: [
         shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
           InjectionSpot,
           {
@@ -904,7 +927,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     }
     if (!sections) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: sidebarBlockPadding(false), children: /* @__PURE__ */ jsxs(
         Link,
         {
           href: "/backend",
@@ -916,7 +939,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
           ]
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: renderSectionSidebar(sections, title, false, true, true) })
     ] });
   }
@@ -974,7 +997,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               children: effectiveCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ jsxs("aside", { ref: sidebarAsideRef, className: `${asideClassesBase} ${effectiveCollapsed ? "px-2" : "px-3"} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width,padding] duration-200 ease-out`, style: { width: asideWidth }, children: [
+          /* @__PURE__ */ jsxs("aside", { ref: sidebarAsideRef, className: `${asideClassesBase} px-0 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width] duration-200 ease-out`, style: { width: asideWidth }, children: [
             renderSidebar(effectiveCollapsed, false, isSectionView),
             sidebarScrollState !== "none" ? /* @__PURE__ */ jsx(
               "div",
@@ -1006,7 +1029,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           isSectionView ? /* @__PURE__ */ jsxs(
             "aside",
             {
-              className: `${asideClassesBase} px-3 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`,
+              className: `${asideClassesBase} px-0 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`,
               style: { width: "240px" },
               "data-testid": "appshell-section-sidebar",
               children: [
@@ -1166,7 +1189,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                   id: "mobile-drawer-tabpanel",
                   role: sidebarMode !== "main" ? "tabpanel" : void 0,
                   "aria-labelledby": sidebarMode !== "main" ? `mobile-drawer-tab-${mobileDrawerView === "main" ? "main" : "section"}` : void 0,
-                  className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-3",
+                  className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-3",
                   children: renderSidebar(false, true, mobileDrawerView === "main")
                 }
               )