@donotdev/cli 0.0.4 → 0.0.6

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,56 @@
+/**
+ * @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,
+  },
+};

package/templates/app-demo/src/pages/components/DemoLayout.tsx.example

@@ -49,7 +49,7 @@ export function DemoLayout({
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
-  const isDesktop = useMediaQuery('(min-width: 1024px)');
+  const isLaptop = useMediaQuery('(min-width: 1024px)');
 
   const handleBack = () => {
     if (location.pathname === '/full') {
@@ -140,11 +140,11 @@ export function DemoLayout({
   return (
     <Grid
       className="dndev-h-screen dndev-w-full dndev-overflow-hidden"
-      templateColumns={isDesktop ? '280px 1fr' : '1fr'}
-      areas={isDesktop ? 'sidebar main' : 'main'}
+      templateColumns={isLaptop ? '280px 1fr' : '1fr'}
+      areas={isLaptop ? 'sidebar main' : 'main'}
       gap="none"
     >
-      {isDesktop && (
+      {isLaptop && (
         <GridArea
           name="sidebar"
           style={{
@@ -224,7 +224,7 @@ export function DemoLayout({
             {/* Right side: Theme Toggle + Mobile Menu */}
             <Stack direction="row" gap="medium" justify="end" align="center">
               <ThemeToggle />
-              {!isDesktop && (
+              {!isLaptop && (
                 <Sheet
                   open={isMobileMenuOpen}
                   onOpenChange={setIsMobileMenuOpen}

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,15 +16,16 @@ 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' | false
+          breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
           header: {
             // end: () => <YourHeaderActions />,
           },
@@ -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/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

@@ -30,6 +30,9 @@
   <title>Loading...</title>
   <meta name="description" content="Modern web application powered by DoNotDev" />
   
+  <!-- ✅ PERFORMANCE: Critical font preloads (loads before CSS) -->
+  <!-- Only preload fonts with font-display: swap (not optional) -->
+  <!-- Example: <link rel="preload" href="/fonts/YourFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -->
 
   <!-- ✅ PERFORMANCE: Critical CSS inlined here by build -->
   <style>

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

@@ -29,7 +29,7 @@ export function App() {
     <ViteAppProviders
       config={appConfig}
       layout={{
-        breadcrumbs: 'smart', // 'smart' | 'always' | 'never' | false
+        breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
         header: {
           // end: () => <YourHeaderActions />,
         },

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

@@ -3,9 +3,17 @@
 
 @import './themes.css';
 
-/* Override framework's default font to use Roboto */
-:root {
-  --font-sans: 'Roboto', sans-serif;
-  --font-mono: 'Roboto Mono', monospace;
-  --font-family: var(--font-sans);
-} 
+/**
+ * Font configuration
+ * 
+ * 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-mono: 'YourMonoFont', monospace;
+ *   --font-family: var(--font-sans);
+ * }
+ */ 

package/templates/app-vite/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/functions-firebase/README.md.example

@@ -2,6 +2,31 @@
 
 This directory contains the Firebase Functions for the {{APP_NAME}} app, generated using the DoNotDev framework's scaffolding system.
 
+## ⚠️ CRITICAL: Import Rules
+
+**Functions run on Node.js - you MUST use `/server` imports or your function will crash on deploy.**
+
+```typescript
+// ✅ CORRECT - Functions MUST use /server imports
+import { getFirebaseAdminAuth } from '@donotdev/firebase/server';
+import { getFirebaseAdminFirestore } from '@donotdev/firebase/server';
+import { handleError } from '@donotdev/core/server';
+
+// ❌ WRONG - This will crash on deploy (pulls in React/client code)
+import { getAuth } from '@donotdev/firebase';
+import { getFirestore } from '@donotdev/firebase';
+import { handleError } from '@donotdev/core';
+```
+
+**Why?** Functions run in Node.js, not the browser. Client imports (`@donotdev/firebase`) include React and browser-only code that will crash your function.
+
+**Rule:** Always use `/server` suffix for:
+- `@donotdev/firebase/server` (not `@donotdev/firebase`)
+- `@donotdev/core/server` (not `@donotdev/core`)
+- `@donotdev/utils/server` (not `@donotdev/utils`)
+
+---
+
 ## Structure
 
 ```

package/templates/functions-firebase/tsconfig.json.example

@@ -1,18 +1,8 @@
 {
+  "extends": "../../../tsconfig.functions.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "lib": ["ES2022"],
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "noUncheckedIndexedAccess": true,
-    "types": ["node"],
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "outDir": "./lib",
     "rootDir": "./src",
     "declaration": true,

package/templates/functions-vercel/tsconfig.json.example

@@ -1,18 +1,6 @@
 {
+  "extends": "../../../tsconfig.functions.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "lib": ["ES2022"],
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "noUncheckedIndexedAccess": true,
-    "types": ["node"],
     "outDir": "./lib",
     "rootDir": "./src",
     "declaration": true,

package/templates/root-consumer/firebase.json.example

@@ -31,7 +31,7 @@
           },
           {
             "key": "Content-Security-Policy",
-            "value": "default-src 'self'; script-src 'self' https://accounts.google.com https://apis.google.com https://www.google.com https://www.gstatic.com; connect-src 'self' http://localhost:* ws://localhost:* https://accounts.google.com https://apis.google.com https://www.googleapis.com https://identitytoolkit.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com https://{{YOUR_FIREBASE_PROJECT_ID}}.firebaseio.com https://{{YOUR_REGION}}-{{YOUR_FIREBASE_PROJECT_ID}}.cloudfunctions.net https://*.a.run.app https://{{YOUR_FIREBASE_PROJECT_ID}}.firebasestorage.app https://recaptchaenterprise.googleapis.com https://content-firebaseappcheck.googleapis.com https://firebaseappcheck.googleapis.com https://www.google.com https://github.com https://api.github.com https://api.stripe.com https://checkout.stripe.com; img-src 'self' data: https: http://localhost:* https://avatars.githubusercontent.com https://lh3.googleusercontent.com https://{{YOUR_FIREBASE_PROJECT_ID}}.firebasestorage.app; frame-src 'self' http://localhost:* https://accounts.google.com https://checkout.stripe.com https://js.stripe.com https://www.google.com https://recaptcha.google.com; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; form-action 'self' http://localhost:* https://accounts.google.com https://github.com https://checkout.stripe.com"
+            "value": "default-src 'self'; script-src 'self' https://accounts.google.com https://apis.google.com https://www.google.com https://www.gstatic.com; connect-src 'self' http://localhost:* ws://localhost:* https://accounts.google.com https://apis.google.com https://www.googleapis.com https://identitytoolkit.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com https://{{YOUR_FIREBASE_PROJECT_ID}}.firebaseio.com https://{{YOUR_REGION}}-{{YOUR_FIREBASE_PROJECT_ID}}.cloudfunctions.net https://*.a.run.app https://{{YOUR_FIREBASE_PROJECT_ID}}.firebasestorage.app https://recaptchaenterprise.googleapis.com https://content-firebaseappcheck.googleapis.com https://firebaseappcheck.googleapis.com https://www.google.com https://github.com https://api.github.com https://api.stripe.com https://checkout.stripe.com; img-src 'self' data: blob: https: http://localhost:* https://avatars.githubusercontent.com https://lh3.googleusercontent.com https://{{YOUR_FIREBASE_PROJECT_ID}}.firebasestorage.app; frame-src 'self' http://localhost:* https://accounts.google.com https://checkout.stripe.com https://js.stripe.com https://www.google.com https://recaptcha.google.com; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; form-action 'self' http://localhost:* https://accounts.google.com https://github.com https://checkout.stripe.com"
           },
           {
             "key": "X-Content-Type-Options",