@open-mercato/ui 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3373.1.be847b1058

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 135 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 348 entry points
+[build:ui] found 350 entry points
 [build:ui] built successfully

package/AGENTS.md

@@ -42,6 +42,7 @@ When you need… use this. Details (variants, sizes, props, MUST rules) live in
 | User / entity avatar | `Avatar`, `AvatarStack` | `@open-mercato/ui/primitives/avatar` |
 | Keyboard shortcut keys | `Kbd`, `KbdShortcut` | `@open-mercato/ui/primitives/kbd` |
 | Entity tag pill | `Tag` (with `TagMap`) | `@open-mercato/ui/primitives/tag` |
+| Breadcrumb navigation (DS-aligned, slash/arrow/dot divider, ARIA correct) | `Breadcrumb` (with `BreadcrumbList` / `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbPage` / `BreadcrumbStatic` / `BreadcrumbSeparator` / `BreadcrumbEllipsis`) | `@open-mercato/ui/primitives/breadcrumb` |
 | Wrap a `<Link>` as button | `Button asChild` / `IconButton asChild` | — |
 
 ## Critical MUST rules (top of mind)

package/dist/ai/AiIcon.js

@@ -7,7 +7,7 @@ function AiIcon({ className, ...props }) {
     {
       "aria-hidden": true,
       ...props,
-      className: cn(className, "text-brand-violet")
+      className: cn(className, "text-accent-indigo")
     }
   );
 }

package/dist/ai/AiIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ai/AiIcon.tsx"],
-  "sourcesContent": ["import { Sparkles, type LucideProps } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function AiIcon({ className, ...props }: LucideProps) {\n  return (\n    <Sparkles\n      aria-hidden\n      {...props}\n      className={cn(className, 'text-brand-violet')}\n    />\n  )\n}\n"],
-  "mappings": "AAKI;AALJ,SAAS,gBAAkC;AAC3C,SAAS,UAAU;AAEZ,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgB;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACV,GAAG;AAAA,MACJ,WAAW,GAAG,WAAW,mBAAmB;AAAA;AAAA,EAC9C;AAEJ;",
+  "sourcesContent": ["import { Sparkles, type LucideProps } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function AiIcon({ className, ...props }: LucideProps) {\n  return (\n    <Sparkles\n      aria-hidden\n      {...props}\n      className={cn(className, 'text-accent-indigo')}\n    />\n  )\n}\n"],
+  "mappings": "AAKI;AALJ,SAAS,gBAAkC;AAC3C,SAAS,UAAU;AAEZ,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgB;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACV,GAAG;AAAA,MACJ,WAAW,GAAG,WAAW,oBAAoB;AAAA;AAAA,EAC/C;AAEJ;",
   "names": []
 }

package/dist/backend/AppShell.js

@@ -4,8 +4,17 @@ import * as React from "react";
 import { createContext, useContext } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { ChevronDown, ChevronLeft } from "lucide-react";
+import { ChevronDown, ChevronLeft, Home, PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
 import { Button } from "../primitives/button.js";
+import {
+  Breadcrumb as BreadcrumbNav,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "../primitives/breadcrumb.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { SearchInput } from "../primitives/search-input.js";
 import { FlashMessages } from "./FlashMessages.js";
@@ -283,6 +292,10 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   useEventBridge();
   const resolvedProductName = productName ?? t("appShell.productName");
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mobileDrawerView, setMobileDrawerView] = React.useState("auto");
+  React.useEffect(() => {
+    if (!mobileOpen) setMobileDrawerView("auto");
+  }, [mobileOpen]);
   const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault);
   const [navGroups, setNavGroups] = React.useState(resolvedGroups);
   const [openGroups, setOpenGroups] = React.useState(
@@ -474,7 +487,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           "aria-label": t("appShell.goToDashboard"),
           children: [
             /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
-            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+            !compact && /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: resolvedProductName })
           ]
         }
       ) }),
@@ -577,7 +590,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             "aria-label": t("appShell.goToDashboard"),
             children: [
               /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
-              !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+              !compact && /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: resolvedProductName })
             ]
           }
         ) }) : null,
@@ -637,7 +650,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           "aria-label": t("appShell.goToDashboard"),
           children: [
             /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
-            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+            !compact && /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: resolvedProductName })
           ]
         }
       ) }),
@@ -866,7 +879,6 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           type: "button",
           variant: "outline",
           size: "sm",
-          className: "h-7 text-xs",
           "data-menu-item-id": item.id,
           onClick: () => item.onClick?.(),
           children: label
@@ -877,165 +889,223 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     [t, topbarInjectedMenuItems]
   );
   return /* @__PURE__ */ jsxs(HeaderContext.Provider, { value: headerCtxValue, children: [
-    /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`, children: [
-      /* @__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: [
-        renderSidebar(effectiveCollapsed, false, isSectionView),
-        sidebarScrollState !== "none" ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-10 items-end justify-center bg-gradient-to-t from-background via-background/80 to-transparent pb-1.5",
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                "data-testid": "sidebar-scroll-chevron",
-                "data-sidebar-scroll-chevron": sidebarScrollState,
-                "aria-label": sidebarScrollState === "up" ? t("ui.sidebar.chevron.scrollTop", "Scroll to top") : t("ui.sidebar.chevron.scrollBottom", "Scroll to bottom"),
-                className: "pointer-events-auto text-muted-foreground/70 hover:text-foreground",
-                onClick: () => handleSidebarChevronScroll(sidebarScrollState === "up" ? "top" : "bottom"),
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `inline-flex transition-transform duration-300 ${sidebarScrollState === "up" ? "rotate-180" : ""}`,
-                    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 animate-bounce" })
-                  }
-                )
-              }
-            )
-          }
-        ) : null
-      ] }),
-      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`,
-          style: { width: "240px" },
-          "data-testid": "appshell-section-sidebar",
-          children: [
-            renderSectionAside(),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-background via-background/80 to-transparent"
-              }
-            )
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0", children: [
-        /* @__PURE__ */ jsxs("header", { className: "border-b bg-background/80 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`,
+        style: { "--topbar-height": "61px" },
+        children: [
           /* @__PURE__ */ jsx(
-            "div",
+            "button",
             {
-              "data-testid": "backend-chrome-ready",
-              "data-ready": isChromeReady ? "true" : "false",
-              className: "hidden"
+              type: "button",
+              onClick: () => setCollapsed((c) => !c),
+              "aria-label": t("appShell.toggleSidebar"),
+              className: "hidden lg:flex fixed top-4 z-dropdown size-7 items-center justify-center rounded-md border bg-background text-muted-foreground shadow-sm transition-all hover:text-foreground hover:bg-muted focus:outline-none focus-visible:shadow-focus",
+              style: { left: `calc(${asideWidth} - 14px)` },
+              children: effectiveCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 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" }) }) }),
-            /* @__PURE__ */ jsx(
-              IconButton,
+          /* @__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: [
+            renderSidebar(effectiveCollapsed, false, isSectionView),
+            sidebarScrollState !== "none" ? /* @__PURE__ */ jsx(
+              "div",
               {
-                variant: "outline",
-                size: "sm",
-                className: "hidden lg:inline-flex",
-                "aria-label": t("appShell.toggleSidebar"),
-                onClick: () => setCollapsed((c) => !c),
-                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 }];
+                className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-10 items-end justify-center bg-gradient-to-t from-background via-background/80 to-transparent pb-1.5",
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    "data-testid": "sidebar-scroll-chevron",
+                    "data-sidebar-scroll-chevron": sidebarScrollState,
+                    "aria-label": sidebarScrollState === "up" ? t("ui.sidebar.chevron.scrollTop", "Scroll to top") : t("ui.sidebar.chevron.scrollBottom", "Scroll to bottom"),
+                    className: "pointer-events-auto text-muted-foreground/70 hover:text-foreground",
+                    onClick: () => handleSidebarChevronScroll(sidebarScrollState === "up" ? "top" : "bottom"),
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `inline-flex transition-transform duration-300 ${sidebarScrollState === "up" ? "rotate-180" : ""}`,
+                        children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 animate-bounce" })
+                      }
+                    )
+                  }
+                )
               }
-              const items = [...root, ...rest];
-              const lastIndex = items.length - 1;
-              return /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-2 text-sm min-w-0", children: items.map((b, i) => {
-                const isLast = i === lastIndex;
-                const hiddenOnMobile = !isLast ? "hidden md:inline" : "";
-                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  i > 0 && /* @__PURE__ */ jsx("span", { className: `text-muted-foreground hidden md:inline`, children: "/" }),
-                  b.href ? /* @__PURE__ */ jsx(Link, { href: b.href, className: `text-muted-foreground hover:text-foreground ${hiddenOnMobile}`, children: b.label }) : /* @__PURE__ */ jsx("span", { className: `font-medium truncate max-w-[45vw] md:max-w-[60vw]`, children: b.label })
-                ] }, i);
-              }) });
-            })()
+            ) : null
           ] }),
-          /* @__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,
-            /* @__PURE__ */ jsx(AiAssistantLauncher, { variant: "topbar" }),
-            rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(ProgressTopBar, { t, className: "sticky top-0 z-sticky" }),
-        /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl", children: [
-          /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID, context: injectionContext }),
-          /* @__PURE__ */ jsx(FlashMessages, {}),
-          /* @__PURE__ */ jsx(PartialIndexBanner, {}),
-          /* @__PURE__ */ jsx(UpgradeActionBanner, {}),
-          /* @__PURE__ */ jsx(LastOperationBanner, {}),
-          /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID, context: injectionContext }),
-          /* @__PURE__ */ jsx(
-            InjectionSpot,
+          isSectionView ? /* @__PURE__ */ jsxs(
+            "aside",
             {
-              spotId: LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID,
-              context: injectionContext
+              className: `${asideClassesBase} px-3 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: [
+                renderSectionAside(),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-background via-background/80 to-transparent"
+                  }
+                )
+              ]
             }
-          ),
-          /* @__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: "border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 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-modal", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/20", onClick: () => setMobileOpen(false), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("aside", { className: "absolute left-0 top-0 flex h-full w-[260px] flex-col bg-background border-r overflow-hidden", children: [
-          /* @__PURE__ */ jsxs("div", { className: "shrink-0 p-3 pb-2 flex items-center justify-between border-b", 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: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 28, height: 28, className: "rounded" }),
-              resolvedProductName
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0", children: [
+            /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-sticky border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-3 sm:px-4 lg:px-6 py-3 flex items-center justify-between gap-2 sm:gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "backend-chrome-ready",
+                  "data-ready": isChromeReady ? "true" : "false",
+                  className: "hidden"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx(IconButton, { variant: "ghost", 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];
+                  if (items.length === 0) return null;
+                  const home = items[0];
+                  const current = items.length > 1 ? items[items.length - 1] : null;
+                  const mid = items.slice(1, -1);
+                  const hasMid = mid.length > 0;
+                  return /* @__PURE__ */ jsx(BreadcrumbNav, { divider: "arrow", className: "ml-2 lg:ml-3 text-sm", children: /* @__PURE__ */ jsxs(BreadcrumbList, { className: "[&_[data-slot=breadcrumb-separator]_svg]:size-4", children: [
+                    /* @__PURE__ */ jsx(BreadcrumbItem, { children: home.href && current ? /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, "aria-label": home.label, children: /* @__PURE__ */ jsx(Link, { href: home.href, children: /* @__PURE__ */ jsx(Home, { className: "size-4", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsx(BreadcrumbPage, { "aria-label": home.label, children: /* @__PURE__ */ jsx(Home, { className: "size-4", "aria-hidden": "true" }) }) }),
+                    current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      hasMid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "md:hidden" }),
+                        /* @__PURE__ */ jsx(BreadcrumbItem, { className: "md:hidden", children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, { "aria-label": t("appShell.breadcrumb.collapsed", { count: mid.length }) }) }),
+                        mid.map((b, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                          /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:inline-flex" }),
+                          /* @__PURE__ */ jsx(BreadcrumbItem, { className: "hidden md:inline-flex", children: b.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, title: b.label, children: /* @__PURE__ */ jsx(Link, { href: b.href, children: b.label }) }) : /* @__PURE__ */ jsx(BreadcrumbLink, { title: b.label, "aria-disabled": "true", tabIndex: -1, children: b.label }) })
+                        ] }, `mid-${i}`))
+                      ] }) : null,
+                      /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+                      /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { title: current.label, children: current.label }) })
+                    ] }) : null
+                  ] }) });
+                })()
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3 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,
+                /* @__PURE__ */ jsx(AiAssistantLauncher, { variant: "topbar" }),
+                rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "sm", onClick: () => setMobileOpen(false), "aria-label": t("appShell.closeMenu"), children: "\u2715" })
+            /* @__PURE__ */ jsx(ProgressTopBar, { t, className: "sticky top-0 z-sticky" }),
+            /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl", children: [
+              /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID, context: injectionContext }),
+              /* @__PURE__ */ jsx(FlashMessages, {}),
+              /* @__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: "border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 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") })
+              ] })
+            ] })
           ] }),
-          mobileSidebarSlot && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-3 py-2", children: mobileSidebarSlot }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-3", children: renderSidebar(false, true) })
-        ] })
-      ] })
-    ] }),
+          mobileOpen && /* @__PURE__ */ jsxs("div", { className: "lg:hidden fixed inset-0 z-modal", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => setMobileOpen(false), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("aside", { className: "absolute left-0 top-0 flex h-full w-[280px] max-w-[85vw] flex-col bg-background border-r shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-between gap-2 border-b px-4 py-3", children: [
+                /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2 min-w-0 text-sm font-semibold", onClick: () => setMobileOpen(false), "aria-label": t("appShell.goToDashboard"), children: [
+                  /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 28, height: 28, className: "rounded shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: resolvedProductName })
+                ] }),
+                /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", onClick: () => setMobileOpen(false), "aria-label": t("appShell.closeMenu"), children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+              ] }),
+              mobileSidebarSlot && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-3 py-2", children: mobileSidebarSlot }),
+              sidebarMode !== "main" ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-5 border-b px-4 pt-3 pb-0", role: "tablist", children: [
+                { id: "main", label: t("backend.nav.main", "Main") },
+                {
+                  id: "section",
+                  label: sidebarMode === "settings" ? settingsSectionTitle ?? t("backend.nav.settings", "Settings") : profileSectionTitle ?? t("backend.nav.profile", "Profile")
+                }
+              ].map((tab) => {
+                const isActive = tab.id === "main" ? mobileDrawerView === "main" : mobileDrawerView === "auto";
+                const tabId = `mobile-drawer-tab-${tab.id}`;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: tabId,
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": isActive,
+                    "aria-controls": "mobile-drawer-tabpanel",
+                    onClick: () => setMobileDrawerView(tab.id === "main" ? "main" : "auto"),
+                    className: "relative inline-flex items-center pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground",
+                    "data-active": isActive,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: tab.label }),
+                      isActive ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute -bottom-px left-0 right-0 h-0.5 bg-foreground",
+                          "aria-hidden": "true"
+                        }
+                      ) : null
+                    ]
+                  },
+                  tab.id
+                );
+              }) }) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  children: renderSidebar(false, true, mobileDrawerView === "main")
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(UmesDevToolsPanel, {})
   ] });
 }