@nextsparkjs/theme-default 0.1.0-beta.17 → 0.1.0-beta.171

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,42 @@ 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,
+      },
+    },
+    /**
+     * Whether Better Auth automatically sends the verification email on signup.
+     *
+     * - `true` (default): users get a "Verify Your Email Address" link email
+     *   immediately when they sign up via `/api/auth/sign-up/email`.
+     * - `false`: suppress the automatic email. Use this when your project
+     *   verifies email ownership through other means (OTP code, invitation
+     *   token, claim-account flow). The `sendVerificationEmail` function
+     *   remains available — you can still trigger link-based verification
+     *   explicitly when you need to.
+     *
+     * `requireEmailVerification: true` is enforced regardless: users with
+     * `emailVerified: false` cannot sign in.
+     */
+    sendVerificationEmailOnSignup: true,
+  },
+
   // =============================================================================
   // INTERNATIONALIZATION OVERRIDES
   // =============================================================================
@@ -72,17 +108,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 +129,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",
-    },
-
-    /**
-     * Plugins Documentation Configuration
-     * Controls how plugin documentation appears in the sidebar
-     */
-    plugins: {
-      /** Show/hide plugin documentation category */
-      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: "Documentation",
     },
 
     /**
-     * Core Documentation Configuration
-     * Controls how core framework documentation appears in the sidebar
+     * Superadmin Documentation Configuration
+     * Controls admin documentation at /superadmin/docs routes
      */
-    core: {
-      /** Show/hide core documentation category */
+    superadmin: {
+      /** Show/hide superadmin documentation */
       enabled: true,
-      /** Expand core category by default on page load */
-      open: true,
-      /** Custom label displayed in sidebar for core category */
-      label: "Core",
+      /** Custom label displayed in sidebar */
+      label: "Admin Docs",
     },
-
-    /**
-     * 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 +369,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/billing.config.ts

@@ -163,8 +163,7 @@ export const billingConfig: BillingConfig = {
         file_uploads: 100,
         webhooks_count: 0,
       },
-      stripePriceIdMonthly: null,
-      stripePriceIdYearly: null,
+      providerPriceIds: { monthly: null, yearly: null },
     },
 
     // Starter Plan - For growing teams
@@ -194,8 +193,7 @@ export const billingConfig: BillingConfig = {
         file_uploads: 500,
         webhooks_count: 3,
       },
-      stripePriceIdMonthly: 'price_starter_monthly',
-      stripePriceIdYearly: 'price_starter_yearly',
+      providerPriceIds: { monthly: 'price_1TAIW6QetGjJvG5hzCCpMwXT', yearly: 'price_1TAIWuQetGjJvG5hkI3aJYTw' },
     },
 
     // Pro Plan - For professional teams
@@ -230,8 +228,7 @@ export const billingConfig: BillingConfig = {
         file_uploads: 2000,
         webhooks_count: 10,
       },
-      stripePriceIdMonthly: 'price_pro_monthly',
-      stripePriceIdYearly: 'price_pro_yearly',
+      providerPriceIds: { monthly: 'price_1TAIZMQetGjJvG5hqDh3dbCv', yearly: 'price_1TAIZMQetGjJvG5haLm28w3H' },
     },
 
     // Business Plan - For larger organizations
@@ -270,8 +267,7 @@ export const billingConfig: BillingConfig = {
         file_uploads: 10000,
         webhooks_count: 50,
       },
-      stripePriceIdMonthly: 'price_business_monthly',
-      stripePriceIdYearly: 'price_business_yearly',
+      providerPriceIds: { monthly: 'price_1TAIaNQetGjJvG5hn6fgXx1n', yearly: 'price_1TAIacQetGjJvG5hVQO6i2UL' },
     },
 
     // Enterprise Plan - Custom unlimited plan
@@ -292,8 +288,7 @@ export const billingConfig: BillingConfig = {
         file_uploads: -1,
         webhooks_count: -1,
       },
-      stripePriceIdMonthly: null,
-      stripePriceIdYearly: null,
+      providerPriceIds: { monthly: null, yearly: null },
     },
   ],
 

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

@@ -7,7 +7,7 @@
  * - roles: Custom roles beyond core (owner, admin, member, viewer)
  * - teams: Team-level permissions (team.view, team.edit, etc.)
  * - entities: Entity CRUD permissions (customers, tasks, etc.)
- * - features: Theme-specific feature permissions (page-builder, blog, media)
+ * - features: Theme-specific feature permissions (page-builder, blog)
  *
  * All sections use unified format: { action: '...', roles: [...] }
  *
@@ -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 },
+    ],
   },
 
   // ==========================================
@@ -187,24 +198,18 @@ export const PERMISSIONS_CONFIG_OVERRIDES: ThemePermissionsConfig = {
       roles: ['owner', 'admin'],
     },
 
-    // MEDIA MANAGEMENT
-    {
-      action: 'media.upload',
-      label: 'Upload Media',
-      description: 'Can upload images, videos, and other media files',
-      category: 'Media',
-      roles: ['owner', 'admin', 'editor', 'member'],
-    },
-    {
-      action: 'media.delete',
-      label: 'Delete Media',
-      description: 'Can permanently delete media files',
-      category: 'Media',
-      roles: ['owner', 'admin'],
-      dangerous: true,
-    },
   ],
 
+  // ==========================================
+  // CORE PERMISSION OVERRIDES
+  // ==========================================
+  // Extend core media permissions with the 'editor' custom role
+  overrides: {
+    'media.read': { roles: ['owner', 'admin', 'editor', 'member', 'viewer'] },
+    'media.upload': { roles: ['owner', 'admin', 'editor'] },
+    'media.update': { roles: ['owner', 'admin', 'editor'] },
+  },
+
   // ==========================================
   // UI SECTIONS
   // ==========================================
@@ -233,12 +238,6 @@ export const PERMISSIONS_CONFIG_OVERRIDES: ThemePermissionsConfig = {
       description: 'Blog publishing and management features',
       categories: ['Blog'],
     },
-    {
-      id: 'media',
-      label: 'Media',
-      description: 'Media library management',
-      categories: ['Media'],
-    },
   ],
 }
 

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