@donotdev/cli 0.0.3 → 0.0.5

package/dist/index.js

@@ -9797,52 +9797,60 @@ async function mergeRootTurboJson(rootDir) {
 // packages/tooling/src/utils/matrix.ts
 init_utils();
 init_pathResolver();
+import { createRequire as createRequire4 } from "node:module";
 var cachedMatrix = null;
 function getMatrixPath(mode) {
+  try {
+    const require3 = createRequire4(import.meta.url);
+    const resolved = require3.resolve("@donotdev/cli/dependencies-matrix.json");
+    if (pathExists(resolved)) {
+      return resolved;
+    }
+  } catch {
+  }
   const executionMode = mode || detectExecutionMode();
   if (executionMode === "development") {
     const repoRoot = getRepoRoot();
-    const devPath = normalizePath(
-      repoRoot,
-      "packages/cli/dependencies-matrix.json"
-    );
-    if (!pathExists(devPath)) {
-      throw new Error(`[DEV] Matrix not found at: ${devPath}`);
+    if (repoRoot) {
+      const devPath = normalizePath(
+        repoRoot,
+        "packages/cli/dependencies-matrix.json"
+      );
+      if (pathExists(devPath)) {
+        return devPath;
+      }
     }
-    return devPath;
   }
-  const cliPackagePath = getCliRootFromBundle();
-  const matrixPath = joinPath(cliPackagePath, "dependencies-matrix.json");
-  if (!pathExists(matrixPath)) {
-    throw new Error(`[PROD] Matrix not found at: ${matrixPath}`);
-  }
-  return matrixPath;
+  return null;
 }
 function getCliVersion(mode) {
+  try {
+    const require3 = createRequire4(import.meta.url);
+    const packageJsonPath = require3.resolve("@donotdev/cli/package.json");
+    const pkg = readSync(packageJsonPath, { format: "json" });
+    return String(pkg?.version || "0.0.0");
+  } catch {
+  }
   const executionMode = mode || detectExecutionMode();
   if (executionMode === "development") {
     const repoRoot = getRepoRoot();
     const cliPackageJson = joinPath(repoRoot, "packages/cli/package.json");
-    if (!pathExists(cliPackageJson)) {
-      throw new Error(`[DEV] CLI package.json not found at: ${cliPackageJson}`);
+    if (pathExists(cliPackageJson)) {
+      const pkg = readSync(cliPackageJson, { format: "json" });
+      return String(pkg?.version || "0.0.0");
     }
-    const pkg2 = readSync(cliPackageJson, { format: "json" });
-    return String(pkg2?.version || "0.0.0");
-  }
-  const cliPackagePath = getCliRootFromBundle();
-  const packageJsonPath = joinPath(cliPackagePath, "package.json");
-  if (!pathExists(packageJsonPath)) {
-    throw new Error(`[PROD] CLI package.json not found at: ${packageJsonPath}`);
   }
-  const pkg = readSync(packageJsonPath, { format: "json" });
-  return String(pkg?.version || "0.0.0");
+  return "0.0.0";
 }
 function loadMatrix(mode) {
   if (cachedMatrix) return cachedMatrix;
   const matrixPath = getMatrixPath(mode);
+  if (!matrixPath) {
+    return null;
+  }
   const content = readSync(matrixPath, { format: "json" });
   if (!content) {
-    throw new Error(`Failed to read dependencies-matrix.json at ${matrixPath}`);
+    return null;
   }
   cachedMatrix = {
     matrix: content,
@@ -11151,7 +11159,11 @@ function generateScripts(templateName, options) {
   return scripts;
 }
 function generatePackageJson(templateName, mode, options = {}) {
-  const { matrix, cliVersion } = loadMatrix(mode);
+  const matrixResult = loadMatrix(mode);
+  if (!matrixResult) {
+    throw new Error("dependencies-matrix.json not found. This command requires the matrix file.");
+  }
+  const { matrix, cliVersion } = matrixResult;
   const template = matrix.templateMapping?.[templateName];
   if (!template) {
     throw new Error(`Template "${templateName}" not found in matrix`);
@@ -11201,8 +11213,8 @@ function generatePackageJson(templateName, mode, options = {}) {
     result.peerDependencies = peerDependencies;
   }
   if (templateName === "consumer-root") {
-    result.packageManager = "bun@1.3.3";
-    result.engines = { node: ">=20.0.0", bun: ">=1.1.0" };
+    result.packageManager = "bun@1.3.5";
+    result.engines = { node: ">=24.0.0", bun: ">=1.3.0" };
     result.workspaces = ["apps/*", "entities"];
   }
   if (templateName === "entities") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/cli",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Command-line interface for DoNotDev Framework",
   "type": "module",
   "private": false,
@@ -37,14 +37,6 @@
     "commander": "^14.0.2",
     "fast-glob": "^3.3.3"
   },
-  "peerDependencies": {
-    "@donotdev/core": "0.0.3"
-  },
-  "peerDependenciesMeta": {
-    "@donotdev/core": {
-      "optional": true
-    }
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/donotdev/cli.git"

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-demo/src/themes.css.example

@@ -1,179 +1,131 @@
-/* apps/demo/src/themes.css */
+/* src/themes.css */
 
 /* ===========================
    APP-WIDE SETTINGS
-   These apply to all themes - spacing, radius, shadows, routing animations
+   Spacing, radius, shadows, animations - apply to all themes
    =========================== */
 :root {
-  /* ===========================
-     ROUTING ANIMATIONS
-     Customize page transition animations
-     Pure CSS - zero JS overhead. Respects prefers-reduced-motion.
-     Override in themes.css: --routing-animation: slide; to change animation type
-     =========================== */
-  /* Single animation type (fade, slide, or none to disable) - app-wide */
-  /* --routing-animation: fade; */  /* fade | slide | none */
-  /* --routing-default-duration: var(--dur-normal); */  /* Animation duration */
-
-  /* Breakpoint-specific durations (all inherit from --routing-default-duration) */
-  /* --routing-mobile-duration: var(--routing-default-duration); */
-  /* --routing-tablet-duration: var(--routing-default-duration); */
-  /* --routing-desktop-duration: var(--routing-default-duration); */
-  /* --routing-wide-duration: var(--routing-default-duration); */
-  
-  /* Examples: */
-  /* --routing-animation: slide; */  /* Use slide animation */
-  /* --routing-animation: none; */  /* Disable animations */
-  /* --routing-default-duration: 200ms; */  /* Faster animations */
-
-  /* ===========================
-     SPACING OVERRIDES
-     Customize spacing scale
-     =========================== */
-  /* --gap-sm: 0.5rem; */        /* 8px - tight spacing */
-  /* --gap-md: 1rem; */          /* 16px - medium spacing (default) */
-  /* --gap-lg: 2rem; */          /* 32px - large spacing */
-
-  /* ===========================
-     BORDER RADIUS OVERRIDES
-     Customize component corners
-     =========================== */
-  /* --radius-interactive: var(--radius-none); */ /* Buttons, links (default: square) */
-  /* --radius-surface: var(--radius-md); */ /* Cards, dialogs (default: 8px round) */
-  /* --radius-floating: var(--radius-none); */ /* Dropdowns, popovers (default: square) */
-
-  /* ===========================
-     SHADOW OVERRIDES
-     Customize elevation
-     =========================== */
-  /* --shadow-sm: ...; */        /* Small shadows */
-  /* --shadow-md: ...; */        /* Medium shadows (default) */
-  /* --shadow-xl: ...; */        /* Large shadows */
+  /* Routing animations (fade | slide | none) */
+  /* --routing-animation: fade; */
+  /* --routing-default-duration: var(--dur-normal); */
+
+  /* Spacing scale */
+  /* --gap-sm: 0.5rem; */
+  /* --gap-md: 1rem; */
+  /* --gap-lg: 2rem; */
+
+  /* Border radius */
+  /* --radius-interactive: var(--radius-none); */
+  /* --radius-surface: var(--radius-md); */
+  /* --radius-floating: var(--radius-none); */
 }
 
 /* ===========================
-   LIGHT THEME (High Contrast Light)
-   Background: White
-   Foreground: Black
+   LIGHT THEME
+   Zinc-based neutral palette
    =========================== */
 :root.light {
-   --theme-icon: 'Sun';
-   --theme-label: 'Light';
-   --theme-is-dark: 0;
-
-   /* ===========================
-         1. USER SETS - 5 BRAND COLORS
-         =========================== */
-   --foreground: #000000;
-   --background: #ffffff;
-  --primary: #00bcd4; /* Cyan */
-  --secondary: #10b981; /* Green */
-  --accent: #ff9800; /* Orange */
-
-   /* ===========================
-         2. FRAMEWORK DEFAULTS - STATUS COLORS
-         (Override if needed)
-         =========================== */
-   --success: #10b981;
-   --warning: #f59e0b;
-   --destructive: #dc2626;
-
-   /* ===========================
-         3. AUTO-COMPUTED - SURFACES
-         (Plain sight computation for easy overriding)
-         =========================== */
-   --muted: color-mix(in oklab, var(--foreground) 5%, var(--background));
-  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
-   --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
-   --input: var(--muted);
-   --ring: var(--primary);
-
-   --card: var(--background);
-   --card-foreground: var(--foreground);
-   --popover: var(--card);
-   --popover-foreground: var(--card-foreground);
-  --surface-1: var(--card);
-
-   /* ===========================
-         4. AUTO-COMPUTED - TEXT ON BRAND COLORS
-         (Mapped to foreground/background for consistency)
-         =========================== */
-  --primary-foreground: var(--foreground);
-   --secondary-foreground: var(--background);
-  --accent-foreground: var(--foreground);
-
-  --success-foreground: var(--background);
-  --warning-foreground: var(--foreground);
-  --destructive-foreground: var(--background);
+  --theme-icon: 'Sun';
+  --theme-label: 'Light';
+  --theme-is-dark: 0;
+
+  /* Core colors */
+  --background: #ffffff;
+  --foreground: #09090b;
+
+  /* Surfaces */
+  --card: #ffffff;
+  --card-foreground: #09090b;
+  --popover: #ffffff;
+  --popover-foreground: #09090b;
+
+  /* Muted (zinc-100 / zinc-500) */
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+
+  /* Border & input (zinc-200) */
+  --border: #e4e4e7;
+  --input: #e4e4e7;
+  --ring: var(--primary);
+
+  /* Brand colors - customize these */
+  --primary: #0284c7;
+  --primary-foreground: #ffffff;
+
+  --secondary: #f4f4f5;
+  --secondary-foreground: #18181b;
+
+  --accent: #ea580c;
+  --accent-foreground: #ffffff;
+
+  /* Status colors */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #09090b;
 }
 
 /* ===========================
-       DARK THEME (High Contrast Dark)
-       Background: Black
-       Foreground: White
-       =========================== */
+   DARK THEME
+   Zinc-based dark palette
+   =========================== */
 :root.dark {
-   --theme-icon: 'Moon';
-   --theme-label: 'Dark';
-   --theme-is-dark: 1;
-
-   /* ===========================
-         1. USER SETS - 5 BRAND COLORS
-         =========================== */
-   --foreground: #ffffff;
-   --background: #000000;
-  --primary: #00bcd4; /* Cyan */
-  --secondary: #10b981; /* Green */
-  --accent: #ff9800; /* Orange */
-
-   /* ===========================
-         2. FRAMEWORK DEFAULTS - STATUS COLORS
-         =========================== */
-   --success: #10b981;
-   --warning: #f59e0b;
-  --destructive: #ef4444;
-
-   /* ===========================
-         3. AUTO-COMPUTED - SURFACES
-         =========================== */
-  --muted: color-mix(in oklab, var(--foreground) 10%, var(--background));
-  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
-   --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
-   --input: var(--muted);
-   --ring: var(--primary);
-
-   --card: var(--background);
-   --card-foreground: var(--foreground);
-   --popover: var(--card);
-   --popover-foreground: var(--card-foreground);
-  --surface-1: var(--card);
-
-   /* ===========================
-         4. AUTO-COMPUTED - TEXT ON BRAND COLORS
-         =========================== */
-  --primary-foreground: var(--background);
-   --secondary-foreground: var(--foreground);
-  --accent-foreground: var(--background);
-
-  --success-foreground: var(--foreground);
-  --warning-foreground: var(--background);
-  --destructive-foreground: var(--foreground);
+  --theme-icon: 'Moon';
+  --theme-label: 'Dark';
+  --theme-is-dark: 1;
+
+  /* Core colors */
+  --background: #09090b;
+  --foreground: #fafafa;
+
+  /* Surfaces */
+  --card: #09090b;
+  --card-foreground: #fafafa;
+  --popover: #18181b;
+  --popover-foreground: #fafafa;
+
+  /* Muted (zinc-800 / zinc-400) */
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+
+  /* Border & input (zinc-800) */
+  --border: #27272a;
+  --input: #27272a;
+  --ring: var(--primary);
+
+  /* Brand colors - customize these */
+  --primary: #0ea5e9;
+  --primary-foreground: #ffffff;
+
+  --secondary: #27272a;
+  --secondary-foreground: #fafafa;
+
+  --accent: #f97316;
+  --accent-foreground: #ffffff;
+
+  /* Status colors */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #09090b;
 }
 
-   /* ===========================
+/* ===========================
    CUSTOM THEMES
-      =========================== */
+   Add your brand themes below
+   =========================== */
 
-/* Add your custom themes here */
 /* Example:
-.brand {
+:root.brand {
   --theme-icon: 'Zap';
   --theme-label: 'Brand';
-  --background: #your-brand-background;
-  --foreground: #your-brand-foreground;
-  --primary: #your-brand-primary;
-  --secondary: #your-brand-secondary;
-  --accent: #your-brand-accent;
-  ... other variables ...
+  --theme-is-dark: 0;
+  --background: #your-color;
+  --foreground: #your-color;
+  ...
 }
 */

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

@@ -25,7 +25,7 @@ export function ClientLayout({ children, serverCookies }: ClientLayoutProps) {
         config={appConfig}
         serverCookies={serverCookies}
         layout={{
-          breadcrumbs: 'smart', // 'smart' | 'always' | 'never' | false
+          breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
           header: {
             // end: () => <YourHeaderActions />,
           },

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

@@ -0,0 +1,6 @@
+{
+  "hero": {
+    "title": "Welcome to DnDev",
+    "subtitle": "Your app is ready. Explore the framework patterns below."
+  }
+}

package/templates/app-next/src/pages/HomePage.tsx.example

@@ -1,20 +1,164 @@
+'use client';
+// apps/{{appName}}/src/pages/HomePage.tsx
+
 /**
  * @fileoverview Home page component
- * @description Main landing page for the application
- * @version 0.0.1
+ * @description Scaffold landing page demonstrating DoNotDev framework patterns
+ * @version 0.0.4
  * @since 0.0.1
- * @author AMBROISE PARK Consulting
  */
 
-import { HomeTemplate } from '@donotdev/templates';
 import { Home } from 'lucide-react';
-import type { PageMeta } from '@donotdev/core';
+
+import {
+  Button,
+  CallToAction,
+  Card,
+  Grid,
+  GridArea,
+  HeroSection,
+  RadioGroup,
+  Section,
+  Stack,
+  Text,
+} from '@donotdev/components';
+import {
+  useLayout,
+  useTranslation,
+  type LayoutPreset,
+  type PageMeta,
+} from '@donotdev/core';
+import { PageContainer, Link } from '@donotdev/ui';
+
+const LAYOUT_PRESETS: LayoutPreset[] = [
+  'admin',
+  'docs',
+  'landing',
+  'moolti',
+  'blog',
+  'game',
+];
+
+export const NAMESPACE = 'home';
 
 export const meta: PageMeta = {
-  title: 'Home',
+  namespace: NAMESPACE,
   icon: <Home />,
 };
 
 export default function HomePage() {
-  return <HomeTemplate />;
-}
+  const currentPreset = useLayout('layoutPreset');
+  const setLayoutPreset = useLayout('setLayoutPreset');
+  const { t } = useTranslation([NAMESPACE]);
+
+  return (
+    <PageContainer>
+      <HeroSection
+        title={t('hero.title', "Welcome to DnDev")}
+        subtitle={t('hero.subtitle', "Your app is ready. Explore the framework patterns below.")}
+        variant="primary"
+      />
+
+      {/* Layout Switcher */}
+      <Section title="Try Our Layouts" tone="muted" align="center">
+        <Text>
+          Pick a layout and see it change live. Set your preferred layout in
+          config/app.ts
+        </Text>
+        <RadioGroup
+          value={currentPreset || 'landing'}
+          onValueChange={(value) => setLayoutPreset(value as LayoutPreset)}
+          gridCols={3}
+          items={LAYOUT_PRESETS.map((preset) => ({
+            value: preset,
+            label: preset.charAt(0).toUpperCase() + preset.slice(1),
+          }))}
+        />
+      </Section>
+
+      {/* Components Showcase */}
+      <Section title="Components Showcase">
+        {/* Stack Example */}
+        <Card title="Stack Component">
+          <Text variant="muted">
+            Stack creates flex containers. Default vertical, use direction="row"
+            for horizontal.
+          </Text>
+          <Stack direction="row" gap="medium">
+            <Card variant="primary" title="Item 1">
+              <Text>Horizontal</Text>
+            </Card>
+            <Card variant="accent" title="Item 2">
+              <Text>Stack</Text>
+            </Card>
+          </Stack>
+        </Card>
+
+        {/* Grid + GridArea Example */}
+        <Card title="Grid + GridArea Components">
+          <Text variant="muted">
+            Grid with named areas for complex layouts.
+          </Text>
+          <Grid
+            areas={`"header header"
+"sidebar main"
+"footer footer"`}
+            templateColumns="1fr 2fr"
+            gap="tight"
+          >
+            <GridArea name="header">
+              <Card variant="glass">
+                <Text>Header Header</Text>
+              </Card>
+            </GridArea>
+            <GridArea name="main">
+              <Card variant="glass">
+                <Text>Main  2fr</Text>
+              </Card>
+            </GridArea>
+            <GridArea name="sidebar">
+              <Card variant="glass">
+                <Text>Sidebar  1fr</Text>
+              </Card>
+            </GridArea>
+            <GridArea name="footer">
+              <Card variant="glass">
+                <Text>Footer Footer</Text>
+              </Card>
+            </GridArea>
+          </Grid>
+        </Card>
+      </Section>
+
+      {/* CallToAction */}
+      <CallToAction
+        title="Ready to Build?"
+        subtitle="Check out the guides folder for setup instructions."
+        primaryAction={
+          <Button
+            variant="primary"
+            render={({ children, ...props }) => (
+              <Link path="https://donotdev.com" {...props}>
+                {children}
+              </Link>
+            )}
+          >
+            Learn More
+          </Button>
+        }
+        secondaryAction={
+          <Button
+            variant="outline"
+            render={({ children, ...props }) => (
+              <Link path="https://discord.gg/fbeYWDak" {...props}>
+                {children}
+              </Link>
+            )}
+          >
+            Join Discord
+          </Button>
+        }
+      />
+    </PageContainer>
+  );
+}