@anglr/select 17.2.0 → 18.0.0-beta.20260805043138

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

@@ -1,44 +1,44 @@
-# Rendering Strategies
-
-Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
-
-## 1. Client-Side Rendering (CSR)
-
-**Default Strategy.** Content is rendered entirely in the browser.
-
-- **Use case**: Interactive dashboards, internal tools.
-- **Pros**: Simplest to configure, low server cost.
-- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
-
-## 2. Static Site Generation (SSG / Prerendering)
-
-Content is pre-rendered into static HTML files at **build time**.
-
-- **Use case**: Marketing pages, blogs, documentation.
-- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
-- **Cons**: Requires rebuild for content updates, not for user-specific data.
-
-## 3. Server-Side Rendering (SSR)
-
-Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
-
-- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
-- **Pros**: Excellent SEO, fast initial content visibility.
-- **Cons**: Requires a server (Node.js), higher server cost/latency.
-
-## Hydration
-
-Hydration is the process of making server-rendered HTML interactive in the browser.
-
-- **Full Hydration**: The entire app becomes interactive at once.
-- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
-- **Event Replay**: Captures and replays user events that happened before hydration finished.
-
-## Decision Matrix
-
-| Requirement                     | Strategy             |
-| :------------------------------ | :------------------- |
-| **SEO + Static Content**        | SSG                  |
-| **SEO + Dynamic Content**       | SSR                  |
-| **No SEO + High Interactivity** | CSR                  |
-| **Mixed**                       | Hybrid (Route-based) |
+# Rendering Strategies
+
+Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
+
+## 1. Client-Side Rendering (CSR)
+
+**Default Strategy.** Content is rendered entirely in the browser.
+
+- **Use case**: Interactive dashboards, internal tools.
+- **Pros**: Simplest to configure, low server cost.
+- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
+
+## 2. Static Site Generation (SSG / Prerendering)
+
+Content is pre-rendered into static HTML files at **build time**.
+
+- **Use case**: Marketing pages, blogs, documentation.
+- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
+- **Cons**: Requires rebuild for content updates, not for user-specific data.
+
+## 3. Server-Side Rendering (SSR)
+
+Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
+
+- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
+- **Pros**: Excellent SEO, fast initial content visibility.
+- **Cons**: Requires a server (Node.js), higher server cost/latency.
+
+## Hydration
+
+Hydration is the process of making server-rendered HTML interactive in the browser.
+
+- **Full Hydration**: The entire app becomes interactive at once.
+- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
+- **Event Replay**: Captures and replays user events that happened before hydration finished.
+
+## Decision Matrix
+
+| Requirement                     | Strategy             |
+| :------------------------------ | :------------------- |
+| **SEO + Static Content**        | SSG                  |
+| **SEO + Dynamic Content**       | SSR                  |
+| **No SEO + High Interactivity** | CSR                  |
+| **Mixed**                       | Hybrid (Route-based) |

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

@@ -1,77 +1,77 @@
-# Async Reactivity with `resource`
-
-> [!IMPORTANT]
-> The `resource` API is currently experimental in Angular.
-
-A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
-
-## Basic Usage
-
-The `resource` function accepts an options object with two main properties:
-
-1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
-2. `loader`: An async function that fetches data based on the parameters.
-
-```ts
-import { Component, resource, signal, computed } from '@angular/core';
-
-@Component({...})
-export class UserProfile {
-  userId = signal('123');
-
-  userResource = resource({
-    // Reactively tracking userId
-    params: () => ({ id: this.userId() }),
-
-    // Executes whenever params change
-    loader: async ({ params, abortSignal }) => {
-      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
-      if (!response.ok) throw new Error('Network error');
-      return response.json();
-    }
-  });
-
-  // Use the resource value in computed signals
-  userName = computed(() => {
-    if (this.userResource.hasValue()) {
-      return this.userResource.value()?.name;
-    } else {
-      return 'Loading...';
-    }
-  });
-}
-```
-
-## Aborting Requests
-
-If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
-
-## Reloading Data
-
-You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
-
-```ts
-this.userResource.reload();
-```
-
-## Resource Status Signals
-
-The `Resource` object provides several signals to read its current state:
-
-- `value()`: The resolved data, or `undefined`.
-- `hasValue()`: Type-guard boolean. `true` if a value exists.
-- `isLoading()`: Boolean indicating if the loader is currently running.
-- `error()`: The error thrown by the loader, or `undefined`.
-- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
-
-## Local Mutation
-
-You can optimistically update the resource's value directly. This changes the status to `'local'`.
-
-```ts
-this.userResource.value.set({name: 'Optimistic Update'});
-```
-
-## Reactive Data Fetching with `httpResource`
-
-If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.
+# Async Reactivity with `resource`
+
+> [!IMPORTANT]
+> The `resource` API is currently experimental in Angular.
+
+A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
+
+## Basic Usage
+
+The `resource` function accepts an options object with two main properties:
+
+1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
+2. `loader`: An async function that fetches data based on the parameters.
+
+```ts
+import { Component, resource, signal, computed } from '@angular/core';
+
+@Component({...})
+export class UserProfile {
+  userId = signal('123');
+
+  userResource = resource({
+    // Reactively tracking userId
+    params: () => ({ id: this.userId() }),
+
+    // Executes whenever params change
+    loader: async ({ params, abortSignal }) => {
+      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
+      if (!response.ok) throw new Error('Network error');
+      return response.json();
+    }
+  });
+
+  // Use the resource value in computed signals
+  userName = computed(() => {
+    if (this.userResource.hasValue()) {
+      return this.userResource.value()?.name;
+    } else {
+      return 'Loading...';
+    }
+  });
+}
+```
+
+## Aborting Requests
+
+If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
+
+## Reloading Data
+
+You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
+
+```ts
+this.userResource.reload();
+```
+
+## Resource Status Signals
+
+The `Resource` object provides several signals to read its current state:
+
+- `value()`: The resolved data, or `undefined`.
+- `hasValue()`: Type-guard boolean. `true` if a value exists.
+- `isLoading()`: Boolean indicating if the loader is currently running.
+- `error()`: The error thrown by the loader, or `undefined`.
+- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
+
+## Local Mutation
+
+You can optimistically update the resource's value directly. This changes the status to `'local'`.
+
+```ts
+this.userResource.value.set({name: 'Optimistic Update'});
+```
+
+## Reactive Data Fetching with `httpResource`
+
+If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.

package/.claude/skills/angular-developer/references/route-animations.md

@@ -1,56 +1,56 @@
-# Route Transition Animations
-
-Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
-
-## Enabling View Transitions
-
-Add `withViewTransitions()` to your router configuration.
-
-```ts
-provideRouter(routes, withViewTransitions());
-```
-
-This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
-
-## How it Works
-
-1. Browser takes a screenshot of the old state.
-2. Router updates the DOM (activates new component).
-3. Browser takes a screenshot of the new state.
-4. Browser animates between the two states.
-
-## Customizing with CSS
-
-Transitions are customized in **global CSS files** (not component-scoped CSS).
-
-Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
-
-```css
-/* Example: Cross-fade + Slide */
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
-}
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
-}
-```
-
-## Advanced Control
-
-Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
-
-```ts
-withViewTransitions({
-  onViewTransitionCreated: ({transition, from, to}) => {
-    // Skip animation for specific routes
-    if (to.url === '/no-animation') {
-      transition.skipTransition();
-    }
-  },
-});
-```
-
-## Best Practices
-
-- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
-- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).
+# Route Transition Animations
+
+Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
+
+## Enabling View Transitions
+
+Add `withViewTransitions()` to your router configuration.
+
+```ts
+provideRouter(routes, withViewTransitions());
+```
+
+This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
+
+## How it Works
+
+1. Browser takes a screenshot of the old state.
+2. Router updates the DOM (activates new component).
+3. Browser takes a screenshot of the new state.
+4. Browser animates between the two states.
+
+## Customizing with CSS
+
+Transitions are customized in **global CSS files** (not component-scoped CSS).
+
+Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
+
+```css
+/* Example: Cross-fade + Slide */
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+```
+
+## Advanced Control
+
+Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition, from, to}) => {
+    // Skip animation for specific routes
+    if (to.url === '/no-animation') {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
+## Best Practices
+
+- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
+- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).

package/.claude/skills/angular-developer/references/route-guards.md

@@ -1,52 +1,52 @@
-# Route Guards
-
-Route guards control whether a user can navigate to or leave a route.
-
-## Types of Guards
-
-- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
-- **`CanActivateChild`**: Can the user access children of this route?
-- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
-- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
-
-## Creating a Guard
-
-Guards are typically functional since Angular 15.
-
-```ts
-export const authGuard: CanActivateFn = (route, state) => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  if (authService.isLoggedIn()) {
-    return true;
-  }
-
-  // Redirect to login
-  return router.parseUrl('/login');
-};
-```
-
-## Applying Guards
-
-Add them to the route configuration as an array. They execute in order.
-
-```ts
-{
-  path: 'admin',
-  component: Admin,
-  canActivate: [authGuard],
-  canActivateChild: [adminChildGuard],
-  canDeactivate: [unsavedChangesGuard]
-}
-```
-
-## Return Values
-
-- `boolean`: `true` to allow, `false` to block.
-- `UrlTree` or `RedirectCommand`: Redirect to a different route.
-- `Observable` or `Promise`: Resolves to the above types.
-
-## Security Note
-
-**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.
+# Route Guards
+
+Route guards control whether a user can navigate to or leave a route.
+
+## Types of Guards
+
+- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
+- **`CanActivateChild`**: Can the user access children of this route?
+- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
+- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
+
+## Creating a Guard
+
+Guards are typically functional since Angular 15.
+
+```ts
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+
+  // Redirect to login
+  return router.parseUrl('/login');
+};
+```
+
+## Applying Guards
+
+Add them to the route configuration as an array. They execute in order.
+
+```ts
+{
+  path: 'admin',
+  component: Admin,
+  canActivate: [authGuard],
+  canActivateChild: [adminChildGuard],
+  canDeactivate: [unsavedChangesGuard]
+}
+```
+
+## Return Values
+
+- `boolean`: `true` to allow, `false` to block.
+- `UrlTree` or `RedirectCommand`: Redirect to a different route.
+- `Observable` or `Promise`: Resolves to the above types.
+
+## Security Note
+
+**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.

package/.claude/skills/angular-developer/references/router-lifecycle.md

@@ -1,45 +1,45 @@
-# Router Lifecycle and Events
-
-Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
-
-## Common Router Events (Chronological)
-
-1. **`NavigationStart`**: Navigation begins.
-2. **`RoutesRecognized`**: Router matches the URL to a route.
-3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
-4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
-5. **`NavigationEnd`**: Navigation completed successfully.
-6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
-7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
-
-## Subscribing to Events
-
-Inject the `Router` and filter the `events` observable.
-
-```ts
-import {Router, NavigationStart, NavigationEnd} from '@angular/router';
-
-export class MyService {
-  private router = inject(Router);
-
-  constructor() {
-    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
-      console.log('Navigated to:', event.url);
-    });
-  }
-}
-```
-
-## Debugging
-
-Enable detailed console logging of all routing events during application bootstrap.
-
-```ts
-provideRouter(routes, withDebugTracing());
-```
-
-## Common Use Cases
-
-- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
-- **Analytics**: Track page views by listening for `NavigationEnd`.
-- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.
+# Router Lifecycle and Events
+
+Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
+
+## Common Router Events (Chronological)
+
+1. **`NavigationStart`**: Navigation begins.
+2. **`RoutesRecognized`**: Router matches the URL to a route.
+3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
+4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
+5. **`NavigationEnd`**: Navigation completed successfully.
+6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
+7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
+
+## Subscribing to Events
+
+Inject the `Router` and filter the `events` observable.
+
+```ts
+import {Router, NavigationStart, NavigationEnd} from '@angular/router';
+
+export class MyService {
+  private router = inject(Router);
+
+  constructor() {
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
+      console.log('Navigated to:', event.url);
+    });
+  }
+}
+```
+
+## Debugging
+
+Enable detailed console logging of all routing events during application bootstrap.
+
+```ts
+provideRouter(routes, withDebugTracing());
+```
+
+## Common Use Cases
+
+- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
+- **Analytics**: Track page views by listening for `NavigationEnd`.
+- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.