cynx-lib 1.3.82 → 1.3.84

package/package.json

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

package/ui/components/Layout.jsx

@@ -12,6 +12,24 @@ export default function Layout({
   user,
   onLogout,
   onLock,
+  // Footer customization & actions
+  footerActions,
+  extraFooterActions,
+  footerSlot,
+  lockLabel,
+  logoutLabel,
+  lockTitle,
+  logoutTitle,
+  lockIcon,
+  logoutIcon,
+  showLock,
+  showLogout,
+  userSlot,
+  renderUser,
+  footerStyle,
+  footerClassName,
+  footerActionsLayout,
+  footerActionsStyle,
   collapsible = true,
   isCollapsed,
   onToggleCollapse,
@@ -38,6 +56,7 @@ export default function Layout({
   contentStyle = {},
   contentClassName,
   children,
+  ...restProps
 }) {
   return (
     <div
@@ -59,6 +78,23 @@ export default function Layout({
         user={user}
         onLogout={onLogout}
         onLock={onLock}
+        footerActions={footerActions}
+        extraFooterActions={extraFooterActions}
+        footerSlot={footerSlot}
+        lockLabel={lockLabel}
+        logoutLabel={logoutLabel}
+        lockTitle={lockTitle}
+        logoutTitle={logoutTitle}
+        lockIcon={lockIcon}
+        logoutIcon={logoutIcon}
+        showLock={showLock}
+        showLogout={showLogout}
+        userSlot={userSlot}
+        renderUser={renderUser}
+        footerStyle={footerStyle}
+        footerClassName={footerClassName}
+        footerActionsLayout={footerActionsLayout}
+        footerActionsStyle={footerActionsStyle}
         collapsible={collapsible}
         isCollapsed={isCollapsed}
         onToggleCollapse={onToggleCollapse}
@@ -75,6 +111,7 @@ export default function Layout({
         activeSubColor={activeSubColor}
         subItemsIndent={subItemsIndent}
         hasPermission={hasPermission}
+        {...restProps}
       />
 
       {/* Main Content Area */}

package/ui/components/LoginPage.jsx

@@ -35,10 +35,15 @@ export default function LoginPage({
   passkeyIcon,
   onPasskeyLogin,
   passkeyLoading = false,
+  passkeyInGrid = false,
+  passkeyPosition = 'start', // 'start' | 'end'
 
-  // SSO Providers
+  // SSO & Alternate Providers
   ssoProviders = [],
-  ssoDividerText,
+  ssoDividerText = 'или',
+  ssoLayout = 'column', // 'column' | 'grid'
+  ssoColumns,           // e.g. 2, 3, 4, or undefined (auto)
+  ssoButtonFormat,      // 'full' | 'short' | 'icon-only'
 
   // Captcha Configuration
   captcha,
@@ -61,11 +66,13 @@ export default function LoginPage({
   const [pageReady, setPageReady] = useState(false);
   const [capToken, setCapToken] = useState('');
   const [passkeyInternalLoading, setPasskeyInternalLoading] = useState(false);
+  const [activeSsoId, setActiveSsoId] = useState(null);
   const capRef = useRef(null);
 
   const error = externalError !== undefined ? externalError : internalError;
-  const loading = externalLoading || internalLoading;
+  const isFormBusy = externalLoading || internalLoading;
   const isPasskeyBusy = passkeyLoading || passkeyInternalLoading;
+  const isAnyBusy = isFormBusy || isPasskeyBusy || !!activeSsoId;
 
   const isCaptchaEnabled = !!(captcha && (captcha.enabled !== false && (captcha.provider || captcha.endpoint || captcha.siteKey)));
   const captchaProvider = captcha?.provider || 'cap';
@@ -134,7 +141,7 @@ export default function LoginPage({
   // 3. Form Submission
   const handleSubmit = async (e) => {
     if (e && e.preventDefault) e.preventDefault();
-    if (loading) return;
+    if (isAnyBusy) return;
 
     if (!username.trim() || !password) {
       setInternalError('Введите логин и пароль');
@@ -170,7 +177,7 @@ export default function LoginPage({
 
   // 4. Passkey Action Handler
   const handlePasskeyClick = async () => {
-    if (isPasskeyBusy) return;
+    if (isAnyBusy) return;
     setInternalError('');
     setPasskeyInternalLoading(true);
     try {
@@ -184,6 +191,21 @@ export default function LoginPage({
     }
   };
 
+  // 5. SSO Action Handler (with independent button loading)
+  const handleSsoClick = async (p, e) => {
+    if (isAnyBusy) return;
+    if (typeof p.onClick !== 'function') return;
+    setInternalError('');
+    setActiveSsoId(p.id);
+    try {
+      await p.onClick(e);
+    } catch (err) {
+      setInternalError(err.message || `Ошибка входа через ${p.name || 'провайдера'}`);
+    } finally {
+      setActiveSsoId(null);
+    }
+  };
+
   if (!pageReady) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background }}>
@@ -196,6 +218,29 @@ export default function LoginPage({
   const hasPasskey = showPasskey && typeof onPasskeyLogin === 'function';
   const hasAuthMethods = showPasswordLogin || hasPasskey || enabledSSO.length > 0;
 
+  const isGrid = ssoLayout === 'grid' || (typeof ssoColumns === 'number' && ssoColumns > 1);
+  const shouldPutPasskeyInGrid = hasPasskey && (passkeyInGrid || (isGrid && passkeyInGrid !== false && enabledSSO.length > 0));
+
+  const passkeyProvider = hasPasskey ? {
+    id: '__passkey__',
+    name: passkeyButtonText,
+    label: passkeyButtonText,
+    icon: passkeyIcon || <Fingerprint size={16} />,
+    onClick: handlePasskeyClick,
+    loading: isPasskeyBusy,
+    disabled: isAnyBusy && !isPasskeyBusy,
+    isPasskey: true,
+  } : null;
+
+  const allAlternateProviders = shouldPutPasskeyInGrid
+    ? (passkeyPosition === 'end'
+        ? [...enabledSSO, passkeyProvider]
+        : [passkeyProvider, ...enabledSSO]
+      )
+    : enabledSSO;
+
+  const hasAlternateMethods = (hasPasskey && !shouldPutPasskeyInGrid) || allAlternateProviders.length > 0;
+
   return (
     <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background, padding: 16 }}>
       <div style={{ width: '100%', maxWidth: cardMaxWidth }}>
@@ -309,7 +354,8 @@ export default function LoginPage({
               type="button"
               variant="primary"
               size="lg"
-              loading={loading}
+              loading={isFormBusy}
+              disabled={isAnyBusy && !isFormBusy}
               onClick={handleSubmit}
               style={{
                 width: '100%',
@@ -319,19 +365,27 @@ export default function LoginPage({
                 fontWeight: 600,
               }}
             >
-              {loading ? submitButtonLoadingText : submitButtonText}
+              {isFormBusy ? submitButtonLoadingText : submitButtonText}
             </Button>
           </div>
         )}
 
-        {/* Passkey Biometric Action */}
-        {hasPasskey && (
-          <div style={{ marginTop: showPasswordLogin ? 10 : 0 }}>
+        {/* Divider between password login and alternate auth methods */}
+        {showPasswordLogin && hasAlternateMethods && (
+          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
+            {ssoDividerText}
+          </Divider>
+        )}
+
+        {/* Standalone Passkey Action (when not placed in grid) */}
+        {hasPasskey && !shouldPutPasskeyInGrid && (
+          <div style={{ marginBottom: allAlternateProviders.length > 0 ? 8 : 0 }}>
             <Button
               type="button"
               variant="default"
               size="lg"
               loading={isPasskeyBusy}
+              disabled={isAnyBusy && !isPasskeyBusy}
               onClick={handlePasskeyClick}
               style={{
                 width: '100%',
@@ -348,45 +402,107 @@ export default function LoginPage({
           </div>
         )}
 
-        {/* SSO Divider */}
-        {(showPasswordLogin || hasPasskey) && enabledSSO.length > 0 && (
-          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
-            {ssoDividerText}
-          </Divider>
-        )}
+        {/* Alternate Auth Providers (SSO, Social, Passkey in grid) */}
+        {allAlternateProviders.length > 0 && (
+          <div
+            style={isGrid ? {
+              display: 'grid',
+              gridTemplateColumns: typeof ssoColumns === 'number'
+                ? `repeat(${ssoColumns}, minmax(0, 1fr))`
+                : `repeat(auto-fit, minmax(${cardMaxWidth > 360 ? '130px' : '90px'}, 1fr))`,
+              gap: 8,
+              width: '100%',
+            } : {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+              width: '100%',
+            }}
+          >
+            {allAlternateProviders.map((p) => {
+              const iconNode = p.logo ? (
+                typeof p.logo === 'string' ? (
+                  <img
+                    src={p.logo}
+                    alt={p.name || 'provider'}
+                    style={{ width: 16, height: 16, objectFit: 'contain', flexShrink: 0, display: 'block' }}
+                  />
+                ) : (
+                  p.logo
+                )
+              ) : (
+                p.icon || (p.isPasskey ? <Fingerprint size={16} /> : <Lock size={15} />)
+              );
+
+              let labelText = '';
+              if (ssoButtonFormat === 'icon-only' || p.iconOnly) {
+                labelText = '';
+              } else if (p.label) {
+                labelText = p.label;
+              } else if (p.buttonText) {
+                labelText = p.buttonText;
+              } else if (isGrid || ssoButtonFormat === 'short') {
+                labelText = p.name;
+              } else {
+                labelText = (p.name && (p.name.startsWith('Войти') || p.name.startsWith('Sign in')))
+                  ? p.name
+                  : `Войти через ${p.name}`;
+              }
+
+              const isItemLoading = p.isPasskey
+                ? isPasskeyBusy
+                : (p.loading !== undefined ? p.loading : activeSsoId === p.id);
+
+              const isItemDisabled = p.isPasskey
+                ? (isAnyBusy && !isPasskeyBusy)
+                : (p.disabled !== undefined ? p.disabled : (isAnyBusy && activeSsoId !== p.id));
+
+              const handleClick = p.isPasskey ? p.onClick : (e) => handleSsoClick(p, e);
 
-        {/* SSO Providers */}
-        {enabledSSO.length > 0 && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {enabledSSO.map((p) => {
               const buttonNode = (
                 <Button
+                  type="button"
                   variant={p.variant || 'default'}
                   size="lg"
-                  onClick={p.onClick}
+                  loading={isItemLoading}
+                  disabled={isItemDisabled}
+                  onClick={handleClick}
                   style={{
                     width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 8,
                     color: 'var(--primary-text)',
                     background: 'var(--surface)',
                     border: '1px solid var(--border)',
                     fontWeight: 600,
-                    fontSize: '.85rem',
+                    fontSize: isGrid ? '.82rem' : '.85rem',
+                    padding: isGrid ? (labelText ? '0 10px' : '0 6px') : '0 16px',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    ...p.style,
                   }}
-                  icon={p.icon || <Lock size={15} />}
+                  icon={iconNode}
                 >
-                  Войти через {p.name}
+                  {labelText}
                 </Button>
               );
 
               if (p.url) {
                 return (
-                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block' }}>
+                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block', minWidth: 0 }}>
                     {buttonNode}
                   </a>
                 );
               }
 
-              return <div key={p.id}>{buttonNode}</div>;
+              return (
+                <div key={p.id} style={{ minWidth: 0 }}>
+                  {buttonNode}
+                </div>
+              );
             })}
           </div>
         )}

package/ui/components/Sidebar.jsx

@@ -102,6 +102,23 @@ export default function Sidebar({
   user,
   onLogout,
   onLock,
+  // Footer customization & actions
+  footerActions,
+  extraFooterActions,
+  lockLabel = 'Блок',
+  logoutLabel = 'Выйти',
+  lockTitle,
+  logoutTitle,
+  lockIcon,
+  logoutIcon,
+  showLock = true,
+  showLogout = true,
+  userSlot,
+  renderUser,
+  footerStyle = {},
+  footerClassName = '',
+  footerActionsLayout = 'flex',
+  footerActionsStyle = {},
   collapsible = true,
   isCollapsed: controlledIsCollapsed,
   defaultCollapsed = false,
@@ -260,6 +277,70 @@ export default function Sidebar({
     ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
     : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
 
+  // Default footer actions (Lock / Logout)
+  const defaultActions = [];
+
+  if (onLock && showLock) {
+    defaultActions.push({
+      id: 'lock',
+      label: lockLabel,
+      title: lockTitle || (typeof lockLabel === 'string' ? lockLabel : 'Заблокировать'),
+      icon: lockIcon || (isCollapsed ? <Lock size={16} /> : <Lock size={13} />),
+      onClick: onLock,
+      variant: isDarkSidebar ? 'secondary' : 'ghost',
+      style: isDarkSidebar
+        ? {
+            background: 'rgba(255,255,255,0.08)',
+            color: 'rgba(255,255,255,0.85)',
+            borderColor: 'rgba(255,255,255,0.12)',
+          }
+        : {},
+    });
+  }
+
+  if (onLogout && showLogout) {
+    defaultActions.push({
+      id: 'logout',
+      label: logoutLabel,
+      title:
+        logoutTitle ||
+        (user?.username || user?.fullName
+          ? `${typeof logoutLabel === 'string' ? logoutLabel : 'Выйти'} (${user?.username || user?.fullName})`
+          : typeof logoutLabel === 'string'
+          ? logoutLabel
+          : 'Выйти'),
+      icon: logoutIcon || (isCollapsed ? <LogOut size={17} /> : <LogOut size={14} />),
+      onClick: onLogout,
+      variant: 'ghost',
+      danger: true,
+      style: isDarkSidebar
+        ? {
+            background: 'rgba(239, 68, 68, 0.1)',
+            borderColor: 'rgba(239, 68, 68, 0.2)',
+          }
+        : {},
+    });
+  }
+
+  // Resolve final actions list
+  let resolvedActions;
+  if (typeof footerActions === 'function') {
+    resolvedActions = footerActions(defaultActions, { isCollapsed, user, isDarkSidebar });
+  } else if (Array.isArray(footerActions)) {
+    resolvedActions = footerActions;
+  } else {
+    resolvedActions = [...defaultActions];
+    if (Array.isArray(extraFooterActions) && extraFooterActions.length > 0) {
+      resolvedActions.push(...extraFooterActions);
+    }
+  }
+
+  const finalActions = (resolvedActions || []).filter(
+    (act) => act && !act.hidden && act.visible !== false
+  );
+
+  const hasFooterContent = Boolean(user || finalActions.length > 0 || userSlot || renderUser);
+
   return (
     <aside
       className={sidebarClassName}
@@ -659,158 +740,243 @@ export default function Sidebar({
 
       {/* Footer Slot or Default User Profile / Actions */}
       {footerSlot ? (
-        footerSlot
-      ) : user ? (
+        typeof footerSlot === 'function'
+          ? footerSlot({ isCollapsed, user, actions: finalActions, isDarkSidebar })
+          : footerSlot
+      ) : hasFooterContent ? (
         <div
+          className={footerClassName}
           style={{
             padding: isCollapsed ? '12px 8px' : 12,
             borderTop: effectiveSidebarBorder,
             flexShrink: 0,
+            ...footerStyle,
           }}
         >
           {!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>
-                    )}
-                  </>
+              {userSlot ? (
+                typeof userSlot === 'function' ? (
+                  userSlot({ user, isCollapsed: false, isDarkSidebar })
                 ) : (
-                  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="Заблокировать экран"
+                  userSlot
+                )
+              ) : renderUser ? (
+                renderUser({ user, isCollapsed: false, isDarkSidebar })
+              ) : user ? (
+                <div
                   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)';
+                    fontSize: '.72rem',
+                    color: userFullNameColor,
+                    marginBottom: 8,
+                    padding: '0 8px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
                   }}
                 >
-                  <Lock size={16} />
-                </button>
-              )}
+                  {user.fullName ? (
+                    <>
+                      {user.fullName}{' '}
+                      {user.username && (
+                        <span style={{ color: userUsernameColor }}>({user.username})</span>
+                      )}
+                    </>
+                  ) : (
+                    user.username
+                  )}
+                </div>
+              ) : null}
 
-              {onLogout && (
-                <button
-                  type="button"
-                  onClick={onLogout}
-                  title={`Выйти (${user?.username || user?.fullName || ''})`}
+              {finalActions.length > 0 && (
+                <div
                   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';
+                    ...(footerActionsLayout === 'column'
+                      ? { display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }
+                      : footerActionsLayout === 'grid'
+                      ? {
+                          display: 'grid',
+                          gridTemplateColumns: `repeat(${finalActions.length > 2 ? 2 : finalActions.length}, minmax(0, 1fr))`,
+                          gap: 6,
+                          width: '100%',
+                        }
+                      : {
+                          display: 'flex',
+                          gap: 6,
+                          flexWrap: 'wrap',
+                          width: '100%',
+                        }),
+                    ...footerActionsStyle,
                   }}
                 >
-                  <LogOut size={17} />
-                </button>
+                  {finalActions.map((act, index) => {
+                    const key = act.id || act.key || index;
+                    if (act.render) {
+                      return (
+                        <React.Fragment key={key}>
+                          {act.render({ action: act, isCollapsed: false, isDarkSidebar, user })}
+                        </React.Fragment>
+                      );
+                    }
+
+                    const isDanger = Boolean(act.danger || act.variant === 'danger');
+                    const actionLabel =
+                      act.label !== undefined
+                        ? act.label
+                        : act.text !== undefined
+                        ? act.text
+                        : act.title;
+                    const actionTitle =
+                      act.title || (typeof actionLabel === 'string' ? actionLabel : undefined);
+                    const isSingle = finalActions.length === 1;
+
+                    return (
+                      <Button
+                        key={key}
+                        variant={
+                          act.variant || (isDanger ? 'ghost' : isDarkSidebar ? 'secondary' : 'ghost')
+                        }
+                        size={act.size || 'md'}
+                        onClick={act.onClick}
+                        disabled={act.disabled}
+                        icon={act.icon}
+                        title={actionTitle}
+                        className={act.className || ''}
+                        style={{
+                          flex: act.flex !== undefined ? act.flex : 1,
+                          width: isSingle ? '100%' : (act.width || 'auto'),
+                          justifyContent: act.justifyContent || 'center',
+                          minWidth: 0,
+                          whiteSpace: 'nowrap',
+                          ...(isDanger
+                            ? {
+                                color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
+                                ...(isDarkSidebar
+                                  ? {
+                                      background: 'rgba(239, 68, 68, 0.1)',
+                                      borderColor: 'rgba(239, 68, 68, 0.2)',
+                                    }
+                                  : {}),
+                              }
+                            : isDarkSidebar &&
+                              (!act.variant || act.variant === 'secondary' || act.variant === 'ghost')
+                            ? {
+                                background: 'rgba(255,255,255,0.08)',
+                                color: 'rgba(255,255,255,0.85)',
+                                borderColor: 'rgba(255,255,255,0.12)',
+                              }
+                            : {}),
+                          ...act.style,
+                        }}
+                      >
+                        {actionLabel}
+                      </Button>
+                    );
+                  })}
+                </div>
               )}
+            </>
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 6,
+                width: '100%',
+              }}
+            >
+              {userSlot &&
+                typeof userSlot === 'function' &&
+                userSlot({ user, isCollapsed: true, isDarkSidebar })}
+              {renderUser && renderUser({ user, isCollapsed: true, isDarkSidebar })}
+              {finalActions.map((act, index) => {
+                const key = act.id || act.key || index;
+                if (act.render) {
+                  return (
+                    <React.Fragment key={key}>
+                      {act.render({ action: act, isCollapsed: true, isDarkSidebar, user })}
+                    </React.Fragment>
+                  );
+                }
+
+                const isDanger = Boolean(act.danger || act.variant === 'danger');
+                const actionLabel =
+                  act.label !== undefined
+                    ? act.label
+                    : act.text !== undefined
+                    ? act.text
+                    : act.title;
+                const actionTitle =
+                  act.title || (typeof actionLabel === 'string' ? actionLabel : undefined);
+                const actionIcon =
+                  act.collapsedIcon ||
+                  act.icon ||
+                  (typeof actionLabel === 'string' ? actionLabel.slice(0, 2) : null);
+
+                const normalColor = isDanger
+                  ? isDarkSidebar
+                    ? '#f87171'
+                    : 'var(--danger, #ef4444)'
+                  : isDarkSidebar
+                  ? 'rgba(255,255,255,0.7)'
+                  : 'var(--t2, #71717a)';
+
+                const hoverBg = isDanger
+                  ? isDarkSidebar
+                    ? 'rgba(239,68,68,0.2)'
+                    : 'var(--danger-bg, rgba(239,68,68,.10))'
+                  : isDarkSidebar
+                  ? 'rgba(255,255,255,0.08)'
+                  : 'var(--grey-1, #fafafa)';
+
+                const hoverColor = isDanger
+                  ? isDarkSidebar
+                    ? '#fca5a5'
+                    : 'var(--danger, #ef4444)'
+                  : isDarkSidebar
+                  ? '#ffffff'
+                  : 'var(--primary-text, #09090b)';
+
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={act.onClick}
+                    disabled={act.disabled}
+                    title={actionTitle}
+                    aria-label={actionTitle}
+                    className={act.className || ''}
+                    style={{
+                      width: 36,
+                      height: 36,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      background: 'transparent',
+                      border: 'none',
+                      borderRadius: 'var(--rads, 8px)',
+                      color: normalColor,
+                      cursor: act.disabled ? 'not-allowed' : 'pointer',
+                      opacity: act.disabled ? 0.5 : 1,
+                      transition: 'all .14s',
+                      ...act.collapsedStyle,
+                      ...act.style,
+                    }}
+                    onMouseEnter={(e) => {
+                      if (act.disabled) return;
+                      e.currentTarget.style.background = hoverBg;
+                      e.currentTarget.style.color = hoverColor;
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'transparent';
+                      e.currentTarget.style.color = normalColor;
+                    }}
+                  >
+                    {actionIcon}
+                  </button>
+                );
+              })}
             </div>
           )}
         </div>