@djangocfg/layouts 2.1.426 → 2.1.428

package/src/layouts/SettingsLayout/store.ts

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * SettingsDialog store.
+ *
+ * Holds only transient dialog state: whether it's open and which section is
+ * active. Section *definitions* are NOT stored here — they're passed as props
+ * to `<SettingsDialog />` so they can include live JSX/handlers from the host
+ * app. Consumers open the dialog imperatively via `useSettingsDialog()` or
+ * declaratively via the URL hash (see `useSettingsUrl`).
+ *
+ * Mirrors the established `useProfileDialogStore` pattern so both dialogs feel
+ * identical to wire up. ProfileLayout's store stays separate and untouched.
+ */
+
+import { create } from 'zustand';
+
+interface SettingsDialogState {
+  /** Whether the dialog is visible. */
+  isOpen: boolean;
+  /**
+   * Active section id, or null to mean "fall back to the first section".
+   * Kept separate from isOpen so a deep-link can preset the section before open.
+   */
+  activeSection: string | null;
+  /** Open the dialog, optionally on a specific section. */
+  open: (sectionId?: string) => void;
+  /** Close the dialog. Leaves activeSection as-is (cheap to reopen same spot). */
+  close: () => void;
+  /** Toggle visibility. */
+  toggle: () => void;
+  /** Switch the active section (no-op on open state). */
+  setSection: (sectionId: string) => void;
+}
+
+export const useSettingsDialogStore = create<SettingsDialogState>((set) => ({
+  isOpen: false,
+  activeSection: null,
+  open: (sectionId) =>
+    set((state) => ({
+      isOpen: true,
+      activeSection: sectionId ?? state.activeSection,
+    })),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+  setSection: (sectionId) => set({ activeSection: sectionId }),
+}));

package/src/layouts/SettingsLayout/types.ts

@@ -0,0 +1,107 @@
+/**
+ * SettingsLayout — public types.
+ *
+ * A settings surface modeled on the Claude.ai modal: a left section-nav rail
+ * (grouped, searchable) and a right scrollable detail panel, rendered as a
+ * dialog and/or inline page. Sections are plain config objects so apps extend
+ * the surface by appending to an array — no JSX registry, no context plumbing.
+ */
+
+import type * as React from 'react';
+
+/**
+ * A logical grouping of sections in the nav rail. Groups render as a labelled
+ * cluster (e.g. "Account", "Workspace"). Unknown / omitted groups fall into the
+ * implicit default group, which renders first with no header.
+ */
+export interface SettingsGroup {
+  /** Stable key, referenced by `SettingsSection.group`. */
+  id: string;
+  /** Header shown above the group's items. Omit for an unlabelled cluster. */
+  label?: React.ReactNode;
+  /** Sort order among groups (ascending). Defaults to declaration order. */
+  order?: number;
+}
+
+/**
+ * One settings section = one nav entry + one detail panel.
+ *
+ * Mirrors the old `ProfileTab` shape (`{ value, label, content }`) so migrating
+ * a ProfileLayout tab into a SettingsLayout section is a near-rename.
+ */
+export interface SettingsSection {
+  /** Unique id. Used as the active key and the URL hash segment (`#settings/<id>`). */
+  id: string;
+  /** Nav label. */
+  label: React.ReactNode;
+  /** Optional icon (lucide component or any SVG-ish element type). */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Group id this section belongs to. Falls into the default group when omitted. */
+  group?: string;
+  /** Heading shown at the top of the detail panel. Defaults to `label`. */
+  title?: React.ReactNode;
+  /** Sub-heading under the panel title. */
+  description?: React.ReactNode;
+  /** The panel body. Rendered only while this section is active (Radix unmounts closed dialogs). */
+  content: React.ReactNode;
+  /** Extra terms the search box matches against, beyond the label. */
+  keywords?: string[];
+  /** Sort order within the group (ascending). Defaults to declaration order. */
+  order?: number;
+  /** Optional trailing accessory in the nav row (badge, chevron, count). */
+  badge?: React.ReactNode;
+  /** Hide from the rail without removing (e.g. gated by plan). Still reachable by id. */
+  hidden?: boolean;
+}
+
+/** Toggle flags for the built-in sections shipped by SettingsLayout. */
+export interface SettingsBuiltins {
+  /** Account / profile fields + preferences. Default: true. */
+  account?: boolean;
+  /** Two-factor / security. Default: false (opt-in, needs API support). */
+  security?: boolean;
+  /** API keys. Default: true. */
+  apiKeys?: boolean;
+}
+
+/** Shared configuration consumed by both the dialog and the inline form. */
+export interface SettingsContent {
+  /** Dialog/page title. Default: "Settings". */
+  title?: React.ReactNode;
+  /** App-provided sections, merged after the enabled built-ins. */
+  sections?: SettingsSection[];
+  /** Group definitions for ordering/labelling. Optional — sections can name ad-hoc groups. */
+  groups?: SettingsGroup[];
+  /** Which built-in sections to include. */
+  builtins?: SettingsBuiltins;
+  /** Section id to open first. Defaults to the first visible section. */
+  initialSection?: string;
+  /** Show the search box above the nav rail. Default: true. */
+  searchable?: boolean;
+  /** Allow account deletion in the account section. Default: true. */
+  enableDeleteAccount?: boolean;
+}
+
+/** Props for the inline (non-dialog) `<SettingsForm />`. */
+export interface SettingsFormProps extends SettingsContent {
+  /** Controlled active section. When set, the form does not own selection state. */
+  activeSection?: string;
+  /** Called when the user picks a section (controlled mode). */
+  onSectionChange?: (id: string) => void;
+  /** Fired when an unauthenticated user reaches the surface. */
+  onUnauthenticated?: () => void;
+  /** Drop the outer card chrome (border/rounding) — used when embedded in a dialog. */
+  bare?: boolean;
+  className?: string;
+}
+
+/** Props for the globally-mounted `<SettingsDialog />`. */
+export interface SettingsDialogProps extends SettingsContent {
+  /**
+   * Sync open/close + active section with the URL hash (`#settings/<id>`).
+   * Lets users deep-link and the back button close. Default: true.
+   */
+  syncUrl?: boolean;
+  /** Hash namespace; the segment before the section id. Default: "settings". */
+  urlKey?: string;
+}

package/src/layouts/index.ts

@@ -27,7 +27,6 @@ export * from './AppLayout';
 export * from './PublicLayout';
 export * from './PrivateLayout';
 export * from './AuthLayout';
-export * from './AdminLayout';
 
 // Additional layouts
-export * from './ProfileLayout';
+export * from './SettingsLayout';

package/src/layouts/types/index.ts

@@ -22,7 +22,6 @@ export type {
 
 // External provider configs (re-export for convenience)
 export type { AnalyticsConfig } from '../../snippets/Analytics/types';
-export type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 export type {
   ErrorBoundaryConfig,
   ErrorTrackingConfig,

package/src/layouts/types/layout.types.ts

@@ -9,7 +9,6 @@ import type { AuthConfig } from '@djangocfg/api/auth';
 
 // Import provider configs from their modules
 import type { AnalyticsConfig } from '../../snippets/Analytics/types';
-import type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
 
 /**
@@ -62,9 +61,6 @@ export interface BaseLayoutProps {
   /** Error boundary configuration (from components/errors, enabled by default) */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** PWA Install configuration (from snippets/PWAInstall) */
-  pwaInstall?: PwaInstallConfig;
-
   /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
   monitor?: MonitorConfig;
 

package/src/utils/logger.ts

@@ -11,15 +11,20 @@ import { createConsola } from 'consola';
  * - 3: log, info
  * - 4: debug
  * - 5: trace, verbose
+ *
+ * Level is driven by the global runtime controller in @djangocfg/api so admins
+ * get verbose logs (even in prod) and regular users keep a clean console.
  */
-import { isDev as isDevelopment } from '@djangocfg/ui-core/lib';
-const isStaticBuild = process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
-const showLogs = isDevelopment || isStaticBuild;
+import { getLogLevel, onLogLevelChange } from '@djangocfg/api';
 
 export const logger = createConsola({
-  level: showLogs ? 4 : 1,  // dev: debug, production: errors only
+  level: getLogLevel(),
 }).withTag('layouts');
 
+onLogLevelChange((level) => {
+  logger.level = level;
+});
+
 // ─────────────────────────────────────────────────────────────────────────
 // Module-specific loggers
 // ─────────────────────────────────────────────────────────────────────────

package/src/layouts/AdminLayout/AdminLayout.tsx

@@ -1,57 +0,0 @@
-/**
- * Admin Layout
- * 
- * Layout for admin dashboard pages
- * Import and use directly with props - no complex configs needed!
- * 
- * @example
- * ```tsx
- * import { AdminLayout } from '@djangocfg/layouts';
- * 
- * <AdminLayout
- *   sidebar={{
- *     items: [
- *       { label: 'Overview', href: '/admin', icon: 'LayoutDashboard' },
- *       { label: 'Users', href: '/admin/users', icon: 'Users' }
- *     ]
- *   }}
- *   header={{
- *     title: 'Admin Dashboard',
- *     groups: [
- *       {
- *         title: 'Admin',
- *         items: [
- *           { label: 'Profile', href: '/profile' },
- *           { label: 'Settings', href: '/settings' }
- *         ]
- *       }
- *     ],
- *     authPath: '/auth'
- *   }}
- * >
- *   {children}
- * </AdminLayout>
- * ```
- */
-
-'use client';
-
-import { ReactNode } from 'react';
-
-import { PrivateLayout } from '../PrivateLayout';
-import type { PrivateLayoutProps } from '../PrivateLayout';
-
-export interface AdminLayoutProps extends PrivateLayoutProps {
-  children: ReactNode;
-}
-
-/**
- * Admin Layout Component
- * 
- * Wrapper around PrivateLayout with admin-specific defaults
- * Same API as PrivateLayout - just a convenience export
- */
-export function AdminLayout(props: AdminLayoutProps) {
-  return <PrivateLayout {...props} />;
-}
-

package/src/layouts/AdminLayout/index.ts

@@ -1,7 +0,0 @@
-/**
- * Admin Layout exports
- */
-
-export { AdminLayout } from './AdminLayout';
-export type { AdminLayoutProps } from './AdminLayout';
-