@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/pages/home/home.component.ts

@@ -0,0 +1,251 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Home page component.
+ *
+ * This is the main landing page for the user's application.
+ * Edit this component to create your own home page.
+ *
+ * Getting Started:
+ * 1. Customize the hero section with your app's branding
+ * 2. Add your own features and content
+ * 3. Use Ctrl+Shift+D to open the Dev Panel for component reference
+ */
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, ModusButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="min-h-screen flex flex-col bg-background">
+      <div class="flex-1 flex flex-col items-center p-8">
+        <div class="max-w-4xl w-full space-y-8">
+          <!-- Header -->
+          <div class="text-center space-y-4">
+            <div class="text-4xl font-bold text-foreground">Modus Angular App</div>
+            <div class="text-xl text-foreground-60">
+              A production-ready Angular boilerplate with Modus Design System integration.
+            </div>
+          </div>
+
+          <!-- Dev Panel Hint -->
+          <div class="flex justify-center">
+            <modus-button color="primary" size="lg" (buttonClick)="openDevPanel()">
+              <div class="flex items-center gap-2">
+                <i class="modus-icons">code</i>
+                <div>Open Dev Panel</div>
+              </div>
+            </modus-button>
+          </div>
+
+          <!-- Getting Started -->
+          <div class="bg-card border-default rounded-lg p-6 space-y-4">
+            <div class="text-lg font-semibold text-foreground">Getting Started</div>
+            <div class="space-y-4 text-foreground-80">
+              <div class="flex gap-3">
+                <div
+                  class="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold"
+                >
+                  1
+                </div>
+                <div>
+                  <div class="font-medium text-foreground">Build Your App</div>
+                  <div class="text-sm text-foreground-60">
+                    Start developing in
+                    <code class="px-1 py-0.5 bg-muted rounded text-sm">src/app/pages/</code>
+                    - add your routes in
+                    <code class="px-1 py-0.5 bg-muted rounded text-sm">app.routes.ts</code>.
+                  </div>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div
+                  class="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold"
+                >
+                  2
+                </div>
+                <div>
+                  <div class="font-medium text-foreground">Use the Dev Panel</div>
+                  <div class="text-sm text-foreground-60">
+                    Press
+                    <div class="inline px-1.5 py-0.5 bg-muted rounded text-xs font-mono">
+                      Ctrl+Shift+D
+                    </div>
+                    to browse components, colors, and icons.
+                  </div>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div
+                  class="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold"
+                >
+                  3
+                </div>
+                <div>
+                  <div class="font-medium text-foreground">Deploy</div>
+                  <div class="text-sm text-foreground-60">
+                    In production, the Dev Panel is automatically hidden. Your app ships clean.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- MCP Servers -->
+          <div class="bg-card border-default rounded-lg p-6 space-y-4">
+            <div class="text-lg font-semibold text-foreground">MCP Servers Included</div>
+            <div class="text-sm text-foreground-60 mb-4">
+              Pre-configured Model Context Protocol servers for AI-assisted development.
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="p-4 bg-muted rounded-lg">
+                <div class="font-medium text-foreground mb-1">Modus Docs MCP</div>
+                <div class="text-sm text-foreground-60">
+                  Access Modus Web Components documentation directly in your AI assistant. Get
+                  component props, usage examples, and best practices.
+                </div>
+              </div>
+              <div class="p-4 bg-muted rounded-lg">
+                <div class="font-medium text-foreground mb-1">Context7 MCP</div>
+                <div class="text-sm text-foreground-60">
+                  Up-to-date library documentation for Angular, Vite, Tailwind, and other
+                  dependencies.
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cursor Rules -->
+          <div class="bg-card border-default rounded-lg p-6 space-y-4">
+            <div class="text-lg font-semibold text-foreground">AI-Powered Development Rules</div>
+            <div class="text-sm text-foreground-60 mb-4">
+              Comprehensive Cursor rules ensure consistent, high-quality code generation.
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">widgets</i>
+                  <div>
+                    <div class="font-medium text-foreground">Component Patterns</div>
+                    <div class="text-sm text-foreground-60">
+                      Angular integration, state management, event handling for Modus Web Components
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">palette</i>
+                  <div>
+                    <div class="font-medium text-foreground">Design System Compliance</div>
+                    <div class="text-sm text-foreground-60">
+                      Color usage, border utilities, opacity patterns, icon guidelines
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">accessibility</i>
+                  <div>
+                    <div class="font-medium text-foreground">Accessibility Standards</div>
+                    <div class="text-sm text-foreground-60">
+                      Semantic HTML patterns, ARIA attributes, keyboard navigation
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="space-y-3">
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">dashboard</i>
+                  <div>
+                    <div class="font-medium text-foreground">UX Foundations</div>
+                    <div class="text-sm text-foreground-60">
+                      Gestalt laws, visual hierarchy, spacing rhythms, interaction patterns
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">wrench</i>
+                  <div>
+                    <div class="font-medium text-foreground">Development Workflow</div>
+                    <div class="text-sm text-foreground-60">
+                      Linting commands, quality gates, testing procedures
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-start gap-2">
+                  <i class="modus-icons text-primary mt-0.5">bug</i>
+                  <div>
+                    <div class="font-medium text-foreground">Known Issues</div>
+                    <div class="text-sm text-foreground-60">
+                      Checkbox value inversion, modal patterns, select vs dropdown
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quality Automation -->
+          <div class="bg-card border-default rounded-lg p-6 space-y-4">
+            <div class="text-lg font-semibold text-foreground">Quality Automation</div>
+            <div class="text-sm text-foreground-60 mb-4">
+              Pre-configured Husky hooks and GitHub workflows for automated quality assurance.
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="p-4 bg-muted rounded-lg">
+                <div class="font-medium text-foreground mb-2">Pre-commit Hooks</div>
+                <div class="text-sm text-foreground-60 space-y-1">
+                  <div>TypeScript type checking</div>
+                  <div>Design system color validation</div>
+                  <div>Modus icon usage verification</div>
+                  <div>Border and opacity pattern checks</div>
+                </div>
+              </div>
+              <div class="p-4 bg-muted rounded-lg">
+                <div class="font-medium text-foreground mb-2">Linting Scripts</div>
+                <div class="text-sm text-foreground-60 space-y-1">
+                  <div>Inline style detection</div>
+                  <div>Semantic HTML enforcement</div>
+                  <div>Icon name validation (700+ icons)</div>
+                  <div>
+                    Run all checks with
+                    <code class="px-1 py-0.5 bg-background rounded text-xs font-mono"
+                      >npm run lint:all</code
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="text-center pt-8 box-content">
+            <div class="flex items-center justify-center gap-3 mb-3">
+              <img src="/angular-icon.svg" alt="Angular" class="h-6 w-6" aria-hidden="true" />
+              <div class="text-foreground-40">+</div>
+              <img src="/vite.svg" alt="Vite" class="h-6 w-6" aria-hidden="true" />
+            </div>
+            <div class="text-sm font-mono text-foreground-40">
+              2026 Modus Angular App v1.0.0 + Angular 20 + Vite + Tailwind CSS - Created by Julian
+              Oczkowski
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class HomeComponent {
+  /**
+   * Opens the Dev Panel by dispatching a keyboard event for Ctrl+Shift+D.
+   */
+  openDevPanel(): void {
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        ctrlKey: true,
+        shiftKey: true,
+        key: 'd',
+      }),
+    );
+  }
+}

package/templates/angular/src/app/services/README.md

@@ -0,0 +1,57 @@
+# Theme Service
+
+The `ThemeService` manages Modus theme switching in the Angular application.
+
+## Features
+
+- **Theme Management**: Switch between Modus Classic, Modern, and Connect themes
+- **Mode Toggle**: Toggle between light and dark modes
+- **Persistence**: Theme preferences are saved to localStorage
+- **System Theme Detection**: Automatically detects and applies system theme preference if no user preference is set
+- **Reactive**: Uses Angular signals for reactive theme updates
+
+## Available Themes
+
+- `modus-classic` (Classic theme)
+- `modus-modern` (Modern theme)
+- `connect` (Connect theme)
+
+Each theme supports both `light` and `dark` modes.
+
+## Usage
+
+```typescript
+import { ThemeService } from './services/theme.service';
+
+export class MyComponent {
+  constructor(private themeService: ThemeService) {
+    // Get current theme
+    const theme = this.themeService.theme();
+    const mode = this.themeService.mode();
+    
+    // Set theme
+    this.themeService.setTheme('modus-modern', 'dark');
+    
+    // Toggle mode
+    this.themeService.toggleMode();
+    
+    // Set theme name only
+    this.themeService.setThemeName('modus-classic');
+    
+    // Set mode only
+    this.themeService.setMode('light');
+  }
+}
+```
+
+## Theme Service API
+
+- `theme: Signal<ThemeName>` - Current theme name signal
+- `mode: Signal<ThemeMode>` - Current mode signal
+- `setTheme(theme: ThemeName, mode?: ThemeMode): void` - Set theme and mode
+- `setThemeName(theme: ThemeName): void` - Set theme name
+- `setMode(mode: ThemeMode): void` - Set mode
+- `toggleMode(): void` - Toggle between light and dark
+- `getThemeConfig(): ThemeConfig` - Get current theme configuration
+- `getFullThemeName(): string` - Get full theme name (e.g., "modus-modern-light")
+

package/templates/angular/src/app/services/theme.service.ts

@@ -0,0 +1,163 @@
+import { Injectable, signal } from '@angular/core';
+
+export type ThemeName = 'modus-classic' | 'modus-modern' | 'connect';
+export type ThemeMode = 'light' | 'dark';
+
+export interface ThemeConfig {
+  theme: ThemeName;
+  mode: ThemeMode;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private readonly STORAGE_KEY = 'modus-theme-config';
+
+  // Current theme state
+  private _theme = signal<ThemeName>('modus-modern');
+  private _mode = signal<ThemeMode>('light');
+
+  // Public signals for components to react to
+  readonly theme = this._theme.asReadonly();
+  readonly mode = this._mode.asReadonly();
+
+  constructor() {
+    this.loadTheme();
+    this.watchSystemTheme();
+  }
+
+  /**
+   * Initialize theme from localStorage or use default
+   */
+  private loadTheme(): void {
+    try {
+      const stored = localStorage.getItem(this.STORAGE_KEY);
+      if (stored) {
+        const config: ThemeConfig = JSON.parse(stored);
+        this.setTheme(config.theme, config.mode);
+        return;
+      }
+    } catch (error) {
+      console.warn('Failed to load theme from localStorage:', error);
+    }
+
+    // Default theme
+    this.setTheme('modus-modern', 'light');
+  }
+
+  /**
+   * Watch system theme preference and update if user hasn't set a preference
+   */
+  private watchSystemTheme(): void {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      // Only apply system theme if no user preference is stored
+      if (!localStorage.getItem(this.STORAGE_KEY)) {
+        this._mode.set(e.matches ? 'dark' : 'light');
+        this.updateThemeAttributes();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    handleChange(mediaQuery);
+  }
+
+  /**
+   * Set theme and mode
+   */
+  setTheme(theme: ThemeName, mode?: ThemeMode): void {
+    this._theme.set(theme);
+    if (mode) {
+      this._mode.set(mode);
+    }
+    this.updateThemeAttributes();
+    this.saveTheme();
+  }
+
+  /**
+   * Toggle between light and dark mode
+   */
+  toggleMode(): void {
+    this._mode.set(this._mode() === 'light' ? 'dark' : 'light');
+    this.updateThemeAttributes();
+    this.saveTheme();
+  }
+
+  /**
+   * Set theme name
+   */
+  setThemeName(theme: ThemeName): void {
+    this._theme.set(theme);
+    this.updateThemeAttributes();
+    this.saveTheme();
+  }
+
+  /**
+   * Set mode
+   */
+  setMode(mode: ThemeMode): void {
+    this._mode.set(mode);
+    this.updateThemeAttributes();
+    this.saveTheme();
+  }
+
+  /**
+   * Update HTML attributes for theme
+   * This matches the behavior of modus-wc-theme-provider
+   */
+  private updateThemeAttributes(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const root = document.documentElement;
+    const theme = this._theme();
+    const mode = this._mode();
+
+    // Update data-theme attribute (e.g., "modus-modern-light")
+    // This matches how modus-wc-theme-provider sets it
+    root.setAttribute('data-theme', `${theme}-${mode}`);
+    root.setAttribute('data-mode', mode);
+
+    // Update class for light/dark
+    root.classList.remove('light', 'dark');
+    root.classList.add(mode);
+  }
+
+  /**
+   * Save theme to localStorage
+   */
+  private saveTheme(): void {
+    try {
+      const config: ThemeConfig = {
+        theme: this._theme(),
+        mode: this._mode(),
+      };
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(config));
+    } catch (error) {
+      console.warn('Failed to save theme to localStorage:', error);
+    }
+  }
+
+  /**
+   * Get full theme name (e.g., "modus-modern-light")
+   */
+  getFullThemeName(): string {
+    return `${this._theme()}-${this._mode()}`;
+  }
+
+  /**
+   * Get current theme config
+   */
+  getThemeConfig(): ThemeConfig {
+    return {
+      theme: this._theme(),
+      mode: this._mode(),
+    };
+  }
+}

package/templates/angular/src/environments/environment.development.ts

@@ -0,0 +1,8 @@
+/**
+ * Development environment configuration.
+ * Dev panel is enabled in development mode.
+ */
+export const environment = {
+  production: false,
+  devPanel: true,
+};

package/templates/angular/src/environments/environment.ts

@@ -0,0 +1,8 @@
+/**
+ * Production environment configuration.
+ * Dev panel is disabled in production builds.
+ */
+export const environment = {
+  production: true,
+  devPanel: false,
+};

package/templates/angular/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Modus 2 Angular + Vite</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="/modus-icons.css" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));