@eintrek/erp-shell 0.1.47 → 0.1.49

package/dist/index.js

@@ -438,44 +438,49 @@ function useSidebar() {
     }
     return context;
 }
+/**
+ * Below this width the sidebar is a drawer over the page rather than a docked
+ * column (AppLayoutShell uses the same query).
+ */
+const DRAWER_QUERY = "(max-width: 1024px)";
+const isDrawerLayout = () => typeof window !== "undefined" && window.matchMedia(DRAWER_QUERY).matches;
+/** Whether the docked sidebar was left open, as remembered in this browser. */
+function rememberedDockedOpen(fallback) {
+    if (typeof window === "undefined")
+        return fallback;
+    const saved = localStorage.getItem("sidebar-open");
+    return saved !== null ? saved === "true" : fallback;
+}
 /**
  * Sidebar Provider Component
- * Provides sidebar state management through React Context
- * Persists state to localStorage
+ * Provides sidebar state management through React Context.
+ *
+ * What is remembered (localStorage) is whether the DOCKED sidebar was open.
+ * A drawer always starts closed — a remembered desktop preference, or a
+ * drawer someone left open, is not a request to cover the page on load.
  */
 function SidebarProvider({ children, defaultOpen = true, }) {
-    // Initialize from localStorage or default
-    const [open, setOpenState] = React.useState(() => {
-        if (typeof window !== "undefined") {
-            const saved = localStorage.getItem("sidebar-open");
-            return saved !== null ? saved === "true" : defaultOpen;
-        }
-        return defaultOpen;
-    });
+    const [open, setOpenState] = React.useState(() => isDrawerLayout() ? false : rememberedDockedOpen(defaultOpen));
     const [isMobile, setIsMobile] = React.useState(false);
-    // Persist to localStorage
+    // Remember the docked sidebar only; opening the drawer changes nothing.
     React.useEffect(() => {
-        if (typeof window !== "undefined") {
+        if (typeof window !== "undefined" && !isDrawerLayout()) {
             localStorage.setItem("sidebar-open", String(open));
         }
     }, [open]);
-    // Handle mobile detection.
-    //
-    // Crossing into a narrow viewport closes the sidebar. One `open` state
-    // serves both layouts, and on desktop it is remembered as true — so
-    // narrowing the window turned that into a drawer covering the whole page,
-    // which had to be dismissed before anything underneath could be reached.
-    // A remembered desktop preference is not a request to open a drawer.
+    // Crossing into the drawer layout closes it; crossing back restores the
+    // docked sidebar as it was left.
     React.useEffect(() => {
-        let wasMobile = null;
-        const checkMobile = () => {
-            const nowMobile = window.innerWidth < 768;
-            setIsMobile(nowMobile);
-            if (nowMobile && wasMobile === false) {
-                setOpenState(false);
-            }
-            wasMobile = nowMobile;
+        const drawer = window.matchMedia(DRAWER_QUERY);
+        const onChange = () => {
+            setOpenState(drawer.matches ? false : rememberedDockedOpen(defaultOpen));
         };
+        drawer.addEventListener("change", onChange);
+        return () => drawer.removeEventListener("change", onChange);
+    }, [defaultOpen]);
+    // Phone width — the organisation switcher opens its menu from the bottom.
+    React.useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
         checkMobile();
         window.addEventListener("resize", checkMobile);
         return () => window.removeEventListener("resize", checkMobile);
@@ -1095,52 +1100,88 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             setOpen(false);
     };
     const code = orgCode ?? params?.code;
+    // Which module (and sub-item) the current page belongs to.
+    const states = items.map(item => {
+        const itemUrl = buildUrlWithCode(code, item.url);
+        // Most specific (longest) matching sub-item URL so only one link is active.
+        const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
+            const subItemUrl = buildUrlWithCode(code, subItem.url);
+            const matches = isPathActive(pathname, subItemUrl) ||
+                isPathActive(pathname, subItem.url);
+            const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                isPathActive(pathname, subPage.url));
+            if (!matches && !subPageMatches)
+                return best;
+            const candidateUrl = subItemUrl;
+            if (!best)
+                return candidateUrl;
+            return candidateUrl.length > best.length ? candidateUrl : best;
+        }, null) ?? null;
+        const hasActiveSubItem = !!activeSubItemUrl ||
+            !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                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;
+        return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
+    });
+    // A group opens when its page becomes current and otherwise stays as the
+    // user left it. defaultOpen alone decided once, on the first render — and
+    // on a direct load the sub-items arrive after permissions do, so the group
+    // holding the current page stayed shut.
+    const activeKey = items
+        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
+        .map(item => item.id)
+        .join(",");
+    const [openIds, setOpenIds] = React__namespace.useState(() => new Set(activeKey ? activeKey.split(",") : []));
+    React__namespace.useEffect(() => {
+        if (!activeKey)
+            return;
+        setOpenIds(prev => {
+            const ids = activeKey.split(",");
+            if (ids.every(id => prev.has(id)))
+                return prev;
+            const next = new Set(prev);
+            ids.forEach(id => next.add(id));
+            return next;
+        });
+    }, [activeKey]);
+    const setItemOpen = (id, open) => setOpenIds(prev => {
+        if (prev.has(id) === open)
+            return prev;
+        const next = new Set(prev);
+        if (open)
+            next.add(id);
+        else
+            next.delete(id);
+        return next;
+    });
     return (jsxRuntime.jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsxRuntime.jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
                 const groupHeading = workspace &&
                     item.group &&
-                    item.group !== items[index - 1]?.group ? (jsxRuntime.jsx("li", { className: "list-none px-[15px] pb-2.5 text-xs text-muted-foreground" +
-                        (index > 0 ? " pt-8" : ""), children: item.group }, `group-${item.id}`)) : null;
-                const itemUrl = buildUrlWithCode(code, item.url);
-                // Most specific (longest) matching sub-item URL so only one link is active.
-                const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
-                    const subItemUrl = buildUrlWithCode(code, subItem.url);
-                    const matches = isPathActive(pathname, subItemUrl) ||
-                        isPathActive(pathname, subItem.url);
-                    const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                        isPathActive(pathname, subPage.url));
-                    if (!matches && !subPageMatches)
-                        return best;
-                    const candidateUrl = subItemUrl;
-                    if (!best)
-                        return candidateUrl;
-                    return candidateUrl.length > best.length ? candidateUrl : best;
-                }, null) ?? null;
-                const hasActiveSubItem = !!activeSubItemUrl ||
-                    !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                        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;
+                    item.group !== items[index - 1]?.group ? (jsxRuntime.jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
+                        (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
+                const { itemUrl, activeSubItemUrl, isItemActive } = states[index];
                 const IconComp = item.icon;
                 const workspaceButton = workspace
-                    ? "h-auto gap-3 rounded-[10px] px-3.5 py-[11px] text-sm " +
+                    ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-[13px] " +
                         (isItemActive
                             ? "bg-sidebar-accent font-bold text-sidebar-accent-foreground"
                             : "font-medium text-sidebar-foreground/70")
                     : "";
                 const icon = workspace && IconComp ? (jsxRuntime.jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
                 const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsxRuntime.jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-[10px] leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
-                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isItemActive || hasActiveSubItem, className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
+                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
                                                 workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { id: item.id, children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxRuntime.jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
                                                     (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: workspace
-                                                ? "mx-0 ml-[23px] mt-1 border-l border-sidebar-border pl-2.5 [&_a]:text-[13px] [&_svg]:!size-4"
+                                                ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-[13px] [&_svg]:!size-[17px]"
                                                 : undefined, children: item.subModules.map(subItem => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
                                                 const isSubItemActive = subItemUrl === activeSubItemUrl;
                                                 const SubIcon = subItem.icon;
                                                 const approvalCount = approvalCounts && subItem.approvalCountKey
-                                                    ? approvalCounts[subItem.approvalCountKey] ?? 0
+                                                    ? (approvalCounts[subItem.approvalCountKey] ?? 0)
                                                     : 0;
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
@@ -1155,7 +1196,12 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                                                         : "text-sidebar-foreground"}`, isActive: false, children: jsxRuntime.jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsxRuntime.jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
                                                                         }) }) })] }) }, subItem.id));
                                                 }
-                                                return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "w-full", isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99 ? "99+" : approvalCount }))] }) }) }, subItem.id));
+                                                return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
+                                                            (workspace && isSubItemActive
+                                                                ? " font-semibold"
+                                                                : ""), isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
+                                                                        ? "99+"
+                                                                        : approvalCount }))] }) }) }, subItem.id));
                                             }) }) }))] }) })] }, item.id));
             }) }) }));
 }
@@ -1165,7 +1211,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) {
@@ -1264,6 +1310,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
@@ -1277,7 +1333,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();
@@ -1408,7 +1464,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.
@@ -2299,6 +2360,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;