@eintrek/erp-shell 0.1.48 → 0.1.50

package/dist/index.js

@@ -1090,7 +1090,7 @@ function samePage(pathname, url) {
     const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
     return strip(pathname) === strip(url);
 }
-function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, chrome = "brand", }) {
+function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, chrome = "brand", highlightActiveModule = false, }) {
     const workspace = chrome === "workspace";
     const params = navigation.useParams();
     const pathname = navigation.usePathname();
@@ -1122,8 +1122,9 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                 isPathActive(pathname, subPage.url)));
         // Parent only active when path matches its URL exactly AND no child
         // is active (so parent+child don't both light up).
-        const isItemActive = (workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
-            !hasActiveSubItem;
+        const isItemActive = (highlightActiveModule && !item.subModules?.length && !!item.isActive) ||
+            ((workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
+                !hasActiveSubItem);
         return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
     });
     // A group opens when its page becomes current and otherwise stays as the
@@ -1211,7 +1212,7 @@ function OrgMark({ logoUrl, size = "md", }) {
     const box = size === "sm"
         ? "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background"
         : size === "header"
-            ? "flex aspect-square size-8 shrink-0 items-center justify-center rounded-[9px] border border-[color:color-mix(in_oklab,var(--header-fg,currentColor)_28%,transparent)] bg-[color-mix(in_oklab,var(--header-fg,currentColor)_10%,transparent)] text-[var(--header-fg,currentColor)] overflow-hidden max-sm:size-7"
+            ? "flex aspect-square size-8 shrink-0 items-center justify-center rounded-[9px] border border-[color:var(--header-mark-border,color-mix(in_oklab,var(--header-fg,currentColor)_28%,transparent))] bg-[var(--header-mark-bg,color-mix(in_oklab,var(--header-fg,currentColor)_10%,transparent))] text-[var(--header-mark-fg,var(--header-fg,currentColor))] overflow-hidden max-sm:size-7"
             : "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden";
     const icon = size === "sm" ? "size-3.5 shrink-0" : "size-4";
     if (logoUrl && !failed) {
@@ -1282,7 +1283,7 @@ function SidebarHeader({ children, className }) {
     return jsxRuntime.jsx("div", { className: erpTheme.cn("px-2 py-3", className), children: children });
 }
 
-function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, closeOnNavigation = false, header, footer, bottom, chrome = "brand", className, }) {
+function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, closeOnNavigation = false, highlightActiveModule = false, header, footer, bottom, chrome = "brand", className, }) {
     const { open } = useSidebar();
     const modulesWithActiveState = React__namespace.useMemo(() => modules.map(m => ({
         ...m,
@@ -1293,7 +1294,7 @@ function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, clo
     if (chrome === "workspace") {
         return (jsxRuntime.jsxs("div", { className: erpTheme.cn("flex h-screen w-[244px] shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground", 
             // As a drawer (≤1024px) it floats over the page and needs the lift.
-            "max-[1024px]:shadow-2xl", className), children: [header ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxRuntime.jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace" }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
+            "max-[1024px]:shadow-2xl", className), children: [header ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxRuntime.jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace", highlightActiveModule: highlightActiveModule }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
     }
     return (jsxRuntime.jsxs("div", { className: erpTheme.cn("bg-sidebar shrink-0 flex flex-col overflow-hidden shadow-2xl h-screen w-[var(--sidebar-width-mobile)]", "!w-76 xl:rounded-b-4xl xl:rounded-tl-4xl xl:m-5 xl:h-[calc(100vh-2.5rem)]", className), children: [jsxRuntime.jsx(SidebarHeader, { children: header }), jsxRuntime.jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), jsxRuntime.jsx(SidebarFooter, { className: "pl-2 pr-2", children: footer })] }));
 }
@@ -1310,6 +1311,16 @@ const WORKSPACE_HEADER_VARS = {
     "--header-title-px": "0px",
     "--header-title-py": "0px",
 };
+const WORKSPACE_LIGHT_HEADER_VARS = {
+    "--header-fg": "var(--foreground)",
+    "--header-fg-muted": "var(--muted-foreground)",
+    "--header-hover": "var(--accent)",
+    "--header-mark-bg": "var(--accent)",
+    "--header-mark-fg": "var(--primary)",
+    "--header-mark-border": "transparent",
+    "--header-title-px": "0px",
+    "--header-title-py": "0px",
+};
 
 /**
  * Top-level app chrome: sticky header, sidebar slot, content gutter and the
@@ -1323,7 +1334,7 @@ const WORKSPACE_HEADER_VARS = {
  * an erp-shell bump — domain components must NOT add their own root padding
  * or content gets indented twice.
  */
-function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, chrome = "brand", headerEnd, mobileBrand, }) {
+function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, }) {
     const { data: session, status } = react.useSession();
     const { open, setOpen } = useSidebar();
     const router = navigation.useRouter();
@@ -1454,7 +1465,12 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         : "";
     const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
     const wrap = permissionProvider ?? ((c) => c);
-    return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", style: WORKSPACE_HEADER_VARS, children: [jsxRuntime.jsx(HeaderBackground, { className: "rounded-none" }), jsxRuntime.jsxs("header", { className: "relative z-10 flex min-h-[72px] w-full items-center gap-3 px-[18px] py-3 text-[var(--header-fg)] sm:px-6 lg:min-h-[88px] lg:px-10", children: [isSidebarModalLayout ? (
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxRuntime.jsxs("div", { className: cx("sticky top-0 z-30 shrink-0 w-full", workspaceHeader === "light" &&
+                                "border-b border-border bg-card/85 backdrop-blur-sm"), style: workspaceHeader === "light"
+                                ? WORKSPACE_LIGHT_HEADER_VARS
+                                : WORKSPACE_HEADER_VARS, children: [workspaceHeader === "light" ? null : (jsxRuntime.jsx(HeaderBackground, { className: "rounded-none" })), jsxRuntime.jsxs("header", { className: cx("relative z-10 flex w-full items-center gap-3 text-[var(--header-fg)]", workspaceHeader === "light"
+                                        ? "min-h-[66px] px-3 py-2 sm:min-h-[72px] sm:px-[22px] lg:min-h-[82px] lg:px-8"
+                                        : "min-h-[72px] px-[18px] py-3 sm:px-6 lg:min-h-[88px] lg:px-10"), children: [isSidebarModalLayout ? (
                                         // As in the design: the mark, then a menu button, and the
                                         // organisation on the right — no trail, no title, so the
                                         // organisation's name has the room it needs on a phone.
@@ -2345,6 +2361,7 @@ exports.SidebarTrigger = SidebarTrigger;
 exports.TapMenu = TapMenu;
 exports.ThemeProvider = ThemeProvider;
 exports.WORKSPACE_HEADER_VARS = WORKSPACE_HEADER_VARS;
+exports.WORKSPACE_LIGHT_HEADER_VARS = WORKSPACE_LIGHT_HEADER_VARS;
 exports.WorkspaceBrand = WorkspaceBrand;
 exports.axiosInstance = instance;
 exports.buildSystemLinks = buildSystemLinks;