@deenruv/admin-dashboard 1.0.6 → 1.0.11

package/dist/DeenruvAdminPanel.js

@@ -7,10 +7,11 @@ import { AnimatePresence } from 'framer-motion';
 import { Toaster } from 'sonner';
 import i18n from './i18.js';
 import { Routes, PluginProvider, PluginStore, useSettings, GlobalStoreProvider, DEFAULT_CHANNEL_CODE, NotificationProvider, } from '@deenruv/react-ui-devkit';
+import { useShallow } from 'zustand/react/shallow';
 import { LanguageCode } from '@deenruv/admin-types';
 import { Root } from "./pages/Root.js";
 import { LoginScreen } from "./pages/LoginScreen.js";
-import { Custom404 } from "./pages/Custom404.js";
+import { ErrorPage } from "./pages/Custom404.js";
 import * as Pages from "./pages/index.js";
 import * as resources from "./locales/index.js";
 import { ADMIN_DASHBOARD_VERSION } from "./version.js";
@@ -78,17 +79,17 @@ export const DeenruvAdminPanel = ({ plugins, settings }) => {
     const router = createBrowserRouter([
         {
             element: _jsx(Root, { allPaths: [...DeenruvPaths].map((path) => path.path).filter(Boolean) }),
-            errorElement: _jsx(Custom404, {}),
+            errorElement: _jsx(ErrorPage, {}),
             children: [...DeenruvPaths, ...pluginsStore.routes],
         },
     ]);
-    const { theme, isLoggedIn, ...context } = useSettings((p) => ({
+    const { theme, isLoggedIn, ...context } = useSettings(useShallow((p) => ({
         theme: p.theme,
         isLoggedIn: p.isLoggedIn,
         channel: p.selectedChannel,
         language: p.language,
         translationsLanguage: p.translationsLanguage,
-    }));
+    })));
     useEffect(() => {
         const root = window.document.documentElement;
         root.classList.remove('light', 'dark');

package/dist/DeenruvDeveloperIndicator.js

@@ -50,7 +50,7 @@ import { useState } from 'react';
 //   );
 // };
 export const DeenruvDeveloperIndicator = () => {
-    const { graphQLSchema } = useServer(({ graphQLSchema }) => ({ graphQLSchema }));
+    const graphQLSchema = useServer((s) => s.graphQLSchema);
     const { plugins, viewMarkers, setViewMarkers } = usePluginStore();
     const [showSchema, setShowSchema] = useState(false);
     return (_jsx("div", { className: "fixed right-4 bottom-4", children: _jsxs(Drawer, { children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", className: "flex size-10 items-center justify-center rounded-full border-dashed border-primary text-xs", children: "DDP" }) }), _jsx(DrawerContent, { className: "w-full max-w-5xl place-self-end", children: _jsxs("div", { className: "w-full", children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: "DDP - Deenruv Developer Panel" }) }), _jsx("div", { className: "p-4 pb-0", children: _jsxs("div", { className: "flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4", children: [_jsxs("div", { className: "space-y-4 md:w-1/4", children: [_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("h3", { className: "mb-2 text-sm font-medium", children: "Controls" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Switch, { id: "markers", checked: viewMarkers, onCheckedChange: setViewMarkers }), _jsx("label", { htmlFor: "markers", className: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Show markers (ctrl + x)" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Switch, { id: "schema", checked: showSchema, onCheckedChange: setShowSchema }), _jsx("label", { htmlFor: "schema", className: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Show GraphQL Schema" })] })] })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("div", { className: "size-3 rounded-full bg-green-500" }), _jsx("h3", { className: "text-sm font-medium", children: "Plugins" })] }), _jsx(ScrollArea, { className: "mt-2 h-[250px]", children: _jsxs("div", { className: "grid gap-2 pr-2", children: [plugins.map((plugin) => (_jsxs("div", { className: "dark:hover:bg-gray-750 flex items-center rounded-md border border-gray-200 bg-gray-50 p-2 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: plugin.name }), _jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["v", plugin.version] })] }), _jsx("div", { className: "mr-1 size-2 rounded-full bg-green-500", title: "Active" })] }, plugin.name))), plugins.length === 0 && (_jsx("div", { className: "py-4 text-center text-sm text-gray-500 italic dark:text-gray-400", children: "No plugins installed" }))] }) })] })] }), _jsx("div", { className: "md:w-3/4" })] }) }), _jsx(DrawerFooter, { children: _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] }) })] }) }));

package/dist/components/ContentAreaSkeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@deenruv/react-ui-devkit';
+export function ContentAreaSkeleton() {
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "h-10 w-32 rounded-md" })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-5 w-24" }), _jsx(Skeleton, { className: "h-5 w-32" })] }), Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-4 py-2", children: [_jsx(Skeleton, { className: "h-4 w-8" }), _jsx(Skeleton, { className: "h-10 w-10 rounded-md" }), _jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-20" })] }, i)))] })] }));
+}

package/dist/components/Menu/LanguagesDropdown.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LanguageCode } from '@deenruv/admin-types';
 import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, getLanguageName, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useShallow } from 'zustand/react/shallow';
 import { Check } from 'lucide-react';
-import { US, PL, CZ, DE, EU } from 'country-flag-icons/react/3x2';
+import { US, PL, CZ, DE, EU } from './flag-icons';
 const uiLanguages = [LanguageCode.en, LanguageCode.pl];
 const langFlagDict = {
     [LanguageCode.en]: US,
@@ -13,13 +14,13 @@ const langFlagDict = {
 };
 export const LanguagesDropdown = () => {
     const { t } = useTranslation('common');
-    const { contentLng, setContentLng, setUiLng, uiLng, selectedChannel } = useSettings((p) => ({
+    const { contentLng, setContentLng, setUiLng, uiLng, selectedChannel } = useSettings(useShallow((p) => ({
         uiLng: p.language,
         setUiLng: p.setLanguage,
         contentLng: p.translationsLanguage,
         setContentLng: p.setTranslationsLanguage,
         selectedChannel: p.selectedChannel,
-    }));
+    })));
     const Flag = langFlagDict[contentLng] || EU;
     const contentLanguages = selectedChannel?.availableLanguageCodes || [];
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "h-9", children: [t('language'), _jsx(Badge, { variant: "outline", className: "ml-2", children: _jsx(Flag, { className: "size-4" }) })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "z-[150]", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: t('content') }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: contentLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== contentLng && setContentLng(lng), children: [_jsx("span", { children: getLanguageName(lng, uiLng) }), lng === contentLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: "UI" }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: uiLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== uiLng && setUiLng(lng), children: [_jsx("span", { children: getLanguageName(lng) }), lng === uiLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] })] })] }));

package/dist/components/Menu/Navigation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink, useLocation } from 'react-router';
 import React, { useMemo } from 'react';
-import { cn, buttonVariants, Routes, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, } from '@deenruv/react-ui-devkit';
+import { cn, buttonVariants, Routes, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, Skeleton, } from '@deenruv/react-ui-devkit';
 import { BarChart, Barcode, Store, ShoppingCart, Images, Folder, Globe2, Tag, UserCog, Users, UserRoundSearch, MapPin, Flag, Coins, Globe, Percent, CreditCard, Truck, Cog, UsersRound, Server, ScanBarcode, } from 'lucide-react';
 import { Permission } from '@deenruv/admin-types';
 export function Navigation({ isCollapsed }) {
@@ -259,12 +259,13 @@ export function Navigation({ isCollapsed }) {
     //   [permittedNavigationGroups, navMenuData],
     // );
     const defaultAccordionOpenValue = ['shop-group', 'assortment-group'];
-    if (!loaded)
-        return null;
-    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-70px)] flex-col gap-4 pb-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-80px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", defaultValue: defaultAccordionOpenValue, value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : undefined, children: permittedNavigationGroups.map((group) => (_jsx(AccordionItem, { value: group.id, children: _jsxs(React.Fragment, { children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between pr-3 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-6", children: [_jsx("h4", { className: "text-xs font-bold uppercase hover:underline", 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-2' : 'pb-4'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2 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(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9', location.pathname === link.href &&
-                                                                        'bg-muted opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), children: [_jsx(link.icon, { className: "size-6" }), _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, children: _jsxs("div", { id: link.id, className: cn('relative flex items-center justify-start rounded-md px-4 py-2 capitalize', location.pathname === link.href &&
-                                                        'bg-muted font-semibold opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), 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(link.icon, { className: "mr-2 size-4" }), capitalizeFirstLetter(link.title), notifications] }) })) }, link.id));
-                                    }) }) })] }, group.id) }))) }) }) }));
+    if (!loaded) {
+        return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { className: "flex h-[calc(100%-70px)] flex-col gap-4 pb-2 lg:h-[calc(100%-80px)]", children: Array.from({ length: 3 }).map((_, groupIdx) => (_jsxs("div", { className: "flex flex-col gap-1 px-2", children: [!isCollapsed && (_jsx("div", { className: "px-4 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 rounded-md px-4 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: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-70px)] flex-col gap-4 pb-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-80px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", defaultValue: defaultAccordionOpenValue, value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : undefined, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between pr-3 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-6", children: [_jsx("h4", { className: "text-xs font-bold uppercase hover:underline", 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-2' : 'pb-4'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2 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(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9', location.pathname === link.href &&
+                                                                    'bg-muted opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), children: [_jsx(link.icon, { className: "size-6" }), _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, children: _jsxs("div", { id: link.id, className: cn('relative flex items-center justify-start rounded-md px-4 py-2 capitalize', location.pathname === link.href &&
+                                                    'bg-muted font-semibold opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), 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(link.icon, { className: "mr-2 size-4" }), capitalizeFirstLetter(link.title), notifications] }) })) }, link.id));
+                                }) }) })] }, group.id))) }) }) }));
 }

package/dist/components/Menu/Notifications.js

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bell, Check, Clock, Trash2 } from 'lucide-react';
 import { useEffect, useState, useRef, useMemo } from 'react';
 import { Popover, PopoverTrigger, PopoverContent, Card, CardHeader, CardTitle, CardDescription, CardContent, useServer, Button, CardFooter, useNotifications, Tabs, TabsContent, TabsList, TabsTrigger, cn, formatDate, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useShallow } from 'zustand/react/shallow';
 const NOTIFICATIONS_LOCAL_STORAGE_KEY = 'DEENRUV_NOTIFICATIONS';
 export const Notifications = () => {
     const cyclingNotifications = useNotifications(({ notifications }) => notifications);
     const getMainNotification = useNotifications(({ getMainNotification }) => getMainNotification);
     const jobQueues = useServer(({ jobQueues }) => jobQueues);
-    const status = useServer(({ status }) => status);
+    const status = useServer(useShallow(({ status }) => status));
     const { t } = useTranslation('common');
     const [notifications, setNotifications] = useState([]);
     const prevJobQueuesRef = useRef(jobQueues);

package/dist/components/Menu/flag-icons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function US(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", ...props, children: [_jsx("path", { fill: "#FFF", d: "M0 0h513v342H0z" }), _jsx("g", { fill: "#D80027", children: _jsx("path", { d: "M0 0h513v26.3H0zM0 52.6h513v26.3H0zM0 105.2h513v26.3H0zM0 157.8h513v26.3H0zM0 210.5h513v26.3H0zM0 263.1h513v26.3H0zM0 315.7h513V342H0z" }) }), _jsx("path", { fill: "#2E52B2", d: "M0 0h256.5v184.1H0z" }), _jsx("g", { fill: "#FFF", children: _jsx("path", { d: "m47.8 138.9-4-12.8-4.4 12.8H26.2l10.7 7.7-4 12.8 10.9-7.9 10.6 7.9-4.1-12.8 10.9-7.7zM104.1 138.9l-4.1-12.8-4.2 12.8H82.6l10.7 7.7-4 12.8 10.7-7.9 10.8 7.9-4-12.8 10.7-7.7zM160.6 138.9l-4.3-12.8-4 12.8h-13.5l11 7.7-4.2 12.8 10.7-7.9 11 7.9-4.2-12.8 10.7-7.7zM216.8 138.9l-4-12.8-4.2 12.8h-13.3l10.8 7.7-4 12.8 10.7-7.9 10.8 7.9-4.3-12.8 11-7.7zM100 75.3l-4.2 12.8H82.6L93.3 96l-4 12.6 10.7-7.8 10.8 7.8-4-12.6 10.7-7.9h-13.4zM43.8 75.3l-4.4 12.8H26.2L36.9 96l-4 12.6 10.9-7.8 10.6 7.8L50.3 96l10.9-7.9H47.8zM156.3 75.3l-4 12.8h-13.5l11 7.9-4.2 12.6 10.7-7.8 11 7.8-4.2-12.6 10.7-7.9h-13.2zM212.8 75.3l-4.2 12.8h-13.3l10.8 7.9-4 12.6 10.7-7.8 10.8 7.8-4.3-12.6 11-7.9h-13.5zM43.8 24.7l-4.4 12.6H26.2l10.7 7.9-4 12.7L43.8 50l10.6 7.9-4.1-12.7 10.9-7.9H47.8zM100 24.7l-4.2 12.6H82.6l10.7 7.9-4 12.7L100 50l10.8 7.9-4-12.7 10.7-7.9h-13.4zM156.3 24.7l-4 12.6h-13.5l11 7.9-4.2 12.7 10.7-7.9 11 7.9-4.2-12.7 10.7-7.9h-13.2zM212.8 24.7l-4.2 12.6h-13.3l10.8 7.9-4 12.7 10.7-7.9 10.8 7.9-4.3-12.7 11-7.9h-13.5z" }) })] }));
+}
+export function PL(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 85.333 512 341.333", ...props, children: [_jsxs("g", { fill: "#FFF", children: [_jsx("path", { d: "M0 85.337h512v341.326H0z" }), _jsx("path", { d: "M0 85.337h512V256H0z" })] }), _jsx("path", { fill: "#D80027", d: "M0 256h512v170.663H0z" })] }));
+}
+export function CZ(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", ...props, children: [_jsx("path", { fill: "#11457e", d: "M0 0h513v342H0z" }), _jsx("path", { fill: "#d7141a", d: "M513 171v171H0l256.5-171z" }), _jsx("path", { fill: "#FFF", d: "M513 0v171H256.5L0 0z" })] }));
+}
+export function DE(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", ...props, children: [_jsx("path", { fill: "#D80027", d: "M0 0h513v342H0z" }), _jsx("path", { d: "M0 0h513v114H0z" }), _jsx("path", { fill: "#FFDA44", d: "M0 228h513v114H0z" })] }));
+}
+export function EU(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 810 540", ...props, children: [_jsx("path", { fill: "#039", d: "M0 0h810v540H0z" }), _jsx("path", { fill: "#FC0", d: "m404.951 59.865 6.735 20.718h21.894l-17.633 12.812 6.638 20.74-17.634-12.812-17.634 12.812 6.736-20.729-17.633-12.812h21.796zm-90 24 6.735 20.718h21.894l-17.633 12.812 6.638 20.74-17.634-12.812-17.634 12.812 6.736-20.729-17.633-12.812h21.796zm-66 66 6.735 20.718h21.894l-17.633 12.812 6.638 20.74-17.634-12.812-17.634 12.812 6.736-20.729-17.633-12.812h21.796zm-24 89.999 6.735 20.719h21.894l-17.633 12.813 6.638 20.74-17.634-12.813-17.634 12.813 6.736-20.731-17.633-12.811h21.796zm24 90.001 6.735 20.719h21.894l-17.633 12.811 6.638 20.74-17.634-12.811-17.634 12.811 6.736-20.729-17.633-12.812h21.796zm66 66 6.735 20.719h21.894l-17.633 12.811 6.638 20.74-17.634-12.811-17.634 12.811 6.736-20.729-17.633-12.812h21.796zm180-312 6.735 20.718h21.894l-17.633 12.812 6.637 20.74-17.633-12.812-17.635 12.812 6.737-20.729-17.633-12.812h21.795zm66 66 6.735 20.718h21.894l-17.633 12.812 6.637 20.74-17.633-12.812-17.635 12.812 6.737-20.729-17.633-12.812h21.795zm24 90 6.735 20.718h21.894l-17.633 12.813 6.638 20.74-17.634-12.813-17.634 12.813 6.736-20.731-17.633-12.811h21.796zm-24 90 6.735 20.719h21.894l-17.633 12.811 6.638 20.74-17.634-12.811-17.634 12.811 6.736-20.729-17.633-12.812h21.796zm-156 90 6.735 20.719h21.894l-17.633 12.811 6.638 20.74-17.634-12.811-17.634 12.811 6.736-20.729-17.633-12.812h21.796zm90-24.001 6.735 20.719h21.894l-17.633 12.812 6.639 20.74-17.635-12.812-17.633 12.812 6.735-20.73-17.633-12.811h21.797z" })] }));
+}

package/dist/components/Menu/index.js

@@ -1,6 +1,7 @@
 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 { 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';
@@ -19,13 +20,13 @@ export const Menu = ({ children }) => {
     const linkPath = [];
     const { t } = useTranslation('common');
     const { topNavigationActionsMenu, topNavigationComponents } = usePluginStore();
-    const { logOut, theme, setTheme } = useSettings((p) => ({
+    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, setJobQueue } = useServer();

package/dist/pages/Custom404.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router';
 import { Menu } from "../components";
-export const Custom404 = () => {
-    return (_jsx("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: _jsx(Menu, { children: _jsxs("div", { className: "flex size-full flex-1 flex-col overflow-y-auto p-4 pt-6 md:p-8", children: [_jsx("h1", { children: "404" }), _jsx("p", { children: "Page not found" })] }) }) }));
+import { Button } from '@deenruv/react-ui-devkit';
+import { ArrowLeft, AlertTriangle, FileQuestion } from 'lucide-react';
+export const ErrorPage = () => {
+    const error = useRouteError();
+    const navigate = useNavigate();
+    const is404 = isRouteErrorResponse(error) && error.status === 404;
+    if (is404) {
+        return (_jsx("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: _jsx(Menu, { children: _jsxs("div", { className: "flex size-full flex-1 flex-col items-center justify-center overflow-y-auto p-4 pt-6 md:p-8", children: [_jsx(FileQuestion, { className: "mb-4 size-16 text-muted-foreground" }), _jsx("h1", { className: "mb-2 text-4xl font-bold", children: "404" }), _jsx("p", { className: "mb-6 text-lg text-muted-foreground", children: "Page not found" }), _jsxs("div", { className: "flex gap-3", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate(-1), children: [_jsx(ArrowLeft, { className: "mr-2 size-4" }), "Go back"] }), _jsx(Button, { onClick: () => navigate('/admin-ui/'), children: "Go to Dashboard" })] })] }) }) }));
+    }
+    // Runtime error - show dev-friendly details
+    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+    const errorStack = error instanceof Error ? error.stack : undefined;
+    return (_jsx("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: _jsx(Menu, { children: _jsx("div", { className: "flex size-full flex-1 flex-col overflow-y-auto p-4 pt-6 md:p-8", children: _jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [_jsxs("div", { className: "mb-6 flex items-center gap-3", children: [_jsx(AlertTriangle, { className: "size-8 text-destructive" }), _jsx("h1", { className: "text-2xl font-bold", children: "Something went wrong" })] }), _jsx("div", { className: "mb-6 rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: _jsx("p", { className: "font-mono text-sm text-destructive", children: errorMessage }) }), errorStack && (_jsxs("details", { className: "mb-6", children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground", children: "Stack trace" }), _jsx("pre", { className: "mt-2 overflow-x-auto rounded-lg bg-muted p-4 font-mono text-xs whitespace-pre-wrap", children: errorStack })] })), _jsxs("div", { className: "flex gap-3", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate(-1), children: [_jsx(ArrowLeft, { className: "mr-2 size-4" }), "Go back"] }), _jsx(Button, { variant: "outline", onClick: () => window.location.reload(), children: "Reload page" }), _jsx(Button, { onClick: () => navigate('/admin-ui/'), children: "Go to Dashboard" })] })] }) }) }) }));
 };
+// Keep backward compat export name
+export const Custom404 = ErrorPage;

package/dist/pages/Root.js

@@ -7,6 +7,7 @@ import { toast } from 'sonner';
 import { activeAdministratorSelector, paymentMethodsSelector, useServer, useSettings, } from '@deenruv/react-ui-devkit';
 import { Menu } from "../components";
 import { GlobalSearch } from "../components/GlobalSearch.js";
+import { ContentAreaSkeleton } from "../components/ContentAreaSkeleton.js";
 import { DeenruvDeveloperIndicator } from "../DeenruvDeveloperIndicator.js";
 import { Permission } from '@deenruv/admin-types';
 const TAKE = 100;
@@ -244,9 +245,8 @@ export const Root = ({ allPaths }) => {
         };
         fetchGraphQLSchema().then(async (schema) => {
             window.__DEENRUV_SCHEMA__ = schema;
-            await new Promise((resolve) => setTimeout(resolve, 1000));
             await init();
         });
     }, []);
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: loaded ? (_jsxs(_Fragment, { children: [_jsx(Menu, { children: _jsx(Outlet, {}) }), _jsx(GlobalSearch, {}), _jsx(CanLeaveRouteDialog, {}), isLocalhost ? _jsx(DeenruvDeveloperIndicator, {}) : null] })) : (_jsx("div", { className: "flex h-screen w-full items-center justify-center", children: _jsx("span", { className: "animate-spin", children: "\u23F3" }) })) }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: [_jsx(Menu, { children: loaded ? _jsx(Outlet, {}) : _jsx(ContentAreaSkeleton, {}) }), loaded && (_jsxs(_Fragment, { children: [_jsx(GlobalSearch, {}), _jsx(CanLeaveRouteDialog, {}), isLocalhost ? _jsx(DeenruvDeveloperIndicator, {}) : null] }))] }) }));
 };

package/dist/pages/admins/Detail.js

@@ -16,16 +16,16 @@ export const AdminsDetailPage = () => {
     const { t } = useTranslation('admins');
     const { emailValidator, stringValidator, arrayValidator } = useValidators();
     const onSubmitHandler = useCallback((data) => {
-        if (!data.emailAddress?.validatedValue) {
+        if (!data.emailAddress) {
             throw new Error('Name is required.');
         }
         const inputData = {
-            emailAddress: data.emailAddress?.validatedValue,
-            firstName: data.firstName?.validatedValue,
-            lastName: data.lastName?.validatedValue,
-            password: data.password?.validatedValue ? data.password?.validatedValue : undefined,
-            roleIds: data.roleIds?.validatedValue,
-            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+            emailAddress: data.emailAddress,
+            firstName: data.firstName,
+            lastName: data.lastName,
+            password: data.password ? data.password : undefined,
+            roleIds: data.roleIds,
+            ...(data.customFields ? { customFields: data.customFields } : {}),
         };
         if (id) {
             return update({

package/dist/pages/admins/_components/AdminDetailView.js

@@ -13,7 +13,7 @@ const ADMIN_FORM_KEYS = [
 ];
 export const AdminDetailView = () => {
     const { form, entity, fetchEntity, id } = useDetailView('admins-detail-view', ...ADMIN_FORM_KEYS);
-    const { base: { setField, state }, } = form;
+    const { base } = form;
     const editMode = useMemo(() => !!id, [id]);
     const { t } = useTranslation('admins');
     useEffect(() => {
@@ -21,14 +21,22 @@ export const AdminDetailView = () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('firstName', res.firstName);
-            setField('lastName', res.lastName);
-            setField('emailAddress', res.emailAddress);
-            setField('password', '');
-            setField('roleIds', res.user.roles.map((r) => r.id));
+            base.setField('firstName', res.firstName);
+            base.setField('lastName', res.lastName);
+            base.setField('emailAddress', res.emailAddress);
+            base.setField('password', '');
+            base.setField('roleIds', res.user.roles.map((r) => r.id));
         })();
     }, []);
-    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.firstName'), value: state.firstName?.value ?? undefined, onChange: (e) => setField('firstName', e.target.value), errors: state.firstName?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.lastName'), value: state.lastName?.value ?? undefined, onChange: (e) => setField('lastName', e.target.value), errors: state.lastName?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.emailAddress'), value: state.emailAddress?.value ?? undefined, onChange: (e) => setField('emailAddress', e.target.value), errors: state.emailAddress?.errors, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.password'), value: state.password?.value ?? undefined, onChange: (e) => setField('password', e.target.value), errors: state.password?.errors, required: !editMode })] }) }), _jsx(DetailViewMarker, { position: 'admins-detail-view' }), _jsx(EntityCustomFields, { entityName: "administrator", id: id, hideButton: true, onChange: (customFields) => {
-                        setField('customFields', customFields);
-                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } }), _jsx(RolesCard, { adminRoleIds: state.roleIds?.value ?? undefined, onRolesChange: (e) => setField('roleIds', e), errors: state.roleIds?.errors })] }) }));
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.firstName'), value: base.watch('firstName') ?? undefined, onChange: (e) => base.setField('firstName', e.target.value), errors: base.formState.errors?.firstName?.message
+                                    ? [base.formState.errors.firstName.message]
+                                    : undefined, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.lastName'), value: base.watch('lastName') ?? undefined, onChange: (e) => base.setField('lastName', e.target.value), errors: base.formState.errors?.lastName?.message
+                                    ? [base.formState.errors.lastName.message]
+                                    : undefined, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.emailAddress'), value: base.watch('emailAddress') ?? undefined, onChange: (e) => base.setField('emailAddress', e.target.value), errors: base.formState.errors?.emailAddress?.message
+                                    ? [base.formState.errors.emailAddress.message]
+                                    : undefined, required: true }), _jsx(Input, { wrapperClassName: "basis-full md:basis-1/2 xl:basis-1/4", label: t('details.basic.password'), value: base.watch('password') ?? undefined, onChange: (e) => base.setField('password', e.target.value), errors: base.formState.errors?.password?.message
+                                    ? [base.formState.errors.password.message]
+                                    : undefined, required: !editMode })] }) }), _jsx(DetailViewMarker, { position: 'admins-detail-view' }), _jsx(EntityCustomFields, { entityName: "administrator", id: id, hideButton: true, onChange: (customFields) => {
+                        base.setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } }), _jsx(RolesCard, { adminRoleIds: base.watch('roleIds') ?? undefined, onRolesChange: (e) => base.setField('roleIds', e), errors: base.formState.errors?.roleIds?.message ? [base.formState.errors.roleIds.message] : undefined })] }) }));
 };

package/dist/pages/channels/Detail.js

@@ -31,21 +31,21 @@ export const ChannelsDetailPage = () => {
     const setSelectedChannel = useSettings((p) => p.setSelectedChannel);
     const setChannels = useServer((p) => p.setChannels);
     const onSubmitHandler = useCallback(async (data) => {
-        if (!data.code?.validatedValue) {
+        if (!data.code) {
             throw new Error('Code is required.');
         }
         const inputData = {
-            code: data.code.validatedValue,
-            availableCurrencyCodes: data.availableCurrencyCodes?.validatedValue,
-            availableLanguageCodes: data.availableLanguageCodes?.validatedValue,
-            defaultCurrencyCode: data.defaultCurrencyCode?.validatedValue,
-            defaultLanguageCode: data.defaultLanguageCode.validatedValue,
-            defaultShippingZoneId: data.defaultShippingZoneId.validatedValue,
-            defaultTaxZoneId: data.defaultTaxZoneId.validatedValue,
-            pricesIncludeTax: data.pricesIncludeTax.value,
-            sellerId: data.sellerId?.validatedValue,
-            token: data.token.validatedValue,
-            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+            code: data.code,
+            availableCurrencyCodes: data.availableCurrencyCodes,
+            availableLanguageCodes: data.availableLanguageCodes,
+            defaultCurrencyCode: data.defaultCurrencyCode,
+            defaultLanguageCode: data.defaultLanguageCode,
+            defaultShippingZoneId: data.defaultShippingZoneId,
+            defaultTaxZoneId: data.defaultTaxZoneId,
+            pricesIncludeTax: data.pricesIncludeTax,
+            sellerId: data.sellerId,
+            token: data.token,
+            ...(data.customFields ? { customFields: data.customFields } : {}),
         };
         if (id) {
             const response = await update({ input: { id, ...inputData } });

package/dist/pages/channels/_components/ChannelDetailView.js

@@ -9,22 +9,22 @@ export const ChannelDetailView = () => {
     const [sellersOptions, setSellersOptions] = useState();
     const availableLanguages = useSettings((p) => p.availableLanguages);
     const { form, fetchEntity, entity, id } = useDetailView('channels-detail-view', 'CreateChannelInput', 'code', 'availableCurrencyCodes', 'availableLanguageCodes', 'token', 'defaultCurrencyCode', 'defaultLanguageCode', 'defaultShippingZoneId', 'defaultTaxZoneId', 'sellerId', 'pricesIncludeTax', 'customFields');
-    const { base: { setField, state }, } = form;
+    const { base } = form;
     useEffect(() => {
         (async () => {
             const resp = await fetchEntity();
             if (!resp)
                 return;
-            setField('code', resp.code);
-            setField('availableCurrencyCodes', resp.availableCurrencyCodes);
-            setField('availableLanguageCodes', resp.availableLanguageCodes);
-            setField('token', resp.token);
-            setField('defaultCurrencyCode', resp.defaultCurrencyCode);
-            setField('defaultLanguageCode', resp.defaultLanguageCode);
-            setField('defaultShippingZoneId', resp.defaultShippingZone?.id || '');
-            setField('defaultTaxZoneId', resp.defaultTaxZone?.id || '');
-            setField('sellerId', resp.seller?.id);
-            setField('pricesIncludeTax', resp.pricesIncludeTax);
+            base.setField('code', resp.code);
+            base.setField('availableCurrencyCodes', resp.availableCurrencyCodes);
+            base.setField('availableLanguageCodes', resp.availableLanguageCodes);
+            base.setField('token', resp.token);
+            base.setField('defaultCurrencyCode', resp.defaultCurrencyCode);
+            base.setField('defaultLanguageCode', resp.defaultLanguageCode);
+            base.setField('defaultShippingZoneId', resp.defaultShippingZone?.id || '');
+            base.setField('defaultTaxZoneId', resp.defaultTaxZone?.id || '');
+            base.setField('sellerId', resp.seller?.id);
+            base.setField('pricesIncludeTax', resp.pricesIncludeTax);
         })();
     }, []);
     const fetchSellers = useCallback(async () => {
@@ -41,11 +41,19 @@ export const ChannelDetailView = () => {
         const currencyArray = Object.values(CurrencyCode);
         return currencyArray.map((l) => ({ label: l, value: l }));
     }, []);
-    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value ?? undefined, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.token'), value: state.token?.value ?? undefined, onChange: (e) => setField('token', e.target.value), errors: state.token?.errors, required: true }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(SimpleSelect, { label: t('details.basic.seller'), value: state?.sellerId?.value ?? undefined, onValueChange: (e) => setField('sellerId', e), options: sellersOptions }) }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.languages') }), _jsx(MultipleSelector, { options: languageOptions, value: state?.availableLanguageCodes?.value?.map((l) => ({ label: l, value: l })), placeholder: t('details.basic.languagePlaceholder'), onChange: (options) => {
-                                                    setField('availableLanguageCodes', options.map((o) => o.value));
-                                                }, hideClearAllButton: true })] }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.currencies') }), _jsx(MultipleSelector, { options: currencyOptions, value: state?.availableCurrencyCodes?.value?.map((c) => ({ label: c, value: c })), placeholder: t('details.basic.currencyPlaceholder'), onChange: (options) => {
-                                                    setField('availableCurrencyCodes', options.map((o) => o.value));
+    const availableLanguageCodes = base.watch('availableLanguageCodes');
+    const availableCurrencyCodes = base.watch('availableCurrencyCodes');
+    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.code'), value: base.watch('code') ?? undefined, onChange: (e) => base.setField('code', e.target.value), errors: base.formState.errors?.code?.message ? [base.formState.errors.code.message] : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.token'), value: base.watch('token') ?? undefined, onChange: (e) => base.setField('token', e.target.value), errors: base.formState.errors?.token?.message ? [base.formState.errors.token.message] : undefined, required: true }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(SimpleSelect, { label: t('details.basic.seller'), value: base.watch('sellerId') ?? undefined, onValueChange: (e) => base.setField('sellerId', e), options: sellersOptions }) }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.languages') }), _jsx(MultipleSelector, { options: languageOptions, value: availableLanguageCodes?.map((l) => ({ label: l, value: l })), placeholder: t('details.basic.languagePlaceholder'), onChange: (options) => {
+                                                    base.setField('availableLanguageCodes', options.map((o) => o.value));
+                                                }, hideClearAllButton: true })] }), _jsxs("div", { className: "flex basis-full flex-col md:basis-1/3", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.currencies') }), _jsx(MultipleSelector, { options: currencyOptions, value: availableCurrencyCodes?.map((c) => ({ label: c, value: c })), placeholder: t('details.basic.currencyPlaceholder'), onChange: (options) => {
+                                                    base.setField('availableCurrencyCodes', options.map((o) => o.value));
                                                 }, hideClearAllButton: true })] })] })] }) }), _jsx(DetailViewMarker, { position: 'channels-detail-view' }), _jsx(EntityCustomFields, { entityName: "channel", id: id, onChange: (customFields) => {
-                        setField('customFields', customFields);
-                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, hideButton: true }), _jsx(DefaultsCard, { availableLanguages: state.availableLanguageCodes?.value ?? undefined, availableCurrencies: state.availableCurrencyCodes?.value ?? undefined, onFieldChange: setField, defaultLanguage: state.defaultLanguageCode?.value ?? undefined, defaultCurrency: state.defaultCurrencyCode?.value ?? undefined, defaultTaxZone: state.defaultTaxZoneId?.value ?? undefined, defaultShippingZone: state.defaultShippingZoneId?.value ?? undefined, includeTax: state.pricesIncludeTax?.value ?? undefined, onIncludeTaxChange: (e) => setField('pricesIncludeTax', e), defaultLanguageErrors: state.defaultLanguageCode?.errors, defaultShippingZoneErrors: state.defaultShippingZoneId?.errors, defaultTaxZoneErrors: state.defaultTaxZoneId?.errors })] }) }));
+                        base.setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, hideButton: true }), _jsx(DefaultsCard, { availableLanguages: availableLanguageCodes ?? undefined, availableCurrencies: availableCurrencyCodes ?? undefined, onFieldChange: base.setField, defaultLanguage: base.watch('defaultLanguageCode') ?? undefined, defaultCurrency: base.watch('defaultCurrencyCode') ?? undefined, defaultTaxZone: base.watch('defaultTaxZoneId') ?? undefined, defaultShippingZone: base.watch('defaultShippingZoneId') ?? undefined, includeTax: base.watch('pricesIncludeTax') ?? undefined, onIncludeTaxChange: (e) => base.setField('pricesIncludeTax', e), defaultLanguageErrors: base.formState.errors?.defaultLanguageCode?.message
+                        ? [base.formState.errors.defaultLanguageCode.message]
+                        : undefined, defaultShippingZoneErrors: base.formState.errors?.defaultShippingZoneId?.message
+                        ? [base.formState.errors.defaultShippingZoneId.message]
+                        : undefined, defaultTaxZoneErrors: base.formState.errors?.defaultTaxZoneId?.message
+                        ? [base.formState.errors.defaultTaxZoneId.message]
+                        : undefined })] }) }));
 };

package/dist/pages/collections/Detail.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useParams } from 'react-router';
-import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, } from '@deenruv/react-ui-devkit';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation } from '@deenruv/react-ui-devkit';
 import { CollectionsDetailView } from "./_components/CollectionDetailView.js";
 const CreateCollectionMutation = getMutation('createCollection');
 const EditCollectionMutation = getMutation('updateCollection');
@@ -13,13 +13,14 @@ export const CollectionsDetailPage = () => {
     const [remove] = useMutation(DeleteCollectionMutation);
     const { configurableOperationArrayValidator, translationsValidator } = useValidators();
     const onSubmitHandler = useCallback((data) => {
+        const translations = data.translations;
         const inputData = {
-            assetIds: data.assetIds?.validatedValue,
-            featuredAssetId: data.featuredAssetId?.validatedValue,
-            isPrivate: data.isPrivate?.validatedValue,
-            inheritFilters: data.inheritFilters?.validatedValue,
-            filters: data.filters.validatedValue,
-            translations: data.translations.validatedValue.map((t) => ({
+            assetIds: data.assetIds,
+            featuredAssetId: data.featuredAssetId,
+            isPrivate: data.isPrivate,
+            inheritFilters: data.inheritFilters,
+            filters: data.filters,
+            translations: translations.map((t) => ({
                 description: t.description || '',
                 name: t.name || '',
                 languageCode: t.languageCode,

package/dist/pages/collections/List.js

@@ -32,8 +32,7 @@ export const CollectionsListPage = () => {
                 cell: ({ row, getValue }) => {
                     const value = getValue();
                     const isExpanded = row.getIsExpanded();
-                    return (_jsx("div", { style: { paddingLeft: `${row.depth * 2}rem` }, children: _jsx(ListBadge, { paddingLeft: `${row.depth * 2}rem`,
-                            onClick: row.getToggleExpandedHandler(),
+                    return (_jsx("div", { style: { paddingLeft: `${row.depth * 2}rem` }, children: _jsx(ListBadge, { onClick: row.getToggleExpandedHandler(),
                             style: { cursor: 'pointer' }, children: isExpanded ? (_jsx(FolderOpen, { size: 16 })) : value?.length > 0 ? (_jsx(Folder, { size: 16 })) : (_jsx(XSquareIcon, { size: 16 })) }) }));
                 },
             },

package/dist/pages/collections/_components/CollectionDetailView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { EntityCustomFields, Input, Label, Switch, CustomCard, CardIcons, useDetailView, useSettings, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useRef } from 'react';
+import { EntityCustomFields, Input, Label, Switch, CustomCard, CardIcons, useDetailView, useSettings, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, normalizeString, } from '@deenruv/react-ui-devkit';
 import { FiltersCard } from "./FiltersCard";
 import { ContentsCard } from "./ContentsCard";
 import { AssetsCard } from "../../products/_components/AssetsCard.js";
@@ -11,41 +11,84 @@ export const CollectionsDetailView = () => {
     const selectedChannel = useSettings((p) => p.selectedChannel);
     const navigate = useNavigate();
     const { form, fetchEntity, entity, id } = useDetailView('collections-detail-view', 'CreateCollectionInput', 'translations', 'assetIds', 'featuredAssetId', 'isPrivate', 'inheritFilters', 'filters', 'customFields');
-    const { base: { setField, state }, } = form;
+    const { base } = form;
+    // --- Slug auto-generation ---
+    // Track whether the user has manually edited the slug for the current language.
+    // Using a ref avoids extra re-renders; keyed per-language so switching tabs resets.
+    const slugManuallyEditedRef = useRef({});
+    // Reset manual-edit flag when switching to a language whose slug is still empty
+    // (so auto-gen kicks in for new translations).
+    useEffect(() => {
+        if (!contentLng)
+            return;
+        const current = slugManuallyEditedRef.current[contentLng];
+        if (current === undefined) {
+            slugManuallyEditedRef.current[contentLng] = false;
+        }
+    }, [contentLng]);
     useEffect(() => {
         (async () => {
             const resp = await fetchEntity();
             if (!resp)
                 return;
-            setField('translations', resp.translations);
-            setField('assetIds', resp.assets.map((a) => a.id));
-            setField('featuredAssetId', resp.featuredAsset?.id);
-            setField('isPrivate', resp.isPrivate);
-            setField('inheritFilters', resp.inheritFilters);
-            setField('filters', resp.filters.map((f) => ({ code: f.code, arguments: f.args })));
+            base.setField('translations', resp.translations);
+            base.setField('assetIds', resp.assets.map((a) => a.id));
+            base.setField('featuredAssetId', resp.featuredAsset?.id);
+            base.setField('isPrivate', resp.isPrivate);
+            base.setField('inheritFilters', resp.inheritFilters);
+            base.setField('filters', resp.filters.map((f) => ({ code: f.code, arguments: f.args })));
         })();
     }, [contentLng, selectedChannel?.id]);
-    const translations = state?.translations?.value || [];
+    const translations = base.watch('translations') || [];
     const currentTranslationValue = translations.find((v) => v.languageCode === contentLng);
     const handleAddAsset = useCallback((newId) => {
         if (!newId)
             return;
-        const currentIds = state.assetIds?.value || [];
-        setField('assetIds', [...currentIds, newId]);
-    }, [state.assetIds?.value, setField]);
+        const currentIds = base.watch('assetIds') || [];
+        base.setField('assetIds', [...currentIds, newId]);
+    }, [base, base.setField]);
     const setTranslationField = useCallback((field, e) => {
-        if (!currentTranslationValue)
-            return;
-        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
-            ...currentTranslationValue,
+        // On create the translations array is initially empty, so build a
+        // fallback translation object so the field update is never lost.
+        const baseTranslation = currentTranslationValue ?? {
+            languageCode: contentLng,
+            name: '',
+            slug: '',
+            description: '',
+        };
+        const updatedTranslation = {
+            ...baseTranslation,
             [field]: e,
             languageCode: contentLng,
-        }));
-    }, [contentLng, translations]);
-    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.slug'), value: currentTranslationValue?.slug ?? undefined, onChange: (e) => setTranslationField('slug', e.target.value), required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: state.isPrivate?.value ?? undefined, onCheckedChange: (e) => setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? undefined, onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value ?? undefined, assetsIds: state.assetIds?.value ?? undefined, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) }), _jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) }), _jsx(FiltersCard, { currentFiltersValue: state.filters?.value ?? undefined, onFiltersValueChange: (filters) => setField('filters', filters ?? []), inheritValue: state.inheritFilters?.value ?? undefined, onInheritChange: (e) => setField('inheritFilters', e), errors: state.filters?.errors }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
-                        setField('customFields', customFields);
+        };
+        // Auto-generate slug when name changes
+        if (field === 'name') {
+            const isCreate = id === undefined;
+            const existingSlug = baseTranslation.slug;
+            const slugWasManuallyEdited = slugManuallyEditedRef.current[contentLng ?? ''];
+            // Auto-fill slug when:
+            // 1. Create mode: always, unless user manually edited slug
+            // 2. Edit mode: only if the existing slug is empty/missing
+            if (!slugWasManuallyEdited && (isCreate || !existingSlug)) {
+                updatedTranslation.slug = normalizeString(e, '-');
+            }
+        }
+        base.setField('translations', setInArrayBy(translations, (t) => t.languageCode === contentLng, updatedTranslation));
+    }, [contentLng, translations, currentTranslationValue, id]);
+    const handleSlugManualEdit = useCallback(() => {
+        if (contentLng) {
+            slugManuallyEditedRef.current[contentLng] = true;
+        }
+    }, [contentLng]);
+    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? '', onChange: (e) => setTranslationField('name', e.target.value), errors: base.formState.errors?.translations?.message
+                                                ? [base.formState.errors.translations.message]
+                                                : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.slug'), value: currentTranslationValue?.slug ?? '', onChange: (e) => {
+                                                handleSlugManualEdit();
+                                                setTranslationField('slug', e.target.value);
+                                            }, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId') ?? undefined, assetsIds: base.watch('assetIds') ?? undefined, onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) }), _jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) }), _jsx(FiltersCard, { currentFiltersValue: base.watch('filters') ?? undefined, onFiltersValueChange: (filters) => base.setField('filters', filters ?? []), inheritValue: base.watch('inheritFilters') ?? false, onInheritChange: (e) => base.setField('inheritFilters', e), errors: base.formState.errors?.filters?.message ? [base.formState.errors.filters.message] : undefined }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
+                        base.setField('customFields', customFields);
                         if (translations)
-                            setField('translations', translations);
+                            base.setField('translations', translations);
                     }, initialValues: entity && 'customFields' in entity
                         ? { customFields: entity.customFields, translations: entity.translations }
                         : { customFields: {} } }), id && _jsx(ContentsCard, { collectionId: id })] }) }));