@flowselections/core 1.0.27 → 1.0.29

package/dist/components/layout/AuthenticatedLayout.js

@@ -45,5 +45,5 @@ export function AuthenticatedLayout({ children, header = true, permissions = tru
         visibleModules,
         permissionsLoading: loading,
     }), [sidebarProps.shellId, sidebarProps.modules, visibleModules, loading]);
-    return (_jsx(ShellContext.Provider, { value: shell, children: _jsxs("div", { className: "min-h-screen bg-background [--core-topbar-h:3.5rem] md:[--core-topbar-h:0px]", children: [_jsx(Sidebar, { ...sidebarProps, permissions: permissions, visibleModules: visibleModules, loading: loading }), _jsxs("div", { className: "flex min-h-dvh flex-col pt-14 md:ml-64 md:pt-0", children: [header && _jsx(Header, { title: title }), _jsx("main", { className: "flex-1", children: permissions && access === "none" ? _jsx(NoAccess, {}) : (children ?? _jsx(Outlet, {})) })] })] }) }));
+    return (_jsx(ShellContext.Provider, { value: shell, children: _jsxs("div", { className: "min-h-screen bg-background [--core-topbar-h:3.5rem] md:[--core-topbar-h:0px]", children: [_jsx(Sidebar, { ...sidebarProps, permissions: permissions, visibleModules: visibleModules, loading: loading }), _jsxs("div", { className: "flex min-h-dvh flex-col pt-[var(--core-topbar-h)] md:ml-64 md:pt-0", children: [header && _jsx(Header, { title: title }), _jsx("main", { className: "flex-1", children: permissions && access === "none" ? _jsx(NoAccess, {}) : (children ?? _jsx(Outlet, {})) })] })] }) }));
 }

package/dist/components/layout/Header.js

@@ -7,5 +7,5 @@ import { BugsDialog } from "./BugsDialog.js";
 import { NotificationBell } from "./NotificationBell.js";
 export function Header({ title }) {
     const [bugsDialogOpen, setBugsDialogOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "sticky top-[var(--core-topbar-h,0px)] md:top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-card px-6", children: [_jsx("h1", { className: "text-xl font-semibold text-foreground", children: title }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "relative hidden md:block", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoeken...", className: "w-64 pl-9" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setBugsDialogOpen(true), children: [_jsx(Bug, { className: "mr-2 h-4 w-4" }), "Bugs melden"] }), _jsx(NotificationBell, {})] })] }), _jsx(BugsDialog, { open: bugsDialogOpen, onOpenChange: setBugsDialogOpen })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "sticky top-[var(--core-topbar-h,0px)] md:top-0 z-30 flex h-[var(--app-header-height)] shrink-0 items-center justify-between border-b border-border bg-card px-6", children: [_jsx("h1", { className: "text-xl font-semibold text-foreground", children: title }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "relative hidden md:block", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoeken...", className: "w-64 pl-9" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setBugsDialogOpen(true), children: [_jsx(Bug, { className: "mr-2 h-4 w-4" }), "Bugs melden"] }), _jsx(NotificationBell, {})] })] }), _jsx(BugsDialog, { open: bugsDialogOpen, onOpenChange: setBugsDialogOpen })] }));
 }

package/dist/components/layout/LoginPage.js

@@ -78,5 +78,5 @@ export function LoginPage({ redirectTo = "/instellingen", routeHandlesRedirect =
     if (showForgot) {
         return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background p-4", children: _jsxs(Card, { className: "w-full max-w-md", children: [_jsxs(CardHeader, { className: "text-center", children: [_jsx(BrandLogo, { src: "/brand/logo.svg", className: "mx-auto mb-4 max-h-16 max-w-52 object-contain", fallbackClassName: "mb-4 font-display text-primary" }), _jsx(CardTitle, { className: "font-display text-2xl", children: "Wachtwoord vergeten" }), _jsx(CardDescription, { children: "Vul je e-mailadres in om een reset-link te ontvangen" })] }), _jsxs("form", { onSubmit: handleForgotPassword, children: [_jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "forgot-email", children: "E-mailadres" }), _jsx(Input, { id: "forgot-email", type: "email", placeholder: "naam@bedrijf.nl", value: forgotEmail, onChange: (e) => setForgotEmail(e.target.value), required: true, maxLength: 255 })] }) }), _jsxs(CardFooter, { className: "flex flex-col gap-4", children: [_jsx(Button, { type: "submit", className: "w-full", disabled: forgotLoading, children: forgotLoading ? "Versturen..." : "Reset-link versturen" }), _jsx("button", { type: "button", onClick: () => setShowForgot(false), className: "text-sm text-primary hover:underline", children: "Terug naar inloggen" })] })] })] }) }));
     }
-    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background p-4", children: _jsxs(Card, { className: "w-full max-w-md", children: [_jsxs(CardHeader, { className: "text-center", children: [_jsx(BrandLogo, { src: "/brand/logo.svg", className: "mx-auto mb-4 max-h-16 max-w-52 object-contain", fallbackClassName: "mb-4 font-display text-primary" }), _jsx(CardTitle, { className: "font-display text-2xl", children: "Inloggen" }), _jsx(CardDescription, { children: "Voer je gegevens in om toegang te krijgen tot het systeem" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "E-mailadres" }), _jsx(Input, { id: "email", type: "email", placeholder: "naam@bedrijf.nl", value: email, onChange: (e) => setEmail(e.target.value), required: true, maxLength: 255 })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "password", children: "Wachtwoord" }), _jsx(Input, { id: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChange: (e) => setPassword(e.target.value), required: true, maxLength: 128 })] })] }), _jsxs(CardFooter, { className: "flex flex-col gap-4", children: [_jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Bezig met inloggen..." : "Inloggen" }), _jsx("button", { type: "button", onClick: () => setShowForgot(true), className: "text-sm text-muted-foreground hover:text-primary hover:underline", children: "Wachtwoord vergeten?" })] })] })] }) }));
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background p-4", children: _jsxs(Card, { className: "w-full max-w-md", children: [_jsxs(CardHeader, { className: "text-center", children: [_jsx(BrandLogo, { src: "/brand/logo.svg", className: "mx-auto mb-4 max-h-16 max-w-52 object-contain", fallbackClassName: "mb-4 font-display text-primary" }), _jsx(CardTitle, { className: "font-sans text-2xl font-semibold", children: "Inloggen" }), _jsx(CardDescription, { children: "Voer je gegevens in om toegang te krijgen tot het systeem" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "E-mailadres" }), _jsx(Input, { id: "email", type: "email", placeholder: "naam@bedrijf.nl", value: email, onChange: (e) => setEmail(e.target.value), required: true, maxLength: 255 })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "password", children: "Wachtwoord" }), _jsx(Input, { id: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChange: (e) => setPassword(e.target.value), required: true, maxLength: 128 })] })] }), _jsxs(CardFooter, { className: "flex flex-col gap-4", children: [_jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Bezig met inloggen..." : "Inloggen" }), _jsx("button", { type: "button", onClick: () => setShowForgot(true), className: "text-sm text-muted-foreground hover:text-primary hover:underline", children: "Wachtwoord vergeten?" })] })] })] }) }));
 }

package/dist/components/layout/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/core/components/layout/Sidebar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,uBAAuB,CAAC;AAQjE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO;;;EAI5E;AAuKD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAmB,EACnB,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,OAAO,GACR,EAAE,YAAY,2CA+Dd"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/core/components/layout/Sidebar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,uBAAuB,CAAC;AAQjE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO;;;EAI5E;AAkKD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAmB,EACnB,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,OAAO,GACR,EAAE,YAAY,2CA+Dd"}

package/dist/components/layout/Sidebar.js

@@ -21,17 +21,15 @@ export function useSidebarModules(modules, permissions) {
 // ─── Single flat nav link ─────────────────────────────────────────────────────
 function SidebarLink({ item, pathname, indent = false, onNavigate, }) {
     const isActive = pathname === item.href;
-    return (_jsxs(Link, { to: item.href, onClick: onNavigate, className: cn("flex items-center gap-3 rounded-lg px-3 text-sm font-medium transition-colors", indent ? "py-2" : "py-2.5", isActive
+    return (_jsxs(Link, { to: item.href, onClick: onNavigate, className: cn("flex items-center gap-3 rounded-lg px-3 font-sans text-sm font-medium transition-colors", indent ? "py-2" : "py-2.5", isActive
             ? "bg-sidebar-accent text-sidebar-accent-foreground"
-            : "text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), children: [_jsx(item.icon, { className: cn(indent ? "h-4 w-4" : "h-5 w-5") }), item.label] }));
+            : "text-sidebar-foreground hover:bg-sidebar-accent/50"), children: [_jsx(item.icon, { className: cn(indent ? "h-4 w-4" : "h-5 w-5") }), item.label] }));
 }
 // ─── Collapsible group (for modules with children) ────────────────────────────
 function SidebarGroup({ item, pathname, onNavigate, }) {
     const groupActive = item.children?.some((child) => pathname === child.href || pathname.startsWith(child.href + "/")) ?? false;
     const [open, setOpen] = useState(groupActive);
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => setOpen(!open), className: cn("flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors cursor-pointer", groupActive
-                    ? "text-sidebar-accent-foreground"
-                    : "text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), children: [_jsx(item.icon, { className: "h-5 w-5" }), _jsx("span", { className: "flex-1 text-left", children: item.label }), _jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", open && "rotate-180") })] }), open && (_jsx("div", { className: "ml-3 space-y-1", children: item.children.map((child) => (_jsx(SidebarLink, { item: child, pathname: pathname, indent: true, onNavigate: onNavigate }, child.href))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => setOpen(!open), className: "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 font-sans text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent/50 cursor-pointer", children: [_jsx(item.icon, { className: "h-5 w-5" }), _jsx("span", { className: "flex-1 text-left", children: item.label }), _jsx(ChevronDown, { className: cn("h-4 w-4 text-sidebar-muted transition-transform", open && "rotate-180") })] }), open && (_jsx("div", { className: "ml-3 space-y-1", children: item.children.map((child) => (_jsx(SidebarLink, { item: child, pathname: pathname, indent: true, onNavigate: onNavigate }, child.href))) }))] }));
 }
 // ─── Shared content (desktop aside + mobile sheet) ────────────────────────────
 function SidebarContent({ auth, visibleModules, loading, logoSrc, showSettings, pathname, onNavigate, }) {
@@ -39,7 +37,7 @@ function SidebarContent({ auth, visibleModules, loading, logoSrc, showSettings,
         onNavigate?.();
         await auth.signOut();
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "flex shrink-0 items-center justify-center px-12 py-0 border-b border-sidebar-border", children: _jsx(BrandLogo, { src: logoSrc, className: "max-h-24 w-auto max-w-full object-contain", fallbackClassName: "text-sidebar-foreground" }) }), _jsx("nav", { className: "min-h-0 flex-1 space-y-1 px-3 py-4 overflow-y-auto sidebar-scroll", "aria-busy": loading || undefined, children: loading ? (_jsx("div", { "data-testid": "sidebar-skeleton", className: "space-y-2", children: [0, 1, 2, 3].map((i) => (_jsx(Skeleton, { className: "h-9 w-full bg-sidebar-accent" }, i))) })) : (visibleModules.map((mod) => mod.nav.children?.length ? (_jsx(SidebarGroup, { item: mod.nav, pathname: pathname, onNavigate: onNavigate }, mod.id)) : (_jsx(SidebarLink, { item: mod.nav, pathname: pathname, onNavigate: onNavigate }, mod.id)))) }), _jsxs("div", { className: "shrink-0 border-t border-sidebar-border px-3 py-4", children: [showSettings && (_jsx(SidebarLink, { item: { label: "Instellingen", href: "/instellingen", icon: Settings }, pathname: pathname, onNavigate: onNavigate })), _jsxs("button", { onClick: handleSignOut, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-accent-foreground mt-1 cursor-pointer", children: [_jsx(LogOut, { className: "h-5 w-5" }), "Uitloggen"] })] })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col font-sans", children: [_jsx("div", { className: "flex h-24 shrink-0 items-center justify-center px-6 py-2", children: _jsx(BrandLogo, { src: logoSrc, className: "max-h-20 w-auto max-w-full object-contain", fallbackClassName: "flex h-full max-w-full items-center text-sidebar-foreground" }) }), _jsx("nav", { className: "min-h-0 flex-1 space-y-1 px-3 py-4 overflow-y-auto sidebar-scroll", "aria-busy": loading || undefined, children: loading ? (_jsx("div", { "data-testid": "sidebar-skeleton", className: "space-y-2", children: [0, 1, 2, 3].map((i) => (_jsx(Skeleton, { className: "h-9 w-full bg-sidebar-accent" }, i))) })) : (visibleModules.map((mod) => mod.nav.children?.length ? (_jsx(SidebarGroup, { item: mod.nav, pathname: pathname, onNavigate: onNavigate }, mod.id)) : (_jsx(SidebarLink, { item: mod.nav, pathname: pathname, onNavigate: onNavigate }, mod.id)))) }), _jsxs("div", { className: "shrink-0 border-t border-sidebar-border px-3 py-4", children: [showSettings && (_jsx(SidebarLink, { item: { label: "Instellingen", href: "/instellingen", icon: Settings }, pathname: pathname, onNavigate: onNavigate })), _jsxs("button", { onClick: handleSignOut, className: "mt-1 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 font-sans text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent/50 cursor-pointer", children: [_jsx(LogOut, { className: "h-5 w-5" }), "Uitloggen"] })] })] }));
 }
 // ─── Main Sidebar ─────────────────────────────────────────────────────────────
 /**
@@ -68,5 +66,5 @@ export function Sidebar({ auth, modules, shellId, permissions = false, logoSrc,
         showSettings: footer.settings,
         pathname,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("aside", { "data-shell": shellId, className: "fixed left-0 top-0 z-40 hidden h-screen h-dvh w-64 bg-sidebar md:block", children: _jsx(SidebarContent, { ...contentProps }) }), _jsxs("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-3 border-b border-sidebar-border bg-sidebar px-3 md:hidden", children: [_jsx("button", { type: "button", onClick: () => setMobileOpen(true), "aria-label": "Menu openen", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: _jsx(Menu, { className: "h-5 w-5" }) }), _jsx(BrandLogo, { src: logo, className: "h-8 w-auto max-w-[10rem] object-contain", fallbackClassName: "text-sidebar-foreground" })] }), _jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: _jsxs(SheetContent, { side: "left", "data-shell": shellId, className: "w-64 max-w-[85vw] border-sidebar-border bg-sidebar p-0 md:hidden", children: [_jsx(SheetTitle, { className: "sr-only", children: "Navigatie" }), _jsx(SidebarContent, { ...contentProps, onNavigate: close })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("aside", { "data-shell": shellId, className: "fixed left-0 top-0 z-40 hidden h-screen h-dvh w-64 bg-sidebar md:block", children: _jsx(SidebarContent, { ...contentProps }) }), _jsxs("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-3 border-b border-sidebar-border bg-sidebar px-3 md:hidden", children: [_jsx("button", { type: "button", onClick: () => setMobileOpen(true), "aria-label": "Menu openen", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-sidebar-foreground hover:bg-sidebar-accent/50", children: _jsx(Menu, { className: "h-5 w-5" }) }), _jsx(BrandLogo, { src: logo, className: "h-8 w-auto max-w-[10rem] object-contain", fallbackClassName: "flex h-8 max-w-[10rem] items-center text-sidebar-foreground" })] }), _jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: _jsxs(SheetContent, { side: "left", "data-shell": shellId, className: "w-64 max-w-[85vw] border-sidebar-border bg-sidebar p-0 md:hidden", children: [_jsx(SheetTitle, { className: "sr-only", children: "Navigatie" }), _jsx(SidebarContent, { ...contentProps, onNavigate: close })] }) })] }));
 }

package/dist/styles.css

@@ -5,6 +5,10 @@
 @custom-variant dark (&:is(.dark *));
 
 @layer base {
+  :root {
+    --app-header-height: 4rem;
+  }
+
   button, [role="button"], a, [type="button"], [type="submit"], [type="reset"] {
     cursor: pointer;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowselections/core",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -99,7 +99,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
-    "@lovable.dev/vite-tanstack-config": "2.23.1",
+    "@lovable.dev/vite-tanstack-config": "2.25.3",
     "@types/node": "^22.16.5",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",