@tristan2828/ui-foundation 4.13.0 → 4.14.0

package/dist/components/app/app-shell-nav.d.ts

@@ -11,6 +11,15 @@ export type NavItem = {
 export type NavSection = {
     label: string;
     items: readonly NavItem[];
+    /**
+     * The label folds the section away: a button with a chevron. Whether
+     * it's open is remembered per browser, by the section's label. The
+     * section holding the page you're on is always open, and the icon rail
+     * shows every section's items whatever their state.
+     */
+    collapsible?: boolean;
+    /** Whether a collapsible section starts open for someone who has never folded it. Defaults to true. */
+    defaultOpen?: boolean;
 };
 /** One entry of `AppShell`'s `nav`: a page, or a labelled section of pages. */
 export type NavEntry = NavItem | NavSection;
@@ -19,6 +28,9 @@ export declare function isNavSection(entry: NavEntry): entry is NavSection;
 export type NavGroup = {
     label?: string;
     items: readonly NavItem[];
+    /** From its section: the label folds it (NavSection's `collapsible`). */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
 };
 /**
  * The sidebar groups for a nav, in order. A flat nav (no sections) is the

package/dist/components/app/app-shell-nav.js

@@ -16,7 +16,11 @@ export function navGroups(nav) {
             if (run.length)
                 groups.push({ items: run });
             run = [];
-            groups.push({ label: entry.label, items: entry.items });
+            groups.push({
+                label: entry.label,
+                items: entry.items,
+                ...(entry.collapsible && { collapsible: true, defaultOpen: entry.defaultOpen ?? true }),
+            });
         }
         else {
             run.push(entry);

package/dist/components/app/app-shell.d.ts

@@ -11,7 +11,10 @@ export type AppShellProps = {
      * pages (`{ label, items }`, one per module, say). A nav with no sections
      * is the single "Navigation" group. One entry is marked active: the most
      * specific whose route matches, so '/tasks' and '/tasks/categories' can
-     * both be listed.
+     * both be listed. A section marked `collapsible` folds under its label,
+     * remembered per browser (`defaultOpen` for the first visit); the one
+     * holding the current page stays open, and the icon rail shows every
+     * section's items.
      */
     nav: readonly NavEntry[];
     /**

package/dist/components/app/app-shell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { ChevronRightIcon, LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
 import { activeNavTo, navGroups } from './app-shell-nav.js';
@@ -9,6 +9,7 @@ import { versionHref, versionLabel } from './app-shell-version.js';
 import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
 import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
+import { cn } from 'cn';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
@@ -47,6 +48,64 @@ function VersionEntry({ version }) {
     const className = 'block truncate px-2 type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden';
     return href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: `${className} hover:underline`, children: label })) : (_jsx("span", { className: className, children: label }));
 }
+// One group's entries. A plain Link, not NavLink: NavLink marks every
+// matching entry current, and only the most specific one should be
+// (activeNavTo).
+function NavMenu({ items, activeTo }) {
+    return (_jsx(SidebarMenu, { children: items.map(({ to, label, icon: Icon }) => {
+            const isActive = to === activeTo;
+            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, to));
+        }) }));
+}
+// Whether a collapsible section is open, remembered per browser by its
+// label. Storage can be missing or refuse (a private window): then it's
+// remembered for the page's life only.
+const SECTION_KEY = (label) => `ui-foundation:nav-section:${label}`;
+function storedSectionOpen(label) {
+    try {
+        const stored = window.localStorage.getItem(SECTION_KEY(label));
+        return stored === null ? null : stored === 'open';
+    }
+    catch {
+        return null;
+    }
+}
+function storeSectionOpen(label, open) {
+    try {
+        window.localStorage.setItem(SECTION_KEY(label), open ? 'open' : 'closed');
+    }
+    catch {
+        // Not remembered; the state still holds until the page reloads.
+    }
+}
+// A section whose label folds it (#152). On the icon rail (the collapsed
+// sidebar on a wide screen) its items always show and its label stays the
+// rail's hidden one, so no page is out of reach and no hidden button
+// takes a tab stop. The section holding the current page is always open:
+// arriving in a closed one opens it and remembers that.
+function CollapsibleNavGroup({ group, activeTo }) {
+    const { state, isMobile } = useSidebar();
+    const contentId = useId();
+    const [stored, setStored] = useState(() => storedSectionOpen(group.label));
+    const holdsCurrent = group.items.some((item) => item.to === activeTo);
+    // Arriving in a folded section unfolds it, and it stays unfolded after.
+    if (holdsCurrent && stored !== true)
+        setStored(true);
+    useEffect(() => {
+        if (holdsCurrent)
+            storeSectionOpen(group.label, true);
+    }, [holdsCurrent, group.label]);
+    if (state === 'collapsed' && !isMobile) {
+        return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }));
+    }
+    const open = holdsCurrent || (stored ?? group.defaultOpen ?? true);
+    return (_jsxs(SidebarGroup, { "data-collapsible-section": open ? 'open' : 'closed', children: [_jsxs(SidebarGroupLabel, { render: _jsx("button", { type: "button", "aria-expanded": open, "aria-controls": contentId, "aria-disabled": holdsCurrent || undefined, onClick: () => {
+                        if (holdsCurrent)
+                            return;
+                        setStored(!open);
+                        storeSectionOpen(group.label, !open);
+                    } }), className: "w-full justify-between text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-disabled:hover:bg-transparent aria-disabled:hover:text-sidebar-foreground/70", children: [group.label, _jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn('transition-transform', open && 'rotate-90') })] }), _jsx(SidebarGroupContent, { id: contentId, hidden: !open, children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }));
+}
 function AppShellSkeleton() {
     return (_jsxs("div", { className: "flex h-screen w-full gap-4 p-4", "data-state": "loading", children: [_jsx(Skeleton, { className: "h-full w-56 shrink-0" }), _jsxs("div", { className: "flex-1 space-y-4 pt-2", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-40 w-full" })] })] }));
 }
@@ -79,13 +138,7 @@ export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true,
         return _jsx(Navigate, { to: "/login", replace: true, state: isLoggingOut ? undefined : { from } });
     }
     const activeTo = activeNavTo(nav, location.pathname);
-    return (_jsxs(TooltipProvider, { children: [reporter && _jsx(ReportRoutePattern, { reporter: reporter }), _jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: group.items.map(({ to, label, icon: Icon }) => {
-                                                            // A plain Link, not NavLink: NavLink marks every
-                                                            // matching entry current, and only the most specific
-                                                            // one should be (activeNavTo).
-                                                            const isActive = to === activeTo;
-                                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, to));
-                                                        }) }) })] }, `${groupIndex}:${group.label ?? ''}`))), sidebarExtra] }), _jsxs(SidebarFooter, { children: [version && _jsx(VersionEntry, { version: version }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [_jsx("span", { className: "truncate type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden", children: user.name }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Log out", onClick: () => {
+    return (_jsxs(TooltipProvider, { children: [reporter && _jsx(ReportRoutePattern, { reporter: reporter }), _jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => group.collapsible && group.label !== undefined ? (_jsx(CollapsibleNavGroup, { group: { ...group, label: group.label }, activeTo: activeTo }, `${groupIndex}:${group.label}`)) : (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }, `${groupIndex}:${group.label ?? ''}`))), sidebarExtra] }), _jsxs(SidebarFooter, { children: [version && _jsx(VersionEntry, { version: version }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [_jsx("span", { className: "truncate type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden", children: user.name }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Log out", onClick: () => {
                                                         setIsLoggingOut(true);
                                                         // A failed request still ends the session on screen
                                                         // (AuthProvider), so this stays a deliberate logout: a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {