create-momentum-app 0.0.1

package/templates/angular/src/styles.css

@@ -0,0 +1,140 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		/* Base colors */
+		--mcms-background: 0 0% 100%;
+		--mcms-foreground: 222 47% 11%;
+
+		/* Card */
+		--mcms-card: 0 0% 100%;
+		--mcms-card-foreground: 222 47% 11%;
+
+		/* Primary - Blue */
+		--mcms-primary: 221 83% 53%;
+		--mcms-primary-foreground: 210 40% 98%;
+
+		/* Secondary - Gray */
+		--mcms-secondary: 210 40% 96%;
+		--mcms-secondary-foreground: 222 47% 11%;
+
+		/* Muted - Light gray for subtle backgrounds */
+		--mcms-muted: 210 40% 96%;
+		--mcms-muted-foreground: 215 16% 43%;
+
+		/* Accent - Hover states */
+		--mcms-accent: 210 40% 96%;
+		--mcms-accent-foreground: 222 47% 11%;
+
+		/* Destructive - Red for dangerous actions */
+		--mcms-destructive: 0 84% 60%;
+		--mcms-destructive-foreground: 210 40% 98%;
+
+		/* Success - Green for positive feedback */
+		--mcms-success: 142 76% 36%;
+		--mcms-success-foreground: 0 0% 100%;
+
+		/* Warning - Amber for caution */
+		--mcms-warning: 38 92% 50%;
+		--mcms-warning-foreground: 48 96% 5%;
+
+		/* Info - Blue for informational messages */
+		--mcms-info: 199 89% 48%;
+		--mcms-info-foreground: 0 0% 100%;
+
+		/* Overlay - For modal backdrops */
+		--mcms-overlay: 0 0% 0%;
+
+		/* Border, input, and ring */
+		--mcms-border: 214 32% 91%;
+		--mcms-input: 214 32% 91%;
+		--mcms-ring: 221 83% 53%;
+
+		/* Border radius */
+		--mcms-radius: 0.5rem;
+
+		/* Sidebar colors - Dark sidebar in light mode */
+		--mcms-sidebar: 222 47% 11%;
+		--mcms-sidebar-foreground: 210 40% 98%;
+		--mcms-sidebar-primary: 221 83% 53%;
+		--mcms-sidebar-primary-foreground: 210 40% 98%;
+		--mcms-sidebar-accent: 217 33% 17%;
+		--mcms-sidebar-accent-foreground: 210 40% 98%;
+		--mcms-sidebar-border: 217 33% 20%;
+		--mcms-sidebar-ring: 221 83% 53%;
+	}
+
+	.dark {
+		/* Base colors - Dark background */
+		--mcms-background: 222 47% 11%;
+		--mcms-foreground: 210 40% 98%;
+
+		/* Card - slightly lighter than background */
+		--mcms-card: 217 33% 15%;
+		--mcms-card-foreground: 210 40% 98%;
+
+		/* Primary - Blue */
+		--mcms-primary: 217 91% 60%;
+		--mcms-primary-foreground: 222 47% 11%;
+
+		/* Secondary - distinct from card for badges */
+		--mcms-secondary: 215 28% 25%;
+		--mcms-secondary-foreground: 210 40% 98%;
+
+		/* Muted - subtle background */
+		--mcms-muted: 217 33% 20%;
+		--mcms-muted-foreground: 215 20% 65%;
+
+		/* Accent - hover states */
+		--mcms-accent: 217 33% 22%;
+		--mcms-accent-foreground: 210 40% 98%;
+
+		/* Destructive */
+		--mcms-destructive: 0 62% 50%;
+		--mcms-destructive-foreground: 210 40% 98%;
+
+		/* Success */
+		--mcms-success: 142 71% 45%;
+		--mcms-success-foreground: 0 0% 100%;
+
+		/* Warning */
+		--mcms-warning: 38 92% 50%;
+		--mcms-warning-foreground: 48 96% 5%;
+
+		/* Info */
+		--mcms-info: 199 89% 48%;
+		--mcms-info-foreground: 0 0% 100%;
+
+		/* Overlay */
+		--mcms-overlay: 0 0% 0%;
+
+		/* Border, input, and ring - slightly visible */
+		--mcms-border: 217 33% 22%;
+		--mcms-input: 217 33% 22%;
+		--mcms-ring: 224 76% 48%;
+
+		/* Sidebar colors - Slightly lighter than main in dark mode */
+		--mcms-sidebar: 224 71% 4%;
+		--mcms-sidebar-foreground: 213 31% 91%;
+		--mcms-sidebar-primary: 217 91% 60%;
+		--mcms-sidebar-primary-foreground: 210 40% 98%;
+		--mcms-sidebar-accent: 217 33% 17%;
+		--mcms-sidebar-accent-foreground: 213 31% 91%;
+		--mcms-sidebar-border: 217 33% 12%;
+		--mcms-sidebar-ring: 217 91% 60%;
+	}
+}
+
+/* Apply base styles */
+@layer base {
+	* {
+		border-color: hsl(var(--mcms-border));
+	}
+
+	body {
+		background-color: hsl(var(--mcms-background));
+		color: hsl(var(--mcms-foreground));
+	}
+}

package/templates/angular/tailwind.config.js

@@ -0,0 +1,11 @@
+const adminPreset = require('@momentumcms/admin/tailwind.preset');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	presets: [adminPreset],
+	content: [
+		'./src/**/*.{html,ts}',
+		'./node_modules/@momentumcms/admin/**/*.{html,ts,mjs}',
+		'./node_modules/@momentumcms/ui/**/*.{html,ts,mjs}',
+	],
+};

package/templates/angular/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "./dist/out-tsc",
+		"types": ["node"]
+	},
+	"files": ["src/main.ts", "src/main.server.ts"],
+	"include": ["src/**/*.d.ts", "src/**/*.ts"]
+}

package/templates/angular/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compileOnSave": false,
+	"compilerOptions": {
+		"outDir": "./dist/out-tsc",
+		"strict": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"sourceMap": true,
+		"declaration": false,
+		"experimentalDecorators": true,
+		"moduleResolution": "bundler",
+		"importHelpers": true,
+		"target": "ES2022",
+		"module": "ES2022",
+		"lib": ["ES2022", "dom"],
+		"skipLibCheck": true
+	},
+	"angularCompilerOptions": {
+		"enableI18nLegacyMessageIdFormat": false,
+		"strictInjectionParameters": true,
+		"strictInputAccessModifiers": true,
+		"strictTemplates": true
+	}
+}

package/templates/shared/.claude/CLAUDE.md

@@ -0,0 +1,155 @@
+# Momentum CMS App
+
+Angular-based headless CMS application built with [Momentum CMS](https://github.com/momentum-cms/momentum-cms).
+
+## Tech Stack
+
+- Angular 21 (SSR) with Express or Analog.js (Nitro)
+- Drizzle ORM (PostgreSQL or SQLite)
+- Better Auth for authentication
+- Tailwind CSS for styling
+
+## Commands
+
+```bash
+npm run dev          # Start dev server
+npm run build        # Production build
+npm start            # Start production server
+npx drizzle-kit generate   # Create SQL migrations from schema changes
+npx drizzle-kit push       # Direct push (dev only)
+npx drizzle-kit migrate    # Apply migrations (production)
+```
+
+## Project Structure
+
+```
+src/
+  collections/       # Collection definitions (data models)
+  momentum.config.ts # Central configuration (db, auth, collections, plugins)
+  server.ts          # Server entry point (Express) or server/ (Analog)
+  app/               # Angular app components and routes
+  styles.css         # Tailwind + Momentum theme variables
+```
+
+## Defining Collections
+
+Collections are the core data model. Each collection generates a database table, REST API, and admin UI.
+
+```typescript
+import { defineCollection, text, richText, select, relationship } from '@momentumcms/core';
+
+export const Posts = defineCollection({
+	slug: 'posts',
+	admin: { useAsTitle: 'title', group: 'Content' },
+	access: {
+		read: () => true,
+		create: ({ req }) => !!req.user,
+		update: ({ req }) => req.user?.role === 'admin',
+		delete: ({ req }) => req.user?.role === 'admin',
+	},
+	fields: [
+		text('title', { required: true }),
+		richText('content'),
+		select('status', {
+			options: [
+				{ label: 'Draft', value: 'draft' },
+				{ label: 'Published', value: 'published' },
+			],
+			defaultValue: 'draft',
+		}),
+	],
+});
+```
+
+### Adding a New Collection
+
+1. Create `src/collections/<name>.ts` with `defineCollection()`
+2. Add to `collections` array in `momentum.config.ts`
+3. Run `npx drizzle-kit generate && npx drizzle-kit push`
+4. Restart dev server
+
+### Field Types
+
+| Field          | Import                                          | Description             |
+| -------------- | ----------------------------------------------- | ----------------------- |
+| `text`         | `text(name, opts)`                              | Short text string       |
+| `textarea`     | `textarea(name, opts)`                          | Multi-line text         |
+| `richText`     | `richText(name, opts)`                          | Rich text editor (HTML) |
+| `number`       | `number(name, opts)`                            | Numeric value           |
+| `date`         | `date(name, opts)`                              | Date/datetime           |
+| `checkbox`     | `checkbox(name, opts)`                          | Boolean                 |
+| `select`       | `select(name, { options })`                     | Dropdown select         |
+| `radio`        | `radio(name, { options })`                      | Radio buttons           |
+| `email`        | `email(name, opts)`                             | Email with validation   |
+| `password`     | `password(name, opts)`                          | Password field          |
+| `upload`       | `upload(name, { relationTo })`                  | File upload             |
+| `relationship` | `relationship(name, { collection: () => Ref })` | FK reference            |
+| `array`        | `array(name, { fields })`                       | Repeating sub-fields    |
+| `group`        | `group(name, { fields })`                       | Nested field group      |
+| `blocks`       | `blocks(name, { blocks })`                      | Content blocks          |
+| `json`         | `json(name, opts)`                              | Raw JSON                |
+| `point`        | `point(name, opts)`                             | Geolocation             |
+| `slug`         | `slug(name, { from })`                          | Auto-generated slug     |
+
+### Access Control Helpers
+
+```typescript
+import { allowAll, isAuthenticated, hasRole, hasAnyRole, isOwner, and, or, not } from '@momentumcms/core';
+
+access: {
+  read: allowAll(),
+  create: isAuthenticated(),
+  update: or(hasRole('admin'), isOwner()),
+  delete: hasRole('admin'),
+}
+```
+
+## Using the API in Components
+
+```typescript
+import { injectMomentumAPI } from '@momentumcms/admin';
+
+@Component({...})
+export class MyComponent {
+  private readonly api = injectMomentumAPI();
+
+  // Observable
+  readonly posts$ = this.api.collection<Post>('posts').find$({ limit: 10 });
+
+  // Promise
+  async load(): Promise<void> {
+    const result = await this.api.collection<Post>('posts').find({ limit: 10 });
+  }
+
+  // CRUD
+  async create(): Promise<void> {
+    await this.api.collection<Post>('posts').create({ title: 'New' });
+  }
+}
+```
+
+## Code Style
+
+- **Signals for state**: `signal()`, `computed()`, `effect()`
+- **Signal inputs/outputs**: `input()`, `input.required()`, `output()`
+- **inject() function**, not constructor injection
+- **OnPush change detection** for all components
+- **Control flow**: `@if`, `@for`, `@switch`
+- Don't add `standalone: true` (default in Angular 21)
+- Use kebab-case filenames, PascalCase classes
+
+## REST API
+
+All collections get auto-generated endpoints:
+
+| Method | Path                   | Description                            |
+| ------ | ---------------------- | -------------------------------------- |
+| GET    | `/api/:collection`     | List (query: limit, page, sort, where) |
+| GET    | `/api/:collection/:id` | Get by ID                              |
+| POST   | `/api/:collection`     | Create                                 |
+| PATCH  | `/api/:collection/:id` | Update                                 |
+| DELETE | `/api/:collection/:id` | Delete                                 |
+
+## Documentation
+
+Full docs: https://github.com/momentum-cms/momentum-cms/tree/main/docs

package/templates/shared/.claude/skills/collection/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: collection
+description: Generate a new Momentum CMS collection with fields, access control, and hooks
+argument-hint: <collection-name>
+---
+
+# Generate Momentum CMS Collection
+
+Create a new collection file following project conventions.
+
+## Arguments
+
+- `$ARGUMENTS` - Collection name (e.g., "posts", "products", "pages")
+
+## Steps
+
+1. Create the collection file at `src/collections/<name>.ts`
+
+2. Use this template:
+
+```typescript
+import {
+  defineCollection,
+  text,
+  richText,
+  number,
+  date,
+  checkbox,
+  select,
+  relationship,
+} from '@momentumcms/core';
+
+export const <PascalName> = defineCollection({
+  slug: '<kebab-name>',
+
+  admin: {
+    useAsTitle: 'title', // or 'name' - the field to display as title
+    defaultColumns: ['title', 'createdAt'],
+    group: 'Content', // Admin sidebar group
+  },
+
+  access: {
+    read: () => true,
+    create: ({ req }) => !!req.user,
+    update: ({ req }) => req.user?.role === 'admin',
+    delete: ({ req }) => req.user?.role === 'admin',
+  },
+
+  hooks: {
+    beforeChange: [],
+    afterChange: [],
+  },
+
+  fields: [
+    text('title', { required: true }),
+    // Add more fields as needed
+  ],
+});
+```
+
+3. Add to momentum config. In `src/momentum.config.ts`, import and add to `collections` array:
+
+```typescript
+import { <PascalName> } from './collections/<name>';
+
+// In config:
+collections: [Posts, <PascalName>],
+```
+
+4. Remind user to run schema generation:
+
+```bash
+npx drizzle-kit generate
+npx drizzle-kit push
+```
+
+## Field Types Available
+
+- `text(name, options)` - Short text (minLength, maxLength)
+- `textarea(name, options)` - Multi-line text (rows, minLength, maxLength)
+- `richText(name, options)` - Rich text editor
+- `number(name, options)` - Numeric value (min, max, step)
+- `date(name, options)` - Date/datetime
+- `checkbox(name, options)` - Boolean
+- `select(name, { options: [...] })` - Dropdown (hasMany for multi-select)
+- `radio(name, { options: [...] })` - Radio buttons
+- `email(name, options)` - Email with validation
+- `upload(name, { relationTo: 'media' })` - File upload
+- `relationship(name, { collection: () => Ref })` - Reference to another collection
+- `array(name, { fields: [...] })` - Array of objects (minRows, maxRows)
+- `group(name, { fields: [...] })` - Nested object
+- `blocks(name, { blocks: [...] })` - Content blocks
+- `json(name, options)` - Raw JSON
+- `point(name, options)` - Geolocation (lat/lng)
+- `slug(name, { from: 'title' })` - Auto-generated slug
+
+## Layout Fields (visual only, no data storage)
+
+- `tabs(name, { tabs: [{ label, fields }] })` - Tabbed sections
+- `collapsible(name, { fields, defaultOpen })` - Expandable section
+- `row(name, { fields })` - Horizontal row
+
+## Access Control Helpers
+
+```typescript
+import {
+	allowAll,
+	denyAll,
+	isAuthenticated,
+	hasRole,
+	hasAnyRole,
+	isOwner,
+	and,
+	or,
+	not,
+} from '@momentumcms/core';
+```

package/templates/shared/.claude/skills/momentum-api/SKILL.md

@@ -0,0 +1,158 @@
+---
+name: momentum-api
+description: Work with Momentum API for data operations in Angular components
+argument-hint: <operation> [collection]
+---
+
+# Momentum API Usage
+
+Guide for using `injectMomentumAPI()` in Angular components.
+
+## Arguments
+
+- `$ARGUMENTS` - Operation type: "query", "crud", "typed", or collection name
+
+## Quick Reference
+
+### Inject the API
+
+```typescript
+import { injectMomentumAPI } from '@momentumcms/admin';
+
+@Component({...})
+export class MyComponent {
+  private readonly api = injectMomentumAPI();
+}
+```
+
+### Query Data (Observables)
+
+```typescript
+// In constructor or with toSignal()
+this.api
+	.collection<Post>('posts')
+	.find$({ limit: 10 })
+	.subscribe((result) => {
+		this.posts.set(result.docs);
+	});
+```
+
+### Query Data (Promises)
+
+```typescript
+async loadData(): Promise<void> {
+  const result = await this.api.collection<Post>('posts').find({ limit: 10 });
+  this.posts.set(result.docs);
+}
+```
+
+### CRUD Operations
+
+```typescript
+// Create
+const post = await this.api.collection<Post>('posts').create({ title: 'New Post' });
+
+// Read
+const post = await this.api.collection<Post>('posts').findById('123');
+
+// Update
+const updated = await this.api.collection<Post>('posts').update('123', { title: 'Updated' });
+
+// Delete
+const result = await this.api.collection<Post>('posts').delete('123');
+```
+
+## Find Options
+
+```typescript
+interface FindOptions {
+	where?: Record<string, unknown>; // Filter conditions
+	sort?: string; // Sort field (prefix with - for desc)
+	limit?: number; // Max results (default: 10)
+	page?: number; // Page number (default: 1)
+}
+```
+
+## Full Component Example
+
+```typescript
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { injectMomentumAPI } from '@momentumcms/admin';
+
+@Component({
+	selector: 'app-posts',
+	template: `
+		@if (loading()) {
+			<p>Loading...</p>
+		} @else {
+			@for (post of posts(); track post.id) {
+				<article>
+					<h2>{{ post.title }}</h2>
+					<button (click)="deletePost(post.id)">Delete</button>
+				</article>
+			}
+		}
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PostsComponent {
+	private readonly api = injectMomentumAPI();
+
+	readonly posts = signal<any[]>([]);
+	readonly loading = signal(true);
+
+	constructor() {
+		this.loadPosts();
+	}
+
+	async loadPosts(): Promise<void> {
+		this.loading.set(true);
+		try {
+			const result = await this.api.collection('posts').find({
+				limit: 20,
+				sort: '-createdAt',
+			});
+			this.posts.set(result.docs);
+		} finally {
+			this.loading.set(false);
+		}
+	}
+
+	async deletePost(id: string): Promise<void> {
+		await this.api.collection('posts').delete(id);
+		this.posts.update((posts) => posts.filter((p) => p.id !== id));
+	}
+}
+```
+
+## Platform Behavior
+
+- **SSR**: Direct database access (no HTTP overhead)
+- **Browser**: HTTP calls to `/api/*`
+- **Same interface** - code works identically on both platforms
+
+## TransferState (SSR Hydration)
+
+TransferState is **enabled by default** for read operations. Data fetched during SSR is cached and reused on browser hydration.
+
+```typescript
+// Default: TransferState enabled (no duplicate fetch on hydration)
+const posts = await this.api.collection<Post>('posts').find({ limit: 10 });
+
+// Opt-out: always fetch fresh data
+const posts = await this.api.collection<Post>('posts').find({ limit: 10, transfer: false });
+```
+
+Requires `provideClientHydration()` in app config.
+
+## Error Handling
+
+```typescript
+try {
+	await this.api.collection('posts').create({ title: '' });
+} catch (error) {
+	if (error instanceof ValidationError) {
+		console.error('Validation failed:', error.errors);
+	}
+}
+```

package/templates/shared/.env.example.tmpl

@@ -0,0 +1,11 @@
+# Database
+{{envDbVar}}
+
+# Auth
+BETTER_AUTH_URL=http://localhost:{{defaultPort}}
+
+# Server
+PORT={{defaultPort}}
+
+# CORS (comma-separated origins for production)
+# CORS_ORIGIN=https://your-domain.com

package/templates/shared/README.md.tmpl

@@ -0,0 +1,27 @@
+# {{projectName}}
+
+A [Momentum CMS](https://github.com/momentum-cms/momentum-cms) application.
+
+## Getting Started
+
+```bash
+# Copy environment variables
+cp .env.example .env
+
+# Start the dev server
+npm run dev
+```
+
+Open [http://localhost:{{defaultPort}}/admin](http://localhost:{{defaultPort}}/admin) to access the admin dashboard.
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Production build |
+| `npm start` | Start production server |
+
+## Learn More
+
+- [Momentum CMS Documentation](https://github.com/momentum-cms/momentum-cms)