@donotdev/cli 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/cli",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Command-line interface for DoNotDev Framework",
   "type": "module",
   "private": false,

package/templates/app-demo/index.html.example

@@ -4,6 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>DoNotDev Components Demo</title>
+  
+  <!-- ✅ PERFORMANCE: Critical font preloads (loads before CSS) -->
+  <link rel="preload" href="/fonts/Inter-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  
   <style>
     body { 
       margin: 0; 

package/templates/app-demo/src/App.tsx.example

@@ -1,17 +1,35 @@
-// apps/demo/src/App.tsx
+/**
+ * @fileoverview Main application component
+ * @description Root application component with configuration-driven architecture
+ * @version 0.0.4
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
 
-import { BrowserRouter } from 'react-router-dom';
-import { TooltipProvider, Toaster } from '@donotdev/components';
+import { ViteAppProviders } from '@donotdev/ui/vite';
 
-import { Routes } from './Routes';
+import { appConfig } from './config/app';
 
+/**
+ * Main application component
+ *
+ * Configuration-driven architecture with smart defaults.
+ * Layout preset comes from appConfig.preset (configured in config/app.ts).
+ * Routes are automatically discovered from src/pages/*Page.tsx files.
+ *
+ * Note: HomePage.tsx in src/pages/ is automatically used for the root route "/"
+ *
+ * @version 0.0.4
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
 export function App() {
   return (
-    <BrowserRouter>
-      <TooltipProvider>
-        <Routes />
-        <Toaster />
-      </TooltipProvider>
-    </BrowserRouter>
+    <ViteAppProviders
+      config={appConfig}
+      layout={{
+        breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
+      }}
+    />
   );
 }

package/templates/app-demo/src/config/app.ts.example

@@ -0,0 +1,68 @@
+/**
+ * @fileoverview Application configuration
+ * @description Defines application metadata and feature flags
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+
+import type { AppConfig } from '@donotdev/core';
+
+/**
+ * Application name constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_NAME = '{{appName}}';
+
+/**
+ * Application short name constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_SHORT_NAME = '{{appShortName}}';
+
+/**
+ * Application description constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_DESCRIPTION = 'DoNotDev Components Demo';
+
+/**
+ * Application configuration object
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const appConfig: AppConfig = {
+  app: {
+    name: APP_NAME,
+    shortName: APP_SHORT_NAME,
+    description: APP_DESCRIPTION,
+  },
+  preset: 'landing', // 'landing' | 'admin' | 'moolti' | 'docs' | 'blog' | 'game' | 'plain'
+  features: {
+    // Optional: Enable debug tools in development
+    // debug: true,
+  },
+  // Optional: Override query cache defaults
+  // Framework defaults (infinite cache - cost-optimized):
+  // - staleTime: Infinity (data never becomes stale)
+  // - refetchOnWindowFocus: false (no auto-refetch on focus)
+  // - refetchOnReconnect: false (no auto-refetch on reconnect)
+  // This minimizes API costs and is ideal for single-admin apps with manual refresh buttons.
+  // Uncomment below to enable auto-refetch behavior:
+  // query: {
+  //   staleTime: 1000 * 60 * 5,  // 5 minutes - data becomes stale after 5 minutes
+  //   refetchOnWindowFocus: true, // Automatically refetch when window regains focus
+  //   refetchOnReconnect: true,   // Automatically refetch when network reconnects
+  // },
+};

package/templates/app-next/src/app/ClientLayout.tsx.example

@@ -6,7 +6,6 @@ import { appConfig } from '../config/app';
 
 interface ClientLayoutProps {
   children: React.ReactNode;
-  serverCookies?: string;
 }
 
 /**
@@ -17,13 +16,14 @@ interface ClientLayoutProps {
  * Layout prop is for breadcrumbs and slot customizations only.
  * CSS variable overrides should be done in themes.css.
  * Override only what you need - everything else has sensible defaults.
+ * 
+ * Theme detection happens client-side to avoid Next.js 16 race condition.
  */
-export function ClientLayout({ children, serverCookies }: ClientLayoutProps) {
+export function ClientLayout({ children }: ClientLayoutProps) {
   return (
     <div id="root">
       <NextJsAppProviders
         config={appConfig}
-        serverCookies={serverCookies}
         layout={{
           breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
           header: {
@@ -37,3 +37,4 @@ export function ClientLayout({ children, serverCookies }: ClientLayoutProps) {
     </div>
   );
 }
+

package/templates/app-next/src/app/layout.tsx.example

@@ -1,13 +1,12 @@
 import type { Metadata } from 'next';
-import { cookies } from 'next/headers';
 import '../globals.css';
 import { ClientLayout } from './ClientLayout';
 
 /**
  * Framework fonts are loaded via CSS @font-face rules in dndev.css
  *
- * The framework CSS includes optimized @font-face declarations for Roboto
- * with proper unicode-range subsetting for performance.
+ * The framework CSS includes optimized @font-face declarations for Inter
+ * (default) and Roboto (optional) with proper unicode-range subsetting for performance.
  * Fonts are copied from framework to public/fonts/ by AssetDiscovery during build.
  */
 
@@ -16,36 +15,29 @@ export const metadata: Metadata = {
   description: 'Next.js site using DNDev framework',
 };
 
-export default async function RootLayout({
+/**
+ * Root layout for Next.js App Router
+ * 
+ * Theme detection happens client-side via ClientLayout to avoid
+ * Next.js 16 + Turbopack race condition with async layouts.
+ * Brief FOUC possible on first load, but prevents build-manifest.json errors.
+ */
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  /**
-   * SSR: Read theme from cookies to apply correct theme class to HTML
-   *
-   * This ensures the server-rendered HTML has the correct theme class,
-   * preventing FOUC (Flash of Unstyled Content) when client hydrates.
-   *
-   * Flow:
-   * 1. Server reads cookie → applies theme class to <html>/<body>
-   * 2. NextJsStoresInitializer hydrates store from cookie
-   * 3. Client hydrates → Zustand persist matches server state
-   * 4. setAvailableThemes() ensures DOM matches persisted theme
-   */
-  const cookieStore = await cookies();
-  const themeCookie = cookieStore.get('dndev-theme');
-  const themeClass = themeCookie?.value || 'light';
-
   return (
-    <html lang="en" className={`dndev-design-tokens ${themeClass}`}>
+    <html
+      lang="en"
+      className="dndev-design-tokens light"
+      suppressHydrationWarning
+    >
       <head>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       </head>
-      <body className={themeClass}>
-        <ClientLayout serverCookies={cookieStore.toString()}>
-          {children}
-        </ClientLayout>
+      <body className="light">
+        <ClientLayout>{children}</ClientLayout>
       </body>
     </html>
   );

package/templates/app-next/src/config/app.ts.example

@@ -1,75 +1,102 @@
 /**
- * @fileoverview Application configuration
- * @description Defines application metadata and feature flags
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
+ * @fileoverview Application Configuration
+ *
+ * THIS FILE IS YOUR MAIN CONFIGURATION. Update the values below.
+ *
+ * QUICK START:
+ * 1. Set APP_NAME and APP_SHORT_NAME
+ * 2. Choose your preset (see guide below)
+ * 3. Configure footer links
+ * 4. Run `bun dev` - everything else is automatic
  */
 
 import type { AppConfig } from '@donotdev/core';
 
-/**
- * Application name constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const APP_NAME = '{{appName}}';
+// ============================================================================
+// APP IDENTITY - Update these values
+// ============================================================================
 
-/**
- * Application short name constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
+export const APP_NAME = '{{appName}}';
 export const APP_SHORT_NAME = '{{appShortName}}';
-
-/**
- * Application description constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
 export const APP_DESCRIPTION = 'Built with DoNotDev Framework';
 
-/**
- * Application configuration object
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
+// ============================================================================
+// MAIN CONFIGURATION
+// ============================================================================
+
 export const appConfig: AppConfig = {
   app: {
     name: APP_NAME,
     shortName: APP_SHORT_NAME,
     description: APP_DESCRIPTION,
-    // Optional: Configure footer legal links
-    // Remove any links you don't need
+    // url: 'https://yourapp.com', // Uncomment for production
+
+    // Footer legal links - remove any you don't need
     footer: {
       legalLinks: [
         { path: '#cookie-settings', label: 'footer.legal.cookieSettings' },
         { path: '/legal/privacy', label: 'footer.legal.privacyPolicy' },
         { path: '/legal/terms', label: 'footer.legal.termsOfService' },
-        // Add more links as needed:
-        // { path: '/legal/legal-notice', label: 'footer.legal.legalNotice' },
-        // { path: '/license', label: 'License' },
+        // { path: '/legal/notice', label: 'footer.legal.legalNotice' },
       ],
     },
   },
-  preset: 'docs', // 'landing' | 'admin' | 'moolti' | 'docs' | 'blog' | 'game' | 'plain'
+
+  // ==========================================================================
+  // PRESET GUIDE - Choose your layout
+  // ==========================================================================
+  //
+  // 'landing'  → Marketing site. Full-width sections, centered content, no sidebar.
+  //              Best for: Homepage, product pages, pricing, landing pages.
+  //
+  // 'admin'    → Dashboard app. Collapsible sidebar, header with user menu.
+  //              Best for: Admin panels, CRM, internal tools, CRUD apps.
+  //
+  // 'moolti'   → Multi-panel. Left sidebar nav, optional right context sidebar.
+  //              Best for: Complex apps with nested navigation, settings panels.
+  //
+  // 'docs'     → Documentation. Left sidebar TOC, right sidebar on-page nav.
+  //              Best for: Documentation sites, knowledge bases, help centers.
+  //
+  // 'blog'     → Blog layout. Wide content area, optional category sidebar.
+  //              Best for: Blog, news, articles, content-heavy sites.
+  //
+  // 'game'     → Fullscreen. Minimal chrome, focus on content area.
+  //              Best for: Games, immersive experiences, presentations.
+  //
+  // 'plain'    → No layout. Just your pages, you handle everything.
+  //              Best for: Custom layouts, embedded widgets, special cases.
+  //
+  preset: 'docs',
+
+  // ==========================================================================
+  // FEATURES - Uncomment to enable
+  // ==========================================================================
   features: {
-    // Optional: Enable debug tools in development
-    // debug: true,
+    // debug: true, // Enable debug tools in development
   },
-  // Optional: Override auth routes
+
+  // ==========================================================================
+  // AUTH CONFIG - Uncomment to customize
+  // ==========================================================================
   // auth: {
-  //   authRoute: '/signin',
-  //   roleRoute: '/403',
-  //   tierRoute: '/pricing',
+  //   authRoute: '/signin',        // Redirect when auth required
+  //   roleRoute: '/403',           // Redirect when role insufficient
+  //   tierRoute: '/pricing',       // Redirect when subscription required
+  //   profilePath: '/profile',     // Profile page path (undefined to hide)
+  //   authMenuItems: [             // Custom menu items for logged-in users
+  //     { path: '/dashboard', label: 'Dashboard' },
+  //   ],
   // },
-};
 
+  // ==========================================================================
+  // QUERY CACHE - Uncomment to enable auto-refetch
+  // ==========================================================================
+  // Default: Infinite cache (cost-optimized, manual refresh)
+  // Uncomment for auto-refetch behavior:
+  // query: {
+  //   staleTime: 1000 * 60 * 5,    // 5 minutes
+  //   refetchOnWindowFocus: true,
+  //   refetchOnReconnect: true,
+  // },
+};

package/templates/app-next/src/globals.css.example

@@ -6,10 +6,13 @@
 /**
  * Font configuration
  * 
- * Uses --font-roboto CSS variable from next/font/local (defined in layout.tsx).
- * Next.js automatically handles font preloading and optimization.
- */
-:root {
-  --font-sans: var(--font-roboto, 'Roboto', sans-serif);
-  --font-family: var(--font-sans);
-} 
+ * Framework defaults to Inter (defined in @donotdev/components/styles/variables.css).
+ * Fonts are loaded via CSS @font-face rules in @donotdev/ui/assets/fonts/fonts.css
+ * and copied to public/fonts/ by AssetDiscovery during build.
+ * 
+ * To override, uncomment and customize:
+ * :root {
+ *   --font-sans: 'YourFont', sans-serif;
+ *   --font-family: var(--font-sans);
+ * }
+ */ 

package/templates/app-next/src/locales/dndev_en.json.example

@@ -496,6 +496,10 @@
     "copied": "Copied!",
     "copyCodeToClipboard": "Copy code to clipboard"
   },
+  "video": {
+    "clickToWatch": "Click to watch video",
+    "watchVideo": "Watch Video"
+  },
   "inspector": {
     "pageSource": "Page Source",
     "inspectPageSourceCode": "Inspect page source code"
@@ -512,5 +516,69 @@
     "goHome": "Go Home",
     "goBack": "Go Back",
     "contactSupport": "If the problem persists, please contact support."
+  },
+  "redirectOverlay": {
+    "phases": {
+      "connecting": "Connecting to secure server...",
+      "preparing": "Preparing your session...",
+      "redirecting": "Redirecting...",
+      "timeout": "Taking longer than expected..."
+    },
+    "cancel": "Cancel",
+    "doNotRefresh": "Please do not refresh or press back",
+    "default": {
+      "title": "Redirecting",
+      "message": "Please wait while we redirect you...",
+      "subtitle": "This may take a moment",
+      "ariaLabel": "Redirecting, please wait"
+    },
+    "stripe-checkout": {
+      "title": "Redirecting to Stripe",
+      "message": "Initializing secure payment...",
+      "subtitle": "This may take a moment on first load",
+      "ariaLabel": "Preparing secure checkout, please wait"
+    },
+    "stripe-portal": {
+      "title": "Redirecting to Stripe",
+      "message": "Opening billing portal...",
+      "subtitle": "Manage your subscription and invoices",
+      "ariaLabel": "Opening billing portal, please wait"
+    },
+    "oauth-google": {
+      "title": "Signing in with Google",
+      "message": "Connecting to Google...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Google, please wait"
+    },
+    "oauth-github": {
+      "title": "Signing in with GitHub",
+      "message": "Connecting to GitHub...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with GitHub, please wait"
+    },
+    "oauth-apple": {
+      "title": "Signing in with Apple",
+      "message": "Connecting to Apple...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Apple, please wait"
+    },
+    "oauth-microsoft": {
+      "title": "Signing in with Microsoft",
+      "message": "Connecting to Microsoft...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Microsoft, please wait"
+    },
+    "oauth-facebook": {
+      "title": "Signing in with Facebook",
+      "message": "Connecting to Facebook...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Facebook, please wait"
+    },
+    "auth-email-link": {
+      "title": "Sending verification",
+      "message": "Preparing your verification link...",
+      "subtitle": "Check your email inbox",
+      "ariaLabel": "Sending verification email, please wait"
+    }
   }
 }

package/templates/app-next/src/pages/locales/example_en.json.example

@@ -0,0 +1,5 @@
+{
+  "title": "Example Page",
+  "description": "Example page locale file that is dynamically loaded on demand only"
+}
+

package/templates/app-vite/index.html.example

@@ -16,6 +16,9 @@
   <!-- ✅ PWA: Manifest link (if exists) -->
   <link rel="manifest" href="/manifest.json" />
   
+  <!-- ✅ PERFORMANCE: Load fonts early to avoid preload warnings -->
+  <link rel="stylesheet" href="/fonts/fonts.css" />
+  
   <!-- ✅ PERFORMANCE: Preconnect to external domains (OAuth providers) -->
   <!-- GitHub OAuth -->
   <link rel="preconnect" href="https://github.com">
@@ -34,9 +37,13 @@
   <!-- ✅ PERFORMANCE: Critical CSS inlined here by build -->
   <style>
     /* Critical above-the-fold styles */
+    html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
     body { 
-      margin: 0; 
-      font-family: var(--font-family, ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco, 'Liberation Mono', monospace);
+      font-family: 'Inter', var(--font-family, ui-sans-serif, system-ui, -apple-system, sans-serif);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
@@ -52,54 +59,85 @@
     /* Critical shell loader styles - pure CSS, instant render */
     #shell-loader { 
       position: fixed; 
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      inset: 0;
+      background: #000000; 
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       opacity: 1;
       transition: opacity 0.3s ease-out;
+      will-change: opacity;
+      /* Isolate from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
     }
     #shell-loader.shell-loader--fading {
       opacity: 0;
+      pointer-events: none;
     }
     .shell-loader__content {
       text-align: center;
       color: white;
-      font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco, 'Liberation Mono', monospace !important;
-      font-size: 2.4em;
-      font-weight: 500;
-      line-height: 1.8;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      width: 100%;
+      max-width: 500px;
+      /* Prevent layout shifts from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      line-height: 1.2;
     }
     .shell-loader__brand {
       display: block;
+      font-size: clamp(3rem, 10vw, 5rem); 
+      font-weight: 800;
+      letter-spacing: -0.05em;
+      margin: 0 0 1rem 0;
+      padding: 0;
+      box-sizing: border-box;
     }
+    /* ECG Waveform Animation - stroke-dasharray (performant, cross-browser, standard SVG technique) */
     .shell-loader__dots {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .shell-loader__dots span {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: white;
-      animation: blink 1.4s infinite;
+      display: block;
+      width: 300px;
+      height: 60px;
+      margin: 0 auto;
+      padding: 0;
+      box-sizing: border-box;
     }
-    .shell-loader__dots span:nth-child(1) { animation-delay: 0s; }
-    .shell-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
-    .shell-loader__dots span:nth-child(3) { animation-delay: 0.4s; }
-    .shell-loader__content > :last-child {
+    .shell-loader__dots svg {
+      width: 100%;
+      height: 100%;
       display: block;
     }
-    @keyframes blink {
-      0%, 80%, 100% { opacity: 0.3; }
-      40% { opacity: 1; }
+    .shell-loader__dots path {
+      stroke: #667eea;
+      stroke-width: 3;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 400;
+      stroke-dashoffset: 400;
+      animation: ecg-draw 2s linear infinite;
+    }
+    @keyframes ecg-draw {
+      0% { 
+        stroke-dashoffset: 400;
+        opacity: 0;
+      }
+      10% { 
+        opacity: 1;
+      }
+      70% { 
+        stroke-dashoffset: 0;
+        opacity: 1;
+      }
+      90%, 100% { 
+        stroke-dashoffset: 0;
+        opacity: 0;
+      }
     }
   </style>
 </head>
@@ -110,11 +148,10 @@
     <div class="shell-loader__content">
       <span class="shell-loader__brand">DoNotDev</span>
       <span class="shell-loader__dots">
-        <span></span>
-        <span></span>
-        <span></span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="xMidYMid meet">
+          <path d="M0,30 L100,30 L110,20 L120,30 L130,30 L140,5 L150,55 L160,30 L175,30 L190,20 L205,30 L300,30" />
+        </svg>
       </span>
-      <span>is loading</span>
     </div>
   </div>
   
@@ -124,4 +161,4 @@
   <!-- ✅ PERFORMANCE: Module script with proper attributes -->
   <script type="module" src="/src/main.tsx"></script>
 </body>
-</html>
+</html>