cynx-lib 1.3.51 → 1.3.52

package/ui/components/Layout.jsx

@@ -1,831 +1,138 @@
-import React, { useState } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
-import {
-  PanelLeftClose,
-  PanelLeftOpen,
-  LogOut,
-  ChevronDown,
-  Lock,
-} from 'lucide-react';
-import Button from './Button.jsx';
-import { ConfirmRoot } from './Confirm.jsx';
-
-export function isDarkColor(color) {
-  if (!color || typeof color !== 'string') return false;
-  let c = color.trim().toLowerCase();
-  if (c === 'transparent' || c === 'inherit') return false;
-
-  // Resolve CSS variable if running in browser
-  if (c.startsWith('var(') && typeof window !== 'undefined') {
-    let depth = 0;
-    while (c.startsWith('var(') && depth < 5) {
-      const varNameMatch = c.match(/var\(\s*(--[a-zA-Z0-9_-]+)(?:,\s*([^)]+))?\)/);
-      if (varNameMatch) {
-        const varName = varNameMatch[1];
-        const fallback = varNameMatch[2] ? varNameMatch[2].trim() : '';
-        const resolved = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-        if (resolved) {
-          c = resolved.toLowerCase();
-        } else if (fallback) {
-          c = fallback.toLowerCase();
-        } else {
-          break;
-        }
-      } else {
-        break;
-      }
-      depth++;
-    }
-  }
-
-  // Hex color (#rgb, #rgba, #rrggbb, #rrggbbaa)
-  if (c.startsWith('#')) {
-    let hex = c.slice(1);
-    if (hex.length === 3 || hex.length === 4) {
-      hex = hex.split('').slice(0, 3).map((x) => x + x).join('');
-    }
-    if (hex.length >= 6) {
-      const r = parseInt(hex.slice(0, 2), 16);
-      const g = parseInt(hex.slice(2, 4), 16);
-      const b = parseInt(hex.slice(4, 6), 16);
-      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
-      return luma < 145;
-    }
-  }
-
-  // RGB/RGBA color
-  if (c.startsWith('rgb')) {
-    const match = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-    if (match) {
-      const r = parseInt(match[1], 10);
-      const g = parseInt(match[2], 10);
-      const b = parseInt(match[3], 10);
-      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
-      return luma < 145;
-    }
-  }
-
-  // HSL color
-  if (c.startsWith('hsl')) {
-    const match = c.match(/hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*(\d+)%/);
-    if (match) {
-      const lightness = parseInt(match[1], 10);
-      return lightness < 50;
-    }
-  }
-
-  // Named dark colors or dark CSS hints
-  if (
-    c === '#18181b' ||
-    c === '#141629' ||
-    c === '#09090b' ||
-    c === '#0f172a' ||
-    c === '#1e293b' ||
-    c === '#111827' ||
-    c === '#1f2937' ||
-    c === 'black' ||
-    c === '#000000' ||
-    c === '#000' ||
-    c.includes('dark') ||
-    c.includes('black') ||
-    c.includes('navy')
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
-export default function Layout({
-  brand,
-  navSections = [],
-  navItems = [],
-  user,
-  onLogout,
-  onLock,
-  collapsible = true,
-  storageKey = 'app_sidebar_collapsed',
-  // Sidebar styling props
-  sidebarBg,
-  sidebarColor,
-  sidebarMutedColor,
-  sidebarBorder,
-  sidebarStyle = {},
-  sidebarClassName,
-  // Active states
-  activeBg,
-  activeColor,
-  activeSubBg,
-  activeSubColor,
-  subItemsIndent = 12,
-  // Topbar
-  topbarLeft,
-  topbarCenter,
-  topbarRight,
-  hasPermission = () => true,
-  outletContext,
-  contentStyle = {},
-  contentClassName,
-  children,
-}) {
-  const [isCollapsed, setIsCollapsed] = useState(() => {
-    if (typeof window !== 'undefined' && storageKey) {
-      const saved = localStorage.getItem(storageKey);
-      if (saved !== null) return saved === 'true';
-    }
-    return false;
-  });
-
-  const [expandedSections, setExpandedSections] = useState({});
-
-  const toggleSidebarCollapse = (e) => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    setIsCollapsed((prev) => {
-      const next = !prev;
-      if (typeof window !== 'undefined' && storageKey) {
-        localStorage.setItem(storageKey, String(next));
-      }
-      return next;
-    });
-  };
-
-  const toggleSection = (idx) => {
-    setExpandedSections((prev) => ({
-      ...prev,
-      [idx]: !(prev[idx] ?? true),
-    }));
-  };
-
-  const sections = React.useMemo(() => {
-    if (Array.isArray(navSections) && navSections.length > 0) return navSections;
-    if (Array.isArray(navItems) && navItems.length > 0) return [{ items: navItems }];
-    return [];
-  }, [navSections, navItems]);
-
-  // Contrast & palette calculations
-  const effectiveSidebarBg = sidebarBg || 'var(--sidebar-bg, var(--surface, #ffffff))';
-  const isDarkSidebar = isDarkColor(effectiveSidebarBg);
-
-  const effectiveSidebarBorder =
-    sidebarBorder ||
-    (isDarkSidebar
-      ? '1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08))'
-      : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))');
-
-  const brandTitleColor =
-    sidebarColor ||
-    (isDarkSidebar
-      ? 'var(--sidebar-text, #ffffff)'
-      : 'var(--sidebar-text, var(--primary-text, #09090b))');
-
-  const brandSubtitleColor =
-    sidebarMutedColor ||
-    (isDarkSidebar
-      ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-      : 'var(--sidebar-text-muted, var(--muted, #71717a))');
-
-  const toggleBtnColor = isDarkSidebar
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
-    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
-  const toggleBtnHoverBg = isDarkSidebar
-    ? 'var(--sidebar-item-hover, rgba(255, 255, 255, 0.08))'
-    : 'var(--sidebar-item-hover, var(--grey-1, #fafafa))';
-  const toggleBtnHoverColor = isDarkSidebar
-    ? 'var(--sidebar-text, #ffffff)'
-    : 'var(--sidebar-text, var(--primary-text, #09090b))';
-
-  const sectionHeaderColor =
-    sidebarMutedColor ||
-    (isDarkSidebar
-      ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-      : 'var(--sidebar-text-muted, var(--muted, #71717a))');
-
-  const inactiveItemColor = isDarkSidebar
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
-    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
-  const inactiveItemHoverBg = isDarkSidebar
-    ? 'var(--sidebar-item-hover, rgba(255, 255, 255, 0.06))'
-    : 'var(--sidebar-item-hover, var(--grey-1, #fafafa))';
-  const inactiveItemHoverColor = isDarkSidebar
-    ? 'var(--sidebar-text, #ffffff)'
-    : 'var(--sidebar-text, var(--primary-text, #09090b))';
-
-  const defaultActiveBg = isDarkSidebar
-    ? 'var(--sidebar-item-active-bg, rgba(255, 255, 255, 0.12))'
-    : 'var(--sidebar-item-active-bg, var(--grey-1, #fafafa))';
-
-  const defaultActiveColor = isDarkSidebar
-    ? 'var(--sidebar-item-active-text, #ffffff)'
-    : 'var(--sidebar-item-active-text, var(--primary-text, #09090b))';
-
-  const userFullNameColor = isDarkSidebar
-    ? 'var(--sidebar-text, rgba(255, 255, 255, 0.85))'
-    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
-  const userUsernameColor = isDarkSidebar
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-    : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        height: '100vh',
-        width: '100vw',
-        overflow: 'hidden',
-        background: 'var(--bg, #ffffff)',
-        color: 'var(--primary-text, #09090b)',
-        fontFamily: 'var(--sans, inherit)',
-      }}
-    >
-      {/* ── COLLAPSIBLE SIDEBAR (AUTHENTIC STATUS-SITE & EMP STYLE) ─────────── */}
-      <aside
-        className={sidebarClassName}
-        style={{
-          width: isCollapsed ? 64 : 240,
-          minWidth: isCollapsed ? 64 : 240,
-          height: '100vh',
-          background: effectiveSidebarBg,
-          borderRight: effectiveSidebarBorder,
-          display: 'flex',
-          flexDirection: 'column',
-          boxSizing: 'border-box',
-          userSelect: 'none',
-          transition:
-            'width 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease',
-          overflow: 'hidden',
-          flexShrink: 0,
-          ...sidebarStyle,
-        }}
-      >
-        {/* Sidebar Header with Logo and Collapse Toggle */}
-        <div
-          style={{
-            height: 56,
-            minHeight: 56,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: isCollapsed ? 'center' : 'space-between',
-            padding: isCollapsed ? '0 8px' : '0 12px 0 16px',
-            borderBottom: effectiveSidebarBorder,
-            boxSizing: 'border-box',
-            flexShrink: 0,
-          }}
-        >
-          {!isCollapsed ? (
-            <>
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 10,
-                  overflow: 'hidden',
-                }}
-              >
-                {brand?.logoUrl ? (
-                  <img
-                    src={brand.logoUrl}
-                    alt=""
-                    style={{ maxHeight: 32, maxWidth: 145, objectFit: 'contain' }}
-                  />
-                ) : (
-                  <>
-                    {brand?.icon && <div style={{ flexShrink: 0 }}>{brand.icon}</div>}
-                    <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
-                      <span
-                        style={{
-                          fontWeight: 700,
-                          fontSize: '.88rem',
-                          color: brandTitleColor,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                        }}
-                      >
-                        {brand?.title || 'Приложение'}
-                      </span>
-                      {brand?.subtitle && (
-                        <span
-                          style={{
-                            fontSize: '.64rem',
-                            color: brandSubtitleColor,
-                            fontWeight: 500,
-                          }}
-                        >
-                          {brand.subtitle}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-
-              {collapsible && (
-                <button
-                  type="button"
-                  onClick={toggleSidebarCollapse}
-                  title="Свернуть меню"
-                  style={{
-                    background: 'transparent',
-                    border: 'none',
-                    cursor: 'pointer',
-                    color: toggleBtnColor,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: 30,
-                    height: 30,
-                    borderRadius: 'var(--radxs, 6px)',
-                    padding: 0,
-                    transition: 'background .14s, color .14s',
-                    flexShrink: 0,
-                    marginLeft: 8,
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = toggleBtnHoverBg;
-                    e.currentTarget.style.color = toggleBtnHoverColor;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = 'transparent';
-                    e.currentTarget.style.color = toggleBtnColor;
-                  }}
-                >
-                  <PanelLeftClose size={18} />
-                </button>
-              )}
-            </>
-          ) : (
-            collapsible && (
-              <button
-                type="button"
-                onClick={toggleSidebarCollapse}
-                title="Развернуть меню"
-                style={{
-                  background: 'transparent',
-                  border: 'none',
-                  cursor: 'pointer',
-                  color: toggleBtnColor,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: 36,
-                  height: 36,
-                  borderRadius: 'var(--radxs, 6px)',
-                  padding: 0,
-                  transition: 'background .14s, color .14s',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = toggleBtnHoverBg;
-                  e.currentTarget.style.color = toggleBtnHoverColor;
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                  e.currentTarget.style.color = toggleBtnColor;
-                }}
-              >
-                <PanelLeftOpen size={18} />
-              </button>
-            )
-          )}
-        </div>
-
-        {/* Sidebar Navigation */}
-        <nav
-          style={{
-            padding: isCollapsed ? '12px 8px' : 12,
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-          }}
-        >
-          {sections.map((sec, secIdx) => {
-            const visibleItems = (sec.items || []).filter(
-              (it) => !it.permission || hasPermission(it.permission)
-            );
-            if (visibleItems.length === 0) return null;
-
-            const isAccordion = Boolean(sec.title);
-            const isExpanded = expandedSections[secIdx] ?? true;
-
-            return (
-              <div key={secIdx} style={{ marginTop: secIdx > 0 && !isCollapsed ? 6 : 0 }}>
-                {/* Section header accordion button */}
-                {isAccordion && !isCollapsed && (
-                  <button
-                    type="button"
-                    onClick={() => toggleSection(secIdx)}
-                    style={{
-                      width: '100%',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      padding: '6px 10px',
-                      borderRadius: 'var(--rads, 8px)',
-                      fontSize: '.7rem',
-                      fontWeight: 600,
-                      textTransform: 'uppercase',
-                      letterSpacing: '.06em',
-                      color: sectionHeaderColor,
-                      background: 'transparent',
-                      border: 'none',
-                      cursor: 'pointer',
-                      boxSizing: 'border-box',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (isDarkSidebar) {
-                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.background = 'transparent';
-                    }}
-                  >
-                    <span>{sec.title}</span>
-                    <ChevronDown
-                      size={13}
-                      style={{
-                        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                        transition: 'transform 0.22s cubic-bezier(0.4, 0, 0.2, 1)',
-                        opacity: isDarkSidebar ? 0.75 : 0.6,
-                      }}
-                    />
-                  </button>
-                )}
-
-                {/* Separator when collapsed */}
-                {isAccordion && isCollapsed && secIdx > 0 && (
-                  <div
-                    style={{
-                      height: 1,
-                      background: isDarkSidebar
-                        ? 'var(--sidebar-border, rgba(255, 255, 255, 0.08))'
-                        : 'var(--sidebar-border, var(--border-light, #f4f4f5))',
-                      margin: '4px 0',
-                    }}
-                  />
-                )}
-
-                {/* Smooth 60fps Grid Container for Accordion Items */}
-                <div
-                  style={{
-                    display: 'grid',
-                    gridTemplateRows: isCollapsed || isExpanded ? '1fr' : '0fr',
-                    transition: 'grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1)',
-                  }}
-                >
-                  <div
-                    style={{
-                      overflow: 'hidden',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: 2,
-                      paddingTop: isAccordion && !isCollapsed ? 2 : 0,
-                      paddingLeft: isAccordion && !isCollapsed && subItemsIndent ? subItemsIndent : 0,
-                    }}
-                  >
-                    {visibleItems.map((item) => {
-                      const Icon = item.icon;
-
-                      // Active styles computation
-                      const effectiveActiveBg =
-                        item.activeBg ||
-                        (isAccordion ? activeSubBg : null) ||
-                        activeBg ||
-                        defaultActiveBg;
-
-                      const isDarkActiveBg = isDarkColor(effectiveActiveBg);
-
-                      const effectiveActiveColor =
-                        item.activeColor ||
-                        (isAccordion ? activeSubColor : null) ||
-                        activeColor ||
-                        (isDarkActiveBg ? '#ffffff' : defaultActiveColor);
-
-                      return (
-                        <NavLink
-                          key={item.to}
-                          to={item.to}
-                          end={item.end}
-                          title={isCollapsed ? item.label : undefined}
-                          style={({ isActive }) => {
-                            const currentBg = isActive ? effectiveActiveBg : 'transparent';
-                            const currentColor = isActive ? effectiveActiveColor : inactiveItemColor;
-
-                            return {
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: isCollapsed ? 'center' : 'space-between',
-                              padding: isCollapsed
-                                ? '9px 0'
-                                : isAccordion
-                                ? '6px 8px'
-                                : '8px 10px',
-                              borderRadius: 'var(--rads, 8px)',
-                              fontSize: isAccordion && !isCollapsed ? '.79rem' : '.82rem',
-                              fontWeight: isActive ? 600 : isAccordion ? 400 : 500,
-                              color: currentColor,
-                              background: currentBg,
-                              border: 'none',
-                              textDecoration: 'none',
-                              cursor: 'pointer',
-                              textAlign: 'left',
-                              fontFamily: 'inherit',
-                              transition: 'all .14s',
-                              boxSizing: 'border-box',
-                              outline: 'none',
-                            };
-                          }}
-                          onMouseEnter={(e) => {
-                            if (!e.currentTarget.classList.contains('active')) {
-                              e.currentTarget.style.background = inactiveItemHoverBg;
-                              e.currentTarget.style.color = inactiveItemHoverColor;
-                            }
-                          }}
-                          onMouseLeave={(e) => {
-                            if (!e.currentTarget.classList.contains('active')) {
-                              e.currentTarget.style.background = 'transparent';
-                              e.currentTarget.style.color = inactiveItemColor;
-                            }
-                          }}
-                        >
-                          {({ isActive }) => {
-                            const iconSize = isCollapsed ? 18 : isAccordion ? 15 : 16;
-
-                            return (
-                              <>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: isAccordion ? 8 : 10 }}>
-                                  {Icon && <Icon size={iconSize} style={{ flexShrink: 0 }} />}
-                                  {!isCollapsed && <span>{item.label}</span>}
-                                </div>
-
-                                {!isCollapsed && typeof item.count === 'number' && (
-                                  <span
-                                    style={{
-                                      fontSize: isAccordion ? '.64rem' : '.68rem',
-                                      padding: '1px 6px',
-                                      borderRadius: 'var(--radxs, 4px)',
-                                      background: isActive
-                                        ? isDarkActiveBg
-                                          ? 'rgba(255,255,255,0.2)'
-                                          : isDarkSidebar
-                                          ? 'rgba(255,255,255,0.15)'
-                                          : 'var(--border, #e4e4e7)'
-                                        : isDarkSidebar
-                                        ? 'rgba(255,255,255,0.08)'
-                                        : 'var(--grey-1, #fafafa)',
-                                      color: isActive
-                                        ? isDarkActiveBg || isDarkSidebar
-                                          ? '#ffffff'
-                                          : 'var(--primary-text, #09090b)'
-                                        : isDarkSidebar
-                                        ? 'rgba(255,255,255,0.6)'
-                                        : 'var(--muted, #71717a)',
-                                      fontFamily: 'var(--mono, monospace)',
-                                      border:
-                                        isActive && (isDarkActiveBg || isDarkSidebar)
-                                          ? 'none'
-                                          : isDarkSidebar
-                                          ? '1px solid var(--sidebar-border, rgba(255,255,255,0.08))'
-                                          : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))',
-                                    }}
-                                  >
-                                    {item.count}
-                                  </span>
-                                )}
-                              </>
-                            );
-                          }}
-                        </NavLink>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </nav>
-
-        {/* Sidebar Footer (exact emp / status-site style) */}
-        {user && (
-          <div
-            style={{
-              padding: isCollapsed ? '12px 8px' : 12,
-              borderTop: effectiveSidebarBorder,
-              flexShrink: 0,
-            }}
-          >
-            {!isCollapsed ? (
-              <>
-                <div
-                  style={{
-                    fontSize: '.72rem',
-                    color: userFullNameColor,
-                    marginBottom: 8,
-                    padding: '0 8px',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}
-                >
-                  {user.fullName ? (
-                    <>
-                      {user.fullName}{' '}
-                      {user.username && (
-                        <span style={{ color: userUsernameColor }}>({user.username})</span>
-                      )}
-                    </>
-                  ) : (
-                    user.username
-                  )}
-                </div>
-
-                <div style={{ display: 'flex', gap: 6 }}>
-                  {onLock && (
-                    <Button
-                      variant={isDarkSidebar ? 'secondary' : 'ghost'}
-                      size="md"
-                      onClick={onLock}
-                      icon={<Lock size={13} />}
-                      title="Заблокировать"
-                      style={{
-                        flex: 1,
-                        justifyContent: 'center',
-                        ...(isDarkSidebar
-                          ? {
-                              background: 'rgba(255,255,255,0.08)',
-                              color: 'rgba(255,255,255,0.85)',
-                              borderColor: 'rgba(255,255,255,0.12)',
-                            }
-                          : {}),
-                      }}
-                    >
-                      Блок
-                    </Button>
-                  )}
-
-                  {onLogout && (
-                    <Button
-                      variant="ghost"
-                      size="md"
-                      onClick={onLogout}
-                      icon={<LogOut size={14} />}
-                      title="Выйти"
-                      style={{
-                        width: onLock ? 'auto' : '100%',
-                        flex: onLock ? 1 : undefined,
-                        justifyContent: 'center',
-                        color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
-                        ...(isDarkSidebar
-                          ? {
-                              background: 'rgba(239, 68, 68, 0.1)',
-                              borderColor: 'rgba(239, 68, 68, 0.2)',
-                            }
-                          : {}),
-                      }}
-                    >
-                      Выйти
-                    </Button>
-                  )}
-                </div>
-              </>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-                {onLock && (
-                  <button
-                    type="button"
-                    onClick={onLock}
-                    title="Заблокировать экран"
-                    style={{
-                      width: 36,
-                      height: 36,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      background: 'transparent',
-                      border: 'none',
-                      borderRadius: 'var(--rads, 8px)',
-                      color: isDarkSidebar ? 'rgba(255,255,255,0.7)' : 'var(--t2, #71717a)',
-                      cursor: 'pointer',
-                      transition: 'all .14s',
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.background = isDarkSidebar
-                        ? 'rgba(255,255,255,0.08)'
-                        : 'var(--grey-1, #fafafa)';
-                      e.currentTarget.style.color = isDarkSidebar
-                        ? '#ffffff'
-                        : 'var(--primary-text, #09090b)';
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.background = 'transparent';
-                      e.currentTarget.style.color = isDarkSidebar
-                        ? 'rgba(255,255,255,0.7)'
-                        : 'var(--t2, #71717a)';
-                    }}
-                  >
-                    <Lock size={16} />
-                  </button>
-                )}
-
-                {onLogout && (
-                  <button
-                    type="button"
-                    onClick={onLogout}
-                    title={`Выйти (${user?.username || user?.fullName || ''})`}
-                    style={{
-                      width: 36,
-                      height: 36,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      background: 'transparent',
-                      border: 'none',
-                      borderRadius: 'var(--rads, 8px)',
-                      color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
-                      cursor: 'pointer',
-                      transition: 'all .14s',
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.background = isDarkSidebar
-                        ? 'rgba(239,68,68,0.2)'
-                        : 'var(--danger-bg, rgba(239,68,68,.10))';
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.background = 'transparent';
-                    }}
-                  >
-                    <LogOut size={17} />
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </aside>
-
-      {/* ── MAIN CONTENT (EXACT STATUS-SITE & EMP STYLE) ───────────────── */}
-      <div
-        style={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100vh',
-          overflow: 'hidden',
-          minWidth: 0,
-        }}
-      >
-        {/* Top Navbar Header */}
-        <header
-          style={{
-            height: 56,
-            minHeight: 56,
-            borderBottom: '1px solid var(--border-light, #f4f4f5)',
-            background: 'var(--surface, #ffffff)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '0 24px',
-            flexShrink: 0,
-            boxSizing: 'border-box',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            {topbarLeft}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            {topbarCenter}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
-            {topbarRight}
-          </div>
-        </header>
-
-        {/* Content Area */}
-        <main
-          className={contentClassName}
-          style={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: 0,
-            overflowY: 'auto',
-            background: 'var(--bg, #ffffff)',
-            boxSizing: 'border-box',
-            ...contentStyle,
-          }}
-        >
-          {children || <Outlet context={outletContext} />}
-        </main>
-      </div>
-
-      <ConfirmRoot />
-    </div>
-  );
-}
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar, { isDarkColor } from './Sidebar.jsx';
+import { ConfirmRoot } from './Confirm.jsx';
+
+export { isDarkColor };
+
+export default function Layout({
+  brand,
+  navSections = [],
+  navItems = [],
+  user,
+  onLogout,
+  onLock,
+  collapsible = true,
+  isCollapsed,
+  onToggleCollapse,
+  storageKey = 'app_sidebar_collapsed',
+  // Sidebar styling props
+  sidebarBg,
+  sidebarColor,
+  sidebarMutedColor,
+  sidebarBorder,
+  sidebarStyle = {},
+  sidebarClassName,
+  // Active states
+  activeBg,
+  activeColor,
+  activeSubBg,
+  activeSubColor,
+  subItemsIndent = 12,
+  // Topbar
+  topbarLeft,
+  topbarCenter,
+  topbarRight,
+  hasPermission = () => true,
+  outletContext,
+  contentStyle = {},
+  contentClassName,
+  children,
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        width: '100vw',
+        overflow: 'hidden',
+        background: 'var(--bg, #ffffff)',
+        color: 'var(--primary-text, #09090b)',
+        fontFamily: 'var(--sans, inherit)',
+      }}
+    >
+      {/* Standalone Reusable Sidebar Component */}
+      <Sidebar
+        brand={brand}
+        navSections={navSections}
+        navItems={navItems}
+        user={user}
+        onLogout={onLogout}
+        onLock={onLock}
+        collapsible={collapsible}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={onToggleCollapse}
+        storageKey={storageKey}
+        sidebarBg={sidebarBg}
+        sidebarColor={sidebarColor}
+        sidebarMutedColor={sidebarMutedColor}
+        sidebarBorder={sidebarBorder}
+        sidebarStyle={sidebarStyle}
+        sidebarClassName={sidebarClassName}
+        activeBg={activeBg}
+        activeColor={activeColor}
+        activeSubBg={activeSubBg}
+        activeSubColor={activeSubColor}
+        subItemsIndent={subItemsIndent}
+        hasPermission={hasPermission}
+      />
+
+      {/* Main Content Area */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+          overflow: 'hidden',
+          minWidth: 0,
+        }}
+      >
+        {/* Top Navbar Header */}
+        <header
+          style={{
+            height: 56,
+            minHeight: 56,
+            borderBottom: '1px solid var(--border-light, #f4f4f5)',
+            background: 'var(--surface, #ffffff)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 24px',
+            flexShrink: 0,
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {topbarLeft}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {topbarCenter}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
+            {topbarRight}
+          </div>
+        </header>
+
+        {/* Content Area */}
+        <main
+          className={contentClassName}
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            overflowY: 'auto',
+            background: 'var(--bg, #ffffff)',
+            boxSizing: 'border-box',
+            ...contentStyle,
+          }}
+        >
+          {children || <Outlet context={outletContext} />}
+        </main>
+      </div>
+
+      <ConfirmRoot />
+    </div>
+  );
+}