@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-master.mdc

@@ -0,0 +1,164 @@
+---
+description: Master rule providing overview and references to all Modus Angular rules
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Angular Rules - Master Reference
+
+This master rule provides an overview of all available rules and serves as an entry point for understanding the Modus Angular development patterns.
+
+## Rule Structure
+
+This project uses a **short/full rule pattern**:
+
+- **Short Rules** (`*-short.mdc`): Always applied, concise summaries
+- **Full Rules** (`*.mdc`): Apply intelligently, detailed patterns
+
+## Essential Rules (Always Applied)
+
+These short rules are always included in chat context:
+
+### Design System
+
+- `modus-angular-design-system.mdc` - 9-color design system with Tailwind v4
+- `modus-angular-color-usage-short.mdc` - Color system usage
+- `modus-angular-icons-short.mdc` - Icon usage patterns
+- `modus-angular-semantic-html-short.mdc` - HTML element usage (div-only)
+- `modus-angular-border-usage-short.mdc` - Border utilities
+- `modus-angular-opacity-utilities-short.mdc` - Opacity utilities
+- `modus-angular-tailwind-usage-short.mdc` - Tailwind v4 integration
+- `modus-angular-themes-short.mdc` - Theme implementation
+
+### Component Patterns
+
+- `modus-angular-button-group-usage-short.mdc` - Button group patterns
+- `modus-angular-checkbox-value-inversion-short.mdc` - Checkbox bug handling
+- `modus-angular-modal-usage-short.mdc` - Modal patterns
+- `modus-angular-accordion-state-management-short.mdc` - Accordion state
+- `modus-angular-select-vs-dropdown-menu-short.mdc` - Dropdown patterns
+- `modus-angular-navbar-usage-short.mdc` - Navbar integration
+- `modus-angular-side-navigation-usage-short.mdc` - Side navigation patterns
+- `modus-angular-table-usage-short.mdc` - Table patterns
+- `modus-angular-utility-panel-usage-short.mdc` - Utility panel patterns
+
+### Angular Integration
+
+- `modus-angular-integration-short.mdc` - Angular + Modus integration
+- `modus-angular-essentials.mdc` - Comprehensive essentials
+- `modus-angular-best-practices.mdc` - Best practices
+- `modus-angular-forms-validation-short.mdc` - Forms and validation
+
+### Workflow
+
+- `modus-angular-development-workflow-short.mdc` - Linting and quality checks
+- `modus-angular-chrome-devtools-testing-short.mdc` - Browser testing
+- `modus-angular-implementation-guides-short.mdc` - Feature development guides
+
+## Detailed Rules (Apply Intelligently)
+
+For detailed patterns, examples, and advanced techniques, reference these full rules:
+
+### Component-Specific Details
+
+- `modus-angular-button-group-usage.mdc` - Complete button group patterns
+- `modus-angular-checkbox-value-inversion.mdc` - Checkbox bug details
+- `modus-angular-modal-usage.mdc` - Complete modal implementation
+- `modus-angular-accordion-state-management.mdc` - Accordion state management
+- `modus-angular-select-vs-dropdown-menu.mdc` - Dropdown comparison
+- `modus-angular-navbar-usage.mdc` - Navbar integration details
+- `modus-angular-side-navigation-usage.mdc` - Side navigation details
+- `modus-angular-table-usage.mdc` - Table implementation
+- `modus-angular-utility-panel-usage.mdc` - Utility panel details
+- `modus-angular-divider-usage.mdc` - Divider patterns
+
+### Design System Details
+
+- `modus-angular-color-usage.mdc` - Complete color system guide
+- `modus-angular-icons.mdc` - Complete icon usage guide
+- `modus-angular-semantic-html.mdc` - HTML patterns guide
+- `modus-angular-border-usage.mdc` - Complete border utilities guide
+- `modus-angular-opacity-utilities.mdc` - Complete opacity utilities guide
+- `modus-angular-tailwind-usage.mdc` - Complete Tailwind integration guide
+- `modus-angular-themes.mdc` - Complete theme implementation guide
+
+### Workflow & Testing
+
+- `modus-angular-development-workflow.mdc` - Complete workflow guide
+- `modus-angular-chrome-devtools-testing.mdc` - Complete testing guide
+- `modus-angular-implementation-guides.mdc` - Complete implementation guide structure
+
+### UX Foundations
+
+- `ux/ux-ui-foundations.mdc` - UI/UX foundations with Modus 2 + Tailwind
+- `ux/gestalt-laws-detailed.mdc` - Gestalt Laws implementation guide
+
+## Quick Start Guide
+
+### Working with Components
+
+1. Check component-specific short rule (always applied)
+2. For details, reference full rule: `@modus-angular-[component]`
+3. Use wrapper components, not web components directly
+
+### Working with Design System
+
+1. Short rules provide essential patterns (always applied)
+2. For details, reference full rule: `@modus-angular-[topic]`
+3. For icon names: `@modus-angular-icons`
+
+### Common Patterns
+
+**Colors**: Always use design system colors (`bg-background`, `text-foreground`, etc.)
+
+**Icons**: Use Modus icons exclusively (`<i class="modus-icons">icon_name</i>`)
+- Icon names use underscores: `save_disk`, `arrow_left`
+
+**Components**: Use wrapper components (`<modus-button>` not `<modus-wc-button>`)
+
+**State Management**: Let Modus components manage their own state where appropriate
+
+**Angular Patterns**:
+- Use `input()`, `output()`, `signal()`, `computed()`
+- Use `inject()` for dependency injection
+- Use `ChangeDetectionStrategy.OnPush`
+- Use `@if`, `@for`, `@switch` control flow
+
+## Rule Application
+
+Rules are applied automatically based on:
+
+1. **Always Apply**: Short rules with `alwaysApply: true`
+2. **File Patterns**: Rules activate when working with matching files (`globs`)
+3. **Context Matching**: Agent applies rules based on description relevance
+4. **Manual Reference**: Use `@rule-name` to explicitly reference a rule
+
+## Best Practices
+
+When working with Modus Angular:
+
+1. **Follow Short Rules**: Essential patterns are always available
+2. **Reference Full Rules**: Use `@rule-name` for detailed guidance
+3. **Run Linting**: Use `npm run lint:all` before committing
+4. **Test All Themes**: Verify components work in all 6 themes
+5. **Use DevTools**: Test implementations in browser
+
+## Getting Help
+
+- **Rule Documentation**: See rules in `.cursor/rules/` directory
+- **Project Guide**: See `CLAUDE.md` in project root
+- **Component Reference**: See `modus-angular-essentials.mdc`
+
+## Rule Maintenance
+
+When adding or updating rules:
+
+1. Create/update short rule with `alwaysApply: true`
+2. Create/update full rule with `alwaysApply: false`
+3. Ensure descriptions match between short and full
+4. Add appropriate `globs:` patterns
+5. Use consistent naming: `modus-angular-[topic].mdc`
+
+---
+
+**Note**: This master rule is always applied to provide rule overview. For specific guidance, reference the appropriate detailed rule using `@rule-name` syntax.

package/templates/angular/.cursor/rules/modus-angular-modal-usage-short.mdc

@@ -0,0 +1,51 @@
+---
+description: Comprehensive rules for opening and closing Modus modals in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Modal Usage - Short
+
+Critical implementation patterns for Modus modals in Angular.
+
+## Key Rules
+
+- **Use document.getElementById for modal access** - Get the dialog element by ID
+- **Type-safe access** - Cast to `HTMLDialogElement | null`
+- **Check method existence** - `typeof dialog.showModal === 'function'`
+- **Use native dialog API** - `dialog.showModal()` and `dialog.close()`
+- **Never use querySelector with web component selectors**
+- **Use descriptive, kebab-case modal IDs**
+
+## Correct Pattern
+
+```typescript
+openModal(): void {
+  const dialog = document.getElementById('modal-id') as HTMLDialogElement | null;
+  if (dialog && typeof dialog.showModal === 'function') {
+    dialog.showModal();
+  }
+}
+
+closeModal(): void {
+  const dialog = document.getElementById('modal-id') as HTMLDialogElement | null;
+  if (dialog && typeof dialog.close === 'function') {
+    dialog.close();
+  }
+}
+```
+
+```html
+<modus-button (buttonClick)="openModal()">Open</modus-button>
+<modus-modal modalId="modal-id" [showClose]="true">
+  <h3 slot="header">Title</h3>
+  <div slot="content">Content</div>
+  <div slot="footer">
+    <modus-button (buttonClick)="closeModal()">Close</modus-button>
+  </div>
+</modus-modal>
+```
+
+## Reference
+
+For detailed modal patterns and advanced usage, fetch the full rule: `modus-angular-modal-usage`

package/templates/angular/.cursor/rules/modus-angular-modal-usage.mdc

@@ -0,0 +1,115 @@
+---
+description: Comprehensive rules for opening and closing Modus modals in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modal Usage Rules
+
+Comprehensive rules for opening and closing Modus modals in Angular applications.
+
+## CORRECT: How to Open/Close Modals
+
+### Pattern: Use `document.getElementById()` with HTMLDialogElement
+
+**The Modus modal component creates an HTML `<dialog>` element with the `modalId` as its `id` attribute. Always use the native HTMLDialogElement API to open/close modals.**
+
+```typescript
+openModal(): void {
+  const dialog = document.getElementById('modal-id') as HTMLDialogElement | null;
+  if (dialog && typeof dialog.showModal === 'function') {
+    dialog.showModal();
+  }
+}
+
+closeModal(): void {
+  const dialog = document.getElementById('modal-id') as HTMLDialogElement | null;
+  if (dialog && typeof dialog.close === 'function') {
+    dialog.close();
+  }
+}
+```
+
+### Template Usage
+
+```html
+<modus-button color="primary" (buttonClick)="openModal()">Open Modal</modus-button>
+<modus-modal modalId="modal-id" [showClose]="true">
+  <h3 slot="header">Modal Title</h3>
+  <div slot="content">
+    <p>Modal content here</p>
+  </div>
+  <div slot="footer">
+    <modus-button color="secondary" (buttonClick)="closeModal()">Close</modus-button>
+  </div>
+</modus-modal>
+```
+
+## WRONG: Common Mistakes
+
+### DON'T Use `querySelector` with Web Component Selector
+
+```typescript
+// WRONG: This doesn't work
+openModal(): void {
+  const modal = document.querySelector('modus-wc-modal[modal-id="modal-id"]') as any;
+  if (modal) {
+    modal.open(); // Web component doesn't have an open() method
+  }
+}
+```
+
+### DON'T Use Template References on Wrapper Component
+
+```typescript
+// WRONG: Can't directly call methods on Angular wrapper
+@ViewChild(ModusModalComponent) modal!: ModusModalComponent;
+
+openModal(): void {
+  this.modal.open(); // Method doesn't exist
+}
+```
+
+## Best Practices
+
+### 1. Always Use `getElementById` with ModalId
+
+```typescript
+openModal(modalId: string): void {
+  const dialog = document.getElementById(modalId) as HTMLDialogElement | null;
+  if (dialog && typeof dialog.showModal === 'function') {
+    dialog.showModal();
+  }
+}
+```
+
+### 2. Always Check for Method Existence
+
+```typescript
+const dialog = document.getElementById('modal-id') as HTMLDialogElement | null;
+if (dialog && typeof dialog.showModal === 'function') {
+  dialog.showModal();
+}
+```
+
+### 3. Use Consistent ModalId Naming
+
+```typescript
+<modus-modal modalId="basic-modal" />
+<modus-modal modalId="confirmation-modal" />
+<modus-modal modalId="fullscreen-modal" />
+```
+
+## Key Rules Summary
+
+1. **ALWAYS use `document.getElementById(modalId)`** - The modalId is used as the dialog element's id
+2. **ALWAYS cast to `HTMLDialogElement | null`** - Type-safe casting
+3. **ALWAYS check for method existence** - `typeof dialog.showModal === 'function'`
+4. **ALWAYS use `dialog.showModal()`** - Native HTMLDialogElement API
+5. **ALWAYS use `dialog.close()`** - Native HTMLDialogElement API
+6. **NEVER use `querySelector` with web component selectors**
+7. **NEVER try to call `open()` on the web component**
+
+---
+
+**Remember**: Modals use the native HTML `<dialog>` element API. Always use `document.getElementById(modalId)` to find the dialog element, then call `showModal()` or `close()` on it.

package/templates/angular/.cursor/rules/modus-angular-navbar-usage-short.mdc

@@ -0,0 +1,49 @@
+---
+description: Comprehensive guide for using the Modus Navbar component in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Navbar Usage - Short
+
+Critical patterns for Modus Navbar component in Angular.
+
+## Key Rules
+
+- **Set both `search` and `searchInput` in visibility** - Required for search expansion
+- **Use signals for navbar state** - Track searchInputOpen, menuOpen states
+- **Two-way bind search and menu states** - Bind property and handle event
+- **Explicitly set button visibility** - Buttons default to hidden except user
+- **Always provide userCard** - Required input for navbar
+- **Handle correct event types** - Clicks = `MouseEvent | KeyboardEvent`, state changes = `boolean`
+
+## Search Expansion Pattern
+
+```typescript
+<modus-navbar
+  [userCard]="userCard"
+  [visibility]="{ user: true, search: true, searchInput: true }"
+  [searchInputOpen]="searchInputOpen()"
+  (searchClick)="searchInputOpen.set(!searchInputOpen())"
+  (searchInputOpenChange)="searchInputOpen.set($event)"
+/>
+```
+
+## State Management
+
+```typescript
+readonly searchInputOpen = signal<boolean>(false);
+readonly mainMenuOpen = signal<boolean>(false);
+
+handleSearchClick(event: MouseEvent | KeyboardEvent): void {
+  this.searchInputOpen.set(!this.searchInputOpen());
+}
+
+handleMainMenuOpenChange(event: boolean): void {
+  this.mainMenuOpen.set(event);
+}
+```
+
+## Reference
+
+For detailed patterns and event handling, fetch the full rule: `modus-angular-navbar-usage`

package/templates/angular/.cursor/rules/modus-angular-navbar-usage.mdc

@@ -0,0 +1,146 @@
+---
+description: Comprehensive guide for using the Modus Navbar component in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Navbar Usage Rules
+
+Comprehensive guide for using the Modus Navbar component in Angular, covering search expansion, button visibility, event handling, and state management.
+
+## CRITICAL: Search Input Expansion
+
+### DO: Set Both `search` and `searchInput` in Visibility
+
+**For search to expand, you MUST set both visibility flags:**
+
+```typescript
+<modus-navbar
+  [userCard]="userCard"
+  [visibility]="{ user: true, search: true, searchInput: true }"
+  [searchInputOpen]="searchInputOpen()"
+  (searchClick)="handleSearchClick($event)"
+  (searchInputOpenChange)="handleSearchInputOpenChange($event)"
+/>
+```
+
+### DO: Two-Way Bind Search State
+
+```typescript
+readonly searchInputOpen = signal<boolean>(false);
+
+handleSearchClick(event: MouseEvent | KeyboardEvent): void {
+  this.searchInputOpen.set(!this.searchInputOpen());
+}
+
+handleSearchInputOpenChange(event: boolean): void {
+  if (this.searchInputOpen() !== event) {
+    this.searchInputOpen.set(event);
+  }
+}
+```
+
+## Button Visibility Patterns
+
+### DO: Set Visibility for Each Button
+
+```typescript
+<modus-navbar
+  [userCard]="userCard"
+  [visibility]="{
+    user: true,
+    search: true,
+    searchInput: true,
+    help: true,
+    apps: true,
+    notifications: true,
+    mainMenu: true
+  }"
+/>
+```
+
+**Default visibility settings:**
+
+```typescript
+readonly visibility = input<INavbarVisibility | undefined>({
+  ai: false,
+  apps: false,
+  help: false,
+  mainMenu: false,
+  notifications: false,
+  search: false,
+  searchInput: false,
+  user: true,
+});
+```
+
+## Event Handling Patterns
+
+### DO: Handle Events with Correct Types
+
+```typescript
+handleSearchClick(event: MouseEvent | KeyboardEvent): void {
+  this.searchInputOpen.set(!this.searchInputOpen());
+}
+
+handleMainMenuOpenChange(event: boolean): void {
+  this.mainMenuOpen.set(event);
+}
+
+handleSearchChange(event: { value: string }): void {
+  this.lastSearch.set(event.value);
+}
+```
+
+## State Management Patterns
+
+### DO: Use Signals for Navbar State
+
+```typescript
+export class NavbarComponent {
+  readonly searchInputOpen = signal<boolean>(false);
+  readonly lastSearch = signal<string>('');
+  readonly mainMenuOpen = signal<boolean>(false);
+  readonly notificationsMenuOpen = signal<boolean>(false);
+  readonly appsMenuOpen = signal<boolean>(false);
+}
+```
+
+### DO: Two-Way Bind Menu States
+
+```typescript
+<modus-navbar
+  [mainMenuOpen]="mainMenuOpen()"
+  [notificationsMenuOpen]="notificationsMenuOpen()"
+  [appsMenuOpen]="appsMenuOpen()"
+  (mainMenuOpenChange)="handleMainMenuOpenChange($event)"
+  (notificationsMenuOpenChange)="handleNotificationsMenuOpenChange($event)"
+  (appsMenuOpenChange)="handleAppsMenuOpenChange($event)"
+/>
+```
+
+## User Card Requirements
+
+### DO: Always Provide User Card
+
+```typescript
+readonly userCard: INavbarUserCard = {
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  avatarSrc: 'https://via.placeholder.com/64',
+  avatarAlt: 'User avatar',
+};
+```
+
+## Key Takeaways
+
+1. **Search Expansion**: Requires both `search: true` AND `searchInput: true` in visibility
+2. **State Management**: Always use signals for navbar state
+3. **Two-Way Binding**: Bind both property and event for search and menu states
+4. **Button Visibility**: Explicitly set all buttons you want visible in `visibility` object
+5. **Event Types**: Button clicks = `MouseEvent | KeyboardEvent`, state changes = `boolean`
+6. **User Card**: Always required - provide `userCard` input
+
+---
+
+**Remember**: The navbar component requires explicit configuration for all features. Nothing works by default except the user button!

package/templates/angular/.cursor/rules/modus-angular-no-emojis.mdc

@@ -0,0 +1,66 @@
+---
+description: Strict prohibition of emojis in Angular + Vite application
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus No Emojis - Angular
+
+Strict prohibition of emojis in Angular + Vite application.
+
+## Key Rules
+
+- **Never use emojis in code** - No emoji characters in any TypeScript, HTML, or CSS files
+- **Never use emojis in components** - No emoji in templates, content, or UI elements
+- **Never use emojis in content** - No emoji in text, descriptions, or user-facing content
+- **Use Modus icons instead** - Replace emojis with appropriate Modus icons
+- **Use Unicode characters for symbols** - Use proper Unicode symbols when needed
+- **Check all content** - Verify no emojis in comments, strings, or documentation
+- **Use linting to catch violations** - Automated checks for emoji usage
+
+## Correct Alternatives
+
+```html
+<!-- WRONG: Emoji usage -->
+<div class="text-foreground">Hello World! [wave emoji]</div>
+<div class="text-success">Success! [checkmark emoji]</div>
+<div class="text-warning">Warning! [warning emoji]</div>
+
+<!-- CORRECT: Use Modus icons -->
+<div class="text-foreground">
+  Hello World! <i class="modus-icons">hand</i>
+</div>
+<div class="text-success">
+  Success! <i class="modus-icons">check_circle</i>
+</div>
+<div class="text-warning">
+  Warning! <i class="modus-icons">warning</i>
+</div>
+```
+
+## Icon Alternatives for Common Emojis
+
+| Emoji | Modus Icon Alternative |
+|-------|----------------------|
+| checkmark | `check_circle` |
+| x mark | `cancel_circle` |
+| warning | `warning` |
+| info | `info` |
+| person | `person` |
+| email | `email` |
+| phone | `phone_mobile` |
+| search | `search` |
+| settings | `settings` |
+| home | `home` |
+| folder | `folder_closed` |
+| file | `file` |
+| save | `save_disk` |
+| delete | `delete` |
+
+## Validation
+
+Run linting to catch emoji violations:
+
+```bash
+npm run lint:all
+```

package/templates/angular/.cursor/rules/modus-angular-opacity-utilities-short.mdc

@@ -0,0 +1,43 @@
+---
+description: Essential opacity utilities for Modus Design System colors in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Opacity Utilities - Short
+
+Essential opacity utilities for Modus Design System colors in Angular + Vite.
+
+## Key Rules
+
+- **Use custom opacity utilities, not Tailwind /80 syntax** - `text-foreground-80` not `text-foreground/80`
+- **CSS variables don't work with Tailwind opacity modifiers** - Tailwind needs actual color values
+- **Use color-mix() for opacity variants** - Modern CSS function for proper opacity calculation
+- **All utilities defined in styles.css** - No Tailwind config changes needed
+- **Respects theme switching** - Works in all 6 Modus themes
+- **Use semantic color names** - `foreground`, `primary`, `destructive`, etc.
+
+## Available Utilities
+
+### Opacity Levels
+
+- **80%** - `text-foreground-80`, `bg-primary-80`, `border-destructive-80`
+- **60%** - `text-foreground-60`, `bg-primary-60`, `border-destructive-60`
+- **40%** - `text-foreground-40`, `bg-primary-40`, `border-destructive-40`
+- **20%** - `text-foreground-20`, `bg-primary-20`, `border-destructive-20`
+
+## Usage Examples
+
+```html
+<!-- WRONG: Tailwind syntax doesn't work -->
+<div class="text-foreground/80">Text with 80% opacity</div>
+
+<!-- CORRECT: Use custom opacity utilities -->
+<div class="text-foreground-80">Text with 80% opacity</div>
+<div class="bg-primary-60">Primary background with 60% opacity</div>
+<div class="border border-destructive-40">Destructive border with 40% opacity</div>
+```
+
+## Reference
+
+For detailed implementation patterns and advanced techniques, fetch the full rule: `modus-angular-opacity-utilities`