@nextsparkjs/theme-default 0.1.0-beta.1 → 0.1.0-beta.101

package/blocks/text-content/component.tsx

@@ -44,7 +44,7 @@ export function TextContentBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -58,21 +58,23 @@ export function TextContentBlock({
             maxWidthClasses[maxWidth],
             alignmentClasses[alignment]
           )}>
-            <h2 className="text-3xl font-bold md:text-4xl">
+            <h2 className="text-3xl font-bold @md:text-4xl">
               {title}
             </h2>
           </div>
         )}
 
         {/* Rich Text Content */}
-        <div
-          className={cn(
-            'prose prose-lg dark:prose-invert',
-            maxWidthClasses[maxWidth],
-            alignmentClasses[alignment]
-          )}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
+        {content && (
+          <div
+            className={cn(
+              'prose prose-lg dark:prose-invert',
+              maxWidthClasses[maxWidth],
+              alignmentClasses[alignment]
+            )}
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
 
         {/* Optional CTA */}
         {cta && (

package/blocks/timeline/component.tsx

@@ -32,7 +32,7 @@ export function TimelineBlock({
 }: TimelineBlockProps) {
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -46,7 +46,7 @@ export function TimelineBlock({
         {(title || subtitle) && (
           <div className="mb-16 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}
@@ -96,10 +96,10 @@ function VerticalTimeline({
     <div className="relative">
       {/* Connector Line */}
       {showConnector && (
-        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden md:block" />
+        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden @md:block" />
       )}
       {showConnector && (
-        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border md:hidden" />
+        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border @md:hidden" />
       )}
 
       {/* Timeline Items */}
@@ -112,27 +112,27 @@ function VerticalTimeline({
               key={index}
               className={cn(
                 'relative flex items-center gap-8',
-                alternating ? 'md:justify-center' : 'md:justify-start md:pl-[50%]',
-                'justify-start pl-16 md:pl-0'
+                alternating ? '@md:justify-center' : '@md:justify-start @md:pl-[50%]',
+                'justify-start pl-16 @md:pl-0'
               )}
             >
               {/* Mobile/Left Content */}
               <div className={cn(
                 'flex-1',
-                alternating && !isLeft && 'md:text-right md:order-1',
-                !alternating && 'md:pl-8'
+                alternating && !isLeft && '@md:text-right @md:order-1',
+                !alternating && '@md:pl-8'
               )}>
                 <TimelineItemContent item={item} variant={variant} align={alternating && !isLeft ? 'right' : 'left'} />
               </div>
 
               {/* Center Dot */}
-              <div className="absolute left-8 md:left-1/2 md:-translate-x-1/2 flex-shrink-0">
+              <div className="absolute left-8 @md:left-1/2 @md:-translate-x-1/2 flex-shrink-0">
                 <TimelineIcon item={item} />
               </div>
 
               {/* Desktop Spacer (for alternating layout) */}
               {alternating && (
-                <div className="hidden md:block flex-1" />
+                <div className="hidden @md:block flex-1" />
               )}
             </div>
           )
@@ -158,7 +158,7 @@ function HorizontalTimeline({
   return (
     <div className="relative">
       {/* Mobile: Vertical Layout */}
-      <div className="md:hidden">
+      <div className="@md:hidden">
         {showConnector && (
           <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border" />
         )}
@@ -175,7 +175,7 @@ function HorizontalTimeline({
       </div>
 
       {/* Desktop: Horizontal Layout */}
-      <div className="hidden md:block overflow-x-auto pb-4">
+      <div className="hidden @md:block overflow-x-auto pb-4">
         <div className="relative min-w-max">
           {/* Connector Line */}
           {showConnector && (

package/blocks/video-hero/component.tsx

@@ -151,13 +151,13 @@ export function VideoHeroBlock({
         {/* Content Overlay */}
         <div className="container relative z-10 mx-auto max-w-4xl text-center px-4 py-20 text-white">
           {title && (
-            <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+            <h1 className="mb-6 text-5xl font-bold leading-tight @md:text-6xl @lg:text-7xl">
               {title}
             </h1>
           )}
 
           {content && (
-            <p className="mb-8 text-xl md:text-2xl opacity-90">
+            <p className="mb-8 text-xl @md:text-2xl opacity-90">
               {content}
             </p>
           )}
@@ -187,17 +187,17 @@ export function VideoHeroBlock({
         data-cy={sel('blocks.videoHero.container')}
       >
         <div className="container mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+          <div className="grid grid-cols-1 @lg:grid-cols-2 gap-8 items-center">
             {/* Text Content */}
             <div className="space-y-6">
               {title && (
-                <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
+                <h1 className="text-4xl font-bold leading-tight @md:text-5xl @lg:text-6xl">
                   {title}
                 </h1>
               )}
 
               {content && (
-                <p className="text-lg md:text-xl text-gray-600">
+                <p className="text-lg @md:text-xl text-gray-600">
                   {content}
                 </p>
               )}
@@ -236,13 +236,13 @@ export function VideoHeroBlock({
         {/* Text Content */}
         <div className="text-center mb-10 space-y-6">
           {title && (
-            <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
+            <h1 className="text-4xl font-bold leading-tight @md:text-5xl @lg:text-6xl">
               {title}
             </h1>
           )}
 
           {content && (
-            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
+            <p className="text-lg @md:text-xl text-gray-600 max-w-3xl mx-auto">
               {content}
             </p>
           )}

package/blocks/video-hero/fields.ts

@@ -28,7 +28,7 @@ const videoHeroContentFields: FieldDefinition[] = [
   {
     name: 'videoThumbnail',
     label: 'Custom Thumbnail',
-    type: 'image',
+    type: 'media-library',
     tab: 'content',
     required: false,
     helpText: 'Optional custom thumbnail shown before video plays (recommended: 1920x1080px)',

package/components/ai-chat/ChatPanel.tsx

@@ -8,7 +8,7 @@ import { MessageInput } from './MessageInput'
 import { MarkdownRenderer } from './MarkdownRenderer'
 import { TypingIndicator } from './TypingIndicator'
 import { ConversationSidebar } from './ConversationSidebar'
-import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+import { sel } from '@nextsparkjs/core/selectors'
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { Bot, User, Loader2, Trash2, ListTodo, Users, FileText, Sparkles, X } from 'lucide-react'
 import type { ConversationInfo } from '../../lib/hooks/useConversations'
@@ -163,7 +163,7 @@ function ChatMessageItem({
 
     return (
         <div
-            data-cy={createCyId(cyPrefix, `message-${message.role}`)}
+            data-cy={sel(message.role === 'user' ? 'common.aiChat.messageUser' : 'common.aiChat.messageAssistant')}
             className={cn(
                 'flex w-full gap-3 p-4',
                 isUser ? 'flex-row-reverse' : 'flex-row'
@@ -351,7 +351,7 @@ export function ChatPanel({
     return (
         <div className="h-[calc(100vh-4rem)] p-4 md:p-6 lg:p-8">
             <Card
-                data-cy={createCyId(cyPrefix, 'panel')}
+                data-cy={sel('common.aiChat.panel')}
                 className={cn(
                     'flex h-full mx-auto overflow-hidden shadow-lg',
                     layoutClass
@@ -408,7 +408,7 @@ export function ChatPanel({
                                 {/* Clear button */}
                                 {header.showClearButton && header.onClear && (
                                     <Button
-                                        data-cy={createCyId(cyPrefix, 'clear-btn')}
+                                        data-cy={sel('common.aiChat.clearBtn')}
                                         variant="ghost"
                                         size="sm"
                                         onClick={header.onClear}
@@ -470,13 +470,13 @@ export function ChatPanel({
                     ) : (
                         /* Messages */
                         <ScrollArea
-                            data-cy={createCyId(cyPrefix, 'message-list')}
+                            data-cy={sel('common.aiChat.messageList')}
                             className="flex-1 p-4"
                         >
                             <div className="flex flex-col gap-4">
                                 {error && (
                                     <div
-                                        data-cy={createCyId(cyPrefix, 'error-message')}
+                                        data-cy={sel('common.aiChat.errorMessage')}
                                         className="p-4 mb-2 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"
                                     >
                                         {error}
@@ -517,7 +517,7 @@ export function ChatPanel({
                                             variant="outline"
                                             size="sm"
                                             onClick={onCancelStream}
-                                            data-cy="chat-cancel-button"
+                                            data-cy={sel('common.aiChat.cancelBtn')}
                                         >
                                             <X className="h-4 w-4 mr-1" />
                                             Stop generating

package/components/ai-chat/Message.tsx

@@ -2,7 +2,7 @@ import { cn } from '@nextsparkjs/core/lib/utils'
 import { Message as MessageType } from '../../lib/hooks/useAiChat'
 import { MarkdownRenderer } from './MarkdownRenderer'
 import { User, Bot } from 'lucide-react'
-import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+import { sel } from '@nextsparkjs/core/selectors'
 
 interface MessageProps {
     message: MessageType
@@ -13,7 +13,7 @@ export function Message({ message }: MessageProps) {
 
     return (
         <div
-            data-cy={createCyId('ai-chat', `message-${message.role}`)}
+            data-cy={sel(message.role === 'user' ? 'common.aiChat.messageUser' : 'common.aiChat.messageAssistant')}
             className={cn(
                 'flex w-full gap-3 p-4',
                 isUser ? 'flex-row-reverse' : 'flex-row'

package/components/ai-chat/MessageInput.tsx

@@ -2,7 +2,7 @@ import { KeyboardEvent } from 'react'
 import { Button } from '@nextsparkjs/core/components/ui/button'
 import { Textarea } from '@nextsparkjs/core/components/ui/textarea'
 import { Send } from 'lucide-react'
-import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+import { sel } from '@nextsparkjs/core/selectors'
 
 interface MessageInputProps {
     value: string
@@ -23,7 +23,7 @@ export function MessageInput({ value, onChange, onSend, isLoading }: MessageInpu
         <div className="p-4 border-t bg-background">
             <div className="flex gap-2">
                 <Textarea
-                    data-cy={createCyId('ai-chat', 'message-input')}
+                    data-cy={sel('common.aiChat.messageInput')}
                     value={value}
                     onChange={(e) => onChange(e.target.value)}
                     onKeyDown={handleKeyDown}
@@ -32,7 +32,7 @@ export function MessageInput({ value, onChange, onSend, isLoading }: MessageInpu
                     disabled={isLoading}
                 />
                 <Button
-                    data-cy={createCyId('ai-chat', 'send-btn')}
+                    data-cy={sel('common.aiChat.sendBtn')}
                     size="icon"
                     onClick={onSend}
                     disabled={!value.trim() || isLoading}

package/components/ai-chat/MessageList.tsx

@@ -3,7 +3,7 @@ import { ScrollArea } from '@nextsparkjs/core/components/ui/scroll-area'
 import { Message as MessageType } from '../../lib/hooks/useAiChat'
 import { Message } from './Message'
 import { TypingIndicator } from './TypingIndicator'
-import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+import { sel } from '@nextsparkjs/core/selectors'
 
 interface MessageListProps {
     messages: MessageType[]
@@ -21,11 +21,11 @@ export function MessageList({ messages, isLoading, error }: MessageListProps) {
     }, [messages, isLoading])
 
     return (
-        <ScrollArea data-cy={createCyId('ai-chat', 'message-list')} className="flex-1 p-4">
+        <ScrollArea data-cy={sel('common.aiChat.messageList')} className="flex-1 p-4">
             <div className="flex flex-col gap-4">
                 {error && (
                     <div
-                        data-cy={createCyId('ai-chat', 'error-message')}
+                        data-cy={sel('common.aiChat.errorMessage')}
                         className="p-4 mb-2 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"
                     >
                         {error}

package/components/ai-chat/TypingIndicator.tsx

@@ -1,8 +1,8 @@
-import { createCyId } from '@nextsparkjs/core/lib/testing-utils'
+import { sel } from '@nextsparkjs/core/selectors'
 
 export function TypingIndicator() {
     return (
-        <div data-cy={createCyId('ai-chat', 'typing-indicator')} className="flex items-center gap-1 p-2">
+        <div data-cy={sel('common.aiChat.typingIndicator')} className="flex items-center gap-1 p-2">
             <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.3s]" />
             <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.15s]" />
             <div className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce" />

package/config/app.config.ts

@@ -34,6 +34,27 @@ export const APP_CONFIG_OVERRIDES = {
     },
   },
 
+  // =============================================================================
+  // AUTHENTICATION CONFIGURATION
+  // =============================================================================
+  /**
+   * Registration modes:
+   * - 'open': Anyone can register (email+password and Google OAuth) - DEFAULT
+   * - 'domain-restricted': Only Google OAuth for specific email domains
+   * - 'invitation-only': Registration only via invitation link
+   */
+  auth: {
+    registration: {
+      mode: 'domain-restricted' as const,
+      allowedDomains: ['nextspark.dev'],
+    },
+    providers: {
+      google: {
+        enabled: true,
+      },
+    },
+  },
+
   // =============================================================================
   // INTERNATIONALIZATION OVERRIDES
   // =============================================================================
@@ -72,17 +93,19 @@ export const APP_CONFIG_OVERRIDES = {
   // =============================================================================
   api: {
     cors: {
-      allowedOrigins: {
+      // Theme-specific CORS origins (extends core defaults, does not replace)
+      // Core already includes: localhost:3000, localhost:5173, and their 127.0.0.1 variants
+      additionalOrigins: {
         development: [
-          'http://localhost:3000',
-          'http://localhost:5173',
-          'http://127.0.0.1:3000',
-          'http://127.0.0.1:5173',
-          // Project specific development origins
+          'http://localhost:8081', // Expo mobile web
+          'http://localhost:8082', // Expo alternate port
+          'http://localhost:19006', // Expo web (legacy)
+          'http://192.168.68.106:8081', // Local network Expo
+          // Add theme-specific development origins here
         ],
         production: [
-          // Add Project production domains
-          // 'https://boilerplate-themoneyteam.xyz',
+          // Add theme-specific production domains
+          // 'https://mobile.boilerplate-themoneyteam.xyz',
         ],
       },
     },
@@ -91,78 +114,51 @@ export const APP_CONFIG_OVERRIDES = {
   // =============================================================================
   // DOCUMENTATION CONFIGURATION
   // =============================================================================
+  /**
+   * Documentation system configuration
+   *
+   * Structure:
+   * - public: User-facing documentation at /docs
+   * - superadmin: Admin documentation at /superadmin/docs
+   *
+   * NOTE: Plugin docs are NOT in the registry - they are for developer reference only (IDE/LLM).
+   */
   docs: {
-    /**
-     * Enable/disable documentation system
-     */
+    /** Enable/disable documentation system */
     enabled: true,
 
-    /**
-     * Public access to documentation
-     * - true: Documentation accessible without authentication
-     * - false: Requires user to be logged in
-     */
-    public: true,
+    /** Make public documentation accessible without authentication */
+    publicAccess: true,
 
-    /**
-     * Enable search functionality in documentation
-     */
+    /** Enable search functionality in documentation */
     searchEnabled: true,
 
-    /**
-     * Show breadcrumbs in documentation pages
-     */
+    /** Show breadcrumbs in documentation pages */
     breadcrumbs: true,
 
     /**
-     * Theme Documentation Configuration
-     * Controls how theme-level documentation appears in the sidebar
+     * Public Documentation Configuration
+     * Controls public-facing documentation at /docs routes
      */
-    theme: {
-      /** Show/hide theme documentation category */
+    public: {
+      /** Show/hide public documentation */
       enabled: true,
-      /** Expand theme category by default on page load */
+      /** Expand sections by default on page load */
       open: true,
-      /** Custom label displayed in sidebar for theme category */
-      label: "Default Theme",
+      /** Custom label displayed in sidebar */
+      label: "Documentation",
     },
 
     /**
-     * Plugins Documentation Configuration
-     * Controls how plugin documentation appears in the sidebar
+     * Superadmin Documentation Configuration
+     * Controls admin documentation at /superadmin/docs routes
      */
-    plugins: {
-      /** Show/hide plugin documentation category */
+    superadmin: {
+      /** Show/hide superadmin documentation */
       enabled: true,
-      /** Expand plugins category by default on page load */
-      open: false,
-      /** Custom label displayed in sidebar for plugins category */
-      label: "Plugins",
+      /** Custom label displayed in sidebar */
+      label: "Admin Docs",
     },
-
-    /**
-     * Core Documentation Configuration
-     * Controls how core framework documentation appears in the sidebar
-     */
-    core: {
-      /** Show/hide core documentation category */
-      enabled: true,
-      /** Expand core category by default on page load */
-      open: true,
-      /** Custom label displayed in sidebar for core category */
-      label: "Core",
-    },
-
-    /**
-     * Additional environment-based check for plugin docs in production
-     * Plugin docs will only show if BOTH conditions are met:
-     * 1. plugins.enabled is true
-     * 2. Either in development OR showPluginsDocsInProd is true
-     *
-     * @deprecated Prefer using plugins.enabled for simpler control
-     * By default plugins documentation is not available in prod environments
-     */
-    showPluginsDocsInProd: false,
   },
 
   // =============================================================================
@@ -358,6 +354,23 @@ export const APP_CONFIG_OVERRIDES = {
     },
   },
 
+  // =============================================================================
+  // MEDIA LIBRARY OVERRIDES
+  // =============================================================================
+  // Uncomment and modify to customize media upload limits and accepted file types.
+  //
+  // media: {
+  //   maxSizeMB: 10,           // General fallback max size
+  //   maxSizeImageMB: 10,      // Max size for image/* files (overrides maxSizeMB)
+  //   maxSizeVideoMB: 50,      // Max size for video/* files (overrides maxSizeMB)
+  //   acceptedTypes: ['image/*', 'video/*', 'application/pdf'],
+  //   allowedMimeTypes: [
+  //     'image/jpeg', 'image/png', 'image/webp',
+  //     'video/mp4', 'video/webm',
+  //     'application/pdf',
+  //   ],
+  // },
+
   // =============================================================================
   // DEV KEYRING - MOVED TO dev.config.ts
   // =============================================================================

package/config/dashboard.config.ts

@@ -94,6 +94,20 @@ export const DASHBOARD_CONFIG = {
       enabled: true,
     },
 
+    /**
+     * Settings menu dropdown (gear icon)
+     */
+    settingsMenu: {
+      enabled: true,
+      links: [
+        {
+          label: 'navigation.patterns',
+          href: '/dashboard/patterns',
+          icon: 'layers',
+        },
+      ],
+    },
+
     /**
      * User menu dropdown
      */

package/config/features.config.ts

@@ -91,6 +91,16 @@ export default defineFeatures({
     docs: ['18-page-builder/*'],
   },
 
+  patterns: {
+    name: 'Patterns',
+    description: 'Reusable block patterns for page builder',
+    category: 'content',
+    icon: 'grid',
+    entities: ['patterns'],
+    permissions: ['patterns.*'],
+    docs: [],
+  },
+
   // ===========================================================================
   // CORE FEATURES
   // Platform-level features that exist in all themes

package/config/permissions.config.ts

@@ -110,6 +110,17 @@ export const PERMISSIONS_CONFIG_OVERRIDES: ThemePermissionsConfig = {
       { action: 'delete', label: 'Delete Pages', description: 'Can delete pages', roles: ['owner', 'admin'], dangerous: true },
       { action: 'publish', label: 'Publish Pages', description: 'Can publish pages to make them public', roles: ['owner', 'admin'] },
     ],
+
+    // ------------------------------------------
+    // PATTERNS
+    // ------------------------------------------
+    patterns: [
+      { action: 'create', label: 'Create Patterns', description: 'Can create reusable patterns', roles: ['owner', 'admin'] },
+      { action: 'read', label: 'View Patterns', description: 'Can view pattern details', roles: ['owner', 'admin', 'member', 'viewer'] },
+      { action: 'list', label: 'List Patterns', description: 'Can see the patterns list', roles: ['owner', 'admin', 'member', 'viewer'] },
+      { action: 'update', label: 'Edit Patterns', description: 'Can modify patterns', roles: ['owner', 'admin'] },
+      { action: 'delete', label: 'Delete Patterns', description: 'Can delete patterns', roles: ['owner', 'admin'], dangerous: true },
+    ],
   },
 
   // ==========================================
@@ -188,12 +199,26 @@ export const PERMISSIONS_CONFIG_OVERRIDES: ThemePermissionsConfig = {
     },
 
     // MEDIA MANAGEMENT
+    {
+      action: 'media.read',
+      label: 'View Media',
+      description: 'Can browse and view media files in the library',
+      category: 'Media',
+      roles: ['owner', 'admin', 'editor', 'member', 'viewer'],
+    },
     {
       action: 'media.upload',
       label: 'Upload Media',
       description: 'Can upload images, videos, and other media files',
       category: 'Media',
-      roles: ['owner', 'admin', 'editor', 'member'],
+      roles: ['owner', 'admin', 'editor'],
+    },
+    {
+      action: 'media.update',
+      label: 'Edit Media',
+      description: 'Can edit media metadata, tags, and captions',
+      category: 'Media',
+      roles: ['owner', 'admin', 'editor'],
     },
     {
       action: 'media.delete',

package/docs/{01-overview → public/01-overview}/01-introduction.md

@@ -1,3 +1,8 @@
+---
+title: Introduction
+description: Overview of the Default Theme and its key features for NextSpark applications.
+---
+
 # Default Theme Introduction
 
 ## Overview

package/docs/{01-overview → public/01-overview}/02-customization.md

@@ -1,3 +1,8 @@
+---
+title: Customization
+description: Learn how to customize colors, typography, components, and functionality in the default theme.
+---
+
 # Theme Customization
 
 ## Introduction

package/docs/{02-features → public/02-features}/03-tasks-entity.md

@@ -1,3 +1,8 @@
+---
+title: Tasks Entity
+description: Complete guide to the Tasks entity implementation with CRUD operations, metadata, and API access.
+---
+
 # Tasks Entity
 
 ## Introduction

package/docs/{03-ai → public/03-ai}/01-overview.md

@@ -1,3 +1,8 @@
+---
+title: AI Assistant Overview
+description: Learn about the AI-powered assistant features and multi-agent architecture.
+---
+
 # AI Assistant - Overview
 
 This theme includes an AI-powered assistant that helps users manage tasks, customers, and pages through natural language.

package/docs/{03-ai → public/03-ai}/02-customization.md

@@ -1,3 +1,8 @@
+---
+title: AI Customization
+description: Guide to customizing and extending the AI assistant with custom tools and handlers.
+---
+
 # AI Assistant - Customization
 
 This guide covers how to customize and extend the AI assistant for your specific needs.