@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/.turbo/turbo-build.log

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

package/dist/backend/AppShell.js

@@ -33,6 +33,7 @@ import { slugifySidebarId } from "@open-mercato/shared/modules/navigation/sideba
 import { readVersionedPreference, writeVersionedPreference } from "@open-mercato/shared/lib/browser/versionedPreference";
 import { cloneSidebarGroups } from "./sidebar/customization-helpers.js";
 import { InjectionSpot } from "./injection/InjectionSpot.js";
+import { useNavBadge } from "./nav/navBadges.js";
 import {
   BackendRecordInjectionContextProvider
 } from "./injection/recordContext.js";
@@ -57,7 +58,8 @@ import {
   BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID,
   BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
   GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
-  GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID
+  GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
+  BACKEND_NAV_BADGES_INJECTION_SPOT_ID
 } from "./injection/spotIds.js";
 const SIDEBAR_OPEN_GROUPS_KEY = "om:sidebarOpenGroups";
 const SIDEBAR_OPEN_GROUPS_VERSION = 1;
@@ -270,6 +272,20 @@ function resolveItemKey(item) {
 function sidebarBlockPadding(compact) {
   return `${compact ? "px-2" : "px-3"} transition-[padding] duration-200 ease-out`;
 }
+function NavItemBadge({ href, compact }) {
+  const badge = useNavBadge(href);
+  if (!badge || badge.count <= 0) return null;
+  const display = badge.count > 99 ? "99+" : String(badge.count);
+  const tone = badge.tone === "attention" ? "bg-status-warning-bg text-status-warning-text" : "bg-muted text-muted-foreground";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `ml-auto inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium ${tone} ${compact ? "absolute right-0 top-0 -mr-1 -mt-1" : ""}`,
+      "aria-label": badge.label ?? display,
+      children: display
+    }
+  );
+}
 function sidebarInjectionWrapper(compact) {
   return `${sidebarBlockPadding(compact)} empty:hidden`;
 }
@@ -286,6 +302,19 @@ function renderIcon(icon, iconName, iconMarkup, fallback) {
   return fallback;
 }
 const HeaderContext = createContext(null);
+const noopSidebarCollapse = {
+  collapsed: false,
+  setCollapsed: () => {
+  },
+  requestCollapse: () => {
+  },
+  releaseRequest: () => {
+  }
+};
+const SidebarCollapseContext = createContext(null);
+function useSidebarCollapse() {
+  return useContext(SidebarCollapseContext) ?? noopSidebarCollapse;
+}
 function ApplyBreadcrumb({ breadcrumb, title, titleKey }) {
   const ctx = useContext(HeaderContext);
   const t = useT();
@@ -365,6 +394,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     if (!mobileOpen) setMobileDrawerView("auto");
   }, [mobileOpen]);
   const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault);
+  const [externalCollapseRequest, setExternalCollapseRequest] = React.useState(null);
+  const collapsedBeforeExternalRequestRef = React.useRef(null);
   const [navGroups, setNavGroups] = React.useState(resolvedGroups);
   const [openGroups, setOpenGroups] = React.useState(
     () => Object.fromEntries(resolvedGroups.map((g) => [resolveGroupKey(g), true]))
@@ -379,8 +410,24 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     if (!label) return false;
     return label.toLowerCase().includes(navQueryNorm);
   }, [navQueryActive, navQueryNorm]);
-  const effectiveCollapsed = collapsed;
+  const effectiveCollapsed = externalCollapseRequest === true ? true : collapsed;
   const expandedSidebarWidth = "240px";
+  const requestCollapse = React.useCallback((next) => {
+    setExternalCollapseRequest((prev) => {
+      if (prev === null) collapsedBeforeExternalRequestRef.current = collapsed;
+      return next;
+    });
+  }, [collapsed]);
+  const releaseRequest = React.useCallback(() => {
+    collapsedBeforeExternalRequestRef.current = null;
+    setExternalCollapseRequest(null);
+  }, []);
+  const sidebarCollapseValue = React.useMemo(() => ({
+    collapsed: effectiveCollapsed,
+    setCollapsed: (next) => setCollapsed(next),
+    requestCollapse,
+    releaseRequest
+  }), [effectiveCollapsed, requestCollapse, releaseRequest]);
   const sidebarAsideRef = React.useRef(null);
   const [sidebarScrollState, setSidebarScrollState] = React.useState("down");
   const sidebarScrollIntentRef = React.useRef(null);
@@ -627,7 +674,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                     item.iconMarkup,
                     item.href.includes("/backend/entities/user/") && item.href.endsWith("/records") ? DataTableIcon : DefaultIcon
                   ) }),
-                  !compact && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+                  !compact && /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+                  /* @__PURE__ */ jsx(NavItemBadge, { href: item.href, compact })
                 ]
               }
             ),
@@ -979,12 +1027,21 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     }),
     [t, topbarInjectedMenuItems]
   );
-  return /* @__PURE__ */ jsxs(HeaderContext.Provider, { value: headerCtxValue, children: [
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: headerCtxValue, children: /* @__PURE__ */ jsxs(SidebarCollapseContext.Provider, { value: sidebarCollapseValue, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: `relative min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`,
-        style: { "--topbar-height": "61px" },
+        style: {
+          "--topbar-height": "61px",
+          // Left offset of the content column (sidebar, plus the section sidebar on
+          // settings/profile routes). Exposed so full-bleed pages — e.g. the
+          // workflow visual editor — can size themselves to the content column with
+          // `calc(100vw - var(--app-content-offset))` instead of being capped by
+          // `main`'s centered max-width. Only meaningful at `lg` and up, where the
+          // grid (and the sidebar) is active.
+          "--app-content-offset": isSectionView ? `calc(${asideWidth} + 240px)` : asideWidth
+        },
         children: [
           /* @__PURE__ */ jsx(
             "a",
@@ -1120,6 +1177,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             ] }),
             /* @__PURE__ */ jsx(ProgressTopBar, { t, className: "sticky top-0 z-sticky", completedAutoHideMs: progressCompletedAutoHideMs }),
             /* @__PURE__ */ jsxs("main", { id: "main-content", tabIndex: -1, className: "flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl", children: [
+              /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_NAV_BADGES_INJECTION_SPOT_ID, context: injectionContext }),
               /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID, context: injectionContext }),
               /* @__PURE__ */ jsx(FlashMessages, {}),
               /* @__PURE__ */ jsx(PartialIndexBanner, {}),
@@ -1207,10 +1265,11 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
       }
     ),
     /* @__PURE__ */ jsx(UmesDevToolsPanel, {})
-  ] });
+  ] }) });
 }
 export {
   AppShell,
-  ApplyBreadcrumb
+  ApplyBreadcrumb,
+  useSidebarCollapse
 };
 //# sourceMappingURL=AppShell.js.map