@eintrek/erp-shell 0.1.48 → 0.1.50

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { OrganizationSwitcher, type OrganizationSwitcherProps, type Organization
 export { SidebarHeader } from "./navigation/sidebar-header";
 export { AppSidebar, type AppSidebarProps } from "./navigation/app-sidebar";
 export { AppLayoutShell, type AppLayoutShellProps, type AppLayoutShellOrganization, } from "./navigation/app-layout-shell";
-export { type ShellChrome, WORKSPACE_HEADER_VARS } from "./navigation/chrome";
+export { type ShellChrome, type WorkspaceHeaderTone, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, } from "./navigation/chrome";
 export { WorkspaceBrand, type WorkspaceBrandProps } from "./navigation/workspace-brand";
 export { SidebarHelpCard, SidebarHelpLink, type SidebarHelpCardProps, type SidebarHelpLinkProps, } from "./navigation/sidebar-help-card";
 export { AccessDenied, type AccessDeniedProps } from "./auth/access-denied";

package/dist/index.esm.js

@@ -1071,7 +1071,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 = useParams();
     const pathname = usePathname();
@@ -1103,8 +1103,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
@@ -1192,7 +1193,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) {
@@ -1263,7 +1264,7 @@ function SidebarHeader({ children, className }) {
     return jsx("div", { className: 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.useMemo(() => modules.map(m => ({
         ...m,
@@ -1274,7 +1275,7 @@ function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, clo
     if (chrome === "workspace") {
         return (jsxs("div", { className: 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 ? jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace" }), jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
+            "max-[1024px]:shadow-2xl", className), children: [header ? jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace", highlightActiveModule: highlightActiveModule }), jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
     }
     return (jsxs("div", { className: 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: [jsx(SidebarHeader, { children: header }), jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), jsx(SidebarFooter, { className: "pl-2 pr-2", children: footer })] }));
 }
@@ -1291,6 +1292,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
@@ -1304,7 +1315,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 } = useSession();
     const { open, setOpen } = useSidebar();
     const router = useRouter();
@@ -1435,7 +1446,12 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         : "";
     const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
     const wrap = permissionProvider ?? ((c) => c);
-    return (jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (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) })), jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", style: WORKSPACE_HEADER_VARS, children: [jsx(HeaderBackground, { className: "rounded-none" }), 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 (jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (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) })), jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (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 : (jsx(HeaderBackground, { className: "rounded-none" })), 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.
@@ -2290,5 +2306,5 @@ const getAxiosErrorMessage = (error) => {
     return String(error);
 };
 
-export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, NavMain, NavTools, NavUser, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WORKSPACE_HEADER_VARS, WorkspaceBrand, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, decodeJWT, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, hasPlanFeature, isLikelyTransientNetworkError, isPathActive, normalizePathnameForPermissionRules, resolveUiRoutePermission, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
+export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, NavMain, NavTools, NavUser, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, decodeJWT, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, hasPlanFeature, isLikelyTransientNetworkError, isPathActive, normalizePathnameForPermissionRules, resolveUiRoutePermission, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map