@donotdev/cli 0.0.3 → 0.0.4

package/dependencies-matrix.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./dependencies-matrix.schema.json",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Centralized dependency versions for DoNotDev framework. Single source of truth for all external dependencies. ⚠️ SYNC REQUIRED: When adding/removing @donotdev/* feature packages (auth, billing, crud, oauth), also update packages/core/config/constants.js BUNDLING.optionalFeatures array.",
   "lastUpdated": "2025-12-16",
   "migrationGuides": {
@@ -189,79 +189,67 @@
     "@donotdev/adv-comps": {
       "description": "Advanced components package",
       "packages": {
-        "@donotdev/adv-comps": "^0.0.2"
+        "@donotdev/adv-comps": "^0.0.3"
       }
     },
     "@donotdev/auth": {
       "description": "Authentication package",
       "packages": {
-        "@donotdev/auth": "^0.0.2"
+        "@donotdev/auth": "^0.0.3"
       }
     },
     "@donotdev/billing": {
       "description": "Billing package",
       "packages": {
-        "@donotdev/billing": "^0.0.2"
+        "@donotdev/billing": "^0.0.3"
       }
     },
     "@donotdev/components": {
       "description": "UI components package",
       "packages": {
-        "@donotdev/components": "^0.0.2"
+        "@donotdev/components": "^0.0.3"
       }
     },
     "@donotdev/core": {
       "description": "Core framework package",
       "packages": {
-        "@donotdev/core": "^0.0.2"
+        "@donotdev/core": "^0.0.3"
       }
     },
     "@donotdev/crud": {
       "description": "CRUD operations package",
       "packages": {
-        "@donotdev/crud": "^0.0.2"
+        "@donotdev/crud": "^0.0.3"
       }
     },
     "@donotdev/firebase": {
       "description": "Firebase provider package",
       "packages": {
-        "@donotdev/firebase": "^0.0.2"
+        "@donotdev/firebase": "^0.0.3"
       }
     },
     "@donotdev/functions": {
       "description": "Firebase Functions package",
       "packages": {
-        "@donotdev/functions": "^0.0.2"
+        "@donotdev/functions": "^0.0.3"
       }
     },
     "@donotdev/oauth": {
       "description": "OAuth package",
       "packages": {
-        "@donotdev/oauth": "^0.0.2"
+        "@donotdev/oauth": "^0.0.3"
       }
     },
     "@donotdev/templates": {
       "description": "Page templates package",
       "packages": {
-        "@donotdev/templates": "^0.0.2"
+        "@donotdev/templates": "^0.0.3"
       }
     },
     "@donotdev/ui": {
       "description": "UI and routing package",
       "packages": {
-        "@donotdev/ui": "^0.0.2"
-      }
-    },
-    "core-children": {
-      "description": "Core bundled packages - use workspace:* in repo, converted to version during publish",
-      "packages": {
-        "@donotdev/types": "workspace:*",
-        "@donotdev/utils": "workspace:*",
-        "@donotdev/stores": "workspace:*",
-        "@donotdev/schemas": "workspace:*",
-        "@donotdev/hooks": "workspace:*",
-        "@donotdev/i18n": "workspace:*",
-        "@donotdev/config": "workspace:*"
+        "@donotdev/ui": "^0.0.3"
       }
     },
     "vite": {

package/dist/bin/commands/bump.d.ts

@@ -3,7 +3,7 @@
  * @description Re-exports bump from tooling for CLI bundling.
  * Each command wrapper is bundled separately as a fully self-contained script.
  *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.2
  * @author AMBROISE PARK Consulting
  */

package/dist/bin/commands/format.d.ts

@@ -3,7 +3,7 @@
  * @description Re-exports format from tooling for CLI bundling.
  * Each command wrapper is bundled separately as a fully self-contained script.
  *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

package/dist/bin/commands/lint.d.ts

@@ -3,7 +3,7 @@
  * @description Re-exports lint from tooling for CLI bundling.
  * Each command wrapper is bundled separately as a fully self-contained script.
  *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/cli",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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/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/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>
+  );
+}