@anglr/select 16.0.3 → 16.0.4-beta.20260511085948

package/.claude/skills/angular-developer/references/di-fundamentals.md

@@ -0,0 +1,120 @@
+# Dependency Injection (DI) Fundamentals
+
+Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
+
+## How DI Works in Angular
+
+There are two primary ways code interacts with Angular's DI system:
+
+1.  **Providing**: Making values (objects, functions, primitives) available to the DI system.
+2.  **Injecting**: Asking the DI system for those values.
+
+Angular components, directives, and services automatically participate in DI.
+
+## Services
+
+A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
+
+### Creating a Service
+
+Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
+
+```ts
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', // Makes this a singleton available everywhere
+})
+export class AnalyticsLogger {
+  trackEvent(category: string, value: string) {
+    console.log('Analytics event logged:', {category, value});
+  }
+}
+```
+
+Common uses for services include:
+
+- Data clients (API calls)
+- State management
+- Authentication and authorization
+- Logging and error handling
+- Utility functions
+
+## Injecting Dependencies
+
+Use Angular's `inject()` function to request dependencies.
+
+### The `inject()` Function
+
+You can use the `inject()` function to get an instance of a service (or any other provided token).
+
+```ts
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
+import {AnalyticsLogger} from './analytics-logger.service';
+
+@Component({
+  selector: 'app-navbar',
+  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
+})
+export class Navbar {
+  // Injecting dependencies using class field initializers
+  private router = inject(Router);
+  private analytics = inject(AnalyticsLogger);
+
+  navigateToDetail(event: Event) {
+    event.preventDefault();
+    this.analytics.trackEvent('navigation', '/details');
+    this.router.navigate(['/details']);
+  }
+}
+```
+
+### Where can `inject()` be used? (Injection Context)
+
+You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
+
+Valid places to call `inject()`:
+
+1.  **Class field initializers** (Recommended)
+2.  **Constructor body**
+3.  **Route guards and resolvers** (which are executed in an injection context)
+4.  **Factory functions** used in providers
+
+```typescript
+import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+// 1. In a Component (Field Initializer & Constructor)
+@Component({
+  /*...*/
+})
+export class Example {
+  private service1 = inject(MyService); // ✅ Field initializer
+
+  private service2: MyService;
+  constructor() {
+    this.service2 = inject(MyService); // ✅ Constructor body
+  }
+}
+
+// 2. In a Directive
+@Directive({
+  /*...*/
+})
+export class MyDirective {
+  private element = inject(ElementRef); // ✅ Field initializer
+}
+
+// 3. In a Service
+@Injectable({providedIn: 'root'})
+export class MyService {
+  private http = inject(HttpClient); // ✅ Field initializer
+}
+
+// 4. In a Route Guard (Functional)
+export const authGuard = () => {
+  const auth = inject(AuthService); // ✅ Route Guard
+  return auth.isAuthenticated();
+};
+```

package/.claude/skills/angular-developer/references/e2e-testing.md

@@ -0,0 +1,66 @@
+# End-to-End (E2E) Testing
+
+This project uses [Cypress](https://www.cypress.io/) for end-to-end (E2E) testing, which simulates real user interactions in a browser. The E2E tests are located primarily within the `devtools/` package.
+
+## Running E2E Tests
+
+The primary way to run E2E tests is through the `pnpm` script defined in the root `package.json`.
+
+1.  **Build DevTools:** The E2E tests run against a built version of the devtools extension. You must build it first:
+
+    ```shell
+    pnpm -F ng-devtools-mcp build:dev
+    ```
+
+2.  **Run Cypress:** Use the `cy:open` or `cy:run` script:
+    - To open the interactive Cypress Test Runner:
+      ```shell
+      pnpm -F ng-devtools-mcp cy:open
+      ```
+    - To run the tests headlessly in the terminal (ideal for CI):
+      ```shell
+      pnpm -F ng-devtools-mcp cy:run
+      ```
+
+## Test Structure
+
+- **Configuration:** The main Cypress configuration is located at `devtools/cypress.json`.
+- **Specs:** Test files (specs) are located in `devtools/cypress/integration/`.
+- **Custom Commands:** Reusable custom commands and actions are defined in `devtools/cypress/support/`.
+
+### Example E2E Test Snippet
+
+A typical test might look like this:
+
+```typescript
+// in devtools/cypress/integration/profiler.spec.ts
+
+describe('Profiler', () => {
+  beforeEach(() => {
+    cy.visit('/?e2e-app');
+    cy.wait(1000);
+    cy.get('ng-devtools-tabs').find('a').contains('Profiler').click();
+  });
+
+  it('should record and display profiling data', () => {
+    // Find the record button and click it
+    cy.get('button[aria-label="start-recording-button"]').click();
+
+    // Interact with the test application to generate profiling data
+    cy.get('body').find('#cards button').first().click();
+    cy.wait(500);
+
+    // Stop recording
+    cy.get('button[aria-label="stop-recording-button"]').click();
+
+    // Assert that the flame graph is now visible
+    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
+  });
+});
+```
+
+### Best Practices
+
+- **Use `data-` attributes:** Whenever possible, use `data-cy` or similar attributes for selecting elements to make tests more resilient to CSS or structural changes.
+- **Custom Commands:** Encapsulate common sequences of actions into custom commands in the `support` directory to keep tests clean and readable.
+- **Wait for Application State:** Use `cy.wait()` for arbitrary waits sparingly. Prefer to wait for specific UI elements to appear or for network requests to complete to avoid flaky tests.

package/.claude/skills/angular-developer/references/effects.md

@@ -0,0 +1,83 @@
+# Side Effects with `effect` and `afterRenderEffect`
+
+In Angular, an **effect** is an operation that runs whenever one or more signal values it tracks change.
+
+## When to use `effect`
+
+Effects are intended for syncing signal state to imperative, non-signal APIs.
+
+**Valid Use Cases:**
+
+- Logging analytics.
+- Syncing state to `localStorage` or `sessionStorage`.
+- Performing custom rendering to a `<canvas>` or 3rd-party charting library.
+
+**CRITICAL RULE: DO NOT use effects to propagate state.**
+If you find yourself using `.set()` or `.update()` on a signal _inside_ an effect to keep two signals in sync, you are making a mistake. This causes `ExpressionChangedAfterItHasBeenChecked` errors and infinite loops. **Always use `computed()` or `linkedSignal()` for state derivation.**
+
+## Basic Usage
+
+Effects execute asynchronously during the change detection process. They always run at least once.
+
+```ts
+import { Component, signal, effect } from '@angular/core';
+
+@Component({...})
+export class Example {
+  count = signal(0);
+
+  constructor() {
+    // Effect must be created in an injection context (e.g., a constructor)
+    effect((onCleanup) => {
+      console.log(`Count changed to ${this.count()}`);
+
+      const timer = setTimeout(() => console.log('Timer finished'), 1000);
+
+      // Cleanup function runs before the next execution, or when destroyed
+      onCleanup(() => clearTimeout(timer));
+    });
+  }
+}
+```
+
+## DOM Manipulation with `afterRenderEffect`
+
+Standard `effect` runs _before_ Angular updates the DOM. If you need to manually inspect or modify the DOM based on a signal change (e.g., integrating a 3rd party UI library), use `afterRenderEffect`.
+
+`afterRenderEffect` runs after Angular has finished rendering the DOM.
+
+### Render Phases
+
+To prevent reflows (forced layout thrashing), `afterRenderEffect` forces you to divide your DOM reads and writes into specific phases.
+
+```ts
+import { Component, afterRenderEffect, viewChild, ElementRef } from '@angular/core';
+
+@Component({...})
+export class Chart {
+  canvas = viewChild.required<ElementRef>('canvas');
+
+  constructor() {
+    afterRenderEffect({
+      // 1. Read from the DOM
+      earlyRead: () => {
+        return this.canvas().nativeElement.getBoundingClientRect().width;
+      },
+      // 2. Write to the DOM (receives the result of the previous phase)
+      write: (width) => {
+        // NEVER read from the DOM in the write phase.
+        setupChart(this.canvas().nativeElement, width);
+      }
+    });
+  }
+}
+```
+
+**Available Phases (executed in this order):**
+
+1. `earlyRead`
+2. `write` (Never read here)
+3. `mixedReadWrite` (Avoid if possible)
+4. `read` (Never write here)
+
+_Note: `afterRenderEffect` only runs on the client, never during Server-Side Rendering (SSR)._

package/.claude/skills/angular-developer/references/hierarchical-injectors.md

@@ -0,0 +1,43 @@
+# Hierarchical Injectors
+
+Angular's dependency injection system is hierarchical, meaning services can be scoped to different levels of the application.
+
+## Types of Injector Hierarchies
+
+1. **`EnvironmentInjector` Hierarchy**: Configured via `@Injectable({ providedIn: 'root' })` or `ApplicationConfig.providers` during bootstrap. These are global singletons.
+2. **`ElementInjector` Hierarchy**: Created implicitly at each DOM element. Configured via the `providers` or `viewProviders` array in `@Component()` or `@Directive()`.
+
+## Resolution Rules
+
+When a dependency is requested, Angular resolves it in two phases:
+
+1. It searches up the **`ElementInjector`** tree, starting from the requesting component/directive up to the root element.
+2. If not found, it searches the **`EnvironmentInjector`** tree, starting from the closest environment injector up to the root.
+3. If still not found, it throws an error (unless marked optional).
+
+## Resolution Modifiers
+
+You can alter how Angular searches for a dependency using the options object in `inject()`:
+
+- **`optional`**: If the dependency isn't found, return `null` instead of throwing an error.
+- **`self`**: Only check the current `ElementInjector`. Do not look up the parent tree.
+- **`skipSelf`**: Start searching in the parent `ElementInjector`, skipping the current element.
+- **`host`**: Stop searching when reaching the host component's view boundary.
+
+```ts
+@Component({...})
+export class Example {
+  // Returns null if not found instead of crashing
+  optionalService = inject(MyService, { optional: true });
+
+  // Skips this component's providers, looks at parent
+  parentService = inject(ParentService, { skipSelf: true });
+}
+```
+
+## `providers` vs `viewProviders`
+
+When providing a service at the component level:
+
+- **`providers`**: The service is available to the component, its view (template), and any **projected content** (`<ng-content>`).
+- **`viewProviders`**: The service is available to the component and its view, but **NOT** to projected content. Use this to isolate services from content passed in by consumers.

package/.claude/skills/angular-developer/references/host-elements.md

@@ -0,0 +1,80 @@
+# Component Host Elements
+
+The **host element** is the DOM element that matches a component's selector. The component's template renders inside this element.
+
+## Binding to the Host Element
+
+Use the `host` property in the `@Component` decorator to bind properties, attributes, styles, and events to the host element. This is the **preferred approach** over legacy decorators.
+
+```ts
+@Component({
+  selector: 'custom-slider',
+  host: {
+    'role': 'slider', // Static attribute
+    '[attr.aria-valuenow]': 'value', // Attribute binding
+    '[class.active]': 'isActive()', // Class binding
+    '[style.color]': 'color()', // Style binding
+    '[tabIndex]': 'disabled ? -1 : 0', // Property binding
+    '(keydown)': 'onKeyDown($event)', // Event binding
+  },
+})
+export class CustomSlider {
+  value = 0;
+  disabled = false;
+  isActive = signal(false);
+  color = signal('blue');
+
+  onKeyDown(event: KeyboardEvent) {
+    /* ... */
+  }
+}
+```
+
+## Legacy Decorators
+
+`@HostBinding` and `@HostListener` are supported for backwards compatibility but should be avoided in new code.
+
+```ts
+export class CustomSlider {
+  @HostBinding('tabIndex')
+  get tabIndex() {
+    return this.disabled ? -1 : 0;
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    /* ... */
+  }
+}
+```
+
+## Binding Collisions
+
+If both the component (host binding) and the consumer (template binding) bind to the same property:
+
+1. **Static vs Static**: The instance (consumer) binding wins.
+2. **Static vs Dynamic**: The dynamic binding wins.
+3. **Dynamic vs Dynamic**: The component's host binding wins.
+
+## Injecting Host Attributes
+
+Use `HostAttributeToken` with the `inject` function to read static attributes from the host element at construction time.
+
+```ts
+import {Component, HostAttributeToken, inject} from '@angular/core';
+
+@Component({
+  selector: 'app-btn',
+  template: `<ng-content />`,
+})
+export class AppButton {
+  // Throws error if 'type' is missing unless injected with { optional: true }
+  type = inject(new HostAttributeToken('type'));
+}
+```
+
+Usage:
+
+```html
+<app-btn type="primary">Click Me</app-btn>
+```

package/.claude/skills/angular-developer/references/injection-context.md

@@ -0,0 +1,63 @@
+# Injection Context
+
+The `inject()` function can only be used when code is executing within an **injection context**.
+
+## Where is an Injection Context Available?
+
+An injection context is automatically available in:
+
+1. **Field initializers** of classes instantiated by DI (`@Injectable`, `@Component`, `@Directive`, `@Pipe`).
+2. **Constructors** of classes instantiated by DI.
+3. **Factory functions** specified in `useFactory` or `InjectionToken` configurations.
+4. **Functional APIs** executed by Angular (e.g., functional route guards, resolvers, interceptors).
+
+```ts
+@Component({...})
+export class Example {
+  // ✅ Valid: Field initializer
+  private router = inject(Router);
+
+  constructor() {
+    // ✅ Valid: Constructor
+    const http = inject(HttpClient);
+  }
+
+  onClick() {
+    // ❌ Invalid: Not an injection context
+    // const auth = inject(AuthService);
+  }
+}
+```
+
+## `runInInjectionContext`
+
+If you need to run a function within an injection context (often needed for dynamic component creation or testing), use `runInInjectionContext`. This requires access to an existing injector (like `EnvironmentInjector` or `Injector`).
+
+```ts
+import {Injectable, inject, EnvironmentInjector, runInInjectionContext} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class MyService {
+  private injector = inject(EnvironmentInjector);
+
+  doSomethingDynamic() {
+    runInInjectionContext(this.injector, () => {
+      // ✅ Now valid to use inject() here
+      const router = inject(Router);
+    });
+  }
+}
+```
+
+## `assertInInjectionContext`
+
+Use `assertInInjectionContext` in utility functions to guarantee they are called from a valid context. It throws a clear error if not.
+
+```ts
+import {assertInInjectionContext, inject, ElementRef} from '@angular/core';
+
+export function injectNativeElement<T extends Element>(): T {
+  assertInInjectionContext(injectNativeElement);
+  return inject(ElementRef).nativeElement;
+}
+```

package/.claude/skills/angular-developer/references/inputs.md

@@ -0,0 +1,101 @@
+# Inputs
+
+Inputs allow data to flow from a parent component to a child component. Angular recommends using the signal-based `input` API for modern applications.
+
+## Signal-based Inputs
+
+Declare inputs using the `input()` function. This returns an `InputSignal`.
+
+```ts
+import {Component, input, computed} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `<p>User: {{ name() }} ({{ age() }})</p>`,
+})
+export class User {
+  // Optional input with default value
+  name = input('Guest');
+
+  // Required input
+  age = input.required<number>();
+
+  // Inputs are reactive signals
+  label = computed(() => `Name: ${this.name()}`);
+}
+```
+
+### Usage in Template
+
+```html
+<app-user [name]="userName" [age]="25" />
+```
+
+## Configuration Options
+
+The `input` function accepts a config object:
+
+- **Alias**: Change the property name used in templates.
+- **Transform**: Modify the value before it reaches the component.
+
+```ts
+import { input, booleanAttribute } from '@angular/core';
+
+@Component({...})
+export class CustomButton {
+  // Alias example
+  label = input('', { alias: 'btnLabel' });
+
+  // Transform example using built-in helper
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+## Model Inputs (Two-Way Binding)
+
+Use `model()` to create an input that supports two-way data binding.
+
+```ts
+@Component({
+  selector: 'custom-counter',
+  template: `<button (click)="increment()">+</button>`,
+})
+export class CustomCounter {
+  value = model(0);
+
+  increment() {
+    this.value.update((v) => v + 1);
+  }
+}
+```
+
+### Usage
+
+```html
+<!-- Two-way binding with a signal -->
+<custom-counter [(value)]="mySignal" />
+
+<!-- Two-way binding with a plain property -->
+<custom-counter [(value)]="myProperty" />
+```
+
+## Decorator-based Inputs (@Input)
+
+The legacy API remains supported but is not recommended for new code.
+
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({...})
+export class Legacy {
+  @Input({ required: true }) value = 0;
+  @Input({ transform: trimString }) label = '';
+}
+```
+
+## Best Practices
+
+- **Prefer Signals**: Use `input()` instead of `@Input()` for better reactivity and type safety.
+- **Required Inputs**: Use `input.required()` for mandatory data to get build-time errors.
+- **Pure Transforms**: Ensure input transform functions are pure and statically analyzable.
+- **Avoid Collisions**: Do not use input names that collide with standard DOM properties (e.g., `id`, `title`).

package/.claude/skills/angular-developer/references/linked-signal.md

@@ -0,0 +1,59 @@
+# Dependent State with `linkedSignal`
+
+The `linkedSignal` function lets you create writable state that is intrinsically linked to some other state. It is perfect for state that needs a default value derived from an input or another signal, but can still be independently modified by the user.
+
+If the source state changes, the `linkedSignal` resets to a new computed value.
+
+## Basic Usage
+
+When you only need to recompute based on a source, pass a computation function. `linkedSignal` works like `computed`, but the resulting signal is writable (you can call `.set()` or `.update()` on it).
+
+```ts
+import { Component, signal, linkedSignal } from '@angular/core';
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal(['Ground', 'Air', 'Sea']);
+
+  // Defaults to the first option.
+  // If shippingOptions changes, selectedOption resets to the new first option.
+  selectedOption = linkedSignal(() => this.shippingOptions()[0]);
+
+  changeShipping(index: number) {
+    // We can still manually update this signal!
+    this.selectedOption.set(this.shippingOptions()[index]);
+  }
+}
+```
+
+## Advanced Usage: Accounting for Previous State
+
+Sometimes, when the source state changes, you want to preserve the user's manual selection if it is still valid. To do this, use the object syntax providing `source` and `computation`.
+
+The `computation` function receives the new value of the source, and a `previous` object containing the previous source value and the previous `linkedSignal` value.
+
+```ts
+interface ShippingMethod { id: number; name: string; }
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal<ShippingMethod[]>([
+    {id: 0, name: 'Ground'}, {id: 1, name: 'Air'}, {id: 2, name: 'Sea'}
+  ]);
+
+  selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
+    source: this.shippingOptions,
+    computation: (newOptions, previous) => {
+      // If the newly loaded options still contain the user's previously
+      // selected option, keep it selected. Otherwise, reset to the first option.
+      return newOptions.find(opt => opt.id === previous?.value.id) ?? newOptions[0];
+    }
+  });
+}
+```
+
+### When to use `linkedSignal` vs `computed` vs `effect`
+
+- Use `computed`: When state is **strictly** derived from other state and should never be manually updated.
+- Use `linkedSignal`: When state is derived from other state, but the user **must** be able to override or manually update it.
+- **Never** use `effect` to sync one piece of state to another. That is an anti-pattern. Use `computed` or `linkedSignal` instead.

package/.claude/skills/angular-developer/references/loading-strategies.md

@@ -0,0 +1,61 @@
+# Route Loading Strategies
+
+Angular supports two main strategies for loading routes and components to balance initial load time and navigation responsiveness.
+
+## Eager Loading
+
+Components are bundled into the initial JavaScript payload and are available immediately.
+
+```ts
+{ path: 'home', component: Home }
+```
+
+- **Pros**: Seamless transitions.
+- **Cons**: Increases initial bundle size.
+
+## Lazy Loading
+
+Components or routes are loaded only when the user navigates to them. This creates separate JavaScript "chunks".
+
+### Lazy Loading Components
+
+Use `loadComponent` to fetch the component on demand.
+
+```ts
+{
+  path: 'admin',
+  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
+}
+```
+
+### Lazy Loading Child Routes
+
+Use `loadChildren` to fetch a set of routes.
+
+```ts
+{
+  path: 'settings',
+  loadChildren: () => import('./settings/settings.routes'),
+}
+```
+
+## Injection Context and Lazy Loading
+
+Loader functions run within the **injection context** of the current route. This allows you to call `inject()` to make context-aware loading decisions.
+
+```ts
+{
+  path: 'dashboard',
+  loadComponent: () => {
+    const flags = inject(FeatureFlags);
+    return flags.isPremium
+      ? import('./premium-dashboard')
+      : import('./basic-dashboard');
+  },
+}
+```
+
+## Recommendation
+
+- Use **Eager Loading** for the primary landing pages.
+- Use **Lazy Loading** for all other feature areas to keep the initial bundle small.