cynx-lib 1.3.44 → 1.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.44",
+  "version": "1.3.45",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/Layout.jsx

@@ -0,0 +1,831 @@
+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>
+  );
+}

package/ui/index.cjs

@@ -47,6 +47,7 @@ __export(index_exports, {
   ImageUpload: () => ImageUpload,
   InfoBadge: () => InfoBadge,
   Input: () => Input,
+  Layout: () => Layout,
   LinearProgress: () => LinearProgress,
   Modal: () => Modal,
   PageShell: () => PageShell,
@@ -123,6 +124,8 @@ var import_Card = require("./components/Card.jsx");
 var import_FilePicker = __toESM(require("./components/FilePicker.jsx"), 1);
 var import_Divider = __toESM(require("./components/Divider.jsx"), 1);
 var import_InfoBadge = __toESM(require("./components/InfoBadge.jsx"), 1);
+var import_Layout = __toESM(require("./components/Layout.jsx"), 1);
+const Layout = import_Layout.default;
 const Button = import_Button.default;
 const FilePicker = import_FilePicker.default;
 const Divider = import_Divider.default;

package/ui/index.js

@@ -37,7 +37,9 @@ import { PageShell as _PageShell, TableCard as _TableCard, TableCardFilters as _
 import { default as _FilePicker } from './components/FilePicker.jsx';
 import { default as _Divider } from './components/Divider.jsx';
 import { default as _InfoBadge } from './components/InfoBadge.jsx';
+import { default as _Layout } from './components/Layout.jsx';
 
+export const Layout = _Layout;
 export const Button = _Button;
 export const FilePicker = _FilePicker;
 export const Divider = _Divider;