@djangocfg/layouts 2.1.356 → 2.1.358

package/src/layouts/ProfileLayout/components/ApiKeySection/context.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+import { useApiKey } from '@djangocfg/api/hooks';
+import { toast } from '@djangocfg/ui-core/hooks';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Labels (hardcoded English — same pattern as TwoFactorSection)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ApiKeyLabels {
+  title: string;
+  description: string;
+  created: string;
+  reissued: string;
+  neverReissued: string;
+  regenerate: string;
+  confirmRegenerate: string;
+  regenerating: string;
+  regenerated: string;
+  failedToRegenerate: string;
+  done: string;
+  test: string;
+  testing: string;
+  testSuccess: string;
+  testFailed: string;
+}
+
+const LABELS: ApiKeyLabels = {
+  title: 'API Key',
+  description: 'Your personal API key for programmatic access',
+  created: 'Created',
+  reissued: 'Last reissued',
+  neverReissued: 'Never reissued',
+  regenerate: 'Regenerate API Key',
+  confirmRegenerate: 'Click to confirm',
+  regenerating: 'Regenerating…',
+  regenerated: 'API key regenerated',
+  failedToRegenerate: 'Failed to regenerate API key',
+  done: 'Done',
+  test: 'Test API Key',
+  testing: 'Testing…',
+  testSuccess: 'API key is valid',
+  testFailed: 'API key test failed',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ApiKeyContextValue {
+  labels: ApiKeyLabels;
+  apiKey: string | null;
+  reissuedAt: string | null;
+  createdAt: string | null;
+  isLoading: boolean;
+  error: string | null;
+  isArmed: boolean;
+  arm: () => void;
+  disarm: () => void;
+  regenerate: () => Promise<void>;
+  isRegenerating: boolean;
+  isFresh: boolean;
+  dismissFresh: () => void;
+  testKey: () => Promise<void>;
+  isTesting: boolean;
+  testResult: boolean | null;
+}
+
+const ApiKeyContext = createContext<ApiKeyContextValue | null>(null);
+
+export const useApiKeyContext = (): ApiKeyContextValue => {
+  const ctx = useContext(ApiKeyContext);
+  if (!ctx) throw new Error('useApiKeyContext must be used within ApiKeyProvider');
+  return ctx;
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { apiKey, reissuedAt, createdAt, isLoading, isRegenerating, isTesting, regenerate, testKey, refresh } = useApiKey();
+
+  const [isArmed, setIsArmed] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [testResult, setTestResult] = useState<boolean | null>(null);
+
+  const arm = useCallback(() => { setError(null); setIsArmed(true); }, []);
+  const disarm = useCallback(() => setIsArmed(false), []);
+
+  // Detect when the key is "fresh" (full key shown once after regenerate).
+  // Backend GET returns masked keys (contain •). If no •, it's the fresh full key.
+  const isFresh = apiKey ? !apiKey.includes('•') : false;
+
+  const dismissFresh = useCallback(() => {
+    refresh();
+  }, [refresh]);
+
+  const handleRegenerate = useCallback(async () => {
+    try {
+      setError(null);
+      await regenerate();
+      setIsArmed(false);
+      setTestResult(null);
+      toast.success(LABELS.regenerated);
+    } catch {
+      setError(LABELS.failedToRegenerate);
+      toast.error(LABELS.failedToRegenerate);
+    }
+  }, [regenerate]);
+
+  const handleTest = useCallback(async () => {
+    if (!apiKey) return;
+    setTestResult(null);
+    try {
+      const result = await testKey(apiKey);
+      setTestResult(result.valid);
+      if (result.valid) {
+        toast.success(LABELS.testSuccess);
+      } else {
+        toast.error(LABELS.testFailed);
+      }
+    } catch {
+      setTestResult(false);
+      toast.error(LABELS.testFailed);
+    }
+  }, [apiKey, testKey]);
+
+  const value = useMemo<ApiKeyContextValue>(() => ({
+    labels: LABELS,
+    apiKey,
+    reissuedAt,
+    createdAt,
+    isLoading,
+    error,
+    isArmed,
+    arm,
+    disarm,
+    regenerate: handleRegenerate,
+    isRegenerating,
+    isFresh,
+    dismissFresh,
+    testKey: handleTest,
+    isTesting,
+    testResult,
+  }), [
+    apiKey, reissuedAt, createdAt, isLoading, error,
+    isArmed, arm, disarm, handleRegenerate, isRegenerating, isFresh, dismissFresh,
+    handleTest, isTesting, testResult,
+  ]);
+
+  return (
+    <ApiKeyContext.Provider value={value}>
+      {children}
+    </ApiKeyContext.Provider>
+  );
+};

package/src/layouts/ProfileLayout/components/ApiKeySection/index.ts

@@ -0,0 +1,3 @@
+export { ApiKeySection } from './ApiKeySection';
+export { ApiKeyProvider, useApiKeyContext } from './context';
+export type { ApiKeyLabels } from './context';

package/src/layouts/ProfileLayout/components/EditableField.tsx

@@ -6,7 +6,7 @@ import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useProfileContext } from '../context';
+import { useProfileContext } from '../ProfileForm/context';
 
 function formatPhone(raw: string): string {
   if (!raw) return '';

package/src/layouts/ProfileLayout/components/PreferencesSection.tsx

@@ -0,0 +1,56 @@
+/**
+ * Preferences Section
+ *
+ * Language + theme controls for ProfileForm.
+ * Uses ThemeToggle from ui-nextjs and LocaleSwitcherDropdown from _components.
+ */
+
+'use client';
+
+import React from 'react';
+
+import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+
+interface PreferencesSectionProps {
+  /** Extra className for the root. */
+  className?: string;
+}
+
+export const PreferencesSection: React.FC<PreferencesSectionProps> = ({
+  className,
+}) => {
+  const layoutI18n = useLayoutI18nOptional();
+
+  return (
+    <div className={cn('py-0', className)}>
+      {layoutI18n && (
+        <>
+          <div className="flex items-center justify-between py-3">
+            <span className="text-sm">Language</span>
+            <LocaleSwitcherDropdown
+              locale={layoutI18n.locale}
+              locales={layoutI18n.locales}
+              onChange={layoutI18n.onLocaleChange}
+              variant="outline"
+              size="sm"
+              showCode
+              showIcon={false}
+              showFlag
+              showTriggerLabel
+            />
+          </div>
+          <div className="h-px bg-border/60" />
+        </>
+      )}
+
+      <div className="flex items-center justify-between py-3">
+        <span className="text-sm">Theme</span>
+        <ThemeToggle size="default" />
+      </div>
+    </div>
+  );
+};

package/src/layouts/ProfileLayout/components/ProfileHeader.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
+import moment from 'moment';
+import React, { useCallback } from 'react';
+
+import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@djangocfg/ui-core/components';
+
+import { AvatarSection } from './AvatarSection';
+import { useProfileContext } from '../ProfileForm/context';
+import type { ProfileSlots } from '../types';
+
+interface ProfileHeaderProps {
+  slots?: ProfileSlots;
+  enableDeleteAccount?: boolean;
+}
+
+export const ProfileHeader: React.FC<ProfileHeaderProps> = ({ slots, enableDeleteAccount }) => {
+  const { labels, onLogout } = useProfileContext();
+  const { user, logout } = useAuth();
+  const { deleteAccount } = useDeleteAccount();
+  const t = useAppT();
+
+  const handleDeleteAccount = useCallback(async () => {
+    const confirmationWord = t('layouts.profilePage.confirmationWord');
+    const value = await window.dialog.prompt({
+      title: t('layouts.profilePage.deleteAccountTitle'),
+      message: t('layouts.profilePage.deleteAccountDesc'),
+      placeholder: confirmationWord,
+      confirmText: t('layouts.profilePage.deleteAccount'),
+      cancelText: t('layouts.profilePage.cancel'),
+      variant: 'destructive',
+    });
+    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
+    const result = await deleteAccount();
+    if (result.success) logout();
+  }, [t, deleteAccount, logout]);
+
+  if (!user) return null;
+
+  const displayName = user.full_name || user.display_username || user.email;
+  const memberSince = user.date_joined
+    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
+    : null;
+
+  const badge = slots?.headerBadge ?? null;
+  const menuItems = slots?.headerMenuItems ?? null;
+  const headerAfter = slots?.headerAfter ?? null;
+
+  return (
+    <div className="pb-4 md:pb-6 border-b mb-2">
+      <div className="flex items-center gap-3 md:gap-4">
+        <AvatarSection />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
+            {badge}
+          </div>
+          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
+          {memberSince && (
+            <p className="text-xs text-muted-foreground/60 mt-0.5">
+              Member since {memberSince}
+            </p>
+          )}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem onClick={onLogout} className="gap-2">
+              <LogOut className="w-4 h-4" />
+              {labels.signOut}
+            </DropdownMenuItem>
+
+            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
+
+            {enableDeleteAccount && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={handleDeleteAccount}
+                  className="gap-2 text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  {labels.deleteAccount}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {headerAfter && <div className="mt-4">{headerAfter}</div>}
+    </div>
+  );
+};

package/src/layouts/ProfileLayout/components/ProfileTab.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+
+import { EditableField, PreferencesSection, Section } from '.';
+import { useProfileContext } from '../ProfileForm/context';
+
+export const ProfileTab: React.FC = () => {
+  const { labels, onFieldSave } = useProfileContext();
+  const { user } = useAuth();
+  if (!user) return null;
+
+  return (
+    <div className="space-y-6 pt-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6">
+        <Section title={labels.personalInfo}>
+          <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
+          <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
+          <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
+        </Section>
+
+        <Section title={labels.work}>
+          <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
+          <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+        </Section>
+      </div>
+
+      <Section title={labels.preferences ?? 'Preferences'}>
+        <PreferencesSection />
+      </Section>
+    </div>
+  );
+};

package/src/layouts/ProfileLayout/components/{TwoFactorSection.tsx → TwoFactorSection/TwoFactorSection.tsx}

@@ -25,7 +25,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { SetupStepStandalone } from '../../AuthLayout/components/steps/SetupStep';
+import { SetupStepStandalone } from '../../../AuthLayout/components/steps/SetupStep';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types

package/src/layouts/ProfileLayout/components/TwoFactorSection/index.ts

@@ -0,0 +1 @@
+export { TwoFactorSection } from './TwoFactorSection';

package/src/layouts/ProfileLayout/components/index.ts

@@ -1,8 +1,11 @@
 export { ActionButton } from './ActionButton';
+export { ApiKeySection, ApiKeyProvider, useApiKeyContext } from './ApiKeySection';
+export type { ApiKeyLabels } from './ApiKeySection';
 export { AvatarSection } from './AvatarSection';
 export { DeleteAccountSection, DeleteAccountScreen } from './DeleteAccountSection';
 export { EditableField } from './EditableField';
-export { ProfileForm } from './ProfileForm';
+export { PreferencesSection } from './PreferencesSection';
+export { ProfileHeader } from './ProfileHeader';
+export { ProfileTab } from './ProfileTab';
 export { Section } from './Section';
 export { TwoFactorSection } from './TwoFactorSection';
-

package/src/layouts/ProfileLayout/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useProfileTabs } from './useProfileTabs';
+export type { ProfileTabValue, UseProfileTabsOptions } from './useProfileTabs';

package/src/layouts/ProfileLayout/hooks/useProfileTabs.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import { useMemo, useState, useCallback } from 'react';
+
+export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
+
+export interface UseProfileTabsOptions {
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  extraTabValues?: string[];
+  /** Initial active tab. Defaults to `'profile'`. */
+  defaultTab?: ProfileTabValue;
+}
+
+/**
+ * Manages the active profile tab with local React state.
+ *
+ * Falls back to `'profile'` when `defaultTab` is missing or not allowed.
+ *
+ * @example
+ * const { tab, setTab, allowed } = useProfileTabs({ enable2FA: true, defaultTab: 'security' });
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ */
+export function useProfileTabs(options: UseProfileTabsOptions = {}) {
+  const { enable2FA, enableAPIKeys, extraTabValues = [], defaultTab } = options;
+
+  const allowed = useMemo(() => {
+    const base: ProfileTabValue[] = ['profile'];
+    if (enable2FA) base.push('security');
+    if (enableAPIKeys) base.push('api-keys');
+    return [...base, ...extraTabValues] as ProfileTabValue[];
+  }, [enable2FA, enableAPIKeys, extraTabValues]);
+
+  const [tab, setTabState] = useState<ProfileTabValue>(
+    defaultTab && allowed.includes(defaultTab) ? defaultTab : 'profile',
+  );
+
+  const setTab = useCallback(
+    (value: ProfileTabValue) => {
+      if (allowed.includes(value)) {
+        setTabState(value);
+      }
+    },
+    [allowed],
+  );
+
+  return { tab, setTab, allowed };
+}

package/src/layouts/ProfileLayout/index.ts

@@ -1,3 +1,7 @@
-export { ProfileLayout } from './ProfileLayout';
-export type { ProfileLayoutProps, ProfileTab, ProfileSlots } from './ProfileLayout';
-
+export { ProfileForm, useProfileContext } from './ProfileForm';
+export { ProfileProvider } from './ProfileForm/context';
+export { useProfileTabs } from './hooks';
+export { ProfileDialog, useProfileDialogStore } from './ProfileDialog';
+export type { ProfileLabels } from './ProfileForm/context';
+export type { ProfileFormProps, ProfileLayoutProps, ProfileTab, ProfileSlots } from './types';
+export type { ProfileTabValue, UseProfileTabsOptions } from './hooks';

package/src/layouts/ProfileLayout/types.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { ProfileTabValue } from './hooks/useProfileTabs';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Slot + Tab types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ProfileTab {
+  /** Unique key, used as Tabs value */
+  value: string;
+  /** Trigger label */
+  label: React.ReactNode;
+  /** Tab panel content */
+  content: React.ReactNode;
+}
+
+export interface ProfileSlots {
+  /** Extra items inside the ⋯ dropdown, above the separator before Delete */
+  headerMenuItems?: React.ReactNode;
+  /** Rendered next to the user name (e.g. plan badge, role chip) */
+  headerBadge?: React.ReactNode;
+  /** Rendered below the avatar row, above the tabs */
+  headerAfter?: React.ReactNode;
+  /** Rendered below all tab content */
+  footer?: React.ReactNode;
+}
+
+export interface ProfileFormProps {
+  onUnauthenticated?: () => void;
+  title?: string;
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  enableDeleteAccount?: boolean;
+  /** Extra tabs appended after built-in Profile / Security / API Keys tabs */
+  tabs?: ProfileTab[];
+  /** Named slots for additional content */
+  slots?: ProfileSlots;
+  /**
+   * When provided, the active tab is controlled locally (no URL sync).
+   * Useful for dialogs where query-string pollution is undesirable.
+   */
+  defaultTab?: ProfileTabValue;
+}
+
+/** @deprecated Use ProfileFormProps instead */
+export type ProfileLayoutProps = ProfileFormProps;

package/src/layouts/{_components → PublicLayout/components}/UserMenu.tsx

@@ -37,7 +37,7 @@ import React, { useMemo } from 'react';
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 
-import { useLogout } from '../../hooks';
+import { useLogout } from '../../../hooks';
 import {
   Button,
   DropdownMenu,
@@ -53,10 +53,10 @@ import {
   LanguageFlag,
 } from '@djangocfg/ui-core/components';
 
-import { LOCALE_LABELS } from './LocaleSwitcher';
+import { LOCALE_LABELS } from '../../_components/LocaleSwitcher';
 import { UserAvatar } from './UserAvatar';
 
-import type { UserMenuGroup, UserMenuLocaleConfig } from '../types';
+import type { UserMenuGroup, UserMenuLocaleConfig } from '../../types';
 
 export interface UserMenuProps {
   /** Display variant */

package/src/layouts/PublicLayout/components/index.ts

@@ -0,0 +1,4 @@
+export { UserMenu } from './UserMenu';
+export type { UserMenuProps } from './UserMenu';
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps } from './UserAvatar';

package/src/layouts/PublicLayout/footers/DefaultFooter/DefaultFooter.tsx

@@ -6,7 +6,7 @@
 
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
 import { Button } from '@djangocfg/ui-core/components';
@@ -104,7 +104,7 @@ function ThemeModeControl({
   );
 }
 
-export function DefaultFooter({ config }: DefaultFooterProps) {
+function DefaultFooterRaw({ config }: DefaultFooterProps) {
   const variant = config.variant ?? 'full';
   const shellClass = config.shell?.className;
   const brandSlot = config.brand?.slot;
@@ -361,3 +361,13 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
     </>
   );
 }
+
+/**
+ * Memoised footer. Uses reference equality on `config` — the consumer is
+ * expected to stabilise the config object (useMemo / useState). This avoids
+ * deep-comparing large nested config trees while still preventing re-renders
+ * when the same config object is passed through successive parent renders.
+ */
+export const DefaultFooter = memo(DefaultFooterRaw, (prev, next) => {
+  return prev.config === next.config;
+});

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -16,7 +16,7 @@ import React, { type ReactNode } from 'react';
 import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { UserMenu } from '../../../_components/UserMenu';
+import { UserMenu } from '../../components/UserMenu';
 import { NavActionItem, type NavAction } from '../../primitives/NavActionItem';
 import { NavbarShell, type NavbarActionsContext } from '../../shared';
 import type {

package/src/layouts/PublicLayout/primitives/NavActions.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
-import React, { type ReactNode } from 'react';
+import React, { memo, type ReactNode } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
 
-import { UserMenu } from '../../_components/UserMenu';
+import { UserMenu } from '../components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
 import { NavActionItem, type NavAction } from './NavActionItem';
@@ -30,7 +30,7 @@ interface NavActionsProps {
   controlsSlot?: ReactNode;
 }
 
-export function NavActions({
+function NavActionsRaw({
   userMenu,
   mobileMenuOpen,
   onMobileMenuToggle,
@@ -81,3 +81,44 @@ export function NavActions({
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavAction arrays. Compares label, href, variant and
+ * external flag so that CTA pills re-render when their content changes, but
+ * skip on reference churn from parent re-renders.
+ */
+function actionsEqual(a?: NavAction[], b?: NavAction[]): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    return (
+      ai.label === bi.label &&
+      ai.href === bi.href &&
+      ai.variant === bi.variant &&
+      ai.external === bi.external
+    );
+  });
+}
+
+/**
+ * Memoised actions column. Re-renders when:
+ * - mobile menu open state changes,
+ * - actions array content changes (via actionsEqual),
+ * - any slot reference changes.
+ * Pure parent re-renders with identical props are skipped.
+ */
+export const NavActions = memo(NavActionsRaw, (prev, next) => {
+  return (
+    prev.mobileMenuOpen === next.mobileMenuOpen &&
+    prev.onMobileMenuToggle === next.onMobileMenuToggle &&
+    prev.toggleMobileLabel === next.toggleMobileLabel &&
+    prev.forceShowMobileTrigger === next.forceShowMobileTrigger &&
+    prev.userMenu === next.userMenu &&
+    prev.leadingSlot === next.leadingSlot &&
+    prev.trailingSlot === next.trailingSlot &&
+    prev.controlsSlot === next.controlsSlot &&
+    actionsEqual(prev.actions, next.actions)
+  );
+});