@fluxo-dev/shell 26.3.6 → 26.4.0

package/index.esm.js

@@ -3,15 +3,15 @@ import * as React from 'react';
 import React__default, { forwardRef, createElement as createElement$2, useState, useEffect, Suspense, useRef, useCallback as useCallback$1, useContext, useMemo as useMemo$1, createContext, useLayoutEffect, memo, isValidElement, cloneElement, useImperativeHandle } from 'react';
 import { useSelector, connect, Provider } from 'react-redux';
 import { useRouteError, useNavigate, Navigate, Outlet, useLocation, Link, useOutlet, matchPath, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { Center, Card, Stack, Text, Button, Box, TextInput, Popover, UnstyledButton, Group, Highlight, Modal, ActionIcon, useMantineTheme, AppShell, Burger, Badge, Tooltip, Drawer, NavLink, Avatar, Divider, FocusTrap, Tabs, ScrollArea, ThemeIcon, Anchor, Space, useMantineColorScheme, Collapse, Menu, rem, Loader, Overlay, Grid, PasswordInput, Paper, Alert, Title, ColorSwatch, FileButton, NumberInput, ColorInput, Checkbox, Switch, Select, Radio, LoadingOverlay, Chip, Image as Image$1, Table, SegmentedControl, MultiSelect, Code, Portal, useDirection, px as px$1, parseThemeColor, rgba as rgba$1, Breadcrumbs, TagsInput, Textarea, Accordion, MantineProvider } from '@mantine/core';
-import { ShellSessionContext, DataCard, useFlxNavigate, SessionIdContext, TabActiveContext, IconFactory, useSuggestions, useFrontendTool, useHumanInTheLoop, ApprovalRequestCard, useBackendToolRenderer, AiChatPanel, ShellSessionProvider, ShellConfigProvider, AgentProvider, useShellLayout, ShellPage, NoData, ConfirmModal, CronGenerator, Datagrid, SlidingPanel, usePromptTemplates, useSkills, RichTextEditorInput, useFlxSessionTitle, ErrorPage as ErrorPage$1, WaitData } from '@fluxo-dev/ui-components';
+import { Center, Card, Stack, Text, Button, Box, TextInput, Popover, UnstyledButton, Group, Highlight, Modal, ActionIcon, useMantineTheme, AppShell, Burger, Badge, Tooltip, Drawer, NavLink, Avatar, Divider, FocusTrap, Tabs, ScrollArea, ThemeIcon, Anchor, Space, useMantineColorScheme, Collapse, Menu, rem, Loader, Overlay, Paper, Alert, PasswordInput, Grid, Title, ColorSwatch, FileButton, NumberInput, ColorInput, Checkbox, Switch, Select, Radio, LoadingOverlay, Image as Image$1, Table, SegmentedControl, MultiSelect, Code, Portal, useDirection, px as px$1, parseThemeColor, rgba as rgba$1, Breadcrumbs, TagsInput, Textarea, Accordion, MantineProvider } from '@mantine/core';
+import { useShellLayout, ShellSessionContext, DataCard, useFlxNavigate, SessionIdContext, TabActiveContext, IconFactory, useSuggestions, useFrontendTool, useHumanInTheLoop, ApprovalRequestCard, useBackendToolRenderer, AiChatPanel, AgentProvider, ShellSessionProvider, ShellConfigProvider, ShellPage, NoData, ConfirmModal, CronGenerator, Datagrid, SlidingPanel, usePromptTemplates, useSkills, RichTextEditorInput, useFlxSessionTitle, ErrorPage as ErrorPage$1, WaitData } from '@fluxo-dev/ui-components';
 import { ModuleLoader } from '@fluxo-dev/shell-mfe';
-import { MinimalStateViewer, RavifyProvider, JobsViewer } from '@fluxo-dev/shell-ravify';
 import { useAppSelector, store as store$4 } from '@fluxo-dev/state';
 import { openSpotlight, Spotlight, spotlight } from '@mantine/spotlight';
 import { useOs, useMediaQuery, useHotkeys, useDocumentTitle, useIdle, useWindowEvent, useResizeObserver, useTimeout, useDisclosure } from '@mantine/hooks';
 import { AppState, AppType, FluxoStateDispatcher, FluxoClientSys, DeviceIdManager, ApiKeyService, UserService, AppMenuContextType, DomainRoleService, FluxoACLMode, NewUserAccessType, EmailServerProviderType, RavifyInstanceProtocol, RavifyInstanceVersion, LlmProvider, McpServerTransport, McpServerAuthType, AiSkillScriptLanguage, AiSkillScriptRunner, WorkflowPattern, EmailTemplateType } from '@fluxo-dev/api-client-base';
 import { showNotification, notifications, Notifications } from '@mantine/notifications';
+import { MinimalStateViewer, RavifyProvider, JobsViewer } from '@fluxo-dev/shell-ravify';
 import { useForm } from '@mantine/form';
 import QRCode from 'qrcode';
 import { DatePickerInput, DatesProvider } from '@mantine/dates';
@@ -4083,8 +4083,8 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
  */
 
 
-const __iconNode$1H = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$1H);
+const __iconNode$1J = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$1J);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4094,8 +4094,8 @@ const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCi
  */
 
 
-const __iconNode$1G = [["path", { "d": "M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertOctagon = createReactComponent("outline", "alert-octagon", "AlertOctagon", __iconNode$1G);
+const __iconNode$1I = [["path", { "d": "M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertOctagon = createReactComponent("outline", "alert-octagon", "AlertOctagon", __iconNode$1I);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4105,8 +4105,8 @@ const IconAlertOctagon = createReactComponent("outline", "alert-octagon", "Alert
  */
 
 
-const __iconNode$1F = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$1F);
+const __iconNode$1H = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$1H);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4116,8 +4116,8 @@ const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "Ale
  */
 
 
-const __iconNode$1E = [["path", { "d": "M4 13h5", "key": "svg-0" }], ["path", { "d": "M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3", "key": "svg-1" }], ["path", { "d": "M20 8v8", "key": "svg-2" }], ["path", { "d": "M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5", "key": "svg-3" }]];
-const IconApi = createReactComponent("outline", "api", "Api", __iconNode$1E);
+const __iconNode$1G = [["path", { "d": "M4 13h5", "key": "svg-0" }], ["path", { "d": "M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3", "key": "svg-1" }], ["path", { "d": "M20 8v8", "key": "svg-2" }], ["path", { "d": "M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5", "key": "svg-3" }]];
+const IconApi = createReactComponent("outline", "api", "Api", __iconNode$1G);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4127,8 +4127,8 @@ const IconApi = createReactComponent("outline", "api", "Api", __iconNode$1E);
  */
 
 
-const __iconNode$1D = [["path", { "d": "M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-0" }], ["path", { "d": "M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-1" }], ["path", { "d": "M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-2" }], ["path", { "d": "M14 7l6 0", "key": "svg-3" }], ["path", { "d": "M17 4l0 6", "key": "svg-4" }]];
-const IconApps = createReactComponent("outline", "apps", "Apps", __iconNode$1D);
+const __iconNode$1F = [["path", { "d": "M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-0" }], ["path", { "d": "M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-1" }], ["path", { "d": "M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z", "key": "svg-2" }], ["path", { "d": "M14 7l6 0", "key": "svg-3" }], ["path", { "d": "M17 4l0 6", "key": "svg-4" }]];
+const IconApps = createReactComponent("outline", "apps", "Apps", __iconNode$1F);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4138,8 +4138,8 @@ const IconApps = createReactComponent("outline", "apps", "Apps", __iconNode$1D);
  */
 
 
-const __iconNode$1C = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 13l-6 6", "key": "svg-1" }], ["path", { "d": "M6 13l6 6", "key": "svg-2" }]];
-const IconArrowDown = createReactComponent("outline", "arrow-down", "ArrowDown", __iconNode$1C);
+const __iconNode$1E = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 13l-6 6", "key": "svg-1" }], ["path", { "d": "M6 13l6 6", "key": "svg-2" }]];
+const IconArrowDown = createReactComponent("outline", "arrow-down", "ArrowDown", __iconNode$1E);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4149,8 +4149,8 @@ const IconArrowDown = createReactComponent("outline", "arrow-down", "ArrowDown",
  */
 
 
-const __iconNode$1B = [["path", { "d": "M5 12l14 0", "key": "svg-0" }], ["path", { "d": "M5 12l6 6", "key": "svg-1" }], ["path", { "d": "M5 12l6 -6", "key": "svg-2" }]];
-const IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$1B);
+const __iconNode$1D = [["path", { "d": "M5 12l14 0", "key": "svg-0" }], ["path", { "d": "M5 12l6 6", "key": "svg-1" }], ["path", { "d": "M5 12l6 -6", "key": "svg-2" }]];
+const IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$1D);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4160,8 +4160,8 @@ const IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft",
  */
 
 
-const __iconNode$1A = [["path", { "d": "M5 12l14 0", "key": "svg-0" }], ["path", { "d": "M13 18l6 -6", "key": "svg-1" }], ["path", { "d": "M13 6l6 6", "key": "svg-2" }]];
-const IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$1A);
+const __iconNode$1C = [["path", { "d": "M5 12l14 0", "key": "svg-0" }], ["path", { "d": "M13 18l6 -6", "key": "svg-1" }], ["path", { "d": "M13 6l6 6", "key": "svg-2" }]];
+const IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$1C);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4171,8 +4171,8 @@ const IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRigh
  */
 
 
-const __iconNode$1z = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 11l-6 -6", "key": "svg-1" }], ["path", { "d": "M6 11l6 -6", "key": "svg-2" }]];
-const IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __iconNode$1z);
+const __iconNode$1B = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 11l-6 -6", "key": "svg-1" }], ["path", { "d": "M6 11l6 -6", "key": "svg-2" }]];
+const IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __iconNode$1B);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4182,8 +4182,8 @@ const IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __ico
  */
 
 
-const __iconNode$1y = [["path", { "d": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28", "key": "svg-1" }]];
-const IconAt = createReactComponent("outline", "at", "At", __iconNode$1y);
+const __iconNode$1A = [["path", { "d": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28", "key": "svg-1" }]];
+const IconAt = createReactComponent("outline", "at", "At", __iconNode$1A);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4193,8 +4193,8 @@ const IconAt = createReactComponent("outline", "at", "At", __iconNode$1y);
  */
 
 
-const __iconNode$1x = [["path", { "d": "M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6", "key": "svg-0" }], ["path", { "d": "M9 17v1a3 3 0 0 0 6 0v-1", "key": "svg-1" }]];
-const IconBell = createReactComponent("outline", "bell", "Bell", __iconNode$1x);
+const __iconNode$1z = [["path", { "d": "M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6", "key": "svg-0" }], ["path", { "d": "M9 17v1a3 3 0 0 0 6 0v-1", "key": "svg-1" }]];
+const IconBell = createReactComponent("outline", "bell", "Bell", __iconNode$1z);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4204,8 +4204,8 @@ const IconBell = createReactComponent("outline", "bell", "Bell", __iconNode$1x);
  */
 
 
-const __iconNode$1w = [["path", { "d": "M8 8h8v8h-8z", "key": "svg-0" }], ["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-1" }], ["path", { "d": "M16 16l3.3 3.3", "key": "svg-2" }], ["path", { "d": "M16 8l3.3 -3.3", "key": "svg-3" }], ["path", { "d": "M8 8l-3.3 -3.3", "key": "svg-4" }], ["path", { "d": "M8 16l-3.3 3.3", "key": "svg-5" }]];
-const IconBoxModel = createReactComponent("outline", "box-model", "BoxModel", __iconNode$1w);
+const __iconNode$1y = [["path", { "d": "M8 8h8v8h-8z", "key": "svg-0" }], ["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-1" }], ["path", { "d": "M16 16l3.3 3.3", "key": "svg-2" }], ["path", { "d": "M16 8l3.3 -3.3", "key": "svg-3" }], ["path", { "d": "M8 8l-3.3 -3.3", "key": "svg-4" }], ["path", { "d": "M8 16l-3.3 3.3", "key": "svg-5" }]];
+const IconBoxModel = createReactComponent("outline", "box-model", "BoxModel", __iconNode$1y);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4215,8 +4215,8 @@ const IconBoxModel = createReactComponent("outline", "box-model", "BoxModel", __
  */
 
 
-const __iconNode$1v = [["path", { "d": "M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2", "key": "svg-1" }]];
-const IconBoxMultiple = createReactComponent("outline", "box-multiple", "BoxMultiple", __iconNode$1v);
+const __iconNode$1x = [["path", { "d": "M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2", "key": "svg-1" }]];
+const IconBoxMultiple = createReactComponent("outline", "box-multiple", "BoxMultiple", __iconNode$1x);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4226,8 +4226,8 @@ const IconBoxMultiple = createReactComponent("outline", "box-multiple", "BoxMult
  */
 
 
-const __iconNode$1u = [["path", { "d": "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8", "key": "svg-0" }], ["path", { "d": "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8", "key": "svg-1" }], ["path", { "d": "M17.5 16a3.5 3.5 0 0 0 0 -7h-.5", "key": "svg-2" }], ["path", { "d": "M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0", "key": "svg-3" }], ["path", { "d": "M6.5 16a3.5 3.5 0 0 1 0 -7h.5", "key": "svg-4" }], ["path", { "d": "M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10", "key": "svg-5" }]];
-const IconBrain = createReactComponent("outline", "brain", "Brain", __iconNode$1u);
+const __iconNode$1w = [["path", { "d": "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8", "key": "svg-0" }], ["path", { "d": "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8", "key": "svg-1" }], ["path", { "d": "M17.5 16a3.5 3.5 0 0 0 0 -7h-.5", "key": "svg-2" }], ["path", { "d": "M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0", "key": "svg-3" }], ["path", { "d": "M6.5 16a3.5 3.5 0 0 1 0 -7h.5", "key": "svg-4" }], ["path", { "d": "M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10", "key": "svg-5" }]];
+const IconBrain = createReactComponent("outline", "brain", "Brain", __iconNode$1w);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4237,8 +4237,8 @@ const IconBrain = createReactComponent("outline", "brain", "Brain", __iconNode$1
  */
 
 
-const __iconNode$1t = [["path", { "d": "M18.364 19.364a9 9 0 1 0 -12.728 0", "key": "svg-0" }], ["path", { "d": "M15.536 16.536a5 5 0 1 0 -7.072 0", "key": "svg-1" }], ["path", { "d": "M12 13m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
-const IconBroadcast = createReactComponent("outline", "broadcast", "Broadcast", __iconNode$1t);
+const __iconNode$1v = [["path", { "d": "M18.364 19.364a9 9 0 1 0 -12.728 0", "key": "svg-0" }], ["path", { "d": "M15.536 16.536a5 5 0 1 0 -7.072 0", "key": "svg-1" }], ["path", { "d": "M12 13m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
+const IconBroadcast = createReactComponent("outline", "broadcast", "Broadcast", __iconNode$1v);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4248,8 +4248,8 @@ const IconBroadcast = createReactComponent("outline", "broadcast", "Broadcast",
  */
 
 
-const __iconNode$1s = [["path", { "d": "M9 9v-1a3 3 0 0 1 6 0v1", "key": "svg-0" }], ["path", { "d": "M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3", "key": "svg-1" }], ["path", { "d": "M3 13l4 0", "key": "svg-2" }], ["path", { "d": "M17 13l4 0", "key": "svg-3" }], ["path", { "d": "M12 20l0 -6", "key": "svg-4" }], ["path", { "d": "M4 19l3.35 -2", "key": "svg-5" }], ["path", { "d": "M20 19l-3.35 -2", "key": "svg-6" }], ["path", { "d": "M4 7l3.75 2.4", "key": "svg-7" }], ["path", { "d": "M20 7l-3.75 2.4", "key": "svg-8" }]];
-const IconBug = createReactComponent("outline", "bug", "Bug", __iconNode$1s);
+const __iconNode$1u = [["path", { "d": "M9 9v-1a3 3 0 0 1 6 0v1", "key": "svg-0" }], ["path", { "d": "M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3", "key": "svg-1" }], ["path", { "d": "M3 13l4 0", "key": "svg-2" }], ["path", { "d": "M17 13l4 0", "key": "svg-3" }], ["path", { "d": "M12 20l0 -6", "key": "svg-4" }], ["path", { "d": "M4 19l3.35 -2", "key": "svg-5" }], ["path", { "d": "M20 19l-3.35 -2", "key": "svg-6" }], ["path", { "d": "M4 7l3.75 2.4", "key": "svg-7" }], ["path", { "d": "M20 7l-3.75 2.4", "key": "svg-8" }]];
+const IconBug = createReactComponent("outline", "bug", "Bug", __iconNode$1u);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4259,8 +4259,8 @@ const IconBug = createReactComponent("outline", "bug", "Bug", __iconNode$1s);
  */
 
 
-const __iconNode$1r = [["path", { "d": "M3 21l18 0", "key": "svg-0" }], ["path", { "d": "M9 8l1 0", "key": "svg-1" }], ["path", { "d": "M9 12l1 0", "key": "svg-2" }], ["path", { "d": "M9 16l1 0", "key": "svg-3" }], ["path", { "d": "M14 8l1 0", "key": "svg-4" }], ["path", { "d": "M14 12l1 0", "key": "svg-5" }], ["path", { "d": "M14 16l1 0", "key": "svg-6" }], ["path", { "d": "M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16", "key": "svg-7" }]];
-const IconBuilding = createReactComponent("outline", "building", "Building", __iconNode$1r);
+const __iconNode$1t = [["path", { "d": "M3 21l18 0", "key": "svg-0" }], ["path", { "d": "M9 8l1 0", "key": "svg-1" }], ["path", { "d": "M9 12l1 0", "key": "svg-2" }], ["path", { "d": "M9 16l1 0", "key": "svg-3" }], ["path", { "d": "M14 8l1 0", "key": "svg-4" }], ["path", { "d": "M14 12l1 0", "key": "svg-5" }], ["path", { "d": "M14 16l1 0", "key": "svg-6" }], ["path", { "d": "M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16", "key": "svg-7" }]];
+const IconBuilding = createReactComponent("outline", "building", "Building", __iconNode$1t);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4270,8 +4270,8 @@ const IconBuilding = createReactComponent("outline", "building", "Building", __i
  */
 
 
-const __iconNode$1q = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
-const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$1q);
+const __iconNode$1s = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
+const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$1s);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4281,8 +4281,8 @@ const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __i
  */
 
 
-const __iconNode$1p = [["path", { "d": "M4 4h6v6h-6z", "key": "svg-0" }], ["path", { "d": "M14 4h6v6h-6z", "key": "svg-1" }], ["path", { "d": "M4 14h6v6h-6z", "key": "svg-2" }], ["path", { "d": "M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", "key": "svg-3" }]];
-const IconCategory = createReactComponent("outline", "category", "Category", __iconNode$1p);
+const __iconNode$1r = [["path", { "d": "M4 4h6v6h-6z", "key": "svg-0" }], ["path", { "d": "M14 4h6v6h-6z", "key": "svg-1" }], ["path", { "d": "M4 14h6v6h-6z", "key": "svg-2" }], ["path", { "d": "M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", "key": "svg-3" }]];
+const IconCategory = createReactComponent("outline", "category", "Category", __iconNode$1r);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4292,8 +4292,8 @@ const IconCategory = createReactComponent("outline", "category", "Category", __i
  */
 
 
-const __iconNode$1o = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$1o);
+const __iconNode$1q = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
+const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$1q);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4303,8 +4303,8 @@ const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$1
  */
 
 
-const __iconNode$1n = [["path", { "d": "M7 12l5 5l10 -10", "key": "svg-0" }], ["path", { "d": "M2 12l5 5m5 -5l5 -5", "key": "svg-1" }]];
-const IconChecks = createReactComponent("outline", "checks", "Checks", __iconNode$1n);
+const __iconNode$1p = [["path", { "d": "M7 12l5 5l10 -10", "key": "svg-0" }], ["path", { "d": "M2 12l5 5m5 -5l5 -5", "key": "svg-1" }]];
+const IconChecks = createReactComponent("outline", "checks", "Checks", __iconNode$1p);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4314,8 +4314,8 @@ const IconChecks = createReactComponent("outline", "checks", "Checks", __iconNod
  */
 
 
-const __iconNode$1m = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
-const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$1m);
+const __iconNode$1o = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
+const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$1o);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4325,8 +4325,8 @@ const IconChevronDown = createReactComponent("outline", "chevron-down", "Chevron
  */
 
 
-const __iconNode$1l = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
-const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$1l);
+const __iconNode$1n = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
+const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$1n);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4336,8 +4336,8 @@ const IconChevronLeft = createReactComponent("outline", "chevron-left", "Chevron
  */
 
 
-const __iconNode$1k = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
-const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$1k);
+const __iconNode$1m = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
+const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$1m);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4347,8 +4347,8 @@ const IconChevronRight = createReactComponent("outline", "chevron-right", "Chevr
  */
 
 
-const __iconNode$1j = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
-const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$1j);
+const __iconNode$1l = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
+const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$1l);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4358,8 +4358,8 @@ const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp",
  */
 
 
-const __iconNode$1i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
-const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$1i);
+const __iconNode$1k = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
+const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$1k);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4369,8 +4369,8 @@ const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleC
  */
 
 
-const __iconNode$1h = [["path", { "d": "M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73", "key": "svg-0" }], ["path", { "d": "M3 3l18 18", "key": "svg-1" }]];
-const IconCircleOff = createReactComponent("outline", "circle-off", "CircleOff", __iconNode$1h);
+const __iconNode$1j = [["path", { "d": "M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73", "key": "svg-0" }], ["path", { "d": "M3 3l18 18", "key": "svg-1" }]];
+const IconCircleOff = createReactComponent("outline", "circle-off", "CircleOff", __iconNode$1j);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4380,8 +4380,8 @@ const IconCircleOff = createReactComponent("outline", "circle-off", "CircleOff",
  */
 
 
-const __iconNode$1g = [["path", { "d": "M8 6h12", "key": "svg-0" }], ["path", { "d": "M6 12h12", "key": "svg-1" }], ["path", { "d": "M4 18h12", "key": "svg-2" }]];
-const IconClearAll = createReactComponent("outline", "clear-all", "ClearAll", __iconNode$1g);
+const __iconNode$1i = [["path", { "d": "M8 6h12", "key": "svg-0" }], ["path", { "d": "M6 12h12", "key": "svg-1" }], ["path", { "d": "M4 18h12", "key": "svg-2" }]];
+const IconClearAll = createReactComponent("outline", "clear-all", "ClearAll", __iconNode$1i);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4391,8 +4391,8 @@ const IconClearAll = createReactComponent("outline", "clear-all", "ClearAll", __
  */
 
 
-const __iconNode$1f = [["path", { "d": "M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62", "key": "svg-0" }], ["path", { "d": "M3 3l18 18", "key": "svg-1" }]];
-const IconCloudOff = createReactComponent("outline", "cloud-off", "CloudOff", __iconNode$1f);
+const __iconNode$1h = [["path", { "d": "M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62", "key": "svg-0" }], ["path", { "d": "M3 3l18 18", "key": "svg-1" }]];
+const IconCloudOff = createReactComponent("outline", "cloud-off", "CloudOff", __iconNode$1h);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4402,8 +4402,8 @@ const IconCloudOff = createReactComponent("outline", "cloud-off", "CloudOff", __
  */
 
 
-const __iconNode$1e = [["path", { "d": "M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M13.45 11.55l2.05 -2.05", "key": "svg-1" }], ["path", { "d": "M6.4 20a9 9 0 1 1 11.2 0z", "key": "svg-2" }]];
-const IconDashboard = createReactComponent("outline", "dashboard", "Dashboard", __iconNode$1e);
+const __iconNode$1g = [["path", { "d": "M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M13.45 11.55l2.05 -2.05", "key": "svg-1" }], ["path", { "d": "M6.4 20a9 9 0 1 1 11.2 0z", "key": "svg-2" }]];
+const IconDashboard = createReactComponent("outline", "dashboard", "Dashboard", __iconNode$1g);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4413,8 +4413,8 @@ const IconDashboard = createReactComponent("outline", "dashboard", "Dashboard",
  */
 
 
-const __iconNode$1d = [["path", { "d": "M12 6m-8 0a8 3 0 1 0 16 0a8 3 0 1 0 -16 0", "key": "svg-0" }], ["path", { "d": "M4 6v6a8 3 0 0 0 16 0v-6", "key": "svg-1" }], ["path", { "d": "M4 12v6a8 3 0 0 0 16 0v-6", "key": "svg-2" }]];
-const IconDatabase = createReactComponent("outline", "database", "Database", __iconNode$1d);
+const __iconNode$1f = [["path", { "d": "M12 6m-8 0a8 3 0 1 0 16 0a8 3 0 1 0 -16 0", "key": "svg-0" }], ["path", { "d": "M4 6v6a8 3 0 0 0 16 0v-6", "key": "svg-1" }], ["path", { "d": "M4 12v6a8 3 0 0 0 16 0v-6", "key": "svg-2" }]];
+const IconDatabase = createReactComponent("outline", "database", "Database", __iconNode$1f);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4424,8 +4424,8 @@ const IconDatabase = createReactComponent("outline", "database", "Database", __i
  */
 
 
-const __iconNode$1c = [["path", { "d": "M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2", "key": "svg-0" }], ["path", { "d": "M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M14 4l0 4l-6 0l0 -4", "key": "svg-2" }]];
-const IconDeviceFloppy = createReactComponent("outline", "device-floppy", "DeviceFloppy", __iconNode$1c);
+const __iconNode$1e = [["path", { "d": "M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2", "key": "svg-0" }], ["path", { "d": "M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M14 4l0 4l-6 0l0 -4", "key": "svg-2" }]];
+const IconDeviceFloppy = createReactComponent("outline", "device-floppy", "DeviceFloppy", __iconNode$1e);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4435,8 +4435,8 @@ const IconDeviceFloppy = createReactComponent("outline", "device-floppy", "Devic
  */
 
 
-const __iconNode$1b = [["path", { "d": "M3 19l18 0", "key": "svg-0" }], ["path", { "d": "M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z", "key": "svg-1" }]];
-const IconDeviceLaptop = createReactComponent("outline", "device-laptop", "DeviceLaptop", __iconNode$1b);
+const __iconNode$1d = [["path", { "d": "M3 19l18 0", "key": "svg-0" }], ["path", { "d": "M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z", "key": "svg-1" }]];
+const IconDeviceLaptop = createReactComponent("outline", "device-laptop", "DeviceLaptop", __iconNode$1d);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4446,8 +4446,8 @@ const IconDeviceLaptop = createReactComponent("outline", "device-laptop", "Devic
  */
 
 
-const __iconNode$1a = [["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
-const IconDotsVertical = createReactComponent("outline", "dots-vertical", "DotsVertical", __iconNode$1a);
+const __iconNode$1c = [["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
+const IconDotsVertical = createReactComponent("outline", "dots-vertical", "DotsVertical", __iconNode$1c);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4457,8 +4457,8 @@ const IconDotsVertical = createReactComponent("outline", "dots-vertical", "DotsV
  */
 
 
-const __iconNode$19 = [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 11l5 5l5 -5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]];
-const IconDownload = createReactComponent("outline", "download", "Download", __iconNode$19);
+const __iconNode$1b = [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 11l5 5l5 -5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]];
+const IconDownload = createReactComponent("outline", "download", "Download", __iconNode$1b);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4468,8 +4468,8 @@ const IconDownload = createReactComponent("outline", "download", "Download", __i
  */
 
 
-const __iconNode$18 = [["path", { "d": "M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1", "key": "svg-0" }], ["path", { "d": "M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z", "key": "svg-1" }], ["path", { "d": "M16 5l3 3", "key": "svg-2" }]];
-const IconEdit = createReactComponent("outline", "edit", "Edit", __iconNode$18);
+const __iconNode$1a = [["path", { "d": "M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1", "key": "svg-0" }], ["path", { "d": "M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z", "key": "svg-1" }], ["path", { "d": "M16 5l3 3", "key": "svg-2" }]];
+const IconEdit = createReactComponent("outline", "edit", "Edit", __iconNode$1a);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4479,8 +4479,8 @@ const IconEdit = createReactComponent("outline", "edit", "Edit", __iconNode$18);
  */
 
 
-const __iconNode$17 = [["path", { "d": "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", "key": "svg-0" }], ["path", { "d": "M11 13l9 -9", "key": "svg-1" }], ["path", { "d": "M15 4h5v5", "key": "svg-2" }]];
-const IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$17);
+const __iconNode$19 = [["path", { "d": "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", "key": "svg-0" }], ["path", { "d": "M11 13l9 -9", "key": "svg-1" }], ["path", { "d": "M15 4h5v5", "key": "svg-2" }]];
+const IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$19);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4490,8 +4490,8 @@ const IconExternalLink = createReactComponent("outline", "external-link", "Exter
  */
 
 
-const __iconNode$16 = [["path", { "d": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0", "key": "svg-0" }], ["path", { "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6", "key": "svg-1" }]];
-const IconEye = createReactComponent("outline", "eye", "Eye", __iconNode$16);
+const __iconNode$18 = [["path", { "d": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0", "key": "svg-0" }], ["path", { "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6", "key": "svg-1" }]];
+const IconEye = createReactComponent("outline", "eye", "Eye", __iconNode$18);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4501,8 +4501,8 @@ const IconEye = createReactComponent("outline", "eye", "Eye", __iconNode$16);
  */
 
 
-const __iconNode$15 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }], ["path", { "d": "M12 11l0 6", "key": "svg-2" }], ["path", { "d": "M9 14l6 0", "key": "svg-3" }]];
-const IconFilePlus = createReactComponent("outline", "file-plus", "FilePlus", __iconNode$15);
+const __iconNode$17 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }], ["path", { "d": "M12 11l0 6", "key": "svg-2" }], ["path", { "d": "M9 14l6 0", "key": "svg-3" }]];
+const IconFilePlus = createReactComponent("outline", "file-plus", "FilePlus", __iconNode$17);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4512,8 +4512,8 @@ const IconFilePlus = createReactComponent("outline", "file-plus", "FilePlus", __
  */
 
 
-const __iconNode$14 = [["path", { "d": "M17 17m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M17 13v4h4", "key": "svg-1" }], ["path", { "d": "M12 3v4a1 1 0 0 0 1 1h4", "key": "svg-2" }], ["path", { "d": "M11.5 21h-6.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v2m0 3v4", "key": "svg-3" }]];
-const IconFileReport = createReactComponent("outline", "file-report", "FileReport", __iconNode$14);
+const __iconNode$16 = [["path", { "d": "M17 17m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M17 13v4h4", "key": "svg-1" }], ["path", { "d": "M12 3v4a1 1 0 0 0 1 1h4", "key": "svg-2" }], ["path", { "d": "M11.5 21h-6.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v2m0 3v4", "key": "svg-3" }]];
+const IconFileReport = createReactComponent("outline", "file-report", "FileReport", __iconNode$16);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4523,8 +4523,8 @@ const IconFileReport = createReactComponent("outline", "file-report", "FileRepor
  */
 
 
-const __iconNode$13 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M12 21h-5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v4.5", "key": "svg-1" }], ["path", { "d": "M16.5 17.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0", "key": "svg-2" }], ["path", { "d": "M18.5 19.5l2.5 2.5", "key": "svg-3" }]];
-const IconFileSearch = createReactComponent("outline", "file-search", "FileSearch", __iconNode$13);
+const __iconNode$15 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M12 21h-5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v4.5", "key": "svg-1" }], ["path", { "d": "M16.5 17.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0", "key": "svg-2" }], ["path", { "d": "M18.5 19.5l2.5 2.5", "key": "svg-3" }]];
+const IconFileSearch = createReactComponent("outline", "file-search", "FileSearch", __iconNode$15);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4534,8 +4534,8 @@ const IconFileSearch = createReactComponent("outline", "file-search", "FileSearc
  */
 
 
-const __iconNode$12 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }]];
-const IconFile = createReactComponent("outline", "file", "File", __iconNode$12);
+const __iconNode$14 = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }]];
+const IconFile = createReactComponent("outline", "file", "File", __iconNode$14);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4545,8 +4545,8 @@ const IconFile = createReactComponent("outline", "file", "File", __iconNode$12);
  */
 
 
-const __iconNode$11 = [["path", { "d": "M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5", "key": "svg-0" }], ["path", { "d": "M16 19h6", "key": "svg-1" }], ["path", { "d": "M19 16v6", "key": "svg-2" }]];
-const IconFolderPlus = createReactComponent("outline", "folder-plus", "FolderPlus", __iconNode$11);
+const __iconNode$13 = [["path", { "d": "M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5", "key": "svg-0" }], ["path", { "d": "M16 19h6", "key": "svg-1" }], ["path", { "d": "M19 16v6", "key": "svg-2" }]];
+const IconFolderPlus = createReactComponent("outline", "folder-plus", "FolderPlus", __iconNode$13);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4556,8 +4556,8 @@ const IconFolderPlus = createReactComponent("outline", "folder-plus", "FolderPlu
  */
 
 
-const __iconNode$10 = [["path", { "d": "M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5", "key": "svg-0" }], ["path", { "d": "M19 22v-6", "key": "svg-1" }], ["path", { "d": "M22 19l-3 -3l-3 3", "key": "svg-2" }]];
-const IconFolderUp = createReactComponent("outline", "folder-up", "FolderUp", __iconNode$10);
+const __iconNode$12 = [["path", { "d": "M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5", "key": "svg-0" }], ["path", { "d": "M19 22v-6", "key": "svg-1" }], ["path", { "d": "M22 19l-3 -3l-3 3", "key": "svg-2" }]];
+const IconFolderUp = createReactComponent("outline", "folder-up", "FolderUp", __iconNode$12);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4567,8 +4567,8 @@ const IconFolderUp = createReactComponent("outline", "folder-up", "FolderUp", __
  */
 
 
-const __iconNode$$ = [["path", { "d": "M13.5 19h-8.5a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4", "key": "svg-0" }], ["path", { "d": "M22 22l-5 -5", "key": "svg-1" }], ["path", { "d": "M17 22l5 -5", "key": "svg-2" }]];
-const IconFolderX = createReactComponent("outline", "folder-x", "FolderX", __iconNode$$);
+const __iconNode$11 = [["path", { "d": "M13.5 19h-8.5a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4", "key": "svg-0" }], ["path", { "d": "M22 22l-5 -5", "key": "svg-1" }], ["path", { "d": "M17 22l5 -5", "key": "svg-2" }]];
+const IconFolderX = createReactComponent("outline", "folder-x", "FolderX", __iconNode$11);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4578,8 +4578,8 @@ const IconFolderX = createReactComponent("outline", "folder-x", "FolderX", __ico
  */
 
 
-const __iconNode$_ = [["path", { "d": "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2", "key": "svg-0" }]];
-const IconFolder = createReactComponent("outline", "folder", "Folder", __iconNode$_);
+const __iconNode$10 = [["path", { "d": "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2", "key": "svg-0" }]];
+const IconFolder = createReactComponent("outline", "folder", "Folder", __iconNode$10);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4589,8 +4589,8 @@ const IconFolder = createReactComponent("outline", "folder", "Folder", __iconNod
  */
 
 
-const __iconNode$Z = [["path", { "d": "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M7 8l0 8", "key": "svg-3" }], ["path", { "d": "M9 18h6a2 2 0 0 0 2 -2v-5", "key": "svg-4" }], ["path", { "d": "M14 14l3 -3l3 3", "key": "svg-5" }]];
-const IconGitBranch = createReactComponent("outline", "git-branch", "GitBranch", __iconNode$Z);
+const __iconNode$$ = [["path", { "d": "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M7 8l0 8", "key": "svg-3" }], ["path", { "d": "M9 18h6a2 2 0 0 0 2 -2v-5", "key": "svg-4" }], ["path", { "d": "M14 14l3 -3l3 3", "key": "svg-5" }]];
+const IconGitBranch = createReactComponent("outline", "git-branch", "GitBranch", __iconNode$$);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4600,8 +4600,8 @@ const IconGitBranch = createReactComponent("outline", "git-branch", "GitBranch",
  */
 
 
-const __iconNode$Y = [["path", { "d": "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M17 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M7 8l0 8", "key": "svg-3" }], ["path", { "d": "M7 8a4 4 0 0 0 4 4h4", "key": "svg-4" }]];
-const IconGitMerge = createReactComponent("outline", "git-merge", "GitMerge", __iconNode$Y);
+const __iconNode$_ = [["path", { "d": "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M17 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M7 8l0 8", "key": "svg-3" }], ["path", { "d": "M7 8a4 4 0 0 0 4 4h4", "key": "svg-4" }]];
+const IconGitMerge = createReactComponent("outline", "git-merge", "GitMerge", __iconNode$_);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4611,8 +4611,8 @@ const IconGitMerge = createReactComponent("outline", "git-merge", "GitMerge", __
  */
 
 
-const __iconNode$X = [["path", { "d": "M5 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M19 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }], ["path", { "d": "M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-3" }], ["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-4" }], ["path", { "d": "M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-5" }], ["path", { "d": "M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-6" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-7" }], ["path", { "d": "M19 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-8" }]];
-const IconGridDots = createReactComponent("outline", "grid-dots", "GridDots", __iconNode$X);
+const __iconNode$Z = [["path", { "d": "M5 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M19 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }], ["path", { "d": "M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-3" }], ["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-4" }], ["path", { "d": "M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-5" }], ["path", { "d": "M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-6" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-7" }], ["path", { "d": "M19 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-8" }]];
+const IconGridDots = createReactComponent("outline", "grid-dots", "GridDots", __iconNode$Z);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4622,8 +4622,8 @@ const IconGridDots = createReactComponent("outline", "grid-dots", "GridDots", __
  */
 
 
-const __iconNode$W = [["path", { "d": "M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }], ["path", { "d": "M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-3" }], ["path", { "d": "M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-4" }], ["path", { "d": "M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-5" }]];
-const IconGripVertical = createReactComponent("outline", "grip-vertical", "GripVertical", __iconNode$W);
+const __iconNode$Y = [["path", { "d": "M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }], ["path", { "d": "M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-3" }], ["path", { "d": "M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-4" }], ["path", { "d": "M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-5" }]];
+const IconGripVertical = createReactComponent("outline", "grip-vertical", "GripVertical", __iconNode$Y);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4633,8 +4633,8 @@ const IconGripVertical = createReactComponent("outline", "grip-vertical", "GripV
  */
 
 
-const __iconNode$V = [["path", { "d": "M19 14a2 2 0 1 0 0 4a2 2 0 0 0 0 -4z", "key": "svg-0" }], ["path", { "d": "M21 12a2 2 0 1 0 -4 0v4", "key": "svg-1" }], ["path", { "d": "M4 6v12", "key": "svg-2" }], ["path", { "d": "M12 6v12", "key": "svg-3" }], ["path", { "d": "M11 18h2", "key": "svg-4" }], ["path", { "d": "M3 18h2", "key": "svg-5" }], ["path", { "d": "M4 12h8", "key": "svg-6" }], ["path", { "d": "M3 6h2", "key": "svg-7" }], ["path", { "d": "M11 6h2", "key": "svg-8" }]];
-const IconH6 = createReactComponent("outline", "h-6", "H6", __iconNode$V);
+const __iconNode$X = [["path", { "d": "M19 14a2 2 0 1 0 0 4a2 2 0 0 0 0 -4z", "key": "svg-0" }], ["path", { "d": "M21 12a2 2 0 1 0 -4 0v4", "key": "svg-1" }], ["path", { "d": "M4 6v12", "key": "svg-2" }], ["path", { "d": "M12 6v12", "key": "svg-3" }], ["path", { "d": "M11 18h2", "key": "svg-4" }], ["path", { "d": "M3 18h2", "key": "svg-5" }], ["path", { "d": "M4 12h8", "key": "svg-6" }], ["path", { "d": "M3 6h2", "key": "svg-7" }], ["path", { "d": "M11 6h2", "key": "svg-8" }]];
+const IconH6 = createReactComponent("outline", "h-6", "H6", __iconNode$X);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4644,8 +4644,8 @@ const IconH6 = createReactComponent("outline", "h-6", "H6", __iconNode$V);
  */
 
 
-const __iconNode$U = [["path", { "d": "M5 12l-2 0l9 -9l9 9l-2 0", "key": "svg-0" }], ["path", { "d": "M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7", "key": "svg-1" }], ["path", { "d": "M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6", "key": "svg-2" }]];
-const IconHome = createReactComponent("outline", "home", "Home", __iconNode$U);
+const __iconNode$W = [["path", { "d": "M5 12l-2 0l9 -9l9 9l-2 0", "key": "svg-0" }], ["path", { "d": "M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7", "key": "svg-1" }], ["path", { "d": "M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6", "key": "svg-2" }]];
+const IconHome = createReactComponent("outline", "home", "Home", __iconNode$W);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4655,8 +4655,8 @@ const IconHome = createReactComponent("outline", "home", "Home", __iconNode$U);
  */
 
 
-const __iconNode$T = [["path", { "d": "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", "key": "svg-0" }], ["path", { "d": "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M15 8l2 0", "key": "svg-2" }], ["path", { "d": "M15 12l2 0", "key": "svg-3" }], ["path", { "d": "M7 16l10 0", "key": "svg-4" }]];
-const IconId = createReactComponent("outline", "id", "Id", __iconNode$T);
+const __iconNode$V = [["path", { "d": "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", "key": "svg-0" }], ["path", { "d": "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M15 8l2 0", "key": "svg-2" }], ["path", { "d": "M15 12l2 0", "key": "svg-3" }], ["path", { "d": "M7 16l10 0", "key": "svg-4" }]];
+const IconId = createReactComponent("outline", "id", "Id", __iconNode$V);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4666,8 +4666,8 @@ const IconId = createReactComponent("outline", "id", "Id", __iconNode$T);
  */
 
 
-const __iconNode$S = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 9h.01", "key": "svg-1" }], ["path", { "d": "M11 12h1v4h1", "key": "svg-2" }]];
-const IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircle", __iconNode$S);
+const __iconNode$U = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 9h.01", "key": "svg-1" }], ["path", { "d": "M11 12h1v4h1", "key": "svg-2" }]];
+const IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircle", __iconNode$U);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4677,8 +4677,8 @@ const IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircl
  */
 
 
-const __iconNode$R = [["path", { "d": "M12 9h.01", "key": "svg-0" }], ["path", { "d": "M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z", "key": "svg-1" }], ["path", { "d": "M11 12h1v4h1", "key": "svg-2" }]];
-const IconInfoSquare = createReactComponent("outline", "info-square", "InfoSquare", __iconNode$R);
+const __iconNode$T = [["path", { "d": "M12 9h.01", "key": "svg-0" }], ["path", { "d": "M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z", "key": "svg-1" }], ["path", { "d": "M11 12h1v4h1", "key": "svg-2" }]];
+const IconInfoSquare = createReactComponent("outline", "info-square", "InfoSquare", __iconNode$T);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4688,8 +4688,8 @@ const IconInfoSquare = createReactComponent("outline", "info-square", "InfoSquar
  */
 
 
-const __iconNode$Q = [["path", { "d": "M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z", "key": "svg-0" }], ["path", { "d": "M15 9h.01", "key": "svg-1" }]];
-const IconKey = createReactComponent("outline", "key", "Key", __iconNode$Q);
+const __iconNode$S = [["path", { "d": "M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z", "key": "svg-0" }], ["path", { "d": "M15 9h.01", "key": "svg-1" }]];
+const IconKey = createReactComponent("outline", "key", "Key", __iconNode$S);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4699,8 +4699,8 @@ const IconKey = createReactComponent("outline", "key", "Key", __iconNode$Q);
  */
 
 
-const __iconNode$P = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M4 15l16 0", "key": "svg-1" }]];
-const IconLayoutBottombar = createReactComponent("outline", "layout-bottombar", "LayoutBottombar", __iconNode$P);
+const __iconNode$R = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M4 15l16 0", "key": "svg-1" }]];
+const IconLayoutBottombar = createReactComponent("outline", "layout-bottombar", "LayoutBottombar", __iconNode$R);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -4710,8 +4710,30 @@ const IconLayoutBottombar = createReactComponent("outline", "layout-bottombar",
  */
 
 
-const __iconNode$O = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M4 14m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-1" }]];
-const IconLayoutList = createReactComponent("outline", "layout-list", "LayoutList", __iconNode$O);
+const __iconNode$Q = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M4 14m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-1" }]];
+const IconLayoutList = createReactComponent("outline", "layout-list", "LayoutList", __iconNode$Q);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$P = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M9 4v16", "key": "svg-1" }], ["path", { "d": "M15 10l-2 2l2 2", "key": "svg-2" }]];
+const IconLayoutSidebarLeftCollapse = createReactComponent("outline", "layout-sidebar-left-collapse", "LayoutSidebarLeftCollapse", __iconNode$P);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$O = [["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-0" }], ["path", { "d": "M9 4v16", "key": "svg-1" }], ["path", { "d": "M14 10l2 2l-2 2", "key": "svg-2" }]];
+const IconLayoutSidebarLeftExpand = createReactComponent("outline", "layout-sidebar-left-expand", "LayoutSidebarLeftExpand", __iconNode$O);
 
 /**
  * @license @tabler/icons-react v3.36.0 - MIT
@@ -13846,6 +13868,12 @@ function SearchBar(props) {
   const [allGroups, setAllGroups] = useState([]);
   const [showEasterEggModal, setShowEasterEggModal] = useState(false);
   const [activeEasterEgg, setActiveEasterEgg] = useState('');
+  // Il layout "modern" ha la barra superiore bianca: il campo traslucido pensato per
+  // l'app bar colorata del layout classico lì risulterebbe bianco su bianco.
+  // Nel modern lo stile del campo arriva dalla chrome (classe `flxModernSearchSlot`).
+  const {
+    isModernLayout
+  } = useShellLayout();
   const searchType = (_b = (_a = props.shellUi.search) === null || _a === void 0 ? void 0 : _a.searchType) !== null && _b !== void 0 ? _b : ShellUISearchType.Spotlight;
   const searchPosition = (_d = (_c = props.shellUi.search) === null || _c === void 0 ? void 0 : _c.searchPosition) !== null && _d !== void 0 ? _d : ShellUISearchPosition.Left;
   const isCenterPosition = searchPosition === ShellUISearchPosition.Center;
@@ -13999,7 +14027,9 @@ function SearchBar(props) {
         w: isCenterPosition ? '100%' : 280,
         rightSection: rightSection,
         styles: {
-          input: {
+          input: isModernLayout ? {
+            cursor: 'pointer'
+          } : {
             cursor: 'pointer',
             borderRadius: isCenterPosition ? 0 : 0,
             backgroundColor: isCenterPosition ? 'rgba(255, 255, 255, 0.95)' : undefined,
@@ -14059,7 +14089,7 @@ function SearchBar(props) {
           w: isCenterPosition ? '100%' : 280,
           rightSection: rightSection,
           styles: {
-            input: {
+            input: isModernLayout ? {} : {
               borderRadius: isCenterPosition ? 0 : 0,
               backgroundColor: isCenterPosition ? 'rgba(255, 255, 255, 0.95)' : undefined,
               border: isCenterPosition ? '1px solid rgba(255, 255, 255, 0.2)' : undefined,
@@ -14408,14 +14438,112 @@ function FrontendSwitch(props) {
   });
 }
 
+/**
+ * Modello di branding della shell.
+ *
+ * Tutto quello che è definito qui è completamente opzionale: se il progetto consumer
+ * non passa nessuna configurazione di branding la shell continua a comportarsi
+ * esattamente come prima (logo e colori arrivano dal backend e sono modificabili
+ * dalla scheda "Brand" dell'amministrazione).
+ */
+/**
+ * Converte uno {@link ShellSidebarBackground} nel corrispondente valore CSS.
+ */
+function resolveShellBackground(background) {
+  var _a;
+  if (!background) return undefined;
+  if (typeof background === 'string') return background;
+  return `linear-gradient(${(_a = background.angle) !== null && _a !== void 0 ? _a : 180}deg, ${background.from} 0%, ${background.to} 100%)`;
+}
+/**
+ * Colore "pieno" da usare dove un gradiente non è applicabile
+ * (es. la striscia superiore che deve combaciare con la parte alta della sidebar).
+ */
+function resolveShellBackgroundTopColor(background) {
+  if (!background) return undefined;
+  return typeof background === 'string' ? background : background.from;
+}
+/**
+ * Determina se la personalizzazione del brand è permessa in base alla configurazione.
+ */
+function isBrandCustomizationAllowed(branding) {
+  if ((branding === null || branding === void 0 ? void 0 : branding.allowCustomization) !== undefined) return branding.allowCustomization;
+  return (branding === null || branding === void 0 ? void 0 : branding.fixed) === undefined;
+}
+
+const ShellBrandingContext = /*#__PURE__*/createContext({
+  allowCustomization: true
+});
+function ShellBrandingProvider({
+  branding,
+  children
+}) {
+  const value = useMemo$1(() => ({
+    branding,
+    fixed: branding === null || branding === void 0 ? void 0 : branding.fixed,
+    allowCustomization: isBrandCustomizationAllowed(branding)
+  }), [branding]);
+  return jsx(ShellBrandingContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+/**
+ * Restituisce la configurazione di branding corrente.
+ * Se il progetto consumer non ha configurato nulla, la personalizzazione è permessa
+ * e non esiste nessun brand fisso (comportamento storico).
+ */
+function useShellBranding() {
+  return useContext(ShellBrandingContext);
+}
+/**
+ * Risolve logo e colori da usare nella chrome della shell:
+ * - se è impostato un brand fisso vince quello (nessuna chiamata al backend);
+ * - altrimenti si usa la configurazione salvata lato server (comportamento storico).
+ */
+function useShellBrandSurface() {
+  const {
+    fixed
+  } = useShellBranding();
+  const theme = useMantineTheme();
+  const {
+    configuration
+  } = useAppSelector(state => state.layout);
+  return useMemo$1(() => {
+    var _a, _b, _c, _d, _e;
+    const themeBackground = theme.colors['brand'][7];
+    if (!fixed) {
+      const _logoHeight = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.logoHeight) !== null && _a !== void 0 ? _a : 24;
+      return {
+        background: themeBackground,
+        topColor: themeBackground,
+        logo: configuration === null || configuration === void 0 ? void 0 : configuration.logo,
+        logoIcon: configuration === null || configuration === void 0 ? void 0 : configuration.logo,
+        logoHeight: _logoHeight,
+        logoIconHeight: _logoHeight,
+        isFixed: false
+      };
+    }
+    const logoHeight = (_b = fixed.logoHeight) !== null && _b !== void 0 ? _b : 24;
+    return {
+      background: (_c = resolveShellBackground(fixed.sidebarBackground)) !== null && _c !== void 0 ? _c : themeBackground,
+      topColor: (_d = resolveShellBackgroundTopColor(fixed.sidebarBackground)) !== null && _d !== void 0 ? _d : themeBackground,
+      logo: fixed.logoFull,
+      logoIcon: fixed.logoIcon,
+      logoHeight,
+      logoIconHeight: (_e = fixed.logoIconHeight) !== null && _e !== void 0 ? _e : logoHeight,
+      isFixed: true
+    };
+  }, [fixed, theme, configuration === null || configuration === void 0 ? void 0 : configuration.logo, configuration === null || configuration === void 0 ? void 0 : configuration.logoHeight]);
+}
+
 function AppBar(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const {
     userInfo
   } = useSelector(state => state.user);
   const {
-    navbarOpened,
-    configuration
+    navbarOpened
   } = useSelector(state => state.layout);
   const [jitApps, setJitApps] = React__default.useState([]);
   const [jitAppsLoaded, setJitAppsLoaded] = React__default.useState(false);
@@ -14423,6 +14551,8 @@ function AppBar(props) {
   const fluxoTheme = useMantineTheme();
   const navigate = useNavigate();
   const location = useLocation();
+  // Logo e colori: brand fisso del progetto consumer se presente, altrimenti configurazione del backend
+  const brandSurface = useShellBrandSurface();
   const [developmentMode, setDevelopmentMode] = React__default.useState(undefined);
   const [lastLocation, setLastLocation] = React__default.useState(undefined);
   const [userPopoverOpened, setUserPopoverOpened] = React__default.useState(false);
@@ -14503,7 +14633,7 @@ function AppBar(props) {
         gap: "md",
         style: {
           height: '48px',
-          backgroundColor: (_b = (_a = props.previewMode) === null || _a === void 0 ? void 0 : _a.headerColor) !== null && _b !== void 0 ? _b : fluxoTheme.colors['brand'][7],
+          background: (_b = (_a = props.previewMode) === null || _a === void 0 ? void 0 : _a.headerColor) !== null && _b !== void 0 ? _b : brandSurface.background,
           display: 'flex',
           justifyContent: ((_d = (_c = props.shellUi.search) === null || _c === void 0 ? void 0 : _c.searchPosition) !== null && _d !== void 0 ? _d : ShellUISearchPosition.Left) === ShellUISearchPosition.Center ? 'flex-start' : 'space-between'
         },
@@ -14524,12 +14654,12 @@ function AppBar(props) {
             tabIndex: -1,
             to: props.previewMode ? '' : '/',
             style: {
-              maxHeight: (_f = (_e = props.previewMode) === null || _e === void 0 ? void 0 : _e.logoHeight) !== null && _f !== void 0 ? _f : configuration.logoHeight
+              maxHeight: (_f = (_e = props.previewMode) === null || _e === void 0 ? void 0 : _e.logoHeight) !== null && _f !== void 0 ? _f : brandSurface.logoHeight
             },
             children: jsx("img", {
-              src: ((_g = props.previewMode) === null || _g === void 0 ? void 0 : _g.logo) ? props.previewMode.logo : configuration.logo,
+              src: ((_g = props.previewMode) === null || _g === void 0 ? void 0 : _g.logo) ? props.previewMode.logo : brandSurface.logo,
               style: {
-                maxHeight: (_j = (_h = props.previewMode) === null || _h === void 0 ? void 0 : _h.logoHeight) !== null && _j !== void 0 ? _j : configuration.logoHeight
+                maxHeight: (_j = (_h = props.previewMode) === null || _h === void 0 ? void 0 : _h.logoHeight) !== null && _j !== void 0 ? _j : brandSurface.logoHeight
               }
             })
           })]
@@ -15368,7 +15498,7 @@ const useFocusModeBackButton = isInFocusMode => {
 };
 
 function AppContent(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const sessionContext = useContext(ShellSessionContext);
   const currentSessionId = sessionContext.getCurrentSessionId();
   const isMobile = useMediaQuery('(max-width: 992px)');
@@ -15379,6 +15509,11 @@ function AppContent(props) {
   const {
     navbarOpened
   } = useAppSelector(state => state.layout);
+  const theme = useMantineTheme();
+  const isModernTabs = props.tabsVariant === 'modern';
+  // Offset verticale della barra sessioni: esplicito se fornito dal layout,
+  // altrimenti dedotto dal tipo di navigazione come da comportamento storico
+  const chromeHeight = (_b = props.headerHeight) !== null && _b !== void 0 ? _b : props.shellUi.navigation === ShellUINavigation.Sidebar || props.shellUi.navigation === ShellUINavigation.SidebarMinimal || isMobile ? 48 : 88;
   // Hook personalizzati per gestire le diverse responsabilità
   useDocumentTitleManager(props.withMultipleSessions, sessionContext);
   useScrollPositionManager(props.withMultipleSessions, currentSessionId);
@@ -15424,7 +15559,7 @@ function AppContent(props) {
   useFlxNavigate();
   // Determina se la sessione corrente è in focus mode
   const currentSession = sessionContext.sessions().find(s => s.id === currentSessionId);
-  const isCurrentSessionInFocusMode = (_b = currentSession === null || currentSession === void 0 ? void 0 : currentSession.focusMode) !== null && _b !== void 0 ? _b : false;
+  const isCurrentSessionInFocusMode = (_c = currentSession === null || currentSession === void 0 ? void 0 : currentSession.focusMode) !== null && _c !== void 0 ? _c : false;
   // Hook per bloccare il pulsante indietro del browser in focus mode
   useFocusModeBackButton(props.withMultipleSessions && isCurrentSessionInFocusMode);
   // Funzione per controllare se gli indicatori devono essere disabilitati
@@ -15484,7 +15619,7 @@ function AppContent(props) {
   }, [currentSessionId, props.withMultipleSessions, scrollToActiveTab]);
   return jsxs("div", {
     style: {
-      top: props.shellUi.navigation === ShellUINavigation.Sidebar || isMobile ? 48 : 88
+      top: chromeHeight
     },
     children: [props.withMultipleSessions ? jsxs(Tabs, {
       variant: 'none',
@@ -15494,11 +15629,11 @@ function AppContent(props) {
       children: [jsx(Box, {
         style: {
           position: 'fixed',
-          top: props.shellUi.navigation === ShellUINavigation.Sidebar || props.shellUi.navigation === ShellUINavigation.SidebarMinimal || isMobile ? 48 : 88,
+          top: chromeHeight,
           zIndex: 99,
           background: '#ffffff',
-          borderBottom: '1px solid #e1e5e9',
-          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
+          borderBottom: isModernTabs ? '1px solid #eef0f4' : '1px solid #e1e5e9',
+          boxShadow: isModernTabs ? 'none' : '0 1px 3px rgba(0, 0, 0, 0.05)',
           width: (() => {
             if (isMobile) return '100%';
             // Sidebar minimale: sempre 80px
@@ -15519,7 +15654,7 @@ function AppContent(props) {
           style: {
             display: 'flex',
             alignItems: 'center',
-            padding: '0 16px',
+            padding: isModernTabs ? '0 12px' : '0 16px',
             minHeight: '48px'
           },
           children: [jsx(ActionIcon, {
@@ -15533,7 +15668,7 @@ function AppContent(props) {
               flexShrink: 0,
               opacity: indicatorStates.leftDisabled ? 0.4 : 0.7,
               transition: 'opacity 0.2s ease',
-              borderRadius: '0px',
+              borderRadius: isModernTabs ? '6px' : '0px',
               '&:hover': {
                 opacity: indicatorStates.leftDisabled ? 0.4 : 1,
                 backgroundColor: 'rgba(0, 0, 0, 0.04)'
@@ -15579,7 +15714,24 @@ function AppContent(props) {
               },
               children: sessionContext.sessions().map(session => jsx(Tabs.Tab, {
                 value: session.id,
-                style: {
+                style: isModernTabs ? {
+                  position: 'relative',
+                  flexShrink: 0,
+                  whiteSpace: 'nowrap',
+                  minWidth: 'auto',
+                  padding: '0 10px 0 12px',
+                  height: '32px',
+                  marginRight: '4px',
+                  backgroundColor: session.id === currentSessionId ? theme.colors['brand'][0] : 'transparent',
+                  borderRadius: '6px',
+                  border: '1px solid transparent',
+                  color: session.id === currentSessionId ? theme.colors['brand'][7] : '#6b7280',
+                  fontSize: '13px',
+                  fontWeight: session.id === currentSessionId ? 600 : 500,
+                  transition: 'background-color 0.15s ease, color 0.15s ease',
+                  cursor: 'pointer',
+                  outline: 'none'
+                } : {
                   position: 'relative',
                   flexShrink: 0,
                   whiteSpace: 'nowrap',
@@ -15597,8 +15749,14 @@ function AppContent(props) {
                   cursor: 'pointer',
                   outline: 'none'
                 },
+                onMouseEnter: e => {
+                  if (isModernTabs && session.id !== currentSessionId) e.currentTarget.style.backgroundColor = '#f3f4f6';
+                },
+                onMouseLeave: e => {
+                  if (isModernTabs && session.id !== currentSessionId) e.currentTarget.style.backgroundColor = 'transparent';
+                },
                 children: jsxs(Group, {
-                  gap: 8,
+                  gap: isModernTabs ? 6 : 8,
                   wrap: "nowrap",
                   style: {
                     alignItems: 'center'
@@ -15608,7 +15766,7 @@ function AppContent(props) {
                     component: 'span',
                     variant: "transparent",
                     disabled: session.focusMode,
-                    color: "blue.6",
+                    color: isModernTabs ? 'gray.6' : 'blue.6',
                     onClick: event => {
                       event.stopPropagation();
                       if (!session.focusMode) sessionContext.refreshSession(session.id);
@@ -15677,7 +15835,7 @@ function AppContent(props) {
               marginLeft: 12,
               marginRight: "auto",
               flexShrink: 0,
-              borderRadius: '0px',
+              borderRadius: isModernTabs ? '6px' : '0px',
               transition: 'all 0.2s ease'
             },
             children: jsx(IconPlus, {
@@ -15694,7 +15852,7 @@ function AppContent(props) {
               outline: 'none',
               flexShrink: 0,
               marginLeft: 'auto',
-              borderRadius: '0px',
+              borderRadius: isModernTabs ? '6px' : '0px',
               transition: 'all 0.2s ease',
               opacity: sessionContext.sessions().length <= 1 ? 0.3 : 1
             },
@@ -15713,7 +15871,7 @@ function AppContent(props) {
               flexShrink: 0,
               opacity: indicatorStates.rightDisabled ? 0.4 : 0.7,
               transition: 'opacity 0.2s ease',
-              borderRadius: '0px'
+              borderRadius: isModernTabs ? '6px' : '0px'
             },
             children: jsx(IconChevronRight, {
               size: 18,
@@ -15740,7 +15898,7 @@ function AppContent(props) {
       value: true,
       children: jsx(Outlet, {})
     }), jsx(CloseSessionConfirmationModal, {
-      sessionTitle: sessionToClose ? ((_c = sessionContext.getSession(sessionToClose)) === null || _c === void 0 ? void 0 : _c.title) || '' : '',
+      sessionTitle: sessionToClose ? ((_d = sessionContext.getSession(sessionToClose)) === null || _d === void 0 ? void 0 : _d.title) || '' : '',
       sessionId: sessionToClose || '',
       opened: confirmCloseModalOpen,
       onConfirm: confirmCloseTab,
@@ -17343,7 +17501,7 @@ if (DESCRIPTORS$8 && !('size' in URLSearchParamsPrototype)) {
   });
 }
 
-var style$1 = {"control":"navbar-item-module_control__0EMhh","controlActive":"navbar-item-module_controlActive__0vk5y","controlSub":"navbar-item-module_controlSub__U-eSe","link":"navbar-item-module_link__sVkBe","linkActive":"navbar-item-module_linkActive__wxVqH","chevron":"navbar-item-module_chevron__-1UpS"};
+var style$1 = {"control":"navbar-item-module_control__0EMhh","controlActive":"navbar-item-module_controlActive__0vk5y","controlSub":"navbar-item-module_controlSub__U-eSe","link":"navbar-item-module_link__sVkBe","linkActive":"navbar-item-module_linkActive__wxVqH","chevron":"navbar-item-module_chevron__-1UpS","onColor":"navbar-item-module_onColor__1xLgm"};
 
 function NavBarItem({
   icon: Icon,
@@ -17352,7 +17510,8 @@ function NavBarItem({
   initiallyOpened,
   links,
   level,
-  isMinimal
+  isMinimal,
+  variant
 }) {
   const hasLinks = Array.isArray(links);
   const [opened, setOpened] = useState(initiallyOpened || false);
@@ -17365,6 +17524,19 @@ function NavBarItem({
   const colorScheme = useMantineColorScheme();
   const ChevronIcon = IconChevronLeft;
   const isMobile = useMediaQuery('(max-width: 992px)');
+  const isOnColor = variant === 'onColor';
+  /** Colore del testo/icona di una voce attiva */
+  const activeColor = isOnColor ? '#fff' : colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6];
+  /** Sfondo di una voce attiva */
+  const activeBackground = isOnColor ? 'rgba(255, 255, 255, 0.18)' : colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][9] : theme.colors[theme.primaryColor][0];
+  /** Colore del testo/icona di una voce non attiva */
+  const idleColor = isOnColor ? 'rgba(255, 255, 255, 0.88)' : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9];
+  /** Colore del testo dei sotto-elementi non attivi */
+  const subIdleColor = isOnColor ? 'rgba(255, 255, 255, 0.80)' : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7];
+  /** Colore del bordo verticale dei sotto-elementi */
+  const subBorderColor = isOnColor ? 'rgba(255, 255, 255, 0.25)' : colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3];
+  /** Classe aggiuntiva per gli stati hover su sfondo colorato */
+  const onColorClass = isOnColor ? style$1["onColor"] : '';
   // Funzione per verificare se un menu item è attivo considerando anche query parameters
   const isActive = itemRouterLink => {
     if (!itemRouterLink) return false;
@@ -17421,17 +17593,18 @@ function NavBarItem({
         routerLink: link.routerLink,
         initiallyOpened: false,
         level: level + 1,
-        isMinimal: isMinimal
+        isMinimal: isMinimal,
+        variant: variant
       }, link.label + '_' + i);
     }
     if ((_a = link.routerLink) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith('http')) {
       return jsx(Link, {
-        className: style$1["link"],
+        className: `${style$1["link"]} ${onColorClass}`,
         style: {
           marginTop: 8,
           paddingLeft: 16,
-          color: colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-          borderLeft: `1px solid ${colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`
+          color: subIdleColor,
+          borderLeft: `1px solid ${subBorderColor}`
         },
         onClick: () => {
           if (isMobile) FluxoStateDispatcher.dispatchCloseNavbar();
@@ -17443,13 +17616,13 @@ function NavBarItem({
     } else {
       const linkIsActive = isActive(link.routerLink);
       return jsx(Link, {
-        className: `${style$1["link"]} ${linkIsActive ? style$1["linkActive"] : ""}`,
+        className: `${style$1["link"]} ${linkIsActive ? style$1["linkActive"] : ""} ${onColorClass}`,
         style: {
           marginTop: 8,
           paddingLeft: 16,
-          color: linkIsActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-          backgroundColor: linkIsActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][9] : theme.colors[theme.primaryColor][0] : 'transparent',
-          borderLeft: `1px solid ${colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`
+          color: linkIsActive ? activeColor : subIdleColor,
+          backgroundColor: linkIsActive ? activeBackground : 'transparent',
+          borderLeft: `1px solid ${subBorderColor}`
         },
         state: {
           title: link.label
@@ -17568,10 +17741,10 @@ function NavBarItem({
             if (isMobile) FluxoStateDispatcher.dispatchCloseNavbar();
           }
         },
-        className: `${level === 0 ? style$1["control"] : style$1["controlSub"]} ${isItemActive ? style$1["controlActive"] : ""}`,
+        className: `${level === 0 ? style$1["control"] : style$1["controlSub"]} ${isItemActive ? style$1["controlActive"] : ""} ${onColorClass}`,
         style: {
-          backgroundColor: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][9] : theme.colors[theme.primaryColor][0] : 'transparent',
-          color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9]
+          backgroundColor: isItemActive ? activeBackground : 'transparent',
+          color: isItemActive ? activeColor : idleColor
         },
         children: jsxs(Group, {
           justify: 'space-between',
@@ -17585,7 +17758,7 @@ function NavBarItem({
               variant: "light",
               style: {
                 background: 'transparent',
-                color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : 'inherit'
+                color: isItemActive ? activeColor : 'inherit'
               },
               size: 30,
               children: Icon
@@ -17624,7 +17797,7 @@ function NavBarItem({
           children: jsx(UnstyledButton, {
             mt: 2,
             mb: 2,
-            className: `${style$1["control"]} ${isItemActive ? style$1["controlActive"] : ""}`,
+            className: `${style$1["control"]} ${isItemActive ? style$1["controlActive"] : ""} ${onColorClass}`,
             style: {
               width: 60,
               height: 48,
@@ -17632,14 +17805,14 @@ function NavBarItem({
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              backgroundColor: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][9] : theme.colors[theme.primaryColor][0] : 'transparent',
-              color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9]
+              backgroundColor: isItemActive ? activeBackground : 'transparent',
+              color: isItemActive ? activeColor : idleColor
             },
             children: jsx(ThemeIcon, {
               variant: "light",
               style: {
                 background: 'transparent',
-                color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : 'inherit'
+                color: isItemActive ? activeColor : 'inherit'
               },
               size: 30,
               children: Icon
@@ -17672,7 +17845,7 @@ function NavBarItem({
             }
             if (isMobile) FluxoStateDispatcher.dispatchCloseNavbar();
           },
-          className: `${style$1["control"]} ${isItemActive ? style$1["controlActive"] : ""}`,
+          className: `${style$1["control"]} ${isItemActive ? style$1["controlActive"] : ""} ${onColorClass}`,
           style: {
             width: 60,
             height: 48,
@@ -17680,14 +17853,14 @@ function NavBarItem({
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][9] : theme.colors[theme.primaryColor][0] : 'transparent',
-            color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9]
+            backgroundColor: isItemActive ? activeBackground : 'transparent',
+            color: isItemActive ? activeColor : idleColor
           },
           children: jsx(ThemeIcon, {
             variant: "light",
             style: {
               background: 'transparent',
-              color: isItemActive ? colorScheme.colorScheme === 'dark' ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] : 'inherit'
+              color: isItemActive ? activeColor : 'inherit'
             },
             size: 30,
             children: Icon
@@ -17704,8 +17877,9 @@ function Navbar(props) {
     appMenu,
     navbarOpened
   } = useSelector(state => state.layout);
-  const fluxoTheme = useMantineTheme();
   useContext(ShellSessionContext);
+  // Sfondo della sidebar: brand fisso del progetto consumer se presente, altrimenti colore del tema
+  const brandSurface = useShellBrandSurface();
   const getPermittedNavBarItems = () => {
     const permittedNavBarItems = appMenu === null || appMenu === void 0 ? void 0 : appMenu.filter(a => {
       var _a;
@@ -17735,7 +17909,7 @@ function Navbar(props) {
           left: 0,
           width: 248,
           height: 'calc(100vh - 40px)',
-          background: fluxoTheme.colors['brand'][7],
+          background: brandSurface.background,
           zIndex: 196,
           pointerEvents: 'none'
         }
@@ -17746,7 +17920,7 @@ function Navbar(props) {
           left: 0,
           width: 64,
           height: 'calc(100vh - 40px)',
-          background: fluxoTheme.colors['brand'][7],
+          background: brandSurface.background,
           zIndex: 196,
           pointerEvents: 'none'
         }
@@ -18478,6 +18652,1138 @@ function safeParse(s) {
   }
 }
 
+/**
+ * Wrapper condiviso dai layout della shell: il RavifyProvider viene montato
+ * solo per gli utenti con accesso amministrativo.
+ */
+const WithRavifyProvider = ({
+  children,
+  hasAdminAccess,
+  fluxoClientConfig
+}) => {
+  if (hasAdminAccess) {
+    return jsx(RavifyProvider, {
+      fluxoClientConfig: fluxoClientConfig,
+      children: children
+    });
+  }
+  return children;
+};
+
+/**
+ * Overlay di blocco applicazione mostrato quando la connessione WebSocket è persa.
+ * Condiviso da tutti i layout della shell.
+ */
+function DisconnectionOverlay({
+  maxAttemptsReached,
+  reconnectAttempts,
+  isRetrying,
+  onRetry
+}) {
+  return jsx(Overlay, {
+    opacity: 1,
+    color: "#ffffff",
+    zIndex: 9999,
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: jsxs(Stack, {
+      justify: "center",
+      align: "center",
+      gap: "lg",
+      style: {
+        height: '100vh'
+      },
+      children: [jsxs(Stack, {
+        gap: "md",
+        align: "center",
+        children: [jsx(ThemeIcon, {
+          size: 72,
+          radius: "md",
+          variant: "light",
+          color: maxAttemptsReached ? 'red' : 'orange',
+          style: {
+            backgroundColor: maxAttemptsReached ? '#fff5f5' : '#fff4e6',
+            border: maxAttemptsReached ? '1px solid #ffc9c9' : '1px solid #ffe8cc'
+          },
+          children: jsx(IconPlugConnectedX, {
+            size: 36,
+            stroke: 1.8
+          })
+        }), jsxs(Stack, {
+          gap: "xs",
+          align: "center",
+          mt: "xs",
+          children: [jsx(Text, {
+            size: "xl",
+            fw: 600,
+            c: "dark.8",
+            ta: "center",
+            children: maxAttemptsReached ? 'Impossibile riconnettersi' : 'Connessione al server persa'
+          }), jsx(Text, {
+            size: "sm",
+            c: "dimmed",
+            ta: "center",
+            maw: 420,
+            style: {
+              lineHeight: 1.5
+            },
+            children: maxAttemptsReached ? 'Non è stato possibile ristabilire la connessione dopo multipli tentativi. Verifica la tua connessione internet e riprova.' : "La connessione al server è stata interrotta. Per evitare la perdita di dati, l'applicazione è stata bloccata."
+          })]
+        })]
+      }), maxAttemptsReached ? jsxs(Stack, {
+        gap: "md",
+        align: "center",
+        mt: "md",
+        children: [jsx(Button, {
+          size: "lg",
+          variant: "filled",
+          color: "blue",
+          loading: isRetrying,
+          onClick: onRetry,
+          leftSection: !isRetrying && jsx(IconRefresh, {
+            size: 20
+          }),
+          style: {
+            minWidth: 220,
+            height: 50,
+            fontSize: '16px',
+            fontWeight: 600,
+            boxShadow: '0 4px 12px rgba(37, 99, 235, 0.2)',
+            transition: 'all 0.2s ease'
+          },
+          styles: {
+            root: {
+              '&:hover': {
+                transform: 'translateY(-2px)',
+                boxShadow: '0 6px 16px rgba(37, 99, 235, 0.3)'
+              },
+              '&:active': {
+                transform: 'translateY(0)'
+              }
+            }
+          },
+          children: isRetrying ? 'Riconnessione...' : 'Riprova connessione'
+        }), jsx(Text, {
+          size: "xs",
+          c: "dimmed",
+          ta: "center",
+          style: {
+            marginTop: 8
+          },
+          children: "Oppure ricarica la pagina (F5)"
+        })]
+      }) : jsxs(Group, {
+        gap: "sm",
+        mt: "md",
+        px: "md",
+        py: "xs",
+        style: {
+          backgroundColor: '#f8f9fa',
+          borderRadius: '6px',
+          border: '1px solid #e9ecef'
+        },
+        children: [jsx(Loader, {
+          size: "sm"
+        }), jsxs(Stack, {
+          gap: 2,
+          children: [jsx(Text, {
+            size: "sm",
+            c: "dark.6",
+            fw: 500,
+            children: "Riconnessione in corso..."
+          }), jsxs(Text, {
+            size: "xs",
+            c: "dimmed",
+            children: ["Tentativo ", reconnectAttempts, " di", ' ', FluxoClientSys.Instance.sessionHub.maxReconnectAttemptsLimit]
+          })]
+        })]
+      }), jsxs(Group, {
+        gap: 6,
+        mt: "lg",
+        children: [jsx(IconAlertTriangle, {
+          size: 16,
+          stroke: 1.5,
+          color: "#868e96"
+        }), jsx(Text, {
+          size: "xs",
+          c: "dimmed",
+          children: maxAttemptsReached ? 'I tuoi dati non salvati potrebbero andare persi' : 'Non chiudere questa pagina'
+        })]
+      })]
+    })
+  });
+}
+
+/**
+ * Costanti geometriche del layout "modern".
+ *
+ * L'altezza complessiva della chrome superiore viene comunicata allo stato della shell
+ * (`dispatchSetAppBarHeight`), così `useShellLayout`, `ShellPage` e `PageHeader`
+ * calcolano gli offset corretti senza valori hardcoded.
+ */
+/** Striscia superiore, a tutta larghezza, con il colore della sidebar */
+const MODERN_STRIP_HEIGHT = 8;
+/** Barra bianca con ricerca e azioni, arrotondata in alto a sinistra */
+const MODERN_BAR_HEIGHT = 56;
+/** Altezza totale della chrome superiore */
+const MODERN_HEADER_HEIGHT = MODERN_STRIP_HEIGHT + MODERN_BAR_HEIGHT;
+/**
+ * Scala degli arrotondamenti del layout "modern".
+ * Volutamente contenuta: morbido ma non "a pillola".
+ */
+/** Controlli: bottoni, input, icone, tab, voci di menu */
+const MODERN_RADIUS_CONTROL = 6;
+/** Superfici grandi: contenuto, pannelli laterali, card di login */
+const MODERN_RADIUS_PANEL = 12;
+/** Raggio dell'angolo in alto a sinistra del contenuto */
+const MODERN_CONTENT_RADIUS = MODERN_RADIUS_PANEL;
+const MODERN_SIDEBAR_WIDTH_OPEN = 248;
+const MODERN_SIDEBAR_WIDTH_CLOSED = 64;
+const MODERN_ASIDE_WIDTH = 400;
+/** Larghezza della sidebar in funzione dello stato di apertura */
+function getModernSidebarWidth(navbarOpened) {
+  return navbarOpened ? MODERN_SIDEBAR_WIDTH_OPEN : MODERN_SIDEBAR_WIDTH_CLOSED;
+}
+
+/** Colore comune delle icone della barra: un solo grigio, niente accenti sparsi */
+const ACTION_ICON_COLOR = '#5b6573';
+/**
+ * Barra superiore del layout "modern".
+ *
+ * È composta da due parti:
+ *  - una striscia del colore della sidebar che prosegue a tutta larghezza in alto;
+ *  - una barra bianca arrotondata in alto a sinistra, che apre il contenuto.
+ */
+function ModernAppBar(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    userInfo
+  } = useSelector(state => state.user);
+  const {
+    navbarOpened
+  } = useSelector(state => state.layout);
+  const [jitApps, setJitApps] = React__default.useState([]);
+  const [jitAppsLoaded, setJitAppsLoaded] = React__default.useState(false);
+  const [jitAppsDrawerOpened, setJitAppsDrawerOpened] = React__default.useState(false);
+  const [developmentMode, setDevelopmentMode] = React__default.useState(undefined);
+  const [lastLocation, setLastLocation] = React__default.useState(undefined);
+  const [userPopoverOpened, setUserPopoverOpened] = React__default.useState(false);
+  const fluxoTheme = useMantineTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isMobile = useMediaQuery('(max-width: 992px)');
+  const surface = useShellBrandSurface();
+  const searchPosition = (_b = (_a = props.shellUi.search) === null || _a === void 0 ? void 0 : _a.searchPosition) !== null && _b !== void 0 ? _b : ShellUISearchPosition.Left;
+  const isCenterSearch = searchPosition === ShellUISearchPosition.Center;
+  const appJitManager = new AppJitManager();
+  // Stessa scorciatoia del layout classico per aprire/chiudere la sidebar
+  useHotkeys([['mod + o', () => {
+    if (navbarOpened) FluxoStateDispatcher.dispatchCloseNavbar();else FluxoStateDispatcher.dispatchOpenNavbar();
+  }]]);
+  useEffect(() => {
+    setJitApps(appJitManager.loadAppConfigurations());
+    setJitAppsLoaded(true);
+  }, []);
+  useEffect(() => {
+    if (!jitAppsLoaded) return;
+    const splittedLocation = location.pathname.split('/');
+    if (splittedLocation.length < 2) {
+      setDevelopmentMode(false);
+      return;
+    }
+    const found = jitApps.filter(a => a.developmentRoute === splittedLocation[1]);
+    setDevelopmentMode(found.length > 0);
+    if (lastLocation) {
+      const splittedLastLocation = lastLocation.split('/');
+      const foundInLastLocation = jitApps.filter(a => a.developmentRoute === splittedLastLocation[1]);
+      if (foundInLastLocation.length > 0 && found.length === 0 || foundInLastLocation.length === 0 && found.length > 0) {
+        navigate(0);
+      }
+    }
+    setLastLocation(location.pathname);
+  }, [location, jitApps]);
+  const logout = () => {
+    FluxoClientSys.Instance.auth.logout();
+  };
+  const goToMyProfile = () => {
+    navigate('/me', {
+      state: {
+        title: 'Il mio profilo'
+      }
+    });
+    setUserPopoverOpened(false);
+  };
+  const refreshJitApps = app => {
+    appJitManager.refreshApp(app).then(result => {
+      if (result) {
+        setJitApps(appJitManager.loadAppConfigurations());
+        showNotification({
+          title: 'Applicazione aggiornata',
+          message: `L'applicazione ${app.name} è stata aggiornata correttamente`,
+          color: 'green',
+          icon: jsx(IconRefresh, {})
+        });
+      } else {
+        showNotification({
+          title: 'Errore',
+          message: `L'applicazione ${app.name} non è stata aggiornata. Verifica che la JIT App sia attiva e raggiungibile e che il file di configurazione sia corretto.`,
+          color: 'red',
+          icon: jsx(IconRefresh, {})
+        });
+      }
+    });
+  };
+  return jsx(AppShell.Header, {
+    id: 'fluxo-shell-modern-app-bar',
+    withBorder: false,
+    zIndex: 199,
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: props.sidebarWidth,
+      width: `calc(100% - ${props.sidebarWidth}px)`,
+      height: MODERN_HEADER_HEIGHT,
+      border: 'none',
+      /* la striscia in alto prosegue il colore della sidebar */
+      background: surface.topColor
+    },
+    children: jsxs(Box, {
+      style: {
+        height: MODERN_BAR_HEIGHT,
+        marginTop: MODERN_STRIP_HEIGHT,
+        background: '#fff',
+        borderTopLeftRadius: isMobile ? 0 : MODERN_CONTENT_RADIUS,
+        borderBottom: '1px solid #edf0f5',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        paddingLeft: 20,
+        paddingRight: 20,
+        position: 'relative'
+      },
+      children: [jsxs(Group, {
+        gap: 8,
+        wrap: 'nowrap',
+        style: {
+          flexShrink: 0,
+          minWidth: 0
+        },
+        children: [isMobile && jsx(Burger, {
+          tabIndex: -1,
+          size: 'sm',
+          color: ACTION_ICON_COLOR,
+          opened: navbarOpened,
+          title: 'Menu',
+          onClick: () => {
+            if (navbarOpened) FluxoStateDispatcher.dispatchCloseNavbar();else FluxoStateDispatcher.dispatchOpenNavbar();
+          }
+        }), !isCenterSearch && jsx(Box, {
+          className: 'flxModernSearchSlot',
+          children: jsx(SearchBar, {
+            disabled: false,
+            shellUi: props.shellUi
+          })
+        })]
+      }), isCenterSearch && jsx(Box, {
+        className: 'flxModernSearchSlot',
+        style: {
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: 'min(640px, calc(100% - 360px))',
+          display: 'flex',
+          justifyContent: 'center'
+        },
+        children: jsx(SearchBar, {
+          disabled: false,
+          shellUi: props.shellUi
+        })
+      }), jsxs(Group, {
+        gap: 4,
+        wrap: 'nowrap',
+        justify: 'flex-end',
+        style: {
+          flexShrink: 0,
+          marginLeft: 'auto'
+        },
+        children: [developmentMode && jsx(Badge, {
+          tabIndex: -1,
+          color: 'red',
+          mr: 8,
+          children: "Development mode"
+        }), props.isAiEnabled && jsx(Tooltip, {
+          label: props.aiAsideOpened ? 'Chiudi assistente AI' : 'Apri assistente AI',
+          position: 'bottom',
+          children: jsx(ActionIcon, {
+            tabIndex: -1,
+            size: 34,
+            radius: MODERN_RADIUS_CONTROL,
+            variant: props.aiAsideOpened ? 'light' : 'subtle',
+            color: props.aiAsideOpened ? undefined : 'gray',
+            onClick: props.onAiAsideToggle,
+            style: {
+              color: props.aiAsideOpened ? undefined : ACTION_ICON_COLOR
+            },
+            children: jsx(IconSparkles2, {
+              size: 20
+            })
+          })
+        }), jsx(FrontendSwitch, {
+          iconColor: ACTION_ICON_COLOR
+        }), jitApps && jitApps.length > 0 && jsxs(Fragment, {
+          children: [jsx(ActionIcon, {
+            tabIndex: -1,
+            size: 34,
+            radius: MODERN_RADIUS_CONTROL,
+            variant: 'subtle',
+            color: 'gray',
+            onClick: () => setJitAppsDrawerOpened(true),
+            children: jsx(IconApps, {
+              color: ACTION_ICON_COLOR,
+              size: 20
+            })
+          }), jsx(Drawer, {
+            title: 'Navigazione (App JIT)',
+            position: 'right',
+            opened: jitAppsDrawerOpened,
+            onClose: () => setJitAppsDrawerOpened(false),
+            children: jsx("div", {
+              children: jitApps.map((app, index) => jsx(DataCard, {
+                padded: false,
+                title: app.name,
+                actions: [{
+                  icon: jsx(IconRefresh, {
+                    size: 18
+                  }),
+                  onClick: () => refreshJitApps(app)
+                }],
+                children: app.menu.map((group, groupIndex) => {
+                  var _a, _b;
+                  return jsx(React__default.Fragment, {
+                    children: jsx(NavLink, {
+                      leftSection: jsx(Badge, {
+                        size: "xs",
+                        variant: "filled",
+                        color: fluxoTheme.colors['brand'][7],
+                        w: 16,
+                        h: 16,
+                        p: 0,
+                        children: group.items ? (_a = group.items) === null || _a === void 0 ? void 0 : _a.length : 0
+                      }),
+                      rightSection: jsx(IconChevronRight, {
+                        size: 16
+                      }),
+                      label: group.name,
+                      children: (_b = group.items) === null || _b === void 0 ? void 0 : _b.map((feature, featureIndex) => jsx(NavLink, {
+                        onClick: () => navigate(`${app.developmentRoute}/${feature.route}`),
+                        label: feature.name,
+                        leftSection: jsx(IconLink, {
+                          size: 16
+                        })
+                      }, `${feature.name}_${featureIndex}`))
+                    })
+                  }, `${group.name}_${groupIndex}`);
+                })
+              }, index))
+            })
+          })]
+        }), jsx(Divider, {
+          orientation: 'vertical',
+          my: 14,
+          mx: 8,
+          color: '#edf0f5'
+        }), jsxs(Popover, {
+          onDismiss: () => setUserPopoverOpened(false),
+          opened: userPopoverOpened,
+          position: 'bottom-end',
+          children: [jsx(Popover.Target, {
+            children: jsxs(Avatar, {
+              onClick: () => setUserPopoverOpened(true),
+              tabIndex: -1,
+              style: {
+                cursor: 'pointer'
+              },
+              color: "cyan",
+              radius: "xl",
+              size: 32,
+              children: [(_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.FirstName) === null || _c === void 0 ? void 0 : _c.substr(0, 1), (_d = userInfo === null || userInfo === void 0 ? void 0 : userInfo.LastName) === null || _d === void 0 ? void 0 : _d.substr(0, 1)]
+            })
+          }), jsx(Popover.Dropdown, {
+            w: 300,
+            children: jsxs(Stack, {
+              gap: 12,
+              children: [jsx(Center, {
+                children: jsxs(Stack, {
+                  justify: 'center',
+                  align: 'center',
+                  children: [jsxs(Avatar, {
+                    color: "cyan",
+                    radius: "xl",
+                    size: 64,
+                    children: [(_e = userInfo === null || userInfo === void 0 ? void 0 : userInfo.FirstName) === null || _e === void 0 ? void 0 : _e.substr(0, 1), (_f = userInfo === null || userInfo === void 0 ? void 0 : userInfo.LastName) === null || _f === void 0 ? void 0 : _f.substr(0, 1)]
+                  }), jsxs(Text, {
+                    children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.FirstName, " ", userInfo === null || userInfo === void 0 ? void 0 : userInfo.LastName]
+                  })]
+                })
+              }), props.shellUi.security.showMyProfile && jsxs(Fragment, {
+                children: [jsx(Button, {
+                  variant: 'subtle',
+                  onClick: () => goToMyProfile(),
+                  children: "Il mio profilo"
+                }), jsx(Divider, {})]
+              }), jsx(Button, {
+                variant: 'subtle',
+                onClick: () => logout(),
+                children: "Esci"
+              }), jsx(Divider, {}), jsxs(Stack, {
+                gap: 8,
+                align: 'center',
+                children: [props.brandElement && jsx(Box, {
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    maxHeight: 28,
+                    overflow: 'hidden'
+                  },
+                  children: props.brandElement
+                }), jsxs(Text, {
+                  c: "dimmed",
+                  fz: "xs",
+                  children: [props.brandName, " \u00A9", new Date().getFullYear()]
+                })]
+              })]
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+/** Palette del blocco: stessi valori usati dalle voci di menu su sfondo colorato */
+const ROW_COLOR = 'rgba(255, 255, 255, 0.88)';
+const MUTED_COLOR = 'rgba(255, 255, 255, 0.50)';
+const HOVER_BACKGROUND = 'rgba(255, 255, 255, 0.12)';
+const DIVIDER_COLOR = 'rgba(255, 255, 255, 0.12)';
+/**
+ * Altezza di ogni riga del blocco, identica a sidebar aperta e compressa:
+ * così l'area in fondo non cambia altezza quando si espande il menu.
+ */
+const ROW_HEIGHT = 44;
+/** Larghezza del "binario" delle icone a sidebar compressa (64px di sidebar) */
+const COLLAPSED_ROW_WIDTH = 60;
+/** Larghezza dello slot icona: stessa di `NavBarItem`, così le label restano allineate */
+const ICON_SLOT = 30;
+/**
+ * Riga del blocco inferiore.
+ * Ricalca esattamente la geometria di `NavBarItem` (icona in un box da 30px + label a 8px)
+ * così etichette e icone restano allineate con le voci di menu sopra.
+ */
+function SidebarRow({
+  icon,
+  label,
+  collapsed,
+  to,
+  onClick,
+  iconColor
+}) {
+  const commonHandlers = {
+    onMouseEnter: e => {
+      e.currentTarget.style.backgroundColor = HOVER_BACKGROUND;
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.backgroundColor = 'transparent';
+    }
+  };
+  const iconSlot = jsx(ThemeIcon, {
+    variant: 'light',
+    size: ICON_SLOT,
+    style: {
+      background: 'transparent',
+      color: iconColor !== null && iconColor !== void 0 ? iconColor : 'inherit'
+    },
+    children: icon
+  });
+  const style = collapsed ? {
+    width: COLLAPSED_ROW_WIDTH,
+    height: ROW_HEIGHT,
+    margin: '0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: ROW_COLOR,
+    backgroundColor: 'transparent',
+    transition: 'background-color 0.15s ease'
+  } : {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'calc(100% - 16px)',
+    height: ROW_HEIGHT,
+    margin: '0 8px',
+    padding: '0 12px',
+    fontSize: 13,
+    fontWeight: 500,
+    textAlign: 'left',
+    color: ROW_COLOR,
+    backgroundColor: 'transparent',
+    transition: 'background-color 0.15s ease'
+  };
+  const children = jsxs(Fragment, {
+    children: [iconSlot, !collapsed && jsx(Box, {
+      ml: '8px',
+      children: label
+    })]
+  });
+  const row = to ? jsx(UnstyledButton, Object.assign({
+    component: Link,
+    to: to,
+    state: {
+      title: label
+    },
+    "aria-label": label,
+    style: style
+  }, commonHandlers, {
+    children: children
+  })) : jsx(UnstyledButton, Object.assign({
+    onClick: onClick,
+    "aria-label": label,
+    style: style
+  }, commonHandlers, {
+    children: children
+  }));
+  if (!collapsed) return row;
+  return jsx(Tooltip, {
+    label: label,
+    position: 'right',
+    offset: 10,
+    withArrow: true,
+    children: row
+  });
+}
+/**
+ * Blocco in fondo alla sidebar del layout "modern".
+ *
+ * Il layout "modern" non ha la footer bar: qui vivono le informazioni essenziali che
+ * nel layout classico stanno nel footer (stato della connessione, stato utente,
+ * link all'amministrazione, versione) più il tracciamento dell'attività utente.
+ */
+function ModernSidebarFooter({
+  appVersion,
+  brandName,
+  collapsed,
+  withCollapseToggle
+}) {
+  const {
+    userInfo
+  } = useAppSelector(state => state.user);
+  const {
+    userIdle,
+    navbarOpened
+  } = useAppSelector(state => state.layout);
+  const {
+    hasAdminAccess,
+    hasDeveloperAccess,
+    hasDataAnalystAccess
+  } = useAppSelector(state => state.layout);
+  const [wsPopoverOpened, setWsPopoverOpened] = useState(false);
+  const [isWsConnected, setIsWsConnected] = useState(false);
+  const [connectionId, setConnectionId] = useState(null);
+  const [hasBeenConnected, setHasBeenConnected] = useState(false);
+  const {
+    isBeingWatched
+  } = useScreenSharingContext();
+  const idle = useIdle(600000); // 10 minuti
+  const canAccessAdministration = hasAdminAccess || hasDeveloperAccess || hasDataAnalystAccess;
+  // Monitora lo stato della connessione WebSocket
+  useEffect(() => {
+    const checkConnection = () => {
+      const connected = FluxoClientSys.Instance.sessionHub.isConnected;
+      setIsWsConnected(connected);
+      if (connected) {
+        setConnectionId(FluxoClientSys.Instance.sessionHub.connectionId);
+        setHasBeenConnected(true);
+      } else {
+        setConnectionId(null);
+      }
+    };
+    checkConnection();
+    const interval = setInterval(checkConnection, 2000);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect(() => {
+    if (idle) FluxoStateDispatcher.dispatchSetUserIdle();else FluxoStateDispatcher.dispatchUnsetUserIdle();
+  }, [idle]);
+  // Invia l'aggiornamento dell'attività utente al server quando cambia lo stato idle
+  useEffect(() => {
+    if (!isWsConnected) return;
+    FluxoClientSys.Instance.sessionHub.invoke('UpdateUserActivity', !userIdle).catch(error => {
+      console.error('Failed to update user activity:', error);
+    });
+  }, [userIdle, isWsConnected]);
+  const statusColor = isWsConnected ? userIdle ? '#fab005' : '#40c057' : hasBeenConnected ? '#fa5252' : '#fd7e14';
+  /** Etichetta estesa: tooltip e popover */
+  const statusLabel = isWsConnected ? userIdle ? 'Connesso · utente inattivo' : 'Connesso' : hasBeenConnected ? 'Disconnesso' : 'In attesa...';
+  /**
+   * Etichetta in linea: quando è tutto a posto il pallino verde basta, quindi resta
+   * solo la versione. Il testo compare unicamente quando c'è qualcosa da segnalare.
+   */
+  const statusInlineLabel = isWsConnected ? userIdle ? 'Inattivo' : undefined : hasBeenConnected ? 'Disconnesso' : 'Connessione...';
+  const statusDot = jsx("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: '50%',
+      backgroundColor: statusColor,
+      flexShrink: 0,
+      boxShadow: `0 0 0 3px ${statusColor}22`
+    }
+  });
+  const statusDetails = jsx(Popover.Dropdown, {
+    children: jsxs(Stack, {
+      gap: 'xs',
+      children: [jsxs(Group, {
+        justify: 'space-between',
+        children: [jsx(Text, {
+          size: 'xs',
+          fw: 600,
+          children: "Stato connessione"
+        }), jsx(Badge, {
+          color: isWsConnected ? userIdle ? 'yellow' : 'green' : hasBeenConnected ? 'red' : 'orange',
+          variant: 'light',
+          size: 'xs',
+          children: statusLabel
+        })]
+      }), jsx(Divider, {}), jsxs("div", {
+        children: [jsx(Text, {
+          size: 'xs',
+          c: 'dimmed',
+          mb: 4,
+          children: "Utente connesso"
+        }), jsxs(Text, {
+          size: 'xs',
+          fw: 500,
+          children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.FirstName, " ", userInfo === null || userInfo === void 0 ? void 0 : userInfo.LastName]
+        }), jsx(Text, {
+          size: 'xs',
+          c: 'dimmed',
+          ff: 'monospace',
+          children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.UserId
+        })]
+      }), jsxs("div", {
+        children: [jsx(Text, {
+          size: 'xs',
+          c: 'dimmed',
+          mb: 4,
+          children: "ID dispositivo"
+        }), jsx(Text, {
+          size: 'xs',
+          ff: 'monospace',
+          children: DeviceIdManager.getDeviceId().substring(0, 8)
+        })]
+      }), connectionId && jsxs("div", {
+        children: [jsx(Text, {
+          size: 'xs',
+          c: 'dimmed',
+          mb: 4,
+          children: "Connection ID"
+        }), jsx(Text, {
+          size: 'xs',
+          ff: 'monospace',
+          children: connectionId.substring(0, 8)
+        })]
+      }), !isWsConnected && hasBeenConnected && jsx(Text, {
+        size: 'xs',
+        c: 'red',
+        children: "La connessione WebSocket \u00E8 stata persa"
+      }), !isWsConnected && !hasBeenConnected && jsx(Text, {
+        size: 'xs',
+        c: 'orange',
+        children: "Connessione in corso..."
+      }), jsx(Divider, {}), jsxs(Text, {
+        size: 'xs',
+        c: 'dimmed',
+        children: [brandName, " \u00A9", new Date().getFullYear(), " \u00B7 V. ", appVersion]
+      })]
+    })
+  });
+  const toggleRow = withCollapseToggle && jsx(SidebarRow, {
+    collapsed: collapsed,
+    icon: navbarOpened ? jsx(IconLayoutSidebarLeftCollapse, {
+      size: 20,
+      stroke: 1.5
+    }) : jsx(IconLayoutSidebarLeftExpand, {
+      size: 20,
+      stroke: 1.5
+    }),
+    label: navbarOpened ? 'Comprimi menu' : 'Espandi menu',
+    onClick: () => {
+      if (navbarOpened) FluxoStateDispatcher.dispatchCloseNavbar();else FluxoStateDispatcher.dispatchOpenNavbar();
+    }
+  });
+  return jsxs(Box, {
+    pb: 10,
+    children: [isBeingWatched && !collapsed && jsx(Box, {
+      px: 12,
+      pb: 4,
+      children: jsx(ScreenSharingWidget, {
+        size: 'xs'
+      })
+    }), jsx(Divider, {
+      my: 6,
+      mx: collapsed ? 16 : 8,
+      color: DIVIDER_COLOR
+    }), isBeingWatched && collapsed && jsx(SidebarRow, {
+      collapsed: true,
+      icon: jsx(IconEye, {
+        size: 20,
+        stroke: 1.5
+      }),
+      iconColor: '#ff8787',
+      label: 'Schermo sotto osservazione'
+    }), canAccessAdministration && jsx(SidebarRow, {
+      collapsed: collapsed,
+      icon: jsx(IconSettings, {
+        size: 20,
+        stroke: 1.5
+      }),
+      label: 'Amministrazione',
+      to: '/settings'
+    }), toggleRow, jsxs(Group, {
+      gap: 0,
+      wrap: 'nowrap',
+      justify: collapsed ? 'center' : undefined,
+      style: {
+        height: ROW_HEIGHT,
+        margin: collapsed ? '0 auto' : '0 8px',
+        width: collapsed ? COLLAPSED_ROW_WIDTH : 'calc(100% - 16px)'
+      },
+      children: [jsxs(Popover, {
+        width: 280,
+        position: collapsed ? 'right-end' : 'top-start',
+        withArrow: true,
+        shadow: 'md',
+        opened: wsPopoverOpened,
+        onChange: setWsPopoverOpened,
+        children: [jsx(Popover.Target, {
+          children: jsx(Tooltip, {
+            label: statusLabel,
+            position: collapsed ? 'right' : 'top-start',
+            offset: 10,
+            withArrow: true,
+            children: jsxs(UnstyledButton, {
+              "aria-label": statusLabel,
+              onClick: () => setWsPopoverOpened(o => !o),
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: collapsed ? 'center' : undefined,
+                flex: collapsed ? undefined : 1,
+                minWidth: 0,
+                height: ROW_HEIGHT,
+                width: collapsed ? COLLAPSED_ROW_WIDTH : undefined,
+                padding: collapsed ? 0 : '0 12px',
+                backgroundColor: 'transparent',
+                transition: 'background-color 0.15s ease'
+              },
+              onMouseEnter: e => {
+                e.currentTarget.style.backgroundColor = HOVER_BACKGROUND;
+              },
+              onMouseLeave: e => {
+                e.currentTarget.style.backgroundColor = 'transparent';
+              },
+              children: [jsx("span", {
+                style: {
+                  width: collapsed ? 'auto' : ICON_SLOT,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0
+                },
+                children: statusDot
+              }), !collapsed && jsxs(Text, {
+                ml: '8px',
+                size: '11px',
+                c: MUTED_COLOR,
+                truncate: 'end',
+                children: [statusInlineLabel ? `${statusInlineLabel} · ` : '', "V. ", appVersion]
+              })]
+            })
+          })
+        }), statusDetails]
+      }), canAccessAdministration && !collapsed && jsx(Box, {
+        pr: 12,
+        style: {
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: jsx(MinimalStateViewer, {})
+      })]
+    }), canAccessAdministration && collapsed && jsx(Group, {
+      justify: 'center',
+      gap: 0,
+      style: {
+        width: COLLAPSED_ROW_WIDTH,
+        margin: '0 auto'
+      },
+      children: jsx(MinimalStateViewer, {})
+    })]
+  });
+}
+
+/**
+ * Sidebar del layout "modern": colorata (colore fisso o gradiente del brand),
+ * a tutta altezza, con logo in alto e toggle di apertura/chiusura in basso.
+ */
+function ModernNavbar({
+  brandName,
+  appVersion
+}) {
+  var _a, _b, _c;
+  const {
+    appMenu,
+    navbarOpened
+  } = useSelector(state => state.layout);
+  const surface = useShellBrandSurface();
+  const isMobile = useMediaQuery('(max-width: 992px)');
+  const getPermittedNavBarItems = () => {
+    var _a;
+    const permittedNavBarItems = (_a = appMenu === null || appMenu === void 0 ? void 0 : appMenu.filter(a => {
+      var _a;
+      return !a.hasPermissions || FluxoClientSys.Instance.security.currentUser.hasPermissions((_a = a.permissions) !== null && _a !== void 0 ? _a : []);
+    })) !== null && _a !== void 0 ? _a : [];
+    if (!permittedNavBarItems.find(i => i.routerLink === '')) {
+      permittedNavBarItems.unshift({
+        label: 'Home',
+        icon: 'Home',
+        routerLink: '/',
+        isGroup: false,
+        featureIdentifier: 'sys-home'
+      });
+    }
+    return permittedNavBarItems;
+  };
+  const logoSrc = navbarOpened ? (_a = surface.logo) !== null && _a !== void 0 ? _a : surface.logoIcon : (_b = surface.logoIcon) !== null && _b !== void 0 ? _b : surface.logo;
+  const logoMaxHeight = navbarOpened ? surface.logoHeight : surface.logoIconHeight;
+  return jsxs(AppShell.Navbar, {
+    id: 'fluxo-shell-modern-sidebar',
+    zIndex: 201,
+    withBorder: false,
+    style: {
+      top: 0,
+      height: '100dvh',
+      background: surface.background,
+      border: 'none',
+      overflow: 'visible'
+    },
+    children: [jsx(AppShell.Section, {
+      h: MODERN_HEADER_HEIGHT,
+      pt: MODERN_STRIP_HEIGHT,
+      px: navbarOpened ? 16 : 0,
+      style: {
+        flexShrink: 0
+      },
+      children: jsx(Group, {
+        h: '100%',
+        justify: navbarOpened ? 'flex-start' : 'center',
+        gap: 8,
+        wrap: 'nowrap',
+        children: jsx(Link, {
+          to: '/',
+          tabIndex: -1,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            maxHeight: logoMaxHeight
+          },
+          children: logoSrc ? jsx("img", {
+            src: logoSrc,
+            alt: brandName,
+            style: {
+              maxHeight: logoMaxHeight,
+              maxWidth: navbarOpened ? 200 : 40
+            }
+          }) : jsx(Text, {
+            fw: 700,
+            c: '#fff',
+            size: 'sm',
+            children: navbarOpened ? brandName : (_c = brandName === null || brandName === void 0 ? void 0 : brandName.substring(0, 1)) === null || _c === void 0 ? void 0 : _c.toUpperCase()
+          })
+        })
+      })
+    }), jsx(AppShell.Section, {
+      grow: true,
+      my: 8,
+      component: ScrollArea,
+      className: 'custom-scrollbar',
+      children: jsx(Stack, {
+        justify: 'center',
+        align: 'center',
+        gap: 0,
+        children: getPermittedNavBarItems().map((e, i) => {
+          const IconComponent = e.icon ? IconFactory.getIcon(e.icon) : IconFactory.getIcon('Dashboard');
+          return jsx(NavBarItem, {
+            level: 0,
+            routerLink: e.routerLink,
+            icon: IconComponent,
+            label: e.label,
+            links: e.children && e.children.length > 0 ? e.children : undefined,
+            isMinimal: !navbarOpened,
+            variant: 'onColor'
+          }, i);
+        })
+      })
+    }), jsx(AppShell.Section, {
+      style: {
+        flexShrink: 0
+      },
+      children: jsx(ModernSidebarFooter, {
+        appVersion: appVersion,
+        brandName: brandName,
+        collapsed: !navbarOpened,
+        withCollapseToggle: !isMobile
+      })
+    })]
+  });
+}
+
+/**
+ * Layout "modern": sidebar laterale colorata a tutta altezza, striscia dello stesso
+ * colore che prosegue in alto a tutta larghezza e contenuto arrotondato in alto a sinistra.
+ *
+ * L'altezza complessiva della chrome superiore è identica a quella del layout classico
+ * (48px), così tutti i componenti di pagina condivisi continuano a funzionare senza modifiche.
+ */
+const ModernShellLayout = ({
+  appVersion,
+  brandName,
+  brandElement,
+  currentShellUI,
+  navbarOpened,
+  isMobile,
+  hasAdminAccess,
+  fluxoClientConfig,
+  showDisconnectionOverlay,
+  maxAttemptsReached,
+  reconnectAttempts,
+  isRetrying,
+  handleManualRetry,
+  isAiEnabled,
+  aiAsideOpened,
+  onAiAsideToggle
+}) => {
+  var _a;
+  const {
+    isCurrentSessionInFocusMode
+  } = useContext(ShellSessionContext);
+  const sidebarWidth = getModernSidebarWidth(navbarOpened);
+  const headerOffset = isMobile ? 0 : sidebarWidth;
+  const chromeOverlayStyle = {
+    position: 'fixed',
+    pointerEvents: 'auto',
+    cursor: 'not-allowed',
+    userSelect: 'none',
+    zIndex: 202,
+    background: 'rgba(255, 255, 255, 0.12)',
+    transition: 'opacity 180ms ease, backdrop-filter 180ms ease',
+    backdropFilter: 'blur(2px) saturate(0.92)',
+    WebkitBackdropFilter: 'blur(2px) saturate(0.92)'
+  };
+  return jsx(WithRavifyProvider, {
+    hasAdminAccess: hasAdminAccess,
+    fluxoClientConfig: fluxoClientConfig,
+    children: jsx(AgentProvider, {
+      children: jsxs(AppShell, {
+        padding: 0,
+        className: 'flxShellAppShellModern',
+        layout: 'alt',
+        header: {
+          height: MODERN_HEADER_HEIGHT
+        },
+        navbar: {
+          width: sidebarWidth,
+          breakpoint: 'sm',
+          collapsed: {
+            mobile: !navbarOpened,
+            desktop: false
+          }
+        },
+        aside: {
+          width: MODERN_ASIDE_WIDTH,
+          breakpoint: 'sm',
+          collapsed: {
+            mobile: !isAiEnabled || !aiAsideOpened,
+            desktop: !isAiEnabled || !aiAsideOpened
+          }
+        },
+        transitionDuration: 0,
+        styles: {
+          main: {
+            backgroundColor: '#fafbff'
+          },
+          aside: {
+            zIndex: 200
+          }
+        },
+        children: [jsx(ModernAppBar, {
+          brandName: brandName,
+          brandElement: brandElement,
+          shellUi: currentShellUI,
+          sidebarWidth: headerOffset,
+          isAiEnabled: isAiEnabled,
+          aiAsideOpened: aiAsideOpened,
+          onAiAsideToggle: onAiAsideToggle
+        }), jsx(ModernNavbar, {
+          brandName: brandName,
+          appVersion: appVersion
+        }), isCurrentSessionInFocusMode && jsxs(Fragment, {
+          children: [jsx("div", {
+            "aria-hidden": true,
+            style: Object.assign(Object.assign({}, chromeOverlayStyle), {
+              top: MODERN_STRIP_HEIGHT,
+              left: headerOffset,
+              right: 0,
+              height: MODERN_BAR_HEIGHT
+            })
+          }), !isMobile && jsx("div", {
+            "aria-hidden": true,
+            style: Object.assign(Object.assign({}, chromeOverlayStyle), {
+              top: 0,
+              left: 0,
+              width: sidebarWidth,
+              height: '100dvh',
+              borderRight: '1px solid rgba(15, 23, 42, 0.08)'
+            })
+          })]
+        }), jsx(AppShell.Main, {
+          children: jsx(Suspense, {
+            fallback: jsx(Loader, {}),
+            children: jsx(AppContent, {
+              shellUi: currentShellUI,
+              withMultipleSessions: (_a = currentShellUI.withMultipleSessions) !== null && _a !== void 0 ? _a : false,
+              asideWidth: isAiEnabled && aiAsideOpened ? MODERN_ASIDE_WIDTH : 0,
+              headerHeight: MODERN_HEADER_HEIGHT,
+              tabsVariant: 'modern'
+            })
+          })
+        }), isAiEnabled && jsx(AppShell.Aside, {
+          children: jsx(AiAgentAside, {})
+        }), showDisconnectionOverlay && jsx(DisconnectionOverlay, {
+          maxAttemptsReached: maxAttemptsReached,
+          reconnectAttempts: reconnectAttempts,
+          isRetrying: isRetrying,
+          onRetry: handleManualRetry
+        })]
+      })
+    })
+  });
+};
+
 // Context per evitare props drilling
 const ShellUIContext = /*#__PURE__*/createContext(null);
 const WithShellSessionProvider = ({
@@ -18500,19 +19806,21 @@ const WithShellSessionProvider = ({
     })
   });
 };
-const WithRavifyProvider = ({
-  children,
-  hasAdminAccess,
-  fluxoClientConfig
-}) => {
-  if (hasAdminAccess) {
-    return jsx(RavifyProvider, {
-      fluxoClientConfig: fluxoClientConfig,
-      children: children
-    });
-  }
-  return children;
-};
+/**
+ * Normalizza la configurazione `ui` risolta per il frontend corrente.
+ *
+ * Il layout "modern" usa sempre la geometria della sidebar minimale (64px chiusa /
+ * 248px aperta), così tutti i componenti condivisi (ShellPage, PageHeader, AppContent)
+ * calcolano correttamente offset e larghezze senza modifiche.
+ */
+function normalizeShellUI(shellUi) {
+  var _a;
+  if (((_a = shellUi.layout) !== null && _a !== void 0 ? _a : ShellLayoutVariant.Classic) !== ShellLayoutVariant.Modern) return shellUi;
+  if (shellUi.navigation === ShellUINavigation.SidebarMinimal) return shellUi;
+  return Object.assign(Object.assign({}, shellUi), {
+    navigation: ShellUINavigation.SidebarMinimal
+  });
+}
 const FocusAwareShellLayout = ({
   appVersion,
   brandName,
@@ -18688,142 +19996,11 @@ const FocusAwareShellLayout = ({
             "aria-hidden": true,
             style: getShellChromeOverlayStyle('footer')
           })
-        }), showDisconnectionOverlay && jsx(Overlay, {
-          opacity: 1,
-          color: "#ffffff",
-          zIndex: 9999,
-          style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0
-          },
-          children: jsxs(Stack, {
-            justify: "center",
-            align: "center",
-            gap: "lg",
-            style: {
-              height: '100vh'
-            },
-            children: [jsxs(Stack, {
-              gap: "md",
-              align: "center",
-              children: [jsx(ThemeIcon, {
-                size: 72,
-                radius: "md",
-                variant: "light",
-                color: maxAttemptsReached ? 'red' : 'orange',
-                style: {
-                  backgroundColor: maxAttemptsReached ? '#fff5f5' : '#fff4e6',
-                  border: maxAttemptsReached ? '1px solid #ffc9c9' : '1px solid #ffe8cc'
-                },
-                children: jsx(IconPlugConnectedX, {
-                  size: 36,
-                  stroke: 1.8
-                })
-              }), jsxs(Stack, {
-                gap: "xs",
-                align: "center",
-                mt: "xs",
-                children: [jsx(Text, {
-                  size: "xl",
-                  fw: 600,
-                  c: "dark.8",
-                  ta: "center",
-                  children: maxAttemptsReached ? 'Impossibile riconnettersi' : 'Connessione al server persa'
-                }), jsx(Text, {
-                  size: "sm",
-                  c: "dimmed",
-                  ta: "center",
-                  maw: 420,
-                  style: {
-                    lineHeight: 1.5
-                  },
-                  children: maxAttemptsReached ? 'Non è stato possibile ristabilire la connessione dopo multipli tentativi. Verifica la tua connessione internet e riprova.' : "La connessione al server è stata interrotta. Per evitare la perdita di dati, l'applicazione è stata bloccata."
-                })]
-              })]
-            }), maxAttemptsReached ? jsxs(Stack, {
-              gap: "md",
-              align: "center",
-              mt: "md",
-              children: [jsx(Button, {
-                size: "lg",
-                variant: "filled",
-                color: "blue",
-                loading: isRetrying,
-                onClick: handleManualRetry,
-                leftSection: !isRetrying && jsx(IconRefresh, {
-                  size: 20
-                }),
-                style: {
-                  minWidth: 220,
-                  height: 50,
-                  fontSize: '16px',
-                  fontWeight: 600,
-                  boxShadow: '0 4px 12px rgba(37, 99, 235, 0.2)',
-                  transition: 'all 0.2s ease'
-                },
-                styles: {
-                  root: {
-                    '&:hover': {
-                      transform: 'translateY(-2px)',
-                      boxShadow: '0 6px 16px rgba(37, 99, 235, 0.3)'
-                    },
-                    '&:active': {
-                      transform: 'translateY(0)'
-                    }
-                  }
-                },
-                children: isRetrying ? 'Riconnessione...' : 'Riprova connessione'
-              }), jsx(Text, {
-                size: "xs",
-                c: "dimmed",
-                ta: "center",
-                style: {
-                  marginTop: 8
-                },
-                children: "Oppure ricarica la pagina (F5)"
-              })]
-            }) : jsxs(Group, {
-              gap: "sm",
-              mt: "md",
-              px: "md",
-              py: "xs",
-              style: {
-                backgroundColor: '#f8f9fa',
-                borderRadius: '6px',
-                border: '1px solid #e9ecef'
-              },
-              children: [jsx(Loader, {
-                size: "sm"
-              }), jsxs(Stack, {
-                gap: 2,
-                children: [jsx(Text, {
-                  size: "sm",
-                  c: "dark.6",
-                  fw: 500,
-                  children: "Riconnessione in corso..."
-                }), jsxs(Text, {
-                  size: "xs",
-                  c: "dimmed",
-                  children: ["Tentativo ", reconnectAttempts, " di", ' ', FluxoClientSys.Instance.sessionHub.maxReconnectAttemptsLimit]
-                })]
-              })]
-            }), jsxs(Group, {
-              gap: 6,
-              mt: "lg",
-              children: [jsx(IconAlertTriangle, {
-                size: 16,
-                stroke: 1.5,
-                color: "#868e96"
-              }), jsx(Text, {
-                size: "xs",
-                c: "dimmed",
-                children: maxAttemptsReached ? 'I tuoi dati non salvati potrebbero andare persi' : 'Non chiudere questa pagina'
-              })]
-            })]
-          })
+        }), showDisconnectionOverlay && jsx(DisconnectionOverlay, {
+          maxAttemptsReached: maxAttemptsReached,
+          reconnectAttempts: reconnectAttempts,
+          isRetrying: isRetrying,
+          onRetry: handleManualRetry
         })]
       })
     })
@@ -18836,7 +20013,7 @@ function AppLayout({
   frontends,
   brandElement
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   // Cattura l'URL iniziale PRIMA che i provider React possano modificarlo
   // Questo garantisce che quando passiamo da un frontend all'altro,
   // il nuovo provider riceva l'URL corretto e non venga reindirizzato a "/"
@@ -18852,7 +20029,7 @@ function AppLayout({
   const aiAsideOpened = useAppSelector(state => state.layout.aiAsideOpened);
   const currentFrontendId = useAppSelector(state => state.layout.currentFrontend);
   const currentFrontend = frontends.find(f => f.id === currentFrontendId);
-  const [currentShellUI, setCurrentShellUI] = useState(ui);
+  const [currentShellUI, setCurrentShellUI] = useState(() => normalizeShellUI(ui));
   const isMobile = useMediaQuery('(max-width: 992px)');
   // Stato aside AI (da Redux)
   // Monitora lo stato della connessione WebSocket
@@ -18917,59 +20094,131 @@ function AppLayout({
     }
   }, []);
   useEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
     if (currentFrontend) {
       // Merge frontend UI con UI di default per evitare proprietà undefined
       const frontendUI = (_a = currentFrontend.adminLayoutProps) === null || _a === void 0 ? void 0 : _a.ui;
       if (frontendUI) {
-        setCurrentShellUI(Object.assign(Object.assign(Object.assign({}, ui), frontendUI), {
+        setCurrentShellUI(normalizeShellUI(Object.assign(Object.assign(Object.assign({}, ui), frontendUI), {
           // Assicuriamoci che le proprietà booleane non siano undefined
-          withMultipleSessions: (_b = frontendUI.withMultipleSessions) !== null && _b !== void 0 ? _b : ui.withMultipleSessions
-        }));
+          withMultipleSessions: (_b = frontendUI.withMultipleSessions) !== null && _b !== void 0 ? _b : ui.withMultipleSessions,
+          // Il layout può essere scelto per singolo frontend, con fallback su quello globale
+          layout: (_c = frontendUI.layout) !== null && _c !== void 0 ? _c : ui.layout
+        })));
       } else {
-        setCurrentShellUI(ui);
+        setCurrentShellUI(normalizeShellUI(ui));
       }
     }
   }, [currentFrontend, ui]);
   useEffect(() => {
+    var _a;
+    const isModernLayout = ((_a = currentShellUI.layout) !== null && _a !== void 0 ? _a : ShellLayoutVariant.Classic) === ShellLayoutVariant.Modern;
+    // Il layout "modern" non ha footer bar (le informazioni essenziali stanno in fondo
+    // alla sidebar) e ha una chrome superiore più alta.
+    FluxoStateDispatcher.dispatchSetFooterHeight(isModernLayout ? 0 : 40);
+    FluxoStateDispatcher.dispatchSetAppBarHeight(isModernLayout ? MODERN_HEADER_HEIGHT : 48);
+    FluxoStateDispatcher.dispatchSetLayoutVariant(isModernLayout ? 'modern' : 'classic');
     if (currentShellUI.withMultipleSessions) FluxoStateDispatcher.dispatchSetSessionMode('multi-session');else FluxoStateDispatcher.dispatchSetSessionMode('single-session');
     if (currentShellUI.navigation === ShellUINavigation.Sidebar) FluxoStateDispatcher.dispatchSetNavigationMode('sidebar');else if (currentShellUI.navigation === ShellUINavigation.SidebarMinimal) FluxoStateDispatcher.dispatchSetNavigationMode('sidebar-minimal');else if (currentShellUI.navigation === ShellUINavigation.Topbar) FluxoStateDispatcher.dispatchSetNavigationMode('topmenu');else {
       FluxoStateDispatcher.dispatchSetNavigationMode('none');
       FluxoStateDispatcher.dispatchCloseNavbar();
     }
   }, [currentShellUI]);
+  // Il layout è scelto dal progetto consumer: se non specificato resta quello classico
+  const layoutVariant = (_a = currentShellUI.layout) !== null && _a !== void 0 ? _a : ShellLayoutVariant.Classic;
+  const shellLayoutProps = {
+    appVersion,
+    brandName,
+    brandElement,
+    currentShellUI,
+    navbarOpened,
+    isMobile,
+    hasAdminAccess,
+    fluxoClientConfig,
+    showDisconnectionOverlay,
+    maxAttemptsReached,
+    reconnectAttempts,
+    isRetrying,
+    handleManualRetry,
+    isAiEnabled: isAIEnabled !== null && isAIEnabled !== void 0 ? isAIEnabled : false,
+    aiAsideOpened,
+    onAiAsideToggle: () => FluxoStateDispatcher.dispatchToggleAiAside()
+  };
   return jsx(ShellUIContext.Provider, {
     value: currentShellUI,
     children: jsx(ScreenSharingProvider, {
       sessionHub: FluxoClientSys.Instance.sessionHub,
       children: jsxs(WithShellSessionProvider, {
-        withMultipleSessions: (_a = currentShellUI.withMultipleSessions) !== null && _a !== void 0 ? _a : false,
+        withMultipleSessions: (_b = currentShellUI.withMultipleSessions) !== null && _b !== void 0 ? _b : false,
         initialUrl: initialUrlRef.current,
-        children: [jsx(FocusAwareShellLayout, {
-          appVersion: appVersion,
-          brandName: brandName,
-          brandElement: brandElement,
-          currentShellUI: currentShellUI,
-          navbarOpened: navbarOpened,
-          isMobile: isMobile,
-          hasAdminAccess: hasAdminAccess,
-          fluxoClientConfig: fluxoClientConfig,
-          showDisconnectionOverlay: showDisconnectionOverlay,
-          maxAttemptsReached: maxAttemptsReached,
-          reconnectAttempts: reconnectAttempts,
-          isRetrying: isRetrying,
-          handleManualRetry: handleManualRetry,
-          isAiEnabled: isAIEnabled !== null && isAIEnabled !== void 0 ? isAIEnabled : false,
-          aiAsideOpened: aiAsideOpened,
-          onAiAsideToggle: () => FluxoStateDispatcher.dispatchToggleAiAside()
-        }), jsx(ShellSpotlight, {})]
-      }, `session-provider-${(_b = currentShellUI.withMultipleSessions) !== null && _b !== void 0 ? _b : false}`)
+        children: [layoutVariant === ShellLayoutVariant.Modern ? jsx(ModernShellLayout, Object.assign({}, shellLayoutProps)) : jsx(FocusAwareShellLayout, Object.assign({}, shellLayoutProps)), jsx(ShellSpotlight, {})]
+      }, `session-provider-${(_c = currentShellUI.withMultipleSessions) !== null && _c !== void 0 ? _c : false}`)
+    })
+  });
+}
+
+/**
+ * Cornice delle pagine di autenticazione nel layout "modern": card centrata su
+ * sfondo scuro derivato dal brand.
+ *
+ * Il logo sta fuori dalla card di proposito: quello del brand è pensato per la
+ * sidebar colorata (tipicamente chiaro) e su fondo bianco rischierebbe di sparire.
+ */
+function ModernAuthShell({
+  brandName,
+  children
+}) {
+  const brandSurface = useShellBrandSurface();
+  const isMobile = useMediaQuery('(max-width: 992px)');
+  return jsx(Box, {
+    className: 'flxLogin',
+    style: {
+      minHeight: '100vh',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 24,
+      /* Sfondo del brand (colore fisso o gradiente) con due aloni molto tenui:
+         danno profondità senza dipendere da operazioni sul colore. */
+      background: `radial-gradient(900px 620px at 12% 6%, rgba(255, 255, 255, 0.10), transparent 62%),
+                     radial-gradient(760px 520px at 88% 96%, rgba(255, 255, 255, 0.06), transparent 62%),
+                     ${brandSurface.background}`
+    },
+    children: jsxs(Stack, {
+      align: 'center',
+      gap: 24,
+      w: '100%',
+      maw: 460,
+      children: [brandSurface.logo && jsx("img", {
+        className: 'logoImg',
+        src: brandSurface.logo,
+        alt: brandName + ' logo',
+        style: {
+          maxHeight: brandSurface.logoHeight * 1.6,
+          width: 'auto'
+        }
+      }), jsx(Paper, {
+        w: '100%',
+        radius: 12,
+        p: isMobile ? 24 : 40,
+        style: {
+          background: '#fff',
+          boxShadow: '0 24px 64px -24px rgba(8, 15, 30, 0.55)'
+        },
+        children: children
+      }), jsxs(Text, {
+        size: 'xs',
+        c: 'rgba(255, 255, 255, 0.55)',
+        ta: 'center',
+        children: [brandName, " \u00A9", new Date().getFullYear()]
+      })]
     })
   });
 }
 
 function LoginPage(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
   const {
     error
   } = useSelector(state => state.user);
@@ -18982,6 +20231,7 @@ function LoginPage(props) {
   const isMobile = useMediaQuery('(max-width: 992px)');
   const [is2FaRequired, set2FaRequired] = useState(false);
   const [userId, setUserId] = useState(null);
+  const isModernLayout = props.layout === ShellLayoutVariant.Modern;
   useDocumentTitle('Login - ' + props.brandName);
   const form = useForm({
     initialValues: {
@@ -19033,6 +20283,88 @@ function LoginPage(props) {
     setUserId(null);
     form.reset();
   };
+  if (isModernLayout) {
+    return jsx(ModernAuthShell, {
+      brandName: props.brandName,
+      children: jsxs(Stack, {
+        gap: 20,
+        children: [jsx(Text, {
+          ta: 'center',
+          size: 'lg',
+          fw: 600,
+          children: !is2FaRequired ? (_c = (_b = (_a = props.loginConfig) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.loginToYourAccountLabel) !== null && _c !== void 0 ? _c : 'Accedi al tuo account' : 'Verifica autenticazione a due fattori'
+        }), error && jsx(Alert, {
+          color: 'red',
+          variant: 'light',
+          p: 'xs',
+          children: jsx(Text, {
+            size: 'sm',
+            children: "Errore durante il login. Username o password errati."
+          })
+        }), !is2FaRequired ? jsx("form", {
+          onSubmit: form.onSubmit(values => loginHandler(values)),
+          children: jsxs(Stack, {
+            gap: 12,
+            children: [jsx(TextInput, Object.assign({
+              withAsterisk: true,
+              size: 'md',
+              placeholder: (_f = (_e = (_d = props.loginConfig) === null || _d === void 0 ? void 0 : _d.labels) === null || _e === void 0 ? void 0 : _e.loginUsernamePlaceholder) !== null && _f !== void 0 ? _f : 'Email / Nome utente'
+            }, form.getInputProps('username'))), jsx(PasswordInput, Object.assign({
+              withAsterisk: true,
+              size: 'md',
+              placeholder: (_j = (_h = (_g = props.loginConfig) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h.loginPasswordPlaceholder) !== null && _j !== void 0 ? _j : 'Password'
+            }, form.getInputProps('password'))), ((_l = (_k = props.loginConfig) === null || _k === void 0 ? void 0 : _k.features) === null || _l === void 0 ? void 0 : _l.showForgotPassword) && jsx(Group, {
+              justify: 'center',
+              children: jsx(Anchor, {
+                component: 'button',
+                type: 'button',
+                size: 'xs',
+                onClick: () => navigateTo('/auth/forgot-password'),
+                children: (_p = (_o = (_m = props.loginConfig) === null || _m === void 0 ? void 0 : _m.labels) === null || _o === void 0 ? void 0 : _o.forgotPasswordButton) !== null && _p !== void 0 ? _p : 'Password dimenticata?'
+              })
+            }), jsx(Button, {
+              loading: onLogin,
+              type: 'submit',
+              size: 'md',
+              fullWidth: true,
+              mt: 4,
+              children: (_s = (_r = (_q = props.loginConfig) === null || _q === void 0 ? void 0 : _q.labels) === null || _r === void 0 ? void 0 : _r.loginSubmitButton) !== null && _s !== void 0 ? _s : 'Accedi'
+            })]
+          })
+        }) : jsx("form", {
+          onSubmit: otpForm.onSubmit(values => verify2FAHandler(values)),
+          children: jsxs(Stack, {
+            gap: 12,
+            children: [jsx(Text, {
+              size: 'sm',
+              c: 'dimmed',
+              ta: 'center',
+              children: "Inserisci il codice di verifica generato dalla tua app di autenticazione"
+            }), jsx(TextInput, Object.assign({
+              withAsterisk: true,
+              size: 'md',
+              placeholder: 'Codice OTP (es. 123456)',
+              maxLength: 32
+            }, otpForm.getInputProps('otp'))), jsx(Button, {
+              loading: onLogin,
+              type: 'submit',
+              size: 'md',
+              fullWidth: true,
+              mt: 4,
+              children: "Verifica OTP"
+            }), jsx(Anchor, {
+              component: 'button',
+              type: 'button',
+              size: 'xs',
+              ta: 'center',
+              onClick: backToLoginHandler,
+              children: "\u2190 Torna al login"
+            })]
+          })
+        })]
+      })
+    });
+  }
   return jsxs(Grid, {
     className: 'flxLogin',
     h: '100vh',
@@ -19111,7 +20443,7 @@ function LoginPage(props) {
             },
             size: 'lg',
             mt: 0,
-            children: !is2FaRequired ? (_c = (_b = (_a = props.loginConfig) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.loginToYourAccountLabel) !== null && _c !== void 0 ? _c : 'Accedi al tuo account' : 'Verifica autenticazione a due fattori'
+            children: !is2FaRequired ? (_v = (_u = (_t = props.loginConfig) === null || _t === void 0 ? void 0 : _t.labels) === null || _u === void 0 ? void 0 : _u.loginToYourAccountLabel) !== null && _v !== void 0 ? _v : 'Accedi al tuo account' : 'Verifica autenticazione a due fattori'
           }), !is2FaRequired ? jsxs("form", {
             onSubmit: form.onSubmit(values => {
               loginHandler(values);
@@ -19120,16 +20452,16 @@ function LoginPage(props) {
               children: [jsx(TextInput, Object.assign({
                 withAsterisk: true,
                 size: "sm",
-                placeholder: (_f = (_e = (_d = props.loginConfig) === null || _d === void 0 ? void 0 : _d.labels) === null || _e === void 0 ? void 0 : _e.loginUsernamePlaceholder) !== null && _f !== void 0 ? _f : "Email / Nome utente"
+                placeholder: (_y = (_x = (_w = props.loginConfig) === null || _w === void 0 ? void 0 : _w.labels) === null || _x === void 0 ? void 0 : _x.loginUsernamePlaceholder) !== null && _y !== void 0 ? _y : "Email / Nome utente"
               }, form.getInputProps('username'))), jsx(PasswordInput, Object.assign({
                 size: 'sm',
                 withAsterisk: true,
-                placeholder: (_j = (_h = (_g = props.loginConfig) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h.loginPasswordPlaceholder) !== null && _j !== void 0 ? _j : "Password"
+                placeholder: (_1 = (_0 = (_z = props.loginConfig) === null || _z === void 0 ? void 0 : _z.labels) === null || _0 === void 0 ? void 0 : _0.loginPasswordPlaceholder) !== null && _1 !== void 0 ? _1 : "Password"
               }, form.getInputProps('password')))]
             }), jsxs(Stack, {
               gap: 5,
               mt: "md",
-              children: [((_l = (_k = props.loginConfig) === null || _k === void 0 ? void 0 : _k.features) === null || _l === void 0 ? void 0 : _l.showForgotPassword) && jsx(Stack, {
+              children: [((_3 = (_2 = props.loginConfig) === null || _2 === void 0 ? void 0 : _2.features) === null || _3 === void 0 ? void 0 : _3.showForgotPassword) && jsx(Stack, {
                 align: "center",
                 children: jsx(Button, {
                   style: {
@@ -19138,7 +20470,7 @@ function LoginPage(props) {
                   size: "compact-XXX",
                   variant: "transparent",
                   onClick: () => navigateTo('/auth/forgot-password'),
-                  children: (_p = (_o = (_m = props.loginConfig) === null || _m === void 0 ? void 0 : _m.labels) === null || _o === void 0 ? void 0 : _o.forgotPasswordButton) !== null && _p !== void 0 ? _p : 'Password dimenticata?'
+                  children: (_6 = (_5 = (_4 = props.loginConfig) === null || _4 === void 0 ? void 0 : _4.labels) === null || _5 === void 0 ? void 0 : _5.forgotPasswordButton) !== null && _6 !== void 0 ? _6 : 'Password dimenticata?'
                 })
               }), jsx(Button, {
                 loading: onLogin,
@@ -19146,7 +20478,7 @@ function LoginPage(props) {
                   boxShadow: isMobile ? '4px 5px 1px -2px #000' : 'inherit'
                 },
                 type: "submit",
-                children: (_s = (_r = (_q = props.loginConfig) === null || _q === void 0 ? void 0 : _q.labels) === null || _r === void 0 ? void 0 : _r.loginSubmitButton) !== null && _s !== void 0 ? _s : 'Accedi'
+                children: (_9 = (_8 = (_7 = props.loginConfig) === null || _7 === void 0 ? void 0 : _7.labels) === null || _8 === void 0 ? void 0 : _8.loginSubmitButton) !== null && _9 !== void 0 ? _9 : 'Accedi'
               }), jsxs(Text, {
                 c: "dimmed",
                 fz: "xs",
@@ -38438,241 +39770,223 @@ function MenuDesigner(props) {
     });
     return groups;
   };
-  return jsxs(Stack, {
-    children: [jsx(DataCard, {
-      title: 'Gestione Menu',
-      children: jsxs(Group, {
-        gap: 2,
-        align: 'center',
-        children: [jsx(Select, {
-          allowDeselect: false,
-          style: {
-            flex: 1
-          },
-          value: currentWebMenu === null || currentWebMenu === void 0 ? void 0 : currentWebMenu.id.toString(),
-          data: menuList,
-          onChange: v => {
-            const tmp = webMenu === null || webMenu === void 0 ? void 0 : webMenu.filter(a => a.id.toString() === v)[0];
-            setCurrentWebMenu(tmp);
-          }
-        }), jsxs(Menu, {
-          shadow: "md",
-          width: 200,
-          children: [jsx(Menu.Target, {
-            children: jsx(ActionIcon, {
-              variant: "subtle",
-              color: "gray",
-              size: "lg",
-              children: jsx(IconSettings, {
-                size: 20
-              })
-            })
-          }), jsxs(Menu.Dropdown, {
-            children: [jsx(Menu.Item, {
-              leftSection: jsx(IconPlus, {
-                size: 16
-              }),
-              onClick: () => setShowMenuCreateForm(true),
-              children: "Crea nuovo menu"
-            }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
-              leftSection: jsx(IconEdit, {
-                size: 16
-              }),
-              onClick: () => setShowMenuEditForm(true),
-              children: "Modifica menu"
-            }), jsx(Menu.Item, {
-              leftSection: jsx(IconDownload, {
-                size: 16
-              }),
-              onClick: exportMenuHandler,
-              children: "Esporta menu"
-            }), jsx(Menu.Item, {
-              leftSection: jsx(IconUpload, {
-                size: 16
-              }),
-              onClick: importMenuHandler,
-              children: "Importa menu"
-            }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
-              leftSection: jsx(IconTrash, {
-                size: 16
-              }),
-              color: "red",
-              onClick: () => setShowMenuDeleteConfirmation(true),
-              children: "Elimina menu"
-            })]
-          })]
-        })]
-      })
-    }), !currentWebMenuLoaded && jsx(Center, {
-      children: jsx(Loader, {
-        size: 32
-      })
-    }), currentWebMenu && currentWebMenuLoaded && jsxs(Fragment, {
-      children: [jsx(Center, {
-        children: jsx(IconArrowDown, {
-          size: 48,
-          color: 'gray'
+  /** Selettore del menu, stato di salvataggio e azioni: vivono nell'header della card */
+  const menuHeaderControls = jsxs(Group, {
+    gap: 8,
+    align: 'center',
+    wrap: 'nowrap',
+    children: [currentWebMenu && currentWebMenuLoaded && jsx(Badge, {
+      size: 'sm',
+      variant: 'light',
+      color: currentAppMenuItemsAreChanged ? 'yellow' : 'green',
+      leftSection: jsx(IconDeviceFloppy, {
+        style: {
+          width: rem(12),
+          height: rem(12)
+        }
+      }),
+      children: currentAppMenuItemsAreChanged ? 'Modifiche non salvate' : 'Salvato'
+    }), jsx(Select, {
+      allowDeselect: false,
+      w: 240,
+      value: currentWebMenu === null || currentWebMenu === void 0 ? void 0 : currentWebMenu.id.toString(),
+      data: menuList,
+      onChange: v => {
+        const tmp = webMenu === null || webMenu === void 0 ? void 0 : webMenu.filter(a => a.id.toString() === v)[0];
+        setCurrentWebMenu(tmp);
+      }
+    }), jsxs(Menu, {
+      shadow: "md",
+      width: 200,
+      position: 'bottom-end',
+      children: [jsx(Menu.Target, {
+        children: jsx(ActionIcon, {
+          variant: "subtle",
+          color: "gray",
+          size: "lg",
+          "aria-label": 'Azioni sul menu',
+          children: jsx(IconSettings, {
+            size: 20
+          })
         })
-      }), jsx(DataCard, {
-        title: `Menu designer - ${currentWebMenu.name}`,
-        elements: [jsx(Chip, {
-          icon: jsx(IconDeviceFloppy, {
-            style: {
-              width: rem(14),
-              height: rem(14)
-            }
+      }), jsxs(Menu.Dropdown, {
+        children: [jsx(Menu.Item, {
+          leftSection: jsx(IconPlus, {
+            size: 16
           }),
-          color: currentAppMenuItemsAreChanged ? 'yellow' : 'green',
-          variant: "filled",
-          size: 'xs',
-          checked: true,
-          children: currentAppMenuItemsAreChanged ? 'Modifiche non salvate' : 'Salvato'
-        })],
-        children: jsxs(Stack, {
-          children: [jsxs(Grid, {
-            gutter: 16,
-            align: 'flex-start',
-            children: [jsx(LoadingOverlay, {
-              visible: loadData
-            }), jsx(Grid.Col, {
-              span: {
-                lg: 3
+          onClick: () => setShowMenuCreateForm(true),
+          children: "Crea nuovo menu"
+        }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
+          leftSection: jsx(IconEdit, {
+            size: 16
+          }),
+          onClick: () => setShowMenuEditForm(true),
+          children: "Modifica menu"
+        }), jsx(Menu.Item, {
+          leftSection: jsx(IconDownload, {
+            size: 16
+          }),
+          onClick: exportMenuHandler,
+          children: "Esporta menu"
+        }), jsx(Menu.Item, {
+          leftSection: jsx(IconUpload, {
+            size: 16
+          }),
+          onClick: importMenuHandler,
+          children: "Importa menu"
+        }), jsx(Menu.Divider, {}), jsx(Menu.Item, {
+          leftSection: jsx(IconTrash, {
+            size: 16
+          }),
+          color: "red",
+          onClick: () => setShowMenuDeleteConfirmation(true),
+          children: "Elimina menu"
+        })]
+      })]
+    })]
+  });
+  return jsxs(Stack, {
+    children: [jsxs(DataCard, {
+      title: 'Menu designer',
+      elements: [menuHeaderControls],
+      children: [!currentWebMenuLoaded && jsx(Center, {
+        py: 32,
+        children: jsx(Loader, {
+          size: 32
+        })
+      }), currentWebMenu && currentWebMenuLoaded && jsxs(Stack, {
+        children: [jsxs(Box, {
+          pos: 'relative',
+          children: [jsx(LoadingOverlay, {
+            visible: loadData
+          }), jsxs(Group, {
+            align: 'end',
+            gap: 12,
+            wrap: 'wrap',
+            children: [sysFeatures && jsx(Select, {
+              placeholder: "Seleziona un modulo",
+              style: {
+                flex: '1 1 220px',
+                minWidth: 200
               },
-              children: sysFeatures && jsx(Select, {
-                placeholder: "Seleziona un modulo",
-                onChange: module => {
-                  setCurrentSelectedFeatures(sysFeatures === null || sysFeatures === void 0 ? void 0 : sysFeatures.features.filter(a => a.moduleKey === module));
-                  setCurrentSelectedFeatureId(null);
-                  setFeatureSearchValue(undefined);
-                },
-                leftSection: jsx(IconBoxModel, {}),
-                data: moduleToGroupedComboboxItems(sysFeatures === null || sysFeatures === void 0 ? void 0 : sysFeatures.modules)
-              })
-            }), jsx(Grid.Col, {
-              span: {
-                lg: 9
+              onChange: module => {
+                setCurrentSelectedFeatures(sysFeatures === null || sysFeatures === void 0 ? void 0 : sysFeatures.features.filter(a => a.moduleKey === module));
+                setCurrentSelectedFeatureId(null);
+                setFeatureSearchValue(undefined);
               },
-              children: jsxs(Group, {
-                align: 'end',
-                children: [jsx("div", {
-                  style: {
-                    width: 'calc(100% - 336px)'
-                  },
-                  children: jsx(Select, {
-                    disabled: !currentSelectedFeatures,
-                    placeholder: "Seleziona una feature",
-                    searchable: true,
-                    leftSection: jsx(IconApps, {}),
-                    value: currentSelectedFeatureId,
-                    onChange: v => {
-                      setCurrentSelectedFeatureId(v);
-                    },
-                    onSearchChange: v => setFeatureSearchValue(v),
-                    searchValue: featureSearchValue,
-                    clearable: true,
-                    data: featuresToGroupedComboboxItems(currentSelectedFeatures !== null && currentSelectedFeatures !== void 0 ? currentSelectedFeatures : [])
-                  })
-                }), jsx("div", {
-                  style: {
-                    width: 150
-                  },
-                  children: jsx(Button, {
-                    onClick: () => addFeatureToMenuHandler(),
-                    disabled: !currentSelectedFeatureId,
-                    fullWidth: true,
-                    leftSection: jsx(IconPlus, {
-                      size: 18
-                    }),
-                    children: "Voce"
-                  })
-                }), jsx("div", {
-                  style: {
-                    width: 150
-                  },
-                  children: jsx(Button, {
-                    onClick: () => addGroupToMenuHandler(),
-                    fullWidth: true,
-                    leftSection: jsx(IconFolderPlus, {
-                      size: 18
-                    }),
-                    children: "Gruppo"
-                  })
-                })]
-              })
-            })]
-          }), jsx(DndProvider, {
-            backend: MultiFactory,
-            options: getBackendOptions(),
-            children: jsx(Tree, {
-              listComponent: 'div',
-              listItemComponent: 'div',
-              placeholderComponent: 'div',
-              tree: treeData !== null && treeData !== void 0 ? treeData : [],
-              rootId: 'root',
-              sort: false,
-              onDrop: handleDrop,
-              dropTargetOffset: 10,
-              canDrop: (tree, {
-                dragSource,
-                dropTargetId,
-                dropTarget
-              }) => {
-                var _a;
-                return ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.data) === null || _a === void 0 ? void 0 : _a.isGroup) || dropTarget === undefined;
+              leftSection: jsx(IconBoxModel, {}),
+              data: moduleToGroupedComboboxItems(sysFeatures === null || sysFeatures === void 0 ? void 0 : sysFeatures.modules)
+            }), jsx(Select, {
+              disabled: !currentSelectedFeatures,
+              placeholder: "Seleziona una feature",
+              style: {
+                flex: '2 1 280px',
+                minWidth: 220
               },
-              classes: {
-                root: styles["treeRoot"],
-                draggingSource: styles["draggingSource"],
-                placeholder: styles["placeholderContainer"]
+              searchable: true,
+              leftSection: jsx(IconApps, {}),
+              value: currentSelectedFeatureId,
+              onChange: v => {
+                setCurrentSelectedFeatureId(v);
               },
-              placeholderRender: (node, {
-                depth
-              }) => jsx(Placeholder$2, {
-                node: node,
-                depth: depth
+              onSearchChange: v => setFeatureSearchValue(v),
+              searchValue: featureSearchValue,
+              clearable: true,
+              data: featuresToGroupedComboboxItems(currentSelectedFeatures !== null && currentSelectedFeatures !== void 0 ? currentSelectedFeatures : [])
+            }), jsx(Button, {
+              onClick: () => addFeatureToMenuHandler(),
+              disabled: !currentSelectedFeatureId,
+              w: 132,
+              leftSection: jsx(IconPlus, {
+                size: 18
               }),
-              render: (node, {
-                depth,
-                isOpen,
-                onToggle
-              }) => jsx(CustomNode, {
-                nodes: treeData !== null && treeData !== void 0 ? treeData : [],
-                node: node,
-                depth: depth,
-                isOpen: isOpen,
-                onToggle: onToggle,
-                onDeleteButtonClick: nodeId => deleteAppMenuItem(nodeId),
-                onEditButtonClick: i => {
-                  setEditMenuItem(i);
-                  setEditNodeId(node.id);
-                  setEditMenuItemModalOpened(true);
-                }
-              })
-            })
-          }), editMenuItem && editNodeId && jsx(Modal, {
-            title: 'Modifica voce di menu',
-            closeOnEscape: false,
-            closeOnClickOutside: false,
-            centered: true,
-            opened: editMenuItemModalOpened,
-            onClose: () => setEditMenuItemModalOpened(false),
-            children: jsx(MenuItemEdit, {
-              nodeId: editNodeId,
-              menuItem: editMenuItem,
-              onCancelClick: () => {
-                setEditMenuItemModalOpened(false);
-                setEditMenuItem(undefined);
-              },
-              onSaveClick: (nodeId, i) => updateAppMenuItem(nodeId, i)
-            })
-          }), jsx(Divider, {}), jsx(Group, {
-            justify: 'end',
-            children: jsx(Button, {
-              onClick: () => saveButtonHandler(),
-              children: "Salva"
-            })
+              children: "Voce"
+            }), jsx(Button, {
+              onClick: () => addGroupToMenuHandler(),
+              variant: 'light',
+              w: 132,
+              leftSection: jsx(IconFolderPlus, {
+                size: 18
+              }),
+              children: "Gruppo"
+            })]
           })]
-        })
+        }), jsx(DndProvider, {
+          backend: MultiFactory,
+          options: getBackendOptions(),
+          children: jsx(Tree, {
+            listComponent: 'div',
+            listItemComponent: 'div',
+            placeholderComponent: 'div',
+            tree: treeData !== null && treeData !== void 0 ? treeData : [],
+            rootId: 'root',
+            sort: false,
+            onDrop: handleDrop,
+            dropTargetOffset: 10,
+            canDrop: (tree, {
+              dragSource,
+              dropTargetId,
+              dropTarget
+            }) => {
+              var _a;
+              return ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.data) === null || _a === void 0 ? void 0 : _a.isGroup) || dropTarget === undefined;
+            },
+            classes: {
+              root: styles["treeRoot"],
+              draggingSource: styles["draggingSource"],
+              placeholder: styles["placeholderContainer"]
+            },
+            placeholderRender: (node, {
+              depth
+            }) => jsx(Placeholder$2, {
+              node: node,
+              depth: depth
+            }),
+            render: (node, {
+              depth,
+              isOpen,
+              onToggle
+            }) => jsx(CustomNode, {
+              nodes: treeData !== null && treeData !== void 0 ? treeData : [],
+              node: node,
+              depth: depth,
+              isOpen: isOpen,
+              onToggle: onToggle,
+              onDeleteButtonClick: nodeId => deleteAppMenuItem(nodeId),
+              onEditButtonClick: i => {
+                setEditMenuItem(i);
+                setEditNodeId(node.id);
+                setEditMenuItemModalOpened(true);
+              }
+            })
+          })
+        }), editMenuItem && editNodeId && jsx(Modal, {
+          title: 'Modifica voce di menu',
+          closeOnEscape: false,
+          closeOnClickOutside: false,
+          centered: true,
+          opened: editMenuItemModalOpened,
+          onClose: () => setEditMenuItemModalOpened(false),
+          children: jsx(MenuItemEdit, {
+            nodeId: editNodeId,
+            menuItem: editMenuItem,
+            onCancelClick: () => {
+              setEditMenuItemModalOpened(false);
+              setEditMenuItem(undefined);
+            },
+            onSaveClick: (nodeId, i) => updateAppMenuItem(nodeId, i)
+          })
+        }), jsx(Divider, {}), jsx(Group, {
+          justify: 'end',
+          children: jsx(Button, {
+            onClick: () => saveButtonHandler(),
+            disabled: !currentAppMenuItemsAreChanged,
+            leftSection: jsx(IconDeviceFloppy, {
+              size: 18
+            }),
+            children: "Salva"
+          })
+        })]
       })]
     }), currentWebMenu && jsx(ConfirmModal, {
       title: 'Eliminazione menu',
@@ -69119,7 +70433,14 @@ function ModuleVariablesGrid() {
 }
 
 function Settings(props) {
-  const [currentTab, setCurrentTab] = useState('ui');
+  /**
+   * Se il progetto consumer ha impostato un brand fisso (o ha esplicitamente disabilitato
+   * la personalizzazione) la scheda "Brand" non è visibile né raggiungibile.
+   */
+  const {
+    allowCustomization: allowBrandCustomization
+  } = useShellBranding();
+  const [currentTab, setCurrentTab] = useState(allowBrandCustomization ? 'ui' : 'menu');
   const [apiRestDoc, setApiRestDoc] = useState();
   useFlxNavigate();
   const {
@@ -69143,6 +70464,8 @@ function Settings(props) {
   useEffect(() => {
     const hash = window.location.hash.slice(1);
     if (hash) {
+      // La scheda "Brand" non è raggiungibile nemmeno via hash quando il brand è fisso
+      if (hash === 'ui' && !allowBrandCustomization) return;
       setCurrentTab(hash);
     }
   }, []);
@@ -69240,7 +70563,7 @@ function Settings(props) {
       name: 'Generali',
       hide: !hasAdminAccess,
       collapsible: false,
-      items: [{
+      items: [...(allowBrandCustomization ? [{
         key: 'ui',
         title: jsx(Text, {
           children: "Brand"
@@ -69254,7 +70577,7 @@ function Settings(props) {
           size: 18
         }),
         description: 'Gestisci colori logo e altri impostazioni di interfaccia'
-      }, {
+      }] : []), {
         key: 'menu',
         title: jsx(Text, {
           children: "Menu e ricerca"
@@ -69738,7 +71061,7 @@ function Settings(props) {
   const renderCurrentSection = tab => {
     switch (tab) {
       case 'ui':
-        return hasAdminAccess ? jsx(Box, {
+        return hasAdminAccess && allowBrandCustomization ? jsx(Box, {
           maw: 1280,
           mx: 'auto',
           children: jsx(Ui, {})
@@ -70009,7 +71332,7 @@ function generateMainRoutes(props, hasAdminAccess, hasDeveloperAccess, hasDataAn
 }
 
 function ForgotPassword(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const [email, setEmail] = useState();
   const [errorMessage, setErrorMessage] = useState();
   const [successMessage, setSuccessMessage] = useState();
@@ -70025,6 +71348,63 @@ function ForgotPassword(props) {
       userService.forgotPassword(email).then(_res => setSuccessMessage('Richiesta inviata correttamente. Apri la tua casella e-mail.')).catch(_err => setErrorMessage('Errore durante il login'));
     }
   };
+  const isModernLayout = props.layout === ShellLayoutVariant.Modern;
+  if (isModernLayout) {
+    return jsx(ModernAuthShell, {
+      brandName: (_a = props.brandName) !== null && _a !== void 0 ? _a : 'Fluxo',
+      children: !successMessage ? jsxs(Stack, {
+        gap: 20,
+        children: [jsx(Text, {
+          ta: 'center',
+          size: 'lg',
+          fw: 600,
+          children: (_d = (_c = (_b = props.loginConfig) === null || _b === void 0 ? void 0 : _b.labels) === null || _c === void 0 ? void 0 : _c.haveYouForgottenYourPasswordLabel) !== null && _d !== void 0 ? _d : 'Hai dimenticato la password?'
+        }), errorMessage && jsx(Alert, {
+          color: 'red',
+          variant: 'light',
+          p: 'xs',
+          children: jsx(Text, {
+            size: 'sm',
+            children: errorMessage
+          })
+        }), jsxs(Stack, {
+          gap: 12,
+          children: [jsx(TextInput, {
+            size: 'md',
+            onChange: e => setEmail(e.target.value),
+            placeholder: (_g = (_f = (_e = props.loginConfig) === null || _e === void 0 ? void 0 : _e.labels) === null || _f === void 0 ? void 0 : _f.forgotPasswordEmailPlaceholder) !== null && _g !== void 0 ? _g : 'Inserisci il tuo indirizzo e-mail'
+          }), jsx(Button, {
+            onClick: onFormSubmitClickHandler,
+            disabled: !email,
+            size: 'md',
+            fullWidth: true,
+            mt: 4,
+            children: (_k = (_j = (_h = props.loginConfig) === null || _h === void 0 ? void 0 : _h.labels) === null || _j === void 0 ? void 0 : _j.forgotPasswordSubmitButton) !== null && _k !== void 0 ? _k : 'Recupera password'
+          }), jsx(Anchor, {
+            component: 'button',
+            type: 'button',
+            size: 'xs',
+            ta: 'center',
+            onClick: () => navigateTo('/auth/login'),
+            children: "\u2190 Torna al login"
+          })]
+        })]
+      }) : jsxs(Stack, {
+        gap: 20,
+        children: [jsx(Text, {
+          ta: 'center',
+          size: 'sm',
+          children: successMessage
+        }), jsx(Anchor, {
+          component: Link,
+          to: '/auth/login',
+          size: 'sm',
+          ta: 'center',
+          children: "Effettua il login"
+        })]
+      })
+    });
+  }
   return jsxs(Grid, {
     className: 'flxLogin',
     h: '100vh',
@@ -70104,10 +71484,10 @@ function ForgotPassword(props) {
               size: 'lg',
               mt: 0,
               fw: 500,
-              children: (_c = (_b = (_a = props.loginConfig) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.haveYouForgottenYourPasswordLabel) !== null && _c !== void 0 ? _c : 'Hai dimenticato la password?'
+              children: (_o = (_m = (_l = props.loginConfig) === null || _l === void 0 ? void 0 : _l.labels) === null || _m === void 0 ? void 0 : _m.haveYouForgottenYourPasswordLabel) !== null && _o !== void 0 ? _o : 'Hai dimenticato la password?'
             }), jsx(TextInput, {
               onChange: e => setEmail(e.target.value),
-              placeholder: (_f = (_e = (_d = props.loginConfig) === null || _d === void 0 ? void 0 : _d.labels) === null || _e === void 0 ? void 0 : _e.forgotPasswordEmailPlaceholder) !== null && _f !== void 0 ? _f : 'Inserisci il tuo indirizzo e-mail'
+              placeholder: (_r = (_q = (_p = props.loginConfig) === null || _p === void 0 ? void 0 : _p.labels) === null || _q === void 0 ? void 0 : _q.forgotPasswordEmailPlaceholder) !== null && _r !== void 0 ? _r : 'Inserisci il tuo indirizzo e-mail'
             }), jsx(Button, {
               onClick: onFormSubmitClickHandler,
               disabled: !email,
@@ -70117,7 +71497,7 @@ function ForgotPassword(props) {
                 fontWeight: 600,
                 border: 'none'
               } : undefined,
-              children: (_j = (_h = (_g = props.loginConfig) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h.forgotPasswordSubmitButton) !== null && _j !== void 0 ? _j : 'Recupera password'
+              children: (_u = (_t = (_s = props.loginConfig) === null || _s === void 0 ? void 0 : _s.labels) === null || _t === void 0 ? void 0 : _t.forgotPasswordSubmitButton) !== null && _u !== void 0 ? _u : 'Recupera password'
             }), jsx(Button, {
               style: {
                 color: isMobile ? '#fff' : 'inherit'
@@ -70177,7 +71557,8 @@ function ForgotPassword(props) {
   });
 }
 
-function ResetPassword() {
+function ResetPassword(props = {}) {
+  var _a;
   const [email, setEmail] = useState();
   const [token, setToken] = useState();
   const [linkIsValid, setLinkIsValid] = useState(true);
@@ -70217,6 +71598,98 @@ function ResetPassword() {
       }));
     }
   };
+  const isModernLayout = props.layout === ShellLayoutVariant.Modern;
+  if (isModernLayout) {
+    return jsx(ModernAuthShell, {
+      brandName: (_a = props.brandName) !== null && _a !== void 0 ? _a : 'Fluxo',
+      children: !linkIsValid ? jsxs(Stack, {
+        gap: 20,
+        children: [jsx(Text, {
+          ta: 'center',
+          size: 'lg',
+          fw: 600,
+          children: "Link non valido"
+        }), jsx(Text, {
+          ta: 'center',
+          size: 'sm',
+          c: 'dimmed',
+          children: "Il link di recupero password non \u00E8 pi\u00F9 valido. Richiedine uno nuovo."
+        }), jsx(Anchor, {
+          component: Link,
+          to: '/auth/login',
+          size: 'sm',
+          ta: 'center',
+          children: "Torna al login"
+        })]
+      }) : (recoveryResult === null || recoveryResult === void 0 ? void 0 : recoveryResult.success) ? jsxs(Stack, {
+        gap: 20,
+        children: [jsx(Text, {
+          ta: 'center',
+          size: 'lg',
+          fw: 600,
+          children: "Reset effettuato con successo"
+        }), jsx(Anchor, {
+          component: Link,
+          to: '/auth/login',
+          size: 'sm',
+          ta: 'center',
+          children: "Effettua il login"
+        })]
+      }) : jsxs(Stack, {
+        gap: 20,
+        children: [jsxs(Stack, {
+          gap: 4,
+          children: [jsx(Text, {
+            ta: 'center',
+            size: 'lg',
+            fw: 600,
+            children: "Reset password"
+          }), email && jsx(Text, {
+            ta: 'center',
+            size: 'sm',
+            c: 'dimmed',
+            children: email
+          })]
+        }), recoveryResult && !recoveryResult.success && recoveryResult.errors.length > 0 && jsx(Alert, {
+          color: 'red',
+          variant: 'light',
+          p: 'xs',
+          children: jsx(Stack, {
+            gap: 2,
+            children: recoveryResult.errors.map((err, index) => jsx(Text, {
+              size: 'sm',
+              children: err.description
+            }, index))
+          })
+        }), jsxs(Stack, {
+          gap: 12,
+          children: [jsx(PasswordInput, {
+            size: 'md',
+            label: 'Nuova password',
+            onChange: e => setNewPassword(e.target.value)
+          }), jsx(PasswordInput, {
+            size: 'md',
+            label: 'Conferma nuova password',
+            error: confirmNewPassword && newPassword !== confirmNewPassword ? 'Le password non coincidono' : undefined,
+            onChange: e => setConfirmNewPassword(e.target.value)
+          }), jsx(Button, {
+            onClick: onFormSubmitClickHandler,
+            disabled: !(newPassword && newPassword === confirmNewPassword),
+            size: 'md',
+            fullWidth: true,
+            mt: 4,
+            children: "Effettua il reset"
+          }), jsx(Anchor, {
+            component: Link,
+            to: '/auth/login',
+            size: 'xs',
+            ta: 'center',
+            children: "Non vuoi effettuare il reset? Effettua il login"
+          })]
+        })]
+      })
+    });
+  }
   return jsx(Grid, {
     justify: "center",
     children: jsxs(Grid.Col, {
@@ -82166,6 +83639,18 @@ const MessageReceiverModal = () => {
   });
 };
 
+/**
+ * Layout disponibili per il frontend "admin".
+ *
+ * - `Classic`: layout storico (app bar colorata a tutta larghezza + sidebar chiara).
+ * - `Modern`: sidebar laterale colorata a tutta altezza, striscia dello stesso colore
+ *   che prosegue in alto a tutta larghezza e contenuto arrotondato in alto a sinistra.
+ */
+var ShellLayoutVariant;
+(function (ShellLayoutVariant) {
+  ShellLayoutVariant["Classic"] = "classic";
+  ShellLayoutVariant["Modern"] = "modern";
+})(ShellLayoutVariant || (ShellLayoutVariant = {}));
 var ShellUINavigation;
 (function (ShellUINavigation) {
   ShellUINavigation[ShellUINavigation["Sidebar"] = 1] = "Sidebar";
@@ -82189,11 +83674,21 @@ const culture = "it";
 ResourceManager.setLocalizationMessages(Object.assign(Object.assign(Object.assign({}, dxDashboardIt), dxReportingIt), dxAnalyticsCoreIt));
 locale(culture);
 function FluxoShell(props) {
-  var _a;
+  var _a, _b, _c, _d;
   const [initialOperationsFinished, setInitialOperationsFinished] = useState(false);
   const [router, setRouter] = useState();
-  const [brandColors, setBrandColors] = useState(["#e9f4ff", "#c2d8ef", "#9bbae1", "#749ad6", "#4d7aca", "#355db2", "#29458a", "#1d2e63", "#101b3d", "#030a18"]);
+  /**
+   * Palette forzata dal brand fisso del progetto consumer (se presente):
+   * in quel caso i colori restituiti dal backend vengono ignorati.
+   */
+  const fixedBrandColors = (_b = (_a = props.branding) === null || _a === void 0 ? void 0 : _a.fixed) === null || _b === void 0 ? void 0 : _b.colors;
+  const [brandColors, setBrandColors] = useState(fixedBrandColors !== null && fixedBrandColors !== void 0 ? fixedBrandColors : ["#e9f4ff", "#c2d8ef", "#9bbae1", "#749ad6", "#4d7aca", "#355db2", "#29458a", "#1d2e63", "#101b3d", "#030a18"]);
   const [isFluxoClientReady, setIsFluxoClientReady] = useState(false);
+  /**
+   * Layout effettivo del frontend visualizzato: serve al tema Mantine, che vive
+   * sopra al router. Il layout "modern" usa forme più morbide (raggi, ombre).
+   */
+  const [layoutVariant, setLayoutVariant] = useState((_c = props.ui.layout) !== null && _c !== void 0 ? _c : ShellLayoutVariant.Classic);
   const [initializationError, setInitializationError] = useState(null);
   const generateFluxoAppPrefix = useCallback$1(() => {
     var _a, _b;
@@ -82205,7 +83700,7 @@ function FluxoShell(props) {
     }
     if (window.location.pathname === '/' && prefix !== '/') window.location.replace(prefix);
     return prefix;
-  }, [(_a = props.routing) === null || _a === void 0 ? void 0 : _a.basename]);
+  }, [(_d = props.routing) === null || _d === void 0 ? void 0 : _d.basename]);
   const generateRoutesFromEmbeddedModules = (frontend, routeType) => {
     const embeddedModules = [...frontend.modules, biModule];
     const rObjs = [];
@@ -82296,8 +83791,8 @@ function FluxoShell(props) {
     });
     return rObjs;
   };
-  const generateAuthRoutes = () => {
-    var _a;
+  const generateAuthRoutes = layout => {
+    var _a, _b, _c;
     return {
       path: "/auth",
       element: jsx(OnlyNotLoggedRoute, {
@@ -82308,16 +83803,22 @@ function FluxoShell(props) {
         path: "login",
         element: jsx(LoginPage, {
           loginConfig: props.loginConfig,
-          brandName: (_a = props.brandName) !== null && _a !== void 0 ? _a : 'Fluxo'
+          brandName: (_a = props.brandName) !== null && _a !== void 0 ? _a : 'Fluxo',
+          layout: layout
         })
       }, {
         path: "forgot-password",
         element: jsx(ForgotPassword, {
-          loginConfig: props.loginConfig
+          loginConfig: props.loginConfig,
+          brandName: (_b = props.brandName) !== null && _b !== void 0 ? _b : 'Fluxo',
+          layout: layout
         })
       }, {
         path: "reset-password",
-        element: jsx(ResetPassword, {})
+        element: jsx(ResetPassword, {
+          brandName: (_c = props.brandName) !== null && _c !== void 0 ? _c : 'Fluxo',
+          layout: layout
+        })
       }, {
         path: "account-confirmation",
         element: jsx(AccountConfirmation, {})
@@ -82366,6 +83867,7 @@ function FluxoShell(props) {
       });
       FluxoClientSys.Instance.configuration.getInitialConfiguration().then(res => {
         // ...existing code...
+        var _a, _b, _c, _d;
         //setIsUserLogged(res.isUserLogged);
         // If the user allowedFrontends is empty and user is logged, return a router with an error page (unauthorized)
         if (res.frontends.length === 0 && res.isUserLogged) {
@@ -82405,7 +83907,7 @@ function FluxoShell(props) {
           }], {
             basename: generateFluxoAppPrefix()
           }));
-          setBrandColors(res.ui.colors);
+          setBrandColors(fixedBrandColors !== null && fixedBrandColors !== void 0 ? fixedBrandColors : res.ui.colors);
           return;
         }
         // Get the frontend to render
@@ -82428,6 +83930,11 @@ function FluxoShell(props) {
         };
         // Set the frontend to render
         const flxFrontend = frontendByRender;
+        // Il layout può essere scelto per singolo frontend, con fallback su quello globale.
+        // Serve come valore locale perché lo usano anche le route di autenticazione,
+        // costruite in questa stessa closure (lo stato non è ancora aggiornato qui).
+        const resolvedLayoutVariant = (_d = (_c = (_b = (_a = frontendByRender === null || frontendByRender === void 0 ? void 0 : frontendByRender.adminLayoutProps) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.layout) !== null && _c !== void 0 ? _c : props.ui.layout) !== null && _d !== void 0 ? _d : ShellLayoutVariant.Classic;
+        setLayoutVariant(resolvedLayoutVariant);
         // Write the initial configuration to the state
         FluxoStateDispatcher.dispatchSetConfiguration(res.ui);
         FluxoStateDispatcher.dispatchSetSystemSettings(res.systemSettings);
@@ -82444,7 +83951,7 @@ function FluxoShell(props) {
         FluxoStateDispatcher.dispatchSetCurrentFrontend(res.currentFrontend);
         FluxoStateDispatcher.dispatchAllowedFrontends(res.frontends);
         FluxoStateDispatcher.dispatchSysRoleAccess(res.hasAdminAccess, res.hasDeveloperAccess, res.hasDataAnalystAccess, res.userId);
-        const rObjs = [generateAuthRoutes(), {
+        const rObjs = [generateAuthRoutes(resolvedLayoutVariant), {
           path: 'frontend-switcher',
           element: jsx(ProtectedRoute, {
             children: jsx(FrontendSwitcher, {
@@ -82485,7 +83992,7 @@ function FluxoShell(props) {
           basename: generateFluxoAppPrefix()
         });
         setRouter(router1);
-        setBrandColors(res.ui.colors);
+        setBrandColors(fixedBrandColors !== null && fixedBrandColors !== void 0 ? fixedBrandColors : res.ui.colors);
       }).catch(error => {
         console.error('Failed to get initial configuration:', error);
         setInitializationError(error);
@@ -82498,9 +84005,11 @@ function FluxoShell(props) {
       setInitialOperationsFinished(true);
     });
   }, []);
+  /** Nel layout "modern" i componenti hanno forme più morbide */
+  const isModernLayout = layoutVariant === ShellLayoutVariant.Modern;
   return jsx(MantineProvider, {
     theme: {
-      defaultRadius: 0,
+      defaultRadius: isModernLayout ? MODERN_RADIUS_CONTROL : 0,
       components: {
         ActionIcon: {
           defaultProps: {
@@ -82596,7 +84105,8 @@ function FluxoShell(props) {
         },
         Modal: {
           defaultProps: {
-            shadow: '0 0 200px rgba(16,16,16,.4)',
+            shadow: isModernLayout ? '0 24px 48px -12px rgba(16,24,40,.18)' : '0 0 200px rgba(16,16,16,.4)',
+            radius: isModernLayout ? MODERN_RADIUS_CONTROL : 0,
             styles: {
               close: {
                 color: 'black'
@@ -82606,7 +84116,12 @@ function FluxoShell(props) {
                 padding: 8,
                 marginBottom: 16,
                 color: 'black',
-                boxShadow: 'rgba(33, 33, 33, 0.1) 2px 1px 1px'
+                boxShadow: isModernLayout ? 'none' : 'rgba(33, 33, 33, 0.1) 2px 1px 1px',
+                borderBottom: isModernLayout ? '1px solid #eef0f4' : undefined,
+                // Stesso motivo della DataCard: l'header ha sfondo pieno e senza
+                // raggio coprirebbe gli angoli arrotondati della modale
+                borderTopLeftRadius: isModernLayout ? MODERN_RADIUS_CONTROL : undefined,
+                borderTopRightRadius: isModernLayout ? MODERN_RADIUS_CONTROL : undefined
               }
             },
             overlayProps: {
@@ -82619,7 +84134,7 @@ function FluxoShell(props) {
         Pagination: {
           styles: {
             root: {
-              borderRadius: 0
+              borderRadius: isModernLayout ? MODERN_RADIUS_CONTROL : 0
             }
           }
         },
@@ -82639,7 +84154,8 @@ function FluxoShell(props) {
       fontFamily: 'Roboto',
       primaryColor: 'brand'
     },
-    children: jsx(React__default.Fragment, {
+    children: jsx(ShellBrandingProvider, {
+      branding: props.branding,
       children: initializationError ? jsx(Center, {
         w: '100%',
         h: '100vh',
@@ -83035,4 +84551,4 @@ function LockedResource({
   });
 }
 
-export { FluxoShell, FrontendSwitch, LockedResource, MessageReceiverModal, ScreenSharingProvider, ScreenSharingWidget, ShellUINavigation, ShellUISearchPosition, ShellUISearchType, useScreenSharingContext, useSessionHub };
+export { FluxoShell, FrontendSwitch, LockedResource, MessageReceiverModal, ScreenSharingProvider, ScreenSharingWidget, ShellBrandingProvider, ShellLayoutVariant, ShellUINavigation, ShellUISearchPosition, ShellUISearchType, isBrandCustomizationAllowed, resolveShellBackground, resolveShellBackgroundTopColor, useScreenSharingContext, useSessionHub, useShellBrandSurface, useShellBranding };