@donotdev/cli 0.0.8 → 0.0.11

package/templates/root-consumer/CLAUDE.md.example

@@ -7,6 +7,32 @@
 
 ---
 
+## ⚠️ WORKING MODE: Consumer App Development
+
+**YOU ARE IN:** Consumer App Development Mode
+
+**Location:** Consumer repository (scaffolded by `dndev init`)
+
+**Your Role:**
+- **Creating with framework** (Mode 3): Build new app features
+- **Tweaking framework app** (Mode 4): Modify existing app features
+
+**CLI:** `dndev` (public CLI, installed globally)
+
+**Workflow:**
+1. `/design [requirement]` → Architect designs solution
+2. `/build [requirement]` → Prompt Engineer + Coder implement
+3. Iterate with WAI-WAY agents
+
+**Reference:** [Modes Guide](https://github.com/donotdev/framework/blob/main/docs/development/MODES.md) | Framework guides in `guides/dndev/`
+
+**⚠️ IMPORTANT:**
+- Use ONLY published `@donotdev/*` packages
+- Cannot modify framework internals
+- If framework needs changes, work in monorepo (`c:\ws\dndev`)
+
+---
+
 **PRIME DIRECTIVE: PRECISION OVER SPEED.**
 
 ## **Correctness is non-negotiable. Concise, even at the cost of grammar. Never guess, every output must be verifiable. Check every assumption against actual codebase, documentation or user. If ambiguity exists, ask. No exceptions.**
@@ -71,3 +97,123 @@ At end of each plan, list unresolved questions (if any). Extremely concise.
 ## General Principles
 - **Code reading/writing:** Be critical and concise/precise. Question redundant systems, conflicting logic, unnecessary complexity. You need to **ANALYZE** code.
 - **Conventions:** Always follow project's conventions when updating/adding/fixing files
+
+## Component Usage - MCP REQUIRED
+
+**BEFORE writing ANY @donotdev component:**
+
+1. Call `lookup_component({ component: "ComponentName" })`
+2. Read the actual props from the returned TypeScript interface
+3. Use ONLY those props
+
+**NEVER guess props. NEVER use props from memory/training.**
+
+If MCP tools unavailable → STOP and tell user to enable MCP.
+
+**Available MCP tools:**
+- `lookup_component` - get actual props from .d.ts
+- `list_components` - list exports from a package
+- `list_packages` - list all @donotdev packages
+
+## WAI-WAY Workflow - Four-Phase System (BMAD-Based)
+
+**Workflow Order:**
+1. `/brainstorm` → BMAD EXTRACTOR extracts requirements, generates HLD
+2. `/design` → BMAD PRINTER (Architect) creates technical plan (LLD)
+3. `/build` → BMAD FORGER (Builder) implements code using framework defaults
+4. `/polish` → BMAD FINISHER (Polisher) adds styling, customization, i18n
+
+**Quality Over Speed:** Each phase must be complete before proceeding. Take as long as needed.
+
+### Brainstorm Phase
+
+**Use `/brainstorm [app idea]` to extract complete requirements.**
+
+**Workflow:**
+1. `/brainstorm` → BMAD EXTRACTOR asks probing questions
+2. EXTRACTOR uses MCP to discover framework capabilities
+3. EXTRACTOR identifies native vs custom components
+4. Output → Complete HLD document
+
+**Example:**
+```
+/brainstorm I want to build a car dealership management app
+```
+
+**Agent:**
+- `extractor` (BMAD EXTRACTOR) - Extracts requirements through conversation
+
+**See:** `.claude/commands/brainstorm.md` for full workflow details.
+
+### Design Phase
+
+**Use `/design [HLD reference]` to create technical implementation plan.**
+
+**Workflow:**
+1. `/design` → BMAD PRINTER (Architect) reads validated HLD
+2. PRINTER creates technical artifacts (LLD):
+   - Entity schemas
+   - Navigation config
+   - Feature mapping
+   - Custom component specs
+3. Output → Complete LLD document
+
+**Example:**
+```
+/design Create technical plan from HLD.md
+```
+
+**Agent:**
+- `architect` (BMAD PRINTER) - Transforms HLD into technical specifications
+
+**See:** `.claude/commands/design.md` for full workflow details.
+
+### Build Phase
+
+**Use `/build [LLD reference]` to implement working code.**
+
+**Workflow:**
+1. `/build` → BMAD FORGER (Builder) reads LLD
+2. FORGER implements in phases:
+   - Entities → Routes → Auth → Native Pages → Custom Components → Integration
+3. Uses framework defaults ONLY (no styling, no customization)
+4. Hardcodes all strings (no i18n yet)
+5. Output → Working app (functional MVP)
+
+**Example:**
+```
+/build Implement from LLD.md
+```
+
+**Agent:**
+- `builder` (BMAD FORGER) - Implements app from specifications
+
+**See:** `.claude/commands/build.md` for full workflow details.
+
+### Polish Phase
+
+**Use `/polish [requirements]` to make app production-ready.**
+
+**Workflow:**
+1. `/polish` → BMAD FINISHER (Polisher) reads working app
+2. FINISHER:
+   - Fixes bugs (if any)
+   - Adds styling/customization
+   - Adds i18n translations
+   - Finalizes configuration
+   - Tests and validates
+3. Output → Production-ready app
+
+**Example:**
+```
+/polish Add styling and French translations
+```
+
+**Agent:**
+- `polisher` (BMAD FINISHER) - Fixes bugs, adds styling, i18n, config
+
+**See:** `.claude/commands/polish.md` for full workflow details.
+
+**Requirements:**
+- MCP server configured (`.mcp.json` or `.cursor/mcp.json`)
+- `@donotdev/mcp-server` available (via `bunx` or installed)

package/templates/root-consumer/entities/ExampleEntity.ts.example

@@ -63,6 +63,7 @@ export const productEntity = defineEntity({
   // 'checkbox'  → Multiple selections
   // 'date'      → Date picker
   // 'timestamp' → Date + time
+  // 'price'     → Structured price (amount, currency, VAT, discount %)
   // 'images'    → Image upload (multiple)
   // 'reference' → Link to another entity
   //
@@ -120,7 +121,7 @@ export const productEntity = defineEntity({
     price: {
       name: 'price',
       label: 'price',
-      type: 'number',
+      type: 'price',
       visibility: 'guest',
       editable: 'admin',
       validation: { required: true },

package/templates/root-consumer/entities/demo.ts.example

@@ -99,7 +99,7 @@ const demoEntity = defineEntity({
     price: {
       name: 'price',
       label: 'price',
-      type: 'number',
+      type: 'price',  // Value: { amount, currency?, vatIncluded?, discountPercent? }
       visibility: 'guest',
       editable: 'admin',
       validation: { required: true },

package/templates/root-consumer/firestore.indexes.json.example

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

package/templates/root-consumer/firestore.rules.example

@@ -0,0 +1,11 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    function isAuthenticated() {
+      return request.auth != null;
+    }
+    match /{document=**} {
+      allow read, write: if isAuthenticated();
+    }
+  }
+}

package/templates/root-consumer/guides/dndev/AGENT_START_HERE.md.example

@@ -229,25 +229,28 @@ bun run dev
 
 ---
 
-## 🤖 WAI-WAY: The "With AI Way" Protocol (Recommended)
+## 🤖 WAI-WAY: The "With AI Way" Protocol (BMAD-Based)
 
-**WAI-WAY** (based on the **BMAD Method**) is a rigorous, agent-driven protocol designed to build mistake-free apps by separating concerns into 4 distinct phases.
+**WAI-WAY** is a rigorous, agent-driven protocol based on the **BMAD Method**. It separates concerns into 4 distinct phases.
 
-**How to Use:**
-1.  Navigate to `guides/wai-way/`.
-2.  Open `WAI_WAY_CLI.md` to see the activation instructions.
-3.  Paste the **Activation Prompt** into your AI Agent (Cursor, Claude, etc.) to start a phase.
+**Entry Point:** Use commands in `.claude/commands/` (synced via `dndev bump`)
 
 **The 4 Phases:**
-1.  **Brainstorm (Extractor):** Define WHAT to build -> `step_1_prd.md`
-2.  **Review (Architect):** Define HOW to build (Component mapping) -> `step_2_spec.md`
-3.  **Build (Builder):** Implement code based on spec -> Working App
-4.  **Polish (Polisher):** Refine UX and content -> Production App
+1.  **`/brainstorm`** → BMAD EXTRACTOR extracts requirements, generates HLD
+2.  **`/design`** → BMAD PRINTER (Architect) creates technical plan (LLD)
+3.  **`/build`** → BMAD FORGER (Builder) implements code using framework defaults
+4.  **`/polish`** → BMAD FINISHER (Polisher) adds styling, customization, i18n
+
+**How It Works:**
+- Commands are in `.claude/commands/` (synced from framework)
+- Agents are in `.claude/agents/` (BMAD personas, synced from framework)
+- Run commands in Cursor: `/brainstorm [app idea]`, `/design [HLD]`, `/build [LLD]`, `/polish [app]`
+- Documentation syncs automatically via `dndev bump`
 
 **Why use it?**
-WAI-WAY forces your AI to "Think before it Codes". By separating the Architecture phase from the Build phase, we ensure that **only valid DoNotDev primitives are used**, preventing custom CSS bloat and "hallucinated" patterns.
+WAI-WAY forces your AI to "Think before it Codes". By separating Architecture from Build, we ensure **only valid DoNotDev primitives are used**, preventing custom CSS bloat and "hallucinated" patterns.
 
-**See [WAI_WAY_CLI.md](../wai-way/WAI_WAY_CLI.md) for full instructions.**
+**See:** `.claude/commands/` for command details | `guides/wai-way/WAI_WAY_CLI.md` for methodology
 
 ---
 

package/templates/root-consumer/guides/dndev/COMPONENTS_CRUD.md.example

@@ -19,14 +19,14 @@ await remove('doc-id');
 Paginated list with automatic loading. For data tables.
 
 ```tsx
-const { items, loading, hasMore, loadMore } = useCrudList(productEntity);
+const { items, loading, refresh } = useCrudList(productEntity);
 ```
 
 ### useCrudCardList  
 Card-based list with infinite scroll.
 
 ```tsx
-const { items, loading, hasMore, loadMore, refresh } = useCrudCardList(articleEntity);
+const { items, loading, refresh } = useCrudCardList(articleEntity);
 ```
 
 ---
@@ -106,6 +106,9 @@ Field components are auto-rendered by `FormFieldRenderer`. You don't import them
 ### Numbers
 - `number` - Numeric input
 - `range` - Slider input
+- `rating` - Star rating input (1–5, configurable max)
+
+**Rating + comment (e.g. reviews):** Use two fields on the same entity — `rating` (type `rating`) for stars and `comment` (type `textarea`) for the text. The form renders them as separate rows; no composite field type needed.
 
 ### Boolean
 - `checkbox` - Checkbox input
@@ -153,7 +156,7 @@ import { useController, registerFieldType } from '@donotdev/crud';
 import type { ControlledFieldProps } from '@donotdev/crud';
 
 // Custom controlled component MUST use framework's useController (not react-hook-form's)
-function RatingField({
+function ScoreField({
   fieldConfig,
   control,
   errors,
@@ -179,7 +182,7 @@ function RatingField({
           onChange?.(value);
         }}
         min={0}
-        max={5}
+        max={10}
       />
       {fieldState?.error && (
         <span className="error">{fieldState.error.message}</span>
@@ -189,8 +192,8 @@ function RatingField({
 }
 
 registerFieldType({
-  type: 'rating',
-  controlledComponent: RatingField,
+  type: 'score',
+  controlledComponent: ScoreField,
 });
 ```
 

package/templates/root-consumer/guides/dndev/COMPONENT_API.md.example

@@ -0,0 +1,195 @@
+# Component API Reference
+
+**SOURCE OF TRUTH. If prop not listed here, it does not exist.**
+
+---
+
+## Button
+```tsx
+<Button>Label</Button>
+<Button variant="primary">Label</Button>
+<Button onClick={fn}>Label</Button>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| variant | `'default'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'destructive'` \| `'ghost'` \| `'outline'` \| `'link'` | `'default'` |
+| icon | `LucideIcon` \| `ReactNode` | - |
+| iconEnd | `boolean` | `false` |
+| display | `'auto'` \| `'compact'` \| `'full'` | `'auto'` |
+| tooltip | `string` | - |
+| floating | `boolean` | `false` |
+| fullWidth | `boolean` | `false` |
+| loading | `boolean` | `false` |
+| loadingText | `string` | - |
+| progress | `number` (0-100) | - |
+| disabled | `boolean` | `false` |
+| render | `(props) => ReactNode` | - |
+
+**NO: size, tone, gap**
+
+---
+
+## Text
+```tsx
+<Text>Content</Text>
+<Text level="h1">Heading</Text>
+<Text as="p">Paragraph</Text>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'h1'`-`'h6'` \| `'p'` \| `'span'` \| `'div'` \| `'li'` \| `'label'` \| `'code'` | `'div'` |
+| level | `'h1'`-`'h6'` \| `'body'` \| `'small'` \| `'caption'` | auto from `as` |
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` \| `'code'` | `'default'` |
+| align | `'start'` \| `'center'` \| `'end'` | `'start'` |
+| weight | `'normal'` \| `'medium'` \| `'semibold'` \| `'bold'` | - |
+
+**NO: size, tone, color**
+
+---
+
+## Stack
+```tsx
+<Stack>children</Stack>
+<Stack direction="row">children</Stack>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `ElementType` | `'div'` |
+| direction | `'row'` \| `'column'` \| `'row-reverse'` \| `'column-reverse'` | `'column'` |
+| align | `'start'` \| `'center'` \| `'end'` \| `'stretch'` \| `'baseline'` | `'stretch'` |
+| justify | `'start'` \| `'center'` \| `'end'` \| `'between'` \| `'around'` \| `'evenly'` | `'start'` |
+| gap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| wrap | `'nowrap'` \| `'wrap'` \| `'wrap-reverse'` | `'nowrap'` |
+| width | `'full'` \| `'fit'` \| `'auto'` | `'full'` |
+| centered | `boolean` | `false` |
+
+**NO: spacing, size**
+
+---
+
+## Card
+```tsx
+<Card>children</Card>
+<Card title="Title">children</Card>
+<Card onClick={fn}>children</Card>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` | `'default'` |
+| title | `string` \| `ReactNode` | - |
+| subtitle | `string` \| `ReactNode` | - |
+| icon | `LucideIcon` | - |
+| content | `string` \| `string[]` \| `ReactNode` | - |
+| footer | `ReactNode` | - |
+| onClick | `() => void` | - |
+| clickable | `boolean` | auto from onClick |
+| elevated | `boolean` | `false` |
+| asChild | `boolean` | `false` |
+
+**NO: size, padding, margin**
+
+---
+
+## Grid
+```tsx
+<Grid>children</Grid>
+<Grid cols={3}>children</Grid>
+<Grid cols={[1, 1, 2, 3]}>children</Grid>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `ElementType` | `'div'` |
+| cols | `number` \| `[mobile, tablet, laptop, desktop]` | `1` |
+| gap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| align | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'stretch'` |
+| justify | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'stretch'` |
+
+**NO: spacing, columns (use cols)**
+
+---
+
+## Section
+```tsx
+<Section title="Title">children</Section>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'section'` \| `'article'` \| `'aside'` \| `'div'` \| `'main'` | `'section'` |
+| title | `string` | - |
+| separator | `boolean` | `false` |
+| tone | `'base'` \| `'muted'` \| `'elevated'` \| `'contrast'` \| `'accent'` | `'base'` |
+| align | `'start'` \| `'center'` \| `'end'` | `'center'` |
+| gridCols | `number` \| `[mobile, tablet, laptop, desktop]` | - |
+| gridGap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| collapsible | `boolean` | `false` |
+| defaultOpen | `boolean` | `false` |
+
+**NO: padding, margin, background**
+
+---
+
+## Badge
+```tsx
+<Badge>Label</Badge>
+<Badge variant="primary">Label</Badge>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'div'` \| `'span'` \| `'mark'` | `'div'` |
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` \| `'outline'` | `'default'` |
+| tooltip | `string` | - |
+
+**NO: size, color**
+
+---
+
+## Spinner
+```tsx
+<Spinner />
+<Spinner overlay />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| overlay | `boolean` | `false` |
+| variant | `'default'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` | `'primary'` |
+
+**NO: size**
+
+---
+
+## Separator
+```tsx
+<Separator />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| orientation | `'horizontal'` \| `'vertical'` | `'horizontal'` |
+| variant | `'default'` \| `'muted'` \| `'accent'` | `'default'` |
+
+---
+
+## EntityFormRenderer
+```tsx
+<EntityFormRenderer entity={entity} operation="create" onSubmit={fn} />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| entity | `Entity` | required |
+| operation | `'create'` \| `'edit'` | `'create'` |
+| onSubmit | `(data) => void` | required |
+| defaultValues | `Record<string, unknown>` | - |
+| loading | `boolean` | `false` |
+| submitText | `string` | - |
+| cancelText | `string` | - |
+| onCancel | `() => void` | - |
+| viewerRole | `string` | `'guest'` |
+
+**NO: fields (renders all editable fields automatically)**
+
+---
+
+## BEFORE WRITING JSX
+
+1. Check this file
+2. If prop not listed → don't use it
+3. When in doubt → use defaults only

package/templates/root-consumer/guides/dndev/INDEX.md.example

@@ -1,6 +1,8 @@
 # DoNotDev Framework Guides
 
-**For AI Agents:** See [AGENT_START_HERE.md](./AGENT_START_HERE.md)
+**For AI Agents:** See [AGENT_START_HERE.md](./AGENT_START_HERE.md) ← **START HERE**
+
+**AI System:** Commands in `.claude/commands/`, agents in `.claude/agents/` (synced via `dndev bump`)
 
 ---