@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-checkbox-value-inversion.mdc

@@ -0,0 +1,92 @@
+---
+description: Critical bug fix for ModusWcCheckbox value property inversion in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# ModusWcCheckbox Value Inversion Bug in Angular
+
+## CRITICAL BUG: Checkbox Value Inversion
+
+**Problem**: The `modus-wc-checkbox` component has an inverted `value` property that causes unexpected behavior in Angular applications.
+
+**Bug Details**:
+
+- When checkbox is **checked**: `target.value` returns `false`
+- When checkbox is **unchecked**: `target.value` returns `true`
+- This is the **opposite** of what developers expect
+- The bug occurs in the `inputChange` event's `target.value` property
+
+## Solution: Invert the Value
+
+### Correct Pattern: Invert the Value
+
+```typescript
+// CORRECT: Always invert the value
+@Component({
+  template: `
+    <modus-checkbox
+      [value]="isChecked()"
+      (inputChange)="handleChange($event)"
+    >
+      Checkbox Label
+    </modus-checkbox>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckboxComponent {
+  readonly isChecked = signal(false);
+
+  handleChange(event: CustomEvent<InputEvent>): void {
+    const value = (event.target as HTMLModusWcCheckboxElement).value;
+    const actualChecked = !value; // CORRECT: Invert the value
+    this.isChecked.set(actualChecked);
+  }
+}
+```
+
+### Wrapper Component Pattern (Recommended)
+
+```typescript
+// CORRECT: Create a wrapper component that handles the inversion
+@Component({
+  selector: 'app-checkbox',
+  template: `
+    <modus-checkbox
+      [value]="value()"
+      [disabled]="disabled()"
+      [label]="label()"
+      (inputChange)="handleInputChange($event)"
+    >
+      <ng-content />
+    </modus-checkbox>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppCheckboxComponent {
+  readonly value = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly label = input<string>('');
+  readonly valueChange = output<boolean>();
+
+  handleInputChange(event: CustomEvent<InputEvent>): void {
+    // CRITICAL: Handle the value inversion bug
+    const rawValue = (event.target as HTMLModusWcCheckboxElement).value;
+    const actualValue = !rawValue; // CORRECT: Invert the value
+
+    this.valueChange.emit(actualValue);
+  }
+}
+```
+
+## Key Takeaways
+
+1. **Always Invert the Value**: `const actualChecked = !value` where `value` comes from `event.target.value`
+2. **Use Correct Event**: Listen to `inputChange` event on the modus-checkbox
+3. **Access Target Value**: Use `(event.target as HTMLModusWcCheckboxElement).value`
+4. **Create Wrapper Components**: Best practice is to handle inversion in a wrapper component
+5. **Test the Inversion**: Always test checkbox behavior with state management
+
+---
+
+**Remember: This is a critical bug in the modus-wc-checkbox component. Always invert the value property to get the correct checked state.**

package/templates/angular/.cursor/rules/modus-angular-chrome-devtools-testing-short.mdc

@@ -0,0 +1,34 @@
+---
+description: Chrome DevTools MCP usage for comprehensive Angular + Vite testing
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Chrome DevTools Testing - Short
+
+Mandatory Chrome DevTools MCP usage for comprehensive Angular + Vite testing.
+
+## Key Rules
+
+- **Always use Chrome DevTools MCP** - Never skip browser testing
+- **Test before completion** - Validate all implementations in browser
+- **Check console for errors** - Look for JavaScript errors and warnings
+- **Inspect DOM structure** - Verify proper HTML structure and component rendering
+- **Test interactive elements** - Verify Modus Web Components work correctly
+- **Performance testing** - Use DevTools for performance analysis
+- **Test all 6 themes** - Verify components work in all Modus themes
+
+## Testing Checklist
+
+- [ ] No console errors or warnings
+- [ ] Components render correctly
+- [ ] Events fire and handle properly
+- [ ] Forms validate correctly
+- [ ] Modals open/close with native dialog API
+- [ ] All 6 themes display correctly
+- [ ] Keyboard navigation works
+- [ ] Accessibility attributes present
+
+## Reference
+
+For detailed testing workflows and checklists, fetch the full rule: `modus-angular-chrome-devtools-testing`

package/templates/angular/.cursor/rules/modus-angular-chrome-devtools-testing.mdc

@@ -0,0 +1,185 @@
+---
+description: Chrome DevTools MCP usage for comprehensive Angular + Vite testing
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Chrome DevTools Testing - Angular + Vite
+
+Comprehensive Chrome DevTools usage for Angular + Vite application testing.
+
+## Key Rules
+
+- **Always use Chrome DevTools MCP** - Never skip browser testing
+- **Test before completion** - Validate all implementations in browser
+- **Check console for errors** - Look for JavaScript errors and warnings
+- **Inspect DOM structure** - Verify proper HTML structure and component rendering
+- **Test interactive elements** - Verify Modus Web Components work correctly
+- **Performance testing** - Use DevTools for performance analysis
+- **Cross-browser validation** - Test in Chrome, Firefox, Safari
+
+## Testing Workflow
+
+### 1. Pre-Development Check
+
+```bash
+# Start development server
+npm start
+
+# Open browser at http://localhost:4200
+```
+
+### 2. Console Error Checking
+
+Look for:
+- JavaScript/TypeScript errors
+- Angular warnings
+- Modus Web Component initialization errors
+- Network request failures
+- CSP violations
+
+### 3. DOM Inspection
+
+Verify:
+- Modus components render correctly
+- Wrapper components pass props correctly
+- Event listeners are attached
+- Styles are applied correctly
+
+### 4. Network Tab
+
+Check:
+- API requests complete successfully
+- Fonts and icons load correctly
+- No 404 errors for assets
+
+### 5. Performance Testing
+
+Monitor:
+- Component render times
+- Memory usage
+- Change detection cycles
+- Bundle size impact
+
+## Testing Checklist
+
+### Component Testing
+
+- [ ] Component renders without console errors
+- [ ] Props/inputs are passed correctly to Modus components
+- [ ] Events emit correctly
+- [ ] Styles match design system
+- [ ] Accessibility attributes present
+
+### Form Testing
+
+- [ ] Input values update correctly
+- [ ] Validation errors display
+- [ ] Form submission works
+- [ ] Checkbox value inversion handled
+
+### Navigation Testing
+
+- [ ] Routes work correctly
+- [ ] Side navigation expands/collapses
+- [ ] Menu items are accessible
+- [ ] Active states highlight correctly
+
+### Theme Testing
+
+- [ ] All 6 themes work correctly
+- [ ] Theme switching persists
+- [ ] Colors update appropriately
+- [ ] No flash of unstyled content
+
+### Modal Testing
+
+- [ ] Modal opens with `showModal()`
+- [ ] Modal closes with `close()`
+- [ ] Focus trapping works
+- [ ] ESC key closes modal
+
+## Common Issues to Check
+
+### Modus Component Issues
+
+```typescript
+// Check for proper component initialization
+const button = document.querySelector('modus-wc-button');
+console.log('Button initialized:', button);
+
+// Check for event binding
+const checkbox = document.querySelector('modus-wc-checkbox');
+console.log('Checkbox value:', checkbox?.value);
+```
+
+### Angular-Specific Issues
+
+```typescript
+// Check for change detection issues
+// Components should use OnPush
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+// Check signal updates
+console.log('Signal value:', this.mySignal());
+```
+
+### Event Handling Issues
+
+```typescript
+// Verify CustomEvent.detail extraction
+handleEvent(event: CustomEvent<{ value: string }>): void {
+  console.log('Event detail:', event.detail);
+  console.log('Value:', event.detail.value);
+}
+```
+
+## Performance Metrics
+
+### Target Metrics
+
+- First Contentful Paint: < 1.5s
+- Time to Interactive: < 3s
+- Largest Contentful Paint: < 2.5s
+- Cumulative Layout Shift: < 0.1
+
+### Monitoring Tools
+
+- Lighthouse audit
+- Performance tab profiling
+- Network throttling tests
+- Memory leak detection
+
+## Accessibility Testing
+
+### Screen Reader Testing
+
+- Labels are announced correctly
+- Focus order is logical
+- ARIA attributes are present
+- Interactive elements are accessible
+
+### Keyboard Navigation
+
+- Tab order is correct
+- Enter/Space activate buttons
+- ESC closes modals/dropdowns
+- Arrow keys navigate menus
+
+## Theme Testing Protocol
+
+1. Switch to each theme:
+   - `modus-classic-light`
+   - `modus-classic-dark`
+   - `modus-modern-light`
+   - `modus-modern-dark`
+   - `connect-light`
+   - `connect-dark`
+
+2. Verify for each theme:
+   - Colors are correct
+   - Contrast is adequate
+   - No styling issues
+   - Icons are visible

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

@@ -0,0 +1,56 @@
+---
+description: Essential color usage rules for Modus Design System integration in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Color Usage - Short
+
+Essential color usage rules for Modus Design System integration.
+
+## Key Rules
+
+- **Use design system colors only** - `bg-background`, `text-foreground`, `bg-primary`, etc.
+- **Never use generic Tailwind colors** - No `bg-blue-500`, `text-gray-600`, etc.
+- **Never use hardcoded values** - No hex colors, RGB values, or CSS variables directly
+- **Use semantic color names** - `bg-destructive`, `text-warning`, `bg-success`
+- **Follow color hierarchy** - Background > Card > Primary > Secondary > Muted
+- **Test in all themes** - Ensure colors work in light and dark modes
+
+## 9 Core Colors
+
+- **background** - `bg-background` (page background)
+- **foreground** - `text-foreground` (primary text)
+- **card** - `bg-card` (card backgrounds)
+- **muted** - `bg-muted` (subtle backgrounds)
+- **secondary** - `bg-secondary` (secondary UI)
+- **primary** - `bg-primary` (primary actions)
+- **success** - `bg-success` (success states)
+- **warning** - `bg-warning` (warning states)
+- **destructive** - `bg-destructive` (error states)
+
+## Correct Patterns
+
+```html
+<!-- CORRECT: Design system colors -->
+<div class="bg-background text-foreground"></div>
+<div class="bg-card text-card-foreground border-default"></div>
+<div class="bg-primary text-primary-foreground"></div>
+```
+
+## Forbidden Patterns
+
+```html
+<!-- WRONG: Generic Tailwind colors -->
+<div class="bg-blue-500 text-white"></div>
+
+<!-- WRONG: Hardcoded colors -->
+<div [style.background-color]="'#ffffff'"></div>
+
+<!-- WRONG: Raw Modus variables -->
+<div class="bg-[var(--modus-wc-color-base-page)]"></div>
+```
+
+## Reference
+
+For detailed color system guide and patterns, fetch the full rule: `modus-angular-color-usage`

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

@@ -0,0 +1,208 @@
+---
+description: Essential color usage rules for Modus Design System integration in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modus Color Usage in Angular + Vite
+
+## Design System Color Architecture
+
+This Angular + Vite application uses a **9-color design system** that maps Figma variables to Modus's color system, available as Tailwind classes.
+
+**Color System**: 9 Modus colors mapped to design system variables in `src/styles.css`
+
+## FORBIDDEN: Raw Modus CSS Variables
+
+### Never Use Raw Modus Variables
+
+```html
+<!-- WRONG: Raw Modus CSS variables -->
+<div [style.background-color]="'var(--modus-wc-color-base-page)'"></div>
+<div [style.color]="'var(--modus-wc-color-base-content)'"></div>
+
+<!-- WRONG: Direct Modus variable usage in classes -->
+<div class="bg-[var(--modus-wc-color-base-page)]"></div>
+<div class="text-[var(--modus-wc-color-base-content)]"></div>
+```
+
+### Never Use Hardcoded Colors
+
+```html
+<!-- WRONG: Hardcoded hex/RGB values -->
+<div [style.background-color]="'#ffffff'"></div>
+<div [style.color]="'#000000'"></div>
+
+<!-- WRONG: Hardcoded colors in Tailwind -->
+<div class="bg-[#ffffff]"></div>
+<div class="text-[#000000]"></div>
+```
+
+### Never Use Generic Tailwind Colors
+
+```html
+<!-- WRONG: Generic Tailwind color classes -->
+<div class="bg-blue-500"></div>
+<div class="text-red-400"></div>
+<div class="border-green-300"></div>
+<div class="bg-gray-100"></div>
+```
+
+## CORRECT: Design System Colors
+
+### Use Design System Tailwind Classes
+
+```html
+<!-- CORRECT: Design system colors -->
+<div class="bg-background text-foreground"></div>
+<div class="bg-card text-card-foreground"></div>
+<div class="bg-primary text-primary-foreground"></div>
+<div class="bg-secondary text-secondary-foreground"></div>
+<div class="bg-muted text-muted-foreground"></div>
+<div class="bg-destructive text-destructive-foreground"></div>
+<div class="bg-warning text-warning-foreground"></div>
+<div class="bg-success text-success-foreground"></div>
+```
+
+### 9 Core Colors
+
+| Semantic Name | Modus Variable | Usage |
+|---------------|----------------|-------|
+| `background` | `--modus-wc-color-base-page` | Page background |
+| `foreground` | `--modus-wc-color-base-content` | Primary text |
+| `card` | `--modus-wc-color-base-100` | Card backgrounds |
+| `muted` | `--modus-wc-color-base-200` | Subtle backgrounds, borders |
+| `secondary` | `--modus-wc-color-base-300` | Secondary UI elements |
+| `primary` | `--modus-wc-color-info` | Primary actions, info |
+| `success` | `--modus-wc-color-success` | Success states |
+| `warning` | `--modus-wc-color-warning` | Warning states |
+| `destructive` | `--modus-wc-color-error` | Error/destructive states |
+
+## Color Usage Patterns
+
+### Component Color Patterns
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-card text-card-foreground border-default rounded-lg p-4">
+      <ng-content />
+    </div>
+  `,
+})
+export class CardComponent {}
+```
+
+### Status Color Patterns
+
+```typescript
+@Component({
+  template: `
+    <div [class]="statusClasses()">
+      {{ status() }}
+    </div>
+  `,
+})
+export class StatusIndicatorComponent {
+  readonly status = input<'success' | 'warning' | 'error'>('success');
+  
+  readonly statusClasses = computed(() => {
+    const variants = {
+      success: 'bg-success text-success-foreground',
+      warning: 'bg-warning text-warning-foreground',
+      error: 'bg-destructive text-destructive-foreground',
+    };
+    return `px-3 py-1 rounded ${variants[this.status()]}`;
+  });
+}
+```
+
+### Alert Component
+
+```typescript
+@Component({
+  template: `
+    <div [class]="alertClasses()">
+      <ng-content />
+    </div>
+  `,
+})
+export class AlertComponent {
+  readonly type = input<'success' | 'warning' | 'error' | 'info'>('info');
+  
+  readonly alertClasses = computed(() => {
+    const variants = {
+      success: 'bg-success text-success-foreground border-success',
+      warning: 'bg-warning text-warning-foreground border-warning',
+      error: 'bg-destructive text-destructive-foreground border-destructive',
+      info: 'bg-primary text-primary-foreground border-primary',
+    };
+    return `p-4 rounded border ${variants[this.type()]}`;
+  });
+}
+```
+
+### Theme-Aware Color Patterns
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-background text-foreground transition-colors duration-200">
+      <div class="text-foreground">Title</div>
+      <div class="text-muted-foreground">Description</div>
+    </div>
+  `,
+})
+export class ThemedComponent {
+  private themeService = inject(ThemeService);
+  readonly isDark = this.themeService.isDark;
+}
+```
+
+## Common Anti-Patterns
+
+### Don't Mix Color Systems
+
+```html
+<!-- WRONG: Mixing design system and generic colors -->
+<div class="bg-background text-blue-500 border-red-300">
+  Mixed color systems
+</div>
+
+<!-- WRONG: Using both design system and hardcoded colors -->
+<div class="bg-card" [style.color]="'#ff0000'">
+  Mixed approaches
+</div>
+```
+
+### Don't Override Design System Colors
+
+```html
+<!-- WRONG: Overriding design system colors -->
+<div class="bg-background" [style.background-color]="'#custom-color'">
+  Overriding design system
+</div>
+```
+
+## Validation
+
+### Linting Commands
+
+```bash
+# Check for color violations
+npm run lint:colors
+
+# Check for inline styles
+npm run lint:styles
+
+# Check for border violations
+npm run lint:borders
+```
+
+## Key Takeaways
+
+1. **Use Design System Colors**: Always use `bg-background`, `text-foreground`, etc.
+2. **Never Use Raw Variables**: Don't use `var(--modus-wc-color-*)` directly
+3. **Never Use Hardcoded Colors**: No hex, RGB, or generic Tailwind colors
+4. **Test Color Combinations**: Ensure proper contrast and accessibility
+5. **Follow Color Patterns**: Use established patterns for consistency

package/templates/angular/.cursor/rules/modus-angular-components-reference.mdc

@@ -0,0 +1,114 @@
+---
+description: Comprehensive reference guide for Modus Web Components in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modus Components Reference
+
+Comprehensive reference guide for all Modus Design System components available in this Angular + Vite application.
+
+## Component Categories
+
+### Layout & Navigation Components
+
+- **ModusAccordion** - Collapsible content sections
+- **ModusBreadcrumbs** - Navigation breadcrumb trail
+- **ModusNavbar** - Main application navigation bar
+- **ModusSideNavigation** - Collapsible sidebar navigation
+- **ModusTabs** - Tabbed interface for organizing content
+- **ModusToolbar** - Toolbar container with content slots
+- **ModusUtilityPanel** - Slide-out utility panel
+
+### Form & Input Components
+
+- **ModusAutocomplete** - Text input with dropdown suggestions
+- **ModusCheckbox** - Checkbox input with value inversion bug handling
+- **ModusDate** - Date input with calendar picker
+- **ModusDropdownMenu** - Dropdown menu with button trigger
+- **ModusNumberInput** - Number input with validation
+- **ModusRadio** - Radio button input
+- **ModusSelect** - Dropdown select input
+- **ModusSlider** - Range slider input
+- **ModusSwitch** - Toggle switch for boolean values
+- **ModusTextarea** - Multi-line text input
+- **ModusTextInput** - Single-line text input
+- **ModusTimeInput** - Time input with time picker
+
+### Display & Feedback Components
+
+- **ModusAlert** - Alert messages with severity levels
+- **ModusBadge** - Small status indicators
+- **ModusCard** - Content container
+- **ModusChip** - Small interactive elements for tags
+- **ModusDivider** - Visual separator
+- **ModusInputFeedback** - Feedback messages for form inputs
+- **ModusInputLabel** - Label component for form inputs
+- **ModusLoader** - Loading indicators
+- **ModusProgress** - Progress bars
+- **ModusSkeleton** - Placeholder content while loading
+- **ModusToast** - Temporary notification messages
+- **ModusTooltip** - Hover tooltips
+
+### Data & Table Components
+
+- **ModusTable** - Data table with sorting, pagination, editing
+- **ModusPagination** - Page navigation
+
+### Interactive Components
+
+- **ModusButton** - Interactive button
+- **ModusMenu** - Menu container with menu items
+- **ModusMenuItem** - Individual menu item
+- **ModusRating** - Star or emoji rating input
+- **ModusStepper** - Step indicator for multi-step processes
+
+### Media & Icon Components
+
+- **ModusAvatar** - User profile image or initials
+- **ModusIcon** - Icon display using Modus icon system
+
+### System & Utility Components
+
+- **ModusThemeSwitcher** - Theme switching control
+
+## Component Usage Patterns
+
+### Signal-Based API
+
+All wrapper components use Angular's signal-based API:
+
+```typescript
+readonly color = input<ButtonColor>('primary');
+readonly disabled = input<boolean>(false);
+readonly buttonClick = output<MouseEvent | KeyboardEvent>();
+```
+
+### Event Handling
+
+Components properly extract `event.detail` from CustomEvents:
+
+```typescript
+handleButtonClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+  if (!this.disabled()) {
+    this.buttonClick.emit(event.detail);
+  }
+}
+```
+
+## Import Pattern
+
+```typescript
+import {
+  ModusButtonComponent,
+  ModusAlertComponent,
+  ModusIconComponent,
+} from '@/app/components';
+```
+
+## Notes
+
+- All components are TypeScript-enabled with proper type definitions
+- Components follow Angular 20+ best practices with signals
+- Integration with Modus Web Components is handled through wrapper components
+- Always use wrapper selectors (`<modus-button>`) not web component selectors (`<modus-wc-button>`)