@djangocfg/layouts 2.1.426 → 2.1.428

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,520 +0,0 @@
-/**
- * AppLayout - Smart Layout Router with All Providers
- *
- * Automatically detects route type and applies the correct layout
- * Includes all necessary providers: Theme, Auth, Analytics, Centrifugo, Error Tracking
- * Simple props-based configuration - no complex configs needed!
- *
- * @example
- * ```tsx
- * import { AppLayout } from '@djangocfg/layouts';
- *
- * <AppLayout
- *   publicLayout={{
- *     component: PublicLayout,
- *     enabledPath: ['/', '/about', '/contact']
- *   }}
- *   privateLayout={{
- *     component: DashboardLayout,
- *     enabledPath: '/dashboard'
- *   }}
- *   adminLayout={{
- *     component: AdminLayout,
- *     enabledPath: '/admin'
- *   }}
- *   // Paths that render without any layout wrapper (fullscreen pages)
- *   noLayoutPaths={['/private/terminal', '/embed']}
- * >
- *   {children}
- * </AppLayout>
- * ```
- */
-
-'use client';
-
-import React, { ReactNode, memo, useMemo } from 'react';
-
-import { ClientOnly, Suspense } from '../../components/core';
-import { usePathnameWithoutLocale } from '../../hooks';
-import { matchesPath } from '../../utils/pathMatcher';
-import { BaseApp } from './BaseApp';
-import { useLayoutI18nOptional } from './LayoutI18nProvider';
-import { ForcedThemeProvider, ThemeOverride, resolveForcedTheme } from '@djangocfg/ui-core/theme';
-
-import type {
-  ThemeConfig,
-  AnalyticsConfig,
-  CentrifugoConfig,
-  ErrorTrackingConfig,
-  ErrorBoundaryConfig,
-  SWRConfigOptions,
-  PwaInstallConfig,
-  DebugConfig,
-  I18nLayoutConfig,
-} from '../types';
-export type { I18nLayoutConfig } from '../types';
-import type { AuthConfig } from '@djangocfg/api/auth';
-import type { MonitorConfig } from '@djangocfg/monitor';
-import type { ThemeOverrideRule } from '@djangocfg/ui-core/theme';
-
-import type { FloatingNavbarConfig } from '../PublicLayout/navbars/FloatingNavbar';
-import type { DefaultFooterConfig } from '../PublicLayout/footers/DefaultFooter/types';
-
-export type LayoutMode = 'public' | 'private' | 'admin';
-
-/** `<main>` spacing in `PublicLayout` — offset from navbar / padding before footer. */
-export type PublicMainTopSpacing = 'auto' | 'none';
-
-/** Bottom padding of `<main>` above the footer. `compact` = less than `auto`; `none` = no extra gap. */
-export type PublicMainBottomSpacing = 'auto' | 'none' | 'compact';
-
-/** Shared marketing chrome defaults for `FloatingNavbar` / `DefaultFooter`, merged into your public layout. */
-export interface AppLayoutPublicChrome {
-  navbar?: Partial<FloatingNavbarConfig>;
-  footer?: Partial<DefaultFooterConfig>;
-  /**
-   * Passed through to `PublicLayout` as `contentTopSpacing` / `contentBottomSpacing`.
-   * Use `bottomSpacing: 'none'` when the page (or footer) should sit flush with no default gap.
-   */
-  main?: {
-    topSpacing?: PublicMainTopSpacing;
-    bottomSpacing?: PublicMainBottomSpacing;
-  };
-  /**
-   * Full-viewport background layer rendered behind the navbar and all page content.
-   * Pass a `fixed inset-0 -z-10 pointer-events-none` element — it covers the whole
-   * viewport (including the sticky navbar area) without affecting layout flow.
-   *
-   * Set per-page via `AppLayout publicChrome` or directly on `PublicSiteLayout`.
-   */
-  backgroundSlot?: ReactNode;
-}
-
-function mergePartialNavbar(
-  base?: Partial<FloatingNavbarConfig>,
-  overlay?: Partial<FloatingNavbarConfig>
-): Partial<FloatingNavbarConfig> | undefined {
-  if (!base && !overlay) return undefined;
-  const merged: Partial<FloatingNavbarConfig> = { ...base, ...overlay };
-  if (base?.shell || overlay?.shell) {
-    merged.shell = { ...base?.shell, ...overlay?.shell };
-  }
-  return merged;
-}
-
-function mergePartialFooter(
-  base?: Partial<DefaultFooterConfig>,
-  overlay?: Partial<DefaultFooterConfig>
-): Partial<DefaultFooterConfig> | undefined {
-  if (!base && !overlay) return undefined;
-  const merged: Partial<DefaultFooterConfig> = { ...base, ...overlay };
-  if (base?.shell || overlay?.shell) merged.shell = { ...base?.shell, ...overlay?.shell };
-  if (base?.brand || overlay?.brand) merged.brand = { ...base?.brand, ...overlay?.brand };
-  if (base?.menus || overlay?.menus) merged.menus = { ...base?.menus, ...overlay?.menus };
-  if (base?.meta || overlay?.meta) merged.meta = { ...base?.meta, ...overlay?.meta };
-  if (base?.social || overlay?.social) merged.social = { ...base?.social, ...overlay?.social };
-  if (base?.controls || overlay?.controls) {
-    merged.controls = { ...base?.controls, ...overlay?.controls };
-  }
-  return merged;
-}
-
-/**
- * Deep-merge public chrome: root `publicChrome` first, then `layouts.publicChrome` overlays.
- */
-export function mergeAppLayoutPublicChrome(
-  root?: AppLayoutPublicChrome,
-  fromLayouts?: AppLayoutPublicChrome
-): AppLayoutPublicChrome | undefined {
-  if (!root && !fromLayouts) return undefined;
-  const navbar = mergePartialNavbar(root?.navbar, fromLayouts?.navbar);
-  const footer = mergePartialFooter(root?.footer, fromLayouts?.footer);
-  const main =
-    root?.main || fromLayouts?.main
-      ? { ...root?.main, ...fromLayouts?.main }
-      : undefined;
-  // backgroundSlot: layouts-level overrides root (more specific wins)
-  const backgroundSlot = fromLayouts?.backgroundSlot ?? root?.backgroundSlot;
-  if (!navbar && !footer && !main && !backgroundSlot) return undefined;
-  return { navbar, footer, ...(main ? { main } : {}), ...(backgroundSlot ? { backgroundSlot } : {}) };
-}
-
-/**
- * Determine layout mode from pathname and enabledPath props
- */
-function determineLayoutMode(
-  pathname: string,
-  adminLayout?: { component: any; enabledPath?: string | string[] },
-  privateLayout?: { component: any; enabledPath?: string | string[] },
-  publicLayout?: { component: any; enabledPath?: string | string[] }
-): LayoutMode {
-  // Check in order: admin -> private -> public
-  if (adminLayout && matchesPath(pathname, adminLayout.enabledPath)) return 'admin';
-  if (privateLayout && matchesPath(pathname, privateLayout.enabledPath)) return 'private';
-  if (publicLayout && matchesPath(pathname, publicLayout.enabledPath)) return 'public';
-
-  // Default: if no enabledPath specified, use public as fallback
-  return 'public';
-}
-
-/**
- * Props passed to every layout component (`public` / `private` / `admin`).
- * Use `publicChrome` to pass defaults for `FloatingNavbar` / `DefaultFooter` from `AppLayout`.
- *
- * Locale plumbing is no longer threaded as a prop — layouts read it from
- * `useLayoutI18nOptional()` (mounted in `BaseApp`).
- */
-export interface AppLayoutLayoutComponentProps {
-  children: ReactNode;
-  publicChrome?: AppLayoutPublicChrome;
-}
-
-/** Layout configuration with component and enabled paths */
-interface LayoutConfig {
-  component: React.ComponentType<AppLayoutLayoutComponentProps>;
-  enabledPath?: string | string[];
-}
-
-export interface AppLayoutLayoutsConfig {
-  public?: LayoutConfig;
-  private?: LayoutConfig;
-  admin?: LayoutConfig;
-  noLayoutPaths?: string | string[];
-  authPath?: string;
-  /** Merged over root `publicChrome` on `AppLayout` (see `mergeAppLayoutPublicChrome`). */
-  publicChrome?: AppLayoutPublicChrome;
-  /**
-   * Per-route theme overrides. Each rule uses the same matcher as `enabledPath`
-   * (string, string[], or glob with `*` / `**`). When the pathname matches a
-   * rule, the forced theme is applied via `next-themes`; when navigation leaves
-   * the matched path, the user's previous theme choice is restored.
-   *
-   * Rules are evaluated top-to-bottom — first match wins.
-   *
-   * @example
-   * ```ts
-   * themeOverrides: [
-   *   { path: '/', theme: 'dark' },                // marketing landing always dark
-   *   { path: ['/legal', '/legal/**'], theme: 'light' }, // legal always light
-   * ]
-   * ```
-   */
-  themeOverrides?: ThemeOverrideRule[];
-}
-
-export interface AppLayoutBaseAppConfig {
-  project?: string;
-  theme?: ThemeConfig;
-  auth?: AuthConfig;
-  analytics?: AnalyticsConfig;
-  centrifugo?: CentrifugoConfig;
-  errorTracking?: ErrorTrackingConfig;
-  swr?: SWRConfigOptions;
-  errorBoundary?: ErrorBoundaryConfig;
-  pwaInstall?: PwaInstallConfig;
-  monitor?: MonitorConfig;
-  debug?: DebugConfig;
-}
-
-export interface AppLayoutProps {
-  children: ReactNode;
-
-  /** Compact routing/layout config */
-  layouts?: AppLayoutLayoutsConfig;
-  /** Compact providers/base-app config */
-  baseApp?: AppLayoutBaseAppConfig;
-
-  /** Project name — used as default for monitor.project and debug panel title */
-  project?: string;
-
-  /** Public layout component with enabled paths */
-  publicLayout?: LayoutConfig;
-
-  /** Private layout component with enabled paths */
-  privateLayout?: LayoutConfig;
-
-  /** Admin layout component with enabled paths */
-  adminLayout?: LayoutConfig;
-
-  /**
-   * Paths that render without any layout wrapper (fullscreen pages)
-   * Providers (auth, theme, etc.) are still applied, only layout is skipped
-   * Useful for: fullscreen terminal, embed pages, print views
-   */
-  noLayoutPaths?: string | string[];
-
-  /**
-   * Auth path prefix. When set, all routes starting with this path
-   * (and their localized variants like /ru/auth, /en/auth) render without
-   * any layout wrapper — fullscreen, no navbar/sidebar.
-   * @default '/auth'
-   * @example authPath="/auth" → skips layout for /auth, /auth/*, /ru/auth, /ru/auth/*, etc.
-   */
-  authPath?: string;
-
-  /** Theme configuration */
-  theme?: ThemeConfig;
-
-  /** Auth configuration */
-  auth?: AuthConfig;
-
-  /** Analytics configuration */
-  analytics?: AnalyticsConfig;
-
-  /** Centrifugo configuration */
-  centrifugo?: CentrifugoConfig;
-
-  /** Error tracking configuration */
-  errorTracking?: ErrorTrackingConfig;
-
-  /** SWR configuration */
-  swr?: SWRConfigOptions;
-
-  /** Error boundary configuration */
-  errorBoundary?: ErrorBoundaryConfig;
-
-  /** PWA Install configuration */
-  pwaInstall?: PwaInstallConfig;
-
-  /** i18n configuration for locale switching (applies to all layouts) */
-  i18n?: I18nLayoutConfig;
-
-  /** Base layer for `publicChrome`; `layouts.publicChrome` overlays this. */
-  publicChrome?: AppLayoutPublicChrome;
-
-  /**
-   * Per-route theme overrides. Shortcut for `layouts.themeOverrides`.
-   * See `AppLayoutLayoutsConfig.themeOverrides` for the full docs.
-   */
-  themeOverrides?: ThemeOverrideRule[];
-
-  /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
-  monitor?: MonitorConfig;
-
-  debug?: DebugConfig;
-}
-
-interface AppLayoutContentProps {
-  children: ReactNode;
-  publicLayout?: LayoutConfig;
-  privateLayout?: LayoutConfig;
-  adminLayout?: LayoutConfig;
-  noLayoutPaths?: string | string[];
-  authPath?: string;
-  publicChrome?: AppLayoutPublicChrome;
-  themeOverrides?: ThemeOverrideRule[];
-}
-
-/**
- * AppLayout Content - Renders layout with all providers
- *
- * SSR is only enabled for publicLayout.
- * Private and admin layouts are wrapped in ClientOnly to avoid hydration mismatch.
- */
-function AppLayoutContentRaw({
-  children,
-  publicLayout,
-  privateLayout,
-  adminLayout,
-  noLayoutPaths,
-  authPath = '/auth',
-  publicChrome,
-  themeOverrides,
-}: AppLayoutContentProps) {
-  // Use pathname without locale prefix for route matching. The current
-  // locale comes from the LayoutI18nProvider mounted by BaseApp — passing
-  // it explicitly avoids the regex misfiring on `/ui`, `/ko`, etc.
-  const i18n = useLayoutI18nOptional();
-  const pathname = usePathnameWithoutLocale(i18n?.locale);
-
-  // Merge authPath into noLayoutPaths — auth pages are always fullscreen
-  const effectiveNoLayoutPaths = useMemo(() => {
-    const base = noLayoutPaths
-      ? (Array.isArray(noLayoutPaths) ? noLayoutPaths : [noLayoutPaths])
-      : []
-    return [...base, authPath]
-  }, [noLayoutPaths, authPath])
-
-  // Check if current path should skip layout
-  const shouldSkipLayout = useMemo(
-    () => matchesPath(pathname, effectiveNoLayoutPaths),
-    [pathname, effectiveNoLayoutPaths]
-  );
-
-  const layoutMode = useMemo(
-    () => determineLayoutMode(
-      pathname,
-      adminLayout,
-      privateLayout,
-      publicLayout
-    ),
-    [pathname, adminLayout, privateLayout, publicLayout]
-  );
-
-  // Prepare everything above the JSX — no inline conditionals in return().
-  const hasThemeOverrides = Boolean(themeOverrides && themeOverrides.length > 0);
-  const forcedTheme = hasThemeOverrides
-    ? resolveForcedTheme(pathname, themeOverrides)
-    : null;
-  const themeOverrideElement = hasThemeOverrides
-    ? <ThemeOverride pathname={pathname} rules={themeOverrides!} />
-    : null;
-
-  // Memoize layout element so it doesn't re-render on every pathname change
-  // that doesn't affect layout mode (e.g. /dashboard/a → /dashboard/b).
-  const layoutElement = useMemo(() => {
-    // Skip layout for noLayoutPaths (fullscreen pages)
-    if (shouldSkipLayout) {
-      return children;
-    }
-
-    switch (layoutMode) {
-      case 'admin':
-        if (!adminLayout && privateLayout) {
-          return (
-            <ClientOnly>
-              <Suspense>
-                <privateLayout.component publicChrome={publicChrome}>
-                  {children}
-                </privateLayout.component>
-              </Suspense>
-            </ClientOnly>
-          );
-        }
-        if (!adminLayout) {
-          return children;
-        }
-        return (
-          <ClientOnly>
-            <Suspense>
-              <adminLayout.component publicChrome={publicChrome}>
-                {children}
-              </adminLayout.component>
-            </Suspense>
-          </ClientOnly>
-        );
-
-      case 'private':
-        if (!privateLayout) {
-          if (publicLayout) {
-            return (
-              <publicLayout.component publicChrome={publicChrome}>
-                {children}
-              </publicLayout.component>
-            );
-          }
-          return children;
-        }
-        return (
-          <ClientOnly>
-            <Suspense>
-              <privateLayout.component publicChrome={publicChrome}>
-                {children}
-              </privateLayout.component>
-            </Suspense>
-          </ClientOnly>
-        );
-
-      case 'public':
-      default:
-        // Public layout renders with SSR (no ClientOnly wrapper)
-        if (!publicLayout) {
-          return children;
-        }
-        return (
-          <publicLayout.component publicChrome={publicChrome}>
-            {children}
-          </publicLayout.component>
-        );
-    }
-  }, [shouldSkipLayout, layoutMode, publicLayout, privateLayout, adminLayout, publicChrome, children]);
-
-  // No providers here - all providers now in BaseApp
-  return (
-    <ForcedThemeProvider value={forcedTheme}>
-      {themeOverrideElement}
-      {layoutElement}
-    </ForcedThemeProvider>
-  );
-}
-
-/**
- * Memoised layout content wrapper. Re-renders only when layout config props
- * change (publicLayout, privateLayout, adminLayout, noLayoutPaths, etc.).
- * The `children` prop is compared by reference — the consumer should wrap
- * page content in React.memo or use stable element references to avoid
- * unnecessary layout re-mounts on every parent render.
- */
-const AppLayoutContent = memo(AppLayoutContentRaw, (prev, next) => {
-  return (
-    prev.children === next.children &&
-    prev.publicLayout === next.publicLayout &&
-    prev.privateLayout === next.privateLayout &&
-    prev.adminLayout === next.adminLayout &&
-    prev.noLayoutPaths === next.noLayoutPaths &&
-    prev.authPath === next.authPath &&
-    prev.publicChrome === next.publicChrome &&
-    prev.themeOverrides === next.themeOverrides
-  );
-});
-
-/**
- * AppLayout - Main Component with All Providers
- */
-export function AppLayout(props: AppLayoutProps) {
-  const layoutsConfig = props.layouts;
-  const baseAppConfig = props.baseApp;
-
-  const publicLayout = layoutsConfig?.public ?? props.publicLayout;
-  const privateLayout = layoutsConfig?.private ?? props.privateLayout;
-  const adminLayout = layoutsConfig?.admin ?? props.adminLayout;
-  const noLayoutPaths = layoutsConfig?.noLayoutPaths ?? props.noLayoutPaths;
-  const authPath = layoutsConfig?.authPath ?? props.authPath;
-  const publicChrome = mergeAppLayoutPublicChrome(props.publicChrome, layoutsConfig?.publicChrome);
-  const themeOverrides = layoutsConfig?.themeOverrides ?? props.themeOverrides;
-
-  const {
-    i18n,
-    children,
-  } = props;
-
-  const project = baseAppConfig?.project ?? props.project;
-  const theme = baseAppConfig?.theme ?? props.theme;
-  const auth = baseAppConfig?.auth ?? props.auth;
-  const analytics = baseAppConfig?.analytics ?? props.analytics;
-  const centrifugo = baseAppConfig?.centrifugo ?? props.centrifugo;
-  const errorTracking = baseAppConfig?.errorTracking ?? props.errorTracking;
-  const errorBoundary = baseAppConfig?.errorBoundary ?? props.errorBoundary;
-  const swr = baseAppConfig?.swr ?? props.swr;
-  const pwaInstall = baseAppConfig?.pwaInstall ?? props.pwaInstall;
-  const monitor = baseAppConfig?.monitor ?? props.monitor;
-  const debug = baseAppConfig?.debug ?? props.debug;
-
-  return (
-    <BaseApp
-      project={project}
-      theme={theme}
-      auth={auth}
-      analytics={analytics}
-      centrifugo={centrifugo}
-      errorTracking={errorTracking}
-      errorBoundary={errorBoundary}
-      swr={swr}
-      pwaInstall={pwaInstall}
-      monitor={monitor}
-      debug={debug}
-      i18n={i18n}
-    >
-      <AppLayoutContent
-        children={children}
-        publicLayout={publicLayout}
-        privateLayout={privateLayout}
-        adminLayout={adminLayout}
-        noLayoutPaths={noLayoutPaths}
-        authPath={authPath}
-        publicChrome={publicChrome}
-        themeOverrides={themeOverrides}
-      />
-    </BaseApp>
-  );
-}

package/src/layouts/ProfileLayout/ProfileDialog/ProfileDialog.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@djangocfg/ui-core/components';
-
-import { ProfileForm } from '../ProfileForm';
-import { useProfileDialogStore } from './store';
-
-export interface ProfileDialogProps {
-  title?: string;
-}
-
-export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
-  const {
-    isOpen,
-    close,
-    initialTab,
-    tabs,
-    slots,
-    enable2FA,
-    enableAPIKeys,
-    enableDeleteAccount,
-    title: storeTitle,
-  } = useProfileDialogStore();
-
-  // Title precedence: explicit dialog prop > value passed to open() > ProfileForm default.
-  const resolvedTitle = title ?? storeTitle;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Profile</DialogTitle>
-        </DialogHeader>
-        {/* Undefined fields fall through to ProfileForm's own defaults
-          * (e.g. enableAPIKeys defaults to true), so this stays backward
-          * compatible with bare open() / open({ initialTab }). */}
-        <ProfileForm
-          title={resolvedTitle}
-          defaultTab={initialTab}
-          tabs={tabs}
-          slots={slots}
-          enable2FA={enable2FA}
-          enableAPIKeys={enableAPIKeys}
-          enableDeleteAccount={enableDeleteAccount}
-        />
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,4 +0,0 @@
-export { ProfileDialog } from './ProfileDialog';
-export type { ProfileDialogProps } from './ProfileDialog';
-export { useProfileDialogStore } from './store';
-export type { ProfileDialogContent } from './store';

package/src/layouts/ProfileLayout/ProfileDialog/store.ts

@@ -1,51 +0,0 @@
-import { create } from 'zustand';
-
-import type { ProfileTabValueOrCustom } from '../hooks/useProfileTabs';
-import type { ProfileSlots, ProfileTab } from '../types';
-
-/**
- * Content the dialog renders into <ProfileForm>. All optional — anything
- * omitted in `open()` falls back to ProfileForm's own default. Lets any caller
- * open the profile dialog with custom tabs/slots/flags in one line.
- */
-export interface ProfileDialogContent {
-  initialTab?: ProfileTabValueOrCustom;
-  tabs?: ProfileTab[];
-  slots?: ProfileSlots;
-  enable2FA?: boolean;
-  enableAPIKeys?: boolean;
-  enableDeleteAccount?: boolean;
-  title?: string;
-}
-
-interface ProfileDialogState extends ProfileDialogContent {
-  isOpen: boolean;
-  open: (options?: ProfileDialogContent) => void;
-  close: () => void;
-  toggle: () => void;
-}
-
-/** Content fields reset to undefined on close (keeps `isOpen` separate). */
-const EMPTY_CONTENT: Required<{ [K in keyof ProfileDialogContent]: undefined }> = {
-  initialTab: undefined,
-  tabs: undefined,
-  slots: undefined,
-  enable2FA: undefined,
-  enableAPIKeys: undefined,
-  enableDeleteAccount: undefined,
-  title: undefined,
-};
-
-export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
-  isOpen: false,
-  ...EMPTY_CONTENT,
-  open: (options) =>
-    set({
-      isOpen: true,
-      // Replace (not merge) content so a previous open()'s tabs/flags don't leak.
-      ...EMPTY_CONTENT,
-      ...options,
-    }),
-  close: () => set({ isOpen: false, ...EMPTY_CONTENT }),
-  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
-}));