@deenruv/admin-dashboard 1.0.17-dev.17 → 1.0.17-dev.20

package/dist/components/BrandLogo.js

@@ -6,17 +6,17 @@ export const BrandLogo = ({ isCollapsed = false }) => {
     let Logo = null;
     if (isCollapsed) {
         if (typeof collapsed === 'string')
-            Logo = _jsx("img", { src: collapsed, alt: "Logo", className: "size-full object-fill" });
+            Logo = _jsx("img", { src: collapsed, alt: "", className: "size-full object-contain" });
         if (typeof collapsed === 'object')
-            Logo = React.cloneElement(collapsed, { className: 'object-contain' });
+            Logo = React.cloneElement(collapsed, { className: 'size-full object-contain' });
     }
     if (!isCollapsed) {
         if (typeof full === 'string')
-            Logo = _jsx("img", { src: full, alt: "Logo", className: "size-full object-fill" });
+            Logo = _jsx("img", { src: full, alt: "", className: "size-full object-contain" });
         if (typeof full === 'object')
-            Logo = React.cloneElement(full, { className: 'object-contain' });
+            Logo = React.cloneElement(full, { className: 'size-full object-contain' });
     }
     if (!Logo)
-        return (_jsxs("svg", { width: "260px", height: "100%", viewBox: "0 0 200 60", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("filter", { id: "shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [_jsx("feOffset", { result: "offOut", in: "SourceAlpha", dx: "2", dy: "2" }), _jsx("feGaussianBlur", { result: "blurOut", in: "offOut", stdDeviation: "2" }), _jsx("feBlend", { in: "SourceGraphic", in2: "blurOut", mode: "normal" })] }) }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", fill: "black", fontSize: "24", fontWeight: "bold", dy: ".3em", children: isCollapsed ? name?.charAt?.(0) : name }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", fill: "#ffffff", fontSize: "24", fontWeight: "bold", dy: ".3em", filter: "url(#shadow)", opacity: "0.9", children: isCollapsed ? name?.charAt?.(0) : name })] }));
+        return (_jsxs("svg", { className: "size-full", viewBox: "0 0 200 60", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("filter", { id: "shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [_jsx("feOffset", { result: "offOut", in: "SourceAlpha", dx: "2", dy: "2" }), _jsx("feGaussianBlur", { result: "blurOut", in: "offOut", stdDeviation: "2" }), _jsx("feBlend", { in: "SourceGraphic", in2: "blurOut", mode: "normal" })] }) }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", fill: "black", fontSize: "24", fontWeight: "bold", dy: ".3em", children: isCollapsed ? name?.charAt?.(0) : name }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", fill: "#ffffff", fontSize: "24", fontWeight: "bold", dy: ".3em", filter: "url(#shadow)", opacity: "0.9", children: isCollapsed ? name?.charAt?.(0) : name })] }));
     return _jsx(_Fragment, { children: Logo });
 };

package/dist/components/Menu/AccountMenu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { apiClient, Button, cn, createDialog, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Tooltip, TooltipContent, TooltipTrigger, usePluginStore, useServer, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Permission } from '@deenruv/admin-types';
+import { LogOutIcon, RotateCwSquare } from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
+const accountMenuItemClass = 'cursor-pointer gap-2 focus:bg-[var(--sidebar-hover)] focus:text-[var(--sidebar-ink)]';
+const accountMenuSurfaceClass = 'border-[var(--sidebar-hairline)] bg-[var(--sidebar-surface)] text-[var(--sidebar-ink)] shadow-sm dark:shadow-none';
+export const AccountMenu = ({ isCollapsed, mode, onNavigate, }) => {
+    const { t } = useTranslation('common');
+    const navigate = useNavigate();
+    const { routes } = useAdminAccess();
+    const { topNavigationActionsMenu } = usePluginStore();
+    const { logOut } = useSettings();
+    const { activeAdministrator, clearAdministratorAccess, setJobQueue, userPermissions } = useServer();
+    const administratorName = activeAdministrator
+        ? `${activeAdministrator.firstName} ${activeAdministrator.lastName}`.trim()
+        : t('account');
+    const initials = activeAdministrator
+        ? `${activeAdministrator.firstName.charAt(0)}${activeAdministrator.lastName.charAt(0)}`.toUpperCase()
+        : '?';
+    const reindexEnabled = canAccessAdminItem({
+        item: { requiredPermissions: [Permission.UpdateCatalog, Permission.UpdateProduct] },
+        userPermissions,
+    });
+    const allowedActions = topNavigationActionsMenu?.filter((entry) => canAccessAdminItem({ item: entry.access, userPermissions }));
+    const fastLinks = [
+        { key: 'systemStatus', route: routes.find((route) => route.id === 'system.status') },
+        { key: 'globalSettings', route: routes.find((route) => route.id === 'settings.global') },
+    ].filter(({ route }) => route && canAccessAdminItem({ item: route, userPermissions }));
+    const rebuildSearchIndex = async () => {
+        const { reindex } = await apiClient('mutation')({ reindex: { id: true, queueName: true, state: true } });
+        setJobQueue(reindex.queueName, reindex.state === 'RUNNING');
+    };
+    const trigger = (_jsxs(Button, { variant: "ghost", className: isCollapsed
+            ? 'size-8 rounded-[4px] p-0 text-[var(--sidebar-secondary)] hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-ink)] focus-visible:ring-[var(--sidebar-focus)]'
+            : 'sidebar-row mx-2 w-[calc(100%-1rem)] justify-start bg-transparent focus-visible:ring-[var(--sidebar-focus)]', "aria-label": t('openAccountMenu'), children: [_jsx("span", { className: "sidebar-icon-slot rounded-[4px] bg-[var(--sidebar-active)] text-[10px] font-medium text-[var(--sidebar-active-ink)]", children: initials }), !isCollapsed && (_jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx("span", { className: "block truncate text-sm font-medium text-[var(--sidebar-ink)]", children: administratorName }), activeAdministrator?.emailAddress && (_jsx("span", { className: "block truncate text-xs font-normal text-[var(--sidebar-tertiary)]", children: activeAdministrator.emailAddress }))] }))] }));
+    return (_jsxs(DropdownMenu, { children: [isCollapsed ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: trigger }) }), _jsx(TooltipContent, { side: "right", children: administratorName })] })) : (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { side: mode === 'mobile' ? 'top' : 'right', align: mode === 'mobile' ? 'start' : 'end', sideOffset: 6, collisionPadding: 8, className: cn('z-[150] min-w-56', accountMenuSurfaceClass), children: [activeAdministrator?.emailAddress && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate", children: administratorName }), _jsx("span", { className: "block truncate text-xs font-normal text-[var(--sidebar-tertiary)]", children: activeAdministrator.emailAddress })] }), _jsx(DropdownMenuSeparator, { className: "bg-[var(--sidebar-hairline)]" })] })), reindexEnabled && (_jsxs(DropdownMenuItem, { className: accountMenuItemClass, onSelect: rebuildSearchIndex, children: [_jsx(RotateCwSquare, { className: "size-4" }), t('rebuildSerachIndex')] })), fastLinks.length > 0 && (_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { className: "focus:bg-[var(--sidebar-hover)] focus:text-[var(--sidebar-ink)]", children: t('fastLinks') }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: accountMenuSurfaceClass, children: fastLinks.map(({ key, route }) => (_jsxs(DropdownMenuItem, { className: accountMenuItemClass, onSelect: () => {
+                                                navigate(route.path, { viewTransition: true });
+                                                onNavigate?.();
+                                            }, children: [_jsx(RotateCwSquare, { className: "size-4" }), t(key)] }, key))) }) })] }) })), allowedActions?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: "bg-[var(--sidebar-hairline)]" }), allowedActions.map((action) => (_jsxs(DropdownMenuItem, { className: cn(accountMenuItemClass, action.className), onSelect: () => {
+                                    action.onClick();
+                                    onNavigate?.();
+                                }, children: [action.icon && _jsx(action.icon, { className: "size-4" }), action.label] }, action.label)))] })) : null, _jsx(DropdownMenuSeparator, { className: "bg-[var(--sidebar-hairline)]" }), _jsxs(DropdownMenuItem, { className: cn(accountMenuItemClass, 'text-red-500 focus:text-red-500'), onSelect: async () => {
+                            const confirmed = await createDialog({
+                                title: t('logOutConfirmation'),
+                                description: t('logOutConfirmationDescription'),
+                                buttons: [
+                                    { label: t('cancel'), variant: 'secondary', returnValue: false },
+                                    { label: t('logOut'), variant: 'destructive', returnValue: true },
+                                ],
+                            });
+                            if (confirmed) {
+                                clearAdministratorAccess();
+                                logOut();
+                            }
+                        }, children: [_jsx(LogOutIcon, { className: "size-4" }), t('logOut')] })] })] }));
+};

package/dist/components/Menu/Navigation.js

@@ -1,38 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { NavLink, useLocation } from 'react-router';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { cn, buttonVariants, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, Skeleton, } from '@deenruv/react-ui-devkit';
-import { adminNavigationGroups, canAccessAdminItem, getActiveNavigationLinkIds, getActiveNavigationGroupIds, getNavigationLinkActivePaths, insertNavigationLink, useAdminAccess, } from "../../access/index.js";
-export function Navigation({ isCollapsed }) {
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, cn, Skeleton, Tooltip, TooltipContent, TooltipTrigger, useNotifications, usePluginStore, useServer, useTranslation, } from '@deenruv/react-ui-devkit';
+import { adminNavigationGroups, canAccessAdminItem, getActiveNavigationGroupIds, getActiveNavigationLinkIds, getNavigationLinkActivePaths, insertNavigationLink, useAdminAccess, } from "../../access/index.js";
+import { mergeOpenGroupIds } from './SidebarState.js';
+export function Navigation({ isCollapsed, manuallyOpenGroupIds, onExpand, onOpenGroupIdsChange, onNavigate, }) {
     const { t } = useTranslation('common');
-    const { t: _pluginT } = useTranslation();
+    const { t: pluginTranslation } = useTranslation();
     const location = useLocation();
     const { navMenuData, viewMarkers } = usePluginStore();
     const { routes } = useAdminAccess();
-    const userPermissions = useServer((p) => p.userPermissions);
-    const loaded = useServer((p) => p.loaded);
+    const userPermissions = useServer((state) => state.userPermissions);
+    const loaded = useServer((state) => state.loaded);
     const getNavigationNotification = useNotifications(({ getNavigationNotification }) => getNavigationNotification);
-    const pluginT = (trans) => {
-        const split = trans.split('.');
-        const key = split.slice(1).join('.') || '';
-        const ns = split[0] || '';
-        return _pluginT(key, { ns });
+    const pluginT = (translation) => {
+        const [namespace = '', ...keyParts] = translation.split('.');
+        return pluginTranslation(keyParts.join('.'), { ns: namespace });
     };
     const navigationGroups = useMemo(() => {
-        const navData = adminNavigationGroups.map((group) => ({
+        const groups = adminNavigationGroups.map((group) => ({
             label: t(`menuGroups.${group.labelKey}`),
             id: group.id,
             links: [],
         }));
         routes.forEach((route) => {
-            if (!route.nav)
+            if (!route.nav || !canAccessAdminItem({ item: route, userPermissions }))
                 return;
-            if (!canAccessAdminItem({ item: route, userPermissions }))
+            const group = groups.find((candidate) => candidate.id === route.nav?.groupId);
+            if (!group)
                 return;
-            const foundGroupIdx = navData.findIndex((group) => group.id === route.nav?.groupId);
-            if (foundGroupIdx === -1)
-                return;
-            navData[foundGroupIdx].links.push({
+            group.links.push({
                 title: t(`menu.${route.nav.menuKey}`),
                 href: route.path,
                 id: route.nav.linkId,
@@ -43,68 +40,54 @@ export function Navigation({ isCollapsed }) {
                 activePaths: getNavigationLinkActivePaths(route, routes),
             });
         });
-        const { groups, links } = navMenuData;
-        groups.forEach(({ id, labelId, placement, access }) => {
+        navMenuData.groups.forEach(({ id, labelId, placement, access }) => {
             if (!canAccessAdminItem({ item: access, userPermissions }))
                 return;
-            let foundGroupIdx = -1;
-            const newGroup = { id, label: pluginT(labelId), links: [] };
-            if (placement?.groupId) {
-                foundGroupIdx = navData.findIndex((group) => group.id === placement.groupId);
-            }
-            if (foundGroupIdx == -1) {
-                navData.push(newGroup);
-            }
-            else {
-                navData.splice(foundGroupIdx + 1, 0, newGroup);
-            }
+            const nextGroup = { id, label: pluginT(labelId), links: [] };
+            const anchorIndex = placement?.groupId ? groups.findIndex((group) => group.id === placement.groupId) : -1;
+            if (anchorIndex === -1)
+                groups.push(nextGroup);
+            else
+                groups.splice(anchorIndex + 1, 0, nextGroup);
         });
-        links.forEach(({ groupId, href, labelId, id, icon, placement, access }) => {
+        navMenuData.links.forEach(({ groupId, href, labelId, id, icon, placement, access }) => {
             if (!canAccessAdminItem({ item: access, userPermissions }))
                 return;
-            const foundGroupIdx = navData.findIndex((group) => group.id === groupId);
-            if (foundGroupIdx == -1)
-                return;
-            const newElement = {
-                title: pluginT(labelId),
-                label: pluginT(labelId),
-                href: `/${href}`,
-                id,
-                icon,
-                access,
-                groupId,
-            };
-            if (!placement) {
-                navData[foundGroupIdx].links.push(newElement);
+            const group = groups.find((candidate) => candidate.id === groupId);
+            if (!group)
                 return;
-            }
-            navData[foundGroupIdx].links = insertNavigationLink(navData[foundGroupIdx].links, newElement, placement);
+            const link = { title: pluginT(labelId), href: `/${href}`, id, icon, access, groupId };
+            group.links = insertNavigationLink(group.links, link, placement);
         });
-        return navData.filter((group) => group.links.length > 0);
-    }, [navMenuData.groups, navMenuData.links, pluginT, routes, t, userPermissions]);
-    const permittedNavigationGroups = navigationGroups;
-    const activeGroupIds = useMemo(() => getActiveNavigationGroupIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname), [location.pathname, permittedNavigationGroups]);
-    const activeLinkIds = useMemo(() => new Set(getActiveNavigationLinkIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname).map((link) => link.id)), [location.pathname, permittedNavigationGroups]);
-    const previousPathname = useRef(location.pathname);
-    const [openGroupIds, setOpenGroupIds] = useState(activeGroupIds);
-    useEffect(() => {
-        const hasPathnameChanged = previousPathname.current !== location.pathname;
-        previousPathname.current = location.pathname;
-        if (!hasPathnameChanged)
-            return;
-        setOpenGroupIds((currentGroupIds) => {
-            const nextGroupIds = [...new Set([...currentGroupIds, ...activeGroupIds])];
-            return nextGroupIds.length === currentGroupIds.length ? currentGroupIds : nextGroupIds;
-        });
-    }, [activeGroupIds, location.pathname]);
+        return groups.filter((group) => group.links.length > 0);
+    }, [navMenuData.groups, navMenuData.links, pluginTranslation, routes, t, userPermissions]);
+    const allLinks = useMemo(() => navigationGroups.flatMap((group) => group.links), [navigationGroups]);
+    const activeGroupIds = useMemo(() => getActiveNavigationGroupIds(allLinks, location.pathname), [allLinks, location.pathname]);
+    const activeLinkIds = useMemo(() => new Set(getActiveNavigationLinkIds(allLinks, location.pathname).map((link) => link.id)), [allLinks, location.pathname]);
+    const openGroupIds = useMemo(() => mergeOpenGroupIds(manuallyOpenGroupIds, activeGroupIds), [activeGroupIds, manuallyOpenGroupIds]);
+    const updateOpenGroups = (groupIds) => {
+        const nextGroupIds = mergeOpenGroupIds(groupIds, activeGroupIds);
+        onOpenGroupIdsChange(nextGroupIds);
+    };
     if (!loaded) {
-        return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { className: "flex h-[calc(100%-64px)] flex-col gap-3 pb-2 lg:h-[calc(100%-72px)]", children: Array.from({ length: 3 }).map((_, groupIdx) => (_jsxs("div", { className: "flex flex-col gap-1 px-2.5", children: [!isCollapsed && (_jsx("div", { className: "px-3 py-2", children: _jsx(Skeleton, { className: "h-3 w-20" }) })), Array.from({ length: groupIdx === 0 ? 4 : groupIdx === 1 ? 5 : 3 }).map((_, linkIdx) => (_jsxs("div", { className: cn('flex items-center px-3 py-2', isCollapsed && 'justify-center px-0'), children: [_jsx(Skeleton, { className: cn('size-4 shrink-0', isCollapsed && 'size-6') }), !isCollapsed && _jsx(Skeleton, { className: "ml-2 h-4 w-24" })] }, linkIdx)))] }, groupIdx))) }) }));
+        return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-2 py-3", children: Array.from({ length: 10 }).map((_, index) => (_jsxs("div", { className: cn('flex h-8 items-center gap-2 px-2', isCollapsed && 'justify-center px-0'), children: [_jsx(Skeleton, { className: "size-5 shrink-0 bg-[var(--sidebar-hairline)]" }), !isCollapsed && _jsx(Skeleton, { className: "h-3 w-24 bg-[var(--sidebar-hairline)]" })] }, index))) }));
     }
-    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-64px)] flex-col gap-2 py-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-72px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : openGroupIds, onValueChange: setOpenGroupIds, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, className: "border-none", children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between px-3 py-2 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h4", { className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", children: group.label }), getNavigationNotification(group.id), viewMarkers ? (_jsx("p", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-1' : 'pb-2'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2.5 text-muted-foreground group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: group.links.map((link, index) => {
-                                    const notifications = getNavigationNotification(link.id);
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-2", children: _jsx(Accordion, { type: "multiple", value: openGroupIds, onValueChange: updateOpenGroups, className: "w-full", children: navigationGroups.map((group) => {
+                const firstLink = group.links[0];
+                const isGroupActive = activeGroupIds.includes(group.id);
+                if (isCollapsed) {
+                    const isSingleLink = group.links.length === 1;
+                    const collapsedControl = (_jsx("div", { className: "flex size-8 items-center justify-center", children: isSingleLink ? (_jsx(NavLink, { to: firstLink.href, viewTransition: true, onClick: onNavigate, "aria-current": activeLinkIds.has(firstLink.id) ? 'page' : undefined, className: "sidebar-link group/sidebar-link", children: _jsxs("span", { className: cn('flex size-8 items-center justify-center rounded-[4px] text-[var(--sidebar-secondary)] transition-colors group-focus-visible/sidebar-link:ring-2 group-focus-visible/sidebar-link:ring-[var(--sidebar-focus)] group-focus-visible/sidebar-link:outline-none hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-ink)]', activeLinkIds.has(firstLink.id) &&
+                                    'bg-[var(--sidebar-active)] text-[var(--sidebar-active-ink)] shadow-[inset_2px_0_0_var(--sidebar-active-indicator)]'), children: [_jsx(firstLink.icon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: firstLink.title })] }) })) : (_jsx(Button, { variant: "ghost", size: "icon", className: cn('size-8 rounded-[4px] text-[var(--sidebar-secondary)] hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-ink)] focus-visible:ring-[var(--sidebar-focus)]', isGroupActive &&
+                                'bg-[var(--sidebar-active)] text-[var(--sidebar-active-ink)] shadow-[inset_2px_0_0_var(--sidebar-active-indicator)]'), onClick: () => {
+                                updateOpenGroups([...openGroupIds, group.id]);
+                                onExpand();
+                            }, "aria-label": t('expandNavigationGroup', { group: group.label }), children: _jsx(firstLink.icon, { className: "size-4" }) })) }));
+                    return (_jsx("div", { className: "flex justify-center py-0.5", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: collapsedControl }), _jsxs(TooltipContent, { side: "right", className: "flex items-center gap-2", children: [_jsx("span", { children: isSingleLink ? firstLink.title : group.label }), getNavigationNotification(isSingleLink ? firstLink.id : group.id), viewMarkers && _jsx("span", { className: "text-xs text-[var(--sidebar-tertiary)]", children: group.id })] })] }) }, group.id));
+                }
+                return (_jsxs(AccordionItem, { value: group.id, className: "border-none px-2", children: [_jsx(AccordionTrigger, { className: "h-8 px-2 py-0 text-xs font-medium tracking-normal text-[var(--sidebar-secondary)] hover:text-[var(--sidebar-ink)] hover:no-underline", children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [_jsx("span", { className: "truncate", children: group.label }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [getNavigationNotification(group.id), viewMarkers && _jsx("span", { className: "text-[10px] font-normal", children: group.id })] })] }) }), _jsx(AccordionContent, { className: "pb-1", children: _jsx("nav", { id: group.id, "aria-label": group.label, className: "grid gap-0.5", children: group.links.map((link) => {
                                     const isActive = activeLinkIds.has(link.id);
-                                    return (_jsx(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9 rounded-lg ring-offset-background transition-all hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', isActive &&
-                                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:scale-100 hover:bg-primary hover:text-primary-foreground'), children: [_jsx(link.icon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: link.title })] }) }) }) }), _jsxs(TooltipContent, { side: "right", className: "relative flex items-center gap-4", children: [viewMarkers ? (_jsx("div", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, capitalizeFirstLetter(link.title), notifications] })] }, index)) : (_jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { id: link.id, className: cn('relative flex h-10 items-center justify-start rounded-lg px-3 text-sm font-medium capitalize transition-all hover:bg-muted hover:text-foreground', isActive &&
-                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:bg-primary hover:text-primary-foreground'), children: [viewMarkers ? (_jsx("div", { className: "absolute top-1/2 right-2 -translate-y-1/2 text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, _jsx("span", { className: cn('mr-2.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors', isActive && 'bg-primary-foreground/15 text-primary-foreground'), children: _jsx(link.icon, { className: "size-4" }) }), _jsx("span", { className: "truncate", children: capitalizeFirstLetter(link.title) }), notifications] }) })) }, link.id));
-                                }) }) })] }, group.id))) }) }) }));
+                                    return (_jsx(NavLink, { to: link.href, viewTransition: true, onClick: onNavigate, "aria-current": isActive ? 'page' : undefined, className: "sidebar-link group/sidebar-link", children: _jsxs("span", { className: "sidebar-row group-focus-visible/sidebar-link:ring-2 group-focus-visible/sidebar-link:ring-[var(--sidebar-focus)] group-focus-visible/sidebar-link:outline-none", "data-active": isActive, children: [_jsx("span", { className: "sidebar-icon-slot", children: _jsx(link.icon, { className: "size-4" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: link.title }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [getNavigationNotification(link.id), viewMarkers && (_jsx("span", { className: "text-[10px] font-normal text-[var(--sidebar-tertiary)]", children: link.id }))] })] }) }, link.id));
+                                }) }) })] }, group.id));
+            }) }) }));
 }

package/dist/components/Menu/NavigationFooter.js

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { capitalizeFirstLetter, cn, Routes, Separator, useServer, useTranslation } from '@deenruv/react-ui-devkit';
+import { cn, Routes, Separator, Tooltip, TooltipContent, TooltipTrigger, useServer, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Puzzle } from 'lucide-react';
 import { NavLink } from 'react-router';
 import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
-export const NavigationFooter = ({ isCollapsed }) => {
+import { AccountMenu } from './AccountMenu.js';
+export const NavigationFooter = ({ isCollapsed, mode, onNavigate }) => {
     const { t } = useTranslation('common');
-    const userPermissions = useServer((p) => p.userPermissions);
+    const userPermissions = useServer((state) => state.userPermissions);
     const { routes } = useAdminAccess();
     const extensionsRoute = routes.find((route) => route.id === 'extensions');
-    const isPermittedToExtensions = !!extensionsRoute && canAccessAdminItem({ item: extensionsRoute, userPermissions });
+    const canAccessExtensions = !!extensionsRoute && canAccessAdminItem({ item: extensionsRoute, userPermissions });
     const extensionsPath = extensionsRoute?.path || Routes.extensions;
-    return (_jsxs("div", { className: "flex w-full flex-col gap-2 border-t bg-card/80 py-2 text-xs text-muted-foreground select-none", children: [isPermittedToExtensions && !isCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(NavLink, { to: extensionsPath, viewTransition: true, children: _jsxs("div", { className: cn('relative mx-2 flex h-8 items-center justify-center px-3 text-sm font-medium capitalize transition-colors hover:bg-muted/70 hover:text-foreground', location.pathname === extensionsPath &&
-                                    'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [_jsx(Puzzle, { className: "mr-2 size-4" }), capitalizeFirstLetter(t('menu.extensions'))] }) }) }), _jsx(Separator, {})] })), _jsxs("div", { className: "flex items-center justify-center gap-1 px-2", children: [!isCollapsed && _jsx("p", { className: "uppercase", children: "Deenruv" }), _jsxs("span", { children: [!isCollapsed ? 'ver. ' : 'v. ', window.__DEENRUV_SETTINGS__.appVersion] })] })] }));
+    const version = window.__DEENRUV_SETTINGS__.appVersion;
+    const extensionsLink = (_jsx(NavLink, { to: extensionsPath, viewTransition: true, onClick: onNavigate, "aria-label": t('menu.extensions'), className: "sidebar-link group/sidebar-link", children: ({ isActive }) => (_jsxs("span", { className: cn(isCollapsed
+                ? 'mx-auto flex size-8 items-center justify-center rounded-[4px] text-[var(--sidebar-secondary)] transition-colors hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-ink)]'
+                : 'sidebar-row mx-2', 'group-focus-visible/sidebar-link:ring-2 group-focus-visible/sidebar-link:ring-[var(--sidebar-focus)] group-focus-visible/sidebar-link:outline-none', isCollapsed &&
+                isActive &&
+                'bg-[var(--sidebar-active)] text-[var(--sidebar-active-ink)] shadow-[inset_2px_0_0_var(--sidebar-active-indicator)]'), "data-active": !isCollapsed && isActive, children: [isCollapsed ? (_jsx(Puzzle, { className: "size-4" })) : (_jsx("span", { className: "sidebar-icon-slot", children: _jsx(Puzzle, { className: "size-4" }) })), !isCollapsed && _jsx("span", { className: "truncate", children: t('menu.extensions') })] })) }));
+    return (_jsxs("div", { className: "shrink-0 border-t border-[var(--sidebar-hairline)] bg-[var(--sidebar-surface)] py-2 text-xs text-[var(--sidebar-secondary)]", children: [canAccessExtensions && (_jsxs(_Fragment, { children: [isCollapsed ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "flex h-8 items-center justify-center", children: extensionsLink }) }), _jsx(TooltipContent, { side: "right", children: t('menu.extensions') })] })) : (extensionsLink), _jsx(Separator, { className: "my-2 bg-[var(--sidebar-hairline)]" })] })), isCollapsed ? (_jsx("div", { className: "flex justify-center", children: _jsx(AccountMenu, { isCollapsed: true, mode: mode, onNavigate: onNavigate }) })) : (_jsx(AccountMenu, { isCollapsed: false, mode: mode, onNavigate: onNavigate })), isCollapsed ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "mx-auto mt-2 max-w-10 truncate px-1 text-center text-[10px] text-[var(--sidebar-tertiary)]", children: ["v ", version] }) }), _jsxs(TooltipContent, { side: "right", children: [t('versionAbbreviation'), " ", version] })] })) : (_jsxs("div", { className: "mt-2 flex h-8 items-center gap-1 px-4 text-xs text-[var(--sidebar-tertiary)]", children: [_jsx("span", { children: "Deenruv" }), _jsxs("span", { children: [t('versionAbbreviation'), " ", version] })] }))] }));
 };

package/dist/components/Menu/SidebarContent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, useTranslation } from '@deenruv/react-ui-devkit';
+import { BrandLogo } from "../BrandLogo.js";
+import { Navigation } from './Navigation.js';
+import { NavigationFooter } from './NavigationFooter.js';
+export const SidebarContent = ({ isCollapsed, manuallyOpenGroupIds, mode, onExpand, onOpenGroupIdsChange, onNavigate, onNavigateHome, }) => {
+    const { t } = useTranslation('common');
+    return (_jsxs("div", { className: "deenruv-sidebar flex h-full min-h-0 flex-col bg-[var(--sidebar-canvas)] text-[var(--sidebar-ink)]", children: [_jsx("div", { className: cn('flex h-16 shrink-0 items-center border-b border-[var(--sidebar-hairline)] px-2 lg:h-[72px]', isCollapsed ? 'justify-center' : 'pr-10'), children: _jsx(Button, { variant: "ghost", className: cn('h-12 rounded-[4px] px-2 text-[var(--sidebar-ink)] hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-ink)] focus-visible:ring-[var(--sidebar-focus)]', isCollapsed ? 'size-8 p-1' : 'w-full justify-start'), onClick: onNavigateHome, "aria-label": t('goToDashboard'), title: t('goToDashboard'), children: _jsx("span", { className: cn('flex shrink-0 items-center justify-center', isCollapsed ? 'size-6' : 'h-10 w-full min-w-0'), children: _jsx(BrandLogo, { isCollapsed: isCollapsed }) }) }) }), _jsx(Navigation, { isCollapsed: isCollapsed, manuallyOpenGroupIds: manuallyOpenGroupIds, onExpand: onExpand, onOpenGroupIdsChange: onOpenGroupIdsChange, onNavigate: onNavigate }), _jsx(NavigationFooter, { isCollapsed: isCollapsed, mode: mode, onNavigate: onNavigate })] }));
+};

package/dist/components/Menu/SidebarState.js

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from 'react';
+export const SIDEBAR_COLLAPSED_STORAGE_KEY = 'deenruv:admin-sidebar:v1:collapsed';
+export const SIDEBAR_GROUPS_STORAGE_KEY = 'deenruv:admin-sidebar:v1:open-groups';
+export const parseStoredCollapsed = (value, fallback = false) => {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return fallback;
+};
+export const parseStoredGroupIds = (value) => {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? [...new Set(parsed.filter((id) => typeof id === 'string'))] : [];
+    }
+    catch {
+        return [];
+    }
+};
+export const mergeOpenGroupIds = (storedGroupIds, activeGroupIds) => [
+    ...new Set([...storedGroupIds, ...activeGroupIds]),
+];
+export const readSidebarStorage = (key) => {
+    try {
+        return window.localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+};
+export const writeSidebarStorage = (key, value) => {
+    try {
+        window.localStorage.setItem(key, value);
+    }
+    catch {
+        // Navigation remains usable when browser storage is unavailable.
+    }
+};
+const getInitialCollapsed = () => typeof window === 'undefined' ? false : parseStoredCollapsed(readSidebarStorage(SIDEBAR_COLLAPSED_STORAGE_KEY));
+const getInitialOpenGroupIds = () => typeof window === 'undefined' ? [] : parseStoredGroupIds(readSidebarStorage(SIDEBAR_GROUPS_STORAGE_KEY));
+export const useSidebarState = () => {
+    const [isCollapsed, setIsCollapsedState] = useState(getInitialCollapsed);
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+    const [manuallyOpenGroupIds, setManuallyOpenGroupIdsState] = useState(getInitialOpenGroupIds);
+    const setIsCollapsed = useCallback((collapsed) => {
+        setIsCollapsedState(collapsed);
+        writeSidebarStorage(SIDEBAR_COLLAPSED_STORAGE_KEY, String(collapsed));
+    }, []);
+    const toggleDesktop = useCallback(() => {
+        setIsCollapsedState((collapsed) => {
+            const nextCollapsed = !collapsed;
+            writeSidebarStorage(SIDEBAR_COLLAPSED_STORAGE_KEY, String(nextCollapsed));
+            return nextCollapsed;
+        });
+    }, []);
+    const setManuallyOpenGroupIds = useCallback((groupIds) => {
+        const nextGroupIds = [...new Set(groupIds)];
+        setManuallyOpenGroupIdsState(nextGroupIds);
+        writeSidebarStorage(SIDEBAR_GROUPS_STORAGE_KEY, JSON.stringify(nextGroupIds));
+    }, []);
+    useEffect(() => {
+        const handleShortcut = (event) => {
+            const target = event.target;
+            const isEditable = target instanceof HTMLElement &&
+                (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
+            if (event.key.toLowerCase() !== 'b' ||
+                (!event.metaKey && !event.ctrlKey) ||
+                event.altKey ||
+                event.shiftKey ||
+                isEditable) {
+                return;
+            }
+            event.preventDefault();
+            if (window.matchMedia('(min-width: 768px)').matches)
+                toggleDesktop();
+            else
+                setIsMobileOpen((open) => !open);
+        };
+        window.addEventListener('keydown', handleShortcut);
+        return () => window.removeEventListener('keydown', handleShortcut);
+    }, [toggleDesktop]);
+    return {
+        isCollapsed,
+        isMobileOpen,
+        manuallyOpenGroupIds,
+        setIsCollapsed,
+        setIsMobileOpen,
+        setManuallyOpenGroupIds,
+        toggleDesktop,
+    };
+};

package/dist/components/Menu/TopbarOverflow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover, PopoverContent, PopoverTrigger, useTranslation, } from '@deenruv/react-ui-devkit';
+import { SlidersHorizontal } from 'lucide-react';
+import { ChannelSwitcher } from './ChannelSwitcher.js';
+import { LanguagesDropdown } from './LanguagesDropdown.js';
+export const TopbarOverflow = ({ components }) => {
+    const { t } = useTranslation('common');
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "size-9 shrink-0 lg:hidden", "aria-label": t('openTopbarControls'), title: t('openTopbarControls'), children: _jsx(SlidersHorizontal, { className: "size-4" }) }) }), _jsx(PopoverContent, { align: "end", className: "z-[2138] w-[min(20rem,calc(100vw-2rem))] p-3 lg:hidden", children: _jsxs("div", { className: "flex flex-col gap-3", children: [components.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-2 border-b pb-3", children: components.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LanguagesDropdown, {}), _jsx(ChannelSwitcher, { className: "min-w-0 flex-1" })] })] }) })] }));
+};

package/dist/components/Menu/index.js

@@ -1,102 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo, useState } from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, ScrollArea, TooltipProvider, Routes, useSettings, useServer, usePluginStore, cn, dashToCamelCase, apiClient, useGlobalSearch, useTranslation, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, createDialog, buildURL, } from '@deenruv/react-ui-devkit';
-import { Permission } from '@deenruv/admin-types';
-import { useShallow } from 'zustand/react/shallow';
-import { GripVertical, LogOutIcon, MenuIcon, Moon, Slash, Sun, SunMoon, RotateCwSquare, SearchIcon, } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-import { Navigation } from './Navigation.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
 import { NavLink, useMatches, useNavigate } from 'react-router';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator, buildURL, Button, cn, dashToCamelCase, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ScrollArea, Sheet, SheetContent, SheetDescription, SheetTitle, TooltipProvider, Routes, useGlobalSearch, usePluginStore, useServer, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { MenuIcon, Moon, PanelLeftClose, PanelLeftOpen, SearchIcon, Slash, Sun, SunMoon } from 'lucide-react';
+import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
 import { ChannelSwitcher } from './ChannelSwitcher.js';
-import { BrandLogo } from "../BrandLogo.js";
 import { LanguagesDropdown } from './LanguagesDropdown.js';
 import { Notifications } from './Notifications.js';
-import { NavigationFooter } from "./NavigationFooter.js";
-import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
-const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.Group, { className: cn('flex h-full w-full data-[orientation=vertical]:flex-col', className), ...props }));
-const ResizablePanel = ResizablePrimitive.Panel;
-const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.Separator, { className: cn('relative flex w-px items-center justify-center bg-border/70 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center border bg-background text-muted-foreground", children: _jsx(GripVertical, { className: "size-2.5" }) })) }));
+import { SidebarContent } from './SidebarContent.js';
+import { useSidebarState } from './SidebarState.js';
+import { TopbarOverflow } from './TopbarOverflow.js';
 const removableCrumbs = ['draft', 'admin-ui'];
 export const Menu = ({ children }) => {
-    const openGlobalSearch = useGlobalSearch((state) => state.open);
-    const linkPath = [];
     const { t } = useTranslation('common');
-    const { topNavigationActionsMenu, topNavigationComponents } = usePluginStore();
-    const { routes, defaultRoute } = useAdminAccess();
-    const { logOut, theme, setTheme } = useSettings(useShallow((p) => ({
-        logOut: p.logOut,
-        theme: p.theme,
-        setTheme: p.setTheme,
-        language: p.language,
-        setLanguage: p.setLanguage,
-    })));
     const navigate = useNavigate();
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    const { activeAdministrator, clearAdministratorAccess, setJobQueue, userPermissions } = useServer();
+    const matches = useMatches();
+    const openGlobalSearch = useGlobalSearch((state) => state.open);
+    const { topNavigationComponents } = usePluginStore();
+    const { defaultRoute } = useAdminAccess();
+    const userPermissions = useServer((state) => state.userPermissions);
+    const { theme, setTheme } = useSettings();
+    const { isCollapsed, isMobileOpen, manuallyOpenGroupIds, setIsCollapsed, setIsMobileOpen, setManuallyOpenGroupIds, toggleDesktop, } = useSidebarState();
     const defaultRoutePath = defaultRoute?.path || Routes.dashboard;
     const defaultRouteMenuKey = defaultRoute?.nav?.menuKey || defaultRoute?.search?.menuKey || 'dashboard';
-    const globalSearchEnabled = true;
-    const languageSwitcherEnabled = true;
-    const channelSwitcherEnabled = true;
-    const notificationsEnabled = true;
-    const reindexEnabled = canAccessAdminItem({
-        item: { requiredPermissions: [Permission.UpdateCatalog, Permission.UpdateProduct] },
-        userPermissions,
-    });
-    const canAccessPluginSurface = (entry) => canAccessAdminItem({ item: entry.access, userPermissions });
-    const allowedTopNavigationComponents = topNavigationComponents?.filter(canAccessPluginSurface);
-    const allowedTopNavigationActions = topNavigationActionsMenu?.filter(canAccessPluginSurface);
-    const systemStatusRoute = routes.find((route) => route.id === 'system.status');
-    const globalSettingsRoute = routes.find((route) => route.id === 'settings.global');
-    const fastLinks = [
-        systemStatusRoute &&
-            canAccessAdminItem({ item: systemStatusRoute, userPermissions }) && {
-            key: 'systemStatus',
-            label: t('systemStatus'),
-            path: systemStatusRoute.path,
-        },
-        globalSettingsRoute &&
-            canAccessAdminItem({ item: globalSettingsRoute, userPermissions }) && {
-            key: 'globalSettings',
-            label: t('globalSettings'),
-            path: globalSettingsRoute.path,
-        },
-    ].filter(Boolean);
-    const rebuildSearchIndex = async () => {
-        await apiClient('mutation')({ reindex: { id: true, queueName: true, state: true } }).then(({ reindex: { queueName, state } }) => {
-            setJobQueue(queueName, state === 'RUNNING');
-        });
-    };
-    const matches = useMatches();
+    const allowedTopNavigationComponents = topNavigationComponents?.filter((entry) => canAccessAdminItem({ item: entry.access, userPermissions }));
     const crumbs = useMemo(() => matches
         .filter((match) => !!match.pathname)
         .map((match) => match.pathname)
-        .flatMap((p) => p.split('/'))
+        .flatMap((path) => path.split('/'))
         .filter(Boolean)
         .filter((crumb) => !removableCrumbs.includes(crumb)), [matches]);
-    return (_jsx("div", { className: "w-full bg-background", children: _jsx("div", { className: "flex h-full max-h-screen flex-col", children: _jsx("div", { className: "flex-1", children: _jsx(TooltipProvider, { delayDuration: 100, children: _jsxs(ResizablePanelGroup, { onLayoutChanged: (layout) => {
-                            document.cookie = `react-resizable-panels:layout=${JSON.stringify(Object.values(layout))}`;
-                        }, orientation: "horizontal", className: "size-full", children: [_jsxs(ResizablePanel, { id: "navigation", defaultSize: "16%", collapsedSize: "4%", collapsible: true, minSize: "11%", maxSize: "18%", onResize: (size) => {
-                                    const collapsed = size.asPercentage <= 4;
-                                    setIsCollapsed(collapsed);
-                                    document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(collapsed)}`;
-                                }, className: cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out'), children: [_jsx("div", { className: cn('flex h-[72px] flex-col items-center justify-center gap-4 border-b bg-card/80'), children: _jsx("div", { className: `flex h-full items-center justify-center ${!isCollapsed && 'w-full'} cursor-pointer px-4 py-3`, onClick: () => navigate(defaultRoutePath, { viewTransition: true }), children: _jsx(BrandLogo, { isCollapsed: isCollapsed }) }) }), _jsxs("div", { className: "flex h-[calc(100vh-72px)] flex-col justify-between bg-card/70", children: [_jsx(Navigation, { isCollapsed: isCollapsed }), _jsx(NavigationFooter, { isCollapsed: isCollapsed })] })] }), _jsx(ResizableHandle, { withHandle: true }), _jsxs(ResizablePanel, { id: "content", children: [_jsxs("div", { className: "flex h-[64px] items-center border-b bg-background/95 px-3 backdrop-blur lg:h-[72px] lg:px-5", children: [_jsxs("div", { className: "flex flex-col items-start justify-center", children: [_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: crumbs.length ? (crumbs.map((c, i) => {
-                                                                linkPath.push(c);
-                                                                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: buildURL(linkPath), viewTransition: true, children: _jsx("p", { className: cn('text-sm font-semibold tracking-tight text-foreground capitalize'), children: i === 0 ? t('menu.' + dashToCamelCase(c)) : c }) }) }), i !== crumbs.length - 1 && (_jsx(BreadcrumbSeparator, { children: _jsx(Slash, { className: "text-muted-foreground" }) }))] }, c));
-                                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: defaultRoutePath, viewTransition: true, children: _jsx("p", { className: "text-xl font-semibold tracking-tight text-foreground", children: t(defaultRouteMenuKey === 'dashboard'
-                                                                            ? 'dashboard'
-                                                                            : `menu.${dashToCamelCase(defaultRouteMenuKey)}`) }) }) })) }) }), _jsx("div", { className: "flex items-center gap-2" })] }), _jsxs("div", { className: "flex flex-1 items-center justify-end gap-1.5", children: [allowedTopNavigationComponents && allowedTopNavigationComponents.length > 0 ? (_jsx("div", { className: "flex items-center gap-2", children: allowedTopNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, languageSwitcherEnabled && _jsx(LanguagesDropdown, {}), channelSwitcherEnabled && _jsx(ChannelSwitcher, { className: "min-w-44" }), globalSearchEnabled && (_jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9", children: _jsx(SearchIcon, { className: "size-4" }) })), notificationsEnabled && _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "size-9", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" })) : theme === 'dark' ? (_jsx(Moon, { className: "absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })) : (_jsx(SunMoon, { className: "absolute size-[1.2rem] rotate-90 transition-all" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "size-9", children: _jsx(MenuIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { className: "z-[150] mr-6 min-w-40", children: [activeAdministrator?.emailAddress && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-2 px-3 py-2 font-medium", children: [_jsx("div", { className: "flex size-6 items-center justify-center bg-primary/10 text-xs font-semibold text-primary", children: activeAdministrator.firstName.charAt(0).toUpperCase() }), _jsxs("div", { className: "truncate text-sm", children: [activeAdministrator.firstName, " ", activeAdministrator.lastName] })] }), _jsx(DropdownMenuSeparator, { className: "my-1" })] })), reindexEnabled && (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: rebuildSearchIndex, children: [_jsx(RotateCwSquare, { className: "size-4" }), t('rebuildSerachIndex')] })), reindexEnabled && fastLinks.length > 0 && _jsx(DropdownMenuSeparator, {}), fastLinks.length > 0 && (_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: t('fastLinks') }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { children: fastLinks.map((link, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: () => navigate(link.path, { viewTransition: true }), children: [_jsx(RotateCwSquare, { className: "size-4" }), link.label] })] }, link.key))) }) })] }) })), allowedTopNavigationActions?.length && allowedTopNavigationActions.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), allowedTopNavigationActions.map((action) => (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2", onSelect: action.onClick, children: [action.icon && _jsx(action.icon, { className: "size-4" }), action.label] }, action.label)))] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: async () => {
-                                                                            const result = await createDialog({
-                                                                                title: t('logOutConfirmation'),
-                                                                                description: t('logOutConfirmationDescription'),
-                                                                                buttons: [
-                                                                                    { label: t('cancel'), variant: 'secondary', returnValue: false },
-                                                                                    { label: t('logOut'), variant: 'destructive', returnValue: true },
-                                                                                ],
-                                                                            });
-                                                                            if (result) {
-                                                                                clearAdministratorAccess();
-                                                                                logOut();
-                                                                            }
-                                                                        }, children: [_jsx(LogOutIcon, { className: "size-4" }), t('logOut')] })] })] })] })] }), _jsx(ScrollArea, { className: "relative h-[calc(100vh-64px)] overflow-y-hidden lg:h-[calc(100vh-72px)]", children: children })] })] }) }) }) }) }));
+    const navigateHome = () => navigate(defaultRoutePath, { viewTransition: true });
+    return (_jsx(TooltipProvider, { delayDuration: 100, children: _jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-[var(--sidebar-canvas)]", children: [_jsx("aside", { "data-collapsed": isCollapsed, className: cn('hidden h-full shrink-0 border-r border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] transition-[width] duration-300 ease-out motion-reduce:transition-none md:block', isCollapsed ? 'w-12' : 'w-64'), "aria-label": t('mainNavigation'), children: _jsx(SidebarContent, { isCollapsed: isCollapsed, manuallyOpenGroupIds: manuallyOpenGroupIds, mode: "desktop", onExpand: () => setIsCollapsed(false), onOpenGroupIdsChange: setManuallyOpenGroupIds, onNavigate: () => undefined, onNavigateHome: navigateHome }) }), _jsx(Sheet, { open: isMobileOpen, onOpenChange: setIsMobileOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 max-w-[calc(100vw-1rem)] border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] p-0 sm:max-w-72 [&>button]:rounded-[4px] [&>button]:text-[var(--sidebar-secondary)] [&>button]:focus:ring-[var(--sidebar-focus)] [&>button]:data-[state=open]:bg-[var(--sidebar-hover)]", children: [_jsx(SheetTitle, { className: "sr-only", children: t('mainNavigation') }), _jsx(SheetDescription, { className: "sr-only", children: t('mobileNavigationDescription') }), _jsx(SidebarContent, { isCollapsed: false, manuallyOpenGroupIds: manuallyOpenGroupIds, mode: "mobile", onExpand: () => undefined, onOpenGroupIdsChange: setManuallyOpenGroupIds, onNavigate: () => setIsMobileOpen(false), onNavigateHome: () => {
+                                    navigateHome();
+                                    setIsMobileOpen(false);
+                                } })] }) }), _jsxs("main", { className: "flex min-w-0 flex-1 flex-col bg-[var(--sidebar-canvas)]", children: [_jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] px-3 lg:h-[72px] lg:px-5", children: [_jsx(Button, { variant: "outline", size: "icon", className: "size-9 shrink-0 md:hidden", onClick: () => setIsMobileOpen(true), "aria-label": t('openSidebar'), title: t('openSidebar'), children: _jsx(MenuIcon, { className: "size-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: "hidden size-9 shrink-0 md:inline-flex", onClick: toggleDesktop, "aria-label": isCollapsed ? t('expandSidebar') : t('collapseSidebar'), title: `${isCollapsed ? t('expandSidebar') : t('collapseSidebar')} (${t('sidebarShortcut')})`, children: isCollapsed ? _jsx(PanelLeftOpen, { className: "size-4" }) : _jsx(PanelLeftClose, { className: "size-4" }) }), _jsx("div", { className: "hidden min-w-0 flex-col items-start justify-center sm:flex", children: _jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { className: "flex-nowrap overflow-hidden", children: crumbs.length ? (crumbs.map((crumb, index) => {
+                                                const path = crumbs.slice(0, index + 1);
+                                                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { className: "min-w-0", children: _jsx(NavLink, { to: buildURL(path), viewTransition: true, className: "truncate", children: _jsx("span", { className: "text-sm font-semibold tracking-tight text-foreground", children: index === 0 ? t(`menu.${dashToCamelCase(crumb)}`) : crumb }) }) }), index !== crumbs.length - 1 && (_jsx(BreadcrumbSeparator, { children: _jsx(Slash, { className: "text-muted-foreground" }) }))] }, `${crumb}-${index}`));
+                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: defaultRoutePath, viewTransition: true, children: _jsx("span", { className: "text-lg font-semibold tracking-tight text-foreground", children: t(defaultRouteMenuKey === 'dashboard'
+                                                            ? 'dashboard'
+                                                            : `menu.${dashToCamelCase(defaultRouteMenuKey)}`) }) }) })) }) }) }), _jsxs("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-1.5", children: [_jsx(TopbarOverflow, { components: allowedTopNavigationComponents || [] }), allowedTopNavigationComponents?.length ? (_jsx("div", { className: "hidden items-center gap-2 lg:flex", children: allowedTopNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, _jsxs("div", { className: "hidden items-center gap-1.5 lg:flex", children: [_jsx(LanguagesDropdown, {}), _jsx(ChannelSwitcher, { className: "min-w-44" })] }), _jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9 shrink-0", "aria-label": t('openGlobalSearch'), title: t('openGlobalSearch'), children: _jsx(SearchIcon, { className: "size-4" }) }), _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "relative size-9 shrink-0", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem]" })) : theme === 'dark' ? (_jsx(Moon, { className: "size-[1.2rem]" })) : (_jsx(SunMoon, { className: "size-[1.2rem]" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] })] })] }), _jsx(ScrollArea, { className: "relative min-h-0 flex-1 overflow-y-hidden bg-[var(--sidebar-canvas)]", children: children })] })] }) }));
 };

package/dist/index.css

@@ -59,6 +59,18 @@
 
   --navigation-link: hsl(228 14% 28%);
 
+  --sidebar-canvas: #fbfbf5;
+  --sidebar-surface: #ffffff;
+  --sidebar-ink: #000000;
+  --sidebar-secondary: #71717a;
+  --sidebar-tertiary: #52525b;
+  --sidebar-hairline: #e4e4e7;
+  --sidebar-hover: #ffffff;
+  --sidebar-active: #d4f9e0;
+  --sidebar-active-ink: #000000;
+  --sidebar-active-indicator: #000000;
+  --sidebar-focus: #000000;
+
   --topbar-height: 64px;
   --topbar-height-lg: 72px;
 
@@ -104,6 +116,18 @@
   --warning-foreground: hsl(38 92% 50%);
 
   --navigation-link: hsl(220 18% 86%);
+
+  --sidebar-canvas: #000000;
+  --sidebar-surface: #0a0a0a;
+  --sidebar-ink: #ffffff;
+  --sidebar-secondary: #a1a1aa;
+  --sidebar-tertiary: #9dabad;
+  --sidebar-hairline: #1e2c31;
+  --sidebar-hover: #0a0a0a;
+  --sidebar-active: #1e2c31;
+  --sidebar-active-ink: #ffffff;
+  --sidebar-active-indicator: #ffffff;
+  --sidebar-focus: #bdbdca;
 }
 
 @theme inline {
@@ -236,6 +260,47 @@ a {
   text-decoration: none;
 }
 
+.deenruv-sidebar a.sidebar-link {
+  display: block;
+}
+
+.deenruv-sidebar .sidebar-row {
+  display: flex;
+  height: 36px;
+  min-height: 36px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  border-radius: 4px;
+  color: var(--sidebar-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+}
+
+.deenruv-sidebar .sidebar-row:hover {
+  background-color: var(--sidebar-hover);
+  color: var(--sidebar-ink);
+}
+
+.deenruv-sidebar .sidebar-row[data-active="true"] {
+  background-color: var(--sidebar-active);
+  color: var(--sidebar-active-ink);
+  box-shadow: inset 2px 0 0 var(--sidebar-active-indicator);
+}
+
+.deenruv-sidebar .sidebar-icon-slot {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  align-items: center;
+  justify-content: center;
+}
+
 .Puck > div:nth-child(1) {
   position: relative !important;
 }

package/dist/locales/en/common.json

@@ -476,6 +476,19 @@
     "edit": "Edit",
     "rebuildSerachIndex": "Rebuild search index",
     "fastLinks": "Quick links",
+    "account": "Account",
+    "openAccountMenu": "Open account menu",
+    "mainNavigation": "Main navigation",
+    "mobileNavigationDescription": "Navigate to an administration area.",
+    "openSidebar": "Open navigation",
+    "expandSidebar": "Expand navigation",
+    "collapseSidebar": "Collapse navigation",
+    "sidebarShortcut": "Ctrl or Command + B",
+    "expandNavigationGroup": "Expand navigation and open {{group}}",
+    "goToDashboard": "Go to dashboard",
+    "openGlobalSearch": "Open global search",
+    "openTopbarControls": "Open language, channel and plugin controls",
+    "versionAbbreviation": "version",
     "systemStatus": "System status",
     "globalSettings": "Global settings",
     "delete": "Delete",
@@ -568,34 +581,34 @@
         "options": "Options",
         "variants": "Variants",
         "adminUiV2": "Admin UI",
-        "extensions": "extensions",
-        "dashboard": "desktop",
-        "status": "status",
-        "products": "products",
-        "customers": "customers",
-        "customerGroups": "customer groups",
-        "productVariants": "product variants",
-        "collections": "collections",
-        "orders": "orders",
-        "facets": "aspects of",
-        "channels": "channels",
-        "globalSettings": "global settings",
-        "roles": "roles",
-        "admins": "administrators",
-        "adminProvision": "administrator provisioning",
-        "stock": "storage locations",
-        "sellers": "retailers",
-        "assets": "assets",
-        "zones": "zones",
-        "promotions": "promotions",
-        "countries": "countries",
-        "paymentMethods": "payment methods",
-        "shippingMethods": "shipping methods",
-        "stockLocations": "warehouse locations",
-        "taxCategories": "tax categories",
-        "taxRates": "tax rates",
-        "logOut": "logout",
-        "systemStatus": "system status"
+        "extensions": "Extensions",
+        "dashboard": "Dashboard",
+        "status": "Status",
+        "products": "Products",
+        "customers": "Customers",
+        "customerGroups": "Customer groups",
+        "productVariants": "Product variants",
+        "collections": "Collections",
+        "orders": "Orders",
+        "facets": "Facets",
+        "channels": "Channels",
+        "globalSettings": "Global settings",
+        "roles": "Roles",
+        "admins": "Administrators",
+        "adminProvision": "Administrator provisioning",
+        "stock": "Storage locations",
+        "sellers": "Sellers",
+        "assets": "Assets",
+        "zones": "Zones",
+        "promotions": "Promotions",
+        "countries": "Countries",
+        "paymentMethods": "Payment methods",
+        "shippingMethods": "Shipping methods",
+        "stockLocations": "Warehouse locations",
+        "taxCategories": "Tax categories",
+        "taxRates": "Tax rates",
+        "logOut": "Log out",
+        "systemStatus": "System status"
     },
     "noFilterField": "None",
     "draft": "Project",

package/dist/locales/pl/common.json

@@ -475,6 +475,19 @@
     "edit": "Edytuj",
     "rebuildSerachIndex": "Przebuduj search index",
     "fastLinks": "Szybkie linki",
+    "account": "Konto",
+    "openAccountMenu": "Otwórz menu konta",
+    "mainNavigation": "Główna nawigacja",
+    "mobileNavigationDescription": "Przejdź do wybranego obszaru administracyjnego.",
+    "openSidebar": "Otwórz nawigację",
+    "expandSidebar": "Rozwiń nawigację",
+    "collapseSidebar": "Zwiń nawigację",
+    "sidebarShortcut": "Ctrl lub Command + B",
+    "expandNavigationGroup": "Rozwiń nawigację i otwórz grupę {{group}}",
+    "goToDashboard": "Przejdź do pulpitu",
+    "openGlobalSearch": "Otwórz wyszukiwanie globalne",
+    "openTopbarControls": "Otwórz ustawienia języka, kanału i wtyczek",
+    "versionAbbreviation": "wersja",
     "systemStatus": "Status systemu",
     "globalSettings": "Ustawienia globalne",
     "delete": "Usuń",
@@ -567,34 +580,34 @@
         "options": "Opcje produktu",
         "variants": "Warianty",
         "adminUiV2": "Admin UI",
-        "extensions": "rozszerzenia",
-        "dashboard": "pulpit",
-        "status": "status",
-        "products": "produkty",
-        "customers": "klienci",
-        "customerGroups": "grupy klientów",
-        "productVariants": "warianty produktów",
-        "collections": "kolekcje",
-        "orders": "zamówienia",
-        "facets": "aspekty",
-        "channels": "kanały",
-        "globalSettings": "ustawienia globalne",
-        "roles": "role",
-        "admins": "administratorzy",
-        "adminProvision": "zakładanie administratora",
-        "stock": "lokalizacje magazynowe",
-        "sellers": "sprzedawcy",
-        "assets": "aktywa",
-        "zones": "strefy",
-        "promotions": "promocje",
-        "countries": "kraje",
-        "paymentMethods": "metody płatności",
-        "shippingMethods": "metody wysyłki",
-        "stockLocations": "lokacje magazynów",
-        "taxCategories": "kategorie podatkowe",
-        "taxRates": "stawki podatkowe",
-        "logOut": "wylogowanie",
-        "systemStatus": "status systemu"
+        "extensions": "Rozszerzenia",
+        "dashboard": "Pulpit",
+        "status": "Status",
+        "products": "Produkty",
+        "customers": "Klienci",
+        "customerGroups": "Grupy klientów",
+        "productVariants": "Warianty produktów",
+        "collections": "Kolekcje",
+        "orders": "Zamówienia",
+        "facets": "Aspekty",
+        "channels": "Kanały",
+        "globalSettings": "Ustawienia globalne",
+        "roles": "Role",
+        "admins": "Administratorzy",
+        "adminProvision": "Zakładanie administratora",
+        "stock": "Lokalizacje magazynowe",
+        "sellers": "Sprzedawcy",
+        "assets": "Aktywa",
+        "zones": "Strefy",
+        "promotions": "Promocje",
+        "countries": "Kraje",
+        "paymentMethods": "Metody płatności",
+        "shippingMethods": "Metody wysyłki",
+        "stockLocations": "Lokacje magazynów",
+        "taxCategories": "Kategorie podatkowe",
+        "taxRates": "Stawki podatkowe",
+        "logOut": "Wylogowanie",
+        "systemStatus": "Status systemu"
     },
     "noFilterField": "Brak",
     "draft": "Projekt",
@@ -652,7 +665,7 @@
     "notifications": "Powiadomienia",
     "noNewNotifications": "Brak nowych powiadomień",
     "toggleNotifications": "Przełącz powiadomienia",
-    "dashboard": "Pulpit nawigacyjny",
+    "dashboard": "Pulpit",
     "search": {
         "advanceToggle": "Wyszukiwanie zaawansowane",
         "basicToggle": "Wyszukiwanie podstawowe",

package/dist/version.js

@@ -1 +1 @@
-export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.17';
+export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.20';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deenruv/admin-dashboard",
-  "version": "1.0.17-dev.17",
+  "version": "1.0.17-dev.20",
   "main": "dist/index.js",
   "style": "dist/index.css",
   "types": "dist/index.d.ts",
@@ -80,10 +80,10 @@
     "yup": "^1.7.1",
     "zod": "^4.4.3",
     "zustand": "^5.0.14",
-    "@deenruv/admin-dashboard": "1.0.17-dev.17",
-    "@deenruv/admin-types": "1.0.17-dev.17",
-    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.17",
-    "@deenruv/react-ui-devkit": "1.0.17-dev.17"
+    "@deenruv/admin-dashboard": "1.0.17-dev.20",
+    "@deenruv/admin-types": "1.0.17-dev.20",
+    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.20",
+    "@deenruv/react-ui-devkit": "1.0.17-dev.20"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.20",